Bleach [ barcross ]

[html]
<style>
.bleach-post {
--paper: #eeebf0;
--paper-light: #f6f3f6;
--ink: #45404c;
--muted: #817887;
--line: #d4cbd9;
--rose: #aa879e;
--blue: #8e9daf;
--lilac: #b5a8c4;

max-width: 880px;
margin: 0 auto;
color: var(--ink);
background: var(--paper);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.75;
border: 1px solid #d7cedb;
overflow: hidden;
box-sizing: border-box;
}

.bleach-post * {
box-sizing: border-box;
}

.bleach-post a {
color: #896b86;
text-decoration: none;
transition: color .25s ease;
}

.bleach-post a:hover {
color: #b185a1;
}

.bleach-post .bp-cover {
position: relative;
min-height: 310px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background:
linear-gradient(
0deg,
rgba(30, 26, 39, .68),
rgba(30, 26, 39, .04) 85%
),
url('https://i.pinimg.com/1200x/19/6c/d5/196cd5f40fbbab1fa161393835f5184d.jpg')
center 38% / cover no-repeat;
}

.bleach-post .bp-cover:after {
content: "";
position: absolute;
inset: 0;
background: rgba(111, 96, 125, .09);
pointer-events: none;
}

.bleach-post .bp-cover-content {
position: relative;
z-index: 1;
}

.bleach-post .bp-small-title {
margin-bottom: 7px;
color: #e4d4e3;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
}

.bleach-post .bp-title {
margin: 0;
color: #f7f0f6;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(43px, 8vw, 72px);
line-height: 1;
font-weight: normal;
letter-spacing: 3px;
}

.bleach-post .bp-tagline {
margin-top: 13px;
color: #e9dfe9;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-size: 14px;
letter-spacing: .4px;
}

.bleach-post .bp-tabs {
background: var(--paper-light);
}

.bleach-post .bp-radio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}

.bleach-post .bp-nav {
display: flex;
border-top: 1px solid #e0d8e3;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, .25);
}

.bleach-post .bp-nav label {
position: relative;
flex: 1 1 0;
min-width: 0;
padding: 16px 8px;
text-align: center;
cursor: pointer;
border-right: 1px solid #e0d8e3;
color: #777080;
transition: color .25s ease, background .25s ease;
}

.bleach-post .bp-nav label:last-child {
border-right: 0;
}

.bleach-post .bp-nav label:hover {
color: #725e78;
background: #f0eaf1;
}

.bleach-post .bp-nav label:after {
content: "";
position: absolute;
bottom: -1px;
left: 20%;
right: 20%;
height: 2px;
background: var(--rose);
transform: scaleX(0);
transition: transform .25s ease;
}

.bleach-post .bp-nav .bp-num {
display: block;
margin-bottom: 3px;
color: #ad96b0;
font-size: 9px;
letter-spacing: 1.5px;
}

.bleach-post .bp-nav .bp-nav-name {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
}

.bleach-post #bp-about:checked ~ .bp-nav label[for="bp-about"],
.bleach-post #bp-roles:checked ~ .bp-nav label[for="bp-roles"],
.bleach-post #bp-search:checked ~ .bp-nav label[for="bp-search"],
.bleach-post #bp-episodes:checked ~ .bp-nav label[for="bp-episodes"] {
color: #514658;
background: #ebe5ee;
}

.bleach-post #bp-about:checked ~ .bp-nav label[for="bp-about"]:after,
.bleach-post #bp-roles:checked ~ .bp-nav label[for="bp-roles"]:after,
.bleach-post #bp-search:checked ~ .bp-nav label[for="bp-search"]:after,
.bleach-post #bp-episodes:checked ~ .bp-nav label[for="bp-episodes"]:after {
transform: scaleX(1);
}

.bleach-post .bp-panel {
display: none;
animation: bp-appear .25s ease;
}

.bleach-post #bp-about:checked ~ .bp-panels .bp-about,
.bleach-post #bp-roles:checked ~ .bp-panels .bp-roles,
.bleach-post #bp-search:checked ~ .bp-panels .bp-search,
.bleach-post #bp-episodes:checked ~ .bp-panels .bp-episodes {
display: block;
}

.bleach-post .bp-content {
padding: 29px;
}

.bleach-post .bp-heading {
display: flex;
align-items: baseline;
gap: 13px;
margin: 0 0 19px;
padding-bottom: 11px;
border-bottom: 1px solid var(--line);
}

.bleach-post .bp-heading-number {
color: var(--rose);
font-family: Georgia, "Times New Roman", serif;
font-size: 26px;
line-height: 1;
}

.bleach-post .bp-heading-title {
margin: 0;
color: #514756;
font-family: Georgia, "Times New Roman", serif;
font-size: 24px;
font-weight: normal;
line-height: 1.2;
}

.bleach-post .bp-heading-note {
margin-left: auto;
color: #988da0;
font-size: 10px;
font-style: italic;
}

.bleach-post .bp-about-layout {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(170px, .7fr);
gap: 25px;
}

.bleach-post .bp-description {
color: #655d6b;
font-size: 13px;
line-height: 1.9;
}

