with a so
inline child Fields keep working, and surfaces an explicit "set href"
pill at the top-right so the link target is still discoverable. */
.pb-categories__tile--editing { cursor: default; }
.pb-categories__tile--editing:hover { transform: none; }
.pb-categories__href-chip {
position: absolute;
top: 10px; right: 10px;
z-index: 3;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 11px;
font-weight: 600;
max-width: calc(100% - 20px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Icon-grid variant — compact 1:1 chips that read as a quick wayfinding
row instead of full-bleed photo tiles. Lighter card surface so labels
render in foreground tone (not on top of a darkened image). Used
when the operator wants to highlight categories by glyph rather than
hero imagery (e.g. a service menu with category icons). */
.pb-categories[data-variant="icons"] {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.pb-categories[data-variant="icons"] .pb-categories__tile {
aspect-ratio: 1 / 1;
background: var(--color-bg-emphasis);
border: 1px solid var(--color-border);
color: var(--color-fg);
padding: 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.pb-categories[data-variant="icons"] .pb-categories__tile::after {
display: none;
}
.pb-categories[data-variant="icons"] .pb-categories__tile img,
.pb-categories[data-variant="icons"] .pb-categories__tile .pyramid-img {
position: relative;
inset: auto;
width: 56%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
z-index: 0;
}
.pb-categories[data-variant="icons"] .pb-categories__tile .pyramid-field--image {
position: relative;
inset: auto;
width: 56%;
height: auto;
aspect-ratio: 1 / 1;
}
.pb-categories[data-variant="icons"] .pb-categories__label {
position: static;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
text-align: center;
color: var(--color-fg);
font-family: var(--ds-font-body);
}
.pb-categories[data-variant="icons"] .pb-categories__tile:hover {
border-color: var(--color-accent);
transform: translateY(-3px);
}
/* ---------- Locations ---------- */
.pb-locations {
display: grid; gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pb-location {
padding: 32px;
border-radius: var(--ds-radius-lg);
background: var(--color-bg);
border: 1px solid var(--color-border);
text-align: center;
}
.pb-location__city {
font-family: var(--ds-font-display);
font-size: 28px; margin: 0 0 16px; letter-spacing: -0.02em;
color: var(--color-accent);
}
.pb-location__addr { color: var(--color-fg-muted); margin: 4px 0; }
.pb-location__phone { font-weight: 700; font-size: 18px; margin: 12px 0 4px; }
.pb-location__hours { color: var(--color-fg-muted); font-size: 14px; margin: 0; }
/* List variant — single column rows, left-aligned, divider lines.
Better for >4 locations and dedicated "stores" pages where each
row needs to read like a directory entry instead of a feature card. */
.pb-locations[data-variant="list"] {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--color-border);
}
.pb-locations[data-variant="list"] .pb-location {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
gap: 24px;
padding: 22px 0;
border-radius: 0;
border: 0;
border-bottom: 1px solid var(--color-border);
background: transparent;
text-align: left;
align-items: baseline;
}
.pb-locations[data-variant="list"] .pb-location__city {
margin: 0;
font-size: 22px;
}
.pb-locations[data-variant="list"] .pb-location__phone {
margin: 0;
font-size: 16px;
}
.pb-locations[data-variant="list"] .pb-location__hours {
margin: 0;
}
.pb-locations[data-variant="list"] .pb-location__addr {
margin: 0;
}
@container pyramid (max-width: 720px) {
.pb-locations[data-variant="list"] .pb-location {
grid-template-columns: 1fr;
gap: 6px;
padding: 18px 0;
}
}
/* ---------- Service tiles ---------- */
.pb-services {
display: grid; gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}
.pb-service {
border-radius: var(--ds-radius-lg);
overflow: hidden;
background: var(--color-bg-emphasis);
border: 1px solid var(--color-border);
display: grid;
grid-template-rows: auto 1fr;
}
.pb-service__media { aspect-ratio: 16 / 10; overflow: hidden; }
.pb-service__media img { width: 100%; height: 100%; object-fit: cover; }
.pb-service__body { padding: 32px; display: grid; gap: 16px; }
.pb-service__eyebrow {
font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent);
}
.pb-service__title {
font-family: var(--ds-font-display);
font-size: clamp(24px, 3cqi, 36px); margin: 0; line-height: 1.1; letter-spacing: -0.02em;
}
.pb-service__copy { color: var(--color-fg-muted); margin: 0; line-height: 1.6; }
.pb-services[data-variant="compact"] .pb-service__body { padding: 22px; }
.pb-services[data-variant="compact"] .pb-service__media { aspect-ratio: 16 / 9; }
.pb-services[data-variant="stacked"] {
grid-template-columns: 1fr;
max-width: 720px;
margin-inline: auto;
}
.pb-services[data-variant="elevated"] .pb-service {
border-color: color-mix(in oklab, var(--color-accent) 32%, var(--color-border));
box-shadow:
0 16px 36px color-mix(in oklab, var(--color-bg) 55%, rgba(0, 0, 0, 0.22)),
0 0 0 1px color-mix(in oklab, var(--color-accent) 12%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
.pb-services[data-variant="elevated"] .pb-service {
transition:
transform 220ms cubic-bezier(0.25, 1, 0.5, 1),
box-shadow 220ms ease,
border-color 220ms ease;
}
.pb-services[data-variant="elevated"] .pb-service:hover {
transform: translateY(-6px);
box-shadow:
0 22px 48px color-mix(in oklab, var(--color-accent) 18%, rgba(0, 0, 0, 0.28)),
0 0 0 1px var(--color-accent);
border-color: var(--color-accent);
}
}
/* ---------- Benefits ---------- */
.pb-benefits {
display: grid; gap: 32px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.pb-benefit { padding: 0 8px; }
.pb-benefit__title {
font-family: var(--ds-font-display);
font-size: 28px; margin: 0 0 12px; letter-spacing: -0.02em;
color: var(--color-accent);
}
.pb-benefit__body { color: var(--color-fg-muted); margin: 0; line-height: 1.6; max-width: 50ch; }
.pb-benefits[data-variant="cards"] .pb-benefit {
padding: 24px 22px;
border-radius: var(--ds-radius-lg);
background: var(--color-bg-emphasis);
border: 1px solid var(--color-border);
}
.pb-benefits[data-variant="tight"] {
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* ---------- Trust strip ---------- */
.pb-truststrip__title {
font-family: var(--ds-font-display);
font-size: clamp(28px, 5cqi, 44px);
letter-spacing: -0.02em;
margin: 0 auto;
max-width: 40ch;
line-height: 1.15;
}
.pb-truststrip {
list-style: none;
margin: 0;
padding: 16px 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 4px;
border-radius: var(--ds-radius-lg);
background: var(--color-bg-emphasis);
border: 1px solid var(--color-border);
}
.pb-truststrip[data-variant="quiet"] {
background: color-mix(in oklab, var(--color-bg-emphasis) 60%, transparent);
}
.pb-truststrip__item {
display: inline-flex;
align-items: center;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-fg-muted);
}
.pb-truststrip__item:not(:last-child)::after {
content: "·";
margin-left: 10px;
color: var(--color-accent);
font-weight: 700;
opacity: 0.85;
}
.pb-truststrip__text { color: inherit; }
/* Marquee / ticker (duplicate row + translateX -50%, like pb-marquee) */
.pb-truststrip--marquee {
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
border-radius: var(--ds-radius-lg);
background: var(--color-bg-emphasis);
border: 1px solid var(--color-border);
}
.pb-truststrip--marquee[data-variant="quiet"] {
background: color-mix(in oklab, var(--color-bg-emphasis) 60%, transparent);
}
.pb-truststrip__viewport {
overflow: hidden;
}
.pb-truststrip__track {
display: flex;
flex-wrap: nowrap;
align-items: center;
list-style: none;
margin: 0;
padding: 16px 20px;
width: max-content;
animation: pb-truststrip-marquee 42s linear infinite;
}
.pb-truststrip__track-item {
display: inline-flex;
align-items: center;
flex-shrink: 0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-fg-muted);
white-space: nowrap;
}
.pb-truststrip__track-sep {
margin-inline: 10px;
color: var(--color-accent);
font-weight: 700;
opacity: 0.85;
}
@keyframes pb-truststrip-marquee {
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.pb-truststrip__track {
animation: none;
}
}
/* ---------- Process steps ---------- */
.pb-process__title {
font-family: var(--ds-font-display);
font-size: clamp(32px, 6cqi, 52px);
text-align: center;
letter-spacing: -0.03em;
margin: 0 0 48px;
line-height: 1.1;
}
.pb-process {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(24px, 4cqi, 40px);
}
.pb-process[data-variant="horizontal"] {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pb-process[data-variant="stacked"] {
grid-template-columns: 1fr;
max-width: 640px;
margin-inline: auto;
}
.pb-process__step {
margin: 0;
padding: 0;
/* Grid row stretch gives each li the same height; flex lets the card fill it */
display: flex;
flex-direction: column;
min-height: 0;
}
.pb-process__step-inner {
display: flex;
gap: 20px;
align-items: flex-start;
flex: 1 1 auto;
min-height: 0;
padding: 24px 22px;
border-radius: var(--ds-radius-lg);
background: var(--color-bg-emphasis);
border: 1px solid var(--color-border);
}
/* Editor: list-item wrapper defaults to align-items:flex-start — stretch so cards match row height */
.pb-process[data-variant="horizontal"] .pyramid-list-item--block {
align-items: stretch;
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
.pb-process[data-variant="horizontal"] .pyramid-list-item--block .pyramid-list-item__remove {
align-self: flex-start;
}
.pb-process__num {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ds-font-display);
font-weight: 700;
font-size: 18px;
background: color-mix(in oklab, var(--color-accent) 22%, var(--color-bg));
color: var(--color-accent);
border: 1px solid color-mix(in oklab, var(--color-accent) 45%, var(--color-border));
}
.pb-process__body { min-width: 0; }
.pb-process__step-title {
font-family: var(--ds-font-display);
font-size: 20px;
margin: 0 0 10px;
letter-spacing: -0.02em;
line-height: 1.2;
}
.pb-process__step-body {
margin: 0;
color: var(--color-fg-muted);
line-height: 1.6;
font-size: 15px;
}
/* ---------- Brand strip ---------- */
.pb-brandstrip__head {
display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 40px;
}
.pb-brandstrip__head > div { max-width: 60ch; }
.pb-brandstrip__grid {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.pb-brandstrip__chip {
display: flex; align-items: center; justify-content: center;
padding: 28px 16px;
border-radius: var(--ds-radius);
background: var(--color-bg-emphasis);
border: 1px solid var(--color-border);
font-family: var(--ds-font-display);
font-size: 18px;
letter-spacing: -0.01em;
text-align: center;
transition: border-color 200ms, transform 200ms;
}
.pb-brandstrip__chip:hover { border-color: var(--color-accent); transform: translateY(-2px); }
/* Marquee variant — published-only (editor stays in grid mode so chips
remain click-editable). The track holds the brand list duplicated
once and translates -50% to wrap seamlessly. */
.pb-brandstrip__marquee {
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pb-brandstrip__marquee-track {
display: flex;
gap: 12px;
width: max-content;
animation: pb-brandstrip-marquee 36s linear infinite;
}
.pb-brandstrip__chip--marquee {
flex-shrink: 0;
min-width: 200px;
}
@keyframes pb-brandstrip-marquee {
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.pb-brandstrip__marquee-track { animation: none; }
}
@container pyramid (max-width: 720px) {
.pb-brandstrip__head { grid-template-columns: 1fr; }
}
/* ---------- Blog cards ---------- */
.pb-blog {
display: grid; gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.pb-blog__card {
display: grid;
grid-template-rows: auto 1fr;
border-radius: var(--ds-radius-lg);
overflow: hidden;
background: var(--color-bg-emphasis);
border: 1px solid var(--color-border);
text-decoration: none;
color: inherit;
transition: transform 300ms var(--ds-ease), border-color 300ms;
}
.pb-blog__card:hover { transform: translateY(-4px); border-color: var(--color-accent); }
.pb-blog__card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pb-blog__body { padding: 24px; display: grid; gap: 10px; }
.pb-blog__date { color: var(--color-fg-muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.pb-blog__title {
font-family: var(--ds-font-display);
font-size: 22px; margin: 0; line-height: 1.2; letter-spacing: -0.01em;
}
.pb-blog__excerpt { color: var(--color-fg-muted); margin: 0; line-height: 1.5; font-size: 14px; }
.pb-blog__more { color: var(--color-accent); font-weight: 600; font-size: 14px; margin-top: 4px; }
.pb-blog[data-variant="list"] {
grid-template-columns: 1fr;
gap: 16px;
}
.pb-blog[data-variant="list"] .pb-blog__card {
grid-template-columns: minmax(100px, 180px) 1fr;
grid-template-rows: minmax(0, 1fr);
}
.pb-blog[data-variant="list"] .pb-blog__card img {
height: 100%;
min-height: 120px;
}
.pb-blog[data-variant="compact"] {
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pb-blog[data-variant="compact"] .pb-blog__body { padding: 18px; }
/* ---------- Newsletter ---------- */
.pb-newsletter {
max-width: 640px;
margin: 0 auto;
text-align: center;
padding: clamp(40px, 6cqi, 80px);
border-radius: var(--ds-radius-lg);
background:
radial-gradient(60% 100% at 50% 0%, color-mix(in oklab, var(--color-accent) 18%, transparent), transparent 70%),
var(--color-bg-emphasis);
border: 1px solid var(--color-border);
}
.pb-newsletter__form {
display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap;
}
.pb-newsletter__input {
flex: 1 1 280px;
padding: 14px 18px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-fg);
font-size: 15px;
font-family: inherit;
}
.pb-newsletter__input:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pb-newsletter__consent { color: var(--color-fg-muted); font-size: 12px; margin: 12px 0 0; line-height: 1.5; }
.pb-newsletter__ok { color: var(--color-accent); font-size: 18px; font-weight: 600; margin: 0 0 16px; }
/* Card variant — same shape as the centered default but with a stronger
surface (deeper background + larger radius + drop shadow) so the
block reads as a "feature card" inside a longer page. Drops the
accent radial wash; uses a clean themed mat instead. */
.pb-newsletter[data-variant="card"] {
background: var(--color-bg);
box-shadow:
0 1px 0 color-mix(in oklab, var(--color-fg) 6%, transparent),
0 24px 64px -16px color-mix(in oklab, var(--color-fg) 18%, transparent);
border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent);
}
/* Inline bar variant — a single-line strip with copy on the left and
the form on the right. Best at the bottom of long pages where a full
card would feel like a second hero. */
.pb-newsletter[data-variant="inline"] {
max-width: var(--ds-container);
text-align: left;
padding: clamp(24px, 4cqi, 40px);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(24px, 4cqi, 48px);
align-items: center;
}
.pb-newsletter[data-variant="inline"] .pb-newsletter__form {
margin-bottom: 0;
justify-content: flex-start;
}
@container pyramid (max-width: 720px) {
.pb-newsletter[data-variant="inline"] {
grid-template-columns: 1fr;
text-align: center;
}
.pb-newsletter[data-variant="inline"] .pb-newsletter__form {
justify-content: center;
}
}
/* ============================================================
RESPONSIVE — container queries against .pyramid-theme
============================================================
Three breakpoints across all 20 blocks:
1024px → tablet adjustments. Mostly nav crowding + grid density.
720px → primary mobile pivot. Single-column grids, smaller hero.
480px → tight phone. Tighter padding + typography compression.
Container-relative `cqw` units are used for typography so headings
scale with the device width inside the editor preview, not the actual
browser viewport. That's the difference between "mobile preview looks
like real mobile" and "mobile preview is a narrow desktop". */
/* ---------- 1024px (tablet) ---------- */
@container pyramid (max-width: 1024px) {
/* Section gutters tighten. The published `--ds-container` already
handles its own width, but section padding-block needs a hand. */
.pyramid-section { padding-block: clamp(48px, 7cqw, 96px); }
/* Nav — hamburger at ≤1024px pyramid width (includes iPad editor
frame ~834px). A single horizontal row is too narrow for brand +
many links + dual CTAs without ugly wrapping; 720px was too low
and left tablet in the broken in-between state. */
.pb-nav__inner {
flex-direction: row;
flex-wrap: wrap;
gap: 0;
padding: 14px 16px;
align-items: center;
justify-content: space-between;
}
.pb-nav__toggle { display: inline-flex; }
.pb-nav__mid {
flex-basis: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
font-size: 16px;
max-height: 0;
overflow: hidden;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
border-top: 1px solid transparent;
transition:
max-height 220ms ease,
padding 220ms ease,
margin-top 180ms ease,
border-top-color 180ms ease;
}
.pb-nav__links {
flex-direction: column;
align-items: stretch;
gap: 0;
font-size: 16px;
margin-top: 0;
padding: 0;
border: 0;
}
.pb-nav__edit-add-link { padding: 4px 4px 8px; }
.pb-nav__links li { width: 100%; }
.pb-nav__links a {
display: block;
padding: 12px 4px;
font-size: 16px;
}
.pb-nav__cta {
flex-basis: 100%;
justify-content: stretch;
margin-top: 0;
max-height: 0;
overflow: hidden;
transition: max-height 220ms ease, margin-top 180ms ease;
}
.pb-nav__cta .pyramid-cta { width: 100%; }
.pb-nav[data-open="true"] .pb-nav__mid {
max-height: 560px;
margin-top: 12px;
padding-top: 8px;
padding-bottom: 8px;
border-top-color: var(--color-border);
}
.pb-nav[data-open="true"] .pb-nav__cta {
max-height: 200px;
margin-top: 12px;
flex-direction: column;
align-items: stretch;
}
.pb-nav[data-open="true"] .pb-nav__cta .pb-nav__secondary-cta {
width: 100%;
justify-content: center;
}
/* Service tiles: 2 columns is fine but make sure the minmax stops
forcing horizontal scroll inside the iPad frame. */
.pb-services { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Split hero: side-by-side is cramped on tablet-width containers — stack
with a bounded media height so the section does not read as triple-tall. */
.pb-hero[data-variant="split"] {
grid-template-columns: 1fr;
min-height: clamp(460px, 82cqh, 880px);
}
.pb-hero[data-variant="split"] .pb-hero__media {
position: relative;
order: -1;
margin: 16px 18px 0;
height: auto;
aspect-ratio: 16 / 10;
max-height: min(calc(0.4 * var(--pyramid-viewport-height, 100dvh)), 380px);
}
.pb-hero[data-variant="split"] .pb-hero__veil { display: block; }
}
/* ---------- 720px (mobile pivot) ---------- */
@container pyramid (max-width: 720px) {
/* Tighter section gutters and side padding. Most blocks size their
inner container against `var(--ds-container)`; we override the
section padding here so blocks breathe on phones without each one
having to re-implement the rule. */
.pyramid-section { padding-block: clamp(40px, 9cqw, 72px); padding-inline: 16px; }
.pyramid-section--bleed { padding-inline: 0; }
.pyramid-section__container,
.pb-nav__inner,
.pb-hero__inner,
.pb-footer__inner,
.pb-footer__bottom,
.pb-notice__inner {
width: 100%;
}
/* Hero — re-anchor type to container width so the title doesn't blow
past the viewport on mobile. Original clamp used 8vw; cqw inside a
390px container gives a sensible ~50–60px headline. */
.pb-hero { min-height: clamp(420px, 90cqh, 720px); }
.pb-hero__inner {
padding-block: clamp(48px, 14cqw, 96px);
padding-inline: 20px;
max-width: 100%;
gap: 18px;
}
.pb-hero__title { font-size: clamp(40px, 12cqw, 72px); }
.pb-hero__sub { font-size: clamp(15px, 4cqw, 18px); }
.pb-hero__ctas { gap: 10px; }
.pb-hero__ctas .pyramid-cta,
.pb-hero__ghost { padding: 12px 18px; font-size: 15px; }
/* Split hero must collapse — no room for a 1fr 1fr at 390px. */
.pb-hero[data-variant="split"] { grid-template-columns: 1fr; }
.pb-hero[data-variant="split"] .pb-hero__media {
margin: 16px 16px 0;
height: auto;
aspect-ratio: 4 / 3;
min-height: 0;
}
.pb-hero[data-variant="split"] .pb-hero__veil { display: block; }
/* Nav hamburger: see @container (max-width: 1024px) — applies to
all phones and the tablet device frame, not only ≤720px. */
/* Marquee — dial down the type, shorter gap. */
.pb-marquee__track { gap: 36px; }
.pb-marquee__item { font-size: clamp(18px, 6cqw, 28px); }
/* Product grid — single column with a tighter gap. */
.pb-products__head { flex-direction: column; align-items: start; gap: 12px; margin-bottom: 24px; }
.pb-products__title { font-size: clamp(28px, 8cqw, 44px); }
.pb-products__grid { grid-template-columns: 1fr; gap: 16px; }
.pb-product__media { aspect-ratio: 1 / 1; }
/* Categories, blog, testimonials, brand chips, locations, benefits,
services — all collapse to a single column. (Stats stays 2-col so
the page doesn't read like a phonebook.) */
.pb-categories,
.pb-blog,
.pb-testimonials,
.pb-brandstrip__grid,
.pb-locations,
.pb-benefits,
.pb-services { grid-template-columns: 1fr; gap: 16px; }
.pb-process[data-variant="horizontal"] { grid-template-columns: 1fr; }
.pb-truststrip { padding: 14px 16px; gap: 6px 2px; }
.pb-truststrip__item { font-size: 11px; }
.pb-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.pb-stat__num { font-size: clamp(36px, 12cqw, 56px); }
.pb-categories__tile { aspect-ratio: 16 / 11; }
.pb-categories__label { bottom: 14px; left: 14px; font-size: 18px; }
.pb-service__body { padding: 22px; }
.pb-service__media { aspect-ratio: 16 / 9; }
.pb-location { padding: 22px; }
.pb-blog__body { padding: 18px; }
.pb-blog[data-variant="list"] .pb-blog__card {
grid-template-columns: 1fr;
}
/* Feature split — already migrated above (single column) but re-state
so flip-order behaves on mobile too. */
.pb-feature { gap: 24px; }
.pb-feature__media img { aspect-ratio: 4 / 3; }
.pb-feature__title { font-size: clamp(26px, 8cqw, 40px); }
.pb-feature__body { font-size: 16px; }
/* CTA banner — tighter padding; split collapses to single column. */
.pb-cta { padding: clamp(32px, 9cqw, 64px); }
.pb-cta__title { font-size: clamp(32px, 10cqw, 56px); }
.pb-cta__sub { font-size: 16px; }
.pb-cta[data-variant="split"] {
grid-template-columns: 1fr;
text-align: center;
}
.pb-cta[data-variant="split"] .pb-cta__action { justify-content: center; }
.pb-cta[data-variant="split"] .pb-cta__sub { margin-bottom: 24px; }
/* FAQ — narrower inner padding. */
.pb-faq details { padding: 14px 16px; }
.pb-faq summary { font-size: 16px; }
/* Newsletter — full-width inside the device, smaller padding. */
.pb-newsletter { padding: 32px 20px; border-radius: var(--ds-radius); }
.pb-newsletter__form { flex-direction: column; align-items: stretch; }
.pb-newsletter__input { flex: 1 1 auto; }
/* Notice bar — center, no horizontal scroll on long notices. */
.pb-notice__inner { padding: 8px 14px; font-size: 12px; }
/* Age gate (preview only — fixed overlay only fires in published mode) */
.pb-agegate__card { padding: 28px 22px; }
.pb-agegate__title { font-size: 26px; }
/* Hours — head row of title + open/closed pill is already flex-wrap;
collapse the optional grid layout to 1 column too so weekly rows
stack instead of side-by-side on a 390px screen. */
.pb-hours[data-layout="grid"] .pb-hours__list { grid-template-columns: 1fr; }
.pb-hours__row { gap: 12px; }
.pb-hours__day, .pb-hours__times { font-size: 15px; }
/* Reservations form — heading shrinks; the inner form is already
max-width: 640px. Tighten padding so the card doesn't dominate. */
.pb-reservations { gap: 18px; }
.pb-reservations__title { font-size: clamp(24px, 6cqi, 32px); }
.pb-reservations__sub { font-size: 14px; }
.pb-reservations__form { padding: 18px; }
.pb-reservations__field { font-size: 13px; }
/* Map block — caption + directions affordance shrink, iframe height
drops further at 480px below. */
.pb-map { border-radius: var(--ds-radius); }
.pb-map__caption { padding: 8px 12px; font-size: 12px; }
}
/* ---------- 480px (tight phone) ---------- */
@container pyramid (max-width: 480px) {
/* Footer collapse already handled above. Trim hero further so a 360px
phone doesn't get squeezed. */
.pb-hero { min-height: clamp(380px, 95cqh, 600px); }
.pb-hero__title { font-size: clamp(36px, 13cqw, 56px); letter-spacing: -0.02em; }
.pb-hero__inner { padding-inline: 16px; gap: 14px; }
.pb-hero__eyebrow { font-size: 11px; padding: 6px 10px; }
/* Section padding tighter. */
.pyramid-section { padding-block: clamp(32px, 10cqw, 56px); padding-inline: 14px; }
/* Stats: drop to a single 2-up row but with smaller numbers. */
.pb-stat__num { font-size: clamp(32px, 13cqw, 48px); }
/* Marquee runs faster at narrow widths so motion doesn't feel sluggish. */
.pb-marquee__track { animation-duration: 22s; }
}
/* ---------- Map block ----------------------------------------------------
`data-height` sets --map-h (viewport-relative via cqi) as a max band height.
Frame shapes: wide 16∶9, cinematic 21∶9, square 1∶1, portrait 3∶4, strip bar,
full bleed. Heights cap at --map-h except strip (fixed band).
`data-composition` adds split / stacked copy beside or above the map.
Directions sit inside `.pb-map__viewport` so they overlay the map, not
the caption. */
.pb-map {
/* cap height by preset; cqi tracks preview / published column width */
--map-h: min(46cqi, calc(0.5 * var(--pyramid-viewport-height, 100dvh)), 400px);
width: var(--ds-container);
margin-inline: auto;
border-radius: var(--ds-radius-lg);
position: relative;
background: linear-gradient(
165deg,
color-mix(in srgb, var(--color-bg) 40%, var(--color-bg-emphasis)) 0%,
color-mix(in srgb, var(--color-bg-emphasis) 92%, var(--color-bg)) 100%
);
border: 1px solid color-mix(in srgb, var(--color-border) 85%, var(--color-fg));
box-shadow:
0 1px 0 color-mix(in srgb, var(--color-bg) 80%, transparent),
0 1px 2px color-mix(in srgb, var(--color-fg) 6%, transparent),
0 20px 50px color-mix(in srgb, var(--color-fg) 7%, transparent);
}
/* Soft glass — lighter lift, still reads as a designed object */
.pb-map[data-chrome="soft"] {
background: linear-gradient(
165deg,
color-mix(in srgb, var(--color-bg) 52%, var(--color-bg-emphasis)) 0%,
color-mix(in srgb, var(--color-bg-emphasis) 88%, var(--color-bg)) 100%
);
border: 1px solid color-mix(in srgb, var(--color-border) 72%, var(--color-fg));
box-shadow:
0 1px 0 color-mix(in srgb, var(--color-bg) 72%, transparent),
0 28px 72px color-mix(in srgb, var(--color-fg) 8%, transparent);
}
.pb-map[data-chrome="soft"] .pb-map__frame {
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--color-fg) 7%, transparent),
inset 0 0 0 1px color-mix(in srgb, var(--color-fg) 5%, transparent);
}
/* Minimal line — flat editorial frame */
.pb-map[data-chrome="outline"] {
background: var(--color-bg);
border: 1px solid color-mix(in srgb, var(--color-fg) 12%, var(--color-border));
box-shadow: none;
}
.pb-map[data-chrome="outline"] .pb-map__frame {
background: color-mix(in srgb, var(--color-bg-emphasis) 94%, var(--color-bg));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-fg) 7%, transparent);
}
/* Dark “hero” card — strong frame, accent CTA reads as premium. */
.pb-map[data-chrome="spotlight"] {
background: linear-gradient(
155deg,
color-mix(in oklab, var(--color-fg) 88%, var(--color-bg)) 0%,
color-mix(in oklab, var(--color-fg) 94%, var(--color-accent)) 100%
);
color: color-mix(in oklab, var(--color-bg) 96%, var(--color-fg));
border: 1px solid color-mix(in srgb, var(--color-bg) 22%, transparent);
box-shadow:
0 1px 0 color-mix(in srgb, var(--color-bg) 12%, transparent),
0 28px 56px color-mix(in srgb, #000 38%, transparent);
}
.pb-map[data-chrome="spotlight"][data-layout="fullbleed"] {
padding-inline: clamp(18px, 5cqi, 40px);
padding-block: clamp(20px, 4cqi, 36px);
box-sizing: border-box;
}
.pb-map[data-chrome="spotlight"] .pb-map__title {
color: color-mix(in oklab, var(--color-bg) 98%, var(--color-fg));
}
.pb-map[data-chrome="spotlight"] .pb-map__body,
.pb-map[data-chrome="spotlight"] .pb-map__caption {
color: color-mix(in oklab, var(--color-bg) 72%, var(--color-fg-muted));
}
.pb-map[data-chrome="spotlight"] .pb-map__location {
color: color-mix(in oklab, var(--color-bg) 88%, var(--color-fg));
border-top-color: color-mix(in srgb, var(--color-bg) 22%, transparent);
}
.pb-map[data-chrome="spotlight"] .pb-map__eyebrow {
background: color-mix(in srgb, var(--color-bg) 14%, transparent);
border-color: color-mix(in srgb, var(--color-bg) 28%, transparent);
color: color-mix(in oklab, var(--color-bg) 78%, var(--color-fg-muted));
}
.pb-map[data-chrome="spotlight"] .pb-map__frame {
/* Match the dark card — avoid a light `--color-bg-emphasis` mat behind the map */
background: color-mix(in oklab, var(--color-fg) 76%, var(--color-accent) 24%);
border-radius: 20px;
box-shadow:
0 20px 44px color-mix(in srgb, #000 32%, transparent),
inset 0 0 0 1px color-mix(in srgb, var(--color-bg) 16%, transparent);
}
.pb-map[data-chrome="spotlight"] .pb-map__iframe,
.pb-map[data-chrome="spotlight"] .pb-map__leaflet {
background: color-mix(in oklab, var(--color-fg) 82%, var(--color-bg));
}
.pb-map[data-layout="fullbleed"][data-chrome="spotlight"] .pb-map__frame {
border-radius: 18px;
}
.pb-map[data-chrome="spotlight"] .pb-map__caption {
border-top-color: color-mix(in srgb, var(--color-bg) 18%, transparent);
}
.pb-map[data-composition="stacked"] {
display: grid;
gap: clamp(20px, 4cqi, 32px);
grid-template-columns: minmax(0, 1fr);
}
.pb-map[data-composition="splitStart"] {
display: grid;
gap: clamp(22px, 4.5cqi, 40px);
grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
grid-template-areas: "copy map";
align-items: stretch;
}
.pb-map[data-composition="splitEnd"] {
display: grid;
gap: clamp(22px, 4.5cqi, 40px);
grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
grid-template-areas: "map copy";
align-items: stretch;
}
/* Split layouts reserve a "copy" cell for `.pb-map__intro`. When every intro
field is empty (common with Place-ID-only maps: no auto location line),
MapIntro renders nothing — but the grid still allocated copy, which reads
as a large empty spotlight/dark band. Collapse to map-only. */
.pb-map[data-composition="splitStart"]:not(:has(.pb-map__intro)),
.pb-map[data-composition="splitEnd"]:not(:has(.pb-map__intro)) {
grid-template-columns: 1fr;
grid-template-areas: "map";
}
.pb-map__intro {
grid-area: copy;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
min-width: 0;
}
.pb-map[data-composition="stacked"] .pb-map__intro {
text-align: center;
align-items: center;
max-width: 40rem;
margin-inline: auto;
}
.pb-map__eyebrow {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--color-bg) 70%, var(--color-bg-emphasis));
border: 1px solid var(--color-border);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--color-fg-muted);
margin-bottom: 14px;
}
.pb-map__title {
font-family: var(--ds-font-display);
font-size: clamp(26px, 4.2cqi, 40px);
font-weight: var(--ds-font-display-weight, 700);
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0 0 12px;
color: var(--color-fg);
}
.pb-map__body {
margin: 0;
font-size: clamp(15px, 2.8cqi, 17px);
line-height: 1.6;
color: var(--color-fg-muted);
max-width: 52ch;
}
.pb-map[data-composition="stacked"] .pb-map__body {
max-width: 48ch;
}
.pb-map__location {
margin: 16px 0 0;
font-size: 14px;
line-height: 1.5;
font-weight: 500;
color: var(--color-fg);
padding-top: 14px;
border-top: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}
.pb-map[data-composition="stacked"] .pb-map__location {
text-align: center;
max-width: 42ch;
}
.pb-map[data-layout="fullbleed"][data-composition="splitStart"] .pb-map__intro,
.pb-map[data-layout="fullbleed"][data-composition="splitEnd"] .pb-map__intro,
.pb-map[data-layout="fullbleed"][data-composition="stacked"] .pb-map__intro {
padding-inline: clamp(16px, 4cqi, 28px);
}
.pb-map[data-height="compact"] {
--map-h: min(36cqi, calc(0.4 * var(--pyramid-viewport-height, 100dvh)), 280px);
}
.pb-map[data-height="balanced"] {
--map-h: min(46cqi, calc(0.5 * var(--pyramid-viewport-height, 100dvh)), 400px);
}
.pb-map[data-height="tall"] {
--map-h: min(62cqi, calc(0.56 * var(--pyramid-viewport-height, 100dvh)), 520px);
}
.pb-map[data-layout="fullbleed"] {
width: 100%;
margin-inline: 0;
border-radius: 0;
border-inline: 0;
box-shadow: none;
background: var(--color-bg-emphasis);
}
.pb-map[data-layout="fullbleed"][data-chrome="spotlight"] {
box-shadow: none;
background: linear-gradient(
155deg,
color-mix(in oklab, var(--color-fg) 88%, var(--color-bg)) 0%,
color-mix(in oklab, var(--color-fg) 94%, var(--color-accent)) 100%
);
}
.pb-map[data-layout="fullbleed"][data-chrome="soft"] {
box-shadow: none;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-bg) 38%, var(--color-bg-emphasis)) 0%,
var(--color-bg-emphasis) 100%
);
}
.pb-map[data-layout="fullbleed"][data-chrome="outline"] {
box-shadow: none;
background: var(--color-bg);
border-inline: 0;
border-block: 1px solid color-mix(in srgb, var(--color-fg) 10%, var(--color-border));
}
.pb-map__viewport {
grid-area: map;
position: relative;
width: 100%;
border-radius: inherit;
overflow: hidden;
min-width: 0;
/* Stack frame + overlay controls; lets the map grow when the grid row is
taller than the intrinsic 16∶9 box (split layouts used to leave a huge
empty band under a short frame). */
display: flex;
flex-direction: column;
min-height: 0;
}
.pb-map[data-layout="fullbleed"] .pb-map__viewport {
border-radius: 0;
}
.pb-map[data-composition="embed"] .pb-map__viewport {
grid-area: unset;
}
/* Side-by-side copy + map: stretch the map column to at least --map-h so the
iframe/Leaflet fills the cell instead of sitting in a thin strip. */
.pb-map[data-composition="splitStart"] .pb-map__viewport,
.pb-map[data-composition="splitEnd"] .pb-map__viewport {
min-height: var(--map-h);
align-self: stretch;
}
.pb-map[data-composition="stacked"] .pb-map__viewport {
min-height: var(--map-h);
}
.pb-map__frame {
position: relative;
overflow: hidden;
border-radius: inherit;
/* Map children fill this box via flex — avoids “absolute-only” collapse. */
display: flex;
flex-direction: column;
flex: 0 1 auto;
/* Tint toward page bg so the well isn’t a bright slab on dark / soft sections */
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-bg) 24%, transparent) 0%,
transparent 42%
),
color-mix(in srgb, var(--color-bg) 42%, var(--color-bg-emphasis));
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--color-fg) 8%, transparent),
inset 0 0 0 1px color-mix(in srgb, var(--color-fg) 5%, transparent);
/* If --map-h fails to resolve, percentage heights on the iframe collapse
to the UA default (~150px). Keep a floor so the map never “ribbon”s. */
min-height: 200px;
}
/* Full width of the card; 16∶9 height from width, capped by height preset */
.pb-map[data-layout="wide"] .pb-map__frame {
width: 100%;
aspect-ratio: 16 / 9;
max-height: var(--map-h);
margin-inline: auto;
/* Do not use min-height:0 here — it removed the floor and let the flex
map strip collapse when aspect-ratio + absolute children misbehaved. */
flex: 0 0 auto;
}
/* Ultrawide “cinema” band — same cap as banner, wider aspect */
.pb-map[data-layout="cinematic"] .pb-map__frame {
width: 100%;
aspect-ratio: 21 / 9;
max-height: var(--map-h);
margin-inline: auto;
flex: 0 0 auto;
}
.pb-map[data-layout="square"] {
max-width: min(100%, 560px);
margin-inline: auto;
}
.pb-map[data-layout="square"] .pb-map__frame {
width: min(100%, var(--map-h));
height: var(--map-h);
margin-inline: auto;
flex: 0 0 auto;
}
.pb-map[data-layout="portrait"] {
max-width: min(100%, 560px);
margin-inline: auto;
}
.pb-map[data-layout="portrait"] .pb-map__frame {
width: min(100%, calc(var(--map-h) * 0.82));
aspect-ratio: 3 / 4;
margin-inline: auto;
flex: 0 0 auto;
max-height: min(calc(var(--map-h) * 1.35), 720px);
}
/* Useful low bar: fixed vertical band, still readable on mobile */
.pb-map[data-layout="strip"] .pb-map__frame {
width: 100%;
height: clamp(152px, min(24cqi, calc(0.26 * var(--pyramid-viewport-height, 100dvh))), 228px);
margin-inline: auto;
flex: 0 0 auto;
}
.pb-map[data-layout="fullbleed"] .pb-map__frame {
width: 100%;
height: var(--map-h);
border-radius: 0;
flex: 0 0 auto;
}
/* After layout rules: split / stacked maps must fill the stretched viewport
(grid row height from copy column) instead of a short 16∶9 box + empty well. */
.pb-map[data-composition="splitStart"] .pb-map__frame,
.pb-map[data-composition="splitEnd"] .pb-map__frame,
.pb-map[data-composition="stacked"] .pb-map__frame {
flex: 1 1 auto;
height: 100%;
max-height: none;
aspect-ratio: unset;
min-height: min(200px, var(--map-h));
width: 100%;
}
.pb-map[data-composition="splitStart"][data-layout="square"] .pb-map__frame,
.pb-map[data-composition="splitEnd"][data-layout="square"] .pb-map__frame,
.pb-map[data-composition="stacked"][data-layout="square"] .pb-map__frame {
width: min(100%, var(--map-h));
max-width: min(100%, 560px);
margin-inline: auto;
}
.pb-map[data-composition="splitStart"][data-layout="portrait"] .pb-map__viewport,
.pb-map[data-composition="splitEnd"][data-layout="portrait"] .pb-map__viewport,
.pb-map[data-composition="stacked"][data-layout="portrait"] .pb-map__viewport {
align-items: center;
}
.pb-map[data-composition="splitStart"][data-layout="portrait"] .pb-map__frame,
.pb-map[data-composition="splitEnd"][data-layout="portrait"] .pb-map__frame,
.pb-map[data-composition="stacked"][data-layout="portrait"] .pb-map__frame {
width: min(100%, calc(var(--map-h) * 0.88));
max-width: 400px;
margin-inline: auto;
aspect-ratio: 3 / 4;
height: auto;
max-height: min(100%, calc(var(--map-h) * 1.25));
flex: 0 1 auto;
}
.pb-map__iframe {
display: block;
flex: 1 1 auto;
min-height: 0;
width: 100%;
border: 0;
/* Loading / letterbox color: stay on-theme (overridden for spotlight above) */
background: color-mix(in srgb, var(--color-bg) 38%, var(--color-bg-emphasis));
}
/* Leaflet + OSM (no Google API key, coordinates only) — fills frame like the iframe. */
.pb-map__leaflet {
flex: 1 1 auto;
min-height: 180px;
width: 100%;
min-width: 0;
border-radius: inherit;
z-index: 0;
background: color-mix(in srgb, var(--color-bg) 38%, var(--color-bg-emphasis));
}
.pb-map__leaflet.leaflet-container {
font: inherit;
}
.pb-map__leaflet .leaflet-bar {
border: 1px solid color-mix(in srgb, var(--color-fg) 12%, var(--color-border));
border-radius: 10px;
box-shadow: 0 4px 16px color-mix(in srgb, var(--color-fg) 8%, transparent);
}
.pb-map__leaflet .leaflet-bar a {
color: var(--color-fg);
background: color-mix(in srgb, var(--color-bg) 88%, transparent);
}
.pb-map__leaflet .leaflet-bar a:hover {
background: color-mix(in srgb, var(--color-bg-emphasis) 90%, transparent);
}
.pb-map__leaflet .leaflet-popup-content-wrapper {
border-radius: var(--ds-radius);
box-shadow: 0 8px 28px color-mix(in srgb, var(--color-fg) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--color-border) 90%, transparent);
}
.pb-map__leaflet .leaflet-popup-content {
font-size: 14px;
line-height: 1.45;
color: var(--color-fg);
margin: 10px 12px;
}
.pb-map__leaflet a {
color: var(--color-accent);
}
.pb-map__directions {
display: inline-flex;
align-items: center;
gap: 8px;
position: absolute;
/* Clamp inset to the available frame width so the overlay stays
visually inside the iframe on narrow widths (mobile preview, strip
layouts) instead of getting hard-cropped against the rounded
corner. max() keeps a sensible min on desktop. */
bottom: max(10px, min(3cqi, 16px));
right: max(10px, min(3cqi, 16px));
z-index: 2;
padding: 10px 16px 10px 14px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
color: var(--color-fg);
border-radius: 999px;
background: color-mix(in oklab, var(--color-bg) 82%, transparent);
border: 1px solid color-mix(in srgb, var(--color-fg) 9%, transparent);
box-shadow:
0 2px 8px color-mix(in srgb, var(--color-fg) 8%, transparent),
0 12px 32px color-mix(in srgb, var(--color-fg) 10%, transparent);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
transition: background 150ms ease, transform 150ms ease, border-color 150ms ease;
/* On very narrow frames (strip layout / phone preview) shrink the
button before it would crowd the frame edge. */
max-width: calc(100% - 24px);
white-space: nowrap;
}
.pb-map__directions-icon {
display: flex;
color: var(--color-accent);
flex-shrink: 0;
}
.pb-map__directions:hover {
background: color-mix(in oklab, var(--color-bg) 94%, transparent);
border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-fg));
transform: translateY(-1px);
}
.pb-map__directions--below {
grid-column: 1 / -1;
position: static;
width: 100%;
max-width: 420px;
margin-inline: auto;
margin-top: 4px;
justify-content: center;
padding: 14px 22px;
font-size: 15px;
background: var(--color-accent);
color: var(--color-accent-fg);
border: none;
box-shadow: 0 12px 32px color-mix(in srgb, var(--color-accent) 42%, transparent);
}
.pb-map__directions--below .pb-map__directions-icon {
color: inherit;
}
.pb-map__directions--below:hover {
background: color-mix(in oklab, var(--color-accent) 92%, var(--color-fg));
border: none;
transform: translateY(-1px);
filter: none;
}
.pb-map[data-chrome="spotlight"] .pb-map__directions--below {
box-shadow: 0 16px 36px color-mix(in srgb, #000 35%, transparent);
}
.pb-map__caption {
grid-column: 1 / -1;
padding: 14px 18px 4px;
margin: 0;
font-size: 13px;
line-height: 1.5;
letter-spacing: 0.01em;
color: var(--color-fg-muted);
background: transparent;
border-top: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
max-width: 62ch;
}
.pb-map[data-composition="stacked"] .pb-map__caption {
margin-inline: auto;
text-align: center;
max-width: 48ch;
}
.pb-map[data-composition="embed"] .pb-map__caption {
grid-column: auto;
max-width: none;
}
.pb-map--empty {
min-height: 240px;
display: grid;
place-items: center;
text-align: center;
padding: 40px 24px;
overflow: hidden;
/* Match the resolved-map heights so toggling between "no address yet"
and "address set" doesn't make the section visibly jump. The bare
`min-height: 240px` was a hangover from before --map-h existed; it
left compact-vs-tall feeling identical in the empty state. */
}
.pb-map--empty[data-height="compact"] { min-height: 200px; }
.pb-map--empty[data-height="balanced"] { min-height: 280px; }
.pb-map--empty[data-height="tall"] { min-height: 360px; }
.pb-map--empty[data-layout="strip"] { min-height: 152px; padding-block: 24px; }
.pb-map--empty[data-layout="square"] {
max-width: min(100%, 520px);
aspect-ratio: 1 / 1;
min-height: 0;
}
.pb-map--empty[data-layout="cinematic"] {
aspect-ratio: 21 / 9;
min-height: 0;
}
.pb-map--empty[data-layout="portrait"] {
max-width: min(100%, 520px);
margin-inline: auto;
aspect-ratio: 3 / 4;
min-height: 0;
}
.pb-map--empty[data-layout="fullbleed"] {
border-radius: 0;
border-inline: 0;
}
.pb-map__placeholder {
position: absolute; inset: 0;
background:
linear-gradient(135deg, var(--color-bg-emphasis) 0%, var(--color-border) 100%);
z-index: 0;
}
.pb-map__empty-msg {
position: relative; z-index: 1;
display: grid; gap: 8px;
max-width: 420px;
}
.pb-map__empty-msg strong { font-size: 17px; color: var(--color-fg); }
.pb-map__empty-msg span { font-size: 14px; color: var(--color-fg-muted); }
@container pyramid (max-width: 720px) {
.pb-map[data-composition="splitStart"],
.pb-map[data-composition="splitEnd"] {
grid-template-columns: 1fr;
grid-template-areas:
"copy"
"map";
gap: clamp(18px, 5cqi, 28px);
}
.pb-map[data-composition="splitStart"]:not(:has(.pb-map__intro)),
.pb-map[data-composition="splitEnd"]:not(:has(.pb-map__intro)) {
grid-template-areas: "map";
}
.pb-map[data-height="compact"] {
--map-h: min(40cqi, calc(0.42 * var(--pyramid-viewport-height, 100dvh)), 240px);
}
.pb-map[data-height="balanced"] {
--map-h: min(48cqi, calc(0.46 * var(--pyramid-viewport-height, 100dvh)), 320px);
}
.pb-map[data-height="tall"] {
--map-h: min(54cqi, calc(0.52 * var(--pyramid-viewport-height, 100dvh)), 400px);
}
.pb-map[data-layout="strip"] .pb-map__frame {
height: clamp(140px, calc(0.22 * var(--pyramid-viewport-height, 100dvh)), 200px);
}
.pb-map__directions {
bottom: 10px;
right: 10px;
padding: 8px 12px;
font-size: 12px;
}
.pb-map__title {
font-size: clamp(24px, 7cqi, 34px);
}
}
@media (prefers-reduced-motion: reduce) {
.pb-map__directions {
transition: none;
}
.pb-map__directions:hover {
transform: none;
}
.pb-map__directions--below:hover {
transform: none;
}
}
/* ---------- Hours block -------------------------------------------------- */
.pb-hours {
width: var(--ds-container);
margin-inline: auto;
display: grid;
gap: 18px;
}
.pb-hours[data-layout="grid"] { gap: 14px; }
.pb-hours__head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.pb-hours__title {
font-family: var(--ds-font-display);
font-size: clamp(24px, 3cqi, 36px);
margin: 0;
}
.pb-hours__pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: var(--color-bg-emphasis);
border: 1px solid var(--color-border);
font-size: 13px;
font-weight: 600;
color: var(--color-fg);
}
.pb-hours__dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-fg-muted);
}
.pb-hours__pill[data-tone="open"] .pb-hours__dot { background: var(--pb-status-positive); }
.pb-hours__pill[data-tone="closed"] .pb-hours__dot { background: var(--pb-status-negative); }
.pb-hours__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
border-top: 1px solid var(--color-border);
}
.pb-hours[data-layout="grid"] .pb-hours__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
border: 0;
}
@container pyramid (min-width: 900px) {
.pb-hours[data-layout="grid"] .pb-hours__list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.pb-hours__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
.pb-hours[data-layout="grid"] .pb-hours__row {
display: grid;
gap: 4px;
padding: 14px 16px;
background: var(--color-bg-emphasis);
border-radius: var(--ds-radius);
border-bottom: 0;
}
.pb-hours__row[data-today="true"] {
font-weight: 700;
color: var(--color-fg);
}
.pb-hours__row[data-today="true"] .pb-hours__day::before {
content: "Today · ";
color: var(--color-fg-muted);
font-weight: 500;
}
.pb-hours__row[data-closed="true"] .pb-hours__times {
color: var(--color-fg-muted);
font-style: italic;
}
.pb-hours__day { font-size: 15px; }
.pb-hours__times { font-size: 15px; color: var(--color-fg); font-variant-numeric: tabular-nums; }
.pb-hours__tz {
font-size: 12px;
color: var(--color-fg-muted);
margin: 0;
}
.pb-hours--empty .pb-hours__empty-msg {
color: var(--color-fg-muted);
font-size: 15px;
}
@container pyramid (max-width: 480px) {
.pb-hours__row { padding: 10px 0; }
.pb-hours__day, .pb-hours__times { font-size: 14px; }
}
/* Card variant — wraps the hours block in an elevated surface so it
reads as a contact card on a long page. Default + grid layouts both
benefit from the same surface treatment. */
.pb-hours[data-variant="card"] {
padding: clamp(20px, 4cqi, 32px);
border-radius: var(--ds-radius-lg);
background: var(--color-bg);
border: 1px solid var(--color-border);
box-shadow:
0 1px 0 color-mix(in oklab, var(--color-fg) 4%, transparent),
0 16px 48px -16px color-mix(in oklab, var(--color-fg) 14%, transparent);
}
/* Inline strip — collapses to a single horizontal row. Useful in a
sidebar or as a slim band beside a Map/Contact block. */
.pb-hours[data-variant="inline"] .pb-hours__list {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
}
.pb-hours[data-variant="inline"] .pb-hours__row {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 4px 10px;
border-radius: 999px;
background: color-mix(in oklab, var(--color-bg-emphasis) 70%, var(--color-bg));
border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent);
}
.pb-hours[data-variant="inline"] .pb-hours__row[data-today="true"] {
background: color-mix(in oklab, var(--color-accent) 14%, var(--color-bg));
border-color: color-mix(in oklab, var(--color-accent) 35%, var(--color-border));
}
.pb-hours[data-variant="inline"] .pb-hours__day {
font-weight: 600;
}
.pb-hours[data-variant="inline"] .pb-hours__head {
margin-bottom: 12px;
}
/* ---------- Reservations block ------------------------------------------ */
.pb-reservations {
width: var(--ds-container);
max-width: 640px;
margin-inline: auto;
display: grid;
gap: 24px;
}
.pb-reservations[data-variant="tight"] { gap: 16px; }
.pb-reservations[data-variant="tight"] .pb-reservations__form { padding: 18px; }
.pb-reservations[data-variant="airy"] {
gap: 32px;
max-width: 680px;
}
.pb-reservations[data-variant="airy"] .pb-reservations__form { padding: 32px; }
.pb-reservations__head { display: grid; gap: 8px; text-align: center; }
.pb-reservations__title {
font-family: var(--ds-font-display);
font-size: clamp(28px, 4cqi, 40px);
margin: 0;
}
.pb-reservations__sub {
margin: 0;
color: var(--color-fg-muted);
font-size: 16px;
}
.pb-reservations__form {
display: grid;
gap: 14px;
background: var(--color-bg-emphasis);
padding: 24px;
border-radius: var(--ds-radius-lg);
border: 1px solid var(--color-border);
}
.pb-reservations__row {
display: grid;
gap: 14px;
}
.pb-reservations__row--2 { grid-template-columns: 1fr; }
@container pyramid (min-width: 600px) {
.pb-reservations__row--2 { grid-template-columns: 1fr 1fr; }
}
.pb-reservations__field {
display: grid;
gap: 6px;
font-size: 14px;
color: var(--color-fg);
}
.pb-reservations__field span {
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
}
.pb-reservations__optional {
font-style: normal;
font-weight: 400;
color: var(--color-fg-muted);
margin-left: 4px;
}
.pb-reservations__field input,
.pb-reservations__field select,
.pb-reservations__field textarea {
font: inherit;
padding: 10px 12px;
border-radius: var(--ds-radius);
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-fg);
width: 100%;
box-sizing: border-box;
}
.pb-reservations__field textarea { resize: vertical; min-height: 80px; }
.pb-reservations__field input:focus,
.pb-reservations__field select:focus,
.pb-reservations__field textarea:focus {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.pb-reservations__actions { display: flex; justify-content: flex-end; padding-top: 4px; }
.pb-reservations__actions .pyramid-cta { min-width: 200px; }
.pb-reservations__success {
display: grid;
gap: 6px;
text-align: center;
padding: 32px 24px;
background: var(--color-bg-emphasis);
border-radius: var(--ds-radius-lg);
border: 1px solid var(--color-border);
}
.pb-reservations__success strong { font-size: 18px; color: var(--color-fg); }
.pb-reservations__success span { color: var(--color-fg-muted); font-size: 14px; }
.pb-reservations__error {
margin: 0;
padding: 10px 14px;
border-radius: var(--ds-radius);
background: color-mix(in oklab, var(--pb-status-negative) 10%, var(--color-bg-emphasis));
color: var(--pb-status-negative-fg);
font-size: 14px;
}
.pb-reservations__missing {
display: grid;
gap: 6px;
text-align: center;
padding: 28px 24px;
background: var(--color-bg-emphasis);
border-radius: var(--ds-radius-lg);
border: 1px dashed var(--color-border);
}
.pb-reservations__missing strong { font-size: 16px; color: var(--color-fg); }
.pb-reservations__missing span { color: var(--color-fg-muted); font-size: 13px; }
.pb-reservations__missing code {
background: var(--color-bg);
padding: 1px 6px;
border-radius: 4px;
font-size: 12px;
}
.pb-reservations__widget {
width: 100%;
min-height: 400px;
background: var(--color-bg-emphasis);
border-radius: var(--ds-radius-lg);
border: 1px solid var(--color-border);
}
/*
* Edit-mode form non-interactivity. We intentionally do NOT add
* `disabled` to every input — disabled inputs are not in the tab order
* AND have a heavy "greyed out" UA appearance that would diverge from
* the published preview the operator is trying to evaluate. Instead we
* suppress pointer events on the whole form region so clicks fall
* through to the BlockHost selection handler, and rely on the form's
* `tabIndex=-1` to keep keyboard users out. The form still LOOKS
* identical to the published version — same colors, same layout.
*/
.pb-reservations__body[data-edit-noninteractive="true"] {
pointer-events: none;
}
.pb-reservations__body[data-edit-noninteractive="true"] input,
.pb-reservations__body[data-edit-noninteractive="true"] select,
.pb-reservations__body[data-edit-noninteractive="true"] textarea,
.pb-reservations__body[data-edit-noninteractive="true"] button {
cursor: default;
}
/* ----------------------------------------------------------------
Reservations — operator status panel (edit mode only)
----------------------------------------------------------------
Only renders when EditModeContext.mode === "edit". Shows which
booking channel was resolved and whether the necessary credentials
are wired in the business profile, so the operator never has to
guess "is this thing actually working?". Preview / prod render the
real customer widget instead.
---------------------------------------------------------------- */
.pb-reservations-status {
display: grid;
gap: 14px;
padding: 22px;
background: var(--color-bg-emphasis);
border: 1px dashed var(--color-border);
border-radius: var(--ds-radius-lg);
}
.pb-reservations-status__head {
display: grid;
gap: 4px;
}
.pb-reservations-status__title {
font-weight: 600;
font-size: 15px;
color: var(--color-fg);
}
.pb-reservations-status__sub {
font-size: 13px;
color: var(--color-fg-muted);
line-height: 1.4;
}
.pb-reservations-status__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.pb-reservations-status__row {
display: grid;
grid-template-columns: 110px 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--ds-radius);
font-size: 13px;
color: var(--color-fg-muted);
}
.pb-reservations-status__row[data-active="true"] {
border-color: var(--color-fg);
box-shadow: 0 0 0 1px var(--color-fg) inset;
}
.pb-reservations-status__channel {
font-weight: 600;
color: var(--color-fg);
}
.pb-reservations-status__detail {
font-size: 12.5px;
color: var(--color-fg-muted);
word-break: break-all;
}
.pb-reservations-status__badge {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 3px 8px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.08);
color: var(--color-fg-muted);
}
.pb-reservations-status__row[data-connected="true"] .pb-reservations-status__badge {
background: oklch(0.6 0.18 152 / 0.18);
color: oklch(0.4 0.18 152);
}
.pb-reservations-status__cta {
justify-self: start;
font-size: 13px;
font-weight: 500;
color: var(--color-fg);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.pb-reservations-status__cta:hover {
opacity: 0.8;
}