/* ========================================================================= KN4RQL — retro terminal / CRT theme Plain CSS, no build step. Tweak the variables below to retune the look. ========================================================================= */ :root { --bg: #0a0e0a; /* near-black phosphor backdrop */ --bg-soft: #0f160f; /* card / panel background */ --phosphor: #41ff7e; /* primary green text (the "ink") */ --phosphor-dim: #2bbf5c;/* dimmer green for secondary text */ --amber: #ffb000; /* amber accent (highlights, callsign) */ --muted: #5c7a64; /* low-contrast hints / placeholders */ --line: #1c2a1f; /* hairline borders */ --glow: 0 0 4px rgba(65, 255, 126, 0.55); --glow-amber: 0 0 6px rgba(255, 176, 0, 0.55); --font-display: 'VT323', 'JetBrains Mono', monospace; --font-body: 'JetBrains Mono', 'VT323', monospace; } /* Amber-monochrome variant — flipped via [data-theme="amber"] on */ :root[data-theme="amber"] { --bg: #0e0a04; --bg-soft: #16100a; --phosphor: #ffb000; /* amber becomes the primary "ink" */ --phosphor-dim: #b8801a; --amber: #ffe08a; /* accents shift to pale gold */ --muted: #7a5e2a; --line: #2a2113; --glow: 0 0 4px rgba(255, 176, 0, 0.5); --glow-amber: 0 0 6px rgba(255, 224, 138, 0.55); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 50% 0%, var(--bg-soft) 0%, var(--bg) 70%); color: var(--phosphor); font-family: var(--font-body); font-size: 17px; line-height: 1.6; letter-spacing: 0.3px; text-shadow: var(--glow); overflow-x: hidden; } /* ----------------------------- CRT overlays ----------------------------- */ /* Scanlines + faint flicker */ .crt-overlay { position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.28) 3px, rgba(0, 0, 0, 0.28) 4px ); animation: flicker 6s infinite steps(60); } /* Rounded-tube vignette */ .crt-vignette { position: fixed; inset: 0; z-index: 9997; pointer-events: none; background: radial-gradient( ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100% ); } @keyframes flicker { 0%, 100% { opacity: 0.92; } 50% { opacity: 1; } 52% { opacity: 0.88; } 54% { opacity: 1; } } /* ------------------------------- Layout -------------------------------- */ .terminal { max-width: 860px; margin: 0 auto; padding: 5vh 22px 8vh; position: relative; z-index: 1; } /* --------------------- Progressive enhancement / boot ------------------ */ /* No JS (or JS failed): show content immediately, skip the empty boot box. With JS, theme.js adds .has-js before paint so we can stage the reveal. */ #boot { display: none; } .has-js #boot:not([hidden]) { display: block; } .has-js #content { display: none; } .has-js #content.revealed { display: block; } .skip-hint { position: fixed; bottom: 16px; left: 0; right: 0; text-align: center; font-family: var(--font-body); font-size: 0.8rem; color: var(--muted); text-shadow: none; pointer-events: none; animation: blink 1.6s steps(2) infinite; } /* ----------------------------- Boot sequence --------------------------- */ .boot { font-family: var(--font-body); font-size: 15px; color: var(--phosphor-dim); white-space: pre-wrap; min-height: 40vh; } .boot .ok { color: var(--phosphor); } .boot .warn { color: var(--amber); text-shadow: var(--glow-amber); } /* ------------------------------- Masthead ------------------------------ */ .masthead { margin-bottom: 3.5rem; } .callsign-art { font-family: var(--font-body); color: var(--amber); text-shadow: var(--glow-amber); font-size: clamp(9px, 2.4vw, 15px); line-height: 1.1; margin: 0 0 1rem; overflow-x: auto; } .tagline { font-family: var(--font-display); font-size: clamp(20px, 4vw, 30px); margin: 0 0 1.4rem; color: var(--phosphor); } .prompt { color: var(--amber); text-shadow: var(--glow-amber); } /* Blinking cursor */ .cursor { display: inline-block; animation: blink 1.1s steps(2) infinite; color: var(--phosphor); } @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .navbar { display: flex; flex-wrap: wrap; gap: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); } .navbar a { color: var(--phosphor-dim); text-decoration: none; position: relative; } .navbar a::before { content: '['; color: var(--muted); } .navbar a::after { content: ']'; color: var(--muted); } .navbar a:hover { color: var(--amber); text-shadow: var(--glow-amber); } /* -------------------------------- Blocks ------------------------------- */ .block { margin: 0 0 3.5rem; scroll-margin-top: 2rem; } .block h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: 0 0 1rem; word-break: break-word; } .shell { color: var(--phosphor); } .path { color: var(--amber); } .output { border-left: 2px solid var(--line); padding-left: 1.2rem; margin-left: 0.2rem; } .output p { margin: 0 0 1rem; } .hl { color: var(--amber); text-shadow: var(--glow-amber); } .muted { color: var(--muted); text-shadow: none; } strong { color: var(--phosphor); } /* --------------------------------- Cards ------------------------------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; } .card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px; padding: 1.1rem 1.2rem; transition: border-color 0.2s, transform 0.2s; } .card:hover { border-color: var(--phosphor-dim); transform: translateY(-2px); } .card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--phosphor); } .card p { margin: 0; font-size: 0.95rem; } /* ------------------------------- Contact ------------------------------- */ .contact-list { list-style: none; margin: 0 0 1.2rem; padding: 0; } .contact-list li { display: flex; gap: 1rem; padding: 0.35rem 0; align-items: baseline; } .contact-list .key { color: var(--amber); text-shadow: var(--glow-amber); white-space: pre; flex: 0 0 auto; } .contact-list a { color: var(--phosphor); text-decoration: underline dotted; } .contact-list a:hover { color: var(--amber); text-shadow: var(--glow-amber); } .qsl-note { color: var(--phosphor-dim); font-size: 0.95rem; } /* -------------------------------- Footer ------------------------------- */ .footer { margin-top: 4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--phosphor-dim); font-size: 0.9rem; } .sign-off { color: var(--amber); text-shadow: var(--glow-amber); letter-spacing: 3px; margin-top: 0.4rem; } /* ------------------------------ Theme toggle --------------------------- */ .theme-toggle { position: fixed; top: 14px; right: 14px; z-index: 9999; font-family: var(--font-body); font-size: 0.85rem; color: var(--phosphor-dim); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px; padding: 0.35rem 0.7rem; cursor: pointer; text-shadow: var(--glow); transition: color 0.2s, border-color 0.2s; } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--amber); border-color: var(--phosphor-dim); text-shadow: var(--glow-amber); outline: none; } /* ------------------------------ Content reveal ------------------------- */ .fade-in { animation: fadeIn 0.6s ease both; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ------------------------------ A11y / motion -------------------------- */ a:focus-visible, .navbar a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .crt-overlay { animation: none; } .cursor { animation: none; } .skip-hint { animation: none; } .fade-in { animation: none; } html { scroll-behavior: auto; } } @media (max-width: 520px) { body { font-size: 16px; } .terminal { padding: 4vh 16px 6vh; } } /* ------------------------------- 404 page ------------------------------ */ .nosignal { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; } .static-bars { font-family: var(--font-body); color: var(--phosphor-dim); font-size: clamp(10px, 2.2vw, 14px); line-height: 1.05; white-space: pre; overflow: hidden; opacity: 0.55; } .err-code { font-family: var(--font-body); color: var(--amber); text-shadow: var(--glow-amber); font-size: clamp(48px, 14vw, 120px); line-height: 0.9; margin: 0; } .err-msg { font-family: var(--font-display); font-size: clamp(22px, 5vw, 34px); margin: 0; } .err-detail { color: var(--phosphor-dim); margin: 0; } .back-link { display: inline-block; margin-top: 0.6rem; color: var(--phosphor); text-decoration: none; } .back-link::before { content: '['; color: var(--muted); } .back-link::after { content: ']'; color: var(--muted); } .back-link:hover { color: var(--amber); text-shadow: var(--glow-amber); }