/* ========================================================================== tokens.css — дизайн-система лендинга «Укрытие объекта», Концерн «РОССИ» Единственный источник правды для цвета, типографики, отступов, скруглений, теней и анимации. style.css описывает КОМПОНЕНТЫ и не должен содержать сырых значений — только var(--…). Правило: понадобилось новое значение — сначала проверь, нет ли подходящего шага шкалы. Если нет — добавь шаг сюда, а не хардкод по месту. Иначе страницы начинают расходиться по ритму, и это видно только на длинной дистанции, когда чинить уже дорого. ========================================================================== */ /* -------------------------------------------------------------------------- ШРИФТ. Inter (SIL OFL 1.1) лежит на своём домене, а не подключается с fonts.googleapis.com. Причины, по порядку важности: 1. 152-ФЗ. Политика сайта обещает, что ПД не передаются за границу. Запрос к Google отдаёт IP и User-Agent посетителя в США — это прямое противоречие тексту, который мы сами публикуем. 2. CLS. Внешний шрифт приходил после первой отрисовки и сдвигал макет на 0.13 — это уже «плохо» по шкале Core Web Vitals. 3. Скорость. Два лишних TLS-рукопожатия (googleapis + gstatic) блокировали отрисовку; локальный файл идёт по уже открытому соединению и предзагружается через . Вариативное начертание 400–900 — один файл на подмножество вместо шести статических. Подмножества разделены по unicode-range: кириллица и латиница грузятся всегда, расширенные наборы — только если на странице встретится символ из их диапазона. Обновление: см. deploy/DEPLOY.md, раздел «Шрифт». -------------------------------------------------------------------------- */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:400 900; font-display:swap; src:url("../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:400 900; font-display:swap; src:url("../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; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:400 900; font-display:swap; src:url("../fonts/inter-cyrillic-ext.woff2") format("woff2"); unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:400 900; font-display:swap; src:url("../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; } :root{ /* ======================================================================= 1. ЦВЕТ Фирменная палитра снята с rossi.ru (тема сайта) и официального логотипа. Красный — единственный CTA-акцент; синий логотипа structural-only и для кнопок действия не используется. ===================================================================== */ /* поверхности */ --ink: #052034; /* фирменный тёмно-синий, основной тёмный фон */ --ink-2: #0A2E48; --ink-3: #123A58; --paper: #FFFFFF; --bg: #F2F7FA; /* светло-голубой фон секций */ --bg-2: #E3EDF4; /* линии и текст */ --line: #DCE6ED; --line-dark: #17405E; --text: #0C1B26; --muted: #5C6F7D; --muted-dark: #9DB3C4; /* акцент — единственный, только для целевого действия */ --accent: #CF172F; --accent-2: #A50F23; --accent-soft: #FDECEE; /* синий логотипа — структурный: схемы, второстепенные акценты */ --blue: #0038A7; --blue-2: #0063A1; --blue-soft: #E8EFF9; /* цвет самого изделия: маты физически тёмно-оливковые. Только в технических схемах, в фирменную обвязку не выносится */ --mat: #3C4838; --mat-2: #2A3327; /* служебные состояния */ --ok: #2E7D4F; --warn-bg: #FFF4E5; --warn-ink: #8A5220; /* текст на тёмном фоне */ --on-dark: #E7EFF5; --on-dark-mut: #9DB7CC; /* ======================================================================= 2. ТИПОГРАФИКА Шкала снята с фактических размеров в вёрстке, а не выдумана. Крупные кегли — clamp: на мобильном заголовок обязан ужиматься, иначе длинные русские слова («противоосколочного») рвут колонку. ===================================================================== */ --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* JetBrains Mono убран из стека: он нигде не подключался, поэтому его видели только разработчики, у которых он стоит в системе, а все остальные — системный моноширинный. Стек оставлен системным намеренно: ради цифровых подписей и служебных меток тянуть ещё один шрифтовой файл не стоит. */ --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace; --fs-100: 11.5px; /* оверлайны, надзаголовки капсом */ --fs-200: 12.5px; /* подписи под схемами, мелкие пометки */ --fs-300: 13.5px; /* плотный служебный текст */ --fs-400: 14.5px; /* интерфейс: меню, строки характеристик */ --fs-500: 15.5px; /* вторичный текст в карточках */ --fs-600: 17px; /* базовый текст страницы */ --fs-700: 19px; /* лид-абзац */ --fs-h3: clamp(20px, 2.2vw, 26px); --fs-h2: clamp(28px, 4vw, 48px); /* максимум 60px, а не 70: при 70px «противоосколочного» шире своей колонки в hero и наезжает на схему */ --fs-h1: clamp(32px, 4.9vw, 60px); --lh-tight: 1.05; /* заголовки */ --lh-snug: 1.15; --lh-base: 1.6; /* основной текст */ --tracking-tight: -.025em; /* заголовки */ --tracking-wide: .06em; /* капслок-метки */ /* ======================================================================= 3. ОТСТУПЫ База 4px. Шкала обязательна для нового кода. ВНИМАНИЕ: существующая вёрстка переведена частично. В style.css ещё живут значения 13/15/18/22/26/30px, не лежащие на шкале, — они появились до введения токенов. Правило: трогаешь блок — переводи его на ближайший шаг шкалы. Массовую замену намеренно не делали, чтобы не ломать вёрстку, проверенную на 12 ширинах от 320 до 1180px. ===================================================================== */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 104px; /* вертикальный ритм секций и внутренние отступы карточек */ --pad-section: clamp(56px, 7vw, 104px); --pad-section-tight: clamp(44px, 5vw, 72px); --pad-card: clamp(24px, 3vw, 32px); --gap-grid: clamp(22px, 3vw, 32px); /* ======================================================================= 4. ГЕОМЕТРИЯ ===================================================================== */ --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-pill: 999px; --container: 1240px; /* предельная ширина контентной колонки */ --gutter: 24px; /* боковые поля .wrap на десктопе */ --gutter-sm: 18px; /* они же на мобильном */ --nav-h: 74px; /* высота шапки; завязан scroll-padding-top */ /* ======================================================================= 5. ТЕНИ ===================================================================== */ --shadow-sm: 0 1px 2px rgba(13,19,23,.05), 0 4px 14px rgba(13,19,23,.05); --shadow-md: 0 10px 34px rgba(13,19,23,.10); --shadow-lg: 0 28px 70px rgba(13,19,23,.30); --shadow-cta: 0 8px 22px rgba(207,23,47,.28); /* ======================================================================= 6. ДВИЖЕНИЕ Всё быстрое и без пружин: это инженерный B2B, а не промо-сайт. Длительности уважают prefers-reduced-motion (см. style.css). ===================================================================== */ --dur-fast: .15s; /* отклик полей ввода */ --dur-base: .16s; /* кнопки: фон, цвет, рамка */ --dur-slow: .2s; /* карточки, подчёркивания меню, раскрытие FAQ */ --dur-reveal: .6s; /* появление блоков при скролле */ --ease: ease; --ease-reveal: cubic-bezier(.2,.7,.3,1); /* ======================================================================= 7. СЛОИ ===================================================================== */ --z-sticky-cta: 70; --z-header: 80; }