/* Aitopack shared theme system ============================= One canonical set of CSS custom properties, reused by console/index.html and console/leaderboard.html (linked via in both) so the light/dark toggle and the global ticker look and behave identically everywhere they appear. A plain static asset — no build step, served directly like any other file in this directory. Light is the default (:root). Dark is an override applied by adding .dark-theme to (see theme.js and each page's tiny inline FOUC-prevention snippet) — every rule below only needs to override the custom properties that actually change; anything not redeclared here falls through to the :root value, same cascade either theme. --ink, --orange, --green, --red stay constant across themes on purpose — they're brand/status colors chosen to read correctly on both a white and a near-black surface. Only surfaces, borders, and body text differ. */ :root{ --ink:#0A2342; --paper:#F9F9F9; --card:#FFFFFF; --card-raised:#F1F2F4; --orange:#ED7D27; --orange-dark:#C9641A; --green:#17B26A; --green-glow:#17B26A; --red:#E5484D; --line:#E6E7E9; --line-strong:#D3D6DB; --text:#2F3035; --muted:#64748B; } body.dark-theme{ --paper:#020304; --card:#0B1220; --card-raised:#0D1014; --green-glow:#3DFFA0; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16); --text:#DCE3EC; --muted:#6E7A8C; } /* ------------------------------------------------------------ toggle */ .theme-toggle{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--card); color:var(--text); padding:8px 14px; border-radius:100px; font-size:.78rem; font-weight:600; cursor:pointer; transition:border-color .15s ease, transform .15s ease; } .theme-toggle:hover{border-color:var(--orange); transform:translateY(-1px)} /* The floating .theme-fab variant that used to live here (console/ index.html and console/dashboard.html) was removed once both pages' drawers grew a Light/Dark/System segmented deck that fully replaces it -- console/leaderboard.html's header keeps the plain .theme-toggle pill above (no drawer/deck there), still wired through the same #theme-toggle-btn id and theme.js. */ /* --------------------------------------------------- LIVE TELEMETRY nav cta */ .live-telemetry-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff; border:1px solid rgba(23,178,106,.45); padding:9px 18px; border-radius:100px; font-weight:700; font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; box-shadow:0 6px 18px rgba(23,178,106,.15); transition:transform .15s ease, box-shadow .15s ease; } .live-telemetry-btn:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(23,178,106,.25)} .live-telemetry-btn .lt-dot{ width:7px;height:7px;border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(23,178,106,.25); animation:lt-pulse 2s infinite; } @keyframes lt-pulse{50%{box-shadow:0 0 0 6px rgba(23,178,106,.06)}} /* ------------------------------------------------------------- ticker */ /* Structural/animation logic lives in ticker.js (a persistent, append-only requestAnimationFrame scroll, decoupled from any polling swap — see that file's comments for why). This is just the paint. */ .ap-ticker{ border:1px solid var(--line); background:linear-gradient(180deg, rgba(0,0,0,.02), transparent); border-radius:10px; overflow:hidden; height:38px; display:flex; align-items:center; position:relative; } body.dark-theme .ap-ticker{background:linear-gradient(180deg, rgba(255,255,255,.025), transparent)} .ap-ticker-empty{width:100%;text-align:center;color:var(--muted);font-size:.74rem;letter-spacing:.06em} .ap-ticker-track{ display:flex; align-items:center; white-space:nowrap; will-change:transform; } .ap-ticker-item{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;padding:0 22px;border-right:1px solid var(--line);font-family:'IBM Plex Mono',monospace} .ap-ticker-npn{color:var(--muted)} .ap-ticker-state{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);border:1px solid rgba(237,125,39,.35);border-radius:100px;padding:1px 7px} .ap-ticker-arrow{color:var(--muted)} .ap-ticker-amt{color:var(--green);font-weight:600} @media(prefers-reduced-motion:reduce){ .live-telemetry-btn .lt-dot{animation:none} } /* ------------------------------------------------- hamburger + drawer */ /* console/index.html only — the 7 links that used to crowd the header row now live in #nav-drawer, opened by #nav-hamburger. Open/close/ escape/overlay-click wiring is a small inline script on that page (page-specific, unlike the shared toggle/ticker) since no other page has a link list large enough to need this. */ .hamburger-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--line); background:var(--card); border-radius:10px; font-size:1.05rem; line-height:1; color:var(--text); cursor:pointer; transition:border-color .15s ease, transform .15s ease; } .hamburger-btn:hover{border-color:var(--orange); transform:translateY(-1px)} .nav-drawer-overlay{ position:fixed; inset:0; background:rgba(10,15,20,.4); opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:998; } .nav-drawer-overlay.open{opacity:1; pointer-events:auto} /* The drawer is DELIBERATELY NOT theme-driven — it's a fixed, always- dark terminal-style panel regardless of whether the surrounding page is in light or dark mode. Before this, it used var(--card), which is solid white in light mode (the default) — the "white block" bug this section fixes. Every color below is a hardcoded constant, not a custom property, on purpose: this panel is meant to look identical no matter what .dark-theme is doing to the rest of the page. */ .nav-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(440px, 88vw); background:#0B1220; border-left:1px solid rgba(255,255,255,.08); transform:translateX(100%); transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1); z-index:999; padding:36px 40px; display:flex; flex-direction:column; } /* box-shadow lives ONLY on .open, not the base rule -- a box-shadow moves together with its element's transform, so translateX(100%) alone doesn't hide it: the shadow's own offset+blur (-40px + 90px blur ≈ 130px) reaches further left than one drawer-width of translation clears, bleeding a persistent dark band onto the page even while "closed" (confirmed live: elementFromPoint at the darkened region still resolved to page content underneath, and the box-shadow was the only thing covering it, at 0 opacity everywhere else on the page). Scoping it to .open removes the bleed entirely without changing the open-state elevation look at all. */ .nav-drawer.open{transform:translateX(0); box-shadow:-40px 0 90px rgba(0,0,0,.35)} .drawer-close{ align-self:flex-end; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:transparent; color:#F2F4F7; font-size:1.05rem; cursor:pointer; display:grid; place-items:center; transition:border-color .15s ease, color .15s ease, transform .3s ease; margin-bottom:64px; } .drawer-close:hover{border-color:#ED7D27; color:#fff; transform:rotate(90deg)} /* The flat 7-link .drawer-links/.drawer-link-accent layout that used to live here was replaced by console/index.html's own accordion + theme-deck + auth-slot content (see that file's own