[html]
<style>
@font-face {
  font-family: Blame My Parents;
  src: url('https://forumstatic.ru/files/001c/85/6d/86866.ttf')
}

@font-face {
    font-family: RadjhaniRu;
    src: url('https://forumstatic.ru/files/001c/04/0a/51541.ttf')
}

@font-face {
  font-family: Cornerita;
  src: url('https://forumstatic.ru/files/001c/85/6d/49613.ttf')
}


.news-test {
display: flex;
flex-wrap: wrap;
position: relative;
gap: 25px;
width: auto;
margin: 50px auto 0!important;
  background: url(https://forumstatic.ru/files/001c/85/6d/52894.jpg) no-repeat bottom / cover;
    box-shadow: 0 1px 14px -5px #32000c59;
    padding: 30px;
}

.news-test::after {
content:'';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(https://forumstatic.ru/files/001c/85/6d/23588.webp) right top no-repeat,
                   url(https://forumstatic.ru/files/001c/85/6d/56900.webp) left bottom no-repeat;
    background-size: 40%, 120%;
    background-position: right top, left calc(100% + 136px);
   opacity: .8;
}

.news-mini {
z-index: 1;
}

.news-test > div {
    display: block;
    width: calc(100% - 50px);
    height: 100%;
    position: relative;
    flex-shrink: 0;
    background: rgb(226 226 226);
    box-shadow: 0 3px 7px -2px #32000c50;
    padding: 20px;
    box-sizing: border-box;
    margin: 20px 0 5px 50px;
}

.news-test > div > span {
    white-space: pre-line;
}

.news-test > div::before {
    content: attr(data-title);
    position: absolute;
    font-family: 'RadjhaniRu';
    font-size: 27px;
    top: -25px;
    padding: 3px 15px;
    background: rgb(34 34 34);
    left: 90px;
    color: rgb(225 225 225);
}


.news-test::before {
content: attr(data-title);
    position: absolute;
    font-family: blame my parents;
    font-size: 84px;
    top: -70px;
    right: 30px;
    color: rgb(var(--text-primary));
    z-index: 3;
}
.news-test > img {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 145px;
object-fit: cover;
pointer-events: none;
  user-select: none;

}

.active-news .charlist a {
    width: 55px !important;
    height: 55px !important;
    display: block;
    position: relative;
}

.active-news .charlist a div{
    width: 55px!important;
    height: 55px!important;
    display: block;
    position: absolute;
}

.active-news .charlist a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.active-news .charlist {
display: flex;
    gap: 20px;
margin-top: 30px;
position: relative;
background: rgb(186 157 255 / 20%);
padding: 10px;
align-items: center;
}
.active-news .postlist::before,
.active-news .charlist::before {
content: attr(data-title);
position: absolute;
top: -34px;
font: 400 35px "Blame My Parents";
width: 90%;
}
.active-news .postlist::before {
text-align: right;
}

.active-news .user-avatar {
margin: 0!important;
}

.active-news span {
display: flex;
    justify-content: space-between;
}

.postlist {
display: flex;
    gap: 5px;
margin-top: 30px;
position: relative;
background: rgb(186 157 255 / 20%);
padding: 10px;
    flex-wrap: wrap;
width: 45%;
    line-height: 1 !important;
    justify-content: flex-end;
    align-content: flex-start;
}

.postlist a {
display: block;
height: 15px!important;
background: rgb(186 157 255 / 40%);
padding: 4px 8px 0px;
line-height: 1!important;
font: 44 11px radjhaniRu;
text-transform: uppercase;
border-bottom: none!important;
}

.news-mini .charlist a::before{
    content: '';
    position: absolute;
    z-index: 5;

    --corner-size: 10px;
    --border-thickness: 1px;
    --gap: 3px;
    --speed: 0.1s;
    --color: rgb(186 157 255 / 100%);

    inset: var(--gap);
    transition: inset var(--speed) ease-in-out;
    background:
        /* top-left */
        linear-gradient(to right, var(--color) 100%, transparent 0) top left / var(--corner-size) var(--border-thickness) no-repeat,
        linear-gradient(to bottom, var(--color) 100%, transparent 0) top left / var(--border-thickness) var(--corner-size) no-repeat,

        /* top-right */
        linear-gradient(to left, var(--color) 100%, transparent 0) top right / var(--corner-size) var(--border-thickness) no-repeat,
        linear-gradient(to bottom, var(--color) 100%, transparent 0) top right / var(--border-thickness) var(--corner-size) no-repeat,

        /* tottom-left */
        linear-gradient(to right, var(--color) 100%, transparent 0) bottom left / var(--corner-size) var(--border-thickness) no-repeat,
        linear-gradient(to top, var(--color) 100%, transparent 0) bottom left / var(--border-thickness) var(--corner-size) no-repeat,

        /* bottom-right  */
        linear-gradient(to left, var(--color) 100%, transparent 0) bottom right / var(--corner-size) var(--border-thickness) no-repeat,
        linear-gradient(to top, var(--color) 100%, transparent 0) bottom right / var(--border-thickness) var(--corner-size) no-repeat;
}

.news-mini .charlist a:hover::before{
    inset: calc(-1 * var(--border-thickness));
}

.news-mini .charlist a::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    mix-blend-mode: lighten;
    box-shadow: inset 0px 0px 0px 30px  rgb(186 157 255 / 50%);
    z-index: 3;
    transition: box-shadow var(--anim-hover);
}

.news-mini .charlist a:hover::after,
headneeded a:hover::after,
.punbb .user-avatar .avatar-image:hover::after {
    box-shadow: inset 0px 0px 0px 0px rgb(186 157 255 / 50%);
}


</style>

<section class='news-test' data-title='news'>
<img src='https://i.pinimg.com/736x/11/14/8b/11148b80cc54840a1dae524744bf40c2.jpg' />

<div class='news-mini' data-title='С ПЕРВЫМ СНЕГОМ'>
<span>
Как я уже предупреждал, чумбы, новости пишутся когда у кого-то совпадают три фактора: свободное время, свежие мысли и жажда деятельности. То есть регулярности тут ещё меньше, чем у службы доставки пиццерии Buck-a-Slice. 

Это не значит, что ничего не происходит. Наоборот. Перейдём к списку. 

[size=20][font=Cornerita][b]# # //ИНИЦИАЛИЗАЦИЯ ДАННЫХ:[/b][/font][/size]

[size=17][font=Cornerita][b]01.0 // ДИЗАЙН-ПРОТОКОЛ: "ТЫКВА_НЕ_В_ШАПКЕ.EXE"[/b][/font][/size]
Просто хочу напомнить, как задорно и, я не побоюсь этого слова, рогато, мы отгуляли хэллоуин. Дизайн мы уже сменили обратно. Ну, ещё неделю назад, но вдруг вы ещё не заметили? Просто имейте ввиду, мало ли. 

[size=17][font=Cornerita][b]02.0 // ТЕМПОРАЛЬНЫЙ РАССИНХРОН[/b][/font][/size]
Отдельно хочу выделить небольшой нюанс. Нашли небольшую несостыковку у нашем лоре, поэтому, учитывая, что событие значимое, его следует выделить:
[b]Блэкаут в Найт-Сити случился в 2094 году[/b]. 
Мы нашли в паре мест упоминание 2095, но это просто случайность и остатки бета-версии в коде. Такое происходит. 
найдёте ещё неточности подобного типа - обязательно маякуйте в  <a href='https://rwrd.rusff.me/viewtopic.php?id=12#p35'>"Связь с АМС"</a> или лично  <a href='https://rwrd.rusff.me/messages.php?action=new&uid=4'>Эрику Холдену</a>! 

[size=17][font=Cornerita][b]03.0 // "АХ ТЫ Ж ТОЧНО, ИВЕНТ!" [/b][/font][/size]
Скоро запустятся два новых ивента, тоже регулярных, потому готовьте свои познания о собственных персонажах - они могут очень пригодиться. Спойлеры? Не, чумбы, в следующий раз. 

[size=17][font=Cornerita][b]04.0 // БОЛЬШЕ МЕТАЛЛА, БРАТИЯ И СЕСТРИЯ ВО ХРОМЕ![/b][/font][/size]
У нас наконец-то появились статьи про импланты - общие, которые актуальны и в 2099, и специфические, для 2099 года. Теперь я не буду отправлять вас на сторонние ресурсы. Посмотреть можно тут:
<a href='https://rwrd.rusff.me/viewtopic.php?id=196#p14836'>Импланты</a>
<a href='https://rwrd.rusff.me/viewtopic.php?id=197#p14849'>Импланты 2099</a>

[size=17][font=Cornerita][b]05.0 // ОЖИДАНИЕ АКТИВАЦИИ НЕЙРОНА VOL. 2.0[/b][/font][/size]
Если у вас есть идеи, варианты, мысли о активностях, скриптах, нехватке статей в лоре, конкурсах, лотереях и тому подобном - сообщайте! Пишите в личку мне, а после наблюдайте, как весь Найт-Сити обсуждает и жизнерадостно развлекается, пользуясь идеей, не оглядываясь на патент и авторские права. 

</span>
</div> 

<div class='news-mini' data-title='время свершений!'>
<span>
[size=20][font=Cornerita][b]ОТЧЁТ: СТАБИЛЬНОСТЬ СЕТИ // СТАТУС: ОПТИМАЛЬНЫЙ[/b][/font][/size]

[b]Никто не сидит без дела! За это время мы все: [/b]
- написали 141 пост
- создали около 400 тысяч символов лорной информации
- убили 5 флудов 
- нашли все реакции, имеющие вытянутую форму
- 17 раз посмотрели кота Уни 
- 5 раз сломали код анкеты
- 1 раз не дали ковбою стать президентом НСША

Продолжайте в том же духе!

На этом пока всё. 

[size=20][font=Cornerita][b][КОНЕЦ ТРАНСМИССИИ][/b][/font][/size]
</span>
</div> 


<div class='news-mini active-news' data-title='ВЫДАЮЩИЕСЯ ЧУМБЫ'>
<span>

<section class='charlist' data-title='Postopiscy'>
<a href='https://rwrd.rusff.me/profile.php?id=53' title='планшет, чтобы колоть орехи'><img src='https://forumavatars.ru/img/avatars/001c/8a/d2/53-1763045110.jpg'></a>

<a href='https://rwrd.rusff.me/profile.php?id='33' title='Мисс Милитех 2077'><img src='https://forumavatars.ru/img/avatars/001c/8a/d2/53-1763045110.jpg'></a>

<a href='https://rwrd.rusff.me/profile.php?id=51' title='Обеззараженный спиртом рипер'><img src='https://forumavatars.ru/img/avatars/001c/8a/d2/53-1763045110.jpg'></a>

<a href='https://rwrd.rusff.me/profile.php?id=54' title='Киберковбоя в президенты!'><img src='https://forumavatars.ru/img/avatars/001c/8a/d2/53-1763045110.jpg'></a>

</section>
<section class='postlist' data-title='Posty V Rotatore'>
<a href='https://rwrd.rusff.me/viewtopic.php?id=104'>Возьмёте Бэтмобиль? – Нет, слишком заметно</a>
<a href='https://rwrd.rusff.me/viewtopic.php?id=175'> мозговой штурм</a>
<a href='https://rwrd.rusff.me/viewtopic.php?id=189'> I Trust You</a>

</section>

</span>
</div> 

</section>[/html]