/* ========================================================================= Moment — the web timer (FF-1191). The app's Focus screen in the browser: the column (capsule → dial → Sound card → Start), the theme's art fading to its base, light and dark by prefers-color-scheme only. FF-1193 — the chrome round it: the Menu and its panel, About, the badge, the footer. Every number here is the iOS app's at 1pt = 1px: HomeDialLayout's slots, LiquidGlassDial's ratios, HomeSurface's two surfaces, the Start capsule's tokens. FF-1194 — the inner pages link this file for the tokens and the chrome, and page.css for the page; the old styles.css is gone. FF-1197 — embed mode (html[data-embed]: the chrome gone, the mark) at the end. ========================================================================= */ @font-face { font-family: "Unbounded"; src: url("/assets/fonts/Unbounded-Variable.woff2") format("woff2"); font-weight: 200 900; font-display: swap; } /* ---- Tokens ------------------------------------------------------------ */ :root { color-scheme: light dark; --font-display: "Unbounded", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Appearance-level (the app's `.primary` ink and the lit surface's fill) */ --ink: #000; --ink-rgb: 0 0 0; --lit-fill: #fff; --lit-is-light: 1; --glass-fill: rgb(255 255 255 / .5); --glass-edge: linear-gradient(135deg, rgb(255 255 255 / .55), rgb(255 255 255 / .12)); --dim: rgb(0 0 0 / .15); --track-opacity: .10; --circle-glyph: var(--ink); /* Motion (HomeMotion) */ --theme-fade: .4s; --surface-change: .2s; --press: .12s; --arc-ease: .18s; --screen-swap: .25s; /* the Focus tab's screen cross-fade (FF-1132) */ } /* FF-1192 — the round dots' ink: each theme's ` Secondary` colorset */ [data-theme="ocean"] { --secondary: #1e6497; } [data-theme="air"] { --secondary: #633eb2; } [data-theme="sand"] { --secondary: #9e6b20; } [data-theme="forest"] { --secondary: #347145; } @media (prefers-color-scheme: dark) { [data-theme="ocean"] { --secondary: #12a1db; } [data-theme="air"] { --secondary: #c686f9; } [data-theme="sand"] { --secondary: #eaa031; } [data-theme="forest"] { --secondary: #54bd5e; } } /* The four themes: Primary (light / dark variants of the colorset), the Light and Dark tokens, FF-794's CTA literal, the Start's dark label (the Dark token shaded 45 % to black), FF-1178's circle glyph ink, and the Focus screen's base: Primary at 5 % over white by day, 7 % over white-at-5 % by night. */ [data-theme="ocean"] { --primary: #36b5e3; --light-token: #36b5e3; --dark-token: #1e6497; --cta: #087da8; --label-dark: #072840; --glyph-dark: #b9e2f5; --base: #f5fbfe; } [data-theme="air"] { --primary: #af70ee; --light-token: #af70ee; --dark-token: #633eb2; --cta: #984de3; --label-dark: #28164d; --glyph-dark: #dec7fb; --base: #fbf8fe; } [data-theme="sand"] { --primary: #df9d4c; --light-token: #df9d4c; --dark-token: #9e6b20; --cta: #a3671d; --label-dark: #432b08; --glyph-dark: #f4d8ba; --base: #fdfaf6; } [data-theme="forest"] { --primary: #6bbe81; --light-token: #6bbe81; --dark-token: #347145; --cta: #3b824e; --label-dark: #112e19; --glyph-dark: #c6e5cc; --base: #f8fcf9; } /* Derived, light: the Start's fill is the CTA literal with a white label; the lit surfaces' accent is the same literal; the dial's arc is the Start's fill and its grabber the Start's label (FF-1086); the theme card's ink the shaded Dark token (FF-1087). FF-1257 — a text link is the accent with 5 % black mixed in by day: the literal itself measured 4.43–4.52:1 on the theme's base, under AA in three themes; mixed, 4.82–4.92:1. By night it is the accent unchanged. Only text links take --link (the inner pages', the ten-app table's and the notification prompt's "Turn on · Not now"); the rings, the dial, the Start and the lit cards keep the accent. */ :root { --start-fill: var(--cta); --start-label: #fff; --lit-accent: var(--cta); --link: color-mix(in srgb, var(--lit-accent) 95%, #000); --card-ink: var(--label-dark); --start-shadow: 0 4px 12px color-mix(in srgb, var(--start-fill) 35%, transparent); --lit-glow: 0 6px 14px color-mix(in srgb, var(--primary) 35%, transparent); } @media (prefers-color-scheme: dark) { :root { --ink: #fff; --ink-rgb: 255 255 255; --lit-fill: #1a1a1c; /* HomeSurfaceTokens.litDarkNeutralFill */ --lit-is-light: 0; --glass-fill: rgb(30 30 32 / .5); --glass-edge: linear-gradient(135deg, rgb(255 255 255 / .35), rgb(255 255 255 / .08)); --dim: rgb(0 0 0 / .3); --track-opacity: .45; --start-fill: var(--light-token); --start-label: var(--label-dark); --lit-accent: var(--light-token); --link: var(--lit-accent); --card-ink: #fff; --circle-glyph: var(--glyph-dark); --start-shadow: 0 0 12px color-mix(in srgb, var(--start-fill) 30%, transparent); /* FF-1241 — a real shadow that draws nothing, not none: the focus rings list --lit-glow after the accent ring, and a shadow list with none in it is invalid — the whole declaration drops, ring and all. */ --lit-glow: 0 0 0 transparent; } [data-theme="ocean"] { --primary: #1e6497; --base: #0e1316; } [data-theme="air"] { --primary: #633eb2; --base: #131018; } [data-theme="sand"] { --primary: #9e6b20; --base: #17130e; } [data-theme="forest"] { --primary: #347145; --base: #0f1411; } } /* ---- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* svh, not dvh: Safari's collapsing toolbar must not resize the page or the dial mid-scroll */ @supports (height: 100svh) { body { min-height: 100svh; } } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--base); color: var(--ink); font-family: var(--font-text); font-size: 16px; line-height: 1.3; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } button { font: inherit; color: inherit; } button, input { margin: 0; } img, svg { display: block; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- Backdrop: the art as the app places it ------------------------------ Top-aligned, scaled to cover the width, full strength to 40 % of the viewport (HomeGradientTokens.imageFadeStart), then fading to the base. */ .backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--base); pointer-events: none; } .backdrop .art { position: absolute; inset: 0; margin: 0; } .backdrop .art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .backdrop .art.is-entering { opacity: 0; } .backdrop .art.is-shown { opacity: 1; transition: opacity var(--theme-fade) ease; } .backdrop .art.is-leaving { opacity: 0; transition: opacity var(--theme-fade) ease; } .backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--base) 100%); transition: background var(--theme-fade) ease; } /* ---- The stage and the column ------------------------------------------- One column, 440px from 480px up (20px insets round 400px of content), 16px gutters on phones; centred both ways; the page scrolls when it must. FF-1193 — under 640px the top padding is 72 (16 + the Menu's 44 + 12) so the capsule starts under the Menu: on a 390 phone the two would otherwise share the capsule's accessory corner. From 640 the bottom padding clears the fixed bottom-right stack (its top is 188 from the edge, + 16 — 144 before FF-1202 put Theme's 44px box above About) until 960, where the 440 column can no longer meet the stack sideways and FF-1191's 80 is enough to clear the heading. */ .stage { position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 0 16px; /* FF-1192 — the screens' light pools reach past the column (the group's ellipse is 1.1 × its width + 64 each side); clipped at the viewport's edge as the app clips the same ellipse at the screen's, never a sideways scroll on a phone. `clip`, not `hidden`: no scroll container. */ overflow-x: clip; } @media (min-width: 640px) { .stage { padding: 24px 0 204px; } } @media (min-width: 960px) { .stage { padding-bottom: 80px; } } .column { --content: min(400px, calc(100vw - 32px)); /* The dial: 68 % of the content, capped at 300 (DialMath.iosDialDiameter), yielding to height before the page scrolls, never under the 168px floor or 62 % of its base (DialMath.homeDialDiameter / homeDialFloorDiameter). The reserve is the rest of the column (56 + 47 + 47 + 104 + 26 + 60 = 340) plus 16 above and below — never the chrome beneath, which scrolls into view on a short viewport (the brief: the page scrolls when the viewport is shorter than the column), and under 640px not the Menu's 56px strip above either (FF-1193): so a 390×660 phone keeps the app's 243px dial, as the app itself does (FF-1191's review), and Start at 655 still sits above the fold. From 640 the stage's own padding is counted: 24 above, and below the stack's 204 until 960, then 80. FF-1202 — Theme's 44px box above About: the page under 640 is 44 longer (the chrome is never counted there), 524 becomes 568 at 640–959, and from 960 nothing moves. In embed mode (FF-1197, the block at the end) 404 at every width. */ --dial-base: min(calc(var(--content) * .68), 300px); --dial-floor: min(var(--dial-base), max(168px, calc(var(--dial-base) * .62))); --reserve: 372px; --dial: max(var(--dial-floor), min(var(--dial-base), calc(100vh - var(--reserve)))); width: 100%; max-width: 440px; padding: 0 16px; display: flex; flex-direction: column; align-items: center; } @supports (height: 100svh) { .column { --dial: max(var(--dial-floor), min(var(--dial-base), calc(100svh - var(--reserve)))); } } @media (min-width: 480px) { .column { padding: 0 20px; } } @media (min-width: 640px) { .column { --reserve: 568px; } } @media (min-width: 960px) { .column { --reserve: 444px; } } /* ---- The two surfaces (HomeSurface) ---------------------------------------- .off: clear glass. .lit: opaque paint — white by day, the near-black neutral by night — with a theme glow by day and a hairline by night. */ .surface { position: relative; background: var(--glass-fill); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); transition: background var(--surface-change) ease, box-shadow var(--surface-change) ease; } .surface::before { /* The glass edge: a 1px gradient hairline, drawn inside the shape */ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-edge); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: opacity var(--surface-change) ease; } .surface.lit { background: var(--lit-fill); box-shadow: var(--lit-glow); } .surface.lit::before { opacity: var(--lit-is-light, 1); } @media (prefers-color-scheme: light) { .surface.lit::before { opacity: 0; } } /* ---- The capsule (HomeIntentionField) --------------------------------------- 56 tall: a 28px line of Unbounded Light 22 and 14px above and below; 24px leading inset; the accessory slot a 56px square at the trailing end. */ .capsule { width: 100%; height: 56px; border-radius: 28px; display: flex; align-items: center; padding: 0 0 0 24px; } #capsule, #dial { transition: background var(--surface-change) ease, box-shadow var(--surface-change) ease, opacity var(--screen-swap) ease-in-out, visibility 0s linear 0s; } .capsule-input { flex: 1 1 auto; min-width: 0; height: 28px; border: 0; outline: 0; background: transparent; padding: 0; font-family: var(--font-display); font-weight: 300; font-size: 22px; line-height: 28px; color: var(--ink); text-overflow: ellipsis; } .capsule-input::placeholder { color: rgb(var(--ink-rgb) / .8); opacity: 1; } .capsule-input:read-only { cursor: default; } .capsule-slot { flex: none; width: 56px; height: 56px; display: grid; place-items: center; } .accessory { width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: rgb(var(--ink-rgb) / .08); color: var(--ink); cursor: pointer; transition: opacity var(--surface-change) ease; } .accessory[hidden] { display: none; } .accessory svg { width: 14px; height: 14px; } .accessory.clear svg { width: 12px; height: 12px; } .accessory::after { content: ""; position: absolute; width: 44px; height: 44px; } .accessory { position: relative; } /* Focused: lit, with the 2px accent ring inside the edge */ .capsule:focus-within { box-shadow: inset 0 0 0 2px var(--lit-accent), var(--lit-glow); } /* ---- The dial (LiquidGlassDial) --------------------------------------------- Every size derives from --dial: the working circle is 0.924 of it, the arc 0.135 thick, the grabber 60 % of the arc, the cardinals at 0.28, the digits at 0.18 (idle) / 0.119 (running). */ .dial { position: relative; width: var(--dial); height: var(--dial); margin-top: 47px; /* fieldToDial */ border-radius: 50%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; } body.is-running .dial, body.is-paused .dial, body.is-finished .dial { cursor: default; } .dial-glass { position: absolute; inset: 0; border-radius: 50%; } .dial-range { /* A real range input under the ring: keyboard and screen readers work, the pointer talks to the ring. Not display:none. */ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; pointer-events: none; } .dial-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .dial-ring .track { fill: none; stroke: var(--primary); stroke-opacity: var(--track-opacity); mix-blend-mode: multiply; } .dial-ring .arc { fill: none; stroke: var(--start-fill); stroke-linecap: round; stroke-dasharray: 743.6; transform: rotate(-90deg); transform-origin: 150px 150px; filter: drop-shadow(0 1.5px 3.7px rgb(0 0 0 / .18)); transition: stroke-dashoffset var(--arc-ease) ease-in-out, stroke var(--theme-fade) ease; } .dial-ring .ticks line { stroke: rgb(0 0 0 / .2); } .dial-ring .tick-minor { stroke-width: .9; } .dial-ring .tick-major { stroke-width: 1.65; stroke-linecap: round; } body.is-running .tick-major, body.is-paused .tick-major, body.is-finished .tick-major { display: none; } .dial-ring .grabber { fill: var(--start-label); /* Rotated about the dial's centre, so it rides the ring (a cx/cy move would cut the chord) */ transform-origin: 150px 150px; transition: transform var(--arc-ease) ease-in-out, fill var(--theme-fade) ease; } .dial.no-ease .arc, .dial.no-ease .grabber { transition-duration: 0s; } .dial.sweeping .arc, .dial.sweeping .grabber { transition-duration: .5s; transition-timing-function: ease-out; } /* Focus ring: the accent, 2px, 3px outside the circle (the cards' ring) */ .dial:focus-within::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--lit-accent); pointer-events: none; } .cardinal { position: absolute; left: 50%; top: 50%; font-size: max(11px, calc(var(--dial) * .052)); line-height: 1; color: rgb(var(--ink-rgb) / .65); transform: translate(-50%, -50%) translate(calc(var(--dial) * .28 * var(--sx)), calc(var(--dial) * .28 * var(--sy))); transition: opacity var(--surface-change) ease; pointer-events: none; } body.is-running .cardinal, body.is-paused .cardinal, body.is-finished .cardinal { opacity: 0; } .readout { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 calc(var(--dial) * .1); transform: translateY(calc(var(--dial) * .025)); pointer-events: none; } .readout > div { display: flex; flex-direction: column; align-items: center; } .readout .digits { font-family: var(--font-display); font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--ink); white-space: nowrap; } .readout-idle .digits { font-size: calc(var(--dial) * .18); } .readout-running .digits { font-size: calc(var(--dial) * .119); } .readout .unit { font-size: max(9px, calc(var(--dial) * .045)); font-weight: 500; letter-spacing: .85px; line-height: 1; color: rgb(var(--ink-rgb) / .65); margin-top: -6px; white-space: nowrap; } .readout-running .unit { font-size: max(10px, calc(var(--dial) * .045)); font-weight: 400; } .readout-idle, .readout-running { transition: opacity var(--surface-change) ease, visibility 0s linear 0s; } .readout-running { position: absolute; } body.is-idle .readout-running, body.is-running .readout-idle, body.is-paused .readout-idle, body.is-finished .readout-idle { opacity: 0; visibility: hidden; transition: opacity var(--surface-change) ease, visibility 0s linear var(--surface-change); } /* ---- The dots' slot (FF-1192): 14 · 19 · 14 between the dial and the cards — HomeDialLayout's dialToRow, the slot held whether or not the dots show. The strip: one 16px glyph per session, 6 apart, in the theme's Secondary. */ .dots-slot { width: 100%; height: 19px; margin-top: 14px; /* dotsClearance */ display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--secondary); position: relative; } .dot { width: 16px; height: 16px; flex: none; } .dot.todo { opacity: .3; } #homeDots { transition: opacity var(--screen-swap) ease-in-out, visibility 0s linear 0s; } /* ---- The options row: the Sound and Breaks cards (SessionOptionsRow) ---------- */ .options { width: 100%; margin-top: 14px; /* dotsClearance (dialToRow = 14 + 19 + 14) */ display: flex; justify-content: center; gap: 10px; /* modifierCardSpacing */ transition: opacity var(--screen-swap) ease-in-out, visibility 0s linear 0s; } .card { width: calc((100% - 10px) / 2); height: 104px; border-radius: 28px; padding: 16px 12px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 0; cursor: pointer; transition: transform var(--press) ease-out, opacity var(--press) ease-out; } .card:active { transform: scale(.97); } .card-top { width: 100%; height: 26px; display: flex; align-items: center; justify-content: space-between; } .card-glyph { width: 26px; height: 26px; display: grid; place-items: center; color: var(--ink); } .card-glyph svg { width: 24px; height: 24px; } .card-glyph .fill { display: none; } .card.lit .card-glyph { color: var(--lit-accent); } .card.lit .card-glyph .fill { display: block; } .card.lit .card-glyph .outline { display: none; } .card-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgb(var(--ink-rgb) / .5); transition: background var(--surface-change) ease, border-color var(--surface-change) ease, box-shadow var(--surface-change) ease; } .card.lit .card-dot { border-color: var(--lit-accent); background: var(--lit-accent); box-shadow: 0 0 3px color-mix(in srgb, var(--lit-accent) 60%, transparent); } .card-name { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink); } .card-value { margin-top: 2px; font-size: 12px; font-weight: 500; line-height: 1.25; color: rgb(var(--ink-rgb) / .7); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card.lit .card-value { color: var(--lit-accent); } .card:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--base), 0 0 0 5px var(--lit-accent); } /* ---- The controls (TimerControls): the big Start, the paused Stop circle ---- */ .controls { width: 100%; margin-top: 26px; /* rowToStart */ display: flex; align-items: center; justify-content: center; } .flank { flex: none; width: 0; overflow: visible; display: flex; transition: width .2s ease-out; } .flank.leading { justify-content: flex-start; } .flank.trailing { justify-content: flex-end; } body.is-paused .flank { width: 56px; } /* the 44px circle and its 12px gap */ .circle { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; color: var(--circle-glyph); opacity: 0; pointer-events: none; transition: opacity .2s ease-out; cursor: pointer; } .circle svg { width: 17px; height: 17px; } body.is-paused .circle { opacity: 1; pointer-events: auto; } .circle:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--base), 0 0 0 5px var(--lit-accent); } .primary { flex: 1 1 auto; min-width: 0; height: 60px; border: 0; border-radius: 30px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--start-fill); color: var(--start-label); box-shadow: var(--start-shadow); font-size: 20px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: transform var(--press) ease-out, background var(--theme-fade) ease, color var(--theme-fade) ease, box-shadow var(--theme-fade) ease; } .primary:active { transform: scale(.97); } .primary[aria-disabled="true"] { cursor: default; } .primary[aria-disabled="true"]:active { transform: none; } .primary svg { width: 18px; height: 18px; flex: none; } .primary .icon { display: none; } body.is-running .primary .icon-pause, body.is-finished .primary .icon-pause, body.is-paused .primary .icon-play { display: block; } .primary:focus-visible { outline: 0; box-shadow: var(--start-shadow), 0 0 0 3px var(--base), 0 0 0 5px var(--lit-accent); } /* ---- Under Start: the notification ask (desktop, once) and the noscript line */ .column { position: relative; } .post-session { position: absolute; top: 100%; left: 16px; right: 16px; margin-top: 16px; font-size: 14px; line-height: 1.4; text-align: center; color: rgb(var(--ink-rgb) / .8); } .post-session[hidden] { display: none; } .post-session p { margin: 0 0 6px; } .post-session .link { border: 0; background: none; padding: 6px 8px; margin: -6px 0; font-weight: 600; color: var(--link); cursor: pointer; border-radius: 8px; } .post-session .link:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 0; } @media (min-width: 480px) { .post-session { left: 20px; right: 20px; } } .noscript { margin: 16px 0 0; font-size: 14px; text-align: center; color: rgb(var(--ink-rgb) / .8); } /* ---- The chrome at rest (FF-1193) -------------------------------------------- Bottom right the stack — "Theme" above "About Moment" (FF-1202), Apple's badge, the footer line — and bottom centre the page's heading. Under 640px in flow under the column, centred, 16px gutters: Theme (44) · About (44) · 10 · the badge (40) · 16 · the line · 4 · the heading · 16 + the safe area. From 640 fixed: a grid of three columns — the heading centred in the middle one, the stack right-aligned in the last, 20px from the edges, a 20px gap — so the heading sits centred on the column whenever there is room and, between 640 and ~750, gives way leftwards rather than meet the stack (whose width is the footer line's, font-dependent). The stack's gaps are Apple's clear space, ¼ of the badge's height: 10px. Hidden with everything else while a session runs (the rules at the end of this block, and the screens'). */ .chrome { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); transition: opacity var(--surface-change) ease, visibility 0s linear 0s; } .stack { display: flex; flex-direction: column; align-items: center; gap: 10px; } /* FF-1202 — "Theme" directly above "About Moment": two 44px boxes touching (their own column, no gap), so the labels sit 44 apart; the stack's 10px clear space comes after the pair, above the badge. Centred under 640. */ .chrome-buttons { display: flex; flex-direction: column; align-items: center; } /* Both in FF-1191's Theme button style — 14px / 500, the ink at .7, 10 × 12 padding, the wash on hover — in a 44px row. */ .theme-button, .about-button { border: 0; background: none; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 24px; color: rgb(var(--ink-rgb) / .7); cursor: pointer; transition: color var(--surface-change) ease, background var(--surface-change) ease; } .theme-button:hover, .about-button:hover { color: var(--ink); background: rgb(var(--ink-rgb) / .06); } .theme-button:focus-visible, .about-button:focus-visible { outline: 2px solid var(--lit-accent); } /* The badge: Apple's artwork at 40px high and its native width, in a link that never changes it — no hover, press, scale or tint; the focus ring is the page's, drawn outside the 10px clear space. */ .badge-link { display: block; border-radius: 7px; } .badge-link img { display: block; height: 40px; width: auto; } .badge-link:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 10px; } /* The footer line and the heading: the old rest line's style. The heading is the page's one

, small is fine. */ .footer-line, .tagline { margin: 0; max-width: 60ch; text-align: center; font-family: var(--font-text); font-size: 13px; font-weight: 400; line-height: 1.5; color: rgb(var(--ink-rgb) / .6); } .footer-line { margin-top: 6px; } .footer-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgb(var(--ink-rgb) / .35); } .footer-line a:hover { color: var(--ink); } /* While the one-time notification offer sits under Start (out of flow, so the column never moves) the whole bottom block gives way — Theme, About, the badge, the line, the heading — at every width, and returns when the offer is answered. Vestigial since FF-1192 moved the offer to the first Start, when the chrome is hidden anyway; kept so nothing changes should the offer ever return to rest. */ body.has-offer .chrome { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--surface-change) ease, visibility 0s linear var(--surface-change); } @media (min-width: 640px) { .chrome { position: fixed; inset: auto 0 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 1fr; column-gap: 20px; align-items: end; padding: 0 calc(20px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px)); /* The box spans the viewport's width; only its children take the pointer, so the column's Start under an empty cell is never shadowed. */ pointer-events: none; } .chrome > * { pointer-events: auto; } /* Both in the one row: auto-placement would otherwise start a second row for the heading, whose column comes before the stack's. */ .tagline { grid-area: 1 / 2; } .stack { grid-area: 1 / 3; justify-self: end; align-items: flex-end; } /* Both labels end on the badge's right edge: each box carries 12px side padding */ .chrome-buttons { align-items: flex-end; } .theme-button, .about-button { margin-right: -12px; } .footer-line { margin-top: 0; text-align: right; white-space: nowrap; } } body.is-running .chrome, body.is-paused .chrome, body.is-finished .chrome { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--surface-change) ease, visibility 0s linear var(--surface-change); } /* ---- The Menu (FF-1193) ----------------------------------------------------- A 44px disc of the capsule's off-glass, fixed top right (16px in on phones, 20 from 640px), outside the chrome and above it — never inert. Three lines, 18 × 2, 5 apart, the ink at .7, full on hover with the wash. Quiet — the whole disc at half opacity — in every state but idle-home; full again on hover and focus; always one Tab stop. */ .menu-button { position: fixed; z-index: 3; top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; color: rgb(var(--ink-rgb) / .7); cursor: pointer; transition: background var(--surface-change) ease, box-shadow var(--surface-change) ease, color var(--surface-change) ease, opacity var(--surface-change) ease; } .menu-button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(var(--ink-rgb) / .06); opacity: 0; pointer-events: none; transition: opacity var(--surface-change) ease; } .menu-button:hover { color: var(--ink); } .menu-button:hover::after { opacity: 1; } .menu-lines { position: relative; width: 18px; height: 16px; fill: currentColor; } .menu-button:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--base), 0 0 0 5px var(--lit-accent); } body:not(.is-idle) .menu-button, body[class*="is-screen-"] .menu-button { opacity: .5; } body[class] .menu-button:is(:hover, :focus-visible) { opacity: 1; } @media (min-width: 640px) { .menu-button { top: calc(20px + env(safe-area-inset-top, 0px)); right: calc(20px + env(safe-area-inset-right, 0px)); } } /* ---- The panel (FF-1193) ----------------------------------------------------- A fixed to the right edge, full height, min(320px, 100vw − 44px) wide — a strip of dim always remains to tap, and the timer shows through it. The base, not white: iOS 26 Safari tints its bar from the page, and a white panel would hijack it. Slides in from the right in 0.25 s with the dim fading; closes at once, as the sheets do. It scrolls itself, the safe-area insets inside; padding-free, so a tap on the dim — which lands on the dialog itself — is the only click the dialog sees. */ .panel { border: 0; padding: 0; margin: 0; position: fixed; inset: 0 0 0 auto; width: min(320px, calc(100vw - 44px)); max-width: none; height: auto; max-height: none; background: var(--base); color: var(--ink); box-shadow: 0 24px 60px rgb(0 0 0 / .25); overflow: auto; overscroll-behavior: contain; } .panel::backdrop { background: rgb(0 0 0 / .15); } @media (prefers-color-scheme: dark) { .panel::backdrop { background: rgb(0 0 0 / .3); } } .panel[open] { animation: panel-slide .25s ease-out; } .panel[open]::backdrop { animation: dim-fade .25s ease-out; } @keyframes panel-slide { from { transform: translateX(100%); } to { transform: none; } } @keyframes dim-fade { from { opacity: 0; } to { opacity: 1; } } .panel-inner { min-height: 100%; padding: calc(20px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) 20px; } /* The close disc first, top right, 20px in — then the site's map. */ .panel-head { display: flex; justify-content: flex-end; margin-bottom: 8px; } .panel-list { list-style: none; margin: 0; padding: 0; } .panel .divider { margin: 12px 0; } /* The rows (the panel's and About's): 44px, 17px, the ink, a full-width tap with the wash on hover; the current page's row in the heavier weight. */ .panel-list a, .link-rows a, .link-rows .link-row-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; margin: 0 -12px; border-radius: 10px; font-size: 17px; line-height: 1.3; color: var(--ink); text-decoration: none; } .panel-list a:hover, .link-rows a:hover, .link-rows .link-row-button:hover { background: rgb(var(--ink-rgb) / .06); } .panel-list a:focus-visible, .link-rows a:focus-visible, .link-rows .link-row-button:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: -2px; } .panel-list a[aria-current="page"] { font-weight: 600; } .group-label { margin: 16px 0 4px; font-size: 13px; line-height: 1.4; color: rgb(var(--ink-rgb) / .6); } /* ---- About Moment (FF-1193, rewritten in FF-1212): the head, the text, the list, the store sentence, the rows */ /* FF-1212 — the icon beside the name, and the maker under it where a Mac About panel puts it: 36px at radius 9; "Made by Lumi" 13px / 1.3, the ink at .6. The name in the display font, as the inner pages' brand link draws it (FF-1194 §1); the Sound and Breaks sheets' titles stay in the system font (.sheet-head h2). */ .about-head { display: flex; align-items: center; gap: 12px; } .about-head img { width: 36px; height: 36px; border-radius: 9px; flex: none; } .about-title { line-height: 1.2; font-family: var(--font-display); } .about-by { margin: 1px 0 0; font-size: 13px; line-height: 1.3; color: rgb(var(--ink-rgb) / .6); } /* The paragraphs (FF-1202's style; FF-1212's two): 15px / 1.4, the ink at .8, 10px apart. */ .about-text { margin: 8px 0 0; font-size: 15px; line-height: 1.4; color: rgb(var(--ink-rgb) / .8); } .about-text + .about-text { margin-top: 10px; } /* FF-1212 — the web timer next to the app: three bullets in the paragraphs' 15px / 1.4 and ink, discs indented 18px, 10px above and 6px between; each leads with what you do, in the full ink at 600. */ .about-list { margin: 10px 0 0; padding: 0 0 0 18px; font-size: 15px; line-height: 1.4; color: rgb(var(--ink-rgb) / .8); } .about-list li + li { margin-top: 6px; } .about-list strong { color: var(--ink); font-weight: 600; } /* The way to the app stands out a little: the store sentence at 600 (Milosz, 2026-10-08). */ .about-line { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink); } /* The store sentence's link, "available on the App Store": underlined in the line's ink */ .about-line a, .about-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgb(var(--ink-rgb) / .35); } .about-line a:hover, .about-text a:hover { text-decoration-color: var(--ink); } .about-line a:focus-visible, .about-text a:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 2px; border-radius: 2px; } .link-rows { list-style: none; margin: 8px 0 0; padding: 0; } .link-rows .chevron { width: 8px; height: 14px; flex: none; color: rgb(var(--ink-rgb) / .35); } /* FF-1243 — the Introduction row is a button (it opens the introduction): drawn as the links, the row's full width with their 12px overhang, its words on the left. */ .link-rows .link-row-button { width: calc(100% + 24px); border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; } /* ---- The live region ------------------------------------------------------- */ .live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ---- Sheets (): a bottom sheet on phones, a centred 400px panel above */ .sheet { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; max-height: calc(100vh - 40px); position: fixed; inset: auto 0 0 0; border-radius: 28px 28px 0 0; background: var(--lit-fill); color: var(--ink); box-shadow: 0 -8px 40px rgb(0 0 0 / .18); overflow: auto; } /* ::backdrop inherits no custom properties, so the dim is literal: the app's editing dim, 0.15 by day and 0.30 by night. */ .sheet::backdrop { background: rgb(0 0 0 / .15); } @media (prefers-color-scheme: dark) { .sheet::backdrop { background: rgb(0 0 0 / .3); } } .sheet[open] { animation: sheet-rise .25s ease-out; } @keyframes sheet-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } @media (min-width: 480px) { .sheet { inset: 0; margin: auto; width: min(400px, calc(100vw - 40px)); height: fit-content; border-radius: 28px; box-shadow: 0 24px 60px rgb(0 0 0 / .25); } } /* FF-1202 — from 960 the sheet and the column are both centred, and About at 542px ended 7px above Start's bottom edge: a coloured lip under the sheet. A 568px floor covers Start whatever the fonts; capped by the window like .sheet's max-height, so a short window keeps the margins and the sheet's own scroll. FF-1212 — About is 602px now and covers Start by 23px at 1280×800 without the floor, so it no longer binds; it stays as the guard for another font, where two lines fewer would show the lip again. About has no Press row (the footer carries it), so nothing removes it. */ @media (min-width: 960px) { #aboutSheet { min-height: min(568px, calc(100vh - 40px)); } } .sheet-inner { padding: 20px 20px 24px; } .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .sheet-head h2 { margin: 0; font-size: 17px; font-weight: 600; } .sheet-close { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: rgb(var(--ink-rgb) / .08); color: var(--ink); cursor: pointer; } .sheet-close svg { width: 12px; height: 12px; } .sheet-close:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 2px; } /* ---- The newsletter form (FF-1238) and its popup (Revision 1) ---------------- Here, not in page.css: the form sits in the popup on every page, the timer's included, and in the column on /newsletter/. The label at 600 in the full ink, 8px above the field. The field is the capsule in shape (56 tall, a 28px radius, 20px inset) in the text font at 17px — never under 16, or iPhone zooms — on the download card's fill with a 1px ring at the ink's .5 (the round dots' outline, 3:1 in both modes), and the capsule's focus ring: the 2px accent inside the edge, the glow by day. The button is Start (.primary, above) at 56px and 17px. Under 480 the two stack, each the full width, 10px apart; from 480 they share a row, the button its own width. The status line 12px under them; its message echoes the address, so it breaks inside one. Success hides .form-fields with its hidden attribute, so the wrapper sets no display. The honeypot's container sits off-screen (not display: none), so a bot that skips hidden fields still fills it. The words take their surroundings' size: the prose's 17px on the page, the sheet's 15px / 1.4 in the popup, the paragraph as About's. */ .form-fields label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--ink); } .form-row { display: flex; flex-direction: column; gap: 10px; } .form-field { flex: 1 1 auto; min-width: 0; height: 56px; border-radius: 28px; padding: 0 20px; border: 0; background: var(--lit-fill); box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .5); font-family: var(--font-text); font-size: 17px; color: var(--ink); } .form-field:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--lit-accent), var(--lit-glow); } .form-submit { height: 56px; border-radius: 28px; padding: 0 24px; font-size: 17px; } @media (min-width: 480px) { .form-row { flex-direction: row; } .form-submit { flex: none; } } .newsletter-form .form-status { margin: 12px 0 0; color: var(--ink); overflow-wrap: anywhere; } .form-status:focus { outline: none; } .newsletter-trap { position: absolute; left: -5000px; } .sheet .newsletter-text { margin: 0 0 16px; font-size: 15px; line-height: 1.4; color: rgb(var(--ink-rgb) / .8); } .sheet .newsletter-form { font-size: 15px; line-height: 1.4; } .row { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 17px; } .row[hidden] { display: none; } .row label { flex: 1 1 auto; } .row.is-disabled { opacity: .4; } .divider { border: 0; border-top: 1px solid rgb(var(--ink-rgb) / .12); margin: 12px 0; } .caption { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: rgb(var(--ink-rgb) / .6); } .caption[hidden] { display: none; } /* The switch: the system's look, tinted with the theme's Primary */ .switch { appearance: none; -webkit-appearance: none; flex: none; width: 51px; height: 31px; border-radius: 16px; background: rgb(var(--ink-rgb) / .16); position: relative; cursor: pointer; transition: background var(--surface-change) ease; } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 1px 1px rgb(0 0 0 / .16); transition: transform var(--surface-change) ease; } .switch:checked { background: var(--primary); } .switch:checked::after { transform: translateX(20px); } .switch:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 2px; } /* The sliders: a thin track, the theme's Primary to the thumb */ .slider { appearance: none; -webkit-appearance: none; flex: 1 1 auto; min-width: 0; height: 28px; background: transparent; cursor: pointer; --value: 50%; } .slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--primary) var(--value), rgb(var(--ink-rgb) / .14) var(--value)); } .slider::-moz-range-track { height: 4px; border-radius: 2px; background: rgb(var(--ink-rgb) / .14); } .slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--primary); } .slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; margin-top: -10px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .25), 0 0 0 .5px rgb(0 0 0 / .08); } .slider::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .25); } .slider:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 2px; border-radius: 14px; } .slider:disabled { cursor: default; } .row .end-glyph { width: 14px; height: 14px; flex: none; color: rgb(var(--ink-rgb) / .5); } /* The theme sheet's cards (ThemeSettingsView): the art, the name, a check */ .theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; } .theme-card { position: relative; min-height: 60px; border-radius: 15px; border: 0; padding: 0 8px; display: flex; align-items: center; justify-content: center; gap: 2px; overflow: hidden; cursor: pointer; color: var(--t-ink); font-family: var(--font-display); font-weight: 600; font-size: 15px; background: rgb(var(--ink-rgb) / .06); box-shadow: 0 .5px 1px rgb(0 0 0 / .08); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s ease; } .theme-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .theme-card > span, .theme-card > svg { position: relative; } .theme-card svg { width: 15px; height: 15px; display: none; } .theme-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid color-mix(in srgb, var(--t-ink) 30%, transparent); pointer-events: none; } .theme-card[aria-pressed="true"] { transform: scale(1.03); box-shadow: 0 2px 3px rgb(0 0 0 / .2); } .theme-card[aria-pressed="true"]::after { border: 1.5px solid color-mix(in srgb, var(--t-ink) 60%, transparent); } .theme-card[aria-pressed="true"] svg { display: block; } .theme-card:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 2px; } /* Each card's ink: its own Dark token shaded 45 % to black by day, white by night */ .theme-card[data-theme="ocean"] { --t-ink: #072840; } .theme-card[data-theme="air"] { --t-ink: #28164d; } .theme-card[data-theme="sand"] { --t-ink: #432b08; } .theme-card[data-theme="forest"] { --t-ink: #112e19; } /* The app's rule (Theme+ThemeCard.swift): white on the night art in dark, the theme's dark ink on the day art in light, black under increased contrast. `[data-theme]` keeps the selector as specific as the per-theme inks above. */ /* The check on the chosen card: a disc in the card's ink with a white tick screened over it in light; in dark the disc is white, so the tick is dark. */ .theme-card .theme-check { stroke: #fff; mix-blend-mode: screen; } @media (prefers-color-scheme: dark) { .theme-card[data-theme] { --t-ink: #fff; } .theme-card .theme-check { stroke: #0d0f12; mix-blend-mode: normal; } } @media (prefers-contrast: more) and (prefers-color-scheme: light) { .theme-card[data-theme] { --t-ink: #000; } } /* ========================================================================== FF-1192 — Breaks: the three screens over the column, the dots, the Breaks sheet's steppers. The app is the design: SessionOverScreenView, BreakScreenView, BreakOverScreenView, BreaksSheetView; the slots are BreakScreenLayout's and BreakOverLayout's at 1pt = 1px. ========================================================================== */ /* The home's pieces give way on a screen: hidden in place, so the column's box never changes, and cross-faded with the screen coming in. The Start slot stays — the button in it is the screen's. */ body[class*="is-screen-"] :is(#capsule, #dial, #homeDots, .options) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--screen-swap) ease-in-out, visibility 0s linear var(--screen-swap); } body[class*="is-screen-"] .chrome { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--surface-change) ease, visibility 0s linear var(--surface-change); } /* A screen: a layer over the column from the capsule's top to the Start slot's top (the column's bottom less the 60px slot), its sides the column's insets. A flex column: the band takes the room above the dots. */ .screen { position: absolute; top: 0; left: 16px; right: 16px; bottom: 60px; display: flex; flex-direction: column; align-items: stretch; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--screen-swap) ease-in-out, visibility 0s linear var(--screen-swap); } .screen.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } @media (min-width: 480px) { .screen { left: 20px; right: 20px; } } /* Session over and Break over: the field's bottom on the cards' bottom, so rowToStart (26) sits under it; the Break screen's dots sit dotsClearance (14) above Skip break. */ .screen-session-over, .screen-break-over { padding-bottom: 26px; } .screen-break { padding-bottom: 14px; } /* The band: the badge and title (or the countdown group) centred in it. */ .screen .band { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; text-align: center; } .screen .band-group { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; max-width: 100%; } /* The badge (SessionEndHeading / FF-1132's badge): the card-name role on the off glass in a capsule, the glyph in the accent, 12 × 6 padding; a heading that takes keyboard focus as the screen appears. */ .badge { margin: 0; padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink); white-space: nowrap; } .badge svg { width: 14px; height: 14px; color: var(--lit-accent); flex: none; } .badge:focus { outline: 0; } .badge:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 3px; } /* The title (the onboarding heading): Unbounded SemiBold 28, 8 under the badge. */ .screen-title { margin: 8px 0 0; position: relative; font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--ink); } /* The Break screen's countdown: the digits alone — Unbounded Light 64, tabular, −2 % — "OF N MIN" in the dial's unit style under it, the suggestion 24 below in the capsule's line, three lines reserved. */ .break-time { margin-top: 8px; display: flex; flex-direction: column; align-items: center; position: relative; } .break-countdown { margin: 0; position: relative; font-family: var(--font-display); font-weight: 300; font-size: 64px; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; } .break-length { margin: 0; position: relative; font-size: 13px; font-weight: 400; letter-spacing: .85px; line-height: 1.3; color: rgb(var(--ink-rgb) / .65); white-space: nowrap; } .break-suggestion { margin: 24px 0 0; max-width: 335px; min-height: 84px; font-family: var(--font-display); font-weight: 300; font-size: 22px; line-height: 28px; color: var(--ink); } /* The pools (epic FF-1130 decision 4; BreakScreenShadow / BreakScreenLightPool): a radial behind the type that has no material behind it, over the art only — which, on the web, is always. Dark mode: a black ellipse at 0.40, flat to 55 % then easing out, the element's bounds + 24 — behind the countdown, "OF N MIN", the titles and the dots; never the badge (glass) or the suggestion. Light mode: one white radial (0.75, flat to 70 %) under the whole group, and the dots' and the link's own. CSS gradients on the elements; nothing on the backdrop (epic decision 3). */ .pool::before, .dots-slot.pooled::before, .session-end-link::before, .band-group::before { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; } .pool { position: relative; isolation: isolate; } /* Each curve is BreakScreenShadow.stops(peak:plateau:): the peak flat to the plateau, then a 12-step smoothstep tail (3t² − 2t³) to clear at the edge, so the tail leaves and arrives flat and the eye draws no ring. */ .pool::before, .dots-slot.pooled::before { inset: -24px; /* dark: peak 0.40, plateau 0.55 */ background: radial-gradient(ellipse closest-side, rgb(0 0 0 / .400) 0 55%, rgb(0 0 0 / .392) 58.75%, rgb(0 0 0 / .370) 62.5%, rgb(0 0 0 / .338) 66.25%, rgb(0 0 0 / .296) 70%, rgb(0 0 0 / .250) 73.75%, rgb(0 0 0 / .200) 77.5%, rgb(0 0 0 / .150) 81.25%, rgb(0 0 0 / .104) 85%, rgb(0 0 0 / .063) 88.75%, rgb(0 0 0 / .030) 92.5%, rgb(0 0 0 / .008) 96.25%, rgb(0 0 0 / 0) 100%); display: none; } .band-group::before { inset: -64px -72px; /* light, the group: peak 0.75, plateau 0.70 */ background: radial-gradient(ellipse closest-side, rgb(255 255 255 / .750) 0 70%, rgb(255 255 255 / .735) 72.5%, rgb(255 255 255 / .694) 75%, rgb(255 255 255 / .633) 77.5%, rgb(255 255 255 / .556) 80%, rgb(255 255 255 / .468) 82.5%, rgb(255 255 255 / .375) 85%, rgb(255 255 255 / .282) 87.5%, rgb(255 255 255 / .194) 90%, rgb(255 255 255 / .117) 92.5%, rgb(255 255 255 / .056) 95%, rgb(255 255 255 / .015) 97.5%, rgb(255 255 255 / 0) 100%); } .session-end-link { position: relative; isolation: isolate; } .session-end-link::before, .dots-slot.pooled::before { /* light, the dots and the link: peak 0.75, plateau 0.55 */ background: radial-gradient(ellipse closest-side, rgb(255 255 255 / .750) 0 55%, rgb(255 255 255 / .735) 58.75%, rgb(255 255 255 / .694) 62.5%, rgb(255 255 255 / .633) 66.25%, rgb(255 255 255 / .556) 70%, rgb(255 255 255 / .468) 73.75%, rgb(255 255 255 / .375) 77.5%, rgb(255 255 255 / .282) 81.25%, rgb(255 255 255 / .194) 85%, rgb(255 255 255 / .117) 88.75%, rgb(255 255 255 / .056) 92.5%, rgb(255 255 255 / .015) 96.25%, rgb(255 255 255 / 0) 100%); } .session-end-link::before { inset: -14px -24px; } .dots-slot.pooled { isolation: isolate; } .dots-slot.pooled::before { display: block; inset: -22px -24px; } @media (prefers-color-scheme: dark) { .pool::before { display: block; } .band-group::before, .session-end-link::before { display: none; } .dots-slot.pooled::before { inset: -24px -24px; background: radial-gradient(ellipse closest-side, rgb(0 0 0 / .400) 0 55%, rgb(0 0 0 / .392) 58.75%, rgb(0 0 0 / .370) 62.5%, rgb(0 0 0 / .338) 66.25%, rgb(0 0 0 / .296) 70%, rgb(0 0 0 / .250) 73.75%, rgb(0 0 0 / .200) 77.5%, rgb(0 0 0 / .150) 81.25%, rgb(0 0 0 / .104) 85%, rgb(0 0 0 / .063) 88.75%, rgb(0 0 0 / .030) 92.5%, rgb(0 0 0 / .008) 96.25%, rgb(0 0 0 / 0) 100%); } } /* The session-end field (SessionEndField): the home's capsule in the cards' slot — Session over's at rest, the break's kind and minutes in the label ink with the leaf in the accessory disc; Break over's with the next focus and the pencil, edited in place. */ .session-end-field { margin-top: 14px; flex: none; } .capsule-line { flex: 1 1 auto; min-width: 0; margin: 0; height: 28px; font-family: var(--font-display); font-weight: 300; font-size: 22px; line-height: 28px; color: var(--ink); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .accessory.leaf { pointer-events: none; } .accessory.leaf svg { width: 16px; height: 16px; } #nextFocusField:focus-within { box-shadow: inset 0 0 0 2px var(--lit-accent), var(--lit-glow); } #nextFocusField.off:focus-within { box-shadow: none; } /* "Skip break": the primary's slot and size on the off glass, no glyph. */ .primary.surface.off { background: var(--glass-fill); color: var(--ink); box-shadow: none; } .primary.surface.off:focus-visible { box-shadow: 0 0 0 3px var(--base), 0 0 0 5px var(--lit-accent); } body.is-screen-break .primary .icon { display: none; } /* "Another 5 minutes": the app's text link (lumiTertiary — 15px, the ink at 0.7), hugging its label, 10 under Start in a 44px row, out of flow. */ .session-end-link { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px; height: 44px; padding: 0 12px; border: 0; background: none; border-radius: 10px; font-size: 15px; font-weight: 400; line-height: 1.2; white-space: nowrap; color: rgb(var(--ink-rgb) / .7); cursor: pointer; transition: opacity var(--press) ease-out; } .session-end-link[hidden] { display: none; } .session-end-link:active { opacity: .5; } .session-end-link:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 0; } /* ---- The Breaks sheet's rows (BreaksSheetView) --------------------------------- */ .row-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .sub-line { font-size: 13px; line-height: 1.35; color: rgb(var(--ink-rgb) / .6); } .sub-line[hidden] { display: none; } .stepper-row { gap: 16px; } .stepper-row[aria-disabled="true"] { opacity: .4; } .stepper { display: flex; align-items: center; gap: 12px; flex: none; } .stepper-value { min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; padding: 4px 2px; border-radius: 6px; } .stepper-value:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 2px; } .stepper-buttons { display: flex; border-radius: 10px; overflow: hidden; background: rgb(var(--ink-rgb) / .08); } .step { width: 44px; height: 44px; border: 0; padding: 0; background: none; display: grid; place-items: center; color: var(--ink); cursor: pointer; } .step svg { width: 12px; height: 12px; } .step + .step { border-left: 1px solid rgb(var(--ink-rgb) / .12); } .step:disabled { opacity: .35; cursor: default; } .step:not(:disabled):active { background: rgb(var(--ink-rgb) / .08); } .caption.is-dimmed { opacity: .4; } /* The sheet morphs live when the state changes beneath it (0.2 s ease). */ .sub-line, .caption, .stepper-row { transition: opacity var(--surface-change) ease; } /* ========================================================================== FF-1243 — The introduction (docs/ux-briefs/ff-1243-intro.md): the app's onboarding as one more .sheet — a bottom sheet under 480, the 400px card from 480, the sheet's fill, ink, dim and rise. Two things the other sheets don't have: one height on every page, so Begin and Continue never move (min(498px, the window less 40) — the tallest page's height, breaks since FF-1255, at every width from 375 — the page showing taking the room, the foot last in the flow and never sticky — taller content scrolls inside the sheet as today); and a head row without an h2 — Back at the left, Close at the right, 30px tall, 8 under — whose empty slot stays (no Skip: FF-1255 revision 1). Each page's title is its own h2: the display font at 24 / 600, the sentences 15 / 1.4 at the ink's .8, both centred within 320px. ========================================================================== */ /* Its own scroll stays its own: at 320×568 the app page scrolls inside the sheet, and the wheel must not go on to scroll the timer under the dim. */ .intro { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overscroll-behavior: contain; } .intro-inner { position: relative; display: flex; flex-direction: column; min-height: min(498px, calc(100vh - 40px)); min-height: min(498px, calc(100dvh - 40px)); } /* From 960 the card and the column are both centred, and 498 ended above Start's bottom edge — a lip of the dimmed Start under the card. About's FF-1202 floor (568, capped by the window) covers it; every page fits. */ @media (min-width: 960px) { .intro-inner { min-height: min(568px, calc(100vh - 40px)); min-height: min(568px, calc(100dvh - 40px)); } } .intro-head { position: relative; z-index: 1; flex: none; height: 30px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; } .intro-slot { display: flex; align-items: center; gap: 4px; } /* Back: 15 / 600 at the ink's .8 in a 44px-tall hit box that overhangs the 30px row (Back's text on the content's left edge). */ .intro-text-button { height: 44px; margin: -7px 0; padding: 0 10px; border: 0; border-radius: 10px; background: none; font-size: 15px; font-weight: 600; line-height: 1.2; color: rgb(var(--ink-rgb) / .8); cursor: pointer; } #introBack { margin-left: -10px; } .intro-text-button[hidden] { display: none; } .intro-text-button:hover { color: var(--ink); } .intro-text-button:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: -2px; } /* The pages: one showing, fading in over 0.2 s (opacity only — no slide inside a scrolling sheet). The title takes focus as the page shows; it is not a control, so it draws no ring. */ .intro-page { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; animation: intro-fade .2s ease-out; } .intro-page[hidden] { display: none; } @keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } } .intro-title { margin: 8px 0 0; max-width: 320px; font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--ink); } .intro-title:focus { outline: none; } .intro-text { margin: 8px 0 0; max-width: 320px; font-size: 15px; line-height: 1.4; color: rgb(var(--ink-rgb) / .8); } /* Welcome (FF-1255, Milosz's card 71: "much simpler"): the app icon, the title 16 under it and the line, centred in the room above Begin. The icon is the theme in force's — the page's data-theme picks the picture, so a theme picked on the last page shows on a Back here, and the others stay display: none and never load — the dark icon by night, 80px (the files are 160). alt="": the heading names the app. */ .intro-page[data-page="welcome"] { justify-content: center; } .intro-page[data-page="welcome"] .intro-title { margin-top: 16px; } .intro-icon { flex: none; } .intro-icon picture { display: none; } html[data-theme="ocean"] .intro-icon picture[data-theme="ocean"], html[data-theme="air"] .intro-icon picture[data-theme="air"], html[data-theme="sand"] .intro-icon picture[data-theme="sand"], html[data-theme="forest"] .intro-icon picture[data-theme="forest"] { display: block; } .intro-icon img { width: 80px; height: 80px; } /* FF-1255 revision 1 (Milosz: "it's getting lost"): the icon stands off the sheet — a drop-shadow, so it follows the icon's transparent corners; a soft wide one and a tight contact one, stronger on the near-black sheet. */ .intro-icon img { filter: drop-shadow(0 8px 18px rgb(0 0 0 / .16)) drop-shadow(0 1px 3px rgb(0 0 0 / .14)); } @media (prefers-color-scheme: dark) { .intro-icon img { filter: drop-shadow(0 8px 22px rgb(0 0 0 / .7)) drop-shadow(0 1px 3px rgb(0 0 0 / .6)); } } /* The slides' examples: the site's own markup, static, centred in the room that remains, at least 24px above and below. */ .intro-example { flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 0; } /* FF-1255 — Milosz's card 71: a squashed radial shadow under the intentions field, so it stands out on the fill (the break mockup's became a round pool, below). Each mockup sits in .intro-cast, whose ::before is the shadow: behind the mockup (z-index −1 in a wrapper that isolates it — the capsule's backdrop-filter would paint its own child over its fill), an ellipse fading from --intro-cast to clear, 88 % of the mockup's width and 28px tall, centred on its foot. Black in both appearances, a shadow and not a glow: .12 on the white sheet, .55 on the near-black one, where less would not show. */ .intro { --intro-cast: rgb(0 0 0 / .12); --intro-pool: rgb(0 0 0 / .06); } @media (prefers-color-scheme: dark) { .intro { --intro-cast: rgb(0 0 0 / .55); --intro-pool: rgb(255 255 255 / .05); } } .intro-cast { position: relative; isolation: isolate; } .intro-cast::before { content: ""; position: absolute; z-index: -1; pointer-events: none; } .intro-intention .intro-cast::before { left: 6%; right: 6%; bottom: -14px; height: 28px; background: radial-gradient(ellipse closest-side, var(--intro-cast), transparent); } /* Milosz: "The squished shadow on Breaks page looks weird. Can you make it just a radial circle? Just a light grey, lighter than that squished shadow one." Behind the break example a round pool: a 280px circle centred on it (the content box at 320, so it never reaches the sheet's edges), fading from --intro-pool — black at .06 by day, white at .05 by night, the same quiet pool rather than a glow — to clear. Out of flow: the page's height and Continue's place are untouched. */ .intro-break .intro-cast::before { left: 50%; top: 50%; right: auto; bottom: auto; width: 280px; height: 280px; transform: translate(-50%, -50%); background: radial-gradient(circle closest-side, var(--intro-pool), transparent); } /* The intentions field, slightly narrower than the content (it was 350–360): within 310px, where its line (234px at 18) still has 242. */ .intro-intention .intro-cast { width: 100%; max-width: 310px; } /* By night the lit capsule is the sheet's own #1a1a1c: a wash of white at .07 gives the field its shape on the dark sheet, as the badge's wash does. */ @media (prefers-color-scheme: dark) { .intro-capsule.surface.lit { background: rgb(255 255 255 / .07); } } .intro-break .intro-cast { display: flex; flex-direction: column; align-items: center; } /* The capsule, scaled as the Break head is below (56 → 48, its line 22 → 18, 16 under 360 wide), so "Write the first chapter" — 286px at the page's 22 — reads whole in the 200–280px its line has here. */ .intro-capsule { height: 48px; border-radius: 24px; padding-left: 20px; } .intro-capsule .capsule-line { height: 24px; font-size: 18px; line-height: 24px; } .intro-capsule .capsule-slot { width: 48px; height: 48px; } @media (max-width: 359px) { .intro-capsule .capsule-line { font-size: 16px; } } /* The titles on one line under 350 wide: "Welcome to Moment" is 310px at 24, 271 at 21, in 280px of content at 320. */ @media (max-width: 349px) { .intro-title { font-size: 21px; } /* FF-1255: the app page's rows wrap here and the page grows to 527px; the sheet holds it, so the head (Back, Close) stays put between pages. */ .intro-inner { min-height: min(527px, calc(100vh - 40px)); min-height: min(527px, calc(100dvh - 40px)); } } /* The Break screen's head, smaller, on the fill (no pool): the badge's capsule shown by a wash, as on glass by night; the countdown at 44 for 64; the suggestion in the capsule's line at 18 for 22. */ .intro-break .badge { background: rgb(var(--ink-rgb) / .06); } .intro-break .break-countdown { margin-top: 8px; font-size: 44px; } .intro-break .break-suggestion { margin-top: 16px; max-width: 280px; min-height: 0; font-size: 18px; line-height: 24px; } /* FF-1255 — the app page's four rows, as the app's Welcome benefit rows: a 34px tile (10px corners) 10px from the row's words, 10px between rows — the app's 25 % black on its art becomes a wash of the ink at .07 on the sheet, its white glyph the ink, so the tile is as quiet by day as by night. The words at 15 / 500 in the ink; the list centred in the room that remains, its rows left-aligned within 320px. */ .intro-rows { flex: 1 0 auto; width: 100%; max-width: 320px; display: flex; flex-direction: column; justify-content: center; gap: 10px; margin: 0; padding: 24px 0; list-style: none; text-align: left; } /* The tile hangs from the row's first line, as the app's (a one-line row centres on it; a wrapped one, at 320, keeps its tile by the first line). */ .intro-rows li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); } .intro-rows li > span:last-child { padding-top: 7px; } .intro-tile { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgb(var(--ink-rgb) / .07); color: var(--ink); } .intro-tile svg { width: 20px; height: 20px; } /* The store line: About's — 600, the link underlined in the line's ink. */ .intro-line { margin: 0; max-width: 320px; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink); } .intro-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgb(var(--ink-rgb) / .35); } .intro-line a:hover { text-decoration-color: var(--ink); } .intro-line a:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 2px; border-radius: 2px; } /* Choose your space: the Theme sheet's grid, the content's width, centred in the room that remains as the slides' examples are, at least 24px clear. */ .intro-page .theme-grid { width: 100%; margin: auto 0; padding: 24px 0; text-align: left; } /* The foot: the dots row (27px; three 7px discs 9 apart, the current one in the ink, the others at .2 — kept, empty, on Welcome and the last page), then Begin or Continue: Start's colours at the newsletter's 56 / 17, the content's full width. */ .intro-foot { flex: none; display: flex; flex-direction: column; padding-top: 8px; } .intro-dots { height: 27px; display: flex; align-items: center; justify-content: center; gap: 9px; visibility: hidden; } .intro-dots.is-shown { visibility: visible; } .intro-dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--ink-rgb) / .2); transition: background .2s ease; } .intro-dot.is-current { background: var(--ink); } .intro-next { flex: none; width: 100%; height: 56px; border-radius: 28px; font-size: 17px; } .intro-next[hidden] { display: none; } /* ========================================================================== FF-1197 — Embed mode: the timer alone in a frame (Notion's embed block, or any iframe). `/?embed` sets data-embed on in the head's pre-paint script, so nothing here flashes in. The page is the design: the column stays as it is, the Sound and Breaks sheets and the three screens included; only the chrome goes, and the mark takes its corner. ========================================================================== */ /* The chrome leaves the tree — display: none, not merely inert: the Menu with its panel, the bottom-right stack with the heading, the Theme and About sheets (nothing opens them: their buttons are the stack's). FF-1202 — no Theme control in a frame: the author sets the look with theme=, and a save from the guide's same-origin frame would overwrite the visitor's theme on /. The notification offer is off in main.js (no browser grants a frame notifications). FF-1243 — the introduction too: intro.js never opens it in a frame, and About, whose row reopens it, is gone. */ html[data-embed] header.menu, html[data-embed] footer.chrome, html[data-embed] #themeSheet, html[data-embed] #aboutSheet, html[data-embed] #newsletterSheet, html[data-embed] #introSheet { display: none; } /* The phone's numbers at every width, since the chrome the ≥640 rules made room for is gone: 16px above and below the column, and the reserve the column's 372 (340 + 16 + 16) plus 32 for the mark's row. So the full 272px dial from 676px tall (at 432 wide); from 572 to 676 the dial shrinks with the frame; below 572 it holds at its 168 floor and the frame scrolls internally — Start under the fold at Notion's default height, which the guide's step 3 fixes (drag to about 650). */ html[data-embed] .stage { padding: 16px 0; } html[data-embed] .column { --reserve: 404px; } /* The mark: one link — the app icon at 16px and "Moment" — bottom right, in flow after the column (a