[html]
<link
  href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Inter:wght@400;500;600&display=swap"
  rel="stylesheet"
/>

<article class="pp-card">
  <section class="pp-data">
    <div class="pp-header">
      <div class="pp-brand">
        <img src="https://forumstatic.ru/files/001c/73/bf/43531.png" />
        <span>OutcastDB</span>
      </div>
      <h1 class="pp-name">Diego Cavalera</h1>
    </div>

    <div class="pp-tabs">
      <input type="radio" id="tab-1" name="tabs" checked />
      <input type="radio" id="tab-2" name="tabs" />
      <input type="radio" id="tab-3" name="tabs" />
      <input type="radio" id="tab-4" name="tabs" />

      <nav class="pp-nav">
        <label for="tab-1">Профайл</label>
        <label for="tab-2">Биография</label>
        <label for="tab-3">Характер</label>
        <label for="tab-4">Способности</label>
      </nav>

      <div class="pp-panel" data-tab="1">
        <div class="pp-panel-content">
          <figure class="pp-portrait">
            <img
              src="https://forumavatars.ru/img/avatars/001c/73/bf/13-1744641668.jpg"
              alt="Внешность персонажа"
            />
          </figure>

          <div class="pp-right">
            <div class="pp-facts">
              <div>
                <span class="key">Имя и фамилия</span><span class="bar"></span
                ><span class="val">Диего Кавалера</span>
              </div>
              <div>
                <span class="key">Профессия</span><span class="bar"></span
                ><span class="val">Глава НИО,<br> член Шестёрки</span>
              </div>
              <div>
                <span class="key">
                  <span class="key-main">Дата рождения</span><br />
                  <span class="key-sub">(возраст)</span>
                </span>
                <span class="bar"></span>
                <span class="val">26.04.148, 33 года</span>
              </div>
              <div>
                <span class="key">Организация</span><span class="bar"></span
                ><span class="val">НИО</span>
              </div>
              <div>
                <span class="key">Рост</span><span class="bar"></span
                ><span class="val">169 см</span>
              </div>
              <div>
                <span class="key">Класс силы</span><span class="bar"></span
                ><span class="val">Mu-I</span>
              </div>
              <div>
                <span class="key">Вес</span><span class="bar"></span
                ><span class="val">62 кг</span>
              </div>
            </div>

            <div class="pp-sections">
              <h2 class="pp-section-title">Внешность</h2>
              <div class="pp-section-box">
                <p>Он не красавчик, чтоб все с ума сходили, да и не сходят — это даже веселей; но девушки всегда в нём чего-то находили — не знает что, но девушкам видней. Особенно тем, что глядят чуть подальше своего очаровательного носика. Особенно тем, кто умнее типичной уличной девки. Особенно тем, что не из СБ, скажем прямо;)</p>
            <p>Да, рост Диего ниже среднего, пусть даже кто-то презрительно скажет "карлан", но до таких ему лично дела нет. В остальном же — он довольно горяч, насколько может быть горяч работающий паяльник, направленный в самое лоно материнской платы. И утончён в выборе рабочих костюмов — настолько, что они все сидят на нём, словно плёночка на новехоньком смартфоне.</p>
              </div>
              <h2 class="pp-section-title">Дополнительно</h2>
              <div class="pp-section-box">
                <p>• Ходит слушок, что бьёт женщин.<br>• Так же ходит слушок, что активно помогает прятать трупы и сбывает человеческие органы где-то на чёрном-пречёрном рынке. <br>• Всячески поощряет и прикрывает неэтичные научные эксперименты. <br>• С полной уверенностью считает, что религия является прямым препятствием для науки и не упускает возможности разоблачить шарлатанов.<br>• Прогресс науки в его системе ценностей — кстати, как и у Кавалеры-старшего — всегда на первом месте. Выше — только любовь к брату, но это не точно.<br>• Никогда не был женат и не замечен в длительных (более месяца) отношениях с женщинами.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="pp-panel" data-tab="2">
        <div class="pp-text">
