/* ═══════════════════════════════════════════════════════════════════════════ 🌙 ТЕМНА ТЕМА ВІТРИНИ Той самий набір токенів, що й у palette-client.css, лише інші значення. Компоненти нічого про тему не знають — вони читають токени, тож достатньо перевизначити їх тут. Вмикається ЛИШЕ вручну (рішення власника 10.09.2026): системну тему не слухаємо, тому ніякого @media (prefers-color-scheme) тут немає. Перемикач ставить data-theme="dark" на , значення живе в localStorage. ⚠️ Кольори виведені з фірмових, не вигадані: той самий теплий відтінок. Уроки з міграції палітри діють і тут — синій канал дає бруд, а зелений, що дорівнює червоному, дає оливу. 📏 Історія вибору (три підходи): 1. «Тепла кава» (#1a1310) — «занадто темна» й «вирвиглазна». 2. «Графіт» (#201d1a) — теплий сірий, акцент приглушено двічі на прохання «мʼякше». Вийшло рівно, але власнику все одно не подобалось, і причина зрозумілась лише з референсу: ТЕПЛЕ тло + ПРИГЛУШЕНИЙ теплий акцент надто близькі один до одного, тому сторінка виглядала каламутною. 3. Нинішній варіант — за референсом: тло майже чорне й НЕЙТРАЛЬНЕ (#121316), зате акцент повнокровний (#E8672A). Контраст дає не яскравість тла, а різниця «холодне тло / теплий акцент». Картки помітно світліші за тло, тому читається глибина. Фото більше не гасимо — на такому тлі саме вони мають бути живими плямами. Контраст: текст 15,8:1, приглушений 7,1:1, акцент-текст 7,4:1, напис на кнопці 4,6:1 при нормі 4,5. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { /* ── Площини ── */ --color-bg: #23272E; /* тло — сірий графіт, помітно світліший за чорний */ --color-bg-alt: #2A2F37; /* смуги, чергування */ --color-surface: #30353E; /* картки, попапи, поля */ --color-border: #434A55; /* Темні площини світлої теми (шапка, підвал) у темній мають бути ЩЕ темнішими за тло — інакше вони зникають і сторінка стає однією суцільною плямою. */ --color-primary: #1B1E23; --color-secondary: #262A31; --color-brown-soft: #2B3038; --color-brown-mid: #7E858F; --color-ink-deep: #15181C; /* ── Текст ── 14,6:1 на тлі — з запасом; приглушений 6,3:1 — вище норми 4,5. */ --color-text: #F4F6F9; --color-text-muted: #A6ADB8; --color-text-soft: #8B939F; /* ── Акцент ── Фірмовий #b35d32 на темному дає лише 2,9:1 — не читається. Тому акцент СВІТЛІШАЄ, а кнопки перевертаються: помаранчеве тло + ТЕМНИЙ текст (6,0:1). Білий текст на #c85f3d дав би 4,1:1 і норму не пройшов. 11.09: після «дуже контрастно» акцент приглушено вдвічі, а з переходом на «Графіт» — зсунуто в ТЕПЛО (відтінок ≈24°), не в яскравість. Заливки (кнопки) і текст (ціни, посилання) — різні токени: текст на картці мусить давати 4,5, заливка з темним написом — ні, тому вона глибша. */ --color-accent: #FF7A38; /* заливки: кнопки, бейджі — насичений */ --color-accent-hover: #FF8C50; --color-accent-ink: #FF9560; /* текст: ціни, посилання — 7,4:1 на тлі */ --color-accent-pure: #FF9560; --color-accent-deep: #D9561C; --color-on-accent: #1A1206; /* ТЕМНИЙ напис поверх яскравого помаранчевого — 5,8:1 */ --color-sand: #E0A96B; --color-sand-soft: #3A3128; /* пісочний як ПІДКЛАДКА має темніти */ --color-white: #FFFFFF; /* чистий білий там, де він саме білий */ /* ── Трійки для прозорості ── */ --color-accent-rgb: 255 122 56; --color-accent-work-rgb: 255 122 56; --color-primary-rgb: 27 30 35; --color-ink-deep-rgb: 21 24 28; /* ── Тіні ── На темному тлі тінь не читається взагалі. Замінюємо її ледь помітним світлим контуром — він дає ту саму «підняту» відчутність. */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); --shadow-md: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05); --shadow-lg: 0 18px 46px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.06); color-scheme: dark; /* нативні контроли, скролбари й автозаповнення теж темніють */ } /* ── Семантичні статуси ── Світлі тінти успіху/попередження/помилки на темному сліпнуть: сам тінт стає яскравішим за тло, а темний текст на ньому лишається темним. Перевертаємо: тло — глибокий відтінок того ж кольору, текст — світлий. */ :root[data-theme="dark"] { --color-success-bg: #12261a; --color-success-fg: #6fd88c; --color-success-border: #1e4430; --color-warning-bg: #2b2212; --color-warning-fg: #f0c460; --color-warning-border: #4a3a1c; --color-danger-bg: #2b1618; --color-danger-fg: #ff8f88; --color-danger-border: #4a2426; --color-info-bg: #12242e; --color-info-fg: #77c7e8; --color-info-border: #1f3f52; --color-muted-bg: #2A2F37; --color-muted-fg: #9AA1AC; /* Сильні варіанти (без суфікса) лишались світлотемними — а їх беруть як КОЛІР ТЕКСТУ: «Промокод застосовано», помилка входу через Google, крок чекауту «пройдено». Насичений #dc2626 на майже чорному дає 3,1:1 при нормі 4,5. Освітлюємо рівно настільки, щоб читалось: 5,4-8,6:1. */ --color-success: #4ade80; --color-warning: #fbbf24; --color-danger: #ff6b61; --color-info: #60a5fa; } /* ── Сирі червоні/зелені, вписані числом в inline-стилі ─────────────────────── Помилки форм і «Немає в наявності» пишуться з JS рядком `color:#e53935`. Inline-стиль не перебити нічим, окрім такого ж inline або !important за атрибутом — тому ловимо саме за вмістом style. Ці стани зʼявляються лише після дії користувача, тому жоден прохід по готовій сторінці їх не бачить. */ :root[data-theme="dark"] [style*="color:#e53935"], :root[data-theme="dark"] [style*="color:#dc2626"], :root[data-theme="dark"] [style*="color:#c0392b"], :root[data-theme="dark"] [style*="color:#c62828"], :root[data-theme="dark"] [style*="color: #e53935"], :root[data-theme="dark"] [style*="color: #dc2626"] { color: var(--color-danger-fg) !important; } :root[data-theme="dark"] [style*="color:#2e7d32"], :root[data-theme="dark"] [style*="color:#166534"], :root[data-theme="dark"] [style*="color: #166534"] { color: var(--color-success-fg) !important; } /* ── Дрібниці, які токенами не покриваються ── */ :root[data-theme="dark"] { /* Фото НЕ гасимо. На теплому графіті вони світили як ліхтарі, і ми їх приглушували; на майже чорному нейтральному тлі знімок — навпаки, головна жива пляма, і будь-яке приглушення робить сторінку сірою. */ --img-dim: 1; } /* Плашка логотипа лишається світлим лок-апом — шапка темна в обох темах. */ /* Скролбар під тему. */ :root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-bg-alt); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4A515C; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #59616D; } /* Фірмовий зелений LiqPay (#4e8a1e) на темному тлі дає 2,9:1 — нижче норми. У світлій темі лишаємо колір платіжної системи як є, тут освітлюємо. */ :root[data-theme="dark"] .nyt-liqpay { color: #8FD14F !important; } /* ── Кольори, вписані ЧИСЛОМ у inline-стилі ───────────────────────────────── Повідомлення «під захистом», «під замовлення», статус доставки, промокод, бейдж події, помилка входу — усе це маленькі кольорові плашки, які код малює рядком: background:#fff7ed. Такий стиль не перебити нічим, окрім правила за вмістом атрибута. У світлій темі вони правильні, у темній — білі плитки з нечитабельним написом. Показуються лише за певних даних, тому жоден прохід по свіжій сторінці їх не бачить: знайдено перебором коду. Кольорові зразки товару (#ffeb3b «Жовтий») НЕ чіпаємо — там hex і є змістом. */ :root[data-theme="dark"] [style*="background:#fff7ed"], :root[data-theme="dark"] [style*="background: #fff7ed"], :root[data-theme="dark"] [style*="background:#fff8e1"], :root[data-theme="dark"] [style*="background: #fff8e1"], :root[data-theme="dark"] [style*="background:#fff3c4"], :root[data-theme="dark"] [style*="background: #fff3c4"], :root[data-theme="dark"] [style*="background:#fffbeb"], :root[data-theme="dark"] [style*="background: #fffbeb"], :root[data-theme="dark"] [style*="background:#fef3c7"], :root[data-theme="dark"] [style*="background: #fef3c7"], :root[data-theme="dark"] [style*="background-color:#fff7ed"], :root[data-theme="dark"] [style*="background-color: #fff7ed"], :root[data-theme="dark"] [style*="background-color:#fff8e1"], :root[data-theme="dark"] [style*="background-color: #fff8e1"], :root[data-theme="dark"] [style*="background-color:#fff3c4"], :root[data-theme="dark"] [style*="background-color: #fff3c4"], :root[data-theme="dark"] [style*="background-color:#fffbeb"], :root[data-theme="dark"] [style*="background-color: #fffbeb"], :root[data-theme="dark"] [style*="background-color:#fef3c7"], :root[data-theme="dark"] [style*="background-color: #fef3c7"] { background-color: var(--color-warning-bg) !important; } :root[data-theme="dark"] [style*="background:#f0faf0"], :root[data-theme="dark"] [style*="background: #f0faf0"], :root[data-theme="dark"] [style*="background:#f8fdf8"], :root[data-theme="dark"] [style*="background: #f8fdf8"], :root[data-theme="dark"] [style*="background:#f5f8f6"], :root[data-theme="dark"] [style*="background: #f5f8f6"], :root[data-theme="dark"] [style*="background:#eef7f0"], :root[data-theme="dark"] [style*="background: #eef7f0"], :root[data-theme="dark"] [style*="background:#e8f5e9"], :root[data-theme="dark"] [style*="background: #e8f5e9"], :root[data-theme="dark"] [style*="background:#ecfdf5"], :root[data-theme="dark"] [style*="background: #ecfdf5"], :root[data-theme="dark"] [style*="background-color:#f0faf0"], :root[data-theme="dark"] [style*="background-color: #f0faf0"], :root[data-theme="dark"] [style*="background-color:#f8fdf8"], :root[data-theme="dark"] [style*="background-color: #f8fdf8"], :root[data-theme="dark"] [style*="background-color:#f5f8f6"], :root[data-theme="dark"] [style*="background-color: #f5f8f6"], :root[data-theme="dark"] [style*="background-color:#eef7f0"], :root[data-theme="dark"] [style*="background-color: #eef7f0"], :root[data-theme="dark"] [style*="background-color:#e8f5e9"], :root[data-theme="dark"] [style*="background-color: #e8f5e9"], :root[data-theme="dark"] [style*="background-color:#ecfdf5"], :root[data-theme="dark"] [style*="background-color: #ecfdf5"] { background-color: var(--color-success-bg) !important; } :root[data-theme="dark"] [style*="background:#eef7ff"], :root[data-theme="dark"] [style*="background: #eef7ff"], :root[data-theme="dark"] [style*="background:#eef2ff"], :root[data-theme="dark"] [style*="background: #eef2ff"], :root[data-theme="dark"] [style*="background:#eef6ff"], :root[data-theme="dark"] [style*="background: #eef6ff"], :root[data-theme="dark"] [style*="background:#ede9fe"], :root[data-theme="dark"] [style*="background: #ede9fe"], :root[data-theme="dark"] [style*="background:#fbf1ff"], :root[data-theme="dark"] [style*="background: #fbf1ff"], :root[data-theme="dark"] [style*="background:#eff6ff"], :root[data-theme="dark"] [style*="background: #eff6ff"], :root[data-theme="dark"] [style*="background-color:#eef7ff"], :root[data-theme="dark"] [style*="background-color: #eef7ff"], :root[data-theme="dark"] [style*="background-color:#eef2ff"], :root[data-theme="dark"] [style*="background-color: #eef2ff"], :root[data-theme="dark"] [style*="background-color:#eef6ff"], :root[data-theme="dark"] [style*="background-color: #eef6ff"], :root[data-theme="dark"] [style*="background-color:#ede9fe"], :root[data-theme="dark"] [style*="background-color: #ede9fe"], :root[data-theme="dark"] [style*="background-color:#fbf1ff"], :root[data-theme="dark"] [style*="background-color: #fbf1ff"], :root[data-theme="dark"] [style*="background-color:#eff6ff"], :root[data-theme="dark"] [style*="background-color: #eff6ff"] { background-color: var(--color-info-bg) !important; } :root[data-theme="dark"] [style*="background:#eceff1"], :root[data-theme="dark"] [style*="background: #eceff1"], :root[data-theme="dark"] [style*="background:#f3f4f6"], :root[data-theme="dark"] [style*="background: #f3f4f6"], :root[data-theme="dark"] [style*="background-color:#eceff1"], :root[data-theme="dark"] [style*="background-color: #eceff1"], :root[data-theme="dark"] [style*="background-color:#f3f4f6"], :root[data-theme="dark"] [style*="background-color: #f3f4f6"] { background-color: var(--color-muted-bg) !important; } :root[data-theme="dark"] [style*="background:#fdecea"], :root[data-theme="dark"] [style*="background: #fdecea"], :root[data-theme="dark"] [style*="background:#fff5f6"], :root[data-theme="dark"] [style*="background: #fff5f6"], :root[data-theme="dark"] [style*="background:#ffe0e5"], :root[data-theme="dark"] [style*="background: #ffe0e5"], :root[data-theme="dark"] [style*="background:#fef2f2"], :root[data-theme="dark"] [style*="background: #fef2f2"], :root[data-theme="dark"] [style*="background:#fff1f2"], :root[data-theme="dark"] [style*="background: #fff1f2"], :root[data-theme="dark"] [style*="background-color:#fdecea"], :root[data-theme="dark"] [style*="background-color: #fdecea"], :root[data-theme="dark"] [style*="background-color:#fff5f6"], :root[data-theme="dark"] [style*="background-color: #fff5f6"], :root[data-theme="dark"] [style*="background-color:#ffe0e5"], :root[data-theme="dark"] [style*="background-color: #ffe0e5"], :root[data-theme="dark"] [style*="background-color:#fef2f2"], :root[data-theme="dark"] [style*="background-color: #fef2f2"], :root[data-theme="dark"] [style*="background-color:#fff1f2"], :root[data-theme="dark"] [style*="background-color: #fff1f2"] { background-color: var(--color-danger-bg) !important; } :root[data-theme="dark"] [style*="color:#78350f"], :root[data-theme="dark"] [style*="color: #78350f"], :root[data-theme="dark"] [style*="color:#9a3412"], :root[data-theme="dark"] [style*="color: #9a3412"], :root[data-theme="dark"] [style*="color:#b45309"], :root[data-theme="dark"] [style*="color: #b45309"] { color: var(--color-warning-fg) !important; } :root[data-theme="dark"] [style*="color:#1b5e20"], :root[data-theme="dark"] [style*="color: #1b5e20"], :root[data-theme="dark"] [style*="color:#047857"], :root[data-theme="dark"] [style*="color: #047857"], :root[data-theme="dark"] [style*="color:#065f46"], :root[data-theme="dark"] [style*="color: #065f46"], :root[data-theme="dark"] [style*="color:#2e7d32"], :root[data-theme="dark"] [style*="color: #2e7d32"], :root[data-theme="dark"] [style*="color:#4e8a1e"], :root[data-theme="dark"] [style*="color: #4e8a1e"], :root[data-theme="dark"] [style*="color:#4a6a55"], :root[data-theme="dark"] [style*="color: #4a6a55"] { color: var(--color-success-fg) !important; } :root[data-theme="dark"] [style*="color:#dc2626"], :root[data-theme="dark"] [style*="color: #dc2626"], :root[data-theme="dark"] [style*="color:#e53935"], :root[data-theme="dark"] [style*="color: #e53935"], :root[data-theme="dark"] [style*="color:#c62828"], :root[data-theme="dark"] [style*="color: #c62828"], :root[data-theme="dark"] [style*="color:#c0392b"], :root[data-theme="dark"] [style*="color: #c0392b"], :root[data-theme="dark"] [style*="color:#9d174d"], :root[data-theme="dark"] [style*="color: #9d174d"], :root[data-theme="dark"] [style*="color:#db2777"], :root[data-theme="dark"] [style*="color: #db2777"], :root[data-theme="dark"] [style*="color:#e0457b"], :root[data-theme="dark"] [style*="color: #e0457b"], :root[data-theme="dark"] [style*="color:#991b1b"], :root[data-theme="dark"] [style*="color: #991b1b"] { color: var(--color-danger-fg) !important; } :root[data-theme="dark"] [style*="color:#075985"], :root[data-theme="dark"] [style*="color: #075985"], :root[data-theme="dark"] [style*="color:#3730a3"], :root[data-theme="dark"] [style*="color: #3730a3"], :root[data-theme="dark"] [style*="color:#1d4ed8"], :root[data-theme="dark"] [style*="color: #1d4ed8"], :root[data-theme="dark"] [style*="color:#8e2a92"], :root[data-theme="dark"] [style*="color: #8e2a92"], :root[data-theme="dark"] [style*="color:#5b21b6"], :root[data-theme="dark"] [style*="color: #5b21b6"], :root[data-theme="dark"] [style*="color:#1e40af"], :root[data-theme="dark"] [style*="color: #1e40af"] { color: var(--color-info-fg) !important; } :root[data-theme="dark"] [style*="color:#546e7a"], :root[data-theme="dark"] [style*="color: #546e7a"], :root[data-theme="dark"] [style*="color:#78909c"], :root[data-theme="dark"] [style*="color: #78909c"], :root[data-theme="dark"] [style*="color:#33414f"], :root[data-theme="dark"] [style*="color: #33414f"] { color: var(--color-text-muted) !important; } :root[data-theme="dark"] [style*="#fcd34d"], :root[data-theme="dark"] [style*="#fde68a"], :root[data-theme="dark"] [style*="#fed7aa"], :root[data-theme="dark"] [style*="#ffe082"] { border-color: var(--color-warning-border) !important; } :root[data-theme="dark"] [style*="#c8e6c9"], :root[data-theme="dark"] [style*="#86efac"], :root[data-theme="dark"] [style*="#a7f3d0"], :root[data-theme="dark"] [style*="#bbf7d0"], :root[data-theme="dark"] [style*="#cfe8d6"] { border-color: var(--color-success-border) !important; } :root[data-theme="dark"] [style*="#b3d4f0"], :root[data-theme="dark"] [style*="#cfe4fb"], :root[data-theme="dark"] [style*="#bae6fd"], :root[data-theme="dark"] [style*="#bfdbfe"] { border-color: var(--color-info-border) !important; } :root[data-theme="dark"] [style*="#fbcfe8"], :root[data-theme="dark"] [style*="#fca5a5"], :root[data-theme="dark"] [style*="#fecaca"] { border-color: var(--color-danger-border) !important; } /* ── 13.09: місця з перевірки на проді ───────────────────────────────────────── Бульбашки чату: своя була яскраво-помаранчевою з білим написом — у темній темі приглушений теплий тон і світлий текст; чужа — не світла плита, а смуга. */ :root[data-theme="dark"] { --chat-me-bg: #56321f; --chat-me-fg: var(--color-text); --chat-other-bg: var(--color-bg-alt); } /* Кремові картки (бонуси на паузі, картка бонусів, сертифікат у гіді, герой сертифіката, банер спільного вішліста): світлий градієнт на темній сторінці світив плямою. */ :root[data-theme="dark"] .nyt-cream-card, :root[data-theme="dark"] [style*="linear-gradient(135deg,#fff8e1"], :root[data-theme="dark"] .gift-hero, :root[data-theme="dark"] #shared-wishlist-banner { background: linear-gradient(135deg, var(--color-surface), var(--color-bg-alt)) !important; border-color: var(--color-warning-border) !important; } :root[data-theme="dark"] .nyt-cream-card [style*="--color-accent-deep"], :root[data-theme="dark"] [style*="linear-gradient(135deg,#fff8e1"] [style*="--color-accent-deep"], :root[data-theme="dark"] .gift-hero [style*="--color-accent-deep"] { color: var(--color-accent) !important; } /* Стиліст: бузкові стрічка, перки й блок аналізу були світлими. */ :root[data-theme="dark"] .st-hero__ribbon { background: color-mix(in srgb, #a855f7 18%, var(--color-surface)); border-color: #5b3f73; color: #d8b4fe; } :root[data-theme="dark"] .st-perk { border-color: #4a3a5c; } :root[data-theme="dark"] .st-analysis { background: color-mix(in srgb, #a855f7 10%, var(--color-surface)); border-color: #4a3a5c; } /* Скелетон блогу. */ :root[data-theme="dark"] .skeleton-line { background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-bg-alt) 50%, var(--color-surface) 75%); background-size: 200% 100%; }