[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">Markus 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://i.postimg.cc/wBRRWmSx/markus-boec.png"
              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">боец</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">09.01.150, 31 год</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">186 см</span>
              </div>
              <div>
                <span class="key">Класс силы</span><span class="bar"></span
                ><span class="val">E-V</span>
              </div>
              <div>
                <span class="key">Вес</span><span class="bar"></span
                ><span class="val">74 кг</span>
              </div>
            </div>

            <div class="pp-sections">
              <h2 class="pp-section-title">Внешность</h2>
              <div class="pp-section-box">
                <p>Волосы - словно унаследовал от золотистого ретривера, всегда ухожены и вкусно пахнут шампунем.</p><p>Глаза - голубее Шивы и Элтона Джона вместе взятых.</p><p>Шрамов по телу - что у бойцовой собаки, будто в крестики нолики кто-то лезвием (а точнее - клыками и когтями) по коже игрался. Спасибо работе.</p><p>Тату имеются, но это не точно. Раздень - узнаешь, называется.</p><p>Завиток над бровью - не тату, это закручивающийся дымок, появляющийся во время применения способки, просто ложится тонким слоем сажи, легко стирается.</p><p>Вне походов предпочитает носить классический костюм, в том числе - поскольку часто навещает НИО, и стремится соответствовать брату, находящемуся на высоких должностях. Да и по натуре - стиляга.</p>
              </div>

              <h2 class="pp-section-title">Дополнительно</h2>
              <div class="pp-section-box">
                <p>▸ с помощью способок - может испечь самый вкусный на свете вишнёвый пирог<br>▸ считает главного начальника Странников душкой - <i>"Вы не понимаете... Просто он таков каков есть. И больше никаков. А другого - нам и не надо." "Зато снова вернулись живыми... Что вам ещё надо? А те кто не вернулся - вот пусть и помалкивают."</i><br>▸ любит вещи на И: индейку, ирландский сеттеров, инди-рок, инцесты, интриги... <i><del>что? я сказал инцесты? вам наверное показалось</del></i> :з<br>▸ расставлять точки над И тоже любит. впрочем, как и над Ё. и просто ставить точки.<br>▸ уверенно сомневающийся гей</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="pp-panel" data-tab="2">
        <div class="pp-text">
<p>Биография бойца - не биография поэта, так что никакой лирики... Вот вам суровых фактов:</p>
<p>Хавьер Кавалера - отец<br>Диего Кавалера - родной брат по отцу</p>
<p>В 7 лет, после выявления 1й способки, попадает в Изгойник, в вышеозначенную семью, узнаёт о кровном родстве.<br>Бок о бок растёт, любит, дерётся, ссорится, обожает и борется за внимание приёмной матери с родным братом.<br>Долгое время ревнует и комплексует из-за того что младше, нероднее, даже ниже сам... Вторая способка появилась раньше чем у брата на год, но и тут - прохвост его обогнал, ибо был на два - старше. Однако, в какой-то момент, когда Маркус сравнялся по росту, и начал превосходить Диего в физических качествах, тоже осознал и начал доказывать всем вокруг, что не лыком шик. А кто из них "мелкий" - теперь оставалось только поспорить.<br>Если мозговитый первенец Кавалеры выбрал науку - Маркус, в противоположность, пошёл иным путём, связав свою жизнь с Корпусом Странников. Проявление второй способки в 15 лет - доказывает и утверждает, судьба будто сама благоволит тому, чтобы он стал бойцом.<br>Продолжает поддерживать тесное общение с Диего, сотрудничает и часто навещает его в НИО. Таскает ему разные всякие штуки, иногда не совсем легально, ну вы поняли. Не гнушается принимать участие в опытах и экспериментах брата в качестве живого образца.<br>Пару лет назад повредил колено, из-за чего на время вынужденно был переведен в отряд снабженцев. Год назад, после реабилитации - восстановился и вернулся к бойцам, где продолжает активно работать по сей день.</p>
        </div>
      </div>

      <div class="pp-panel" data-tab="3">
        <div class="pp-text">
          <p>Сладкий и жёсткий, как ворованная с поля кукуруза.<br>С равнодушием выслушает любое мнение о себе, наплюёт на него, да деликатно промакнёт губы платочком. Вот только попробуй кто при нём нелестно выскажись о брате или тронь пальцем, а ещё лучше пошути что-то про их 'особую связь' - замочит в сортире куском мыла, завёрнутым в полотенце. Хаить мелкого разрешено только ему. <del>Трогать тоже</del>.<br>Амбициозен. Противостоит Диего во мнениях, морали, методах работы и подходах к ним. На чужие - и вовсе положить.</p>
        </div>
      </div>

      <div class="pp-panel" data-tab="4">
        <div class="pp-text">
        <h3><b>Вишнёвый сад</b></h3>

<p>Пуская из запястья кровь (и при наличии в окружающем пространстве достаточной концентрации меркурита, отчего в Городе - способность не применима) - генерирует в любом месте пространства (радиусом до 100 м) деревья, напоминающие обыкновенную вишню, в том числе - сразу внутри живых или неживых объектов не слишком высокой плотности. Вначале - создаёт просто косточку, но может разрастить её до полноценного деревца. Таким образом - способен твёдрыми ядрышками пронзать жизненно-важные органы словно уже вошедшими пулями и разрывать мягкую органику быстро проращиваемыми из этих косточек стволами растений.<br>Сгенерированные косточки и деревья остаются до естественного разложения или изъятия.<br>На генерацию одной косточки - уходит секунда. Необходимый интервал-перерыв - ~0.5 минуты.<br>На выращивание одного деревца - уходит от 5 минут до получаса.<br>За сутки способен вырастить хоть целую плантацию, однако, это труднодоступный кейс - так как потребовалось бы дополнительное переливание. Реальная ситуация: генерация не более 7 косточек в бою, иначе начинает мутить от потери крови и плывёт контроль над телом и сознанием.<br>Побочный эффект: потеря крови (от 100 г до 1 л) и соответствующие последствия, требующие короткого или более длительного восстановления.</p>

<hr>
<h3><b>Танцующее пламя</b></h3>

<p><b>Применение:</b> активная, на себя.</p>

<p>C помощью концентрации на отдельных участках тела: в основном - кончики пальцев, ладони - способен генерировать направленный огонь. Глаза будто загораются в этот момент угольками, и из них идёт лёгкий дымок - но это всего лишь неконтролируемый "спецэффект".<br>Может просто дать прикурить вместо зажигалки с пальца, приготовить вам барбекю без мангала, а может хорошим таким костерком выжечь траву (со всем и всеми, кому не посчастливилось на ней пастись в это время) на территории общей площадью до 100 метров квадратных.<br>Однако, скорость распространения огня - стремительно падает по параболе в зависимости от удаления от источника (Маркуса). Если поджечь территорию в радиусе метра от себя он может почти мгновенно, то чтобы добить пламенем на 10 м вперёд - понадобится уже минута, а на 100 метров пламя способно распространиться лишь со скоростью улитки. Таким образом, не представляет серьёзной потенциальной опасности в Городе - система пожаротушения или органы безопасности успеют среагировать.<br>Ограничение - не более трёх хороших таких "напалмов" в сутки, иначе впадёт в кому. Из особых фокусов - создание файр-болла вроде управляемой шаровой молнии.<br>Устойчив к собственному пламени и, в отличие от других, не получает от него ожогов. Не имеет никакого "иммунитета" к сторонней стихии огня.<br>Побочный эффект: жёсткий сушняк, <del>алкоголизм</del>. От маленького огонька - ничего не будет, ну голова покружится. А хороший выжиг местности способен привести к болевому синдрому: озноб и ломота в теле - от часу до двух.</p>

        </div>
      </div>
    </div>
    <!-- /tabs -->
  </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]

Отредактировано Markus Cavalera (2025-04-29 15:02:42)