/* ========================================================================== Art-Couture - базовые токены. Редакция 5. Файл перенесён из дизайн-проекта: ui_kits/mobile/tokens.css. Это единственное место, где есть hex. Десктопные токены наследуют этот набор целиком и переопределяют только то, что зависит от ширины - расхождений по цвету между версиями быть не должно. Шрифты подключаются в шаблоне: ========================================================================== */ :root { /* --- Поверхности ------------------------------------------------------- Фон задан техзаданием. Тёплый нейтральный, без синевы и без бежа: на нём белая подложка кадра читается как отдельная плоскость. */ --ac-bg: #F2F1EE; /* фон страницы */ --ac-surface: #FFFFFF; /* карточка, поле, панель */ --ac-surface-sunk: #EAE8E4; /* тихая подложка, сегмент-контрол */ --ac-surface-sel: #F2F1EE; /* выбранная строка варианта */ /* Подложка фотографии. Строго белая: съёмка ведётся на белом, любой другой фон даёт видимый стык по краю кадра. */ --ac-photo-bg: #FFFFFF; /* --- Текст и акцент ---------------------------------------------------- Акцент - графит. Отдельного цветного акцента нет: цвет в интерфейсе занят металлом на фотографии. */ --ac-ink: #1C1B19; /* заголовки, цена */ --ac-ink-hover: #38352F; --ac-ink-body: #57534E; /* основной текст */ /* Затемнён против редакции 4: у #8C877F контраст к --ac-bg 3,58:1, а этим цветом набраны подписи 10-13px. Стало 4,75:1 на --ac-bg и 5,37:1 на --ac-surface. */ --ac-ink-mute: #6F6A62; /* подписи, служебное */ --ac-on-ink: #FFFFFF; /* --- Линии. Волосяные. ------------------------------------------------- */ --ac-line: #E3E1DC; --ac-line-strong: #C8C4BC; /* --- Скидка. Единственный цвет в интерфейсе. --------------------------- */ --ac-sale: #B3261E; --ac-ink-strike: #6F6A62; --ac-focus: #1C1B19; /* --- Цвет действия ------------------------------------------------------ Чёрной заливки в наборе нет: рядом с тёплым серым она читается грязной. По умолчанию латунь - тот же металл, что в витрине, но глубже. Пара подменяется классом сезона ac-s--* (правило в kit.css). */ --ac-cta: #7D6034; /* сезона нет - латунь, 5,8:1 под белый текст */ --ac-cta-press: #674E29; /* нажатое - 7,8:1 */ /* --- Цвет металла ------------------------------------------------------ Сведения, а не украшение: белое золото должно считываться глазом, без слова «белый» в названии. */ --ac-metal-white: #E4E4E6; --ac-metal-yellow: #D7BE7E; --ac-metal-red: #CFA089; --ac-metal-ring: #C8C4BC; /* --- Стекло и слои ----------------------------------------------------- */ --ac-glass: rgba(242, 241, 238, 0.78); /* шапка */ --ac-glass-dock: rgba(255, 255, 255, 0.76); --ac-glass-top: rgba(255, 255, 255, 0.85); --ac-glass-dark: rgba(28, 27, 25, 0.55); --ac-ghost: rgba(28, 27, 25, 0.06); /* кнопка-призрак */ --ac-scrim: rgba(28, 27, 25, 0.42); /* затемнение под панелью и окном */ --ac-mark: rgba(28, 27, 25, 0.10); /* совпадение в выдаче: тон чернил, не цвет */ /* --- Цвет по смыслу действия -------------------------------------------- Утверждение цвета не получает: его несёт сезонная заливка --ac-cta. Отдельный цвет нужен там, где действие отнимает - красный, и там, где отказывает - нейтральный призрак. */ --ac-act-del: #A33A32; /* удалить, сбросить, отменить - 6,5:1 */ --ac-act-del-press: #8B3029; /* нажатое - 8,2:1 */ /* Товарное действие - в каталог, отложить, посмотреть изделие. Не зависит от сезона: наличие в витрине - постоянный сигнал, а не настроение. */ --ac-act-buy: #3F6A50; /* малахит - 6,2:1 */ --ac-act-buy-press: #345841; /* нажатое - 8,0:1 */ /* --- Герой ------------------------------------------------------------ Все четыре сезонных кадра светлые, и тёмная завеса под белый текст съедала кадр целиком. Схема перевёрнута: текст графитовый, завеса светлая. Тёмный вариант сохранён для тёмных кадров: ac-hero--dark. */ --ac-hero-h: 100dvh; --ac-hero-veil: linear-gradient( to bottom, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.26) 38%, rgba(255, 255, 255, 0.50) 58%, rgba(255, 255, 255, 0.58) 100% ); --ac-hero-veil-dark: linear-gradient( to bottom, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.26) 34%, rgba(0, 0, 0, 0.60) 58%, rgba(0, 0, 0, 0.78) 100% ); --ac-hero-ink: #1C1B19; /* Подзаголовок на кадре - тот же графит: на светлой завесе серый --ac-ink-body даёт 3,0:1. Мягкость даётся кеглем и весом, не цветом. */ --ac-hero-ink-soft: #1C1B19; --ac-hero-line: #C8C4BC; --ac-hero-ink-inv: #FFFFFF; --ac-hero-ink-inv-soft: rgba(255, 255, 255, 0.88); --ac-hero-line-inv: rgba(255, 255, 255, 0.55); --ac-hero-crop: 50%; --ac-hero-skel: #E4E2DD; /* пока кадр не загрузился */ /* --- Типографика ------------------------------------------------------- Golos Text - гротеск с характером и полной кириллицей: узкие овалы, крупный очок, табличные цифры. Заголовки, названия, цены. IBM Plex Sans - интерфейс. IBM Plex Mono - язык мастерской: артикул, проба, вес, размер. Антиква (Bodoni Moda) живёт только в логотипе, больше нигде. */ --ac-font-display: "Golos Text", "Helvetica Neue", Arial, sans-serif; --ac-font-ui: "IBM Plex Sans", -apple-system, "Segoe UI", Arial, sans-serif; --ac-font-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace; --ac-font-logo: "Bodoni Moda", "Times New Roman", Georgia, serif; /* Кегли фиксированные: базовый вьюпорт 390. Десктоп переопределяет. */ --ac-size-logo: 21px; --ac-size-price: 26px; --ac-size-h1: 27px; --ac-size-h2: 20px; --ac-size-h3: 16px; --ac-size-lead: 16px; --ac-size-body: 15px; --ac-size-sm: 13px; --ac-size-mono: 12px; --ac-size-xs: 11px; --ac-size-nano: 10px; --ac-lh-tight: 1.1; --ac-lh-snug: 1.28; --ac-lh-body: 1.55; --ac-lh-ui: 1.35; --ac-track-h1: -0.026em; --ac-track-h2: -0.018em; --ac-track-caps: 0.09em; --ac-track-mono: 0.01em; --ac-track-logo: 0.015em; --ac-track-sub: 0.34em; --ac-w-reg: 400; --ac-w-med: 500; --ac-w-semi: 600; /* --- Ритм. Шаг 4. ------------------------------------------------------ */ --ac-s1: 4px; --ac-s2: 8px; --ac-s3: 12px; --ac-s4: 16px; --ac-s5: 20px; --ac-s6: 24px; --ac-s8: 32px; --ac-s10: 40px; --ac-s12: 48px; --ac-gut: 12px; /* боковое поле экрана; десктоп переопределяет на 80 */ /* Заголовок принадлежит своей плитке, а не предыдущей картинке: сверху втрое больше, чем снизу. */ --ac-head-above: 36px; --ac-head-below: 12px; /* --- Геометрия --------------------------------------------------------- */ --ac-r-dock: 28px; --ac-r-card: 18px; --ac-r-photo: 12px; --ac-r-field: 14px; --ac-r-pill: 999px; --ac-r-phone: 44px; --ac-r-btn: 26px; --ac-dock-inset: 12px; --ac-dock-bottom: 10px; --ac-dock-cta: 40px; --ac-tap: 44px; --ac-badge: 18px; /* Иконки услуг: сетка 24 × 24, контур, толщина штриха одна на набор. */ --ac-i-w: 1.2; --ac-i: 24px; --ac-btn-h: 52px; --ac-grab-w: 36px; --ac-grab-h: 4px; /* --- Тени -------------------------------------------------------------- */ --ac-elev-dock: 0 8px 32px rgba(28, 27, 25, 0.16), inset 0 1px 0 var(--ac-glass-top); --ac-elev-seg: 0 1px 2px rgba(28, 27, 25, 0.10); --ac-elev-phone: 0 24px 60px rgba(28, 27, 25, 0.16); /* --- Движение ---------------------------------------------------------- */ --ac-ease: cubic-bezier(0.32, 0.72, 0, 1); --ac-dur: 260ms; /* --- Пропорция кадра. 1:1 везде, где есть товарное фото. --------------- */ --ac-ratio-product: 1; } @media (prefers-reduced-motion: reduce) { :root { --ac-dur: 0ms; } }