/* mercury-theme.css — ONE theme for every /horizon route. Palette: the blue→orange skin (activity page). Type: the Unbounded / IBM Plex skin (forums page). Load LAST on both the static R3.1 pages and the Horizon app templates; everything below is variables plus element-level rules, so it sits on top of either skin without touching their markup. */ @import url("/assets/fonts/fonts.css"); /* self-hosted Unbounded + IBM Plex (OFL) — replaces the Google Fonts link */ :root{ /* ground — the deep navy from the activity page, not the near-black of the forums page */ --ms-ground:#0a0e18; /* page */ --ms-ground-2:#0d1322; /* section bands */ --ms-panel:#101828; /* cards / rails */ --ms-panel-2:#141d31; /* hover / raised */ --ms-line:#1d2740; /* borders */ --ms-line-2:#2a3654; /* hover borders */ /* the hero: blue on the left, orange heat on the right — the activity page's one good idea */ --ms-hero:radial-gradient(120% 140% at 88% 30%,rgba(255,106,43,.28) 0%,rgba(255,106,43,0) 55%), linear-gradient(135deg,#182a52 0%,#0f1a33 45%,#0d1322 100%); /* ink */ --ms-ink:#eef1f6; --ms-ink-2:#c7cdd9; --ms-dim:#8a93a6; --ms-mute:#5c6578; /* the one orange — actions, links, live marks. blue is ground, never an accent competing with it */ --ms-orange:#ff6a2b; --ms-orange-2:#ff8a57; --ms-orange-ink:#120600; --ms-orange-glow:0 0 0 2px var(--ms-orange),0 0 26px 4px rgba(255,106,43,.5); /* selected / active tab: the blue→orange sweep from the activity page's "All" tab */ --ms-active:linear-gradient(90deg,#1e3670 0%,#2a2f52 60%,#4a2a24 100%); /* server-authoritative live state only */ --ms-live:#2ecc71; /* type */ --ms-display:"Unbounded","IBM Plex Sans",system-ui,sans-serif; --ms-body:"IBM Plex Sans",system-ui,sans-serif; --ms-mono:"IBM Plex Mono",ui-monospace,monospace; --ms-radius:14px; --ms-radius-pill:999px; } /* --- element rules are OPT-IN: they apply only inside a root that carries data-ms-theme. The static R4 pages set . The Horizon app gets ONLY the variable bridge below unless a template opts a container in — so auth screens and app components are never restyled by accident. --- */ /* --- base ------------------------------------------------------------------- */ [data-ms-theme], [data-ms-theme]{background:var(--ms-ground);color:var(--ms-ink);font-family:var(--ms-body);-webkit-font-smoothing:antialiased} [data-ms-theme] a{color:var(--ms-orange);text-decoration:none} [data-ms-theme] a:hover{color:var(--ms-orange-2)} [data-ms-theme] h1, [data-ms-theme] h2, [data-ms-theme] h3, [data-ms-theme] .display{font-family:var(--ms-display);font-weight:800;letter-spacing:-.02em;color:var(--ms-ink)} [data-ms-theme] h1{font-size:clamp(44px,7vw,112px);line-height:.92;text-transform:uppercase} [data-ms-theme] h1 .ghost{color:transparent;-webkit-text-stroke:1.5px #3a4666} /* "STILL LISTENING." outline line */ [data-ms-theme] h2{font-size:clamp(28px,3.4vw,44px);line-height:1.05} [data-ms-theme] h3{font-size:18px;font-weight:700;letter-spacing:0} [data-ms-theme] .eyebrow, [data-ms-theme] .kicker, [data-ms-theme] small.mono, [data-ms-theme] .mono{font-family:var(--ms-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ms-orange)} [data-ms-theme] .eyebrow::before{content:"";display:inline-block;width:22px;height:2px;background:var(--ms-orange);vertical-align:middle;margin-right:10px} [data-ms-theme] p, [data-ms-theme] li, [data-ms-theme] td{font-size:15px;line-height:1.55;color:var(--ms-ink-2)} [data-ms-theme] .dim{color:var(--ms-dim)} /* --- surfaces --------------------------------------------------------------- */ [data-ms-theme] .hero, [data-ms-theme] [data-hero], [data-ms-theme] .page-hero{background:var(--ms-hero);border:1px solid var(--ms-line);border-radius:22px} [data-ms-theme] .card, [data-ms-theme] .panel, [data-ms-theme] .rail, [data-ms-theme] article, [data-ms-theme] aside>section{background:var(--ms-panel);border:1px solid var(--ms-line);border-radius:var(--ms-radius)} [data-ms-theme] .card:hover, [data-ms-theme] article:hover{background:var(--ms-panel-2);border-color:var(--ms-line-2)} [data-ms-theme] .band{background:var(--ms-ground-2);border-top:1px solid var(--ms-line);border-bottom:1px solid var(--ms-line)} [data-ms-theme] hr{border:0;border-top:1px solid var(--ms-line)} /* --- controls --------------------------------------------------------------- */ [data-ms-theme] .btn, [data-ms-theme] button, [data-ms-theme] [role=button]{font-family:var(--ms-body);font-weight:600;font-size:14px;border-radius:var(--ms-radius-pill); padding:10px 18px;border:1px solid var(--ms-line-2);background:var(--ms-panel);color:var(--ms-ink);cursor:pointer} [data-ms-theme] .btn-primary, [data-ms-theme] .primary-button, [data-ms-theme] .join, [data-ms-theme] .signup, [data-ms-theme] [data-tune-in]{background:var(--ms-orange);color:var(--ms-orange-ink);border-color:var(--ms-orange)} [data-ms-theme] .btn-primary:hover, [data-ms-theme] .join:hover, [data-ms-theme] .signup:hover{background:var(--ms-orange-2)} [data-ms-theme] .is-live, [data-ms-theme] .glow{box-shadow:var(--ms-orange-glow)} [data-ms-theme] .tab.active, [data-ms-theme] .seg.active, [data-ms-theme] [aria-selected=true]{background:var(--ms-active);border-color:var(--ms-line-2);color:var(--ms-ink)} [data-ms-theme] input, [data-ms-theme] select, [data-ms-theme] textarea{background:#0b1120;border:1px solid var(--ms-line);border-radius:10px;color:var(--ms-ink);font-family:var(--ms-body);padding:10px 14px} [data-ms-theme] input:focus, [data-ms-theme] button:focus-visible, [data-ms-theme] a:focus-visible{outline:2px solid var(--ms-orange);outline-offset:2px} /* --- stats / counts ---------------------------------------------------------- */ [data-ms-theme] .stat{font-family:var(--ms-display);font-weight:800;font-size:40px;letter-spacing:-.02em;color:var(--ms-ink)} [data-ms-theme] .stat.accent{color:var(--ms-orange)} [data-ms-theme] .stat-label{font-family:var(--ms-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ms-dim)} /* --- ticker / rail text ------------------------------------------------------ */ [data-ms-theme] .ticker, [data-ms-theme] .signal-rail{font-family:var(--ms-mono);font-size:12px;letter-spacing:.06em;color:var(--ms-dim);border-top:1px solid var(--ms-line);border-bottom:1px solid var(--ms-line);background:var(--ms-ground-2)} [data-ms-theme] .ticker b, [data-ms-theme] .signal-rail b{color:var(--ms-orange);font-weight:400} /* --- live state (from arc_signal / live-signal.js) --------------------------- */ html[data-ms-theme][data-live-state="MUSIC"] [data-live-record]{filter:drop-shadow(0 0 12px var(--ms-live))} [data-ms-theme] [data-live-label]{font-family:var(--ms-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ms-dim)} /* --- motion ------------------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){[data-ms-theme],[data-ms-theme] *,[data-ms-theme] *::before,[data-ms-theme] *::after{animation:none!important;transition:none!important}} /* ============================================================================ BRIDGE — the Horizon app's own tokens (measured off /horizon/activity, Sep 6) The app inlines 108 KB of CSS from the binary, but it is fully variable-driven: 21 custom properties, set in :root, [data-theme=dark], [data-theme=light] and a prefers-color-scheme block. It already uses Unbounded / IBM Plex Sans / IBM Plex Mono. So the app needs no restyling — only these values, loaded after its inline