/* ========================================================================== WDBC SECTIONS — a reusable page rhythm (2026-09-23) Any page can be built from full-bleed sections in three tones:
dark: navy ground, light ink
light: brand cream
light: paler cream, for a light section that follows cream each holding a .wdbc-sec-in column and, usually, a .wdbc-sec-head:

Eyebrow

Heading

One or two sentences.

Alternate dark and light. Two light sections in a row should be cream then paper, so the seam is visible without a rule. The navy tone is the hero's own gradient, so a navy section after the hero reads as the same ground rather than a second, slightly different navy. Scroll reveal: add data-reveal to anything that should rise into view, or data-reveal-stagger to a container whose children should follow one another. See assets/js/wdbc-reveal.js. Nothing is hidden unless that script has run (it sets .wdbc-reveal-on on ), and prefers-reduced-motion switches the motion off entirely. ========================================================================== */ .wdbc-sec { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: clamp(64px, 9vw, 128px) 0; box-sizing: border-box; } /* The theme column is narrower than the viewport; inside it a section still bleeds, but a section placed at the top level of a full-width template must not double the offset. */ .wdbc-sections-root > .wdbc-sec { margin-left: 0; margin-right: 0; width: 100%; max-width: none; } .wdbc-sec-in { width: min(1200px, 100% - 2 * clamp(16px, 4vw, 40px)); margin: 0 auto; } .wdbc-sec-in--narrow { width: min(820px, 100% - 2 * clamp(16px, 4vw, 40px)); } /* ---------- Tones ---------- */ .wdbc-sec--navy { background: radial-gradient(120% 120% at 72% 42%, var(--wdbc-navy) 0%, var(--wdbc-navy-deep) 100%); color: var(--wdbc-ink-on-dark); } .wdbc-sec--cream { background: var(--wdbc-cream); color: var(--wdbc-navy); } .wdbc-sec--paper { background: var(--wdbc-cream-tint); color: var(--wdbc-navy); } .wdbc-sec--flush { padding: 0; } /* ---------- Section head ---------- */ .wdbc-sec-head { max-width: 760px; margin: 0 0 clamp(32px, 4vw, 52px); } .wdbc-sec-head--center { margin-left: auto; margin-right: auto; text-align: center; } .wdbc-eyebrow { margin: 0 0 12px; font-family: var(--wdbc-font-mono); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--wdbc-gold-deep); } .wdbc-sec--navy .wdbc-eyebrow { color: var(--wdbc-gold); } .wdbc-sec-head h2 { margin: 0 0 14px; font-family: var(--wdbc-font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; color: inherit; } .wdbc-lede { margin: 0; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.6; color: rgba(22, 35, 63, .78); } .wdbc-sec--navy .wdbc-lede { color: var(--wdbc-ink-on-dark-soft); } .wdbc-sec--navy h2, .wdbc-sec--navy h3 { color: var(--wdbc-ink-on-dark); } /* ---------- Cards inside a section ---------- */ .wdbc-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); } @media (max-width: 900px) { .wdbc-grid-3 { grid-template-columns: minmax(0, 1fr); } } .wdbc-sec .wbbc-value-card.wdbc-card-illustrated { margin: 0; height: 100%; background: #fff; border: 1px solid #E3DCCA; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(22, 35, 63, .05), 0 14px 34px rgba(22, 35, 63, .07); transition: transform .25s ease, box-shadow .25s ease; } .wdbc-sec .wbbc-value-card.wdbc-card-illustrated:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(22, 35, 63, .05), 0 22px 44px rgba(22, 35, 63, .12); } .wdbc-sec .wdbc-card-photo { aspect-ratio: 16 / 10; margin: 0; overflow: hidden; } .wdbc-sec .wdbc-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- The score, inside a navy section ---------- */ .wdbc-sec--navy .wdbc-status { background: none; border-radius: 0; padding: 0; margin: 0; box-shadow: none; } /* ---------- The split, light variant ---------- */ .wdbc-split.wdbc-split--light { margin: 0; background: var(--wdbc-cream); color: var(--wdbc-navy); } .wdbc-split--light .wdbc-split-media::after { display: none; } .wdbc-split--light .wdbc-split-body h2 { color: var(--wdbc-navy); } .wdbc-split--light .wdbc-split-body p { color: rgba(22, 35, 63, .8); } .wdbc-split--light .wdbc-split-body .wdbc-plate-eyebrow { color: var(--wdbc-gold-deep); } .wdbc-split--light .wdbc-split-credit { color: rgba(22, 35, 63, .55); } .wdbc-split--light .wdbc-split-credit a { text-decoration-color: rgba(22, 35, 63, .3); } /* ---------- Headlines on a light section ---------- */ .wdbc-sec .wdbc-headlines-sec { margin: 0; } /* ========================================================================== Scroll reveal ========================================================================== */ .wdbc-reveal-on [data-reveal], .wdbc-reveal-on [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--wdbc-reveal-delay, 0s); } .wdbc-reveal-on [data-reveal].is-revealed, .wdbc-reveal-on [data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; } .wdbc-reveal-on [data-reveal="fade"] { transform: none; } .wdbc-reveal-on [data-reveal="scale"] { transform: scale(.97); } @media (prefers-reduced-motion: reduce) { .wdbc-reveal-on [data-reveal], .wdbc-reveal-on [data-reveal-stagger] > * { opacity: 1; transform: none; transition: none; } } /* Inside the legacy .wbbc-page-wrap column: sections butt against each other, with no inherited column margins. The wrap's first-child rule is written with a long :not() chain, hence the !important. */ .wbbc-page-wrap > .wdbc-sec { margin-top: 0 !important; margin-bottom: 0 !important; } .wbbc-page-wrap.wdbc-home { padding-top: 0; padding-bottom: 0; } .wbbc-page-wrap.wdbc-home > .wdbc-band { margin-top: 0; } .wdbc-sec .wdbc-split { margin: 0; } /* The score band. The page wrap centres loose paragraphs and gives them auto margins; inside this band everything reads from one left edge, the ring sits to its left, and the type is on the same scale as a section head. */ .wdbc-sec--navy .wdbc-status { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; max-width: 1080px; margin: 0 auto; text-align: left; } .wdbc-sec--navy .wdbc-status-body > * { margin-left: 0; margin-right: 0; text-align: left; } .wdbc-sec--navy .wdbc-status-ring { width: clamp(170px, 20vw, 260px); } .wdbc-sec--navy .wdbc-status-ring-in { width: 80%; background: var(--wdbc-navy-deep); font-family: var(--wdbc-font-display); font-weight: 900; font-size: clamp(4rem, 8vw, 6.5rem); } .wdbc-sec--navy .wdbc-status-pct { font-size: 1rem; } .wdbc-sec--navy .wdbc-status-eyebrow { font-size: 12px; letter-spacing: .18em; margin-bottom: 12px; } .wdbc-sec--navy .wdbc-status-body h2 { font-family: var(--wdbc-font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; font-weight: 800; margin-bottom: 14px; } .wdbc-sec--navy .wdbc-status-sub { font-size: clamp(1.02rem, 1.3vw, 1.15rem); max-width: 56ch; margin-bottom: 28px; } .wdbc-sec--navy .wdbc-status-stats { gap: clamp(28px, 5vw, 64px); margin-bottom: 30px; } .wdbc-sec--navy .wdbc-status-stats dd { font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 900; } .wdbc-sec--navy .wdbc-status-cta { justify-content: flex-start; } @media (max-width: 720px) { .wdbc-sec--navy .wdbc-status { grid-template-columns: minmax(0, 1fr); justify-items: start; } } /* ========================================================================== Living diagrams (inc/living-diagrams.php) ========================================================================== */ .wdbc-flow, .wdbc-map { position: relative; margin-top: clamp(28px, 4vw, 48px); border-radius: 20px; background: radial-gradient(120% 120% at 72% 42%, var(--wdbc-navy) 0%, var(--wdbc-navy-deep) 100%); color: var(--wdbc-ink-on-dark); overflow: hidden; box-shadow: 0 24px 60px rgba(22, 35, 63, .18); } .wdbc-flow::before, .wdbc-map::before { /* the dot field from the brand kit */ content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(183, 226, 255, .09) 1.4px, transparent 1.5px); background-size: 24px 24px; pointer-events: none; } .wdbc-flow .wdbc-eyebrow, .wdbc-map .wdbc-eyebrow { color: var(--wdbc-gold); } .wdbc-flow h3, .wdbc-map h3 { margin: 0; font-family: var(--wdbc-font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; font-weight: 800; color: var(--wdbc-ink-on-dark); text-wrap: balance; } /* ---------- The pipeline ---------- */ .wdbc-flow { padding: clamp(28px, 4vw, 52px); text-align: left; } .wdbc-flow-head { position: relative; max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); } .wdbc-flow-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } /* The wire that runs through the stations, with light travelling along it. */ .wdbc-flow-steps::before, .wdbc-flow-steps::after { content: ""; position: absolute; left: 32px; right: 32px; top: 31px; height: 2px; border-radius: 2px; } .wdbc-flow-steps::before { background: rgba(234, 240, 250, .14); } .wdbc-flow-steps::after { background: linear-gradient(90deg, transparent 0 40%, var(--wdbc-gold) 50%, transparent 60% 100%); background-size: 40% 100%; background-repeat: no-repeat; animation: wdbc-wire 3.6s linear infinite; } @keyframes wdbc-wire { from { background-position: -40% 0; } to { background-position: 140% 0; } } .wdbc-flow-step { position: relative; margin: 0; } .wdbc-flow-link { display: flex; flex-direction: column; gap: 6px; height: 100%; color: inherit; text-decoration: none; } .wdbc-flow-node { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; border-radius: 50%; background: var(--wdbc-navy-deep); border: 2px solid rgba(255, 194, 75, .55); color: var(--wdbc-gold); box-shadow: 0 0 0 6px rgba(255, 194, 75, .06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .wdbc-flow-node svg { width: 28px; height: 28px; } .wdbc-flow-step.is-seal .wdbc-flow-node { background: var(--wdbc-cream); border-color: var(--wdbc-gold); } .wdbc-flow-step.is-seal .wdbc-flow-node svg { width: 56px; height: 56px; } /* Each node lights in turn, in time with the light on the wire. */ .wdbc-flow-step .wdbc-flow-node { animation: wdbc-node 3.6s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .55s); } .wdbc-flow-step:nth-child(1) { --n: 0; } .wdbc-flow-step:nth-child(2) { --n: 1; } .wdbc-flow-step:nth-child(3) { --n: 2; } .wdbc-flow-step:nth-child(4) { --n: 3; } .wdbc-flow-step:nth-child(5) { --n: 4; } @keyframes wdbc-node { 0%, 70%, 100% { box-shadow: 0 0 0 6px rgba(255, 194, 75, .06); } 18% { box-shadow: 0 0 0 10px rgba(255, 194, 75, .22), 0 0 28px rgba(255, 194, 75, .35); } } .wdbc-flow-link:hover .wdbc-flow-node, .wdbc-flow-link:focus-visible .wdbc-flow-node { transform: translateY(-3px); border-color: var(--wdbc-gold); } .wdbc-flow-num { font-family: var(--wdbc-font-mono); font-size: 11px; letter-spacing: .14em; color: var(--wdbc-ink-on-dark-faint); } .wdbc-flow-step strong { font-family: var(--wdbc-font-display); font-size: 1.2rem; font-weight: 800; color: var(--wdbc-ink-on-dark); } .wdbc-flow-text { font-size: 14px; line-height: 1.5; color: var(--wdbc-ink-on-dark-soft); } .wdbc-flow-stat { margin-top: auto; padding-top: 8px; font-family: var(--wdbc-font-mono); font-size: 12px; letter-spacing: .06em; color: var(--wdbc-gold); } @media (max-width: 960px) { .wdbc-flow-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; } .wdbc-flow-steps::before, .wdbc-flow-steps::after { left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px; height: auto; } .wdbc-flow-steps::after { background: linear-gradient(180deg, transparent 0 40%, var(--wdbc-gold) 50%, transparent 60% 100%); background-size: 100% 40%; animation-name: wdbc-wire-v; } .wdbc-flow-link { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; row-gap: 2px; } .wdbc-flow-node { grid-row: 1 / span 4; margin: 0; } .wdbc-flow-stat { margin-top: 2px; padding-top: 0; } } @keyframes wdbc-wire-v { from { background-position: 0 -40%; } to { background-position: 0 140%; } } /* ---------- The map ---------- */ .wdbc-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 56px); padding: clamp(28px, 4vw, 52px); text-align: left; } .wdbc-map-art { position: relative; } .wdbc-map-art svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; overflow: visible; } .wdbc-map-link { stroke: rgba(255, 194, 75, .55); stroke-width: 220; stroke-dasharray: 700 900; animation: wdbc-map-flow 2.4s linear infinite; } @keyframes wdbc-map-flow { to { stroke-dashoffset: -1600; } } .wdbc-map-dot { fill: var(--wdbc-gold); stroke: var(--wdbc-navy-deep); stroke-width: 450; } .wdbc-map-pin.is-hub .wdbc-map-dot { fill: var(--wdbc-cream); stroke: var(--wdbc-gold); } .wdbc-map-pulse { fill: none; stroke: var(--wdbc-gold); stroke-width: 260; transform-box: fill-box; transform-origin: center; animation: wdbc-map-pulse 2.8s ease-out infinite; animation-delay: calc(var(--i, 0) * .6s); } @keyframes wdbc-map-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } } .wdbc-map-label { font-family: var(--wdbc-font-display); font-weight: 800; font-size: 2600px; fill: var(--wdbc-ink-on-dark); paint-order: stroke; stroke: var(--wdbc-navy-deep); stroke-width: 700; } .wdbc-map-body h3 { margin-bottom: 22px; } .wdbc-map-list { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid rgba(234, 240, 250, .12); } .wdbc-map-list li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); column-gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(234, 240, 250, .12); } .wdbc-map-list li > span:last-child { grid-column: 2; font-size: 14px; color: var(--wdbc-ink-on-dark-soft); } .wdbc-map-when { grid-row: 1 / span 2; font-family: var(--wdbc-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--wdbc-gold); padding-top: 3px; } .wdbc-map-list strong { font-family: var(--wdbc-font-display); font-weight: 800; font-size: 1.05rem; color: var(--wdbc-ink-on-dark); } .wdbc-map-cta { margin: 0; } .wdbc-map .wbbc-cta-btn { color: var(--wdbc-gold); } @media (max-width: 860px) { .wdbc-map { grid-template-columns: minmax(0, 1fr); } .wdbc-map-art svg { max-width: 320px; } } @media (prefers-reduced-motion: reduce) { .wdbc-flow-steps::after, .wdbc-flow-step .wdbc-flow-node, .wdbc-map-link, .wdbc-map-pulse { animation: none; } .wdbc-flow-steps::after { display: none; } .wdbc-map-pulse { opacity: 0; } } /* Panel copy reads from one left edge (the page wrap centres loose

s). */ .wdbc-flow .wdbc-eyebrow, .wdbc-map .wdbc-eyebrow, .wdbc-flow-head > *, .wdbc-map-body > * { margin-left: 0; margin-right: 0; text-align: left; } .wdbc-map .wbbc-cta-btn, .wdbc-map .wbbc-cta-btn:link, .wdbc-map .wbbc-cta-btn:visited { color: var(--wdbc-navy) !important; } .wdbc-map .wbbc-cta-btn:hover, .wdbc-map .wbbc-cta-btn:focus-visible { color: var(--wdbc-navy) !important; }