/* * ТОКЕНЫ ПОСАДОЧНОЙ S-M DIGITAL («Сайт + Яндекс Директ») * * Отдельный визуальный мир, не главная. Префикс --lp-, корневой класс .lp. * Пересечений с токенами главной (--smd-, .smd-home) нет намеренно: это * разные бренды на одном сайте, и смешивать их палитры нельзя. * * ОТКУДА ЗНАЧЕНИЯ * - именованные брендовые цвета — из DESIGN.md (он нормативен); * - цвета поверхностей — сняты пиксельно из макетов design-handoff/, * потому что в DESIGN.md их нет вовсе; * - все контрасты посчитаны по формуле WCAG, значения указаны рядом. */ .lp { /* ------------------------------------------------------------------ */ /* ТИПОГРАФИКА: семейства */ /* ------------------------------------------------------------------ */ /* * Display — Oswald. Выбран владельцем как ближайший доступный к макету * узкий тяжёлый гротеск с полной кириллицей. * * DESIGN.md несёт правило «The No Invented Typeface Rule»: семейство * нельзя закреплять по внешнему сходству. Поэтому Oswald — ПОДТВЕРЖДЁННЫЙ * выбор, а не догадка, и заменяется он ровно в одной строке. Запасные * узкие гротески идут следом, чтобы до загрузки шрифта заголовок не * расползался в широкий системный. */ --lp-font-display: "Oswald", "PT Sans Narrow", "Arial Narrow", system-ui, sans-serif; /* * ВЕС DISPLAY-ТЕКСТА ОТДЕЛЬНЫМ ТОКЕНОМ, а не константой в правилах. * * Причина не в аккуратности, а в браузере: у плакатных гарнитур вроде * Bebas Neue начертание ОДНО. Попросив у такого шрифта 700, браузер не * находит его и рисует «синтетический жир» — размазывает контур сам. * На кегле в 90 пикселей это видно сразу и выглядит как брак печати. * * Поэтому семейство и вес меняются ВМЕСТЕ, одним файлом: * landing/webfont.css переопределяет обе величины, когда владелец кладёт * свой шрифт в assets/fonts/. */ --lp-display-weight: 700; /* заголовки-монументы */ --lp-display-weight-soft: 500; /* подзаголовки и подписи тем же шрифтом */ /* * Body — системный стек. Семейство основного текста в DESIGN.md тоже не * установлено, а страница живёт на платном трафике: второй веб-шрифт стоил * бы запроса и сдвига макета ради нейтрального гротеска, который система * и так даёт. Кириллица покрыта на всех платформах. */ --lp-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Цифры в таблице результатов: моноширинный держит разряды в колонке. */ --lp-font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Consolas, monospace; /* ------------------------------------------------------------------ */ /* ТИПОГРАФИКА: шкала */ /* ------------------------------------------------------------------ */ /* Плакатный заголовок первого экрана. Один на странице. */ --lp-text-display: clamp(2.5rem, 1.55rem + 4.7vw, 5.75rem); /* * ЗАГОЛОВКИ СЕКЦИЙ. Раньше потолок стоял на 4.5rem — против 5.75rem * у первого экрана. При одной гарнитуре, одном капсе и одном плотном * интерлиньяже разница в четверть кегля не читается как разница ролей: * страница шла восемью монументами подряд, и первый экран терял * первенство уже ко второму блоку. * * 3.25rem дают отношение 1.77 к display — это уже видимая ступень. * Монументальность держится не кеглем, а гарнитурой, капсом и * интерлиньяжем 0.92, и они остались на месте. */ --lp-text-h2: clamp(1.875rem, 1.35rem + 2.4vw, 3.25rem); --lp-text-h3: clamp(1.375rem, 1.15rem + 1.1vw, 2rem); --lp-text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); --lp-text-body: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem); --lp-text-sm: 0.9375rem; --lp-text-label: 0.8125rem; --lp-text-micro: 0.6875rem; --lp-leading-display: 0.92; /* строки заголовка стоят плотным блоком */ --lp-leading-tight: 1.15; --lp-leading-normal: 1.6; --lp-tracking-display: -0.005em; --lp-tracking-label: 0.14em; /* разрядка мелких прописных подписей */ --lp-tracking-nav: 0.08em; --lp-weight-regular: 400; --lp-weight-medium: 500; --lp-weight-bold: 700; /* ------------------------------------------------------------------ */ /* ПАЛИТРА */ /* ------------------------------------------------------------------ */ /* Графитовое поле. В макетах фон гуляет от #070708 до #101011; */ /* нормативным берём среднее из DESIGN.md. */ --lp-field: #0D0D0E; --lp-field-deep: #070708; /* блоки, где макет ощутимо глубже */ --lp-ink: #F2F0ED; /* 17.08:1 на графите */ --lp-ink-muted: #AAA6A7; /* 8.07:1 на графите */ /* * Бордовый — ТОЛЬКО ЗАЛИВКА. На графите он даёт 2.68:1 и текстом быть * не может ни при каком кегле. Светлый текст на нём — 6.38:1. */ --lp-burgundy: #AD1324; --lp-burgundy-hover: #8E0F1D; /* Поверхность бордовых панелей — снята из макетов 06, 07, 08. */ --lp-burgundy-panel: #5A111E; /* светлый текст на ней 12.04:1 */ /* Алый сигнал: стрелки, маркеры, мелкие активные состояния. 5.05:1. */ --lp-crimson: #F7313C; /* Светлая панель таблицы результатов. Графит на ней 17.86:1. */ --lp-panel-light: #F7F5F3; /* Вторичный текст НА светлой панели: 7.06:1. Приглушённый графитовый */ /* --lp-ink-muted там был бы почти невидим — это другая роль. */ --lp-ink-muted-on-light: #565253; /* Поверхность браузерной рамы и её системные точки. Рама чуть светлее */ /* поля, чтобы читалась как физический предмет на тёмном столе. */ --lp-frame-surface: #1A1A1C; /* * Тень под рамой. Единственная тень системы кроме кольца фокуса: * по DESIGN.md глубина здесь физическая — масса и перекрытие экранов, * а не декоративное свечение. */ --lp-frame-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); /* Заливка невалидного поля — вторая примета ошибки помимо цвета рамки. */ --lp-danger-soft: #FBEAE9; /* * Техническая разлиновка. 1.29:1 — намеренно почти невидима: по DESIGN.md * это чертёжный слой, а не содержание. Текст и границы контролов на ней * строить НЕЛЬЗЯ. */ --lp-line: #262629; --lp-line-strong: #3A383B; /* * Границы того, что можно нажать или заполнить. Единственное значение, * проходящее 3:1 И на графите (4.33:1), И на бордовой панели (3.05:1) — * а поля формы в макете стоят именно на бордовой. */ --lp-line-control: #7A7677; /* Фокус: кольцо рисуем тенью — родитель глушит outline глобально. */ --lp-focus-inner: var(--lp-field); --lp-focus-outer: var(--lp-ink); --lp-focus-width: 2px; --lp-focus-offset: 2px; /* ------------------------------------------------------------------ */ /* ПРОСТРАНСТВО */ /* ------------------------------------------------------------------ */ --lp-space-3xs: 0.25rem; --lp-space-2xs: 0.5rem; --lp-space-xs: 0.75rem; --lp-space-sm: 1rem; --lp-space-md: 1.5rem; --lp-space-lg: 2rem; --lp-space-xl: 3rem; --lp-space-2xl: 4.5rem; --lp-space-3xl: 7rem; --lp-section-y: clamp(3.5rem, 2rem + 5vw, 8rem); /* * Контейнер 1680px — ширина, в которой нарисованы макеты. Уже — и * композиция «текст слева, крупная работа справа» перестаёт работать. */ --lp-container: 105rem; --lp-container-narrow: 52rem; --lp-gutter: clamp(1.25rem, 0.5rem + 2.4vw, 3.5rem); --lp-grid-gap: clamp(1.5rem, 0.9rem + 1.8vw, 3rem); /* ------------------------------------------------------------------ */ /* ФОРМА */ /* ------------------------------------------------------------------ */ /* * По DESIGN.md почти всё прямоугольное: 1px — это «скругление, которого * почти нет». Заметное скругление разрешено только браузерным рамам, * где оно повторяет форму физического экрана. */ --lp-radius-control: 1px; --lp-radius-frame: 12px; --lp-tap-min: 48px; /* PRODUCT.md требует 44–48px */ /* ------------------------------------------------------------------ */ /* ДВИЖЕНИЕ */ /* ------------------------------------------------------------------ */ --lp-duration-fast: 140ms; --lp-duration: 220ms; --lp-duration-slow: 460ms; --lp-ease: cubic-bezier(0.2, 0, 0, 1); --lp-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --lp-z-float: 60; }