без href (пустой href="#" Rank Math считает битой ссылкой, а читателя ведёт в никуда), и она не должна «подниматься» под курсором. */ a.b-post:hover,a.b-post:focus-visible{border-color:var(--u-accent);transform:translateY(-3px)} .b-post-top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between} .b-post-rubric{ font-family:var(--f-cta);font-weight:700;font-size:11px; text-transform:uppercase;letter-spacing:.05em; color:var(--u-gold); /* НЕ accent: оранж на navy-1 = 4.34, ниже AA */ } .b-post-date{ font-family:var(--f-cta);font-weight:700;font-size:11px; letter-spacing:.04em;color:var(--u-muted-on-navy); font-variant-numeric:tabular-nums;white-space:nowrap; } .b-post-title{ font-family:var(--f-h2h3);font-weight:700; font-size:clamp(17px,1.7vw,21px);line-height:1.25; color:var(--u-cream); /* заголовки статей длиннее названий гайдов и в узкой колонке рвались посреди слова */ overflow-wrap:break-word;hyphens:auto; } a.b-post:hover .b-post-title, a.b-post:focus-visible .b-post-title{color:var(--u-gold)} .b-post-excerpt{color:var(--u-muted-on-navy);font-size:15px;line-height:1.55} .b-post-meta{ margin-top:4px;padding-top:12px; border-top:1px solid var(--u-line-navy); display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center; font-family:var(--f-cta);font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:.05em; color:var(--u-muted-on-navy); } /* Стилей карточки «Скоро» (.b-post.is-soon, .b-post-soon) здесь нет и не должно быть: хаб публикуется вместе с первой статьёй и рендерит только опубликованные статьи (content/blog/РЕШЕНИЯ.md, 2026-09-02). Мёртвые правила под ненаписанную разметку возвращать незачем. */ .b-posts-empty{ grid-column:1 / -1; /* иначе пустышка встанет в первую колонку сетки */ color:var(--u-muted-on-navy); font-size:15px; } /* ---- те же карточки на крем-поле ---- Хаб может ставить сетку и в светлую секцию; золото на креме даёт 1.46, поэтому на светлом акцент уходит из текста в рамку и подчёркивание. */ .field-cream .b-post{background:var(--u-cream-hi);border-color:var(--u-line-cream)} .field-cream a.b-post:hover, .field-cream a.b-post:focus-visible{border-color:var(--u-navy)} .field-cream .b-post-title{color:var(--u-navy)} .field-cream a.b-post:hover .b-post-title, .field-cream a.b-post:focus-visible .b-post-title{color:var(--u-navy);text-decoration:underline;text-underline-offset:3px} .field-cream .b-post-rubric, .field-cream .b-post-date, .field-cream .b-post-excerpt, .field-cream .b-post-meta, .field-cream .b-posts-empty{color:var(--u-muted-on-cream)} .field-cream .b-post-meta{border-color:var(--u-line-cream)} /* ============================================================ ПАГИНАЦИЯ В день 0 не используется (статей ноль). Порог из плана: >40 живых статей — кнопка «Показать ещё» на JS, >100 — возвращаемся к вопросу о честных rewrite-правилах. Стили готовы заранее, чтобы каталог не пришлось трогать в момент, когда лента реально переполнится. ============================================================ */ .b-pagination{ display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center; margin-top:clamp(28px,3.5vw,44px); } /* «Показать ещё» — обычная .btn внутри .b-pagination: центрируется самим контейнером, ширина по содержимому, чтобы кнопка не выглядела формой отправки во всю колонку. Своего display у неё нет, но inline-flex из .btn перебил бы hidden при догрузке последней порции. */ .b-more-btn[hidden]{display:none} .b-pager{ display:flex;flex-wrap:wrap;gap:8px;align-items:center; list-style:none;margin:0;padding:0; } .b-pager a, .b-pager span{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 12px; /* тач-цель */ border:1px solid var(--u-line-navy); border-radius:var(--radius-pill); font-family:var(--f-cta);font-weight:700;font-size:13px; font-variant-numeric:tabular-nums; color:var(--u-muted-on-navy); transition:border-color .2s var(--ease-out),color .2s var(--ease-out); } .b-pager a:hover,.b-pager a:focus-visible{color:var(--u-cream);border-color:var(--u-muted-on-navy)} /* Текущая страница — , а не ссылка: кликать по странице, на которой уже стоишь, нечего. */ .b-pager [aria-current="page"]{ background:var(--u-accent);border-color:var(--u-accent); color:var(--u-accent-ink); } /* Многоточие: не кнопка и не тач-цель, поэтому без рамки и без min-width */ .b-pager .b-pager-gap{border:0;min-width:0;padding:0 4px;color:var(--u-line-navy)} .field-cream .b-pager a, .field-cream .b-pager span{border-color:var(--u-line-cream);color:var(--u-muted-on-cream)} .field-cream .b-pager a:hover, .field-cream .b-pager a:focus-visible{color:var(--u-navy);border-color:var(--u-navy)} /* ============================================================ СТАТЬЯ: КОЛОНКА ЧТЕНИЯ И ТИПОГРАФИКА home.css рассчитан на лендинги: там нет стилей для сплошного текста, таблиц и врезок. Добавляем недостающее на тех же токенах. ============================================================ */ /* Колонка чтения. Ограничиваем и центрируем саму .wrap, а не только .b-article: таблицы, врезки и оглавление лежат СОСЕДЯМИ текста, и центрирование одного абзацного блока увело бы их в разные стороны. Ширина — колонка ПЛЮС два гаттера: боковой padding .wrap входит в max-width, без добавки текст сжался бы уже 62ch. Класс ставится на .wrap хедера статьи и её текстовой секции. */ /* Своя мера чтения вместо --measure. Почему в px, а не в ch: --measure это 62ch, но ch считается от кегля body (18px), а абзацы статьи набраны --fs-lead (21px) — реальная строка выходила 53 знака вместо 62, а колонка не росла вообще от 1125 до 1920px (менялись только гаттеры). 1100px при 21px даёт ~84 знака — решение владельца в пользу плотности страницы. */ .b-read{max-width:calc(var(--measure-read) + var(--gutter) * 2);margin-inline:auto} .b-article{max-width:var(--measure-read)} .b-article > * + *{margin-top:20px} .b-article p{font-size:var(--fs-lead);line-height:1.65;color:var(--u-cream)} .field-cream .b-article p{color:var(--u-navy)} .b-article h2{ margin-top:clamp(40px,5vw,72px); font-size:clamp(22px,2.6vw,34px);line-height:1.1; color:var(--u-cream); } .b-article h3{ margin-top:clamp(28px,3vw,44px); font-family:var(--f-h2h3);font-weight:700; font-size:clamp(18px,1.8vw,23px);line-height:1.25; text-transform:none;letter-spacing:0; color:var(--u-cream); } .field-cream .b-article h2, .field-cream .b-article h3{color:var(--u-navy)} /* Якорь заголовка не должен уезжать под фиксированную шапку: 68px — высота .hdr, одинакова на всех брейкпоинтах. */ .b-article h2[id],.b-article h3[id],#faq,#text{scroll-margin-top:calc(68px + 20px)} /* Ссылка в тексте: акцент на navy даёт 5.26 и проходит AA. На крем-поле тот же оранж — 2.31, поэтому там ссылка navy с подчёркиванием. Подчёркивание есть всегда: цвет не должен быть единственным признаком. */ .b-article a{color:var(--u-accent);text-decoration:underline;text-underline-offset:3px} .b-article a:hover,.b-article a:focus-visible{color:var(--u-gold)} .field-cream .b-article a{color:var(--u-navy)} .b-article b,.b-article strong{color:var(--u-cream);font-weight:600} .field-cream .b-article b,.field-cream .b-article strong{color:var(--u-navy)} /* Списки внутри текста. .points/.bullets из home.css здесь не годятся: они рассчитаны на секции лендинга, с крупным отступом и своим тире. */ .b-article ul,.b-article ol{padding-left:22px;display:grid;gap:10px;margin:0} .b-article li{font-size:var(--fs-body);line-height:1.6;color:var(--u-muted-on-navy)} .b-article li::marker{color:var(--u-gold)} .field-cream .b-article li{color:var(--u-muted-on-cream)} .field-cream .b-article li::marker{color:var(--u-muted-on-cream)} /* ---- ВРЕЗКА (предупреждения и важные оговорки по ходу текста) ---- */ .b-callout{ background:var(--u-navy-1); border:1px solid var(--u-line-navy); border-left:3px solid var(--u-accent); border-radius:var(--radius-card); padding:clamp(16px,2vw,22px); } .b-callout p{font-size:var(--fs-body);margin:0} .b-callout p + p{margin-top:10px} .field-cream .b-callout{ background:var(--u-cream-hi); border-color:var(--u-line-cream); border-left-color:var(--u-navy); } /* ---- ЦИТАТА ---- */ .b-quote{ margin:0;padding-left:clamp(16px,2vw,22px); border-left:3px solid var(--u-gold); font-size:var(--fs-lead);line-height:1.55;color:var(--u-cream); } .b-quote cite{ display:block;margin-top:10px;font-style:normal; font-family:var(--f-cta);font-weight:700;font-size:12px; text-transform:uppercase;letter-spacing:.05em;color:var(--u-muted-on-navy); } .field-cream .b-quote{color:var(--u-navy);border-left-color:var(--u-navy)} .field-cream .b-quote cite{color:var(--u-muted-on-cream)} /* ---- КАРТИНКА С ПОДПИСЬЮ ---- Распирает колонку чтения до ширины .b-read: картинка в 62ch выглядит маркой, а текст под ней всё равно остаётся узким. */ .b-figure{margin:0;max-width:none} .b-figure img{border-radius:var(--radius-card);width:100%;height:auto} .b-figure figcaption{ margin-top:10px;font-size:13px;line-height:1.5; color:var(--u-muted-on-navy); } .field-cream .b-figure figcaption{color:var(--u-muted-on-cream)} /* ---- ТАБЛИЦА ---- Обёртка со скроллом обязательна: широкая таблица иначе распирает страницу и даёт горизонтальный скролл всему документу. min-width у самой таблицы — чтобы колонки не схлопывались в кашу, вместо этого включается скролл внутри обёртки. */ .b-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:none} .b-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px} .b-table th,.b-table td{ padding:12px 14px;text-align:left;vertical-align:top; border-bottom:1px solid var(--u-line-navy); } .b-table th{ font-family:var(--f-cta);font-weight:700;font-size:12px; text-transform:uppercase;letter-spacing:.05em; color:var(--u-gold);white-space:nowrap; } .b-table td{color:var(--u-muted-on-navy);line-height:1.5} .b-table tr:last-child td{border-bottom:none} .field-cream .b-table th,.field-cream .b-table td{border-color:var(--u-line-cream);color:var(--u-muted-on-cream)} /* ---- КОД / ДОСЛОВНЫЙ БЛОК (промпт, фрагмент настройки) ---- Моноширинный: в промпте значимы лишние пробелы и переносы, которые пропорциональный шрифт прячет. Скролл внутри блока, не у страницы. */ .b-code{ background:var(--u-navy-2); border:1px solid var(--u-line-navy); border-radius:var(--radius-card); padding:clamp(14px,1.8vw,20px); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:14px;line-height:1.5; color:var(--u-cream); /* 7.11 на navy-2 */ white-space:pre-wrap;word-break:break-word; overflow-x:auto;-webkit-overflow-scrolling:touch; max-width:none; } .b-code-label{ display:block;margin-bottom:8px; font-family:var(--f-cta);font-weight:700;font-size:11px; text-transform:uppercase;letter-spacing:.06em; color:var(--u-gold); } .field-cream .b-code{background:var(--u-cream-hi);border-color:var(--u-line-cream);color:var(--u-navy)} .field-cream .b-code-label{color:var(--u-muted-on-cream)} /* Инлайновый код внутри абзаца */ .b-article code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;padding:2px 6px;border-radius:6px; background:var(--u-navy-2);color:var(--u-cream); overflow-wrap:anywhere; } .field-cream .b-article code{background:var(--u-cream-hi);color:var(--u-navy)} .b-code code{background:none;padding:0;font-size:inherit;color:inherit} /* ============================================================ ОГЛАВЛЕНИЕ Ручной

