/* ---------- Reset / page ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: #0a0a0a; color: var(--phosphor); font-family: var(--font-amstrad); overflow: hidden; } :root { /* Defaults (used by CV / blog scenes): white text on black */ --phosphor: #ffffff; --phosphor-dim: #b8b8b8; --text-glow: rgba(255, 255, 255, 0.55); --text-glow-far: rgba(255, 255, 255, 0.25); --screen-bg: #000000; --bezel-base: #131313; --bezel-shadow: #000000; --bezel-highlight: rgba(255, 255, 255, 0.04); --led-on: #ff7a00; /* "1 source-image pixel" expressed as a viewport length, using cover-style scaling so the room background and our overlay stay locked together. */ --img-px: max(calc(100vw / 1920), calc(100vh / 1080)); } /* Scene-specific palettes — each scene re-declares the variables it cares about. */ .scene-boot { /* Amstrad CPC 6128 mode-1 default: vivid blue background, white pen */ background: #1429b4; --phosphor: #f5f5ff; --phosphor-dim: #c8c8e8; --text-glow: rgba(255, 255, 255, 0.55); --text-glow-far: rgba(180, 200, 255, 0.3); } .scene-loading { /* Loading keeps the iconic green phosphor inside the colour-bar border */ --phosphor: #33ff66; --phosphor-dim: #1a8033; --text-glow: rgba(51, 255, 102, 0.7); --text-glow-far: rgba(51, 255, 102, 0.35); } .scene-cv { background: #000000; --phosphor: #ffffff; --phosphor-dim: #b0b0b0; --text-glow: rgba(255, 255, 255, 0.55); --text-glow-far: rgba(255, 255, 255, 0.25); } /* ---------- Cabinet (page wrapper) ---------- */ .cabinet { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at center top, #3a3528 0%, #1a1612 55%, #060504 100%); } /* When /assets/room.jpg loads successfully, app.js adds `.bg-room` to . In that mode the photo is the cabinet/bezel and our overlay just covers the TV's screen aperture. Without the class we fall back to the CSS-only bezel. */ body.bg-room .cabinet { padding: 0; background: /* TV's cabinet centre is at image (965, 540); aligning that to viewport centre gives 965/1920 = 50.26% horizontally, 540/1080 = 50% vertically. */ url('/assets/room.jpg') 50.26% 50% / cover no-repeat, #050505; } /* ---------- Bezel (Amstrad CTM monitor housing) ---------- We use aspect-ratio + absolutely-positioned .screen rather than percentage padding, because % padding resolves against the containing block's width — not the bezel's own size — so on wide viewports the screen ends up tiny. With aspect-ratio the bezel scales as one block. */ .bezel { position: relative; width: min(94vw, calc(92vh * 1.06), 1100px); aspect-ratio: 1.06 / 1; background: radial-gradient(ellipse at 25% 20%, #2c2c2c 0%, #161616 55%, #060606 100%); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--bezel-highlight), inset 0 8px 14px -6px rgba(255, 255, 255, 0.06), inset 0 -14px 28px -6px rgba(0, 0, 0, 0.85), 0 30px 70px rgba(0, 0, 0, 0.8); } /* In room-photo mode, the bezel becomes a transparent positioning wrapper sized to match the TV's outer cabinet in the photo (1030 × 860 px) so the .screen child lands exactly on the TV's screen aperture. */ body.bg-room .bezel { position: fixed; width: calc(1030 * var(--img-px)); height: calc(860 * var(--img-px)); aspect-ratio: auto; left: calc(50vw - 515 * var(--img-px)); top: calc(50vh - 430 * var(--img-px)); background: transparent; box-shadow: none; border-radius: 0; } body.bg-room .bezel::before { display: none; } body.bg-room .bezel .led-housing { display: none; } /* Subtle plastic texture */ .bezel::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 14px; background: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px ); mix-blend-mode: overlay; opacity: 0.6; } /* When a real bezel image is provided, replace the rule above with: .bezel { background: url('/assets/bezel.png') center / 100% 100% no-repeat; box-shadow: 0 30px 70px rgba(0,0,0,0.7); } */ .bezel .badge { position: absolute; right: 18%; bottom: 5%; color: #b8b6b1; font-family: 'Arial Black', 'Helvetica Neue', sans-serif; font-size: clamp(13px, 1.6vw, 20px); font-weight: 900; letter-spacing: 0.04em; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.05); opacity: 0.55; user-select: none; } /* Recessed power-LED housing (bottom-right, like the original) */ .bezel .led-housing { position: absolute; right: 7%; bottom: 4.5%; width: clamp(40px, 5vw, 64px); height: clamp(14px, 1.6vw, 20px); border-radius: 3px; background: linear-gradient(180deg, #050505 0%, #1a1a1a 100%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.04); display: flex; align-items: center; justify-content: flex-end; padding: 0 6px; } .bezel .led { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--led-on); box-shadow: 0 0 4px var(--led-on), 0 0 10px rgba(255, 122, 0, 0.6), inset 0 0 1px rgba(255, 255, 255, 0.7); animation: led-flicker 4s ease-in-out infinite; } @keyframes led-flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.4; } 96% { opacity: 1; } 97% { opacity: 0.7; } } /* ---------- Screen (the green inner area) ---------- Absolutely positioned so the asymmetric "chunky bottom" Amstrad cabinet look comes from the offsets, not from padding on the bezel. */ .screen { position: absolute; top: 10%; left: 9%; right: 9%; bottom: 25%; background: var(--screen-bg); border-radius: 10px; overflow: hidden; /* Stepped recess from outer to inner — the heart of the Amstrad look */ box-shadow: /* outer concentric "frame" rings */ 0 0 0 3px #060606, 0 0 0 6px #1c1c1c, 0 0 0 8px #050505, 0 0 0 10px rgba(255, 255, 255, 0.04), /* inner glow / phosphor wash */ inset 0 0 30px rgba(0, 0, 0, 0.85), inset 0 0 100px rgba(0, 40, 0, 0.4), /* tight inner dark rim, suggests CRT glass edge */ inset 0 0 0 4px #000; filter: contrast(1.05) brightness(1.05) saturate(1.05); } /* In room-photo mode, screen offsets target the photo's TV aperture inside the cabinet rectangle. Original measurements (6.80% / 6.80% / 4.07% / 15.70%) spilled slightly past the TV's inner glass — tightened ~1.5% on each side to leave a small margin inside the photo's plastic rim. We drop the outer concentric rings since the photo already supplies the bezel rim. */ body.bg-room .screen { top: 5.5%; left: 5.3%; right: 5.3%; bottom: 14.2%; border-radius: 4px; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.85), inset 0 0 0 3px #000; } /* ---------- Scanlines overlay ---------- */ .scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0.18) 0px, rgba(0, 0, 0, 0.18) 1px, transparent 1px, transparent 3px ); mix-blend-mode: multiply; z-index: 50; } /* ---------- Vignette (corners darker) ---------- */ .vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient( ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100% ); z-index: 51; } /* ---------- Flicker overlay ---------- */ .flicker { position: absolute; inset: 0; pointer-events: none; background: rgba(255, 255, 255, 0.018); z-index: 52; animation: crt-flicker 5s steps(40) infinite; } @keyframes crt-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } 52% { opacity: 0.95; } 54% { opacity: 0.8; } 55% { opacity: 1; } } /* ---------- Warm-up ---------- */ .warmup { position: absolute; inset: 0; background: #000; pointer-events: none; z-index: 60; } .warmup::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0; height: 2px; background: #ffffff; box-shadow: 0 0 14px #ffffff, 0 0 28px #aaffaa; opacity: 0; } .warmup.active::before { animation: warmup-line 0.55s 0.05s ease-out forwards; } .warmup.active { animation: warmup-fade 0.45s 0.55s ease-out forwards; } @keyframes warmup-line { 0% { width: 0; height: 2px; opacity: 1; } 60% { width: 90%; height: 2px; opacity: 1; } 100% { width: 90%; height: 100%; opacity: 1; } } @keyframes warmup-fade { to { opacity: 0; } } /* ---------- Post-it (help cheat sheet stuck to the bezel) ---------- */ .post-it { position: absolute; left: 1.5%; bottom: -4%; z-index: 70; width: clamp(130px, 17%, 180px); padding: 12px 12px 10px; background: linear-gradient(165deg, #fff19a 0%, #ffd957 100%); color: #2b2110; font-family: 'Caveat', 'Patrick Hand', 'Comic Sans MS', 'Marker Felt', cursive; font-size: clamp(11px, 1.15vw, 14px); line-height: 1.25; transform: rotate(-3.5deg); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05), 4px 7px 16px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.04); border-radius: 1px 2px 2px 1px; } .post-it::before { /* slight curl on the top-left corner */ content: ''; position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 60%); border-bottom-right-radius: 30%; } .post-it-title { margin: 0 0 6px; font-weight: bold; font-size: 1.1em; text-decoration: underline; letter-spacing: 0.02em; } .post-it ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; } .post-it li { display: flex; align-items: baseline; gap: 6px; } .post-it .cmd { font-family: 'Cascadia Mono', 'Consolas', monospace; font-size: 0.92em; color: #1c1408; background: rgba(0, 0, 0, 0.06); padding: 0 4px; border-radius: 2px; white-space: nowrap; } .post-it .hint { font-size: 0.82em; color: #5a4a22; font-style: italic; } /* ---------- Mobile ---------- On narrow viewports the room photo + bezel chrome look cramped. Drop them and let the .screen fill the viewport; the retro phosphor look (scanlines, vignette, flicker, scene palettes) stays. The room photo, post-it and LED housing are hidden because there's no useful place for them. */ @media (max-width: 720px) { .cabinet, body.bg-room .cabinet { padding: 0; background: #000; } .bezel, body.bg-room .bezel { position: fixed; inset: 0; width: auto; height: auto; aspect-ratio: auto; padding: 0; background: transparent; box-shadow: none; border-radius: 0; } .bezel::before, .bezel .led-housing, .bezel .badge, .post-it { display: none; } .screen, body.bg-room .screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 0; box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.85), inset 0 0 0 2px #000; filter: none; /* slight contrast tweak doesn't read well on phones */ } /* Tighter inset for the loading colour border so it doesn't dominate */ .scene-loading .loading-inner { inset: clamp(10px, 3vw, 20px); } }