/* ========================================================================== Anna Wang Stylist — Design Tokens Per Anna Wang Brand Guidelines 2026, via the Falconix wireframe & copy deck. See DESIGN-SPEC.md for the measured contrast table and the one deviation. ========================================================================== */ :root { /* --- Brand palette ---------------------------------------------------- Proportions from the brand guidelines: Mylk ~50%, Sandalwood ~18%, Sage ~14%, Rose Ash ~12%. Deep Olive is text, fine lines and buttons ONLY — never a large ground. There are no dark sections. */ --aw-mylk: #F1EEE8; /* primary ground */ --aw-sandalwood: #D6C3B6; /* panels */ --aw-sage: #B7B29C; /* accent bands, logo ground */ --aw-rose-ash: #C9B5B1; /* accent bands, logo ground */ --aw-olive: #222222; /* all text, fine lines — BLACK */ --aw-olive-brand: #58583F; /* Deep Olive for solid buttons and timeline line */ --aw-olive-brand-hover: #4A4A38; /* darker Deep Olive on hover */ /* NOT a sixth brand colour: a darker Deep Olive used only as the primary button's hover state. The brand kit's five tones are grounds and ink; interaction states have to be derived, exactly as --aw-olive-line and --aw-olive-wash are. It previously carried the footer as an invented GROUND, which the kit excludes - the logo sits "on soft grounds only: Mylk, Sage, Rose Ash or Sandalwood" - so the footer moved to Sandalwood and this is no longer a background anywhere. */ --aw-olive-deep: #111111; /* Second deviation, pending Anna's approval. Small text that is deliberately exempt from the .aw-band 24px floor (labels, carousel controls, quote attributions) cannot reach 4.5:1 in Deep Olive on ANY band ground — Rose Ash 3.7:1, Sandalwood 4.3:1, Sage 3.4:1. This darkened olive is the lightest value clearing 4.5:1 on all three (5.0 / 5.8 / 4.6). Note --aw-olive-deep would NOT serve here: it is only 4.2:1 on Sage. */ --aw-olive-ink: #222222; /* --- Derived tints (same hues, for hairlines and hovers) -------------- */ --aw-olive-muted: #666666; /* secondary text on Mylk — ~5:1 */ --aw-olive-line: rgba(0, 0, 0, 0.22); /* hairlines and borders */ --aw-olive-wash: rgba(0, 0, 0, 0.05); /* hover washes */ /* --- Measured contrast, for reference --------------------------------- Olive on Mylk .......... 6.3:1 body text, passes AA Olive on Sandalwood .... 4.3:1 LARGE TEXT ONLY (>=24px) Olive on Rose Ash ...... 3.8:1 LARGE TEXT ONLY Olive on Sage .......... 3.4:1 LARGE TEXT ONLY Mylk on Sage ........... 1.8:1 NEVER USE for text Mylk on Deep Sage ...... 7.8:1 footer, passes AA Olive Ink on Rose Ash .. 5.0:1 small band text, passes AA Olive Ink on Sandalwood 5.8:1 small band text, passes AA Olive Ink on Sage ...... 4.6:1 small band text, passes AA Re-measured 5 October 2026 with a scripted WCAG walker; every ratio above was confirmed to within 0.01. See ACCESSIBILITY-AUDIT.md. Enforced by .aw-band, which sets a 24px floor on band text and routes the small-text exceptions to --aw-olive-ink. */ /* --- Feedback --------------------------------------------------------- */ --aw-error: #8C3A1E; /* on Mylk — 6.6:1 */ /* --aw-error-deep removed with the dark footer: a pale peach only legible on a dark ground, and it had exactly one user (.aw-footer .aw-todo). */ /* --- Asset base (repoint to the GHL media library in one edit) -------- */ --aw-asset-base: "assets/img"; /* --- Type families ---------------------------------------------------- Headings, pull quotes and names are Cormorant Garamond ITALIC. Body, labels and details are Figtree. */ --aw-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --aw-font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* --- Type scale ------------------------------------------------------- */ --aw-text-label: 0.6875rem; /* 11px — small-caps labels */ --aw-text-xs: 0.8125rem; /* 13px — meta */ --aw-text-sm: 0.9375rem; /* 15px — captions */ --aw-text-base: 1rem; /* 16px — body floor */ --aw-text-lg: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem); --aw-text-band: clamp(1.5rem, 0.6vw + 1.35rem, 1.75rem); /* 24px floor, band text */ --aw-text-xl: clamp(1.375rem, 0.6vw + 1.2rem, 1.625rem); --aw-text-2xl: clamp(1.75rem, 1.2vw + 1.4rem, 2.25rem); --aw-text-3xl: clamp(2.125rem, 2.2vw + 1.5rem, 3rem); --aw-text-4xl: clamp(2.5rem, 3.4vw + 1.5rem, 4.25rem); --aw-text-5xl: clamp(2.875rem, 4.6vw + 1.5rem, 5.25rem); /* Hero headline only. The display scale previously topped out at 5xl, which left the h1 (84px) too close to a section h2 (48px) for the hierarchy to read on screen. */ --aw-text-6xl: clamp(3rem, 5.4vw + 0.5rem, 6rem); /* --- Type detail ------------------------------------------------------ */ --aw-leading-tight: 1.1; /* display headings */ --aw-leading-snug: 1.3; --aw-leading-body: 1.6; --aw-tracking-label: 0.28em; /* small-caps labels — the kit specifies +28% */ --aw-tracking-wide: 0.14em; --aw-measure: 68ch; /* --- Spacing ---------------------------------------------------------- */ --aw-space-2xs: 0.25rem; --aw-space-xs: 0.5rem; --aw-space-sm: 0.75rem; --aw-space-md: 1.5rem; --aw-space-lg: 2.5rem; --aw-space-xl: 4rem; --aw-space-2xl: 6rem; --aw-space-3xl: clamp(4.5rem, 9vw, 8.5rem); /* --- Vertical rhythm --------------------------------------------------- Every section used to share --aw-space-3xl, which is why the page read as a stack of evenly-spaced rows. These three steps let sections breathe unevenly: quiet sections compress, the crescendo sections open up. --aw-rhythm is identical to --aw-space-3xl, so anything that does not opt in to a modifier is unchanged. */ --aw-rhythm-tight: clamp(3rem, 5vw, 5rem); --aw-rhythm: clamp(4.5rem, 9vw, 8.5rem); --aw-rhythm-loud: clamp(6rem, 13vw, 12rem); /* --- Wordmark flight --------------------------------------------------- Fraction of the flight over which the 360 deg horizontal turn completes. A full turn necessarily passes through edge-on at 90/270 deg and fully mirrored text at 180 deg; finishing the spin early makes those a flourish rather than something the eye sits on. 1 spreads it over the whole flight, which is what the first build did. */ --aw-spin-span: 0.35; /* --- Layout ----------------------------------------------------------- */ /* The fixed header's height. Three rules depend on it - the bar's own min-height, the hero stage's top padding and the pagehead's - and if they disagree, content slides under the bar on whichever page nobody checked. One token so they cannot drift. */ --aw-header-h: 6.25rem; /* 100px - fits the stacked lockup legibly */ --aw-gutter: 1rem; --aw-gutter-lg: 2.5rem; --aw-max: 78rem; --aw-max-narrow: 44rem; /* --- Motion ----------------------------------------------------------- */ --aw-dur-fast: 180ms; --aw-dur: 260ms; --aw-dur-slow: 700ms; /* scroll reveals — unhurried, romantic */ --aw-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* Entrance choreography. The defaults are deliberately identical to the values the scroll reveal already used, so the 45 reveals still live on the inner pages do not shift when they start reading these instead. */ --aw-enter-dur: var(--aw-dur-slow); /* 700ms */ --aw-enter-stagger: 90ms; /* between siblings in a group */ --aw-enter-rise: 20px; /* matches .aw-reveal's translateY */ /* Blur-in (the Signature band). Per word, so the stagger is much tighter than the per-section one above or a headline takes seconds to land. */ --aw-blur-amount: 10px; --aw-blur-stagger: 60ms; --aw-radius: 0px; /* editorial: square corners throughout */ } @media (min-width: 48rem) { :root { --aw-gutter: var(--aw-gutter-lg); } }