/* ═══════════════════════════════════════════════════════════════════════════ SKOOL OF DROOL: the member portal's colours, in one place 22 October 2026. Viviana asked for the portal to use the same colours as "Version 2" of her own dashboard (staging/public/dashboard/ceo2/): the pastel rainbow, bolder headings, soft fills with dark readable writing, and the eight-colour strip. Flat, dull colour is hard for her to engage with. The palette below is Version 2's, value for value. The layout, the copy and the behaviour are unchanged; the only reflow is where a bolder word is a little wider than it was. THIS FILE IS THE ONLY PLACE A COLOUR IS CHOSEN. portal.html, auth.css and style.css link or sit beside it and none of them may write a hex of their own. Three pages each picking their own teal is how the portal once ended up with #5A9E94, #7DBCB3 and #3F7F76 side by side. It loads AFTER /style.css on the portal, so where a name appears in both, this file wins. HOW VERSION 2 KEEPS WRITING READABLE, AND SO DOES THIS FILE Three shades of every colour, three jobs, and they never swap: --c-* the PASTEL: a fill (a button, a day, a tab, a bar). Behind it the writing is always --ink, never grey and never white: ink on any pastel is 5.9:1 or better. --w-* the WASH: a quiet surface (a card, a box). Writing on it is --ink (11.8:1 or better) or --ink-mid (7.2:1 or better). --d-* the DEEP shade: the only coloured writing, plus borders and rings. On its own wash it is 5.3:1 or better, on white 5.9:1 or better. Pastel is never text and white is never put on a pastel. --ink-soft is for things that are not writing (a resting dot), never for a sentence: it is just under 4.5:1 on white and less on everything else. ONE ERROR, ONE SUCCESS. --error is Version 2's rose deep shade (#9A3838); --ok is its mint. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── surfaces ───────────────────────────────────────────────────────────── */ --cream:#FDF8F0; /* the page itself */ --cream-warm:#FAF0E0; /* the quiet inset: a disabled day, a small chip */ --white:#fff; /* a row, a field, a button's resting face */ --sea-wash:#E8F5F2; /* Version 2's --teal-wash. Kept for anything that still names it. */ --peach-pale:#FDE8D4; /* warm surface: a day we are closed, a day that has been requested */ /* ── ink ────────────────────────────────────────────────────────────────── */ --ink:#3B2A1A; /* body text, and the writing on every pastel */ --ink-mid:#5C4A38; /* the second line: meta, hints, dates. On washes and white, never on a pastel. */ --ink-soft:#8B7355; /* not writing: the resting status dot */ --line:rgba(139,115,85,.24); /* --ink-soft at 24%: a hairline between rows */ --hair:rgba(59,42,26,.08); /* the hairline under the header */ --glass:rgba(253,248,240,.92);/* --cream at 92%: the translucent header bar */ /* ── the teal ───────────────────────────────────────────────────────────── */ /* Version 2's own accessible teal (4.66:1 on white). No component draws with it any more: each section has its own rainbow colour below. Kept so a link or a page that still names it does not fall back to nothing. */ --sea-ink:#3F7F76; /* ── the warm accent ────────────────────────────────────────────────────── */ --peach:#F0B088; --peach-deep:#9C5A2E; /* Version 2's warm deep shade */ /* ── the blue accent ────────────────────────────────────────────────────── */ --sky:#8AB4D0; /* decorative only: fails as text */ /* ── the chakra colours: the bar along the top ──────────────────────────── */ /* Viviana, 20 Sep 2026, asked for "a pop of colour... like the colour that goes along the bar at the top when we send the email". These are that bar's eight colours, in its order: execution/sod_email_drafts.py CHAKRAS, the live stylesheet's --chakra-* (same names, same values), Version 2's --c-*, and the eight hearts in her sign-off. Decorative only: never behind or under writing. */ --chakra-root:#E8A0A0; --chakra-sacral:#F0B888; --chakra-solar:#F0D488; --chakra-heart:#A0D8A0; --chakra-throat:#A0C8E8; --chakra-eye:#B8A0D8; --chakra-crown:#D8B0D0; --chakra-bond:#E0D8C8; /* Eight equal blocks with hard edges, like the email's eight table cells. */ --chakra-bar:linear-gradient(90deg, var(--chakra-root) 0, var(--chakra-root) 12.5%, var(--chakra-sacral) 12.5%, var(--chakra-sacral) 25%, var(--chakra-solar) 25%, var(--chakra-solar) 37.5%, var(--chakra-heart) 37.5%, var(--chakra-heart) 50%, var(--chakra-throat) 50%, var(--chakra-throat) 62.5%, var(--chakra-eye) 62.5%, var(--chakra-eye) 75%, var(--chakra-crown) 75%, var(--chakra-crown) 87.5%, var(--chakra-bond) 87.5%, var(--chakra-bond) 100%); /* ── Version 2's rainbow: pastel, wash, deep, per colour ────────────────── */ --c-root:var(--chakra-root); --c-sacral:var(--chakra-sacral); --c-solar:var(--chakra-solar); --c-heart:var(--chakra-heart); --c-throat:var(--chakra-throat); --c-eye:var(--chakra-eye); --c-crown:var(--chakra-crown); --c-bond:var(--chakra-bond); --w-root:#FCEDED;--w-sacral:#FDF1E6;--w-solar:#FDF7E1;--w-heart:#EAF7EA; --w-throat:#E8F2FB;--w-eye:#F1ECF9;--w-crown:#F8EEF6; --d-root:#9A3838;--d-sacral:#97511F;--d-solar:#6E5800;--d-heart:#2D6A36; --d-throat:#2A5D88;--d-eye:#5D4699;--d-crown:#86396F; /* Version 2's soft rainbow: five washes in a slow diagonal. Ink and --ink-mid read on every stop of it (11.3:1 and 6.9:1 or better). */ --soft-rainbow:linear-gradient(120deg,#fde8ef,#fff3d9 30%,#e6f5e3 55%,#e1effb 78%,#efe6fa); /* ── state: one colour each ─────────────────────────────────────────────── */ --ok:var(--c-heart); /* done: the rule on a "that worked" message */ --ok-bg:var(--w-heart); /* the surface under it */ --error:var(--d-root); /* the one red: error text, and the rule on an error message */ --error-bg:var(--w-root); /* the surface under it */ --blush:var(--c-sacral); /* still to do. A waiting state, not a failure. */ /* ── shape and depth ────────────────────────────────────────────────────── */ --r-s:10px; --r-m:18px; --r-l:28px; --r-pill:9999px; --sh-s:0 2px 12px rgba(59,42,26,.06); --sh-m:0 8px 32px rgba(59,42,26,.08); /* ── type ───────────────────────────────────────────────────────────────── */ --font-d:'Playfair Display',Georgia,serif; --font-b:'DM Sans',system-ui,sans-serif; /* Bolder, as Version 2 is: headings in Playfair 600 (they were 400), and every label, tab, button and name in DM Sans 700. */ --fw-display:600; --fw-strong:700; --ease:cubic-bezier(.16,1,.3,1); /* ── layout ─────────────────────────────────────────────────────────────── */ /* A customer moves between portal.html and the sign-in pages inside one journey, and a 640px page followed by a 720px page reads as two products. These live here so nobody has to keep two files in step. */ --pw:720px; /* the one measure */ --pp:18px; /* the one gutter */ --tap:44px; /* the one minimum touch target */ /* ── the hue a section is drawing with ──────────────────────────────────── */ /* Version 2 gives each section one colour and lets the pastel, the wash and the deep shade follow it. Components read --hue (fill), --hue-wash (surface) and --hue-deep (writing, borders). The default is sky; the map below says which section is which. */ --hue:var(--c-throat);--hue-wash:var(--w-throat);--hue-deep:var(--d-throat); } /* ═══════════════════════════════════════════════════════════════════════════ WHICH COLOUR IS WHICH SECTION Change a line here and that whole section, its tab, its buttons, its fields and its day boxes change with it. Selectors only; no component CSS is here. days (Schedule, Change days, Your first week) sky --c-throat booking (Extra days) mint --c-heart notes (Leave a note) lilac --c-eye details (the dog's Details, Your details) peach --c-sacral payments lemon --c-solar welcome, this week's question rose --c-root passing it on, a safe space for you pink --c-crown A dog's card takes the colour of whichever of its tabs is open, so Extra days turns the card mint and Leave a note turns it lilac. That uses :has(); a browser without it keeps the card sky and loses nothing else. ═══════════════════════════════════════════════════════════════════════════ */ /* sky: the days (the default, written out so the map is complete) */ #view-dogs,.pnav button[data-view="dogs"], .subnav button[data-p^="sch-"],.subnav button[data-p^="days-"], .subnav button[data-p^="first-"],.subnav button[data-p^="back-"]{ --hue:var(--c-throat);--hue-wash:var(--w-throat);--hue-deep:var(--d-throat)} /* mint: booking an extra day */ .subnav button[data-p^="extra-"],[data-member] .pcard{ --hue:var(--c-heart);--hue-wash:var(--w-heart);--hue-deep:var(--d-heart)} /* lilac: leaving a note */ .subnav button[data-p^="note-"]{ --hue:var(--c-eye);--hue-wash:var(--w-eye);--hue-deep:var(--d-eye)} /* peach: details, and anything that needs the family (a form still to fill in) */ .subnav button[data-p^="det-"],#view-details,.pnav button[data-view="details"], [data-forms] .pcard,#pay-body .pcard{ --hue:var(--c-sacral);--hue-wash:var(--w-sacral);--hue-deep:var(--d-sacral)} /* the dog's card follows its open tab. Each :has() rule stands alone: a browser that does not know :has() drops only that rule, never one of the rules above. */ .pcard[data-dog]:has(.panel.is-on[id^="extra-"]){ --hue:var(--c-heart);--hue-wash:var(--w-heart);--hue-deep:var(--d-heart)} .pcard[data-dog]:has(.panel.is-on[id^="note-"]){ --hue:var(--c-eye);--hue-wash:var(--w-eye);--hue-deep:var(--d-eye)} .pcard[data-dog]:has(.panel.is-on[id^="det-"]){ --hue:var(--c-sacral);--hue-wash:var(--w-sacral);--hue-deep:var(--d-sacral)} /* lemon: payments */ #view-payments,.pnav button[data-view="payments"]{ --hue:var(--c-solar);--hue-wash:var(--w-solar);--hue-deep:var(--d-solar)} /* rose: the welcome, and this week's question */ #welcome-slot .pcard,.qbox{ --hue:var(--c-root);--hue-wash:var(--w-root);--hue-deep:var(--d-root)} /* pink: passing it on, and the safe space at the foot of the page */ #referral-slot .pcard,.fb{ --hue:var(--c-crown);--hue-wash:var(--w-crown);--hue-deep:var(--d-crown)} /* lilac again for the Discovery Week report: it is the family's own record */ .disc{--hue:var(--c-eye);--hue-wash:var(--w-eye);--hue-deep:var(--d-eye)} /* The form-outstanding card and the Direct Debit card are written with an inline `background:var(--cream-warm)`. Pointing that variable at the card's own wash (or at white) is how they get Version 2's colours without touching the markup. */ [data-forms] .pcard{--cream-warm:var(--w-sacral)} #pay-body .pcard{--cream-warm:var(--white)} /* each dog gets a colour of their own, round the rainbow, so a family with three dogs sees three: the ring round the photo and the nub on its corner */ .dogpic:nth-child(7n+1){--dp:var(--c-root);--dpd:var(--d-root);--dpw:var(--w-root)} .dogpic:nth-child(7n+2){--dp:var(--c-sacral);--dpd:var(--d-sacral);--dpw:var(--w-sacral)} .dogpic:nth-child(7n+3){--dp:var(--c-solar);--dpd:var(--d-solar);--dpw:var(--w-solar)} .dogpic:nth-child(7n+4){--dp:var(--c-heart);--dpd:var(--d-heart);--dpw:var(--w-heart)} .dogpic:nth-child(7n+5){--dp:var(--c-throat);--dpd:var(--d-throat);--dpw:var(--w-throat)} .dogpic:nth-child(7n+6){--dp:var(--c-eye);--dpd:var(--d-eye);--dpw:var(--w-eye)} .dogpic:nth-child(7n+7){--dp:var(--c-crown);--dpd:var(--d-crown);--dpw:var(--w-crown)}