/* ===================================================================== theme.css — глобальний тем-шар nikoservice.com (світла / темна) --------------------------------------------------------------------- Модель: • Семантичні токени --nk-* (єдине джерело правди). • Легасі-аліаси (--blue, --gray-900, --sh-* …) вказують на --nk-*, тож стара верстка «під'їжджає» під тему без переписування. • Темні значення задаються через ВИСОКОСПЕЦИФІЧНІ селектори ( :root[data-theme="dark"] та @media … :root:not([data-theme="light"]) ), тому перекривають будь-які літеральні :root у site-header.css та в інлайн-стилях сторінок НЕЗАЛЕЖНО від порядку підключення. • Авто-визначення теми смартфона — через @media (prefers-color-scheme). Ручний вибір користувача — через [data-theme] на (theme.js). ===================================================================== */ :root { color-scheme: light; /* ── Семантичні токени (світла тема) ── */ --nk-bg: #ffffff; /* фон сторінки */ --nk-surface: #ffffff; /* картки, дропдауни */ --nk-surface-2: #f9fafb; /* приглушені секції */ --nk-text: #111827; /* основний текст */ --nk-text-soft: #374151; /* другорядний текст */ --nk-text-muted: #6b7280; /* підписи, мета */ --nk-border: #e5e7eb; /* лінії, рамки */ --nk-brand: #1e4a8c; /* фірмовий синій */ --nk-brand-light:#2b62b8; /* синій світліший (hover) */ --nk-brand-pale: #e8eff9; /* синя підкладка (hover-bg)*/ --nk-accent: #ff6b35; /* помаранчевий акцент */ --nk-shadow: rgba(13,42,85,.12); /* ── Токени поверхонь для шапки (site-header.css) ── */ --sh-surface: #ffffff; /* фон шапки/меню/дропдаунів */ --sh-surface-2: #f3f4f6; /* фон перемикачів (мова/тема)*/ /* Легасі-аліаси (світлі) — щоб var(--blue)/var(--gray-900)/… працювали на будь-якій сторінці, навіть без локального :root. Темні значення цих же імен задаються нижче через високоспецифічні селектори. */ --blue: var(--nk-brand); --blue-light: var(--nk-brand-light); --blue-pale: var(--nk-brand-pale); --gray: var(--nk-text-muted); --gray-dark: var(--nk-text-soft); --gray-900: var(--nk-text); --white: var(--nk-bg); --off-white: var(--nk-surface-2); --accent: var(--nk-accent); --border: var(--nk-border); /* Підкладка під фото товарів — світла В ОБОХ темах. Продуктові фото зняті на білому; на темній картці біла підкладка не так ріже око, як контраст «біле фото на майже-чорному». Стандартна практика e-commerce. */ --nk-photo-bg: #f2f4f8; /* Плавний перехід між темами (лише кольори — не ламає анімації) */ --nk-theme-ease: background-color .28s ease, color .28s ease, border-color .28s ease; } /* Базовий фон/текст — щоб полотно сторінки коректно темніло навіть там, де секція ще не мігрувала на токени (низька специфічність — класи сторінок легко перекривають де треба). */ html { background: var(--nk-bg); } body { background: var(--nk-bg); color: var(--nk-text); } /* --------------------------------------------------------------------- ТЕМНІ ЗНАЧЕННЯ Один спільний блок токенів для двох випадків: (1) системна темна тема, якщо користувач не робив ручний вибір; (2) ручний вибір «темна» ([data-theme="dark"]). --------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --nk-bg: #0f1216; --nk-surface: #171b22; --nk-surface-2: #1e232c; --nk-text: #e7eaee; --nk-text-soft: #c4cad4; --nk-text-muted: #98a2b3; --nk-border: #2b313c; --nk-brand: #3f77c2; --nk-brand-light:#5b93da; --nk-brand-pale: #1a2942; --nk-accent: #ff7a48; --nk-shadow: rgba(0,0,0,.55); --sh-surface: #171b22; --sh-surface-2: #232833; } } :root[data-theme="dark"] { color-scheme: dark; --nk-bg: #0f1216; --nk-surface: #171b22; --nk-surface-2: #1e232c; --nk-text: #e7eaee; --nk-text-soft: #c4cad4; --nk-text-muted: #98a2b3; --nk-border: #2b313c; --nk-brand: #3f77c2; --nk-brand-light:#5b93da; --nk-brand-pale: #1a2942; --nk-accent: #ff7a48; --nk-shadow: rgba(0,0,0,.55); --sh-surface: #171b22; --sh-surface-2: #232833; } /* --------------------------------------------------------------------- ЛЕГАСІ-АЛІАСИ → семантичні токени. Задаємо ТІЛЬКИ в темних блоках через високу специфічність, щоб перекрити літеральні :root зі старих файлів. У світлій темі старі літерали лишаються (візуально ідентичні) — нічого не ламаємо. var() резолвиться в місці використання, тож аліаси слідують за темою. --------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* сторінкові аліаси (index.php та ін.) */ --blue: var(--nk-brand); --blue-light: var(--nk-brand-light); --blue-pale: var(--nk-brand-pale); --gray: var(--nk-text-muted); --gray-dark: var(--nk-text-soft); --gray-900: var(--nk-text); --white: var(--nk-bg); --off-white: var(--nk-surface-2); --surface: var(--nk-surface); --accent: var(--nk-accent); --border: var(--nk-border); /* аліаси шапки (site-header.css) */ --sh-blue: var(--nk-brand); --sh-blue-light:var(--nk-brand-light); --sh-blue-pale: var(--nk-brand-pale); --sh-gray: var(--nk-text-muted); --sh-gray-dark: var(--nk-text-soft); --sh-gray-900: var(--nk-text); --sh-border: var(--nk-border); --sh-accent: var(--nk-accent); } } :root[data-theme="dark"] { --blue: var(--nk-brand); --blue-light: var(--nk-brand-light); --blue-pale: var(--nk-brand-pale); --gray: var(--nk-text-muted); --gray-dark: var(--nk-text-soft); --gray-900: var(--nk-text); --white: var(--nk-bg); --off-white: var(--nk-surface-2); --surface: var(--nk-surface); --accent: var(--nk-accent); --border: var(--nk-border); --sh-blue: var(--nk-brand); --sh-blue-light:var(--nk-brand-light); --sh-blue-pale: var(--nk-brand-pale); --sh-gray: var(--nk-text-muted); --sh-gray-dark: var(--nk-text-soft); --sh-gray-900: var(--nk-text); --sh-border: var(--nk-border); --sh-accent: var(--nk-accent); } /* Світла тема: даємо аліас --surface (у старих файлах його не було), щоб мігровані картки мали світле значення. */ :root { --surface: var(--nk-surface); } /* Аліаси віджета «Переглянуті товари» (recently.css, --rv-*) — темні. */ :root[data-theme="dark"] { --rv-blue: var(--nk-brand); --rv-blue-light:var(--nk-brand-light); --rv-accent: var(--nk-accent); --rv-gray: var(--nk-text-muted); --rv-gray-dark: var(--nk-text-soft); --rv-gray-900: var(--nk-text); --rv-border: var(--nk-border); --rv-off: var(--nk-surface-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rv-blue: var(--nk-brand); --rv-blue-light:var(--nk-brand-light); --rv-accent: var(--nk-accent); --rv-gray: var(--nk-text-muted); --rv-gray-dark: var(--nk-text-soft); --rv-gray-900: var(--nk-text); --rv-border: var(--nk-border); --rv-off: var(--nk-surface-2); } } /* Аліаси спільного шаблону товару (materialy/_template/product.css має власний словник скорочених імен: --gray-9, --gray-d, --blue-l, --off). Стандартні (--blue,--gray,--accent,--border,--blue-pale,--white) вже перекриваються вище; тут — решта, інакше .prod-title/.sec-title лишаються чорними на темному. Покриває ВСІ товарні сторінки через product.php. */ :root[data-theme="dark"] { --gray-9: var(--nk-text); --gray-d: var(--nk-text-soft); --blue-l: var(--nk-brand-light); --off: var(--nk-surface-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gray-9: var(--nk-text); --gray-d: var(--nk-text-soft); --blue-l: var(--nk-brand-light); --off: var(--nk-surface-2); } } /* Калькулятор вікон (kalkulyatory/vikna/index.php) визначає власний словник токенів ПРЯМО на .vk (--ink,--mut,--hint,--surf,--bd,--pale) з літеральними світлими значеннями. Оскільки вони задані на .vk, перекривати треба теж на .vk (кореневий :root не дістає). Без цього текст таблиць .vk-tbl td (color успадковує --ink=#111827) чорний на темному тлі — не видно. */ :root[data-theme="dark"] .vk { --ink: var(--nk-text); --mut: var(--nk-text-soft); --hint: var(--nk-text-muted); --surf: var(--nk-surface-2); --pale: var(--nk-brand-pale); --bd: var(--nk-border); --bd2: var(--nk-border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vk { --ink: var(--nk-text); --mut: var(--nk-text-soft); --hint: var(--nk-text-muted); --surf: var(--nk-surface-2); --pale: var(--nk-brand-pale); --bd: var(--nk-border); --bd2: var(--nk-border); } } /* ===================================================================== ТЕМНІ ПАТЧІ ДЛЯ СПІЛЬНОЇ ШАПКИ site-header.css використовує кілька літеральних rgba(0,0,0,…) для рамки/тіні, невидимих на темному. Перекриваємо адресно. ===================================================================== */ :root[data-theme="dark"] header.site-header, :root[data-theme="dark"] .site-mobile-menu { background: var(--sh-surface); } :root[data-theme="dark"] header.site-header { border-bottom-color: var(--nk-border); box-shadow: 0 1px 12px rgba(0,0,0,.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header.site-header, :root:not([data-theme="light"]) .site-mobile-menu { background: var(--sh-surface); } :root:not([data-theme="light"]) header.site-header { border-bottom-color: var(--nk-border); box-shadow: 0 1px 12px rgba(0,0,0,.45); } } /* Футер уже темний (#111827). На темній сторінці додаємо тонку верхню лінію, щоб він не зливався з полотном. */ :root[data-theme="dark"] footer.site-footer { border-top: 1px solid var(--nk-border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) footer.site-footer { border-top: 1px solid var(--nk-border); } } /* ===================================================================== ПЕРЕМИКАЧ ТЕМИ (кнопка в шапці + у мобільному меню) Показує іконку сонця/місяця; активний стан керується theme.js. ===================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--sh-border, #e5e7eb); border-radius: 9px; background: var(--sh-surface-2, #f3f4f6); color: var(--sh-gray-dark, #374151); cursor: pointer; padding: 0; transition: background .18s, color .18s, border-color .18s, transform .15s; } .theme-toggle:hover { color: var(--sh-blue, #1e4a8c); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 2px solid var(--sh-blue, #1e4a8c); outline-offset: 2px; } .theme-toggle svg { width: 19px; height: 19px; display: block; } /* Показуємо потрібну іконку залежно від активної теми. За замовчуванням (світла) — місяць (пропозиція перейти в темну). У темній — сонце. */ .theme-toggle .ti-sun { display: none; } .theme-toggle .ti-moon { display: block; } :root[data-theme="dark"] .theme-toggle .ti-sun { display: block; } :root[data-theme="dark"] .theme-toggle .ti-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .ti-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .ti-moon { display: none; } } /* Мобільний варіант — у рядку з перемикачем мови */ .site-mobile-menu .theme-toggle { width: auto; height: auto; gap: 8px; padding: 10px 14px; border-radius: 8px; font-family: 'Unbounded', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; border-bottom: none; } .site-mobile-menu .theme-toggle .tt-label-dark { display: none; } .site-mobile-menu .theme-toggle .tt-label-light { display: inline; } :root[data-theme="dark"] .site-mobile-menu .theme-toggle .tt-label-dark { display: inline; } :root[data-theme="dark"] .site-mobile-menu .theme-toggle .tt-label-light { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-mobile-menu .theme-toggle .tt-label-dark { display: inline; } :root:not([data-theme="light"]) .site-mobile-menu .theme-toggle .tt-label-light { display: none; } } @media (prefers-reduced-motion: reduce) { html, body { transition: none; } } /* ===================================================================== ЕТАП 3 — ПОЛІРОВКА ===================================================================== */ /* (1) Підкладка фото товарів — світла й у темній темі. Продуктові фото зняті на білому; тримаємо контейнер світлим, щоб фото зливалось, а не «біле фото на майже-чорному». Фото з object-fit:cover повністю перекривають підкладку — їм байдуже; виграють лише «contain». */ :root[data-theme="dark"] :is( .prod-card-img, .rel-card-img, .mat-card-img, .pc-img, .main-photo, .thumb, .pt-media, .qv-media, .gal-thumb, .alt-thumb, .na-img, .rv-card-media, .prod-imgbox, .lb-img, .pt-thumb, .pair-thumb, .p-thumb, .brand-card-logoimg, .na-img img.contain ) { background: var(--nk-photo-bg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is( .prod-card-img, .rel-card-img, .mat-card-img, .pc-img, .main-photo, .thumb, .pt-media, .qv-media, .gal-thumb, .alt-thumb, .na-img, .rv-card-media, .prod-imgbox, .lb-img, .pt-thumb, .pair-thumb, .p-thumb, .brand-card-logoimg, .na-img img.contain ) { background: var(--nk-photo-bg); } } /* (1b) Логотипи виробників (OMAN, VELUX, IKO, JUTA, Tyvek, ROCKWOOL…) — переважно чорна графіка на прозорому фоні, зроблена під світлий сайт. На темному вони зливаються. Тримаємо їх на світлому чіпі. • Контейнери, де ЛИШЕ логотип (мали background:var(--white)/off-white) — фарбуємо контейнер. • .brand-logo-box містить і логотип, і текст-підпис поруч → світлий чіп даємо ТІЛЬКИ img, щоб не сховати світлий підпис. НЕ чіпаємо hero-логотипи (.page-hero-logo/.prod-hero-logo) — вони на кольоровому банері й зазвичай у білій версії. */ :root[data-theme="dark"] :is(.brand-card-logoimg, .prod-brand-logo, .cat-card-logo) { background: var(--nk-photo-bg); } :root[data-theme="dark"] :is(.brand-logo-box img, .brand-logo img, .is-logo, .vf-brand-logo) { background: var(--nk-photo-bg); border-radius: 6px; padding: 4px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.brand-card-logoimg, .prod-brand-logo, .cat-card-logo) { background: var(--nk-photo-bg); } :root:not([data-theme="light"]) :is(.brand-logo-box img, .brand-logo img, .is-logo, .vf-brand-logo) { background: var(--nk-photo-bg); border-radius: 6px; padding: 4px; } } /* (2) Тіні на темному майже невидимі (rgba(0,0,0,.0X)). Робимо їх глибшими для типових карток/спливаючих панелей — щоб зберігалась глибина, а не лише рамка. Ловимо найпоширеніші класи з тінями. */ :root[data-theme="dark"] :is( .prod-card, .mat-card, .rel-card, .rv-card, .pc-card, .na-card, .qv-panel, .lb-box, .site-faq .faq-item[open], .rb-card, .h-cart-mini, .nav-dropdown ) { box-shadow: 0 12px 32px rgba(0,0,0,.5) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is( .prod-card, .mat-card, .rel-card, .rv-card, .pc-card, .na-card, .qv-panel, .lb-box, .site-faq .faq-item[open], .rb-card, .h-cart-mini, .nav-dropdown ) { box-shadow: 0 12px 32px rgba(0,0,0,.5) !important; } }