/* ============================================================ VOCAL CLEANER — Beatif Studio identity Dual theme (dark default + light), premium glassmorphism. Single source of truth for all component styles. Accent: #FF4D9D (pink) → #5AA9FF (blue). Satoshi type. Theme is driven by [data-theme] on . Toggle in top nav. NOTE: All functional IDs/classes referenced by vocal-free.js are preserved — this file only changes visuals. ============================================================ */ /* ---- Signature accent (theme-independent) ---- */ :root { --pink: #FF4D9D; --blue: #9B5CFF; /* aliased to purple — no more blue in this system */ --purple: #9B5CFF; --grad: linear-gradient(120deg, #FF4D9D, #9B5CFF); --radius-card: 18px; --radius-pill: 999px; --led-red: #FF5A4D; } /* ============================================================ DARK theme (default) ============================================================ */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #16161A; --bg-2: #1E1E24; --surface: rgba(255,255,255,0.055); --surface-2: rgba(255,255,255,0.09); --surface-solid: #21212A; --border: rgba(255,255,255,0.09); --border-2: rgba(255,255,255,0.16); --text: #F2F0FA; --dim: #9896A8; --mute: #5C5A6A; --shadow: 0 24px 60px -20px rgba(0,0,0,0.66); --shadow-sm: 0 12px 30px -14px rgba(0,0,0,0.6); /* glass building blocks */ --glass-fill: var(--surface); --glass-fill-deep: var(--surface-2); --glass-stroke: rgba(255,255,255,0.10); --panel-edge: var(--border-2); --inner-hi: rgba(255,255,255,0.10); --track-bg: rgba(255,255,255,0.08); /* ink aliases (older class names) */ --ink: var(--text); --ink-dim: var(--text); --ink-mute: var(--dim); --ink-deep: var(--mute); /* accent tints */ --blue-deep: #5AA9FF; --blue-soft: rgba(90,169,255,0.22); --blue-bg: rgba(90,169,255,0.10); --blue-glow: rgba(90,169,255,0.45); --pink-glow: rgba(255,77,157,0.40); --accent-grad: var(--grad); /* legacy led aliases (Screen.jsx / knob may reference) */ --led-white: var(--blue); --led-white-glow: var(--blue-glow); --led-white-soft: rgba(90,169,255,0.14); --led-blue: var(--blue); --led-blue-glow: var(--blue-glow); --led-blue-soft: rgba(90,169,255,0.14); --led-cyan: var(--blue); --led-amber: var(--pink); --led-amber-glow: var(--pink-glow); --led-green: var(--blue); --hairline: var(--border-2); --hairline-soft: var(--border); /* knob (JS-rendered) — black glass well, matches main site */ --knob-face: radial-gradient(72% 72% at 30% 24%, #2c2c37 0%, #18181f 42%, #0c0c11 74%, #060608 100%); --knob-edge: rgba(255,255,255,0.10); --knob-inner-hi: rgba(255,255,255,0.18); --knob-track: rgba(255,255,255,0.05); --tick: rgba(255,255,255,0.45); --tick-2: rgba(255,255,255,0.45); --knob-tick-mark: rgba(255,255,255,0.18); --knob-line: #FFFFFF; --bk-line: #FFFFFF; --dome-1: #34343f; --dome-2: #26262f; --dome-3: #1a1a22; --dome-edge: #131319; --knob-side: #050507; --dome-spec: rgba(255,255,255,0.28); --dome-shadow: rgba(0,0,0,0.65); --seat: rgba(255,255,255,0.05); --ring-faint: rgba(255,255,255,0.07); } /* ============================================================ LIGHT theme ============================================================ */ [data-theme="light"] { color-scheme: light; --bg: #F5F4FA; --bg-2: #FDFCFF; --surface: rgba(255,255,255,0.72); --surface-2: rgba(255,255,255,0.85); --surface-solid: #FFFFFF; --border: rgba(20,20,30,0.07); --border-2: rgba(20,20,30,0.12); --text: #16161C; --dim: #56565F; --mute: #8C8C97; --shadow: 0 24px 60px -24px rgba(20,22,40,0.22); --shadow-sm: 0 12px 30px -16px rgba(20,22,40,0.18); --glass-fill: var(--surface); --glass-fill-deep: var(--surface-2); --glass-stroke: rgba(255,255,255,0.8); --panel-edge: var(--border-2); --inner-hi: rgba(255,255,255,0.7); --track-bg: rgba(20,20,30,0.10); --ink: var(--text); --ink-dim: var(--dim); --ink-mute: var(--mute); --ink-deep: var(--mute); --blue-deep: #3D8FE8; --blue-soft: rgba(90,169,255,0.2); --blue-bg: rgba(90,169,255,0.08); --blue-glow: rgba(90,169,255,0.35); --pink-glow: rgba(255,77,157,0.35); --accent-grad: var(--grad); --led-white: var(--blue); --led-white-glow: var(--blue-glow); --led-white-soft: rgba(90,169,255,0.12); --led-blue: var(--blue); --led-blue-glow: var(--blue-glow); --led-blue-soft: rgba(90,169,255,0.12); --led-cyan: var(--blue); --led-amber: var(--pink); --led-amber-glow: var(--pink-glow); --led-green: var(--blue); --hairline: var(--border-2); --hairline-soft: var(--border); /* knob — white frosted glass */ --knob-face: radial-gradient(72% 72% at 30% 24%, #ffffff 0%, #f6f6fb 30%, #e4e4ee 60%, #cfd0dd 82%, #c2c3d3 100%); --knob-edge: rgba(255,255,255,0.9); --knob-inner-hi: rgba(255,255,255,0.95); --knob-track: rgba(20,20,40,0.05); --tick: rgba(40,40,55,0.40); --tick-2: rgba(40,44,55,0.42); --knob-tick-mark: #D7DBE6; --knob-line: #FF4DA0; --bk-line: #FF4DA0; --dome-1: #ffffff; --dome-2: #fbfcff; --dome-3: #f3f4fa; --dome-edge: #e9ebf3; --knob-side: #eceef6; --dome-spec: rgba(255,255,255,0.95); --dome-shadow: rgba(40,44,80,0.16); --seat: rgba(150,154,180,0.30); --ring-faint: rgba(60,64,96,0.10); } * { box-sizing: border-box; } /* ============================================================ MAIN CARD (.face) — Beatif glass ============================================================ */ .face { font-family: 'Satoshi', system-ui, -apple-system, sans-serif; color: var(--text); position: relative; overflow: visible; max-width: 680px; margin: 0 auto; border-radius: 22px; background: var(--surface); backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7); border: 1px solid var(--border-2); box-shadow: inset 0 1px 0 var(--inner-hi), var(--shadow); transition: box-shadow 0.4s cubic-bezier(0.22,1,0.36,1); } .face::before, .face::after { content: none; } .face > * { position: relative; z-index: 1; } /* ============================================================ HEADER ============================================================ */ .fp-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 22px 14px; background: transparent; position: relative; } .fp-header::after { display: none; } /* fp-back hidden — nav already has All Tools back link */ .fp-back { display: none; } .fp-back-UNUSED { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 'Satoshi', sans-serif; color: var(--dim); background: var(--surface); border: 1px solid var(--border-2); padding: 9px 14px; border-radius: var(--radius-pill); cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 var(--inner-hi), var(--shadow-sm); transition: color 0.15s ease, border-color 0.15s ease, transform 0.08s ease; } .fp-back:hover { color: var(--text); border-color: rgba(90,169,255,0.5); transform: translateY(-1px); } .fp-back:active { transform: translateY(0); } .fp-brand { display: flex; align-items: center; gap: 10px; } .fp-brand-mark { width: 32px; height: 32px; border-radius: 10px; background: radial-gradient(60% 60% at 30% 25%, rgba(255,255,255,0.55) 0%, transparent 65%), var(--grad); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 16px -4px var(--pink-glow); } .fp-brand-mark::after { content: ""; width: 2px; height: 14px; border-radius: 1px; background: #ffffff; box-shadow: 0 0 6px rgba(255,255,255,0.7); } .fp-brand-text { font: 700 13px/1 'Satoshi', sans-serif; color: var(--text); letter-spacing: 0.06em; } .fp-mode-tag { display: inline-flex; align-items: center; gap: 8px; font: 700 10.5px/1 'Satoshi', sans-serif; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text); background: var(--surface); border: 1px solid transparent; background-image: linear-gradient(var(--surface-solid), var(--surface-solid)), var(--grad); background-origin: border-box; background-clip: padding-box, border-box; padding: 9px 14px; border-radius: var(--radius-pill); box-shadow: inset 0 1px 0 var(--inner-hi); } .fp-mode-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); } .fp-mode-tag.pro .dot { background: var(--blue); box-shadow: 0 0 8px var(--blue); } /* ============================================================ TITLE ============================================================ */ .fp-title { text-align: left; padding: 6px 24px 4px; } .fp-title h1 { margin: 0; font: 700 38px/1 'Satoshi', sans-serif; letter-spacing: -0.025em; color: var(--text); } .fp-title .pro-mark { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 700; margin-left: 6px; } .fp-title p { margin: 8px 0 0; font: 500 11px/1 'Satoshi', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); } /* ============================================================ BODY ============================================================ */ .fp-body { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 16px; } /* ============================================================ DROPZONE ============================================================ */ .dropzone { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px dashed rgba(155,92,255,0.40); border-radius: var(--radius-card); box-shadow: inset 0 1px 0 var(--inner-hi), var(--shadow-sm); transition: border-color 0.15s ease, background 0.15s ease; } .dropzone:hover { border-color: rgba(155,92,255,0.65); } .dropzone.has-file { border-style: solid; border-color: var(--border-2); background: var(--surface-2); } .dropzone .file-ico { width: 48px; height: 48px; border-radius: 14px; background: radial-gradient(60% 50% at 30% 25%, rgba(255,255,255,0.35) 0%, transparent 70%), var(--grad); display: grid; place-items: center; color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 16px -6px var(--pink-glow); } .dropzone .file-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dropzone .file-name { font: 500 15px/1.2 'Satoshi', sans-serif; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; } .dropzone .file-sub { font: 400 12px/1.2 'Satoshi', sans-serif; color: var(--mute); letter-spacing: 0.01em; } .dropzone .file-cta { font: 500 12px/1 'Satoshi', sans-serif; color: var(--text); padding: 10px 16px; border: 1px solid var(--border-2); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer; box-shadow: inset 0 1px 0 var(--inner-hi); transition: border-color 0.15s ease, transform 0.08s ease; } .dropzone .file-cta:hover { border-color: rgba(90,169,255,0.6); transform: translateY(-1px); } .dropzone .file-cta:active { transform: translateY(0); } /* ============================================================ KNOB STAGE ============================================================ */ .knob-stage { display: grid; grid-template-columns: 1fr auto 1fr; justify-items: center; align-items: center; gap: 26px; padding: 22px 8px 16px; background: radial-gradient(60% 70% at 50% 0%, rgba(155,92,255,0.06), transparent 70%), rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: inset 0 1px 0 var(--inner-hi); } .knob-flank { display: flex; flex-direction: column; gap: 12px; width: 96px; align-items: center; text-align: center; } .knob-flank.l { align-items: center; text-align: center; } .knob-flank.r { align-items: center; text-align: center; } .vu { display: flex; flex-direction: column-reverse; gap: 3px; width: 26px; height: 160px; padding: 6px 4px; background: var(--track-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.25); } .vu .seg { flex: 1; border-radius: 1px; background: rgba(128,128,150,0.18); } .vu .seg.on { background: var(--blue); box-shadow: 0 0 8px var(--blue); } .vu .seg.mid { background: var(--pink); box-shadow: 0 0 8px var(--pink); } .vu .seg.hot { background: var(--led-red); box-shadow: 0 0 8px rgba(255,90,77,0.55); } .vu-label { font: 500 10px/1 'Satoshi', sans-serif; letter-spacing: 0.18em; color: var(--mute); text-transform: uppercase; } .flank-stat { display: flex; flex-direction: column; font-family: 'Satoshi', sans-serif; } .flank-stat .v { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .flank-stat .l { font-size: 10px; color: var(--mute); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 3px; font-weight: 500; } .knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; } .knob-label { font: 700 11px/1 'Satoshi', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); } .knob-value { display: inline-flex; align-items: baseline; gap: 4px; font-family: 'Satoshi', sans-serif; } .knob-value .num { font-size: 44px; font-weight: 700; color: var(--text); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .knob-value .unit { font-size: 18px; color: var(--mute); letter-spacing: -0.02em; font-weight: 500; } .knob-recommend { font: 500 10px/1 'Satoshi', sans-serif; color: var(--blue); letter-spacing: 0.06em; text-align: center; margin-top: 2px; } /* Free lock overlay over the knob */ /* ── Beatif visual knob overlay ── */ .knob-lock-wrap { position: relative; display: inline-block; width: 140px; height: 140px; } #knobMount { position: absolute; inset: 0; opacity: 0; pointer-events: none; } body[data-mode="pro"] #knobMount { opacity: 1; pointer-events: auto; } body[data-mode="pro"] .bk-visual { display: none; } .bk-visual { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; } .bk-svg { width: 100%; height: 100%; overflow: visible; } /* dome light/dark switching — --bk-line set per-theme in :root blocks above */ .bk-dome--dark { display: none; } .bk-dome--light { display: block; } [data-theme="dark"] .bk-dome--light { display: none; } [data-theme="dark"] .bk-dome--dark { display: block; } /* arc glow/core */ .bk-arc-glow { filter: blur(1.4px); opacity: 0.55; } [data-theme="dark"] .bk-arc-glow { opacity: 0.7; } .bk-arc-core { filter: drop-shadow(0 0 0.8px rgba(255,255,255,0.5)); } [data-theme="dark"] .bk-arc-core { filter: drop-shadow(0 0 1.2px rgba(168,108,240,0.7)); } .bk-dot { filter: drop-shadow(0 0 1.2px rgba(255,77,157,0.9)); } .bk-tick { filter: drop-shadow(0 0 1.4px var(--bk-line)); } .knob-lock-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); backdrop-filter: blur(6px) saturate(1.3); -webkit-backdrop-filter: blur(6px) saturate(1.3); border: 1px solid var(--border-2); box-shadow: inset 0 1px 0 var(--inner-hi); pointer-events: none; z-index: 5; } .knob-lock-overlay svg { opacity: 0.85; stroke: var(--blue); } .knob-lock-overlay span { font: 700 9px/1.2 'Satoshi', sans-serif; margin-top: 5px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ WAVEFORM PANEL ============================================================ */ .wave-grid { display: grid; gap: 10px; } .wave { position: relative; background: var(--surface); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--border-2); border-radius: 14px; padding: 12px 14px 14px; box-shadow: inset 0 1px 0 var(--inner-hi), var(--shadow-sm); } .wave-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .wave-head .name { font: 500 11px/1 'Satoshi', sans-serif; letter-spacing: 0.08em; color: var(--dim); display: inline-flex; align-items: center; gap: 8px; } .wave-head .name .led { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); } .wave-head .name.on .led { background: var(--blue); box-shadow: 0 0 8px var(--blue); } .wave-head .name.result.on .led { background: var(--blue); box-shadow: 0 0 8px var(--blue); } .wave-head .time { font: 500 11px/1 'Satoshi', sans-serif; color: var(--mute); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } .wave svg { display: block; width: 100%; height: 60px; } .wave.empty { height: 80px; display: grid; place-items: center; color: var(--mute); font: 500 12px/1 'Satoshi', sans-serif; letter-spacing: 0.02em; } /* ============================================================ PROGRESS ============================================================ */ .progress { position: relative; height: 8px; background: var(--track-bg); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); } .progress > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #FF4D9D, #5AA9FF); box-shadow: 0 0 12px var(--blue-glow); border-radius: inherit; transition: width 0.3s ease; } .progress-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; font: 500 12px/1 'Satoshi', sans-serif; color: var(--dim); } /* ============================================================ ACTION ROW + PRIMARY BUTTON ============================================================ */ .action-row { display: flex; align-items: center; gap: 10px; } /* ── PRIMARY BUTTON (single source of truth — was overridden in vocal-cleaner.astro) purple glass system + per-theme variants + disabled btn-breathe ── */ @keyframes btn-breathe { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 22px -6px rgba(155,92,255,0.38); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 28px -5px rgba(255,77,157,0.46); } } .btn-primary { flex: 1; appearance: none; cursor: pointer; font: 700 16px/1 'Satoshi', sans-serif; letter-spacing: -0.01em; color: #ffffff; border-radius: 16px; padding: 18px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative; background: rgba(155, 92, 255, 0.18); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border: 1px solid rgba(155, 92, 255, 0.38); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.50), inset 0 -1px 0 rgba(100,30,200,0.20), 0 4px 22px -6px rgba(155,92,255,0.40); transition: transform 0.1s ease, box-shadow 0.18s ease, opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, filter 0.15s ease; } .btn-primary:hover:not(:disabled) { background: rgba(155, 92, 255, 0.28); border-color: rgba(155, 92, 255, 0.58); filter: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 10px 28px -6px rgba(255,77,157,0.52), 0 4px 14px -4px rgba(155,92,255,0.42); } .btn-primary:active:not(:disabled) { transform: translateY(1px); } .btn-primary:disabled { opacity: 1; cursor: default; background: rgba(155, 92, 255, 0.12); border-color: rgba(155, 92, 255, 0.28); animation: btn-breathe 3s ease-in-out infinite; } .btn-primary.is-busy { background: var(--surface-2); color: var(--mute); box-shadow: inset 0 1px 0 var(--inner-hi); animation: none; } .btn-primary .ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20); } .btn-primary.is-busy .ico { background: rgba(128,128,150,0.18); color: var(--mute); } /* light mode: soft default → vivid hover */ [data-theme="light"] .btn-primary { color: #ffffff; background: linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0.06)), linear-gradient(120deg, #FF4D9D, #7B5CFF, #5AA9FF); backdrop-filter: none; -webkit-backdrop-filter: none; border: none; filter: saturate(0.82) brightness(1.04); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.50), 0 4px 18px -6px rgba(255,77,157,0.32), 0 2px 6px -2px rgba(155,92,255,0.22); } [data-theme="light"] .btn-primary::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(120deg, #FF4D9D, #9B5CFF, #5AA9FF); z-index: -1; opacity: 0.75; } [data-theme="light"] .btn-primary:hover:not(:disabled)::after { opacity: 1.0; } [data-theme="light"] .btn-primary .ico { background: rgba(255,255,255,0.22); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.40); } [data-theme="light"] .btn-primary:disabled { filter: saturate(0.82) brightness(1.04); opacity: 1; } [data-theme="light"] .btn-primary:active:not(:disabled) { transform: translateY(1px); filter: saturate(1.0) brightness(0.97); box-shadow: inset 0 2px 4px rgba(100,20,160,0.22), 0 2px 8px -4px rgba(255,77,157,0.28); } [data-theme="light"] .btn-primary:hover:not(:disabled) { filter: saturate(1.15) brightness(1.06); transform: translateY(-2px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.52), 0 12px 30px -6px rgba(255,77,157,0.58), 0 4px 14px -2px rgba(155,92,255,0.42); } .btn-primary .sub { font: 500 10px/1.2 'Satoshi', sans-serif; opacity: 0.9; letter-spacing: 0.02em; display: block; margin-top: 2px; } /* WAV lock button (Free only) */ .btn-wav-lock { appearance: none; cursor: pointer; padding: 0 14px; height: 56px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-2); color: var(--blue); font: 700 12px/1 'Satoshi', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; flex-shrink: 0; box-shadow: inset 0 1px 0 var(--inner-hi); opacity: 0.8; transition: opacity 0.15s ease, border-color 0.15s ease; } .btn-wav-lock:hover { opacity: 1; border-color: rgba(90,169,255,0.5); } .btn-wav-lock .wav-lock-icon { font-size: 10px; opacity: 0.8; } /* Playback cluster */ .play-cluster { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .play-btn { appearance: none; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; background: var(--grad); border: none; color: #ffffff; display: grid; place-items: center; box-shadow: 0 6px 18px -4px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform 0.1s ease, box-shadow 0.15s ease; flex-shrink: 0; } .play-btn:hover { transform: scale(1.06); } .play-btn:active { transform: scale(0.95); } .play-btn.is-playing { box-shadow: 0 6px 22px -4px var(--pink-glow), inset 0 1px 0 rgba(255,255,255,0.3); } .ab-toggle { display: flex; gap: 3px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-pill); padding: 4px; box-shadow: inset 0 1px 0 var(--inner-hi); } .ab-t { appearance: none; cursor: pointer; border: none; font: 500 11px/1 'Satoshi', sans-serif; padding: 8px 14px; border-radius: var(--radius-pill); background: transparent; color: var(--dim); transition: color 0.12s, background 0.12s; } .ab-t.is-on { background: var(--surface-solid); color: var(--blue); box-shadow: var(--shadow-sm); } /* generic ghost button (legacy class) */ .btn-ghost { appearance: none; cursor: pointer; font: 500 13px/1 'Satoshi', sans-serif; color: var(--dim); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-pill); padding: 12px 16px; display: inline-flex; align-items: center; gap: 8px; transition: color 0.12s; } .btn-ghost:hover { color: var(--text); } .btn-ghost.is-on { color: #ffffff; background: var(--blue); border-color: var(--blue); box-shadow: 0 4px 14px var(--blue-glow); } /* ============================================================ STATS ============================================================ */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stat { background: var(--surface); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); border: 1px solid var(--border-2); border-radius: 14px; padding: 16px 18px; box-shadow: inset 0 1px 0 var(--inner-hi), var(--shadow-sm); position: relative; overflow: hidden; } .stat .lbl { font: 500 11px/1 'Satoshi', sans-serif; letter-spacing: 0.08em; color: var(--mute); text-transform: uppercase; } .stat .v { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; font-family: 'Satoshi', sans-serif; } .stat .v .n { font-size: 34px; font-weight: 700; color: var(--text); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .stat .v .u { font-size: 13px; color: var(--mute); letter-spacing: -0.01em; font-weight: 500; } .stat.dim { opacity: 0.4; } .stat .check { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(60% 50% at 30% 25%, rgba(255,255,255,0.55) 0%, transparent 70%), var(--grad); color: #ffffff; display: grid; place-items: center; box-shadow: 0 4px 12px -2px var(--pink-glow), inset 0 1px 0 rgba(255,255,255,0.4); margin-top: 6px; } /* ============================================================ PRO UPGRADE BANNER (.banner — JS uses #upsellBtn) ============================================================ */ .banner { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 20px 22px; background: radial-gradient(70% 120% at 0% 0%, rgba(255,77,157,0.10), transparent 60%), radial-gradient(70% 120% at 100% 100%, rgba(155,92,255,0.10), transparent 60%), rgba(255,255,255,0.03); border: 1px solid var(--border-2); border-radius: 18px; position: relative; overflow: hidden; box-shadow: inset 0 1px 0 var(--inner-hi), var(--shadow-sm); } .banner h3 { margin: 0; font: 700 17px/1.3 'Satoshi', sans-serif; letter-spacing: -0.02em; color: var(--text); } .banner p { margin: 6px 0 0; font: 400 13px/1.5 'Satoshi', sans-serif; color: var(--dim); letter-spacing: -0.005em; } .banner .price { font: 700 14px/1 'Satoshi', sans-serif; color: var(--pink); letter-spacing: -0.02em; margin-left: 6px; font-variant-numeric: tabular-nums; } .banner .cta { position: relative; z-index: 1; font: 700 14px/1 'Satoshi', sans-serif; letter-spacing: -0.01em; color: #ffffff; background: var(--grad); border: none; border-radius: var(--radius-pill); padding: 14px 22px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 20px -8px rgba(140,50,100,0.28); transition: transform 0.1s ease, box-shadow 0.18s ease; } .banner .cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 14px 28px -8px rgba(180,60,120,0.32); } .banner .cta:active { transform: translateY(1px); } /* ============================================================ PRO UPGRADE STRIP (NEW) — prominent gradient-border card ============================================================ */ .pro-upgrade-strip { border-radius: 18px; padding: 1.5px; /* gradient border ring */ background: var(--grad); box-shadow: 0 12px 34px -16px rgba(140,50,100,0.3), 0 12px 34px -16px rgba(60,110,200,0.26); } .pro-upgrade-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16.5px; background: rgba(255,255,255,0.04); position: relative; overflow: hidden; } .pro-upgrade-inner::after { content: ""; position: absolute; right: -30px; top: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(155,92,255,0.14), transparent 70%); pointer-events: none; } .pro-upgrade-label { font: 700 10px/1 'Satoshi', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; padding: 7px 11px; border-radius: 8px; background: var(--grad); box-shadow: 0 4px 12px -4px rgba(255,77,157,0.5); white-space: nowrap; } .pro-upgrade-text { margin: 0; font: 500 13.5px/1.4 'Satoshi', sans-serif; color: var(--text); letter-spacing: -0.005em; } .btn-upgrade-pro { position: relative; z-index: 1; font: 700 13px/1 'Satoshi', sans-serif; letter-spacing: -0.01em; color: #ffffff; text-decoration: none; background: var(--grad); border-radius: var(--radius-pill); padding: 13px 20px; display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 20px -8px rgba(140,50,100,0.28); transition: transform 0.1s ease, box-shadow 0.18s ease; white-space: nowrap; } .btn-upgrade-pro:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 14px 28px -8px rgba(180,60,120,0.32); } .btn-upgrade-pro:active { transform: translateY(1px); } /* ============================================================ PRO chain card (Free: noise/deess active, rest locked) ============================================================ */ .chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; background: var(--surface); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--border-2); border-radius: 14px; box-shadow: inset 0 1px 0 var(--inner-hi), var(--shadow-sm); scrollbar-width: none; } .chain::-webkit-scrollbar { display: none; } .chain-link { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--border); position: relative; flex: initial; min-width: 0; box-shadow: inset 0 1px 0 var(--inner-hi); cursor: pointer; transition: box-shadow 0.12s; } .chain-link:hover:not(.locked) { box-shadow: 0 0 0 1px rgba(90,169,255,0.45); } .chain-link.is-open { grid-column: 1 / -1; box-shadow: 0 0 0 1.5px var(--blue), 0 8px 22px -8px var(--blue-glow); } .chain-link .lbl { font: 700 10px/1 'Satoshi', sans-serif; letter-spacing: 0.04em; color: var(--dim); display: flex; align-items: center; justify-content: space-between; } .chain-link .lbl b { color: var(--text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chain-link .pct { color: var(--blue); font-variant-numeric: tabular-nums; } .chain-link .pct[data-tone="warn"] { color: #E0A23A; } .chain-link .pct[data-tone="over"] { color: var(--led-red); } .chain-link .meter { position: relative; height: 5px; background: var(--track-bg); border-radius: 999px; overflow: visible; } /* 게이지 막대 드래그 핸들(동그라미) — 라이트/다크 테마 변수 대응 */ .chain-link .meter > b.meter-thumb { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--bg-2); border: 2px solid #9B5CFF; box-shadow: 0 1px 4px rgba(0,0,0,0.28), 0 0 6px var(--blue-glow); cursor: ew-resize; z-index: 2; transition: left 0.25s ease; } .chain-link.locked .meter > b.meter-thumb { display: none; } .chain-link .meter > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #FF4D9D, #5AA9FF); box-shadow: 0 0 6px var(--blue-glow); border-radius: inherit; transition: width 0.25s ease; } .chain-metric { font: 500 9px/1.2 'Satoshi', sans-serif; color: var(--blue); margin: 2px 0 0; letter-spacing: 0.02em; } .chain-metric[data-tone="warn"] { color: #E0A23A; } .chain-metric[data-tone="over"] { color: var(--led-red); font-weight: 700; } .chain-arrow { display: none; } .chain-link .fader-inline { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .chain-link.is-open .fader-inline { display: block; } .chain-link.locked { cursor: default; opacity: 0.6; position: relative; } .chain-link.locked::after { content: ''; position: absolute; inset: 0; border-radius: 10px; background: var(--surface-2); backdrop-filter: blur(1px); z-index: 1; } .chain-link .lock-badge { position: absolute; top: 6px; right: 8px; font: 700 9px/1 'Satoshi', sans-serif; letter-spacing: 0.06em; z-index: 2; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ PRO detail accordion + faders (legacy classes) ============================================================ */ .detail-toggle { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-2); border-radius: 14px; cursor: pointer; font: 500 13px/1 'Satoshi', sans-serif; color: var(--text); box-shadow: inset 0 1px 0 var(--inner-hi); } .detail-toggle .left { display: inline-flex; align-items: center; gap: 10px; } .detail-toggle .lbl-mono { font: 700 11px/1 'Satoshi', sans-serif; letter-spacing: 0.04em; color: var(--blue); background: var(--blue-bg); padding: 5px 8px; border-radius: 6px; } .detail-toggle .chev { color: var(--mute); transition: transform 0.15s ease; } .detail-toggle.open .chev { transform: rotate(180deg); } .detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; } .fader { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: inset 0 1px 0 var(--inner-hi); } .fader .row { display: flex; align-items: baseline; justify-content: space-between; } .fader .name { font: 700 11px/1 'Satoshi', sans-serif; color: var(--dim); } .fader .v { font: 700 14px/1 'Satoshi', sans-serif; color: var(--blue); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .fader .track { position: relative; height: 8px; background: var(--track-bg); border-radius: 999px; cursor: pointer; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); } .fader .track > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #FF4D9D, #5AA9FF); box-shadow: 0 0 6px var(--blue-glow); border-radius: inherit; } .fader .track > b { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; background: var(--surface-solid); box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 var(--inner-hi), 0 0 0 1px rgba(90,169,255,0.2); } /* ============================================================ STATE SWITCHER / FOOTER / AB-LABELS ============================================================ */ .state-switcher { display: flex; gap: 2px; align-self: center; padding: 4px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 999px; margin-top: -4px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 var(--inner-hi); } .state-chip { appearance: none; cursor: pointer; font: 500 11px/1 'Satoshi', sans-serif; padding: 7px 12px; background: transparent; color: var(--mute); border: none; border-radius: 999px; transition: color 0.12s, background 0.12s; } .state-chip.is-on { background: var(--surface-solid); color: var(--blue); box-shadow: var(--shadow-sm); } .fp-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; font: 500 11px/1.4 'Satoshi', sans-serif; letter-spacing: 0.04em; color: var(--mute); } .fp-foot a { color: inherit; } .ab-labels { display: flex; justify-content: flex-end; gap: 8px; font: 700 10px/1 'Satoshi', sans-serif; color: var(--mute); margin-top: -8px; } /* ============================================================ Knob SVG generic classes (JS-rendered) ============================================================ */ .knob { position: relative; display: inline-block; } .knob-svg { display: block; } .knob-svg .label-mark { fill: var(--mute); font: 500 10px 'Satoshi', sans-serif; letter-spacing: 0.04em; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 720px) { .fp-title h1 { font-size: 30px; } .knob-stage { grid-template-columns: 1fr; } .knob-flank.l, .knob-flank.r { flex-direction: row; align-items: center; justify-content: center; gap: 18px; text-align: left; } .vu { width: 120px; height: 14px; flex-direction: row; } .stats { grid-template-columns: 1fr; } .detail-grid { grid-template-columns: 1fr 1fr; } .pro-upgrade-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 12px; } .pro-upgrade-text { order: 2; } .btn-upgrade-pro { order: 3; } }