[hideprofile][html]<div class="festival-forum" id="festival-forum-mybb" aria-label="Фестиваль Цветения Кэмерон" style="--pal1:#ba808b;--pal2:#c78c96;--pal3:#d498a3;--pal4:#e3aab5;--pal5:#f2b9c4;">
<style>
:root {
--pal1:#ba808b; --pal2:#c78c96; --pal3:#d498a3; --pal4:#e3aab5; --pal5:#f2b9c4;
}
.festival-forum {
max-width: 520px;
margin: 0 auto;
padding: 12px;
font-family: Arial, sans-serif;
background-image: url(https://upforme.ru/uploads/001c/25/14/3/666723.jpg);
background-size: cover;
}
.festival-panel {
border-radius: 14px;
padding: 14px;
background: rgba(255,255,255,.28);
border: 1px solid rgba(255,255,255,.6);
box-shadow: 0 10px 28px rgba(0,0,0,.15);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #1e1e1e;
overflow: hidden;
}
.festival-banner {
width: 94%;
padding: 12px 14px;
border-radius: 10px;
text-align: center;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Nunito Sans';
color: #ffffff;
background: transparent; /* фон через ::before */
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
/* Фон баннера*/
.festival-banner::before {
content: "";
position: absolute;
inset: 0;
background-image: url(https://upforme.ru/uploads/001c/25/14/4/871960.png);
background-size: cover;
background-position: center;
filter: blur(0px);
transition: filter .6s ease;
z-index: 0;
}
/* Тёмный градиент поверх фона*/
.festival-banner::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
z-index: 1;
pointer-events: none;
}
/* Текст баннера*/
.festival-banner .banner-text {
position: relative;
z-index: 2;
font-weight: 800;
font-family: 'Great Vibes';
font-size: 46px;
letter-spacing: 5px;
color: #fff;
text-shadow: 0 2px 6px rgba(0,0,0,.6);
transform: scale(0.8);
opacity: 0;
transform-origin: center;
transition: transform .6s ease, opacity .6s ease;
}
/* Блюр фона при наведении на баннер */
.festival-banner:hover::before {
filter: blur(6px);
}
/* Анимация появления текста при наведении */
.festival-banner:hover .banner-text {
transform: scale(1);
opacity: 1;
}
@media (max-width: 600px) {
.festival-banner { height: 140px; }
.festival-banner .banner-text { font-size: 28px; }
}
.festival-description {
background: rgba(255,255,255,.85);
border-radius: 12px;
padding: 12px;
margin: 6px 0 12px;
color: #2b1d22;
border: 1px solid rgba(255,255,255,.9);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* Аккордеон в колонну */
.festival-accordion {
display: flex;
flex-direction: column; /* колонна */
gap: 12px;
padding: 6px 0 12px;
}
/* Один элемент аккордеона */
.accordion-item {
position: relative;
overflow: hidden;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.85);
color: #fff;
background: transparent; /* удаляем изображение как фон здесь */
}
.accordion-item::before {
content: "";
position: absolute;
inset: 0;
/* свежий mint-градиент, ограниченный самим элементом */
background: linear-gradient(135deg, rgba(43,214,180,0.92), rgba(54,196,255,0.92));
transform: none; /* никаких масштабирований */
z-index: 0;
transition: filter .25s ease;
}
.accordion-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
z-index: 1;
pointer-events: none;
}
.accordion-item .card-header,
.accordion-item .card-content {
position: relative;
z-index: 2; /* над фоном и градиентом */
}
/* Блюр при наведении и при открытии, без масштабирования */
.accordion-item:hover::before,
.accordion-item:has(input:checked)::before {
filter: blur(6px);
}
/* скрываем крестик-чекбокс */
.accordion-item .toggle {
display: none;
}
/* Заголовок карточки */
.accordion-item .card-header {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
cursor: pointer;
text-align: center;
color: #fff;
background: rgba(0,0,0,.25);
user-select: none;
padding: 0;
}
/* Текст внутри заголовка на случай длинных надписей */
.accordion-item .card-header span { display: inline-block; }
/* Контент карточки */
.accordion-item .card-content {
max-height: 0;
overflow-y: auto;
padding: 0 12px;
background: rgba(255,255,255,.95);
color: #2b1d22;
font-size: 13px;
transition: max-height .45s ease, padding .45s ease;
}
/* Открытие */
.accordion-item input:checked ~ .card-content {
max-height: 360px;
padding: 10px 12px;
}
@media (max-width: 600px) {
.accordion-item { width: 100%; }
.accordion-item .card-header { height: 90px; }
}
/* Участники: блюр на hover */
.participant {
width: 240px;
height: 110px;
border-radius: 12px;
overflow: hidden;
position: relative;
background: #ddd;
display: inline-block;
}
.participant img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: filter .25s ease;
}
.participant:hover img {
filter: blur(3px);
}
.participant .overlay-info {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 7px 9px;
font-size: 12px;
color: #fff;
background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0));
transform: translateY(100%);
opacity: 0;
transition: transform .25s ease, opacity .25s ease;
display: flex;
flex-direction: column;
gap: 2px;
}
.participant:hover .overlay-info {
transform: translateY(0);
opacity: 1;
}
</style>
<div class="festival-bg" aria-hidden="true"></div>
<div class="festival-panel">
<div class="festival-banner" role="heading" aria-level="2">
<span class="banner-text">Фестиваль Цветения Кэмерона</span>
</div>
<div class="festival-description" aria-label="Описание фестиваля">
<p>Замок Кэмерон, расположенный в живописных холмах региона Канто, всегда был известен любовью своих владельцев к устраиванию размашистых праздников для встречи весны, стараясь менять тематику. Фестиваль Цветения, проводимый раз в четыре года, привлекает путешественников по сей день со всех уголков мира. Замок и его территория наполняются цветочными декорациями, многочисленными площадками для представлений странствующих актёров, музыкантов и фокусников, игровых зон. В этом стоит поучаствовать хотя бы раз в жизни!</p>
<p>В этом году посетители могут насладиться прогулкой по прекрасному саду, посмотреть выступления артистов и даже принять в них участие, попробовать различную еду, посетить фотозоны и много другое. Оканчивается весенний фестиваль грандиозным балом-маскарадом. В распоряжении гостей будет множество вариантов для ночлега, вроде съёмных частных домов и постоялых дворов. К оказанию услуг готовы множество ремесленников, способных сделать вам или вашим покемонам стрижку, спа-процедуру, кулинарное представление и многое, многое другое.</p>
<p>Сегодня декор фестиваля сохраняет преимущественно японские мотивы.</p>
<p>Для участия приглашаем вас отметиться здесь и поделиться вашей фотокарточкой (шириной от 240px).</p>
</div>
<section class="festival-accordion" aria-label="Аккордеон активностей">
<!-- Карточка 1 -->
<div class="accordion-item">
<input type="checkbox" id="acc1" class="toggle">
<label for="acc1" class="card-header"><span>Ежедневный вход</span></label>
<div class="card-content" aria-label="Детали активности 1">
<p>В соответствующей теме каждый игровой день участники фестиваля могут просто отметиться или отписать коротенький пост, предварительно бросив кубик на 20 граней. Получив результат, участник может принять судьбу или активировать модификатор, после чего гейм-мастер своим сообщением закрепляет результат. При желании получить непонятный бонус — можно расписать небольшую сценку о том, как игрок пытается отметиться у волонтёра на главном ресепшене фестиваля.</p>
<p>Игрок обязательно сам указывает, какие модификаторы у него влияют на бросок! Будь это бафф, дебафф, предмет и т.д.</p>
<p><b>Бросок:</b> 1d20 + мод</p>
<p><b>Порог сложности:</b> 10</p>
<p><b>Исходы:</b>
<p>Критический успех (19–20): +7 лепестков + цветок; на следующую попытку входа даётся небольшое преимущество к модификатору (например, +1 или +2).</p>
<p>Успех (11–18): +5 лепестков + цветок.</p>
<p>Фейл (2–10): "Толпа задержала" и +3 лепестка за настойчивость; возможен нейтральный или маленький дебафф к следующей попытке отметки.</p>
<p>Критический фейл (1): +1 лепесток из жалости, а также дебафф к следующей попытке отметки или участию в активности.</p>
</div>
</div>
<!-- Карточка 2 -->
<div class="accordion-item">
<input type="checkbox" id="acc2" class="toggle">
<label for="acc2" class="card-header"><span>Прогулка по территории</span></label>
<div class="card-content" aria-label="Детали активности 2">
<p>Каждый день участники фестиваля могут отписать небольшую сцену прогулки по окрестностям замка. До прогулки игрок бросает кубик в соответствующей теме, и невидимая длань Всевидящего Шара Судьбы обрисовывает ситуацию и результат броска. Получив результат, участник редактирует сообщение и отыгрывает сценку. </p>
<p>Игрок обязательно сам указывает, какие модификаторы у него влияют на бросок! Будь это бафф, дебафф, предмет и т.д.</p>
<p><b>Бросок:</b> 1d20 + 1 (если в сцене активно участвует покемон)</p>
<p><b>Порог сложности:</b> 10</p>
<p><b>Исходы:</b>
<p>Критический успех (19–20): +9 лепестков + хороший предмет; а также временный маленький бафф к следующей активности (пример: +1 к следующему броску).</p>
<p>Успех (11–18): +6 лепестков + простой предмет.</p>
<p>Частичный успех (1–10): +3 лепестка.</p>
</div>
</div>
<!-- Карточка 3 -->
<div class="accordion-item">
<input type="checkbox" id="acc3" class="toggle">
<label for="acc3" class="card-header"><span>Шатёр предсказателя</span></label>
<div class="card-content" aria-label="Детали активности 3">
<p>Игрок бросает кубик и получает карту таро. При желании получить +2 к броску пишет пост от 700 символов. Всё просто.</p>
<p>В данной активности баффы, модификаторы и предметы не участвуют!</p>
<p><b>Бросок:</b> 1d20 + (до +2 за глубину поста)</p>
<p><b>Порог сложности:</b> 12</p>
<p><b>Исходы:</b>
<p>Критический успех (19–20): действие карты таро + большой цветок.</p>
<p>Успех (12–18): действие карты таро + средний цветок</p>
<p>Фейл (3–11): действие карты таро + маленький цветок.</p>
<p>Критический фейл (1–2): действие карты таро.</p>
</div>
</div>
<!-- Карточка 4 -->
<div class="accordion-item">
<input type="checkbox" id="acc4" class="toggle">
<label for="acc4" class="card-header"><span>Прокат костюмов</span></label>
<div class="card-content" aria-label="Детали активности 4">
<p>Игрок раз в игровой день может посетить ателье, предварительно бросив кубик, чтобы примерить наряд, аксессуары или приодеть покемона-спутника. В собранном по итогу образе участник посетит финальный бал. Если в первый день игроку выпал "фейл" и он выбрал простой аксессуар, то в следующий раз, получив "критический успех", игрок может улучшить аксессуары до дизайнерского уровня.</p>
<p>Игрок обязательно сам указывает, какие модификаторы у него влияют на бросок! Будь это бафф, дебафф, предмет и т.д.</p>
<p><b>Бросок:</b> 1d20 + мод</p>
<p><b>Порог сложности:</b> 12</p>
<p><b>Исходы:</b>
<p>Критический успех (19–20): +15 лепестков; дизайнерский наряд; +2 к социальному рейтингу на балу.</p>
<p>Успех (12–18): +9 лепестков; красивый наряд; +1 к соц. рейтингу.</p>
<p>Фейл (3–11): +7 лепестков; простой наряд.</p>
<p>Критический фейл (1–2): +3 лепестка; наряд шута; +1 к рейтингу среди обслуги.</p>
</div>
</div>
<!-- Карточка 5 -->
<div class="accordion-item">
<input type="checkbox" id="acc5" class="toggle">
<label for="acc5" class="card-header"><span>Выступление с артистами</span></label>
<div class="card-content" aria-label="Детали активности 5">
<p>Раз в игровой день игрок может прогуляться по площади, принять участие в местных плясках, выступлениях, поиграть в азартные игры, посетить различные выставки и т.д. Бросив кубик на 20 граней, игрок ждёт ответа от гейм-мастера и отписывает небольшой пост с результатом (1000-1200 символов достаточно).</p>
<p>Игрок обязательно сам указывает, какие модификаторы у него влияют на бросок! Будь это бафф, дебафф, предмет и т.д.</p>
<p><b>Бросок:</b> 1d20 + мод + 1 (при участии покемона)</p>
<p><b>Порог сложности:</b> 10</p>
<p><b>Исходы:</b>
<p>Критический успех (19–20): +25 лепестков; приз зрителей; +2 к соц. рейтингу на балу.</p>
<p>Успех (11–18): +15 лепестков; +1 к соц. рейтингу на балу.</p>
<p>Фейл (3–10): +7 лепестков; + к репутации музыкантов; возможен сюжетный поворот.</p>
<p>Критический фейл (1–2): +3 лепестка; «вас обсмеяли»; +1 к рейтингу среди обслуги.</p>
</div>
</div>
</section>
</div>
</div>
<script>
(function(){
document.querySelectorAll('.accordion-item').forEach(function(item){
var input = item.querySelector('input.toggle');
if(!input) return;
var update = function(){ item.classList.toggle('is-open', input.checked); };
input.addEventListener('change', update);
update();
});
})();
</script>[/html]
