[html]
<div class="guide-wrapper rules-mybb-fix">
  <div class="main-box">
    <div class="inner-box">
      <div class="content-bg">
      <div class="glass-block info">
        <div class="name-en">name surname</div>
        <div class="group">в пару/сестра/друзья</div>
        <div class="name-ru">любое, любой</div>
      </div>
      <div class="glass-block photos">
        <div class="photo-wrap">
          <div class="photo"><img src="https://i.pinimg.com/originals/ab/3e/58/ab3e58f3da717789583932964129875b.gif"></div>
          <div class="photo"><img src="https://i.pinimg.com/originals/a9/09/ca/a909ca0ea97d402a459ec5fd2bffc8df.gif"></div>
        </div>
        <div class="fc">fc: Emmy Rossum</div>
      </div>
      <div class="glass-block text">
        <p>не то чтобы я собираю каст "бесстыжих", но он такой сестрички я бы не отказался. а может, и не сестрички</p><p></p><p>в зависимости от того, родственные связи мы выберем или нет, я вижу две линии:</p><p></p><p>сестра: жующая стекло семейка, где общее горе (смерть родителей/что-нибудь ещё) должно было сплотить, но по факту утянуло в болото из лжи. один связался с непонятной компанией, другая пошла по рукам. случайная встреча, ахуй от того, кто кем стал, а тут ещё вирус, как назло. ты такая: прикинь, я нашла сироту, ему десять лет, и он умеет двигать предметы взглядом, чё делать?</p><p></p><p>не сестра: тут может быть что-то аналогичное, начавшееся с дружбы, утонувшее в ненависти и внезапно переросшее во что-то большое. не исключаю, что ребёнок мог оказаться моим, а я или ты - с чешуёй (может, у наркош больше шансов выжить?).</p>
      </div>
<div class="glass-block dopolnitelno">
  <p><strong>Дополнительная информация:</strong> обсуждаемо, меняемо, люблю накуривать какие-нибудь сюжеты, которые нормальный человек никогда не накурит. если ты такая же, я буду только раз, если хуже - безумно счастлив, если не дотягиваешь до "такой же" - расстрясу и научу накуривать, за мной не заржавеет</p>
</div>
      <div class="footer">flamevector</div>
    </div>
  </div>
</div>
</div>

<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}

.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p {font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]

Подпись автора

[html]<div class="battery-wrapper" data-level="6">
  <div class="battery">
    <div class="title">MY SOCIAL BATTERY</div>

    <div class="segments">
      <div class="seg">😢</div>
      <div class="seg">🙁</div>
      <div class="seg">😕</div>
      <div class="seg">😐</div>
      <div class="seg">🙂</div>
      <div class="seg">😊</div>
      <div class="seg">😄</div>

      <div class="track">
        <div class="indicator">⚡</div>
      </div>
    </div>
  </div>

  <div class="side"></div>
</div>

<style>
@font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
}
.battery-wrapper{
  position: relative;
  width: 300px;
  transform: scale(0.7);
  transform-origin: top left;
  margin: 0 auto;
}

.battery{
  background:#000;
  border-radius:16px;
  padding:12px;
  color:#fff;
  font-family:sans-serif;
}

.side{
  position:absolute;
  right:-14px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:50%;
  background:#000;
  border-radius:0 8px 8px 0;
}

.title{
  text-align:center;
  margin-bottom:10px;
  font-size:20px;
  font-family: 'Cinzel';
}

.segments{
  display:flex;
  overflow:hidden;
  border-radius:10px;
  margin-bottom:8px;
  position:relative;
}

.seg{
  flex:1;
  text-align:center;
  padding:8px 0 40px;
  font-size:14px;
}

