/* * Стили блога «Magazin» (/blog/, /blog/kategorie/*, страница статьи). * * ОТКУДА ВЗЯТО * ------------ * Оформление перенесено из макетов docs/blog/mockup-1-blog-startseite.html * и mockup-2-blog-artikel.html. Значения цветов, размеров и отступов — * оттуда же и из docs/blog/TZ-verstka.html; ничего не придумано заново. * * ПОЧЕМУ ЗДЕСЬ НЕТ НИ ОДНОГО СЕЛЕКТОРА ПО ТЕГУ * -------------------------------------------- * Это не стилистика, а требование раздела 5.5 архитектуры, и у него три * конкретные причины: * * 1. .sticky в hello-elementor/theme.css:81 объявлен как position:relative — * ровно то свойство, которое макет вешает на боковую колонку. Держать * вёрстку на том, что наш файл подключается позже, нельзя; * 2. post_class() ядра добавляет к элементам .post, .sticky, .hide; * 3. глобальный набор Elementor (elementor-kit-N) задаёт типографику * голым h1–h6, p, a, button, table. Голый селектор здесь воевал бы * с ним на равной специфичности, и кто победит — зависело бы от * порядка подключения файлов, то есть от настроек в админке. * * Поэтому каждый элемент разметки блога несёт свой класс apoli-blog__*, * и правило пишется на класс. Единственные места, где селектор по тегу * допустим, — внутри .apoli-blog__body: это обёртка любого готового HTML * (тело статьи, вступление раздела, ответ в блоке вопросов), разметку * которого мы не контролируем. Отдельно оговорено исключение для * .apoli-blog__crumbs a — крошки печатает Yoast, классов на ссылках у него нет. * * ССЫЛКИ: СПЕЦИФИЧНОСТЬ ПРОТИВ ГЛОБАЛЬНОГО НАБОРА ELEMENTOR * --------------------------------------------------------- * Набор «Elementor Kit» печатает в wp-content/uploads/elementor/css/post-7.css * правила * * .elementor-kit-7 a { color; font-family; font-size; font-weight; * font-style; text-decoration } * .elementor-kit-7 a:hover { color } * * Класс elementor-kit-7 стоит на , то есть действует и на страницах * блога, файл подключается в раньше стилей дочерней темы, а * специфичность у него (0,1,1) — выше, чем у одиночного класса (0,1,0). * На бою это выглядело так: цвет ссылки #0069AA совпал с фоном нашей синей * кнопки #0069AA, и «Termin vereinbaren» стала сплошным синим прямоугольником * без букв; заголовки карточек, пункты оглавления и крошки получили курсив * и подчёркивание, а размер текста упал до 12 px. * * СХЕМА, КОТОРОЙ СЛЕДУЕТ ВЕСЬ ФАЙЛ. Правило, чей субъект — ссылка (или * элемент, который ссылкой бывает), пишется с обёрткой: * * .apoli-blog .apoli-blog__имя (0,2,0) * .apoli-blog .apoli-blog__обёртка a (0,2,1) — где своего класса нет * * Оба выше набора: специфичности сравниваются по разрядам слева направо, * и два класса (b = 2) бьют «класс + тег» (b = 1) независимо от третьего * разряда. Состояния добавляют ещё по классу (:hover, :focus-visible) и * остаются выше a:hover набора. Правило механическое: добавляя ссылку, * повторяй форму, а не подбирай специфичность на глаз. * * Квалификатор по тегу («.apoli-blog a.apoli-blog__имя») сознательно НЕ * используется: .apoli-blog__pager-item — это на обычных страницах * и на текущей, и такая форма молча сняла бы оформление с текущей * страницы. Обёртка работает одинаково для любого тега. * * !important не используется нигде: с ним следующая правка стала бы * неразрешимой, а обёртки достаточно. * * Каждое такое правило обязано само задать то, что трогает набор: color, * font-family, font-size, font-weight, font-style, text-decoration. Там, * где ссылке нужна типографика родителя (карточка, крошки, оглавление, * ссылки боковой колонки, тело статьи), это одна строка «font: inherit» — * она возвращает семейство, размер, начертание и наклон к унаследованным; * то, что отличается, дописывается следом. Порядок важен: font — сокращение * и сбрасывает font-weight, поэтому идёт первым. * * :visited отдельным селектором не описан намеренно. Объявление color * в основном правиле действует на ссылку в любом состоянии, включая * посещённую; правило a:visited таблицы браузера лежит в нижнем * происхождении каскада и авторскому проигрывает при любой специфичности; * набор Elementor :visited не задаёт. Правило «на всякий случай» ничего * бы не меняло и было бы мёртвым кодом. * * ВНЕШНИХ ЗАГРУЗОК ЗДЕСЬ НЕТ И БЫТЬ НЕ ДОЛЖНО * ------------------------------------------- * Ни @import, ни url() на чужой домен, ни @font-face. На бою сайт * не загружает ни одного веб-шрифта (раздел 13.2 архитектуры, П-5): * Montserrat и Verdana только объявлены в CSS Elementor. Блог ведёт * себя так же — объявляет семейства и полагается на системные шрифты. * Подключать Google Fonts запрещено дважды: CLAUDE.md (никаких CDN) * и Complianz GDPR (передача IP посетителя третьей стороне). */ /* ------------------------------------------------------------------ */ /* Корень: переменные и базовая типографика */ /* ------------------------------------------------------------------ */ /* * Все переменные объявлены на .apoli-blog, а не на :root. Объявление * на :root протекло бы на остальные 115 страниц сайта и на редактор * Elementor; здесь же они живут ровно столько, сколько живёт блог. * * --apoli-blog-accent и --apoli-blog-accent-text намеренно НЕ объявлены: * их ставит шаблон инлайном на конкретном элементе по данным рубрики, * а в правилах используется var(..., #0069AA). * * Запасное значение в var() оставлено осознанно, хотя сегодня оно не * срабатывает: apoli_blog_sanitize_color() на стороне плагина сам * подставляет #0069AA и пустой строки не возвращает, так что рубрика без * заполненного поля цвета приезжает уже с синим. Запас страхует не от * пустого поля, а от собственной проверки шаблона: cats.php, card.php * и single-post.php пропускают в атрибут style только «#rgb»/«#rrggbb» * и любое другое значение выбрасывают — эта проверка защитная и на * поведение плагина полагаться не должна. Если она когда-нибудь сработает * (плагин переписали, значение пришло из базы в другом виде), без запаса * var() останется без значения, объявление целиком станет недействительным, * и полоса над карточкой пропадёт совсем вместо того, чтобы стать синей. * Цена страховки — одно слово в трёх правилах. * * --apoli-blog-headroom — высота липкой шапки сайта. В макете шапка * своя и высокая (100 px), на бою её рисует шаблон Elementor Pro * «Apoli Kopfzeile», и её реальную высоту отсюда не измерить. Значение * вынесено в одну переменную: если ряд рубрик встанет не вплотную * к шапке, правится одно число, а не пять правил. */ .apoli-blog { --apoli-blog-blue: #0069AA; --apoli-blog-blue-hover: #00588F; --apoli-blog-navy: #16163F; --apoli-blog-green: #0DBD48; --apoli-blog-green-hover: #0AA53E; --apoli-blog-ink: #2F2F2F; --apoli-blog-ink-2: #5A5A5A; --apoli-blog-ink-3: #8A8A8A; --apoli-blog-line: #E0E0E0; --apoli-blog-bg-2: #F6F6F6; --apoli-blog-bg-3: #F2F2F2; --apoli-blog-head: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --apoli-blog-text: Verdana, Geneva, sans-serif; --apoli-blog-headroom: 86px; color: var(--apoli-blog-ink); font-family: var(--apoli-blog-text); font-size: 16px; line-height: 1.72; } /* * Родитель даёт box-sizing:border-box в reset.css, а 2.7.1 — в style.min.css * (разбор в шапке assets/catalog.css). Повтор здесь нужен на случай, когда * стиль родителя отключён галочкой «hello_elementor_enqueue_style» на * странице настроек темы: без border-box поплывут все отступы карточек. */ .apoli-blog, .apoli-blog *, .apoli-blog *::before, .apoli-blog *::after { box-sizing: border-box; } /* Контейнер 1200 px — значение из TZ-verstka.html. */ .apoli-blog__wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .apoli-blog__main { padding: 38px 0 70px; } /* * Видимый фокус на всех интерактивных элементах блога. Так же сделано * в каталоге вакансий (plugins/technical/assets/scss/styles.scss). * Перечисление по классам, а не «.apoli-blog a:focus-visible», — * см. объяснение в шапке файла. Форма «.apoli-blog a.класс» — общая схема * специфичности, разобранная там же. */ .apoli-blog .apoli-blog__cat:focus-visible, .apoli-blog .apoli-blog__card:focus-visible, .apoli-blog .apoli-blog__btn:focus-visible, .apoli-blog .apoli-blog__pager-item:focus-visible, .apoli-blog .apoli-blog__toc-link:focus-visible, .apoli-blog .apoli-blog__joblink:focus-visible, .apoli-blog .apoli-blog__boxlink:focus-visible, .apoli-blog .apoli-blog__contact:focus-visible, .apoli-blog .apoli-blog__faq-question:focus-visible, .apoli-blog .apoli-blog__fallback-link:focus-visible, .apoli-blog .apoli-blog__crumbs a:focus-visible, .apoli-blog .apoli-blog__body a:focus-visible { outline: 2px solid var(--apoli-blog-blue); outline-offset: 2px; } /* ------------------------------------------------------------------ */ /* Кнопки */ /* ------------------------------------------------------------------ */ /* * min-height:44px — цель нажатия не меньше 44x44 (правка 36, так же * сделано в каталоге вакансий). В макете кнопка ниже (около 41 px); * это сознательное отступление в пользу доступности, и порог 44 * сохраняется на всех ширинах, включая мобильные. * * inline-flex вместо inline-block из макета нужен именно из-за min-height: * у inline-block текст прижался бы к верхнему краю увеличенной кнопки. */ .apoli-blog .apoli-blog__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--apoli-blog-blue); color: #fff; font-family: var(--apoli-blog-head); font-weight: 800; font-size: 14px; font-style: normal; line-height: 1.32; text-transform: uppercase; text-decoration: none; letter-spacing: .03em; padding: 10px 26px; border-radius: 100px; border: 2px solid var(--apoli-blog-blue); white-space: nowrap; cursor: pointer; } .apoli-blog .apoli-blog__btn:hover, .apoli-blog .apoli-blog__btn:focus { background: var(--apoli-blog-blue-hover); border-color: var(--apoli-blog-blue-hover); color: #fff; text-decoration: none; } .apoli-blog .apoli-blog__btn--lg { font-size: 16px; padding: 13px 34px; } .apoli-blog .apoli-blog__btn--sm { font-size: 12px; font-weight: 600; padding: 10px 20px; border-radius: 50px; border-width: 0; } .apoli-blog .apoli-blog__btn--green { background: var(--apoli-blog-green); border-color: var(--apoli-blog-green); } .apoli-blog .apoli-blog__btn--green:hover, .apoli-blog .apoli-blog__btn--green:focus { background: var(--apoli-blog-green-hover); border-color: var(--apoli-blog-green-hover); } /* Кнопка на всю ширину коробки: текст переносится, поэтому nowrap снят. */ .apoli-blog .apoli-blog__btn--block { display: flex; width: 100%; white-space: normal; text-align: center; padding: 11px 16px; font-size: 12.5px; } /* ------------------------------------------------------------------ */ /* Шапка раздела */ /* ------------------------------------------------------------------ */ .apoli-blog__pagehead { padding: 44px 0 26px; border-bottom: 1px solid var(--apoli-blog-line); } .apoli-blog__kicker { font-family: var(--apoli-blog-head); font-weight: 700; font-size: 11.5px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--apoli-blog-blue); margin: 0 0 10px; } .apoli-blog__pagetitle { font-family: var(--apoli-blog-head); font-weight: 800; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.16; text-transform: uppercase; color: var(--apoli-blog-navy); margin: 0 0 10px; max-width: 24ch; overflow-wrap: break-word; } .apoli-blog__secthead { margin: 0 0 26px; } .apoli-blog__secttitle { font-family: var(--apoli-blog-head); font-weight: 800; font-size: 25px; line-height: 1.2; text-transform: uppercase; color: var(--apoli-blog-navy); margin: 0 0 6px; overflow-wrap: break-word; } .apoli-blog__sectsub { margin: 0; color: var(--apoli-blog-ink-2); max-width: 80ch; font-size: 15px; } /* ------------------------------------------------------------------ */ /* Ряд рубрик */ /* ------------------------------------------------------------------ */ /* * Ряд липкий и стоит под шапкой сайта. top считается от --apoli-blog-headroom, * потому что шапку рисует Elementor Pro и её высота задана не здесь. */ .apoli-blog__cats { border-bottom: 1px solid var(--apoli-blog-line); background: #fff; position: sticky; top: var(--apoli-blog-headroom); z-index: 30; } .apoli-blog__cats .apoli-blog__wrap { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; } /* * Рубрики — ссылки , а не кнопки: это переход по адресу, а не * переключение на месте (требование TZ-verstka.html и критерий 11). * min-height:44px — цель нажатия (правка 36). */ .apoli-blog .apoli-blog__cat { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--apoli-blog-head); font-weight: 600; font-size: 12.5px; font-style: normal; line-height: 1.2; text-transform: uppercase; text-decoration: none; letter-spacing: .04em; color: var(--apoli-blog-ink-2); border: 1px solid var(--apoli-blog-line); border-radius: 100px; padding: 9px 20px; white-space: nowrap; background: #fff; } /* * При наведении подсвечивается цветом рубрики — но именно accent_text, * а не accent: accent_text и заведён для случая, когда сам акцент * слишком светлый для текста на белом (рубрика «Für Arbeitgeber»: * рамка #4FA3D1, текст #3E8CB8). */ .apoli-blog .apoli-blog__cat:hover, .apoli-blog .apoli-blog__cat:focus { border-color: var(--apoli-blog-accent-text, #0069AA); color: var(--apoli-blog-accent-text, #0069AA); text-decoration: none; } /* * Активная рубрика залита базовым синим, а не цветом рубрики, — так * в макете. Заливка цветом рубрики дала бы белый текст на #4FA3D1, * это контраст 2.8:1 и нечитаемо. */ .apoli-blog .apoli-blog__cat.is-current { background: var(--apoli-blog-blue); border-color: var(--apoli-blog-blue); color: #fff; } .apoli-blog .apoli-blog__cat.is-current:hover, .apoli-blog .apoli-blog__cat.is-current:focus { border-color: var(--apoli-blog-blue); color: #fff; } /* ------------------------------------------------------------------ */ /* Сетка и карточки */ /* ------------------------------------------------------------------ */ .apoli-blog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 22px; } /* * Цвет полосы сверху — переменная рубрики с запасным синим. Рубрика без * заполненного поля цвета получает #0069AA от плагина и не ломает ни * карточку, ни сетку (критерий 13); зачем при этом ещё и запас в var() — * разобрано в шапке файла. * * min-width:0 — карточка лежит в grid, а у элементов сетки min-width * по умолчанию auto: длинное слово в заголовке иначе раздвинет колонку * и вылезет за край страницы. */ .apoli-blog .apoli-blog__card { border: 1px solid var(--apoli-blog-line); border-top: 4px solid var(--apoli-blog-accent, #0069AA); border-radius: 12px; padding: 24px 26px 22px; background: #fff; display: flex; flex-direction: column; min-width: 0; /* * font: inherit возвращает ссылке семейство, размер, начертание * и наклон, унаследованные от .apoli-blog: набор Elementor ставит * ссылкам Verdana 12px italic, и заголовок карточки с анонсом * наследовали это от . Разбор — в шапке файла. */ font: inherit; text-decoration: none; color: inherit; transition: box-shadow .18s, transform .18s; } .apoli-blog .apoli-blog__card:hover, .apoli-blog .apoli-blog__card:focus { box-shadow: 0 14px 32px -22px rgba(22, 22, 63, .55); transform: translateY(-2px); /* * Цвет повторён в состоянии наведения не зря: у набора Elementor есть * .elementor-kit-7 a:hover{color} со специфичностью (0,2,1), и правило * без состояния (0,2,0) ему проигрывает — без этой строки карточка * под курсором перекрашивалась в #0084D6. То же сделано у всех * остальных ссылок, у которых цвет при наведении не меняется. */ color: inherit; text-decoration: none; } /* Пользователь просил не двигать интерфейс — уважаем системную настройку. */ @media (prefers-reduced-motion: reduce) { .apoli-blog .apoli-blog__card { transition: none; } .apoli-blog .apoli-blog__card:hover, .apoli-blog .apoli-blog__card:focus { transform: none; } } .apoli-blog__catlab { font-family: var(--apoli-blog-head); font-weight: 700; font-size: 10.5px; line-height: 1.4; letter-spacing: .13em; text-transform: uppercase; color: var(--apoli-blog-accent-text, #0069AA); margin: 0 0 10px; } .apoli-blog__card-title { font-family: var(--apoli-blog-head); font-weight: 700; font-size: 18px; line-height: 1.34; margin: 0 0 10px; color: var(--apoli-blog-navy); overflow-wrap: break-word; } .apoli-blog__card-text { font-size: 14.5px; color: var(--apoli-blog-ink-2); margin: 0 0 16px; line-height: 1.65; } .apoli-blog__meta { margin-top: auto; font-size: 12.5px; color: var(--apoli-blog-ink-3); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* Крупная карточка — только первая и только на первой странице; решает бэкенд. */ .apoli-blog .apoli-blog__card--feature { grid-column: span 2; } .apoli-blog__card--feature .apoli-blog__card-title { font-size: 24px; max-width: 26ch; } .apoli-blog__card--feature .apoli-blog__card-text { font-size: 15.5px; max-width: 70ch; } /* ------------------------------------------------------------------ */ /* Пагинация */ /* ------------------------------------------------------------------ */ .apoli-blog__pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 38px 0 0; flex-wrap: wrap; } /* * 44x44 вместо 40x40 из макета — то же требование к цели нажатия, * что и у кнопок. На узких экранах размер НЕ уменьшается (в макете * он падал до 36 px): именно на телефоне промах по ссылке и стоит дороже. */ .apoli-blog .apoli-blog__pager-item { font-family: var(--apoli-blog-head); font-weight: 600; font-size: 13px; font-style: normal; min-width: 44px; min-height: 44px; border-radius: 100px; border: 1px solid var(--apoli-blog-line); display: inline-flex; align-items: center; justify-content: center; color: var(--apoli-blog-ink-2); text-decoration: none; padding: 0 14px; } .apoli-blog .apoli-blog__pager-item:hover, .apoli-blog .apoli-blog__pager-item:focus { border-color: var(--apoli-blog-blue); color: var(--apoli-blog-blue); text-decoration: none; } .apoli-blog .apoli-blog__pager-item.is-current { background: var(--apoli-blog-blue); border-color: var(--apoli-blog-blue); color: #fff; } /* Многоточие — не ссылка, цель нажатия ему не нужна. */ .apoli-blog__pager-dots { border: none; min-width: 20px; padding: 0; } .apoli-blog .apoli-blog__pager-next, .apoli-blog .apoli-blog__pager-prev { padding: 0 22px; } /* ------------------------------------------------------------------ */ /* Полоса призыва */ /* ------------------------------------------------------------------ */ .apoli-blog__ctaband { background: var(--apoli-blog-bg-3); border-radius: 16px; padding: 34px 38px; margin: 46px 0 0; display: flex; gap: 30px; align-items: center; flex-wrap: wrap; } .apoli-blog__ctaband-title { font-family: var(--apoli-blog-head); font-weight: 800; font-size: 21px; line-height: 1.2; text-transform: uppercase; color: var(--apoli-blog-navy); margin: 0 0 8px; } .apoli-blog__ctaband-text { margin: 0; color: var(--apoli-blog-ink-2); max-width: 62ch; font-size: 15px; } .apoli-blog__ctaband-action { margin-left: auto; } /* ------------------------------------------------------------------ */ /* Статья: крошки, сетка, метаданные */ /* ------------------------------------------------------------------ */ /* * Единственное место в файле, где селектор по тегу стоит вне * .apoli-blog__body. Причина: крошки печатает yoast_breadcrumb(), * разметку задаёт Yoast, и классов на ссылках у него нет — * зацепиться больше не за что. Обёртка своя, поэтому наружу не течёт. */ .apoli-blog__crumbs { font-size: 12.5px; line-height: 1.6; color: var(--apoli-blog-ink-3); padding: 18px 0 0; margin: 0; } .apoli-blog .apoli-blog__crumbs a { /* * font: inherit — возврат к типографике .apoli-blog__crumbs: набор * Elementor навязывает ссылке Verdana 12px italic underline поверх * размера 12.5px обёртки. Подчёркивание здесь по макету появляется * только при наведении (mockup-2, «a:hover»). */ font: inherit; color: var(--apoli-blog-ink-3); text-decoration: none; } .apoli-blog .apoli-blog__crumbs a:hover { color: var(--apoli-blog-ink-3); text-decoration: underline; } /* * min-width:0 у обеих колонок — прямое требование TZ-verstka.html. * У элемента grid min-width по умолчанию auto, то есть «не уже своего * содержимого»; широкая таблица в статье при этом растягивает колонку, * колонка растягивает сетку, а сетка — всю страницу вбок. Проверяется * тем, что document.documentElement.scrollWidth не превышает ширину окна. */ .apoli-blog__artgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 54px; align-items: start; } .apoli-blog__article, .apoli-blog__aside { min-width: 0; } /* Боковой колонки нет (вариант 'none') — статья занимает всю ширину. */ .apoli-blog__artgrid--single { grid-template-columns: minmax(0, 1fr); } .apoli-blog__arttitle { font-family: var(--apoli-blog-head); font-weight: 800; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.16; color: var(--apoli-blog-navy); margin: 14px 0 16px; max-width: 26ch; overflow-wrap: break-word; } .apoli-blog__artmeta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--apoli-blog-ink-3); border-bottom: 1px solid var(--apoli-blog-line); padding-bottom: 20px; margin-bottom: 26px; } .apoli-blog__artmeta .apoli-blog__catlab { margin: 0; } .apoli-blog__lead { font-size: 18px; line-height: 1.7; color: var(--apoli-blog-ink); margin: 0 0 28px; } /* * Блок призыва внутри статьи показывается только уже 980 px: на широком * экране ту же задачу выполняет липкая боковая колонка, и два призыва * рядом выглядят навязчиво. Правило показа — в медиазапросе ниже. */ .apoli-blog__mcta { display: none; background: var(--apoli-blog-bg-2); border-radius: 12px; padding: 18px 20px; margin: 0 0 24px; } .apoli-blog__mcta-text { margin: 0 0 12px; font-size: 14.5px; color: var(--apoli-blog-ink-2); } /* ------------------------------------------------------------------ */ /* Оглавление */ /* ------------------------------------------------------------------ */ .apoli-blog__toc { background: var(--apoli-blog-bg-2); border-radius: 12px; padding: 22px 26px; margin: 0 0 30px; } .apoli-blog__toc-title { font-family: var(--apoli-blog-head); font-size: 11.5px; font-weight: 700; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--apoli-blog-ink-3); display: block; margin: 0 0 10px; } .apoli-blog__toc-list { margin: 0; padding-left: 20px; font-size: 14.5px; } .apoli-blog__toc-item { margin-bottom: 7px; } .apoli-blog .apoli-blog__toc-link { font: inherit; color: var(--apoli-blog-blue); text-decoration: none; } .apoli-blog .apoli-blog__toc-link:hover { color: var(--apoli-blog-blue); text-decoration: underline; } /* ------------------------------------------------------------------ */ /* Тело статьи */ /* ------------------------------------------------------------------ */ /* * ЕДИНСТВЕННАЯ ЗОНА, ГДЕ РАЗРЕШЕНЫ СЕЛЕКТОРЫ ПО ТЕГАМ. * Внутрь .apoli-blog__body попадает готовый HTML, которым мы не * управляем: вывод the_content() после фильтров плагина, вступление * раздела, ответ в блоке вопросов. Расставить классы там некому. * Селекторы всё равно начинаются с класса-обёртки, поэтому набору * Elementor они проигрывают только внутри неё и никуда не протекают. * * Модификаторы --intro и --faq — те же готовые куски HTML в других * местах страницы; они наследуют разметочные правила отсюда и * переопределяют размеры ниже. */ .apoli-blog__body { overflow-wrap: break-word; } .apoli-blog__body p { margin: 0 0 16px; max-width: 74ch; font-size: 16px; line-height: 1.72; color: var(--apoli-blog-ink); } .apoli-blog__body h2 { font-family: var(--apoli-blog-head); font-weight: 800; font-size: 23px; text-transform: uppercase; color: var(--apoli-blog-navy); margin: 38px 0 14px; line-height: 1.25; /* * Якорь у H2 ставит бэкенд, переход по ссылке оглавления попадает * ровно на заголовок. scroll-margin-top отодвигает точку остановки * на высоту липкой шапки — без него заголовок уезжает под неё. */ scroll-margin-top: calc(var(--apoli-blog-headroom) + 16px); } .apoli-blog__body h3 { font-family: var(--apoli-blog-head); font-weight: 600; font-size: 17px; text-transform: uppercase; color: var(--apoli-blog-blue); margin: 28px 0 10px; line-height: 1.3; scroll-margin-top: calc(var(--apoli-blog-headroom) + 16px); } .apoli-blog__body ul, .apoli-blog__body ol { margin: 0 0 18px; padding-left: 22px; max-width: 74ch; } .apoli-blog__body li { margin-bottom: 8px; } /* * Ссылка в тексте статьи остаётся видимой ссылкой: подчёркивание здесь * сохранено намеренно. В макете общее правило «a{text-decoration:none}» * снимает его везде, но в сплошном тексте ссылка, отличающаяся от * соседних слов только цветом, — это ровно тот случай, который запрещает * WCAG 1.4.1 (цвет как единственный признак). В кнопках, рубриках, * карточках и оглавлении ссылку видно по форме, там подчёркивания нет. * * Курсив снят: его навязывает набор Elementor, в тексте статьи наклон * означает выделение, а не ссылку. font: inherit возвращает наклон, * семейство, размер и начертание к тому, что задаёт окружающий текст, — * ссылка внутри или оформится вместе с ним. */ .apoli-blog .apoli-blog__body a { font: inherit; color: var(--apoli-blog-blue); text-decoration: underline; } .apoli-blog .apoli-blog__body a:hover { color: var(--apoli-blog-blue-hover); text-decoration: underline; } .apoli-blog__body img { max-width: 100%; height: auto; } /* * Врезка-цитата: штатный блок редактора «Цитата», стили под его разметку * (раздел 5.5 архитектуры). Класса .apoli-blog__quote в теле статьи не * появится — редактор его не проставляет и фильтр бэкенда не дописывает, * поэтому селектора под него здесь нет. */ .apoli-blog__body blockquote { border-left: 4px solid var(--apoli-blog-blue); background: var(--apoli-blog-bg-2); padding: 20px 24px; margin: 26px 0; border-radius: 0 12px 12px 0; } .apoli-blog__body blockquote p { margin: 0; font-style: italic; color: var(--apoli-blog-ink); } .apoli-blog__body blockquote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--apoli-blog-ink-3); } /* * Таблицу в рамку .apoli-blog__tablewrap оборачивает бэкенд фильтром * the_content — иначе широкая таблица растянет страницу вбок * (прямое требование TZ-verstka.html). */ .apoli-blog__tablewrap { overflow-x: auto; border: 1px solid var(--apoli-blog-line); border-radius: 12px; margin: 24px 0; max-width: 100%; } .apoli-blog__body table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 520px; } .apoli-blog__body th, .apoli-blog__body td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--apoli-blog-line); } .apoli-blog__body thead th { font-family: var(--apoli-blog-head); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--apoli-blog-blue); } .apoli-blog__body tbody tr:last-child td { border-bottom: none; } .apoli-blog__body tbody tr:nth-child(even) { background: var(--apoli-blog-bg-2); } /* * Правила под класс «num» у числовых ячеек здесь больше нет. Проставить * класс на отдельную ячейку редактор блоков не может (поле «Дополнительный * класс CSS» есть у блока-таблицы целиком, а не у td), фильтр бэкенда его * тоже не дописывает — правило не сработало бы ни разу. Если выравнивание * чисел вправо когда-нибудь понадобится, класс должен начать проставлять * тот же фильтр the_content, который оборачивает таблицу; тогда сюда * вернётся и правило. */ /* * Страховка на случай, если фильтр бэкенда таблицу не обернул * (старая запись, отключённый плагин, ручная вставка HTML). * Селектор бьёт только по таблице — прямому потомку тела статьи: * обёрнутая таблица лежит внутри .apoli-blog__tablewrap и сюда * не попадает. Без этого правила одна широкая таблица даёт * горизонтальную прокрутку всей страницы на телефоне. */ /* * Селектор с двумя классами намеренно: у «.apoli-blog__body table» выше * и в медиазапросе ниже специфичность (0,1,1) — ровно такая же, как * у «.apoli-blog__body > table», комбинатор её не повышает. Правило * из медиазапроса стоит в файле позже и победило бы при равенстве; * проверено на 375 px: таблица получала min-width:460px и растягивала * страницу до 476 px. Лишний класс даёт (0,2,1) и снимает зависимость * от порядка правил в файле. */ .apoli-blog .apoli-blog__body > table { display: block; overflow-x: auto; max-width: 100%; /* * min-width обязателен именно здесь и именно нулевой. У display:block * min-width:520px из правила выше применился бы к самой коробке * таблицы, она стала бы шире экрана телефона и прокрутка появилась бы * у страницы, а не внутри таблицы, — то есть ровно то, от чего это * правило и страхует. Проверено на 375 px: без этой строки * scrollWidth = 476 при ширине окна 375. */ min-width: 0; } /* Вступление раздела: тот же готовый HTML, но мельче и приглушённее. */ .apoli-blog__body--intro p { margin: 0 0 10px; color: var(--apoli-blog-ink-2); max-width: 78ch; font-size: 15.5px; } .apoli-blog__body--intro p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------ */ /* Вопросы и ответы */ /* ------------------------------------------------------------------ */ .apoli-blog__faq { border-top: 1px solid var(--apoli-blog-line); margin-top: 34px; padding-top: 8px; scroll-margin-top: calc(var(--apoli-blog-headroom) + 16px); } .apoli-blog__faq-title { font-family: var(--apoli-blog-head); font-weight: 800; font-size: 23px; line-height: 1.25; text-transform: uppercase; color: var(--apoli-blog-navy); margin: 26px 0 18px; } .apoli-blog__faq-item { border-bottom: 1px solid var(--apoli-blog-line); padding: 16px 0; } /* * Блок раскрывается без JavaScript — это
/
. С клавиатуры * summary получает фокус и открывается по Enter и по Space силами браузера, * своего обработчика для этого не нужно. * * display:list-item обязателен и трогать его нельзя. Треугольник раскрытия * рисует сам браузер — это ::marker со списочным типом disclosure-closed, * а в открытом состоянии disclosure-open, и существует он ровно до тех пор, * пока у summary остаётся display:list-item. Здесь раньше стоял display:flex * ради цели нажатия в 44 px — и вместе с list-item он снимал треугольник: * закрытые вопросы выглядели просто жирными строками, и что на них можно * нажать, посетитель не догадывался. * * Цель нажатия набирается теперь вертикальным padding, а не min-height: * 11 + 22.4 (строка 16 px × 1.4) + 11 = 44.4 px. Своей стрелки не рисуем * намеренно: в макете (mockup-2, .faq summary) display не переопределён * и треугольник тоже браузерный, к тому же любая своя иконка — это либо * лишний файл, либо шрифт-иконка, а ни того ни другого на страницах блога * быть не должно. * * list-style здесь не объявлен специально: тип маркера ставят правила * браузера, они же и переключают его по [open]. Объявив list-style-type * руками, пришлось бы вести и второе правило под открытое состояние. */ .apoli-blog__faq-question { display: list-item; padding: 11px 0; font-family: var(--apoli-blog-head); font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--apoli-blog-navy); cursor: pointer; } .apoli-blog__body--faq p { margin: 12px 0 0; color: var(--apoli-blog-ink-2); font-size: 15px; max-width: 74ch; } /* ------------------------------------------------------------------ */ /* Блок консультанта */ /* ------------------------------------------------------------------ */ .apoli-blog__berater { background: var(--apoli-blog-bg-2); border-radius: 16px; padding: 38px 40px; margin: 44px 0 0; display: flex; gap: 34px; align-items: center; flex-wrap: wrap; } .apoli-blog__berater-photo { width: 200px; height: 200px; border-radius: 100px; border: 10px solid #fff; flex: none; display: block; object-fit: cover; box-shadow: 0 8px 26px -18px rgba(22, 22, 63, .6); } .apoli-blog__berater-body { flex: 1; min-width: 280px; } .apoli-blog__berater-title { font-family: var(--apoli-blog-head); font-weight: 600; font-size: 20px; line-height: 1.3; text-transform: uppercase; color: var(--apoli-blog-blue); margin: 0 0 6px; } .apoli-blog__berater-name { font-family: var(--apoli-blog-head); font-weight: 800; font-size: 36px; text-transform: uppercase; color: #000; margin: 0 0 14px; line-height: 1.1; } .apoli-blog__berater-contacts { display: flex; gap: 24px; flex-wrap: wrap; margin: 0 0 20px; font-size: 15px; } .apoli-blog .apoli-blog__contact { display: inline-flex; align-items: center; min-height: 44px; gap: 9px; font: inherit; font-weight: 600; color: var(--apoli-blog-blue); text-decoration: none; } .apoli-blog .apoli-blog__contact:hover { color: var(--apoli-blog-blue); text-decoration: underline; } .apoli-blog__contact-icon { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--apoli-blog-blue); stroke-width: 1.8; } .apoli-blog__berater-actions { display: flex; gap: 12px; flex-wrap: wrap; } .apoli-blog__berater-bio { font-size: 14px; color: var(--apoli-blog-ink-2); margin: 16px 0 0; max-width: 64ch; } /* ------------------------------------------------------------------ */ /* Боковая колонка */ /* ------------------------------------------------------------------ */ /* * Имя класса apoli-blog__sticky, а не sticky: голый .sticky уже занят * родительской темой (hello-elementor/theme.css:81, position:relative) * и его же добавляет post_class() к закреплённым записям. */ .apoli-blog__sticky { position: sticky; top: calc(var(--apoli-blog-headroom) + 32px); } .apoli-blog__box { border: 1px solid var(--apoli-blog-line); border-radius: 14px; padding: 24px; margin-bottom: 22px; } .apoli-blog__box:last-child { margin-bottom: 0; } .apoli-blog__box--dark { background: var(--apoli-blog-navy); border-color: var(--apoli-blog-navy); color: #fff; } .apoli-blog__box-title { font-family: var(--apoli-blog-head); font-weight: 800; font-size: 15px; line-height: 1.35; text-transform: uppercase; margin: 0 0 10px; color: var(--apoli-blog-navy); } .apoli-blog__box--dark .apoli-blog__box-title { color: #fff; } .apoli-blog__box-note { margin: -4px 0 12px; font-size: 13px; line-height: 1.5; color: var(--apoli-blog-ink-3); } .apoli-blog__box--dark .apoli-blog__box-note { color: #C9D6E2; } .apoli-blog__box-list { list-style: none; margin: 0; padding: 0; } .apoli-blog__box-item { padding: 12px 0; border-bottom: 1px solid var(--apoli-blog-line); font-size: 14.5px; line-height: 1.45; } .apoli-blog__box-item:last-child { border-bottom: none; } .apoli-blog .apoli-blog__joblink { display: inline-block; font: inherit; font-weight: 600; color: var(--apoli-blog-navy); text-decoration: none; } .apoli-blog .apoli-blog__joblink:hover { color: var(--apoli-blog-navy); text-decoration: underline; } .apoli-blog__jobmeta { display: block; font-size: 12.5px; color: var(--apoli-blog-ink-3); margin-top: 3px; } .apoli-blog__boxlink-row { margin: 16px 0 14px; } .apoli-blog .apoli-blog__boxlink { font: inherit; font-size: 14px; color: var(--apoli-blog-blue); text-decoration: none; } .apoli-blog .apoli-blog__boxlink:hover { color: var(--apoli-blog-blue); text-decoration: underline; } /* ------------------------------------------------------------------ */ /* Похожие статьи */ /* ------------------------------------------------------------------ */ .apoli-blog__related { border-top: 1px solid var(--apoli-blog-line); margin-top: 56px; padding-top: 38px; } .apoli-blog__related-title { font-family: var(--apoli-blog-head); font-weight: 800; font-size: 23px; line-height: 1.25; text-transform: uppercase; color: var(--apoli-blog-navy); margin: 0 0 22px; } /* ------------------------------------------------------------------ */ /* Запасной вывод при выключенном плагине */ /* ------------------------------------------------------------------ */ /* * Этот кусок работает, когда плагин apoli-blog отключён. Оформления * почти нет намеренно: задача — отдать 200 и читаемый текст, а не * повторить макет данными, которых уже нет (критерий 34). */ .apoli-blog__fallback-item { padding: 0 0 26px; margin: 0 0 26px; border-bottom: 1px solid var(--apoli-blog-line); } .apoli-blog__fallback-item:last-child { border-bottom: none; } .apoli-blog__fallback-title { font-family: var(--apoli-blog-head); font-weight: 800; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; color: var(--apoli-blog-navy); margin: 0 0 12px; overflow-wrap: break-word; } .apoli-blog .apoli-blog__fallback-link { font: inherit; color: var(--apoli-blog-navy); text-decoration: none; } .apoli-blog .apoli-blog__fallback-link:hover { color: var(--apoli-blog-navy); text-decoration: underline; } .apoli-blog__fallback-empty { font-size: 16px; color: var(--apoli-blog-ink-2); } /* ------------------------------------------------------------------ */ /* Адаптив */ /* ------------------------------------------------------------------ */ /* * Пороги заданы в TZ-verstka.html и проверяются на 375, 768, 1024 * и 1440 px. Ниже — ровно три требуемых порога плюс промежуточный * 1100 px из макета (он только поджимает сетку статьи). */ @media (max-width: 1100px) { .apoli-blog__artgrid { grid-template-columns: minmax(0, 1fr) 270px; gap: 34px; } .apoli-blog__artgrid--single { grid-template-columns: minmax(0, 1fr); } } /* * До 980 px: боковая колонка уходит под статью и перестаёт быть липкой, * вместо неё внутри статьи появляется блок призыва. Крупная карточка * перестаёт занимать две колонки: колонок остаётся одна-две, и * grid-column:span 2 в однополосной сетке дал бы пустую ячейку. */ @media (max-width: 980px) { .apoli-blog__artgrid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .apoli-blog__sticky { position: static; } .apoli-blog__mcta { display: block; } .apoli-blog__pagehead { padding: 32px 0 22px; } .apoli-blog .apoli-blog__card--feature { grid-column: span 1; } .apoli-blog__card--feature .apoli-blog__card-title { font-size: 20px; } .apoli-blog__card--feature .apoli-blog__card-text { font-size: 14.5px; } } /* * До 760 px: ряд рубрик перестаёт быть липким (на невысоком экране * липкая полоса съедает половину видимой области), таблицы уже * прокручиваются внутри своей рамки — это обеспечивает .apoli-blog__tablewrap * выше, здесь только уменьшается их минимальная ширина. */ @media (max-width: 760px) { .apoli-blog__wrap { padding: 0 16px; } .apoli-blog__cats { position: static; } .apoli-blog__cats .apoli-blog__wrap { gap: 6px; } .apoli-blog .apoli-blog__cat { font-size: 11.5px; padding: 8px 15px; } .apoli-blog__ctaband { padding: 24px 20px; gap: 18px; } .apoli-blog__ctaband-action { margin-left: 0; width: 100%; } .apoli-blog .apoli-blog__ctaband-action .apoli-blog__btn { display: flex; width: 100%; white-space: normal; text-align: center; } .apoli-blog__berater { padding: 26px 22px; gap: 20px; justify-content: center; text-align: center; } .apoli-blog__berater-photo { width: 140px; height: 140px; border-width: 8px; margin: 0 auto; } .apoli-blog__berater-name { font-size: 26px; } .apoli-blog__berater-contacts, .apoli-blog__berater-actions { justify-content: center; } .apoli-blog__berater-bio { text-align: left; } .apoli-blog__body h2 { font-size: 20px; } .apoli-blog__faq-title, .apoli-blog__related-title { font-size: 20px; } .apoli-blog__lead { font-size: 16.5px; } .apoli-blog__toc { padding: 18px 20px; } .apoli-blog__body table { min-width: 460px; } } /* * До 420 px: карточки в одну колонку, кнопки в столбик. Сетка * и так схлопывается через minmax(min(340px,100%),1fr), но явное * правило снимает зависимость от ширины контейнера. */ @media (max-width: 420px) { .apoli-blog__grid { grid-template-columns: 1fr; } .apoli-blog__berater-actions { flex-direction: column; width: 100%; } .apoli-blog .apoli-blog__berater-actions .apoli-blog__btn { display: flex; width: 100%; white-space: normal; text-align: center; } .apoli-blog__artmeta { gap: 8px; font-size: 12px; } .apoli-blog__crumbs { font-size: 11.5px; } .apoli-blog .apoli-blog__card { padding: 20px 18px 18px; } .apoli-blog__ctaband { padding: 20px 16px; } }