/* PocketMote console design system — shared by the display and the controller. Dark is the default; `data-theme="light"` on swaps the tokens. */ :root { --bg: #06080d; --bg-2: #0a0d15; --panel-a: #161c27; --panel-b: #0d1119; --line: #232b3a; --line-soft: rgba(255, 255, 255, 0.06); --line-hi: rgba(255, 255, 255, 0.10); --ink: #e9eef8; --ink-dim: #8b98af; --ink-faint: #566179; --accent: #38e8ff; --accent-ink: #eafdff; --amber: #ffb340; --ok: #5dff9b; --danger: #ff5f6d; --p1: #35e6ff; --p2: #ffb545; --p3: #5dff9b; --p4: #ff5fa8; /* Raised controls (buttons, keycaps) and sunken surfaces (pads, wells). */ --raise-a: #1d2532; --raise-b: #121722; --raise-edge: rgba(0, 0, 0, 0.55); --sunken-a: #080b11; --sunken-b: #0b0f17; --sunken-shadow: rgba(0, 0, 0, 0.65); --tint: rgba(255, 255, 255, 0.03); --tint-strong: rgba(255, 255, 255, 0.06); --overlay: rgba(6, 8, 13, 0.92); --glow-primary: 0 0 30px -6px rgba(56, 232, 255, 0.55); --scan-opacity: 0.7; --bg-wash-1: rgba(56, 232, 255, 0.10); --bg-wash-2: rgba(255, 95, 168, 0.07); --r-sm: 10px; --r: 14px; --r-lg: 22px; --r-pill: 999px; --font-display: "Chakra Petch", "SF Pro Display", system-ui, sans-serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-ar: "Cairo", "Noto Sans Arabic", "Geeza Pro", system-ui, sans-serif; --shadow-lift: 0 18px 40px -18px rgba(0, 0, 0, 0.9); --ease: cubic-bezier(0.22, 1, 0.36, 1); } :root[data-theme="light"] { --bg: #eef2f8; --bg-2: #f7f9fc; --panel-a: #ffffff; --panel-b: #eef2f8; --line: #d2dae6; --line-soft: rgba(20, 32, 54, 0.07); --line-hi: rgba(255, 255, 255, 0.9); --ink: #131820; --ink-dim: #4a566d; --ink-faint: #77839a; --accent: #0b748a; --accent-ink: #ffffff; --amber: #a5660b; --ok: #177f45; --danger: #c02f3c; --p1: #0a89ab; --p2: #a86a09; --p3: #158048; --p4: #bf3480; --raise-a: #ffffff; --raise-b: #e7ecf4; --raise-edge: rgba(20, 32, 54, 0.18); --sunken-a: #e4eaf3; --sunken-b: #eef2f8; --sunken-shadow: rgba(20, 32, 54, 0.14); --tint: rgba(20, 32, 54, 0.035); --tint-strong: rgba(20, 32, 54, 0.07); --overlay: rgba(238, 242, 248, 0.94); --glow-primary: 0 6px 18px -8px rgba(11, 116, 138, 0.6); --scan-opacity: 0; --bg-wash-1: rgba(11, 116, 138, 0.08); --bg-wash-2: rgba(191, 52, 128, 0.06); --shadow-lift: 0 16px 34px -20px rgba(20, 32, 54, 0.45); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { /* Two pools of light behind everything, like a console under a TV. */ background-image: radial-gradient(1100px 620px at 50% -18%, var(--bg-wash-1), transparent 62%), radial-gradient(900px 520px at 110% 108%, var(--bg-wash-2), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg) 55%); background-attachment: fixed; transition: background-color 0.35s var(--ease), color 0.35s var(--ease); } h1, h2, h3, h4, .display-font { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; margin: 0; } button, input { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } [dir="rtl"], .ar { font-family: var(--font-ar); } /* ---------- wordmark ---------- */ .wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; display: inline-flex; align-items: baseline; gap: 0.06em; } .wordmark .wm-a { color: var(--ink); } .wordmark .wm-b { color: var(--accent); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); } .wordmark .wm-dot { width: 0.28em; height: 0.28em; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); align-self: center; margin-left: 0.18em; } /* ---------- surfaces ---------- */ .panel { position: relative; background: linear-gradient(180deg, var(--panel-a), var(--panel-b)); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift), inset 0 1px 0 var(--line-hi); } /* A hairline of light along the top edge — reads as a bevel. */ .panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--line-hi), transparent); pointer-events: none; } .panel-inset { background: linear-gradient(180deg, var(--sunken-a), var(--sunken-b)); border: 1px solid var(--line); border-radius: var(--r); box-shadow: inset 0 2px 10px var(--sunken-shadow); } /* ---------- buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; padding: 0.85em 1.6em; border-radius: var(--r-pill); border: 1px solid var(--line); background: linear-gradient(180deg, var(--raise-a), var(--raise-b)); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.09em; text-transform: uppercase; box-shadow: 0 6px 0 -2px var(--raise-edge), inset 0 1px 0 var(--line-hi); transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), border-color 0.2s; -webkit-tap-highlight-color: transparent; } .btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .btn:active, .btn.is-active { transform: translateY(2px); box-shadow: 0 2px 0 -1px var(--raise-edge), inset 0 2px 8px var(--sunken-shadow); } .btn[disabled] { opacity: 0.4; pointer-events: none; } .btn-primary { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, var(--panel-b)), color-mix(in srgb, var(--accent) 30%, var(--panel-b))); color: var(--accent-ink); box-shadow: 0 6px 0 -2px var(--raise-edge), inset 0 1px 0 var(--line-hi), var(--glow-primary); } .btn-primary:hover { border-color: var(--accent); } /* On light, the accent is already dark enough to carry white text — mixing it with the panel washes it out, so fill solid instead. */ :root[data-theme="light"] .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent)); border-color: var(--accent); } .btn-lg { padding: 1.15em 2.6em; font-size: 1.15rem; letter-spacing: 0.14em; } .btn-ghost { background: var(--tint); border-color: var(--line); color: var(--ink-dim); box-shadow: none; } .btn-ghost:hover { color: var(--ink); } /* ---------- player LEDs ---------- */ .leds { display: inline-flex; gap: 10px; } .led { width: 11px; height: 11px; border-radius: 50%; background: var(--sunken-a); border: 1px solid var(--line); box-shadow: inset 0 1px 2px var(--sunken-shadow); transition: background 0.25s, box-shadow 0.25s, border-color 0.25s; } .led.on { background: var(--led, var(--accent)); border-color: transparent; box-shadow: 0 0 12px 1px var(--led, var(--accent)), inset 0 0 4px rgba(255, 255, 255, 0.6); } /* ---------- chips, labels ---------- */ .chip { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.4em 0.85em; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--tint); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); font-family: var(--font-display); font-weight: 600; } .label { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); box-shadow: 0 0 8px currentColor; transition: background 0.3s; } .status-dot.online { background: var(--ok); box-shadow: 0 0 10px var(--ok); } .status-dot.warn { background: var(--amber); box-shadow: 0 0 10px var(--amber); } .status-dot.error { background: var(--danger); box-shadow: 0 0 10px var(--danger); } /* ---------- tilt pointer ---------- */ .pm-pointer { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 80; pointer-events: none; opacity: 0; transition: opacity 0.25s var(--ease); --pt: var(--accent); } .pm-pointer.is-on { opacity: 1; } .pm-pointer-ring, .pm-pointer-dot { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); } .pm-pointer-ring { width: 34px; height: 34px; border: 2px solid var(--pt); box-shadow: 0 0 18px -2px var(--pt), inset 0 0 10px -4px var(--pt); transition: width 0.2s var(--ease), height 0.2s var(--ease), opacity 0.2s; } .pm-pointer-dot { width: 7px; height: 7px; background: var(--pt); box-shadow: 0 0 12px var(--pt); } .pm-pointer.is-over .pm-pointer-ring { width: 46px; height: 46px; opacity: 0.75; } /* Anything the pointer can click. */ [data-pm-action] { transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s, background 0.2s; } [data-pm-disabled] { opacity: 0.4; } /* ---------- scanline / grain overlay ---------- */ .crt { position: fixed; inset: 0; pointer-events: none; z-index: 90; background-image: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 3px ); mix-blend-mode: overlay; opacity: var(--scan-opacity); transition: opacity 0.35s var(--ease); } /* ---------- animation utilities ---------- */ @keyframes pm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes pm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes pm-pop { 0% { transform: scale(0.9); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .pulse { animation: pm-pulse 1.6s ease-in-out infinite; } .rise { animation: pm-rise 0.45s var(--ease) both; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }