/* base.css — tokens, reset, app shell, header, tab bar, bottom sheet, toasts. Everything themeable is a custom property. Dark only, by design: this is a stage instrument, not a document. */ :root { --bg: #0d0f12; --card: #15181d; --border: #242830; --text: #e4e6ea; --sub: #8a909c; --accent: #7c8cff; --ok: #4ade80; --rec: #ff5f56; --warn: #fbbf24; --r: 12px; --r-sm: 8px; --gap: 8px; --pad-color: var(--accent); /* Vertical rhythm. Kept separate from --gap so a density pass is one edit: horizontal breathing room and vertical breathing room are not the same problem on a phone. */ --gap-y: 6px; --fs-xs: 0.72rem; --fs-sm: 0.78rem; --fs-md: 0.9rem; --fs-lg: 1.05rem; --hit: 48px; --hit-sm: 44px; --hdr-h: 56px; --tabs-h: 56px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color-scheme: dark; } /* --- reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Our class rules set `display`, which beats the UA [hidden] rule — without this, `node.hidden = true` would silently do nothing on half the app. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; } html { background: var(--bg); -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font: 400 var(--fs-md) / 1.35 var(--font); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; } /* A sheet owns the screen; the shell behind it must not scroll. Deliberately no `touch-action: none` here — touch-action is evaluated up the ancestor chain, so putting it on would also kill scrolling inside the sheet itself. */ body.is-locked { overflow: hidden; } h1, h2, h3, p { margin: 0; } button, input { font: inherit; color: inherit; } button { margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } canvas { display: block; } .muted, .sub { color: var(--sub); font-size: var(--fs-sm); } .hint { font-size: var(--fs-xs); } .row { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; } .row-between { justify-content: space-between; flex-wrap: nowrap; } .noscript { padding: 24px; color: var(--text); } /* A `.sub` paragraph in a stack of them is a caption block, not prose. */ p.sub { line-height: 1.3; } p.sub + p.sub { margin-top: 2px; } /* --- shell -------------------------------------------------------------- */ .app { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100dvh; padding-left: var(--safe-l); padding-right: var(--safe-r); } .view { position: relative; min-height: 0; overflow: hidden; } .view-host { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: var(--gap-y) var(--gap); } /* The instrument never scrolls — a stray drag must not move the grid. */ .view-host[data-view='pads'] { overflow: hidden; padding: 0; display: flex; flex-direction: column; } .view-loading { display: flex; align-items: center; justify-content: center; padding: 32px; } .view-error { padding: 24px; text-align: center; } /* --- header ------------------------------------------------------------- */ /* One line, 56 px: [kit chip] ......... [play] [bpm] [meter] [dots]. The kit name used to be a full-width row of its own, which cost a whole band of screen for a label you read once a session. */ .hdr { display: flex; align-items: center; gap: 6px; min-height: calc(var(--hdr-h) + var(--safe-t)); padding: calc(var(--safe-t) + 6px) 8px 6px; background: var(--card); border-bottom: 1px solid var(--border); } /* Compact chip that truncates. 44 px tall, never wider than ~40% of the bar, so the transport always has room on the same line. */ /* .btn is in a later stylesheet, so the compact height needs the extra class to beat its 48 px floor. */ .btn.hdr-kit { flex: 0 1 auto; min-width: 0; max-width: 40%; min-height: var(--hit-sm); height: var(--hit-sm); padding: 0 10px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--border); justify-content: flex-start; font-size: var(--fs-sm); font-weight: 600; } .hdr-kit .btn-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* margin-left:auto is the whole rebalance: the chip stays its own size and everything else hugs the right edge. */ .hdr-mid { margin-left: auto; } .hdr-mid, .hdr-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .hdr-play { width: var(--hit-sm); height: var(--hit-sm); border-radius: 50%; background: var(--border); color: var(--text); display: grid; place-items: center; transition: background-color 120ms ease; } .hdr-play svg { fill: currentColor; } .hdr-play.is-playing { background: var(--accent); color: #0d0f12; } .hdr-bpm { display: flex; flex-direction: column; line-height: 1.05; min-width: 30px; } .hdr-bpm-val { font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; } .hdr-bpm-unit { font-size: 0.58rem; color: var(--sub); letter-spacing: 0.04em; } .hdr-meter { width: 40px; height: 6px; } /* Pad-record mode toggle. Same size and shape as the transport button — it is the other thing you reach for without looking. */ .hdr-mic { width: var(--hit-sm); height: var(--hit-sm); border-radius: 50%; background: var(--border); color: var(--text); display: grid; place-items: center; flex: 0 0 auto; transition: background-color 120ms ease; } .hdr-mic svg { fill: currentColor; } .hdr-mic.is-on { background: var(--rec); color: #12080a; } /* A live microphone is worth noticing from across a room. */ .hdr-mic.is-on { animation: mic-live 1.6s ease-in-out infinite; } @keyframes mic-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 95, 86, 0.55); } 60% { box-shadow: 0 0 0 7px rgba(255, 95, 86, 0); } } @media (prefers-reduced-motion: reduce) { .hdr-mic.is-on { animation: none; } } .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sub); flex: 0 0 auto; padding: 0; } .dot-sync.is-ok { background: var(--ok); } .dot-sync.is-saving { background: var(--warn); } .dot-sync.is-off { background: var(--rec); } .dot-jam { width: 14px; height: 14px; background: var(--border); border: 2px solid var(--sub); } .dot-jam.is-ok { background: var(--accent); border-color: var(--accent); } /* --- tab bar ------------------------------------------------------------ */ .tabs { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 1px solid var(--border); padding-bottom: var(--safe-b); } .tab { min-height: var(--hit); padding: 4px 2px; gap: 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--sub); transition: color 120ms ease; } .tab-icon { display: block; height: 21px; } .tab-icon svg { height: 21px; width: 21px; } .tab-icon svg { display: block; fill: currentColor; } .tab-label { font-size: 0.62rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab.is-on { color: var(--accent); } .tab.is-pressed { background: rgba(255, 255, 255, 0.04); } /* --- unlock overlay ----------------------------------------------------- */ .unlock { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--bg); text-align: center; padding: 24px; touch-action: none; transition: opacity 200ms ease; } .unlock.is-gone { opacity: 0; pointer-events: none; } .unlock-inner { max-width: 22rem; } .unlock-title { font-size: 1.6rem; font-weight: 700; } .unlock-hint { margin-top: 12px; font-size: var(--fs-lg); color: var(--accent); } .unlock-note { margin-top: 10px; font-size: var(--fs-sm); color: var(--sub); } /* Sits above the shell but never replaces it — the app stays usable. */ .boot-error { position: fixed; left: 8px; right: 8px; z-index: 55; bottom: calc(var(--tabs-h) + var(--safe-b) + 8px); background: var(--card); border: 1px solid var(--rec); border-radius: var(--r); padding: 12px; display: flex; gap: var(--gap); align-items: center; justify-content: space-between; } .boot-error-msg { font-size: var(--fs-sm); } /* --- sections ----------------------------------------------------------- */ /* Vertical padding and gaps are ~30% tighter than the first pass: on a 360x640 screen the old rhythm fitted about two controls per screenful. */ .sec { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 7px 10px; margin-bottom: var(--gap-y); } .sec:last-child { margin-bottom: 0; } .sec-flat { background: none; border: 0; padding: 0; } .sec-title, .section-title { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sub); margin-bottom: 5px; } .section-title { margin: 0 0 5px; padding: 0 2px; } /* --- bottom sheet ------------------------------------------------------- */ .sheet { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; justify-content: flex-end; } .sheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 180ms ease; } .sheet.is-open .sheet-back { opacity: 1; } .sheet.is-closing .sheet-back { opacity: 0; } .sheet-panel { position: relative; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; max-height: 88dvh; padding-bottom: var(--safe-b); transform: translateY(100%); transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); } .sheet.is-open .sheet-panel { transform: translateY(0); } .sheet.is-closing .sheet-panel { transform: translateY(100%); } /* Swipe-to-dismiss lives on the header only, so scrolling the body can never turn into an accidental dismissal. */ .sheet-head { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: var(--gap); padding: 12px 6px 6px 12px; touch-action: none; border-bottom: 1px solid var(--border); } .sheet-grab { position: absolute; top: 6px; left: 50%; margin-left: -19px; width: 38px; height: 4px; border-radius: 2px; background: var(--border); } .sheet-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-lg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sheet-x { flex: 0 0 auto; width: var(--hit); height: var(--hit); padding: 0; justify-content: center; } .sheet-body { flex: 1 1 auto; min-height: 0; padding: 8px 10px 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* --- toasts ------------------------------------------------------------- */ .toasts { position: fixed; left: 8px; right: 8px; z-index: 90; bottom: calc(var(--tabs-h) + var(--safe-b) + 10px); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; } .toast { pointer-events: auto; max-width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 14px; font-size: var(--fs-sm); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); transition: opacity 180ms ease, transform 180ms ease; } .toast-ok { border-color: var(--ok); } .toast-err { border-color: var(--rec); } .toast.is-out { opacity: 0; transform: translateY(6px); } /* --- reduced motion: decorative only. The meter fill and knob indicator are transforms that carry information, so they stay. --------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; } .sheet-panel, .sheet.is-open .sheet-panel, .sheet.is-closing .sheet-panel { transform: none !important; } .pad.is-hit, .btn.is-pressed, .toast.is-out { transform: none !important; } }