.seg:nth-child(1){background:#ff3b3b;}
.seg:nth-child(2){background:#ff6b3b;}
.seg:nth-child(3){background:#ff9b3b;}
.seg:nth-child(4){background:#ffd93b;}
.seg:nth-child(5){background:#b7e23b;}
.seg:nth-child(6){background:#6be23b;}
.seg:nth-child(7){background:#2be23b;}

.track{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  height:10px;
  background:#222;
  border-radius:999px;
  z-index:2;
}

.indicator{
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%);
  font-size:20px;
  transition:0.3s ease;
}
</style>

<script>
function updateAll() {
  document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
    const level = parseInt(wrapper.dataset.level) || 1;

    const indicator = wrapper.querySelector('.indicator');
    const segments = wrapper.querySelectorAll('.seg');
    const count = segments.length;

    // центр сегмента + маленький сдвиг вправо
    const offsetPercent = 2; // смещение вправо в процентах
    const percent = ((level - 0.5) / count * 100) + offsetPercent;

    indicator.style.left = percent + '%';
  });
}

window.onload = updateAll;
window.onresize = updateAll;
</script>[/html]

[html]

<div class="main-block">

  <p class="main-title"><strong>ИНКВИЗИТОРЫ, ОБЩИЙ СБОР!</strong></p>

  <p class="announcement-text">
    Специальная группа инквизиторов <strong>«Всадники Бездны»</strong> (официально «группа А») состоит из весьма необычных людей, чье поведение вряд ли сойдет за нормальное, даже в условиях пандемии. Я выбирал вас тщательно, следил за вами и анализировал, благодаря чему смог собрать вас в один отряд верных делу и друг другу инквизиторов. Наша группа отмечена смертью, мы несем ее всем, кто дымится или скоро начнет, потому что мы убеждены, что эта зараза будет жить, пока бьется сердце хотя бы одного зараженного. Вакцины для нас не более, чем сказка, которую придумали отчаявшиеся. Но мы не такие. Мы сильны в своей вере в спасение. Огнем и мечом, ребята!
  </p>

  <div class="characters">

    <!-- Персонаж 1 -->
    <div class="character">
      <!-- Кличка сверху -->
      <div class="char-nickname">ШУТ</div>

      <!-- Фото слева -->
      <img class="char-img" src="https://upforme.ru/uploads/001c/89/28/4/t445942.png" alt="ШУТ">

      <!-- Текст справа от фото -->
      <div class="char-bio">
        <div class="char-name">adrian hale, 24</div>
        <div class="char-prototype">ty simpkins</div>
        <p>
          Август 2024-го забрал у него родителей и дом, зато подарил привычку смеяться там, где другим хотелось кричать. Адриан обожает балаганить, раздавать дурацкие прозвища тем, кто в дыму умирает, будто это всё цирковое представление, а не конец мира. Его шутки слишком громкие, его движения слишком резкие, но именно этим он отвлекает от собственного страха. В его глазах всегда искрит что-то большее, чем простая насмешка. Он идёт вперёд, не оглядывается, потому что позади давно уже пусто. И когда он убивает заражённых, он делает это с тем же смехом — лёгким, как будто речь идёт не о смерти, а о плохом анекдоте.
        </p>
      </div>
    </div>

    <!-- Персонаж 1 -->
    <div class="character">
      <!-- Кличка сверху -->
      <div class="char-nickname">БАШНЯ</div>

      <!-- Фото слева -->
      <img class="char-img" src="https://upforme.ru/uploads/001c/89/28/4/t761836.png" alt="БАШНЯ">

      <!-- Текст справа от фото -->
      <div class="char-bio">
        <div class="char-name">marcus rayne, 25</div>
        <div class="char-prototype">river viiperi</div>
        <p>
          Он никогда не рассказывал, что именно произошло прошлым августом, но иногда его руки дрожат так, будто держат не оружие, а обломки собственного дома. Маркус кажется простаком: сутулый, неуклюжий, любит болтать о глупостях и подшучивать над собой. Но ровно до того момента, пока на горизонте не появится дым — тогда он меняется, срывается с цепи и крушит всё подряд, пока заражённые не перестанут дышать. В его разрушениях есть что-то болезненно-освобождающее, как будто он снова переживает свой прошлогодний пожар. Но даже в этом состоянии он держит рамки: незаражённых не тронет, максимум оглушит, если они станут поперёк дороги. Каждое его сражение похоже на падение, на новое крушение, от которого он сам же и получает силу.
        </p>
      </div>
    </div>

    <!-- Персонаж 1 -->
    <div class="character">
      <!-- Кличка сверху -->
      <div class="char-nickname">СИЛА</div>

      <!-- Фото слева -->
      <img class="char-img" src="https://upforme.ru/uploads/001c/89/28/4/t43077.png" alt="СИЛА">

      <!-- Текст справа от фото -->
      <div class="char-bio">
        <div class="char-name">livia sorrel, 23</div>
        <div class="char-prototype">crystal reed</div>
        <p>
          Её смех слышен ещё до того, как она появится из-за угла. Ливия смеётся звонко, задирает товарищей, подталкивает плечом, всегда будто играет. Но стоит вспомнить прошлый август — и улыбка застывает. Она держала сестру, когда та вспыхнула, и даже тогда не позволила себе закричать. С тех пор её хватка только крепче. Ливия способна переломить позвоночник голыми руками и сделать это так же просто, как раньше держала сестру за руку. В её дурашливости всегда скрыт зверь, хищный и неумолимый. И когда зверь выходит, заражённые не успевают даже удивиться.
        </p>
      </div>
    </div>

    <!-- Персонаж 1 -->
    <div class="character">
      <!-- Кличка сверху -->
      <div class="char-nickname">ПОВЕШЕННЫЙ</div>

      <!-- Фото слева -->
      <img class="char-img" src="https://upforme.ru/uploads/001c/89/28/4/t543463.png" alt="ПОВЕШЕННЫЙ">

      <!-- Текст справа от фото -->
      <div class="char-bio">
        <div class="char-name">emrys vale, 24</div>
        <div class="char-prototype">dylan minnette</div>
        <p>
          Эмрис часто сидит вверх ногами, глядя на мир так, будто ему там всё яснее. Он обожает рассказывать странные истории, в которых невозможно разобрать, где правда, а где игра. Год назад его семья закрыла его в подвале, чтобы «уберечь от заразы», но спасли не они, а тьма, с которой он научился говорить. С тех пор он ведёт себя как безобидный чудак: поёт детские песенки на вылазках, строит гримасы, будто всё вокруг шутка. Но когда приходит время убивать заражённых, его рука не дрожит. Мир для него давно перевёрнут, а смерть — просто ещё одна грань игры.
        </p>
      </div>
    </div>

    <!-- Персонаж 1 -->
    <div class="character">
      <!-- Кличка сверху -->
      <div class="char-nickname">ЛУНА</div>

      <!-- Фото слева -->
      <img class="char-img" src="https://upforme.ru/uploads/001c/89/28/4/t171524.png" alt="ЛУНА">

      <!-- Текст справа от фото -->
      <div class="char-bio">
        <div class="char-name">rafael moore, 27</div>
        <div class="char-prototype">nicholas hoult</div>
        <p>
          Рафаэль редко смотрит прямо, чаще куда-то вбок, в туман или за спины товарищей. Он привык к дыму — ещё в августе прошлого года заблудился в огне и несколько дней бродил среди пепелища, пока его не нашли. С тех пор он словно слышит то, что другим недоступно: шаги в темноте, шёпот из пустых домов, дыхание заражённых за стеной. Его рассказы звучат как сказки — кто-то смеётся, кто-то молчит, не зная, где он врёт, а где говорит правду. Рафаэль сам будто тень, растворяющаяся в дыму. Но если он уходит в туман — можно не сомневаться, он вернётся не один.
        </p>
      </div>
    </div>

  </div>

  <p class="section-title"><strong>ЧТО ВАМ НАДО ЗНАТЬ</strong></p>
  <p class="section-text">
     Вы ведете себя так, будто находитесь не посреди горящих трупов, а в зрительном зале на премьере комедии, но когда дело доходит до работы, вы отдаетесь целиком и полностью. Вы на своей волне, часто галдите, чем бесите меня. Вы, ребятки, любители активного отдыха, шуток и веселья. Я выбрал вас, потому что вы не потеряли вкуса жизни, вы хотите жить и избавить мир от огненной чумы любыми способами, вырезав этот нарыв с корнем. У каждого из вас есть свои причины ненавидеть вирус, свои убеждения, но цель у нас одна. И это то, что нас объединяет. И даже то, что я держусь от вас на расстоянии и не подпускаю вас близко, не мешает мне называть вас своими друзьями. Единственными. Только вы способны понять меня, выслушать, перевести даже самую серьезную ситуацию в шутку, над которой мы вместе посмеемся.
  </p>
  <p class="section-text">
     Впереди у нас очень много дел, так что я надеюсь, что кого-то заинтересовал. Относительно вариативности. Я бы не хотел ничего менять в персонажах. Соглашусь, наверное, на смену имени и внешности, если у вас есть что-то получше. С внешностью будет сложнее договориться, но мы с вами взвесим все и придем к общему знаменателю, я уверен.

  </p>

</div>

<style>

@font-face {
  font-family: 'Cinzel';
  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
}

.main-block {
  width: 600px;
  margin: 0 auto;
  font-family: 'Cinzel', Arial, sans-serif;
  color: #000;
}

.main-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
}

.announcement-text {
  margin-bottom: 30px;
font-size: 14px;
text-indent: 25px;
text-align: justify;
}

.characters {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.character {
  overflow: hidden; /* чтобы текст обтекал фото */
}

/* Кличка сверху, не обтекает текст */
.char-nickname {
  font-weight: bold;
  margin-bottom: 5px;
  text-align: center;
  font-size: 16px;
}

/* Фото слева, текст обтекает его */
.char-img {
  float: left;
  max-width: 20%; /* масштаб 80% */
  height: auto;
  margin-right: 15px;
  margin-bottom: 5px;
}

/* Текст справа от фото */
.char-bio {
  overflow: hidden; /* чтобы текст обтекал фото */
}

.char-name {
  font-weight: bold;
font-size: 14px;
text-indent: 25px;
}

.char-prototype {
  font-style: italic;
font-size: 12px;
text-indent: 25px;
}

.char-bio p {
  margin-top: 5px;
  line-height: 1.4em;
font-size: 14px;
text-indent: 25px;
text-align: justify;
}

.section-title {
  margin-top: 60px;
font-size: 16px;
text-indent: 25px;
text-align: center;
}

.section-text {
  margin-bottom: 30px;

font-size: 12px;
text-indent: 25px;
text-align: justify;
}

</style>
[/html]

Отредактировано Cain (2026-01-29 22:32:07)

[html]
<div class="guide-wrapper rules-mybb-fix">
  <div class="main-box">
    <div class="inner-box">
      <div class="content-bg">
      <div class="glass-block info">
        <div class="name-en">Loraine Antiaris</div>
        <div class="group">дочь</div>
        <div class="name-ru">Лорейн Антиарис , 21</div>
      </div>
      <div class="glass-block photos">
        <div class="photo-wrap">
          <div class="photo"><img src="https://64.media.tumblr.com/5c48414a828fd06f1e9b52116e5890e8/tumblr_inline_nlwai3GYxi1rifr4k.gif"></div>
          <div class="photo"><img src="https://64.media.tumblr.com/abe83a42f867fd4845ed7cf580d76442/tumblr_inline_nlwah06wCu1rifr4k.gif"></div>
        </div>
        <div class="fc">fc: Barbara Palvin</div>
      </div>
      <div class="glass-block text">
        <p>Лорейн была желанной дочерью в семье Антиарис. Несмотря на свой достаточно жёсткий характер, Зак никогда не применял его к дочери. Она - маленькая копия его жены, год назад умершей от вируса одной из первых. Трагедия особенно сплотила Лорейн и Зака, но после неё мужчина всё больше стал требовать, чтобы Лорейн не выходила из дома. Он готов был скупить все поддельные вакцины, если это помогло бы уберечь её от вируса, и был уверен, что таким образом действительно поможет ей. Но...не уберёг. В один прекрасный день Лорейн заметила на своём теле небольшие тёмные пятна, похожие на синяки, но, присмотревшись, поняла, что это вовсе не синяки. Конечно, она рассказала обо всём отцу. Зная, что на носителей вируса ведётся охота, Зак поклялся дочери и самому себе молчать, что бы ни произошло. Он прекрасно знал, что не может рассказать об этом даже племяннику - кузену Лорейн, потому что тогда тот придёт за ней.</p>
      </div>
<div class="glass-block dopolnitelno">
  <p><strong>Дополнительная информация:</strong> у нас немного странная семья: я работаю в полиции, а Кейн - в инквизиции и убивает заражённых без суда и следствия хд мы оба будем очень рады, если кто-то придёт на эту роль и пожрёт с нами стекла.</p>
</div>
      <div class="footer">flamevector</div>
    </div>
  </div>
</div>
</div>

<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}

.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p {font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]

[html]
<div class="guide-wrapper rules-mybb-fix">
  <div class="main-box">
    <div class="inner-box">
      <div class="content-bg">
      <div class="glass-block info">
        <div class="name-en">Grace Salieri</div>
        <div class="group">сестра</div>
        <div class="name-ru">грейси сальери, 34</div>
      </div>
      <div class="glass-block photos">
        <div class="photo-wrap">
          <div class="photo"><img src="https://64.media.tumblr.com/02d0bc6fdeaab0db3e204db20835210a/3ed6b7224bfc4354-be/s400x600/0f9fb03db4ec98e2a2e6ad035848ca5019f6ee43.gifv"></div>
          <div class="photo"><img src="https://64.media.tumblr.com/88523db2bf9fbd3fdc95b86c486c05c4/3ed6b7224bfc4354-81/s400x600/94b6b857e8bc0b6a31896003363e7db15ebaad8b.gifv"></div>
        </div>
        <div class="fc">fc: bella heathcote</div>
      </div>
      <div class="glass-block text">
        <p>Грейс всегда была светлым пятном в своей семье. Её брат, Эллиот, никогда не уставал удивляться тому, насколько позитивной была его младшая сестрёнка. Но в один момент всё изменилось. Эл поступил в медицинский институт, и дом, некогда наполненный смехом и заботой, стал холодным и мрачным. Мама, которая всегда была опорой для Грейс, внезапно ушла из жизни, оставив за собой пустоту, которую ничем не заполнить. А папа, потерявший смысл существования, погрузился в алкоголь, и его агрессия стала неотъемлемой частью их совместной жизни.</p><p></p><p>В тот момент, когда Грейс окончательно осознала, что осталась одна, она решила, что больше не может оставаться в этом аду. Девушка собрала свои вещи и ушла, оставив за собой воспоминания о том, что когда-то было домом. Ей было всего восемнадцать, и она не знала, куда идти. От безысходности взгляд её упал на полицейскую академию. Вариант, может, не лучший, но и не худший точно.</p>
      </div>
<div class="glass-block dopolnitelno">
  <p><strong>Дополнительная информация:</strong> честно признаюсь, хочу пожевать стекла вот с этим всем "как ты мог меня бросить" и всё такое. Кроме того, учитывая, что Эллиот заражён, если Грейс узнает об этом, перед ней встанет нравственный выбор, ведь, как представитель закона, она должна сообщить об Эллиоте инквизиции, а те - зачистить. По постам подстраиваюсь под игрока и по размеру, и по лицу, и по всему остальному. Люблю накуривать идеи и принимаю даже самые неадекватные</p>
</div>
      <div class="footer">flamevector</div>
    </div>
  </div>
</div>
</div>

<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}

.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p {font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]

[html]
<div class="guide-wrapper rules-mybb-fix">
  <div class="main-box">
    <div class="inner-box">
      <div class="content-bg">
      <div class="glass-block info">
        <div class="name-en">Henry Dawsan</div>
        <div class="group">отец</div>
        <div class="name-ru">Генри Доусон, 50+</div>
      </div>
      <div class="glass-block photos">
        <div class="photo-wrap">
          <div class="photo"><img src="https://64.media.tumblr.com/c5c86cc2fc5ee7ece9e9b14ff83dab20/tumblr_inline_p9xjuzW6Bz1sirj9i_250.gifv"></div>
          <div class="photo"><img src="https://64.media.tumblr.com/a5d87f71e3f942f57d5431c94d4d6129/tumblr_inline_p9xknm3Ndp1sirj9i_250.gifv"></div>
        </div>
        <div class="fc">fc: mads mikkelsen</div>
      </div>
      <div class="glass-block text">
        <p> Генри - тот, кто всегда стремился к власти и в конце концов её получил. Тот, кто не давал спуска сыну и отстаивал перед матерью его право на отсутствие сочувствия к другим. Тот, кто и пытался вырастить наследника, не падкого на человеческие чувства. В какой момент его план потерпел крах? В тот ли, когда старший сын стал подростком и начал высказывать своё мнение? Или в тот, когда он встретил девушку, на которой решил жениться? На взгляд Генри, Наоми была не их поля ягода, и он очень не хотел принимать её в семью. Ссоры, ультиматумы - а всё-таки Эрик по характеру недалеко ушёл от своего отца.</p><p>Генри не беспощаден, но достаточно жёсток, чтобы пробить себе дорогу наверх и при этом задержаться там, наверху, достаточно, чтобы выстроить карьеру, при которой семья не будет ни в чём нуждаться. Для неё он это делает или для себя - неизвестно даже ему. Просто Генри тот человек, который привык получать то, что ему нужно. И неважно, сколько голов под его ботинками придётся раздавить.</p><p>Сейчас Генри Доусон - один из членов городского совета. На его плечах лежит ответственность за то, как будут поступать с людьми и как скоро закончится этот хаос. Не на его одних, но всё же...</p>
      </div>
<div class="glass-block dopolnitelno">
  <p><strong>Дополнительная информация:</strong> я хотел бы хапнуть извечной проблемы отцов и детей и построить на этом что-то интересное</p>
</div>
      <div class="footer">flamevector</div>
    </div>
  </div>
</div>
</div>

<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}

.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p {font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]

[html]
<div class="guide-wrapper rules-mybb-fix">
  <div class="main-box">
    <div class="inner-box">
      <div class="content-bg">
      <div class="glass-block info">
        <div class="name-en">Charlie Osborne</div>
        <div class="group">брат</div>
        <div class="name-ru">Чарли Озборн, 35</div>
      </div>
      <div class="glass-block photos">
        <div class="photo-wrap">
          <div class="photo"><img src="https://upforme.ru/uploads/001c/a4/b9/13/t104315.gif"></div>
          <div class="photo"><img src="https://media.tenor.com/f4rjuaE3UBAAAAAM/troy-baker-whut.gif"></div>
        </div>
        <div class="fc">fc: Troy Baker</div>
      </div>
      <div class="glass-block text">
        <p>Чарли - тот, кого можно назвать опорой и поддержкой, несмотря на то, что он в семье младший. Сын маминой подруги - это вот про него, потому что он и руку подаст, и жизнь отдаст. Вообще в этом они со старшим братом похожи, но Чарли всё-таки за добро и справедливость, а не за тупое следование правилам, как Тайлер. Он видит в людях хорошее, правда, часто разочаровывается, но всё равно продолжает видеть. Может, поэтому он стал спасателем/врачом?</p><p>Отношения с братом у них тёплые, семейные: всегда готовы друг друга поддержать, выпить пивка и дать совет. С вирусом, конечно, всё осложнилось, но Тайлер готов доверить брату собственную жизнь. Готов ли Чарли?</p>
      </div>
<div class="glass-block dopolnitelno">
  <p><strong>Дополнительная информация:</strong> обещаю не пропадать хд вообще я бы хотел оставить вот такой характер персонажа, НО если суть вам зашла, а вы захотели сделать его более жёстким человеком, я вообще не против. ваше тело - ваше дело</p>
</div>
      <div class="footer">flamevector</div>
    </div>
  </div>
</div>
</div>

<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}

