/* ========================================================================== ARTELV RDC II GREEN — база под скролл-стопку на GSAP ScrollTrigger МЕХАНИКА .rdc-stack — «рельса» скролла, её высота задаёт длину прокрутки .rdc-stack__viewport — sticky-окно на высоту экрана, внутри него всё живёт .rdc-col — колонка контента: равна экрану, но не шире 1653 и двух высот экрана (по бокам поля). Контейнер для всех адаптивов: они на @container rdc, а не на @media .rdc-section — секция на всю колонку и высоту экрана, лежат стопкой (absolute + z-index). Фон, фото и всё, что в макете прилегает к краю экрана, выносятся в поля до краёв экрана; контент остаётся в колонке Первая секция сверху стопки, каждая следующая — под ней. При скролле верхняя уезжает (влево / вправо / вверх — см. data-rdc-exit), открывая следующую. Пиннинг сделан на position:sticky, а НЕ на ScrollTrigger pin:true — иначе GSAP вставляет pin-spacer в DOM и ломает вёрстку страницы товара OpenCart. БЕЗ JS стопка не включается: секции просто идут друг за другом обычным потоком. Анимационный режим добавляет .rdc-stack--animated — если на странице видна колонка полноэкранных секций, значит класс не проставился, смотри консоль. ТОКЕНЫ (на элементе) H2 → .rdc-title H3 → .rdc-subtitle основной текст → .rdc-text ширина контента→ .rdc-container Отступы = gap на родителе (flex column), никаких margin: после H2 → .rdc-title-gap после H3 → .rdc-subtitle-gap текст-текст → .rdc-text-gap SAFE-ЗОНА (из таблицы макета, верх / низ): ≥1200px → 120 / 112 ≤1199px → 100 / 100 ≤991px → 88 / 92 ≤575px → 76 / 84 БРЕЙКПОИНТЫ — ширина колонки, а не окна. Колонка не включает полосу прокрутки, поэтому на Windows с обычной полосой раскладка переключается на ~15px раньше, всегда в сторону более узкой — это безопасно. Низкий широкий экран (телефон в горизонтали) — .rdc--scaled: стопка верстается как десктоп и уменьшается до высоты экрана, см. syncLayout в JS. ========================================================================== */ .rdc { /* Высота экрана. svh не скачет при появлении адресной строки на мобильных. */ --rdc-vh: 100vh; /* Ширина экрана без полосы прокрутки. JS перезаписывает в px, см. rdc-2.js. */ --rdc-vw: 100vw; /* Хвост стопки, в долях от одного «ухода»: сколько последняя секция стоит перед тем, как стопка отпустит скролл. Нулевой, как и паузы между секциями: стоящий экран при крутящемся колесе читается как залипание. Последнюю секцию всё равно видно — она уходит вверх вместе со страницей, открывая FAQ. Единственный источник правды: JS читает это значение отсюда. */ --rdc-hold: 0; /* Лента внутри секции, в тех же долях экрана: сколько скролла уходит на переход к следующему шагу и сколько он стоит после. Пауза нулевая по той же причине, что и между секциями; вернуть её можно здесь же. Шаг рассчитан на карточку. Лента из полноэкранных кадров переопределяет его на себе: JS читает токены с самой .js-rdc-rail. */ --rdc-rail-step: 0.6; --rdc-rail-hold: 0; /* Длительность таймлайна в «экранах». Заполняется из JS, см. rdc-2.js. */ --rdc-steps: 0; /* Нижняя safe-зона заодно держит место под залипшее меню магазина, поэтому всё, что прижимается к низу экрана, обязано её отступить — иначе текст окажется под меню. Отдельного токена под меню нет и не нужно. */ --rdc-safe-top: 120px; --rdc-safe-bottom: 112px; /* Боковой пэддинг секции. Контент первого экрана прижат к краю экрана именно по нему, а не по центрированному контейнеру. */ --rdc-safe-x: 50px; --rdc-container: 1450px; /* Ширина контента на широком экране — та же, что у контейнера сайта: тема artelv.ru задаёт её на :root как --container-width (1553), по ней стоят шапка, меню и подвал. Поменяют в теме — лендинг поедет следом. Без темы (локальная сборка) — те же 1553. */ --rdc-content-max: var(--container-width, 1553px); /* Потолок колонки, см. .rdc-col: контент плюс боковые отступы секций (--rdc-safe-x, на десктопе 50) — края текстов встают по краям шапки. JS снимает его готовым значением, см. syncLayout. */ --rdc-col-max: calc(var(--rdc-content-max) + var(--rdc-safe-x) * 2); /* Шире этой пропорции фото секций не растягиваются, см. .rdc--superwide. JS читает его отсюда. */ --rdc-media-ratio: 2.4; /* Палитра: текст белый, акцент — песочный. Зелёного текста на лендинге нет. */ --rdc-text: #fff; --rdc-accent: #F3E3CD; --rdc-muted: rgba(255, 255, 255, .6); --rdc-bg: #020A0A; /* Галочка в кружке — пиксельная, из макета, построчные прямоугольники сведены в один path. crispEdges не даёт браузеру размыть их края. Одна и та же в шестой и десятой секциях, размер задаёт место вызова. */ --rdc-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='white' d='M5 0h6v1H5zM3 1h2v1H3zM11 1h2v1h-2zM2 2h1v1H2zM13 2h1v1h-1zM1 3h1v2H1zM14 3h1v2h-1zM0 5h1v6H0zM15 5h1v6h-1zM11 5h2v2h-2zM10 7h2v1h-2zM4 8h2v2H4zM9 8h2v1H9zM8 9h2v1H8zM5 10h4v1H5zM1 11h1v2H1zM6 11h2v1H6zM14 11h1v2h-1zM2 13h1v1H2zM13 13h1v1h-1zM3 14h2v1H3zM11 14h2v1h-2zM5 15h6v1H5z'/%3E%3C/svg%3E"); /* Точка фокуса фона при кропе. Переопределяется на самой секции — например, у первого экрана на узких экранах уезжает вправо, см. брейкпоинт 991. */ --rdc-media-focus: center center; color: var(--rdc-text); background-color: var(--rdc-bg); } @supports (height: 100svh) { .rdc { --rdc-vh: 100svh; } } /* --- Сброс дефолтных отступов у текстовых элементов (ритмика — через gap) --- */ .rdc-title, .rdc-subtitle, .rdc-text { margin: 0; } /* ========================================================================== Стопка ========================================================================== */ /* Full-bleed: вырываемся из любого центрирующего контейнера страницы товара. Обрезку вылета даёт overflow-x:clip на .alandings (см. techstyles.css). */ .rdc-stack { position: relative; width: var(--rdc-vw); margin-left: calc(50% - var(--rdc-vw) / 2); } /* Длина прокрутки = экран + длительность таймлайна: один шаг таймлайна равен одному экрану прокрутки. --rdc-steps приходит из JS, там же единственная формула — здесь ничего пересчитывать не нужно. */ .rdc-stack--animated { height: calc((1 + var(--rdc-steps)) * var(--rdc-vh)); } .rdc-stack__viewport { position: relative; } .rdc-stack--animated .rdc-stack__viewport { position: sticky; top: 0; height: var(--rdc-vh); overflow: hidden; } /* Полоса обычного потока после стопки (FAQ): тоже во всю ширину экрана, фон в полях — её собственный */ .rdc-band { width: var(--rdc-vw); margin-left: calc(50% - var(--rdc-vw) / 2); } .rdc-band--faq { background: #050503; } /* --- Колонка контента --- Вся вёрстка живёт в колонке шириной не больше --rdc-col-max (1653: тексты по краям шапки сайта) и не больше двух высот экрана (ультравайд). На всех макетных размерах она равна экрану — ничего не меняется. Шире колонка встаёт по центру, а по бокам остаются поля. Пустыми они не бывают: фон секции, фото и всё, что в макете прилегает к краю экрана, дотягиваются до краёв (см. .rdc-section). Колонка — контейнер: все адаптивы написаны на @container rdc и смотрят на её ширину, а не на ширину окна. Иначе на ультравайде и в уменьшенном режиме (см. .rdc--scaled) раскладка выбиралась бы по чужой ширине. */ .rdc-col { position: relative; width: min(100%, var(--rdc-col-max), var(--rdc-vh) * 2); margin: 0 auto; container: rdc / inline-size; } .rdc-stack--animated .rdc-col { height: 100%; } /* --- Телефон в горизонтали и другие низкие широкие экраны --- Высоты не хватает ни одной раскладке, поэтому стопка уменьшается целиком: колонка верстается как десктоп высотой не меньше 720 и сжимается до высоты экрана. Размеры и масштаб считает JS (syncLayout) и пишет сюда. --rdc-vh внутри колонки — виртуальная высота: секции верстаются по ней, а длина прокрутки и липкий экран снаружи по-прежнему считаются по настоящей. */ .rdc--scaled .rdc-stack--animated .rdc-col { --rdc-vh: var(--rdc-col-h); position: absolute; top: 0; left: 50%; width: var(--rdc-col-w); height: var(--rdc-col-h); margin: 0; transform: translateX(-50%) scale(var(--rdc-scale)); transform-origin: 50% 0; } /* ========================================================================== Секция ========================================================================== */ /* Поля по бокам колонки. Секция стоит в колонке, но рисует и в полях: клип раздвинут до краёв экрана (clip-path вместо overflow:hidden), а фон (--rdc-field, по умолчанию цвет секции) выносится наружу через border-image — градиент при этом строится по всей ширине экрана, без шва на краю колонки. Всё это едет вместе с секцией, когда та уезжает. Без полей вынос нулевой и клип ровно по секции. По вертикали клип ровно по секции — как overflow:hidden. flow-root держит тот же контекст форматирования, что давал overflow. Фото, видео и элементы, которые в макете прилегают к краю экрана, выносит в поля каждая секция сама — через --rdc-field-x. Контент остаётся в колонке и выровнен так же, как на макете 1650. */ .rdc-section { --rdc-field: linear-gradient(var(--rdc-bg), var(--rdc-bg)); --rdc-field-x: max(0px, (var(--rdc-screen-w, var(--rdc-vw)) - 100cqw) / 2); position: relative; display: flow-root; width: 100%; min-height: var(--rdc-vh); clip-path: inset(0 calc(-1 * var(--rdc-field-x))); background-color: var(--rdc-bg); border-image: var(--rdc-field) fill 0 / 0 / 0 var(--rdc-field-x); } /* В анимационном режиме секции сложены друг на друга. z-index проставляет JS: первая — самая верхняя. */ .rdc-stack--animated .rdc-section { position: absolute; inset: 0; height: var(--rdc-vh); min-height: 0; will-change: transform; } /* --- Медиа-подложка: фото или видео на всю секцию и поля --- На широком экране фото не кончается у колонки, а идёт до краёв экрана: cover добирает ширину за счёт верха и низа кадра. */ .rdc-section__media { position: absolute; inset: 0 calc(-1 * var(--rdc-field-x)); z-index: 0; } .rdc-section__media img, .rdc-section__media video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--rdc-media-focus); } /* --- Сверхширокие экраны (32:9 и т.п.) --- До 21:9 (--rdc-media-ratio) фото идёт до краёв экрана и теряет по краю сверху и снизу — прицел в кадре остаётся. Дальше кроп съел бы половину высоты, а фото в 1654px ещё и поплыли бы, поэтому фото останавливается на этой пропорции и растворяется в фоне секции — далеко за контентом. Класс ставит JS (syncLayout). */ .rdc--superwide .rdc-section__media { inset: 0 calc((var(--rdc-vh) * var(--rdc-media-ratio) - 100cqw) / -2); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); } /* --- Safe-зона: гарантированные отступы сверху и снизу --- */ .rdc-section__safe { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; min-height: var(--rdc-vh); padding-top: var(--rdc-safe-top); padding-bottom: var(--rdc-safe-bottom); padding-left: var(--rdc-safe-x); padding-right: var(--rdc-safe-x); } /* Вертикальное положение контента внутри safe-зоны */ .rdc-section__safe--center { justify-content: center; } .rdc-section__safe--bottom { justify-content: flex-end; } .rdc-container { width: 100%; max-width: var(--rdc-container); margin: 0 auto; } /* ========================================================================== Типографика ========================================================================== */ .rdc-title { font-size: 48px !important; font-weight: 600 !important; line-height: 120% !important; color: var(--rdc-text) !important; } .rdc-subtitle { font-size: 32px !important; font-weight: 600 !important; line-height: 130% !important; color: var(--rdc-text) !important; } .rdc-text { font-size: 16px !important; font-weight: 500 !important; line-height: 150% !important; color: var(--rdc-text) !important; } .rdc-text-accent { color: var(--rdc-accent) !important; } /* --- gap-контейнеры (flex column). Отступ только МЕЖДУ элементами --- */ .rdc-title-gap, .rdc-subtitle-gap, .rdc-text-gap { display: flex; flex-direction: column; } .rdc-title-gap { gap: 50px; } .rdc-subtitle-gap { gap: 24px; } .rdc-text-gap { gap: 16px; } /* ========================================================================== Секция 1 — первый экран с фоновым видео. Кегли не из общей шкалы .rdc-title: первый экран крупнее остальных секций. Свёрстан только десктоп 1650+, мобильных правок пока нет. ========================================================================== */ .rdc-hero__content { display: flex; flex-direction: column; gap: 60px; max-width: 630px; } .rdc-hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0; font-size: 32px !important; font-weight: 500 !important; line-height: 120% !important; color: var(--rdc-text) !important; } .rdc-hero__eyebrow-icon { flex: none; display: block; } /* Текст в разметке в обычном регистре — капс даёт CSS, чтобы поиск и скринридеры получали нормальное написание */ .rdc-hero__title { margin: 0; font-size: 54px !important; font-weight: 700 !important; line-height: 110% !important; text-transform: uppercase; color: var(--rdc-text) !important; } .rdc-hero__text { margin: 0; font-size: 16px !important; font-weight: 300 !important; line-height: 150% !important; color: var(--rdc-text) !important; } .rdc-hero__text b { font-weight: 700; } /* ========================================================================== Секция 2 — преимущества с горизонтальной лентой карточек. Свёрстан только десктоп, мобильных правок пока нет. Панель прижата слева к safe-зоне и уходит за правый край экрана — поэтому отрицательный margin-right, а не отдельный full-bleed контейнер. На широком экране панель кончается у края колонки, а не экрана: лента и подсветка не уходят за сетку страницы. Обрезку ленты даёт overflow:hidden на самой панели. Подсветка активной карточки — отдельный слой .rdc-cards__marker под лентой, а не фон карточки. Так она может доехать до последних карточек тогда, когда лента уже упёрлась в конец и стоит. Позиции считает JS, см. rdc-2.js. ========================================================================== */ .rdc-features { /* Внутренние поля панели. По горизонтали совпадают с safe-зоной, чтобы первая карточка стояла ровно на своей «второй ступеньке» отступа. */ --rdc-cards-pad-x: var(--rdc-safe-x); --rdc-cards-pad-y: 20px; --rdc-card-w: 400px; --rdc-card-gap: 68px; } .rdc-features__safe { gap: 50px; } .rdc-features__heading { display: flex; flex-direction: column; gap: 9px; } .rdc-features__title { margin: 0; font-size: 54px !important; font-weight: 700 !important; line-height: 110% !important; text-transform: uppercase; color: var(--rdc-text) !important; } .rdc-features__subtitle { margin: 0; font-size: 28px !important; font-weight: 500 !important; line-height: 110% !important; color: var(--rdc-text) !important; } /* --- Панель ленты --- */ .rdc-cards { position: relative; overflow: hidden; margin-right: calc(var(--rdc-safe-x) * -1); border-radius: 8px; background: rgba(2, 10, 10, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Без JS лента никуда не едет — отдаём её обычному горизонтальному скроллу, иначе половина карточек была бы недоступна. */ .rdc-stack:not(.rdc-stack--animated) .rdc-cards { overflow-x: auto; } .rdc-cards__marker { position: absolute; z-index: 0; top: var(--rdc-cards-pad-y); bottom: var(--rdc-cards-pad-y); left: var(--rdc-cards-pad-x); width: var(--rdc-card-w); border: 1px solid rgba(243, 227, 205, .18); border-radius: 8px; background: linear-gradient(135deg, rgba(47, 88, 55, .55), rgba(20, 37, 26, .75)); will-change: transform; } .rdc-cards__track { position: relative; z-index: 1; display: flex; gap: var(--rdc-card-gap); padding: var(--rdc-cards-pad-y) var(--rdc-cards-pad-x); will-change: transform; } /* --- Карточка --- */ .rdc-card { flex: none; display: flex; flex-direction: column; gap: 10px; width: var(--rdc-card-w); padding: 20px 40px; } /* Цвет иконок зашит в сами svg (fill="white") — переопределять его здесь нечем, правка цвета = правка всех шести иконок в разметке. */ .rdc-card__icon { display: block; } .rdc-card__icon svg { display: block; } .rdc-card__body { display: flex; flex-direction: column; gap: 10px; } .rdc-card__title { margin: 0; font-size: 28px !important; font-weight: 500 !important; line-height: 120% !important; color: var(--rdc-text) !important; } .rdc-card__text { margin: 0; font-size: 16px !important; font-weight: 400 !important; line-height: 150% !important; color: var(--rdc-muted) !important; } /* ========================================================================== Секция 3 — прицельные марки. Два слоя, живущие независимо: фон — четыре снимка стопкой в .rdc-section__media. Не едут, перетекают кроссфейдом. Уходящий не гасим: его всё равно перекрывает верхний, а если гасить оба разом, в середине перехода провалится яркость. лента — .js-rdc-rail во всю секцию, внутри четыре кадра по ширине экрана. Едет влево на экран за шаг. Кадр именно во весь экран, а не по ширине подложки. Подложки шириной 688 встали бы в ленте встык, и на любом мониторе шире 1376 было бы видно сразу две-три штуки. При кадре в экран следующая подложка стоит на экран правее, так что в покое на экране всегда ровно одна. Ширина подложки при этом жёсткая (688, не проценты): на процентах строка растягивалась бы на широких мониторах. Подсветки в этой ленте нет, поэтому лента не упирается в свой конец и последняя подложка доезжает до левого края — см. measureRail в rdc-2.js. ========================================================================== */ .rdc-marks { /* Кадр во весь экран нельзя проматывать так же резко, как карточку */ --rdc-rail-step: 0.8; --rdc-panel-w: 688px; --rdc-panel-pad-x: 50px; /* Точка кропа для четырёх кадров с марками. Прицел во всех четырёх стоит на одном месте — 66-84% ширины, — и на узком экране центральный кроп его срезает: в экран попадает только середина кадра. Вступление сюда не попадает, у него прицел ровно по центру. */ --rdc-marks-focus: center center; /* На десктопе кадр виден целиком по высоте, поднимать нечего */ --rdc-marks-lift: 0; } /* Четыре снимка друг на друге. Первый видно всегда, остальные проявляет JS — стартовая прозрачность стоит здесь, чтобы до инициализации не мелькала последняя картинка. */ .rdc-marks .rdc-section__media img { position: absolute; inset: 0; } /* img + img — это все кадры, кроме первого, то есть ровно четыре марки. Вступление остаётся как есть: у него прицел по центру кадра, и поднимать его незачем — срежется низ окна прицела. */ .rdc-marks .rdc-section__media img + img { opacity: 0; object-position: var(--rdc-marks-focus); transform: translateY(calc(var(--rdc-marks-lift) * -100%)); } /* Окно ленты — вся секция целиком: подложка идёт от края до края по высоте, safe-зона здесь не при чём, свои поля подложка задаёт сама. На широком экране окно — весь экран, с полями: иначе уходящая подложка обрезалась бы посреди фото, на краю колонки. */ .rdc-marks__rail { position: relative; z-index: 2; height: 100%; margin: 0 calc(-1 * var(--rdc-field-x)); overflow: hidden; } /* Без JS лента никуда не едет — отдаём её обычному горизонтальному скроллу */ .rdc-stack:not(.rdc-stack--animated) .rdc-marks__rail { overflow-x: auto; } .rdc-marks__track { display: flex; height: 100%; will-change: transform; } /* Шаг ленты — кадр во весь экран: колонка (100cqw) плюс оба поля. Что лежит внутри, решает сам кадр: вступление растягивается на всю ширину колонки, подложка прижата к левому краю. */ .rdc-marks__frame { flex: none; width: calc(100cqw + var(--rdc-field-x) * 2); height: 100%; display: flex; padding: 0 var(--rdc-field-x); } /* --- Кадр 0: вступление, текст по центру --- */ .rdc-marks__intro { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: var(--rdc-safe-top) var(--rdc-safe-x) var(--rdc-safe-bottom); text-align: center; } .rdc-marks__intro-title { margin: 0; font-size: 54px !important; font-weight: 800 !important; line-height: 120% !important; text-transform: uppercase; color: var(--rdc-text) !important; } .rdc-marks__intro-lead { margin: 0; font-size: 28px !important; font-weight: 500 !important; line-height: 120% !important; color: var(--rdc-text) !important; } /* --- Кадры 1-3: подложка с текстом --- Два уровня gap вместо margin: заголовок с лидом читаются одной связкой и стоят плотно (16), а между связкой, абзацем и списком отбивка крупнее (40). На широком экране затенение подложки заходит в левое поле до края экрана, как на макете, а текст остаётся на сетке колонки: ширина и левый отступ растут на поле, отрицательный margin выносит подложку из поля кадра. */ .rdc-marks__panel { flex: none; width: calc(var(--rdc-panel-w) + var(--rdc-field-x)); margin-left: calc(-1 * var(--rdc-field-x)); display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: var(--rdc-safe-top) var(--rdc-panel-pad-x) var(--rdc-safe-bottom) calc(var(--rdc-panel-pad-x) + var(--rdc-field-x)); background: rgba(24, 24, 24, .70); backdrop-filter: blur(17.5px); -webkit-backdrop-filter: blur(17.5px); } .rdc-marks__head { display: flex; flex-direction: column; gap: 16px; } .rdc-marks__title { margin: 0; font-size: 54px !important; font-weight: 800 !important; line-height: 120% !important; text-transform: uppercase; color: var(--rdc-text) !important; } .rdc-marks__lead { margin: 0; font-size: 28px !important; font-weight: 500 !important; line-height: 120% !important; color: var(--rdc-text) !important; } .rdc-marks__text { margin: 0; font-size: 16px !important; font-weight: 400 !important; line-height: 150% !important; color: var(--rdc-muted) !important; } .rdc-marks__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; } .rdc-marks__list li { display: flex; align-items: center; gap: 12px; font-size: 16px !important; font-weight: 600 !important; line-height: 150% !important; color: var(--rdc-text) !important; } /* Цвет галочки зашит в саму svg (fill="white"), как и в иконках карточек */ .rdc-marks__list svg { display: block; flex: none; } /* Спрайт с ничего не рисует сам, но без этого занимает строку */ .rdc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ========================================================================== Секция 4 — размер прицельных марок Две колонки в одну строку. Высоту строки задаёт правая: три схемы с фиксированными размерами, 127 + 185 + 185 и два гапа по 60 = 617. Левая растягивается до неё (align-items:stretch по умолчанию) и разносит заголовок с таблицей по краям через space-between. Отдельного числа под этот отступ в макете нет — он и есть остаток высоты, поэтому меняется сам, если поменять гап между схемами. ========================================================================== */ .rdc-sizes { --rdc-sizes-main-w: 912px; --rdc-sizes-aside-w: 220px; --rdc-sizes-scheme-gap: 60px; /* Ширина ряда схем в столбичной раскладке. Схемы ужимаются под неё сами: flex-basis у каждой равен своему размеру, поэтому сжимаются они пропорционально и остаются в макетных отношениях 156 : 182 : 219. 506 = 80% от суммы 557 плюс два гапа по 30. */ --rdc-sizes-row-max: 506px; --rdc-sizes-head-h: 110px; --rdc-sizes-row-h: 88px; --rdc-sizes-cell-pad: 30px; --rdc-sizes-line: #3F3F3F; /* Зебра сверху вниз: шапка тёмная, дальше через строку */ --rdc-sizes-cell-dark: rgba(255, 255, 255, .02); --rdc-sizes-cell-light: rgba(255, 255, 255, .05); /* Зелёный в секции появляется впервые: шапка таблицы тёмная, марки внутри плиток яркие. Цвет марок зашит в сами svg. */ --rdc-sizes-green: #266141; /* Фон во всю ширину экрана, с полями — см. .rdc-section */ --rdc-field: linear-gradient(236deg, #020403 41.69%, #14291E 49.3%, #203D2E 55.8%, #1C1F1E 67.22%); /* Второй градиент и #838383 не видны: первый слой непрозрачен по всей высоте. Оставлены как в макете, чтобы значение совпадало с Figma. */ background: linear-gradient(236deg, #020403 41.69%, #14291E 49.3%, #203D2E 55.8%, #1C1F1E 67.22%), linear-gradient(0deg, #2D2D2D 0%, #2D2D2D 100%), #838383; } /* Колонки прижаты к краям контейнера. Из макета пришли три числа сразу — 912 + 80 + 220 — но это 1212 при контейнере 1250, и лишние 38px девать некуда. Отданы в промежуток: он становится 118, зато обе колонки стоят ровно по краю сетки. */ .rdc-sizes__grid { display: flex; justify-content: space-between; } .rdc-sizes__main { flex: none; width: var(--rdc-sizes-main-w); display: flex; flex-direction: column; justify-content: space-between; } .rdc-sizes__title { margin: 0; font-size: 54px !important; font-weight: 800 !important; line-height: 110% !important; text-transform: uppercase; color: var(--rdc-text) !important; } /* --- Таблица --- border-collapse обязан быть separate: при collapse браузер выбрасывает border-radius у ячеек, и скруглить углы рамки становится нечем. Поэтому рамка собирается по одной стороне на ячейку, а внешний край дорисовывают первая колонка и шапка. */ .rdc-sizes__table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; } .rdc-sizes__table th, .rdc-sizes__table td { border-right: 1px solid var(--rdc-sizes-line); border-bottom: 1px solid var(--rdc-sizes-line); font-size: 20px !important; font-weight: 400 !important; line-height: 150% !important; color: var(--rdc-text) !important; } .rdc-sizes__table th { border-top: 1px solid var(--rdc-sizes-line); } .rdc-sizes__table th:first-child, .rdc-sizes__table td:first-child { border-left: 1px solid var(--rdc-sizes-line); } .rdc-sizes__table thead th:first-child { border-top-left-radius: 8px; } .rdc-sizes__table thead th:last-child { border-top-right-radius: 8px; } .rdc-sizes__table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; } .rdc-sizes__table tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; } /* Плитка с маркой вынута из потока, поэтому справа под неё оставлено поле: иначе длинный текст заехал бы под неё. Считается от того же поля, что и слева, — плитка 50 плюс зазор 10, — чтобы правились они вместе. */ .rdc-sizes__table th { position: relative; height: var(--rdc-sizes-head-h); padding: 0 calc(var(--rdc-sizes-cell-pad) + 60px) 0 var(--rdc-sizes-cell-pad); text-align: left; } .rdc-sizes__table td { height: var(--rdc-sizes-row-h); padding: 0 var(--rdc-sizes-cell-pad); text-align: center; } /* Зебра считается от шапки, а она в отдельном thead — поэтому у строк значений чётность перевёрнута: первая из них должна быть светлой. */ .rdc-sizes__table th, .rdc-sizes__table tbody tr:nth-child(even) td { background: var(--rdc-sizes-cell-dark); } .rdc-sizes__table tbody tr:nth-child(odd) td { background: var(--rdc-sizes-cell-light); } /* Фон и рамка плитки нарисованы внутри самой svg, тут только посадка */ .rdc-sizes__mark { position: absolute; top: 50%; right: var(--rdc-sizes-cell-pad); display: block; transform: translateY(-50%); } .rdc-sizes__size { font-weight: 600 !important; color: var(--rdc-sizes-green) !important; } .rdc-sizes__unit { font-weight: 600 !important; color: var(--rdc-accent) !important; } /* --- Схемы справа --- */ .rdc-sizes__schemes { flex: none; width: var(--rdc-sizes-aside-w); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rdc-sizes-scheme-gap); } .rdc-sizes__schemes svg { display: block; flex: none; } /* Обе колонки въезжают из-за краёв экрана, см. .js-rdc-enter в rdc-2.js */ .rdc-sizes__main, .rdc-sizes__schemes { will-change: transform, opacity; } /* ========================================================================== Секция 5 — оптическая система Ширину правой части считает не процент, а пропорция картинки: она обязана быть видна целиком и во всю высоту секции. Высота секции всегда --rdc-vh, поэтому ширина выводится из неё умножением, без aspect-ratio — так число получается и в тот момент, когда flex ещё не разложил строку. Левая часть забирает остаток, то есть на широком экране она шире, а на низком наоборот сжимается. Это следствие правила, а не отдельная настройка. ========================================================================== */ .rdc-optics { /* Слайд во весь экран, как кадры в секции 3 — тот же шаг */ --rdc-rail-step: 0.8; /* Картинки 982×960; у первой 986, при cover она теряет по 2px с боков. Но не шире, чем оставляет место заголовку слева: «ОПТИЧЕСКАЯ» в 54 занимает 405, с полями по 50 — 505. На высоком экране (iPad Pro в горизонтали, 1366×1024) ширина от высоты съедала левую часть до 300, и заголовок резался. Тогда кадр уже пропорции и чуть режется по бокам. */ --rdc-optics-intro-min: 510px; --rdc-optics-w: min(var(--rdc-vh) * 982 / 960, 100cqw - var(--rdc-optics-intro-min)); /* Высота шага ленты. Шаг обязан совпадать с окном ленты до пикселя, иначе слайды встанут не на свои места: JS считает остановки по offsetTop. В две колонки окно во весь экран, в столбик — доля экрана. */ --rdc-optics-slide-h: var(--rdc-vh); /* Свечение слева: круг 336 с блюром 167. Центр по вертикали посередине, по горизонтали — этим токеном. */ --rdc-optics-glow: 336px; --rdc-optics-glow-x: 32px; --rdc-optics-panel-left: 50px; --rdc-optics-panel-right: 0px; --rdc-optics-panel-bottom: 200px; --rdc-optics-panel-pad: 50px; --rdc-optics-panel-max: 605px; } /* Экран шире колонки. Высота здесь бывает какой угодно (4K — 2160), и ширина от неё съела бы левую часть вместе с заголовком. Поэтому ширина фото — не больше макетной доли колонки (982 из 1650), плюс правое поле: фото доходит до края экрана. Кадр при этом режется cover'ом. Класс ставит JS (syncLayout). */ .rdc--fields .rdc-optics { --rdc-optics-w: calc(min(var(--rdc-vh) * 982 / 960, 100cqw * 982 / 1650) + var(--rdc-field-x)); } /* На широком экране сетка забирает оба поля: лента прижата к правому краю экрана, а свечение — к левому, как на макете. Текст слева остаётся в колонке — поле добавлено к его отступу. */ .rdc-optics__grid { position: relative; z-index: 2; display: flex; height: 100%; min-height: var(--rdc-vh); margin: 0 calc(-1 * var(--rdc-field-x)); } /* --- Левая часть: стоит все пять слайдов --- */ .rdc-optics__intro { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: var(--rdc-safe-top) var(--rdc-safe-x) var(--rdc-safe-bottom) calc(var(--rdc-safe-x) + var(--rdc-field-x)); overflow: hidden; } /* Круг из макета: filter:blur даёт именно размытый круг, а не radial-gradient — у градиента другой профиль спада, и совпасть с Figma он не может. */ .rdc-optics__intro::before { content: ''; position: absolute; top: 50%; left: var(--rdc-optics-glow-x); width: var(--rdc-optics-glow); height: var(--rdc-optics-glow); margin-top: calc(var(--rdc-optics-glow) / -2); border-radius: 50%; background: #266141; filter: blur(167px); pointer-events: none; } .rdc-optics__intro-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; } .rdc-optics__title { margin: 0; font-size: 54px !important; font-weight: 800 !important; line-height: 110% !important; text-transform: uppercase; color: var(--rdc-text) !important; } .rdc-optics__lead { margin: 0; font-size: 28px !important; font-weight: 400 !important; line-height: 120% !important; color: var(--rdc-text) !important; } /* --- Правая часть: вертикальная лента слайдов --- */ .rdc-optics__rail { position: relative; flex: none; width: var(--rdc-optics-w); height: 100%; overflow: hidden; } .rdc-stack:not(.rdc-stack--animated) .rdc-optics__rail { overflow-y: auto; } .rdc-optics__track { will-change: transform; } .rdc-optics__slide { position: relative; height: var(--rdc-optics-slide-h); } /* picture инлайновый и сам по себе высоты не имеет — без этого height:100% у картинки внутри не от чего считать. */ .rdc-optics__slide picture { display: block; height: 100%; } .rdc-optics__slide img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; } /* Плашка прижата к низу слайда. На десктопе поле у неё только слева, правый край лежит на краю экрана; в столбик поля симметричные. left и right заданы оба, поэтому ширина выходит min(остаток, потолок). */ .rdc-optics__panel { position: absolute; left: var(--rdc-optics-panel-left); right: var(--rdc-optics-panel-right); bottom: var(--rdc-optics-panel-bottom); max-width: var(--rdc-optics-panel-max); display: flex; flex-direction: column; gap: 16px; padding: var(--rdc-optics-panel-pad); border-radius: 8px; background: rgba(24, 24, 24, .70); backdrop-filter: blur(17.5px); -webkit-backdrop-filter: blur(17.5px); } /* Заголовок с подзаголовком стоят вплотную — по макету между ними ноль, поэтому обёртка без gap, а 16 идут уже до абзаца. */ .rdc-optics__head { display: flex; flex-direction: column; } .rdc-optics__name { margin: 0; font-size: 32px !important; font-weight: 700 !important; line-height: 120% !important; color: var(--rdc-text) !important; } .rdc-optics__sub { margin: 0; font-size: 24px !important; font-weight: 500 !important; line-height: 120% !important; color: var(--rdc-text) !important; } .rdc-optics__text { margin: 0; font-size: 16px !important; font-weight: 400 !important; line-height: 140% !important; color: var(--rdc-text) !important; } /* ========================================================================== Секция 6 «Конструктивная надёжность» Фото на весь экран, поверх слева плашка. Панелей три, они лежат одна на другой и центрируются по экрану каждая сама — высота у них по контенту и разная, поэтому общего окна, как у ленты в пятой секции, здесь нет. Уходящая панель уезжает влево ровно настолько, чтобы скрыться за краем экрана; это считает JS по её реальной ширине и отступу, а не процентами — процент от собственной ширины оставил бы --rdc-build-x торчать в кадре. ========================================================================== */ .rdc-build { --rdc-rail-step: 0.8; --rdc-rail-hold: 0; --rdc-build-x: 50px; --rdc-build-w: 660px; --rdc-build-pad-y: 20px; --rdc-build-pad-x: 50px; --rdc-build-gap-top: 10px; --rdc-build-gap-mid: 60px; --rdc-build-gap-head: 10px; --rdc-build-gap-list: 40px; --rdc-build-gap-item: 20px; --rdc-build-gap-icon: 10px; --rdc-build-title: 54px; --rdc-build-lead: 28px; --rdc-build-name: 32px; --rdc-build-sub: 18px; --rdc-build-item: 16px; } /* Кадры лежат стопкой в порядке слайдов, каждый следующий выше предыдущего. Уходящий не гасим — его перекрывает приходящий; гасили бы оба сразу, в середине перехода провалилась бы яркость. */ .rdc-build .rdc-section__media img { position: absolute; inset: 0; } .rdc-build .rdc-section__media img + img { opacity: 0; } /* Обёртка не ловит клики: панели внутри позиционированы абсолютно, а сама она растянута на весь экран и иначе перекрыла бы фон целиком. */ .rdc-build__swap { position: relative; z-index: 2; height: 100%; } /* По вертикали центрируется автополями, а не translateY(-50%): transform забирает себе GSAP, когда увозит панель влево. */ .rdc-build__panel { position: absolute; top: 0; bottom: 0; left: var(--rdc-build-x); width: var(--rdc-build-w); max-width: calc(100% - var(--rdc-build-x) * 2); height: fit-content; margin: auto 0; display: flex; flex-direction: column; gap: var(--rdc-build-gap-mid); padding: var(--rdc-build-pad-y) var(--rdc-build-pad-x); border-radius: 8px; background: rgba(24, 24, 24, .70); backdrop-filter: blur(17.5px); -webkit-backdrop-filter: blur(17.5px); } .rdc-build__top, .rdc-build__head { display: flex; flex-direction: column; } .rdc-build__top { gap: var(--rdc-build-gap-top); } .rdc-build__head { gap: var(--rdc-build-gap-head); } .rdc-build__title { margin: 0; font-size: var(--rdc-build-title) !important; font-weight: 800 !important; line-height: 110% !important; text-transform: uppercase; color: var(--rdc-text) !important; } .rdc-build__lead { margin: 0; font-size: var(--rdc-build-lead) !important; font-weight: 500 !important; line-height: 110% !important; color: var(--rdc-text) !important; } .rdc-build__body { display: flex; flex-direction: column; gap: var(--rdc-build-gap-list); } .rdc-build__name { margin: 0; font-size: var(--rdc-build-name) !important; font-weight: 700 !important; line-height: 120% !important; text-transform: uppercase; color: var(--rdc-text) !important; } .rdc-build__sub { margin: 0; font-size: var(--rdc-build-sub) !important; font-weight: 500 !important; line-height: 150% !important; color: var(--rdc-text) !important; } .rdc-build__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--rdc-build-gap-item); } /* Галочка нарисована фоном по левому полю, а текст отбит на её ширину: так вторая строка пункта встаёт под первую, а не под иконку. */ .rdc-build__list li { position: relative; padding-left: calc(16px + var(--rdc-build-gap-icon)); font-size: var(--rdc-build-item) !important; font-weight: 400 !important; line-height: 150% !important; color: var(--rdc-text) !important; } /* Галочка (--rdc-check). По высоте она не по центру строки, а на 3px выше — так на всех четырёх макетах адаптива, и на 16px, и на 14px. */ .rdc-build__list li::before { content: ''; position: absolute; top: calc(var(--rdc-build-item) * 1.5 / 2 - 3px); left: 0; width: 16px; height: 16px; margin-top: -8px; background: var(--rdc-check) no-repeat 0 0 / 16px 16px; } /* Жирное начало пункта встаёт отдельной строкой, даже если всё влезает в одну: «Штормовая защита:» так и стоит над описанием на всех ширинах. */ .rdc-build__list b { display: block; font-weight: 600 !important; color: var(--rdc-text) !important; } /* ========================================================================== Секция 7 «Полноценная поддержка на 10 лет» Один экран без шагов: фото на весь экран, поверх слева плашка. Плашка такая же, как в шестой секции, — те же фон, блюр, скругление и поля 20 × 50, только шире и без списка. ========================================================================== */ .rdc-support { --rdc-support-x: 50px; --rdc-support-w: 810px; --rdc-support-pad-y: 20px; --rdc-support-pad-x: 50px; --rdc-support-gap: 20px; --rdc-support-gap-text: 16px; --rdc-support-title: 54px; --rdc-support-text: 16px; } /* По высоте центрируется автополями — тот же приём, что у плашки шестой. */ .rdc-support__panel { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--rdc-support-x); width: var(--rdc-support-w); max-width: calc(100% - var(--rdc-support-x) * 2); height: fit-content; margin: auto 0; display: flex; flex-direction: column; gap: var(--rdc-support-gap); padding: var(--rdc-support-pad-y) var(--rdc-support-pad-x); border-radius: 8px; background: rgba(24, 24, 24, .70); backdrop-filter: blur(17.5px); -webkit-backdrop-filter: blur(17.5px); } .rdc-support__title { margin: 0; font-size: var(--rdc-support-title) !important; font-weight: 800 !important; line-height: 110% !important; text-transform: uppercase; color: var(--rdc-text) !important; } .rdc-support__text { display: flex; flex-direction: column; gap: var(--rdc-support-gap-text); } .rdc-support__text p { margin: 0; font-size: var(--rdc-support-text) !important; font-weight: 400 !important; line-height: 150% !important; color: var(--rdc-text) !important; } /* ========================================================================== Секция 8 «Умное энергосбережение» Один экран без шагов: фото на весь экран, текст справа прямо по фото, без плашки. Затемнения под текстом на макете нет — фото само тёмное. Колонка текста прижата к правому краю: на макетах 1650, 1450, 1320 и 992 её левый край везде ровно на 693 от правого края экрана. Ширина — от заголовка: «ЭНЕРГОСБЕРЕЖЕНИЕ» в 54 занимает 644 и обязан влезть в строку. ========================================================================== */ .rdc-energy { --rdc-bg: #050505; --rdc-energy-w: 653px; --rdc-energy-right: 40px; --rdc-energy-bottom: 30px; --rdc-energy-gap: 40px; --rdc-energy-gap-head: 20px; --rdc-energy-title: 54px; --rdc-energy-text: 16px; --rdc-energy-name: 28px; /* Фото на узких экранах, см. медиа-блоки */ --rdc-energy-zoom: 1; --rdc-energy-overlap: 80px; } .rdc-energy__content { position: absolute; z-index: 1; top: 0; bottom: 0; right: var(--rdc-energy-right); width: var(--rdc-energy-w); max-width: calc(100% - var(--rdc-energy-right) * 2); height: fit-content; margin: auto 0; display: flex; flex-direction: column; gap: var(--rdc-energy-gap); } .rdc-energy__head { display: flex; flex-direction: column; gap: var(--rdc-energy-gap-head); } .rdc-energy__title { margin: 0; font-size: var(--rdc-energy-title) !important; font-weight: 800 !important; line-height: 110% !important; text-transform: uppercase; color: var(--rdc-text) !important; } .rdc-energy__text, .rdc-energy__list li { margin: 0; font-size: var(--rdc-energy-text) !important; font-weight: 400 !important; line-height: 150% !important; color: var(--rdc-text) !important; } .rdc-energy__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--rdc-energy-gap); } /* Пункты уже колонки: на всех макетах «…от одной / батарейки.» (352) переносится, а «…при бездействии.» (346) стоит в строку. */ .rdc-energy__list li { max-width: 350px; } /* Название пункта — первые слова той же фразы, поэтому внутри строки, а не отдельный заголовок: читалка прочтёт предложение целиком. Описание идёт сразу под ним, без зазора. */ .rdc-energy__list b { display: block; font-size: var(--rdc-energy-name) !important; font-weight: 700 !important; line-height: 150% !important; text-transform: uppercase; color: var(--rdc-accent) !important; } /* ========================================================================== Секция 9 «Для любых стрелковых дисциплин» Слева заголовок на тёмном фоне со свечением, как в пятой секции. Справа колесо из шести карточек: активная стоит прямо, соседи выше и ниже повёрнуты на 15° и полупрозрачны. Все карточки лежат в одном слоте — размещает их JS (addWheel), здесь только токены колеса. ========================================================================== */ .rdc-uses { --rdc-bg: #1A1C22; --rdc-rail-step: 0.8; --rdc-rail-hold: 0; /* Свечение — те же параметры, что в пятой секции */ --rdc-uses-glow: 336px; --rdc-uses-glow-x: 32px; /* Заголовок на макете на 24 выше центра экрана. Слева 50 и на 1320, где общий боковой отступ уже 40, — поэтому свой токен. */ --rdc-uses-title: 54px; --rdc-uses-title-lift: 24px; --rdc-uses-title-x: 50px; /* Слот активной карточки. На макете 1650 она стоит на 713–1437. */ --rdc-uses-card-w: 725px; --rdc-uses-card-h: 576px; --rdc-uses-card-x: calc(50% - 112px); --rdc-uses-pad-y: 20px; --rdc-uses-pad-x: 40px; --rdc-uses-gap: 16px; --rdc-uses-gap-text: 16px; --rdc-uses-name: 24px; --rdc-uses-text: 16px; } /* Свечение привязано к краю экрана, а не колонки: на широком экране оно уходит в левое поле, как в пятой секции */ .rdc-uses::before { content: ''; position: absolute; top: 50%; left: calc(var(--rdc-uses-glow-x) - var(--rdc-field-x)); width: var(--rdc-uses-glow); height: var(--rdc-uses-glow); margin-top: calc(var(--rdc-uses-glow) / -2); border-radius: 50%; background: #266141; filter: blur(167px); pointer-events: none; } .rdc-uses__title { position: absolute; z-index: 1; top: 0; bottom: calc(var(--rdc-uses-title-lift) * 2); left: var(--rdc-uses-title-x); height: fit-content; margin: auto 0; font-size: var(--rdc-uses-title) !important; font-weight: 800 !important; line-height: 110% !important; text-transform: uppercase; color: var(--rdc-text) !important; } /* Колесо: угол шага, где стоит сосед (dx, dy — px без единиц, их читает JS), его прозрачность и насколько сверх неё притушено фото. В фигме задан только поворот; остальное подобрано наложением фото второй карточки на макет: сдвиг сошёлся на −156 / −288, прозрачность 38% — по яркости текста соседа, затемнение фото 0.5 — по яркости снимка. */ .rdc-uses__wheel { --rdc-wheel-angle: 15; --rdc-wheel-dx: -160; --rdc-wheel-dy: 290; --rdc-wheel-fade: 0.38; --rdc-wheel-dim: 0.5; position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--rdc-uses-card-x); width: var(--rdc-uses-card-w); height: var(--rdc-uses-card-h); margin: auto 0; } .rdc-uses__card { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; background: #353535; box-shadow: 0 4px 114px 0 rgba(0, 0, 0, .95); } .rdc-uses__photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* Затемнение фото у соседей. Силу ставит JS по расстоянию до активной. */ .rdc-uses__card::before { content: ''; position: absolute; z-index: 1; inset: 0; background: #000; opacity: var(--rdc-card-shade, 0); pointer-events: none; } /* Полоса с текстом лежит поверх фото — фото под ней продолжается и видно сквозь блюр. Высота по тексту. */ .rdc-uses__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--rdc-uses-gap); padding: var(--rdc-uses-pad-y) var(--rdc-uses-pad-x); background: rgba(24, 24, 24, .70); backdrop-filter: blur(17.5px); -webkit-backdrop-filter: blur(17.5px); } .rdc-uses__name { margin: 0; font-size: var(--rdc-uses-name) !important; font-weight: 700 !important; line-height: 120% !important; text-transform: uppercase; color: var(--rdc-text) !important; } .rdc-uses__text { display: flex; flex-direction: column; gap: var(--rdc-uses-gap-text); } .rdc-uses__body p { margin: 0; font-size: var(--rdc-uses-text) !important; font-weight: 400 !important; line-height: 150% !important; color: var(--rdc-text) !important; } .rdc-uses__body b { font-weight: 600 !important; color: var(--rdc-accent) !important; } /* ========================================================================== Секция 10 «Всё готово к установке из коробки» Один экран без шагов: заголовок слева, комплектация справа, оба по центру высоты. Макеты этой секции 650 в высоту, но секция в стопке, как все, — на весь экран, содержимое по центру. Список на макетах 1650 и 1450 начинается на одной и той же x = 851, а на 1320 — на 762, то есть в 558 от правого края (список 510 плюс поле). Отсюда min(): левее 851 не уходит, а на узком десктопе прижимается к правому краю и не вылезает за экран. ========================================================================== */ .rdc-kit { --rdc-kit-x: 50px; --rdc-kit-list-x: min(851px, 100% - 558px); --rdc-kit-gap: 40px; --rdc-kit-title: 54px; --rdc-kit-item: 24px; --rdc-kit-item-gap: 20px; --rdc-kit-icon: 24px; --rdc-kit-icon-gap: 12px; /* Фон во всю ширину экрана, с полями — см. .rdc-section */ --rdc-field: linear-gradient(236deg, #020403 41.69%, #14291E 49.3%, #203D2E 55.8%, #1C1F1E 67.22%); background: linear-gradient(236deg, #020403 41.69%, #14291E 49.3%, #203D2E 55.8%, #1C1F1E 67.22%), #2D2D2D; } .rdc-kit__title, .rdc-kit__list { position: absolute; top: 0; bottom: 0; height: fit-content; margin: auto 0; } .rdc-kit__title { left: var(--rdc-kit-x); font-size: var(--rdc-kit-title) !important; font-weight: 800 !important; line-height: 110% !important; text-transform: uppercase; color: var(--rdc-text) !important; } .rdc-kit__list { left: var(--rdc-kit-list-x); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--rdc-kit-item-gap); } .rdc-kit__list li { position: relative; max-width: var(--rdc-kit-item-max, none); padding-left: calc(var(--rdc-kit-icon) + var(--rdc-kit-icon-gap)); font-size: var(--rdc-kit-item) !important; font-weight: 600 !important; line-height: 150% !important; color: var(--rdc-text) !important; } /* Два переноса в пунктах есть только на макете 350, и шириной их не получить: «Коллиматор ARTELV RDC 2» (228) там стоит в строку, а «Батарейка CR2032 и ключ» (220) и «Высокое быстросъемное» (217) разбиты. Поэтому ручные, включаются в медиа-блоке ≤699. */ .rdc-kit__br-sm { display: none; } /* Галочка на 3px выше центра первой строки, как в шестой секции */ .rdc-kit__list li::before { content: ''; position: absolute; top: calc(var(--rdc-kit-item) * 1.5 / 2 - var(--rdc-kit-icon) / 2 - 3px); left: 0; width: var(--rdc-kit-icon); height: var(--rdc-kit-icon); background: var(--rdc-check) no-repeat 0 0 / 100% 100%; } /* ========================================================================== Секция 11 «Поможем с выбором» Один экран без шагов: фото на весь экран, слева прямо по фото заголовок, текст и телефон. Затемнения под текстом на макетах нет. Блок по центру высоты, фон под фото виден только на мобилках. ========================================================================== */ .rdc-help { --rdc-bg: #1B1D22; --rdc-help-x: 50px; --rdc-help-bottom: 100px; --rdc-help-gap: 50px; --rdc-help-gap-head: 14px; --rdc-help-title: 54px; --rdc-help-text: 22px; --rdc-help-phone: 28px; /* Фото на мобилках, см. медиа-блок ≤699. Отрицательный: на макете 350 фото кончается на 64 выше заголовка, между ними фон, — этот зазор и держим, когда фото дотягивается до текста на высоких экранах. */ --rdc-help-overlap: -64px; } .rdc-help__content { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--rdc-help-x); max-width: calc(100% - var(--rdc-help-x) * 2); height: fit-content; margin: auto 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--rdc-help-gap); } .rdc-help__head { display: flex; flex-direction: column; gap: var(--rdc-help-gap-head); } .rdc-help__title { margin: 0; font-size: var(--rdc-help-title) !important; font-weight: 800 !important; line-height: 110% !important; text-transform: uppercase; color: var(--rdc-text) !important; } .rdc-help__text { margin: 0; font-size: var(--rdc-help-text) !important; font-weight: 400 !important; line-height: 150% !important; color: var(--rdc-text) !important; } .rdc-help__phone { font-size: var(--rdc-help-phone) !important; font-weight: 700 !important; line-height: 150% !important; color: var(--rdc-text) !important; text-decoration: none !important; } /* ========================================================================== FAQ «Часто задаваемые вопросы и ответы» Не в стопке: обычный поток после неё, высота по содержимому. Аккордеон — открыт первый вопрос, остальные закрыты; переключает JS (initFaq). Строка вопроса — кнопка во всю ширину: текст и справа кружок со стрелкой 45, по центру друг друга. Кнопка открытого пункта смотрит стрелкой вниз, закрытого — вверх (так на макете). Ответ на широких экранах не заходит под колонку кружка, на мобилках идёт на всю ширину. Выровнен по ширине — так на всех макетах. Высота раскрытия анимируется через grid-template-rows 0fr → 1fr: браузер сам доводит до высоты текста, замерять её в JS не нужно. ========================================================================== */ .rdc-faq { --rdc-faq-x: 50px; --rdc-faq-top: 50px; --rdc-faq-bottom: 40px; --rdc-faq-gap: 50px; --rdc-faq-item-gap: 20px; --rdc-faq-title: 54px; --rdc-faq-q: 32px; --rdc-faq-a: 16px; --rdc-faq-pad-y: 20px; --rdc-faq-pad-x: 30px; --rdc-faq-icon: 45px; --rdc-faq-icon-gap: 20px; --rdc-faq-a-gap: 10px; --rdc-faq-a-right: calc(var(--rdc-faq-icon) + var(--rdc-faq-icon-gap)); display: flex; flex-direction: column; gap: var(--rdc-faq-gap); padding: var(--rdc-faq-top) var(--rdc-faq-x) var(--rdc-faq-bottom); background: #050503; } .rdc-faq__title { margin: 0; font-size: var(--rdc-faq-title) !important; font-weight: 800 !important; line-height: 120% !important; text-transform: uppercase; color: var(--rdc-text) !important; } .rdc-faq__list { display: flex; flex-direction: column; gap: var(--rdc-faq-item-gap); } .rdc-faq__item { padding: var(--rdc-faq-pad-y) var(--rdc-faq-pad-x); border-radius: 8px; background: linear-gradient(262deg, #0D0F12 12.89%, #222426 75.07%), #FFF; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .10); } .rdc-faq__q { margin: 0; } .rdc-faq__head { display: flex; align-items: center; gap: var(--rdc-faq-icon-gap); width: 100%; margin: 0; padding: 0; border: 0; background: none; font-family: inherit; font-size: var(--rdc-faq-q) !important; font-weight: 500 !important; line-height: 120% !important; text-align: left; color: var(--rdc-text) !important; cursor: pointer; } /* Кружок со стрелкой из макета: два полупрозрачных слоя заливки и блюр под ним, стрелка — path из присланного SVG. */ .rdc-faq__head::after { content: ''; flex: none; width: var(--rdc-faq-icon); height: var(--rdc-faq-icon); margin-left: auto; border-radius: 50%; 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.7389 18.4616L31.1534 19.8345L23.4443 27.312C23.3208 27.4326 23.1739 27.5282 23.0121 27.5935C22.8503 27.6588 22.6768 27.6924 22.5016 27.6924C22.3263 27.6924 22.1528 27.6588 21.991 27.5935C21.8292 27.5282 21.6823 27.4326 21.5588 27.312L13.8457 19.8345L15.2602 18.4629L22.4996 25.4811L29.7389 18.4616Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(rgba(67, 67, 73, .45), rgba(67, 67, 73, .45)), rgba(30, 30, 32, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .rdc-faq__head:focus-visible { outline: 1px solid var(--rdc-accent); outline-offset: 4px; } .rdc-faq__body { display: grid; grid-template-rows: 1fr; } /* Переходы включаются кадром позже начального состояния (rdc-faq--ready), иначе при загрузке закрытые пункты сворачивались бы у всех на глазах. */ .rdc-faq--ready .rdc-faq__body { transition: grid-template-rows .3s ease; } .rdc-faq--ready .rdc-faq__head::after { transition: transform .3s ease; } .rdc-faq__inner { min-height: 0; overflow: hidden; } .rdc-faq__a { margin: 0; padding: var(--rdc-faq-a-gap) var(--rdc-faq-a-right) 0 0; font-size: var(--rdc-faq-a) !important; font-weight: 400 !important; line-height: 150% !important; text-align: justify; color: var(--rdc-text) !important; } /* Закрытые пункты — только когда JS подключился (класс ставит initFaq). Без него видны все ответы, иначе их нечем было бы открыть. */ .rdc-faq--js .rdc-faq__item:not(.is-open) .rdc-faq__body { grid-template-rows: 0fr; } .rdc-faq--js .rdc-faq__item:not(.is-open) .rdc-faq__head::after { transform: rotate(180deg); } /* --- Скругления --- */ .rdc-radius-lg { border-radius: 24px; } .rdc-radius-sm { border-radius: 16px; } /* ========================================================================== Брейкпоинты Границы взяты из макетов первого экрана: 1320 / 991 / 788 / 699. На них же переключается safe-зона, иначе диапазоны рвались бы пополам — на 1250px пэддинг был бы уже 40, а отступ сверху ещё 120. пэддинг gap кегли max-width safe ↑/↓ ≥1321 50 60 32/54/16 630 120/112 992-1320 40 60 32/45/16 630 100/100 789-991 30 60 24/45/16 630 88/92 700-788 20 60 24/38/16 450 88/92 ≤699 20 20 16/24/14 — 76/84 Ширины .rdc-container (1450/1250/1120/920/700) живут по своей, общей для лендингов ARTELV сетке 1599/1344/1199/991/767 — первый экран её не использует, он прижат к краю экрана по --rdc-safe-x. СЕКЦИЯ 2 садится на ту же сетку. Макетов семь — 1650/1450/1320/992/769/700/350, число в имени макета — самая узкая ширина его диапазона. Первые три макета отличаются только шириной холста, значения в них одинаковые: макет диапазон заголовок подзаг. карточка заг./текст карточки 1650-1320 ≥1321 54 28 400 28 / 16 992 992-1320 45 28 400 28 / 16 769 789-991 45 28 400 28 / 16 700 700-788 38 28 400 28 / 16 350 ≤699 24 18 290 18 / 14 Макет 769 растянут до 789: своя граница дала бы зону 769-788, где первый экран уже на мобильных значениях, а второй ещё на планшетных. Зазор между карточками, поля карточки и гапы внутри неё одинаковы на всех ширинах — в адаптиве меняются только кегли и ширина карточки. Механика ленты тоже везде одна: прокрутка по скроллу. См. assets/section-2-adaptive.md. СЕКЦИЯ 3 единственная меняет раскладку, а не только кегли. На ≥1321 подложка стоит слева во всю высоту (688 шириной), на ≤1320 переезжает вниз полосой во всю ширину. Граница взята существующая, своей не заводим. макет диапазон заголовок лид абзац подложка 1650-1320 ≥1321 54 28 16 слева, 688 × высота экрана 992 992-1320 45 28 16 внизу, во всю ширину 769 789-991 45 28 16 то же 700 700-788 38 28 16 то же 350 ≤699 24 18 14 то же Кегли заголовка совпадают с первым экраном, поэтому селекторы подвязаны к уже существующим правилам, а не продублированы. В нижней полосе текст ужат: гап между блоками 10 вместо 40, поля по бокам 20 вместо 50, вертикальных полей нет вовсе — воздух над текстом и под ним это остаток min-height. Жёсткие переносы из макета там отключены. См. assets/section-3-adaptive.md. СЕКЦИЯ 4 тоже меняет раскладку: до 991 это две колонки, ниже — столбик, где схемы ложатся в ряд под таблицей. макет диапазон заголовок раскладка 1450 ≥1321 54 912 слева + 220 справа, промежуток 118 1320 1200-1320 54 левая на остаток, промежуток 80 992 992-1199 45 то же, промежуток 10 769 789-991 45 столбик, схемы в ряд на 80% 700 700-788 45 то же 350 ≤699 24 то же, шапка таблицы перестроена Заголовок роняется на 1199, а не на 1320 как везде: на макете 1320 он ещё 54. Поэтому у секции своё правило, к общему её не подвязать. Ширины левой колонки из макета (912 на 1320, 640 на 992) не воспроизводятся: контейнер лендинга на этих ширинах 1120 и 920, а колонки из макета в сумме 1132. Левая идёт на остаток — 820 и 685 соответственно. Высота секции нигде не бережётся: содержимое 617, и на экранах ниже ~850 схемы режутся сверху и снизу. Это решение из макета, а не недосмотр. См. assets/section-4-adaptive.md. ========================================================================== */ /* ===== Контейнер 1250 ===== */ @container rdc (max-width: 1599px) { .rdc-col > * { --rdc-container: 1250px; } .rdc-title-gap { gap: 40px; } /* Секция 9: на макетах 1450 и 1320 карточка привязана уже к правому краю экрана, а не к центру: правый отступ 89 и 79. */ .rdc-uses { --rdc-uses-card-x: calc(100% - var(--rdc-uses-card-w) - 89px); } } /* ===== Контейнер 1120 ===== */ @container rdc (max-width: 1344px) { .rdc-col > * { --rdc-container: 1120px; } } /* ===== 992-1320: safe 100 / 100, пэддинг 40, заголовок 45 ===== */ @container rdc (max-width: 1320px) { .rdc-col > * { --rdc-safe-top: 100px; --rdc-safe-bottom: 100px; --rdc-safe-x: 40px; } .rdc-hero__title, .rdc-features__title, .rdc-marks__title, .rdc-marks__intro-title { font-size: 45px !important; } /* --- Секция 3 переезжает из боковой подложки в нижнюю полосу --- Лента прижимается к низу экрана и сжимается по высоте. Кадры остаются flex-элементами одной строки, поэтому растягиваются до её высоты — у всех полос нижний и верхний край совпадают, и в ленте они читаются одной сплошной плашкой, по которой едет только текст. Высоту строки задаёт самый высокий кадр («Зелёная подсветка» со списком), а min-height держит нижнюю границу на коротких. */ .rdc-marks { --rdc-panel-pad-x: 20px; --rdc-bar-min-h: 270px; /* Кроп уезжает к прицелу. object-position делит не кадр, а перелив: при доле видимой ширины f окно встаёт на [p×(1−f), p×(1−f)+f]. Прицелу нужно 66.5-84.5%, на самом узком экране f = 0.327, отсюда p ≥ 77%. Взято 80 — с запасом, и на 768 в кадр ещё попадает голова зверя. */ --rdc-marks-focus: 80% center; /* Подъём кадра. По вертикали object-position бессилен: картинка шире экрана, значит перелив только горизонтальный, а по высоте она села ровно. Поэтому кадр поднимается трансформом. Прицел стоит на 41-74% высоты, полоса снизу съедает больше половины короткого экрана — без подъёма он оказывается за ней. 0.28 высоты хватает на всех экранах, и ровно на столько же картинка не достаёт до низа: этот кусок обязан прийтись на полосу. Поэтому полоса не ниже подъёма (см. .rdc-marks__panel) — на высоком планшете сама по себе она ниже, и в щели под фото проглядывал нижний кадр. Доля, а не проценты: от неё считается и высота полосы. */ --rdc-marks-lift: 0.28; } .rdc-marks__track { position: absolute; left: 0; bottom: 0; height: auto; } .rdc-marks__frame { position: relative; height: auto; } /* Вступление в полосе не живёт: оно прижато к низу своего кадра и растёт вверх на весь экран. Абсолютное — чтобы не тянуть высоту строки. */ .rdc-marks__intro { position: absolute; left: 0; right: 0; bottom: 0; height: var(--rdc-vh); } /* Сверху поле такое же, как по бокам: на самом высоком кадре текст иначе упирается в край полосы. Снизу вместо него safe-зона — под ней лежит меню магазина, и текст обязан её отступить. Плашка при этом остаётся прижатой к краю экрана, меню ложится на её пустую нижнюю часть. box-sizing глобально border-box, поэтому поля съедаются изнутри min-height: пока текст помещается в остаток, полоса держит свои 270, а на высоких экранах — высоту подъёма фото. */ .rdc-marks__panel { width: 100%; min-height: max(var(--rdc-bar-min-h), var(--rdc-vh) * var(--rdc-marks-lift)); padding: var(--rdc-panel-pad-x) var(--rdc-panel-pad-x) var(--rdc-safe-bottom); gap: 10px; } .rdc-marks__list { gap: 10px; } /* Переносы из макета рассчитаны на подложку в 688; в полосе во всю ширину они рвут строку на пустом месте. */ .rdc-marks__panel br { display: none; } /* --- Секция 5 переезжает из двух колонок в столбик --- Две колонки здесь уже не живут: ширину правой задаёт высота экрана (vh × 982/960), и на 1320×900 левой остаётся 384 — заголовок в 54 ломается на четыре строки. Поэтому текст переезжает наверх, слайд под него. Высоту здесь задаёт слайд, а не текст: от неё считается шаг ленты, а он обязан совпадать с окном до пикселя — JS считает остановки по offsetTop. Доля 62% снята с макетов: 350 даёт 467 при экране 812 (61.6%), 769 — 640 при 1024 (62.5%). Текст забирает остаток. */ .rdc-optics { --rdc-optics-w: 100%; --rdc-optics-slide-h: calc(var(--rdc-vh) * 0.62); /* Поля симметричные, 40 с обеих сторон — по макетам 769 и 350. Потолок в 700 не даёт строке растянуться на 1320, но 769 не трогает: там остаток и так 688. */ --rdc-optics-panel-left: 40px; --rdc-optics-panel-right: 40px; --rdc-optics-panel-max: 700px; --rdc-optics-panel-bottom: var(--rdc-safe-bottom); --rdc-optics-panel-pad: 30px; } .rdc-optics__grid { flex-direction: column; } /* Нижнего поля нет: блок и так ограничен по высоте, а safe-зона снизу съела бы место у текста. Снизу его отбивает сам слайд. */ .rdc-optics__intro { flex: 1; min-height: 0; padding: var(--rdc-safe-top) var(--rdc-safe-x) 0; } /* Высота проставлена тем же токеном, что и у слайда, а не flex:1 — окно ленты обязано совпасть с шагом ровно, без округления остатка. */ .rdc-optics__rail { flex: none; width: 100%; height: var(--rdc-optics-slide-h); } .rdc-optics__title { font-size: 45px !important; } /* --- Секция 4: левая колонка отдаёт ширину --- Контейнер лендинга здесь уже 1120, а колонки из макета в сумме 1132. Держать 912 нечем, поэтому левая переходит на остаток: правая остаётся фиксированной (она ровно по самой широкой схеме), промежуток — точным. */ .rdc-sizes__main { flex: 1; width: auto; min-width: 0; } .rdc-sizes__grid { gap: 80px; } /* --- Секция 6: фото по ширине, плашка плотнее --- Фото уже не cover, а во всю ширину и по верху: на макетах 1320, 992, 768 и 350 оно кончается ровно на ширине × 1440/2476, ниже фон секции. Кадр так виден целиком по ширине, и прицел не уходит за край ни на одном экране. У build-1 низ и так почти цвета фона, а build-2 и build-3 внизу светлые — без затухания у них был бы резкий край. На макетах только первый слайд, длина затухания подобрана. На высоких телефонах фото по ширине кончается задолго до плашки, и между ними зияет пустой фон. Тогда оно дотягивается вниз до плашки и заходит под неё на --rdc-build-overlap — затухание уходит под плашку, а не висит над ней. Лишнее по бокам срезает cover. Верх плашки считает JS (--rdc-reach-top); где фото и так длиннее, min-height ни на что не влияет. */ .rdc-build { --rdc-build-overlap: 80px; } .rdc-build .rdc-section__media img { bottom: auto; height: auto; min-height: calc(var(--rdc-reach-top, 0px) + var(--rdc-build-overlap)); -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent); mask-image: linear-gradient(to bottom, #000 75%, transparent); } /* Ширина 656 против десктопных 660 — по макетам 1320 и 992. */ .rdc-build { --rdc-build-w: 656px; --rdc-build-pad-x: 40px; } /* --- Секция 7: кадр уходит к прицелу --- Экран уже, чем фото, и cover режет бока. Прицел на фото справа — на макете 992 кадр прижат к правому краю. */ .rdc-support { --rdc-media-focus: 100% center; } .rdc-uses { --rdc-uses-card-x: calc(100% - var(--rdc-uses-card-w) - 79px); } } /* ===== Контейнер 920 ===== */ @container rdc (max-width: 1199px) { .rdc-col > * { --rdc-container: 920px; } .rdc-title { font-size: 40px !important; } .rdc-subtitle { font-size: 28px !important; } /* Секция 4 роняет заголовок позже остальных: на макете 1320 он ещё 54, поэтому к общему правилу на 1320 его не подвязать. */ .rdc-sizes__title { font-size: 45px !important; } .rdc-sizes__grid { gap: 10px; } /* Секция 6 тоже: на 1320 заголовок 54, на 992 уже 45. Седьмая следом за ней — макета 1320 у неё нет. */ .rdc-build { --rdc-build-title: 45px; } .rdc-support { --rdc-support-title: 45px; } .rdc-energy { --rdc-energy-title: 45px; } /* --- Секция 9: заголовок наверх, колесо плоское --- Макет 1320 ещё боковой, 992 уже нет. Граница здесь: заголовок (464) и карточка (725) рядом в контейнер 920 уже не встают. Заголовок встаёт сверху по центру, карточка — по центру оставшегося места под ним. Колесо перестаёт поворачивать: соседи стоят стопкой над и под активной, уменьшенные до 502 в ширину (на макетах 992, 768 и 700 ширина соседа одна и та же). Уменьшаются от верхнего края — только так шаг выходит симметричным: сверху 299, снизу 306 на макете 992. Над верхним соседом лежит заголовок. Сверху — не меньше общей safe-зоны: на сайте там шапка и вкладки товара, и заголовок на 75 из макета уходил под них. Снизу — safe-зона под меню магазина. На низком экране (iPad Air в горизонтали, 1180×820) карточка 576 в высоту между ними не влезает и уходит под меню, поэтому её ширина ограничена ещё и высотой: --rdc-uses-card-fit — сколько остаётся под заголовком в две строки и зазором 20, в пересчёте на ширину по пропорции карточки. Где высоты хватает, карточка макетная. */ .rdc-uses { --rdc-uses-top: 75px; --rdc-uses-title: 45px; --rdc-uses-pad-top: max(var(--rdc-uses-top), var(--rdc-safe-top)); --rdc-uses-card-fit: calc((var(--rdc-vh) - var(--rdc-uses-pad-top) - var(--rdc-uses-title) * 1.1 * 2 - 20px - var(--rdc-safe-bottom)) * 725 / 576); --rdc-uses-card-w: min(725px, 100% - 60px, var(--rdc-uses-card-fit)); display: flex; flex-direction: column; align-items: center; padding-top: var(--rdc-uses-pad-top); padding-bottom: var(--rdc-safe-bottom); } .rdc-uses__title { position: relative; z-index: 3; top: auto; bottom: auto; left: auto; height: auto; margin: 0; text-align: center; } /* «Для любых стрелковых» — в одну строку */ .rdc-uses__title br:first-of-type { display: none; } .rdc-uses__wheel { --rdc-wheel-angle: 0; --rdc-wheel-dx: 0; --rdc-wheel-dy: 300; --rdc-wheel-side-w: 502; position: relative; top: auto; bottom: auto; left: auto; height: auto; aspect-ratio: 725 / 576; margin: auto; } .rdc-uses__card { transform-origin: 50% 0; } /* --- Секция 10: заголовок и список друг под другом --- Вместе по центру высоты, между ними 40. Колонка — по левому полю, до 767 — колонка 520 по центру (макет 700), ниже — поля 20. */ .rdc-kit { --rdc-kit-title: 45px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--rdc-kit-gap); padding: 0 max(var(--rdc-kit-x), (100% - var(--rdc-kit-col, 100%)) / 2); } .rdc-kit__title, .rdc-kit__list { position: static; height: auto; margin: 0; } /* «К установке из коробки» — одной строкой, дальше перенос сам */ .rdc-kit__br { display: none; } /* Секция 11: заголовок 45, кадр уходит вправо — на макетах 992, 768 и 700 фото на весь экран, сдвиг 88–90% (снято наложением). Прицел остаётся за текстом, но в кадре. */ .rdc-help { --rdc-help-title: 45px; --rdc-media-focus: 90% center; } .rdc-faq { --rdc-faq-title: 45px; } } /* ===== 789-991: safe 88 / 92, пэддинг 30, надзаголовок 24 ===== */ @container rdc (max-width: 991px) { .rdc-col > * { --rdc-container: 700px; --rdc-safe-top: 88px; --rdc-safe-bottom: 92px; --rdc-safe-x: 30px; } /* Кадр горизонтальный: на узком экране центральный кроп срезал бы и прицел, и лицо — уводим точку фокуса вправо */ .rdc-hero { --rdc-media-focus: 72% center; } .rdc-hero__eyebrow { font-size: 24px !important; } .rdc-title-gap { gap: 32px; } /* --- Секция 4 переезжает из двух колонок в столбик --- Заголовок и таблица сверху, схемы рядом под ними. Гап между заголовком и таблицей на десктопе был остатком высоты; в столбике остатка нет, поэтому задаётся числом. */ .rdc-sizes { --rdc-sizes-scheme-gap: 30px; } .rdc-sizes__grid { flex-direction: column; gap: 40px; } .rdc-sizes__main { flex: none; width: 100%; justify-content: flex-start; gap: 50px; } .rdc-sizes__title { text-align: center; } /* Ряд уже доступной ширины: по нему схемы и ужимаются до макетных 80%. flex-basis у каждой свой, поэтому пропорции между ними сохраняются. */ .rdc-sizes__schemes { flex-direction: row; width: 100%; max-width: var(--rdc-sizes-row-max); margin: 0 auto; } .rdc-sizes__schemes svg { flex: 0 1 auto; min-width: 0; height: auto; } } /* ===== 700-788: пэддинг 20, заголовок 38, блок 450 ===== */ @container rdc (max-width: 788px) { .rdc-col > * { --rdc-safe-x: 20px; } .rdc-hero__content { max-width: 450px; } .rdc-hero__title, .rdc-features__title, .rdc-marks__title, .rdc-marks__intro-title { font-size: 38px !important; } /* Ниже 740 контейнер перестаёт держать таблицу и ячейка падает с 233 до 220. Под текст оставалось ровно 100 при нужных ему 100 — «Размер A» рвался на две строки. Поле режется с обеих сторон сразу: правое от него и считается. */ .rdc-sizes { --rdc-sizes-cell-pad: 20px; } .rdc-optics__title { font-size: 38px !important; } /* --- Секция 6: плашка во всю ширину, прижата к низу --- Фото здесь занимает только верх экрана, и плашка встаёт под него, а не поверх. Ширина — экран минус поля; max-width из базового правила сам даёт ровно это. Заголовок остаётся 45, в отличие от других секций. */ .rdc-build { --rdc-build-x: 30px; --rdc-build-w: 100%; --rdc-build-pad-x: 30px; --rdc-build-bottom: 30px; } .rdc-build__panel { top: auto; bottom: var(--rdc-build-bottom); margin: 0; } /* --- Секция 7: плашка 520 по центру экрана --- Ширина держится, а не растёт с экраном: длина строки абзаца остаётся той же. Ниже 600 её ограничивает max-width — поля 40 по бокам. */ .rdc-support { --rdc-support-x: 40px; --rdc-support-w: 520px; --rdc-support-pad-x: 20px; --rdc-support-title: 38px; /* Снято наложением исходника на макет 700 — сходится до 2 единиц яркости на пиксель. */ --rdc-media-focus: 83% center; } .rdc-support__panel { left: 0; right: 0; margin: auto; } /* --- Секция 8: фото наверх, текст под него --- Фото по ширине экрана от верха и плавно уходит в фон — так на макетах 768, 700 и 350. Высота — ширина × 960/1654, помноженная на --rdc-energy-zoom: на 700 и 350 кадр на макете крупнее, чем по ширине (снято по зелёной марке в окне прицела). Лишнее по бокам режет cover. На высоких экранах текст уезжает вниз, и фото дотягивается до него, как в шестой секции: верх текста считает JS (--rdc-reach-top). Дотягиваясь, фото крупнеет и сильнее режется по бокам, поэтому кадр сдвигается не процентом, а долей самого фото: --rdc-energy-anchor — сколько кадра слева уходит за край. Процент при большом увеличении уводил коллиматор (21–44% ширины кадра) за левый край; доля держит его на месте при любом увеличении. min() не даёт правому краю фото отойти от края экрана. */ .rdc-energy { --rdc-energy-w: 100%; --rdc-energy-right: 30px; --rdc-energy-anchor: 0.09; } .rdc-energy .rdc-section__media img { --rdc-energy-h: max( calc(100cqw * 960 / 1654 * var(--rdc-energy-zoom)), calc(var(--rdc-reach-top, 0px) + var(--rdc-energy-overlap)) ); --rdc-energy-img-w: calc(var(--rdc-energy-h) * 1654 / 960); height: var(--rdc-energy-h); object-position: calc(min(var(--rdc-energy-img-w) * var(--rdc-energy-anchor), var(--rdc-energy-img-w) - 100cqw) * -1) top; -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 92%); mask-image: linear-gradient(to bottom, #000 65%, transparent 92%); } .rdc-energy__content { top: auto; bottom: var(--rdc-energy-bottom); margin: 0; } /* Секция 10: на макете 768 поле 40, а не 50 */ .rdc-kit { --rdc-kit-x: 40px; } } /* ===== Без контейнера ===== */ @container rdc (max-width: 767px) { .rdc-col > * { --rdc-container: none; } .rdc-title { font-size: 32px !important; } .rdc-subtitle { font-size: 24px !important; } /* Секция 8: по макету 700 текст уже не во всю ширину, а колонкой 520 по центру, как плашка седьмой, и отступ снизу больше. Макет 768 от этого отличается, поэтому граница здесь, а не на 788. */ .rdc-energy { --rdc-energy-w: 520px; --rdc-energy-right: 40px; --rdc-energy-bottom: 90px; --rdc-energy-title: 38px; --rdc-energy-zoom: 1.15; --rdc-energy-anchor: 0.065; } .rdc-energy__content { left: 0; right: 0; margin: 0 auto; } /* Секция 9: по макету 700 карточка 520 по центру, как плашка седьмой. */ .rdc-uses { --rdc-uses-title: 38px; --rdc-uses-card-w: min(520px, 100% - 60px, var(--rdc-uses-card-fit)); } /* Секция 10: колонка 520 по центру, как у соседних секций на 700 */ .rdc-kit { --rdc-kit-title: 38px; --rdc-kit-col: 520px; } /* Секция 11: тоже колонка 520 по центру, текст дальше переносится сам */ .rdc-help { --rdc-help-title: 38px; --rdc-help-x: 40px; } .rdc-help__content { left: 0; right: 0; width: 520px; margin: auto; } .rdc-help__br { display: none; } /* FAQ: колонка 520 по центру, сверху на макете 700 отступ около 90 */ .rdc-faq { --rdc-faq-title: 38px; --rdc-faq-top: 90px; padding-left: max(40px, (100% - 520px) / 2); padding-right: max(40px, (100% - 520px) / 2); } } /* ===== ≤699: safe 76 / 84, gap 20, кегли 16/24/14, блок во всю ширину ===== */ @container rdc (max-width: 699px) { .rdc-col > * { --rdc-safe-top: 76px; --rdc-safe-bottom: 84px; } .rdc-hero__content { gap: 20px; max-width: none; } .rdc-hero__eyebrow { gap: 8px; font-size: 16px !important; } /* Заголовки на мобилке — 18 во всех секциях и в FAQ, а не 20-24, как на макете 350: решение принято после макета. */ .rdc-hero__title, .rdc-features__title, .rdc-marks__title, .rdc-marks__intro-title { font-size: 18px !important; } .rdc-hero__text, .rdc-marks__text { font-size: 14px !important; } /* Подзаголовки — 16, а не 18, как на макете 350: иначе они сравнялись бы с заголовками. Так же в секциях 5 и 6. */ .rdc-features__subtitle, .rdc-marks__lead, .rdc-marks__intro-lead { font-size: 16px !important; } /* Карточка ужимается до одной в кадре. Зазор, поля и гапы внутри карточки по макету остаются десктопными — уменьшается только сама карточка. */ .rdc-features { --rdc-card-w: 290px; } .rdc-card__title { font-size: 18px !important; } .rdc-card__text { font-size: 14px !important; } .rdc-title { font-size: 28px !important; } .rdc-title-gap { gap: 24px; } /* --- Секция 4: шапка таблицы перестраивается --- Плитка встаёт над текстом и вместе с ним центруется, поэтому строка шапки становится выше остальных, а не ниже: 50 на плитку, 10 на гап, строка текста и поля. Строки значений наоборот ужимаются. */ .rdc-sizes { --rdc-sizes-head-h: 122px; --rdc-sizes-row-h: 62px; --rdc-sizes-cell-pad: 10px; --rdc-sizes-scheme-gap: 20px; } .rdc-sizes__grid { gap: 20px; } .rdc-sizes__main { gap: 20px; } .rdc-sizes__title { font-size: 18px !important; } /* Перенос после «РАЗМЕР» рассчитан на широкий заголовок. Пробел перед
в разметке стоит намеренно — иначе слова слипнутся. */ .rdc-sizes__title br { display: none; } .rdc-sizes__table th, .rdc-sizes__table td { font-size: 16px !important; } .rdc-sizes__table th { padding: 0 var(--rdc-sizes-cell-pad); text-align: center; } .rdc-sizes__mark { position: static; margin: 0 auto 10px; transform: none; } /* --- Секция 5 на мобилках --- */ /* Поля плашки на мобилке — 20, иначе текстовому блоку внутри остаётся меньше 300 и заголовок ломается на четыре строки. */ .rdc-optics { --rdc-optics-panel-left: 20px; --rdc-optics-panel-right: 20px; --rdc-optics-panel-pad: 20px; } .rdc-optics__title { font-size: 18px !important; } .rdc-optics__lead { font-size: 16px !important; } .rdc-optics__name { font-size: 18px !important; } .rdc-optics__sub { font-size: 16px !important; } .rdc-optics__text { font-size: 14px !important; } /* --- Секция 6 на мобилках --- Всё по макету 350. Поля по бокам плашки здесь 40 — шире, чем на 768. */ .rdc-build { --rdc-build-x: 40px; --rdc-build-pad-x: 20px; --rdc-build-bottom: 100px; --rdc-build-gap-mid: 20px; --rdc-build-gap-list: 20px; --rdc-build-title: 18px; --rdc-build-lead: 16px; --rdc-build-name: 18px; --rdc-build-sub: 16px; --rdc-build-item: 14px; } /* --- Секция 7 на мобилках --- Плашка прижата к низу с тем же отступом 100, что и в шестой. */ .rdc-support { --rdc-support-title: 18px; --rdc-support-text: 14px; --rdc-support-bottom: 100px; /* Так же наложением на макет 350. */ --rdc-media-focus: 67% center; } /* --- Секция 8 на мобилках --- По макету 350: все зазоры 20, кадр ещё крупнее. */ .rdc-energy { --rdc-energy-bottom: 100px; --rdc-energy-gap: 20px; --rdc-energy-title: 18px; --rdc-energy-text: 14px; --rdc-energy-name: 18px; --rdc-energy-zoom: 1.3; --rdc-energy-anchor: 0.147; } /* --- Секция 9 на мобилках --- Карточка разбирается: фото во всю ширину экрана, растворяется в фоне сверху и снизу, под ним сплошная плашка с полями 20, чуть заходит на фото. Колесо то же, только соседи ставятся за край экрана — карточка подкатывает снизу целиком. Фон темнее, чем на остальных ширинах, и без свечения — так на макете 350. Слот под заголовком занимает всё оставшееся место, карточка — его же минус нижний отступ с макета. Плашка по тексту, фото берёт остаток: у карточек с длинным текстом плашка выше, и при фото фиксированной высоты они уходили бы за низ экрана. */ .rdc-uses { --rdc-bg: #050505; --rdc-uses-top: 71px; --rdc-uses-bottom: 39px; --rdc-uses-title: 18px; --rdc-uses-card-w: 100%; --rdc-uses-pad-x: 20px; --rdc-uses-gap: 20px; --rdc-uses-name: 18px; --rdc-uses-text: 14px; } .rdc-uses::before { display: none; } .rdc-uses__title br:first-of-type { display: inline; } .rdc-uses__wheel { --rdc-wheel-side-w: 0; --rdc-wheel-dy: 800; flex: 1; align-self: stretch; aspect-ratio: auto; margin: 36px 0 0; } .rdc-uses__card { bottom: var(--rdc-uses-bottom); display: flex; flex-direction: column; overflow: visible; border-radius: 0; background: none; box-shadow: none; } .rdc-uses__photo { position: relative; flex: 1; min-height: 0; height: auto; object-position: 65% 30%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 75%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 75%, transparent); } .rdc-uses__body { position: relative; flex: none; margin: -8px 20px 0; border-radius: 8px; background: #252525; backdrop-filter: none; -webkit-backdrop-filter: none; } /* --- Секция 10 на мобилках --- По макету 350. Строки пунктов уже доступной ширины: «быстросъемное крепление» (237) на макете переносится, а «Коллиматор ARTELV RDC 2» (228) стоит в строку — текст не шире 232. */ .rdc-kit { --rdc-kit-x: 20px; --rdc-kit-title: 18px; --rdc-kit-item: 16px; --rdc-kit-icon: 16px; --rdc-kit-icon-gap: 10px; --rdc-kit-item-max: calc(232px + 16px + 10px); } .rdc-kit__br-sm { display: inline; } /* --- Секция 11 на мобилках --- Фото уходит наверх: на макете 350 оно высотой 331 (0.946 ширины) и растворяется в фоне. Текст прижат к низу с тем же отступом 100, что в секциях 7 и 8. На высоких экранах фото дотягивается до текста, как в восьмой (--rdc-reach-top считает JS), и от этого крупнеет. Поэтому кадр ставится не процентом, а по коллиматору: его центр на 71.6% ширины исходника встаёт посреди экрана, clamp не даёт краям фото отойти от краёв экрана. На 350 это сдвиг 233 против 221 на макете; прижатие к правому краю на 430×932 срезало бы коллиматор слева. */ .rdc-help { --rdc-help-x: 20px; --rdc-help-title: 18px; --rdc-help-text: 16px; --rdc-help-phone: 24px; } .rdc-help .rdc-section__media img { --rdc-help-h: max( calc(100cqw * 331 / 350), calc(var(--rdc-reach-top, 0px) + var(--rdc-help-overlap)) ); --rdc-help-img-w: calc(var(--rdc-help-h) * 1654 / 960); height: var(--rdc-help-h); object-position: calc(clamp(0px, var(--rdc-help-img-w) * 0.716 - 100cqw / 2, var(--rdc-help-img-w) - 100cqw) * -1) top; -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent); mask-image: linear-gradient(to bottom, #000 75%, transparent); } .rdc-help__content { top: auto; bottom: var(--rdc-help-bottom); width: auto; margin: 0; left: var(--rdc-help-x); right: var(--rdc-help-x); } /* --- FAQ на мобилках --- По макету 350 (скриншот уменьшен до 273, поэтому кегли вопроса и кружка — по ширине колонки, а не замером). Ответ идёт под кружок, на всю ширину пункта. */ .rdc-faq { --rdc-faq-top: 20px; --rdc-faq-title: 18px; --rdc-faq-q: 20px; --rdc-faq-a: 14px; --rdc-faq-icon: 40px; --rdc-faq-icon-gap: 10px; --rdc-faq-a-right: 0px; padding-left: 20px; padding-right: 20px; } .rdc-support__panel { top: auto; bottom: var(--rdc-support-bottom); margin: 0 auto; } } /* ========================================================================== Телефоны: полотно вместо стопки В портрете уже 700 стопки нет: секции идут обычной страницей, шаги внутри секций — друг под другом. Включает JS (wantsFlow → .rdc-stack--flow), всё остальное здесь. Раскладки берутся мобильные, из блоков выше; меняется только то, что держалось за высоту экрана: - секция не ниже экрана, но растёт по содержимому. Где текст был прижат к низу абсолютом, он встаёт в поток, а сверху секции отбивается место под фото; - ленты, подмена и колесо разложены в столбик. В третьей и шестой фото и плашки лежат в разных обёртках, поэтому обёртки растворены (display: contents), а фото и плашки расставлены по строкам сетки. Часть правил перебивает фолбэк без JS (.rdc-stack:not(--animated) …) — отсюда двойной класс .rdc-stack.rdc-stack--flow. ========================================================================== */ @container rdc (max-width: 699px) { /* --- 2: карточки столбиком, без подсветки --- */ .rdc-stack.rdc-stack--flow .rdc-cards { overflow: visible; margin-right: 0; } .rdc-stack--flow .rdc-cards__marker { display: none; } .rdc-stack--flow .rdc-cards__track { flex-direction: column; gap: 0; padding: 10px 0; } .rdc-stack--flow .rdc-card { width: auto; } /* --- 3: вступление на весь экран, дальше каждая марка — фото и под ним плашка. Фото выше на высоту полосы со стопки (270), чтобы фото с плашкой вместе были примерно в экран. Строки: 1 — вступление поверх своего фото, дальше фото и плашка каждой марки по очереди. --- */ .rdc-stack--flow .rdc-marks { display: grid; grid-template-columns: 100%; } .rdc-stack--flow .rdc-marks .rdc-section__media, .rdc-stack.rdc-stack--flow .rdc-marks__rail, .rdc-stack--flow .rdc-marks__track { display: contents; } .rdc-stack--flow .rdc-marks .rdc-section__media img { position: relative; inset: auto; grid-column: 1; height: calc(var(--rdc-vh) - var(--rdc-bar-min-h)); opacity: 1; transform: none; } .rdc-stack--flow .rdc-marks .rdc-section__media img:first-child { height: var(--rdc-vh); } .rdc-stack--flow .rdc-marks__frame { grid-column: 1; height: auto; } .rdc-stack--flow .rdc-marks .rdc-section__media img:nth-child(1), .rdc-stack--flow .rdc-marks__frame:nth-child(1) { grid-row: 1; } .rdc-stack--flow .rdc-marks .rdc-section__media img:nth-child(2) { grid-row: 2; } .rdc-stack--flow .rdc-marks__frame:nth-child(2) { grid-row: 3; } .rdc-stack--flow .rdc-marks .rdc-section__media img:nth-child(3) { grid-row: 4; } .rdc-stack--flow .rdc-marks__frame:nth-child(3) { grid-row: 5; } .rdc-stack--flow .rdc-marks .rdc-section__media img:nth-child(4) { grid-row: 6; } .rdc-stack--flow .rdc-marks__frame:nth-child(4) { grid-row: 7; } .rdc-stack--flow .rdc-marks .rdc-section__media img:nth-child(5) { grid-row: 8; } .rdc-stack--flow .rdc-marks__frame:nth-child(5) { grid-row: 9; } /* Вступление растягивается на свою строку, то есть на фото в экран */ .rdc-stack--flow .rdc-marks__intro { top: 0; height: auto; } /* Меню магазина здесь не мешает — снизу обычное поле, а не safe-зона */ .rdc-stack--flow .rdc-marks__panel { min-height: 0; padding-bottom: 40px; } /* --- 5: текст сверху, слайды столбиком: фото и плашка внизу него --- */ .rdc-stack--flow .rdc-optics__grid { height: auto; } .rdc-stack--flow .rdc-optics__intro { flex: none; padding-bottom: 40px; } .rdc-stack.rdc-stack--flow .rdc-optics__rail { height: auto; padding-bottom: 40px; overflow: visible; } .rdc-stack--flow .rdc-optics__track { display: flex; flex-direction: column; gap: 20px; } .rdc-stack--flow .rdc-optics__slide { display: flex; align-items: flex-end; height: auto; min-height: var(--rdc-optics-slide-h); padding: 0 var(--rdc-optics-panel-right) 20px var(--rdc-optics-panel-left); } .rdc-stack--flow .rdc-optics__slide picture { position: absolute; inset: 0; } .rdc-stack--flow .rdc-optics__panel { position: relative; left: auto; right: auto; bottom: auto; width: 100%; } /* --- 6: три блока — фото по ширине и плашка, заходящая на его низ --- */ .rdc-stack--flow .rdc-build { display: grid; grid-template-columns: 100%; row-gap: 40px; padding-bottom: 40px; } .rdc-stack--flow .rdc-build .rdc-section__media, .rdc-stack--flow .rdc-build__swap { display: contents; } .rdc-stack--flow .rdc-build .rdc-section__media img { position: relative; inset: auto; grid-column: 1; align-self: start; min-height: 0; opacity: 1; } .rdc-stack--flow .rdc-build__panel { position: relative; top: auto; bottom: auto; left: auto; grid-column: 1; align-self: start; width: auto; max-width: none; height: auto; margin: calc(100cqw * 1440 / 2476 - var(--rdc-build-overlap)) var(--rdc-build-x) 0; } .rdc-stack--flow .rdc-build .rdc-section__media img:nth-child(1), .rdc-stack--flow .rdc-build__panel:nth-child(1) { grid-row: 1; } .rdc-stack--flow .rdc-build .rdc-section__media img:nth-child(2), .rdc-stack--flow .rdc-build__panel:nth-child(2) { grid-row: 2; } .rdc-stack--flow .rdc-build .rdc-section__media img:nth-child(3), .rdc-stack--flow .rdc-build__panel:nth-child(3) { grid-row: 3; } /* --- 7, 8, 11: текст в потоке и прижат к низу, как был абсолютом. Сверху место под фото, чтобы выросшая секция не загнала текст на него глубже, чем на макете. --- */ .rdc-stack--flow .rdc-support, .rdc-stack--flow .rdc-energy, .rdc-stack--flow .rdc-help { display: flex; flex-direction: column; justify-content: flex-end; } .rdc-stack--flow .rdc-support { padding: var(--rdc-safe-top) 0 var(--rdc-support-bottom); } .rdc-stack--flow .rdc-energy { padding: calc(100cqw * 960 / 1654 * var(--rdc-energy-zoom) - var(--rdc-energy-overlap)) 0 var(--rdc-energy-bottom); } .rdc-stack--flow .rdc-help { padding: calc(100cqw * 331 / 350 - var(--rdc-help-overlap)) 0 var(--rdc-help-bottom); } .rdc-stack--flow .rdc-support__panel, .rdc-stack--flow .rdc-energy__content, .rdc-stack--flow .rdc-help__content { position: relative; top: auto; bottom: auto; } /* Поля у текста одиннадцатой были заданы left/right абсолюта — в потоке это сдвиг, а не поля */ .rdc-stack--flow .rdc-help__content { left: auto; right: auto; margin: 0 var(--rdc-help-x); } /* --- 9: шесть карточек столбиком, фото в пропорции снимка --- */ .rdc-stack--flow .rdc-uses { padding-bottom: 40px; } .rdc-stack--flow .rdc-uses__wheel { flex: none; display: flex; flex-direction: column; gap: 40px; height: auto; } .rdc-stack--flow .rdc-uses__card { position: relative; inset: auto; } .rdc-stack--flow .rdc-uses__photo { flex: none; height: auto; aspect-ratio: 725 / 576; } /* --- 10: по центру экрана, но с полями — на случай, если не влезет --- */ .rdc-stack--flow .rdc-kit { padding-top: var(--rdc-safe-top); padding-bottom: var(--rdc-safe-bottom); } } /* Лёгкое появление в полотне. Классы ставит JS (initFlow), только когда IntersectionObserver есть и движение не отключено в системе. */ .rdc-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .rdc-reveal.is-visible { opacity: 1; transform: none; } /* ========================================================================== Отладка: видно границы safe-зоны и контейнера. Снять класс перед сдачей. ========================================================================== */ .rdc--debug .rdc-section__safe > * { outline: 1px dashed rgba(243, 227, 205, .5); } .rdc--debug .rdc-container { outline: 1px dashed rgba(243, 227, 205, .35); }