новости о важном

Поделиться12026-09-17 21:23:04

Автор: missing
Администратор
Сообщений: 21
Уважение: +24

[html]
<div class="ncnw-wrap ncnw-light" id="ncnwWrap">

<div class="ncnw-top">
<div class="ncnw-ava"><img src="https://upforme.ru/uploads/001c/7f/88/2/895437.gif" alt=""></div>
<div class="ncnw-titles">
<div class="ncnw-issue"><i></i>news #1</div>
<div class="ncnw-by">на связи вафелька</div>
</div>
<div class="ncnw-date">выпуск<b>18.09</b></div>
</div>

<div class="ncnw-lede">
Мы скучали. Скучали по мистическим сюжетам и загадочным событиям. Скучали по атмосфере учебных заведений с "секретом" и по тихим небольшим городам, в которых уже не поймешь, кампус ли его "спутник" или весь город живет по большей части за счет кампуса? По туманам, ложащимся рано утром в горные долины. По первоцветам, по запаху талого снега. И <b>по тебе</b>. Предшествующая цепочка событий вдохновила нас на собственный сюжет, собственный форум и собственный маленький мир. Для его создания нам не хватает совсем немного. <b>Тебя.</b>
</div>

<div class="ncnw-shead"><span>важности</span></div>
<ol class="ncnw-list">
<li>Есть опыт администрирования и хочешь присоединиться к сотворению <b>тихой гавани</b> для игроков, куда будем приходить отдыхать душой от сложностей, преследующих нас ИРЛ? Скорее оставляй заявку <a href="https://missingams.rusff.me/viewtopic.php?id=5">здесь</a></li>
<li>Тебе <b>просто спросить</b>? Подождать в приятной компании? Приглядеть глазком и не пропустить дату открытия? Пойдем <a href=https://missingams.rusff.me/viewtopic.php?id=9#p16>знакомиться!</a></li>
</ol>

</div>

