/* ============================================================ DESKFLO — Main Stylesheet css/style.css ============================================================ */ /* ──────────────────────────────────────────────────────────── CSS VARIABLES — Light Theme (default) ──────────────────────────────────────────────────────────── */ :root { /* Backgrounds */ --bg: #F1EBE1; --bg-card: #FDFAF5; --bg-card-hover:#F5F0E8; /* Text */ --text: #2C2520; --text-secondary:#7A6E63; --text-muted: #A89E93; /* Borders & Shadows */ --border: #E2D9CE; --shadow: 0 2px 12px rgba(120,100,80,.08); --shadow-lg: 0 8px 32px rgba(120,100,80,.12); /* Accent palette */ --accent: #C67B5C; /* Terracotta — primary actions */ --accent-soft: #F5E6DC; --sage: #7D8E6E; /* Sage green — wellness / stretch */ --sage-soft: #E8EFE0; --water: #5B9BD5; /* Blue — hydration */ --water-soft: #E0EDF8; /* Border radius shortcuts */ --radius: 16px; --radius-sm: 10px; --radius-xs: 4px; /* Transition shorthand */ --t: 0.3s ease; } /* ──────────────────────────────────────────────────────────── CSS VARIABLES — Dark Theme Applied via [data-theme="dark"] on or ──────────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #1A1816; --bg-card: #242120; --bg-card-hover:#2E2A28; --text: #E8E0D6; --text-secondary:#A89E93; --text-muted: #6E645A; --border: #3A3430; --shadow: 0 2px 12px rgba(0,0,0,.35); --shadow-lg: 0 8px 32px rgba(0,0,0,.45); --accent: #C67B5C; --accent-soft: #3D2E25; --sage: #7D8E6E; --sage-soft: #2A3024; --water: #5B9BD5; --water-soft: #1E2E3D; } /* ──────────────────────────────────────────────────────────── RESET & BASE ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 14px; } body { background: var(--bg); color: var(--text); font-family: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; min-height: 100vh; /* Smooth theme switch */ transition: background 0.4s, color 0.4s; } button { font-family: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ──────────────────────────────────────────────────────────── TYPOGRAPHY ──────────────────────────────────────────────────────────── */ h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2; } h1 { font-size: 26px; letter-spacing: -0.5px; } h2 { font-size: 16px; } h3 { font-size: 14px; } /* ──────────────────────────────────────────────────────────── CUSTOM SCROLLBAR ──────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; transition: background var(--t); } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* ════════════════════════════════════════════════════════════ LAYOUT ════════════════════════════════════════════════════════════ */ /* ── Header ── */ .site-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; background: var(--bg); border-bottom: 1px solid var(--border); transition: background 0.4s, border-color 0.4s; } .brand { display: flex; align-items: baseline; gap: 10px; } /* ── Brand mark: mixed typeface ─────────────────────────────────────────── */ .brand-mark { line-height: 1; letter-spacing: 0; } /* "desk" — sans-serif, accent terracotta, slightly smaller */ .brand-desk { font-family: 'Nunito Sans', 'Segoe UI', sans-serif; font-weight: 700; font-size: 18px; color: var(--accent); letter-spacing: 0.5px; } /* "FLO" — serif, full text colour, tighter tracking, slightly larger */ .brand-flo { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 23px; color: var(--text); letter-spacing: -1px; } .brand-tagline { font-size: 12px; color: var(--text-muted); } .header-right { display: flex; align-items: center; gap: 14px; } .clock-block { text-align: right; } .clock-time { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 600; letter-spacing: -0.5px; line-height: 1; } .clock-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* ── Header button group (mute + theme as a pill capsule) ── */ .header-btn-group { display: flex; align-items: center; gap: 0; background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 10px; padding: 2px; transition: background 0.4s, border-color 0.4s; } .header-btn-group .btn-icon { font-size: 16px; padding: 5px 8px; border-radius: 7px; } .header-btn-group .btn-icon:hover { background: var(--bg-card); opacity: 1; } /* ── Weather block ── */ .weather-block { text-align: right; border-left: 1px solid var(--border); padding-left: 14px; } .weather-main { display: flex; align-items: center; gap: 4px; justify-content: flex-end; } .weather-icon { font-size: 15px; line-height: 1; } .weather-temp { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 600; letter-spacing: -0.5px; line-height: 1; } .weather-location { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } /* ── Tip Bar ── */ .tip-bar { display: flex; align-items: center; gap: 12px; margin: 14px 28px 0; padding: 12px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; transition: background 0.4s, border-color 0.4s; } .tip-icon { font-size: 16px; flex-shrink: 0; } .tip-category-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; flex-shrink: 0; transition: background 0.3s, color 0.3s; } /* Per-category badge colours */ .tip-category-badge.ai { background: var(--accent-soft); color: var(--accent); } .tip-category-badge.shortcut { background: var(--water-soft); color: var(--water); } .tip-category-badge.hack { background: var(--sage-soft); color: var(--sage); } .tip-category-badge.excel { background: #EEF0FF; color: #5560C8; } .tip-category-badge.email { background: #FFF0E8; color: #B05020; } [data-theme="dark"] .tip-category-badge.excel { background: #1E2040; color: #8890E8; } [data-theme="dark"] .tip-category-badge.email { background: #3A2015; color: #C87850; } .tip-text { flex: 1; font-size: 13px; color: var(--text-secondary); line-height: 1.5; animation: fadeUp 0.4s ease; } /* ── Main Grid ── */ .main-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 14px 24px 20px; } /* Ambient card always spans full width */ .card-ambient { grid-column: 1 / -1; } /* ── Responsive: single column below 700px ── */ @media (max-width: 700px) { .main-grid { grid-template-columns: 1fr; padding: 14px 16px 28px; } /* Ambient still full width (only 1 col exists, so it's automatic) */ .card-ambient { grid-column: 1; } .site-header { padding: 12px 16px; } .tip-bar { margin: 10px 16px 0; flex-wrap: wrap; gap: 8px; } .site-footer { padding: 10px 16px 20px; } .clock-time { font-size: 18px; } .ambient-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .timer-body { flex-direction: column; align-items: center; } .timer-ring-container { flex: none; width: 140px; height: 140px; aspect-ratio: auto; } .timer-right { width: 100%; } } /* ──────────────────────────────────────────────────────────── CARDS ──────────────────────────────────────────────────────────── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; transition: background 0.4s, border-color 0.4s, box-shadow 0.25s, transform 0.2s; } .card:hover { background: var(--bg-card-hover); box-shadow: var(--shadow-lg); transform: translateY(-1px); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .card-title { display: flex; align-items: center; gap: 8px; font-family: 'Fraunces', Georgia, serif; font-size: 16px; font-weight: 700; letter-spacing: -0.3px; } .card-icon { font-size: 18px; } /* Notes card: no padding, flex-column so textarea can grow */ .card-notes { padding: 0; display: flex; flex-direction: column; } /* ──────────────────────────────────────────────────────────── FOOTER ──────────────────────────────────────────────────────────── */ .site-footer { padding: 10px 28px 18px; text-align: center; border-top: 1px solid var(--border); transition: border-color 0.4s; } .shortcuts-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; } .shortcut-item { display: flex; align-items: center; gap: 4px; } .footer-copy { font-size: 11px; color: var(--text-muted); opacity: 0.5; } /* ════════════════════════════════════════════════════════════ BUTTONS ════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: 'Nunito Sans', sans-serif; font-size: 14px; font-weight: 600; line-height: 1; transition: opacity 0.2s, transform 0.1s, background 0.2s; white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Primary — terracotta */ .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { opacity: 0.88; } /* Sage — wellness/stretch */ .btn-sage { background: var(--sage); color: #fff; } .btn-sage:hover { opacity: 0.88; } /* Water — hydration */ .btn-water { background: var(--water); color: #fff; } .btn-water:hover { opacity: 0.88; } /* Ghost — transparent with border */ .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 7px 14px; font-size: 13px; } .btn-ghost:hover { background: var(--bg-card-hover); border-color: var(--text-muted); } /* Small modifier */ .btn-sm { font-size: 12px; padding: 5px 12px; border-radius: 10px; } /* Icon-only (mute, theme toggle) */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; font-size: 20px; padding: 4px 6px; border-radius: 8px; line-height: 1; transition: opacity 0.2s, transform 0.1s; } .btn-icon:hover { opacity: 0.7; } .btn-icon:active { transform: scale(0.9); } .btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ════════════════════════════════════════════════════════════ PILLS & BADGES ════════════════════════════════════════════════════════════ */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .pill-accent { background: var(--accent-soft); color: var(--accent); } .pill-sage { background: var(--sage-soft); color: var(--sage); } .pill-water { background: var(--water-soft); color: var(--water); } .pill-success{ background: var(--sage-soft); color: var(--sage); } .streak-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--text-secondary); } /* ════════════════════════════════════════════════════════════ KBD BADGES (keyboard shortcut display) ════════════════════════════════════════════════════════════ */ kbd { display: inline-block; padding: 2px 6px; background: var(--border); border: 1px solid var(--text-muted); border-radius: var(--radius-xs); font-family: 'Nunito Sans', monospace; font-size: 10px; font-weight: 700; color: var(--text-secondary); line-height: 1.4; } /* ════════════════════════════════════════════════════════════ FOCUS TIMER ════════════════════════════════════════════════════════════ */ /* Card itself becomes a flex column so body can flex-grow */ #timer-card { display: flex; flex-direction: column; } /* Presets sit at the top, full width */ .timer-presets { display: flex; gap: 6px; margin-bottom: 14px; } /* Body fills remaining card height; ring left, controls right */ .timer-body { flex: 1; display: flex; gap: 20px; align-items: stretch; } .timer-left { display: flex; flex-direction: column; justify-content: center; } .timer-right { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; justify-content: center; } .timer-preset-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 10px; background: transparent; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } .timer-preset-btn:hover { background: var(--bg-card-hover); } .timer-preset-btn.active { background: var(--accent-soft); border-color: var(--accent); } .timer-preset-btn.active .preset-label { color: var(--accent); } .timer-preset-btn.active .preset-tag { color: var(--accent); opacity: 0.8; } .preset-label { font-size: 13px; font-weight: 700; color: var(--text); transition: color 0.2s; } .preset-tag { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; transition: color 0.2s; } /* SVG ring container — grows to fill the timer-left flex column */ .timer-ring-container { position: relative; flex: 1; aspect-ratio: 1; min-width: 110px; max-height: 165px; margin: 0; } /* Rotate so progress starts from top; scale to fit container */ .timer-ring { width: 100%; height: 100%; transform: rotate(-90deg); display: block; overflow: visible; } .timer-ring-bg { fill: none; stroke: var(--border); stroke-width: 6; transition: stroke 0.4s; } .timer-ring-progress { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 0.4s; } .timer-ring-progress.break-mode { stroke: var(--sage); } /* Digital time overlaid on ring */ .timer-display { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; } .timer-time { font-family: 'Fraunces', Georgia, serif; font-size: 28px; font-weight: 600; letter-spacing: -1px; line-height: 1; } .timer-mode-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; } .timer-controls { display: flex; gap: 8px; flex-wrap: wrap; } #timer-start-btn { flex-basis: 100%; } #timer-reset-btn, #timer-switch-btn { flex: 1; } .timer-hint { font-size: 11px; color: var(--text-muted); } /* ════════════════════════════════════════════════════════════ QUICK NOTES ════════════════════════════════════════════════════════════ */ .notes-tabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); padding: 0 4px; overflow-x: auto; scrollbar-width: none; transition: border-color 0.4s; } .notes-tabs::-webkit-scrollbar { display: none; } .note-tab { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border: none; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; font-family: 'Nunito Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; } .note-tab:hover { color: var(--text-secondary); } .note-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .note-tab-close { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: none; background: var(--text-muted); color: var(--bg); font-size: 10px; cursor: pointer; flex-shrink: 0; transition: background 0.2s; line-height: 1; } .note-tab-close:hover { background: var(--accent); } .note-add-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; border: none; background: transparent; cursor: pointer; font-size: 18px; color: var(--text-muted); flex-shrink: 0; border-radius: 6px; transition: color 0.2s, background 0.2s; line-height: 1; margin-left: auto; } .note-add-btn:hover { color: var(--accent); background: var(--accent-soft); } .note-add-btn:disabled { opacity: 0.3; cursor: not-allowed; background: transparent; } .notes-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; transition: border-color 0.4s; } .notes-slot-info { font-size: 11px; color: var(--text-muted); } .notes-textarea { flex: 1; width: 100%; padding: 14px 16px; border: none; background: transparent; color: var(--text); font-family: 'Nunito Sans', sans-serif; font-size: 13px; line-height: 1.6; resize: none; outline: none; min-height: 120px; transition: color 0.4s; } .notes-textarea::placeholder { color: var(--text-muted); } /* ════════════════════════════════════════════════════════════ HYDRATION TRACKER ════════════════════════════════════════════════════════════ */ /* Hydration two-column body */ #hydration-card { display: flex; flex-direction: column; } .hydration-body { flex: 1; display: flex; gap: 16px; align-items: center; } .hydration-glass-container { flex-shrink: 0; display: flex; align-items: center; } .hydration-glass-svg { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); transform: scale(1); transform-origin: center bottom; } .hydration-info { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .hydration-count-row { display: flex; align-items: baseline; gap: 6px; } .hydration-count { font-family: 'Fraunces', Georgia, serif; font-size: 28px; font-weight: 600; letter-spacing: -0.5px; line-height: 1; } .hydration-goal-text { font-size: 12px; color: var(--text-muted); margin: 0; } .progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; transition: background 0.4s; } .progress-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; } .progress-bar-fill.water { background: var(--water); } .progress-bar-fill.sage { background: var(--sage); } .progress-bar-fill.accent{ background: var(--accent); } .hydration-controls { display: flex; gap: 10px; align-items: center; } .hydration-meta { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } /* ════════════════════════════════════════════════════════════ STRETCH & MOVE ════════════════════════════════════════════════════════════ */ /* Intervals + countdown on one row */ .stretch-top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .stretch-intervals { display: flex; gap: 6px; } .stretch-interval-btn { padding: 5px 14px; border: 1px solid var(--border); border-radius: 8px; background: transparent; cursor: pointer; font-family: 'Nunito Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-secondary); transition: background 0.2s, border-color 0.2s, color 0.2s; } .stretch-interval-btn:hover { background: var(--bg-card-hover); } .stretch-interval-btn.active { background: var(--sage-soft); border-color: var(--sage); color: var(--sage); } .stretch-countdown { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; transition: background 0.4s, border-color 0.4s; } /* ── Stretch preview (replaces queue — shows the one upcoming stretch) ── */ .stretch-preview { background: rgba(0, 0, 0, 0.025); border-radius: 12px; padding: 14px; margin-bottom: 12px; transition: background 0.4s; } [data-theme="dark"] .stretch-preview { background: rgba(255, 255, 255, 0.03); } .stretch-preview-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .stretch-preview-name { font-size: 15px; font-weight: 700; color: var(--text); } .stretch-preview-area { font-size: 11px; color: var(--text-muted); font-style: italic; flex-shrink: 0; } .stretch-preview-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0; } /* Inline exercise timer — shown inside the card while stretching */ .stretch-exercise-meta { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 5px; } /* Card action buttons row */ .stretch-actions { display: flex; gap: 8px; margin-bottom: 14px; } /* Legacy queue styles kept for graceful fallback */ .stretch-queue { display: flex; flex-direction: column; gap: 8px; } .stretch-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; transition: background 0.2s, border-color 0.4s; } .stretch-item:hover { background: var(--bg-card-hover); } .stretch-item-name { font-size: 13px; font-weight: 600; color: var(--text); } .stretch-item-area { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .stretch-item-dur { font-size: 11px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; } .stretch-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; } /* ════════════════════════════════════════════════════════════ AMBIENT SOUNDS ════════════════════════════════════════════════════════════ */ .ambient-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .ambient-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .ambient-sound-card { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; text-align: left; position: relative; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .ambient-sound-card:hover { background: var(--bg-card-hover); } .ambient-sound-card.active { background: var(--sage-soft); border-color: var(--sage); box-shadow: 0 0 0 2px var(--sage-soft); } .ambient-sound-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Active indicator dot (top-right) */ .ambient-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); animation: pulse 2s ease-in-out infinite; } .ambient-sound-icon { grid-column: 1; grid-row: 1 / 3; font-size: 20px; display: flex; align-items: center; justify-content: center; } .ambient-sound-label { grid-column: 2; grid-row: 1; font-size: 12px; font-weight: 700; color: var(--text); align-self: end; } .ambient-sound-desc { grid-column: 2; grid-row: 2; font-size: 10px; color: var(--text-muted); align-self: start; } .ambient-volume-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 6px; } .ambient-volume-label { font-size: 10px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; } /* ════════════════════════════════════════════════════════════ RANGE INPUT (volume sliders) ════════════════════════════════════════════════════════════ */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--border); outline: none; cursor: pointer; transition: background 0.2s; } /* WebKit thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sage); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform 0.1s, background 0.2s; } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); } /* Firefox track & thumb */ input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border); border: none; } input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--sage); cursor: pointer; border: none; box-shadow: 0 1px 4px rgba(0,0,0,.2); } /* ════════════════════════════════════════════════════════════ STRETCH MODAL ════════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 999; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Hide via [hidden] attribute — display:none overrides the flex */ .modal-overlay[hidden] { display: none !important; } .modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 32px; max-width: 400px; width: 90%; box-shadow: var(--shadow-lg); animation: slideIn 0.35s ease; transition: background 0.4s, border-color 0.4s; } /* "⏰ Time to Stretch!" header line inside the modal */ .modal-reminder-header { font-size: 13px; font-weight: 700; color: var(--sage); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; } /* "30s · Neck · Traps" meta line */ .modal-stretch-meta-line { font-size: 11px; color: var(--text-muted); margin-bottom: 20px; } .modal-stretch-area { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; } .modal-stretch-name { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 12px; } .modal-stretch-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; } .modal-progress { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 8px; } .modal-progress-fill { height: 100%; background: var(--sage); border-radius: 2px; transition: width 0.5s linear; } .modal-controls { display: flex; gap: 10px; margin-top: 16px; } /* ════════════════════════════════════════════════════════════ ANIMATION KEYFRAMES ════════════════════════════════════════════════════════════ */ /* Pulsing glow — used by ambient active dot */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.82); } } /* Modal entrance — slides up from slightly below */ @keyframes slideIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Tip text transition — fades up on each new tip */ @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Hydration glass bounce — triggered when logging a glass */ @keyframes bounce { 0% { transform: scale(1); } 25% { transform: scale(1.15); } 55% { transform: scale(0.92); } 80% { transform: scale(1.05); } 100% { transform: scale(1); } } /* ════════════════════════════════════════════════════════════ UTILITY CLASSES ════════════════════════════════════════════════════════════ */ /* Screen-reader only */ .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; } /* Flex helpers */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } /* Gap */ .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } /* Margin-top */ .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } /* Text colour helpers */ .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .text-accent { color: var(--accent); } .text-sage { color: var(--sage); } .text-water { color: var(--water); } /* Text size */ .text-xs { font-size: 11px; } .text-sm { font-size: 12px; } .text-md { font-size: 14px; } /* Font weight */ .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } /* Uppercase label */ .uppercase { text-transform: uppercase; letter-spacing: 0.5px; }