/* ============================================================ Averon Insurance — стили главной страницы. Секции страницы: Hero → Products → Metrics → Stories. Hero собран по отдельному макету (Figma, node 513:2226), остальные — по фреймам «Desktop» / «Tablet» / «Mobile» (nodes 154:1712, 154:1717, 154:1722). Брейкпоинты — те же, что у страниц статей (article.css): Mobile ≤ 767px (макет 360) Tablet 768–1023 (макет 768) Desktop ≥ 1024px (макет 1920, контент по сетке 1440) ВАЖНО: файл подключается поверх base.css / landing.css, поэтому все правила скоупятся классом .home (и .home-page на ). Собственных глобальных сбросов файл не содержит — блок «Нейтрализация» гасит только то, что base.css навязывает элементам внутри страницы. Шрифт Hanken Grotesk объявлен в static/css/fonts.css. ============================================================ */ /* --- Токены ------------------------------------------------- Палитра совпадает с токенами статей (landing/css/article.css). Геометрия и типографика — Desktop. ----------------------------------------------------------- */ .home-page { /* палитра */ --c-primary: #e25c42; --c-hover: #c9462e; --c-tint: #fbeae3; --c-white: #ffffff; --c-page: #fdf8f4; --c-surface: #f5efe9; --c-border: #e4dcd5; --c-muted: #8a817b; --c-body: #4a433d; --c-caption: #615a53; /* геометрия */ --pad-x: 120px; --pad-x-stories: 120px; --pad-y-stories: 96px; --gap-stories: 64px; --card-pad: 24px; --card-radius: 16px; --gap-card: 16px; --avatar: 50px; --quote-size: 24px; /* типографика */ --fs-h1: 48px; --lh-h1: 58px; --fs-h2: 36px; --lh-h2: 44px; --fs-lead: 18px; --lh-lead: 28px; --fs-body: 16px; --lh-body: 24px; --fs-cap: 13px; --lh-cap: 18px; --fs-btn: 16px; --lh-btn: 22px; --fs-eyebrow: 22px; --lh-eyebrow: 30px; --fs-stat: 40px; --fs-stat-label: 14px; --lh-stat-label: 20px; background-color: var(--c-page); } @media (max-width: 1023px) { /* Tablet 768 */ .home-page { --pad-x: 40px; --pad-x-stories: 40px; --pad-y-stories: 72px; --gap-stories: 48px; --avatar: 45px; --quote-size: 20px; --fs-h1: 36px; --lh-h1: 44px; --fs-h2: 28px; --lh-h2: 36px; --fs-lead: 17px; --lh-lead: 26px; --fs-body: 15px; --lh-body: 22px; --fs-cap: 12px; --lh-cap: 16px; --fs-btn: 15px; --lh-btn: 22px; --fs-eyebrow: 20px; --fs-stat: 32px; } } @media (max-width: 767px) { /* Mobile 360 */ .home-page { --pad-x: 20px; --pad-x-stories: 40px; --pad-y-stories: 56px; --gap-stories: 40px; --avatar: 40px; --quote-size: 18px; --fs-h1: 28px; --lh-h1: 34px; --fs-h2: 22px; --lh-h2: 28px; --fs-lead: 16px; --lh-lead: 24px; --fs-body: 14px; --lh-body: 20px; --fs-cap: 11px; --lh-cap: 14px; --fs-btn: 14px; --lh-btn: 18px; --fs-eyebrow: 18px; --fs-stat: 28px; --fs-stat-label: 12px; --lh-stat-label: 16px; } } /* --- Нейтрализация глобальных стилей ------------------------ base.css задаёт элементам собственные размеры и отступы (section { margin-top: 12rem }, h1/h2 в rem, p 2rem и т.д.). Внутри главной они гасятся, дальше типографику задают классы. ----------------------------------------------------------- */ .home *, .home *::before, .home *::after { box-sizing: border-box; } .home section, .home header, .home footer, .home article { margin: 0; padding: 0; overflow: visible; } .home h1, .home h2, .home h3, .home p, .home span { margin: 0; padding: 0; font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; } .home a { color: inherit; font-size: inherit; text-decoration: none; } .home img { display: block; max-width: 100%; object-fit: initial; object-position: initial; } /* --- Каркас -------------------------------------------------- */ .home { 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; } /* Заголовочный блок секции: eyebrow + заголовок + подводка. */ .home .home__block { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; text-align: center; } .home .home__eyebrow { color: var(--c-primary); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: 700; letter-spacing: 0.25em; } .home .home__title { color: var(--c-body); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; letter-spacing: -0.005em; } .home .home__lead { color: var(--c-body); font-size: var(--fs-lead); line-height: var(--lh-lead); } /* ============================================================ Hero — «поле сравнения». Источник: Figma, node 513:2226. Идея: страховых много и все приличные, поэтому фон — плотная толпа их марок; Averon расчищает в ней место и ставит туда единственный вопрос читателя. Расчистка сделана вырезом в поле, а не накладкой поверх, — см. комментарий в разметке (landing/templates/landing/main.html). Раньше логотипы страховых были ещё и бегущей лентой сразу под героем (блок Company) — она убрана вместе со старым героем: поле говорит то же самое и сильнее. Слои (см. там же): .hero2__field гаснет на скролле → .hero2__well держит маску-вырез → .hero2__parallax отстаёт от прокрутки → ряды едут. Ряд — один элемент с повторяющимся по горизонтали спрайтом на все логотипы (scripts/build_hero_carrier_strip.py). Чтобы шов не было видно, элемент шире контейнера ровно на ширину плитки и за круг сдвигается ровно на неё же: узор непрерывен, а кадр в конце круга совпадает с кадром в начале. Скорость, фаза и плотность каждого ряда приходят инлайном из landing/views.py (hero_field_rows). Скорость и фаза — доли, а не секунды: длительность круга живёт здесь, в --f-cycle, и меняется по брейкпоинтам вместе с размером плитки. ============================================================ */ .home .hero2 { /* --- поле --- */ --f-set: 3638px; /* ширина плитки-спрайта: 17 слотов по 214px */ --f-row-h: 75px; /* высота ряда = высота плитки, иначе марки поплывут */ --f-cycle: 108s; /* круг при k = 1; длина/время держат ход ~34 px/с */ /* --- вырез под текстом --- Радиусы в пикселях, а не в процентах: чистая зона должна закрывать текстовый блок, а он фиксированной ширины. Ядро (--well-core) держит полную чистоту, дальше плотность набирается до края эллипса. Эллипс намеренно широкий и низкий: по горизонтали он обязан перекрыть заголовок целиком, по вертикали — наоборот, отпустить поле как можно раньше, чтобы верх и низ секции шли в полную плотность. */ --well-rx: 820px; --well-ry: 380px; --well-core: 48%; --well-y: 50%; --hero2-h: 780px; /* --- текстовый блок --- Значения сняты с макета (Figma, node 107:211, вариант Desktop). Кегли лида и кнопки берутся из общих токенов страницы: --fs-lead / --fs-btn на всех трёх брейкпоинтах совпадают с макетом один в один. Ширина блока — 1200px, как поле контента в макете (1440 минус поля по 120px). Заголовок там не переносится вовсе, и такой ширины хватает, чтобы он не переносился и в русском переводе — он самый длинный. */ --hero2-inner-w: 1200px; --hero2-eyebrow: 22px; --hero2-eyebrow-lh: 30px; --hero2-title: 48px; --hero2-title-lh: 58px; --hero2-lead-w: 375px; /* Просветы блока: eyebrow → заголовок → лид → кнопка. */ --hero2-gap-title: 16px; --hero2-gap-lead: 24px; --hero2-gap-cta: 32px; position: relative; display: grid; grid-template-rows: 1fr; height: clamp(560px, 92vh, var(--hero2-h)); height: clamp(560px, 92svh, var(--hero2-h)); /* Два слоя фона. Сверху — тёплое пятно под текстом: --c-surface (#f5efe9), тот же бежевый, что и в макете. Он чуть темнее страницы, поэтому читается не как засветка, а как мягкая тень вокруг текста. Лежит ПОД полем, поэтому подкрашивает и сами марки по краям выреза: границы не видно. Альфа записана числом — из hex-токена её не взять. Снизу — вертикальный градиент: три четверти высоты держится цвет страницы, дальше он уходит в бежевый и стыкуется со следующей секцией (.home__tiles-section, фон --c-surface). Без него граница секций читалась бы как ступенька. */ background: radial-gradient( 60% 54% at 50% var(--well-y), rgb(245 239 233 / 0.72), rgb(245 239 233 / 0) 72% ), linear-gradient(to bottom, var(--c-page) 75%, var(--c-surface)); } /* Слой прокрутки: гаснет по мере ухода героя. Саму прозрачность ставит main.js инлайновым style.opacity, а не переменной — почему именно так, см. комментарий к параллаксу ниже. Заодно растворяет ряды у верхней и нижней кромок секции, чтобы поле не упиралось встык в шапку и в следующую секцию. */ .home .hero2__field { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient( to bottom, transparent, #000 11%, #000 88%, transparent ); mask-image: linear-gradient( to bottom, transparent, #000 11%, #000 88%, transparent ); } /* Вырез. Прозрачное в маске = логотипов нет. Элемент неподвижен: маску нельзя вешать на .hero2__parallax, она уехала бы вместе с рядами. */ .home .hero2__well { position: absolute; inset: 0; -webkit-mask-image: radial-gradient( var(--well-rx) var(--well-ry) at 50% var(--well-y), transparent var(--well-core), rgb(0 0 0 / 0.16) 60%, rgb(0 0 0 / 0.44) 72%, rgb(0 0 0 / 0.72) 84%, rgb(0 0 0 / 0.92) 93%, #000 100% ); -webkit-mask-repeat: no-repeat; mask-image: radial-gradient( var(--well-rx) var(--well-ry) at 50% var(--well-y), transparent var(--well-core), rgb(0 0 0 / 0.16) 60%, rgb(0 0 0 / 0.44) 72%, rgb(0 0 0 / 0.72) 84%, rgb(0 0 0 / 0.92) 93%, #000 100% ); mask-repeat: no-repeat; } /* Стопка рядов заведомо выше секции и центрирована: запас по краям и есть ход параллакса, поэтому отрицательные отступы не нужны. Сдвиг ставит main.js, и ставит его прямо в style.transform, а не через CSS-переменную. Переменные наследуются: запись --f-shift на этот элемент помечала грязным весь его подвал, и все 22 ряда на каждом кадре прокрутки заново разбирали свои var()-зависимые background, opacity и тайминги анимации — а с живой анимацией каждый такой пересчёт ещё и интерполирует её значение. Замер на десктопе: 0.89 мс на кадр против 0.016 мс при прямой записи, то есть герой в кадре стоил полсотни лишних миллисекунд на каждой секунде прокрутки. Прямая запись касается ровно одного узла. */ .home .hero2__parallax { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; transform: translate3d(0, 0, 0); animation: hero2-field-in 1200ms 120ms cubic-bezier(0.22, 0.68, 0.24, 1) backwards; } .home .hero2__row { flex: 0 0 auto; /* Шире контейнера ровно на плитку — на неё же уезжает за круг. */ width: calc(100% + var(--f-set)); height: var(--f-row-h); opacity: var(--ink, 0.1); background: url("../images/main/hero-carrier-strip.svg") repeat-x 0 50% / var(--f-set) 100%; animation: hero2-drift calc(var(--f-cycle) * var(--k)) linear infinite; animation-direction: var(--dir); animation-delay: calc(var(--f-cycle) * var(--k) * var(--phase) * -1); will-change: transform; } /* Хвост стопки, не нужный на этой ширине, — без него. .hero2__parallax центрирован (justify-content: center), поэтому лишние ряды снизу списка всё равно уходят за верхний и нижний край секции первыми; отрезать можно их, не трогая видимую часть. Порог считается из худшего случая: --hero2-h (потолок клампа высоты секции, он не зависит от вьюпорта) и максимального хода параллакса (main.js, LAG = 0.2 высоты героя). Чтобы после сдвига вниз у стопки не открылся край, нужно rows * f-row-h ≥ hero2-h * 1.4 — см. вывод в PR. Со значениями текущих брейкпоинтов это 15 рядов на десктопе и 17 на планшете; здесь заложен запас в один ряд сверху расчёта. На мобильном (620px / 45px) по той же формуле нужно 20 из 22 — резать почти нечего, поэтому брейкпоинт здесь не заведён. */ @media (min-width: 1024px) { .home .hero2__row:nth-child(n + 17) { display: none; } } @media (min-width: 768px) and (max-width: 1023px) { .home .hero2__row:nth-child(n + 19) { display: none; } } @keyframes hero2-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--f-set) * -1), 0, 0); } } @keyframes hero2-field-in { from { opacity: 0; } to { opacity: 1; } } /* --- Текст ---------------------------------------------------- */ .home .hero2__inner { position: relative; z-index: 1; place-self: center; width: var(--hero2-inner-w); max-width: calc(100% - var(--pad-x) * 2); /* Грид-айтемы по умолчанию min-width: auto, то есть не сжимаются уже своего контента — даже с явными width/max-width. На мобильном --hero2-lead-w (450px) шире экрана, и без сброса эта ширина пробивала блок наружу: .hero2__inner рендерился шире вьюпорта, страница ловила горизонтальный оверфлоу и мобильный браузер зумил её целиком, чтобы вписать. */ min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--c-body); } .home .hero2__eyebrow { color: var(--c-primary); font-size: var(--hero2-eyebrow); line-height: var(--hero2-eyebrow-lh); font-weight: 500; } .home .hero2__title { display: flex; flex-direction: column; margin-top: var(--hero2-gap-title); font-size: var(--hero2-title); line-height: var(--hero2-title-lh); font-weight: 600; letter-spacing: -0.01em; } /* Строка заголовка переносится внутри себя: длинный перевод не съезжает в соседнюю строку и не рвётся на «висячее» слово. В макете заголовок не переносится вообще, так что на штатных ширинах правило не работает — это страховка для узких экранов и длинных переводов. */ .home .hero2__title span { text-wrap: balance; } .home .hero2__lead { margin-top: var(--hero2-gap-lead); width: var(--hero2-lead-w); max-width: 100%; font-size: var(--fs-lead); line-height: var(--lh-lead); } .home .hero2__cta { margin-top: var(--hero2-gap-cta); display: inline-flex; align-items: center; justify-content: center; min-width: 140px; padding: 15px 32px; border-radius: 8px; background-color: var(--c-primary); color: var(--c-white); font-size: var(--fs-btn); line-height: var(--lh-btn); font-weight: 500; text-align: center; text-transform: uppercase; transition: background-color 0.2s ease; } .home .hero2__cta:hover { background-color: var(--c-hover); } .home .hero2__cta:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; } /* --- Появление ------------------------------------------------ Лесенка сверху вниз: глаз ведут по тому же маршруту, по которому потом читают. fill-mode — backwards, а не both: после анимации элемент возвращается к своим обычным стилям, иначе застывший transform от анимации перебил бы :hover у кнопки. ----------------------------------------------------------- */ @keyframes hero2-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } } .home .hero2__eyebrow, .home .hero2__title, .home .hero2__lead, .home .hero2__cta { animation: hero2-rise 700ms cubic-bezier(0.22, 0.68, 0.24, 1) backwards; } .home .hero2__eyebrow { animation-delay: 80ms; } .home .hero2__title { animation-delay: 170ms; } .home .hero2__lead { animation-delay: 280ms; } .home .hero2__cta { animation-delay: 380ms; } @media (max-width: 1023px) { /* Tablet. На узком экране текст занимает почти всю ширину, и эллипс пришлось бы раздувать до краёв — поле выродилось бы в бледную дымку. Поэтому вырез здесь не эллипс, а горизонтальная полоса: сверху и снизу марки идут в полную плотность, посередине их нет вовсе. */ .home .hero2 { --f-set: 2910px; --f-row-h: 60px; --hero2-h: 700px; /* Текстовый блок — макет «Device=Tablet» (Figma, node 107:209): рамка 688px, лид не шире 400px. */ --hero2-inner-w: 688px; --hero2-eyebrow: 18px; --hero2-eyebrow-lh: 26px; --hero2-title: 36px; --hero2-title-lh: 44px; --hero2-lead-w: 400px; --hero2-gap-title: 12px; --hero2-gap-lead: 20px; --hero2-gap-cta: 24px; } .home .hero2__well { -webkit-mask-image: linear-gradient( to bottom, #000 0%, rgb(0 0 0 / 0.72) 14%, transparent 31%, transparent 69%, rgb(0 0 0 / 0.72) 86%, #000 100% ); mask-image: linear-gradient( to bottom, #000 0%, rgb(0 0 0 / 0.72) 14%, transparent 31%, transparent 69%, rgb(0 0 0 / 0.72) 86%, #000 100% ); } .home .hero2__cta { min-width: 120px; padding: 13px 24px; } } @media (max-width: 767px) { /* Mobile. Полосу-вырез оставляем, но растягиваем: текстовый блок здесь выше по отношению к секции. */ .home .hero2 { --f-set: 2183px; --f-row-h: 45px; --hero2-h: 620px; /* Текстовый блок — макет «Device=Mobile» (Figma, node 107:210): рамка во всю ширину, лид не шире 450px (на 360px это просто вся ширина). */ --hero2-inner-w: 100%; --hero2-eyebrow: 16px; --hero2-eyebrow-lh: 22px; --hero2-title: 28px; --hero2-title-lh: 34px; --hero2-lead-w: 450px; --hero2-gap-title: 12px; --hero2-gap-lead: 16px; --hero2-gap-cta: 20px; } .home .hero2__well { -webkit-mask-image: linear-gradient( to bottom, #000 0%, rgb(0 0 0 / 0.6) 15%, transparent 27%, transparent 73%, rgb(0 0 0 / 0.6) 85%, #000 100% ); mask-image: linear-gradient( to bottom, #000 0%, rgb(0 0 0 / 0.6) 15%, transparent 27%, transparent 73%, rgb(0 0 0 / 0.6) 85%, #000 100% ); } .home .hero2__cta { width: 100%; min-width: 0; padding: 15px 24px; } } @media (prefers-reduced-motion: reduce) { .home .hero2__parallax, .home .hero2__row, .home .hero2__eyebrow, .home .hero2__title, .home .hero2__lead, .home .hero2__cta { animation: none; } /* Без анимации все ряды встали бы в одну и ту же фазу, и поле сложилось бы в ровную сетку из одинаковых столбцов. Сдвигаем узор той же фазой, которой раньше сдвигалась анимация, — картинка остаётся вразнобой. */ .home .hero2__row { background-position-x: calc(var(--f-set) * var(--phase) * -1); } .home .hero2__cta { transition: background-color 0.2s ease; } .home .hero2__cta:hover { transform: none; } } /* --- Products, вариант C (НОВЫЙ МАКЕТ) ----------------------- Источник: Figma, node 498:5223. Четыре карточки в ряд: белая плитка с рамкой --c-muted и скруглением 8px, сверху квадратная иллюстрация, снизу заголовок и описание, прижатые к нижнему краю. Высоту ряда задаёт макет (396px), иллюстрация забирает всё, что осталось от текста: .tile__media растягивается флексом, а квадрат держит aspect-ratio — поэтому у карточки с более длинным описанием (в макете это Medicare) картинка сама становится меньше. Если перевод окажется длиннее английского, ряд подрастёт: grid-auto-rows задан как minmax(высота, auto), а min-height не даёт картинке схлопнуться. Кадрирование — проценты из Figma относительно рамки кадра, как в вариантах ниже: от размера рамки они не зависят. Tablet и Mobile — по отдельным макетам (Figma, node 503:5443 и 503:5442): раскладка карточки там другая, не масштабированная копия Desktop. Карточка держит фиксированную высоту, иллюстрация прижата к правому краю (для Medicare/Dental — фиксированным left/top без центрирования), а текст зафиксирован по верхнему отступу — переопределения см. ниже, в медиа-запросах max-width: 1023px и max-width: 767px. ----------------------------------------------------------- */ .home .home__tiles-section { display: flex; flex-direction: column; align-items: center; gap: 64px; padding: 96px var(--pad-x); background-color: var(--c-surface); --tile-row-h: 396px; --tile-pad: 32px; --tile-media-min: 96px; --tile-title-fs: 28px; --tile-title-lh: 36px; } .home .home__tiles-section .home__block { gap: 24px; max-width: 600px; } .home .home__tiles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(var(--tile-row-h), auto); gap: var(--gap-card); width: 100%; max-width: 1280px; } /* font-family: базовый base.css задаёт свой шрифт ссылкам (a, button), а блок «Нейтрализация» выше его не гасит — без этой строки заголовок и описание внутри ссылки наследовали бы Roboto, а не Hanken Grotesk. */ .home .tile { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: var(--tile-pad); font-family: inherit; border: 1px solid var(--c-muted); border-radius: 8px; background-color: var(--c-white); color: inherit; text-decoration: none; overflow: hidden; transform: translateY(var(--lift, 0px)); /* Замыкает multiply у иллюстрации на саму карточку: смешивается только с её фоном, до фона секции эффект не доходит. */ isolation: isolate; } /* Кадр иллюстрации: квадрат по высоте оставшегося места. Ширина считается от высоты, поэтому кадр может выходить за внутренние отступы карточки — так и в макете (240px кадра против 224px контентной ширины). */ .home .tile__media { position: relative; flex: 1 1 0; min-height: var(--tile-media-min); aspect-ratio: 1; overflow: hidden; } /* mix-blend-mode: иллюстрации нарисованы по белому фону, и на залитой карточке вокруг рисунка был бы белый квадрат. В режиме multiply белый фон пропускает тон карточки, а сам рисунок остаётся как есть. Фон исходников проверен — чистый белый, стыка не видно. */ .home .tile__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; mix-blend-mode: multiply; } .home .tile--term-life .tile__img { width: 78.8%; height: 105%; top: -0.19%; left: 10.43%; } .home .tile--medicare .tile__img { width: 91.73%; height: 91.73%; top: 12.63%; left: 4.26%; } .home .tile__body { display: flex; flex-direction: column; gap: 8px; width: 100%; } .home .tile__title { color: var(--c-body); font-size: var(--tile-title-fs); line-height: var(--tile-title-lh); font-weight: 600; } .home .tile__text { color: var(--c-muted); font-size: var(--fs-body); line-height: var(--lh-body); } /* Наведение: карточка заливается тинтом (как отзывы и вариант B), контур и заголовок уходят в фирменный тон. Рисунок не перекрывается — за это отвечает multiply у .tile__img выше. Логика «прожектора» — как в отзывах: :has() на сетке, иначе эффект срабатывал бы и при курсоре в промежутках между карточками, когда активной нет ни одной. */ @media (hover: hover) { .home .tile { transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease, transform 0.25s ease; } .home .tile__title, .home .tile__text { transition: color 0.3s ease; } .home .tile:hover, .home .tile:focus-visible { background-color: var(--c-tint); border-color: var(--c-primary); } .home .tile:hover .tile__title, .home .tile:focus-visible .tile__title { color: var(--c-primary); } /* На тинтовой заливке приглушённый --c-muted почти не читается — описание переходит на основной текстовый цвет. */ .home .tile:hover .tile__text, .home .tile:focus-visible .tile__text { color: var(--c-body); } .home .home__tiles-grid:has(.tile:hover) .tile { opacity: 0.45; } /* Повтор :has() поднимает вес правила так же, как у отзывов, — иначе активная карточка гасла бы вместе с остальными. */ .home .home__tiles-grid:has(.tile:hover) .tile:hover { opacity: 1; } } /* Волна: наведённая карточка поднимается на 25px, соседи по разметке на 12px. Только Desktop и только при настоящем hover-указателе: там четыре карточки стоят в одном ряду, и соседство в DOM совпадает с видимым. На Tablet сетка 2×2, и «сосед» оказался бы под карточкой, а не рядом с ней. */ @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .home .tile:hover { --lift: -25px; } .home .tile:has(+ .tile:hover), .home .tile:hover + .tile { --lift: -12px; } } /* Tablet: сетка 2×2, карточка 336×250. Раскладка карточки меняется принципиально — это уже не колонка (картинка сверху, текст снизу), а абсолютное позиционирование: иллюстрация висит у правого края карточки и вертикально центрирована (кроме Medicare/Dental — те в макете зафиксированы по left/top без центровки, кадр уходит за левый край отступа), текст жёстко стоит на top: 125px. Кадрирование самих иллюстраций (.tile--term-life/.tile--medicare .tile__img) не меняется — проценты те же, что и на Desktop. */ @media (max-width: 1023px) { .home .home__tiles-section { gap: 48px; padding-block: 72px; } .home .home__tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; } .home .tile { display: block; position: relative; height: 250px; padding: 0; } .home .tile__media { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 225px; height: 225px; flex: none; min-height: 0; aspect-ratio: auto; } .home .tile--term-life .tile__media { right: 14px; } .home .tile--medicare .tile__media, .home .tile--dental .tile__media { top: 12px; right: auto; transform: none; } .home .tile--medicare .tile__media { left: 111px; } .home .tile--dental .tile__media { left: 100px; } .home .tile__body { position: absolute; top: 125px; left: 32px; right: 32px; width: auto; gap: 8px; } .home .tile__title { font-size: 22px; line-height: 30px; } .home .tile__text { width: 200px; } } /* Mobile: одна колонка, карточка на всю ширину, высота 200px. Раскладка та же логика, что и на Tablet, только меньше кадр (175×175) и у текста Dental в макете отдельный top: 100px — у остальных карточек 83px (несоответствие есть в самом макете, переносим как есть). */ @media (max-width: 767px) { .home .home__tiles-section { gap: 40px; padding-block: 56px; } .home .home__tiles-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } .home .tile { height: 200px; } .home .tile__media { top: calc(50% - 12.5px); width: 175px; height: 175px; } .home .tile--term-life .tile__media { right: 0; } .home .tile--medicare .tile__media, .home .tile--dental .tile__media { top: 0; left: 105px; } .home .tile__body { top: 83px; } .home .tile--dental .tile__body { top: 100px; } .home .tile__title { font-size: 18px; line-height: 24px; } .home .tile__text { width: 175px; font-size: 14px; line-height: 20px; } } @media (prefers-reduced-motion: reduce) { .home .tile, .home .tile__title { transition: none; } } /* --- Metrics --------------------------------------------------- Фон по Figma (node 171:3025): градиент из бежевой плашки блока выше в цвет страницы, сходит на нет к четверти высоты секции. ----------------------------------------------------------- */ .home .home__metrics { display: flex; flex-direction: column; align-items: center; gap: 64px; padding: 96px var(--pad-x); background-image: linear-gradient( to bottom, var(--c-surface), var(--c-page) 25% ); } .home .home__metrics-head { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; } .home .home__metrics .home__block { gap: 24px; } /* Метрики и название штата — одна ячейка грида на двоих: под курсором на карте первые гаснут, второе проявляется. Высота ячейки берётся по большему из них, поэтому подмена не двигает карту. */ .home .home__stats-swap { display: grid; align-items: center; justify-items: center; } .home .home__stats-swap > * { grid-area: 1 / 1; } /* Смена идёт по очереди, а не внахлёст: уходящий блок уступает ячейку и только потом приходит следующий. Два текста в одной точке, даже полупрозрачные, читаются как каша, поэтому наложение здесь недопустимо в принципе — ни между метриками и названием, ни между двумя названиями. Очередь набрана задержками: правило видимого состояния ждёт, пока отработает правило скрытого. Считать это в JS не нужно — переходы и так идут навстречу друг другу при любом направлении. Названия между собой не анимируются вовсе: пока блок на экране, слово просто меняется. При быстром движении курсора по карте иначе набегает очередь наложенных слов. */ .home .home__stats { display: flex; align-items: center; justify-content: center; gap: 48px; transition: opacity 200ms ease 140ms, transform 200ms ease 140ms; } .home .home__map-state { opacity: 0; /* Лежит поверх метрик даже погашенным — курсор сквозь него проходит. */ pointer-events: none; transform: translateY(8px); transition: opacity 140ms ease, transform 140ms ease; } .home .home__map-state .home__stat-value { white-space: nowrap; } .home .home__stats-swap.is-state .home__stats { opacity: 0; transform: translateY(-8px); transition-duration: 140ms; transition-delay: 0ms; } .home .home__stats-swap.is-state .home__map-state { opacity: 1; transform: none; transition-duration: 200ms; transition-delay: 140ms; } .home .home__stat { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .home .home__stat-value { color: var(--c-body); font-size: var(--fs-stat); line-height: 1.3; font-weight: 600; letter-spacing: -0.025em; } .home .home__stat-label { color: var(--c-muted); font-size: var(--fs-stat-label); line-height: var(--lh-stat-label); } .home .home__stat-divider { align-self: stretch; flex: 0 0 auto; width: 1px; background-color: var(--c-border); } @media (max-width: 1023px) { .home .home__metrics { gap: 48px; padding-block: 72px; } .home .home__metrics-head { gap: 24px; } .home .home__metrics .home__block { gap: 20px; } .home .home__stats { gap: 32px; } } @media (max-width: 767px) { .home .home__metrics { gap: 40px; padding-block: 56px; } .home .home__metrics-head { gap: 20px; } .home .home__metrics .home__block { gap: 16px; } .home .home__stats { gap: 16px; } } @media (prefers-reduced-motion: reduce) { /* Спокойный режим: подмена метрик остаётся — это сведения, а не украшение, — но происходит мгновенно и без сдвига. Движение самой карты гасит us-map.css. */ .home .home__stats, .home .home__stats-swap.is-state .home__stats, .home .home__map-state, .home .home__stats-swap.is-state .home__map-state { transition: none; } .home .home__stats-swap.is-state .home__stats, .home .home__map-state { transform: none; } } /* --- Stories: отзывы ----------------------------------------- */ .home .home__stories { display: flex; flex-direction: column; align-items: center; gap: var(--gap-stories); padding: var(--pad-y-stories) var(--pad-x-stories); background-color: var(--c-page); } /* Desktop: заголовочный блок сужен до 600px, чтобы подводка не растягивалась на всю ширину. На планшете и мобильном контент и так уже́ этого предела — ограничение снимается. */ .home .home__stories .home__block { max-width: 600px; } @media (max-width: 1023px) { .home .home__stories .home__block { max-width: none; } } .home .home__stories-grid { display: grid; gap: var(--gap-card); width: 100%; } .home .story { display: flex; flex-direction: column; padding: var(--card-pad); border-radius: var(--card-radius); border: 1px solid transparent; } .home .story--full { justify-content: space-between; gap: var(--gap-card); background-color: var(--c-white); border-color: var(--c-border); } .home .story--mini { justify-content: space-between; gap: var(--gap-card); background-color: var(--c-surface); border-color: var(--c-surface); } /* Наведение: карточка заливается фирменным тоном, аватар инвертируется. Только для указывающих устройств — на тач-экранах hover «залипает». */ @media (hover: hover) { .home .story { transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; } .home .story__avatar { transition: background-color 0.3s ease, color 0.3s ease; } .home .story:hover { background-color: var(--c-tint); border-color: var(--c-primary); } .home .story:hover .story__avatar { background-color: var(--c-primary); color: var(--c-white); } /* «Прожектор»: пока курсор на одной из карточек, остальные приглушаются. :has() на гриде, а не :hover — иначе эффект срабатывал бы и при курсоре в промежутках между карточками, когда активной нет ни одной. */ .home .home__stories-grid:has(.story:hover) .story { opacity: 0.45; } /* Селектор повторяет :has() не случайно: тот добавляет к весу правила специфичность своего аргумента, и без него активная карточка проигрывала бы правилу выше и гасла вместе с остальными. */ .home .home__stories-grid:has(.story:hover) .story:hover { opacity: 1; } } /* Иконка в макете повёрнута на 180° — экспортированный контур это «закрывающая» кавычка, разворот делает из неё открывающую. */ .home .story__quote { flex: 0 0 auto; width: var(--quote-size); height: auto; transform: rotate(180deg); } .home .story__text { color: var(--c-body); font-size: var(--fs-body); line-height: var(--lh-body); } .home .story__author { display: flex; align-items: center; gap: 24px; } .home .story__avatar { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--avatar); height: var(--avatar); border-radius: 50%; background-color: var(--c-tint); color: var(--c-primary); font-size: var(--fs-body); line-height: 22px; } .home .story__author-info { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; } .home .story__name { color: var(--c-body); font-size: var(--fs-body); line-height: var(--lh-body); } .home .story__meta { color: var(--c-muted); font-size: var(--fs-cap); line-height: var(--lh-cap); letter-spacing: 0.01em; } .home .story__author-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Desktop: сетка 6 колонок шириной 1280px — общий предел контента страницы (Hero, Popular Plans). Обёртки колонок нужны только планшету и мобильному, здесь они схлопываются, а карточки размещаются явно. На планшете и мобильном ограничение не нужно: там контент и так уже́ тех 1280px (768 − 80 отступов и меньше). */ @media (min-width: 1024px) { .home .home__stories-grid { max-width: 1280px; grid-template-columns: repeat(6, 1fr); grid-template-rows: minmax(236px, auto) minmax(154px, auto) minmax(212px, auto); } .home .home__stories-col { display: contents; } .home .story--daniel { grid-area: 1 / 1 / 3 / 3; } .home .story--priya { grid-area: 1 / 3 / 2 / 7; } .home .story--elena { grid-area: 2 / 3 / 3 / 5; } .home .story--jordan { grid-area: 2 / 5 / 3 / 7; } .home .story--marcus { grid-area: 3 / 1 / 4 / 5; } .home .story--wes { grid-area: 3 / 5 / 4 / 7; } /* Короткие отзывы верхнего ряда в макете центрированы по вертикали. */ .home .story--elena, .home .story--jordan { justify-content: center; } } /* Tablet: две колонки 2/3 + 1/3, карточка Marcus T. на всю ширину. */ @media (min-width: 768px) and (max-width: 1023px) { .home .home__stories-grid { grid-template-columns: repeat(3, 1fr); } .home .home__stories-col { display: flex; flex-direction: column; gap: var(--gap-card); } .home .home__stories-col--main { grid-column: span 2; } .home .home__stories-col--side { grid-column: span 1; } .home .home__stories-col > .story { flex: 1 1 0; } .home .story--marcus { grid-column: 1 / -1; } } /* Mobile: только развёрнутые отзывы — короткие цитаты в макете отсутствуют. */ @media (max-width: 767px) { .home .home__stories-grid { grid-template-columns: 1fr; } .home .home__stories-col { display: flex; flex-direction: column; gap: var(--gap-card); } .home .home__stories-col--side { display: none; } } @media (prefers-reduced-motion: reduce) { .home .story, .home .story__avatar { transition: none; } }