<p>Родился и вырос Диего в семье небезызвестного Хавьера Кавалеры, предыдущего главы НИО Изгойника. </p>
<p>Тут у многих, естественно, возникнут вопросики, мол, как так-то? Изгоям же не дозволяется оставлять себе детей старше 4-х. Что же это? Кумовство? Взяточничество? Коррупция в высших органах?! Да. Но нет, маленького Диего по истечению срока отдали в Город, как и всех остальных детей его возраста, а затем вернули в 7-мь, когда обозначилась чётко его первая способность. </p>
<p>Когда маленький Кавалера, живущий в приёмной семье, гонял с соседскими мальчишками, то почему-то всегда с точностью знал, когда можно смело пиздануть в глаз и за это ничего не будет, а когда лучше своё ценное мнение при себе оставить. Или когда, допустим, местные ремонтники силы свои не рассчитали и магазин у дома разом обрушили, Диего чётко в метре от всех разрушений стоял, и ресничками своими невинными хлопал, на пиздец тот взирая. К слову, с поиском пострадавших он тогда тоже знатно помог. Нашли даже тех самых мальчишек. Думали — телепат. </p>
<p>Оказалось — чуйка. А после анализа крови направили обратно к своим — к талантливым изгойникам. Где заботливый папка, обладающий некими важными знакомствами и не менее важными указаниями со стороны жены, забрал сыночку обратно домой.</p>
<p>А уж мама детёнышу своему была рада больше всех! Уж она-то позаботилась, чтобы мальчик вообще ни в чём не нуждался. Хочешь игрушку — на, хочешь к папе на работу в виварии крокорогов пощупать — пожалуйста. И в сладостях ему вообще никогда не отказывала. Диего на них в какой-то момент так отъелся да так расширился, что едва уже влазил в покупную одежду. Но и это госпожу Кавалера нисколечки не смущало, ведь больше сына — больше поводов для любви!</p>
<p>А всё потому, что то была далеко уж не первая их с мужем попытка завести собственного ребёнка. На какие только ухищрения они не шли: и чипы вживляли, и график "везений" соблюдали, и ЭКО животворящее кастовали в разных пропорциях. Но, не смотря на способность Хавьера, угадать с тем, чтоб родился именно изменённый изгой, увы, не получалось. Во всяком случае, так было до рождения Диего. Тут, можно сказать, прямо счастливый, исключительнейший случай приключился, когда диск съёмный, а пацан не приёмный.</p>
<p>А два года спустя оказалось, что у Диего в Городе есть младший брат — тоже изменённый. Рождение брата, конечно, вызвало немало вопросов у матушки, особенно после подтвердившегося реального отцовства: косые взгляды и этот её недобрый прищур, появляющийся на лице всякий раз, когда кто-либо затрагивает данную тему, по сей день не сулит ничего хорошего. Однако, «экспериментальный» ребёнок, родившийся потому что «так получилось, я ж не знал, что ты так отнесёшься» в результате «предчувствия научного прорыва», вскоре был переведен в Изгойник и стал полноценным членом семьи. Так появился Маркус. </p>
<p>Маркус был младше на два года и в два раза активнее. За что сходу же не понравился миссис Кавалера. Но, видя, как тянется к мальчику Диего, она сменила со временем гнев на милость. Наверное, она его даже любила, но какой-то сложной любовью — по-своему.</p>
<p>А вот Диего брата просто обожал. С первого взгляда полюбил он этого капризного зазнайку и проходимца. И когда вторая способность в 16 прорезалась — к нему первому хвастаться побежал. И когда на вылазки от ИСТОКа наружу гонял — старался его с собой прихватить, и потом — в НИО активнейше зазывал. И даже сейчас, сместив отца на посту в Шестёрке, продолжает братишку к себе зазывать. Всё ж куда проще человека контролировать, когда он у тебя под боком.</p>
</div></div>

      <div class="pp-panel" data-tab="3">
        <div class="pp-text">
          <p>Диего на первый взгляд — прям свой пацан, такой аля рубаха-парень: открытый, дружелюбный, жизнерадостный. Всегда прилично одетый и приятно пахнущий. Однако, это только если вы с ним знакомы не слишком. Вообще-то в быту он крайне неряшлив и часто находится "на своей волне", игнорируя вообще всё окружение. В такие моменты бывает его часами не дозовёшься. Он может на сутки и более закрыться безвылазно в лаборатории без еды и сна. А может уехать кутить к коллегам в Город, выдавшись крайне общительным и весёлым заводилой. </p>
