:root { --bg: #f7f5f2; --panel: #ffffff; --ink: #1d1b19; --muted: #6f6a64; --line: #e7e2db; --accent: #b8412f; /* terracotta */ --accent-soft: #f3e3df; --been: #c0392b; /* red = been there */ --totry: #2e7d5b; /* green = haven't been */ --fav: #c0392b; /* red star = favorite */ --wish: #2e7d5b; /* green star = wishlist */ --michelin: #7a1f3d; /* burgundy badge */ --chip: #f0ece6; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.06); --radius: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Dark theme: variable overrides, applied via data-theme on . Auto-follows the system preference; the header ๐ŸŒ™/โ˜€๏ธ button overrides. */ :root[data-theme="dark"] { --bg: #171411; --panel: #211d18; --ink: #ebe6de; --muted: #a59d92; --line: #37312a; --accent: #e07a5f; --accent-soft: #3b2a23; --been: #e0604f; --totry: #4dab85; --fav: #e0604f; --wish: #4dab85; --michelin: #b04a68; --chip: #2c2721; --shadow: 0 1px 3px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); } :root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip { background: var(--panel); color: var(--ink); } :root[data-theme="dark"] .leaflet-bar a { background: var(--panel); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .leaflet-control-attribution { background: rgba(33, 29, 24, .8); color: var(--muted); } :root[data-theme="dark"] select, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea { background: var(--chip); color: var(--ink); border-color: var(--line); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } /* Use the DYNAMIC viewport height on mobile: iOS Safari's 100%/100vh doesn't account for the collapsing toolbars, so the app ends up taller than the screen and the whole PAGE scrolls behind it (which steals gestures meant for the list and lands them on the map). */ @supports (height: 100dvh) { html, body { height: 100dvh; } } body { display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.4; overflow: hidden; /* the app scrolls its panes, never the page */ overscroll-behavior: none; /* no rubber-banding / pull-to-refresh */ } /* ---------- Header ---------- */ header { display: flex; align-items: center; gap: 20px; padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 500; } header h1 { font-size: 17px; margin: 0; letter-spacing: -.2px; } header h1 .dot { color: var(--accent); } .stats { display: flex; gap: 16px; margin-left: auto; flex-wrap: wrap; } .stat { text-align: right; } .stat b { font-size: 16px; display: block; line-height: 1.1; } .stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .save-state { font-size: 11px; color: var(--muted); min-width: 90px; text-align: right; } .save-state.dirty { color: var(--accent); } /* ---------- Layout ---------- Desktop is three columns: [ filters (toggleable) | list (always) | map ]. โ˜ฐ shows/hides the filter column; the restaurant list can never be hidden. #fresizer drags the filters/list split, #wresizer the list/map split. */ main { flex: 1; display: flex; min-height: 0; } #sidebar { width: calc(var(--sidebar-w, 360px) + var(--filters-w, 300px) + 6px); flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: row; min-width: 260px; } #listpane { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; } /* z-index:0 isolates Leaflet's internal stacking (panes/controls run z 200-1000) so full-screen overlays like the Discover deck reliably paint above the map. */ #map { flex: 1; min-width: 0; position: relative; z-index: 0; } /* Drag handles (both column dividers on desktop). */ #wresizer, #fresizer { flex: 0 0 6px; cursor: col-resize; background: var(--line); align-self: stretch; transition: background .15s; } #wresizer:hover, #fresizer:hover, #wresizer.drag, #fresizer.drag { background: var(--accent); } /* Filters hidden (body.fhide, desktop only): the sidebar is just the list. */ @media (min-width: 781px) { body.fhide #sidebar { width: var(--sidebar-w, 360px); } body.fhide .filters, body.fhide #fresizer { display: none; } } /* ---------- Filters ---------- */ .filters { padding: 14px 16px; overflow-y: auto; flex: 0 0 var(--filters-w, 300px); min-width: 0; } .addbox { display: flex; gap: 6px; } .addbox input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: var(--panel); } .addbox input:focus { outline: none; border-color: var(--accent); } .addbox button { padding: 0 14px; border: none; border-radius: 8px; cursor: pointer; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; } .addbox button:disabled { opacity: .5; cursor: default; } .addmsg { font-size: 11.5px; margin: 6px 0 2px; min-height: 14px; } .addmsg.ok { color: var(--been); } .addmsg.err { color: var(--accent); } .filters .search { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: var(--bg); } .filters .search:focus { outline: none; border-color: var(--accent); } .fgroup { margin-top: 14px; } .fgroup > label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; } .seg { display: flex; flex-wrap: wrap; gap: 6px; } .seg button { border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 5px 10px; border-radius: 999px; cursor: pointer; font-size: 12.5px; } .seg button:hover { border-color: var(--accent); } .seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); } .toggle-row { display: flex; gap: 8px; } .toggle-row button { flex: 1; } .toggle-row button.fav.on { background: var(--fav); border-color: var(--fav); color: #3a2c00; } .toggle-row button.wish.on { background: var(--wish); border-color: var(--wish); } /* multi-select cuisine checklist */ .cuisine-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 132px; overflow-y: auto; padding: 2px; } .cuisine-list .chip { border: 1px solid var(--line); background: var(--panel); padding: 4px 9px; border-radius: 999px; cursor: pointer; font-size: 12px; user-select: none; white-space: nowrap; } .cuisine-list .chip:hover { border-color: var(--accent); } .cuisine-list .chip.on { background: var(--accent); color: #fff; border-color: var(--accent); } /* borough subheading inside the neighborhood checklist */ .cuisine-list .nb-boro { flex: 0 0 100%; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; margin: 8px 0 1px; } .cuisine-list .nb-boro:first-child { margin-top: 0; } #neighborhood { max-height: 240px; } /* taller: borough groups make it longer */ #article { max-height: 300px; } /* taller: article-type groups make it longer */ .hint { font-size: 10.5px; color: var(--muted); margin-top: 6px; line-height: 1.35; } /* Section divider grouping related filter groups */ .fsection { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--accent); font-weight: 700; margin: 18px 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--line); } .slider { width: 100%; margin: 4px 0 0; accent-color: var(--accent); cursor: pointer; } .article-select { width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 12.5px; max-width: 100%; } .source-tags { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; } .source-tags .stag { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--chip); color: var(--muted); } .reset { margin-top: 12px; background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12.5px; padding: 0; } /* ---------- List ---------- */ .list-head { padding: 8px 16px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } .list-head select { font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; background: var(--bg); } #list { flex: 1; overflow-y: auto; overscroll-behavior: contain; } .filters { overscroll-behavior: contain; } .row { padding: 10px 16px; border-bottom: 1px solid var(--line); cursor: pointer; display: flex; gap: 10px; } .row:hover { background: var(--accent-soft); } .row .swatch { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .row .body { flex: 1; min-width: 0; } .row .name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; } .row .meta { color: var(--muted); font-size: 12px; margin-top: 1px; } .row .quick { display: flex; gap: 6px; margin-top: 6px; } .row .quick button { font-size: 11px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 3px 7px; cursor: pointer; color: var(--muted); } .row .quick button.on.fav { color: var(--fav); border-color: var(--fav); } .row .quick button.on.wish { color: var(--wish); border-color: var(--wish); } .row .quick button.on.been { color: var(--been); border-color: var(--been); } .stars { color: var(--accent); font-size: 12px; letter-spacing: -1px; } .grate { color: #a86b00; font-weight: 600; font-size: 12px; white-space: nowrap; } .grate small { color: var(--muted); font-weight: 400; } .price { color: var(--been); font-weight: 600; font-size: 12px; } .p-rating { margin: 2px 0 4px; font-size: 13px; } /* ---------- Marker + popup ---------- */ .pin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); } .pin.star, .pin.glyph { width: 0; height: 0; border-radius: 0; border: none; background: none !important; box-shadow: none; line-height: 1; /* White rim to match the dots' 2px border (8-way shadow: a real text-stroke eats into the glyph fill at this size), plus the drop shadow underneath. */ text-shadow: -1.5px 0 #fff, 1.5px 0 #fff, 0 -1.5px #fff, 0 1.5px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff, 0 2px 4px rgba(0,0,0,.45); } .pin.star { font-size: 19px; } .pin.glyph { font-size: 23px; } /* โ™ฅ has much less ink than โ˜… per em โ€” needs a big size lead to LOOK equal */ .pin.emoji { width: 0; height: 0; border-radius: 0; border: none; background: none !important; box-shadow: none; font-size: 15px; line-height: 1; } /* Bigger, easier-to-tap markers on touch screens (matches the JS iconSize bump). .pin.star/.glyph/.emoji keep width/height:0 via higher specificity; only the circle .pin grows, plus the glyph font sizes. */ @media (pointer: coarse) { .pin { width: 22px; height: 22px; } .pin.star { font-size: 27px; } .pin.glyph { font-size: 32px; } .pin.emoji { font-size: 21px; } } .michelin-badge { display: inline-block; background: var(--michelin); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 1px 5px; border-radius: 4px; vertical-align: middle; } .bib-badge { display: inline-block; background: #c8641e; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .3px; padding: 1px 5px; border-radius: 4px; vertical-align: middle; } /* Make the popup clearly belong to ONE dot: a bigger pointer aimed at the anchor, plus a pulsing ring drawn on the marker itself (see highlight()). */ .leaflet-popup-tip-container { width: 26px; height: 14px; margin-top: -1px; } .leaflet-popup-tip { width: 14px; height: 14px; padding: 1px; margin: -8px auto 0; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); } .leaflet-popup-content-wrapper { border: 1px solid var(--line); } .halo { animation: haloPulse 1.6s ease-out infinite; transform-origin: center; } @keyframes haloPulse { 0% { stroke-opacity: .95; stroke-width: 3; } 70% { stroke-opacity: .25; stroke-width: 7; } 100% { stroke-opacity: .95; stroke-width: 3; } } @media (prefers-reduced-motion: reduce) { .halo { animation: none; } } .p-hours { display: flex; align-items: center; gap: 8px; margin: 5px 0 2px; font-size: 12px; } .oh-dot { font-weight: 700; } .oh-dot.open { color: var(--totry); } .oh-dot.shut { color: var(--been); } .oh-times { color: var(--muted); } .popup h3 { margin: 0 0 2px; font-size: 15px; } .popup .p-meta { color: var(--muted); font-size: 12px; margin-bottom: 8px; } .popup .p-actions { display: flex; gap: 6px; margin: 8px 0; } .popup .p-actions button { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 5px; cursor: pointer; font-size: 12px; } .popup .p-actions button.on.fav { background: var(--fav); color:#3a2c00; border-color: var(--fav); } .popup .p-actions button.on.wish { background: var(--wish); color:#fff; border-color: var(--wish); } .popup .p-actions button.on.been { background: var(--been); color:#fff; border-color: var(--been); } .popup .p-links a { font-size: 12px; color: var(--accent); text-decoration: none; margin-right: 10px; } .popup .p-links a:hover { text-decoration: underline; } .popup .p-closed { color: var(--accent); font-weight: 700; font-size: 12px; margin: 4px 0; } .popup .p-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 2px; } .popup .p-tags .ptag { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; } .popup .p-desc { font-size: 12.5px; color: var(--ink); margin: 6px 0; line-height: 1.45; } .popup .p-ratings { display: flex; gap: 14px; margin: 6px 0; font-size: 12.5px; } .popup .p-ratings .r-val { font-weight: 700; } .popup .p-ratings .r-lab { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; display: block; } .popup .p-ratings .muted { color: var(--muted); font-weight: 400; } .popup .p-src { font-size: 11px; color: var(--muted); margin-top: 8px; } .popup .p-mentions { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; } .popup .p-mentions .m-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 3px; } .popup .p-mentions a { display: block; font-size: 12px; color: var(--accent); text-decoration: none; margin: 2px 0; } .popup .p-mentions a:hover { text-decoration: underline; } .popup .p-mentions .src-tag { color: var(--muted); font-size: 10.5px; } .popup { max-height: 60vh; overflow-y: auto; } /* ---------- Legend ---------- */ .legend { position: absolute; bottom: 14px; right: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow); z-index: 500; } .legend div { display: flex; align-items: center; gap: 6px; margin: 2px 0; } .legend .swatch { width: 11px; height: 11px; border-radius: 50%; } .empty { padding: 30px 16px; text-align: center; color: var(--muted); } .muted { color: var(--muted); font-weight: 400; font-size: 11px; } /* ---------- Auth ---------- */ .authbox { display: flex; align-items: center; gap: 10px; min-width: 0; } .authbox #authWho { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .authbox #signOut { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; cursor: pointer; color: var(--ink); } .authbox #signOut:hover { border-color: var(--accent); color: var(--accent); } #signIn { font-size: 12px; font-weight: 600; padding: 5px 12px; flex: 0 0 auto; border: 1px solid var(--accent); border-radius: 8px; cursor: pointer; background: var(--accent); color: #fff; } #signIn:hover { opacity: .88; } #loginGate { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: var(--bg); } .login-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px 40px; max-width: 380px; text-align: center; } .login-card h1 { font-size: 22px; margin: 0 0 8px; letter-spacing: -.3px; } .login-card h1 .dot { color: var(--accent); } .login-card p { color: var(--muted); margin: 0 0 22px; } .gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px; font-size: 14px; font-weight: 600; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; } .gbtn:hover { border-color: var(--accent); box-shadow: var(--shadow); } .login-err { color: var(--been); font-size: 12px; margin-top: 12px; min-height: 14px; } .gate-browse { display: block; width: 100%; margin-top: 12px; padding: 8px; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 12.5px; text-decoration: underline; } .gate-browse:hover { color: var(--accent); } /* ---------- Lists (shareable collections) ---------- */ .mylists { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .mylist-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); } .mylist-chip.on { border-color: var(--accent); color: var(--accent); font-weight: 600; } .mylist-chip .ml-n { color: var(--muted); font-size: 11px; } .mylist-chip .ml-share { color: var(--muted); padding: 0 2px; } .mylist-chip .ml-share:hover { color: var(--accent); } .mylist-chip .ml-del { padding: 0 2px; opacity: .4; } .mylist-chip .ml-del:hover { opacity: 1; } .mylist-new { padding: 4px 8px; font-size: 12px; cursor: pointer; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; background: none; } .mylist-new:hover { color: var(--accent); border-color: var(--accent); } .lp-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13.5px; } .lp-row .ml-n { margin-left: auto; color: var(--muted); font-size: 11.5px; } .lp-row .lp-del { background: none; border: none; cursor: pointer; opacity: .45; } .lp-row .lp-del:hover { opacity: 1; } .lp-new { display: flex; gap: 8px; margin-top: 12px; } .lp-new input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 13px; } #shareBanner { display: flex; align-items: center; gap: 8px; margin: 8px 12px 0; padding: 8px 10px; font-size: 12.5px; border: 1px solid var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); } #shareBanner[hidden] { display: none; } #shareBanner .sb-txt { flex: 1; min-width: 0; } #shareBanner .btn-primary { padding: 5px 10px; font-size: 12px; } #shareBanner #sbClose { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 14px; padding: 2px 4px; } /* ---------- Inheritance modal ---------- */ .inherit-link { display: block; width: 100%; margin-top: 8px; padding: 8px; border: 1px dashed var(--line); background: none; border-radius: 8px; color: var(--accent); cursor: pointer; font-size: 13px; } .inherit-link:hover { border-color: var(--accent); background: var(--accent-soft); } .modal { position: fixed; inset: 0; z-index: 3000; padding: 20px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); } .modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-width: 440px; padding: 26px 28px; max-height: 88vh; overflow: auto; } .modal-card h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.2px; } .modal-sub { color: var(--muted); margin: 0 0 16px; font-size: 13px; } .modal-group { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; margin: 16px 0 8px; } .modal-opt { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; cursor: pointer; } .modal-opt:hover { border-color: var(--accent); } .modal-opt > span:first-of-type { flex: 1; } .modal-count { color: var(--muted); font-size: 12px; } .modal-err { color: var(--been); font-size: 12px; min-height: 14px; margin-top: 10px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } .btn-ghost { padding: 8px 14px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; cursor: pointer; color: var(--ink); font-size: 13px; } .btn-ghost:hover { border-color: var(--accent); } .btn-primary { padding: 8px 16px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; } .btn-primary:disabled { opacity: .6; cursor: default; } /* ---------- Personal rating + notes (popup) ---------- */ .p-rate { display: flex; align-items: center; gap: 2px; margin: 8px 0 2px; } .p-rate .rstar { font-size: 20px; line-height: 1; cursor: pointer; color: #d8d2c9; transition: color .1s; user-select: none; } .p-rate .rstar.on { color: #e8a413; } /* Half star: gold left half, base-grey right half, clipped to the glyph. (Hover previews are painted by JS so they read cumulatively, 1..n.) */ .p-rate .rstar.half { background: linear-gradient(90deg, #e8a413 50%, #d8d2c9 50%); -webkit-background-clip: text; background-clip: text; color: transparent; } .p-rate .rate-lab { font-size: 11px; color: var(--muted); margin-left: 6px; } .p-notes { width: 100%; margin: 6px 0 2px; padding: 7px 9px; font: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; min-height: 34px; max-height: 120px; background: var(--chip); color: var(--ink); } .p-notes:focus { outline: none; border-color: var(--accent); } .myrate { color: #e8a413; font-size: 12px; font-weight: 700; } .notedot { font-size: 11px; cursor: default; } /* Price chips: single wrapping row, no tall scroll box */ .chips-row { max-height: none; display: flex; flex-wrap: wrap; gap: 4px; } /* Mood presets: one-tap views */ .preset-row { display: flex; flex-wrap: wrap; gap: 5px; } .preset-row .chip.preset { font-size: 12px; padding: 5px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; user-select: none; white-space: nowrap; } .preset-row .chip.preset:hover { border-color: var(--accent); } .preset-row .chip.preset.on { background: var(--accent); color: #fff; border-color: var(--accent); } .open-when { display: flex; gap: 5px; margin-top: 5px; } .open-when select { flex: 1; min-width: 0; padding: 6px 8px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); } /* "Near" (distance) filter */ .near-row { display: flex; gap: 5px; } .near-row button { flex: 1; padding: 6px 8px; font-size: 12px; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); white-space: nowrap; } .near-row button:hover { border-color: var(--accent); color: var(--accent); } .near-row button.on { background: var(--accent); color: #fff; border-color: var(--accent); } .near-select { width: 100%; margin-top: 5px; padding: 6px 8px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); } /* Rank badge on the Sought-after leaderboard */ .rank { display: inline-block; min-width: 20px; text-align: center; margin-right: 4px; background: var(--accent-soft); color: var(--accent); border-radius: 6px; font-size: 10.5px; font-weight: 800; padding: 1px 4px; vertical-align: 1px; } /* Empty state reset */ .empty-reset { margin-top: 10px; padding: 7px 14px; border: 1px solid var(--accent); background: var(--panel); color: var(--accent); border-radius: 8px; cursor: pointer; font-size: 13px; } .empty-reset:hover { background: var(--accent-soft); } /* Near-me map button */ .leaflet-bar a.nearme { font-size: 15px; line-height: 26px; } /* Header theme toggle */ #themeToggle, #hdrDiscover { font-size: 15px; line-height: 1; padding: 5px 9px; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; } #hdrDiscover { font-size: 13px; font-weight: 600; white-space: nowrap; } #themeToggle:hover, #hdrDiscover:hover { border-color: var(--accent); } /* Header Discover launcher (desktop; mobile uses the bottom tab instead) */ #hdrDiscover { font-size: 13px; font-weight: 700; line-height: 1; padding: 7px 12px; cursor: pointer; white-space: nowrap; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; } #hdrDiscover:hover { border-color: var(--accent); color: var(--accent); } /* Popup "why it's hot" line */ .p-buzz { font-size: 12px; color: var(--accent); font-weight: 600; margin: 4px 0 2px; } .book-times .to-sep { font-size: 11px; color: var(--muted); } .bk-slots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .bk-slots .slot { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); text-decoration: none; } .bk-checking { margin-top: 4px; } /* Quick-jump palette (โŒ˜K) */ .modal.qk { align-items: flex-start; padding-top: 12vh; } .qk-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); width: 100%; max-width: 520px; overflow: hidden; } .qk-input { width: 100%; border: none; outline: none; padding: 15px 18px; font-size: 16px; background: var(--panel); color: var(--ink); border-bottom: 1px solid var(--line); } .qk-results { max-height: 46vh; overflow-y: auto; } .qk-row { display: flex; flex-direction: column; gap: 1px; padding: 9px 18px; cursor: pointer; } .qk-row b { font-size: 14px; } .qk-row span { font-size: 12px; color: var(--muted); } .qk-row.sel, .qk-row:hover { background: var(--accent-soft); } .qk-none { padding: 14px 18px; color: var(--muted); font-size: 13px; } .qk-hint { padding: 7px 18px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); } /* Open/closed badge on list rows */ .ob { font-weight: 700; font-size: 11px; margin-right: 6px; white-space: nowrap; } .ob.open { color: #2e7d5b; } .ob.soon { color: #d97706; } .ob.shut { color: var(--muted); font-weight: 600; } /* Quick bar above the list: always-available search + one-tap "Now nearby" (essential once the filter column is hidden) */ #quickbar { display: flex; gap: 8px; padding: 10px 12px 4px; align-items: center; } #quickbar input { flex: 1; min-width: 0; padding: 9px 12px; font-size: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); } #quickbar input:focus { outline: none; border-color: var(--accent); } #qNear { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--panel); color: var(--ink); white-space: nowrap; } #qNear.on { background: var(--accent); border-color: var(--accent); color: #fff; } /* Active-filter chips above the list: why the list is short, at a glance */ #activeChips { display: none; flex-wrap: wrap; gap: 6px; padding: 6px 14px 2px; align-items: center; } .achip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; cursor: pointer; user-select: none; background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; } .achip b { font-weight: 700; opacity: .65; } .achip:hover { border-color: var(--accent); } .achip.aclear { background: none; border: 1px solid var(--line); color: var(--muted); } /* Drawer "Show N places" button (phones only โ€” see the media query) */ .filter-done { display: none; } /* Infinite-scroll sentinel */ .list-sentinel { padding: 14px; text-align: center; font-size: 12px; color: var(--muted); } /* One-time iOS "Add to Home Screen" hint */ #a2hs { position: fixed; left: 10px; right: 10px; z-index: 1250; bottom: calc(56px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 12.5px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); } #a2hs span { flex: 1; } #a2hs button { border: none; background: none; color: inherit; opacity: .7; font-size: 14px; padding: 4px 6px; cursor: pointer; } /* Mobile bottom sheet โ€” the phone's detail card (replaces the map popup) */ #sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; background: var(--panel); border-radius: 16px 16px 0 0; border: 1px solid var(--line); border-bottom: none; box-shadow: 0 -8px 30px rgba(0, 0, 0, .28); transform: translateY(105%); transition: transform .25s ease; max-height: 62vh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); } #sheet.show { transform: translateY(0); } .sheet-grab { flex: 0 0 auto; display: flex; justify-content: center; padding: 10px 0 6px; } .sheet-grab span { width: 42px; height: 4px; border-radius: 2px; background: var(--line); } .sheet-x { position: absolute; top: 6px; right: 8px; z-index: 1; border: none; background: none; font-size: 16px; color: var(--muted); padding: 8px 10px; cursor: pointer; } .sheet-body { overflow-y: auto; padding: 0 16px 16px; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .sheet-body .p-actions button { padding: 9px 6px; font-size: 13px; } /* Prominent walking-directions link in the detail card */ .popup .p-links a.p-dir { display: inline-block; padding: 6px 12px; margin: 2px 8px 2px 0; background: var(--accent); color: #fff !important; border-radius: 8px; font-weight: 700; } .popup .p-links a.p-dir:hover { text-decoration: none; opacity: .92; } /* Filter toggle: drawer on mobile, show/hide the filter column on desktop */ #navToggle { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; padding: 5px 11px; margin-right: 2px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; } #navToggle:hover { border-color: var(--accent); color: var(--accent); } #navToggle { position: relative; } #navToggle[data-n]:not([data-n=""])::after { content: attr(data-n); position: absolute; top: -6px; right: -7px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 9px; } #mobiletabs { display: none; } /* mobile only โ€” see the media query */ #backdrop { display: none; position: absolute; inset: 0; z-index: 900; background: rgba(0, 0, 0, .35); } @media (max-width: 780px) { /* Header must fit the screen exactly โ€” body is overflow:hidden, so anything wider gets clipped (which is what cut off the account email). Give the account block the leftover space and let it truncate, drop the transient save-state, and respect the notch/rounded-corner insets. */ header { gap: 8px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); flex-wrap: nowrap; } header h1 { font-size: 15px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stats { display: none; } /* reclaim header space on phones */ .save-state { display: none; } /* transient; the app still autosaves */ #hdrDiscover { display: none; } /* Discover lives in the bottom tabs */ #navToggle { display: inline-flex; flex: 0 0 auto; } #themeToggle { flex: 0 0 auto; } .authbox { margin-left: auto; flex: 0 1 auto; gap: 6px; } body.guest #signIn { margin-left: auto; } /* guest: no authbox to push right */ .authbox #authWho { max-width: 34vw; font-size: 11.5px; } .authbox #signOut { flex: 0 0 auto; padding: 4px 8px; font-size: 11.5px; } /* Mobile is a two-view app: a full-screen LIST or a full-screen MAP, chosen by the bottom tab bar. The โ˜ฐ button opens the filters as an overlay on top of either view. #sidebar is only a positioning shell here โ€” its children are placed independently so filters can float above the map. */ main { position: relative; } #map { position: absolute; inset: 0; width: 100%; height: auto; z-index: 0; } #wresizer, #fresizer { display: none; } #sidebar { position: absolute; inset: 0; width: auto !important; height: auto !important; min-width: 0; border-right: none; background: none; display: block !important; pointer-events: none; /* children opt back in */ } /* Filters: slide-in overlay above both views. */ .filters { position: absolute; top: 0; left: 0; bottom: 0; z-index: 1100; width: min(88%, 360px); height: auto !important; max-height: none !important; padding-bottom: calc(76px + env(safe-area-inset-bottom)); /* clear the tab bar */ background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateX(-100%); transition: transform .25s ease; pointer-events: auto; box-shadow: var(--shadow); } .filters.open { transform: translateX(0); } /* List view: full-screen pane over the map. */ #listpane { position: absolute; inset: 0; z-index: 1000; background: var(--panel); display: none; pointer-events: auto; flex-direction: column; padding-bottom: 52px; /* clear the tab bar */ } body[data-view="list"] #listpane { display: flex; } #list { flex: 1; overflow-y: auto; overscroll-behavior: contain; } #quickbar { display: flex; gap: 8px; padding: 10px 12px 4px; align-items: center; } /* Sticky apply button pinned to the bottom of the filter drawer */ .filter-done { display: block; position: sticky; bottom: 0; width: 100%; margin-top: 10px; padding: 13px; background: var(--accent); color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 -6px 14px rgba(0, 0, 0, .12); } #backdrop.show { display: block; z-index: 1050; } /* Bottom tab bar: List / Map */ #mobiletabs { display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1200; background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } /* Quickbar docked just above the tabs: search + Now-nearby reachable from every view (initMobileNav moves the node; body.qbdock flags it). */ body.qbdock #quickbar { position: absolute; left: 0; right: 0; z-index: 1200; bottom: calc(42px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); padding: 8px 12px; margin: 0; } body.qbdock #listpane { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } body.qbdock #map .leaflet-bottom { bottom: calc(100px + env(safe-area-inset-bottom)); } body.qbdock #map .legend { bottom: calc(106px + env(safe-area-inset-bottom)); } body.qbdock.fopen #quickbar { display: none; } #mobiletabs button { flex: 1; padding: 11px 8px; font-size: 13px; font-weight: 600; background: none; border: none; color: var(--muted); cursor: pointer; } #mobiletabs button.on { color: var(--accent); } .login-card { margin: 0 20px; padding: 30px 26px; } } /* ---------- Discover deck (swipe through articles / restaurants) ---------- */ /* Above all app chrome (sidebar 1100, tabs 1200, sheet 1300) but below the login gate (2000) and modals (3000). */ #deck { position: fixed; inset: 0; z-index: 1500; display: flex; flex-direction: column; background: rgba(24, 22, 20, .58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } #deck[hidden] { display: none; } body.deck-open { overflow: hidden; } .deck-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; padding-top: calc(12px + env(safe-area-inset-top)); } .deck-top button { background: rgba(255,255,255,.16); color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; } #deckProg { flex: 1; text-align: center; color: #fff; opacity: .85; font-size: 13px; } #deckStage { position: relative; flex: 1; margin: 6px auto; width: min(92vw, 430px); } .dcard { position: absolute; inset: 0; margin: auto; max-height: 580px; background: var(--panel); color: var(--ink); border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.35); padding: 18px; display: flex; flex-direction: column; gap: 8px; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; } .dcard.under { transform: scale(.955) translateY(10px); filter: brightness(.97); pointer-events: none; } .dc-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; } .dc-src { background: var(--accent-soft); color: var(--accent); font-weight: 700; padding: 2px 8px; border-radius: 999px; } .dc-cat { background: var(--chip); color: var(--muted); padding: 2px 8px; border-radius: 999px; } .dc-new { background: #2e7d5b; color: #fff; font-weight: 700; padding: 2px 7px; border-radius: 999px; letter-spacing: .5px; } .dc-date { color: var(--muted); margin-left: auto; } .dc-title { font-size: 20px; font-weight: 750; line-height: 1.25; } .dc-meta { font-size: 13px; color: var(--muted); } .dc-list { margin-top: 4px; overflow: hidden; } .dc-row { font-size: 13.5px; padding: 5px 0; border-top: 1px solid var(--line); } .dc-row:first-child { border-top: 0; } .dc-desc { font-size: 13.5px; line-height: 1.45; overflow-y: auto; } .dc-flags { margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); } .dfx { background: var(--chip); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; } .dfx.on { background: var(--accent); border-color: var(--accent); color: #fff; } .dc-rate { margin-left: auto; } .dc-done { justify-content: center; text-align: center; gap: 14px; max-height: 300px; } .dc-done .dfx { margin: 0 auto; } .dc-stamp { position: absolute; top: 22px; font-size: 25px; font-weight: 800; letter-spacing: 2px; padding: 4px 12px; border: 3px solid; border-radius: 10px; opacity: 0; pointer-events: none; background: rgba(255,255,255,.75); } .st-l { right: 18px; color: #b8412f; border-color: #b8412f; transform: rotate(12deg); } .st-r { left: 18px; color: #2e7d5b; border-color: #2e7d5b; transform: rotate(-12deg); } .st-u { left: 0; right: 0; margin: auto; width: max-content; top: auto; bottom: 26px; color: #1a73e8; border-color: #1a73e8; } .st-d { left: 0; right: 0; margin: auto; width: max-content; top: auto; bottom: 26px; color: #c0392b; border-color: #c0392b; } /* Double-tap / F / โ™ฅ-button favorite: centered heart pulse on the card */ .dc-heart { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; font-size: 84px; line-height: 1; color: var(--fav); opacity: 0; pointer-events: none; } .dc-heart.pop { animation: heartpop .6s ease; } @keyframes heartpop { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .95; transform: scale(1.15); } 70% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } /* Post-"been" rating prompt (after โ†“ swipe / โ™ฅ): one-tap stars, then it's gone */ #deckRate { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 1600; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--panel); color: var(--ink); border-radius: 16px; box-shadow: var(--shadow); padding: 14px 18px; max-width: min(92vw, 340px); text-align: center; } #deckRate .dr-title { font-size: 13.5px; font-weight: 700; } #deckRate .rstar { font-size: 32px; } #deckRate .dr-skip { border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 999px; padding: 5px 14px; cursor: pointer; font-size: 12px; } @media (pointer: coarse) { .dc-rate .rstar { font-size: 26px; } /* deck stars need finger-sized targets */ #deckRate .rstar { font-size: 38px; } } .deck-actions { display: flex; justify-content: center; gap: 14px; padding: 12px; } .da { border: 0; border-radius: 999px; padding: 12px 20px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); background: var(--panel); color: var(--ink); } .da-yes { background: #2e7d5b; color: #fff; } .da-no { color: #b8412f; } .deck-hint { text-align: center; color: #fff; opacity: .7; font-size: 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); } /* The JS hint line already lists the keys per mode; just add the universal one. */ @media (hover: hover) and (pointer: fine) { .deck-hint::after { content: " ยท Esc close"; } } #deckToast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom)); background: #1d1b19; color: #fff; padding: 10px 16px; border-radius: 999px; z-index: 1600; font-size: 13.5px; box-shadow: var(--shadow); } #deckToast[hidden] { display: none; } #introBanner { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 1400; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 10px 12px; display: flex; gap: 10px; align-items: center; width: max-content; max-width: 92vw; font-size: 13.5px; } #introBanner button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--line); background: var(--chip); padding: 6px 10px; } #introBanner #introGo { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; } #introBanner #introNo { background: none; border: 0; color: var(--muted); } /* Desktop: the phone-sized card reads tiny on a big screen โ€” scale it up. */ @media (min-width: 781px) { #deckStage { width: min(90vw, 560px); } .dcard { max-height: 700px; padding: 24px; gap: 10px; } .dc-title { font-size: 26px; } .dc-meta, .dc-row, .dc-desc { font-size: 15px; } .dc-head { font-size: 13px; } .dc-row { padding: 7px 0; } .da { font-size: 15px; padding: 14px 26px; } .deck-hint { font-size: 13px; } } /* City switcher (hidden while the registry has a single city) */ #citySel { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; } #citySel[hidden] { display: none; } /* ---------- Personal map: My map / Explore ---------- */ .view-seg { padding: 10px 12px 0; display: flex; } .view-seg button { flex: 1; font-weight: 600; } /* Library pins (Explore view): places not on your map yet */ .pin-lib { width: 100%; height: 100%; border-radius: 50%; background: #b9b2a7; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); opacity: .85; } :root[data-theme="dark"] .pin-lib { background: #6d675e; border-color: #211d18; } .p-addmap { width: 100%; margin: 8px 0 2px; padding: 9px 12px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; } .p-addmap:disabled { opacity: .75; cursor: default; } .p-unmap { flex: 0 0 auto !important; color: var(--muted); } /* Discover: article-type filter chips */ .deck-cats { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 0 14px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .deck-cats::-webkit-scrollbar { display: none; } .deck-cats .chip { flex: 0 0 auto; cursor: pointer; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid #d5d0c8; background: #fff; color: #444; user-select: none; } .deck-cats .chip.on { background: #1d1d1f; color: #fff; border-color: #1d1d1f; } .deck-cats .chip .n { opacity: .55; margin-left: 4px; } /* Article write-up excerpts under "Featured in" */ .m-row { display: flex; align-items: baseline; gap: 6px; } .m-row a { flex: 1; min-width: 0; } .m-row .m-x { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: #9a9186; font-size: 12px; line-height: 1; padding: 3px 6px; border-radius: 6px; } .m-row .m-x:hover { color: #1d1d1f; background: #f1ece4; } .m-blurb { font-size: 12.5px; line-height: 1.45; color: #555; font-style: italic; margin: 2px 0 8px 6px; padding-left: 8px; border-left: 2px solid #e4ddd3; }