/* ========================================================================== Elevate 360 — design tokens The single source of truth. Nothing else in this project defines a raw colour, font, size, radius or duration. If you need a new value, add it here first. ========================================================================== */ /* --- Archivo, self-hosted variable ------------------------------------ */ /* Three files. Latin carries both axes (weight 100-900, width 62-125%) so display type can go wide or narrow; the italic is the one-phrase voice DESIGN.md allows per headline; latin-ext covers accented names. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../assets/fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/archivo-latin-wght-italic.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/archivo-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- Brand colour (locked 9/16) ---------------------------------------- */ --navy: #0F2942; --navy-deep: #1D3F5F; --gold: #B8892C; --gold-light: #D2A343; /* gold on navy only — fails contrast on paper */ --paper: #F4F2ED; --ink: #141A20; --sage: #4A7C6F; /* charts only. Never UI. */ /* Tints and shades, derived. Do not invent new ones inline. */ --navy-900: #081726; --navy-700: #0F2942; --navy-500: #1D3F5F; --navy-300: #3C6288; --navy-100: #C9D5E0; --paper-warm: #EAE7DF; /* section banding on paper */ --paper-line: #DCD7CC; /* hairlines on paper */ --ink-700: #141A20; --ink-500: #47525D; /* secondary text on paper */ --ink-300: #6F7A85; /* meta text, still AA at 16px */ --on-navy: #F4F2ED; --on-navy-muted: #A9BACA; --on-navy-line: rgba(244, 242, 237, 0.16); /* --- Semantic surfaces -------------------------------------------------- */ --surface: var(--paper); --surface-raised: #FFFFFF; --surface-banded: var(--paper-warm); --surface-inverse: var(--navy); --surface-inverse-2: var(--navy-deep); --text: var(--ink-700); --text-muted: var(--ink-500); --text-meta: var(--ink-300); --text-inverse: var(--on-navy); --text-inverse-muted:var(--on-navy-muted); --accent: var(--gold); --accent-on-dark: var(--gold-light); --rule: var(--paper-line); --rule-inverse: var(--on-navy-line); --focus: var(--gold); --focus-on-dark: var(--gold-light); /* --- Type -------------------------------------------------------------- */ --font-sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* Width axis (font-stretch). DESIGN.md: display normal, labels wide, eyebrows slightly narrow. */ --width-narrow: 90%; --width-normal: 100%; --width-wide: 125%; /* Fluid scale, 390px -> 1440px. Ratio ~1.25 at phone, ~1.333 at desktop. */ --step--2: clamp(0.694rem, 0.68rem + 0.06vw, 0.75rem); --step--1: clamp(0.833rem, 0.80rem + 0.14vw, 0.9375rem); --step-0: clamp(1rem, 0.96rem + 0.19vw, 1.125rem); /* body */ --step-1: clamp(1.2rem, 1.13rem + 0.34vw, 1.5rem); --step-2: clamp(1.44rem, 1.32rem + 0.57vw, 2rem); --step-3: clamp(1.728rem, 1.53rem + 0.94vw, 2.666rem); --step-4: clamp(2.074rem, 1.76rem + 1.50vw, 3.553rem); --step-5: clamp(2.488rem, 2.01rem + 2.30vw, 4.738rem); /* hero */ --leading-tight: 1.06; --leading-snug: 1.2; --leading-normal: 1.6; --leading-loose: 1.75; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* eyebrows and small caps labels */ --measure: 68ch; /* body copy max line length */ --measure-tight: 46ch; /* lede and pull copy */ /* --- Space (4px base) --------------------------------------------------- */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem; /* Vertical rhythm between full-bleed sections */ --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem); --section-y-tight: clamp(2.5rem, 1.5rem + 5vw, 5rem); /* --- Layout ------------------------------------------------------------ */ --container: 1200px; --container-narrow: 860px; --container-wide: 1440px; --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem); --header-h: 72px; --header-h-lg: 96px; /* --- Radii and elevation ------------------------------------------------ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 41, 66, 0.06), 0 2px 6px rgba(15, 41, 66, 0.05); --shadow-md: 0 4px 12px rgba(15, 41, 66, 0.08), 0 12px 28px rgba(15, 41, 66, 0.07); --shadow-lg: 0 12px 32px rgba(15, 41, 66, 0.10), 0 32px 64px rgba(15, 41, 66, 0.10); /* --- Motion ------------------------------------------------------------- */ --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-scroll: 900ms; /* scroll-driven reveals on Home */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-emph: cubic-bezier(0.16, 1, 0.3, 1); /* --- Depth -------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-menu: 150; /* under the header: the logo and close stay live */ --z-header: 200; --z-modal: 400; --z-skip: 500; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-scroll: 1ms; } }