/* ============================================================ tokens.css — дизайн-токены темы instaprom. Значения сняты с эталона вёрстки (zavod.allcorp3-demo.ru) живым CDP: контейнер 1564/32, верхняя полоса 46px, основная панель 100px/#1B1B1B/r4, меню 12px/700/uppercase/0.96px, кнопка #365EDC 41px r4 14px/700, полоса преимуществ: паддинг 80/0, иконка 50, заголовок 17/24/700, текст 14/21. Тема по умолчанию — светлая. Тёмная включается переключателем в шапке: он ставит на атрибут data-theme="dark" и запоминает выбор. Здесь только дизайн — никакого контента. ============================================================ */ :root { /* Сетка */ --container-max: 1564px; --container-pad: 32px; /* Типографика: текст — Montserrat, заголовки — Roboto (как на демо) */ --font: 'Montserrat', Arial, sans-serif; --font-head: 'Roboto', Arial, sans-serif; --fs-base: 15px; --lh-base: 25px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 18px; /* Акцент — один на обе темы */ --accent: #0aa6b8; --accent-hover: #078999; --badge-action-bg: #ffd000; --badge-action-fg: #242424; --badge-hit-bg: #f05b3c; --badge-new-bg: #22b83b; --badge-recommend-bg: #8b55e8; --product-media-bg: #ffffff; --product-in-stock: #69be15; --product-in-stock-line: #5da911; --product-on-order: #25a4f1; --product-on-order-line: #0088cc; /* Светлая тема (по умолчанию) */ --fg: #16181d; /* основной текст */ --fg-muted: #666666; /* вторичный текст */ --fg-faint: #999999; /* надзаголовки, счётчики */ --bg: #ffffff; /* фон страницы */ --bg-soft: #f5f5f7; /* мягкая подложка (верхняя полоса, полосы секций) */ --surface: #ffffff; /* карточки, выпадашки */ --line: #ececef; /* границы */ --ink: #062d3a; /* тёмная панель шапки и подвал */ --on-dark: #ffffff; --on-dark-muted: rgba(255, 255, 255, .72); --shadow: 0 8px 30px rgba(16, 20, 30, .10); --shadow-drop: 0 12px 34px rgba(10, 14, 24, .18); /* Шапка: в светлой схеме панель белая с тонкой тенью — как в эталоне */ --hdr-top-h: 46px; --hdr-bar-h: 100px; --hdr-bar-bg: var(--surface); --hdr-bar-fg: var(--fg); --hdr-bar-radius: 4px; /* Меню шапки — стиль вложенного span.header-menu__title демо (замер 08.08.2026): 12px/700, letter-spacing .96px, uppercase, line-height 19; зазор между пунктами 56 */ --hdr-menu-fs: 13px; --hdr-menu-fw: 700; --hdr-menu-ls: .08em; --hdr-fixed-bar-h: 81px; /* высота прилипшей панели, как на демо */ /* фон прилипшей шапки — замер демо: rgba(18,18,18,.8)+blur(10px) в тёмной, светлая — зеркально белым */ --hdr-fixed-bg: rgba(255, 255, 255, .8); /* Прочее */ --radius: 4px; --radius-lg: 8px; --transition: .18s ease; } /* Тёмная тема — переопределяем только палитру, размеры общие */ html[data-theme="dark"] { --fg: #f2f4f7; --fg-muted: #a7adb8; --fg-faint: #8b9099; --bg: #141414; --bg-soft: #1d1d1f; --surface: #1d1d1f; --line: rgba(255, 255, 255, .12); --ink: #062d3a; --hdr-bar-bg: #1b1b1b; --hdr-bar-fg: #ffffff; --hdr-fixed-bg: rgba(18, 18, 18, .8); --shadow: 0 8px 30px rgba(0, 0, 0, .5); --shadow-drop: 0 12px 34px rgba(0, 0, 0, .6); } /* Переключение темы не должно моргать анимациями */ html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }