: the wrapper
takes the place it held, so the band hides the wrapper (its own padding / background with it) — and the hero the listing
title's, as listing.css does the bare title (main.has-hero .hero .bd-listing-title). */
body.has-band main .bd-main > .bd-mod--heading:first-child, body.has-band main .bd-main > .bd-mod--title:first-child, main.has-hero .hero .bd-mod--title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ── Template 3 · left header ───────────────────────────────────────────────
A fixed column on the left (logo, stacked links, phone/social at the bottom via the
footer) with the hero and content filling the right. Below 900px it is the normal
top bar with the hamburger drawer. */
@media (min-width: 900px) {
body.tpl-left .site-header { position: fixed; top: 0; left: 0; bottom: 0; width: var(--bd-left-w, 280px); flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 2.25rem 1.75rem; border-bottom: 0; border-right: 1px solid var(--bd-chrome-line); overflow-y: auto; z-index: 30; }
body.tpl-left .site-brand { margin-bottom: 2.5rem; min-height: 0; }
body.tpl-left .site-logo { max-width: 200px; max-height: var(--bd-logo-h-left, 64px); }
body.tpl-left .site-brand-title { white-space: normal; max-width: none; font-size: 1.3rem; line-height: 1.2; }
body.tpl-left .site-hamburger { display: none; }
body.tpl-left .site-nav { position: static; flex-direction: column; align-items: stretch; gap: 0.15rem; width: 100%; }
body.tpl-left .site-nav a, body.tpl-left .site-nav.is-signed-in .bd-auth--in { display: block; padding: 0.55rem 0.75rem; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 6px; }
body.tpl-left .site-nav .bd-auth--in { display: none; }
body.tpl-left .site-nav.is-signed-in .bd-auth--out { display: none; }
body.tpl-left .shell, body.tpl-left .gp-shell { padding-left: var(--bd-left-w, 280px); }
}
/* The drawer menu below 960px (was 720): between 721 and ~950 the top bar carried the property name
AND every link in one row, and a long name or seven links ran off the right edge — every tablet in
portrait, all three top-bar templates (George, 16 Sep 2026). 960 covers iPad portrait/landscape-mini
and matches Template 3's own 900px column threshold. */
@media (max-width: 959px) {
.site-header { padding: 0.75rem 1rem; }
.site-hamburger { display: flex; }
.site-nav { position: fixed; top: 0; right: -300px; width: min(280px, 85vw); height: calc(100 * var(--bd-vh, 1vh)); background: var(--bd-chrome-bg); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.35); z-index: 1000; transition: right 0.3s ease; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.site-nav.open { right: 0; }
.site-nav a { display: block; padding: 14px 22px; font-size: 1rem; border-radius: 0; border-bottom: 1px solid var(--bd-chrome-line); max-width: none; white-space: normal; }
.site-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 999; }
.site-nav-overlay.open { display: block; }
}
/* ── A menu that survives any naming (grapesjs/menu-contract.md, 17 Sep 2026) ──────────────────
One line per link with an ellipsis; what does not fit folds into "More ▾" (site-chrome.js
bdFoldNav); when even the brand plus two links will not fit, the JS adds body.bd-nav-drawer and
the bar becomes the same drawer the rule above shows on narrow screens. */
/* The bar only (≥960): below that the links are the drawer's, which fill its panel and wrap — this rule, later in the
file, used to cap them at 160px there too (an empty strip right of the list, names cut short; George, 6 Oct 19:36). */
@media (min-width: 960px) { .site-nav a { white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; } }
/* Until the fold has fitted the menu with the real fonts and logo (bd-nav-wait: set before the bar is parsed, lifted by
site-chrome.js, 8 Oct): the links keep their place but do not paint, so the first menu anyone sees is the final one.
An open drawer is never hidden. */
html.bd-nav-wait .site-nav:not(.open), html.bd-nav-wait .site-nav__more { visibility: hidden; }
.site-nav__more { position: relative; display: flex; align-items: center; }
.site-nav__more-btn { font-family: var(--bd-font-menu, var(--bd-font-accent)); color: var(--bd-chrome-muted); background: none; border: 0; padding: 0.4rem 0.75rem; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 0.9rem; white-space: nowrap; line-height: inherit; }
body.tpl-top .site-nav__more-btn, body.tpl-onepage .site-nav__more-btn, body.tpl-boxed .site-nav__more-btn { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 600; }
body.nav-normal .site-nav__more-btn { text-transform: none; letter-spacing: 0; font-size: 0.9rem; font-weight: 500; }
.site-nav__more-btn:hover, .site-nav__more.is-open .site-nav__more-btn { background: rgba(255, 255, 255, 0.08); color: var(--bd-chrome-text); }
body.tpl-top.has-hero .site-header:not(.is-scrolled) .site-nav__more-btn { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
.site-nav__more-list { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; max-width: 320px; background: var(--bd-chrome-bg); border: 1px solid var(--bd-chrome-line); border-radius: 10px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28); padding: 6px; z-index: 1200; flex-direction: column; gap: 2px; }
.site-nav__more.is-open .site-nav__more-list { display: flex; }
.site-nav__more-list a { max-width: none; display: block; padding: 0.55rem 0.75rem; text-shadow: none; }
body.tpl-top.has-hero .site-header:not(.is-scrolled) .site-nav__more-list { background: rgba(24, 24, 24, 0.94); border-color: rgba(255, 255, 255, 0.12); }
body.tpl-top.has-hero .site-header:not(.is-scrolled) .site-nav__more-list a { color: #fff; }
/* The forced drawer: the ≤959px rules again, keyed on the class the JS sets. */
body.bd-nav-drawer .site-header { padding: 0.75rem 1rem; }
body.bd-nav-drawer .site-hamburger { display: flex; }
body.bd-nav-drawer .site-nav { position: fixed; top: 0; right: -300px; width: min(280px, 85vw); height: calc(100 * var(--bd-vh, 1vh)); background: var(--bd-chrome-bg); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.35); z-index: 1000; transition: right 0.3s ease; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
body.bd-nav-drawer .site-nav.open { right: 0; }
body.bd-nav-drawer .site-nav a { display: block; padding: 14px 22px; font-size: 1rem; border-radius: 0; border-bottom: 1px solid var(--bd-chrome-line); max-width: none; white-space: normal; }
body.bd-nav-drawer .site-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 999; }
body.bd-nav-drawer .site-nav-overlay.open { display: block; }
/* Template 3's column: one line per link, and the list scrolls inside the column once it outgrows the screen. */
@media (min-width: 900px) {
body.tpl-left .site-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.tpl-left .site-nav a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
/* ── Layout options (Design screen: per-template controls in Header Manager / Site
Customizer / Footer Manager). Rendered as body classes + CSS variables by
partials/site-chrome.php (bd_site_layout_*) and previewed by site-chrome.js. Variables:
--bd-bar-pad --bd-logo-h --bd-logo-h-left --bd-left-w --bd-hero-vh --bd-hero-k --bd-hero-shade
--bd-band-h --bd-box-w --bd-box-backdrop --bd-page-w --bd-desc-fold. */
@media (min-width: 960px) {
/* Menu alignment on the top bars (Template 3's column is excluded). Centred holds only while the
whole menu fits between two brand-wide columns; otherwise site-chrome.js sets
body.bd-nav-center-off and the bar is the classic one for that viewport — brand left, menu right,
More for the rest (grapesjs/menu-contract.md). The side tracks stay 1fr (minimum = the brand):
before the script runs, minmax(0, 1fr) would lay a long brand over the menu (or, capped, shrink
it to nothing) — measured 30 Sep; the script measures on the classic bar, never on this grid. */
body.nav-center:not(.tpl-left):not(.bd-nav-center-off) .site-header { display: grid; grid-template-columns: 1fr auto 1fr; }
body.nav-center:not(.tpl-left):not(.bd-nav-center-off) .site-brand { justify-self: start; }
body.nav-center:not(.tpl-left):not(.bd-nav-center-off) .site-nav { justify-self: center; }
body.nav-spread:not(.tpl-left) .site-nav { flex: 1; justify-content: space-evenly; margin-left: 1.5rem; }
/* Link style: normal case instead of the uppercase small caps. */
body.nav-normal .site-nav a { text-transform: none; letter-spacing: 0; font-size: 0.9rem; font-weight: 500; }
}
/* Template 1: the bar scrolls away with the hero instead of turning solid. */
body.tpl-top.bar-hide .site-header.is-scrolled { position: absolute; background: transparent; border-bottom-color: transparent; box-shadow: none; }
body.tpl-top.bar-hide.has-hero .site-header.is-scrolled .site-nav a, body.tpl-top.bar-hide.has-hero .site-header.is-scrolled .site-brand-title { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
/* Template 3: column alignment and side. */
@media (min-width: 900px) {
body.tpl-left.left-center .site-header { align-items: center; text-align: center; }
body.tpl-left.left-center .site-nav a { text-align: center; }
body.tpl-left.left-right .site-header { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--bd-chrome-line); }
body.tpl-left.left-right .shell, body.tpl-left.left-right .gp-shell { padding-left: 0; padding-right: var(--bd-left-w, 280px); }
}
/* Template 2: flat box / rounded box (clip-path keeps sticky children working). */
body.tpl-boxed.box-flat .shell, body.tpl-boxed.box-flat .gp-shell { box-shadow: none; }
@media (min-width: 1000px) {
body.tpl-boxed.box-rounded .shell, body.tpl-boxed.box-rounded .gp-shell { border-radius: 18px; clip-path: inset(0 round 18px); margin-top: 1.5rem; margin-bottom: 1.5rem; min-height: calc(100 * var(--bd-vh, 1vh) - 3rem); }
}
/* Footer: the centred stack instead of the three columns (all templates). */
body.footer-stack .site-footer { text-align: center; padding: 1.25rem; font-size: 0.85rem; line-height: normal; }
body.footer-stack .site-footer-grid { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: none; }
body.footer-stack .site-footer-col--about, body.footer-stack .site-footer-heading, body.footer-stack .site-footer-contact { display: none; }
body.footer-stack .site-footer-col--contact { order: 1; }
body.footer-stack .site-footer-col--links { order: 2; }
body.footer-stack .site-footer-links { display: block; margin: 0 0 6px; }
body.footer-stack .site-footer-links a { text-decoration: underline; margin: 0 4px; }
body.footer-stack .site-footer-sep { display: inline; }
body.footer-stack .site-footer-social { justify-content: center; margin: 0 0 10px; }
body.footer-stack .site-footer-bottom { max-width: none; margin: 0; padding-top: 0; border-top: 0; display: block; }
body.footer-stack .site-footer-company { margin: 0 0 6px; }
/* ── Colour guard (George, 7 Oct — the colours must really show) ─────────────────────────────
The white surfaces keep their white, but their text follows the site's Text / Accent. When one of those is
unreadable on white (partials/site-chrome.php bd_site_colour_guard_classes: under 4.5:1 — 2158's white text made
its booking calendar invisible), these body classes turn it to a dark ink inside them; the host avatar's initial
(white on the Accent) the same way. Sites whose colours read fine get neither class. The booking card is not one of
them any more: it wears the site's own colours (listing.css, 13 Oct), so its contrast is the site's. On Template 4
the checkout form that opens inside it (.bd-pay-panel) is still light-only, so on a light-text site it gets a white
panel of its own, the way /checkout is. */
body.bd-guard-text :is(.bd-pay-panel, .bd-login__card, .bd-processing-box, .bd-card-element, main.bd-checkout-main, .gp-card, .gp-booking, .gp-thread, .gp-inbox__list, .gp-composer textarea, .gp-field input) { --text: #1e293b; color: #1e293b; }
body.bd-guard-accent :is(.bd-pay-panel, .bd-login__card, .bd-processing-box, .bd-card-element, main.bd-checkout-main, .gp-card, .gp-booking, .gp-thread, .gp-inbox__list, .gp-btn--outline) { --primary: #1e293b; }
body.bd-guard-accent .bd-host-avatar { color: #1e293b; }
body.bd-guard-text .bd-pay-panel { --bd-card: #fff; background: var(--bd-card); padding: 1rem; border-radius: 10px; }
/* Body background on Templates 1 / 3 / 4 (George, 7 Oct — on every template): an own colour paints the canvas around the
content — the page's side gutters (T1 / T3: keeps the Page background inside its padding) or the space around
the one-page column (T4) — while Page background stays on the content. "Same as the page" (the default) adds nothing.
Template 2's Body background is its backdrop (boxBackdrop). The checkout keeps its own white page. */
body.body-own:not(.tpl-boxed) { background: var(--bd-body-bg); }
body.body-own:is(.tpl-top, .tpl-left) main:not(.bd-checkout-main) { background: var(--bg); background-clip: content-box; }
body.body-own.tpl-onepage main > .hero { background: var(--bg); padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 1.5rem; }
/* ── Host-typed titles never run off the page (Andy, 22 Oct: a page named with 60 X's, no spaces, ran its band heading off the
right edge; George 19:03). A word with no break point wraps inside itself, only when nothing else fits: the rule the details
column already has (listing.css), now on every title this file draws. That means the page band heading, the guest-portal
title, the one page's section headings, Template 3's column brand, the drawer's links (the bar's keep their one-line ellipsis)
and the whole footer, whose grid columns may now shrink below a word instead of pushing the next column off the page. */
.bd-page-band__inner, .site-footer-col { min-width: 0; }
.bd-page-band h1, .gp-title, .bd-op-heading, .site-footer {
overflow-wrap: anywhere;
word-break: break-word; /* older WebKit, where `anywhere` is not understood */
}
@media (min-width: 900px) { body.tpl-left .site-brand-title { overflow-wrap: anywhere; word-break: break-word; } }
@media (max-width: 959px) { .site-nav a { overflow-wrap: anywhere; word-break: break-word; } }
body.bd-nav-drawer .site-nav a { overflow-wrap: anywhere; word-break: break-word; }