/* ═══════════════════════════════════════════════════════════════════════════ PHYRENA TERMINAL OVERLAY Reusable chrome elements (boot splash, top-left/top-right HUD, terminal prompt, grunge/noise background, mobile nav) shared across all pages. Does NOT touch , , typography or layout — safe to layer over any existing app layout. ═══════════════════════════════════════════════════════════════════════════ */ /* Font stays scoped to overlay elements only */ @font-face { font-family: 'Terminus'; src: url('/assets/fonts/terminus-webfont-115b1ac6fd3a8344fa557bf157fda2b7.woff2?vsn=d') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } /* Variables — declared on a class so they're scoped, not global */ .terminal-overlay-vars { --main-color: #c0c0c0; --main-color-40: #c0c0c066; --main-color-20: #c0c0c033; --bg-color: 12, 12, 12; } /* ─── Background atmosphere overlays ──────────────────────────────────────── */ .terminal-overlay-vars #noise-overlay, .terminal-overlay-vars #grunge-overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; height: 100vh; width: 100vw; pointer-events: none; z-index: 10; display: none; } .terminal-overlay-vars #grunge-overlay { z-index: 9998; background: url('/assets/images/grunge-ba4824ca588cae5f949023cee6808bd6.jpg?vsn=d'); background-size: cover; mix-blend-mode: color-dodge; opacity: 0.9; } @keyframes terminal-noise { 0% { background: url('/assets/images/noise-textures/noisy-texture-200x200-1-0198c685b8692fe64d61047541aed222.png?vsn=d'); } 25% { background: url('/assets/images/noise-textures/noisy-texture-200x200-2-74bf836e2aabe1510e0db92312fa0ab7.png?vsn=d'); } 50% { background: url('/assets/images/noise-textures/noisy-texture-200x200-3-bc5d03b540cdb5663398fb30390812d1.png?vsn=d'); } 75% { background: url('/assets/images/noise-textures/noisy-texture-200x200-4-bc4eb88617410f2ab389b14edd88e12e.png?vsn=d'); } } .terminal-overlay-vars #noise-overlay { background-blend-mode: multiply; background: url('/assets/images/noise-textures/noisy-texture-200x200-1-0198c685b8692fe64d61047541aed222.png?vsn=d'); filter: contrast(1.5) brightness(0.4) hue-rotate(90deg); opacity: 0.65; mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 150%); mask-size: cover; mask-position: center; animation: terminal-noise 0.3s steps(4) infinite; display: block; } .terminal-overlay-vars #grunge-overlay { display: block; } /* ─── Terminal cursor blink ───────────────────────────────────────────────── */ .terminal-overlay-vars .terminal-cursor { text-decoration: underline; animation: terminal-cursor-pulse 1.2s steps(1) infinite; } @keyframes terminal-cursor-pulse { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ─── Top-left HUD ────────────────────────────────────────────────────────── */ .terminal-overlay-vars #top-left-ui { position: fixed; top: 1.2em; left: 1.2em; z-index: 20; font-family: 'Terminus', 'Courier New', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--main-color); pointer-events: none; } .terminal-overlay-vars .top-left-ui__season { display: none; } .terminal-overlay-vars .top-left-ui__beta { display: inline-block; padding: 0.1em 0.35em; font-size: 0.7em; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--main-color); background: rgba(192, 192, 192, 0.08); } @media (min-width: 45em) { .terminal-overlay-vars .top-left-ui__season { display: inline; } .terminal-overlay-vars .top-left-ui__beta { margin-left: 0.4em; } } /* ─── Top-right cluster (HUD box + login button) ──────────────────────────── */ .terminal-overlay-vars #top-right-cluster { position: fixed; top: 1.2em; right: 1.2em; z-index: 20; display: flex; align-items: stretch; gap: 0.5rem; font-family: 'Terminus', 'Courier New', monospace; } .terminal-overlay-vars #top-right-ui { display: flex; align-items: center; gap: 0.75em; font-size: 12px; color: var(--main-color); } .terminal-overlay-vars #terminal-clock { letter-spacing: 0.08em; } .terminal-overlay-vars #toggle-effects a { padding: 0 0.3em; border: 1px solid var(--main-color); text-decoration: none; color: var(--main-color); } .terminal-overlay-vars #toggle-effects a:hover { background-color: var(--main-color); color: rgba(0, 0, 0, 0.65); } .terminal-overlay-vars #terminal-overlay-auth-link { display: inline-flex; align-items: center; padding: 0.55em 1em; border: 1px solid var(--main-color); background: rgba(12, 12, 12, 0.55); backdrop-filter: blur(4px); text-decoration: none; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; color: var(--main-color); transition: background-color 0.15s, color 0.15s; font-family: 'Terminus', 'Courier New', monospace; cursor: pointer; } .terminal-overlay-vars #terminal-overlay-auth-link:hover { background-color: var(--main-color); color: rgba(0, 0, 0, 0.75); } /* ─── Mobile menu button + nav panel ──────────────────────────────────────── */ .terminal-overlay-vars .terminal-overlay-menu-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; box-sizing: border-box; width: 2.467em; /* matches LOGIN outer height */ height: 2.467em; /* matches LOGIN outer height */ padding: 0; border: 1px solid var(--main-color); background: rgba(12, 12, 12, 0.55); backdrop-filter: blur(4px); color: var(--main-color); font-size: 12px; font-family: 'Terminus', 'Courier New', monospace; cursor: pointer; transition: background-color 0.15s, color 0.15s; } .terminal-overlay-vars .terminal-overlay-menu-btn:hover { background-color: var(--main-color); color: rgba(0, 0, 0, 0.75); } .terminal-overlay-vars .terminal-overlay-menu-btn__line { display: block; width: 1.4em; height: 2px; background-color: currentColor; } @media screen and (max-width: 45em) { .terminal-overlay-vars .terminal-overlay-menu-btn { display: flex; } } .terminal-overlay-vars #mobile-nav-overlay { position: fixed; inset: 0; z-index: 25; visibility: hidden; opacity: 0; transition: visibility 0.2s, opacity 0.2s; font-family: 'Terminus', 'Courier New', monospace; } body.mobile-nav-open .terminal-overlay-vars #mobile-nav-overlay, .terminal-overlay-vars.mobile-nav-open #mobile-nav-overlay { visibility: visible; opacity: 1; } .terminal-overlay-vars #mobile-nav-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); } .terminal-overlay-vars #mobile-nav-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 2em 1.25em; border: none; border-right: 1px solid var(--main-color); background: rgba(12, 12, 12, 0.98); backdrop-filter: blur(4px); transform: translateX(-100%); transition: transform 0.25s ease-out; overflow-y: auto; display: flex; flex-direction: column; color: var(--main-color); } body.mobile-nav-open .terminal-overlay-vars #mobile-nav-panel { transform: translateX(0); } .terminal-overlay-vars .mobile-nav-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1.25em; flex: 0 0 auto; } .terminal-overlay-vars .mobile-nav-panel__title { margin: 0; font-size: 1em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--main-color); opacity: 0.9; } .terminal-overlay-vars .mobile-nav-panel__beta { display: inline-block; margin-left: 0.4em; padding: 0.1em 0.35em; font-size: 0.7em; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--main-color); background: rgba(192, 192, 192, 0.08); } .terminal-overlay-vars .mobile-nav-panel__close { display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; padding: 0; border: 1px solid var(--main-color); background: transparent; color: var(--main-color); font-size: 1.5em; line-height: 1; cursor: pointer; transition: background-color 0.15s, color 0.15s; flex-shrink: 0; } .terminal-overlay-vars .mobile-nav-panel__close:hover { background-color: var(--main-color); color: rgba(0, 0, 0, 0.75); } .terminal-overlay-vars #mobile-nav-panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75em; flex: 0 0 auto; } .terminal-overlay-vars #mobile-nav-panel .mobile-nav-link { display: block; padding: 0.65em 0.6em; font-size: 1.25em; border: 1px solid var(--main-color); background: transparent; color: var(--main-color); text-decoration: none; transition: background-color 0.15s, color 0.15s; } .terminal-overlay-vars #mobile-nav-panel .mobile-nav-link:hover, .terminal-overlay-vars #mobile-nav-panel .mobile-nav-link.tab-active { background-color: var(--main-color); color: rgba(0, 0, 0, 0.75); } /* ─── Bottom-left terminal prompt ─────────────────────────────────────────── */ .terminal-overlay-vars #terminal-prompt { position: fixed; left: 1.2em; bottom: 1.2em; z-index: 20; font-family: 'Terminus', 'Courier New', monospace; font-size: 12px; letter-spacing: 0.06em; pointer-events: none; color: var(--main-color); } /* ─── Boot splash (first visit only) ──────────────────────────────────────── */ .terminal-overlay-vars #boot-sequence { display: none; } html.boot-show .terminal-overlay-vars #boot-sequence { display: flex !important; visibility: visible !important; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; background: rgba(12, 12, 12, 0.98); pointer-events: none; animation: boot-sequence-fade 3s ease forwards; font-family: 'Terminus', 'Courier New', monospace; color: var(--main-color); } .terminal-overlay-vars .boot-frame { text-align: center; padding: 1em 2em; border: none; background: transparent; } .terminal-overlay-vars .boot-logo { width: min(70vw, 520px); height: auto; display: block; filter: brightness(1.05) contrast(1.05); margin-bottom: 0.6em; margin-left: auto; margin-right: auto; animation: boot-logo-out 3s ease forwards; } .terminal-overlay-vars .boot-terminal { opacity: 0; animation: boot-terminal-in 3s ease forwards; } .terminal-overlay-vars .boot-terminal p { margin: 0.2em 0; } @keyframes boot-sequence-fade { 0%, 85% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } @keyframes boot-logo-out { 0%, 35% { opacity: 1; } 55%, 100% { opacity: 0; } } @keyframes boot-terminal-in { 0%, 35% { opacity: 0; } 55%, 85% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { html.boot-show .terminal-overlay-vars #boot-sequence { animation: none; opacity: 0; visibility: hidden; } }