/* ============================================================ Flowdeeper — visual design language Dark, minimal, premium, calm. Near-black ground, glass surfaces, one accent that re-tints per mode. ============================================================ */ /* --- Accent as a registered property so gradients, strokes and shadows all cross-fade smoothly when the mode changes. --- */ @property --accent { syntax: ""; inherits: true; initial-value: #e8a15c; } :root { color-scheme: dark; /* ground + ink */ --bg: #0a0c10; --ink: #e8eaf0; --ink-dim: rgba(232, 234, 240, 0.55); --ink-faint: rgba(232, 234, 240, 0.28); /* accent (mode-themed on ) */ --accent: #e8a15c; /* glass surfaces */ --glass-bg: rgba(232, 234, 240, 0.045); --glass-bg-strong: rgba(232, 234, 240, 0.09); --glass-border: rgba(232, 234, 240, 0.1); --glass-border-strong: rgba(232, 234, 240, 0.18); --blur: 18px; /* radii */ --r-pill: 999px; --r-md: 18px; /* spacing rhythm */ --sp-1: 0.375rem; --sp-2: 0.75rem; --sp-3: 1.25rem; --sp-4: 2rem; --sp-5: 3.25rem; /* motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 300ms; --t-slow: 600ms; /* type details */ --track-wide: 0.22em; --track-hair: 0.06em; /* progress ring geometry: 2 * pi * 45 */ --ring-circ: 282.743; } /* ------------------------------------------------------------ Reset / ground ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; -webkit-text-size-adjust: 100%; } body { min-height: 100dvh; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: -apple-system, "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif; font-size: 1rem; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; /* mode accent cross-fade */ transition: --accent 900ms var(--ease); } /* Mode theming — every accent-colored thing reads var(--accent). */ body[data-mode="focus"] { --accent: #e8a15c; } body[data-mode="relax"] { --accent: #8f9fe8; } body[data-mode="breathe"] { --accent: #5cc8b8; } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); } .hidden { display: none !important; } /* Shared focus treatment — visible, calm, accent-tinted. */ :focus { outline: none; } :focus-visible { outline: 1.5px solid color-mix(in srgb, var(--accent) 75%, transparent); outline-offset: 3px; border-radius: var(--r-pill); } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; } /* ------------------------------------------------------------ Canvas atmosphere ------------------------------------------------------------ */ #canvas-bg { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 0; pointer-events: none; } /* ------------------------------------------------------------ App column ------------------------------------------------------------ */ #app { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-height: 100dvh; width: 100%; max-width: 42rem; margin: 0 auto; padding-top: calc(var(--sp-4) + env(safe-area-inset-top)); padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); padding-left: calc(var(--sp-3) + env(safe-area-inset-left)); padding-right: calc(var(--sp-3) + env(safe-area-inset-right)); } /* ------------------------------------------------------------ Header — wordmark + status line ------------------------------------------------------------ */ #app header { text-align: center; transition: opacity var(--t-slow) var(--ease); } #app header h1 { font-size: 0.95rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5em; /* re-centre optically: trailing tracking space */ margin-right: -0.5em; color: var(--ink); } #status-text { margin-top: var(--sp-1); font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-wide); margin-right: calc(-1 * var(--track-wide)); color: var(--ink-dim); transition: color var(--t-slow) var(--ease); } /* ------------------------------------------------------------ Mode switch — glass segmented pill ------------------------------------------------------------ */ #mode-switch { display: flex; gap: var(--sp-1); margin-top: var(--sp-4); padding: var(--sp-1); border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); transition: opacity var(--t-slow) var(--ease); } .mode-btn { min-height: 44px; padding: 0.55rem 1.15rem; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-hair); color: var(--ink-dim); border: 1px solid transparent; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-slow) var(--ease); } .mode-btn[aria-pressed="true"] { color: var(--ink); background: var(--glass-bg-strong); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 0 12px color-mix(in srgb, var(--accent) 8%, transparent); } @media (hover: hover) { .mode-btn:hover { color: var(--ink); } } /* ------------------------------------------------------------ Stage — ring, play button, timer ------------------------------------------------------------ */ #stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 auto; width: 100%; padding: var(--sp-4) 0; } /* Soft radial glow breathing behind the ring. */ #stage::before { content: ""; position: absolute; top: 50%; left: 50%; width: min(140vw, 640px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient( circle, color-mix(in srgb, var(--accent) 11%, transparent) 0%, color-mix(in srgb, var(--accent) 4%, transparent) 38%, transparent 68% ); pointer-events: none; z-index: -1; animation: stage-glow 9s var(--ease) infinite alternate; } @keyframes stage-glow { from { opacity: 0.7; scale: 0.96; } to { opacity: 1; scale: 1.04; } } /* Positioning context for the play button — shrink-wraps to the ring, so the button centers on the ring, not the whole stage. */ .ring-wrap { position: relative; } #progress-ring { position: relative; width: min(62vw, 320px); height: min(62vw, 320px); display: block; overflow: visible; } .ring-track { fill: none; stroke: rgba(232, 234, 240, 0.08); stroke-width: 1.6; } #ring-fill { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: var(--ring-circ); stroke-dashoffset: var(--ring-circ); transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; transition: stroke 900ms var(--ease); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); } /* Play / pause — large circular glass button centered in the ring (absolute within .ring-wrap). */ #play-btn { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); color: var(--ink); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(232, 234, 240, 0.09), 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease); } #play-btn svg { width: 30px; height: 30px; display: block; fill: currentColor; stroke: none; /* optical centering for the play triangle */ translate: 1px 0; } #play-btn svg path { fill: currentColor; } @media (hover: hover) { #play-btn:hover { transform: scale(1.045); border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-border-strong)); box-shadow: 0 12px 46px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(232, 234, 240, 0.11), 0 0 34px color-mix(in srgb, var(--accent) 22%, transparent); } } #play-btn:active { transform: scale(0.965); transition-duration: 120ms; } body.playing #play-btn { border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-border-strong)); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(232, 234, 240, 0.09), 0 0 30px color-mix(in srgb, var(--accent) 18%, transparent); } /* When paused, the pause glyph is centered — undo the play nudge. */ body.playing #play-btn svg { translate: 0 0; } #timer-display { margin-top: var(--sp-3); font-size: 1.5rem; font-weight: 300; letter-spacing: 0.12em; margin-right: -0.12em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--ink-dim); transition: color var(--t-slow) var(--ease); } body.playing #timer-display { color: var(--ink); } /* ------------------------------------------------------------ Breath overlay — full-screen veil + guided circle ------------------------------------------------------------ */ #breath-overlay { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); padding: var(--sp-4); padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); animation: veil-in 700ms var(--ease) both; /* purely presentational — let taps reach the controls beneath */ pointer-events: none; } @keyframes veil-in { from { opacity: 0; } to { opacity: 1; } } #breath-circle { --breath-scale: 0.6; width: min(56vw, 280px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient( circle at 50% 42%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, color-mix(in srgb, var(--accent) 9%, transparent) 55%, transparent 74% ); border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 26%, transparent), 0 0 140px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 0 44px color-mix(in srgb, var(--accent) 14%, transparent); transform: scale(var(--breath-scale, 0.6)); transition: transform var(--breath-dur, 4s) cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } #breath-label { min-height: 1.5em; font-size: 0.8125rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.34em; margin-right: -0.34em; text-align: center; color: var(--ink-dim); } /* ------------------------------------------------------------ Footer controls — duration + texture ------------------------------------------------------------ */ #controls { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 100%; max-width: 22rem; margin-top: auto; transition: opacity var(--t-slow) var(--ease); } #timer-select { display: flex; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); } .timer-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 60px; min-height: 48px; padding: 0.4rem 1rem; border-radius: var(--r-pill); border: 1px solid transparent; color: var(--ink-dim); font-size: 1.0625rem; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.1; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-slow) var(--ease); } /* the small "min" caption inside each duration button */ .timer-btn small, .timer-btn span { font-size: 0.5625rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-wide); margin-right: calc(-1 * var(--track-wide)); color: var(--ink-faint); transition: color var(--t-fast) var(--ease); } .timer-btn[aria-pressed="true"] { color: var(--ink); background: var(--glass-bg-strong); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 18%, transparent); } .timer-btn[aria-pressed="true"] small, .timer-btn[aria-pressed="true"] span { color: color-mix(in srgb, var(--accent) 80%, var(--ink)); } @media (hover: hover) { .timer-btn:hover { color: var(--ink); } } /* Texture (intensity) slider */ #controls label { display: flex; align-items: center; gap: var(--sp-2); width: 100%; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--ink-dim); cursor: pointer; } #intensity { -webkit-appearance: none; appearance: none; flex: 1 1 auto; height: 28px; /* generous touch target */ background: transparent; cursor: pointer; } #intensity:focus-visible { outline: 1.5px solid color-mix(in srgb, var(--accent) 75%, transparent); outline-offset: 4px; border-radius: var(--r-pill); } /* track */ #intensity::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: rgba(232, 234, 240, 0.14); } #intensity::-moz-range-track { height: 2px; border-radius: 1px; background: rgba(232, 234, 240, 0.14); } #intensity::-moz-range-progress { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--accent) 70%, transparent); } /* thumb */ #intensity::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -8px; /* (thumb - track) / 2 */ border-radius: 50%; background: var(--ink); border: 1px solid rgba(10, 12, 16, 0.6); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } #intensity::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 1px solid rgba(10, 12, 16, 0.6); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } @media (hover: hover) { #intensity:hover::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 65%, transparent); } #intensity:hover::-moz-range-thumb { transform: scale(1.15); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 65%, transparent); } } #intensity:active::-webkit-slider-thumb { transform: scale(1.25); } #intensity:active::-moz-range-thumb { transform: scale(1.25); } /* ------------------------------------------------------------ Tap hint ------------------------------------------------------------ */ #tap-hint { margin-top: var(--sp-2); text-align: center; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--ink-faint); pointer-events: none; animation: hint-pulse 3.6s var(--ease) infinite; } @keyframes hint-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } } /* The hint sits in the stage flow; keep its box when hidden so the ring doesn't shift at session start. */ #tap-hint.hidden { display: block !important; opacity: 0; animation: none; transition: opacity var(--t-slow) var(--ease); } /* ------------------------------------------------------------ Disclaimer — quiet legal line below the stage ------------------------------------------------------------ */ #disclaimer { max-width: 34rem; margin-top: var(--sp-2); text-align: center; font-size: 0.625rem; line-height: 1.6; color: var(--ink-faint); } /* ------------------------------------------------------------ Playing state — the chrome recedes, the stage breathes ------------------------------------------------------------ */ body.playing #app header, body.playing #mode-switch, body.playing #controls, body.playing #disclaimer { opacity: 0.45; } @media (hover: hover) { body.playing #app header:hover, body.playing #mode-switch:hover, body.playing #controls:hover { opacity: 1; } } body.playing #status-text { color: color-mix(in srgb, var(--accent) 70%, var(--ink-dim)); } /* ------------------------------------------------------------ Desktop refinements ------------------------------------------------------------ */ @media (min-width: 720px) { #app { padding-top: calc(var(--sp-5) + env(safe-area-inset-top)); padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); } #app header h1 { font-size: 1.05rem; } #timer-display { font-size: 1.75rem; margin-top: var(--sp-4); } #controls { max-width: 24rem; } } /* Compact phones / small heights: keep the play target ~76px and tighten vertical rhythm so nothing scrolls. */ @media (max-width: 480px), (max-height: 640px) { #play-btn { width: 76px; height: 76px; } #play-btn svg { width: 26px; height: 26px; } #stage { padding: var(--sp-3) 0; } #mode-switch { margin-top: var(--sp-3); } } /* Very short landscape phones: shrink the ring instead of scrolling. */ @media (max-height: 520px) { #progress-ring { width: min(46vh, 240px); height: min(46vh, 240px); } #timer-display { margin-top: var(--sp-2); font-size: 1.25rem; } } /* ------------------------------------------------------------ Reduced motion — keep the breath guide (it is the content), drop everything decorative. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { #stage::before, #tap-hint { animation: none; } #breath-overlay { animation: none; } #play-btn, #intensity::-webkit-slider-thumb, #intensity::-moz-range-thumb { transition: none; } @media (hover: hover) { #play-btn:hover { transform: none; } } #play-btn:active { transform: none; } /* The breath circle transition is the exercise itself — keep it, but linearize so it reads as a gentle cue, not a lunge. */ #breath-circle { transition-timing-function: linear; } }