/* ══════════════════════════════════════════════════════════════════ MedIQ - Hero. Автономный компонент. ══════════════════════════════════════════════════════════════════ Воспроизведение утверждённого макета «главный экран.png» (2048 x 1152) средствами HTML и CSS. Все размеры взяты попиксельным обмером макета и пересчитаны в доли его ширины, поэтому композиция масштабируется пропорционально на любой ширине. ЕДИНИЦА ИЗМЕРЕНИЯ. Всё выражено в cqw - процент ширины самого блока Hero (container query unit). Один и тот же файл поэтому одинаково работает и в автономной странице, и внутри колонки сайта: композиция считается от ширины Hero, а не от ширины окна. 1 cqw = 1 % ширины Hero = 20,48 px макета ПЕРЕСЧЁТ ЗАМЕРОВ МАКЕТА заголовок 116 px -> 5.664cqw подзаголовок 50,5 px -> 2.466cqw число в карточке 73,6 px -> 3.594cqw подпись/единица 26 px -> 1.270cqw поле карточки 34 px -> 1.660cqw подпись/единица 24,4 px -> 1.190cqw (шрифт проекта шире макетного) радиус карточки 20 px -> 0.977cqw высота ряда 1 217 px -> 10.596cqw высота ряда 2 222 px -> 10.840cqw зазор рядов 24 px -> 1.172cqw СЕТКА КАРТОЧЕК. Композиция макета не выстроена в равномерную сетку: ряды имеют разные ширины и разные разрывы. Чтобы повторить её точно и при этом остаться на Grid, объявлены 17 колонок - по всем найденным границам карточек обоих рядов. Каждая карточка занимает свой диапазон линий, а пустые места макета остаются пустыми треками. ═══ СТРУКТУРА ═══ .mq-hero контейнер и фон .mq-hero__inner поля композиции .mq-hero__intro Grid: текст | область медиа .mq-hero__text .mq-hero__media заглушка под изображение или видео .mq-hero__cards Grid: 17 колонок x 2 ряда .mq-hero__card Flex внутри карточки ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ ВЫСОТА ПЕРВОГО ЭКРАНА (правка 2026-08-12) Hero снова занимает весь первый экран: 100vh. ИСТОРИЯ. 2026-08-11 здесь стоял потолок 900 px - высота окна, на которой композиция обмерена. Он решал свою задачу (на мониторах выше 900 px между текстом и карточками копилась пустота), но давал побочный эффект: при высоте окна больше 900 px первый экран заканчивался раньше нижней кромки браузера, и снизу выглядывал следующий блок MED-01. Замер при 1920 x 1080: Hero 900 px, MED-01 начинался на 964 px, то есть был виден. Потолок снят. ШАПКА НЕ ВЫЧИТАЕТСЯ. Она position: sticky и лежит ПОВЕРХ Hero, своей полосы в потоке не занимает - проверено замером: верх Hero на 0 px, высота шапки 73 px. Поэтому ровно 100vh и есть первый экран; вычитание высоты шапки дало бы вертикальный overflow. Величина оставлена токеном: от неё зависят два правила - высота самого Hero и конец фонового градиента страницы. Они должны заканчиваться в одной точке, иначе на кромке Hero появится ступенька. Вернуть потолок при необходимости - поставить в токен px-значение. ══════════════════════════════════════════════════════════════════ */ :root { --mq-hero-max-block: 100vh; } .mq-hero { /* ═══ ШИРИНА КОМПОЗИЦИИ (правка 2026-08-12) ═══ Что ограничивало. Hero — секция внутри `main`, а у `main` стоит `max-width: 1360px` (поля по 16), то есть контентная колонка 1328 px на любом мониторе. Замер: при 2560 px Hero занимал 1328 px — всего 51,9 % ширины окна, поля по 616 px с каждой стороны. Внутри при этом менять было нечего: вся композиция Hero уже выражена в `cqw` — процентах ширины САМОГО Hero (`container-type: inline-size`). Заголовок 5.664cqw, высоты рядов карточек 10.596 и 10.840cqw, зазоры, поля, радиусы — всё производное от ширины блока. Значит достаточно снять ограничение по ширине, и композиция отмасштабируется целиком и пропорционально: и текст, и сетка, и промежутки. Ни transform: scale, ни отдельного увеличения кегля, ни второй сетки для больших экранов не требуется. Как считается. Ширина = max(колонка сайта, 92vw), но не больше потолка. * `100%` — та самая колонка `main` (1328 px, ниже 1392 px — уже). Она нижняя граница: узкие экраны остаются как были; * `92vw` — доля окна. До ~1443 px она МЕНЬШЕ колонки сайта, поэтому на ноутбуке ничего не меняется: при 1440 92vw = 1324,8 против 1328 — побеждает колонка. Расти композиция начинает только там, где окно действительно шире; * потолок 1860 px — «разумный max-width» из постановки: выше него строка заголовка и ряд карточек становятся слишком длинными для чтения, а поля перестают читаться как поля. Оставшиеся 8vw делятся поровну на два поля, поэтому композиция не прилипает к краям: при 1920 поле 77 px, при 2560 — 350 px. Отрицательные margin не «вылезают» за экран: 92vw заведомо меньше клиентской ширины даже с полосой прокрутки. */ /* ═══ ВЫСОТА ПЕРВОГО ЭКРАНА ═══ Hero занимает ровно высоту окна. Шапка полупрозрачна, лежит ПОВЕРХ Hero и своей полосы в потоке не занимает - значит 100vh это и есть первый экран, вычитать высоту шапки не нужно и нельзя: вычитание дало бы вертикальный overflow. Это `min-height`, а не `height`: на узких экранах, где содержимое Hero выше окна, блок растягивается по содержимому и ничего не обрезается. Свободная высота внутри Hero делится между тремя интервалами (см. ниже) в пропорции 355 : 380 : 265, у распорок сверху и снизу свои пределы. Чем выше окно, тем шире средний просвет: замер даёт 117 px при 900, 201 px при 1080. Это заложенное поведение композиции - она рассчитана на растяжение по высоте экрана. */ min-height: min(100vh, var(--mq-hero-max-block)); display: flex; /* ─── Палитра проекта MedIQ, холодная пастельная ─── */ --mq-hero-bg-top: #f1f1f1; --mq-hero-bg-mid: #dee5f4; --mq-hero-bg-blue: #d6e0f5; /* Нижняя точка = основной фон страницы. Hero заканчивается тем же цветом, на котором лежит, поэтому нижней границы не видно. */ --mq-hero-bg-bottom: #f5f8fd; /* Карточки статистики - чисто белые (указание Product Owner) */ --mq-hero-card: #ffffff; --mq-hero-ink: #131722; --mq-hero-deep: #1a3e64; --mq-hero-num: #204665; --mq-hero-accent: #3d62c4; /* Прибавка к интервалу «заголовок - подзаголовок». Ровно столько же вычитается из внешней высоты верхней зоны, поэтому карточки не двигаются, а общая высота первого экрана не растёт. */ --mq-hero-sub-gap: 1.1cqw; --mq-hero-icon-bg: #cfe0f7; --mq-hero-radius-outer: 16px; --mq-hero-radius-card: max(12px, 0.977cqw); /* Шрифт проекта */ font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Единицей измерения композиции служит ширина самого Hero */ container-type: inline-size; container-name: mq-hero; box-sizing: border-box; border-radius: var(--mq-hero-radius-outer); overflow: hidden; /* ═══ ФОНА У HERO НЕТ ═══ Указание Product Owner: Hero не должен иметь собственного визуального фона - он часть общего полотна страницы. Весь фон перенесён на страницу, в правило .mq-page-bg ниже. Прозрачность настоящая: и заливка, и фоновое изображение сняты, под Hero виден именно фон страницы. Радиус и overflow оставлены - они ничего не рисуют при прозрачном фоне, но пригодятся, если фон когда-нибудь понадобится вернуть. */ background-color: transparent; background-image: none; } /* Расширение действует только выше эталонной ширины. Ниже 1441 px Hero остаётся ровно в контейнере сайта: на планшетных ширинах сайт намеренно сужает контент (при 900 px колонка 608 px с полями по 146), и правило `max(100%, 92vw)` там раздувало бы Hero до 828 px — то есть ломало бы задуманную компактную раскладку. Замер это поймал. Порог выбран по точке равенства: при 1441 px 92vw = 1325,7 против колонки 1328 — значения сходятся, поэтому переход через границу происходит без скачка ширины. */ /* ═══ ШИРИНА HERO — ПО ОБЩЕМУ КОНТЕЙНЕРУ СТРАНИЦЫ (правка 2026-08-12) ═══ Здесь стояло правило, расширявшее Hero на больших мониторах до min(1860px, max(100%, 92vw)) — 1766 px при 1920 и 1860 px при 2560. Замер показал, во что это обходилось: все остальные блоки страницы и логотип в шапке остаются в контейнере `main` (max-width 1360 px, padding 16 px, то есть 1328 px содержимого), поэтому при 1920 Hero начинался на отметке 77 px, а второй блок и логотип — на 296 px; при 2560 — 350 px против 616 px. Единой вертикальной линии контейнера у страницы не было. Правило снято: собственной ширины у Hero больше нет, он наследует ширину `main` наравне с MED-01, SEG-01 и всеми нижними секциями. Отдельной фиксированной ширины для Hero не вводится намеренно — ширина должна приходить из общей контейнерной системы сайта, чтобы изменение `main` автоматически распространялось и на первый экран. Внутренняя композиция подстраивается сама: `.mq-hero` объявлен `container-type: inline-size`, а заголовок, подзаголовок, карточки и зазоры между ними выражены в `cqw` — долях ширины самого блока. Пропорции и структура при сужении контейнера сохраняются. */ .mq-hero *, .mq-hero *::before, .mq-hero *::after { box-sizing: border-box; } /* Поля композиции: левая кромка контента 111 px, правая 106 px макета */ .mq-hero__inner { padding: 5.400cqw 5.176cqw 4.443cqw 5.420cqw; } /* ═══ РАСПРЕДЕЛЕНИЕ ПО ВЫСОТЕ ЭКРАНА ═══ Свободная высота НЕ копится в одном месте, а делится между тремя интервалами в постоянной пропорции. ПРАВКА 2026-08-12: пропорции пересобраны. Было 355 : 380 : 265 — почти три четверти свободной высоты уходили НАД заголовком и МЕЖДУ подзаголовком и карточками, то есть ровно в те два промежутка, которые разрывают композицию. При 1920 x 1080 замер давал 188 / 201 / 100: заголовок отставал от шапки, а карточки отрывались от текста. Стало 340 : 220 : 440. Смысл: два промежутка ВНУТРИ композиции ужимаются, а остаток уходит под карточки — к нижней кромке первого экрана, где свободное поле читается как «дальше есть прокрутка», а не как разрыв между элементами. Высота самого Hero при этом не трогается, он по-прежнему ровно 100vh: меняется только раскладка внутри. над заголовком 340 долей (было 355) подзаголовок -> карточки 220 долей (было 380) под карточками 440 долей (было 265) Доли подобраны не на глаз: прогнаны шесть вариантов от 280:160:560 до 400:280:320 с замером трёх фактических промежутков при 1920 x 1080. Верхний промежуток начиная с 320 упирается в свой предел 16vh и дальше не растёт, поэтому выбор сводился к балансу среднего и нижнего. Взят вариант, где средний ужат почти вдвое, а нижний не начинает доминировать. Верхний и нижний интервалы - псевдоэлементы-распорки: разметка при этом не трогается. Средний интервал даёт сама верхняя зона: она растягивается на свою долю. ОГРАНИЧИТЕЛИ. Без них на высоких окнах композиция расползается: верхняя распорка не выше 16vh за вычетом выноса чернил (было 20vh): на высоких окнах заголовок не должен уходить вниз, теперь он держится в пределах 16 % высоты экрана; не ниже 104 px, чтобы на низких окнах остался зазор 50 px под шапкой нижняя распорка не ниже 59 px. Верхний предел 100 px СНЯТ: он и не давал остатку уходить вниз, из-за чего весь излишек копился в среднем промежутке. Теперь нижняя распорка забирает остаток на себя Расчёт при окне 1440 x 900: свободной высоты 376,8 px, деление даёт 133,7 / 143,2 / 99,9. Заголовок встаёт на 17 % высоты экрана, карточки заканчиваются за 100 px до низа. ОРИЕНТИРЫ. Замерил положение H1 на первом экране у референсов (окно 1440 x 900): Framer 18,2 %, Битрикс24 23,7 %, Stripe 28,7 %, Linear 30,2 %, HubSpot 37,3 %. Заданный диапазон 15-20 % - верхняя часть этого разброса, ближе всего к Framer. Композиция карточек, их размеры, сетка и горизонтальные положения не затрагиваются - двигается только полоса целиком. */ .mq-hero__inner { flex: 1 1 auto; display: flex; flex-direction: column; /* Вертикальные поля отданы распоркам */ padding-top: 0; padding-bottom: 0; } .mq-hero__inner::before, .mq-hero__inner::after { content: ""; display: block; flex-shrink: 0; flex-basis: 0; } .mq-hero__inner::before { /* Доля и нижний предел уменьшены (было 340 и 104px, правка 2026-08-12): текстовая группа поднимается ближе к шапке. Предел важен не меньше доли — на 1280 x 800 и 1366 x 768 верхнюю распорку задаёт именно он, и без его уменьшения заголовок остался бы на месте. */ flex-grow: 300; min-height: 92px; /* Предела у верхней распорки нет намеренно. Пока Hero был шире общего контейнера, содержимое было высоким и предел 16vh сдерживал разгон верхнего промежутка. После возврата Hero в контейнер содержимое стало ниже, и любой предел здесь сваливает весь избыток высоты под карточки: замер при 2560 x 1440 даёт 47 / 82 / 658 с пределом 120 px и 138 / 82 / 566 с пределом 16vh против 266 / 82 / 439 без предела. Избыток делится долями 340 : 440 между воздухом над композицией и под ней, композиция оказывается примерно по центру первого экрана. На 1440 x 900 и 1280 x 800 распорка задаётся долей, а не пределом, поэтому эталон одинаков во всех трёх вариантах. */ } .mq-hero__inner::after { flex-grow: 440; min-height: 59px; } .mq-hero__intro { /* Доля увеличена (было 220, правка 2026-08-12): свободная часть текстовой группы — это и есть промежуток до карточек, поэтому карточки опускаются ниже. Внутренний отступ заголовка и подзаголовка задан отдельно токеном --mq-hero-sub-gap и не затрагивается. */ flex: 265 0 auto; /* Прибавка к интервалу внутри верхней зоны компенсируется здесь: внешняя высота зоны остаётся прежней, поэтому полоса карточек стоит на месте, а высота первого экрана не меняется. Место под увеличенный интервал берётся из промежутка «подзаголовок - карточки», как и требует постановка. */ margin-block-end: calc(-1 * var(--mq-hero-sub-gap)); } .mq-hero__cards { flex: 0 0 auto; } /* Тень карточек первого экрана. Карточки лежат прямо на фоне страницы и до правки 2026-08-12 были единственными крупными заполненными поверхностями сайта без глубины. Берётся общий токен --v4-shadow-card — та же тень, что у блока «Онлайн-касса и эквайринг» (FTDC-01), а не отдельное значение. Тень ставится на карточку, а не на вложенные фото и видео: они занимают карточку целиком и получают её глубину, а собственная тень у каждого дала бы вторую тень поверх первой. */ .mq-hero__card { box-shadow: var(--v4-shadow-card); } /* ═══ ВЫСОКИЕ ЭКРАНЫ: СОБИРАЕМ ГРУППУ ПЛОТНЕЕ (правка 2026-08-12) ═══ Условие намеренно совпадает по ширине с правилом адаптивной ширины выше: 1441 px — это тот же порог «большого монитора». Ни MacBook Air, ни 1440 x 900, ни 1920 x 1080 (высота меньше 1100) правило не затрагивает, планшеты в портрете — тоже: у них Hero и так выше окна, распределять там нечего. Выше свободной высоты становится столько, что даже при долях 340 : 220 : 440 два верхних промежутка расползаются. Замер при 2560 x 1440 до правки: 130 / 151 / 273 (шапка -> заголовок, подзаголовок -> карточки, после карточек). Здесь верхняя распорка получает жёсткий предел 180 px, а доля среднего промежутка уменьшена с 220 до 170 — остаток забирает нижняя распорка. Замер после: 106 / 105 / 343. ЧЕСТНАЯ ОГОВОРКА. Все три промежутка одновременно уменьшить нельзя: свободная высота внутри Hero задана окном и содержимым, а масштаб композиции менять запрещено. Что уходит из верхнего и среднего промежутка, обязано появиться в нижнем. Прогнаны шесть вариантов распределения; взят тот, где оба названных промежутка заметно сокращаются, а нижний воздух остаётся в пределах четверти экрана. */ /* ═══ ПРЕДЕЛ СРЕДНЕГО ПРОМЕЖУТКА (правка 2026-08-12) ═══ Здесь стояло ступенчатое правило для больших мониторов @media (min-width: 1441px) and (min-height: 1100px), сжимавшее верхний и средний промежутки. Его условие по ширине было привязано к правилу адаптивной ширины Hero, которое снято выше, а порог по высоте 1100 px не покрывал 1920 x 1080 — после возврата Hero в общий контейнер содержимое стало ниже, и промежутки там разошлись: 81 / 123 / 224 против 32 / 79 / 136 на эталонных 1440 x 900. Ступень заменена на непрерывный предел. Высота текстовой группы относительно ширины Hero постоянна и равна 21,1 cqw при любой ширине блока от 992 px — замерено на 992, 1248, 1328 и 1766 px. Поэтому предел выражается как «содержимое плюс 70 px воздуха»: он не зависит от разрешения, включается плавно и на 1440 x 900 не достигается, то есть эталон не затрагивает. Ограничение по ширине контейнера обязательно: ниже 992 px текст переносится иначе и его доля растёт до 23,8 cqw при 656 px и 41,5 cqw при 343 px — предел в cqw там обрезал бы содержимое. */ @container (min-width: 900px) { .mq-hero__intro { /* Предел воздуха в текстовой группе поднят с 70 до 90 px (правка 2026-08-12) — иначе на экранах шире 1440, где предел и работает, увеличенная доля не дала бы эффекта. */ max-height: calc(21.2cqw + 90px); } } /* ═══════════════ ВЕРХНЯЯ ЗОНА: ТЕКСТ И МЕДИА ═══════════════ Ширины долей внутреннего поля (1831 px макета): текст 1392 -> 76.03 % зазор 57 -> 3.11 % медиа 382 -> 20.86 % */ .mq-hero__intro { display: grid; grid-template-columns: 76.03% 20.86%; column-gap: 3.11%; align-items: start; /* Подпорка высоты СНЯТА. Она осталась от макетной раскладки, где высоту верхней зоны держала область медиа. Теперь композицию по вертикали задают распорки первого экрана, а подпорка только съедала свободную высоту: замер показал заголовок на 13,7 % вместо заданных 15-20 %. */ min-height: 0; } .mq-hero__text { display: flex; flex-direction: column; align-items: flex-start; /* ═══ ОТСТУП ОТ ШАПКИ ═══ Задано: верх букв заголовка на 50 px ниже нижней кромки шапки. Шапка 73 px, значит чернила должны начинаться на 123 px от верха страницы. Замер показал, что при нулевом сдвиге верх чернил приходится на 6,85 % ширины Hero (91 px при ширине 1328). Отсюда формула: она даёт ровно 123 px на ЛЮБОЙ ширине, а не только на расчётной - доля вычитается, абсолютные 123 px остаются. Сдвигается весь текстовый блок, а не один заголовок: иначе изменился бы интервал между заголовком и подзаголовком, то есть композиция. Карточки при этом не двигаются - высоту верхней зоны держит min-height у .mq-hero__intro. */ /* Положение заголовка теперь задаёт верхний отступ .mq-hero__inner - он же распределяет высоту. Прежний пин снят, иначе отступы складывались бы. */ margin-block-start: 0; } .mq-hero__title { margin: 0; font-size: 5.664cqw; line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; /* Указание Product Owner 2026-08-07: вернуть заголовку цвет остальных заголовков сайта. --mq-hero-ink - это #131722, то же значение, что у токена --v4-ink, которым покрашены все main h2. Акцентный #3D62C4 остаётся у логотипа - его менять не просили. Кегль, межбуквенное расстояние, насыщенность и переносы строк не затрагиваются. */ color: var(--mq-hero-ink); } .mq-hero__subtitle { /* Базовый интервал плюс прибавка - см. --mq-hero-sub-gap */ margin: calc(1.126cqw + var(--mq-hero-sub-gap)) 0 0; font-size: 2.466cqw; line-height: 1.3; font-weight: 400; color: var(--mq-hero-deep); } /* ═══ Область под медиа-контент - СЕЙЧАС НЕ ИСПОЛЬЗУЕТСЯ ═══ Блок снят с первого экрана по указанию Product Owner. Правила оставлены рабочими: чтобы вернуть область, достаточно снова вставить её разметку в .mq-hero__intro - CSS править не потребуется. Размер соответствует свободному полю макета справа от заголовка: 382 x 422 px. */ .mq-hero__media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6cqw; margin-block-start: 1.338cqw; height: 20.605cqw; padding: 1.6cqw; border-radius: var(--mq-hero-radius-card); border: 1px dashed rgba(26, 62, 100, 0.35); background-color: rgba(255, 255, 255, 0.45); text-align: center; } .mq-hero__media > img, .mq-hero__media > video, .mq-hero__media > picture { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .mq-hero__media-title { margin: 0; font-size: 1.270cqw; line-height: 1.4; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mq-hero-deep); } .mq-hero__media-note { margin: 0; font-size: 1.100cqw; line-height: 1.45; color: var(--mq-hero-deep); opacity: 0.75; } /* ═══════════════ СЕТКА КАРТОЧЕК ═══════════════ 17 колонок по фактическим границам карточек макета. Доли внутреннего поля (1831 px): */ .mq-hero__cards { margin-block-start: 1.904cqw; display: grid; grid-template-columns: 8.793% 8.848% 0.928% 7.756% 7.974% 0.874% 7.428% 7.591% 0.874% 7.646% 0.765% 7.756% 7.810% 0.710% 8.411% 7.701% 8.138%; /* Ряды макета неодинаковы: 217 и 222 px. Оставлены как есть - это часть утверждённой композиции. */ grid-template-rows: 10.596cqw 10.840cqw; row-gap: 1.172cqw; } /* ═══ ШИРИНА КОМПОЗИЦИИ ═══ Указание Product Owner: раздвинуть карточки на всю рабочую ширину. Замер до правки: полоса карточек занимала внутреннее поле Hero - от 128 до 1315 px при окне 1440, то есть 1187 из 1328 доступных. По краям оставалось по 72 px поля. Теперь полоса выходит на полную ширину контентной колонки: отрицательные поля гасят горизонтальные поля .mq-hero__inner. РАЗМЕРЫ КАРТОЧЕК ПРИ ЭТОМ НЕ РАСТУТ. Если бы карточки продолжали заполнять свои дорожки, они бы стали шире на 11,85 % вместе с сеткой. Поэтому каждой карточке задана СВОЯ фиксированная ширина - ровно та, что была замерена до правки, - и она центрируется в своей дорожке (justify-self: center). Дорожки раздвинулись, карточки остались прежними, а весь прирост ушёл в промежутки между ними - равномерно, пропорционально их прежней ширине. Ширины карточек в долях ширины Hero (замер при 1328 px): 124 новых клиник-клиентов 209,4 px -> 15.768cqw Средняя сделка 186,8 px -> 14.066cqw видео врач и администратор 178,3 px -> 13.426cqw Среднее время 191,9 px -> 14.450cqw Удержание оттока 188,0 px -> 14.157cqw видео ЭМК 208,1 px -> 15.670cqw Годовой доход 191,3 px -> 14.405cqw видео ролевые модули 184,8 px -> 13.916cqw 1 min 191,3 px -> 14.405cqw Строки, порядок карточек и пустые места композиции не меняются. */ .mq-hero__cards { /* Правка 2026-08-13. Было -5.420cqw / -5.176cqw — ровно столько, сколько нужно, чтобы погасить горизонтальные поля .mq-hero__inner: полоса карточек занимала всю контентную колонку, от 56 до 1384 px при окне 1440. Но крайние карточки до этих границ не доходили: они центрируются в своих дорожках (`justify-self: center` ниже), а дорожки шире самих карточек — у левой на 24,9 px, у правой на 22,6 px. Половина разницы и оставалась зазором: замер 12,44 px слева и 11,28 px справа. Поля увеличены так, чтобы после центрирования крайние карточки легли ровно на границы рабочей области. Значения получены решением от требуемого положения, а не подбором, и проверены замером: зазор слева 0, справа 0,09 px. Размеры карточек не затронуты: их ширины заданы в cqw от Hero, а не дорожками сетки, поэтому расширение области на них не влияет. Вертикаль не затронута — меняется только margin-inline. */ margin-inline: -6.544cqw -6.185cqw; } .mq-hero__card { justify-self: center; } .mq-hero__card--a { width: 15.768cqw; } .mq-hero__card--b { width: 14.066cqw; } .mq-hero__card--c { width: 13.426cqw; } .mq-hero__card--d { width: 14.450cqw; } .mq-hero__card--e { width: 14.157cqw; } .mq-hero__card--f { width: 15.670cqw; } .mq-hero__card--g { width: 14.405cqw; } .mq-hero__card--h { width: 13.916cqw; } .mq-hero__card--i { width: 14.405cqw; } /* Раскладка по линиям сетки - ровно как в макете */ .mq-hero__card--a { grid-column: 1 / 3; grid-row: 1; } .mq-hero__card--b { grid-column: 4 / 6; grid-row: 1; } .mq-hero__card--c { grid-column: 7 / 9; grid-row: 1; } .mq-hero__card--d { grid-column: 10 / 13; grid-row: 1; } .mq-hero__card--e { grid-column: 16 / 18; grid-row: 1; } .mq-hero__card--f { grid-column: 2 / 5; grid-row: 2; } .mq-hero__card--g { grid-column: 8 / 11; grid-row: 2; } .mq-hero__card--h { grid-column: 12 / 14; grid-row: 2; } .mq-hero__card--i { grid-column: 15 / 17; grid-row: 2; } /* ═══ Карточка ═══ */ .mq-hero__card { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 1.660cqw; border-radius: var(--mq-hero-radius-card); background-color: var(--mq-hero-card); } /* Строка с подписью и иконкой */ .mq-hero__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8cqw; } .mq-hero__label { margin: 0; font-size: 1.190cqw; line-height: 1.38; color: var(--mq-hero-deep); } .mq-hero__value { margin: 0; display: flex; align-items: baseline; gap: 0.45cqw; font-size: 3.594cqw; /* Плотная строка: число не нуждается в межстрочном запасе, а в самой тесной карточке («Удержание оттока») он давал переполнение на 1,4 px - замер. */ line-height: 1; font-weight: 700; color: var(--mq-hero-num); } /* Единица рядом с числом - «mln», «min» */ .mq-hero__unit { font-size: 1.900cqw; font-weight: 700; } .mq-hero__note { margin: 0; font-size: 1.190cqw; line-height: 1.38; color: var(--mq-hero-deep); } /* Вертикальные интервалы внутри карточки - долями ширины, чтобы масштабировались вместе с композицией */ .mq-hero__card-head + .mq-hero__value { margin-block-start: 1.000cqw; } .mq-hero__card-head + .mq-hero__note { margin-block-start: 0.850cqw; } .mq-hero__value + .mq-hero__note { margin-block-start: 0.850cqw; } .mq-hero__value + .mq-hero__label { margin-block-start: 0.850cqw; } /* ═══ ОДНОТОННЫЕ ФИРМЕННЫЕ ЗАЛИВКИ ═══ Указание Product Owner: градиенты на этих карточках не нужны, только ровный цвет. Правило объявлено ПОСЛЕ прежних градиентных - у них одинаковая специфичность (0,1,0), и решает порядок. background-image: none снимает любую градиентную подложку, откуда бы она ни приходила, поэтому смешивания цветов и прозрачных переходов не остаётся. Карточки выбраны по тексту: #E7EEFB «Средняя сделка / 15 лицензий» --b «Среднее время / 15 дней продаж» --d #6D8FDB -> #4868C1 «124 новых клиник-клиентов» --a «Удержание оттока / 2 проекта» --e «1 min / Лид-контакт в CRM» --i */ .mq-hero__card--b, .mq-hero__card--d { background-color: #e7eefb; background-image: none; } .mq-hero__card--a, .mq-hero__card--e, .mq-hero__card--i { /* Заливка оставлена запасным значением на случай, если градиент недоступен: это середина между крайними цветами. */ background-color: #5b7cce; /* ═══ ГРАДИЕНТ ПО РЕФЕРЕНСУ ═══ Ровно два цвета, без промежуточных стопов и без белых засветок: #6D8FDB светлое начало #4868C1 насыщенный конец 135deg - диагональ от верхнего левого угла к нижнему правому: свет начинается слева сверху и уходит в насыщенный синий вправо и вниз, как на референсе. Два стопа выбраны сознательно: линейная интерполяция между ними даёт математически ровный переход, а любой промежуточный стоп создал бы точку смены наклона - именно так появляются полосы. */ background-image: linear-gradient(135deg, #6d8fdb 0%, #4868c1 100%); } /* ═══ Текст на синих карточках ═══ Прежний тёмно-синий #1A3E64 на синем фоне давал контраст 1,94:1 - это далеко за нормой. Текст сделан белым. На градиенте контраст меняется вдоль диагонали: 3,18:1 у светлого начала и 5,22:1 у насыщенного конца - замеры в отчёте. Светлых карточек правило не касается - там прежний тёмный текст на #E7EEFB даёт 9,34:1. */ .mq-hero__card--a .mq-hero__value, .mq-hero__card--a .mq-hero__label, .mq-hero__card--a .mq-hero__note, .mq-hero__card--a .mq-hero__unit, .mq-hero__card--e .mq-hero__value, .mq-hero__card--e .mq-hero__label, .mq-hero__card--e .mq-hero__note, .mq-hero__card--e .mq-hero__unit, .mq-hero__card--i .mq-hero__value, .mq-hero__card--i .mq-hero__label, .mq-hero__card--i .mq-hero__note, .mq-hero__card--i .mq-hero__unit { color: #ffffff; } /* Диск иконки на синей карточке: тот же светлый кружок с тёмным глифом - он читается и на синем, отдельного цвета не требуется. */ /* ═══ Иконка ═══ Диск с глифом, размер и положение - как в макете (62 px). */ .mq-hero__icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 3.027cqw; height: 3.027cqw; border-radius: 50%; background-color: var(--mq-hero-icon-bg); color: var(--mq-hero-deep); } /* Глиф внутри круглого значка. Правило одно на оба носителя: значок карточки «5 сек» остаётся встроенным SVG, значок карточки P&L с 2026-08-12 — WebP. Размер задан долей круга (60 %), поэтому иконка масштабируется вместе с карточкой, а на мобильном, где круг фиксирован 30 px, остаётся в тех же пропорциях. Геометрия прежняя: при круге 40 px глиф ровно 24 px, как и был у SVG. */ .mq-hero__icon svg, .mq-hero__icon img { width: 60%; height: 60%; display: block; fill: currentColor; } /* ═══ Карточки под фотографии ═══ На макете здесь фотографии людей. На этом этапе они запрещены, поэтому в тех же коробках стоят тематические текстовые карточки. Размер, форма, положение, радиус и стиль карточки сохранены. ЗАМЕНА НА ФОТОГРАФИЮ. Достаточно положить вместо

внутрь .mq-hero__visual - правила ниже уже описывают изображение. Ни HTML карточки, ни CSS править не нужно. */ .mq-hero__card--visual { padding: 0; overflow: hidden; /* ═══ БЕЗ ФОНА ═══ Указание Product Owner: на карточках с видео не должно быть никаких цветовых наложений. Фон снят полностью - ни заливки, ни градиента. Видео показывается в исходном виде; наложений, тонировок и фильтров поверх него нет. */ background-color: transparent; background-image: none; } .mq-hero__visual { display: flex; flex: 1 1 auto; align-items: center; min-height: 0; border-radius: inherit; } .mq-hero__visual > img, .mq-hero__visual > picture, .mq-hero__visual > video { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } /* ═══ Видео в слоте ═══ Размер, скругление и заполнение уже заданы общим правилом слота (.mq-hero__visual > img, picture, video) - видео занимает карточку целиком через object-fit: cover, без полос и без искажения. Здесь только то, что относится именно к видео: слот не должен реагировать на указатель, потому что это фоновый ролик, а не плеер, и пока первый кадр не пришёл - карточка держит свой прежний фон, чтобы в раскладке не мелькала пустота. */ .mq-hero__visual-media { pointer-events: none; background-color: transparent; } .mq-hero__visual-text { margin: 0; padding: 1.660cqw; font-size: 1.190cqw; line-height: 1.38; color: var(--mq-hero-deep); } /* ═══ Светлый градиент на #E7EEFB ═══ Указание Product Owner. Карточки выбраны ПО ТЕКСТУ, а не по цвету или месту в сетке: «Врач и администратор работают в одной системе» --c (видео) «Ролевые модули для всей команды клиники» --h (видео) Оттенки строятся от #E7EEFB: два светлее его, один чуть глубже. Насыщенного синего нет - весь перепад укладывается в 27 единиц по красному, поэтому фон читается как лёгкая подсветка, а не как заливка. 0 % #F8FAFE светлее базового 22 % #F1F5FD светлее базового 52 % #E7EEFB базовый 100 % #DDE7F9 чуть глубже базового Направление 135° и стопы 0 / 22 / 52 / 100 % - те же, что у остальных градиентов Hero, поэтому дизайн-язык остаётся единым. У карточек с видео градиент лежит на САМОЙ КАРТОЧКЕ, под роликом. Никаких слоёв поверх видео не добавляется: ни overlay, ни tint, ни opacity, ни mix-blend-mode. Правило ниже объявлено после .mq-hero__card--visual, поэтому перекрывает снятый там фон. ПОРЯДОК ВАЖЕН. Селекторы карточек и .mq-hero__card--visual имеют одинаковую специфичность (0,1,0), поэтому решает порядок объявления. При первой попытке правило стояло выше сброса фона и не срабатывало на карточках с видео - замер показал градиент только на b и d. */ /* Только карточки с видео. «Средняя сделка» и «Среднее время» выведены отсюда: по указанию Product Owner у них ровная заливка без градиента - см. раздел однотонных заливок выше. Правило объявлено ниже него, и при одинаковой специфичности выиграло бы порядком, поэтому селекторы разделены. */ .mq-hero__card--c, .mq-hero__card--h { background-image: linear-gradient( 135deg, #f8fafe 0%, #f1f5fd 22%, #e7eefb 52%, #dde7f9 100% ); } /* ══════════════════════════════════════════════════════════════════ ФОН СТРАНИЦЫ ══════════════════════════════════════════════════════════════════ Фон принадлежит СТРАНИЦЕ, а не Hero. Класс вешается на - и на сайте, и в автономной странице просмотра, поэтому определение одно на оба варианта. У Hero собственного фона нет вовсе. Ни background-size, ни background-repeat не задаются: линейный градиент по умолчанию заполняет всю область фона, а у она равна высоте документа. ═══ ГРАНИЦЫ ПЕРЕХОДА ═══ Переход укладывается ровно в первый экран: 0 .. нижняя кромка шапки чистый #FFFFFF кромка шапки .. низ Hero мягкий переход низ Hero .. подвал ровный #F5F8FD, основной цвет Обе границы вынесены в переменные, а положения остановок считаются от них долями. Поэтому переход всегда начинается точно под шапкой и всегда заканчивается точно на нижней кромке Hero - на любой ширине, где высота первого экрана другая. Высота Hero меняется вместе с шириной: до 1400 px она равна 0,5632 от ширины блока (замер: 1328 -> 748, 1248 -> 703, 992 -> 558). Ниже 933 px первый экран перестраивается в один столбец и становится заметно выше - там переход завершается внутри него, в пределах первого видимого экрана. ═══ СЕМЬ ЦВЕТОВЫХ ОСТАНОВОК ═══ #FFFFFF #FCFDFE #FAFCFE #F8FAFE #F7F9FD #F6F8FD #F5F8FD Шесть коротких отрезков по одной-две единицы цвета вместо одного длинного: у двухцветного градиента глаз ловит начало и конец «наклона», у дробного - нет. ═══ УСИЛЕНИЕ НА 12 % ═══ 2026-08-07: усиление ненадолго отменяли - при разборе указания «вернуть цвет главного экрана» вывод был сделан в пользу фона. Product Owner уточнил, что речь шла о цвете ЗАГОЛОВКА, поэтому фон возвращён к усиленному варианту, а отмена откачена. Крайние цвета и позиции остановок не менялись: начало #FFFFFF, конец #F5F8FD, границы перехода прежние. Усилены только ПРОМЕЖУТОЧНЫЕ остановки - кривая стала опускаться быстрее в начале и выполаживаться к концу. Доля пройденного перепада на каждой остановке: было 0 - 20 - 40 - 60 - 80 - 90 - 100 % стало 0 - 30 - 50 - 70 - 85 - 95 - 100 % Средняя насыщенность по всему переходу выросла с 56,7 % до 63,3 %, то есть на 11,8 % - в заданном диапазоне 10-15 %. Тон появляется раньше и держится дольше, при этом ни один канал не разворачивается: красный 255 → 252 → 250 → 248 → 247 → 246 → 245, зелёный 255 → 253 → 252 → 250 → 249 → 248 → 248, синий 255 → 254 → 254 → 254 → 253 → 253 → 253. */ .mq-page-bg { /* Нижняя кромка шапки и нижняя кромка Hero */ --mq-bg-start: 73px; /* Конец перехода = нижняя кромка Hero, тем же выражением: у первого экрана есть потолок --mq-hero-max-block, и градиент обязан заканчиваться там же. Иначе на мониторах выше 900 px переход продолжался бы за кромкой Hero и на стыке была бы видна ступенька. */ --mq-bg-end: min(100vh, var(--mq-hero-max-block)); --mq-bg-span: calc(var(--mq-bg-end) - var(--mq-bg-start)); /* Запасное значение, если градиенты недоступны */ background-color: #f5f8fd; background-image: linear-gradient( 180deg, #ffffff 0px, #ffffff var(--mq-bg-start), #fcfdfe calc(var(--mq-bg-start) + var(--mq-bg-span) * 0.1667), #fafcfe calc(var(--mq-bg-start) + var(--mq-bg-span) * 0.3333), #f8fafe calc(var(--mq-bg-start) + var(--mq-bg-span) * 0.5), #f7f9fd calc(var(--mq-bg-start) + var(--mq-bg-span) * 0.6667), #f6f8fd calc(var(--mq-bg-start) + var(--mq-bg-span) * 0.8333), #f5f8fd var(--mq-bg-end), #f5f8fd 100% ); } /* Ниже 1400 px контентная колонка сужается вместе с окном, и первый экран становится ниже - конец перехода следует за ним. */ @media (max-width: 1399px) { .mq-page-bg { --mq-bg-end: min(100vh, var(--mq-hero-max-block)); } } /* Ниже 933 px первый экран перестраивается в один столбец и вытягивается по содержимому. Переход завершается в пределах первого видимого экрана - тянуть его на всю высоту перестроенного Hero незачем. */ @media (max-width: 932px) { .mq-page-bg { --mq-bg-start: 62px; --mq-bg-end: 640px; } } /* ══════════════════════════════════════════════════════════════════ АДАПТИВ ══════════════════════════════════════════════════════════════════ До 900 px ширины блока композиция макета сохраняется целиком: она выражена долями, поэтому просто уменьшается. Ниже 900 px разреженная раскладка из 17 колонок перестаёт читаться - карточки становятся уже 60 px. Поэтому включается перестроение: сетка карточек переходит на равномерные колонки, а размеры шрифта перестают быть долями ширины и берутся из обычной шкалы. ══════════════════════════════════════════════════════════════════ */ @container mq-hero (max-width: 900px) { .mq-hero__inner { /* Верхнее поле держит запас под шапку сайта: она полупрозрачная и лежит поверх первого экрана (73 px на планшете, 62 px на телефоне). При 40 px заголовок упирался в меню - замер. Значение поднято с 88 до 100 px и затем уменьшено до 90 px (правки 2026-08-12) — вместе со снятием распорки ниже. Зазор от нижней кромки шапки: 118 -> 38 -> 28 px. */ padding: 90px 24px 32px; } /* Запас под шапку на мобильном резервировался ДВАЖДЫ: полем выше и верхней распоркой `.mq-hero__inner::before`, у которой min-height 92 px. В макетной раскладке распорка распределяет свободную высоту первого экрана, но здесь Hero тянется по содержимому и распределять нечего — распорка просто добавляла 92 px поверх поля. Замер до правки: от низа шапки до заголовка 118 px при 375, 390 и 430 px. Распорка обнуляется, единственным источником запаса остаётся поле выше. Отрицательные отступы не применялись; на desktop min-height распорки не затрагивается — правило действует только внутри контейнерного запроса mq-hero (max-width: 900px). */ .mq-hero__inner::before { min-height: 0; } .mq-hero__intro { grid-template-columns: minmax(0, 1fr); row-gap: 24px; /* Подпорка высоты нужна только в макетной раскладке */ min-height: 0; } /* Запас под шапку на узких экранах даёт верхнее поле .mq-hero__inner, отдельный сдвиг текста не нужен. */ .mq-hero__text { margin-block-start: 0; } .mq-hero__title { font-size: clamp(30px, 6.4cqw, 52px); } .mq-hero__subtitle { margin-block-start: 14px; font-size: clamp(16px, 2.9cqw, 24px); } .mq-hero__media { height: auto; aspect-ratio: 16 / 10; padding: 20px; } .mq-hero__media-title { font-size: 13px; } .mq-hero__media-note { font-size: 13px; } .mq-hero__cards { margin-block-start: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 12px; } /* Порядок карточек макета сохраняется, раскладка становится потоковой */ .mq-hero__card--a, .mq-hero__card--b, .mq-hero__card--c, .mq-hero__card--d, .mq-hero__card--e, .mq-hero__card--f, .mq-hero__card--g, .mq-hero__card--h, .mq-hero__card--i { grid-column: auto; grid-row: auto; } .mq-hero__cards { margin-inline: 0; } .mq-hero__card { padding: 18px; min-height: 140px; border-radius: 14px; /* Фиксированные ширины нужны только в макетной раскладке */ width: auto; justify-self: auto; } .mq-hero__card--visual { padding: 0; } .mq-hero__visual-text { padding: 18px; font-size: 13px; } .mq-hero__label, .mq-hero__note { font-size: 13px; } .mq-hero__value { font-size: 30px; } .mq-hero__unit { font-size: 16px; } .mq-hero__icon { width: 30px; height: 30px; } .mq-hero__card-head + .mq-hero__value { margin-block-start: 8px; } .mq-hero__value + .mq-hero__note, .mq-hero__value + .mq-hero__label { margin-block-start: 6px; } } @container mq-hero (max-width: 560px) { .mq-hero__cards { grid-template-columns: minmax(0, 1fr); } } /* ══════════════════════════════════════════════════════════════════ ВЕРХНЯЯ ЗОНА: ШИРИНА ТЕКСТА И ФИГУРА SHAPE5 ══════════════════════════════════════════════════════════════════ Указание Product Owner: (5) выровнять текстовый блок по ширине композиции карточек; (3) справа от текста поставить Shape5 360 x 360. ═══ ШИРИНА ═══ Было: верхняя зона 1187,3 px и начиналась на 128 px, карточки - 1328 px от 56 px. Текст стоял на 72 px правее карточек, левые кромки не совпадали. Стало: у верхней зоны та же выноска, что у карточек, - значения скопированы из .mq-hero__cards без изменений. Обе полосы теперь 1328 px и начинаются на 56 px: левая кромка заголовка совпадает с левой кромкой первой карточки, правая кромка фигуры - с правой кромкой последней. ═══ ФИГУРА ═══ Фигура занимает ТОТ ЖЕ слот сетки, где раньше стояла область под медиа, - вторая колонка .mq-hero__intro. Новых уровней вложенности не добавлено, сетка Hero прежняя. Колонки заданы в пикселях вместо процентов: правая колонка должна быть ровно 480 px по постановке 2026-08-08 (было 360), а 20,86 % от 1328 давали бы 277. */ /* ПРАВКА 2026-08-12: изображение верхней зоны снято, колонка одна. Было `minmax(0, 1fr) 480px` с зазором 40 px — правая колонка держала 3D-фигуру. Вместе с изображением из разметки убран и её контейнер .mq-hero__shape, поэтому резервировать под него 520 px больше не за чем: пустая колонка продолжала бы занимать место только из-за изображения, которого нет. Переносы строк в заголовке и подзаголовке заданы тегами
и от ширины колонки не зависят, поэтому композиция верхней зоны не меняется. Полоса карточек, её сетка и высота Hero не затрагиваются. Правка сделана именно здесь, а не в style-v4-final.css: main.css подключается через @layer, hero.css — вне слоёв, и любое правило отсюда выигрывает у слоёв независимо от специфичности. */ .mq-hero__intro { margin-inline: -5.420cqw -5.176cqw; grid-template-columns: minmax(0, 1fr); column-gap: 0; } .mq-hero__shape { display: flex; align-items: center; justify-content: flex-end; min-width: 0; } .mq-hero__shape > img { display: block; width: 480px; max-width: 100%; height: auto; object-fit: contain; } /* На узких экранах правая колонка не помещается: фигура уходит под текст и перестаёт быть фиксированной. */ @media (max-width: 1023px) { .mq-hero__intro { grid-template-columns: minmax(0, 1fr); } .mq-hero__shape { justify-content: center; } .mq-hero__shape > img { width: min(480px, 100%); } } /* Ниже 932 px выноска верхней зоны снимается - там же, где её снимают карточки (.mq-hero__cards { margin-inline: 0 }). Без этого интро осталось бы шире карточек и левые кромки снова разошлись бы: замер показал 678 px от 110 против 608 px от 146. Правило стоит в конце файла намеренно: правило с выноской объявлено ниже прежнего медиазапроса, и при равной специфичности побеждает порядок. */ @media (max-width: 932px) { .mq-hero__intro { margin-inline: 0; } }