/* =============================================================================
NEWS — лента /news и страницы постов
=============================================================================
В духе остального сайта: белые карточки с тонкой рамкой и мягкой тенью,
акцент --primary (#2563eb), фон #f5f0e6, шрифт Inter. Сетка — общая
.page-grid из /elements/layout.css; здесь только спаны под карточки ленты
и оформление контента.
Подключается ПОСЛЕ elements.css и layout.css:
============================================================================= */
:root {
--primary: #2563eb;
--primary-border: #bfdbfe;
--slate-900: #0f172a;
--slate-600: #475569;
--slate-500: #64748b;
--slate-200: #e2e8f0;
--card-border: #dde1e8;
--radius: 12px;
--radius-sm: 8px;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* ---- База страницы (news не грузит landing/styles.css) ---- */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
background-color: #f5f0e6;
color: var(--slate-600);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
img,
video {
max-width: 100%;
height: auto;
}
/* =============================================================================
ЛЕНТА — карточки постов
============================================================================= */
/* Спаны в общей .page-grid: 1 кол (телефон) → 1 из 2 (планшет) → 4 из 12 (десктоп). */
.page-grid > .news-card {
grid-column: 1 / -1;
}
.page-grid > .news-empty {
grid-column: 1 / -1;
}
.news-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--slate-200);
border-radius: var(--radius);
overflow: hidden;
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.news-card:hover {
border-color: var(--primary-border);
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
/* Кликабельна вся карточка: ссылка тянется на её площадь. */
.news-card__link {
display: flex;
flex-direction: column;
flex: 1;
color: inherit;
text-decoration: none;
}
.news-card__body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px;
flex: 1;
}
.news-card__date {
font-size: 12px;
font-weight: 600;
color: var(--slate-500);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.news-card__title {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
color: var(--slate-900);
}
.news-card__excerpt {
margin: 0;
font-size: 14px;
color: var(--slate-600);
}
/* Теги под телом карточки (вне ссылки — на будущее как фильтры). */
.news-card .news-tags {
padding: 0 18px 16px;
}
/* =============================================================================
ТЕГИ
============================================================================= */
.news-tags {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.news-tag {
font-size: 12px;
font-weight: 500;
color: var(--primary);
background: #eff4ff;
border: 1px solid #dbe6ff;
padding: 2px 9px;
border-radius: 9999px;
white-space: nowrap;
}
/* Тег-ссылка (страница поста): паддинг отдаём , чтобы кликалась вся чипа. */
.news-tag--link {
padding: 0;
transition:
background 0.2s ease,
border-color 0.2s ease;
}
.news-tag--link > a {
display: block;
padding: 2px 9px;
color: inherit;
text-decoration: none;
}
.news-tag--link:hover {
background: #dbe6ff;
border-color: var(--primary-border);
}
/* =============================================================================
НАВИГАЦИЯ ЛЕНТЫ (что открыто) — горизонтальный бар как панель Сканера
============================================================================= */
/* Бар тянется на всю ширину сетки над карточками. */
.page-grid > .news-nav {
grid-column: 1 / -1;
}
.news-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #fff;
border: 1px solid var(--slate-200);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.news-nav__item {
font-size: 14px;
font-weight: 600;
}
.news-nav__link {
color: var(--primary);
text-decoration: none;
}
.news-nav__link:hover {
text-decoration: underline;
}
.news-nav__current {
color: var(--slate-600);
}
.news-nav__sep {
color: var(--slate-200);
}
/* =============================================================================
ПУСТАЯ ЛЕНТА
============================================================================= */
.news-empty {
background: #fff;
border: 1px solid var(--slate-200);
border-radius: var(--radius);
padding: 28px;
text-align: center;
box-shadow: var(--shadow-sm);
}
.news-empty a {
color: var(--primary);
}
/* =============================================================================
ПАГИНАЦИЯ ЛЕНТЫ
============================================================================= */
/* Полоса навигации тянется на всю ширину сетки под карточками. */
.page-grid > .news-pagination {
grid-column: 1 / -1;
}
.news-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 6px;
}
.news-pagination__pages {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.news-pagination__page,
.news-pagination__nav {
display: grid;
place-items: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
background: #fff;
border: 1px solid var(--slate-200);
border-radius: var(--radius-sm);
color: var(--slate-600);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition:
border-color 0.2s ease,
color 0.2s ease,
background 0.2s ease;
}
a.news-pagination__page:hover,
.news-pagination__nav:hover {
border-color: var(--primary-border);
color: var(--primary);
background: #f1f6ff;
}
.news-pagination__page--current {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
/* =============================================================================
СТРАНИЦА ПОСТА
============================================================================= */
/* Единый контентный слот --single: панель навигации + статья. Растягивающийся
ряд 1fr отдаём статье (как было, когда .news-layout лежал прямо в page-grid),
чтобы карточка доходила до подвала; зазор повторяет gap сетки (12px). */
.page-grid > .news-page {
/* На десктопе .page-grid — 12 колонок (модификатор --single меняет только
ряды). Контентный слот должен занять все колонки, иначе по auto-flow он
встаёт в одну колонку и страница схлопывается в узкий столбец. Раньше эту
роль играло удалённое .page-grid > .news-layout. */
grid-column: 1 / -1;
}
.news-page {
display: grid;
/* Один столбец во всю ширину: без явного столбца грид даёт auto-трек по
контенту, и вложенная .news-layout не получает ширину под свои две колонки.
minmax(0,…) — защита от распирания широким медиа/длинными словами. */
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr;
gap: 6px;
}
/* Раскладка: текст новости слева, колонка «по тем же тегам» справа
(на телефоне/планшете колонка уходит под текст). Зазоры повторяют gap
общей .page-grid (12px → 14px → 5px), чтобы расстояния между карточками
были как везде на сайте. Карточка новости растягивается на высоту ряда
(align-items по умолчанию stretch) — между ней и подвалом нет пустоты. */
.news-layout {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.news-related {
display: grid;
gap: 12px;
align-content: start;
}
/* Блок ссылок на гид в конце статьи. Не карточка: он живёт внутри карточки
новости, поэтому отделяется только чертой сверху — как «читайте дальше» на
страницах самого гида. */
.news-guide {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--slate-200);
}
.news-guide__title {
margin: 0 0 8px;
font-size: 15px;
font-weight: 700;
color: var(--slate-500);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.news-guide__list {
margin: 0;
padding-left: 1.1em;
font-size: 16px;
line-height: 1.55;
}
.news-guide__list li + li {
margin-top: 4px;
}
.news-guide__list a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.news-related .news-card__title {
font-size: 15px;
}
.news-article {
width: 100%;
background: #fff;
border: 1px solid var(--slate-200);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 22px;
}
.news-article__head {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}
.news-article__date {
font-size: 13px;
font-weight: 600;
color: var(--slate-500);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.news-article__title {
margin: 0;
font-size: 28px;
font-weight: 800;
line-height: 1.2;
color: var(--slate-900);
}
.news-article__cover {
margin: 0 0 20px;
}
.news-article__cover img {
width: 100%;
border-radius: var(--radius-sm);
display: block;
}
/* ---- Типографика тела поста ---- */
.news-article__body {
font-size: 16.5px;
color: #1f2937;
}
.news-article__body > * + * {
margin-top: 1em;
}
.news-article__body h2,
.news-article__body h3 {
color: var(--slate-900);
line-height: 1.25;
margin-top: 1.5em;
}
.news-article__body h2 {
font-size: 22px;
font-weight: 700;
}
.news-article__body h3 {
font-size: 19px;
font-weight: 700;
}
.news-article__body a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.news-article__body ul,
.news-article__body ol {
padding-left: 1.3em;
}
.news-article__body li + li {
margin-top: 0.35em;
}
.news-article__body blockquote {
margin: 1.2em 0;
padding: 4px 0 4px 16px;
border-left: 3px solid var(--primary-border);
color: var(--slate-600);
font-style: italic;
}
.news-article__body img {
border-radius: var(--radius-sm);
}
.news-article__body code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.9em;
background: #f1f5f9;
padding: 1px 5px;
border-radius: 4px;
}
/* =============================================================================
МЕДИА-БЛОКИ
============================================================================= */
.news-article__media {
margin-top: 22px;
display: flex;
flex-direction: column;
gap: 18px;
}
/* Галерея-альбом выводится ПЕРЕД текстом (как в Telegram) — отступ снизу. */
.news-article__media--top {
margin-top: 0;
margin-bottom: 20px;
}
.news-figure {
margin: 0;
}
.news-figure img,
.news-figure video {
width: 100%;
border-radius: var(--radius-sm);
display: block;
}
.news-figure figcaption {
margin-top: 6px;
font-size: 13px;
color: var(--slate-500);
text-align: center;
}
/* ---- Галерея ---- */
.news-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px;
}
.news-gallery[data-count='1'] {
grid-template-columns: 1fr;
}
.news-gallery[data-count='2'],
.news-gallery[data-count='4'] {
grid-template-columns: repeat(2, 1fr);
}
/* Элемент галереи — кнопка (открывает лайтбокс): сбрасываем стиль кнопки. */
.news-gallery__item {
margin: 0;
padding: 0;
border: 0;
font: inherit;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--radius-sm);
overflow: hidden;
background: #eef0f4;
cursor: zoom-in;
}
.news-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-gallery__caption {
grid-column: 1 / -1;
font-size: 13px;
color: var(--slate-500);
text-align: center;
}
/* ---- Видео ---- */
.news-video {
background: #000;
}
/* Крупное видео (>20 МБ): постер + play, ведёт в Telegram. */
.news-tgvideo {
position: relative;
display: block;
border-radius: var(--radius-sm);
overflow: hidden;
text-decoration: none;
background: #0c1222;
}
.news-tgvideo img {
width: 100%;
display: block;
opacity: 0.92;
transition: opacity 0.2s ease;
}
.news-tgvideo:hover img {
opacity: 1;
}
.news-tgvideo__play {
position: absolute;
top: 50%;
left: 50%;
width: 64px;
height: 64px;
transform: translate(-50%, -50%);
background: rgba(37, 99, 235, 0.92);
border-radius: 50%;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.news-tgvideo__play::after {
content: '';
position: absolute;
top: 50%;
left: 54%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 11px 0 11px 18px;
border-color: transparent transparent transparent #fff;
}
.news-tgvideo__label {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 22px 14px 12px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: #fff;
font-size: 13px;
font-weight: 600;
}
/* ---- Файл (PDF и т.п.) ---- */
.news-file {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: #f8fafc;
border: 1px solid var(--slate-200);
border-radius: var(--radius-sm);
text-decoration: none;
color: inherit;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
.news-file:hover {
border-color: var(--primary-border);
background: #f1f6ff;
}
.news-file__icon {
flex: 0 0 auto;
width: 38px;
height: 46px;
border-radius: 4px;
background: var(--primary);
position: relative;
}
.news-file__icon::after {
content: 'PDF';
position: absolute;
left: 0;
right: 0;
bottom: 7px;
text-align: center;
font-size: 9px;
font-weight: 700;
color: #fff;
letter-spacing: 0.5px;
}
.news-file__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.news-file__name {
font-weight: 600;
color: var(--slate-900);
font-size: 15px;
}
.news-file__meta {
font-size: 12px;
color: var(--slate-500);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.news-file__action {
margin-left: auto;
flex: 0 0 auto;
font-size: 13px;
font-weight: 600;
color: var(--primary);
}
/* =============================================================================
ЛАЙТБОКС ГАЛЕРЕИ — полноэкранная карусель (news.js, нативный