[hideprofile]

[html]<div class="forest-adaptive-wrapper">
<style>
/* 1. КОНТЕЙНЕР И ТЕМЫ */
.forest-adaptive-wrapper { background: transparent !important; padding: 0; margin: 10px auto; max-width: 907px; }

.forest-card {
  --f-bg: #e4e4e1; --f-txt: #333; --f-acc: #556b2f; --f-brd: #eeeeee;
  border-radius: 15px; background: var(--f-bg); color: var(--f-txt);
  font-family: 'Georgia', serif; border: 1px solid var(--f-brd);
  overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.1); position: relative;
}

/* Переключатели тем */
#theme-dark:checked ~ .forest-card { --f-bg: #1a241a; --f-txt: #d1d8d1; --f-acc: #3d5e3d; --f-brd: #2d3a2d; }
#theme-winter:checked ~ .forest-card { --f-bg: #f4f7f9; --f-txt: #2c3e50; --f-acc: #5dade2; --f-brd: #d6eaf8; }

.color-switches {
  position: absolute; top: 15px; right: 15px; z-index: 20;
  display: flex; gap: 8px; background: rgba(0,0,0,0.3); padding: 5px; border-radius: 20px;
}
.color-switches label { width: 15px; height: 15px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; transition: 0.3s; }
.btn-std { background: #556b2f; }
.btn-dark { background: #1a3c1a; }
.btn-winter { background: #5dade2; }

/* 2. ШАПКА И ЭФФЕКТ ЦИТАТЫ */
.f-header { position: relative; height: 280px; overflow: hidden; background: #000; }
.f-header img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s ease-in-out; }

.f-title-box {
  position: absolute; bottom: 0; width: 100%; padding: 30px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #e4e4e1 !important; text-align: center; z-index: 5; transition: 0.4s;
}
.f-title-box h1 { margin-top: -100px; font-size: 39px; text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 2px 5px #000; }

.f-hover-quote {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6); color: #fff; display: flex; align-items: center;
  justify-content: center; padding: 40px; text-align: center; font-style: italic;
  opacity: 0; transition: 0.5s; z-index: 10; pointer-events: none; line-height: 1.6;
font-size: 19px; font-family: Arial Narrow;
}

.f-header:hover img { transform: scale(1.1); filter: blur(2px); }
.f-header:hover .f-hover-quote { opacity: 1; }
.f-header:hover .f-title-box { opacity: 0; }

/* 3. НАВИГАЦИЯ И КОНТЕНТ */
.forest-adaptive-wrapper input[type="radio"] { display: none !important; }
.f-nav { display: flex; background: rgba(0,0,0,0.03); border-bottom: 1px solid var(--f-brd); }
.f-nav label {
  flex: 1; padding: 15px 5px; text-align: center; cursor: pointer;
  font-size: 11px; text-transform: uppercase; font-weight: bold;
  color: var(--f-txt); opacity: 0.5; transition: 0.3s; border-bottom: 2px solid transparent;
}
.f-content { display: none; padding: 25px; line-height: 1.7; font-size: 15px; min-height: 250px; animation: fadeIn 0.4s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

#t-1:checked ~ .forest-card .f-nav label[for="t-1"], #t-2:checked ~ .forest-card .f-nav label[for="t-2"],
#t-3:checked ~ .forest-card .f-nav label[for="t-3"], #t-4:checked ~ .forest-card .f-nav label[for="t-4"] {
  opacity: 1; color: var(--f-acc); border-bottom: 2px solid var(--f-acc);
}
#t-1:checked ~ .forest-card #c-1, #t-2:checked ~ .forest-card #c-2,
#t-3:checked ~ .forest-card #c-3, #t-4:checked ~ .forest-card #c-4 { display: block; }

/* Блоки цитат */
.f-block { margin-bottom: 15px; padding: 15px; border-left: 3px solid var(--f-acc); background: rgba(128,128,128,0.05); border-radius: 0 8px 8px 0; }
.f-block b { display: block; text-transform: uppercase; font-size: 12px; color: var(--f-acc); margin-bottom: 5px; }
.f-link { color: var(--f-acc); font-weight: bold; text-decoration: none; border-bottom: 1px dashed var(--f-acc); }

/* Стили для цитат */
.f-quote {
  margin-bottom: 15px; padding: 15px; border-left: 3px solid var(--f-acc);
  background: rgba(128,128,128,0.05); border-radius: 0 8px 8px 0;
  font-style: normal;
}
.f-quote b:first-child {
  display: block; text-transform: uppercase; font-size: 12px;
  color: var(--f-acc); margin-bottom: 5px;
}

/* Стили для таблиц */
.f-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  border: none !important;
}
.f-table td {
  padding: 4px 8px;
  vertical-align: top;
  border: none !important;
}
.f-table tr td:first-child {
  padding-left: 0;
}

/* Стили для списков внутри цитат */
.f-quote ul {
  margin: 5px 0 0 0;
  padding-left: 20px;
}
.f-quote li {
  list-style-type: disc;
  margin-bottom: 3px;
}
</style>

  <input type="radio" name="theme" id="theme-std" checked>
  <input type="radio" name="theme" id="theme-dark">
  <input type="radio" name="theme" id="theme-winter">
 
  <input type="radio" name="tabs" id="t-1" checked>
  <input type="radio" name="tabs" id="t-2">
  <input type="radio" name="tabs" id="t-3">
  <input type="radio" name="tabs" id="t-4">

  <div class="forest-card">
    <div class="color-switches">
      <label for="theme-std" class="btn-std" title="Стандарт"></label>
      <label for="theme-dark" class="btn-dark" title="Темный лес"></label>
      <label for="theme-winter" class="btn-winter" title="Зима"></label>
    </div>

    <div class="f-header">
      <img src="https://upforme.ru/uploads/0004/e7/0d/2295/139294.jpg">
      <div class="f-hover-quote">
        <div style="text-align:center">— Смотри, здесь растет много мха, — указала Черника на землю под деревьями, — аккуратно бери кусок, чтоб был цельным, и неси к ручью.</div>
      </div>
      <div class="f-title-box"><h1>Вход и стены лагеря</h1></div>
    </div>

    <div class="f-nav">
      <label for="t-1">Описание</label>
      <label for="t-2">Травы</label>
      <label for="t-3">Добыча</label>
      <label for="t-4">Особенности</label>
    </div>

    <!-- ВКЛАДКА 1: ОПИСАНИЕ -->
    <div class="f-content" id="c-1">
      Вокруг лагеря незамкнутым кольцом течёт ручей. Его можно с лёгкостью перепрыгнуть, и можно даже не бояться там утонуть, ведь уровень воды в нём не выше пуза воина. В этом ручье маленькие котята учатся плавать. Местами его окружают то песочный берег, то огромные камыши. Зимой же этот небольшой ручей замерзает, создавая для учеников очень интересное занятие.
    </div>

    <!-- ВКЛАДКА 2: ТРАВЫ -->
    <div class="f-content" id="c-2">
      <div class="f-quote">
        <b>ЛЕКАРСТВЕННЫЕ РАСТЕНИЯ</b>
        • Отсутствуют
      </div>
      <hr style="border-color: var(--f-brd); margin: 15px 0;">
      <div class="f-quote">
        <b>ЯДОВИТЫЕ РАСТЕНИЯ/ГРИБЫ</b>
        • Отсутствуют
      </div>
      <hr style="border-color: var(--f-brd); margin: 15px 0;">
      <div class="f-quote">
        <b>ПРОЧЕЕ</b>
        • Отсутствуют
      </div>
    </div>

    <!-- ВКЛАДКА 3: ДОБЫЧА -->
    <div class="f-content" id="c-3">
      <div class="f-quote"><b>УСЛОВИЯ МЕСТА</b> • Территории лагеря не являются пригодными для охоты.</div>
      <hr style="border-color: var(--f-brd); margin: 15px 0;">
      <div class="f-quote"><b>ОПАСНЫЕ/ХИЩНИКИ</b> • Отсутствуют</div>
      <hr style="border-color: var(--f-brd); margin: 15px 0;">
      <div class="f-quote"><b>ДОБЫЧА</b> • Отсутствует</div>
      <hr style="border-color: var(--f-brd); margin: 15px 0;">
      <div class="f-quote"><b>ПРОСТЕЙШАЯ ДОБЫЧА</b> • Отсутствует</div>
    </div>

    <!-- ВКЛАДКА 4: ОСОБЕННОСТИ -->
    <div class="f-content" id="c-4">
      • Молодые воители проводят свою первую безмолвную ночь, охраняя путь ко входу в лагерь. Являясь первым порогом в сердце племени, его входы и выходы охраняются с особой бдительностью.
    </div>

  </div>
</div>[/html]

Отредактировано Шелест Звёзд (2014-03-25 10:49:36)