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

[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://forumupload.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/viewtopic.php?id=62">I. РАССВЕТ ХАОСА. Большая услуга</a></p>
<h5>Внешность</h5>
<p>Молодой человек среднего роста (175 см). Он кажется внушительнее благодаря широким плечам и плотному телосложению. Привлекает внимание яркими и светлыми, словно яичный желток, волосами. Они мягко обрамляют небрежными волнами его ухоженное лицо с небольшим рубцом на правой щеке. Многие подмечают красоту его сапфировых спокойных глаз. Во время общения мимика Вальтера эмоционально сдержанная, однако, когда диалог затрагивает приятные для него моменты, губы трогает скромная улыбка. На гладковыбритых щеках можно заметить легкий румянец, добавляющий его облику юности и добродушия.

</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: #cec8bc;
    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(199 193 180);
    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]

Деревня оборотней Баэдирс

[hideprofile]

[html]<!-- мироописание от духа -->
<div class="world-container">

<div class="world-block">
  <div class="header">
    <span>Айварс Рыщущий</span>
<span>око стаи</span>
  </div>
    <img src="https://forumupload.ru/uploads/001c/12/48/13/860841.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
     <h5>Айварс Рыщущий</h5>
      <p>оборотень (волк), родился 10 ярца 968 года Первой эпохи.</p>
      <h5>Известность</h5>
      <p>Обычаи и быт воспитали в нем суровость и научили сдерживать эмоции, насколько это возможно для чистокровного оборотня. Айварс не любит юлить, старается говорить открыто и по делу, либо промолчать, если того требует ситуация. Среди тех оборотней, что застали его молодым клыком, был известен свободолюбием и авантюризмом. Часто отправлялся в одиночку в путешествия, из которых привез человеческую жену. Став пастью стаи, зарекомендовал себя как авторитетный и изобретательный командир, что часто помогал волкам находить нестандартные решения и возвращаться из набегов с победой, даже против таких опасных врагов как снежные эльфы. Когда оборотни оказались в Риддемире, не стал претендовать на титул альфы. За опыт и репутацию был выбран оком стаи, где также хорошо себя показал, следя за дисциплиной и подготовкой воинов, а также выработав новые военные тактики с учетом особенностей всех оборотней.</p>
<h5>Хроника</h5>
<p><a href="https://rahtay.rusff.me/viewtopic.php?id=82">Зов крови</a></p>
<h5>Внешность</h5>
<p>Лицо Айварса, тронутое морщинами, твердое и уверенное. Его желтые глаза всегда цепко следят за собеседником, будто мужчина примеряется, куда вцепиться, или угадывает, что сделает стоящий напротив. У него длинные волосы и коротко подстриженная борода местами с сединой. Несмотря на возраст, крепостью тела он ничем не уступает молодым соплеменникам, разве что мускулатура стала более сухой. Вкупе с ростом (182 см) он создает впечатление сильного и неустрашимого воина. Его движения и жестикуляция не изобилуют излишествами. Айварса вовсе можно было бы принять за статую, если бы не дыхание и реакция на внешние факторы. Исключением является взгляд, который всегда изучает окружающую обстановку, если мужчина не отвлечен другими заботами. </p>
     </div></div>

<div class="world-block">
  <div class="header">
    <span>Воланд Неуемный</span>
<span>альфа, вожак стаи</span>
  </div>
    <img src="https://forumupload.ru/uploads/001c/12/48/13/743323.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
     <h5>Воланд Неуемный</h5>
      <p>оборотень (волк), родился 3 вьюговея 982 года Первой эпохи.</p>
      <h5>Известность</h5>
      <p>Вожак северных оборотней, чье спокойствие и уверенность вдохновляют других. Многие отмечают его как сдержанного и не теряющего самообладание человека. Он не спешит с выводами — хоть и отличается излишней энергичностью и торопливостью в действиях, — всегда принимает решения, выслушав мнение своих соплеменников, ценя их вклад и идеи. Обладает глубоким уважением к традициям.</p>
<h5>Хроника</h5>
<p><a href="https://rahtay.rusff.me/viewtopic.php?id=82">Зов крови</a></p>
<h5>Внешность</h5>
<p>Величественный и красивый мужчина, излучающий уверенность и харизму. Его длинные, темные волосы подчеркивают благородные черты стройного и спокойного лица. Главным атрибутом его внешности являются холодные голубые глаза, в которых таится мудрость и сила предков. Он всегда одет в хорошие, дорогие одежды из меха, символизирующие высокое положение в стае. Его голос, приглушенный и бархатный, вызывает невольное почтение и доверие.
     </div></div>

<div class="world-block">
  <div class="header">
    <span>Ингрид Яростная Волчица</span>
<span>дочь альфы</span>
  </div>
    <img src="https://forumupload.ru/uploads/001c/12/48/13/831886.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
     <h5>Ингрид Яростная Волчица</h5>
      <p>оборотень (волк), родилась 11 ярца 998 года Первой эпохи.</p>
      <h5>Известность</h5>
      <p>Ингрид — воинственная, яркая и энергичная личность, которая сразу привлекает внимание своим сильным характером. Ее нрав яростный и бойкий, она не стесняется выражать свои мысли, чувства и желания. Если придется, не поскупится применить силу. Кажется другим импульсивной, что лишь подчеркивает ее страсть к жизни. Она предана семье и своим близким, отстаивает их с завидным рвением.</p>
<h5>Хроника</h5>
<p><a href="https://rahtay.rusff.me/viewtopic.php?id=82">Зов крови</a></p>
<h5>Внешность</h5>
<p>У Ингрид длинные черные волосы, которые редко встречаются с гребнем, что придает ее облику дикой красоты. Иногда она заплетает их в свободные косы или небрежный хвост. Ее крупные голубые глаза — унаследованная отцовская черта, — сверкают живостью и решимостью. Они способны выражать целую гамму эмоций от ненависти до глубокой любви. Нижнюю часть правой щеки и руки до локтя рассекают белесые шрамы, символизирующие ее смелость и желание смотреть в лицо опасности.
     </div></div>

  <div class="world-block">
  <div class="header">
    <span>Сигерд Ретивый</span>
<span>дух стаи</span>
  </div>
    <img src="https://forumupload.ru/uploads/001c/12/48/13/867658.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
     <h5>Сигерд Ретивый</h5>
      <p>оборотень (медведь), родился 10 листобоя 972 года Первой эпохи.</p>
      <h5>Известность</h5>
      <p>Главный жрец стаи, строгий и требовательный лидер, однако не лишенный мягкости и сострадания к подчиненным. Для сохранения порядка и безопасности своего народа порой принимает жесткие решения и не боится брать на себя ответственность за них. </p>
<h5>Хроника</h5>
<p><a href="https://rahtay.rusff.me/viewtopic.php?id=82">Зов крови</a></p>
<h5>Внешность</h5>
<p>Сигерд удивительно высок (210 см) и далеко нестроен, хотя под большим ворохом одежд эти объемы заметны не сразу. Выглядит он внушительно и пугающе за счет сильного упитанного тела и сощуренных глаз, придирчиво рассматривающих каждого попавшего в его поле зрения. У него длинные каштановые волосы, как правило, забранные в растрепанные косы, и подстриженная, средней длины борода. Голос низкий, басовитый, интонационно приказной.
     </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: #cec8bc;
    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(199 193 180);
    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]