/* ========================================================= LIVEOP WEBSITE, DESIGN TOKENS --------------------------------------------------------- Marketing token layer built on top of the canonical LIVEOP design system (Design-system/colors_and_type.css). Model: a marketing page is a *rhythm of sections*, alternating cinematic DARK surfaces (atmosphere / emotion) and clean LIGHT surfaces (rational information that people remember). - Brand tokens (purple, gold, safety colors, type, spacing, radii, motion) are constant and live in :root. - Semantic *surface* tokens (--bg, --fg, --border, --card-bg …) default to LIGHT and are overridden inside `.s-dark`. This lets light and dark sections coexist on one page without a global theme toggle. ========================================================= */ /* ---------- FOUNDERS GROTESK (self-hosted) ---------- */ @font-face{font-family:"Founders Grotesk";src:url("../fonts/founders-grotesk-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Founders Grotesk";src:url("../fonts/founders-grotesk-light-italic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:"Founders Grotesk";src:url("../fonts/founders-grotesk-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Founders Grotesk";src:url("../fonts/founders-grotesk-regular-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"Founders Grotesk";src:url("../fonts/founders-grotesk-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Founders Grotesk";src:url("../fonts/founders-grotesk-medium-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap} @font-face{font-family:"Founders Grotesk";src:url("../fonts/founders-grotesk-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Founders Grotesk";src:url("../fonts/founders-grotesk-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} :root{ /* ============ BRAND (constant across surfaces) ============ */ --brand-purple:#612df8; /* primary accent, both surfaces */ --brand-purple-deep:#3c23aa; --brand-purple-bright:#8f74ff; /* legible on dark / glows */ --brand-gold-1:#c7c4a9; /* wordmark gradient stop 1 */ --brand-gold-2:#998675; /* wordmark gradient stop 2 */ --brand-gold-gradient:linear-gradient(180deg,#c7c4a9 0%,#998675 100%); /* Public-safety / atmosphere colors, MEANING, never decoration. red = severity/active · blue = dispatch/location · yellow = caution */ --safety-red:#af130f; --safety-red-bright:#ff3b47; /* on dark */ --safety-blue:#0749a6; --safety-blue-bright:#3a86e0; /* on dark */ --safety-yellow:#e0b900; --emergency-deep:#761925; --night-graphite:#25272d; /* ============ STATUS ============ */ --success:#00d08a; --info:#178ce4; --warning:#ff9100; --error:#fd2032; /* ============ TYPE ============ */ --font-sans:"Founders Grotesk","Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono:ui-monospace,"SF Mono","JetBrains Mono","Menlo",monospace; /* Fluid type scale (marketing) */ /* All type sizes are relative units, never px. rem is relative to the single root (1rem = 16px) so the whole scale grows if the root does and never compounds through nesting; em is used only where a size should track its local context (e.g. .btn--secondary, .link-arrow). Comments show px. */ --fs-micro:.8125rem; /* 13 tiny meta: badges, scroll cue, mono */ --fs-meta:clamp(.9375rem,1vw,1rem); /* 15-16 meta labels, captions, tags */ --fs-small:clamp(1rem,1.1vw,1.0625rem); /* 16-17 small body: nav, footer links */ --fs-eyebrow:1.125rem; /* 18 section eyebrows and buttons */ --fs-body:clamp(1.125rem,1.2vw,1.25rem); /* 18-20 base body */ --fs-lead:clamp(1.3125rem,1.55vw,1.5rem); /* 21-24 lead / feature intro */ --fs-title:clamp(1.375rem,1.9vw,1.5rem); /* 22-24 card / tile titles */ --fs-h5:clamp(1.25rem,1.6vw,1.375rem); /* 20-22 */ --fs-h4:clamp(1.375rem,2vw,1.625rem); /* 22-26 */ --fs-h3:clamp(1.75rem,3.8vw,2.75rem); /* 28-44 */ --fs-h2:clamp(1.875rem,4.2vw,3.25rem); /* 30-52 */ --fs-h1:clamp(2.375rem,5.2vw,4rem); /* 38-64 */ --fs-display:clamp(3.5rem,9vw,8.25rem); /* 56-132 hero wordmark */ --lh-tight:1.05; --lh-snug:1.16; --lh-normal:1.35; --lh-relaxed:1.55; --ls-tight:-.03em; --ls-snug:-.015em; --ls-normal:0; --ls-eyebrow:.06em; /* ============ SPACING (4-pt) ============ */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --sp-32:128px; --section-y:clamp(72px,10vw,150px); /* vertical rhythm between sections */ /* ============ RADII ============ */ --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:16px; --r-2xl:20px; --r-pill:9999px; /* ============ LAYOUT ============ */ --maxw:1240px; --maxw-narrow:820px; --gutter:clamp(20px,4vw,40px); /* ============ MOTION ============ */ --ease:cubic-bezier(.2,0,0,1); --ease-expo:cubic-bezier(.16,1,.3,1); --dur-hover:.12s; --dur-state:.2s; --dur-page:.4s; --dur-ambient:.8s; /* ========================================================= SEMANTIC SURFACE TOKENS, DEFAULT = LIGHT (rational information; strong recall) ========================================================= */ --bg:#f7f7f7; /* page / section base (never pure #fff) */ --bg-raised:#ffffff; /* cards, raised panels */ --bg-sunken:#efefef; --bg-warm:#f4f2ef; /* warm neutral variant */ --accent:var(--brand-purple); --accent-soft:rgba(97,45,248,.10); --accent-line:rgba(97,45,248,.22); --fg:#1a1a1a; /* primary text */ --fg-muted:#4a4a4a; /* secondary */ --fg-subtle:#777777; /* tertiary / captions */ --fg-faint:#a8a8a8; /* disabled / placeholders */ --fg-on-accent:#ffffff; --border:rgba(20,20,25,.10); --border-strong:rgba(20,20,25,.16); --hairline:rgba(20,20,25,.07); --card-bg:linear-gradient(20deg,#ffffff 0%,#f4f4f4 63%,#fbfbfb 100%); --card-border:1px solid rgba(20,20,25,.08); --card-shadow:0 3px 13px 0 rgba(0,0,0,.06); --card-shadow-hover:0 20px 50px -18px rgba(20,24,40,.28); --btn-secondary-bg:rgba(20,20,25,.04); --btn-secondary-border:1px solid rgba(20,20,25,.12); --glass-bg:rgba(255,255,255,.7); --glass-border:1px solid rgba(20,20,25,.08); color-scheme:light; } /* ========================================================= DARK SURFACE, cinematic cockpit (atmosphere / emotion) Apply `.s-dark` to any
/wrapper to flip its palette. Mirrors the LIVENAV 5 "Operational Cinema" reference. ========================================================= */ .s-dark{ --bg:#0a0c10; --bg-raised:#12151c; --bg-sunken:#07090c; --bg-warm:#101319; --accent:var(--brand-purple-bright); --accent-soft:rgba(97,45,248,.16); --accent-line:rgba(143,116,255,.35); --fg:#f4f6f9; --fg-muted:#b4bcc8; --fg-subtle:#8a93a1; --fg-faint:#5e6169; --fg-on-accent:#ffffff; --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18); --hairline:rgba(255,255,255,.06); --card-bg:linear-gradient(150deg,#161a22 0%,#10131a 60%,#141821 100%); --card-border:1px solid rgba(255,255,255,.09); --card-shadow:0 20px 50px -20px rgba(0,0,0,.6); --card-shadow-hover:0 30px 60px -20px rgba(0,0,0,.7); --btn-secondary-bg:rgba(255,255,255,.05); --btn-secondary-border:1px solid rgba(255,255,255,.12); --glass-bg:rgba(12,15,20,.55); --glass-border:1px solid rgba(255,255,255,.09); color-scheme:dark; } /* Warm-light variant (subtle paper tone for editorial/light sections) */ .s-warm{ --bg:var(--bg-warm); } /* Cool light gray. Use to separate two adjacent light sections without breaking the dark/light rhythm with a third dark block. */ .s-sunken{ --bg:var(--bg-sunken); } @media (prefers-reduced-motion:reduce){ :root{--dur-hover:0s;--dur-state:0s;--dur-page:0s;--dur-ambient:0s;} }