in our own markup, so it
becomes a plain Bricks Div — a content-sized flex item that shrinks to the
longest word and caps the h1 far below its 648px max-width. Measured on
staging: h1 rendered at 342px. Growing the wrapper costs nothing in the
static pages, where the h1's own max-width already governs. */
.wlcs-hero-bottom > div {
flex: 1 1 auto;
min-width: 0;
}
/* Base page styles, re-homed onto the Bricks body.
`.wlcs-page` carries the background, colour, font family, size and leading
for the whole site, and it lives on in the static pages. Bricks owns
its own and stamps it `brx-body`, so without this the entire base
layer is missing: white background, 15px system font, Bricks' grey text.
Scoped to .brx-body, so it is inert outside a Bricks install. */
body.brx-body {
background: var(--wlcs-surface-page);
color: var(--wlcs-text-primary);
font-family: var(--wlcs-font-body);
font-size: var(--wlcs-text-body);
line-height: var(--wlcs-leading-body);
}
/* Bricks sets align-items: center on its layout elements. None of these
wrappers declare their own cross-axis alignment, so that default leaks in
and centres editorial content that should span the column — and, worse,
shrinks empty aspect-ratio plates to nothing. Stretch is the block-flow
behaviour these were written against, so this is a no-op in the static
pages. Any wrapper that genuinely centres declares align-items itself
earlier in this file and is untouched here. */
.wlcs-hero,
.wlcs-page-header,
.wlcs-section,
.wlcs-container,
.wlcs-service,
.wlcs-journal-card,
.wlcs-facility-rail,
.wlcs-service-block-image,
.wlcs-article-image {
align-items: stretch;
}
/* ============================================================
IMAGE HOOKS — every plate is painted from here
============================================================
The JS no longer holds any image map. Each plate in the markup
carries data-asset="KEY"; drop a URL into the matching rule below
and the plate paints. Leave a rule empty and the plate keeps its
gradient placeholder from .wlcs-plate — nothing breaks.
Two plate shapes exist in the markup, so each key targets both:
· flat plate →
· zooming plate →
The inner div is the one that scales on hover, so it must carry the
image on hoverable plates. Painting both is safe either way.
Keep this block LAST in the file — it must out-order the gradient
placeholders in .wlcs-plate / --warm / --parchment.
Bricks note: attribute selectors land in element Custom CSS on paste
and render correctly. A dev who prefers native controls can instead
set each plate's background image in the Bricks panel and delete the
corresponding rule here.
============================================================ */
[data-asset],
[data-asset] > .wlcs-plate-inner {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* ----- Hero / page-opener plates ----- */
/* HERO_COUPE_A · location.html page-header */
[data-asset="HERO_COUPE_A"],
[data-asset="HERO_COUPE_A"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* HERO_COUPE_C · index journal card · journal.html · all 3 journal articles */
[data-asset="HERO_COUPE_C"],
[data-asset="HERO_COUPE_C"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* HERO_COUPE_D · index.html hero plate (parallax · #wlcs-hero-plate) */
[data-asset="HERO_COUPE_D"],
[data-asset="HERO_COUPE_D"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* ----- Facility ----- */
/* ENTRANCE · index services · the-facility rail 01 · location.html */
[data-asset="ENTRANCE"],
[data-asset="ENTRANCE"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* GATE_DAWN · CTA plate on every page (#wlcs-cta-plate) */
[data-asset="GATE_DAWN"],
[data-asset="GATE_DAWN"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* WIDE_FACILITY_1 · index services · services.html · the-facility page-header */
[data-asset="WIDE_FACILITY_1"],
[data-asset="WIDE_FACILITY_1"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* WIDE_FACILITY_2 · index rail 02 · services.html · the-facility rail 02 */
[data-asset="WIDE_FACILITY_2"],
[data-asset="WIDE_FACILITY_2"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* INTERIOR_VINTAGE_A · index services · the-facility security block */
[data-asset="INTERIOR_VINTAGE_A"],
[data-asset="INTERIOR_VINTAGE_A"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* INTERIOR_VINTAGE_B · index founder note · journal.html · journal articles */
[data-asset="INTERIOR_VINTAGE_B"],
[data-asset="INTERIOR_VINTAGE_B"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* ----- Care + detail stills ----- */
/* CINEMATIC · index care note · faqs · journal.html · 2 journal articles */
[data-asset="CINEMATIC"],
[data-asset="CINEMATIC"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* CREAM_STILL · index rail 03 · the-facility rail 03 · legal/privacy */
[data-asset="CREAM_STILL"],
[data-asset="CREAM_STILL"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* CLOTH · services.html valeting block */
[data-asset="CLOTH"],
[data-asset="CLOTH"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* ENGINE_BAY · index climate block · services.html · journal-battery-charging */
[data-asset="ENGINE_BAY"],
[data-asset="ENGINE_BAY"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* KEYS · index quick-access · journal.html · pricing · legal/terms */
[data-asset="KEYS"],
[data-asset="KEYS"] > .wlcs-plate-inner {
/* background-image: url(''); */
}
/* TRANSPORT · index collection + delivery · services.html */
[data-asset="TRANSPORT"],
[data-asset="TRANSPORT"] > .wlcs-plate-inner {
/* background-image: url(''); */
}