/* Self-hosted fonts (was Google Fonts CDN) */ @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/hanken-grotesk-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/hanken-grotesk-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/hanken-grotesk-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/hanken-grotesk-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/hanken-grotesk-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/hanken-grotesk-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/hanken-grotesk-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/hanken-grotesk-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/space-grotesk-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/space-grotesk-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/space-grotesk-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/space-grotesk-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-grotesk-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-grotesk-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} :root{ --ink:#15171c; /* near-black scoreboard ink */ --ink-2:#3a3f4a; --muted:#6b7280; --muted-2:#9aa0ab; --paper:#ffffff; --paper-2:#f3f4f1; /* cool off-white board */ --card:#ffffff; --line:#e5e6e2; --line-strong:#cfd0cb; --gold:#f0a500; /* deal accent */ --gold-text:#8a5f00; /* gold as text on paper: 5.65:1 (WCAG text 4.5) */ --gold-mark:#b87d00; /* gold stars and marks on paper: 3.52:1 (non-text 3) */ --gold-bg:#fcefcf; --gold-ink:#241a00; /* text on gold */ --check-ok:#0a6b3a; /* AA-safe green for the price-check view */ --cheap:#0b8f4d; --cheap-bg:#e2f5ea; --mid:#9a6b00; --mid-bg:#fbf1d8; --dear:#b4341f; --dear-bg:#fad9d3; --na:#b7bcc4; --disp:"Space Grotesk",ui-sans-serif,system-ui,sans-serif; --body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --r:7px; --shadow:0 1px 2px rgba(21,23,28,.04),0 10px 30px -18px rgba(21,23,28,.30); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;font-family:var(--body);color:var(--ink);background:var(--paper); line-height:1.5;-webkit-font-smoothing:antialiased; overflow-x:clip; /* hard stop: never let stray content cause sideways scroll */ } a{color:var(--ink);text-decoration:none} a:hover{color:#000} .wrap{max-width:1120px;margin:0 auto;padding:0 22px} .mono,.num{font-variant-numeric:tabular-nums} /* ---- hard black top bar ---- */ header.topbar{background:var(--ink);color:#fff;position:sticky;top:0;z-index:2000} header.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:58px} .logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff} .logo .logo-mark{width:24px;height:24px;color:var(--gold)} .logo .logo-text{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.06em;text-transform:uppercase} .logo .logo-text em{font-style:normal;color:#fff;font-weight:700} .logo:hover,.logo:hover .logo-text{color:#fff} .logo:hover .logo-text em{color:#fff} header.topbar nav{display:flex;align-items:center;gap:4px} header.topbar nav a{color:#cdd0d6;font-size:14px;font-weight:500;padding:8px 12px;border-radius:var(--r);white-space:nowrap} header.topbar nav a:hover{color:#fff;background:rgba(255,255,255,.08)} header.topbar nav a[href$="submit.html"]{background:#fff;color:var(--ink);font-weight:700;margin-left:6px;white-space:nowrap} header.topbar nav a[href$="submit.html"]:hover{background:var(--gold);color:var(--gold-ink)} /* "Plan a crawl" collapses to "Crawl" on narrow screens (see mobile block). */ header.topbar nav a.nav-crawl .nav-short{display:none} header.topbar nav a.nav-best .nav-short{display:none} /* Instagram social link — icon-only, inherits the nav's grey→white treatment. */ header.topbar nav a.nav-ig{display:inline-flex;align-items:center;padding:8px 10px} header.topbar nav a.nav-ig .ig-mark{width:20px;height:20px;display:block} main{padding:0 0 40px} /* ---- hero ---- */ .hero{padding:54px 0 26px} .hero .kicker{font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px} .hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(36px,5.4vw,60px);line-height:1.0;letter-spacing:-0.02em;margin:0 0 16px;max-width:18ch} .hero h1 em{font-style:normal;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:5px;text-underline-offset:6px;color:var(--ink)} .hero .lead{font-size:18px;color:var(--ink-2);max-width:62ch;margin:0} .hero .lead strong{color:var(--ink);font-weight:700} .city-switch{font-weight:600;white-space:nowrap} .city-switch:hover{color:var(--gold)} /* ---- "best value right now" board ---- */ .hero-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:38px;align-items:start} .board{background:var(--ink);border-radius:12px;padding:20px 22px;color:#fff} .board .bh{font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:0 0 12px;display:flex;justify-content:space-between} .brow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12)} .brow:first-of-type{border-top:0} .brow .it{font-size:14px;color:#cdd0d6} .brow .it b{display:block;color:#fff;font-weight:600;font-size:13px} .brow .it span{font-size:12px;color:#8b919c} /* Each board row links to the venue holding that cheapest price (the app does the same from its summary card). The whole row is the target so it is easy to hit on a phone; the faint underline on the venue name is the at-rest hint that it goes somewhere, since hover does not exist on touch. */ a.brow{text-decoration:none;color:inherit} a.brow .it span{text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);text-underline-offset:2px} a.brow:hover .it span,a.brow:focus-visible .it span{color:var(--gold);text-decoration-color:var(--gold)} a.brow:hover .pr,a.brow:focus-visible .pr{color:#ffc247} a.brow:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px} .brow .pr{font-family:var(--disp);font-weight:700;font-size:28px;letter-spacing:-0.02em;color:var(--gold);white-space:nowrap} .board .bh2{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)} .board .vsm{color:#8b919c;text-transform:none;letter-spacing:0;font-weight:500} .arow{display:flex;align-items:baseline;gap:10px;padding:7px 0} .arow .al{flex:1;font-size:14px;color:#cdd0d6} .arow .av{font-family:var(--disp);font-weight:700;font-size:18px;color:#fff;letter-spacing:-0.01em} .arow-count{border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:5px;padding-bottom:10px} .arow-count .av{color:var(--gold)} .trend{font-family:var(--disp);font-weight:700;font-size:13px;min-width:64px;text-align:right} .trend.up{color:#ff8a7a} .trend.down{color:#7ee0a0} .trend.flat,.trend.none{color:#8b919c;font-weight:500} .lm{font-family:var(--body);font-weight:600;font-size:12.5px;margin-left:8px;white-space:nowrap} .lm.up{color:var(--dear)} .lm.down{color:var(--cheap)} .lm.flat{color:var(--muted);font-weight:500} .lm .lm-was{color:var(--muted);font-weight:500} /* ---- state-by-state comparison (board-style, matches city-page board) ---- */ .compare-section{margin:34px 0 10px} .compare-section .sub{color:var(--muted);font-size:14px;margin:0 0 16px} .compare-section .sub .legend{font-family:var(--disp);font-weight:700;display:inline-block;margin:0 2px} .compare-section .sub .legend.up{color:var(--dear)} .compare-section .sub .legend.down{color:var(--cheap)} .compare-board{background:var(--ink);color:#fff;border-radius:12px;padding:22px 22px;margin:14px 0 0} .compare-board.cb-stacked{margin-top:14px} .compare-board .bh{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);display:flex;justify-content:space-between;margin:0 0 14px} .compare-board .cb-table{width:100%;border-collapse:collapse;background:transparent} .compare-board .cb-table th,.compare-board .cb-table td{padding:12px 10px;text-align:left;font-size:14px;border:0} .compare-board .cb-table thead th{color:var(--muted-2);font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.16)} .compare-board .cb-table tbody td{border-bottom:1px solid rgba(255,255,255,.10)} .compare-board .cb-table tbody tr:last-child td{border-bottom:0} .compare-board .cb-table tbody tr:hover{background:rgba(255,255,255,.04)} .compare-board .cb-table th.num,.compare-board .cb-table td.num{text-align:left;font-variant-numeric:tabular-nums} .compare-board .cb-table td.cmp-city{font-weight:600;color:#fff;white-space:nowrap} .compare-board .cb-table td.cmp-city a{color:#fff;text-decoration:none} .compare-board .cb-table td.cmp-city a:hover{color:var(--gold)} .compare-board .cb-table td.cmp-city .muted{color:#8b919c;font-weight:500;font-size:12px;margin-left:4px;text-transform:uppercase;letter-spacing:.04em} .cmp-abbr{display:none} .compare-board .cb-table .cmp-price{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--gold);letter-spacing:-0.01em} /* Highlight the cheapest price in each column on the city-averages board. Rounded gold pill so the eye lands on it before reading any numbers. */ .compare-board .cb-table .cmp-price.cheapest{ display:inline-block; padding:3px 9px; background:var(--gold); color:var(--gold-ink); border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.25); } .compare-board .cb-table .trend{font-family:var(--disp);font-weight:700;font-size:12px;margin-left:6px;text-align:left} .compare-board .cb-table .trend.up{color:#ff8a7a} .compare-board .cb-table .trend.down{color:#7ee0a0} .compare-board .cb-table .trend.flat{color:#8b919c;font-weight:500} .compare-board .cb-table td.beer-cmp{vertical-align:middle;text-align:left} .compare-board .cb-table td.beer-cmp .cmp-beername{display:block;font-family:var(--body);font-weight:500;font-size:12.5px;color:#cdd0d6;margin-bottom:2px;text-align:left} .compare-board .cb-table td.beer-cmp .submit-link{color:var(--gold);text-decoration:underline;text-decoration-color:var(--gold);font-weight:600} .compare-board .cb-table td.num.na{color:#6b7280} /* Desktop = ONE board; Mobile = TWO stacked boards (food + state beer) */ .cmp-mobile{display:none !important} @media (max-width:720px){ .cmp-desktop{display:none !important} .cmp-mobile{display:block !important} .cmp-full{display:none} .cmp-abbr{display:inline} .compare-section h2{font-size:22px} .compare-board{padding:18px 12px} .compare-board .cb-table th,.compare-board .cb-table td{padding:11px 5px;font-size:13.5px} .compare-board .cb-table .cmp-price{font-size:15.5px} /* Pill: shrink padding so the rightmost-column highlight (Chips on the food board) doesn't push past the table edge on narrow phones. */ .compare-board .cb-table .cmp-price.cheapest{padding:2px 6px;border-radius:5px;font-size:14.5px} .compare-board .cb-table .trend{font-size:11px;display:block;white-space:nowrap;margin:2px 0 0} /* Left-align price + trend so the arrow/amount (and "steady") line up under the price at the cell's left edge, instead of centring at a different offset than the wider price above. */ .compare-board .cb-table td.num{text-align:left} /* Left-align the whole board (headers, food + beer cells) so every column's content — price, trend, beer name — shares one left edge under its header. */ .compare-board .cb-table td.beer-cmp, .compare-board .cb-table th.num{text-align:left} .compare-board .cb-table td.beer-cmp .cmp-beername{text-align:left} } /* ---- trends insight strip ---- */ .insights{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:8px 0 30px} .ins{background:var(--card);padding:18px 20px;display:flex;flex-direction:column;gap:4px} .ins-n{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:-0.02em;color:var(--ink)} .ins-t{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:-0.02em} .ins-t.up{color:var(--dear)} .ins-t.down{color:var(--cheap)} .ins-l{font-size:13.5px;color:var(--muted)} @media (max-width:720px){.insights{grid-template-columns:1fr}} /* beer columns are extra width — hide below desktop to avoid table overflow */ @media (max-width:960px){table.prices th.beer-col,table.prices td.beer-col{display:none}} .steady-note{border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:14px 18px;margin:8px 0 30px;font-size:14.5px;color:var(--ink-2);background:var(--paper-2)} .steady-note strong{color:var(--ink);font-weight:700} /* ---- buttons ---- */ .button,.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:700;font-size:15px;padding:12px 20px;border-radius:var(--r);cursor:pointer;border:2px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none} .button:hover,.btn:hover{background:#000;color:#fff} .btn-out{background:transparent;color:var(--ink)} .btn-out:hover{background:var(--paper-2);color:var(--ink)} /* ---- map card ---- */ .map-card{background:var(--card);border:0;border-radius:12px;overflow:hidden;margin:26px 0 34px} .map-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--paper-2)} .map-tool{display:flex;align-items:center;gap:10px} .map-tool label{font-size:13px;color:var(--muted);font-weight:600} .map-tool select,.map-tool .combo-input{font:inherit;font-weight:600;font-size:14.5px;padding:8px 13px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:#fff;color:var(--ink);cursor:pointer} .map-tool select:hover,.map-tool .combo-input:hover,.map-tool .combo-input:focus{border-color:var(--ink);outline:none} .map-tool .pw-combo .combo-input{width:210px} /* the list must paint above the Leaflet panes/controls (z-index up to 1000) */ .map-tool .pw-combo .combo-list{z-index:1200} .find-me{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:600;font-size:14px;padding:8px 13px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:#fff;color:var(--ink);cursor:pointer;line-height:1;white-space:nowrap} .find-me:hover:not(:disabled){border-color:var(--ink);background:var(--paper-2)} .find-me:disabled{opacity:.6;cursor:wait} .find-me .find-pin{color:var(--gold-mark)} .find-msg{font-size:12.5px;color:var(--muted);min-width:0} /* Nothing to say means no element at all, so an empty status never spends a toolbar gap or a whole row on itself. */ .find-msg:empty{display:none} .map-tool-find{flex:0 0 auto} .map-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;line-height:1;margin-left:auto} .map-legend .leg-label{font-family:var(--disp);font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em} .map-legend .leg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);font-weight:500} .map-legend .leg i{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:3px;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:0 0 auto} .map-legend .leg-star-svg{width:12px;height:12px;display:block} .leg-cheap i{background:var(--cheap)} .leg-mid i{background:var(--mid)} .leg-dear i{background:var(--dear)} .leg-na i{background:var(--na)} .leg-best i{background:var(--gold)} #map{height:480px;width:100%;background:#e9eae5} /* Map placeholder. Sits above every Leaflet pane INCLUDING the controls, so the ground and the price pins arrive together instead of pins floating on grey. pointer-events:none keeps the map draggable underneath regardless. Its own flat grey palette rather than the page tokens: these tones only have to separate from each other, and --line and --paper-2 sit too close together to tell coastline from sea. */ .map-shell{position:relative} .map-skel{position:absolute;inset:0;z-index:1200;pointer-events:none; overflow:hidden;background:#eef0ed} .map-skel svg{display:block;width:100%;height:100%} .map-skel .au-land{fill:#dcdfd9} .map-skel .au-card{fill:#c9ccc6} /* A band of lighter grey travelling left to right across the silhouette. 2200ms is not a taste call. Ding & Kyung, Journal of Consumer Research 53(1) 2026, measured animation speed against PERCEIVED wait across six experiments and found a U-shape rather than "faster feels faster": both fast (400-500ms) and slow (10s) cycles made the same wait feel LONGER than a moderate 2000-2500ms one, because a fast sweep blurs into noise and a slow one stops holding attention. 1700ms sat just under that band. It also lands beside what shipped systems use (MUI 2000ms, Ant 1400ms). linear, not ease-in-out: a shimmer reads as a constant-speed glint of light, and easing an infinitely repeating sweep whips it through the middle and decelerates at each loop boundary, which reads as a stutter. MUI and Polaris both ship linear for the same reason. */ .map-skel::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%; background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0)); animation:pw-sweep 2200ms linear infinite} @keyframes pw-sweep{from{transform:translateX(-120%)}to{transform:translateX(370%)}} .map-skel.is-done{opacity:0;transition:opacity .3s ease-out} .map-skel.is-done::after{animation:none} @media (prefers-reduced-motion:reduce){ .map-skel::after{animation:none;opacity:.3;transform:translateX(150%)} } .map-foot{padding:10px 16px;border-top:1px solid var(--line);margin:0;background:var(--paper-2)} /* ---- map pins ---- */ /* "Not Sold": the item stays on the page, so the cell has to read as an answer rather than as a price that failed to load. */ .venue-prices td.price-none{color:var(--muted);font-weight:600} .venue-prices td.price-none .sold-again{display:block;font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:0;margin-top:3px;white-space:normal} .price-pin{background:transparent !important;border:none !important} .price-pin .pin{display:inline-block;font-family:var(--disp);font-weight:700;font-size:12px;line-height:1;padding:6px 8px;border-radius:6px;border:1.5px solid #fff;color:#fff;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.25)} .price-pin .pin-cheap{background:var(--cheap)} .price-pin .pin-mid{background:var(--mid)} .price-pin .pin-dear{background:var(--dear)} .price-pin .pin-na{background:var(--na);width:14px;height:14px;padding:0;border-radius:50%;font-size:0;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.1)} .price-pin-best{z-index:1000 !important} .price-pin .pin-best{font-size:13px;padding:7px 10px;background:var(--gold);color:var(--gold-ink);border:2px solid #fff;box-shadow:0 0 0 2px var(--gold),0 4px 10px rgba(0,0,0,.3)} .price-pin .pin-best .best-star{display:inline-block;margin-right:4px;color:var(--gold-ink);font-size:12px} .price-pin .pin-hh{background:var(--gold);color:var(--gold-ink);border:2px solid #fff;letter-spacing:.03em;box-shadow:0 0 0 2px var(--gold),0 4px 10px rgba(0,0,0,.3)} .foot-link{color:var(--ink);text-decoration:none;font-weight:700;border-bottom:2px solid var(--gold)} .foot-link:hover{color:#000} /* ---- filters ---- */ .filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px} .filters input:not([type="checkbox"]),.filters select,.filters .combo-input,.filters button{font:inherit;font-size:14.5px;padding:11px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:#fff;color:var(--ink)} .filters input:not([type="checkbox"]){flex:1;min-width:220px} .filters input:focus,.filters select:focus,.filters .combo-input:focus{outline:none;border-color:var(--ink)} .filters button{cursor:pointer;font-weight:700;background:var(--paper-2)} .filters button:hover{background:#fff;border-color:var(--ink)} .filter-toggle{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;padding:0 4px;white-space:nowrap} .filter-toggle input{width:16px;height:16px;flex:0 0 16px;accent-color:var(--gold);cursor:pointer;margin:0} /* "Today's specials" view: hide regular price/spec cells, show the today cell */ .today-cell{display:none} table.prices.today-mode th.orig-cell,table.prices.today-mode td.orig-cell{display:none} table.prices.today-mode th.today-cell,table.prices.today-mode td.today-cell{display:table-cell} /* Beer mode: the Food/Beer segmented toggle swaps the visible columns. */ table.prices th.beer-col,table.prices td.beer-col{display:none} table.prices.beer-mode th.orig-cell,table.prices.beer-mode td.orig-cell{display:none} table.prices.beer-mode th.beer-col,table.prices.beer-mode td.beer-col{display:table-cell} /* Drinks mode (wine + spritz): same hide/show pattern as beer-mode. */ table.prices th.drinks-col,table.prices td.drinks-col{display:none} table.prices.drinks-mode th.orig-cell,table.prices.drinks-mode td.orig-cell{display:none} table.prices.drinks-mode th.beer-col,table.prices.drinks-mode td.beer-col{display:none} table.prices.drinks-mode th.drinks-col,table.prices.drinks-mode td.drinks-col{display:table-cell} /* Food/Beer tab strip — its own row above the price table so it never gets squeezed by the filter inputs. */ .table-tabs{display:flex;justify-content:flex-start;margin:0 0 12px} .table-tabs .seg-toggle{font-size:15px} .table-tabs .seg-btn{padding:8px 20px;font-size:15px} /* Food/Beer segmented control — pill-shaped with sliding active button. */ .seg-toggle{display:inline-flex;background:var(--paper-2);border:1.5px solid var(--line-strong);border-radius:999px;padding:3px;flex:0 0 auto;position:relative;font-size:14px;font-weight:600;line-height:1;white-space:nowrap} .seg-btn{background:transparent;border:none;padding:7px 16px;border-radius:999px;cursor:pointer;color:var(--ink-2);font-size:14px;font-weight:600;transition:background-color .2s,color .2s;font-family:inherit;line-height:1} .seg-btn:hover{color:var(--ink)} .seg-btn.active{color:#000;background:var(--gold);box-shadow:0 1px 2px rgba(0,0,0,.1)} .seg-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .ts-item{display:inline-block;margin:0 12px 4px 0;font-size:14px} .ts-item strong{font-weight:600;color:var(--ink)} .ts-price{font-family:var(--disp);font-weight:700;color:var(--ink);margin-left:4px} /* ---- the scoreboard table ---- */ table.prices{width:100%;border-collapse:collapse;background:var(--card);border:1.5px solid var(--ink);border-radius:10px;overflow:hidden} table.prices th,table.prices td{text-align:left;font-size:15px;border-bottom:1px solid var(--line)} table.prices td{padding:14px 16px;vertical-align:middle} table.prices thead th{background:var(--ink);color:#fff;font-family:var(--disp);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;border-bottom:0;padding:0;white-space:nowrap} table.prices thead th.th-sort>button{width:100%;display:inline-flex;align-items:center;gap:6px;padding:13px 16px;background:transparent;border:0;font:inherit;color:#fff;text-transform:inherit;letter-spacing:inherit;cursor:pointer;text-align:inherit} table.prices thead th.th-sort.num>button{justify-content:flex-start} table.prices thead th.th-sort>button:hover{background:rgba(255,255,255,.10)} table.prices thead th.th-sort.is-active>button{background:rgba(240,165,0,.18);box-shadow:inset 0 -3px 0 var(--gold)} .sort-ind{display:inline-block;width:12px;font-weight:700;font-size:11px;color:var(--muted-2);line-height:1} .sort-ind.is-active{color:var(--gold-text);font-size:13px} table.prices tbody tr:hover{background:var(--paper-2)} table.prices tr:last-child td{border-bottom:0} table.prices td a{color:var(--ink);font-weight:600} table.prices td a:hover{color:#000;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px} td.num{text-align:right;font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-0.01em} table.prices td.num{text-align:center} .deal{display:inline-block;font-family:var(--disp);font-weight:700;font-size:14px;color:var(--gold-ink);background:var(--gold);padding:3px 9px;border-radius:5px;white-space:nowrap} .spec-pill{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;border-radius:5px;border:1.5px solid var(--line-strong);font-family:var(--disp);font-weight:600;font-size:13px} .num.na{color:var(--na);font-weight:500} .suburb-inline{display:none;font-size:12.5px;color:var(--muted);margin-top:1px;font-weight:500} .muted{color:var(--muted)} .small{font-size:13px;color:var(--muted)} #count{margin:14px 2px 0;font-weight:500} /* ---- badges & change indicators ---- */ .badge{display:inline-block;font-family:var(--disp);padding:3px 9px;border-radius:5px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle;white-space:nowrap} .badge-green{background:var(--cheap-bg);color:var(--cheap)} .badge-yellow{background:var(--gold-bg);color:#8a5a00} .badge-blue{background:#dde8fd;color:#1d4ed8} .badge-gray{background:#ececea;color:var(--muted)} .change{font-size:13px;font-weight:700;margin-left:6px;vertical-align:middle} .change.up{color:var(--dear)} .change.down{color:var(--cheap)} .change.same{color:var(--muted)} /* ---- venue page ---- */ h2{font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:-0.02em;margin:30px 0 12px} .venue-head{background:var(--ink);color:#fff;border-radius:12px;padding:24px 26px;margin:14px 0 22px} .venue-head h1{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.4vw,40px);letter-spacing:-0.02em;margin:0 0 6px;color:#fff} .venue-head .muted{margin:0 0 12px;color:var(--muted-2)} .venue-head .contact{display:flex;flex-wrap:wrap;gap:8px;margin:0} .venue-head .contact a{display:inline-flex;align-items:center;padding:6px 12px;border:1.5px solid rgba(255,255,255,.25);border-radius:var(--r);font-size:13px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap} .venue-head .contact a:hover{border-color:var(--gold);color:var(--gold)} .venue-head .venue-credit{margin:14px 0 0;font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:13px;letter-spacing:normal;line-height:1.2;color:#fff;white-space:nowrap} .venue-head .venue-trust{display:flex;align-items:baseline;flex-wrap:wrap;row-gap:8px;margin:0 0 10px} .venue-head .venue-rating{display:inline-flex;align-items:baseline;gap:6px;color:#fff;text-decoration:none;font-weight:600;font-size:14.5px;white-space:nowrap;transition:color 0.15s} .venue-head .venue-rating, .venue-head .venue-rating strong{color:#fff} .venue-head .venue-rating .rating-star{color:var(--gold);font-size:15px;line-height:1;transition:color 0.15s} .venue-head .venue-rating strong{font-family:var(--disp);font-weight:700;font-size:15.5px;transition:color 0.15s} .venue-head .venue-rating .rating-count{color:#cdd0d6;font-weight:500;font-size:13px;text-decoration:underline;text-decoration-color:rgba(240,165,0,.5);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color 0.15s,text-decoration-color 0.15s} .venue-head .venue-rating:hover .rating-star, .venue-head .venue-rating:hover strong, .venue-head .venue-rating:hover .rating-count{color:var(--gold)} .venue-head .venue-rating:hover .rating-count{text-decoration-color:var(--gold)} .venue-head .venue-summary{color:var(--muted-2);font-size:13.5px;font-style:italic;line-height:1.45;flex:1;min-width:240px} .venue-head .venue-info{display:flex;align-items:baseline;flex-wrap:wrap;margin:0 0 10px} .venue-head .venue-hours{color:#fff;font-weight:600;font-size:14px;white-space:nowrap} .venue-head .venue-amenities{color:var(--muted-2);font-size:13.5px;font-style:italic;line-height:1.45;flex:1;min-width:240px} .venue-head .venue-info-sep{color:var(--muted-2);font-weight:500;font-size:14px;margin:0 10px;display:inline-block} .venue-head .venue-happy{margin:0 0 10px;font-size:14px;color:#e7e9ec} .venue-head .venue-happy .hh-tag{display:inline-block;background:var(--gold);color:var(--gold-ink);font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:5px;margin-right:9px;vertical-align:middle} table.venue-prices{width:100%;border-collapse:collapse;background:var(--card);border:1.5px solid var(--ink);border-radius:10px;overflow:hidden} table.venue-prices th,table.venue-prices td{text-align:left;font-size:15px;padding:14px 16px;border-bottom:1px solid var(--line)} table.venue-prices tr:last-child td,table.venue-prices tr:last-child th{border-bottom:0} table.venue-prices th{width:30%;font-weight:600;color:var(--ink-2)} table.venue-prices td.price{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-0.01em} table.venue-prices td.meta{color:var(--muted);font-size:13px} .breadcrumb{margin:0 0 14px} .breadcrumb a{color:var(--muted);font-weight:600} .breadcrumb a:hover{color:var(--ink)} .breadcrumb .crumb-sep{color:var(--muted);margin:0 6px;opacity:.55} .breadcrumb [aria-current="page"]{color:var(--muted);font-weight:600} .venue-meta{margin-top:12px} /* Prices / Reviews segmented toggle on venue pages — same pill style as the Food/Beer/Drinks toggle on city pages. Swaps every .price-row out for the parallel .review-row across every venue-prices table. */ .venue-mode-wrap{display:flex;justify-content:flex-start;margin:24px 0 4px} .venue-mode-toggle{font-size:15px} .venue-mode-toggle .seg-btn{padding:8px 22px;font-size:15px} table.venue-prices tr.review-row{display:none} body.reviews-mode table.venue-prices tr.price-row{display:none} body.reviews-mode table.venue-prices tr.review-row{display:table-row} .menu-h2-reviews{display:none} body.reviews-mode .menu-h2-prices{display:none} body.reviews-mode .menu-h2-reviews{display:block} body.reviews-mode .menu-src-link{display:none} body.reviews-mode .venue-meta{display:none} /* The "Know of one? Add a pint price" prompt is price-submission copy — it has no business on the Reviews view. */ body.reviews-mode .beer-intro{display:none} /* "Correct?" - the third venue-page mode. The prices stay on screen and every row grows a strip of answers, so the question is always asked against the number it is about. */ .menu-h2-check{display:none} body.check-mode .menu-h2-prices{display:none} body.check-mode .menu-h2-check{display:block} table.venue-prices tr.check-row{display:none} body.check-mode table.venue-prices tr.check-row{display:table-row} body.check-mode table.venue-prices tr.review-row{display:none} /* The divider moves DOWN onto the strip. Left on the price row it drew a line between a price and its own buttons, which reads as though the buttons belong to the item below. */ body.check-mode table.venue-prices tr.price-row>th, body.check-mode table.venue-prices tr.price-row>td{border-bottom:0;padding-bottom:5px} table.venue-prices tr.check-row>td{padding-top:0;padding-bottom:11px} .check-strip{display:flex;gap:7px;flex-wrap:wrap} .check-btn{display:inline-flex;align-items:center;justify-content:center;min-height:32px;background:var(--paper-2);border:1.5px solid var(--line-strong);border-radius:999px;padding:6px 14px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;line-height:1} .check-btn:hover{color:var(--ink)} .check-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .check-btn.on{color:#fff;border-color:transparent} .check-btn-yes.on{background:var(--check-ok)} .check-btn-no.on{background:var(--dear)} .check-btn-gone.on{background:var(--ink)} .check-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0 0} .check-bar[hidden]{display:none} .check-bar-note{flex:1 1 260px;margin:0;color:var(--muted);font-size:13.5px} .check-submit[disabled]{opacity:.45;cursor:default} .check-done{background:var(--cheap-bg);border-radius:10px;padding:14px 16px;margin:18px 0 0} .check-done[hidden]{display:none} .check-done-title{margin:0;font-family:var(--disp);font-weight:600;font-size:16px;color:var(--check-ok)} .check-done-text{margin:3px 0 0;font-size:14px;line-height:1.45;color:var(--check-ok)} .check-done-cta{margin:12px 0 0} .check-done-cta[hidden]{display:none} .check-done.is-error{background:#fdecea} .check-done.is-error .check-done-title,.check-done.is-error .check-done-text{color:var(--dear)} /* Price-submission copy has no business on the check view, same as Reviews. */ body.check-mode .venue-meta{display:none} body.check-mode .beer-intro{display:none} body.check-mode .specials-section{display:none} /* One pill size on every device, George's call on 2026-09-08 after seeing the 44px version on his own phone. That is under the 44px touch guideline, which is a deliberate trade: these are secondary controls in a list, the pill is wider than it is tall so the tap area is generous across, and a mis-tap is free here because tapping an answer again clears it. Do not "fix" this back to 44px without asking him. */ @media (max-width:560px){ .check-submit{width:100%;justify-content:center} } /* Per-dimension rating breakdown: three labelled rows (e.g. Temperature / Freshness / Pour) + a review count, stacked inside the rating cell. */ .rating-dims{display:inline-flex;flex-direction:column;gap:3px;min-width:158px;max-width:210px;width:100%} .rating-dims .rd-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;line-height:1.3} .rating-dims .rd-label{color:var(--muted);font-weight:500} .rating-dims .rd-val{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap;letter-spacing:-0.01em} .rating-dims .rd-star{color:var(--gold-mark);font-size:12px;margin-right:2px} .rating-dims .rd-count{font-size:11.5px;color:var(--muted);margin-top:3px} td.rating-cell{font-size:14.5px} a.review-add-link{font-weight:600;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap} a.review-add-link:hover{color:var(--ink)} .menu-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:30px 0 12px} .menu-head h2{margin:0} .menu-src-link{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px} .menu-src-link:hover{color:var(--ink)} /* ---- specials grid ---- */ .day-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px} .day-card{background:var(--card);border:1.5px solid var(--line-strong);border-radius:10px;padding:16px} .day-card h3{margin:0 0 10px;font-family:var(--disp);font-weight:700;font-size:16px;color:var(--ink)} .day-card ul{margin:0;padding-left:18px} .day-card li{margin:4px 0;font-size:14px} /* ---- submit form ---- */ /* "Back to " link shown above the hero when the user arrived from a venue page. Subtle but obviously interactive — gold-underlined like the site's other secondary links. Hidden by default; JS unhides it. */ .back-to-venue{margin:20px 0 0} .back-to-venue a{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px} .back-to-venue a:hover{color:var(--ink)} .back-to-venue .back-arrow{font-size:18px;line-height:1;color:var(--gold-mark);transition:transform .15s} .back-to-venue a:hover .back-arrow{transform:translateX(-2px)} .form-card{background:var(--card);border:1.5px solid var(--ink);border-radius:12px;padding:22px 24px;margin:20px 0 40px;max-width:640px} .form-row{margin-bottom:18px} .form-row[hidden]{display:none} .form-row label,.form-row legend{display:block;font-weight:700;font-size:14px;margin-bottom:6px;color:var(--ink)} .form-row input[type="text"],.form-row input[type="number"],.form-row select,.form-row input[type="date"],.form-row .combo-input{width:100%;padding:11px 13px;font:inherit;font-size:15px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:#fff;color:var(--ink);box-sizing:border-box} /* iOS Safari renders empty with extra internal padding for its date-format display area, making the field ~70px tall instead of ~45px. Reset native appearance + lock the height so it matches the text/number inputs above it. min-height keeps the tap target generous. */ .form-row input[type="date"]{-webkit-appearance:none;appearance:none;min-height:46px;line-height:1.4;display:block} .form-row input[type="date"]::-webkit-date-and-time-value{text-align:left} .form-row input[type="date"]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer} .form-row input:focus,.form-row select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--gold-bg)} .form-row input+label,.form-row select+label{margin-top:14px} .form-row .form-help{font-size:13px;color:var(--muted);margin:6px 0 0} .form-row .form-help.current-price{background:var(--gold-bg);padding:8px 12px;border-radius:var(--r);color:var(--ink-2);font-size:13.5px} /* Custom venue combobox — defensive CSS so iOS Safari, old WebKit, and browsers with form-control-defaults can't override the floating-panel look. `!important` on the structural rules because we've actually seen user agents inject list-style/margin defaults that re-paint our listbox as a flowing bullet list. ───────────────────────────────────────────── */ .combobox{position:relative;display:block;box-sizing:border-box} .combobox input[type="text"]{padding-right:38px} .combobox-arrow{position:absolute;top:0;right:0;height:100%;width:36px;background:transparent;border:none;color:var(--ink-2);font-size:16px;cursor:pointer;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none} .combobox-arrow:hover{color:var(--ink)} .combobox-list{ position:absolute !important; top:calc(100% + 4px) !important; left:0 !important; right:0 !important; width:auto !important; margin:0 !important; padding:6px 0 !important; list-style:none !important; list-style-type:none !important; background:#fff !important; border:1.5px solid var(--line-strong) !important; border-radius:var(--r) !important; max-height:320px; overflow-y:auto; overflow-x:hidden; z-index:1000; box-shadow:0 6px 18px rgba(0,0,0,.12); -webkit-overflow-scrolling:touch; box-sizing:border-box; } .combobox-list[hidden]{display:none !important} .combobox-list li{list-style:none !important;margin:0;padding:0} .combobox-list li[role="option"]{padding:11px 14px;cursor:pointer;font-size:15px;color:var(--ink);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-height:44px;box-sizing:border-box;justify-content:center} .combobox-list li[role="option"]:last-child{border-bottom:none} .combobox-list li[role="option"]:hover,.combobox-list li[role="option"].combo-active{background:var(--gold-bg);color:var(--gold-ink)} .combobox-list li .combo-name{font-weight:600;line-height:1.25} .combobox-list li .combo-suburb{font-size:13px;color:var(--muted);line-height:1.2} .combobox-list li[role="option"]:hover .combo-suburb,.combobox-list li[role="option"].combo-active .combo-suburb{color:var(--ink-2)} .combobox-list li.combo-no-results{padding:14px;color:var(--muted);font-style:italic;font-size:14px;cursor:default} @media (max-width:600px){ .combobox-list{max-height:260px} .combobox-list li[role="option"]{padding:13px 14px;min-height:48px} } .hp-field{position:absolute !important;left:-10000px !important;width:1px !important;height:1px !important;overflow:hidden !important} .item-radio{border:1.5px solid var(--line-strong);border-radius:var(--r);padding:10px 14px 12px;margin:0} .item-radio legend{padding:0 6px} .item-radio label{display:inline-block;margin:4px 14px 4px 0;font-weight:500} .btn-primary,button.submit-btn,.form-card button[type="submit"]{font-family:var(--body);font-weight:700;font-size:15px;padding:12px 22px;border-radius:var(--r);border:2px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer} .btn-primary:hover,button.submit-btn:hover,.form-card button[type="submit"]:hover{background:#000} .form-card button[type="submit"]:disabled{opacity:.45;cursor:not-allowed} .form-card textarea{width:100%;padding:11px 13px;font:inherit;font-size:15px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:#fff;color:var(--ink);box-sizing:border-box;resize:vertical;min-height:80px} /* Rating-page star pickers — three rows of five buttons, gold-fill on click. */ .rate-dims{display:flex;flex-direction:column;gap:12px} .rate-dims-hint{font-size:13px;color:var(--muted);margin:0 0 4px} .dim-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)} .dim-row:last-child{border-bottom:0} .dim-label{font-weight:600;font-size:15px;color:var(--ink);text-transform:capitalize} .star-picker{display:inline-flex;gap:2px} .star-picker .star{background:transparent;border:0;cursor:pointer;font-size:26px;line-height:1;color:#dcdcdc;padding:2px 4px;transition:color .12s} .star-picker .star:hover,.star-picker .star.filled{color:var(--gold-mark)} .star-picker .star:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px} /* ---- landing ---- */ .hero-landing{max-width:960px} .landing-map-card{padding:0} .landing-map-card #oz-map{height:540px;width:100%;background:#e9eae5} .city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} .city-card{background:var(--card);border:1.5px solid var(--line-strong);border-radius:12px;padding:18px 20px} .city-card h3{font-family:var(--disp);font-weight:700;font-size:20px;margin:0 0 8px;display:flex;align-items:baseline;gap:8px} .city-state{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.06em} .city-card-meta{margin:0 0 8px} .city-stats{font-size:14px;color:var(--muted);margin:0 0 14px} .city-card-cta{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#fff;background:var(--ink);border:2px solid var(--ink);padding:9px 15px;border-radius:var(--r)} .city-card-cta:hover{background:#000;color:#fff} .city-card-cta-soft{font-weight:600;color:var(--muted)} .city-card-cta-soft:hover{color:var(--ink)} .city-card-soon{opacity:.86} .city-divicon{background:transparent;border:0} .city-pin{display:flex;flex-direction:column;align-items:center;justify-content:center;width:74px;padding:4px 6px;border-radius:8px;color:#fff;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.28);border:2px solid #fff} .city-pin strong{font-size:13px;line-height:1.1} .city-pin span{font-size:10px;white-space:nowrap;opacity:.92} .city-pin strong{font-family:var(--disp);font-size:13px;line-height:1.1} .city-pin span{font-size:11px;opacity:.9} .city-pin-live{background:var(--ink)} .city-pin-soon{background:var(--muted)} /* ---- footer ---- */ footer{padding:34px 0;border-top:2px solid var(--ink);margin-top:20px} footer .small{color:var(--muted);font-size:13px} footer em{font-style:normal;color:var(--ink);font-weight:600} footer .map-attr{margin-top:8px;font-size:11.5px;color:var(--muted-2)} footer .map-attr a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-strong)} footer .map-attr a:hover{color:var(--ink-2);text-decoration-color:var(--gold)} /* ---- mobile ---- */ @media (max-width:820px){ .hero-grid{grid-template-columns:1fr;gap:24px} } @media (max-width:720px){ .wrap{padding:0 16px} header.topbar .wrap{height:52px} .logo .logo-text{font-size:18px} /* Topbar nav: tighten so all four items fit on one row, and swap "Plan a crawl" for "Crawl" so nothing wraps or gets clipped. */ header.topbar nav{gap:0} header.topbar nav a{font-size:13px;padding:7px 7px} header.topbar nav a[href$="submit.html"]{padding:7px 11px;margin-left:3px} header.topbar nav a.nav-crawl .nav-full{display:none} header.topbar nav a.nav-crawl .nav-short{display:inline} header.topbar nav a.nav-best .nav-full{display:none} header.topbar nav a.nav-best .nav-short{display:inline} .hero{padding:40px 0 22px} #map{height:400px} .landing-map-card #oz-map{height:440px} table.prices th.suburb-col,table.prices td.suburb-col{display:none} .suburb-inline{display:block} /* Long venue names (e.g. "Teppanyaki") were pushing the price table wider than the viewport on narrow phones — break them mid-word if necessary. */ table.prices td{overflow-wrap:break-word;word-break:break-word} /* Keep the table header a constant height across Food/Beer/Drinks. Food labels are one line (nowrap); beer/drinks labels (.beer-col/.drinks-col use white-space:normal) wrap to two, which made the header jump on mode switch. Reserve two lines for every mode so the height stays constant. */ table.prices thead th.th-sort>button{min-height:48px} /* Pages with a long hero-beer name reserve a 3-line header in every mode. */ table.prices.prices-tallhead thead th.th-sort>button{min-height:60px} /* ---- venue-prices: fit narrow screens ---- */ .venue-head{padding:18px 18px} .venue-head h1{font-size:26px;line-height:1.1} table.venue-prices th{width:auto;font-size:13.5px;padding:11px 9px} /* Reviews mode: th width is content-driven per table on mobile, so the Menu/Beer/Wine tables would each align "No reviews yet" differently (Beer's th is just the word "Beer"). Fix the label column so all three tables share identical geometry. */ body.reviews-mode table.venue-prices th{width:40%} table.venue-prices td{padding:11px 9px;font-size:14px;vertical-align:top} table.venue-prices td.price{font-size:19px;font-weight:700;white-space:nowrap} table.venue-prices td.meta{display:none} /* cut/weight: secondary on mobile */ table.venue-prices td.num.small{font-size:11.5px;padding:11px 7px;text-align:right} table.venue-prices td.num.small .badge{font-size:9.5px;padding:2px 6px;letter-spacing:0.02em} /* last-month note: don't squeeze the price column horizontally */ .lm{display:block;margin:4px 0 0 0;white-space:normal;font-size:11.5px;line-height:1.3} } /* Phones (≤600px): drop the "PubWatch" wordmark to the beer mark alone so the Instagram icon makes a six-item topbar fit. Desktop/tablet keep the wordmark. The logo carries aria-label="PubWatch home", so the icon-only link stays named for screen readers. */ @media (max-width:600px){ .logo .logo-text{display:none} } /* Very narrow phones (≤380px): shave the logo + nav a touch more so the five-item topbar fits without clipping. TOPBAR ONLY — table/map rules live in the ≤720px block above so every phone width gets them. */ @media (max-width:380px){ .logo .logo-text{font-size:16.5px} .logo{gap:8px} header.topbar nav a{font-size:12.5px;padding:7px 6px} header.topbar nav a[href$="submit.html"]{padding:7px 10px} } /* Tiny phones (≤340px, e.g. 2016 iPhone SE at 320px): final topbar shave so all five items fit with zero clipping, plus tighter table cells so the city-averages board and venue badges fit the narrower paper. */ @media (max-width:340px){ .logo .logo-text{font-size:15px} .logo{gap:6px} .logo .logo-mark{width:20px;height:20px} header.topbar nav a{font-size:11.5px;padding:7px 4px} header.topbar nav a[href$="submit.html"]{padding:7px 8px;margin-left:2px} .compare-board{padding:14px 8px} .compare-board .cb-table th,.compare-board .cb-table td{padding:10px 3px;font-size:12.5px} .compare-board .cb-table .cmp-price{font-size:14px} .compare-board .cb-table .trend{font-size:10px;display:block;white-space:nowrap;margin:2px 0 0} table.venue-prices th{font-size:12.5px;padding:10px 6px} table.venue-prices td{padding:10px 6px;font-size:13px} table.venue-prices td.num.small .badge{font-size:8.5px;padding:2px 4px} } /* Filter bar: stack vertically on phones + tablets in portrait. */ @media (max-width:900px){ .filters{flex-direction:column;align-items:flex-start;gap:8px} .filters input:not([type="checkbox"]),.filters select,.filters .pw-combo{width:100%;min-width:0} .filters .toggle-priced{display:none} .filters .toggle-today{padding:6px 4px} .filters button{align-self:flex-start} } @media (max-width:480px){ .map-legend{display:none} /* Keep "Find me" on the same row as the "Showing" dropdown: let the Showing tool + its select flex/shrink to fill the space so the button doesn't wrap to a second line. */ .map-toolbar>.map-tool:first-child{flex:1;min-width:0} #map-item,.map-tool .pw-combo{flex:1;min-width:0} .map-tool .pw-combo .combo-input{width:100%} /* A sentence like "Closer to Perth, taking you there" is wider than the whole toolbar on a phone. Give it a row of its own rather than letting it compete for the first one, where it would squeeze the dropdown out of existence and leave Find me sitting on top of it. */ .find-msg{flex-basis:100%} #map{height:360px} table.prices th.spec-col,table.prices td.spec-col{display:none} table.prices td{padding:11px 9px} table.prices thead th.th-sort>button{padding:11px 9px} td.num{font-size:15px} /* Gold "cheapest" pill on phones: tighten padding + font so a 5-char price like "$19.95" doesn't get pushed onto a second line by the cell's padding eating into the column width. */ .deal{padding:2px 6px;font-size:13px;border-radius:4px} } /* Beer-mode and Drinks-mode tables on phones: long column headers ("Great Northern Original", "Aperol Spritz") would stretch the table past the viewport because thead th defaults to white-space:nowrap. Allow them to wrap onto two lines, tighten padding, and cap each cell so the table fits any phone width. */ @media (max-width:720px){ table.prices th.beer-col,table.prices th.drinks-col{white-space:normal} table.prices.beer-mode th.beer-col, table.prices.beer-mode td.beer-col, table.prices.drinks-mode th.drinks-col, table.prices.drinks-mode td.drinks-col{max-width:110px} table.prices.beer-mode thead th.beer-col>button, table.prices.drinks-mode thead th.drinks-col>button{ padding:11px 6px;font-size:10.5px;line-height:1.15;white-space:normal; text-align:left;word-break:normal;overflow-wrap:break-word } table.prices.beer-mode td.beer-col, table.prices.drinks-mode td.drinks-col{padding:11px 6px;font-size:14px} } /* ===== crawl planner (/crawl.html) ===== */ .crawl-grid{display:grid;grid-template-columns:380px 1fr;gap:26px;align-items:start;margin:24px 0 60px} @media(max-width:880px){.crawl-grid{grid-template-columns:1fr}} .plan-card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:20px 20px 22px;position:sticky;top:78px} @media(max-width:880px){.plan-card{position:static}} .plan-card h2{margin:0 0 14px;font-size:19px} .fld{margin-bottom:16px} .fld label{display:block;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);margin-bottom:7px;font-family:var(--disp)} .fld input[type=text],.fld select,.fld input[type=number],.fld .combo-input{width:100%;box-sizing:border-box;font-family:var(--body);font-size:15px;padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--paper)} .fld input:focus,.fld select:focus{outline:none;border-color:var(--ink)} .fld .hint{font-size:12.5px;color:var(--muted);margin-top:5px} .fld input:disabled{background:var(--paper-2);color:var(--muted-2);cursor:not-allowed} .combo{position:relative}/* custom dropdowns v3 */ button.combo-input{-webkit-appearance:none;appearance:none;color:inherit;-webkit-text-fill-color:currentColor;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:inherit;line-height:normal} .combo-input.is-placeholder{color:var(--muted-2)} .combo::after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted-2);font-size:12px;pointer-events:none;transition:transform .12s} .combo.open::after{transform:translateY(-50%) rotate(180deg)} .fld .combo .combo-input{padding-right:32px;text-overflow:ellipsis} .fld .combo button.combo-input{cursor:pointer;user-select:none} .combo-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:var(--card);border:1.5px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow);max-height:288px;overflow-y:auto} .combo-item{padding:9px 11px;border-radius:6px;font-size:15px;line-height:1.2;cursor:pointer} .combo-item:hover,.combo-item.active{background:var(--paper-2)} .combo-empty,.combo-more{padding:9px 11px;font-size:13px;color:var(--muted);cursor:default} /* Enhanced native selects (pw-combo): the backing