/* ===================================================================== * German Eiland Voice - hardened client layout (dormant in JollyBeans v1). * * Focused voice surface: layered background, clear card, generous breathing room, * one hero element per phase, restrained animations (slow + soft). * Brand tokens mirror C:\IsleSkinWeb\frontend\assets\css\tokens.css. * ===================================================================== */ :root { color-scheme: dark; /* Surface */ --bg: #04060d; --surface-1: rgba(10, 14, 35, 0.72); --surface-2: rgba(18, 24, 56, 0.72); --surface-3: rgba(26, 33, 71, 0.55); --surface-glass: rgba(10, 14, 35, 0.55); --surface-hi: rgba(30, 144, 255, 0.06); /* Border */ --border-1: rgba(120, 150, 230, 0.16); --border-2: rgba(120, 150, 230, 0.30); --border-lit: rgba(30, 144, 255, 0.55); /* Ink */ --ink-1: #ecf0ff; --ink-2: #b8c2e3; --ink-3: #8892b8; --ink-4: #5a6a8f; /* Accent */ --accent: #1E90FF; --accent-hot: #00BFFF; --accent-grad: linear-gradient(135deg, #1E90FF 0%, #00BFFF 100%); --accent-glow: rgba(30, 144, 255, 0.45); /* Warm / Setup */ --warm: #f0a82c; --warm-hot: #ffc14a; --warm-grad: linear-gradient(135deg, #f0a82c 0%, #ffc14a 100%); --warm-glow: rgba(240, 168, 44, 0.4); /* Status */ --ok: #2ecc71; --warn: #f39c12; --err: #e74c3c; --danger: #ff6b6b; /* Type */ --sans: 'Inter', -apple-system, 'Segoe UI', system-ui, Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; /* Motion */ --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 450ms; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* Elevation */ --elev-1: 0 4px 12px rgba(0, 0, 0, 0.28); --elev-2: 0 18px 60px rgba(0, 0, 0, 0.45); --elev-3: 0 36px 100px rgba(0, 0, 0, 0.55); /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; } * { box-sizing: border-box; } /* CRITICAL: any element with the [hidden] attribute MUST be display:none regardless of class rules below. Otherwise rules like `.ptt-hint { display: flex }` silently shadow the attribute and the element stays visible. */ [hidden] { display: none !important; } html, body { margin: 0; min-height: 100vh; min-height: 100dvh; /* GLOBAL (not inside a media query): a fixed/absolute background layer overflows relative to , which otherwise has no horizontal clip. On phones that widens the layout viewport past 700px, so the mobile media queries never matched and the card stayed desktop-wide (right-edge clip). Clipping here keeps the layout viewport at device-width so they DO match. */ overflow-x: hidden; max-width: 100%; } html { /* Solid fallback in case .bg-aurora fails to render (CSS error, parse, etc). The aurora layer paints on top of this. */ background: var(--bg); } body { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink-1); background: transparent; /* let .bg-aurora show through */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative; /* establish stacking so bg-aurora layers below content */ } /* ===== Calm deep-space starfield ===== */ .bg-space { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(1200px 800px at 50% 0%, rgba(20, 30, 70, 0.5), transparent 70%), radial-gradient(900px 700px at 50% 100%, rgba(15, 25, 60, 0.4), transparent 70%), #02040a; } /* Voice shell sits above the background. */ .voice-shell { position: relative; z-index: 2; } /* ----- Distant nebula glow ----- */ .bg-nebula { position: absolute; top: 20%; left: 30%; width: 70vw; height: 70vw; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(30, 144, 255, 0.10) 0%, transparent 50%), radial-gradient(circle at 60% 60%, rgba(140, 100, 240, 0.08) 0%, transparent 55%); filter: blur(60px); opacity: 0.8; animation: nebula-drift 80s ease-in-out infinite; pointer-events: none; } @keyframes nebula-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, 30px) scale(1.05); } } /* ----- Star layers (3 parallax depths) ----- Each layer is a single element with many radial-gradient "dots" baked into background-image. The image tiles, so stars repeat across the viewport. Each layer pans + twinkles at different rates for parallax. */ .stars { position: absolute; inset: -20%; /* over-size so pan never reveals edge */ background-repeat: repeat; will-change: opacity, transform; } /* Far layer - tiny, dim, slow */ .stars-far { background-image: radial-gradient(0.6px 0.6px at 12% 18%, rgba(255, 255, 255, 0.55), transparent 50%), radial-gradient(0.7px 0.7px at 88% 72%, rgba(255, 255, 255, 0.60), transparent 50%), radial-gradient(0.5px 0.5px at 45% 35%, rgba(180, 200, 255, 0.50), transparent 50%), radial-gradient(0.6px 0.6px at 30% 80%, rgba(255, 255, 255, 0.55), transparent 50%), radial-gradient(0.7px 0.7px at 70% 25%, rgba(255, 255, 255, 0.60), transparent 50%), radial-gradient(0.5px 0.5px at 92% 12%, rgba(180, 200, 255, 0.50), transparent 50%), radial-gradient(0.6px 0.6px at 8% 55%, rgba(255, 255, 255, 0.55), transparent 50%), radial-gradient(0.5px 0.5px at 58% 88%, rgba(255, 255, 255, 0.50), transparent 50%), radial-gradient(0.7px 0.7px at 22% 62%, rgba(180, 200, 255, 0.55), transparent 50%), radial-gradient(0.5px 0.5px at 78% 48%, rgba(255, 255, 255, 0.55), transparent 50%); background-size: 380px 380px; animation: stars-twinkle-slow 9s ease-in-out infinite, stars-pan-slow 360s linear infinite; opacity: 0.7; } /* Mid layer - small, medium brightness */ .stars-mid { background-image: radial-gradient(0.9px 0.9px at 15% 22%, rgba(255, 255, 255, 0.85), transparent 55%), radial-gradient(1px 1px at 82% 68%, rgba(255, 255, 255, 0.85), transparent 55%), radial-gradient(0.8px 0.8px at 48% 40%, rgba(180, 220, 255, 0.75), transparent 55%), radial-gradient(1px 1px at 28% 75%, rgba(255, 255, 255, 0.85), transparent 55%), radial-gradient(0.9px 0.9px at 65% 28%, rgba(255, 255, 255, 0.85), transparent 55%), radial-gradient(1.1px 1.1px at 90% 50%, rgba(140, 180, 255, 0.80), transparent 55%), radial-gradient(0.8px 0.8px at 38% 58%, rgba(255, 255, 255, 0.80), transparent 55%), radial-gradient(0.9px 0.9px at 72% 82%, rgba(255, 255, 255, 0.80), transparent 55%), radial-gradient(1px 1px at 18% 88%, rgba(180, 220, 255, 0.75), transparent 55%), radial-gradient(0.9px 0.9px at 55% 15%, rgba(255, 255, 255, 0.85), transparent 55%); background-size: 480px 480px; animation: stars-twinkle-mid 6s ease-in-out infinite, stars-pan-mid 280s linear infinite; opacity: 0.8; } /* Near layer - slightly larger, brighter, faster pan */ .stars-near { background-image: radial-gradient(1.3px 1.3px at 20% 28%, rgba(255, 255, 255, 1), transparent 60%), radial-gradient(1.5px 1.5px at 78% 62%, rgba(0, 191, 255, 0.95), transparent 60%), radial-gradient(1.2px 1.2px at 50% 45%, rgba(255, 255, 255, 1), transparent 60%), radial-gradient(1.4px 1.4px at 35% 85%, rgba(180, 220, 255, 0.95), transparent 60%), radial-gradient(1.3px 1.3px at 88% 20%, rgba(255, 255, 255, 1), transparent 60%), radial-gradient(1.5px 1.5px at 12% 70%, rgba(255, 255, 255, 0.95), transparent 60%), radial-gradient(1.2px 1.2px at 60% 95%, rgba(0, 191, 255, 0.90), transparent 60%), radial-gradient(1.4px 1.4px at 95% 80%, rgba(255, 255, 255, 1), transparent 60%); background-size: 580px 580px; animation: stars-twinkle-fast 4s ease-in-out infinite, stars-pan-fast 200s linear infinite; opacity: 0.9; } @keyframes stars-twinkle-slow { 0%, 100% { opacity: 0.50; } 50% { opacity: 0.80; } } @keyframes stars-twinkle-mid { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.90; } } @keyframes stars-twinkle-fast { 0%, 100% { opacity: 0.65; } 50% { opacity: 1.00; } } @keyframes stars-pan-slow { to { transform: translate3d(-380px, -190px, 0); } } @keyframes stars-pan-mid { to { transform: translate3d(-480px, -240px, 0); } } @keyframes stars-pan-fast { to { transform: translate3d(-580px, -290px, 0); } } /* ----- Shooting stars ----- */ .shooting-star { position: absolute; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), rgba(0, 191, 255, 0.6), transparent); filter: blur(0.5px); opacity: 0; pointer-events: none; } /* Each shooting star has its own timing + path so they don't fire together. */ .shooting-star-a { top: 15%; left: -150px; animation: shoot-a 26s linear infinite; animation-delay: 4s; } .shooting-star-b { top: 55%; left: -150px; animation: shoot-b 38s linear infinite; animation-delay: 18s; } @keyframes shoot-a { 0% { transform: translate(0, 0) rotate(15deg); opacity: 0; } 3% { opacity: 1; } 10% { transform: translate(60vw, 30vh) rotate(15deg); opacity: 0; } 100% { transform: translate(60vw, 30vh) rotate(15deg); opacity: 0; } } @keyframes shoot-b { 0% { transform: translate(0, 0) rotate(-8deg); opacity: 0; } 3% { opacity: 1; } 9% { transform: translate(70vw, -10vh) rotate(-8deg); opacity: 0; } 100% { transform: translate(70vw, -10vh) rotate(-8deg); opacity: 0; } } /* ===== Layout ===== */ .voice-shell { min-height: 100vh; min-height: 100dvh; display: grid; /* minmax(0,1fr): without this an implicit grid column sizes to its widest min-content child (e.g. the nowrap /voicelink code or a long step line), which expands the column past the viewport and makes width:100% children overflow + clip on phones. This constrains the column to the container. */ grid-template-columns: minmax(0, 1fr); place-items: start center; padding: 48px 16px; /* Honor iOS/Android notch + home-indicator so the bottom CTA is never hidden under the browser chrome / safe-area inset. */ padding-bottom: max(48px, env(safe-area-inset-bottom)); } .voice-card { width: min(100%, 620px); max-width: 100%; min-width: 0; /* Long device-property names must wrap, never push the card past the viewport edge. */ overflow-wrap: break-word; word-wrap: break-word; padding: 40px; background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%); border: 1px solid var(--border-1); border-radius: var(--r-xl); box-shadow: var(--elev-3); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); animation: card-in 0.55s var(--ease) both; } @keyframes card-in { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ===== Hero ===== */ .hero { text-align: center; margin-bottom: 32px; position: relative; } .hero-mark { position: relative; width: 56px; height: 56px; margin: 0 auto 18px; } .hero-mark-dot { position: absolute; inset: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--accent-grad); border-radius: 50%; box-shadow: 0 0 24px var(--accent-glow); animation: mark-pulse 2.4s ease-in-out infinite; } .hero-mark-ring, .hero-mark-ring-2 { position: absolute; inset: 0; border: 1.5px solid var(--accent); border-radius: 50%; opacity: 0; animation: mark-ring 2.4s ease-out infinite; } .hero-mark-ring-2 { animation-delay: 1.2s; } @keyframes mark-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 24px var(--accent-glow); } 50% { transform: scale(1.15); box-shadow: 0 0 36px var(--accent-glow); } } @keyframes mark-ring { 0% { transform: scale(0.4); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } } .hero-eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-hot); } .hero-title { margin: 0 0 10px; font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; background: linear-gradient(180deg, #fff 0%, #b8c2e3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; } .conn-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 14px; background: var(--surface-1); border: 1px solid var(--border-1); border-radius: 999px; font-size: 12px; } .conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); transition: all var(--dur-base); } .conn-pill[data-state="connecting"] .conn-dot { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; } .conn-pill[data-state="connected"] .conn-dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.15); } .conn-pill[data-state="poor"] .conn-dot { background: var(--warn); } .conn-pill[data-state="lost"] .conn-dot, .conn-pill[data-state="disconnected"] .conn-dot { background: var(--err); } .conn-label { font-weight: 600; color: var(--ink-1); } .conn-meta { color: var(--ink-3); font-family: var(--mono); font-size: 11px; } @keyframes pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } /* ===== Notice ===== */ .notice { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--border-1); border-radius: var(--r-md); background: var(--surface-1); color: var(--ink-1); font-size: 13px; line-height: 1.5; } .notice-error { border-color: rgba(255, 107, 107, 0.4); background: rgba(231, 76, 60, 0.08); color: var(--danger); } .notice code { background: rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 4px; font-family: var(--mono); font-size: 12px; } /* ===== Setup banner (collapsed state of the setup card) ===== */ .setup-banner { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; margin-bottom: 24px; background: linear-gradient(180deg, rgba(240, 168, 44, 0.08), rgba(240, 168, 44, 0.02)); border: 1px solid rgba(240, 168, 44, 0.25); border-radius: var(--r-md); color: var(--ink-1); font-family: inherit; cursor: pointer; text-align: left; transition: all var(--dur-fast) var(--ease); animation: setup-in 0.35s var(--ease) both; } .setup-banner:hover { background: linear-gradient(180deg, rgba(240, 168, 44, 0.12), rgba(240, 168, 44, 0.04)); border-color: rgba(240, 168, 44, 0.4); transform: translateY(-1px); } .setup-banner-icon { font-size: 22px; line-height: 1; filter: drop-shadow(0 0 8px var(--warm-glow)); } .setup-banner-text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .setup-banner-text strong { font-size: 13px; font-weight: 700; color: var(--ink-1); } .setup-banner-sub { font-size: 11.5px; color: var(--ink-3); } .setup-banner-chev { font-size: 14px; color: var(--warm-hot); transition: transform var(--dur-fast); } .setup-banner:hover .setup-banner-chev { transform: translateY(2px); } /* ===== Setup card (Windows fix) ===== */ .setup-card { position: relative; padding: 24px; margin-bottom: 28px; background: linear-gradient(180deg, rgba(240, 168, 44, 0.06), rgba(240, 168, 44, 0.02)); border: 1px solid rgba(240, 168, 44, 0.25); border-radius: var(--r-lg); animation: setup-in 0.5s var(--ease) both; overflow: hidden; } /* A soft amber accent bar on the left - quiet, not screaming. */ .setup-card::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--warm-grad); box-shadow: 0 0 12px var(--warm-glow); animation: setup-bar 3.2s ease-in-out infinite; } @keyframes setup-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes setup-bar { 0%, 100% { opacity: 0.8; box-shadow: 0 0 10px var(--warm-glow); } 50% { opacity: 1; box-shadow: 0 0 18px var(--warm-glow); } } .setup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .setup-tag { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--warm-hot); background: rgba(240, 168, 44, 0.12); border: 1px solid rgba(240, 168, 44, 0.3); border-radius: 999px; } .setup-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-1); } .setup-lead { margin: 0 0 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; } .setup-lead strong { color: var(--ink-1); font-weight: 700; } .setup-time { display: inline-block; margin-left: 4px; color: var(--warm-hot); font-weight: 600; } .setup-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; } .setup-step { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 12px 14px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-1); border-radius: var(--r-md); transition: all var(--dur-base) var(--ease); opacity: 0; animation: step-in 0.45s var(--ease) forwards; } .setup-step:nth-child(1) { animation-delay: 0.15s; } .setup-step:nth-child(2) { animation-delay: 0.22s; } .setup-step:nth-child(3) { animation-delay: 0.29s; } .setup-step:nth-child(4) { animation-delay: 0.36s; } .setup-step:hover { background: rgba(30, 144, 255, 0.05); border-color: var(--border-2); transform: translateX(2px); } @keyframes step-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } .setup-step-key { background: linear-gradient(135deg, rgba(240, 168, 44, 0.10), rgba(240, 168, 44, 0.02)); border-color: rgba(240, 168, 44, 0.4); } .setup-step-key .step-n { background: var(--warm-grad); color: #04060d; box-shadow: 0 2px 10px var(--warm-glow); } .step-n { width: 28px; height: 28px; border-radius: 50%; background: rgba(120, 150, 230, 0.15); border: 1px solid var(--border-2); color: var(--ink-1); font-family: var(--mono); font-weight: 700; font-size: 13px; display: grid; place-items: center; align-self: start; } .step-c { font-size: 13px; color: var(--ink-2); line-height: 1.55; } .step-c em { color: var(--ink-1); font-style: normal; font-weight: 600; } .step-c strong { color: var(--ink-1); font-weight: 700; } .step-c .hl { color: var(--warm-hot); background: rgba(240, 168, 44, 0.12); padding: 1px 6px; border-radius: 4px; } .step-aside { display: block; margin-top: 4px; font-size: 11.5px; color: var(--warm-hot); font-style: italic; } /* ===== Connect stage ===== */ .connect-stage { text-align: center; padding: 12px 0 8px; } .btn-mega { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 18px 56px; border: 0; border-radius: 999px; background: var(--accent-grad); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 12px 40px var(--accent-glow), 0 0 0 1px rgba(0, 191, 255, 0.3) inset; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); overflow: hidden; isolation: isolate; } .btn-mega:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 50px var(--accent-glow), 0 0 0 1px rgba(0, 191, 255, 0.5) inset; } .btn-mega:active:not(:disabled) { transform: translateY(0); } .btn-mega:disabled { opacity: 0.55; cursor: not-allowed; } .btn-mega-label { position: relative; z-index: 1; } /* Outer glow that breathes - invites the click. */ .btn-mega-glow { position: absolute; inset: -30%; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%); filter: blur(20px); opacity: 0.6; z-index: 0; animation: cta-breathe 2.6s ease-in-out infinite; } @keyframes cta-breathe { 0%, 100% { opacity: 0.45; transform: scale(0.95); } 50% { opacity: 0.75; transform: scale(1.05); } } /* Subtle shimmer sweeping across the button surface every 5s. */ .btn-mega::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%); transform: skewX(-20deg); animation: shimmer 5s ease-in-out infinite; z-index: 1; pointer-events: none; } @keyframes shimmer { 0%, 50% { left: -100%; } 70% { left: 120%; } 100% { left: 120%; } } .connect-hint { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-3); } /* ===== Live phase - mic visualizer ===== */ .voice-stage { margin-bottom: 18px; padding: 22px 24px; background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-lg); position: relative; overflow: hidden; } .mic-vis { display: grid; gap: 12px; } .mic-vis-track { height: 14px; background: var(--surface-3); border-radius: 999px; overflow: hidden; position: relative; } .mic-vis-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #1E90FF 0%, #00BFFF 60%, #2ecc71 80%, #f0a82c 95%, #e74c3c 100%); background-size: 200% 100%; transition: width 50ms linear; animation: mic-fill-flow 6s linear infinite; box-shadow: 0 0 14px rgba(30, 144, 255, 0.4); } /* When the user has clicked Mute, gray out the visualizer so it's obvious we're not transmitting. The fill is forced to 0 in JS too. */ .voice-stage.is-muted .mic-vis-track { background: rgba(231, 76, 60, 0.10); box-shadow: inset 0 0 0 1px rgba(231, 76, 60, 0.3); } .voice-stage.is-muted .mic-vis-fill { background: linear-gradient(90deg, rgba(231, 76, 60, 0.5), rgba(231, 76, 60, 0.3)); box-shadow: none; animation: none; } .voice-stage.is-muted .mic-vis-label::after { content: " - muted"; color: var(--danger); font-weight: 600; } @keyframes mic-fill-flow { to { background-position: 200% 0; } } .mic-vis-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .mic-vis-label { color: var(--ink-2); font-weight: 600; letter-spacing: 0.02em; } .mic-vis-mode { color: var(--ink-3); font-family: var(--mono); font-size: 11px; padding: 2px 8px; background: var(--surface-3); border-radius: 999px; } /* ===== PTT hint ===== */ .ptt-hint { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 14px; background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-md); font-size: 13px; color: var(--ink-2); } .ptt-hint kbd { display: inline-block; padding: 2px 10px; margin: 0 2px; font-family: var(--mono); font-size: 11px; color: var(--ink-1); background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 4px; } .ptt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); transition: all var(--dur-fast); } .ptt-dot.active { background: var(--ok); box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.25), 0 0 12px rgba(46, 204, 113, 0.6); } /* ===== Controls ===== */ .controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; } .ctrl { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-md); color: var(--ink-1); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--dur-fast) var(--ease); } .ctrl:hover { background: var(--surface-hi); border-color: var(--border-lit); transform: translateY(-1px); } .ctrl:active { transform: translateY(0); } .ctrl-icon { font-size: 22px; line-height: 1; } .ctrl-label { font-size: 12px; } .ctrl-key { margin-top: 2px; padding: 1px 6px; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ink-3); background: var(--surface-3); border: 1px solid var(--border-1); border-radius: 4px; } .ctrl[data-active="true"] { background: rgba(231, 76, 60, 0.15); border-color: rgba(231, 76, 60, 0.5); color: var(--danger); } .ctrl-danger:hover { color: var(--danger); border-color: rgba(255, 107, 107, 0.5); background: rgba(231, 76, 60, 0.08); } /* ===== Participants ===== */ .parts { margin-bottom: 16px; background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-lg); overflow: hidden; } .parts-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border-1); background: rgba(255, 255, 255, 0.015); } .parts-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-3); } .parts-count { font-family: var(--mono); font-size: 12px; color: var(--ink-1); padding: 2px 10px; background: var(--surface-3); border-radius: 999px; min-width: 28px; text-align: center; } .parts-list { padding: 4px 0; } .parts-empty { padding: 36px 18px; text-align: center; color: var(--ink-3); } .parts-empty p { margin: 0; } .parts-empty p + p { margin-top: 4px; } .parts-empty-sub { font-size: 12px; color: var(--ink-4); } .parts-empty-icon { font-size: 28px; color: var(--ink-4); margin-bottom: 6px; line-height: 1; } .participant-row { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 14px; padding: 10px 18px; border-top: 1px solid rgba(120, 150, 230, 0.06); transition: background var(--dur-fast); animation: part-row-in 0.4s var(--ease) both; } .participant-row:first-child { border-top: 0; } .participant-row:hover { background: var(--surface-hi); } @keyframes part-row-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .participant-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--border-1); overflow: hidden; flex-shrink: 0; transition: all var(--dur-base) var(--ease); } .participant-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .participant-avatar.speaking { border-color: var(--accent-hot); animation: avatar-speak 1.4s ease-in-out infinite; } @keyframes avatar-speak { 0%, 100% { box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.2), 0 0 14px rgba(0, 191, 255, 0.25); } 50% { box-shadow: 0 0 0 4px rgba(0, 191, 255, 0.35), 0 0 26px rgba(0, 191, 255, 0.6); } } .participant-meta { min-width: 0; } .participant-name { font-size: 13.5px; font-weight: 600; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--dur-fast); } .participant-row.speaking .participant-name { color: var(--accent-hot); } .participant-sub { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 1px; } .participant-volume { width: 100px; accent-color: var(--accent); cursor: pointer; } .participant-mute { width: 30px; height: 30px; padding: 0; background: transparent; border: 1px solid var(--border-1); border-radius: 6px; color: var(--ink-3); font-size: 13px; cursor: pointer; transition: all var(--dur-fast); } .participant-mute:hover { color: var(--danger); border-color: rgba(255, 107, 107, 0.5); background: rgba(255, 107, 107, 0.08); } .participant-mute[data-muted="true"] { color: var(--danger); background: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.5); } /* ===== Stats ===== */ .stats { padding: 12px 18px; border: 1px solid var(--border-1); border-radius: var(--r-md); background: var(--surface-1); } .stats summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2); user-select: none; list-style: none; } .stats summary::before { content: "> "; color: var(--ink-3); } .stats[open] summary::before { content: "v "; } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-1); } .stat { display: flex; justify-content: space-between; font-size: 12px; } .stat-wide { grid-column: 1 / -1; } .stat-k { color: var(--ink-3); } .stat-v { color: var(--ink-1); font-family: var(--mono); } .stat-v.mono { font-size: 11px; } /* ===== Status log + audio area ===== */ .status-log { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); white-space: pre-wrap; max-height: 40px; overflow-y: auto; opacity: 0.5; } .status-log:empty { display: none; } .audio-area { display: none; } /* ===== Buttons (generic) ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--border-1); border-radius: var(--r-md); background: var(--surface-1); color: var(--ink-1); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--dur-fast) var(--ease); text-decoration: none; white-space: nowrap; } .btn:hover:not(:disabled) { border-color: var(--border-lit); background: var(--surface-hi); } .btn:disabled { cursor: not-allowed; opacity: 0.5; } .btn-primary { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: 0 4px 14px var(--accent-glow); } .btn-primary:hover:not(:disabled) { box-shadow: 0 8px 22px var(--accent-glow); border-color: transparent; } .btn-soft { background: rgba(255, 255, 255, 0.03); color: var(--ink-2); } .btn-soft:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); color: var(--ink-1); border-color: var(--border-2); } .btn-small { padding: 5px 12px; font-size: 12px; } .icon-btn { width: 28px; height: 28px; padding: 0; background: transparent; border: 1px solid var(--border-1); border-radius: 6px; color: var(--ink-3); font-size: 13px; cursor: pointer; transition: all var(--dur-fast); } .icon-btn:hover { color: var(--ink-1); border-color: var(--border-lit); background: var(--surface-hi); } /* ===== Settings dialog ===== */ .settings-dialog { width: min(100%, 460px); padding: 0; border: 1px solid var(--border-1); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); color: var(--ink-1); box-shadow: var(--elev-3); backdrop-filter: blur(20px); } .settings-dialog::backdrop { background: rgba(4, 6, 13, 0.7); backdrop-filter: blur(6px); } .settings-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border-1); } .settings-head h2 { margin: 0; font-size: 16px; font-weight: 700; } .settings-section { padding: 16px 22px; border-bottom: 1px solid var(--border-1); } .settings-section h3 { margin: 0 0 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-3); } .radio-row { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; cursor: pointer; } .radio-row em { color: var(--ink-3); font-style: normal; font-weight: 400; font-size: 12px; } .select-row, .slider-row { display: grid; grid-template-columns: 90px 1fr 52px; gap: 12px; align-items: center; padding: 6px 0; font-size: 13px; } .select-row { grid-template-columns: 90px 1fr; } .select-row select { padding: 6px 10px; background: var(--surface-1); border: 1px solid var(--border-1); border-radius: 6px; color: var(--ink-1); font-family: inherit; font-size: 13px; } .slider-row input[type="range"] { accent-color: var(--accent); } .slider-val { font-family: var(--mono); font-size: 12px; color: var(--ink-2); text-align: right; } .settings-sub { margin-top: 10px; padding: 12px 14px; background: var(--surface-1); border-radius: 10px; } .settings-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); } .settings-foot { padding: 16px 22px; display: flex; justify-content: flex-end; } /* ===== Responsive ===== */ @media (max-width: 560px) { /* stretch (not center) so a child wider than the track can't be pushed off the left edge into unscrollable space. */ .voice-shell { padding: 24px 12px; padding-bottom: max(24px, env(safe-area-inset-bottom)); place-items: start stretch; } .voice-card { width: 100%; padding: 24px 20px; border-radius: var(--r-lg); max-width: 100vw; overflow-x: hidden; } /* Root cause of the right-edge clip: a grid/flex descendant (the controls / setup-step grids) keeps its default min-width:auto = min-content, which sets a ~480px floor that overflows a 390px phone. Letting every descendant shrink below its content removes the floor so the card fits the viewport. */ .voice-card * { min-width: 0; } .hero-title { font-size: 28px; } .controls { grid-template-columns: 1fr 1fr; } /* Fluid CTA: fill the card width but keep a comfortable >=44px tap target. */ .btn-mega { width: 100%; max-width: 100%; padding: 16px 24px; min-height: 52px; font-size: 15px; } .setup-card { padding: 20px 16px; } .stats-grid { grid-template-columns: 1fr; } /* Keep every interactive control comfortably tappable on touch. */ .ctrl { min-height: 64px; } .participant-volume { width: 80px; } } /* Small phones (~<=400px): the warning box + step text were clipping the right edge. Tighten padding, shrink the step gutter, and force wrap. */ @media (max-width: 400px) { .voice-shell { padding: 18px 10px; padding-bottom: max(18px, env(safe-area-inset-bottom)); } .voice-card { padding: 20px 16px; } .hero-title { font-size: 25px; } .setup-card { padding: 18px 14px; } .setup-step { grid-template-columns: 24px 1fr; gap: 10px; padding: 10px 12px; } .notice { padding: 12px 14px; } .btn-mega { padding: 16px 18px; } /* Avatar + name + volume + mute can crowd; let the volume slider shrink. */ .participant-row { grid-template-columns: 36px 1fr auto auto; gap: 10px; padding: 10px 14px; } .participant-volume { width: 64px; } .parts-head, .stats { padding-left: 14px; padding-right: 14px; } } /* On touch devices, ensure the hover-driven controls still meet the 44px minimum target even if a narrow viewport is not triggered. */ @media (pointer: coarse) { .ctrl, .btn-mega, .btn, .icon-btn, .participant-mute, .setup-banner { min-height: 44px; } .icon-btn, .participant-mute { min-width: 44px; } } /* ===== Reduced motion ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* German Eiland base override; final theme treatment is in voice-theme.css. */ :root { --bg: #07060c; --surface-1: rgba(22, 16, 34, 0.78); --surface-2: rgba(33, 22, 51, 0.76); --surface-3: rgba(42, 21, 81, 0.58); --surface-glass: rgba(21, 15, 34, 0.58); --surface-hi: rgba(168, 85, 247, 0.08); --border-1: rgba(244, 236, 227, 0.16); --border-2: rgba(168, 85, 247, 0.32); --border-lit: rgba(168, 85, 247, 0.62); --ink-1: #f4ece3; --ink-2: #dcc7ae; --ink-3: #ad9276; --ink-4: #715842; --accent: #8b5cf6; --accent-hot: #a855f7; --accent-grad: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%); --accent-glow: rgba(139, 92, 246, 0.45); --warm: #f4c247; --warm-hot: #ffd76a; --warm-grad: linear-gradient(135deg, #f4c247 0%, #ffd76a 100%); --warm-glow: rgba(244, 194, 71, 0.38); --sans: 'Inter', -apple-system, 'Segoe UI', system-ui, Roboto, sans-serif; --display: 'Bebas Neue', 'Inter', sans-serif; } .hero-title, .hero-eyebrow { font-family: var(--display); letter-spacing: 0; } .bg-space { background: radial-gradient(1000px 680px at 50% 0%, rgba(139, 92, 246, 0.20), transparent 70%), radial-gradient(900px 700px at 50% 100%, rgba(42, 21, 81, 0.45), transparent 72%), #07060c; } .mic-vis-fill { background: linear-gradient(90deg, #8b5cf6 0%, #a855f7 62%, #2ecc71 82%, #f4c247 95%, #e74c3c 100%); } .participant-avatar.speaking { border-color: var(--accent-hot); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.24), 0 0 24px rgba(139, 92, 246, 0.5); } /* 4k-responsive backstop: on phones/tablets, take the voice card out of the grid entirely (block layout) so it simply fills the viewport width and can never be held wider by a grid min-content floor. Desktop (>700px) keeps the original centered grid layout untouched. */ @media (max-width: 700px) { html, body { overflow-x: hidden !important; max-width: 100%; } .voice-shell { display: block !important; padding-left: 14px !important; padding-right: 14px !important; } /* HARD viewport cap: max-width:calc(100vw - 28px) cannot be exceeded by any child, so the card is guaranteed to fit the phone width minus the shell's 14px gutters; overflow:hidden clips any residual too-wide descendant so it wraps/clips INSIDE the card instead of pushing the card past the edge. */ /* Use min(100%, calc(100vw - 44px)): 100% is parent-relative (correctly excludes a scrollbar gutter); the 100vw term is a belt-and-suspenders cap that also leaves room for a vertical-scrollbar gutter (100vw INCLUDES it), so the card never overflows whether scrollbars are overlay (mobile) or classic (desktop-narrow). */ .voice-card { width: 100% !important; max-width: min(100%, calc(100vw - 44px)) !important; min-width: 0 !important; margin: 0 !important; overflow: hidden !important; } .voice-card * { min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere; } .voice-card pre, .voice-card code { white-space: pre-wrap !important; word-break: break-word; } } /* Standalone home link for the voice page. */ .voice-home { position: fixed; top: 16px; left: 18px; z-index: 50; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 10px; font: 700 11px/1 var(--sans, 'Inter', sans-serif); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--ink-2, #dcc7ae); background: var(--surface-glass, rgba(21,15,34,.58)); border: 1px solid var(--border-2, rgba(168,85,247,.32)); backdrop-filter: blur(10px); transition: color .15s ease, border-color .15s ease, transform .15s ease; } .voice-home:hover { color: var(--ink-1, #f4ece3); border-color: var(--accent, #8b5cf6); transform: translateY(-1px); } @media (max-width: 600px) { .voice-home { top: 10px; left: 10px; padding: 8px 12px; font-size: 10px; } }