[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/001c/34/47/3/117999.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">
<a href="https://cwotgoloski.ru/viewtopic.php?id=974#p19591" class="f-link">Предыдущая тема</a><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]
