/* v8-theme.css — shared design tokens + base reset for non-R.I.G pages. Loaded by quick-nav.js for any page that wants the v8 visual language. Pages can opt out by adding class="no-v8-theme" on . */ /* ═══ Hide visible scrollbars site-wide ════════════════════════════════ Scroll wheel + touch drag still work — we only suppress the visual bar. Applied universally so any scrollable container (panel, modal, list, #main, etc.) renders clean. Pages can opt out by setting `scrollbar-width:auto` on a specific element if needed. */ html:not(.no-v8-theme), html:not(.no-v8-theme) *{ scrollbar-width:none; /* Firefox */ -ms-overflow-style:none; /* IE / old Edge */ } html:not(.no-v8-theme) *::-webkit-scrollbar, html:not(.no-v8-theme)::-webkit-scrollbar{ width:0;height:0;display:none; /* Chrome / Safari / new Edge */ } @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Orbitron:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root{ /* Accents */ --cy:#5ed7ff; --cy-b:#a8efff; --cy-d:rgba(94,215,255,.55); --am:#ffc850; --am-b:#ffe5a0; --gn:#7be0a8; --rd:#ff7048; --or:#ff9050; --steel-1:#1a2230; --steel-2:#0d1320; --steel-3:#070b14; /* Neutrals */ --bg:#06080d; --bg-elev-1:rgba(20,26,38,.62); --bg-elev-2:rgba(28,36,52,.55); --bg-soft:rgba(94,215,255,.04); --border:rgba(255,255,255,.06); --border-strong:rgba(255,255,255,.10); --border-cyan:rgba(94,215,255,.18); --txt:rgba(240,244,250,.95); --txt-d:rgba(180,200,222,.72); --txt-dim:rgba(140,160,190,.52); --txt-faint:rgba(110,130,160,.40); /* Scale */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-pill:999px; /* Responsive type scale — clamp(min,vw,max). At 1366px viewport ≈ min; at 1920px ≈ midpoint; at 2644px+ caps at max. Replaces fixed-px sizes so chrome + body text stay legible across 1366→4K monitors without per-page bumps. */ --fs-xs: clamp(10px, 0.62vw, 14px); --fs-sm: clamp(12px, 0.78vw, 17px); --fs-base: clamp(14px, 0.95vw, 20px); --fs-md: clamp(16px, 1.10vw, 23px); --fs-lg: clamp(18px, 1.30vw, 26px); --fs-xl: clamp(22px, 1.65vw, 32px); --fs-2xl: clamp(28px, 2.20vw, 44px); --fs-3xl: clamp(36px, 2.80vw, 56px); --fs-hero: clamp(40px, 3.40vw, 68px); /* Responsive chrome dimensions */ --bar-h: clamp(40px, 3.0vh, 60px); --tab-h: clamp(44px, 3.4vh, 64px); --panel-max: clamp(960px, 80vw, 1700px); --gap: clamp(8px, 0.7vw, 16px); --pad-page: clamp(16px, 1.5vw, 32px); /* Shadow + ease */ --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh-md:0 4px 12px rgba(0,0,0,.45); --sh-lg:0 12px 32px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.3); --ease:cubic-bezier(.2,.9,.3,1); } html:not(.no-v8-theme), html:not(.no-v8-theme) body{ background:#06080d; color:var(--txt); font-family:'Inter','SF Pro Display','Segoe UI',sans-serif !important; font-size:var(--fs-base); line-height:1.55; font-feature-settings:'cv02','cv03','cv04','cv11','ss01','kern','liga','calt'; font-variant-numeric:tabular-nums; font-synthesis:none; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:geometricPrecision; letter-spacing:-0.005em; } html:not(.no-v8-theme) body{ background: radial-gradient(ellipse 1200px 800px at 20% 10%, rgba(40,80,140,.10) 0%, transparent 60%), radial-gradient(ellipse 800px 600px at 80% 90%, rgba(120,40,180,.08) 0%, transparent 60%), #06080d !important; } /* body padding-top moved to quick-nav.js auto-inject (which checks for overflow:hidden and skips on viewport-fit pages). v8-theme used to set padding-top:46px unconditionally, which caused 46px overflow on every tool page that uses overflow:hidden. 2026-05-10. */ html:not(.no-v8-theme) ::selection{background:rgba(94,215,255,.30);color:#fff;} /* Frosted MFD panel — drop-in class for any container */ html:not(.no-v8-theme) .v8-mfd{ background:linear-gradient(180deg,rgba(20,28,42,.72) 0%,rgba(10,16,24,.78) 100%); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border:1px solid rgba(255,255,255,.06); border-radius:var(--r-lg); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px rgba(0,0,0,.45), 0 24px 56px rgba(0,0,0,.30); padding:var(--sp-4); } html:not(.no-v8-theme) .v8-mfd-hdr{ font-family:'Inter','Orbitron',sans-serif; font-size:var(--fs-xs);letter-spacing:2.5px;font-weight:700; color:rgba(168,239,255,.78); text-transform:uppercase; margin-bottom:var(--sp-3); padding-bottom:var(--sp-2); border-bottom:1px solid rgba(94,215,255,.08); display:flex;justify-content:space-between;align-items:center; } /* Stat grid — same pattern R.I.G uses */ html:not(.no-v8-theme) .v8-stat-grid{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px; background:rgba(94,215,255,.06);border-radius:var(--r-md);overflow:hidden; } html:not(.no-v8-theme) .v8-stat-cell{padding:14px 16px;background:rgba(10,16,26,.5); display:flex;flex-direction:column;gap:4px;} html:not(.no-v8-theme) .v8-stat-cell .v{font-family:'Inter','Orbitron',sans-serif; font-size:20px;font-weight:600;color:#fff; font-variant-numeric:tabular-nums;letter-spacing:-0.01em;line-height:1.1;} html:not(.no-v8-theme) .v8-stat-cell .l{font-size:9.5px;letter-spacing:1.8px;font-weight:600; color:rgba(168,239,255,.55);text-transform:uppercase;} /* Refined inputs/selects */ html:not(.no-v8-theme) input[type="text"], html:not(.no-v8-theme) input[type="search"], html:not(.no-v8-theme) select{ appearance:none;-webkit-appearance:none;-moz-appearance:none; background:rgba(20,28,42,.6); border:1px solid var(--border-strong); color:var(--txt); border-radius:var(--r-md); padding:6px 12px; font-family:inherit;font-size:var(--fs-sm); transition:border-color .15s var(--ease), box-shadow .15s var(--ease); } html:not(.no-v8-theme) input:focus, html:not(.no-v8-theme) select:focus{ outline:none;border-color:var(--cy); box-shadow:0 0 0 3px rgba(94,215,255,.18); } html:not(.no-v8-theme) select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235ed7ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 2l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 8px center;background-size:10px; padding-right:26px !important;cursor:pointer; } html:not(.no-v8-theme) select option{background:#0d1320;color:var(--txt);} /* Buttons */ html:not(.no-v8-theme) button.v8-btn, html:not(.no-v8-theme) .v8-btn{ display:inline-flex;align-items:center;gap:6px; padding:8px 14px;border-radius:var(--r-md); font-family:inherit;font-size:10.5px;letter-spacing:2px;font-weight:700; background:linear-gradient(180deg,rgba(28,40,58,.85),rgba(8,14,22,.98)); border:1px solid rgba(94,215,255,.45);color:rgba(168,239,255,.92); cursor:pointer;transition:all .15s var(--ease); } html:not(.no-v8-theme) .v8-btn:hover{ border-color:var(--cy);color:#fff; box-shadow:0 0 12px rgba(94,215,255,.35); } html:not(.no-v8-theme) .v8-btn.primary{ background:linear-gradient(180deg,rgba(94,215,255,.18),rgba(28,68,108,.55)); color:#fff;border-color:var(--cy); box-shadow:inset 0 1px 0 rgba(180,220,250,.30),0 0 10px rgba(94,215,255,.30); } html:not(.no-v8-theme) .v8-btn.danger{ background:linear-gradient(180deg,rgba(140,40,20,.85),rgba(80,20,12,.95)); color:#fff;border-color:rgba(255,140,80,.85); } /* ─── Legacy-class shim ───────────────────────────────────────────── Old pages use .hud-panel/.hud-row/.hud-btn from hud-shell.css. Map them to v8 visuals so pages don't render unstyled when hud-shell.css is absent. */ html:not(.no-v8-theme) .hud-panel{ position:relative; background:linear-gradient(180deg,rgba(20,28,42,.72) 0%,rgba(10,16,24,.78) 100%); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border:1px solid rgba(255,255,255,.06); border-radius:var(--r-lg); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px rgba(0,0,0,.45); padding:var(--sp-4); margin-bottom:var(--sp-3); } html:not(.no-v8-theme) .hud-panel[data-label]::before{ content:attr(data-label); display:block; font-family:'Inter','Orbitron',sans-serif; font-size:10px;letter-spacing:2.5px;font-weight:700; color:rgba(168,239,255,.78); text-transform:uppercase; margin-bottom:var(--sp-3); padding-bottom:var(--sp-2); border-bottom:1px solid rgba(94,215,255,.08); } /* .scrollable means "this panel scrolls its overflow", not "cap to 520px". Pages with their own #scene height (fleet/salvage/mining/etc) need the panel to fill its parent, not get clipped. */ html:not(.no-v8-theme) .hud-panel.scrollable{ overflow-y:auto;min-height:0; } html:not(.no-v8-theme) .hud-row{ display:flex;justify-content:space-between;align-items:center;gap:10px; padding:6px 8px;border-bottom:1px solid rgba(94,215,255,.10); font-family:'JetBrains Mono','Roboto Mono',monospace;font-size:11px; } html:not(.no-v8-theme) .hud-row:last-child{border-bottom:none;} html:not(.no-v8-theme) .hud-row .lbl{color:rgba(220,235,250,.85);} html:not(.no-v8-theme) .hud-row .val{color:rgba(168,239,255,.85);font-weight:700;letter-spacing:1px;} html:not(.no-v8-theme) .hud-row .val.amber{color:rgba(255,200,80,.85);} html:not(.no-v8-theme) .hud-row .val.gn{color:rgba(168,239,255,.85);} html:not(.no-v8-theme) .hud-row .val.rd{color:rgba(255,140,120,.85);} html:not(.no-v8-theme) .hud-btn{ display:inline-flex;align-items:center;gap:6px; padding:6px 12px;border-radius:var(--r-md); font-family:'Inter','Orbitron',sans-serif;font-size:9.5px;letter-spacing:2px;font-weight:700; background:linear-gradient(180deg,rgba(28,40,58,.85),rgba(8,14,22,.98)); border:1px solid rgba(94,215,255,.45);color:rgba(168,239,255,.92); cursor:pointer;text-decoration:none;transition:all .15s var(--ease); } html:not(.no-v8-theme) .hud-btn:hover{ border-color:var(--cy);color:#fff;box-shadow:0 0 12px rgba(94,215,255,.35); } html:not(.no-v8-theme) .hud-btn.amber{border-color:rgba(255,200,80,.65);color:rgba(255,235,180,.95);} html:not(.no-v8-theme) .hud-chip{ display:inline-block;padding:1px 6px;font-size:8.5px;letter-spacing:1.2px;font-weight:700; border-radius:2px;margin-left:4px;border:1px solid rgba(94,215,255,.40);color:rgba(168,239,255,.85); } html:not(.no-v8-theme) .hud-chip.amber{border-color:rgba(255,200,80,.40);color:rgba(255,200,80,.85);} html:not(.no-v8-theme) .hud-chip.gn{border-color:rgba(184,142,255,.40);color:rgba(184,142,255,.85);} html:not(.no-v8-theme) .hud-title{ position:fixed;top:50px;left:50%;transform:translateX(-50%);text-align:center;z-index:10;pointer-events:none; } html:not(.no-v8-theme) .hud-title h1{ font-family:'Inter','Orbitron',sans-serif;font-size:22px;letter-spacing:6px;font-weight:700; color:rgba(168,239,255,.95);margin:0; } html:not(.no-v8-theme) .hud-title .sub{ font-family:'JetBrains Mono','Roboto Mono',monospace;font-size:10px;letter-spacing:3px; color:rgba(180,200,222,.65);margin-top:2px;text-transform:uppercase; } html:not(.no-v8-theme) .hud-title .brk{color:rgba(94,215,255,.65);margin:0 6px;} /* ─── Narrow viewport ───────────────────────────────────────────── Dashboard rails stack below center, quick-nav shrinks, version pill moves out of the way of the OS chrome on phones. */ @media (max-width: 900px){ /* (body padding-top removed — handled by quick-nav.js auto-inject) */ #qn-cluster{ top:6px !important; right:6px !important; height:26px !important; gap:4px !important; } #qn-cluster .qn-btn,#qn-cluster #qn-ai,#qn-cluster #qn-user{ padding:0 9px 0 12px !important; font-size:8.5px !important; letter-spacing:1.5px !important; } #qn-cluster .qn-btn span:not(.qn-ico){ display:none; } #qn-cluster #qn-ai span:not(.qn-ico),#qn-cluster #qn-user span{ display:none; } #qn-ver{ left:6px !important; bottom:4px !important; font-size:8.5px !important; padding:2px 6px !important; } #qn-aia{ width:calc(100vw - 16px) !important; right:8px !important; top:42px !important; } /* Dashboard rails: stack vertically */ .rail.left,.rail.right{ position:static !important; width:auto !important; max-width:100% !important; flex-direction:row !important; flex-wrap:wrap !important; padding:8px !important; } .rail.left .role-card,.rail.right .role-card{ flex:1 1 calc(50% - 8px); min-width:0; } /* AI Engineer + Loadouts Stage */ #center-stage{ position:static !important; transform:none !important; padding:20px 12px !important; } #holo-actions{ flex-wrap:wrap !important; gap:8px !important; } #holo-actions .action-card{ flex:1 1 calc(50% - 8px); } /* Patch banner — keep visible on narrow */ #patch-banner{ font-size:8.5px !important; letter-spacing:1.2px !important; padding:4px 8px !important; max-width:calc(100vw - 16px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } @media (max-width: 600px){ .rail.left .role-card,.rail.right .role-card{ flex:1 1 100%; } #holo-actions .action-card{ flex:1 1 100%; } } /* ── Reduced motion blanket ───────────────────────────────────────── Applied site-wide so every page respects user's OS preference. This replaces having to repeat the same media query in every page's