[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">Lawrence Goldsmith</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/569920.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">Глава семьи<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">03.05.156, 25</span>
              </div>
              <div>
                <span class="key">Организация</span><span class="bar"></span
                ><span class="val">Совет 12</span>
              </div>
              <div>
                <span class="key">Рост</span><span class="bar"></span
                ><span class="val">185 см</span>
              </div>
              <div>
                <span class="key">Класс силы</span><span class="bar"></span
                ><span class="val">N</span>
              </div>
              <div>
                <span class="key">Вес</span><span class="bar"></span
                ><span class="val">75 кг</span>
              </div>
            </div>
            <div class="pp-sections">
              <h2 class="pp-section-title">Внешность</h2>
              <div class="pp-section-box">
                <p>Молодой мужчина ростом выше среднего, с гармонично сложенной мускулатурой, статной осанкой, широкоплечий, хорошо физически развитый, за исключением одного нюанса: передвигаться он может только с тростью и ортезом, поддерживающим коленный сустав в неподвижном положении. Правая нога у него короче и тоньше другой, что Лоуренс скрывает специальной ортопедической обувью и одеждой, но специфическую походку, легкий наклон корпуса и напряжение в плечах спрятать ему не под силу.<br>Имеет правильные, приятные, сохранившие дыхание юности, черты лица: очерченные резные скулы, четкую линию подбородка, прямой, узкий и чуть выдающийся нос с едва заметной горбинкой. Кожа у Лоуренса бледная, холодная, с проступающими венками, губы полные. Волосы густые, мягко вьющиеся, коротко стриженные, теплого золотистого оттенка с медным отливом, чаще всего деликатно уложенные. Ресницы у него пушистые, длинные, брови густые, глаза большие, бесстрастные и непроницаемые, светлого голубого цвета. В целом в его облике сочетается холодная, недоступная аристократическая красота и человечная, живая уязвимость. <br>Носит одежду спокойных, приглушённых тонов сообразно своему высокому статусу: костюмы на заказ из лучших тканей, подчеркивающие происхождение и несущие флёр элегантности. Часто предпочитает водолазки с высоким воротником рубашкам и галстукам. Иногда использует винтажные лаконичные броши, эмалевые булавки, пуговицы с гравировкой и другие декоративные элементы. Лоуренс продвигает среди элиты и мастеров-модельеров Города и Изгойника моду начала двадцатого века ушедшей эпохи. <br>Ортез, сделанный для него по индивидуальному заказу, тонкий, но прочный, с плавной металлической окантовкой, практически незаметный под одеждой. Трость, с которой он не расстаётся, оформлена просто и сделана из крепкого дерева.</p>
              </div>
              <h2 class="pp-section-title">Дополнительно</h2>
              <div class="pp-section-box">
               <p>Испытывает симпатию к изгоям.<br>Ради интереса выучил несколько языков старого мира.<br>Практически не может передвигаться без трости и ортеза. Долгие прогулки или необходимость стоять на ногах, действуют на него изматывающе, вызывают боль в теле и конечностях. <br>Владеет искусством реставрации, умеет играть на нескольких музыкальных инструментах, но сам при этом не пишет картин и не занимается иными формами творчества, считая себя недостаточно талантливым в этом вопросе.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="pp-panel" data-tab="2">
        <div class="pp-text">

<p>Лоуренс – наследник семьи Голдсмит, покровительствующей искусствам и СМИ, родился недоношенным, больным ребёнком с деформацией нижних конечностей. Разумеется, родители мальчика могли себе позволить для своего первенца как лучшую доступную медицину города, так и неофициальную помощь со стороны изгоев. Взросление Лоуренса было сплетено с длительным курсом лечения, физиотерапией и несколькими хирургическими операциями, результатом которых стало то, что он получил возможность передвигаться самостоятельно, и левую ногу удалось полностью восстановить. Также с самого рождения при Лоуренсе был изгой по имени Джейс, который выступал как в роли лекаря для него, облегчая физическую боль и помогая костям встать на место, так и воспитателем и защитником.<br>Конечно, болезненность наложила отпечаток и на характер ребёнка. Он очень рано начал говорить, читать и писать. Не имея возможности играть и передвигаться наравне с другими детьми, Лоуренс рос закрытым, стеснительным и тихим, предпочитая веселью со сверстниками уединение, игры с самим собой, погружение в собственное воображение и истории об ушедшем мире. Благо, воображению было где разгуляться: с раннего детства Лоуренс был окружён уникальными картинами, скульптурами, костюмами и прочими вещами, доступ к которым был только у людей с фамилией Голдсмит. Огромный архив семьи, хранящий настоящие книги, позволил ему окунуться в мир прошлого, почувствовать красоту слога, боль от потери того, что он никогда в жизни не видел. Постоянное присутствие вместе с родителями на крупных выступлениях открыло ему мир драматургии, балета, оперы, классической музыки. Он жил в этом, пропитываясь насквозь, и практически не касаясь суровой реальности через мир воображения.<br>Обстановка в семье Голдсмит всегда была тёплой и уютной. Родители души не чаяли в своём сыне и смогли подарить ему любовь и заботу, которые компенсировали для него физическую неполноценность. Через какое-то время в семье появился второй ребёнок – девочка, очаровательная малышка.  <br>Обоих детей, по мере взросления, отец знакомил с делами Семьи. Лоуренса, как наследника, обязанного когда-нибудь занять его место, чуть больше, младшую сестру – чуть меньше. Оба изучали искусство реставрации и хранения предметов искусства, в целом сферу влияния Семьи, финансовые вопросы. Младшие Голдсмиты знакомились с представителями других Семей, заключали союзы и договоры, постепенно погружаясь в уже не столь красивый, как на обложке, мир. Гордон Голдсмит слишком любил своих детей, чтобы жестко сталкивать их с совсем уж неприглядными сторонами их жизни и до последнего отгораживал их от очень многого, начиная со связей Семьи с Теневым рынком, заканчивая аморальными политическими решениями, которые Совету время от времени приходилось принимать в кулуарах. Лоуренс, будучи довольно внимательным, конечно, многое подмечал, о многом догадывался сам, но одно дело – догадываться, другое – столкнуться с этим лицом к лицу, получив подтверждение отца.<br>Однако Гордон Голдсмит рассказать своим детям всего так и не успел.<br>Год назад, летом 180, чета Голдсмит с Лоуренсом и Джейсом присутствовали на открытии одной из крупных ежегодных выставок в Городской галерее. Когда Гордон Голдсмит выступал на трибуне с приветственным словом, произошёл теракт: на сцену бросили взрывающееся устройство. Мать Лоуренса погибла сразу, отец – через пятнадцать минут, на руках у команды медиков, которые не смогли его спасти. Лоуренса закрыл собой Джейс и умер буквально у него на руках. Сам же Лоуренс отделался парой царапин и глубоким шоковым состоянием. <br>Конечно, заговорщиков и исполнителей нашли очень быстро. У них не было ни единого шанса: убийство члена Совета 12 – это случай исключительный, и весь Город стоял на ушах, к расследованию подключили Шестёрку, изгоев, всех, кто так или иначе мог помочь обнаружить всех причастных к теракту. Совсем скоро начали происходить первые аресты, суды, и, как закономерный итог – показательная публичная казнь – мера также исключительная и не применявшаяся в Городе практически никогда. Лоуренс присутствовал на ней. Глядя на то, как испускают дух те, кто оставил его и сестру сиротами, он не испытал абсолютно никакого облегчения.<br>После траура, Лоуренсу пришлось занять место отца в Совете 12. Возможно, будучи морально не готовым сделать это так рано, Лоуренс мог бы доломаться окончательно, но, как ни странно, обилие работы и глубокое погружение в дела отца принесли ему облегчение. Груз ответственности за Семью, сестру, сферу деятельности Семьи, стал не камнем на шее, но опорой, ориентиром, за который Лоуренс сперва со страхом, а потом всё увереннее – начал держаться. <br>Со многими нюансами ему еще только предстоит познакомиться, его иллюзиям – развеяться, а кровавым тайнам – открыться. Но в истине больше красоты, чем в неведении, даже если она ужасна.</p>

        </div>
      </div>

      <div class="pp-panel" data-tab="3">
        <div class="pp-text">

<p>Лоуренс производит впечатление человека отчуждённого и холодного. Редко улыбается, говорит размеренно, тихо, практически никогда не повышает голос. Довольно замкнут, на публике появляется крайне редко, за исключением деловых встреч, собраний Совета и мероприятий, связанных со сферой влияния его семьи, предпочитая проводить время в особняке. Всегда был не слишком эмоционален, но эта его черта явно усилилась после теракта, унесшего жизни его родителей и воспитателя, будто опустошив изнутри.<br>Интеллектуально одарён, блестяще образован и воспитан, никогда не позволяет себе грубость и сквернословие. Внутри довольно мягок, испытывает трудности с выстраиванием личных границ, но при этом знает себе цену. Подвержен сомнениям, любит рефлексировать и рассуждать о насущных темах, в целом ценит хорошую дискуссию. Трепетно относится к своей сфере влияния, знает цену искусства, способен понять и почувствовать красоту вокруг себя, эстет. Крайне ответственен, работает на износ, порой забывая о сне и прочих потребностях. Превыше всего ставит свой долг перед семьёй и Городом.<br>Давление в свою сторону переносит плохо, склонен защищаться юмором и уходить из прямой конфронтации. Когда дело касается важных для него вещей и людей – способен проявить характер и непривычную жесткость. В целом идейный пацифист и моралист, придерживается идей ненасилия.</p>

        </div>
      </div>

      <div class="pp-panel" data-tab="4">
        <div class="pp-text">
        <h3><b>Способности не выявлены.</b></h3>

        </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]