/* ============================================================ ACOSTA'S — DESIGN TOKENS Tier 1: primitives (raw values, named for what they are) Tier 2: semantic (named for the job they do) Tier 3: component (named for where they're used) ============================================================ */ :root { /* ======================================================== TIER 1 — PRIMITIVES ======================================================== */ /* Gold ramp — generated in OKLCH from the base #C9A050 */ --gold-100: oklch(94% 0.035 82); --gold-200: oklch(88% 0.055 82); --gold-300: oklch(82% 0.080 82); /* ≈ #E0BD74 */ --gold-400: oklch(76% 0.095 82); --gold-500: oklch(71% 0.105 82); /* ≈ #C9A050 BASE */ --gold-600: oklch(63% 0.098 82); --gold-700: oklch(53% 0.085 82); --gold-800: oklch(42% 0.068 82); --gold-900: oklch(31% 0.050 82); /* Teal ramp — base #2FA79A */ --teal-100: oklch(93% 0.040 185); --teal-300: oklch(80% 0.085 185); --teal-500: oklch(66% 0.105 185); /* ≈ #2FA79A BASE */ --teal-700: oklch(50% 0.085 185); --teal-900: oklch(35% 0.060 185); /* ≈ #0C6B60 */ /* Red ramp — base #C0392B */ --red-300: oklch(72% 0.115 29); --red-500: oklch(55% 0.170 29); /* ≈ #C0392B BASE */ --red-700: oklch(45% 0.150 29); /* Neutrals — warm, matched to the brand */ --cream-50: #FDF8EE; --cream-100: #F3EAD2; --sand-300: #BFB397; --sand-400: #AA9E80; --sand-500: #8D8368; --ink-600: #201E1D; --ink-700: #171310; --ink-800: #131009; --ink-900: #0B0906; --brown-900: #241A08; --brown-glow:#2A1D0E; --slate-500: #4A5B58; /* ======================================================== TIER 2 — SEMANTIC ======================================================== */ /* --- Color: brand roles --- */ --color-accent: var(--gold-500); --color-accent-hover: var(--gold-600); --color-accent-soft: var(--gold-300); --color-accent-subtle: var(--gold-900); --color-secondary: var(--teal-500); --color-secondary-hover: var(--teal-700); --color-secondary-deep: var(--teal-900); --color-danger: var(--red-500); --color-danger-hover: var(--red-700); /* red-500 is a mid-ramp colour: it fails AA as SMALL TEXT on both surfaces (3.77:1 on ink, 4.40:1 on cream) while remaining correct as a fill and as large display text. These two are the text-safe steps — same split as --color-accent-on-light. Use --color-danger for fills and display type; use these for anything body-sized. */ --color-danger-on-dark: var(--red-300); /* 7.67:1 on --ink-900 */ --color-danger-on-light: var(--red-700); /* 6.71:1 on --cream-100 */ /* --- Color: surfaces --- */ /* One dark surface for the whole site — nav, hero, sections and footer all resolve to this. -alt and -deep are kept as distinct names but currently point at the same value, so tonal separation can be reintroduced from one place if it's ever wanted. */ --color-surface: var(--ink-900); --color-surface-alt: var(--ink-900); --color-surface-deep: var(--ink-900); --color-surface-light: var(--cream-100); --color-surface-lighter: var(--cream-50); --color-surface-glow: var(--brown-glow); /* --- Color: text --- */ --color-text: var(--cream-100); --color-text-muted: var(--sand-300); --color-text-dim: var(--sand-400); --color-text-faint: var(--sand-500); --color-text-on-accent: var(--brown-900); --color-text-on-secondary: var(--teal-900); --color-text-on-light: var(--ink-600); --color-text-on-light-mut: var(--slate-500); /* --- Color: lines --- */ /* Gold and cream are unreadable on a light surface, so light surfaces get their own accent/border pair. Any block placed on --color-surface-light should reference these. */ --color-accent-on-light: var(--gold-800); --color-border-on-light: rgb(32 30 29 / .20); --color-field-bg-on-light: rgb(255 255 255 / .55); --color-wash-on-light: rgb(255 255 255 / .45); /* hover tint on cream */ --color-border: rgb(201 160 80 / .30); --color-border-strong: rgb(201 160 80 / .50); --color-hairline: rgb(243 234 210 / .12); --color-scrim: rgb(0 0 0 / .55); /* --- Typography: families --- */ --font-display: 'Oswald', system-ui, sans-serif; --font-body: 'Figtree', system-ui, sans-serif; --font-brand: 'Rye', Georgia, serif; --font-script: 'Great Vibes', cursive; /* --- Typography: scale (matches Tailwind's steps) --- */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --text-5xl: 3rem; /* 48 */ /* --- Typography: fluid display (what Tailwind lacks) --- */ --display-sm: clamp(1.75rem, 1.25rem + 2.2vw, 2.5rem); /* 28 → 40 */ --display-md: clamp(2.25rem, 1.50rem + 3.4vw, 3.5rem); /* 36 → 56 */ --display-lg: clamp(2.75rem, 1.30rem + 6.4vw, 5.25rem); /* 44 → 84 */ --display-xl: clamp(3.25rem, 1.60rem + 7.4vw, 5.75rem); /* 52 → 92 */ /* --- Typography: weight / leading / tracking --- */ --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-none: 1.1; --leading-snug: 1.35; --leading-body: 1.65; --leading-relaxed: 1.75; --tracking-tight: .02em; --tracking-normal: .06em; --tracking-wide: .10em; --tracking-wider: .16em; --tracking-widest: .24em; --tracking-max: .30em; /* --- Spacing ladder (Tailwind base unit: .25rem) --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* --- Layout semantics (NOT in Tailwind — ours) --- */ /* Calibrated so "normal" lands at 48px on desktop — the reference point set from the footer. compact sits a step below, spacious above. */ --space-section-compact: clamp(1.5rem, 3.5vw, 2rem); /* 24 → 32 */ --space-section: clamp(2rem, 5vw, 3rem); /* 32 → 48 */ --space-section-spacious: clamp(3rem, 7vw, 5rem); /* 48 → 80 */ --space-gutter: clamp(1.5rem, 5vw, 3.5rem); --space-stack: var(--space-4); --space-stack-tight: var(--space-2); --space-grid: var(--space-6); /* Gap between an eyebrow label and the heading it labels. They are one typographic unit, so this is deliberately small and constant regardless of heading size. */ --space-heading-label: var(--space-3); /* --- Container widths --- */ --width-prose: 65ch; /* readable measure */ --width-narrow: 45rem; /* 720 */ --width-content: 75rem; /* 1200 */ --width-wide: 90rem; /* 1440 */ /* --- Column minimums --- The width below which a multi-column layout collapses to fewer columns. Every grid/split collapse threshold comes from these. */ --col-min-sm: 15rem; /* 240 — small cards */ --col-min-md: 20rem; /* 320 — standard cards */ --col-min-lg: 26rem; /* 416 — split-pane columns */ /* --- Radius --- */ --radius-sm: 8px; --radius-md: 18px; --radius-lg: 22px; --radius-xl: 26px; --radius-full: 999px; /* --- Border widths --- */ --border-thin: 1px; --border-base: 1.5px; --border-thick: 3px; /* --- Shadow --- */ --shadow-sm: 0 2px 8px rgb(0 0 0 / .25); --shadow-card: 0 10px 26px rgb(0 0 0 / .45); --shadow-lg: 0 20px 40px rgb(0 0 0 / .50); --shadow-text: 0 4px 0 rgb(0 0 0 / .5); /* --- Aspect ratios: primitives --- */ --aspect-square: 1 / 1; --aspect-photo: 3 / 2; --aspect-wide: 16 / 9; --aspect-cinema: 21 / 9; --aspect-portrait: 4 / 5; /* --- Media focal points --- Named crop positions for object-position. Blocks say WHERE the subject is (data-focal="top"), never a percentage. */ --focal-center: 50% 50%; --focal-top: 50% 15%; --focal-bottom: 50% 85%; --focal-left: 15% 50%; --focal-right: 85% 50%; /* --- Aspect ratios: semantic, by context --- Media height is always DERIVED from column width via a ratio, never set as an absolute height. A fixed height would clip on long content and read differently at every column width. */ --ratio-media-hero: var(--aspect-photo); /* image is the star */ --ratio-media-split: var(--aspect-wide); /* beside a text panel */ --ratio-media-full: var(--aspect-photo); /* full-width band */ --ratio-media-card: var(--aspect-wide); /* inside a card */ /* --- Icon sizes --- */ --icon-sm: 20px; --icon-md: 24px; --icon-lg: 30px; /* --- Glow --- Soft radial warmth bled in from an edge. The name is the edge the light comes FROM. Geometry is element-relative (100% 100%), so a glow reads the same on a 110px nav as on a 600px section. --glow-strength tunes intensity for all of them at once; --glow-reach controls how far it travels before fading out. */ --glow-color: var(--color-surface-glow); --glow-strength: 55%; --glow-strength-soft: 30%; --glow-strength-strong: 80%; --glow-reach: 72%; --glow-from-top: radial-gradient(ellipse 100% 100% at 50% 0%, color-mix(in srgb, var(--glow-color) var(--glow-strength), transparent), transparent var(--glow-reach)); --glow-from-bottom: radial-gradient(ellipse 100% 100% at 50% 100%, color-mix(in srgb, var(--glow-color) var(--glow-strength), transparent), transparent var(--glow-reach)); --glow-from-left: radial-gradient(ellipse 100% 100% at 0% 50%, color-mix(in srgb, var(--glow-color) var(--glow-strength), transparent), transparent var(--glow-reach)); --glow-from-right: radial-gradient(ellipse 100% 100% at 100% 50%, color-mix(in srgb, var(--glow-color) var(--glow-strength), transparent), transparent var(--glow-reach)); /* --- Vignette --- Warm framing light, radiating from all edges inward (or pooled in the centre). Unlike --glow-color, this uses the gold ramp so it is actually visible against the dark surfaces. */ /* MASTER SWITCH — the vignette is currently off site-wide. To re-enable, set these to var(--vignette-edge) and var(--vignette-edge-tight) respectively. Per-section data-vignette="edge|tight|center|corners" still works either way. */ --vignette-default: none; --vignette-default-short: none; --vignette-color: var(--gold-800); --vignette-strength: 38%; /* how much colour at the edge */ --vignette-strength-soft: 20%; --vignette-strength-strong: 60%; --vignette-reach: 35%; /* where the colour starts fading in — lower = the warm zone covers more */ /* warmth gathered at the edges, framing the content */ --vignette-edge: radial-gradient(ellipse 100% 100% at 50% 50%, transparent var(--vignette-reach), color-mix(in srgb, var(--vignette-color) var(--vignette-strength), transparent) 100%); /* Same treatment for SHORT elements (nav bars, thin bands). The 100% ellipse puts the corner at 70% along the ramp, which on a ~90px-tall element leaves only ~30px of falloff — below the eye's threshold. A 62% ellipse pushes the corners past full colour so the gradient completes inside the visible height. */ --vignette-edge-tight: radial-gradient(ellipse 62% 62% at 50% 50%, transparent var(--vignette-reach), color-mix(in srgb, var(--vignette-color) var(--vignette-strength), transparent) 100%); /* warmth pooled in the centre, falling off to the edges */ --vignette-center: radial-gradient(ellipse 85% 85% at 50% 50%, color-mix(in srgb, var(--vignette-color) var(--vignette-strength), transparent), transparent var(--vignette-reach)); /* warmth in the upper corners only — subtler, good behind type */ --vignette-corners: radial-gradient(ellipse 55% 70% at 0% 0%, color-mix(in srgb, var(--vignette-color) var(--vignette-strength), transparent), transparent 70%), radial-gradient(ellipse 55% 70% at 100% 0%, color-mix(in srgb, var(--vignette-color) var(--vignette-strength), transparent), transparent 70%); /* Original hero geometry — offset and shallower, kept for large sections where the element-relative version is too even. */ --glow-hero-top: radial-gradient(ellipse 65% 32% at 35% 0%, color-mix(in srgb, var(--glow-color) 30%, transparent), transparent 70%); --glow-hero-bottom: radial-gradient(ellipse 85% 40% at 50% 100%, color-mix(in srgb, var(--glow-color) 65%, transparent), transparent 70%); /* --- Texture --- A theme characteristic, not a per-heading choice. Set --texture-heading to `none` and every heading renders clean — which is how a different brand would turn this off wholesale. */ --texture-grunge: url('assets/textures/grunge.png'); --texture-scale: 420px; --texture-heading: var(--texture-grunge); /* --- Motion --- Duration by intent, not by number. Anything animated on this site picks one of these; nothing invents a timing. All of it is disabled wholesale by prefers-reduced-motion in site.css. */ --duration-instant: .12s; /* colour / border swaps */ --duration-fast: .2s; /* hover, focus */ --duration-base: .35s; /* drawers, menus */ --duration-slow: .6s; /* entrance + scroll reveal */ --duration-media: .7s; /* image fade-in — deliberately slower than UI motion so photos arrive softly rather than snap */ --duration-slower: .9s; /* large hero imagery */ --ease-out: cubic-bezier(.22, .61, .36, 1); /* decelerate — entrances */ --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* symmetrical — moves */ --ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* slight overshoot */ /* How far an entering element travels, and the gap between sequential items in a staggered group. */ --motion-distance: 1.25rem; --motion-stagger: 70ms; /* Composed shorthands so blocks declare intent in one property. */ --motion-enter: var(--duration-slow) var(--ease-out) both; --motion-fade: opacity var(--duration-media) var(--ease-out); /* Fail-safe windows. How long a progressive-enhancement layer may wait before it force-reveals its content. These are real design decisions, so they live here rather than as literals in site.js — the script reads them back off :root at runtime. */ --timeout-reveal-failsafe: 3000ms; --timeout-media-failsafe: 4000ms; /* --- Layers --- */ --layer-base: 1; --layer-nav: 50; --layer-drawer: 100; --layer-modal: 200; /* --- Breakpoints (reference; media queries can't use vars) --- */ --bp-sm: 40rem; /* 640 */ --bp-md: 48rem; /* 768 ← tablet tier */ --bp-lg: 64rem; /* 1024 */ --bp-xl: 80rem; /* 1280 */ /* ======================================================== TIER 3 — COMPONENT ======================================================== */ /* Logo size and clearance are the INPUTS. Nav height is derived, so clearance is guaranteed at every viewport instead of drifting (it was 8px on mobile, 13px on desktop). */ --nav-logo-size: clamp(3.25rem, 5.5vw, 5rem); --nav-clearance: 20px; --nav-height: calc(var(--nav-logo-size) + (var(--nav-clearance) * 2)); /* Header and footer are page chrome and share one surface. Derived from --color-surface-deep rather than hardcoded, so the two can never drift apart. The nav keeps 94% alpha for its backdrop blur. */ --nav-bg: color-mix(in srgb, var(--color-surface-deep) 94%, transparent); --nav-blur: 8px; --drawer-width: 20rem; --button-padding-y: var(--space-3); --button-padding-x: var(--space-6); --button-radius: var(--radius-full); --button-font-size: var(--text-base); --button-weight: var(--weight-bold); --tap-target-min: 44px; --card-padding: var(--space-6); --card-radius: var(--radius-lg); --card-border: var(--border-base) solid var(--color-border); --hero-min-height: clamp(30rem, 75dvh, 50rem); --focus-ring-offset: 2px; --field-height: var(--tap-target-min); --field-padding-x: var(--space-4); --field-radius: var(--radius-sm); --field-border: var(--border-base) solid var(--color-border); --field-bg: rgb(255 255 255 / .04); --emblem-size: clamp(7rem, 12vw, 10rem); --emblem-opacity: .85; }