.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p {font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]

Отредактировано Tyler Osborne (2026-02-05 22:49:53)

[html]
<div class="guide-wrapper rules-mybb-fix">
  <div class="main-box">
    <div class="inner-box">
      <div class="content-bg">
      <div class="glass-block info">
        <div class="name-en">Alice Vallejo</div>
        <div class="group">мама</div>
        <div class="name-ru">Элис Вальехо, 52</div>
      </div>
      <div class="glass-block photos">
        <div class="photo-wrap">
          <div class="photo"><img src="https://i.pinimg.com/originals/4a/f4/77/4af477138095c6a621ddb49802789af9.gif"></div>
          <div class="photo"><img src="https://i.pinimg.com/originals/6f/ba/f9/6fbaf96902b0b81d01303319923ed886.gif"></div>
        </div>
        <div class="fc">fc: michelle gomez</div>
      </div>
      <div class="glass-block text">
        <p>Мам, твой персонаж в игре должен быть строгим, но при этом любящим и заботливым. Твоя сила и способность устанавливать границы важны для семьи: именно это позволяет нам чувствовать себя защищенными, даже когда вокруг царит хаос. Твоя щедрость и внимание к другим — то, что я унаследовал в себе, и я хочу, чтобы они проявлялись в игре так же сильно.</p><p>Твоя семья, особенно сестра Мойра и ваша вечная вражда, создают постоянные трудности — пусть твоя строгость помогает справляться с ними, а любовь и забота делают нас сильнее. В игре твой персонаж должен быть опорой для всех нас: мудрой, справедливой, щедрой и способной сохранять спокойствие в любых ситуациях, даже если вокруг разворачиваются странные или абсурдные семейные конфликты.</p>
      </div>