position:relative;
font-family:var(--font3, Verdana, sans-serif);
font-size:11.5px;
line-height:1.72;
color:var(--ncnw-txt);
background:var(--ncnw-bg);
padding:26px 28px 28px;
border-radius:12px;
overflow:hidden;
}
@supports (background: color-mix(in srgb, red 50%, blue)){
.ncnw-wrap{
--ncnw-tint:rgb(var(--bgcolor, 244 239 235));
--ncnw-theme:rgb(var(--acc2, 157 117 109));

--ncnw-bg:color-mix(in srgb, var(--ncnw-tint) 22%, var(--ncnw-paper));
--ncnw-panel:color-mix(in srgb, var(--ncnw-tint) 10%, #fdfbfa);
--ncnw-panel2:color-mix(in srgb, var(--ncnw-tint) 26%, #f2ebe7);
--ncnw-line:color-mix(in srgb, var(--ncnw-theme) 28%, transparent);

--ncnw-acc:color-mix(in srgb, var(--ncnw-theme) 55%, #d6bdb7);
--ncnw-acc-lt:color-mix(in srgb, var(--ncnw-theme) 80%, #8a645c);
--ncnw-acc-hi:color-mix(in srgb, var(--ncnw-theme) 60%, #5f403a);
}
}

/* зерно поверх всего блока */
.ncnw-wrap::after{
content:"";
position:absolute; inset:-20px;
pointer-events:none;
background-image:radial-gradient(rgba(90,66,60,.13) .6px, transparent .6px);
background-size:3px 3px;
opacity:.45;
mix-blend-mode:multiply;
animation:ncnwGrain .8s steps(5) infinite;
}
@keyframes ncnwGrain{
0%{ transform:translate(0,0) } 20%{ transform:translate(-2px,1px) }
40%{ transform:translate(2px,-2px) } 60%{ transform:translate(-1px,-1px) }
80%{ transform:translate(1px,2px) } 100%{ transform:translate(0,0) }
}

.ncnw-wrap a{ color:var(--ncnw-acc-hi); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .25s ease, color .25s ease; }
.ncnw-wrap a:hover{ color:var(--ncnw-txt-hi); border-bottom-color:var(--ncnw-acc-lt); }
.ncnw-wrap b{ color:var(--ncnw-txt-hi); font-weight:400; }

/* ─── шапка ─── */
.ncnw-top{
display:flex;
align-items:center;
gap:16px;
padding-bottom:18px;
border-bottom:1px solid var(--ncnw-line);
}
.ncnw-ava{
flex:0 0 auto;
width:58px; height:58px;
border-radius:50%;
overflow:hidden;
box-shadow:0 0 0 1px var(--ncnw-line), 0 0 0 4px var(--ncnw-panel), 0 6px 14px rgba(60,44,40,.14);
}
.ncnw-ava img{
width:100%; height:100%;
object-fit:cover;
display:block;
filter:grayscale(.45) contrast(1.05) brightness(1.02);
transition:filter .5s ease, transform .5s ease;
}
.ncnw-ava:hover img{ filter:none; transform:scale(1.06); }

.ncnw-titles{ flex:1 1 auto; min-width:0; }
.ncnw-issue{
display:flex; align-items:center; gap:10px;
font-family:var(--font4, Georgia, serif);
font-size:22px;
line-height:1.1;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--ncnw-txt-hi);
}
.ncnw-issue i{
width:7px; height:7px;
border-radius:50%;
background:var(--ncnw-acc-lt);
box-shadow:0 0 8px 2px rgba(157,117,109,.35);
animation:ncnwPulse 1.8s ease-in-out infinite;
}
@keyframes ncnwPulse{ 0%,100%{ opacity:.4; transform:scale(.8) } 50%{ opacity:1; transform:scale(1.15) } }
.ncnw-by{
margin-top:6px;
font-size:8px;
letter-spacing:.34em;
text-transform:uppercase;
color:var(--ncnw-dim);
}
.ncnw-date{
flex:0 0 auto;
text-align:right;
font-family:var(--font4, Georgia, serif);
font-size:7.5px;
letter-spacing:.3em;
text-transform:uppercase;
color:var(--ncnw-dim);
}
.ncnw-date b{
display:block;
margin-top:4px;
font-size:14px;
letter-spacing:.06em;
color:var(--ncnw-acc-hi);
}

/* ─── лид ─── */
.ncnw-lede{
margin-top:18px;
padding-left:16px;
border-left:2px solid var(--ncnw-acc);
color:#544a46;
text-align:justify;
}
.ncnw-lede::first-line{ color:var(--ncnw-txt-hi); }

.ncnw-star{
margin:20px 0 4px;
text-align:center;
font-size:15px;
color:var(--ncnw-acc-lt);
opacity:.85;
animation:ncnwPulse 3.6s ease-in-out infinite;
}

/* ─── заголовок секции ─── */
.ncnw-shead{
display:flex; align-items:center; gap:12px;
margin:22px 0 14px;
}
.ncnw-shead span{
font-family:var(--font4, Georgia, serif);
font-size:9px;
letter-spacing:.34em;
text-transform:uppercase;
color:var(--ncnw-txt-hi);
white-space:nowrap;
}
.ncnw-shead::before{
content:""; width:18px; height:1px; background:var(--ncnw-acc-lt);
}
.ncnw-shead::after{
content:""; flex:1 1 auto; height:1px;
background:linear-gradient(90deg, var(--ncnw-acc-lt), transparent);
opacity:.55;
}

/* ─── список важностей ─── */
.ncnw-list{
list-style:none;
margin:0; padding:0;
counter-reset:ncnw;
}
.ncnw-list li{
counter-increment:ncnw;
position:relative;
padding:11px 0 11px 44px;
border-top:1px solid var(--ncnw-line);
transition:background .3s ease, padding-left .3s ease;
}
.ncnw-list li:last-child{ border-bottom:1px solid var(--ncnw-line); }
.ncnw-list li::before{
content:"0" counter(ncnw);
position:absolute; left:6px; top:10px;
font-family:var(--font4, Georgia, serif);
font-size:13px;
color:rgba(60,44,40,.22);
transition:color .3s ease;
}
.ncnw-list li:hover{ background:rgba(157,117,109,.07); padding-left:50px; }
.ncnw-list li:hover::before{ color:var(--ncnw-acc-lt); }

@media (max-width:600px){
.ncnw-wrap{ padding:20px 16px 22px; }
.ncnw-top{ flex-wrap:wrap; gap:12px; }
.ncnw-issue{ font-size:18px; }
.ncnw-date{ text-align:left; }
}
@media (prefers-reduced-motion:reduce){
.ncnw-wrap::after, .ncnw-issue i, .ncnw-star{ animation:none; }
}
</style>
[/html]

+7

Поделиться22026-09-19 21:46:44

Автор: вафля
кринженер
Сообщений: 580
Уважение: +1200

[html]
<div class="ncnw-wrap ncnw-light" id="ncnwWrap">

<div class="ncnw-top">
<div class="ncnw-ava"><img src="https://upforme.ru/uploads/001c/7f/88/2/895437.gif" alt=""></div>
<div class="ncnw-titles">
<div class="ncnw-issue"><i></i>news #2</div>
<div class="ncnw-by">на связи вафелька</div>
</div>
<div class="ncnw-date">выпуск<b>19.09</b></div>
</div>

<div class="ncnw-lede">
<b>Первый полноценный день нашего поиска позади.</b> Приветствуем красотку <a href=https://missingams.rusff.me/profile.php?id=18>Unsure</a> в команде! Завайбовали с первых сообщений с ней, возлагаем на это сотрудничество большие надежды. А почему ты еще не в команде? <b><i>//Здесь могло быть ваше фото.//</i></b>
</div>

<div class="ncnw-shead"><span>важности</span></div>
<ol class="ncnw-list">
<li>Всё еще ждем двоих-троих ребят к амс. Как пелось в известной песне: "не надо <a href="https://missingams.rusff.me/viewtopic.php?id=5">стесняться</a>!"</li>
<li>Мы так рады вашей активности в ожидании, что запустили для вас <b>развлекаловку</b> прямо на амс-тесте. Потому что можем. Потому что вы зайки-котики-рыбки. <a href=https://missingams.rusff.me/viewtopic.php?id=15>Красим</a> картинки - получаем плюшку в виде придержанной внешности к игровому тесту.</li>
</ol>