/* ========================================================= * assets/css/page-hero.css * * Общий «зелёный верх» посадочных страниц — шорткод [wf_page_hero] * (parts/page-hero-shortcode.php) и шаблон templates/page-hero-green.html. * * Цвета и высота шапки — из assets/css/tokens.css, своих литералов здесь нет. * Раскладка повторяет герой курса валют (.wf-cp-hero), но без привязки к * конкретной странице: класс на вешает wf_page_hero_body_class(). * =======================================================*/ /* --------------------------------------------------------- * Страница целиком * -------------------------------------------------------*/ /* Full-bleed герой шире контейнера ровно на ширину полосы прокрутки (100vw её считает, а доступная ширина — нет). Клипаем по горизонтали, чтобы не появлялся лишний горизонтальный скролл. `clip`, а не `hidden`: hidden создаёт скролл-контейнер и ломает position: sticky в шапке. */ html:has(body.wf-hero-page), body.wf-hero-page { overflow-x: clip; } /* Герой встаёт под прозрачную шапку — верхний отступ main обнуляем. Если шорткод стоит на обычном шаблоне (page.html), первая группа с заголовком и крошками прячется: они уже есть внутри героя. */ .wf-hero-page main, .wf-hero-page .entry-content { padding-top: 0 !important; margin-top: 0; } .wf-hero-page main > .wp-block-group:first-child:has(.wp-block-post-title) { display: none; } /* Редактор в плашке: аватар + имя. Аватар отдаёт get_avatar(), поэтому размер задаём и в CSS — иначе на медленной сети плашка дёргается. */ .wf-phero__reviewer { display: inline-flex; align-items: center; gap: 5px; /* Дата и редактор переносятся целиком, каждый своей строкой. Без этого на телефоне рвались и фраза, и само имя — «Sergii» вверху, «Tkachenko» внизу. */ white-space: nowrap; } /* Сама дата тоже неразрывна — иначе перенос уедет после «·». */ .wf-phero__badge > span:not(.wf-phero__dot):not(.wf-phero__reviewer) { white-space: nowrap; } .wf-phero__reviewer-ava { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px; } .wf-phero__reviewer-name { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; } .wf-phero__reviewer-name:hover { border-bottom-color: transparent; } /* --------------------------------------------------------- * Герой * -------------------------------------------------------*/ /* Full-bleed. Два подвоха разом, поэтому селектор с удвоенным классом: * * 1. Отрицательные margin не работают: WP для контейнера с layout=constrained * печатает `margin-left/right: auto !important` — перебивает margin-inline. * Поэтому ширина задаётся явно (при width > контейнера auto-маржины по * спецификации схлопываются в 0), а центрируем через left + transform. * * 2. Там же едет `max-width: 1170px` со специфичностью 0,1,0 — как у * одиночного .wf-phero, но печатается это правило НИЖЕ подключённых * стилей и потому выигрывает. Удвоенный класс (0,2,0) снимает вопрос; * !important не нужен. */ .wf-phero.wf-phero { position: relative; box-sizing: border-box; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; margin-bottom: 40px; /* Второе слагаемое — просвет между шапкой и крошками. 4px читались как «прилипло»: крошки начинались сразу под шапкой. */ padding-block: calc(var(--wf-header-h) + 20px) 48px; /* Боковые отступы — те же глобальные, что у .has-global-padding, чтобы область под колонку совпадала с остальной страницей. */ padding-inline: var(--wp--style--root--padding-left, 20px) var(--wp--style--root--padding-right, 20px); background: var(--wf-green); color: var(--wf-on-green); } /* Колонка героя = колонка контента: та же ширина, тот же центр. Свои padding-inline тут не нужны — они уже на .wf-phero, иначе текст уедет вправо относительно карточек ниже по странице. */ .wf-phero__inner { box-sizing: border-box; max-width: var(--wf-page-max); margin-inline: auto; } .wf-phero--center .wf-phero__inner { text-align: center; } .wf-phero--center .wf-phero__lead { margin-inline: auto; border-left: 0; padding-left: 0; } .wf-phero--center .wf-phero__stats { justify-content: center; } /* --- Хлебные крошки внутри героя --- */ .wf-phero__crumbs { margin-bottom: 24px; font-size: 12px; } .wf-phero__crumbs .wf-breadcrumbs-wrap { margin: 0; } .wf-phero__crumbs, .wf-phero__crumbs a, .wf-phero__crumbs span { color: var(--wf-on-green-muted); } .wf-phero__crumbs a:hover, .wf-phero__crumbs a:focus { color: var(--wf-on-green); text-decoration: underline; } /* --- Плашка «Оновлено … · перевірено редакцією» --- */ .wf-phero__badge { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; row-gap: 2px; margin: 0 0 8px; padding: 4px 12px; border: 1px solid rgba(175, 233, 164, 0.35); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--wf-green-bright); font-size: 12px; font-weight: 600; line-height: 1.3; } .wf-phero__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--wf-green-dot); box-shadow: 0 0 0 0 rgba(87, 227, 137, 0.7); animation: wf-phero-pulse 2s infinite; } @keyframes wf-phero-pulse { 0% { box-shadow: 0 0 0 0 rgba(87, 227, 137, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(87, 227, 137, 0); } 100% { box-shadow: 0 0 0 0 rgba(87, 227, 137, 0); } } /* --- Заголовок и лид --- */ .wf-phero__title { margin: 0 0 6px; color: var(--wf-on-green); font-size: clamp(28px, 3.8vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; } .wf-phero__lead { max-width: 900px; margin: 0 0 10px; padding-left: 16px; border-left: 3px solid rgba(175, 233, 164, 0.55); color: var(--wf-on-green-muted); font-size: 18px; line-height: 1.5; } .wf-phero__lead > :first-child { margin-top: 0; } .wf-phero__lead > :last-child { margin-bottom: 0; } .wf-phero__lead strong, .wf-phero__lead b { color: var(--wf-on-green); font-weight: 700; } /* ==текст== в атрибутах шорткода — акцент фирменным светло-зелёным */ .wf-phero__hl { background: none; color: var(--wf-green-bright); font-weight: 700; } .wf-phero__lead a { color: var(--wf-green-bright); text-decoration: underline; } /* --- Полоса показателей --- */ .wf-phero__stats { display: flex; flex-wrap: wrap; gap: 12px 44px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--wf-on-green-line); list-style: none; } .wf-phero__stat { display: flex; flex-direction: row; align-items: baseline; gap: 7px; min-width: 0; } .wf-phero__stat b { color: var(--wf-green-bright); font-size: 18px; font-weight: 800; line-height: 1.1; white-space: nowrap; } .wf-phero__stat span { color: var(--wf-on-green-faint); font-size: 12px; line-height: 1.35; } /* --------------------------------------------------------- * Адаптив * -------------------------------------------------------*/ @media (max-width: 980px) { .wf-phero.wf-phero { padding-block: calc(var(--wf-header-h) + 14px) 40px; margin-bottom: 24px; } .wf-phero__lead { font-size: 15px; margin-bottom: 12px; } .wf-phero__stats { gap: 12px 28px; } .wf-phero__stat b { font-size: 19px; } } @media (max-width: 560px) { .wf-phero.wf-phero { padding-block: calc(var(--wf-header-h) + 12px) 32px; } .wf-phero__badge { margin-bottom: 8px; font-size: 12px; } .wf-phero__title { margin-bottom: 8px; } .wf-phero__lead { padding-left: 12px; font-size: 14px; } /* Две колонки — иначе четыре показателя уезжают в четыре строки */ .wf-phero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding-top: 10px; } /* В половину экрана «значення + підпис» одной строкой не влезают — на телефоне возвращаем подпись под значение. */ .wf-phero__stat { flex-direction: column; align-items: flex-start; gap: 2px; } .wf-phero__stat b { font-size: 18px; white-space: normal; } } @media (prefers-reduced-motion: reduce) { .wf-phero__dot { animation: none; } }