/* * hbd-locations-map — the full-bleed clinic map, its floating panel, and the single-clinic embed. * * Every number is a var(--hbd-map-*) from assets/css/tokens.css, where the measurement it came from is * named. Breakpoints are the three production switches at: 768 (the panel appears in place of the * overlay card), 1024 (the heading grows and the panel moves 40px in) and 1280 (the panel widens to * 460) — docs/audit/widgets/locations-map.md §2. Enqueued as `hbd-widget-locations-map` only on pages * that render a map. */ /* ------------------------------------------------------------------ shell */ /* Full bleed with no gutter of its own: the map runs edge to edge and the panel is positioned inside it, so the shared 1280px inner box would only get in the way. */ .hbd-w-locations-map > .hbd-w__inner { max-width: none; padding-inline: 0; } .hbd-w-locations-map { padding-top: var(--hbd-map-card-top); } @media (min-width: 768px) { .hbd-w-locations-map { padding-top: var(--hbd-map-pad-top); } } /* The stage is exactly the map's box, so the panel's insets are the map's insets. Below 768 the map is pushed down to leave room for the card that overlaps its top edge. */ /* The 120px is the stage's *padding*, not the map's margin: a top margin on the first child collapses out of the stage and takes the panel — which is positioned against the stage's padding box — down with it. Measured at 390 before the fix: the head card sat at y164 instead of live's y44. */ .hbd-w-locations-map__stage { position: relative; padding-top: var(--hbd-map-card-pull); } .hbd-w-locations-map__map { height: var(--hbd-map-h); border-radius: var(--hbd-map-radius); background: var(--hbd-map-placeholder); overflow: hidden; } @media (min-width: 768px) { .hbd-w-locations-map__stage { padding-top: 0; } } /* Maps draws its own absolutely positioned furniture inside this box. */ .hbd-w-locations-map__map > div { height: 100%; } /* No key, or no clinic with coordinates: a flat panel with the reason, never a broken map. */ .hbd-w-locations-map__unavailable { display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; padding: var(--hbd-map-row-pad); font-size: var(--hbd-map-row-address); line-height: var(--hbd-map-row-address-lh); letter-spacing: var(--hbd-map-row-address-ls); color: var(--hbd-text-muted); text-align: center; } /* Below 768 the card covers the map's top 47px, so the note sits clear of it. */ @media (max-width: 767px) { .hbd-w-locations-map__unavailable { align-items: flex-start; padding-top: calc(var(--hbd-map-card-pull) / 2); } } /* ------------------------------------------------------------------ panel */ /* One element, two shapes. Below 768 it is the card overlapping the map's top edge; from 768 it floats over the map's right side and grows the clinic list. */ .hbd-w-locations-map__panel { position: absolute; top: 0; left: var(--hbd-map-card-inset); right: var(--hbd-map-card-inset); padding: var(--hbd-map-card-pad); background: var(--hbd-white); border-radius: var(--hbd-radius-card); box-shadow: var(--hbd-map-card-shadow); } @media (min-width: 768px) { .hbd-w-locations-map__panel { top: var(--hbd-map-panel-inset-block); bottom: var(--hbd-map-panel-inset-block); left: auto; right: var(--hbd-map-panel-inset); width: var(--hbd-map-panel-w); padding: var(--hbd-map-panel-pad); box-shadow: var(--hbd-map-panel-shadow); } } /* The inner column is capped at 600px and the list takes whatever the copy leaves — which is how live fits a 3-line heading at 1024 and a 2-line one at 768 into the same panel. */ @media (min-width: 768px) { .hbd-w-locations-map__panel-inner { display: flex; flex-direction: column; max-height: var(--hbd-map-panel-inner-h); } /* An open clinic card covers the panel; the copy and the list keep their space but stop painting, so nothing behind the card can be read or tabbed into. */ .hbd-w-locations-map__panel.is-open .hbd-w-locations-map__head, .hbd-w-locations-map__panel.is-open .hbd-w-locations-map__list { visibility: hidden; } } /* ------------------------------------------------------------------- head */ /* The whole heading is italic from 768 — it is the section's own styling, not a marked-up accent, so it lives here. Below 768 live sets it upright and a size smaller. */ .hbd-w-locations-map__heading { margin: 0 0 var(--hbd-map-card-heading-gap); font-size: var(--hbd-map-card-heading); line-height: var(--hbd-map-card-heading-lh); font-weight: 300; letter-spacing: normal; color: var(--hbd-ink); } .hbd-w-locations-map__text { margin: 0; font-size: var(--hbd-map-card-text); line-height: var(--hbd-map-card-text-lh); color: var(--hbd-ink); } @media (min-width: 768px) { .hbd-w-locations-map__heading { margin-bottom: var(--hbd-map-heading-gap); font-size: var(--hbd-map-heading); line-height: var(--hbd-map-heading-lh); font-style: italic; } .hbd-w-locations-map__text { font-size: var(--hbd-map-text); line-height: var(--hbd-map-text-lh); } } /* ------------------------------------------------------------------- list */ /* There is no clinic list on a phone at all — live drops it with the panel. */ .hbd-w-locations-map__list { display: none; } @media (min-width: 768px) { .hbd-w-locations-map__list { display: block; position: relative; flex: 1 1 auto; min-height: 0; margin-top: var(--hbd-map-text-gap); overflow-y: auto; } } .hbd-w-locations-map__rows { display: flex; flex-direction: column; gap: var(--hbd-map-row-gap); margin: 0; padding: 0 0 var(--hbd-map-list-pad); list-style: none; } /* A row is a link (so it goes somewhere with JavaScript off) painted as live's inert box. */ .hbd-w-locations-map__row { display: block; padding: var(--hbd-map-row-pad); border: var(--hbd-map-row-border); border-radius: var(--hbd-map-row-radius); color: inherit; text-decoration: none; cursor: pointer; } .hbd-w-locations-map__row:hover, .hbd-w-locations-map__row:focus { color: inherit; text-decoration: none; } .hbd-w-locations-map__row:focus-visible { outline: 2px solid var(--hbd-navy); outline-offset: 2px; } .hbd-w-locations-map__row:focus:not(:focus-visible) { outline: none; } .hbd-w-locations-map__row[aria-expanded="true"] { border-color: var(--hbd-navy); } .hbd-w-locations-map__row-name { margin: 0 0 var(--hbd-map-row-name-gap); font-family: var(--hbd-font-serif-2); font-size: var(--hbd-map-row-name); line-height: var(--hbd-map-row-name-lh); font-weight: 400; letter-spacing: var(--hbd-map-row-name-ls); color: var(--hbd-navy); } .hbd-w-locations-map__row-address { margin: 0; font-size: var(--hbd-map-row-address); line-height: var(--hbd-map-row-address-lh); letter-spacing: var(--hbd-map-row-address-ls); color: var(--hbd-ink); } .hbd-w-locations-map__row-line { display: block; } /* ----------------------------------------------------------------- nudge */ /* In the scroll flow after the last row, yet painted over the middle of the list: sticky, 20px above the scrollport's floor. One use scrolls the list to its end and removes it for good (§4). */ .hbd-w-locations-map__nudge { position: sticky; bottom: var(--hbd-map-nudge-inset); display: flex; justify-content: center; height: var(--hbd-map-nudge); margin-top: calc(-1 * var(--hbd-map-nudge)); pointer-events: none; } .hbd-w-locations-map__nudge-btn, .hbd-w-locations-map__nudge-btn:hover, .hbd-w-locations-map__nudge-btn:focus { background: var(--hbd-white); color: var(--hbd-ink); } .hbd-w-locations-map__nudge-btn { display: flex; align-items: center; justify-content: center; align-self: center; width: var(--hbd-map-nudge-disc); height: var(--hbd-map-nudge-disc); padding: 0; border: 0; border-radius: var(--hbd-radius-pill); box-shadow: var(--hbd-map-nudge-shadow); color: var(--hbd-ink); cursor: pointer; pointer-events: auto; animation: hbd-map-nudge 1.4s infinite; } .hbd-w-locations-map__nudge-btn:focus-visible { outline: 2px solid var(--hbd-navy); outline-offset: 2px; } .hbd-w-locations-map__nudge-btn:focus:not(:focus-visible) { outline: none; } .hbd-w-locations-map__nudge-glyph { width: var(--hbd-map-nudge-glyph); height: auto; } @keyframes hbd-map-nudge { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(var(--hbd-map-nudge-travel)); } } @media (prefers-reduced-motion: reduce) { .hbd-w-locations-map__nudge-btn { animation: none; } } /* It only does anything with JavaScript, so without it there is nothing to show. */ @media (scripting: none) { .hbd-w-locations-map__nudge { display: none; } } /* ------------------------------------------------------------ clinic card */ /* Rendered for every clinic and revealed in place of the list — so there is no client-side templating and the card's copy is in the page for anything that reads it. It covers the panel's *content box* (the panel is the positioned ancestor, so the inset is the panel's own padding), which is how live's card ends up the same width as the list it replaced and its two buttons land on the panel's floor. There is no list on a phone, so there is no way to open a card either — it is simply not rendered. */ .hbd-w-locations-map__clinic { display: none; } @media (min-width: 768px) { .hbd-w-locations-map__clinic { position: absolute; inset: var(--hbd-map-panel-pad); display: flex; flex-direction: column; background: var(--hbd-white); } .hbd-w-locations-map__clinic[hidden] { display: none; } } /* Live hangs the close button off the card's top-right corner, past the panel's edge, with no background of its own — and Astra paints every bare