/* opco-tokens.css — Shared design tokens for Codex Corp OpCo sites Imported by: site/studios/, site/digital/, site/labs/, site/systems/ DO NOT import in HoldCo (site/ root). */ /* ─── BASE ─────────────────────────────────────────────────── */ :root { --color-bg: #0d0d10; --color-bg-footer: #0a0a0c; --color-surface: rgba(255, 255, 255, 0.05); --color-surface-hover: rgba(255, 255, 255, 0.09); --color-border: rgba(255, 255, 255, 0.08); --color-text-primary: #f2f2f5; --color-text-secondary: #aaaabc; --color-text-muted: #555566; /* HoldCo gold — ONLY for "Codex Corp" nav item, consistent across all OpCos */ --color-holdco-gold: #f5a623; /* ─── NAV ─────────────────────────────────────────────── */ /* Fix 3: 56 × 1.30 = 72.8 → 72px | 52 × 1.30 = 67.6 → 68px */ --nav-height: 72px; --nav-height-mobile: 68px; /* Fix 2: 1.5× more translucent (alpha 0.75 → 0.50), stronger blur */ --nav-bg: rgba(13, 13, 16, 0.50); --nav-blur: saturate(200%) blur(28px); --nav-bg-fallback: rgba(13, 13, 16, 0.88); --nav-z: 1000; /* ─── DROPDOWN ──────────────────────────────────────────── */ /* Same RGB base as nav (13,13,16) to avoid blue-cast at full opacity */ --dropdown-bg: rgba(13, 13, 16, 0.97); --dropdown-border: 1px solid rgba(255, 255, 255, 0.08); --dropdown-radius: 10px; --dropdown-shadow: 0 12px 40px rgba(0, 0, 0, 0.7); /* ─── FOOTER GLASS (Fix 2) ───────────────────────────────── */ --footer-bg: rgba(10, 10, 12, 0.55); --footer-blur: saturate(160%) blur(24px); --footer-bg-fallback: rgba(10, 10, 12, 0.94); /* ─── TYPOGRAPHY ─────────────────────────────────────────── */ --font-wordmark: 'Syne', sans-serif; --font-nav: 'Syne', sans-serif; --font-body: 'DM Sans', sans-serif; /* ─── SPACING ────────────────────────────────────────────── */ --nav-px: clamp(24px, 4vw, 64px); --footer-px: clamp(24px, 6vw, 120px); /* ─── MOTION ─────────────────────────────────────────────── */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-base: 240ms; /* ─── FLUID TYPE SCALE ───────────────────────────────────── */ --text-hero: clamp(2rem, 6vw, 5rem); --text-hero-sub: clamp(1rem, 2.5vw, 1.375rem); --text-section-title: clamp(1.5rem, 4vw, 3rem); } /* ─── PER-OPCO ACCENT (set data-brand on ) ─────────── */ /* Dark mode: exact brand colors from each OpCo's hero typography */ [data-brand="studios"] { --color-accent: #CF7468; } [data-brand="digital"] { --color-accent: #A87FD4; } [data-brand="labs"] { --color-accent: #5B9E7B; } [data-brand="systems"] { --color-accent: #6A8FCC; } /* Light mode per-OpCo accents: html[data-brand] sets on html, body.light-mode sets closer to leaf → wins the cascade */ html[data-brand="studios"] body.light-mode { --color-accent: #B85A4E; } html[data-brand="digital"] body.light-mode { --color-accent: #7B5CAB; } html[data-brand="labs"] body.light-mode { --color-accent: #3D7A5C; } html[data-brand="systems"] body.light-mode { --color-accent: #4A72B0; } /* ─── LIGHT MODE (Fix 4) ──────────────────────────────────── Theme toggle adds .light-mode to . Override CSS variables so nav + footer glass switch to light. ──────────────────────────────────────────────────────────── */ body.light-mode { --color-bg: #f4f4f6; --color-bg-footer: #ededf0; --color-text-primary: #0d0d14; --color-text-secondary: #55556a; --color-text-muted: #9999aa; --color-border: rgba(0, 0, 0, 0.10); --color-surface: rgba(0, 0, 0, 0.04); --color-surface-hover: rgba(0, 0, 0, 0.07); /* Light glass nav */ --nav-bg: rgba(244, 244, 246, 0.60); --nav-bg-fallback: rgba(244, 244, 246, 0.95); --nav-blur: saturate(180%) blur(28px); /* Light glass footer */ --footer-bg: rgba(237, 237, 240, 0.65); --footer-bg-fallback: rgba(237, 237, 240, 0.97); /* Light dropdown */ --dropdown-bg: rgba(248, 248, 250, 0.96); --dropdown-border: 1px solid rgba(0, 0, 0, 0.10); --dropdown-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); --color-holdco-gold: #c47d0a; } /* ═══════════════════════════════════════════════════════════ COMPONENT OVERRIDES These selectors have higher specificity than the matching rules in each page's