[hideprofile]
Код:
<!--HTML-->
<section class="maintheme" style="padding: 15px; border: var(--dark-border);">
<div class="maintheme__content" style="padding: 55px;margin-bottom: 0px;">
<section class="promote">
<div class="promote_attr">все внешности и имена меняемы, подробности и детали биографий на вашей совести</div>
<div class="promote_main">
<div class="promote_main-title">
дело №Ц-726-25
</div>
<div class="promote_main-status">
Статус на этапе следствия <span>жертва (?)</span>
</div>
<div class="promote_main-character">
<div class="promote_main-characterphoto">
<div class="promote_main-characterimg ">
<img src="https://forumstatic.ru/files/001c/03/d3/41271.png">
</div>
<div class="promote_main-characterappearance">
Iva – Karneval
</div>
</div>
<div class="promote_main-characterabout">
<div class="promote_main-characterabout-name" id="MaraVel">Мара Вель</div>
<span>27 лет. Архивистка и регистратор артефактов.</span>
<p>Мара работала с документацией, связанной с материалами, вывезенными с Черных островов:</p>
<ul>
<li>фиксировала, откуда прибыл материал;</li>
<li>кто доставил его в Циркум;</li>
<li>кому он принадлежал;</li>
<li>где и кем был обработан;</li>
<li>какой артефакт из него изготовили;</li>
<li>кто получил готовое изделие;</li>
<li>какие побочные свойства или дефекты были выявлены.</li>
</ul>
<p>Официально работала на совет Циркума как регистратор товаров, поступающих через порт. На практике: архив необходим всем, кто занимается контрабандой и переработкой материалов.</p>
<p>Без подписей архивиста:</p>
<ul>
<li>груз нельзя выгодно перепродать;</li>
<li>артефакт нельзя легализовать;</li>
<li>мастер не может доказать качество работы;</li>
<li>покупатель не может подтвердить происхождение вещи;</li>
<li>опасный материал можно выдать за другой.</li>
</ul>
<p>Мара не была начальницей, преступницей или знаменитой специалисткой. Она была человеком, который знал, откуда что взялось и через чьи руки прошло.</p>
</div>
</div>
<div class="promote_main-additional">
<p>Мара Вель никогда не выглядела человеком, которому есть что скрывать.</p>
<p>Она носила простые платья, убирала волосы на затылке и всегда приходила на работу раньше остальных. В ее кабинете пахло пылью, клеем и холодным металлом от старых ящиков для образцов. На столе лежали карточки партий, квитанции, описи и маленькие стеклянные коробочки с тем, что в документах называлось материалом.</p>
<p>Мара не любила это слово. В нем было слишком мало смысла.</p>
<p>Для нее материалом становилось всё, что однажды переставало считаться чьей-то собственностью и начинало считаться товаром. Обломок, найденный на острове. Кость, камень, ткань, жидкость или металл - неважно. После регистрации у вещи появлялся номер, стоимость и новый владелец.</p>
<p>Мара следила, чтобы эти три пункта не противоречили друг другу.</p>
<p>В Циркуме ее уважали за это. Ей приносили грязные документы, поврежденные бирки и истории, которые не выдерживали проверки. Она не спрашивала, кто убил предыдущего владельца, почему корабль прибыл без экипажа и откуда у мастера взялся материал, которого не должно было существовать.</p>
<p>Она просто исправляла даты, сверяла подписи и ставила печать.</p>
<p>В последний месяц Мара стала делать пометки на полях. Неофициальные, почти незаметные. Короткие фразы, понятные только ей. Никто не знал, сколько таких записей она сделала.</p>
<p><b>И никто не знал, какая из них стала причиной ее смерти.</b></p>
</div>
</div>
<div class="promote_cards">
<div class="promote_card" id="RowanHart">
<div class="promote_card-characterphoto">
<div class="promote_main-characterimg "><img src="https://forumstatic.ru/files/001c/03/d3/62014.png" alt="Роуэн Харт"></div>
<span>Yukichi Fukuzawa – bungou stray dogs</span>
</div>
<div class="promote_card-about">
<div class="promote_card-status">
подозреваемый
</div>
<div class="promote_card-name">
<span>Роуэн Харт</span> 42 года. Не владеет адовым плодом, однако обучался чакре. Подробности неизвестны.
</div>
<p>Человек науки. Держит свою лабораторию в научном квартале. К нему поступают материалы с Черных Островов, которые надо изучить, оценить, каталогизировать для дальнейшей обработки. Человек, известный своей вспыльчивостью. Крайне нетерпим к глупости, которой считает все, что мешает ему работать.</p>
</div>
<div class="promote_card-notes">
нечист на руку? был роман с жертвой? откуда деньги на лабораторию?
</div>
</div>
<div class="promote_card right" id="AliceJou">
<div class="promote_card-characterphoto">
<div class="promote_main-characterimg "><img src="https://forumstatic.ru/files/001c/03/d3/49297.png" alt="Элис Джоу"></div>
<span>Seiko Ayase – Dandadan</span>
</div>
<div class="promote_card-about">
<div class="promote_card-status">
подозреваемый
</div>
<div class="promote_card-name">
<span>Элис Джоу</span> 27 лет. Охотница, опытный пользователь чакры.
</div>
<p>Прибыла в Циркум за неделю до смерти жертвы, как утверждает "по заданию". С жертвой имела бурный скандал в обувном магазине, в ходе которого угрожала "раздавить её голову как дыню". Показания давать отказывается, комиссия задерживает предоставление дела охотницы, в связи с чем о ней почти ничего неизвестно.</p>
</div>
<div class="promote_card-notes">
комиссия замешана? убийство из-за туфель? тайные дела Мары?
</div>
</div>
<div class="promote_card" id="AronVel">
<div class="promote_card-characterphoto">
<div class="promote_main-characterimg "><img src="https://forumstatic.ru/files/001c/03/d3/99515.png" alt="Арон Вель"></div>
<span>Kishibe – Chainsaw Man</span>
</div>
<div class="promote_card-about">
<div class="promote_card-status">
муж жертвы
</div>
<div class="promote_card-name">
<span>Арон Вель</span> 36 лет. Съел плод, который помогает ему в работе, отлично владеет чакрой восточной школы, бывший охотник.
</div>
<p>Мастер по стабилизации артефактов. Арон мастер своего дела и высоко ценится в городе. Он не занимается производством артефактов с нуля, но стабилизирует их, то есть уменьшает негативные эффекты, либо делает работу артефакта более предсказуемой. Это, как не сложно догадаться, значительно повышает цену предмета на рынке. Был женат на Маре 9 лет. Известен своей холодностью, почти безэмоциональностью.</p>
</div>
<div class="promote_card-notes">
быстро смирился, связи с мафией, не пришел на похороны
</div>
</div>
<div class="promote_card right" id="LiDuEn">
<div class="promote_card-characterphoto">
<div class="promote_main-characterimg "><img src="https://forumstatic.ru/files/001c/03/d3/39585.png" alt="Ли Ду Эн"></div>
<span>Kisuke Urahara – BLEACH</span>
</div>
<div class="promote_card-about">
<div class="promote_card-status">
старший детектив
</div>
<div class="promote_card-name">
<span>Ду'Эн Ли</span> 38 лет. Бывший охотник, опытный пользователь чакры.
</div>
<p>Живет в Циркуме с основания, с первых дней был "неофициальным" полицейским, а после среди первых получил должность в правоохранительных органах. Известен своей непосредственностью. Дела, которые он ведет, либо будут закрыты сразу, либо не закроются никогда. Можно предположить, что глубоко коррумпирован, но при этом беден как бродяга. Частый посетитель борделей, другие заведения не уважает, считая их слишком скучными, включая цирк.</p>
</div>
<div class="promote_card-notes">
саботирует дело? взял взятку? почему улыбался на похоронах?
</div>
</div>
<div class="promote_card" id="AriaMunk">
<div class="promote_card-characterphoto">
<div class="promote_main-characterimg "><img src="https://forumstatic.ru/files/001c/03/d3/27363.png" alt="Ария Мунк"></div>
<span>Jolyne Cujoh – JoJo's Bizarre Adventure</span>
</div>
<div class="promote_card-about">
<div class="promote_card-status">
младший детектив
</div>
<div class="promote_card-name">
<span>Ария Мунк</span> 24 года. Детектив со звездочкой, так как это дело – мое первое.
</div>
<p>Особо ничего не понимаю, но очень стараюсь. Чакрой владею до усиления включительно, плод не ела, но компенсирую это старательностью. Автор этих заметок и, судя по всему, единственная в этом чертовом городе, кому не плевать на смерть несчастной девушки! А еще я начинаю подозревать, что, кажется, схожу с ума. </p>
<span class="marked">Ведь я видела Мару живой.</span>
</div>
<div class="promote_card-notes" style="bottom: -18px;">
мне показалось?
</div>
</div>
</div>
</section>
</div>
</section>
<style>
.promote {
background: var(--body-background);
width: 100%;
font-family: var(--main-title);
position: relative;
font-size: 12px;
}
.promote p {
line-height: 110%!important;
}
.promote p:last-child {
padding: 0!important
}
.promote .promote_main-characterabout ul {
padding: 0!important;
margin-bottom: 10px!important;
}
.promote .promote_main-characterabout li {
padding-left: 15px;
}
.promote .promote_main-characterabout li:before {
top: -3px!important;
}
.promote_main {
padding: 0px 30px 30px;
background: var(--main-bg);
position: relative;
min-height: 500px;
border-radius: var(--main-bord-radius);
box-shadow: 0 4px 4px var(--accent2);
}
.promote::after {
content: "";
background: url(https://forumstatic.ru/files/001c/03/d3/34641.png) no-repeat;
display: block;
width: 366px;
height: 720px;
position: absolute;
bottom: -55px;
right: -106px;
z-index: 10;
background-size: contain;
transform: rotate(5deg);
filter: var(--filter);
}
.promote_main-title {
background: var(--dark-bg);
width:max-content;
color: var(--accent-on-black);
font-family: var(--font-accent);
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
padding: 0 10px;
}
.promote_main-status {margin: 15px 0;
font-family: var(--font-accent);
text-transform: uppercase;
font-weight: 600;
font-size: 16px;
}
.promote_main-status span {
background-color: var(--dark-bg);
color: var(--accent-on-black);
padding: 0 5px;
}
.promote_main-character {
display: flex;
flex-direction: row;
gap: 0px;
}
.promote_main-characterphoto {
background-color: var(--dark-bg);
padding: 15px 15px 40px 15px;
transform: rotate(4deg);
position: relative;
left: -46px;
margin-top: 15px;
height: fit-content;
}
.promote_main-characterphoto::before {
content: "";
background: url(https://forumstatic.ru/files/001c/03/d3/77828.png) no-repeat;
display: block;
width: 39px;
height: 100%;
position: absolute;
top: -40px;
left: 48px;
z-index: 10;
background-size: contain;
transform: rotate(326deg);
}
.promote_main-characterappearance {
color: var(--white-font);
text-transform: uppercase;
font-family: var(--font-accent);
font-weight: 300;
}
.promote_main-characterabout-name {
font-size: 40px;
text-transform: uppercase;
font-family: 'Unbounded';
width: max-content;
letter-spacing: -1.5px;
margin-bottom: 4px;
position: relative;
left: -3px;
color: var(--lz-link);
}
.promote_main-characterimg img {
filter: grayscale(1) brightness(0.7);
}
.promote_main-characterimg.closed::before {
content: "closed";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.6);
z-index: 5;
pointer-events: none; font-family: var(--font-accent);
}
.promote_main-characterimg.closed::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
background:
linear-gradient(to top right, transparent calc(50% - 2px), #ff0000 calc(50% - 1px), #ff0000 calc(50% + 1px), transparent calc(50% + 2px)),
linear-gradient(to top left, transparent calc(50% - 2px), #ff0000 calc(50% - 1px), #ff0000 calc(50% + 1px), transparent calc(50% + 2px));
}
.promote_main-additional {
margin-top: 20px;
padding: 20px;
border: 1px solid var(--accent);
}
.promote_main-additional span {
background: #030bbd;
color:var(--white-font);
padding: 0 5px;
}
.promote_cards {
display: flex;
flex-direction: column;
margin: 60px 0 30px;
gap: 80px;
position: relative;
z-index: 20;
}
.promote_card {
position: relative;
display: flex;
}
.promote_card-characterphoto {
background-color: var(--dark-bg);
padding: 10px 10px 30px 10px;
transform: rotate(4deg);
position: absolute;
left: -2px;
margin-top: 15px;
height: fit-content;
width: min-content;
display: flex;
flex-direction: column;
top: -30px;
}
.promote_card-characterphoto::before {
content: "";
background: url(https://forumstatic.ru/files/001c/03/d3/77828.png) no-repeat;
display: block;
width: 27px;
height: 100%;
position: absolute;
top: -30px;
left: 121px;
z-index: 10;
background-size: contain;
transform: rotate(326deg);
}
.promote_card-characterphoto img {
width: 140px;
filter: grayscale(1) brightness(0.7);
}
.promote_card-characterphoto span {
color: var(--white-font);
font-family: var(--font-accent);
font-weight: 300;
text-transform: uppercase;
font-size: 9px;
}
.promote_card-about {
background: var(--main-bg);
height: fit-content;
padding: 0px 10px 20px 80px;
margin: 0 0 0 100px;
border-radius: var(--main-bord-radius);
box-shadow: 0 4px 4px var(--accent2);
}
.promote_card-about p {
margin-top: 8px !important;
}
.promote_card-notes {
position: absolute;
bottom: -36px;
right: -11px;
padding: 8px;
background: var(--main-bg);
color: #030bbd;
max-width: 270px;
border: 1px dashed var(--dark-bg);
transform: rotate(358deg);
z-index: 10;
font-family: 'Bad Script';
font-size: 14px;
line-height: 14px;
font-weight: 600;
}
.promote_card-status {
margin: 0 0 15px;
font-family: var(--font-accent);
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
background-color: var(--dark-bg);
color: var(--accent-on-black);
padding: 0 5px;
width: max-content;
}
.promote_card-name {
line-height: 100%!important;
}
.promote_card-name span {
font-size: 24px;
text-transform: uppercase;
font-family: 'Unbounded';
width: max-content;
letter-spacing: -1.5px;
margin-bottom: 4px;
position: relative;
left: -1px;
}
.promote_card-name span::after {
content: ";";
margin-left: 5px;
}
.promote_card.right .promote_card-characterphoto {
left: auto;
right: -2px;
transform: rotate(-4deg);
}
.promote_card.right .promote_card-characterphoto::before {
left: auto;
right: 121px;
transform: rotate(34deg);
top: -38px;
}
.promote_card.right .promote_card-about {
padding: 0px 80px 20px 10px;
margin: 0 100px 0 0;
}
.promote_card.right .promote_card-notes {
right: auto;
left: -11px;
transform: rotate(2deg);
}
.promote_card-about span.marked {
background: #030bbd;
color:var(--white-font);
padding: 0 5px;
}
.promote_attr {
width: 100%;
padding: 2px 10px;
text-align: center;
background-color: var(--dark-bg);
color: var(--white-font);
border-radius: var(--main-bord-radius);
margin-bottom: 20px;
box-sizing: border-box;
}
</style>
