/* ========================================================================== Fellowship Timer — styles Mobile-first. One calm dark theme; the timer screen re-tints per stage (main / final / done) so the state is visible from across the room. ========================================================================== */ :root { color-scheme: dark; --bg: #151b26; --bg-2: #222c3a; --fg: #f3f5f8; --fg-2: #a9b3c2; --accent: #7cc4b5; --accent-fg: #0d1a17; --danger: #f08a8a; --danger-fg: #2e0e11; /* Selected state for chips: a tint of the accent, so the solid accent fill stays reserved for the one button you are meant to press. */ --accent-soft: rgba(124, 196, 181, 0.20); /* A radius scale instead of one blanket value: squarer shapes read as more deliberate, and the size of the corner helps rank the controls. */ --r-lg: 14px; /* primary action, cards */ --r-md: 10px; /* secondary and tertiary buttons, chips */ --r-sm: 8px; /* small square controls */ --hairline: rgba(255, 255, 255, 0.12); --hairline-strong: rgba(255, 255, 255, 0.20); --gutter: 16px; --tap: 56px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* stage tints: applied to so the whole viewport (safe areas too) changes */ body[data-screen="timer"][data-stage="final"] { --bg: #3a2a0f; --bg-2: #4d3a17; --accent: #f2b84b; --accent-fg: #2a1d05; } body[data-screen="timer"][data-stage="done"] { --bg: #3f1d22; --bg-2: #55282f; --accent: #f29b9b; --accent-fg: #2e0e11; } *, *::before, *::after { box-sizing: border-box; } /* Author rules with display:flex would otherwise beat the UA's [hidden] rule. */ [hidden] { display: none !important; } html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font); line-height: 1.3; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; transition: background-color 0.45s ease; } #app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; } .screen { flex: 1; min-height: 0; width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; padding-top: max(var(--gutter), env(safe-area-inset-top)); padding-right: max(var(--gutter), env(safe-area-inset-right)); padding-bottom: max(var(--gutter), env(safe-area-inset-bottom)); padding-left: max(var(--gutter), env(safe-area-inset-left)); } .screen[hidden] { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .noscript { padding: 24px; text-align: center; } /* ---------- buttons ---------- */ /* * Three tiers, ranked by how often the control is used during a meeting: * 1. .btn-primary Start / Pause / Resume — solid accent, tallest, lifted. * 2. .btn-secondary Reset — solid but quiet surface, hairline border. * 3. .btn-ghost Settings — outline only, muted label. * Only tier 1 gets the solid accent fill, so there is never a question about * which button is the action. */ .btn { appearance: none; border: 1px solid transparent; border-radius: var(--r-md); min-height: var(--tap); padding: 0 20px; width: 100%; font: inherit; font-size: 17px; font-weight: 600; color: var(--fg); background: var(--bg-2); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.08s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.2s ease; } .btn:active { transform: scale(0.985); } .btn:disabled { opacity: 0.32; cursor: default; } .btn:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; } .btn-primary { background: var(--accent); color: var(--accent-fg); font-weight: 700; border-color: transparent; /* A top highlight plus a soft drop: enough to sit above the page without noise. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 18px rgba(0, 0, 0, 0.30); } .btn-primary:disabled { box-shadow: none; } .btn-secondary { background: var(--bg-2); color: var(--fg); border-color: var(--hairline); } .btn-ghost { background: transparent; color: var(--fg-2); border-color: var(--hairline-strong); } /* The one action of the screen: bigger than everything around it. */ .btn-xl { min-height: 80px; font-size: 26px; font-weight: 700; letter-spacing: 0.01em; border-radius: var(--r-lg); } /* Reset armed for confirmation: reads as a warning, not as the primary action. */ .btn-armed { background: var(--danger); color: var(--danger-fg); border-color: transparent; font-weight: 700; } .btn-link { appearance: none; background: none; border: 0; padding: 10px 0; min-height: 44px; font: inherit; font-size: 16px; color: var(--accent); cursor: pointer; text-align: left; align-self: flex-start; touch-action: manipulation; } .btn-link:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; } /* * Icon buttons (Home, Meeting counters). Small and muted so the timer stays the * protagonist; the 44px target is bigger than the 24px glyph, and the negative * margin lines the glyph up with the content edge instead of the target's edge. */ .btn-icon { appearance: none; background: none; border: 0; padding: 0; width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-2); cursor: pointer; touch-action: manipulation; transition: transform 0.08s ease, color 0.2s ease; } .btn-icon svg { width: 24px; height: 24px; display: block; } .btn-icon:active { transform: scale(0.94); } .btn-icon:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; } .btn-icon-left { margin-left: -10px; } .btn-icon-right { margin-right: -10px; } .header-top { display: flex; align-items: center; gap: 8px; min-width: 0; } /* Return to a live timer from Settings: compact, right of the title, shows the clock. */ .btn-clock { appearance: none; flex: 0 0 auto; min-height: 40px; padding: 0 12px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: transparent; color: var(--fg-2); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; touch-action: manipulation; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .btn-clock:active { transform: scale(0.97); } .btn-clock:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; } .back-time { font-variant-numeric: tabular-nums; } .fineprint { font-size: 13px; color: var(--fg-2); text-align: center; margin: 0; } /* ---------- landing ---------- */ .screen-landing { text-align: center; } .landing-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; } .brand-mark { width: 96px; height: 96px; margin-bottom: 8px; color: var(--accent); } .screen-landing h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.01em; } .tagline { margin: 0; font-size: 18px; color: var(--fg-2); max-width: 30ch; } .how { margin: 12px 0 0; font-size: 15px; color: var(--fg-2); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .how-arrow { opacity: 0.5; } .landing-actions { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; } .landing-footer p { margin: 14px 0 0; font-size: 12px; color: var(--fg-2); opacity: 0.8; } /* ---------- setup ---------- */ .setup-header { padding-bottom: 10px; } .setup-header h1 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 23px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .setup-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 22px; padding-bottom: 12px; } .summary { text-align: center; padding-top: 6px; } .summary-eq { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .summary-eq .plus { color: var(--fg-2); font-weight: 400; margin: 0 10px; } .summary-help { margin: 6px 0 0; font-size: 15px; color: var(--fg-2); } fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } legend { display: block; width: 100%; padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.08em; } legend .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; opacity: 0.9; } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { appearance: none; border: 1px solid var(--hairline); background: var(--bg-2); color: var(--fg); border-radius: var(--r-md); min-height: 48px; padding: 0 18px; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; display: inline-flex; align-items: center; gap: 8px; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .chip:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; } .chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); /* Inset ring instead of a thicker border: reads clearly at low vision without shifting the layout by a pixel when the selection moves. */ box-shadow: inset 0 0 0 1px var(--accent); color: var(--fg); font-weight: 700; } .presets .chip, .modes .chip { flex: 1; justify-content: center; text-align: center; font-variant-numeric: tabular-nums; } /* * Sound pickers: three equal buttons, numbers only, always one row. Numbers stay * readable with large text or page zoom, where names wrapped to two or three lines. * The accessible name carries the real sound name. */ .sound-row { display: flex; gap: 10px; } .snd { appearance: none; flex: 1 1 0; min-width: 0; min-height: 56px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg-2); color: var(--fg); font: inherit; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .snd:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; } .snd[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--fg); font-weight: 700; } .steppers { display: flex; flex-direction: column; gap: 10px; } .stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-2); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 8px 8px 8px 16px; } .stepper-label { font-size: 13px; font-weight: 600; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.08em; } .stepper-row { display: flex; align-items: center; gap: 4px; } .btn-step { appearance: none; border: 0; border-radius: var(--r-sm); width: 52px; height: 52px; flex: 0 0 52px; font: inherit; font-size: 28px; line-height: 1; background: var(--bg); color: var(--fg); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; } .btn-step:disabled { opacity: 0.3; cursor: default; } .btn-step:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; } .stepper-value { min-width: 4.4ch; text-align: center; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; } .setup-actions { padding-top: 12px; } /* ---------- counters screen ---------- */ .screen-counters { max-width: 560px; } .counters-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 8px; } .figures { margin: 0; display: flex; flex-direction: column; gap: 8px; } .figure { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; background: var(--bg-2); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 14px 16px; } .figure dt { font-size: 14px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.08em; } .figure dd { margin: 0; font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; } .counters-note, .counters-empty { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); } .counters-empty { margin-top: 0; } .counters-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; } .counters-actions .btn { text-decoration: none; } /* ---------- timer ---------- */ .screen-timer { max-width: none; text-align: center; } .timer-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; max-width: 720px; margin: 0 auto; } .stage-label { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .timer-config { flex: 0 0 auto; font-size: 18px; color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .timer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; } .clock { font-size: clamp(72px, min(31vw, 40vh), 360px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; user-select: none; -webkit-user-select: none; transition: opacity 0.2s ease; } .stage-help { font-size: 18px; color: var(--fg-2); min-height: 1.4em; } body[data-screen="timer"][data-status="paused"] .clock { opacity: 0.55; } .timer-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto; } .timer-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .timer-secondary .btn { min-height: 56px; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } body[data-screen="timer"][data-stage="done"] .clock { animation: pulse 1.2s ease-in-out infinite; } /* Very narrow phones: the header holds home + title + the live clock, so give the title a smaller size rather than letting it truncate. */ @media (max-width: 360px) { .setup-header h1 { font-size: 18px; } } /* short landscape phones: put the three controls on one row */ @media (max-height: 480px) and (orientation: landscape) { .timer-actions { display: grid; grid-template-columns: 2fr 1fr 1fr; max-width: none; } .timer-secondary { display: contents; } .timer-actions .btn-xl { min-height: 60px; font-size: 20px; } .timer-actions .fineprint { grid-column: 1 / -1; } .stage-label { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }