/* ═══════════════════════════════════════════════════════════════════════════ GOODWOODHOME — КОЛЬОРОВА СИСТЕМА І ДВІ ТЕМИ Midnight Emerald · Botanical Dark Luxury ЩО ЦЕ ===== Єдине джерело кольору для всього сайту. Файл підключається ПЕРЕД site.css і calculator.css і працює у три яруси: Ярус 1 · СИРА ПАЛІТРА (:root) — смарагд, онікс, латунь, устриця, камінь. Не залежить від теми. У компонентах напряму НЕ вживається. Ярус 2 · СЕМАНТИКА (html[data-theme=…]) — --bg-primary, --text-primary, --accent-primary тощо. Саме її читають нові компоненти. Ярус 3 · СУМІСНІСТЬ — старі змінні сайту (--gold, --dark, --paper, --ink…) перевизначені через семантику. ЧОМУ ЯРУС 3 — ГОЛОВНИЙ ТЕХНІЧНИЙ ХІД ==================================== Ці сімнадцять змінних уже вжиті в site.css і calculator.css близько 300 разів: у кнопках, картках, межах, іконках, полях, модалках, футері. Переписати кожне з тих правил на нові імена означало б триста шансів щось зламати заради нульового візуального ефекту. Замість цього ми лишаємо правила недоторканими і міняємо ЗНАЧЕННЯ, які вони читають. Одна декларація перефарбовує весь сайт, і та сама декларація перемикає його між темами. ПРО ПРІОРИТЕТ СЕЛЕКТОРІВ ======================== html[data-theme="…"] має вагу (0,1,1) — вищу за :root (0,1,0) у site.css, тож порядок підключення файлів на результат не впливає. Але вага збігається з body[data-page="home"], тому будь-який палітровий блок із такою вагою в site.css мусив бути прибраний — інакше на головній він перекривав би тему просто тому, що лежить у файлі нижче. ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── ЯРУС 1 · СИРА ПАЛІТРА ─────────────────────────────────────────────────────────────────────────── */ :root{ /* Смарагд. Це не «зелений колір» у звичному сенсі: 950 і 900 читаються оком як чорний, і лише при уважному погляді в них проступає хвоя. Саме на цьому тримається вся ідея — темрява, яка виявляється зеленою. */ /* Ramp зсунуто глибше: попередні значення при денному світлі читались уже як «темно-зелений сайт», а задум був інший — темрява, у якій зелень лише вгадується. Різниця між сусідніми щаблями збережена (близько 4% яскравості), тож чергування секцій лишилось таким самим виразним, просто все воно відбувається на два тони нижче. */ --emerald-950:#050D0A; --emerald-900:#08120E; --emerald-850:#0C1813; --emerald-800:#111F19; --emerald-700:#1B2C24; /* Онікс — нейтральна майже-чорна пара до смарагду. Потрібен, щоб чергування секцій не було монотонним: смарагд поруч зі смарагдом дає різницю в тоні, смарагд поруч з оніксом — ще й у температурі. */ /* Онікс опущено слідом за смарагдом: інакше «нейтральна майже-чорна пара» виявилась би СВІТЛІШОЮ за нього, і чергування секцій перевернулось би. */ --onyx-950:#070807; --onyx-900:#0B0D0C; --onyx-800:#121514; /* Латунь, а не «золото»: приглушена, з сірою складовою, без блиску. */ --gold-600:#A9874F; --gold-500:#B9975B; --gold-400:#C9AA70; --gold-soft:#D5BC8A; /* Глибша латунь — для золотого ТЕКСТУ на світлому фоні. Значення підібране не на око, а за найтемнішим світлим фоном системи (--oyster-200 #E7E1D7): на ньому #A9874F дає 2.58:1, #8A6C3D — 3.76:1, і лише #785D33 переходить поріг 4.5. Це той самий брендовий тон, зсунутий рівно до читабельності. */ --gold-700:#785D33; /* Устриця й камінь — тепла світла група. Чистого білого в системі немає навмисно: він одразу читається як корпоративний інтерфейс. */ --oyster-50:#F7F3EC; --oyster-100:#F1EDE5; --oyster-200:#E7E1D7; --oyster-300:#D8D0C3; --stone-400:#B6AEA1; /* Натуральні відтінки для дрібних акцентів і службових станів. */ --moss-muted:#47574B; --walnut:#5A4638; --warm-grey:#8B857B; /* Текстові тони світлої теми — темний смарагд замість чорного. */ --ink-900:#17211D; --ink-600:#536059; /* #77766F давав на --oyster-200 лише 3.51:1, а ним набрані характеристики карток, підпис ціни й мітки «підходить для» — тобто дрібний текст, якому потрібні всі 4.5. */ --ink-400:#5F5E58; } /* ─────────────────────────────────────────────────────────────────────────── ЯРУС 2 + 3 · ТЕМНА ТЕМА (основна презентація бренду) ─────────────────────────────────────────────────────────────────────────── */ /* html:not([data-theme]) — запобіжник для випадку, коли JS вимкнено або не виконався: сторінка все одно приходить у брендовій темній темі, а не голою. Атрибут навмисно НЕ прописаний у самій розмітці : перевірка 9b звіряє тег посимвольно (``), і зайвий атрибут її б завалив. */ html[data-theme="dark"], html:not([data-theme]){ color-scheme:dark; /* ── Поверхні ── */ --bg-primary:var(--emerald-900); --bg-secondary:var(--emerald-850); --bg-elevated:var(--emerald-800); --bg-muted:var(--emerald-950); --bg-deep:var(--onyx-900); --bg-deepest:var(--onyx-950); --surface-card:var(--emerald-800); --surface-card-hover:var(--emerald-700); /* ── Текст ── */ --text-primary:var(--oyster-100); --text-secondary:var(--oyster-300); --text-muted:#A9A297; --text-on-accent:var(--emerald-950); /* ── Межі ── Напівпрозорі, а не суцільні: на п'яти різних темних фонах суцільна межа виглядала б то занадто світлою, то невидимою. */ --border-subtle:rgba(241,237,229,0.12); --border-strong:rgba(241,237,229,0.22); --border-accent:rgba(185,151,91,0.34); /* ── Акцент ── */ --accent-primary:var(--gold-500); --accent-hover:var(--gold-400); --accent-quiet:var(--gold-400); /* Чорнило ПО акценту — для випадків, коли акцент стає заливкою, а не текстом. У темній темі акцент світлий (латунь gold-500), тож напис на ньому темний. Пара мусить жити поряд із самим акцентом: варто перефарбувати один — і другий видно одразу, інакше виходить білий напис на світлому золоті. */ --accent-ink:var(--emerald-950); /* ── Кнопки ── */ --button-primary-bg:var(--gold-500); --button-primary-text:var(--emerald-950); --button-primary-hover:var(--gold-400); --button-secondary-bg:transparent; --button-secondary-border:rgba(241,237,229,0.30); /* ── Поля вводу ── */ --field-bg:rgba(7,21,17,0.55); --field-border:rgba(241,237,229,0.18); /* ── Службове ── */ --overlay-hero:rgba(7,21,17,0.62); --shadow-color:rgba(0,0,0,0.55); --shadow-card:0 18px 40px rgba(0,0,0,0.38); /* Тон шапки = емеральд-900, найтемніший тон фонової текстури лісу: композит підкладки (гасник 82% поверх screen-знімка) у найтемніших місцях сходиться рівно до #08120E, і світліша смуга rgba(11,28,23) читалась на ньому як чужорідна панель поверх фото (зауваження власника, 2026-08-18). */ /* НЕПРОЗОРА (власниця, 2026-08-22). Було 0.9 — і десяти відсотків вистачало, щоб заголовок секції, який проходить під шапкою, просвічував крізь неї й змішувався з логотипом. Прокручена шапка — це панель, а не серпанок; там, де вона лежить поверх кадру, її прозорість дає не легкість, а брудний стик. Стан «поверх героя» лишається прозорим — там під нею нічого немає, крім самого фото. */ --nav-bg-scrolled:rgb(8,18,14); --scrollbar-thumb:rgba(241,237,229,0.18); --scrollbar-track:rgba(241,237,229,0.05); /* ── ТЕКСТУРА: ГУСТИЙ ЛІС ── Пара до каменю у світлій темі: там знімок поверхні, тут — знімок крон згори (вибір власниці, 2026-08-12: кандидат D6, без туману й неба — самі дерева). Процедурні плями давали масу, але не давали рисунка: маса без гілок читається як віньєтка, а не як ліс. ДВА ШАРИ, І ЦЕ ГОЛОВНЕ Знімок висвітлює смарагд (screen) — тільки так на майже чорному тлі взагалі щось видно: multiply дав би чорне на чорному, soft-light на такому темному тлі не зрушує нічого. Але сам screen задирає світлі ділянки крон до сірих плям, тому ЗВЕРХУ лягає той самий смарагд на 62% — він притискає весь результат назад у темряву рівномірно, зберігаючи рисунок. Це і є регулятор сили: одне число замість перезбирання файлу. Порядок шарів у CSS зверху вниз, тож у списку спершу притискач, потім знімок; blend-mode перелічені в тому ж порядку. */ --bg-texture: linear-gradient(rgba(8,18,14,0.82),rgba(8,18,14,0.82)), url("/assets/images/bg/forest-canopy.jpg"); --bg-texture-size:cover,cover; --bg-texture-blend:normal,screen; --bg-texture-position:center,center; --bg-texture-attachment:fixed,fixed; /* ── ЯРУС 3 · старі змінні сайту ── */ --gold:var(--gold-500); --gold-lt:var(--gold-400); --gold-deep:var(--gold-400); /* на темному «глибоке» золото має бути СВІТЛІШИМ */ --dark:var(--emerald-900); --dark2:var(--emerald-850); --dark3:var(--emerald-800); --warm:var(--emerald-800); --text:var(--oyster-100); --text-60:var(--oyster-300); --text-40:#A9A297; --border:rgba(241,237,229,0.12); /* «Паперові» секції в темній темі — не папір, а онікс: та сама роль «інша поверхня», але в темній гамі. Розмітку це не чіпає. */ --paper:var(--onyx-900); --paper-2:var(--emerald-850); --ink:var(--oyster-100); --ink-60:var(--oyster-300); --ink-40:#A9A297; --paper-border:rgba(241,237,229,0.12); } /* ─────────────────────────────────────────────────────────────────────────── ЯРУС 2 + 3 · СВІТЛА ТЕМА Тепла, природна, не «біла корпоративна». Основа — устриця й льон. ─────────────────────────────────────────────────────────────────────────── */ html[data-theme="light"]{ color-scheme:light; --bg-primary:var(--oyster-100); --bg-secondary:var(--oyster-200); --bg-elevated:var(--oyster-50); --bg-muted:var(--oyster-300); --bg-deep:var(--emerald-850); --bg-deepest:var(--emerald-950); --surface-card:var(--oyster-50); --surface-card-hover:#FBF8F2; --text-primary:var(--ink-900); --text-secondary:var(--ink-600); --text-muted:var(--ink-400); --text-on-accent:var(--oyster-100); --border-subtle:rgba(22,35,29,0.14); --border-strong:rgba(22,35,29,0.26); --border-accent:rgba(169,135,79,0.42); /* На світлому акцент темніє: латунь #B9975B дає на устриці лише 3.2:1, а --gold-600 (#A9874F) — 2.58:1. Для тексту працює тільки --gold-700. */ --accent-primary:var(--gold-700); --accent-hover:var(--gold-700); --accent-quiet:var(--gold-700); /* Тут акцент, навпаки, ТЕМНИЙ (gold-700 — та сама латунь, що дає 4.5:1 на устриці), тож заливка ним вимагає СВІТЛОГО напису. Пара до --accent-primary вище — див. пояснення в темній темі. */ --accent-ink:var(--oyster-100); /* Головна кнопка світлої теми — темний смарагд, а не латунь: золота заливка на теплому світлому фоні втрачає контраст і виглядає дешево. */ --button-primary-bg:var(--emerald-850); --button-primary-text:var(--oyster-100); --button-primary-hover:var(--emerald-700); --button-secondary-bg:transparent; --button-secondary-border:rgba(22,35,29,0.28); --field-bg:var(--oyster-50); --field-border:rgba(22,35,29,0.20); --overlay-hero:rgba(7,21,17,0.52); --shadow-color:rgba(22,35,29,0.16); --shadow-card:0 14px 32px rgba(22,35,29,0.10); /* Непрозора, як і в темній темі — див. коментар там. */ --nav-bg-scrolled:rgb(241,237,229); /* Заливка головної кнопки в прокрученій шапці. Латунь, а не смарагд: у світлій темі зелена пляма була єдиною зеленою річчю на сторінці. Тон той самий, що й у золотого тексту на світлому (--gold-700), тож кнопка лишається брендовою, а не просто «коричневою». */ --nav-cta-bg:var(--gold-700); --nav-cta-bg-hover:#614927; --scrollbar-thumb:rgba(22,35,29,0.22); --scrollbar-track:rgba(22,35,29,0.06); /* ── ТЕКСТУРА: ЗРІЗ ТЕПЛОГО КАМЕНЮ ── Процедурне зерно замінене справжнім знімком каменю з візерунком сонця й тіні (вибір власниці, 2026-08-12: кандидат L4). Причина, чому фото, а не feTurbulence: шум дає рівну «наждачку», а камінь має неоднорідність — світлі й темні поля, дрібні тріщини, м'яку пляму світла. Саме ця неоднорідність і читається як матеріал, а не як фільтр поверх кольору. Знімок знебарвлений, приглушений до текстури (середня яскравість 239 із 255 при розкиді 225–255) і стиснутий до 1400px/43 КБ. Приглушення тут не косметика: у сирому вигляді середня була 146, і множення на устрицю перетворило б сторінку на сіру плиту замість рисунка каменю. cover + fixed, а не плитка: секції мають різну висоту, і плитка 320px видала б себе повтором. Із fixed усі секції показують ОДИН і той самий знімок, вирівняний по вікну, тож сторінка читається як один суцільний зріз каменю, а не як стос плит. */ --bg-texture:url("/assets/images/bg/stone-leaf.jpg"); --bg-texture-size:cover; --bg-texture-blend:multiply; --bg-texture-position:center; --bg-texture-attachment:fixed; /* ── ЯРУС 3 ── */ --gold:var(--gold-700); --gold-lt:var(--gold-700); --gold-deep:var(--gold-700); --dark:var(--oyster-100); --dark2:var(--oyster-200); --dark3:var(--oyster-50); --warm:var(--oyster-200); --text:var(--ink-900); --text-60:var(--ink-600); --text-40:var(--ink-400); --border:rgba(22,35,29,0.14); --paper:var(--oyster-100); /* Картка мусить бути СВІТЛІШОЮ за секцію, а не такою самою. --paper-2 — поверхня карток (каталог, моделі, «наступний крок»), і поки вона дорівнювала oyster-200, картки на секції того ж відтінку зникали разом із межами: у каталозі моделей у світлій темі не було видно, де закінчується одна картка й починається інша (2026-08-12). */ --paper-2:var(--oyster-50); --ink:var(--ink-900); --ink-60:var(--ink-600); --ink-40:var(--ink-400); /* Разом із підняттям поверхні трохи міцніша межа: на теплому фоні 0.14 читалось як тінь, а не як контур. */ --paper-border:rgba(22,35,29,0.20); } /* ─────────────────────────────────────────────────────────────────────────── ТЕМНІ ОСТРОВИ Темним в обох темах лишається тільки те, під чим справді лежить фотографія: герой і підпис під геройським кадром моделі. Світла підкладка вбила б вечірнє освітлення знімка, а текст поверх нього однаково має бути світлим. Раніше сюди входили ще банер конфігуратора, фінальний заклик, футер і «Що ви будуєте?». Власниця прибрала їх зі списку (2026-08-12): у світлій темі сторінка читалась як недоперемкнена — чотири темні смуги посеред теплої сторінки виглядали не як задум, а як забутий блок. Такий блок не можна просто пофарбувати: усередині нього кнопки, межі й дрібний текст читають ті самі змінні, і у світлій темі вони прийшли б темними на темне. Тому блок ПЕРЕВИЗНАЧАЄ повний набір токенів локально — це той самий прийом «поверхні», що й у дизайн-системі /brand/. ─────────────────────────────────────────────────────────────────────────── */ /* .landing-hero тут з 2026-08-15: герой лендінга — та сама фотографія на весь екран, і без локальної інверсії токенів у світлій темі його заголовок приходив чорнилом по темному знімку — сторінка для реклами відкривалась нечитабельною. */ html[data-theme="light"] .hero, html[data-theme="light"] .landing-hero, html[data-theme="light"] .model-hero-cap{ --bg-primary:var(--emerald-900); --bg-secondary:var(--emerald-850); --surface-card:var(--emerald-800); --surface-card-hover:var(--emerald-700); --text-primary:var(--oyster-100); --text-secondary:var(--oyster-300); --text-muted:#A9A297; --border-subtle:rgba(241,237,229,0.12); --border-strong:rgba(241,237,229,0.22); --accent-primary:var(--gold-500); --accent-hover:var(--gold-400); --accent-quiet:var(--gold-400); --button-primary-bg:var(--gold-500); --button-primary-text:var(--emerald-950); --button-primary-hover:var(--gold-400); --button-secondary-border:rgba(241,237,229,0.30); --field-bg:rgba(7,21,17,0.55); --field-border:rgba(241,237,229,0.18); /* Ярус 3 — те саме для старих імен */ --gold:var(--gold-500); --gold-lt:var(--gold-400); --gold-deep:var(--gold-400); --dark:var(--emerald-900); --dark2:var(--emerald-850); --dark3:var(--emerald-800); --text:var(--oyster-100); --text-60:var(--oyster-300); --text-40:#A9A297; --border:rgba(241,237,229,0.12); --paper:var(--emerald-850); --paper-2:var(--emerald-800); --ink:var(--oyster-100); --ink-60:var(--oyster-300); --ink-40:#A9A297; --paper-border:rgba(241,237,229,0.12); } /* ─────────────────────────────────────────────────────────────────────────── БАЗА ДОКУМЕНТА ─────────────────────────────────────────────────────────────────────────── */ html{background:var(--bg-primary);} body{background:var(--bg-primary);color:var(--text-primary);} /* ── ПЛАВНЕ ПЕРЕМИКАННЯ ТЕМИ ── Перелік властивостей явний: transition:all примусив би браузер стежити за кожним обчисленим значенням на кожному вузлі — на цій сторінці це тисячі елементів і помітний фриз у момент перемикання. Клас .theme-anim вмикає скрипт ПІСЛЯ першого рендеру. Без цього перехід програвався б і на завантаженні: сторінка відкривалась би у стартових кольорах і 300ms повзла до збережених. */ html.theme-anim body, html.theme-anim section, html.theme-anim header, html.theme-anim footer, html.theme-anim .nav, html.theme-anim .cta-banner, html.theme-anim .final-cta, html.theme-anim .collection-card, html.theme-anim .goal-card, html.theme-anim .case-card, html.theme-anim .benefit-card, html.theme-anim .faq-item, html.theme-anim .btn-gold, html.theme-anim .btn-ghost, html.theme-anim .nav-cta, html.theme-anim .collection-cta, html.theme-anim .collection-view, html.theme-anim input, html.theme-anim textarea, html.theme-anim select{ transition:background-color 260ms ease, border-color 260ms ease, color 260ms ease, fill 260ms ease, stroke 260ms ease, box-shadow 260ms ease; } @media(prefers-reduced-motion:reduce){ html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{transition-duration:0.01ms !important;} } /* Смуга прокрутки теж належить темі — світлий системний скролбар на майже чорній сторінці видно найкраще з усього, що на ній є. */ html{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:var(--scrollbar-track);} ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:6px;} ::selection{background:var(--accent-primary);color:var(--text-on-accent);} /* ─────────────────────────────────────────────────────────────────────────── ПЕРЕМИКАЧ ТЕМИ Проста кругла кнопка, яку натискаєш і відтискаєш (власник, 2026-08-17): повзунок-доріжка читався як стан і плутав. Іконка показує ДІЮ, а не стан — у темній темі сонце («увімкнути світлу»), у світлій місяць. Це