/** * Locations grid + "Book now" slide-over. * Inherits the palette and button styles from tof-booking.css. */ .tof-vh { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- locations page ---------- */ .tof-places { max-width: 1100px; } .tof-places__head { margin: 0 0 22px; } .tof-places__tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; } .tof-places__searchwrap { flex: 1 1 260px; min-width: 0; } .tof-places__search { width: 100%; padding: 11px 14px; border: 1px solid var(--tof-line); border-radius: var(--tof-radius); background: var(--tof-white); color: var(--tof-ink); font: inherit; } .tof-places__search:focus { border-color: var(--tof-brand); outline: none; } .tof-places__status { margin: 10px 0 0; color: var(--tof-muted); font-size: 0.92em; } .tof-places__status[hidden] { display: none; } .tof-placegroup { margin: 0 0 26px; } .tof-placegroup__title { margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--tof-line); color: var(--tof-brand); font-size: 1.05em; letter-spacing: 0.04em; text-transform: uppercase; } .tof-places__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: stretch; margin: 0; padding: 0; gap: 14px; list-style: none; } .tof-place { display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--tof-line); border-radius: var(--tof-radius); background: var(--tof-white); } .tof-place[hidden] { display: none; } /* * The image is taken out of flow entirely, so nothing it does can change the * box's height. aspect-ratio only sets a PREFERRED size — content taller than * the box still wins — and the theme's own img rule outranks a plain * height:100% here. Measured on the live page: a 768x999 photo stretched the * tile to 355x462 instead of cropping to 355x355. Absolute positioning removes * the whole class of interference rather than fighting one selector. */ .tof-place__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--tof-marshmallow); } .tof-blvd .tof-place .tof-place__media img { position: absolute; display: block; width: 100%; max-width: none; height: 100%; max-height: none; min-height: 0; object-fit: cover; inset: 0; } .tof-place__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 14px 16px 16px; } .tof-place__name { margin: 0 0 2px; color: var(--tof-ink); font-size: 1.1em; } .tof-place__dist { margin: 0 0 6px; color: var(--tof-brand); font-size: 0.85em; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .tof-place__dist[hidden] { display: none; } .tof-place__addr { margin: 0 0 8px; color: var(--tof-muted); font-size: 0.92em; } .tof-place__links { margin: 0 0 14px; font-size: 0.92em; } .tof-place__link { color: var(--tof-brand); text-decoration: none; border-bottom: 1px solid var(--tof-line); } .tof-place__link:hover { border-bottom-color: var(--tof-brand); } /* Actions sit at the bottom of every card, so the buttons line up across a row whatever the address length does above them. */ .tof-place__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; } /* * Coming-soon cards sit on the same white as every other card — tinting the * whole tile read as "disabled" rather than "opening". The banner carries the * message instead, full tile width, directly above the text. */ .tof-place__banner { margin: 0; padding: 7px 16px; background: var(--tof-brand); color: #fff; font-size: 0.78em; font-weight: 700; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; } .tof-places__empty { padding: 24px 0; color: var(--tof-muted); text-align: center; } .tof-places__empty[hidden], .tof-places__nearlist[hidden] { display: none; } /* ---------- slide-over ---------- */ body.tof-panel-open { overflow: hidden; } /* * The panel is re-parented to at runtime. This host keeps the palette * in scope for it while dropping .tof-blvd's 760px column, which would * otherwise squeeze a full-viewport overlay. */ .tof-panelhost { max-width: none; margin: 0; } .tof-panel { position: fixed; z-index: 100000; inset: 0; } .tof-panel[hidden] { display: none; } .tof-panel__scrim { position: absolute; background: rgba(50, 4, 20, 0.5); inset: 0; opacity: 0; transition: opacity 0.2s ease; } .tof-panel.is-open .tof-panel__scrim { opacity: 1; } .tof-panel__sheet { position: absolute; display: flex; width: min(420px, 100%); flex-direction: column; background: var(--tof-white); box-shadow: -4px 0 24px rgba(50, 4, 20, 0.25); inset: 0 0 0 auto; transform: translateX(100%); transition: transform 0.22s ease; } .tof-panel.is-open .tof-panel__sheet { transform: translateX(0); } .tof-panel__bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--tof-brand); color: #fff; } .tof-panel__title { margin: 0; color: #fff; font-size: 1.15em; } .tof-panel__x { padding: 0 4px; border: 0; background: none; color: #fff; font-size: 1.7em; line-height: 1; cursor: pointer; } .tof-panel__tools { display: flex; gap: 8px; padding: 14px 18px 0; } .tof-panel__tools .tof-places__search { flex: 1 1 auto; min-width: 0; } .tof-panel .tof-places__status { margin: 8px 18px 0; } .tof-panel__body { overflow-y: auto; flex: 1 1 auto; padding: 14px 18px 24px; -webkit-overflow-scrolling: touch; } .tof-picker__list { margin: 0; padding: 0; list-style: none; } .tof-pick { border-bottom: 1px solid var(--tof-line); } .tof-pick[hidden] { display: none; } .tof-pick__link { display: block; padding: 13px 4px; color: var(--tof-ink); text-decoration: none; } .tof-pick__link:hover { background: var(--tof-pale); } .tof-pick__name { display: block; color: var(--tof-brand); font-weight: 700; } .tof-pick__addr { display: block; color: var(--tof-muted); font-size: 0.88em; } .tof-pick__dist { display: block; color: var(--tof-ink); font-size: 0.8em; letter-spacing: 0.03em; text-transform: uppercase; } .tof-pick__dist[hidden] { display: none; } /* Phones: the sheet comes up from the bottom and stops short of the top, which reads as a sheet rather than a page and keeps the close button reachable. */ @media (max-width: 640px) { .tof-panel__sheet { width: 100%; border-radius: 14px 14px 0 0; inset: 12% 0 0; transform: translateY(100%); } .tof-panel.is-open .tof-panel__sheet { transform: translateY(0); } .tof-panel__bar { border-radius: 14px 14px 0 0; } } @media (prefers-reduced-motion: reduce) { .tof-panel__sheet, .tof-panel__scrim { transition: none; } } /* ---------- location gate ---------- */ /* * Shown only once JS confirms geolocation exists — see openGate(). Without JS * this never appears and the full list is the page, so nobody is ever stuck * behind a wall they have no way through. */ .tof-gate { max-width: 520px; margin: 0 auto; padding: 40px 24px 44px; text-align: center; } .tof-gate[hidden] { display: none; } .tof-gate__title { margin: 0 0 10px; color: var(--tof-brand); font-size: 1.6em; line-height: 1.2; } .tof-gate__body { margin: 0 0 22px; color: var(--tof-ink); font-size: 1.05em; } .tof-gate__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; } .tof-gate__actions .tof-btn { width: 100%; max-width: 340px; } .tof-gate__note { margin: 18px 0 0; color: var(--tof-muted); font-size: 0.85em; } .tof-places__head[hidden], .tof-places__groups[hidden] { display: none; } /* ---------- map ---------- */ .tof-placemap { margin: 26px 0 0; } .tof-placemap[hidden] { display: none; } .tof-placemap__title { margin: 0 0 10px; color: var(--tof-brand); font-size: 1.05em; letter-spacing: 0.04em; text-transform: uppercase; } .tof-placemap__frame { overflow: hidden; aspect-ratio: 16 / 7; border: 1px solid var(--tof-line); border-radius: var(--tof-radius); } .tof-placemap__frame iframe { display: block; width: 100%; height: 100%; border: 0; } @media (max-width: 600px) { .tof-placemap__frame { aspect-ratio: 4 / 3; } } /* ---------- slide-over: stacked tools, per-row book button ---------- */ .tof-panel__tools { flex-direction: column; } .tof-btn--block { display: block; width: 100%; text-align: center; } .tof-panel__tools .tof-places__search { width: 100%; } /* Name and address on the left, a small Book now on the right. The whole row is still one link, so the button is a target, not a second decision. */ .tof-pick__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tof-pick__text { min-width: 0; flex: 1 1 auto; } .tof-pick__book { flex: 0 0 auto; padding: 7px 14px; border: 1px solid var(--tof-brand); border-radius: 999px; background: var(--tof-brand); color: #fff; font-size: 0.72em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .tof-pick__link:hover .tof-pick__book { border-color: var(--tof-brand-dark); background: var(--tof-brand-dark); } /* * A location that isn't open yet keeps its place in the list but stops * competing with the ones that can actually take the booking — outline * instead of solid, so "Learn more" doesn't read as another Book now. */ .tof-pick.is-soon .tof-pick__book { border-color: var(--tof-line); background: transparent; color: var(--tof-muted); } .tof-pick.is-soon .tof-pick__link:hover .tof-pick__book { border-color: var(--tof-brand); background: transparent; color: var(--tof-brand); } .tof-pick__soon { display: inline-block; margin: 2px 0 1px; padding: 2px 8px; border-radius: 999px; background: var(--tof-pale); color: var(--tof-brand-dark); font-size: 0.68em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } /* With button="0" the root only carries the panel, which is fixed-position — so the block itself must not occupy any space in the flow. */ .tof-pickerroot:not(:has(> .tof-btn)) { display: contents; } /* Search is submitted now, so the field and its button share a row. */ .tof-places__searchwrap { display: flex; gap: 8px; } .tof-places__searchwrap .tof-btn { flex: 0 0 auto; padding: 11px 18px; } .tof-panel__searchform { display: flex; width: 100%; align-items: stretch; gap: 8px; } /* * Every search row, in the grid and in the slide-over. * * Matching padding is not enough to match height: an input's line box is the * browser's "normal" (~1.2) while a button inherits the theme's body * line-height, nearer 1.7 — so identical padding renders a visibly taller * button. Both are pinned to one height and centred. * * Kept as one rule covering both rows on purpose. They were fixed separately * once and drifted apart again the moment the theme's typography moved. */ .tof-places__tools .tof-places__search, .tof-places__tools .tof-btn, .tof-panel__searchform .tof-places__search, .tof-panel__searchform .tof-btn { height: 46px; padding-top: 0; padding-bottom: 0; line-height: 1; } .tof-places__tools .tof-btn, .tof-panel__searchform .tof-btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; padding-right: 18px; padding-left: 18px; } /* The row itself has to stretch, or a taller sibling leaves the rest short. */ .tof-places__tools, .tof-places__searchwrap { align-items: stretch; } /* * Phones: Use my location takes the whole width of its own row. * * It already wraps onto a second line at this width, where a button sized to * its text sits alone against the left margin and reads like something left * over rather than the second of two ways to search. Full width is also the * easier tap target, and it matches how the same button is presented in the * slide-over. */ @media (max-width: 640px) { .tof-places__tools .tof-btn[data-tof-near] { width: 100%; flex: 1 1 100%; } } .tof-places__searchwrap { display: flex; gap: 8px; }