[hideprofile][html]
<style>
.nbp-reset, .bigbigcontainer * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nbp-mainwrap {
display: flex;
justify-content: center;
margin: 10px !important;
padding: 0 0 0 30px;
border-radius: 18px;
background-color: #051011;
background-image: url(https://forumstatic.ru/files/001b/b1/0e/17265.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
box-shadow: 0 0 10px #14483edd;
}
.bigbigcontainer {
display: flex;
width: 100%;
margin: 2px 8px 2px 22px !important;
background: rgba(4, 13, 12, 0.1);
border-width: 0.6px 0px;
border-style: solid;
border-color: #0A7D52;
backdrop-filter: blur(10px);
border-radius: 20px;
}
.vertical-text {
position: relative;
background: rgb(197 222 208 / 76%);
border-radius: 12px;
width: 90px;
min-width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20px 0;
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: 'Impact', 'Arial Black', 'Arial', sans-serif;
white-space: nowrap;
z-index: 2;
border-radius: 20px 0 0 20px;
}
.vertical-text span:first-child {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: #dce0dd;
transform: rotate(180deg);
display: inline-block;
margin-bottom: 40px;
margin-right: 10px;
letter-spacing: 3.5px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 1px 3px 2px #b2c5c0;
}
.date-vertical {
transform: rotate(180deg);
display: inline-block;
font-family: 'Playfair Display', serif;
font-size: 0.9rem;
color: #47ffad;
text-shadow: 0 0 18px #1af590cc, 0 2px 6px #143d31;
margin-bottom: 10px !important;
letter-spacing: 0.9px;
text-transform: uppercase;
font-size: 1.2rem;
background: #205347;
padding: 36px 8px;
border-radius: 20px 0 0 20px;
}
.episode-container {
flex: 1;
display: flex;
border-radius: 0 20px 20px 0;
background: #eef1ea;
overflow-y: auto;
}
.episode-image {
flex: 2;
padding: 28px 0px 28px 28px;
background: #dde1de;
display: flex;
flex-direction: column;
}
.news-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 32px;
font-weight: 800;
text-align: center;
letter-spacing: -0.5px;
background: linear-gradient(135deg, #135a49, #032b21);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 3px double #dde2da;
}
.highlights-section {
max-height: 900px;
overflow-y: auto;
padding-right: 16px;
}
.highlights-header, .activists-header, .bestpost-header {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
text-transform: uppercase;
background: #205649;
display: inline-block;
color: #47ffad;
text-shadow: 0 0 18px #1af590cc, 0 2px 6px #143d31;
padding: 8px 34px;
letter-spacing: 1px;
margin-bottom: 16px!important;
border-radius: 10px;
}
.highlights-grid {
display: flex;
flex-direction: column;
gap: 18px;
}
.highlight-item {
display: flex;
gap: 14px;
align-items: flex-start;
background: #ecefec;
padding: 12px 14px;
border-inline: 2px solid #99aea3;
border-radius: 10px;
}
.text {
flex: 1;
}
.text strong {
font-size: 1.2rem;
color: #7f9288;
display: block;
font-family: 'Playfair Display', serif;
text-transform: uppercase;
letter-spacing: 1px;
}
.text p {}
.activistscont {
width: 320px;
background: #eef1ea;
padding: 28px 18px;
display: flex;
flex-direction: column;
gap: 28px;
}
.activists-list {
display: flex;
flex-direction: column;
gap: 22px;
}
.activist-card {
display: flex;
align-items: center;
gap: 10px;
background: #dde1de;
padding: 12px 14px;
border-radius: 10px;
border-inline: 2px solid #99aea3;
transition: 0.2s;
}
.activist-photo {
width: 60px;
height: 60px;
border-radius: 10px;
object-fit: cover;
border: 3px solid #3d695a!important;
background: #25b791;
filter: grayscale(100%) contrast(46%) brightness(130%);
mix-blend-mode: multiply;
}
.activist-info {
flex: 1;
}
.activist-name {
font-family: 'Playfair Display', serif;
text-transform: uppercase;
font-size: 1rem;
color: #205649;
margin-bottom: 4px!important;
}
.activist-badge {
font-size: 0.85rem;
background: rgb(153 174 163);
letter-spacing: 0.5px;
display: inline-block;
padding: 2px 14px 3px;
border-radius: 10px;
color: #dce0dd;
}
.bestpost-card {
background: #dde1de;
border-radius: 10px;
overflow: hidden;
border-inline: 2px solid #99aea3;
display: flex;
flex-direction: column;
}
.bestpost-image {
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.bestpost-image img {
filter: grayscale(100%) contrast(46%) brightness(130%);
mix-blend-mode: multiply;
}
.bestpost-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bestpost-placeholder {
font-size: 32px;
color: #836f48;
background: #caf4e9;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 8px;
font-family: monospace;
}
.bestpost-caption {
padding: 5px 5px;
text-align: justify;
max-height: 420px;
overflow-y: auto;
}
.bestpost-caption h4 {
text-align: center;
font-family: 'Playfair Display', serif;
text-transform: uppercase;
font-size: 1rem;
color: #205649;
margin: 4px 0 0!important;
}
.bestpost-caption p {}
.divider-light {
height: 2px;
background: repeating-linear-gradient(90deg, #b2d3ca, #cedfdb 6px, transparent 6px, transparent 12px);
margin: 16px 0;
}
</style>
<div class="nbp-mainwrap nbp-reset">
<div class="bigbigcontainer">
<!-- левая полоса с логотипом -->
<div class="vertical-text">
<span>NORTHBAY POST</span>
<span class="date-vertical">JULY / 2026</span>
</div>
<div class="episode-container">
<!-- левая часть: highlights -->
<div class="episode-image">
<div class="highlights-section">
<div class="highlights-header">Highlights of the month</div>
<div class="highlights-grid">
<div class="highlight-item">
<div class="text">
<strong>Нам шесть месяцев!</strong>
<p>Ура-ура, несмотря на все стенания Юры, мы все еще живы! В честь этого полуюбилея мы подготовили ряд сюрпризов и развлечений, о которых вы можете прочитать ниже! Также на этой неделе будет большое обновление магазина, поэтому спешите наведаться в <a href="https://northbay.f-rpg.me/viewtopic.php?id=27">банк</a> за шекелями, чтобы потом весело их потратить на обновочки! </p>
</div>
</div>
<div class="highlight-item">
<div class="text">
<strong>Northbay Stamp Rally: 0.5 anniversary</strong>
<p>Олды всплакнут, новички удивятся. В честь преодоления рубежа в шесть месяцев предлагаем вам принять участие в сборе штампов путем выполнения заданий, выставленных в ключевых темах. Первые шесть скороходов, собравшие все шесть печатей, получат специальные подарки. Участников, не попавших в шестерку, также ждут призы и подарки! Тема и задания будут выставлены завтра в 12:00 по мск, так что ставим будильники и готовимся) </p>
</div>
</div>
<div class="highlight-item">
<div class="text">
<strong>Вызовы</strong>
<p>Всем любителям сделать гадость посвящается! Мы обновили тему вызовов, теперь вы можете мучить своих любимых еще более эффективно! + если у вас тоже есть идеи для интересных вызовов, всегда будем рады услышать их в ЛС или в теме <a href="https://northbay.f-rpg.me/viewtopic.php?id=90&p=13#p124912">вопросы и предложения.</a>! С новыми же вызовами приглашаем ознакомиться <a href="https://northbay.f-rpg.me/viewtopic.php?id=12">по ссылке.</a></p>
</div>
</div>
<div class="highlight-item">
<div class="text">
<strong>Пять вечеров</strong>
<p>Жертва уже выбрана, но администрацией было принято решение перенести пять вечеров на следующую неделю, так как на этой неделе планируется несколько ивентов, которые могут отвлечь от допроса. Поэтому набираемся терпением и ждем следующих выходных!</p>
</div>
</div>
</div>
</div>
</div>
<div class="activistscont">
<div>
<div class="activists-header">АМС</div>
<div class="activists-list">
<div class="activist-card">
<img class="activist-photo" src="https://i.pinimg.com/736x/75/9a/af/759aaf23d4a78af70526aa73b9f18685.jpg" alt="пользователь1">
<div class="activist-info">
<div class="activist-name">Йенчик</div>
<span class="activist-badge">стакан наполовину полон</span>
<div style="font-size: 12px; margin-top: 6px; color: #4b5563;">/йен уже начал праздновать/</div>
</div>
</div>
<div class="activist-card">
<img class="activist-photo" src="https://i.pinimg.com/736x/c3/a0/06/c3a00666b49bc4b15766c56310d5085e.jpg" alt="пользователь2">
<div class="activist-info">
<div class="activist-name">Нейтан</div>
<span class="activist-badge">стакан наполовину пуст</span>
<div style="font-size: 12px; margin-top: 6px; color: #4b5563;"> Люблю вас, засранцы! </div>
</div>
</div>
<div class="activist-card">
<img class="activist-photo" src="https://i.pinimg.com/736x/a5/42/b2/a542b2b69ae1470efc596531e78f178d.jpg" alt="пользователь3">
<div class="activist-info">
<div class="activist-name">Юрий Александрович</div>
<span class="activist-badge">в стакане водка</span>
<div style="font-size: 12px; margin-top: 6px; color: #4b5563;">если доживем до года, я точно кого-то засосу (и может быть даже не на форуме)</div>
</div>
</div>
</div>
</div>
<div>
<div class="bestpost-header">наши пару слов</div>
<div class="bestpost-card">
<div class="bestpost-image">
<img src="https://upforme.ru/uploads/001c/9a/71/10/99405.png" alt="Лучший пост — иллюстрация" style="width:100%; height:100%; object-fit: cover;">
</div>
<div class="bestpost-caption">
<h4>Огромная благодарность</h4>
<p>всем нортбэйцам за вклад в развитие форума! Каждый пост, каждое сообщение во флуде, каждый вопрос и корректировка расширяют мир Нортбэя и делают атмосферу незабываемой. Продолжим же и дальше трудиться и отдыхать во имя создания уголка, в котором можно просто хорошо провести время и познакомиться с обалденными людьми! Мы вас любим, вы лучшие! ♥ ♥ ♥</p>
</div>
</div>
</div>
<div style="font-size: 0.75rem; text-align: center; color: ##205649;">
✦ ✦ ✦
</div>
</div>
</div>
</div>
</div>
[/html]
