/* Skin-level design tokens (colors, shadows, fonts) live in css/skins.css, keyed by [data-skin] on . */ body, html { margin: 0; padding: 0; width: 100%; height: 100%; /* Black behind #screen: what shows when the CRT collapses */ background-color: #000; color: var(--text-color); font-family: var(--font-mono); overflow: hidden; /* No scrolling on the body, windows scroll internally */ user-select: none; /* Desktop feel */ } /* The "monitor picture": everything on the desktop lives inside, so the skin switch can collapse it like a CRT powering off. */ #screen { position: fixed; inset: 0; background-color: var(--bg-color); transform-origin: 50% 50%; } /* --- Retro CRT Effects --- */ .scanlines { position: fixed; inset: 0; /* Tracks the real viewport; 100vh overshoots on mobile URL bars */ background: linear-gradient( to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) ); background-size: 100% 4px; pointer-events: none; z-index: 9999; opacity: 0.3; } .screen-overlay { position: fixed; inset: 0; background: radial-gradient(circle, rgba(18, 16, 16, 0) 60%, rgba(0, 0, 0, 0.4) 100%); pointer-events: none; z-index: 10000; } /* --- Desktop --- */ #desktop { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 40px); /* Minus taskbar */ padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 20px; overflow: hidden; /* Important for window constraints */ pointer-events: none; /* Allow clicks to pass through to canvas */ z-index: 10; } .desktop-icon { width: 80px; text-align: center; cursor: pointer; border: 1px solid transparent; padding: 5px; border-radius: 4px; transition: background 0.2s; pointer-events: auto; /* Restore events */ } .desktop-icon:hover { background: var(--accent-soft-bg); border-color: var(--text-dim); } .desktop-icon:active { background: var(--accent-active-bg); } /* Kill the double-tap-to-zoom delay on interactive elements so taps feel immediate on touch devices (pinch zoom stays available) */ button, a, .desktop-icon, .win-btn, .taskbar-item, .start-list li, .color-btn, .works-row, .game-launch-btn, .sand-tool-btn { touch-action: manipulation; } /* Window drag is fully handled in JS; stop the browser from trying to scroll/zoom mid-drag on touch */ .window-header { touch-action: none; } .desktop-icon:focus-visible, .taskbar-item:focus-visible, .win-btn:focus-visible, .social-btn:focus-visible, .start-list li:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--text-highlight); outline-offset: 3px; box-shadow: 0 0 12px var(--accent-shadow); } .icon-img { width: 48px; height: 48px; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--text-color); font-weight: bold; font-size: 14px; background: var(--surface-deep); box-shadow: var(--tile-shadow); } .icon-label { font-size: 12px; text-shadow: var(--label-shadow); } /* --- Windows --- */ .window { position: absolute; pointer-events: auto; /* Restore events */ background-color: var(--win-bg); border: 1px solid var(--border-color); box-shadow: var(--win-shadow); display: flex; flex-direction: column; min-width: 300px; min-height: 200px; resize: both; /* Native CSS resize! */ overflow: hidden; /* Transition for animations */ transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease; transform-origin: center center; /* Performance optimization */ contain: layout style paint; } /* Window Animation Classes */ .window.opening { transform: scale(0.5); opacity: 0; will-change: transform, opacity; } .window.minimized-anim { transform: scale(0.1) translateY(500px); /* Rough "down to taskbar" */ opacity: 0; will-change: transform, opacity; } .window.minimized { display: none; } .window.maximized { top: 0 !important; left: 0 !important; width: 100% !important; height: calc(100% - 40px) !important; transform: none !important; /* Override minimize transform */ } .window.snapping { transition: top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease, width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .window.closing { transform: scale(0.9); opacity: 0; pointer-events: none; will-change: transform, opacity; } .window-header { background-color: var(--header-bg); color: var(--header-text); padding: 5px 10px; display: flex; justify-content: space-between; align-items: center; cursor: grab; border-bottom: 1px solid var(--border-color); user-select: none; } .window-header:active { cursor: grabbing; } .window-title { font-weight: bold; font-size: 14px; } .window-controls { display: flex; gap: 5px; } .win-btn { width: 20px; height: 20px; border: 1px solid var(--text-dim); background: var(--surface-deep); color: var(--text-color); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; } .win-btn:active { background: var(--text-color); color: var(--invert-text); } @media (hover: hover) { .win-btn:hover { background: var(--text-color); color: var(--invert-text); } } /* .win-btn.close-btn:hover { background: var(--error-color); border-color: var(--error-color); color: #fff; } */ .window-content { flex-grow: 1; overflow-y: auto; padding: 0; /* Let inner content handle padding */ position: relative; user-select: text; /* Allow text selection inside windows */ /* Lets inner layouts respond to the WINDOW's size via @container, not the viewport: a shrunk window reflows like a small screen */ container-type: inline-size; } /* Specific App Styling inside Windows */ .content-wrapper { height: 100%; } .img-viewer { display: flex; justify-content: center; align-items: center; height: 100%; } .img-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; } /* TERMINAL APP STYLING The terminal follows the active skin via the --term-* palette (paper terminal on paper, phosphor on CRT, slate on night). */ .terminal-app { height: 100%; padding: 10px; box-sizing: border-box; background: var(--term-bg); overflow-y: auto; font-family: var(--font-mono); } .terminal-output { white-space: pre-wrap; word-wrap: break-word; } .terminal-input-line { display: flex; align-items: center; margin-top: 5px; position: relative; flex-wrap: nowrap; /* Prevent wrapping */ } .terminal-input { flex-grow: 1; background: transparent; border: none; color: var(--term-color); font-family: var(--font-mono); font-size: 16px; outline: none; padding: 0; margin-left: 10px; caret-color: var(--term-color); min-width: 0; /* Allow shrinking if needed */ } .terminal-input:focus-visible { outline: none; box-shadow: none; } .prompt { color: var(--term-highlight); font-weight: bold; white-space: nowrap; /* Keep prompt on one line */ } .output-line { margin-bottom: 5px; color: var(--term-color); } .output-line a { color: var(--term-highlight); text-decoration: underline; } .error-msg { color: var(--error-color); } /* GLITCH IMAGE STYLING */ .glitch-image-wrapper { position: relative; width: 250px; height: 250px; border: 2px solid var(--text-dim); padding: 5px; box-shadow: 0 0 15px var(--accent-shadow); } /* Small version for About window */ .glitch-image-wrapper.small { width: 150px; height: 150px; margin: 0 auto 15px; } .profile-photo { width: 100%; height: 100%; object-fit: cover; filter: contrast(105%); transition: all 0.5s; } .glitch-image-wrapper:hover .profile-photo { filter: contrast(105%); } /* ABOUT APP STYLING */ .about-container { padding: 20px; text-align: center; height: 100%; box-sizing: border-box; } .about-header { border-bottom: 2px dashed var(--text-dim); padding-bottom: 20px; margin-bottom: 20px; } .about-name { margin: 10px 0; color: var(--text-highlight); font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 2px; } .about-tagline { font-style: italic; color: var(--text-dim); margin-bottom: 15px; font-size: 0.9rem; } /* --- Works (file list + detail windows) --- */ .works-table { width: 100%; border-collapse: collapse; margin-top: 0; } .works-table-header { border-bottom: 1px solid var(--text-color); text-align: left; background: var(--accent-soft-bg); } .works-table-header th { padding: 10px; text-align: left; } .works-row { border-bottom: 1px solid var(--border-soft); cursor: pointer; } .works-row:hover, .works-row:focus { background: var(--accent-soft-bg); outline: none; } .works-row td { padding: 10px; } .works-name { color: var(--text-highlight); font-weight: bold; white-space: nowrap; } .works-desc { color: var(--text-muted); } .work-detail { padding: 20px; color: var(--text-color); } .work-detail-title { color: var(--text-highlight); border-bottom: 1px solid var(--text-dim); padding-bottom: 10px; margin: 0; font-size: 1.1rem; word-break: break-all; } .work-detail-meta { color: var(--text-dim); margin-top: 10px; font-size: 0.85rem; } .work-detail-body { margin-top: 16px; line-height: 1.6; color: var(--text-color); } .work-log-line { margin-bottom: 10px; } .work-log-line:last-child { margin-bottom: 0; } .work-log-line strong { color: var(--text-highlight); } /* --- Falling Sand --- */ /* Full-screen sim surface: above the drawing (z:1), below the palette controls (z:5) and desktop icons/windows (z:10). */ #sand-overlay { position: fixed; top: 0; left: 0; width: 100%; /* Height is set from JS: the sim floor is the taskbar's top edge */ z-index: 2; cursor: crosshair; touch-action: none; } .sand-controls { padding: 14px; display: flex; flex-direction: column; gap: 10px; } .sand-hint { margin: 0; color: var(--text-dim); font-size: 0.8rem; line-height: 1.5; } .sand-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sand-tool-btn { font-family: 'Fira Code', monospace; font-size: 0.75rem; padding: 5px 12px; background: transparent; color: var(--text-color); border: 1px solid var(--text-color); cursor: pointer; } .sand-tool-btn:hover { background: var(--accent-soft-bg); } .sand-tool-btn.active { background: var(--text-color); color: var(--invert-text); } .sand-start-btn { font-weight: bold; } .work-detail-links { margin-top: 20px; font-size: 0.9rem; } .work-detail-links a { color: var(--text-highlight); text-decoration: underline; margin-right: 10px; } .social-links { display: flex; justify-content: center; gap: 12px; margin-top: 15px; } .social-btn { align-items: center; display: inline-flex; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--text-color); color: var(--text-color); text-decoration: none; transition: all 0.2s; background: var(--surface-deep); } .social-btn svg { width: 20px; height: 20px; fill: currentColor; } .social-btn:hover { background: var(--text-color); color: var(--invert-text); box-shadow: var(--btn-shadow); } .about-content { text-align: left; color: var(--text-color); font-size: 0.95rem; line-height: 1.6; } .about-content h3 { color: var(--text-dim); border-bottom: 1px solid var(--border-soft); padding-bottom: 5px; margin-bottom: 10px; } /* --- Taskbar --- */ #taskbar { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background: var(--surface-alt); border-top: 2px solid var(--text-dim); display: flex; align-items: center; padding: 0 5px; box-sizing: border-box; z-index: 9999; } #start-btn { background: var(--text-color); color: var(--invert-text); border: none; padding: 5px 15px; font-family: var(--font-display); font-weight: bold; cursor: pointer; margin-right: 10px; box-shadow: var(--btn-shadow); } #start-btn:active, #start-btn.active { background: var(--text-dim); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); } #taskbar-apps { flex-grow: 1; display: flex; gap: 5px; } .taskbar-item { padding: 5px 15px; border: 1px solid var(--text-dim); background: var(--surface-deep); color: var(--text-dim); cursor: pointer; font-size: 12px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.2s; } .taskbar-item.active { background: var(--accent-strong-bg); color: var(--text-color); border-color: var(--text-color); box-shadow: inset 0 0 5px var(--accent-shadow); } #clock { padding: 0 15px; color: var(--text-color); font-weight: bold; } /* --- Start Menu --- */ #start-menu { position: absolute; bottom: 42px; /* Above taskbar */ left: 5px; width: 250px; background: var(--surface-deep); border: 2px solid var(--text-color); box-shadow: 5px 5px 0 rgba(0,0,0,0.25); z-index: 10000; display: flex; flex-direction: column; } #start-menu.hidden { display: none; } .start-header { background: var(--text-color); color: var(--invert-text); padding: 10px; display: flex; align-items: center; font-weight: bold; } .user-avatar { background: var(--invert-text); color: var(--text-color); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 10px; border: 1px solid var(--invert-text); } .start-list { list-style: none; padding: 0; margin: 0; } .start-list li { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid var(--border-soft); } .start-list li:hover { background: var(--text-color); color: var(--invert-text); } .start-list .separator { height: 1px; background: var(--text-dim); padding: 0; margin: 5px 0; } /* Library Styling */ .book-row { transition: all 0.2s; } .book-row:hover { background: var(--accent-mid-bg) !important; box-shadow: inset 0 0 10px var(--accent-shadow); } /* Games Launcher */ .games-launcher { padding: 20px; color: var(--text-color); } .games-header { border-bottom: 1px dashed var(--text-dim); margin-bottom: 16px; padding-bottom: 12px; } .games-header h2 { color: var(--text-highlight); font-family: var(--font-display); letter-spacing: 2px; margin: 0 0 8px; } .games-header p { color: var(--text-dim); line-height: 1.5; margin: 0; } .game-card { align-items: center; background: var(--accent-soft-bg); border: 1px solid var(--text-dim); display: flex; gap: 16px; justify-content: space-between; margin-bottom: 12px; padding: 14px; } .game-card h3 { color: var(--text-highlight); margin: 0 0 6px; } .game-card p { color: var(--text-muted); line-height: 1.4; margin: 0; } .game-launch-btn { background: var(--surface-deep); border: 1px solid var(--text-color); color: var(--text-color); cursor: pointer; font-family: var(--font-mono); font-weight: bold; padding: 10px 16px; flex-shrink: 0; /* The text column gives way, not the button */ } /* Narrow WINDOW (not screen): stack each card's button under its text */ @container (max-width: 420px) { .game-card { align-items: stretch; flex-direction: column; gap: 10px; } } .game-launch-btn:hover { background: var(--text-color); color: var(--invert-text); } /* --- Type Racer Styling --- Arcade games are green-phosphor cabinets in every skin (fixed --arcade-* palette). */ #typeracer-app { height: 100%; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; background: var(--arcade-bg-alt); } .tr-container { display: flex; flex-direction: column; gap: 20px; position: relative; max-width: 800px; margin: 0 auto; width: 100%; } .tr-header { display: flex; justify-content: space-between; font-size: 1.2rem; color: var(--arcade-highlight); border-bottom: 1px solid var(--arcade-dim); padding-bottom: 10px; } .tr-status { font-weight: bold; } .tr-track { position: relative; height: 40px; border-bottom: 1px dashed var(--arcade-dim); margin-bottom: 10px; } .tr-car { position: absolute; bottom: 5px; left: 0; background: var(--arcade-color); color: var(--arcade-on); padding: 2px 5px; font-size: 0.8rem; font-weight: bold; border-radius: 2px; transition: left 0.1s linear; /* Smooth movement */ white-space: nowrap; } #tr-opponent-car { background: var(--arcade-dim); color: var(--arcade-on); } .tr-text-display { background: var(--arcade-bg); padding: 20px; border: 1px solid var(--arcade-dim); font-size: 1.2rem; line-height: 1.6; color: var(--arcade-faint); /* Inactive text color */ min-height: 100px; white-space: pre-wrap; } .tr-text-display span.correct { color: var(--arcade-color); } .tr-text-display span.current { background: var(--arcade-color); color: var(--arcade-on); } .tr-text-display.shake { animation: shake 0.2s; } @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(5px); } 50% { transform: translateX(-5px); } 75% { transform: translateX(5px); } 100% { transform: translateX(0); } } .tr-result { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--arcade-overlay); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; text-align: center; } .tr-result.hidden { display: none; } .tr-result-title { font-size: 3rem; font-family: var(--font-display); margin-bottom: 20px; } .tr-result-score { font-size: 1.5rem; margin-bottom: 30px; color: var(--arcade-highlight); } .tr-restart-btn { background: transparent; border: 2px solid var(--arcade-color); color: var(--arcade-color); padding: 10px 30px; font-size: 1.2rem; font-family: var(--font-mono); cursor: pointer; transition: all 0.2s; } .tr-restart-btn:hover { background: var(--arcade-color); color: var(--arcade-on); } /* --- Mobile/Tablet Optimization --- */ @media (max-width: 768px) { /* Desktop */ #desktop { padding: 10px; gap: 15px; align-content: flex-start; justify-content: center; /* Center icons roughly */ flex-direction: row; /* Flow row-wise on mobile */ } .desktop-icon { width: 70px; margin: 5px; } .icon-img { width: 40px; height: 40px; } /* Windows - Mobile Optimized Position and width come from JS (window-manager.js) as inline styles so touch-dragging keeps working; CSS only sets bounds. No !important on top/left/width: it would beat the inline styles and freeze every window in one spot. */ .window { min-width: min(300px, calc(100vw - 16px)) !important; min-height: 200px !important; max-width: calc(100vw - 8px); max-height: 80vh !important; /* Leave room for virtual keyboard */ box-shadow: var(--win-shadow); /* Skin-appropriate layer shadow */ } /* Mobile taskbar is 50px tall, not 40px */ .window.maximized { height: calc(100% - 50px) !important; } /* Enable dragging cursor */ .window-header { cursor: grab; padding: 10px; /* Larger hit area */ } /* Restore window controls for manual management if needed */ .win-btn.min-btn, .win-btn.max-btn { display: flex; } .win-btn { width: 30px; height: 30px; } .win-btn.close-btn { width: 30px; height: 30px; font-size: 16px; } /* Force no highlight on maximize button for mobile as requested */ .win-btn.max-btn:active, .win-btn.max-btn:hover { background: var(--surface-deep); color: var(--text-color); } /* Taskbar */ #taskbar { padding: 0; height: 50px; /* Taller for touch */ } #desktop { height: calc(100% - 50px); } #start-btn { padding: 10px 15px; font-size: 14px; height: 100%; } #taskbar-apps { overflow-x: auto; /* Scroll horizontal if many apps */ gap: 2px; } .taskbar-item { padding: 10px; font-size: 14px; max-width: 100px; height: 100%; box-sizing: border-box; display: flex; align-items: center; } #clock { font-size: 12px; padding: 0 10px; } /* Start Menu */ #start-menu { bottom: 52px; /* Above taller taskbar */ width: 80%; left: 10px; right: auto; } .start-list li { padding: 15px; /* Larger touch targets */ font-size: 16px; } /* Terminal & Content Tweaks */ .terminal-input { /* MUST stay >= 16px: iOS Safari force-zooms the page when focusing any input with a smaller font size */ font-size: 16px; } .about-name { font-size: 1.4rem; } .glitch-image-wrapper { width: 200px; height: 200px; } /* Works list: let long filenames wrap instead of squeezing the description column off screen */ .works-name { white-space: normal; word-break: break-word; } .works-table-header th, .works-row td { padding: 8px 6px; } /* TypeRacer header wraps on narrow screens instead of overflowing */ .tr-header { flex-wrap: wrap; gap: 4px 12px; font-size: 1rem; } .tr-text-display { font-size: 1.05rem; padding: 14px; } .tr-result-title { font-size: 2.2rem; } /* Palette controls: tighter footprint on small screens */ #bg-controls { right: 10px; bottom: 60px; gap: 9px; padding: 8px 12px; } } /* Very narrow phones: shrink desktop icons so 2 columns always fit */ @media (max-width: 380px) { .desktop-icon { width: 60px; margin: 2px; } .icon-img { width: 36px; height: 36px; font-size: 12px; } .icon-label { font-size: 11px; } .about-container { padding: 14px; } .games-launcher, .work-detail { padding: 14px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } /* --- Background Drawing --- */ #bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* Low z-index */ pointer-events: auto; } #bg-controls { position: fixed; bottom: 60px; /* Increased to hover above taskbar */ right: 20px; display: flex; gap: 12px; z-index: 5; /* Below desktop (10) so windows cover it */ background: var(--controls-bg); padding: 10px 15px; /* Increased size ~10% */ border: 1px solid var(--text-dim); border-radius: 9px; align-items: center; box-shadow: 0 0 10px var(--accent-glow-soft); } .color-btn { width: 24px; /* Increased from 20px */ height: 24px; /* Increased from 20px */ border-radius: 50%; border: 2px solid var(--chip-border); cursor: pointer; transition: all 0.2s; } .color-btn:hover { transform: scale(1.2); border-color: var(--chip-border-active); } .color-btn.active { border-color: var(--chip-border-active); box-shadow: 0 0 8px currentColor; transform: scale(1.1); } #bg-clear-btn { background: transparent; border: 1px solid var(--error-color); color: var(--error-color); font-family: var(--font-mono); font-size: 13px; /* Increased from 11px */ cursor: pointer; padding: 5px 10px; /* Increased padding */ margin-left: 6px; text-transform: uppercase; font-weight: bold; transition: all 0.2s; } #bg-clear-btn:hover { background: var(--error-color); color: #fff; box-shadow: 0 0 5px var(--error-color); }