/* ui/atrium-common/page-switcher.css Atrium page selector — two variants. .atrium-switcher--hud frosted glass pill, used on atrium-* HUDs. .atrium-switcher--nav-inline matches the OPTARIS Console's nav-tabs row so it slots in as just another pill. NB: most nav-inline trigger styling now lives in style.css (the Premium menu block) so the trigger reads identically to a sibling .nav-tab. The nav-inline dropdown is re-parented to (variant --floating) and positioned in JS, because the Console nav rail clips overflow + masks. */ .atrium-switcher { position: relative; font-family: 'JetBrains Mono', ui-monospace, monospace; pointer-events: auto; } /* ─── HUD variant (used on atrium-*.html headers) ──────────────── */ .atrium-switcher--hud .atrium-switcher__trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(10, 22, 40, 0.78); border: 1px solid rgba(245, 166, 35, 0.35); border-radius: 8px; color: #f5a623; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; backdrop-filter: blur(8px); } .atrium-switcher--hud .atrium-switcher__trigger:hover { background: rgba(245, 166, 35, 0.16); color: #ffc869; border-color: rgba(245, 166, 35, 0.6); } /* ─── Nav-inline variant ─────────────────────────────────────── Trigger look (pill, sentence case, amber active) is owned by the Premium menu block in style.css so it stays in lockstep with the sibling .nav-tab pills. Nothing trigger-specific is needed here. */ /* ─── Dropdown menu (shared base) ──────────────────────────────── */ .atrium-switcher__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 320px; background: linear-gradient(180deg, rgba(14, 24, 42, 0.96), rgba(8, 16, 30, 0.96)); border: 1px solid rgba(245, 166, 35, 0.25); border-radius: 14px; padding: 8px; z-index: 200; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 56px -16px rgba(0, 0, 0, 0.7), 0 4px 12px -2px rgba(0, 0, 0, 0.4); /* Apple-style entrance */ transform-origin: top right; animation: atrium-switcher-pop 180ms cubic-bezier(0.2, 0.8, 0.2, 1); } .atrium-switcher__menu[hidden] { display: none; } /* HUD nav-inline (legacy in-flow) opens leftward. */ .atrium-switcher--nav-inline .atrium-switcher__menu { left: 0; right: auto; transform-origin: top left; } /* Floating variant: re-parented to , position:fixed set in JS. Opens downward from the trigger's top-left corner. */ .atrium-switcher__menu--floating { position: fixed; top: 0; left: 0; right: auto; transform-origin: top left; z-index: 400; } @keyframes atrium-switcher-pop { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } } .atrium-switcher__item { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 8px; color: #e8ece0; text-decoration: none; cursor: pointer; transition: background 160ms ease, transform 160ms ease; } .atrium-switcher__item + .atrium-switcher__item { margin-top: 2px; } .atrium-switcher__item:hover { background: rgba(245, 166, 35, 0.10); transform: translateX(2px); } .atrium-switcher__item.is-active { background: rgba(245, 166, 35, 0.16); } .atrium-switcher__item-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #f5a623; } .atrium-switcher__item.is-active .atrium-switcher__item-label { color: #ffc869; } .atrium-switcher__item-blurb { font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; color: rgba(232, 236, 224, 0.62); line-height: 1.45; } /* — Section headers + per-site items (multi-site M7) — */ .atrium-switcher__section { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(232, 236, 224, 0.42); padding: 10px 14px 4px; border-top: 1px solid rgba(245, 166, 35, 0.08); } .atrium-switcher__section:first-child { border-top: none; padding-top: 8px; } .atrium-switcher__item--site .atrium-switcher__item-label::before { content: '○'; color: var(--green-glow, #00d878); margin-right: 6px; font-size: 10px; vertical-align: 1px; opacity: 0.85; } .atrium-switcher__item--more { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.4px; color: var(--amber, #f5a623); opacity: 0.85; } .atrium-switcher__item--more:hover { opacity: 1; }