/* ========================================================================== Havilah Cottage — design tokens The ONLY stylesheet permitted to contain raw color values (CLAUDE.md §7). Values are fixed by SKILL.md §2.1–2.3; contrast ratios there are verified, and `node scripts/check-brand.mjs` re-checks every pair. ========================================================================== */ :root { /* --- Brand palette ---------------------------------------------------- Source: the official brand colour sheet kept beside SKILL.md (supplied 2026-10-02). Fixed by the brand — never adjust. Roles follow the sheet's usage guide; pairs are verified in SKILL.md §2.1. (The sheet's filename is misspelt, so it is not quoted here — the guard's name rule would flag it.) */ --c-purple-dark: #4B0082; /* main text & strong elements: headings, primary buttons, dark bands */ --c-purple-medium: #7D26CD; /* supporting elements & highlights: links, hovers */ --c-purple-light: #B54CFF; /* accents & soft highlights — never text (3.86:1 on white) */ --c-gold-dark: #8A5E1A; /* gold on light surfaces: icons, focus ring, marks (5.32:1 on ivory) */ --c-gold-light: #FFD27A; /* gold on dark surfaces only (9.10:1 on purple-dark; 1.42:1 on white) */ /* --- Derived surfaces & neutrals — not brand colours ------------------- */ --c-ivory: #FBF7F0; /* page background: the guide's "warm cream/white" */ --c-lavender: #F2E9FA; /* alternating band: 10% purple-medium on white */ --c-lavender-light: #F9F4FD; /* testimonials band: 5% purple-medium on white, between ivory and lavender */ --c-white: #FFFFFF; /* form surfaces, cards on lavender */ --c-charcoal: #2E2A33; /* body text 13.2:1 on ivory */ --c-muted: #5E5866; /* secondary text, hints 6.42:1 on ivory */ --c-error: #B3261E; /* form errors — always paired with text 6.5:1 on white */ --c-success: #2E6B3F; /* success states 6.4:1 on white */ /* --- Alpha variants: derived, no new hues ------------------------------ */ --c-purple-dark-a12: color-mix(in srgb, var(--c-purple-dark) 12%, transparent); --c-purple-dark-a20: color-mix(in srgb, var(--c-purple-dark) 20%, transparent); --c-purple-dark-a50: color-mix(in srgb, var(--c-purple-dark) 50%, transparent); --c-purple-dark-a85: color-mix(in srgb, var(--c-purple-dark) 85%, transparent); --c-ivory-a70: color-mix(in srgb, var(--c-ivory) 70%, transparent); --c-ivory-a85: color-mix(in srgb, var(--c-ivory) 85%, transparent); --c-gold-light-a20: color-mix(in srgb, var(--c-gold-light) 20%, transparent); --c-gold-light-a40: color-mix(in srgb, var(--c-gold-light) 40%, transparent); --c-gold-dark-a40: color-mix(in srgb, var(--c-gold-dark) 40%, transparent); /* --- Brand gradients (the sheet: purple runs LEFT TO RIGHT) ------------ */ --g-purple: linear-gradient(90deg, var(--c-purple-dark), var(--c-purple-medium), var(--c-purple-light)); /* decorative only — never under text */ --g-purple-deep: linear-gradient(90deg, var(--c-purple-dark), var(--c-purple-medium)); /* dark bands that carry text */ --g-gold: linear-gradient(135deg, var(--c-gold-dark), var(--c-gold-light) 48%, var(--c-gold-dark)); /* never text, never a state */ /* Photo overlays. Stops are measured: purple-dark stays >= .62 under the lede (to 52% width) and >= .50 under the H1 (to 64%), so white text holds 4.5:1 even over a pure-white pixel. */ --g-hero-scrim-v: linear-gradient(180deg, color-mix(in srgb, var(--c-purple-dark) 66%, transparent) 0%, color-mix(in srgb, var(--c-purple-dark) 78%, transparent) 45%, color-mix(in srgb, var(--c-purple-dark) 88%, transparent) 100%); --g-hero-scrim-h: linear-gradient(90deg, color-mix(in srgb, var(--c-purple-dark) 92%, transparent) 0%, color-mix(in srgb, var(--c-purple-dark) 85%, transparent) 45%, color-mix(in srgb, var(--c-purple-dark) 70%, transparent) 64%, color-mix(in srgb, var(--c-purple-medium) 30%, transparent) 82%, color-mix(in srgb, var(--c-purple-light) 14%, transparent) 100%); --g-tile-label: linear-gradient(to top, color-mix(in srgb, var(--c-purple-dark) 90%, transparent) 0%, color-mix(in srgb, var(--c-purple-dark) 85%, transparent) 55%, transparent 100%); /* --- Type ------------------------------------------------------------- */ --ff-head: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif; --ff-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs-sm: 0.875rem; --fs-base: 1.125rem; /* 18px body */ --fs-h4: clamp(1.25rem, 1.1rem + .5vw, 1.4rem); --fs-h3: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); --fs-h1: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); /* One step above h1, for a hero whose type is the whole composition (no CTA row, no ornament). Not a heading level: only a page hero uses it, and the element stays an h1. 40px at 320 to 72px from about 1300. */ --fs-display: clamp(2.5rem, 1.75rem + 3.6vw, 4.5rem); --lh-body: 1.65; --lh-head: 1.15; --measure: 68ch; --fw-body: 400; --fw-bold: 700; --fw-head: 600; --fw-head-strong: 700; --tracking-head: -0.01em; /* --- Space ------------------------------------------------------------ */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --section-y: var(--s-9); /* desktop override in layout.css */ --gutter: clamp(1rem, 4vw, 2.5rem); --container: 72rem; /* --- Shape ------------------------------------------------------------ */ --r-sm: 6px; /* inputs, tags */ --r-md: 12px; /* cards */ --r-pill: 999px; /* buttons */ --r-arch: 50% 50% 12px 12px / 38% 38% 12px 12px; /* the signature cottage arch */ --r-arch-sm: 50% 50% 8px 8px / 30% 30% 8px 8px; /* the arch at portrait size */ /* The cottage door: the arch at panel size. The rise is fixed (not a percentage) so a tall form panel keeps a doorway-shaped top. */ --r-door-rise: clamp(7rem, 22vw, 12rem); --r-door: 50% 50% var(--r-md) var(--r-md) / var(--r-door-rise) var(--r-door-rise) var(--r-md) var(--r-md); /* Roofline ornament: two gables echoing the logo's roof. A mask shape only — it is filled with --g-gold where it is used (the CTA band rule). */ --shape-roofline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18 20 6l12.8 8.5M28 18 50 2l20 16'/%3E%3C/svg%3E"); /* --- Depth: rare, tinted purple — never grey (SKILL.md §2.3) ----------- */ --shadow-lift: 0 1px 2px color-mix(in srgb, var(--c-purple-dark) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--c-purple-dark) 8%, transparent); --shadow-header: 0 1px 2px color-mix(in srgb, var(--c-purple-dark) 5%, transparent), 0 4px 16px color-mix(in srgb, var(--c-purple-dark) 7%, transparent); /* --- Motion ------------------------------------------------------------ */ --dur-fast: 140ms; --dur: 240ms; --dur-slow: 600ms; --ease-out: cubic-bezier(.2, .7, .3, 1); /* The testimonial carousel slide (SKILL.md §2.5, decision P24): one card per move, manual or automatic, 450 to 600ms by the brief. testimonials.js reads both, so they stay the one source. Ease-in-out: it gathers, glides, then settles. */ --dur-slide: 520ms; --ease-slide: cubic-bezier(.65, 0, .35, 1); /* --- Focus ------------------------------------------------------------- */ --focus-w: 3px; --focus-offset: 3px; --focus-color: var(--c-gold-dark); /* light surfaces, 5.32:1 on ivory */ --focus-color-on-dark: var(--c-gold-light); /* dark & gradient surfaces, >= 4.87:1 */ /* --- Layering ---------------------------------------------------------- */ --z-hero-media: 0; --z-hero-scrim: 1; --z-hero-content: 2; --z-header: 100; --z-drawer: 200; --z-skip: 300; }