.bleach-post .bp-description p {
margin: 0 0 14px;
}

.bleach-post .bp-description strong {
color: #8e718c;
font-weight: normal;
}

.bleach-post .bp-quote {
margin-top: 22px;
padding: 13px 17px;
border-left: 2px solid #bda8c6;
background: rgba(255, 255, 255, .36);
color: #7c6d83;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-size: 15px;
}

.bleach-post .bp-side {
align-self: start;
}

.bleach-post .bp-side-image {
min-height: 230px;
background:
url('https://i.pinimg.com/736x/8d/da/98/8dda98e66432a6fb53f1fb90b69c22f0.jpg')
center / cover no-repeat;
filter: grayscale(45%);
border: 5px solid rgba(255, 255, 255, .55);
outline: 1px solid var(--line);
outline-offset: -1px;
transition: filter .3s ease;
}

.bleach-post .bp-side-image:hover {
filter: grayscale(5%);
}

.bleach-post .bp-image-caption {
margin-top: 9px;
color: #978b9c;
font-size: 10px;
text-align: right;
font-style: italic;
}

.bleach-post .bp-facts {
margin-top: 25px;
padding-top: 17px;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}

.bleach-post .bp-fact-label {
display: block;
margin-bottom: 3px;
color: #a0819b;
font-size: 10px;
letter-spacing: .6px;
text-transform: uppercase;
}

.bleach-post .bp-fact-value {
color: #615866;
font-family: Georgia, "Times New Roman", serif;
font-size: 13px;
}

/* ЗАНЯТЫЕ РОЛИ */

.bleach-post .bp-person {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 17px;
padding: 16px 0;
border-bottom: 1px solid var(--line);
}

.bleach-post .bp-person:first-child {
padding-top: 0;
}

.bleach-post .bp-person:last-child {
border-bottom: 0;
padding-bottom: 0;
}

.bleach-post .bp-person-photo {
width: 86px;
height: 106px;
background-color: #e2dbe6;
border: 4px solid rgba(255, 255, 255, .6);
outline: 1px solid var(--line);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: grayscale(30%);
transition: filter .3s ease;
}

.bleach-post .bp-person:hover .bp-person-photo {
filter: grayscale(0%);
}

.bleach-post .bp-person-info {
align-self: center;
}

.bleach-post .bp-person-meta {
margin-bottom: 4px;
color: #9b849f;
font-size: 9px;
letter-spacing: 1.3px;
text-transform: uppercase;
}

.bleach-post .bp-person-name {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
font-size: 23px;
line-height: 1.3;
font-weight: normal;
}

.bleach-post .bp-person-name a {
color: #62516a;
border-bottom: 1px solid #d3c3d5;
}

.bleach-post .bp-person-name a:hover {
color: #ad819f;
border-color: #ad819f;
}

/* ПОИСКИ */

.bleach-post .bp-wanted {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 17px;
padding: 16px 0;
border-bottom: 1px solid var(--line);
}

.bleach-post .bp-wanted:first-of-type {
padding-top: 0;
}

.bleach-post .bp-wanted:last-child {
border-bottom: 0;
padding-bottom: 0;
}

.bleach-post .bp-wanted-photo {
width: 86px;
height: 112px;
background-color: #e2dbe6;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: 4px solid rgba(255, 255, 255, .6);
outline: 1px solid var(--line);
filter: grayscale(25%);
transition: filter .3s ease;
}

.bleach-post .bp-wanted:hover .bp-wanted-photo {
filter: grayscale(0%);
}

.bleach-post .bp-wanted-info {
align-self: center;
}

.bleach-post .bp-wanted-label {
margin-bottom: 4px;
color: #9b849f;
font-size: 9px;
letter-spacing: 1.3px;
text-transform: uppercase;
}

.bleach-post .bp-wanted-title {
margin: 0 0 5px;
font-family: Georgia, "Times New Roman", serif;
font-size: 21px;
line-height: 1.35;
color: #63536d;
font-weight: normal;
}

.bleach-post .bp-wanted-title a {
color: inherit;
border-bottom: 1px solid #d1bed2;
}

.bleach-post .bp-wanted-title a:hover {
color: #b184a4;
}

.bleach-post .bp-wanted-text {
color: #746a7a;
font-size: 12px;
}

.bleach-post .bp-wanted-link {
display: inline-block;
margin-top: 7px;
color: #9b7c9b;
font-size: 11px;
border-bottom: 1px solid #d1bed2;
}

/* ЭПИЗОДЫ */

.bleach-post .bp-episode-group {
margin-bottom: 25px;
}

.bleach-post .bp-episode-group:last-child {
margin-bottom: 0;
}

.bleach-post .bp-episode-title {
margin: 0 0 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
font-weight: normal;
color: #69586f;
}

.bleach-post .bp-episode {
display: block;
padding: 12px 3px;
border-bottom: 1px solid #ded6e1;
}

.bleach-post .bp-episode:last-child {
border-bottom: 0;
}

.bleach-post .bp-episode-name {
display: block;
color: #68566e;
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
transition: color .25s ease;
}

