/* * BrainSync Web Player — player.css * Dark meditative theme matching trybrainsync.com brand palette. * Colours and tokens deliberately mirrored from web/style.css so the two * pages feel like one product. */ /* ─── Design tokens (same as web/style.css) ──────────────────────────────── */ :root { --bg: #070912; --bg2: #0d1124; --card: #121734; --line: #222a52; --text: #eef1ff; --muted: #a3acd6; --accent: #7c9cff; /* sleep / blue */ --accent2: #5ad1c5; /* calm / teal */ --focus: #c79bff; /* focus / violet */ /* per-mode accent overrides — set on via JS */ --mode-color: var(--accent); } /* ─── Reset & base ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: radial-gradient(1200px 800px at 50% -10%, #141a3a 0%, var(--bg) 55%) no-repeat, var(--bg); color: var(--text); font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ─── Layout shell ─────────────────────────────────────────────────────────── */ .wrap { max-width: 680px; margin: 0 auto; padding: 0 20px; width: 100%; } /* ─── Nav ──────────────────────────────────────────────────────────────────── */ .player-nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--line); } .back-link { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); transition: color .15s; } .back-link:hover { color: var(--text); } .back-link svg { width: 16px; height: 16px; } .logo { font-weight: 700; font-size: 18px; letter-spacing: .3px; display: flex; align-items: center; gap: 8px; } .logo .dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 14px var(--accent); } /* Persistent "Get the app" link */ .nav-cta { font-size: 13px; font-weight: 600; color: var(--muted); background: rgba(124,156,255,.08); border: 1px solid rgba(124,156,255,.2); border-radius: 9px; padding: 6px 12px; transition: background .15s, border-color .15s, color .15s; } .nav-cta:hover { background: rgba(124,156,255,.16); border-color: var(--accent); color: var(--text); } @media (max-width: 480px) { .nav-cta { display: none; } } /* ─── Main content ─────────────────────────────────────────────────────────── */ main { flex: 1; padding: 28px 0 40px; } /* page title */ .page-title { text-align: center; margin-bottom: 28px; } .page-title h1 { font-size: clamp(22px, 5vw, 32px); font-weight: 800; letter-spacing: -.3px; } .page-title h1 .grad { background: linear-gradient(120deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .page-title p { color: var(--muted); font-size: 14px; margin-top: 6px; } /* ─── Mode picker ──────────────────────────────────────────────────────────── */ .mode-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; } .mode-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--card), #0e1330); cursor: pointer; transition: border-color .18s, background .18s, transform .12s; position: relative; color: var(--text); } .mode-btn:hover { transform: translateY(-1px); border-color: var(--accent); } .mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mode-btn .mode-icon { font-size: 22px; line-height: 1; } .mode-btn .mode-name { font-size: 13px; font-weight: 700; letter-spacing: .2px; } .mode-btn .mode-freq { font-size: 11px; color: var(--muted); } /* active state */ .mode-btn.active { border-color: var(--mode-color, var(--accent)); background: linear-gradient(180deg, rgba(124,156,255,.10), #0e1330); box-shadow: 0 0 0 1px var(--mode-color, var(--accent)), inset 0 1px 0 rgba(255,255,255,.04); } /* per-mode accent colours */ [data-mode="sleep"] .mode-btn[data-mode="sleep"].active, .mode-btn[data-mode="sleep"].active { --mode-color: var(--accent); } [data-mode="calm"] .mode-btn[data-mode="calm"].active, .mode-btn[data-mode="calm"].active { --mode-color: var(--accent2); } [data-mode="focus"] .mode-btn[data-mode="focus"].active, .mode-btn[data-mode="focus"].active { --mode-color: var(--focus); } /* ─── Player card ──────────────────────────────────────────────────────────── */ .player-card { background: linear-gradient(180deg, var(--card), #0c1130); border: 1px solid var(--line); border-radius: 20px; padding: 24px; position: relative; overflow: hidden; } /* Headphone notice */ .headphone-notice { display: flex; align-items: center; gap: 10px; background: rgba(124,156,255,.07); border: 1px solid rgba(124,156,255,.15); border-radius: 11px; padding: 11px 14px; margin-bottom: 22px; font-size: 13px; color: var(--muted); } .headphone-notice svg { width: 20px; height: 20px; flex: none; color: var(--accent); } /* Canvas waveform */ .viz-wrap { position: relative; margin-bottom: 22px; border-radius: 12px; overflow: hidden; background: #060810; border: 1px solid var(--line); } #waveCanvas { display: block; width: 100%; height: 120px; } /* Status row below canvas */ .viz-status { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .synthesis-proof { font-size: 12px; color: var(--muted); line-height: 1.5; flex: 1; } .synthesis-proof strong { color: var(--accent); } .timer { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; font-weight: 600; min-width: 70px; text-align: right; } .timer span { color: var(--text); } /* ─── Play button ──────────────────────────────────────────────────────────── */ .play-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px; border-radius: 14px; border: none; background: linear-gradient(120deg, var(--accent), var(--accent2)); color: #06122b; font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity .15s, transform .12s, filter .15s; margin-bottom: 14px; letter-spacing: .2px; position: relative; overflow: hidden; } .play-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .play-btn:active { transform: translateY(0); filter: brightness(.96); } .play-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .play-btn:disabled { opacity: .55; cursor: default; transform: none; } .play-btn svg { width: 20px; height: 20px; flex: none; } /* mode-specific gradient override (set via JS --mode-color) */ body[data-mode="sleep"] .play-btn { background: linear-gradient(120deg, #7c9cff, #5ad1c5); } body[data-mode="calm"] .play-btn { background: linear-gradient(120deg, #5ad1c5, #7c9cff); } body[data-mode="focus"] .play-btn { background: linear-gradient(120deg, #c79bff, #7c9cff); } /* Current mode info row */ .mode-info { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; } .mode-info .label { font-weight: 600; color: var(--text); } /* ─── Unsupported browser banner ───────────────────────────────────────────── */ .unsupported { display: none; text-align: center; padding: 40px 20px; color: var(--muted); } .unsupported h2 { color: var(--text); margin-bottom: 10px; } body.no-audio .unsupported { display: block; } body.no-audio .player-card { display: none; } /* ─── Session cap / CTA overlay ───────────────────────────────────────────── */ .session-cap { display: none; /* shown by JS after 10 min */ position: absolute; inset: 0; background: rgba(7,9,18,.92); backdrop-filter: blur(8px); border-radius: 20px; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 24px; gap: 16px; z-index: 10; } .session-cap.visible { display: flex; } .session-cap .cap-icon { font-size: 40px; } .session-cap h2 { font-size: 22px; font-weight: 800; letter-spacing: -.2px; } .session-cap p { font-size: 14px; color: var(--muted); max-width: 360px; margin: 0 auto; } .cap-badges { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; } .cap-badge { display: flex; align-items: center; gap: 11px; background: #000; border: 1px solid #2a2f55; border-radius: 13px; padding: 11px 16px; transition: transform .15s, border-color .15s; } .cap-badge:hover { transform: translateY(-2px); border-color: var(--accent); } .cap-badge svg { width: 24px; height: 24px; flex: none; } .cap-badge .b-sm { font-size: 10.5px; color: #c9cdf0; line-height: 1; } .cap-badge .b-lg { font-size: 16px; font-weight: 600; line-height: 1.2; } .cap-restart { font-size: 13px; color: var(--muted); cursor: pointer; background: none; border: none; text-decoration: underline; font-family: inherit; margin-top: 4px; } .cap-restart:hover { color: var(--text); } /* ─── Footer ───────────────────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--line); padding: 28px 0; margin-top: auto; text-align: center; } .footer-badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; } .footer-badge { display: flex; align-items: center; gap: 10px; background: #000; border: 1px solid #2a2f55; border-radius: 13px; padding: 10px 16px; min-width: 170px; transition: transform .15s, border-color .15s; } .footer-badge:hover { transform: translateY(-2px); border-color: var(--accent); } .footer-badge svg { width: 24px; height: 24px; flex: none; } .footer-badge .b-sm { font-size: 10.5px; color: #c9cdf0; line-height: 1; } .footer-badge .b-lg { font-size: 16px; font-weight: 600; line-height: 1.2; } .footer-fine { font-size: 12.5px; color: #6b73a0; line-height: 1.7; } .footer-fine a { color: var(--muted); text-decoration: underline; } /* ─── Sticky mobile CTA ─────────────────────────────────────────────────────── */ .sticky-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: rgba(8,10,22,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 12px 16px; gap: 10px; z-index: 50; } .sticky-cta a { flex: 1; text-align: center; background: linear-gradient(120deg, var(--accent), var(--accent2)); color: #06122b; font-weight: 700; border-radius: 11px; padding: 12px; font-size: 14px; transition: filter .15s; } .sticky-cta a:hover { filter: brightness(1.08); } @media (max-width: 640px) { .sticky-cta { display: flex; } body { padding-bottom: 66px; } } /* ─── Responsive tweaks ─────────────────────────────────────────────────────── */ @media (max-width: 480px) { .player-card { padding: 18px 16px; } .mode-picker { gap: 7px; } .mode-btn { padding: 12px 6px; } .mode-btn .mode-icon { font-size: 18px; } .mode-btn .mode-name { font-size: 12px; } }