<p>В учёных кругах Диего принято считать удачливым гением, так как он всегда оказывается в шаге к любому возможному достижению и всегда словно заранее знает чего не хватает чтоб достичь долгожданного успеха в том или ином эксперименте. </p>
<p>Его любят в Совете 12-ти — как за талант, так и за широту взглядов. Что несомненно вызывает зависть коллег и плодит бесконечные слухи. Среди которых частенько случается и правда, кстати, но где конкретно — не знают даже сами сплетники.</p>
<p>Весьма кокетлив в моменты социальной активности и беспощадно груб в периоды творческой одержимости. По большей части оптимистичен, но одновременно с этим подвержен беспричинной грусти. </p>
<p>Проще говоря — личность весьма неоднозначная.</p>
        </div>
      </div>

      <div class="pp-panel" data-tab="4">
        <div class="pp-text">
        <h3><b>Седьмое чувство</b></h3>
<p>Седьмое чувство или, по-простому — Чуйка. Великолепное чутьё господина Кавалеры позволяет ему вовремя предвидеть любой надвигающийся пиздец и увильнуть от него с ловкостью морского угря, ныряющего под камень. </p>
            <p>Отчасти, это чутьё обосновано научной осведомлённостью и превосходными умственными способностями, позволяющими провести анализ любой ситуации без участия каких-либо сверх-способностей, однако зачастую Диего способен предвидеть даже то, где информации явно недостаточно. Например, в студенческих вылазках наружу, лишь Кавалера знал где точно искать укрытие и в какую сторону копать, чтоб найти руду. И никогда не промахивался. А если б в Изгойнике снимали "Битву экстрасенсов" — он бы, без сомнения, вышел из неё победителем.</p>
            <p>Откат-расплата: острые приступы паники с последующими депрессивными эпизодами. И хоть с возрастом он научился кое-как справляться с паническими атаками, но периоды грусти с годами начинают понемногу затягиваться. Возможно, сказывается не связанный со способностью уверенно надвигающийся экзестенциальный кризис.</p>

<hr>
<h3><b>Chanel №5</b></h3>

<p>Что это за знакомый парфюм? — самый популярный вопрос, который слышит Диего в свой адрес. Ответы всегда самые разные. Но правда, как всегда, одна — дело в способности мистера Кавалеры. Он может менять запах собственного тела как пожелает. Он может заблагоухать как новогодняя выпечка или клубничный леденец, привлекая особое внимание дам, а может сымитировать запах пчелиной матки в попытке управлять дикими пчёлами. </p>
            <p>Есть правда серьёзное ограничение данной способности, так как совершеннейше невозможно воссоздавать запахи, которые сам Диего не улавливает. Вот, как с той же пчелиной маткой: он бы мог теоретически, но не может. И вместо матки потом пахнет просто мёдом. И пчёлы окружают его, облепливают, пачкают, но никак не слушаются.</p>
            <p>Для "починки" такого досадного недоразумения уже не первый год трудится без выходных целое подразделение НИО, целью которого является разработка устройства по фиксированию и распознаванию запахов, недоступных человеческому восприятию. И оно уже бувально на пути к успеху...</p>
            <p>Откат-расплата за использвание данного дара: после 12-часового использования появляется выраженная сухость и шелушение кожи, вплоть до разрастающегося по телу псориаза, сопровождаемого неприятным жжением и зудом. Сходит со временем само.</p>

        </div>
      </div>
    </div>
  </section>
</article>

<style>
:root{
  --bg:#0d1517;
  --g1:#0e1a1d;
  --g2:#223235;
  --stroke:#1a3235;

  --text:#e9e6e0;
  --sub :#c8c3b8;
  --text-dim:#959187;

  --color1:#c5bdaa;
  --color1-light:#d9d4c9;
  --color1-dark :#a8a190;
}

.pp-text b,
.pp-text strong{
  color:var(--accent);
  font-weight:600;
  padding:0 .15em;
  background:rgba(197,189,170,.10);
  border-radius:2px;
}

.pp-card{
  max-width:960px;
  margin:2rem auto;
  padding:2.4rem;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  border:1px solid var(--stroke);
  box-shadow:0 0 22px #000b,inset 0 0 32px #001416;
  height:620px;
  overflow:hidden;
}

.pp-data{
  height:100%;
  overflow-y:auto;
  padding-right:0.4rem;
}
.pp-data::-webkit-scrollbar{
  width:4px;
}
.pp-data::-webkit-scrollbar-thumb{
  background:var(--text-dim);
  border-radius:4px;
}

