/* ============================================================= suenavus — Color & Type Foundations ============================================================= */ /* ---- Webfonts ----------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---- Brand palette --------------------------------------- */ --paper: #fefefe; --ink: #09294d; --tide: #205ca9; --sky: #6a9ed4; /* ---- Derived neutrals (oklch-blended toward ink) --------- */ --fog-50: oklch(0.985 0.003 240); --fog-100: oklch(0.965 0.006 240); --fog-200: oklch(0.92 0.012 240); --fog-300: oklch(0.84 0.020 240); --fog-400: oklch(0.66 0.030 240); --fog-500: oklch(0.48 0.040 240); --fog-600: oklch(0.34 0.050 240); --fog-700: oklch(0.24 0.055 240); --fog-800: oklch(0.17 0.055 240); /* ---- Semantic surface tokens ---------------------------- */ --bg: var(--paper); --bg-elev: #ffffff; --bg-deep: var(--ink); --bg-deep-2: #0c3361; --surface-tint: oklch(0.985 0.008 240); --fg: var(--ink); --fg-muted: var(--fog-600); --fg-soft: var(--fog-500); --fg-on-deep: var(--paper); --fg-on-deep-muted: oklch(0.78 0.04 240); --border: var(--fog-200); --border-strong:var(--fog-300); --border-on-deep: oklch(0.32 0.05 240); /* ---- Action tokens -------------------------------------- */ --action: var(--tide); --action-hover: #1a4f93; --action-press: #144080; --action-ink: var(--paper); --accent: var(--sky); --accent-soft: oklch(0.94 0.04 240); /* ---- State ---------------------------------------------- */ --focus-ring: color-mix(in oklab, var(--tide) 55%, transparent); /* ---- Type families ------------------------------------- */ --font-display: 'Bricolage Grotesque', ui-serif, Georgia, serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Type scale ----------------------------------------- */ --t-display: clamp(2.75rem, 4.4vw + 1rem, 5.5rem); --t-h1: clamp(2rem, 2.2vw + 1.2rem, 3.25rem); --t-h2: clamp(1.5rem, 1.2vw + 1rem, 2.25rem); --t-h3: 1.375rem; --t-h4: 1.125rem; --t-lead: 1.25rem; --t-body: 1rem; --t-small: 0.875rem; --t-mono: 0.75rem; --t-micro: 0.6875rem; /* ---- Weights ------------------------------------------- */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; /* ---- Line-heights -------------------------------------- */ --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.5; --lh-loose: 1.65; /* ---- Tracking ----------------------------------------- */ --tr-display: -0.025em; --tr-tight: -0.015em; --tr-eyebrow: 0.14em; --tr-mono: 0.02em; /* ---- Spacing (4px base) ------------------------------- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; /* ---- Radii -------------------------------------------- */ --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 20px; --r-pill: 999px; /* ---- Elevation ---------------------------------------- */ --shadow-1: 0 1px 2px rgba(9, 41, 77, 0.04), 0 1px 1px rgba(9, 41, 77, 0.03); --shadow-2: 0 4px 12px -2px rgba(9, 41, 77, 0.08), 0 2px 4px rgba(9, 41, 77, 0.04); --shadow-3: 0 18px 40px -10px rgba(9, 41, 77, 0.18), 0 4px 10px rgba(9, 41, 77, 0.06); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5); /* ---- Motion ------------------------------------------ */ --ease-tide: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-glide: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 620ms; --dur-tidal: 1100ms; /* ---- Layout grid ------------------------------------ */ --container: 1200px; --gutter: clamp(20px, 4vw, 56px); } /* ============================================================= Element defaults ============================================================= */ html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-normal); color: var(--fg); background: var(--bg); font-weight: var(--w-regular); } h1, h2, h3, h4, .display { font-family: var(--font-display); color: var(--fg); letter-spacing: var(--tr-display); line-height: var(--lh-tight); font-weight: var(--w-medium); margin: 0; text-wrap: balance; } .display { font-size: var(--t-display); font-weight: var(--w-medium); } h1, .h1 { font-size: var(--t-h1); } h2, .h2 { font-size: var(--t-h2); letter-spacing: var(--tr-tight); } h3, .h3 { font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); } h4, .h4 { font-size: var(--t-h4); line-height: var(--lh-snug); letter-spacing: 0; font-weight: var(--w-semi); } p, .body { font-size: var(--t-body); line-height: var(--lh-loose); color: var(--fg); text-wrap: pretty; } .lead { font-size: var(--t-lead); line-height: var(--lh-normal); color: var(--fg-muted); font-weight: var(--w-regular); } .small { font-size: var(--t-small); line-height: var(--lh-normal); } .mono, code, kbd { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono); font-weight: var(--w-regular); } .eyebrow { font-family: var(--font-mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--fg-soft); font-weight: var(--w-medium); } em, .em { font-style: italic; font-family: var(--font-display); font-weight: var(--w-regular); } a { color: var(--action); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-glide); } a:hover { color: var(--action-hover); text-decoration: underline; } ::selection { background: color-mix(in oklab, var(--sky) 60%, transparent); color: var(--ink); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }