/*
* Give ("Donate securely") visual refinement pass. Every rule below is
* scoped under body.hcfb-give-experience (functions.php,
* hcfb_is_give_page() || hcfb_is_ways_to_give_page()), so nothing here can
* affect any other template.
*
* /give/ scope revision (2026-09-18, Ryan-directed): this class, and
* therefore this whole stylesheet, is now shared by TWO pages -- /give/
* itself (the intro paragraph, the always-present "Donate securely"
* fallback button -- inc/give-form.php's hcfb_give_render_fallback() --
* the Tribute Giving instruction, and the gap before the shared "Our
* Partners & Affiliations"/footer template part) and the new
* /ways-to-give/ (Impact/Story, Monthly Giving, the Ways to Give card
* grid, and Gift at Work -- moved there from /give/ verbatim, styling
* included, when /give/ was narrowed to a focused donation page). It
* never touches the Blackbaud loader's own auto-opening modal, which is
* entirely vendor-rendered markup this stylesheet has no selectors for,
* nor the shared header/footer/affiliate markup those come from a
* template part this file does not scope into.
*/
body.hcfb-give-experience .hcfb-give-form {
margin-top: var(--wp--preset--spacing--hcfb-sm);
margin-bottom: var(--wp--preset--spacing--hcfb-lg);
}
body.hcfb-give-experience .hcfb-give-form__fallback-note {
margin: 0 0 var(--wp--preset--spacing--hcfb-sm);
color: var(--wp--preset--color--hcfb-navy);
opacity: 0.75;
font-size: 0.9375rem;
}
/*
* Two-column donation area revision (2026-09-19): the form now lives in
* `.hcfb-give-donation-columns__form` (a left-aligned block column, not
* the compact hero's centered text column it briefly sat in between
* 2026-09-18 and this pass) -- `.hcfb-prominent-cta__actions`'s own
* shared base (prominent-sections.css) centers its button by default,
* which is wrong for this left-aligned column, so this restores a
* left-alignment override scoped to the new column specifically (not
* the old hero selector, which no longer contains the form at all).
*/
body.hcfb-give-experience .hcfb-give-donation-columns__form .hcfb-prominent-cta__actions {
justify-content: flex-start;
}
body.hcfb-give-experience .hcfb-give-form__fallback--noscript {
margin-top: var(--wp--preset--spacing--hcfb-sm);
}
/*
* Checkout-simplification pass (2026-09-19, Ryan-directed): "Remove the
* redundant visible 'Donate securely' button... no flash of the fallback
* button while the form loads." The element already carries the plain
* HTML `hidden` attribute server-side (inc/give-form.php) for the
* JS-enabled path -- this rule is defensive belt-and-suspenders only
* (same established convention as this theme's other `[hidden]`-toggled
* components, e.g. assets/css/home.css's own documented "restores native
* [hidden] semantics" rules): nothing else in this file currently sets a
* competing `display` on `.hcfb-give-form__fallback` itself, but an
* explicit rule here means one never silently starts overriding the
* browser's own UA-stylesheet behavior in the future without this file
* visibly needing to account for it.
*/
body.hcfb-give-experience .hcfb-give-form__fallback[hidden] {
display: none;
}
/*
* Checkout-simplification pass (2026-09-19, Ryan-directed): the
* two-column donation area is now `/give/`'s first section (no compact
* banner above it anymore -- see inc/give-sections.php's
* hcfb_give_render_donation_area() for the full "why," not repeated
* here) and now carries the page's own single H1 plus its context
* paragraph, in addition to the form and every other piece it already
* held.
*
* ~58/42 desktop split, form receiving the larger column, via
* `minmax(0, 1.4fr) minmax(0, 1fr)` (1.4 / 2.4 = 58.3%) -- close enough
* to Ryan's stated "approximately 58/42 or 60/40" range that a literal
* percentage isn't more correct, and `minmax(0, ...)` (not bare `1.4fr`)
* is required so the form column's own intrinsic content (Blackbaud's
* embedded form) can never push the grid wider than its container.
*
* Accessible-DOM-order pass (2026-09-19, Ryan-directed) -- see
* inc/give-sections.php's hcfb_give_render_donation_area() docblock for
* the full "why" this looks the way it does (the short version: DOM
* order is now `intro`, `form`, `details` -- matching the required
* accessible reading order -- but CSS Grid's spanning-item track-sizing
* makes it structurally impossible for `intro` to ALSO sit flush against
* `details` in that DOM position without reintroducing the prior pass's
* stretch bug, so `intro`'s DESKTOP appearance is a separate,
* `aria-hidden` presentational echo living inside `details` instead --
* `[hcfb_give_donation_intro_presentation]`, `.intro-display` below).
*
* Desktop grid is `"form details"` (one row, two areas) -- unchanged
* mechanism from the prior pass: a single-row grid has no multi-row
* spanning item to stretch anything, so `align-items: start` alone keeps
* `details` at its own natural height, top-aligned. `.intro` (the real,
* only semantically-meaningful H1+paragraph) is placed in the SAME
* column as `details` (`grid-column: 2; grid-row: 1;` -- explicit, not
* left to auto-placement, which would otherwise create a harmless but
* needless extra implicit row) but visually reduced to zero footprint
* (see its own rule below) -- it still occupies a grid cell, just an
* invisible one overlapping `details`, so it never affects `details`'
* own sizing.
*
* Stacks to one column at the SAME 900px breakpoint the shared
* `.hcfb-feature-media--split` grid already uses (prominent-sections.css)
* -- consistent with every other responsive section on this page family,
* not a new breakpoint. At that width `grid-template-areas` is
* redeclared to Ryan's required visual order: `intro` (now genuinely
* visible -- see its own rule below), form, photo, Donor Services, tax
* statement, Ways to Give link -- and `.hcfb-give-donation-columns__
* details` switches to `display: contents` so its children (`media`,
* `contact`, `tax`, `ways-link` -- `intro-display` is `display: none` at
* this width, see below) can each take their own place in that per-row
* order instead of moving as one block.
*/
body.hcfb-give-experience .hcfb-give-donation-columns__grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
grid-template-areas: "form details";
align-items: start;
column-gap: var(--wp--preset--spacing--hcfb-lg, 2.5rem);
}
body.hcfb-give-experience .hcfb-give-donation-columns__form { grid-area: form; }
body.hcfb-give-experience .hcfb-give-donation-columns__details { grid-area: details; }
body.hcfb-give-experience .hcfb-give-donation-columns__media { grid-area: photo; }
body.hcfb-give-experience .hcfb-give-donation-columns__contact { grid-area: contact; }
body.hcfb-give-experience .hcfb-give-donation-columns__tax { grid-area: tax; }
body.hcfb-give-experience .hcfb-give-donation-columns__ways-link { grid-area: link; }
/*
* The one real `` + paragraph. ALWAYS fully in the accessibility
* tree and document flow at every width -- never `display: none` or
* `visibility: hidden` (both remove an element from the accessibility
* tree entirely, which would defeat the entire point of this pass).
*
* Desktop (min-width: 901px): visually reduced to a single point with
* nothing shown -- the standard "visually hidden, still accessible and
* still in normal document flow" technique (1px box, `overflow: hidden`,
* `clip-path` clipping away 100% of the visible area, negative margin
* that exactly cancels the 1px box so it takes zero layout space) --
* deliberately NOT `position: absolute` (explicitly ruled out this
* pass). Placed in the same grid column as `.details` (`grid-column: 2`)
* so its (now-irrelevant, since it's a 1px box) block position doesn't
* interfere with anything; the grid has only one row on desktop, so no
* `grid-row` is needed. Sighted desktop users see the presentational
* `.intro-display` echo inside `.details` instead (below).
*
* Mobile (max-width: 900px): reset back to a normal, fully visible flex
* column in its own `intro` grid area -- this is the ONLY intro content
* mobile users (sighted or not) ever see; `.intro-display` is `display:
* none` there (below), so there is no risk of it ever showing twice.
*/
body.hcfb-give-experience .hcfb-give-donation-columns__intro {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
@media (min-width: 901px) {
body.hcfb-give-experience .hcfb-give-donation-columns__intro {
grid-column: 2;
grid-row: 1;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
}
/*
* Layout-correction pass (2026-09-19, Ryan-directed), carried forward
* unchanged this pass: `.details`' own vertical rhythm is plain flexbox
* `gap` (~28px, within Ryan's requested 24-32px range, identical at
* every width -- no CSS Grid row-track sizing involved, so it can never
* be re-stretched by the form column's height again). Every individual
* element inside it is `margin: 0` now that `gap` supplies 100% of the
* spacing.
*
* MUST be declared here, BEFORE the @media block below, not after: this
* rule and the mobile `display: contents` override share the exact same
* specificity (both a single class selector under `body.hcfb-give-
* experience`), so when both apply, the cascade falls through to source
* order -- whichever is declared LATER in the file wins. Getting this
* order backwards silently breaks mobile entirely (a real bug caught
* live during the prior pass's own verification).
*/
body.hcfb-give-experience .hcfb-give-donation-columns__details {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
/*
* The presentational, `aria-hidden="true"` desktop-only echo of the H1
* text and context paragraph (never a heading tag -- see
* inc/give-sections.php's `[hcfb_give_donation_intro_presentation]`
* shortcode). Styled identically to the real `.heading`/`.body` below so
* sighted desktop users see no visual difference; internal heading-to-
* copy gap matches `.intro`'s own (0.875rem / ~14px), never unwrapped at
* any width the way `.details` is (it's simply hidden outright on
* mobile instead, since the real `.intro` renders there directly).
*/
body.hcfb-give-experience .hcfb-give-donation-columns__intro-display {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
@media (max-width: 900px) {
body.hcfb-give-experience .hcfb-give-donation-columns__grid {
grid-template-columns: 1fr;
grid-template-areas:
"intro"
"form"
"photo"
"contact"
"tax"
"link";
row-gap: 1.75rem;
}
body.hcfb-give-experience .hcfb-give-donation-columns__intro {
grid-column: auto;
grid-area: intro;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip-path: none;
white-space: normal;
}
body.hcfb-give-experience .hcfb-give-donation-columns__details {
display: contents;
}
body.hcfb-give-experience .hcfb-give-donation-columns__intro-display {
display: none;
}
}
/*
* White-behind-the-form pass (2026-09-19, Ryan-directed): the outer
* `.hcfb-feature-media` section this donation area already sits inside
* (prominent-sections.css) is already white (`--hcfb-surface`, #ffffff)
* -- only this form column's own background was cream, making the form
* read as sitting inside a promotional card rather than a focused
* checkout. Changed to the same white, keeping only the existing subtle
* neutral border and 14px radius for definition -- no shadow, then or
* now.
*/
body.hcfb-give-experience .hcfb-give-donation-columns__form {
background: var(--wp--preset--color--hcfb-surface);
border: 1px solid var(--wp--preset--color--hcfb-border);
border-radius: 14px;
padding: var(--wp--preset--spacing--hcfb-lg, 2.5rem);
}
/*
* Checkout-simplification pass (2026-09-19): this is now the page's real
* H1 (was an H2 before this pass, styled identically -- Ryan asked for
* the semantic level to change, not the visual treatment).
*/
body.hcfb-give-experience .hcfb-give-donation-columns__heading {
color: var(--wp--preset--color--hcfb-navy);
margin: 0;
}
body.hcfb-give-experience .hcfb-give-donation-columns__body {
color: var(--wp--preset--color--hcfb-text);
margin: 0;
}
/*
* Accessible-DOM-order pass (2026-09-19): `.heading-display` is a `
`,
* never a heading tag (see inc/give-sections.php's `[hcfb_give_donation_
* intro_presentation]` shortcode docblock), so it doesn't automatically
* inherit an `
`'s browser-default sizing or theme.json's `elements.
* heading` typography (`fontWeight`/`lineHeight`/`fontFamily`/color) the
* way `.heading` above does for free -- replicated explicitly here so
* the presentational desktop echo is visually indistinguishable from the
* real heading it stands in for. `font-size: 2em` matches the real
* ``'s own browser-default sizing (measured: 36px against this
* page's 18px base -- confirmed unchanged by this pass).
*/
body.hcfb-give-experience .hcfb-give-donation-columns__heading-display {
margin: 0;
color: var(--wp--preset--color--hcfb-navy);
font-family: var(--wp--preset--font-family--hcfb-heading);
font-size: 2em;
font-weight: 700;
line-height: 1.2;
}
body.hcfb-give-experience .hcfb-give-donation-columns__body-display {
margin: 0;
color: var(--wp--preset--color--hcfb-text);
}
/*
* Reuses .hcfb-feature-media__placeholder's own aspect-ratio/object-fit
* rules (prominent-sections.css) via the `--hcfb-feature-aspect` custom
* property set inline at 4/3 (inc/give-sections.php) -- same "no fixed
* height, no distortion, no layout shift" component every other photo
* on this page family already uses, not a new image treatment.
*/
body.hcfb-give-experience .hcfb-give-donation-columns__media {
margin: 0;
border-radius: 14px;
overflow: hidden;
}
/*
* Launch-critical fix (2026-09-29, Ryan-directed): the bound photo
* (help-make-a-gift-parent-child.webp) is a tall 1306x1598 portrait being
* cover-cropped into this column's 4:3 landscape box. Center object-fit
* (the shared .hcfb-feature-media__placeholder img default) crops ~19% off
* both the top and bottom of the scaled image, which cuts across the
* child's forehead/hairline. Both faces sit in the photo's upper half, so
* biasing the crop to the top keeps them fully in frame and only trims the
* lower-body/arm area instead. Scoped to this one column -- the shared
* placeholder class is reused by other, differently-cropped photos
* elsewhere (Impact/Monthly columns) that must not be affected.
*/
body.hcfb-give-experience .hcfb-give-donation-columns__media .hcfb-feature-media__placeholder img {
object-position: center 0%;
}
body.hcfb-give-experience .hcfb-give-donation-columns__contact,
body.hcfb-give-experience .hcfb-give-donation-columns__tax {
color: var(--wp--preset--color--hcfb-text);
font-size: 0.9375rem;
margin: 0;
}
/*
* Checkout-simplification pass (2026-09-19, Ryan-directed): the Donor
* Services phone number -- the sitewide focus-visible outline
* (style.css's global `a:focus-visible` rule) already covers keyboard
* focus; this adds only the requested hover state.
*/
body.hcfb-give-experience .hcfb-give-donation-columns__contact a {
color: var(--wp--preset--color--hcfb-navy);
text-decoration: underline;
}
body.hcfb-give-experience .hcfb-give-donation-columns__contact a:hover {
text-decoration-thickness: 2px;
}
body.hcfb-give-experience .hcfb-give-donation-columns__ways-link {
margin: 0;
font-size: 0.9375rem;
}
body.hcfb-give-experience .hcfb-give-donation-columns__ways-link a {
color: var(--wp--preset--color--hcfb-navy);
text-decoration: underline;
}
/*
* Visual expansion (2026-09-01): the "prominent" Monthly Giving section,
* per direct instruction. Existing HCFB tokens only -- no new hex value,
* gradient, or additional dark band -- same restrained color-mix()
* technique already measured for WCAG contrast on the Volunteer page's
* own color-rhythm pass. Visual-rhythm refinement (2026-09-01): bumped
* 4% -> 6% for a more visibly "light HCFB-green" band per direct
* instruction. Re-measured at this new value: the eyebrow text (the most
* contrast-sensitive element on this background, `hcfb-green-text`) still
* clears WCAG AA at 4.61:1 -- 9%, tried first, was rejected after
* measuring only 4.53:1, too thin a margin over the 4.5:1 floor to trust
* across browsers' own color-mix() rounding.
*/
body.hcfb-give-experience .hcfb-give-monthly {
background: color-mix(in srgb, var(--wp--preset--color--hcfb-green) 6%, var(--wp--preset--color--hcfb-cream));
}
/*
* Visual-rhythm refinement (2026-09-01, Ryan-directed): a plain rounded
* image container in place of the Hero's own offset orange/navy
* `.hcfb-feature-media__frame` accent -- "simple rounded image
* treatment, not the Hero frame." No pseudo-element layers; just a
* clipped rounded rectangle around whatever [hcfb_giving_section_image]
* resolves to (a real photo, or its own already-polished dashed-border
* placeholder state, unaffected either way since this only clips/rounds
* the outer edge).
*/
body.hcfb-give-experience .hcfb-give-monthly__media-frame {
border-radius: 16px;
overflow: hidden;
}
body.hcfb-give-experience .hcfb-give-monthly__media-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/*
* "Make 'Every $1 helps provide 2 meals' a prominent visual statement":
* a standalone callout, not just larger inline text buried in a
* paragraph -- same big-number/small-label pairing already established
* for the navy Impact-band's own stat metrics elsewhere in this theme
* (assets/css/prominent-sections.css's `.hcfb-prominent-band__value`),
* adapted to navy-on-light since THIS band's own background is light
* green, not navy (that shared class's own green-on-navy color would
* fail contrast here -- see its own comment for why it's navy-only).
* Measured: navy (#262760) on this section's own 6%-mix background
* clears 12.1:1, comfortably passing at any size.
*/
body.hcfb-give-experience .hcfb-give-monthly__stat {
margin: 1.25rem 0;
}
body.hcfb-give-experience .hcfb-give-monthly__stat-lead {
margin: 0 0 0.25rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--hcfb-navy);
}
body.hcfb-give-experience .hcfb-give-monthly__stat-value {
margin: 0;
font-size: var(--wp--preset--font-size--xx-large);
font-weight: 800;
color: var(--wp--preset--color--hcfb-navy);
}
/*
* Visual-rhythm refinement (2026-09-01, Ryan-directed): Your Impact
* rebuilt as its own distinct editorial split-band (image one side, navy
* copy panel the other). `padding: 0` overrides the shared
* `.hcfb-feature-media` rule's own vertical padding
* (prominent-sections.css) -- this band fills its own section edge to
* edge vertically; only the horizontal containment changed in the
* desktop-width correction below.
*/
body.hcfb-give-experience .hcfb-feature-media.hcfb-give-impact {
padding: 0;
}
/*
* Desktop-width correction (2026-09-01, Ryan-directed): 55% image / 45%
* navy panel -- image the larger side this time (Monthly Giving's own
* text/CTA column stays the larger side over on that section, an
* intentional difference, not an inconsistency). The grid itself is now
* wrapped in `.hcfb-feature-media__inner` (see the render function), so
* this only ever needs to set the column ratio -- the max-width/centering/
* responsive padding-inline all come from that one shared rule already.
*/
body.hcfb-give-experience .hcfb-give-impact__grid {
display: grid;
grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
}
body.hcfb-give-experience .hcfb-give-impact__media {
position: relative;
min-height: 26rem;
}
body.hcfb-give-experience .hcfb-give-impact__media .hcfb-feature-media__placeholder,
body.hcfb-give-experience .hcfb-give-impact__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
body.hcfb-give-experience .hcfb-give-impact__panel {
background: var(--wp--preset--color--hcfb-navy);
display: flex;
align-items: center;
}
body.hcfb-give-experience .hcfb-give-impact__panel-inner {
max-width: 34rem;
padding: var(--wp--preset--spacing--hcfb-xl, 4rem) var(--wp--preset--spacing--hcfb-lg, 2.5rem);
}
/*
* White text at reduced opacity on navy -- the identical pairing already
* measured on this page's own Secure & Trusted band (10.24:1 at 0.85
* opacity); the heading here runs at a slightly higher 0.92 opacity
* (12+:1) since it carries more visual weight. `hcfb-green-text` (this
* page's eyebrow color everywhere else) is not used here -- it has only
* ever been measured against white/cream, not navy.
*/
body.hcfb-give-experience .hcfb-give-impact__eyebrow {
display: block;
margin: 0 0 1rem;
color: var(--wp--preset--color--hcfb-surface);
opacity: 0.85;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
font-size: var(--wp--preset--font-size--small);
}
body.hcfb-give-experience .hcfb-give-impact__heading {
color: var(--wp--preset--color--hcfb-surface);
opacity: 0.96;
margin: 0 0 0.75rem;
}
body.hcfb-give-experience .hcfb-give-impact__body {
color: var(--wp--preset--color--hcfb-surface);
opacity: 0.85;
margin: 0;
}
@media (max-width: 900px) {
/*
* minmax(0, 1fr), not a bare 1fr (fixed alongside the full-bleed pass
* below, 2026-09-02): a single bare `1fr` track's implicit minimum
* size is `auto` (its content's own min/max-content size), not `0` --
* harmless while this band still sat inside `.hcfb-feature-media__inner`'s
* 82rem cap (irrelevant next to a already-narrow mobile viewport), but
* once that cap is removed below for the full-bleed desktop treatment,
* the same bare `1fr` let the panel's own text content push this one
* track (and so the whole grid) wider than the viewport at mobile
* widths -- confirmed via a real headless-browser scrollWidth check,
* not assumed. `minmax(0, 1fr)` forces the track back down to the
* container's own width, letting its content wrap/shrink normally.
*/
body.hcfb-give-experience .hcfb-give-impact__grid {
grid-template-columns: minmax(0, 1fr);
}
body.hcfb-give-experience .hcfb-give-impact__media {
min-height: 16rem;
}
}
/*
* True full-bleed (visual refinement, 2026-09-02, Ryan-directed): on this
* "prominent experience" page, #hcfb-primary-content and every top-level
* .hcfb-feature-media section are ALREADY released to true 100% viewport
* width by prominent-sections.css's own shared geometry rule (with
* `overflow-x: clip` on #hcfb-primary-content as that same rule's own
* safety net) -- the same mechanism every other full-bleed band on this
* page already relies on. No vw-unit breakout hack is needed here (and
* so none of that technique's well-known scrollbar-width overflow risk),
* only removing the ONE thing still narrowing this particular band: the
* shared `.hcfb-feature-media__inner` wrapper's own 82rem "wide" measure
* (prominent-sections.css). Overridden here, scoped to JUST
* `.hcfb-give-impact` on JUST this page's own body class, so every other
* consumer of that same shared wrapper class -- including this page's
* own Monthly Giving band immediately below -- is completely unaffected.
* The image and navy panel now run edge-to-edge; the panel's own text
* stays constrained to a readable measure by its existing
* `.hcfb-give-impact__panel-inner` rule below (`max-width: 34rem`), whose
* padding already uses this site's normal wide-grid spacing tokens
* (`--hcfb-lg`/`--hcfb-xl`, the same ones `.hcfb-feature-media__inner`
* itself uses), so the copy's own starting edge still reads as aligned
* with the rest of the page's content rhythm even though the colored
* panel behind it now reaches the true viewport edge.
*/
body.hcfb-give-experience .hcfb-give-impact .hcfb-feature-media__inner {
max-width: none;
padding-inline: 0;
}
/*
* Banner centering fix (2026-09-19, Ryan-directed) -- REAL DEAD-CODE BUG
* FOUND AND REMOVED: this rule dated from the original 2026-09-01 split
* hero (photo on one side, intro/form on the other, "roughly 55% copy /
* 45% image, per direct instruction") and was never cleaned up when that
* hero was replaced by the shared compact `hcfb-prominent-hero--compact`
* single-column variant (2026-09-18). Its selector
* (`body.hcfb-give-experience .hcfb-prominent-hero__grid`, specificity
* 0-2-1) actually OUTRANKS `.hcfb-prominent-hero--compact
* .hcfb-prominent-hero__grid`'s own `grid-template-columns: minmax(0,
* 1fr)` (0-2-0, prominent-sections.css) purely because of its extra
* `body` element selector -- confirmed live via computed style
* (`grid-template-columns` was still resolving to two tracks,
* `655.59px 536.41px`, on both /give/ and /ways-to-give/, exactly this
* stale 55/45 ratio, which is why the compact banner's own `justify-
* self`/`margin-inline: auto` centering had no visible effect -- the
* text column was centering correctly within its own undersized first
* track, not the banner's actual full width). Removed entirely, not
* merely disabled -- neither page has a two-column split hero to size
* anymore.
*/
/*
* Banner centering fix (2026-09-19, Ryan-directed): `.hcfb-prominent-
* hero--compact .hcfb-prominent-hero__text` (prominent-sections.css)
* already declares `margin-inline: auto` and `text-align: center`, but a
* single-column CSS Grid item with `justify-items: stretch` (the grid
* default, never overridden for this one-column track) keeps its own
* margin box stretched to the full track width regardless -- auto
* margins then have no extra space left to distribute, so the `max-width:
* 50rem` column rendered flush against the grid's own left edge instead
* of centered (confirmed live: computed `margin-left`/`margin-right`
* both resolved to 0px despite the `auto` declaration). `justify-self:
* center` is the standard, minimal fix for exactly this grid-item-
* centering case. Scoped to body.hcfb-give-experience only, not added to
* the shared `--compact` rule itself -- Leadership/Privacy Policy/
* Accessibility/Policies & Procedures also use that shared component and
* were out of scope for this pass; whether they carry the same latent
* issue is a separate, unasked question this fix deliberately leaves
* untouched.
*/
body.hcfb-give-experience .hcfb-prominent-hero--compact .hcfb-prominent-hero__text {
justify-self: center;
}
/*
* Breadcrumb-in-banner (2026-09-19, Ryan-directed): the breadcrumb
* (`[hcfb_breadcrumbs]`, inc/give-sections.php) now renders as the first
* element inside the compact banner's centered text column, wrapped in
* this scoped class -- every rule below styles ONLY that placement, never
* the shared `.hcfb-breadcrumbs` component itself (style.css), which
* every other page using that same shortcode still relies on completely
* unchanged (its own separator, spacing, and current-page weight are
* untouched).
*/
body.hcfb-give-experience .hcfb-give-banner-breadcrumb {
margin-bottom: var(--wp--preset--spacing--hcfb-sm, 1rem);
}
/* Centers the breadcrumb row itself -- the shared component's own
* is already `display: flex`, so `justify-content: center` centers its
* items as a group without touching that shared rule. */
body.hcfb-give-experience .hcfb-give-banner-breadcrumb .hcfb-breadcrumbs ol {
justify-content: center;
}
/* Restrained typography: smaller than the eyebrow (0.875rem) sitting
* directly below it, so the breadcrumb reads as a quiet wayfinding aid,
* not a competing label. */
body.hcfb-give-experience .hcfb-give-banner-breadcrumb .hcfb-breadcrumbs {
font-size: 0.8125rem;
}
/* No boxed/pill treatment -- a plain text link. The 44px usable touch
* target comes from vertical padding on the link itself (inline-flex +
* align-items so the padding doesn't visually enlarge the text), not
* from oversized type or a background shape; the negative margin cancels
* the padding's effect on surrounding layout so it doesn't visibly
* shift the row. Hover state is a restrained underline (the sitewide
* `:focus-visible` outline in style.css already covers the keyboard-
* focus state -- no separate rule needed here). */
body.hcfb-give-experience .hcfb-give-banner-breadcrumb .hcfb-breadcrumbs a {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-block: -14px;
color: var(--wp--preset--color--hcfb-navy);
text-decoration: none;
}
body.hcfb-give-experience .hcfb-give-banner-breadcrumb .hcfb-breadcrumbs a:hover {
text-decoration: underline;
}
/*
* Secure & Trusted balance correction (2026-09-01, Ryan-directed): copy
* on the left, the existing trust badges on the right -- a page-scoped
* grid on top of the shared `.hcfb-prominent-band__inner` (untouched, so
* Volunteer's own stat band keeps its single-column default). `auto` on
* the second column keeps the badge column only as wide as the two logos
* themselves, matching how they already sit in the footer, rather than
* stretching to fill half the band.
*/
body.hcfb-give-experience .hcfb-give-trust__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--wp--preset--spacing--hcfb-lg, 2.5rem);
}
body.hcfb-give-experience .hcfb-give-trust__marks {
justify-self: end;
}
/*
* Stack cleanly on mobile: copy first, then the badges below it with the
* same breathing room this rule always provided before the two-column
* split (.hcfb-trust-marks-row itself, assets/css/public-shell.css,
* carries no margin of its own by design).
*/
@media (max-width: 768px) {
body.hcfb-give-experience .hcfb-give-trust__grid {
grid-template-columns: 1fr;
}
body.hcfb-give-experience .hcfb-give-trust__marks {
justify-self: start;
margin-top: var(--wp--preset--spacing--hcfb-md, 1.5rem);
}
}
/*
* Visual component refinement (2026-09-01, Ryan-directed): "photo-topped
* card treatment inspired structurally by the Pittsburgh reference" for
* this page's own "More ways to support neighbors" cards only --
* `.hcfb-give-ways-to-give` (inc/give-sections.php) scopes every rule
* below so Volunteer's own opportunity cards and this page's own Gift at
* Work cards (both also `.hcfb-editorial-grid__card`) are unaffected.
*
* White body + no visible border (was the shared cream/bordered default)
* plus the "restrained existing shadow" value already established
* elsewhere in this codebase for exactly that purpose -- the desktop mega
* nav panel's own box-shadow (assets/css/public-shell.css, see that
* rule's own "Restrained shadow, no border" comment) -- reused verbatim,
* not a new arbitrary shadow value.
*/
body.hcfb-give-experience .hcfb-give-ways-to-give .hcfb-editorial-grid__card {
background: var(--wp--preset--color--hcfb-surface);
border: none;
box-shadow: 0 18px 40px rgba(20, 21, 60, 0.16);
}
/* 16:9 in place of the shared component's own 3/2 default -- Volunteer's
* own usage of `.hcfb-editorial-grid__card-media` is untouched since this
* rule only matches inside this page's own Ways to Give section. */
body.hcfb-give-experience .hcfb-give-ways-to-give .hcfb-editorial-grid__card-media {
aspect-ratio: 16 / 9;
}
/*
* Orange pill CTA in place of the shared grid's default navy text-link
* treatment -- same pill shape/padding/weight as
* .hcfb-prominent-hero__cta--primary above, and the same "navy text on
* orange (5.70:1) -- never white on orange" pairing already documented
* there, not a new contrast decision.
*/
body.hcfb-give-experience .hcfb-give-ways-to-give .hcfb-editorial-grid__card-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 999px;
padding: 0.75rem 1.5rem;
background: var(--wp--preset--color--hcfb-orange);
color: var(--wp--preset--color--hcfb-navy);
font-weight: 700;
text-decoration: none;
/* Without this, the flex column's default align-items:stretch would
* blockify+stretch this anchor to the card's full width -- invisible
* on the old plain text link, but would misshape this new pill. */
align-self: flex-start;
}
body.hcfb-give-experience .hcfb-give-ways-to-give .hcfb-editorial-grid__card-link:hover,
body.hcfb-give-experience .hcfb-give-ways-to-give .hcfb-editorial-grid__card-link:focus-visible {
background: var(--wp--preset--color--hcfb-navy);
color: var(--wp--preset--color--hcfb-surface);
text-decoration: none;
}
/*
* Visual refinement (2026-09-02, Ryan-directed): "Gift at Work" cards
* rebuilt so the computed meal RESULT is the dominant visual, not the
* gift amount -- larger custom icon medallions (inc/give-sections.php's
* hcfb_give_render_meal_plate_icon_svg()/_grocery_bag_/_pantry_box_, one
* per card) plus a big-number treatment for the meal count, the same
* big-number/small-label pairing already established for this page's own
* Monthly Giving stat callout above. Scoped to `.hcfb-gift-impact-card`
* only, so Volunteer's own opportunity cards and this page's own Ways to
* Give cards -- both also plain `.hcfb-editorial-grid__card` -- are
* unaffected, and the shared component itself (prominent-sections.css)
* is untouched; each card still also carries the shared
* `.hcfb-editorial-grid__card-icon--{orange,green,navy}` modifier for its
* base circle color/contrast pairing, only resized below.
*/
body.hcfb-give-experience .hcfb-gift-impact-card {
position: relative;
padding-top: 2rem;
border-top: 4px solid transparent;
}
body.hcfb-give-experience .hcfb-gift-impact-card--orange {
border-top-color: var(--wp--preset--color--hcfb-orange);
background: color-mix(in srgb, var(--wp--preset--color--hcfb-orange) 6%, var(--wp--preset--color--hcfb-surface));
}
body.hcfb-give-experience .hcfb-gift-impact-card--green {
border-top-color: var(--wp--preset--color--hcfb-green);
background: color-mix(in srgb, var(--wp--preset--color--hcfb-green) 6%, var(--wp--preset--color--hcfb-surface));
}
body.hcfb-give-experience .hcfb-gift-impact-card--navy {
border-top-color: var(--wp--preset--color--hcfb-navy);
background: color-mix(in srgb, var(--wp--preset--color--hcfb-navy) 5%, var(--wp--preset--color--hcfb-surface));
}
/*
* ~68px medallion in place of the shared component's own 3rem (48px)
* default; icon itself sized up to match. Contrast pairing (navy on the
* two lighter tokens, surface on navy) is inherited unchanged from the
* shared `.hcfb-editorial-grid__card-icon--*` modifiers already applied
* alongside this class in the markup -- only size changes here.
*/
body.hcfb-give-experience .hcfb-gift-impact-card__icon {
width: 4.25rem;
height: 4.25rem;
margin-bottom: 1.25rem;
}
body.hcfb-give-experience .hcfb-gift-impact-card__icon svg {
width: 2rem;
height: 2rem;
}
body.hcfb-give-experience .hcfb-gift-impact-card__amount {
margin: 0 0 0.375rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--hcfb-navy);
opacity: 0.75;
}
/* The dominant element per card -- same xx-large/800-weight big-number
* treatment as `.hcfb-give-monthly__stat-value` above, substantially
* larger than the de-emphasized `$10`/`$25`/`$50` lead-in above it. */
body.hcfb-give-experience .hcfb-gift-impact-card__meals {
margin: 0 0 0.5rem;
font-size: var(--wp--preset--font-size--xx-large);
font-weight: 800;
line-height: 1.1;
color: var(--wp--preset--color--hcfb-navy);
}
body.hcfb-give-experience .hcfb-gift-impact-card__caption {
margin: 0;
line-height: 1.6;
color: var(--wp--preset--color--hcfb-navy);
opacity: 0.8;
}