/* Phosphor theme system: every themed color reads a custom property so the theme switcher only has to flip data-theme on . The canvas renderer keeps its own copy of these values in script.js (THEMES) - keep in sync. */ :root { --phos: #00FF00; --accent: #00FFFF; --phos-soft: rgba(0, 255, 0, 0.3); --accent-soft: rgba(0, 255, 255, 0.5); --phos-faint: rgba(0, 255, 0, 0.03); } [data-theme="amber"] { --phos: #FFB000; --accent: #FFD700; --phos-soft: rgba(255, 176, 0, 0.3); --accent-soft: rgba(255, 215, 0, 0.5); --phos-faint: rgba(255, 176, 0, 0.03); } [data-theme="ice"] { --phos: #9BD4FF; --accent: #FFFFFF; --phos-soft: rgba(155, 212, 255, 0.3); --accent-soft: rgba(255, 255, 255, 0.5); --phos-faint: rgba(155, 212, 255, 0.03); } [data-theme="red"] { --phos: #FF3B30; --accent: #FF8A80; --phos-soft: rgba(255, 59, 48, 0.35); --accent-soft: rgba(255, 138, 128, 0.5); --phos-faint: rgba(255, 59, 48, 0.04); } html, body { margin: 0; padding: 0; width: 100%; height: 100%; min-height: 100vh; background: black; overflow: hidden; font-family: monospace; color: white; position: relative; } img { height: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } canvas { position: fixed; top: 0; left: 0; z-index: 0; display: block; } .logo-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center center; z-index: 1; text-align: center; user-select: none; pointer-events: none; width: 90%; max-width: 100%; padding: 0 20px; box-sizing: border-box; } .logo-main { font-family: 'Courier New', monospace; font-weight: bold; color: var(--phos); text-shadow: 0 0 10px var(--phos), 0 0 20px var(--phos), 0 0 30px var(--phos); letter-spacing: 0.2em; margin: 0; line-height: 1; /* Responsive sizing using clamp */ font-size: clamp(3rem, 15vw, 8rem); } .logo-version { font-family: 'Courier New', monospace; color: var(--phos); text-shadow: 0 0 5px var(--phos), 0 0 10px var(--phos); letter-spacing: 0.1em; margin-top: 0.5em; opacity: 0.8; /* Responsive sizing using clamp */ font-size: clamp(1.2rem, 5vw, 2.5rem); } /* Mobile adjustments */ @media (max-width: 480px) { .logo-main { letter-spacing: 0.1em; } .logo-version { letter-spacing: 0.2em; } } /* Large screen adjustments */ @media (min-width: 1920px) { .logo-main { font-size: 10rem; } .logo-version { font-size: 3rem; } } footer { position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; padding: 10px; font-size: 14px; background: rgba(0, 0, 0, 0.5); z-index: 2; box-sizing: border-box; } .footer-link { color: white; text-decoration: underline; } /* Footer controls: version (BSOD easter egg), theme cycler, sound toggle. Buttons stripped to inline text so the footer stays one quiet line. */ .ver-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; } .hud-btn { background: none; border: 0; padding: 0; margin: 0 2px; font: inherit; color: var(--phos); opacity: 0.85; cursor: pointer; text-shadow: 0 0 5px var(--phos-soft); } .hud-btn:hover { color: var(--accent); opacity: 1; } @media (max-width: 768px) { footer { font-size: 12px; padding: 8px; } } @keyframes glitch { 0% { text-shadow: 2px 0 red, -2px 0 cyan; transform: translate(0, 0); } 15% { text-shadow: -2px 2px lime, 2px -2px magenta; transform: translate(-2px, 2px); } 30% { text-shadow: 3px -1px red, -3px 1px cyan; transform: translate(3px, -1px); } 45% { text-shadow: -1px 2px lime, 1px -2px magenta; transform: translate(-1px, 1px); } 60% { text-shadow: 2px -1px red, -2px 1px cyan; transform: translate(2px, 1px); } 75% { text-shadow: -2px 1px lime, 2px -1px magenta; transform: translate(-2px, -1px); } 100% { text-shadow: none; transform: translate(0, 0); } } @keyframes logoGlitch { 0%, 100% { text-shadow: 0 0 10px var(--phos), 0 0 20px var(--phos), 0 0 30px var(--phos), 0 0 40px var(--phos); } 25% { text-shadow: 2px 0 10px #FF0000, -2px 0 20px #00FFFF, 0 0 30px var(--phos), 0 0 40px var(--phos); } 50% { text-shadow: -2px 2px 10px #FF00FF, 2px -2px 20px #FFFF00, 0 0 30px var(--phos), 0 0 40px var(--phos); } 75% { text-shadow: 0 0 10px var(--phos), 3px -1px 20px #FF0000, -3px 1px 30px #00FFFF, 0 0 40px var(--phos); } } .glitch-active { animation: glitch 1s linear 1; } .logo-glitch { animation: logoGlitch 0.3s linear 1; } /* Flashed by glitchFooter() with binary that decodes to "RJL". Absolutely positioned inside the fixed footer so appearing never reflows the text. */ .footer-binary { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--phos); font-family: monospace; font-size: 11px; white-space: pre; opacity: 0; transition: opacity 0.2s ease-in-out; pointer-events: none; text-shadow: 0 0 5px var(--phos-soft); } @media (max-width: 768px) { .footer-binary { display: none; /* would overlap the footer text on narrow screens */ } } /* Boot Sequence Styles */ .boot-sequence { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 9999; display: flex; flex-direction: column; justify-content: center; padding: 20px; box-sizing: border-box; font-family: 'Courier New', monospace; overflow: hidden; } .boot-sequence::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( transparent 0%, var(--phos-faint) 50%, transparent 100% ); animation: scanline 8s linear infinite; pointer-events: none; } @keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .boot-sequence.hidden { display: none; } .boot-line { color: var(--phos); font-size: clamp(12px, 2vw, 16px); line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; } /* Kernel panic: the whole readout flashes red while the panic dump types */ .boot-line.boot-panic { color: #FF4444; text-shadow: 0 0 6px rgba(255, 0, 0, 0.6); } /* Glitch effect for boot text */ .glitch-boot-text { animation: bootGlitch 0.4s linear; } @keyframes bootGlitch { 0% { transform: skewX(0deg); text-shadow: none; } 15% { transform: skewX(5deg); text-shadow: -1px 0px 5px red, 1px 0px 5px cyan; } 30% { transform: skewX(0deg); text-shadow: 1px 0px 5px red, -1px 0px 5px cyan; } 45% { transform: skewX(-5deg); text-shadow: -1px 0px 5px red, 1px 0px 5px cyan; } 60% { transform: skewX(0deg); text-shadow: 1px 0px 5px red, -1px 0px 5px cyan; } 75% { transform: skewX(5deg); text-shadow: -1px 0px 5px red, 1px 0px 5px cyan; } 90% { transform: skewX(-5deg); text-shadow: 1px 0px 5px red, -1px 0px 5px cyan; } 100% { transform: skewX(0deg); text-shadow: none; } } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .cursor::after { content: '_'; animation: blink 1s infinite; } /* Performance Monitor Styles */ .perf-monitor { position: fixed; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.8); border: 1px solid var(--phos); padding: 10px; font-family: 'Courier New', monospace; font-size: 11px; color: var(--phos); z-index: 100; min-width: 180px; opacity: 0; transition: opacity 1s ease-in-out; box-shadow: 0 0 10px var(--phos-soft); cursor: pointer; user-select: none; touch-action: none; /* pointer-event drag: stop touch drags from scrolling instead */ } .perf-monitor:hover { border-color: var(--accent); box-shadow: 0 0 15px var(--accent-soft); } .perf-monitor.visible { opacity: 1; } .perf-line { margin: 3px 0; text-transform: uppercase; letter-spacing: 1px; } .perf-line span { float: right; color: var(--accent); text-shadow: 0 0 5px var(--accent); margin-left: 10px; } @media (max-width: 480px) { .perf-monitor { font-size: 9px; min-width: 150px; padding: 8px; } } .perf-monitor.glitch { animation: perfGlitch 0.2s linear; } @keyframes perfGlitch { 0%, 100% { transform: translateX(0); filter: hue-rotate(0deg); } 20% { transform: translateX(-2px); filter: hue-rotate(90deg); } 40% { transform: translateX(2px); filter: hue-rotate(180deg); } 60% { transform: translateX(-1px); filter: hue-rotate(270deg); } 80% { transform: translateX(1px); filter: hue-rotate(360deg); } } /* Hide logo initially during boot */ .logo-container.booting { opacity: 0; transition: opacity 1s ease-in-out; } /* Hide footer during boot */ footer.booting { opacity: 0; transition: opacity 1s ease-in-out; } /* -------------------------------------------------------------------------- CRT overlay: scanlines on the element, vignette + sync-roll on pseudos. GPU-only animation (opacity/transform), pointer-events none, topmost. */ #crt { position: fixed; inset: 0; z-index: 10600; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.18) 0px, rgba(0, 0, 0, 0.18) 1px, transparent 1px, transparent 3px ); opacity: 0.55; animation: crtFlicker 9s steps(1) infinite; } #crt::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.4) 100%); } #crt::after { content: ''; position: absolute; left: 0; right: 0; top: -140px; height: 120px; background: linear-gradient( transparent 0%, rgba(255, 255, 255, 0.028) 50%, transparent 100% ); animation: crtRoll 16s linear infinite; will-change: transform; } @keyframes crtFlicker { 0%, 100% { opacity: 0.55; } 47% { opacity: 0.55; } 48% { opacity: 0.62; } 49% { opacity: 0.55; } 83% { opacity: 0.55; } 84% { opacity: 0.5; } 85% { opacity: 0.55; } } @keyframes crtRoll { 0% { transform: translateY(0); } 100% { transform: translateY(120vh); } } /* -------------------------------------------------------------------------- Terminal overlay (DOM built lazily by script.js on first open) */ .term-hint { position: fixed; left: 14px; bottom: 46px; z-index: 9000; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--phos); color: var(--phos); font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; padding: 4px 10px; cursor: pointer; text-shadow: 0 0 6px var(--phos-soft); animation: hintBlink 2.4s steps(2) infinite; } .term-hint:hover { color: var(--accent); border-color: var(--accent); } body.term-open .term-hint { display: none; } @keyframes hintBlink { 0%, 60% { opacity: 0.9; } 61%, 100% { opacity: 0.4; } } .term { position: fixed; left: 0; right: 0; bottom: 0; height: min(62vh, 520px); z-index: 10200; background: rgba(0, 4, 0, 0.97); border-top: 1px solid var(--phos); box-shadow: 0 -4px 24px var(--phos-soft); display: flex; flex-direction: column; font-family: 'Courier New', monospace; color: var(--phos); transform: translateY(103%); transition: transform 0.16s ease-out; will-change: transform; } .term.open { transform: translateY(0); } .term-out { flex: 1; overflow-y: auto; padding: 12px 14px 6px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .term-out a { color: var(--accent); } .t-dim { opacity: 0.65; } .t-acc { color: var(--accent); } .t-err { color: #FF5555; } .t-warn { color: #FFD700; } .term-in { display: flex; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--phos-soft); } .term-prompt { color: var(--accent); white-space: nowrap; } .term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--phos); font: inherit; caret-color: var(--phos); } @media (max-width: 480px) { .term { height: 72vh; } .term-hint { bottom: 54px; font-size: 12px; } } /* -------------------------------------------------------------------------- BSOD easter egg */ .bsod { position: fixed; inset: 0; z-index: 10300; background: #0A31D9; color: #FFFFFF; font-family: 'Courier New', monospace; font-size: clamp(12px, 1.7vw, 17px); line-height: 1.7; padding: 9vh 8vw; box-sizing: border-box; white-space: pre-wrap; cursor: default; } /* -------------------------------------------------------------------------- Idle screensaver canvas */ #saver { position: fixed; inset: 0; z-index: 9600; background: #000; display: block; } /* -------------------------------------------------------------------------- GOD MODE (Konami code): everything phosphor goes gold for 30 seconds. */ body.god-mode .logo-main, body.god-mode .logo-version { color: #FFD700; text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 40px #FFD700; } body.god-mode .perf-monitor { border-color: #FFD700; color: #FFD700; box-shadow: 0 0 18px rgba(255, 215, 0, 0.45); } body.god-mode .term-hint, body.god-mode .hud-btn { color: #FFD700; } .god-flash { position: fixed; inset: 0; z-index: 10500; pointer-events: none; background: radial-gradient(circle at center, rgba(255, 215, 0, 0.45), transparent 70%); animation: godFlash 0.6s ease-out forwards; } @keyframes godFlash { from { opacity: 1; } to { opacity: 0; } } /* -------------------------------------------------------------------------- Achievement toasts */ .ach-toast { position: fixed; top: 14px; left: 50%; transform: translate(-50%, -160%); z-index: 10400; background: rgba(0, 4, 0, 0.95); border: 1px solid #FFD700; color: #FFD700; font-family: 'Courier New', monospace; font-size: 13px; letter-spacing: 0.5px; padding: 8px 16px; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 6px rgba(255, 215, 0, 0.6); box-shadow: 0 0 14px rgba(255, 215, 0, 0.35); transition: transform 0.25s ease-out; } .ach-toast.show { transform: translate(-50%, 0); } /* Reduced motion: kill every keyframe animation. Opacity transitions (content reveals) stay - they are fades, not motion. script.js pairs this by skipping the typed boot, painting the rain as one static frame, and never scheduling the glitch timers, screensaver, or favicon animation. */ @media (prefers-reduced-motion: reduce) { .boot-sequence::before, .glitch-active, .logo-glitch, .glitch-boot-text, .perf-monitor.glitch, .cursor::after, .term-hint, .god-flash, #crt, #crt::after { animation: none !important; } .term, .ach-toast { transition: none; } }