[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">Noel Vertri</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://forumupload.ru/uploads/001c/73/bf/6/168336.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">02.07.161, 20 лет</span>
              </div>
              <div>
                <span class="key">Организация</span><span class="bar"></span
                ><span class="val">Кампус «Исток»<br>клуб «Сизый бархат»</span>
              </div>
              <div>
                <span class="key">Рост</span><span class="bar"></span
                ><span class="val">172 см</span>
              </div>
              <div>
                <span class="key">Класс силы</span><span class="bar"></span
                ><span class="val">Tm-III</span>
              </div>
              <div>
                <span class="key">Вес</span><span class="bar"></span
                ><span class="val">57 кг</span>
              </div>
            </div>

            <div class="pp-sections">
              <h2 class="pp-section-title">Внешность</h2>
              <div class="pp-section-box">
                <p><strong>Из архива СБ:</strong></p>
            <p><i>Пол</i>: мужской</p>
            <p><i>Возраст</i>: внешне - от 18 до 22 лет</p>
            <p><i>Тип телосложения</i>: астенический; масса тела ниже средней нормы, мускулатура хорошо развита</p>
            <p><i>Цвет кожных покровов</i>: светлый, близкий к фарфоровому оттенку, без выраженных дефектов или пигментаций</p>
            <p><i>Цвет волос</i>: светлый, с серебристо-белым оттенком; структура - волнистая; длина - средняя (до шеи)</p>
            <p><i>Цвет глаз</i>: радужка - золотисто-жёлтая, равномерного окраса; зрачки - вытянутой миндалевидной формы, реакция на свет сохранена</p>
            <p><i>Строение лица</i>: форма овальная; скулы высоко посажены, выраженные; нос прямой, узкий; губы средней полноты, чётко очерченные</p>
            <p><i>Шея</i>: длинная, тонкая</p>
            <p><i>Уши</i>: стандартной формы; проколы обоих ушей</p>
            <p><i>Руки</i>: тонкие, пальцы длинные</p>
            <p><i>Волосяной покров</i>: ниже нормы</p>
            <p><i>Особые приметы</i>: наличие постоянного изменения цвета радужки на аномальный оттенок (золотистый); проколы ушей, удлинённые клыки. </p>
            <p><i>Одежда на момент фиксации</i>: куртка чёрного цвета, футболка горчичного оттенка; фурнитура куртки - металлическая</p>
            <p><i>Прочее</i>: визуальные признаки нанесённых повреждений, шрамы или иные следы травмирования не зафиксированы. Принимая во внимание предполагаемый образ жизни и психологический портрет субъекта, отсутствие повреждений может указывать на внешнее вмешательство или применение восстановительных способностей сторонних лиц.</p>
              </div>

              <h2 class="pp-section-title">Дополнительно</h2>
              <div class="pp-section-box">
               <p><strong>Из протокола задержания:</strong></p>
            <p><i>Субъект</i>: Вертри Ноэль, 19 лет</p>
            <p><i>Основание для задержания</i>: нарушение общественного порядка (административное правонарушение)</p>
            <p><i>Описание обстоятельств</i>: Вертри Н. был задержан сотрудниками патрульной службы в ночное время в состоянии алкогольного опьянения. Субъект, совместно с группой лиц, громко распевал песни на улице, создавая шум, мешающий покою граждан в жилом районе. На неоднократные устные замечания гражданского характера субъект и сопровождающие его лица не реагировали.</p>
            <p><i>Поведение субъекта при задержании</i>: Агрессии и сопротивления не оказывал, требования сотрудников исполнял. Самостоятельно передвигался, в поддержке или медицинской помощи на момент задержания не нуждался.</p>
            <p><i>Примечания</i>: В ходе визуального осмотра явных признаков нанесённых травм, а также запрещённых к обороту предметов и веществ обнаружено не было.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="pp-panel" data-tab="2">
        <div class="pp-text">
         
<p><strong>Фрагмент из интервью для закрытого сообщества владельцев клубной карты «Сизого бархата»:</strong></p>
<p>…<br><i>Интервьюер</i>: Ноэль Вертри – это ведь не твои настоящие имя и фамилия?</p>
<p><i>Ноэль</i>: Всё же вы знаете! Я не думал, что эту информацию можно так просто откопать, если не владеть связями в СБ. Ну ладно… При рождении у меня были другие имя и фамилия. А вы хорошо подготовились, однако. Боюсь, что вы будете спрашивать дальше.</p>
<p><i>Интервьюер</i>: Спасибо за комплимент. Поверь, дорогуша, ничего, что могло бы навредить твоей бесценной репутации. Так когда ты поменял имя и фамилию?</p>
<p><i>Ноэль</i>: Когда попал в Изгойник.</p>
<p><i>Интервьюер</i>: Вертри – это фамилия твоего приёмного отца?</p>
<p><i>Ноэль</i>: Да.</p>
<p><i>Интервьюер</i>: Прости, что затрагиваю эту щекотливую тему, но наше сообщество желает знать подробности… Говорят, что у тебя необычная история знакомства с господином Вертри.</p>
<p><i>Ноэль</i>: Да. Папа, он… В общем, когда у меня впервые проявилась способность, я случайно телепортировался из Города на поверхность. Мне было двенадцать лет. Я плохо понимал, что тогда произошло, что это было за место. По правде говоря, я даже думал, что умер. А папа был во главе большой экспедиции, которая нашла меня. И он забрал меня в Изгойник и сразу усыновил. Однажды он сказал, что это было, будто провидение, он никогда не хотел детей, но, когда увидел меня там – понял, что заберёт и никогда не оставит.</p>
<p><i>Интервьюер</i>: О, это и правда ужасно трогательно. Из-за господина Вертри ты решил поступить в ИСТОК на факультет странников?</p>
<p><i>Ноэль</i>: Да, конечно. Хотя не только. Я влюбился в поверхность, мне страсть как нравится там быть. Для меня город – это клетка, а старый мир – глоток свободы. И папа помог мне научиться его любить. Он и сам очень любит его.</p>
<p><i>Интервьюер</i>: Любит… Ноэль, твой отец – довольно известный человек. Поэтому нам вдвойне интересно, как ты пережил новость о его исчезновении?</p>
<p><i>Ноэль</i>: Я знал, что этот вопрос прозвучит. Ну… Что же. Я в тот день был на учёбе, как обычно. И после меня встретил один из его коллег. Он рассказал, что папа был во главе очередной экспедиции, и что-то пошло не по плану. На них напали, часть команды смогла уйти, а часть так и не вернулась. До сих пор.</p>
<p><i>Интервьюер</i>: Это ведь произошло два года назад?</p>
<p><i>Ноэль</i>: Да, мне незадолго до этого исполнилось восемнадцать.</p>
<p><i>Интервьюер</i>: После этого ты присоединился к церкви Хранителя?</p>
<p><i>Ноэль</i>: Да, всё так.</p>
<p><i>Интервьюер</i>: Что же, мы вместе со всеми читателями будем молиться, чтобы Хранитель помог господину Вертри вернуться домой, к тебе, Ноэль. Также, после этого, насколько мне известно, ты устроился работать в наш клуб. Сначала официантом, потом танцором. Почему ты решил найти себе подработку? Неужели из нужды?</p>
<p><i>Ноэль</i>: Не из нужды, конечно, но и сами знаете, денег много не бывает. А я люблю комфорт. Мне нравится окружать себя красивыми вещами и веселиться, а для всего этого требуются деньги. Не хочу себе ни в чем отказывать. Тем более, мне нравится танцевать.</p>
<p><i>Интервьюер</i>: Бурлеск – это сложный жанр. Особенно для мужчины. Тебя не смущает то, что тебе приходится надевать платья, каблуки?</p>
<p><i>Ноэль</i>: Меня это совершенно не смущает. Это ведь сценический образ, а он может быть любым. Мне нравится внимание, блеск софитов. Нравится радовать наших клиентов красивой пластикой и изящными костюмами, на которые больше нигде не посмотреть. По сути, это уникальный опыт, который можно получить только в нашем клубе.</p>
<p><i>Интервьюер</i>: Возможно, кто-то из наших читателей не в курсе, но ты ведь и сам шьешь себе костюмы! К слову, как ты к этому пришёл?</p>
<p><i>Ноэль</i>: Мне всегда нравилось самовыражаться через одежду, а одежда у мастеров стоит очень дорого. Ко всему прочему, у меня есть своё видение, которое сложно донести до исполнителя. Для меня проще было научиться обращаться со швейной машинкой самому. Папа подарил мне её и обучающие материалы, когда узнал, что я хочу этим заниматься. Не знаю, где и как он умудрился такое достать… Но сейчас это – моя личная реликвия. И да, костюмы я шью сам.</p>
<p><i>Интервьюер</i>: Потрясающе! У тебя не возникает сложностей с совмещением твоей работы в нашем клубе и учебой?</p>
<p><i>Ноэль</i>: Практически никогда. Я выступаю не так часто, да и энергии во мне очень много, хватает на всё, даже вам на интервью после окончания рабочей ночи.</p>
<p><i>Интервьюер</i>: Ахаха. Ты очарователен, Ноэль. Пожалуй, и правда, пора отпускать тебя отдыхать. Но мы ещё обязательно с тобой встретимся! Спасибо за интересную беседу.</p>
<p><i>Ноэль</i>: И тебе спасибо. Крепко обнимаю наших любимых клиентов!</p>

        </div>
      </div>

      <div class="pp-panel" data-tab="3">
        <div class="pp-text">
          <p><strong>Из отзывов друзей и знакомых:</strong></p>
  <p>Отзыв №1: "Ну, он лёгкий, весёлый. Живчик такой гиперактивный. Любит прибухнуть и в целом покутить. Звезда танцпола, внимание точно любит. Если заходите в комнату на вечеринке, и на столе кто-то танцует с бокалом шампанского в руке или обнимается с сиськой пива — это Ноэль, инфа сотка".</p>
  <p>Отзыв №2: "Уж на сковородке. Если попытаться его прижать — выскользнет. Всё крутится, вертится. На вопросы прямо никогда не отвечает. Серьёзности ноль, ответственность вышла из чата. Совместные проекты по учебе планировать невозможно, всё сделает через жопу и потом будет стоять и глупо хлопать глазами, говоря, что он не со зла. Тупит пиздец. Раздражает. Так и хочется его треснуть по башке время от времени".</p>
  <p>Отзыв №3: "Очень ветреный. Но миленький. И жопа классная. Мне не дал, хотя говорил, что я ему нравлюсь. Танцует, конечно, так, будто его для этого родили. И ноги от ушей. Ну конфетка".</p>
  <p>Отзыв №4: "Приносил мне лекарства, когда я заболела и не могла выступать. И вкусняшки приносил. Добрый мальчик. Вообще всем делится, если мне или кому-то из девочек что-то нужно, помогает с костюмами просто так. Ходит права качать с начальством на тему нашего графика. Ну в общем. Лапочка!".</p>
  <p>Отзыв №5: "Ученик способный, явно не глупый, но слишком самоуверенный, склонен лезть на рожон и подставляться под опасные ситуации, как будто чувство самосохранения притуплено. Раньше был намного более благоразумным, но после исчезновения приёмного отца слетел с катушек и стал неконтролируемым. Надеюсь, не свяжется с плохой компанией, но до меня уже доходили слухи…".</p>
  <p>Отзыв №6: "Прилежный прихожанин. Истово верует в Хранителя. Но оно и не удивительно. На проповеди ходит исправно. А что, он что-то нарушил?".</p>
  <p>Отзыв №7: "Ой бля-я-ять. Ноэль. Нашли про кого спрашивать. Повздорили мы как-то. Пьяные были. Так он вместо того, чтобы нормально на кулаках отношения выяснить, взял и обращаться начал. Шерстью оброс, с клыков слюни аж потекли, и он мне в руку вцепился, прокусил, тварь блохастая. Ещё и убежал сразу после. Пускай прививки от бешенства сделает, придурок".</p>
  <p>Отзыв №8: "Мы встречались какое-то время. Было хорошо, спокойно. Но он почему-то одним днём взял и исчез, написал коротким сообщением, что мы расстаёмся. Честно, я не понял, почему он так поступил. До сих пор обидно".</p>
        </div>
      </div>

      <div class="pp-panel" data-tab="4">
        <div class="pp-text">
        <h3><b>Телепортация</b></h3>

<p><strong>Из архива СБ:</strong></p>
<p><i>Возраст первого проявления способности</i>: 12 лет.</p>
<p><i>Предельные возможности</i>: разовое перемещение (прыжок) на дистанцию до 30 километров при наличии двух объектов для переноса.</p>
<p><i>Возможности до достижения предела</i>: прямо пропорциональны массе переносимых объектов и дальности перемещения.</p>
<p><i>Максимальное количество объектов для переноса</i>: 2.</p>
<p><i>Максимальное количество прыжков в течение суток</i>: 7.</p>
<p><i>Зарегистрированные эффекты отката</i>: боли в теле, головокружение, дезориентация, тошнота. В ряде случаев симптомы достигают степени полной недееспособности; в теории возможен переход в состояние комы при крайнем истощении.</p>
<p><i>Ограничения на точку назначения</i>: требуется точная и подробная визуализация целевого места (обязательное условие). При недостаточной визуализации возможно смещение точки выхода на расстояние до нескольких километров либо перенос в место, схожее по характеристикам с целевым.</p>
<p><i>Перспективы боевого применения</i>: ограничены в связи с необходимостью высокой концентрации и фокусировки. Имеется потенциал для развития.</p>

<hr>
<h3><b>Зооморфизм - белый лис</b></h3>

<p><strong>Из архива СБ:</strong></p>
  <p><i>Возраст первого проявления способности</i>: 19 лет.</p>
  <p><i>Предельные возможности</i>: до 4–5 часов полного обращения.</p>
  <p><i>Зарегистрированные эффекты отката</i>: общая ломота в костях, усиление аппетита, выраженная физическая слабость.</p>
  <p><i>Перманентные внешние изменения</i>: цвет волос, цвет радужной оболочки глаз, зрачок лисьей формы, удлинённые клыки.</p>
  <p><i>Выявленные проблемы управления</i>: нестабильный контроль над способностью; под воздействием сильных эмоций возможно непроизвольное полное или частичное обращение (появление шерстяного покрова, характерного животного запаха, удлинённых когтей и зубов).</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]

Отредактировано Noel Vertri (2025-04-29 18:57:34)