/* ── Tron Base: CSS Custom Properties ───────────────────────────────────────── */ @font-face { font-family: 'Share Tech Mono'; src: url('/fonts/ShareTechMono/ShareTechMono-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } /* Self-hosted theme fonts (offline-ready, latin subset). Selectable in the theme drawer. */ @font-face { font-family: 'Orbitron'; src: url('/fonts/Orbitron/Orbitron-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Orbitron'; src: url('/fonts/Orbitron/Orbitron-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono/JetBrainsMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono/JetBrainsMono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono/IBMPlexMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono/IBMPlexMono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Theme variables — patched by theme-changer.js */ --accent: #00FFFF; --accent-dim: #1F9BA3; /* lightened from #007F7F for WCAG AA text contrast */ --glow: #00FFFF; --bg: #000000; --bg-panel: #010d1a; --bg-card: #020e1f; --text: #a8d8ea; --text-bright: #e0f7ff; --border: #003d5c; --font-family: 'Share Tech Mono', 'Courier New', monospace; --font-size: 16px; /* Derived */ --glow-sm: 0 0 4px var(--glow), 0 0 8px var(--glow); --glow-md: 0 0 6px var(--glow), 0 0 16px var(--glow); --glow-lg: 0 0 10px var(--glow), 0 0 30px var(--glow), 0 0 60px var(--glow); --border-glow: 1px solid var(--accent); } /* ── Reset ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--font-size); scroll-behavior: smooth; } body { font-family: var(--font-family); background-color: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; position: relative; } /* ── Grid Background ────────────────────────────────────────────────────────── */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--accent-dim) 1px, transparent 1px), linear-gradient(90deg, var(--accent-dim) 1px, transparent 1px); background-size: 60px 60px; opacity: 0.07; pointer-events: none; z-index: 0; } /* ── Scanline Overlay ───────────────────────────────────────────────────────── */ /* Static horizontal scanlines for the CRT look. Can be switched off from the theme drawer (adds `.no-scanlines` to ) for maximum text clarity. */ body::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px ); pointer-events: none; z-index: 9999; } html.no-scanlines body::after { display: none; } /* ── Typography ─────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5 { color: var(--accent); text-shadow: var(--glow-sm); letter-spacing: 0.08em; text-transform: uppercase; } a { color: var(--accent); text-decoration: none; transition: text-shadow 0.2s; } a:hover { text-shadow: var(--glow-md); } /* ── Tron Card ──────────────────────────────────────────────────────────────── */ .tron-card { background: var(--bg-card); border: var(--border-glow); box-shadow: var(--glow-sm), inset 0 0 30px rgba(0,0,0,0.5); padding: 1.5rem; position: relative; } .tron-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } /* ── Buttons ────────────────────────────────────────────────────────────────── */ .btn-tron { display: inline-block; padding: 0.6rem 1.4rem; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-family: var(--font-family); font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, box-shadow 0.2s, color 0.2s; text-shadow: var(--glow-sm); box-shadow: var(--glow-sm); } .btn-tron:hover { background: var(--accent); color: var(--bg); box-shadow: var(--glow-md); text-shadow: none; } .btn-tron:active { transform: scale(0.97); } .btn-tron-danger { border-color: #ff4444; color: #ff4444; text-shadow: 0 0 4px #ff4444; box-shadow: 0 0 4px #ff4444; } .btn-tron-danger:hover { background: #ff4444; color: #000; } /* ── Form Controls ──────────────────────────────────────────────────────────── */ .tron-input { background: #000d1a; border: 1px solid var(--border); border-bottom-color: var(--accent-dim); color: var(--text-bright); font-family: var(--font-family); font-size: inherit; padding: 0.5rem 0.75rem; width: 100%; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .tron-input:focus { border-color: var(--accent); box-shadow: var(--glow-sm); } /* ── Utility ────────────────────────────────────────────────────────────────── */ .glow-text { color: var(--accent); text-shadow: var(--glow-sm); } .panel-title { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--accent-dim); text-transform: uppercase; margin-bottom: 0.5rem; } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; } .status-dot.online { background: #00ff88; box-shadow: 0 0 6px #00ff88; } .status-dot.offline { background: #ff4444; box-shadow: 0 0 6px #ff4444; }