/* =========================================================================== 333AUDIO - Retro OS Portfolio ยท styles.css =========================================================================== THEME EVERYTHING FROM HERE: The :root block below holds every color + font. Change a value once and it updates across the whole site. --accent is reserved if you want a single pop color; the retro palette mostly uses the cream/pink/mint vars. =========================================================================== */ /* --------------------------------------------------------------------------- FONTS (loaded from local files in /fonts) Download the .ttf files and drop them in a "fonts" folder next to index.html. Filenames must match the url() paths below (or edit the paths). --------------------------------------------------------------------------- */ /* ChiKareGo2 - UI / body text. Loaded from the onlinewebfonts CDN (needs an internet connection). To self-host instead, download the files and point these url()s at a local /fonts path. */ @font-face { font-family: "ChiKareGo2"; src: url("https://db.onlinewebfonts.com/t/20879f289f178c7c99a7623b1bcda06f.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/20879f289f178c7c99a7623b1bcda06f.woff") format("woff"), url("https://db.onlinewebfonts.com/t/20879f289f178c7c99a7623b1bcda06f.ttf") format("truetype"); font-display: swap; } /* Ishmeria - wordmarks / window titles (local files). */ @font-face { font-family: "Ishmeria"; src: url("../fonts/ishmeria/Ishmeria.woff") format("woff"), url("../fonts/ishmeria/Ishmeria.ttf") format("truetype"); font-display: swap; } /* Pixolde - optional pixel text (local file). */ @font-face { font-family: "Pixolde"; src: url("../fonts/pixolde/Pixolde.ttf") format("truetype"); font-display: swap; } :root { /* ---- COLORS (warm retro palette) -------------------------------------- */ --bg: #F4D3D4; /* dusty pink desktop background (solid) */ --chrome: rgba(249, 241, 233, 0.82); /* window / dock / box face (slightly see-through) */ --chrome-2: rgba(222, 215, 196, 0.82); /* slightly darker face for buttons */ --ink: #161616; /* near-black text + outlines */ --ink-soft: #5a5a52; /* dimmed text */ --line: #000000; /* hard outlines (the retro 1px black borders) */ --hover: rgba(255, 255, 255, 0.85); /* button hover fill */ --mint: rgba(185, 220, 207, 0.85); /* play button face */ --pink: rgba(232, 199, 199, 0.85); /* shuffle button face */ --black-box: #141414; /* black tabs / corner box */ --black-text: #efe9da; /* text on the black boxes */ --screen: #ccc7b8; /* placeholder "video screen" background */ --live: #d23b3b; /* ON AIR / live red */ --accent: #d23b3b; /* EDIT: one pop color (used sparingly) */ /* ---- TYPOGRAPHY (matches Poolsuite's font roles) ----------------------- */ --font-display: "Ishmeria", Georgia, serif; /* wordmarks/titles */ --font-ui: "ChiKareGo2", "Courier New", monospace; /* body + UI text */ --font-label: system-ui, -apple-system, sans-serif; /* dock labels */ /* ---- METRICS ---------------------------------------------------------- */ --bar-h: 26px; /* window title-bar height */ --taskbar-h: 40px; /* bottom taskbar height */ } /* --------------------------------------------------------------------------- DARK THEME Applied when has data-theme="dark" (toggled by the top-right switch). Light is the default. Only the colors change; layout stays identical. --------------------------------------------------------------------------- */ :root[data-theme="dark"] { --bg: #211d29; /* dark desktop background */ --chrome: rgba(56, 50, 63, 0.82); /* window / box face (slightly see-through) */ --chrome-2: rgba(47, 41, 53, 0.82); /* darker face for buttons */ --ink: #ece7df; /* light text + outlines */ --ink-soft: #9d978f; /* dimmed text */ --line: #d7d1c7; /* light hairline outlines on dark chrome */ --hover: #4a4450; /* button hover fill */ --black-box: #efe9da; /* corner tab inverts to stay high-contrast */ --black-text: #141414; --screen: #423c4a; /* dark "video screen" placeholder */ --live: #ff5b5b; /* brighter red for dark background */ } /* --------------------------------------------------------------------------- RESET & BASE --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-ui); font-size: 16px; color: var(--ink); background-color: var(--bg); /* fallback behind the background video */ overflow: hidden; } /* Looping desktop background video (covers the screen, sits behind everything). */ .desktop-bg { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; } /* Darkening layer over the video. Increase the alpha for a darker desktop. */ .bg-overlay { position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.45); pointer-events: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } img { image-rendering: pixelated; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Reusable "beveled chrome" look: hard black outline + soft 3D inner edges. */ .bevel { border: 1px solid var(--line); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.65), inset -1px -1px 0 rgba(0, 0, 0, 0.18); } /* =========================================================================== BOOT / LOADING SCREEN =========================================================================== */ .boot-screen { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background-color: var(--bg); transition: opacity 0.5s ease, visibility 0.5s ease; } .boot-hidden { opacity: 0; visibility: hidden; } .boot-box { background: var(--chrome); padding: 34px 48px; text-align: center; } .boot-logo { margin: 0; font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 1px; } .boot-tagline { margin: 10px 0 16px; color: var(--ink-soft); letter-spacing: 1px; } .boot-bar { width: 220px; height: 14px; margin: 0 auto; background: #fff; border: 1px solid var(--line); } .boot-bar-fill { height: 100%; width: 0%; /* Blocky striped fill, like an old install progress bar. */ background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 10px); animation: boot-fill 1.8s steps(20) forwards; } @keyframes boot-fill { from { width: 0%; } to { width: 100%; } } /* =========================================================================== TOP BARS =========================================================================== */ .topbar-left, .topbar-right { position: fixed; top: 10px; z-index: 800; display: flex; align-items: stretch; gap: 6px; font-family: var(--font-ui); font-size: 16px; /* ChiKareGo2 is a pixel font: render at its native 16px so it stays chunky + crisp, not thin/blurry like it was at 12px */ letter-spacing: 0; } .topbar-left { left: 0; top: 0; gap: 0; } .topbar-right { right: 14px; top: 12px; gap: 16px; } /* Little black square in the very corner. */ .corner-tab { display: grid; place-items: center; width: 30px; background: var(--black-box); color: var(--black-text); border-left: none; border-top: none; } .member-box { display: flex; align-items: center; padding: 0 14px; height: 30px; background: var(--chrome); color: var(--ink); border-top: none; } .member-box:hover { background: #fff; } .date-box, .clock-box { display: flex; align-items: center; gap: 6px; /* borderless, no background - just the text/icons */ } .clock-glyph { color: var(--live); } /* red ring like the reference */ /* Dark / light toggle button (borderless, no background). */ .theme-toggle { display: flex; align-items: center; justify-content: center; padding: 0; color: var(--ink); } .theme-toggle:hover { opacity: 0.6; } /* Show the sun in light mode, the moon in dark mode. */ .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } /* =========================================================================== DESKTOP =========================================================================== */ .desktop { position: fixed; inset: 0; bottom: var(--taskbar-h); /* leave room for the taskbar */ display: flex; flex-direction: column; flex-wrap: wrap; /* icons wrap into a new column if needed */ align-content: flex-start; gap: 4px; padding: 14px; } /* Loose desktop icons (icon over label), light so they read on the video. */ .desk-icon { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 84px; padding: 8px 4px; background: transparent; color: #f4f0ea; cursor: pointer; border-radius: 4px; } .desk-icon:hover { background: rgba(255, 255, 255, 0.14); } .desk-link { text-decoration: none; } .desk-icon:active { background: rgba(255, 255, 255, 0.22); } .desk-glyph svg { width: 34px; height: 34px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); } .desk-label { font-family: var(--font-ui); font-size: 15px; text-align: center; line-height: 1.1; color: #f4f0ea; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); } /* =========================================================================== TASKBAR (Start button | open windows | tray) =========================================================================== */ .taskbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; height: var(--taskbar-h); display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: var(--chrome); border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: 15px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .start-btn { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; font-weight: bold; color: var(--ink); background: var(--chrome-2); cursor: pointer; } .start-btn .start-glyph svg { width: 18px; height: 18px; display: block; } .start-btn.open { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2); } /* pressed */ /* Open-window buttons. */ .task-windows { flex: 1; display: flex; align-items: center; gap: 4px; overflow: hidden; } .task-win-btn { max-width: 180px; height: 30px; padding: 0 12px; font-size: 14px; color: var(--ink); background: var(--chrome-2); border: 1px solid var(--line); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6), inset -1px -1px 0 rgba(0, 0, 0, 0.15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .task-win-btn:hover { background: var(--hover); } .tray { display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 12px; background: var(--chrome); } /* ----- Start menu ---------------------------------------------------------- */ .start-menu { position: fixed; left: 6px; bottom: calc(var(--taskbar-h) + 4px); z-index: 950; width: 200px; padding: 6px; display: flex; flex-direction: column; background: var(--chrome); border: 1px solid var(--line); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .start-menu[hidden] { display: none; } .start-menu-head { font-family: var(--font-display); font-size: 16px; padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .start-item { text-align: left; padding: 9px 12px; font-size: 16px; color: var(--ink); background: transparent; cursor: pointer; } .start-item:hover { background: var(--accent); color: #fff; } /* =========================================================================== WINDOWS (shared chrome) =========================================================================== */ .window { position: fixed; top: 120px; left: 120px; display: none; /* hidden until opened */ flex-direction: column; background: var(--chrome); border: 1px solid var(--line); border-radius: 10px; /* rounded corners like the reference */ overflow: hidden; /* clip inner content to the rounded edge */ /* Blur the video showing through the translucent chrome so text stays readable. */ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .window.open { display: flex; } /* Title bar: controls left, wordmark right. Also the drag handle. */ .title-bar { display: flex; align-items: center; justify-content: space-between; height: var(--bar-h); padding: 0 8px; cursor: grab; user-select: none; } .title-bar:active { cursor: grabbing; } .title-controls { display: flex; align-items: center; gap: 8px; } .tb-btn { display: grid; place-items: center; width: 18px; height: 16px; font-size: 15px; line-height: 1; color: var(--ink); } .tb-btn[data-window-close]:hover { background: var(--ink); color: var(--chrome); } .wordmark { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.5px; } /* ----- MEDIA PLAYER -------------------------------------------------------- */ .win-player { width: 700px; } /* The big screen / video area. EDIT: put a