/* ============================================================ Structure: 1. @font-face declarations 2. Primitive color channels (--*-rgb) 3. Surfaces 4. Accent 5. Text 6. Hero dark-mode tokens 7. Glass / overlay tokens (composed from channels) 8. Map tint 9. Typography 10. Font weights 11. Shadows 12. Border radius 13. Layout & motion 14. Dark mode scaffold (commented out) ============================================================ */ /* ============================================================ 1. FONTS ============================================================ */ @font-face { font-family: 'Outfit'; src: url('../fonts/outfit-v15-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('../fonts/outfit-v15-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('../fonts/outfit-v15-latin-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } /* Metric-adjusted fallback — reduces CLS during font-swap. Values calibrated to Outfit 400 vs Arial (cap-height match). */ @font-face { font-family: 'Outfit Fallback'; src: local('Arial'); size-adjust: 100%; ascent-override: 103%; descent-override: 28%; line-gap-override: 0%; } /* ============================================================ DESIGN TOKENS ============================================================ */ :root { /* ---------------------------------------------------------- 2. PRIMITIVE COLOR CHANNELS These are the raw RGB triplets for each base color. All rgba() compositions in this file use these — never hardcode a color value twice. If a hex changes, only the channel and the hex token need updating; every composed variant (glass, overlays, shadows) follows automatically. ---------------------------------------------------------- */ --surface-rgb: 250, 247, 243; /* = --surface #FAF7F3 */ --ink-rgb: 24, 21, 18; /* = --ink #181512 */ --accent-rgb: 179, 71, 17; /* = --accent #B34711 */ /* ---------------------------------------------------------- 3. SURFACES — warm off-white scale ---------------------------------------------------------- */ --surface: #FAF7F3; --surface-mid: #F2EDE4; --surface-card: #F7F3EA; --border: #D6CEBF; /* ---------------------------------------------------------- 4. ACCENT — terracotta / rust NOTE on naming: --accent-dim (#A3411A) is darker than --accent (#B34711). It functions as a deep hover/active state, not a muted variant. Rename to --accent-dark in a future refactor and update all var(--accent-dim) calls in base.css. ---------------------------------------------------------- */ --accent: #B34711; --accent-dim: #A3411A; /* darker — hover / active state */ --accent-bright: #F47316; /* lighter — for use on dark bg */ /* ---------------------------------------------------------- 5. TEXT NOTE on --ink-bright: This is rgba(--ink, .90) — nearly opaque, slightly transparent. It is NOT brighter than --ink. The name is legacy; it acts as the default body-text alpha variant. Use --ink-dim for clearly muted/secondary text. ---------------------------------------------------------- */ --ink: #181512; --ink-dim: #6A5F54; --ink-bright: rgba(var(--ink-rgb), .90); /* composed — no hardcoded rgba */ /* ---------------------------------------------------------- 6. HERO DARK-MODE TOKENS Consumed by nav.nav--hero and #hero.hero--dark in base.css. They live in :root because the nav bar also reads them when overlaying the hero section. Delete this block to revert to light-hero-only mode. ---------------------------------------------------------- */ --hero-ink: #FAF7F3; --hero-ink-dim: rgba(250, 247, 243, .82); --hero-accent: #F47316; /* ---------------------------------------------------------- 7. GLASS & OVERLAY TOKENS Composed from primitive channels. Update the channel above and every derived value updates automatically. ---------------------------------------------------------- */ /* Navigation backgrounds */ --nav-glass: rgba(var(--surface-rgb), .78); --sticky-glass: rgba(var(--surface-rgb), .97); /* Full-surface scrims and dimmer layers */ --overlay-lightbox: rgba(var(--ink-rgb), .90); /* lightbox backdrop */ --overlay-scrim: rgba(var(--ink-rgb), .50); /* cookie / modal backdrop */ --overlay-hero-dark: rgba(0, 0, 0, .50); /* hero--dark image dimmer */ --overlay-nav-dark: rgba(0, 0, 0, .38); /* hero nav on scroll */ --overlay-hero-light-start: rgba(255, 255, 255, .15); --overlay-hero-light-end: rgba(255, 255, 255, .25); /* ---------------------------------------------------------- 8. MAP TINT ---------------------------------------------------------- */ --map-tint: rgba(var(--accent-rgb), .07); /* ---------------------------------------------------------- 9. TYPOGRAPHY --font-display and --font-body share the same stack now. To switch one typeface for a new project, change a single line here. ---------------------------------------------------------- */ --font-display: 'Outfit', 'Outfit Fallback', system-ui, sans-serif; --font-body: 'Outfit', 'Outfit Fallback', system-ui, sans-serif; /* ---------------------------------------------------------- 10. FONT WEIGHTS Replace values here to retheme typographic weight ---------------------------------------------------------- */ --fw-regular: 400; --fw-semibold: 600; --fw-black: 800; /* ---------------------------------------------------------- 11. SHADOWS Composed from --ink-rgb so shadows stay in palette. Replace values here to retheme depth globally. ---------------------------------------------------------- */ --shadow-nav: 0 4px 18px rgba(var(--ink-rgb), .07); --shadow-nav-dark:0 4px 24px rgba(0, 0, 0, .28); --shadow-sticky: 0 -10px 30px rgba(0, 0, 0, .10); --shadow-card: 0 8px 24px rgba(var(--ink-rgb), .10); --shadow-modal: 0 8px 32px rgba(var(--ink-rgb), .18), 0 1px 4px rgba(var(--ink-rgb), .08); --shadow-accent: 0 0 0 3px rgba(var(--accent-rgb), .13); /* tl-dot--major ring */ /* ---------------------------------------------------------- 12. BORDER RADIUS Use these vars in base.css instead of raw px values. Swap all to 0 for a fully sharp / brutalist look. ---------------------------------------------------------- */ --radius-xs: 2px; /* tags, small labels (.tl-tag) */ --radius-sm: 3px; /* lightbox-img */ --radius-md: 6px; /* cards, gallery items */ --radius-full: 50%; /* dots (.tl-dot), icon circles */ /* ---------------------------------------------------------- 13. LAYOUT & MOTION ---------------------------------------------------------- */ --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1); --nav-height: 80px; --max-width: 1360px; } /* ============================================================ 14. DARK MODE SCAFFOLD Uncomment and populate to add full OS-level dark theme. Every rule in base.css that uses the tokens above will invert. Only the semantic token values change here. @media (prefers-color-scheme: dark) { :root { --surface-rgb: 18, 15, 12; --ink-rgb: 235, 230, 222; --surface: #120F0C; --surface-mid: #1C1714; --surface-card: #211D19; --border: #352E27; --accent: #D4622A; --accent-dim: #B34711; --accent-bright: #F47316; --ink: #EBE6DE; --ink-dim: #9C8F82; --ink-bright: rgba(var(--ink-rgb), .90); --nav-glass: rgba(var(--surface-rgb), .82); --sticky-glass: rgba(var(--surface-rgb), .97); } } ============================================================ */