/* ============================================================ Breathfine — design system Palette: soft warm white ground, sage green motion, forest green for anything that has to be read. ============================================================ */ :root { /* Surfaces */ --background: #fbf7f1; /* warm paper */ --background-alt: #f4eee4; /* soft sand */ --surface: #ffffff; /* pure white */ --surface-hi: #f7f1e8; --line: #ebe1d3; /* warm hairline */ --track: #ece3d6; /* progress track */ /* Text */ --text: #2b2620; /* warm charcoal */ --muted: #7c7267; /* warm grey */ --faint: #9e9488; /* label grey */ /* Accent — replaced per practice by the [data-mode] rules below */ --primary: #3E8F86; --deep: #2f6f68; --primary-soft: rgba(62, 143, 134, 0.18); --primary-wash: rgba(62, 143, 134, 0.08); /* Shape + motion */ --radius: 22px; --radius-sm: 14px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --shadow: 0 2px 10px rgba(38, 51, 46, 0.05); --shadow-lift: 0 10px 28px rgba(53, 92, 74, 0.11); /* Type */ --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", Georgia, serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Roboto Mono", monospace; /* Rhythm — gutter scales with the viewport instead of stepping at breakpoints */ --gutter: clamp(14px, 4vw, 32px); --maxw: 860px; --tap: 48px; /* minimum comfortable tap target */ } /* ---- Per-practice accent, set on ---------------------- */ [data-mode="mindfulness"] { --primary: #3E8F86; --deep: #3E8F86; --card-tint: #DFF1EE; --primary-soft: rgba(62, 143, 134, 0.18); --primary-wash: rgba(62, 143, 134, 0.075); } [data-mode="anxiety"] { --primary: #4F7DB3; --deep: #4F7DB3; --card-tint: #E3ECF8; --primary-soft: rgba(79, 125, 179, 0.18); --primary-wash: rgba(79, 125, 179, 0.075); } [data-mode="relaxation"] { --primary: #7B6BB5; --deep: #7B6BB5; --card-tint: #EBE6F8; --primary-soft: rgba(123, 107, 181, 0.18); --primary-wash: rgba(123, 107, 181, 0.075); } [data-mode="smoking"] { --primary: #C1633F; --deep: #C1633F; --card-tint: #FBE5D9; --primary-soft: rgba(193, 99, 63, 0.18); --primary-wash: rgba(193, 99, 63, 0.075); } [data-mode="harmony"] { --primary: #2F8FA8; --deep: #2F8FA8; --card-tint: #DDF0F6; --primary-soft: rgba(47, 143, 168, 0.18); --primary-wash: rgba(47, 143, 168, 0.075); } [data-mode="stress"] { --primary: #5B8C4A; --deep: #5B8C4A; --card-tint: #E6F1DD; --primary-soft: rgba(91, 140, 74, 0.18); --primary-wash: rgba(91, 140, 74, 0.075); } [data-mode="loopfree"] { --primary: #B2547E; --deep: #B2547E; --card-tint: #FBE2ED; --primary-soft: rgba(178, 84, 126, 0.18); --primary-wash: rgba(178, 84, 126, 0.075); } [data-mode="sleep"] { --primary: #4A56A6; --deep: #4A56A6; --card-tint: #E5E7F9; --primary-soft: rgba(74, 86, 166, 0.18); --primary-wash: rgba(74, 86, 166, 0.075); } [data-mode="focus"] { --primary: #B5811F; --deep: #B5811F; --card-tint: #FBEFD4; --primary-soft: rgba(181, 129, 31, 0.18); --primary-wash: rgba(181, 129, 31, 0.075); } [data-mode="energy"] { --primary: #D9711B; --deep: #D9711B; --card-tint: #FDE8D0; --primary-soft: rgba(217, 113, 27, 0.18); --primary-wash: rgba(217, 113, 27, 0.075); } [data-mode="panic"] { --primary: #3D8B76; --deep: #3D8B76; --card-tint: #DEF0EB; --primary-soft: rgba(61, 139, 118, 0.18); --primary-wash: rgba(61, 139, 118, 0.075); } [data-mode="anger"] { --primary: #C2543F; --deep: #C2543F; --card-tint: #FBE3DB; --primary-soft: rgba(194, 84, 63, 0.18); --primary-wash: rgba(194, 84, 63, 0.075); } [data-mode="grounding"] { --primary: #87792F; --deep: #87792F; --card-tint: #F4EFD5; --primary-soft: rgba(135, 121, 47, 0.18); --primary-wash: rgba(135, 121, 47, 0.075); } [data-mode="confidence"] { --primary: #9B4A8C; --deep: #9B4A8C; --card-tint: #F7E2F2; --primary-soft: rgba(155, 74, 140, 0.18); --primary-wash: rgba(155, 74, 140, 0.075); } [data-mode="reset"] { --primary: #2E8C9B; --deep: #2E8C9B; --card-tint: #DDF1F4; --primary-soft: rgba(46, 140, 155, 0.18); --primary-wash: rgba(46, 140, 155, 0.075); } /* ============================================================ Base */ *, *::before, *::after { box-sizing: border-box; } /* The hidden attribute must beat any component display rule (.paused-veil, .sheet and .practice all set their own display). */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--background); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.01em; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Ambient wash — a soft sage bloom behind everything -------------------- */ .ambient { position: fixed; inset: -20%; z-index: -1; background: radial-gradient(40% 28% at 16% 6%, rgba(217, 113, 27, 0.13), transparent 70%), radial-gradient(38% 30% at 88% 12%, rgba(79, 125, 179, 0.14), transparent 72%), radial-gradient(46% 34% at 62% 96%, rgba(62, 143, 134, 0.13), transparent 72%), radial-gradient(34% 26% at 6% 62%, rgba(178, 84, 126, 0.10), transparent 72%), linear-gradient(180deg, var(--background) 0%, var(--background-alt) 100%); } .skip-link { position: absolute; left: -999px; top: 8px; padding: 10px 16px; background: var(--deep); color: #fff; border-radius: var(--radius-sm); z-index: 50; } .skip-link:focus { left: 12px; } :focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; border-radius: 6px; } /* ============================================================ Top bar */ /* Sticky, translucent, with a hairline that only appears once you scroll. */ .topbar { position: sticky; top: 0; z-index: 25; background: rgba(247, 248, 245, 0.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .topbar.scrolled { border-bottom-color: var(--line); background: rgba(247, 248, 245, 0.94); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--maxw); margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) var(--gutter) 12px; } .brand { display: flex; align-items: center; gap: 10px; padding: 4px; margin-left: -4px; border: none; background: none; font: inherit; cursor: pointer; } .brand-mark { width: 30px; height: 30px; flex: none; transition: transform 0.5s var(--ease); } .brand:hover .brand-mark { transform: rotate(-8deg) scale(1.04); } .reduced .brand:hover .brand-mark { transform: none; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .icon-btn { display: inline-flex; align-items: center; gap: 7px; padding-inline: 14px; } .icon-btn svg { width: 17px; height: 17px; flex: none; } .brand-text { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep); } body[data-screen="session"] .topbar { display: none; } /* ============================================================ Screens */ .screen { display: none; } .screen.is-active { display: block; animation: rise 0.5s var(--ease) both; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } #screen-home, #screen-detail, #screen-complete, #screen-install, #screen-privacy, #screen-terms { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 64px; } /* ============================================================ Home */ .hero { padding: 26px 0 30px; } .eyebrow { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--primary); margin-bottom: 18px; } .hero h1 { font-family: var(--font-display); font-size: clamp(2.3rem, 10vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--deep); } .hero-sub { margin-top: 18px; max-width: 46ch; color: var(--muted); } .section-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; } /* Practice stats -------------------------------------------------------- */ .practice { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 34px; } .practice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px; margin: 0; } .practice-grid > div { min-width: 0; } .practice-grid dt { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .practice-grid dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 1.35rem; color: var(--deep); } .practice-grid dd small { font-size: 0.85rem; color: var(--muted); } /* Mode cards ------------------------------------------------------------ */ .mode-grid { display: grid; gap: 12px; } .mode-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px; width: 100%; height: 100%; text-align: left; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--text); font: inherit; cursor: pointer; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); } .mode-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lift); transform: translateY(-2px); } .mode-card:active { transform: translateY(0); } .mode-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--background-alt); color: var(--deep); } .mode-icon svg { width: 22px; height: 22px; } .mode-name { display: block; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--deep); } .mode-desc { display: block; color: var(--muted); font-size: 0.94rem; margin-top: 4px; } .mode-meta { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--primary); } /* Four-phase strip on each card */ .card-pattern { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; } .card-cell { padding: 7px 4px; border-radius: 10px; background: var(--primary-wash); text-align: center; line-height: 1.25; } .card-cell.is-zero { background: transparent; box-shadow: inset 0 0 0 1px var(--line); } .card-cell b { display: block; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.1em; color: var(--faint); } .card-cell span { display: block; font-family: var(--font-mono); font-size: 0.92rem; color: var(--deep); } .card-cell.is-zero span { color: var(--faint); } .mode-go { margin-top: 14px; display: inline-block; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .mode-card:hover .mode-go { color: var(--deep); } /* ============================================================ Buttons */ .primary-btn { width: 100%; padding: 17px 22px; border: none; border-radius: 999px; background: var(--deep); color: #fff; font: inherit; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 6px 18px rgba(53, 92, 74, 0.22); transition: filter 0.25s var(--ease), transform 0.25s var(--ease); } .primary-btn:hover { filter: brightness(1.14); } .primary-btn:active { transform: scale(0.99); } .ghost-btn { min-height: var(--tap); padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: 0.88rem; cursor: pointer; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .ghost-btn:hover { color: var(--deep); border-color: var(--primary); } .ghost-btn.tiny { margin-top: 16px; font-size: 0.78rem; padding: 8px 14px; } .back-btn { margin: 8px 0 20px; min-height: var(--tap); padding: 8px 0; border: none; background: none; color: var(--muted); font: inherit; font-size: 0.88rem; cursor: pointer; } .back-btn::before { content: "← "; } .back-btn:hover { color: var(--deep); } /* ============================================================ Detail */ .detail-head { display: flex; gap: 16px; align-items: center; } .detail-icon { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--background-alt); color: var(--deep); } .detail-icon svg { width: 28px; height: 28px; } .detail h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 7vw, 2.5rem); line-height: 1.1; color: var(--deep); } .detail-tagline { color: var(--muted); margin-top: 4px; } .pattern-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 26px 0 30px; } .pattern-cell { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); padding: 14px 10px; text-align: center; } .pattern-cell.is-zero { box-shadow: none; background: transparent; } .pattern-cell dt { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } .pattern-cell dd { margin: 6px 0 0; font-family: var(--font-mono); font-size: 1.5rem; color: var(--deep); } .pattern-cell.is-zero dd { color: var(--faint); } .pattern-cell dd span { font-size: 0.72rem; color: var(--muted); } .detail-body { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); } .detail-body-title { font-family: var(--font-display); font-size: 1.35rem; color: var(--deep); margin-bottom: 20px; } .detail-block { margin-bottom: 24px; } .detail-block p { color: var(--muted); } .caution { border-left: 3px solid var(--primary); background: var(--primary-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 12px 16px; margin-bottom: 12px; color: var(--text); font-size: 0.92rem; } .duration { border: none; margin: 32px 0 26px; padding: 0; } .duration legend { padding: 0; } .duration-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .duration-opt { min-height: var(--tap); padding: 14px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font: inherit; font-family: var(--font-mono); font-size: 0.95rem; cursor: pointer; transition: all 0.25s var(--ease); } .duration-opt:hover { color: var(--deep); border-color: var(--primary); } .duration-opt[aria-checked="true"] { background: var(--deep); border-color: var(--deep); color: #fff; } .hint, .setting-hint { font-size: 0.82rem; color: var(--faint); margin-top: 10px; } .disclaimer { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.8rem; line-height: 1.65; color: var(--muted); } /* ============================================================ Session */ .session.is-active { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: max(16px, env(safe-area-inset-top)) var(--gutter) max(18px, env(safe-area-inset-bottom)); } .session-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .session-mode { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.04em; color: var(--deep); } .session-clock { text-align: right; line-height: 1.3; } .session-clock-label { display: block; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } .session-clock .mono { font-size: 1.05rem; color: var(--text); } /* Stage ----------------------------------------------------------------- */ .stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-height: 0; } .orb-wrap { position: relative; width: min(78vw, 42vh); aspect-ratio: 1; display: grid; place-items: center; } .halo { position: absolute; inset: 8%; border-radius: 50%; border: 1px solid var(--line); } .orb { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #ffffff 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(155deg, #a8ccb5 0%, var(--primary) 52%, #6ea482 100%); box-shadow: 0 12px 40px rgba(53, 92, 74, 0.18); transform: scale(0.6); will-change: transform; } .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .ring-track { fill: none; stroke: var(--track); stroke-width: 3; } .ring-progress { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; } .readout { position: relative; text-align: center; } .phase { font-family: var(--font-display); font-size: clamp(1.15rem, 4.6vw, 1.5rem); letter-spacing: 0.24em; text-indent: 0.24em; color: #ffffff; text-shadow: 0 1px 6px rgba(38, 51, 46, 0.28); } .count { font-size: clamp(3rem, 13vw, 4rem); font-weight: 300; line-height: 1.1; margin-top: 6px; color: #ffffff; text-shadow: 0 2px 10px rgba(38, 51, 46, 0.3); } /* Countdown state: the circle waits, quieter than an active phase. */ .lead .orb { opacity: 0.72; } .lead .ring-progress { stroke: var(--track); } .lead .phase { letter-spacing: 0.18em; text-indent: 0.18em; } .lead .count { font-size: clamp(3.4rem, 16vw, 5rem); } .next-phase { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } /* Bottom block ---------------------------------------------------------- */ .session-bottom { display: grid; gap: 18px; } .session-progress-head { display: flex; align-items: center; justify-content: space-between; } .session-progress-head .section-label { margin: 0; } .session-progress-head .mono { font-size: 0.82rem; color: var(--muted); } .bar { height: 4px; margin-top: 10px; border-radius: 999px; background: var(--track); overflow: hidden; } .bar-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--primary); } .controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .control { padding: 15px 4px; min-height: 52px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); } .control:hover { color: var(--deep); border-color: var(--primary); } .control[aria-pressed="true"] { color: var(--deep); border-color: var(--primary); background: var(--primary-soft); } .keyhint { text-align: center; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--faint); } .paused-veil { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 22px; padding: var(--gutter); background: rgba(247, 248, 245, 0.9); backdrop-filter: blur(8px); } .paused-veil p { font-family: var(--font-display); font-size: 2rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--deep); } .paused-veil .primary-btn { width: auto; padding-inline: 46px; } /* ============================================================ Complete */ .complete.is-active { display: grid; place-items: center; min-height: 80vh; min-height: 80dvh; } .complete-inner { text-align: center; width: 100%; } .complete-mark { width: 96px; height: 96px; margin: 0 auto 26px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #ffffff 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(155deg, #a8ccb5, var(--primary)); box-shadow: 0 10px 30px rgba(53, 92, 74, 0.18); animation: settle 2.4s var(--ease) both; } @keyframes settle { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } .complete h1 { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 2.8rem); color: var(--deep); } .complete-line { color: var(--muted); margin-top: 12px; } .summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 34px 0; text-align: left; } .summary > div { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); padding: 14px 16px; } .summary dt { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } .summary dd { margin: 6px 0 0; font-family: var(--font-display); font-size: 1.2rem; color: var(--deep); } .complete-actions { display: grid; gap: 10px; justify-items: center; } .complete-actions .ghost-btn { width: 100%; } /* ============================================================ Text pages */ .page h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 7vw, 2.4rem); line-height: 1.15; color: var(--deep); } .page-lede { margin-top: 12px; color: var(--muted); font-size: 1.02rem; max-width: 60ch; } .page-h2 { font-family: var(--font-display); font-size: 1.2rem; color: var(--deep); margin: 30px 0 8px; } .page p { color: var(--muted); max-width: 66ch; } .page strong { color: var(--text); font-weight: 600; } .steps { margin: 8px 0 0; padding-left: 1.25em; color: var(--muted); max-width: 66ch; } .steps li { margin-bottom: 8px; } .steps li::marker { color: var(--primary); font-family: var(--font-mono); } .page-note { margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--primary); background: var(--primary-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.92rem; } /* ============================================================ Footer */ .site-footer { max-width: var(--maxw); margin: 0 auto; padding: 32px var(--gutter) max(34px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); text-align: center; } body[data-screen="session"] .site-footer { display: none; } .footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin-bottom: 18px; } .footer-link { min-height: 40px; padding: 8px 6px; border: none; background: none; font: inherit; font-size: 0.86rem; color: var(--muted); cursor: pointer; border-bottom: 1px solid transparent; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .footer-link:hover { color: var(--deep); border-bottom-color: var(--primary); } .footer-dot { color: var(--line); } .footer-copy { font-size: 0.8rem; color: var(--faint); } .footer-made { margin-top: 8px; font-size: 0.85rem; color: var(--muted); letter-spacing: 0.02em; } .footer-heart { display: inline-block; margin: 0 1px; animation: heartbeat 2.6s var(--ease) infinite; } @keyframes heartbeat { 0%, 72%, 100% { transform: scale(1); } 78% { transform: scale(1.16); } 84% { transform: scale(1); } 90% { transform: scale(1.1); } } .reduced .footer-heart { animation: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ Settings sheet */ .sheet-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(38, 51, 46, 0.28); backdrop-filter: blur(3px); } .sheet { position: fixed; z-index: 31; left: 0; right: 0; bottom: 0; max-height: 88vh; max-height: 88dvh; overflow-y: auto; padding: 22px var(--gutter) max(28px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-radius: 26px 26px 0 0; background: var(--surface); box-shadow: 0 -12px 40px rgba(38, 51, 46, 0.12); animation: sheet-in 0.35s var(--ease) both; } @keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } } .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .sheet-head h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--deep); } .setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); } .setting-label { font-size: 0.98rem; } .sheet select { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--background); color: var(--text); font: inherit; } .toggle { flex: none; width: 54px; height: 32px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--track); cursor: pointer; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); } .toggle span { display: block; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(38, 51, 46, 0.25); transition: transform 0.3s var(--ease); } .toggle[aria-checked="true"] { background: var(--primary); border-color: var(--primary); } .toggle[aria-checked="true"] span { transform: translateX(22px); } .sheet select { min-height: var(--tap); } .setting-hint { margin-top: -6px; } /* Volume slider */ .sheet input[type="range"] { flex: none; width: 150px; height: var(--tap); accent-color: var(--primary); background: transparent; cursor: pointer; } .sheet input[type="range"]:disabled { opacity: 0.4; cursor: default; } /* ============================================================ Responsive */ /* Very small phones (iPhone SE and narrower) */ @media (max-width: 420px) { .icon-btn-text { display: none; } .icon-btn { padding-inline: 12px; } .ghost-btn { padding-inline: 14px; } } @media (max-width: 360px) { .controls { grid-template-columns: repeat(2, 1fr); } .brand-text { font-size: 1rem; } .card-cell b { font-size: 0.52rem; letter-spacing: 0.06em; } .duration-opt { font-size: 0.85rem; } .keyhint { display: none; } } /* Large phones and up: two columns of practices */ @media (min-width: 560px) { .mode-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .practice-grid { grid-template-columns: repeat(4, 1fr); } .complete-actions { grid-auto-flow: column; } .complete-actions .ghost-btn, .complete-actions .primary-btn { width: auto; padding-inline: 34px; } .detail-start-wide { max-width: 320px; } } /* Tablets: centre the sheet as a dialog */ @media (min-width: 700px) { .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(520px, 92vw); transform: translate(-50%, -50%); border: 1px solid var(--line); border-radius: var(--radius); } @keyframes sheet-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } } .hero { padding: 48px 0 36px; } #screen-detail .primary-btn { max-width: 360px; } } /* Desktop: three columns, roomier session */ @media (min-width: 1000px) { :root { --maxw: 980px; } .mode-grid { grid-template-columns: repeat(3, 1fr); } .session.is-active { max-width: 620px; margin: 0 auto; } .orb-wrap { width: min(50vh, 440px); } .hero { padding: 60px 0 44px; } } /* Landscape phones: side-by-side so nothing needs scrolling mid-session */ @media (max-height: 560px) and (orientation: landscape) { .session.is-active { padding-block: 10px; } .stage { flex-direction: row; gap: 26px; } .orb-wrap { width: min(34vw, 74vh); } .next-phase { writing-mode: horizontal-tb; } .controls .control { min-height: 44px; padding-block: 10px; } .keyhint { display: none; } .session-bottom { gap: 10px; } } /* Tall, narrow phones get a slightly bigger circle */ @media (min-height: 780px) and (max-width: 560px) { .orb-wrap { width: min(84vw, 46vh); } } /* ============================================================ Reduced motion */ .reduced .orb { transform: scale(0.86) !important; transition: none; } .reduced .screen.is-active, .reduced .complete-mark, .reduced .sheet { animation: none; } .reduced .mode-card:hover { transform: none; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ============================================================================ WARM VARIANT — colour behaviour Browsing is colourful so choosing is easy; the session floods to one quiet hue so nothing competes with the breath. ========================================================================== */ /* --- Cards carry their practice's colour --------------------------------- */ .mode-card { background: #fff; background: linear-gradient(158deg, var(--card-tint, #fff) 0%, #fff 74%); border-color: rgba(0, 0, 0, 0.06); border-color: color-mix(in srgb, var(--card-accent, #999) 24%, transparent); } .mode-card:hover { border-color: var(--card-accent); box-shadow: 0 14px 32px color-mix(in srgb, var(--card-accent) 20%, transparent); } .mode-icon { background: #fff; color: var(--card-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-accent) 26%, transparent); } .mode-name { color: color-mix(in srgb, var(--card-accent) 72%, #1d1a16); } .mode-meta { color: var(--card-accent); } .card-cell { background: color-mix(in srgb, var(--card-accent) 13%, transparent); } .card-cell span { color: var(--card-accent); } .card-cell.is-zero { background: transparent; box-shadow: inset 0 0 0 1px var(--line); } .mode-card:hover .mode-go { color: var(--card-accent); } /* --- Session: one hue, quietly ------------------------------------------- */ body[data-screen="session"] .ambient { background: radial-gradient(52% 42% at 50% 32%, var(--primary-wash), transparent 72%), linear-gradient(180deg, var(--background) 0%, var(--background-alt) 100%); } /* Orb derives its gradient from the practice hue instead of fixed sage */ .orb { background: radial-gradient(circle at 36% 30%, #ffffff 0%, rgba(255,255,255,0) 58%), linear-gradient(155deg, var(--primary), var(--primary)); background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(155deg, color-mix(in srgb, var(--primary) 62%, #ffffff) 0%, var(--primary) 54%, color-mix(in srgb, var(--primary) 82%, #000000) 100%); box-shadow: 0 14px 44px color-mix(in srgb, var(--primary) 30%, transparent); } .complete-mark { background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(155deg, color-mix(in srgb, var(--primary) 62%, #ffffff), var(--primary)); box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 26%, transparent); } /* Buttons and the logo pick up the active practice colour too */ .primary-btn { box-shadow: 0 6px 18px color-mix(in srgb, var(--deep) 28%, transparent); } .topbar { background: rgba(251, 247, 241, 0.84); } .topbar.scrolled { background: rgba(251, 247, 241, 0.95); } .paused-veil { background: rgba(251, 247, 241, 0.92); }