[hideprofile]
[sign][/sign]
[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;
}
</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/3979/540967.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">
Детская находится в глубокой земляной впадине, сокрытой кустами лапчатки. Королевы выбрали убежище подальше от шумных оруженосцев и воителей. Палатка также расположена дальше прочих от целительской, куда маленькие негодники могли бы сунуться, чтобы отведать ароматных трав. Впадина устлана подстилками, что сделаны из камышей да мха, иногда добавляют перьев для мягкости. Здесь легко споткнуться о разнообразные игрушки котят, вроде желудей или ракушек.<br><br>
В теплое время года благоухание цветов лапчатки надежно скрывает запахи детской. Снаружи, по другую сторону плотных зарослей, бдят ночами дозорные, чтобы матери-королевы могли спать спокойно.
</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]
