/* ========================================================================== tokens.css — Apex Holding PURPOSE: The single source of truth for every design value in the system. Declares: font-face shims + font-role stacks, the raw Apex palette, the per-world palette lookup, the six [data-world] SEMANTIC token blocks, the spacing / fluid-type / radius / easing / duration / layout / z-index scales, and the .mood-shift machinery that lets world token changes animate. CONTRACT FOR EVERY OTHER STYLESHEET AND AGENT: - Components consume ONLY the --w-* semantic tokens. Never a raw palette hex. - Theme files in assets/css/themes/ add world-SPECIFIC layout + decoration. They must NEVER redefine a --w-* semantic token. This file owns those. - All six worlds define all twelve semantic tokens. There are no gaps. Loaded FIRST, before base.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TYPEFACES No network fonts are permitted and no font binaries ship with this site. Each role is a named family resolved entirely from fonts already installed on the visitor's machine via src: local(). If the client later licenses real webfonts, drop the woff2 files into assets/fonts/ and uncomment the block beneath each rule — nothing else in the codebase has to change. See assets/fonts/README.md for the licensing decisions still open. -------------------------------------------------------------------------- */ /* Display — high-contrast didone/transitional serif. Headlines, hero lines. */ @font-face { font-family: "Apex Display"; font-style: normal; font-weight: 400; font-display: swap; src: local("Bodoni 72"), local("Bodoni72"), local("Didot"), local("Didot Regular"), local("Playfair Display"), local("PlayfairDisplay-Regular"), local("Georgia"); /* src: url("../fonts/apex-display-400.woff2") format("woff2"); */ } @font-face { font-family: "Apex Display"; font-style: normal; font-weight: 700; font-display: swap; src: local("Bodoni 72 Bold"), local("Bodoni72-Bold"), local("Didot Bold"), local("Playfair Display Bold"), local("PlayfairDisplay-Bold"), local("Georgia Bold"); /* src: url("../fonts/apex-display-700.woff2") format("woff2"); */ } @font-face { font-family: "Apex Display"; font-style: italic; font-weight: 400; font-display: swap; src: local("Bodoni 72 Book Italic"), local("Didot Italic"), local("Playfair Display Italic"), local("Georgia Italic"); /* src: url("../fonts/apex-display-400-italic.woff2") format("woff2"); */ } /* Body — humanist grotesque. Paragraphs, UI copy, everything readable. */ @font-face { font-family: "Apex Text"; font-style: normal; font-weight: 400; font-display: swap; src: local("Inter"), local("Inter Regular"), local("Segoe UI Variable Text"), local("Segoe UI"), local("SF Pro Text"), local("Helvetica Neue"); /* src: url("../fonts/apex-text-400.woff2") format("woff2"); */ } @font-face { font-family: "Apex Text"; font-style: normal; font-weight: 600; font-display: swap; src: local("Inter SemiBold"), local("Inter-SemiBold"), local("Segoe UI Semibold"), local("SF Pro Text Semibold"), local("Helvetica Neue Medium"); /* src: url("../fonts/apex-text-600.woff2") format("woff2"); */ } /* Utility — monospace. Eyebrows, labels, stats, metadata, placeholders. */ @font-face { font-family: "Apex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: local("JetBrains Mono"), local("JetBrainsMono-Regular"), local("Cascadia Mono"), local("Consolas"), local("SF Mono"), local("Menlo"); /* src: url("../fonts/apex-mono-400.woff2") format("woff2"); */ } /* -------------------------------------------------------------------------- 2. ANIMATABLE TOKEN REGISTRATION Registering the semantic colours as makes them interpolable, so a world change can be TWEENED rather than snapped. Because they inherit from , transitioning them once on the root cascades to every consumer for free — no per-component transition lists, no rule fighting. Browsers without @property ignore this block and simply snap. Graceful. -------------------------------------------------------------------------- */ @property --w-base { syntax: ""; inherits: true; initial-value: #0E1420; } @property --w-base-2 { syntax: ""; inherits: true; initial-value: #141C2B; } @property --w-surface { syntax: ""; inherits: true; initial-value: #1C2534; } @property --w-surface-2 { syntax: ""; inherits: true; initial-value: #263145; } @property --w-line { syntax: ""; inherits: true; initial-value: rgba(175, 185, 201, 0.18); } @property --w-text { syntax: ""; inherits: true; initial-value: #F2F5F9; } @property --w-text-dim { syntax: ""; inherits: true; initial-value: #AFB9C9; } @property --w-accent { syntax: ""; inherits: true; initial-value: #C9A24B; } @property --w-accent-soft { syntax: ""; inherits: true; initial-value: #E3C078; } @property --w-accent-2 { syntax: ""; inherits: true; initial-value: #3E7CB1; } @property --w-glow { syntax: ""; inherits: true; initial-value: rgba(201, 162, 75, 0.35); } @property --w-focus { syntax: ""; inherits: true; initial-value: #7FB3DC; } /* -------------------------------------------------------------------------- 3. GLOBAL SCALES — palette, type, space, radius, motion, layout, depth -------------------------------------------------------------------------- */ :root { /* ---- 3.1 Raw Apex palette ------------------------------------------- House colours. Referenced by the world blocks below and by the world lookup table. NEVER consumed directly by a component. */ --apex-night: #0E1420; --apex-slate: #1C2534; --apex-mist: #AFB9C9; --apex-snow: #F2F5F9; --apex-champagne: #C9A24B; --apex-horizon: #3E7CB1; /* Lighter horizon for SMALL text on dark grounds, where --apex-horizon lands at ~4.0:1 and would fail AA. Use this, not the base horizon. */ --apex-horizon-lift: #7FB3DC; /* ---- 3.2 World palette lookup ---------------------------------------- Every world's identity colours, readable from ANY world. The world switcher tiles and the portal-transition wipe need to paint in a palette that is not the current one; this table is how they do it without hard-coding hex into a component. */ --world-portal-base: #0E1420; --world-portal-accent: #C9A24B; --world-portal-text: #F2F5F9; --world-greppo-base: #2A0A15; --world-greppo-accent: #E8C27A; --world-greppo-text: #F4EBDD; --world-arz-faraya-base: #16241C; --world-arz-faraya-accent: #D08A3E; --world-arz-faraya-text: #F5F6F4; --world-zaarour-base: #0D2237; --world-zaarour-accent: #E8B84B; --world-zaarour-text: #DCEAF2; --world-portfolio-base: #14161A; --world-portfolio-accent: #4A7BD0; --world-portfolio-text: #EDEFF2; --world-support-base: #101826; --world-support-accent: #3E7CB1; --world-support-text: #F2F5F9; /* ---- 3.3 Typography roles -------------------------------------------- */ --font-display: "Apex Display", "Bodoni 72", Didot, "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Apex Text", Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; --font-utility: "Apex Mono", "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, "SF Mono", monospace; /* Line heights + tracking, so no component invents its own. */ --lh-tight: 1.06; --lh-snug: 1.2; --lh-body: 1.6; --lh-loose: 1.75; --track-tight: -0.02em; --track-normal: 0; --track-wide: 0.08em; --track-widest: 0.18em; /* ---- 3.4 Fluid type scale ------------------------------------------- Each step interpolates linearly between a 360px and a 1600px viewport, then locks. Ratio ~1.2 at the small end, ~1.25 at the large end, so headings gain authority on desktop without shouting on a phone. */ --step--1: clamp(0.8rem, 0.7710rem + 0.1290vw, 0.9rem); --step-0: clamp(1rem, 0.9637rem + 0.1613vw, 1.125rem); --step-1: clamp(1.2rem, 1.1401rem + 0.2661vw, 1.4063rem); --step-2: clamp(1.44rem, 1.3476rem + 0.4105vw, 1.7581rem); --step-3: clamp(1.7281rem, 1.5919rem + 0.6056vw, 2.1975rem); --step-4: clamp(2.0738rem, 1.8783rem + 0.8685vw, 2.7469rem); --step-5: clamp(2.4883rem, 2.2138rem + 1.2194vw, 3.4331rem); --step-6: clamp(2.9861rem, 2.6074rem + 1.6839vw, 4.2913rem); /* ---- 3.5 Spacing scale — 4px base ------------------------------------ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-9: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-11: 7rem; /* 112px */ --space-12: 9rem; /* 144px */ /* Page side gutter. One value, used by every full-width inner wrapper. */ --gutter: clamp(1.25rem, 5vw, 4rem); /* ---- 3.6 Radii -------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 10px; --radius-lg: 20px; --radius-pill: 999px; /* ---- 3.7 Easing + duration ------------------------------------------- */ --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out-cinema: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 200ms; /* hovers, focus rings, chips, buttons */ --dur-reveal: 520ms; /* scroll reveals, accordions, panel slide */ --dur-world: 640ms; /* world token cross-fade, switcher tint */ --dur-wipe: 700ms; /* portal transition wipe — HARD CEILING */ /* ---- 3.8 Layout ------------------------------------------------------- */ --header-h: 4.5rem; --maxw-prose: 42rem; /* single readable column */ --maxw-content: 72rem; /* default section width */ --maxw-wide: 88rem; /* galleries, wide grids */ /* Glass + elevation. Neutral shadows so they read correctly on every world ground without being tinted by the wrong accent. */ --glass-blur: 14px; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28); --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.45); --shadow-3: 0 24px 64px -16px rgba(0, 0, 0, 0.6); /* ---- 3.9 Z-index scale ------------------------------------------------ Every stacking decision on the site comes from here. Nothing invents its own integer. Read top-to-bottom as "how close to the viewer". */ --z-base: 0; --z-raised: 10; /* cards lifting on hover */ --z-sticky: 100; /* in-page sticky rails */ --z-header: 200; /* site header */ --z-scrim: 300; /* panel + lightbox backdrop */ --z-panel: 400; /* slide-in side panels */ --z-switcher: 500; /* full-viewport world switcher */ --z-wipe: 600; /* portal transition wipe */ --z-preloader: 700; /* first-paint preloader */ --z-skip: 800; /* skip link, must clear everything */ } /* -------------------------------------------------------------------------- 4. SEMANTIC TOKEN BLOCKS — one per world These twelve names are the ENTIRE surface area a component may consume. Reading guide: --w-base page ground --w-base-2 secondary ground — alternating sections, panel bodies --w-surface raised surface — cards, inputs, header glass --w-surface-2 surface hover / nested surface --w-line hairlines, dividers, input borders --w-text primary body + heading colour --w-text-dim secondary copy, meta, captions (>= 4.5:1 on --w-base) --w-accent identity colour — large text, rules, icons, fills --w-accent-soft LIFTED accent — the one to use for SMALL text on dark --w-accent-2 secondary material accent — DECORATIVE and large text only. Never small text. (oak / stone / green / etc.) --w-glow soft coloured bloom for tilt + hover glow --w-focus focus ring. Always the highest-visibility value. -------------------------------------------------------------------------- */ /* ---- 4.1 Portal — Apex night, champagne. Assured and panoramic. -------- */ [data-world="portal"] { --w-base: #0E1420; --w-base-2: #141C2B; --w-surface: #1C2534; --w-surface-2: #263145; --w-line: rgba(175, 185, 201, 0.18); --w-text: #F2F5F9; --w-text-dim: #AFB9C9; /* 9.4:1 on base */ --w-accent: #C9A24B; /* 7.8:1 on base */ --w-accent-soft: #E3C078; --w-accent-2: #3E7CB1; --w-glow: rgba(201, 162, 75, 0.35); --w-focus: #7FB3DC; } /* ---- 4.2 Greppo Winery — cellar red, candlelight, oak, parchment. ------ */ [data-world="greppo"] { --w-base: #2A0A15; --w-base-2: #3B0F1D; --w-surface: #4A2436; --w-surface-2: #5A3044; --w-line: rgba(232, 194, 122, 0.20); --w-text: #F4EBDD; --w-text-dim: #C9B49E; /* 9.1:1 on base */ --w-accent: #E8C27A; /* 10.8:1 on base */ --w-accent-soft: #F2DAA8; --w-accent-2: #6B4A2E; /* oak — decorative */ --w-glow: rgba(232, 194, 122, 0.30); --w-focus: #F2DAA8; } /* ---- 4.3 Arz Faraya — cedar, stone, hearth amber, snow. --------------- */ [data-world="arz-faraya"] { --w-base: #16241C; --w-base-2: #2F4A3A; /* cedar */ --w-surface: #35503F; --w-surface-2: #3F5D4A; --w-line: rgba(138, 133, 119, 0.30); --w-text: #F5F6F4; --w-text-dim: #B9C4BB; /* 9.0:1 on base */ --w-accent: #D08A3E; /* 5.7:1 on base — large text + fills */ --w-accent-soft: #F0B67B; /* 4.9:1 on surface — small text */ --w-accent-2: #8A8577; /* stone — decorative */ --w-glow: rgba(208, 138, 62, 0.30); --w-focus: #F0B67B; } /* ---- 4.4 Zaarour Gate — alpine dawn, sun gold, glacier. --------------- */ [data-world="zaarour"] { --w-base: #0D2237; --w-base-2: #16324A; /* alpine dawn */ --w-surface: #1E4266; --w-surface-2: #26527C; --w-line: rgba(220, 234, 242, 0.18); --w-text: #DCEAF2; --w-text-dim: #9FBCD1; /* 8.1:1 on base */ --w-accent: #E8B84B; /* 8.8:1 on base */ --w-accent-soft: #F2D183; --w-accent-2: #5E8C5A; /* sustainable green — decorative */ --w-glow: rgba(232, 184, 75, 0.32); --w-focus: #F2D183; } /* ---- 4.5 Portfolio — graphite, blueprint blue, drafting white. -------- */ [data-world="portfolio"] { --w-base: #14161A; --w-base-2: #181B21; --w-surface: #1C1F25; --w-surface-2: #262A33; --w-line: rgba(74, 123, 208, 0.22); --w-text: #EDEFF2; --w-text-dim: #A2A8B4; /* 7.6:1 on base */ --w-accent: #4A7BD0; /* 4.4:1 on base — large text + fills */ --w-accent-soft: #7FA6E6; /* 6.7:1 on surface — small text */ --w-accent-2: #C9A24B; /* Apex champagne through-line */ --w-glow: rgba(74, 123, 208, 0.28); --w-focus: #7FA6E6; } /* ---- 4.6 Support — highest clarity, least atmosphere. ----------------- */ [data-world="support"] { --w-base: #101826; --w-base-2: #141D2E; --w-surface: #18243A; --w-surface-2: #223052; --w-line: rgba(175, 185, 201, 0.22); --w-text: #F2F5F9; --w-text-dim: #B6C0CE; /* 9.7:1 on base */ --w-accent: #3E7CB1; /* 4.0:1 on base — large text + fills */ --w-accent-soft: #7FB3DC; /* 8.0:1 on base — small text */ --w-accent-2: #C9A24B; --w-glow: rgba(62, 124, 177, 0.30); --w-focus: #7FB3DC; } /* -------------------------------------------------------------------------- 5. MOOD SHIFT — animating a change of world The world switcher and the portal transition can retint the whole site in place by writing new --w-* values onto (or by swapping data-world). Adding .mood-shift to for the duration of that change tweens every registered colour token over --dur-world; because the tokens inherit, every surface, rule, and label on the page cross-fades together with zero per-component wiring. USAGE (world-switcher.js / transitions.js): html.classList.add("mood-shift"); html.dataset.world = "greppo"; // or set --w-* inline setTimeout(() => html.classList.remove("mood-shift"), 640); -------------------------------------------------------------------------- */ html.mood-shift { transition: --w-base var(--dur-world) var(--ease-in-out-cinema), --w-base-2 var(--dur-world) var(--ease-in-out-cinema), --w-surface var(--dur-world) var(--ease-in-out-cinema), --w-surface-2 var(--dur-world) var(--ease-in-out-cinema), --w-line var(--dur-world) var(--ease-in-out-cinema), --w-text var(--dur-world) var(--ease-in-out-cinema), --w-text-dim var(--dur-world) var(--ease-in-out-cinema), --w-accent var(--dur-world) var(--ease-in-out-cinema), --w-accent-soft var(--dur-world) var(--ease-in-out-cinema), --w-accent-2 var(--dur-world) var(--ease-in-out-cinema), --w-glow var(--dur-world) var(--ease-in-out-cinema), --w-focus var(--dur-world) var(--ease-in-out-cinema), /* Belt and braces for engines without @property: the two largest colour fields still cross-fade, so a world change never hard-cuts. These must live in the SAME declaration as the tokens above — a second rule targeting html.mood-shift would overwrite transition-property and silently kill the token tween. */ background-color var(--dur-world) var(--ease-in-out-cinema), color var(--dur-world) var(--ease-in-out-cinema); } html.mood-shift body { transition: background-color var(--dur-world) var(--ease-in-out-cinema), color var(--dur-world) var(--ease-in-out-cinema); } /* -------------------------------------------------------------------------- 6. RESPONSIVE TOKEN OVERRIDES The header carries a second row of navigation on narrow viewports, so the height token grows. Everything that offsets content by --header-h follows automatically. -------------------------------------------------------------------------- */ @media (max-width: 52em) { :root { --header-h: 5.75rem; } } /* -------------------------------------------------------------------------- 7. REDUCED MOTION Kill the token tween at the source. A world change becomes an instant, honest swap rather than a cross-fade. motion.css carries the complete reduced-motion override for everything else. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.mood-shift, html.mood-shift body { transition: none; } }