:root { --bg: #0a0d11; --panel: #151820; --panel-2: #1c2330; --border: #262f3d; --text: #eef1f5; --muted: #8a929f; /* Blue/red boxing corners — accent is overridden per phase on */ --accent: #e63946; --warmup: #f97316; --work: #e63946; --rest: #2563eb; --cooldown: #8b5cf6; --done: #10b981; --danger: #dc2626; --ring-circ: 816.814; /* 2·π·130, set precisely from JS too */ } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; user-select: none; overflow: hidden; } /* draggable strip behind the macOS traffic lights */ .titlebar { position: fixed; top: 0; left: 0; right: 0; height: 28px; -webkit-app-region: drag; z-index: 100; } button, input, select { -webkit-app-region: no-drag; } .view { height: 100vh; height: 100dvh; /* mobile: exclude the browser toolbars */ padding: 40px 22px 22px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; } .hidden { display: none !important; } /* ===================== INSTALL BANNER (web) ===================== */ .install-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); z-index: 50; user-select: text; } .install-icon { width: 48px; height: 48px; border-radius: 11px; flex: none; } .install-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; } .install-text span { color: var(--muted); } .install-btn { flex: none; background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; font: inherit; font-weight: 600; } .install-close { flex: none; background: none; border: 0; color: var(--muted); font-size: 26px; line-height: 1; padding: 4px 6px; } /* ===================== SETUP ===================== */ /* Keep the setup panel a comfortable reading width inside the larger window. */ #setup { max-width: 640px; width: 100%; margin: 0 auto; } #setup .ghost { font-size: 26px; padding: 14px 20px; } .app-header { text-align: center; margin-bottom: 2px; } .app-header h1 { font-size: 44px; margin: 0; letter-spacing: 0.2px; } .preset-row { display: flex; gap: 12px; flex-wrap: wrap; } .preset-row select { flex: 1 1 160px; min-width: 0; /* allow the select to shrink/truncate so Save/Delete never clip */ background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; font-size: 26px; } #setup .ghost { white-space: nowrap; } .config { display: flex; flex-direction: column; gap: 10px; } .field { display: flex; align-items: center; justify-content: space-between; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 10px 16px; } .field label { font-size: 28px; font-weight: 600; color: var(--text); } .field[data-type="warmup"] label { color: var(--warmup); } .field[data-type="work"] label { color: var(--work); } .field[data-type="rest"] label { color: var(--rest); } .field[data-type="cooldown"] label { color: var(--cooldown); } .stepper-group { display: flex; align-items: center; gap: 10px; } .stepper { width: 52px; height: 52px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 34px; line-height: 1; cursor: pointer; transition: background 0.12s, transform 0.05s; } .stepper:hover { background: #2b313d; } .stepper:active { transform: scale(0.92); } .stepper-group input[type="number"] { width: 92px; text-align: center; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 32px; font-variant-numeric: tabular-nums; padding: 10px 6px; -moz-appearance: textfield; } .stepper-group input::-webkit-outer-spin-button, .stepper-group input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .unit { width: 44px; color: var(--muted); font-size: 24px; } /* Multi-block "Full session" read-only summary (replaces .config when active). */ .config.hide { display: none; } .block-summary { display: none; } .block-summary.show { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; } .bs-title { font-size: 26px; font-weight: 700; text-align: center; margin-bottom: 4px; } .bs-row { display: flex; justify-content: space-between; gap: 14px; font-size: 22px; color: var(--muted); } .bs-row .bs-name { color: var(--text); font-weight: 600; } .bs-row.bs-block .bs-name { color: var(--work); } .bs-row .bs-detail { font-variant-numeric: tabular-nums; white-space: nowrap; } .options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; padding: 2px; } .switch { display: flex; align-items: center; gap: 12px; font-size: 26px; color: var(--muted); cursor: pointer; } .switch input { width: 26px; height: 26px; accent-color: var(--work); cursor: pointer; } .volume-row { display: flex; align-items: center; gap: 16px; padding: 0 2px; } .volume-row label { font-size: 26px; color: var(--muted); width: 110px; } .volume-row input[type="range"] { flex: 1; height: 8px; accent-color: var(--accent); } /* Collapsible "Options" disclosure — hides the set-once toggles + volume. */ .disclosure-toggle { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; color: var(--muted); font-size: 26px; padding: 12px 16px; cursor: pointer; transition: color 0.12s, background 0.12s; } .disclosure-toggle:hover { color: var(--text); background: var(--panel-2); } .disclosure-toggle[aria-expanded="true"] { color: var(--text); } .disclosure-icon { font-size: 26px; } .disclosure-label { flex: 1; text-align: left; font-weight: 600; } .disclosure-chevron { font-size: 22px; transition: transform 0.28s ease; } .disclosure-toggle[aria-expanded="true"] .disclosure-chevron { transform: rotate(90deg); } /* grid 0fr -> 1fr animates to the natural content height, no hard-coded max. */ .options-disclosure { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; } .options-disclosure.open { grid-template-rows: 1fr; } .options-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding-top: 12px; } .summary { text-align: center; color: var(--muted); font-size: 26px; margin: 6px 0; } .primary { border: none; border-radius: 12px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; padding: 13px; cursor: pointer; transition: filter 0.12s, transform 0.05s; } .primary:hover { filter: brightness(1.08); } .primary:active { transform: scale(0.98); } .start { background: var(--work); margin-top: auto; font-size: 32px; padding: 22px; } .hint { text-align: center; color: #5b6473; font-size: 22px; margin: 10px 0 0; } .ghost { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 9px 12px; font-size: 13px; cursor: pointer; transition: background 0.12s; } .ghost:hover { background: var(--panel-2); } .ghost.danger { color: var(--danger); border-color: #43292c; } .ghost.danger:hover { background: #2a1c1e; } /* ===================== TIMER ===================== */ body.running { background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 16%, var(--bg)) 0%, var(--bg) 60%); } #timer { justify-content: center; align-items: center; gap: 16px; } .overall { width: 100%; height: 8px; background: var(--panel); border-radius: 4px; overflow: hidden; } .overall-bar { height: 100%; width: 0%; background: var(--accent); border-radius: 4px; transition: width 0.2s linear; } /* "time left" readout — now lives inside the ring, below the countdown */ .overall-text { color: var(--muted); font-size: 50px; line-height: 1; font-variant-numeric: tabular-nums; } .phase-block { text-align: center; } .phase-label { font-size: clamp(68px, 16vw, 120px); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); } .round-label { color: var(--muted); font-size: 38px; margin-top: 4px; font-variant-numeric: tabular-nums; } .ring-wrap { position: relative; width: min(82vmin, 46vh, 560px); aspect-ratio: 1 / 1; display: grid; place-items: center; } .ring { width: 100%; height: 100%; } .ring-track { fill: none; stroke: var(--panel); stroke-width: 28; } .ring-progress { fill: none; stroke: var(--accent); stroke-width: 28; stroke-linecap: round; stroke-dasharray: var(--ring-circ); stroke-dashoffset: 0; transition: stroke-dashoffset 0.18s linear, stroke 0.3s; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent)); } .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 7%; } .countdown { /* sized to clear the thicker ring stroke and leave room for the time-left line */ font-size: clamp(56px, 18vmin, 150px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -2px; } .next-up { color: var(--muted); font-size: 32px; min-height: 40px; font-variant-numeric: tabular-nums; } .controls { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; } .controls.secondary { gap: 12px; flex-wrap: wrap; } .controls.secondary .ghost { font-size: 26px; padding: 14px 22px; border-radius: 14px; } .round-btn { width: 128px; height: 128px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 44px; cursor: pointer; transition: background 0.12s, transform 0.05s; } .round-btn:hover { background: var(--panel-2); } .round-btn:active { transform: scale(0.92); } .round-btn:disabled { opacity: 0.35; cursor: default; } .pause { min-width: 340px; font-size: 38px; padding: 30px; } body.paused .pause { background: var(--warmup); } body.paused .ring-progress { opacity: 0.5; } /* phase accent mapping */ body.phase-warmup { --accent: var(--warmup); } body.phase-work { --accent: var(--work); } body.phase-rest { --accent: var(--rest); } body.phase-cooldown { --accent: var(--cooldown); } body.phase-done { --accent: var(--done); } /* ===================== TRAINING GUIDE (BLOG) ===================== */ .link-btn { display: inline-block; background: none; border: none; color: var(--work); font-size: 18px; cursor: pointer; padding: 6px; text-decoration: none; -webkit-app-region: no-drag; } .link-btn:hover { filter: brightness(1.15); } /* Static Training Guide pages (src/blog/*.html) — premium blue/red boxing brand */ body.blog-page { overflow: auto; height: auto; user-select: text; --accent: var(--work); background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; } .blog-wrap { max-width: 800px; margin: 0 auto; padding: 48px 24px 80px; } .blog-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 32px; } .blog-nav .ghost { display: inline-block; text-decoration: none; background: var(--panel); border: 1px solid var(--border); color: var(--muted); border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .blog-nav .ghost:hover { background: var(--panel-2); color: var(--text); border-color: var(--muted); } .blog-title { font-size: clamp(32px, 7vw, 44px); font-weight: 700; letter-spacing: -0.5px; margin: 0 0 36px; color: var(--text); line-height: 1.1; } .blog-list { display: flex; flex-direction: column; gap: 16px; max-width: 800px; width: 100%; margin: 0 auto; } .blog-cat { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; margin-top: 32px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--work); display: inline-block; } .post-card { display: block; text-align: left; width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; cursor: pointer; transition: all 0.2s ease; color: var(--text); text-decoration: none; position: relative; overflow: hidden; } .post-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--work), var(--rest)); opacity: 0; transition: opacity 0.2s ease; } .post-card:hover { background: var(--panel-2); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); transform: translateY(-2px); } .post-card:hover::before { opacity: 1; } .post-card h3 { margin: 0 0 10px; font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--text); letter-spacing: -0.3px; } .post-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; } .post-card .post-meta { color: #6b7584; font-size: 12px; margin-top: 10px; font-weight: 500; } .blog-article { max-width: 750px; width: 100%; margin: 0 auto; } .article-meta { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 14px; } .article-h1 { font-size: clamp(28px, 6vw, 40px); font-weight: 700; margin: 0 0 24px; line-height: 1.15; letter-spacing: -0.5px; color: var(--text); } .article-body { font-size: 17px; line-height: 1.72; color: #d4d9e3; } .article-body h2 { font-size: 26px; font-weight: 700; margin: 32px 0 16px; letter-spacing: -0.5px; line-height: 1.25; color: var(--text); padding-bottom: 10px; border-bottom: 2px solid var(--work); } .article-body h2:first-child { margin-top: 0; } .article-body h3 { font-size: 20px; font-weight: 700; margin: 24px 0 12px; color: var(--work); letter-spacing: -0.3px; } .article-body p { margin: 0 0 16px; color: #d4d9e3; line-height: 1.72; } .article-body ul, .article-body ol { padding-left: 28px; margin: 0 0 16px; color: #d4d9e3; line-height: 1.72; } .article-body li { margin: 8px 0; } .article-body strong { color: var(--text); font-weight: 700; } .article-body em { color: #d4d9e3; font-style: italic; } .try-link { display: block; text-align: center; text-decoration: none; background: linear-gradient(135deg, var(--work), #dc2626); color: #fff; border: none; border-radius: 12px; padding: 18px 32px; font-size: 16px; font-weight: 700; letter-spacing: 0.3px; margin-top: 40px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 6px 20px rgba(230, 57, 70, 0.25); } .try-link:hover { background: linear-gradient(135deg, #dc2626, #b91c1c); box-shadow: 0 8px 28px rgba(230, 57, 70, 0.35); transform: translateY(-2px); } .try-link:active { transform: translateY(0); } /* ===================== PHONES & SMALL TABLET WINDOWS ===================== */ /* The base sizes above are tuned for the macOS window; phones (down to the 320px iPhone SE) get a compact layout so setup and timer fit on one screen. */ @media (max-width: 600px) { .view { padding: max(14px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); gap: 10px; } body:not(.electron) .titlebar { display: none; } body.electron .view { padding-top: 36px; } /* clear the macOS traffic lights */ /* --- setup --- */ .app-header { display: flex; align-items: baseline; justify-content: space-between; margin: 0; } .app-header h1 { font-size: 30px; } .link-btn { font-size: 15px; padding: 4px 0; } .preset-row { flex-wrap: nowrap; gap: 8px; } .preset-row select { flex: 1 1 auto; font-size: 16px; padding: 10px 12px; border-radius: 10px; } #setup .ghost { font-size: 16px; padding: 10px 12px; } .config { gap: 8px; } .field { padding: 7px 10px 7px 12px; border-radius: 12px; gap: 8px; } .field label { font-size: 17px; white-space: nowrap; } .stepper-group { gap: 6px; } .stepper { width: 40px; height: 40px; font-size: 24px; border-radius: 9px; } .stepper-group input[type="number"] { width: 60px; font-size: 20px; padding: 7px 4px; border-radius: 9px; } .unit { width: 26px; font-size: 14px; } .block-summary.show { padding: 10px 12px; gap: 6px; } .bs-title { font-size: 18px; } .bs-row { font-size: 15px; gap: 10px; } .disclosure-toggle { font-size: 17px; padding: 10px 12px; border-radius: 12px; } .disclosure-icon, .disclosure-chevron { font-size: 17px; } .options { gap: 12px 14px; } .switch { font-size: 15px; gap: 8px; } .switch input { width: 20px; height: 20px; } .volume-row label { font-size: 15px; width: 64px; } .summary { font-size: 16px; margin: 2px 0; } .start { font-size: 22px; padding: 16px; } .hint { display: none; } /* keyboard shortcuts — not useful on touch screens */ /* keep the install banner from covering the Start button */ body.install-open #setup { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } .install-banner { left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); gap: 10px; padding: 8px 8px 8px 10px; border-radius: 14px; } .install-icon { width: 36px; height: 36px; border-radius: 8px; } .install-text { font-size: 13px; line-height: 1.3; gap: 1px; } .install-btn { padding: 8px 14px; } .install-close { font-size: 22px; } /* --- timer --- */ #timer { gap: 10px; } .phase-label { font-size: clamp(38px, 13vw, 64px); letter-spacing: 0.5px; } .round-label { font-size: 18px; margin-top: 0; } .ring-wrap { width: min(86vw, 44dvh); } .ring-center { gap: 0; } .countdown { font-size: clamp(44px, 17vw, 84px); letter-spacing: -1px; } .overall-text { font-size: clamp(13px, 4vw, 18px); } .next-up { font-size: 16px; min-height: 22px; text-align: center; } .controls { gap: 12px; } .round-btn { width: 60px; height: 60px; font-size: 22px; flex: none; } .pause { min-width: 0; flex: 1 1 auto; max-width: 220px; font-size: 22px; padding: 17px 12px; } .controls.secondary { gap: 10px; } .controls.secondary .ghost { font-size: 15px; padding: 10px 18px; border-radius: 10px; } } /* Taller phones (iPhone 12+ / most Android): use the spare height for bigger touch targets. */ @media (max-width: 600px) and (min-height: 740px) { .view { gap: 12px; } .config { gap: 10px; } .field { padding-top: 9px; padding-bottom: 9px; } .field label { font-size: 19px; } .stepper { width: 46px; height: 46px; font-size: 26px; } .stepper-group input[type="number"] { width: 66px; font-size: 22px; padding: 9px 4px; } .disclosure-toggle { padding: 13px 14px; } .start { font-size: 24px; padding: 19px; } } /* iPhone SE (1st gen) & other short screens: tighten vertical rhythm further. */ @media (max-width: 600px) and (max-height: 620px) { .view { gap: 7px; } .app-header h1 { font-size: 26px; } .config { gap: 6px; } .field { padding-top: 4px; padding-bottom: 4px; } .stepper { width: 36px; height: 34px; } .stepper-group input[type="number"] { width: 54px; font-size: 18px; padding: 6px 3px; } .disclosure-toggle { padding: 8px 12px; } .start { padding: 13px; } .summary { font-size: 14px; margin: 0; } body.install-open #setup { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } .install-banner { padding-top: 6px; padding-bottom: 6px; gap: 8px; } .install-icon { width: 30px; height: 30px; } .install-text { font-size: 12px; } .ring-wrap { width: min(80vw, 42dvh); } .round-btn { width: 52px; height: 52px; } .pause { padding: 14px 10px; } } /* Phones in landscape: short but wide — ring on the left, labels + controls on the right. */ @media (max-height: 500px) and (orientation: landscape) { .view { padding: max(10px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); gap: 8px; } body:not(.electron) .titlebar { display: none; } #timer { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "bar bar" "ring phase" "ring next" "ring controls" "ring secondary"; align-content: center; align-items: center; column-gap: 24px; row-gap: 8px; } .overall { grid-area: bar; } .ring-wrap { grid-area: ring; width: min(calc(100dvh - 60px), 45vw); } .phase-block { grid-area: phase; } .next-up { grid-area: next; font-size: 15px; min-height: 18px; text-align: center; } .controls { grid-area: controls; gap: 12px; } .controls.secondary { grid-area: secondary; } .phase-label { font-size: clamp(30px, 8vh, 48px); } .round-label { font-size: 16px; } .countdown { font-size: clamp(36px, 14vh, 80px); } .overall-text { font-size: 14px; } .round-btn { width: 52px; height: 52px; font-size: 20px; flex: none; } .pause { min-width: 0; flex: 0 1 200px; font-size: 20px; padding: 14px 20px; } .controls.secondary .ghost { font-size: 14px; padding: 8px 14px; border-radius: 10px; } } @media (max-width: 640px) { .blog-wrap { padding: 32px 18px 64px; } .blog-title { font-size: 30px; margin-bottom: 28px; } .article-h1 { font-size: 26px; margin-bottom: 20px; } .article-body { font-size: 16px; line-height: 1.65; } .article-body h2 { font-size: 22px; margin: 28px 0 12px; } .article-body h3 { font-size: 18px; margin: 20px 0 10px; } .post-card { padding: 18px 20px; } .post-card h3 { font-size: 17px; } .post-card p { font-size: 14px; } .blog-nav { margin-bottom: 24px; gap: 12px; } .try-link { padding: 16px 24px; font-size: 15px; } }