/* ============================================================ Цветовые темы магазина «Студия Жалюзи» ------------------------------------------------------------ Тема - это набор CSS-переменных, а не отдельная вёрстка: вся палитра сайта и админки идёт через токены из styles.css, поэтому замена переменных перекрашивает разом витрину, карточки, корзину, личный кабинет и все 18 разделов админки. Тема ставится атрибутом data-theme на (themes.js). Без атрибута работает «Облако» - исходная палитра из styles.css. Подключать ПОСЛЕ styles.css и admin.css. ============================================================ */ /* ---------- Терракота: тёплая, глиняная ---------- */ html[data-theme="terracotta"] { --bg:#FBF6F1; --surface:#FFFFFF; --surface-alt:#F3EBE3; --lav:#F3E7DF; --lav-soft:#FBF5F0; --lav-deep:#DFC3B2; --mint:#E3EDE4; --mint-deep:#B9D2BC; --mint-ink:#47694B; --peach:#F8E3D8; --peach-deep:#EEC3AC; --peach-ink:#8A4A2E; --sky:#E3EAF2; --sky-deep:#C3D4E6; --sky-ink:#3A5670; --primary:#8A5645; --primary-dark:#6E4235; --primary-ink:#7A4A3A; --text:#3A2B24; --text-muted:#8A7468; --border:#EBDDD2; --fav-red:#C4473F; --header-bg:rgba(251,246,241,.72); --header-bg-scrolled:rgba(251,246,241,.92); --header-shadow:0 10px 30px -24px rgba(90,60,45,.5); --section-alt-wash:rgba(251,246,241,.9); --section-alt-fade:rgba(243,235,227,0); --hero-text:#5B463C; --focus-ring:rgba(223,195,178,.45); --focus-ring-primary:rgba(138,86,69,.18); --btn-tg-hi:#E3C3A8; --tg-panel-text:#4A342A; --tg-panel-text-muted:rgba(74,52,42,.78); --bottom-nav-bg:rgba(251,246,241,.96); --bottom-nav-shadow:0 -10px 30px -24px rgba(90,60,45,.5); --shadow-chip:0 2px 8px rgba(90,60,45,.22); --dot-shadow:0 1px 3px rgba(90,60,45,.3); --menu-shadow:0 14px 34px rgba(58,43,36,.16); --shadow-sm:0 8px 22px -16px rgba(90,60,45,.40); --shadow-md:0 18px 44px -26px rgba(90,60,45,.45); --shadow-lg:0 28px 64px -32px rgba(90,60,45,.48); --ok-ink:#3F8256; --danger-bg:#F6DED9; --danger-ink:#8A3B2C; --danger-line:#A9503F; --scrim:rgba(48,32,25,.45); } /* ---------- Пудра: мягкая розовая ---------- */ html[data-theme="blush"] { --bg:#FDF7F8; --surface:#FFFFFF; --surface-alt:#F7E9EC; --lav:#F8E5E9; --lav-soft:#FDF4F6; --lav-deep:#E7BFC8; --mint:#E4EFE7; --mint-deep:#BBD8C4; --mint-ink:#436B52; --peach:#FAE4DC; --peach-deep:#F0C7B7; --peach-ink:#8C4A37; --sky:#E6ECF6; --sky-deep:#C4D3EA; --sky-ink:#3A5375; --primary:#A0526A; --primary-dark:#824054; --primary-ink:#954B62; --text:#3B2630; --text-muted:#8E6E79; --border:#F0DCE1; --fav-red:#D33F52; --header-bg:rgba(253,247,248,.72); --header-bg-scrolled:rgba(253,247,248,.92); --header-shadow:0 10px 30px -24px rgba(105,55,75,.5); --section-alt-wash:rgba(253,247,248,.9); --section-alt-fade:rgba(247,233,236,0); --hero-text:#614450; --focus-ring:rgba(231,191,200,.45); --focus-ring-primary:rgba(160,82,106,.18); --btn-tg-hi:#E9BFCB; --tg-panel-text:#4A2E3A; --tg-panel-text-muted:rgba(74,46,58,.78); --bottom-nav-bg:rgba(253,247,248,.96); --bottom-nav-shadow:0 -10px 30px -24px rgba(105,55,75,.5); --shadow-chip:0 2px 8px rgba(105,55,75,.22); --dot-shadow:0 1px 3px rgba(105,55,75,.3); --menu-shadow:0 14px 34px rgba(59,38,48,.16); --shadow-sm:0 8px 22px -16px rgba(105,55,75,.40); --shadow-md:0 18px 44px -26px rgba(105,55,75,.45); --shadow-lg:0 28px 64px -32px rgba(105,55,75,.48); --ok-ink:#3D8159; --danger-bg:#F8DBDF; --danger-ink:#8C3344; --danger-line:#AF4457; --scrim:rgba(48,26,34,.45); } /* ---------- Шалфей: природная зелёная ---------- */ html[data-theme="sage"] { --bg:#F6F8F4; --surface:#FFFFFF; --surface-alt:#E9F0E6; --lav:#E6EFE4; --lav-soft:#F3F7F1; --lav-deep:#BCD3B6; --mint:#DDEDE6; --mint-deep:#ADD5C4; --mint-ink:#2F6B57; --peach:#F7E7DA; --peach-deep:#EDCBB0; --peach-ink:#8A5230; --sky:#E5EDF5; --sky-deep:#C2D5E8; --sky-ink:#375670; --primary:#4E6B52; --primary-dark:#3B5440; --primary-ink:#47624B; --text:#26302A; --text-muted:#6F7F72; --border:#DCE7D8; --fav-red:#C7453F; --header-bg:rgba(246,248,244,.72); --header-bg-scrolled:rgba(246,248,244,.92); --header-shadow:0 10px 30px -24px rgba(45,70,50,.5); --section-alt-wash:rgba(246,248,244,.9); --section-alt-fade:rgba(233,240,230,0); --hero-text:#495449; --focus-ring:rgba(188,211,182,.5); --focus-ring-primary:rgba(78,107,82,.18); --btn-tg-hi:#BFD6C4; --tg-panel-text:#2B3A2E; --tg-panel-text-muted:rgba(43,58,46,.78); --bottom-nav-bg:rgba(246,248,244,.96); --bottom-nav-shadow:0 -10px 30px -24px rgba(45,70,50,.5); --shadow-chip:0 2px 8px rgba(45,70,50,.22); --dot-shadow:0 1px 3px rgba(45,70,50,.3); --menu-shadow:0 14px 34px rgba(38,48,42,.16); --shadow-sm:0 8px 22px -16px rgba(45,70,50,.40); --shadow-md:0 18px 44px -26px rgba(45,70,50,.45); --shadow-lg:0 28px 64px -32px rgba(45,70,50,.48); --ok-ink:#2F7A52; --danger-bg:#F4DDDA; --danger-ink:#8A3730; --danger-line:#A94A41; --scrim:rgba(26,38,30,.45); } /* ---------- Ночь: тёмная ---------- Здесь переворачиваются не только фон и текст: светлые плашки-подсветки (мята/персик/небо) становятся тёмными подложками со светлыми подписями, иначе бейджи «в наличии» и статусы заказов выжигают глаз на тёмном фоне. */ html[data-theme="night"] { --bg:#16161A; --surface:#202027; --surface-alt:#1C1C22; --lav:#2A2A34; --lav-soft:#1E1E25; --lav-deep:#4A4560; --mint:#1F3029; --mint-deep:#2F5745; --mint-ink:#8FD6B4; --peach:#33241F; --peach-deep:#6A4335; --peach-ink:#F0B49A; --sky:#1E2A38; --sky-deep:#35506E; --sky-ink:#9EC6EE; --primary:#B3A0DC; --primary-dark:#C6B7E8; --primary-ink:#C6B7E8; --text:#EDEAF3; --text-muted:#A09AB0; --border:#33333E; --fav-red:#FF6B70; --on-primary:#1B1722; --glass:rgba(32,32,39,.72); --overlay-btn:rgba(24,24,30,.82); --overlay-btn-hi:#2A2A33; --control-bg:#2A2A33; --shine:rgba(255,255,255,.16); --header-bg:rgba(22,22,26,.72); --header-bg-scrolled:rgba(22,22,26,.94); --header-shadow:0 10px 30px -24px rgba(0,0,0,.85); --section-alt-wash:rgba(22,22,26,.9); --section-alt-fade:rgba(28,28,34,0); --hero-wash:rgba(255,255,255,.06); --hero-text:#BDB6CC; --skeleton-hi:#2A2A33; --shadow-chip:0 2px 8px rgba(0,0,0,.55); --dot-bg:rgba(255,255,255,.45); --dot-shadow:0 1px 3px rgba(0,0,0,.6); --menu-shadow:0 14px 34px rgba(0,0,0,.55); --swatch-ring:rgba(255,255,255,.34); --swatch-inset:rgba(0,0,0,.35); --focus-ring:rgba(179,160,220,.30); --focus-ring-primary:rgba(179,160,220,.25); --btn-tg-hi:#4E7FB0; --tg-panel-text:#EDEAF3; --tg-panel-text-muted:rgba(237,234,243,.78); --tg-panel-blob:rgba(255,255,255,.08); --bottom-nav-bg:rgba(22,22,26,.96); --bottom-nav-shadow:0 -10px 30px -24px rgba(0,0,0,.85); --shadow-sm:0 8px 22px -16px rgba(0,0,0,.7); --shadow-md:0 18px 44px -26px rgba(0,0,0,.75); --shadow-lg:0 28px 64px -32px rgba(0,0,0,.8); --ok-ink:#55C98A; --danger-bg:#3A1E22; --danger-ink:#F2A3A8; --danger-line:#F08A90; --scrim:rgba(0,0,0,.65); /* системные элементы браузера: полосы прокрутки, выпадающие списки, календарь в поле даты - без этого они остаются белыми */ color-scheme:dark; } /* Логотип-надпись нарисована фирменным синим #20409A - на тёмном фоне он почти сливается. Перекрашиваем в белый фильтром, чтобы не заводить второй файл. */ html[data-theme="night"] .logo-text, html[data-theme="night"] .admin-sidebar-logo img + span { filter:brightness(0) invert(1) opacity(.93) } /* Фото товаров сняты на белом: на тёмном фоне карточка иначе светится прямоугольником */ html[data-theme="night"] .product-media img, html[data-theme="night"] .product-gallery img { filter:brightness(.94) } /* ============================================================ Переключатель тем Кнопка встраивается themes.js в шапку витрины (.header-cta) и в шапку админки (.admin-topbar), на странице входа - в карточку. Если ни одной не нашлось - висит плавающей кнопкой в правом нижнем углу, чтобы тема была доступна на любой странице. ============================================================ */ .theme-switch { position:relative; display:flex; align-items:center; flex:none } /* В шапке админки заголовок слева, а почта с ролью справа: без этого кнопка темы повисает ровно посередине между ними (space-between на три элемента) */ .admin-topbar .theme-switch { margin-left:auto } /* На странице входа шапки нет: кнопка в правом верхнем углу карточки, а не плавающей в углу экрана, где её не видно */ .admin-login-wrap .admin-card { position:relative } .admin-login-wrap .admin-card > .theme-switch { position:absolute; top:16px; right:16px } .theme-switch-btn { display:flex; align-items:center; gap:8px; padding:8px 14px 8px 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-size:.82rem; font-weight:600; line-height:1; cursor:pointer; white-space:nowrap; box-shadow:var(--shadow-chip); transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); -webkit-tap-highlight-color:transparent; } .theme-switch-btn:hover { transform:translateY(-2px) } .theme-switch-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px } .theme-switch-btn svg { width:20px; height:20px; flex:none } /* кружок с тремя цветами схемы - превью у пунктов списка */ .theme-chip { width:22px; height:22px; flex:none; border-radius:50%; border:1.5px solid var(--swatch-ring); background:conic-gradient(var(--chip-a) 0 33%, var(--chip-b) 0 66%, var(--chip-c) 0); box-shadow:inset 0 -2px 5px var(--swatch-inset); } .theme-switch-panel[hidden] { display:none } .theme-switch-panel { position:absolute; z-index:80; top:calc(100% + 10px); right:0; width:268px; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--menu-shadow); } .theme-switch-title { padding:8px 10px 6px; margin:0; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); } .theme-opt { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:12px; background:none; font:inherit; font-size:.9rem; color:var(--text); text-align:left; cursor:pointer; transition:background .15s var(--ease); } .theme-opt:hover { background:var(--lav-soft) } .theme-opt[aria-checked="true"] { background:var(--lav); font-weight:600 } .theme-opt:focus-visible { outline:2px solid var(--primary); outline-offset:-2px } .theme-opt .theme-chip { width:26px; height:26px } .theme-opt-name { flex:1; min-width:0 } .theme-opt-note { display:block; font-size:.72rem; font-weight:400; color:var(--text-muted) } .theme-opt-check { width:16px; height:16px; flex:none; opacity:0; color:var(--primary-ink) } .theme-opt[aria-checked="true"] .theme-opt-check { opacity:1 } /* «Как на устройстве»: половинка светлая, половинка тёмная */ .theme-chip-auto { background:linear-gradient(90deg, #FDFBFF 0 50%, #1B1B21 0) } /* превью каждой темы: три её собственных цвета */ .theme-opt[data-theme-set="cloud"] { --chip-a:#584D6E; --chip-b:#EDE8F7; --chip-c:#DEEFE7 } .theme-opt[data-theme-set="terracotta"] { --chip-a:#8A5645; --chip-b:#F3E7DF; --chip-c:#E3EDE4 } .theme-opt[data-theme-set="blush"] { --chip-a:#A0526A; --chip-b:#F8E5E9; --chip-c:#E6ECF6 } .theme-opt[data-theme-set="sage"] { --chip-a:#4E6B52; --chip-b:#E6EFE4; --chip-c:#F7E7DA } .theme-opt[data-theme-set="night"] { --chip-a:#B3A0DC; --chip-b:#2A2A34; --chip-c:#16161A } /* --- плавная смена темы там, где нет View Transitions --- */ html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after { transition:background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease, stroke .4s ease, box-shadow .4s ease !important; } /* новая тема опускается сверху вниз, как штора (анимация в themes.js) */ ::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal } ::view-transition-new(root) { z-index:2 } /* --- телефон: панель разворачивается снизу на всю ширину --- */ @media (max-width:640px) { /* В шапке телефона и так тесно (логотип, выбор региона, связь), поэтому от кнопки остаётся один значок палитры без подписи. Без этого шапка становится шире экрана и страница мотается вбок. */ .theme-switch-btn { padding:8px; gap:0 } .theme-switch-btn .theme-switch-label { display:none } /* Панель остаётся выпадающим списком под кнопкой, а не шторкой у нижнего края: у шапки сайта есть backdrop-filter, а он делает шапку системой координат для position:fixed - шторка уезжала за пределы экрана. */ .theme-switch-panel { width:min(88vw,272px); max-height:min(74vh,520px); overflow-y:auto; border-radius:var(--radius-lg); padding:8px 8px 12px; } .theme-opt { padding:12px 10px; font-size:.95rem } } /* На витрине шапка на телефоне прячет всё лишнее (.header-account и прочее), но выбор темы должен остаться доступен - поэтому он объявлен явно. */ @media (max-width:720px) { .header-cta .theme-switch { display:flex } body.admin-body { padding-bottom:0 } } @media (prefers-reduced-motion: reduce) { .theme-switch-btn:hover { transform:none } }