/* ============================================================= Women's Light Foundation — Design Tokens ------------------------------------------------------------- Colour values are sampled directly from the Foundation logo. The typographic scale, zero-radius geometry and spacing rhythm follow the reference architecture of the.akdn, adapted to a fluid, mobile-first scale. ============================================================= */ :root { /* --------------------------------------------------------- Brand — sampled from the logo artwork --------------------------------------------------------- */ --wlf-teal-900: #04343A; /* deepest — footer ground, mirrors reference #063443 */ --wlf-teal-800: #003236; /* overlays */ --wlf-teal-700: #00474B; /* ring shadow */ --wlf-teal-600: #005E62; /* PRIMARY — figures, outer ring */ --wlf-teal-500: #0B7276; /* hover lift */ --wlf-teal-400: #2B8C90; --wlf-teal-200: #A8CFD0; --wlf-teal-100: #D9E9E9; --wlf-teal-050: #D2E2E3; /* tinted section band — matches reference weight (#D0DCE0) */ --wlf-teal-025: #EDF4F4; /* lighter wash, for cards on tinted ground */ /* Sampled from the Foundation's official letterhead (the curved band on the Organizational Framework document). Slightly lighter than the logo teal; used for the sweep divider so print and web match. */ --wlf-teal-letterhead: #03686A; --wlf-gold-letterhead: #F0A825; --wlf-gold-700: #B06F00; --wlf-gold-600: #D98A0B; --wlf-gold-500: #F0A020; /* ACCENT — torch flame, path */ --wlf-gold-400: #FFC024; /* laurel leaves */ --wlf-gold-200: #FBCB82; /* inner ring */ --wlf-gold-100: #FEE9CD; /* sun glow */ --wlf-gold-050: #FFF7EA; /* --------------------------------------------------------- Neutrals --------------------------------------------------------- */ --wlf-ink: #323031; /* body copy — matches reference */ --wlf-ink-muted: #5F5E5E; --wlf-ink-soft: #7A7879; --wlf-line: #E3E1E2; --wlf-line-soft: #EFEDEE; --wlf-surface: #FFFFFF; --wlf-surface-2: #F7F6F5; --wlf-white: #FFFFFF; /* --------------------------------------------------------- Semantic roles --------------------------------------------------------- */ --color-primary: var(--wlf-teal-600); --color-primary-hover: var(--wlf-teal-500); --color-primary-deep: var(--wlf-teal-800); --color-accent: var(--wlf-gold-500); --color-accent-hover: var(--wlf-gold-400); --color-text: var(--wlf-ink); --color-text-muted: var(--wlf-ink-muted); --color-text-invert: var(--wlf-white); --color-bg: var(--wlf-surface); --color-bg-tint: var(--wlf-teal-050); --color-bg-warm: var(--wlf-gold-050); --color-border: var(--wlf-line); --color-link: var(--wlf-teal-600); --color-link-hover: var(--wlf-gold-600); --color-focus: var(--wlf-gold-500); /* Required-field marker and validation messages. Deliberately a muted brick rather than a pure red: it has to read as required without shouting on a form where every field carries it, and it clears 4.5:1 on white. */ --color-required: #B03A2E; /* --------------------------------------------------------- Typography Gotham (reference) has no open licence; Montserrat is the closest geometric sans with the same tall x-height and wide caps, and it carries full Latin-Extended for French. --------------------------------------------------------- */ --font-sans: "Montserrat", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: var(--font-sans); --font-head: var(--font-sans); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* --------------------------------------------------------- Type scale — matched to the reference site. Measured live: body 16/24 w400; h1 24/32 w700 uppercase ls 0.4px; h2 24/32 w700 uppercase ls 0.6px; h3 16/24 w500; label 12/20 w700 uppercase ls 0.3px. Their declared scale is 12 14 16 18 20 22 24 28 30 36 48 — every value below sits on it. --------------------------------------------------------- */ --fs-display: clamp(1.75rem, 1.40rem + 1.55vw, 2.25rem); /* 28 → 36 */ --fs-h1: 1.5rem; /* 24 — reference h1 */ --fs-h2: 1.5rem; /* 24 — reference h2 (same size as h1, by design) */ --fs-h3: 1.25rem; /* 20 */ --fs-h4: 1.125rem; /* 18 */ --fs-lead: 1.125rem; /* 18 */ --fs-body: 1rem; /* 16 — reference base */ --fs-small: 0.875rem; /* 14 — metadata only, as on the reference */ --fs-eyebrow: 0.75rem; /* 12 — reference label size */ --fs-micro: 0.75rem; /* 12 — reference scale bottoms out at 12 */ /* Reference line heights: 16/24 = 1.5 body, 24/32 = 1.333 headings */ --lh-tight: 1.2; --lh-heading: 1.333; --lh-snug: 1.4; --lh-body: 1.5; --lh-relaxed: 1.7; /* Reference tracking, converted from px at the size it was measured: h1 0.4px/24px, h2 0.6px/24px, label 0.3px/12px */ --ls-display: 0.017em; --ls-heading: 0.025em; --ls-eyebrow: 0.025em; --ls-button: 0.04em; /* --------------------------------------------------------- Spacing — 4px base unit, as measured on the reference --------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* Vertical rhythm between major page sections */ --section-y: clamp(3rem, 1.6rem + 6vw, 6rem); --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem); /* --------------------------------------------------------- Layout --------------------------------------------------------- */ /* Reference container is fluid: width 90% capped per breakpoint. */ --container-w: 90%; --container: 1160px; --container-text: 46rem; /* comfortable measure for prose */ --container-wide: 1440px; --header-h: 80px; /* measured on the reference: --header-height:80px */ --header-h-scroll: 68px; /* --------------------------------------------------------- Geometry — the reference uses square corners throughout. This is a deliberate signature, not an oversight. --------------------------------------------------------- */ --radius: 0; --radius-pill: 999px; /* filter chips only */ --border: 1px solid var(--color-border); --border-soft: 1px solid var(--wlf-line-soft); /* --------------------------------------------------------- Elevation — restrained; the design leans on rules, not shadow --------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12); --shadow-nav: 0 10px 30px rgba(0, 43, 46, 0.12); /* Gradient scrim so white text stays legible over photography */ --scrim: linear-gradient(to top, rgba(0, 43, 46, 0.88) 0%, rgba(0, 43, 46, 0.55) 35%, rgba(0, 43, 46, 0) 75%); --scrim-card: linear-gradient(to top, rgba(0, 43, 46, 0.92) 0%, rgba(0, 43, 46, 0.35) 55%, rgba(0, 43, 46, 0) 100%); /* --------------------------------------------------------- Motion --------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur: 250ms; --dur-slow: 450ms; /* --------------------------------------------------------- Stacking order --------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-megamenu: 250; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ------------------------------------------------------------- Respect reduced-motion preferences ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } }