/* ============================================================ Блог — страница статьи (Этап 1). Тело — okna-st-body (форматирование из glavnaya.css). Здесь — раскладка: hero, 2 колонки (текст ~700 + sticky-сайдбар), оглавление, мобайл. ============================================================ */ .okna-blog-single{ background:#fff; } .okna-blog-wrap{ max-width:calc(var(--okna-cw) + 40px); margin:0 auto; padding:0 20px 60px; } /* Хлебные крошки блога перенесены в blog-list.css (грузится на ВСЕХ страницах блога — статья/листинг/таксономия; blog.css — только на статье). Значения = эталон каталога. Один источник, здесь не дублируем. */ /* ===== HERO статьи — собранный, 2 колонки, компактный (часть 1) ===== */ .okna-blog-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:30px; align-items:center; margin:6px 0 0; padding:26px 30px; border-radius:20px; border:1px solid #e2e9f5; background:linear-gradient(180deg,#f5f9ff 0%,#eef3fc 100%); box-shadow:0 6px 22px rgba(20,40,80,.05); } .okna-blog-hero--no-img{ grid-template-columns:1fr; } .okna-blog-hero__main{ min-width:0; } .okna-blog-hero__cat{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#1c5bd6; background:#fff; border:1px solid #dbe6fb; padding:5px 12px; border-radius:999px; text-decoration:none; transition:background .15s, border-color .15s, transform .1s; } .okna-blog-hero__cat:hover{ background:#eef3fc; border-color:#9fc0f3; } .okna-blog-hero__cat:active{ transform:scale(.96); } /* отклик при нажатии, как у пилюль тегов */ .okna-blog-hero__h1{ font-size:31px; line-height:1.18; font-weight:800; color:#123d87; margin:14px 0 0; letter-spacing:-.01em; position:relative; padding-bottom:15px; } .okna-blog-hero__h1::after{ content:''; position:absolute; left:0; bottom:0; width:56px; height:4px; border-radius:999px; background:var(--red,#e0223a); } .okna-blog-hero__meta{ display:flex; flex-wrap:wrap; gap:8px 12px; font-size:14px; color:#6b7686; margin-top:16px; } .okna-blog-hero__lead{ margin:14px 0 0; font-size:16px; line-height:1.6; color:#3a4a63; max-width:54ch; } .okna-blog-hero__img{ margin:0; border-radius:16px; overflow:hidden; background:#eef3fc; box-shadow:0 10px 30px rgba(20,40,80,.13); } .okna-blog-hero--has-img .okna-blog-hero__img img{ display:block; width:100%; height:390px; object-fit:cover; max-height:none; } /* фикс 360-420px */ .okna-blog-hero--compact{ padding:20px 24px; } .okna-blog-hero--compact .okna-blog-hero__h1{ font-size:27px; } .okna-blog-hero--compact .okna-blog-hero__img img{ height:340px; } .okna-blog-hero__h1--plain{ font-size:31px; line-height:1.18; font-weight:800; color:#123d87; margin:12px 0 4px; } /* ===== ЕДИНЫЙ стиль текста: заголовки статьи блога — как везде (канон .okna-st-body из glavnaya.css: H3 синий #123d87 + красная черта). Блочные переопределения СНЯТЫ (было: серый, без черты — расходилось с гео/услугами/главной; владелец: один стиль для блока текста по всему проекту). ===== */ /* Сетка: текст + сайдбар */ .okna-blog-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; align-items:start; margin-top:28px; } .okna-blog-article{ min-width:0; } .okna-blog-article .okna-st-body{ max-width:720px; } /* читаемая ширина */ /* Sticky-сайдбар */ .okna-blog-side{ position:relative; } .okna-blog-side > .okna-blog-toc{ margin-bottom:22px; } /* оглавление ВНЕ sticky-зоны → прокручивается; отступ до липкого блока товаров+формы */ .okna-blog-side__inner{ position:sticky; top:90px; display:flex; flex-direction:column; gap:22px; } /* липнут ТОЛЬКО товары+форма (оглавление выше, в потоке) */ /* Оглавление */ .okna-blog-toc{ border:1px solid #e8ecf2; border-radius:14px; padding:16px 18px; background:#fafbfd; } .okna-blog-toc__h{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#123d87; margin-bottom:10px; } .okna-blog-toc__list{ list-style:none; margin:0; padding:0; } .okna-blog-toc__list li{ margin:0; } .okna-blog-toc__list a{ display:block; padding:6px 0 6px 12px; font-size:14px; line-height:1.4; color:#526173; text-decoration:none; border-left:2px solid transparent; transition:color .15s, border-color .15s; } .okna-blog-toc__list a:hover{ color:#1c5bd6; } .okna-blog-toc__list li.is-sub a{ padding-left:24px; font-size:13px; color:#6b7686; } .okna-blog-toc__list a.is-active{ color:#1c5bd6; border-left-color:#1c5bd6; font-weight:700; } /* Товары в сайдбаре */ .okna-blog-prods{ border:1px solid #e8ecf2; border-radius:14px; padding:16px 18px; } .okna-blog-prods__h{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#123d87; margin-bottom:12px; } .okna-blog-prods__list{ display:flex; flex-direction:column; gap:10px; } .okna-blog-prod{ display:flex; gap:10px; align-items:center; text-decoration:none; color:#25344f; } .okna-blog-prod__img{ flex:0 0 auto; width:48px; height:48px; border-radius:8px; overflow:hidden; background:#eef3fc; } .okna-blog-prod__img img{ width:100%; height:100%; object-fit:cover; } /* заглушка товара без фото — иконка автостекла по центру (строка не ломается, картинка всегда есть) */ .okna-blog-prod__img--ph{ display:flex; align-items:center; justify-content:center; color:#9db4dd; } .okna-blog-prod__img--ph svg{ width:26px; height:26px; display:block; } .okna-blog-prod:hover .okna-blog-prod__img--ph{ color:#1c5bd6; } .okna-blog-prod__t{ font-size:13px; line-height:1.35; font-weight:600; } .okna-blog-prod:hover .okna-blog-prod__t{ color:#1c5bd6; } .okna-blog-prods__all{ display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:#1c5bd6; text-decoration:none; } .okna-blog-prods__all:hover{ text-decoration:underline; } /* CTA в сайдбаре */ .okna-blog-cta-side{ border:1px solid #dbe4f0; border-radius:14px; padding:18px; background:#eef3fc; } .okna-blog-cta-side__h{ font-size:17px; font-weight:800; color:#123d87; margin-bottom:4px; } .okna-blog-cta-side__t{ font-size:14px; color:#526173; margin-bottom:12px; line-height:1.5; } /* Похожие статьи */ .okna-blog-related{ margin-top:50px; } /* ★ W4-P02 · П8 — красная черта у H2 «Читайте также», макет 13. Правило БАЗОВОЕ и потому обслуживает новости: у статьи блога с W4-P01 свой скоуп body.single-blog ниже по файлу, он это переопределяет. Кегль 30 — только ≥769: ниже его диктует okna-mobile.css:62 body h2{23px !important} из файла вне Allowed, флаг бьёт любую специфичность. */ .okna-blog-related__h{ position:relative; font-size:26px; font-weight:800; color:#123d87; margin:0 0 4px; padding-bottom:14px; } .okna-blog-related__h::after{ content:''; position:absolute; left:0; bottom:0; width:44px; height:3px; border-radius:999px; background:var(--red,#e0223a); } @media (min-width:769px){ .okna-blog-related__h{ font-size:30px; } } /* ★ П8, вторая половина: МЁРТВЫЙ CSS УДАЛЁН — семь рядов, а не шесть. Отсюда убраны .okna-blog-related__grid и четыре правила .okna-blog-rcard*: замер даёт 0 узлов обоих классов на ВСЕХ 12 поверхностях списка 3. Седьмой ряд — .okna-blog-related__grid внутри медиазапроса ниже, убран там же. Положительный контроль поиска: тем же перебором .okna-nhome-grid на статье новости = 1, то есть зонд узлы видит и ноль здесь настоящий. Разметку печатает .okna-nhome-grid (single-news.php:146-147). */ /* Нижний CTA статьи — теперь тёмный баннер okna_pick_banner_render (.okna-pick--listing), стили в glavnaya.css/blog-list.css. Отступ сверху даёт .okna-blog-wrap .okna-pick--listing{ margin:48px 0 0 } (blog-list.css). Старый .okna-blog-botcta удалён. */ /* Блок тегов под текстом статьи (ведут на /blog/?okna_tag= — фильтр листинга) */ .okna-blog-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:34px 0 0; padding-top:22px; border-top:1px solid #eef1f6; } .okna-blog-tags__h{ font-size:14px; font-weight:800; color:#123d87; margin-right:2px; } .okna-blog-tag{ font-size:13px; font-weight:700; padding:7px 13px; border-radius:999px; text-decoration:none; display:inline-block; transition:background .15s, color .15s, border-color .15s, transform .1s; } .okna-blog-tag:active{ transform:scale(.96); } /* анимация нажатия */ /* текст ЧИТАЕМ во ВСЕХ состояниях (фикс белизны при клике/visited): светлый фон → синий текст, синий фон → белый. !important — перебить глобальные a:focus/:active темы (ставили почти-белый фон → бело-на-белом). */ .okna-blog-tag, .okna-blog-tag:link, .okna-blog-tag:visited{ color:#1c5bd6 !important; background:#f3f7ff !important; border:1px solid #e2ebfb !important; } .okna-blog-tag:hover, .okna-blog-tag:focus, .okna-blog-tag:active, .okna-blog-tag:focus-visible{ color:#fff !important; background:#1c5bd6 !important; border-color:#1c5bd6 !important; outline:none; } .okna-blog-tag:focus-visible{ box-shadow:0 0 0 3px rgba(28,91,214,.3); } /* Источник статьи/новости — неброский подвал, nofollow-ссылка для человека (вес не передаётся). */ /* ★ W4-P02 · П5 — плашка «Источник» по дизайн-системе, макет 13. Было: голая строка 13px серым текстом, без бокса, рамки, радиуса и иконки. Стало: бокс с фоном и рамкой + круглая иконка 36 со знаком-цепочкой 18. Правило БАЗОВОЕ и обслуживает только новости: узел печатается 3 из 3 на новостях и 0 из 8 на блоге, а у блога с W4-P01 свои скоупы поверх. */ .okna-news-source{ display:flex; align-items:flex-start; gap:12px; margin:16px 0 0; padding:14px 18px; background:#f5f8fd; border:1px solid #e8ecf2; border-radius:12px; font-size:14px; color:#526173; line-height:1.45; } .okna-news-source__ic{ flex:0 0 auto; width:36px; height:36px; border-radius:999px; background:#eef3fc; color:#1c5bd6; display:flex; align-items:center; justify-content:center; } .okna-news-source__b{ min-width:0; } .okna-news-source__l{ font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#8a94a6; } .okna-news-source__a, .okna-news-source__a:link, .okna-news-source__a:visited{ color:#1c5bd6 !important; text-decoration:none; font-weight:600; } /* !important — перебить TT1 a-цвет */ .okna-news-source__a:hover, .okna-news-source__a:focus{ text-decoration:underline; } /* Слот мобильного оглавления (после hero). На десктопе пуст → скрыт; на мобайле туда переезжает оглавление. */ .okna-blog-toc-slot:empty{ display:none; } .okna-blog-toc-slot{ margin:0 0 22px; } /* Мобайл */ @media(max-width:768px){ .okna-blog-grid{ grid-template-columns:1fr; gap:28px; } .okna-blog-side__inner{ position:static; } .okna-blog-article .okna-st-body{ max-width:none; } /* ★ W4-P02 · П8: седьмой ряд мёртвого CSS убран — .okna-blog-related__grid даёт 0 узлов на всех 12 поверхностях; сетку «похожих» печатает .okna-nhome-grid. */ /* hero — одна колонка (текст → картинка) */ .okna-blog-hero{ grid-template-columns:1fr; gap:18px; padding:22px 22px; } .okna-blog-hero--has-img .okna-blog-hero__img img{ height:270px; } } @media(max-width:600px){ .okna-blog-wrap{ padding:0 16px 44px; } /* MOB-03: таблица статьи прокручивается, а не режется. РАЗБОР КОНФЛИКТА под скоупом .okna-blog-article (не голый сквозной .okna-st-body): снимаем min-width:480 таблицы (объявлена glavnaya.css:1202), из-за которой бокс таблицы держал 480 и вылезал за вьюпорт, где его резал контейнер .okna-st-body{overflow:hidden} (сворачивание, glavnaya.css:1157), а собственный display:block+overflow-x:auto (glavnaya.css:1229) прокручивал пустоту. Теперь бокс таблицы = ширина вьюпорта, overflow-x:auto прокручивает СОДЕРЖИМОЕ (ячейки min-width:150) до конца; своротка не режет (таблица помещается). Без нового !important. */ .okna-blog-article .okna-st-body table{ min-width:0; } .okna-blog-hero{ padding:18px; } .okna-blog-hero__h1, .okna-blog-hero--compact .okna-blog-hero__h1{ font-size:24px; } .okna-blog-hero__lead{ font-size:15px; } .okna-blog-hero--has-img .okna-blog-hero__img img, .okna-blog-hero--compact .okna-blog-hero__img img{ height:210px; } /* заголовки тела статьи на мобиле — как везде (канон .okna-st-body), блочные размеры сняты */ /* Оглавление на мобайле — раскрывашка */ .okna-blog-toc{ padding:0; } .okna-blog-toc__h{ cursor:pointer; padding:14px 18px; margin:0; display:flex; justify-content:space-between; align-items:center; } .okna-blog-toc__h::after{ content:'▾'; transition:transform .2s; } .okna-blog-toc.is-collapsed .okna-blog-toc__h::after{ transform:rotate(-90deg); } .okna-blog-toc__list{ padding:0 18px 14px; } .okna-blog-toc.is-collapsed .okna-blog-toc__list{ display:none; } } /* ===== FAQ-секция (аккордеон из поля okna_blog_faq) ===== */ .okna-blog-faq{ margin:46px 0 0; max-width:720px; } .okna-blog-faq__h{ position:relative; font-size:26px; font-weight:800; color:#123d87; margin:0 0 22px; padding-bottom:12px; } .okna-blog-faq__h::after{ content:''; position:absolute; left:0; bottom:0; width:52px; height:3px; border-radius:999px; background:var(--red,#e0223a); } /* Карточки: каждый вопрос — отдельная карточка с зазором (--icw/--gap держат единый отступ текста/ответа) */ .okna-blog-faq__list{ --icw:24px; --gap:14px; --pad:20px; display:flex; flex-direction:column; gap:11px; } .okna-blog-faq__item{ border:1px solid #dbe6fb; border-radius:13px; background:#fff; transition:border-color .15s, box-shadow .15s, background .15s; } .okna-blog-faq__item:hover{ border-color:#b9d2f5; box-shadow:0 4px 14px rgba(28,91,214,.07); } .okna-blog-faq__item.is-open{ background:#f5f8fe; border-color:#cfe0fb; } /* Кнопка-вопрос: grid «иконка | текст», иконка слева сверху, текст ровным левым краем при переносе. Фон/цвет с !important — перебить тёмную кнопку темы TT1 (button{background:#28303d;color:#fff}). */ .okna-blog-faq__q{ display:grid; grid-template-columns:var(--icw) 1fr; column-gap:var(--gap); align-items:start; width:100%; text-align:left; background:none !important; border:0 !important; cursor:pointer; padding:18px var(--pad); font-family:inherit; font-size:17px; font-weight:700; color:#123d87 !important; line-height:1.4; box-shadow:none !important; border-radius:13px; } .okna-blog-faq__q:focus-visible{ outline:2px solid #1c5bd6; outline-offset:-3px; } .okna-blog-faq__qt{ grid-column:2; grid-row:1; } .okna-blog-faq__ic{ grid-column:1; grid-row:1; align-self:start; width:var(--icw); height:24px; position:relative; } /* высота = первой строке вопроса */ .okna-blog-faq__ic::before, .okna-blog-faq__ic::after{ content:''; position:absolute; left:50%; top:50%; background:#1c5bd6; border-radius:2px; transform:translate(-50%,-50%); transition:transform .2s; } .okna-blog-faq__ic::before{ width:15px; height:2.5px; } /* горизонталь */ .okna-blog-faq__ic::after{ width:2.5px; height:15px; } /* вертикаль → «−» при открытии */ .okna-blog-faq__item.is-open .okna-blog-faq__ic::after{ transform:translate(-50%,-50%) scaleY(0); } /* Ответ — вровень с текстом вопроса (отступ слева = иконка+gap), не под иконкой */ .okna-blog-faq__body{ padding:0 var(--pad) 20px calc(var(--pad) + var(--icw) + var(--gap)); color:#2a3650; font-size:16px; line-height:1.62; } .okna-blog-faq__body > *:first-child{ margin-top:0; } .okna-blog-faq__body > *:last-child{ margin-bottom:0; } .okna-blog-faq__body a{ color:#1c5bd6; } /* Свёрнутое состояние — ТОЛЬКО при включённом JS (без JS ответы видны: индексация + доступность). Паддинг — на __body (внутри grid-элемента __inner), чтобы __inner схлопывался в 0 (overflow+min-height). */ .okna-blog-faq--js .okna-blog-faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s ease; } .okna-blog-faq--js .okna-blog-faq__item.is-open .okna-blog-faq__a{ grid-template-rows:1fr; } .okna-blog-faq--js .okna-blog-faq__inner{ overflow:hidden; min-height:0; } .okna-blog-faq--js.okna-blog-faq--init .okna-blog-faq__a{ transition:none; } /* без анимации на старте */ /* ═══════════════════════════════════════════════════════════════════════════ ★ W4-P01, КОММИТ 2/3 «СТАТЬЯ» — величины макета 11, СКОУП body.single-blog. ★★ ПОЧЕМУ КАЖДОЕ ПРАВИЛО ПОД СКОУПОМ, БЕЗ ИСКЛЮЧЕНИЙ. functions.php:284 дословно: «Статья блога и НОВОСТЬ — раскладка (blog.css) … общие компоненты, news = близнец blog». Перебор по шаблону подтверждает: single-news.php печатает 35 классов okna-blog-*, среди них __faq, __prods, __toc, __tags, __grid, __related__h — ВЕСЬ скелет статьи общий. Правка базовых правил ушла бы в новости целиком, а они владение W4-P02 и Forbidden здесь. На ленте эта же ошибка уже была допущена и откачена — второй раз не повторяем. Скоуп даёт (0,2,1) против (0,1,0), нового !important ноль. ★★ ВЕЛИЧИНЫ, У КОТОРЫХ ЕСТЬ МОБИЛЬНЫЙ ДВОЙНИК, ЗАВЁРНУТЫ В min-width. Медиазапрос веса НЕ добавляет: без обёртки скоуп (0,2,1) перебил бы и @max-width-блоки этого же файла, а их величины свои и правкой не заказаны. Двойники: .okna-blog-grid и .okna-blog-hero{gap} — в @768; __h1, __lead, faq__h, faq__body — в @600. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width:769px){ body.single-blog .okna-blog-grid{ grid-template-columns:minmax(0,1fr) 336px; gap:40px; } /* 320/48 */ body.single-blog .okna-blog-hero{ gap:34px; } /* 30→34 */ } /* ★★ КЕГЛИ ЗАГОЛОВКОВ — ТОЛЬКО ≥769, И ЭТО НЕ ПРИДИРКА. Ниже 769 их диктует okna-mobile.css:61-62 — `body h1{30px !important}` и `body h2{23px !important}`, а на ≤480 ещё и :248-249 (28px и 22px). Файл ВНЕ Allowed, флаг бьёт любую специфичность: скоуп (0,2,1) против него бессилен по важности, а не по весу. Замер это и показал: на 768 H1 остался 30, FAQ и «читайте также» — 23. Правило, которое заведомо не работает, в лист не кладём — это позиция, шестой тупик того же семейства, что в контактах. */ @media (min-width:769px){ body.single-blog .okna-blog-hero__h1{ font-size:34px; } /* 31→34 */ body.single-blog .okna-blog-faq__h{ font-size:30px; } /* 26→30 */ } @media (min-width:601px){ body.single-blog .okna-blog-hero__lead{ font-size:16.5px; } /* 16→16.5 */ body.single-blog .okna-blog-faq__body{ font-size:15px; } /* 16→15; на ≤600 уже 15 своим правилом */ } /* Ниже — величины без мобильного двойника: действуют на всех ширинах статьи блога. */ body.single-blog .okna-blog-hero__meta{ font-size:13.5px; color:#8a94a6; gap:14px; } /* 14/#6b7686/8-12 */ body.single-blog .okna-blog-hero__lead{ line-height:1.55; color:#526173; } /* 1.6/#3a4a63 */ body.single-blog .okna-blog-hero__img{ border-radius:14px; } /* 16→14 */ body.single-blog .okna-blog-toc{ background:#fff; border-radius:16px; padding:18px 20px; } /* #fafbfd/14/16-18 */ body.single-blog .okna-blog-toc__h{ font-size:12px; letter-spacing:.06em; color:#8a94a6; } /* 13/.04em/#123d87 */ body.single-blog .okna-blog-tags{ margin-top:26px; padding-top:20px; border-top-color:#e8ecf2; } /* 34/22/#eef1f6 */ body.single-blog .okna-blog-tags__h{ font-size:13.5px; font-weight:700; color:#8a94a6; } /* 14/800/#123d87 */ body.single-blog .okna-blog-prods{ border-radius:16px; padding:18px 20px; } /* 14/16-18 */ body.single-blog .okna-blog-prod{ gap:12px; } /* 10→12 */ body.single-blog .okna-blog-prod__img{ width:52px; height:52px; border-radius:10px; } /* 48/8 */ body.single-blog .okna-blog-prod__t{ font-size:13.5px; color:#123d87; } /* 13/#25344f */ body.single-blog .okna-blog-faq{ max-width:820px; } /* 720→820 */ body.single-blog .okna-blog-faq__h::after{ width:44px; } /* полоска 52→44 */ body.single-blog .okna-blog-faq__item{ border-radius:10px; } /* 13→10 */ body.single-blog .okna-blog-faq__body{ color:#526173; } /* #2a3650 */ /* ★ margin закреплён ЯВНО. W4-P02 · П8 меняет базовое правило на margin:0 0 4px по макету 13, а скоуп блога это свойство не покрывал — и значение протекло на статью блога (замер поймал: 0 0 20px → 0 0 4px на трёх ширинах). Макет 11 даёт блогу 20px; закрепляем, чтобы соседний пакет не двигал чужую величину. */ body.single-blog .okna-blog-related__h{ position:relative; padding-bottom:12px; margin:0 0 20px; } body.single-blog .okna-blog-related__h::after{ content:''; position:absolute; left:0; bottom:0; width:44px; height:3px; border-radius:999px; background:var(--red,#e0223a); } /* полоски не было, макет 11 её рисует */ @media (min-width:769px){ body.single-blog .okna-blog-related__h{ font-size:30px; } } /* 26→30; ниже 769 диктует okna-mobile.css:62 с флагом */ /* ★ ЧТО НАМЕРЕННО НЕ ВОШЛО — позиции, а не пропуск: · ВСЁ ТЕЛО СТАТЬИ — кегль абзаца, H2 и H3 с красной полоской, списки, цитата, таблица целиком с её медиазапросом. У .okna-st-body 40 правил, из них 37 в glavnaya.css, файле ВНЕ Allowed. Это главный барьер пакета; · липкая первая колонка таблицы и затухание (приёмка 8) — медиазапрос таблицы тоже в glavnaya.css, а величин для них в макете 11 НЕТ ВОВСЕ: position:sticky и mask-image встречаются там ноль раз. Требование идёт из пакета, не из макета, и брать величины негде; · .okna-blog-tag 36.14→30 и ссылки оглавления 31.59 — тач-цели, уже ниже нормы 44; уменьшение кегля усугубляет приёмку 10; · заливка активного пункта оглавления вместо левой полосы — структурная; · круглая подложка 28×28 у знака FAQ — знак собран из ::before/::after, это переделка узла, а не величина; · фон, padding и фиксированная колонка 400px у hero — структурные: живой hero тянется (583,6), макет задаёт жёсткие 400. */ @media (max-width:600px){ /* ★ FAQ блога/новостей на мобилке = как на главной (решение владельца): full-bleed band #f5f8fd, «+» в кружке. */ .okna-blog-faq{ margin:36px -16px 0; background:#f5f8fd; border-radius:0; padding:44px 16px 48px; } .okna-blog-faq__h{ font-size:22px; } .okna-blog-faq__list{ --icw:30px; --gap:12px; --pad:16px; } .okna-blog-faq__ic{ width:30px; height:30px; border-radius:50%; background:#eef3fc; } /* «+» в светло-синем кружке как база .okna-faq */ .okna-blog-faq__q{ font-size:16px; padding:14px var(--pad); } .okna-blog-faq__body{ font-size:15px; } }