/* ========================================================================== Escape Velocity — website design tokens -------------------------------------------------------------------------- Faithful to the app (styles.css / themes.css): deep-navy "Space" base #050816, violet -> cyan "thrust" gradient, 16px cards, 12px controls, system font stack. Colours use light-dark(); colour-scheme follows the visitor's OS and can be forced with or any ancestor class .theme-dark / .theme-light (used for the always-dark PRIVACY, CTA-BAND and FOOTER bands). ========================================================================== */ :root { color-scheme: light dark; /* ---- brand constants (never change between modes) ---- */ --ev-navy-950: #050816; /* app background, manifest theme_color */ --ev-navy-900: #070b20; /* app "panel" */ --ev-navy-850: #0d1328; /* app sidebar */ --ev-navy-800: #10173d; /* app icon tile */ --ev-navy-700: #0f1536; /* app card (solid) */ --ev-violet: #7c5cff; /* --g1 */ --ev-cyan: #22d3ee; /* --g2 */ --ev-periwinkle: #8c9bff; /* --b-dark, links on dark */ --ev-indigo: #4a43e0; /* --b-light, links on light */ --ev-ring: #2b3566; /* planet ring in the logo */ /* ---- surfaces ---- */ --bg: light-dark(#f4f5ff, #050816); --bg-soft: light-dark(#ebecfb, #070b20); /* alternate section band */ --surface: light-dark(#ffffff, #0f1536); /* cards */ --surface-2: light-dark(#f0f1fc, #141b45); /* inset / raised-on-card */ --surface-glass: light-dark(rgba(255,255,255,.72), rgba(8,12,34,.72)); --line: light-dark(rgba(70,80,180,.16), rgba(130,150,255,.2)); --line-strong: light-dark(rgba(70,80,180,.30), rgba(130,150,255,.36)); /* ---- text ---- */ --ink: light-dark(#111533, #eef2ff); /* 16.4:1 / 17.8:1 */ --ink-2: light-dark(#4a5280, #a3b2d8); /* 6.4:1+ / 7.8:1+ body-muted */ --ink-3: light-dark(#5a6290, #8593bd); /* 5.0:1+ / 5.9:1+ captions, helper text */ --brand: light-dark(#4a43e0, #8c9bff); /* links, accents as text */ --brand-ink: light-dark(#3d36cf, #b0baff); /* hover state for links */ --brand-soft: light-dark(rgba(74,67,224,.10), rgba(140,155,255,.16)); --focus: light-dark(#4a43e0, #8c9bff); /* ---- gradient (the "thrust") ---- */ --g1: var(--ev-violet); --g2: var(--ev-cyan); --thrust: linear-gradient(90deg, var(--g1), var(--g2)); --thrust-diag: linear-gradient(135deg, var(--g1), var(--g2)); --thrust-text: linear-gradient(90deg, light-dark(#5b3df0, #a99bff), light-dark(#0878a0, #4fe3ff)); --btn-g1: light-dark(#5b3df0, #7c5cff); /* white text on light: 7.0:1 */ --btn-g2: light-dark(#0c7ca3, #22d3ee); /* white on #0c7ca3: 4.9:1 */ --on-primary: light-dark(#ffffff, #06091c); /* ---- status (from the app's own pos / neg / warn) ---- */ --pos: light-dark(#0a7350, #3de0a8); /* 5.1:1 on --pos-soft */ --pos-soft: light-dark(#dcf5ea, rgba(61,224,168,.14)); --neg: light-dark(#c92a3a, #ff7385); --neg-soft: light-dark(#fde4e7, rgba(255,115,133,.16)); --warn: light-dark(#a15c00, #ffc26b); --warn-soft: light-dark(#fff1d6, rgba(255,194,107,.15)); /* ---- chart palette used by the app's asset types (for illustrations) ---- */ --c-real-estate: #4f6bff; --c-super: #8296c0; --c-etf: #1fa8f0; --c-stocks: #9f6bff; --c-cash: #17b897; --c-crypto: #f59e0b; --c-vehicle: #9a9aa3; --c-angel: #ec4899; /* ---- atmosphere ---- */ --glow-1: light-dark(rgba(124,92,255,.20), rgba(124,92,255,.34)); /* top-right violet */ --glow-2: light-dark(rgba(34,211,238,.16), rgba(34,211,238,.17)); /* bottom-left cyan */ --star-op: light-dark(.0, .85); --grain-op: light-dark(.05, .07); /* ---- elevation ---- */ --shadow-1: light-dark(0 1px 2px rgba(17,24,39,.06), 0 1px 0 rgba(255,255,255,.03) inset); --shadow-2: light-dark(0 1px 2px rgba(17,24,39,.06), 0 6px 24px rgba(40,50,140,.10)); --shadow-3: light-dark(0 2px 6px rgba(30,35,100,.08), 0 30px 80px -24px rgba(40,50,160,.38)); --shadow-device: light-dark( 0 40px 90px -30px rgba(50,40,170,.45), 0 0 0 1px rgba(70,80,180,.14), 0 40px 110px -30px rgba(0,0,0,.75), 0 0 80px -20px rgba(124,92,255,.38)); --ring: 0 0 0 1px var(--line); /* ---- radius (app: card 16, control 12, pill 999) ---- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* ---- spacing (4px grid) ---- */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --section-y: clamp(1.5rem, .9rem + 2.4vw, 2.5rem); /* per side: 24px phone to 40px desktop, so 48 to 80px between bands */ --gutter: clamp(1rem, .75rem + 1.6vw, 2rem); /* 18px at 390, 32px on desktop */ --container: 72.5rem; /* 1160px */ --container-wide: 82rem; /* 1312px, hero + big shots */ --nav-h: 3.75rem; /* ---- type ---- */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-display: clamp(2.4rem, 1.5rem + 4.2vw, 4.5rem); /* hero H1 */ --fs-display-md: clamp(2.1rem, 1.45rem + 2.6vw, 3.25rem); /* split / small heroes, legal h1 */ --fs-h2: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); /* section titles */ --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); /* tile / step titles */ --fs-lead: clamp(1.125rem, 1.04rem + .4vw, 1.375rem); /* subheads */ --fs-body: 1.0625rem; /* 17px, same as the app */ --fs-small: .9375rem; --fs-xs: .8125rem; /* eyebrows, captions */ --lh-tight: 1.04; --lh-snug: 1.25; --lh-body: 1.6; --ls-display: -.038em; --ls-h2: -.028em; --ls-h3: -.012em; --ls-eyebrow: .12em; /* ---- motion ---- */ --ease: cubic-bezier(.2, .7, .2, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-1: 140ms; --dur-2: 240ms; --dur-3: 600ms; --dur-4: 1100ms; /* ---- z ---- */ --z-nav: 50; --z-menu: 60; --z-skip: 100; } /* Visitor-forced themes. `.theme-dark` / `.theme-light` re-scope any region. */ :root[data-theme="light"], .theme-light { color-scheme: light; } :root[data-theme="dark"], .theme-dark { color-scheme: dark; } /* A scoped region must repaint with its own scheme */ .theme-dark, .theme-light { background-color: var(--bg); color: var(--ink); } /* ---- Fallback for browsers without light-dark() (pre-2024): dark values ---- */ @supports not (color: light-dark(#000, #fff)) { :root { --bg:#050816; --bg-soft:#070b20; --surface:#0f1536; --surface-2:#141b45; --surface-glass:rgba(8,12,34,.72); --line:rgba(130,150,255,.2); --line-strong:rgba(130,150,255,.36); --ink:#eef2ff; --ink-2:#a3b2d8; --ink-3:#8593bd; --brand:#8c9bff; --brand-ink:#b0baff; --brand-soft:rgba(140,155,255,.16); --focus:#8c9bff; --thrust-text: linear-gradient(90deg,#a99bff,#4fe3ff); --btn-g1:#7c5cff; --btn-g2:#22d3ee; --on-primary:#06091c; --pos:#3de0a8; --pos-soft:rgba(61,224,168,.14); --neg:#ff7385; --neg-soft:rgba(255,115,133,.16); --warn:#ffc26b; --warn-soft:rgba(255,194,107,.15); --glow-1:rgba(124,92,255,.34); --glow-2:rgba(34,211,238,.17); --star-op:.85; --grain-op:.07; --shadow-1:none; --shadow-2:0 6px 24px rgba(0,0,0,.35); --shadow-3:0 30px 80px -24px rgba(0,0,0,.6); --shadow-device:0 40px 110px -30px rgba(0,0,0,.75), 0 0 80px -20px rgba(124,92,255,.38); } }