[html]
<style>
.platform-npc,
.platform-npc * { box-sizing: border-box; }
.platform-npc {
width: 100%;
max-width: 760px;
margin: 12px auto;
padding: 3px;
color: #f8f0e8;
background: linear-gradient(135deg, #f4c770 0%, #ca537e 31%, #514798 65%, #56d5cb 100%);
box-shadow: 0 22px 60px rgba(0, 0, 0, .52), 0 0 32px rgba(212, 95, 146, .15);
font: 14px/1.55 Georgia, 'Times New Roman', serif;
}
.platform-npc .npc-switch {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
opacity: 0;
}
.platform-npc .npc-shell {
overflow: hidden;
background: #151c29;
}
.platform-npc .npc-hero {
display: grid;
grid-template-columns: minmax(0, 42%) minmax(0, 58%);
min-height: 382px;
}
.platform-npc .npc-art-wrap {
position: relative;
min-width: 0;
min-height: 382px;
overflow: hidden;
background: #11131d;
}
.platform-npc .npc-art {
display: block;
width: 100%;
height: 100%;
min-height: 382px;
object-fit: cover;
object-position: center;
}
.platform-npc .npc-art-wrap::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(0deg, rgba(19, 18, 33, .35), transparent 45%);
}
.platform-npc .npc-intro {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-width: 0;
overflow: hidden;
padding: 28px 32px 34px;
border-left: 1px solid rgba(255, 219, 154, .38);
background:
radial-gradient(circle at 86% 15%, rgba(240, 117, 155, .23), transparent 43%),
linear-gradient(145deg, #253d50 0%, #292744 50%, #3e2343 100%);
}
/* Загрузите отдельный PNG со звёздами на форум и впишите его URL ниже. */
.platform-npc .npc-intro::before {
content: '';
position: absolute;
inset: 0;
opacity: .37;
pointer-events: none;
background: url('https://upforme.ru/uploads/001b/84/6e/22/366546.png') right -108px top -78px / 600px auto no-repeat;
}
.platform-npc .npc-intro > * {
position: relative;
z-index: 1;
}
.platform-npc .npc-kicker {
align-self: flex-start;
margin: 0 auto auto 0;
padding: 5px 10px;
border: 1px solid rgba(130, 238, 218, .7);
color: #aaf5e4;
background: rgba(14, 31, 47, .5);
font: 700 10px/1.4 Arial, sans-serif;
letter-spacing: .18em;
text-transform: uppercase;
}
.platform-npc h2 {
margin: 54px 0 7px;
color: #fff6e8;
font: normal 42px/1.08 Georgia, 'Times New Roman', serif;
text-shadow: 0 2px 14px rgba(15, 11, 27, .6);
}
.platform-npc .npc-nickname {
margin: 0;
color: #ffd793;
font-size: 17px;
}
.platform-npc .npc-nickname span { color: #d5d6e5; }
.platform-npc .npc-rule {
width: 100%;
height: 1px;
margin: 23px 0 13px;
background: linear-gradient(90deg, #ffce83, #ed6f98 53%, transparent);
}
.platform-npc .npc-tag {
margin: 0;
color: #dcf2e9;
font: 700 10px/1.5 Arial, sans-serif;
letter-spacing: .18em;
text-transform: uppercase;
}
.platform-npc .npc-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 22px;
margin: 0;
padding: 18px 25px 17px;
border-top: 2px solid #c9638b;
background: linear-gradient(122deg, #1b2934 0%, #211e34 54%, #2b2036 100%);
}
.platform-npc .npc-field {
min-width: 0;
padding: 10px 2px 11px;
border-bottom: 1px solid rgba(246, 202, 144, .2);
}
.platform-npc .npc-field dt {
margin: 0 0 3px;
color: #f2ba77;
font: 700 10px/1.3 Arial, sans-serif;
letter-spacing: .14em;
text-transform: uppercase;
}
.platform-npc .npc-field dd {
margin: 0;
color: #f4edf0;
overflow-wrap: anywhere;
}
.platform-npc .npc-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
padding: 12px 13px 0;
background: #171d2e;
}
.platform-npc .npc-tabs label {
display: block;
min-width: 0;
padding: 12px 5px;
border: 1px solid rgba(179, 168, 213, .3);
color: #e6e0ee;
background: linear-gradient(135deg, #3a3859, #2b2e49);
text-align: center;
font: 700 11px/1.3 Arial, sans-serif;
letter-spacing: .09em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s, color .2s, transform .2s;
}
.platform-npc .npc-tabs label:hover {
background: linear-gradient(135deg, #6d4673, #3b5674);
transform: translateY(-2px);
}
.platform-npc > input:nth-of-type(1):checked ~ .npc-shell .npc-tabs label:nth-of-type(1),
.platform-npc > input:nth-of-type(2):checked ~ .npc-shell .npc-tabs label:nth-of-type(2),
.platform-npc > input:nth-of-type(3):checked ~ .npc-shell .npc-tabs label:nth-of-type(3) {
border-color: #ffd696;
color: #241a2c;
background: linear-gradient(110deg, #ffe0a0, #f092a6 64%, #cd80ba);
}
.platform-npc > input:nth-of-type(1):focus-visible ~ .npc-shell .npc-tabs label:nth-of-type(1),
.platform-npc > input:nth-of-type(2):focus-visible ~ .npc-shell .npc-tabs label:nth-of-type(2),
.platform-npc > input:nth-of-type(3):focus-visible ~ .npc-shell .npc-tabs label:nth-of-type(3) {
outline: 2px solid #fff2ce;
outline-offset: 2px;
}
.platform-npc .npc-panels {
min-height: 145px;
padding: 20px 26px 25px;
background: linear-gradient(130deg, #1b2132, #282035);
}
.platform-npc .npc-panel { display: none; }
.platform-npc > input:nth-of-type(1):checked ~ .npc-shell .npc-panel:nth-of-type(1),
.platform-npc > input:nth-of-type(2):checked ~ .npc-shell .npc-panel:nth-of-type(2),
.platform-npc > input:nth-of-type(3):checked ~ .npc-shell .npc-panel:nth-of-type(3) {
display: block;
}
.platform-npc .npc-panel h3 {
margin: 0 0 8px;
color: #f6c68b;
font: normal 23px/1.2 Georgia, 'Times New Roman', serif;
}
.platform-npc .npc-panel p { margin: 0; color: #eee6eb; }
@media (max-width: 570px) {
.platform-npc .npc-hero { grid-template-columns: 1fr; }
.platform-npc .npc-art-wrap { min-height: 0; height: 300px; }
.platform-npc .npc-art { min-height: 0; height: 100%; object-position: center 35%; }
.platform-npc .npc-intro { min-height: 260px; padding: 21px 23px 26px; border-left: 0; border-top: 1px solid rgba(255, 219, 154, .38); }
.platform-npc .npc-intro::before { background-size: 480px auto; background-position: right -75px top -95px; }
.platform-npc h2 { margin-top: 32px; font-size: 34px; }
.platform-npc .npc-fields { grid-template-columns: 1fr; padding: 10px 20px 16px; }
.platform-npc .npc-tabs label { font-size: 10px; letter-spacing: .01em; }
.platform-npc .npc-panels { padding: 20px; }
}
</style>
<div class="platform-npc">
<!-- Для каждой новой анкеты измените все три id, соответствующие им for и общее name этой группы. -->
<input class="npc-switch" type="radio" name="platform-npc-sayan-tabs" id="platform-npc-sayan-look" checked>
<input class="npc-switch" type="radio" name="platform-npc-sayan-tabs" id="platform-npc-sayan-bio">
<input class="npc-switch" type="radio" name="platform-npc-sayan-tabs" id="platform-npc-sayan-character">
<div class="npc-shell">
<div class="npc-hero">
<div class="npc-art-wrap">
<!-- Заглавная картинка: замените src на адрес своего изображения. -->
<img class="npc-art" src="https://upforme.ru/uploads/001b/84/6e/22/137841.png" alt="арт">
</div>
<div class="npc-intro">
<div class="npc-kicker">Мини-анкета НПС</div>
<h2>Ян Лин Юй</h2>
<p class="npc-nickname"><span>Прозвище:</span>Ян</p>
<div class="npc-rule"></div>
<p class="npc-tag">Клан Юй</p>
</div>
</div>
<!-- Краткие сведения: меняйте содержимое dd. -->
<dl class="npc-fields">
<div class="npc-field"><dt>Рост</dt><dd>195</dd></div>
<div class="npc-field"><dt>Глаза</dt><dd>Полностью чёрные</dd></div>
<div class="npc-field"><dt>Волосы</dt><dd>Белые</dd></div>
<div class="npc-field"><dt>Особые приметы</dt><dd>Синий язык</dd></div>
<div class="npc-field"><dt>Профессия</dt><dd>Оценщик магических артефактов узкого профиля</dd></div>
<div class="npc-field"><dt>Навыки</dt><dd>Ходит по воде, божественно красив, чудовищно ленив</dd></div>
</dl>
<div class="npc-tabs" role="group" aria-label="Разделы анкеты">
<label for="platform-npc-sayan-look">Внешность</label>
<label for="platform-npc-sayan-bio">Биография</label>
<label for="platform-npc-sayan-character">Характер</label>
</div>
<!-- Тексты трёх вкладок меняйте в соответствующих section. -->
<div class="npc-panels">
<section class="npc-panel"><h3>Внешность</h3><p>Высокий и статный нэвиец с очень яркими приметами внешности: синий язык, острые клыки и чёрные глаза. Блондин белоснежный, аккуратные аристократические черты лица. Когда улыбается похож на дьявола. То-ли убежать то-ли...</p></section>
<section class="npc-panel"><h3>Биография</h3><p>Два человека в одной утробе. Два человека растут рука об руку. Два человека всегда вместе. Такие похожие и такие разные. У одного есть талант, у второй его нет. Ни грамма зависти, ни толики злости. Всё та же любовь и взаимопонимание. Она начинает, а он заканчивает. Такие юные, любопытные. И казалось, что под ногами выстилается весь мир.
Она мечтала держать в своих ладонях бескрайнее море и читать стихи Ан-ану. Он мечтал быть свободным, словно облако, до тех пор пока не познает любовь. Хотел быть примерным мужем, не очень то часто покидать большой особняк и возиться с документами. Но магия воды сама струилась из его рук. Благословленный морем мальчик и бездарная девочка.
Он бросил учебу. Ради самого близкого для себя человека, ради своего спокойного будущего, безбедного и счастливого. Уходил в море пешком, потому что может, либо прятался в кустах, ближайших или далёких от особняка - не важно. При любой возможности они все так же ходили за руку. Заливистый детский смех, клыкастые оскалы, синие языки и черные-черные глаза, на контрасте с белокурыми локонами. Непослушные, вьются и развеваются от малейшего ветряного потока. Она всё ещё не может колдовать.
В один из дней Ру не вернулась к вечеру домой. В какой-то момент в груди словно оборвалась незримая нить, доселе кажущаяся очень и очень крепкой. Ян сбил все ноги, в полутьме разыскивая половину себя. Веселую, неугомонную, только ему понятную и простую. Воздух, что дался ей с таким великим трудом. Учитель, к которому парень испытывал ранее лишь неприязнь за унижение сестры, теперь всё переросло в искреннюю ненависть.Силы, моральные и физические. Время, убитое на реабилитацию. Он всегда был рядом, не считая это чем-то особенным и достойным похвалы. Был рядом и тогда, когда она отправилась путешествовать. Не физически, а морально. Письма, медные совы, жемчужные оригами. Был рядом и на светских раутах, стойко отбивая любые попытки задеть сестру. И сколько бы времени не прошло. Сколько бы ни трудился на благо своего нового клана, Ян Лин всегда на связи со своей маленькой Ру. Деньги? Власть? Личная помощь? Что угодно для второй половины себя. Другой, совершенно противоположной, но ещё до рождения целостной. Того учителя, к слову, уже через месяц после свадьбы Ян Лина, след простыл. Никто его не видел и, вероятно, даже не вспомнит.</p></section>
<section class="npc-panel"><h3>Характер</h3><p>Ленивый, скрытный молодой человек. Примерный семьянин и верный товарищ для близких. Однако весьма радикальные нотки проскальзывают. В отличных отношениях с родителями, сестрой. Живёт в столице, развлекается весьма высокооплачиваемой работой: оценщик редких артефактов касающихся смерти и магии смерти. Работать правда тоже ленится, часто к нему ходят за консультацией домой, потому что в офисе, который купила ему его драгоценная, ему появляться совершенно лень. И искать этого мастера в своём профиле приходится с собаками. Удачно женился, да так что почти на руках носят его. Он конечно тоже, но жена его просто обожает. </p></section>
</div>
</div>
</div>
<!-- КОНЕЦ КОДА ПЛАТФОРМЫ. -->
[/html]
Отредактировано Ру Лин Юй (2026-10-21 23:42:36)
