/* ============================================================ STANDBY — styles.css All values via CSS custom properties. No hardcoded hex in component rules. Bump sw.js cache name on each release. ============================================================ */ /* === RESET === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* === DESIGN TOKENS === */ :root { /* Surfaces */ --bg: #0a0a0a; --bg2: #141414; --bg3: #1a1a1a; --bg4: #222222; --bg5: #2a2a2a; /* Borders */ --border: #232323; --border2: #333333; --border3: #4a4a4a; /* Text */ --text: #f0f0f0; --text2: #a8a8a8; --text3: #6a6a6a; /* Accent — muted tactical yellow. 95% neutral / 5% yellow rule. */ --accent: #C9A227; --accent2: #B8941F; /* Typography */ --font-display: 'Big Shoulders Display', 'Oswald', sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* Shape */ --radius: 14px; --radius-sm: 8px; /* Safe area insets (notch / home bar) */ --safe-top: env(safe-area-inset-top); --safe-bot: env(safe-area-inset-bottom); /* Layout constants */ --header-h: 56px; --nav-h: 60px; } /* === FIELD MODE (fvm) === Session-only. Toggled via JS on . Never persisted. Brightens surfaces and borders for outdoor readability. Does not change hue, layout, fonts, or logic. */ html.fvm { --bg: #1a1a1a; --bg2: #242424; --bg3: #2e2e2e; --bg4: #383838; --bg5: #424242; --border: #3a3a3a; --border2: #505050; --border3: #686868; --text2: #d0d0d0; --text3: #a0a0a0; --accent: #D4A017; } html.fvm .timer-display { font-weight: 900; } html.fvm .drill-card, html.fvm .log-entry, html.fvm .log-form, html.fvm .drill-section-content { backdrop-filter: none; background: var(--bg3); } /* === BASE === */ html { font-family: var(--font-body); background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; height: 100%; } body { height: 100%; overflow: hidden; } [hidden] { display: none !important; } /* === HEADER === */ .app-header { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--header-h) + var(--safe-top)); padding-top: var(--safe-top); display: flex; align-items: center; justify-content: space-between; padding-left: 16px; padding-right: 12px; background: var(--bg2); border-bottom: 1px solid var(--border); z-index: 100; } /* === BRAND (left side of header) === */ .header-brand { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 6px 4px; color: inherit; border-radius: var(--radius-sm); } .header-brand:active { background: var(--bg4); } .logo-mark { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; display: block; } .brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .brand-name { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: 2px; color: var(--text); line-height: 1; } .brand-sub { font-size: 9px; font-weight: 500; letter-spacing: 0.8px; color: var(--text3); text-transform: uppercase; line-height: 1; } /* === FIELD MODE TOGGLE (right side of header) === */ .fvm-toggle { display: flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; padding: 6px 4px; border-radius: var(--radius-sm); color: var(--text2); } .fvm-toggle:active { background: var(--bg4); } .fvm-icon { width: 15px; height: 15px; flex-shrink: 0; transition: opacity 0.2s; display: block; } .fvm-icon--moon { opacity: 0.9; } .fvm-icon--sun { opacity: 0.35; } html.fvm .fvm-icon--moon { opacity: 0.35; } html.fvm .fvm-icon--sun { opacity: 1; color: var(--accent); } .fvm-pill { position: relative; width: 42px; height: 24px; border-radius: 12px; background: var(--bg4); border: 1px solid var(--border2); flex-shrink: 0; transition: background 0.2s, border-color 0.2s; } html.fvm .fvm-pill { background: var(--accent); border-color: var(--accent); } .fvm-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text2); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s; } html.fvm .fvm-knob { transform: translateX(18px); background: var(--bg); } /* === MAIN SCROLL AREA === */ .app-main { position: fixed; top: calc(var(--header-h) + var(--safe-top)); left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-bot)); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* === SCREENS === */ .screen { min-height: 100%; display: flex; flex-direction: column; padding: 24px 16px 32px; } /* === HOME SCREEN — timer is the hero === */ .screen--home { justify-content: space-between; align-items: center; padding-top: 0; padding-bottom: 28px; } .home-timer-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .home-stats { width: 100%; max-width: 300px; display: flex; border-top: 1px solid var(--border); padding-top: 20px; gap: 0; } .home-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 12px; } .home-stat + .home-stat { border-left: 1px solid var(--border); } .home-stat-label { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 2.5px; color: var(--text3); text-transform: uppercase; } .home-stat-value { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; line-height: 1; } .home-stat-sub { font-size: 11px; color: var(--text3); text-align: center; letter-spacing: 0.2px; min-height: 14px; line-height: 1.4; } .timer-display-area { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 52px; } .timer-state-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 5px; color: var(--text3); text-transform: uppercase; min-height: 18px; transition: color 0.2s; } #s-home[data-state="standby"] .timer-state-label { color: var(--accent); animation: label-pulse 1s ease-in-out infinite; } #s-home[data-state="running"] .timer-state-label { color: var(--text3); } #s-home[data-state="result"] .timer-state-label { color: var(--accent); animation: none; } .timer-display { font-family: var(--font-display); font-size: clamp(68px, 22vw, 128px); font-weight: 800; letter-spacing: -2px; color: var(--text); line-height: 1; text-align: center; font-variant-numeric: tabular-nums; transition: color 0.15s; } #s-home[data-state="running"] .timer-display { color: var(--accent); } .timer-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 300px; } .timer-result-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 300px; } .btn--cancel-ghost { background: none; border: none; color: var(--text3); font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 2px; cursor: pointer; padding: 8px 16px; } .btn--cancel-ghost:active { color: var(--text2); } /* === SCREEN TITLE (shared) === */ .screen-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: 2px; color: var(--text); flex-shrink: 0; } /* === DRILLS SCREEN === */ .screen--drills { gap: 16px; } .drill-list { display: flex; flex-direction: column; gap: 8px; } .drill-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: border-color 0.15s, background 0.15s; display: flex; flex-direction: column; gap: 5px; } .drill-card:active { background: var(--bg4); border-color: var(--border2); } .drill-card-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: 0.5px; } .drill-card-purpose { font-size: 13px; color: var(--text2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* === DRILL DETAIL SCREEN === */ .screen--drill-detail { gap: 20px; } .back-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; color: var(--text3); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 2px; padding: 0; text-transform: uppercase; transition: color 0.15s; } .back-btn:active { color: var(--text); } .back-arrow { font-size: 16px; line-height: 1; } .drill-detail-name { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: 1px; color: var(--text); line-height: 1.1; } .drill-section { display: flex; flex-direction: column; gap: 7px; } .drill-section-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2.5px; color: var(--accent); text-transform: uppercase; } .drill-section-content { font-size: 14px; color: var(--text2); line-height: 1.65; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; } /* === LOG SCREEN === */ .screen--log { gap: 16px; } .log-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .log-form { background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius); padding: 16px; flex-shrink: 0; } .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .form-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--text3); text-transform: uppercase; } .form-input { width: 100%; background: var(--bg4); border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); font-size: 14px; padding: 10px 12px; -webkit-appearance: none; appearance: none; transition: border-color 0.15s; } .form-input:focus { outline: none; border-color: var(--accent); } select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; cursor: pointer; } .form-textarea { resize: vertical; min-height: 76px; font-family: var(--font-body); line-height: 1.5; } .form-actions { display: flex; gap: 10px; margin-top: 18px; } .log-list { display: flex; flex-direction: column; gap: 8px; } .log-empty { text-align: center; color: var(--text3); font-size: 14px; line-height: 1.6; padding: 52px 16px; } .log-entry { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .log-entry-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; gap: 12px; cursor: pointer; } .log-entry-header:active { background: var(--bg4); } .log-entry-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .log-entry-drill { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .log-entry-date { font-size: 12px; color: var(--text3); } .log-entry-result { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--accent); flex-shrink: 0; letter-spacing: 0.5px; } .log-entry-body { border-top: 1px solid var(--border); padding: 14px 16px 16px; display: none; flex-direction: column; gap: 12px; } .log-entry.expanded .log-entry-body { display: flex; } .log-field { display: flex; flex-direction: column; gap: 4px; } .log-field-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--text3); text-transform: uppercase; } .log-field-value { font-size: 13px; color: var(--text2); line-height: 1.55; white-space: pre-wrap; } .log-entry-delete { align-self: flex-start; background: none; border: 1px solid var(--border3); border-radius: var(--radius-sm); color: var(--text3); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; padding: 6px 14px; cursor: pointer; transition: border-color 0.15s, color 0.15s; margin-top: 4px; } .log-entry-delete:active { border-color: #a93226; color: #e74c3c; } /* === BUTTONS === */ .btn { display: flex; align-items: center; justify-content: center; border-radius: var(--radius); font-family: var(--font-display); font-weight: 700; letter-spacing: 2px; font-size: 15px; cursor: pointer; border: none; padding: 14px 24px; white-space: nowrap; transition: opacity 0.12s, background 0.12s; text-align: center; } .btn--xl { padding: 20px 32px; font-size: 18px; letter-spacing: 3px; } .btn--sm { padding: 8px 16px; font-size: 12px; letter-spacing: 1.5px; border-radius: var(--radius-sm); } .btn--primary { background: var(--text); color: var(--bg); } .btn--primary:active { opacity: 0.82; } .btn--accent { background: var(--accent); color: var(--bg); } .btn--accent:active { background: var(--accent2); } .btn--secondary { background: var(--bg4); color: var(--text2); border: 1px solid var(--border2); } .btn--secondary:active { background: var(--bg5); } .btn--ghost { background: none; color: var(--text3); border: 1px solid var(--border2); } .btn--ghost:active { background: var(--bg3); } /* === BOTTOM NAV === */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-h) + var(--safe-bot)); padding-bottom: var(--safe-bot); display: flex; background: var(--bg2); border-top: 1px solid var(--border); z-index: 100; } .nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: none; border: none; cursor: pointer; color: var(--text3); padding: 0; transition: color 0.15s; } .nav-btn.active { color: var(--accent); } .nav-icon { width: 22px; height: 22px; display: block; opacity: 0.45; transition: opacity 0.15s; } .nav-btn.active .nav-icon { opacity: 1; } .nav-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; } /* === ANIMATIONS === */ @keyframes label-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* === DESKTOP === */ @media (min-width: 880px) { .app-main { left: 50%; right: auto; width: 480px; transform: translateX(-50%); border-left: 1px solid var(--border); border-right: 1px solid var(--border); } .bottom-nav { left: 50%; right: auto; width: 480px; transform: translateX(-50%); border-left: 1px solid var(--border); border-right: 1px solid var(--border); } }