<div class="glass-block dopolnitelno">
  <p><strong>Дополнительная информация:</strong> я игрок понимающий, не гоню со сроками и готов ждать. Не пишу с напоминаниями, но это не значит, что у меня пропал интерес к игре или мне просто все равно. Такой вот я. Внешность хотелось бы оставить, остальное можем и обсудить</p>
</div>
      <div class="footer">flamevector</div>
    </div>
  </div>
</div>
</div>

<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}

.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p {font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]

[html]
<div class="guide-wrapper rules-mybb-fix">
  <div class="main-box">
    <div class="inner-box">
      <div class="content-bg">
      <div class="glass-block info">
        <div class="name-en">Landon</div>
        <div class="group">лучший друг</div>
        <div class="name-ru">Лэндон (Лэн) , 19</div>
      </div>
      <div class="glass-block photos">
        <div class="photo-wrap">
          <div class="photo"><img src="https://64.media.tumblr.com/78e791a950b54e4edda81843525eb4de/a90bac969c29a12f-59/s400x600/68767ddcbbd4e70c1732cab51ef95cce3dc8aae8.gifv"></div>
          <div class="photo"><img src="https://64.media.tumblr.com/0dffc580a810553e1ce218d59fdaf8fa/a90bac969c29a12f-14/s400x600/7fd45e1d3a230e998e7c39a2182a7eb8782ffdd4.gifv"></div>
        </div>
        <div class="fc">fc: Ross Lynch</div>
      </div>
      <div class="glass-block text">
        <p>Ты мог бы быть звездой студенческой вечеринки, но предпочёл общество фриков типа меня. Талантливых, но нелюдимых. Правда, это не помешало тебе завести знакомства среди других студентов колледжа. Мы учимся на одной специальности, и я каждый раз задаюсь вопросом: что ты вообще забыл среди художников? Тебе бы чертить дома, украшать ландшафты - такой точности чертежей я не видел нигде. На мой вопрос ты ответил легко: бунт. Родители пророчат светлое будущее в их архитектурной фирме, а ты, противник предназначения, решил стать художником-портретистом. В отличие от меня - того, чьи рисунки постоянно критикуют из-за известности моей мамы и отсутствия такого же таланта у меня - тобой восхищаются, но ты на это лишь пожимаешь плечами. Тебе плевать на чужое мнение, ты здесь потому, что сам выбрал этот путь.</p><p>Тебе абсолютно точно не нравится, что я связался с Мэвериком Доэрти. Лично ты с ним никогда не сталкивался, но много наслышан о жестокости и отсутствии всяких нравственных принципов. Увидев меня с ним, ты забеспокоился. Сначала смерть моего друга Джеффри едва не свела меня с ума, и, конечно, тебе хочется, чтобы мой ум остался в целостности, которую к чертям разобьёт Мэверик. Ты подозреваешь, что всё не так просто, смеряешь Доэрти пристальным и одновременно недовольным взглядом каждый раз, когда вы, по нелепой случайности, пересекаетесь. Но ты даже не догадываешься, насколько всё плохо...</p>
      </div>
