/* © 2026 Wayne Cavanagh / Flaux. All rights reserved. */ :root { --bg: #050a0a; --card: #0f1c1c; --card-hi: #16292a; --border: #1f3333; --text: #f0fdfa; --muted: #94a3b8; --teal: #14b8a6; --teal-deep: #0d9488; --teal-bright: #2dd4bf; --work: #14b8a6; --rest: #ef4444; --warmup: #0d9488; --accent: #14b8a6; --accent-b:#fbbf24; --whole: #f59e0b; --upper: #22d3ee; --lower: #10b981; --core: #f43f5e; --stretching: #a855f7; --grad-primary: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); --glow-teal: 0 6px 22px rgba(20,184,166,0.25); /* User-adjustable exercise text size (the Text A A A control). */ --ex-scale: 1; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } html, body { height: 100%; overflow: hidden; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } /* THE SCROLL CONTAINER Everything scrolls in here rather than in the document. This was introduced while chasing an iPad scrolling fault that turned out to be a stuck touch state on the device, cleared by restarting it, and nothing to do with this code. It is kept because it works and is well tested, but it is not load-bearing: reverting to document scrolling would also be fine, and would let Safari's toolbar auto-hide on a phone. On an iPad the toolbar is always visible anyway, and from the home screen there is none. */ #scroller { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding: env(safe-area-inset-top, 0.75rem) 0.75rem env(safe-area-inset-bottom, 1rem); /* Text is not selectable anywhere in the app except in the two input fields. Nothing here is prose to be copied, and a long press landing on a heading mid-workout should not pop a selection handle over the timer. */ -webkit-user-select: none; user-select: none; /* The other half of the same long press: no callout menu either. */ -webkit-touch-callout: none; } /* The two places selecting and editing text is the whole point. */ #scroller input, #scroller textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* The ambient background lives on its own fixed, composited layer. It used to be a `background-attachment: fixed` gradient on , which iOS Safari cannot composite: it repaints the whole gradient on every scroll frame. That is what made scrolling stutter on the iPad. As a fixed pseudo-element the compositor handles it once and leaves it alone. */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(1200px 600px at 20% -10%, rgba(20,184,166,0.10), transparent 60%), radial-gradient(900px 500px at 90% 110%, rgba(13,148,136,0.08), transparent 60%); } /* Phase colour wash. The gradient is written once when a phase starts and only its opacity animates, because opacity is composited on the GPU. Previously this transitioned `background-image` on the whole view, which browsers cannot interpolate anyway, and a 60px-blur `box-shadow` on the timer card, which forces a large repaint every frame for the entire length of the phase. */ #phaseBleed { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; will-change: opacity; } /* Bottom edge fade, shown only while there is more page below. */ #scrollHint { position: fixed; left: 0; right: 0; bottom: 0; height: 3.25rem; /* Below the sticky Build button, which already occupies this strip on the setup screen. */ z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; background: linear-gradient(to top, rgba(5,10,10,0.92), rgba(5,10,10,0.45) 55%, transparent); } body.can-scroll #scrollHint { opacity: 1; } .app { max-width: 1100px; margin: 0 auto; } .view { display: none; flex-direction: column; gap: 0.85rem; } .view.active { display: flex; } #workoutView.active { background-color: var(--bg); } button { background: var(--grad-primary); color: #fff; border: none; padding: 1rem; font-size: 1.15rem; font-weight: 800; border-radius: 1rem; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; box-shadow: var(--glow-teal), inset 0 1px 0 rgba(255,255,255,0.12); } /* The large tap surfaces are divs with role="button", not