/* ============================================================================= public_html/samples/samples.css — member mic-sample library Dark-aware (data-theme on ); dhrme sky-blue + sunny-yellow accents. ========================================================================== */ :root{ --s-bg:#f1f5f9; --s-surface:#ffffff; --s-surface2:#f8fafc; --s-border:#e2e8f0; --s-ink:#0f172a; --s-muted:#64748b; --s-accent:#1786ff; --s-accent-ink:#ffffff; --s-accent-soft:#e6f1fb; --s-accent-text:#0c447c; --s-amber:#f5a623; --s-amber-soft:#fdf0d5; --s-amber-text:#854f0b; --s-radius:12px; --s-radius-sm:8px; } :root[data-theme="dark"]{ --s-bg:#0b1220; --s-surface:#111c2e; --s-surface2:#0f1828; --s-border:#27374d; --s-ink:#e7eef7; --s-muted:#93a4ba; --s-accent:#4d9bff; --s-accent-ink:#06121f; --s-accent-soft:#15263d; --s-accent-text:#9fc6ff; --s-amber:#f5b855; --s-amber-soft:#3a2a12; --s-amber-text:#f3cf94; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--s-bg);color:var(--s-ink);min-height:100vh;line-height:1.55} a{color:var(--s-accent);text-decoration:none} h1{font-size:1.4rem;margin:0 0 4px} .muted{color:var(--s-muted)} /* top bar */ .s-top{display:flex;align-items:center;gap:18px;padding:12px 20px;background:var(--s-surface);border-bottom:1px solid var(--s-border);position:sticky;top:0;z-index:50} .s-brand{font-weight:800;font-size:1.05rem;letter-spacing:-.01em;color:var(--s-ink)} .s-brand .dot{color:var(--s-accent)} .s-brand-sub{font-weight:600;color:var(--s-muted)} .s-nav{display:flex;gap:6px} .s-nav a{padding:6px 12px;border-radius:20px;color:var(--s-muted);font-weight:600;font-size:.9rem} .s-nav a.on,.s-nav a:hover{background:var(--s-accent-soft);color:var(--s-accent-text)} .s-top-right{margin-left:auto;display:flex;align-items:center;gap:12px} .s-tier{background:var(--s-amber-soft);color:var(--s-amber-text);padding:3px 11px;border-radius:18px;font-size:.78rem;font-weight:700} .s-link{color:var(--s-muted);font-size:.85rem} .s-theme{background:var(--s-surface2);border:1px solid var(--s-border);border-radius:18px;width:34px;height:30px;cursor:pointer;font-size:.95rem} .s-wrap{max-width:1040px;margin:0 auto;padding:24px 20px 80px} .s-head{margin-bottom:18px} /* gate */ .s-gate{min-height:70vh;display:flex;align-items:center;justify-content:center} .s-gate-card{background:var(--s-surface);border:1px solid var(--s-border);border-radius:16px;padding:34px 30px;max-width:560px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.05)} .s-lock{font-size:1.8rem;margin-bottom:8px} .s-gate-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left;margin-top:20px} .s-gate-opt{border:1px solid var(--s-border);border-radius:12px;padding:16px} .s-gate-h{font-weight:700;margin-bottom:4px} .s-gate-opt p{font-size:.85rem;margin:0 0 12px} .s-code-row{display:flex;gap:8px} .s-code-row input{flex:1} .s-fine{font-size:.78rem;color:var(--s-muted);margin-top:18px} .s-note{padding:9px 12px;border-radius:9px;font-size:.85rem;margin:14px 0;text-align:left} .s-note.err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b} .s-note.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46} :root[data-theme="dark"] .s-note.err{background:#3a1a1a;border-color:#7f1d1d;color:#fca5a5} :root[data-theme="dark"] .s-note.ok{background:#10291f;border-color:#15543c;color:#86efac} /* inputs + buttons */ input[type=text],input[type=search],select{padding:9px 12px;border:1px solid var(--s-border);border-radius:9px;background:var(--s-surface);color:var(--s-ink);font-size:.92rem;width:100%} input:focus,select:focus{outline:none;border-color:var(--s-accent);box-shadow:0 0 0 3px var(--s-accent-soft)} .s-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:9px;border:1px solid var(--s-accent);background:var(--s-accent);color:var(--s-accent-ink);font-weight:700;font-size:.9rem;cursor:pointer;white-space:nowrap} .s-btn:hover{filter:brightness(1.05);text-decoration:none} .s-btn-ghost{background:transparent;color:var(--s-accent);} .s-btn-patreon{width:100%;background:#000;border-color:#000;color:#fff} .s-btn-disabled,.s-btn[disabled]{background:var(--s-surface2);border-color:var(--s-border);color:var(--s-muted);cursor:not-allowed;width:100%} /* toolbar */ .s-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px} .s-search{flex:1;min-width:200px} .s-filter{display:inline-flex;border:1px solid var(--s-border);border-radius:9px;overflow:hidden} .s-filter button{padding:8px 14px;border:0;background:var(--s-surface);color:var(--s-muted);font-weight:600;font-size:.85rem;cursor:pointer} .s-filter button.on{background:var(--s-accent-soft);color:var(--s-accent-text)} /* grid */ .s-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px} .s-card{background:var(--s-surface);border:1px solid var(--s-border);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .12s,transform .12s} .s-card:hover{border-color:var(--s-accent);transform:translateY(-1px)} .s-card-thumb{aspect-ratio:16/9;background:#042c53;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.6rem} .s-card-body{padding:10px 12px} .s-card-name{font-weight:700;font-size:.92rem;margin-bottom:2px} .s-card-meta{font-size:.78rem;color:var(--s-muted)} .s-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px} .s-chip{font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:10px;background:var(--s-surface2);color:var(--s-muted);border:1px solid var(--s-border)} .s-empty{grid-column:1/-1;text-align:center;color:var(--s-muted);padding:50px 0} /* segmented controls */ .s-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:14px} .s-seg{display:inline-flex;border:1px solid var(--s-border);border-radius:9px;overflow:hidden} .s-seg button{padding:7px 14px;border:0;border-right:1px solid var(--s-border);background:var(--s-surface);color:var(--s-muted);font-weight:600;font-size:.85rem;cursor:pointer} .s-seg button:last-child{border-right:0} .s-seg button.on{background:var(--s-accent-soft);color:var(--s-accent-text)} .s-seg button[disabled]{opacity:.4;cursor:not-allowed} /* single player */ .s-player{background:var(--s-surface);border:1px solid var(--s-border);border-radius:14px;padding:18px;margin-top:20px} .s-player-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px} .s-player-title{font-weight:800;font-size:1.05rem} .s-x{background:transparent;border:0;font-size:1.1rem;cursor:pointer;color:var(--s-muted)} .s-stage video{width:100%;max-width:640px;max-height:min(56vh,480px);object-fit:contain;margin:0 auto;border-radius:10px;background:#000;display:block} .s-stage audio{width:100%;display:block} .s-stage .s-wave-wrap{margin-top:10px} .s-verpick{display:flex;align-items:center;gap:6px;margin-bottom:10px} .s-verpick select{width:auto;min-width:170px} /* waveform */ .s-wave{display:flex;align-items:center;gap:0;height:60px;width:100%;max-width:100%;overflow:hidden} .s-wave span{flex:1 1 0;min-width:0;border-radius:1px;background:var(--s-border)} .s-wave span.on{background:var(--s-accent)} /* compare */ .s-cmp{background:var(--s-surface);border:1px solid var(--s-border);border-radius:14px;padding:18px} .s-step-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--s-muted);margin:6px 0 8px;font-weight:700} .s-cmp-pickers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px} .s-pick{display:flex;align-items:center;gap:8px} .s-badge{width:22px;height:22px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex:none} .s-badge-a{background:#042c53}.s-badge-b{background:#993c1d} .s-cmp-stage{display:grid;grid-template-columns:1fr 1fr;gap:12px} .s-cmp-cell{border:1px solid var(--s-border);border-radius:10px;padding:10px;min-width:0} .s-cmp-cell video{height:min(46vh,340px);width:auto;max-width:100%;object-fit:contain;margin:0 auto;border-radius:8px;background:#000;display:block} .s-cmp-cell audio{width:100%;border-radius:8px;background:#000;display:block} .s-cmp-cell.hearing{border-color:var(--s-accent)} .s-cell-h{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:.82rem;font-weight:700} .s-aud{margin-left:auto;font-size:.72rem;font-weight:700} .s-aud.on{color:var(--s-accent-text)} .s-aud.off{color:var(--s-muted)} .s-ref-cell{margin-top:12px;border:1px dashed var(--s-border);border-radius:10px;padding:10px;display:flex;align-items:center;gap:10px} .s-ref-cell .s-wave{height:30px} /* transport */ .s-transport{display:flex;align-items:center;gap:12px;background:var(--s-surface2);border:1px solid var(--s-border);border-radius:10px;padding:10px 12px;margin-top:14px} .s-play{width:38px;height:38px;border-radius:50%;border:1px solid var(--s-accent);background:var(--s-accent);color:var(--s-accent-ink);font-size:.9rem;cursor:pointer;flex:none} .s-time{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--s-muted);white-space:nowrap} .s-scrub{flex:1;height:6px;border-radius:3px;background:var(--s-border);cursor:pointer;position:relative;min-width:60px} .s-scrub-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--s-accent);border-radius:3px} .s-hear{margin-left:auto} .s-hear button{padding:7px 16px;font-weight:800} @media(max-width:640px){ .s-gate-grid,.s-cmp-pickers,.s-cmp-stage{grid-template-columns:1fr} .s-nav a{padding:6px 9px} .s-wrap{padding:16px 14px 70px} }