<div class="glass-block dopolnitelno">
  <p><strong>Дополнительная информация:</strong> заявка не в пару, но в очень верную дружбу. мне бы действительно хотелось видеть рядом надёжное плечо, которое хочет вытащить меня из неприятностей, но бьётся в отчаянии из-за того, что я не хочу слышать. можем рассмотреть варианты, когда ты станешь заражённым или сойдёшь с ума от побочки вакцины. в целом открыт к любым идеям и предложениям. внешность тоже обсуждаема</p>
</div>
      <div class="footer">flamevector</div>
    </div>
  </div>
</div>
</div>

<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}

.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p {font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]

[html]
<div class="guide-wrapper rules-mybb-fix">
  <div class="main-box">
    <div class="inner-box">
      <div class="content-bg">
      <div class="glass-block info">
        <div class="name-en">Isaac Green</div>
        <div class="group">младший брат</div>
        <div class="name-ru">Айзек Грин, 16</div>
      </div>
      <div class="glass-block photos">
        <div class="photo-wrap">
          <div class="photo"><img src="https://i.pinimg.com/originals/43/c4/a5/43c4a565323e1b53fa2535da6d658bb2.gif"></div>
          <div class="photo"><img src="https://media2.giphy.com/media/aPN2C7ZONEwEe5PNXj/giphy.gif?cid=6c09b9522oa5vhl5arzp5ypcb6i71lwo6is3dezgnrig6inl&ep=v1_internal_gif_by_id&rid=giphy.gif&ct=g"></div>
        </div>
        <div class="fc">fc: Timothée Chalamet</div>
      </div>
      <div class="glass-block text">
        <p>Тебе было всего 4, когда ты лишился своей самой главной опоры - родителей. Но ты не лишился меня.</p><p>мне было 17, когда в моей жизни появилось слишком много ответственности за маленького мальчика, чьи непослушны кудри напоминали качающиеся на ветру одуванчики, а взгляд, потерянный и испуганный, искал ответы. я тоже искала их. искала и не находила, потому что никто не может ответить детям на вопрос о том, почему именно их родители погибли. почему оставили их так рано, не приспособленных к самостоятельной жизни.</p><p>общество диктовало свои условия. элементарное выживание стало нашей привычкой, тем, что нас сблизило, а тебя - заставило вырасти слишком рано. сколько тебе было, когда ты научился мастерски отвлекать сердобольных, чтобы я могла стырить их бумажник? кажется, лет 6? а сколько тебе исполнилось, когда ты научился пользоваться отмычками?</p><p>мы жили плечом к плечу, мы были одной семьёй. двое против целого мира и вируса, который бушевал в городе. мы никого не подпускали не только потому что не могли довериться, но и потому что никто бы не понял, почему рядом с тобой предметы начинают "оживать". Вот только в августе 2025 ты исчез. нет - тебя забрали. и я уверена, что они знают о том, что ты умеешь. что им от тебя нужно? жив ли ты ещё? и если да, то как мне тебя найти?</p>
      </div>
<div class="glass-block dopolnitelno">
  <p><strong>Дополнительная информация:</strong> по моей истории, Айзек - пленник Института, поэтому на данном этапе наше взаимодействие возможно до того момента, как его забрали, то есть в прошлом. в настоящем - с теми, кто относится к Институту. но я планирую тебя забрать обратно)</p>