.pp-tabs{font:normal 100% "Inter";}
.pp-tabs input{display:none;}

.pp-nav{display:flex;}
.pp-nav label{
  flex:1;
  position:relative;
  font:600 .9rem/2 "Inter",sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:.3rem 1.4rem;
  margin-left:-10px;
  cursor:pointer;

  background:#0d1b1e;
  border:1px solid var(--color1);
  color:var(--sub);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,12px 100%);
  transition:.2s;
}
.pp-nav label:first-child{
  margin-left:0;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,0 100%);
}
.pp-nav label:last-child{
  clip-path:polygon(0 0,100% 0,100% 100%,12px 100%);
}
.pp-nav label:not(:first-child)::before{
  content:"";
  position:absolute;
  left:-1px;top:0;
  width:2px;height:100%;
  background:var(--color1);
  transform:skewX(20deg);
}
.pp-nav label:hover{
  background:var(--color1-dark);
  color:#fff;
}
#tab-1:checked~.pp-nav label[for="tab-1"],
#tab-2:checked~.pp-nav label[for="tab-2"],
#tab-3:checked~.pp-nav label[for="tab-3"],
#tab-4:checked~.pp-nav label[for="tab-4"]{
  background:var(--color1);
  color:#0d1b1e;
  border-color:var(--color1-light);
  padding:.6rem 1.4rem;
  margin-top:-3px;
  z-index:2;
}

.pp-panel{
  display:none;
  animation:fade .25s ease;
  padding:1.1rem 20px;
  color:var(--sub);
}
@keyframes fade{from{opacity:0;transform:translateY(4px);}}

#tab-1:checked~.pp-panel[data-tab="1"],
#tab-2:checked~.pp-panel[data-tab="2"],
#tab-3:checked~.pp-panel[data-tab="3"],
#tab-4:checked~.pp-panel[data-tab="4"]{display:block;}

.pp-panel-content{display:flex;gap:2rem;align-items:flex-start;}

.pp-portrait{
  flex:0 0 220px;margin:0;
  position:relative;
  filter:drop-shadow(0 0 12px #000a);
  border:2px solid var(--color1);
}
.pp-portrait img{width:100%;display:block;border-radius:6px;filter:grayscale(.5);}
.pp-portrait::after{
  content:"";position:absolute;inset:0;
  background:rgba(197,189,170,.35);
  mix-blend-mode:multiply;
}

.pp-right{flex:1;display:flex;flex-direction:column;gap:1.5rem;}

.pp-facts{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  font-size:.95rem;
}
.pp-facts div{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;}
.pp-facts .key{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  justify-self:end;
  text-transform:uppercase;font-weight:600;font-size:.85rem;line-height:.5;
  color:var(--text);
  padding-right:.4rem;white-space:nowrap;
}
.key-sub{font-size:.75rem;color:var(--sub);text-transform:none;}
.pp-facts .bar{width:4px;height:1.2em;background:var(--color1);border-radius:1px;}
.pp-facts .val{justify-self:start;font-size:.95rem;color:var(--sub);white-space:nowrap;padding-left:.4rem;}

.pp-section-title{
  margin:2rem 0 .6rem;
  font:600 1rem/1 "Inter",sans-serif;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--text);
}
.pp-section-box{
  padding:1rem 1.2rem;
  background:rgba(255,255,255,.02);
  border-left:4px solid var(--color1);
  box-shadow:inset 0 0 0 1px #123135;
  font-size:.95rem;line-height:1.6;
  color:var(--sub);text-align:justify;
}

.pp-text{font-size:1rem;line-height:1.7;text-align:justify;color:var(--sub);}
.pp-text ul{margin:0 0 1.4rem 1.2rem;padding-left:1rem;list-style:disc;color:var(--sub);}
.pp-text p{margin:0 0 1rem;}

.pp-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:1.4rem;
}
.pp-name{
  font:600 2rem/1 "Cinzel",serif;text-transform:uppercase;
  letter-spacing:.05em;color:var(--sub);margin:0 2rem;
}
.pp-brand{
  display:flex;align-items:center;gap:.6rem;
  font:600 .9rem "Inter",sans-serif;color:var(--color1);
}
.pp-brand img{height:50px;width:auto;filter:brightness(1.2);opacity:.9;}
</style>
[/html]
[hideprofile]

Отредактировано Diego Cavalera (2025-04-29 19:35:04)