/* ═══════════════════════════════════════════════════════════════════════════
BWA Site Framework CSS (auto-applied to every public tenant)
───────────────────────────────────────────────────────────────────────────
This file contains site-architecture rules that EVERY BWA tenant needs
identically — container max-widths, the .full-bleed escape, and the
universal AI Block island plumbing (bleed, content-cap, pack-to-top,
nested-island containment).
Loaded by Primary.master.cs via EmitVersionedCssLink — AFTER brand-corpus-
generated.css (so it can reference --bwa-* tokens) and BEFORE the tenant's
custom.css (so per-tenant overrides win on the cascade).
DO NOT add tenant-specific selectors here (e.g. .cj-*, .ws-*). Those stay
in the tenant's own custom.css. The rule of thumb: if a fix or rule would
benefit ALL tenants identically, it goes here. Anything else stays per-
tenant.
Extracted from:
CJ custom.css lines 621-882 on 2026-06-04 (Phase A custom.css trim).
═══════════════════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────────────
SITE WIDTH FRAMEWORK
- Header & footer chrome cap: 1750px (wider for nav / logo / cta)
- Content section cap: 1600px (page body, blocks, AI Block output)
- Full-bleed escape: .full-bleed makes a section's background
span 100vw while inner content still
centers at 1600px via a child .container
or .full-bleed-inner.
Bootstrap's stock .container caps at 1170px @>=1200; rules below
override the cap for everything except .container-sm (kept at 1124px
above) and .container-fluid (always 100%). Specificity layering: the
generic .container rule sits at (0,1,0); header/footer rules sit at
(0,1,1) so they win for chrome.
────────────────────────────────────────────────────────────────── */
/* Content cap — default for body sections / blocks */
@media (min-width: 1200px) {
.container,
.container-md,
.container-lg,
.container-xl {
max-width: 1600px;
width: 100%;
}
}
@media (min-width: 1400px) {
.container,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
max-width: 1600px;
width: 100%;
}
}
/* Header & footer chrome cap — beats the content rule above via
higher selector specificity (descendant of header/footer). */
@media (min-width: 1200px) {
header .container,
header .container-md,
header .container-lg,
header .container-xl,
header .container-xxl,
footer .container,
footer .container-md,
footer .container-lg,
footer .container-xl,
footer .container-xxl,
.getStartedCard > .container {
max-width: 1750px;
width: 100%;
}
}
/* Full-bleed escape utility — drop on any section / div to make its
background break out of the parent container and span the entire
viewport. Inner content is reined back to 1600px by the nested
.container or .full-bleed-inner so text never crosses the safe zone.
Usage:
...content stays centered at 1600px...
For true edge-to-edge inner content (hero images, video, banners)
omit the inner .container — content will go 100vw. */
.full-bleed {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
max-width: 100vw;
}
.full-bleed > .container,
.full-bleed > .full-bleed-inner {
max-width: 1600px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
}
/* ── Page-level horizontal overflow guard ──────────────────────────
Every full-bleed rule below sizes to 100vw. `100vw` INCLUDES the vertical
scrollbar, so on any page tall enough to scroll (i.e. nearly all of them) a
bled section is ~15-17px wider than the available content width. The result:
a permanent horizontal scrollbar, and chrome that sizes to 100% -- header and
footer -- visibly stops short of the scrolled right edge while the bled
section runs past it. That reads as "the header and footer aren't full bleed"
when in fact they are correct and the bleed is too wide.
THE CLIP GOES ON `body > form`, NOT ON `html`. This rule was
`html { overflow-x: clip }` and that is measurably wrong on any tenant that
locks scrolling by putting overflow on . The UA propagates overflow
from to the viewport ONLY while the root element computes `visible`
on BOTH axes. Put any overflow on and propagation moves to the root,
so a `body.no-scroll { height:100vh; overflow:hidden }` mobile-menu lock
stops propagating and starts clipping the body box instead: the document
collapses to one viewport and the scroll offset is clamped to 0. Measured in
Chromium at 390x844 against CarJiffy's cascade -- document 3200px -> 844px,
scrollY 2356 -> 0, and closing the menu strands the reader at the top of the
page. The `hidden` fallback below breaks it identically, so there is no
modern-browser escape. CarJiffy carries exactly that lock (CJPublic/css/
custom.css `.no-scroll`, applied from custom.js on `.navbar-toggler`);
BWA-Clean does not, which is the only reason the root-level version survived
here. Do not move this back to `html`.
Every public master in the estate puts