/* ========================================================================== PACEMAKER DESIGN SYSTEM Drop-in CSS for new projects. Requires: Apply a theme by setting data-theme="light" | "dark" | "retro" on . Theme is persisted via JS: document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light'; ========================================================================== */ /* ── 1. Color tokens ────────────────────────────────────────────────────── */ [data-theme="light"] { color-scheme: light; --color-accent: #2e2e2e; --color-text: #2e2e2e; --color-bg: #FDFDFD; --color-highlight: #4d4d4d; --color-surface: #f4f4f4; --color-surface-2: #e5e5e5; --color-pill-group: #ececec; --color-pill-active: #ffffff; --color-text-muted: rgba(46, 46, 46, 0.60); --color-text-subtle: rgba(46, 46, 46, 0.55); --color-text-secondary: rgba(46, 46, 46, 0.70); --color-text-faint: rgba(46, 46, 46, 0.40); --color-border: rgba(46, 46, 46, 0.08); --color-border-strong: rgba(46, 46, 46, 0.18); --color-border-dashed: rgba(46, 46, 46, 0.25); --color-hover: rgba(46, 46, 46, 0.04); --color-hover-strong: rgba(46, 46, 46, 0.06); --color-divider: rgba(46, 46, 46, 0.10); --color-grid: rgba(46, 46, 46, 0.035); --color-canvas-route: #2e2e2e; --color-canvas-label-bg: #ffffff; } [data-theme="dark"] { color-scheme: dark; --color-accent: #D5D5D5; --color-text: #D5D5D5; --color-bg: #373333; --color-highlight: #a0a0a0; --color-surface: #403d3d; --color-surface-2: #4a4646; --color-pill-group: #2e2b2b; --color-pill-active: #4a4646; --color-text-muted: rgba(213, 213, 213, 0.60); --color-text-subtle: rgba(213, 213, 213, 0.55); --color-text-secondary: rgba(213, 213, 213, 0.70); --color-text-faint: rgba(213, 213, 213, 0.40); --color-border: rgba(213, 213, 213, 0.10); --color-border-strong: rgba(213, 213, 213, 0.18); --color-border-dashed: rgba(213, 213, 213, 0.22); --color-hover: rgba(213, 213, 213, 0.06); --color-hover-strong: rgba(213, 213, 213, 0.08); --color-divider: rgba(213, 213, 213, 0.10); --color-grid: rgba(213, 213, 213, 0.04); --color-canvas-route: #D5D5D5; --color-canvas-label-bg: #373333; } [data-theme="retro"] { color-scheme: dark; --color-accent: #FFAA55; --color-text: #FCC888; --color-bg: #4F2803; --color-highlight: #FFAA55; --color-surface: #633A0A; --color-surface-2: #7A4A14; --color-pill-group: #3D1F02; --color-pill-active: #633A0A; --color-text-muted: rgba(252, 200, 136, 0.60); --color-text-subtle: rgba(252, 200, 136, 0.55); --color-text-secondary: rgba(252, 200, 136, 0.70); --color-text-faint: rgba(252, 200, 136, 0.40); --color-border: rgba(252, 200, 136, 0.10); --color-border-strong: rgba(252, 200, 136, 0.18); --color-border-dashed: rgba(252, 200, 136, 0.22); --color-hover: rgba(252, 200, 136, 0.06); --color-hover-strong: rgba(252, 200, 136, 0.08); --color-divider: rgba(252, 200, 136, 0.10); --color-grid: rgba(252, 200, 136, 0.04); --color-canvas-route: #FCC888; --color-canvas-label-bg: #4F2803; } /* ── 2. Typography & base ───────────────────────────────────────────────── */ /* Font scale (rem): 0.72 — smallest labels (mobile) 0.78 — captions, subtext, small stats 0.80 — accordion summary 0.82 — setting labels, input labels, footnotes 0.85 — section/group labels, small buttons 0.88 — compact inputs (split grade) 0.90 — standard button text, body-small 0.92 — pill buttons, accordion title 0.95 — field titles, section titles 1.00 — body, table cells 1.15 — input box values 1.90 — large bare inputs (legacy large style) clamp(1.5rem, 2vw, 3rem) — h1 Font weights used: 400 (regular), 500 (medium), 600 (semibold), 700 (bold) Letter-spacing: 0.02em on headings / section titles Font variant: tabular-nums on numeric data */ :root { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --black: var(--color-text); --highlight: var(--color-highlight); background: var(--color-bg); color: var(--color-text); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } h1 { margin: 0; font-size: clamp(1.5rem, 2vw, 3rem); font-weight: 700; letter-spacing: 0.02em; } hr { border: none; border-top: 1px solid var(--black); margin: 0; opacity: 0.1; } /* Section / group title */ .section-title { margin: 0 0 12px; color: var(--black); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; } /* Muted caption-style label above a control */ .setting-label { font-size: 0.82rem; color: var(--color-text-muted); font-weight: 500; } /* Small italic subtext below a field */ .input-field-subtext { font-size: 0.78rem; color: var(--color-text-subtle); margin: 0; } /* ── 3. Preloader spinner ───────────────────────────────────────────────── */ /* HTML: JS to dismiss: document.getElementById('preloader').classList.add('hidden'); */ #preloader { position: fixed; inset: 0; background: var(--color-bg); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.3s ease; } #preloader.hidden { opacity: 0; pointer-events: none; } .preloader-spinner { width: 28px; height: 28px; border: 2.5px solid var(--color-border-strong); border-top-color: var(--color-text); border-radius: 50%; animation: preloader-spin 0.75s linear infinite; } @keyframes preloader-spin { to { transform: rotate(360deg); } } /* ── 4. Button group (segmented control / pill selector) ────────────────── */ /* HTML:

Variant with fixed-width preset buttons: */ .button-group { display: flex; flex-direction: row; align-items: center; gap: 8px; width: fit-content; max-width: 100%; background: var(--color-pill-group); border-radius: 4px; padding: 4px; } .pill-button, .preset-button { padding: 4px 8px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--black); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .preset-button { min-width: 64px; text-align: center; } .pill-button.active, .preset-button.active { background: var(--color-pill-active); color: var(--black); font-weight: 700; box-shadow: 0 1px 2px var(--color-border); } /* ── 5. Goal preset / selection buttons ────────────────────────────────── */ /* Full-width(ish) bordered buttons that act like radio options. HTML:

*/ .goal-presets { display: flex; gap: 8px; flex-wrap: wrap; } .goal-preset-button { padding: 8px 12px; border: 1px solid var(--color-border-strong); border-radius: 4px; background: transparent; color: var(--black); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; flex: 1; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .goal-preset-button:hover { background: var(--color-hover); border-color: var(--color-text); } .goal-preset-button.active { background: var(--black); color: var(--color-bg); } .goal-preset-button.active:hover { background: var(--black); color: var(--color-bg); } .goal-preset-button:disabled { opacity: 0.35; cursor: default; pointer-events: none; } /* ── 6. Ghost/outline action buttons ───────────────────────────────────── */ /* Lightweight bordered buttons for actions (copy, download, reset, etc.). .btn-outline — standard action button (copy table, download CSV) .btn-ghost — smaller, e.g. reset / footnote-level action HTML: */ .btn-outline { padding: 8px 12px; border: 1px solid var(--color-border-strong); border-radius: 4px; background: transparent; color: var(--black); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .btn-outline:hover { background: var(--color-hover); border-color: var(--color-text); } .btn-ghost { padding: 4px 10px; border: 1px solid var(--black); border-radius: 4px; background: transparent; color: var(--black); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .btn-ghost:hover { background: var(--color-hover-strong); } /* Icon button (e.g. settings gear) */ .btn-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 8px; background: transparent; color: var(--color-text); cursor: pointer; padding: 0; transition: background 0.15s, color 0.15s; } .btn-icon:hover { background: var(--color-hover-strong); } .btn-icon[aria-expanded="true"] { background: var(--color-surface-2); } .btn-icon .material-symbols-outlined { font-size: 24px; line-height: 1; } /* ── 7. Step / stepper buttons ─────────────────────────────────────────── */ /* Square increment/decrement buttons paired with an input. HTML:

...

*/ .step-btn { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--color-border-strong); border-radius: 4px; background: transparent; color: var(--color-text); font: inherit; font-size: 1.1rem; cursor: pointer; touch-action: manipulation; transition: background 0.12s, border-color 0.12s; } .step-btn:hover { background: var(--color-hover); border-color: var(--color-text); } .step-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; } /* ── 8. Toggle switch ───────────────────────────────────────────────────── */ /* Pill-shaped on/off toggle driven by aria-pressed. HTML: JS: button.setAttribute('aria-pressed', pressed ? 'true' : 'false'); */ .switch-button { width: 44px; height: 26px; border-radius: 999px; padding: 4px; position: relative; background: var(--color-surface-2); border: none; cursor: pointer; transition: background 0.15s ease; } .switch-thumb { display: block; width: 18px; height: 18px; background: var(--black); border-radius: 50%; transition: transform 0.15s ease, background 0.15s ease; transform: translateX(0); } .switch-button[aria-pressed="true"] { background: var(--black); } .switch-button[aria-pressed="true"] .switch-thumb { transform: translateX(18px); background: var(--color-bg); } /* ── 9. Checkbox ────────────────────────────────────────────────────────── */ /* Custom styled checkbox with SVG checkmark via CSS mask. HTML: Label text */ .checkbox-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--black); user-select: none; white-space: nowrap; width: fit-content; } .checkbox-label input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex-shrink: 0; border: 1.5px solid var(--color-text); border-radius: 2px; background: transparent; position: relative; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .checkbox-label input[type="checkbox"]:checked { background: var(--color-accent); border-color: var(--color-accent); } .checkbox-label input[type="checkbox"]:checked::after { content: ''; position: absolute; inset: 0; background-color: var(--color-bg); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='1.5,5.5 3.8,7.8 8.5,2.5' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='1.5,5.5 3.8,7.8 8.5,2.5' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-size: 10px 10px; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: 10px 10px; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } /* ── 10. Input fields ───────────────────────────────────────────────────── */ /* Labelled input with optional stepper buttons. Single value:

Distance (km)

Optional hint text

Split value (hh:mm or mm:ss):

Time (hh:mm:ss)

: :

*/ .input-field { display: flex; flex-direction: column; gap: 6px; } .input-field-label { font-size: 0.82rem; color: var(--color-text-muted); font-weight: 500; font-style: normal; text-align: left; cursor: default; } .input-field-row { display: flex; align-items: center; gap: 8px; } .input-box { flex: 1; display: flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: 4px; padding: 8px 12px; background: transparent; min-width: 0; transition: border-color 0.12s; } .input-box:focus-within { border-color: var(--color-text); } .input-box input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 1.15rem; font-weight: 700; color: var(--color-text); caret-color: var(--color-text); padding: 0; line-height: 1.2; text-align: left; outline: none; } .input-box input::placeholder { color: var(--color-text); opacity: 0.4; } .input-box input:focus { color: var(--color-highlight); } .input-box input:disabled { opacity: 0.5; } /* Split inputs (hh:mm:ss, mm:ss) — center-aligned segments */ .input-box--split input { text-align: center; min-width: 20px; } .split-divider { color: var(--color-text-muted); font-size: 1.15rem; font-weight: 700; flex-shrink: 0; padding: 0 2px; } /* Suppress number input spinners */ input[type="number"] { appearance: textfield; -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } /* Small inline input with border box (e.g. percentage field) */ .input-mini-wrap { display: flex; align-items: center; gap: 2px; border: 1px solid var(--color-border-strong); border-radius: 4px; padding: 4px 8px; background: transparent; } .input-mini-wrap input { width: 28px; border: none; background: transparent; font-size: 0.88rem; font-weight: 700; color: var(--color-text); padding: 0; text-align: center; caret-color: var(--color-text); line-height: 1; outline: none; flex: none; } .input-mini-unit { font-size: 0.82rem; color: var(--color-text-muted); } /* ── 11. Setting row (label + control) ─────────────────────────────────── */ /* Stacked label + control pair, used inside panels/accordions. HTML:

Unit

...

*/ .setting-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } /* Side-by-side variant (two setting-rows next to each other) */ .setting-row--inline { flex-direction: row; align-items: stretch; gap: 10px; } .setting-col { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; } .setting-col--auto { flex: 0 0 auto; } /* ── 12. Accordion card ─────────────────────────────────────────────────── */ /* Animated expand/collapse. Only one should be open at a time (handle in JS). HTML:

Section name Collapsed summary

expand_more

content here

JS: toggle button's aria-expanded between "true"/"false" */ .accordion-card { border: 1px solid var(--color-border-strong); border-radius: 8px; overflow: hidden; flex-shrink: 0; } .accordion-card:has(.accordion-header[aria-expanded="true"]) { background: rgba(255, 255, 255, 0.08); border-color: var(--color-text-faint); } .accordion-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; width: 100%; background: transparent; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--color-text); transition: background 0.12s; } .accordion-header:hover { background: var(--color-hover); } .accordion-header-content { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .accordion-title { font-size: 0.92rem; font-weight: 700; color: var(--color-text); } .accordion-summary { font-size: 0.8rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .accordion-chevron { font-family: "Material Symbols Outlined"; font-size: 20px; line-height: 1; color: var(--color-text-muted); flex-shrink: 0; transition: transform 0.2s ease; } .accordion-header[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); } .accordion-header[aria-expanded="true"] .accordion-summary { opacity: 0; } /* closed state */ .accordion-body { display: flex; flex-direction: column; gap: 14px; padding: 0 16px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* open state — height first, then fade in */ .accordion-header[aria-expanded="true"] + .accordion-body { max-height: 700px; padding: 2px 16px 16px; opacity: 1; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; } /* ── 13. Dropdown / popover panel ───────────────────────────────────────── */ /* Floating panel anchored to a trigger button (e.g. settings, context menu). HTML:

JS: toggle hidden + aria-expanded */ .popover-anchor { position: relative; } .popover-panel { position: absolute; top: calc(100% + 8px); right: 0; background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 10px; padding: 14px 16px; min-width: 280px; z-index: 200; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10); } .popover-panel[hidden] { display: none; } /* ── 14. Dropzone ───────────────────────────────────────────────────────── */ /* Dashed-border file upload area. HTML:

upload_file

Drop file or click to select

Select file

JS: add .drag-over on dragenter/dragover, remove on dragleave/drop */ .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 20px; border: 2px dashed var(--color-border-dashed); border-radius: 6px; text-align: center; transition: border-color 0.15s, background 0.15s; } .dropzone.drag-over { border-color: var(--black); background: var(--color-hover); } .dropzone-icon { font-family: "Material Symbols Outlined"; font-size: 36px; font-weight: 300; color: var(--color-text-faint); line-height: 1; } .dropzone-hint { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; } /* Visually hidden but accessible file input */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── 15. File chip (loaded-file button) ─────────────────────────────────── */ /* Displays the selected filename with a remove (×) action. HTML: */ .file-chip { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 6px; padding: 8px 12px; border: 1px solid var(--black); border-radius: 4px; background: var(--color-surface); color: var(--black); cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 600; transition: background 0.15s, border-color 0.15s, color 0.15s; } .file-chip:hover { background: var(--color-surface-2); border-color: var(--color-highlight); color: var(--color-highlight); } .file-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-chip-remove { font-family: "Material Symbols Outlined"; font-size: 18px; font-weight: 400; line-height: 1; } /* ── 16. Stats grid ─────────────────────────────────────────────────────── */ /* Key-value grid for displaying stats (distance, elevation, duration, etc.). HTML:

Distance: 10.2 km
Elevation: +142 m

Modifier: .stats-grid--2col for 2-column layout (mobile default) */ .stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin: 0; padding: 0; } .stats-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats-grid div { min-width: 0; } .stats-grid dt { color: var(--color-text-subtle); font-size: 0.78rem; font-weight: 600; } .stats-grid dd { margin: 4px 0 0; color: var(--black); font-size: 0.9rem; font-weight: 400; font-variant-numeric: tabular-nums; } /* ── 17. Toast / copy tooltip ───────────────────────────────────────────── */ /* Floating ephemeral confirmation. Position via JS: left + top from trigger rect. HTML: JS to trigger: toast.style.left = x + 'px'; toast.style.top = y + 'px'; toast.classList.add('toast--visible'); toast.addEventListener('animationend', () => toast.classList.remove('toast--visible'), { once: true }); */ .toast { position: fixed; transform: translateX(-50%) translateY(calc(-100% - 8px)); background: #111; color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; z-index: 9999; } .toast--visible { animation: toast-anim 2.4s ease forwards; } @keyframes toast-anim { 0% { opacity: 1; transform: translateX(-50%) translateY(calc(-100% - 8px)); } 83% { opacity: 1; transform: translateX(-50%) translateY(calc(-100% - 8px)); } 100% { opacity: 0; transform: translateX(-50%) translateY(calc(-100% - 20px)); } } /* Placement variant: tooltip sits to the left of the trigger, vertically centered — for triggers near the top of the page where the default "above" placement would overflow the viewport. */ .toast--left { transform: translateX(calc(-100% - 8px)) translateY(-50%); } .toast--left.toast--visible { animation: toast-anim-left 2.4s ease forwards; } @keyframes toast-anim-left { 0% { opacity: 1; transform: translateX(calc(-100% - 8px)) translateY(-50%); } 83% { opacity: 1; transform: translateX(calc(-100% - 8px)) translateY(-50%); } 100% { opacity: 0; transform: translateX(calc(-100% - 20px)) translateY(-50%); } } /* ── 18. Range slider ───────────────────────────────────────────────────── */ /* Minimal custom range slider (flat track, rectangular thumb). HTML: */ .range-slider { width: 100%; height: 24px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; } .range-slider:focus { outline: none; } .range-slider::-webkit-slider-runnable-track { height: 2px; background: var(--black); } .range-slider::-webkit-slider-thumb { width: 8px; height: 24px; margin-top: -11px; appearance: none; -webkit-appearance: none; background: var(--black); border: none; border-radius: 0; } .range-slider::-moz-range-track { height: 2px; background: var(--black); } .range-slider::-moz-range-thumb { width: 8px; height: 24px; background: var(--black); border: none; border-radius: 0; } /* ── 19. Utility classes ────────────────────────────────────────────────── */ /* Subtle italic note / annotation */ .text-note { font-size: 0.82rem; color: var(--color-text-muted); font-style: italic; } /* Tabular number formatting */ .tabular-nums { font-variant-numeric: tabular-nums; } /* Faint horizontal rule */ .divider { border: none; border-top: 1px solid var(--color-divider); margin: 0; }