/* MIX-ED — DJ Academy Portal Brand palette from the printed posters: blue → purple → pink ramp on white, Archivo Black display font for headings. */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;700&display=swap'); /* ----------------------------------------------------------- THEME TOKENS The portal supports light + dark. - Default (no attribute) = LIGHT (clean, classroom-projector friendly) - = DARK (studio aesthetic) The Studios (DJ, Composer, Player) are always dark regardless of user preference — they use body.always-dark which forces the dark token set locally. Navigation/admin pages follow the user toggle. ----------------------------------------------------------- */ :root { /* Surfaces */ --bg: #ffffff; --bg-elev: #fafafa; --bg-card: #ffffff; --surface-1: #ffffff; /* page background */ --surface-2: #fafafa; /* cards, panels */ --surface-3: #f0f0f3; /* nested cards */ --surface-overlay: rgba(0,0,0,0.06); /* Borders */ --border: #e5e5e5; --border-strong: #0a0a0a; --border-soft: #e5e5e5; /* Text */ --text: #0a0a0a; --text-dim: #5a5a5a; --text-muted: #8b8e9f; --text-on-accent: #ffffff; /* Accents (constant across themes — they're the brand) */ --accent-blue: #3d5fec; --accent-purple: #8b3dee; --accent-pink: #ee3d8b; --accent-green: #2ec882; --accent-amber: #ffb84d; --accent: var(--accent-pink); /* States */ --success: #2e7d32; --warning: #b58900; --danger: #c0392b; /* Geometry / type */ --radius: 6px; --shadow: 0 8px 30px rgba(0,0,0,0.12); --shadow-lg: 0 18px 36px rgba(0,0,0,0.18); --max: 1100px; --font: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --font-display: "Archivo Black", "Helvetica Neue", Arial, sans-serif; } /* Dark theme — applied via or body.always-dark. Swaps the surface/text/border tokens; accents stay the same. */ :root[data-theme="dark"], body.always-dark, .instrument-dark { --bg: #0c0d12; --bg-elev: #14151c; --bg-card: #14151c; --surface-1: #0c0d12; --surface-2: #14151c; --surface-3: #1a1c25; --surface-overlay: rgba(255,255,255,0.06); --border: #2a2c38; --border-strong: #f5f5fb; --border-soft: #2a2c38; --text: #f5f5fb; --text-dim: #c4c6d4; --text-muted: #8b8e9f; --text-on-accent: #ffffff; --shadow: 0 8px 30px rgba(0,0,0,0.4); --shadow-lg: 0 18px 36px rgba(0,0,0,0.5); } /* When the instrument lives inside a light-themed page, restate background/ text so the inner shell actually looks dark instead of just having dark tokens that nothing references. */ .instrument-dark { background: var(--bg); color: var(--text); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } img { max-width: 100%; height: auto; } /* Header */ .site-header { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 10; } .site-header .inner { max-width: var(--max); margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; gap: 24px; } .brand { display: flex; align-items: center; gap: 20px; text-decoration: none; color: var(--text); } .brand img { height: 32px; width: auto; display: block; } /* The wordmark SVG is drawn near-black; flip it to white on dark surfaces so the logo doesn't vanish. */ :root[data-theme="dark"] .brand img, body.always-dark .brand img { filter: invert(1) brightness(1.15); } .brand .tagline { font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); border-left: 1px solid var(--border); padding-left: 20px; } .nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; } .nav a { color: var(--text-dim); text-decoration: none; font-weight: 400; font-size: 0.95rem; padding: 8px 14px; border-radius: var(--radius); letter-spacing: 0.5px; } .nav a:hover, .nav a.active { color: var(--text); background: var(--bg-elev); } /* Layout */ main { max-width: var(--max); margin: 0 auto; padding: 40px 24px 96px; } /* Hero */ .hero { padding: 64px 0 32px; border-bottom: 1px solid var(--border); margin-bottom: 48px; } .hero .hero-logo { max-width: 380px; margin-bottom: 28px; display: block; } .hero h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1; margin: 0 0 18px; font-weight: 400; letter-spacing: -1px; text-transform: uppercase; background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-purple) 50%, var(--accent-pink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { font-size: 1.1rem; color: var(--text-dim); max-width: 640px; margin: 0 0 24px; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } .btn { display: inline-block; padding: 12px 22px; border-radius: var(--radius); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.5px; border: 1px solid var(--border-strong); cursor: pointer; text-decoration: none; transition: background-color .15s ease, color .15s ease; } .btn-primary { background: var(--accent-pink); color: #ffffff; border-color: var(--accent-pink); } .btn-primary:hover { background: #c92a72; border-color: #c92a72; text-decoration: none; } .btn-secondary { background: var(--bg); color: var(--text); } .btn-secondary:hover { background: var(--bg-elev); text-decoration: none; } .btn-ghost { background: transparent; color: var(--text-dim); border-color: transparent; padding-left: 8px; padding-right: 8px; } .btn-ghost:hover { color: var(--text); text-decoration: none; } /* Section */ .section-title { margin: 48px 0 8px; font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; letter-spacing: -0.2px; text-transform: uppercase; } .section-sub { color: var(--text-dim); margin-top: 0; margin-bottom: 24px; } /* Pill filters */ .pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; } .pill { font: inherit; font-size: 0.85rem; letter-spacing: 0.5px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); cursor: pointer; } .pill:hover { background: var(--bg-elev); } .pill.active { background: var(--accent-pink); color: #ffffff; border-color: var(--accent-pink); } /* Lesson grid */ .lesson-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .lesson-card { display: block; padding: 24px; background: var(--bg-card); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; transition: background-color .15s; position: relative; } .lesson-card .tag { display: inline-block; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-blue); font-weight: 500; margin-bottom: 14px; } .lesson-card:nth-child(3n+2) .tag { color: var(--accent-purple); } .lesson-card:nth-child(3n+3) .tag { color: var(--accent-pink); } .lesson-card:hover { background: var(--bg-elev); border-color: var(--accent-purple); text-decoration: none; } .lesson-card h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.2px; } .lesson-card p { margin: 0; color: var(--text-dim); font-size: 0.93rem; } .lesson-card .meta { display: flex; gap: 8px; align-items: center; margin-top: 20px; font-size: 0.78rem; color: var(--text-dim); letter-spacing: 0.5px; text-transform: uppercase; } .lesson-card .complete-badge { position: absolute; top: 22px; right: 22px; background: var(--accent-pink); color: #ffffff; font-size: 0.65rem; font-weight: 500; padding: 3px 8px; border-radius: 999px; letter-spacing: 1px; text-transform: uppercase; } /* Lesson detail */ .lesson-header { padding: 8px 0 32px; border-bottom: 1px solid var(--border); margin-bottom: 36px; } .lesson-header h1 { font-family: var(--font-display); margin: 12px 0 12px; font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; letter-spacing: -0.5px; text-transform: uppercase; } .lesson-header .crumbs { color: var(--text-dim); font-size: 0.85rem; letter-spacing: 0.5px; text-transform: uppercase; } .lesson-content { max-width: 720px; font-size: 1.05rem; } .lesson-content h2 { margin-top: 40px; font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; letter-spacing: -0.2px; text-transform: uppercase; color: var(--accent-purple); } .lesson-content p { color: var(--text); } .lesson-content ul { padding-left: 22px; } .lesson-content figure { margin: 28px 0; } .lesson-content figcaption { color: var(--text-dim); font-size: 0.88rem; margin-top: 8px; } .video-wrap { position: relative; padding-bottom: 56.25%; height: 0; border: 1px solid var(--border); overflow: hidden; background: #000; margin: 16px 0; } .video-wrap iframe, .video-wrap video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* Downloads */ .downloads { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; } .downloads a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: 0.95rem; } .downloads a:hover { background: var(--bg-elev); text-decoration: none; } .downloads .icon { font-size: 1rem; } /* Quiz */ .quiz { margin-top: 48px; padding: 32px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); } .quiz h2 { margin-top: 0; } .question { margin: 20px 0; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .question:last-of-type { border-bottom: 0; } .question .q-text { font-weight: 500; margin-bottom: 12px; } .options { display: grid; gap: 8px; } .option { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); cursor: pointer; user-select: none; font-size: 0.95rem; } .option:hover { border-color: var(--text); } .option input { accent-color: var(--text); } .option.correct { border-color: var(--success); background: #ecf6ec; } .option.wrong { border-color: var(--danger); background: #fbf1ef; } .option:has(input:checked) { border-color: var(--accent-pink); background: #fdedf4; } .quiz-result { margin-top: 20px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border-strong); font-weight: 500; } /* Mark complete bar */ .complete-bar { margin-top: 36px; padding: 20px 24px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .complete-bar .status { color: var(--text-dim); } .complete-bar.done { background: #fdedf4; border-color: var(--accent-pink); } .complete-bar.done .status { color: var(--accent-pink); font-weight: 500; } /* Teacher dashboard */ .stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 16px 0 36px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .stat { background: var(--bg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 24px; } .stat .label { color: var(--text-dim); font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; } .stat .value { font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; letter-spacing: -1px; color: var(--accent-purple); } .table-wrap { overflow-x: auto; border: 1px solid var(--border); } table { width: 100%; border-collapse: collapse; min-width: 540px; } th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.95rem; } th { background: var(--bg-elev); color: var(--text-dim); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; } tr:last-child td { border-bottom: 0; } .notice { margin: 28px 0 8px; padding: 18px 20px; background: var(--bg-elev); border: 1px solid var(--border); font-size: 0.93rem; color: var(--text); } .notice code { background: var(--bg); padding: 1px 6px; border: 1px solid var(--border); font-size: 0.85em; } /* Inputs */ input[type="text"] { background: var(--bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 10px 14px; font: inherit; font-size: 0.95rem; } /* Footer */ .site-footer { border-top: 1px solid var(--border); margin-top: 80px; padding: 28px 24px; color: var(--text-dim); text-align: center; font-size: 0.85rem; letter-spacing: 0.5px; } /* ===== Lesson → quiz CTA + teach CTA ===== */ .quiz-cta, .teach-cta { margin: 32px 0 8px; padding: 22px 24px; background: linear-gradient(135deg, #fdedf4 0%, #ede5fe 100%); border: 1px solid var(--accent-purple); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .teach-cta { margin: 18px 0 24px; background: linear-gradient(135deg, #e5edfe 0%, #ede5fe 100%); border-color: var(--accent-blue); } .quiz-cta-label, .teach-cta-label { font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); } .quiz-cta-title, .teach-cta-title { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.2px; margin: 4px 0 4px; } .quiz-cta-sub, .teach-cta-sub { font-size: 0.9rem; color: var(--text-dim); } /* Video — caption track styling */ .video-wrap video::cue { background: rgba(10,10,10,0.75); color: #fff; font-family: var(--font); font-size: 1rem; } /* ===== Submission form ===== */ .submit-form { margin-top: 32px; padding: 24px; background: var(--bg-elev); border: 1px solid var(--border); } .submit-form h2 { margin-top: 0; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.2px; } .submit-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 18px; } .submit-row label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-dim); letter-spacing: 0.5px; text-transform: uppercase; } .submit-row input, .submit-row select { background: var(--bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 10px 14px; font: inherit; font-size: 0.95rem; text-transform: none; letter-spacing: 0; } .submit-confirm { margin-top: 16px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--text); font-size: 0.95rem; } .game-quit-row { margin-top: 24px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* Game frame — keeps the play area visible against the white page */ #game-root { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 28px 32px; margin-top: 16px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); position: relative; } /* Fullscreen button pinned bottom-right of the game frame */ .fs-btn { position: absolute; bottom: 16px; right: 16px; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong); box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 10; } .fs-btn:hover { background: var(--bg); } .fs-btn svg { width: 22px; height: 22px; display: block; } /* Mistakes review on the results screen */ .mistakes-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); } .mistakes-section .cta-row { margin-top: 32px; padding-top: 8px; } .mistakes-section h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; text-transform: uppercase; letter-spacing: -0.2px; margin: 0 0 18px; color: var(--accent-purple); } .mistakes-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .mistake-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 20px 22px 24px 56px; position: relative; display: flex; flex-direction: column; gap: 16px; text-align: center; } .mistake-num { position: absolute; top: 50%; left: 28px; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: 1.8rem; color: var(--text-dim); line-height: 1; } .mistake-question { background: var(--bg-elev); border-radius: 6px; padding: 12px; display: flex; align-items: center; justify-content: center; min-height: 120px; } .mistake-question .staff-svg { max-width: 100%; max-height: 140px; } .mistake-question .prompt-text { font-size: 1rem; font-weight: 500; } .prompt-text .mnemonic { display: inline-block; margin-top: 6px; font-size: 0.9em; font-weight: 400; color: var(--text-dim); letter-spacing: 0.5px; } .mistake-question .camelot-key { font-size: 2.6rem; } .mistake-question .big-letter { font-size: 4rem; } .mistake-answers { display: flex; gap: 32px; justify-content: center; margin-top: 4px; } .mistake-answers > div { display: flex; flex-direction: column; align-items: center; gap: 4px; } .mistake-answers .lbl { font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); font-weight: 500; } .mistake-answers strong { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; font-weight: 400; letter-spacing: -0.5px; } .m-you strong { color: #ff1744; } .m-right strong { color: #00c853; } /* Print — show only the score + mistakes review on paper */ @media print { .site-header, .site-footer, .fs-btn, .game-result .submit-form, .game-result > .cta-row, .mistakes-section .cta-row, .game-result .result-meta { display: none !important; } body, main { background: #fff !important; } #game-root { border: 0; box-shadow: none; padding: 0; } .mistake-card { break-inside: avoid; page-break-inside: avoid; } .mistakes-list { grid-template-columns: 1fr 1fr; } } /* ===== Fullscreen — scale the quiz to fill the window ===== */ :fullscreen { background: var(--bg); overflow-y: auto; } :fullscreen .site-header, :fullscreen .site-footer { display: none; } :fullscreen main { max-width: 1600px; padding: 32px 40px 40px; } :fullscreen .game-intro h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); } :fullscreen .game-intro .section-sub { font-size: 1.2rem; } :fullscreen .game-rules li { font-size: 1.1rem; padding: 12px 0; } :fullscreen .game-hud { max-width: 720px; } :fullscreen .hud-cell { padding: 18px 26px; } :fullscreen .hud-label { font-size: 0.95rem; } :fullscreen .hud-value { font-size: 3rem; } :fullscreen .game-stage { min-height: 500px; padding: 48px 0; gap: 20px; } :fullscreen .prompt-text { font-size: 2.2rem; max-width: 1100px; } :fullscreen .big-letter { font-size: clamp(9rem, 18vw, 14rem); } :fullscreen .camelot-key { font-size: clamp(5rem, 12vw, 8rem); } :fullscreen .staff-svg { max-width: 980px; } :fullscreen .staff-svg.mini { max-width: 400px; } :fullscreen .game-options { gap: 14px; } :fullscreen .opt-btn { font-size: 1.6rem; padding: 24px 36px; min-width: 96px; border-radius: 6px; } :fullscreen .opt-btn.big { font-size: 2.2rem; padding: 30px 38px; min-width: 120px; } :fullscreen .opt-btn.wide { flex: 1 1 360px; max-width: 460px; font-size: 1.5rem; padding: 24px 30px; } :fullscreen .opt-btn.camelot { font-size: 1.8rem; padding: 28px 36px; } :fullscreen .opt-btn.mini-staff { padding: 12px; } :fullscreen .game-options.find-grid { max-width: 800px; gap: 20px; } :fullscreen .game-feedback { font-size: 1.4rem; margin-top: 22px; min-height: 32px; } :fullscreen .game-quit-row { margin-top: 32px; gap: 14px; } :fullscreen .game-quit-row .btn { font-size: 1rem; padding: 14px 24px; } :fullscreen .fs-btn { width: 48px; height: 48px; } :fullscreen .fs-btn svg { width: 24px; height: 24px; } :fullscreen .game-result h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); } :fullscreen .big-num { font-size: clamp(8rem, 14vw, 11rem); } :fullscreen .result-pct { font-size: 2rem; } :fullscreen .result-verdict { font-size: 1.4rem; } /* ===== Scoreboard ===== */ .board-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; } .board-controls { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; } .board-controls label { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); } .board-controls select { background: var(--bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 9px 12px; font: inherit; font-size: 0.95rem; letter-spacing: 0; } .board-wrap { border: 1px solid var(--border); overflow-x: auto; } .board-table { width: 100%; border-collapse: collapse; min-width: 640px; } .board-table th, .board-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: 1rem; } .board-table th { background: var(--bg-elev); color: var(--text-dim); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; } .board-table .num { text-align: right; font-variant-numeric: tabular-nums; } .board-table .rank { color: var(--text-dim); font-variant-numeric: tabular-nums; width: 48px; } .board-table .name { font-weight: 500; } .board-table .quiz { color: var(--text-dim); font-size: 0.9rem; } .board-table tr:last-child td { border-bottom: 0; } .empty { padding: 40px 24px; text-align: center; color: var(--text-dim); } .storage-status { display: inline-block; margin-left: 10px; padding: 2px 10px; font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim); background: var(--bg-elev); } .storage-status.live { color: var(--success); border-color: var(--success); background: #f1f8f1; } /* Projector mode — big type, hide nav/footer */ body.projector-mode .site-header, body.projector-mode .site-footer, body.projector-mode .notice, body.projector-mode .board-controls .btn-ghost, body.projector-mode #count { display: none; } body.projector-mode main { max-width: 1600px; padding-top: 28px; } body.projector-mode .section-title { font-size: 3rem; font-weight: 300; } body.projector-mode .section-sub { font-size: 1.2rem; } body.projector-mode .board-table th { font-size: 1rem; padding: 18px 24px; } body.projector-mode .board-table td { font-size: 1.8rem; padding: 22px 24px; font-weight: 300; } body.projector-mode .board-table .rank { font-size: 1.4rem; width: 80px; } body.projector-mode .board-table .quiz { font-size: 1.1rem; } /* ===== Quick Quiz Game ===== */ .game-intro { max-width: 640px; padding: 24px 0; } .game-intro h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 400; letter-spacing: -0.5px; margin: 8px 0 12px; text-transform: uppercase; } .game-rules { list-style: none; padding: 0; margin: 18px 0 28px; } .game-rules li { padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text); font-size: 0.95rem; letter-spacing: 0.3px; } .game-rules li::before { content: "·"; color: var(--text-dim); margin-right: 10px; } .game-intro .crumbs { color: var(--text-dim); font-size: 0.85rem; letter-spacing: 0.5px; text-transform: uppercase; } .game-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border-strong); margin: 8px 0 28px; max-width: 440px; margin-left: auto; } .game-hud.two-cell { grid-template-columns: 1fr 1fr; max-width: 320px; } .hud-cell { padding: 12px 18px; } .hud-cell + .hud-cell { border-left: 1px solid var(--border-strong); } .hud-label { font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); } .hud-value { font-family: var(--font-display); font-size: 2rem; font-weight: 400; letter-spacing: -1px; line-height: 1.1; color: var(--accent-pink); } .game-stage { display: flex; align-items: center; justify-content: center; padding: 32px 0; min-height: 220px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 28px; } .prompt-text { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 300; letter-spacing: -0.5px; text-align: center; color: var(--text); } .staff-svg { width: 100%; max-width: 520px; height: auto; } .camelot-key { font-size: clamp(3rem, 8vw, 5rem); font-weight: 300; letter-spacing: -2px; margin-top: 8px; line-height: 1; } .game-options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .opt-btn { font: inherit; font-size: 1.05rem; font-weight: 500; min-width: 64px; padding: 14px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); color: var(--text); cursor: pointer; transition: background-color .15s, color .15s, transform .05s; letter-spacing: 0.5px; } .opt-btn:hover { background: var(--bg-elev); } .opt-btn:active { transform: scale(0.97); } .opt-btn.wide { flex: 1 1 220px; max-width: 280px; } .opt-btn.mini-staff { padding: 8px; background: #ffffff; } .game-options.find-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 540px; margin: 0 auto; } .game-options.find-grid .opt-btn { margin: 0; } .game-options.note-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; max-width: 560px; margin: 0 auto; } .opt-btn.note-label { padding: 12px 4px; min-width: 0; font-size: 1rem; } :fullscreen .opt-btn.note-label { padding: 22px 8px; font-size: 1.6rem; } :fullscreen .game-options.note-grid { max-width: 900px; gap: 14px; } /* Level 3 — single chromatic row of 12 same-colour buttons */ .game-options.l3-row-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; max-width: 760px; margin: 0 auto; padding: 0 8px; } .opt-btn.l3-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 10px 2px; line-height: 1.1; background: #ffffff; color: var(--text); border: 1px solid var(--border-strong); } .opt-btn.l3-cell .hi { font-size: 1.15rem; font-weight: 500; } .opt-btn.l3-cell .lo { font-size: 0.95rem; color: var(--text); font-weight: 500; margin-top: 3px; min-height: 1.1em; /* keeps D, G, A the same height as the rest */ } .opt-btn.l3-cell.correct .lo { color: rgba(255,255,255,0.92); } .opt-btn.l3-cell.wrong .lo { color: rgba(255,255,255,0.92); } :fullscreen .game-options.l3-row-wrap { max-width: 1000px; } :fullscreen .opt-btn.l3-cell .hi { font-size: 1.55rem; } :fullscreen .opt-btn.l3-cell .lo { font-size: 1.2rem; } /* Two-octave letter row — 14 buttons across, lower-octave on the left */ .game-options.two-oct-grid { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; max-width: 820px; margin: 0 auto; } .opt-btn.note-2oct { padding: 12px 2px; min-width: 0; font-size: 1.05rem; line-height: 1; } .opt-btn.note-2oct sub { font-size: 0.55rem; font-weight: 400; vertical-align: baseline; position: relative; top: 0.4em; margin-left: 1px; } :fullscreen .game-options.two-oct-grid { max-width: 1200px; gap: 10px; } :fullscreen .opt-btn.note-2oct { padding: 22px 4px; font-size: 1.6rem; } :fullscreen .opt-btn.note-2oct sub { font-size: 0.85rem; top: 0.4em; } /* Piano keyboard for the piano-pitch quizzes — flat solid black keys, thick borders */ .game-options.piano-wrap { display: block; padding: 0 8px; } .piano-toolbar { display: flex; justify-content: flex-end; max-width: 820px; margin: 0 auto 10px; } .piano-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-dim); cursor: pointer; user-select: none; } .piano-toggle input { margin: 0; cursor: pointer; accent-color: var(--accent-pink); } .piano.no-labels .white-key, .piano.no-labels .black-key { color: transparent; } .piano.no-labels .black-key span { color: transparent; } /* C4 / C5 stay visible as orientation anchors in octave-strict mode */ .piano.no-labels .white-key.anchor { color: var(--text); } /* Subscript octave digits on piano keys */ .piano-key sub { font-size: 0.55rem; font-weight: 400; vertical-align: baseline; position: relative; top: 0.35em; margin-left: 1px; } /* One-line strict-octave hint above the melody keyboard */ .strict-hint { text-align: center; font-size: 0.85rem; color: var(--text-dim); margin: 0 auto 12px; max-width: 760px; line-height: 1.4; } .strict-hint sub { font-size: 0.7em; } :fullscreen .strict-hint { font-size: 1.05rem; } /* ---------- Ukulele practice section ---------- */ .uke-player-wrap { max-width: 980px; margin: 0 auto; padding: 24px 0; } .uke-header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; } .uke-header .back-link { color: var(--text-dim); text-decoration: none; font-size: 0.9rem; margin-bottom: 4px; } .uke-header .back-link:hover { color: var(--text); } .uke-header h2 { margin: 0; font-family: var(--font-display); font-size: 2rem; font-weight: 400; text-transform: uppercase; letter-spacing: -0.5px; } .uke-header .meta { color: var(--text-dim); margin: 4px 0 0; font-size: 0.95rem; } .uke-stage { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 32px 24px 24px; margin-bottom: 24px; } .uke-chord-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 14px; } .uke-chord-cell { flex: 1 1 calc(25% - 16px); max-width: 200px; min-width: 130px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; } .uke-chord-name { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; text-align: center; padding: 4px 16px; border-radius: 6px; letter-spacing: -0.5px; } .uke-chord-cell.active .uke-chord-name { background: rgba(238, 61, 139, 0.22); /* accent-pink at low opacity */ color: var(--text); } .uke-chord-svg { display: flex; justify-content: center; } .uke-chord { display: block; } .uke-beat-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 8px; } .uke-beat-group { flex: 1 1 calc(25% - 16px); max-width: 200px; min-width: 130px; display: flex; justify-content: space-around; align-items: center; gap: 4px; } .uke-beat { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: #c8c8c8; min-width: 14px; text-align: center; letter-spacing: -0.5px; transition: color 0.04s linear; } .uke-beat.uke-beat-and { font-size: 1.2rem; color: #d8d8d8; } .uke-beat.active { color: var(--text); } .uke-beat.uke-beat-and.active { color: var(--text); } /* v2 modern audio + lyrics layout — all chord cells in a row, single lyric below */ .uke-stage-v2 { background: linear-gradient(180deg, #fcfcfc 0%, var(--bg-elev) 100%); border: 1px solid var(--border); border-radius: 16px; padding: 32px 24px 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.04); } .uke-stage-v2 .uke-chord-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 24px; } .uke-stage-v2 .uke-chord-cell { flex: 1 1 calc(25% - 12px); max-width: 220px; min-width: 140px; background: transparent; border-radius: 10px; padding: 12px 8px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; transition: background-color 0.15s ease; } .uke-stage-v2 .uke-chord-cell.active { background: rgba(238, 61, 139, 0.06); } .uke-stage-v2 .uke-chord-cell.next { background: rgba(46, 200, 130, 0.07); } .uke-stage-v2 .uke-chord-cell.next .uke-chord-svg .uke-chord ellipse, .uke-stage-v2 .uke-chord-cell.next .uke-chord-svg .uke-chord circle[fill="#0a0a0a"] { fill: #2ec882; } .uke-stage-v2 .uke-chord-cell.next .uke-chord-name { color: #2ec882; } .uke-stage-v2 .uke-chord-name-row { display: inline-flex; padding: 2px 0; } .uke-stage-v2 .uke-chord-name { font-family: var(--font-display); font-size: 2rem; font-weight: 400; letter-spacing: -0.5px; padding: 4px 18px; border-radius: 8px; line-height: 1.1; transition: background 0.15s ease, color 0.15s ease; } .uke-stage-v2 .uke-chord-cell.active .uke-chord-name { background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)); color: #ffffff; box-shadow: 0 4px 14px rgba(238, 61, 139, 0.35); } .uke-stage-v2 .uke-chord-svg .uke-chord { width: 110px; height: 140px; } .uke-stage-v2 .uke-beat-group { display: flex; gap: 10px; align-items: center; margin-top: 4px; padding: 8px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; min-width: 140px; justify-content: space-around; } .uke-stage-v2 .uke-beat { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: #c8c8c8; min-width: 16px; text-align: center; letter-spacing: -0.5px; transition: color 0.04s linear, transform 0.04s linear; } .uke-stage-v2 .uke-beat.uke-beat-and { font-size: 1.15rem; color: #d8d8d8; } .uke-stage-v2 .uke-beat.active { color: var(--text); transform: scale(1.2); } .uke-stage-v2 .uke-beat.uke-beat-and.active { color: var(--text); } .uke-dropzone { border: 2px dashed var(--border-strong); border-radius: 12px; padding: 20px; margin-bottom: 18px; background: var(--bg); transition: border-color 0.15s ease, background 0.15s ease; } .uke-dropzone-active { border-color: var(--accent-pink); background: rgba(238, 61, 139, 0.06); } .uke-dropzone-inner { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; gap: 4px; } .uke-dropzone-icon { font-size: 2rem; color: var(--accent-purple); line-height: 1; } .uke-dropzone strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; letter-spacing: -0.2px; } .uke-dropzone-sub { color: var(--text-dim); font-size: 0.88rem; margin: 4px 0 0; } .uke-audio-error { background: #fff4f4; border: 1px solid #f5c2c7; color: #842029; border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; font-size: 0.95rem; line-height: 1.45; } .uke-audio-error strong { display: block; margin-bottom: 2px; } .uke-audio-error code { background: #ffe7e9; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; } .uke-chord-row-wrap { position: relative; } .uke-bar-counter { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--accent-pink); display: flex; align-items: center; justify-content: center; background: var(--bg); font-family: var(--font-display); font-size: 1.3rem; color: var(--accent-pink); line-height: 1; box-shadow: 0 2px 10px rgba(238, 61, 139, 0.18); pointer-events: none; z-index: 2; } .uke-stage-v2 .uke-bar-pips { display: flex; gap: 6px; margin-top: 4px; } .uke-stage-v2 .uke-bar-pip { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background 0.15s ease, transform 0.15s ease; } .uke-stage-v2 .uke-bar-pip.active { background: var(--accent-pink); transform: scale(1.25); } .uke-lyric-line { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 22px 28px; margin: 8px auto 0; max-width: 880px; text-align: center; font-size: 1.4rem; font-weight: 400; color: var(--text); min-height: 1.5em; line-height: 1.5; letter-spacing: -0.2px; } .uke-lyric-line:empty::before { content: "♪"; color: var(--text-dim); font-size: 1.2rem; } .uke-lyric-flip { animation: ukeLyricFlip 0.4s ease-out; } @keyframes ukeLyricFlip { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } /* Old keep-around (audio+lyrics karaoke) — superseded by v2 above */ .uke-stage-song { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: stretch; } .uke-song-chords { display: flex; flex-direction: column; gap: 8px; align-items: center; } .uke-now-label, .uke-next-label { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; } .uke-current-diagram, .uke-next-diagram { display: flex; flex-direction: column; align-items: center; gap: 4px; } .uke-chord-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; letter-spacing: -0.5px; } .uke-chord-name-big { font-size: 2rem; } .uke-end { color: var(--text-dim); font-style: italic; padding: 24px 12px; text-align: center; } .uke-lyrics { position: relative; height: 360px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; } .uke-lyrics-inner { position: absolute; left: 0; right: 0; padding: 160px 0; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .uke-lyric-line { display: flex; gap: 20px; align-items: baseline; padding: 14px 28px; font-size: 1.2rem; color: var(--text-dim); } .uke-lyric-line .uke-line-chord { font-family: var(--font-display); font-size: 1.3rem; color: var(--accent-blue); min-width: 56px; text-align: right; letter-spacing: -0.5px; } .uke-lyric-line .uke-line-text { flex: 1; } .uke-lyric-line.active { color: var(--text); font-weight: 500; background: rgba(238, 61, 139, 0.13); } .uke-lyric-line.active .uke-line-chord { color: var(--accent-pink); font-size: 1.6rem; } .uke-lyric-line.past { opacity: 0.45; } .uke-lyrics-fade-top, .uke-lyrics-fade-bottom { position: absolute; left: 0; right: 0; height: 70px; pointer-events: none; z-index: 2; } .uke-lyrics-fade-top { top: 0; background: linear-gradient(180deg, var(--bg), transparent); } .uke-lyrics-fade-bottom { bottom: 0; background: linear-gradient(0deg, var(--bg), transparent); } @media (max-width: 720px) { .uke-stage-song { grid-template-columns: 1fr; gap: 16px; } .uke-lyrics { height: 260px; } } .uke-controls { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-bottom: 20px; } .uke-controls .btn { padding: 12px 22px; min-width: 96px; } .uke-transport { display: flex; gap: 8px; } /* Instrument + label-mode + key-transpose row */ .uke-instrument-row { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 20px; align-items: center; padding: 16px 0 0; border-top: 1px solid var(--border); margin-top: 8px; } .uke-label-mode { display: flex; flex-direction: column; gap: 6px; } .uke-label-mode label { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); } .uke-label-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; } .uke-label-btn { font: inherit; font-size: 0.92rem; padding: 8px 14px; background: var(--bg); color: var(--text); border: 0; cursor: pointer; border-right: 1px solid var(--border-strong); } .uke-label-btn:last-child { border-right: 0; } .uke-label-btn:hover:not(:disabled) { background: var(--bg-elev); } .uke-label-btn.active { background: var(--accent-pink); color: #ffffff; } .uke-label-btn:disabled { color: var(--text-dim); cursor: not-allowed; opacity: 0.5; } .uke-instrument-pick { display: flex; flex-direction: column; gap: 6px; } .uke-instrument-pick label, .uke-transpose label { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); } .uke-instrument-pick label span, .uke-transpose label span { color: var(--accent-pink); font-size: 1rem; } .uke-instrument-pick select { font: inherit; font-size: 0.95rem; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg); color: var(--text); cursor: pointer; } .uke-transpose { display: flex; flex-direction: column; gap: 6px; } .uke-transpose input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-pink)); border-radius: 3px; outline: none; } .uke-transpose input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--text); border-radius: 50%; cursor: pointer; } .uke-transpose input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: var(--text); border-radius: 50%; cursor: pointer; border: 0; } .uke-transpose-hints { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-dim); font-family: var(--font-display); } /* Piano-chord diagram tweak — wider than tall, looks more like a real keyboard */ .uke-chord.piano-chord { background: #f8f8f8; border: 1px solid var(--border-strong); border-radius: 4px; } /* When the player is showing piano diagrams the chord cell can be wider */ .piano-mode .uke-chord-cell { max-width: 320px; } .piano-mode .uke-chord-svg .uke-chord { width: 100%; height: auto; max-height: 140px; } /* When the player is showing guitar diagrams the chord cell is the standard * width, but the SVG needs to keep its natural aspect ratio (taller than wide). */ .guitar-mode .uke-chord-cell { max-width: 200px; } .guitar-mode .uke-chord-svg .uke-chord { width: 100%; height: auto; max-height: 180px; } /* Teacher dashboard tools */ .teacher-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 24px 0 32px; } .teacher-tool { display: block; padding: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; transition: background-color .15s, border-color .15s; } .teacher-tool:hover { background: var(--bg-elev); border-color: var(--accent-purple); text-decoration: none; } .teacher-tool .tag { display: inline-block; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-blue); font-weight: 500; margin-bottom: 12px; } .teacher-tool h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 500; } .teacher-tool p { margin: 0; color: var(--text-dim); font-size: 0.93rem; } /* Song Builder layout — 5-step progressive disclosure */ .sb-grid { display: grid; gap: 18px; margin-bottom: 48px; } .sb-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; } .sb-card-step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; } .sb-step-num { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.05rem; margin-top: 2px; } .sb-step-body { min-width: 0; } .sb-step-body .sb-h { margin-top: 0; } /* Compact summary line shown after audio analysis */ .sb-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; margin-top: 14px; } .sb-summary-line { display: flex; gap: 10px; flex-wrap: wrap; } .sb-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; background: var(--bg-elev); border-radius: 999px; font-size: 0.9rem; } .sb-pill .lbl { font-size: 0.72rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); } .sb-pill strong { font-family: var(--font-display); font-size: 0.95rem; color: var(--text); } /* Waveform section — kept in the main view, NOT hidden */ .sb-wave-section { margin-top: 18px; } .sb-wave-section .sb-wave { margin-bottom: 12px; } /* The advanced-edit panel — collapsed by default, holds only BPM/first-beat * fine tuning. The waveform stays in the main view above. */ .sb-adjust-panel { margin-top: 18px; padding: 18px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; } .sb-adjust-h { font-size: 0.92rem; color: var(--text-dim); margin-bottom: 14px; line-height: 1.5; } .sb-fine-controls { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } .sb-fine-row { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; } .sb-fine-row label { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); } .sb-fine-row input, .sb-fine-row select { font: inherit; font-size: 0.9rem; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg); color: var(--text); text-transform: none; letter-spacing: normal; width: 100px; } .sb-hint-small { font-size: 0.82rem; color: var(--text-dim); margin: 6px 0 0; } .sb-h { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 400; color: var(--text-dim); margin: 0 0 14px; } .sb-drop-card { padding: 16px; } .sb-dropzone { border: 2px dashed var(--border-strong); border-radius: 10px; padding: 24px; background: var(--bg); transition: border-color 0.15s, background 0.15s; } .sb-dropzone.dragging { border-color: var(--accent-pink); background: rgba(238, 61, 139, 0.05); } .sb-dropzone-inner { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; gap: 4px; } .sb-dropzone-icon { font-size: 2rem; color: var(--accent-purple); } .sb-dropzone strong { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; letter-spacing: -0.2px; } .sb-dropzone-sub { color: var(--text-dim); font-size: 0.88rem; margin: 4px 0 0; } .sb-wave { background: #fafafa; border-radius: 8px; padding: 8px; margin-bottom: 12px; min-height: 110px; position: relative; } .sb-beat-grid { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 4; /* sit ABOVE the waveform but below the orange region marker */ } /* Make the WaveSurfer container scroll horizontally when zoomed in */ .sb-wave wave { overflow-x: auto !important; } .sb-zoom-control { display: flex; align-items: center; gap: 8px; margin-left: auto; } .sb-zoom-control label { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); } .sb-zoom-control input[type="range"] { -webkit-appearance: none; appearance: none; width: 140px; height: 4px; background: var(--border); border-radius: 2px; outline: none; } .sb-zoom-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--accent-purple); border-radius: 50%; cursor: pointer; } .sb-zoom-control input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: var(--accent-purple); border-radius: 50%; cursor: pointer; border: 0; } .sb-small-btn { padding: 8px 12px !important; min-width: 48px !important; font-size: 0.9rem; } .sb-wave-dragging, .sb-wave-dragging * { cursor: grabbing !important; } .sb-wave-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .sb-wave-controls .btn { padding: 8px 14px; min-width: 56px; } .sb-time { font-family: var(--font-display); font-size: 0.9rem; color: var(--text-dim); } .sb-keytip { color: var(--text-dim); font-size: 0.85rem; margin-left: auto; } .sb-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; margin-bottom: 8px; } .sb-row label { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); flex: 1; min-width: 120px; } .sb-row input, .sb-row select { font: inherit; font-size: 0.95rem; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg); color: var(--text); text-transform: none; letter-spacing: normal; } .sb-row .btn { align-self: end; } .sb-hint { color: var(--text-dim); font-size: 0.88rem; margin: 8px 0; line-height: 1.45; } .sb-hint kbd { font: inherit; font-size: 0.85em; padding: 1px 6px; background: var(--bg); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; } .sb-lyrics { display: flex; flex-direction: column; gap: 6px; } .sb-lyrics-empty { color: var(--text-dim); font-style: italic; font-size: 0.9rem; } .sb-lyric-row { display: grid; grid-template-columns: 60px 70px 1fr 32px; gap: 10px; align-items: center; padding: 6px 8px; background: var(--bg); border-radius: 6px; } .sb-lyric-bar { font-family: var(--font-display); font-size: 0.85rem; color: var(--accent-pink); } .sb-lyric-time { font-size: 0.75rem; color: var(--text-dim); } .sb-lyric-row input { font: inherit; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); } .sb-output { background: #0a0a0a; color: #ee3d8b; padding: 16px; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; white-space: pre; overflow-x: auto; max-height: 320px; } .sb-sections { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .sb-section-pills { display: flex; flex-wrap: wrap; gap: 8px; } .sb-section-pill { display: inline-flex; flex-direction: column; padding: 8px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 0.85rem; min-width: 120px; } .sb-section-pill strong { font-family: var(--font-display); font-size: 0.95rem; color: var(--accent-purple); letter-spacing: 0.3px; } .sb-section-bars { color: var(--text-dim); font-size: 0.78rem; margin-top: 2px; } .sb-section-label { position: absolute; top: 4px; left: 6px; background: rgba(0, 0, 0, 0.55); color: #ffffff; padding: 1px 7px; font-family: var(--font-display); font-size: 0.7rem; border-radius: 3px; letter-spacing: 0.3px; pointer-events: none; } .sb-marker-list { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; } .sb-marker-h { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; } .sb-marker-row { display: grid; grid-template-columns: 70px 1fr 32px; gap: 10px; align-items: center; padding: 4px 8px; background: var(--bg); border-radius: 4px; } .sb-marker-time { font-family: var(--font-display); font-size: 0.8rem; color: var(--accent-pink); } .sb-marker-row input { font: inherit; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); } @media (max-width: 920px) { .uke-instrument-row { grid-template-columns: 1fr 1fr; gap: 16px; } } @media (max-width: 600px) { .uke-instrument-row { grid-template-columns: 1fr; gap: 16px; } } .uke-progress { position: relative; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; } .uke-progress-fill { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-pink)); width: 0%; transition: width 0.1s linear; } .uke-time { font-family: var(--font-display); font-size: 0.95rem; color: var(--text-dim); white-space: nowrap; } .uke-speed { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); } .uke-speed label { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); } .uke-speed label span { color: var(--accent-pink); font-size: 1.1rem; } .uke-speed input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; background: var(--border); border-radius: 3px; outline: none; } .uke-speed input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--accent-pink); border-radius: 50%; cursor: pointer; } .uke-speed input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: var(--accent-pink); border-radius: 50%; cursor: pointer; border: 0; } .uke-speed-presets { display: flex; gap: 6px; } .btn-ghost-pill { font: inherit; font-size: 0.85rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); cursor: pointer; } .btn-ghost-pill:hover { color: var(--text); border-color: var(--border-strong); } .uke-chord-unknown { padding: 20px; border: 2px dashed var(--border-strong); border-radius: 8px; color: var(--text-dim); text-align: center; font-weight: 500; } @media (max-width: 720px) { .uke-stage { grid-template-columns: 1fr; gap: 16px; padding: 20px; } .uke-controls { grid-template-columns: 1fr; gap: 12px; } .uke-speed { grid-template-columns: 1fr; } } /* Rhythm symbol display + button grid */ .rhythm-display { display: flex; align-items: center; justify-content: center; gap: 36px; margin: 20px 0 8px; min-height: 150px; } .rhythm-display.rhythm-pair { gap: 40px; } .rhythm-display .rhythm-svg { width: 76px; height: 140px; display: block; } .rhythm-plus { font-size: 2.4rem; font-weight: 400; color: var(--text-dim); } .game-options.rhythm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 720px; margin: 0 auto; } .game-options.rhythm-grid.wide-grid { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); max-width: 760px; } .game-options.rhythm-grid .opt-btn { min-width: 0; padding: 14px 6px; } :fullscreen .rhythm-display .rhythm-svg { width: 110px; height: 200px; } :fullscreen .rhythm-plus { font-size: 3.4rem; } /* Name-the-Chord button grid — column count per level so L1 fits on one line */ .game-options.chord-name-grid { display: grid; gap: 8px; max-width: 760px; margin: 0 auto; } .game-options.chord-name-grid.l1 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .game-options.chord-name-grid.l2 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .game-options.chord-name-grid.l3 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .opt-btn.chord-name { font-size: 1.05rem; font-weight: 500; padding: 12px 6px; min-width: 0; } :fullscreen .opt-btn.chord-name { font-size: 1.5rem; padding: 18px 8px; min-width: 0; } /* Chord-notes progress indicator (Levels 2 and 3) */ .chord-progress { text-align: center; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.5px; margin-top: 20px; color: var(--accent-purple); text-transform: uppercase; width: 100%; } :fullscreen .chord-progress { font-size: 1.5rem; margin-top: 28px; } /* Play-the-melody progress indicator */ .melody-progress { text-align: center; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.5px; margin-top: 20px; color: var(--accent-purple); text-transform: uppercase; } :fullscreen .melody-progress { font-size: 1.6rem; margin-top: 32px; } /* Player fine-tune row — small, neutral, lives under the speed/key controls */ .uke-finetune { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-top: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 0.85rem; } .uke-finetune-label { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); margin-right: 4px; } .uke-finetune .btn-ghost-pill { font-size: 0.82rem; padding: 5px 10px; } .uke-finetune-status { margin-left: auto; font-size: 0.82rem; color: var(--text-dim); min-width: 100px; text-align: right; } /* MIDI connection indicator */ .midi-status { position: fixed; top: 88px; right: 24px; background: var(--bg-elev); border: 1px solid var(--accent-blue); border-radius: 999px; padding: 8px 16px 8px 12px; font-size: 0.82rem; color: var(--text); font-weight: 500; z-index: 999; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.1); } .midi-status[hidden] { display: none; } .midi-dot { width: 9px; height: 9px; background: var(--accent-blue); border-radius: 50%; box-shadow: 0 0 8px var(--accent-blue); animation: midiPulse 2s ease-in-out infinite; } @keyframes midiPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .piano { position: relative; width: 100%; max-width: 820px; margin: 0 auto; height: 220px; display: flex; border: 2px solid #000; border-radius: 3px; background: #fff; overflow: hidden; box-sizing: border-box; } .piano-key { font: inherit; font-family: var(--font); cursor: pointer; padding: 0 0 8px; margin: 0; display: flex; align-items: flex-end; justify-content: center; min-width: 0; box-sizing: border-box; } .white-key { flex: 1 1 0; background: #ffffff; color: #999; border: 0; border-right: 1.5px solid #000; height: 100%; font-size: 0.7rem; font-weight: 500; min-width: 0; } .white-key:last-of-type { border-right: 0; } .white-key:hover { background: #f3f3f3; } .black-key { position: absolute; top: 0; height: 62%; width: 3.2%; background: #000; color: #888; border: 0; border-radius: 0 0 2px 2px; z-index: 2; font-size: 0.55rem; padding-bottom: 4px; min-width: 0; } .black-key span { pointer-events: none; } .black-key:hover { background: #222; } .opt-btn.piano-key:disabled { cursor: default; } :fullscreen .piano { max-width: 1240px; height: 300px; } :fullscreen .white-key { font-size: 1rem; } :fullscreen .black-key { font-size: 0.8rem; } .opt-btn.mini-staff .staff-svg { display: block; width: 100%; height: auto; } .opt-btn.mini-staff.correct { background: #ecf6ec; } .opt-btn.mini-staff.wrong { background: #fbf1ef; } .big-letter { font-family: var(--font-display); font-size: clamp(4rem, 9vw, 6rem); line-height: 1; background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; margin-top: 8px; } .opt-btn.camelot { min-width: 84px; font-size: 1.2rem; padding: 18px 22px; } .opt-btn:disabled { cursor: default; } .opt-btn.correct { background: #00c853; color: #ffffff; border-color: #00c853; animation: flashCorrect 0.35s ease; } .opt-btn.wrong { background: #ff1744; color: #ffffff; border-color: #ff1744; animation: flashWrong 0.35s ease; } @keyframes flashCorrect { 0% { background: #00c853; box-shadow: 0 0 0 0 rgba(0,200,83,0.7); } 50% { background: #4ddc7e; box-shadow: 0 0 0 10px rgba(0,200,83,0.0); } 100% { background: #00c853; box-shadow: 0 0 0 0 rgba(0,200,83,0); } } @keyframes flashWrong { 0% { background: #ff1744; box-shadow: 0 0 0 0 rgba(255,23,68,0.7); } 50% { background: #ff5470; box-shadow: 0 0 0 10px rgba(255,23,68,0.0); } 100% { background: #ff1744; box-shadow: 0 0 0 0 rgba(255,23,68,0); } } .game-feedback { text-align: center; margin-top: 18px; min-height: 28px; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.5px; } .game-feedback.ok { color: var(--success); } .game-feedback.no { color: var(--danger); } .game-result { padding: 24px 0; text-align: left; } .game-result h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 400; letter-spacing: -0.5px; margin: 8px 0 24px; text-transform: uppercase; } .result-score { display: flex; align-items: baseline; gap: 18px; padding: 24px 0; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); margin-bottom: 18px; } .big-num { font-family: var(--font-display); font-size: clamp(4rem, 11vw, 6.4rem); font-weight: 400; letter-spacing: -3px; line-height: 1; color: var(--accent-purple); } .big-num .of { font-size: 0.4em; color: var(--text-dim); margin-left: 8px; letter-spacing: -1px; } .result-pct { font-size: 1.4rem; color: var(--text-dim); font-weight: 300; } .result-summary { color: var(--text-dim); font-size: 1rem; margin: 4px 0 18px; max-width: 720px; line-height: 1.45; } .result-verdict { font-size: 1.1rem; margin: 8px 0 4px; } .result-meta { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 6px; } .result-meta + .result-meta { margin-top: 0; } .result-labels { margin-bottom: 22px; } .result-labels strong { color: var(--text); font-weight: 500; letter-spacing: 0.5px; } @media (max-width: 540px) { .site-header .inner { flex-wrap: wrap; padding: 18px 20px; } .brand .tagline { display: none; } .nav { width: 100%; } .game-hud { max-width: 100%; } } /* ------------------------------------------------------------------ * Ukulele quizzes — Name the chord, Pick the shape, Open strings * ------------------------------------------------------------------ */ .uke-quiz-diagram { display: flex; justify-content: center; align-items: center; margin: 12px auto; } .uke-quiz-diagram .uke-chord { width: 220px; height: 280px; } .uke-chord-quiz { width: 200px; height: 240px; } .uke-quiz-hint { text-align: center; color: var(--text-dim); font-size: 0.9rem; margin-top: 8px; } .game-options.uke-name-grid, .game-options.uke-open-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .game-options.uke-name-grid .opt-btn, .game-options.uke-open-grid .opt-btn { min-width: 90px; padding: 14px 22px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; } .game-options.uke-shape-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 720px; margin: 0 auto; } .game-options.uke-shape-grid .opt-btn.uke-shape-opt { padding: 12px; background: var(--bg); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; min-height: 180px; } .game-options.uke-shape-grid .opt-btn.uke-shape-opt .uke-chord { width: 100%; height: auto; max-width: 130px; } .game-options.uke-shape-grid .opt-btn.uke-shape-opt.correct { background: rgba(46, 200, 130, 0.12); border-color: #2ec882; } .game-options.uke-shape-grid .opt-btn.uke-shape-opt.wrong { background: rgba(238, 61, 139, 0.12); border-color: var(--accent-pink); } @media (max-width: 640px) { .game-options.uke-shape-grid { grid-template-columns: repeat(2, 1fr); } } .uke-wrong-label { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.5px; } /* Piano chord quiz diagrams render wider than a fretboard — give them * a 2-column grid and let the keyboard fill the card width. */ .uke-quiz-diagram.pno svg { width: 100%; max-width: 560px; height: auto; } .game-options.pno-shape-grid { grid-template-columns: repeat(2, 1fr); max-width: 1040px; gap: 20px; } .game-options.pno-shape-grid .opt-btn.pno-opt { min-height: 200px; padding: 18px; } .game-options.pno-shape-grid .opt-btn.pno-opt svg.piano-chord { width: 100%; max-width: 460px; height: auto; } .uke-quiz-diagram.pno svg.piano-chord { width: 100%; max-width: 560px; height: auto; } /* Italian terms quiz — 2-column stacked answer buttons with room for * full-sentence meanings. */ .game-options.term-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 820px; } .game-options.term-grid .opt-btn.term-opt { padding: 16px 18px; font-size: 1.05rem; text-align: left; line-height: 1.35; white-space: normal; min-height: 64px; } /* Italic dynamics symbols overhang to the right — push following punctuation * away so it doesn't collide with the bottom of the glyph. */ .prompt-text em.dyn-symbol { display: inline-block; padding-right: 0.18em; } /* Bravura — Steinberg's SMuFL-standard music notation font. Renders * publisher-quality engraved glyphs (fermata, dynamics, articulations, * noteheads) used by the music-symbol quizzes. */ @font-face { font-family: "Bravura"; src: url("https://cdn.jsdelivr.net/gh/steinbergmedia/bravura/redist/woff/Bravura.woff") format("woff"); font-display: swap; } /* Music notation symbol quiz — staff snippet */ .sym-staff-wrap { display: flex; justify-content: center; align-items: center; margin: 18px auto 24px; } .sym-staff { width: 100%; max-width: 480px; height: auto; } .sym-staff text.smufl { font-family: "Bravura", serif; font-weight: 400; font-style: normal; fill: #0a0a0a; } @media (max-width: 640px) { .game-options.term-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .game-options.pno-shape-grid { grid-template-columns: 1fr; } } /* ============================================================ Project pages — Studio with side-stepper (YuStudio pattern) ============================================================ */ .project-main { display: grid; grid-template-columns: 320px 1fr; gap: 14px; max-width: 1640px; margin: 0 auto; padding: 14px 20px 32px; } .proj-sidebar { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 14px; align-self: flex-start; max-height: calc(100vh - 32px); } .proj-cover { border-radius: 14px; padding: 24px 20px; color: white; overflow: hidden; position: relative; background: linear-gradient(135deg, #ee3d8b, #8b3dee); box-shadow: 0 8px 24px rgba(0,0,0,0.3); } .proj-cover-mood { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; margin-bottom: 6px; } .proj-cover-title { font-size: 24px; font-weight: 800; line-height: 1.1; margin-bottom: 4px; } .proj-cover-sub { font-size: 13px; opacity: 0.9; } .proj-progress { height: 4px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; } .proj-progress-bar { height: 100%; background: linear-gradient(90deg, #ee3d8b, #8b3dee, #3d5fec); transition: width 240ms; } .proj-steps { list-style: none; padding: 0; margin: 0; background: #14151c; border: 1px solid #2a2c38; border-radius: 12px; overflow: hidden; } .proj-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #2a2c38; cursor: pointer; transition: background 100ms; } .proj-step:last-child { border-bottom: none; } .proj-step:hover { background: #1a1c25; } .proj-step.active { background: #1f212c; } .proj-step.active .proj-step-num { background: #ee3d8b; color: white; border-color: #ee3d8b; } .proj-step.done .proj-step-num { background: #2ec882; color: white; border-color: #2ec882; } .proj-step.done .proj-step-num::after { content: "✓"; font-size: 10px; } .proj-step.done .proj-step-num { font-size: 0; } .proj-step-num { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #3a3d4e; background: #0f1018; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #c4c6d4; flex-shrink: 0; } .proj-step-title { font-size: 13px; color: #c4c6d4; line-height: 1.3; } .proj-step.active .proj-step-title { color: white; font-weight: 700; } /* Current-step instructions card */ .proj-current { background: #14151c; border: 1px solid #2a2c38; border-radius: 12px; padding: 14px 16px; } .proj-current-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #f5f5fb; } .proj-current-body { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #c4c6d4; } .proj-current-tip { margin: 0 0 12px; font-size: 12px; line-height: 1.4; color: #ffb84d; background: rgba(255, 184, 77, 0.08); padding: 6px 10px; border-radius: 6px; } .proj-nav { display: flex; gap: 6px; } .proj-nav .btn { flex: 1; font-size: 13px; padding: 8px 12px; } /* When a step says "focus on this element", outline it so the kid spots it. */ .proj-focus { outline: 2px solid #ee3d8b !important; outline-offset: 4px; border-radius: 10px; animation: proj-focus-pulse 1.6s ease-in-out infinite; } @keyframes proj-focus-pulse { 50% { outline-color: rgba(238, 61, 139, 0.4); } } /* Suggested-loop highlight in the library list */ .cmp-lib-item.proj-suggest { background: rgba(238, 61, 139, 0.12) !important; border-color: #ee3d8b !important; position: relative; } .cmp-lib-item.proj-suggest::after { content: "Suggested →"; position: absolute; top: 6px; right: 8px; background: #ee3d8b; color: white; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 999px; } .project-studio { /* inherits .composer-shell */ } /* On narrow screens the sidebar drops above the studio */ @media (max-width: 900px) { .project-main { grid-template-columns: 1fr; } .proj-sidebar { position: static; max-height: none; } } /* ============================================================ Film Music Composer DAW ============================================================ */ /* Composer page chrome — uses theme tokens so the outer page (header, page bg) follows the user's light/dark choice. The instrument inside .composer- shell stays dark via .instrument-dark. */ .composer-body { background: var(--bg); color: var(--text); } .composer-main { padding: 18px 24px 32px; max-width: 1640px; margin: 0 auto; } .composer-shell { display: flex; flex-direction: column; gap: 14px; } /* Transport bar */ .cmp-transport { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, #1a1c25 0%, #14151c 100%); border: 1px solid #2a2c38; border-radius: 12px; padding: 10px 16px; /* Wrap to a second row when the film cluster + transport-right runs out of horizontal space. row-gap keeps the wrapped row breathing. */ flex-wrap: wrap; row-gap: 8px; } .cmp-transport-left, .cmp-transport-mid, .cmp-transport-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 6px; } .cmp-btn { background: #2b2e3c; color: #f5f5fb; border: 1px solid #3a3d4e; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 14px; transition: background 120ms, transform 80ms; /* Keep labels on a single line so flex doesn't stack icon+text vertically when space is tight — wrap the row instead. */ white-space: nowrap; flex: 0 0 auto; } /* Film-scoring buttons stay compact so the whole cluster fits in one row on a normal-size window. */ .cmp-film-group .cmp-btn, .cmp-film-group .cmp-snap-select { font-size: 12px; padding: 6px 10px; } .cmp-btn:hover { background: #383b4c; } .cmp-btn:active { transform: scale(0.97); } /* Transport play + stop — chrome CDJ-style buttons (same aesthetic as the * DJ Studio's hardware deck controls). Brushed-metal radial gradient, dark * border with a glowing ring in the action colour, glyph in the centre. * Same size always; play button takes an "active" state while running. */ .cmp-play, .cmp-stop { width: 64px; height: 64px; min-width: 0; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; font: inherit; line-height: 1; background: radial-gradient(circle at 35% 28%, #f0f0f5 0%, #c8c8d0 35%, #8a8a92 70%, #5a5a62 100%); border: 3px solid #2a2a32; color: #1a1a1f; text-shadow: 0 1px 0 rgba(255,255,255,0.5); transition: transform 90ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease; } .cmp-play { border-color: #4ade80; font-size: 30px; /* ▶ glyph has whitespace inside its em — needs to be bigger */ padding-left: 4px; /* nudge so the optical centre sits in the middle */ box-shadow: inset 0 1px 2px rgba(255,255,255,0.65), inset 0 -3px 6px rgba(0,0,0,0.25), 0 0 0 1px rgba(74,222,128,0.3), 0 0 14px rgba(74,222,128,0.55), 0 4px 10px rgba(0,0,0,0.55); } .cmp-play:hover { box-shadow: inset 0 1px 2px rgba(255,255,255,0.65), inset 0 -3px 6px rgba(0,0,0,0.25), 0 0 0 1px rgba(74,222,128,0.45), 0 0 20px rgba(74,222,128,0.75), 0 4px 10px rgba(0,0,0,0.55); } .cmp-stop { border-color: #f56db0; font-size: 0; /* hide the ■ glyph — we render a real square below */ box-shadow: inset 0 1px 2px rgba(255,255,255,0.65), inset 0 -3px 6px rgba(0,0,0,0.25), 0 0 0 1px rgba(238,61,139,0.3), 0 0 14px rgba(238,61,139,0.55), 0 4px 10px rgba(0,0,0,0.55); } .cmp-stop:hover { box-shadow: inset 0 1px 2px rgba(255,255,255,0.65), inset 0 -3px 6px rgba(0,0,0,0.25), 0 0 0 1px rgba(238,61,139,0.45), 0 0 20px rgba(238,61,139,0.75), 0 4px 10px rgba(0,0,0,0.55); } .cmp-play:active, .cmp-stop:active { transform: translateY(2px); } /* Stop button — CSS-rendered square, perfectly centred in the chrome face. * Beats Unicode ■ for vertical alignment (the glyph sits below centre in * most fonts). Slight border-radius keeps it modern, not severe. */ .cmp-stop::before { content: ""; display: block; width: 16px; height: 16px; background: currentColor; border-radius: 3px; } /* Active (playing) state — the chrome lights up green */ .cmp-play.is-playing { background: radial-gradient(circle at 35% 28%, #d6f5e2 0%, #6ce695 50%, #4ade80 100%); border-color: #4ade80; color: #073; text-shadow: 0 1px 2px rgba(255,255,255,0.6); padding-left: 0; /* pause glyph (❚❚) centres differently */ box-shadow: inset 0 1px 3px rgba(255,255,255,0.75), inset 0 -3px 6px rgba(0,0,0,0.15), 0 0 0 2px rgba(74,222,128,0.55), 0 0 28px rgba(74,222,128,0.85), 0 4px 10px rgba(0,0,0,0.55); } .cmp-secondary { background: #232531; } /* Play-Along (#uke-play) — pill button with the same modern green glow as the * Score Studio transport, but text-based so "Play" / "Stop" still reads big. */ #uke-play { background: radial-gradient(circle at 30% 30%, #6ce8b1 0%, #2ec882 55%, #1a9c63 100%); color: white; border: 0; border-radius: 999px; padding: 12px 28px; font-weight: 700; font-size: 16px; letter-spacing: 0.04em; text-shadow: 0 1px 2px rgba(0,0,0,0.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 8px 22px rgba(46, 200, 130, 0.38), 0 2px 4px rgba(0,0,0,0.2); transition: transform 120ms ease, box-shadow 220ms ease, filter 160ms ease; } #uke-play:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24), 0 10px 30px rgba(46, 200, 130, 0.55), 0 2px 4px rgba(0,0,0,0.2); } #uke-play:active { transform: translateY(0) scale(0.97); } /* When the button reads "Stop" the JS swaps btn-primary → btn-secondary; * recolour the pill to ruby to match the same colour-language as Score Studio. */ #uke-play.btn-secondary { background: radial-gradient(circle at 30% 30%, #ff8585 0%, #d33b3b 55%, #a51d1d 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 8px 22px rgba(211, 59, 59, 0.35), 0 2px 4px rgba(0,0,0,0.2); } #uke-play.btn-secondary:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24), 0 10px 30px rgba(211, 59, 59, 0.55), 0 2px 4px rgba(0,0,0,0.2); } /* Restart goes circular — same family, secondary colour. */ #uke-restart { width: 42px; height: 42px; min-width: 0; padding: 0; border-radius: 50%; border: 1px solid var(--border, #2a2c38); background: var(--surface-3, #1a1c25); color: var(--text, #f5f5fb); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; transition: transform 120ms ease, background 160ms ease, border-color 160ms ease; } #uke-restart:hover { transform: scale(1.06); background: var(--surface-2, #14151c); border-color: var(--accent-pink, #ee3d8b); } #uke-restart:active { transform: scale(0.94); } .cmp-time { font-family: monospace; font-size: 14px; color: #a5a7b8; min-width: 96px; } .cmp-meta { color: #8b8e9f; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; } .cmp-bpm-input, .cmp-key-select, .cmp-inst-select, .cmp-input { background: #14151c; color: #f5f5fb; border: 1px solid #3a3d4e; border-radius: 6px; padding: 6px 10px; font-size: 14px; } .cmp-bpm-input { width: 70px; text-align: center; } /* Pitch fader — horizontal DJ-style slider next to the BPM input. * Thumb has a VERTICAL indicator line running top-to-bottom — the line * points to the exact position on the track, like a real DJ pitch fader. */ .cmp-pitch-group { display: inline-flex; align-items: center; gap: 10px; } .cmp-pitch-fader { -webkit-appearance: none; appearance: none; width: 140px; height: 22px; background: transparent; cursor: pointer; outline: none; margin: 0; } /* Webkit (Chrome / Safari / Edge) — centre tick on the track is vertical */ .cmp-pitch-fader::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,0.6) calc(50% - 1px), rgba(255,255,255,0.6) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(90deg, #0f1018 0%, #2a2c38 50%, #0f1018 100%); border: 1px solid #1a1c25; border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); } .cmp-pitch-fader::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 24px; margin-top: -10px; border-radius: 4px; /* Vertical indicator line, INSET 4px from top and bottom (like the DJ Studio fader cap). Layered: a tall thin dark rectangle sits centred over the chrome gradient. background-size limits the line's extent. */ background: linear-gradient(#4a4a4a, #4a4a4a), linear-gradient(180deg, #f0f0f5 0%, #c8c8d0 45%, #8a8a92 100%); background-size: 1px 16px, 100% 100%; background-position: center center, 0 0; background-repeat: no-repeat; border: 1px solid #2a2a32; box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -2px 3px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.5); position: relative; } /* Firefox */ .cmp-pitch-fader::-moz-range-track { height: 6px; background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,0.6) calc(50% - 1px), rgba(255,255,255,0.6) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(90deg, #0f1018 0%, #2a2c38 50%, #0f1018 100%); border: 1px solid #1a1c25; border-radius: 999px; } .cmp-pitch-fader::-moz-range-thumb { width: 16px; height: 22px; border-radius: 4px; background: linear-gradient(#4a4a4a, #4a4a4a), linear-gradient(180deg, #f0f0f5 0%, #c8c8d0 45%, #8a8a92 100%); background-size: 1px 14px, 100% 100%; background-position: center center, 0 0; background-repeat: no-repeat; border: 1px solid #2a2a32; box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -2px 3px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.5); } .cmp-pitch-fader:hover::-webkit-slider-thumb, .cmp-pitch-fader:focus::-webkit-slider-thumb { filter: brightness(1.08); } .cmp-pitch-fader:hover::-moz-range-thumb, .cmp-pitch-fader:focus::-moz-range-thumb { filter: brightness(1.08); } /* Work area */ .cmp-workarea { display: grid; grid-template-columns: 260px 1fr 340px; gap: 14px; min-height: 460px; } .cmp-library, .cmp-side > section, .cmp-tracks { background: #14151c; border: 1px solid #2a2c38; border-radius: 12px; padding: 14px; } .cmp-h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: #a5a7b8; font-weight: 700; } /* Library */ .cmp-tabs { display: flex; gap: 4px; margin-bottom: 10px; } .cmp-tab { flex: 1; background: #1f212c; color: #c4c6d4; border: 1px solid #2a2c38; border-radius: 6px; padding: 6px 0; cursor: pointer; font-size: 13px; font-weight: 600; } .cmp-tab.active { background: #ee3d8b; border-color: #ee3d8b; color: white; } .cmp-library-list { display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow-y: auto; padding-right: 4px; } .cmp-lib-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; background: #14151c; padding-bottom: 6px; } .cmp-lib-chips:first-child { position: sticky; top: 0; z-index: 1; } .cmp-lib-chip-label { font-size: 10px; font-weight: 700; color: #6b6e7f; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 2px; min-width: 28px; } .cmp-lib-chip { background: #1f212c; border: 1px solid #2a2c38; color: #c8cbdc; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background 100ms; } .cmp-lib-chip:hover { background: #272a37; } .cmp-lib-chip.on { background: #ee3d8b; border-color: #ee3d8b; color: #fff; } .cmp-lib-empty { color: #6b6e7f; font-size: 12px; text-align: center; padding: 18px 0; font-style: italic; } /* ============================================================ Projects browser modal ============================================================ */ .pj-modal-backdrop { position: fixed; inset: 0; background: rgba(8, 9, 14, 0.85); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } .pj-modal-card { background: #15161e; border: 1px solid #2a2c38; border-radius: 14px; width: min(720px, 95vw); max-height: 90vh; display: flex; flex-direction: column; color: #e6e8f1; overflow: hidden; } .pj-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #2a2c38; } .pj-head h2 { margin: 0; font-size: 18px; } .pj-close { background: transparent; border: none; color: #8b8e9f; font-size: 24px; cursor: pointer; padding: 4px 10px; } .pj-close:hover { color: #e6e8f1; } .pj-current { padding: 14px 18px; border-bottom: 1px solid #2a2c38; background: #0f1018; } .pj-current label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #8b8e9f; } .pj-current input { background: #1f212c; border: 1px solid #2a2c38; color: #f5f5fb; border-radius: 6px; padding: 8px 12px; font-size: 14px; } .pj-actions-top { padding: 12px 18px; } .pj-list { list-style: none; padding: 0 18px 18px; margin: 0; overflow-y: auto; flex: 1; } .pj-item { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 8px; background: #1f212c; border: 1px solid #2a2c38; border-radius: 8px; } .pj-item.pj-active { border-color: #ee3d8b; } .pj-item-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pj-item-name { font-size: 14px; color: #f5f5fb; } .pj-item-meta { font-size: 11px; color: #8b8e9f; } .pj-item-actions { display: flex; gap: 6px; flex-wrap: wrap; } .pj-item-actions .btn { font-size: 12px; padding: 5px 10px; } .pj-empty { color: #6b6e7f; font-size: 13px; text-align: center; padding: 20px; font-style: italic; } .cmp-lib-item { background: #1f212c; border: 1px solid #2a2c38; border-radius: 8px; padding: 8px 10px; cursor: grab; transition: background 100ms, border-color 100ms; } .cmp-lib-item:hover { background: #272a37; border-color: #3d5fec; } .cmp-lib-item[data-kind="sfx"] { cursor: pointer; } .cmp-lib-item:active { cursor: grabbing; } /* Loop is being auditioned — quiet pulse + accent border so the kid sees which one they're hearing. */ .cmp-lib-item.playing { background: rgba(46, 200, 130, 0.12); border-color: var(--accent-green, #2ec882); box-shadow: 0 0 0 1px rgba(46, 200, 130, 0.35); animation: cmp-lib-pulse 1.1s ease-in-out infinite; } .cmp-lib-item.playing::before { content: "♪"; position: absolute; top: 6px; right: 8px; color: var(--accent-green, #2ec882); font-size: 16px; line-height: 1; animation: cmp-lib-pulse-glyph 0.45s ease-in-out infinite alternate; } .cmp-lib-item { position: relative; } @keyframes cmp-lib-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(46, 200, 130, 0.35); } 50% { box-shadow: 0 0 0 3px rgba(46, 200, 130, 0.45); } } @keyframes cmp-lib-pulse-glyph { from { opacity: 0.55; transform: translateY(0); } to { opacity: 1; transform: translateY(-1px); } } .cmp-lib-name { font-size: 13px; font-weight: 600; color: #f5f5fb; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .cmp-lib-name-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Loop card carries an instrument-coloured left-edge accent so the bank reads like a coloured palette of clips, matching the track colours. */ .cmp-lib-item { border-left: 3px solid var(--lib-accent, #3d5fec); } /* Pill row — small chips on the right of each loop name (key + length). */ .cmp-lib-pill { display: inline-block; flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #c8cbdc; } .cmp-lib-key { background: rgba(46, 200, 130, 0.18); color: #2ec882; border-color: rgba(46, 200, 130, 0.4); } .cmp-lib-len { background: rgba(61, 95, 236, 0.20); color: #a9b9ff; border-color: rgba(61, 95, 236, 0.45); } .cmp-lib-meta { font-size: 11px; color: #8b8e9f; margin-top: 2px; } /* Search bar at the top of the bank — quick filter across name / instrument / key / mood. */ .cmp-lib-search-row { position: relative; margin: 0 0 8px 0; } .cmp-lib-search { width: 100%; background: #15161e; border: 1px solid #2a2c38; border-radius: 8px; padding: 8px 32px 8px 12px; color: #e6e8f1; font-size: 13px; outline: none; transition: border-color 100ms, box-shadow 100ms; } .cmp-lib-search:focus { border-color: #3d5fec; box-shadow: 0 0 0 2px rgba(61, 95, 236, 0.25); } .cmp-lib-search-x { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 22px; height: 22px; background: transparent; border: none; color: #8b8e9f; cursor: pointer; font-size: 16px; line-height: 1; } .cmp-lib-search-x:hover { color: #f5f5fb; } /* Count pill — "12 loops" under the chips so the kid sees how many match. */ .cmp-lib-count { font-size: 11px; color: #8b8e9f; font-weight: 600; padding: 4px 0 6px; border-bottom: 1px dashed #2a2c38; margin-bottom: 6px; } .cmp-help { color: #8b8e9f; font-size: 12px; line-height: 1.4; margin: 10px 0 0; } /* Tracks timeline */ .cmp-tracks { padding: 0; /* Horizontal scroll: when --total-beats > what fits, content overflows and the lanes scroll. Track heads stay pinned via position:sticky. */ overflow-x: auto; overflow-y: hidden; --beat-px: 24px; /* default lane scale */ } /* Width = max(fits-the-window, beats × beat-px + head). When totalBeats is small the first wins (no scroll); when it grows the lanes get wider. The +340px matches the track-head column so the ruler's bar numbers start exactly where the clip lanes begin (not above the track names). */ .cmp-ruler, .cmp-track { min-width: 100%; width: calc(var(--total-beats, 32) * var(--beat-px) + 340px); } .cmp-ruler { height: 22px; background: #1a1c25; border-bottom: 1px solid #2a2c38; display: flex; } .cmp-ruler-spacer { flex: 0 0 340px; /* match .cmp-track head column */ position: sticky; left: 0; z-index: 3; background: #1a1c25; border-right: 2px solid var(--track-colour, #2a2c38); } .cmp-ruler-ticks { flex: 1; position: relative; cursor: pointer; /* click anywhere along the ruler to seek to that beat */ } .cmp-ruler-ticks:hover { background: rgba(238, 61, 139, 0.08); } .cmp-ruler-tick { position: absolute; top: 4px; font-size: 11px; color: #8b8e9f; font-family: monospace; } /* ---------- Film-scoring controls + hit-point markers ---------- */ .cmp-film-group { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; margin-right: 4px; border: 1px solid #2a2c38; border-radius: 8px; background: rgba(238, 61, 139, 0.06); } .cmp-frame-btn { padding: 4px 8px; font-size: 12px; } .cmp-snap-select { background: #1f2030; border: 1px solid #2a2c38; border-radius: 6px; color: #c8cbdc; padding: 5px 8px; font-size: 12px; font-weight: 600; outline: none; } .cmp-snap-select:hover { background: #2a2c38; } .cmp-snap-select:focus { border-color: #ee3d8b; } /* Hit-point markers sit on top of the ruler's tick area as vertical lines with a small label flag. Click jumps to the spot; right-click deletes. */ .cmp-hit-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: #ee3d8b; cursor: pointer; z-index: 5; pointer-events: auto; } .cmp-hit-marker::before { content: ""; position: absolute; top: 0; left: -3px; border-top: 6px solid #ee3d8b; border-left: 4px solid transparent; border-right: 4px solid transparent; } .cmp-hit-label { position: absolute; top: 2px; left: 5px; font-size: 10px; font-weight: 700; color: #ee3d8b; background: rgba(15, 16, 24, 0.85); padding: 0 4px; border-radius: 3px; white-space: nowrap; } .cmp-hit-marker:hover { background: #fff; } .cmp-hit-marker:hover::before { border-top-color: #fff; } .cmp-hit-marker:hover .cmp-hit-label { color: #fff; } /* Cue list + fit-BPM modals (share the pr-modal-* shell). */ .cue-card { max-width: 720px; height: auto; max-height: 80vh; } /* Wider variant for the picture-alongside layout. */ .cue-card-vid { max-width: 1100px; } /* Two-column body: cue list on the left, video preview on the right. The kid clicks a hit on the left, the right-hand video scrubs to that frame so they see the moment without leaving the modal. */ .cue-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0; flex: 1; min-height: 0; } .cue-split .cue-list { padding: 12px 18px; border-right: 1px solid #2a2c38; } .cue-preview { display: flex; flex-direction: column; background: #0a0b10; padding: 14px; gap: 10px; min-height: 0; } .cue-preview-video { width: 100%; height: 100%; background: #000; border-radius: 8px; object-fit: contain; flex: 1; min-height: 240px; } .cue-preview-empty { flex: 1; min-height: 240px; display: flex; align-items: center; justify-content: center; background: #15161e; border-radius: 8px; color: #6b6e7f; font-style: italic; font-size: 13px; padding: 20px; text-align: center; } .cue-preview-meta { background: #15161e; border: 1px solid #2a2c38; border-radius: 6px; padding: 8px 10px; font-family: monospace; font-size: 12px; color: #c8cbdc; text-align: center; } /* Highlight the currently-previewed cue. */ .cue-row.active { border-color: var(--track-colour); box-shadow: 0 0 0 2px rgba(238, 61, 139, 0.35); } .cue-list { flex: 1; overflow-y: auto; padding: 12px 18px; } .cue-empty { color: #8b8e9f; font-size: 13px; text-align: center; padding: 20px; font-style: italic; } .cue-row { display: grid; grid-template-columns: 1fr 90px 90px 32px 32px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #2a2c38; border-radius: 8px; margin-bottom: 6px; background: #1f2030; } .cue-row:hover { border-color: #3d5fec; } .cue-label { font-size: 13px; font-weight: 600; color: #f5f5fb; padding: 2px 4px; border-radius: 4px; outline: none; min-width: 0; } .cue-label:focus { background: #15161e; outline: 1px solid #3d5fec; } .cue-time, .cue-bar { font-family: monospace; font-size: 12px; color: #c8cbdc; text-align: right; } .cue-jump, .cue-del { width: 28px; height: 28px; background: #2a2c38; border: 1px solid #3a3c48; border-radius: 6px; color: #e6e8f1; cursor: pointer; font-size: 12px; } .cue-jump:hover { background: var(--track-colour); } .cue-del:hover { background: rgba(238, 111, 139, 0.4); border-color: #ee6f8b; } /* Fit-BPM calculator body. */ .fit-body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 10px; } .fit-desc { color: #c8cbdc; font-size: 13px; line-height: 1.45; margin: 0; } .fit-row { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 10px; font-size: 13px; color: #c8cbdc; } .fit-row select, .fit-row input { background: #15161e; border: 1px solid #2a2c38; border-radius: 6px; color: #e6e8f1; padding: 6px 10px; font-size: 13px; outline: none; } .fit-result { background: #15161e; border: 1px solid #2a2c38; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #e6e8f1; line-height: 1.5; text-align: center; } .fit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } /* Mickey-mouse mode — pulse the record button while capturing so it's obvious every keypress is being timestamped to the video. */ .cmp-mickey-btn.recording { background: #ee3d8b; color: #fff; border-color: #ee3d8b; animation: cmp-mickey-pulse 1s ease-in-out infinite; } @keyframes cmp-mickey-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(238, 61, 139, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(238, 61, 139, 0); } } /* Floating toast for Mickey events + global hotkeys ("M" = drop hit). */ .cmp-mickey-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); background: rgba(15, 16, 24, 0.92); border: 1px solid #ee3d8b; color: #f5f5fb; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 160ms; } .cmp-mickey-toast.show { opacity: 1; } /* Zoom controls — sit next to the Bars dropdown */ .cmp-zoom-group { display: inline-flex; gap: 2px; } .cmp-zoom-btn { width: 26px; padding: 4px 0; font-size: 16px; line-height: 1; } .cmp-track-list { display: flex; flex-direction: column; } .cmp-track { display: grid; grid-template-columns: 340px 1fr; border-bottom: 1px solid #2a2c38; min-height: 82px; } .cmp-track:last-child { border-bottom: none; } /* Logic-style track head — single content row split into two columns: [icon + colour swatch stacked] [meta: name on top, M/S/🗑/VOL/PAN below] */ .cmp-track-head { padding: 6px 8px; background: #1a1c25; border-right: 2px solid var(--track-colour, #3d5fec); display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; position: sticky; left: 0; z-index: 4; } .cmp-track-id { display: flex; flex-direction: column; align-items: center; gap: 6px; } .cmp-track-meta { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .cmp-track-row-mix { display: flex; align-items: center; gap: 5px; } .cmp-track-row-mix .cmp-track-ctrl { flex: 0 0 28px; height: 22px; padding: 0; font-size: 11px; } .cmp-track-row-mix .cmp-track-vol { flex: 1; min-width: 50px; height: 22px; } .cmp-track-row-mix .cmp-track-pan-knob { flex: 0 0 28px; width: 28px; height: 28px; } .cmp-track-name-input { width: 100%; box-sizing: border-box; background: transparent; border: 1px solid transparent; color: #f5f5fb; font-size: 13px; font-weight: 600; padding: 1px 4px; border-radius: 4px; font-family: inherit; text-overflow: ellipsis; } .cmp-track-name-input:hover { border-color: rgba(255,255,255,0.1); } .cmp-track-name-input:focus { border-color: rgba(255,255,255,0.4); background: rgba(0,0,0,0.25); outline: none; } /* Instrument icon button — modern square with the track colour as the icon glyph. The SVG inside uses `currentColor`, so re-colouring the track instantly recolours the icon. */ .cmp-track-inst-btn { width: 56px; height: 56px; padding: 4px; background: linear-gradient(180deg, #2a2c38 0%, #15161e 100%); border: 1px solid #2a2c38; border-radius: 10px; cursor: pointer; line-height: 0; display: flex; align-items: center; justify-content: center; font-family: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.45); transition: border-color 0.12s ease, transform 0.12s ease; } .cmp-track-inst-btn:hover { border-color: currentColor; transform: translateY(-1px); } .cmp-track-inst-btn svg { width: 100%; height: 100%; display: block; } /* Instrument glyph — SVG silhouette painted in the track colour via CSS mask. Lets us swap artwork by editing assets/images/instruments/*.svg without touching JS. The image's alpha channel cuts the shape; the visible pixels are filled from `currentColor`. */ .cmp-inst-glyph { display: block; width: 100%; height: 100%; background-color: currentColor; -webkit-mask: var(--inst-icon) no-repeat center / contain; mask: var(--inst-icon) no-repeat center / contain; } /* Floating instrument picker popover */ .cmp-inst-popover { background: #1a1c25; border: 1px solid #3a3d4e; border-radius: 8px; padding: 4px; min-width: 160px; box-shadow: 0 8px 24px rgba(0,0,0,0.55); z-index: 9999; display: flex; flex-direction: column; gap: 2px; } .cmp-inst-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; background: transparent; border: 0; color: #c4c6d4; font-family: inherit; font-size: 12px; cursor: pointer; text-align: left; } .cmp-inst-opt:hover { background: #2a2c38; color: #f5f5fb; } .cmp-inst-opt.is-current { background: rgba(238, 61, 139, 0.18); color: #ee3d8b; } .cmp-inst-opt-icon { flex: 0 0 22px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; } .cmp-inst-opt-icon svg { width: 100%; height: 100%; } .cmp-inst-opt-label { flex: 1; } /* Track-row layout — name input fills the row, colour swatch sits at the far right as a small clickable circle. */ .cmp-track-row-name { display: flex; align-items: center; gap: 6px; } .cmp-track-row-name .cmp-track-name-input { flex: 1; min-width: 0; } /* Track colour selector — thin pill below the instrument icon. Mirrors the icon's width so the two read as a single identity column. */ .cmp-track-colour-btn { width: 36px; height: 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.18); padding: 0; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.4); transition: transform 0.12s ease, border-color 0.12s ease; } .cmp-track-colour-btn:hover { transform: scaleY(1.4); border-color: rgba(255,255,255,0.6); } /* Track colour palette popover */ .cmp-colour-popover { background: #1a1c25; border: 1px solid #3a3d4e; border-radius: 8px; padding: 8px; min-width: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.55); z-index: 9999; display: grid; grid-template-columns: repeat(4, 22px); gap: 8px; } .cmp-colour-swatch { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.45); } .cmp-colour-swatch:hover { transform: scale(1.15); } .cmp-colour-swatch.is-current { border-color: #f5f5fb; box-shadow: 0 0 0 2px rgba(255,255,255,0.15); } /* Track header controls — Logic-style M / S / 🗑 row, sits below the instrument selector inside the sticky track head. */ .cmp-track-controls { display: flex; gap: 4px; margin-top: 2px; } .cmp-track-ctrl { flex: 1; min-width: 0; height: 20px; background: #14151c; color: #8b8e9f; border: 1px solid #2a2c38; border-radius: 4px; font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; font-family: inherit; } .cmp-track-ctrl:hover { color: #f5f5fb; border-color: #3a3d4e; } .cmp-track-ctrl.on.mute { background: #d8a032; color: #14151c; border-color: #d8a032; } .cmp-track-ctrl.on.solo { background: #6bd1ff; color: #14151c; border-color: #6bd1ff; } .cmp-track-ctrl.cmp-track-del { color: #8b3a3a; border-color: #2a2c38; } .cmp-track-ctrl.cmp-track-del:hover { background: #4a1a1a; border-color: #6a2a2a; color: #ff6b6b; } /* Volume + Pan rows on the track head — Logic-style inline mix controls. The mixer panel stays available for FX work, but levels live here so a kid can balance their tracks without flipping panels. */ .cmp-track-vp { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .cmp-track-vp-lbl { font-size: 9px; font-weight: 700; color: #6b6e7f; width: 22px; flex-shrink: 0; letter-spacing: 0.04em; } .cmp-track-vol, .cmp-track-pan { flex: 1; min-width: 0; height: 14px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; } /* Track volume slider — matches the DJ-style pitch fader on the transport. Dark grooved track with a centre tick, chrome cap with a vertical indicator line running top-to-bottom. */ .cmp-track-vol::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,0.6) calc(50% - 1px), rgba(255,255,255,0.6) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(90deg, #0f1018 0%, #2a2c38 50%, #0f1018 100%); border: 1px solid #1a1c25; border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); } .cmp-track-vol::-moz-range-track { height: 6px; background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,0.6) calc(50% - 1px), rgba(255,255,255,0.6) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(90deg, #0f1018 0%, #2a2c38 50%, #0f1018 100%); border: 1px solid #1a1c25; border-radius: 999px; } .cmp-track-vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 24px; margin-top: -10px; border-radius: 4px; background: linear-gradient(#4a4a4a, #4a4a4a), linear-gradient(180deg, #f0f0f5 0%, #c8c8d0 45%, #8a8a92 100%); background-size: 1px 16px, 100% 100%; background-position: center center, 0 0; background-repeat: no-repeat; border: 1px solid #2a2a32; box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -2px 3px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.5); cursor: pointer; } .cmp-track-vol::-moz-range-thumb { width: 16px; height: 22px; border-radius: 4px; background: linear-gradient(#4a4a4a, #4a4a4a), linear-gradient(180deg, #f0f0f5 0%, #c8c8d0 45%, #8a8a92 100%); background-size: 1px 14px, 100% 100%; background-position: center center, 0 0; background-repeat: no-repeat; border: 1px solid #2a2a32; box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -2px 3px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.5); cursor: pointer; } .cmp-track-vol:hover::-webkit-slider-thumb, .cmp-track-vol:focus::-webkit-slider-thumb { filter: brightness(1.08); } .cmp-track-vol:hover::-moz-range-thumb, .cmp-track-vol:focus::-moz-range-thumb { filter: brightness(1.08); } /* Pan as a rotary knob — drag up/down to rotate, double-click to recentre. The pointer line shows the current angle. -1 ⇒ -135°, 0 ⇒ 0°, +1 ⇒ +135°. */ .cmp-track-pan-knob { width: 26px; height: 26px; flex-shrink: 0; position: relative; cursor: ns-resize; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a3d4e 0%, #14151c 80%); border: 1px solid #2a2c38; box-shadow: inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.4); } .cmp-track-pan-knob:hover { border-color: #4a4d5e; } .cmp-track-pan-pointer { position: absolute; left: 50%; top: 50%; width: 2.5px; height: 12px; margin-left: -1.25px; margin-top: -13px; background: var(--track-colour, #ee3d8b); border-radius: 1.5px; transform-origin: 50% 100%; transform: rotate(var(--pan-angle, 0deg)); } .cmp-track-pan-readout { font-size: 9px; font-weight: 700; color: #8b8e9f; width: 22px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; } /* Mixer toggle button glow when open */ #cmp-toggle-mixer.is-on { background: rgba(238, 61, 139, 0.18); border-color: rgba(238, 61, 139, 0.5); color: #ee3d8b; } .cmp-mixer-sub { color: #6b6e7f; font-weight: 400; font-size: 11px; } /* "+ Add track" tile, sits below the last track in the timeline. */ .cmp-track-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; background: transparent; border: 2px dashed #3a3d4e; border-radius: 0; color: #8b8e9f; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms; font-family: inherit; } .cmp-track-add:hover { background: rgba(238, 61, 139, 0.05); border-color: var(--accent-pink); color: var(--accent-pink); } .cmp-track-add-plus { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(238, 61, 139, 0.2); color: var(--accent-pink); font-size: 16px; font-weight: 800; line-height: 1; } .cmp-track-lane { position: relative; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 8 - 1px), #2a2c38 calc(100% / 8 - 1px), #2a2c38 calc(100% / 8)); } .cmp-track-lane.cmp-drop { background-color: #1f2535; } .cmp-clip { position: absolute; top: 8px; bottom: 8px; border-radius: 6px; padding: 4px 8px; cursor: grab; display: flex; align-items: center; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: filter 120ms, box-shadow 120ms, transform 120ms; user-select: none; } .cmp-clip:hover { filter: brightness(1.15); } .cmp-clip.selected { border-color: #ffffff; box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 4px 14px rgba(0,0,0,0.5); z-index: 3; } .cmp-clip.dragging { cursor: grabbing; transform: scale(1.02); box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 10px 26px rgba(0,0,0,0.55); z-index: 5; transition: none; /* live-follow the cursor without easing */ } /* Resize handle — small grippy bar on the right edge of the clip. */ .cmp-clip-resize { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: ew-resize; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18)); border-right: 1px solid rgba(255,255,255,0.35); border-top-right-radius: 6px; border-bottom-right-radius: 6px; opacity: 0; transition: opacity 100ms; } .cmp-clip:hover .cmp-clip-resize, .cmp-clip.selected .cmp-clip-resize { opacity: 1; } .cmp-clip.resizing { cursor: ew-resize; box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 6px 18px rgba(0,0,0,0.45); z-index: 4; transition: none; } .cmp-clip.resizing .cmp-clip-resize { opacity: 1; } .cmp-clip-label { font-size: 11px; font-weight: 600; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Muted clip — visually dim so the kid sees what's playing vs not */ .cmp-clip-muted { opacity: 0.4; } .cmp-clip-muted::after { content: "MUTED"; position: absolute; top: 4px; right: 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: rgba(255,255,255,0.85); } /* Clip editor modal (opens on clip click) */ .cmp-clipedit-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 24px; animation: cmp-fade-in 120ms ease; } @keyframes cmp-fade-in { from { opacity: 0; } to { opacity: 1; } } .cmp-clipedit-card { background: #14151c; border: 1px solid #2a2c38; border-top: 4px solid var(--track-colour, #ee3d8b); border-radius: 14px; padding: 20px 22px; width: 100%; max-width: 420px; color: #f5f5fb; box-shadow: 0 18px 48px rgba(0,0,0,0.55); animation: cmp-card-up 160ms ease; } @keyframes cmp-card-up { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .cmp-clipedit-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .cmp-clipedit-track { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--track-colour, #ee3d8b); } .cmp-clipedit-close { background: transparent; border: 0; color: #8b8e9f; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; } .cmp-clipedit-close:hover { background: rgba(255,255,255,0.08); color: #f5f5fb; } .cmp-clipedit-title { margin: 0 0 16px; font-size: 18px; font-weight: 700; } .cmp-clipedit-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; } .cmp-clipedit-field > span { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8b8e9f; } .cmp-clipedit-field > span em { font-style: normal; color: #f5f5fb; font-weight: 600; text-transform: none; letter-spacing: 0; } .cmp-clipedit-field input[type="text"], .cmp-clipedit-field input[type="number"] { background: #0f1018; border: 1px solid #2a2c38; border-radius: 8px; color: #f5f5fb; padding: 9px 12px; font-size: 14px; } .cmp-clipedit-field input[type="text"]:focus, .cmp-clipedit-field input[type="number"]:focus { outline: none; border-color: var(--track-colour, #ee3d8b); } .cmp-clipedit-field input[type="range"] { width: 100%; margin-top: 4px; } .cmp-clipedit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cmp-clipedit-row .cmp-clipedit-field { margin-bottom: 14px; } .cmp-clipedit-quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -6px 0 16px; } .cmp-clipedit-quick-label { font-size: 11px; color: var(--text-dim, #8b8e9f); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-right: 4px; } .cmp-clipedit-quick .cmp-btn { padding: 6px 12px; font-size: 13px; font-variant-numeric: tabular-nums; } /* ============================================================ Beatmaker — step grid ============================================================ */ .cmp-beatmaker-btn .cmp-beatmaker-icon { margin-right: 4px; } .bm-grid-wrap { overflow-x: auto; } .bm-grid { border-collapse: separate; border-spacing: 4px; margin: 0 auto; } .bm-row-label { background: #1a1c25; color: #f5f5fb; font-size: 12px; font-weight: 700; text-align: right; padding: 0 12px; width: 64px; cursor: pointer; border-radius: 6px; user-select: none; text-transform: uppercase; letter-spacing: 0.06em; } .bm-row-label:hover { background: #2a2c38; } .bm-cell { width: 32px; height: 32px; background: rgba(255,255,255,0.04); border: 1px solid #2a2c38; border-radius: 6px; cursor: pointer; transition: background 80ms, border-color 80ms, transform 80ms; } .bm-cell-downbeat { background: rgba(255,255,255,0.08); } .bm-cell:hover { border-color: #3d5fec; } .bm-cell.on { background: linear-gradient(180deg, #ee3d8b, #8b3dee); border-color: #ee3d8b; box-shadow: 0 0 8px rgba(238, 61, 139, 0.4); } .bm-cell.playing { transform: scale(1.2); border-color: #f5f5fb; } .bm-controls { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .bm-hint { margin: 10px 0 0; font-size: 12px; color: var(--text-dim); font-style: italic; } .cmp-clipedit-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; font-size: 13px; color: #c4c6d4; cursor: pointer; } .cmp-clipedit-check input { width: 16px; height: 16px; cursor: pointer; } .cmp-clipedit-actions { display: flex; justify-content: space-between; gap: 10px; } .cmp-clipedit-delete { background: #2a1a1a !important; color: #f56b6b !important; border: 1px solid #5a2a2a !important; } .cmp-clipedit-delete:hover { background: #c33 !important; color: white !important; border-color: #c33 !important; } .cmp-clipedit-done { background: var(--track-colour, #ee3d8b) !important; color: white !important; border: 0 !important; font-weight: 700; } .cmp-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #ee3d8b; pointer-events: none; z-index: 5; box-shadow: 0 0 8px #ee3d8b; } /* Mixer */ .cmp-side { display: flex; flex-direction: column; gap: 14px; } .cmp-mixer-strips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .cmp-strip { background: #1a1c25; border: 1px solid #2a2c38; border-top: 3px solid var(--track-colour, #3d5fec); border-radius: 6px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .cmp-strip-label { font-size: 11px; font-weight: 700; color: #f5f5fb; } .cmp-vol { width: 90%; } .cmp-pan { width: 80%; } .cmp-pan-label { font-size: 9px; color: #8b8e9f; text-transform: uppercase; } .cmp-strip-row { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; } .cmp-strip-buttons { display: flex; gap: 3px; } .cmp-strip-btn { background: #2a2c38; color: #8b8e9f; border: 1px solid #3a3d4e; border-radius: 4px; width: 24px; height: 22px; cursor: pointer; font-size: 11px; font-weight: 700; } .cmp-strip-btn.on { background: #ee3d8b; color: white; border-color: #ee3d8b; } /* Delete-track button — pushed to the right edge of the M/S row so it reads as a destructive action separate from the toggle buttons, not a third state. */ .cmp-strip-btn.cmp-strip-del { margin-left: auto; background: transparent; border-color: transparent; color: #8b3a3a; font-size: 13px; } .cmp-strip-btn.cmp-strip-del:hover { background: #4a1a1a; border-color: #6a2a2a; color: #ff6b6b; } .cmp-strip-buttons { gap: 4px; } /* Motifs */ .cmp-motif-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .cmp-motif-controls .cmp-input { flex: 1 1 100%; /* full width on its own row — the side column is too narrow to share */ min-width: 0; box-sizing: border-box; } .cmp-motif-controls .cmp-btn { flex: 1 1 auto; white-space: nowrap; } .cmp-motif-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; } .cmp-motif-empty { color: #8b8e9f; font-size: 12px; text-align: center; padding: 18px 4px; } .cmp-motif { background: #1f212c; border: 1px solid #2a2c38; border-left: 3px solid #ee3d8b; border-radius: 6px; padding: 8px 10px; cursor: grab; display: flex; align-items: center; gap: 8px; } .cmp-motif:active { cursor: grabbing; } .cmp-motif-name { flex: 1; font-size: 13px; font-weight: 600; } .cmp-motif-meta { font-size: 11px; color: #8b8e9f; } .cmp-motif-del { background: transparent; color: #8b8e9f; border: 0; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; } .cmp-motif-del:hover { color: #ee3d8b; } /* Virtual keyboard */ .cmp-keyboard-wrap { background: #14151c; border: 1px solid #2a2c38; border-radius: 12px; padding: 14px; } .cmp-keyboard-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .cmp-rec-motif.recording { background: #c33; border-color: #c33; color: white; animation: cmp-rec-pulse 1s ease-in-out infinite; } .cmp-rec-status { color: #8b8e9f; font-size: 12px; font-style: italic; } .cmp-hint { color: #6b6e7f; font-size: 11px; margin-left: auto; } @keyframes cmp-rec-pulse { 50% { opacity: 0.6; } } .cmp-keyboard { position: relative; height: 140px; user-select: none; background: #0a0b10; border-radius: 6px; overflow: hidden; } .cmp-whites { position: absolute; inset: 0; display: flex; } .cmp-key { cursor: pointer; transition: background 60ms; -webkit-user-select: none; user-select: none; } .cmp-white { flex: 1; background: #f5f5fb; color: #555; border-right: 1px solid #bbb; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-size: 11px; font-weight: 700; } .cmp-white:last-child { border-right: none; } .cmp-white.playing { background: #ee3d8b; color: white; } .cmp-black { position: absolute; top: 0; height: 64%; width: calc(100% / 14 * 0.6); background: #18181c; border-radius: 0 0 4px 4px; z-index: 2; border: 1px solid #2a2c38; border-top: none; } .cmp-black.playing { background: #8b3dee; } /* Smart Keys — keep every key its natural colour and highlight the IN-key ones with a coloured stripe. (Black keys are already position:absolute, so only the whites need position:relative for the ::after to anchor.) */ .cmp-white { position: relative; } .cmp-white.cmp-key-in::after, .cmp-black.cmp-key-in::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 4px; height: 4px; border-radius: 2px; background: #ee3d8b; box-shadow: 0 0 6px rgba(238, 61, 139, 0.55); pointer-events: none; } .cmp-smart-keys { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(139, 61, 238, 0.18); color: #c8b4ff; cursor: pointer; user-select: none; } .cmp-smart-keys input { accent-color: #8b3dee; cursor: pointer; } /* ============================================================ Piano Roll modal (BandLab 2) ============================================================ */ .pr-modal-backdrop { position: fixed; inset: 0; background: rgba(8, 9, 14, 0.85); z-index: 1000; display: flex; /* Fullscreen layout — no centring gutter, the card fills the window. */ padding: 0; } .pr-modal-card { --track-colour: #8b3dee; background: #15161e; border: none; border-radius: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: #e6e8f1; } .pr-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #2a2c38; } .pr-head-l { display: flex; flex-direction: column; gap: 2px; } .pr-track { font-size: 11px; color: #8b8e9f; text-transform: uppercase; letter-spacing: 0.05em; } .pr-title { margin: 0; font-size: 18px; } .pr-close { background: transparent; border: none; color: #8b8e9f; font-size: 24px; cursor: pointer; padding: 4px 10px; } .pr-close:hover { color: #e6e8f1; } .pr-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #2a2c38; background: #0f1018; } .pr-tb-label { font-size: 12px; color: #8b8e9f; } .pr-tb-len { display: flex; gap: 4px; } .pr-tb-btn { background: #1f2030; border: 1px solid #2a2c38; color: #c8cbdc; cursor: pointer; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; } .pr-tb-btn:hover { background: #2a2c38; } .pr-tb-btn.pr-on { background: var(--track-colour); border-color: var(--track-colour); color: #fff; } .pr-tb-btn.pr-primary { background: var(--track-colour); border-color: var(--track-colour); color: #fff; } .pr-tb-btn.pr-danger { color: #ee6f8b; border-color: rgba(238,61,139,0.5); } .pr-tb-spacer { flex: 1; } .pr-body { flex: 1; display: grid; grid-template-columns: 64px 1fr; min-height: 0; } /* Piano Roll keyboard column — styled like an actual piano viewed end-on: ivory white keys take the full column width; black keys sit on top, only covering about 65% from the left, so the right edge of every white key row stays visible — that's where the note name lives. The subtle shadow between the black key and the white key below mimics the gap on a real piano. */ .pr-keys-col { background: #f7f3ea; /* white-key surface beneath everything */ border-right: 2px solid #1a1c25; overflow-x: hidden; overflow-y: scroll; /* synced from the grid scroll handler */ scrollbar-width: none; /* hide our own scrollbar (Firefox) */ position: relative; } .pr-keys-col::-webkit-scrollbar { display: none; } /* hide scrollbar (Webkit) */ /* The spacer takes the column's total height (set inline) so absolutely positioned keys have something to push the scrollbar against. */ .pr-keys-spacer { width: 0; visibility: hidden; } .pr-key { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-size: 9px; font-weight: 700; user-select: none; cursor: pointer; } /* White keys — ivory, hairline separators only between two whites in a row (E→F and B→C) come through the underlying column colour. */ .pr-key.pr-kw { background: linear-gradient(90deg, #ffffff 0%, #f4eee0 70%, #e8e0cd 100%); color: #2a2438; border-bottom: 1px solid #d4cab2; box-shadow: inset 0 -1px 0 rgba(120, 90, 40, 0.08); } /* C labels stand out so the kid can navigate octaves. */ .pr-key.pr-kc { color: #b8430b; font-size: 10px; font-weight: 800; } /* Black keys — narrow bar overlapping the boundary between the two adjacent white keys, like a real piano. We use absolute positioning (set inline) so the key visually straddles two grid rows: the bottom half of the white above + the top half of the white below. */ .pr-key.pr-kb { /* Slimmer black-key bar — covers ~52% of the column width from the left, leaving more ivory on the right so the keyboard reads cleaner. */ right: 48%; background: linear-gradient(180deg, #0d0e15 0%, #1a1c27 60%, #2a2c38 100%); border-radius: 0 4px 4px 0; border-bottom: 1px solid #0a0b10; color: #f5f5fb; font-size: 8px; font-weight: 700; padding-right: 5px; z-index: 2; /* sits on top of overlapped whites */ box-shadow: inset 0 -1px 0 rgba(0,0,0,0.6), 1px 1px 3px rgba(0,0,0,0.4); } /* Hover/active — flash the track colour onto the relevant key. Black keys are already FULL rowPx tall (just narrower than whites), so hover only needs to expand the bar to full column width and swap the gradient for a solid block of track colour. */ .pr-key.pr-kw:hover { filter: brightness(0.96); } .pr-key.pr-kb:hover { background: var(--track-colour); color: #fff; filter: none; right: 0; /* fill full column width */ z-index: 6; /* float over surrounding whites */ border-radius: 0; } .pr-key.pr-kw:active, .pr-key.pr-kb:active { background: var(--track-colour); color: #fff; } /* Hot key — paints the row the cursor (or a dragging note) is currently on in the track colour. Same full-row treatment for black keys. */ .pr-key.pr-kw.pr-hot { background: var(--track-colour); color: #fff; } .pr-key.pr-kb.pr-hot { background: var(--track-colour); color: #fff; filter: none; right: 0; z-index: 6; border-radius: 0; } .pr-grid-scroll { overflow: auto; background: #0a0b10; position: relative; } .pr-grid { position: relative; background: #0a0b10; } /* Horizontal lanes — one per WHITE key. Each lane has a faint top border so the grid reads as a stack of equal rows, exactly mirroring the keys column on the left. C lanes are tinted so the octave anchor is obvious. */ .pr-row-w, .pr-row-c { position: absolute; left: 0; right: 0; pointer-events: none; border-top: 1px solid rgba(255,255,255,0.06); } .pr-row-w { background: rgba(255,255,255,0.02); } .pr-row-c { background: rgba(255,184,77,0.10); border-top-color: rgba(255,184,77,0.28); } /* Smart Keys: out-of-scale rows get a dim overlay so in-key rows pop. */ .pr-row-oo, .pr-row-oo-b { position: absolute; left: 0; right: 0; pointer-events: none; background: rgba(0,0,0,0.55); z-index: 1; } .pr-row-oo-b { background: rgba(0,0,0,0.65); } /* Smart Keys toolbar checkbox in the Piano Roll. */ .pr-tb-smart { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: #1f2030; border: 1px solid #2a2c38; border-radius: 6px; font-size: 12px; color: #c8cbdc; cursor: pointer; } .pr-tb-smart input { accent-color: var(--track-colour); } .pr-tb-smart:hover { background: #2a2c38; } /* Step / Chord Sequencer modal grid — shared CSS for both editors. */ .stepseq-card { max-width: 1200px; } .stepseq-body { flex: 1; overflow: auto; padding: 18px; display: flex; align-items: center; justify-content: center; } .stepseq-grid { display: grid; grid-template-columns: 70px repeat(var(--cols), 1fr); gap: 4px; width: 100%; max-width: 1100px; } .stepseq-row-label { display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-weight: 700; color: #c8cbdc; font-size: 13px; } .stepseq-cell { aspect-ratio: 1 / 1; min-height: 32px; background: #1a1c27; border: 1px solid #2a2c38; border-radius: 5px; cursor: pointer; transition: background 80ms; } .stepseq-cell.beat { border-color: #3a3c48; background: #1f2130; } .stepseq-cell:hover { background: #2a2c38; } .stepseq-cell.on { background: var(--track-colour); border-color: var(--track-colour); box-shadow: 0 0 0 1px var(--track-colour) inset, 0 1px 4px rgba(0,0,0,0.4); } .pr-col-beat, .pr-col-bar { position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; } .pr-col-beat { background: rgba(255,255,255,0.04); } .pr-col-bar { background: rgba(255,255,255,0.16); } .pr-note { position: absolute; background: var(--track-colour); border-radius: 3px; border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); cursor: move; z-index: 2; } .pr-note.pr-sel { outline: 2px solid #fff; outline-offset: -1px; z-index: 3; } /* Sharp / flat notes sit on the BOUNDARY between two white lanes — give them a darker tone so it's visually obvious they're black-key pitches. */ .pr-note.pr-note-b { background: color-mix(in srgb, var(--track-colour) 78%, #000 22%); border-color: rgba(0,0,0,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.5); z-index: 4; /* float over any overlapping whites */ } .pr-note-resize { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: ew-resize; background: rgba(255,255,255,0.18); border-radius: 0 3px 3px 0; } .pr-hint { padding: 8px 18px; font-size: 11px; color: #8b8e9f; border-top: 1px solid #2a2c38; text-align: center; } /* Clip editor — Piano Roll launcher row */ .cmp-clipedit-pianoroll-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; margin-top: 6px; border-top: 1px solid #2a2c38; } .cmp-clipedit-pianoroll-hint { font-size: 11px; color: #8b8e9f; } /* Remix banner — shown at the top of Score Studio when a project was forked. */ .cmp-remix-banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: linear-gradient(135deg, rgba(238,61,139,0.22), rgba(139,61,238,0.22)); border: 1px solid rgba(238,61,139,0.45); border-radius: 10px; margin-bottom: 12px; color: #f4d3e3; font-size: 13px; } .cmp-remix-icon { font-size: 18px; } .cmp-remix-text { flex: 1; } .cmp-remix-text strong { color: #fff; } .cmp-remix-dismiss { background: transparent; border: none; color: #f4d3e3; font-size: 18px; cursor: pointer; padding: 0 6px; } .cmp-remix-dismiss:hover { color: #fff; } /* Showcase work — Remix button sits next to Open in studio */ .sc-work-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ============================================================ Per-track FX rack (BandLab 4) — 5 mini-knobs at the bottom of each strip ============================================================ */ .cmp-fx-rack { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 6px; padding: 4px 2px; background: rgba(0,0,0,0.25); border-radius: 6px; width: 100%; } .cmp-fx-knob { display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: ns-resize; user-select: none; min-width: 0; } .cmp-fx-dial { --v: 0; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient( var(--track-colour) 0deg, var(--track-colour) calc(var(--v) * 270deg), rgba(255,255,255,0.1) calc(var(--v) * 270deg), rgba(255,255,255,0.1) 270deg, transparent 270deg, transparent 360deg ); transform: rotate(135deg); position: relative; } .cmp-fx-dial::after { content: ""; position: absolute; inset: 3px; background: #14151c; border-radius: 50%; transform: rotate(-135deg); } .cmp-fx-label { font-size: 8px; font-weight: 700; color: #8b8e9f; letter-spacing: 0.02em; } .cmp-fx-knob:hover .cmp-fx-label { color: var(--track-colour); } /* ============================================================ SongStarter modal (BandLab 5) ============================================================ */ .ss-modal-backdrop { position: fixed; inset: 0; background: rgba(8, 9, 14, 0.85); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } .ss-modal-card { background: #15161e; border: 1px solid #2a2c38; border-radius: 14px; max-width: 880px; width: 92vw; max-height: 90vh; overflow-y: auto; color: #e6e8f1; padding: 24px; } .ss-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .ss-head h2 { margin: 0; font-size: 22px; } .ss-close { background: transparent; border: none; color: #8b8e9f; font-size: 24px; cursor: pointer; padding: 4px 10px; } .ss-close:hover { color: #e6e8f1; } .ss-sub { color: #8b8e9f; margin: 0 0 18px; font-size: 13px; } .ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .ss-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.18); cursor: pointer; color: #fff; text-align: left; min-height: 160px; transition: transform 0.1s, box-shadow 0.1s; } .ss-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); } .ss-card:active { transform: translateY(0); } .ss-icon { font-size: 28px; } .ss-name { font-size: 17px; font-weight: 800; } .ss-meta { font-size: 11px; opacity: 0.85; letter-spacing: 0.04em; text-transform: uppercase; } .ss-desc { font-size: 12px; opacity: 0.92; margin-top: auto; line-height: 1.4; } /* ============================================================ Homepage — Studios layout (Phase 1) ============================================================ */ .home-body { background: var(--surface-1); color: var(--text); min-height: 100vh; } .home-main { max-width: 1200px; margin: 0 auto; padding: 36px 24px 60px; } .home-hero { text-align: center; margin: 8px 0 36px; } .home-h1 { font-size: 44px; font-weight: 800; margin: 0 0 8px; background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple), var(--accent-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .home-sub { color: var(--text-dim); font-size: 17px; margin: 0; } .home-sub strong { color: var(--text); } .home-section-title { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin: 36px 0 14px; } /* Five Studio cards — main creative destinations */ .studio-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .studio-card { position: relative; display: block; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px 26px; color: var(--text); text-decoration: none; transition: transform 140ms, border-color 140ms, box-shadow 140ms; overflow: hidden; } .studio-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--studio-accent, var(--accent-pink)); } .studio-card:hover { transform: translateY(-3px); border-color: var(--studio-accent, var(--accent-pink)); box-shadow: var(--shadow-lg); } .studio-emoji { font-size: 38px; margin-bottom: 10px; line-height: 1; } .studio-card h3 { margin: 0 0 6px; font-size: 22px; font-weight: 700; } .studio-card p { margin: 0 0 16px; color: var(--text-dim); font-size: 14px; line-height: 1.5; } .studio-cta { color: var(--studio-accent, var(--accent-pink)); font-weight: 700; font-size: 14px; } .studio-soon { position: absolute; top: 14px; right: 14px; background: var(--surface-overlay); color: var(--text-dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; } /* Per-studio accent colours — themed but readable */ .studio-dj { --studio-accent: #3d5fec; } .studio-producer { --studio-accent: #8b3dee; } .studio-score { --studio-accent: #ee3d8b; } .studio-play { --studio-accent: #2ec882; } .studio-skills { --studio-accent: #ffb84d; } /* Homepage Projects row — themed "make this" tiles (YuStudio Artist Pack style) */ .proj-tile-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .proj-tile { position: relative; display: block; padding: 24px 20px 20px; border-radius: 14px; color: white; text-decoration: none; min-height: 160px; overflow: hidden; transition: transform 140ms, box-shadow 140ms; box-shadow: var(--shadow); } .proj-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .proj-tile::after { content: "Open project →"; position: absolute; bottom: 16px; right: 18px; font-size: 12px; font-weight: 700; opacity: 0.85; } .proj-tile-mood { display: inline-block; background: rgba(255,255,255,0.18); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; } .proj-tile-title { font-size: 22px; font-weight: 800; line-height: 1.15; margin-bottom: 4px; } .proj-tile-sub { font-size: 13px; opacity: 0.92; margin-bottom: 10px; } .proj-tile-meta { font-size: 11px; opacity: 0.7; letter-spacing: 0.04em; } /* Two lightweight extras — narrower, side-by-side */ .extra-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .extra-card { display: flex; align-items: center; gap: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; color: var(--text); text-decoration: none; transition: border-color 140ms, transform 140ms; } .extra-card:hover { border-color: var(--accent-pink); transform: translateY(-2px); } .extra-emoji { font-size: 32px; line-height: 1; flex-shrink: 0; } .extra-card h3 { margin: 0 0 4px; font-size: 17px; } .extra-card p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.4; } .extra-card .studio-soon { position: static; display: inline-block; margin-top: 6px; } /* "Coming next" placeholder pages */ .soon-main { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 220px); padding: 36px 24px; } .soon-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 48px 40px; max-width: 580px; text-align: center; } .soon-emoji { font-size: 64px; margin-bottom: 12px; } .soon-card h1 { margin: 0 0 10px; font-size: 32px; font-weight: 800; background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; } .soon-lead { color: var(--text); font-size: 16px; line-height: 1.5; margin: 0 0 12px; } .soon-sub { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 0 0 24px; } .soon-card a.btn { display: inline-block; } /* Teacher dashboard — Live class presence grid */ .live-class { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 20px 24px; margin: 18px 0; } .lc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .lc-head .cc-title { margin: 0; } .lc-meta { display: flex; align-items: center; gap: 10px; } .lc-backend { font-size: 12px; color: var(--text-dim); font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-overlay); border: 1px solid var(--border); } .lc-be-supabase { color: #2ec882; border-color: rgba(46, 200, 130, 0.4); } .lc-be-broadcast { color: #ffb84d; border-color: rgba(255, 184, 77, 0.4); } .lc-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .lc-empty { grid-column: 1 / -1; text-align: center; color: var(--text-dim); padding: 36px 12px; font-style: italic; font-size: 14px; background: var(--surface-overlay); border-radius: 8px; border: 1px dashed var(--border); } .lc-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; transition: border-color 140ms; } .lc-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .lc-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ec882; flex-shrink: 0; box-shadow: 0 0 6px currentColor; color: #2ec882; } .lc-name { font-weight: 700; color: var(--text); font-size: 14px; flex: 1; } .lc-class { background: #3d5fec; color: white; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .lc-page { color: var(--text-dim); font-size: 13px; } .lc-status { color: var(--text-dim); font-size: 11px; margin-top: 4px; } .lc-card.lc-active { border-color: rgba(46, 200, 130, 0.3); } .lc-card.lc-idle .lc-dot { background: #ffb84d; color: #ffb84d; } .lc-card.lc-idle { border-color: rgba(255, 184, 77, 0.3); } .lc-card.lc-offline .lc-dot { background: #6b6e7f; color: #6b6e7f; box-shadow: none; } .lc-card.lc-offline { opacity: 0.6; } /* Teacher dashboard — classroom controls block */ .classroom-controls { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 20px 24px; margin: 18px 0 24px; } .cc-title { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--text); } .cc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .cc-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 16px; } .cc-card h3 { margin: 0 0 6px; font-size: 14px; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; } .cc-card p { margin: 0 0 12px; color: var(--text-dim); font-size: 13px; line-height: 1.4; } .cc-hint { color: #6b6e7f; font-size: 12px; font-style: italic; margin-top: 8px; } .cc-select { width: 100%; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px; } /* Stale-identity banner — shown when a different kid may be at this laptop. Sits above the site header so it's the first thing they see. */ .stale-banner { background: linear-gradient(90deg, #ee3d8b 0%, #8b3dee 100%); color: white; padding: 10px 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.25); position: sticky; top: 0; z-index: 100; } .stale-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .stale-q { flex: 1; min-width: 200px; font-size: 15px; } .stale-q strong { font-weight: 800; } .stale-yes, .stale-no { border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13px; cursor: pointer; } .stale-yes { background: white; color: #ee3d8b; } .stale-yes:hover { background: #fce7f1; } .stale-no { background: rgba(0,0,0,0.25); color: white; } .stale-no:hover { background: rgba(0,0,0,0.4); } /* Identity chip in site header — shows current name + class + "Switch user" */ .identity-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 8px 4px 12px; background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--text); } .identity-name { font-weight: 700; } .identity-class { background: var(--accent-pink); color: var(--text-on-accent); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .identity-switch { background: transparent; border: 0; color: var(--text-dim); cursor: pointer; font-size: 12px; padding: 0 4px; text-decoration: underline; } .identity-switch:hover { color: var(--text); } .identity-signin { color: var(--accent-pink); font-weight: 700; text-decoration: none; font-size: 13px; padding: 4px 10px; border: 1px solid var(--accent-pink); border-radius: 999px; } .identity-signin:hover { background: rgba(238, 61, 139, 0.1); } /* Theme toggle button — sits next to the identity chip in the header */ .theme-toggle { background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 999px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); margin-left: 8px; font-size: 16px; transition: background 120ms, transform 120ms; } .theme-toggle:hover { background: var(--surface-3); transform: scale(1.05); } /* Who's playing? sign-in page */ .who-body { background: var(--surface-1); min-height: 100vh; color: var(--text); } .who-main { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 160px); padding: 24px; } .who-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 36px 40px; max-width: 480px; width: 100%; box-shadow: var(--shadow-lg); } .who-h1 { margin: 0 0 8px; font-size: 32px; font-weight: 800; color: var(--text); } .who-sub { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 0 0 24px; } .who-form { display: flex; flex-direction: column; gap: 16px; } .who-field { display: flex; flex-direction: column; gap: 6px; } .who-field > span { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .who-field select, .who-field input { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 16px; } .who-field select:focus, .who-field input:focus { outline: none; border-color: var(--accent-pink); } .who-go { margin-top: 8px; padding: 14px 24px; font-size: 16px; font-weight: 700; } .who-fineprint { color: var(--text-muted); font-size: 12px; margin: 8px 0 0; text-align: center; } .t-acct-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; } .t-acct-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 14px; } .who-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; } .who-google svg { background: #fff; border-radius: 50%; padding: 3px; box-sizing: content-box; } /* Scene picker (film-scoring video bank) */ .cmp-scene { background: #14151c; border: 1px solid #2a2c38; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .cmp-scene-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cmp-scene-toggle { background: transparent; border: 1px solid #2a2c38; color: #c8cbdc; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; } .cmp-scene-toggle:hover { background: #2a2c38; } .cmp-scene.collapsed .cmp-scene-toggle { transform: rotate(-90deg); } .cmp-scene.collapsed .cmp-video-wrap { display: none; } .cmp-scene.collapsed { padding: 8px 14px; } .cmp-scene-desc { flex: 1; min-width: 200px; color: #a5a7b8; font-size: 12px; font-style: italic; } .cmp-upload-btn { background: #232531; color: #f5f5fb; border: 1px solid #3a3d4e; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 13px; } .cmp-upload-btn:hover { background: #2b2e3c; } .cmp-video-wrap { position: relative; background: #0a0b10; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; max-height: 320px; display: flex; align-items: center; justify-content: center; } .cmp-video { width: 100%; height: 100%; object-fit: contain; display: block; /* JS toggles via inline display:none when no scene */ } .cmp-video-empty { color: #6b6e7f; font-size: 14px; font-style: italic; } /* Fullscreen toggle — sits in the bottom-right corner of the picture frame, semi-transparent so it doesn't clutter the scene, brightens on hover. */ .cmp-video-fs { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; background: rgba(8, 9, 14, 0.7); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; z-index: 4; transition: background 120ms, transform 80ms; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .cmp-video-fs:hover { background: rgba(238, 61, 139, 0.9); border-color: #ee3d8b; } .cmp-video-fs:active { transform: scale(0.94); } /* When the wrap is itself fullscreen the button stays glued to the corner. */ .cmp-video-wrap:fullscreen { aspect-ratio: auto; max-height: none; width: 100vw; height: 100vh; } .cmp-video-wrap:-webkit-full-screen { aspect-ratio: auto; max-height: none; width: 100vw; height: 100vh; } /* Responsive */ @media (max-width: 1100px) { .cmp-workarea { grid-template-columns: 1fr; } .cmp-mixer-strips { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ Phase 3 — Classroom control (Freeze / Focus / Toast) ============================================================ */ /* Full-screen freeze overlay — covers everything, blocks pointer events. */ .cc-freeze { position: fixed; inset: 0; z-index: 99999; background: radial-gradient(ellipse at center, rgba(20, 20, 40, 0.96) 0%, rgba(8, 8, 16, 0.99) 100%); display: flex; align-items: center; justify-content: center; padding: 24px; animation: cc-freeze-in 240ms ease-out; } @keyframes cc-freeze-in { from { opacity: 0; backdrop-filter: blur(0px); } to { opacity: 1; backdrop-filter: blur(8px); } } .cc-freeze-card { background: linear-gradient(180deg, #1a1c25 0%, #14151c 100%); border: 1px solid rgba(238, 61, 139, 0.4); border-radius: 20px; padding: 48px 56px; max-width: 560px; text-align: center; box-shadow: 0 20px 80px rgba(238, 61, 139, 0.25), 0 0 0 1px rgba(255,255,255,0.04) inset; } .cc-freeze-icon { font-size: 64px; line-height: 1; margin-bottom: 12px; background: linear-gradient(90deg, #ee3d8b, #8b3dee); -webkit-background-clip: text; background-clip: text; color: transparent; } .cc-freeze-title { margin: 0 0 12px; font-size: 28px; font-weight: 800; color: #f5f5fb; } .cc-freeze-msg { margin: 0 0 16px; font-size: 18px; line-height: 1.4; color: #d6d8e6; min-height: 1.4em; } .cc-freeze-msg:empty { display: none; } .cc-freeze-sub { margin: 0; font-size: 13px; color: #8b8e9f; font-style: italic; } /* Focus-mode top bar — sits above the site header. */ .cc-focus-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9998; background: linear-gradient(90deg, #ee3d8b 0%, #8b3dee 100%); color: white; padding: 8px 16px; font-size: 13px; font-weight: 700; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.25); letter-spacing: 0.02em; animation: cc-slide-down 180ms ease-out; } .cc-focus-icon { margin-right: 6px; } @keyframes cc-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Push the rest of the page down so the bar doesn't cover the header. */ body.cc-focus-on { padding-top: 32px; } body.cc-focus-on .stale-banner { top: 32px; } /* Toast — bottom right, auto-fades. */ .cc-toast { position: fixed; right: 20px; bottom: 20px; z-index: 9997; background: linear-gradient(180deg, #1a1c25 0%, #14151c 100%); border: 1px solid rgba(61, 95, 236, 0.5); border-left: 4px solid #3d5fec; border-radius: 10px; padding: 14px 18px; max-width: 360px; color: #f5f5fb; font-size: 14px; line-height: 1.4; box-shadow: 0 10px 40px rgba(0,0,0,0.4); animation: cc-toast-in 240ms ease-out; } .cc-toast-leave { animation: cc-toast-out 1000ms ease-in forwards; } @keyframes cc-toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes cc-toast-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(20px); opacity: 0; } } /* Teacher controls — three big cards for Freeze / Focus / Send. */ .cc-control-card { display: flex; flex-direction: column; gap: 8px; } .cc-control-card .cc-state { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; display: inline-block; width: max-content; } .cc-state-off { background: var(--surface-overlay); color: var(--text-dim); } .cc-state-on { background: rgba(238, 61, 139, 0.2); color: #ff86b9; border: 1px solid rgba(238, 61, 139, 0.4); } .cc-input { width: 100%; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; } .cc-btn-row { display: flex; gap: 8px; flex-wrap: wrap; } .cc-btn-row .btn { flex: 1; min-width: 110px; } .btn-danger { background: linear-gradient(90deg, #ee3d8b 0%, #8b3dee 100%); color: white; border: 0; } .btn-danger:hover { filter: brightness(1.1); } .cc-target { font-size: 12px; color: var(--text-dim); margin-top: 4px; } /* Phase 3b — Screen mirror modal + privacy banner */ .lc-hint { margin: 14px 0 0; font-size: 12px; color: var(--text-dim); font-style: italic; text-align: center; } .lc-card { cursor: pointer; } .lc-card:hover { border-color: var(--border-strong); } /* Privacy banner shown on the mirrored student's tab. */ .cc-eye-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9996; background: linear-gradient(90deg, #ff2e63 0%, #c1124b 100%); color: white; padding: 8px 16px; font-size: 13px; font-weight: 700; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.25); letter-spacing: 0.02em; animation: cc-slide-down 180ms ease-out; } .cc-eye-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: white; margin-right: 8px; vertical-align: middle; animation: cc-eye-pulse 1.5s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(255,255,255,0.7); } @keyframes cc-eye-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.8); } 70% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } body.cc-eye-on { padding-top: 32px; } body.cc-eye-on .stale-banner { top: 32px; } /* Stack focus-bar above eye-bar if both are active. */ body.cc-eye-on.cc-focus-on .cc-focus-bar { top: 32px; } body.cc-eye-on.cc-focus-on { padding-top: 64px; } /* Teacher-side mirror modal. */ .cc-modal { position: fixed; inset: 0; z-index: 99998; background: rgba(8, 8, 16, 0.88); display: flex; align-items: center; justify-content: center; padding: 24px; animation: cc-freeze-in 200ms ease-out; } .cc-modal[hidden] { display: none; } body.cc-modal-open { overflow: hidden; } .cc-modal-card { background: linear-gradient(180deg, #1a1c25 0%, #14151c 100%); border: 1px solid #2a2c38; border-radius: 14px; width: min(1100px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 80px rgba(0,0,0,0.6); } .cc-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #2a2c38; } .cc-modal-title { display: flex; align-items: center; gap: 10px; color: #f5f5fb; font-size: 15px; } .cc-modal-title strong { color: #f5f5fb; font-weight: 800; } .cc-modal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2ec882; box-shadow: 0 0 8px #2ec882; animation: cc-eye-pulse 1.5s ease-in-out infinite; } .cc-mirror-class { background: #3d5fec; color: white; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .cc-mirror-page { color: #8b8e9f; font-size: 13px; } .cc-modal-close { background: transparent; border: 0; color: #8b8e9f; font-size: 28px; line-height: 1; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; } .cc-modal-close:hover { background: rgba(255,255,255,0.06); color: #f5f5fb; } .cc-modal-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; overflow: auto; } .cc-mirror-stage { position: relative; background: #0a0b10; border: 1px solid #2a2c38; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; } .cc-mirror-img { display: block; max-width: 100%; max-height: 100%; opacity: 0; transition: opacity 240ms; } .cc-mirror-img.cc-mirror-img-ready { opacity: 1; } .cc-mirror-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8b8e9f; font-style: italic; font-size: 14px; text-align: center; padding: 24px; } .cc-mirror-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .cc-mirror-toggle { display: inline-flex; align-items: center; gap: 8px; color: #c4c6d4; font-size: 13px; cursor: pointer; } .cc-mirror-toggle input { width: 16px; height: 16px; } .cc-mirror-meta { color: #6b6e7f; font-size: 12px; font-style: italic; } /* ============================================================ Phase 4 — Studio access (lock/unlock + tamper log) ============================================================ */ /* Locked overlay shown on student pages when their class can't access the Studio they're trying to open. Sits below freeze overlay (z-index 99999) so teacher can still freeze even a kid who's looking at a locked screen. */ .ma-locked { position: fixed; inset: 0; z-index: 99000; background: radial-gradient(ellipse at center, rgba(20, 20, 40, 0.96) 0%, rgba(8, 8, 16, 0.99) 100%); display: flex; align-items: center; justify-content: center; padding: 24px; animation: cc-freeze-in 240ms ease-out; } .ma-locked-card { background: linear-gradient(180deg, #1a1c25 0%, #14151c 100%); border: 1px solid rgba(255, 184, 77, 0.4); border-radius: 20px; padding: 48px 56px; max-width: 560px; text-align: center; box-shadow: 0 20px 80px rgba(255, 184, 77, 0.18), 0 0 0 1px rgba(255,255,255,0.04) inset; } .ma-locked-icon { font-size: 64px; line-height: 1; margin-bottom: 12px; } .ma-locked-title { margin: 0 0 12px; font-size: 26px; font-weight: 800; color: #f5f5fb; } .ma-locked-msg { margin: 0 0 24px; font-size: 16px; color: #c4c6d4; } /* Teacher matrix. */ .ma-matrix-wrap { overflow-x: auto; margin: 6px 0 14px; } .ma-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; } .ma-matrix th, .ma-matrix td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; } .ma-matrix thead th { background: var(--surface-overlay); color: var(--text-dim); font-weight: 700; position: sticky; top: 0; } .ma-corner { text-align: left !important; color: var(--text-dim); font-weight: 600; font-size: 12px; } .ma-studio { text-align: left !important; color: var(--text); font-weight: 700; } .ma-row-action { white-space: nowrap; } .ma-row-action .btn { padding: 6px 10px; font-size: 12px; } .ma-cell { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 28px; border-radius: 8px; background: var(--surface-overlay); border: 1px solid var(--border); cursor: pointer; transition: background 120ms, border-color 120ms; font-size: 16px; } .ma-cell input { position: absolute; opacity: 0; pointer-events: none; } .ma-cell:hover { background: var(--surface-3); } .ma-locked-cell { background: rgba(255, 184, 77, 0.18); border-color: rgba(255, 184, 77, 0.5); } .ma-matrix tfoot td { border-bottom: 0; padding-top: 12px; } /* Tamper log feed below the matrix. */ .ma-tamper { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .ma-tamper-title { margin: 0 0 8px; font-size: 13px; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; } .ma-tamper-count { display: inline-block; min-width: 24px; padding: 2px 8px; margin-left: 6px; background: rgba(255, 184, 77, 0.22); color: #ffb84d; border-radius: 999px; font-size: 11px; font-weight: 800; } .ma-tamper-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; } .ma-tamper-empty { color: var(--text-dim); font-style: italic; font-size: 13px; padding: 4px 0; } .ma-tamper-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 6px; background: var(--surface-overlay); font-size: 13px; color: var(--text-dim); } .ma-tamper-time { color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 48px; } .ma-tamper-studio { color: #ffb84d; font-weight: 700; } /* ============================================================ Phase 5 — Producer Lab (Pack browser + Pack workspace) ============================================================ */ /* Pack browser grid */ .pack-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); max-width: var(--max); margin: 0 auto; padding: 0 24px 20px; } .pack-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--text); transition: transform 160ms, border-color 160ms, box-shadow 160ms; } .pack-card:hover { transform: translateY(-2px); border-color: var(--accent-purple); box-shadow: var(--shadow); text-decoration: none; } .pack-cover { position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px; color: white; font-family: var(--font-display); } .pack-cover-meta { display: flex; align-items: center; justify-content: space-between; font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .pack-cover-tag { background: rgba(0,0,0,0.25); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); } .pack-cover-bpm { background: rgba(255,255,255,0.18); padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; } .pack-cover-title { font-size: 32px; line-height: 1.05; letter-spacing: -0.01em; text-shadow: 0 2px 16px rgba(0,0,0,0.35); } .pack-cover-sub { font-family: var(--font); font-size: 13px; font-weight: 500; opacity: 0.92; margin-top: 4px; } .pack-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; } .pack-tagline { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); } .pack-desc { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; } .pack-cta { margin-top: 8px; font-weight: 700; color: var(--accent-pink); font-size: 14px; } .pack-soon { text-align: center; color: var(--text-dim); font-style: italic; font-size: 13px; margin: 20px 0 40px; } .pack-empty { text-align: center; color: var(--text-dim); padding: 40px; } /* Stem-pack browser — reuses .pack-grid / .pack-card */ .stem-card .pack-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .stem-card .pack-actions .btn-primary { flex: 1 1 100%; } .stem-card .pack-actions .btn-secondary { flex: 1 1 calc(50% - 4px); text-align: center; font-size: 13px; } .stem-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; } .stem-role-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .stem-head { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; } .stem-promo { background: linear-gradient(135deg, rgba(139,61,238,0.08), rgba(238,61,139,0.08)); border: 1px solid var(--border); border-radius: 14px; padding: 22px; text-align: center; margin: 24px auto 40px; max-width: 720px; } /* DJ Studio — per-deck stem isolation bar (V / D / B / O) */ .deck-stem-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin: 4px 8px; background: rgba(0,0,0,0.35); border-radius: 6px; min-height: 30px; } .deck-stem-bar.has-stems { background: rgba(139, 61, 238, 0.22); } .deck-stems-empty { color: rgba(255,255,255,0.45); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .deck-stem-btn { --stem-colour: #888; width: 36px; height: 26px; border-radius: 4px; border: 1.5px solid var(--stem-colour); background: var(--stem-colour); color: #fff; font: 800 13px/1 system-ui, sans-serif; letter-spacing: 0.03em; cursor: pointer; transition: opacity 0.15s, transform 0.05s; } .deck-stem-btn:hover { transform: translateY(-1px); } .deck-stem-btn:active { transform: translateY(0); } .deck-stem-btn.muted { background: transparent; color: var(--stem-colour); opacity: 0.55; text-decoration: line-through; } .deck-stem-btn.disabled { background: transparent; border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.2); cursor: not-allowed; } /* Pack workspace — sidebar mirrors project.html, cover sits inline */ .pack-sidebar { /* inherits .proj-sidebar */ } .pack-cover-inline { aspect-ratio: auto; padding: 18px 18px 14px; border-radius: 12px; margin-bottom: 10px; } .pack-cover-inline .pack-cover-title { font-size: 22px; } .pack-back { display: block; margin-top: 12px; text-align: center; font-size: 13px; color: var(--text-dim); } /* ============================================================ Phase 6 — Showcase gallery + work detail + comment thread ============================================================ */ .sc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; max-width: var(--max); margin: 0 auto; padding: 0 24px; } .sc-filter { display: flex; flex-direction: column; gap: 4px; min-width: 200px; } .sc-filter-label { font-size: 12px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .sc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); max-width: var(--max); margin: 16px auto 40px; padding: 0 24px; } .sc-empty { grid-column: 1 / -1; text-align: center; color: var(--text-dim); font-style: italic; font-size: 14px; padding: 48px 12px; border-radius: 12px; background: var(--surface-overlay); border: 1px dashed var(--border); } .sc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--text); transition: transform 140ms, border-color 140ms; } .sc-card:hover { transform: translateY(-2px); border-color: var(--accent-purple); text-decoration: none; } .sc-card-cover { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid; } .sc-card-icon { font-size: 42px; line-height: 1; } .sc-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .sc-card-meta { display: flex; justify-content: space-between; align-items: center; } .sc-card-studio { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .sc-card-ago { font-size: 11px; color: var(--text-dim); } .sc-card-title { margin: 2px 0; font-size: 16px; font-weight: 800; } .sc-card-author { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); } .sc-card-author strong { color: var(--text); font-weight: 700; } .sc-card-comments { font-size: 12px; color: var(--text-dim); margin-top: 4px; } /* Work detail page. */ .sc-work-main { max-width: 820px; margin: 0 auto; padding: 24px; } .sc-back { display: inline-block; margin-bottom: 14px; color: var(--text-dim); font-size: 13px; } .sc-work { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; } .sc-work-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 20px; } .sc-work-cover { width: 140px; height: 140px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid; } .sc-work-icon { font-size: 64px; line-height: 1; } .sc-work-meta { flex: 1; min-width: 220px; } .sc-work-studio { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .sc-work-title { margin: 0 0 6px; font-size: 26px; font-weight: 800; } .sc-work-author { font-size: 14px; color: var(--text-dim); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .sc-work-author strong { color: var(--text); } .sc-work-time { color: var(--text-dim); font-size: 12px; } .sc-work-actions { margin-top: 14px; } .sc-comments { } .sc-comments-title { margin: 0 0 12px; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .sc-comment-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; } .sc-comment-empty { color: var(--text-dim); font-style: italic; padding: 10px; } .sc-comment { background: var(--surface-overlay); border-left: 3px solid var(--border); padding: 10px 14px; border-radius: 8px; } .sc-comment-teacher { border-left-color: var(--accent-pink); background: rgba(238, 61, 139, 0.06); } .sc-comment-student { border-left-color: var(--accent-blue); } .sc-comment-head { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; flex-wrap: wrap; } .sc-comment-author { font-size: 13px; } .sc-comment-role { background: var(--accent-pink); color: white; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; } .sc-comment-time { color: var(--text-muted); margin-left: auto; } .sc-comment-body { font-size: 14px; line-height: 1.5; white-space: pre-wrap; } .sc-comment-form { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .sc-comment-input { width: 100%; box-sizing: border-box; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 14px; resize: vertical; min-height: 60px; } .sc-comment-row { display: flex; justify-content: space-between; align-items: center; } .sc-comment-as { font-size: 12px; color: var(--text-dim); } .sc-work-missing { text-align: center; padding: 60px 24px; } /* ============================================================ Phase 7 — Group sessions (collab pill + modal) ============================================================ */ .cmp-collab-pill { display: inline-flex; align-items: center; gap: 6px; } .cmp-collab-pill.cmp-collab-on { background: linear-gradient(90deg, rgba(46, 200, 130, 0.18), rgba(61, 95, 236, 0.18)); border-color: rgba(46, 200, 130, 0.5); color: #f5f5fb; } .cmp-collab-pill .cmp-collab-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ec882; box-shadow: 0 0 6px #2ec882; animation: cc-eye-pulse 1.5s ease-in-out infinite; } .cmp-collab-pill .cmp-collab-icon { font-size: 14px; } .cmp-collab-pill .cmp-collab-label { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 700; } .cmp-collab-pill .cmp-collab-count { background: rgba(255,255,255,0.12); padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; } .cmp-collab-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 22px; font-weight: 800; letter-spacing: 0.05em; color: #2ec882; } .cmp-collab-membh { margin: 16px 0 6px; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; } .cmp-collab-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .cmp-collab-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,0.04); font-size: 13px; } .cmp-collab-list li .cmp-collab-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ec882; box-shadow: 0 0 6px #2ec882; } .cmp-collab-empty { color: var(--text-muted); font-style: italic; } /* ============================================================ World Music hub ============================================================ */ .wm-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); max-width: var(--max); margin: 12px auto 32px; padding: 0 24px; } .wm-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } .wm-cover { position: relative; padding: 22px 24px; color: white; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-display); } .wm-cover-meta { display: flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .wm-cover-tag { background: rgba(0,0,0,0.28); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); } .wm-cover-title { font-size: 28px; line-height: 1.05; text-shadow: 0 2px 16px rgba(0,0,0,0.3); } .wm-body { padding: 18px 22px 22px; } .wm-intro { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--text); } .wm-h4 { margin: 14px 0 6px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .wm-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-dim); } .wm-list li { margin-bottom: 2px; } .wm-teach { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; font-style: italic; } .wm-try { display: flex; flex-direction: column; gap: 6px; } .wm-try-card { display: block; background: var(--surface-overlay); border: 1px solid var(--border); border-left: 3px solid var(--accent-purple); border-radius: 8px; padding: 10px 12px; text-decoration: none; color: var(--text); transition: border-color 140ms, background 140ms; } .wm-try-card:hover { border-color: var(--accent-pink); border-left-color: var(--accent-pink); background: rgba(238, 61, 139, 0.06); text-decoration: none; } .wm-try-card strong { display: block; font-size: 13px; margin-bottom: 2px; } .wm-try-card span { font-size: 12px; color: var(--text-dim); line-height: 1.4; } /* ============================================================ Teacher identity — Sign in as Teacher card + teacher chip styling ============================================================ */ .t-id-card { background: linear-gradient(135deg, rgba(238, 61, 139, 0.08), rgba(139, 61, 238, 0.08)); border: 1px solid rgba(238, 61, 139, 0.3); border-radius: 14px; padding: 18px 22px; margin: 12px 0 18px; max-width: var(--max); } .t-id-title { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--accent-pink); text-transform: uppercase; letter-spacing: 0.06em; } .t-id-sub { margin: 0 0 12px; font-size: 13px; color: var(--text-dim); line-height: 1.5; } .t-id-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* When the current identity is a teacher, pink-purple ring on the header chip so the role is unmistakable across every page. */ body.identity-teacher .identity-chip { border-color: var(--accent-pink); box-shadow: 0 0 0 2px rgba(238, 61, 139, 0.25); } body.identity-teacher .identity-chip::before { content: "👩‍🏫"; margin-right: 6px; }