/* ============================================================ Weststar Engineering — Design Tokens Direction: dark cinematic / enterprise deep-tech Single accent family (electric blue → cyan). The signature element is the scroll-scrub AI-video canvas, not a flat accent. Always reference these vars — never hardcode hex in components. ============================================================ */ /* Heading font — Google Sans (SIL OFL, now published on Google Fonts). Loaded once here because every page links tokens.css (this vanilla multi-page site has no shared ). Preconnect hints to fonts.googleapis.com / fonts.gstatic.com already exist in each page's for the other Google Fonts. Body (Inter) + labels (JetBrains Mono) are unchanged. */ @import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&display=swap'); :root { /* --- Surfaces (near-black, faint blue cast) --- */ --bg: #0a0c10; --bg-elev: #0f131a; --bg-deep: #06070a; --surface: rgba(255, 255, 255, 0.035); --surface-2: rgba(255, 255, 255, 0.06); --surface-hover: rgba(255, 255, 255, 0.09); --scrim-deep: rgba(6, 7, 10, 0.72); /* var(--bg-deep) at alpha — text legibility scrim over footage */ /* --- Hairlines / borders --- */ --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); /* --- Text --- */ --text: #eef1f6; --text-muted: #9aa3b2; --text-dim: #5d6573; /* --- Accent (electric blue → cyan) --- */ --accent: #3ba9ff; --accent-2: #6ee7ff; --accent-deep: #1a6fd0; --accent-grad: linear-gradient(135deg, #3ba9ff 0%, #6ee7ff 100%); --glow: rgba(59, 169, 255, 0.35); --glow-soft: rgba(59, 169, 255, 0.14); /* --- Typography --- */ --font-display: "Google Sans", "Space Grotesk", system-ui, sans-serif; /* headings: Google Sans (Antigravity), Space Grotesk fallback */ --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* labels / data */ /* Fluid type scale */ --fs-hero: clamp(2.6rem, 6.5vw, 6rem); --fs-h2: clamp(1.9rem, 4vw, 3.25rem); --fs-h3: clamp(1.25rem, 2vw, 1.6rem); --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem); --fs-body: 1.0625rem; --fs-sm: 0.9375rem; --fs-eyebrow: 0.75rem; --lh-tight: 1.04; --lh-snug: 1.18; --lh-body: 1.65; /* --- Spacing / layout --- */ --container: 1280px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-y: clamp(5rem, 11vw, 9rem); --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; /* --- Motion --- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.2s; --dur: 0.4s; /* --- Elevation / glow --- */ --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 50px -25px rgba(0,0,0,0.8); --shadow-glow: 0 0 0 1px var(--glow-soft), 0 18px 60px -20px var(--glow); --z-nav: 100; --z-overlay: 90; --z-preloader: 200; /* --- Theme system (T1) — dark is the default; these values ARE the current dark look. [data-theme="light"] below is the override layer. Components read tokens, never raw values. --- */ color-scheme: dark; --accent-rgb: 59, 169, 255; /* = --accent #3ba9ff as R,G,B (for rgba() alphas) */ --accent-2-rgb: 110, 231, 255; /* = --accent-2 #6ee7ff as R,G,B */ --spot-core: rgba(205, 245, 255, 0.95); /* spotlight-border core — near-white cyan */ --spot-halo: rgba(110, 231, 255, 0.45); /* spotlight-border halo — --accent-2 at .45 */ --sheen: rgba(110, 231, 255, 0.05); /* cursor sheen wash */ --sheen-blend: screen; /* blend for cursor spot/sheen layers (light: normal) */ --card-shadow: 0 18px 50px -14px rgba(0, 0, 0, 0.72), 0 0 34px -10px var(--glow-soft); /* tile hover */ --btn-ink: #03121f; /* text ink on accent-filled buttons */ --nav-glass: rgba(10, 12, 16, 0.72); /* scrolled-nav glass — --bg at .72 */ --menu-glass: rgba(6, 7, 10, 0.96); /* mobile menu glass — --bg-deep at .96 */ --grid-line: rgba(255, 255, 255, 0.022);/* body background grid hairlines */ /* --- Theme system (T2) --- */ --bg-deep-rgb: 6, 7, 10; /* = --bg-deep as R,G,B (scrim alphas) */ --border-faint: rgba(255, 255, 255, 0.07); /* sub-hairline (feature tiles) */ --tile-sheen: rgba(255, 255, 255, 0.022); /* faint top sheen on tiles */ --surface-faint: rgba(255, 255, 255, 0.02); /* faintest chip/surface wash */ /* On-media ink — text sitting OVER footage/photos ("cinema panels"). These match the dark-theme ink values exactly and are deliberately NOT overridden by the light theme. */ --text-on-media: #eef1f6; --text-muted-on-media: #9aa3b2; --text-dim-on-media: #5d6573; --accent-on-media: #3ba9ff; --accent-grad-on-media: linear-gradient(135deg, #3ba9ff 0%, #6ee7ff 100%); } /* ============================================================ LIGHT THEME (T1) — approved palette; override layer ONLY. Dark stays the default ( without data-theme = dark). Name mapping vs the approved demo: --tile → --surface/--bg-elev, --muted → --text-muted, --line → --border. --scrim-deep is deliberately NOT overridden: footage scrims stay dark — the scrub sections read as cinema panels in both themes. ============================================================ */ [data-theme="light"] { color-scheme: light; --bg: #f5f7fb; --bg-elev: #ffffff; --bg-deep: #eaeef5; --surface: #ffffff; /* = demo --tile */ --surface-2: rgba(13, 19, 32, 0.05); --surface-hover: rgba(13, 19, 32, 0.08); --border: rgba(13, 19, 32, 0.12); /* = demo --line */ --border-strong: rgba(13, 19, 32, 0.22); --text: #0d1320; --text-muted: #5b6577; /* = demo --muted */ --text-dim: #7d8698; --accent: #0b6fd6; --accent-2: #0e7490; --accent-deep: #0a5cb4; --accent-grad: linear-gradient(135deg, #0b6fd6 0%, #0e7490 100%); --accent-rgb: 11, 111, 214; --accent-2-rgb: 14, 116, 144; --glow: rgba(11, 111, 214, 0.30); --glow-soft: rgba(11, 111, 214, 0.12); --spot-core: rgba(11, 111, 214, 0.85); --spot-halo: rgba(14, 116, 144, 0.35); --sheen: rgba(11, 111, 214, 0.045); --sheen-blend: normal; --card-shadow: 0 20px 44px -22px rgba(13, 40, 80, 0.18); --btn-ink: #ffffff; --nav-glass: rgba(245, 247, 251, 0.78); --menu-glass: rgba(245, 247, 251, 0.96); --grid-line: rgba(13, 19, 32, 0.03); --bg-deep-rgb: 234, 238, 245; --border-faint: rgba(13, 19, 32, 0.09); --tile-sheen: rgba(13, 19, 32, 0.02); --surface-faint: rgba(13, 19, 32, 0.03); /* (on-media tokens intentionally not overridden — cinema panels stay dark) */ --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 20px 44px -24px rgba(13, 40, 80, 0.22); }