.bleach-post .bp-episode:hover .bp-episode-name {
color: #b184a4;
}

.bleach-post .bp-episode-info {
margin-top: 3px;
color: #908393;
font-size: 10px;
}

/* НИЖНЯЯ СТРОКА */

.bleach-post .bp-footer {
padding: 19px 15px;
border-top: 1px solid var(--line);
background: rgba(255, 255, 255, .28);
text-align: center;
}

.bleach-post .bp-footer-title {
color: #8e7a98;
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
letter-spacing: 3px;
}

.bleach-post .bp-footer-note {
margin-top: 4px;
color: #a196a6;
font-family: Georgia, "Times New Roman", serif;
font-size: 13px;
letter-spacing: 1px;
}

.bleach-post .bp-top-link {
display: inline-block;
margin-top: 8px;
font-size: 10px;
}

@keyframes bp-appear {
from {
opacity: 0;
transform: translateY(4px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@media (max-width: 620px) {
.bleach-post .bp-cover {
min-height: 230px;
padding: 22px 18px;
}

.bleach-post .bp-content {
padding: 22px 17px;
}

.bleach-post .bp-nav {
flex-wrap: wrap;
}

.bleach-post .bp-nav label {
flex: 1 1 50%;
padding: 12px 5px;
border-bottom: 1px solid #e0d8e3;
}

.bleach-post .bp-nav label:nth-child(2n) {
border-right: 0;
}

.bleach-post .bp-nav label:nth-last-child(-n+2) {
border-bottom: 0;
}

.bleach-post .bp-about-layout {
grid-template-columns: 1fr;
}

.bleach-post .bp-side-image {
min-height: 180px;
}

.bleach-post .bp-facts {
grid-template-columns: 1fr;
gap: 12px;
}

.bleach-post .bp-heading-note {
display: none;
}

.bleach-post .bp-person {
grid-template-columns: 72px minmax(0, 1fr);
gap: 13px;
}

.bleach-post .bp-person-photo {
width: 72px;
height: 92px;
}

.bleach-post .bp-person-name {
font-size: 20px;
}

.bleach-post .bp-wanted {
grid-template-columns: 72px minmax(0, 1fr);
gap: 13px;
}

.bleach-post .bp-wanted-photo {
width: 72px;
height: 96px;
}

.bleach-post .bp-wanted-title {
font-size: 19px;
}
}

@media (prefers-reduced-motion: reduce) {
.bleach-post *,
.bleach-post *:before,
.bleach-post *:after {
animation: none !important;
transition: none !important;
}
}
</style>

<div class="bp-cover">
<div class="bp-cover-content">
<div class="bp-small-title">
Кастовая тема · мир Bleach
</div>

<h1 class="bp-title">BLEACH</h1>

<div class="bp-tagline">
Некоторые истории не заканчиваются со смертью.
</div>
</div>
</div>

<label for="bp-about">
<span class="bp-num">01</span>
<span class="bp-nav-name">Информация</span>
</label>

<label for="bp-roles">
<span class="bp-num">02</span>
<span class="bp-nav-name">Занятые роли</span>
</label>

<label for="bp-episodes">
<span class="bp-num">04</span>
<span class="bp-nav-name">Эпизоды</span>
</label>

</div>

<div class="bp-heading">
<span class="bp-heading-number">01.</span>
<h2 class="bp-heading-title">Об касте</h2>
<span class="bp-heading-note">важная инфа кста</span>
</div>

<p>
<strong>Велком ту зе Bleach.</strong>
Пристанище для неупокоенных душ, посмотревших ткв и не нашедших себя нигде, кроме этого места.
</p>

<p>
<strong>Что мы играем:</strong>
Играем все, что по кайфу. Никого не торопим, не придерживаемся определенной, канонической концепции и всегда принимаем здравый подход.

У нас нету как такового "определенного" сюжета, но за точку отталкивания берём промежуток между после битвы с Айзеном и до ТКВ. Однако это не означает, что мы учитываем/не учитываем какие-то моменты. Скорее - играем как чувствуем, дорисовывая те или иные детали/не учитывая их.
</p>

<p>
<strong>Кому рады?</strong>
Всем. Не обязательно приходить по заявке, всегда можно потормошить нас и без нее) Заявки нужны для первоначальных зарисовок, но это не значит, что других персонажей мы не ждём.
</p>

<div class="bp-quote">
У каждого меча есть имя. У каждого поступка —
последствия.
</div>

</div>

<div class="bp-image-caption">
世界は、まだ終わっていない。
</div>

</div>

<div>
<span class="bp-fact-label">Временной период</span>
<span class="bp-fact-value">Любой</span>
</div>

<div>
<span class="bp-fact-label">Отношение к канону</span>
<span class="bp-fact-value">[канон / AU / постканон]</span>
</div>

</div>

</div>
</div>

<div class="bp-person-info">
<div class="bp-person-meta">
BLEACH · HUMAN
</div>

<h3 class="bp-person-name">
<a href="https://barcross.ru/profile.php?id=3733">
Orihime Inoue
</a>
</h3>
</div>

</div>