/* Wind-Down. The design rule for this whole file: as bedtime gets closer the screen gets DARKER AND QUIETER, never louder. No red, no pulsing, no exclamation marks — the colour of a room where the lamps are going off, not an alarm going off. A scolding app gets deleted. That is a design constraint, not a nicety. */ /* ── phase palette ───────────────────────────────────────────────────────── These are the first-paint values. theme.js recomputes --accent, --plane and --glow from your chosen gradient and sets them inline on , which wins over anything declared here. */ :root { --plane: #0c0a14; --surface: #171523; --surface-2: #1f1c30; --hairline: rgba(255, 255, 255, 0.08); --ink: #e6edf3; --ink-2: #9aa7b4; --ink-muted: #6e7d8c; --accent: #8b86bd; --glow: rgba(139, 134, 189, 0.17); /* Recomputed from the palette by theme.js. */ --hm-kept: #b1c9ff; --hm-late: #748ac3; --hm-missed: #405386; --radius: 18px; --radius-sm: 12px; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Colour transitions are slow on purpose — you should never catch the screen changing, only notice later that it has. */ --shift: 2400ms; /* Overwritten by theme.js from your choices in Setup. */ --font-text: system-ui, -apple-system, 'Segoe UI', sans-serif; --font-timer: var(--font-text); --timer-width: 1; color-scheme: dark; } /* The phase colours are computed in theme.js from your chosen gradient and set as inline custom properties on , which outrank anything here. The values above are the first paint, before the script runs, and the fallback if it fails. */ /* ── base ─────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } /* Must come before any component that sets `display`. An author-stylesheet `display: grid` on .sheet or .toast outranks the UA sheet's [hidden] rule, which leaves a full-screen overlay sitting invisibly on top of the app eating every tap. Belt and braces. */ [hidden] { display: none !important; } html, body { margin: 0; min-height: 100%; } /* A real app shell rather than a long page: the window never scrolls, and each view owns its own scrolling. That's what makes switching tabs feel like changing screens instead of jumping around one tall document — and it's why Tonight can be guaranteed to fit without a scrollbar. */ body { background: var(--plane); color: var(--ink); font: 400 17px/1.5 var(--font-text); -webkit-font-smoothing: antialiased; transition: background var(--shift) var(--ease); height: 100dvh; overflow: hidden; } #app { height: 100dvh; display: flex; flex-direction: column; min-height: 0; } /* A single soft light source, low on the screen, dimming through the evening. */ .ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 45% at 50% 18%, var(--glow), transparent 70%); transition: background var(--shift) var(--ease); } h1, h2 { font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; } h1 { font-size: 26px; line-height: 1.25; } h2 { font-size: 17px; } p { margin: 0 0 12px; } .muted { color: var(--ink-2); font-size: 15px; } .hint { color: var(--ink-muted); font-size: 14px; margin-top: 12px; } .lede { color: var(--ink-2); font-size: 17px; } .footnote { text-align: center; padding: 0 24px 8px; font-size: 14px; } /* ── buttons & fields ─────────────────────────────────────────────────── */ .btn { font: inherit; font-size: 16px; font-weight: 500; border: 1px solid transparent; border-radius: 999px; padding: 13px 22px; cursor: pointer; transition: background 160ms var(--ease), border-color 160ms var(--ease), opacity 160ms; -webkit-tap-highlight-color: transparent; min-height: 46px; } .btn:disabled { opacity: 0.45; cursor: default; } .btn-primary { background: var(--accent); color: #0a0d12; transition: background var(--shift) var(--ease); } .btn-primary:not(:disabled):active { transform: scale(0.985); } .btn-quiet { background: transparent; color: var(--ink-2); border-color: var(--hairline); } .btn-quiet:not(:disabled):hover { background: rgba(255, 255, 255, 0.04); color: var(--ink); } .button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .file-btn { display: inline-flex; align-items: center; } .field { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline); } .field:last-of-type { border-bottom: 0; } .field > span { color: var(--ink-2); font-size: 16px; } input[type='time'], input[type='text'], input[type='number'] { font: inherit; background: var(--surface-2); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 9px 12px; min-height: 42px; } input[type='time'] { min-width: 120px; } input[type='text'] { width: 100%; } input:focus-visible, .btn:focus-visible, summary:focus-visible, [role='tab']:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── layout ───────────────────────────────────────────────────────────── */ .view { display: none; position: relative; z-index: 1; padding: 0 20px calc(16px + env(safe-area-inset-bottom)); max-width: 620px; margin: 0 auto; width: 100%; } .view.is-active { display: block; } /* History and Setup scroll within themselves; Tonight is built to fit. */ .view[data-view='history'], .view[data-view='setup'] { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .view-title { padding: calc(24px + env(safe-area-inset-top)) 0 12px; font-size: 22px; } .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .card-head h2 { margin: 0; } .pill { font-size: 13px; font-weight: 500; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink-2); white-space: nowrap; } .pill.is-good { color: #86b6ef; border-color: rgba(134, 182, 239, 0.35); } .pill.is-attention { color: #dfae86; border-color: rgba(223, 174, 134, 0.35); } /* ── tonight ──────────────────────────────────────────────────────────── */ .tonight-head { padding: calc(18px + env(safe-area-inset-top)) 0 0; text-align: center; } .phase-label { color: var(--ink-muted); font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; margin: 0; } /* The Tonight screen is one thing: the dial, centred, on exactly one screen. It takes the space the shell gives it and the dial shrinks to fit, so there is nothing to scroll — except when the checklist appears and genuinely needs the room, which is the one case where scrolling is correct. */ /* `.is-active` is part of the selector deliberately: an attribute selector carries more weight than the bare `.view { display: none }`, so declaring `display: flex` unscoped leaves this view painted underneath every other screen. */ .view[data-view='tonight'].is-active { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; } .countdown-card { text-align: center; margin-block: auto; padding: 10px 0; position: relative; z-index: 1; } /* Square, capped so it doesn't become absurd on an iPad, and a container so the type inside can be sized against the dial rather than the viewport. */ .dial { position: relative; /* Three caps, smallest wins: a share of the short edge, an absolute ceiling so it isn't absurd on a desktop, and a height-aware limit leaving room for the tab bar, the quote, the message and the streak line. The last one is what keeps Tonight on a single screen at any height. */ width: min(88vmin, 42rem, calc(100dvh - 20rem)); min-width: 13rem; aspect-ratio: 1; margin: 0 auto; container-type: inline-size; } .dial-svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); /* start the ring at twelve o'clock */ overflow: visible; } .dial-track, .dial-progress { fill: none; stroke-width: 1.4; stroke-linecap: round; } .dial-track { stroke: rgba(255, 255, 255, 0.07); } .dial-progress { stroke: var(--accent); /* Set from JS; 289.03 is the circumference of r=46. */ stroke-dasharray: 289.03; stroke-dashoffset: 0; transition: stroke-dashoffset 980ms linear, stroke var(--shift) var(--ease); } /* Applied for one frame after waking from the background, so the ring snaps to the truth instead of sweeping theatrically across the missing time. */ .dial-progress.is-instant { transition: none; } .dial-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; padding: 0 12%; } .countdown-lede { color: var(--ink-2); font-size: clamp(12px, 4cqw, 19px); margin: 0.6cqw 0 0; letter-spacing: 0.01em; order: 3; } .countdown { font-family: var(--font-timer); /* The seed size, divided by how wide this face sets digits, then corrected by a measured fit factor — a mono face is a fifth wider than the system one and would otherwise push straight through the ring. */ font-size: calc(17cqw / var(--timer-width, 1) * var(--fit, 1)); font-weight: 200; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--accent); margin: 0; transition: color var(--shift) var(--ease); white-space: nowrap; } /* Fewer glyphs, so it can be bigger without touching the ring. */ .countdown[data-len='short'] { font-size: calc(24cqw / var(--timer-width, 1) * var(--fit, 1)); } .countdown[data-len='clock'] { font-size: calc(15cqw / var(--timer-width, 1) * var(--fit, 1)); letter-spacing: -0.03em; } /* The one animation in the app: a slow breath at the deadline. Roughly the pace of a calm exhale — an invitation, not an alarm. */ :root[data-phase='now'] .countdown { animation: breathe 5.5s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } } .target-chip { order: 2; font: inherit; font-size: clamp(12px, 3.6cqw, 17px); color: var(--ink-2); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hairline); border-radius: 999px; padding: 0.5em 1.1em; cursor: pointer; margin-top: 1cqw; } .target-chip:hover { color: var(--ink); } /* ── checklist ────────────────────────────────────────────────────────── */ .checklist { list-style: none; margin: 14px 0 0; padding: 0; } .checklist li { border-bottom: 1px solid var(--hairline); } .checklist li:last-child { border-bottom: 0; } .check { display: flex; align-items: center; gap: 14px; padding: 15px 2px; cursor: pointer; font-size: 16px; -webkit-tap-highlight-color: transparent; } .check input { position: absolute; opacity: 0; pointer-events: none; } .check .box { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--ink-muted); display: grid; place-items: center; transition: background 200ms var(--ease), border-color 200ms var(--ease); } .check .box::after { content: ''; width: 11px; height: 6px; border-left: 2px solid #0a0d12; border-bottom: 2px solid #0a0d12; transform: rotate(-45deg) scale(0.5); opacity: 0; transition: opacity 180ms var(--ease), transform 180ms var(--ease); } .check input:checked + .box { background: var(--accent); border-color: var(--accent); } .check input:checked + .box::after { opacity: 1; transform: rotate(-45deg) scale(1); } .check input:checked ~ .check-label { color: var(--ink-muted); } .check input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px; } .check-label { transition: color 200ms var(--ease); } .checklist-actions { margin-top: 16px; display: flex; justify-content: center; } .done-card { text-align: center; } .done-mark { font-size: 34px; color: var(--accent); margin: 0 0 6px; } .streak-line { text-align: center; color: var(--ink-muted); font-size: 14px; padding: 10px 0 6px; } /* ── stats ────────────────────────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .stat { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px 12px; text-align: center; } .stat-value { font-size: 27px; font-weight: 300; color: var(--ink); line-height: 1.1; } .stat-label { font-size: 12px; color: var(--ink-muted); margin-top: 5px; letter-spacing: 0.02em; } /* ── heatmap ──────────────────────────────────────────────────────────── */ .heatmap-wrap { position: relative; margin: 4px 0 14px; } .heatmap-svg { display: block; overflow: visible; } .heatmap-label { fill: var(--ink-muted); font-size: 9px; font-family: inherit; } /* Filled from the palette, so the calendar changes colour with everything else. */ .heatmap-cell.is-kept, .legend-swatch.is-kept { fill: var(--hm-kept); background: var(--hm-kept); } .heatmap-cell.is-late, .legend-swatch.is-late { fill: var(--hm-late); background: var(--hm-late); } .heatmap-cell.is-missed, .legend-swatch.is-missed { fill: var(--hm-missed); background: var(--hm-missed); } /* A night you deliberately took off sits outside the ramp entirely. */ .heatmap-cell.is-skipped, .legend-swatch.is-skipped { fill: #3c3c3a; background: #3c3c3a; } .heatmap-cell.is-empty, .heatmap-cell.is-future { fill: transparent; } .heatmap-cell { stroke: var(--hairline); stroke-width: 1; cursor: pointer; transition: opacity 120ms var(--ease); } .heatmap-cell:hover, .heatmap-cell:focus { opacity: 0.75; outline: none; } .heatmap-cell.is-future { cursor: default; stroke: rgba(255, 255, 255, 0.04); } .heatmap-cell.is-today { stroke: var(--accent); stroke-width: 1.5; } .heatmap-tooltip { position: absolute; transform: translate(-50%, -100%); background: #05070a; border: 1px solid var(--hairline); border-radius: 10px; padding: 7px 11px; font-size: 13px; line-height: 1.35; pointer-events: none; white-space: nowrap; z-index: 5; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } .heatmap-tooltip strong { display: block; font-weight: 600; } .heatmap-tooltip span { color: var(--ink-2); } .heatmap-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; } .legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); } .legend-swatch { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--hairline); } .heatmap-table { margin-top: 16px; } .heatmap-table summary { cursor: pointer; color: var(--ink-2); font-size: 14px; padding: 6px 0; } .heatmap-table table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; } .heatmap-table th { text-align: left; color: var(--ink-muted); font-weight: 500; padding: 7px 0; font-size: 13px; } .heatmap-table td { padding: 7px 0; border-top: 1px solid var(--hairline); color: var(--ink-2); } /* ── stages & checklist editors ───────────────────────────────────────── */ .stage-row { border-top: 1px solid var(--hairline); padding: 14px 0 4px; } .stage-row:first-child { border-top: 0; } .stage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .stage-when { font-size: 15px; color: var(--ink); font-weight: 500; } .stage-when small { display: block; color: var(--ink-muted); font-weight: 400; font-size: 13px; margin-top: 2px; } .stage-body { margin-top: 10px; } .stage-body input { margin-bottom: 8px; } .stage-row[data-enabled='false'] .stage-body { opacity: 0.4; } /* iOS-style switch, sized for a thumb. */ .switch { position: relative; display: inline-block; width: 50px; height: 30px; flex: 0 0 auto; } .switch input { position: absolute; opacity: 0; pointer-events: none; } .switch .track { position: absolute; inset: 0; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 999px; transition: background 200ms var(--ease); } .switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-muted); transition: transform 200ms var(--ease), background 200ms var(--ease); } .switch input:checked + .track { background: color-mix(in srgb, var(--accent) 35%, transparent); } .switch input:checked + .track::after { transform: translateX(20px); background: var(--accent); } .switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; } .item-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hairline); } .item-row:first-child { border-top: 0; } .icon-btn { background: transparent; border: 0; color: var(--ink-muted); font-size: 20px; cursor: pointer; padding: 8px 10px; line-height: 1; border-radius: 8px; min-height: 40px; } .icon-btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); } /* ── layers table ─────────────────────────────────────────────────────── */ .layer { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--hairline); } .layer:first-child { border-top: 0; } .layer-badge { flex: 0 0 auto; align-self: flex-start; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink-muted); margin-top: 2px; } .layer-badge[data-strength='hard'] { color: #86b6ef; border-color: rgba(134, 182, 239, 0.35); } .layer-badge[data-strength='loud'] { color: #dfae86; border-color: rgba(223, 174, 134, 0.3); } .layer-name { font-weight: 500; font-size: 15px; } .layer-does { color: var(--ink-2); font-size: 14px; margin: 3px 0 0; } .layer-honest { color: var(--ink-muted); font-size: 13px; margin: 4px 0 0; font-style: italic; } /* ── callouts ─────────────────────────────────────────────────────────── */ .callout { border-radius: var(--radius-sm); padding: 15px 17px; font-size: 15px; border: 1px solid var(--hairline); background: var(--surface-2); margin-bottom: 16px; } .callout h2 { font-size: 16px; } .callout p:last-child { margin-bottom: 0; } .callout-warn { border-color: rgba(223, 174, 134, 0.35); color: #f0d5bd; } .callout-action { border-color: rgba(134, 182, 239, 0.3); } .steps { margin: 10px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 15px; } .steps li { margin-bottom: 7px; } /* ── onboarding ───────────────────────────────────────────────────────── */ .onboarding { position: relative; z-index: 1; height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); } .onboard-card { width: 100%; max-width: 460px; } .onboard-progress { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 28px; } .onboard-progress li { height: 3px; flex: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.09); transition: background 400ms var(--ease); } .onboard-progress li.is-current, .onboard-progress li.is-done { background: var(--accent); } .onboard-step { display: none; animation: rise 420ms var(--ease); } .onboard-step.is-current { display: block; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .onboard-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .test-panel { margin: 20px 0; } .test-status { font-size: 14px; color: var(--ink-2); margin: 12px 0 0; min-height: 1.4em; } .test-status[data-tone='good'] { color: #86b6ef; } .test-status[data-tone='warn'] { color: #dfae86; } /* ── tabbar ───────────────────────────────────────────────────────────── */ .tabbar { flex: 0 0 auto; z-index: 10; display: flex; background: color-mix(in srgb, var(--plane) 88%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--hairline); padding-bottom: max(0px, calc(env(safe-area-inset-bottom) - 6px)); } .tabbar button { flex: 1; background: none; border: 0; /* Tinted with the chosen accent rather than a fixed grey, so picking a palette colours the whole chrome and not just the countdown. */ color: color-mix(in srgb, var(--accent) 42%, var(--ink-muted)); font: inherit; font-size: 12px; /* Sit as low as the home indicator allows. The old fixed padding stacked on top of the safe-area inset and left the labels floating well clear of the bottom edge. */ padding: 11px 4px 6px; cursor: pointer; transition: color var(--shift) var(--ease); -webkit-tap-highlight-color: transparent; } .tabbar button[aria-selected='true'] { color: var(--accent); font-weight: 500; } /* ── the small countdown on the other screens ─────────────────────────── */ .mini-timer { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 16px; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 7px 13px 7px 8px; border-radius: 999px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--accent); font: inherit; font-family: var(--font-timer); font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; transition: color var(--shift) var(--ease), background 160ms var(--ease); } .mini-timer:hover { background: color-mix(in srgb, var(--surface) 95%, transparent); } .mini-ring { width: 20px; height: 20px; transform: rotate(-90deg); flex: 0 0 auto; } .mini-track, .mini-progress { fill: none; stroke-width: 9; } .mini-track { stroke: rgba(255, 255, 255, 0.1); } .mini-progress { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 276.46; transition: stroke-dashoffset 980ms linear, stroke var(--shift) var(--ease); } /* ── sheet ────────────────────────────────────────────────────────────── */ .sheet { position: fixed; inset: 0; z-index: 40; background: rgba(3, 5, 8, 0.88); display: grid; align-items: end; animation: fade 200ms var(--ease); } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .sheet-panel { background: var(--surface); border-top-left-radius: 22px; border-top-right-radius: 22px; max-height: 88dvh; display: flex; flex-direction: column; animation: slide 320ms var(--ease); max-width: 620px; width: 100%; margin: 0 auto; } @keyframes slide { from { transform: translateY(20px); } to { transform: none; } } .sheet-head, .sheet-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; gap: 12px; } .sheet-head { border-bottom: 1px solid var(--hairline); } .sheet-head h2 { margin: 0; } .sheet-foot { border-top: 1px solid var(--hairline); padding-bottom: calc(16px + env(safe-area-inset-bottom)); } .sheet-body { overflow-y: auto; padding: 4px 20px 12px; -webkit-overflow-scrolling: touch; } .guide-step { padding: 18px 0; border-bottom: 1px solid var(--hairline); } .guide-step:last-child { border-bottom: 0; } .guide-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--hairline); font-size: 13px; color: var(--ink-2); margin-right: 9px; } .guide-where { font-size: 13px; color: var(--ink-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 6px 0 10px; } .guide-why { font-size: 14px; color: var(--ink-2); border-left: 2px solid var(--hairline); padding-left: 12px; margin-top: 12px; } .caveat { padding: 14px 0; border-top: 1px solid var(--hairline); } .caveat-claim { color: var(--ink-muted); font-size: 14px; text-decoration: line-through; margin: 0 0 5px; } .caveat-reality { font-size: 14px; color: var(--ink-2); margin: 0; } /* ── toast ────────────────────────────────────────────────────────────── */ .toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; background: #05070a; border: 1px solid var(--hairline); border-radius: 999px; padding: 11px 20px; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); animation: rise 240ms var(--ease); max-width: calc(100vw - 40px); text-align: center; } /* ── motion ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── colour picker ────────────────────────────────────────────────────── */ .preset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 14px 0 4px; } .preset { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 9px; cursor: pointer; font: inherit; color: var(--ink-2); text-align: left; transition: border-color 160ms var(--ease), color 160ms var(--ease); } .preset:hover { color: var(--ink); } .preset.is-active { border-color: var(--accent); color: var(--ink); } .preset-ramp { display: flex; height: 16px; border-radius: 5px; overflow: hidden; } .preset-swatch { flex: 1; } .preset-name { display: block; font-size: 12px; margin-top: 7px; } .custom-colors { margin-top: 6px; } input[type='color'] { appearance: none; -webkit-appearance: none; width: 54px; height: 34px; padding: 0; border: 1px solid var(--hairline); border-radius: 9px; background: transparent; cursor: pointer; } input[type='color']::-webkit-color-swatch-wrapper { padding: 3px; } input[type='color']::-webkit-color-swatch { border: 0; border-radius: 6px; } input[type='color']::-moz-color-swatch { border: 0; border-radius: 6px; } .ramp-strip { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin-top: 14px; border: 1px solid var(--hairline); } .ramp-step { flex: 1; } /* ── sound ────────────────────────────────────────────────────────────── */ .choice-row { margin: 14px 0 4px; } .choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--hairline); cursor: pointer; } .choice:first-child { border-top: 0; } .choice input { appearance: none; -webkit-appearance: none; flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; border: 1.5px solid var(--ink-muted); border-radius: 50%; cursor: pointer; transition: border-color 180ms var(--ease); } .choice input:checked { border-color: var(--accent); border-width: 6px; } .choice input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .choice-body { display: block; } .choice-name { display: block; font-size: 15px; color: var(--ink); } .choice-note { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 3px; } .range-field { gap: 20px; } .range-field input[type='range'] { flex: 1; max-width: 240px; accent-color: var(--accent); } .sound-stop { margin-top: 18px; } #sound-body { transition: opacity 200ms var(--ease); } /* ── the hourly line ──────────────────────────────────────────────────── */ .quote { margin: 0 auto; padding: 18px 24px 0; max-width: 34ch; text-align: center; /* Long enough to read as a change of thought rather than a flicker. */ transition: opacity 700ms var(--ease); } .quote.is-fading { opacity: 0; } .quote blockquote { margin: 0; color: var(--ink-2); font-size: clamp(15px, 1.9vmin, 19px); line-height: 1.5; text-wrap: balance; } .quote figcaption { margin-top: 7px; color: var(--ink-muted); font-size: clamp(12px, 1.5vmin, 14px); letter-spacing: 0.02em; } @media (prefers-reduced-motion: reduce) { .quote { transition: none; } } /* ── settings: typeface & quotes ──────────────────────────────────────── */ select { font: inherit; font-size: 16px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 9px 12px; min-height: 42px; cursor: pointer; max-width: 60%; } .stacked-field { display: block; padding: 14px 0 4px; } .stacked-field > span { display: block; color: var(--ink-2); font-size: 16px; margin-bottom: 9px; } textarea { font: inherit; font-size: 15px; line-height: 1.5; width: 100%; background: var(--surface-2); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 11px 13px; resize: vertical; min-height: 96px; } textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .quote-preview { border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-2); padding: 15px 17px; margin: 14px 0 4px; text-align: center; color: var(--ink-2); font-size: 15px; line-height: 1.5; } .quote-preview small { display: block; margin-top: 6px; color: var(--ink-muted); font-size: 13px; } #quotes-body { transition: opacity 200ms var(--ease); } /* ── settings groups ──────────────────────────────────────────────────── */ /* The jump bar sticks to the top of the Settings scroller so the seven sections stay one tap away from anywhere in the list. It bleeds into the view's side padding so the blur covers the full width as content passes under it. */ .jump-bar { position: sticky; top: 0; z-index: 4; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 0 -20px 4px; padding: 6px 20px 10px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } .jump-bar::-webkit-scrollbar { display: none; } .jump { flex: 0 0 auto; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink-2); font: inherit; font-size: 13px; padding: 7px 13px; cursor: pointer; white-space: nowrap; transition: color var(--shift) var(--ease), border-color var(--shift) var(--ease), background var(--shift) var(--ease); } .jump:hover { color: var(--ink); } .jump.is-current { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .section-head { padding: 26px 4px 10px; /* clear the sticky bar when jumped to */ scroll-margin-top: 52px; } .section-head:first-of-type { padding-top: 6px; } .section-head h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; transition: color var(--shift) var(--ease); } .section-head p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.45; }