/* ═══════════════════════════════════════════════════════════════ PLAKKA — Shared Stylesheet File layout (read top to bottom): 1. TOKENS design tokens: colours, spacing, radii, shadows, z-indices — edit these to change the look globally 2. BASE resets, typography, body defaults 3. UTILITIES small atomic classes for layout and typography (.row, .col, .card, .fab, .hidden, .t-muted etc.) — prefer these over inline styles 4. COMPONENTS named UI pieces: header, walk panel, share modal, plaque detail modal, map overlays, footer, etc. Theme A: Classic Navy (default) Theme B: Twilight (dark, copper accents) via [data-theme="twilight"] Naming conventions: - Utilities are short: .row, .card, .fab, .t-sm - Components use BEM-light for hierarchy: .walk-panel__head - Legacy class names (wp-*, pdm-*) are kept where JS references them ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ 1. TOKENS ═══════════════════════════════════════════════════════════════ */ /* Auth guard — hides protected pages until /auth/me has validated. Applied to by a script in the , removed by auth-guard.js on success, or the page redirects on failure (so class is irrelevant). Using visibility (not display) keeps layout stable during the check. */ html.auth-guarded, html.auth-guarded body { visibility: hidden; } /* ── THEME A: Classic Navy (default) ── */ :root { --bg: #eef2f7; --hdr-bg: #1b3a6b; --hdr-accent: #1e8fd4; --hdr-text: #ffffff; --hdr-input-bg: rgba(255,255,255,.12); --hdr-input-bd: rgba(255,255,255,.25); --hdr-input-fc: rgba(255,255,255,.6); --hdr-btn-bg: rgba(255,255,255,.12); --hdr-btn-hov: rgba(255,255,255,.22); --toggle-bg: rgba(255,255,255,.12); --btn-active-bg: #ffffff; --btn-active-fg: #1b3a6b; --pill-bg: rgba(255,255,255,.15); --panel-bg: #ffffff; --panel-shadow: 0 6px 32px rgba(0,0,0,.16); --panel-bd: #e8eef5; --panel-faint: #f0f4f8; --panel-hover: #f4f9ff; --panel-hl: #ebf4ff; --text-primary: #1a2a3a; --text-secondary:#7a8fa8; --text-accent: #1e8fd4; --text-label: #3a5a80; --text-head: #1b3a6b; --toast-bg: rgba(27,58,107,.92); --hint-bg: rgba(255,255,255,.96); --hint-bd: #dce3ee; --grad-blue: linear-gradient(135deg,#1b3a6b,#1a6ea8); --grad-green: linear-gradient(135deg,#1a6b2a,#27ae60); --grad-orange: linear-gradient(135deg,#c2410c,#f97316); --grad-red: linear-gradient(135deg,#9f1239,#e11d48); --red: #e11d48; --red-dark: #9f1239; --red-darkest: #7f1d1d; --theme-icon: "🌙"; --theme-label: "Twilight"; } /* ── THEME B: Twilight (dark + copper) ── */ [data-theme="twilight"] { --bg: #0f1623; --hdr-bg: #0a0f1a; --hdr-accent: #c17d3c; --hdr-text: #e8d5b7; --hdr-input-bg: rgba(193,125,60,.1); --hdr-input-bd: rgba(193,125,60,.3); --hdr-input-fc: rgba(232,213,183,.7); --hdr-btn-bg: rgba(193,125,60,.12); --hdr-btn-hov: rgba(193,125,60,.22); --toggle-bg: rgba(193,125,60,.1); --btn-active-bg: #c17d3c; --btn-active-fg: #0f1623; --pill-bg: rgba(193,125,60,.2); --panel-bg: #1a2235; --panel-shadow: 0 6px 32px rgba(0,0,0,.5); --panel-bd: #2a3550; --panel-faint: #141d2e; --panel-hover: #1f2d44; --panel-hl: #1a2d44; --text-primary: #e8d5b7; --text-secondary:#8a9ab5; --text-accent: #c17d3c; --text-label: #a0b0c8; --text-head: #e8d5b7; --toast-bg: rgba(10,15,26,.95); --hint-bg: rgba(26,34,53,.96); --hint-bd: #2a3550; --grad-blue: linear-gradient(135deg,#1a2a50,#2a4a80); --grad-green: linear-gradient(135deg,#0f3020,#1a6b2a); --grad-orange: linear-gradient(135deg,#6b2a0c,#c17d3c); --grad-red: linear-gradient(135deg,#5f0f25,#9f1239); --red: #e11d48; --red-dark: #9f1239; --red-darkest: #7f1d1d; --theme-icon: "☀"; --theme-label: "Classic"; } /* ── TOKENS: additive scales (theme-independent) ── */ :root { /* Spacing scale (based on 4px grid) */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Radius scale */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* Shadow scale (stacks cleanly with existing --panel-shadow) */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.12); --shadow-lg: 0 8px 24px rgba(0,0,0,.18); --shadow-fab: 0 3px 12px rgba(0,0,0,.25); /* Z-index scale — use these named levels so stacking is predictable */ --z-map: 400; /* Leaflet's own layers */ --z-map-ctrl: 800; /* FABs, on-map buttons, overlays */ --z-header: 1000; --z-modal: 2000; --z-sheet: 2500; /* plaque detail bottom sheet */ --z-toast: 3000; /* Font size scale */ --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; /* Common durations */ --t-fast: .12s; --t-base: .15s; --t-slow: .3s; /* ── Bucket palette ──────────────────────────────────────────── Display colours for the 9 plaque-scheme buckets, used both in the admin Colours tab (chips) and on the map (markers) when "Show plaque colours" mode is on. Hex values are tuned for legibility on a typical map background and to remain distinguishable from each other. Brown vs Red and Green vs Blue are the close pairs to watch — the white border on every marker compensates by separating each marker from the map background, and the popup's text label gives a non-colour fallback for users who can't distinguish them. If these need tuning later: keep the variable names stable, edit the hex values here, and both admin chips and map markers update in lockstep. Note: --bucket-white is deliberately a very pale grey — pure white would disappear against the marker's white border. */ --bucket-blue: #1d4ed8; --bucket-black: #1f2937; --bucket-green: #15803d; --bucket-red: #b91c1c; --bucket-white: #f3f4f6; --bucket-yellow: #f59e0b; --bucket-brown: #92400e; --bucket-grey: #6b7280; --bucket-other: #9ca3af; } /* ═══════════════════════════════════════════════════════════════ 2. BASE ═══════════════════════════════════════════════════════════════ */ *{margin:0;padding:0;box-sizing:border-box} body{ font-family:'Segoe UI',system-ui,sans-serif; height:100vh;height:100dvh;display:flex;flex-direction:column; overflow:hidden;background:var(--bg); transition:background .3s, color .3s; padding-top:calc(48px + env(safe-area-inset-top)); } /* ═══════════════════════════════════════════════════════════════ 3. UTILITIES Small, atomic classes. Prefer these over inline styles. ═══════════════════════════════════════════════════════════════ */ /* ── Visibility ── */ /* .hidden is used by JS to toggle visibility; the !important wins over inline display values. Use classList.add('hidden') / remove('hidden'). */ .hidden { display: none !important; } .invisible { visibility: hidden; } .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; } /* ── Layout primitives ── */ /* .row = horizontal flex with default gap and vertical-centre */ /* .col = vertical flex, equivalent of stack with custom gap */ /* .cluster = flex-wrap, useful for tag chips, action button rows */ /* .stack > *+* = add vertical rhythm between children without margins collapsing */ .row { display: flex; align-items: center; gap: var(--space-2); } .row-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .col { display: flex; flex-direction: column; gap: var(--space-2); } .cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .stack > * + * { margin-top: var(--space-3); } .stack-sm > * + * { margin-top: var(--space-2); } .stack-lg > * + * { margin-top: var(--space-5); } /* Spacing utilities (single direction, one-off tweaks) */ .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .flex-1 { flex: 1; } .flex-shrink-0 { flex-shrink: 0; } .text-center { text-align: center; } .text-left { text-align: left; } /* ── Cards & surfaces ── */ /* .card = the standard panel that appears on every stats page. Replaces the repeated inline: background:var(--panel-bg);border-radius:14px;padding:28px; margin-bottom:24px;box-shadow:var(--panel-shadow) */ .card { background: var(--panel-bg); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--panel-shadow); } .card--tight { padding: var(--space-4); } .card--center { text-align: center; } /* ── Empty state (used by many list pages when there's nothing to show) ── */ .empty-state { padding: var(--space-4); text-align: center; color: var(--text-secondary); font-size: var(--fs-base); } .empty-state--lg { padding: 40px; } .empty-state__icon { font-size: 40px; margin-bottom: 12px; } /* ── Typography ── */ .t-xs { font-size: var(--fs-xs); } .t-sm { font-size: var(--fs-sm); } .t-base { font-size: var(--fs-base); } .t-md { font-size: var(--fs-md); } .t-lg { font-size: var(--fs-lg); } .t-xl { font-size: var(--fs-xl); } .t-2xl { font-size: var(--fs-2xl); } .t-muted { color: var(--text-secondary); } .t-primary { color: var(--text-primary); } .t-accent { color: var(--text-accent); } .t-head { color: var(--text-head); } .t-bold { font-weight: 700; } .t-semibold { font-weight: 600; } .t-black { font-weight: 900; } .t-upper { text-transform: uppercase; letter-spacing: .06em; } /* ── Buttons (primitives — existing component buttons still work as-is) ── */ .btn-base { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 14px; border: none; border-radius: var(--radius-md); font-size: var(--fs-base); font-weight: 700; cursor: pointer; transition: background var(--t-base), opacity var(--t-base), transform var(--t-fast); text-decoration: none; user-select: none; } .btn-base:active { transform: translateY(1px); } .btn-primary { background: var(--grad-blue); color: #fff; } .btn-primary:hover { opacity: .9; } .btn-ghost { background: var(--panel-faint); color: var(--text-label); border: 1px solid var(--panel-bd); } .btn-ghost:hover { background: var(--panel-hover); } .btn-danger { background: var(--grad-red); color: #fff; } .btn-danger:hover { opacity: .9; } /* ── FAB (floating action button) ── Positioned by parent; .map-fab below handles map-specific placement. */ .fab { width: 48px; height: 48px; border-radius: 50%; border: none; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; cursor: pointer; box-shadow: var(--shadow-fab); transition: background var(--t-base), transform var(--t-fast); } .fab:active { transform: translateY(1px); } .fab--primary { background: var(--text-accent); } .fab--danger { background: var(--red); } .fab--dark { background: var(--red-darkest); } /* Map-specific FAB positioning: bottom-right column, stackable. Use with the .fab base class. Extra siblings stack upward in 56px steps. */ .map-fab { position: absolute; right: var(--space-3); z-index: var(--z-map-ctrl); } .map-fab--b1 { bottom: 72px; } .map-fab--b2 { bottom: 128px; } .map-fab--b3 { bottom: 184px; } /* Bottom-centre variant — for the Record FAB. Overrides .map-fab's right: ... with left: 50% + translateX. We re-declare .fab:active's translateY here too because the X-centring transform shadows it otherwise. bottom: 50px clears the walk-sheet peek (38px) by ~12px when a walk is open, and sits comfortably above the bottom of the map-wrap when no walk is loaded. z-index above the walk-sheet (1080) so the FAB stays tappable. */ .map-fab--bc { position: absolute; right: auto; left: 50%; bottom: 50px; transform: translateX(-50%); z-index: 1100; } .map-fab--bc:active { transform: translate(-50%, 1px); } /* ── RECORD FAB ── Red filled circle with a white inner shape. .is-recording switches the inner shape from dot to square and adds a pulsing ring to telegraph "actively recording" status. */ .record-fab { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; background: #dc2626; cursor: pointer; box-shadow: 0 3px 12px rgba(220,38,38,.45); display: inline-flex; align-items: center; justify-content: center; padding: 0; } .record-fab__dot { width: 22px; height: 22px; background: #fff; border-radius: 50%; display: block; transition: border-radius var(--t-base), width var(--t-base), height var(--t-base); } .record-fab.is-recording .record-fab__dot { width: 16px; height: 16px; border-radius: 3px; } .record-fab.is-recording { /* Pulsing red ring around the button while recording. */ animation: record-pulse 1.6s ease-out infinite; } @keyframes record-pulse { 0% { box-shadow: 0 3px 12px rgba(220,38,38,.45), 0 0 0 0 rgba(220,38,38,.5); } 70% { box-shadow: 0 3px 12px rgba(220,38,38,.45), 0 0 0 14px rgba(220,38,38,0); } 100% { box-shadow: 0 3px 12px rgba(220,38,38,.45), 0 0 0 0 rgba(220,38,38,0); } } /* ── LIVE RECORDING STATS BADGE ── Bottom-centred pill, just above the Record FAB. Shown only while recording; JS toggles display between 'none' and 'inline-flex'. */ .record-stats { position: absolute; bottom: 92px; /* pill controls bottom 24px + height ~50px + 18px gap */ left: 50%; transform: translateX(-50%); z-index: var(--z-map-ctrl); /* Switched from inline-flex to flex-column 2026-05-19 (session 7) so the paused-strip can stack on top of the metrics row. Inline-flex was fine when the badge was a single row, but with the optional amber header strip we need vertical stacking. */ display: flex; flex-direction: column; background: rgba(255,255,255,0.96); border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.12)); border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.12); font-size: 11px; color: var(--text-primary, #111); line-height: 1.2; white-space: nowrap; pointer-events: none; /* never blocks taps on the map */ overflow: hidden; /* clip the paused-strip's rounded corners */ } /* Amber "Paused" header strip — added 2026-05-19 (session 7). Sits above the metrics row when the recording is paused; hidden during active recording. Same visual language as Strava and Garmin Connect: amber/yellow conveys "still in progress but not capturing". */ .record-stats__paused-strip { background: #f59e0b; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-align: center; padding: 3px 12px; text-transform: uppercase; } .record-stats__row { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; } .record-stats__dot { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; flex-shrink: 0; animation: record-pulse-dot 1.6s ease-out infinite; } /* When the badge is in paused state, freeze the pulse — the amber strip already conveys "not actively capturing", so the dot becoming solid (and slightly desaturated) reinforces the same message. */ .record-stats.is-paused .record-stats__dot { animation: none; background: #94a3b8; } @keyframes record-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .record-stats__metric { display: inline-flex; align-items: baseline; gap: 4px; } .record-stats__k { font-size: 9px; font-weight: 600; letter-spacing: 0.5px; color: var(--text-secondary, #666); } .record-stats__v { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; /* avoid widths shifting as digits change */ color: var(--text-primary, #111); } /* ── Record controls — pause / resume / finish (2026-05-19, session 7) Replaced the round Record FAB. Container is bottom-centre; pills inside lay out horizontally with a gap when more than one is visible (the paused state shows Resume + Finish side-by-side). The container is hidden when recorder is idle — start a recording from the kebab "Record a walk" menu item, not from these. */ .record-controls { position: absolute; bottom: 110px; /* clears walk-sheet peek (38px) with ~72px margin */ left: 50%; transform: translateX(-50%); z-index: 1100; /* above walk-sheet (1080) so pills stay tappable */ display: flex; flex-direction: row; gap: 10px; /* No background — pills carry their own. */ } .record-pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: none; border-radius: 999px; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.22); -webkit-tap-highlight-color: transparent; min-width: 130px; justify-content: center; transition: transform .08s, box-shadow .15s, background .15s; } .record-pill:active { transform: scale(.97); } .record-pill svg { flex-shrink: 0; } .record-pill--pause { background: #f59e0b; } /* amber — traffic-light "slow/caution": matches the paused stats strip */ .record-pill--pause:hover { background: #d97706; } .record-pill--resume { background: #16a34a; } /* green — traffic-light "go": resume the recording */ .record-pill--resume:hover { background: #15803d; } .record-pill--finish { background: #1f2937; } /* near-black — destructive */ .record-pill--finish:hover { background: #111827; } /* ═══════════════════════════════════════════════════════════════ 4. COMPONENTS Named UI pieces. Legacy class names (wp-*, pdm-*, etc.) are kept because JS references them. New components should use BEM-light naming: .block, .block__element, .block--modifier. ═══════════════════════════════════════════════════════════════ */ /* ── THEME TOGGLE BUTTON ── */ #btn-theme{ padding:0;width:32px;height:32px;border:none; background:var(--hdr-btn-bg);border-radius:50%; color:var(--hdr-text);font-size:15px;cursor:pointer; flex-shrink:0;display:flex;align-items:center;justify-content:center; transition:background .15s; align-self:center;margin-left:8px;margin-right:10px; } #btn-theme:hover{background:var(--hdr-btn-hov)} /* ── COMPACT HEADER ── */ header{ background:var(--hdr-bg);color:var(--hdr-text); padding:env(safe-area-inset-top) 0 0;height:calc(48px + env(safe-area-inset-top)); display:flex;align-items:stretch;gap:0; flex-shrink:0;z-index:1100; box-shadow:0 2px 10px rgba(0,0,0,.28); transition:background .3s; overflow:hidden; position:fixed;top:0;left:0;right:0; } /* .sw (search wrap) is now a fixed-position floating card defined inline in index.html (top-level body child, not header). The old inline-header styles that lived here have been removed — they were forcing a 220px width which clipped the new full-width search box. */ .mode-toggle{ display:flex;background:var(--toggle-bg); border-radius:7px;padding:2px;gap:2px;flex-shrink:0; align-self:center;margin-left:10px; } .mode-btn{ padding:4px 8px;border:none;border-radius:5px; font-size:11px;font-weight:700;cursor:pointer; color:rgba(255,255,255,.4);background:transparent; display:flex;align-items:center;gap:4px; text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25); min-height:32px;transition:all .15s; } .mode-btn.active{ background:var(--btn-active-bg);color:var(--btn-active-fg); text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,.18); } .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .dot-b{background:#1e8fd4}.dot-g{background:#27ae60} .btn-reset-hdr{ padding:0;width:32px;height:32px;border:none; background:var(--hdr-btn-bg);border-radius:50%; color:var(--hdr-text);font-size:17px;font-weight:700;cursor:pointer; flex-shrink:0;display:flex;align-items:center;justify-content:center; align-self:center;margin-left:auto; border:1.5px solid rgba(255,255,255,.25); transition:background .15s, transform .15s; } .btn-reset-hdr:hover{background:var(--hdr-btn-hov); transform:rotate(-30deg);} /* ── MAP ── */ .map-wrap{flex:1;position:relative;overflow:hidden} #map{width:100%;height:100%} /* ── WALK PANEL ── */ #walk-panel{ position:absolute;top:12px;right:12px;width:310px; background:var(--panel-bg);border-radius:12px; box-shadow:var(--panel-shadow);z-index:900; display:none;flex-direction:column;max-height:calc(100% - 24px);overflow:hidden; transition:background .3s; } #walk-panel.open{display:flex} .wp-head{ color:#fff;padding:13px 40px 11px 13px; border-radius:12px 12px 0 0;flex-shrink:0;position:relative; } .wp-head.th-blue{background:var(--grad-blue)} .wp-head.th-green{background:var(--grad-green)} .wp-head.th-orange{background:var(--grad-orange)} .wp-r1{display:flex;align-items:center;gap:8px;margin-bottom:7px} .wp-icon{font-size:20px} .wp-head h2{font-size:13px;font-weight:700;line-height:1.3;flex:1} .wp-x{ position:absolute;top:9px;right:9px;background:rgba(255,255,255,.18); border:none;color:#fff;width:24px;height:24px;border-radius:50%; cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center; } .wp-x:hover{background:rgba(255,255,255,.3)} .wp-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin-bottom:7px} .wp-stat{background:rgba(255,255,255,.14);border-radius:5px;padding:6px 4px;text-align:center} .wp-stat-n{font-size:16px;font-weight:800;display:block;line-height:1} .wp-stat-l{font-size:9px;opacity:.7;letter-spacing:.05em;text-transform:uppercase;margin-top:2px;display:block} #route-status{font-size:10px;font-weight:600;display:flex;align-items:center;gap:4px;opacity:.85} #rsdot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);flex-shrink:0} #btn-stops-toggle{ display:none;width:100%;padding:8px 12px; background:var(--panel-faint);border:none; border-top:1px solid var(--panel-bd);border-bottom:1px solid var(--panel-bd); font-size:12px;font-weight:600;color:var(--text-label);cursor:pointer;text-align:center; } .stop-list{overflow-y:auto;flex:1} .stop-item{ display:flex;align-items:flex-start;gap:9px;padding:9px 12px; border-bottom:1px solid var(--panel-faint);cursor:pointer;transition:background .1s; } .stop-item:last-child{border-bottom:none} .stop-item:hover{background:var(--panel-hover)} .stop-item.hl{background:var(--panel-hl)} .snum{ width:24px;height:24px;border-radius:50%;color:#fff;font-size:10px;font-weight:700; display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px; } .sbody{flex:1;min-width:0} .stitle{font-size:12px;font-weight:600;color:var(--text-primary);line-height:1.3;margin-bottom:1px} .ssub{font-size:11px;color:var(--text-secondary);line-height:1.4} .sdist{font-size:10px;font-weight:600;margin-top:2px;color:var(--text-accent)} .stag{font-size:10px;color:#e67e22;font-weight:600} .wp-foot{ padding:9px 12px;border-top:1px solid var(--panel-bd); display:flex;gap:7px;flex-shrink:0; } .wp-foot .btn{flex:1;font-size:11px} .btn{ padding:6px 12px;border:none;border-radius:6px; font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s; } .btn-grey{ background:var(--panel-faint);color:var(--text-label); border:1px solid var(--panel-bd); } .btn-grey:hover{background:var(--panel-hover)} /* ── SPINNER ── */ #wp-spin{ position:absolute;inset:0;background:rgba(255,255,255,.92); z-index:50;border-radius:12px;display:none;flex-direction:column; align-items:center;justify-content:center;gap:8px; } [data-theme="twilight"] #wp-spin{background:rgba(15,22,35,.92)} #wp-spin.on{display:flex} #wp-spin p{font-size:12px;color:var(--text-secondary);font-weight:600} .spin{border-radius:50%;animation:spin .8s linear infinite} .spin-sm{width:26px;height:26px;border:3px solid var(--panel-bd);border-top-color:var(--text-accent)} @keyframes spin{to{transform:rotate(360deg)}} /* ── SHARE MODAL ── */ #share-modal{ display:none;position:absolute;inset:0; background:rgba(0,0,0,.5);z-index:1200;align-items:flex-end;justify-content:center; } #share-modal.on{display:flex} .share-sheet{ background:var(--panel-bg);border-radius:20px 20px 0 0; padding:20px 20px max(20px,env(safe-area-inset-bottom)) 20px; width:100%;max-width:480px; } .share-sheet-handle{width:40px;height:4px;background:var(--panel-bd);border-radius:2px;margin:0 auto 16px} .share-sheet h3{font-size:15px;font-weight:700;color:var(--text-head);margin-bottom:4px} .share-sheet p{font-size:12px;color:var(--text-secondary);margin-bottom:14px} .share-big-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px} .share-big-btn{ display:flex;align-items:center;justify-content:center;gap:8px; padding:13px;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer; } .share-row{display:flex;gap:7px} .share-row input{ flex:1;padding:8px 10px;border:1px solid var(--panel-bd);border-radius:7px; font-size:12px;font-family:monospace;color:var(--text-head); background:var(--panel-faint);outline:none; } #share-stops{ font-size:11px;color:var(--text-secondary);margin-top:10px; padding-top:10px;border-top:1px solid var(--panel-faint); } .share-close{ display:block;width:100%;margin-top:12px;padding:12px; background:var(--panel-faint);border:none;border-radius:10px; font-size:14px;font-weight:600;color:var(--text-label);cursor:pointer; } /* ── MAP OVERLAYS ── */ #pr-banner{ position:absolute;top:10px;left:50%;transform:translateX(-50%); background:rgba(27,58,107,.88);color:#fff;font-size:12px; padding:6px 14px;border-radius:20px;z-index:800;pointer-events:none; } [data-theme="twilight"] #pr-banner{background:rgba(10,15,26,.9);color:var(--hdr-text)} #toast{ position:absolute;bottom:28px;left:50%;transform:translateX(-50%); background:var(--toast-bg);color:#fff;font-size:12px; padding:7px 16px;border-radius:20px;z-index:800;pointer-events:none; opacity:0;transition:opacity .3s;white-space:nowrap; } #toast.on{opacity:1} /* ── LEGEND ── */ #btn-legend{ position:absolute;top:10px;right:10px;z-index:710; background:var(--panel-bg);border:1px solid var(--panel-bd); border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600; color:var(--text-label);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12); } .legend{ position:absolute;top:52px;right:10px;background:var(--panel-bg); border-radius:8px;padding:9px 12px;box-shadow:0 2px 10px rgba(0,0,0,.12); z-index:700;font-size:11px;color:var(--text-label);display:none; } .legend strong{ display:block;margin-bottom:5px;font-size:10px; text-transform:uppercase;letter-spacing:.07em;color:var(--text-head); } .lr{display:flex;align-items:center;gap:7px;margin-bottom:3px} .lr:last-child{margin-bottom:0} .ld{width:12px;height:12px;border-radius:50%;flex-shrink:0} /* ── POPUP ── */ .wk-popup{font-size:13px;line-height:1.5;max-width:260px} .wk-popup img{width:100%;max-height:140px;object-fit:cover;border-radius:5px;display:block;margin-bottom:6px} /* ── CUSTOM LOCATIONS ── */ .dot-c{background:#e11d48} .wp-head.th-red{background:var(--grad-red)} #btn-add-loc:hover{opacity:.88} #btn-add-loc.active{background:var(--red-dark)!important;box-shadow:0 0 0 5px rgba(225,29,72,.3)!important} #btn-del-loc:hover{opacity:.88} #btn-del-loc.active{background:var(--red-darkest)!important;box-shadow:0 0 0 5px rgba(127,29,29,.35)!important} #map.add-mode{cursor:crosshair!important} #map.del-mode{cursor:not-allowed!important} #loc-modal{ display:none;position:absolute;inset:0;background:rgba(0,0,0,.5); z-index:1200;align-items:flex-end;justify-content:center; } #loc-modal.on{display:flex!important} @media(min-width:601px){ #loc-modal{align-items:center;justify-content:center} #loc-modal>div{border-radius:16px;max-width:420px} } /* ── NAV LINK ── */ #btn-leaderboard{ padding:0;width:32px;height:32px;border:none; background:var(--hdr-btn-bg);border-radius:50%; color:var(--hdr-text);font-size:15px;cursor:pointer; flex-shrink:0;display:flex;align-items:center;justify-content:center; text-decoration:none;transition:background .15s; } #btn-leaderboard:hover{background:var(--hdr-btn-hov)} /* ── MOBILE ── */ @media(max-width:600px){ header{padding:env(safe-area-inset-top) 8px 0;height:calc(48px + env(safe-area-inset-top));gap:6px} .mode-btn{padding:3px 6px} #btn-add-loc{right:12px;width:52px;height:52px;font-size:24px} #walk-panel{ width:100%!important;right:0!important;bottom:0;top:auto!important; border-radius:16px 16px 0 0;max-height:80vh; } #walk-panel.open{display:flex} .wp-head{border-radius:16px 16px 0 0;padding:12px 40px 10px 12px} .wp-foot{padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))} .wp-foot .btn{padding:10px 8px;font-size:12px} .stop-item{padding:10px 12px} #toast{bottom:16px;font-size:11px} #pr-banner{font-size:11px} #btn-legend{bottom:auto;top:10px;right:10px;left:auto} .legend{bottom:auto;top:52px;right:10px;left:auto} } @media(min-width:601px){ #walk-panel{width:310px;right:12px;top:12px;border-radius:12px;max-height:calc(100% - 24px)} #share-modal{align-items:center;justify-content:center} .share-sheet{border-radius:16px;max-width:420px;padding:24px} .share-sheet-handle{display:none} } /* ── SITE NAV ── */ .site-nav { display: flex; align-items: center; flex-shrink: 0; gap: 0; height: 48px; } /* ── Hamburger menu button ───────────────────────────────── */ .ph-menu-wrap { position: relative; flex-shrink: 0; margin-right: 4px; } .ph-menu-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--hdr-btn-bg); border: 1.5px solid rgba(255,255,255,.2); border-radius: 8px; color: #fff; cursor: pointer; font-size: 18px; transition: background .15s; flex-shrink: 0; } .ph-menu-btn:hover { background: var(--hdr-btn-hov); } /* Dropdown panel */ .ph-menu-dropdown { display: none; position: fixed; top: 52px; left: 8px; background: var(--hdr-bg); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.35); z-index: 1200; min-width: 180px; overflow: hidden; padding: 6px 0; } .ph-menu-dropdown.open { display: block; } .ph-menu-item { display: flex; align-items: center; padding: 12px 18px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.8); text-decoration: none; gap: 10px; transition: background .12s, color .12s; white-space: nowrap; } .ph-menu-item:hover { background: rgba(255,255,255,.1); color: #fff; } .ph-menu-item.active { color: #fff; background: rgba(255,255,255,.12); border-left: 3px solid var(--hdr-accent); padding-left: 15px; } /* Sign in link in nav */ .nav-link.nav-signin { display: flex; align-items: center; height: 36px; padding: 0 14px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85); text-decoration: none; background: var(--hdr-btn-bg); border: 1.5px solid rgba(255,255,255,.2); border-radius: 8px; transition: background .15s; white-space: nowrap; margin-right: 4px; } .nav-link.nav-signin:hover { background: var(--hdr-btn-hov); color: #fff; } /* ── LEADERBOARD PAGE SHARED STYLES ── */ .lb-page{ min-height:100vh;background:var(--bg); font-family:'Segoe UI',system-ui,sans-serif; display:flex;flex-direction:column; transition:background .3s; } .lb-header{ background:var(--hdr-bg);color:var(--hdr-text); padding:0;height:48px;display:flex;align-items:stretch; box-shadow:0 2px 10px rgba(0,0,0,.28);flex-shrink:0;overflow:hidden; } /* .lb-header a removed — nav links must not get width:32px */ .lb-body{flex:1;padding:20px 16px;max-width:900px;margin:0 auto;width:100%} .lb-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:640px){.lb-grid{grid-template-columns:1fr}} .lb-card{ background:var(--panel-bg);border-radius:12px; box-shadow:var(--panel-shadow);overflow:hidden; transition:background .3s; } .lb-card-head{ padding:14px 16px 12px;border-bottom:1px solid var(--panel-bd); display:flex;align-items:center;gap:10px; } .lb-card-icon{font-size:22px} .lb-card-title{font-size:14px;font-weight:700;color:var(--text-head)} .lb-card-sub{font-size:11px;color:var(--text-secondary);margin-top:1px} .lb-row{ display:flex;align-items:center;gap:10px; padding:10px 16px;border-bottom:1px solid var(--panel-faint); transition:background .1s; } .lb-row:last-child{border-bottom:none} .lb-row:hover{background:var(--panel-hover)} .lb-rank{ width:28px;height:28px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:800;flex-shrink:0; } .lb-rank-1{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff} .lb-rank-2{background:linear-gradient(135deg,#94a3b8,#cbd5e1);color:#fff} .lb-rank-3{background:linear-gradient(135deg,#b45309,#d97706);color:#fff} .lb-rank-n{background:var(--panel-faint);color:var(--text-secondary)} .lb-info{flex:1;min-width:0} .lb-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lb-detail{font-size:11px;color:var(--text-secondary);margin-top:1px} .lb-bar-wrap{width:90px;flex-shrink:0} .lb-bar-bg{height:6px;background:var(--panel-faint);border-radius:3px;overflow:hidden} .lb-bar-fill{height:100%;border-radius:3px;transition:width .6s ease} .lb-score{font-size:13px;font-weight:700;color:var(--text-accent);width:36px;text-align:right;flex-shrink:0} .lb-badge{ font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px; background:rgba(30,143,212,.15);color:var(--text-accent);flex-shrink:0; } /* ═══════════════════════════════════════════════════════ ORIENTATION-AWARE STYLES Phones in landscape: header shrinks, panels adjust Phones in portrait: full-height map, bottom sheet walks ═══════════════════════════════════════════════════════ */ /* Portrait phone — optimise vertical space */ @media (max-width: 600px) and (orientation: portrait) { header { height: calc(44px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); } .site-nav .site-name { font-size: 14px; padding-right: 10px; } /* nav links are now in dropdown — no horizontal size override needed */ /* .sw width override removed — search bar is now a full-width floating card */ .mode-btn span:last-child { display: none; } /* hide label text, keep dot */ #walk-panel { width: 100% !important; right: 0 !important; bottom: 0; top: auto !important; border-radius: 16px 16px 0 0; max-height: 55vh; } #btn-add-loc { width: 50px; height: 50px; } #btn-del-loc { width: 50px; height: 50px; } } /* Landscape phone — header must be compact, map needs all vertical space */ @media (max-height: 500px) and (orientation: landscape) { header { height: calc(38px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); } .site-nav { height: 38px; } .site-nav .site-name { font-size: 13px; padding-right: 8px; height: 38px; } .site-nav a.nav-link { height: 38px; padding: 0 10px; font-size: 11px; } .mode-btn { padding: 2px 5px; font-size: 10px; min-height: 26px; } .mode-btn span:last-child { display: none; } /* hide text, keep dot */ /* Walk panel becomes a narrow side panel in landscape */ #walk-panel { width: 260px !important; top: 6px !important; right: 6px !important; bottom: auto; border-radius: 10px !important; max-height: calc(100vh - 50px) !important; } #btn-add-loc { width: 40px; height: 40px; font-size: 18px; } #btn-del-loc { width: 40px; height: 40px; font-size: 16px; } #btn-capture { width: 40px; height: 40px; font-size: 16px; } #toast { bottom: 10px; font-size: 10px; } .wp-head { padding: 8px 36px 8px 10px; } .wp-stat-n { font-size: 14px; } .stop-item { padding: 6px 10px; } .stitle { font-size: 11px; } .ssub { font-size: 10px; } } /* Landscape phone — leaderboard page needs scrollable body */ @media (max-height: 500px) and (orientation: landscape) { .lb-header { height: 38px; } .lb-header .site-nav { height: 38px; } .lb-header .site-nav .site-name { height: 38px; font-size: 13px; } .lb-header .site-nav a.nav-link { height: 38px; font-size: 11px; padding: 0 10px; } .lb-body { padding: 10px 12px 24px; } } /* JS adds .is-landscape / .is-portrait to for JS-driven layout tweaks */ html.is-landscape .landscape-hide { display: none !important; } html.is-portrait .portrait-hide { display: none !important; } /* ── CAPTURE MODE ── */ #btn-capture { position:absolute;top:calc(50% - 84px);right:12px;z-index:800; width:48px;height:48px;border-radius:50%;border:none; background:#0ea5e9;color:#fff;font-size:20px;cursor:pointer; box-shadow:0 3px 12px rgba(14,165,233,.45); display:flex;align-items:center;justify-content:center; transition:background .15s,box-shadow .15s; } #btn-capture:hover{opacity:.88} #btn-capture.active{ background:#0284c7!important; box-shadow:0 0 0 5px rgba(14,165,233,.35)!important; animation:capture-pulse 1.5s infinite; } #btn-capture.gps-searching{ background:#f59e0b!important; box-shadow:0 0 0 5px rgba(245,158,11,.3)!important; } @keyframes capture-pulse{ 0%,100%{box-shadow:0 0 0 5px rgba(14,165,233,.35)} 50%{box-shadow:0 0 0 10px rgba(14,165,233,.1)} } .user-location-dot{ width:16px;height:16px;background:#0ea5e9; border:3px solid #fff;border-radius:50%; box-shadow:0 0 0 3px rgba(14,165,233,.4),0 2px 6px rgba(0,0,0,.3); animation:loc-pulse 2s infinite; } @keyframes loc-pulse{ 0%,100%{box-shadow:0 0 0 3px rgba(14,165,233,.4),0 2px 6px rgba(0,0,0,.3)} 50%{box-shadow:0 0 0 8px rgba(14,165,233,.1),0 2px 6px rgba(0,0,0,.3)} } #toast.toast-success{background:rgba(21,128,61,.95)!important} #toast.toast-fail{background:rgba(185,28,28,.95)!important} #captured-badge{ position:absolute;top:calc(50% - 130px);right:8px;z-index:801; background:#22c55e;color:#fff;font-size:9px;font-weight:800; border-radius:10px;padding:2px 5px;min-width:18px;text-align:center; display:none;box-shadow:0 1px 4px rgba(0,0,0,.3); } @media(max-height:500px) and (orientation:landscape){ #btn-capture{top:calc(50% - 66px);right:10px;width:40px;height:40px;font-size:16px} #captured-badge{top:calc(50% - 110px);right:6px} } /* ── SITE FOOTER ─────────────────────────────────────────────── */ .site-footer { background: var(--hdr-bg); color: rgba(255,255,255,.7); margin-top: auto; flex-shrink: 0; } .sf-inner { max-width: 1100px; margin: 0 auto; padding: 24px 20px 20px; } .sf-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.15); } .sf-links a { color: rgba(255,255,255,.75); text-decoration: none; font-size: 12px; font-weight: 600; transition: color .15s; } .sf-links a:hover { color: #fff; } .sf-copy p { font-size: 12px; margin-bottom: 4px; color: rgba(255,255,255,.6); } .sf-copy p:first-child { font-weight: 700; color: rgba(255,255,255,.85); } .sf-legal { font-size: 11px !important; color: rgba(255,255,255,.45) !important; line-height: 1.6; } /* Pages that scroll need flex column body */ body.page-scroll { height: auto; min-height: 100vh; overflow-y: auto; display: flex; flex-direction: column; } /* Plaque action popup - Leaflet popup override */ .leaflet-popup-content-wrapper { padding: 0 !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.25) !important; min-width: 240px; max-width: 300px; } .leaflet-popup-content { margin: 0 !important; width: auto !important; } .leaflet-popup-tip-container { margin-top: -1px; } .plaque-popup-inner { font-family: 'Segoe UI', system-ui, sans-serif; } .plaque-popup-head { background: var(--grad-blue); color: #fff; padding: 12px 14px 10px; /* Reserve room on the right for the close button so a long plaque name can't run under it. The button is 30px wide + 8px right inset. */ padding-right: 48px; } .plaque-popup-name { font-size: 14px; font-weight: 800; line-height: 1.25; margin-bottom: 6px; /* Long plaque names — wrap rather than overflow. Most names fit on two lines comfortably; very long ones (e.g. "The Royal Society for the Prevention of Cruelty to Animals") wrap to three. */ word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } /* Tags row — sits below the name, holds the optional Category pill. (The Stop pill was replaced by a progress-ring badge — see below.) */ .plaque-popup-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .plaque-popup-category { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; background: rgba(255,255,255,.18); color: #fff; } /* Header — flex-row variant when a stop ring is present. The ring sits to the right of the name+category column; the column shrinks to make room. Right-padding reserves space so the ring doesn't slide under the Leaflet × close button (which is absolutely positioned at the popup's top-right corner). */ .plaque-popup-head--with-ring { display: flex; align-items: center; gap: 12px; padding-right: 44px; } .plaque-popup-head--with-ring .plaque-popup-head-text { flex: 1; min-width: 0; /* allow truncation, prevent overflow */ } .plaque-popup-head--with-ring .plaque-popup-name { /* Long names are truncated server-side at 60 chars but also need to wrap in the column rather than overflow. */ word-wrap: break-word; overflow-wrap: break-word; } /* Stop progress ring — amber arc fills proportional to stopNum/total. 54×54 SVG, ring stroke 4px, white centre stack with STOP / num / of N. Tooltip on the wrapper carries the full "Stop N of M — WalkName". */ .plaque-popup-stopring { flex-shrink: 0; width: 54px; height: 54px; position: relative; cursor: help; /* hint there's a tooltip */ } .plaque-popup-stopring svg { width: 100%; height: 100%; transform: rotate(-90deg); /* arc starts at 12 o'clock */ } .plaque-popup-stopring .ring-bg { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 4; } .plaque-popup-stopring .ring-prog { fill: none; stroke: #f59e0b; /* amber-500 */ stroke-width: 4; stroke-linecap: round; } .plaque-popup-stopring .ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-weight: 800; line-height: 1; } .plaque-popup-stopring .ring-lbl { font-size: 8px; opacity: .8; letter-spacing: .1em; margin-bottom: 1px; } .plaque-popup-stopring .ring-val { font-size: 17px; } .plaque-popup-stopring .ring-total { font-size: 9px; opacity: .65; margin-top: 1px; } .plaque-popup-addr { font-size: 11px; opacity: .8; margin-bottom: 2px; } /* .plaque-popup-inscription is styled inline in index.html — see the "Plaque popup inscription" block there. The popup is light-themed (white body, slate-grey inscription card) since 2026-04-25. */ .plaque-popup-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; } .plaque-popup-btn { padding: 10px 6px; border: none; font-size: 11px; font-weight: 700; cursor: pointer; text-align: center; transition: background .12s; border-top: 1px solid var(--panel-bd); background: var(--panel-bg); color: var(--text-primary); line-height: 1.3; } .plaque-popup-btn:not(:last-child) { border-right: 1px solid var(--panel-bd); } .plaque-popup-btn:hover { background: var(--panel-hover); } .plaque-popup-btn.btn-capture { color: #0ea5e9; } .plaque-popup-btn.btn-capture:disabled { color: #22c55e; cursor: default; } .plaque-popup-btn.btn-walk { color: var(--text-accent); } .plaque-popup-btn.btn-close-p { color: var(--text-secondary); } /* ── FOOTER ──────────────────────────────────────────────── */ .site-footer{background:var(--hdr-bg);color:rgba(255,255,255,.65);flex-shrink:0;border-top:1px solid rgba(255,255,255,.08)} .sf-inner{max-width:1100px;margin:0 auto;padding:14px 20px calc(12px + env(safe-area-inset-bottom, 0px));display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px} .sf-links{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;padding:0;margin:0} .sf-links a{color:rgba(255,255,255,.6);text-decoration:none;font-size:11px;font-weight:500;transition:color .15s;white-space:nowrap} .sf-links a:hover{color:#fff} .sf-copy{font-size:11px;color:rgba(255,255,255,.45);margin:0;flex:1;min-width:200px} @media(max-width:600px){.sf-inner{padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px))}.sf-copy{width:100%}} /* ── NAV USER DROPDOWN ───────────────────────────────────────── */ .nav-user { margin-left: auto; } .nav-user-wrap { position: relative; } .nav-user-btn-inner { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 6px; transition: background .15s; white-space: nowrap; } .nav-user-btn-inner:hover { background: var(--hdr-btn-bg); color: #fff; } .nav-user-dropdown { display: none; position: fixed; /* escape overflow:hidden on header */ background: var(--panel-bg); border: 1px solid var(--panel-bd); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.25); min-width: 175px; padding: 4px 0; z-index: 9999; /* above everything */ } .nav-user-dropdown.open { display: block; } .nav-dd-item { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text-primary); text-decoration: none; background: none; border: none; width: 100%; text-align: left; cursor: pointer; transition: background .12s; white-space: nowrap; } .nav-dd-item:hover { background: var(--panel-hover); } .nav-dd-signout { color: var(--red, #e11d48); } #btn-locate { position: absolute; bottom: 76px; left: 10px; z-index: 800; width: 40px; height: 40px; background: rgba(255,255,255,0.92); border: none; border-radius: 8px; box-shadow: 0 1px 5px rgba(0,0,0,.3); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #333; padding: 0; transition: background .15s, transform .2s, color .15s; } #btn-locate:hover { background: #fff; color: #1a6ea8; } #btn-locate.locating { color: #1a6ea8; animation: scope-pulse 1s ease-in-out infinite; } #btn-locate.located { color: #16a34a; } /* While live-tracking, button stays accent blue + shows a subtle green pulsing dot in the corner to indicate GPS is actively updating. */ #btn-locate.tracking { color: #1a6ea8; position: absolute; } #btn-locate.tracking::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 2px #fff; animation: tracking-pulse 1.5s ease-in-out infinite; } @keyframes tracking-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } @keyframes scope-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: .7; } } /* ── LAYERS FAB ───────────────────────────────────────────────────── "Show my walks" toggle, promoted out of the actions menu (2026-04-25). Lives at top-right of the map — top edge aligns horizontally with the Leaflet zoom +/- buttons on the left, mirroring their visual treatment. Active state uses the same amber-tinted pattern as the actions-menu pills so toggle-on feels consistent. */ #btn-layers { position: absolute; top: 10px; /* horizontally aligned with Leaflet zoom +/- buttons */ right: 10px; z-index: 800; width: 40px; height: 40px; background: rgba(255,255,255,0.92); border: none; border-radius: 8px; box-shadow: 0 1px 5px rgba(0,0,0,.3); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #333; padding: 0; transition: background .15s, color .15s, box-shadow .15s; } #btn-layers:hover { background: #fff; color: #1a6ea8; } #btn-layers.is-active { background: #fffbeb; /* amber-50 — matches actions-menu active state */ color: #92400e; /* amber-800 */ box-shadow: 0 1px 5px rgba(245,158,11,.35), 0 0 0 1px rgba(245,158,11,.18); } /* Mode badges — TWO stacked pseudo-elements at the bottom-right corner. ::before is the blue "P" (Plaques) on top. ::after is the yellow "W" (Walks) underneath. .mode-plaques shows only P, .mode-walks shows only W, .mode-both shows both stacked. Vertical offsets are absolute so each letter sits at a fixed slot regardless of which is visible. */ #btn-layers::before, #btn-layers::after { position: absolute; right: -3px; width: 14px; height: 14px; border-radius: 7px; font-size: 9px; font-weight: 800; line-height: 14px; text-align: center; letter-spacing: 0; box-shadow: 0 0 0 1.5px #fff; display: none; /* shown per mode below */ } #btn-layers::before { /* Upper slot — blue "P" for the Plaques layer. */ content: 'P'; bottom: 13px; background: #1d4ed8; /* royal-blue, matches the brand */ color: #fff; } #btn-layers::after { /* Lower slot — yellow "W" for the Walks layer. */ content: 'W'; bottom: -3px; background: #facc15; /* amber-400 */ color: #78350f; /* amber-900 — readable on yellow */ } /* Visibility per mode. */ #btn-layers.mode-plaques::before { display: block; } #btn-layers.mode-walks::after { display: block; } #btn-layers.mode-both::before { display: block; } #btn-layers.mode-both::after { display: block; } /* Suppress the layers FAB while route-building. Same reasoning as .actions-menu — top-right competes with the route-builder hint and "Cancel" pill that appear during route mode. */ body.route-building #btn-layers { display: none !important; } /* Hide footer on touch / mobile devices — evaluated at paint, never races */ @media (hover: none), (pointer: coarse), (max-width: 768px) { .site-footer { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ PLAKKA UI POLISH — mobile-first improvements ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Background — subtle gradient instead of flat grey ─────────────────── */ body { background: linear-gradient(160deg, #e8eef7 0%, #eef2f7 50%, #e4ecf5 100%) !important; background-attachment: fixed !important; } /* ── 2. Page-level wrapper max-width — full-width on mobile ────────────────── */ .friends-wrap, .auth-wrap { padding-left: 12px !important; padding-right: 12px !important; } @media (min-width: 600px) { .friends-wrap, .auth-wrap { padding-left: 20px !important; padding-right: 20px !important; } } /* ── 3. Cards — warmer shadow, slight lift on hover ────────────────────────── */ .fr-card { box-shadow: 0 2px 12px rgba(27,58,107,.08), 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .2s ease, transform .15s ease; border: 1px solid rgba(27,58,107,.08) !important; } .fr-card:hover { box-shadow: 0 6px 24px rgba(27,58,107,.13), 0 2px 6px rgba(0,0,0,.08); transform: translateY(-1px); } /* ── 4. Friend card avatar — gradient instead of flat blue ─────────────────── */ .fr-avatar { background: var(--grad-blue) !important; box-shadow: 0 2px 8px rgba(27,58,107,.25); } /* ── 5. Friend card — coloured left border based on context ────────────────── */ .fr-card:has(.fr-btn-accept) { border-left: 3px solid #f59e0b !important; } .fr-card:has(.fr-btn-remove) { border-left: 3px solid var(--text-accent) !important; } .fr-card:has(.fr-btn-add) { border-left: 3px solid #16a34a !important; } /* ── 6. Tabs — larger touch targets, better active indicator ───────────────── */ .fr-tab, .auth-tab, .ch-tab-btn { min-height: 44px !important; font-size: 14px !important; letter-spacing: .01em; transition: color .15s, border-bottom-color .15s; } @media (max-width: 400px) { .fr-tab { font-size: 12px !important; padding: 11px 4px !important; } .ch-tab-btn { font-size: 12px !important; } } /* ── 7. Challenges profile card — subtle gradient header ───────────────────── */ .ch-profile-card { background: linear-gradient(135deg, #fff 60%, #f0f6ff 100%) !important; box-shadow: 0 2px 16px rgba(27,58,107,.1) !important; border: 1px solid rgba(27,58,107,.08) !important; } .ch-profile-avatar { background: var(--grad-blue) !important; box-shadow: 0 3px 10px rgba(27,58,107,.3) !important; } /* ── 8. Challenge cards — warmer, lift on tap ──────────────────────────────── */ .ch-card { box-shadow: 0 2px 12px rgba(27,58,107,.08) !important; border: 1px solid rgba(27,58,107,.06) !important; transition: box-shadow .2s ease; } /* ── 9. Alphabet / plakkaology grid cells — smoother transitions ───────────── */ .alph-cell, .plak-cell { transition: background .2s ease, transform .1s ease, box-shadow .2s ease !important; } .alph-cell.done:active, .plak-cell.filled:active { transform: scale(.94); } /* ── 10. Progress bars — rounded ends, subtle animation ────────────────────── */ .ch-bar-fill { border-radius: 4px !important; transition: width .6s cubic-bezier(.4,0,.2,1) !important; } .ch-bar-bg { border-radius: 4px !important; } /* ── 11. Buttons — larger touch targets, smoother press ────────────────────── */ .fr-btn, .league-btn, .auth-btn, .fr-search-btn { min-height: 40px !important; transition: opacity .15s ease, transform .1s ease, background .15s ease !important; } .fr-btn:active, .league-btn:active, .auth-btn:active { transform: scale(.96) !important; opacity: .85 !important; } /* ── 12. Input fields — slightly larger on mobile ──────────────────────────── */ .field input, .fr-search-input, .league-input, .wd-rename-input { min-height: 44px !important; font-size: 16px !important; /* prevents iOS zoom on focus */ } /* ── 13. Login page — warmer header gradient ───────────────────────────────── */ .auth-header { background: var(--grad-blue) !important; padding: 32px 28px 24px !important; } .auth-header h1 { font-size: 28px !important; letter-spacing: -.03em; } .auth-card { box-shadow: 0 8px 40px rgba(27,58,107,.18) !important; border-radius: 20px !important; overflow: hidden; } /* ── 14. Micro-animations — modals slide up smoothly ───────────────────────── */ @keyframes plakka-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes plakka-fade-in { from { opacity: 0; } to { opacity: 1; } } .ch-card, .fr-card, .auth-card { animation: plakka-fade-in .25s ease both; } /* ── 15. Section labels — slightly more prominent ──────────────────────────── */ .fr-section-label, .league-section-label { font-size: 11px !important; font-weight: 800 !important; letter-spacing: .1em !important; color: var(--text-accent) !important; text-transform: uppercase !important; margin-bottom: 10px !important; padding-bottom: 6px !important; border-bottom: 1.5px solid var(--panel-bd) !important; } /* ── 16. Empty states — more visual ────────────────────────────────────────── */ .fr-empty, .league-empty { background: var(--panel-faint) !important; border-radius: 12px !important; padding: 32px 20px !important; margin: 8px 0 !important; border: 1.5px dashed var(--panel-bd) !important; color: var(--text-secondary) !important; } /* ── 17. League list items — touch-friendly ────────────────────────────────── */ .league-list-item { min-height: 56px !important; transition: background .15s ease !important; border-radius: 10px !important; } .league-list-item:active { background: var(--panel-hover) !important; } /* ── 18. Header nav — ensure consistent height ─────────────────────────────── */ .site-nav, header { min-height: 44px; } /* ── 19. Map page capture toggle button — pill style ───────────────────────── */ /* ── 20. Toast notifications — more polished ───────────────────────────────── */ #toast { border-radius: 12px !important; font-weight: 600 !important; letter-spacing: .01em !important; box-shadow: 0 4px 20px rgba(0,0,0,.25) !important; } /* Animate only when the toast is shown (class .on is added by toast() JS). Avoid animation-fill-mode: both here — it made the final opacity stick so the toast would never fade out again. Default fill-mode = none, so after the animation ends the opacity reverts to the base 0 (hidden). */ #toast.on { animation: plakka-slide-up .25s ease; } /* ── 21. Map popup — more polished ─────────────────────────────────────────── */ .plaque-action-popup .leaflet-popup-content-wrapper { border-radius: 16px !important; box-shadow: 0 8px 32px rgba(0,0,0,.18) !important; } .plaque-popup-btn { min-height: 36px !important; border-radius: 8px !important; font-size: 12px !important; transition: all .15s ease !important; } .plaque-popup-btn:active { transform: scale(.95) !important; } /* ── 22. Scrollbars — slim and branded on webkit (mobile chrome) ───────────── */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(27,58,107,.2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(27,58,107,.35); } /* ── 23. Leaderboard table — better mobile spacing ─────────────────────────── */ @media (max-width: 480px) { .lb-table th, .lb-table td { padding: 10px 8px !important; font-size: 12px !important; } } /* ── 24. About page hero — more immersive ──────────────────────────────────── */ .about-hero { background: var(--grad-blue) !important; border-radius: 0 0 24px 24px !important; box-shadow: 0 4px 24px rgba(27,58,107,.2) !important; } /* ── 25. Mini challenge cards in Themed Challenges ─────────────────────────── */ .mini-challenge { border-radius: 12px !important; border: 1px solid rgba(27,58,107,.08) !important; box-shadow: 0 1px 6px rgba(27,58,107,.06) !important; transition: box-shadow .2s ease !important; overflow: hidden; } .mini-head { min-height: 48px !important; } /* Legacy alias — pdm-slide-up used in index.html inline modals */ @keyframes pdm-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════════════ LEAGUES + WALKS — shared styles for leagues.html, walks.html (previously inline in challenges.html) ═══════════════════════════════════════════════════════════════════════════ */ .league-pending-row, .league-member-row { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:8px; margin-bottom:4px; background:var(--panel-faint); } .league-pending-row { border-left:3px solid #f59e0b; } .league-member-row { border-left:3px solid #16a34a; } .league-row-name { font-size:13px; font-weight:600; color:var(--text-primary); } .league-row-meta { font-size:11px; color:var(--text-secondary); margin-top:1px; } .league-row-btns { display:flex; gap:6px; flex-shrink:0; } .league-share-row { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; } .league-code-display { font-family:monospace; font-size:15px; font-weight:800; letter-spacing:3px; color:var(--text-accent); background:var(--panel-faint); padding:4px 10px; border-radius:6px; } .lli-row { display:flex;align-items:center;justify-content:space-between; } .lli-name { font-size:15px;font-weight:700;color:var(--text-head); } .lli-meta { font-size:12px;color:var(--text-secondary);margin-top:3px; } .lli-arrow { font-size:20px;color:var(--text-secondary);flex-shrink:0; } /* ── League detail view ─────────────────────────────────────── */ .ld-header { display:flex;align-items:center;gap:10px;margin-bottom:12px; } .ld-back-btn { background:none;border:none;color:var(--text-accent);font-size:16px; font-weight:700;cursor:pointer;padding:4px 0;flex-shrink:0; } .ld-title { flex:1;font-size:17px;font-weight:800;color:var(--text-head); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .ld-admin-section { padding-top:14px;border-top:1px solid var(--panel-faint); } .ld-back-btn { background:none;border:none;color:var(--text-accent);font-size:16px; font-weight:700;cursor:pointer;padding:4px 0;flex-shrink:0; } .ld-title { flex:1;font-size:17px;font-weight:800;color:var(--text-head); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .ld-admin-section { padding-top:14px;border-top:1px solid var(--panel-faint); } /* ── Additional leagues/walks styles ─────────────────────── */ /* ── League admin panel ─────────────────────────────────────── */ .league-admin-section { margin-top:14px; } .league-admin-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-secondary); margin-bottom:8px; } .league-pending-row, .league-member-row { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:8px; margin-bottom:4px; background:var(--panel-faint); } .league-pending-row { border-left:3px solid #f59e0b; } .league-member-row { border-left:3px solid #16a34a; } .league-row-name { font-size:13px; font-weight:600; color:var(--text-primary); } .league-row-meta { font-size:11px; color:var(--text-secondary); margin-top:1px; } .league-row-btns { display:flex; gap:6px; flex-shrink:0; } .btn-approve { background:#16a34a; color:#fff; border:none; border-radius:6px; padding:4px 10px; font-size:12px; font-weight:700; cursor:pointer; } .btn-reject { background:transparent; border:1px solid #e11d48; color:#e11d48; border-radius:6px; padding:4px 10px; font-size:12px; font-weight:700; cursor:pointer; } .btn-approve:hover { opacity:.85; } .btn-reject:hover { background:#e11d48; color:#fff; } /* Pending request banner (user's own pending request) */ .league-pending-badge { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; background:#f59e0b22; color:#b45309; border:1px solid #f59e0b; border-radius:6px; padding:2px 7px; margin-left:6px; vertical-align:middle; } /* Share button */ .btn-whatsapp { background:#25D366; color:#fff; border:none; border-radius:7px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:5px; } .btn-whatsapp:hover { opacity:.85; } .league-share-row { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; } .league-code-display { font-family:monospace; font-size:15px; font-weight:800; letter-spacing:3px; color:var(--text-accent); background:var(--panel-faint); padding:4px 10px; border-radius:6px; } /* ── League list view ───────────────────────────────────────── */ .league-section-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; color:var(--text-secondary);margin:12px 0 6px; } .league-list-item { background:var(--panel-bg);border:1px solid var(--panel-bd);border-radius:10px; padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .15s; } .league-list-item:hover { border-color:var(--text-accent); } .league-list-item.pending { cursor:default;opacity:.7; } .league-list-item.pending:hover { border-color:var(--panel-bd); } .lli-row { display:flex;align-items:center;justify-content:space-between; } .lli-name { font-size:15px;font-weight:700;color:var(--text-head); } .lli-meta { font-size:12px;color:var(--text-secondary);margin-top:3px; } .lli-arrow { font-size:20px;color:var(--text-secondary);flex-shrink:0; } .lli-admin-badge { font-size:9px;font-weight:800;background:#f59e0b22;color:#b45309; border:1px solid #f59e0b;border-radius:4px;padding:1px 5px;vertical-align:middle;margin-left:5px; } .lli-pending-badge { font-size:9px;font-weight:800;background:#e11d4822;color:#e11d48; border:1px solid #e11d48;border-radius:4px;padding:1px 5px;vertical-align:middle;margin-left:5px; } /* ── League detail view ─────────────────────────────────────── */ .ld-header { display:flex;align-items:center;gap:10px;margin-bottom:12px; } .ld-back-btn { background:none;border:none;color:var(--text-accent);font-size:16px; font-weight:700;cursor:pointer;padding:4px 0;flex-shrink:0; } .ld-title { flex:1;font-size:17px;font-weight:800;color:var(--text-head); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .ld-leave-btn { background:none;border:1px solid var(--panel-bd);color:var(--text-secondary); border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;flex-shrink:0; } .ld-leave-btn:hover { border-color:#e11d48;color:#e11d48; } .ld-tabs { display:flex;gap:4px;margin-bottom:14px;border-bottom:2px solid var(--panel-bd); } .ld-tab-btn { padding:8px 16px;font-size:13px;font-weight:700;border:none;background:none; cursor:pointer;color:var(--text-secondary);border-bottom:3px solid transparent; margin-bottom:-2px;transition:color .15s; } .ld-tab-btn.active { color:var(--text-accent);border-bottom-color:var(--text-accent); } .ld-tab-btn:hover { color:var(--text-primary); } .ld-admin-section { padding-top:14px;border-top:1px solid var(--panel-faint); } /* ── League/Walks classes that were only in JS-generated HTML (never styled) ── */ .league-loading { text-align:center; padding:32px 20px; color:var(--text-secondary); font-size:14px; } .league-actions { display:flex; gap:8px; margin-bottom:14px; } .league-action-btn { flex:1; padding:10px 12px; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; transition:opacity .15s, transform .1s; } .league-action-btn:active { transform:scale(.96); opacity:.85; } .league-create-btn { background:var(--grad-blue); color:#fff; } .league-join-btn { background:var(--panel-faint); color:var(--text-label); border:1.5px solid var(--panel-bd); } .league-form-card { background:var(--panel-faint); border-radius:12px; padding:16px; margin-bottom:12px; border:1px solid var(--panel-bd); animation:plakka-fade-in .2s ease; } .league-form-title { font-size:15px; font-weight:800; color:var(--text-head); margin-bottom:12px; } .league-form-error { color:var(--red); font-size:13px; margin-top:6px; display:none; } .league-form-btns { display:flex; gap:8px; margin-top:12px; } .league-standings { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; } .league-standings th { text-align:left; padding:8px 10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); border-bottom:2px solid var(--panel-bd); } .league-standings td { padding:10px 10px; border-bottom:1px solid var(--panel-faint); color:var(--text-primary); } .league-standings tr:last-child td { border-bottom:none; } .league-my-rank { background:var(--panel-hl) !important; font-weight:700; } .league-my-rank td { color:var(--text-accent) !important; } .league-btn-ghost { background:none !important; border:1.5px solid var(--panel-bd) !important; color:var(--text-secondary) !important; } .league-join-btn-sm { padding:5px 12px; font-size:12px; font-weight:700; background:var(--grad-blue); color:#fff; border:none; border-radius:6px; cursor:pointer; } .league-search-row { display:flex; gap:8px; margin-bottom:12px; } .league-search-input { flex:1; } .league-search-result { padding:10px 12px; border-radius:8px; background:var(--panel-faint); border:1px solid var(--panel-bd); margin-bottom:6px; display:flex; align-items:center; justify-content:space-between; } .league-search-name { font-size:14px; font-weight:700; color:var(--text-head); } .league-search-meta { font-size:12px; color:var(--text-secondary); margin-top:2px; } .league-code-display { background:var(--panel-faint); border:1.5px solid var(--panel-bd); border-radius:8px; padding:10px 14px; font-size:18px; font-weight:900; letter-spacing:.15em; color:var(--text-head); text-align:center; margin:8px 0; } .league-share-row { display:flex; gap:8px; margin-top:8px; } /* ═══════════════════════════════════════════════════════════════ PASS 2A — Map page form & button components Walk panel footer buttons, share actions, bottom-sheet form ═══════════════════════════════════════════════════════════════ */ /* ── Button colour modifiers for action buttons ── Use alongside .btn or .share-big-btn (component), e.g.: