/* ---------- Theme ---------- ClassWave ships with a white + purple identity and two modes: light (default) and dark, toggled via [data-theme] on (see src/hooks/useTheme.jsx). Everything below reads these custom properties - add a color, don't hardcode one. */ :root, :root[data-theme='light']{ --bg: #FFFFFF; --surface: #F6F2FC; --surface-raised: #FFFFFF; --text: #241B3B; --text-dim: #675C82; --accent: #7C3AED; --accent-dim: #6425D0; --accent-contrast: #FFFFFF; --green: #1E9E63; --amber: #B4740E; --red: #C7433A; --line: rgba(124,58,237,0.16); --shadow: 0 18px 40px -22px rgba(124,58,237,0.35); --radius: 14px; color-scheme: light; } :root[data-theme='dark']{ --bg: #150F26; --surface: #1D1533; --surface-raised: #221A3B; --text: #F3EEFF; --text-dim: #B5A9D6; --accent: #A78BFA; --accent-dim: #8B6FE0; --accent-contrast: #1A1230; --green: #5FDB9A; --amber: #F0B559; --red: #F0837A; --line: rgba(243,238,255,0.13); --shadow: 0 18px 40px -18px rgba(0,0,0,0.55); --radius: 14px; color-scheme: dark; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--text); font-family:'Space Grotesk', sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; } ::selection{ background:var(--accent); color:var(--surface); } h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; margin:0; letter-spacing:-0.01em; } .eyebrow{ font-family:'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:0.14em; font-size:0.72rem; color:var(--accent); display:block; margin-bottom:6px; } .mono{ font-family:'JetBrains Mono', monospace; } .muted{ color:var(--text-dim); } .small{ font-size:0.8rem; } a{ color:inherit; } button{ font-family:inherit; } .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; } *:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .wrap{ max-width:1120px; margin:0 auto; padding:0 28px; } /* ---------- Landing page ---------- */ header.site{ position:sticky; top:0; z-index:20; background:linear-gradient(var(--bg) 78%, transparent); padding:22px 0 10px; } .nav-row{ display:flex; align-items:center; justify-content:space-between; } .landing-nav-actions{ display:flex; align-items:center; gap:8px; } .landing-nav-actions .nav-audience-link{ font-family:'Space Grotesk',sans-serif; font-size:.72rem; padding:7px 10px; opacity:.82; } .landing-nav-actions .nav-cta:not(.nav-audience-link){ font-family:'Space Grotesk',sans-serif; font-size:.76rem; padding:7px 12px; font-weight:600; } .wordmark{ display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-size:1.35rem; font-weight:700; text-decoration:none; } .wordmark .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .wordmark-logo{ height:28px; width:auto; display:block; object-fit:contain; } .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:transparent; font-size:1.05rem; line-height:1; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .15s ease; } .theme-toggle:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); } .theme-toggle:active{ transform:scale(0.94); } .notif-bell{ position:relative; } .notif-badge{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background:var(--danger, #e5484d); color:#fff; font-size:0.62rem; font-weight:700; line-height:16px; text-align:center; font-family:'JetBrains Mono', monospace; } .nav-cta{ font-family:'JetBrains Mono', monospace; font-size:0.78rem; border:1px solid var(--line); padding:9px 16px; border-radius:999px; text-decoration:none; transition:border-color .2s ease, background .2s ease; } .nav-cta:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent); } .nav-cta-solid{ background:var(--accent); color:var(--surface); border-color:var(--accent); font-weight:600; } .google-logo{ width:18px; height:18px; flex:0 0 18px; display:block; } .hero{ padding:64px 0 40px; position:relative; overflow:hidden; } .hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center; } .badge{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono', monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text); border:1px dashed var(--line); padding:6px 12px; border-radius:999px; margin-bottom:22px; } .badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2.2s infinite ease-in-out; } @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(1.5); } } h1.headline{ font-size:clamp(2.4rem, 5vw, 3.7rem); line-height:1.04; } h1.headline em{ font-style:normal; color:var(--accent); } .sub{ margin-top:20px; font-size:1.08rem; color:var(--text-dim); max-width:46ch; } .signup{ margin-top:32px; display:flex; gap:10px; max-width:440px; } .signup input{ flex:1; background:color-mix(in srgb, var(--text) 6%, transparent); border:1px solid var(--line); border-radius:10px; padding:14px 16px; color:var(--text); font-family:'Space Grotesk', sans-serif; font-size:0.95rem; } .signup input::placeholder{ color:var(--text-dim); } .signup input:focus{ outline:none; border-color:var(--accent); background:color-mix(in srgb, var(--text) 9%, transparent); } .signup button{ background:var(--accent); color:var(--surface); border:none; border-radius:10px; padding:14px 20px; font-weight:700; font-size:0.95rem; cursor:pointer; transition:background .2s ease, transform .15s ease; } .signup button:hover{ background:color-mix(in srgb, var(--accent) 82%, white); } .signup button:active{ transform:scale(0.97); } .signup-note{ margin-top:10px; font-size:0.78rem; color:var(--text-dim); } .form-msg{ margin-top:12px; font-family:'JetBrains Mono', monospace; font-size:0.8rem; color:var(--green); min-height:1em; } .signup.center{ margin:0 auto; } .wave-panel{ position:relative; background:color-mix(in srgb, var(--text) 4%, transparent); border:1px solid var(--line); border-radius:var(--radius); padding:26px; } .wp-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; } .wp-title{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--text-dim); letter-spacing:0.06em; text-transform:uppercase; } .wp-code{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); padding:3px 9px; border-radius:999px; } .wp-disclaimer{ font-size:0.76rem; color:var(--text-dim); margin:0 0 16px; line-height:1.45; } .bars{ display:flex; align-items:flex-end; gap:5px; height:120px; } .bars span{ flex:1; background:linear-gradient(180deg, var(--accent), var(--accent-dim)); border-radius:3px 3px 0 0; animation:eq 1.4s ease-in-out infinite; transform-origin:bottom; } @keyframes eq{ 0%,100%{ transform:scaleY(0.35); } 50%{ transform:scaleY(1); } } /* This card is a fixed "paper preview" mockup - it intentionally stays light regardless of the site theme, like a physical printout would. */ .score-card{ margin-top:20px; background:#FFFFFF; color:#241B3B; border-radius:10px; padding:16px 18px; box-shadow:var(--shadow); } .score-card .row1{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; } .score-card .track{ font-weight:700; font-size:0.95rem; } .score-card .artist{ font-size:0.8rem; color:#6b6180; } .score-bar-row{ margin-top:12px; display:flex; align-items:center; gap:10px; } .score-track{ flex:1; height:6px; background:#ECE7F7; border-radius:99px; overflow:hidden; } .score-fill{ height:100%; background:var(--green); border-radius:99px; } .score-num{ font-family:'JetBrains Mono', monospace; font-size:0.78rem; font-weight:600; } .score-why{ margin-top:10px; font-size:0.78rem; color:#6b6180; border-top:1px dashed #E4DDF5; padding-top:10px; } section{ padding:52px 0; } .section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:34px; border-bottom:1px solid var(--line); padding-bottom:18px; } .section-head h2{ font-size:clamp(1.6rem, 3vw, 2.1rem); } .panels{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; } .panel{ background:color-mix(in srgb, var(--text) 4.5%, transparent); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; } .panel .who{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); margin-bottom:8px; display:block; } .panel h3{ font-size:1.35rem; margin-bottom:14px; } .panel ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .panel li{ font-size:0.9rem; color:var(--text-dim); padding-left:18px; position:relative; } .panel li::before{ content:''; position:absolute; left:0; top:0.55em; width:6px; height:6px; border-radius:50%; background:var(--text-dim); opacity:0.5; } .panel.safety li::before{ background:var(--green); opacity:1; } .panel.teacher li::before{ background:var(--accent); opacity:1; } .panel.student li::before{ background:#8fb7c9; opacity:1; } .mod-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; } .mod-chip{ border-radius:var(--radius); padding:20px; border:1px solid var(--line); } .mod-chip.g{ background:color-mix(in srgb, var(--green) 9%, transparent); } .mod-chip.a{ background:color-mix(in srgb, var(--amber) 9%, transparent); } .mod-chip.r{ background:color-mix(in srgb, var(--red) 9%, transparent); } .mod-chip .lamp{ width:11px; height:11px; border-radius:50%; margin-bottom:12px; } .mod-chip.g .lamp{ background:var(--green); } .mod-chip.a .lamp{ background:var(--amber); } .mod-chip.r .lamp{ background:var(--red); } .mod-chip h4{ font-family:'Fraunces', serif; font-size:1.05rem; font-weight:600; margin:0 0 6px; } .mod-chip p{ font-size:0.85rem; color:var(--text-dim); margin:0; } footer{ padding:60px 0 40px; border-top:1px solid var(--line); text-align:center; } footer h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:14px; } footer p{ color:var(--text-dim); margin-bottom:28px; } .foot-meta{ margin-top:56px; display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; color:var(--text-dim); font-family:'JetBrains Mono', monospace; } /* ---------- Auth pages ---------- */ .auth-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px; } .auth-card{ width:100%; max-width:420px; background:color-mix(in srgb, var(--text) 4%, transparent); border:1px solid var(--line); border-radius:var(--radius); padding:36px 32px; } .auth-wordmark{ margin-bottom:24px; } .auth-card h1{ font-size:1.7rem; margin-bottom:20px; } .auth-switch{ margin-top:20px; font-size:0.88rem; color:var(--text-dim); text-align:center; } .auth-switch a{ color:var(--accent); text-decoration:underline; } .role-fieldset{ border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:6px 0 18px; } .role-fieldset legend{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); padding:0 6px; } .role-option{ display:flex; align-items:center; gap:8px; font-size:0.92rem; margin-bottom:6px; } .role-option-hint{ font-weight:400; } /* ---------- App shell ---------- */ .app-nav{ background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; } .app-nav-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; } .app-nav-links{ display:flex; align-items:center; gap:6px; } .app-nav-link{ font-size:0.9rem; padding:8px 14px; border-radius:999px; text-decoration:none; color:var(--text-dim); transition:background .15s ease, color .15s ease; } .app-nav-link:hover{ color:var(--text); } .app-nav-link.is-active{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); } .nav-signout{ margin-left:8px; } .nav-toggle{ display:none; flex-direction:column; gap:4px; background:none; border:none; padding:8px; cursor:pointer; } .nav-toggle-bar{ width:20px; height:2px; background:var(--text); } @media (max-width: 880px){ /* Log in / Sign up stay put as the primary CTAs; the "For students" / "For teachers" quick-jump links (added alongside the same-named panel ids below) are a nice-to-have on a full-width header and just crowd a stacked one, so they drop off here rather than wrapping awkwardly. */ .nav-audience-link{ display:none; } .hero-grid{ grid-template-columns:1fr; } .panels{ grid-template-columns:1fr; } .mod-strip{ grid-template-columns:1fr; } .foot-meta{ flex-direction:column; gap:10px; text-align:center; } .dashboard-grid{ grid-template-columns:1fr !important; } .card-grid{ grid-template-columns:1fr !important; } .discover-grid{ grid-template-columns:1fr !important; } .nav-toggle{ display:flex; width:44px; height:44px; align-items:center; justify-content:center; } .app-nav-links{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; padding:10px 16px 16px; max-height:calc(100vh - 60px); overflow-y:auto; } .app-nav-links.is-open{ display:flex; } .app-nav-link{ padding:14px 10px; } .app-nav-links .theme-toggle{ align-self:flex-start; margin:6px 0; } .app-nav-links .nav-signout{ width:100%; margin-left:0; margin-top:4px; } /* Touch targets: bump icon-only controls to the ~44px minimum on touch-sized viewports rather than leaving them at desktop sizing. */ .theme-toggle{ width:44px; height:44px; } .now-playing-toggle{ width:44px; height:44px; } .now-playing-skip{ width:44px; height:44px; } .now-playing-close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; } .modal-close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; } .avatar-swatch{ width:36px; height:36px; } .filter-tab{ padding:10px 14px; } .song-card-play{ font-size:1.3rem; } .wrap{ padding:0 20px; } section{ padding:40px 0; } .page{ padding:28px 0 64px; } .auth-page{ padding:20px; } .auth-card{ padding:28px 22px; } .track-detail-art{ width:76px; height:76px; } .song-card-footer{ margin-left:0; flex-basis:100%; align-self:flex-start; } .profile-header-row{ flex-wrap:wrap; } .admin-row{ flex-wrap:wrap; row-gap:8px; } } @media (max-width: 420px){ .wrap{ padding:0 16px; } .hero{ padding:44px 0 28px; } .signup{ flex-direction:column; } .signup button{ width:100%; } .hero-ctas .nav-cta, footer .nav-cta{ width:100%; } .hero-ctas{ flex-direction:column; } .wave-panel{ padding:20px; } .auth-card{ padding:24px 18px; } } @media (prefers-reduced-motion: reduce){ .bars span, .badge::before{ animation:none; } } /* ---------- Shared app UI ---------- */ .page{ padding:36px 0 64px; } .page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:28px; } .page-head-actions{ display:flex; gap:10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.92rem; padding:11px 18px; border-radius:10px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:background .15s ease, opacity .15s ease; } .btn:disabled{ opacity:0.6; cursor:not-allowed; } .btn-primary{ background:var(--accent); color:var(--surface); } .btn-primary:hover:not(:disabled){ background:color-mix(in srgb, var(--accent) 82%, white); } .btn-secondary{ background:transparent; color:var(--text); border-color:var(--line); } .btn-secondary:hover:not(:disabled){ border-color:var(--accent); } .btn-danger{ background:transparent; color:var(--red); border-color:color-mix(in srgb, var(--red) 40%, transparent); } .btn-danger:hover:not(:disabled){ background:color-mix(in srgb, var(--red) 12%, transparent); } .card{ background:color-mix(in srgb, var(--text) 4.5%, transparent); border:1px solid var(--line); border-radius:var(--radius); padding:24px; } .card h2{ font-size:1.2rem; margin-bottom:16px; } .card h3{ font-size:1.05rem; margin-bottom:6px; } .dashboard-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; } .class-card-link{ text-decoration:none; color:inherit; display:block; } .chip{ display:inline-block; margin-top:10px; font-family:'JetBrains Mono', monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); padding:3px 9px; border-radius:999px; } .simple-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .simple-list a{ text-decoration:underline; } /* Discover page (src/pages/Discover.jsx) */ .discover-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .discover-grid > .card:first-child{ grid-column:1 / -1; } .discover-rank-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; } .discover-rank-item, .classmate-row{ display:flex; align-items:center; gap:12px; } .discover-rank-num{ width:22px; flex-shrink:0; text-align:center; font-family:'JetBrains Mono', monospace; font-size:0.85rem; color:var(--text-dim); } .discover-rank-art{ width:40px; height:40px; border-radius:8px; object-fit:cover; flex-shrink:0; background:color-mix(in srgb, var(--text) 6%, transparent); } .discover-rank-art-fallback{ display:flex; align-items:center; justify-content:center; color:var(--text-dim); } .discover-rank-info{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; } .discover-rank-title{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .classmate-row-who{ display:flex; align-items:center; gap:8px; flex-shrink:0; } .search-chip-list{ display:flex; flex-wrap:wrap; gap:8px; } .search-chip{ display:inline-flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--text) 6%, transparent); border:1px solid var(--line); border-radius:999px; padding:6px 12px 6px 14px; font-size:0.85rem; } .search-chip-count{ font-family:'JetBrains Mono', monospace; font-size:0.68rem; color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); border-radius:999px; padding:2px 7px; } .field{ margin-bottom:16px; } .field-label{ display:block; font-size:0.85rem; margin-bottom:6px; color:var(--text-dim); } .field-input{ width:100%; background:color-mix(in srgb, var(--text) 6%, transparent); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--text); font-family:inherit; font-size:0.95rem; } .field-input:focus{ outline:none; border-color:var(--accent); background:color-mix(in srgb, var(--text) 9%, transparent); } .field-input-error{ border-color:var(--red); } .field-hint{ margin:6px 0 0; font-size:0.78rem; color:var(--text-dim); } .field-error{ margin:6px 0 0; font-size:0.82rem; color:var(--red); } select.field-input{ min-width:200px; } .modal-backdrop{ position:fixed; inset:0; background:rgba(20,12,38,0.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50; } .modal{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:24px; width:100%; max-width:420px; } .modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; } .modal-close{ background:none; border:none; color:var(--text); font-size:1.4rem; cursor:pointer; line-height:1; } .state-block{ text-align:center; padding:48px 24px; color:var(--text-dim); } .state-block h3{ color:var(--text); margin-bottom:8px; } .empty-state{ border:1px dashed var(--line); border-radius:var(--radius); } .error-state{ border:1px solid color-mix(in srgb, var(--red) 40%, transparent); border-radius:var(--radius); } .spinner{ width:28px; height:28px; margin:0 auto 14px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:spin 0.8s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .config-warning{ background:color-mix(in srgb, var(--amber) 12%, transparent); border:1px solid color-mix(in srgb, var(--amber) 40%, transparent); color:var(--text); border-radius:10px; padding:12px 16px; margin-bottom:20px; font-size:0.88rem; } .status-pill{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; padding:4px 9px; border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; } .status-pill .swatch{ width:7px; height:7px; border-radius:50%; } .status-green{ background:color-mix(in srgb, var(--green) 18%, transparent); color:var(--green); } .status-green .swatch{ background:var(--green); } .status-amber{ background:color-mix(in srgb, var(--amber) 18%, transparent); color:var(--amber); } .status-amber .swatch{ background:var(--amber); } .status-red{ background:color-mix(in srgb, var(--red) 18%, transparent); color:var(--red); } .status-red .swatch{ background:var(--red); } .song-card-list{ display:flex; flex-direction:column; gap:14px; } .song-card{ display:flex; gap:14px; align-items:flex-start; background:color-mix(in srgb, var(--text) 3%, transparent); border:1px solid var(--line); border-radius:12px; padding:14px; flex-wrap:wrap; } .song-card-art{ width:56px; height:56px; border-radius:8px; overflow:hidden; flex-shrink:0; background:color-mix(in srgb, var(--text) 8%, transparent); } .song-card-art img{ width:100%; height:100%; object-fit:cover; } .song-card-art-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--text-dim); } .song-card-body{ flex:1; min-width:160px; } .song-card-title{ font-weight:600; margin:0; } .song-card-artist{ margin:2px 0 8px; color:var(--text-dim); font-size:0.88rem; } .song-card-score{ display:flex; align-items:center; gap:10px; } .song-card-flags{ margin:8px 0 0; font-size:0.78rem; color:var(--amber); } .song-card-flag-terms{ font-family:'JetBrains Mono', monospace; opacity:0.85; } .song-card-flags-note{ display:block; margin-top:2px; color:var(--text-dim); font-style:italic; } .song-card-footer{ margin-left:auto; align-self:center; } .request-search{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; } .request-search .field{ flex:1; min-width:220px; margin-bottom:0; } .moderation-actions{ display:flex; gap:10px; margin-top:6px; } .profile-info{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; } .profile-info dt{ color:var(--text-dim); font-size:0.85rem; } .profile-info dd{ margin:0; } .toggle-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:0.92rem; } /* --- Explicit tag on song titles --- */ .explicit-tag{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:6px; border-radius:3px; background:color-mix(in srgb, var(--text) 18%, transparent); color:var(--text); font-size:0.62rem; font-weight:700; vertical-align:middle; } /* --- Song card play button + lyrics links --- */ .song-card-art{ position:relative; } .song-card-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.35); color:#fff; border:none; cursor:pointer; font-size:1.1rem; opacity:0; transition:opacity 0.15s ease; } .song-card-art:hover .song-card-play, .song-card-play:focus-visible{ opacity:1; } .song-card-lyrics{ margin:8px 0 0; font-size:0.78rem; color:var(--text-dim); } .song-card-lyrics a{ color:inherit; text-decoration:underline; } .review-actions{ display:flex; gap:10px; flex-wrap:wrap; } /* --- Clickable song card (Requests search results -> TrackDetail) --- */ .song-card.is-clickable .song-card-art{ cursor:pointer; } .song-card-title-btn{ background:none; border:none; padding:0; margin:0; text-align:left; cursor:pointer; font: inherit; font-weight:600; color:var(--text); display:inline; } .song-card-title-btn:hover{ text-decoration:underline; color:var(--accent); } /* --- Flagged terms (SongCard + TrackDetail), profanity always in red --- */ .flag-term-profanity{ color:var(--red); font-weight:700; } .track-detail-flags{ margin:12px 0 0; font-size:0.86rem; color:var(--amber); } .track-detail-flags-note{ display:block; margin-top:2px; color:var(--text-dim); font-style:italic; } .track-detail-zero-tolerance{ margin:12px 0 0; padding:10px 12px; border-radius:10px; font-size:0.85rem; background:color-mix(in srgb, var(--red) 10%, transparent); border:1px solid color-mix(in srgb, var(--red) 35%, transparent); color:var(--text); } /* --- Track detail page --- */ .track-detail-grid{ max-width:640px; } .track-detail-head{ display:flex; gap:16px; align-items:flex-start; } .track-detail-art{ width:96px; height:96px; border-radius:12px; overflow:hidden; flex-shrink:0; background:color-mix(in srgb, var(--text) 8%, transparent); } .track-detail-art img{ width:100%; height:100%; object-fit:cover; } .track-detail-title{ font-weight:700; font-size:1.15rem; margin:0; } .track-detail-artist{ margin:4px 0 0; color:var(--text-dim); } .track-detail-lyrics{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); } .track-detail-lyrics h3{ margin-bottom:6px; } .track-detail-lyrics-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; } .track-detail-lyrics-links .btn{ text-decoration:none; } /* --- Now playing bar --- */ .now-playing-bar{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center; gap:14px; padding:10px 20px; background:var(--surface); border-top:1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow:0 -6px 24px rgba(0,0,0,0.12); } .now-playing-art{ width:40px; height:40px; border-radius:6px; overflow:hidden; flex-shrink:0; background:color-mix(in srgb, var(--text) 8%, transparent); display:flex; align-items:center; justify-content:center; } .now-playing-art img{ width:100%; height:100%; object-fit:cover; } .now-playing-info{ min-width:120px; max-width:200px; } .now-playing-title{ margin:0; font-weight:600; font-size:0.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .now-playing-artist{ margin:0; font-size:0.78rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .now-playing-toggle{ width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; background:var(--accent); color:var(--accent-contrast); font-size:0.9rem; flex-shrink:0; } .now-playing-scrubber{ flex:1; display:flex; align-items:center; gap:8px; min-width:120px; } .now-playing-scrubber input[type="range"]{ flex:1; } .now-playing-time{ font-size:0.72rem; color:var(--text-dim); font-variant-numeric:tabular-nums; } .now-playing-close{ background:none; border:none; cursor:pointer; color:var(--text-dim); font-size:0.9rem; flex-shrink:0; } .now-playing-badge{ position:absolute; top:-18px; left:20px; margin:0; font-size:0.65rem; color:var(--text-dim); background:var(--surface); padding:1px 8px; border-radius:6px 6px 0 0; } .now-playing-skip{ width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; background:transparent; color:var(--text); font-size:0.85rem; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background .15s ease; } .now-playing-skip:hover{ background:color-mix(in srgb, var(--text) 10%, transparent); } @media (max-width: 640px){ .now-playing-info{ display:none; } .now-playing-badge{ display:none; } .now-playing-bar{ padding:10px 14px; gap:10px; } .now-playing-scrubber{ min-width:0; } } @media (max-width: 400px){ .now-playing-time{ display:none; } } /* --- Admin page --- */ .admin-table{ display:flex; flex-direction:column; gap:2px; } .admin-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 4px; border-bottom:1px solid color-mix(in srgb, var(--text) 8%, transparent); } .admin-row:last-child{ border-bottom:none; } .mono{ font-family:'JetBrains Mono', monospace; } /* --- Profile customization --- */ .avatar-swatch-row{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 16px; } .avatar-swatch{ width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; } .avatar-swatch[aria-pressed="true"]{ border-color:var(--text); } .profile-avatar{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1.1rem; flex-shrink:0; } /* --- Reusable Avatar component --- */ .avatar{ border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; } .avatar-initial{ color:#fff; font-weight:700; } .avatar-photo img{ width:100%; height:100%; object-fit:cover; display:block; } /* --- Profile page: photo upload --- */ .profile-header-row{ display:flex; gap:16px; align-items:flex-start; margin-bottom:18px; } .profile-avatar-upload{ display:flex; flex-direction:column; gap:6px; align-items:center; } .profile-avatar-actions{ display:flex; gap:10px; } .link-btn{ background:none; border:none; padding:0; cursor:pointer; color:var(--accent); font-size:0.78rem; font-weight:600; text-decoration:underline; } .link-btn:disabled{ opacity:0.5; cursor:default; } .link-btn-muted{ color:var(--text-dim); } .pending-note{ margin-top:6px; max-width:38ch; } /* --- Teacher verification badge --- */ .verified-badge{ display:inline-flex; align-items:center; margin-left:4px; vertical-align:middle; } .verified-badge-teacher{ color:var(--accent); } .verified-badge-owner{ color:#F5B700; } .teacher-name{ display:inline-flex; align-items:center; gap:2px; font-weight:600; } .pending-badge{ margin-left:6px; font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; color:var(--text-dim); background:color-mix(in srgb, var(--text) 10%, transparent); padding:2px 6px; border-radius:4px; vertical-align:middle; } .class-teacher-row{ display:flex; align-items:center; gap:8px; margin-top:8px; } /* --- Admin: per-row controls --- */ .admin-row-controls{ display:flex; align-items:center; gap:14px; } .admin-verify-toggle{ display:flex; align-items:center; gap:6px; font-size:0.82rem; white-space:nowrap; } /* --- Landing hero CTAs (replaces the old waitlist email form) --- */ .hero-ctas{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; } .hero-ctas .nav-cta{ padding:13px 22px; font-size:0.85rem; } footer .nav-cta{ display:inline-flex; padding:13px 26px; font-size:0.85rem; } /* --- Class detail: class code copy button --- */ .class-code-row{ display:inline-flex; align-items:center; gap:8px; } /* --- Class detail: classification filter tabs --- */ .song-list-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; } .filter-tabs{ display:flex; gap:6px; flex-wrap:wrap; } .filter-tab{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; letter-spacing:0.02em; border:1px solid var(--line); background:transparent; color:var(--text-dim); padding:7px 12px; border-radius:999px; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; } .filter-tab:hover{ border-color:var(--accent); color:var(--text); } .filter-tab.is-active{ background:color-mix(in srgb, var(--accent) 14%, transparent); border-color:var(--accent); color:var(--accent); } .filter-tab-count{ opacity:0.75; } /* --- Class detail: teacher override controls on any song card --- */ .override-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .roster-list{ display:flex; flex-direction:column; gap:10px; } .roster-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; } .roster-row:last-child{ border-bottom:none; } .roster-info{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:120px; } .roster-name{ font-weight:600; } .roster-actions{ display:flex; gap:8px; flex-wrap:wrap; } .override-label{ font-size:0.76rem; color:var(--text-dim); white-space:nowrap; } /* --- Profile: account type switch --- */ .role-switch-row{ display:flex; gap:10px; margin:10px 0 6px; flex-wrap:wrap; } /* --- Shared: policy confirmation lists (Profile switch, SignUp teacher pick) --- */ .policy-list{ margin:0; padding-left:18px; font-size:0.88rem; color:var(--text-dim); } .policy-list li{ margin-bottom:10px; } .policy-list li:last-child{ margin-bottom:0; } main{ padding-bottom:70px; } /* --- Lyrics + lyric moderation review --- */ .track-detail-lyrics-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .lyrics-text, .lyrics-review-text{ white-space:pre-wrap; word-break:break-word; font:inherit; line-height:1.7; margin:14px 0 0; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb, var(--text) 4%, transparent); color:var(--text); max-height:520px; overflow:auto; scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--accent) 55%, var(--line)) transparent; overscroll-behavior:contain; } .lyrics-text::-webkit-scrollbar, .lyrics-review-text::-webkit-scrollbar{ width:9px; height:9px; } .lyrics-text::-webkit-scrollbar-track, .lyrics-review-text::-webkit-scrollbar-track{ background:transparent; border-radius:999px; } .lyrics-text::-webkit-scrollbar-thumb, .lyrics-review-text::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--accent) 45%, var(--line)); border:2px solid transparent; border-radius:999px; background-clip:padding-box; } .lyrics-text::-webkit-scrollbar-thumb:hover, .lyrics-review-text::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--accent) 70%, var(--line)); border:2px solid transparent; background-clip:padding-box; } .lyrics-review-text{ max-height:60vh; } .flagged-lyric{ background:color-mix(in srgb, var(--red) 24%, transparent); color:var(--red); font-weight:800; border-radius:3px; padding:0 2px; text-decoration:underline; text-decoration-thickness:2px; } .lyrics-review-reasons{ margin-top:14px; padding:12px; border:1px solid color-mix(in srgb, var(--red) 35%, transparent); background:color-mix(in srgb, var(--red) 8%, transparent); border-radius:10px; } .lyrics-review-reasons ul{ margin:8px 0 0; padding-left:20px; } .lyrics-review-reasons li{ margin:4px 0; } /* ---------- Navigation + custom select menus ---------- */ .app-nav-primary{ display:flex; align-items:center; gap:6px; margin-left:14px; } .app-nav-actions{ display:flex; align-items:center; gap:6px; } .app-nav-menu{ position:absolute; top:calc(100% + 10px); right:28px; width:260px; background:var(--surface-raised); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:10px; opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:40; } .app-nav-menu.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .app-nav-menu-section{ display:flex; flex-direction:column; gap:3px; } .app-nav-menu-label{ padding:8px 12px 5px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; } .app-nav-menu-link{ display:flex; align-items:center; min-height:42px; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--text); } .app-nav-menu-link:hover{ background:color-mix(in srgb,var(--accent) 9%,transparent); } .app-nav-menu-link.is-active{ color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,transparent); } .app-nav-menu-footer{ border-top:1px solid var(--line); margin-top:8px; padding:10px 2px 2px; display:flex; align-items:center; gap:8px; } .app-nav-menu-footer .theme-toggle{ width:auto; padding:0 10px; gap:7px; font-size:.82rem; } .app-nav-menu-footer .theme-toggle span{ font-family:'Space Grotesk',sans-serif; } .app-nav-menu-footer .nav-signout{ margin-left:auto; } .nav-toggle{ display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--line); border-radius:10px; background:transparent; cursor:pointer; } .nav-toggle:hover{ background:color-mix(in srgb,var(--accent) 8%,transparent); border-color:var(--accent); } .nav-toggle-bar{ width:19px; height:2px; border-radius:2px; background:var(--text); } .select-menu{ position:relative; width:100%; } .select-menu-trigger{ width:100%; min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:color-mix(in srgb,var(--text) 6%,transparent); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--text); font:inherit; text-align:left; cursor:pointer; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; } .select-menu-trigger:hover,.select-menu.is-open .select-menu-trigger{ border-color:var(--accent); background:color-mix(in srgb,var(--text) 9%,transparent); } .select-menu-trigger:disabled{ opacity:.55; cursor:not-allowed; } .select-menu-placeholder{ color:var(--text-dim); } .select-menu-chevron{ color:var(--accent); font-size:1.15rem; line-height:1; transform:translateY(-2px); transition:transform .15s ease; } .select-menu.is-open .select-menu-chevron{ transform:rotate(180deg) translateY(2px); } .select-menu-popover{ position:absolute; left:0; right:0; top:calc(100% + 7px); z-index:45; padding:6px; background:var(--surface-raised); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); max-height:260px; overflow:auto; animation:selectMenuIn .14s ease; } @keyframes selectMenuIn{ from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} } .select-menu-option{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; border:0; background:transparent; color:var(--text); border-radius:8px; padding:10px 11px; text-align:left; font:inherit; cursor:pointer; } .select-menu-option:hover{ background:color-mix(in srgb,var(--accent) 9%,transparent); } .select-menu-option.is-selected{ background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); font-weight:600; } .select-menu-empty{ padding:12px; color:var(--text-dim); font-size:.86rem; } /* Search results show that lyrics were actually checked, rather than making the user guess whether the score includes lyric analysis. */ .song-card-lyrics-check{ margin-top:8px; font-size:.74rem; font-family:'JetBrains Mono',monospace; color:var(--text-dim); } .song-card-lyrics-check.is-found{ color:var(--green); } .song-card-lyrics-check.is-missing{ color:var(--amber); } .lyrics-flag-summary{ margin-top:7px; padding:8px 10px; border-radius:9px; background:color-mix(in srgb,var(--red) 8%,transparent); border:1px solid color-mix(in srgb,var(--red) 28%,transparent); color:var(--red); font-size:.78rem; } @media (max-width:880px){ .app-nav-primary{ display:none; } .desktop-theme-toggle{ display:none; } .app-nav-menu{ left:20px; right:20px; width:auto; } } @media (min-width:881px){ .app-nav-row{ position:relative; } } /* --- Dashboard class / current-song row --- */ .dashboard-class-row{ display:flex; flex-direction:column; align-items:stretch; gap:9px; padding:10px 0; } .dashboard-class-main{ min-width:0; } .dashboard-now-playing{ display:flex; align-items:center; gap:10px; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--accent) 6%,transparent); } .dashboard-now-playing img{ width:34px; height:34px; border-radius:7px; object-fit:cover; flex-shrink:0; } .dashboard-now-playing-copy{ min-width:0; display:flex; flex-direction:column; line-height:1.25; } .dashboard-now-playing-label{ color:var(--accent); font:600 .66rem 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.08em; } .dashboard-now-playing-copy strong,.dashboard-now-playing-copy span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dashboard-now-playing-copy strong{ font-size:.86rem; } .dashboard-now-playing-copy span:last-child{ color:var(--text-dim); font-size:.76rem; } .dashboard-no-playing{ color:var(--text-dim); font-size:.76rem; } @media (max-width:880px){ .app-nav-row{ min-height:64px; } .app-nav-menu{ top:calc(100% + 4px); left:12px; right:12px; width:auto; max-height:calc(100dvh - 80px); overflow:auto; } .app-nav-actions{ margin-left:auto; } .page-head{ align-items:stretch; } .page-head-actions{ width:100%; } .page-head-actions > .btn{ flex:1 1 0; min-width:0; } .request-search{ align-items:stretch; } .request-search > *{ width:100%; } .request-search .field{ min-width:0; } .request-search .btn{ width:100%; } .card{ padding:18px; } .song-card{ padding:12px; gap:11px; } .song-card-body{ min-width:0; } .song-card-footer{ width:100%; } .song-card-footer .btn,.override-actions .btn{ min-height:42px; } .override-actions{ width:100%; } .override-actions .btn{ flex:1 1 auto; } .filter-tabs{ width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:3px; scrollbar-width:none; } .filter-tabs::-webkit-scrollbar{ display:none; } .filter-tab{ flex:0 0 auto; } .modal-backdrop{ align-items:flex-end; padding:10px; } .modal{ max-height:calc(100dvh - 20px); overflow:auto; border-radius:16px; } .lyrics-text,.lyrics-review-text{ max-height:52dvh; padding:14px; } main{ padding-bottom:88px; } } @media (max-width:520px){ .wrap{ padding:0 14px; } .page{ padding-top:24px; } .page-head h1{ font-size:1.65rem; } .page-head-actions{ flex-direction:column; } .page-head-actions > .btn{ width:100%; flex:none; } .page-head-actions{ gap:8px; } .page-head-actions .btn{ min-height:44px; } .dashboard-grid{ gap:14px; } .card{ border-radius:12px; } .song-card{ display:grid; grid-template-columns:52px minmax(0,1fr); } .song-card-art{ width:52px; height:52px; } .song-card-footer{ grid-column:1 / -1; } .now-playing-bar{ padding:8px 10px; gap:8px; } .now-playing-art{ width:40px; height:40px; } .now-playing-scrubber input[type="range"]{ min-width:0; } .now-playing-close{ width:40px; height:40px; } } /* ---------- Auth extras ---------- */ .auth-forgot{ margin:12px 0 0; text-align:center; font-size:.86rem; } .auth-forgot a{ color:var(--accent); text-decoration:none; } .auth-forgot a:hover{ text-decoration:underline; } .auth-divider{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-faint); font-size:.78rem; } .auth-divider::before,.auth-divider::after{ content:""; height:1px; flex:1; background:var(--line); } .google-mark{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#fff; color:#4285f4; font-weight:700; font-family:Arial,sans-serif; } @media (max-width:420px){ .auth-divider{ margin:15px 0; } } /* ---------- Google onboarding ---------- */ .google-onboarding-backdrop{ z-index:100; } .google-onboarding{ width:min(100% - 28px, 500px); max-height:calc(100dvh - 28px); overflow:auto; } .google-onboarding-icon{ display:flex; justify-content:center; margin-bottom:14px; } .google-onboarding-icon > span{ width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:#fff; border:1px solid var(--line); font:700 1.4rem Arial,sans-serif; } .google-role-fieldset{ border:0; padding:0; margin:18px 0 0; } .google-role-fieldset legend{ font-weight:700; margin-bottom:8px; } .google-role-card{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:13px 14px; margin-top:8px; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--text); cursor:pointer; } .google-role-card span{ color:var(--text-dim); font-size:.8rem; } .google-role-card.is-selected{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent) inset; } .google-onboarding-submit{ width:100%; margin-top:18px; } .google-avatar-note{ text-align:center; margin:10px 0 0; } /* ---------- Navigation alignment ---------- */ @media (min-width: 769px){ .app-nav-primary{ order:2; } .app-nav-actions{ margin-left:auto; order:3; } } /* ---------- Mobile cleanup ---------- */ @media (max-width: 760px){ .wrap{ padding-left:16px; padding-right:16px; } header.site{ padding:14px 0 8px; } .landing-nav-actions .nav-audience-link{ display:none; } .landing-nav-actions .theme-toggle{ width:34px; height:34px; } .landing-nav-actions .nav-cta:not(.nav-audience-link){ padding:7px 10px; font-size:.72rem; } .hero{ padding:42px 0 28px; } .hero-grid{ grid-template-columns:1fr; gap:28px; } .hero-ctas{ flex-wrap:wrap; } .hero-ctas .nav-cta{ flex:1 1 140px; justify-content:center; text-align:center; } .panels,.mod-strip{ grid-template-columns:1fr; } .wave-panel{ padding:18px; } .bars{ height:90px; } .score-card{ padding:14px; } .app-nav-row{ min-height:60px; } .app-nav-primary{ display:none; } .app-nav-actions{ margin-left:auto; } .app-nav-menu{ left:12px; right:12px; width:auto; max-height:calc(100dvh - 74px); overflow:auto; } .page-head{ flex-wrap:wrap; align-items:flex-start; gap:12px; } .page-head > .btn{ width:100%; } .dashboard-grid{ grid-template-columns:1fr; } .dashboard-class-row{ align-items:flex-start; flex-direction:column; } .dashboard-now-playing{ width:100%; max-width:none; } .auth-page{ padding:14px; align-items:flex-start; padding-top:24px; } .auth-card{ width:min(100%, 500px); padding:22px 18px; } .google-onboarding{ padding:20px 16px; } } /* Prevent long content from creating accidental horizontal scrolling. */ img,svg{ max-width:100%; } button,input,textarea,select{ max-width:100%; } .google-avatar-managed{ display:block; margin-top:4px; max-width:180px; line-height:1.35; } @media (max-width:760px){ .app-nav-primary{ margin-left:0; } .app-nav-row{ gap:10px; } .wordmark{ font-size:1.15rem; } .wordmark-logo{ height:24px; } } /* Public audience pages */ .audience-main{padding:72px 0 90px}.audience-title{font-size:clamp(2.5rem,6vw,5rem);line-height:.98;max-width:900px;margin:10px 0 18px}.audience-lead{max-width:720px;font-size:1.1rem;line-height:1.7;color:var(--text-dim)}.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}.audience-panel h2{margin-top:0}.audience-panel li{margin:13px 0;color:var(--text-dim)}.audience-callout{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface))}.audience-callout p{color:var(--text-dim);line-height:1.6} .landing-now-playing{border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));overflow:hidden}.landing-now-playing-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);font:600 .68rem 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}.landing-now-playing-body{display:flex;align-items:center;gap:14px;padding:14px;min-width:0}.landing-now-playing-art{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 auto}.landing-now-playing-art.fallback{display:grid;place-items:center;background:color-mix(in srgb,var(--text) 7%,transparent);font-size:1.5rem}.landing-now-playing-copy{display:flex;flex-direction:column;min-width:0;flex:1;gap:3px}.landing-now-playing-copy strong,.landing-now-playing-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.landing-now-playing-copy strong{font-size:.95rem}.landing-now-playing-copy span{color:var(--text-dim);font-size:.82rem}.class-now-playing-card{margin-bottom:18px}.dashboard-now-playing-card{width:100%}.release-backdrop{z-index:120}.release-modal{width:min(100% - 28px,470px)} @media(max-width:760px){.landing-nav-actions .nav-cta{padding:7px 10px!important;font-size:.72rem!important;min-height:34px}.hero-ctas .nav-cta{width:auto!important;flex:1 1 0;min-width:0}.audience-main{padding:44px 0 64px}.audience-grid{grid-template-columns:1fr}.audience-title{font-size:2.7rem}.landing-now-playing-head{align-items:flex-start;flex-direction:column;gap:4px}.landing-now-playing-body{padding:12px}.landing-now-playing-body .status-pill{display:none}} @media(max-width:420px){.landing-nav-actions{gap:5px}.landing-nav-actions .nav-cta{padding:6px 8px!important;font-size:.68rem!important}.hero-ctas{gap:8px}} /* Keep public auth actions visually consistent with the landing header. */ .auth-card .btn{font-family:'Space Grotesk',sans-serif;font-size:.78rem;font-weight:600;border-radius:999px;padding:9px 14px;min-height:38px} .auth-card .auth-switch a,.auth-card .auth-forgot a{font-family:'Space Grotesk',sans-serif}