/* Start:/local/templates/a1/css/fonts.css?17852752632543*/ /* ========================================================================== Inter — локальные файлы, без CDN. Вариативный шрифт Inter v4.001 (ось wght 100–900), подмножества и unicode-range взяты один в один из Google Fonts css2: https://fonts.googleapis.com/css2?family=Inter:wght@400..600&display=swap Файлы лежат в ../fonts/, скачаны с fonts.gstatic.com и в репозитории. Один вариативный файл на подмножество закрывает оба нужных начертания — Regular 400 и Semi Bold 600 (§3 ТЗ), поэтому отдельных файлов на вес нет. Браузер тянет только те подмножества, которые реально встретились на странице: русская страница — cyrillic + latin, latin-ext подключается, когда появляется знак рубля ₽ (U+20BD) и прочая расширенная латиница. ========================================================================== */ /* Кириллица: русский текст, ё, №, ударение */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/local/templates/a1/css/../fonts/Inter-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* Базовая латиница, типографские кавычки, тире, пробелы */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/local/templates/a1/css/../fonts/Inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Расширенная латиница: сюда попадает знак рубля ₽ (U+20BD) для цен */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/local/templates/a1/css/../fonts/Inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* End */ /* Start:/local/templates/a1/css/tokens.css?178903827531772*/ /* ========================================================================== tokens — все токены дизайна из §3 ТЗ одним слоем. Ниже по каскаду литералов цвета и кегля быть не должно: только var(). ТИПОГРАФИЧЕСКИХ УРОВНЕЙ ТРИ, А НЕ ЧЕТЫРЕ. В Figma живут три набора текстовых стилей: «Главная 4/1600px/*», «Главная 4/1200px/*» и «Главная 4/Mob/*». Отдельного набора под Tab 800 нет — планшет переиспользует набор 1200px. Поэтому кегли переключаются на 800 (mob → набор 1200px) и на 1600 (набор 1200px → набор 1600px), а брейкпоинт 1200 меняет только сетку и высоту хедера. ========================================================================== */ :root { /* ---------------------------------------------------------------------- Цвета (§3). Шесть именованных стилей заливки из макета плюс два безымянных значения, у которых в §3 есть роль, но нет имени стиля (--a1-canvas и --a1-black-light). Ничего сверх этих восьми в вёрстке появляться не должно. ---------------------------------------------------------------------- */ /* Фон полотна страницы. Стиля с именем в макете у него нет — §3 перечисляет его первым и без названия: «— #000000 (фон полотна страницы)». Отдельный токен, а НЕ var(--a1-black): Black #222222 заливает тёмные кнопки, плашки и табы, и это другая роль. Правка от 29.07.2026. До неё --a1-bg ссылался на --a1-black, и это был видимый дефект прода: тёмные кнопки #222222 сливались с фоном #222222 и выглядели подписью без плашки («Подробнее» на 20 карточках, «Конфигуратор», «Скачать каталог», плашка CTA), а рамка неактивного таба (#222222 по легенде) не читалась вовсе. Измерено по макету: гистограмма 1490:8962 даёт #000000 47.3 % против #222222 3.2 %, левое поле страницы на девяти высотах — #000000; то же на 1641:58100 (1200), 1641:95590 (футер) и в поле легенды 1641:106434 (bg-black). В CTA-блоке 1490:8984 — #000000 55 % фона плюс #222222 31 % плашки кнопки, то есть макет эти два цвета различает. */ --a1-canvas: #000000; --a1-black: #222222; --a1-white: #f0f0f0; --a1-white-pure: #ffffff; --a1-grey: #7c7c7c; --a1-red: #d61c26; /* Red 2. В макете применён как заливка плашки статуса «Автомобиль в наличии» (узел I1631:20509;682:8355). Нажатых состояний в макете нет вообще — легенда §8 состоит только из «СТАТИКА» и «ХОВЕР», — но §3 ТЗ описывает этот цвет как «нажатое/тёмное состояние», поэтому он отдан ещё и :active светлой кнопки. Отдельной роли-алиаса намеренно нет: два назначения (плашка статуса и нажатие) под одно имя не сводятся. */ --a1-red-2: #7c0f15; /* Осветлённый чёрный — фон тёмной кнопки на ховере. В §8 ТЗ он назван «~#3A3A3A», в макете это ровно #484848; по цвету источник истины — макет. В шестёрку токенов §3 не входит, отсюда отдельное имя. */ --a1-black-light: #484848; /* Роли: разметка обращается к ним, а не к палитре напрямую — так смена палитры не требует правки компонентов. */ --a1-bg: var(--a1-canvas); --a1-text: var(--a1-white); --a1-text-muted: var(--a1-grey); --a1-accent: var(--a1-red); /* Цвет кольца фокуса. Отдельная роль, а НЕ ещё одна ссылка на акцент. Правка от 30.07.2026, после жалобы с прода. ПОЧЕМУ ФОКУС ОТДЕЛЁН ОТ АКЦЕНТА. Red #D61C26 в шаблоне занят дважды: им набраны ховеры ссылок и кнопок (§8 ТЗ) и — уже вёрсткой, потому что состояний ошибки в макете нет вовсе, — рамка неверно заполненного поля вместе с подписью под ним и подсказкой tippy. Кольцо фокуса тем же цветом читается сообщением об ошибке там, где ошибки нет. Ровно так его и прочитал заказчик: «такая рамка при вводе, у всех полей» — курсор стоял в необязательном «Комментарии», а поле обводило красным. Своего цвета у ошибок в §3 нет и не вводится, поэтому расходятся не ошибка с акцентом, а фокус с ними обоими. ПОЧЕМУ ИМЕННО БЕЛЫЙ. Фокус поля в макете нарисован не кольцом, а сменой цвета той же рамки: полупрозрачная rgba(240,240,240,0.5) становится сплошной #F0F0F0 при неизменной толщине 1px (узлы 1641:52069 — 1600, 1641:53307 — 1200, 1641:53383 — Tab, 1641:53244 — Mob). То есть индикатором фокуса макет назначает белый. Значение — --a1-white, тот самый #F0F0F0, а не --a1-white-pure. КОНТРАСТ. Кольцо ставится с положительным outline-offset, то есть ложится НАРУЖУ элемента — мерить его надо к фону за элементом, а не к заливке самого элемента. Полотно чёрное (--a1-canvas), белое кольцо на нём даёт 18.43:1 при пороге 3:1 из WCAG 1.4.11; на плашке #222222 — 13.96:1. У светлой кнопки #F0F0F0 кольцо всё равно лежит на чёрном и отделено от плашки зазором в 2px (замер столбцом при dpr 2: чёрный 4 | белый 4 | чёрный 4 | плашка), так что совпадение цвета кольца и заливки индикатор не гасит. ЕСЛИ ПОЯВИТСЯ СВЕТЛЫЙ ФОН. Переопределять роль локально на самом блоке (`.светлый-блок { --a1-focus-ring-color: var(--a1-black); }`), а не менять значение здесь: :focus-visible в base.css читает переменную в момент отрисовки, поэтому наследования достаточно и трогать фундамент не придётся. */ --a1-focus-ring-color: var(--a1-white); /* Разделительная линия: White с альфой 0.5. Тем же значением нарисована нижняя граница хедера, но у той своё имя по месту применения (--a1-header-border-color) — здесь нейтральная роль: горизонтальные линии между блоками подвала (в макете это `` со stroke #F0F0F0 и opacity 0.5) и всё, что появится дальше в той же роли. */ --a1-divider-color: rgba(240, 240, 240, 0.5); /* White fff в §3 подписан как «текст на красном», но текст на красной кнопке в макете — White #F0F0F0. Figma перечисляет стиль White fff среди применённых в узлах 1631:20500 и 1641:52069, однако конкретный слой с ним найти не удалось — то есть применение не найдено, а не доказано его отсутствие. Токен объявлен, потому что он есть в §3; роли-алиаса под него нет: назначение «текст на акценте» макетом не подтверждается. */ /* ---------------------------------------------------------------------- Шрифт ---------------------------------------------------------------------- */ --a1-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --a1-fw-regular: 400; /* Light — пока только описание карточки товара (правка от 10.09.2026, partitions.section). В §3 ТЗ его нет: макет набирает всё Regular и Semi Bold, тоньше описание сделали по просьбе заказчика. */ --a1-fw-light: 300; --a1-fw-semibold: 600; /* Трекинг −6 % у всех заголовочных стилей и ссылок хедера/подвала. В em, а не в px: доля от кегля, поэтому одно значение работает на всех брейкпоинтах (h4 26px → −1.56px, как и указано в §5 ТЗ). */ --a1-heading-tracking: -0.06em; /* ---------------------------------------------------------------------- Типографика — базовый уровень: Mob (< 800px) ---------------------------------------------------------------------- */ --a1-h1-size: 30px; --a1-h1-lh: 1.2; --a1-h2-size: 22px; --a1-h2-lh: 1.1; --a1-h3-size: 18px; --a1-h3-lh: 1.1; /* Стиль Mob/h4 = 16px в макете заведён, но карточка товара на мобильном заголовком берёт Mob/h2 (22px). Токен здесь — определение стиля. Класс на карточке при этом остаётся .a1-h4: он даёт макетные 22/22/26 на Tab/1200/1600, а под 800 кегль переопределяется в стилях раздела (partitions.section, .a1-partitions-card__title). .a1-h2 не подходит — он дал бы 38/38/46 вместо 22/22/26. Проверено рендером этапа 5: 22/22/22/26 на Mob/Tab/1200/1600, ровно по макету. */ --a1-h4-size: 16px; --a1-h4-lh: 1.1; --a1-shead-size: 12px; --a1-shead-lh: 1.1; --a1-shead-tracking: 0; /* txt и sTxt по брейкпоинтам НЕ меняются: в макете это по одному стилю (1600px/txt и 1600px/sTxt), применённому на всех четырёх ширинах. */ --a1-txt-size: 14px; --a1-txt-lh: 1.2; --a1-txt-tracking: 0; --a1-stxt-size: 12px; --a1-stxt-lh: 1.3; --a1-stxt-tracking: 0; /* xsTxt — ступень ниже sTxt: 10/1.3. В §3 ТЗ такого стиля нет, §3 обрывается на sTxt 12 — это пробел ТЗ, а не вольность вёрстки. В макете этим кеглем набраны текст о компании, текст о сертификации и сноска о запрещённых организациях в подвале (узлы 361:11224, 361:11225, 1641:42287). По брейкпоинтам, как txt и sTxt, не меняется. */ --a1-xstxt-size: 10px; --a1-xstxt-lh: 1.3; --a1-xstxt-tracking: 0; /* bTxt — крупный текст абзаца. В §3 ТЗ его нет, в макете есть и он используется (контентные блоки мега-меню, «Реализованные проекты»). */ --a1-btxt-size: 18px; --a1-btxt-lh: 1.3; --a1-btxt-tracking: 0; /* Ссылки хедера и подвала — единственный стиль на все брейкпоинты. Стиль Mob/head foot-er links (16px) в макете заведён, но не применён ни разу, поэтому в токены не вынесен. */ --a1-link-size: 14px; --a1-link-lh: 1; /* Мелкая кнопка-ссылка из легенды §8 («Мелкие кнопки»): 16/1.1 Regular с подчёркиванием. Это не head/footer link, кегль другой. */ --a1-link-small-size: 16px; --a1-link-small-lh: 1.1; /* ---------------------------------------------------------------------- Сетка и контейнеры (§2) | Mob 360 | Tab 800 | Desk 1200 | Desk 1600 padding | 20 | 20 | 40 | 40 контент | 320 | 760 | 1120 | 1520 колонок | 1 | 2 | 2 | 2 gap колонок | — | 60 | 60 | 60 gap строк | 40 | 60 | 60 | 60 Все шесть строк сверены с макетом по координатам узлов. Вертикальный gap на мобильном — 40, а не 60: шаг сетки карточек 476+40 и 500+40. ---------------------------------------------------------------------- */ --a1-container-pad: 20px; /* Полная ширина контейнера вместе с паддингами: 1520 + 40 + 40 */ --a1-container-max: 1600px; --a1-grid-gap: 60px; --a1-grid-row-gap: 40px; --a1-grid-columns: 1; /* ---------------------------------------------------------------------- Хедер (§4.1). Высота 70 на mob/tab, 74 на десктопе. Фон и размытие — из компонента Header в макете. Значения раскрытого меню (затемнение 70 %, blur 20) в аннотации 1641:103931 — их задаёт этап 2, здесь только состояние покоя. ---------------------------------------------------------------------- */ --a1-header-height: 70px; --a1-header-bg: rgba(0, 0, 0, 0.3); --a1-header-blur: 5px; --a1-header-border-color: rgba(240, 240, 240, 0.5); /* ---------------------------------------------------------------------- Шкала слоёв. Литералов z-index ниже по каскаду быть не должно: слои этапов 2 (панели меню, затемнение, бургер) и 6 (модалки, галерея) обязаны уживаться, а разложить их по числам задним числом дороже. Порядок снизу вверх: dim затемнение фона под раскрытым меню (§4.1); menu-panel панель мега-меню и выпадашки — ниже полосы хедера, они из-под неё и выезжают; header полоса хедера; modal-overlay затемнение с блюром под модалкой (§6) — ВЫШЕ хедера; modal сама модалка; gallery полноразмерное фото поверх всего. Хедер ниже модалки, и это не описка. В макете порядок детей поп-апа (Figma отдаёт back-to-front) на всех четырёх брейкпоинтах такой: контент страницы → Header → Rectangle 173 (затемнение во весь фрейм) → «Закрыть ✕» → заголовок → содержимое. Узлы 1496:22405 (Mob), 1641:55746 (Tab), 1560:4574 (Desktop 1600), с направляющими 1641:99999. Затемняющий прямоугольник лежит поверх хедера: на десктопе меню и логотип размыты и затемнены наравне с контентом, резким остаётся один «Закрыть ✕», а на Mob хедера на экране нет вовсе. То есть «хедер остаётся видимым» из §6 означает, что он просвечивает ПОД затемнением, а не лежит над ним. Практическое следствие для этапа 6: подними хедер выше — и на Mob 360 и Tab 800 он вырежет из полноэкранного поп-апа верхние 70 px вместе с кнопкой «Закрыть» (y=20) и заголовком продукта (y=64), а на десктопе меню под модалкой останется кликабельным. fancybox по умолчанию ставит себе 1050 — на этапе 6 его z-index придётся принудительно свести к --a1-z-gallery, иначе он выпадет из этой шкалы. ---------------------------------------------------------------------- */ --a1-z-dim: 50; --a1-z-menu-panel: 80; --a1-z-header: 90; --a1-z-modal-overlay: 100; --a1-z-modal: 110; --a1-z-gallery: 300; /* ---------------------------------------------------------------------- Движение (§8): единственная длительность и кривая на весь сайт. Правка от 10.09.2026: 0.2s → 0.4s. Легенда макета подписывает переходы «0.2s ease in out», но на живом сайте заказчик счёл ховеры резкими, и дизайнер согласовал 0.4s везде: кнопки, хедер, появление слоёв, увеличение фото. Меняется только это значение — все переходы шаблона и разделов читают его через --a1-transition. ---------------------------------------------------------------------- */ --a1-duration: 0.4s; --a1-easing: ease-in-out; --a1-transition: var(--a1-duration) var(--a1-easing); /* ---------------------------------------------------------------------- Базовые компоненты. Скругления в макете нет нигде — 0 вынесен в токен, чтобы не рассыпать литерал по правилам. ---------------------------------------------------------------------- */ --a1-radius: 0; /* Кнопка: 44 высоты, 16 по горизонтали, размытие подложки 4. Подпись кнопки живёт по собственной шкале и НЕ совпадает с txt: 12/1.3 на Mob 360 и Tab 800, 14/1.2 на Desktop 1200 и 1600. Переключение — на 1200, а не на 800, как у заголовков. */ --a1-button-height: 44px; --a1-button-padding-x: 16px; --a1-button-gap: 16px; --a1-button-icon-size: 20px; --a1-button-blur: 4px; --a1-button-font-size: 12px; --a1-button-lh: 1.3; /* Таб */ --a1-tab-padding-x: 20px; /* Иконка-ссылка (соцсети, коммуникационные каналы) */ --a1-icon-link-size: 40px; /* Поле ввода: высота 44 (в §7 ТЗ указано «~48» — макет говорит 44), textarea 88 с отступом 16 со всех сторон. Рамка — белый с альфой 0.5, а не Grey: над чёрным фоном она выглядит как серая, но токен именно белый, и на фокусе альфа уходит в 1. */ /* Текст и плейсхолдер поля тоже по своей шкале: 12/1.1 (Mob/sHead) на Mob 360, 14/1.2 начиная с Tab 800. Переключение — на 800. */ --a1-field-font-size: 12px; --a1-field-lh: 1.1; --a1-field-height: 44px; --a1-field-padding-x: 16px; --a1-field-textarea-height: 88px; --a1-field-textarea-padding: 16px; --a1-field-gap: 20px; --a1-field-border-color: rgba(240, 240, 240, 0.5); --a1-field-border-color-focus: var(--a1-white); /* Поле внутри модалки лежит на своей подложке с размытием 10 */ --a1-field-overlay-bg: rgba(0, 0, 0, 0.7); --a1-field-overlay-blur: 10px; /* Чекбокс: квадрат 20, отметка — залитый квадрат 14 с отступом 3 */ --a1-checkbox-size: 20px; --a1-checkbox-mark-size: 14px; --a1-checkbox-gap: 20px; } /* -------------------------------------------------------------------------- Tab 800 и выше — переключение на набор стилей «1200px». Сетка здесь становится двухколоночной, паддинг остаётся 20. -------------------------------------------------------------------------- */ @media (min-width: 800px) { :root { --a1-h1-size: 50px; --a1-h2-size: 38px; --a1-h3-size: 28px; --a1-h4-size: 22px; --a1-shead-size: 16px; /* Поле переключается здесь: на Tab уже 14/1.2 */ --a1-field-font-size: 14px; --a1-field-lh: 1.2; --a1-grid-columns: 2; --a1-grid-row-gap: 60px; } } /* -------------------------------------------------------------------------- Desktop 1200 и выше — кегли те же, что на Tab; меняются только паддинг контейнера и высота хедера. -------------------------------------------------------------------------- */ @media (min-width: 1200px) { :root { --a1-container-pad: 40px; --a1-header-height: 74px; /* Подпись кнопки переключается здесь, а не на 800: на Tab 800 она ещё 12/1.3 */ --a1-button-font-size: 14px; --a1-button-lh: 1.2; } } /* -------------------------------------------------------------------------- Desktop 1600 и выше — набор стилей «1600px». -------------------------------------------------------------------------- */ @media (min-width: 1600px) { :root { --a1-h1-size: 70px; --a1-h2-size: 46px; --a1-h3-size: 38px; --a1-h4-size: 26px; } } /* ========================================================================== МЕНЮ ХЕДЕРА (§4.1): типографика и цвета мега-меню, выпадашек и бургера. Почему здесь, а не в menu.css. Следующий раздел редизайна забирает tokens.css как определение дизайна целиком — шкала кеглей и палитра обязаны быть в одном файле. Объявления, оставшиеся в слое компонента, до него бы не доехали, и меню приехало бы без половины шкалы. Геометрия меню (шаг сетки, высота плитки, паддинг панелей, ширина панели режима работы) осталась в menu.css: это раскладка одного компонента, а не токен дизайна. Блоки @media ниже отдельные, а не дописанные в те, что выше. Файл уже отревьюен, добавление не должно править принятые строки; повторный @media с той же границей CSS разрешает и стоит ноль. ========================================================================== */ :root { /* ---------------------------------------------------------------------- Плотность слоёв меню (аннотация 1641:103931). ПОКОЙ И ПАНЕЛИ: rgba(0,0,0,0.3) + размытие 5px. Этим залиты полоса хедера, выпадашки «Опции» и «Компания» (узлы 1641:7901 и 1632:7898) и панель режима работы (1632:8806). Замер по рендеру макета 1632:8466: фон 218 → 149 под панелью, α ≈ 0.31. РАСКРЫТОЕ МЕГА-МЕНЮ: 0.7 + размытие 10px. Аннотация формулирует это как «30 % → 70 %, background-blur 10 → 20», и удвоенные числа блюра в ней — свойство самой аннотации, а не единиц Figma: codegen отдаёт ровно backdrop-blur-[5px] в покое и backdrop-blur-[10px] в раскрытии, никакого коэффициента между Figma и CSS нет. Затемнение применяется ТОЛЬКО к мега-меню «Продукты»: и аннотация («При наведении кнопка "Продукты"…»), и карта зон Header-продукты_поля_активности адресованы одному пункту. Замер рендеров подтверждает: при раскрытых «Опциях» полоса хедера 154.2 против 155.4 в покое, фон под ней 240.6 против 240.5 — не меняется. Свой токен, а не var(--a1-header-bg): тот переопределяется на .a1-header.is-menu-open, и панели, лежащие внутри хедера, унаследовали бы значение раскрытия. ---------------------------------------------------------------------- */ --a1-menu-panel-bg: rgba(0, 0, 0, 0.3); --a1-menu-panel-blur: 5px; --a1-menu-open-bg: rgba(0, 0, 0, 0.7); --a1-menu-open-blur: 10px; /* Затемнение фото на плитке. На десктопе это сплошной слой rgba(0,0,0,0.4), на tab/mob — два градиента, тёмных сверху и снизу и прозрачных в середине: подписи бренда и модели стоят по краям, а середину макет оставляет открытой. Ховерное значение в макете не задано — см. комментарий у правила в menu.css. */ --a1-menu-tile-shade: rgba(0, 0, 0, 0.4); --a1-menu-tile-shade-hover: rgba(0, 0, 0, 0.15); --a1-menu-tile-shade-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 73.419%, rgba(0, 0, 0, 0.6) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 73.419%, rgba(0, 0, 0, 0.6) 100%); /* Подложка текстового блока плашки CTA в мега-меню (узлы 1632:8181 на 1600 и 1641:103433 на 1200 — на обоих брейкпоинтах она есть) */ --a1-menu-cta-panel-bg: rgba(0, 0, 0, 0.3); /* ---------------------------------------------------------------------- Типографика меню. §3 ТЗ этих стилей не описывает — они взяты из макета по факту применения. ---------------------------------------------------------------------- */ /* Пункт бургера. Это стиль «Главная 4/Mob/head foot-er links» = 16/1.0 с трекингом −6 %. Выше он не вынесен с пометкой «в макете заведён, но не применён ни разу» — в меню tab/mob он применён: узлы 1641:100597 (Mob) и 1641:104937 (Tab), оба 16 px. */ --a1-menu-item-size: 16px; --a1-menu-item-lh: 1; /* Заголовок «Свяжитесь с нами» в бургере: 18/1.1 Semi Bold, −6 %, UPPERCASE. Кегль совпадает с bTxt (18), но у bTxt Regular и lh 1.3 — это другой стиль, свести их нельзя. */ --a1-menu-contacts-size: 18px; --a1-menu-contacts-lh: 1.1; /* Плитка модели: название. На десктопе это h4 (26 на 1600, 22 на 1200) — берём токен. На tab/mob макет ставит те же 16/1.0, что у пунктов. */ --a1-menu-tile-title-size: var(--a1-menu-item-size); --a1-menu-tile-title-lh: var(--a1-menu-item-lh); /* Заголовок плашки CTA. Кегль в макете свой на каждом брейкпоинте и ни один из них не следует шкале h1–h4 этого брейкпоинта: Mob 22, Tab 38, Desktop 1200 и 1600 — 26. Поэтому переменная, а не var(--a1-h3-size) / var(--a1-h4-size): те дали бы 18/28/22/26. */ --a1-menu-cta-title-size: 22px; --a1-menu-cta-title-lh: 1.1; /* Подпись кнопки CTA: 14 на Mob и на десктопе, 16 на Tab */ --a1-menu-cta-button-size: 14px; } @media (min-width: 800px) { :root { /* Заголовок плашки CTA на Tab крупнее всех остальных брейкпоинтов */ --a1-menu-cta-title-size: 38px; --a1-menu-cta-button-size: 16px; } } @media (min-width: 1200px) { :root { /* Название модели на плитке — h4 своего брейкпоинта: 22 на 1200, 26 на 1600 (макет: стили «Главная 4/1200px/h4» и «.../1600px/h4») */ --a1-menu-tile-title-size: var(--a1-h4-size); --a1-menu-tile-title-lh: var(--a1-h4-lh); /* Заголовок плашки CTA на десктопе — 26 на обеих ширинах */ --a1-menu-cta-title-size: 26px; --a1-menu-cta-button-size: 14px; } } /* End */ /* Start:/local/templates/a1/css/base.css?178903827513245*/ /* ========================================================================== base — сброс, дефолты элементов, типографические классы. Значения не задаются числами: всё через переменные из tokens.css. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* Плавный якорный скролл, но с уважением к системной настройке */ scroll-behavior: smooth; /* Фиксированный хедер не должен перекрывать цель якоря */ scroll-padding-top: var(--a1-header-height); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* * Замок прокрутки для бургера (этап 2) и модалок (этап 6). * Ставится и снимается только через window.A1.lockScroll / unlockScroll — * они считают вложенность, чтобы слои не снимали замок друг другу. * padding-right компенсирует исчезнувшую полосу прокрутки, иначе страница * дёргается по горизонтали в момент открытия. */ html.a1-scroll-locked { overflow: hidden; padding-right: var(--a1-scrollbar-width, 0px); } /* * Отступ на не действует на position: fixed — у фиксированных слоёв * содержащий блок это вьюпорт, а он при снятии полосы прокрутки становится * шире. Без отдельной компенсации хедер остаётся на месте, а контент под ним * уезжает влево на ширину полосы, и контейнеры расходятся примерно на 15 px. * * Правило: КАЖДЫЙ фиксированный слой шириной во весь экран (хедер, оверлей * модалки, бургер) получает класс .a1-fixed-layer. Хедеру он не нужен — * он перечислен здесь явно, — но всему, что появится на этапах 2 и 6, нужен. */ html.a1-scroll-locked .a1-header, html.a1-scroll-locked .a1-fixed-layer { padding-right: var(--a1-scrollbar-width, 0px); } body { margin: 0; background-color: var(--a1-bg); color: var(--a1-text); font-family: var(--a1-font-family); font-size: var(--a1-txt-size); font-weight: var(--a1-fw-regular); line-height: var(--a1-txt-lh); letter-spacing: var(--a1-txt-tracking); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Ни один блок не имеет права вылезти за ширину экрана (общее правило приёмки) */ overflow-x: hidden; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; } svg { fill: currentColor; } a { color: inherit; text-decoration: none; transition: color var(--a1-transition); } button, input, textarea, select { font: inherit; letter-spacing: inherit; color: inherit; } button { border: 0; padding: 0; background: none; cursor: pointer; } textarea { resize: vertical; } /* Видимый фокус обязателен: клавиатурная навигация по меню — критерий приёмки этапа 2. Мышиный клик рамку не показывает, :focus-visible это разводит. */ :focus-visible { outline: 2px solid var(--a1-focus-ring-color); outline-offset: 2px; } /* Доступное скрытие: элемент не виден, но читается скринридером */ .a1-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Типографика (§3 ТЗ) Классы, а не голые теги: уровень заголовка в разметке диктуется структурой документа, а размер — макетом, и совпадать они обязаны не всегда. Теги h1–h4 получают соответствующий стиль по умолчанию, класс его перебивает. Верхний регистр стоит на всех четырёх уровнях: в макете textCase=UPPER зашит в стили h1, h2, h3 и h4, а не только в h4, как сказано в §3 ТЗ. По регистру источник истины — макет. -------------------------------------------------------------------------- */ .a1-h1, h1 { font-size: var(--a1-h1-size); line-height: var(--a1-h1-lh); letter-spacing: var(--a1-heading-tracking); font-weight: var(--a1-fw-semibold); text-transform: uppercase; } .a1-h2, h2 { font-size: var(--a1-h2-size); line-height: var(--a1-h2-lh); letter-spacing: var(--a1-heading-tracking); font-weight: var(--a1-fw-semibold); text-transform: uppercase; } .a1-h3, h3 { font-size: var(--a1-h3-size); line-height: var(--a1-h3-lh); letter-spacing: var(--a1-heading-tracking); font-weight: var(--a1-fw-semibold); text-transform: uppercase; } /* h4 — заголовок карточки товара (§5) */ .a1-h4, h4 { font-size: var(--a1-h4-size); line-height: var(--a1-h4-lh); letter-spacing: var(--a1-heading-tracking); font-weight: var(--a1-fw-semibold); text-transform: uppercase; } /* sHead — крупный вспомогательный текст: надзаголовки, подписи под H2 */ .a1-shead { font-size: var(--a1-shead-size); line-height: var(--a1-shead-lh); letter-spacing: var(--a1-shead-tracking); font-weight: var(--a1-fw-regular); } /* txt — основной текст, он же дефолт body */ .a1-txt { font-size: var(--a1-txt-size); line-height: var(--a1-txt-lh); letter-spacing: var(--a1-txt-tracking); font-weight: var(--a1-fw-regular); } /* bTxt — крупный абзац. В §3 ТЗ стиля нет, в макете есть и он применён (контентные блоки мега-меню). */ .a1-btxt { font-size: var(--a1-btxt-size); line-height: var(--a1-btxt-lh); letter-spacing: var(--a1-btxt-tracking); font-weight: var(--a1-fw-regular); } /* sTxt — мелкий текст: подписи чекбоксов, сноски */ .a1-stxt { font-size: var(--a1-stxt-size); line-height: var(--a1-stxt-lh); letter-spacing: var(--a1-stxt-tracking); font-weight: var(--a1-fw-regular); } /* * МЕЖСТРОЧНЫЙ АБЗАЦНЫХ СТИЛЕЙ ОКРУГЛЁН ДО ЦЕЛОГО ПИКСЕЛЯ. Правка от * 10.09.2026, замечание заказчика «текст описания с некорректными * расстояниями между строк» в hero. * * Токены дают дробный шаг: 14 × 1.2 = 16.8 px. Браузер ставит строки на * целые пиксели экрана, и дробный шаг распадается на неравные интервалы — * замер на живом сайте: 17 17 16 17 при dpr 1, 34 34 32 34 при dpr 2. * С шагом 17 px интервалы ровные на обоих. Figma не округляет, поэтому * в макете дефекта нет. * * Токены остаются множителями — их читают calc() в стилях разделов. * @supports обязателен: объявление с var() проходит разбор в любом * движке, и браузер без round() сбросил бы line-height в унаследованный * от body, а не вернулся к множителю выше. * * Наследуется уже пиксельное значение, поэтому потомок с другим кеглем * обязан задавать свой line-height — у всех типографических классов * шаблона он свой. */ @supports (line-height: round(nearest, 1px, 1px)) { .a1-txt { line-height: round(nearest, calc(var(--a1-txt-size) * var(--a1-txt-lh)), 1px); } .a1-btxt { line-height: round(nearest, calc(var(--a1-btxt-size) * var(--a1-btxt-lh)), 1px); } .a1-stxt { line-height: round(nearest, calc(var(--a1-stxt-size) * var(--a1-stxt-lh)), 1px); } } /* * Сноска: самый мелкий кегль (xsTxt 10/1.3) плюс приглушённый цвет одной * ролью. Юридические примечания, тексты о компании и о сертификации, * оговорки со звёздочкой — везде эта пара идёт вместе, поэтому класс один, * а не .a1-xstxt + .a1-muted на каждом абзаце. */ .a1-note { font-size: var(--a1-xstxt-size); line-height: var(--a1-xstxt-lh); letter-spacing: var(--a1-xstxt-tracking); font-weight: var(--a1-fw-regular); color: var(--a1-text-muted); } /* * Типографика стиля «head/footer links» (§3) без цвета и без интерактивных * состояний: 14/1.0, Semi Bold, UPPERCASE, трекинг −6 %. * * Нужна там, где кегль тот же, а элемент не кликабельный: заголовки колонок * подвала, подписи-разделители в меню. Вешать на них .a1-link нельзя — * тот красит текст и краснеет по ховеру, то есть притворяется ссылкой. * * .a1-link ниже повторяет эти четыре объявления своими строками, а не * ссылается сюда: правило отревьюено этапом 1 и правке не подлежит. * Свести их в одно — отдельной задачей, когда фундамент откроют. */ .a1-link-label { font-size: var(--a1-link-size); line-height: var(--a1-link-lh); letter-spacing: var(--a1-heading-tracking); font-weight: var(--a1-fw-semibold); text-transform: uppercase; } /* Ссылки хедера и подвала (§3, §8) */ .a1-link { font-size: var(--a1-link-size); line-height: var(--a1-link-lh); letter-spacing: var(--a1-heading-tracking); font-weight: var(--a1-fw-semibold); text-transform: uppercase; color: var(--a1-text); } .a1-link.is-active { color: var(--a1-accent); } @media (hover: hover) { .a1-link:hover { color: var(--a1-accent); } } /* Мелкая кнопка-ссылка: 16/1.1 Regular, в статике подчёркнута, на ховере краснеет и теряет подчёркивание (§8, легенда «Мелкие кнопки») */ .a1-link-underline { font-size: var(--a1-link-small-size); line-height: var(--a1-link-small-lh); font-weight: var(--a1-fw-regular); color: var(--a1-text); text-decoration: underline; text-underline-offset: 0.2em; transition: color var(--a1-transition), text-decoration-color var(--a1-transition); } @media (hover: hover) { .a1-link-underline:hover { color: var(--a1-accent); text-decoration-color: transparent; } } /* * Размыкатель верхнего регистра. Заголовки едут из инфоблока (названия * продуктов §9, заголовки поп-апов), а text-transform: uppercase на уровне * CSS необратим: контент-менеджер уже никак не получит строчные, даже если * так введёт. Класс вешается на конкретный заголовок и возвращает регистр * ровно тот, что лежит в базе. */ .a1-no-caps { text-transform: none; } .a1-muted { color: var(--a1-text-muted); } .a1-accent { color: var(--a1-accent); } /* Уважение к системному «уменьшить движение» */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* End */ /* Start:/local/templates/a1/css/layout.css?17852752634679*/ /* ========================================================================== layout — контейнер, сетка, каркас страницы (§2 ТЗ). ========================================================================== */ /* Оболочка документа: прижимает подвал к низу на коротких страницах */ .a1-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .a1-main { flex: 1 0 auto; } /* -------------------------------------------------------------------------- Контейнер Одна формула закрывает все четыре брейкпоинта: 360 → 360 − 2×20 = 320 800 → 800 − 2×20 = 760 1200 → 1200 − 2×40 = 1120 1600 → 1600 − 2×40 = 1520 Шире 1600 контент упирается в 1520 и центрируется. Паддинг переключается ступенькой на 1200, а не растёт плавно. Побочный эффект: на 1199 контент 1159, на 1200 — 1120, то есть при расширении окна он разово сужается на 39 px. Так задано в макете (20 на планшете, 40 на десктопе), и ступенька — единственный способ попасть в заявленную ширину на всех четырёх контрольных точках точно. Плавная интерполяция через clamp() промахивается на ширину полосы прокрутки, потому что 100vw её учитывает, а доступная ширина — нет. -------------------------------------------------------------------------- */ .a1-container { width: 100%; max-width: var(--a1-container-max); margin-inline: auto; padding-inline: var(--a1-container-pad); } /* -------------------------------------------------------------------------- Сетка карточек: 1 колонка на мобильном, 2 начиная с 800. -------------------------------------------------------------------------- */ .a1-grid { display: grid; grid-template-columns: repeat(var(--a1-grid-columns), minmax(0, 1fr)); column-gap: var(--a1-grid-gap); row-gap: var(--a1-grid-row-gap); } /* -------------------------------------------------------------------------- Хедер: лежит поверх контента, полупрозрачный, с размытием подложки (§4.1). Наполнение — этап 2; здесь только габариты и подложка, чтобы этап 2 достраивал внутрь, а не переписывал обвязку. -------------------------------------------------------------------------- */ .a1-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--a1-z-header); height: var(--a1-header-height); background-color: var(--a1-header-bg); backdrop-filter: blur(var(--a1-header-blur)); -webkit-backdrop-filter: blur(var(--a1-header-blur)); border-bottom: 1px solid var(--a1-header-border-color); transition: background-color var(--a1-transition), backdrop-filter var(--a1-transition); } .a1-header__inner { display: flex; align-items: center; height: 100%; } /* -------------------------------------------------------------------------- Подвал. Наполнение — этап 3. -------------------------------------------------------------------------- */ .a1-footer { flex: 0 0 auto; } /* -------------------------------------------------------------------------- Утилиты раскладки, нужные более чем одному разделу. -------------------------------------------------------------------------- */ /* Ряд элементов с шагом сетки полей формы */ .a1-row { display: flex; gap: var(--a1-field-gap); } .a1-row > * { flex: 1 1 0; min-width: 0; } /* На мобильном парные поля и кнопки становятся в столбец (§5, §7). Сброс flex обязателен: в колонке `flex: 1 1 0` начинает делить не ширину, а высоту, и поля с кнопками сплющиваются до трети от 44 px. */ @media (max-width: 799.98px) { .a1-row { flex-direction: column; } .a1-row > * { flex: 0 0 auto; width: 100%; } } /* End */ /* Start:/local/templates/a1/css/components.css?178903827519810*/ /* ========================================================================== components — базовые интерфейсные элементы: кнопка, поле ввода, textarea, чекбокс, таб. Состояния по легенде §8 ТЗ, переход — --a1-transition. Правило про ховеры: любой :hover обёрнут в @media (hover: hover). На тач-устройствах ховер «залипает» после тапа, а по §5 ТЗ на tab и mob ховер-эффектов быть не должно. ========================================================================== */ /* -------------------------------------------------------------------------- Кнопка Общее у всех вариантов: высота 44, паддинг по горизонтали 16, скругления нет, рамки нет, размытие подложки 4, подпись Inter Regular 14/1.2 без трекинга и без верхнего регистра. ВЫТЕСНЕНИЕ СНИЗУ ВВЕРХ (правка от 29.07.2026). Средняя колонка легенды 1641:106434 — не промежуточный кадр плавной заливки, а механика перехода: у светлой кнопки (Frame 9501, узел 1232:1611) и у светлой кнопки с иконкой (Frame 9502, узел 1232:1602) нарисован Rectangle 16 — красный прямоугольник 120×21 при высоте кнопки 44, то есть заливка, поднявшаяся снизу ровно наполовину. Реализовано псевдоэлементом ::before со scaleY(0→1) от нижнего края; лишнего узла в разметку не добавлено. position и isolation нужны именно вытеснению: ::before лежит под подписью на z-index: -1, а отрицательный слой обязан оставаться внутри собственного контекста наложения кнопки, иначе он провалится под фон страницы. -------------------------------------------------------------------------- */ .a1-button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--a1-button-gap); height: var(--a1-button-height); padding-inline: var(--a1-button-padding-x); border: 0; border-radius: var(--a1-radius); font-size: var(--a1-button-font-size); line-height: var(--a1-button-lh); font-weight: var(--a1-fw-regular); letter-spacing: var(--a1-txt-tracking); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; backdrop-filter: blur(var(--a1-button-blur)); -webkit-backdrop-filter: blur(var(--a1-button-blur)); transition: background-color var(--a1-transition), color var(--a1-transition); } .a1-button__icon { flex: 0 0 auto; width: var(--a1-button-icon-size); height: var(--a1-button-icon-size); } /* Растянуть кнопку на всю доступную ширину (кнопка формы, кнопки карточки) */ .a1-button--block { display: flex; width: 100%; } /* Светлая кнопка: основной призыв («Получить предложение», «Отправить») */ .a1-button--light { background-color: var(--a1-white); color: var(--a1-black); } /* * Красная заливка ховера. Не background-color кнопки, а отдельный слой: * по легенде она приходит снизу и вытесняет светлый фон, а не проявляется * равномерно по всей плашке. * * inset: 0 плюс transform-origin: bottom — прямоугольник в полную ширину и * нулевой высоты, прижатый к нижнему краю; scaleY(1) поднимает его до * верхнего. Анимируется transform, а не height: он не вызывает * переразметку и не дёргает подпись. * * z-index: -1 кладёт слой между собственным фоном кнопки и её содержимым, * поэтому подпись и глиф остаются видимыми и не требуют своего узла. */ .a1-button--light::before { content: ''; position: absolute; inset: 0; z-index: -1; background-color: var(--a1-accent); transform: scaleY(0); transform-origin: bottom; transition: transform var(--a1-transition), background-color var(--a1-transition); } @media (hover: hover) { .a1-button--light:hover { color: var(--a1-white); } .a1-button--light:hover::before { transform: scaleY(1); } } /* Нажатое состояние в макете не нарисовано; цвет взят из §3 ТЗ, где Red 2 прямо назван цветом нажатого состояния. Обращаемся к палитре напрямую: роли-алиаса у Red 2 нет, см. комментарий в tokens.css. Нажатие красит тот же слой, а не фон кнопки, иначе Red 2 остался бы под уже поднятым красным и его никто бы не увидел. На десктопе клику предшествует ховер, слой к этому моменту поднят — меняется только цвет. На тач-устройстве ховера нет, и слой поднимается по самому нажатию. */ .a1-button--light:active { color: var(--a1-white); } .a1-button--light:active::before { background-color: var(--a1-red-2); transform: scaleY(1); } /* * Тёмная кнопка: второстепенное действие («Подробнее», «Конфигуратор»). * * ВЫТЕСНЕНИЯ ЗДЕСЬ НЕТ, И ЭТО ПРОВЕРЕНО ПО МАКЕТУ. В легенде 1641:106434 * средняя колонка есть только у тех рядов, где переход рисуется: Frame 9501 * (светлая), Frame 9502 (светлая с иконкой), Frame 9515 (иконки). Ряды * тёмной кнопки — Frame 9505 (узлы 0:30 и 0:33) и Frame 9506 (0:66 и 0:74) — * состоят ровно из двух состояний, между ними ничего не нарисовано. * Значит у тёмной кнопки простая смена цвета фона #222222 → #484848. * Подпись и глиф при этом остаются #F0F0F0 — цвет не меняется вовсе. */ .a1-button--dark { background-color: var(--a1-black); color: var(--a1-white); } @media (hover: hover) { .a1-button--dark:hover { background-color: var(--a1-black-light); } } .a1-button--dark:active { background-color: var(--a1-black-light); } .a1-button:disabled, .a1-button[aria-disabled='true'] { opacity: 0.5; pointer-events: none; } /* -------------------------------------------------------------------------- Таб (§8: три состояния — активный, неактивный, ховер). Ховер выглядит ровно как активный, вытеснения у таба в легенде нет — ряд Frame 9507 состоит из трёх готовых состояний без промежуточного кадра. Рамка неактивного таба — Black #222222 (легенда, узел 1012:1791). Читается она только на чистом чёрном полотне; пока --a1-bg был #222222, рамка совпадала с фоном и таб выглядел одной подписью без коробки. Это лечится не здесь, а токеном --a1-canvas — см. tokens.css. -------------------------------------------------------------------------- */ .a1-tab { display: inline-flex; align-items: center; justify-content: center; height: var(--a1-button-height); padding: 0 var(--a1-tab-padding-x); border: 1px solid var(--a1-black); border-radius: var(--a1-radius); background-color: transparent; color: var(--a1-text-muted); font-size: var(--a1-link-size); line-height: var(--a1-link-lh); font-weight: var(--a1-fw-semibold); letter-spacing: var(--a1-heading-tracking); text-transform: uppercase; cursor: pointer; transition: background-color var(--a1-transition), color var(--a1-transition), border-color var(--a1-transition); } .a1-tab.is-active, .a1-tab[aria-selected='true'] { background-color: var(--a1-black); border-color: var(--a1-black); color: var(--a1-text); } @media (hover: hover) { .a1-tab:hover { background-color: var(--a1-black); border-color: var(--a1-black); color: var(--a1-text); } } /* -------------------------------------------------------------------------- Поле ввода Рамка задаётся переменной --a1-field-border-current, чтобы фокус менял ровно одно значение, а не переопределял правило целиком. Базовый вариант — прозрачный, как в форме на странице. Модификатор --overlay добавляет подложку с размытием, как в модалке (§7). -------------------------------------------------------------------------- */ .a1-field { --a1-field-border-current: var(--a1-field-border-color); display: block; width: 100%; height: var(--a1-field-height); padding: 0 var(--a1-field-padding-x); border: 1px solid var(--a1-field-border-current); border-radius: var(--a1-radius); background-color: transparent; color: var(--a1-text); font-family: var(--a1-font-family); font-size: var(--a1-field-font-size); line-height: var(--a1-field-lh); font-weight: var(--a1-fw-regular); transition: border-color var(--a1-transition); } .a1-field::placeholder { color: var(--a1-text-muted); opacity: 1; /* Firefox глушит плейсхолдер своей альфой */ } /* Индикатор фокуса поля — САМА РАМКА, и второго контура рядом не ставится. В макете сфокусированное поле отличается от обычного ровно цветом рамки: rgba(240,240,240,0.5) → сплошной #F0F0F0 при той же толщине 1px (узлы 1641:52069 / 1641:53307 / 1641:53383 / 1641:53244). Поэтому outline: none гасит здесь не только штатное кольцо браузера, но и кольцо :focus-visible из base.css: белое кольцо в 2px от белой рамки дало бы две линии там, где в макете одна. Правило висит на :focus, а не на :focus-visible, значит рамка светлеет и от клика мышью, и от Tab — клавиатурный обход без индикатора не остаётся. Контраст смены состояния 3.87:1 при пороге 3:1 (WCAG 1.4.11) и на весь периметр поля. Исключение — поле с ошибкой: там рамка красная в любом состоянии, светлеть ей некуда, и кольцо ему возвращает form.css правилом .a1-field.is-invalid:focus-visible — два класса и псевдокласс, (0,3,0) против (0,2,0) здесь, так что оно сильнее независимо от порядка слоёв. */ .a1-field:focus { --a1-field-border-current: var(--a1-field-border-color-focus); outline: none; } /* Поле внутри модалки лежит на собственной затемнённой подложке */ .a1-field--overlay { background-color: var(--a1-field-overlay-bg); backdrop-filter: blur(var(--a1-field-overlay-blur)); -webkit-backdrop-filter: blur(var(--a1-field-overlay-blur)); } .a1-field--textarea { height: var(--a1-field-textarea-height); padding: var(--a1-field-textarea-padding); resize: vertical; } /* -------------------------------------------------------------------------- Чекбокс Нативный input скрыт, но остаётся фокусируемым и доступным скринридеру; квадрат рисуется псевдоэлементом. Отметка — залитый квадрат 14×14 (в макете именно квадрат, не галочка). -------------------------------------------------------------------------- */ .a1-checkbox { display: grid; grid-template-columns: var(--a1-checkbox-size) 1fr; column-gap: var(--a1-checkbox-gap); /* В макете строка чекбокса — flex items-center (I1631:20503;1641:70117): квадрат центрируется по подписи целиком. Подпись политики двухстрочная, при align-items:start квадрат и текст разъезжаются. */ align-items: center; font-size: var(--a1-stxt-size); line-height: var(--a1-stxt-lh); color: var(--a1-text-muted); cursor: pointer; } .a1-checkbox__input { /* Не display:none — иначе поле выпадает из порядка табуляции и перестаёт участвовать в нативной валидации формы */ appearance: none; -webkit-appearance: none; width: var(--a1-checkbox-size); height: var(--a1-checkbox-size); margin: 0; border: 1px solid var(--a1-text-muted); border-radius: var(--a1-radius); background-color: transparent; cursor: pointer; transition: border-color var(--a1-transition); } .a1-checkbox__input:checked { border-color: var(--a1-white); /* Квадрат 14×14 по центру квадрата 20×20 — отступ 3 со всех сторон */ background-image: linear-gradient(var(--a1-white), var(--a1-white)); background-repeat: no-repeat; background-position: center; background-size: var(--a1-checkbox-mark-size) var(--a1-checkbox-mark-size); } /* Квадрат чекбокса по фокусу не меняется — своей рамки-индикатора у него нет, кольцо ему нужно. Цвет берётся из роли, а не из акцента: красное кольцо на чекбоксе согласия читается ошибкой ровно там, где её нет (врезка у --a1-focus-ring-color в tokens.css). Правило дублирует геометрию base.css намеренно: чекбокс появится и вне формы — в фильтрах каталога, — и держать его индикатор описанным в компоненте надёжнее, чем полагаться на то, что до него доедет общий фундамент. */ .a1-checkbox__input:focus-visible { outline: 2px solid var(--a1-focus-ring-color); outline-offset: 2px; } /* Ссылка на политику внутри подписи: белая, подчёркнутая */ .a1-checkbox__link { color: var(--a1-text); text-decoration: underline; text-underline-offset: 0.15em; } @media (hover: hover) { .a1-checkbox__link:hover { color: var(--a1-accent); } } /* Вертикальный шаг между чекбоксами — 20, как между полями */ .a1-checkbox-group { display: flex; flex-direction: column; gap: var(--a1-field-gap); } /* -------------------------------------------------------------------------- Иконка-ссылка: соцсети и коммуникационные каналы (§8). Размер 40×40, цвет наследуется иконкой через currentColor. ХОВЕР КРАСИТ ПОДЛОЖКУ, А НЕ ГЛИФ (правка от 29.07.2026). Ряд Frame 9515 легенды 1641:106434 разобран по экспорту трёх кадров: покой (0:91) — только черта снизу: шириной 40 и высотой 1, fill #F0F0F0. Подложки нет, глиф #F0F0F0; кадр (0:93) — та же черта плюс Rectangle 15: rect y=18 h=22 w=40, fill #D61C26. То есть красный поднялся снизу и занял чуть больше половины квадрата — механика вытеснения; ховер (0:96) — Rectangle 15 во весь квадрат (y=0 h=40 w=40) #D61C26, черта #F0F0F0 поверх. Ни в одном из трёх кадров глиф и черта не краснеют. Подтверждено вторым узлом — 1632:8466, ховер иконки телефона: красный квадрат, белый глиф, белая черта. До правки код делал ровно наоборот: красил глиф и черту и не трогал подложку. Частным случаем это правило уже жило у телефона (menu.css, «красная плашка» §4.1). Легенда говорит, что оно общее для всех иконок этого типа: Telegram и MAX в полосе хедера, те же ссылки в бургере, пять иконок соцсетей в подвале. Поэтому вытеснение объявлено на базовом классе. -------------------------------------------------------------------------- */ .a1-icon-link { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; width: var(--a1-icon-link-size); height: var(--a1-icon-link-size); color: var(--a1-text); } /* * Подложка ховера. Механика та же, что у светлой кнопки: scaleY от нижнего * края, z-index: -1 под глифом. * * inset: 0 отсчитывается от padding-box, а нижняя черта иконки — это * border-bottom. Красное поле поэтому кончается на 39-м пикселе, а сороковой * занимает белая черта: в макете она нарисована поверх красного квадрата, * и здесь выходит тот же результат без единого лишнего правила. */ .a1-icon-link::before { content: ''; position: absolute; inset: 0; z-index: -1; background-color: var(--a1-accent); transform: scaleY(0); transform-origin: bottom; transition: transform var(--a1-transition); } @media (hover: hover) { .a1-icon-link:hover::before { transform: scaleY(1); } } /* End */ /* Start:/local/templates/a1/css/menu.css?178903827569805*/ /* ========================================================================== menu — хедер целиком: навигация, мега-меню «Продукты», выпадашки «Опции» и «Компания», ховер-панель телефона, бургер tab/mob. §4.1 ТЗ, этап 2. Узлы макета: мега-меню 1632:7907 (панель 1632:8136), «Опции» 1641:7901, «Компания» 1632:7898, панель режима работы 1632:8806, поля активности 1641:103935, аннотация поведения 1641:103931; Desktop 1200 — 1641:103433 (мега-меню), 1641:103052 («Опции»), 1641:102675 («Компания»), 1641:102276 (телефон); бургер Mob 1641:100402 / 100624 / 101322 / 101724, бургер Tab 1641:104404 / 105179 / 105655 / 106054. Габариты полосы хедера (высота, фон, размытие, нижняя граница) задаёт layout.css — здесь только наполнение и состояния. ГДЕ ПРОХОДИТ ГРАНИЦА ДЕСКТОП / БУРГЕР. На 1200: там же переключается высота хедера (74 / 70) и паддинг контейнера (40 / 20) в tokens.css. То есть Tab 800 живёт по бургерной ветке — так и в макете. ========================================================================== */ :root { /* Паддинг всех выпадающих панелей. Он же задаёт их сдвиг влево: панель смещается на свой паддинг, и текст пунктов встаёт ровно под подписью пункта хедера (макет: пункт «опции» x152, панель x136) */ --a1-menu-panel-pad: 16px; /* Шаг сетки мега-меню и высота плитки — одинаковые на всех брейкпоинтах, меняется только ширина плитки и число колонок */ --a1-menu-gap: 20px; --a1-menu-tile-h: 220px; /* Нижнее поле активности мега-меню. На 1200 оно равно верхнему (макет 1641:103803: панель 780 = 40 + 700 + 40), на 1600 вдвое больше — переключается в медиа 1600. Разбор — у .a1-mega ниже. */ --a1-menu-panel-foot: 40px; /* Панель режима работы: 174 = 16 + 142 + 16 (макет 1632:8806 — width 174, текст x16 шириной 142). Ширина макетная, а вот место — не совсем: по горизонтали панель равняется по краю контейнера и стоит на 2 px правее макета, разбор у .a1-header__contacts ниже */ --a1-menu-schedule-w: 174px; /* Плашка CTA конфигуратора: кнопка 80 высотой, графика шестерён 140×140 прижата к правому верхнему углу и обрезается по высоте кнопки */ --a1-menu-cta-button-h: 80px; --a1-menu-cta-gears: 140px; /* Ширина полосы прокрутки мега-меню на движках без scrollbar-width. Тоньше системной: панель без собственной заливки, широкий жёлоб читался бы как вторая полоса поверх затемнения */ --a1-menu-scroll-w: 8px; } /* -------------------------------------------------------------------------- Полоса хедера ПОЧЕМУ ПОДЛОЖКУ ПОЛОСЫ РИСУЕТ ::before, А НЕ САМ ЭЛЕМЕНТ. backdrop-filter делает элемент backdrop root: у ЕГО ПОТОМКОВ собственный backdrop-filter перестаёт видеть страницу и размывать становится нечего. А выпадающие панели меню лежат внутри
(иначе разваливаются поля активности из §4.1), и по макету у каждой своя заливка 0.3 + размытие 5. Замер (Chromium 1228, полосатая подложка чёрное/белое 4 px, разброс яркости внутри области): подложка без слоёв std 127.5 резкая полоса хедера, backdrop-filter std 6.8 размыта панель ВНУТРИ такого хедера std 89.0 НЕ размыта, только темнее та же панель ВНЕ хедера std 6.8 размыта полоса через ::before + панель std 6.3 / 6.8 обе размыты То есть вложенный backdrop-filter действительно не работает — прежний исполнитель был прав, — но лечится это не отказом от макета, а переносом фильтра на псевдоэлемент: ::before потомков не имеет, backdrop root больше никого не запирает, и панели размываются штатно. z-index: -1 обязателен. Без него позиционированный псевдоэлемент рисуется ПОЗЖЕ строчного и блочного содержимого полосы и закрывает собой пункты меню и логотип. Отрицательный слой уводит его под содержимое, оставаясь внутри контекста наложения самого хедера (у того z-index из tokens.css). Правило переопределяет layout.css намеренно и локально: панели — принадлежность меню, поэтому и обход живёт в слое меню. Раздел, забравший один layout.css без menu.css, получит рабочую полосу без изменений. РАЗДЕЛИТЕЛЬНАЯ ЛИНИЯ ПЕРЕЕХАЛА С border-bottom НА ::before — правка от 29.07.2026, претензия «прозрачный зазор в 1 px между полосой и панелью». Щель была не между полосой и панелью: панель и раньше начиналась ровно на 74, вплотную к border-box хедера (замер: header 0…74, .a1-mega 74…660). Светилась САМА ГРАНИЦА ХЕДЕРА. Абсолютный ::before с inset: 0 считается от padding-box, то есть красит 0…73 и до строки границы не достаёт, а .a1-menu-dim начинается с 74 — граница оставалась единственным слоем на строке 73…74. Цвет у неё rgba(240,240,240,0.5): под раскрытым меню, где сверху и снизу всё затемнено на 70 %, полупрозрачная белая строка поверх светлого фото страницы и читается как щель. Замер на белой подложке: полоса и панель #4A4A4A, строка между ними #F7F7F7. Лечится не сдвигом панели, а тем, что заливка полосы обязана доходить до низа border-box, а линия — лежать ПОВЕРХ заливки. Ровно так нарисовано и в макете: прямоугольник хедера залит rgba(0,0,0,0.3) на все 74, stroke идёт по его краю. Поэтому граница снимается, а линию рисует inset-тень на ::before — тот же 1 px, тем же токеном, но уже по тёмному. Побочно это чинит и арифметику панелей: без границы padding-box хедера становится равен border-box, и top: 100 % у панелей попадает на 74 без поправки на 1 px (разбор — у общего правила панелей ниже). -------------------------------------------------------------------------- */ .a1-header { background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-width: 0; } .a1-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background-color: var(--a1-header-bg); /* Разделительная линия хедера: 1 px по низу поверх заливки */ box-shadow: inset 0 -1px 0 var(--a1-header-border-color); backdrop-filter: blur(var(--a1-header-blur)); -webkit-backdrop-filter: blur(var(--a1-header-blur)); transition: background-color var(--a1-transition), backdrop-filter var(--a1-transition); } /* Раскрытое мега-меню: затемнение 70 %, размытие вдвое сильнее. Переопределяем ТОКЕНЫ, а не свойства: ::before выше уже читает их в background-color и backdrop-filter и уже вешает на них --a1-transition. Класс ставится ТОЛЬКО под мега-меню «Продукты» и под открытый бургер. Под «Опциями» и «Компанией» хедер остаётся в покое — см. замер в tokens.css у --a1-menu-open-bg. */ .a1-header.is-menu-open { --a1-header-bg: var(--a1-menu-open-bg); --a1-header-blur: var(--a1-menu-open-blur); } /* -------------------------------------------------------------------------- БИТРИКС-ПАНЕЛЬ АВТОРИЗОВАННОГО АДМИНИСТРАТОРА Правка от 30.07.2026 по жалобе заказчика «кнопки в шапке должны быть посередине»: на присланном скриншоте у пунктов меню срезан верх, логотип и коммуникационные иконки видны наполовину, а свободный остаток полосы лежит НИЖЕ содержимого — будто содержимое выезжает за полосу вверх. САМО ВЫРАВНИВАНИЕ ЗДЕСЬ НЕ ВИНОВАТО, ОНО ТОЧНОЕ. Замер по рендеру против макета 1641:7906 (ink-строки глифов, 1600): пункты 31…44 против 31…44 в макете, логотип 20…53 против 20…53, иконки 26…56 против 27…56 — расхождение только в антиалиасе. Полоса 0…74, центр 37, центр содержимого 37. Так же на 1200, 800 и 360 и во всех трёх движках. ЗАКРЫВАЕТ ПОЛОСУ ЧУЖОЙ ЭЛЕМЕНТ. Заказчик смотрит сайт из-под своей админской сессии, и $APPLICATION->ShowPanel() печатает панель Битрикса ПЕРВЫМ элементом , до .a1-page (header.php). У неё z-index 995 (bitrix/js/main/core/css/core_panel.css:22) против 90 у нашей полосы, а высота — 39 у свёрнутой (там же :737), 50 у развёрнутой (:32). Полоса зафиксирована на top: 0, поэтому панель ложится поверх её верхних 39–50 px. Замер воспроизведения (свёрнутая панель, 1600): пункт скрыт на 39 px из 74, логотип на 19 из 34, иконка телефона на 22 из 40 — от иконки остаётся нижняя часть с чертой. Ровно то, что на скриншоте. ЛЕЧИТСЯ СДВИГОМ ПАНЕЛИ, А НЕ ПОЛОСЫ, и так уже сделано на всём остальном сайте: у легаси-шаблонов лежит `#bx-panel { margin-top: 90px !important }` под их 90-пиксельную шапку (bitrix/templates/landings/css/style.css:3546, local/templates/widgets/css/style.css:3435). Шапку вниз увести нельзя: высота панели меняется в рантайме — свёрнута, развёрнута, режим правки, — и в CSS её не узнать. Сдвиг панели работает в обоих её режимах: в потоке (position: relative по умолчанию) margin уводит панель под полосу вместе с остальной страницей, у закреплённой (.bx-panel-fixed — position: fixed, top: 0 !important, там же :27) margin-top действует так же. `!important` неизбежен: ядро задаёт `margin: 0 !important` селектором `#bx-panel, #bx-panel a, #bx-panel span, #bx-panel div` (core_panel.css:14), без важности правило не применится вовсе. `.a1-body` в селекторе — не украшение, а два дела сразу. Специфичность становится (1,1,0) против (1,0,0) у правила ядра, и исход перестаёт зависеть от того, раньше или позже шаблонного напечатан kernel-бандл (проверено обоими порядками листов). И правило не протекает в легаси: там своя компенсация под свою высоту шапки. Значение — токеном, а не литералом: 74 на 1600/1200 и 70 на tab/mob переключает tokens.css, панель встаёт под полосу на всех брейкпоинтах сама. -------------------------------------------------------------------------- */ .a1-body #bx-panel { margin-top: var(--a1-header-height) !important; } /* * position: relative здесь НЕТ намеренно. Мега-меню лежит внутри пункта * «Продукты» (порядок обхода Tab, см. ниже) и растягивается на всю ширину * через left/right: 0 — значит его содержащим блоком обязан быть сам * .a1-header, а не контейнер с максимальной шириной 1600 и паддингами. * Логотип от этого не страдает: он абсолютный с left: 50 %, а .a1-header * шириной во вьюпорт — центр тот же, что был у центрированного контейнера. */ .a1-header__inner { justify-content: space-between; gap: var(--a1-menu-gap); } /* Логотип. На десктопе центрируется по вьюпорту, а не распоркой флекса: левая группа в макете 409 px, правая 380 — при space-between логотип встал бы между ними, а не по центру страницы (макет: x761 при ширине 78, то есть центр ровно 800 из 1600). */ .a1-header__logo { display: flex; align-items: center; flex: 0 0 auto; } .a1-header__logo img { width: 68px; height: 30px; } /* -------------------------------------------------------------------------- Навигация -------------------------------------------------------------------------- */ .a1-header__nav { height: 100%; } .a1-header__list { display: flex; align-items: stretch; height: 100%; gap: var(--a1-menu-gap); } /* * Пункт растянут на всю высоту полосы, хотя подпись занимает 14 px. * Это не косметика: панель позиционируется top:100% ОТ ПУНКТА, и только * при полной высоте «100 %» совпадает с низом полосы хедера. * * Высоту строки при этом не трогаем. В макете пункты нарисованы с * интерлиньяжем 130 %, но стиль head/footer links задаёт 100 %, и токен * --a1-link-lh сделан по стилю. Подгонка line-height развалила бы * типографику, общую с подвалом; высоту здесь держит флекс. */ .a1-header__item { position: relative; display: flex; align-items: center; } /* * Пункт, у которого раскрывается мега-меню. position: static возвращает * панели в качестве содержащего блока сам .a1-header: панель обязана быть * во всю ширину экрана, а не в ширину пункта. Обычные выпадашки, * наоборот, привязаны к своему пункту и оставлены relative. */ .a1-header__item--mega { position: static; } .a1-header__link, .a1-header__trigger { display: flex; align-items: center; gap: 2px; height: 100%; white-space: nowrap; /* §8: переход цвета. У .a1-link он приходит из base.css правилом для , а триггер —