/* ============================================================================ Helios Cockpit — design tokens (the locked look) ---------------------------------------------------------------------------- Source of truth: the owner-approved Claude Design files - "Helios Home (standalone).html" -> Direction A "Centered Stage" (the pick) - "Helios Outbox (standalone).html" -> Outbox / Approvals, Direction A Every value below is lifted VERBATIM from those files. Do not drift it. (Design brief: HELIOS_UI_DESIGN_BRIEF.md — Apple product-page calm, dark, ONE accent, typography does the hierarchy, whitespace is a feature.) ========================================================================== */ :root { /* ---- Surface ---------------------------------------------------------- */ /* The design framed each screen as a #060607 artboard floating on a #141416 backdrop with a rounded border + drop shadow. In the real full-viewport app the cockpit IS the surface, so #060607 fills the viewport and the artboard chrome is dropped. (Layout adaptation: decision cockpit-web-layout-adaptation.) */ --bg: #060607; /* app surface (design artboard bg) */ --backdrop: #141416; /* design page bg — kept for any inset framing */ /* ---- Text ramp (Apple restraint, but LEGIBILITY WINS) ----------------- Owner-requested legibility override (2026-06-15): the original near-mono ramp (ink-2 #86868b, ink-3 #6e6e73, ink-4 #5c5c61) read too dim on the near-black surface at arm's length on a 27" display. The ramp is lifted up so secondary/tertiary text stays clearly legible (all ≥ ~6:1 on --bg) while keeping a clear four-step hierarchy below the bright primary. Deliberate drift from the design files, not accidental. */ --ink: #f5f5f7; /* primary — names, headings, values */ --ink-2: #c8c8d0; /* secondary / supporting copy — clearly legible */ --ink-3: #a8a8b0; /* tertiary / meta, eyebrows — readable, lower emphasis */ --ink-4: #909097; /* quaternary / faint meta — still legible */ --ink-link: #dcdce4; /* link affordance (underlined elsewhere) */ --ink-avatar: #c0c0c6; /* avatar monogram */ /* ---- Hairlines & fills (white at low alpha — never a grey) ------------ */ --line: rgba(255, 255, 255, 0.06); /* top-bar border */ --line-row: rgba(255, 255, 255, 0.07); /* rows, card border */ --line-strong: rgba(255, 255, 255, 0.08); /* home needs-you list */ --row-hover: rgba(255, 255, 255, 0.022); /* outbox row hover */ --row-hover-home: rgba(255, 255, 255, 0.025); /* home needs-you row hover */ --chip-bg: rgba(255, 255, 255, 0.07); /* score chip */ --avatar-bg: rgba(255, 255, 255, 0.08); /* avatar circle */ --divider: rgba(255, 255, 255, 0.16); /* HELIOS | Hielux divider */ --nav-hover-bg: rgba(255, 255, 255, 0.04); /* (sidebar variant only) */ /* ---- The single accent: the green health dot -------------------------- */ --accent: oklch(0.74 0.11 152); --accent-glow: oklch(0.74 0.11 152 / 0.55); /* home dot glow */ --accent-glow-sm: oklch(0.74 0.11 152 / 0.5); /* footer/health-line dot glow */ /* ---- Segmented control (demo-toggle styling, reused for real toggles) -- */ --seg-track: rgba(255, 255, 255, 0.05); --seg-border: rgba(255, 255, 255, 0.08); --seg-on-bg: rgba(255, 255, 255, 0.13); /* ---- Focal spotlight behind the home focal point ---------------------- */ --stage-glow: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 62%); /* ---- Type ------------------------------------------------------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; /* ---- Radii ------------------------------------------------------------ */ --r-card: 22px; /* artboard/panel */ --r-row: 14px; /* list rows */ --r-chip: 8px; /* score chip */ --r-row-sm: 8px; /* home needs-you rows */ --r-pill: 999px; /* segmented control, dot */ /* ---- Frame metrics ---------------------------------------------------- */ --topbar-h: 62px; --topbar-pad: 40px; --content-max: 1440px; /* design artboard width = content max-width */ --shadow-card: 0 50px 120px rgba(0, 0, 0, 0.55); /* ---- Motion (Apple/iOS-grade) ---------------------------------------- One easing vocabulary, used everywhere so the whole cockpit moves with the same hand. Every animation that uses these touches only transform/opacity (compositor-only) so motion stays frame-smooth under rapid interaction. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* decelerate — the workhorse enter */ --ease-spring: cubic-bezier(0.34, 1.40, 0.50, 1); /* gentle overshoot for taps/toggles */ --ease-in: cubic-bezier(0.50, 0, 0.75, 0); /* accelerate — for exits */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* the progress shimmer */ --dur-fast: 0.16s; --dur: 0.26s; --dur-slow: 0.42s; --ease-spring-soft: cubic-bezier(0.30, 1.30, 0.45, 1); /* glass settle — gentle overshoot */ /* ---- Liquid Glass — translucent, layered material (iOS 26/27) ----------- Real glass: a frosted backdrop blur + a faint specular edge that carries the light + a soft depth shadow. Tuned for the near-black surface (the blur is subtle there; the EDGES and DEPTH do most of the work). Blur is GPU-composited and kept to a few surfaces (panel, top bar, the loading shimmer) so it never costs a frame. No motion here can add latency — see the masking notes in cockpit.css. */ --glass-bg: rgba(30, 30, 36, 0.55); /* panel fill — page glows through */ --glass-bg-bar: rgba(9, 9, 11, 0.60); /* top bar fill (darker, steadier) */ --glass-blur: 22px; --glass-saturate: 170%; --glass-edge: rgba(255, 255, 255, 0.16); /* bright specular rim */ --glass-edge-soft: rgba(255, 255, 255, 0.06); /* faint inner highlight */ --glass-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.40); --glass-sheen: linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.07) 50%, transparent 62%); } /* The one motion in the system: the health dot breathes. */ @keyframes breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.78); } } @media (prefers-reduced-motion: reduce) { /* respect the OS setting — calm, not laggy (brief rule 7) */ * { animation: none !important; } }