/* RTL — сгенерировано tools/rtl.py из tokens.css, не править руками */ /* ========================================================================== IMI Proving Ground — токены Светлая витрина: белый фон, тёплый светло-серый для чередующихся полос, угольная типографика, золото бренда как точечный акцент и отдельный «дилерский» синий для B2B-блоков. Меняете цвет здесь — он меняется по всему сайту, включая Elementor. Те же цвета доступны в Appearance → Customize → «IMI — Цвета». ========================================================================== */ :root{ /* Фоны */ --imi-void: #FFFFFF; /* фон страницы, карточки */ --imi-steel: #F6F5F2; /* чередующиеся полосы, подвал, панели (тёплый серый) */ --imi-steel-2: #EFEDE6; /* третий уровень: выделенные блоки */ --imi-steel-3: #E8E5DD; /* наведение на светлой панели */ /* Линии */ --imi-edge: #E4E1DA; /* границы, разделители 1px */ --imi-edge-2: #D8D4CB; /* границы поярче, неактивные цифры */ /* Текст */ --imi-bone: #1A1A18; /* основной текст и заголовки */ --imi-ash: #57554F; /* вторичный текст */ --imi-ash-2: #78766F; /* подписи, метки, мелочь */ --imi-text: #3E3E3A; /* длинные абзацы */ --imi-white: #111110; /* самый контрастный */ --imi-invert: #FFFFFF; /* текст поверх фотографии — белый в обеих темах */ --imi-ink: #1A1A18; /* контрастная поверхность: основная кнопка, верхняя строка */ --imi-ink-2: #33322E; /* наведение на контрастной кнопке */ --imi-on-ink: #FFFFFF; /* текст на контрастной поверхности */ --imi-on-plate:#1A1A18; /* текст и значки на светлой подложке фото */ --imi-glass: rgba(255,255,255,.97); /* полупрозрачная шапка, липкие панели */ --imi-card: #FFFFFF; --imi-card-edge:#E9E6DF; /* Акценты */ --imi-gold: #EDAE24; /* бренд (золото логотипа): плашки, активные состояния */ --imi-on-gold: #1A1A18; /* текст на золотой плашке */ --imi-gold-2: #96690A; /* золото в тексте и ссылках: читается на белом */ --imi-gold-dim: #F2E3BE; /* золотая подложка и волосяные линии */ --imi-gold-bg: #FBF6E9; /* очень светлая золотая заливка */ /* Дилерский раздел: глубокий сине-стальной, отделяет B2B от витрины */ --imi-trade: #23414F; --imi-trade-2: #1B3441; --imi-on-trade: #FFFFFF; --imi-trade-mute:#D3E0E6; --imi-sig: #B3392B; /* ТОЛЬКО: ошибка, запрет, low stock, sale */ --imi-ok: #2E7D46; /* наличие, успешная проверка */ --imi-warn: #8A6100; /* «осталось мало», «в обработке» */ --imi-slate: #5B6B77; /* холодный акцент: сталь, Gear */ --imi-fde: #B99A6B; /* песочный Desert Tan */ --imi-od: #5F6E42; /* оливковый (в каталоге не используется) */ --imi-black: #1A1A18; /* покрытие Black (образцы) */ /* Фон под фотографией товара. В светлой теме подложки нет вовсе: снимки IMI сняты на белом и сливаются с белым фоном раздела. В тёмной теме под фото остаётся ровно белое поле — пока фотографии не переведены в PNG с прозрачностью (см. data-photos). */ --imi-photo-bg: transparent; --imi-photo-fg: #1A1A18; /* значки и подписи поверх области фотографии */ --imi-plate: #F6F5F2; /* светлая панель под фото в мегаменю и плитках */ --imi-plate-2: #EFEDE6; color-scheme: light; /* Тени — очень мягкие, тёплые */ --imi-shadow: 0 1px 2px rgba(26,26,24,.05); --imi-shadow-2: 0 8px 22px rgba(26,26,24,.07); --imi-shadow-3: 0 22px 48px rgba(26,26,24,.11); /* Шрифты: весь сайт — Saira, как Stratum 2 у SIG SAUER. Классический набор (Archivo, Instrument Sans, IBM Plex Mono) включается в «Настроить → Шрифты» — тогда эти переменные переопределяет тема. */ --imi-fd: "Saira", "Archivo", "Helvetica Neue", Arial, sans-serif; --imi-fb: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --imi-fc: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --imi-fm: "Saira", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Геометрия */ --imi-r: 3px; /* радиус: кнопки, поля, карточки */ --imi-r-lg: 4px; --imi-notch: 14px; /* срез угла — остался для совместимости */ --imi-notch-sm: 9px; --imi-gut-m: 16px; /* боковые поля на телефоне */ --imi-gut: clamp(var(--imi-gut-m,16px), 3.6vw, 64px); --imi-max: 1400px; /* Тёмные полосы главной. Они тёмные в обеих темах — это часть раскладки, а не «инверсия». Поэтому у них свои токены: --imi-ink в тёмной теме специально становится светлым, и для полос он не годится. */ --imi-band: #121211; --imi-band-2: #1E1E1C; --imi-on-band: #FFFFFF; /* Управляются ползунками: Настроить → «IMI — Размеры и сетка». Значения здесь — то, как сайт выглядит без единой правки. */ --imi-base: 16px; /* базовый размер текста */ --imi-nav-size: 14px; /* пункты меню в шапке */ --imi-nav-gap: 28px; /* расстояние между пунктами */ --imi-hd-min: 76px; /* высота шапки */ --imi-pp-photo: 640px; /* карточка товара: колонка с фото */ --imi-pp-gap: 48px; /* карточка товара: от фото до текста */ --imi-pp-info: 520px; /* карточка товара: колонка с ценой и кнопкой */ --imi-cols: 4; /* колонок в каталоге */ --imi-cols-m: 2; /* колонок в каталоге на телефоне */ --imi-logo-w: 300px; /* предел ширины логотипа в шапке */ --imi-base-m: 16px; /* размер текста на телефоне */ --imi-nav-size-m: 1.4rem; /* пункты меню в бургере */ /* Вертикальный ритм секций */ --imi-sec-m: 48px; /* отступы между блоками на телефоне */ --imi-sec: clamp(var(--imi-sec-m,48px), 5.6vw, 88px); --imi-sec-sm: clamp(32px, 3.6vw, 56px); /* Движение */ --imi-ease: cubic-bezier(.2,.8,.3,1); } /* Глобальные шрифты Elementor (Site Settings → Typography) идут за шрифтами темы — иначе виджеты Elementor остались бы на старом наборе. */ body[class*="elementor-kit-"]{ --e-global-typography-primary-font-family: var(--imi-fd); --e-global-typography-secondary-font-family: var(--imi-fd); --e-global-typography-text-font-family: var(--imi-fb); --e-global-typography-accent-font-family: var(--imi-fm); } /* ========================================================================== Тёмная тема. Включается атрибутом data-theme="dark" на (переключатель в шапке, выбор хранится в localStorage «imi-theme»). Фотографии товаров остаются на белом поле — так они выглядят как в оригинале; золото бренда не меняется. ========================================================================== */ :root[data-theme="dark"]{ color-scheme: dark; --imi-void: #121312; --imi-steel: #191A19; --imi-steel-2: #202220; --imi-steel-3: #292B29; --imi-edge: #2C2E2C; --imi-edge-2: #3E413E; --imi-bone: #ECEDE9; --imi-ash: #AFB2AC; --imi-ash-2: #8E918B; --imi-text: #CDD0CA; --imi-white: #FFFFFF; --imi-invert: #FFFFFF; --imi-ink: #F0F0EC; --imi-ink-2: #FFFFFF; --imi-on-ink: #121312; --imi-on-plate:#1A1A18; --imi-glass: rgba(18,19,18,.95); --imi-band: #1C1E1C; --imi-band-2: #232523; --imi-card: #171817; --imi-card-edge:#2C2E2C; --imi-gold: #EDAE24; --imi-on-gold: #1A1A18; --imi-gold-2: #F0BE55; --imi-gold-dim: #4A3A10; --imi-gold-bg: #241E0E; --imi-trade: #1B3441; --imi-trade-2: #14262F; --imi-on-trade: #FFFFFF; --imi-trade-mute:#AFC6D0; --imi-sig: #E0584A; --imi-ok: #5DBB7A; --imi-warn: #D9A23B; --imi-slate: #8FA3B1; --imi-fde: #C4A87A; --imi-od: #8C9C68; /* Ровно белая — как фон самих снимков IMI. Тогда подложка сливается с фотографией в любом браузере, даже там, где режим смешивания отключён. */ --imi-photo-bg: #FFFFFF; --imi-photo-fg: #1A1A18; --imi-plate: #FFFFFF; --imi-plate-2: #F0F0EC; --imi-shadow: 0 1px 2px rgba(0,0,0,.4); --imi-shadow-2: 0 8px 22px rgba(0,0,0,.45); --imi-shadow-3: 0 22px 48px rgba(0,0,0,.6); } /* Фотографии с прозрачным фоном (PNG): подложка не нужна ни в одной теме, смешивание отключается — товар ложится прямо на фон раздела. Включается в Customize → «IMI — Каталог». */ :root[data-photos="alpha"]{ --imi-photo-bg: transparent; --imi-photo-fg: var(--imi-bone); }