/* ─── Gleeman.fm — Player client styles ───────────────────────────────── * * Brand-consistent with gleeman.app: themed accent palette, hero * background image, glass-panel cards. Ten themes mirror the main app * (fantasy default). The `data-theme` attribute on drives * everything via CSS custom properties, and a matching wallpaper * lights up as the body background. * * Readability rules: * - All text & controls sit on a glass-panel card with high-contrast * text, regardless of the wallpaper. * - A dark tint overlay covers the hero image at 58–72% opacity. * - Parchment/hullbreach (light themes) flip to a light overlay and * dark ink on the card. * ──────────────────────────────────────────────────────────────────── */ /* ─── Default palette (fantasy) ──────────────────────────────────────── */ :root, :root[data-theme="fantasy"] { --bg: #1a0a0e; --panel: rgba(22, 10, 14, 0.72); --panel-border: rgba(233, 69, 96, 0.22); --panel-solid: rgba(10, 4, 6, 0.82); --text: #f3e8e8; --text-dim: #b89796; --accent: #e94560; --accent-fg: #1a0006; --accent-soft: rgba(233, 69, 96, 0.18); --accent-dim: #c43651; --accent-glow: rgba(233, 69, 96, 0.55); --warn: #f6b155; --err: #f87171; --overlay-tint: rgba(10, 2, 4, 0.62); --wallpaper: url('/wallpaper%20-%20fantasy.jpg'); --hero-fallback: radial-gradient(ellipse at 50% 60%, rgba(60,20,28,0.75) 0%, rgba(14,6,8,0.95) 60%, #0b0306 100%); --radius: 16px; --shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.04) inset; --thumb-ring: rgba(233, 69, 96, 0.45); } /* ─── Themes ─────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --bg: #0a0c14; --panel: rgba(12, 16, 24, 0.72); --panel-border: rgba(74, 127, 181, 0.24); --panel-solid: rgba(6, 8, 14, 0.82); --text: #d8dde8; --text-dim: #7d8696; --accent: #4a7fb5; --accent-fg: #04101c; --accent-soft: rgba(74, 127, 181, 0.2); --accent-dim: #3a6a9a; --accent-glow: rgba(74, 127, 181, 0.5); --overlay-tint: rgba(4, 6, 12, 0.66); --wallpaper: url('/wallpaper%20-%20midnight.jpg'); --hero-fallback: radial-gradient(ellipse at 50% 55%, rgba(20,30,50,0.70) 0%, rgba(4,6,14,0.95) 60%, #02040a 100%); --thumb-ring: rgba(100, 158, 220, 0.5); } :root[data-theme="arcane"] { --bg: #0c0814; --panel: rgba(18, 10, 28, 0.72); --panel-border: rgba(168, 85, 247, 0.28); --panel-solid: rgba(10, 4, 18, 0.84); --text: #ebe2f6; --text-dim: #9880b4; --accent: #a855f7; --accent-fg: #140820; --accent-soft: rgba(168, 85, 247, 0.2); --accent-dim: #9333ea; --accent-glow: rgba(168, 85, 247, 0.55); --overlay-tint: rgba(7, 4, 14, 0.64); --wallpaper: url('/wallpaper%20-%20arcane.jpg'); --hero-fallback: radial-gradient(ellipse at 50% 50%, rgba(40,20,80,0.70) 0%, rgba(8,4,18,0.95) 60%, #050310 100%); --thumb-ring: rgba(185, 110, 255, 0.55); } :root[data-theme="scifi"] { --bg: #020604; --panel: rgba(4, 14, 10, 0.72); --panel-border: rgba(60, 220, 160, 0.24); --panel-solid: rgba(2, 8, 6, 0.82); --text: #d9f5e5; --text-dim: #7ab79a; --accent: #34d399; --accent-fg: #01120a; --accent-soft: rgba(52, 211, 153, 0.16); --accent-dim: #1eb47d; --accent-glow: rgba(52, 211, 153, 0.55); --overlay-tint: rgba(1, 4, 2, 0.62); --wallpaper: url('/wallpaper%20-%20scifi.jpg'); --hero-fallback: radial-gradient(ellipse at 50% 50%, rgba(10,40,28,0.70) 0%, rgba(2,6,4,0.95) 60%, #010402 100%); --thumb-ring: rgba(52, 211, 153, 0.55); } :root[data-theme="western"] { --bg: #1a0e02; --panel: rgba(28, 18, 6, 0.75); --panel-border: rgba(210, 155, 60, 0.24); --panel-solid: rgba(14, 8, 2, 0.85); --text: #f3e4c3; --text-dim: #b99770; --accent: #d69a34; --accent-fg: #1a0e00; --accent-soft: rgba(214, 154, 52, 0.2); --accent-dim: #b77e24; --accent-glow: rgba(214, 154, 52, 0.55); --overlay-tint: rgba(14, 9, 2, 0.62); --wallpaper: url('/wallpaper%20-%20western.jpg'); --hero-fallback: radial-gradient(ellipse at 50% 60%, rgba(60,32,8,0.70) 0%, rgba(14,9,2,0.95) 60%, #0a0601 100%); --thumb-ring: rgba(214, 154, 52, 0.5); } :root[data-theme="dusk"] { --bg: #0a0410; --panel: rgba(16, 10, 28, 0.74); --panel-border: rgba(220, 120, 180, 0.24); --panel-solid: rgba(8, 4, 16, 0.84); --text: #f0dff0; --text-dim: #b393b2; --accent: #f18fb3; --accent-fg: #2a0819; --accent-soft: rgba(241, 143, 179, 0.2); --accent-dim: #d86d97; --accent-glow: rgba(241, 143, 179, 0.5); --overlay-tint: rgba(8, 4, 12, 0.62); --wallpaper: url('/wallpaper%20-%20dusk.jpg'); --hero-fallback: radial-gradient(ellipse at 40% 55%, rgba(52,24,60,0.72) 0%, rgba(10,4,16,0.95) 60%, #060210 100%); --thumb-ring: rgba(241, 143, 179, 0.5); } :root[data-theme="tide"] { --bg: #02080a; --panel: rgba(4, 14, 18, 0.74); --panel-border: rgba(90, 188, 210, 0.24); --panel-solid: rgba(2, 8, 10, 0.84); --text: #e0f4f8; --text-dim: #7ca9b4; --accent: #5ebcd2; --accent-fg: #03161a; --accent-soft: rgba(94, 188, 210, 0.2); --accent-dim: #3f9db4; --accent-glow: rgba(94, 188, 210, 0.55); --overlay-tint: rgba(1, 5, 7, 0.62); --wallpaper: url('/wallpaper%20-%20tide.jpg'); --hero-fallback: radial-gradient(ellipse at 55% 60%, rgba(4,38,46,0.70) 0%, rgba(1,5,7,0.95) 60%, #01080c 100%); --thumb-ring: rgba(94, 188, 210, 0.5); } :root[data-theme="pirate"] { --bg: #060a10; --panel: rgba(10, 18, 28, 0.74); --panel-border: rgba(190, 160, 80, 0.24); --panel-solid: rgba(5, 9, 14, 0.84); --text: #e7ded0; --text-dim: #a89a80; --accent: #caa85c; --accent-fg: #1a1004; --accent-soft: rgba(202, 168, 92, 0.2); --accent-dim: #a68a46; --accent-glow: rgba(202, 168, 92, 0.5); --overlay-tint: rgba(8, 10, 16, 0.62); --wallpaper: url('/wallpaper%20-%20pirate.jpg'); --hero-fallback: radial-gradient(ellipse at 45% 60%, rgba(24,32,44,0.70) 0%, rgba(8,10,16,0.95) 60%, #04060a 100%); --thumb-ring: rgba(202, 168, 92, 0.5); } :root[data-theme="parchment"] { --bg: #efe4cc; --panel: rgba(252, 244, 222, 0.86); --panel-border: rgba(110, 78, 40, 0.24); --panel-solid: rgba(252, 244, 222, 0.96); --text: #3a2a14; --text-dim: #7d6448; --accent: #b57a2a; --accent-fg: #fff8e8; --accent-soft: rgba(181, 122, 42, 0.14); --accent-dim: #935f1c; --accent-glow: rgba(181, 122, 42, 0.4); --overlay-tint: rgba(240, 222, 190, 0.45); --wallpaper: url('/wallpaper%20-%20parchment.jpg'); --hero-fallback: radial-gradient(ellipse at 50% 45%, rgba(244,232,208,0.65) 0%, rgba(224,208,180,0.90) 60%, #d8c8a4 100%); --thumb-ring: rgba(181, 122, 42, 0.35); } :root[data-theme="hullbreach"] { --bg: #f6f6f6; --panel: rgba(255, 255, 255, 0.88); --panel-border: rgba(40, 50, 70, 0.18); --panel-solid: rgba(255, 255, 255, 0.96); --text: #1a1f2a; --text-dim: #546072; --accent: #d02c3a; --accent-fg: #ffffff; --accent-soft: rgba(208, 44, 58, 0.12); --accent-dim: #b02232; --accent-glow: rgba(208, 44, 58, 0.35); --overlay-tint: rgba(246, 246, 246, 0.55); --wallpaper: url('/wallpaper%20-%20hull%20breach.jpg'); --hero-fallback: radial-gradient(ellipse at 50% 50%, rgba(230,230,230,0.75) 0%, rgba(246,246,246,0.95) 60%, #fff 100%); --thumb-ring: rgba(208, 44, 58, 0.35); } /* ─── Base reset ─────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Wallpaper rides directly on (as a fixed-attachment background) so iOS Safari can't hide it behind the root canvas like it did with the negative-z-index layer. --bg acts as the solid fallback while the image loads (or if it fails). */ html { background: var(--bg); } body { background-image: var(--wallpaper, none), var(--hero-fallback, none); background-repeat: no-repeat, no-repeat; background-position: center 35%, center; background-size: cover, cover; background-attachment: fixed, fixed; background-color: var(--bg); } /* Dark/light tint overlay on top of the body wallpaper (was on #hero-bg ::after). Sits below all page content so it just softens the image. */ body::before { content: ''; position: fixed; inset: 0; background: var(--overlay-tint); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 0; pointer-events: none; } body { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 16px; padding-bottom: max(28px, env(safe-area-inset-bottom)); } /* Legacy #hero-bg node — kept in DOM for backwards compat but now just a no-op; wallpaper is painted directly on above. */ #hero-bg { display: none; } /* Ambient glow — subtle accent-color pulse above the wallpaper tint. */ .hero-glow { position: fixed; width: 60vmin; height: 60vmin; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%); filter: blur(60px); opacity: 0.65; z-index: 1; pointer-events: none; animation: heroPulse 10s ease-in-out infinite; } .hero-glow.top { top: -20vmin; left: 50%; transform: translateX(-50%); } .hero-glow.bottom { bottom: -25vmin; left: 50%; transform: translateX(-50%); animation-delay: -5s; opacity: 0.45; } @keyframes heroPulse { 0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(1); } 50% { opacity: 0.75; transform: translateX(-50%) scale(1.15); } } @media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; } } .app { width: 100%; max-width: 420px; position: relative; z-index: 2; } /* ─── Brand header ───────────────────────────────────────────────────── */ .brand { text-align: center; margin-bottom: 24px; } .brand-mark { display: block; width: 96px; height: 96px; margin: 0 auto 10px; object-fit: contain; filter: drop-shadow(0 0 18px var(--accent-glow)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)); } :root[data-theme="parchment"] .brand-mark, :root[data-theme="hullbreach"] .brand-mark { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18)); } .brand-logo { font-family: 'Cinzel', Georgia, serif; font-size: 30px; font-weight: 900; letter-spacing: 0.03em; color: var(--accent); text-transform: uppercase; text-shadow: 0 0 25px var(--accent-glow), 0 2px 10px rgba(0, 0, 0, 0.6); } .brand-tag { font-size: 11px; color: var(--text); opacity: 0.78; margin-top: 6px; letter-spacing: 0.22em; text-transform: uppercase; } /* Light themes need shadow removed */ :root[data-theme="parchment"] .brand-logo, :root[data-theme="hullbreach"] .brand-logo { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } /* ─── Glass card ─────────────────────────────────────────────────────── * * Very lightly tinted glass. The card keeps just enough panel color to * anchor the content; the hero wallpaper dominates the look. A stronger * blur + saturate preserves legibility without a heavy fill. */ .card { background: color-mix(in srgb, var(--panel) 22%, transparent); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow); backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); } /* Light themes keep more opacity for legibility on bright wallpapers */ :root[data-theme="parchment"] .card, :root[data-theme="hullbreach"] .card { background: color-mix(in srgb, var(--panel) 50%, transparent); } .card-title { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-align: center; color: var(--text); margin: 0 0 6px 0; text-transform: uppercase; } .card-sub { font-size: 13px; color: var(--text-dim); text-align: center; margin: 0 0 22px 0; } /* Subtitle that surfaces the project name, when provided */ #project-name { display: none; font-family: 'Cinzel', Georgia, serif; font-size: 13px; font-weight: 700; letter-spacing: 0.15em; color: var(--accent); text-transform: uppercase; text-align: center; margin: 0 0 14px 0; opacity: 0.95; } #project-name.show { display: block; } /* ─── Code entry ─────────────────────────────────────────────────────── */ .code-inputs { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; } .code-input { width: 48px; height: 60px; border-radius: 10px; border: 1.5px solid var(--panel-border); background: var(--panel-solid); color: var(--text); font-size: 26px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; transition: border-color 120ms, box-shadow 120ms, background 120ms, transform 80ms; outline: none; caret-color: var(--accent); -webkit-appearance: none; appearance: none; } .code-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .code-input.filled { border-color: var(--accent-dim); } @media (max-width: 380px) { .code-input { width: 44px; height: 56px; font-size: 23px; } .code-inputs { gap: 6px; } } /* ─── Buttons ────────────────────────────────────────────────────────── */ .btn { width: 100%; padding: 14px 18px; border-radius: 12px; border: none; font-size: 15px; font-weight: 700; letter-spacing: 0.03em; cursor: pointer; transition: background 120ms, transform 80ms, box-shadow 120ms, opacity 120ms; -webkit-tap-highlight-color: transparent; } .btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: 0 10px 24px var(--accent-glow), 0 1px 0 rgba(255, 255, 255, 0.18) inset; } .btn-primary:hover:not(:disabled) { background: var(--accent-dim); transform: translateY(-1px); } .btn-primary:active:not(:disabled) { transform: translateY(0) scale(0.98); } .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--panel-border); margin-top: 10px; } .btn-ghost:hover { color: var(--text); border-color: var(--accent-dim); } /* ─── Error banner ───────────────────────────────────────────────────── */ .error { background: rgba(248, 113, 113, 0.14); border: 1px solid rgba(248, 113, 113, 0.4); color: var(--err, #f87171); padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-top: 14px; display: none; } .error.show { display: block; } /* ─── Connected view ─────────────────────────────────────────────────── */ .hidden { display: none !important; } .now-playing { text-align: center; } .character-name { font-family: 'Cinzel', Georgia, serif; font-size: 24px; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 4px; color: var(--text); } .character-tag { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.22em; } .visualizer { margin: 22px auto 18px; height: 74px; width: 100%; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--panel-border); overflow: hidden; position: relative; } .visualizer canvas { display: block; width: 100%; height: 100%; } .status-row { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--text-dim); margin-bottom: 22px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); transition: background 240ms, box-shadow 240ms; } .status-dot.waiting { background: var(--text-dim); } .status-dot.buffering { background: var(--warn, #f6b155); animation: pulse 1.2s infinite ease-in-out; } .status-dot.live { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .status-dot.error { background: var(--err, #f87171); } @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .footer-note { font-size: 12px; color: var(--text-dim); text-align: center; margin: 20px 0 0; line-height: 1.55; } .footer-note code { font-family: 'SF Mono', Menlo, Consolas, monospace; background: var(--panel-solid); padding: 1px 6px; border-radius: 4px; font-size: 11px; border: 1px solid var(--panel-border); } /* ─── Gleeman.app CTA ────────────────────────────────────────────────── * * Sits below the card. Visible but not aggressive — a thin glass strip * with a subtle accent arrow that opens gleeman.app in a new tab. */ .cta-strip { margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: color-mix(in srgb, var(--panel) 22%, transparent); border: 1px solid var(--panel-border); backdrop-filter: blur(26px) saturate(1.2); -webkit-backdrop-filter: blur(26px) saturate(1.2); display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); transition: transform 140ms, border-color 140ms, background 140ms; -webkit-tap-highlight-color: transparent; cursor: pointer; } .cta-strip:hover { transform: translateY(-1px); border-color: var(--accent-dim); background: var(--panel-solid); } .cta-copy { flex: 1; min-width: 0; text-align: left; } .cta-headline { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: 0.01em; } .cta-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.45; } .cta-sub b { color: var(--accent); font-weight: 700; letter-spacing: 0.02em; } .cta-arrow { font-size: 18px; font-weight: 700; color: var(--accent); flex-shrink: 0; transition: transform 140ms; } .cta-strip:hover .cta-arrow { transform: translateX(3px); } /* ─── Autoplay unblock overlay ───────────────────────────────────────── */ .autoplay-gate { position: fixed; inset: 0; background: rgba(4, 2, 6, 0.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 24px; } .autoplay-gate-inner { text-align: center; max-width: 300px; } .autoplay-gate h3 { margin: 0 0 8px; color: var(--text); } .autoplay-gate p { color: var(--text-dim); font-size: 14px; margin-bottom: 18px; } /* ─── Print-safe & high-contrast fallback ────────────────────────────── */ @media (forced-colors: active) { .card, .cta-strip { backdrop-filter: none; -webkit-backdrop-filter: none; } }