/* ============================================================ Health ProtectorGuard (UnitedHealthcare) — стили страницы продукта. Перенос из Figma: фрейм «Desktop» (node 619:2176). Пока на странице десять блоков — «Герой» (node 720:2348), «Средняя скидка сети» (node 717:6312), «На примере» (node 669:338), «Сколько стоит год на программе» (node 634:3771), «Мини-статистика» (node 717:6254), «Где доступно» (node 670:1660), «Порядок действий» (node 720:5244), «Услуги и выплаты» (node 679:7267), «Один на один» (node 672:5832) и «FAQ» (node 670:5531). Остальные блоки макета добавляются следующими задачами. Брейкпоинты — утверждённые проектом (.memory-bank/ui-rules.md): Mobile ≤ 767px (макет 375) Tablet 768–1023 (макет 800) Desktop ≥ 1024px (макет 1440) Макет есть только для десктопа, поэтому планшет и мобильный собраны по тем же пропорциям: колонка контента с 600px ужимается по ширине экрана, кегли и отступы уменьшаются токенами ниже. Файл подключается поверх base.css / landing.css, поэтому все правила скоупятся классом .hpg (и .hpg-page на ) — как это сделано для главной в landing/css/main.css. Блок «Нейтрализация» гасит только то, что base.css навязывает элементам внутри страницы. Шрифт Hanken Grotesk объявлен в static/css/fonts.css. ============================================================ */ /* --- Токены ------------------------------------------------- Палитра — та же, что у главной и статей (landing/css/main.css). Геометрия и типографика — Desktop, значения сняты с макета. ----------------------------------------------------------- */ .hpg-page { /* палитра */ --c-primary: #e25c42; --c-white: #ffffff; --c-page: #fdf8f4; --c-surface: #f5efe9; --c-border: #e4dcd5; --c-muted: #8a817b; --c-body: #4a433d; --c-ink: #2a2420; --c-green: #2e8b6e; /* Штат под курсором на карте — тот же тёмный оттенок, что на главной; цвет читает общий landing/css/us-map.css. */ --c-hover: #c9462e; /* геометрия */ --pad-x: 120px; --pad-y: 96px; --col-w: 600px; --chart-w: 700px; /* полосы блока «Сколько стоит год» шире колонки текста */ --wide-w: 1024px; /* «Услуги и выплаты», переписка, ряд с формой и список FAQ */ /* типографика */ --fs-eyebrow: 22px; --lh-eyebrow: 30px; --fs-h1: 48px; /* заголовок героя — единственный h1 страницы */ --lh-h1: 58px; --fs-h2: 36px; --lh-h2: 44px; --fs-h4: 22px; /* заголовок карточки FAQ и формы записи */ --lh-h4: 30px; --fs-lead: 18px; --lh-lead: 28px; --fs-body: 16px; --lh-body: 24px; --fs-body-sm: 14px; --lh-body-sm: 20px; --fs-cap: 13px; --lh-cap: 18px; --fs-stat: 40px; /* метрики блока «Где доступно» */ --fs-stat-label: 14px; --lh-stat-label: 20px; --fs-example-value: 48px; /* крупные суммы блока «На примере» */ --lh-example-value: 58px; --fs-discount-value: 192px; /* «58%» блока «Средняя скидка сети» */ --lh-discount-value: 192px; background-color: var(--c-page); } @media (max-width: 1023px) { /* Tablet 800 */ .hpg-page { --pad-x: 40px; --pad-y: 72px; --fs-h1: 38px; --lh-h1: 46px; --fs-stat: 32px; --fs-example-value: 38px; --lh-example-value: 46px; --fs-discount-value: 120px; --lh-discount-value: 120px; } } @media (max-width: 767px) { /* Mobile 375 */ .hpg-page { --pad-x: 16px; --pad-y: 56px; --fs-eyebrow: 15px; --lh-eyebrow: 22px; --fs-h1: 30px; --lh-h1: 38px; --fs-h2: 26px; --lh-h2: 32px; --fs-h4: 18px; --lh-h4: 26px; --fs-lead: 16px; --lh-lead: 24px; --fs-body: 15px; --lh-body: 22px; --fs-body-sm: 14px; --lh-body-sm: 20px; --fs-cap: 12px; --lh-cap: 16px; --fs-stat: 28px; --fs-stat-label: 12px; --lh-stat-label: 16px; --fs-example-value: 30px; --lh-example-value: 36px; --fs-discount-value: 84px; --lh-discount-value: 88px; } } /* --- Нейтрализация ----------------------------------------- base.css задаёт глобальную типографику и отступы разделам (section { margin-top: 12rem }, h1/h2 в rem, p 2rem и т.д.). Внутри страницы они гасятся, дальше типографику задают классы. ----------------------------------------------------------- */ .hpg *, .hpg *::before, .hpg *::after { box-sizing: border-box; } .hpg section, .hpg article { margin: 0; padding: 0; overflow: visible; } .hpg h1, .hpg h2, .hpg h3, .hpg p, .hpg span, .hpg th, .hpg td { margin: 0; padding: 0; font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; text-align: inherit; } /*
    /
  1. — только у «Порядка действий»: список остаётся списком для скринридера (порядок шагов — это смысл, а не оформление), а браузерные отступ, маркер и margin у самого
      сняты, как и у остальных тегов выше. */ .hpg ul, .hpg ol { margin: 0; padding: 0; list-style: none; } .hpg li { margin: 0; } .hpg a { color: inherit; font-size: inherit; } .hpg img { display: block; max-width: 100%; object-fit: initial; object-position: initial; } .hpg button { font: inherit; color: inherit; background: none; border: 0; } /* base.css задаёт полям padding: 1.6rem и свою рамку. Для флажка 16×16 это смертельно: при box-sizing: border-box поле не может стать уже собственных полей, и квадрат раздувало до 31px. */ .hpg input { padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; transition: none; } /* ============================================================ Проявитель содержимого при скролле. Здесь только предсостояния — то, из чего элемент выходит. Само движение ведёт health-protector-guard.js через Web Animations: держать одну и ту же хореографию в двух местах нельзя, а задержки и лесенка всё равно считаются на ходу. Всё погашено под меткой [data-hpg-motion], которую ставит короткий скрипт в страницы. Нет JS — нет метки, и страница видна целиком: проявление это украшение, а не условие читаемости. [data-reveal-done] снимает предсостояние ровно в тот момент, когда за элемент берётся анимация: дальше кадрами правит она, а fill: backwards держит его спрятанным до своей задержки. ============================================================ */ [data-hpg-motion] .hpg [data-reveal]:not([data-reveal-done]) { opacity: 0; } /* Обычный выход — подъём. */ [data-hpg-motion] .hpg [data-reveal=""]:not([data-reveal-done]) { transform: translate3d(0, 14px, 0); } /* Реплики и стороны переписки приходят каждая со своего края. */ [data-hpg-motion] .hpg [data-reveal="left"]:not([data-reveal-done]) { transform: translate3d(-14px, 12px, 0); } [data-hpg-motion] .hpg [data-reveal="right"]:not([data-reveal-done]) { transform: translate3d(14px, 12px, 0); } /* Знак «×» между сторонами: ставится последним и коротким щелчком. */ [data-hpg-motion] .hpg [data-reveal="pop"]:not([data-reveal-done]) { transform: scale(0.72); } /* Черта раздёргивается от середины в обе стороны. */ .hpg [data-reveal="rule"] { transform-origin: 50% 50%; } [data-hpg-motion] .hpg [data-reveal="rule"]:not([data-reveal-done]) { transform: scaleX(0); } /* Рисунок гасится только прозрачностью: его проявляет маска, а если маски в браузере нет — проявитель откатывается на обычный подъём, и нужный transform приходит из самих кадров. */ /* Спокойный режим: содержимое всё так же выходит по мере чтения, но без сдвигов и щелчков — одной прозрачностью. Так же сделано в чат-форме подбора (landing/css/insurance-chat.css). */ @media (prefers-reduced-motion: reduce) { [data-hpg-motion] .hpg [data-reveal]:not([data-reveal-done]) { transform: none; } } /* --- Каркас -------------------------------------------------- */ .hpg { background-color: var(--c-page); color: var(--c-body); font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================================ Герой. Источник: Figma, node 720:2348. Первый экран страницы: заголовок и подводка слева, карандашный рисунок (семья у дома) справа, две кнопки — оформить сразу или попросить консультацию. Единственный h1 на странице — остальные заголовки блоков ниже это h2. Вторая кнопка в макете — без рамки и заливки, просто текст фирменным цветом с тем же полем клика, что у первой (те же px по вертикали и горизонтали) — так и перенесено, а не дорисована рамка «для симметрии»: в макете её нет, и на скриншоте её тоже не видно. Рисунок — тот же приём, что и у consult-call.webp в блоке «Один на один»: карандашная иллюстрация проявляется снизу вверх через маску ([data-reveal="draw"]), будто её дорисовывают. Текстовая колонка собирается быстрее, чем обычно на странице: шаг лесенки эйебrow → заголовок → подводка сокращён до 50ms (вместо 70), а кнопки идут следом со своей явной задержкой в 150ms — герой не должен тянуться, это первое, что видит читатель. Правка макета: ряд ограничен var(--wide-w) (1024px — тем же пределом, что «Услуги и выплаты», переписка и FAQ) и прижат к нижней границе секции (align-items: flex-end на обоих уровнях — и у самой секции, и у ряда), а не центрирован. Отступы сверху и снизу держит обычный padding: var(--pad-y) — те же 96px, что и у остальных блоков страницы; секция при этом не жёстче 600px (min-height, не height — см. правило ниже), а сверху остаётся столько места, сколько не занял контент, а не ровно 96px: в макете он тоже не по центру и не впритык к верху, а именно снизу от 600. Рисунок теперь не абсолютный: точный размер 442×295 и обычное место в ряду рядом с текстом, без просвета (gap: 0 — в макете колонка текста растягивается ровно до левого края картинки). Читаемость длинных строк при этом бережёт не ширина колонки, а max-width:600px у самой подводки — так же, как в остальных блоках страницы, только на уровне абзаца, а не всего блока: колонка теперь гибкая (flex: 1 1 0), и её итоговая ширина — то, что осталось от 1024px после вычета рисунка, а не фиксированная величина. ============================================================ */ .hpg .hpg-hero { display: flex; align-items: flex-end; justify-content: center; min-height: 600px; padding: var(--pad-y) var(--pad-x); background-color: var(--c-page); } .hpg .hpg-hero__inner { display: flex; align-items: flex-end; width: 100%; max-width: var(--wide-w); } /* flex: 1 1 0 — колонка забирает всё, что рисунок (уже флекс-элемент с точным размером) не занял в ряду шириной до 1024px. */ .hpg .hpg-hero__content { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; gap: 45px; } .hpg .hpg-hero__block { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; } .hpg .hpg-hero__headline { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; } .hpg .hpg-hero__eyebrow { color: var(--c-primary); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: 700; letter-spacing: 0.25em; } .hpg .hpg-hero__title { color: var(--c-ink); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; letter-spacing: -0.01em; } .hpg .hpg-hero__lead { max-width: 600px; color: var(--c-body); font-size: var(--fs-lead); line-height: var(--lh-lead); } .hpg .hpg-hero__actions { display: flex; align-items: center; gap: 16px; } .hpg .hpg-hero__button { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; padding: 15px 32px; border-radius: 8px; font-size: var(--fs-body); line-height: 22px; font-weight: 500; text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 160ms ease, transform 120ms ease; } .hpg .hpg-hero__button--primary { width: 250px; background-color: var(--c-primary); color: var(--c-white); } .hpg .hpg-hero__button--primary:hover { background-color: #d24f36; } .hpg .hpg-hero__button:active { transform: scale(0.98); } @media (prefers-reduced-motion: reduce) { .hpg .hpg-hero__button { transition: none; } } /* Точный размер из макета — 442×295, не резиновый: рисунок больше не тянется под высоту текста и не растёт с шириной экрана. Сжиматься ему тоже незачем: колонка текста рядом гибкая (flex: 1 1 0) и сама уступает первой, если ряду не хватает места, — тем же способом, что и раньше на странице (например, .hpg-consult__illustration отдаёт форме её 450px и живёт на оставшемся). object-fit: cover — на случай лёгкого расхождения пропорции (442:295 против 1536:1024 у файла), не для кадрирования. */ .hpg .hpg-hero__illustration { flex: 0 0 442px; width: 442px; height: 295px; object-fit: cover; } /* --- Планшет ----------------------------------------------------- Текст и рисунок делят ряд только на широком экране: на 800px гибкой колонке текста место найдётся, но рисунок с фиксированным размером — нет (442px из 1024 многовато для 800-й раскладки), и заголовок пошёл бы в четыре строки. Рисунок опускается под текст и держит собственный предел ширины — он подводка к заголовку, а не отдельная картина. ----------------------------------------------------------- */ @media (max-width: 1023px) { /* На стыке секция уже не 600px из макета: в колонке текст и рисунок и так занимают заметную высоту, а фиксированная планка сверху давала бы только пустое поле снизу. */ .hpg .hpg-hero { min-height: 0; } .hpg .hpg-hero__inner { flex-direction: column; align-items: center; gap: 48px; } .hpg .hpg-hero__content { /* В колонке flex: 1 1 0 больше не про раздел ширины с рисунком — это была настройка для ряда. Здесь content — просто обычный блок нужной ему высоты. */ flex: 0 0 auto; align-items: center; gap: 32px; width: 100%; } .hpg .hpg-hero__block { align-items: center; max-width: var(--col-w); text-align: center; } .hpg .hpg-hero__headline { align-items: center; } /* В колонке рисунок больше не должен быть буквально 450×300 — точный размер был условием ряда из макета. Здесь он снова резиновый и держит только предел ширины, как любая другая иллюстрация-подводка на странице. */ .hpg .hpg-hero__illustration { flex: 0 0 auto; width: 100%; max-width: 480px; height: auto; } } @media (max-width: 767px) { .hpg .hpg-hero__inner { gap: 32px; } .hpg .hpg-hero__content { gap: 24px; } .hpg .hpg-hero__block { gap: 20px; } .hpg .hpg-hero__actions { flex-direction: column; align-items: stretch; width: 100%; } .hpg .hpg-hero__button--primary { width: 100%; } .hpg .hpg-hero__illustration { max-width: 340px; } } /* ============================================================ Блок «Средняя скидка сети». Источник: Figma, node 717:6312. Первый экран страницы, перед «На примере» — одна огромная цифра вместо объяснений: сеть даёт скидку такого масштаба ещё до того, как читатель узнал, как считаются выплаты. Устройство нарочно самое простое на странице — фигура (число + подпись) и сноска под ней, — но простота работает на цифру, а не в ущерб ей. Движение — «выход штампом», а не подъём, как у остального контента: число выскакивает готовым результатом ([data-reveal="pop"] — тот же короткий щелчок с перелётом, что ставит знак «×» в блоке «Один на один»), а не выезжает по частям. Подпись и сноска идут следом обычным шагом группы (70ms). Число к тому же считается с нуля до 58% — тем же JS-счётчиком (discountCounter() в health-protector-guard.js), что ведёт диаграмму года и суммы блока «На примере». ============================================================ */ .hpg .hpg-discount { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--pad-y) var(--pad-x); background-color: var(--c-page); /* Редизайн (Figma, node 749:2697): слои фона снизу вверх, как в самом макете (там это заливки Solid → Pattern → Radial → Radial → Linear, сверху вниз в панели «Fill» — то есть в обратном порядке перекрытия): 1) сплошной var(--c-page) в основании (background-color); 2) плитка со знаком UnitedHealthcare (discount-watermark.svg — настоящий логотип из самой Figma-заливки, снят через download_assets; прозрачность 0.4 на каждой копии — как «Pattern 40%» у слоя в макете); 3-4) две радиальные виньетки поверх плитки, обе гасят её ОТ ЦЕНТРА К КРАЮ (сплошной цвет в середине, дальше плавно в прозрачность) — в макете это эллипс по пропорциям блока и более широкий круг, здесь то же самое двумя background-radial-gradient разной формы (50%×65% и 65%×50%), без второго, встречного градиента: проверено на скриншоте — пара «прозрачный→сплошной» и «сплошной→ прозрачный» гасят друг друга почти везде и плитка не видна вовсе, поэтому оставлен только вариант «гаснет от центра»; 5) верх/низ гаснут в сплошной фон обычным линейным градиентом. Вместе линейный и радиальные оставляют плитку видимой кольцом вокруг цифры, но не впритык к верху/низу секции — как в макете. Размер виньеток задан в процентах, а не в пикселях макета (720px): так они масштабируются вместе с блоком. На мобильном экране, где секция намного уже, фиксированные пиксели перекрыли бы весь узор целиком. */ background-image: linear-gradient(180deg, var(--c-page) 0%, transparent 15%, transparent 85%, var(--c-page) 100%), radial-gradient(65% 50% at center, var(--c-page) 40%, transparent 100%), radial-gradient(50% 65% at center, var(--c-page) 40%, transparent 100%), url('../images/health_protector_guard/discount-watermark.svg'); background-repeat: no-repeat, no-repeat, no-repeat, repeat; } .hpg .hpg-discount__block { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; } .hpg .hpg-discount__figure { display: flex; flex-direction: column; align-items: center; gap: 32px; color: var(--c-primary); } .hpg .hpg-discount__value { font-size: var(--fs-discount-value); line-height: var(--lh-discount-value); font-weight: 600; letter-spacing: -0.01em; /* Цифры считаются с нуля JS-ом (discountCounter); на такой крупной кегле пропорциональные цифры Hanken Grotesk почти не меняют ширину между кадрами счёта, и число не гуляет по центру. */ font-variant-numeric: tabular-nums; } .hpg .hpg-discount__label { font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: 0.02em; } .hpg .hpg-discount__caption { max-width: 420px; color: var(--c-muted); font-size: var(--fs-cap); line-height: var(--lh-cap); letter-spacing: 0.01em; } /* --- Планшет и мобильный --------------------------------------- Кегль числа ведут токены (--fs-discount-value), остальное — те же пропорции, что и в остальных блоках страницы. ----------------------------------------------------------- */ @media (max-width: 1023px) { .hpg .hpg-discount__block { gap: 24px; } .hpg .hpg-discount__figure { gap: 24px; } } @media (max-width: 767px) { .hpg .hpg-discount__block { gap: 20px; } .hpg .hpg-discount__figure { gap: 16px; } .hpg .hpg-discount__label { font-size: 20px; line-height: 26px; } .hpg .hpg-discount__caption { max-width: 320px; } } /* ============================================================ Блок «На примере». Источник: Figma, node 669:338. Первый блок страницы: прежде чем объяснять условия программы, ей показывают её работу на одном случае. Устройство простое — заголовок, четыре цифры счёта и полоса «из чего он складывается» — но именно из-за простоты движение здесь держит весь вес премиальности: ничего не появляется просто так, каждый слой выходит на подготовленное предыдущим место. Хореография (все тайминги — задержки старта, не длительности): 0ms → шапка (эйебrow/заголовок/подводка), обычным проявителем 0-270 → четыре цифры счёта, лесенкой по 90ms, и тут же сами суммы считаются с нуля до значения из разметки (JS, exampleCounters() в health-protector-guard.js) — то же исчисление, что ведёт диаграмму года 360ms → подпись «ИЗ ЧЕГО СКЛАДЫВАЮТСЯ…» 420-580 → три сегмента полосы вытягиваются от нуля до своей доли, каждый на 900ms и с своей задержкой — оттого и растут не разом, а один за другим, как будто сумма складывается на глазах; подписи внутри проступают через overflow: hidden по мере роста, а не появляются вдруг 520ms → сноска Первые два яруса ведёт общий проявитель (data-reveal), рост полосы — отдельный CSS-переход, включаемый тем же [data-reveal-done], который проявитель ставит на .hpg-example__bar: явную задержку самого перехода несут селекторы :nth-child ниже, а не JS. Без JS всё, что для JS собиралось (обнуление сумм, нулевая ширина сегментов), гасится отсутствием метки [data-hpg-motion] — блок показывает готовые числа и полосу целиком, как обычная страница. Доли полосы посчитаны от макетных пикселей на раме 1024px (699 / 200 / 125 — скидка сети растягивается, план и «вы» фиксированы), переведены в проценты ширины: 68.26% / 19.53% / 12.21%, минус своя доля от 8px просвета между сегментами (см. .hpg-example__segment--* ниже). Так пропорция макета держится на любой ширине блока, а не только на исходных 1024px. ============================================================ */ .hpg .hpg-example { display: flex; flex-direction: column; align-items: center; gap: 64px; padding: var(--pad-y) var(--pad-x); /* «from-85%» из Figma (node 669:338): фон остаётся var(--c-page) до 85% высоты блока, затем уходит в var(--c-surface) — тот же тон, каким начинается сплошная подложка «Порядка действий» ниже. */ background-image: linear-gradient(to bottom, var(--c-page) 85%, var(--c-surface) 100%); background-color: var(--c-page); } .hpg .hpg-example__head { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: var(--col-w); text-align: center; } .hpg .hpg-example__headline { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } .hpg .hpg-example__body { display: flex; flex-direction: column; align-items: center; gap: 64px; width: 100%; max-width: var(--wide-w); } /* --- Строка счёта --------------------------------------------- Четыре суммы через тонкие вертикальные черты, поровну по ширине ряда. Черты не проявляются отдельно — они разметка, а не содержание, и вниманием читателя не торгуют. ----------------------------------------------------------- */ .hpg .hpg-example__stats { display: flex; align-items: center; justify-content: space-between; width: 100%; } .hpg .hpg-example__stat { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; white-space: nowrap; } .hpg .hpg-example__stat-value { color: var(--c-body); font-size: var(--fs-example-value); line-height: var(--lh-example-value); font-weight: 600; letter-spacing: -0.01em; /* Числа считаются с нуля JS-ом (exampleCounters); ширина у моноширинных цифр Hanken Grotesk почти не гуляет между кадрами счёта, поэтому соседние суммы и черты не дрожат по ходу подсчёта. */ font-variant-numeric: tabular-nums; } .hpg .hpg-example__stat-value--accent { color: var(--c-primary); } .hpg .hpg-example__stat-label { color: var(--c-muted); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); font-weight: 700; letter-spacing: 0.02em; } .hpg .hpg-example__divider { align-self: stretch; flex: 0 0 auto; width: 1px; border-radius: 1px; background-color: var(--c-border); } /* --- Состав счёта ----------------------------------------------- Подпись и полоса из трёх сегментов: скидка сети (растягивается), выплата по плану и доля клиента — обе фиксированной доли, как в макете. Текст сегмента обрезается вместе с шириной при росте, поэтому подписи внутри не нужно прятать отдельно. ----------------------------------------------------------- */ .hpg .hpg-example__breakdown { display: flex; flex-direction: column; gap: 16px; width: 100%; } .hpg .hpg-example__composition-label { color: var(--c-muted); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); font-weight: 700; letter-spacing: 0.02em; } .hpg .hpg-example__bar { display: flex; /* Просвет между сегментами — 8px, как в макете. Сам контейнер уже не обрезает и не скругляет: с просветом между кусками через него было бы видно квадратные внутренние углы, поэтому скругление и обрезка переехали на каждый сегмент отдельно. */ gap: 8px; width: 100%; height: 52px; } .hpg .hpg-example__segment { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0 12px; overflow: hidden; border-radius: 8px; color: var(--c-muted); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; transition: width 900ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 500ms ease; } /* Доли по-прежнему считаются от макетной рамы 1024px (699 / 200 / 125), но теперь минус свои 8px просвета — иначе три сегмента с двумя просветами были бы на 16px шире самой полосы. Просвет разнесён по сегментам пропорционально их доле: 16px × (699|200|125)/1024. */ .hpg .hpg-example__segment--discount { width: calc(68.26% - 10.92px); background-color: var(--c-surface); color: var(--c-muted); } .hpg .hpg-example__segment--plan { width: calc(19.53% - 3.13px); background-color: #fbeae3; color: var(--c-primary); } .hpg .hpg-example__segment--you { width: calc(12.21% - 1.95px); background-color: var(--c-primary); color: var(--c-white); } /* Сегменты растут по очереди, а не разом: у каждого своя задержка. Гасит их проявитель — как только он отмечает .hpg-example__bar сделанным ([data-reveal-done]), правило ниже перестаёт держать сегменты нулевыми, и они уходят в переход, отсчитывая уже свою собственную задержку. */ .hpg .hpg-example__bar .hpg-example__segment:nth-child(1) { transition-delay: 420ms; } .hpg .hpg-example__bar .hpg-example__segment:nth-child(2) { transition-delay: 500ms; } .hpg .hpg-example__bar .hpg-example__segment:nth-child(3) { transition-delay: 580ms; } [data-hpg-motion] .hpg .hpg-example__bar:not([data-reveal-done]) .hpg-example__segment { width: 0%; opacity: 0; } .hpg .hpg-example__footnote { width: 100%; color: var(--c-muted); font-size: var(--fs-cap); line-height: var(--lh-cap); letter-spacing: 0.01em; text-align: center; } @media (prefers-reduced-motion: reduce) { .hpg .hpg-example__segment { transition: none; } } /* --- Планшет --------------------------------------------------- */ @media (max-width: 1023px) { .hpg .hpg-example { gap: 48px; } .hpg .hpg-example__head { gap: 24px; } .hpg .hpg-example__headline { gap: 20px; } .hpg .hpg-example__body { gap: 48px; } } /* --- Мобильный --------------------------------------------------- Четыре цифры в ряд на 343px не читаются — сетка 2×2 без вертикальных черт (в двух рядах они уже ничего не разделяют, только режут строки). ----------------------------------------------------------- */ @media (max-width: 767px) { .hpg .hpg-example { gap: 40px; } .hpg .hpg-example__head { gap: 20px; } .hpg .hpg-example__headline { gap: 12px; } .hpg .hpg-example__body { gap: 40px; } .hpg .hpg-example__stats { display: grid; /* minmax(0, 1fr), а не голое 1fr: у голого колонка не может стать уже своего минимального содержимого, и более длинная подпись («СЧЁТ ЗА ИССЛЕДОВАНИЕ» против «ВАШИ РАСХОДЫ») растягивала свою колонку шире соседней — сетка 2×2 переставала быть 2×2 на вид. */ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; column-gap: 16px; } .hpg .hpg-example__divider { display: none; } .hpg .hpg-example__bar { height: 44px; } .hpg .hpg-example__segment { padding: 0 8px; font-size: 12px; line-height: 16px; } } /* ============================================================ Блок «Порядок действий». Источник: Figma, node 720:5244. Стоит между «Где доступно» и «Услуги и выплаты» — прежде чем показать суммы по каждой услуге, страница показывает, откуда вообще берётся выплата: четыре шага от обращения за помощью до сетевой скидки. Соединительная черта одна на все четыре шага и рисуется не поштучно (кружок + отрезок в каждом шаге, как в макете), а одним элементом на всю ширину секции — в том числе за пределами колонки в 1024px, как в макете: там линия тоже проведена через боковые поля до самого края кадра (ноды 726:5420 и 726:5422), а не обрывается у первого и последнего кружка. .hpg-steps__line лежит в .hpg-steps__body (а не прямо в секции): так «top» кружков считается от начала самой линии шагов, а не от высоты шапки, которая может стать другой в любой локали. Смещение до истинного края секции — calc(-1 * var(--pad-x)): .hpg-steps__body уже стоит вплотную к внутреннему краю паддинга, поэтому ровно минус паддинг и даёт кадр целиком. Сами кружки — заливка CSS, а не картинка: обычный цветной круг, перерисовывать его файлом незачем. ============================================================ */ .hpg .hpg-steps { display: flex; flex-direction: column; align-items: center; gap: 64px; padding: var(--pad-y) var(--pad-x); /* Тот же приём, что у блока «На примере»: до 85% высоты фон остаётся var(--c-page), затем уходит в var(--c-surface) — ровно тот тон, каким начинается сплошной фон «Услуги и выплаты» сразу под этим блоком. */ background-image: linear-gradient(to bottom, var(--c-page) 85%, var(--c-surface) 100%); background-color: var(--c-page); } .hpg .hpg-steps__head { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: var(--col-w); text-align: center; } .hpg .hpg-steps__headline { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } /* Обёртка нужна только затем, чтобы соединительная линия точно знала, от какой точки её позиционировать (см. комментарий блока выше). */ .hpg .hpg-steps__body { position: relative; width: 100%; } .hpg .hpg-steps__timeline { display: flex; width: 100%; max-width: var(--wide-w); margin: 0 auto; } .hpg .hpg-steps__line { position: absolute; left: calc(-1 * var(--pad-x)); right: calc(-1 * var(--pad-x)); /* Половина высоты кружка (24px) — линия идёт точно по его центру. */ top: 12px; height: 4px; border-radius: 2px; background-color: var(--c-border); } .hpg .hpg-steps__step { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; gap: 32px; } .hpg .hpg-steps__marker { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } /* Поверх .hpg-steps__line — общая черта проходит у кружка ровно по центру, а не под ним. */ .hpg .hpg-steps__dot { position: relative; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background-color: var(--c-primary); } .hpg .hpg-steps__label { color: var(--c-muted); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); font-weight: 700; letter-spacing: 0.02em; } .hpg .hpg-steps__text { max-width: 250px; color: var(--c-body); font-size: var(--fs-lead); line-height: var(--lh-lead); } /* --- Планшет и мобильный ----------------------------------------- Четыре колонки в ряд на 800px и тем более на 375px не читаются: длинные шаги (03 и 04) сжались бы до пары слов в строке. Соединительная черта в макете рассчитана на горизонтальный ряд и своего варианта для сетки/колонки не имеет — здесь она просто гасится. ----------------------------------------------------------- */ @media (max-width: 1023px) { .hpg .hpg-steps { gap: 48px; } .hpg .hpg-steps__head { gap: 24px; } .hpg .hpg-steps__headline { gap: 20px; } .hpg .hpg-steps__line { display: none; } .hpg .hpg-steps__timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } .hpg .hpg-steps__text { max-width: none; } } @media (max-width: 767px) { .hpg .hpg-steps { gap: 40px; } .hpg .hpg-steps__head { gap: 20px; } .hpg .hpg-steps__timeline { grid-template-columns: 1fr; gap: 32px; } } /* ============================================================ Блок «Услуги и выплаты». Источник шапки: Figma, node 679:7267. Источник таблицы: «Таблица» (node 704:5735) и «Таблица (hover)» (node 704:5823). Сетка таблицы — четыре равных колонки с просветами по 8px: названия услуг и три плана. Переключатель отдельной колонки больше не занимает — он переехал в первую ячейку шапки (см. .hpg-services__switch-cell ниже). В макете блок шириной 1200 и колонка выходит 296px (296×4 + 8×3 = 1200); здесь блок ограничен 1024px (--wide-w, как переписка и FAQ), и колонка сжимается до 250px. Колонки заданы долями, а не пикселями, поэтому пропорция макета держится при любой ширине. Строка — отдельный элемент со своей сеткой из тех же пяти колонок, а не ряд ячеек в общем гриде. Это стоит повторения template-columns, но даёт главное: наведение на ячейку видно всей строке обычным .hpg-services__row:hover, без JS и без индексов в разметке. Правка фона (нода 704:4823): секция теперь заливается var(--c-surface) вместо var(--c-page), а панель сноски — наоборот, var(--c-page) вместо var(--c-surface). Раньше подложка была тёплой на общем фоне страницы, теперь общий фон сам стал подложкой, а светлая панель выделяется на нём как более яркое пятно. ============================================================ */ .hpg .hpg-services { display: flex; flex-direction: column; align-items: center; padding: var(--pad-y) var(--pad-x); background-color: var(--c-surface); } .hpg .hpg-services__inner { display: flex; flex-direction: column; align-items: center; gap: 64px; width: 100%; max-width: var(--wide-w); } .hpg .hpg-services__head { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: var(--col-w); text-align: center; } .hpg .hpg-services__headline { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } /* ============================================================ Таблица. Цвет текста ячеек берётся не из правил на самих элементах, а из наследуемых переменных --ink и --sub. Так подсветка под курсором собирается из трёх слоёв, и каждый следующий перебивает предыдущий просто потому, что объявлен ближе к тексту, — специфичность селекторов в этом не участвует вовсе: таблица → всё гаснет до --c-border, когда курсор на любой ячейке строка → строка под курсором возвращается к обычным цветам ячейка → сама ячейка под курсором уходит в фирменный оранжевый Заголовок колонки лежит в другой строке, поэтому его через наследование не достать: он подсвечивается отдельным правилом с :has(), которое находит его по номеру ребёнка (порядок детей в шапке и в строке совпадает). ============================================================ */ .hpg .hpg-services__table { --ink: var(--c-body); --sub: var(--c-muted); --switch-on: var(--c-primary); /* Цвет кнопок «Оформить»: не завязан на --ink/--sub напрямую, чтобы у кнопки под курсором был свой, более выразительный отклик — заливка, а не просто смена цвета текста (см. .hpg-services__cta:hover ниже). В покое текст --c-muted — тот же тон, что у подписи услуги. */ --cta-ink: var(--c-muted); --cta-border: var(--c-border); --pad-block: 32px; position: relative; width: 100%; padding-block: var(--pad-block); } /* Четыре черты — по правой границе каждой из четырёх колонок: перед Select, между Select и Preferred, между Preferred и Premier, и справа от Premier (край блока). Раньше линий было две — они обнимали только три колонки с суммами; в новом макете разделена уже вся таблица. Считаются по той же сетке — колонка (100% − 3 просвета)/4, столько-то колонок пройдено плюс половина просвета до соседней. По вертикали черта живёт ровно по содержимому таблицы, а не по всей её коробке: отступ сверху и снизу на то и отступ, чтобы оставаться пустым. Отсюда общая переменная — разъехаться этим двум величинам нельзя. */ .hpg .hpg-services__rule { position: absolute; top: var(--pad-block); bottom: var(--pad-block); width: 1px; border-radius: 1px; background-color: var(--c-border); } .hpg .hpg-services__rule--1 { left: calc((100% - 24px) / 4 + 4px); } .hpg .hpg-services__rule--2 { left: calc((100% - 24px) / 2 + 12px); } .hpg .hpg-services__rule--3 { left: calc((100% - 24px) / 4 * 3 + 20px); } .hpg .hpg-services__rule--4 { left: 100%; } /* --- Строка -------------------------------------------------- Просветы между строками — margin, а не gap: при сворачивании «непопулярных» услуг строка уезжает в нулевую высоту вместе со своим отступом, а gap соседей анимировать нечем. ----------------------------------------------------------- */ .hpg .hpg-services__row { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 8px; min-height: 42px; } .hpg .hpg-services__row + .hpg-services__row { margin-top: 16px; } /* Строки с подписью под суммой выше на 6px — как в макете. */ .hpg .hpg-services__row--tall { min-height: 48px; } /* Шапка: 64px и лишний пиксель под ней — в макете первая группа стоит на 81px, то есть 64 + 17. */ .hpg .hpg-services__row--head { min-height: 64px; margin-bottom: 1px; } /* --- Зона наведения ------------------------------------------ Всё, на что можно навести — название плана, название услуги, ячейка с суммой, — растягивается на всю свою клетку сетки и вдобавок выходит за неё: на 8px вверх и вниз (это половина просвета между строками с каждой стороны) и на 4px по бокам (половина просвета между колонками). Отрицательный внешний отступ ровно гасит внутренний, поэтому в раскладке не меняется ничего: элемент занимает те же координаты, что и раньше, но ловит курсор в полтора раза большей площадью. Соседние зоны сходятся ровно посередине просвета и не перекрываются. Без этого поймать подсветку можно было только по самим буквам: строка высотой 42px отдавала под курсор 24px текста, а остальное было мёртвой зоной. ----------------------------------------------------------- */ .hpg .hpg-services__plan, .hpg .hpg-services__label, .hpg .hpg-services__cell, .hpg .hpg-services__blank { align-self: stretch; padding: 8px 4px; margin: -8px -4px; } /* Первая колонка крайняя слева, расширять её туда некуда. */ .hpg .hpg-services__label { margin-left: 0; padding-left: 0; } /* Пустышки в полосах групп. Своего содержимого у них нет — они лишь продолжают колонку через полосу группы, чтобы и подсветка, и клик не обрывались на «ДИАГНОСТИКЕ» и «БОЛЬНИЦЕ». Ссылка та же, что у цифр, но от клавиатуры и скринридера пустышка скрыта (tabindex="-1" и aria-hidden в разметке): текста в ней нет, и в обходе по табу она была бы просто немой остановкой. */ .hpg .hpg-services__blank { display: block; } /* --- Названия планов ----------------------------------------- Ссылка, а не заголовок: по задаче нажатие на название плана ведёт в чат оформления так же, как нажатие на любую из его сумм. ----------------------------------------------------------- */ .hpg .hpg-services__plan { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; text-decoration: none; } .hpg .hpg-services__plan-name { color: var(--ink); font-size: 28px; line-height: 36px; font-weight: 600; transition: color 260ms ease; } .hpg .hpg-services__plan-desc { color: var(--sub); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); transition: color 260ms ease; } /* --- Подписи услуг и заголовки групп ------------------------- */ .hpg .hpg-services__label { display: flex; align-items: center; color: var(--ink); font-size: var(--fs-body); line-height: var(--lh-body); transition: color 260ms ease; } .hpg .hpg-services__group { color: var(--sub); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); transition: color 260ms ease; } /* --- Ячейка с суммой ----------------------------------------- Ссылка, а не текст: по задаче нажатие на любую цифру ведёт к оформлению. Кликается только сама ячейка, подпись услуги слева остаётся текстом. ----------------------------------------------------------- */ .hpg .hpg-services__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: stretch; text-decoration: none; } .hpg .hpg-services__value { color: var(--ink); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 500; white-space: nowrap; transition: color 260ms ease; } .hpg .hpg-services__value--text { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 400; } .hpg .hpg-services__caption { color: var(--sub); font-size: var(--fs-cap); line-height: var(--lh-cap); letter-spacing: 0.01em; white-space: nowrap; transition: color 260ms ease; } /* --- Строка с кнопками ----------------------------------------- Новая строка (node 726:5732), под последней услугой. Отступ сверху у неё больше, чем между обычными строками (32px вместо 16px) — как в макете; побеждает общий .hpg-services__row + .hpg-services__row по порядку в файле, при той же специфичности (два класса против двух). ----------------------------------------------------------- */ .hpg .hpg-services__row.hpg-services__row--cta { margin-top: 32px; } /* Кнопка — своя ссылка на клетку сетки, а не растянутая зона наведения: в отличие от сумм и названий планов у неё есть видимая рамка, так что расширять зону незачем. 200×52 и центр колонки — как в макете. */ .hpg .hpg-services__cta { display: flex; align-items: center; justify-content: center; justify-self: center; width: 200px; max-width: 100%; height: 52px; border: 1px solid var(--cta-border); border-radius: 12px; background-color: transparent; color: var(--cta-ink); font-size: var(--fs-body); line-height: 22px; font-weight: 500; text-align: center; text-decoration: none; transition: color 260ms ease, border-color 260ms ease, background-color 260ms ease; } /* --- Подсветка под курсором ---------------------------------- Только для настоящего hover-указателя: на тач-экране наведения не бывает, а залипшая после тапа подсветка гасила бы половину таблицы. ----------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { /* 1. Курсор на ячейке, на названии плана, на названии услуги или на кнопке «Оформить» — вся таблица уходит в тон черты, кнопки в том числе (--cta-ink гаснет тем же движением, что --ink/--sub; рамке кнопки гаснуть некуда — она и так --c-border). */ .hpg .hpg-services__table:has(.hpg-services__cell:hover), .hpg .hpg-services__table:has(.hpg-services__plan:hover), .hpg .hpg-services__table:has(.hpg-services__blank:hover), .hpg .hpg-services__table:has(.hpg-services__label:hover), .hpg .hpg-services__table:has(.hpg-services__cta:hover) { --ink: var(--c-border); --sub: var(--c-border); --switch-on: var(--c-border); --cta-ink: var(--c-border); } /* 1а. Курсор на самой кнопке — не просто оттенок текста, а полная заливка: фон и рамка фирменным оранжевым, буквы белые. Задано обычными свойствами (не через --cta-ink), поэтому по специфичности перебивает и состояние покоя, и подсветку колонки ниже — какая бы из них ни была активна, кнопка под курсором всегда выглядит так. */ .hpg .hpg-services__cta:hover { background-color: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); } /* 2. Строка под курсором возвращает себе обычные цвета — кнопке тоже, на случай, если курсор в строке с кнопками, но не на самой кнопке. Шапка из этого правила исключена намеренно: когда курсор стоит на названии плана, он физически внутри шапки, и без :not() она возвращала бы обычный цвет всем трём названиям сразу — вместо одного оранжевого получалось бы три тёмных. Строки-заголовки групп исключены по той же причине: курсор проходит через них, ведя колонку сверху вниз, и подпись группы не должна на это отзываться. */ .hpg .hpg-services__row:not(.hpg-services__row--head):not(.hpg-services__row--group):hover { --ink: var(--c-body); --sub: var(--c-muted); --cta-ink: var(--c-muted); } /* 3. Сама ячейка под курсором — фирменным цветом, вместе с подписью. */ .hpg .hpg-services__cell:hover { --ink: var(--c-primary); --sub: var(--c-primary); } /* 4. Курсор на названии услуги — загорается вся её строка: и само название, и все три суммы. Зеркало правила для названия плана, только там колонка, а здесь строка. Спор идёт с правилом 2, которое на ту же строку ставит обычные цвета. Поэтому у обоих правил намеренно одинаковый вес (0,5,0) — отсюда и лишний с виду :not() ниже, — а исход решает порядок в файле: это правило стоит позже и побеждает. Убрать :not() значит проиграть спор и снова получить тёмную строку вместо оранжевой. */ .hpg .hpg-services__row:not(.hpg-services__row--head):has(.hpg-services__label:hover) { --ink: var(--c-primary); --sub: var(--c-primary); } /* Заголовок колонки и её кнопка «Оформить», в которой стоит курсор. Оба в других строках, до них наследование не дотягивается, поэтому ищем по номеру ребёнка — тому же, что и у ячейки под курсором. */ .hpg .hpg-services__table:has(.hpg-services__cell:nth-child(2):hover) .hpg-services__row--head > *:nth-child(2), .hpg .hpg-services__table:has(.hpg-services__cell:nth-child(2):hover) .hpg-services__row--cta > *:nth-child(2), .hpg .hpg-services__table:has(.hpg-services__cell:nth-child(3):hover) .hpg-services__row--head > *:nth-child(3), .hpg .hpg-services__table:has(.hpg-services__cell:nth-child(3):hover) .hpg-services__row--cta > *:nth-child(3), .hpg .hpg-services__table:has(.hpg-services__cell:nth-child(4):hover) .hpg-services__row--head > *:nth-child(4), .hpg .hpg-services__table:has(.hpg-services__cell:nth-child(4):hover) .hpg-services__row--cta > *:nth-child(4) { --ink: var(--c-primary); --sub: var(--c-primary); --cta-ink: var(--c-primary); --cta-border: var(--c-primary); } /* Курсор на названии плана, на пустышке в полосе группы (она продолжает ту же колонку) или на самой кнопке «Оформить» — загорается вся колонка: название, все суммы под ним и кнопка внизу. Правило то же по устройству, только наоборот: ищем не заголовок по ячейке, а ячейки по заголовку. Селектор задевает и саму шапку (она тоже .hpg-services__row), так что название плана красится этим же правилом, а строку с кнопками — так же, как и остальные. */ .hpg .hpg-services__table:has(> .hpg-services__row > *:nth-child(2):is(.hpg-services__plan, .hpg-services__blank, .hpg-services__cta):hover) .hpg-services__row > *:nth-child(2), .hpg .hpg-services__table:has(> .hpg-services__row > *:nth-child(3):is(.hpg-services__plan, .hpg-services__blank, .hpg-services__cta):hover) .hpg-services__row > *:nth-child(3), .hpg .hpg-services__table:has(> .hpg-services__row > *:nth-child(4):is(.hpg-services__plan, .hpg-services__blank, .hpg-services__cta):hover) .hpg-services__row > *:nth-child(4) { --ink: var(--c-primary); --sub: var(--c-primary); --cta-ink: var(--c-primary); --cta-border: var(--c-primary); } } /* --- Переключатель --------------------------------------------- Раньше сидел отдельной, пятой колонкой справа от Premier, дорожка над подписью. В новом макете (node 726:5721) он переехал в первую ячейку шапки — туда, где раньше был пустой
      над названиями услуг — и лёг в один ряд с подписью, а не над ней. */ .hpg .hpg-services__switch-cell { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; } /* Сам чекбокс невидим — переключатель рисуют дорожка и бегунок, связанные с ним через