/* ========================================================================= AEONIK WARM - Web Design System Type scale: Major Third (1.250) · Base 16px Palette: Cream #FAFAF9 · Espresso #160F0A · Mahogany #724B4B · Terracotta #D96354 Dual-mode: light is the default; dark is applied by system preference or by an explicit [data-theme] attribute on . ========================================================================= */ /* ------------------------------------------------------------------------- 1. FONT FACE Aeonik is a licensed typeface (CoType Foundry). Self-host the woff2 files under /fonts and keep the fallback stack - it is metric-adjacent, so an unlicensed environment degrades without reflow chaos. ------------------------------------------------------------------------- */ @font-face { font-family:"Figtree"; src:url("../fonts/Figtree-300.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:"Figtree"; src:url("../fonts/Figtree-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Figtree"; src:url("../fonts/Figtree-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"Figtree"; src:url("../fonts/Figtree-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:"Figtree"; src:url("../fonts/Figtree-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"Aeonik"; src:url("../fonts/Aeonik-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Aeonik"; src:url("../fonts/Aeonik-RegularItalic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; } @font-face { font-family:"Aeonik"; src:url("../fonts/Aeonik-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"Aeonik"; src:url("../fonts/Aeonik-Medium.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:"Aeonik"; src:url("../fonts/Aeonik-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"Aeonik"; src:url("../fonts/Aeonik-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; } :root { /* ======================================================================= 2. COLOR PRIMITIVES (never reference these directly in components - use the semantic tokens in §3) ======================================================================= */ /* Espresso - the warm dark axis. Its light end is the system's sand/tan. */ --espresso-50: #FAF6F3; --espresso-100: #F3EBE6; --espresso-200: #E7D9D0; --espresso-300: #D4C0B2; --espresso-400: #BCA493; --espresso-500: #A38977; --espresso-600: #89705F; --espresso-700: #6E594A; --espresso-800: #514136; --espresso-900: #352A22; --espresso-925: #251F1B; /* dark-mode raised surface */ --espresso-950: #160F0A; /* BRAND ANCHOR */ --espresso-960: #17110E; /* dark-mode subtle band */ --espresso-975: #0F0A07; /* dark-mode sunken / footer */ /* Mahogany - the muted secondary. Quiet, editorial, never shouts. */ --mahogany-50: #FDF4F4; --mahogany-100: #F8E9E8; --mahogany-200: #F0D5D4; --mahogany-300: #DFB9B9; --mahogany-400: #CA9C9B; --mahogany-500: #B18180; --mahogany-600: #966868; --mahogany-700: #724B4B; /* BRAND ANCHOR */ --mahogany-800: #5A3C3C; --mahogany-900: #3B2626; --mahogany-950: #211313; /* Terracotta - the single accent. Scarce by design. */ --terracotta-50: #FFF1ED; --terracotta-100: #FFE3DD; --terracotta-200: #FFCAC0; --terracotta-300: #FFA99B; --terracotta-400: #F38676; --terracotta-500: #D96354; /* BRAND ANCHOR */ --terracotta-600: #BD4C3F; --terracotta-700: #9B392E; --terracotta-800: #742820; --terracotta-900: #4E1913; --terracotta-950: #2C0A07; /* Cream - the warm-neutral gray axis. */ --cream-50: #FAFAF9; /* BRAND ANCHOR */ --cream-100: #EDEDEB; --cream-200: #DCDCD9; --cream-300: #C4C4C0; --cream-400: #AAAAA4; --cream-500: #908F8A; --cream-600: #767671; --cream-700: #5E5E59; --cream-800: #454542; --cream-900: #2D2D2A; --cream-950: #171716; --white: #FFFFFF; --black: #000000; /* Status - hue-shifted to sit inside the warm world, not fight it. */ --success-500: #4E7C59; --success-100: #E4EFE7; --success-700: #35563D; --warning-500: #C08A2E; --warning-100: #F8EEDA; --warning-700: #8A6117; --danger-500: #B4362F; --danger-100: #F8E2E0; --danger-700: #7E211C; --info-500: #4A6B82; --info-100: #E3EBF1; --info-700: #334A5B; /* ======================================================================= 3. SEMANTIC COLOR - LIGHT MODE (default) Every component reads from here. Swapping modes swaps only this block. ======================================================================= */ --bg-canvas: var(--cream-50); --bg-subtle: var(--espresso-100); /* warm alternating band */ --bg-sunken: var(--cream-100); /* neutral alternating band */ --bg-raised: var(--white); /* cards, popovers, menus */ --bg-inverse: var(--espresso-950); /* dark section inside a light page */ --bg-accent: var(--terracotta-600); /* solid accent fill - see A11y note */ --bg-accent-hover: var(--terracotta-700); --bg-accent-subtle: var(--terracotta-50); --bg-brand: var(--mahogany-700); --bg-overlay: rgba(22, 15, 10, 0.55); --text-primary: var(--espresso-950); --text-secondary: var(--espresso-800); --text-muted: var(--cream-700); --text-accent: var(--terracotta-700); /* accent as TEXT, not as fill */ --text-brand: var(--mahogany-700); --text-on-accent: var(--cream-50); --text-on-inverse: var(--cream-50); --text-inverse-muted:var(--espresso-400); --text-disabled: var(--cream-400); --border-subtle: var(--cream-200); /* decorative hairline */ --border-default: var(--espresso-200); /* card / section divider */ --border-strong: var(--espresso-300); /* emphasised divider */ --border-control: var(--espresso-600); /* inputs, checkboxes - 3:1 min */ --border-accent: var(--terracotta-500); --border-focus: var(--terracotta-600); --shadow-color: 22 15 10; /* espresso, as RGB channels */ color-scheme: light; } /* --- Dark mode: system preference, unless explicitly set to light --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-canvas: var(--espresso-950); --bg-subtle: var(--espresso-960); --bg-sunken: var(--espresso-975); --bg-raised: var(--espresso-925); --bg-inverse: var(--cream-50); --bg-accent: var(--terracotta-500); --bg-accent-hover: var(--terracotta-400); --bg-accent-subtle: var(--terracotta-950); --bg-brand: var(--mahogany-800); --bg-overlay: rgba(0, 0, 0, 0.70); --text-primary: var(--cream-50); --text-secondary: var(--espresso-300); --text-muted: var(--espresso-500); --text-accent: var(--terracotta-400); --text-brand: var(--mahogany-300); --text-on-accent: var(--espresso-950); /* inverts - see A11y note */ --text-on-inverse: var(--espresso-950); --text-inverse-muted:var(--espresso-800); --text-disabled: var(--espresso-700); --border-subtle: var(--espresso-925); --border-default: var(--espresso-900); --border-strong: var(--espresso-800); --border-control: var(--espresso-600); --border-accent: var(--terracotta-500); --border-focus: var(--terracotta-400); --shadow-color: 0 0 0; color-scheme: dark; } } /* --- Dark mode: explicit toggle wins in both directions --- */ :root[data-theme="dark"] { --bg-canvas: var(--espresso-950); --bg-subtle: var(--espresso-960); --bg-sunken: var(--espresso-975); --bg-raised: var(--espresso-925); --bg-inverse: var(--cream-50); --bg-accent: var(--terracotta-500); --bg-accent-hover: var(--terracotta-400); --bg-accent-subtle: var(--terracotta-950); --bg-brand: var(--mahogany-800); --bg-overlay: rgba(0, 0, 0, 0.70); --text-primary: var(--cream-50); --text-secondary: var(--espresso-300); --text-muted: var(--espresso-500); --text-accent: var(--terracotta-400); --text-brand: var(--mahogany-300); --text-on-accent: var(--espresso-950); --text-on-inverse: var(--espresso-950); --text-inverse-muted:var(--espresso-800); --text-disabled: var(--espresso-700); --border-subtle: var(--espresso-925); --border-default: var(--espresso-900); --border-strong: var(--espresso-800); --border-control: var(--espresso-600); --border-accent: var(--terracotta-500); --border-focus: var(--terracotta-400); --shadow-color: 0 0 0; color-scheme: dark; } :root { /* ======================================================================= 4. TYPOGRAPHY - Major Third (1.250), base 16px Fluid between 375px and 1440px viewports. Below h6 the scale is fixed: small type must not shrink further on phones. ======================================================================= */ --font-sans: "Aeonik", "Inter", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif; --font-mono: "Aeonik Mono", "SF Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --fs-display-2: clamp(3.5831rem, 2.7460rem + 3.5718vw, 5.9606rem); /* 57.33 → 95.37 */ --fs-display-1: clamp(3.1294rem, 2.5524rem + 2.4620vw, 4.7681rem); /* 50.07 → 76.29 */ --fs-h1: clamp(2.7319rem, 2.3505rem + 1.6272vw, 3.8150rem); /* 43.71 → 61.04 */ --fs-h2: clamp(2.3844rem, 2.1493rem + 1.0028vw, 3.0519rem); /* 38.15 → 48.83 */ --fs-h3: clamp(2.0737rem, 1.9443rem + 0.5521vw, 2.4413rem); /* 33.18 → 39.06 */ --fs-h4: clamp(1.8019rem, 1.7486rem + 0.2272vw, 1.9531rem); /* 28.83 → 31.25 */ --fs-h5: clamp(1.4400rem, 1.3969rem + 0.1840vw, 1.5625rem); /* 23.04 → 25.00 */ --fs-h6: 1.25rem; /* 20.00 */ --fs-body-lg: clamp(1.1250rem, 1.0810rem + 0.1878vw, 1.2500rem); /* 18.00 → 20.00 */ --fs-body: 1rem; /* 16.00 */ --fs-small: 0.8rem; /* 12.80 */ --fs-caption: 0.64rem; /* 10.24 */ /* Line height falls as size rises - the single most important rule here. */ --lh-display: 0.98; --lh-h1: 1.04; --lh-h2: 1.08; --lh-h3: 1.14; --lh-h4: 1.20; --lh-h5: 1.26; --lh-h6: 1.35; --lh-body: 1.60; --lh-relaxed: 1.75; --lh-tight: 1.20; --lh-flat: 1.00; /* Optical tracking - large type needs negative, small caps need positive. */ --ls-display: -0.035em; --ls-h1: -0.030em; --ls-h2: -0.026em; --ls-h3: -0.022em; --ls-h4: -0.018em; --ls-h5: -0.014em; --ls-h6: -0.010em; --ls-body: 0em; --ls-small: 0.005em; --ls-eyebrow: 0.14em; /* uppercase kicker / eyebrow labels */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --measure-tight: 38ch; /* card copy */ --measure-base: 65ch; /* body prose */ --measure-wide: 78ch; /* long-form article */ --measure-display:18ch; /* hero headlines - never wider */ /* ======================================================================= 5. SPACING - 4px base grid ======================================================================= */ --space-0: 0; --space-px: 1px; --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 */ --space-32: 8rem; /* 128 */ --space-40: 10rem; /* 160 */ --space-48: 12rem; /* 192 */ /* Vertical rhythm for full-bleed marketing sections */ --section-y-sm: clamp(3rem, 6vw, 4.5rem); /* 48 → 72 */ --section-y: clamp(4.5rem, 9vw, 7.5rem); /* 72 → 120 */ --section-y-lg: clamp(6rem, 12vw, 10rem); /* 96 → 160 */ /* ======================================================================= 6. LAYOUT ======================================================================= */ --container-sm: 40rem; /* 640 - prose */ --container-md: 56rem; /* 896 - narrow marketing */ --container-lg: 72rem; /* 1152 - standard */ --container-xl: 80rem; /* 1280 - wide */ --container-full: 90rem; /* 1440 - max canvas */ --gutter: clamp(1.25rem, 4vw, 3rem); /* 20 → 48 page inset */ --grid-cols: 12; --grid-gap: clamp(1rem, 2.2vw, 2rem); /* 16 → 32 */ --bp-xs: 480px; --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl:1440px; /* ======================================================================= 7. RADII / BORDERS / ELEVATION ======================================================================= */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; --border-width-hairline: 1px; --border-width-thick: 2px; /* Warm shadows - espresso-tinted, never neutral black in light mode. */ --shadow-xs: 0 1px 2px rgb(var(--shadow-color) / 0.05); --shadow-sm: 0 1px 3px rgb(var(--shadow-color) / 0.07), 0 1px 2px rgb(var(--shadow-color) / 0.05); --shadow-md: 0 4px 10px rgb(var(--shadow-color) / 0.08), 0 2px 4px rgb(var(--shadow-color) / 0.05); --shadow-lg: 0 12px 28px rgb(var(--shadow-color) / 0.10), 0 4px 8px rgb(var(--shadow-color) / 0.06); --shadow-xl: 0 24px 56px rgb(var(--shadow-color) / 0.14), 0 8px 16px rgb(var(--shadow-color) / 0.07); --shadow-accent: 0 8px 24px rgb(217 99 84 / 0.28); /* ======================================================================= 8. MOTION ======================================================================= */ --duration-instant: 80ms; --duration-fast: 140ms; /* hover, focus, colour swaps */ --duration-base: 220ms; /* dropdowns, tooltips, small reveals */ --duration-slow: 340ms; /* modals, drawers, accordions */ --duration-slower: 520ms; /* page/section transitions */ --duration-reveal: 720ms; /* scroll-in reveals */ --ease-standard: cubic-bezier(0.20, 0.00, 0.10, 1.00); /* default */ --ease-out: cubic-bezier(0.16, 1.00, 0.30, 1.00); /* entering */ --ease-in: cubic-bezier(0.55, 0.00, 1.00, 0.45); /* exiting */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00); /* playful pop */ --ease-linear: linear; /* marquees only */ --transition-colors: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); --transition-transform: transform var(--duration-base) var(--ease-out); --transition-all: all var(--duration-base) var(--ease-standard); --lift-sm: translateY(-2px); --lift-md: translateY(-4px); /* ======================================================================= 9. Z-INDEX ======================================================================= */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-overlay: 400; --z-modal: 500; --z-popover: 600; --z-toast: 700; --z-tooltip: 800; /* ======================================================================= 10. FOCUS ======================================================================= */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring: var(--focus-ring-width) solid var(--border-focus); } /* ========================================================================= 11. BASE ELEMENT STYLES ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--space-24); /* the page never scrolls sideways - entrance transforms and edge-peeking carousels are clipped, not scrolled ('clip' avoids the sticky/scroll- container side effects of 'hidden' where supported) */ overflow-x: hidden; overflow-x: clip; } body { margin: 0; overflow-x: hidden; overflow-x: clip; background-color: var(--bg-canvas); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); color: var(--text-primary); font-weight: var(--fw-medium); text-wrap: balance; } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); } h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); } h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); } h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); font-weight: var(--fw-medium); } .display-1 { font-size: var(--fs-display-1); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-light); max-width: var(--measure-display); text-wrap: balance; } .display-2 { font-size: var(--fs-display-2); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-light); max-width: var(--measure-display); text-wrap: balance; } p { margin: 0 0 var(--space-4); max-width: var(--measure-base); text-wrap: pretty; } .lead { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-secondary); max-width: var(--measure-tight); } small, .text-small { font-size: var(--fs-small); letter-spacing: var(--ls-small); line-height: var(--lh-body); } .text-caption { font-size: var(--fs-caption); letter-spacing: var(--ls-small); line-height: var(--lh-h6); color: var(--text-muted); } .eyebrow { display: inline-block; font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); margin-bottom: var(--space-3); } a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: var(--transition-colors); } a:hover { text-decoration-thickness: 2px; } hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-12) 0; } code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.9em; } code { background: var(--bg-subtle); padding: 0.15em 0.4em; border-radius: var(--radius-sm); } img, svg, video { max-width: 100%; height: auto; display: block; } ::selection { background: var(--terracotta-200); color: var(--espresso-950); } /* Focus: visible on keyboard only, never suppressed. */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } /* Motion safety - required, not optional. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }