/* CSS that theme.json and block styles can't do (README → Conventions). Colors, type and spacing live in theme.json and styles/. */
/* Brand accent bar under the header (gradients are off in theme.json). */
.asm-accent-bar {
height: 3px;
margin-block-start: 0;
background: linear-gradient(
90deg,
var(--wp--preset--color--money-green) 0 60%,
var(--wp--preset--color--light-orange) 60% 75%,
var(--wp--preset--color--burnt-orange) 75% 100%
);
}
/* Header and footer sit flush with the content. */
.wp-site-blocks > .wp-block-template-part { margin-block-start: 0; }
.asm-logo { margin: 0; }
/* Footer: the global link hover (charcoal) is invisible on #111. */
.asm-footer a { color: var(--wp--preset--color--gray-on-dark); text-decoration: none; }
.asm-footer a:hover,
.asm-footer a:focus-visible { color: var(--wp--preset--color--mint); text-decoration: underline; }
.asm-footer a:focus-visible { outline-color: var(--wp--preset--color--green-light); }
/* Footer menus: the theme.json nav-link color (#555) fails on #111 (2.53:1).
No current-page highlight in the footer: money-green on #111 is 4.19:1 at small size. */
.asm-footer .wp-block-navigation-item,
.asm-footer .wp-block-navigation .current-menu-item {
color: var(--wp--preset--color--gray-on-dark);
font-weight: 400;
}
/* Nav anchors inherit color from the (core: color:inherit at 0,3,0 specificity),
so the hover color has to be set on the . */
.asm-footer .wp-block-navigation-item:hover,
.asm-footer .wp-block-navigation-item:focus-within { color: var(--wp--preset--color--mint); }
/* Footer column headings (mockup .ft: small uppercase label). Scoped under .asm-footer
so it outranks the global h2 styles regardless of stylesheet order. */
.asm-footer .asm-footer-heading {
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--gray-on-dark);
}
/* Footer social links: inline-block with vertical padding makes each target at least 24px tall (WCAG 2.5.8). */
.asm-footer-social a { display: inline-block; padding-block: 4px; margin-inline-end: var(--wp--preset--spacing--30); }
/* Footer form errors: Gravity Forms' danger red #c02b0a is about 3.2:1 on #111; #ff8a75 is about 8.2:1.
Focus ring: Gravity Forms' default (money-green at 65%) is about 2.6:1 on #111; green-light is 6.96:1. */
.asm-footer .gform_wrapper {
--gf-color-danger: #ff8a75;
--gf-ctrl-outline-color-focus: var(--wp--preset--color--green-light);
}
/* New-tab warning for screen readers on footer and social section links an admin sets to open in a new tab (D22).
Visually hidden; the alt text after "/" is what assistive tech announces. */
.asm-footer a[target="_blank"]::after,
.asm-social a[target="_blank"]::after {
content: " (opens in a new tab)";
content: " (opens in a new tab)" / " (opens in a new tab)";
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.asm-footer a[target="_blank"],
.asm-social a[target="_blank"] { position: relative; }
/* ── Block style variations (styles/) ── */
/* Per-section colors as custom properties, so the nearest styled ancestor wins when styles nest
(e.g. a card inside a green section). Unstyled areas use the fallbacks in the rules below.
--asm-eyebrow-color (D16): money-green on white, charcoal on mint/off-white, green-light on dark,
white on green and stat cards.
--asm-accent-color: focus rings and the FAQ marker (3:1 non-text). Money-green is 1:1 on green
and 1.09:1 on burnt-orange.
--asm-answer-color: FAQ answer text. */
.is-style-card {
--asm-eyebrow-color: var(--wp--preset--color--money-green);
--asm-accent-color: var(--wp--preset--color--money-green);
--asm-answer-color: var(--wp--preset--color--gray-text);
}
.is-style-section-mint,
.is-style-section-offwhite {
--asm-eyebrow-color: var(--wp--preset--color--charcoal);
--asm-accent-color: var(--wp--preset--color--money-green);
--asm-answer-color: var(--wp--preset--color--gray-text);
}
.is-style-section-dark,
.is-style-section-dark-pattern,
.is-style-stat-charcoal {
--asm-eyebrow-color: var(--wp--preset--color--green-light);
--asm-accent-color: var(--wp--preset--color--green-light);
--asm-answer-color: var(--wp--preset--color--gray-on-dark);
}
.is-style-section-green,
.is-style-section-green-logomark,
.is-style-stat-burnt-orange,
.is-style-stat-green {
--asm-eyebrow-color: var(--wp--preset--color--white);
--asm-accent-color: var(--wp--preset--color--white);
--asm-answer-color: var(--wp--preset--color--white);
}
/* Stat cards keep a white eyebrow, including the charcoal one. Must follow the dark group above. */
.is-style-stat-charcoal { --asm-eyebrow-color: var(--wp--preset--color--white); }
.is-style-eyebrow { color: var(--asm-eyebrow-color, var(--wp--preset--color--money-green)); }
/* Focus rings inside styled blocks. Only the color changes; width, style and offset come from
theme.json. (0,2,0) beats global styles' :root :where(… :focus-visible) (0,1,0) regardless of
load order; the footer's .asm-footer a:focus-visible (0,2,1) still wins there. */
[class*="is-style-"] :focus-visible { outline-color: var(--asm-accent-color, var(--wp--preset--color--money-green)); }
/* Brand pattern and logomark watermark (brand book "Brand Pattern": decorative only).
Drawn on a pseudo-element so the image can be faded with opacity; isolation keeps
z-index -1 above the section background and below its content. */
.is-style-section-dark-pattern,
.is-style-section-green-logomark {
position: relative;
isolation: isolate;
overflow: hidden;
}
.is-style-section-dark-pattern::before,
.is-style-section-green-logomark::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
/* Staggered grid: the same cell twice, the second offset by half a cell. */
.is-style-section-dark-pattern::before {
background-image: url(../images/pattern/asm-pattern-mint.png), url(../images/pattern/asm-pattern-mint.png);
background-size: 360px 200px;
background-position: 0 0, 180px 100px;
opacity: 0.06;
}
/* One large mark at the right edge, bled off the side (mockup: right -20px). */
.is-style-section-green-logomark::before {
background-image: url(../images/pattern/asm-logomark-charcoal.png);
background-repeat: no-repeat;
background-size: auto 120%;
background-position: right -2rem center;
opacity: 0.08;
}
/* Hero eyebrow pill: dot before the label. */
.is-style-eyebrow-pill { display: inline-flex; align-items: center; gap: 0.5em; width: fit-content; }
.is-style-eyebrow-pill::before {
content: "";
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--wp--preset--color--money-green);
}
/* Square bullets with dividers (Who we represent). */
.is-style-square-bullets { list-style: none; }
.is-style-square-bullets > li {
position: relative;
padding-block: 0.625rem;
padding-inline-start: 1.25rem;
border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.is-style-square-bullets > li:last-child { border-bottom: 0; }
.is-style-square-bullets > li::before {
content: "";
position: absolute;
left: 0;
top: calc(0.625rem + 0.45em);
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--wp--preset--color--money-green);
}
/* FAQ: + in a circle at the right, − when open. The summary stays a normal text box (not flex) so
bold, italic or links in a question stay inline; the marker is positioned in the reserved padding.
The alt text after "/" is empty, so screen readers skip the marker. */
.is-style-faq > summary {
position: relative;
display: block;
padding-inline-end: calc(1.5rem + var(--wp--preset--spacing--40));
font-weight: 700;
list-style: none;
}
.is-style-faq > summary::-webkit-details-marker { display: none; }
/* Global styles only style link and button focus. Without a style, summary uses outline-style: auto,
which can ignore outline-color. Longhands only, so the color still comes from the focus rule above. */
.is-style-faq > summary:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; }
.is-style-faq > summary::after {
content: "+";
content: "+" / "";
position: absolute;
top: 50%;
inset-inline-end: 0;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
border: 1.5px solid var(--asm-accent-color, var(--wp--preset--color--money-green));
border-radius: 50%;
color: var(--asm-accent-color, var(--wp--preset--color--money-green));
font-weight: 300;
line-height: 1;
}
.is-style-faq[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.is-style-faq > :not(summary) { color: var(--asm-answer-color, var(--wp--preset--color--gray-text)); }
.is-style-faq > p,
.is-style-faq > .wp-block-list { font-weight: 300; }
/* Category pill base (mint). Per-category colors come from each category's Pill color setting
(inc/category-pills.php). */
.is-style-pill { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }
.is-style-pill .wp-block-post-terms__separator { display: none; }
.is-style-pill a {
display: inline-block;
padding: 0.2em 0.75em;
border-radius: 20px;
background: var(--wp--preset--color--mint);
color: var(--wp--preset--color--charcoal);
}
/* Per-category pill colors, as in the News mockup: a pale tint of the brand color (18% on white)
with darker text in the same hue. Pill-only values, not palette colors. Text is darkened
toward charcoal just enough to pass at small size. Contrast (WCAG 2): light-orange 5.18,
sky 5.27, butter 5.29, purple 5.07, burnt-orange 5.09 (D16, D28). */
.is-style-pill a.asm-pill--light-orange { background: #fceeda; color: #825d28; }
.is-style-pill a.asm-pill--sky { background: #e7f6fd; color: #466a7b; }
.is-style-pill a.asm-pill--butter { background: #fef7e0; color: #756632; }
.is-style-pill a.asm-pill--purple { background: #eadcec; color: #863e96; }
.is-style-pill a.asm-pill--burnt-orange { background: #f6dcd8; color: #a53725; }
/* Email banner form, set through Gravity Forms' own variables (its rules outrank plain
::placeholder and :focus selectors). Measured on the banner:
- Danger red fails on green; white is 4.51:1 or better.
- Placeholder: GF's white at 70% is 4.09:1 on the #1a6b42 input; 85% is 5.21:1.
- Focus ring: GF's white at 65% is 2.83:1 on #218753; solid white is 4.51:1. */
.asm-banner .gform_wrapper {
--gf-color-danger: var(--wp--preset--color--white);
--gf-ctrl-placeholder-color: rgba(255, 255, 255, 0.85);
--gf-ctrl-outline-color-focus: var(--wp--preset--color--white);
}
/* Post cards: clip featured images to the card's rounded corners. The clip would cut off the
image link's focus ring, so that ring is drawn inside the image instead. */
.asm-featured-card,
.asm-post-card { overflow: hidden; }
.asm-featured-card .wp-block-post-featured-image a:focus-visible,
.asm-post-card .wp-block-post-featured-image a:focus-visible { outline-offset: -4px; }
/* Equal-height cards in a row (Noah, 2026-11-04): columns and grid cells already stretch to the
tallest card; the card fills its cell. When cards stack, each is its own row, so nothing changes. */
.wp-block-column > [class*="is-style-stat-"],
.wp-block-column > .is-style-card,
.wp-block-post-template > li > .asm-post-card { height: 100%; box-sizing: border-box; }
/* Last line of a card sits at the bottom, so it lines up across the row:
"Learn more" on priority cards, the date (Home) or date row (News) on post cards. The block
before it (the title on Home cards, the excerpt on News cards) grows to fill the space, so the
normal block gap above the last line is kept on the tallest card. */
.wp-block-column > .is-style-card.is-layout-flex > :nth-last-child(2) { flex-grow: 1; }
.asm-post-card { display: flex; flex-direction: column; }
.asm-post-card > .wp-block-group { flex: 1; display: flex; flex-direction: column; }
.asm-post-card > .wp-block-group > :nth-last-child(2) { flex-grow: 1; }
.asm-card-meta { align-items: baseline; }
/* News category filter: the "All" link plus the Categories block, as pills.
Contrast: #555 on white 7.46:1; white on #218753 4.51:1 (D16). */
.asm-filter .wp-block-categories { display: contents; list-style: none; padding: 0; margin: 0; }
.asm-filter .cat-item { margin: 0; }
.asm-filter-all a,
.asm-filter .cat-item a {
display: inline-block;
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--border);
color: var(--wp--preset--color--gray-text);
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
padding: 0.3em 0.9em;
border-radius: 20px;
text-decoration: none;
}
.asm-filter a[aria-current="page"] {
background: var(--wp--preset--color--money-green);
border-color: var(--wp--preset--color--money-green);
color: var(--wp--preset--color--white);
}
/* Pagination numbers as boxes; the current page is money-green. */
.wp-block-query-pagination .page-numbers {
display: inline-grid;
place-items: center;
min-width: 2rem;
height: 2rem;
border-radius: 6px;
border: 1px solid var(--wp--preset--color--border);
color: var(--wp--preset--color--gray-text);
font-weight: 700;
text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current {
background: var(--wp--preset--color--money-green);
border-color: var(--wp--preset--color--money-green);
color: var(--wp--preset--color--white);
}
/* Core prints the "…" between page numbers as .page-numbers.dots; it gets no box. */
.wp-block-query-pagination .page-numbers.dots { border-color: transparent; }
/* Photos placed in a column fill it, whatever the uploaded file's width (Noah, 2026-11-04).
An image an editor has resized keeps its size. */
.wp-block-column > .wp-block-image.is-style-soft-corners:not(.is-resized) img { width: 100%; }