</div>
      <div class="footer">flamevector</div>
    </div>
  </div>
</div>
</div>

<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}

.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p {font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]

[html]
<div class="guide-wrapper rules-mybb-fix">
  <div class="main-box">
    <div class="inner-box">
      <div class="content-bg">
      <div class="glass-block info">
        <div class="name-en">Ivor Harrison</div>
        <div class="group">друг? враг?</div>
        <div class="name-ru">Айвор Харрисон, 19-22</div>
      </div>
      <div class="glass-block photos">
        <div class="photo-wrap">
          <div class="photo"><img src="https://64.media.tumblr.com/f41a917e2835b5d4488c94a36b1f7a41/tumblr_inline_pq6nn1lDfi1twk1o0_400.gifv"></div>
          <div class="photo"><img src="https://64.media.tumblr.com/4e055c97bb049bdf4a81eb7734f8e903/tumblr_inline_pq6nnujsqs1twk1o0_400.gifv"></div>
        </div>
        <div class="fc">fc: Mark McKenna</div>
      </div>
      <div class="glass-block text">
        <p> Мы были друзьями. выросли вместе на улице, когда я потерял родителей из-за вируса. ты научил меня воровать. выживать. бороться за свою жизнь всеми доступными способами. для тебя, выросшего вне системы почти с пелёнок, моральные принципы ничего не стоили. ты не псих - просто тот, кто познал цену боли. кто знает, что или ты - или тебя. эта философия была очень легко усвоена мной всего через пару-тройку недель совместного выживания. я благодарен тебе и был благодарен, даже когда наши пути разошлись. в один из дней ты исчез, и я понятия не имел почему. было такое чувство, будто я потерял часть себя: кто-то оторвал кусок от моей гнилой души и выкинул на корм собакам. я искал, но так и не смог найти. мне было всего 14, когда я снова лишился своей семьи. тебя, которого считал своей семьёй.</p><p>судьба - та ещё сука. у неё плохое чувство юмора.</p><p>мы снова встретились, и до тех пор прошло полгода, за которые я больше ни к кому не привязывался. твоё исчезновение дало мне понять, что привязанность - это очередной способ сделать в своей груди дыру. но трудно представить, насколько сильно она разрослась, когда меня избили, а потом бросили в клетку, сделав рабом. как сильно она разрослась, когда в этой же клетке я увидел тебя. так вот, чёрт возьми, где ты был всё это время. с одной стороны, осознание, что ты не бросил меня, успокаивало, с другой - я понимал, что если даже ты не смог выбраться из этого плена, значит, мы оба умрём в этой грёбаной тюрьме. и это даже не было фигурой речи.</p><p>время шло. вирус прогрессировал. но в какой-то момент всё стало ещё хуже. наши пленители, хозяева, съехали с катушек и стали бросаться друг на друга и на нас. я не знал, выживем ли мы. я не знал, сможем ли мы убежать. но шанс появился. правда, у меня одного. в момент нападения ты сломал ногу. открытый перелом...с ним шансов на побег не то что было мало, их не было вообще. я остановился, я хотел защитить тебя, как ты когда-то защищал меня, но их было слишком много. ты смотрел на меня и кричал, чтобы я уходил. я ждал. какое-то время сомневался, не хотел бросать. но в конце концов, поняв, что либо мы вместе здесь умрём, либо я спасусь, удрал, сверкая пятками. до сих пор не могу простить себе этого, потому что не знаю, что с тобой произошло дальше. я уверен, что ты мёртв - после такого не выживают.</p>
      </div>
<div class="glass-block dopolnitelno">
  <p><strong>Дополнительная информация:</strong> как вы поняли, здесь очень много чего можно поиграть как со стеклом, так и без. прошлое, настоящее - я только вскользь упоминаю друга в анкете, не давая никаких характеристик, так что персонаж - чистый лист, который вы можете раскрасить под себя. мне бы хотелось стекла, и оно в любом случае будет, учитывая прошлое. друзья мы теперь или враги - мне не важно, потому что оба варианта меня устроят. внешность бы менять не хотел, но если очень надо, то я не против. с именем такая же ситуация.</p><p>о себе: всеяден, пишу от 1 и 3 лица, мало и много, быстро и не очень. генерирую идеями лучше чем чат джпти</p>
</div>
      <div class="footer">flamevector</div>
    </div>
  </div>
</div>
</div>

<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}

.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p {font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]

[html]
<div class="guide-wrapper rules-mybb-fix">
  <div class="main-box">
    <div class="inner-box">
      <div class="content-bg">
      <div class="glass-block info">
        <div class="name-en">Moira Grey</div>
        <div class="group">мать трех балбесов</div>
        <div class="name-ru">Мойра Грей, 40+</div>
      </div>
      <div class="glass-block photos">
        <div class="photo-wrap">
          <div class="photo"><img src="https://64.media.tumblr.com/1d2bd91beff8c161248caafa8127b0d3/tumblr_inline_o19105lvUw1rifr4k_500.gif"></div>
          <div class="photo"><img src="https://64.media.tumblr.com/abac13d2e7e99448ab9ef0a127e7ee35/tumblr_inline_o18z61FGtp1rifr4k_250.gifv"></div>
        </div>
        <div class="fc">fc: Leah Pipes</div>
      </div>
      <div class="glass-block text">
        <p>- ты то единственное связующее звено, на котором держится наша слишком разношёрстная семья;</p><p>- одному богу известно, как ты смогла утихомирить пыл местами безэмоционального, местами жестокого отца, да ещё и родить от него талантливых детей. ну, талант у нас точно от тебя, потому что ты - известная художница, чьи картины заполняют многочисленные выставки и кого постоянно ставят в пример начинающим художникам;</p><p>- твои старшие сыновья-близнецы - лёд и пламя: один, Джейк, пошёл характером в мать, другой, Блейк - в отца, но как будто удвоив зачатки его жестокости. И тем не менее, в семьи ты умудряешься гасить любое проявление его характера на корню, а это порой спасает от преступления, в шаге от которого чаще всего бывает Блейк. Как бы он ни пытался нас запугать, у него не получается сделать это с тобой. наверное, причина в любви, которую он просто проявляет не так, как мы. ты не боишься его, не считаешь изъяном, ты - его мать, которая примет своего сына таким, какой он есть, поможет не перейти черту. близнецы такие же талантливые, как и ты;</p><p>- твой младший сын, то есть я, абсолютная бездарность, для которой ты помогла построить отдельную мастерскую - пристройку к дому, чтобы я не стеснялся пробовать себя в искусстве и не боялся, что кому-то оно не понравится. мне постоянно ставят тебя в пример, удивляясь, какой у такой талантливой художницы мог родиться такой неталантливый сын, но ты всё равно поддерживаешь меня. ты не видела ни одной моей картины, потому что мне стыдно их показывать, но понимающе ждёшь, когда я сделаю шаг навстречу;</p><p>- я бы рад сказать, что ты ведёшь мирную жизнь, сидя дома, но это вообще не так. глядя на то, что творится в мире, ты решаешь, что самое время побыть матерью Терезой, поэтому мало-помалу помогаешь в местных карантинных блоках. пока ты занята делом, семья начинает распадаться и влипать в неприятности. а что будет, если ты заразишься?</p>
      </div>