, JS его не строит. Ширина по колонке чтения, а не во всю секцию: оглавление стоит прямо над текстом, и широкая плашка над узкой колонкой ломала бы ось. ============================================================ / .b-toc{ background:var(--u-navy-1); border:1px solid var(--u-line-navy); border-radius:var(--radius-card); padding:clamp(18px,2.2vw,26px); max-width:var(--measure-read); } .b-toc h2,.b-toc-title{ margin:0 0 14px;font-size:13px; font-family:var(--f-cta);font-weight:700; text-transform:uppercase;letter-spacing:.06em; color:var(--u-muted-on-navy); } .b-toc ol{margin:0;padding-left:20px;display:grid;gap:8px} .b-toc li{font-size:15px;line-height:1.45} .b-toc li::marker{color:var(--u-gold);font-family:var(--f-cta);font-size:12px} .b-toc a{color:var(--u-cream);text-decoration:none} .b-toc a:hover,.b-toc a:focus-visible{color:var(--u-gold);text-decoration:underline;text-underline-offset:3px} .field-cream .b-toc{background:var(--u-cream-hi);border-color:var(--u-line-cream)} .field-cream .b-toc h2,.field-cream .b-toc-title, .field-cream .b-toc li::marker{color:var(--u-muted-on-cream)} .field-cream .b-toc a{color:var(--u-navy)} .field-cream .b-toc a:hover,.field-cream .b-toc a:focus-visible{color:var(--u-navy);text-decoration:underline} / ============================================================ «ЧИТАЙТЕ ТАКЖЕ» — 2–3 ссылки внутри своей рубрики Не сетка карточек: это хвост статьи, а не второй каталог. Простой список ссылок с разделителями весит меньше и не спорит с CTA. ============================================================ / .b-also{ max-width:var(--measure-read); border-top:1px solid var(--u-line-navy); padding-top:clamp(18px,2.2vw,24px); } .b-also-title{ margin:0 0 12px; font-family:var(--f-cta);font-weight:700;font-size:12px; text-transform:uppercase;letter-spacing:.06em; color:var(--u-muted-on-navy); } .b-also ul{list-style:none;margin:0;padding:0;display:grid;gap:2px} .b-also a{ display:block;padding:12px 0; / 44px тач-цель складывается с line-height / border-bottom:1px solid var(--u-line-navy); font-family:var(--f-h2h3);font-weight:700;font-size:16px;line-height:1.35; color:var(--u-cream); } .b-also li:last-child a{border-bottom:0} .b-also a:hover,.b-also a:focus-visible{color:var(--u-gold)} .field-cream .b-also,.field-cream .b-also a{border-color:var(--u-line-cream)} .field-cream .b-also-title{color:var(--u-muted-on-cream)} .field-cream .b-also a{color:var(--u-navy)} .field-cream .b-also a:hover,.field-cream .b-also a:focus-visible{text-decoration:underline;text-underline-offset:3px} / ============================================================ CTA ВНУТРИ СТАТЬИ Финальный CTA секцией — это .u-cta + .miniform + .lead-consent из uslugi.css/home.css, здесь не переописывается. Не хватало только врезки-CTA в теле текста: она стоит в колонке чтения и не должна заливать полсекции акцентом. ============================================================ / .b-cta{ display:grid;gap:12px; background:var(--u-navy-1); border:1px solid var(--u-line-navy); border-left:3px solid var(--u-accent); border-radius:var(--radius-card); padding:clamp(20px,2.4vw,28px); } .b-cta h3{ font-family:var(--f-h2h3);font-weight:700; font-size:clamp(18px,1.9vw,24px);line-height:1.2; text-transform:none;letter-spacing:-.01em; color:var(--u-cream); } .b-cta p{font-size:var(--fs-body);line-height:1.55;color:var(--u-muted-on-navy);margin:0} .b-cta .btn{justify-self:start;margin-top:4px} .field-cream .b-cta{background:var(--u-cream-hi);border-color:var(--u-line-cream);border-left-color:var(--u-navy)} .field-cream .b-cta h3{color:var(--u-navy)} .field-cream .b-cta p{color:var(--u-muted-on-cream)} / ============================================================ ДВИЖЕНИЕ Всё движение раздела — подъём карточки на ховере и reveal .rv из home.css (у того своя защита). Здесь глушим своё. ============================================================ / @media (prefers-reduced-motion:reduce){ .b-post,.b-rubric,.b-pager a{transition:none} a.b-post:hover,a.b-post:focus-visible{transform:none} .b-rubrics{scroll-snap-type:none} } / ============================================================ МОБИЛЬНАЯ ПЛОТНОСТЬ ============================================================ / @media(max-width:640px){ / home.css на ≤560px опускает h2 до clamp(22px,5.6vw,30px) — расчёт под главную. В статье h1 живой текст с нижним порогом 24px, иерархия схлопывалась бы. Держим h2 ниже (решение перенесено из uslugi.css). / h2{font-size:18px} .b-article h2{font-size:clamp(19px,5vw,24px)} .b-article p{font-size:16px} .b-posts{gap:12px} .b-toc{padding:16px} / Даты в карточке на 360px не помещаются в строку с рубрикой / .b-post-top{gap:6px} } / Подпись над лентой фильтров («В разделе N статей») и живая область статуса. .b-note — отступ над лентой рубрик; базовые цвет и кегль приходят от .note из home.css, здесь только расстояние. .b-posts-status озвучивает результат фильтрации для скринридеров. Видимой её тоже оставляем: зрячему человеку после смены рубрики так же полезно увидеть, сколько нашлось. Пустой абзац до работы скрипта ничего не рисует — поэтому min-height, иначе сетка дёргается при первом же нажатии. / .b-note{margin-bottom:14px} .b-posts-status{min-height:1.5em;margin:0 0 12px} .b-posts-status:empty{margin:0} / ---- ОБЛОЖКА В КАРТОЧКЕ ---- Место держит aspect-ratio, а НЕ min-height: при min-height высота не зависит от ширины колонки, и на узком экране картинка либо обрезается, либо оставляет пустоту. Подложка под картинкой — на случай медленной загрузки: иначе на её месте секунду зияет фон карточки. Обложка выходит за padding карточки отрицательными полями: рамка картинки вровень с рамкой карточки читается аккуратнее, чем в рамке. / .b-post-cover{ display:block; aspect-ratio:3/2; overflow:hidden; margin:calc(-1 clamp(18px,2.2vw,24px)) calc(-1 * clamp(18px,2.2vw,24px)) 4px; border-radius:var(--radius-card) var(--radius-card) 0 0; background:var(--u-navy-2); } .field-cream .b-post-cover{background:var(--u-line-cream)} .b-post-cover img{width:100%;height:100%;object-fit:cover;display:block} /* Заголовок карточки — h3 ради навигации по заголовкам, но визуально это не подзаголовок статьи: сбрасываем кегль и отступы, заданные .b-article h3. */ .b-post-title{margin:0;font-size:inherit;line-height:inherit}