/* ============================================================ Palette variants — same theme, same 3-colour system, different mood. The structure never changes: one near-white page colour, one very dark shade for the inverted sections, one saturated accent. Only the hues move, so every variant stays recognisably the same site. Burnt Orange — the default. Warm, appetite-driven, "roastery". Ember — same family, pushed redder and darker. Reads more premium and less friendly; good for a bolder studio. Tangerine — brighter, purer orange. Lifts the accent without drifting into gold or yellow. Three of them are dark-sectioned, three are light. The light trio is a deliberate progression in paper colour: Blanc — pure white everywhere. Coldest and most gallery-like. Ivory — the mix: white page, off-white inverted sections, so the page still alternates the way the dark theme does. Ecru — pure off-white everywhere. Warmest; reads like paper stock rather than screen white. Each variant must set both the hex and the matching *-rgb channels — the channels drive every tint, border and glow in style.css. Activate with ?palette=, or use the bar at the top of the page. ============================================================ */ /* Ember — deeper, redder, more premium */ html[data-palette="ember"] { --cream: #f9f1ec; --choco: #1f120f; --choco-2: #2f1c17; --orange: #d8431c; --cream-rgb: 249 241 236; --choco-rgb: 31 18 15; --orange-rgb: 216 67 28; } /* Tangerine — brighter and purer orange; lifts without going gold */ html[data-palette="tangerine"] { --cream: #fdf3ea; --choco: #291a12; --choco-2: #3a2719; --orange: #ee6f1c; --cream-rgb: 253 243 234; --choco-rgb: 41 26 18; --orange-rgb: 238 111 28; } /* ============ Light variants ============ These do not change the hue — they flip the *surfaces*. The inverted sections (hero, work, testimonials, footer, service cards, chart) stop being dark brown and become white or off-white, and burnt orange takes over as the headline colour. Body copy stays --choco: orange is fine on a light page at display sizes (~3.1:1, clears AA for large text) but not at 15px. The .accent word flips to --choco so the two-tone headline still reads. The switcher also sets data-mode="light" on , which is what the shared rules below hook into — so adding a fourth light palette only means adding its variables, not re-listing every selector. */ /* Blanc — pure white everywhere. Nothing but hairlines to separate blocks. */ html[data-palette="blanc"] { --white: #ffffff; --surface-dark: #ffffff; --surface-dark-rgb: 255 255 255; --surface-dark-2: #ffffff; --on-dark: var(--choco); --on-dark-rgb: var(--choco-rgb); --panel: #ffffff; --on-panel: var(--choco); } /* Ivory — the mix: white page, off-white inverted sections */ html[data-palette="ivory"] { --white: #ffffff; --surface-dark: var(--cream); --surface-dark-rgb: var(--cream-rgb); --surface-dark-2: #f2e8dc; --on-dark: var(--choco); --on-dark-rgb: var(--choco-rgb); --panel: #ffffff; --on-panel: var(--choco); } /* Ecru — pure off-white. No #fff anywhere; separation comes from a three-step off-white scale plus the same hairlines Blanc uses. */ html[data-palette="ecru"] { --white: #f7f2ea; --cream: #f7f2ea; --cream-rgb: 247 242 234; --surface-dark: #f7f2ea; --surface-dark-rgb: 247 242 234; --surface-dark-2: #ece3d5; --on-dark: var(--choco); --on-dark-rgb: var(--choco-rgb); --panel: #fdfaf4; --on-panel: var(--choco); } /* ---- shared light-mode behaviour ---- */ html[data-mode="light"] h1, html[data-mode="light"] h2, html[data-mode="light"] .work__meta h3 { color: var(--orange); } html[data-mode="light"] h1 .accent, html[data-mode="light"] h2 .accent { color: var(--choco); } /* the nav sat on a dark hero; on a light one it needs ink, not a scrim */ html[data-mode="light"] .nav { background: var(--surface-dark); border-bottom: 1px solid rgb(var(--choco-rgb) / 0.1); } /* pale-on-pale shapes would vanish, so lean on the accent instead */ html[data-mode="light"] .float--square { border-color: var(--orange); opacity: 0.3; } html[data-mode="light"] .float--dot2 { background: var(--orange); opacity: 0.5; } html[data-mode="light"] .float--pill { background: rgb(var(--orange-rgb) / 0.16); } /* service cards and quotes need an edge once they are light-on-light */ html[data-mode="light"] .card, html[data-mode="light"] .quote { border: 1px solid rgb(var(--choco-rgb) / 0.1); } html[data-mode="light"] .card__icon { background: var(--orange); color: #fff; } /* sections that no longer contrast need a hairline to keep the rhythm */ html[data-palette="blanc"] .section--dark, html[data-palette="ecru"] .section--dark { border-block: 1px solid rgb(var(--choco-rgb) / 0.09); } html[data-palette="blanc"] .footer, html[data-palette="ecru"] .footer { border-top: 1px solid rgb(var(--choco-rgb) / 0.09); } /* ---- Swatch buttons in the switcher bar ---- */ .fontbar__swatch { flex: none; display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border: 1px solid rgba(250, 245, 239, 0.16); border-radius: 8px; background: transparent; color: rgba(250, 245, 239, 0.72); font-family: "Inter", system-ui, sans-serif; font-size: 12.5px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .fontbar__swatch:hover { color: #fff; border-color: rgba(250, 245, 239, 0.4); } .fontbar__swatch.is-on { border-color: #fff; color: #fff; background: rgba(250, 245, 239, 0.12); } /* the chip previews the three colours the variant actually uses */ .fontbar__chip { width: 22px; height: 22px; border-radius: 6px; flex: none; background: linear-gradient(135deg, var(--sw-accent) 0 50%, var(--sw-dark) 50% 78%, var(--sw-light) 78% 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); } .fontbar__sep { flex: none; width: 1px; height: 26px; margin: 0 4px; background: rgba(250, 245, 239, 0.16); }