[html]
<div class="story-archive">
<h2>
✦ История персонажа ✦
<button class="theme-toggle" type="button" aria-label="Включить светлую тему" title="Включить светлую тему">☼</button>
</h2>
<input type="radio" name="year" id="y2025" checked>
<input type="radio" name="year" id="y2026">
<input type="radio" name="year" id="y2027">
<input type="radio" name="year" id="archive">
<input type="radio" name="year" id="alternative">
<div class="tabs">
<label for="y2025">2025</label>
<label for="y2026">2026</label>
<label for="y2027">2027</label>
<label for="archive">Архив</label>
<label for="alternative">Альтернатива</label>
</div>
<!-- ========================================
2025
======================================== -->
<div class="year year2025">
<details open>
<summary>
✦ Сентябрь
</summary>
<div class="episode">
<div class="date">
<div class="day">
07.09.2025
</div>
<div class="weekday">
Воскресенье
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=834#p145296" target="_blank">
Причина нашей ненависти
</a>
</h3>
<span class="done">
✦ Завершено
</span>
<div class="participants">
Соучастники: Kurt Daimler.
</div>
<p>
Когда первая встреча оборачивается катастрофой.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
08.09.2025
</div>
<div class="weekday">
Понедельник
</div>
<div class="time">
Ночь
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=650" target="_blank">
Закусочная засада
</a>
</h3>
<span class="done">
✦ Завершено
</span>
<div class="participants">
Соучастники: Ulrich Van Haallen.
</div>
<p>
Знакомство двух любителей покушать.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
10.09.2025
</div>
<div class="weekday">
Среда
</div>
<div class="time">
Ночь
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=692#p124148" target="_blank">
Простой способ найти компромисс - наличие компромата
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Karol Kawinski.
</div>
<p>
Особенности академической поимки нарушителей.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
11.09.2025
</div>
<div class="weekday">
Четверг
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=841" target="_blank">
А можно было просто пройти мимо?
</a>
</h3>
<span class="done">
✦ Завершено
</span>
<div class="participants">
Соучастники: Kurt Daimler.
</div>
<p>
Вторая встреча Вэл и Курта или «Где моя рубашка, Выдровски?!»
</p>
</div>
</div>
</details>
<details>
<summary>
✦ Октябрь
</summary>
<div class="episode">
<div class="date">
<div class="day">
05.10.2025
</div>
<div class="weekday">
Воскресенье
</div>
<div class="time">
Ночь
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=850" target="_blank">
С Днём Рождения
</a>
</h3>
<span class="done">
✦ Завершено
</span>
<div class="participants">
Соучастники: Kurt Daimler
</div>
<p>
Живая выдра ночью на балконе в мужской общаге? Спасается от коменданта с сб-шником? Вот уж правда странный День Рождения.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
06.10.2025
</div>
<div class="weekday">
Понедельник
</div>
<div class="time">
Утро
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=878#p152578" target="_blank">
После
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Ulrich Van Haallen
</div>
<p>
Понедельник. Следующий день после Дня Рождения Вэл.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
07.10.2025
</div>
<div class="weekday">
Вторник
</div>
<div class="time">
Вечер
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=744#p130417" target="_blank">
Нам нужен вау эффект, но в рамках бюджета
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Преподаватель Rhiannon Beria.
</div>
<p>
Внеклассное занятие по уходу за собой.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
07.10.2025
</div>
<div class="weekday">
Вторник
</div>
<div class="time">
Вечер
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=880#p153783" target="_blank">
Среди разбросанных страниц
</a>
</h3>
<span class="done">
✦ Завершено
</span>
<div class="participants">
Соучастники: Kurt Daimler
</div>
<p>
Будний день, коридоры академии, ничего не предвещало беды, пока не столкнулись Курт и Вэланна
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
08.10.2025
</div>
<div class="weekday">
Среда
</div>
<div class="time">
Вечер
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=885" target="_blank">
И что ему надо на этот раз?
</a>
</h3>
<span class="done">
✦ Завершено
</span>
<div class="participants">
Соучастники: Kurt Daimler
</div>
<p>
Вэл получает неожиданную записку с просьбой о встрече от Курта. Несмотря на все прошлые обиды, выдровое любопытство побеждает и она идет в назначенное место в указанное время.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
10.10.2025
</div>
<div class="weekday">
Пятница
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=709#p126015" target="_blank">
Даже если мы на дне, мы - морские звезды.
</a>
</h3>
<span class="done">
✦ Завершено
</span>
<div class="participants">
Соучастники: Sable Halliwell.
</div>
<p>
Как же не помочь незнакомке, уронившей что-то в пруд.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
13.10.2025
</div>
<div class="weekday">
Понедельник
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=891" target="_blank">
4 дня спустя
</a>
</h3>
<span class="done">
✦ Завершено
</span>
<div class="participants">
Соучастники: Kurt Daimler
</div>
<p>
После пылкого общения в подсобке и резкого побега Курта. Последующие два дня Даймлер не приходил на пары, и даже попытки выдры застать его в общежитии не увенчались успехом. Спустя 4 дня Вэл впервые увидела его на учебе на совместной паре профессора Семмерсета.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
20.10.2025
</div>
<div class="weekday">
Понедельник
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=659" target="_blank">
По ту сторону баррикад
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Johanna De Sousa.
</div>
<p>
Неожиданное предложение сшивки от малознакомой Джо.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
21.10.2025
</div>
<div class="weekday">
Вторник
</div>
<div class="time">
Вечер
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=655" target="_blank">
Позвольте угощу вас рыбой, мистер цапля
</a>
</h3>
<span class="done">
✦ Завершено
</span>
<div class="participants">
Соучастники: Noa Minh Marlow.
</div>
<p>
Неожиданное знакомство двух фамильяров на озере.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
24.10.2025
</div>
<div class="weekday">
Пятница
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=690" target="_blank">
Хочешь острых ощущений? Облизни кактус!
</a>
</h3>
<span class="done">
✦ Завершено
</span>
<div class="participants">
Соучастники: Dorian Durden.
</div>
<p>
Первая вылазка в лес за травами для алхимии.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
28.10.2025
</div>
<div class="weekday">
Вторник
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=901" target="_blank">
More Alpacas less Drama
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Ulrich Van Haallen, Darling Go.
</div>
<p>
Прошёл слушок, что в Бостонском зоопарке объявилась подозрительная чёрная альпака, насылающая проклятия на посетителей посредством плевка. И плюётся засранка подозрительно метко. Но не во всех. Тем, кто успел к ней подмазаться, чёрная альпака дарует удачу в любви.
Уля и Вел решили проверить слухи.
</p>
</div>
</div>
</details>
<details>
<summary>
✦ Ноябрь
</summary>
<div class="episode">
<div class="date">
<div class="day">
05.11.2025
</div>
<div class="weekday">
Среда
</div>
<div class="time">
Вечер
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=847" target="_blank">
Когда планы идут не по плану
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Aron Goto.
</div>
<p>
Первое знакомство Арона и Вэл казалось в самом неожиданном месте.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
14.11.2025 15.11.2025
</div>
<div class="weekday">
Пят. - Сб.
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=905" target="_blank">
Доклад с пристрастием
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Kurt Daimler
</div>
<p>
С лёгкой подачи преподавателя Берки, Курт и Вэланна отправляются собирать информацию для доклада по теории Скверны.
</p>
</div>
</div>
</details>
<details>
<summary>
✦ Декабрь
</summary>
<div class="episode">
<div class="date">
<div class="day">
17.12.2025
</div>
<div class="weekday">
Среда
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=866#p149354" target="_blank">
Погрибение
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Mstislav Winterhalter.
</div>
<p>
Неподалёку от Академии обнаружены неизвестные науке виды грибов. Их паранормальная активность заставляет подозревать вмешательство Скверны. Лаборатория запрашивает образцы для проведения исследований. Несчастная выдра неудачно подвернулась под руку и была унесена неудержимым локомотивом научного прогресса.
</p>
</div>
</div>
</details>
</div>
<!-- ========================================
2026
======================================== -->
<div class="year year2026">
<details open>
<summary>
✦ Январь
</summary>
<div class="episode">
<div class="date">
<div class="day">
17.01.2026
</div>
<div class="weekday">
Суббота
</div>
<div class="time">
Весь день
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=674" target="_blank">
Тайный знак
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Charles T. Cunningham.
</div>
<p>
Чарли и Вэл отправляются на экскурсию в готический замок.
</p>
</div>
</div>
</details>
<details>
<summary>
✦ Февраль
</summary>
<div class="episode">
<div class="date">
<div class="day">
14.02.2026
</div>
<div class="weekday">
Суббота
</div>
<div class="time">
Вечер-Ночь
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=898#p156691" target="_blank">
Месть и притяжение
</a>
</h3>
<span class="done">
✦ Завершено
</span>
<div class="participants">
Соучастники: Kurt Daimler
</div>
<p>
Как говорят: Месть — это блюдо, которое надо подавать холодным. Но у выдры хаоса все как обычно идет совершенно по другому. Во время студенческой костюмированной вечеринки, Вэл натыкается на выпившего Курта.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
15.02.2026
</div>
<div class="weekday">
Воскресенье
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=801#p140074" target="_blank">
Совесть в курсе? Совесть в доле.
</a>
</h3>
<span class="done">
✦ Завершено
</span>
<div class="participants">
Соучастники: Liam Woods.
</div>
<p>
Череда случайных встреч Вэл и Лиама в стенах Академии.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
21.02.2026
</div>
<div class="weekday">
Суббота
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=879#p152652" target="_blank">
Первое свидание
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Liam Woods.
</div>
<p>
После череды случайных встреч Лиам решил позвать Вэланну на свидание. Вот и настало это «завтра вечером…в шесть, буду ждать тебя у главного корпуса.»
</p>
</div>
</div>
</details>
<details>
<summary>
✦ Март
</summary>
<div class="episode">
<div class="date">
<div class="day">
01.03.2026
</div>
<div class="weekday">
Воскресенье
</div>
<div class="time">
Ночь
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=803#p140245" target="_blank">
Не сходи с ума, сходи за вином!
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Olivia McCoy.
</div>
<p>
Куда приведет загадочная записка подкинутая выдре в комнату.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
02.03.2026
</div>
<div class="weekday">
Понедельник
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=814#p142254" target="_blank">
Сome talk to me
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Sergei Sokolov, Adrian Elita-Lichtenberg.
</div>
<p>
Для кого-то отработка, а для кого-то медитативная практика в оранжерее главного садовника. Но что если сделать процесс более увлекательным расспрашивая взрослое поколение о его юности.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
12.03.2026
</div>
<div class="weekday">
Четверг
</div>
<div class="time">
Вечер
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=708#p125994" target="_blank">
Совершается преступление. Не мешать.
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Glenn Valentine.
</div>
<p>
История о подозрительных намерениях и чрезмерной наблюдательности.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
18.03.2026
</div>
<div class="weekday">
Среда
</div>
<div class="time">
Вечер
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=815#p143074" target="_blank">
Когда птица, не совсем птица.
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Junia Melvin, Sergei Sokolov.
</div>
<p>
Проследив за очень странной сорокой, девушки вляпываются в целую детективную историю. Но увы и ах без помощи инквизиции задачу не решить.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
24.03.2026
</div>
<div class="weekday">
Вторник
</div>
<div class="time">
Ночь
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=732#p128632" target="_blank">
Чур никто не узнает
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Ulrich Van Haallen, Tadeusz Lec.
</div>
<p>
Ночной побег из академии в попытке посетить ночной клуб, что бы хорошенько повеселиться. Ожидание и реальность.
</p>
</div>
</div>
</details>
<details>
<summary>
✦ Апрель
</summary>
<div class="episode">
<div class="date">
<div class="day">
17.04.2026
</div>
<div class="weekday">
Пятница
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
Хранитель пепла и праха
<span class="event-icon" data-tooltip="Сюжетный эвент" aria-label="Сюжетный эвент">۞</span>
</h3>
<div class="episode-links">
<a href="https://kindredspirits.ru/viewtopic.php?id=819#p143706" target="_blank">Вводная</a>
⑅
<a href="https://kindredspirits.ru/viewtopic.php?id=822#p143710" target="_blank">Путь с Лиамом</a>
⑅
<a href="https://kindredspirits.ru/viewtopic.php?id=819#p160129" target="_blank">Возвращение ко всем</a>
</div>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Liam Woods, Audrey Young, Mstislav Winterhalter, Millicent Montgomery,
Junia Melvin, Stefania Fan Lvovich, Cheryl Harding.
</div>
<p>
Академия отправляет отряд на полевую вылазку на территорию старой академии Фасги. Магия забрасывает участников экспедиции в совершенно разные места и им придется преодолеть мистический и опасный путь, что бы коснуться тайны сокрытой в этих стенах и снова воссоединиться в один отряд.
</p>
</div>
</div>
</details>
<details>
<summary>
✦ Май
</summary>
<div class="episode">
<div class="date">
<div class="day">
11.05.2026
</div>
<div class="weekday">
Понедельник
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=782" target="_blank">
Крик над Пайн-Барренс
</a>
<span class="event-icon field-task-icon" data-tooltip="Полевое задание" aria-label="Полевое задание">※</span>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: Ulrich Van Haallen, Selina Morgan, Rowan Northwood, NPC.
</div>
<p>
В лесах Нью-Джерси снова видят «Джерсийского Дьявола» команда из сотрудника СБ и четырех студентов отправляются для изучения. Полевое задание.
</p>
</div>
</div>
<div class="episode">
<div class="date">
<div class="day">
21.05.2026
</div>
<div class="weekday">
Четверг
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=710#p126048" target="_blank">
Когда сила измеряется не в мышцах, а в устойчивости ума
</a>
</h3>
<span class="active">
✧ В процессе
</span>
<div class="participants">
Соучастники: River Rivera.
</div>
<p>
Первое единоличное полевое задание Вэланны под руководством мистера Риверы. Вылазка в подводную пещеру в шельфовой зоне Атлантического океана из за фиксации колебаний потока.
</p>
</div>
</div>
</details>
</div>
<!-- ========================================
2027
======================================== -->
<div class="year year2027">
</div>
<!-- ========================================
АРХИВ
======================================== -->
<div class="year archive">
<details>
<summary>
✦ Эпизоды без завершения
</summary>
<div class="episode">
<div class="date">
<div class="day">
26.03.2026
</div>
<div class="weekday">
Четверг
</div>
<div class="time">
День
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=695#p124562" target="_blank">
Точные пропорции
</a>
</h3>
<span class="closed">
✣ Заброшено
</span>
<div class="participants">
Соучастники: Lucas Holm.
</div>
<p>
Как же не помочь хорошему человеку в лаборатории, к тому же если за это еще и кормят.
</p>
</div>
</div>
</details>
<details>
<summary>
✦ Доигранное, но канувшее в лету
</summary>
<div class="episode">
<div class="date">
<div class="day">
05.09.2025
</div>
<div class="weekday">
Пятница
</div>
<div class="time">
Вечер
</div>
</div>
<div class="episode-info">
<h3>
<a href="https://kindredspirits.ru/viewtopic.php?id=718#p126763" target="_blank">
В этом мире вера осталась только у алоэ
</a>
</h3>
<span class="done">
✦ Завершено
</span>
<div class="participants">
Соучастники: Ted Green.
</div>
<p>
Вечерняя встреча у озера двух заблудившихся первогодок.
</p>
</div>
</div>
</details>
</div>
<!-- ========================================
АЛЬТЕРНАТИВА
======================================== -->
<div class="year alternative">
<details>
<summary>
✦ Альтернативные истории
</summary>
<div class="episode">
<div class="episode-info">
<h3>
Другая версия событий
</h3>
<span class="active">
✧ В одной далекой вселенной...
</span>
<p>
Однажды тут что-то будет :3
</p>
</div>
</div>
</details>
</div>
</div>
<style>
/* ========================================
ОСНОВНОЙ БЛОК
======================================== */
.story-archive {
width: 100%;
max-width: 1100px;
box-sizing: border-box;
margin: auto;
padding: 35px;
background:
linear-gradient(145deg,#170d20,#09050d);
border-radius: 25px;
color: white !important;
font-family: Georgia, serif;
box-shadow:
0 0 40px rgba(255,0,150,.35);
}
/* ========================================
ЗАГОЛОВОК
======================================== */
.story-archive h2 {
text-align: center;
color: #ff72bb !important;
letter-spacing: 5px;
font-size: 32px;
line-height: 1.2;
margin: 0 0 30px;
}
/* ========================================
RADIO-КНОПКИ
======================================== */
.story-archive input {
display: none;
}
/* ========================================
ВКЛАДКИ
======================================== */
.tabs {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 35px;
}
.tabs label {
padding: 12px 35px;
background: #26132f;
border-radius: 20px;
cursor: pointer;
color: #ffc1df !important;
font-size: 15px;
line-height: 1.2;
transition: .3s;
}
.tabs label:hover {
background: #ff4fa3;
color: white !important;
box-shadow:
0 0 20px #ff4fa3;
}
/* ========================================
ГОДА
======================================== */
.year {
display: none;
}
#y2025:checked ~ .year2025,
#y2026:checked ~ .year2026,
#y2027:checked ~ .year2027,
#archive:checked ~ .archive,
#alternative:checked ~ .alternative {
display: block;
}
/* ========================================
МЕСЯЦЫ
======================================== */
details {
margin-bottom: 25px;
background:
rgba(255,255,255,.04);
border-radius: 18px;
padding: 10px;
}
summary {
cursor: pointer;
padding: 15px;
color: #ff72bb !important;
font-size: 23px;
line-height: 1.25;
letter-spacing: 2px;
font-family: Georgia, serif;
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
summary:hover {
color: #ffc1df !important;
text-shadow:
0 0 10px #ff1493;
}
details[open] summary {
border-bottom:
1px solid rgba(255,100,180,.25);
margin-bottom: 15px;
}
/* ========================================
КАРТОЧКИ ЭПИЗОДОВ
======================================== */
.episode {
position: relative;
display: flex;
align-items: flex-start;
gap: 20px;
padding: 12px 18px;
margin-bottom: 12px;
box-sizing: border-box;
background:
rgba(255,255,255,.07);
border-radius: 14px;
border-left:
3px solid #ff4fa3;
transition: .3s;
}
.episode:hover {
background:
rgba(255,100,180,.12);
box-shadow:
0 0 25px rgba(255,0,150,.25);
}
/* ========================================
ДАТА
======================================== */
.date {
width: 100px;
min-width: 100px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.day {
font-size: 19px;
line-height: 1.2;
color: #ff79bd !important;
}
.weekday {
margin-top: 2px;
font-size: 14px;
line-height: 1.3;
color: #d9a8c2 !important;
font-style: italic;
}
.time {
margin-top: 5px;
font-size: 15px;
line-height: 1.3;
color: #ffc1df !important;
font-style: italic;
}
/* ========================================
ТЕКСТ ЭПИЗОДА
======================================== */
.episode-info {
flex: 1;
min-width: 0;
}
.episode h3 {
margin: 0 150px 6px 0;
font-size: 18px;
line-height: 1.3;
}
.episode h3 a {
color: #ffffff !important;
text-decoration: none;
}
.episode h3 a:hover {
color: #ff72bb !important;
text-shadow:
0 0 10px #ff1493;
}
/* ========================================
УЧАСТНИКИ
======================================== */
.participants {
margin-top: 6px;
margin-bottom: 6px;
font-size: 15px;
line-height: 1.35;
color: #ffb6d9 !important;
font-style: italic;
}
/* ========================================
ОПИСАНИЕ
======================================== */
.episode p {
margin: 7px 0 0;
font-size: 15px;
line-height: 1.45;
color: #dddddd !important;
}
/* ========================================
СТАТУСЫ
======================================== */
.done,
.active,
.closed {
position: absolute;
top: 12px;
right: 15px;
padding: 6px 13px;
border-radius: 20px;
font-size: 13px;
line-height: 1;
font-style: normal;
white-space: nowrap;
background: rgba(0,0,0,.25);
border: 1px solid currentColor;
}
/* Завершено */
.done {
color: #ff9d3d !important;
background:
rgba(255,157,61,.10);
}
/* В процессе */
.active {
color: #75ff9b !important;
background:
rgba(117,255,155,.08);
}
/* Заброшено */
.closed {
color: #999999 !important;
background:
rgba(153,153,153,.08);
}
/* ========================================
АДАПТАЦИЯ ДЛЯ УЗКИХ ЭКРАНОВ
======================================== */
@media (max-width: 700px) {
.story-archive {
padding: 20px;
}
.story-archive h2 {
font-size: 26px;
letter-spacing: 3px;
}
.tabs {
flex-wrap: wrap;
gap: 8px;
}
.tabs label {
padding: 10px 18px;
font-size: 14px;
}
.episode {
gap: 12px;
padding: 12px;
}
.date {
width: 80px;
min-width: 80px;
}
.day {
font-size: 17px;
}
.weekday {
font-size: 12px;
}
.time {
font-size: 13px;
}
.episode h3 {
margin-right: 110px;
font-size: 16px;
}
.participants {
font-size: 13px;
}
.episode p {
font-size: 14px;
}
.done,
.active,
.closed {
top: 10px;
right: 10px;
padding: 5px 9px;
font-size: 10px;
}
}
/* Ссылки на части сюжетного эпизода */
.story-archive .episode-links {
margin: 4px 0 2px;
font-size: 12px;
line-height: 1.5;
}
.story-archive .episode-links a {
color: #e7c6e4;
text-decoration: none;
transition: color .2s ease, text-shadow .2s ease;
}
.story-archive .episode-links a:hover {
color: #ffd76a;
text-shadow: 0 0 6px rgba(255, 215, 106, .4);
}
/* Значок сюжетного эвента */
.story-archive .event-icon {
position: relative;
display: inline-block;
margin-left: 8px;
color: #ffd76a;
font-size: 27px;
line-height: 1;
cursor: help;
vertical-align: middle;
text-shadow:
0 0 4px rgba(255, 215, 106, .65),
0 0 9px rgba(255, 190, 55, .35);
transition: transform .25s ease, color .25s ease, text-shadow .25s ease;
}
.story-archive .event-icon:hover {
transform: scale(1.2);
color: #ffe9a3;
text-shadow:
0 0 6px rgba(255, 225, 130, .95),
0 0 14px rgba(255, 190, 55, .8),
0 0 22px rgba(255, 170, 30, .45);
}
/* Подсказка при наведении */
.story-archive .event-icon::after {
content: attr(data-tooltip);
position: absolute;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
z-index: 50;
padding: 6px 10px;
border: 1px solid #d9ad43;
border-radius: 6px;
background: #170d20;
color: #ffe6a0;
font: 12px Georgia, serif;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s ease;
}
.story-archive .event-icon:hover::after {
opacity: 1;
visibility: visible;
}
/* ========================================
ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ
======================================== */
.story-archive h2 {
position: relative;
padding-right: 48px;
padding-left: 48px;
}
.story-archive .theme-toggle {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
padding: 0;
border: 1px solid #ff72bb;
border-radius: 50%;
background: #26132f;
color: #ffc1df;
font: 22px Georgia, serif;
line-height: 1;
cursor: pointer;
transition: .25s ease;
}
.story-archive .theme-toggle:hover {
box-shadow: 0 0 14px rgba(255,79,163,.5);
transform: translateY(-50%) rotate(15deg);
}
/* ========================================
СВЕТЛАЯ БИРЮЗОВАЯ ТЕМА
======================================== */
.story-archive.ks-light {
background: linear-gradient(145deg, #f0fffc, #dff5f1);
color: #254944 !important;
box-shadow:
0 0 25px rgba(72,184,170,.15),
0 0 45px rgba(42,174,158,.08);
}
.story-archive.ks-light h2 {
color: #278f83 !important;
text-shadow: 0 0 8px rgba(72,184,170,.22);
}
.story-archive.ks-light .theme-toggle {
background: #f5fffd;
color: #278f83;
border-color: #75cfc2;
box-shadow: 0 0 8px rgba(72,184,170,.15);
}
.story-archive.ks-light .theme-toggle:hover {
box-shadow:
0 0 12px rgba(72,184,170,.35),
0 0 22px rgba(72,184,170,.15);
}
.story-archive.ks-light .tabs label {
background: #d0eee8;
color: #315f57 !important;
}
.story-archive.ks-light .tabs label:hover {
background: #48b8aa;
color: #ffffff !important;
box-shadow: 0 0 16px rgba(72,184,170,.35);
}
.story-archive.ks-light details {
background: rgba(255,255,255,.48);
border: 1px solid rgba(72,184,170,.16);
}
.story-archive.ks-light summary {
color: #278f83 !important;
}
.story-archive.ks-light summary:hover {
color: #168f80 !important;
text-shadow: 0 0 8px rgba(72,184,170,.25);
}
.story-archive.ks-light details[open] summary {
border-bottom-color: rgba(72,184,170,.3);
}
.story-archive.ks-light .episode {
background: rgba(255,255,255,.72);
border-left-color: #48b8aa;
}
.story-archive.ks-light .episode:hover {
background: rgba(255,255,255,.98);
box-shadow:
0 4px 18px rgba(42,174,158,.15),
0 0 12px rgba(72,184,170,.08);
}
.story-archive.ks-light .day {
color: #278f83 !important;
}
.story-archive.ks-light .weekday {
color: #648b84 !important;
}
.story-archive.ks-light .time {
color: #397d73 !important;
}
.story-archive.ks-light .episode h3 a {
color: #315f57 !important;
}
.story-archive.ks-light .episode h3 a:hover {
color: #168f80 !important;
text-shadow: 0 0 8px rgba(72,184,170,.25);
}
.story-archive.ks-light .participants {
color: #398b80 !important;
}
.story-archive.ks-light .episode p {
color: #46645f !important;
}
.story-archive.ks-light .episode-links a {
color: #278f83;
}
.story-archive.ks-light .episode-links a:hover {
color: #146f64;
text-shadow: 0 0 6px rgba(72,184,170,.3);
}
.story-archive.ks-light .done {
color: #a65c12 !important;
background: rgba(255,157,61,.12);
}
.story-archive.ks-light .active {
color: #23844a !important;
background: rgba(65,190,112,.12);
}
.story-archive.ks-light .closed {
color: #71827f !important;
background: rgba(113,130,127,.1);
}
/* Сохраняем читаемость подсказки сюжетного значка */
.story-archive.ks-light .event-icon::after {
background: #f5fffd;
color: #75551a;
border-color: #d9ad43;
}
</style>
<script>
(function () {
document.querySelectorAll(".story-archive").forEach(function (archive) {
var toggle = archive.querySelector(".theme-toggle");
if (!toggle) return;
var storageKey = "story-archive-theme";
try {
if (localStorage.getItem(storageKey) === "light") {
archive.classList.add("ks-light");
}
} catch (error) {}
function updateToggle() {
var isLight = archive.classList.contains("ks-light");
toggle.textContent = isLight ? "☾" : "☼";
toggle.title = isLight ? "Включить тёмную тему" : "Включить светлую тему";
toggle.setAttribute("aria-label", toggle.title);
}
updateToggle();
toggle.addEventListener("click", function () {
archive.classList.toggle("ks-light");
var isLight = archive.classList.contains("ks-light");
try {
localStorage.setItem(storageKey, isLight ? "light" : "dark");
} catch (error) {}
updateToggle();
});
});
})();
</script>
[/html]
[hideprofile]
Отредактировано Velanna Marrow (11-10-2026 02:46:02)