/* ============================================================ Palettes — 25 of them, one per brand in the fleet. A palette is a LIST OF COLORS. It carries no selectors of its own, no gradients and no component rules, because everything that used to be written per palette is now derived from those colors in 01-base.css and from the two scheme blocks below. That was not true before. Each palette carried a block re-coloring the eyebrow, the counters, the bullets and the icon tile on light bands, plus a hand-written three-layer hero gradient. Two consequences, both live: 🔴 five palettes re-stated six of the nine light-band rules and missed the rest, so their code keys, phone links and ghost-link hovers stayed the ocean palette's teal; 🔴 every palette re-stated the DESKTOP hero wash and none re-stated the phone one or the daylight-photograph one, so on a phone a plum or a green site washed its hero in ocean blue. Neither can happen to a token. Adding a palette is now eleven colors. ── the three schemes ── dark the default: dark ground, light sand bands. No attribute needed. deep dark ground AND dark bands — the sand tokens hold near-blacks. light light ground throughout; hero copy flips to dark. carries data-palette and, when the scheme is not "dark", data-scheme. The registry in inc/options.php is the same list; .meta/tools/check-palettes.py fails when the two drift apart. ============================================================ */ /* ══ scheme: deep ═══════════════════════════════════════════════════════════ The page never goes light. A "light band" becomes a slightly lifted dark surface, which is why --sand and --sand-2 hold near-blacks on these palettes and --ink holds a near-white. Everything below follows from that. */ [data-scheme="deep"]{ --glass-strong:color-mix(in srgb,var(--night) 55%,transparent); /* No warm bloom in the corner of the hero: on a true black ground it reads as a smudge. */ --scrim-glow:transparent; } /* On these palettes a "light band" is a dark surface, so the accent there is the page's own — which is what --accent-light means everywhere else and does not mean here. Each deep palette therefore names a darker relative of its accent at the root, for the one surface on the site that is white on every palette: the booking form's card. `.band-light` puts --brass back. */ [data-scheme="deep"] .band-light{ /* 01-base turns these white for an ordinary light band. Here they are surfaces on a dark page. */ --night:var(--sand);--night-2:var(--sand-2);--night-3:var(--sand-2); --glass:color-mix(in srgb,var(--text) 6%,transparent); --panel:var(--sand-2);--panel-line:var(--ink-line); /* On a dark band the accent is the same one the rest of the page uses; there is no sand for it to go muddy against. One line replaces the seven rules each deep palette used to carry. */ --accent-light:var(--brass); } /* ══ scheme: light ══════════════════════════════════════════════════════════ The whole page inverts: the ground is white, the "night" surfaces are the tinted ones, and the hero copy goes dark over the photograph. */ [data-scheme="light"]{ color:var(--text); --on-hero:var(--text); --on-accent:#fff; --accent-light:var(--brass); --glass:color-mix(in srgb,var(--text) 5%,transparent); --glass-strong:color-mix(in srgb,var(--night-2) 74%,transparent); --scrim:var(--night); --scrim-glow:transparent; } [data-scheme="light"] .btn-solid{box-shadow:0 10px 26px -14px rgba(0,0,0,.45)} [data-scheme="light"] .site-head{background:color-mix(in srgb,var(--night) 82%,transparent)} [data-scheme="light"] .btn-glass{background:transparent;border-color:var(--line-2);color:var(--text)} [data-scheme="light"] .btn-glass:hover{background:var(--glass)} [data-scheme="light"] .site-foot{background:var(--sand);color:var(--text-70)} [data-scheme="light"] .site-foot a{color:var(--text-70)} [data-scheme="light"] .cta{background:var(--sand)} [data-scheme="light"] .cta-panel{background:var(--night-2);border-color:var(--line)} [data-scheme="light"] .band-alt{background:var(--sand)} [data-scheme="light"] .band-light{background:var(--night-3)} [data-scheme="light"] .chips a{background:var(--night-2);border-color:var(--line)} [data-scheme="light"] .glass-form{ background:var(--glass-strong);border-color:var(--line-2); box-shadow:0 30px 70px -40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.7); } [data-scheme="light"] .glass-stats{background:var(--glass-strong);border-color:var(--line)} [data-scheme="light"] .glass-panel{background:var(--glass-strong);border-color:var(--line-2)} [data-scheme="light"] .glass-table{background:var(--night-2);border-color:var(--line)} [data-scheme="light"] .feature-card, [data-scheme="light"] .type{background:var(--night-2);border-color:var(--line)} [data-scheme="light"] .steps li{background:var(--night-2)} [data-scheme="light"] .cost{background:var(--night-2)} [data-scheme="light"] .faq details{background:var(--night-2)} [data-scheme="light"] .hero h1{text-shadow:none} /* The wash has to be heavier than the dark schemes': the copy over it is dark, so the photograph has to be pushed towards the page's own white rather than away from it. */ [data-scheme="light"] .hero-media::after{ background: linear-gradient(94deg,color-mix(in srgb,var(--night) 92%,transparent) 0 18%, color-mix(in srgb,var(--night) 66%,transparent) 40%, color-mix(in srgb,var(--night) 24%,transparent) 62%, color-mix(in srgb,var(--night) 40%,transparent) 100%), linear-gradient(to bottom,color-mix(in srgb,var(--night) 55%,transparent) 0,transparent 24% 64%,var(--night) 100%); } [data-scheme="light"] .hero-bright .hero-media::after{ background: linear-gradient(94deg,color-mix(in srgb,var(--night) 95%,transparent) 0 24%, color-mix(in srgb,var(--night) 82%,transparent) 46%, color-mix(in srgb,var(--night) 52%,transparent) 70%, color-mix(in srgb,var(--night) 62%,transparent) 100%), linear-gradient(to bottom,color-mix(in srgb,var(--night) 68%,transparent) 0,transparent 30% 62%,var(--night) 100%); } @media (max-width:860px){ [data-scheme="light"] .hero-media::after, [data-scheme="light"] .hero-bright .hero-media::after{ background:linear-gradient(to bottom, color-mix(in srgb,var(--night) 88%,transparent) 0 34%, color-mix(in srgb,var(--night) 80%,transparent) 60%, color-mix(in srgb,var(--night) 90%,transparent) 84%, var(--night) 100%); } } /* ══ dark palettes ══════════════════════════════════════════════════════════ The default, "ocean", lives in 01-base.css :root and carries no attribute. */ /* Sunset — plum-indigo ground, coral accent, warm sand. KitchenAid. */ [data-palette="sunset"]{ --night:#1E1A2E;--night-2:#272138;--night-3:#302946; --brass:#FF8A6B;--aqua:#FFC97A; --sand:#F7F1EC;--sand-2:#EEE4DC;--ink:#241E33; --accent-light:#B34A36;--scrim:#1E1A2E; } /* Aqua — pale ground, turquoise accent. The brightest of the dark set. U-Line. */ [data-palette="aqua"]{ --night:#123B44;--night-2:#174A55;--night-3:#1C5866; --brass:#3FD0C9;--aqua:#FFD166; --sand:#F2F7F6;--sand-2:#E4EFED;--ink:#0E2B31; --accent-light:#0B7E7B;--scrim:#0A323A;--on-accent:#062B29; } /* Clay — warm terracotta and deep green, no blue at all. DCS. */ [data-palette="clay"]{ --night:#232B24;--night-2:#2C352C;--night-3:#354035; --brass:#D98E5F;--aqua:#9FBF8E; --sand:#F6F2EA;--sand-2:#EBE4D7;--ink:#1E271F; --accent-light:#A9552A;--scrim:#1E271F; } /* Vice — near-black navy, neon aqua and magenta. The loudest. LG. */ [data-palette="vice"]{ --night:#0D1226;--night-2:#141A33;--night-3:#1B2240; --brass:#2BE8D6;--aqua:#FF5FA2; --sand:#F1F2FA;--sand-2:#E2E5F2;--ink:#111634; --accent-light:#C42C77;--scrim:#0D1226;--on-accent:#04201C; /* the magenta, not the aqua, is what glows in the corner of the hero here */ --scrim-glow:var(--aqua); } /* Graphite — warm dark neutral, amber accent. Liebherr. */ [data-palette="graphite"]{ --night:#191817;--night-2:#221F1D;--night-3:#2B2724; --brass:#E8A13C;--aqua:#C7BFAF; --sand:#F3F1ED;--sand-2:#E7E3DC;--ink:#1E1C1A; --accent-light:#975F0F;--scrim:#191817; } /* Oxide — warm charcoal, burnt copper. Viking. */ [data-palette="oxide"]{ --night:#211A18;--night-2:#2A211E;--night-3:#342925; --brass:#E07A52;--aqua:#C9A88A; --sand:#F5F0EA;--sand-2:#E9E0D6;--ink:#241B18; --accent-light:#A33B1E;--scrim:#211A18; } /* Claret — deep burgundy ground, dusty rose accent. Miele. */ [data-palette="claret"]{ --night:#1D1013;--night-2:#26161A;--night-3:#301C21; --brass:#E4788B;--aqua:#D9B8A0; --sand:#F8F0F1;--sand-2:#EDE0E2;--ink:#26161A; --accent-light:#A6203C;--scrim:#1D1013; } /* Harbor — slate navy ground, warm sand accent. The one cold ground with a warm accent, which is what keeps it apart from indigo and cobalt. Kenmore. */ [data-palette="harbor"]{ --night:#16212E;--night-2:#1D2B3B;--night-3:#243448; --brass:#E5C79A;--aqua:#79A8C4; --sand:#F2F4F6;--sand-2:#E3E8ED;--ink:#16212E; --accent-light:#1F5F86;--scrim:#101A25; } /* Indigo — violet-leaning deep blue, ice accent. Samsung. */ [data-palette="indigo"]{ --night:#131735;--night-2:#1A1F44;--night-3:#232955; --brass:#8FA8FF;--aqua:#C9D4FF; --sand:#F2F3FA;--sand-2:#E3E6F4;--ink:#171B3A; --accent-light:#3B49B5;--scrim:#131735;--on-accent:#0B1030; } /* Cobalt — true navy, bright sky accent. Whirlpool. */ [data-palette="cobalt"]{ --night:#0A1A2E;--night-2:#0F243E;--night-3:#152F4F; --brass:#4FA8F5;--aqua:#9BD1F7; --sand:#F1F5F9;--sand-2:#E1E9F1;--ink:#0C1E33; --accent-light:#0F5FA8;--scrim:#0A1A2E;--on-accent:#03121F; } /* Champagne — warm graphite, pale champagne accent. Dacor. */ [data-palette="champagne"]{ --night:#16151A;--night-2:#1E1D23;--night-3:#26242C; --brass:#E3D3A8;--aqua:#A9A2B8; --sand:#F5F3EE;--sand-2:#E8E4DB;--ink:#1C1A20; --accent-light:#75652F;--scrim:#16151A; } /* ══ deep palettes ══ ground and bands both dark ══════════════════════════ */ /* Midnight — the darkest neutral. Cold steel accent. Thermador. */ [data-palette="midnight"]{ --night:#07090C;--night-2:#0D1116;--night-3:#141920; --text:#E8EDF2; --brass:#9FB6C9;--aqua:#D8E3EC; --sand:#12171D;--sand-2:#0D1116;--ink:#E8EDF2; --accent-light:#3E5C70;--scrim:#07090C;--on-accent:#07090C; } /* Onyx — true black, warm gold. The pilot's, signed off 2026-08-12. Sub-Zero. */ [data-palette="onyx"]{ --night:#000000;--night-2:#0A0A0A;--night-3:#121212; --text:#F5F5F5; --brass:#D4AF60;--aqua:#F5F5F5; --sand:#0F0F0F;--sand-2:#0A0A0A;--ink:#F2F2F2; --accent-light:#8A5E1D;--scrim:#000000;--on-accent:#120E04; } /* Abyss — near-black blue, ice accent. Maytag. */ [data-palette="abyss"]{ --night:#04070C;--night-2:#0A0F16;--night-3:#111823; --text:#EAF0F6; --brass:#7FD1FF;--aqua:#EAF0F6; --sand:#0B1119;--sand-2:#070B11;--ink:#E8EEF5; --accent-light:#0A5E86;--scrim:#04070C;--on-accent:#03151F; } /* Ember — charcoal steel, hot coral-red. Wolf. */ [data-palette="ember"]{ --night:#0F1113;--night-2:#16191C;--night-3:#1D2125; --text:#ECEFF2; --brass:#F2564B;--aqua:#C3CBD2; --sand:#14181B;--sand-2:#0F1315;--ink:#ECEFF2; --accent-light:#B02219;--scrim:#0B0D0F;--on-accent:#2A0806; } /* Bronze — near-black, antique bronze. JennAir. */ [data-palette="bronze"]{ --night:#0B0A09;--night-2:#131110;--night-3:#1B1816; --text:#F0EDE8; --brass:#D29A5C;--aqua:#E0D8CC; --sand:#131110;--sand-2:#0B0A09;--ink:#F0EDE8; --accent-light:#8A5A22;--scrim:#0B0A09;--on-accent:#14100A; } /* ══ light palettes ══ white ground, dark hero copy ═══════════════════════ */ /* Paper — white, near-black text, one blue accent. GE. */ [data-palette="paper"]{ --night:#FFFFFF;--night-2:#FFFFFF;--night-3:#FAFAF9; --text:#15181C; --brass:#1B5BD7;--aqua:#B45309; --sand:#F4F5F7;--sand-2:#EAECEF;--ink:#15181C; } /* Linen — warm off-white, deep green with brass. La Cornue's own colorway. */ [data-palette="linen"]{ --night:#FBF8F2;--night-2:#FFFDF9;--night-3:#F5F1E8; --text:#1F2A22; --brass:#1F6B4A;--aqua:#C08A3E; --sand:#F1EBDD;--sand-2:#E7DFCC;--ink:#1F2A22; } /* Arctic — cool near-white, ocean blue accent. Fisher & Paykel. */ [data-palette="arctic"]{ --night:#F7FAFC;--night-2:#FFFFFF;--night-3:#EFF4F8; --text:#0E1D28; --brass:#0A7290;--aqua:#A24B12; --sand:#E8F1F6;--sand-2:#DCE9F0;--ink:#0E1D28; } /* Signal — near-white, one red accent. Bosch. */ [data-palette="signal"]{ --night:#FFFFFF;--night-2:#FFFFFF;--night-3:#F6F7F8; --text:#16181B; --brass:#C0102B;--aqua:#1E5FA8; --sand:#F2F3F5;--sand-2:#E6E8EB;--ink:#16181B; } /* Saffron — warm cream, Italian saffron accent. Bertazzoni. */ [data-palette="saffron"]{ --night:#FFFBF2;--night-2:#FFFFFF;--night-3:#FCF4E4; --text:#2A2015; --brass:#A15508;--aqua:#2F6B4F; --sand:#F7EEDC;--sand-2:#EFE2C9;--ink:#2A2015; } /* Nordic — warm gray-white, muted teal accent. Asko. */ [data-palette="nordic"]{ --night:#FAFAF8;--night-2:#FFFFFF;--night-3:#F2F2EF; --text:#1C201E; --brass:#256B60;--aqua:#8A5A22; --sand:#EFEFEB;--sand-2:#E3E3DD;--ink:#1C201E; } /* Glacier — pale blue-white, deep navy accent. Electrolux. */ [data-palette="glacier"]{ --night:#F6FAFD;--night-2:#FFFFFF;--night-3:#EDF3F9; --text:#0D2233; --brass:#0B3D6B;--aqua:#9A5B12; --sand:#E6EEF6;--sand-2:#D9E5F0;--ink:#0D2233; } /* Pewter — cool gray, steel accent. Frigidaire. */ [data-palette="pewter"]{ --night:#F7F8F9;--night-2:#FFFFFF;--night-3:#EEF0F2; --text:#1A1F24; --brass:#33566B;--aqua:#8A5320; --sand:#E9ECEF;--sand-2:#DDE1E6;--ink:#1A1F24; }