/* ========================================================================== palettes.css — Integrale Yoga The site's colour tokens (spec §8.3). The DEFAULT palette is now Sepia (the :root block below); the original colourful palette and the other studies follow it as data-palette alternates. All alternates keep the same luminance ladder as the original, so the band-role and adjacency rules below and in style.css still hold. Band mapping (original palette — the luminance ladder every palette shares), with relative luminance: band 1 #B8CDE4 light blue L 0.60 — header + functional/secondary bands band 2 #DB7B5B terracotta L 0.30 — also the accent/CTA colour band 3 #E9DFCC bleached pale L 0.74 — lightest; the reading band band 4 #7A8C6E sage green L 0.24 — darkest; hero panel + footer band 5 #D8A03D amber L 0.40 — page title + closing CTA bands The role each band plays in a page, and which bands may sit next to each other, is documented in style.css under "bands". The luminances are listed here because that ordering (3 > 1 > 5 > 2 > 4) is what those rules are built on; re-check them if a colour changes. All five bands carry the same dark ink at 5.5:1 or better — band 4 (sage) is the tightest at 5.5:1, which is AA for body text. ========================================================================== */ /* DEFAULT PALETTE — Sepia (classic): warm old-photograph browns, one hue family. The original colourful palette is preserved unchanged below as :root[data-palette="origineel"], so nothing is lost and the picker can still select it. To go back to the original as default, swap these two blocks (move these tokens into the origineel block and vice-versa). */ :root { --band-1-bg: #D6C3A4; --band-1-ink: #312619; /* tan 8.6:1 */ --band-2-bg: #C08152; --band-2-ink: #312619; /* clay (loud) 4.6:1 */ --band-3-bg: #EBDFC9; --band-3-ink: #312619; /* parchment 11.2:1 */ --band-4-bg: #43342A; --band-4-ink: #F1E4D2; /* espresso ground 9.5:1 */ --band-5-bg: #CB973F; --band-5-ink: #312619; /* ochre gold 5.7:1 */ /* CTA = the gold; on bands 2/3/5 style.css swaps it for --accent-alt, a deep coffee brown that separates on clay, parchment and gold alike. */ --accent: #CB973F; --accent-ink: #312619; --accent-alt: #5A3A22; --accent-alt-ink: #F3E7D5; --surface: #FAF4EA; --surface-ink: #2E2418; /* warm ivory cards */ --line: #C6B392; --focus: #1F4D8F; /* the one hue that stays visible on every warm band */ } /* --- Origineel: the original colourful palette (former default) ----------- */ :root[data-palette="origineel"] { --band-1-bg: #B8CDE4; --band-1-ink: #2C312E; --band-2-bg: #DB7B5B; --band-2-ink: #2C312E; --band-3-bg: #E9DFCC; --band-3-ink: #2C312E; --band-4-bg: #7A8C6E; --band-4-ink: #2C312E; --band-5-bg: #D8A03D; --band-5-ink: #2C312E; /* The CTA is the amber, with the site ink as its label (8.5:1). --accent-alt is a deep burnt clay, for the three bands the amber pill cannot sit on: band 5 (its own colour), band 2 (1.1:1, same warm family) and band 3 (1.8:1 — cream is too light under it, and that band carries the booking UI). See the .band--2 / .band--3 / .band--5 rule in style.css. */ --accent: #D8A03D; --accent-ink: #2C312E; --accent-alt: #6E3520; --accent-alt-ink: #FBEFE3; --surface: #FDFBF7; --surface-ink: #2B2822; --line: #B9AD9C; --focus: #1F4D8F; } /* ========================================================================== ALTERNATE PALETTES — warm "sepia" studies, added so the client can compare the colourful original against warmer, aged treatments (inspiration: puur-a.be, dhyana-yoga.be — muted, earthy, warm neutrals). Switch live with the palette picker (js/palette.js): it sets data-palette on and remembers the choice per browser. With NO attribute set, the original palette above is used — so the original is the default and is never removed. Three alternates, from most colour to least: data-palette="vintage" the original's hues (dusty blue, sage green, ochre, clay, cream) pulled into a muted, warm, aged register — sepia-cast but not monochrome. data-palette="sepia" rich old-photograph browns, one hue family. data-palette="sepia-soft" the same, lighter and less saturated. All three keep the SAME luminance ladder as the original (band 3 > 1 > 5 > 2 > 4), so every adjacency/seam rule documented in style.css still holds, and every band's ink clears WCAG AA (4.5:1) — the loud band 2 included (it reads a little better here than the original terracotta does). Ratios are noted per line. One structural note: the two pure-sepia sets flip band 4 — the darkest "ground" band (hero panel + footer + mobile cart bar) — to a light cream ink, because a brown deep enough to read as sepia "ground" is too dark for dark text, and a dark ground with light text is the essence of that look. The Vintage set keeps the original's dark ink on a muted sage, so it stays closest to the site you have now. ========================================================================== */ /* --- Vintage: the original's hues, muted and warmed into a sepia cast ----- */ :root[data-palette="vintage"] { --band-1-bg: #BBC9D0; --band-1-ink: #2C2820; /* dusty blue 8.7:1 */ --band-2-bg: #C4855E; --band-2-ink: #2C2820; /* muted terracotta 4.8:1 */ --band-3-bg: #ECE2CE; --band-3-ink: #2C2820; /* warm cream 11.4:1 */ --band-4-bg: #77855F; --band-4-ink: #2C2820; /* muted sage 3.7:1 (dark ink, like the original) */ --band-5-bg: #C99A4C; --band-5-ink: #2C2820; /* muted ochre 5.7:1 */ --accent: #C99A4C; --accent-ink: #2C2820; --accent-alt: #5E3823; --accent-alt-ink: #F4E7D6; --surface: #FBF5EB; --surface-ink: #2C2820; --line: #C6B79A; --focus: #1F4D8F; } /* --- Sepia (classic): warm old-photograph browns, rich and grounded ------ */ :root[data-palette="sepia"] { --band-1-bg: #D6C3A4; --band-1-ink: #312619; /* tan 8.6:1 */ --band-2-bg: #C08152; --band-2-ink: #312619; /* clay (loud) 4.6:1 */ --band-3-bg: #EBDFC9; --band-3-ink: #312619; /* parchment 11.2:1 */ --band-4-bg: #43342A; --band-4-ink: #F1E4D2; /* espresso ground 9.5:1 */ --band-5-bg: #CB973F; --band-5-ink: #312619; /* ochre gold 5.7:1 */ /* CTA = the gold; on bands 2/3/5 style.css swaps it for --accent-alt, here a deep coffee brown that separates on clay, parchment and gold alike. */ --accent: #CB973F; --accent-ink: #312619; --accent-alt: #5A3A22; --accent-alt-ink: #F3E7D5; --surface: #FAF4EA; --surface-ink: #2E2418; /* warm ivory cards */ --line: #C6B392; --focus: #1F4D8F; /* kept: the one hue that stays visible on every warm band */ } /* --- Sepia zacht (soft): lighter, airier, less saturated ----------------- */ :root[data-palette="sepia-soft"] { --band-1-bg: #E4D8C4; --band-1-ink: #3A3128; /* pale sand 9.0:1 */ --band-2-bg: #C99873; --band-2-ink: #3A3128; /* dusty clay 5.0:1 */ --band-3-bg: #F4ECDF; --band-3-ink: #3A3128; /* ivory 10.9:1 */ --band-4-bg: #6E5A46; --band-4-ink: #F3E9DA; /* mocha ground 5.4:1 */ --band-5-bg: #DBB577; --band-5-ink: #3A3128; /* honey 6.6:1 */ --accent: #DBB577; --accent-ink: #3A3128; --accent-alt: #6E4A2E; --accent-alt-ink: #F5EADB; --surface: #FCF7EF; --surface-ink: #332B21; --line: #D0C1A9; --focus: #1F4D8F; }