@charset "utf-8";
/* ==========================================================================
WORDPRESS LAYER
--------------------------------------------------------------------------
Everything WordPress emits that the static build never had to handle:
Contact Form 7, widget output, pagination, editor alignment classes.
Additive only. Built from the DATUM tokens in site.css so it inherits the
same palette, type and rhythm. Nothing here overrides a DATUM rule.
========================================================================== */
/* --------------------------------------------------------------------------
1. CONTACT FORM 7 — mapped onto the .field / .input / .select design
-------------------------------------------------------------------------- */
/* CF7 wraps each control in ; the design spaces on .field instead. */
.wpcf7 form > p,
.wpcf7 .flex-1 > div,
.wpcf7 .flex-2 > div { margin: 0 0 13px; }
.wpcf7 .flex-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 13px; }
@media (max-width: 560px) { .wpcf7 .flex-2 { grid-template-columns: 1fr; } }
.wpcf7 label { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 input[type="url"], .wpcf7 input[type="date"], .wpcf7 input[type="number"],
.wpcf7 select, .wpcf7 textarea {
width: 100%; background: var(--white); color: var(--ink);
border: 1px solid var(--rule); border-radius: var(--r);
padding: 12px 14px; font-size: 15px; font-family: var(--body);
transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.wpcf7 textarea { min-height: 118px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
outline: 0; border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-50);
}
.wpcf7 ::placeholder { color: var(--faint); opacity: 1; }
.wpcf7 input[type="submit"] {
display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
font-family: var(--mono); font-size: 12.5px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
background: var(--brand-600); color: #fff; border: 1px solid transparent;
border-radius: var(--r); padding: 15px 26px; width: 100%;
transition: background .18s var(--ease), transform .18s var(--ease);
}
.wpcf7 input[type="submit"]:hover { background: var(--brand-500); transform: translateY(-1px); }
/* Validation + response messages */
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font-family: var(--mono);
font-size: 11px; letter-spacing: .04em; color: var(--flag-ink); }
.wpcf7 .wpcf7-not-valid { border-color: var(--flag); }
.wpcf7 form .wpcf7-response-output {
margin: 16px 0 0; padding: 12px 16px; border: 1px solid var(--rule);
border-left: 3px solid var(--brand-400); border-radius: var(--r);
font-size: 14.5px; background: var(--white);
}
.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--ok); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: var(--flag); }
.wpcf7-spinner { margin: 0 0 0 10px; }
/* reCAPTCHA v3 badge is hidden; the notice in the form covers the terms. */
.grecaptcha-badge { visibility: hidden; }
/* Forms on the brand-blue sidebar panel */
.sb-quote .wpcf7 label { color: rgba(255,255,255,.72); }
.sb-quote .wpcf7 input[type="text"], .sb-quote .wpcf7 input[type="email"],
.sb-quote .wpcf7 input[type="tel"], .sb-quote .wpcf7 input[type="url"],
.sb-quote .wpcf7 select, .sb-quote .wpcf7 textarea {
background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff;
}
.sb-quote .wpcf7 ::placeholder { color: rgba(255,255,255,.5); }
.sb-quote .wpcf7 input:focus, .sb-quote .wpcf7 select:focus, .sb-quote .wpcf7 textarea:focus {
border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 3px rgba(255,255,255,.1);
}
.sb-quote .wpcf7 input[type="submit"] { background: #fff; color: var(--brand-950); }
.sb-quote .wpcf7 input[type="submit"]:hover { background: var(--brand-50); }
.sb-quote .wpcf7 textarea { min-height: 92px; }
.sb-quote .wpcf7 form .wpcf7-response-output { background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.22); color: #fff; }
/* --------------------------------------------------------------------------
2. WIDGETS — Custom HTML widgets rendered as DATUM sidebar cards
-------------------------------------------------------------------------- */
/* A plain
inside a sidebar card gets the .sb-list treatment, and the mono
index numbers are generated rather than typed into the widget. */
.sb-card ul { list-style: none; margin: 0; padding: 0; counter-reset: sbitem; }
.sb-card ul li { border-bottom: 1px solid var(--rule-2); margin: 0; }
.sb-card ul li:last-child { border-bottom: 0; }
.sb-card ul li a {
display: flex; align-items: baseline; gap: 10px; padding: 11px 0;
font-size: 14.8px; color: var(--ink-2);
transition: color .16s var(--ease), padding-left .16s var(--ease);
}
.sb-card ul li a::before {
counter-increment: sbitem; content: counter(sbitem, decimal-leading-zero);
font-family: var(--mono); font-size: 10px; color: var(--brand-400); flex: none;
}
.sb-card ul li a:hover { color: var(--brand-600); padding-left: 5px; }
.sb-card ul li a:hover::before { color: var(--flag-ink); }
.sb-card ul li.current-menu-item a,
.sb-card ul li.current a { color: var(--brand-600); font-weight: 600; }
/* Contact-style widgets carry no numbering. */
.sb-card.is-plain ul li a::before { content: none; counter-increment: none; }
/* Widget images, text and the news list */
.sb-card img { border-radius: var(--r); }
.sb-card p { font-size: 15px; color: var(--ink-2); }
.sb-card p:last-child { margin-bottom: 0; }
.sb-posts { display: block; }
/* Footer widget columns keep their own nested wrappers from the old content. */
.footer-brand img { width: 190px; max-width: 100%; }
.footer-col ul,
.footer-col .footer-links ul,
.footer-col .footer-heading ul { list-style: none; margin: 0; padding: 0; }
.footer-brand .socials a svg { width: 17px; height: 17px; }
/* Icon-font leftovers in old widget markup would render as empty boxes. */
.footer-contact i,
.contact-list i,
.sb-card i[class^="la"],
.sb-card i[class*=" la"] { display: none; }
/* --------------------------------------------------------------------------
3. PAGINATION
-------------------------------------------------------------------------- */
.pager { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 44px; }
.pager .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 42px; height: 42px; padding: 0 14px;
background: var(--white); border: 1px solid var(--rule); border-radius: var(--r);
font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--ink-2);
transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.pager a.page-numbers:hover { border-color: var(--brand-300); color: var(--brand-600); }
.pager .page-numbers.current { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.pager .page-numbers.dots { border-color: transparent; background: transparent; }
/* --------------------------------------------------------------------------
4. EDITOR + CORE CLASSES
-------------------------------------------------------------------------- */
.screen-reader-text {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.entry .alignleft { float: left; margin: 6px 28px 20px 0; }
.entry .alignright { float: right; margin: 6px 0 20px 28px; }
.entry .aligncenter { display: block; margin-inline: auto; }
.entry .alignnone { margin-bottom: 20px; }
.entry .wp-caption { max-width: 100%; }
.entry .wp-caption-text { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 8px; }
@media (max-width: 620px) {
.entry .alignleft, .entry .alignright { float: none; margin: 20px 0; }
}
.empty-state {
padding: 44px; background: var(--white); border: 1px dashed var(--rule);
border-radius: var(--r-lg); text-align: center; color: var(--muted);
}
.searchform { display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.searchform .input {
flex: 1; min-width: 220px; background: var(--white);
border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 14px;
}
.page-links { font-family: var(--mono); font-size: 12.5px; margin-top: 28px; }
/* Layout variants used by the WordPress templates */
.layout--full { grid-template-columns: minmax(0, 1fr); }
.layout--project { padding-top: clamp(28px, 2vw + 14px, 44px); }
/* Hero image on a single article */
.post-hero { margin: 0 0 34px; }
.post-hero img { width: 100%; border-radius: var(--r-lg); }
/* Project page pieces.
Scoped to .entry because site.css sets `.entry figure { margin: 32px 0 }` at
the same specificity plus one — unscoped, the shot would inherit a top margin
it does not want at the head of the column. */
.entry .project-shot { margin: 0 0 34px; }
.entry .project-shot img {
display: block; width: 100%;
border-radius: var(--r-lg); border: 1px solid var(--rule);
}
.project-gallery {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px; margin-top: 40px;
}
.project-gallery img {
width: 100%; aspect-ratio: 4/3; object-fit: cover;
border-radius: var(--r); border: 1px solid var(--rule);
}
.project-visit { margin-top: 32px; }
/* Prev and next navigation, shared by posts and projects */
.pnav {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--rule);
}
.pnav-link {
display: block; padding: 18px 20px; background: var(--white);
border: 1px solid var(--rule); border-radius: var(--r-lg);
transition: border-color .18s var(--ease), box-shadow .2s var(--ease);
}
.pnav-link:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.pnav-link .k {
display: block; font-family: var(--mono); font-size: 10.5px;
letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.pnav-link .v { display: block; font-weight: 600; color: var(--ink); line-height: 1.35; }
.pnav-link--next { text-align: right; }
/* Contact page details list */
.contact-list { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.contact-list li { display: flex; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule-2); }
.contact-list .lbl {
flex: none; width: 74px; font-family: var(--mono); font-size: 10.5px;
letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding-top: 3px;
}
/* [page_hierarchy] — internal editorial tool, kept plain but legible */
.mfg-page-tree ul { list-style: none; margin: 0; padding-left: 20px; }
.mfg-page-tree > ul { padding-left: 0; }
.mfg-page-tree__item {
margin-bottom: 12px; padding: 14px 16px; background: var(--white);
border: 1px solid var(--rule); border-radius: var(--r);
}
.mfg-page-tree__badge {
display: inline-block; margin-bottom: 6px; padding: 2px 8px;
background: var(--brand-600); border-radius: var(--r-sm); color: #fff;
font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.mfg-page-tree__crumbs { display: block; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.mfg-page-tree__title { display: block; font-weight: 600; color: var(--ink); }
.mfg-page-tree__url { display: block; font-size: 13px; word-break: break-all; }
/* --------------------------------------------------------------------------
5. CONTACT MODAL
-------------------------------------------------------------------------- */
.mfg-modal {
position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
padding: 20px; background: rgba(8, 10, 14, .72); opacity: 0; visibility: hidden;
transition: opacity .22s var(--ease), visibility .22s;
}
.mfg-modal.is-open { opacity: 1; visibility: visible; }
.mfg-modal[hidden] { display: none; }
.mfg-modal__dialog { position: relative; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; }
.mfg-modal__close {
position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .14); border: 0; border-radius: var(--r);
color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
.mfg-modal__close:hover { background: rgba(255, 255, 255, .26); }
/* --------------------------------------------------------------------------
6. CORRECTIONS
-------------------------------------------------------------------------- */
/*
* `strong, b { color: var(--ink) }` also catches bold text inside solid
* buttons, which renders the label dark-on-dark. The editor wraps most button
* labels in , so the colour has to be inherited back.
*/
.inner-page-button b,
.inner-page-button strong,
.btn b,
.btn strong,
.inner-page-cta-banner-content > p:last-child a b,
.inner-page-cta-banner-content > p:last-child a strong { color: inherit; }
/* Sidebar list items that are steps rather than links carry their own spacing,
since the DATUM rules put the padding on the anchor. */
.sb-list > li > span:not(.idx) { display: block; }
.sb-list > li:not(:has(a)) {
display: flex; align-items: baseline; gap: 10px; padding: 11px 0;
font-size: 14.8px; color: var(--ink-2); line-height: 1.5;
}
.sb-list > li:not(:has(a)) .idx {
font-family: var(--mono); font-size: 10px; color: var(--brand-400); flex: none;
}
/* Footer widget content supplies its own ; DATUM styles the widget-title
. Match them so migrated widgets read the same as authored columns. */
.footer-col h3 {
font-family: var(--mono); font-size: 11.5px; font-weight: 500;
letter-spacing: .16em; text-transform: uppercase;
color: #fff; margin-bottom: 18px; padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* The modal sits on a dark scrim, so the white panel needs a little lift. */
.mfg-modal .form-panel { box-shadow: var(--shadow-lg); }
/* --------------------------------------------------------------------------
7. FORM REFINEMENTS
-------------------------------------------------------------------------- */
/*
* CF7 keeps its response box in the DOM at all times. With a border and padding
* that reserved dead space under every form, so it only shows once the form has
* something to say.
*/
.wpcf7 form .wpcf7-response-output { display: none; }
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { display: block; }
.wpcf7 form > p:last-child,
.wpcf7 .flex-1:last-child > div:last-child { margin-bottom: 0; }
/* The hero panel sits beside the headline, so its message field stays compact. */
.hero .form-panel .wpcf7 textarea { height: 122px; min-height: 122px; }
.hero .form-panel { padding: 30px 28px; }
/* --------------------------------------------------------------------------
8. CREDENTIAL STRIP — slimmer
--------------------------------------------------------------------------
The claims inherit mono + uppercase from the wrapper span, which is wide
enough that every one of them wrapped to two lines and the qualifiers wrapped
again under them — four lines of text in a strip that should read at a
glance. Claims move to the display face in sentence case, which fits on one
line at the same size, and the padding comes in to match.
-------------------------------------------------------------------------- */
.cred {
padding: 15px 20px 15px 0;
margin-right: 20px;
align-items: center;
gap: 14px;
}
.cred .ic {
width: 27px;
height: 27px;
margin-top: 0;
}
.cred .ic svg { stroke-width: 1.5; }
.cred b {
font-family: var(--display);
font-size: 14px;
font-weight: 650;
letter-spacing: -.008em;
text-transform: none;
color: var(--ink);
line-height: 1.3;
}
.cred > span > span {
font-size: 9px;
letter-spacing: .05em;
margin-top: 3px;
line-height: 1.35;
}
/* Below this the four columns are too narrow for one-line claims, so the strip
goes two-up rather than cramping all four. */
@media (max-width: 1180px) and (min-width: 861px) {
.cred { flex: 1 1 calc(50% - 20px); }
.cred:nth-child(2n) { border-right: 0; margin-right: 0; padding-right: 0; }
.cred:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 860px) {
.cred { padding: 13px 0; }
}
/* --------------------------------------------------------------------------
9. FAQ ACCORDION
--------------------------------------------------------------------------
faq.js drives the height in inline styles; this supplies the easing. Only
applied once the script has marked the group, so with JS off the panels stay
plain and open instantly.
-------------------------------------------------------------------------- */
.faq-accordion .faq-body {
transition: height .3s var(--ease), padding-bottom .3s var(--ease);
will-change: height;
}
@media (prefers-reduced-motion: reduce) {
.faq-accordion .faq-body { transition: none; }
}
/* The marker rotates with the panel rather than snapping. */
.faq-item > summary::after { transition: transform .3s var(--ease); }
/* --------------------------------------------------------------------------
10. PAGE HEADER IMAGE
--------------------------------------------------------------------------
mfg_page_header() sets --phead-img from the page's Banner Image field, a
category's term meta, or the theme default. The overlay below is what keeps
the white heading readable: near-solid on the left where the h1, deck and
breadcrumbs sit, thinning to the right so the photograph still reads.
Every banner is composed with its subject on the right for this reason. The
gradient never drops below .70 because the spec strip spans the full width.
-------------------------------------------------------------------------- */
.phead::before {
background-image:
radial-gradient(110% 130% at 88% -10%, rgba(67, 103, 198, .08) 0%, transparent 56%),
linear-gradient(90deg, rgba(8, 10, 14, .96) 0%, rgba(8, 10, 14, .88) 55%, rgba(8, 10, 14, .70) 100%),
var(--phead-img, none);
background-color: var(--brand-950);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* Narrow screens crop hard to the centre, so lift the floor for legibility. */
@media (max-width: 720px) {
.phead::before {
background-image:
linear-gradient(90deg, rgba(8, 10, 14, .96) 0%, rgba(8, 10, 14, .90) 100%),
var(--phead-img, none);
}
}
/* --------------------------------------------------------------------------
11. SHORTCODE BACKGROUNDS
--------------------------------------------------------------------------
Hardcoded rather than editable — these are part of the design, not content.
Each sits under an overlay heavy enough to hold its own text contrast.
-------------------------------------------------------------------------- */
/* [showcta] — deep band. Its ::before is an empty layer in site.css. */
.inner-page-cta-banner.ctabg1::before {
background-image:
radial-gradient(80% 140% at 100% 0%, rgba(67, 103, 198, .06) 0%, transparent 62%),
linear-gradient(0deg, rgba(8, 10, 14, .90), rgba(8, 10, 14, .90)),
url("../img/band-dark-01.webp");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* [showcta2] — mid band. */
.inner-page-cta-banner.ctabg2::before {
background-image:
radial-gradient(80% 140% at 0% 100%, rgba(8, 10, 14, .6) 0%, transparent 60%),
linear-gradient(0deg, rgba(18, 22, 29, .86), rgba(18, 22, 29, .86)),
url("../img/band-mid-01.webp");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* [focus2] — dark panel, photograph weighted right behind white text. */
.inner-page-focus2::before {
background-image:
radial-gradient(90% 120% at 92% 4%, rgba(255, 255, 255, .13) 0%, transparent 58%),
linear-gradient(90deg, rgb(18, 22, 29) 0%, rgba(18, 22, 29, .92) 50%, rgba(18, 22, 29, .72) 100%),
url("../img/focus2-plate.webp");
background-color: var(--brand-600);
background-repeat: no-repeat;
background-position: center right;
background-size: cover;
}
/*
* [focus3] — light panel. Its ::before and ::after are already spent on the
* corner tick marks, so the duotone goes on the element itself.
*
* Held much further back than focus2. These panels can run very tall, and a
* 16:9 image under `cover` over-zooms in a tall box until the pattern spreads
* behind every line of copy — which dark text on a light ground tolerates far
* less than white text on a dark one.
*/
.inner-page-focus3 {
background-image:
linear-gradient(90deg, rgb(238, 241, 248) 0%, rgba(238, 241, 248, .96) 45%, rgba(238, 241, 248, .84) 100%),
url("../img/focus3-turned.webp");
background-color: var(--brand-50);
background-repeat: no-repeat;
background-position: center right;
background-size: cover;
}
/* --------------------------------------------------------------------------
12. FIXED CORNER MARK
--------------------------------------------------------------------------
Pinned to the viewport, behind the content, on inner pages only. Inner pages
render as .wrap.layout with no opaque section wrapper, so the body paper
shows through and a z-index:-1 layer is visible. .phead sets isolation, so
the mark correctly stops at the header.
--mfg-corner is set per page by mfg_corner_mark_style(); with no image set
the layer resolves to none and paints nothing.
-------------------------------------------------------------------------- */
body:not(.home)::after {
content: "";
position: fixed;
right: 0;
bottom: 0;
width: min(42vw, 560px);
height: min(56vh, 620px);
background-image: var(--mfg-corner, none);
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
opacity: var(--mfg-corner-opacity, .5);
pointer-events: none;
z-index: -1;
/*
* The mark is a photograph on a rectangular canvas, so composited normally
* its edge shows as a tonal step against the paper. The source images have
* their backgrounds clipped to pure white, and multiplying by white is a
* no-op — so the box disappears and only the part itself darkens the page,
* whatever colour the surface underneath happens to be.
*/
mix-blend-mode: multiply;
}
/* Bottom-right is where the mobile CTA and form land — pull it off entirely. */
@media (max-width: 1100px) {
body:not(.home)::after { display: none; }
}
/* --------------------------------------------------------------------------
13. BIO FIGURE
--------------------------------------------------------------------------
Portrait headshot set beside a biography, floated so the copy wraps. Sized
as a fraction rather than a fixed width so it never crowds the measure on a
narrow content column, and cleared by the next heading so a short bio cannot
let the photo bleed into the section below.
-------------------------------------------------------------------------- */
.entry .bio-figure {
float: right;
width: min(320px, 38%);
margin: 4px 0 26px 14px;
padding: 0;
}
.entry .bio-figure img {
display: block;
width: 100%;
height: auto;
border-radius: var(--r-lg);
border: 1px solid var(--rule);
}
/* A float that outlives its own section is the classic failure here. */
.entry .bio-figure + * { margin-top: 0; }
.entry h2 { clear: both; }
@media (max-width: 700px) {
.entry .bio-figure {
float: none;
width: 100%;
max-width: 300px;
margin: 0 0 24px;
}
}
/* --------------------------------------------------------------------------
14. SIDEBAR CONTACT PANEL
--------------------------------------------------------------------------
The terminal block of a sidebar. It sits directly beneath .sb-quote, which is
already brand-blue, so repeating that blue would make two panels read as one
long block. This goes to the darkest ground in the ramp instead and takes the
safety orange as a top edge — the same "flagged datum" role the accent plays
everywhere else, not decoration.
-------------------------------------------------------------------------- */
.sb-contact {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 26px 24px 24px;
border-radius: var(--r-lg);
background: var(--brand-950);
box-shadow: var(--shadow-lg);
}
/* Depth, so it does not read as a flat rectangle against the paper. */
.sb-contact::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(85% 120% at 100% 0%, rgba(67, 103, 198, .11) 0%, transparent 60%),
repeating-linear-gradient(to right, rgba(255, 255, 255, .04) 0 1px, transparent 1px 42px);
}
/* The flag. */
.sb-contact::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--flag);
}
.sb-contact .sb-head {
color: #fff;
border-bottom-color: rgba(255, 255, 255, .18);
}
.sb-contact-row {
display: block;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sb-contact-row:last-of-type { border-bottom: 0; }
.sb-contact-row .k {
display: block;
font-family: var(--mono);
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--brand-300);
margin-bottom: 5px;
}
/* Phone is the primary action here, so it carries the display face. */
.sb-contact-row .v {
display: block;
font-family: var(--display);
font-size: 1.32rem;
font-weight: 650;
letter-spacing: -.01em;
line-height: 1.2;
color: #fff;
}
.sb-contact-row .v--sm {
font-family: var(--body);
font-size: 15px;
font-weight: 500;
letter-spacing: 0;
word-break: break-word;
}
/* Beat `.entry a` and the sidebar link rules without !important. */
.sb .sb-contact a.sb-contact-row,
.sb-contact a.sb-contact-row {
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, .1);
transition: border-color .16s var(--ease);
}
.sb-contact a.sb-contact-row:last-of-type { border-bottom: 0; }
.sb-contact a.sb-contact-row:hover { border-bottom-color: var(--flag); }
.sb-contact a.sb-contact-row:hover .v { color: var(--flag-lite); }
.sb-contact .sb-contact-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 20px;
padding: 15px 20px;
border-radius: var(--r);
background: #fff;
color: var(--brand-950);
font-family: var(--mono);
font-size: 12.5px;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none;
border-bottom: 0;
transition: background .18s var(--ease), transform .18s var(--ease);
}
.sb-contact .sb-contact-btn:hover {
background: var(--brand-50);
transform: translateY(-1px);
color: var(--brand-950);
}
.sb-contact .sb-note {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .06em;
color: rgba(255, 255, 255, .58);
margin: 14px 0 0;
line-height: 1.6;
text-align: center;
}
/* --------------------------------------------------------------------------
15. STICKY SIDEBAR CTA
--------------------------------------------------------------------------
Both classes here are added by sidebar-cta.js, never by the markup. With
JavaScript off the contact panel stays an ordinary visible widget instead of
an invisible one — the hiding is the enhancement, not the default.
-------------------------------------------------------------------------- */
/*
* `.layout` sets `align-items: start`, so the sidebar column is only as tall as
* its widgets — a sticky child there has almost no travel and stalls partway
* down a long article. Stretching the column to the grid row is what lets the
* panel follow to the end.
*/
.sidebar.has-sticky-cta { align-self: stretch; }
.sb-contact.is-sticky-cta {
position: sticky;
top: 96px; /* clears the 77px sticky site header */
opacity: 0;
visibility: hidden;
transform: translateY(10px);
/* Visibility waits out the fade on the way out, but switches immediately on
the way in — and it is `visibility`, not `opacity` alone, so the links
inside cannot be reached by keyboard while the panel is hidden. */
transition:
opacity .35s var(--ease),
transform .35s var(--ease),
visibility 0s linear .35s;
}
.sb-contact.is-sticky-cta.is-revealed {
opacity: 1;
visibility: visible;
transform: none;
transition:
opacity .35s var(--ease),
transform .35s var(--ease),
visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
.sb-contact.is-sticky-cta,
.sb-contact.is-sticky-cta.is-revealed {
transform: none;
transition: opacity .01s linear, visibility 0s;
}
}
/* Safety net: the script also drops the classes here, but if it has not run
yet on a narrow load the panel must still render normally. */
@media (max-width: 900px) {
.sidebar.has-sticky-cta { align-self: start; }
.sb-contact.is-sticky-cta {
position: static;
opacity: 1;
visibility: visible;
transform: none;
}
}
/* --------------------------------------------------------------------------
16. SIDEBAR NEWS SCROLLER
--------------------------------------------------------------------------
One post at a time — image and title only — to break up a sidebar that is
otherwise a column of text. Scroll-snap does the work, so it swipes on touch
and scrolls with a trackpad without any JavaScript; news-scroller.js only
adds the dots, and hides them from assistive tech since every slide is
already a plain link in the track.
-------------------------------------------------------------------------- */
.sb-scroller { margin: 0; }
.sb-scroller-track {
display: flex;
gap: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* old Edge */
}
.sb-scroller-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
.sb-scroller-track { scroll-behavior: auto; }
}
.sb-slide {
flex: 0 0 100%;
min-width: 0;
scroll-snap-align: start;
display: block;
border-bottom: 0;
}
.sb-slide-media {
display: block;
overflow: hidden;
border-radius: var(--r);
background: var(--brand-50);
}
.sb-slide-media img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 0;
transition: transform .45s var(--ease);
}
.sb-slide:hover .sb-slide-media img { transform: scale(1.04); }
.sb-slide .t {
display: block;
margin-top: 12px;
font-size: 14.5px;
font-weight: 600;
line-height: 1.38;
color: var(--ink);
transition: color .16s var(--ease);
}
.sb-slide:hover .t { color: var(--brand-600); }
/* Dots. Only rendered once the script has counted the slides. */
.sb-scroller-dots {
display: flex;
justify-content: center;
gap: 7px;
margin-top: 14px;
}
.sb-scroller-dots:empty { display: none; }
.sb-scroller-dots button {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--rule);
cursor: pointer;
transition: background .18s var(--ease), transform .18s var(--ease);
}
.sb-scroller-dots button:hover { background: var(--brand-300); }
.sb-scroller-dots button.is-active {
background: var(--flag);
transform: scale(1.25);
}
/* --------------------------------------------------------------------------
17. TYPE — RETIRE THE MONO FACE
--------------------------------------------------------------------------
The DATUM system set eyebrows, labels, breadcrumbs, spec strips and button
text in IBM Plex Mono. That is dropped in favour of the body face.
Done by redefining the token rather than rewriting rules: `--mono` is used in
66 places across site.css and wp.css, and site.css is the client's static
build and cannot be edited. Redefining here — wp.css loads after — reaches
every one of them from a single line.
The token keeps its name for that reason; renaming it would mean touching
all 66 usages, half of them in a file that is deliberately frozen. Nothing
else in the stylesheets sets a monospace family, and no code or pre rule
depended on it, so nothing is left mis-set.
Small uppercase labels lose the even digit widths mono gave them, so the
places where figures stack and misalignment would show ask for tabular
numerals explicitly below.
-------------------------------------------------------------------------- */
:root {
--mono: var(--body);
}
/* Only where digits actually appear and need even widths: the generated sidebar
counters and nav indices, which stack vertically; the spec strip's values,
which carry the launch year; and the pager, whose numbers sit in fixed-width
boxes. The spec strip's *labels* are words, so they are not listed. */
.sb-card ul li a::before,
.submenu .idx,
.sb-list .idx,
.phead-spec .v,
.pager .page-numbers {
font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------------------
18. HERO BACKGROUND VIDEO
--------------------------------------------------------------------------
site.css gives `.hero::before` a final, fully opaque `var(--brand-950)` layer,
which would hide anything behind it. When a video is present that layer is
replaced with a scrim: near-solid on the left where the white h1, lede and
stat row sit, thinning to the right, which the form panel covers anyway.
Measured on the graded clip, the brightest pixel under the headline is 216.
At the .86 the scrim gives there, white text lands around 11:1; at the .62 on
the far right it is still about 6:1.
-------------------------------------------------------------------------- */
.hero.has-video {
/* Paints below the negative-z-index video, so hiding the video reveals it. */
background-image: var(--hero-poster, none);
background-size: cover;
background-position: center;
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -3;
pointer-events: none;
border: 0;
}
.hero.has-video::before {
background:
radial-gradient(120% 90% at 82% 8%, rgba(67, 103, 198, .08) 0%, transparent 58%),
linear-gradient(90deg,
rgba(8, 10, 14, .86) 0%,
rgba(8, 10, 14, .74) 50%,
rgba(8, 10, 14, .62) 100%);
}
/*
* A looping clip is motion. Reduced-motion readers get the poster frame, which
* is already painted on .hero underneath — so hiding the element is the whole
* fix, with no script and no empty panel.
*/
@media (prefers-reduced-motion: reduce) {
.hero-video { display: none; }
}
/*
* The video used to be hidden below 700px, to "save the download on the
* connections least able to afford it". That reasoning was wrong, and measuring
* it on live is what showed it: at a 390px viewport the element reported
* `readyState: 4` with `currentSrc` set — `display: none` does not stop a
* `