/* ========================================================================== THEME — the only file with literal values in it. ========================================================================== Everything else in DigiDeck is written against these tokens, so re-skinning the whole site is one file. Derived tints use color-mix() against a token; never hardcode a lighter purple. Source of truth: ../../brand-guidelines.md (extracted from the shipping desktop app). Keep the two in step — if the desktop moves, move this. Per-room override: the server sets --accent inline on from the prospect's brand colour. Anything that should re-tint per customer must derive from --accent, not --milo-purple. ========================================================================== */ :root { /* ---- Brand -------------------------------------------------------- */ --milo-purple: #7c5cc4; --milo-blue: #4f7fd6; --milo-cyan: #2bc4e0; --milo-orange: #f6994a; --gold: #f5c542; /* The glow is MILO's voice. One accent, breathing. */ --glow: var(--milo-purple); --glow-soft: color-mix(in srgb, var(--glow) 55%, transparent); /* The prospect's colour. Overridden per room; falls back to MILO purple. */ --accent: var(--milo-purple); --accent-soft: color-mix(in srgb, var(--accent) 55%, transparent); --accent-ink: color-mix(in srgb, var(--accent) 78%, #ffffff); /* ---- Semantic ----------------------------------------------------- */ --pos: #2bd4a7; --neg: #ff6f7d; --warn: #f6994a; --neu: #9aa4b2; /* ---- Surfaces ----------------------------------------------------- */ --bg: #07080d; --bg-2: #0b0c12; --panel: rgba(255, 255, 255, 0.028); --panel-2: rgba(255, 255, 255, 0.052); --panel-ink: rgba(12, 13, 16, 0.86); --hair: rgba(255, 255, 255, 0.08); --hair-2: rgba(255, 255, 255, 0.14); --divider: rgba(255, 255, 255, 0.07); --track: rgba(255, 255, 255, 0.06); --text: #e6e9ef; --text-hi: #ffffff; --muted: #9aa4b2; --faint: #6f7889; /* ---- Type --------------------------------------------------------- */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --fs-micro: 10.5px; --fs-meta: 12px; --fs-body: 15px; --fs-lead: 18px; --fs-h3: 21px; --fs-h2: clamp(28px, 3.4vw, 42px); --fs-h1: clamp(38px, 6.2vw, 78px); --track-label: 0.16em; /* micro-label letter-spacing */ --track-word: 0.24em; /* MILO wordmark letter-spacing */ /* ---- Radii -------------------------------------------------------- */ --r-pill: 999px; --r-card: 24px; --r-panel: 18px; --r-ctl: 12px; --r-tiny: 9px; /* ---- Depth -------------------------------------------------------- */ --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 30px 70px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-float: inset 0 1px 0 rgba(255, 255, 255, 0.17), inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -28px 50px rgba(0, 0, 0, 0.3), 0 28px 66px rgba(0, 0, 0, 0.48); --shadow-lift: 0 12px 34px rgba(0, 0, 0, 0.38); --blur: blur(28px) saturate(160%); /* ---- Motion ------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0.9, 0.25, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); --ease-cine: cubic-bezier(0.16, 0.84, 0.28, 1); --t-micro: 0.15s; --t-panel: 0.4s; --breathe: 4.5s; /* ---- Rhythm ------------------------------------------------------- */ --gutter: clamp(20px, 5vw, 64px); --measure: 1180px; --rail: 232px; --chapter-gap: clamp(88px, 13vh, 168px); /* ---- Categorical (charts, cards, call types) ---------------------- */ --c1: #5b9dff; --c2: #34d3a6; --c3: #f7b955; --c4: #f472b6; --c5: #a78bfa; --c6: #3ec9d6; --c7: #ff7a7a; --c8: #b0d84a; } /* The page backdrop. Two accent-tinted radial washes over near-black — the Dojo recipe, opened out to a full page. Fixed so it never scrolls away. */ .backdrop { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(58vw 52vh at 82% -6%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 66%), radial-gradient(52vw 46vh at 4% 18%, color-mix(in srgb, var(--milo-purple) 22%, transparent) 0%, transparent 62%), radial-gradient(60vw 50vh at 12% 104%, color-mix(in srgb, var(--milo-blue) 24%, transparent) 0%, transparent 60%), radial-gradient(46vw 40vh at 92% 88%, color-mix(in srgb, var(--milo-cyan) 13%, transparent) 0%, transparent 62%), linear-gradient(165deg, #0d0f16 0%, var(--bg) 48%, #04050a 100%); } /* A faint grain over the wash — stops the gradients banding on wide screens. */ .backdrop::after { content: ""; position: absolute; inset: 0; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }