/* VT340 / LK201 Terminal Aesthetic — magesofthemill.space Amber default, .green class on swaps palette. Mobile-first, scales up to PC. */ :root { --bg: #0a0500; --fg: #ffb000; --fg-dim: #b87a00; --fg-bright: #ffd97a; --accent: #ff7a00; --warn: #ff3b3b; --ok: #00d36b; --grid: rgba(255, 176, 0, 0.07); --scanline: rgba(0, 0, 0, 0.22); --glow: 0 0 2px var(--fg), 0 0 6px rgba(255, 176, 0, 0.55); --key-bg: #1a0e00; --key-edge: #3a1f00; --mono: "IBM Plex Mono", "JetBrains Mono", "Menlo", "Consolas", "Courier New", monospace; } body.green { --bg: #001008; --fg: #33ff66; --fg-dim: #1aaa44; --fg-bright: #b6ffcc; --accent: #00ffaa; --warn: #ff5555; --ok: #b6ffcc; --grid: rgba(51, 255, 102, 0.07); --glow: 0 0 2px var(--fg), 0 0 6px rgba(51, 255, 102, 0.55); --key-bg: #00170c; --key-edge: #003a1c; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: 15px; line-height: 1.45; min-height: 100vh; -webkit-text-size-adjust: 100%; text-shadow: var(--glow); } /* CRT chrome: scanlines + faint phosphor grid, fixed to viewport */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0, transparent 2px, var(--scanline) 2px, var(--scanline) 3px ); z-index: 9999; mix-blend-mode: multiply; } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.55) 100%); z-index: 9998; } a { color: var(--fg-bright); text-decoration: none; } a:hover, a:focus { color: var(--accent); text-decoration: underline; outline: none; } ::selection { background: var(--fg); color: var(--bg); text-shadow: none; } /* Layout shell */ .shell { display: flex; flex-direction: column; min-height: 100vh; padding: 0.6rem 0.8rem 0; max-width: 980px; margin: 0 auto; } .statusbar { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; border-bottom: 1px solid var(--fg-dim); padding: 0.3rem 0 0.4rem; font-size: 0.85rem; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.06em; } .statusbar .grow { flex: 1; } .statusbar .ok { color: var(--ok); } .statusbar .warn { color: var(--warn); } .toggles { display: flex; gap: 0.4rem; } .toggles button { background: var(--key-bg); color: var(--fg); border: 1px solid var(--fg-dim); font-family: inherit; font-size: 0.78rem; padding: 0.2rem 0.55rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; } .toggles button:hover { border-color: var(--fg); color: var(--fg-bright); } .boot { margin: 1rem 0 1.2rem; font-size: 0.95rem; } .boot .line { display: block; } .boot .ok { color: var(--ok); } .boot .dim { color: var(--fg-dim); } h1 { font-family: var(--mono); font-weight: 700; font-size: clamp(1.4rem, 4.5vw, 2.1rem); letter-spacing: 0.04em; margin: 1rem 0 0.4rem; text-transform: uppercase; } h1::before { content: "▌ "; color: var(--accent); } h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 1.4rem 0 0.4rem; border-bottom: 1px dashed var(--fg-dim); padding-bottom: 0.2rem; } h2::before { content: "── "; color: var(--fg-dim); } p { margin: 0.5rem 0; } ul, ol { padding-left: 1.4rem; margin: 0.4rem 0; } li { margin: 0.2rem 0; } dl { margin: 0.4rem 0; } dl > div { display: flex; gap: 0.6rem; padding: 0.15rem 0; border-bottom: 1px dotted var(--fg-dim); } dl dt { min-width: 9rem; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; } dl dd { flex: 1; } .content { flex: 1 0 auto; padding-bottom: 1.2rem; } /* Cards / blocks */ .block { border: 1px solid var(--fg-dim); padding: 0.7rem 0.85rem; margin: 0.7rem 0; background: rgba(0,0,0,0.35); } .block.alert { border-color: var(--accent); } .block.warn { border-color: var(--warn); } .block .label { display: inline-block; background: var(--fg); color: var(--bg); padding: 0 0.4rem; font-size: 0.75rem; letter-spacing: 0.1em; margin-right: 0.5rem; text-shadow: none; } .block.alert .label { background: var(--accent); } .block.warn .label { background: var(--warn); color: #fff; } /* Menu (HUD) */ .menu { list-style: none; padding: 0; margin: 1rem 0; } .menu li { border: 1px solid var(--fg-dim); margin: 0.4rem 0; background: rgba(0,0,0,0.35); } .menu a { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.7rem 0.9rem; color: var(--fg); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; } .menu a::before { content: "▶"; color: var(--accent); } .menu a:hover, .menu a:focus { background: rgba(255,176,0,0.08); color: var(--fg-bright); text-decoration: none; } body.green .menu a:hover, body.green .menu a:focus { background: rgba(51,255,102,0.08); } .menu .name { flex: 1; font-weight: 700; } .menu .desc { color: var(--fg-dim); font-size: 0.85rem; text-transform: none; letter-spacing: 0; } /* Inline tags */ .tag { display: inline-block; border: 1px solid var(--fg-dim); padding: 0 0.4rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); margin-left: 0.4rem; vertical-align: 0.05em; } .tag.verify { border-color: var(--accent); color: var(--accent); } .tag.ok { border-color: var(--ok); color: var(--ok); } /* Footer */ .footer { border-top: 1px solid var(--fg-dim); padding: 0.5rem 0; font-size: 0.8rem; color: var(--fg-dim); text-align: center; text-transform: uppercase; letter-spacing: 0.08em; } /* ---------- Virtual VAX / LK201 keyboard ---------- */ .kbd { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--fg-dim); padding: 0.5rem 0.4rem 0.6rem; margin-top: auto; } .kbd .kbd-rows { display: grid; gap: 0.3rem; } .kbd .row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.3rem; } .kbd .row.editing { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kbd .row.fkeys { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kbd .row.arrows { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 16rem; margin: 0 auto; } .key { display: flex; align-items: center; justify-content: center; min-height: 2.4rem; padding: 0.25rem 0.3rem; background: var(--key-bg); color: var(--fg); border: 1px solid var(--key-edge); border-bottom-width: 3px; font-family: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: default; user-select: none; text-shadow: var(--glow); } .key:hover { border-color: var(--fg); color: var(--fg-bright); } .key:active { transform: translateY(1px); border-bottom-width: 2px; } .key.wide { grid-column: span 2; } .key.do { color: var(--accent); border-color: var(--accent); } .key.help { color: var(--fg-bright); border-color: var(--fg); } .key.arrow { font-size: 1rem; } .kbd .legend { font-size: 0.7rem; color: var(--fg-dim); text-align: center; padding-top: 0.3rem; letter-spacing: 0.1em; text-transform: uppercase; } /* PC/wide screens: roomier kbd, bigger type */ @media (min-width: 720px) { html, body { font-size: 16px; } .key { min-height: 2.7rem; font-size: 0.78rem; } .kbd { padding: 0.7rem 0.6rem 0.8rem; } } /* Very narrow: trim editing row to 3 columns x 2 rows feel */ @media (max-width: 380px) { .kbd .row.editing { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kbd .row.fkeys { grid-template-columns: repeat(3, minmax(0, 1fr)); } .key { font-size: 0.66rem; min-height: 2.2rem; } dl dt { min-width: 7rem; } } /* Print: drop the chrome, keep the content */ @media print { body::before, body::after, .kbd { display: none !important; } body { background: #fff; color: #000; text-shadow: none; } a { color: #000; text-decoration: underline; } .block { border-color: #000; background: #fff; } }