/* ───────────────────────────────────────────────────────────────────────── * dark-theme.css — тёмная тема для главных static-страниц * (main.html «/», index-new.html «/family», couples.html «/couples», * gallery-new.html). Активируется атрибутом data-theme="dark" на , * который ставит анти-FOUC inline-сниппет в ДО отрисовки. * * ПРИНЦИП: светлая тема НЕ затрагивается. Здесь только переопределения под * :root[data-theme="dark"] (специфичность 0,2,0 перебивает :root / голые * селекторы независимо от порядка подключения). Значения тёмной палитры — * те же, что в landings-routes.js (warm-dark под бренд cream/teal/amber), * чтобы вся тёмная тема сайта была единой. * ───────────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --teal: #3fb5ab; --teal-dark: #2f9a90; --teal-light: rgba(63,181,171,0.13); --teal-600: #2dd4bf; --teal-700: #5eead4; --amber: #e0b955; --amber-light: rgba(212,168,67,0.15); --amber-dark: #caa23c; --cta: #f59e0b; --cream: #1c1913; --gray-100: #2a261d; --gray-200: rgba(255,255,255,0.10); --gray-400: #968f81; --gray-500: #ada695; --gray-600: #c6c0b2; --gray-700: #e4dfd4; --gray-800: #f6f2ea; --shadow-sm: 0 2px 8px rgba(0,0,0,0.45); --shadow-md: 0 4px 20px rgba(0,0,0,0.55); --shadow-lg: 0 8px 40px rgba(0,0,0,0.66); --surface: #383228; --surface-2: #454033; } /* Защита для no-JS: системная тёмная, если атрибут не выставлен скриптом */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --teal: #3fb5ab; --teal-dark: #2f9a90; --teal-light: rgba(63,181,171,0.13); --teal-600: #2dd4bf; --teal-700: #5eead4; --amber: #e0b955; --amber-light: rgba(212,168,67,0.15); --amber-dark: #caa23c; --cta: #f59e0b; --cream: #1c1913; --gray-100: #2a261d; --gray-200: rgba(255,255,255,0.10); --gray-400: #968f81; --gray-500: #ada695; --gray-600: #c6c0b2; --gray-700: #e4dfd4; --gray-800: #f6f2ea; --shadow-sm: 0 2px 8px rgba(0,0,0,0.45); --shadow-md: 0 4px 20px rgba(0,0,0,0.55); --shadow-lg: 0 8px 40px rgba(0,0,0,0.66); --surface: #383228; --surface-2: #454033; } } /* Большинство UI на этих страницах — классы -tz, читающие var(--cream)/ var(--gray-*) → ремап выше темизирует их автоматически. Ниже — точечные переопределения хардкод-светлых поверхностей из Stile.css / inline-styles.css. */ /* body — на случай если Stile.css body{background:#fff} где-то перебивает страничный inline body{background:var(--cream)} (belt-and-suspenders) */ :root[data-theme="dark"] body { background: var(--cream); color: var(--gray-700); } /* Карточки/панели из Stile.css (часть используется на /family, /couples) */ :root[data-theme="dark"] .room-card, :root[data-theme="dark"] .service-card, :root[data-theme="dark"] .review-card, :root[data-theme="dark"] .contact-info, :root[data-theme="dark"] .map-container { background: var(--surface); } :root[data-theme="dark"] .service-card:hover { background: var(--surface-2); } /* Легаси мобильное меню (основное — .mobile-nav-tz на токенах) */ :root[data-theme="dark"] .mobile-menu { background: var(--cream); } /* Cookie-баннер 152-ФЗ (рантайм-инъекция cookies.js, фиксированный оверлей). Контейнер — в тёмный; кнопки оставляем как есть (белая кнопка на тёмном баннере = достаточный контраст, не ломаем 152-ФЗ-UX). */ :root[data-theme="dark"] .cookie-banner { background: var(--surface-2); color: var(--gray-700); border-color: var(--gray-200); } :root[data-theme="dark"] .cookie-banner a { color: var(--teal); } /* ── Хардкод-светлые поверхности в inline-