:root { /* monochrome amber phosphor — hierarchy by brightness, not hue */ --bg: #0c0803; /* warm black, screen-off glass */ --bg-raise: #161007; /* panels */ --bg-deep: #090602; /* boot overlay + waterfall */ --line: #2b2012; /* hairlines */ --text: #eedfc4; /* body — pale amber, not pure white */ --dim: #9a8662; /* secondary */ --faint: #5d4e35; /* tertiary / chrome */ --amber-hi: #ffd28f; /* hottest phosphor */ --amber: #ffb454; /* primary */ --amber-deep: #c97f2a; /* pressed / borders */ --glow: rgba(var(--accent-rgb), .45); --mono: "IBM Plex Mono", ui-monospace, monospace; --sans: "IBM Plex Sans", system-ui, sans-serif; --disp: "Martian Mono", "IBM Plex Mono", ui-monospace, monospace; --accent-rgb: 255, 180, 84; /* drives --glow, scanlines, sweep, spectrum */ } /* ---------- phosphor themes (data-theme on ) ---------- amber is the default in :root above. each block below just re-points the same token names, so the whole site recolors. */ /* secret — unlocked by the konami code */ :root[data-theme="vapor"] { --bg: #0b0617; --bg-raise: #160d28; --bg-deep: #070310; --line: #2e1d44; --text: #f4d9f0; --dim: #b585c8; --faint: #6c4a86; --amber-hi: #9af7ff; --amber: #ff5cd2; --amber-deep: #b13f9c; --accent-rgb: 255, 92, 210; } /* CRT-effect opt-outs (data-* on ) */ :root[data-scan="off"] body::before { display: none; } :root[data-vignette="off"] body::after { display: none; } :root[data-flicker="off"] body::before { animation: none !important; } :root[data-sweep="off"] .sweep { display: none !important; animation: none !important; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-shadow: 0 0 1px rgba(var(--accent-rgb), .10); overflow-x: hidden; } ::selection { background: var(--amber); color: var(--bg); } /* ---------- CRT layer: scanlines + vignette ---------- */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 120; /* above #boot (100) so the boot screen reads as CRT too */ background: repeating-linear-gradient( to bottom, rgba(var(--accent-rgb), 0.038) 0px, rgba(var(--accent-rgb), 0.038) 1px, transparent 1px, transparent 3px ), repeating-linear-gradient( to right, rgba(0, 0, 0, 0.06) 0px, rgba(0, 0, 0, 0.06) 1px, transparent 1px, transparent 3px ); } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 121; background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.5) 100%), radial-gradient(ellipse 124% 132% at center, transparent 68%, rgba(0,0,0,.34) 100%); } /* faint phosphor flicker, barely-there */ @media (prefers-reduced-motion: no-preference) { body::before { animation: flick 9s steps(1) infinite; } @keyframes flick { 0%, 96.4%, 97.2%, 100% { opacity: 1; } 96.6% { opacity: .55; } 96.9% { opacity: .85; } } } .wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; } a { color: var(--amber); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 2px; } /* ---------- CRT power-on for the page itself ---------- */ /* page stays invisible until the boot overlay is dismissed (class set pre-paint by the head script, removed in finish()) */ html.pre-boot #screen { visibility: hidden; } /* origin is 50vh from the top of the document — with the page scrolled to top, that's the exact center of the viewport. 50% 50% would be the center of the whole (tall) document, putting the beam far below the visible screen. */ #screen { transform-origin: 50% 50vh; } #screen.crt-on { animation: crtOn 1.9s cubic-bezier(.25, .9, .3, 1) both; } /* the page stays INVISIBLE through the dot/beam phases — the light you see is the #beam overlay, so no squished text shows. Then the picture unfolds and settles through many small keyframes: brightness + saturation + blur easing together reads as phosphor warming up instead of a brightness slider snapping off. */ @keyframes crtOn { 0%, 44% { transform: scaleY(.004); opacity: 0; filter: brightness(6) saturate(.4) blur(1.2px); } 58% { transform: scaleY(.45) scaleX(1); opacity: .65; filter: brightness(3.2) saturate(.55) blur(.7px); } /* sync lock: tiny horizontal wobble as the picture lands */ 70% { transform: scaleY(1) scaleX(1.012); opacity: 1; filter: brightness(2.1) saturate(.7) blur(.35px); } 77% { transform: scaleY(1) scaleX(.996); filter: brightness(1.65) saturate(.82) blur(.15px); } 84% { transform: scaleY(1) scaleX(1.002); filter: brightness(1.36) saturate(.92) blur(0); } 90% { transform: none; filter: brightness(1.17) saturate(1); } 95% { filter: brightness(1.07); } 98% { filter: brightness(1.02); } 100% { transform: none; opacity: 1; filter: none; } } /* the electron beam itself — pure light, no content */ #beam { position: fixed; left: 50%; top: 50vh; width: 100vw; height: 4px; transform: translate(-50%, -50%); z-index: 110; /* above the fading boot overlay, under scanlines */ pointer-events: none; border-radius: 50%; background: linear-gradient(to right, transparent, rgba(255,220,160,.9) 12%, #fff6e4 50%, rgba(255,220,160,.9) 88%, transparent); box-shadow: 0 0 24px 6px rgba(255, 200, 120, .8), 0 0 90px 22px rgba(255, 170, 80, .35); animation: beam 1.9s cubic-bezier(.3, .8, .3, 1) both; } @keyframes beam { /* dot pops on center-screen */ 0% { transform: translate(-50%,-50%) scaleX(.012) scaleY(.4); opacity: 0; } 6% { transform: translate(-50%,-50%) scaleX(.012) scaleY(1.6); opacity: 1; } /* stretches into the horizontal beam */ 30% { transform: translate(-50%,-50%) scaleX(1) scaleY(1); } /* holds while the phosphor charges */ 44% { transform: translate(-50%,-50%) scaleX(1) scaleY(1); } /* blooms vertically and washes out as the picture unfolds under it */ 58% { transform: translate(-50%,-50%) scaleX(1) scaleY(14); opacity: .75; } 78% { transform: translate(-50%,-50%) scaleX(1) scaleY(55); opacity: .22; } 100% { transform: translate(-50%,-50%) scaleX(1) scaleY(85); opacity: 0; } } /* ambient retrace band — drifts down the screen every ~14s */ .sweep { position: fixed; left: 0; right: 0; top: 0; height: 64px; z-index: 92; /* under the boot overlay, under scanlines */ pointer-events: none; opacity: 0; background: linear-gradient(to bottom, transparent, rgba(255,200,120,.035) 45%, rgba(255,220,160,.06) 50%, rgba(255,200,120,.035) 55%, transparent); } @media (prefers-reduced-motion: no-preference) { /* occasional retrace — one pass every ~14s */ .sweep.go { animation: sweep 14s linear infinite; } @keyframes sweep { 0% { transform: translateY(-12vh); opacity: 0; } 5% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(108vh); opacity: 0; } } } /* ---------- boot overlay (signature) ---------- */ #boot { position: fixed; inset: 0; z-index: 100; background: var(--bg-deep); font-family: var(--mono); font-size: clamp(12px, 2.6vw, 14px); line-height: 1.8; color: var(--amber); padding: clamp(24px, 6vh, 48px) clamp(20px, 7vw, 96px); transition: opacity .3s ease; text-shadow: 0 0 8px var(--glow); overflow: hidden; cursor: pointer; } #boot.done { opacity: 0; pointer-events: none; } #boot .ok { color: var(--text); text-shadow: none; } #boot .dim { color: var(--dim); text-shadow: none; } #boot .warn { color: var(--amber-hi); text-shadow: 0 0 10px var(--glow); } #boot .bcur { display: inline-block; width: .55em; height: 1em; background: var(--amber); vertical-align: -0.12em; box-shadow: 0 0 8px var(--glow); margin-left: 2px; } #boot .logo { white-space: pre; font-size: clamp(8px, 2vw, 12px); line-height: 1.25; margin: 14px 0; color: var(--amber); text-shadow: 0 0 14px var(--glow), 0 0 2px var(--amber); } #boot .continue { margin-top: 22px; color: var(--text); text-shadow: none; } /* welcome beat — screen clears, greeting types out centered */ #boot.welcoming { display: flex; align-items: center; justify-content: center; cursor: default; } #boot .welcome { font-size: clamp(15px, 3.6vw, 26px); letter-spacing: .14em; white-space: nowrap; color: var(--amber-hi); text-shadow: 0 0 16px var(--glow), 0 0 2px var(--amber-hi); } @media (prefers-reduced-motion: no-preference) { #boot .continue { animation: blink 1.1s steps(1) infinite; } } /* ---------- header / status line ---------- */ header { padding: 56px 0 0; } .statusline { font-family: var(--mono); font-size: 12.5px; color: var(--dim); display: flex; align-items: center; gap: 10px; margin-bottom: 52px; } .statusline .hits { color: var(--amber); font-variant-numeric: tabular-nums; text-shadow: 0 0 6px var(--glow); } .led { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--glow); flex-shrink: 0; } @media (prefers-reduced-motion: no-preference) { .led { animation: pulse 2.4s ease-in-out infinite; } } @keyframes pulse { 50% { opacity: .4; } } .statusline .right { margin-left: auto; } .statusline .right a { color: var(--dim); white-space: nowrap; } .statusline .right a:hover { color: var(--amber); } /* ---------- hero ---------- */ h1 { font-family: var(--disp); font-weight: 800; font-size: clamp(32px, 7vw, 54px); letter-spacing: -0.05em; color: var(--amber); text-shadow: 0 0 18px var(--glow), 0 0 2px var(--amber); line-height: 1.1; } h1 .tld { color: var(--text); text-shadow: none; } .tagline { font-size: 16.5px; color: var(--dim); margin-top: 12px; max-width: 48ch; } .tagline b { color: var(--text); font-weight: 500; } .cursor { display: inline-block; width: 0.5em; height: 0.85em; background: var(--amber); margin-left: 0.12em; box-shadow: 0 0 10px var(--glow); } @media (prefers-reduced-motion: no-preference) { h1 .cursor { animation: blink 1.1s steps(1) infinite; } } @keyframes blink { 50% { opacity: 0; } } /* ---------- live spectrum + waterfall (signature) ---------- */ .rig { margin-top: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-deep); overflow: hidden; box-shadow: inset 0 0 60px rgba(var(--accent-rgb), .03); } .rig-screen { position: relative; } .rig-screen canvas { display: block; width: 100%; cursor: crosshair; } .rig-marker { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 1px dashed rgba(var(--accent-rgb), .3); pointer-events: none; } .rig-sim { position: absolute; top: 8px; right: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--faint); pointer-events: none; } .rig-bar { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--faint); } .rig-bar .readout { color: var(--amber); font-size: 12px; text-shadow: 0 0 8px var(--glow); font-variant-numeric: tabular-nums; } /* ---------- section scaffolding ---------- */ section { padding-top: 76px; } section:last-of-type { padding-bottom: 72px; } .sec-label { font-family: var(--disp); font-weight: 700; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--amber); margin-bottom: 22px; display: flex; align-items: center; gap: 12px; } .sec-label::before { content: ""; width: 22px; height: 1px; background: var(--amber); box-shadow: 0 0 6px var(--glow); } .sec-label::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ---------- wide layout: section labels move into a left margin rail, the masthead stays full-bleed above it. Gives the page an editorial structure instead of one uniform stacked column. ---------- */ @media (min-width: 768px) { #screen > .wrap { max-width: 896px; } #screen > .wrap > section { padding-top: 0; margin-top: 78px; display: grid; grid-template-columns: 132px 1fr; column-gap: 38px; align-items: start; } #screen > .wrap > section:first-of-type { margin-top: 88px; } #screen > .wrap > section:last-of-type { padding-bottom: 84px; } #screen > .wrap > section > .sec-label { grid-column: 1; grid-row: 1; margin: 0; padding-top: 4px; /* optically align with the first text line */ justify-content: flex-end; text-align: right; } /* the trailing hairline reads as clutter in the rail */ #screen > .wrap > section > .sec-label::after { display: none; } /* everything that isn't the label flows down the content column */ #screen > .wrap > section > :not(.sec-label) { grid-column: 2; } } p + p { margin-top: 14px; } .muted { color: var(--dim); } /* ---------- projects: rows with real status ---------- */ .projects { list-style: none; display: flex; flex-direction: column; gap: 10px; } .projects li { padding: 15px 16px 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-raise); } .projects .row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; } .projects h3 { font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--text); } .projects .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--amber-deep); border: 1px solid var(--line); border-radius: 4px; padding: 1px 7px 2px; } .projects .st { margin-left: auto; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; white-space: nowrap; } .st-live { color: var(--amber); text-shadow: 0 0 6px var(--glow); } .st-wip { color: var(--dim); } .st-parked { color: var(--faint); } .projects p { font-size: 14.5px; color: var(--dim); line-height: 1.6; max-width: 62ch; } /* ---------- the services tree ---------- */ .tree { font-family: var(--mono); font-size: 13.5px; line-height: 1.9; background: var(--bg-raise); border: 1px solid var(--line); border-radius: 8px; padding: 20px 24px; overflow-x: auto; white-space: pre; box-shadow: inset 0 0 60px rgba(var(--accent-rgb),.025); } .tree .branch { color: #4a3b25; user-select: none; } .tree .node { color: var(--text); } .tree .note { color: var(--dim); } .tree .ok { color: var(--amber); text-shadow: 0 0 6px var(--glow); } .tree .root { color: var(--amber); font-weight: 600; text-shadow: 0 0 10px var(--glow); } /* ---------- misc list ---------- */ .misc { list-style: none; border-top: 1px solid var(--line); } .misc li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .misc .k { font-family: var(--mono); font-size: 13px; color: var(--amber-deep); min-width: 120px; flex-shrink: 0; padding-top: 2px; } /* ---------- links ---------- */ .links { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; } .links li { flex: 1 1 220px; } .links a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-raise); text-decoration: none; color: var(--text); font-family: var(--mono); font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease; } .links a .at { color: var(--dim); font-size: 12.5px; } .links a:hover, .links a:focus-visible { border-color: var(--amber); box-shadow: 0 0 16px rgba(var(--accent-rgb),.12); text-decoration: none; } .links a:hover .at { color: var(--amber-deep); } /* ---------- terminal prompt + footer ---------- */ .prompt { font-family: var(--mono); font-size: 14px; border-top: 1px solid var(--line); padding: 24px 0 4px; display: flex; align-items: center; flex-wrap: wrap; } .prompt .user { color: var(--amber); } .prompt .path { color: var(--text); } .prompt .cursor { /* static here — one blinking cursor per page is enough */ background: var(--faint); box-shadow: none; width: 0.55em; height: 1em; vertical-align: -0.12em; } .cmd { font-family: var(--mono); font-size: 14px; color: var(--text); background: none; border: none; cursor: pointer; padding: 0 2px; margin-left: 8px; } .cmd:hover { color: var(--amber); text-shadow: 0 0 8px var(--glow); } .cmd:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 2px; } footer { position: relative; /* anchors #disp-panel */ padding: 16px 0 56px; font-family: var(--mono); font-size: 12.5px; color: var(--dim); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } footer .amber { color: var(--amber); } /* ---------- reveal on load ---------- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(10px); animation: rise .6s ease forwards; } .reveal:nth-child(2) { animation-delay: .08s; } .reveal:nth-child(3) { animation-delay: .16s; } @keyframes rise { to { opacity: 1; transform: none; } } } @media (max-width: 480px) { .statusline .sys { display: none; } /* keep the guestbook health note visible on narrow screens */ .statusline.gb-off .sys { display: inline; } } @media (max-width: 520px) { header { padding-top: 44px; } .statusline { margin-bottom: 40px; } .rig { margin-top: 36px; } section { padding-top: 60px; } } /* ============================================ EDIT: project pages — ROM load + detail view A click on a .proj-row runs the ROM sequence (script at bottom) then powers on this view. ============================================ */ /* clickable project rows — styled as obvious interactive tiles */ .projects li.proj-row { position: relative; /* anchors the stretched .proj-open hit area */ cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .1s ease, box-shadow .15s ease; } .projects li.proj-row:hover { border-color: var(--amber-deep); background: linear-gradient(90deg, rgba(var(--accent-rgb), .07), rgba(var(--accent-rgb), .02)); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .12), 0 6px 22px rgba(0, 0, 0, .35); } /* the real control: a button in the h3, stretched over the card, so screen readers get list > heading > button and the description text stays readable (the old li[role=button][aria-label] hid it) */ .proj-open { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: none; padding: 0; text-align: left; cursor: pointer; } .proj-open::after { content: ""; position: absolute; inset: 0; border-radius: 7px; } .proj-open:focus-visible { outline: none; } .proj-open:focus-visible::after { outline: 2px solid var(--amber); outline-offset: 2px; } .projects li.proj-row:focus-within { border-color: var(--amber-deep); } .projects li.proj-row:active { transform: translateY(1px); background: rgba(var(--accent-rgb), .1); } .projects .open { margin-left: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--amber-deep); white-space: nowrap; opacity: .6; transition: opacity .15s ease, color .15s ease, transform .15s ease; } .projects li.proj-row:hover .open, .projects li.proj-row:focus-within .open { opacity: 1; color: var(--amber); text-shadow: 0 0 6px var(--glow); transform: translateX(3px); } /* ---------- ROM cartridge-load overlay ---------- */ #rom { position: fixed; inset: 0; z-index: 108; /* over the page, under #beam(110) + scanlines(120) */ background: var(--bg-deep); font-family: var(--mono); font-size: clamp(12px, 2.6vw, 14px); line-height: 1.85; color: var(--amber); padding: clamp(24px, 6vh, 48px) clamp(20px, 7vw, 96px); text-shadow: 0 0 8px var(--glow); overflow: hidden; cursor: pointer; transition: opacity .3s ease; display: flex; flex-direction: column; justify-content: center; } #rom.done { opacity: 0; pointer-events: none; } #rom .rline { white-space: pre-wrap; } #rom .ok { color: var(--text); text-shadow: none; } #rom .dim { color: var(--dim); text-shadow: none; } #rom .warn { color: var(--amber-hi); text-shadow: 0 0 10px var(--glow); } #rom .bar { color: var(--amber); letter-spacing: -.5px; text-shadow: 0 0 8px var(--glow); } #rom .pct { color: var(--text); text-shadow: none; } /* ---------- project detail view ---------- */ #proj-view { position: fixed; inset: 0; z-index: 95; background: var(--bg); overflow-y: auto; overflow-x: hidden; display: none; } #proj-view.open { display: block; } .proj-inner { transform-origin: 50% 50vh; } .proj-inner.crt-on { animation: crtOn 1.6s cubic-bezier(.25,.9,.3,1) both; } .proj-inner.crt-off { animation: crtOff .3s ease forwards; } @keyframes crtOff { 0% { transform: none; opacity: 1; } 100% { transform: scaleY(.004); opacity: 0; filter: brightness(5); } } #proj-top { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 14px; padding: 13px clamp(20px, 5vw, 40px); background: linear-gradient(var(--bg-deep), rgba(9,6,2,.82)); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; color: var(--dim); } #proj-top:empty { display: none; } .pback { font-family: var(--mono); font-size: 12.5px; color: var(--amber); background: none; border: none; cursor: pointer; padding: 2px 4px; } .pback:hover { text-shadow: 0 0 8px var(--glow); text-decoration: underline; text-underline-offset: 3px; } #proj-top .pcrumb { color: var(--faint); } #proj-top .led { margin-left: auto; } .phrow { display: flex; align-items: center; gap: 12px; } .proj-title { font-family: var(--disp); font-weight: 800; font-size: clamp(28px, 6vw, 42px); letter-spacing: -.045em; line-height: 1.1; color: var(--amber); text-shadow: 0 0 18px var(--glow), 0 0 2px var(--amber); margin-top: 14px; min-height: 1.1em; } .proj-title .cursor { vertical-align: -.04em; } @media (prefers-reduced-motion: no-preference) { .proj-title .cursor { animation: blink 1.1s steps(1) infinite; } } .spec { display: grid; grid-template-columns: max-content 1fr; gap: 6px 26px; font-family: var(--mono); font-size: 13.5px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: 8px; padding: 18px 22px; box-shadow: inset 0 0 60px rgba(var(--accent-rgb),.025); } .spec dt { color: var(--amber-deep); } .spec dd { color: var(--text); } .gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .shot { display: flex; flex-direction: column; gap: 8px; } .shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; background: #000; } .shot figcaption { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--dim); } .ph { aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 8px; background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb),.05) 0 2px, transparent 2px 9px), var(--bg-raise); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--faint); } .ph-status { color: var(--amber-deep); } .ph-note { display: block; margin-top: 8px; color: var(--dim); font-size: 10.5px; line-height: 1.5; letter-spacing: .02em; max-width: 28ch; } @media (max-width: 520px) { .gal { grid-template-columns: 1fr; } } .log { list-style: none; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 13.5px; } .log li { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); } .log .d { color: var(--amber-deep); min-width: 84px; flex-shrink: 0; } .log .t { color: var(--dim); } @media (prefers-reduced-motion: no-preference) { #proj-inner .prise { opacity: 0; transform: translateY(12px); animation: rise .55s ease forwards; } } /* ============================================ EDIT: interactive terminal — its own full-screen view, launched (with a short intro) like a project. ============================================ */ #term-view { position: fixed; inset: 0; z-index: 96; background: var(--bg); overflow-y: auto; overflow-x: hidden; display: none; } #term-view.open { display: block; } .term-inner { transform-origin: 50% 50vh; min-height: 100vh; } .term-inner.crt-on { animation: crtOn 1.6s cubic-bezier(.25,.9,.3,1) both; } .term-inner.crt-off { animation: crtOff .3s ease forwards; } .term-inner .wrap { padding-top: 30px; padding-bottom: 90px; } #term-top { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 14px; padding: 13px clamp(20px, 5vw, 40px); background: linear-gradient(var(--bg-deep), rgba(9,6,2,.82)); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; color: var(--dim); } #term-top .pcrumb { color: var(--faint); } #term-top .led { margin-left: auto; } /* shell-load intro (mirrors the ROM cartridge load) */ #shell { position: fixed; inset: 0; z-index: 108; background: var(--bg-deep); font-family: var(--mono); font-size: clamp(12px, 2.6vw, 14px); line-height: 1.85; color: var(--amber); padding: clamp(24px, 6vh, 48px) clamp(20px, 7vw, 96px); text-shadow: 0 0 8px var(--glow); overflow: hidden; cursor: pointer; transition: opacity .3s ease; display: flex; flex-direction: column; justify-content: center; } #shell.done { opacity: 0; pointer-events: none; } #shell .rline { white-space: pre-wrap; } #shell .ok { color: var(--text); text-shadow: none; } #shell .dim { color: var(--dim); text-shadow: none; } #shell .warn { color: var(--amber-hi); text-shadow: 0 0 10px var(--glow); } #shell .bcur { display: inline-block; width: .55em; height: 1em; background: var(--amber); vertical-align: -0.12em; box-shadow: 0 0 8px var(--glow); margin-left: 2px; } #term-out { font-family: var(--mono); font-size: 14px; line-height: 1.75; color: var(--text); margin: 4px 0 14px; } #term-out:empty { display: none; } .tl { white-space: pre-wrap; word-break: break-word; } .tl.sp { height: .55em; } .tprompt { color: var(--amber); } .tprompt .tpath { color: var(--text); } .tcmd { color: var(--text); } .tl .ok { color: var(--amber); text-shadow: 0 0 6px var(--glow); } .tl .dim { color: var(--dim); } .tl .warn, .tl .err { color: var(--amber-hi); } .tl .key { color: var(--amber-deep); } .tl a { color: var(--amber); } .tlogo { color: var(--amber); white-space: pre; line-height: 1.2; font-size: clamp(8px, 2.1vw, 12px); text-shadow: 0 0 10px var(--glow); } .term-input-row { position: relative; } .term-input-row .dollar { color: var(--text); } .term-field { position: relative; flex: 1; display: inline-flex; align-items: center; margin-left: 8px; min-width: 0; } #cmd { font-family: var(--mono); font-size: 14px; line-height: 1.5; color: var(--text); background: transparent; border: none; outline: none; width: 100%; padding: 0; caret-color: transparent; } .term-measure { position: absolute; left: 0; top: 0; visibility: hidden; white-space: pre; font-family: var(--mono); font-size: 14px; pointer-events: none; } .term-cursor { position: absolute; top: 50%; left: 0; margin-top: -0.55em; width: 0.55em; height: 1.05em; background: var(--amber); box-shadow: 0 0 8px var(--glow); mix-blend-mode: screen; pointer-events: none; opacity: 1; } @media (prefers-reduced-motion: no-preference) { #term-view.focused .term-cursor { animation: blink 1.1s steps(1) infinite; } } /* ---------- CRT power button + off state ---------- */ #power { position: fixed; right: 16px; bottom: 14px; z-index: 130; /* above scanlines + off overlay */ display: flex; align-items: center; gap: 8px; background: linear-gradient(var(--bg-raise), var(--bg-deep)); border: 1px solid var(--line); border-radius: 20px; padding: 7px 13px 7px 11px; cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--faint); box-shadow: 0 2px 12px rgba(0,0,0,.45); transition: border-color .15s ease, color .15s ease; } #power:hover { border-color: var(--amber); color: var(--amber); } #power:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } .pwr-glyph { font-size: 15px; line-height: 1; } .pwr-led { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--glow); flex-shrink: 0; } @media (prefers-reduced-motion: no-preference) { .pwr-led { animation: pulse 2.4s ease-in-out infinite; } } :root[data-power="off"] .pwr-led { background: #5a1c18; box-shadow: 0 0 7px rgba(225,70,45,.55); animation: none; } #crt-off { position: fixed; inset: 0; z-index: 125; background: #000; opacity: 0; pointer-events: none; transition: opacity .28s ease; } :root[data-power="off"] #crt-off { opacity: 1; pointer-events: auto; cursor: pointer; } #screen.crt-off { animation: crtOff .36s ease forwards; } /* ---------- idle screensaver ---------- */ #saver { position: fixed; inset: 0; z-index: 115; /* below scanlines (120) so it still reads as a CRT */ background: #000; opacity: 0; pointer-events: none; transition: opacity .5s ease; } #saver.on { opacity: 1; pointer-events: auto; cursor: none; } #saver-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* ---------- display settings panel ---------- */ .disp-btn { font-family: var(--mono); font-size: 12.5px; color: var(--dim); background: none; border: none; cursor: pointer; padding: 0 2px; } .disp-btn:hover { color: var(--amber); text-shadow: 0 0 8px var(--glow); } .disp-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 2px; } #disp-panel { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 60; width: 248px; background: linear-gradient(var(--bg-raise), var(--bg-deep)); border: 1px solid var(--line); border-radius: 10px; padding: 16px; box-shadow: 0 10px 34px rgba(0,0,0,.55); font-family: var(--mono); } #disp-panel[hidden] { display: none; } .dp-sec + .dp-sec { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); } .dp-label { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 11px; } .dp-swatches { display: flex; gap: 11px; } .dp-sw { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0; position: relative; background: var(--bg-deep); border: 1px solid var(--line); } .dp-sw i { position: absolute; inset: 4px; border-radius: 50%; display: block; background: currentColor; box-shadow: 0 0 7px currentColor; } .dp-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 3px currentColor; } .dp-sw:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .dp-toggle { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); padding: 5px 0; cursor: pointer; } .dp-toggle input { accent-color: var(--amber); width: 14px; height: 14px; cursor: pointer; } .dp-saver { display: flex; gap: 6px; } .dp-saver button { flex: 1; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--dim); background: var(--bg-deep); border: 1px solid var(--line); border-radius: 6px; padding: 7px 0; cursor: pointer; } .dp-saver button:hover { color: var(--amber); border-color: var(--amber-deep); } .dp-saver button[aria-pressed="true"] { color: var(--bg); background: var(--amber); border-color: var(--amber); text-shadow: none; box-shadow: 0 0 12px rgba(var(--accent-rgb), .35); } .dp-saver button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } /* ---------- konami: degauss + toast ---------- */ @keyframes degauss { 0% { transform: none; filter: none; } 9% { transform: scale(1.014) skewX(.7deg) translateY(5px); filter: brightness(1.6) saturate(1.5); } 20% { transform: scale(.992) skewX(-.9deg) translateY(-7px); filter: brightness(1.32) hue-rotate(14deg); } 33% { transform: scale(1.008) skewX(.6deg) translateY(6px); filter: brightness(1.5) saturate(1.7); } 47% { transform: scale(.996) skewX(-.4deg) translateY(-4px); filter: brightness(1.2) hue-rotate(-10deg); } 62% { transform: scale(1.003) skewX(.2deg) translateY(2px); filter: brightness(1.12); } 80% { transform: scale(.999) translateY(-1px); filter: brightness(1.05); } 100% { transform: none; filter: none; } } #screen.degauss { animation: degauss 1.2s ease-in-out both; } .degauss-flash { position: fixed; inset: 0; z-index: 122; /* over scanlines, under the power button */ pointer-events: none; background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), .30), transparent 68%); opacity: 0; } @keyframes degaussFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } } .degauss-flash.go { animation: degaussFlash 1.15s ease-out both; } #toast { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%) translateY(10px); z-index: 131; pointer-events: none; opacity: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--amber); background: linear-gradient(var(--bg-raise), var(--bg-deep)); border: 1px solid var(--amber-deep); border-radius: 8px; padding: 10px 16px; box-shadow: 0 0 22px rgba(var(--accent-rgb), .28); text-shadow: 0 0 8px var(--glow); transition: opacity .3s ease, transform .3s ease; max-width: 86vw; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- guestbook ---------- */ .gb-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; } .gb-row { display: flex; gap: 10px; align-items: center; } .gb-name, .gb-msg { font-family: var(--mono); font-size: 14px; color: var(--text); background: var(--bg-raise); border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; outline: none; } .gb-name { flex: 1; min-width: 0; } .gb-msg { width: 100%; resize: vertical; line-height: 1.6; } .gb-name:focus, .gb-msg:focus { border-color: var(--amber-deep); box-shadow: 0 0 14px rgba(var(--accent-rgb), .12); } .gb-name::placeholder, .gb-msg::placeholder { color: var(--faint); } .gb-submit { white-space: nowrap; margin-left: 0; } .gb-submit[disabled] { opacity: .5; cursor: default; } .gb-web { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .gb-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .gb-status { font-family: var(--mono); font-size: 12px; min-height: 1em; color: var(--dim); } .gb-count { font-family: var(--mono); font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .gb-count.over { color: var(--amber-hi); } .gb-status.ok { color: var(--amber); text-shadow: 0 0 6px var(--glow); } .gb-status.err { color: var(--amber-hi); } .gb-status.dim { color: var(--faint); } .gb-list { list-style: none; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 13.5px; } .gb-entry { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); } .gb-meta { display: flex; align-items: baseline; gap: 12px; } .gb-name-t { color: var(--amber); } .gb-date { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; margin-left: auto; } .gb-text { color: var(--text); line-height: 1.6; word-break: break-word; } .gb-empty { color: var(--dim); padding: 14px 0; } .gb-del { font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--faint); background: none; border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; margin-left: 10px; cursor: pointer; flex-shrink: 0; } .gb-del:hover { color: var(--amber-hi); border-color: var(--amber-deep); } .gb-del:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }