:root { --blue: #1a4fa3; --red: #d7262c; --ink: #12213a; --paper: #ececec; --you: #1f7cff; --inset-t: env(safe-area-inset-top, 0px); --inset-b: env(safe-area-inset-bottom, 0px); --inset-l: env(safe-area-inset-left, 0px); --inset-r: env(safe-area-inset-right, 0px); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--paper); font-family: -apple-system, system-ui, "Segoe UI", sans-serif; color: var(--ink); } [hidden] { display: none !important; } #map { position: fixed; inset: 0; background: var(--paper); } .leaflet-container { font: inherit; } .leaflet-control-attribution { display: none; } .brand { position: fixed; top: max(10px, var(--inset-t)); left: max(12px, var(--inset-l)); z-index: 500; display: flex; flex-direction: column; gap: 4px; pointer-events: none; } .brand__chip, .brand__legend { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; width: max-content; background: #fff; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.18); font-size: 13px; } .brand__chip { color: var(--blue); } .brand__chip strong { font-size: 15px; letter-spacing: .02em; } /* visible build marker - bump it every deploy so a stale cache is obvious at a glance. Hidden from guests (client, 2026-09-24: "customer facing real soon, any non customer facing language needs to be removed") - shown only when app.js adds "show-build" to , i.e. ?debug=1 locally or ?sim=weissdesk2026 on the deployed site, so it's still there to confirm a deploy landed. */ .brand__build { display: none; } body.show-build .brand__build { margin-left: 2px; padding: 1px 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: inline; } /* Top-right login/account chip - mirrors .brand's top-left placement. Never forced (client, 2026-09-24): a signed-out guest sees a plain "Log in" pill and can ignore it forever; food.js swaps the label to the guest's name once signed in. */ .account { position: fixed; top: max(10px, var(--inset-t)); right: max(12px, var(--inset-r)); z-index: 500; padding: 8px 14px; border: 0; border-radius: 999px; background: #fff; color: var(--blue); font: 700 13px -apple-system, system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.18); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account:active { background: #eef1f6; } .brand__legend { font-size: 12px; color: #4a5568; padding: 4px 10px; } /* teardrop, so the legend swatch reads as the same pin that is on the map */ .brand__dot { width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--red); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); } /* testers kept asking what the purple pins were (client, 2026-09-25) - a second legend row, same teardrop shape as the Weiss-stand one above it */ .brand__dot--event { background: #8a3fd1; } /* z-index above the Featured strip (550): the strip's fixed box spans the full width and reached up under the lower buttons, so taps on ⓘ landed on the strip's gradient instead of the button (found 2026-09-23). Still below an open sheet (600). */ .controls { position: fixed; right: max(12px, var(--inset-r)); bottom: max(24px, var(--inset-b)); z-index: 580; display: flex; flex-direction: column; gap: 10px; transition: bottom .25s ease; } .ctl { width: 48px; height: 48px; border: 0; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.2); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .ctl svg { width: 24px; height: 24px; } .ctl:active { transform: scale(.94); } .ctl[aria-expanded="true"] { color: var(--blue); } /* Blue from the start, not only once it is active: it is the primary action on the map, and the first-run hint tells people to look for "the blue button". */ .ctl--locate { color: var(--you); } .ctl--locate.is-following { background: var(--you); color: #fff; } /* Sits in the space LEFT of the control column rather than centred on the viewport: centred, the toast ran under the buttons on a 320px phone - so the hint telling you to "tap the blue button" was covering the blue button. */ .status { position: fixed; z-index: 700; left: max(12px, var(--inset-l)); right: calc(max(12px, var(--inset-r)) + 60px); /* left/right define the available box; no width:max-content here - that resolves against the viewport, not this box, and pushed the toast back over the buttons */ margin-inline: auto; max-width: 420px; bottom: max(24px, var(--inset-b)); padding: 9px 14px; border-radius: 16px; background: rgba(18,33,58,.94); color: #fff; font-size: 13px; line-height: 1.35; text-align: center; pointer-events: none; transition: bottom .25s ease; } .status.is-action { pointer-events: auto; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } body.sheet-open .controls, body.sheet-open .status { bottom: calc(max(12px, var(--inset-b)) + var(--sheet-h, 0px) + 12px); } body.is-sim::after { content: "SIMULATED WALK — not your real location"; position: fixed; top: var(--inset-t); left: 0; right: 0; z-index: 2000; padding: 4px 8px; background: #f08a2c; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-align: center; pointer-events: none; } /* the person holding the phone */ .you-dot { position: relative; width: 22px; height: 22px; } .you-dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--you); opacity: .35; animation: you-pulse 2.2s ease-out infinite; } .you-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--you); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); } .you-dot.is-coarse::after { background: #8fb4ec; } .you-dot.is-coarse::before { animation: none; opacity: .15; } .you-dot.is-stale::after { background: #8b96a8; } .you-dot.is-stale::before { animation: none; opacity: 0; } @keyframes you-pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(2.2); opacity: 0; } } .you-heading { position: absolute; left: 50%; top: 50%; width: 34px; height: 44px; margin: -44px 0 0 -17px; transform-origin: 50% 100%; clip-path: polygon(50% 100%, 0 0, 100% 0); background: linear-gradient(to top, rgba(31,124,255,.45), rgba(31,124,255,0)); } /* Weiss stands */ .stop-hit { width: 44px; height: 50px; display: flex; align-items: flex-end; justify-content: center; } .stop-pin { color: var(--red); transform-origin: 50% 100%; transition: transform .15s ease; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); } .stop-hit.is-unconfirmed .stop-pin { color: #f08a2c; } .stop-pin.is-active { transform: scale(1.22); } .leaflet-marker-icon:focus-visible .stop-pin { outline: 3px solid var(--you); outline-offset: 2px; border-radius: 50% 50% 50% 0; } .stop-label { padding: 2px 7px; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--red); font-size: 12px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.25); white-space: nowrap; } .stop-label::before { display: none; } .labels-off .stop-label { display: none; } /* Landmarks (Big Tex, the gates, ...) stay named even zoomed all the way out - they're how a guest gets their bearings from far away, unlike a stand's name which only matters once you're close. Found 2026-09-24: a guest couldn't see any gate names at the app's own opening zoom (2.4, below the 3.0 cutoff) - turns out that was already true of Big Tex too, just unnoticed before gates made it obvious. */ .labels-off .landmark-label { display: block; } .stop-list { position: fixed; right: max(12px, var(--inset-r)); bottom: calc(max(24px, var(--inset-b)) + 174px); z-index: 650; width: min(300px, calc(100vw - 24px)); max-height: 50vh; overflow: auto; padding: 6px; background: #fff; border-radius: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.25); overscroll-behavior: contain; } .stop-list__row { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 48px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Named so the popup reads as "here are the stands", not a generic hamburger site menu (client feedback 2026-09-24) */ .stop-list__head { padding: 8px 10px 4px; font: 800 12px/1 -apple-system, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6b7684; } .stop-list__row:active { background: #eef1f6; } .stop-list__row strong { font-size: 15px; } .stop-list__row span { font-size: 12px; color: #4a5568; } .sheet { position: fixed; left: max(10px, var(--inset-l)); right: max(10px, var(--inset-r)); bottom: max(12px, var(--inset-b)); z-index: 600; padding: 14px 52px 16px 16px; background: #fff; border-radius: 18px; box-shadow: 0 6px 24px rgba(0,0,0,.25); transform: translateY(calc(100% + 24px)); transition: transform .25s ease; touch-action: none; } .sheet[aria-hidden="false"] { transform: none; } /* Was a decorative ::before with the drag-to-dismiss listeners bound to the whole .sheet - dragging down ANYWHERE inside it, including to scroll back up through the body's own content, closed the card (client QA, 2026-09-24). Now a real element, and only it carries those listeners (see app.js). */ .sheet__handle { position: absolute; top: 0; left: 0; right: 0; height: 26px; touch-action: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; } .sheet__handle::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: #d5d9e2; } .sheet__close { position: absolute; top: 3px; right: 3px; width: 44px; height: 44px; padding: 5px; border: 0; border-radius: 50%; background: #eef1f6; background-clip: content-box; font-size: 20px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .sheet__eyebrow { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); } .sheet__title { margin: 0 0 4px; font-size: 20px; } .sheet__where { margin: 0; font-size: 14px; color: #4a5568; } @media (prefers-reduced-motion: reduce) { .you-dot::before { animation: none; } .sheet, .controls, .status { transition: none; } } /* ---- street names: live labels from data/street-labels.json (street-labels.js) ---- */ .leaflet-streetLabels-pane { pointer-events: none; } .street-label-wrap { width: 0 !important; height: 0 !important; } .street-label { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; white-space: nowrap; font: 700 11px/1 -apple-system, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #12213a; text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 6px #fff; } .street-labels-off .street-label { display: none; } .cal-build { font-size: 11px; color: #4a5568; font-weight: 600; margin-left: 6px; } /* ---------- food layer: search, menus, favourites (food.js) ---------- */ .backdrop { position: fixed; inset: 0; background: rgba(8,16,32,.35); z-index: 900; } .ctl__count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d7262c; color: #fff; font: 800 11px/18px -apple-system, system-ui, sans-serif; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .ctl--fav { position: relative; } /* landmark badge (Big Tex, Texas Star, the tower) + the facts / fair-info card */ /* Invisible, sized to the drawn figure - the artwork is the button. The hover affordance only shows on a device that can actually hover. */ .landmark-hit { width: 100%; height: 100%; cursor: pointer; border-radius: 8px; } @media (hover: hover) { .landmark-hit:hover { background: rgba(26, 79, 163, .08); } } .info__h { margin: 14px 18px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4a5568; } .info__p { margin: 4px 18px; font-size: 14px; line-height: 1.4; } .info__blurb { margin: 6px 18px 2px; font-size: 15px; line-height: 1.45; } .info__facts { margin: 4px 18px 0; padding-left: 18px; font-size: 14px; line-height: 1.45; } .info__facts li { margin: 2px 0; } /* Fair info as tap-to-open sections (client feedback 2026-09-24: too much to take in at once).

- no JS to toggle, and a screen reader announces open/closed on its own. */ .info__section { border-top: 1px solid #f0f3f7; } .info__section > summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: space-between; } .info__section > summary::-webkit-details-marker { display: none; } .info__section > summary::after { content: ""; width: 8px; height: 8px; margin-left: 8px; flex: none; border-right: 2px solid #9aa4b2; border-bottom: 2px solid #9aa4b2; transform: rotate(-45deg); transition: transform .15s ease; } .info__section[open] > summary::after { transform: rotate(45deg); } .info__section-body { padding-bottom: 6px; } /* .info__p / .info__facts carry their own left/right margin; .sheet__note only gets it from the sheet-body direct-child rule, which no longer applies once it's nested a level deeper inside a section */ .info__section-body > .sheet__note { margin-left: 18px; margin-right: 18px; } .search { position: fixed; z-index: 950; left: 0; right: 0; top: 0; max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 0 0 18px 18px; box-shadow: 0 10px 30px rgba(8,16,32,.28); padding-top: env(safe-area-inset-top, 0); } .search__bar { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; border-bottom: 1px solid #e8ecf2; } .search__icon { width: 20px; height: 20px; color: #4a5568; flex: none; } .search__bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 17px/1.3 -apple-system, system-ui, sans-serif; color: #12213a; padding: 8px 0; } .search__close { border: 0; background: transparent; font-size: 28px; line-height: 1; color: #4a5568; padding: 0 6px; } .search__results { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; } .search__group { padding: 12px 14px 4px; font: 800 12px/1 -apple-system, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #6b7684; } .search__empty { padding: 22px 16px; color: #4a5568; font-size: 15px; line-height: 1.5; } .res, .menu-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f0f3f7; background: #fff; padding: 11px 14px; cursor: pointer; } .res:active, .menu-row:active { background: #f4f7fb; } .res__thumb, .menu-row__thumb { flex: none; width: 44px; height: 44px; border-radius: 10px; background: #eef1f6; /* a cropped square centers by default, which cuts the top off a cone or a tall shake - the toppings, the part that actually sells it - and keeps the plain cup/container instead. Anchor the crop to the top. */ object-fit: cover; object-position: top; } .res__main, .menu-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .res__main strong, .menu-row__main strong { font: 600 15px/1.25 -apple-system, system-ui, sans-serif; color: #12213a; } .res__main span, .menu-row__main span { font: 400 13px/1.3 -apple-system, system-ui, sans-serif; color: #6b7684; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .res__price, .menu-row__price { font: 700 15px/1 -apple-system, system-ui, sans-serif; color: #1a4fa3; flex: none; } /* 44x44 tap target (client QA, 2026-09-24: measured 30x30, "less forgiving than the main 48x48 map controls") without changing the visible heart's size or nudging row layout - the extra padding is cancelled by an equal negative margin, so it only grows the invisible, clickable area. */ .fav { flex: none; border: 0; background: transparent; padding: 11px; margin: -7px; line-height: 0; cursor: pointer; } .fav svg { width: 22px; height: 22px; fill: none; stroke: #b6bfcc; stroke-width: 2; stroke-linejoin: round; } .fav.is-on svg { fill: #d7262c; stroke: #d7262c; } /* touch-action: pan-y overrides .sheet's own touch-action: none for touches that start here specifically, so native vertical scrolling works inside the card even though the card itself blocks a drag gesture (client QA, 2026-09-24 - a drag-to-scroll was being read as drag-to-dismiss). */ .sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; max-height: 58vh; margin: 0 -18px; padding: 0 0 4px; } .sheet__body > p, .sheet__body > .btn, .sheet__body > .sheet__actions { margin-left: 18px; margin-right: 18px; } .sheet__back { position: absolute; top: 12px; left: 14px; border: 0; background: transparent; font: 600 15px/1 -apple-system, system-ui, sans-serif; color: #1a4fa3; padding: 4px 2px; cursor: pointer; } .sheet__note { color: #6b7684; font-size: 13px; line-height: 1.45; margin: 8px 0 0; } .sheet__actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; margin-bottom: 4px; } .award { margin: 6px 18px 0; color: #9a6b00; font: 700 13px/1.35 -apple-system, system-ui, sans-serif; } /* "cover" at a fixed height cropped hard into portrait photos (a corn dog on a skewer, a tall milkshake) - guests saw a zoomed-in slice of the dish, not the dish. "contain" always shows the whole photo; a landscape shot still fills the box edge to edge, a portrait one just doesn't fill the corners. */ .item-hero { display: block; width: calc(100% + 36px); margin: -4px -18px 12px; height: 38vh; object-fit: contain; background: #f4f6f9; } /* ---- Featured food: the map's home view leads with photos, not a search icon ---- Docked to the bottom like .controls, but stops short of that button column (padding-right) instead of sitting under it. Same z-index band as .controls (below an open .sheet at 600) so opening any card naturally covers it, and explicitly hidden whenever a sheet or the search panel is open besides. */ .featured { position: fixed; left: 0; right: 0; bottom: 0; z-index: 550; background: linear-gradient(to top, rgba(8,16,32,.6), rgba(8,16,32,0) 100%); padding: 34px 0 max(10px, var(--inset-b)); transition: opacity .2s ease, transform .2s ease; } body.sheet-open .featured, body.search-open .featured { display: none; } .featured__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 calc(76px + max(12px, var(--inset-r))) 8px 14px; color: #fff; } .featured__head strong { font: 800 15px/1.2 -apple-system, system-ui, sans-serif; } .featured__head button { border: 0; background: transparent; color: rgba(255,255,255,.85); font: 600 13px/1 -apple-system, system-ui, sans-serif; padding: 4px; cursor: pointer; } .featured__row { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 76px 4px 14px; scroll-snap-type: x proximity; } .featured__card { flex: none; width: 132px; scroll-snap-align: start; border: 0; padding: 0; cursor: pointer; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(8,16,32,.28); text-align: left; -webkit-tap-highlight-color: transparent; } .featured__card img { display: block; width: 100%; height: 96px; object-fit: cover; object-position: top; background: #eef1f6; } .featured__card__body { padding: 7px 9px 9px; } .featured__card strong { display: block; font: 700 13px/1.25 -apple-system, system-ui, sans-serif; color: #12213a; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .featured__card span { display: block; margin-top: 3px; font: 600 12px/1 -apple-system, system-ui, sans-serif; color: #6b7684; } .featured__card .award-flag { color: #9a6b00; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 12px; padding: 12px 16px; cursor: pointer; font: 700 15px/1 -apple-system, system-ui, sans-serif; background: #eef2f7; color: #12213a; } .btn--go { flex: 1; background: #1a4fa3; color: #fff; } .btn--quiet { margin-top: 10px; width: calc(100% - 36px); background: #f4f7fb; color: #1a4fa3; } .btn--wide { width: calc(100% - 36px); margin: 0 18px 10px; } .btn[disabled] { opacity: .55; } /* Login/register/account forms (client, 2026-09-24) - same field look throughout, plain enough to sit inside any sheet next to the app's other plain-text content. */ .field { display: block; margin: 0 18px 10px; } .field span { display: block; font: 600 12px -apple-system, system-ui, sans-serif; color: #6b7684; margin-bottom: 4px; } .field input { width: 100%; border: 1px solid #d5d9e2; border-radius: 10px; padding: 10px 12px; font: 500 16px -apple-system, system-ui, sans-serif; color: #12213a; background: #fff; } .field input:focus { outline: 2px solid var(--blue); outline-offset: 1px; } .auth-error { color: var(--red); font: 600 13px/1.4 -apple-system, system-ui, sans-serif; margin: 0 18px 10px; } .auth-switch { margin: 0 18px 10px; font-size: 13px; color: #4a5568; } .auth-switch button { border: 0; background: transparent; color: var(--blue); font: 700 13px inherit; padding: 0; cursor: pointer; } .account-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 18px 8px; padding: 12px 14px; background: #f4f7fb; border-radius: 12px; } .account-row button { border: 0; background: transparent; color: var(--blue); font: 700 14px inherit; padding: 4px; cursor: pointer; } .share-url { display: block; width: calc(100% - 36px); margin: 0 18px 10px; padding: 10px 12px; border: 1px solid #d5d9e2; border-radius: 10px; font: 500 13px -apple-system, system-ui, sans-serif; color: #12213a; background: #f4f7fb; word-break: break-all; } .route-label { background: #1a4fa3; color: #fff; border: 0; border-radius: 10px; padding: 4px 9px; font: 700 12px/1.3 -apple-system, system-ui, sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.25); white-space: nowrap; } .route-label::before { display: none; } /* multi-stop "Route through my list" - green to read as distinct from the single-stand blue "Take me there" line, at a glance */ .path-label { background: #0f8a4c; } .path-stop { width: 22px; height: 22px; border-radius: 50%; background: #0f8a4c; color: #fff; display: flex; align-items: center; justify-content: center; font: 800 12px/1 -apple-system, system-ui, sans-serif; box-shadow: 0 2px 5px rgba(0,0,0,.35); border: 2px solid #fff; } /* Back sits top-left in the card, so shift the eyebrow clear of it when it shows */ .sheet__back:not([hidden]) ~ .sheet__eyebrow { padding-left: 58px; } /* ---- Restroom + event pins (amenity-overlays.js) - deliberately NOT red, so neither is ever mistaken for a Weiss stand. ---- */ .amenity-pin--restroom, .amenity-pin--atm { width: 16px; height: 16px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,.35); border: 1.5px solid #fff; cursor: pointer; } .amenity-pin--restroom { background: #1a8a9c; } .amenity-pin--atm { background: #1f8a3c; } /* green, matching the usual real-world ATM/cash colour */ /* Way smaller than a 44x50 Weiss pin (client, 2026-09-24) - an event is a secondary "also happening near here", not a stand to walk to. */ .amenity-pin--event { width: 18px; height: 21px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .amenity-pin--event::before { content: ""; position: absolute; inset: 0; background: #8a3fd1; clip-path: path("M9 21C9 21 1.2 11.9 1.2 6.4C1.2 2.8 4.7 0 9 0C13.3 0 16.8 2.8 16.8 6.4C16.8 11.9 9 21 9 21Z"); box-shadow: 0 2px 4px rgba(0,0,0,.5); } .amenity-pin--event { position: relative; color: #fff; font-size: 9px; padding-bottom: 4px; } .amenity-label { background: #8a3fd1; color: #fff; } .amenity-label::before { display: none; } /* ---- The food feed (food.js openFeed): a full-screen page over the map ---- One column on a phone, a social-style scroll of big photo cards; two or three columns on a tablet or desktop. Sits above the controls and the search panel; everything that floats over the map hides while it is up. */ .feed { position: fixed; inset: 0; z-index: 960; background: #fff; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0); } body.feed-open .featured, body.feed-open .controls, body.feed-open .brand, body.feed-open .status, body.feed-open .stop-list { display: none !important; } .feed__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 4px; } .feed__head h2 { margin: 0; flex: 1; font-size: 22px; } .feed__close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #eef1f6; font-size: 24px; line-height: 1; color: #12213a; cursor: pointer; -webkit-tap-highlight-color: transparent; } .feed__sub { margin: 0 14px 8px; font-size: 14px; line-height: 1.4; color: #4a5568; } .feed__heart { color: #d7262c; font-weight: 800; } .feed__tools { display: flex; align-items: center; gap: 8px; padding: 0 14px 10px; border-bottom: 1px solid #e8ecf2; } .feed__view { display: inline-flex; border: 1px solid #d5d9e2; border-radius: 999px; overflow: hidden; } .feed__view button { border: 0; background: #fff; padding: 7px 14px; cursor: pointer; font: 600 13px/1 -apple-system, system-ui, sans-serif; color: #4a5568; -webkit-tap-highlight-color: transparent; } .feed__view button[aria-pressed="true"] { background: #1a4fa3; color: #fff; } .feed__link { margin-left: auto; border: 0; background: transparent; color: #1a4fa3; font: 600 13px/1 -apple-system, system-ui, sans-serif; padding: 6px 2px; cursor: pointer; } .feed__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 96px; } .feed__card { border-bottom: 8px solid #f0f3f7; } .feed__photo { display: block; width: 100%; height: 56vw; max-height: 420px; object-fit: contain; background: #f4f6f9; cursor: pointer; } @media (min-width: 640px) { .feed__photo { height: 260px; } } .feed__body { padding: 10px 14px 14px; } .feed__title { display: flex; align-items: center; gap: 8px; } .feed__title strong { flex: 1; font: 700 18px/1.25 -apple-system, system-ui, sans-serif; color: #12213a; cursor: pointer; } .feed__title .fav { padding: 7px; margin: -7px -7px -7px 0; } /* 44 px tap target, no extra layout */ .feed__title .fav svg { width: 30px; height: 30px; } .feed__meta { margin-top: 2px; font: 600 13px/1.3 -apple-system, system-ui, sans-serif; color: #1a4fa3; } .feed__award { margin: 6px 0 0; } .feed__desc { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: #12213a; } .feed__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; } /* square cells via padding-top, not aspect-ratio: works on every iOS Safari the map already supports (aspect-ratio only arrived in iOS 15) */ .feed__cell { position: relative; background: #eef1f6; overflow: hidden; } .feed__cell::before { content: ""; display: block; padding-top: 100%; } .feed__cell__open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .feed__cell__open img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .feed__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 6px 5px; text-align: left; color: #fff; font: 600 11px/1.2 -apple-system, system-ui, sans-serif; background: linear-gradient(to top, rgba(8,16,32,.75), rgba(8,16,32,0)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 44 px tap target on a thumbnail: the white disc is the visible 34 px, the transparent padding around it is the rest */ .feed__cell .fav { position: absolute; top: 0; right: 0; padding: 5px; border-radius: 0; background: none; box-shadow: none; } .feed__cell .fav svg { width: 22px; height: 22px; padding: 6px; box-sizing: content-box; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(0,0,0,.25); } .feed__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px max(12px, env(safe-area-inset-bottom, 0)); background: #fff; border-top: 1px solid #e8ecf2; box-shadow: 0 -6px 18px rgba(8,16,32,.08); } .feed__foot span { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; color: #4a5568; } .feed__foot .btn--go { flex: none; } .feed__foot .btn--go[disabled] { background: #c7d0dd; cursor: default; } @media (min-width: 640px) { .feed__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px; } .feed__card { border: 1px solid #e8ecf2; border-radius: 14px; overflow: hidden; } .feed__grid { grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; } } @media (min-width: 1000px) { .feed__cards { grid-template-columns: repeat(3, 1fr); } .feed__grid { grid-template-columns: repeat(6, 1fr); } }