<div class="glass-block dopolnitelno">
  <p><strong>Дополнительная информация:</strong> я вообще очень давно шёл до этой заявки, просто не мог выбрать внешку, так то если захотите сменить, я вообще не против. мне бы хотелось оставить предысторию такой, какая она есть, а вот об изменениях в настоящем можем поговорить, потому что мне бы, наверное, не хотелось видеть маму домоседкой. я в целом активный игрок, но не спидпостер, не тычу палкой в ожидании поста, не намекаю, не обижаюсь, если вдруг пост отдан "вне очереди". я бы очень хотел взаимосвязь с матерью, потому что персонаж попал в непростую ситуацию, и ему как никогда важна поддержка семьи. но я не против стекла, только за. в общем, всё обсуждаемо!</p>
</div>
      <div class="footer">flamevector</div>
    </div>
  </div>
</div>
</div>

<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}

.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p {font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]

[html]
<div class="guide-wrapper rules-mybb-fix">
  <div class="main-box">
    <div class="inner-box">
      <div class="content-bg">
      <div class="glass-block info">
        <div class="name-en">Jason Philip</div>
        <div class="group">лучший друг, почти как брат</div>
        <div class="name-ru">Джейсон Филип, 25-30</div>
      </div>
      <div class="glass-block photos">
        <div class="photo-wrap">
          <div class="photo"><img src="https://i.pinimg.com/originals/81/ac/9e/81ac9e3d1a3eced3fe7a5adf4a0fb8fb.gif"></div>
          <div class="photo"><img src="https://i.pinimg.com/originals/9c/a3/15/9ca315d4eaa633b71d981042bc5d8cbf.gif"></div>
        </div>
        <div class="fc">fc: Xavier Samuel</div>
      </div>
      <div class="glass-block text">
        <p>Ты мой лучший друг. Единственный друг. Ты знаешь, чем я занимаюсь, ты то явно не одобряешь, но не мешаешь. Читаешь иногда нотации, что это до добра не доведет, но не мешаешь. Ты был со мной в самые сложные периоды моей жизни, когда я буквально умирал. Ты вытащил меня с того света, ты спас меня, не дав погибнуть от передозировки. Хотелось бы взаимодействий с тобой, философские разговоры и простое дурачество-ребячество. Ты американец, я англичанин. Мы плохо понимаем речь друг друга, но нам это и не надо. Да, за годы мы привыкли, но все равно иногда приходится переспрашивать. Но что касается серьезных и важных моментов, мы понимаем друг друга без слов.</p><p>Твой характер я вижу мягким, ты добрый и понимающий, но еще и ранимый. Мне кажется, что я мог часто задевать тебя, а ты, в силу характера, мог бы делать вид, что все нормально. Ты это скрываешь, но очень злишься на меня из-за того, что я наркодилер. Мне очень не хватает такого друга, который сдерживал бы мои безумные порывы.</p>
      </div>
<div class="glass-block dopolnitelno">
  <p><strong>Дополнительная информация:</strong> я игрок понимающий, не гоню со сроками и готов ждать. Не пишу с напоминаниями, но это не значит, что у меня пропал интерес к игре или мне просто все равно. Такой вот я. </p><p><strong>Внешность и характер</strong> мы вполне можем <strong>поменять</strong>, но наша связь должна быть неизменной. Посты пишу от 3к до 5к, от тебя не требую соблюдать мои объемы, приму и меньше, и больше. Лицо, от которого ты пишешь, меня не интересует, в этом плане я ем все.</p>
</div>
      <div class="footer">flamevector</div>
    </div>
  </div>
</div>
</div>

<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}

.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p { text-indent:25px; font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]

Подпись автора

[html]
<div class="gradient-line" style='height: 2px;margin: 15px 0 0 0;width:700px;border-radius: 1px;background: linear-gradient(to right, rgba(67,179,174,0) 0%, rgba(67,179,174,0.6) 35%, rgba(67,179,174,1) 50%, rgba(67,179,174,0.6) 65%, rgba(67,179,174,0) 100%);'></div></div>
[/html]
[html]
<link href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap" rel="stylesheet">
<div style="display: flex; align-items: center; justify-content: flex-end; margin-left: auto; width: fit-content; height: 120px;">
  <!-- Текст -->
  <div style="text-align: right; margin-right: 20px; width: 300px;">
    <p style="margin: 0; color: #184d42; font-family: 'Philosopher', sans-serif; font-size: 24px; line-height: 1.1; font-weight: 700; text-align: right; height: 120px; display: flex; flex-direction: column; justify-content: center;">
      всегда найдется тот,<br>
      кто заплатит<br>
      за забыть
    </p>
  </div>
 
  <!-- Картинка с текстом -->
  <div style="position: relative;">
    <img src="https://i.ibb.co/sd7fv06v/1111.jpg"
         alt="Иллюстрация"
         style="width: 200px; height: 120px; object-fit: cover; border-radius: 12px; border: 2px solid #1a3c34; display: block;">
   
    <!-- Текст поверх картинки -->
    <div style="position: absolute; bottom: 5px; right: 8px; color: #ffffff; font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.5px; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); background: rgba(26, 60, 52, 0.6); padding: 2px 6px; border-radius: 2px;">
      Kai Chalfant, 29 y.o.
    </div>
  </div>
 
</div>
[/html]

