/* === Loclways design system === */ :root { --cream: #f4f0e5; --cream-deep: #ece7d8; --paper: #faf8f1; --ink: #1c2b20; --ink-soft: #4a5a4e; --ink-faint: #8a948a; --green: #13301d; --green-hover: #1d4a2a; --gold: #b98a2f; --line: rgba(28, 43, 32, 0.14); --shadow-card: 0 10px 40px rgba(28, 43, 32, 0.14); --shadow-soft: 0 4px 18px rgba(28, 43, 32, 0.10); --radius-card: 22px; --radius-input: 14px; /* Collapsed "Coming up" sheet: header band + a preview of the next story. */ --sheet-peek: 148px; --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Seek slider empty track (the fill itself is --cream). */ --seek-track: rgba(244, 240, 229, 0.3); /* Select fields: white in light, surface in dark. */ --field-bg: #fff; /* Floating map controls (locate button, zoom, attribution). */ --map-control-bg: #fff; --map-control-bg-hover: #f4f4f4; --map-control-fg: #333; --map-control-fg-active: var(--green); --map-control-fg-manual: #b98a2f; --map-control-border: rgba(0, 0, 0, 0.2); } /* === Dark theme === The toggle (home page only) sets this on and persists it to localStorage; every page (map included) applies it on load. */ html[data-theme="dark"] { color-scheme: dark; --cream: #161a16; --cream-deep: #222822; --paper: #2a312a; --ink: #ece9df; --ink-soft: #b6bcae; --ink-faint: #838b7c; --green: #4f8f5f; --green-hover: #5fa372; --gold: #d8a951; --seek-track: rgba(255, 255, 255, 0.28); --line: rgba(236, 233, 223, 0.16); --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.5); --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.4); --field-bg: #343c34; --map-control-bg: #262d26; --map-control-bg-hover: #313931; --map-control-fg: #d6d2c5; --map-control-border: rgba(255, 255, 255, 0.25); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-ui); background: var(--cream); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [hidden] { display: none !important; } /* === Brand === */ .brand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px 12px; text-decoration: none; /* the brand is a link back to the home page */ } .brand svg { width: 42px; height: 30px; } .brand-logo { width: 60px; height: auto; display: block; } .brand-name { font-family: var(--font-ui); font-weight: 500; font-size: 15px; letter-spacing: 0.42em; text-indent: 0.42em; /* recenters letterspaced text */ color: var(--ink); } /* === Typography === */ .display { font-family: var(--font-display); font-weight: 500; font-size: 42px; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } .lead { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); } /* === Buttons === */ .btn { font-family: var(--font-ui); font-size: 15px; font-weight: 600; border: none; border-radius: 999px; padding: 16px 26px; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-green { background: var(--green); color: var(--cream); } .btn-green:hover:not(:disabled) { background: var(--green-hover); } .btn-ghost { background: transparent; color: var(--ink-soft); padding: 12px 20px; } .btn-block { width: 100%; } .icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 17px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; flex: none; } .icon-btn:hover { background: var(--cream-deep); } /* === Form fields === */ .field { margin-bottom: 18px; } .field .eyebrow { display: block; margin-bottom: 8px; } .select-wrap { position: relative; } .select-wrap::after { content: ''; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 1.6px solid var(--ink-soft); border-bottom: 1.6px solid var(--ink-soft); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .select-wrap select { width: 100%; appearance: none; -webkit-appearance: none; background: var(--field-bg); border: 1px solid var(--line); border-radius: var(--radius-input); padding: 15px 44px 15px 16px; font-family: var(--font-ui); font-size: 15px; color: var(--ink); cursor: pointer; } .select-wrap select:disabled { opacity: 0.5; cursor: not-allowed; } .select-wrap select:focus { outline: 2px solid var(--green); outline-offset: 1px; } textarea.input { width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-input); padding: 14px 16px; font-family: var(--font-ui); font-size: 15px; color: var(--ink); resize: vertical; min-height: 110px; } textarea.input:focus { outline: 2px solid var(--green); outline-offset: 1px; } /* === Home page === */ .home { min-height: 100vh; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; position: relative; } /* Theme toggle: home page only. Flows over the top-right of the hero card; it saves to localStorage and the map page (and every page) applies the saved theme on load. Shows the icon of the mode it will switch to. */ .theme-toggle { position: absolute; top: 14px; right: 14px; z-index: 10; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 82%, transparent); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .theme-toggle:hover { background: color-mix(in srgb, var(--paper) 92%, transparent); } .theme-toggle:active { transform: scale(0.96); } .theme-toggle svg { width: 19px; height: 19px; display: block; } /* Show the icon of the mode we'll switch TO: moon in light, sun in dark. */ .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* Full-bleed hero photo; the card below overlaps its bottom edge. */ .hero { margin: 6px 0 0; } .hero img { display: block; width: 100%; height: clamp(230px, 42vh, 430px); object-fit: cover; object-position: center 62%; } .home-body { background: var(--paper); border-radius: 32px 32px 0 0; margin: -28px 0 0; position: relative; padding: 34px 26px 26px; flex: 1; display: flex; flex-direction: column; box-shadow: 0 -8px 30px rgba(28, 43, 32, 0.08); } .home-body .display { margin-bottom: 12px; } .home-body .lead { margin-bottom: 24px; } .home-body .btn-block { margin-top: auto; } /* === Map page: journey view === */ .journey { position: fixed; inset: 0; } #map { position: absolute; inset: 0; z-index: 1; } /* Re-center control: custom Leaflet control, styled to match the stock zoom buttons. States: green when a GPS fix is live, amber in manual tap-to-simulate mode, pulsing while a fix is pending or while the 3-second mode-toggle hold is in progress. */ .locate-btn { width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--map-control-bg); border: 2px solid var(--map-control-border); border-radius: 4px; background-clip: padding-box; cursor: pointer; color: var(--map-control-fg); } .locate-btn:hover { background: var(--map-control-bg-hover); } .locate-btn.active { color: var(--map-control-fg-active); } .locate-btn.manual { color: var(--map-control-fg-manual); } .locate-btn.loading svg, .locate-btn.holding svg { animation: locate-pulse 1.1s ease-in-out infinite; } @keyframes locate-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .journey-top { position: absolute; top: 0; left: 0; right: 0; z-index: 500; display: flex; align-items: center; gap: 12px; padding: 14px; pointer-events: none; } .journey-top > * { pointer-events: auto; } .coming-up { position: absolute; left: 0; right: 0; bottom: 0; z-index: 500; background: var(--paper); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(28, 43, 32, 0.18); padding: 0 18px calc(14px + env(safe-area-inset-bottom, 0px)); max-height: 42vh; display: flex; flex-direction: column; /* Collapsed to a peek strip by default; swiping the header expands it. The peek shows the green header plus the top of the next story. */ min-height: var(--sheet-peek); transform: translateY(calc(100% - var(--sheet-peek))); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); } .coming-up.dragging { transition: none; } /* Green band so the sheet stands out against the map even when collapsed. Negative margins bleed it to the sheet's edges, keeping the rounded top. */ .coming-up-header { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; margin: 0 -18px; padding: 10px 18px 12px; background: var(--green); border-radius: 24px 24px 0 0; } .coming-up-header .eyebrow { color: var(--cream); margin: 2px 4px 0; } .sheet-grip { display: block; width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 999px; background: rgba(244, 240, 229, 0.55); } .coming-up-list { overflow-y: auto; display: flex; flex-direction: column; padding-top: 10px; } .poi-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); } .poi-row:last-child { border-bottom: none; } .poi-thumb { width: 58px; height: 58px; border-radius: 12px; background: linear-gradient(160deg, #35583b 0%, #6f8f62 55%, #c9c2a4 100%); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; overflow: hidden; } .poi-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .poi-meta { flex: 1; min-width: 0; } .poi-meta .name { font-size: 14.5px; font-weight: 600; } .poi-meta .desc { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .poi-meta .dist { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; } .poi-play { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--green); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; } .poi-play.playing { background: var(--green); color: var(--cream); border-color: var(--green); } .poi-list-empty { font-size: 13.5px; color: var(--ink-faint); padding: 18px 4px; } /* Player pill: horizontal now-playing bar spanning the sheet's width; anchored just above the coming-up header as a child of the sheet, so it rides along with drags/expands. Two rows: transport controls (buttons flush right after the track text) over a Spotify-style seek slider. */ .player-pill { position: absolute; left: 14px; right: 14px; bottom: calc(100% + 10px); background: var(--green); color: var(--cream); border-radius: 22px; box-shadow: var(--shadow-card); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 6px; } .player-row { display: flex; align-items: center; gap: 12px; } .player-pill .track { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-pill .plabel { display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; } .player-pill .icon-btn { background: rgba(244, 240, 229, 0.12); border-color: transparent; color: var(--cream); width: 38px; height: 38px; } .player-pill .icon-btn:hover { background: rgba(244, 240, 229, 0.22); } /* Seek row: elapsed / slider / duration. The slider's fill is painted via a JS-updated background gradient (setSeekFill) so progress shows in the cream brand color on every browser without webkit-only track tricks. */ .player-seek { display: flex; align-items: center; gap: 10px; } .player-seek .seek-time { font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.75; min-width: 32px; text-align: center; flex: none; } .player-seek input[type="range"] { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; height: 4px; border-radius: 999px; background: rgba(244, 240, 229, 0.3); outline: none; cursor: pointer; margin: 0; } .player-seek input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; border: none; background: var(--cream); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .player-seek input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: none; background: var(--cream); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } /* Stop detail: full-screen view over the map */ .stop-screen { position: absolute; inset: 0; z-index: 800; background: var(--paper); display: flex; flex-direction: column; animation: stop-in 0.25s ease; } @keyframes stop-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .stop-hero { position: relative; flex: none; } .stop-hero img { display: block; width: 100%; height: clamp(240px, 42vh, 420px); object-fit: cover; object-position: center 62%; } .stop-hero-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 14px; } .stop-body { flex: 1; min-height: 0; width: 100%; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; padding: 20px 24px calc(22px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; } .stop-body .eyebrow { margin-bottom: 8px; } .stop-body h3 { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-bottom: 4px; } .stop-body .stop-place { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 14px; } .stop-body .stop-text { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 20px; white-space: pre-line; /* keep the break between short and long/notify text */ } .stop-actions { display: flex; justify-content: space-around; margin-top: auto; } .stop-action { background: none; border: none; font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; } .stop-action .icon-btn { width: 56px; height: 56px; font-size: 20px; } .stop-action.active .icon-btn { background: var(--green); color: var(--cream); border-color: var(--green); } /* Journey complete pop-up */ .complete-overlay { position: absolute; left: 14px; right: 14px; bottom: calc(var(--sheet-peek) + 16px); /* floats above the "Coming up" peek strip */ z-index: 650; max-width: 380px; margin: 0 auto; background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 16px 18px; animation: complete-pop 0.3s cubic-bezier(0.32, 0.72, 0, 1); } @keyframes complete-pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .complete-overlay .complete-header { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; } .complete-overlay .check { width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; } .complete-overlay h1 { font-size: 15px; font-weight: 600; } .complete-overlay p { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 12px; } .complete-overlay .complete-actions { display: flex; align-items: center; gap: 6px; } .complete-overlay .btn-green { flex: 1; padding: 11px 16px; font-size: 13.5px; } .complete-overlay .maybe-later { background: none; border: none; color: var(--ink-faint); font-family: var(--font-ui); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 8px 6px; flex: none; } /* === Feedback page === */ .feedback-page { min-height: 100vh; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; } .feedback-card { background: var(--paper); border-radius: 28px; margin: 8px 18px 24px; padding: 32px 26px 28px; flex: 1; display: flex; flex-direction: column; box-shadow: var(--shadow-soft); } .feedback-card .display { font-size: 34px; margin-bottom: 8px; } .feedback-card .route-line { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 26px; } .stars { display: flex; gap: 8px; margin-bottom: 24px; } .star-btn { background: none; border: none; font-size: 34px; cursor: pointer; color: var(--line); transition: color 0.15s ease, transform 0.15s ease; padding: 2px; line-height: 1; } .star-btn.on { color: var(--gold); } .star-btn:active { transform: scale(1.15); } .feedback-status { font-size: 13.5px; margin-top: 14px; min-height: 18px; } .feedback-status.error { color: #a33b2e; } .feedback-status.ok { color: var(--green); } .feedback-done { text-align: center; margin: auto 0; padding: 30px 0; } .feedback-done .check { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--green); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 38px; margin: 0 auto 22px; } .feedback-done h2 { font-family: var(--font-display); font-size: 32px; font-weight: 500; margin-bottom: 10px; } .feedback-done p { font-size: 14px; color: var(--ink-soft); margin-bottom: 26px; } /* Link to the Google Forms survey below the in-app feedback form */ .survey-card { background: var(--paper); border-radius: 28px; margin: 0 18px 24px; padding: 28px 26px; box-shadow: var(--shadow-soft); } /* === Toast === */ .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--ink); color: var(--cream); font-size: 13.5px; padding: 12px 20px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 2000; max-width: 86vw; text-align: center; } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* === Leaflet theming === */ /* Dark-mode basemap: OSM tiles inverted to a night palette (no keyless dark basemap is reliable — CARTO's dark_matter now 403s without an API key). */ .osm-dark { filter: invert(1) hue-rotate(180deg) brightness(1.08) contrast(0.9) saturate(0.85); } .leaflet-control-zoom { border: none !important; box-shadow: var(--shadow-soft) !important; } .leaflet-control-zoom a { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; } .leaflet-control-attribution { background: var(--paper) !important; font-size: 9.5px !important; color: var(--ink-faint) !important; } .leaflet-control-attribution a { color: var(--ink-faint) !important; } .user-dot { background: #2f6fdb; border: 3px solid #fff; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 2px 10px rgba(47, 111, 219, 0.5); } /* POI icon system: the SVG (pin/star/heart) carries the look; the divIcon wrapper only adds a soft lift off the map. Sized via Leaflet's iconSize. */ .poi-marker { filter: drop-shadow(0 3px 5px rgba(28, 43, 32, 0.35)); } .poi-marker svg { width: 100%; height: 100%; display: block; } /* Small inline pin usages (fallback thumbnail, stop place line). */ .poi-thumb svg { width: 24px; height: auto; display: block; } .stop-place svg { width: 12px; height: auto; margin-right: 4px; vertical-align: -1px; }