/* localish: coastal field-guide chrome floating over the map. Palette mirrors the desktop theme.nix (deep navy / azure / sunflower gold) but is deliberately independent of it: this app ships to phones. */ @font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin-full-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; } /* Dark is the default. Light overrides the same tokens, either because the device asks for it (auto) or because the reader picked it in settings. Names stay literal (navy, jasmine) so the map layer code and the palette keep matching, even though light mode paints them warm paper colours. */ :root { --navy: #0a1628; --navy-85: rgba(10, 22, 40, 0.85); --navy-65: rgba(10, 22, 40, 0.65); --azure: #1789fc; --gold: #fdb833; --jasmine: #ffd07b; --brand: #fdb833; --ink: #f2f6fc; --ink-dim: #93a5bf; --line: rgba(255, 208, 123, 0.16); --line-strong: rgba(255, 208, 123, 0.4); --shadow-ink: 4, 10, 20; /* iOS gives a standalone PWA a web view shorter than the screen and fills the remainder with the document canvas colour. CSS cannot draw there, so the canvas has to match the drawer surface or that strip looks like a gap under the list bar. */ --canvas: #0a1628; color-scheme: dark; --danger: #e05263; --cat-food: #fdb833; --cat-drink: #1789fc; --cat-culture: #e05263; --cat-outdoors: #2ec27e; --cat-shopping: #b78af7; --cat-music: #ff7847; --cat-other: #8fa3bf; --radius: 16px; --shadow: 0 8px 28px rgba(var(--shadow-ink), 0.4); --sat: env(safe-area-inset-top, 0px); /* Capped: iOS reports a bottom inset of ~94px when Safari's toolbar is collapsed, reserving room for chrome that is not on screen. Taken at face value it left a band of dead space under the drawer and pushed the floating buttons up the screen. The home indicator itself needs 34px. */ --sab: min(env(safe-area-inset-bottom, 0px), 34px); } /* Light: sand and ink rather than a white sheet, so it still reads as the same coastal field guide. Gold survives as a fill but text switches to a deep amber, because #fdb833 lettering on paper cannot be read. The theme is resolved to light or dark in JS (auto follows the device) and stamped on , so there is exactly one place to change either palette. */ :root[data-theme="light"] { color-scheme: light; --navy: #f6f1e7; --navy-85: rgba(255, 253, 249, 0.9); --navy-65: rgba(255, 253, 249, 0.72); --gold: #e0940b; --jasmine: #9a6407; --brand: #a35f06; --ink: #16233a; --ink-dim: #5d6c85; --line: rgba(22, 35, 58, 0.14); --line-strong: rgba(22, 35, 58, 0.34); --shadow-ink: 40, 30, 12; --canvas: #fffdf9; --cat-culture: #c0392b; --cat-outdoors: #1f8f5f; --cat-shopping: #7d4fd0; --cat-other: #6b7c96; --shadow: 0 8px 28px rgba(40, 30, 12, 0.16); } * { margin: 0; padding: 0; box-sizing: border-box; } html { background: var(--canvas); } html, body { height: 100%; overscroll-behavior: none; } body { font-family: "Bricolage Grotesque", sans-serif; background: var(--navy); color: var(--ink); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; } .hidden { display: none !important; } #map { position: fixed; inset: 0; } /* ---- top chrome ---------------------------------------------------- */ #topbar { position: fixed; top: 0; left: 0; right: 0; padding: calc(var(--sat) + 6px) 12px 8px; background: linear-gradient(var(--navy-85), var(--navy-65) 70%, transparent); pointer-events: none; z-index: 20; } #topbar > * { pointer-events: auto; } .brand-row { display: flex; align-items: center; gap: 10px; } .brand { display: flex; align-items: center; margin: 0; } /* The wordmark: one colourway per theme, because the navy lettering vanishes on the navy dark background. Height, not width, pins the scale; the drop shadow lifts it off a busy map. */ .brand-logo { height: 34px; width: auto; display: none; filter: drop-shadow(0 2px 8px rgba(var(--shadow-ink), 0.4)); } :root[data-theme="light"] .brand-logo-light { display: block; } :root:not([data-theme="light"]) .brand-logo-dark { display: block; } .net-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); display: none; margin-top: 4px; } body.offline .net-dot { display: block; } .iconbtn { margin-left: auto; border: 0; border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; background: var(--navy-85); color: var(--jasmine); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .chips { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 7px; } .chips::-webkit-scrollbar { display: none; } /* The generated chips must join the flex row as direct items, or they wrap into a column that buries the map on phones. */ #cat-chips { display: contents; } .chips .chip, .chips .seg { flex: 0 0 auto; white-space: nowrap; } .chip-gap { flex: 0 0 2px; align-self: stretch; border-left: 1px solid var(--line); } .seg { display: inline-flex; background: var(--navy-85); border: 1px solid var(--line); border-radius: 10px; padding: 3px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); flex: 0 0 auto; } /* Filters are stamped tickets, not soft pills: square corners, a printed rule under the label, and a hard offset shadow once pressed. */ .seg button { border: 0; background: transparent; color: var(--ink-dim); font: 800 10.5px "Bricolage Grotesque", sans-serif; text-transform: uppercase; letter-spacing: 0.12em; padding: 7px 11px; border-radius: 2px; white-space: nowrap; } .seg button.on { background: var(--gold); color: var(--navy); box-shadow: 2px 2px 0 rgba(var(--shadow-ink), 0.5); } .chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 0; border-bottom: 2px solid var(--line-strong); background: var(--navy-65); color: var(--ink-dim); font: 800 10.5px "Bricolage Grotesque", sans-serif; text-transform: uppercase; letter-spacing: 0.12em; padding: 8px 10px 6px; border-radius: 2px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* A square swatch reads as a map legend key rather than a bullet. */ .chip .dot { width: 7px; height: 7px; border-radius: 1.5px; background: var(--dot, var(--ink-dim)); opacity: 0.5; } .chip.on { background: var(--dot, var(--gold)); color: var(--navy); border-bottom-color: rgba(var(--shadow-ink), 0.4); box-shadow: 2px 2px 0 rgba(var(--shadow-ink), 0.5); } /* Once the chip carries the colour itself, the swatch is noise. */ .chip.on .dot { display: none; } /* Scroll affordance: a rule under the strip with a gold marker showing how much of the row is on screen and where you are in it. Painted as the row's background so it stays put while the chips scroll past, and nothing is hidden behind a fade. */ .chips.scrollable { background-image: linear-gradient(var(--line), var(--line)), linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat, no-repeat; background-size: 100% 2px, var(--thumb-w, 40px) 2px; background-position: 0 100%, var(--thumb-x, 0px) 100%; } /* Cuisine sheet: one row per cuisine present in the current map view, vertically scrolled - a chip row stopped scaling at ~60 cuisines. */ .cuisine-list { display: flex; flex-direction: column; margin-top: 8px; max-height: 55vh; overflow-y: auto; /* Reaching the list's end must not chain the scroll into the sheet and read as a dismiss gesture. */ overscroll-behavior: contain; } .cuisine-row { display: flex; justify-content: space-between; align-items: center; border: 0; background: none; text-align: left; padding: 13px 6px; border-bottom: 1px solid var(--line); color: var(--ink); font: 600 14.5px "Bricolage Grotesque", sans-serif; text-transform: capitalize; } .cuisine-row .count { color: var(--ink-dim); font-weight: 500; font-size: 13px; } .cuisine-row.on { color: var(--brand); font-weight: 800; } .cuisine-row.on::after { content: "✓"; margin-left: 8px; } .cuisine-row .dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--dot, var(--ink-dim)); margin-right: 4px; } .cuisine-section-h { margin: 14px 0 2px; font: 800 10.5px "Bricolage Grotesque", sans-serif; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-dim); } /* ---- floating bits -------------------------------------------------- */ /* ---- bottom drawer: list of spots in the current map view -------------- */ .drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; background: var(--navy-85); border-top: 1px dashed var(--line-strong); border-radius: 14px 14px 0 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -8px 30px rgba(var(--shadow-ink), 0.4); /* Collapsed, this bar is one wide tap target, so its lower edge can sit in the home-indicator zone: reserving the full 34px inset left a band of empty paper under two short lines. Opened, the rows are tapped individually and do need that clearance. */ padding-bottom: calc(14px + var(--shortfall, 0px)); bottom: calc(-1 * var(--shortfall, 0px)); transition: transform 0.22s ease-out; } /* Open, the outer surface keeps NO bottom padding: padding below a scrollable list is dead space that clips text above an empty band. The list itself runs to the glass and carries the safe-area clearance as inner scroll padding, so the last row can always scroll clear of the home indicator while overflow disappears under it naturally. */ .drawer.open { padding-bottom: 0; } .drawer-bar { display: flex; align-items: center; gap: 10px; padding: 2px 14px 8px; } .drawer-toggle { flex: 1; border: 0; background: transparent; color: var(--jasmine); font: 700 12px "Bricolage Grotesque", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 0; } .drawer-toggle .sheet-handle { display: block; margin: 2px auto 8px; } .drawer-bar .chip { padding: 4px 10px; font-size: 12px; color: var(--gold); border-color: var(--gold); } .drawer-close { display: none; border: 1px solid var(--line); border-radius: 50%; width: 40px; height: 40px; flex: 0 0 auto; align-items: center; justify-content: center; background: transparent; color: var(--jasmine); } .drawer.open .drawer-close { display: inline-flex; } .drawer-list { display: none; max-height: calc(42dvh + var(--sab) + var(--shortfall, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px calc(var(--sab) + var(--shortfall, 0px) + 12px); } .drawer.open .drawer-list { display: block; } #fabs { position: fixed; right: 12px; bottom: calc(var(--sab) + 64px); z-index: 20; display: flex; flex-direction: column; gap: 12px; transition: opacity 0.15s; } /* The floating buttons sit exactly where the open list scrolls; hide them while it is up. */ body.listopen #fabs { opacity: 0; pointer-events: none; } .fab { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--navy-85); color: var(--jasmine); display: grid; place-items: center; box-shadow: var(--shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .fab:active { transform: scale(0.94); } .fab-primary { background: var(--gold); color: var(--navy); border-color: var(--gold); } .fab.locating { color: var(--azure); animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.5; } } /* ---- crosshair add mode --------------------------------------------- */ .crosshair { position: fixed; inset: 0; z-index: 25; pointer-events: none; } .crosshair-pin { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; transform: translate(-50%, -50%); } .crosshair-pin::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 26px; height: 26px; transform: translateX(-50%); border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--gold); border: 3px solid var(--navy); box-shadow: var(--shadow); } .crosshair-bar { position: absolute; left: 12px; right: 12px; bottom: calc(var(--sab) + 18px); pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--navy-85); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; color: var(--ink-dim); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow); } /* ---- sheet ----------------------------------------------------------- */ .backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(var(--shadow-ink), 0.4); } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; background: var(--navy); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; padding: 6px 18px calc(var(--sab) + 20px); max-height: 82dvh; overflow-y: auto; box-shadow: 0 -12px 40px rgba(var(--shadow-ink), 0.45); animation: rise 0.22s ease-out; } @keyframes rise { from { transform: translateY(40px); opacity: 0.4; } } .sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 8px auto 14px; } .sheet h2 { font-family: "Fraunces", serif; font-variation-settings: "wght" 580, "SOFT" 100, "WONK" 1; font-size: 25px; line-height: 1.15; margin-bottom: 6px; } .sheet .meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; color: var(--ink-dim); font-size: 13px; } .badge { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px "Bricolage Grotesque", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--dot) 18%, transparent); color: var(--dot); border: 1px solid color-mix(in srgb, var(--dot) 40%, transparent); } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); } .event-when { font-weight: 700; color: var(--jasmine); font-size: 14px; margin-bottom: 10px; } .cost-line { color: var(--gold); font-size: 14px; font-weight: 700; margin-bottom: 10px; } .ev-ico { width: 11px; height: 11px; vertical-align: -1px; margin-right: 4px; } .w3w-line { color: var(--ink-dim); font-size: 13px; margin-top: 10px; user-select: text; } /* A detail sheet is a reading surface: the app chrome is not selectable (body sets user-select: none) but names, dates, costs and notes must be copyable. Buttons opt back out or a long-press highlights their label. */ .detail { user-select: text; -webkit-user-select: text; } .detail .btn, .detail .linkbtn { user-select: none; -webkit-user-select: none; } .notes { color: var(--ink); font-size: 15px; line-height: 1.5; margin-bottom: 12px; user-select: text; } .spot-link { color: var(--azure); font-size: 14px; word-break: break-all; } .pending-tag { color: var(--gold); font-size: 12px; font-weight: 700; } .actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .btn { flex: 1; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 700 12.5px "Bricolage Grotesque", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; padding: 13px 14px; text-align: center; text-decoration: none; } .btn.solid { background: var(--gold); border-color: var(--gold); color: var(--navy); } .btn.ghost { flex: 0 0 auto; color: var(--ink-dim); } .btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } /* ---- forms ----------------------------------------------------------- */ form label { display: block; font: 700 12px "Bricolage Grotesque", sans-serif; color: var(--ink-dim); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.06em; } form input[type="text"], form input[type="url"], form input[type="date"], form input[type="password"], form textarea, form select { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: var(--ink); font: 500 16px "Bricolage Grotesque", sans-serif; padding: 12px; outline: none; } form input:focus, form textarea:focus { border-color: var(--azure); } form textarea { min-height: 72px; resize: vertical; } .cat-picker, .kind-picker { display: flex; flex-wrap: wrap; gap: 8px; } .cat-picker .chip, .kind-picker .chip { background: rgba(255, 255, 255, 0.04); } .coords-note { font-size: 12px; color: var(--ink-dim); margin-top: 6px; } .date-fields { display: flex; gap: 10px; } .date-fields > div { flex: 1; } /* ---- list view -------------------------------------------------------- */ .list-item { display: flex; align-items: baseline; gap: 10px; padding: 12px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .list-item .dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); align-self: center; } .list-item .dot.event { border-radius: 2px; rotate: 45deg; } .list-item b { font-size: 15px; } .list-item .sub { display: block; color: var(--ink-dim); font-size: 12.5px; margin-top: 1px; } .list-item .dist { margin-left: auto; color: var(--jasmine); font-size: 13px; font-weight: 700; white-space: nowrap; } .list-item .focus { flex: 0 0 auto; align-self: center; border: 0; background: none; color: var(--jasmine); padding: 6px; margin: -6px -4px -6px 0; } .list-item .focus:active { color: var(--gold); } /* ---- settings --------------------------------------------------------- */ .settings-block { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 16px 0; } .settings-block:first-of-type { border-top: 0; } .settings-block h3 { font: 700 14px "Bricolage Grotesque", sans-serif; margin-bottom: 8px; } .settings-block p { color: var(--ink-dim); font-size: 13px; line-height: 1.5; margin-bottom: 10px; } .progress { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 10px; } .progress > div { height: 100%; background: var(--azure); width: 0; transition: width 0.2s; } /* ---- toast ------------------------------------------------------------ */ .toast { position: fixed; left: 50%; bottom: calc(var(--sab) + 84px); transform: translateX(-50%); z-index: 40; background: var(--gold); color: var(--navy); font: 700 13.5px "Bricolage Grotesque", sans-serif; padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow); max-width: 86vw; text-align: center; } /* ---- offline map banner ------------------------------------------------- Deliberately not a sheet: it must never block a tap on the map behind it, since it can appear seconds after boot while someone is already exploring - on a phone-width viewport its card is nearly full width, so it can sit right over a cluster bubble. Same passthrough trick as #topbar: the card itself ignores pointer events, only its buttons opt back in, so a tap anywhere on its visible body but not a button reaches the map underneath. */ .offline-banner { position: fixed; left: 50%; bottom: calc(var(--sab) + 84px); transform: translateX(-50%); z-index: 21; width: min(340px, 88vw); background: var(--navy-85); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; pointer-events: none; } .offline-banner button { pointer-events: auto; } .offline-banner p { margin: 0 0 8px; font: 500 13px "Bricolage Grotesque", sans-serif; } .offline-banner .actions { justify-content: flex-end; } /* ---- maplibre tweaks --------------------------------------------------- */ .maplibregl-ctrl-attrib { background: var(--navy-65) !important; color: var(--ink-dim); font-size: 10px; border-radius: 8px 0 0 0; } .maplibregl-ctrl-attrib a { color: var(--ink-dim) !important; } .maplibregl-user-location-dot { background: var(--azure); } /* Diagnostics block in settings: small, monospaced, scrollable if narrow. */ .diag { font: 500 11px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow-x: auto; color: var(--ink-dim); background: var(--navy-65); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; margin-top: 6px; } /* Collapsed drawer: the nearest spot fills the bar so the home-indicator space reads as content rather than padding. Hidden once the list is up, where the same row appears at the top anyway. */ .peek { display: block; margin-top: 3px; font: 500 12px "Bricolage Grotesque", sans-serif; text-transform: none; letter-spacing: 0; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drawer.open .peek { display: none; } /* On paper the translucent drawer and the basemap land are close in tone, so the panel needs a firmer edge to read as a separate surface. */ :root[data-theme="light"] .drawer { /* Opaque and exactly --canvas: the strip iOS paints below the web view must be indistinguishable from the drawer or it reads as a gap. */ background: #fffdf9; border-top: 1px solid rgba(22, 35, 58, 0.22); box-shadow: 0 -10px 26px rgba(40, 30, 12, 0.14); } /* Link row: recognisable marks in a row of round buttons. Sized for thumbs (44px is the smallest reliable touch target) with the label kept for screen readers rather than printed under every icon. */ .linkrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .linkbtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--navy-65); color: var(--jasmine); text-decoration: none; } .linkbtn:active { background: var(--gold); color: var(--navy); } /* ---- facet tags ("good for") ------------------------------------------ */ .badge.tag { opacity: 0.8; } .tag-grid { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 10px; } .tag-opt { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; } /* ---- the one filter sheet -------------------------------------------- */ .badge-n { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--navy); color: var(--gold); font-size: 10px; line-height: 16px; text-align: center; letter-spacing: 0; } .fsec { border-bottom: 1px solid var(--line); } .fsec-h { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; background: none; padding: 14px 6px; text-align: left; color: var(--ink); font: 800 11px "Bricolage Grotesque", sans-serif; text-transform: uppercase; letter-spacing: 0.12em; } .fsec-h::after { content: "\25BE"; color: var(--ink-dim); } .fsec.open .fsec-h::after { content: "\25B4"; } .fsec-v { flex: 1; text-align: right; color: var(--brand); font: 600 13px "Bricolage Grotesque", sans-serif; text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fsec-b { display: flex; flex-direction: column; padding-bottom: 6px; } .fsec-b .cuisine-row { width: 100%; } .fsec-b .cuisine-row { padding: 11px 6px 11px 14px; } .fsec-b .cuisine-row:last-child { border-bottom: 0; } .sheet-foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; } .quick-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; } .quick-row .chip { backdrop-filter: none; -webkit-backdrop-filter: none; }