/* ========================================================= PORTFOLIO OS v1.3 — Shubham Mohan Prakash A retro-computing-inspired desktop shell — not a Windows 95 clone. Premium muted palette, soft bevels, mixed pixel/modern type. ========================================================= */ :root{ --face: #ffffff; --face-dark: #c6cad4; --face-darker: #a7acbb; --face-light: #ffffff; --face-lighter: #ffffff; --titlebar: #000080; --titlebar-inactive: #4a5164; --desktop-bg: #0a0e18; --frame-titlebar: #000080; --dashboard-bg: #000000; --accent-blue: #2f6fed; --accent-ai: #8b5cf6; --accent-warning: #f59e0b; --accent-success: #22c55e; --accent-text-on-light: #1760f1; --accent-text-on-dark: #5a8ef5; --accent-text: var(--accent-text-on-light); --accent-solid: var(--accent-text-on-light); --success-text-on-light: #0e7233; --success-text-on-dark: #1acd5c; --success-text: var(--success-text-on-light); --surface: #ffffff; --surface-text-muted: #555555; --text: #14161b; --link: #2f6fed; --font: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-logo: "Press Start 2P", monospace; --font-pixel: "Silkscreen", monospace; --font-terminal: "IBM Plex Mono", monospace; --mono: "IBM Plex Mono", "Courier New", Courier, monospace; --taskbar-h: 40px; --cursor-arrow: url("images/cursors/arrow.cur") 0 0, auto; --cursor-hand: url("images/cursors/hand.cur") 9 5, pointer; /* ---------- TYPE SCALE ---------- Base was 12.5px, with most UI/body text sitting 9-13px - below the ~16px baseline browsers and accessibility guidance treat as the comfortable reading minimum, which made longer text (About Me, testimonials, case studies) tiring to read. Every font-size in this file was audited and bumped to the nearest step below - tiny meta/label text got the biggest relative bump since that's what was least legible; large display type got a smaller proportional bump since size was never the problem there. html/body's base now reads at --fs-base (16px), the standard readable default, instead of 12.5px. */ --fs-2xs: 12px; /* smallest meta: tray clock date, tiny chip labels */ --fs-xs: 13px; /* captions, timestamps, secondary meta */ --fs-sm: 14px; /* small UI text: buttons, status bar, list rows */ --fs-base:16px; /* default body copy - html/body base */ --fs-md: 17px; /* emphasized body text, testimonial quotes */ --fs-lg: 19px; /* subheadings, window titles */ --fs-xl: 20px; /* section headings */ --fs-2xl: 22px; /* prominent numbers/stats */ --fs-3xl: 34px; /* type-scale sample / display */ --fs-4xl: 48px; /* screensaver clock */ } /* ---------- COLOR THEMES (Personalize panel) ---------- Same structure as :root — only the palette values change. Applied via [data-theme] on . "classic-blue" is the default (:root) values. */ [data-theme="midnight-navy"]{ --face: #ffffff; --face-dark: #b8bdcc; --face-darker: #8f96aa; --face-light: #ffffff; --face-lighter: #ffffff; --titlebar: #0c1230; --titlebar-inactive: #34394a; --frame-titlebar: #0c1230; --desktop-bg: #05070f; --dashboard-bg: #000000; --accent-blue: #4c5eea; --accent-text-on-light: #4256f2; --accent-text-on-dark: #7b89f3; --text: #10121a; } [data-theme="forest-green"]{ --face: #ffffff; --face-dark: #bdccc0; --face-darker: #95aa9c; --face-light: #ffffff; --face-lighter: #ffffff; --titlebar: #123c26; --titlebar-inactive: #3a453d; --frame-titlebar: #123c26; --desktop-bg: #081711; --dashboard-bg: #000000; --accent-blue: #1f9d55; --accent-text-on-light: #157940; --accent-text-on-dark: #1da457; --text: #101a13; } [data-theme="monochrome"]{ --face: #ffffff; --face-dark: #bdbdbd; --face-darker: #969696; --face-light: #ffffff; --face-lighter: #ffffff; --titlebar: #262626; --titlebar-inactive: #474747; --frame-titlebar: #262626; --desktop-bg: #101010; --dashboard-bg: #000000; --accent-blue: #5c5c5c; --accent-text-on-light: #5c5c5c; --accent-text-on-dark: #8f8f8f; --text: #111111; } [data-theme="retro-amber"]{ --face: #ffffff; --face-dark: #ccbfa6; --face-darker: #a8987a; --face-light: #fffaf0; --face-lighter: #fffaf0; --titlebar: #5c3410; --titlebar-inactive: #4a3c2c; --frame-titlebar: #5c3410; --desktop-bg: #140b03; --dashboard-bg: #000000; --accent-blue: #c1660f; --accent-text-on-light: #a45409; --accent-text-on-dark: #de720c; --text: #1c1206; } /* ---------- DARK MODE (separate axis — combines with any color theme above) ---------- */ [data-mode="dark"]{ --face: #1c2029; --face-dark: #0e1116; --face-darker: #05070a; --face-light: #2a2f3a; --face-lighter: #343a47; --dashboard-bg: #12151b; --surface: #242832; --surface-text-muted: #9aa0ad; --accent-text: var(--accent-text-on-dark); --success-text: var(--success-text-on-dark); --text: #e7e9f0; --desktop-bg: #05060a; } [data-mode="dark"] .win-input, [data-mode="dark"] .win-select, [data-mode="dark"] .win-textarea{ color: var(--text); } [data-mode="dark"] .explorer-item .thumb img.icon-img{ filter: brightness(1); } /* brief cross-fade dip during a theme swap (values change instantly underneath) */ .theme-swapping .dashboard, .theme-swapping .desktop::before, .theme-swapping .desktop::after{ transition: opacity .22s ease; opacity: .35; } *, *::before, *::after{ box-sizing: border-box; } html, body{ margin: 0; width: 100%; height: 100%; overflow: hidden; font-family: var(--font); font-size: var(--fs-base); color: var(--text); -webkit-font-smoothing: antialiased; cursor: var(--cursor-arrow); } img{ display: block; -ms-interpolation-mode: nearest-neighbor; } button{ font-family: inherit; font-size: inherit; color: inherit; cursor: var(--cursor-hand); } a{ cursor: var(--cursor-hand); } ul{ margin: 0; padding: 0; list-style: none; } ::selection{ background: var(--accent-solid); color: #fff; } /* ---------- bevels (soft, premium — not stark black/white) ---------- */ .bevel-out{ border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-dark); } .bevel-in{ border: 1px solid; border-color: var(--face-dark) var(--face-lighter) var(--face-lighter) var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker), inset -1px -1px 0 var(--face-light); } /* ---------- DESKTOP / FRAME ---------- */ .desktop{ position: relative; width: 100vw; height: 100vh; background: var(--desktop-bg); padding: 0 0 var(--taskbar-h) 0; overflow: hidden; user-select: none; } .desktop::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; } .desktop::after{ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .info-list{ margin: 0; display: flex; flex-direction: column; gap: 8px; } .info-list > div{ display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } .info-list dt{ color: var(--surface-text-muted); } .info-list dd{ margin: 0; font-weight: 600; text-align: right; } .about2-facts{ margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--face-dark); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 16px; } .about2-facts > div{ display: flex; justify-content: space-between; gap: 10px; } /* .nav-btn is also referenced as a documented pattern inside the Design System Explorer */ .nav-btn{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; font-size: 15px; text-align: left; background: var(--face); border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-dark); } .nav-btn:active{ border-color: var(--face-dark) var(--face-lighter) var(--face-lighter) var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); } .nav-btn img{ width: 18px; height: 18px; } /* ---------- DASHBOARD (wallpaper + desktop icons + floating windows) ---------- Wallpaper loads grayscale, then eases to full color over several seconds — slow enough that the shift isn't something a viewer consciously catches. */ .dashboard{ position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--dashboard-bg); } .wallpaper{ position: absolute; inset: 0; background: url("images/wallpapers/desktop.png?v=2") center/cover no-repeat; pointer-events: none; filter: grayscale(1); transition: filter 6s linear; } .wallpaper.wallpaper-color-in{ filter: grayscale(0); } .windows-layer{ position: absolute; inset: 0; z-index: 2; overflow: auto; pointer-events: none; } .windows-layer > .window{ pointer-events: auto; } .desktop-icons{ position: absolute; inset: 0; z-index: 1; pointer-events: auto; } .desktop-icon{ position: absolute; width: 96px; height: 112px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 4px; background: none; border: 1px solid transparent; text-align: center; cursor: var(--cursor-hand); touch-action: none; transition: background .1s ease, border-color .1s ease; } .desktop-icon img{ width: 46px; height: 46px; filter: drop-shadow(1px 2px 2px rgba(0,0,0,.5)); -webkit-user-drag: none; user-drag: none; pointer-events: none; image-rendering: pixelated; image-rendering: -moz-crisp-edges; } .desktop-icon span{ font-family: var(--font-pixel); font-size: 14px; color: #fff; line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,.85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* Flex items default to a min-width equal to their content's unbroken width, so a single long word like "TESTIMONIALS" was stretching this span (and visibly spilling past the icon's own bounds - most obvious once the icon had a hover/selected background box to spill past) instead of wrapping. Constrain it back to the icon's width and allow mid-word breaks. */ width: 100%; min-width: 0; word-break: break-word; overflow-wrap: anywhere; } /* Hover/press feedback so icons don't read as static/dead - scoped to real pointer devices so a tap on touch doesn't leave a "stuck" hover behind. */ @media (hover: hover) and (pointer: fine) { .desktop-icon:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); } } .desktop-icon:active{ background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.4); } .desktop-icon.selected{ background: rgba(47,111,237,.35); border-color: rgba(47,111,237,.6); } .desktop-icon.selected:active{ background: rgba(47,111,237,.5); } /* Nudge shown after a single click that isn't followed by a second one in time - most visitors expect a single click to open things on the web, but this is a desktop metaphor that intentionally keeps double-click. Rather than silently doing nothing on that first click, this explains what to do next. */ .icon-nudge{ position: fixed; z-index: 4850; transform: translateY(6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; background: var(--face); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker), 2px 2px 0 rgba(0,0,0,.25); padding: 6px 10px; font-size: 13px; line-height: 1.3; text-align: center; color: var(--text); white-space: nowrap; } .icon-nudge.show{ opacity: 1; visibility: visible; transform: translateY(0); } /* ---------- WINDOW ---------- */ .window{ position: absolute; display: flex; flex-direction: column; background: var(--face); min-width: 260px; min-height: 160px; border-radius: 0; overflow: hidden; border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-dark), 3px 4px 0 rgba(0,0,0,.22); } .window.minimized{ display: none; } .window.maximized{ inset: 0 !important; width: auto !important; height: auto !important; border-radius: 0; } .title-bar{ flex: 0 0 auto; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 6px; background: var(--titlebar); color: #fff; cursor: var(--cursor-arrow); } .window:not(.active) .title-bar{ background: var(--titlebar-inactive); } .title-bar img{ width: 14px; height: 14px; } .title-bar span{ flex: 1; font-family: var(--font-pixel); font-size: 17px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .title-bar-btns{ display: flex; gap: 2px; } .tb-btn{ position: relative; width: 20px; height: 18px; background: var(--face); color: var(--text); font-size: 17px; line-height: 1; border-radius: 0; display: flex; align-items: center; justify-content: center; padding: 0; font-weight: 700; border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); } .tb-btn:active{ border-color: var(--face-dark) var(--face-lighter) var(--face-lighter) var(--face-dark); } /* Real pixel-art glyphs (jdan/98.css, MIT - see images/winicons/controls/README.txt), applied as CSS masks so a single solid-shape SVG can be recolored per button via background-color instead of needing a separately-tinted file for each state/theme. The underlying text char (_, □, ×, ←) stays in the DOM as the accessible name / no-CSS fallback - ::before just paints over it with the real icon. */ .tb-btn[data-act], .tb-btn.tb-back{ color: transparent; } .tb-btn[data-act]::before, .tb-btn.tb-back::before{ content: ""; position: absolute; left: 50%; top: 50%; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } .tb-btn[data-act="min"]::before{ width: 8px; height: 3px; transform: translate(-50%, -50%); mask-image: url("images/winicons/controls/minimize.svg"); -webkit-mask-image: url("images/winicons/controls/minimize.svg"); } .tb-btn[data-act="max"]::before{ width: 10px; height: 10px; transform: translate(-50%, -50%); mask-image: url("images/winicons/controls/maximize.svg"); -webkit-mask-image: url("images/winicons/controls/maximize.svg"); } .tb-btn[data-act="close"]::before{ width: 9px; height: 8px; transform: translate(-50%, -50%); mask-image: url("images/winicons/controls/close.svg"); -webkit-mask-image: url("images/winicons/controls/close.svg"); } .tb-btn.tb-back::before{ width: 5px; height: 9px; transform: translate(-50%, -50%); background: var(--text); mask-image: url("images/winicons/controls/back.svg"); -webkit-mask-image: url("images/winicons/controls/back.svg"); } /* Window controls: Windows' square shape/position (top-right, _ □ ×), macOS' traffic-light colors - a deliberate crossover of both OSes rather than a clone of either. Only the three title-bar window-chrome buttons get this; browser-toolbar buttons (back/refresh) are plain .tb-btn with no data-act, so this attribute selector doesn't reach them. */ .tb-btn[data-act="min"]{ background: #febc2e; border-color: #fff1c2 #8a6000 #8a6000 #fff1c2; } .tb-btn[data-act="min"]::before{ background: #6b4a00; } .tb-btn[data-act="max"]{ background: #28c840; border-color: #b9f6c6 #0e5c1e #0e5c1e #b9f6c6; } .tb-btn[data-act="max"]::before{ background: #053b12; } .tb-btn[data-act="close"]{ background: #ff5f57; border-color: #ffd6d3 #8a1410 #8a1410 #ffd6d3; } .tb-btn[data-act="close"]::before{ background: #4a0400; } .tb-btn[data-act="min"]:active, .tb-btn[data-act="max"]:active, .tb-btn[data-act="close"]:active{ filter: brightness(0.85); } .window-path{ flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 13px; background: var(--surface); border-bottom: 1px solid var(--face-dark); overflow-x: auto; white-space: nowrap; } .path-seg{ background: none; border: none; padding: 0; font: inherit; color: var(--accent-text); cursor: var(--cursor-hand); text-decoration: none; } .path-seg:hover{ text-decoration: underline; } .path-seg.current{ color: var(--surface-text-muted); cursor: var(--cursor-arrow); } .path-seg.current:hover{ text-decoration: none; } .path-sep{ color: var(--surface-text-muted); } /* .desktop sets user-select:none for its own chrome (icons, drag handles) - re-enable it inside window content so visitors can actually select/copy real text (bio, email, quotes) instead of everything on the page being locked like desktop-icon labels. */ .window-content{ position: relative; flex: 1; min-height: 0; overflow: auto; background: var(--face); padding: 10px; user-select: text; } .window-content.flush{ padding: 0; } .window-content.paper{ background: var(--surface); } .status-bar{ flex: 0 0 auto; display: flex; gap: 4px; padding: 3px 6px; font-size: 14px; font-family: var(--font-pixel); } .status-bar span{ flex: 1; } .resize-handle{ position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; background: repeating-linear-gradient(135deg, transparent 0 2px, var(--face-dark) 2px 3px); } .resize-handle:hover{ background: repeating-linear-gradient(135deg, transparent 0 2px, var(--accent-blue) 2px 3px); } /* ---------- WIN BUTTON ---------- */ .win-btn{ background: var(--face); padding: 5px 16px; font-size: 15px; font-family: var(--font-pixel); min-width: 76px; border-radius: 0; border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-dark); } .win-btn:active{ border-color: var(--face-dark) var(--face-lighter) var(--face-lighter) var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker), inset -1px -1px 0 var(--face-light); } .win-btn:focus{ outline: 1px dotted var(--accent-blue); outline-offset: -4px; } .win-btn.primary{ font-weight: 700; background: var(--accent-solid); color: #fff; border-color: #1c4fc7; } .win-btn.primary:hover{ background: #4a82f0; } /* generic form controls */ .win-input, .win-select, .win-textarea{ font-family: var(--font); font-size: 15px; padding: 5px 7px; background: var(--surface); border-radius: 0; border: 1px solid; border-color: var(--face-dark) var(--face-lighter) var(--face-lighter) var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); width: 100%; } .win-textarea{ resize: vertical; font-family: var(--font); } .field-invalid{ outline: 2px solid #d33; outline-offset: -1px; } /* ---------- EXPLORER (folders) ---------- */ .explorer-toolbar{ flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: var(--face); border-bottom: 1px solid var(--face-dark); } .explorer-path{ flex: 1; display: flex; align-items: center; gap: 6px; padding: 3px 6px; font-size: 14px; background: var(--surface); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); } /* ---------- IN-APP BROWSER (case studies open inside the OS) ---------- */ .browser-layout{ position: relative; display: flex; flex-direction: column; height: 100%; } .browser-toolbar{ flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: var(--face); border-bottom: 1px solid var(--face-dark); } .browser-address{ flex: 1; display: flex; align-items: center; padding: 3px 8px; font-size: 14px; background: var(--surface); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--surface-text-muted); } .browser-frame{ flex: 1; width: 100%; border: none; background: #fff; } .browser-loading{ position: absolute; left: 0; right: 0; top: 33px; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--face); transition: opacity .2s ease, visibility .2s ease; } .browser-loading .progress-track{ width: 220px; } .browser-loading p{ margin: 0; font-size: 14px; color: var(--surface-text-muted); } .browser-loading.hide{ opacity: 0; visibility: hidden; pointer-events: none; } .browser-blocked{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; background: var(--face); } .browser-blocked img{ width: 36px; height: 36px; margin-bottom: 4px; } .browser-blocked p{ margin: 0; max-width: 360px; font-size: 15px; line-height: 1.5; } .browser-blocked-sub{ font-size: 14px; color: var(--surface-text-muted); } .browser-blocked .win-btn{ margin-top: 10px; } .explorer-grid{ display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 4px; padding: 10px; background: var(--surface); height: 100%; } .explorer-item{ width: 92px; flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 4px; border: 1px dotted transparent; cursor: var(--cursor-arrow); } .explorer-item:hover{ border-color: var(--accent-blue); } .explorer-item .thumb{ width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 0; background: var(--face); border: 1px solid var(--face-dark); overflow: hidden; flex: 0 0 auto; } .explorer-item .thumb img{ width: 100%; height: 100%; object-fit: cover; } .explorer-item .thumb img.icon-img{ width: 34px; height: 34px; object-fit: contain; } /* width:100%/min-width:0 so a single long unbroken word (e.g. "Portfolio.html", no space to wrap at) is forced to break within the 92px cell instead of growing the flex item past it - without this a flex child defaults to content's natural (unbreakable) width, which pushed the label outside its box and off-center. */ .explorer-item span{ width: 100%; min-width: 0; font-family: var(--font-pixel); font-size: 16px; text-align: center; line-height: 1.3; word-wrap: break-word; overflow-wrap: break-word; } /* ---------- NOTEPAD ---------- */ .notepad-text{ font-family: var(--mono); font-size: 16px; line-height: 1.65; white-space: pre-wrap; color: var(--text); } .notepad-text h2{ font-size: 17px; margin: 0 0 6px; } /* ---------- TESTIMONIALS (card grid, auto-scrolling) ---------- */ .testimonial-panel{ height: 100%; display: flex; flex-direction: column; } .testimonial-header{ flex: 0 0 auto; padding: 14px 14px 10px; border-bottom: 1px solid var(--face-dark); } /* Title and toggle share one row - title on the left, toggle pushed to the right via margin-left:auto - rather than each getting its own line. */ .testimonial-header-row{ display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .testimonial-header-title{ display: flex; align-items: center; gap: 8px; } .testi-autoscroll-toggle{ margin-left: auto; } .testimonial-header h2{ margin: 0; font-size: 18px; } .testimonial-header-icon{ width: 20px; height: 20px; image-rendering: pixelated; image-rendering: -moz-crisp-edges; } .testimonial-header p{ margin: 0; font-size: 14px; color: var(--surface-text-muted); } .testi-autoscroll-toggle{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--face); border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-dark); font-family: var(--font-pixel); font-size: 11px; letter-spacing: .02em; color: var(--text); } .testi-autoscroll-icon{ width: 12px; height: 12px; color: var(--accent-text); } .testi-autoscroll-icon svg{ width: 100%; height: 100%; } .testi-autoscroll-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--success-text); flex: 0 0 auto; } .testi-autoscroll-toggle.is-off .testi-autoscroll-dot{ background: var(--surface-text-muted); } .testi-autoscroll-toggle.is-off .testi-autoscroll-icon{ color: var(--surface-text-muted); } .testi-grid-viewport{ flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; background: var(--surface); padding: 14px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(180deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); scrollbar-width: none; -ms-overflow-style: none; /* scroll is JS-driven (auto-scroll), no visible scrollbar */ } .testi-grid-viewport::-webkit-scrollbar{ display: none; } .testi-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-content: start; } .testi-card{ display: flex; flex-direction: column; padding: 18px; background: var(--face); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); } .testi-quote-row{ display: flex; gap: 12px; align-items: flex-start; } .testi-avatar{ width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--face-dark); flex: 0 0 auto; } .testi-quote{ margin: 0; font-size: 14px; line-height: 1.5; } .testi-quote-mark{ font-family: var(--font-pixel); font-size: 17px; color: var(--accent-text); margin-right: 2px; } .testi-verbatim{ align-self: flex-start; margin: 8px 0 10px; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; font-size: 13px; } .testi-name{ margin: 0; font-family: var(--font-pixel); font-size: 13px; letter-spacing: .01em; } .testi-role{ margin: 2px 0 0; font-size: 13px; color: var(--surface-text-muted); } .testi-company{ margin: 0; font-size: 13px; color: var(--surface-text-muted); } /* ---------- LOGO TICKER (Worked With / Featured On — About Me window) ---------- */ .logo-ticker-viewport{ overflow: hidden; position: relative; padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); } .logo-ticker-track{ display: flex; align-items: center; gap: 36px; width: max-content; animation: logo-ticker-scroll 40s linear infinite; } .logo-ticker-viewport:hover .logo-ticker-track{ animation-play-state: paused; } @keyframes logo-ticker-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } /* Client/press logos are white-on-transparent — invert so they read on the light theme's white --face panel; dark mode already shows them correctly, so cancel the invert there. */ .logo-ticker-track img{ height: 22px; width: auto; max-width: 110px; object-fit: contain; opacity: .8; flex: 0 0 auto; filter: invert(1); } [data-mode="dark"] .logo-ticker-track img{ filter: none; opacity: .85; } /* Full-color press logos (e.g. 7NEWS red mark) must never be inverted, in either mode. */ .logo-ticker-track img[alt="7NEWS"]{ filter: none !important; opacity: .95; } /* ---------- ABOUT window ---------- */ /* Hero photo with name/role/availability overlaid on a flat solid bar — like a physical name-badge card rather than a photo-plus-textblock split. */ .about-hero{ position: relative; overflow: hidden; border: 1px solid var(--face-dark); cursor: var(--cursor-hand); } .about-hero-img{ display: block; width: 100%; height: 280px; object-fit: cover; object-position: center 20%; transition: transform .2s; } .about-hero:hover .about-hero-img{ transform: scale(1.03); } .about-hero-overlay{ position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; background: rgba(10,14,24,.88); border-top: 2px solid var(--accent-blue); } .about-hero-overlay .about2-name{ color: #fff; } .about-hero-overlay .about2-role-chip{ color: #d7dbe6; } .about-hero-overlay .about2-avail-badge{ color: #fff; } .about-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .win-panel{ background: var(--surface); border: 1px solid var(--face-dark); border-radius: 0; box-shadow: inset 1px 1px 0 var(--face-darker); padding: 10px; } .win-panel h3{ margin: 0 0 8px; font-size: 16px; border-bottom: 1px solid var(--face-dark); padding-bottom: 4px; } .win-panel ul{ display: flex; flex-direction: column; gap: 5px; } .win-panel li::before{ content: "› "; } .stats-table{ width: 100%; border-collapse: collapse; margin-top: 14px; } .stats-table td{ border: 1px solid var(--face-dark); padding: 4px 8px; font-size: 14px; } .stats-table td.val{ font-weight: 700; width: 60px; } /* ---------- ABOUT ME CARD (redesigned) ---------- */ .about2-header-row{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 8px; } .about2-name{ margin: 0; font-family: var(--font-pixel); font-size: 22px; line-height: 1.3; letter-spacing: .01em; color: var(--accent-text); padding-bottom: 4px; border-bottom: 2px solid var(--accent-blue); display: inline-block; } .about2-role-chip{ font-size: 14px; font-weight: 600; color: var(--surface-text-muted); background: none; border: none; padding: 3px 0; } .about2-avail-badge{ display: inline-flex; align-items: center; gap: 7px; font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--text); background: none; border: none; box-shadow: none; padding: 4px 0; cursor: var(--cursor-hand); transition: opacity .12s; } .about2-avail-badge:hover{ opacity: .75; } .avail-cta-icon{ width: 15px; height: 15px; filter: brightness(0) invert(1); } .avail-dot{ width: 8px; height: 8px; border-radius: 50%; background: #2fbf6e; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(47,191,110,.25); animation: avail-pulse 2s ease-in-out infinite; } @keyframes avail-pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .5; } } .about2-tagline{ margin: 0; font-size: 15px; color: var(--surface-text-muted); line-height: 1.5; font-style: italic; } .about2-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 16px; } .about2-stats > div{ background: var(--surface); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); padding: 8px; text-align: center; } .about2-stats strong{ display: block; font-family: var(--font-pixel); font-size: 19px; color: var(--accent-text); } .about2-stats span{ font-size: 12px; color: var(--surface-text-muted); text-transform: uppercase; } .about2-stat-press{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--face-dark); } .about2-stat-press-label{ font-size: 12px; color: var(--surface-text-muted); text-transform: uppercase; } .about2-stat-press-logos{ display: flex; align-items: center; gap: 8px; } .about2-stat-press-logos img{ height: 16px; width: auto; max-width: 52px; object-fit: contain; opacity: .85; filter: invert(1); } [data-mode="dark"] .about2-stat-press-logos img{ filter: none; } .about2-stat-press-logos img[alt="7NEWS"]{ filter: none !important; } .about2-quote-section{ display: flex; align-items: center; gap: 12px; } .about2-quote-gif{ width: 90px; height: 90px; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); } .about2-quote{ margin: 0; padding: 10px 14px; background: var(--surface); border-left: 3px solid var(--accent-blue); font-size: 15px; font-style: italic; line-height: 1.6; color: var(--text); flex: 1; min-width: 0; } .about2-quote span{ display: block; margin-top: 6px; font-style: normal; font-size: 14px; color: var(--surface-text-muted); } /* Retro terminal-style sign-off — gives the window a deliberate "end of file" close instead of just trailing off after the last section. */ .about2-outro{ margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--face-dark); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .about2-outro-eof{ margin: 0; display: flex; align-items: center; gap: 6px; font-family: var(--font-pixel); font-size: 13px; letter-spacing: .04em; color: var(--surface-text-muted); } .about2-outro-cursor{ display: inline-block; width: 7px; height: 13px; background: var(--accent-blue); animation: about-outro-blink 1s steps(1) infinite; } @keyframes about-outro-blink{ 50%{ opacity: 0; } } .about2-outro-cta{ margin: 0; font-size: 14px; color: var(--surface-text-muted); } .about2-outro-cta button{ background: none; border: none; padding: 0; font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; cursor: var(--cursor-hand); } .about2-outro-top{ margin-top: 4px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); color: var(--text); font-size: 16px; cursor: var(--cursor-hand); } .about2-outro-top:hover{ background: var(--face); } /* ---------- PROJECT window ---------- */ .project-window img.shot{ width: 100%; border: 1px solid var(--face-dark); margin-bottom: 10px; } .project-metrics-row{ display: flex; gap: 16px; margin: 10px 0; flex-wrap: wrap; } .project-metrics-row div{ background: var(--surface); border: 1px solid var(--face-dark); border-radius: 0; padding: 6px 10px; } .project-metrics-row strong{ display: block; font-size: 17px; } .project-metrics-row span{ font-size: 13px; color: var(--surface-text-muted); text-transform: uppercase; } /* ---------- DIALOG (contact wizard) ---------- */ .dialog-body{ display: flex; gap: 14px; align-items: flex-start; padding: 14px 10px 4px; } .dialog-body img{ width: 32px; height: 32px; flex: 0 0 auto; } .dialog-body--center{ align-items: center; justify-content: center; text-align: center; flex-direction: column; padding: 24px 10px 4px; } .dialog-body--center img{ width: 40px; height: 40px; } .dialog-buttons{ display: flex; gap: 8px; justify-content: flex-end; padding: 14px 10px 10px; } .progress-track{ height: 20px; background: var(--surface); border: 1px solid var(--face-dark); border-radius: 0; box-shadow: inset 1px 1px 0 var(--face-darker); padding: 2px; margin: 10px 0; } .progress-fill{ height: 100%; width: 0%; background: var(--accent-blue); border-radius: 0; background-image: repeating-linear-gradient(90deg, #4a82f0 0 8px, var(--accent-blue) 8px 16px); transition: width .25s linear; } /* ---------- DASHBOARD CARDS (About / Skills / Work / Contact) ---------- */ .icon-tile{ width: 44px; height: 44px; flex: 0 0 auto; } .tools-strip-label{ font-size: 14px; color: var(--surface-text-muted); margin: 4px 0 8px; border-top: 1px solid var(--face-dark); padding-top: 10px; } /* ---------- TERMINAL ---------- */ .terminal{ height: 100%; display: flex; flex-direction: column; background: #0b0e14; color: #7ce8a0; font-family: var(--font-terminal); font-size: 19px; padding: 10px 12px; cursor: text; } .terminal-output{ flex: 1; overflow-y: auto; } .term-line{ white-space: pre-wrap; line-height: 1.3; } .term-line.echo{ color: #8b93a8; } .term-line.error{ color: var(--accent-warning); } .terminal-input-row{ display: flex; align-items: center; gap: 6px; margin-top: 2px; } .terminal-prompt{ color: #7ce8a0; white-space: nowrap; } .terminal-input{ flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #eafff0; font-family: var(--font-terminal); font-size: 19px; caret-color: #7ce8a0; } /* Each category is a self-sized block; several sit side by side per row and wrap onto new rows as the window narrows/widens, instead of one category stretching alone across the full width. */ .tools-groups{ display: flex; flex-wrap: wrap; gap: 18px 28px; } .tools-group{ flex: 0 1 auto; } .tools-group-label{ font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--surface-text-muted); margin: 0 0 8px; } .tools-strip{ display: flex; flex-wrap: wrap; gap: 12px; max-width: 260px; } .tool-chip{ display: flex; flex-direction: column; align-items: center; gap: 4px; width: 58px; text-align: center; } .tool-chip img{ width: 32px; height: 32px; object-fit: contain; background: var(--surface); border: 1px solid var(--face-dark); padding: 4px; } .tool-chip span{ font-size: 12px; line-height: 1.25; color: var(--surface-text-muted); } .skill-groups{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; } .skill-group{ display: flex; gap: 10px; align-items: flex-start; } .skill-group img{ width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; } .skill-group strong{ display: block; font-size: 14px; } .skill-group span{ font-size: 13px; color: var(--surface-text-muted); line-height: 1.5; } /* ---------- WORK WINDOW (Spotlight + Collections) ---------- */ /* Grid/list view switcher - a classic explorer-toolbar pattern. Applies to both grids at once (one visual mode for the whole window, not per-section) and persists across visits like the other UI preferences (theme, screensaver). */ .work-toolbar{ display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 10px; } .work-view-btn{ width: 28px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--face); border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-dark); color: var(--text); } .work-view-btn svg{ width: 15px; height: 15px; display: block; } .work-view-btn.active{ background: var(--accent-solid); color: #fff; border-color: var(--face-dark) var(--face-lighter) var(--face-lighter) var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker), inset -1px -1px 0 var(--face-light); } .work-section-header{ margin-bottom: 12px; display: flex; align-items: flex-start; gap: 8px; } .work-section-header-icon{ flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; } .work-section-header-icon img{ width: 100%; height: 100%; image-rendering: pixelated; image-rendering: -moz-crisp-edges; } .work-section-header h3{ margin: 0 0 4px; font-family: var(--font-pixel); font-size: 20px; } .work-section-header p{ margin: 0; font-size: 14px; color: var(--surface-text-muted); } .work-section-header--gap{ margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--face-dark); } /* Fixed 6-slot board, one row — fewer real projects than that just leaves the remaining slots empty instead of stretching the real cards to fill the row. Spotlight is the higher-priority section, so it gets the bigger minimum thumbnail size (wraps onto more rows before shrinking) of the two grids. */ .spot-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } /* Details sit permanently below the image instead of a hover-reveal overlay — :hover doesn't reliably "un-hover" on touch screens, which was leaving the old overlay stuck visible on every card at once. This works identically on every input type by construction, nothing to detect or branch on. */ .spot-card{ display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--face-dark); background: var(--surface); cursor: var(--cursor-hand); } .spot-card--empty{ border: none; background: transparent; cursor: default; } .spot-thumb{ width: 100%; aspect-ratio: 4/3; overflow: hidden; } .spot-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.2,.8,.2,1); } .spot-card:hover .spot-thumb img, .spot-card:focus-visible .spot-thumb img{ transform: scale(1.06); } .spot-info{ padding: 10px 12px 12px; border-top: 2px solid var(--accent-blue); } .spot-info-name{ margin: 0 0 6px; font-family: var(--font-pixel); font-size: 16px; } .spot-info-meta{ margin: 0; font-size: 13px; color: var(--surface-text-muted); } .spot-info-meta strong{ color: var(--text); margin-right: 4px; } .spot-info-cta{ display: inline-block; margin-top: 8px; padding: 5px 14px; font-family: var(--font-pixel); font-size: 13px; font-weight: 700; background: var(--accent-solid); color: #fff; border: 1px solid #1c4fc7; border-radius: 0; box-shadow: inset 1px 1px 0 rgba(255,255,255,.35), inset -1px -1px 0 rgba(0,0,0,.25); transition: background .15s ease; } .spot-card:hover .spot-info-cta, .spot-card:focus-visible .spot-info-cta{ background: #4a82f0; } /* Fixed 9-slot board, one row — same logic as Spotlight above. Collections now reuses the exact .spot-card markup/styling above for full visual parity. */ .collections-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } /* List view - overrides the inline grid-template-columns fitGridColumns() sets, compact horizontal rows instead of the card grid. Empty placeholder slots make no sense as rows, so they're hidden rather than rendered as blank lines. */ .spot-grid.view-list, .collections-grid.view-list{ display: flex !important; flex-direction: column; gap: 6px; } .view-list .spot-card{ flex-direction: row; align-items: center; } .view-list .spot-card--empty{ display: none; } /* Same 4/3 aspect-ratio as grid view (not a squished custom ratio), and the row itself is pinned to exactly that height - the thumbnail drives the card's shape, not the other way around. The info block is condensed to fit that same height (name + one compact meta line, no CTA button - the whole row is already a click target) rather than letting verbose multi-line text force the row taller than its own thumbnail. */ .view-list .spot-thumb{ width: 96px; aspect-ratio: 4/3; height: auto; flex: 0 0 auto; } .view-list .spot-card{ height: 72px; } .view-list .spot-info{ flex: 1; min-width: 0; height: 100%; border-top: none; border-left: 2px solid var(--accent-blue); padding: 4px 10px; display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: hidden; } .view-list .spot-info-name{ margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .view-list .spot-info-meta{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .view-list .spot-info-meta:nth-of-type(3){ display: none; } /* keep Device, drop Industry - one meta line fits the compact row */ .view-list .spot-info-cta{ display: none; } /* the whole row is already the click target */ /* ---------- TASKBAR ---------- */ .taskbar{ position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); z-index: 5000; background: var(--face); display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-top: 1px solid var(--face-lighter); box-shadow: inset 0 1px 0 var(--face-light); } .start-btn{ display: flex; align-items: center; justify-content: center; height: 100%; width: 48px; border-radius: 0; background: var(--face); border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-dark); } .start-btn img{ width: 30px; height: 30px; } .start-btn.active{ border-color: var(--face-dark) var(--face-lighter) var(--face-lighter) var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker), inset -1px -1px 0 var(--face-light); } .taskbar-sep{ width: 2px; align-self: stretch; margin: 2px 2px; border-left: 1px solid var(--face-dark); border-right: 1px solid var(--face-lighter); } .taskbar-shortcut-btn{ width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: 0; } .taskbar-shortcut-btn img{ width: 20px; height: 20px; } .taskbar-shortcut-btn:active{ border-color: var(--face-dark) var(--face-lighter) var(--face-lighter) var(--face-dark); } .task-buttons{ flex: 1; display: flex; gap: 4px; height: 100%; align-items: center; overflow-x: auto; min-width: 40px; } .taskbar-tagline{ font-size: 13px; color: var(--surface-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; letter-spacing: .02em; } .task-btn{ display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; max-width: 160px; font-size: 15px; border-radius: 0; background: var(--face); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-dark); } .task-btn img{ width: 14px; height: 14px; flex: 0 0 auto; } .task-btn.active{ border-color: var(--face-dark) var(--face-lighter) var(--face-lighter) var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker), inset -1px -1px 0 var(--face-light); } .systray{ height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 0; border: 1px solid; border-color: var(--face-dark) var(--face-lighter) var(--face-lighter) var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); } .tray-clock{ display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .tray-clock #tray-clock-time{ font-size: 14px; font-weight: 600; } .tray-clock #tray-clock-date{ font-size: 13px; color: var(--surface-text-muted); } /* ---------- START MENU ---------- */ .start-menu{ position: fixed; left: 3px; bottom: calc(var(--taskbar-h) + 3px); width: 250px; max-height: 70vh; z-index: 5100; display: flex; background: var(--face); border-radius: 0; overflow: hidden; border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-dark), 6px 10px 28px rgba(10,14,24,.4); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .12s, transform .12s, visibility .12s; } .start-menu.open{ opacity: 1; visibility: visible; transform: translateY(0); } .start-menu-side{ writing-mode: vertical-rl; transform: rotate(180deg); background: var(--frame-titlebar); color: #fff; font-family: var(--font-logo); font-size: 13px; letter-spacing: 1px; padding: 10px 6px; flex: 0 0 auto; } .start-menu-items{ flex: 1; display: flex; flex-direction: column; padding: 3px; gap: 1px; overflow-y: auto; } .start-menu-item{ display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 16px; background: none; text-align: left; border-radius: 0; } .start-menu-item img{ width: 22px; height: 22px; } .start-menu-item:hover{ background: var(--accent-solid); color: #fff; } .start-menu-sep{ border-top: 1px solid var(--face-dark); border-bottom: 1px solid var(--face-lighter); margin: 3px 6px; } /* ---------- SHUTDOWN SCREEN ---------- */ .window.fading-out{ transition: opacity .3s ease; opacity: 0; pointer-events: none; } .shutdown-screen{ position: fixed; inset: 0; background: #000; color: #fff; z-index: 9000; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: var(--font); font-size: 19px; text-align: center; opacity: 0; visibility: hidden; transition: opacity .3s; } .shutdown-screen.show{ opacity: 1; visibility: visible; } .shutdown-msg{ line-height: 1.7; } .shutdown-hint{ display: block; margin-top: 12px; font-size: 14px; opacity: .55; } .shutdown-dots::after{ content: ""; animation: shutdown-dots 1.2s steps(4) infinite; } @keyframes shutdown-dots{ to{ content: "…"; } } .crt-line{ position: absolute; inset: 0; background: #dce8ff; box-shadow: 0 0 40px 8px rgba(220,232,255,.7); animation: crt-collapse .7s cubic-bezier(.4,0,.6,1) forwards; } @keyframes crt-collapse{ 0% { transform: scaleY(1) scaleX(1); opacity: 0; } 8% { opacity: 1; } 20% { transform: scaleY(1) scaleX(1); opacity: 1; } 60% { transform: scaleY(.004) scaleX(1); opacity: 1; } 85% { transform: scaleY(.004) scaleX(.02); opacity: 1; } 100% { transform: scaleY(.004) scaleX(.02); opacity: 0; } } /* ---------- ONBOARDING TOUR ---------- */ .tour-overlay{ position: fixed; inset: 0; z-index: 8800; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } .tour-overlay.show{ opacity: 1; visibility: visible; } .tour-spotlight{ position: relative; z-index: 8850; outline: 3px solid #ffd166; outline-offset: 3px; animation: tour-pulse 1.4s ease-in-out infinite; } @keyframes tour-pulse{ 0%, 100%{ outline-color: #ffd166; } 50%{ outline-color: #ff8a5c; } } .tour-box{ position: fixed; z-index: 8900; width: min(380px, 92vw); background: var(--face); border-radius: 0; overflow: hidden; border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-dark), 6px 10px 28px rgba(10,14,24,.4); transition: left .25s ease, top .25s ease; } .tour-box .title-bar span{ flex: 1; } .tour-box-body{ padding: 16px; } .tour-box-body h3{ margin: 0 0 8px; font-size: 17px; } .tour-box-body p{ margin: 0; font-size: 15px; line-height: 1.6; } .tour-footer{ display: flex; align-items: center; gap: 10px; padding: 10px 16px 14px; } .tour-dots{ display: flex; gap: 5px; flex: 1; } .tour-dots span{ width: 6px; height: 6px; border-radius: 50%; background: var(--face-dark); } .tour-dots span.active{ background: var(--accent-blue); } .tour-skip{ background: none; border: none; font-size: 14px; color: var(--surface-text-muted); text-decoration: underline; cursor: var(--cursor-hand); padding: 0; } /* ---------- DESIGN SYSTEM EXPLORER ---------- */ /* ---------- IN-WINDOW MINI NAV (Explorer-style windows only: My Computer, Work) ---------- */ .window-nav-layout{ display: flex; height: 100%; } .window-nav{ width: 148px; flex: 0 0 auto; background: var(--surface); border-right: 1px solid var(--face-dark); overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; } .mini-nav-btn{ display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 7px; font-size: 14px; text-align: left; background: none; border: 1px solid transparent; } .mini-nav-btn:hover{ background: var(--face); } .mini-nav-btn.active{ background: var(--face); border-color: var(--face-dark); font-weight: 700; } .mini-nav-btn img{ width: 16px; height: 16px; flex: 0 0 auto; } .window-nav-content{ flex: 1; min-width: 0; overflow-y: auto; } .window-nav-content.padded{ padding: 10px; } /* About-only sidebar extra (Quick Links) - appended after the shared mini-nav via openWindow's navExtra param, so Work/Testimonials are unaffected. margin-top:auto on the --bottom variant pushes it to the bottom of the sidebar regardless of how many mini-nav buttons sit above it. */ .about-side-box{ margin-top: 12px; padding: 8px; background: var(--surface); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); } .about-side-box--bottom{ margin-top: auto; } .about-side-box-title{ margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--surface-text-muted); } .about-side-link{ display: block; margin-top: 4px; font-size: 13px; color: var(--accent-text); text-decoration: none; } .about-side-link:hover{ text-decoration: underline; } /* ---------- ABOUT ME DASHBOARD ---------- */ .about-dashboard{ display: flex; flex-direction: column; gap: 14px; } .about-grid-row{ display: grid; gap: 14px; } .about-grid-2col{ grid-template-columns: 1fr 1fr; } .about-card{ min-width: 0; } .about-pullquote{ margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent-blue); background: var(--face); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--surface-text-muted); } .about-stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; } .about-stats-grid > div{ background: var(--face); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); padding: 8px; text-align: center; } .about-stats-grid strong{ display: block; font-family: var(--font-pixel); font-size: 19px; color: var(--accent-text); } .about-stats-grid span{ font-size: 12px; color: var(--surface-text-muted); text-transform: uppercase; } .about-mini-tiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .about-mini-tile{ display: flex; flex-direction: column; gap: 4px; padding: 10px; background: var(--surface); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); } .about-mini-tile img{ width: 20px; height: 20px; } .about-mini-tile strong{ font-size: 15px; } .about-mini-tile span{ font-size: 13px; color: var(--surface-text-muted); line-height: 1.4; } .ds-layout{ display: flex; height: 100%; } .ds-tree{ width: 180px; flex: 0 0 auto; background: var(--surface); border-right: 1px solid var(--face-dark); overflow-y: auto; padding: 6px; } .ds-tree-node{ display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-size: 14px; cursor: var(--cursor-hand); white-space: nowrap; } .ds-tree-node img{ width: 14px; height: 14px; flex: 0 0 auto; } .ds-tree-folder{ font-weight: 700; } .ds-tree-children{ padding-left: 16px; } .ds-tree-node:hover{ background: rgba(47,111,237,.12); } .ds-tree-node.active{ background: var(--accent-solid); color: #fff; } .ds-content{ flex: 1; min-width: 0; overflow-y: auto; padding: 16px; } .ds-panel-title{ margin: 0 0 10px; font-family: var(--font-pixel); font-size: 17px; } .ds-note{ margin: 8px 0 0; font-size: 13px; color: var(--surface-text-muted); } .ds-body-text{ margin: 0; font-size: 15px; line-height: 1.6; } .ds-swatch-row{ display: flex; flex-wrap: wrap; gap: 14px; } .ds-swatch-row div{ display: flex; flex-direction: column; align-items: center; gap: 4px; width: 74px; } .ds-swatch{ width: 100%; height: 40px; border: 1px solid var(--face-dark); } .ds-swatch-row strong{ font-size: 13px; text-align: center; } .ds-swatch-row span{ font-size: 12px; color: var(--surface-text-muted); } .ds-type-sample{ margin: 4px 0; font-size: 34px; } .ds-spacing-row{ display: flex; flex-direction: column; gap: 6px; } .ds-spacing-item{ display: flex; align-items: center; gap: 10px; } .ds-spacing-bar{ height: 10px; background: var(--accent-blue); } .ds-spacing-item span{ font-size: 13px; color: var(--surface-text-muted); } .ds-icon-row{ display: flex; flex-wrap: wrap; gap: 10px; } .ds-icon-row img{ width: 30px; height: 30px; background: var(--surface); border: 1px solid var(--face-dark); padding: 4px; } .ds-list{ display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 16px; list-style: disc; font-size: 15px; } .ds-token-table{ width: 100%; border-collapse: collapse; font-size: 14px; } .ds-token-table td{ border: 1px solid var(--face-dark); padding: 4px 8px; } .ds-token-table td:first-child{ font-family: var(--font-terminal); font-size: 16px; } .ds-token-swatch{ display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1px solid rgba(0,0,0,.3); vertical-align: middle; } .ds-section-title{ margin: 16px 0 6px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--surface-text-muted); border-top: 1px solid var(--face-dark); padding-top: 12px; } .ds-section-title:first-child{ margin-top: 0; border-top: none; padding-top: 0; } .ds-content code{ font-family: var(--font-terminal); background: var(--face); border: 1px solid var(--face-dark); padding: 1px 4px; font-size: 13px; } .ds-model-tiers{ display: flex; align-items: stretch; gap: 6px; margin: 10px 0; flex-wrap: wrap; } .ds-model-tier{ flex: 1 1 140px; background: var(--surface); border: 1px solid var(--face-dark); padding: 8px 10px; } .ds-model-tier strong{ display: block; font-size: 14px; margin-bottom: 4px; } .ds-model-tier span{ font-size: 13px; color: var(--surface-text-muted); line-height: 1.4; } .ds-model-arrow{ display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--surface-text-muted); flex: 0 0 auto; } /* ---------- SMALL SCREEN NOTICE ---------- */ .small-screen-notice{ position: fixed; inset: 0; z-index: 99997; background: rgba(5,7,12,.75); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .small-screen-notice.show{ opacity: 1; visibility: visible; } .small-screen-box{ width: 100%; max-width: 320px; background: var(--face); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-lighter), 4px 4px 0 rgba(0,0,0,.35); padding: 20px; text-align: center; } .small-screen-box img{ width: 40px; height: 40px; margin-bottom: 10px; } .small-screen-box h3{ margin: 0 0 8px; font-family: var(--font-pixel); font-size: 17px; } .small-screen-box p{ margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--surface-text-muted); } /* ---------- CONNECT CHAT WIDGET (persistent, bottom-right, messenger-style) ---------- Always present, never has a true close - only minimized to a slim header bar, expanded to the full chat panel, or docked away to a taskbar icon (see .chat-widget-taskbar-btn). Sits flush against the taskbar's top edge, no gap. z-index sits below the taskbar/start-menu but above everything else so it never gets buried by windows. */ .chat-widget{ position: fixed; right: 18px; bottom: var(--taskbar-h); z-index: 4900; width: 260px; max-height: 400px; background: var(--face); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-lighter), 3px 3px 0 rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden; transition: max-height .22s ease; } .chat-widget.minimized{ max-height: 32px; } .chat-widget.docked{ display: none; } .chat-widget-header{ display: flex; align-items: center; gap: 6px; padding: 6px 8px; flex: 0 0 auto; background: var(--titlebar); color: #fff; cursor: var(--cursor-hand); user-select: none; } .chat-widget-header img{ width: 16px; height: 16px; flex: 0 0 auto; } .chat-widget-header span:first-of-type{ flex: 1; font-family: var(--font-pixel); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-widget-dot{ width: 7px; height: 7px; border-radius: 50%; background: #2fbf6e; box-shadow: 0 0 0 2px rgba(47,191,110,.3); flex: 0 0 auto; } .chat-widget-header-btns{ display: flex; gap: 2px; flex: 0 0 auto; } .chat-widget-toggle, .chat-widget-dock{ background: none; border: none; color: #fff; font-size: 13px; width: 16px; height: 16px; cursor: var(--cursor-hand); } /* Docked icon lives in the systray beside the clock, not the regular task-buttons row - flat/borderless like a tray icon rather than a full taskbar window button. */ .chat-widget-taskbar-btn{ display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 6px; flex: 0 0 auto; background: transparent; border: none; font-size: 14px; white-space: nowrap; cursor: var(--cursor-hand); } .chat-widget-taskbar-btn:hover{ background: var(--face-dark); } .chat-widget-taskbar-btn img{ width: 14px; height: 14px; flex: 0 0 auto; } .chat-widget-taskbar-btn.hide{ display: none; } .chat-widget-body{ flex: 1; min-height: 0; overflow-y: auto; padding: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; } .chat-bubble{ max-width: 85%; padding: 7px 9px; font-size: 14px; line-height: 1.4; border: 1px solid var(--face-dark); } .chat-bubble.bot{ align-self: flex-start; background: var(--face); } .chat-bubble.user{ align-self: flex-end; background: var(--accent-solid); color: #fff; border-color: transparent; } .chat-bubble.error{ align-self: flex-start; background: #fdecea; border-color: #d33; color: #a00; } /* Typing indicator - three dots bouncing in sequence, standard chat-app convention for "the other side is composing a reply". Shown briefly before every bot line so the conversation reads as a real back-and-forth instead of instant scripted replies. */ .chat-bubble.typing{ display: flex; align-items: center; gap: 3px; padding: 9px 11px; } .chat-bubble.typing span{ width: 5px; height: 5px; border-radius: 50%; background: var(--surface-text-muted); animation: chat-typing-bounce 1.1s ease-in-out infinite; } .chat-bubble.typing span:nth-child(2){ animation-delay: .15s; } .chat-bubble.typing span:nth-child(3){ animation-delay: .3s; } @keyframes chat-typing-bounce{ 0%, 60%, 100%{ transform: translateY(0); opacity: .5; } 30%{ transform: translateY(-3px); opacity: 1; } } .chat-widget-email-fallback{ align-self: flex-start; font-size: 13px; font-weight: 700; padding: 6px 10px; background: var(--surface); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); cursor: var(--cursor-hand); color: var(--accent-text); } .chat-widget-composer{ flex: 0 0 auto; border-top: 1px solid var(--face-dark); padding: 8px; background: var(--face); } .chat-widget-restart{ display: block; margin: 0 0 6px; background: none; border: none; padding: 0; font-size: 13px; color: var(--surface-text-muted); text-decoration: underline; text-underline-offset: 2px; cursor: var(--cursor-hand); } .chat-widget-restart.hide{ display: none; } .chat-widget-choices{ display: flex; flex-wrap: wrap; gap: 6px; } .chat-widget-choices button{ font-size: 13px; padding: 5px 8px; background: var(--surface); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); cursor: var(--cursor-hand); } .chat-widget-input-row{ display: flex; gap: 6px; } .chat-widget-input{ flex: 1; min-width: 0; font-size: 14px; padding: 5px 7px; border: 1px solid var(--face-dark); background: var(--surface); } .chat-widget-send{ width: 28px; flex: 0 0 auto; background: var(--accent-solid); color: #fff; border: none; cursor: var(--cursor-hand); font-size: 15px; } @media (max-width: 720px){ /* Wallpaper's subject sits toward the right of the frame. Default background-position:center crops symmetrically, which cuts them off on narrow/tall phone viewports where cover scales aggressively. Shifting the focal point right keeps them in frame without touching the desktop view. */ .wallpaper{ background-position: 78% center; } .chat-widget{ right: 10px; width: min(260px, calc(100vw - 20px)); } /* Minimized on mobile shrinks to a small square icon button instead of staying a 260px-wide bar - at that width it sat right on top of whatever a full-screen window put at its own bottom edge (Terminal's input row, Tetris's D-pad), which made those controls unreachable. Expanded state is unaffected - full width/layout returns the moment .minimized comes off. */ .chat-widget.minimized{ width: 46px; right: 12px; bottom: calc(var(--taskbar-h) + 10px); } .chat-widget.minimized .chat-widget-header{ padding: 6px; justify-content: center; } .chat-widget.minimized .chat-widget-header span:first-of-type, .chat-widget.minimized .chat-widget-header-btns{ display: none; } } /* ---------- ABOUT HINT (subtle nudge toward the About Me icon) ---------- Sits to the right of the icon, vertically centered, rather than below it - the icon grid stacks two rows close together, so a hint dropped below About visually landed on top of the Work icon underneath it. */ .about-hint{ position: fixed; z-index: 4800; display: flex; align-items: center; gap: 4px; transform: translateY(-50%) translateX(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, transform .3s ease, visibility .3s ease; } .about-hint.show{ opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); pointer-events: auto; cursor: var(--cursor-hand); } .about-hint-arrow{ display: inline-flex; width: 22px; height: 22px; animation: about-hint-bounce 1.3s ease-in-out infinite; } .about-hint-arrow img{ width: 100%; height: 100%; image-rendering: pixelated; image-rendering: -moz-crisp-edges; } @keyframes about-hint-bounce{ 0%, 100%{ transform: translateX(0); } 50%{ transform: translateX(-4px); } } .about-hint span:last-child{ background: var(--face); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker), 2px 2px 0 rgba(0,0,0,.2); padding: 6px 10px; font-size: 14px; line-height: 1.4; text-align: center; color: var(--text); } /* ---------- UNDO TOAST ---------- */ /* ---------- DESKTOP CONTEXT MENU ---------- */ .ctx-menu{ position: fixed; z-index: 9200; min-width: 170px; background: var(--face); border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-dark), 3px 4px 0 rgba(0,0,0,.3); padding: 3px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .1s, transform .1s, visibility .1s; } .ctx-menu.open{ opacity: 1; visibility: visible; transform: translateY(0); } .ctx-menu-item{ display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; font-size: 15px; text-align: left; background: none; } .ctx-menu-item:hover{ background: var(--accent-solid); color: #fff; } .ctx-menu-sep{ border-top: 1px solid var(--face-dark); border-bottom: 1px solid var(--face-lighter); margin: 3px 4px; } /* ---------- PERSONALIZE PANEL ---------- */ .mode-toggle{ display: flex; gap: 8px; margin-bottom: 4px; } .mode-option{ flex: 1; padding: 10px; text-align: center; font-size: 15px; background: var(--surface); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); } .mode-option.active{ outline: 2px solid var(--accent-blue); outline-offset: -2px; } .theme-grid{ display: flex; flex-direction: column; gap: 8px; } .theme-option{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; text-align: left; background: var(--surface); border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); } .theme-option.active{ outline: 2px solid var(--accent-blue); outline-offset: -2px; } .theme-swatch{ width: 30px; height: 22px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.25); } .theme-option strong{ display: block; font-size: 15px; } .theme-option span{ display: block; font-size: 13px; color: var(--surface-text-muted); } /* 5 options don't fit the 2-item .mode-toggle flex:1 layout without getting cramped - wrap instead, each option sized to its content rather than splitting the row evenly. */ .screensaver-delay-toggle{ flex-wrap: wrap; } .screensaver-delay-toggle .mode-option{ flex: 0 1 auto; padding: 7px 12px; } /* Live miniature of the real screensaver - same bounce/clock logic, scaled into a small box, not a static screenshot - see startScreensaverPreview(). */ .screensaver-preview{ position: relative; height: 100px; margin-top: 4px; overflow: hidden; background: #000; cursor: default; } .screensaver-preview .screensaver-logo{ position: absolute; top: 0; left: 0; font-family: var(--font-pixel); letter-spacing: .03em; white-space: nowrap; text-align: center; will-change: transform; } .screensaver-preview .screensaver-time{ font-size: 18px; font-weight: 700; line-height: 1.2; } .screensaver-preview .screensaver-date{ font-size: 10px; margin-top: 2px; } /* ---------- TETRIS GAME WINDOW ---------- .tetris-screen is the whole game as one unit - stats, next/hold preview, board, buttons, and controls all live inside its border, like a real handheld/arcade cabinet's screen+bezel rather than a canvas with scattered separate controls. */ .tetris-panel{ text-align: center; padding-top: 4px; } .tetris-screen{ display: inline-block; padding: 10px; background: var(--surface); text-align: left; border: 1px solid; border-color: var(--face-dark) var(--face-lighter) var(--face-lighter) var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); } #tetris-canvas{ display: block; margin: 0 auto 10px; image-rendering: pixelated; border: 1px solid; border-color: var(--face-dark) var(--face-lighter) var(--face-lighter) var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); } /* Stats box and the Next box sit side by side, both auto-height from their own padding (not a shared fixed px number) - a fixed height on the mini-box previously left no real room for its label + 36px canvas together, squeezing the canvas right up against the border. */ .tetris-top-row{ display: flex; gap: 8px; margin-bottom: 8px; align-items: stretch; } .tetris-stats-box{ flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px; border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); } .tetris-stat{ display: flex; flex-direction: column; gap: 2px; } .tetris-stat span{ font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--surface-text-muted); } .tetris-stat strong{ font-family: var(--font-terminal); font-size: 15px; color: var(--accent-text); } .tetris-mini-box{ flex: 0 0 auto; width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px; border: 1px solid var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); background: var(--surface); font-family: inherit; } .tetris-mini-box span{ font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--surface-text-muted); } #tetris-next-canvas{ border: 1px solid; border-color: var(--face-dark) var(--face-lighter) var(--face-lighter) var(--face-dark); box-shadow: inset 1px 1px 0 var(--face-darker); } .tetris-btn-row{ display: flex; gap: 6px; margin-bottom: 8px; } .tetris-btn-row .win-btn{ flex: 1; font-size: 12px; min-width: 0; padding: 6px 4px; } /* Always-visible key legend (non-touch only) - one row per action, a small bordered "key" glyph plus its label, rather than a plain sentence of shortcuts. */ .tetris-controls-legend{ display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; } .tetris-controls-legend > div{ display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--surface-text-muted); } .tetris-key{ display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; font-family: var(--font-terminal); font-size: 11px; color: var(--text); background: var(--face); border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); } .tetris-key-wide{ min-width: 44px; } .tetris-hint{ font-size: 12px; color: var(--surface-text-muted); margin: 0; } /* Touch: no D-pad (swipe on the board instead, see bindTetrisSwipeGestures) - a collapsible native
holds the same hint text instead of a permanent legend, saving vertical space on a phone screen. */ .tetris-controls-details{ font-size: 12px; color: var(--surface-text-muted); } .tetris-controls-details summary{ cursor: var(--cursor-hand); font-family: var(--font-pixel); font-size: 11px; letter-spacing: .02em; color: var(--text); padding: 4px 0; } .tetris-controls-details .tetris-hint{ padding: 4px 0 0; } /* ---------- BOOT SCREEN ---------- Present in the static HTML and styled by the render-blocking stylesheet, so this is the very first thing a new visitor sees - opaque background, logo, progress bar, and status text all visible immediately, before app.js has even downloaded. Previously a separate full-screen canvas (the "pixel boot intro") painted over this with mostly-black scattered pixels for ~2-2.6s before the real loading UI ever appeared, which is what read as a stalled dark screen to new visitors - removed outright. The bar/hold/fade durations below are also shortened so the whole sequence resolves quickly. */ .boot-screen{ position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #05070c; transition: opacity .3s ease; } .boot-screen.hide{ opacity: 0; pointer-events: none; } .boot-logo{ display: flex; align-items: center; gap: 10px; } .boot-logo img{ width: 34px; height: 34px; } .boot-logo span{ font-family: var(--font-logo); font-size: 19px; color: #fff; letter-spacing: .03em; } .boot-bar{ width: 220px; height: 8px; background: #1c2029; border: 1px solid #343a47; overflow: hidden; } .boot-bar-fill{ height: 100%; width: 0%; background: var(--accent-blue); transition: width .8s ease; } .boot-status{ margin: 0; font-size: 14px; color: #9aa0ad; } /* ---------- IDLE SCREENSAVER ---------- */ .screensaver{ position: fixed; inset: 0; z-index: 999999; background: #000; overflow: hidden; opacity: 0; transition: opacity .5s ease; cursor: none; } .screensaver.show{ opacity: 1; } .screensaver-logo{ position: absolute; top: 0; left: 0; font-family: var(--font-pixel); letter-spacing: .04em; white-space: nowrap; will-change: transform; user-select: none; text-align: center; } .screensaver-time{ font-size: 48px; font-weight: 700; line-height: 1.2; } .screensaver-date{ font-size: 19px; margin-top: 6px; } /* ---------- SCROLLBARS ---------- */ .window-content::-webkit-scrollbar, .explorer-grid::-webkit-scrollbar{ width: 16px; height: 16px; } .window-content::-webkit-scrollbar-track{ background: var(--face); } .window-content::-webkit-scrollbar-thumb{ background: var(--face); border: 1px solid; border-color: var(--face-lighter) var(--face-darker) var(--face-darker) var(--face-lighter); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 900px){ .taskbar-tagline{ display: none; } } @media (max-width: 720px){ /* Every window goes full-screen (below the taskbar) rather than sitting in normal page flow at whatever height its content happens to need - a phone doesn't have room for a floating desktop window, so each app takes the whole screen like a real mobile OS, and the existing z-index stack (WM.zTop/focusWindow) means only the focused one is ever on top; switch apps via the taskbar. This also makes dragging/resizing meaningless, so both are disabled below. */ .window{ position: fixed !important; inset: 0 0 var(--taskbar-h) 0 !important; width: auto !important; height: auto !important; margin-bottom: 0; min-height: 0; } .title-bar{ touch-action: none; } .resize-handle{ display: none; } .about-layout{ flex-direction: column; } .about-cols{ grid-template-columns: 1fr; } .about-grid-2col{ grid-template-columns: 1fr; } .about-side-avatar, .about-side-box{ flex: 1 1 100%; } .about2-quote-section{ flex-direction: column; align-items: stretch; } .about2-quote-gif{ width: 100%; height: 130px; } .spot-grid{ grid-template-columns: 1fr; } .collections-grid{ grid-template-columns: repeat(3, 1fr); } .window-nav-layout{ flex-direction: column; } .window-nav{ width: 100%; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--face-dark); } .mini-nav-btn{ width: auto; } .start-menu{ width: 84vw; } /* Left-aligned stays left-aligned (not centered) - the fix is fitting a 4th icon per row instead of 3, so the row actually uses its width instead of leaving a visible gap on the right after only 3 fit at the desktop size. */ .explorer-item{ width: 76px; flex: 0 0 76px; } .explorer-item .thumb{ width: 44px; height: 44px; } .explorer-item .thumb img.icon-img{ width: 28px; height: 28px; } .explorer-item span{ font-size: 13px; } /* The window is full-screen now, but the canvas still draws at its fixed intrinsic 180x324 resolution - scale it up to use the extra room instead of sitting tiny in the middle of a big empty window. image-rendering:pixelated (already set) keeps it crisp/blocky rather than blurry at the larger CSS size. */ #tetris-canvas{ width: min(300px, 78vw); height: auto; } }