/* ============================================================ CandleBeep — stylesheet Light theme is the default; [data-theme="dark"] on flips it. ============================================================ */ :root { --bg: #f4f6f9; --bg-grad: radial-gradient(1100px 600px at 50% -12%, #e7ecf5 0%, transparent 70%); --card: #ffffff; --card-2: #f8fafc; --line: #e3e8ef; --line-soft: #eef2f7; --text: #10151f; --text-2: #5b6675; --text-3: #8b95a5; --accent: #2563eb; --accent-ink:#ffffff; --accent-soft:#e8effe; --up: #14a058; --down: #e0304a; --warn: #b45309; --warn-soft: #fdf3e3; --live: #14a058; --shadow: 0 1px 2px rgba(16,21,31,.05), 0 8px 24px -12px rgba(16,21,31,.14); --shadow-lg: 0 2px 4px rgba(16,21,31,.06), 0 24px 48px -20px rgba(16,21,31,.22); --r: 14px; --r-sm: 10px; --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color-scheme: light; } [data-theme="dark"] { --bg: #0b0f16; --bg-grad: radial-gradient(1100px 600px at 50% -12%, #16202f 0%, transparent 70%); --card: #141a24; --card-2: #1b222e; --line: #26303e; --line-soft: #1e2632; --text: #e9eef6; --text-2: #9fadbe; --text-3: #6b7889; --accent: #5b8cff; --accent-ink:#0b0f16; --accent-soft:#1c2740; --up: #2ecc71; --down: #ff5a72; --warn: #f0b429; --warn-soft: #2c2410; --live: #2ecc71; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8); color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; -webkit-font-smoothing: antialiased; padding-bottom: env(safe-area-inset-bottom); overflow-x: hidden; } h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; } h2 { font-size: 15px; } h3 { font-size: 14px; } p { margin: 0; } svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } /* ---------------- top bar ---------------- */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; /* track the same 1240px column the content uses, so the brand lines up with the cards instead of hugging the window edge */ padding: 10px max(12px, env(safe-area-inset-right), calc((100% - 1240px) / 2 + 20px)) 10px max(12px, env(safe-area-inset-left), calc((100% - 1240px) / 2 + 20px)); padding-top: calc(10px + env(safe-area-inset-top)); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line-soft); } .brand { display: flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; color: inherit; border-radius: 8px; } .brand:hover .brand-text strong { color: var(--accent); } .brand:hover .brand-text .tld { color: var(--accent); opacity: .7; } .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .brand-text strong, .brand-text .tld { transition: color .15s; } .brand-mark { width: 34px; height: 34px; flex: none; stroke-width: 2; } .bm-red { fill: var(--down); stroke: none; } .bm-red-l { stroke: var(--down); stroke-width: 2; } .bm-green { fill: var(--up); stroke: none; } .bm-green-l{ stroke: var(--up); stroke-width: 2; } .bm-wave { stroke: var(--warn); stroke-width: 2; } /* Name and tagline sit on ONE baseline-aligned row, so the wordmark can use the full height of the bar instead of being squeezed into a stacked pair. */ .brand-text { display: flex; align-items: baseline; gap: 9px; min-width: 0; } .brand-text strong { font-size: 21px; font-weight: 680; letter-spacing: -.025em; line-height: 1.1; white-space: nowrap; } .brand-text .tld { font-weight: 500; color: var(--text-3); } .brand-text .tagline { font-size: 12px; color: var(--text-3); white-space: nowrap; padding-left: 10px; border-left: 1px solid var(--line); min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* the bar gets tight once the action buttons are in — name only */ @media (max-width: 640px) { .brand-text .tagline { display: none; } .brand-text strong { font-size: 19px; } .brand-mark { width: 30px; height: 30px; } } .topbar-actions { display: flex; align-items: center; gap: 6px; } .icon-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text-2); font-size: 13px; font-weight: 550; transition: background .15s, color .15s, border-color .15s; } .icon-btn:hover { color: var(--text); border-color: var(--text-3); } .icon-btn svg { width: 17px; height: 17px; flex: none; } #installBtn { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); } .ico-moon { display: none; } [data-theme="dark"] .ico-sun { display: none; } [data-theme="dark"] .ico-moon { display: block; } /* ---------------- layout ---------------- Mobile: one column, edge-to-edge with minimal gutters. ≥900px: hero parks in a sticky left rail, everything else fills the right. ------------------------------------------------------------------------ */ .wrap { --page: 1240px; --gutter: 12px; max-width: var(--page); margin: 0 auto; padding: 14px max(var(--gutter), env(safe-area-inset-left)) 40px max(var(--gutter), env(safe-area-inset-right)); display: flex; flex-direction: column; gap: 12px; } .col-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; } @media (min-width: 900px) { .wrap { --gutter: 20px; gap: 16px; } .col-main { gap: 16px; } } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .card-sub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; line-height: 1.5; } .card-sub em { font-style: italic; color: var(--text-2); } .head-actions { display: flex; gap: 6px; } /* ---------------- hero ---------------- */ .hero { padding: 18px 16px 16px; text-align: center; position: relative; overflow: hidden; } /* Equal-width outer columns so the middle label is centred on the CARD, not merely between a wide pill and a narrow clock. */ .hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; } .hero-top > .pill { justify-self: start; } .hero-top > .hero-clock { justify-self: end; } /* Three items won't fit across a phone — drop the label to its own centred row rather than letting it collide with the status pill. */ @media (max-width: 620px) { .hero-top { grid-template-columns: auto auto; grid-template-areas: "pill clock" "label label"; justify-content: space-between; row-gap: 5px; } .hero-top > .pill { grid-area: pill; } .hero-top > .hero-clock { grid-area: clock; } .hero-top > .count-label{ grid-area: label; justify-self: center; } .hero-count { margin-top: 2px; } } .pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; } .pill[data-state="live"] { color: var(--live); border-color: color-mix(in srgb, var(--live) 35%, var(--line)); background: color-mix(in srgb, var(--live) 10%, transparent); } .pill[data-state="live"] .dot { background: var(--live); animation: blip 2s ease-in-out infinite; } .pill[data-state="pre"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: var(--warn-soft); } .pill[data-state="pre"] .dot { background: var(--warn); } .pill[data-state="break"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: var(--warn-soft); } .pill[data-state="break"] .dot { background: var(--warn); } .pill[data-state="muted"] { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, var(--line)); background: color-mix(in srgb, var(--down) 12%, transparent); } .pill[data-state="muted"] .dot { background: var(--down); animation: blip 1.1s ease-in-out infinite; } /* ---- "sound is blocked" banner — deliberately hard to ignore ---- */ .audio-alert { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; text-align: left; border: 1.5px solid color-mix(in srgb, var(--down) 55%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--down) 11%, var(--card)); animation: audioPulse 2.4s ease-in-out infinite; } .audio-alert[hidden] { display: none; } .audio-alert > svg { width: 22px; height: 22px; flex: none; color: var(--down); stroke-width: 2; } .audio-alert-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .audio-alert-text strong { font-size: 13.5px; color: var(--down); } .audio-alert-text span { font-size: 11.5px; color: var(--text-2); line-height: 1.45; } .audio-alert .mini-btn { flex: none; height: 36px; padding: 0 15px; } @keyframes audioPulse { 0%, 100% { border-color: color-mix(in srgb, var(--down) 55%, transparent); } 50% { border-color: color-mix(in srgb, var(--down) 95%, transparent); } } @media (max-width: 520px) { .audio-alert { flex-wrap: wrap; } .audio-alert .mini-btn { width: 100%; } } @keyframes blip { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } } .hero-clock { font-family: var(--mono); font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; } .hero-count { margin: 6px 0 14px; } /* shares the status row with the pill and the clock to save vertical space */ .count-label { flex: 1; min-width: 0; text-align: center; font-size: 12.5px; color: var(--text-2); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .count-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(52px, 17vw, 82px); font-weight: 620; letter-spacing: -.045em; line-height: 1.02; margin: 2px 0 4px; } .count-value.urgent { color: var(--down); } .count-sub { font-size: 12.5px; color: var(--text-3); min-height: 19px; font-variant-numeric: tabular-nums; } /* ---- hero footer: flash toggle | session bar | volume, all on one line ---- */ .hero-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 14px; } /* Centre each pill on the 5px progress track itself, not on the whole track+legend block. Negative offset keeps the row height unchanged. */ .hero-foot .flash-wrap, .hero-foot .vol-wrap { margin-top: calc((5px - 28px) / 2); } /* no track to line up with in 24x7 mode — sit normally */ .hero-foot.no-bar { align-items: center; } .hero-foot.no-bar .flash-wrap, .hero-foot.no-bar .vol-wrap { margin-top: 0; } .vol-wrap { position: relative; flex: none; } .vol-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); color: var(--text-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; transition: color .15s, border-color .15s, background .15s; } .vol-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .vol-btn.is-muted { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, var(--line)); } .vol-btn svg { width: 15px; height: 15px; stroke-width: 1.9; } .vol-btn .vol-body { fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; } .vol-btn .vol-x { display: none; } #volIcon.low .vol-w2 { display: none; } #volIcon.muted .vol-w1, #volIcon.muted .vol-w2 { display: none; } #volIcon.muted .vol-x { display: block; } /* the `hidden` attribute must beat the display rule below */ .vol-pop[hidden] { display: none; } .vol-pop { position: absolute; z-index: 30; bottom: calc(100% + 8px); right: 0; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-lg); width: 244px; max-width: calc(100vw - 44px); } .vol-pop input[type="range"] { flex: 1; min-width: 0; } .vol-pop-val { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; width: 34px; text-align: right; flex: none; } .vol-mute { flex: none; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--card-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; } .vol-mute:hover { color: var(--down); border-color: var(--down); } .vol-mute svg { width: 14px; height: 14px; } /* ---- master flash toggle, mirroring the volume pill on the left ---- */ .flash-wrap { position: relative; flex: none; } .flash-btn { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); color: var(--text-3); transition: color .15s, border-color .15s, background .15s; } .flash-btn svg { width: 14px; height: 14px; fill: currentColor; stroke: none; } .flash-btn .mini-track { position: relative; width: 26px; height: 15px; border-radius: 999px; background: var(--line); transition: background .18s; } .flash-btn .mini-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .18s cubic-bezier(.3,1.4,.5,1); } .flash-btn.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .flash-btn.on .mini-track { background: var(--accent); } .flash-btn.on .mini-track::after { transform: translateX(11px); } @media (max-width: 420px) { .hero-foot { gap: 9px; } } .arm-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; border-radius: 12px; border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 650; letter-spacing: -.01em; transition: filter .15s, background .15s, transform .06s; } .arm-btn:hover { filter: brightness(1.07); } .arm-btn:active { transform: scale(.988); } .arm-btn svg { width: 19px; height: 19px; stroke-width: 2.1; } .arm-btn.on { background: color-mix(in srgb, var(--down) 12%, var(--card)); color: var(--down); border-color: color-mix(in srgb, var(--down) 42%, transparent); } /* inline flow, so the info icon hugs the end of the sentence instead of dropping to a line of its own when the text wraps */ .arm-hint { font-size: 11.5px; color: var(--text-3); margin-top: 9px; } .arm-hint.warn { color: var(--warn); font-weight: 600; } .info-btn { width: 18px; height: 18px; padding: 0; margin-left: 2px; border: 0; background: none; color: inherit; opacity: .65; display: inline-flex; align-items: center; justify-content: center; /* inline-flex sits on the text baseline by default, which reads low next to an 11.5px line — pull it onto the text's optical centre instead */ vertical-align: middle; position: relative; top: -1px; transition: opacity .15s, color .15s; } .info-btn:hover { opacity: 1; color: var(--accent); } .info-btn svg { width: 15px; height: 15px; stroke-width: 1.9; } /* Stays centred at every width — the countdown reads best dead centre with the arm button directly beneath it. On wide screens the inner content is capped rather than stretched edge to edge. */ @media (min-width: 720px) { .hero-actions { max-width: 400px; margin-left: auto; margin-right: auto; } .session-bar { max-width: 760px; margin-left: auto; margin-right: auto; } .count-value { font-size: clamp(64px, 7vw, 92px); } } .session-bar { flex: 1; min-width: 0; } .session-track { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; } .session-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--live)); transition: width .5s linear; } .session-legend { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .session-legend > span { overflow: hidden; text-overflow: ellipsis; } /* the bar is narrow once the two pills flank it — shrink rather than wrap */ @media (max-width: 620px) { .session-legend { font-size: 10px; gap: 5px; } } @media (max-width: 430px) { .session-legend #sbElapsed { display: none; } } /* ---------------- timeframe grid ---------------- */ .tf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 9px; margin-top: 13px; } /* roomier cards once there's space, so sound names stop truncating */ @media (min-width: 860px) { .tf-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; } } .tf { position: relative; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card-2); padding: 10px 11px 11px; transition: border-color .15s, background .15s, box-shadow .15s; } .tf.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); } .tf.ringing { animation: tfRing .55s ease-out; } @keyframes tfRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); } 100% { box-shadow: 0 0 0 13px transparent; } } .tf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tf-name { display: flex; align-items: baseline; cursor: pointer; user-select: none; min-width: 0; } .tf-name b { font-size: 16.5px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* clock face marks a fixed-time alert apart from a candle length at a glance. align-self, because .tf-name aligns on the baseline and an svg has none. */ .tf-kind { width: 13px; height: 13px; flex: none; align-self: center; margin-right: 5px; color: var(--text-3); stroke-width: 2.1; } .tf.on .tf-kind { color: var(--accent); } .tf-del { position: absolute; top: -7px; right: -7px; width: 21px; height: 21px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text-3); display: none; align-items: center; justify-content: center; padding: 0; box-shadow: var(--shadow); } .tf-del svg { width: 11px; height: 11px; stroke-width: 2.4; } .tf:hover .tf-del { display: flex; } .tf-del:hover { color: var(--down); border-color: var(--down); } /* toggle */ /* .tgl is a