⠀Священная Инквизиция

[hideprofile]

[html]<!-- мироописание от духа -->
<script type="text/javascript" src="https://forumstatic.ru/files/001b/36/d6/94544.js"></script>
<div class="world-container">

  <div class="world-block">
  <div class="header">
    <span>Вальтер Маас</span>
<span>дознаватель</span>
  </div>
    <img src="https://upforme.ru/uploads/001c/12/48/13/187017.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
     <h5>Вальтер Маас</h5>
      <p>человек, родился 26 страдника 994 года Первой эпохи.</p>
<h5>Известность</h5>
      <p>Один из подчиненных инквизитора <a href="https://rahtay.rusff.me/profile.php?id=17">Аурелиана де Флери</a>. Помогал ему в обороне Нотенхофа от демонического вторжения в 20 году Второй эпохи.</p>
<h5>Хроника</h5>
<p><a href="https://rahtay.rusff.me/viewtopic.php?id=62">I. РАССВЕТ ХАОСА. Большая услуга</a></p>
<h5>Внешность</h5>
<p>Молодой человек среднего роста (175 см). Он кажется внушительнее благодаря широким плечам и плотному телосложению. Привлекает внимание яркими и светлыми, словно яичный желток, волосами. Они мягко обрамляют небрежными волнами его ухоженное лицо с небольшим рубцом на правой щеке. Многие подмечают красоту его сапфировых спокойных глаз. Во время общения мимика Вальтера эмоционально сдержанная, однако, когда диалог затрагивает приятные для него моменты, губы трогает скромная улыбка. На гладковыбритых щеках можно заметить легкий румянец, добавляющий его облику юности и добродушия.
</p>
     </div></div>

<div class="world-block">
  <div class="header">
    <span>Марте Эбнер</span>
<span>инквизитор</span>
  </div>
    <img src="https://forumstatic.ru/files/001c/12/48/65291.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
     <h5>Марте Эбнер</h5>
      <p>человек, родился 30 листобоя 985 года Первой эпохи.</p>
      <h5>Известность</h5>
      <p>Инквизитор Эбнер является постоянной единицей при Великом Святилище. Именно на его попечение оставляют молодых людей, желающих пройти паломничество и обряд Инициации.</p>
<h5>Хроника</h5>
<p><a href="https://rahtay.rusff.me/viewtopic.php?id=123">[15 год Второй эпохи] Главная клятва</a></p>
<h5>Внешность</h5>
<p>Это крепкий, излучающий уверенность человек, чье мужественное лицо украшают высокие скулы и сильные черты. У него сияющие светло-зеленые глаза, подчеркнутые широкими кустистыми бровями и курчавыми, беспорядочными волосами, выглядящими так, словно он только что поднялся с постели. Во взгляде Марте присутствуют странная задумчивость и глубина. Сдержанные манеры и умение красноречиво говорить отражают его воспитание и достоинство. Невозможно представить этого невозмутимого человека в гневе, столь учтивым и уравновешенным он предстает в обществе.</p>
     </div></div>

<div class="world-block">
  <div class="header">
    <span>Оливер Кригер</span>
<span>дознаватель</span>
  </div>
    <img src="https://forumstatic.ru/files/001c/12/48/33323.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
     <h5>Оливер Кригер</h5>
      <p>человек, родился 8 перезимья 994 года Первой эпохи.</p>
      <h5>Известность</h5>
      <p>Дознаватель, родом из небольшого поселения Имдур, Фестберг.</p>
<h5>Хроника</h5>
<p><a href="https://rahtay.rusff.me/viewtopic.php?id=123">[15 год Второй эпохи] Главная клятва</a></p>
<h5>Внешность</h5>
<p>При всей своей громоздкости — высокой фигуре (188 см) и атлетическому телосложению — Оливер двигается с непринужденной легкостью, свидетельствующей о внутреннем спокойствии и непоколебимости. Его лицо визуально утяжелено крупной челюстью, придающей несколько суровый вид. Густые брови зачастую нахмурены, отбрасывая на карий взгляд налет усталости. Черные волосы, упрямо лезущие в глаза, придают ему небрежный, в какой-то степени хулиганский образ, свидетельствуя о том, что ему по большому счету безразлична собственная внешность.</p>
     </div></div>

<div class="world-block">
  <div class="header">
    <span>Стеффен Ваккер</span>
<span>дознаватель</span>
  </div>
    <img src="https://forumstatic.ru/files/001c/12/48/53908.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
     <h5>Стеффен Ваккер</h5>
      <p>человек, родился 11 ярца 996 года Первой эпохи.</p>
      <h5>Известность</h5>
      <p>Дознаватель, родом из Ленхельма, Фестберг.</p>
