/* Cheers * --------------------------------------------------------------------------- * Gatsby's lawn, if it ran down to a Sydney beach and he drank schooners. * * TWO WORLDS, ONE SITE. The palette follows the actual sun over the peninsula * (assets/js/daylight.js sets data-time on ): * * data-time="day" golden hour on the lawn, sun-bleached linen, gold leaf, * pool teal. Bright, open, deco. The default. * data-time="night" the party after dark, midnight harbour, lamplit brass, * champagne. Arrives at real local sunset. * * Tokens are SEMANTIC, never literal: --bg, --ink, --gold. Both worlds define * the same names, so no component knows or cares which one is on. Never write * a hex value outside this block. * * THE MARK is artwork, not type: assets/brand holds the option 6 kit (two * amber glasses, charcoal wordmark, cream foam), and assets/brand * the display-size copies the page loads. Nothing here recolours it. * * TYPE, 1920s, all three: * Marcellus headings. Roman capitals, warm, carved rather than printed. * Jost UI and every figure. A Futura revival, Futura is 1927, which * is the whole point, with tabular lining numerals for prices. * ------------------------------------------------------------------------- */ :root { /* ================== GOLDEN HOUR (default) ============================== * Derived from the CHEERS brand tokens in assets/brand/brand-tokens.json, * and NOT copied from them. The distinction matters: * * The logo palette is charcoal, beer #D9A25F, foam #F7EFE3, clink * #E2A12A, burnt orange #C96832. Measured as TEXT on the foam ground, * clink is 1.97:1 and beer is 1.98:1. They are artwork colours — they * work because they are large flat shapes with a charcoal outline, and * they are unreadable at 13px. * * So the neutrals are taken exactly (foam is the page, charcoal is the * ink, and both measure 13.95:1) and the accents are the brand hues walked * down in lightness until they clear 4.5:1 — same colour, legible weight. * * Every ratio below is measured, including against --sunk, which is the * surface the provenance strip and the drink chips sit on. The old palette * put gold at 4.47:1 there, just under the floor; this one clears it. * ==================================================================== */ --bg: #F7EFE3; /* brand foam, taken exactly */ --surface: #FEFBF6; /* one step up into the light */ --sunk: #EDE4D5; /* recessed: inputs, wells, the provenance strip */ --ink: #26211F; /* brand charcoal, the wordmark's own 13.95:1 on bg */ --ink-soft: #675E58; /* secondary 5.6:1 bg · 5.0:1 sunk · 6.1:1 surface */ --gold: #885E12; /* clink, darkened 5.0:1 bg · 4.6:1 sunk */ --gold-lamp: #D9A25F; /* brand beer. DECORATIVE ONLY — 1.98:1, never text */ --sea: #1F625F; /* confirmed 6.2:1 bg · 5.6:1 sunk */ --coral: #9D5127; /* burnt orange, darkened 5.1:1 bg · 4.6:1 sunk */ --edge: #DBD0BD; --edge-soft: #E7DDCB; --on-gold: #FEFBF6; /* text on a gold fill 5.6:1 */ --on-coral: #FFF8F5; --lift: 0 1px 0 rgba(255,255,255,.7) inset, 0 14px 30px -20px rgba(38,33,31,.35); --scrim: rgba(38,33,31,.44); color-scheme: light; /* ------------------------------------------------------------- washes */ --gold-wash: color-mix(in srgb, var(--gold) 12%, transparent); /* Gold that is legible ON gold-wash. Plain --gold over its own 12% wash lands under the 4.5 floor every other pair in this file clears - it affected the current nav item and the selected drink chip, both of them 12-13px text. Pulling 20% of --ink into it fixes that and it is still recognisably gold. One declaration covers both worlds because --gold and --ink both move at sunset: by day it darkens toward charcoal, by night it lifts toward champagne, and either way it pulls away from the wash. */ --gold-ink: color-mix(in srgb, var(--gold) 80%, var(--ink)); --sea-wash: color-mix(in srgb, var(--sea) 11%, transparent); --coral-wash: color-mix(in srgb, var(--coral) 10%, transparent); /* Deco geometry, but only where the deco is doing the talking. Cards, panels and the map keep the 4px corner: straight lines and stepped corners are the period, and those are the surfaces that carry it. Controls do not. The brand mark is two glasses drawn entirely in soft curves, and a 3px corner next to it read as a default form widget - which is exactly the "basic and out of place" of it. 9px is enough to belong to the artwork and still short of a pill. */ --r-object: 4px; --r-control: 9px; --r-pill: 999px; /* THE ACTION COLOUR. It was bottle green #0D3826 — the last thing on the page that belonged to The Froth Exchange rather than to Cheers. Nothing in the wordmark is green, so the primary button was quietly advertising the old brand. It is now the brand's own charcoal: the colour of four of the six letters, the most confident thing the identity owns, and 13.95:1 against the cream it carries. Amber was the obvious alternative and is wrong here — amber is what a PRICE is on this site, and a button in the same colour as the number it sits beside stops either of them meaning anything. Night cannot use charcoal: the page is #0B1F2A and one dark on another is invisible. Night takes the beer amber from the mark instead, where nothing else on a dark page is competing for it. */ --action: #26211F; /* brand charcoal 13.95:1 with --on-action */ --on-action: #F7EFE3; /* brand foam, the wordmark's own cream */ --font-display: "Marcellus", "Hoefler Text", Georgia, serif; --font-ui: "Jost", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-fig: "Jost", ui-sans-serif, system-ui, sans-serif; /* The hero price only, carved-cornerstone numerals, not UI type. Falls back to --font-fig everywhere it isn't explicitly opted in. */ --font-fig-lg: "Big Shoulders Display", var(--font-fig); --gutter: 20px; /* Smallest comfortable hit area. Anything a thumb lands on gets this. */ --tap: 44px; } /* -------------------------------------------------- THE PARTY AFTER DARK */ :root[data-time="night"] { --bg: #0B1F2A; /* midnight harbour */ --surface: #12303D; /* lamplit */ --sunk: #07161E; --ink: #F7EFE3; /* brand foam 14.8:1 on bg */ --ink-soft: #9FB0B8; /* secondary 7.2:1 on bg */ --gold: #E0B457; /* brass lamp 9.6:1 on bg */ --gold-lamp: #E0B457; --sea: #4FB3A5; /* confirmed 7.5:1 on bg */ --coral: #F0947A; /* estimate 7.6:1 on bg */ --edge: #23485A; --edge-soft: #1A3947; --on-gold: #201703; --on-coral: #2A1108; /* The clink amber from the mark, exactly — the colour of the three marks above the glasses. 7.9:1 against --on-action, and distinct from the brass --gold that prices use, so a button and a price still read as different things after dark the way they do by day. */ --action: #E2A12A; --on-action: #201703; --lift: 0 1px 0 rgba(247,239,227,.05) inset, 0 18px 40px -24px rgba(0,0,0,.75); --scrim: rgba(3,12,18,.68); color-scheme: dark; } /* The switch is a change of light, not a jump cut. Kept off interactive feedback so it can't slow a tap. */ :root[data-time] body, :root[data-time] .card, :root[data-time] .masthead { transition: background-color .8s ease, color .8s ease, border-color .8s ease; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* The masthead is sticky, so anything scrolled to by the bottom bar has to clear it or the heading lands underneath and looks like it was skipped. */ /* 78px of bar plus 20px of daylight. This number tracks .masthead-in's min-height: grow the bar and forget this, and every in-page link lands with its heading tucked under the header. */ :target, [id] { scroll-margin-top: 98px; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 0.9375rem/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; padding-bottom: env(safe-area-inset-bottom); } h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.06; } h1, h2 { font-family: var(--font-display); letter-spacing: .005em; } /* Every figure on the site: lining, tabular, so columns align and prices read as prices rather than as output. This is the fix for "the numbers look AI" - Jost's numerals are geometric and period-correct, and no monospace is involved anywhere. */ .fig, .row-price, .dial-read, .dial-mark b, .radius output, .hh-when { font-family: var(--font-fig); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: var(--gold); text-underline-offset: 3px; } svg { display: block; flex: none; } button { font: inherit; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); } /* Keyboard users shouldn't have to tab the masthead and six stats to reach the thing they came for. Invisible until focused. */ .skip { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-160%); background: var(--gold); color: var(--on-gold); font: 600 0.875rem/1 var(--font-ui); text-decoration: none; padding: 12px 16px; border-radius: var(--r-control); transition: transform .16s ease; } .skip:focus-visible { transform: none; } /* Voice-layer slots. Hidden by default; assets/css/voice.css reveals them when . Delete the voice files and these stay collapsed. */ .voice-signoff { display: none; } /* ====================== THE LOCK-UP AFTER DARK =========================== * SOLVED IN THE ARTWORK NOW, NOT IN CSS. * * What used to be here: the old kit was bottle green on cream with no reversed * version, so on the night palette (#0B1F2A) the wordmark was very nearly * invisible. The workaround painted a cream tile behind it with a box-shadow * spread — the artwork's own ground, faked, so it stayed legible after dark. * * The CHEERS pack ships purpose-drawn reversed artwork, which is what that * hack was standing in for. cheers-wordmark.svg has charcoal letters for light * grounds; cheers-wordmark-reversed.svg redraws them cream and leaves the * amber beer, the foam and the clink marks exactly where they are. * * WHY TWO FILES RATHER THAN ONE FILTERED ONE. The wordmark is flat * multi-colour art. `filter: invert()` would turn the beer blue and the foam * charcoal along with the letters. The brand pack forbids CSS inversion for * precisely this reason, and it is right. * * Both files load. They are SVGs of a six-letter wordmark; the unused one is * not worth a media query that could not read data-time anyway — the theme * comes from daylight.js and the real sunset over the peninsula, not from * prefers-color-scheme, so cannot switch on it. * ====================================================================== */ /* Block, not the inline default a carries, so the anchor in the masthead and the centred img in the footer both size off it predictably. DO NOT set `display` on `.wordmark picture` or any other selector that reaches these elements: a class-plus-type selector outranks these plain classes, and the visible failure is both cuts of the wordmark rendering side by side rather than one of them vanishing — which reads as a markup bug and sends you to the wrong file. */ .wordmark-day { display: block; } .wordmark-night { display: none; } :root[data-time="night"] .wordmark-day { display: none; } :root[data-time="night"] .wordmark-night { display: block; } /* No glow, blur, drop-shadow, gradient or opacity may be applied to the wordmark or the paired-E mark. That is the brand pack's rule and it is stated here as well as observed, because the last version of this file grew a tile and a shadow one reasonable-looking commit at a time. */ /* ----------------------------------------------------------------- header */ .masthead { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--edge-soft); } /* TWO GROUPS, NOT FOUR ITEMS. The `margin-right:auto` used to sit on the wordmark, which pushed everything else hard against the right edge: on a 1280px screen that left the mark alone at x=70 and a 609px hole before the nav, so the bar read as two unrelated things that happened to share a border. The auto margin now sits after the nav instead. Brand and navigation group on the left, where the eye starts and where "Today" is plainly a page of this site; the two controls anchor the right, where actions belong. Nothing was added or removed to do it. */ /* 78px, up from 62. The bar was sized around a 40px lock-up and nothing else, which made the brand the smallest thing on a page whose largest headings run to 40px+. The extra 16px is all artwork: the padding moves 10 to 12 so the lock-up still has air above and below it, and the controls are unchanged because they were never the constraint. */ .masthead-in { display: flex; align-items: center; gap: 10px; min-height: 78px; padding: 12px var(--gutter); max-width: 1180px; margin: 0 auto; } /* Sticky furniture is rent on every scroll, and a phone viewport has less to spend: the bar comes back down where the lock-up is the symbol and does not need the height. */ @media (max-width: 599.98px) { .masthead-in { min-height: 68px; } } /* The one deliberate hole, and it is small: enough air that the nav is not crowding the artwork, not so much that it stops being the same group. The rest of this block used to live in exchange.css, which index and the Board load and the cellar does not - so on deep.html the nav fell back to two bare anchors, gold and underlined, run together with no gap. The nav is masthead furniture on all three pages, so it belongs in the stylesheet all three pages load. Nothing about the rules changed in the move. */ .mast-nav { display: flex; gap: 4px; align-items: center; flex: none; margin-right: auto; margin-left: 12px; } .mast-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 13px; border-radius: var(--r-control); font: 500 0.8125rem/1 var(--font-ui); color: var(--ink-soft); text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: color .14s ease, background .14s ease, border-color .14s ease; } .mast-nav a:hover { color: var(--ink); background: var(--surface); } /* The current page was a filled beige box with a gold border and a 3px corner, which is the shape of a text input, not of a nav state - and the border in particular made it compete with the real button two items along. Same wash, no border, the softer corner, and the weight doing the work instead. Deliberately gold and not --action: charcoal means "this does something" on this site now, and the page you are already on does not. Gold is also the only one of the two that is tuned for both worlds - at 11% over cream, a charcoal fill desaturates into a grey pill. The border stays transparent so the item does not resize when it becomes current. */ .mast-nav a[aria-current="page"] { color: var(--gold-ink); background: var(--gold-wash); font-weight: 600; } @media (max-width: 460px) { .mast-nav a { padding: 0 10px; font-size: 0.75rem; } } /* The last 12px. On a 320px phone the nav, the info button and the CTA come to more than the bar, before the mark gets any of it at all - true of the old text wordmark too, which collapsed to 8px there. Three pixels off each nav link is what leaves the symbol somewhere to stand. */ @media (max-width: 360px) { .mast-nav a { padding: 0 7px; } } /* THE WORDMARK, the option 6 compact lock-up as artwork. It was a deco sunburst drawn in SVG next to Poiret One; both are gone, and with them the whole question of matching a typeface to a mark - the lock-up arrives with its own spacing already set. The rules that follow only give it a height and get out of the way: never a width, never a filter, never a crop. */ .wordmark { display: flex; align-items: center; text-decoration: none; color: inherit; min-width: 0; } /* NO `display` HERE, deliberately. It used to say `display: flex`, which is a class-plus-type selector and therefore beat the plain `.wordmark-night` class that hides the off-theme artwork — so both cuts of the wordmark rendered at once, side by side, in every theme. The flex was only ever buying shrink behaviour that `min-width: 0` on a block picture gives anyway. Whichever cut is showing gets its `display` from the theme rules above. */ .wordmark picture { min-width: 0; } /* Height, and width follows whichever of the two files picked. The pair of them is why max-width and object-fit are both here: the artwork can never be wider than the space it is given, and if it is ever squeezed it letterboxes rather than squashing. The old text wordmark handled the same squeeze with an ellipsis; artwork has no ellipsis, so this is the floor. */ .wordmark-logo { display: block; height: 54px; width: auto; max-width: 100%; object-fit: contain; } /* The symbol band. Heights step down with the room actually left over once the nav, the info button and the CTA have taken theirs - measured, not guessed; see the numbers in the comment in index.html. */ @media (max-width: 599.98px) { .wordmark-logo { height: 40px; } } /* 391-470px is the worst case on the whole site: the CTA still carries its full label here, and only goes icon-only below 390. Buying 24px back out of the three gaps is what keeps the symbol clear of the nav. */ @media (max-width: 470px) { .masthead-in { gap: 8px; } /* The 12px that groups nav with the mark is a luxury of a wide bar. Down here every pixel is already spoken for by the nav, the info button and the CTA, so the grouping gap goes and the flex gap carries it alone. */ .mast-nav { margin-left: 0; } .wordmark-logo { height: 34px; } } @media (max-width: 360px) { .wordmark-logo { height: 28px; } } /* The info button is a plain .btn now, not .btn-quiet. As a quiet button it had a transparent fill and a transparent border, so at rest it was a glyph floating between the nav and the CTA with nothing to say it could be pressed. A hairline on its own did not fix it either: --edge measures 1.35:1 against the page by day and is invisible by night. The border and the surface fill together are what make "Use my location" read as a button, and this is the same control. .btn-quiet is left alone for the panel close buttons, which are correctly invisible until you go looking for them. */ /* Three items (wordmark, info, "Check a price") now share a header built for two. Below ~390px there isn't room for all three at full size, dropping the CTA to icon-only buys back ~70px, which is what keeps the lock-up at its own size rather than being squeezed. The label still exists for screen readers; only the visible text goes. */ @media (max-width: 390px) { .masthead-cta .cta-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .masthead-cta { padding-left: 13px; padding-right: 13px; } } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 0.875rem/1 var(--font-ui); color: var(--ink); background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-control); padding: 11px 15px; /* --tap is the project's own floor and .btn was landing at ~38px, which covers the masthead info button and every panel close button. */ min-height: var(--tap); cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease; } .btn:hover { border-color: var(--action); } .btn-primary { background: var(--action); border-color: var(--action); color: var(--on-action); font-weight: 600; } /* Mixed toward --ink rather than a hard-coded #fff. The old rule always went toward white, which on the light page made the button recede exactly when it was being pointed at. --ink is dark by day and champagne by night, so this deepens the green and brightens the amber - either way it pulls further from the background it sits on, which is what hover should do. */ .btn-primary:hover { background: color-mix(in srgb, var(--action) 86%, var(--ink)); } .btn-quiet { background: transparent; border-color: transparent; color: var(--ink-soft); } .btn-quiet:hover { color: var(--ink); background: var(--surface); } .btn-icon { padding: 10px; min-width: var(--tap); } .btn-block { width: 100%; } /* ============================ SECTION HEADS ============================= * Deco: a rule, a centred cap-height title, a rule. Symmetry does the work. */ .sec-head { margin: 22px 0 12px; } .sec-head h1, .sec-head h2 { /* Deliberately below .row-price. A section title is a signpost; the price is the answer, and the answer should be the largest thing on the screen. */ font-size: clamp(1.375rem, 4.6vw, 1.75rem); line-height: 1; letter-spacing: .02em; color: var(--ink); display: flex; align-items: center; gap: 14px; } .sec-head h1::after, .sec-head h2::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); min-height: 3px; } .sec-head em { font-style: normal; color: var(--gold); } .sec-head p { color: var(--ink-soft); font-size: 0.78125rem; margin-top: 5px; max-width: 56ch; } .foot-note { margin-top: 14px; font-size: 0.78125rem; color: var(--ink-soft); } .foot-note b { color: var(--ink); font-weight: 500; } /* ------------------------------------------------------- near-me controls */ .near { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } /* ROUND SIZE. Sits in the same row as location and radius because it is the same kind of thing — a fact about this trip that the whole page answers against. Borrows the drink picker's vocabulary rather than inventing a third control style. */ .party { display: flex; align-items: center; gap: 8px; border: 0; padding: 0; margin: 0; } .party legend { padding: 0; float: left; line-height: var(--tap); font-size: 0.6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; } .party-set { display: flex; gap: 4px; } .party-n { min-width: var(--tap); min-height: var(--tap); padding: 0 10px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-control); color: var(--ink); font-family: var(--font-fig); font-size: 0.9375rem; font-variant-numeric: tabular-nums lining-nums; cursor: pointer; transition: background .14s ease, border-color .14s ease; } .party-n:hover { border-color: var(--action); } .party-n.is-on { background: var(--gold-wash); border-color: var(--gold); color: var(--gold-ink); font-weight: 600; } /* What the round costs. Deliberately quieter than the unit price above it: the per-beer figure is what people compare, and this is the consequence. */ .row-round { display: block; font-family: var(--font-fig); font-variant-numeric: tabular-nums lining-nums; font-size: 0.8125rem; color: var(--gold-ink); margin-top: 3px; } .row-fig .row-round { text-align: right; } @media (max-width: 400px) { .row-fig .row-round { text-align: left; } } /* WE NEED A SCOUT. Sits on the sunk surface rather than in a coloured callout: it is an invitation, not a warning, and the page already uses coral for "this number is weak". Stacks on a phone so the button gets a full-width tap target instead of being squeezed beside the sentence. */ .scout { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 11px 13px; background: var(--sunk); border: 1px solid var(--edge); border-radius: var(--r-control); } .scout-ask { font-size: 0.8125rem; color: var(--ink); flex: 1 1 12rem; } .btn-sm { min-height: 38px; padding: 8px 14px; font-size: 0.8125rem; } @media (max-width: 420px) { .scout { flex-direction: column; align-items: stretch; } .scout .btn-sm { width: 100%; } } .btn-ghost { background: transparent; } .radius { display: flex; align-items: center; gap: 12px; flex: 1 1 240px; min-width: 0; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-control); padding: 0 15px; min-height: var(--tap); } .radius > span { font-size: 0.6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; font-weight: 500; } .radius input[type="range"] { flex: 1; min-width: 44px; accent-color: var(--gold); height: var(--tap); } .radius output { font-family: var(--font-fig); font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: var(--gold); min-width: 60px; text-align: right; font-weight: 500; } /* At 320px the label + range + output together are wider than the viewport has room for, and with .near already flex-wrapped there's no second line to fall back to. The word "Within" is decorative once the output already reads "5 km", drop it visually, keep it for screen readers. */ @media (max-width: 370px) { .radius > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .radius { gap: 10px; padding: 0 12px; } } /* =============================== THE MAP =============================== * Primary surface. Dark tiles so the brass pins are the only bright thing. * ====================================================================== */ .mapwrap { position: relative; border: 1px solid var(--edge); border-radius: var(--r-object); overflow: hidden; box-shadow: var(--lift); /* Leaflet stacks its own furniture high: panes at z-index 400, zoom controls and attribution at 1000. `position: relative` with `z-index: auto` creates NO stacking context, so those numbers were competing directly against the rest of the page in the root context - and beating the venue panel at 60. The result was tiles, pins and the zoom control drawing straight through an open sheet. `isolation: isolate` gives the map its own context, so everything Leaflet does is contained below whatever the page puts on top of it. Nothing about the map's internal layering changes. */ isolation: isolate; } #map { height: 34vh; min-height: 260px; background: var(--sunk); } @media (min-width: 760px) { #map { height: 48vh; min-height: 380px; } } .map-legend { position: absolute; left: 12px; bottom: 12px; z-index: 500; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--edge); border-radius: var(--r-pill); padding: 7px 13px; font-size: 0.75rem; color: var(--ink-soft); } .map-legend li { display: inline-flex; align-items: center; gap: 6px; } .lg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); } .lg-dot.cheap { background: var(--sea); } .lg-dot.approx { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-soft); } /* Pins: a real price, legible at a glance, brass on dark. */ .pin { font-family: var(--font-fig); font-size: 0.75rem; font-weight: 500; white-space: nowrap; padding: 4px 9px; border-radius: var(--r-pill); background: var(--gold); color: var(--on-gold); box-shadow: 0 2px 10px rgba(0,0,0,.55); border: 1px solid rgba(0,0,0,.25); transition: transform .12s ease; } .pin:hover { transform: scale(1.08); } .pin.is-cheap { background: var(--sea); } /* Unplaced venues read as unplaced. No fake precision. */ .pin.is-approx { background: transparent; color: var(--ink-soft); border: 1px dashed var(--ink-soft); box-shadow: none; } /* Zoomed out, most venues are a dot. Only the cheapest quarter and the five in the list carry a price, so the map stays readable instead of a smear. */ .pin.is-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; display: block; font-size: 0; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.6); } .pin.is-dot.is-approx { border-style: dashed; width: 8px; height: 8px; } .leaflet-popup-content-wrapper { background: var(--surface); color: var(--ink); border: 1px solid var(--edge); border-radius: var(--r-control); box-shadow: var(--lift); } .leaflet-popup-content { margin: 12px 14px; font-family: var(--font-ui); font-size: 0.8125rem; } .leaflet-popup-content b { font-family: var(--font-display); font-size: 1rem; font-weight: 400; } .leaflet-popup-tip { background: var(--surface); } .leaflet-popup-close-button { color: var(--ink-soft) !important; } .leaflet-container { font-family: var(--font-ui); background: var(--sunk); } .leaflet-control-attribution { background: color-mix(in srgb, var(--bg) 80%, transparent) !important; color: var(--ink-soft) !important; font-size: 0.6875rem !important; } .leaflet-control-attribution a { color: var(--ink-soft) !important; } .leaflet-bar { border: 1px solid var(--edge) !important; border-radius: var(--r-control) !important; overflow: hidden; } .leaflet-bar a { background: var(--surface) !important; color: var(--ink) !important; border-bottom-color: var(--edge) !important; } .leaflet-bar a:hover { background: var(--edge) !important; } /* =============================== THE FLOOR ================================ * Not a directory. Five, ranked, with a way to act on each one. * ====================================================================== */ .rows { display: flex; flex-direction: column; gap: 8px; } /* A ranked card: the whole thing opens the venue, and two explicit actions sit under a hairline, go there, or fix the price. */ .row { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-object); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; } .row:hover { border-color: var(--gold); box-shadow: var(--lift); } .row:focus-within { border-color: var(--gold); } /* The cheapest gets the gold rule across its top, a ribbon, not a badge. */ .row.is-first { border-color: color-mix(in srgb, var(--gold) 55%, transparent); } .row.is-first::before { content: ""; display: block; height: 3px; background: var(--gold-lamp); } .row-open { display: grid; align-items: center; gap: 12px; grid-template-columns: 26px 1fr auto; padding: 12px 16px; width: 100%; background: none; border: 0; text-align: left; color: inherit; cursor: pointer; } /* The rank numeral is information, not ornament, it's the ranking. It was set in --edge at 1.5:1, which is a decorative treatment applied to content. */ .row-n { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink-soft); line-height: .9; text-align: center; } .row.is-first .row-n { color: var(--gold); } /* Actions strip */ .row-acts { display: flex; border-top: 1px solid var(--edge-soft); } .row-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--tap); padding: 0 12px; font: 500 0.78125rem/1 var(--font-ui); color: var(--ink-soft); background: none; border: 0; cursor: pointer; text-decoration: none; transition: background .14s ease, color .14s ease; } .row-act + .row-act { border-left: 1px solid var(--edge-soft); } .row-act:hover { background: var(--gold-wash); color: var(--gold); } .seed-flag { display: inline-flex; align-items: center; gap: 6px; color: var(--coral); } .seed-flag .mark { box-shadow: inset 0 0 0 1.5px var(--coral); } .row-main { min-width: 0; } /* Block, not inline, at the smaller size the name and the meta line that follows it are close enough in width to share a line by accident, which read as "Beacon Hill Bowling Club Bowling club ·" running together before wrapping mid-sentence. A block forces its own line regardless of how the text measures. */ .row-name { display: block; font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.15; } .row-meta { font-size: 0.75rem; color: var(--ink-soft); margin-top: 2px; } .row-why { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 0.75rem; padding: 2px 8px; border-radius: var(--r-pill); color: var(--sea); background: var(--sea-wash); border: 1px solid color-mix(in srgb, var(--sea) 26%, transparent); } .row-fig { text-align: right; } /* The price is the reason the page exists, and at 1.5625rem it was one pixel larger than the section heading above it - the most important number on the screen tying with page furniture. It now outranks every heading, which is what lets the eye run down the column of prices without reading anything else. Scales with the viewport so the ranked five still fit on a phone. */ .row-price { font-family: var(--font-fig-lg); font-size: clamp(2rem, 8vw, 2.25rem); font-weight: 700; color: var(--gold); letter-spacing: .01em; line-height: 1; } /* The dollar sign is a real element (.cur), not generated content: it stays optically smaller so the numerals align down the column, and, unlike a ::before, it is reliably announced. See .row-price .cur below. */ .row-proof { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 0.75rem; color: var(--ink-soft); margin-top: 4px; } /* inline-block because the marker is not always a flex item. Everywhere it is drawn by JS its parent is .row-proof, .seed-flag or .unplaced, all flex, so the got blockified and the 9x9 applied. The one hand-written instance - the licence note in the cellar footer - sits in running prose, where an inline element ignores width and height and the marker rendered as nothing. Blockifying it costs the flex cases exactly nothing. */ .mark { display: inline-block; vertical-align: middle; width: 9px; height: 9px; border-radius: 50%; flex: none; } .row-proof[data-trust="confirmed"] { color: var(--sea); } .row-proof[data-trust="confirmed"] .mark { background: var(--sea); } /* The venue's own price — the top rung of the ladder. Deliberately NOT a fifth semantic colour. Every hue in this file has a measured ratio against three surfaces in two themes, and adding one to say "confirmed, but more so" would cost all of that and buy a distinction the eye reads better from shape anyway. Same trust colour, ringed marker: the two are tellable apart at a glance, in a screenshot, and by anyone who cannot distinguish the hues in the first place. */ .row-proof[data-trust="venue"] { color: var(--sea); font-weight: 600; } .row-proof[data-trust="venue"] .mark { background: var(--sea); box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--sea); } .row-proof[data-trust="reported"] .mark { background: linear-gradient(90deg, var(--ink-soft) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink-soft); } .row-proof[data-trust="estimate"] { color: var(--coral); } .row-proof[data-trust="estimate"] .mark { box-shadow: inset 0 0 0 1.5px var(--coral); } /* The other half of the same fix: with no .row-proof above it the note's marker had a box but no colour. Carrying data-trust on the marker itself is the same vocabulary the rows use, so the sentence and the rows it describes are drawn by the same rule rather than by a one-off. */ .mark[data-trust="estimate"] { box-shadow: inset 0 0 0 1.5px var(--coral); } @media (max-width: 400px) { /* Was targeting .row with a grid layout that lives on .row-open now, the mobile collapse silently stopped applying when the row markup split into card + button + actions strip. */ .row-open { grid-template-columns: 22px 1fr; row-gap: 6px; padding: 10px 14px; } .row-fig { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .row-proof { margin-top: 0; justify-content: flex-start; } } /* --------------------------------------------------------- happy hour list */ .hh-list { display: grid; gap: 8px; grid-template-columns: 1fr; margin-top: 10px; } @media (min-width: 720px) { .hh-list { grid-template-columns: 1fr 1fr; } } /* Card = the venue. Source link = the source. These were one pointing off-site, so tapping a happy hour left the peninsula for somebody's blog instead of telling you about the pub. Now the card's primary action opens the venue, and the citation is a real, separate, still-prominent link. The hit overlay is a sibling button rather than a wrapping one, because an nested inside a