/* ============================================================================ SABRR — palette options ---------------------------------------------------------------------------- Every colour in the site derives from the token block in sabrr.css, so a whole new look is one block of overrides. Set the palette by putting the attribute on : No attribute = the original Sabrr palette (maroon, emerald, cream). The token names are structural, not literal — they were named after the original brand and kept so nothing has to be refactored: --maroon* the primary: buttons, links, accents on light grounds --forest* the deep ground: dark sections --gold the accent on dark grounds --peach the accent on the darkest ground --paper* the light grounds --ink* text ========================================================================= */ /* --- First Light (the site default) ------------------------------------- Air, not paper. The old ground was a beige off-white and it is what made the page feel tired — this one is a cool white with a whisper of green in it, so the page reads as fresh air rather than aged card. Living jade carries the brand, sunrise apricot keeps it human, and a deep teal grounds the dark sections without going near black. Every pair below is measured, not guessed: jade on air-white 5.46:1 · jade on mint 5.07:1 · ink on air-white 15.75:1 muted on mint 5.2:1 · dark ink on apricot 5.25:1 · mint on deep 10.07:1 jade survives the hero's mint glow at 5.23:1, its brightest ground */ :root[data-palette="fresh"] { --maroon: #0E7361; --maroon-deep: #09564A; --maroon-lift: #159882; --maroon-glow: #1BB096; --forest: #0E4A41; --forest-deep: #0A342E; --forest-lift: #12564B; --gold: #D9A557; --gold-soft: #F0CE94; --peach: #BFE6DA; --apricot: #E0714A; --apricot-ink: #BD4920; --paper: #F4FAF8; --paper-warm: #E7F3EF; --paper-2: #DBEBE5; --paper-3: #C6DED6; --ink: #12211E; --ink-2: #2E4540; --ink-3: #4F6660; } /* --- Sunrise (the site palette) ----------------------------------------- A warm coral ground, pale at the top and sunrise-deep at the bottom, with a deep red carrying the brand. Ridgelines sit in the lower band. The gradient only reaches its richest coral below the copy. #FBD6C3 is the darkest tone any text lands on: deep red on it 5.2:1 · body 6.1:1 · muted 6.9:1 and muted still clears the deepest coral under the hero at 4.8:1 cream on the red button 6.6:1 · cream on the announcement bar 7.0:1 */ :root, :root[data-palette="sunrise"] { --paper: #FEF4EE; --paper-warm: #FDE7DA; --paper-2: #FBD6C3; --paper-3: #F2A98D; --ink: #7A3E31; --ink-2: #6B3227; --ink-3: #5C332A; --maroon: #A8281B; --maroon-deep: #8C1F14; --maroon-lift: #C93A22; --maroon-glow: #E05233; --apricot: #E8734A; --apricot-ink: #A8281B; --forest: #A8281B; --forest-deep: #7E1A10; --forest-lift: #C93A22; --gold: #F0B071; --gold-soft: #FBDCC2; --peach: #FBD6C3; --bg: var(--paper); --fg: var(--ink); --fg-muted: var(--ink-3); --heading: #A8281B; --accent: #A8281B; /* the eyebrow is 13px uppercase and letterspaced — the hardest text on the page to read, so it gets the deepest red rather than the accent */ --eyebrow-fg: #8C1F14; --on-accent: #FEF7F3; --on-light: #A8281B; --rule: color-mix(in oklab, #A8281B 22%, transparent); --card: #FFF8F3; --deep-band: #8C1F14; --shadow-color: 120 40 26; } /* the alternating band leans a shade warmer, not greyer */ :root:not([data-palette]) .tone-warm, :root[data-palette="sunrise"] .tone-warm { --bg: #FDE7DA; --card: #FFFAF6; } /* --- Ember (the site palette) ------------------------------------------- A dark, warm ground — deep near-black with a red undertone — carrying a live orange-red. Warm rather than clinical, and never flat: every band is a different depth of the same ember. Measured, not guessed: text on ground 16.4:1 · muted on ground 8.1:1 · orange on ground 5.8:1 orange on card 5.3:1 · orange on the ember band 5.2:1 · amber on it 8.1:1 dark ink on an orange button 5.8:1 */ :root[data-palette="ember"] { /* --paper keeps its name and its meaning: the light colour, used for button text, footer copy, anything sitting on a dark band. */ --paper: #F8EFE8; --paper-warm: #211714; --paper-2: #2A1E19; --paper-3: #352620; --ink: #F8EFE8; --ink-2: #D9C6BB; --ink-3: #BCA79D; --maroon: #F2622E; --maroon-deep: #C74A1F; --maroon-lift: #FF7A45; --maroon-glow: #FF8C57; --apricot: #F2622E; --apricot-ink: #FF7A45; --forest: #241812; --forest-deep: #0E0908; --forest-lift: #33150D; --gold: #F0A44A; --gold-soft: #FBDCC2; --peach: #FBDCC2; --bg: #181110; --fg: #F8EFE8; --fg-muted: #BCA79D; --accent: #F2622E; --on-accent: #181110; --rule: color-mix(in oklab, #F8EFE8 16%, transparent); --card: #241A16; --deep-band: #0E0908; --on-light: #181110; --shadow-color: 0 0 0; } /* The alternating light band becomes an alternating depth instead. */ :root[data-ground="dark"] .tone-warm { --bg: #211714; --card: #2A1E19; --rule: color-mix(in oklab, #F8EFE8 13%, transparent); } /* The ember band, where the maroon section used to be. */ :root[data-ground="dark"] .on-maroon { --bg: #33150D; --fg: #F8EFE8; --fg-muted: color-mix(in oklab, #F8EFE8 68%, transparent); --accent: var(--gold); --on-accent: #181110; --card: color-mix(in oklab, #F8EFE8 7%, transparent); } /* --- Sage & Terracotta --------------------------------------------------- Light, airy and contemporary. Sage-charcoal grounds with a warm terracotta primary — the palette most current wellness brands land on, and the furthest from heavy heritage maroon. */ :root[data-palette="sage"] { --maroon: #995233; --maroon-deep: #7C3F28; --maroon-lift: #C06B44; --maroon-glow: #CF7B50; --forest: #3E4E43; --forest-deep: #2C3A31; --forest-lift: #4C6152; --gold: #C9A05E; --gold-soft: #E3C795; --peach: #F0D3B6; --apricot: #E08A5A; /* warm fill; always takes dark text */ --apricot-ink: #A8501F; /* the same warmth when it must be text */ --paper: #F8F6F0; --paper-warm: #EFEBE0; --paper-2: #E7E2D4; --paper-3: #D9D3C2; --ink: #22271F; --ink-2: #414A3E; --ink-3: #61685B; } /* --- Indigo & Amber ------------------------------------------------------ Cool, calm and quiet — night sky over the river, warmed by a single amber. The most "modern tech-adjacent" of the five without losing softness. */ :root[data-palette="indigo"] { --maroon: #2F4A6B; --maroon-deep: #22374F; --maroon-lift: #416288; --maroon-glow: #4E739B; --forest: #1F2E40; --forest-deep: #16212F; --forest-lift: #2C4157; --gold: #D9A441; --gold-soft: #EFCC85; --peach: #F4DCB2; --paper: #F6F5F0; --paper-warm: #EAE8DF; --paper-2: #E1DFD4; --paper-3: #D2CFC2; --ink: #1B2027; --ink-2: #39414C; --ink-3: #5D646E; } /* --- Saffron & Clay ------------------------------------------------------ Warm, Indian and energetic. Burnt saffron on a bright cream, over deep clay grounds. Lighter and livelier than the original maroon while staying rooted. */ :root[data-palette="clay"] { --maroon: #A54B24; --maroon-deep: #8B3B1C; --maroon-lift: #D66B3C; --maroon-glow: #E07C4B; --forest: #463124; --forest-deep: #33231A; --forest-lift: #5D4232; --gold: #DFA33E; --gold-soft: #F2CA7C; --peach: #F9DCAC; --paper: #FDF8EF; --paper-warm: #F6EBD9; --paper-2: #F0E2CB; --paper-3: #E3D0B4; --ink: #291C13; --ink-2: #4D3725; --ink-3: #7C6650; } /* --- Ivory & Ink --------------------------------------------------------- Minimal and gallery-like. Near-white paper, near-black grounds, and one deep emerald doing all the work. The most restrained and the most expensive-looking. */ :root[data-palette="ivory"] { --maroon: #2F5D4E; --maroon-deep: #23473C; --maroon-lift: #3C7663; --maroon-glow: #488872; --forest: #242723; --forest-deep: #1A1D1A; --forest-lift: #333833; --gold: #B99A5E; --gold-soft: #DCC392; --peach: #E7DCC5; --paper: #FAFAF6; --paper-warm: #F0EFE7; --paper-2: #E8E7DD; --paper-3: #D8D7CB; --ink: #191B18; --ink-2: #3A3D38; --ink-3: #6A6E65; } /* --- Rose Quartz & Slate ------------------------------------------------- Soft, feminine and calm. Dusty rose on warm oyster, over a cool slate ground. The gentlest of the five — closest to how the practices actually feel. */ :root[data-palette="rose"] { --maroon: #9A4C60; --maroon-deep: #7D394C; --maroon-lift: #BE6A80; --maroon-glow: #CB7C90; --forest: #3A3742; --forest-deep: #2A2831; --forest-lift: #4C4857; --gold: #C6A07A; --gold-soft: #E3C7AA; --peach: #F2D8CC; --paper: #FAF6F3; --paper-warm: #F1E9E4; --paper-2: #E9DFD9; --paper-3: #D9CCC5; --ink: #241E22; --ink-2: #453B41; --ink-3: #6C6169; }