/* ═══════════════════════════════════════════════════ PHANTOM ZENITH ORIGIN — TOPBAR assets/css/topbar.css ───────────────────────────────────────────────── Depends on: tokens.css, base.css (for @keyframes pulse) Covers the full topbar strip: - .topbar wrapper - .topbar-left, .topbar-wordmark - .topbar-nav, .topbar-nav a, .active state, .nav-divider - .topbar-right, .topbar-status, .status-dot - .topbar-signin, .signin-icon - Mobile hide for nav (≤720px) - .nav-hamburger button (3-line → X animated icon) - .nav-overlay fullscreen panel + .nav-overlay-links Toggle state driven by data-nav-open="true" on Script: assets/js/topbar.js ── HISTORY ────────────────────────────────────── Action Plan B (mobile nav): Added hamburger button, overlay panel, and all associated CSS. The old commented-out stub (.topbar-hamburger) has been replaced with the live .nav-hamburger implementation. Action Plan C (JS externalization — NEXT): topbar.js will be referenced as an external script in all three index.html files rather than inlined. No CSS changes expected at that step. ═══════════════════════════════════════════════════ */ /* ─── TOPBAR WRAPPER ─── */ .topbar { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--border-dim); } /* ─── LEFT SIDE ─── */ .topbar-left { display: flex; align-items: center; gap: 32px; } .topbar-wordmark { font-family: var(--mono); font-size: 0.7rem; color: var(--text-lo); white-space: nowrap; } /* ─── NAVIGATION ─── */ .topbar-nav { display: flex; gap: 4px; align-items: center; } .topbar-nav a { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mid); text-decoration: none; padding: 5px 12px; border-radius: 4px; border: 1px solid transparent; transition: color 0.15s, border-color 0.15s, background 0.15s; } .topbar-nav a:hover { color: var(--cyan); border-color: var(--border); background: var(--bg-panel); } .topbar-nav a.active { color: var(--cyan); border-color: var(--border); background: var(--bg-panel); } /* Thin vertical separator between nav groups */ .nav-divider { width: 1px; height: 14px; background: var(--border-dim); margin: 0 4px; } /* On small screens, collapse the desktop nav. The hamburger button takes over. */ @media (max-width: 720px) { .topbar-nav { display: none; } } /* ─── RIGHT SIDE ─── */ .topbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; } /* ── Status indicator ── */ .topbar-status { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.7rem; color: var(--cyan); } /* The pulsing dot next to "ACCESS ACTIVE" */ .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); /* pulse keyframe defined in base.css */ animation: pulse 2s ease-in-out infinite; } /* ── Sound toggle (inline with status row) ── */ .sound-toggle { background: none; border: none; padding: 0; margin-left: 2px; cursor: pointer; color: var(--cyan); line-height: 0; vertical-align: middle; opacity: 0.7; transition: opacity 0.15s; } .sound-toggle:hover { opacity: 1; } .sound-toggle .sound-off { display: none; } .sound-toggle .sound-on { display: inline; } .sound-toggle.is-muted { color: var(--text-lo); opacity: 0.35; } .sound-toggle.is-muted .sound-off { display: inline; } .sound-toggle.is-muted .sound-on { display: none; } /* ── Greyed-out "Sign In" affordance ── */ /* Currently a non-functional placeholder styled as disabled. */ .topbar-signin { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.62rem; color: var(--text-lo); opacity: 0.4; cursor: not-allowed; user-select: none; letter-spacing: 0.08em; } .signin-icon { width: 11px; height: 11px; } /* ═══════════════════════════════════════════════════ MOBILE NAVIGATION — hamburger + overlay Breakpoint: ≤720px (matches desktop nav hide above) Architecture: - .nav-hamburger sits inside .topbar, hidden on desktop. Shows on mobile at right edge of the topbar. - .nav-overlay is a sibling of .topbar (directly after it in the DOM). Hidden by default; slides in when open. - Toggle state: body[data-nav-open="true"] Set/cleared by assets/js/topbar.js. The 3-line icon morphs into an X using CSS transforms on the three children when the overlay is open. ═══════════════════════════════════════════════════ */ /* ─── HAMBURGER BUTTON ─── */ /* Hidden on desktop, visible on mobile */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; padding: 0; background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; transition: border-color 0.15s, background 0.15s; /* Align it vertically with the wordmark */ align-self: center; } .nav-hamburger:hover { border-color: var(--border); background: var(--bg-panel); } /* The three line spans */ .nav-hamburger span { display: block; width: 18px; height: 2px; background: var(--text-mid); border-radius: 2px; /* All three transitions run together for the X morph */ transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, background 0.15s ease; transform-origin: center; } .nav-hamburger:hover span { background: var(--cyan); } /* ── X morphing ── When body has data-nav-open="true": - Top span: rotate +45° and translate down to cross center - Middle span: fade out - Bottom span: rotate -45° and translate up to cross center The translate amount (5px + half of 2px gap ≈ 7px) keeps the cross centered relative to the button. Tune if gap between spans changes. */ body[data-nav-open="true"] .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--cyan); } body[data-nav-open="true"] .nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); } body[data-nav-open="true"] .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--cyan); } @media (max-width: 720px) { .nav-hamburger { display: flex; } } /* ─── NAV OVERLAY ─── */ /* Fullscreen panel that slides down from behind the topbar. Hidden by default (translateY(-100%) + opacity 0 + pointer-events none). Opening class (body[data-nav-open="true"]) slides it into view. */ .nav-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; /* Sits above page content (z-index 1 per .page) but below the topbar which gets z-index 100 so the wordmark stays readable during open. */ z-index: 50; background: var(--bg-panel); border-bottom: 1px solid var(--border); /* Scanline texture — same pattern as body::before in base.css, but slightly more visible since there's no background content showing through */ background-image: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.12) 2px, rgba(0, 0, 0, 0.12) 4px ); background-color: var(--bg-panel); /* Closed state */ opacity: 0; transform: translateY(-100%); pointer-events: none; transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } /* Open state */ body[data-nav-open="true"] .nav-overlay { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Only render/interact with the overlay at mobile breakpoint. On desktop it stays permanently invisible even if JS fires. */ @media (min-width: 721px) { .nav-overlay { display: none !important; } } /* ─── OVERLAY LINK LIST ─── */ /* Centered vertically and horizontally in the fullscreen overlay. Links are stacked vertically with generous tap targets. */ .nav-overlay-links { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; padding: 80px 40px 40px; /* top padding clears the topbar height */ } .nav-overlay-links a { font-family: var(--mono); font-size: 1rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mid); text-decoration: none; /* Wide tap target */ display: block; width: 100%; max-width: 280px; text-align: center; padding: 16px 24px; border: 1px solid var(--border-dim); border-radius: 4px; background: rgba(15, 25, 35, 0.6); /* --bg-panel at 60% */ transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s; } .nav-overlay-links a:hover, .nav-overlay-links a:focus { color: var(--cyan); border-color: var(--border); background: var(--bg-surface); box-shadow: 0 0 12px rgba(34, 211, 238, 0.08); outline: none; } /* Active page link — highlighted in cyan, no interaction needed */ .nav-overlay-links a.active { color: var(--cyan); border-color: var(--border); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--cyan-dim); } /* Staggered fade-in for links when the overlay opens. Each link delays slightly to give a cascade effect. The overlay itself transitions in 0.28s; links start at 0.1s in. */ .nav-overlay-links a:nth-child(1) { transition-delay: 0.05s; opacity: 0; } .nav-overlay-links a:nth-child(2) { transition-delay: 0.10s; opacity: 0; } .nav-overlay-links a:nth-child(3) { transition-delay: 0.15s; opacity: 0; } .nav-overlay-links a:nth-child(4) { transition-delay: 0.20s; opacity: 0; } body[data-nav-open="true"] .nav-overlay-links a { opacity: 1; } /* Shared transition property for the opacity stagger above */ .nav-overlay-links a { transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease; } /* ─── TOPBAR ABOVE OVERLAY ─── */ /* When the overlay is open, raise the topbar above it so the wordmark and hamburger button remain clickable/visible. */ body[data-nav-open="true"] .topbar { position: relative; z-index: 100; }