/* Файл больше ничего не импортирует (02.08.2026): вся цепочка — tokens -> 01-atoms -> 02-cards -> 03-header-footer -> 05-page-shell -> файл страницы — собирается в multigonlab_enqueue_styles() в functions.php, по тегу на файл и с версией по времени изменения. Прежние @import вместе с ручным ?v=2 держали у посетителей старый CSS до тех пор, пока номер не поправишь руками. Если добавляешь новый общий файл — впиши его в $chain там, а не через @import здесь. */ /* Общая "рама" для всех внутренних страниц (Products, Product Detail, Articles listing, Article Detail) — тот же принцип, что и на главной: графитовый фон страницы, header/footer прозрачные и лежат прямо на нём, белое "тело" без отступов от header/footer (margin: 0). На внутренних страницах нет hero — сразу после header идёт белое тело с breadcrumbs и заголовком страницы. */ body { margin: 0; background: var(--color-page-outer); font-family: var(--font-body); color: var(--color-text-primary); } .page { max-width: var(--container-max); margin: 0 auto; padding: var(--space-4); } .page .site-header, .page .site-footer { background: transparent; border-radius: 0; margin: 0; } .page-body { background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-7); margin: 0; } .page-body > *:first-child { margin-top: 0; } .page-body > *:last-child { margin-bottom: 0; } section { margin: var(--space-8) 0; } /* ---------- Общие сетки карточек (используются на всех внутренних страницах) ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } /* ---------- Заголовок секции + "View all" (общий для всех страниц) ---------- */ .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-5); } .section-head h2 { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 700; margin: 0; } .section-head a { color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: var(--fs-small); } .section-head a:hover { color: var(--color-accent-amber); text-decoration: underline; } /* ---------- Breadcrumbs ---------- */ .breadcrumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--color-text-secondary); margin-bottom: var(--space-4); } .breadcrumbs a { color: var(--color-text-secondary); text-decoration: none; } .breadcrumbs a:hover { color: var(--color-accent-amber); text-decoration: underline; } .breadcrumbs .crumb-sep { color: var(--color-border); } .breadcrumbs .crumb-current { color: var(--color-text-primary); font-weight: 600; } /* ---------- Page title / intro ---------- */ .page-title { font-family: var(--font-heading); font-size: var(--fs-h1); font-weight: 700; margin: 0 0 var(--space-2); } .page-intro { font-size: var(--fs-body); color: var(--color-text-secondary); max-width: 720px; margin: 0 0 var(--space-6); line-height: 1.5; } /* ---------- About page: text + character column (page-about.php) ---------- */ .about-layout { display: flex; align-items: stretch; gap: var(--space-7); } .about-text { flex: 1; min-width: 0; } .about-text .article-body { max-width: 780px; } .about-character { flex-shrink: 0; display: flex; transform: translateX(-30px); } .about-character img { height: 100%; width: auto; max-width: 340px; object-fit: contain; } /* Подпись под картинкой статьи (19.07.2026) — Article Images в meta box'е (functions.php, multigonlab_get_article_image()), поле Caption у слотов Featured/Row/Hero. Общий класс, не привязан к конкретной странице — используется на Home (featured + карточки в ряд) и на самой статье (шапка), поэтому в общем shell-файле, а не в 04-home.css/08-article-detail.css. */ .mg-image-caption { font-size: var(--fs-small); color: var(--color-text-secondary); font-style: italic; margin: var(--space-2) 0 0; } /* ---------- Content typography (.article-body) ---------- (17.07.2026, "стандартизация типографики") Единый источник правды для ЛЮБОГО the_content() в теме — раньше h1-h6/списки/ссылки жили только в 08-article-detail.css (хватало статьям и страницам), а Overview на Product/Freebie рендерил the_content() в .page-intro, у которого нет вообще никаких правил для заголовков/списков — если редактор вставлял их в описание товара, они выходили совсем без стиля. Теперь Overview тоже оборачивается в .article-body (single-product.php/single-freebie.php), а .page-intro остаётся тем, чем и был — короткой статичной подписью (email-gate, thank-you и т.п.), не рич-контентом. Лежит здесь, а не в 08-article-detail.css, т.к. 05-page-shell.css — общая "рама", которую импортируют все 5 типов страниц (см. комментарий в начале файла). h1 внутри контента — намеренно НЕ должен встречаться (заголовок страницы уже .page-title, второй h1 на странице — SEO-ошибка), но правило ниже всё равно есть как защита от случайной вставки в редакторе, чтобы это хотя бы не выглядело сломанным. .editor-styles-wrapper в каждом селекторе (17.07.2026, Шаг 2 "синхронизация админки и фронтенда") — это НЕ опечатка/дубль-класс на фронте, а класс, которым сам Gutenberg оборачивает содержимое редактора, когда тема подключает add_theme_support('editor-styles') (functions.php). the_content() на фронте рендерится ровно в этот же HTML, что редактор показывает у себя — значит те же CSS-правила должны сработать в ОБОИХ местах, а класс-обёртка вокруг них разный (.article-body на фронте, .editor-styles-wrapper в редакторе). Общий селектор — без копирования значений в отдельный файл. */ .article-body h1, .editor-styles-wrapper h1 { font-family: var(--font-heading); font-size: var(--fs-h1); font-weight: 700; line-height: 1.2; margin: var(--space-7) 0 var(--space-3); scroll-margin-top: var(--space-6); } .article-body h2, .editor-styles-wrapper h2 { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; margin: var(--space-7) 0 var(--space-3); scroll-margin-top: var(--space-6); } .article-body h3, .editor-styles-wrapper h3 { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; margin: var(--space-6) 0 var(--space-2); scroll-margin-top: var(--space-6); } .article-body h4, .editor-styles-wrapper h4 { font-family: var(--font-heading); font-size: var(--fs-body-lg); font-weight: 700; line-height: 1.3; margin: var(--space-5) 0 var(--space-2); scroll-margin-top: var(--space-6); } .article-body h5, .editor-styles-wrapper h5 { font-family: var(--font-heading); font-size: var(--fs-body); font-weight: 700; line-height: 1.4; margin: var(--space-4) 0 var(--space-2); scroll-margin-top: var(--space-6); } .article-body h6, .editor-styles-wrapper h6 { font-family: var(--font-heading); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.4; margin: var(--space-4) 0 var(--space-2); scroll-margin-top: var(--space-6); } /* line-height: 1.5 (18.07.2026, правка по спецификации из Word — заказан интерлиньяж 18pt при размере текста 12pt/16px: 18pt=24px, 24/16=1.5). Было 1.7. */ .article-body p, .editor-styles-wrapper p { font-size: var(--fs-body); line-height: 1.5; color: var(--color-text-primary); margin: 0 0 var(--space-4); } .article-body ul, .article-body ol, .editor-styles-wrapper ul, .editor-styles-wrapper ol { padding-left: 20px; margin: 0 0 var(--space-4); line-height: 1.5; color: var(--color-text-primary); } .article-body li + li, .editor-styles-wrapper li + li { margin-top: var(--space-1); } /* Буллеты/номера — фирменный зелёный (18.07.2026, тот же цвет, что у кнопок, var(--color-primary)), а не тёмно-серый цвет самого текста. ::marker — стандартный способ красить именно маркер списка, не задевая цвет текста пункта. */ .article-body li::marker, .editor-styles-wrapper li::marker { color: var(--color-primary); } .article-body a, .editor-styles-wrapper a { color: var(--color-primary); text-decoration: underline; } .article-body a:hover, .editor-styles-wrapper a:hover { color: var(--color-accent-amber); } /* Кнопка редактора блоков (.wp-block-button__link, 01-atoms.css) — селектор там просто ".wp-block-button__link" (1 класс), а ".article-body a" выше — 1 класс + тег (более специфично), поэтому побеждал ОН, перекрашивая текст кнопки в зелёный поверх зелёного же фона — текст становился невидимым (баг с реального скрина, 17.07.2026, "текст на кнопке исчезает"). Явный возврат белого — и на обычном состоянии, и на hover (там та же природа конфликта: .article-body a:hover тоже специфичнее). */ .article-body .wp-block-button__link, .editor-styles-wrapper .wp-block-button__link { color: var(--color-text-inverse); } .article-body .wp-block-button__link:hover, .editor-styles-wrapper .wp-block-button__link:hover { color: var(--color-text-inverse); } .article-body strong, .editor-styles-wrapper strong { font-weight: 700; color: var(--color-text-primary); } .article-body hr, .editor-styles-wrapper hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; } /* Отступы у блоков без своих текстовых правил (картинка/кнопка) — раньше на них работал только дефолтный CSS ядра WP (wp-block-library, если вообще подключен) с чужими значениями, не по нашей 8pt-шкале — отсюда "странный" отступ от картинки на скрине. Приводим к тем же токенам, что и остальная типографика. */ .article-body .wp-block-image, .editor-styles-wrapper .wp-block-image { margin: 0 0 var(--space-3); } /* Adjacent margins collapse to the larger one, so just shrinking the image's own margin-bottom above didn't change anything when a heading (with its own bigger margin-top) follows directly — override the heading's margin-top specifically in that case so the collapsed gap is actually halved. */ .article-body .wp-block-image + h2, .editor-styles-wrapper .wp-block-image + h2 { margin-top: 0; } .article-body .wp-block-image + h3, .editor-styles-wrapper .wp-block-image + h3 { margin-top: 0; } .article-body .wp-block-buttons, .editor-styles-wrapper .wp-block-buttons { margin: 0 0 var(--space-5); } .article-body blockquote, .editor-styles-wrapper blockquote { border-left: 4px solid var(--color-primary); padding: var(--space-4) var(--space-5); margin: var(--space-6) 0; background: var(--color-tint-green-soft); border-radius: 0 var(--radius-md) var(--radius-md) 0; /* 12pt = 16px = var(--fs-body) — правка по спецификации из Word (18.07.2026), было var(--fs-body-lg) (18px/13.5pt). Ровно совпало с уже существующим токеном, отдельного не заводили. */ font-size: var(--fs-body); font-style: italic; color: var(--color-text-primary); } /* Базовый шрифт/цвет самого текста редактора (не только заголовков) — без этого Gutenberg показывает системный шрифт браузера, а не Inter. */ .editor-styles-wrapper { font-family: var(--font-body); color: var(--color-text-primary); } /* ---------- Pagination ---------- */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); } /* .pagination span (23.07.2026, фикс) — disabled-стрелка рендерится как (functions.php, multigonlab_render_pagination()/_ajax_pagination()), а не /