/* ============================================================ ZAZA/OS — MODERN DESKTOP THEME (additive override) Load AFTER os/style.css. Repaints the visual layer only — no layout / transition / JS-dependent rules are changed, so every OS feature keeps working exactly as before. Light is default. Dark via (the companion theme-modern-toggle.js adds a tray toggle + persist). Remove the to fully revert. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"); /* ---------- DESIGN TOKENS ---------- */ :root { /* toned-down ZAZA lime/green accent (forced past the inline tweak var) */ --accent: #6fa82f !important; --accent-bri: #86c63f !important; --accent-rgb: 111 168 47 !important; --accent-soft: rgba(111, 168, 47, 0.14) !important; --accent-ink: #1f3110 !important; /* light surfaces */ --bg: #e9ebe5; --bg-2: #d6dcd0; --fg: #1c1f1a; --fg-dim: #6b7066; --fg-faint: #a4a99c; --line: rgba(20, 30, 10, 0.10); --line-strong: rgba(20, 30, 10, 0.18); /* glass + chrome */ --glass: rgba(252, 253, 250, 0.85); --glass-head: rgba(252, 253, 250, 0.66); --solid: #f6f8f3; --inset: #eef1ea; --tile: #ffffff; --tile-line: rgba(20, 30, 10, 0.08); --bar: rgba(247, 249, 244, 0.72); --dock: rgba(250, 252, 247, 0.5); --dock-line: rgba(255, 255, 255, 0.6); --shadow: 0 24px 60px -12px rgba(40, 55, 25, 0.26), 0 6px 18px -6px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.05); --shadow-soft: 0 12px 30px -10px rgba(40, 55, 25, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.05); /* modern type — keeps JetBrains Mono only for code */ --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --serif: "Hanken Grotesk", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --crt-intensity: 0; /* kill CRT feel */ } /* tone the existing accent-theme switcher to calm, modern hues (the Settings theme grid keeps working — just no more neon) */ [data-theme="neon-lime"] { --accent:#6fa82f !important; --accent-bri:#86c63f !important; --accent-rgb:111 168 47 !important; } [data-theme="matrix"] { --accent:#3f8a3c !important; --accent-bri:#57ad52 !important; --accent-rgb:63 138 60 !important; } [data-theme="phosphor"] { --accent:#b88a2e !important; --accent-bri:#d2a23f !important; --accent-rgb:184 138 46 !important; } [data-theme="solar-amber"]{ --accent:#c19330 !important; --accent-bri:#dbb04a !important; --accent-rgb:193 147 48 !important; } [data-theme="ice-cyan"] { --accent:#2f8f8a !important; --accent-bri:#46ada7 !important; --accent-rgb:47 143 138 !important; } [data-theme="cyber-pink"] { --accent:#b85a86 !important; --accent-bri:#cf6f9d !important; --accent-rgb:184 90 134 !important; } [data-theme="bloodmoon"] { --accent:#c0524f !important; --accent-bri:#d96a66 !important; --accent-rgb:192 82 79 !important; } [data-theme="lavender"] { --accent:#7d6abf !important; --accent-bri:#9684d3 !important; --accent-rgb:125 106 191 !important; } /* ---------- DARK MODE ---------- */ body[data-osmode="dark"] { --bg: #15171b; --bg-2: #1b1e24; --fg: #e9ebe6; --fg-dim: #9aa090; --fg-faint: #666b60; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.20); --glass: rgba(38, 41, 48, 0.72); --glass-head: rgba(46, 50, 58, 0.7); --solid: #262a31; --inset: #1d2026; --tile: #2c313a; --tile-line: rgba(255, 255, 255, 0.08); --bar: rgba(26, 29, 34, 0.62); --dock: rgba(40, 44, 52, 0.5); --dock-line: rgba(255, 255, 255, 0.1); --shadow: 0 28px 70px -14px rgba(0, 0, 0, 0.6), 0 6px 20px -6px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.06); --shadow-soft: 0 14px 34px -12px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.06); } /* ---------- REMOVE THE MONITOR-FRAME OVERLAY ON THE OS SCREEN ---------- */ /* #m2d-frame was a decorative CRT-bezel bar drawn around the whole viewport once inside the desktop phase — dropped for the modern, frameless look. */ #m2d-frame { display: none !important; } /* ---------- BASE ---------- */ html, body { background: linear-gradient(160deg, var(--bg), var(--bg-2)) fixed !important; color: var(--fg); font-family: var(--sans); } ::selection { background: var(--accent); color: #fff; } /* ---------- KILL CRT / SCANLINES ---------- */ .crt-scanlines, .crt-vignette, .crt-tint { display: none !important; } /* ---------- WALLPAPER → soft modern gradient ---------- */ .desktop-wallpaper { background: linear-gradient(160deg, #eef1ea, #e1e7dd 55%, #dbe2d6) !important; } body[data-osmode="dark"] .desktop-wallpaper { background: linear-gradient(160deg, #15171b, #1b1e24 55%, #20242b) !important; } .desktop-wallpaper > [class^="dwp-"], .desktop-wallpaper > [class*=" dwp-"] { opacity: 0.12 !important; filter: saturate(0.4) brightness(1.1) !important; mix-blend-mode: normal !important; } /* soft accent glow blobs over the wallpaper */ .desktop-wallpaper::before, .desktop-wallpaper::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; opacity: 0.45; } .desktop-wallpaper::before { width: 42%; height: 56%; left: -10%; top: -14%; background: radial-gradient(circle, color-mix(in oklch, var(--accent) 26%, transparent), transparent 68%); } .desktop-wallpaper::after { width: 46%; height: 60%; right: -14%; bottom: -18%; background: radial-gradient(circle, color-mix(in oklch, var(--accent-bri) 18%, transparent), transparent 70%); } /* ---------- MONITOR FRAME (m2d) → quiet, modern ---------- */ .m2d-top, .m2d-left, .m2d-right { background: var(--bar) !important; box-shadow: inset 0 0 0 0.5px var(--line) !important; backdrop-filter: blur(20px) saturate(1.4); } .m2d-bot { background: var(--bar) !important; box-shadow: inset 0 1px 0 var(--line), 0 -2px 12px rgba(0,0,0,0.06) !important; backdrop-filter: blur(20px) saturate(1.4); } .m2d-brand { font-family: var(--sans); font-style: normal; font-weight: 700; color: var(--fg) !important; text-shadow: none !important; } .m2d-meta, .m2d-led { color: var(--fg-dim) !important; text-shadow: none !important; } /* ---------- WINDOWS ---------- */ .os-window { /* base winOpen animation restarts on every re-render and can stick at opacity:0 (e.g. AI "thinking"); force visible — scale-in still plays */ opacity: 1 !important; background: var(--glass) !important; border: 0.5px solid var(--line-strong) !important; border-radius: 14px !important; box-shadow: var(--shadow-soft) !important; backdrop-filter: blur(30px) saturate(1.5) !important; -webkit-backdrop-filter: blur(30px) saturate(1.5) !important; font-family: var(--sans) !important; overflow: hidden; } /* focused window sits proud */ .os-window:focus-within, .os-window.focused { box-shadow: var(--shadow) !important; } .os-window.maxed { border-radius: 0 !important; } .win-titlebar { height: 42px !important; padding: 0 14px !important; background: var(--glass-head) !important; border-bottom: 0.5px solid var(--line) !important; position: relative; } .win-title { position: absolute; left: 0; right: 0; text-align: center !important; white-space: nowrap !important; display: block !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0.01em !important; color: var(--fg) !important; pointer-events: none; } .win-icon { color: var(--accent) !important; margin-right: 7px !important; display: inline-flex !important; vertical-align: -1px; } /* macOS-style left control cluster — fixed red / amber / green, fixed order (independent of theme accent so window controls stay consistent everywhere) */ .win-controls { gap: 8px !important; display: flex !important; } .win-btn { width: 12px !important; height: 12px !important; border-radius: 50% !important; border: none !important; font-size: 0 !important; color: transparent !important; transition: filter .12s !important; flex-shrink: 0; } .win-btn:hover { background: inherit; filter: brightness(0.9); } .win-btn.close { background: #e0675b !important; order: 1; } .win-btn.min { background: #e3b341 !important; order: 2; } .win-btn.max, .win-btn.maximize{ background: #54b85a !important; order: 3; } .win-btn.close:hover { background: #e0675b !important; color: transparent !important; } .win-body { background: transparent !important; } .win-body::-webkit-scrollbar { width: 9px; height: 9px; } .win-body::-webkit-scrollbar-track { background: transparent; } .win-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .win-resize-se { background: none !important; opacity: 0 !important; } /* ---------- TASKBAR → centered glass dock ---------- */ .taskbar { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; bottom: 12px !important; width: auto !important; height: auto !important; align-items: center !important; gap: 8px !important; padding: 8px 10px !important; background: var(--dock) !important; border: 0.5px solid var(--dock-line) !important; border-radius: 24px !important; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.35) !important; backdrop-filter: blur(34px) saturate(1.8) !important; -webkit-backdrop-filter: blur(34px) saturate(1.8) !important; } .start-btn { border-radius: 14px !important; padding: 0 14px !important; height: 44px !important; color: var(--fg) !important; font-weight: 650 !important; letter-spacing: 0.01em !important; transition: background .18s ease, transform .18s ease !important; } .start-btn.active, .start-btn:hover { background: var(--line) !important; } .start-orb { background: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent) !important; } .tb-action { width: 44px !important; height: 44px !important; border-radius: 14px !important; background: var(--tile) !important; border: 0.5px solid var(--tile-line) !important; color: var(--fg) !important; box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.25) !important; transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .18s ease !important; } .tb-action:hover { background: var(--tile) !important; transform: translateY(-7px) scale(1.08) !important; } .tb-action:active { transform: translateY(-2px) scale(1.02) !important; } /* Pinned dock app shortcuts (macOS-dock style quick launch) */ .dock-divider { width: 0.5px; height: 28px; background: var(--line); margin: 0 3px; align-self: center; opacity: 0.7; } .dock-pins { display: flex; align-items: center; gap: 8px; } .dock-pin { position: relative; color: var(--accent) !important; } .dock-pin.open::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .task-windows { gap: 8px !important; align-items: center !important; overflow: visible !important; } .task-win { width: 46px !important; height: 46px !important; border-radius: 14px !important; min-width: 46px !important; max-width: 46px !important; padding: 0 !important; justify-content: center !important; gap: 0 !important; background: var(--tile) !important; border: 0.5px solid var(--tile-line) !important; color: var(--fg) !important; box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.22) !important; transition: transform .18s cubic-bezier(.34,1.56,.64,1) !important; position: relative !important; overflow: visible !important; } .task-win:hover { transform: translateY(-7px) scale(1.06) !important; padding-right: 0 !important; } .task-win .task-icon { width: 24px !important; height: 24px !important; } .task-win .task-win-name { display: none !important; } /* close = small floating badge at the top-right corner on hover */ .task-win .task-win-close { position: absolute !important; top: -4px !important; right: -4px !important; left: auto !important; transform: none !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; background: var(--tile) !important; border: 0.5px solid var(--tile-line) !important; box-shadow: var(--shadow-soft) !important; } .task-win.focused { border-color: color-mix(in oklch, var(--accent) 60%, transparent) !important; } .task-win.focused::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .task-icon { color: var(--accent) !important; } .task-win-name { color: var(--fg) !important; } .task-win-close { color: var(--fg-dim) !important; } .task-win-close:hover { background: #e0675b !important; color: #fff !important; border-radius: 6px; } /* tray — grouped status pill + prominent clock + round icon buttons */ .tray { gap: 6px !important; align-items: center !important; padding: 0 2px 0 4px !important; border-left: none !important; } .tray-stat { color: var(--fg) !important; font-weight: 600 !important; font-family: var(--sans) !important; font-size: 12px !important; padding: 6px 10px !important; border-radius: 11px !important; background: var(--tile) !important; border: 0.5px solid var(--tile-line) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2) !important; letter-spacing: 0.01em !important; } .tray-stat .dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #35c759 !important; box-shadow: 0 0 0 3px color-mix(in oklch, #35c759 24%, transparent) !important; } .tray-clock { color: var(--fg) !important; font-weight: 700 !important; font-family: var(--sans) !important; font-size: 12.5px !important; font-variant-numeric: tabular-nums; letter-spacing: 0.02em !important; padding: 6px 10px !important; border-radius: 11px !important; background: var(--tile) !important; border: 0.5px solid var(--tile-line) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2) !important; } .tray-power, .tray-mute { color: var(--fg-dim) !important; border-radius: 11px !important; width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background .15s ease, color .15s ease, transform .15s ease !important; } .tray-power:hover, .tray-mute:hover { background: var(--line) !important; color: var(--fg) !important; transform: translateY(-2px) !important; } .tray-power:hover { color: #e0675b !important; } /* ---------- START MENU → spotlight-style panel ---------- */ .start-overlay { background: rgba(0,0,0,0.18) !important; backdrop-filter: blur(2px); } .start-menu { background: var(--glass) !important; border: 0.5px solid var(--line) !important; border-radius: 18px !important; box-shadow: var(--shadow) !important; backdrop-filter: blur(34px) saturate(1.6) !important; -webkit-backdrop-filter: blur(34px) saturate(1.6) !important; } .start-search { background: var(--solid) !important; border: 0.5px solid var(--line) !important; border-radius: 12px !important; } .start-search-input { color: var(--fg) !important; } .start-search-icon { color: var(--fg-dim) !important; } .start-tile { border-radius: 14px !important; color: var(--fg) !important; } .start-tile:hover { background: var(--line) !important; } .start-tile-icon { border-radius: 13px !important; background: var(--tile) !important; border: 0.5px solid var(--tile-line) !important; box-shadow: var(--shadow-soft) !important; color: var(--accent) !important; } .start-tile-name { color: var(--fg) !important; } .start-name { color: var(--fg) !important; } .start-role, .start-empty { color: var(--fg-dim) !important; } .start-avatar { background: linear-gradient(160deg, var(--accent-bri), var(--accent)) !important; color: var(--accent-ink) !important; border-radius: 14px !important; } /* spotlight */ .spot-result:hover, .spot-result.sel { background: var(--line) !important; border-radius: 10px; } .spot-result-icon { color: var(--accent) !important; } .spot-result-name { color: var(--fg) !important; } /* ---------- DESKTOP ICONS ---------- */ .desk-icon { border-radius: 12px !important; } /* PRO icons: use the theme accent for the highlight (was hardcoded gold — clashed) */ .desk-icon-pro { background: color-mix(in oklch, var(--accent) 9%, transparent) !important; border: 1px solid color-mix(in oklch, var(--accent) 42%, transparent) !important; box-shadow: none !important; } .desk-icon:hover { background: var(--line) !important; border-color: transparent !important; box-shadow: none !important; transform: translateY(-2px) !important; } .desk-icon-img { border-radius: 12px !important; color: var(--accent) !important; } .desk-icon-label { color: var(--fg) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.18) !important; background: transparent !important; } /* ---------- GENERIC APP CONTENT ---------- */ .app { color: var(--fg) !important; font-family: var(--sans) !important; } .app-section-label, .app-hero-tag, .app-meta { color: var(--accent) !important; font-family: var(--mono) !important; } .app-h, .app-about h1, .readme-h1, .pup-h1, .ai-h1 { color: var(--fg) !important; font-family: var(--sans) !important; } .app-about h1 em, .app-h em { color: var(--accent) !important; font-style: italic; } .app-about h1 strong { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } .app-lead, .app-sub, .readme-p { color: var(--fg-dim) !important; } .app-meta-val { color: var(--fg) !important; } .app-stats .stat, .app-grid-2 > div { background: var(--inset) !important; border: 0.5px solid var(--line) !important; border-radius: 10px !important; } .app-quote { color: var(--fg) !important; border-color: var(--accent) !important; } /* inputs / buttons used across apps */ .text-input, .pro-input, .contact-form input, .contact-form textarea, .term-input, .ps-input, .ai-input, .start-search, .scr-login-input { background: var(--solid) !important; color: var(--fg) !important; border: 0.5px solid var(--line) !important; border-radius: 10px !important; font-family: var(--sans) !important; } .term-input, .ps-input, .ps-code-pre { font-family: var(--mono) !important; } input:focus, textarea:focus, .text-input:focus, .pro-input:focus, .scr-login-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; } .contact-submit, .pro-cta, .pup-cta, .toggle-btn.on, .scr-login-go-big, .ps-btn-go, .pup-pay, .pup-plan-cta { background: var(--accent) !important; color: var(--accent-ink) !important; border: none !important; border-radius: 10px !important; font-weight: 700 !important; } /* AI LAB send button — clean circular icon button (arrow), not a text pill */ .ai-send { width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 50% !important; background: var(--accent) !important; color: var(--accent-ink) !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 14px -4px color-mix(in oklch, var(--accent) 60%, transparent) !important; transition: filter .15s ease, transform .15s ease !important; } .ai-send:hover:not(:disabled) { filter: brightness(1.08) !important; transform: translateY(-1px) !important; background: var(--accent) !important; } .ai-send:disabled { opacity: 0.45 !important; } .ps-btn-go { border-radius: 50% !important; } /* chat bubbles (AI LAB, PRO Studio, agent) */ .ai-msg.a .ai-msg-bubble, .ps-msg-bubble { background: var(--tile) !important; color: var(--fg) !important; border: 0.5px solid var(--line) !important; border-radius: 14px 14px 14px 4px !important; box-shadow: var(--shadow-soft) !important; } .ai-msg.u .ai-msg-bubble, .ps-msg-u .ps-msg-bubble { background: var(--accent) !important; color: var(--accent-ink) !important; border-radius: 14px 14px 4px 14px !important; font-weight: 500 !important; } /* terminal: frosted glass instead of a solid opaque panel */ .term-prompt, .term-cmd { color: var(--accent) !important; } /* ---------- LOGIN / STANDBY / BOOT (restyled, still functional) ---------- */ .scr-login { background: radial-gradient(ellipse at center, var(--bg), var(--bg-2)) !important; } .scr-login-avatar-ring { background: var(--glass) !important; border-color: var(--line) !important; box-shadow: var(--shadow-soft) !important; } .scr-login-avatar-mark { color: var(--accent) !important; font-style: normal; font-weight: 700; } .scr-login-brand, .scr-login-text { color: var(--fg-dim) !important; font-family: var(--mono) !important; } .scr-standby-press { color: var(--accent-ink) !important; background: var(--accent) !important; border: none !important; border-radius: 12px !important; text-shadow: none !important; box-shadow: var(--shadow-soft) !important; } .boot-screen { background: var(--bg) !important; color: var(--fg) !important; } .boot-line.c-a { color: var(--accent) !important; text-shadow: none !important; } .boot-bar { background: var(--inset) !important; border-color: var(--line) !important; border-radius: 999px; } .boot-bar-fill { background: var(--accent) !important; box-shadow: none !important; border-radius: 999px; } /* ---------- AI LAB / ZAZA-CODE "gold" variant → light, glass, unified ---------- */ .app-ai-gold, .app-agent-gold, .app-ai-gold .ai-left, .app-agent-gold .ai-left { background: transparent !important; color: var(--fg) !important; font-family: var(--sans) !important; } .app-ai-gold .ai-h1, .app-agent-gold .ai-h1, .app-ai-gold .ai-status, .app-agent-gold .ai-status { color: var(--fg) !important; text-shadow: none !important; } .app-ai-gold .ai-status .dot, .app-agent-gold .ai-status .dot { background: var(--accent) !important; box-shadow: none !important; } .app-ai-gold .ai-avatar, .app-agent-gold .ai-avatar { background: linear-gradient(135deg, var(--accent-bri), var(--accent)) !important; color: var(--accent-ink) !important; box-shadow: none !important; } .app-ai-gold .ai-msg.a .ai-msg-bubble, .app-agent-gold .ai-msg.a .ai-msg-bubble { background: var(--tile) !important; border: 0.5px solid var(--line) !important; color: var(--fg) !important; border-radius: 14px 14px 14px 4px !important; box-shadow: var(--shadow-soft) !important; } .app-ai-gold .ai-msg.u .ai-msg-bubble, .app-agent-gold .ai-msg.u .ai-msg-bubble { background: var(--accent) !important; border: none !important; color: var(--accent-ink) !important; border-radius: 14px 14px 4px 14px !important; } .app-ai-gold .ai-send, .app-agent-gold .ai-send { background: var(--accent) !important; color: var(--accent-ink) !important; border: none !important; border-radius: 50% !important; } /* AI suggestion chips */ .ai-suggest, .ai-chip, .ai-quick, .ai-prompt-chip, .ai-sug { background: var(--tile) !important; border: 0.5px solid var(--line) !important; color: var(--fg) !important; border-radius: 999px !important; white-space: nowrap !important; } #power-led-hotspot { width: 260px !important; height: 170px !important; border-radius: 20px !important; } #power-led-hotspot:hover { background: color-mix(in oklch, var(--accent) 8%, transparent) !important; } /* ---------- SCREEN OVERLAY reveal — fades in as the laptop lid opens ---------- */ #screen-overlay { opacity: var(--lid-open, 1); } body[data-phase="desktop"] #screen-overlay, body[data-phase="transitioning"] #screen-overlay, body[data-phase="booting"] #screen-overlay { opacity: 1; } /* Fill the whole browser window — retire the 2D monitor bezel */ body[data-phase="desktop"] #screen-overlay, body[data-phase="transitioning"] #screen-overlay { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0 !important; } body[data-phase="desktop"] #m2d-frame, body[data-phase="transitioning"] #m2d-frame { display: none !important; } /* page strips (pre-boot) */ .page-strip { background: var(--bar) !important; border-color: var(--line) !important; color: var(--fg-dim) !important; } .strip-orb, .strip-stat .dot.live { background: var(--accent) !important; box-shadow: none !important; } /* ---------- NOTIFICATIONS (toasts) — glass card, matching windows/dock ---------- */ .toast-stack { top: 40px !important; right: 16px !important; gap: 10px !important; } .toast { background: var(--glass) !important; border: 0.5px solid var(--line-strong) !important; border-left: 0.5px solid var(--line-strong) !important; border-radius: 14px !important; padding: 12px 16px !important; min-width: 220px !important; max-width: 300px !important; backdrop-filter: blur(30px) saturate(1.5) !important; -webkit-backdrop-filter: blur(30px) saturate(1.5) !important; box-shadow: var(--shadow) !important; font-family: var(--sans) !important; color: var(--fg) !important; /* base toastIn keyframe restarts on frequent re-renders (clock tick etc.) and can stick at opacity:0, same class of bug as .os-window; force visible with !important (wins over the animation per cascade rules) — the slide-in transform still plays since we don't touch transform here */ opacity: 1 !important; animation: toastIn 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important; } .toast-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; } .toast-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); } .toast-h { color: var(--fg) !important; font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: none !important; margin-bottom: 0 !important; } .toast-msg { font-size: 12.5px !important; color: var(--fg-dim) !important; line-height: 1.45; } /* ============================================================ TYPE SCALE CORRECTION ============================================================ 106 caption/label/heading/button classes across the whole codebase were all hardcoded to the exact same font-size: 18px regardless of role — tiny uppercase eyebrow labels rendered at the same size as in-app headings, flattening the whole text hierarchy. Restoring a real scale (10 / 11 / 12 / 13 / 15px) matching the rest of the OS's existing UI-text sizes. */ .m2d-led, .scr-divider, .dpp-chip, .app-meta, .case-res-lbl, .sent-msg, .music-now, .settings-nav-item, .pro-tab, .pup-badge, .ps-head-status, .ps-history-title, .ps-thinking-tag, .ps-tab-action, .ps-code-header, .files-nav-section, .ai-msg-tag, .doom-logo-tag, .hud-lbl, .toast-h, .yt-player-ext, .pup-tier-cur, .pup-tier-sub, .start-foot-btn, .pup-fineprint, .pup-stripe-row span, .doom-end-stats span, .pup-plan-per, .files-nav-item, .fv-name, .browser-blocked-sub, .cal-sub, .yt-empty, .yt-player-meta, .yt-tile-duration, .auth-tab { font-size: 10px !important; } .theme-cell-name, .wp-cell-name, .slider-val, .toggle-btn, .pro-back, .hud-val, .pro-err, .files-toolbar, .np-toolbar, .browser-nav-btn, .ai-keymsg, .activity-feed, .ps-history-del, .ps-preview-url, .browser-url, .doom-menu-info, .pup-tier-features-out li, .ps-msg-thinking-bubble { font-size: 11px !important; } .start-search-clear, .pro-modal-x, .ps-hamburger, .ps-history-x, .fv-close, .hud-cross, .pro-cta, .pup-cta, .pup-plan-cta, .doom-diff-btn, .doom-back, .doom-next, .yt-go, .cal-cta a, .browser-blocked-btn, .m-btn, .m-btn.play, .ps-history-item-title { font-size: 12px !important; } .start-search-icon, .start-search-input, .text-input, .pro-input, .pup-lead, .pup-benefit-icon, .pup-stripe-input, .np-body, .browser-blocked-title, .file-row, .browser-tab, .browser-content, .browser-home-go, .settings-section-h, .ai-msg.action, .cal-cell, .toast, .ai-md .md-code, .m2d-brand::before, .auth-text { font-size: 13px !important; } .start-avatar, .start-name, .start-app-icon, .case-res-val, .team-name, .readme-h1, .music-track, .ai-avatar, .ai-h1, .cal-h, .hud-msg, .yt-player-title, .m-track, .doom-end-stats strong { font-size: 15px !important; } /* ============================================================ GLASSMORPHISM EVERYWHERE — match KONTO's frosted-glass look ============================================================ KONTO (.app-pro-account) paints no background of its own, so the window's own frosted glass (.os-window backdrop-filter blur) shows straight through it. Most other apps paint an opaque/solid-dark panel on top of that same glass and hide it completely. This section makes every app root transparent again, and gives inner side-rails / toolbars / cards a shared lighter frosted-glass treatment (blurred, translucent, thin border) instead of flat solid color — so the same see-through glass reads consistently in every app, exactly like KONTO. */ .app-terminal, .term-body, .app-readme, .app-music, .app-settings, .app-pro-upgrade, .app-pro-account, .app-notepad, .app-files, .app-browser, .browser-content, .browser-iframe, .app-ai, .app-ai-gold, .app-agent-gold, .app-stats-board, .app-cal, .app-yt, .app-yt-player, .ps-root { background: transparent !important; } /* side-rails / toolbars / headers — shared frosted-glass surface */ .settings-nav, .files-nav, .ps-code-pane, .ps-code-header, .ps-preview-bar, .browser-bar, .files-toolbar, .browser-tabs, .term-body { background: color-mix(in oklch, var(--tile) 42%, transparent) !important; backdrop-filter: blur(18px) saturate(1.4) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; border-color: var(--line) !important; } /* frosted-glass cards: stat tiles, plan/tier cards, calendar cells, stripe mock, url bars — light glass instead of solid dark blocks */ .cal-cell, .pup-tier, .pup-plan, .pup-stripe-mock, .ps-preview-url, .browser-url, .app-stats-board .stat { background: color-mix(in oklch, var(--tile) 50%, transparent) !important; backdrop-filter: blur(14px) saturate(1.3) !important; -webkit-backdrop-filter: blur(14px) saturate(1.3) !important; border-color: var(--line) !important; } .cal-cell.busy { background: color-mix(in oklch, #ff5577 16%, transparent) !important; } .cal-cell.free { background: color-mix(in oklch, var(--accent) 10%, transparent) !important; } .cal-cell.today { background: color-mix(in oklch, var(--accent) 18%, transparent) !important; } /* chat bubbles + suggestion chips get a touch of blur too, staying legible */ .ai-msg-bubble, .ps-msg-bubble, .ai-suggest, .ai-chip, .ai-quick, .ai-prompt-chip, .ai-sug { backdrop-filter: blur(12px) saturate(1.3) !important; -webkit-backdrop-filter: blur(12px) saturate(1.3) !important; }