/* ============================================================ ТЕМЫ САЙТА — единый источник цвета (дизайн-токены) ------------------------------------------------------------ :root → светлая «бумага» (дефолт): инженерная спецификация — бумага, чёрные рамки, красный акцент, моно-заголовки [data-theme="acid"] → кислотная (фиолет + неон, на базе design_mockups/shaman-acid-store-v2.html + shaman26_acid_purple_matrix.html) data-theme ставится на (см. анти-FOUC скрипт в base.html и index.html). Благодаря этому legacy-мост --shaman-* работает: var(--shaman-yellow) → var(--accent) разрешается уже с учётом темы. ПРАВИЛО: новые стили НЕ хардкодят цвет. Только var(--token). ============================================================ */ /* ВАЖНО: components.css больше НЕ @import-ится отсюда — браузеры жёстко кэшируют импортированные листы и не сбрасывают их при обновлении. Теперь components.css подключается ОТДЕЛЬНЫМ с ?v=N рядом с themes.css (theme_head.html, index.html, base.html). При правках CSS — бампать ?v=N во всех трёх местах. */ :root { /* «БУМАГА» — инженерная спецификация (classic из design_mockups/shaman26_acid_purple_matrix.html + shaman26_full_catalog_spec.pdf) */ /* --- поверхности --- */ --bg: #f4f3ef; /* бумага */ --surface: #ffffff; --surface-2: #eceae3; /* --- текст --- */ --text: #111111; --text-muted: #555555; /* --- акценты --- */ --accent: #d32f2f; /* инженерный красный */ --accent-contrast: #ffffff; /* текст поверх --accent */ --accent-2: #111111; /* вторичный акцент */ /* --- границы --- */ --border: #111111; /* чёткая чёрная рамка */ --border-soft: #d8d6cf; /* мягкая рамка/разделитель */ /* --- форма / тени / свечение --- */ --radius: 4px; /* острые «чертёжные» углы */ --radius-card: 4px; --shadow: 0 6px 24px rgba(17, 17, 17, 0.10); --glow: none; /* в бумажной теме свечения нет */ /* --- статусы --- */ --danger: #d32f2f; --success: #16a34a; /* --- шрифты --- */ --font-mono: 'IBM Plex Mono', 'Courier New', monospace; --font-head: var(--font-mono); --font-body: var(--font-mono); /* вся «бумага» — моно, как в spec-PDF */ /* --- LEGACY-МОСТ: старые переменные → новые токены --- */ --shaman-bg: var(--bg); --shaman-black: var(--text); --shaman-yellow: var(--accent); } [data-theme="acid"] { /* --- поверхности --- */ --bg: #0d001a; --surface: #1a0533; --surface-2: #2a0a4a; /* --- текст --- */ --text: #ffffff; --text-muted: #b794d6; /* --- акценты --- */ --accent: #39FF14; /* кислотно-зелёный (рамки/хайлайты) */ --accent-contrast: #000000; /* тёмный текст поверх неон-зелёного */ --accent-2: #FF00FF; /* кислотно-розовый (hover/danger-pop) */ /* --- границы --- */ --border: #39FF14; --border-soft: #8A2BE2; /* фиолетовый разделитель */ /* --- форма / тени / свечение --- */ --radius: 4px; /* острые «киберпанк» углы */ --radius-card: 6px; --shadow: 0 0 18px rgba(57, 255, 20, 0.25); --glow: 0 0 12px rgba(57, 255, 20, 0.6); /* --- статусы --- */ --danger: #FF00FF; --success: #39FF14; /* --- шрифты --- */ --font-mono: 'IBM Plex Mono', 'Courier New', monospace; --font-head: 'Russo One', 'Montserrat', sans-serif; --font-body: 'Russo One', 'Jura', 'Montserrat', sans-serif; } /* ============================================================ ЕДИНЫЙ ШРИФТ ТЕМЫ ДЛЯ ВСЕГО ТЕКСТА: бумага → IBM Plex Mono (как spec-PDF), acid → Russo One (как лого). !important нужен, чтобы перебить Tailwind font-sans и инлайновые font-family:Montserrat в шаблонах. Терминальные элементы матрицы (артикулы, статус-бары, цены, sysbar) в acid остаются mono — это часть дизайна, их селекторы ниже специфичнее и возвращают --font-mono (в бумаге они и так mono). ============================================================ */ body, body * { font-family: var(--font-body) !important; } [data-theme="acid"] .tile-id, [data-theme="acid"] .tile-head .tile-cat, [data-theme="acid"] .tile-status-bar, [data-theme="acid"] .tile-status-bar *, [data-theme="acid"] .tile-price, [data-theme="acid"] .tile-price *, [data-theme="acid"] .tile-cta, [data-theme="acid"] .tile-cta *, [data-theme="acid"] .catalog-sysbar, [data-theme="acid"] .catalog-sysbar *, [data-theme="acid"] .feed-head, [data-theme="acid"] .feed-head *, [data-theme="acid"] .feed-nav { font-family: var(--font-mono) !important; } /* Плавный переход при переключении темы (но не на загрузке — transition применяется к уже отрисованной странице). */ [data-theme] body, [data-theme] body * { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* ============================================================ Тумблер темы в навбаре ============================================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); border: 3px solid var(--border-soft); background: var(--surface); color: var(--text); cursor: pointer; flex-shrink: 0; transition: all 0.3s ease; box-shadow: var(--glow); } .theme-toggle:hover { border-color: var(--border); background: var(--accent); color: var(--accent-contrast); } .theme-toggle svg { width: 16px; height: 16px; } /* Показываем луну в белой теме (переключиться на acid), солнце — в acid (вернуться на белую). */ .theme-toggle .icon-acid { display: inline-flex; } .theme-toggle .icon-white { display: none; } [data-theme="acid"] .theme-toggle .icon-acid { display: none; } [data-theme="acid"] .theme-toggle .icon-white { display: inline-flex; } /* ========================================================================== ACID: «инверсные» primary-кнопки. Шаблоны делают primary-кнопки через bg-[var(--text)] text-[var(--bg)] (+ hover:bg-[var(--accent)]). В «бумаге» --text тёмный → чёрная кнопка (ок), в acid --text=#fff → выходила БЕЛАЯ, выбивалась из неона. Делаем тёмный фон + неон-зелёный текст; зелёная рамка (--border) уже на месте. Специфичность [data-theme="acid"] .class (0,2,0) выше Tailwind-утилит (0,1,0), поэтому !important не нужен. ========================================================================== */ [data-theme="acid"] .bg-\[var\(--text\)\] { background-color: var(--surface-2); color: var(--accent); box-shadow: var(--glow); } [data-theme="acid"] .bg-\[var\(--text\)\]:hover { background-color: var(--accent); color: var(--accent-contrast); } /* Зеркальный случай: зелёные кнопки (bg-[var(--accent)]) с hover:bg-[var(--text)] белели НА ХОВЕРЕ. В acid делаем hover тёмным с неон-текстом, а не белым. */ [data-theme="acid"] .hover\:bg-\[var\(--text\)\]:hover { background-color: var(--surface-2); color: var(--accent); } /* Тосты-уведомления захардкожены белыми (.toast { background:white }) — определены инлайн в base/cart/checkout/profile. Один acid-override на всех. */ [data-theme="acid"] .toast { background: var(--surface); border-color: var(--accent); color: var(--text); } [data-theme="acid"] .toast-message { color: var(--text-muted); } [data-theme="acid"] .toast-close { color: var(--text-muted); }