@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap'); /* ===== Mission Control theme — shared across pages. Loaded last in so it wins. ===== */ :root{ --mc-cyan:#4fd8ff; --mc-cyan-soft:#9be7ff; } /* deep-space console backdrop */ body{ background:radial-gradient(circle at 50% -8%, #0a1e3a 0%, #05070f 62%) fixed !important; } /* nav → console header bar */ nav{ border-bottom:1px solid rgba(79,216,255,.18) !important; } nav a:hover{ color:var(--mc-cyan-soft) !important; } /* links */ a{ color:#7fc7ff; } a:hover{ color:var(--mc-cyan-soft); } /* page title in Orbitron with a soft cyan glow */ h1{ font-family:'Orbitron',sans-serif !important; letter-spacing:.04em; text-shadow:0 0 18px rgba(79,216,255,.22); } /* panels / cards → thin cyan outline + faint glow */ .panel,.card,.hiw-card,.acard,.glass,.scancard{ border-color:rgba(79,216,255,.2) !important; box-shadow:0 0 22px rgba(31,110,165,.08); } /* form controls accent */ input[type=range],input[type=checkbox]{ accent-color:var(--mc-cyan) !important; } /* subtle glow on interactive buttons */ button:hover{ box-shadow:0 0 16px rgba(79,216,255,.2); } /* ===== responsive top-nav: emblem brand + hamburger (see nav-menu.js) ===== */ nav.nav-enhanced{ position:relative; } .nav-brand{ display:inline-flex !important; align-items:center; gap:9px; } .nav-brand img.nav-emblem{ height:26px; width:26px; border-radius:6px; display:block; flex:0 0 auto; } .nav-links{ display:flex; gap:16px; align-items:center; margin-left:auto; } .nav-burger{ display:none; margin-left:auto; background:rgba(20,32,58,.6); border:1px solid rgba(79,216,255,.3); color:#cfe4ff; font-size:16px; line-height:1; padding:7px 11px; border-radius:9px; cursor:pointer; font-family:inherit; } .nav-burger:hover{ box-shadow:0 0 14px rgba(79,216,255,.22); } @media (max-width:760px){ .nav-burger{ display:block; } nav.nav-enhanced .nav-links{ display:none; position:absolute; top:calc(100% + 4px); right:8px; min-width:200px; flex-direction:column; gap:2px; align-items:stretch; margin:0; background:rgba(8,14,26,.98); border:1px solid rgba(79,216,255,.24); border-radius:14px; padding:8px; z-index:60; box-shadow:0 14px 34px rgba(0,0,0,.55); } nav.nav-enhanced.nav-open .nav-links{ display:flex; animation:navslide .18s ease; } nav.nav-enhanced .nav-links a{ padding:11px 13px; border-radius:9px; white-space:nowrap; } nav.nav-enhanced .nav-links a:hover{ background:rgba(79,216,255,.1); } } @keyframes navslide{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} } @media (prefers-reduced-motion:reduce){ nav.nav-enhanced.nav-open .nav-links{ animation:none; } } /* ===== custom icon set (icons.js) — inherits color, sizes to 1em ===== */ .lopico{ width:1em; height:1em; vertical-align:-0.13em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .lopico .f{ fill:currentColor; stroke:none; } i.ico{ display:inline-flex; font-style:normal; line-height:0; } /* status dots (replace 🟢🟡🟣) */ .sdot{ display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:-1px; margin-right:2px; } .sdot.green{ background:#7fe6a0; } .sdot.amber{ background:#f5c977; } .sdot.violet{ background:#b79cf6; }