/*
Theme Name: NWLC Action Fund
Theme URI: https://nwlcactionfund.org
Author: E11 Group
Author URI: https://e11group.com
Description: Child theme of Launchpad for the National Women's Law Center Action Fund. Overrides brand colors, fonts, and patterns while inheriting Launchpad's block library and design system.
Template: launchpad
Tags: block-theme, full-site-editing, child-theme
Version: 0.25.3
*/
/* ============================================================
NWLC ACTION FUND — child theme CSS
Token-level branding lives in theme.json. This file carries
only what block attributes cannot express:
1. The diagonal seams (header notch, footer wedge, news band)
2. Header / footer / nav structure
3. Custom component classes used by patterns
4. Gravity Forms styling for the one native form
Mobile-first: min-width media queries only, never max-width.
============================================================ */
:root {
/* The diagonal seam is the brand's core device. Expressed once so
every cut across the site stays consistent. */
/* --nwlcaf-seam-angle used to live here and was referenced by nothing: the
notch is a hard-coded skewX(29deg), the wedge is a percentage polygon, and
the section seams derive their angle from depth over viewport width. A
token documenting a consistency the code does not have is worse than none. */
--nwlcaf-seam-depth: 3.5rem;
--nwlcaf-notch-cut: 46px;
/* The yellow bar — the brand's one marker shape, at three sizes. */
--nwlcaf-bar-sm: 22px;
--nwlcaf-bar-md: 34px;
--nwlcaf-bar-h: 4px;
/* Uppercase micro-labels. Tracking follows SIZE, not component:
<= .8125rem takes .1em, button/nav scale takes .04em. */
--nwlcaf-label-size: 0.8125rem;
--nwlcaf-label-size-sm: 0.75rem;
--nwlcaf-label-weight: 900;
--nwlcaf-label-tracking: 0.1em;
--nwlcaf-btn-tracking: 0.04em;
--nwlcaf-gap-label: 0.75rem; /* label to the heading it introduces */
--nwlcaf-card-title: 1.125rem;
--nwlcaf-dur: 0.2s; /* one duration; hovers ran at .2s and .4s */
/* The scrim's colour, as channels so the stops can vary the alpha.
It was written out four times, in three components, as rgba(11, 9, 40, x)
— near-black indigo, and near enough to the palette's dark to look like a
token while being a literal. One place to change it. */
--nwlcaf-scrim-rgb: 11 9 40;
/* Yellow's hover shade. Two components had it as #E6C100. */
--nwlcaf-highlight-hover: #E6C100;
}
/* ------------------------------------------------------------
Accessibility
------------------------------------------------------------ */
.skip-link.skip-link {
position: absolute; top: 0; left: 0; z-index: 1000;
background: var(--wp--preset--color--highlight);
color: var(--wp--preset--color--contrast);
padding: 0.75rem 1.25rem; font-weight: 700; text-decoration: none;
transform: translateY(-110%);
}
.skip-link.skip-link:focus { transform: translateY(0); }
:where(a, button, input, select, textarea, summary):focus-visible {
outline: 3px solid var(--wp--preset--color--highlight);
outline-offset: 2px;
}
/* ------------------------------------------------------------
Signature: the yellow rule behind section headings
Applied via the `has-heading-rule` class on a heading block.
------------------------------------------------------------ */
.has-heading-rule { position: relative; display: inline-block; padding-bottom: 0.35em; }
.has-heading-rule::after {
content: ''; position: absolute; left: -0.15em; bottom: 0;
width: 62%; height: 0.32em;
/* Colour is a parameter so an issue page can tint it without drawing a
second, differently-shaped rule of its own. */
background: var(--nwlcaf-rule-color, var(--wp--preset--color--highlight));
z-index: -1;
}
/* ------------------------------------------------------------
Signature: diagonal section seams
Applied to any full-width group via these utility classes.
------------------------------------------------------------ */
.nwlcaf-seam-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--nwlcaf-seam-depth)), 0 100%); }
.nwlcaf-seam-top { clip-path: polygon(0 var(--nwlcaf-seam-depth), 100% 0, 100% 100%, 0 100%); }
.nwlcaf-seam-band {
clip-path: polygon(0 var(--nwlcaf-seam-depth), 100% 0, 100% calc(100% - var(--nwlcaf-seam-depth)), 0 100%);
margin-top: calc(var(--nwlcaf-seam-depth) * -1);
padding-top: calc(var(--wp--preset--spacing--x-large) + var(--nwlcaf-seam-depth)) !important;
}
/* Decorative layers carry no block gap.
Core's flow layout emits `.is-layout-flow > * + * { margin-block-start: 24px }`,
and these divs are children of a flow group — so the SECOND one in each
pair (the header stripe, the hero veil) was pushed 24px down and its
`top: 0` resolved 24px late. They are absolutely positioned decoration;
they have no business in the gap rhythm at all. */
.nwlcaf-header__teal,
.nwlcaf-header__stripe,
.nwlcaf-footer__wedge,
.nwlcaf-hero__bg,
.nwlcaf-hero__veil,
.nwlcaf-chero__media { margin: 0 !important; }
/* The header and footer sit flush against the page. Core's default block gap
puts 24px between top-level blocks, which showed as a white band under the
teal bar and above the footer wedge. */
.wp-site-blocks > .wp-block-template-part { margin-block-start: 0; margin-block-end: 0; }
.wp-site-blocks > .wp-block-template-part + * { margin-block-start: 0; }
/* ------------------------------------------------------------
HEADER — the diagonal notch
Teal bar cut at ~29 degrees into an indigo block holding the
Donate CTA, with a yellow stripe tracing the seam.
The seam position tracks the CONTENT CONTAINER, not the
viewport, so the Donate CTA stays inside the indigo at every
screen width. Pinning it to the viewport pushes Donate out of
the indigo on wide screens.
------------------------------------------------------------ */
/* STICKY GOES ON THE TEMPLATE-PART WRAPPER, not on .nwlcaf-header.
A sticky element can only travel inside its own parent's box, and core wraps
each template part in a div that is exactly the header's height — so sticky
on the header itself did nothing at all. The wrapper is a child of
.wp-site-blocks, which is the full page, so it has the whole document to
stick within. */
.wp-site-blocks > .wp-block-template-part:has(.nwlcaf-header) {
position: sticky; top: 0; z-index: 100;
}
/* The admin bar is fixed at the top for logged-in users, so a header pinned to
0 slides underneath it. */
.admin-bar .wp-site-blocks > .wp-block-template-part:has(.nwlcaf-header) { top: 32px; }
@media (max-width: 782px) {
.admin-bar .wp-site-blocks > .wp-block-template-part:has(.nwlcaf-header) { top: 46px; }
}
.nwlcaf-header {
position: relative; z-index: 100;
background: var(--wp--preset--color--primary);
isolation: isolate;
--nwlcaf-notch: min(calc(100% - 130px), calc(50% + 425px));
}
/* The seam leans the way the design's skewX(29deg) leans: the teal's top edge
ends FIRST and its bottom edge runs on to the notch, so the cut reads as a
backslash. It shipped as the mirror image (0.11.0). */
.nwlcaf-header__teal {
position: absolute; top: 0; bottom: 0; left: 0;
width: var(--nwlcaf-notch);
background: var(--wp--preset--color--accent);
clip-path: polygon(0 0, calc(100% - var(--nwlcaf-notch-cut)) 0, 100% 100%, 0 100%);
z-index: -1;
pointer-events: none;
}
.nwlcaf-header__stripe {
/* Drawn as a clipped parallelogram, exactly like the teal beside it, rather
than a skewed rectangle. The skew resolved its box against something 24px
taller than the header, so the seam started late and hung past the bar. */
position: absolute; top: 0; bottom: 0;
left: calc(var(--nwlcaf-notch) - var(--nwlcaf-notch-cut));
width: calc(var(--nwlcaf-notch-cut) + 12px);
background: var(--wp--preset--color--highlight);
clip-path: polygon(0 0, 12px 0, 100% 100%, calc(100% - 12px) 100%);
z-index: -1;
pointer-events: none;
}
.nwlcaf-header .wp-block-site-logo img { height: 56px; width: auto; }
/* NOWRAP is deliberate. Six nav items plus a logo, an icon and a button: let it
wrap and a link drops to a second line, the bar grows, and the notch geometry
goes with it. The gap shrinks instead; below the breakpoint the nav collapses
into the menu rather than wrapping. */
.nwlcaf-header .wp-block-navigation__container { flex-wrap: nowrap; }
.nwlcaf-header .wp-block-navigation-item { white-space: nowrap; }
.nwlcaf-header .wp-block-navigation { --wp--style--block-gap: clamp(.85rem, 1.6vw, 1.5rem); }
/* Navigation — indigo on teal measures 5.86:1, which passes AA */
.nwlcaf-header .wp-block-navigation {
font-size: 0.875rem; font-weight: 700; letter-spacing: var(--nwlcaf-btn-tracking); text-transform: uppercase;
}
/* The `a.` qualifier is load-bearing. Core ships
`.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
{ color: inherit }` — a deliberately DOUBLED class, specificity (0,3,0),
which outranks the obvious `.nwlcaf-header .wp-block-navigation a` (0,2,1).
That left the nav colour dead on every page: links inherited `contrast`
#333, which is 5.74:1 where the nav sits on the teal but 1.07:1 wherever it
crosses onto the indigo. (0,3,1) beats core without an !important. */
.nwlcaf-header .wp-block-navigation a.wp-block-navigation-item__content,
.nwlcaf-header .wp-block-navigation a {
color: var(--wp--preset--color--primary);
text-decoration: none;
padding-bottom: 0.35rem;
border-bottom: 3px solid transparent;
}
.nwlcaf-header .wp-block-navigation a:hover,
.nwlcaf-header .wp-block-navigation .current-menu-item a {
border-bottom-color: var(--wp--preset--color--primary);
}
.nwlcaf-header .wp-block-navigation .wp-block-navigation__submenu-container {
background: var(--wp--preset--color--primary);
border: 0;
}
.nwlcaf-header .wp-block-navigation .wp-block-navigation__submenu-container a {
color: var(--wp--preset--color--base);
border-bottom: 0;
}
.nwlcaf-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
background: var(--wp--preset--color--primary-dark);
color: var(--wp--preset--color--highlight);
}
/* The single most valuable click on the site was drawn more quietly than a nav
item. Same solid yellow action button as everywhere else; on the indigo
panel the yellow-on-dark-text pair measures 8.95:1. */
.nwlcaf-header__donate.nwlcaf-header__donate {
display: inline-flex; align-items: center;
background: var(--wp--preset--color--highlight);
color: var(--wp--preset--color--contrast);
font-size: 0.9375rem; font-weight: 900; letter-spacing: var(--nwlcaf-btn-tracking);
text-transform: uppercase; text-decoration: none; white-space: nowrap;
padding: 0.7rem 1.4rem;
transition: background-color var(--nwlcaf-dur) ease;
}
.nwlcaf-header__donate.nwlcaf-header__donate:hover { background: var(--nwlcaf-highlight-hover); color: var(--wp--preset--color--contrast); }
/* Below the nav breakpoint the notch would eat the logo, so it
resolves to a flat teal bar. The brand reads through color and type. */
.nwlcaf-header__teal { width: 100%; clip-path: none; }
.nwlcaf-header__stripe { display: none; }
@media (min-width: 782px) {
.nwlcaf-header__teal {
width: var(--nwlcaf-notch);
clip-path: polygon(0 0, calc(100% - var(--nwlcaf-notch-cut)) 0, 100% 100%, 0 100%);
}
.nwlcaf-header__stripe { display: block; }
}
/* ---- Header search: the design's icon button before Donate ----
A core/search block in button-only mode: the magnifier is the control and
core expands the field beside it on click. It is NOT inside the navigation
block, which ignores its inner blocks when it references a menu. Hidden
below the nav breakpoint like Donate; the overlay menu carries its own
search field (see the Mobile header note). */
/* The run-in before Donate is the design's: its search margin, the Donate
block's own padding and the bar gap add up to 125px at 1440 (8.7vw), 111
at 1280, capped at the design's 156. The icon sits clear of the seam. */
.nwlcaf-header__search { margin: 0 0.75rem 0 0 !important; }
/* Review #102 (2026-09-14): the Instagram link after the search, in the same
ringed circle, both pushed up against the notch (review, 2026-09-16). */
.nwlcaf-header__social { margin: 0 clamp(2rem, 3.5vw, 4rem) 0 0 !important; }
.nwlcaf-header__social .wp-block-social-link a {
padding: 0; width: 40px; height: 40px; border-radius: 50%;
border: 2px solid var(--wp--preset--color--primary);
display: grid; place-items: center; transition: background .2s ease, color .2s ease;
}
.nwlcaf-header__social svg { width: 20px; height: 20px; }
.nwlcaf-header__social .wp-block-social-link:hover { transform: none; }
.nwlcaf-header__social .wp-block-social-link a:hover { background: var(--wp--preset--color--primary); }
/* Core paints the glyph from the item's inline colour, so the hover wins by force. */
.nwlcaf-header__social .wp-block-social-link a:hover svg,
.nwlcaf-header__social .wp-block-social-link a:hover svg path { color: var(--wp--preset--color--base) !important; fill: var(--wp--preset--color--base) !important; }
.nwlcaf-header__search .wp-block-search__inside-wrapper { align-items: center; }
.nwlcaf-header__search .wp-block-search__button {
background: none; padding: 0; margin: 0; cursor: pointer;
width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary);
display: grid; place-items: center; transition: background .2s ease, color .2s ease;
min-width: 44px; min-height: 44px;
}
.nwlcaf-header__search .wp-block-search__button svg { width: 20px; height: 20px; fill: currentColor; }
.nwlcaf-header__search .wp-block-search__button:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }
.nwlcaf-header__search .wp-block-search__input {
min-height: 44px; border: 2px solid var(--wp--preset--color--primary); border-radius: 0;
background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
font-size: 1rem; padding-inline: .75rem;
}
@media (max-width: 860px) {
.nwlcaf-header__search { display: none; }
/* !important: core's flex-layout rule for the block prints after this sheet. */
.nwlcaf-header__social { display: none !important; }
}
/* ------------------------------------------------------------
FOOTER — black with a teal wedge from the top-right
Geometry measured off the source site: the teal is WIDE at the
top and NARROWS as it descends. The Donate button deliberately
sits on the teal, as it does on the original.
------------------------------------------------------------ */
.nwlcaf-footer { position: relative; overflow: hidden; }
.nwlcaf-footer__wedge {
position: absolute; top: 0; bottom: 0; right: 0; left: auto;
background: var(--wp--preset--color--accent-dark);
pointer-events: none;
/* Stacked layout: a right-edge sliver, so it never runs under the nav links */
width: 100%;
clip-path: polygon(84% 0, 100% 0, 100% 100%, 95% 100%);
}
@media (min-width: 1040px) {
.nwlcaf-footer__wedge { width: 42%; clip-path: polygon(20% 0, 100% 0, 100% 100%, 38% 100%); }
}
.nwlcaf-footer .wp-block-social-links .wp-social-link {
background: var(--wp--preset--color--accent);
color: var(--wp--preset--color--contrast);
}
.nwlcaf-footer .wp-block-social-links .wp-social-link:hover {
background: var(--wp--preset--color--highlight);
}
/* Buttons carry their own text color. Excluding them matters: a bare
`.nwlcaf-footer a` is specificity 0,1,1 and beats the button's own
`.has-*-color` at 0,1,0, repainting the label and destroying its contrast. */
.nwlcaf-footer a:not(.wp-element-button) { color: var(--wp--preset--color--base); text-decoration: none; }
.nwlcaf-footer a:not(.wp-element-button):hover { color: var(--wp--preset--color--highlight); text-decoration: underline; text-underline-offset: 3px; }
/* The legal bar's own background lives here, not as an inline hex in the
pattern, so a rebrand never has to touch block markup. */
.nwlcaf-footer__legal { background: #1A1A1A; color: #9A9A9A; }
.nwlcaf-footer__legal a { color: #9A9A9A; }
.nwlcaf-footer__legal a:hover { color: var(--wp--preset--color--base); }
/* ------------------------------------------------------------
FOOTER LAYOUT — brand, three labelled groups, the ask
Three columns, as the design has it. It was a single flat row
of links, which lost the group labels and dropped three of the
nine destinations entirely.
------------------------------------------------------------ */
.nwlcaf-footer__inner {
/* Above the wedge. The wedge is absolutely positioned, so without a stacking
context of its own the inner content paints UNDER it — the Donate column
rendered at the right x and was simply covered in teal. */
position: relative;
display: grid;
grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) auto;
gap: var(--wp--preset--spacing--large);
align-items: start;
}
/* Core's flow layout gives every child after the first a 24px block margin,
which in a grid container just knocks that column out of alignment — the
second and third link groups sat 24px below the first. */
.nwlcaf-footer__inner > *,
.nwlcaf-fnav > * { margin-block-start: 0 !important; }
.nwlcaf-fbrand { display: grid; gap: var(--wp--preset--spacing--medium); justify-items: start; }
.nwlcaf-footer__logo { margin: 0 !important; }
.nwlcaf-fnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--medium); }
.nwlcaf-fnav__label {
font-size: var(--nwlcaf-label-size-sm); font-weight: var(--nwlcaf-label-weight);
letter-spacing: var(--nwlcaf-label-tracking); text-transform: uppercase;
color: var(--wp--preset--color--accent);
margin: 0 0 0.6rem !important;
}
.nwlcaf-fnav__links.nwlcaf-fnav__links {
display: grid; gap: 0.45rem; list-style: none; margin: 0; padding: 0;
}
.nwlcaf-fnav__links li { margin: 0; }
/* The parent's global line-height sets a 34px line box on a 15px list item,
which spaced the columns half a line further apart than the design. */
.nwlcaf-fnav__links li,
.nwlcaf-fnav__links a { font-size: 0.9375rem; line-height: 1.8; }
.nwlcaf-fcta { display: grid; gap: 0.75rem; justify-items: start; }
/* The grid gap IS the spacing. Core's flow layout added 24px above the
buttons block and the label kept its 0.6rem, so the button sat 46px under
"Support the work" against the design's 12px. */
.nwlcaf-fcta > * { margin-block: 0 !important; }
/* The CTA's label is on the black, not the teal accent the group labels use. */
.nwlcaf-fcta .nwlcaf-fnav__label { color: var(--wp--preset--color--base); margin-bottom: 0 !important; }
@media (max-width: 900px) {
.nwlcaf-footer__inner { grid-template-columns: 1fr; }
.nwlcaf-fnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.nwlcaf-fnav { grid-template-columns: 1fr; }
}
/* The footer's Donate column carries a label like the other three, so all
four column headings sit on one line. The button is the same solid yellow
action button used everywhere else — it was a ghost outline, the weakest
treatment on the site given to the strongest ask. */
.nwlcaf-footer__cta .wp-block-heading { color: var(--wp--preset--color--base); }
/* A section's label and heading are one unit. */
.nwlcaf-section-head .wp-block-heading { margin-bottom: 0; }
/* ------------------------------------------------------------
Eyebrow with the yellow bar
------------------------------------------------------------ */
.nwlcaf-eyebrow {
/* Block-level, but shrink-wrapped so the yellow bar sits against the text.
inline-flex put the eyebrow on the SAME LINE as the heading it introduces
wherever that heading carries .has-heading-rule, which is inline-block —
two inline boxes, one line. The design stacks them. */
display: flex; width: fit-content; align-items: center; gap: 0.5rem;
/* fit-content plus core's margin-inline:auto !important centres the eyebrow
when it is a direct child of a constrained group. Pinning it to 0 fixed the
centring but put it at the PADDING edge, which only coincides with the
content column below 1283px — above that the column moves and the eyebrow
does not. This offsets it to the column edge instead, collapsing to 0 when
the container is narrower than the column. */
margin-inline: max(0px, calc((100% - 1200px) / 2)) auto !important;
font-size: var(--nwlcaf-label-size); font-weight: var(--nwlcaf-label-weight);
letter-spacing: var(--nwlcaf-label-tracking);
text-transform: uppercase;
color: var(--wp--preset--color--accent-dark);
margin-bottom: var(--nwlcaf-gap-label) !important;
}
/* The brand's yellow bar, the same device as the heading rule and the hero
flag. It was a right-facing CSS triangle — a shape the brand uses nowhere
else; the seams, rules and flag are all hard rectangles. */
.nwlcaf-eyebrow::before {
content: ''; width: var(--nwlcaf-bar-sm); height: var(--nwlcaf-bar-h); flex: none;
background: var(--wp--preset--color--highlight);
}
/* accent-dark on the mint tint measures 4.26:1 — just under AA. On tinted or
brand backgrounds the eyebrow switches color. */
.has-accent-light-background-color .nwlcaf-eyebrow,
.has-accent-background-color .nwlcaf-eyebrow,
.has-surface-background-color .nwlcaf-eyebrow { color: var(--wp--preset--color--primary); }
.has-primary-background-color .nwlcaf-eyebrow,
.has-dark-background-color .nwlcaf-eyebrow { color: var(--wp--preset--color--highlight); }
/* ------------------------------------------------------------
Scrim for text over editor-swappable photography
A text-shadow does NOT satisfy WCAG. Editors will swap these
images, so the contrast floor has to come from the scrim.
Measured worst case with this gradient: 5.16:1.
------------------------------------------------------------ */
.nwlcaf-scrim { position: relative; }
.nwlcaf-scrim::after {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(to top,
rgb(var(--nwlcaf-scrim-rgb) / 0.92) 0%,
rgb(var(--nwlcaf-scrim-rgb) / 0.78) 26%,
rgb(var(--nwlcaf-scrim-rgb) / 0.22) 52%,
rgb(var(--nwlcaf-scrim-rgb) / 0) 72%);
pointer-events: none;
}
/* ------------------------------------------------------------
Issue tiles — photo + color multiply + line-art icon
------------------------------------------------------------ */
/* The square is CSS, not a block attribute: core/group supports
dimensions.minHeight but NOT dimensions.aspectRatio, so an aspect-ratio in
the saved markup is a style save() would never regenerate — which is the
"Block contains unexpected or invalid content" error. */
.nwlcaf-tile { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1; }
/* The photo fills the tile; the label and mark stack over it. The figure is
taken out of flow so the group's aspect-ratio, not the image, sets height. */
.nwlcaf-tile .wp-block-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; }
.nwlcaf-tile img { width: 100%; height: 100%; object-fit: cover; }
.nwlcaf-tile__icon {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); z-index: 2;
width: 76px; height: 76px; color: #fff;
}
.nwlcaf-tile__icon svg { width: 100%; height: 100%; }
.nwlcaf-tile::after {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
mix-blend-mode: multiply; transition: opacity var(--nwlcaf-dur) ease;
}
/* A second, darker veil guarantees the label clears AA regardless of the
photo — multiply alone tracks the image and cannot be relied on. */
.nwlcaf-tile::before {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
background: linear-gradient(to top, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.44) 22%, rgba(0,0,0,0) 58%);
}
.nwlcaf-tile--schools::after { background: var(--wp--preset--color--issue-schools); }
.nwlcaf-tile--childcare::after { background: var(--wp--preset--color--issue-childcare); }
.nwlcaf-tile--repro::after { background: var(--wp--preset--color--issue-repro); }
.nwlcaf-tile--democracy::after { background: var(--wp--preset--color--issue-democracy); }
.nwlcaf-tile:hover::after { opacity: 0.82; }
/* The label COVERS the tile and sets its text at the bottom, rather than
being a strip pinned to the bottom edge.
That is what makes the stretched link work: `a::after` resolves against the
nearest positioned ancestor, which is this element — so a label sized to the
bottom fifth of the tile gave a hit area of the bottom fifth, while
`.nwlcaf-tile:hover` still advertised the whole tile as clickable. */
.nwlcaf-tile__label {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;
display: flex; align-items: flex-end;
color: #fff;
}
/* One link per tile. Linking the image as well would give the tile two targets
to the same place, the second with no accessible name. */
.nwlcaf-tile__label a { color: #fff; text-decoration: none; }
.nwlcaf-tile__label a::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; }
/* ------------------------------------------------------------
News / article cards
------------------------------------------------------------ */
.nwlcaf-card {
background: var(--wp--preset--color--base);
border-left: 5px solid transparent;
transition: border-color var(--nwlcaf-dur) ease, transform 0.2s ease;
}
/* !important is answering core, not overriding a colleague: a preset border
colour is emitted as `.has-outline-border-color{border-color:…!important}`
(WP_Theme_JSON::compute_preset_classes), which silently killed every hover
border in this theme regardless of selector specificity. */
.nwlcaf-card { position: relative; }
/* The grid card. The meta group dissolves into the body's column so the date
keeps the top and the kind label the foot, which is how it was reviewed; the
picture and the button belong to the lead layout only. */
/* (0,2,0): core's generated flex-layout class for this group is (0,1,0) and is
printed after the theme's stylesheet, so a single class ties and loses. */
.nwlcaf-card .nwlcaf-card__meta { display: contents; }
.nwlcaf-card__body > .nwlcaf-kicker { order: 99; margin-top: auto; }
.nwlcaf-card__media,
.nwlcaf-card__cta { display: none; }
/* ------------------------------------------------------------
LEAD STORY
The archive had no hierarchy: 111 posts, every one of them the
same card. The newest is promoted to a full-width panel on the
indigo — the same card, not a second query, so it follows the
active filter without being told what the filter is.
Page one only: on /news/page/2/ the first card is simply the
thirteenth post, and promoting it would be a lie about what is
newest.
------------------------------------------------------------ */
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child { grid-column: 1 / -1; }
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card {
display: grid;
grid-template-columns: 1fr;
align-items: center;
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base);
border: 0 !important;
}
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card:hover {
transform: none;
}
/* Two columns only when there is a picture to put in the second one. Most of
the archive has no featured image, and half a panel of empty indigo reads as
a broken layout rather than a design. */
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card:has(.nwlcaf-card__media) {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card__media {
display: block; margin: 0 !important;
grid-column: 2; grid-row: 1; align-self: stretch; min-height: 320px;
}
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card__media img {
width: 100%; height: 100%; object-fit: cover;
}
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card__body {
grid-column: 1; grid-row: 1;
padding: var(--wp--preset--spacing--large);
}
/* The meta becomes a real row, kind before date — the label carries more than
the date does when the story is the one being led with. */
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card .nwlcaf-card__meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
}
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card__body > .nwlcaf-kicker {
order: 0; margin-top: 0;
}
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-kicker,
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-kicker a {
background: var(--wp--preset--color--highlight);
color: var(--wp--preset--color--contrast);
padding: 0.25rem 0.55rem; font-weight: 900;
}
/* The date is no longer the loudest thing on the card, so it drops the chip. */
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-date-chip {
background: none; padding: 0;
color: var(--wp--preset--color--accent);
}
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .wp-block-post-title {
font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.15;
letter-spacing: -0.005em;
}
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .wp-block-post-title a:not(.wp-block-button__link) {
color: var(--wp--preset--color--base);
}
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .wp-block-post-excerpt {
color: var(--wp--preset--color--on-dark-muted);
}
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card__cta {
display: inline-flex; align-items: center; align-self: flex-start;
min-height: 44px; padding: 0.75rem 1.25rem;
background: var(--wp--preset--color--highlight);
color: var(--wp--preset--color--contrast);
font-weight: 700; letter-spacing: 0.01em; text-decoration: none;
}
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card__cta:hover {
background: var(--wp--preset--color--base);
}
.nwlcaf-card .wp-block-post-title { font-size: var(--nwlcaf-card-title); margin: 0; }
/* Component links: the parent underlines and theme.json's elements.link
colours every anchor in post content. A card title is the component's own
affordance, not a prose link. (0,3,1). */
.nwlcaf-card .wp-block-post-title a:not(.wp-block-button__link) {
color: var(--wp--preset--color--primary); text-decoration: none;
}
.nwlcaf-card:hover .wp-block-post-title a:not(.wp-block-button__link) {
text-decoration: underline; text-underline-offset: 3px;
}
.nwlcaf-card:hover { border-left-color: var(--wp--preset--color--highlight) !important; transform: translateY(-3px); }
/* The whole card is the target, with the title as its accessible name — the
card already animated as one object on hover. */
.nwlcaf-card .wp-block-post-title a::after {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
.nwlcaf-date-chip {
display: inline-block;
background: var(--wp--preset--color--highlight);
color: var(--wp--preset--color--contrast);
font-size: var(--nwlcaf-label-size-sm); font-weight: var(--nwlcaf-label-weight); letter-spacing: var(--nwlcaf-label-tracking); text-transform: uppercase;
padding: 0.25rem 0.55rem;
}
/* ------------------------------------------------------------
GRAVITY FORMS — the one native form the theme owns (contact).
Donation and membership stay on EveryAction; those sync to the
CRM and must not be replaced.
TRAP: do NOT redefine Gravity Forms' own --gf-* custom
properties. GF reads them at runtime and overriding them
cascades into every field unpredictably. Style the classes.
------------------------------------------------------------ */
.gform_wrapper.gravity-theme .gfield_label {
display: block; font-size: 0.8125rem; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--wp--preset--color--primary); margin-bottom: 0.4rem;
}
.gform_wrapper.gravity-theme .gfield_required { color: var(--wp--preset--color--tertiary); margin-left: 0.25rem; }
.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
width: 100%; padding: 0.75rem 0.875rem;
font-family: var(--wp--preset--font-family--primary); font-size: 1rem;
color: var(--wp--preset--color--contrast);
background: var(--wp--preset--color--base);
border: 2px solid var(--wp--preset--color--outline); border-radius: 0;
}
.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
outline: 3px solid var(--wp--preset--color--highlight); outline-offset: 1px;
border-color: var(--wp--preset--color--primary);
}
.gform_wrapper.gravity-theme .gfield_description { font-size: 0.8125rem; color: var(--wp--preset--color--muted); margin-top: 0.35rem; }
.gform_wrapper.gravity-theme .gfield_error input,
.gform_wrapper.gravity-theme .gfield_error textarea,
.gform_wrapper.gravity-theme .gfield_error select { border-color: var(--wp--preset--color--tertiary); }
/* GF's default validation red (#C02B0A) fails AA on white. This is 5.1:1,
and errors carry text, not color alone. */
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
color: #A81F0C; font-size: 0.875rem; font-weight: 700; margin-top: 0.35rem;
}
.gform_wrapper.gravity-theme .gform_validation_errors {
border-left: 5px solid var(--wp--preset--color--tertiary); background: #FDF0EE;
padding: var(--wp--preset--spacing--small); margin-bottom: var(--wp--preset--spacing--small);
}
.gform_wrapper.gravity-theme .gform_validation_errors h2 {
font-size: 1rem; color: #A81F0C; margin: 0; text-transform: none; letter-spacing: 0;
}
.gform_wrapper.gravity-theme .gform_button {
display: inline-flex; align-items: center; gap: 0.6em;
padding: 0.875rem 1.75rem; border: 2px solid transparent; border-radius: 0;
background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base);
font-family: var(--wp--preset--font-family--primary); font-size: 0.9375rem; font-weight: 700;
letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
.gform_wrapper.gravity-theme .gform_button:hover { background: var(--wp--preset--color--primary-dark); }
.gform_confirmation_message {
border-left: 5px solid var(--wp--preset--color--accent);
background: var(--wp--preset--color--accent-light);
padding: var(--wp--preset--spacing--medium); font-size: 1.0625rem;
}
/* ------------------------------------------------------------
EveryAction / FastAction embeds
Theme tokens cannot reach inside the embed, so we only frame it.
------------------------------------------------------------ */
/* The EveryAction embed, unframed (review, 2026-09-09). The design's yellow
frame was a placeholder around a box it could not render; against the real
form it read as a heavy border. */
.nwlcaf-embed { background: transparent; padding: 0; }
.nwlcaf-embed .ngp-form { background: transparent; }
/* The form ships its own title and intro paragraphs (EveryAction's HeaderHtml).
On the live site that header sits beside the fields; in a column it stacks
above them and doubles the height — and the page's own column already
carries that copy. Hidden here; the FastAction bar and footer notice stay. */
.nwlcaf-embed .at-form .at-title,
.nwlcaf-embed .at-form .at-markup.HeaderHtml { display: none; }
.nwlcaf-embed .at-form .at-inner { padding-top: 0; }
.nwlcaf-embed--titled .at-form .at-markup.HeaderHtml p { font-size: var(--wp--preset--font-size--large, 1.125rem); }
/* The light box (surface background, block-level) around the Membership and
Contact forms keeps the fields on white against the grey. */
.nwlcaf-embed--boxed .at-form input:not([type="radio"]):not([type="checkbox"]),
.nwlcaf-embed--boxed .at-form select,
.nwlcaf-embed--boxed .at-form textarea { background-color: #FFFFFF; }
/* at.js ends the white card flush with its footer notice; give the notice
room to breathe (review, 2026-09-10). */
.nwlcaf-embed--boxed .at-form .at-inner { padding-bottom: 1.5rem; }
/* Contact: the copy above the form takes the width of the form's fields
(at.js centres the form at 910px, fields inset 20px each side), so the
heading's left edge meets the first input's (review, 2026-09-10). */
.nwlcaf-contact__copy { width: min(870px, 100% - 40px); margin-inline: auto; }
/* Form styling carried from the live site (review, 2026-09-10). at.js paints
the form with its stock green; the old theme overrode it with the brand
colours below, scoped to every placement of the embed (page, home band,
popup, action page). Selectors and !important mirror what at.js needs. */
.ngp-form .at input[type="text"], .ngp-form .at input[type="password"], .ngp-form .at input[type="date"],
.ngp-form .at input[type="email"], .ngp-form .at input[type="number"], .ngp-form .at input[type="search"],
.ngp-form .at input[type="tel"], .ngp-form .at input[type="url"], .ngp-form .at textarea {
margin: 0 0 1rem; font-family: inherit !important; font-size: 18px !important; padding: 1.2rem !important; height: auto !important;
}
.ngp-form .at label { font-size: 16px !important; }
.ngp-form .at select { font-size: 18px !important; height: auto !important; }
.ngp-form .at fieldset legend { color: #212529; font-family: inherit !important; font-size: 22px !important; margin: 0 !important; padding: 0 0 0 5px !important; }
.ngp-form .at-inner { padding-top: 0; padding-bottom: 0; }
.ngp-form fieldset.at-fieldset.PaymentInformation { padding: 40px 20px 20px; background-color: rgba(241, 241, 241, 0.66); border-radius: 5px; border-bottom: 1px solid #ccc; }
.ngp-form fieldset.at-fieldset.PaymentInformation legend { position: relative; top: 30px; }
.ngp-form .at .at-steps li { width: 33.2333%; }
.ngp-form .at form .label-amount { padding: 15px 8px !important; }
.ngp-form .at form .label-amount > a { background-color: var(--wp--preset--color--primary, #292664) !important; }
.ngp-form .at form .label-amount input[type="radio"]:checked + a { border-color: var(--wp--preset--color--primary, #292664) !important; background-color: var(--wp--preset--color--accent, #32BEAE) !important; }
.ngp-form .at form .label-amount input:required { border-color: var(--wp--preset--color--accent, #32BEAE) !important; background-color: var(--wp--preset--color--accent, #32BEAE) !important; }
.ngp-form .at form .label-otheramount input { padding-left: 30px !important; margin-top: -38px !important; margin-left: -8px !important; }
.ngp-form .at .btn-at-primary { background-color: var(--wp--preset--color--primary, #292664) !important; }
/* ------------------------------------------------------------
TAP TARGETS — WCAG 2.2 SC 2.5.8 (Target Size, Minimum)
Navigation-style links are not "inline in a block of text", so
the 24x24 CSS px minimum applies. Text links at a 19px
line-height fail it. This lifts them without changing the look.
------------------------------------------------------------ */
.nwlcaf-footer .wp-block-navigation a,
.nwlcaf-footer__legal a,
.nwlcaf-breadcrumbs a,
.nwlcaf-toc a,
.nwlcaf-doc-link,
.nwlcaf-chip,
/* Measured on a phone: 21px, 17px and 17px respectively. */
.nwlcaf-header__donate,
.nwlcaf-chero__kicker a,
.nwlcaf-ccard__more,
/* The components added with the guides, the issue pages and the collections.
Measured at 320px: the kicker terms came out 14px and the box links 16px. */
.nwlcaf-guide-kicker a,
.nwlcaf-qbox a,
.nwlcaf-sidecard a,
.nwlcaf-badge a,
.nwlcaf-gcard__more,
.nwlcaf-card__cta,
.nwlcaf-more-link a,
.nwlcaf-filters__legend a,
/* The footer's group links and the legal bar's: inline anchors, so the box is
text height until it is told otherwise. The design puts them in the same
tap-target group. */
.nwlcaf-fnav__links a,
.nwlcaf-footer__legal a {
display: inline-flex;
align-items: center;
min-height: 24px;
}
/* A card title wraps, so it keeps normal text flow — inline-block rather than
inline-flex — and only needs the floor when it is short enough to sit on one
line. */
.nwlcaf-gcard__title a,
.nwlcaf-card .wp-block-post-title a,
.nwlcaf-ccard__body .wp-block-post-title a,
.nwlcaf-stack .nwlcaf-stack__row .wp-block-post-title a {
display: inline-block;
min-height: 24px;
}
/* The footer's logo link wraps an image WordPress lazy-loads, so before that
image arrives the link is only as tall as its line box — 23.8px at 320px.
The floor holds whether or not the picture has loaded yet. */
.nwlcaf-footer .wp-block-image a,
.nwlcaf-footer .wp-block-site-logo a { display: inline-block; min-height: 24px; }
/* The tile's anchor is a line of text inside a label that covers the tile, so
its stretched ::after already makes the whole tile clickable. The box the
anchor itself reports is still what an audit measures, so give it one. */
.nwlcaf-tile__label a {
display: flex; align-items: flex-end;
width: 100%; min-height: 24px;
}
/* ============================================================
PATTERN COMPONENT CLASSES
Referenced by patterns/*.php. Kept here rather than inline so
a rebrand never has to touch block markup.
============================================================ */
/* Interior page-title band. The trail and the standfirst are injected at
render time — see the render_block filter in functions.php. */
.nwlcaf-page-title h1 { margin: 0; }
.nwlcaf-breadcrumbs { margin-bottom: 0.5rem !important; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.nwlcaf-breadcrumbs ul {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
list-style: none; margin: 0; padding: 0;
font-size: 0.75rem;
}
.nwlcaf-breadcrumbs li { margin: 0; }
.nwlcaf-breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 0.5rem; color: var(--wp--preset--color--on-dark-muted); }
.nwlcaf-breadcrumbs a { color: var(--wp--preset--color--accent); text-decoration: none; }
.nwlcaf-breadcrumbs a:hover { color: var(--wp--preset--color--highlight); text-decoration: underline; }
.nwlcaf-breadcrumbs [aria-current] { color: var(--wp--preset--color--on-dark-muted); }
/* The band is a constrained group, and core's layout styles set
`margin-left/right: auto !important` on every child that is not aligned —
so a narrower standfirst gets centred under a left-aligned H1 and no amount
of specificity fixes it. The !important here is answering core, not a
colleague; same situation as the preset border colours in CLAUDE.md.
(The H1 is unaffected: at wideSize it fills the container, so auto margins
have nothing to distribute.) */
.nwlcaf-page-title .nwlcaf-page-sub {
color: var(--wp--preset--color--on-dark-muted); max-width: none; /* #91: one line at desktop */
margin: var(--wp--preset--spacing--small) 0 0; font-size: 1.0625rem;
}
/* The band's own column, so its children align to one left edge instead of
each being centred on its own width. */
.nwlcaf-page-title__inner > * { margin-block-start: 0; }
.nwlcaf-page-title__inner > * + * { margin-block-start: 0.35rem; }
/* The angled-panel hero that used to live here was replaced by the knockout
poster (see HOMEPAGE HERO below). Its rules are gone rather than commented:
one of them set `gap: 0` on .nwlcaf-hero__inner, which the new hero would
have silently inherited. */
/* The circled arrow in the corner of an action card's photograph. Drawn in
CSS rather than shipped as markup: it is decoration on a card whose whole
surface is already the link, and an ![]()
-free glyph cannot be edited into
something that says the wrong thing. */
.nwlcaf-acard__media { position: relative; }
.nwlcaf-acard__media::after {
content: '';
position: absolute; right: 1rem; bottom: 1rem; z-index: 1;
width: 40px; height: 40px; border-radius: 50%;
border: 2px solid var(--wp--preset--color--base);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center;
pointer-events: none;
}
/* Action cards — the caption IS the card title, sitting on the scrim.
The title keeps clear of the arrow: a three-line title ran under it. */
.nwlcaf-scrim figcaption.wp-element-caption {
position: absolute; right: 0; bottom: 0; left: 0; z-index: 1;
margin: 0; padding: var(--wp--preset--spacing--small);
color: #fff; text-align: left;
font-family: var(--wp--preset--font-family--secondary);
font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); font-weight: 700; line-height: 1.15;
}
/* Pillar grid (What We Do) */
.nwlcaf-pillar h3 { text-transform: none; letter-spacing: 0; }
/* Action rows (Take Action) */
.nwlcaf-action-row:last-of-type { border-bottom: 2px solid var(--wp--preset--color--outline); }
.nwlcaf-action-row h3 { text-transform: none; letter-spacing: 0; }
/* ============================================================
LANDING SECTIONS
The kit a landing page is assembled from. Each block below
backs one inserter-visible pattern in patterns/section-*.php,
which is what makes "add a campaign page" an editor task.
Two of them are COLLECTIONS — they render from the Actions &
Campaigns post type rather than holding copy, so one entry
surfaces on the homepage, on Take Action, and at its own URL
without being written three times.
============================================================ */
/* ------------------------------------------------------------
Campaign hero
------------------------------------------------------------ */
/* An image behind the copy rather than a cover block. The single-action
template needs the same hero from a FEATURED image, and
`wp:post-featured-image` drops into the same slot — one component, one set
of rules, two sources for the picture. It also keeps the theme clear of
cover's save() parity rules entirely. */
.nwlcaf-chero { position: relative; overflow: hidden; }
.nwlcaf-chero__media {
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
margin: 0 !important;
}
/* 42% over black is a contrast FLOOR, measured against the lightest
photograph in the library — not a block attribute, so swapping the image
cannot dial the headline below AA by accident. */
.nwlcaf-chero__media img {
width: 100%; height: 100%; object-fit: cover; opacity: .42;
}
.nwlcaf-chero__inner { position: relative; }
.nwlcaf-chero__kicker {
display: inline-block;
background: var(--wp--preset--color--tertiary);
color: var(--wp--preset--color--base);
font-size: var(--nwlcaf-label-size); font-weight: var(--nwlcaf-label-weight); letter-spacing: var(--nwlcaf-label-tracking); text-transform: uppercase;
padding: .35rem .75rem;
}
/* On the single-action template this chip is core/post-terms, which renders
the term inside an (wp-includes/blocks/post-terms.php). The wrapper's
colour only reaches that anchor by inheritance, and theme.json's
elements.link matches it directly — teal on the red chip is 1.00:1. This is
the sixth instance of the same trap in this project: a container styled, a
link inside it repainted by a rule that matches the link itself. */
.nwlcaf-chero__kicker a { color: inherit; text-decoration: none; }
.nwlcaf-chero__kicker a:hover { color: inherit; text-decoration: underline; }
.nwlcaf-chero__title { color: var(--wp--preset--color--base); max-width: 18ch; }
/* Scoped to __copy rather than a bare `.nwlcaf-chero p`. A broad descendant
selector inside a section has repainted a button label five times in this
project; the buttons here are , but the next section's may not be. */
.nwlcaf-chero__copy p { max-width: 56ch; color: var(--wp--preset--color--on-dark-muted); }
/* ------------------------------------------------------------
Narrative + pull-stat
------------------------------------------------------------ */
.nwlcaf-pullstat { border-top: 5px solid var(--wp--preset--color--tertiary); }
.nwlcaf-pullstat p:first-child {
font-family: var(--wp--preset--font-family--secondary);
font-weight: 900; line-height: 1; letter-spacing: -0.02em;
color: var(--wp--preset--color--tertiary);
margin: 0;
}
.nwlcaf-pullstat p:last-child { color: var(--wp--preset--color--muted); margin-top: .5rem; }
/* ------------------------------------------------------------
CTA band
------------------------------------------------------------ */
/* :is() rather than `h2` alone — a section's heading level is a
document-structure decision, and the colour must not depend on which
level a given page needs. Tag-scoped, this rendered indigo on indigo. */
.nwlcaf-cta-band :is(h2, h3) { margin: 0; max-width: 24ch; }
.nwlcaf-cta-band__copy p { color: var(--wp--preset--color--on-dark-muted); max-width: 56ch; }
/* ------------------------------------------------------------
Actions collection — the homepage cards
------------------------------------------------------------ */
/* `align-items: stretch` is not cosmetic. Core's vertical flex layout sets
`align-items: flex-start`, which makes every child shrink to its content —
and the media group's only in-flow child is the featured image. An action
published WITHOUT one collapsed the group to 32px and set the card title one
character per line. Editors forget featured images; the card has to survive
it. */
.nwlcaf-acard { height: 100%; align-items: stretch; }
/* The title sits on the picture, so it is positioned against the MEDIA group,
not the card. Pinning it to the card would drop it past the coloured foot.
The square and the indigo fill hold the card's shape when there is no image,
so a missing picture reads as a missing picture rather than a broken card. */
.nwlcaf-acard__media {
position: relative; width: 100%; aspect-ratio: 1; overflow: hidden;
background: var(--wp--preset--color--primary);
}
.nwlcaf-acard .wp-block-post-featured-image { position: relative; overflow: hidden; margin: 0; }
.nwlcaf-acard .wp-block-post-featured-image img { aspect-ratio: 1; object-fit: cover; transition: transform .4s ease; }
.nwlcaf-acard:hover .wp-block-post-featured-image img { transform: scale(1.04); }
/* Guarantees the title clears AA over whatever photograph is uploaded. */
.nwlcaf-acard .wp-block-post-featured-image::after {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(to top, rgb(var(--nwlcaf-scrim-rgb) / .92) 0%, rgb(var(--nwlcaf-scrim-rgb) / .55) 38%, rgb(var(--nwlcaf-scrim-rgb) / 0) 72%);
pointer-events: none;
}
.nwlcaf-acard__title {
position: absolute; right: 0; bottom: 0; left: 0; z-index: 1;
margin: 0 !important; padding: var(--wp--preset--spacing--small);
/* Clear of the circled arrow in the corner: 40px plus its 1rem inset. */
padding-right: calc(40px + 1.75rem);
font-family: var(--wp--preset--font-family--secondary);
font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); font-weight: 700; line-height: 1.15;
}
/* inline-block, not inline-flex: the title wraps to several lines on a phone
and flex would collapse the wrapping. 23px measured at 390px — one pixel
under SC 2.5.8. */
.nwlcaf-acard__title a {
color: var(--wp--preset--color--base); text-decoration: none;
display: inline-block; min-height: 24px;
}
.nwlcaf-acard__foot { flex: 1; margin: 0 !important; }
/* The foot colour rotates by POSITION. Every card in a collection is identical
markup, so a fourth featured action has to keep the rhythm without an editor
choosing a colour. Teal and yellow fills take DARK text — white on either is
2.30:1 and 1.41:1. */
.nwlcaf-actions .wp-block-post:nth-child(3n + 1) .nwlcaf-acard__foot {
background: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast);
}
.nwlcaf-actions .wp-block-post:nth-child(3n + 2) .nwlcaf-acard__foot {
background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--contrast);
}
.nwlcaf-actions .wp-block-post:nth-child(3n + 3) .nwlcaf-acard__foot {
background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base);
}
.nwlcaf-actions .wp-block-post { display: flex; }
.nwlcaf-actions .wp-block-post > * { width: 100%; }
/* ------------------------------------------------------------
Actions collection — the numbered Take Action stack
------------------------------------------------------------ */
.nwlcaf-stack .wp-block-post {
display: grid; grid-template-columns: 68px 1fr auto;
gap: var(--wp--preset--spacing--small); align-items: center;
padding: var(--wp--preset--spacing--medium) 0;
border-top: 2px solid var(--wp--preset--color--outline);
}
.nwlcaf-stack .wp-block-post:last-child { border-bottom: 2px solid var(--wp--preset--color--outline); }
/* The numeral counts RENDERED rows rather than being stored on the entry, so
unpublishing the second action does not leave a gap at 02. */
.nwlcaf-stack { counter-reset: nwlcaf-action; }
.nwlcaf-stack .wp-block-post::before {
counter-increment: nwlcaf-action;
content: counter(nwlcaf-action, decimal-leading-zero);
font-family: var(--wp--preset--font-family--secondary);
font-size: 2.5rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em;
color: #8E8E8E; /* 3.2:1 — large decorative text only */
}
.nwlcaf-stack__row h3,
.nwlcaf-stack__row .wp-block-post-title {
text-transform: none; letter-spacing: 0; margin: 0 0 .35rem;
font-size: 1.375rem; /* the design set's .action-row h3 */
}
.nwlcaf-stack__row .wp-block-post-title a { color: var(--wp--preset--color--primary); text-decoration: none; }
.nwlcaf-stack__row .wp-block-post-excerpt { margin: 0; max-width: 64ch; }
/* The row CTA is core/read-more, not a button block — only read-more resolves
the entry's own permalink inside a loop. It is styled as the yellow action
button the stack has always used. */
.nwlcaf-stack .wp-block-read-more,
.nwlcaf-ccard .wp-block-read-more { text-decoration: none; }
.nwlcaf-stack .wp-block-read-more {
display: inline-flex; align-items: center; white-space: nowrap;
background: var(--wp--preset--color--highlight);
color: var(--wp--preset--color--contrast);
padding: 0.875rem 1.75rem;
font-size: 0.9375rem; font-weight: 700; letter-spacing: var(--nwlcaf-btn-tracking); text-transform: uppercase;
}
.nwlcaf-stack .wp-block-read-more:hover { background: var(--nwlcaf-highlight-hover); color: var(--wp--preset--color--contrast); }
@media (max-width: 860px) {
.nwlcaf-stack .wp-block-post { grid-template-columns: 44px 1fr; }
.nwlcaf-stack .wp-block-post::before { font-size: 1.75rem; }
.nwlcaf-stack .wp-block-read-more { grid-column: 2; justify-self: start; }
}
/* ------------------------------------------------------------
Campaign collection
------------------------------------------------------------ */
/* Positioned so the kicker, which is a SIBLING of the featured image rather
than a child of it, pins to the card instead of escaping to the page. */
.nwlcaf-ccard {
position: relative;
height: 100%;
transition: transform .2s ease, border-color .2s ease;
}
.nwlcaf-ccard:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--primary) !important; }
/* core's vertical flex layout sets align-items: flex-start, so the card's
photograph shrink-wrapped instead of spanning the card. Same reason the
guide card's colour bar needs align-self: stretch. */
.nwlcaf-ccard > * { align-self: stretch; }
.nwlcaf-ccard .wp-block-post-featured-image { position: relative; margin: 0; overflow: hidden; }
.nwlcaf-campaign-grid .wp-block-post { display: flex; }
.nwlcaf-campaign-grid .wp-block-post > * { width: 100%; }
.nwlcaf-ccard .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.nwlcaf-ccard__kicker {
position: absolute; top: 0; left: 0; z-index: 2;
margin: 0 !important;
background: var(--wp--preset--color--highlight);
color: var(--wp--preset--color--contrast);
font-size: var(--nwlcaf-label-size-sm); font-weight: var(--nwlcaf-label-weight); letter-spacing: var(--nwlcaf-label-tracking); text-transform: uppercase;
padding: .3rem .6rem;
}
.nwlcaf-ccard__body { flex: 1; }
.nwlcaf-ccard__body .wp-block-post-title { font-size: var(--nwlcaf-card-title); text-transform: none; letter-spacing: 0; line-height: 1.3; margin: 0; }
.nwlcaf-ccard__body .wp-block-post-title a { color: var(--wp--preset--color--primary); text-decoration: none; }
.nwlcaf-ccard__more.wp-block-read-more {
margin-top: auto;
display: inline-flex; align-items: center; min-height: 24px;
font-size: var(--nwlcaf-label-size); font-weight: var(--nwlcaf-label-weight); letter-spacing: var(--nwlcaf-label-tracking); text-transform: uppercase;
color: var(--wp--preset--color--accent-dark);
}
/* ------------------------------------------------------------
Stat band
------------------------------------------------------------ */
/* The stat band on Our Impact: four figures across, each under its own yellow
rule. The band existed in style.css and in the design; the page it belongs
to had never carried it. */
.nwlcaf-statband__grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: var(--wp--preset--spacing--medium);
}
.nwlcaf-statband__grid > * { margin-block-start: 0 !important; }
.nwlcaf-stat {
/* #86: no yellow rule over each figure; no padding above either (review, 2026-09-16). */
padding-top: 0;
}
.nwlcaf-stat__n {
display: block; margin: 0 !important;
font-family: var(--wp--preset--font-family--secondary);
font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 900;
color: var(--wp--preset--color--accent);
line-height: 1; letter-spacing: -0.02em;
}
.nwlcaf-stat__l {
display: block; margin: 0.6rem 0 0 !important;
font-size: 0.9375rem; color: var(--wp--preset--color--on-dark-muted);
}
@media (max-width: 1040px) { .nwlcaf-statband__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .nwlcaf-statband__grid { grid-template-columns: 1fr; } }
/* The numbered pillar grid on What We Do. The numeral is the marker; the
sentence beside it is the client's, not a summary of it. */
.nwlcaf-pillar-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--preset--spacing--medium);
margin-top: var(--wp--preset--spacing--large);
}
.nwlcaf-pillar-grid > * { margin-block-start: 0 !important; }
.nwlcaf-pillar {
display: grid; grid-template-columns: 3rem 1fr; gap: var(--wp--preset--spacing--small);
align-items: start;
border-top: 3px solid var(--wp--preset--color--outline);
padding-top: var(--wp--preset--spacing--small);
}
.nwlcaf-pillar p { margin: 0 !important; }
.nwlcaf-pillar__n {
font-family: var(--wp--preset--font-family--secondary);
font-size: 1.5rem; font-weight: 900; line-height: 1;
color: var(--wp--preset--color--accent-dark);
}
@media (max-width: 780px) { .nwlcaf-pillar-grid { grid-template-columns: 1fr; } }
/* Financials: a heading per year, its documents beneath. */
.nwlcaf-doc-year + .nwlcaf-doc-year { margin-top: var(--wp--preset--spacing--large); }
.nwlcaf-doc-table.nwlcaf-doc-table { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.nwlcaf-doc-table li { margin: 0; }
.nwlcaf-statband { border-top: 5px solid var(--wp--preset--color--highlight); }
/* The band's screen-reader heading is its first child, so core's block gap
opened 24px above the grid on top of the padding (review, 2026-09-10). */
.nwlcaf-statband > .nwlcaf-statband__grid { margin-top: 0 !important; }
.nwlcaf-statband p:first-child {
font-family: var(--wp--preset--font-family--secondary);
font-weight: 900; line-height: 1; letter-spacing: -0.02em;
margin: 0;
}
.nwlcaf-statband p:last-child { margin-top: .5rem; }
/* Stat band (Our Impact) */
.nwlcaf-stat p:first-child { font-family: var(--wp--preset--font-family--secondary); letter-spacing: -0.02em; }
/* Filter chips — rendered by core/categories, restyled as chips */
.nwlcaf-chipset ul,
ul.nwlcaf-chipset { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.nwlcaf-chipset li { margin: 0; }
.nwlcaf-chipset a {
display: inline-flex; align-items: center; min-height: 24px;
padding: 0.45rem 1rem; text-decoration: none;
font-size: var(--nwlcaf-label-size); font-weight: var(--nwlcaf-label-weight); letter-spacing: var(--nwlcaf-label-tracking); text-transform: uppercase;
color: var(--wp--preset--color--primary);
background: var(--wp--preset--color--base);
border: 2px solid var(--wp--preset--color--outline);
}
.nwlcaf-chipset a:hover { border-color: var(--wp--preset--color--primary); }
/* News / guide cards */
.nwlcaf-kicker,
.nwlcaf-kicker a {
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--wp--preset--color--muted); text-decoration: none;
}
/* Issue guide card. The bar across the top is the guide's issue colour and
the only place that colour appears in the grid, so it is what makes the
hub scannable by issue rather than by reading every title. */
.nwlcaf-gcard {
transition: transform var(--nwlcaf-dur) ease;
background: var(--wp--preset--color--base);
/* The grid item is the post-template's ; the card is inside it, so it
has to claim the full height or a row of cards ends ragged. */
height: 100%;
}
.nwlcaf-gcard:hover { transform: translateY(-3px); }
/* core's vertical flex layout sets align-items: flex-start, which shrink-wraps
an empty ::before to zero width. The bar has to claim the row itself. */
.nwlcaf-gcard::before {
content: ''; display: block; height: 8px; flex: none; align-self: stretch;
background: var(--wp--preset--color--outline);
}
.nwlcaf-gcard.is-repro::before { background: var(--wp--preset--color--issue-repro); }
.nwlcaf-gcard.is-childcare::before { background: var(--wp--preset--color--issue-childcare); }
.nwlcaf-gcard.is-schools::before { background: var(--wp--preset--color--issue-schools); }
.nwlcaf-gcard.is-democracy::before { background: var(--wp--preset--color--issue-democracy); }
.nwlcaf-gcard__body { flex: 1; }
.nwlcaf-gcard__title { font-size: var(--nwlcaf-card-title); margin: 0; }
/* The tags sit on the card's floor whatever the title's length, so a row of
cards lines up on the badges rather than on the first line of text. */
.nwlcaf-gcard__tags { margin-top: auto; }
.nwlcaf-badge .wp-block-post-terms__separator { display: none; }
.nwlcaf-badge a {
display: inline-block;
font-size: 0.75rem; font-weight: 700;
letter-spacing: var(--nwlcaf-label-tracking); text-transform: uppercase;
padding: 0.3rem 0.7rem;
background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast);
}
.nwlcaf-gcard__more {
font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--wp--preset--color--accent-dark);
}
/* Component links again — the parent underlines every anchor in post content
at (0,2,1), and a card's affordance is the card.
These are (0,3,1) on purpose. At (0,2,1) they TIED and lost on source order,
which showed up the moment the same card was used inside page content
rather than a template: identical markup, underlined on Electoral and clean
on the guides hub. */
.nwlcaf-gcard .nwlcaf-gcard__body .nwlcaf-gcard__title a,
.nwlcaf-gcard .nwlcaf-gcard__tags .nwlcaf-badge a,
.nwlcaf-gcard .nwlcaf-gcard__body a.nwlcaf-gcard__more { text-decoration: none; }
.nwlcaf-gcard .nwlcaf-gcard__body .nwlcaf-gcard__title a { color: var(--wp--preset--color--primary); }
.nwlcaf-gcard:hover .nwlcaf-gcard__body .nwlcaf-gcard__title a { text-decoration: underline; text-underline-offset: 3px; }
/* Pagination */
.nwlcaf-pagination a,
.nwlcaf-pagination .page-numbers {
display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 0.75rem;
font-weight: 700; text-decoration: none; white-space: nowrap;
color: var(--wp--preset--color--primary);
border: 2px solid var(--wp--preset--color--outline);
}
.nwlcaf-pagination .current {
background: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base);
}
/* Financials document table */
.nwlcaf-doc-table table { width: 100%; border-collapse: collapse; }
.nwlcaf-doc-table th {
text-align: left; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--wp--preset--color--muted); padding: 0.75rem 1rem;
border-bottom: 2px solid var(--wp--preset--color--outline);
}
.nwlcaf-doc-table td { padding: 1rem; border-bottom: 1px solid var(--wp--preset--color--outline); }
.nwlcaf-doc-table td:first-child {
font-family: var(--wp--preset--font-family--secondary); font-weight: 900;
font-size: 1.25rem; color: var(--wp--preset--color--primary);
}
.nwlcaf-doc-table figcaption { font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
/* Long-form legal: sticky table of contents */
@media (min-width: 900px) {
.nwlcaf-toc { position: sticky; top: var(--wp--preset--spacing--small); align-self: start; }
}
.nwlcaf-toc { border-left: 3px solid var(--wp--preset--color--outline); padding-left: var(--wp--preset--spacing--small); }
.nwlcaf-toc h2 { letter-spacing: 0.1em; }
/* The contents list is navigation, not prose: no markers, and the anchor is
the affordance. Built by nwlcaf_render_toc() from the page's own headings. */
.nwlcaf-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.nwlcaf-toc li { margin: 0; }
.nwlcaf-toc a { font-size: 0.9375rem; text-decoration: none; }
.nwlcaf-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* A heading the contents list points at must clear the sticky header when the
browser jumps to it. */
.nwlcaf-legal h2 { scroll-margin-top: var(--wp--preset--spacing--x-large); }
/* ------------------------------------------------------------
Issue guide body — two sections, copy beside a box
The guide's own copy fills the wide column; the narrow one
holds the standing "Take action" links in section one and
the guide's questions in section two.
------------------------------------------------------------ */
.nwlcaf-guide-sec .wp-block-columns { gap: var(--wp--preset--spacing--large); align-items: flex-start; }
.nwlcaf-guide-sec .wp-block-column > .wp-block-post-content,
.nwlcaf-guide-sec .wp-block-column p { max-width: 68ch; }
/* The overview's first sentence carries the argument, so it gets a way in
rather than opening on a 150-word block. Size and measure come from the
design system's lede; the weight and colour are this component's. */
.nwlcaf-lede {
font-size: 1.25rem; line-height: 1.6; max-width: 62ch;
font-weight: 500; color: var(--wp--preset--color--primary);
/* Core's layout styles set margin-left/right: auto !important on every
unaligned child of a constrained group, so a measured paragraph gets
centred under a left-aligned heading. Answering core, not a colleague —
same as the page-title standfirst. */
margin-inline: 0 !important;
}
/* One marker device, numbered by CSS. The captured copy carried its own
"1." because the source site set the number in a beside the text;
the migration drops it, so this counter is the only numbering. */
.nwlcaf-policy-list.nwlcaf-policy-list {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 0.75rem; counter-reset: nwlcaf-pol;
}
.nwlcaf-policy-list li {
counter-increment: nwlcaf-pol;
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--outline);
border-left: 5px solid var(--wp--preset--color--accent);
padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
display: grid; grid-template-columns: 40px 1fr; gap: 0.75rem; align-items: baseline;
max-width: none;
}
.nwlcaf-policy-list li::before {
content: counter(nwlcaf-pol, decimal-leading-zero);
font-family: var(--wp--preset--font-family--secondary);
font-weight: 900; color: var(--wp--preset--color--accent-dark);
}
.nwlcaf-qbox {
background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base);
padding: var(--wp--preset--spacing--medium);
}
.nwlcaf-qbox h2 { color: var(--wp--preset--color--base); }
.nwlcaf-qbox ul, .nwlcaf-qbox ol { margin: 0; padding-left: 1.1rem; }
.nwlcaf-qbox li + li { margin-top: 0.6rem; }
/* Component links again: the parent's a11y rule underlines every anchor in
post content at (0,2,1). These are a standing pair of navigation links on
the brand indigo, so they take the yellow and no underline. (0,3,1). */
.nwlcaf-guide-sec .nwlcaf-qbox a:not(.wp-block-button__link) {
color: var(--wp--preset--color--highlight); text-decoration: none;
}
.nwlcaf-guide-sec .nwlcaf-qbox a:not(.wp-block-button__link):hover {
text-decoration: underline; text-underline-offset: 3px;
}
/* Guide hero — the issue color is the page's identity.
The `is-` class is added at render time from the guide's own
nwlcaf_issue term; see nwlcaf_guide_issue_key() in functions.php. */
.nwlcaf-guide-hero { background: var(--wp--preset--color--issue-repro); }
.nwlcaf-guide-hero.is-repro { background: var(--wp--preset--color--issue-repro); }
.nwlcaf-guide-hero.is-democracy { background: var(--wp--preset--color--issue-democracy); }
.nwlcaf-guide-hero.is-schools { background: var(--wp--preset--color--issue-schools); }
.nwlcaf-guide-hero,
.nwlcaf-guide-hero h1 { color: #fff; }
/* The trail is white on the issue colour, not the indigo band's teal. */
.nwlcaf-guide-hero .nwlcaf-breadcrumbs a,
.nwlcaf-guide-hero .nwlcaf-breadcrumbs [aria-current] { color: var(--wp--preset--color--base); }
.nwlcaf-guide-hero .nwlcaf-breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }
.nwlcaf-guide-hero.is-schools .nwlcaf-breadcrumbs a,
.nwlcaf-guide-hero.is-schools .nwlcaf-breadcrumbs [aria-current] { color: var(--wp--preset--color--contrast); }
.nwlcaf-guide-hero a:not(.wp-element-button) { color: #fff; }
/* The kicker: state and issue, as terms. post-terms renders LINKS, and
theme.json's elements.link would repaint them teal on the issue colour —
the same trap as the campaign chip. (0,3,1). */
.nwlcaf-guide-hero .nwlcaf-guide-kicker,
.nwlcaf-guide-hero .nwlcaf-guide-kicker a:not(.wp-block-button__link) {
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--wp--preset--color--base); text-decoration: none;
}
.nwlcaf-guide-hero .nwlcaf-guide-kicker a:not(.wp-block-button__link):hover { text-decoration: underline; }
/* Yellow needs dark text: white on issue-schools is 1.41:1. */
.nwlcaf-guide-hero.is-schools,
.nwlcaf-guide-hero.is-schools h1,
.nwlcaf-guide-hero.is-schools p,
.nwlcaf-guide-hero.is-schools .nwlcaf-guide-kicker,
.nwlcaf-guide-hero.is-schools .nwlcaf-guide-kicker a:not(.wp-block-button__link),
.nwlcaf-guide-hero.is-schools a:not(.wp-element-button) { color: var(--wp--preset--color--contrast); }
/* Search results */
.nwlcaf-result h3 { text-transform: none; letter-spacing: 0; }
/* Outline buttons on the dark footer: transparent fill, white border and label. */
.nwlcaf-footer .wp-block-button.is-style-outline .wp-block-button__link {
background-color: transparent;
border: 2px solid var(--wp--preset--color--base);
color: var(--wp--preset--color--base);
}
.nwlcaf-footer .wp-block-button.is-style-outline .wp-block-button__link:hover {
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--primary);
}
/* Social icons: center the glyph in its circle explicitly. Core normally
handles this, but a footer-wide `a { display: inline-flex }` rule (added for
tap-target sizing) can override it and shove every icon to the flex start. */
.nwlcaf-footer .wp-block-social-links .wp-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
}
.nwlcaf-footer .wp-block-social-links .wp-social-link svg { display: block; margin: auto; }
/* ------------------------------------------------------------
Mirrors of two rules proven in the design set.
1. The issue-childcare orange is a mid-tone — white on it is
3.18:1 and dark text 3.98:1, so neither clears AA. It stays
the issue's identity for tiles and bars; anything carrying
TEXT uses the darker sibling (white = 5.10:1). Same pattern
as accent / accent-dark.
2. Headings must be able to break long words. "Care
Infrastructure and Economic Security" overflowed a 320px
screen by 40px, and headings carry client copy we do not
control.
------------------------------------------------------------ */
.nwlcaf-issue-hero.is-childcare,
.nwlcaf-guide-hero.is-childcare { background: var(--wp--preset--color--issue-childcare-dark); }
/* ------------------------------------------------------------
Issue page — photograph, issue colour, copy beside a card
The hero is the campaign hero's construction: an ordinary
featured image behind the copy, with the issue colour
multiplied over it so a swapped photograph keeps the issue's
identity. The scrim under the headline is the contrast floor.
`--nwlcaf-issue` is set by the is- class, which the
render_block filter adds from the page's own issue key.
------------------------------------------------------------ */
.nwlcaf-issue-hero { --nwlcaf-issue: var(--wp--preset--color--issue-childcare-dark); }
.nwlcaf-issue-hero.is-repro,
.nwlcaf-sidecard.is-repro { --nwlcaf-issue: var(--wp--preset--color--issue-repro); }
.nwlcaf-issue-hero.is-schools,
.nwlcaf-sidecard.is-schools { --nwlcaf-issue: var(--wp--preset--color--issue-schools); }
.nwlcaf-issue-hero.is-democracy,
.nwlcaf-sidecard.is-democracy { --nwlcaf-issue: var(--wp--preset--color--issue-democracy); }
.nwlcaf-issue-hero.is-childcare,
.nwlcaf-sidecard.is-childcare { --nwlcaf-issue: var(--wp--preset--color--issue-childcare-dark); }
.nwlcaf-issue-hero { position: relative; overflow: hidden; color: var(--wp--preset--color--base); }
.nwlcaf-issue-hero__media {
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
margin: 0 !important;
}
.nwlcaf-issue-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.nwlcaf-issue-hero__media::after {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background: var(--nwlcaf-issue); mix-blend-mode: multiply;
}
/* Measured floor for the headline, whatever photograph an editor uploads —
a text-shadow does not satisfy WCAG. */
.nwlcaf-issue-hero::before {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(to right,
rgb(var(--nwlcaf-scrim-rgb) / 0.86) 0%,
rgb(var(--nwlcaf-scrim-rgb) / 0.66) 42%,
rgb(var(--nwlcaf-scrim-rgb) / 0.18) 78%,
rgb(var(--nwlcaf-scrim-rgb) / 0) 100%);
pointer-events: none;
}
.nwlcaf-issue-hero__inner { position: relative; }
/* 18ch inside a constrained group would be centred by core's layout styles,
which set margin-inline: auto !important on every unaligned child. */
.nwlcaf-issue-hero__title {
color: var(--wp--preset--color--base); max-width: 18ch;
margin-inline: 0 !important;
}
.nwlcaf-issue-hero .nwlcaf-breadcrumbs a,
.nwlcaf-issue-hero .nwlcaf-breadcrumbs [aria-current] { color: var(--wp--preset--color--base); }
.nwlcaf-issue-hero .nwlcaf-breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }
/* The opening paragraph carries the argument, same as the guide overview. */
.nwlcaf-issue-body .wp-block-post-content > p:first-of-type {
font-size: 1.1875rem; font-weight: 500; color: var(--wp--preset--color--primary);
}
.nwlcaf-sidecard {
border: 1px solid var(--wp--preset--color--outline);
border-top: 6px solid var(--nwlcaf-issue, var(--wp--preset--color--primary));
padding: var(--wp--preset--spacing--medium);
align-self: start;
}
.nwlcaf-sidecard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.nwlcaf-sidecard li { margin: 0; }
/* Component links: the parent underlines every anchor in post content at
(0,2,1), and these are a standing set of navigation links. (0,3,1). */
.nwlcaf-issue-body .nwlcaf-sidecard a:not(.wp-block-button__link) {
font-weight: 700; text-decoration: none;
}
.nwlcaf-issue-body .nwlcaf-sidecard a:not(.wp-block-button__link):hover {
text-decoration: underline; text-underline-offset: 3px;
}
:where(h1, h2, h3, h4, h5, h6),
.wp-block-heading,
.wp-block-post-title { overflow-wrap: break-word; }
/* ============================================================
HOMEPAGE HERO — knockout poster
The photograph sits under a 60% indigo veil; the headline is
solid white on top of it (review #113, 2026-09-15 — it had been
knocked out of the photo, which the client read as not solid).
The image is supplied by the pattern as --nwlcaf-hero-image so
an editor can swap it without touching CSS.
CONSTRAINT worth knowing before swapping that image: the
knockout needs a photograph with large, legible shapes. The
White House engraving is fine crosshatch and turns to mush at
glyph scale — the protest crowd survives being cropped by
letterforms.
------------------------------------------------------------ */
.nwlcaf-hero {
position: relative;
overflow: hidden;
background: var(--wp--preset--color--primary);
--nwlcaf-hero-image: url('assets/images/grid11.png');
}
.nwlcaf-hero__bg {
background-image: var(--nwlcaf-hero-image);
background-size: cover;
background-position: 50% 34%;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* No duotone on the backdrop. The design file declares one, but the reviewed
render (reviews.e11group.com, 3abed94) shows the photograph in its own
colours under the 60% indigo veil, and that is what the client approved.
The knockout letters keep their teal blend below. */
.nwlcaf-hero__bg {
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
.nwlcaf-hero__veil {
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background: var(--wp--preset--color--primary);
opacity: .6;
}
.nwlcaf-hero > .wp-block-group__inner-container,
.nwlcaf-hero__inner {
position: relative;
/* The design's own figures, copied rather than re-derived: hero height comes
from this padding, not from a min-height. The x-large token I had used
here is 83.2px flat, which is short at the top and gives the block no
inline padding at all on a phone. */
padding: clamp(3rem, 6.5vw, 6rem) var(--wp--preset--spacing--medium) clamp(3rem, 5.5vw, 5rem);
}
/* Label, not a button. A filled yellow chip read as one — identical to the
Take Action CTA directly below it. */
.nwlcaf-hero__flag {
display: inline-flex; align-items: center; gap: .6rem;
color: var(--wp--preset--color--highlight);
font-size: .8125rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
margin: 0 0 clamp(1.25rem, 3vw, 2.25rem) !important;
}
.nwlcaf-hero__flag::before {
content: ''; width: 34px; height: 4px;
background: var(--wp--preset--color--highlight);
}
.nwlcaf-hero__title {
color: var(--wp--preset--color--base);
font-size: clamp(2.75rem, 10.2vw, 9.5rem) !important;
line-height: .88;
letter-spacing: -0.04em;
max-width: 14ch;
margin: 0 !important;
}
/* Blend mode chosen by measurement. Screen pushed the glyphs to
rgb(148,196,211) — a pale cyan not in the palette. Lighten holds them at
rgb(113,169,170), beside the brand teal, and clears AA. Overlay and
hard-light both fail contrast outright. */
/* Review #113 (2026-09-15): solid white, no longer knocked out of the photo. */
.nwlcaf-hero__knock { display: inline; color: var(--wp--preset--color--base); }
.nwlcaf-hero__rule {
display: block; width: min(340px, 60%); height: 12px;
background: var(--wp--preset--color--highlight);
margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.25rem, 2.5vw, 2rem);
}
.nwlcaf-hero__foot {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--large);
}
.nwlcaf-hero__foot p {
color: var(--wp--preset--color--on-dark-muted);
max-width: 50ch; font-size: 1.0625rem; margin: 0;
}
/* iOS ignores fixed attachment; the letters still carry the photograph, just
without the window alignment. */
@media (max-width: 780px) {
.nwlcaf-hero__bg,
}
/* ============================================================
GRID COLLAPSE
core's grid layout with an explicit columnCount emits a fixed
`repeat(N, minmax(0, 1fr))` and NO media queries — see
wp-includes/block-supports/layout.php. Every card grid in this
theme therefore rendered three or four columns at 320px: the
news archive and the guides archive as much as the new
collections.
core's responsive alternative, minimumColumnWidth, auto-fills
to whatever happens to fit, which does not track the design
set's breakpoints. Collapsing explicitly keeps the theme on the
same steps as the design.
These beat core's generated layout class on specificity
(0,2,0 against 0,1,0), so no !important is needed.
============================================================ */
@media (max-width: 1040px) {
.wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tiles are square and label-only, so they hold four across further out than
the card grids do — 900px, matching the design set. */
@media (max-width: 900px) {
.nwlcaf-tiles.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.wp-block-post-template.is-layout-grid { grid-template-columns: minmax(0, 1fr); }
}
/* The campaign cards carry more copy than the news cards, so they hold two
columns further down before collapsing. */
@media (max-width: 860px) and (min-width: 701px) {
.nwlcaf-campaign-grid .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
.nwlcaf-tiles.is-layout-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ------------------------------------------------------------
Links on the mint band
accent-dark on accent-light measures 4.26:1 — just under AA.
The design set already resolves this by switching to primary
on any tinted section; the theme had not carried the rule, so
the news band's "All news" link failed on the homepage.
:not(.wp-element-button) keeps it off button labels — the
exact trap that has bitten this project six times.
------------------------------------------------------------ */
.nwlcaf-seam-band a:not(.wp-element-button) { color: var(--wp--preset--color--primary); }
/* ============================================================
COMPONENT LINKS ARE NOT PROSE LINKS
The parent theme's a11y stylesheet ships
`.wp-block-post-content a:not(.wp-block-button__link) { text-decoration: underline }`
— specificity (0,2,1), printed AFTER this file. Every component
rule at (0,2,1) therefore lost the tie on source order, and
card titles, tile labels, kickers and read-more links all came
out underlined, which the approved design does not do.
Prose links keep their underline: not using colour alone to
signal a link is the point of the parent's rule, and it is
correct inside a paragraph. In a card the whole tile is the
target and the title is display-sized — the affordance is the
component, not the underline. These selectors are (0,3,1) so
they win on specificity rather than on ordering luck.
============================================================ */
.nwlcaf-stack .nwlcaf-stack__row .wp-block-post-title a,
.nwlcaf-stack .wp-block-post a.wp-block-read-more,
.nwlcaf-actions .wp-block-post .nwlcaf-acard__title a,
.nwlcaf-campaign-grid .nwlcaf-ccard__body .wp-block-post-title a,
.nwlcaf-campaign-grid .nwlcaf-ccard__more.wp-block-read-more,
.nwlcaf-tiles .nwlcaf-tile .nwlcaf-tile__label a,
.nwlcaf-chero .nwlcaf-chero__inner .nwlcaf-chero__kicker a,
.nwlcaf-header .wp-block-navigation a.wp-block-navigation-item__content,
.nwlcaf-footer .wp-block-navigation a.wp-block-navigation-item__content {
text-decoration: none;
}
.nwlcaf-stack .nwlcaf-stack__row .wp-block-post-title a:hover,
.nwlcaf-campaign-grid .nwlcaf-ccard__body .wp-block-post-title a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ============================================================
NEWS FILTER BAR
One row. It was three chipset rows plus a search row — 234px
in the design set before a visitor reached a headline, 65px
after. `wp:categories` with displayAsDropdown is the native
control, so the editor keeps its taxonomy pickers.
============================================================ */
.nwlcaf-filters__legend {
margin: 0 !important;
font-size: var(--nwlcaf-label-size-sm); font-weight: var(--nwlcaf-label-weight);
letter-spacing: var(--nwlcaf-label-tracking); text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.nwlcaf-filter-select { margin: 0 !important; }
.nwlcaf-filter-select select {
appearance: none; -webkit-appearance: none;
width: auto; max-width: 17rem; min-height: 40px;
padding: 0.5rem 2.25rem 0.5rem 0.8rem;
font-family: inherit;
font-size: var(--nwlcaf-label-size); font-weight: 700;
letter-spacing: var(--nwlcaf-btn-tracking); text-transform: uppercase;
color: var(--wp--preset--color--primary);
background-color: var(--wp--preset--color--base);
border: 2px solid var(--wp--preset--color--outline); border-radius: 0;
cursor: pointer;
/* Same stroke weight as the arrow in every button, so the caret belongs to
the same drawing rather than being an OS widget. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23292664' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 0.6rem center;
}
.nwlcaf-filter-select select:hover { border-color: var(--wp--preset--color--primary); }
.nwlcaf-filters__search { margin-left: auto !important; }
.nwlcaf-filters__search .wp-block-search__input {
min-height: 40px; border: 2px solid var(--wp--preset--color--outline); border-radius: 0;
}
.nwlcaf-filters__search .wp-block-search__button {
min-height: 40px; border-radius: 0; margin-left: 0;
background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base);
}
/* Pagination: centred, and the Next label keeps its arrow on one line. */
.nwlcaf-pagination { justify-content: center !important; }
.nwlcaf-pagination .wp-block-query-pagination-next,
.nwlcaf-pagination .wp-block-query-pagination-previous {
display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
}
/* ============================================================
LONG-FORM READING
The legal pages arrived as one unbroken column — Terms of Use
was 1,770 words with a single structural break, because the
capture flattened its thirteen numbered section headings into
paragraphs. Restoring them is what makes the sticky table of
contents worth having.
============================================================ */
/* Section headings in a contract are navigation labels, not section banners.
The display scale is right on a campaign page and shouts here, and the TOC
beside them is already doing the announcing. */
.nwlcaf-legal .wp-block-post-content h2 {
font-size: 1.25rem; letter-spacing: 0;
margin-top: var(--wp--preset--spacing--large);
padding-bottom: 0.35rem;
border-bottom: 3px solid var(--wp--preset--color--highlight);
}
.nwlcaf-legal .wp-block-post-content h2:first-child { margin-top: 0; }
/* Instagram. The plugin draws the grid; the theme only owns the band it sits
in and squares off the images, which arrive with a radius. */
.nwlcaf-instagram #sb_instagram .sbi_photo,
.nwlcaf-instagram #sb_instagram img { border-radius: 0; }
.nwlcaf-instagram #sb_instagram .sbi_follow_btn a {
border-radius: 0; font-weight: 700; letter-spacing: var(--nwlcaf-btn-tracking);
text-transform: uppercase;
}
/* The contact card's teal top rule. The block carries borderColor "outline"
for its hairline, and a preset border colour is emitted !important — so the
6px top rule set alongside it in the same block was painted grey. Answering
core, the same as the card hovers. */
.nwlcaf-formcard { border-top-color: var(--wp--preset--color--accent) !important; }
/* The contact form's stand-in, until Gravity Forms is installed and a form
titled "Contact" exists. Deliberately visible: an empty column on the
contact page reads as broken either way. */
.nwlcaf-formcard__missing {
margin: 0; color: var(--wp--preset--color--muted); font-size: 0.9375rem;
}
/* ------------------------------------------------------------
Electoral — the stakes grid and the guides band
------------------------------------------------------------ */
.nwlcaf-stakes .nwlcaf-lede { font-size: 1.375rem; line-height: 1.55; max-width: 56ch; }
/* A hairline grid: one border around the set and 1px gaps showing the border
colour through, rather than four separate boxes. */
.nwlcaf-stakes__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--wp--preset--color--outline);
border: 1px solid var(--wp--preset--color--outline);
margin-top: var(--wp--preset--spacing--large);
}
.nwlcaf-stake {
background: var(--wp--preset--color--base);
padding: var(--wp--preset--spacing--medium);
}
/* The issue bar: the same marker the brand uses everywhere, tinted. */
.nwlcaf-stake::before {
content: ''; display: block; width: 48px; height: 6px; margin-bottom: 0.9rem;
background: var(--wp--preset--color--outline);
}
.nwlcaf-stake.is-repro::before { background: var(--wp--preset--color--issue-repro); }
.nwlcaf-stake.is-childcare::before { background: var(--wp--preset--color--issue-childcare); }
.nwlcaf-stake.is-schools::before { background: var(--wp--preset--color--issue-schools); }
.nwlcaf-stake.is-democracy::before { background: var(--wp--preset--color--issue-democracy); }
.nwlcaf-stake__title {
font-size: var(--nwlcaf-card-title); text-transform: none; letter-spacing: 0;
margin: 0 0 0.4rem;
}
.nwlcaf-stake p { margin: 0; }
.nwlcaf-guides-band__grid .wp-block-post-template { gap: var(--wp--preset--spacing--small); }
/* Two link cards. The accent top rule is the same device as the issue page's
side card, at the width of a column rather than a sidebar. */
.nwlcaf-linkcard {
border: 1px solid var(--wp--preset--color--outline);
border-top: 6px solid var(--wp--preset--color--accent);
padding: var(--wp--preset--spacing--medium);
}
.nwlcaf-linkcard__title {
font-size: 1.25rem; text-transform: none; letter-spacing: 0; margin: 0;
}
@media (max-width: 1040px) {
.nwlcaf-stakes__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.nwlcaf-stakes__grid { grid-template-columns: 1fr; }
}
/* Campaign narrative — measured copy at the left of the wide band, not a
centred column. The post-content block uses the flow layout, so there are no
auto margins to fight; the measure is set here. */
.nwlcaf-narrative .wp-block-post-content > * { max-width: 68ch; }
.nwlcaf-narrative .wp-block-post-content > .nwlcaf-section-head { max-width: none; }
/* A pull-quote in the sidebar decorates the column; a pull-quote in the flow
is a structural break, which is what a nine-paragraph run actually needs. */
.nwlcaf-pullquote {
border-left: 5px solid var(--wp--preset--color--highlight);
padding: var(--wp--preset--spacing--small) 0 var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
margin: var(--wp--preset--spacing--medium) 0;
font-size: 1.125rem; line-height: 1.5;
color: var(--wp--preset--color--primary);
}
.nwlcaf-pullquote p { margin: 0; }
/* ============================================================
MOBILE HEADER
Core's navigation block already ships a working overlay menu —
the design set had to build one because it is static HTML. So
the job here is only to put the right things in it: the search
leaves the bar entirely (a phone header has room for a logo and
one control) and the field renders inside the overlay instead.
============================================================ */
/* The search block lives in the MENU's content. On desktop core renders the
menu inline, so it is hidden there; on mobile the same block lands inside the
overlay, which is where we want it. */
@media (min-width: 861px) {
.nwlcaf-header .wp-block-navigation:not(.is-menu-open) .wp-block-search { display: none; }
}
@media (max-width: 860px) {
.nwlcaf-header__donate.nwlcaf-header__donate { display: none; }
}
/* The overlay's own contents: full-size targets, the site's type, and the
search field at the top where a thumb reaches first. */
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open {
background: var(--wp--preset--color--primary);
padding-top: calc(var(--wp--preset--spacing--x-large) + 1rem);
}
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open a {
color: var(--wp--preset--color--base);
font-size: 1.0625rem; font-weight: 700;
letter-spacing: var(--nwlcaf-btn-tracking); text-transform: uppercase;
min-height: 52px; display: flex; align-items: center;
border-bottom: 0;
}
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open a:hover { color: var(--wp--preset--color--highlight); }
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-search__input {
min-height: 48px; border: 2px solid var(--wp--preset--color--base); border-radius: 0;
}
:root {
--nwlcaf-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
/* ============================================================
HOME SECTIONS — values copied from the design stylesheet
These three sections (news, what-we-do, donate) had been built
with a different structure and re-derived numbers, which is why
they were the ones that read as wrong. Every figure below is the
design's own, with tokens renamed to their theme equivalents.
------------------------------------------------------------ */
/* ---- Recent news ---- */
/* Label+heading and the "All news" control are one baseline row, not
stacked. */
.nwlcaf-news__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--wp--preset--spacing--small);
flex-wrap: wrap;
margin-bottom: var(--wp--preset--spacing--medium);
}
.nwlcaf-news__head h2 { color: var(--wp--preset--color--contrast); margin: 0; }
/* Ghost button, so it sits on the baseline as a control rather than as a
paragraph below the heading. The arrow is the design's glyph, drawn as a
mask so no SVG has to survive block validation. */
.nwlcaf-more-link { margin: 0 !important; }
.nwlcaf-more-link a {
display: inline-flex;
align-items: center;
gap: 0.6em;
padding: 0.875rem 0;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: var(--nwlcaf-btn-tracking, 0.08em);
text-transform: uppercase;
text-decoration: none;
color: var(--wp--preset--color--primary);
}
.nwlcaf-more-link a:hover { color: var(--wp--preset--color--accent-dark); }
/* (0,3,1): the parent's a11y underline rule is (0,2,1) — two classes once
its :not() is counted — and beat the ghost button's (0,1,1) on source
order, so "All news" came out underlined. Two classes only TIE with it. */
.nwlcaf-news__head .nwlcaf-more-link a:not(.wp-element-button) { text-decoration: none; }
.nwlcaf-news__head .nwlcaf-more-link a:not(.wp-element-button):hover,
.nwlcaf-news__head .nwlcaf-more-link a:not(.wp-element-button):focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.nwlcaf-more-link a::after,
.nwlcaf-btn-arrow .wp-block-button__link::after {
content: '';
width: 16px; height: 16px; flex: none;
background: currentColor;
-webkit-mask: var(--nwlcaf-arrow) center / 16px 16px no-repeat;
mask: var(--nwlcaf-arrow) center / 16px 16px no-repeat;
}
.nwlcaf-btn-arrow .wp-block-button__link {
display: inline-flex; align-items: center; gap: 0.6em;
}
/* News grid: three columns, small gap. */
.nwlcaf-news__grid .wp-block-post-template {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wp--preset--spacing--small);
}
/* Equal-height cards: the grid stretches its , but the card group inside
shrank to its own copy, so three cards came out three heights. */
.nwlcaf-news__grid .wp-block-post { display: flex; margin-block-start: 0; }
.nwlcaf-news__grid .wp-block-post > .nwlcaf-ncard { flex: 1 1 auto; width: 100%; }
@media (max-width: 900px) {
.nwlcaf-news__grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.nwlcaf-news__grid .wp-block-post-template { grid-template-columns: 1fr; }
}
.nwlcaf-ncard {
position: relative;
background: var(--wp--preset--color--base);
padding: var(--wp--preset--spacing--small);
display: flex;
flex-direction: column;
gap: 0.75rem;
border: 1px solid var(--wp--preset--color--outline);
border-left: 5px solid transparent;
transition: border-color var(--nwlcaf-dur) ease, transform var(--nwlcaf-dur) ease;
}
.nwlcaf-ncard:hover {
border-left-color: var(--wp--preset--color--highlight);
transform: translateY(-3px);
}
/* The whole card is the target; the title's link is what carries it. */
.nwlcaf-ncard .wp-block-post-title a::after {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
.nwlcaf-ncard .nwlcaf-date-chip {
align-self: flex-start;
background: var(--wp--preset--color--highlight);
color: var(--wp--preset--color--contrast);
font-size: var(--nwlcaf-label-size-sm);
font-weight: var(--nwlcaf-label-weight);
letter-spacing: var(--nwlcaf-label-tracking);
text-transform: uppercase;
padding: 0.25rem 0.55rem;
margin: 0 !important;
}
/* 1.125rem — the design's card-title size. It was rendering at the `large`
preset, which is display scale and swamped the card. */
.nwlcaf-ncard .wp-block-post-title {
font-size: var(--nwlcaf-card-title) !important;
/* The design's card title is the h3 weight (700); the post-title block was
picking up the heading element's 900. */
font-weight: 700;
line-height: 1.4;
margin: 0 !important;
text-transform: none;
letter-spacing: 0;
}
.nwlcaf-ncard .wp-block-post-title a {
color: var(--wp--preset--color--primary);
text-decoration: none;
}
.nwlcaf-ncard:hover .wp-block-post-title a {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* post-terms renders a LINK (CLAUDE.md: the anchor you did not write), so the
term is repainted by elements.link and underlined by the parent's a11y rule
unless the anchor itself is styled — at (0,3,1), which is what beats it. */
.nwlcaf-news__grid .nwlcaf-ncard .nwlcaf-kicker a:not(.wp-element-button) {
color: var(--wp--preset--color--muted);
text-decoration: none;
}
.nwlcaf-ncard .nwlcaf-kicker {
font-size: var(--nwlcaf-label-size-sm);
font-weight: var(--nwlcaf-label-weight);
letter-spacing: var(--nwlcaf-label-tracking);
text-transform: uppercase;
color: var(--wp--preset--color--muted);
margin-top: auto !important;
margin-bottom: 0 !important;
}
/* ---- What we do / Donate: the same 5fr 6fr split ---- */
.nwlcaf-wwd__grid,
.nwlcaf-donate__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: var(--wp--preset--spacing--large);
}
.nwlcaf-wwd__grid { align-items: center; }
.nwlcaf-donate__grid { align-items: start; }
@media (max-width: 900px) {
.nwlcaf-wwd__grid,
.nwlcaf-donate__grid { grid-template-columns: 1fr; }
}
.nwlcaf-wwd__media { margin: 0 !important; }
.nwlcaf-wwd__media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* Pillars: the yellow bar marker, same device as the eyebrow and heading
rule. Drawn with ::before so the list stays an ordinary editable list. */
.nwlcaf-pillars {
list-style: none;
/* A gap above, off the heading's rule (review, 2026-09-16). */
margin: var(--wp--preset--spacing--medium) 0 !important;
padding: 0;
display: grid;
gap: var(--wp--preset--spacing--small);
}
.nwlcaf-pillars li {
display: grid;
grid-template-columns: var(--nwlcaf-bar-sm) 1fr;
gap: 0.9rem;
align-items: start;
}
.nwlcaf-pillars li::before {
/* Review, 2026-09-09: an arrow in place of the yellow bar. The same glyph
the buttons carry, in the brand indigo. */
content: '';
width: 18px; height: 18px;
margin-top: 0.3rem;
background: var(--wp--preset--color--primary);
-webkit-mask: var(--nwlcaf-arrow) center / 18px 18px no-repeat;
mask: var(--nwlcaf-arrow) center / 18px 18px no-repeat;
}
/* ---- Donate ---- */
.nwlcaf-donate h2 { color: var(--wp--preset--color--base); }
.nwlcaf-donate .nwlcaf-eyebrow { color: var(--wp--preset--color--highlight); }
.nwlcaf-donate p { color: var(--wp--preset--color--on-dark-muted); }
.nwlcaf-donate .nwlcaf-disclaimer {
font-style: italic;
font-size: 0.9375rem;
color: var(--wp--preset--color--on-dark-muted);
}
/* ---- Action cards: the two things the design has and this did not ---- */
.nwlcaf-acard .wp-block-post-featured-image img {
width: 100%; height: 100%;
}
.nwlcaf-acard__foot {
padding: var(--wp--preset--spacing--small);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.5;
}
/* ---- Corrections measured against the design ---- */
/* The footer column: the design gives .site-footer__inner an explicit
max-width and auto margins. Without them the footer started at the padding
edge while the rest of the page sat in the 1200 column. */
.nwlcaf-footer__inner {
max-width: 1200px;
margin-inline: auto;
}
/* wp:columns is flex with equal bases; the design's 5fr/6fr split needs to
out-specify .wp-block-columns, hence the doubled selector. */
.wp-block-columns.nwlcaf-wwd__grid,
.wp-block-columns.nwlcaf-donate__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: var(--wp--preset--spacing--large);
}
@media (max-width: 900px) {
.wp-block-columns.nwlcaf-wwd__grid,
.wp-block-columns.nwlcaf-donate__grid { grid-template-columns: 1fr; }
}
/* (0,3,1): the parent's accessibility underline rule is (0,2,1) and was
winning on source order, underlining every news headline. */
.nwlcaf-news__grid .nwlcaf-ncard .wp-block-post-title a { text-decoration: none; }
.nwlcaf-news__grid .nwlcaf-ncard:hover .wp-block-post-title a {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* The action-card standfirst carried the `small` preset, which is a hard 13px
and !important. The design sets 15px. */
.nwlcaf-acard .nwlcaf-acard__foot { font-size: 0.9375rem !important; }
/* The hero and footer columns, stated the way the design states them, rather
than relying on WordPress's alignwide handling — which only applies when the
PARENT layout is constrained, and silently does nothing when it is not. */
.nwlcaf-hero__inner,
.nwlcaf-footer__inner {
max-width: 1200px;
margin-inline: auto;
}
/* The design's footer padding: large block, medium inline. Its absence put the
logo hard against the column edge and pulled every footer column left. */
.nwlcaf-footer__inner {
padding: var(--wp--preset--spacing--large) var(--wp--preset--spacing--medium);
}
/* Type scale: sized by theme.json. The four slugs that collide with core
(small/medium/large/x-large) only reach the page because theme.json sets
typography.defaultFontSizes:false — see CLAUDE.md. */
/* A narrow block (the lede is 62ch) that is a direct child of a constrained
group gets margin-inline:auto !important from core and centres itself, when
what it should do is start at the content column's left edge like every
other element. This offsets it to that edge instead of centring it. */
.nwlcaf-lede {
margin-inline: max(0px, calc((100% - 1200px) / 2)) auto !important;
}
/* Same correction for the ruled heading. It is inline-block, which auto margins
do not centre at all, so it sat flush against the padding edge. */
.wp-block-group.is-layout-constrained > .has-heading-rule,
.wp-block-group.is-layout-constrained > .nwlcaf-lede {
margin-inline: max(0px, calc((100% - 1200px) / 2)) auto !important;
}
/* ------------------------------------------------------------
Header bar and top-level flow margins
------------------------------------------------------------ */
/* The bar is alignwide inside a flow parent, where alignwide does nothing —
so the logo and Donate button ran to the window edges on a wide screen.
Stated the way the design states .site-header__bar. */
.nwlcaf-header__bar {
max-width: 1200px;
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--medium);
min-height: 84px;
}
/* Core's flow layout puts margin-block-start:24px between top-level blocks,
which opened a white strip above the header and another between the header
and the hero. The design's sections butt directly against each other; each
one carries its own padding. Scoped to top-level section blocks so prose
spacing inside post content is untouched. */
.wp-site-blocks > *,
.wp-site-blocks > main > .alignfull,
.wp-site-blocks > main > .entry-content > .alignfull {
margin-block-start: 0;
}
/* ...and the 24px sat above .wp-site-blocks itself, not between its children,
so zeroing the children left the strip in place. */
.wp-site-blocks { margin-block-start: 0; }
/* WordPress prints its own skip link before .wp-site-blocks and hides it with
.screen-reader-text — a class nothing in this theme stack defines, so it
rendered 25px tall and pushed the whole page down. That was the white strip
above the header. Standard visually-hidden treatment, with the link becoming
visible on focus so it still works for keyboard users. */
.screen-reader-text {
border: 0;
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
position: absolute;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: var(--wp--preset--color--base);
clip-path: none;
color: var(--wp--preset--color--primary);
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
width: auto;
left: 5px;
top: 5px;
padding: 15px 23px 14px;
text-decoration: none;
z-index: 100000;
}
/* The header bar and hero inner are not :first-child — the absolutely
positioned teal, stripe and veil divs precede them — so core's flow layout
gave each a margin-block-start of 24px. With no padding or border anywhere up
the chain, the bar's margin collapsed out through the header, the template
part and body, offsetting the entire page by 24px. That was the white strip
above the header. */
.nwlcaf-header__bar,
.nwlcaf-hero__inner {
margin-block-start: 0 !important;
}
/* ============================================================
REVIEW ROUND, 2026-09-03 — Inspectorate comments on the
interior pages. Each block names the page it answers.
============================================================ */
/* The design renders antialiased. Without it every 900 weight reads a step
heavier than the design set on macOS, which was the "bold fonts look
bolder" comment. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Arrows on every button, as the design draws them. Opt out with
.nwlcaf-btn-plain on the button block. */
.wp-block-button:not(.nwlcaf-btn-plain) .wp-block-button__link {
display: inline-flex; align-items: center; gap: 0.6em;
}
.wp-block-button:not(.nwlcaf-btn-plain) .wp-block-button__link::after,
.nwlcaf-stack .wp-block-read-more::after,
.nwlcaf-ccard__more.wp-block-read-more::after,
.nwlcaf-gcard .nwlcaf-gcard__body a.nwlcaf-gcard__more::after,
.nwlcaf-archive .nwlcaf-card__cta::after,
.nwlcaf-pagination .wp-block-query-pagination-next::after {
content: ''; width: 16px; height: 16px; flex: none;
background: currentColor;
-webkit-mask: var(--nwlcaf-arrow) center / 16px 16px no-repeat;
mask: var(--nwlcaf-arrow) center / 16px 16px no-repeat;
}
.nwlcaf-pagination .wp-block-query-pagination-previous::before {
content: ''; width: 16px; height: 16px; flex: none;
background: currentColor; transform: scaleX(-1);
-webkit-mask: var(--nwlcaf-arrow) center / 16px 16px no-repeat;
mask: var(--nwlcaf-arrow) center / 16px 16px no-repeat;
}
.nwlcaf-ccard__more.wp-block-read-more,
.nwlcaf-gcard .nwlcaf-gcard__body a.nwlcaf-gcard__more { display: inline-flex; align-items: center; gap: 0.5em; }
/* Header: the current page's menu item carries the rule, as the design's
[aria-current] does. Core marks the link with aria-current, not always with
current-menu-item. */
.nwlcaf-header .wp-block-navigation a[aria-current="page"] { border-bottom-color: var(--wp--preset--color--primary); }
/* Eyebrow to heading: the design's 12px. Core's flow layout put 24px on the
heading and the eyebrow's own margin collapsed into it. */
.nwlcaf-eyebrow + .wp-block-heading,
.nwlcaf-eyebrow + h1, .nwlcaf-eyebrow + h2, .nwlcaf-eyebrow + h3 { margin-block-start: 0 !important; }
/* What We Do: the numbered pillars. Review #104 (2026-09-14): no boxes — a
yellow rule over each, open two-column grid, larger copy. */
.nwlcaf-pillar-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--preset--spacing--large) var(--wp--preset--spacing--x-large);
margin-top: var(--wp--preset--spacing--large) !important;
}
.nwlcaf-pillar-grid > .nwlcaf-pillar {
margin: 0 !important; padding: var(--wp--preset--spacing--small) 0 0;
border: 0; border-top: 4px solid var(--wp--preset--color--highlight);
display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--wp--preset--spacing--small);
align-items: start;
}
.nwlcaf-pillar-grid .nwlcaf-pillar__n {
margin: 0 !important; font-family: var(--wp--preset--font-family--secondary);
font-size: 1.75rem; font-weight: 900; line-height: 1.1;
color: var(--wp--preset--color--accent-dark);
}
.nwlcaf-pillar-grid .nwlcaf-pillar p { margin: 0 !important; font-size: 1.25rem; line-height: 1.5; }
/* What We Do (review, 2026-09-17): the election cycles follow the pillars;
one section gap between them, not both sections' padding. */
.nwlcaf-mission + .nwlcaf-impact { padding-top: 0 !important; }
.nwlcaf-mission:has(+ .nwlcaf-impact) { padding-bottom: var(--wp--preset--spacing--small) !important; }
.nwlcaf-mission + .nwlcaf-impact > .wp-block-columns { margin-top: 0 !important; }
@media (max-width: 860px) { .nwlcaf-pillar-grid { grid-template-columns: 1fr; } }
/* CTA band: the line under the heading sits 0.6rem below it, not a block gap. */
.nwlcaf-cta-band :is(h2, h3) + p { margin-block-start: 0.6rem !important; }
/* Take Action: Join Us is copy beside a button, 3:2, button at the right edge. */
.nwlcaf-joinus.nwlcaf-joinus {
display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: var(--wp--preset--spacing--large); align-items: center;
}
.nwlcaf-joinus > * { margin: 0 !important; }
.nwlcaf-joinus .wp-block-buttons { justify-self: end; }
@media (max-width: 860px) {
.nwlcaf-joinus.nwlcaf-joinus { grid-template-columns: 1fr; }
.nwlcaf-joinus .wp-block-buttons { justify-self: start; }
}
/* Electoral: the editorial notice. The notice colours are the design's own
(#FFFBE6 / #6B5A00, 7.4:1) and exist nowhere else, so they are literals. */
.nwlcaf-pending {
border-left: 5px solid var(--wp--preset--color--highlight);
background: #FFFBE6; color: #6B5A00;
padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
margin: 0 0 var(--wp--preset--spacing--medium) !important;
font-size: 0.875rem;
}
.nwlcaf-pending strong { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; }
/* The "All guides" ghost control sits on the heading's baseline row. */
.nwlcaf-guides-band .nwlcaf-more-link { margin: 0 !important; }
.nwlcaf-guides-band .nwlcaf-more-link a:not(.wp-element-button) { text-decoration: none; }
.nwlcaf-guides-band .nwlcaf-more-link a:not(.wp-element-button):hover { text-decoration: underline; text-underline-offset: 3px; }
/* Membership: the benefits are a checklist. */
ul.nwlcaf-checklist { list-style: none; margin: var(--wp--preset--spacing--small) 0 0; padding: 0; display: grid; gap: 0.6rem; }
ul.nwlcaf-checklist li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0.75rem; align-items: start; margin: 0; }
ul.nwlcaf-checklist li::before {
content: ''; width: 18px; height: 18px; margin-top: 0.3rem;
background: var(--wp--preset--color--accent-dark);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
/* News archive: the filter bar is one row of compact selects, the active one
filled indigo, and a 240px search with its button attached. */
.nwlcaf-filters .wp-block-categories__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.nwlcaf-filter-select select { font-size: var(--nwlcaf-label-size); padding: 0.5rem 2.25rem 0.5rem 0.8rem; }
.nwlcaf-filter-select select:has(option:checked:not([value="-1"])) {
background-color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.nwlcaf-filters__search .wp-block-search__inside-wrapper { gap: 0; }
.nwlcaf-filters__search .wp-block-search__input {
width: min(240px, 42vw); flex: none; padding: 0.5rem 0.75rem;
border-right: 0; font-size: 0.875rem;
}
.nwlcaf-filters__search .wp-block-search__button { min-width: 44px; border: 2px solid var(--wp--preset--color--primary); }
.nwlcaf-filters__search .wp-block-search__button svg { fill: currentColor; }
.nwlcaf-archive__count { margin: 0 0 var(--wp--preset--spacing--small) !important; font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
/* The grid card: date chip, title, three lines of excerpt, kind at the foot.
No "Read the story" — the card is the link. Left rule transparent until
hover; equal heights across the row. */
.nwlcaf-archive .wp-block-post { display: flex; }
.nwlcaf-archive .wp-block-post > .nwlcaf-card { flex: 1 1 auto; width: 100%; }
.nwlcaf-archive .nwlcaf-card .nwlcaf-card__body { flex: 1; }
.nwlcaf-card .nwlcaf-card__cta { display: none; }
.nwlcaf-card .nwlcaf-card__body .nwlcaf-kicker { order: 99; margin-top: auto; }
.nwlcaf-card.nwlcaf-card { border-left-color: transparent !important; }
.nwlcaf-card.nwlcaf-card:hover { border-left-color: var(--wp--preset--color--highlight) !important; }
.nwlcaf-archive .wp-block-post:not(:first-child) .nwlcaf-card .wp-block-post-excerpt__excerpt,
body.paged .nwlcaf-archive .wp-block-post .nwlcaf-card .wp-block-post-excerpt__excerpt {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nwlcaf-archive .nwlcaf-card .wp-block-post-excerpt { font-size: 0.9375rem; margin: 0; }
/* The lead: kind chip then date, full excerpt, the typed button, and a
picture at the right — the post's own, or the theme's placeholder when the
post has none, so the panel is never half empty. */
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card:not(:has(.nwlcaf-card__media))::after {
content: ''; grid-column: 2; grid-row: 1; align-self: stretch; min-height: 320px;
background: url('assets/images/grid33.png') center / cover no-repeat;
filter: url(#nwlcaf-duotone);
}
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card__body .nwlcaf-kicker { order: -1; margin-top: 0; }
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-date-chip { font-weight: 700; letter-spacing: 0.06em; }
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card__cta {
gap: 0.6em; padding: 0.875rem 1.75rem;
font-size: 0.9375rem; font-weight: 700; letter-spacing: var(--nwlcaf-btn-tracking, 0.08em); text-transform: uppercase;
}
@media (max-width: 1040px) {
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card { grid-template-columns: 1fr; }
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card::after { display: none; }
}
/* Pagination: 44px squares, Next and Previous with their arrows. */
.nwlcaf-pagination { gap: 0.4rem !important; }
.nwlcaf-pagination a,
.nwlcaf-pagination .page-numbers { padding: 0 0.6rem; font-size: 0.9375rem; box-sizing: border-box; }
.nwlcaf-pagination .page-numbers.dots { border: 0; min-width: 24px; color: var(--wp--preset--color--muted); }
.nwlcaf-pagination .wp-block-query-pagination-next,
.nwlcaf-pagination .wp-block-query-pagination-previous { padding: 0 0.9rem; }
/* Single post: the deck leads the article; the kind chip is not a link
visually; share buttons are the design's grey squares; related cards match
the row and never repeat the article. */
body.single-post .wp-block-post-content > p:first-of-type { font-size: 1.25rem; line-height: 1.6; color: var(--wp--preset--color--primary); font-weight: 500; }
.nwlcaf-date-chip a { color: inherit; text-decoration: none; }
.wp-block-social-links.nwlcaf-share.nwlcaf-share .wp-social-link {
width: 38px; height: 38px; border-radius: 0;
background: var(--wp--preset--color--surface) !important; color: var(--wp--preset--color--primary) !important;
display: inline-flex; align-items: center; justify-content: center;
}
.wp-block-social-links.nwlcaf-share.nwlcaf-share .wp-social-link:hover { background: var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--base) !important; }
.wp-block-social-links.nwlcaf-share.nwlcaf-share .wp-social-link svg { width: 16px; height: 16px; fill: currentColor; }
.nwlcaf-related .wp-block-post { display: flex; }
.nwlcaf-related .wp-block-post > .nwlcaf-card { flex: 1 1 auto; width: 100%; }
.nwlcaf-related .nwlcaf-card .nwlcaf-kicker { margin-top: auto; }
.nwlcaf-related .wp-block-query { margin-top: var(--wp--preset--spacing--medium); }
/* Campaign page: narrative at 68ch beside the "Act on this" aside; the hero
copy sits at the left edge of its column, not centred by core's auto
margins. */
.nwlcaf-narrative__grid .wp-block-post-content > * { max-width: 68ch; }
.nwlcaf-sidecta {
position: sticky; top: calc(84px + var(--wp--preset--spacing--small));
border: 1px solid var(--wp--preset--color--outline);
border-top: 6px solid var(--wp--preset--color--tertiary);
padding: var(--wp--preset--spacing--medium);
}
.nwlcaf-sidecta__title { font-size: 1.125rem !important; text-transform: none; letter-spacing: 0; margin: 0 !important; }
.nwlcaf-sidecta > * + * { margin-block-start: 0.75rem !important; }
.nwlcaf-chero__inner > :not(.alignwide):not(.alignfull) { margin-left: 0 !important; }
.nwlcaf-stack .wp-block-read-more { display: inline-flex; align-items: center; gap: 0.6em; }
/* ============================================================
REVIEW ROUND 3, 2026-09-03
============================================================ */
/* Component links never underline on hover (reviewer's rule, site-wide).
Prose links are untouched — they are underlined at rest, not on hover. */
:where(.nwlcaf-ncard, .nwlcaf-card, .nwlcaf-gcard, .nwlcaf-ccard, .nwlcaf-stack__row, .nwlcaf-more-link,
.nwlcaf-breadcrumbs, .nwlcaf-fnav__links, .nwlcaf-footer__legal, .nwlcaf-guide-kicker, .nwlcaf-chero__kicker,
.nwlcaf-qbox, .nwlcaf-sidecard, .nwlcaf-doc-year, .nwlcaf-guides-band, .nwlcaf-news__head, .nwlcaf-filters,
.nwlcaf-acard, .nwlcaf-tile, .nwlcaf-pagination, .nwlcaf-social, .nwlcaf-share, .nwlcaf-header) a:hover,
.wp-block-button__link:hover,
.wp-block-read-more:hover { text-decoration: none !important; }
/* News archive: the count row sits between the lead and the grid, on the
content column; the lead body keeps the design's padding against the
card's own inline small; the lead headline's line-height is the design's. */
.nwlcaf-archive .nwlcaf-archive__count-row.nwlcaf-archive__count-row {
grid-column: 1 / -1; display: block; margin: 0;
font-size: 0.8125rem; color: var(--wp--preset--color--muted);
}
.nwlcaf-archive__count { margin-inline: auto !important; }
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card__body { padding: var(--wp--preset--spacing--large) !important; }
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .wp-block-post-title { line-height: 1.15 !important; }
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card__cta { padding: 0.75rem 1.4rem; font-size: 0.875rem; }
.nwlcaf-filters__legend { color: var(--wp--preset--color--muted) !important; }
.nwlcaf-filters__clear { margin: 0 !important; }
.nwlcaf-filters__clear a {
display: inline-flex; align-items: center; min-height: 40px;
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--wp--preset--color--primary); text-underline-offset: 3px;
}
.nwlcaf-filters__search .wp-block-search__input,
.nwlcaf-filters__search .wp-block-search__button { min-height: 40px; height: 40px; }
.nwlcaf-filters__search .wp-block-search__button { padding: 0; }
.nwlcaf-signup__grid.nwlcaf-signup__grid { gap: var(--wp--preset--spacing--large); }
/* Single post: the file block's name and button sit side by side. */
.wp-block-post-content .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.wp-block-post-content .wp-block-file .wp-block-file__button { margin-left: 0; text-decoration: none; }
/* Campaign page: a set of heading plus paragraphs reads as a set. */
.nwlcaf-narrative .wp-block-post-content > h2 { margin-block-start: var(--wp--preset--spacing--large) !important; }
.nwlcaf-narrative .wp-block-post-content > h3 { margin-block-start: var(--wp--preset--spacing--medium) !important; }
.nwlcaf-narrative .wp-block-post-content > h2 + p,
.nwlcaf-narrative .wp-block-post-content > h3 + p { margin-block-start: 0.5rem !important; }
.nwlcaf-chero__cta { margin-top: var(--wp--preset--spacing--medium) !important; }
/* Issue archive: the issue's photograph, tinted with its colour under the
scrim. Indigo when the term has no key. */
.nwlcaf-issue-hero--tax {
background-color: var(--wp--preset--color--primary);
background-size: cover; background-position: center 30%;
background-blend-mode: multiply;
}
.nwlcaf-issue-hero--tax.is-repro { background-color: var(--nwlcaf-issue); background-image: url('assets/images/issue-repro.jpg'); }
.nwlcaf-issue-hero--tax.is-childcare { background-color: var(--nwlcaf-issue); background-image: url('assets/images/issue-childcare.jpg'); }
.nwlcaf-issue-hero--tax.is-schools { background-color: var(--nwlcaf-issue); background-image: url('assets/images/issue-schools.jpg'); }
.nwlcaf-issue-hero--tax.is-democracy { background-color: var(--nwlcaf-issue); background-image: url('assets/images/issue-democracy.jpg'); }
.nwlcaf-issue-hero--tax .nwlcaf-eyebrow { color: var(--wp--preset--color--highlight); }
.nwlcaf-issue-hero--tax h1 { color: var(--wp--preset--color--base); margin: 0 !important; }
/* Guide page: the Take Action box hugs its content; quotes are the design's
grey block with the yellow rule; box links carry the arrow. */
.wp-block-column:has(> .nwlcaf-qbox) { align-self: flex-start; }
.wp-block-post-content blockquote,
.wp-block-post-content .wp-block-quote {
margin: var(--wp--preset--spacing--medium) 0; padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
border-left: 5px solid var(--wp--preset--color--highlight); background: var(--wp--preset--color--surface);
font-size: 1.125rem; font-style: normal;
}
.wp-block-post-content blockquote p:last-child { margin-bottom: 0; }
.nwlcaf-qbox a { display: inline-flex; align-items: center; gap: 0.4em; }
.nwlcaf-qbox a::after {
content: ''; width: 14px; height: 14px; flex: none; background: currentColor;
-webkit-mask: var(--nwlcaf-arrow) center / 14px 14px no-repeat; mask: var(--nwlcaf-arrow) center / 14px 14px no-repeat;
}
/* Financials: a year per row — the label in a 220px column, the documents
beside it as arrowed links, grey rules between the years. */
.nwlcaf-doc-year.nwlcaf-doc-year {
display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--wp--preset--spacing--medium);
align-items: baseline; border-top: 2px solid var(--wp--preset--color--outline);
padding: var(--wp--preset--spacing--medium) 0; margin-block-start: 0 !important;
}
.nwlcaf-doc-year:last-of-type { border-bottom: 2px solid var(--wp--preset--color--outline); }
.nwlcaf-doc-year > h2 {
font-size: 1.25rem !important; text-transform: none; letter-spacing: 0; margin: 0 !important; padding-bottom: 0;
}
.nwlcaf-doc-year > h2.has-heading-rule::after { display: none; }
.nwlcaf-doc-year .nwlcaf-doc-table { margin: 0 !important; }
.nwlcaf-doc-year .nwlcaf-doc-link {
display: inline-flex; align-items: center; gap: 0.5rem; min-height: 24px;
font-weight: 700; text-decoration: none; color: var(--wp--preset--color--accent-dark);
}
.nwlcaf-doc-year .nwlcaf-doc-link:hover { color: var(--wp--preset--color--primary); }
.nwlcaf-doc-year .nwlcaf-doc-link::after {
content: ''; width: 16px; height: 16px; flex: none; background: currentColor;
-webkit-mask: var(--nwlcaf-arrow) center / 16px 16px no-repeat; mask: var(--nwlcaf-arrow) center / 16px 16px no-repeat;
}
@media (max-width: 700px) { .nwlcaf-doc-year.nwlcaf-doc-year { grid-template-columns: 1fr; gap: 0.5rem; } }
/* Our Impact: no rule above the stat band and less air under the title;
ruled headings, teal state labels, yellow-bar bullets, teal-topped partner
card — all as the design draws them. */
.nwlcaf-statband { border-top: 0; }
.nwlcaf-impact .wp-block-column > h2 { position: relative; display: inline-block; padding-bottom: 0.35em; margin-top: var(--wp--preset--spacing--large); }
.nwlcaf-impact .wp-block-column > h2::after {
content: ''; position: absolute; left: -0.15em; bottom: 0; width: 62%; height: 0.32em;
background: var(--wp--preset--color--highlight); z-index: -1;
}
.nwlcaf-impact .wp-block-column > h3 { margin-top: var(--wp--preset--spacing--medium); text-transform: none; letter-spacing: 0; }
.nwlcaf-impact .wp-block-column > h4 { margin-top: var(--wp--preset--spacing--small); color: var(--wp--preset--color--accent-dark); }
.nwlcaf-impact .wp-block-column > ul { list-style: none; margin: 0 0 var(--wp--preset--spacing--medium); padding: 0; display: grid; gap: var(--wp--preset--spacing--small); }
.nwlcaf-impact .wp-block-column > ul > li { display: grid; grid-template-columns: var(--nwlcaf-bar-sm) 1fr; gap: 0.9rem; align-items: start; margin: 0; }
.nwlcaf-impact .wp-block-column > ul > li::before { content: ''; width: var(--nwlcaf-bar-sm); height: var(--nwlcaf-bar-h); margin-top: 0.7em; background: var(--wp--preset--color--highlight); }
.nwlcaf-impact .nwlcaf-sidecard { border-top: 6px solid var(--wp--preset--color--accent) !important; }
/* Contact: the submit is the site's button, with the arrow, and the footer
sits shorter. */
.gform_wrapper .gform_button {
display: inline-flex; align-items: center; gap: 0.6em;
padding: 0.875rem 1.75rem; border: 2px solid transparent; border-radius: 0;
font-family: inherit; font-size: 0.9375rem; font-weight: 700; letter-spacing: var(--nwlcaf-btn-tracking, 0.08em); text-transform: uppercase;
background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 1.25rem center; padding-right: 3rem;
}
.gform_wrapper .gform_button:hover { background-color: var(--wp--preset--color--primary-dark); }
.nwlcaf-footer__inner { padding-top: var(--wp--preset--spacing--medium) !important; padding-bottom: var(--wp--preset--spacing--medium) !important; }
/* Header search: the magnifier opens the design's full-width search bar
under the header — indigo band, white field, yellow Search button — rather
than a field squeezed into the bar. Core still owns the open/close. */
.nwlcaf-header__search:not(.wp-block-search__searchfield-hidden) { position: static; }
.nwlcaf-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
background: var(--wp--preset--color--primary);
padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
display: flex; gap: 0.5rem; align-items: center; justify-content: center;
}
.nwlcaf-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
flex: 1; width: auto !important; max-width: 900px; min-height: 48px;
border: 2px solid var(--wp--preset--color--base); background: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast); font-size: 1.0625rem; padding: 0.6rem 0.9rem;
}
.nwlcaf-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
margin: 0; min-width: 48px; min-height: 48px;
background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--contrast);
}
.nwlcaf-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button:hover svg { transform: none; }
/* The guide's Take Action box IS the column; it hugs its content instead of
stretching to the overview's height. */
.wp-block-column.nwlcaf-qbox { align-self: flex-start; }
/* (0,3,1) against the parent's prose-link underline. */
.nwlcaf-doc-year .nwlcaf-doc-table a.nwlcaf-doc-link { text-decoration: none; }
/* Header search panel, as the design draws it: the field and a yellow SEARCH
text button on the content column, and a × at the end. The trigger stays
the magnifier; expanded, the same button reads its own label. */
.nwlcaf-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
justify-content: flex-start;
padding-inline: max(var(--wp--preset--spacing--medium), calc((100% - 1200px) / 2));
}
.nwlcaf-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input { max-width: none; }
.nwlcaf-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
display: inline-flex; align-items: center; justify-content: center;
width: auto; height: auto; border-radius: 0; border: 0;
min-height: 48px; padding: 0 1.75rem; margin-right: 0;
font-size: 0.9375rem; font-weight: 700; letter-spacing: var(--nwlcaf-btn-tracking, 0.08em); text-transform: uppercase;
background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--contrast);
}
.nwlcaf-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button svg { display: none; }
.nwlcaf-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button::before { content: "Search"; } /* core relabels the control "Submit Search" once open; the design says Search */
.nwlcaf-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button:hover { background: var(--nwlcaf-highlight-hover); color: var(--wp--preset--color--contrast); }
/* The × takes the magnifier's ringed circle in the header while the panel is
open (review, 2026-09-16). */
.nwlcaf-header__search-close {
display: none; background: none; cursor: pointer; padding: 0; margin: 0;
width: 40px; height: 40px; flex: none; place-items: center; border-radius: 50%;
border: 2px solid var(--wp--preset--color--primary); color: var(--wp--preset--color--primary);
transition: background .2s ease, color .2s ease;
}
.nwlcaf-header__search:not(.wp-block-search__searchfield-hidden) .nwlcaf-header__search-close { display: grid; }
.nwlcaf-header__search-close:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }
/* Core animates the field's width over .3s (its button-only rule, (0,3,0)),
but the panel snaps from absolute back into the bar the instant the hidden
class returns — so the field shrank from 1074px to 0 IN THE HEADER, a white
box flashing beside the magnifier (review, 2026-10-08). The open state sets
width:auto, which never animated anyway; no transition on either leg. */
.nwlcaf-header .nwlcaf-header__search.wp-block-search__button-only .wp-block-search__input { transition: none; }
/* Round 4. */
/* Our Impact: the migrated list items carry their own ,
so that span is the yellow bar; only a list without one gets a ::before.
The stat band butts against the title band and breathes less. */
.nwlcaf-impact .wp-block-column > ul > li { grid-template-columns: var(--nwlcaf-bar-sm) minmax(0, 1fr); }
.nwlcaf-impact .wp-block-column > ul > li > .mark { width: var(--nwlcaf-bar-sm); height: var(--nwlcaf-bar-h); margin-top: 0.7em; background: var(--wp--preset--color--highlight); }
.nwlcaf-impact .wp-block-column > ul > li:has(> .mark)::before { content: none; }
/* (stat band spacing now comes from the block: equal medium padding, large gap above — review 2026-09-09) */
.nwlcaf-impact .wp-block-column > h2:first-child { margin-top: 0; }
/* News lead: one line, the design's small button; the accessible suffix in
the read-more link stays off screen. */
.nwlcaf-archive .nwlcaf-card__cta .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card__cta {
display: inline-flex !important; white-space: nowrap; line-height: 1.2; min-height: 0;
padding: 0.75rem 1.4rem; font-size: 0.875rem;
}
/* Campaign hero: copy on the content column, like the narrative below it. */
.nwlcaf-chero .nwlcaf-chero__inner {
max-width: none; padding-inline: max(var(--wp--preset--spacing--medium), calc((100% - 1200px) / 2)) !important;
}
/* Contact: square, grey-bordered fields and the site's button. Classes only —
never the --gf-* custom properties. */
.gform_wrapper.gform-theme .gfield input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.gform_wrapper.gform-theme .gfield textarea,
.gform_wrapper.gform-theme .gfield select {
border: 2px solid var(--wp--preset--color--outline) !important; border-radius: 0 !important;
background: var(--wp--preset--color--base);
}
.gform_wrapper.gform-theme .gfield input:focus,
.gform_wrapper.gform-theme .gfield textarea:focus,
.gform_wrapper.gform-theme .gfield select:focus { border-color: var(--wp--preset--color--primary) !important; }
.gform_wrapper.gform-theme .gfield_required { color: var(--nwlcaf-error, #A81F0C); }
.gform_wrapper.gform-theme .gform_footer input.gform_button,
.gform_wrapper.gform-theme .gform_footer button.gform_button {
display: inline-flex !important; align-items: center;
min-height: 0 !important; padding: 0.875rem 3rem 0.875rem 1.75rem !important; border: 2px solid transparent !important; border-radius: 0 !important;
font-family: inherit !important; font-size: 0.9375rem !important; font-weight: 700 !important; letter-spacing: var(--nwlcaf-btn-tracking, 0.08em) !important; text-transform: uppercase !important;
background-color: var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--base) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: right 1.25rem center !important;
}
.gform_wrapper.gform-theme .gform_footer input.gform_button:hover { background-color: var(--wp--preset--color--primary-dark) !important; }
/* A page whose content opens with a full-bleed band (Our Impact's stats) sits
flush under the title band; core's flow gap put a white strip between two
indigo blocks. */
.wp-site-blocks > main > .entry-content:has(> .alignfull:first-child) { margin-block-start: 0; }
/* Homepage Instagram band: the head row is the news head; the CTA panel is
the Take Action Join Us panel; the feed grid loses its radii. */
.nwlcaf-instagram__cta.nwlcaf-instagram__cta { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--wp--preset--spacing--large); align-items: center; }
.nwlcaf-instagram__cta > * { margin: 0 !important; }
.nwlcaf-instagram__cta .wp-block-buttons { justify-self: end; }
.nwlcaf-instagram__cta p { max-width: 40ch; }
@media (max-width: 860px) { .nwlcaf-instagram__cta.nwlcaf-instagram__cta { grid-template-columns: 1fr; } .nwlcaf-instagram__cta .wp-block-buttons { justify-self: start; } }
.nwlcaf-instagram__feed { margin-top: var(--wp--preset--spacing--medium) !important; }
/* Round 5. */
.nwlcaf-pending { margin-block: 0 var(--wp--preset--spacing--medium) !important; margin-inline: auto !important; }
.nwlcaf-qbox h2 { margin-bottom: 0.75rem !important; }
.nwlcaf-formcard__note { margin-top: var(--wp--preset--spacing--small) !important; }
/* The electoral notice is a padded box on the wide column: border-box, or the
padding pushes it past 1200 and off the column. */
.nwlcaf-pending { box-sizing: border-box; }
/* The vector logos. */
.nwlcaf-header .nwlcaf-header__logo { margin: 0 !important; }
.nwlcaf-header .nwlcaf-header__logo img { height: 56px; width: auto; display: block; }
/* ============================================================
MOBILE HEADER AND MENU (≤860px) — as the design draws them
The bar holds the logo and a three-bar hamburger at the right
edge. The open menu is a panel that drops under the bar, not a
full-screen overlay: the search field with a GO button first,
the links as a hairlined list, and a full-width Donate last
(cloned in by assets/js/header-search.js). The close control
sits where the hamburger was, so the same spot closes it.
============================================================ */
@media (max-width: 860px) {
.nwlcaf-header__bar.nwlcaf-header__bar {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: center; column-gap: 0.75rem; min-height: 72px;
}
.nwlcaf-header__bar > .wp-block-group { display: contents; }
.nwlcaf-header .nwlcaf-header__logo { order: 1; }
.nwlcaf-header .nwlcaf-header__logo img { height: 44px; }
.nwlcaf-header__bar .nwlcaf-header__donate-wrap { display: none; }
.nwlcaf-header .wp-block-navigation { order: 2; }
/* The hamburger: three bars in the brand's weight. */
.nwlcaf-header .wp-block-navigation__responsive-container-open {
display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
color: var(--wp--preset--color--primary);
}
.nwlcaf-header .wp-block-navigation__responsive-container-open svg { display: none; }
.nwlcaf-header .wp-block-navigation__responsive-container-open::before {
content: ''; width: 24px; height: 18px;
background: linear-gradient(currentColor 0 0) top / 100% 3px no-repeat,
linear-gradient(currentColor 0 0) center / 100% 3px no-repeat,
linear-gradient(currentColor 0 0) bottom / 100% 3px no-repeat;
}
/* The panel drops under the bar. The header wrapper is the sticky, so the
panel is positioned against the header itself. */
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open {
position: absolute; top: 100%; left: 0; right: 0; bottom: auto; height: auto;
/* No overflow here: the close control sits ABOVE the panel, in the bar,
and an overflow on the panel would clip it (#review 2026-09-10). The
scrolling lives on the content below instead. */
overflow: visible;
padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium) var(--wp--preset--spacing--medium);
background: var(--wp--preset--color--primary);
box-shadow: 0 24px 40px rgba(0, 0, 0, 0.25);
}
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { padding: 0; }
/* Core makes the dialog the positioned ancestor; that would offset the close
by the panel's padding. The panel itself is the reference instead, so the
close lands exactly where the hamburger was. */
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { margin: 0 !important; position: static; }
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { position: static; }
/* The close sits in the hamburger's place in the bar above the panel. */
.nwlcaf-header .wp-block-navigation__responsive-container-close {
position: fixed; top: 14px; right: var(--wp--preset--spacing--medium);
width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
color: var(--wp--preset--color--primary); background: transparent;
}
.admin-bar .nwlcaf-header .wp-block-navigation__responsive-container-close { top: 60px; }
.nwlcaf-header .wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; }
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
display: flex; flex-direction: column; padding: 0;
max-height: calc(100vh - 72px - var(--wp--preset--spacing--small) - var(--wp--preset--spacing--medium)); overflow-y: auto;
}
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
display: grid; gap: 0; width: 100%;
}
/* Search first: white field, yellow GO. */
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-search {
order: -1; width: 100%; margin: 0 0 var(--wp--preset--spacing--small) !important;
}
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-search__inside-wrapper { gap: 0; }
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-search__input {
flex: 1; min-height: 40px; border: 2px solid var(--wp--preset--color--base); border-right: 0; border-radius: 0;
background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
font-family: inherit; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; padding: 0.35rem 0.8rem;
}
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-search__input::placeholder { color: var(--wp--preset--color--muted); text-transform: none; letter-spacing: 0; }
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-search__button {
min-width: 64px; min-height: 40px; margin: 0; border: 0; border-radius: 0; padding: 0 0.9rem;
background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--contrast);
font-size: 0.875rem; font-weight: 700; letter-spacing: var(--nwlcaf-btn-tracking, 0.08em); text-transform: uppercase;
}
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-search__button svg { display: none; }
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-search__button::before { content: 'Go'; }
/* The links: the design's list. */
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item + .wp-block-navigation-item {
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
display: flex; align-items: center; min-height: 52px; padding: 0;
color: var(--wp--preset--color--base);
font-size: 1.0625rem; font-weight: 700; letter-spacing: var(--nwlcaf-btn-tracking, 0.08em); text-transform: uppercase;
border-bottom: 0;
}
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a[aria-current="page"] { color: var(--wp--preset--color--highlight); }
/* Donate, full width, last. */
.nwlcaf-menu__foot { margin-top: var(--wp--preset--spacing--small); }
/* Follow on Instagram, under Donate (review, 2026-09-16). */
.nwlcaf-menu__foot .nwlcaf-menu__ig {
display: inline-flex; align-items: center; gap: 0.6rem; margin-top: var(--wp--preset--spacing--small);
color: var(--wp--preset--color--base); font-size: 0.9375rem; text-decoration: none;
/* The panel's link rules (caps, bold) would win here. */
font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important;
}
.nwlcaf-menu__foot .nwlcaf-menu__ig svg { width: 22px; height: 22px; fill: currentColor; }
.nwlcaf-menu__foot .nwlcaf-menu__ig:hover { color: var(--wp--preset--color--highlight); text-decoration: underline; text-underline-offset: 3px; }
.nwlcaf-menu__foot .nwlcaf-header__donate {
display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px;
font-size: 1rem; line-height: 1 !important; padding: 0 1.5rem !important; box-sizing: border-box;
/* The panel's white link colour would win here; dark on yellow reads. */
color: var(--wp--preset--color--contrast) !important;
}
}
@media (max-width: 860px) {
/* The panel positions against the HEADER, not the navigation block, so it
spans the viewport. */
.nwlcaf-header .wp-block-navigation,
.nwlcaf-header .wp-block-navigation__responsive-container-open { position: static; }
.nwlcaf-header { position: relative; }
}
@media (max-width: 860px) {
/* Menu: hairlines run the panel's width; the close control takes the
hamburger's place in the bar while the panel is open. */
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; }
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; display: block; }
.nwlcaf-header .wp-block-navigation__responsive-container-close {
position: absolute; top: -58px; right: var(--wp--preset--spacing--medium); bottom: auto; z-index: 2;
}
.nwlcaf-header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open { visibility: hidden; }
/* Footer: content on the page's own 24px gutter, and the link groups in
two columns as the design keeps them on a phone. */
.nwlcaf-footer .nwlcaf-footer__inner,
.nwlcaf-footer .nwlcaf-footer__legal > * { margin-inline: 0 !important; max-width: none !important; }
.nwlcaf-footer .nwlcaf-footer__legal { padding-inline: 0 !important; }
.nwlcaf-footer .nwlcaf-footer__legal > * { padding-inline: var(--wp--preset--spacing--medium); }
.nwlcaf-fnav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 860px) {
/* The panel itself stays unclipped so the close control can sit in the bar;
the dialog is what scrolls. */
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open { overflow: visible; max-height: none; z-index: 20; }
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { max-height: calc(100vh - 72px); overflow-y: auto; }
.nwlcaf-header .wp-block-navigation__responsive-container-close { z-index: 21; }
/* Footer: the wrapper's gutter, not a second one inside it. */
.nwlcaf-footer.nwlcaf-footer { padding-inline: 0 !important; }
.nwlcaf-footer .nwlcaf-footer__inner { width: 100%; }
}
@media (max-width: 1040px) {
/* News lead on a phone: the picture, or its placeholder, under the copy. */
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card::after { display: block; grid-column: 1; grid-row: 2; min-height: 240px; }
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card__media { grid-column: 1; grid-row: 2; min-height: 240px; }
}
@media (max-width: 860px) {
/* The dialog holds the close control, so it must not clip; the content
list is what scrolls when the panel is taller than the screen. */
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { max-height: none; overflow: visible; }
.nwlcaf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { max-height: calc(100vh - 72px - 2 * var(--wp--preset--spacing--small)); overflow-y: auto; }
}
/* Guides hub chip rows: label, All, then the terms; the current one filled. */
.nwlcaf-chipset { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.nwlcaf-chipset__label {
font-size: var(--nwlcaf-label-size-sm); font-weight: var(--nwlcaf-label-weight);
letter-spacing: var(--nwlcaf-label-tracking); text-transform: uppercase;
color: var(--wp--preset--color--muted); margin-right: 0.35rem; min-width: 3rem;
}
.nwlcaf-chipset ul { display: contents; }
.nwlcaf-chipset .current-cat > a,
.nwlcaf-chipset a[aria-current="page"] {
background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base);
}
/* Contact form: the design's uppercase labels and no required legend. */
.gform_wrapper .gform_required_legend { display: none; }
.gform_wrapper.gform-theme .gfield_label {
font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--wp--preset--color--primary);
}
/* The row label sits inline at the left of its chips, as the design has it. */
.nwlcaf-chipset__label { display: inline-block; vertical-align: top; padding-top: 0.6rem; margin-right: 0.5rem; }
ul.nwlcaf-chipset { display: inline-flex; vertical-align: top; max-width: calc(100% - 4rem); }
.nwlcaf-filters .nwlcaf-chipset__label + ul.nwlcaf-chipset { margin-bottom: 0.5rem; }
/* Each label floats at the left of its own row; the next label clears it. */
.nwlcaf-chipset__label { display: block; float: left; clear: left; width: 3.5rem; padding-top: 0.6rem; margin: 0; }
ul.nwlcaf-chipset { display: flex; max-width: none; margin-left: 3.5rem !important; }
ul.nwlcaf-chipset + .nwlcaf-chipset__label { margin-top: 0.5rem; }
ul.nwlcaf-chipset + .nwlcaf-chipset__label + ul.nwlcaf-chipset { margin-top: 0.5rem !important; }
.nwlcaf-filters::after { content: ''; display: block; clear: both; }
/* News on a phone: the lead's placeholder sits under the copy (the base rule
carries :not(:has()), so the override has to match it), and the search
runs the full width of the bar as the design has it. */
@media (max-width: 1040px) {
body:not(.paged) .nwlcaf-archive .wp-block-post:first-child .nwlcaf-card:not(:has(.nwlcaf-card__media))::after {
display: block; grid-column: 1; grid-row: 2; min-height: 240px; height: auto;
}
}
@media (max-width: 700px) {
.nwlcaf-filters__search { margin-left: 0 !important; width: 100%; }
.nwlcaf-filters__search .wp-block-search__inside-wrapper { display: flex; width: 100%; }
.nwlcaf-filters__search .wp-block-search__input { flex: 1; width: auto; min-width: 0; }
}
/* Campaign hero buttons: the red Take Action darkens on hover; the outline
button is white on the photograph and fills white on hover. */
.nwlcaf-chero__cta .wp-block-button__link.has-tertiary-background-color:hover { background-color: #A81F0C !important; color: var(--wp--preset--color--base) !important; }
.nwlcaf-chero__cta .wp-block-button.is-style-outline .wp-block-button__link {
color: var(--wp--preset--color--base); border: 2px solid var(--wp--preset--color--base); background: transparent;
}
.nwlcaf-chero__cta .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--primary); }
.nwlcaf-chero__cta.wp-block-buttons { gap: 0.75rem; }
/* ------------------------------------------------------------
Review, 2026-09-08 (Jake) — Our Impact, partners, guides filters
------------------------------------------------------------ */
/* #76 Our Impact: standard bullets. The yellow-bar marker stays the site's
device elsewhere; on this page the lists are long and dense, and the bars
read as decoration rather than structure. */
.nwlcaf-impact .wp-block-column > ul {
list-style: disc; padding-left: 1.25rem; display: block;
}
.nwlcaf-impact .wp-block-column > ul > li {
display: list-item; grid-template-columns: none; gap: 0; margin: 0 0 0.5rem;
}
.nwlcaf-impact .wp-block-column > ul > li::before { content: none; }
.nwlcaf-impact .wp-block-column > ul > li > .mark { display: none; }
/* Our Impact's five points (review, 2026-09-16): boxes in a two-column grid,
larger copy, a teal bar down the left of each. */
.nwlcaf-impact .wp-block-column > ul.nwlcaf-points {
list-style: none; padding: 0; margin: var(--wp--preset--spacing--medium) 0 var(--wp--preset--spacing--large);
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--medium);
}
.nwlcaf-impact .wp-block-column > ul.nwlcaf-points > li {
display: block; margin: 0; padding: var(--wp--preset--spacing--medium);
background: var(--wp--preset--color--surface); border-left: 6px solid var(--wp--preset--color--accent);
font-size: 1.25rem; line-height: 1.5; font-weight: 500; color: var(--wp--preset--color--primary);
}
.nwlcaf-impact .wp-block-column > ul.nwlcaf-points > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 860px) { .nwlcaf-impact .wp-block-column > ul.nwlcaf-points { grid-template-columns: 1fr; } }
/* #78/#79 Partners: a logo card per organisation — the logo linked to its
site, the 2022 voter guide it co-published as the download. */
.nwlcaf-partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--small); }
.nwlcaf-partner {
border: 1px solid var(--wp--preset--color--outline);
border-left: 5px solid var(--wp--preset--color--accent);
padding: var(--wp--preset--spacing--medium);
display: flex; flex-direction: column; gap: 0.75rem; margin: 0 !important;
}
.nwlcaf-partner__logo { margin: 0 !important; aspect-ratio: 16 / 7; display: grid; place-items: center; background: var(--wp--preset--color--base); }
.nwlcaf-partner__logo img { max-height: 100%; width: auto; max-width: 80%; object-fit: contain; }
.nwlcaf-partner__name { font-size: var(--nwlcaf-card-title); text-transform: none; letter-spacing: 0; margin: 0 !important; }
.nwlcaf-partner__name a { color: var(--wp--preset--color--primary); text-decoration: none; }
.nwlcaf-partner__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nwlcaf-partner__download { margin-top: auto !important; }
.nwlcaf-partner__download a {
display: inline-flex; align-items: center; gap: 0.5rem; min-height: 24px;
font-weight: 700; color: var(--wp--preset--color--accent-dark); text-decoration: none;
}
.nwlcaf-partner__download a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .nwlcaf-partners { grid-template-columns: 1fr; } }
/* #82 A guide's Downloads: the PDF the page was built from, as a document link. */
.nwlcaf-guide-downloads ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.nwlcaf-guide-downloads a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 24px; font-weight: 700; }
/* #80 Electoral: the statement is a reading column with its four sections as
subheads; the lede takes the page's lede treatment. */
.nwlcaf-statement > * { max-width: 72ch; }
/* Electoral, review #111 (2026-09-14) then 2026-09-16: the four "fighting for"
themes, one row each — the heading on a pale yellow panel at the left, the
copy at the right. A row longer than two paragraphs folds behind Read more
(assets/js/fightfor.js). */
.nwlcaf-fightfor { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--medium); }
.nwlcaf-fightfor > * { margin: 0 !important; }
.nwlcaf-fightfor__item {
display: grid; grid-template-columns: minmax(0, 29%) minmax(0, 1fr); column-gap: 0;
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--outline);
border-top: 6px solid var(--wp--preset--color--accent);
}
.nwlcaf-fightfor__item > h3 {
grid-column: 1; grid-row: 1 / span 20; align-self: stretch;
margin: 0 !important; padding: var(--wp--preset--spacing--small) 1.5rem;
background: #FFFBE6; color: var(--wp--preset--color--primary);
/* Sized so each heading breaks into two lines at the wide width. */
font-size: 1.25rem; line-height: 1.25; text-wrap: balance;
}
.nwlcaf-fightfor__item > p {
grid-column: 2; max-width: none; margin: 0 !important;
padding: 0 1.5rem;
}
.nwlcaf-fightfor__item > p:first-of-type { padding-top: var(--wp--preset--spacing--small); }
.nwlcaf-fightfor__item > p:last-of-type { padding-bottom: var(--wp--preset--spacing--small); }
.nwlcaf-fightfor__item > p + p { margin-top: var(--wp--preset--spacing--small) !important; }
.nwlcaf-fightfor__item.is-collapsible:not(.is-open) > p:nth-of-type(n + 3) { display: none; }
.nwlcaf-fightfor__item.is-collapsible:not(.is-open) > p:nth-of-type(2) { padding-bottom: 0; }
.nwlcaf-fightfor__more {
grid-column: 2; justify-self: start;
margin: 0.5rem 1.5rem 0 !important;
padding: 0 0 var(--wp--preset--spacing--small); background: none; border: 0; cursor: pointer;
font: 700 0.9375rem/1.4 var(--wp--preset--font-family--primary);
color: var(--wp--preset--color--accent-dark); text-decoration: underline; text-underline-offset: 3px;
}
.nwlcaf-fightfor__more { display: inline-flex; align-items: center; gap: 0.5em; }
/* A chevron after the label, pointing down; up once the row is open. */
.nwlcaf-fightfor__more::after {
content: ''; width: 0.5em; height: 0.5em; flex: none; margin-top: -0.25em;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); transition: transform .2s ease;
}
.nwlcaf-fightfor__item.is-open > .nwlcaf-fightfor__more::after { transform: rotate(-135deg); margin-top: 0.25em; }
.nwlcaf-fightfor__more:hover { color: var(--wp--preset--color--primary); }
@media (max-width: 860px) {
.nwlcaf-fightfor__item { grid-template-columns: 1fr; }
.nwlcaf-fightfor__item > h3 { grid-column: 1; grid-row: auto; font-size: 1.25rem; }
.nwlcaf-fightfor__item > p, .nwlcaf-fightfor__more { grid-column: 1; }
}
.nwlcaf-statement > h3 { margin-top: var(--wp--preset--spacing--medium); }
.nwlcaf-statement > .wp-block-buttons { margin-top: var(--wp--preset--spacing--medium); }
.nwlcaf-doc-list { list-style: none; margin: 0 0 var(--wp--preset--spacing--medium) !important; padding: 0; display: grid; gap: 0.5rem; }
.nwlcaf-doc-list a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 24px; font-weight: 700; }
.nwlcaf-voter-guides .has-heading-rule { margin-top: var(--wp--preset--spacing--medium); }
/* ------------------------------------------------------------
Review, 2026-09-09 — campaign document lists, stat band
------------------------------------------------------------ */
/* The stat band at content width: its grid fills the band's own box. */
.nwlcaf-statband > .nwlcaf-statband__grid { max-width: none; }
/* Campaign narrative: the state headings are section labels over short
document lists, not display headings — about half the display size. */
.nwlcaf-narrative .wp-block-post-content > h2 {
font-size: 1.125rem;
letter-spacing: 0.04em;
}
/* A document link gets a PDF glyph in place of the bullet — campaign fact
sheets, guide Downloads, financial statements. */
:root {
--nwlcaf-pdf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M8.5 17v-4h1.6a1.3 1.3 0 0 1 0 2.6H8.5'/%3E%3C/svg%3E");
}
.wp-block-post-content li:has(> a.doc-link),
.nwlcaf-doc-list li,
li:has(> a.nwlcaf-doc-link) {
list-style: none;
display: flex; align-items: center; gap: 0.5rem;
}
.wp-block-post-content ul:has(> li > a.doc-link) { padding-left: 0; }
li > a.doc-link::before,
.nwlcaf-doc-list li > a::before,
li > a.nwlcaf-doc-link::before {
content: '';
width: 18px; height: 18px; flex: none;
background: currentColor;
-webkit-mask: var(--nwlcaf-pdf) center / 18px 18px no-repeat;
mask: var(--nwlcaf-pdf) center / 18px 18px no-repeat;
}
li > a.doc-link,
.nwlcaf-doc-list li > a,
li > a.nwlcaf-doc-link {
display: inline-flex; align-items: center; gap: 0.5rem; min-height: 24px;
font-size: 0.9375rem; font-weight: 500;
}
/* ------------------------------------------------------------
Review, 2026-09-09 (markers #84–#98)
------------------------------------------------------------ */
/* #88 Our Impact lists flow in two columns. */
.nwlcaf-impact .wp-block-column > ul {
columns: 2; column-gap: var(--wp--preset--spacing--large);
}
.nwlcaf-impact .wp-block-column > ul > li { break-inside: avoid; }
@media (max-width: 780px) { .nwlcaf-impact .wp-block-column > ul { columns: 1; } }
/* #89 The four election cycles as cards: grey box, grey border, one row with
a gap, equal height; collapsed to a few lines with a Read more toggle. */
.nwlcaf-impact .wp-block-column > .nwlcaf-cases { max-width: none; }
.nwlcaf-cases {
/* Stacked vertically (review, 2026-09-09), one card per row with a gap. */
display: grid; grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--small);
margin: var(--wp--preset--spacing--large) 0 !important;
}
.nwlcaf-case {
background: var(--wp--preset--color--surface);
border: 1px solid var(--wp--preset--color--outline);
padding: var(--wp--preset--spacing--medium);
display: flex; flex-direction: column; margin: 0 !important;
}
/* Open by default; only a card the script marks collapsible (its body is well
over the collapsed height) folds and shows the toggle. */
.nwlcaf-case { --nwlcaf-case-collapsed: 12rem; }
.nwlcaf-case__body { position: relative; }
.nwlcaf-case.is-collapsible:not(.is-open) .nwlcaf-case__body { max-height: var(--nwlcaf-case-collapsed); overflow: hidden; }
.nwlcaf-case.is-collapsible:not(.is-open) .nwlcaf-case__body::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3rem;
background: linear-gradient(to bottom, transparent, var(--wp--preset--color--surface));
}
.nwlcaf-case__more { display: none; }
.nwlcaf-case.is-collapsible .nwlcaf-case__more { display: inline-flex; }
.nwlcaf-case__body > h2 { font-size: 1.125rem; letter-spacing: 0.02em; margin: 0 0 0.5rem !important; }
.nwlcaf-case__body > h2::after { content: none; }
.nwlcaf-case__body > h3 { font-size: 1rem; text-transform: none; letter-spacing: 0; margin: 1rem 0 0.25rem !important; }
.nwlcaf-case__body > h4 { font-size: 0.9375rem; margin: 0.75rem 0 0.25rem !important; color: var(--wp--preset--color--accent-dark); }
.nwlcaf-case__body > p, .nwlcaf-case__body > ul { font-size: 0.9375rem; }
.nwlcaf-case__body > ul { columns: 1; list-style: disc; padding-left: 1.1rem; }
.nwlcaf-case__more {
margin-top: auto; align-self: flex-start; padding: 0.75rem 0 0;
background: none; border: 0; cursor: pointer;
font: 700 0.875rem/1 var(--wp--preset--font-family--primary);
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--wp--preset--color--accent-dark); min-height: 24px;
}
.nwlcaf-case__more:hover { color: var(--wp--preset--color--primary); text-decoration: underline; text-underline-offset: 3px; }
/* #92 Breadcrumbs in the campaign hero sit on the photograph. */
.nwlcaf-chero .nwlcaf-breadcrumbs, .nwlcaf-chero .nwlcaf-breadcrumbs a { color: var(--wp--preset--color--on-dark-muted); }
.nwlcaf-chero .nwlcaf-breadcrumbs [aria-current] { color: var(--wp--preset--color--base); }
/* #95 A button that jumps down the page points down. */
.nwlcaf-btn-arrow--down .wp-block-button__link::after { transform: rotate(90deg); }
/* #96 States as a grid of bordered boxes, equal height, 4–5 to a row. */
.nwlcaf-narrative .wp-block-post-content > .nwlcaf-states { max-width: none; }
.nwlcaf-states {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--wp--preset--spacing--small); align-items: stretch;
margin: var(--wp--preset--spacing--medium) 0 !important;
}
.nwlcaf-state {
border: 1px solid var(--wp--preset--color--outline);
background: var(--wp--preset--color--surface);
padding: var(--wp--preset--spacing--small); margin: 0 !important;
}
.nwlcaf-state > h2 { font-size: 0.875rem; letter-spacing: 0.06em; margin: 0 0 0.5rem !important; }
.nwlcaf-state > ul { margin: 0 !important; padding: 0; }
.nwlcaf-state li + li { margin-top: 0.35rem; }
/* ------------------------------------------------------------
Candidate comparisons (candidate-guide), 2026-09-09
Rebuilt from the ACF template as blocks: two candidates, a row per
issue with a stance each, the evidence behind it, downloads.
------------------------------------------------------------ */
.nwlcaf-cmp__notice { max-width: 72ch; }
.nwlcaf-cmp__head { margin: var(--wp--preset--spacing--medium) 0 !important; }
.nwlcaf-cmp__who { text-align: center; }
.nwlcaf-cmp__photo { margin: 0 auto 0.75rem; width: 160px; }
.nwlcaf-cmp__photo img {
width: 160px; height: 160px; object-fit: cover; object-position: top;
border-radius: 50%; border: 3px solid var(--wp--preset--color--outline);
background: var(--wp--preset--color--surface);
}
.nwlcaf-cmp__name { margin: 0; text-wrap: balance; }
/* Review #112 (2026-09-14): the candidate's party under the name. */
.nwlcaf-cmp__party {
margin: 0.35rem 0 0 !important; font-size: 0.8125rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted);
}
.nwlcaf-cmp__vs p {
margin: 0; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.nwlcaf-cmp__rows { border-top: 2px solid var(--wp--preset--color--primary); }
.nwlcaf-cmp__row {
margin: 0 !important; gap: var(--wp--preset--spacing--small);
border-bottom: 1px solid var(--wp--preset--color--outline);
}
.nwlcaf-cmp__row > .wp-block-column { padding: 0.8rem 0; }
.nwlcaf-cmp__row p { margin: 0; }
.nwlcaf-cmp__row--head { border-bottom-width: 2px; }
.nwlcaf-cmp__th {
font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.nwlcaf-cmp__cell { text-align: center; }
.nwlcaf-cmp__cell .nwlcaf-cmp__th { color: var(--wp--preset--color--primary); }
.nwlcaf-stance {
display: inline-block; padding: 0.3rem 0.75rem; border-radius: 2rem;
border: 1px solid transparent;
font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
line-height: 1.2;
}
.nwlcaf-stance--champion { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }
.nwlcaf-stance--supports { background: var(--wp--preset--color--accent-light); color: var(--wp--preset--color--accent-dark); }
.nwlcaf-stance--mixed { background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--dark); }
.nwlcaf-stance--opposes { background: color-mix(in srgb, var(--wp--preset--color--tertiary) 12%, white); color: var(--wp--preset--color--tertiary); }
.nwlcaf-stance--unknown { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--muted); border-color: var(--wp--preset--color--outline); }
.nwlcaf-cmp__legend { margin-top: var(--wp--preset--spacing--medium) !important; display: grid; gap: 0.5rem; max-width: 72ch; }
.nwlcaf-cmp__key { margin: 0; font-size: 0.9375rem; color: var(--wp--preset--color--muted); }
.nwlcaf-cmp__key strong { color: var(--wp--preset--color--contrast); }
.nwlcaf-cmp__evidence .nwlcaf-section-head + * { margin-top: 0; }
.nwlcaf-cmp__evidence h3, .nwlcaf-cmp__evidence p, .nwlcaf-cmp__evidence ul, .nwlcaf-cmp__evidence ol { max-width: 72ch; }
.nwlcaf-cmp__ev { margin-top: var(--wp--preset--spacing--medium); font-size: 1.125rem; }
.nwlcaf-cmp__evidence li + li { margin-top: 0.35rem; }
.nwlcaf-cmp__evidence li > ol, .nwlcaf-cmp__evidence li > ul { margin-top: 0.35rem; }
.nwlcaf-cmp__evidence img { max-width: 100%; height: auto; }
.nwlcaf-cmp__disclaimer { padding-top: 0 !important; }
.nwlcaf-cmp__fine { font-size: 0.875rem; color: var(--wp--preset--color--muted); max-width: 72ch; }
@media (max-width: 600px) {
.nwlcaf-cmp__photo, .nwlcaf-cmp__photo img { width: 88px; height: 88px; }
/* The preset size class is !important; the column is 40% of 390px. */
.nwlcaf-cmp__name.has-x-large-font-size { font-size: 1.125rem !important; overflow-wrap: anywhere; }
.nwlcaf-cmp__vs { flex-basis: 3rem !important; }
.nwlcaf-cmp__row { gap: 0.5rem; }
.nwlcaf-stance { font-size: 0.6875rem; padding: 0.25rem 0.5rem; }
}
/* The DNCC 2024 post's calendar glyph, once a Font Awesome . */
.nwlcaf-icon-calendar {
display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The sign-up popup (Launchpad popup manager, lp_popup "Email Sign Up"). */
.lp-popup .nwlcaf-popup__title {
text-transform: none; letter-spacing: 0;
margin: 0 0 var(--wp--preset--spacing--small); font-size: 1.125rem; line-height: 1.4;
color: var(--wp--preset--color--accent-dark);
}
.lp-popup .ngp-form { margin: 0; }
/* Stat band: as many figures as NWLC has (three to start, review 2026-10-06). */
.nwlcaf-statband__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }