[hideprofile][html]
<style>
.news-container {
width: 750px;
max-width: 750px;
margin: 30px auto;
padding: 40px;
background: var(--plashnav);
background-image: radial-gradient(circle at 25% 25%, rgba(139, 69, 19, 0.05) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(94, 64, 55, 0.05) 2px, transparent 2px);
background-size: 30px 30px;
border: 1px solid var(--acc);
box-shadow: 4px 4px 18px var(--body_shad), inset 0 0 100px rgba(139, 69, 19, 0.05);
position: relative;
overflow: visible !important;
}
/* Эффект скрепок по углам */
.staple {
position: absolute;
width: 20px;
height: 8px;
background: linear-gradient(to bottom, #AAA 0%, #777 100%);
border-radius: 2px;
}
.staple-tl { top: 15px; left: 15px; transform: rotate(45deg); }
.staple-tr { top: 15px; right: 15px; transform: rotate(-45deg); }
.staple-bl { bottom: 15px; left: 15px; transform: rotate(-45deg); }
.staple-br { bottom: 15px; right: 15px; transform: rotate(45deg); }
/* Базовый стиль бумаги */
.paper-sheet {
background: var(--white2);
padding: 25px 30px;
margin-bottom: 35px;
position: relative;
box-shadow: 3px 3px 12px rgba(0,0,0,0.15),
inset 0 0 0 1px rgba(139, 69, 19, 0.15);
border-radius: 3px;
font-family: 'Georgia', serif;
color: var(--text);
border-top: 4px solid var(--acc);
transition: transform 0.3s ease;
z-index: 1;
}
.paper-sheet:hover {
transform: translateY(-3px);
box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
}
/* Разные цвета бумаги для рубрик */
.paper-sheet.intro {
background: var(--white2);
border-top-color: var(--acc);
transform: rotate(0.5deg);
}
/* Заголовки рубрик */
.rubric-title {
font-family: 'Times New Roman', serif;
font-size: 28px;
font-weight: bold;
color: var(--acc);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 3px double currentColor;
position: relative;
}
.rubric-title:after {
content: "• • •";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: var(--acc);
letter-spacing: 5px;
}
/* Вступительный блок */
.intro-text {
font-size: 15px;
line-height: 1.7;
text-align: justify;
margin-bottom: 20px;
}
.intro-text strong {
color: var(--acc);
font-weight: bold;
}
.intro-quote {
font-style: italic;
border-left: 3px solid var(--acc);
padding-left: 20px;
margin: 20px 0;
color: var(--acc);
font-size: 14px;
}
/* Декоративные элементы */
.watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
font-size: 60px;
font-weight: bold;
color: rgba(139, 69, 19, 0.05);
letter-spacing: 20px;
text-transform: uppercase;
pointer-events: none;
z-index: 0;
white-space: nowrap;
}
.date-stamp {
position: absolute;
top: 50px;
right: 50px;
font-family: 'Courier New', monospace;
font-size: 12px;
color: var(--acc);
text-align: right;
z-index: 10;
}
.date-stamp .week {
font-size: 18px;
font-weight: bold;
color: #7f1414;
}
/* Ссылки */
.news-container a {
color: var(--block) !important;
transition: all 0.2s;
}
.news-container a:hover {
color: var(--acc);
background: var(--shad);
}
/* Адаптив */
@media screen and (max-width: 650px) {
.news-container {
width: 95%;
padding: 20px;
}
.activists-grid {
grid-template-columns: repeat(2, 1fr);
}
.news-items {
grid-template-columns: 1fr;
}
.features-grid {
grid-template-columns: 1fr;
}
.watermark {
display: none;
}
}
.teni { filter: blur(4px); -webkit-filter: blur(4px); transition: all 0.7s ease-in-out;}
.teni:hover{filter: none;box-shadow: none;}
</style>
<div class="news-container">
<!-— Скрепки -->
<div class="staple staple-tl"></div>
<div class="staple staple-tr"></div>
<div class="staple staple-bl"></div>
<div class="staple staple-br"></div>
<!-— Водяной знак -->
<div class="watermark">TOP SECRET</div>
<!-— Дата -->
<div class="date-stamp">
<div class="week">NEWS #1</div>
<div>JAN, 01/18</div>
<div>Orlando, FL</div>
</div>
<!-— РУБРИКА 1: ВСТУПЛЕНИЕ -->
<div class="paper-sheet intro">
<div class="rubric-title">От редакции</div>
<div class="intro-text">
<strong>*стук по микрофону*</strong> Раз-раз? Проверка связи? О, нас слышно? УЖЕ??
<br>Кхем, кхем. Доброго времени суток, Ооооррррландо! С вами на связи команда, что уже почти укомплектована, и мы готовы выступить с небольшим объявлением, за которым сокрыто нечто большее. Мы с гордостью готовы заявить о том, что была проведена большая работа над матчастью. У нас готов сюжет, faq, призраки и мистика. Прямо сейчас прописываются фракции, к которым можно будет присоединиться. Среди них секта, нейтральный уголок светлого блока, правительственная организация ученых-аутсайдеров. <span class="teni">Можно будет придумать и свой кружок по интересам...</span> Работа кипит, и нам уже очень хочется показать то, что есть! Но нельзя. Пока нельзя.
</div>
<div class="intro-quote">
Рады сообщить о том, что мы ведем активную работу над дизайнами. <br><span class="teni">Небольшой бонус! Тем, кто находится с нами с этого этапа в будущем будут приятные подарочки!.</span>
</div>
<div class="intro-text">
Мы благодарим вас за то, что решили задержаться здесь. И будем счастливы видеть не только гостями, но жителями сего дивного города!
</div>
</div>
<div style=" text-align: center; margin-top: 25px; padding-top: 15px; border-top: 1px dashed var(--acc); font-size: 12px; color: var(--acc);">
Ждите обновлений в ближайшее время!
</div>
</div>
</div>
</html>[/html]
