/* * os.u.cash — macOS-style desktop shell. * Top menu bar + bottom dock, frosted glass, rounded windows with traffic-light controls. * Light/dark via the shared .uxc-dark-mode class on (same convention as pay/portal/ai). * No em dashes. All classes are os- prefixed so the OS chrome never collides with framed apps. */ /* ---------------- theme tokens ---------------- */ :root { --os-bg: #e9eaee; --os-bg-2: #d9dbe2; --os-glow: rgba(163, 122, 41, 0.16); --os-panel: rgba(255, 255, 255, 0.72); --os-panel-solid: #ffffff; --os-panel-border: rgba(0, 0, 0, 0.10); --os-text: #1d1d1f; --os-text-mut: #5a5a60; --os-win-border: rgba(0, 0, 0, 0.16); --os-titlebar: rgba(236, 236, 240, 0.92); --os-accent: #a37a29; --os-tile: rgba(0, 0, 0, 0.05); --os-shadow: 0 22px 60px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.18); } .uxc-dark-mode { --os-bg: #0a0b10; --os-bg-2: #12141b; --os-glow: rgba(212, 168, 75, 0.18); --os-panel: rgba(28, 28, 32, 0.70); --os-panel-solid: #1c1c20; --os-panel-border: rgba(255, 255, 255, 0.12); --os-text: #f1f1f1; --os-text-mut: #9aa0a8; --os-win-border: rgba(0, 0, 0, 0.60); --os-titlebar: rgba(40, 40, 46, 0.96); --os-accent: #d4a84b; --os-tile: rgba(255, 255, 255, 0.07); --os-shadow: 0 26px 70px rgba(0, 0, 0, 0.66), 0 2px 10px rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body.os-shell, body.os-login { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif; color: var(--os-text); overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; } /* ---------------- wallpaper ---------------- */ .os-wallpaper { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1200px 800px at 18% 8%, var(--os-glow), transparent 60%), radial-gradient(1000px 760px at 86% 92%, var(--os-glow), transparent 62%), linear-gradient(160deg, var(--os-bg), var(--os-bg-2)); } /* ---------------- boot splash ---------------- */ .os-splash { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; transition: opacity .35s ease; } .os-splash-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--os-panel-border); border-top-color: var(--os-accent); animation: os-spin .8s linear infinite; } @keyframes os-spin { to { transform: rotate(360deg); } } /* ---------------- menu bar (top) ---------------- */ .os-menubar { position: fixed; top: 0; left: 0; right: 0; height: 30px; z-index: 9000; display: flex; align-items: center; gap: 2px; padding: 0 12px; background: var(--os-panel); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--os-panel-border); font-size: 13px; user-select: none; } .os-mb-left { display: flex; align-items: center; gap: 2px; } .os-mb-right { margin-left: auto; display: flex; align-items: center; gap: 2px; } .os-mb-btn { appearance: none; border: 0; background: transparent; color: var(--os-text); padding: 3px 9px; border-radius: 7px; cursor: pointer; font-size: 13px; line-height: 1; } .os-mb-btn:hover { background: var(--os-tile); } .os-mb-brand { font-weight: 800; letter-spacing: -0.01em; padding: 3px 8px; } .os-mb-brand b { color: var(--os-accent); } .os-mb-app { color: var(--os-text); font-weight: 600; padding: 3px 8px; } .os-mb-sep { width: 1px; height: 15px; background: var(--os-panel-border); margin: 0 6px; } .os-mb-clock { font-variant-numeric: tabular-nums; padding: 3px 8px; color: var(--os-text); } .os-mb-ico { width: 15px; height: 15px; display: block; } .os-mb-avatar { width: 19px; height: 19px; border-radius: 50%; object-fit: cover; vertical-align: middle; background: var(--os-tile); } /* account dropdown */ .os-mb-menu { position: fixed; z-index: 9500; min-width: 220px; padding: 6px; background: var(--os-panel-solid); border: 1px solid var(--os-panel-border); border-radius: 12px; box-shadow: var(--os-shadow); font-size: 13px; } .os-mb-menu-head { padding: 8px 10px; border-bottom: 1px solid var(--os-panel-border); margin-bottom: 4px; } .os-mb-menu-head .em { color: var(--os-text); font-weight: 600; word-break: break-all; } .os-mb-menu-head .wa { color: var(--os-text-mut); font-size: 11px; font-family: ui-monospace, monospace; } .os-mb-menu button { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left; background: transparent; border: 0; color: var(--os-text); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; } .os-mb-menu button:hover { background: var(--os-tile); } .os-mb-menu hr { border: 0; border-top: 1px solid var(--os-panel-border); margin: 4px 0; } /* ---------------- desktop workspace ---------------- */ .os-desktop { position: fixed; top: 30px; left: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden; } /* ---------------- dock (bottom) ---------------- */ .os-dock { position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 9000; display: flex; align-items: flex-end; gap: 6px; padding: 6px 8px; background: var(--os-panel); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border: 1px solid var(--os-panel-border); border-radius: 18px; box-shadow: var(--os-shadow); max-width: calc(100vw - 16px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .os-dock::-webkit-scrollbar { display: none; } .os-dock-item { position: relative; flex: 0 0 auto; width: 50px; height: 50px; border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: transform .16s cubic-bezier(.2,.8,.2,1.2); transform-origin: center bottom; } .os-dock-item:hover { transform: scale(1.28) translateY(-8px); z-index: 2; } .os-dock-item:active { transform: scale(1.1); } .os-dock-ic { width: 44px; height: 44px; border-radius: 11px; display: block; } .os-dock-letter { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 21px; color: var(--os-accent); background: var(--os-panel-solid); border: 1px solid var(--os-panel-border); } .os-dock-tip { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%) translateY(4px); background: var(--os-panel-solid); color: var(--os-text); border: 1px solid var(--os-panel-border); padding: 3px 9px; border-radius: 8px; font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s, transform .12s; box-shadow: var(--os-shadow); } .os-dock-item:hover .os-dock-tip { opacity: 1; transform: translateX(-50%) translateY(0); } .os-dock-dot { position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--os-text); opacity: 0; transition: opacity .12s; } .os-dock-item.is-running .os-dock-dot { opacity: .85; } .os-dock-sep { width: 1px; align-self: stretch; background: var(--os-panel-border); margin: 6px 3px; } /* ---------------- launchpad ---------------- */ .os-launchpad { position: fixed; inset: 0; z-index: 8500; padding: 80px 6vw 120px; display: flex; flex-direction: column; align-items: center; background: rgba(10, 11, 16, 0.32); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); animation: os-fade .18s ease; } .uxc-dark-mode .os-launchpad { background: rgba(0, 0, 0, 0.40); } @keyframes os-fade { from { opacity: 0; } to { opacity: 1; } } .os-lp-search { width: min(420px, 80vw); margin-bottom: 32px; padding: 9px 16px; border-radius: 10px; background: var(--os-panel-solid); border: 1px solid var(--os-panel-border); color: var(--os-text); font-size: 15px; outline: none; text-align: center; } .os-lp-search:focus { border-color: var(--os-accent); } .os-lp-grid { display: grid; grid-template-columns: repeat(auto-fill, 110px); gap: 18px 8px; justify-content: center; width: 100%; max-width: 1000px; overflow-y: auto; padding: 8px; } .os-lp-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 8px; background: transparent; border: 0; cursor: pointer; color: var(--os-text); border-radius: 14px; transition: background .12s, transform .1s; } .os-lp-tile:hover { background: var(--os-tile); transform: translateY(-2px); } .os-lp-ic { width: 60px; height: 60px; border-radius: 14px; display: block; } .os-lp-letter { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 27px; color: var(--os-accent); background: var(--os-panel-solid); border: 1px solid var(--os-panel-border); } .os-lp-name { font-size: 13px; font-weight: 500; text-align: center; line-height: 1.15; } /* ---------------- windows ---------------- */ .os-win { position: absolute; display: flex; flex-direction: column; min-width: 320px; min-height: 240px; background: var(--os-panel-solid); border: 1px solid var(--os-win-border); border-radius: 11px; box-shadow: var(--os-shadow); overflow: hidden; transition: box-shadow .2s, opacity .18s; } .os-win.os-opening { animation: os-win-pop .16s ease; } @keyframes os-win-pop { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } } .os-win.os-inactive { box-shadow: 0 10px 30px rgba(0,0,0,.20); } .os-win.os-min { display: none; } .os-win.os-max { border-radius: 0; } .os-win-tb { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: var(--os-titlebar); border-bottom: 1px solid var(--os-panel-border); cursor: default; user-select: none; position: relative; flex: 0 0 auto; } .os-win-tl { display: flex; align-items: center; gap: 8px; } .os-tl-btn { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background-clip: padding-box; } .os-tl-btn svg { width: 8px; height: 8px; opacity: 0; transition: opacity .1s; fill: rgba(0,0,0,.55); } .os-win-tb:hover .os-tl-btn svg { opacity: 1; } .os-tl-close { background: #ff5f57; } .os-tl-close:hover { background: #ff5f57; } .os-tl-min { background: #febc2e; } .os-tl-max { background: #28c840; } .os-win-title { position: absolute; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--os-text); pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 6px; } .os-win-title img { width: 16px; height: 16px; border-radius: 4px; } .os-win-title .lt { width: 16px; height: 16px; border-radius: 4px; display:inline-flex; align-items:center; justify-content:center; font-size: 10px; font-weight:800; color: var(--os-accent); } .os-win-body { position: relative; flex: 1 1 auto; overflow: hidden; background: var(--os-panel-solid); } .os-win-body iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; } .uxc-dark-mode .os-win-body iframe { background: #0a0b10; } .os-win-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--os-panel-solid); transition: opacity .25s; z-index: 2; } .os-win-loader .os-splash-spin { width: 26px; height: 26px; } /* external (non-frameable) window body */ .os-ext { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center; background: var(--os-panel-solid); } .os-ext-ic { width: 64px; height: 64px; border-radius: 16px; } .os-ext-name { font-size: 18px; font-weight: 700; } .os-ext-blurb { color: var(--os-text-mut); font-size: 14px; max-width: 340px; } .os-ext-btn { appearance: none; border: 0; cursor: pointer; padding: 11px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #1a1205; background: var(--os-accent); } .os-ext-btn:hover { filter: brightness(1.06); } /* resize handles */ .os-r { position: absolute; z-index: 3; } .os-r-n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; } .os-r-s { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; } .os-r-e { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; } .os-r-w { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; } .os-r-ne { top: -3px; right: -3px; width: 14px; height: 14px; cursor: nesw-resize; } .os-r-nw { top: -3px; left: -3px; width: 14px; height: 14px; cursor: nwse-resize; } .os-r-se { bottom: -3px; right: -3px; width: 14px; height: 14px; cursor: nwse-resize; } .os-r-sw { bottom: -3px; left: -3px; width: 14px; height: 14px; cursor: nesw-resize; } .os-win.os-max .os-r { display: none; } /* snap preview */ .os-snap { position: fixed; z-index: 8800; pointer-events: none; border-radius: 10px; background: var(--os-glow); border: 2px solid var(--os-accent); opacity: 0; transition: opacity .1s; } .os-snap.os-show { opacity: .8; } /* ---------------- login page ---------------- */ body.os-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(1000px 700px at 20% 10%, var(--os-glow), transparent 60%), radial-gradient(900px 680px at 84% 90%, var(--os-glow), transparent 62%), linear-gradient(160deg, var(--os-bg), var(--os-bg-2)); } .os-login-card { width: min(420px, 90vw); padding: 42px 36px; text-align: center; background: var(--os-panel); border: 1px solid var(--os-panel-border); border-radius: 22px; box-shadow: var(--os-shadow); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); animation: os-fade .3s ease; } .os-login-logo { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--os-text); } .os-login-logo span { color: var(--os-accent); } .os-login-title { font-size: 19px; font-weight: 700; margin: 22px 0 6px; } .os-login-sub { color: var(--os-text-mut); font-size: 14px; line-height: 1.5; margin: 0 0 26px; } .os-login-btn { display: block; text-decoration: none; padding: 13px 0; border-radius: 12px; font-size: 15px; font-weight: 600; color: #1a1205; background: var(--os-accent); transition: filter .12s, transform .1s; } .os-login-btn:hover { filter: brightness(1.06); } .os-login-btn:active { transform: scale(.99); } .os-login-link { display: inline-block; margin-top: 16px; color: var(--os-accent); font-size: 13px; text-decoration: none; } .os-login-link:hover { text-decoration: underline; } /* ---------------- mobile fallback ---------------- */ .os-mobile-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--os-panel); border-bottom: 1px solid var(--os-panel-border); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .os-mobile-bar .os-mb-brand { padding: 0; } .os-mobile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; padding: 24px 16px 80px; } .os-mobile-grid .os-lp-tile { padding: 6px; } .os-mobile-grid .os-lp-ic, .os-mobile-grid .os-lp-letter { width: 56px; height: 56px; } .os-mobile-grid .os-lp-letter { font-size: 24px; } @media (max-width: 820px) { .os-menubar, .os-dock { display: none !important; } }