/* shell.css — The Sovereign Shell: left-rail nav injected into ANY page. Standalone (self-sufficient :root tokens). Fixed overlay, non-destructive coexistence. Dark, gold-accented, status-dot driven. */ /* Tokens are scoped to the rail (not :root) so this file can load alongside cockpit.css / portal.css without overriding their shared palette. Custom properties set on .shell-rail inherit to all rail descendants. */ .shell-rail { --gold:#f5b73f; --uv:#9747ff; --surface-1:#16161e; --surface-2:#1d1d28; --ink:#f1f1f6; --mute:#7d7d8d; --line:rgba(255,255,255,.09); --emerald:#34d399; --amber:#f59e0b; --mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Code","Courier New",monospace; } /* Uniform content offset: shell.js adds .shell-offset to on every page that mounts the rail, so the cockpit / portal / pulse all clear the 70px rail with ONE mechanism (no per-page margins). Literal width — no token needed. */ body.shell-offset { padding-left: 70px; } /* ---- shell nav rail ---- */ .shell-rail { position: fixed; left: 0; top: 0; width: 70px; height: 100vh; background: linear-gradient(180deg, #060608 0%, var(--surface-1) 100%); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding-top: 18px; z-index: 10000; gap: 2px; } /* shell sigil (top gold glyph) */ .shell-sigil { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 24px; font-size: 22px; color: var(--gold); text-shadow: 0 0 16px rgba(245,183,63,.4); letter-spacing: 0.1em; font-weight: 800; font-family: var(--mono); } /* shell room link */ .shell-room { width: 56px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--ink); border-radius: 8px; transition: all .2s; position: relative; border: 1px solid transparent; margin: 0 7px; cursor: pointer; } .shell-room:hover { border-color: var(--gold); box-shadow: 0 0 12px rgba(245,183,63,.16); } .shell-room.active { background: linear-gradient(135deg, rgba(245,183,63,.15), rgba(151,71,255,.08)); border-color: var(--gold); box-shadow: 0 0 16px rgba(245,183,63,.24), inset 0 0 12px rgba(245,183,63,.06); } .shell-room-glyph { font-size: 18px; width: 24px; height: 24px; display: grid; place-items: center; transition: transform .2s; } .shell-room.active .shell-room-glyph { transform: scale(1.1); } .shell-room-label { font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--mute); transition: color .2s; text-align: center; } .shell-room.active .shell-room-label { color: var(--gold); } .shell-room-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; position: absolute; top: 6px; right: 8px; background: var(--mute); box-shadow: 0 0 4px var(--mute); transition: all .3s; } .shell-room-dot.live { background: var(--emerald); box-shadow: 0 0 6px var(--emerald); } .shell-room-dot.sealed { background: var(--amber); box-shadow: 0 0 6px var(--amber); } /* ---- reduced-motion safety ---- */ @media (prefers-reduced-motion: reduce) { .shell-room, .shell-room-glyph, .shell-room-label, .shell-room-dot { transition: none !important; animation: none !important; } } /* ---- responsive: phone — left rail becomes a bottom tab bar (iOS-native) ---- */ @media (max-width: 860px) { body.shell-offset { padding-left: 0; padding-bottom: 62px; } .shell-rail { flex-direction: row; width: 100%; height: auto; top: auto; bottom: 0; left: 0; right: 0; padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); gap: 0; align-items: stretch; justify-content: space-around; border-right: none; border-top: 1px solid var(--line); background: linear-gradient(0deg, #060608 0%, var(--surface-1) 100%); } .shell-sigil { display: none; } .shell-room { width: auto; height: auto; flex: 1; margin: 0 3px; padding: 6px 0; } .shell-room-label { font-size: 9px; } .shell-room-dot { top: 4px; right: 50%; transform: translateX(50%); } }