<h5>Хроника</h5>
<p><a href="https://rahtay.rusff.me/viewtopic.php?id=123">[15 год Второй эпохи] Главная клятва</a></p>
<h5>Внешность</h5>
<p>В первую очередь Стеффен запоминается мягкой и теплой наружностью: у него красивое, с острым овалом лицо; безупречно ровная золотистая кожа; добрая улыбка и приветливый взгляд. Густые каштановые кудри упрямо извиваются вокруг головы, придавая ему какого-то детского очарования. Глаза яркие, зеленые, с вкраплениями карего. Приподнятые брови создают о нем впечатление, как о человеке робком, неуверенном и вечно удивленным, однако искреннем и обаятельном. Присущая ему застенчивость временами отражается в улыбке — такой же настоящей и доверчивой, как его душа.</p>
     </div></div>

<style>
/* css мироописания от духа */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Rubik:wght@500;600;800;900&display=swap');

.world-container {
  column-gap: 0px;  /* отступ между колонками */
  margin: 0px auto 0px auto;
  column-count: 1; /* количество столбцов*/
  width: 900px;  /* ширина контейнера с блоками*/
  position: relative;
  text-align: center;
}

.world-block {
      margin: 1px 0px;
    padding: 0px;
    display: inline-block;
    line-height: 0;
    width: 290px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all .9s cubic-bezier(.63,.34,.09,.96) 0s;
    border: 1px solid #cec8bc;
    outline: 1px solid #b2ab9d;
}

.world-block .header {
  position: absolute;
    background: linear-gradient(to bottom, rgb(41 154 11 / 0%) 0%, rgb(0 0 0 / 0%) 18%, rgb(0 0 0 / 6%) 39%, rgb(0 0 0 / 7%) 74%, rgb(0 0 0 / 57%) 100%);
    color: #cecbc2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    font: 18px 'beuafort';
    /* text-transform: uppercase; */
    z-index: 1;
}

.world-block:hover {
  filter: grayscale(100%)
}

.world-block img {
    transition: all .3s cubic-bezier(.63,.34,.09,.96) 0s;
    width: 290px;
    height: 319px;
}

.world-block:hover img {
  transform: scale(1.1);
  filter: blur(1px);
}

.world-block .header span {
  display: block;
  margin-bottom: 10px;
  text-align: center;
font-family: 'BebasNeue';
    font-size: 22px;
}

.closed{
  background: #cfc3a5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    padding: 25px;
    text-align: justify;
    display: none;
    /* border: 3px double #8b6f3e; */
    border: 1px solid #d9c7a4;
    box-shadow: 0 0 1px 1px #201f1c70, inset 0px 0px 0px 1px #a1998a, inset 0 0 1px 1px #cec8bc;
    outline: 1px solid #8b6f3e;
    border-radius: 8px;
}

.closed > div:not(.close-btn) {
  overflow-y: auto;
  height: calc(100% - 35px);
  padding-right: 5px;
}

.close-btn {
  background: rgb(131 112 86);
    border: 1px solid rgb(178 171 157);
    /* border-radius: 8px; */
    /* height: 23px; */
    text-transform: uppercase;
    font: 13px beuafort;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
    letter-spacing: 2px;
    color: #35302a;
    padding: 5px;
}

.closed k1 {
  font: 20px you;  /* шрифт заголовков описания */
  margin: 30px 0px 10px;
  position: relative;
  padding-left: 45px;
  color: #8b7154;
}

.closed k1:before {
  content: "";
  height: 2px;
  width: 30px;
  background: #413525;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.closed k1:first-child {
  margin-top: 0;
}

.closed em {
  font: 12px SANTELLO;
    color: #000000;
    display: table;
    /* border: 1px solid rgb(28 28 28); */
    border-radius: 3px;
    padding: 7px 14px 7px 14px;
    text-align: right;
    /* width: 250px; */
    /* margin: 10px 0; */
    margin: 0px 0px 10px auto;
    background: #8b7154;
}

.closed h5 {
  font: 23px you;  /* шрифт заголовков описания */
  margin: 30px 0px 10px;
  position: relative;
  padding-left: 45px;
  color: #8b7154;
}

.closed h5:before {
  content: "";
  height: 2px;
  width: 30px;
  background: #413525;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%)
}

details{
  display: block;
    background: #151313;
    border: 1px solid #1c1c1c;
    /* width: 100%; */
    /* box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); */
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 20px;
}
summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;}
summary {
   /*display: block; */
    cursor: pointer;
    position: relative;
    padding: 10px;
    /* border: 1px solid #1c1c1c; */
    /* background: #151313; */
    /* border-radius: 0px !important;
}
summary:before { 
  top: .4em;
  left: .3em;
  color: transparent;
  background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em;
  width: 1em;
  height: 1em; 
  content: "";
  position: absolute;
  transition: transform .5s;
}
details[open] > summary:before {
  transform: rotateZ(90deg);
}
summary ~ * {
   padding: 0 2em 10px 2em;
}
details[open] summary ~ *{
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
summary:focus {
  outline:0;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}
</style>

[/html]