/*
Theme Name: Hello Elementor Child
Theme URI: https://wdbc.io
Description: Child theme for Hello Elementor - WDBC customizations
Author: WDBC
Author URI: https://wdbc.io
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hello-elementor-child
*/
/* ==========================================================================
WDBC Custom Styles
========================================================================== */
/* Add your custom CSS below this line */
/* ==========================================================================
WDBC Brand Kit v2 — design tokens (single source of truth for the palette + type)
Full kit: claude.ai/code/artifact/a36b8d78-a6df-4100-a1d0-ba97baa99c62
Usage: navy + gold lead everywhere; on DARK grounds, Gold + Signal Cyan are the
high-contrast accents. Quantum Indigo is a chart/pillar-coding accent only — never
small text on navy. For gold TEXT on light grounds use --wdbc-gold-deep (not --wdbc-gold).
========================================================================== */
:root {
--wdbc-navy: #16233F; /* primary ink / dark ground */
--wdbc-navy-deep: #0E1728;
--wdbc-gold: #FFC24B; /* primary accent */
--wdbc-gold-deep: #96690C; /* accessible gold for text on light grounds */
--wdbc-cream: #FBF3DE; /* warm light surface */
--wdbc-cyan: #19C5B4; /* Signal Cyan — codes pillar 1: Innovation & Opportunity */
--wdbc-indigo: #6D5AE6; /* Quantum Indigo — codes pillar 2: Consumer Protection & Trust */
/* The two pillar colours were drawn for the navy ground, where they sing:
cyan is 7.2:1 on navy and indigo 3.16:1. On cream they collapse — cyan
measures 1.96:1, which fails even the 3:1 floor for a non-text UI mark,
so it cannot carry the pillar distinction on a light page at all, and
indigo lands at 4.46:1, just under AA for body text. These are the same
hues darkened until they clear AA on cream (4.71:1 and 5.08:1), for use
anywhere the pillar colour appears on a light surface. Use the bright
pair above on navy and this pair on cream — not interchangeably. */
--wdbc-cyan-deep: #0C7A6F; /* Signal Cyan for light grounds — 4.71:1 on cream */
--wdbc-indigo-deep: #6350DE; /* Quantum Indigo for light grounds — 5.08:1 on cream */
--wdbc-cool: #F4F6FA; /* cool neutral surface */
--wdbc-ink: #16233F;
--wdbc-font-display:"Space Grotesk","Aeonik","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
--wdbc-font-body: "Inter","Lato","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
--wdbc-font-mono: "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
/* ==========================================================================
Accessibility — visible keyboard focus, skip link, reduced motion (WCAG 2.2 AA)
========================================================================== */
/* Two-tone focus ring: gold outline + navy edge → clears 3:1 on BOTH cream and navy. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.wbbc-filter-btn:focus-visible,
.wbbc-sort-btn:focus-visible,
.wbbc-nav-list a:focus-visible,
.wbbc-header-btn:focus-visible,
.wbbc-cta-btn:focus-visible,
.wbbc-dash-btn:focus-visible,
.wbbc-about-card-link:focus-visible {
outline: 3px solid #FFC24B !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 1px #16233F, 0 0 0 6px rgba(22, 35, 63, .35) !important;
border-radius: 3px;
}
/* Ensure a keyboard-visible ring on form fields even where outline was reset. */
.ur-frontend-form input:focus-visible,
.ur-frontend-form select:focus-visible,
.ur-frontend-form textarea:focus-visible,
.wbbc-form input:focus-visible,
.wbbc-form select:focus-visible,
.wbbc-form textarea:focus-visible {
outline: 3px solid #FFC24B !important;
outline-offset: 1px !important;
}
/* Skip link: hidden until focused, then a clear navy chip top-left. */
.skip-link.screen-reader-text:focus,
a.skip-link:focus {
position: fixed !important;
top: 12px;
left: 12px;
z-index: 100000;
width: auto !important;
height: auto !important;
clip: auto !important;
clip-path: none !important;
margin: 0 !important;
padding: 10px 18px;
background: #16233F;
color: #FBF3DE;
font-weight: 700;
border: 2px solid #FFC24B;
border-radius: 6px;
text-decoration: none;
}
/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
WDBC page furniture — pricing ladder, people cards, event timeline,
and the engraved section plates. Original SVG art (no stock photography
is licensed for this site); each plate is a themed line engraving that
sits behind a section heading.
========================================================================== */
/* ---------- Engraved section plate ---------- */
.wdbc-plate {
position: relative;
border-radius: 14px;
overflow: hidden;
background: linear-gradient(135deg, var(--wdbc-navy) 0%, var(--wdbc-navy-deep) 100%);
color: #F2EEE2;
padding: 44px 34px;
margin: 34px 0;
isolation: isolate;
}
.wdbc-plate::after { /* gold hairline, echoes the struck-coin rim */
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(255, 194, 75, .32);
border-radius: 8px;
pointer-events: none;
}
.wdbc-plate-art {
position: absolute;
inset: 0;
z-index: -1;
opacity: .3;
background-repeat: no-repeat;
background-position: right -40px center;
background-size: auto 150%;
}
.wdbc-plate h2, .wdbc-plate h3 { color: #FFC24B; margin: 0 0 .5rem; }
.wdbc-plate p { color: #D6DEEC; margin: 0; max-width: 60ch; }
.wdbc-plate .wdbc-plate-eyebrow {
font-family: var(--wdbc-font-mono);
font-size: .68rem;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(255, 194, 75, .8);
margin-bottom: .5rem;
}
/* Source line for licensed art — CC BY requires the credit to be visible. */
.wdbc-plate .wdbc-plate-credit {
font-family: var(--wdbc-font-mono);
font-size: .6rem; letter-spacing: .06em; line-height: 1.7;
color: rgba(214, 222, 236, .55);
margin-top: 1.1rem; max-width: 64ch;
}
.wdbc-plate .wdbc-plate-credit a { color: inherit; text-decoration-color: rgba(214,222,236,.35); }
/* A photographic/raster art layer needs less presence than the line engravings. */
.wdbc-plate-art-photo { opacity: .42; background-position: right -80px center; background-size: auto 190%; }
/* ---------- Pricing ladder ---------- */
.wdbc-tiers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin: 26px 0;
}
.wdbc-tier {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #E3DCCA;
border-radius: 12px;
padding: 24px 22px;
box-shadow: 0 1px 2px rgba(22, 35, 63, .05), 0 10px 24px rgba(22, 35, 63, .06);
}
.wdbc-tier-featured {
border: 2px solid var(--wdbc-gold);
box-shadow: 0 1px 2px rgba(22, 35, 63, .05), 0 14px 34px rgba(22, 35, 63, .12);
}
.wdbc-tier-name {
font-family: var(--wdbc-font-mono);
font-size: .68rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--wdbc-gold-deep);
margin-bottom: .55rem;
}
.wdbc-tier-price {
font-size: 2.1rem;
font-weight: 800;
line-height: 1;
color: var(--wdbc-navy);
letter-spacing: -.02em;
}
.wdbc-tier-price span { font-size: .82rem; font-weight: 500; color: #5A6884; letter-spacing: 0; }
.wdbc-tier-for { font-size: .88rem; color: #4A5568; margin: .7rem 0 .9rem; }
.wdbc-tier ul { margin: 0 0 1.1rem; padding-left: 1.1rem; }
.wdbc-tier li { font-size: .86rem; color: #4A5568; margin-bottom: .34rem; }
.wdbc-tier .wdbc-tier-cta {
margin-top: auto;
display: inline-block;
text-align: center;
padding: 11px 16px;
border-radius: 8px;
font-weight: 700;
font-size: .9rem;
text-decoration: none;
background: var(--wdbc-navy);
color: #fff;
transition: background .15s ease;
}
.wdbc-tier .wdbc-tier-cta:hover { background: #223357; }
.wdbc-tier-featured .wdbc-tier-cta { background: var(--wdbc-gold); color: var(--wdbc-navy); }
.wdbc-tier-featured .wdbc-tier-cta:hover { background: #FFB01F; }
/* ---------- People ---------- */
.wdbc-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin: 22px 0; }
.wdbc-person {
background: #fff;
border: 1px solid #E3DCCA;
border-radius: 12px;
padding: 22px;
text-align: center;
}
.wdbc-person img,
.wdbc-person .wdbc-person-initials {
width: 96px; height: 96px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto .9rem;
display: flex; align-items: center; justify-content: center;
border: 3px solid var(--wdbc-gold);
background: var(--wdbc-navy);
color: var(--wdbc-gold);
font-size: 1.7rem; font-weight: 700; letter-spacing: .02em;
}
.wdbc-person h3 { margin: 0 0 .2rem; font-size: 1.02rem; }
.wdbc-person .wdbc-person-role {
font-family: var(--wdbc-font-mono);
font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--wdbc-gold-deep); margin-bottom: .6rem;
}
.wdbc-person p { font-size: .87rem; color: #4A5568; margin: 0; text-align: left; }
/* ---------- Event timeline ---------- */
.wdbc-events { position: relative; margin: 26px 0; padding-left: 26px; }
.wdbc-events::before {
content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px;
width: 2px; background: linear-gradient(180deg, var(--wdbc-gold), rgba(25, 197, 180, .5));
}
.wdbc-event { position: relative; margin-bottom: 26px; }
.wdbc-event::before {
content: ""; position: absolute; left: -26px; top: 6px;
width: 12px; height: 12px; border-radius: 50%;
background: var(--wdbc-gold); border: 2px solid #fff;
box-shadow: 0 0 0 2px var(--wdbc-gold);
}
.wdbc-event-date {
font-family: var(--wdbc-font-mono); font-size: .68rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--wdbc-gold-deep);
}
.wdbc-event h3 { margin: .25rem 0 .3rem; font-size: 1.06rem; }
.wdbc-event p { font-size: .9rem; color: #4A5568; margin: 0 0 .4rem; }
.wdbc-event-meta { font-size: .82rem; color: #5A6884; }
.wdbc-event-meta strong { color: var(--wdbc-navy); }
@media (max-width: 600px) {
.wdbc-plate { padding: 32px 22px; }
.wdbc-plate-art { opacity: .18; }
}
/* ==========================================================================
Full-width page layout
wbbc-core sets .wbbc-page-wrap to 960px, which reads as a narrow box on a
modern display and stacked the value cards one per row. The column is wider
here, the navy furniture (hero, CTA) runs edge to edge like the photo bands,
and the cards share the width instead of queueing down it. Running text is
still capped — the page goes full width, the prose does not.
========================================================================== */
.wbbc-page-wrap {
max-width: 1240px;
padding: 0 clamp(20px, 4vw, 48px) clamp(48px, 6vw, 72px);
}
/* Bands escape to the viewport edge. A grid `full` track cannot do this job:
the wrap sits inside Hello Elementor's .page-content, which is itself only
~1140px wide, so a track-based bleed stops at that box rather than the
window. The viewport unit is what actually clears both containers. */
.wbbc-page-wrap > .wbbc-page-hero,
.wbbc-page-wrap > .wbbc-cta-banner,
.wbbc-page-wrap > .wdbc-split,
.wbbc-page-wrap > .wdbc-priority,
.wbbc-page-wrap > .wdbc-band {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border-radius: 0;
}
.wbbc-page-wrap > *:first-child { margin-top: 0; }
/* A page that opens with body copy rather than a bleeding band still needs air
under the sticky header. */
.wbbc-page-wrap > *:first-child:not(.wbbc-page-hero):not(.wbbc-cta-banner):not(.wdbc-split):not(.wdbc-band):not(.wdbc-plate) {
margin-top: clamp(32px, 4vw, 48px);
}
/* Page hero: a full-bleed band, not a rounded card floating in the column. */
.wbbc-page-wrap .wbbc-page-hero {
margin-bottom: clamp(40px, 5vw, 64px);
border-radius: 0;
padding: clamp(56px, 7vw, 92px) clamp(24px, 5vw, 40px);
}
.wbbc-page-wrap .wbbc-page-hero h1 {
font-size: clamp(2rem, 4.2vw, 3rem);
line-height: 1.1;
letter-spacing: -.02em;
text-wrap: balance;
max-width: 22ch;
margin-inline: auto;
}
.wbbc-page-wrap .wbbc-page-hero p {
font-size: clamp(1rem, 1.45vw, 1.15rem);
line-height: 1.6;
max-width: 62ch;
}
/* Closing CTA gets the same edge-to-edge treatment. */
.wbbc-page-wrap .wbbc-cta-banner {
margin-top: clamp(48px, 6vw, 72px);
margin-bottom: 0;
border-radius: 0;
padding: clamp(48px, 6vw, 76px) clamp(24px, 5vw, 40px);
}
.wbbc-page-wrap .wbbc-cta-banner h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); }
/* Value sections: cards share the row instead of stacking. Everything that is
not a card spans the full grid, so headings, lists, people grids and pricing
ladders keep behaving like block content. */
.wbbc-value-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
gap: clamp(16px, 1.6vw, 22px);
align-items: stretch;
margin-bottom: clamp(40px, 5vw, 64px);
}
.wbbc-value-section > * { grid-column: 1 / -1; }
.wbbc-value-section > .wbbc-value-card { grid-column: auto; margin-bottom: 0; }
/* ---------- Cards that lead with a photograph ----------
The base card is a row of [icon][copy] with its own padding. A card that
also carries a picture becomes a column — photo, then that same row — so
the photograph can run to the card's edges while the text keeps its inset.
Hence the padding moves from the card to .wdbc-card-body.
The pictures are documentary rather than decorative: the committee whose
bills the tracker follows, testimony on our own bill, the people at the
close of a forum. They are the argument the copy is making. */
.wbbc-value-card.wdbc-card-illustrated {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
overflow: hidden; /* clip the photo to the card's radius */
}
.wdbc-card-photo {
margin: 0;
background: var(--wdbc-navy-deep);
border-bottom: 1px solid rgba(22, 35, 63, .10);
}
/* The ratio is set on the image, not the figure. On the figure it competes
with the img's own intrinsic ratio — the two 16:9 stills came out 207px tall
and the 3:2 group shot 222px, so the three cards' text started at different
heights. Constraining the image itself makes every card's photo the same
shape whatever was shot. */
.wdbc-card-photo img {
width: 100%;
aspect-ratio: 16 / 10;
height: auto;
object-fit: cover;
display: block;
}
/* A portrait frame cropped to 16:10 from the centre cuts heads off. This
pulls the visible slice up for the tall source among the three; the value
was chosen by sweeping the offset against the actual photograph rather than
guessed. */
.wdbc-card-photo .wdbc-photo-focus-high { object-position: center 20%; }
.wdbc-card-body {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 22px 24px 24px;
}
/* The card lifts on hover already; the photograph should read as part of that
rather than sitting still behind it. */
.wdbc-card-illustrated .wdbc-card-photo img {
transition: transform .45s ease;
}
.wdbc-card-illustrated:hover .wdbc-card-photo img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
.wdbc-card-illustrated .wdbc-card-photo img { transition: none; }
.wdbc-card-illustrated:hover .wdbc-card-photo img { transform: none; }
}
.wbbc-value-section > h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); }
.wbbc-value-section > p { max-width: 68ch; margin-inline: auto; }
/* ---------- Pillar colour coding ----------
The agenda is one agenda in two halves, and until now the page said so only
in prose: the two halves were styled identically, so the structure the whole
organisation is built on was invisible at a glance.
Each half sets a --pillar colour once, and the parts below read from it, so
the mapping lives in exactly two declarations rather than being restated on
every rule. The deep variants are used because these sections sit on the
light page; see the token block for why the bright pair cannot be used here.
Colour is never the only carrier. Each half is also labelled in words
("Pillar 01 · Growth"), which is what actually does the work for a reader
who does not see the hue, or who is scanning rather than reading. */
.wdbc-pillar-growth { --pillar: var(--wdbc-cyan-deep); }
.wdbc-pillar-trust { --pillar: var(--wdbc-indigo-deep); }
.wbbc-value-section > p.wdbc-pillar-eyebrow {
font-family: var(--wdbc-font-mono);
font-size: .72rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--pillar);
margin: 0 0 6px;
text-align: center;
/* The 68ch cap on sibling paragraphs is a measure limit for body copy. In
mono at .72rem it computes to 470px, and since a grid item is placed at
the start of its track rather than centred by an auto inline margin, the
label ended up centred inside a 470px box at the left of a 1044px row —
reading as left-aligned against a centred heading. It is a two-word
label, so it has no measure to protect. */
max-width: none;
}
/* A short rule under the heading, in the pillar colour. Centred to match the
heading, and sized in ch so it stays proportional to the type rather than
to the viewport. */
.wdbc-pillar > h2 { margin-bottom: 10px; }
.wdbc-pillar > h2::after {
content: "";
display: block;
width: 4ch;
height: 3px;
margin: 10px auto 0;
border-radius: 2px;
background: var(--pillar);
}
/* The card's own tie back to its pillar. A top rule rather than a left spine:
these cards lead with a 48px icon chip, and a spine immediately beside it
read as clutter. */
.wdbc-pillar .wbbc-value-card {
border-top: 3px solid var(--pillar);
}
/* The icon chip was a fixed amber wash (rgba(255,191,0,.1)) with an orange
glyph — a leftover that belonged to neither pillar and to no current brand
colour. Inside a pillar it now takes that pillar's hue. The flat rgba
fallback is declared first for anything without color-mix. */
.wdbc-pillar .wbbc-value-card-icon {
background: rgba(22, 35, 63, .06);
background: color-mix(in srgb, var(--pillar) 11%, transparent);
}
.wdbc-pillar .wbbc-value-card-icon svg { color: var(--pillar); }
/* ==========================================================================
Grouped primary navigation
Ten flat top-level items crowded the header and wrapped on tablet. The menu
is now four groups; each parent is a real page link and the chevron beside
it is a separate disclosure button, so a click on the label still navigates.
========================================================================== */
.wbbc-nav-list > li.menu-item-has-children {
display: flex;
align-items: center;
position: relative;
}
.wbbc-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
margin-left: -10px;
padding: 0; border: 0; background: none;
color: var(--wbbc-navy, #16233F);
cursor: pointer;
}
.wbbc-nav-toggle svg { width: 11px; height: 11px; transition: transform .18s ease; }
.wbbc-nav-list > li.is-open > .wbbc-nav-toggle svg { transform: rotate(180deg); }
.wbbc-nav-list .sub-menu {
position: absolute;
top: 100%; left: 0;
min-width: 15rem;
margin: 0; padding: 8px 0;
list-style: none;
background: var(--wdbc-cream, #FBF3DE);
border: 1px solid rgba(22, 35, 63, .14);
border-top: 3px solid var(--wdbc-navy, #16233F);
border-radius: 0 0 10px 10px;
box-shadow: 0 18px 40px rgba(22, 35, 63, .18);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .16s ease, transform .16s ease, visibility .16s;
z-index: 100;
}
.wbbc-nav-list > li.menu-item-has-children:hover > .sub-menu,
.wbbc-nav-list > li.menu-item-has-children:focus-within > .sub-menu,
.wbbc-nav-list > li.menu-item-has-children.is-open > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.wbbc-nav-list .sub-menu li a {
padding: 9px 18px;
font-size: 14.5px;
font-weight: 500;
white-space: nowrap;
}
.wbbc-nav-list .sub-menu li a::after { display: none; } /* the sweep rule belongs to the top row only */
.wbbc-nav-list .sub-menu li a:hover,
.wbbc-nav-list .sub-menu li.current-menu-item a { background: rgba(22, 35, 63, .07); }
@media (max-width: 767px) {
/* In the open mobile panel the submenu is an indented list, not an overlay. */
.wbbc-nav-list > li.menu-item-has-children { flex-wrap: wrap; justify-content: center; }
.wbbc-nav-list .sub-menu {
display: none;
position: static;
opacity: 1; visibility: visible; transform: none;
flex: 0 0 100%;
min-width: 0;
margin: 2px 0 8px;
padding: 4px 0;
background: none;
border: 0;
border-left: 2px solid rgba(22, 35, 63, .18);
border-radius: 0;
box-shadow: none;
}
.wbbc-nav-list > li.menu-item-has-children.is-open > .sub-menu { display: block; }
.wbbc-nav-list .sub-menu li a { white-space: normal; text-align: left; padding-left: 22px; }
}
/* ==========================================================================
Full-bleed photography
.wbbc-page-wrap caps content at 960px; photo bands are meant to run to the
viewport edge, so they break out of that column with the same technique the
particle hero already uses. Text inside a bleeding band is re-constrained to
a readable column — bleeding the picture is the point, bleeding a paragraph
to 1920px is not.
========================================================================== */
/* Escape hatch for content that sits OUTSIDE .wbbc-page-wrap and so has no
`full` grid track to occupy — currently only the particle hero. */
.wdbc-bleed {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border-radius: 0;
}
/* Safety net for those vw-based bleeds only: 100vw counts the scrollbar, so
they overhang by its width. `clip` trims that without making body a scroll
container the way `hidden` would, which would break the sticky header.
In-wrap bands use grid tracks and never rely on this. */
body { overflow-x: clip; }
/* ---------- Photo split band: picture one side, panel the other ---------- */
.wdbc-split {
display: grid;
/* The media column is capped in pixels, not left as a bare fraction. These
are portrait photographs shown whole (see below), so the column's width
is what sets the band's height — on a 1920px window an unbounded 36%
column would run the band past 1000px tall. */
grid-template-columns: minmax(0, min(38%, 460px)) minmax(0, 1fr);
gap: 0;
overflow: hidden;
margin: 48px 0;
background: linear-gradient(135deg, var(--wdbc-navy) 0%, var(--wdbc-navy-deep) 100%);
color: #F2EEE2;
}
.wdbc-split-media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* The photograph runs at its own aspect ratio instead of filling a fixed box.
object-fit: cover on a portrait shot of the Capitol always sacrificed one end
of it — either the gilded figure on the dome or Forward at the foot of the
steps, which are the two things that make it this building. In flow the image
sets the band's height; if the copy beside it ever runs longer, the row grows
and the photo simply centres in it. */
.wdbc-split-media img {
position: static;
display: block;
width: 100%;
height: auto;
}
.wdbc-split-media::after { /* navy wash so the photo joins the panel */
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(22,35,63,.30) 0%, rgba(22,35,63,0) 45%, rgba(22,35,63,.62) 100%);
}
/* Picture on the right instead — alternate down a long page. */
.wdbc-split-flip .wdbc-split-media { order: 2; }
.wdbc-split-flip .wdbc-split-media::after {
background: linear-gradient(270deg, rgba(22,35,63,.30) 0%, rgba(22,35,63,0) 45%, rgba(22,35,63,.62) 100%);
}
.wdbc-split-body {
align-self: center;
/* Centred in its half: left-aligned copy this narrow against a full-bleed
panel otherwise leaves a conspicuous void on the outer edge. */
margin-inline: auto;
padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 56px);
max-width: 40rem;
}
.wdbc-split-body .wdbc-plate-eyebrow {
font-family: var(--wdbc-font-mono);
font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
color: rgba(255, 194, 75, .85); margin-bottom: .5rem;
}
.wdbc-split-body h2, .wdbc-split-body h3 { color: var(--wdbc-gold); margin: 0 0 .6rem; }
.wdbc-split-body p { color: #D6DEEC; margin: 0 0 .8rem; max-width: 54ch; }
.wdbc-split-body p:last-child { margin-bottom: 0; }
.wdbc-split-credit {
font-family: var(--wdbc-font-mono);
font-size: .6rem; letter-spacing: .06em;
color: rgba(214, 222, 236, .5);
}
.wdbc-split-credit a { color: inherit; text-decoration-color: rgba(214,222,236,.35); }
@media (max-width: 780px) {
.wdbc-split { grid-template-columns: 1fr; margin: 32px 0; }
/* Stacked, an edge-to-edge 2:3 portrait would run ~600px tall on a phone and
push the copy entirely below the fold. Inset it as a plate instead — the
whole photograph, just not the whole screen. */
.wdbc-split-media { padding: 32px 24px 0; }
.wdbc-split-media img { max-width: 300px; margin-inline: auto; }
.wdbc-split-media::after { display: none; } /* a side-to-side wash reads wrong once the photo is inset */
.wdbc-split-flip .wdbc-split-media { order: 0; }
.wdbc-split-body { padding: 30px 24px; }
}
/* ---------- Cinematic band: landscape photograph, copy laid over it ---------- */
.wdbc-band {
position: relative;
display: grid;
align-items: end;
overflow: hidden;
margin: 48px 0;
min-height: clamp(340px, 56vh, 580px);
background: var(--wdbc-navy-deep);
}
/* The image is wrapped rather than a direct child: wpautop wraps a bare ![]()
on its own line in a , which would break a child selector here. */
.wdbc-band-media { position: absolute; inset: 0; }
.wdbc-band-media img,
.wdbc-band-media video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 50%;
display: block;
}
/* Video ground. A