/* ============================================================ Meow Homez — THEME TOKENS (single source of truth) ------------------------------------------------------------ Palette: PINE & CLAY — deep pine green (trust, calm, boutique) + warm clay/apricot (feline warmth) on a warm ivory canvas. To rebrand the whole website, edit ONLY this file. • Colours → change the primitives below • Fonts → change --font-head / --font-body (and the Google Fonts in each page's ) • Shape → radii / shadows This is the ONE theme for the ENTIRE app — the marketing site AND the booking app both load this exact file (same origin, served at /theme.css). Edit colours/fonts here once and every page, the booking form, and the admin all change together. ============================================================ */ :root{ /* ——— 1 · COLOUR PRIMITIVES ——————————————————————————— */ /* pine (brand green) */ --pine-950:#0F1D17; /* deepest — footer base, dark bands */ --pine-900:#152720; /* dark band / price bar */ --pine-800:#1E3830; /* dark surface / hero veil */ --pine-700:#27493E; /* strong text accents, hovers (9.3:1) */ --pine-600:#2F5749; /* PRIMARY — buttons, links (8.1:1 w/ white) */ --pine-500:#3B6B5A; /* lighter interactive */ --pine-100:#DCE7DE; /* pale pine tint */ --pine-50:#EEF3EE; /* faint pine wash (tiles) */ /* clay (warm accent) */ --clay-700:#9C4826; /* deep clay */ --clay-600:#B4552F; /* ACCENT on light — .em, eyebrows (4.6:1 on ivory) */ --clay-500:#C2643C; /* accent hover / large-text accent */ --clay-400:#D97E52; /* mid clay (decorative) */ --clay-300:#E8A87E; /* ACCENT on dark (6.2:1 on pine-800) */ --clay-200:#F2CDB2; /* soft clay — borders, chips */ --clay-100:#F9E8DA; /* pale clay tint */ --clay-50:#FBF1E8; /* faint clay wash (tiles) */ /* neutrals (warm) */ --ivory:#FAF7F2; /* page background */ --paper:#FDFBF7; /* raised warm white (panels) */ --sand:#F1EBE2; /* recessed panel tint */ --white:#fff; --ink:#20302A; /* body text (12.9:1 on ivory) */ --ink-2:#3A4A42; /* softer body text (8.8:1 on ivory) */ --muted:#5A6B63; /* secondary text (5.3:1 on ivory) */ --line:#E3DCD0; /* hairlines / card borders */ --line-strong:#D3C9B8;/* form-control borders */ /* status */ --ok:#177A57; /* success (5.0:1 on ivory) */ --ok-tint:#E6F2EC; --bad:#B23A2E; /* error (5.9:1 on white) */ --bad-tint:#FAEAE7; --warn-ink:#6E4E14; /* caution text (6.9:1 on warn tint) */ --warn-tint:#FBF2E3; --warn-line:#EBD9B8; /* ——— 2 · SEMANTIC ROLES ————————————————————————————— */ --brand:var(--pine-600); --brand-strong:var(--pine-700); --brand-deep:var(--pine-900); --accent:var(--clay-600); /* accent as text on light */ --accent-bright:var(--clay-300); /* accent as text on dark */ --bg:var(--ivory); --surface:var(--white); /* ——— 3 · TYPE ———————————————————————————————————————— */ --font-head:'Fraunces',Georgia,serif; /* display + emotional emphasis */ --font-body:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif; /* body + UI */ --fs-xs:12.5px; --fs-sm:14px; --fs-base:16px; --fs-md:17px; --fs-lg:20px; /* Design refresh 2026-08-06 — FLUID DISPLAY SIZES. These four were literal px and there was not one clamp() in 61KB of CSS, so a 390px phone rendered a 44px page H1 and 34px section heads against 14.5px card copy — an inverted hierarchy that also stretched the homepage to ~14,200px. The clamp() floor is what a phone gets, the ceiling is exactly today's desktop value, so NO desktop layout moves. Body sizes stay fixed on purpose: 16px is the floor, not a suggestion. */ --fs-xl:clamp(21px,4.6vw,26px); --fs-2xl:clamp(25px,6vw,34px); --fs-3xl:clamp(30px,7.4vw,44px); --fs-hero:clamp(34px,8.2vw,52px); /* ——— NEUMORPHIC DEPTH (owner 2026-08-09) ————————————————————————————————————————— Soft-UI shadows for buttons and nav pills. The reference shot pairs them with #9dabc0 text on #f1f3f6 — MEASURED AT 2.09:1, less than half the 4.5:1 WCAG AA needs and under even the 3:1 allowed for icons. So the SHADOWS are adopted and the COLOURS are not: every surface below keeps the brand ink it already had, which is why "Book a stay" measures 12.62:1 (white on pine — it was briefly soft on 2026-08-09 and went straight back) and the nav links 13.39:1. Neumorphism is a lighting model, not a palette — the demo conflates them, and this site has already been burned once by a low-contrast button (2026-08-08, the gold sheen at 4.88:1 with a 58° hue drift, which the owner rejected on sight). Two shadows make the shape: a warm dark one down-right, a near-white one up-left, both tinted toward the pine/paper brand rather than the demo's blue-grey. --nu-press is the same pair turned INWARD, which is what makes a press feel like a press instead of a colour change. */ /* TONED DOWN 2026-08-09 (owner: "too much button light bleed"). Was .92 alpha at 12px blur, which on a near-white page is a visible white halo rather than a light source — and on the dark bands it read as an outright glow around the pill. .55 at 7px keeps the soft edge that makes the shape read as raised, without the button appearing to emit light. */ --nu-light:rgba(255,255,255,.55); --nu-dark:rgba(47,87,73,.13); --nu-raise:4px 4px 7px var(--nu-dark), -4px -4px 7px var(--nu-light); --nu-raise-sm:2px 2px 5px var(--nu-dark), -2px -2px 5px var(--nu-light); --nu-press:inset 3px 3px 6px var(--nu-dark), inset -3px -3px 6px var(--nu-light); /* --nu-raise-lg lived here for one afternoon, for the fully-soft CTA. That CTA went back to brand green the same day, leaving the token with zero consumers — so it is deleted rather than kept "in case", exactly as the ten --sp-* spacing tokens were. A token nobody reads is a comment with extra syntax. */ /* ——— MATERIAL ELEVATION (owner 2026-08-09) ———————————————————————————————————————— For the three card families the owner named: the pricing plans, the seasonal/holiday cards and the Member Pass grid. Material's signature is a TWO-LAYER shadow — a tight key light close to the surface plus a soft ambient one — which is what makes a card look lifted off the page rather than merely outlined. Kept from the reference: the doubled shadow, the springy overshoot curve, the scale-on-hover. Changed on purpose: · shadows tinted pine (15,29,23) instead of pure black, like every other shadow here. Neutral black on a warm ivory page reads as grey dirt under the card. · brand radius, NOT the sample's 4px. Material Design 3 itself moved to 12–16px, and a 4px corner would fight every other corner on the site — nav, buttons, images, inputs. This sits alongside the neumorphic buttons rather than fighting them: soft-UI for things you PRESS, Material elevation for things that hold information. Two languages, split by role. */ --md-rest:0 6px 10px rgba(15,29,23,.08), 0 1px 6px rgba(15,29,23,.05); --md-hover:0 10px 20px rgba(15,29,23,.12), 0 4px 8px rgba(15,29,23,.07); --md-ease:cubic-bezier(.155,1.105,.295,1.12); /* ——— 4 · SPACING — deliberately NOT tokenised (owner ruling 2026-08-07) ———————— Ten --sp-* tokens lived here for the life of this design system with ZERO consumers, and were flagged as an outstanding item in five consecutive review passes. They are removed rather than adopted, and the reasoning is worth keeping because it is the opposite of the call made for type two paragraphs above: The type fold was safe for one specific reason — 12.5/14/16/17/20px were BYTE-EXACT matches for --fs-xs/sm/base/md/lg, so consuming the tokens moved nothing, and that was provable by computing both versions across 264 element/width pairs. Spacing has no such property. The scale here was 4/8/12/16/24/32/40/56/72/96, while the ~200 real spacing declarations in styles.css and components.css are mostly 14, 18, 22, 30 and 45. Folding those means either moving vertical rhythm on five money pages, or inventing a token per exception until the scale is not a scale. Neither is worth it on a site that is converting. So: no spacing tokens, spacing stays literal, and the design-system item is CLOSED rather than carried forward a sixth time. If a page is ever rebuilt from scratch, define the scale then, against real values. A token nobody reads is a comment with extra syntax. */ /* ——— 5 · SHAPE ——————————————————————————————————————— */ --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:24px; --r-full:999px; --max:1120px; /* ——— 6 · ELEVATION (pine-tinted, consistent scale) ——— */ --shadow-xs:0 1px 2px rgba(15,29,23,.06); --shadow-sm:0 1px 2px rgba(15,29,23,.05), 0 6px 16px rgba(15,29,23,.07); --shadow-md:0 2px 4px rgba(15,29,23,.05), 0 14px 34px rgba(15,29,23,.10); --shadow-lg:0 4px 10px rgba(15,29,23,.06), 0 28px 60px rgba(15,29,23,.16); --shadow:var(--shadow-md); /* ——— 7 · MOTION ————————————————————————————————————— */ --ease:cubic-bezier(.2,.7,.2,1); --dur-fast:160ms; --dur:240ms; --dur-slow:400ms; /* ——— 8 · FOCUS ——————————————————————————————————————— */ --focus:2px solid var(--clay-500); /* Design review 2026-08-06: the old ring was a single rgba(194,100,60,.28) glow measuring ~1.4:1 against the field it sat on — under SC 1.4.11's 3:1 floor for a focus indicator, and the ONLY indicator on inputs, which set outline:none. Two rings instead: a paper-coloured spacer so the indicator reads on tinted washes and inside cards, then a solid pine-700 ring (9.3:1 on ivory). box-shadow follows the element's own border-radius, so pills stay pills — which is why styles.css no longer needs to force border-radius:6px on :focus-visible. */ --focus-ring:0 0 0 2px var(--paper), 0 0 0 4.5px var(--pine-700); --focus-ring-dark:0 0 0 2px var(--pine-900), 0 0 0 4.5px var(--clay-200); /* ——— 9 · BACKGROUND LAYERS (dual/tri-tone patterned canvas) — CSS-only texture: warm ivory base + faint clay & pine washes + a whisper-quiet two-tone paw tile (inline SVG — no assets) + a pine dot grid for tinted section bands. Consumed by styles.css (marketing) and the booking form background. Keep alphas ≤ .06 so text contrast / WCAG AA is untouched. Never pair these with background-attachment:fixed (iOS). */ --bg-wash-clay:radial-gradient(900px 520px at 8% -10%,rgba(232,168,126,.16) 0%,transparent 62%); --bg-wash-pine:radial-gradient(820px 480px at 104% -6%,rgba(47,87,73,.08) 0%,transparent 58%); --bg-pattern-paws:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='%232F5749' fill-opacity='.045' transform='translate(78 86) rotate(-18)'%3E%3Cellipse cx='0' cy='9' rx='10.5' ry='8'/%3E%3Cellipse cx='-11' cy='-3' rx='4.2' ry='5.6'/%3E%3Cellipse cx='-4' cy='-8.5' rx='4.2' ry='5.6'/%3E%3Cellipse cx='4' cy='-8.5' rx='4.2' ry='5.6'/%3E%3Cellipse cx='11' cy='-3' rx='4.2' ry='5.6'/%3E%3C/g%3E%3Cg fill='%23B4552F' fill-opacity='.05' transform='translate(256 246) rotate(14)'%3E%3Cellipse cx='0' cy='9' rx='10.5' ry='8'/%3E%3Cellipse cx='-11' cy='-3' rx='4.2' ry='5.6'/%3E%3Cellipse cx='-4' cy='-8.5' rx='4.2' ry='5.6'/%3E%3Cellipse cx='4' cy='-8.5' rx='4.2' ry='5.6'/%3E%3Cellipse cx='11' cy='-3' rx='4.2' ry='5.6'/%3E%3C/g%3E%3C/svg%3E"); --bg-paws-size:360px; --bg-pattern-dots:radial-gradient(rgba(47,87,73,.055) 1px,transparent 1.45px); --bg-dots-size:24px; /* ——— 9b · SECTION WASH PALETTE (gradient handoff tones) —— Five ultra-low-saturation tones used by the per-section gradient bands in styles.css (.wash-*). Adjacent sections hand off colour: one band's END tone is the next band's START tone, so the page scrolls as one continuous wash. Contrast audit (WCAG, worst-case = deepest tones): --ink #20302A ≥ 11.3:1 on all five AA/AAA ✓ --ink-2 #3A4A42 ≥ 8.1:1 on all five AA/AAA ✓ --muted #5A6B63 ≥ 4.8:1 on all five AA ✓ --ok #177A57 ≥ 4.6:1 on all five AA ✓ --clay-700 #9C4826 ≥ 5.3:1 on all five AA ✓ (--clay-600 is 4.4:1 on the mists → .wash scopes eyebrows/.em to --clay-700; see styles.css) Keep these light — darkening them breaks the audit above. */ --wash-ivory:#FAF7F2; /* = --ivory · neutral handoff tone */ --wash-pine-1:#F0F4F0; /* pine mist */ --wash-pine-2:#E9F0EA; /* pine mist, deep (darkest green tint) */ --wash-clay-1:#FBF2E9; /* clay mist */ --wash-clay-2:#F8ECDF; /* clay mist, deep (darkest warm tint) */ /* ============================================================ LEGACY WEBSITE ALIASES — the site CSS and the markup that web-pricing.js / web-content.js generate reference these names (--teal-d, --gold, …). They now point at PINE & CLAY. Keep them, or the live-rendered pricing/content loses colour. ============================================================ */ --teal:#2F5749; /* = --pine-600 (primary) */ --teal-d:#27493E; /* = --pine-700 (strong / hover) */ --teal-dd:#152720; /* = --pine-900 (footers, dark bands) */ --gold:#E8A87E; /* = --clay-300 (accent on dark) */ --gold-d:var(--clay-700); /* UX-42 (2026-07-28 audit): was flattened #B4552F (clay-600), which measures 4.11:1 on --goldP and 4.40:1 on --cream — under AA's 4.5:1 for the small bold chips both SPAs set in this token. clay-700 (#9C4826) reads 5.22:1 / 5.60:1 on the same tints — the exact move styles.css already made for marketing eyebrows (lines 117-119 above). Pointing at the primitive (not a new literal) so the next palette change propagates instead of stranding this alias again. */ --cream:#FAF7F2; /* = --ivory (page background) */ --glass:rgba(255,255,255,.62); --glass-bd:rgba(255,255,255,.75); /* ============================================================ BOOKING-APP ALIASES — the booking form + admin use --mar / --mar2 / --wine / --gold* / --disp / --body etc. Flattened to literal values (not nested var()) on purpose: nested custom properties failed to resolve in some browsers here. Keep in sync with the pine/clay primitives above (--mar = --pine-600 · --mar2 = --pine-700 · --wine = --pine-900). ============================================================ */ --mar:#2F5749; /* booking primary = pine-600 */ --mar2:#27493E; /* booking strong = pine-700 */ --wine:#152720; /* booking darkest = pine-900 */ --goldS:#F2CDB2; /* soft clay (borders/accents) = --clay-200 */ --goldP:#F9E8DA; /* pale clay (tints/tracks) = --clay-100 */ --beige:#F1EBE2; /* panel tint = --sand */ --inks:#5A6B63; /* booking secondary text = --muted */ --gr:#2F5749; /* gauge / done-state = --pine-600 */ --disp:'Fraunces',Georgia,serif; --body:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif; --rad:20px; --radS:12px; /* booking radii */ --sh:0 2px 4px rgba(15,29,23,.05), 0 14px 34px rgba(15,29,23,.10); /* ——— MOTION ———————————————————————————————————————————— One curve, named, so every surface eases the same way. This IS the curve the app already used by hand in six places (.card rise, the bottom sheet, the walking cats' jump) — it is written down here so the seventh place does not invent a new one. It is a strong ease-out: fast at the start, where the eye is watching. Never use ease-in on UI — the delay lands on exactly the frames the user is judging responsiveness by. ============================================================ */ --e-out:cubic-bezier(.2,.7,.2,1); /* entering / appearing */ --e-io:cubic-bezier(.77,0,.175,1); /* moving on screen */ }