/* Сетка WowVendor — брейкпоинты и контейнер для БЛОКОВ. Источник: Figma «🚧 Design System 2.0», нода 1:6 «• Grids» (P6cIX4bYZRbWPcXtA2i2EQ). Значения сняты с фреймов сетки, не выдуманы. ПОЛНАЯ ТАБЛИЦА ИЗ FIGMA (справочно — активны не все точки, см. ниже): ┌──────────────────────┬─────────┬───────────┬─────────┬────────┬───────┐ │ Фрейм │ Вьюпорт │ Контейнер │ Колонок │ Gutter │ Поля │ ├──────────────────────┼─────────┼───────────┼─────────┼────────┼───────┤ │ Mobile │ 320 │ 280 │ 4 │ 16 │ 20 │ │ Mobile Landscape │ 576 │ 536 │ 8 │ 16 │ 20 │ │ Tablet │ 768 │ 728 │ 12 │ 16 │ 20 │ │ Tablet Landscape │ 1024 │ 960 │ 12 │ 24 │ 32 │ │ Desktop │ 1280 │ 1152 │ 12 │ 24 │ 64 │ │ Large Desktop │ 1920 │ 1312 │ 12 │ 24 │ авто │ └──────────────────────┴─────────┴───────────┴─────────┴────────┴───────┘ Арифметика сходится: 4×58+3×16=280, 8×53+7×16=536, 12×46+11×16=728, 12×74+11×24=1152. У Tablet Landscape в файле дробный фрейм (1023.9999…, поля 36/34) — принято ровное 32/960 по согласованию. АКТИВНЫЕ ТОЧКИ ПЕРЕЛОМА — три: base (mobile) / 768 (tablet) / 1280 (desktop). 576 и 1024 намеренно НЕ ломают раскладку: между активными точками контейнер течёт. Колонки 4 → 12 → 12, gutter 16 → 16 → 24. ПОЧЕМУ ЧИСЛА, А НЕ ТОКЕНЫ, В УСЛОВИЯХ @media: var() запрещён внутри @media/@container — условие принимает только числовой литерал. Это ограничение CSS, а не отступление от правил проекта. Числа точек перелома живут ЗДЕСЬ и больше нигде; в разметке блоков их дублировать нельзя. ПОЧЕМУ padding-inline: 64px НА ДЕСКТОПЕ — raw px: токена --spacing-64 в token-index нет (шкала: …60, 80). Это структурный размер, как 56px аватара в blockquote и 20px триггера в tooltip. Пара max-width:1440 + padding 64 воспроизводит ОБЕ десктопные ноды Figma сразу: при 1280 контент = 1280−128 = 1152 ✓, при ≥1440 контент = 1440−128 = 1312 ✓. Всё остальное — токены: --spacing-20 (поля), --spacing-16 / --spacing-24 (gutter, привязан к переменной Spacing/spacing-24 в самой ноде сетки). */ :root { --grid-columns: 4; --grid-gutter: var(--spacing-16); } @media (min-width: 768px) { :root { --grid-columns: 12; } } @media (min-width: 1280px) { :root { --grid-gutter: var(--spacing-24); } } /* Контейнер блока: центрирован, поля по брейкпоинту. 320→280, 576→536, 768→728, 1280→1152, ≥1440→1312 (совпадает с Figma). --container-pad — собственные поля контейнера, вынесены в переменную, чтобы блок мог их «отыграть назад». Это нужно прокручиваемым лентам (карусели, ряды чипсов): поля контейнера ОБРЕЗАЮТ такую ленту, и она упирается в невидимую стену вместо того, чтобы уходить за край экрана. Приём full-bleed: лента выходит за поля отрицательным margin и возвращает их себе padding'ом — контент выровнен как раньше, но прокрутка идёт от края до края. Значение читается ТОЛЬКО у потомков .container; вне контейнера переменной нет, и блок обязан подставлять fallback 0px (тогда ничего не смещается). */ .container { box-sizing: border-box; width: 100%; margin-inline: auto; --container-pad: var(--spacing-20); padding-inline: var(--container-pad); } @media (min-width: 1280px) { .container { max-width: 1440px; --container-pad: 64px; /* raw px: --spacing-64 в шкале отсутствует */ } } /* Колоночная сетка. Дочерние элементы занимают колонки через grid-column. */ .grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); gap: var(--grid-gutter); } /* ========================================================================== КОНТЕЙНЕРНЫЕ ТОЧКИ ПЕРЕЛОМА (для блоков) @media меряет ОКНО. Блок обязан переключаться от СОБСТВЕННОЙ ширины: showcase-реплика фрейма в compare.mjs шире вьюпорта (например, 1336px при окне 1280), и @media внутри .figma-frame сработал бы от окна, подменил раскладку и развалил пиксельную сверку. Пороги здесь — это ШИРИНА КОНТЕЙНЕРА на активных точках, взятая из таблицы выше, а не ширина вьюпорта: вьюпорт 768 → контейнер 728 вьюпорт 1280 → контейнер 1152 Числа точек перелома по-прежнему живут ТОЛЬКО в этом файле: блок читает готовый результат через переменные и НЕ пишет @container сам. Как пользоваться:
<- задаёт контейнер
<- носитель переменных Флаги --bp-tablet / --bp-desktop равны 0 или 1 и годятся для арифметики в calc() (например, «сколько карточек видно»). ТРОЙКА --only-*: подставляется в display у элементов, которые есть только на своей точке. --only-desktop (≥1152) — flex/none, для колонок и кнопок, которых на узких ширинах нет. Парный к --only-mobile — --from-tablet (none/block): для того, что появляется ТОЛЬКО с планшета (в career-cta мобильная нода несёт четыре аватара вместо шести). Обратный --only-desktop — --below-desktop (flex/none) — для того, что живёт ТОЛЬКО ниже десктопа: в header нижняя строка шапки на 320/768 (кнопка — логотип по центру — кнопка) и на 1280 (логотип, каталог, поиск, группа кнопок) — это разные ноды Figma с разным составом, и одна ветка гасит другую. --only-tablet (728…1151) и --only-mobile (<728) — inline/none. Зачем нужны две последние: жёсткий перенос строки, заданный в САМОМ ТЕКСТЕ ноды Figma на одной точке перелома, — арифметикой на флагах его не получить, потому что display в calc() не считается (banner-about-us: заголовок «Why gamers ⏎ choose us» только на 320, подписи карточек «Positive ⏎ reviews» только на 768). ДОПОЛНИТЕЛЬНЫЕ ФЛАГИ --bp-mlandscape / --bp-tlandscape (576 и 1024). Сетка по-прежнему ломается в ТРЁХ точках: колонки, gutter и поля контейнера на 576 и 1024 не меняются — эти две строки таблицы выше дают только ФЛАГИ для блоков, у которых в Figma есть собственная нода на этой ширине. Введены под banner-feature: у него в макете четыре ноды-брейкпоинта (320 / «768-576» / 1024 / «1280 & >»), и перекладка ряда в столбик стоит именно на 1024, а смена мобильной раскладки на планшетную — на 576. Флаги годятся для арифметики в calc(); пороги — ШИРИНА КОНТЕЙНЕРА (вьюпорт 576 → 536, вьюпорт 1024 → 960), как и у основной тройки. Блок, которому эти точки не нужны, их просто не читает. Пара --from-mlandscape / --below-mlandscape — display-носители (none ↔ inline) для того, что живёт только выше или только ниже этой точки: жёсткого переноса строки, которого на мобильной ноде нет, и мобильного варианта иллюстрации (в banner-feature на 320 стоит ДРУГОЙ, портретный арт). ========================================================================== */ .bp-container { container-type: inline-size; } .bp-scope { --grid-columns: 4; --grid-gutter: var(--spacing-16); --bp-tablet: 0; --bp-desktop: 0; --only-desktop: none; --below-desktop: flex; --only-tablet: none; --only-mobile: inline; --from-tablet: none; /* дополнительные точки (сетку не меняют, см. шапку) */ --bp-mlandscape: 0; --bp-tlandscape: 0; --from-mlandscape: none; --below-mlandscape: inline; } /* вьюпорт 576 → контейнер 536 */ @container (min-width: 536px) { .bp-scope { --bp-mlandscape: 1; --from-mlandscape: inline; --below-mlandscape: none; } } @container (min-width: 728px) { .bp-scope { --grid-columns: 12; --bp-tablet: 1; --only-tablet: inline; --only-mobile: none; --from-tablet: block; } } /* вьюпорт 1024 → контейнер 960 */ @container (min-width: 960px) { .bp-scope { --bp-tlandscape: 1; } } @container (min-width: 1152px) { .bp-scope { --grid-gutter: var(--spacing-24); --bp-desktop: 1; --only-desktop: flex; --below-desktop: none; --only-tablet: none; } } /* ========================================================================== FULL-BLEED — обязателен для ЛЮБОЙ прокручиваемой ленты внутри блока (карусель карточек, ряд чипсов, строка выгод — всё, что не влезает в контейнер и скроллится по горизонтали). ЗАЧЕМ. Поля .container ОБРЕЗАЮТ такую ленту: последний элемент упирается в невидимую стену вместо того, чтобы уходить за край экрана, и пользователь не понимает, что ленту можно листать. Лента должна выходить за поля отрицательным margin и возвращать их себе padding'ом: контент выровнен по контейнеру как прежде, но прокрутка идёт от края до края. КАК ПОЛЬЗОВАТЬСЯ:
… лента … Порог гашения выбирает БЛОК, задавая --bleed на носителе .bp-scope: --bleed-below-tablet лента только на мобиле (со 768 влезает целиком) --bleed-below-desktop лента и на планшете (карусели) 0px bleed не нужен Значение по умолчанию — 0px: без явного --bleed класс .bleed ничего не делает. ЧТО ВАЖНО ЗНАТЬ: - Ширину ленты НЕ фиксировать (никаких width:100%): при заданной ширине отрицательный margin только СДВИГАЕТ ленту, а не растягивает. Ширину даёт align-self:stretch (лента должна быть flex-элементом) либо width:auto у блочного элемента. - Ширина карточек внутри НЕ меняется: flex-basis в % считается от content-box ленты, а он равен (контейнер + 2×поля) − 2×поля = ширине контейнера. - --container-pad есть только у потомков .container. Вне контейнера (showcase-реплика фрейма Figma) действует fallback 0px → реплика не смещается и пиксельная сверка не затрагивается. - Если у ленты есть ЛИНИЯ или рамка, которая по макету идёт ровно по контенту (как разделитель в value-proposition), — вешай bleed НЕ на неё, а на вложенный трек: иначе линия уедет за поля вместе с лентой. ========================================================================== */ .bp-scope { --bleed-below-tablet: calc((1 - var(--bp-tablet)) * var(--container-pad, 0px)); --bleed-below-desktop: calc((1 - var(--bp-desktop)) * var(--container-pad, 0px)); --bleed: 0px; } .bleed { align-self: stretch; width: auto; margin-inline: calc(-1 * var(--bleed)); padding-inline: var(--bleed); /* Доскроленный элемент встаёт по краю КОНТЕНТА, а не экрана. */ scroll-padding-inline: var(--bleed); }