/* ========================================================================== ARTELV TRD HEAT 5S1 — лендинг на скролл-стопке (GSAP ScrollTrigger) Механика, сетка, брейкпоинты и FAQ перенесены из лендинга ARTELV RDC II (artelv-rdc-ii/rdc-2-green.css) с заменой префикса rdc → trd. Секции 1–7 — блоки «Секция N» ниже, их адаптивы — в блоках @container с той же подписью. Параметры и решения — assets/section-N-*.md. МЕХАНИКА .trd-stack — «рельса» скролла, её высота задаёт длину прокрутки .trd-stack__viewport — sticky-окно на высоту экрана, внутри него всё живёт .trd-col — колонка контента: равна экрану, но не шире --trd-col-max (контейнер сайта + поля) и двух высот экрана. Контейнер для всех адаптивов: они на @container trd, а не на @media .trd-section — секция на всю колонку и высоту экрана, лежат стопкой (absolute + z-index). Фон, фото и всё, что в макете прилегает к краю экрана, выносятся в поля до краёв экрана; контент остаётся в колонке Первая секция сверху стопки, каждая следующая — под ней. При скролле верхняя уезжает (влево / вправо / вверх / вниз — data-trd-exit), открывая следующую. Пиннинг сделан на position:sticky, а НЕ на ScrollTrigger pin:true — иначе GSAP вставляет pin-spacer в DOM и ломает вёрстку страницы товара OpenCart. БЕЗ JS стопка не включается: секции просто идут друг за другом обычным потоком. Анимационный режим добавляет .trd-stack--animated — если на странице видна колонка полноэкранных секций, значит класс не проставился, смотри консоль. РЕЖИМЫ (классы на .trd ставит JS, см. syncLayout / applyMode) .trd--scaled — низкий широкий экран (телефон в горизонтали): стопка верстается как десктоп и уменьшается до высоты экрана .trd--fields — экран шире колонки: по бокам поля .trd-stack--flow — уже 1200 (планшеты, телефоны): стопки нет, обычная страница; раскладки полотна — в блоках @container ≤1199 и ниже (≤1199 = полотно), телефоны — блок «Полотно» в конце файла ТОКЕНЫ (на элементе) H2 → .trd-title H3 → .trd-subtitle основной текст → .trd-text акцент → .trd-text-accent ширина контента→ .trd-container Отступы = gap на родителе (flex column), никаких margin: после H2 → .trd-title-gap после H3 → .trd-subtitle-gap текст-текст → .trd-text-gap SAFE-ЗОНА (верх / низ; низ заодно держит место под меню магазина): ≥1600 → 154 / 100 1200-1599 → 164 / 100 (схемы сайта) ≤1199 → 100 / 100 (полотно; телефон в горизонтали — 120/112 и 100/100) ≤991 → 88 / 92 ≤699 → 76 / 84 Боковое поле (--trd-safe-x): 50 → 40 (≤1320) → 30 (≤991) → 20 (≤788) БРЕЙКПОИНТЫ — ширина колонки, а не окна (@container trd). Макеты обычно 1650 / 1450 / 1320 / 992 / 768 / 700 / 350. Колонка не включает полосу прокрутки, поэтому на Windows с обычной полосой раскладка переключается на ~15px раньше, всегда в сторону более узкой — это безопасно. ========================================================================== */ .trd { /* Высота экрана. svh не скачет при появлении адресной строки на мобильных. */ --trd-vh: 100vh; /* Ширина экрана без полосы прокрутки. JS перезаписывает в px. */ --trd-vw: 100vw; /* Хвост стопки, в долях от одного «ухода»: сколько последняя секция стоит перед тем, как стопка отпустит скролл. JS читает значение отсюда. */ --trd-hold: 0; /* Лента внутри секции (.js-trd-rail), в тех же долях экрана: сколько скролла уходит на переход к следующему шагу и сколько он стоит после. Лента может переопределить их на себе — JS читает токены с самой ленты. */ --trd-rail-step: 0.6; --trd-rail-hold: 0; /* Длительность таймлайна в «экранах». Заполняется из JS. */ --trd-steps: 0; /* Safe-зона — то, что на сайте не закрыто. Сверху шапка магазина и табы карточки товара: 20 + шапка 54 + 12 + табы 48 + 20 = 154 (на ≤1599 табы со скроллом, 58 → 164). Снизу бар покупки: 20 + 60 + 20 = 100. Схемы дизайнеров: 1650 × 917, 1450 × 701, 1320 × 605. Всё, что прижимается к краю экрана, обязано её отступить. Контент выше safe-зоны не режется — секция его докручивает (sectionOverflow в JS). */ --trd-safe-top: 154px; --trd-safe-bottom: 100px; /* Боковое поле секции */ --trd-safe-x: 50px; --trd-container: 1450px; /* Ширина контента на широком экране — та же, что у контейнера сайта: тема artelv.ru задаёт её на :root как --container-width (1553), по ней стоят шапка, меню и подвал. Без темы (локальная сборка) — те же 1553. */ --trd-content-max: var(--container-width, 1553px); /* Потолок колонки, см. .trd-col: контент плюс боковые поля секций (по 50) — края текстов встают по краям шапки сайта. JS снимает его готовым значением, см. syncLayout / readLength. */ --trd-col-max: calc(var(--trd-content-max) + var(--trd-safe-x) * 2); /* Палитра — ПОДСТАВИТЬ ИЗ МАКЕТА. Сейчас значения из RDC. */ --trd-text: #fff; --trd-accent: #F3E3CD; --trd-muted: rgba(255, 255, 255, .6); --trd-bg: #020A0A; /* Точка фокуса фона при кропе. Переопределяется на самой секции. */ --trd-media-focus: center center; color: var(--trd-text); background-color: var(--trd-bg); } @supports (height: 100svh) { .trd { --trd-vh: 100svh; } } /* --- Сброс дефолтных отступов у текстовых элементов (ритмика — через gap) --- */ .trd-title, .trd-subtitle, .trd-text { margin: 0; } /* ========================================================================== Стопка ========================================================================== */ /* Full-bleed: вырываемся из любого центрирующего контейнера страницы товара. Обрезку вылета даёт overflow-x:clip на .alandings (см. techstyles.css). */ .trd-stack { position: relative; width: var(--trd-vw); margin-left: calc(50% - var(--trd-vw) / 2); } /* Длина прокрутки = экран + длительность таймлайна: один шаг таймлайна равен одному экрану прокрутки. --trd-steps приходит из JS. */ .trd-stack--animated { height: calc((1 + var(--trd-steps)) * var(--trd-vh)); } .trd-stack__viewport { position: relative; } .trd-stack--animated .trd-stack__viewport { position: sticky; top: 0; height: var(--trd-vh); overflow: hidden; } /* Полоса обычного потока после стопки (FAQ и т.п.): тоже во всю ширину экрана, фон в полях — её собственный */ .trd-band { width: var(--trd-vw); margin-left: calc(50% - var(--trd-vw) / 2); } .trd-band--faq { background: #FFFFFF; } /* --- Колонка контента --- Вся вёрстка живёт в колонке шириной не больше --trd-col-max (от высоты экрана ширина не зависит). На всех макетных размерах она равна экрану. Шире колонка встаёт по центру, а по бокам остаются поля: фон секции, фото и всё, что прилегает к краю экрана, дотягиваются до краёв. Колонка — контейнер: все адаптивы написаны на @container trd и смотрят на её ширину, а не на ширину окна. */ /* Уменьшенный режим (телефон или планшет в горизонтали, .trd--scaled): десктоп сжат целиком, safe-зона — прежняя, без шапки сайта в натуральную величину. ≤1320 — свои значения, в блоке ниже */ .trd--scaled .trd-col > * { --trd-safe-top: 120px; --trd-safe-bottom: 112px; } .trd-col { position: relative; width: min(100%, var(--trd-col-max)); margin: 0 auto; container: trd / inline-size; } .trd-stack--animated .trd-col { height: 100%; } /* --- Телефон в горизонтали и другие низкие широкие экраны --- Высоты не хватает ни одной раскладке, поэтому стопка уменьшается целиком: колонка верстается как десктоп высотой не меньше 720 и сжимается до высоты экрана. Размеры и масштаб считает JS (syncLayout) и пишет сюда. */ .trd--scaled .trd-stack--animated .trd-col { --trd-vh: var(--trd-col-h); position: absolute; top: 0; left: 50%; width: var(--trd-col-w); height: var(--trd-col-h); margin: 0; transform: translateX(-50%) scale(var(--trd-scale)); transform-origin: 50% 0; } /* ========================================================================== Секция ========================================================================== */ /* Поля по бокам колонки. Секция стоит в колонке, но рисует и в полях: клип раздвинут до краёв экрана (clip-path вместо overflow:hidden), а фон (--trd-field, по умолчанию цвет секции) выносится наружу через border-image. Градиентный фон секции задавай в --trd-field — тогда он строится по всей ширине экрана без шва на краю колонки. Фото, видео и элементы, которые в макете прилегают к краю экрана, выносит в поля каждая секция сама — через --trd-field-x. */ .trd-section { --trd-field: linear-gradient(var(--trd-bg), var(--trd-bg)); --trd-field-x: max(0px, (var(--trd-screen-w, var(--trd-vw)) - 100cqw) / 2); position: relative; display: flow-root; width: 100%; min-height: var(--trd-vh); clip-path: inset(0 calc(-1 * var(--trd-field-x))); background-color: var(--trd-bg); border-image: var(--trd-field) fill 0 / 0 / 0 var(--trd-field-x); } /* В анимационном режиме секции сложены друг на друга. z-index проставляет JS: первая — самая верхняя. */ .trd-stack--animated .trd-section { position: absolute; inset: 0; height: var(--trd-vh); min-height: 0; will-change: transform; } /* --- Медиа-подложка: фото или видео на всю секцию и поля --- */ .trd-section__media { position: absolute; inset: 0 calc(-1 * var(--trd-field-x)); z-index: 0; } .trd-section__media img, .trd-section__media video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--trd-media-focus); } /* --- Safe-зона: гарантированные отступы сверху и снизу --- */ .trd-section__safe { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; min-height: var(--trd-vh); padding-top: var(--trd-safe-top); padding-bottom: var(--trd-safe-bottom); padding-left: var(--trd-safe-x); padding-right: var(--trd-safe-x); } /* Вертикальное положение контента внутри safe-зоны */ .trd-section__safe--center { justify-content: safe center; } .trd-section__safe--bottom { justify-content: flex-end; } .trd-container { width: 100%; max-width: var(--trd-container); margin: 0 auto; } /* ========================================================================== Типографика — общая шкала. КЕГЛИ ПОДСТАВИТЬ ИЗ МАКЕТА. Секции с заголовками не по шкале заводят свои классы (как в RDC). ========================================================================== */ .trd-title { font-size: 54px !important; font-weight: 800 !important; line-height: 110% !important; text-transform: uppercase; color: var(--trd-text) !important; } .trd-subtitle { font-size: 28px !important; font-weight: 500 !important; line-height: 120% !important; color: var(--trd-text) !important; } .trd-text { font-size: 16px !important; font-weight: 400 !important; line-height: 150% !important; color: var(--trd-text) !important; } .trd-text-accent { color: var(--trd-accent) !important; } /* --- gap-контейнеры (flex column). Отступ только МЕЖДУ элементами --- */ .trd-title-gap, .trd-subtitle-gap, .trd-text-gap { display: flex; flex-direction: column; } .trd-title-gap { gap: 50px; } .trd-subtitle-gap { gap: 16px; } .trd-text-gap { gap: 16px; } /* ========================================================================== Секция 1 — первый экран. Параметры — assets/section-1-spec.md. Фото на весь экран, слева белая плашка 720 по центру safe-зоны, слева по общему боковому полю --trd-safe-x (край шапки сайта). Под текстом ряд из трёх превью 160×160, он выходит за низ плашки на 65. Высота плашки = текст + фиксированное нижнее поле под превью (на макете 1650 плашка 540). Кегли не из общей шкалы .trd-title. ≥1600 плашка 720, превью 160 снизу 1450-1599 плашка 856, заголовок 40, превью 134 снизу (макет 1450) 1200-1449 плашка 790, превью 81 столбиком справа (макет 1320) Фон — одна картинка на все ширины, подгоняется так, чтобы было видно, как человек держит прибор (--trd-media-focus по брейкпоинтам): ≥1200 фото на весь экран 992-1199 то же + градиент к низу в #0F0F0F (из макета 992) ≤991 раскладка «фото сверху»: фото полосой --trd-hero-photo-h с тем же градиентом, ниже фон секции #0F0F0F; плашка по центру, сверху на --trd-hero-card-top — под прибором Адаптивы — в блоках @container ниже, «Секция 1». Цифры адаптивов — замеры макетов assets/section-1-*.webp/png. ========================================================================== */ .trd-hero { --trd-bg: #0F0F0F; --trd-hero-card-w: 720px; --trd-hero-card-pad-y: 50px; --trd-hero-card-pad-x: 50px; /* Нижнее поле плашки: под ним живут превью */ --trd-hero-card-pad-bottom: 170px; --trd-hero-title: 48px; --trd-hero-subtitle: 28px; --trd-hero-text: 16px; --trd-hero-gap: 20px; --trd-hero-thumb: 160px; --trd-hero-thumb-gap: 10px; --trd-hero-thumb-out: 65px; --trd-hero-title-color: #343434; --trd-hero-subtitle-color: #595959; --trd-hero-text-color: #343434; --trd-media-focus: center center; } .trd-hero__card { --trd-accent: #266141; position: relative; box-sizing: border-box; width: var(--trd-hero-card-w); max-width: 100%; padding: var(--trd-hero-card-pad-y) var(--trd-hero-card-pad-x) var(--trd-hero-card-pad-bottom); border-radius: 8px; background: #fff; /* Под плашкой — место на вылет превью: по центру safe-зоны стоит плашка вместе с превью, и превью не заходят под бар покупки */ margin-bottom: var(--trd-hero-thumb-out); } .trd-hero__content { display: flex; flex-direction: column; gap: var(--trd-hero-gap); } /* Текст в разметке в обычном регистре — капс даёт CSS */ .trd-hero__title { margin: 0; font-size: var(--trd-hero-title) !important; font-weight: 700 !important; line-height: 120% !important; text-transform: uppercase; color: var(--trd-hero-title-color) !important; } .trd-hero__subtitle { margin: 0; font-size: var(--trd-hero-subtitle) !important; font-weight: 700 !important; line-height: 120% !important; color: var(--trd-hero-subtitle-color) !important; } .trd-hero__text { margin: 0; font-size: var(--trd-hero-text) !important; font-weight: 300 !important; line-height: 150% !important; color: var(--trd-hero-text-color) !important; } /* Ряд превью по центру плашки, низом выходит за её край */ .trd-hero__thumbs { position: absolute; left: 50%; bottom: calc(-1 * var(--trd-hero-thumb-out)); display: flex; gap: var(--trd-hero-thumb-gap); transform: translateX(-50%); } .trd-hero__thumb { display: block; flex: none; width: var(--trd-hero-thumb); height: var(--trd-hero-thumb); max-width: none; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 34px 0 rgba(0, 0, 0, .19); } /* ========================================================================== Секция 2 — «Продуманная автономная конструкция». Параметры — assets/section-2-spec.md, тексты и иконки — assets/section-2-content.md. Белый фон. Сверху заголовок: плашка и две строки капсом — по семантике это ОДИН h2, куски внутри — span. Ниже лента из 7 слайдов: слайд — скруглённая карточка 1254×382, слева фото 756, справа серая панель 498 с иконкой, заголовком и текстом. Следующий слайд выглядывает справа. Окно ленты — во всю ширину экрана (вместе с полями): уходящий слайд уезжает за левый край экрана, а не обрезается по полю 50. Первый слайд стоит у поля — это паддинг ленты. Каждый шаг ставит к полю следующий слайд; последний тоже доезжает до поля, справа за ним пусто. Отступ слева у секции свой (--trd-features-x), а не общий --trd-safe-x: на макете 1320 он 50, а общее поле там уже 40. Адаптивы (блоки «Секция 2» ниже, цифры — assets/section-2-adaptive.md): ≥1600 слайд 1254×382 (макет section-2-v2-a) 1435-1599 слайд 931×209: фото 321, панель 610, заголовок секции 40 в одну строку, заголовок слайда 24 (макет section-2-v2-b) 1200-1434 то же, заголовок секции 38 (макет section-2-v2-c) ≤1199 вертикальная карточка: фото сверху, панель снизу. Карточки ленты одной высоты (по самой высокой), контент панели по центру ≤767 колонка 520 по центру ≤699 полотно: карточки столбиком, ленты нет ========================================================================== */ .trd-features { --trd-bg: #FFFFFF; --trd-features-x: 50px; /* Сколько окну ленты вылезти за поле секции до края экрана */ --trd-features-bleed: calc(var(--trd-features-x) + var(--trd-field-x)); --trd-features-gap: 20px; --trd-features-badge: 22px; --trd-features-badge-gap: 24px; --trd-features-title: 48px; --trd-feature-w: 1254px; --trd-feature-h: 382px; /* Фото 756 из 1254: при смене ширины слайда фото и панель худеют вместе */ --trd-feature-photo-w: calc(100% * 756 / 1254); --trd-feature-gap: 20px; --trd-feature-pad: 0 24px; --trd-feature-icon: 50px; --trd-feature-title: 28px; --trd-feature-text: 16px; --trd-features-title-color: #343434; --trd-features-accent: #266141; } .trd-features__safe { gap: var(--trd-features-gap); padding-left: var(--trd-features-x); padding-right: var(--trd-features-x); } /* --- Заголовок: плашка + две строки, один h2 --- */ .trd-features__heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--trd-features-badge-gap); margin: 0; } .trd-features__badge { padding: 10px 24px; border-radius: 4px; background: var(--trd-features-accent); font-size: var(--trd-features-badge) !important; font-weight: 500 !important; line-height: 120% !important; color: #fff !important; } /* Текст в разметке в обычном регистре — капс даёт CSS */ .trd-features__title { --trd-accent: var(--trd-features-accent); font-size: var(--trd-features-title) !important; font-weight: 700 !important; line-height: 110% !important; text-transform: uppercase; color: var(--trd-features-title-color) !important; } /* --- Лента --- flex: none — не сжиматься по высоте: на низких экранах (1320×820) блок выше safe-зоны, и с overflow:hidden лента срезала бы низ слайдов. Тогда блок просто встаёт по центру экрана, как на макете 1320 */ .trd-features__rail { flex: none; overflow: hidden; margin-left: calc(-1 * var(--trd-features-bleed)); margin-right: calc(-1 * var(--trd-features-bleed)); } /* Без JS лента никуда не едет — отдаём её обычному горизонтальному скроллу, иначе слайды дальше второго были бы недоступны */ .trd-stack:not(.trd-stack--animated) .trd-features__rail { overflow-x: auto; } .trd-features__track { display: flex; gap: var(--trd-feature-gap); padding: 0 var(--trd-features-bleed); will-change: transform; } /* --- Слайд --- */ .trd-feature { flex: none; display: flex; width: var(--trd-feature-w); height: var(--trd-feature-h); overflow: hidden; border-radius: 8px; /* Фото пришли со скруглёнными прозрачными углами. На стыке с панелью сквозь них просвечивал бы белый фон секции — фон слайда как у панели */ background: #F5F5F5; } .trd-feature__photo { display: block; flex: none; width: var(--trd-feature-photo-w); height: 100%; max-width: none; object-fit: cover; } /* Панель: контент по центру по высоте. Отступы между иконкой, заголовком и текстом одинаковые — 16 */ .trd-feature__panel { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; padding: var(--trd-feature-pad); background: #F5F5F5; } /* Квадрат с радиусом 4 и цвет значка зашиты в сами svg; размер — через viewBox, svg тянется под --trd-feature-icon */ .trd-feature__icon { display: block; flex: none; width: var(--trd-feature-icon); height: var(--trd-feature-icon); } .trd-feature__title { margin: 0; font-size: var(--trd-feature-title) !important; font-weight: 700 !important; line-height: 120% !important; color: #343434 !important; } .trd-feature__text { margin: 0; font-size: var(--trd-feature-text) !important; font-weight: 300 !important; line-height: 150% !important; color: #343434 !important; } /* ========================================================================== Секция 3 — «Официальная гарантия». Параметры — assets/section-3-spec.md, тексты — assets/section-3-content.md. Фото на весь экран по центру, слева по общему полю тёмная панель 604 по центру safe-зоны: плашка (как в секции 2), «18 МЕСЯЦЕВ», абзац. Плашка и заголовок — один h2. Без блюра под панелью. Уходит вправо. Адаптивы (блоки «Секция 3» ниже, цифры — assets/section-3-adaptive.md): ≥992 как десктоп, отступ — общее поле (50 → 40 на ≤1320) ≤991 «фото сверху», как секция 1: фото полосой с градиентом в #0F0F0F, панель во всю ширину (экран − 80), сверху на --trd-warranty-top — под прибором ≤767 колонка 520 по центру ≤699 телефон: фото и верх панели растут с шириной экрана ========================================================================== */ .trd-warranty { --trd-bg: #0F0F0F; --trd-media-focus: center center; --trd-warranty-x: var(--trd-safe-x); --trd-warranty-w: 604px; --trd-warranty-pad: 20px 50px; --trd-warranty-badge: 22px; --trd-warranty-title: 48px; --trd-warranty-text: 16px; } .trd-warranty .trd-section__safe { padding-left: var(--trd-warranty-x); padding-right: var(--trd-warranty-x); } .trd-warranty__panel { display: flex; flex-direction: column; gap: 16px; width: var(--trd-warranty-w); max-width: 100%; padding: var(--trd-warranty-pad); border-radius: 8px; background: rgba(24, 24, 24, .70); } .trd-warranty__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; } .trd-warranty__badge { padding: 10px 24px; border-radius: 4px; background: #266141; font-size: var(--trd-warranty-badge) !important; font-weight: 500 !important; line-height: 120% !important; color: #fff !important; } /* Текст в разметке в обычном регистре — капс даёт CSS */ .trd-warranty__title { font-size: var(--trd-warranty-title) !important; font-weight: 700 !important; line-height: 110% !important; text-transform: uppercase; color: #fff !important; } .trd-warranty__text { margin: 0; font-size: var(--trd-warranty-text) !important; font-weight: 300 !important; line-height: 150% !important; color: #fff !important; } /* ========================================================================== Секция 4 — «Универсальная адаптация системы». Параметры — assets/section-4-spec.md, тексты и иконки — assets/section-4-content.md. Десктоп — макеты assets/section-4-v2-*.webp, решения — assets/section-4-v2-spec.md. Фото на весь экран, лента из четырёх кадров по вертикали (.js-trd-rail, ось y), кадр высотой в экран, контент кадра по центру safe-зоны. Секция уходит вверх. кадр 1 вступление: тёмная панель 616 — плашка + заголовок, один h2 2-4 белый заголовок кадра (h3) и карточки сеткой в 2 колонки по 549: тёмная плашка, иконка, заголовок пункта (h4) и текст Фото лежат стопкой и перетекают кроссфейдом по кадрам (.js-trd-fade, их столько же, сколько кадров: у вступления и кадра 2 фото одно, поэтому use-1 стоит дважды). Адаптивы (блоки «Секция 4» ниже, цифры — assets/section-4-adaptive.md): 1200-1599 колонки карточек сужаются, чтобы влезть в поле ≤1199 полотно: колонка — плашка и заголовок, затем три кадра «фото во всю ширину (use-m-*.webp) + заголовок + пункты» ========================================================================== */ .trd-uses { --trd-bg: #0F0F0F; --trd-media-focus: center center; /* Кегли: заголовок секции, заголовок кадра, пункт */ --trd-uses-title: 48px; --trd-uses-name: 40px; --trd-uses-name-lh: 120%; --trd-uses-item-title: 24px; --trd-uses-item-text: 16px; --trd-uses-color: #fff; /* Заголовок кадра → карточки, сетка карточек */ --trd-uses-list-top: 14px; --trd-uses-col: 549px; --trd-uses-col-gap: 28px; --trd-uses-row-gap: 20px; --trd-uses-card-pad: 10px; --trd-uses-card-bg: rgba(24, 24, 24, .70); } /* Кадры лежат стопкой в порядке слайдов, каждый следующий выше предыдущего; приходящий проявляется поверх (opacity ставит JS) */ .trd-uses__media img { position: absolute; inset: 0; } .trd-uses__media img + img { opacity: 0; } /* --- Панель с заголовком (кадр 1) --- */ .trd-uses__panel { width: 616px; max-width: 100%; padding: 20px 50px; border-radius: 8px; background: rgba(24, 24, 24, .70); } .trd-uses__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin: 0; } .trd-uses__badge { padding: 10px 24px; border-radius: 4px; background: #266141; font-size: 22px !important; font-weight: 500 !important; line-height: 120% !important; color: #fff !important; } /* Текст в разметке в обычном регистре — капс даёт CSS. Акцент «адаптация» на десктопе белый, как весь заголовок (макет), в полотне — зелёный */ .trd-uses__title { --trd-accent: #fff; font-size: var(--trd-uses-title) !important; font-weight: 700 !important; line-height: 110% !important; text-transform: uppercase; color: #fff !important; } /* --- Лента кадров на весь экран --- */ .trd-uses__rail { position: absolute; z-index: 3; inset: 0; overflow: hidden; } /* Без JS лента никуда не едет — отдаём кадры обычному скроллу внутри секции, иначе кадры дальше первого были бы недоступны */ .trd-stack:not(.trd-stack--animated) .trd-uses__rail { overflow-y: auto; } .trd-uses__track { display: flex; flex-direction: column; will-change: transform; } /* Кадр — на высоту экрана, контент по центру safe-зоны. Контент выше safe-зоны — кадр растёт, лента докручивает его (addRail в JS) */ .trd-uses__frame { flex: none; display: flex; flex-direction: column; justify-content: safe center; min-height: var(--trd-vh); padding: var(--trd-safe-top) var(--trd-safe-x) var(--trd-safe-bottom); } /* Фото кадра для колонки (полотно, ≤1199). На десктопе фото — фон секции, общий слой на все кадры */ .trd-uses__photo { display: none; } .trd-uses__name { margin: 0; font-size: var(--trd-uses-name) !important; font-weight: 700 !important; line-height: var(--trd-uses-name-lh) !important; color: var(--trd-uses-color) !important; } /* Карточки — сеткой в 2 колонки, по строкам слева направо. В ряду — одной высоты (по высокой) */ .trd-uses__list { display: grid; grid-template-columns: repeat(2, minmax(0, var(--trd-uses-col))); gap: var(--trd-uses-row-gap) var(--trd-uses-col-gap); margin: var(--trd-uses-list-top) 0 0; padding: 0; list-style: none; } /* Пункт: иконка слева, верх иконки вровень с верхом заголовка пункта */ .trd-use { display: flex; align-items: flex-start; gap: 20px; margin: 0; padding: var(--trd-uses-card-pad); border-radius: 8px; background: var(--trd-uses-card-bg); } .trd-use::before { content: none; } /* Квадрат 37 с радиусом 4 и цвет значка зашиты в сами svg */ .trd-use__icon { display: block; flex: none; } .trd-use__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .trd-use__title { margin: 0; font-size: var(--trd-uses-item-title) !important; font-weight: 600 !important; line-height: 120% !important; color: var(--trd-uses-color) !important; } .trd-use__text { margin: 0; font-size: var(--trd-uses-item-text) !important; font-weight: 300 !important; line-height: 150% !important; color: var(--trd-uses-color) !important; } /* ========================================================================== Секция 5 — «Раздельные контуры теплообмена». Параметры — assets/section-5-spec.md, тексты — assets/section-5-content.md. Фото на весь экран (затемнение уже в картинке). По центру safe-зоны: белый заголовок в три строки и под ним тёмная панель с лентой карточек — механика секции 2 RDC. Панель — в ширину контента (не шире 1553); обрезку ленты даёт overflow:hidden на самой панели. Подсветка активной карточки — отдельный слой .trd-contours__marker под лентой: когда ряд упирается в свой конец, к оставшимся карточкам едет уже она сама (позиции считает JS, measureRail). Высота панели — по самой высокой карточке, остальные тянутся до неё. Секция уходит влево. Адаптивы (блоки «Секция 5» ниже, цифры — assets/section-5-adaptive.md): ≥1200 как десктоп, лента по скроллу ≤1199 полотно: лента листается пальцем (свайп, scroll-snap) и ведёт себя как в стопке — ряд едет до своего конца, дальше едет подсветка (JS, initSwipeMarkers). Поля и зазоры 40 (992) → 30 (768) → 20 (700) ≤699 телефон: фото полосой сверху с переходом в #0F0F0F, как в секциях 1 и 3; карточка в ширину панели ========================================================================== */ .trd-contours { --trd-contours-x: var(--trd-safe-x); /* Сколько панели вылезти за поле секции до края экрана (как у ленты секции 2). В полотне (≤1199) — 0: там панель в ширину контента */ --trd-contours-bleed: calc(var(--trd-contours-x) + var(--trd-field-x)); --trd-contours-radius: 0; --trd-contours-gap: 50px; --trd-contours-title: 48px; --trd-contours-pad-x: 50px; --trd-contours-pad-y: 20px; --trd-contour-w: 400px; --trd-contour-gap: 50px; --trd-contour-pad: 20px 40px; --trd-contour-title: 28px; --trd-contour-title-lh: 120%; --trd-contour-text: 16px; } .trd-contours__safe { gap: var(--trd-contours-gap); padding-left: var(--trd-contours-x); padding-right: var(--trd-contours-x); } /* Текст в разметке в обычном регистре — капс даёт CSS */ .trd-contours__title { margin: 0; font-size: var(--trd-contours-title) !important; font-weight: 700 !important; line-height: 110% !important; text-transform: uppercase; color: #fff !important; } /* --- Панель ленты: на всю ширину экрана, вместе с полями. Первая карточка стоит по заголовку (поле секции — в отступе ленты), уехавшие уходят за левый край экрана, следующие выглядывают справа --- */ .trd-contours__panel { position: relative; flex: none; overflow: hidden; margin-left: calc(-1 * var(--trd-contours-bleed)); margin-right: calc(-1 * var(--trd-contours-bleed)); border-radius: var(--trd-contours-radius); background: rgba(36, 36, 36, .50); backdrop-filter: blur(9.5px); -webkit-backdrop-filter: blur(9.5px); } /* Без JS лента никуда не едет — отдаём её обычному горизонтальному скроллу, иначе карточки дальше третьей были бы недоступны */ .trd-stack:not(.trd-stack--animated) .trd-contours__panel { overflow-x: auto; } .trd-contours__marker { position: absolute; z-index: 0; top: var(--trd-contours-pad-y); bottom: var(--trd-contours-pad-y); left: calc(var(--trd-contours-bleed) + var(--trd-contours-pad-x)); width: var(--trd-contour-w); border-radius: 8px; /* Градиент макета (222deg, светлая полоса на ~31% — блик), но зеленее: фирменный #266141 вместо почти серого, блик ярче и уже, зелёный гаснет позже (к ~85% вместо 76%). Рамки нет, вместо неё — тонкий светлый верхний край, тоже как отблеск. Перелив: на каждой карточке светлая полоса стоит в своём месте и под своим углом — от первой карточки к последней она уходит вдоль градиента (центр 22% → 70%), а градиент поворачивается (222° → 192°). Между карточками — плавно, ровно со скроллом: положение на ленте — --trd-rail-progress (JS, 0 — первая карточка, 1 — последняя) */ --trd-contours-band: calc(var(--trd-rail-progress, 0) * 48%); background: linear-gradient(calc(222deg - var(--trd-rail-progress, 0) * 30deg), rgba(38, 97, 65, .90) -14%, rgba(38, 97, 65, .85) calc(13% + var(--trd-contours-band)), rgba(80, 140, 106, .90) calc(22% + var(--trd-contours-band)), rgba(38, 97, 65, .85) calc(33% + var(--trd-contours-band)), rgba(38, 97, 65, .45) calc(58% + var(--trd-contours-band) * .75), rgba(38, 97, 65, .12) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); overflow: hidden; will-change: transform; } /* Блик при перелистывании: светлая косая полоса проходит по подсветке слева направо ровно со скроллом. Где она — задаёт --trd-rail-shift (JS: доля перехода к следующей карточке, 0 — стоит на карточке). Слой шире подсветки в 2,2 раза, полоса в его центре; сдвиг ±70% его ширины уводит полосу за край: в покое её не видно, остаётся статичный отблеск градиента. Назад по ленте блик идёт справа налево */ .trd-contours__marker::after { content: ''; position: absolute; inset: -20% -60%; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .10) 44%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, .10) 56%, rgba(255, 255, 255, 0) 62%); transform: translateX(calc((var(--trd-rail-shift, 0) * 2 - 1) * 70%)); pointer-events: none; } .trd-contours__track { position: relative; z-index: 1; display: flex; gap: var(--trd-contour-gap); padding: var(--trd-contours-pad-y) calc(var(--trd-contours-bleed) + var(--trd-contours-pad-x)); will-change: transform; } /* --- Карточка --- */ .trd-contour { flex: none; display: flex; flex-direction: column; gap: 10px; width: var(--trd-contour-w); padding: var(--trd-contour-pad); } .trd-contour__title { margin: 0; font-size: var(--trd-contour-title) !important; font-weight: 500 !important; line-height: var(--trd-contour-title-lh) !important; color: #fff !important; } .trd-contour__text { margin: 0; font-size: var(--trd-contour-text) !important; font-weight: 400 !important; line-height: 150% !important; color: #fff !important; } /* ========================================================================== Секция 6 — «Полный монтажный комплект». Параметры — assets/section-6-spec.md, тексты и иконки — assets/section-6-content.md. Светло-серый фон. Слева белая панель-окно 500 — вертикальная лента из 6 карточек (.js-trd-rail, ось y): столбик едет вверх, пока может, дальше стоит. Активная карточка заливается зелёным, текст и иконки белеют (иконки — currentColor) — ровно со скроллом, по --trd-step-on (JS — setStepOn), см. «Карточка». Отдельного слоя подсветки, который ехал под карточками, больше нет — на переходе он вставал между двумя карточками (замечание проверяющих). Слой .trd-kit__marker в разметке остаётся: по нему движок останавливает столбик у конца, а не прокручивает в пустоту; он скрыт. Справа плашка + заголовок (один h2, «монтажный» зелёный) и фото 1000 × 434: шесть фото стопкой, меняются кроссфейдом под карточку (.js-trd-fade). Секция уходит вверх. Панель по высоте — как правая часть (от верха плашки до низа фото): contain: size, ряд флекса растягивает её до высоты правой части. Адаптивы (блоки «Секция 6» ниже, цифры — assets/section-6-adaptive.md, новые макеты — section-6-v2-*): 1435-1599 заголовок 40, фото 800 × 261 1200-1434 фото 434 × 341 слева, справа заголовок и под ним панель — ряд карточек 422 вбок до края экрана (--trd-rail-axis: x) ≤1199 полотно: сверху плашка, заголовок и фото, под ними панель — ряд карточек вбок, листается пальцем (data-trd-swipe, initSwipeMarkers), как лента секции 5 ≤699 телефон: все карточки столбиком, без выделения ========================================================================== */ .trd-kit { --trd-bg: #EAEAEA; --trd-kit-x: var(--trd-safe-x); --trd-kit-panel-w: 500px; --trd-kit-pad-y: 20px; --trd-kit-pad-x: 50px; --trd-kit-gap: 20px; --trd-kit-item-w: 400px; --trd-kit-item-title: 24px; --trd-kit-item-title-w: 500; --trd-kit-item-text: 16px; --trd-kit-badge: 22px; --trd-kit-title: 48px; --trd-kit-photo-gap: 20px; --trd-kit-photo-h: 434px; --trd-kit-color: #343434; --trd-kit-green: #266141; } /* Панель и правая часть — в ряд, ряд по центру safe-зоны по высоте. wrap + align-content: ряд высотой по содержимому, а не во всю safe-зону — иначе stretch растянул бы панель на весь экран */ .trd-kit__safe { flex-direction: row; flex-wrap: wrap; align-content: safe center; align-items: stretch; justify-content: flex-start; gap: 50px; padding-left: var(--trd-kit-x); padding-right: var(--trd-kit-x); } /* --- Панель-окно со списком --- Своей высоты нет (contain: size) — её задаёт правая часть */ .trd-kit__panel { position: relative; flex: none; width: var(--trd-kit-panel-w); contain: size; overflow: hidden; border-radius: 8px; background: #fff; } /* Без JS лента никуда не едет — отдаём столбик обычному скроллу */ .trd-stack:not(.trd-stack--animated) .trd-kit__panel { overflow-y: auto; } /* Слой подсветки не показываем — красится сама карточка (см. шапку) */ .trd-kit__marker { display: none; } /* Карточки одной высоты — по самой высокой */ .trd-kit__track { position: relative; z-index: 1; display: grid; grid-auto-rows: 1fr; gap: var(--trd-kit-gap); padding: var(--trd-kit-pad-y) var(--trd-kit-pad-x); will-change: transform; } /* --- Карточка --- Активная — зелёная с белым текстом. Перекраска идёт ровно со скроллом: --trd-step-on (JS, setStepOn) — насколько карточка активна, 1 — стоит на ней. Зелёный перетекает с карточки на карточку в средней трети хода (--trd-kit-on: 0 до 0.35, 1 после 0.65), поэтому полупрозрачной фазы почти не видно и на остановке карточки всегда чистые. Перехода по времени нет: он шёл поверх движения ленты и мигал. */ .trd-kit-item { --trd-kit-on: clamp(0, (var(--trd-step-on, 0) - .35) / .3, 1); display: flex; flex-direction: column; gap: 10px; width: var(--trd-kit-item-w); padding: 20px 40px; border-radius: 8px; background-color: color-mix(in srgb, var(--trd-kit-green) calc(var(--trd-kit-on) * 100%), #F6F6F6); color: color-mix(in srgb, #fff calc(var(--trd-kit-on) * 100%), var(--trd-kit-color)); } /* Иконки разного размера стоят в одной клетке 37 × 37 по центру; цвет — currentColor, берут цвет карточки */ .trd-kit-item__icon { display: flex; align-items: center; justify-content: center; flex: none; width: 37px; height: 37px; margin-bottom: -2px; } .trd-kit-item__icon svg { display: block; } .trd-kit-item__title { margin: 0; font-size: var(--trd-kit-item-title) !important; font-weight: var(--trd-kit-item-title-w) !important; line-height: 120% !important; color: inherit !important; } .trd-kit-item__text { margin: 0; font-size: var(--trd-kit-item-text) !important; font-weight: 300 !important; line-height: 150% !important; color: inherit !important; } /* --- Справа: заголовок и фото --- */ .trd-kit__side { display: flex; flex-direction: column; gap: var(--trd-kit-photo-gap); flex: 1; min-width: 0; } .trd-kit__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; } .trd-kit__badge { padding: 10px 24px; border-radius: 4px; background: var(--trd-kit-green); font-size: var(--trd-kit-badge) !important; font-weight: 500 !important; line-height: 120% !important; color: #fff !important; } /* Текст в разметке в обычном регистре — капс даёт CSS */ .trd-kit__title { --trd-accent: var(--trd-kit-green); font-size: var(--trd-kit-title) !important; font-weight: 700 !important; line-height: 110% !important; text-transform: uppercase; color: var(--trd-kit-color) !important; } /* Фото: кадры стопкой, приходящий проявляется поверх (opacity ставит JS). Высота задана, ширина — сколько есть: на 1650 это 1000 × 434, уже фото обрезается по бокам, как на макетах 1450 и 1320 */ .trd-kit__photo { position: relative; overflow: hidden; height: var(--trd-kit-photo-h); border-radius: 8px; } .trd-kit__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .trd-kit__photo img + img { opacity: 0; } /* ========================================================================== Секция 7 — «Паспортные технические параметры». Параметры — assets/section-7-spec.md, тексты и иконки — assets/section-7-content.md. Последняя секция стопки: без data-trd-exit, уходит вверх вместе со страницей, дальше FAQ. Фото на весь экран; слева во всю высоту тёмная полоса 720 (в поле — до левого края экрана) с блюром. В ней по центру safe-зоны белый заголовок (переносы — сами) и четыре параметра: иконка по центру высоты текста, подпись, значение. Адаптивы (блоки «Секция 7» ниже, цифры — assets/section-7-adaptive.md): ≥1200 как десктоп ≤1199 полотно: полосы нет, фото полосой сверху с переходом в фон секции #272727, контент прижат к низу (150 до низа экрана, на телефоне 100 — по макетам) ========================================================================== */ .trd-specs { --trd-specs-w: 720px; /* Правое поле внутри полосы */ --trd-specs-pad-r: 50px; --trd-specs-x: var(--trd-safe-x); --trd-specs-gap: 40px; --trd-specs-title: 48px; --trd-specs-label: 16px; --trd-specs-value: 28px; } .trd-specs__shade { position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(-1 * var(--trd-field-x)); width: calc(var(--trd-field-x) + var(--trd-specs-w)); background: rgba(24, 24, 24, .70); backdrop-filter: blur(17.5px); -webkit-backdrop-filter: blur(17.5px); } .trd-specs__safe { gap: var(--trd-specs-gap); padding-left: var(--trd-specs-x); padding-right: var(--trd-specs-x); } /* Контент — в пределах полосы */ .trd-specs__safe > * { max-width: calc(var(--trd-specs-w) - var(--trd-safe-x) - var(--trd-specs-pad-r)); } /* Текст в разметке в обычном регистре — капс даёт CSS */ .trd-specs__title { margin: 0; font-size: var(--trd-specs-title) !important; font-weight: 700 !important; line-height: 110% !important; text-transform: uppercase; color: #fff !important; } .trd-specs__list { display: flex; flex-direction: column; gap: var(--trd-specs-gap); margin: 0; padding: 0; list-style: none; } /* Параметр: иконка по центру высоты текста */ .trd-spec { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; } .trd-spec::before { content: none; } /* Квадрат 37 с радиусом 4 и цвет значка зашиты в сами svg */ .trd-spec__icon { display: block; flex: none; } .trd-spec__body { display: flex; flex-direction: column; margin: 0; } .trd-spec__label { font-size: var(--trd-specs-label) !important; font-weight: 500 !important; line-height: 120% !important; color: #fff !important; } .trd-spec__value { font-size: var(--trd-specs-value) !important; font-weight: 700 !important; line-height: 120% !important; color: #fff !important; } /* ========================================================================== FAQ «Часто задаваемые вопросы и ответы» Не в стопке: обычный поток после неё, высота по содержимому. Аккордеон — открыт первый вопрос, остальные закрыты; переключает JS (initFaq). Строка вопроса — кнопка во всю ширину: текст и справа кружок со стрелкой 45, по центру друг друга. Кнопка открытого пункта смотрит стрелкой вниз, закрытого — вверх (так на макете). Ответ на широких экранах не заходит под колонку кружка, на мобилках идёт на всю ширину. Выровнен по ширине — так на всех макетах. Высота раскрытия анимируется через grid-template-rows 0fr → 1fr: браузер сам доводит до высоты текста, замерять её в JS не нужно. ========================================================================== */ /* Боковой отступ — общее поле (--trd-safe-x), как у секций стопки: края FAQ встают по краям их контента. Адаптивы — блоки «FAQ» в @container ниже, цифры — assets/faq-content.md */ .trd-faq { --trd-faq-x: var(--trd-safe-x); --trd-faq-top: 100px; --trd-faq-bottom: 100px; --trd-faq-gap: 50px; --trd-faq-item-gap: 20px; /* Светлая тема TRD (макет assets/faq-1650.png): белый фон и пункты, текст #343434, акцент и кружок открытого пункта — зелёные */ --trd-faq-color: #343434; --trd-faq-green: #266141; /* Кружок закрытого: два полупрозрачных слоя из SVG макета (#1E1E20 и #434349 по .45) — одним цветом с той же прозрачностью */ --trd-faq-icon-bg: rgba(54, 54, 57, .70); --trd-faq-title: 48px; --trd-faq-q: 32px; --trd-faq-a: 16px; --trd-faq-pad-y: 20px; --trd-faq-pad-x: 30px; --trd-faq-icon: 45px; --trd-faq-icon-gap: 20px; --trd-faq-a-gap: 10px; /* Правый отступ ответа на широких экранах. Здесь — до правого края кружка, как в RDC RED; в RDC GREEN был ещё зазор перед кружком: calc(var(--trd-faq-icon) + var(--trd-faq-icon-gap)). Сверить с макетом. */ --trd-faq-a-right: var(--trd-faq-icon); display: flex; flex-direction: column; gap: var(--trd-faq-gap); padding: var(--trd-faq-top) var(--trd-faq-x) var(--trd-faq-bottom); background: #FFFFFF; } .trd-faq__title { --trd-accent: var(--trd-faq-green); margin: 0; font-size: var(--trd-faq-title) !important; font-weight: 700 !important; line-height: 110% !important; text-transform: uppercase; color: var(--trd-faq-color) !important; } .trd-faq__list { display: flex; flex-direction: column; gap: var(--trd-faq-item-gap); } .trd-faq__item { padding: var(--trd-faq-pad-y) var(--trd-faq-pad-x); border-radius: 8px; background: #FFFFFF; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .10); } .trd-faq__q { margin: 0; } .trd-faq__head { display: flex; align-items: center; gap: var(--trd-faq-icon-gap); width: 100%; margin: 0; padding: 0; border: 0; background: none; font-family: inherit; font-size: var(--trd-faq-q) !important; font-weight: 500 !important; line-height: 120% !important; text-align: left; color: var(--trd-faq-color) !important; cursor: pointer; } /* Кружок со стрелкой из макета: два полупрозрачных слоя заливки и блюр под ним, стрелка — path из присланного SVG. */ .trd-faq__head::after { content: ''; flex: none; width: var(--trd-faq-icon); height: var(--trd-faq-icon); margin-left: auto; border-radius: 50%; /* Стрелка — из SVG макета (одна на оба состояния, закрытый пункт её переворачивает); кружок — цвет фона: серый у закрытого, зелёный у открытого */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cpath fill='white' d='M29.7394 18.4615L31.1539 19.8344L23.4448 27.3119C23.3213 27.4325 23.1744 27.5281 23.0126 27.5934C22.8508 27.6587 22.6773 27.6923 22.502 27.6923C22.3268 27.6923 22.1533 27.6587 21.9915 27.5934C21.8297 27.5281 21.6828 27.4325 21.5593 27.3119L13.8462 19.8344L15.2607 18.4628L22.5 25.481L29.7394 18.4615Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat var(--trd-faq-icon-bg); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .trd-faq__item.is-open .trd-faq__head::after { background-color: var(--trd-faq-green); } .trd-faq__head:focus-visible { outline: 1px solid var(--trd-faq-green); outline-offset: 4px; } .trd-faq__body { display: grid; grid-template-rows: 1fr; } /* Переходы включаются кадром позже начального состояния (trd-faq--ready), иначе при загрузке закрытые пункты сворачивались бы у всех на глазах. */ .trd-faq--ready .trd-faq__body { transition: grid-template-rows .3s ease; } .trd-faq--ready .trd-faq__head::after { transition: transform .3s ease, background-color .3s ease; } .trd-faq__inner { min-height: 0; overflow: hidden; } .trd-faq__a { margin: 0; padding: var(--trd-faq-a-gap) var(--trd-faq-a-right) 0 0; font-size: var(--trd-faq-a) !important; font-weight: 300 !important; line-height: 150% !important; text-align: justify; color: var(--trd-faq-color) !important; } /* Закрытые пункты — только когда JS подключился (класс ставит initFaq). Без него видны все ответы, иначе их нечем было бы открыть. */ .trd-faq--js .trd-faq__item:not(.is-open) .trd-faq__body { grid-template-rows: 0fr; } .trd-faq--js .trd-faq__item:not(.is-open) .trd-faq__head::after { transform: rotate(180deg); } /* ========================================================================== Брейкпоинты — по ширине колонки (@container trd). Здесь только общая база: контейнер, safe-зона, поля, шкала кеглей, FAQ. Правила секций добавляй в тот же блок своей ширины, с подписью секции. Значения шкалы — из RDC; сверить с макетами TRD. контейнер safe ↑/↓ поле title / subtitle ≥1600 1450 154/100 50 54 / 28 ≤1599 1250 164/100 — — ≤1344 1120 — — — ≤1320 — — 40 — ≤1199 920 100/100 — 45 / 28 ≤991 700 88/92 30 — ≤788 — — 20 38 / 28 ≤767 none — — — ≤699 — 76/84 — 18 / 16 ========================================================================== */ /* ===== Контейнер 1250 ===== */ @container trd (max-width: 1599px) { .trd-col > * { --trd-container: 1250px; /* Табы карточки товара со скроллом — 58, сверху 164 */ --trd-safe-top: 164px; } .trd-title-gap { gap: 40px; } /* Секция 1 — макет 1450 (section-1-v2-b): плашка 856, заголовок в 2 строки, превью 134 */ .trd-hero { --trd-hero-card-w: 856px; --trd-hero-card-pad-bottom: 103px; --trd-hero-title: 40px; --trd-hero-thumb: 134px; --trd-hero-thumb-gap: 7px; --trd-hero-thumb-out: 61px; } /* Секция 2 — макет 1450 (section-2-v2-b): заголовок 40 в одну строку, плашка ближе (10); слайд 931×209 — фото 321, панель 610 с полями 24 / 10, заголовок слайда 24. Жёсткие переносы заголовков здесь не нужны */ .trd-features { --trd-features-badge-gap: 10px; --trd-features-title: 40px; --trd-feature-w: 931px; --trd-feature-h: 209px; --trd-feature-photo-w: 321px; --trd-feature-pad: 0 10px 0 24px; --trd-feature-title: 24px; } .trd-features__title br, .trd-feature__title br { display: none; } /* Секция 3 — макет 1450 (section-3-v2-b): заголовок 40 */ .trd-warranty { --trd-warranty-title: 40px; } /* Секция 5 — макет 1450 (section-5-v2-b): заголовок 40 в одну строку, до панели 30 */ .trd-contours { --trd-contours-title: 40px; --trd-contours-gap: 30px; } .trd-contours__title br { display: none; } /* Секция 6 — макет 1450 (section-6-v2-b): заголовок 40, фото 261 */ .trd-kit { --trd-kit-title: 40px; --trd-kit-photo-h: 261px; } } /* ===== 1200-1449: секция 1. Граница 1434 — колонка без полосы прокрутки: на окне 1450 с обычной полосой Windows колонка 1435, это ещё макет 1450 ===== */ @container trd (min-width: 1200px) and (max-width: 1434px) { /* Секция 1 — макет 1320 (section-1-v2-c): плашка 790 по контенту, превью 81 столбиком на правом крае плашки — 50 наружу, по центру её высоты */ .trd-hero { --trd-hero-card-w: 790px; --trd-hero-card-pad-bottom: 50px; --trd-hero-title: 38px; --trd-hero-subtitle: 24px; --trd-hero-thumb: 81px; --trd-hero-thumb-gap: 8px; --trd-hero-thumb-out: 50px; } .trd-hero__thumbs { top: 50%; right: calc(-1 * var(--trd-hero-thumb-out)); bottom: auto; left: auto; flex-direction: column; transform: translateY(-50%); } /* Превью сбоку, а не снизу — место под плашкой не нужно */ .trd-hero__card { margin-bottom: 0; } /* Секция 2 — макет 1320 (section-2-v2-c): как 1450, заголовок 38 */ .trd-features { --trd-features-title: 38px; } /* Секция 3 — макет 1320 (section-3-v2-c): заголовок 38 */ .trd-warranty { --trd-warranty-title: 38px; } /* Секция 5 — макет 1320 (section-5-v2-c): как 1450, до панели 16, заголовок карточки 24 — шаг строк 33.6 (140), высота панели та же */ .trd-contours { --trd-contours-gap: 16px; --trd-contour-title: 24px; --trd-contour-title-lh: 140%; } /* Секция 6 — макет 1320 (section-6-v2-c): фото 434 × 341 слева, справа плашка, заголовок 38 и под ним панель — ряд карточек 422 вбок, до правого края экрана. Ось ленты — x (railAxis в JS). Фото и правый блок — по центру друг друга */ .trd-kit { --trd-kit-title: 38px; --trd-kit-photo-h: 341px; --trd-kit-pad-x: 20px; --trd-kit-item-w: 422px; --trd-kit-item-title: 20px; } /* Строки 1fr сверху и снизу забирают разницу высот фото и правого блока — правый блок встаёт по центру фото, гап до панели не растёт */ .trd-kit__safe { display: grid; grid-template-columns: 434px minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; align-content: safe center; align-items: start; gap: 0 40px; } .trd-kit__side { display: contents; } .trd-kit__heading { grid-column: 2; grid-row: 2; margin-bottom: 13px; } .trd-kit__photo { grid-column: 1; grid-row: 1 / 5; align-self: center; } .trd-kit__panel { --trd-rail-axis: x; grid-column: 2; grid-row: 3; width: auto; margin-right: calc(-1 * (var(--trd-kit-x) + var(--trd-field-x))); contain: none; } .trd-kit__track { display: flex; width: max-content; } } /* ===== Контейнер 1120 ===== */ @container trd (max-width: 1344px) { .trd-col > * { --trd-container: 1120px; } } /* ===== 1200-1320: поле 40 (safe — как у 1599: 164 / 100) ===== */ @container trd (max-width: 1320px) { .trd-col > * { --trd-safe-x: 40px; } .trd--scaled .trd-col > * { --trd-safe-top: 100px; --trd-safe-bottom: 100px; } } /* ===== Контейнер 920 ===== */ @container trd (max-width: 1199px) { .trd-col > * { --trd-container: 920px; /* Планшеты — safe-зона прежняя, шапка сайта тут своя */ --trd-safe-top: 100px; --trd-safe-bottom: 100px; } /* Полотно (планшеты, телефоны): секции по высоте контента, а не в экран — без пустоты снизу на высоких экранах, и растут, если контент выше экрана. В стопке (низкий альбомный экран) — по-прежнему экран */ .trd-stack--flow .trd-section, .trd-stack--flow .trd-section__safe { min-height: 0; } .trd-title { font-size: 45px !important; } /* Секция 1 — макет 992: плашка 568, заголовок 40, превью 136. Фон смещён вправо, чтобы человек с прибором не ушёл под плашку */ .trd-hero { --trd-hero-card-w: 568px; --trd-hero-card-pad-bottom: 80px; --trd-hero-title: 40px; --trd-hero-thumb: 136px; --trd-hero-thumb-gap: 7px; --trd-hero-thumb-out: 90px; --trd-media-focus: 63% center; } /* Градиент к низу — из макета 992. На ≤991 тот же градиент гасит низ полосы с фото */ .trd-hero .trd-section__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 15, 15, 0) 66.98%, #0F0F0F 100%); } /* Секция 1 в полотне: под плашкой держим место на вылет превью — высота секции по контенту (правило полотна ниже) */ .trd-stack--flow .trd-hero__card { margin-bottom: var(--trd-hero-thumb-out); } /* Секция 2 — макеты 992 / 768: вертикальные карточки, поля панели 20, контент панели по центру. Заголовок рвётся сам. Это уже полотно: карточки столбиком во всю ширину контента (на макете 635 — решили во всю ширину), фото растёт с карточкой в пропорции макета 635 × 266 */ .trd-features { --trd-features-x: 40px; --trd-features-gap: 20px; --trd-features-title: 40px; --trd-feature-w: 100%; --trd-feature-h: auto; --trd-feature-title: 28px; --trd-features-badge-gap: 24px; --trd-feature-photo-ratio: 635 / 266; --trd-feature-pad: 20px; } /* Жёсткие переносы заголовков (секции и слайдов 2, 6) — для десктопной ширины. Здесь строки длиннее, рвутся сами; иначе слайд 6 вырастал на строку и тянул за собой высоту всех карточек */ .trd-features__title br, .trd-feature__title br { display: none; } .trd-feature { flex-direction: column; } .trd-feature__photo { width: 100%; height: auto; aspect-ratio: var(--trd-feature-photo-ratio); } /* Секция 2 в полотне (≤1199): ленты нет, карточки столбиком (так решили). Двойной класс — перебить фолбэк без JS (overflow-x: auto) */ .trd-stack.trd-stack--flow .trd-features__rail { overflow: visible; margin-left: 0; margin-right: 0; } .trd-features__track { flex-direction: column; padding: 0; } /* Секция 3 — макет 992: как десктоп, заголовок 40 */ .trd-warranty { --trd-warranty-title: 40px; } /* Секция 4 — макет 992. Полотно: колонка вместо «фото слева + лента справа». Сверху плашка и заголовок (тёмный, без панели), дальше три кадра: фото кадра во всю ширину экрана, под ним заголовок и пункты. Общее фото слева и ленту отключаем — кадры идут потоком */ .trd-uses { --trd-bg: #FFFFFF; --trd-uses-x: 40px; --trd-uses-top: 40px; --trd-uses-bottom: 40px; /* заголовок секции → первое фото */ --trd-uses-head-gap: 40px; /* последний пункт кадра → фото следующего */ --trd-uses-frame-gap: 40px; --trd-uses-photo-ratio: 992 / 519; --trd-uses-photo-gap: 40px; --trd-uses-title: 40px; /* Кадры — тёмным по белому, пункты списком, без плашек */ --trd-uses-color: #343434; --trd-uses-name: 32px; --trd-uses-name-lh: 120%; --trd-uses-item-title: 16px; --trd-uses-list-gap: 40px; --trd-uses-card-pad: 0; --trd-uses-card-bg: none; } .trd-uses .trd-uses__media { display: none; } .trd-uses__panel { width: auto; padding: 0; border-radius: 0; background: none; } .trd-uses__title { --trd-accent: #266141; color: #343434 !important; } /* Перенос заголовков кадров после первого слова — только десктоп */ .trd-uses__name br { display: none; } /* Двойной класс — перебить фолбэк без JS (overflow-y: auto) */ .trd-stack.trd-stack--flow .trd-uses__rail { position: relative; z-index: auto; inset: auto; overflow: visible; padding: var(--trd-uses-top) var(--trd-uses-x) var(--trd-uses-bottom); } .trd-uses__track { gap: var(--trd-uses-frame-gap); } .trd-uses__frame { display: block; height: auto; min-height: 0; padding: 0; } /* Вступление — первый кадр ленты; до первого фото не зазор кадров, а head-gap */ .trd-uses__frame--intro { margin-bottom: calc(var(--trd-uses-head-gap) - var(--trd-uses-frame-gap)); } .trd-uses__list { display: flex; flex-direction: column; gap: var(--trd-uses-list-gap); margin-top: var(--trd-uses-list-gap); } .trd-use { border-radius: 0; } /* Фото кадра — во всю ширину экрана, мимо полей колонки */ .trd-uses__photo { display: block; width: calc(100% + var(--trd-uses-x) * 2); max-width: none; height: auto; aspect-ratio: var(--trd-uses-photo-ratio); margin: 0 calc(-1 * var(--trd-uses-x)) var(--trd-uses-photo-gap); object-fit: cover; } /* Секция 5 — макет 992: заголовок 40 в три строки, до панели 50, поля панели и зазор 40 */ .trd-contours__title br { display: inline; } .trd-contours { --trd-contours-gap: 50px; --trd-contours-title: 40px; /* Полотно: панель в ширину контента, со скруглением */ --trd-contours-bleed: 0px; --trd-contours-radius: 8px; --trd-contours-pad-x: 40px; --trd-contour-gap: 40px; } /* Полотно: лента листается пальцем. Ведёт себя как в стопке: ряд едет, пока не упрётся в конец, дальше к оставшимся карточкам едет подсветка. Остановки — невидимые якоря .trd-swipe-anchor со scroll-snap, их ставит и двигает ряд/подсветку JS (initSwipeMarkers). Двойной класс — перебить фолбэк без JS */ .trd-stack.trd-stack--flow .trd-contours__panel { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--trd-contours-pad-x); scrollbar-width: none; } .trd-stack--flow .trd-contours__panel::-webkit-scrollbar { display: none; } .trd-stack--flow .trd-contours__track { width: max-content; } /* Якорь остановки свайпа: невидимый, по одному на карточку */ .trd-swipe-anchor { position: absolute; top: 0; height: 1px; pointer-events: none; scroll-snap-align: start; } /* Секция 6 — макет 992. Полотно: сверху плашка, заголовок (40) и фото (высота 341), под ними панель — ряд карточек 606 вбок, листается пальцем, как лента секции 5 (data-trd-swipe, initSwipeMarkers). Панель в ширину контента (как решили для секции 5) */ .trd-kit { --trd-kit-x: 40px; --trd-kit-pad-x: 20px; --trd-kit-item-w: 606px; --trd-kit-item-title: 28px; --trd-kit-title: 40px; --trd-kit-photo-gap: 40px; --trd-kit-photo-h: 341px; } .trd-kit__safe { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 20px; } .trd-kit__side { order: -1; flex: none; } .trd-kit__panel { width: auto; contain: none; } .trd-stack.trd-stack--flow .trd-kit__panel { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--trd-kit-pad-x); scrollbar-width: none; } .trd-stack--flow .trd-kit__panel::-webkit-scrollbar { display: none; } .trd-kit__track { display: flex; width: max-content; } /* Секция 7 — макет 992. Полосы нет: фото полосой сверху (432 — фото целиком по высоте, по центру) с переходом в фон секции #272727, ниже тёмный фон. Высота секции — по контенту (полотно), поэтому верх контента задан от верха секции, как на макете: заголовок с 310 (992), 434 (768), 367 (700), с 262 на 350 (растёт с шириной). До низа — 150 (так на макетах 992 / 768 / 700). Заголовок 40, значение 24 */ .trd-specs { --trd-bg: #272727; --trd-specs-photo-h: 432px; --trd-specs-top: 310px; --trd-specs-bottom: 150px; --trd-specs-title: 40px; --trd-specs-value: 24px; } .trd-specs__shade { display: none; } .trd-specs .trd-section__media { bottom: auto; height: var(--trd-specs-photo-h); } .trd-specs .trd-section__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(39, 39, 39, 0) 66.98%, #272727 100%); } .trd-specs__safe { justify-content: flex-start; padding-top: var(--trd-specs-top); padding-bottom: var(--trd-specs-bottom); } .trd-specs__safe > * { max-width: none; } } /* ===== 789-991: safe 88 / 92, поле 30 ===== */ @container trd (max-width: 991px) { .trd-col > * { --trd-container: 700px; --trd-safe-top: 88px; --trd-safe-bottom: 92px; --trd-safe-x: 30px; } .trd-title-gap { gap: 32px; } /* Секция 1 — макет 768: «фото сверху». Фото полосой 535 (так на макетах 768 и 700), плашка по центру шириной контейнера (700) и начинается под прибором */ .trd-hero { --trd-hero-photo-h: 535px; --trd-hero-card-top: 445px; --trd-hero-card-w: var(--trd-container); --trd-hero-card-pad-x: 30px; --trd-hero-card-pad-bottom: 87px; --trd-hero-thumb-out: 70px; --trd-media-focus: 50% center; } .trd-hero .trd-section__media { bottom: auto; height: var(--trd-hero-photo-h); } .trd-hero .trd-section__safe { justify-content: flex-start; padding-top: var(--trd-hero-card-top); } .trd-hero__card { margin: 0 auto; } /* Секция 3 — макет 768: «фото сверху», как секция 1. Фото полосой 757 (масштаб, при котором прибор целиком в кадре), фокус на приборе. Панель во всю ширину с отступом 40 от краёв экрана, начинается под прибором. Абзац на всю ширину панели */ .trd-warranty { --trd-warranty-photo-h: 757px; --trd-warranty-top: 618px; --trd-warranty-x: 40px; --trd-warranty-w: 100%; --trd-warranty-pad: 20px 30px; --trd-media-focus: 77% center; } .trd-warranty .trd-section__media { bottom: auto; height: var(--trd-warranty-photo-h); } /* Тот же переход в #0F0F0F, что у секции 1 */ .trd-warranty .trd-section__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 15, 15, 0) 66.98%, #0F0F0F 100%); } .trd-warranty .trd-section__safe { justify-content: flex-start; padding-top: var(--trd-warranty-top); } /* Секция 4 — макет 768: поля 30, фото выше пропорции картинки (426 на 768 — по макету), от фото до заголовка кадра и от последнего пункта до следующего фото — 30 */ .trd-uses { --trd-uses-x: 30px; --trd-uses-bottom: 30px; --trd-uses-frame-gap: 30px; --trd-uses-photo-ratio: 768 / 426; --trd-uses-photo-gap: 30px; } /* Секция 5 — макет 768: поле 30 (общее поле здесь уже 20 — решили 30, как на остальных секциях), поля панели и зазор 30. Фокус фона — на отопителе (58% по X, как на макете) */ .trd-contours { --trd-contours-x: 30px; --trd-contours-pad-x: 30px; --trd-contour-gap: 30px; --trd-media-focus: 58% center; } /* Секция 6 — макет 768: поле 30, поля панели 30, заголовок → фото 30 */ .trd-kit { --trd-kit-x: 30px; --trd-kit-pad-x: 30px; --trd-kit-photo-gap: 30px; } /* Секция 7 — макет 768: поле 30, как в остальных секциях (на макете 50) */ .trd-specs { --trd-specs-x: 30px; --trd-specs-top: 434px; } /* FAQ — макеты 768 / 700: поле 30 (как в остальных секциях, на макете 50), заголовок 38. Вопрос 32, ответ 16, кружок 45 — как на десктопе */ .trd-faq { --trd-faq-x: 30px; --trd-faq-title: 38px; } } /* ===== 700-788: поле 20 ===== */ @container trd (max-width: 788px) { .trd-col > * { --trd-safe-x: 20px; } .trd-title { font-size: 38px !important; } } /* ===== Без контейнера ===== */ @container trd (max-width: 767px) { .trd-col > * { --trd-container: none; } /* FAQ — макет 700: колонка 520 по центру */ .trd-faq { --trd-faq-x: max(20px, (100cqw - 520px) / 2); } /* Секция 1 — макет 700: плашка 518, заголовок 38. Плашка уже — текст выше, поэтому она начинается выше, чем на 768 (так на макете) */ .trd-hero { --trd-hero-card-top: 317px; --trd-hero-card-w: 518px; --trd-hero-card-pad-bottom: 127px; --trd-hero-title: 38px; --trd-hero-thumb-out: 68px; } /* Секция 2 — макет 700: колонка 520 по центру, заголовок 38, фото в пропорции макета 520 × 266 */ .trd-features { --trd-features-x: max(20px, (100cqw - 520px) / 2); --trd-features-title: 38px; --trd-feature-photo-ratio: 520 / 266; } /* Секция 3 — макет 700: колонка 520 по центру, плашка 18, заголовок 38 */ .trd-warranty { --trd-warranty-top: 576px; --trd-warranty-x: max(20px, (100cqw - 520px) / 2); --trd-warranty-badge: 18px; --trd-warranty-title: 38px; --trd-media-focus: 76% center; } /* Секция 4 — макет 700: колонка 520 по центру (фото по-прежнему во всю ширину экрана), все отступы 20, заголовок 38 */ .trd-uses { --trd-uses-x: max(20px, (100cqw - 520px) / 2); --trd-uses-top: 20px; --trd-uses-bottom: 20px; --trd-uses-head-gap: 20px; --trd-uses-frame-gap: 20px; --trd-uses-photo-ratio: 700 / 361; --trd-uses-photo-gap: 20px; --trd-uses-list-gap: 20px; --trd-uses-title: 38px; } /* Секция 5 — макет 700: колонка 520 по центру, заголовок 38, поля панели и зазор 20 */ .trd-contours { --trd-contours-x: max(20px, (100cqw - 520px) / 2); --trd-contours-title: 38px; --trd-contours-pad-x: 20px; --trd-contour-gap: 20px; } /* Секция 6 — макет 700: колонка 520 по центру, поля панели 20, плашка 18, заголовок 38. Карточка — панель минус поле, зазор и 20 на краешек следующей (на макете 500, во всю панель — ряд казался одной карточкой) */ .trd-kit { --trd-kit-x: max(20px, (100cqw - 520px) / 2); --trd-kit-pad-x: 20px; --trd-kit-item-w: calc(100cqw - 2 * var(--trd-kit-x) - 60px); --trd-kit-badge: 18px; --trd-kit-title: 38px; } /* Секция 7 — макет 700: колонка 520 по центру. Значения в одну строку: самое длинное («3.3 кг (очень легкий…)») на макете ровно до края колонки, а у браузера ему не хватает пикселя. На телефоне (≤699) перенос снова разрешён — там оно по макету в две строки */ .trd-specs { --trd-specs-x: max(20px, (100cqw - 520px) / 2); --trd-specs-top: 367px; } .trd-spec__value { white-space: nowrap; } /* Подзаголовок на макете 700 в одну строку: он на 8 шире поля 458 и заходит в правый отступ плашки. На телефонах (≤699) перенос снова разрешён — там он по макету в две строки */ .trd-hero__subtitle { white-space: nowrap; } } /* ===== ≤699: safe 76 / 84, телефоны ===== */ @container trd (max-width: 699px) { .trd-col > * { --trd-safe-top: 76px; --trd-safe-bottom: 84px; } /* Заголовки на телефонах — 18, подзаголовки — 16 (договорённость по RDC) */ .trd-title { font-size: 18px !important; } .trd-subtitle { font-size: 16px !important; } .trd-title-gap { gap: 24px; } /* --- FAQ — макет 350: ответ идёт под кружок, на всю ширину пункта. Заголовок 22, вопрос 16, ответ 14, кружок 40, сверху и снизу 20, заголовок → список 20 --- */ .trd-faq { --trd-faq-x: 40px; --trd-faq-top: 20px; --trd-faq-bottom: 20px; --trd-faq-gap: 20px; --trd-faq-title: 22px; --trd-faq-q: 16px; --trd-faq-a: 14px; --trd-faq-icon: 40px; --trd-faq-icon-gap: 10px; --trd-faq-a-right: 0px; } } /* ========================================================================== Полотно: телефоны (уже 700). Само полотно включается уже 1200 — см. FLOW_MAX_W в JS; правила планшетов (700-1199) — в блоках @container выше. Стопки нет: секции идут обычной страницей. Включает JS (wantsFlow → .trd-stack--flow). Каждая секция — по высоте содержимого (правило в ≤1199). Что секции придётся доделать здесь самим (так было в RDC): - текст, прижатый к низу абсолютом, — перевести в поток (flex-column, justify-content: flex-end) и отбить сверху место под фото; - ленты (.js-trd-rail), подмену (.js-trd-swap) и колесо (.js-trd-wheel) разложить в столбик: в стопке их двигает JS, в полотне — нет. Двойной класс .trd-stack.trd-stack--flow нужен там, где правило должно перебить фолбэк без JS (.trd-stack:not(.trd-stack--animated) …). ========================================================================== */ @container trd (max-width: 699px) { /* Секция 1 — макет 350. Кегли как на макете (20 / 18 / 14), а не по договорённости 18 / 16 — так решили. Фото и верх плашки растут с шириной экрана (на 350: фото 303, плашка с 224), фокус на человеке. Плашка — с отступом 40 от краёв экрана (на 350 она 270). Превью выходят за плашку, поэтому под ней держим место на их вылет — иначе секция кончилась бы раньше превью. */ .trd-hero { --trd-hero-photo-h: calc(100cqw * 303 / 350); --trd-hero-card-top: calc(100cqw * 224 / 350); --trd-hero-card-w: calc(100% - 40px); --trd-hero-card-pad-y: 20px; --trd-hero-card-pad-x: 20px; --trd-hero-card-pad-bottom: 34px; --trd-hero-title: 20px; --trd-hero-subtitle: 18px; --trd-hero-text: 14px; --trd-hero-thumb: 74px; --trd-hero-thumb-gap: 4px; --trd-hero-thumb-out: 54px; --trd-media-focus: 87% center; } .trd-hero__card { margin-bottom: var(--trd-hero-thumb-out); } .trd-hero__subtitle { white-space: normal; } /* Секция 2 — макет 350. Ленты нет: карточки столбиком (так решили). Плашка во всю ширину, текст по центру. Фото 270 × 191, иконка 33, кегли 22 / 14 / 16 / 14 — как на макете */ .trd-features { --trd-features-x: 40px; --trd-features-badge: 14px; --trd-features-badge-gap: 16px; --trd-features-title: 22px; --trd-feature-photo-ratio: 270 / 191; --trd-feature-icon: 33px; --trd-feature-title: 16px; --trd-feature-text: 14px; } .trd-features__heading { align-items: stretch; } .trd-features__badge { padding-left: 16px; padding-right: 16px; text-align: center; } /* Секция 3 — макет 350. Фото и верх панели растут с шириной экрана (на 350: фото 359, панель с 306), фокус на приборе. Плашка во всю ширину, текст по центру, поля как у плашки секции 2 */ .trd-warranty { --trd-warranty-photo-h: calc(100cqw * 359 / 350); --trd-warranty-top: calc(100cqw * 306 / 350); --trd-warranty-x: 40px; --trd-warranty-pad: 20px; --trd-warranty-badge: 14px; --trd-warranty-title: 22px; --trd-warranty-text: 14px; --trd-media-focus: 73% center; } .trd-warranty__heading { align-items: stretch; } .trd-warranty__badge { padding-left: 16px; padding-right: 16px; text-align: center; } /* Секция 4 — макет 350: поля 40, фото выше пропорции картинки (201 на 350 — по макету), заголовок 22, заголовок кадра 18, текст пункта 14. Плашка во всю ширину, как в секциях 2–3 */ .trd-uses { --trd-uses-x: 40px; --trd-uses-photo-ratio: 350 / 201; --trd-uses-title: 22px; --trd-uses-name: 18px; --trd-uses-item-text: 14px; } .trd-uses__heading { align-items: stretch; } /* Поля 10, а не 16, как в секциях 2–3: текст плашки длиннее (242 при 14), с полями 16 он не влез бы в 270 и разбился на две строки */ .trd-uses__badge { padding-left: 10px; padding-right: 10px; font-size: 14px !important; text-align: center; } /* Секция 5 — макет 350. Фото полосой сверху с переходом в #0F0F0F, как в секциях 1 и 3; полоса и верх заголовка растут с шириной экрана (на 350: фото 360, заголовок с 200), фокус на отопителе. Заголовок 22, гап до панели 20. Заголовок карточки 18, текст 14. Карточки — столбиком, как в секции 6 (макет section-5-v2-350): без свайпа и без подсветки, зазор 15 (шаг карточек на макете). Заголовок и панель — на 20 от краёв экрана */ .trd-contours { --trd-bg: #0F0F0F; --trd-media-focus: 63% center; --trd-contours-x: 20px; --trd-contours-gap: 20px; --trd-contours-title: 22px; --trd-contours-pad-x: 20px; --trd-contour-gap: 15px; --trd-contour-pad: 20px; --trd-contour-title: 18px; --trd-contour-text: 14px; } .trd-stack.trd-stack--flow .trd-contours__panel { overflow: visible; } .trd-contours__track, .trd-stack--flow .trd-contours__track { flex-direction: column; width: auto; } .trd-contour { width: auto; } .trd-contours__marker { display: none; } .trd-contours .trd-section__media { bottom: auto; height: calc(100cqw * 360 / 350); } .trd-contours .trd-section__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 15, 15, 0) 66.98%, #0F0F0F 100%); } .trd-contours .trd-section__safe { justify-content: flex-start; padding-top: calc(100cqw * 200 / 350); } /* Секция 6 — макет 350. Все карточки столбиком, без свайпа и без выделения: подсветки нет, --trd-kit-on обнулён — все карточки обычные. Плашка во всю ширину (14), заголовок 22, фото 270 × 181 — растёт с шириной, гап фото ↔ панель 30. Заголовок карточки 16/600 (на макете полужирный), текст 14. Сверху и снизу секции — 20 */ .trd-kit { --trd-kit-x: 40px; --trd-kit-badge: 14px; --trd-kit-title: 22px; --trd-kit-item-title: 16px; --trd-kit-item-title-w: 600; --trd-kit-item-text: 14px; } .trd-kit__safe { gap: 30px; padding-top: 20px; padding-bottom: 20px; } .trd-kit__heading { align-items: stretch; } /* Поля 10, как у плашки секции 4: с 16 текст не влезал в 270 */ .trd-kit__badge { padding-left: 10px; padding-right: 10px; text-align: center; } .trd-kit__photo { height: auto; aspect-ratio: 270 / 181; } .trd-stack.trd-stack--flow .trd-kit__panel { overflow: visible; } .trd-kit__track { flex-direction: column; width: auto; } .trd-kit-item { width: auto; } .trd-kit-item { --trd-kit-on: 0; } /* Секция 7 — макет 350: фото полосой 300 (растёт с шириной экрана), фокус 70% — отопитель целиком, как на макете; заголовок 24 (так на макете), подпись 14, значение 18, все гапы 20, до низа экрана 100 */ .trd-specs { --trd-media-focus: 70% center; --trd-specs-x: 40px; --trd-specs-photo-h: calc(100cqw * 300 / 350); --trd-specs-top: calc(100cqw * 262 / 350); --trd-specs-bottom: 100px; --trd-specs-gap: 20px; --trd-specs-title: 24px; --trd-specs-label: 14px; --trd-specs-value: 18px; } .trd-spec__value { white-space: normal; } } /* Лёгкое появление в полотне: блок с .js-trd-reveal проявляется и чуть всплывает, когда доходит до экрана. Классы ставит JS (initFlow). */ .trd-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .trd-reveal.is-visible { opacity: 1; transform: none; } /* ========================================================================== Отладка: видно границы safe-зоны и контейнера. Класс .trd--debug на .trd, снять перед сдачей. ========================================================================== */ .trd--debug .trd-section__safe > * { outline: 1px dashed rgba(243, 227, 205, .5); } .trd--debug .trd-container { outline: 1px dashed rgba(243, 227, 205, .35); }