/* Дизайн-токены витрины PWR. * * Один источник цвета на весь сайт. Правило: в brand.css и в mu-плагинах * не должно оставаться шестнадцатеричных цветов — только var(--pwr-*). * Иначе смена палитры превращается в обход двух десятков файлов, а именно * так витрина и жила до 31.08.2026. * * ПЕРЕКЛЮЧЕНИЕ СВЕТЛОЙ И ТЁМНОЙ ТЕМЫ * Тёмная включается атрибутом на : data-pwr-theme="dark". Атрибут * ставит functions.php по опции `pwr_theme_mode`. Значит откат тёмной темы — * это одна команда на сервере: * wp option update pwr_theme_mode light * без выкладки файлов и без правки CSS. Так задумано: тёмная витрина * выкатывается на живой сайт, и цена ошибки должна измеряться секундами. * * СОВМЕСТИМОСТЬ, КОТОРУЮ НЕЛЬЗЯ ЛОМАТЬ * Пять имён переменных уже используются существующим кодом: * --pwr-orange, --pwr-dark объявлялись в записи custom_css (ID 46) * --pwr-accent, --pwr-accent-soft, --pwr-line объявляются в pwr-catalog-nav.php * Запись 46 перестаёт выводиться в тот момент, когда активируется дочерняя * тема: ядро ищет custom_css по слагу АКТИВНОЙ темы. Если не объявить * --pwr-orange и --pwr-dark здесь, у сайта разом обесцветятся кнопка корзины, * заголовки и ссылки. Поэтому старые имена остаются как псевдонимы новых. */ :root { /* --- акцент --- */ --pwr-accent: #eb5c1f; --pwr-accent-hover: #cf4d14; --pwr-accent-soft: rgba(235, 92, 31, .25); --pwr-accent-wash: rgba(235, 92, 31, .06); --pwr-on-accent: #ffffff; /* Бейдж «New» на карточке в сетке. Отдельный цвет, а не акцент: рядом с бейджем «Хит» два оранжевых прямоугольника читались бы как один и тот же признак, и «новинка» перестала бы отличаться от «продаётся лучше всех». В макете владельца эту роль играет фиолетовый. */ --pwr-badge-new: #7c3aed; /* --- поверхности --- */ --pwr-bg: #ffffff; /* фон страницы */ --pwr-surface: #ffffff; /* карточки, панели */ --pwr-surface-2: #f7f7f8; /* вложенные блоки, полосы */ --pwr-surface-3: #ececec; /* Подложка под изображением товара. Разведены намеренно: пока у SKU нет * обработанного пакшота, картинка остаётся на белом фоне, и на тёмной * витрине ей нужен светлый контейнер — иначе получится белый квадрат * посреди чёрного. Как только пакшот обработан, товар переходит на * --pwr-media-bg. Правило живёт до конца Фазы 2. */ --pwr-media-bg: #ffffff; --pwr-media-bg-raw: #ffffff; /* --- линии --- */ --pwr-line: #ececec; /* основная граница */ --pwr-line-soft: #f2f2f2; /* разделители внутри карточки */ /* --- текст --- */ --pwr-heading: #111111; --pwr-text-strong: #444444; --pwr-text: #666666; --pwr-muted: #8a8a8a; /* Подвал держит собственные токены, а не заимствует цвет заголовка. * Ошибка, стоившая проверки 31.08: подвал был покрашен в --pwr-heading, * потому что в светлой теме заголовок и фон подвала совпадали (#111). * В тёмной теме заголовок стал светлым — и подвал вместе с ним побелел. * Совпадение значений не повод делить токен: делить надо смысл. */ --pwr-footer-bg: #111111; --pwr-footer-text: #bbbbbb; --pwr-footer-heading: #ffffff; /* --- тени --- */ --pwr-shadow-1: 0 2px 12px rgba(0, 0, 0, .05); --pwr-shadow-2: 0 8px 24px rgba(0, 0, 0, .09); /* --- форма --- */ --pwr-radius: 14px; --pwr-radius-sm: 10px; --pwr-radius-pill: 999px; /* --- псевдонимы для уже написанного кода --- */ --pwr-orange: var(--pwr-accent); --pwr-dark: var(--pwr-heading); } /* Тёмная палитра по макетам владельца 31.08.2026. * Чёрный не абсолютный: на #000 фирменные банки с тёмной этикеткой сливаются * с фоном, а тени перестают читаться вовсе. */ :root[data-pwr-theme="dark"] { --pwr-accent-wash: rgba(235, 92, 31, .10); /* На тёмном фоне тот же фиолетовый уходит в грязь: подсвечиваем. */ --pwr-badge-new: #8b5cf6; --pwr-bg: #0b0b0d; --pwr-surface: #141417; --pwr-surface-2: #1b1b20; --pwr-surface-3: #24242b; --pwr-media-bg: #1b1b20; --pwr-media-bg-raw: #ffffff; /* необработанный пакшот остаётся на белом */ --pwr-line: #2a2a31; --pwr-line-soft: #232329; /* Подвал чуть темнее полотна страницы: на тёмной витрине он иначе * перестаёт читаться как отдельная зона и сливается с последним блоком. */ --pwr-footer-bg: #08080a; --pwr-footer-text: #8f8f98; --pwr-footer-heading: #f4f4f6; --pwr-heading: #f4f4f6; --pwr-text-strong: #d4d4da; --pwr-text: #a6a6ae; --pwr-muted: #7b7b85; --pwr-shadow-1: 0 2px 12px rgba(0, 0, 0, .45); --pwr-shadow-2: 0 8px 24px rgba(0, 0, 0, .60); /* Просит браузер рисовать нативные элементы в тёмной схеме: полосы * прокрутки и — что важнее — выпадающий список