[html]
<div class="guide-wrapper rules-mybb-fix">
  <div class="main-box">
    <div class="inner-box">
      <div class="content-bg">
      <div class="glass-block info">
        <div class="name-en">Krystal Roddy</div>
        <div class="group">администратор стрип клуба </div>
        <div class="name-ru">Кристал Родди, 22-27</div>
      </div>
      <div class="glass-block photos">
        <div class="photo-wrap">
          <div class="photo"><img src="https://i.pinimg.com/originals/e2/95/e6/e295e6e83be94cc09e13a568eff43a8b.gif"></div>
          <div class="photo"><img src="https://i.pinimg.com/originals/0b/19/62/0b19627689815fe34cbf6dfd16bf5726.gif"></div>
        </div>
        <div class="fc">fc: kiernan shipka</div>
      </div>
      <div class="glass-block text">
        <p>Крис, ты просто космос. Девочка, которую я выдрал из лап сумасшедшего отца (кажется, он принял вакцину и слетел с катушек). Ты согласилась работать администратором в моем клубе, да и выбора у тебя не было. Либо на улицу, либо под мое крыло.</p><p>У нас с тобой непростые отношения. Придя ко мне в клуб, ты столкнулась с его особенностями. И с моей основной работой, которая включала подсаживание клиентов на новый авторский синтетический наркотик. Тебе это не нравится, но выбора, как мы выяснили, у тебя нет.</p><p>Характер оставляю на тебя, можем обсудить и все остальное, если в этом есть необходимость.</p>
      </div>
<div class="glass-block dopolnitelno">
  <p><strong>Дополнительная информация:</strong> жду долго, не пинаю. Все в этой заявке обсуждаемо, кроме того, что ты работаешь в клубе администратором. Предысторию можно изменить, так что не переживай.</p><p>Я пишу посты 3-5к символов, от тебя не жду того же, можешь писать в своем темпе. Очень тебя жду.</p>
</div>
      <div class="footer">flamevector</div>
    </div>
  </div>
</div>
</div>

<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}

.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p { text-indent:25px; font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]

Подпись автора

[html]
<div class="gradient-line" style='height: 2px;margin: 15px 0 0 0;width:700px;border-radius: 1px;background: linear-gradient(to right, rgba(67,179,174,0) 0%, rgba(67,179,174,0.6) 35%, rgba(67,179,174,1) 50%, rgba(67,179,174,0.6) 65%, rgba(67,179,174,0) 100%);'></div></div>
[/html]
[html]
<link href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap" rel="stylesheet">
<div style="display: flex; align-items: center; justify-content: flex-end; margin-left: auto; width: fit-content; height: 120px;">
  <!-- Текст -->
  <div style="text-align: right; margin-right: 20px; width: 300px;">
    <p style="margin: 0; color: #184d42; font-family: 'Philosopher', sans-serif; font-size: 24px; line-height: 1.1; font-weight: 700; text-align: right; height: 120px; display: flex; flex-direction: column; justify-content: center;">
      всегда найдется тот,<br>
      кто заплатит<br>
      за забыть
    </p>
  </div>
 
  <!-- Картинка с текстом -->
  <div style="position: relative;">
    <img src="https://i.ibb.co/sd7fv06v/1111.jpg"
         alt="Иллюстрация"
         style="width: 200px; height: 120px; object-fit: cover; border-radius: 12px; border: 2px solid #1a3c34; display: block;">
   
    <!-- Текст поверх картинки -->
    <div style="position: absolute; bottom: 5px; right: 8px; color: #ffffff; font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.5px; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); background: rgba(26, 60, 52, 0.6); padding: 2px 6px; border-radius: 2px;">
      Kai Chalfant, 29 y.o.
    </div>
  </div>
 
</div>
[/html]

[html]
<div class="guide-wrapper rules-mybb-fix">
  <div class="main-box">
    <div class="inner-box">
      <div class="content-bg">
      <div class="glass-block info">
        <div class="name-en">Aaron Gray</div>
        <div class="group">кузен</div>
        <div class="name-ru">Аарон Грей, 20</div>
      </div>
      <div class="glass-block photos">
        <div class="photo-wrap">
          <div class="photo"><img src="https://i.pinimg.com/originals/e1/1a/7e/e11a7ed75701e27c1945d2e5a8d234f6.gif"></div>
          <div class="photo"><img src="https://i.pinimg.com/originals/d0/fa/d3/d0fad327b6be97a0c4f2dcaf69e7968f.gif"></div>
        </div>
        <div class="fc">fc: Evan Peters</div>
      </div>
      <div class="glass-block text">
        <p>Самый адекватный среди Греев, имхо.</p><p>- Ты не впадаешь в крайности, как я или Блейк, не стараешься слиться со стеной, как Джейк, - живёшь эту жизнь так, как считаешь нужным. Если ты считаешь, что Блейк перегибает палку, не ссышь сказать ему об этом и даже при необходимости дать по морде. Удивительно, но это не провоцирует его на избиение тебя до полусмерти, наоборот, остужает пыл.</p><p>- Ты прямолинеен и говоришь всё, что держится в твоей голове (а надолго оно там не задерживается).</p><p>- Ты любишь собирать вокруг себя народ и рассказывать какие-нибудь всратые истории типа "в далёкие времена, когда мы с вами ещё пешком под стол ходили, а динозавры правили миром..." с таким серьёзным лицом, что не поверить тебе просто невозможно.</p><p>- Ты не любишь тишину, она тебя нервирует, поэтому если никто не разговаривает, ты говоришь за троих.</p><p>- Хотел пойти добровольцем в армию, но тебя не взяли, сославшись на то, что "фляга подтекает у пацана". А может, им просто не нужны весёлые люди?</p><p>Короче, ты вот тот самый парень, который старается не прогнуться под гнётом проблем, а подстроиться под них и выбрать путь наименьшего ущерба. Но если есть несправедливость, мимо не пройдёшь.</p>
      </div>
<div class="glass-block dopolnitelno">
  <p><strong>Дополнительная информация:</strong> Малая часть семьи у нас в сборе. Есть я, есть Блейк, есть кузен Кай, есть куча проблем, в которые вляпались я и Кай (проблем в виде семейки Доэрти), а кому-то же надо всё это разгребать, так что мы ждём вот такого доброго самаритянина хд к постам, их периодичности и объёму не требователен, спокойно отношусь к тому, что "что-то перегорело", но за то, чтобы говорить ртом, если что-то не так</p>
</div>
      <div class="footer">flamevector</div>
    </div>
  </div>
</div>
</div>

<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}

.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p { text-indent:25px; font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]