(wfx_section_class() builds the list). Nested block roots are s without .section. */
.section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--container-gap);
width: 100%;
margin-inline: auto;
padding-block: var(--section-padding-block);
padding-inline: var(--gutter);
overflow-x: clip; /* DI-D7: clips live's ≤419px slider-arrow overflow */
}
.section--no-top { padding-top: 0; } /* live .wlp-pad-top--none */
.section--no-bottom { padding-bottom: 0; } /* live .wlp-pad-bottom--none */
.section--no-pad { padding-block: 0; }
.section--dark { background-color: var(--secondary); } /* live .bg--secondary */
.section--light { background-color: var(--base-light); }
.section--ultra-light { background-color: var(--base-ultra-light); } /* live .bg--base-ultra-light */
.section--white { background-color: var(--white); } /* live .bg--white */
.section--tertiary { background-color: var(--tertiary); } /* content previews (PREVIEW-DESIGN §2.5) */
.section--dark-fade { background-color: transparent; }
.section--dark-fade::before { /* S3: stop at 25 % of the whole section */
content: "";
position: absolute;
inset: 0;
background-image: var(--wfx-s3-overlay);
pointer-events: none;
}
.section--dark-fade > * { position: relative; }
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--content-gap);
width: var(--content-width);
max-width: 100%;
margin-inline: auto;
}
.container--gap-l { gap: var(--space-l); }
/* Sliders stay visible without JS (DI-D27): Splide's core CSS hides .splide until init. */
html:not(.js) .splide { visibility: visible; }
/* ---- Icons (wfx_icon(): inline SVG from live's own FA/themify/ionicons glyphs) ---------------------
1em tall, width from the glyph's advance (viewBox), baseline-aligned like the icon font glyph. */
.icon {
display: inline-block;
flex-shrink: 0;
height: 1em; /* width comes from the width="…em" attribute (the glyph's advance) */
vertical-align: -0.125em;
overflow: visible;
fill: currentColor;
}
/* ---- Brand mark (parts/crest.php): live .wlp-logo__1 / .wlp-logo__1--dark, 20rem wide ----------- */
.crest {
width: 20rem;
max-width: 100%;
}
.crest :not([fill="none"]) { fill: var(--white); }
.crest--dark :not([fill="none"]) { fill: var(--tertiary); }
/* ---- Heading header (parts/heading-header.php): live .wlp-heading-header ------------------------ */
.heading-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-self: center !important;
gap: var(--content-gap);
width: 100%;
max-width: 50rem;
color: var(--white);
text-align: center;
}
.heading-header--gap-10 { row-gap: 10px; } /* live #brxe-fgihuc (measured one-off) */
.heading-header__heading { color: var(--white); }
.heading-header__text { color: var(--base-semi-light); }
.heading-header__text--bebas {
font-family: var(--font-accent);
text-transform: uppercase;
}
/* ---- 404 template ------------------------------------------------------------------------------- */
.error-404 { flex: 1 0 auto; justify-content: center; text-align: center; }
.error-404__inner { align-items: center; max-width: var(--width-l); }
.error-404__eyebrow {
color: var(--primary);
font-size: var(--text-xxl);
font-weight: 700;
letter-spacing: 4px;
line-height: 1em;
text-transform: uppercase;
}
.error-404__title { color: var(--white); }
.error-404__text { color: var(--base-semi-light); }
/* ---- Motion switches -----------------------------------------------------------------------------
html.nomotion (set in for ?nomotion=1, parity screenshots) kills every transition and
animation, and the reveal targets are never hidden, so both states show the final layout.
html.reveal-pending (set in only when motion is on: JS, no ?nomotion=1, no reduced motion)
keeps the GSAP reveal targets unpainted until animations.js has given them their inline start state
and removed the class, so nothing in view is painted in its final state and then blanked (the hero
flash). The script removes the class after 3 s if the layer has not started, so content is
never left hidden; with no JS, ?nomotion=1 or reduced motion this rule never matches. */
@media (prefers-reduced-motion: no-preference) {
html.reveal-pending:not(.nomotion) [data-reveal] { opacity: 0; }
}
html.nomotion { scroll-behavior: auto; }
html.nomotion *,
html.nomotion *::before,
html.nomotion *::after {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
html:focus-within { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---- Inertial scrolling (animations.js + GSAP ScrollSmoother; ARCHITECTURE "Motion") ---------------
Only with a fine pointer wider than 640px and motion on. animations.js then wraps the page in
> #smooth-wrapper > #smooth-content (ScrollSmoother styles both inline: the wrapper fixed and
full-viewport, the content translated) and sets html.has-smoother. Neither exists otherwise.
The page scroll is eased by the smoother, so CSS smooth scrolling (which would also ease the native
scroll position it drives) is off. #smooth-content carries the body's flex column, so still
fills a short page (404, upgrade page) exactly as it does as a child of . */
html.has-smoother,
html.has-smoother body { scroll-behavior: auto; }
#smooth-content {
display: flex;
flex-direction: column;
min-block-size: 100vh;
}
/* ---- Page landmarks (live #brx-content / #brx-footer in a flex-column body) ---------------------- */
.site-main {
position: relative;
flex: 1 1 0%;
width: 100%;
}