/* * About / Impact visual foundation. Every rule in this file is scoped * under body.hcfb-about-impact-experience (added in functions.php only * when templates/template-about-impact.html is the active page template * -- see hcfb_is_about_impact_template() there), so nothing here can * affect the homepage, Partner With Us, or any other template. Enqueued * only on that same template, after hcfb-public-shell and * hcfb-prominent-sections (functions.php dependency array), so this * file's rules always win over those shared files' own width rules for * this one template -- same technique as assets/css/partner-experience.css. * * This page reuses the shared "prominent page" primitives it still needs * (hcfb-prominent-hero, hcfb-prominent-band, hcfb-editorial-grid-section, * hcfb-prominent-cta -- see docs/PROMINENT_PAGE_COMPONENTS.md) plus four * bespoke section shapes no shared primitive covers (hcfb-about-who-we-are, * hcfb-about-neighbors, hcfb-about-region, hcfb-about-history). * * Visual-refinement pass: the "Who We Are" and "Neighbors We Serve" * sections previously reused the shared hcfb-feature-media primitive * (--split and --full-width respectively) -- both are now bespoke, so * this file no longer references hcfb-feature-media at all except for * the one shared class (.hcfb-feature-media__frame, unscoped in * prominent-sections.css) the History section's real image still * deliberately reuses for its accent-frame technique. * * Prominent-system consolidation pass: this page's own full-bleed page- * shell release (the #hcfb-primary-content specificity fix, the * wp-block-post-content width release, the blockGap margin-block-start * zeroing, and the footer margin-block-start zeroing -- all four * originally developed and proven HERE, one visual-refinement pass at a * time), its per-section full-bleed width release, its four bespoke * __inner containers' wide-measure geometry, and its eyebrow color are * now all owned by assets/css/prominent-sections.css, keyed on the shared * `hcfb-prominent-experience` body class instead of this page's own * `hcfb-about-impact-experience` -- see that file's own top comment for * why this is a CSS-only consolidation (no markup/class-name change) and * its "PROMINENT PAGE CONTEXT" section for the full per-rule rationale * that used to live here. What remains below is genuine About-only * identity: bespoke section shapes, colors, icons, and copy-adjacent * structure no other prominent page shares. * * Color usage follows docs/COLOR_USAGE_RULES.md: navy text on orange * (5.70:1) for primary actions, never white text on orange. */ body.hcfb-about-impact-experience .hcfb-prominent-hero, body.hcfb-about-impact-experience .hcfb-prominent-hero *, body.hcfb-about-impact-experience .hcfb-about-who-we-are, body.hcfb-about-impact-experience .hcfb-about-who-we-are *, body.hcfb-about-impact-experience .hcfb-prominent-band, body.hcfb-about-impact-experience .hcfb-prominent-band *, body.hcfb-about-impact-experience .hcfb-about-neighbors, body.hcfb-about-impact-experience .hcfb-about-neighbors *, body.hcfb-about-impact-experience .hcfb-about-region, body.hcfb-about-impact-experience .hcfb-about-region *, body.hcfb-about-impact-experience .hcfb-about-history, body.hcfb-about-impact-experience .hcfb-about-history *, body.hcfb-about-impact-experience .hcfb-editorial-grid-section, body.hcfb-about-impact-experience .hcfb-editorial-grid-section *, body.hcfb-about-impact-experience .hcfb-prominent-cta, body.hcfb-about-impact-experience .hcfb-prominent-cta * { box-sizing: border-box; } /* ------------------------------------------------------------------ */ /* Visual-refinement pass 8: a small, restrained icon above each */ /* impact-band metric. */ /* */ /* Pass 9: grew from 44px (14%-opacity tint, "too small and visually */ /* insignificant") to a 64px/56px solid orange circular badge with a */ /* navy glyph. */ /* */ /* Pass 10 (staff review): the circular badge itself is now removed -- */ /* the orange icons (two of them the real supplied meals.png/produce.png */ /* files, one a new first-party solid-fill glyph -- see */ /* hcfb_about_impact_metric_icons() in inc/about-impact-sections.php) */ /* sit directly against the navy band, sized 60px desktop / 48px mobile */ /* (both within this pass's requested 52-64px / 44-52px ranges). All */ /* three render at an identical box size regardless of whether the */ /* markup is an inline or an , so apparent weight stays */ /* consistent across the row. Scoped to this template only -- the */ /* shared, unscoped prominent-sections.css and its own starter pattern */ /* are untouched. Hierarchy remains icon -> large lime-green number */ /* (still dominant) -> white label. */ /* ------------------------------------------------------------------ */ /* * Visual-refinement pass 11 (staff review): the icon *elements* were * already ~60px, but the visible artwork inside meals.png/produce.png * was only ~43% of that (see inc/about-impact-sections.php's own * docblock -- measured with Pillow, not guessed) -- fixed at the source * by trimming this theme's own copies of those two files, not by * inflating the display box further. Sized here by HEIGHT only (auto * width) so each icon's real aspect ratio is preserved without * distortion, and normalized to the SAME height across all three -- * now that all three source assets are tightly cropped to their own * visible bounds (near-zero padding), one shared height genuinely * produces comparable apparent weight, unlike before. Icon-to-number * gap tightened from 16px/12px to 10px/8px so the icon, number, and * label read as one cohesive unit; the number's own existing 0.35rem * bottom margin (prominent-sections.css, unscoped/shared, unchanged) * already keeps the number-to-label gap tight. */ body.hcfb-about-impact-experience .hcfb-prominent-band__icon { display: inline-flex; align-items: flex-end; justify-content: center; height: 3.25rem; margin-bottom: 0.625rem; } body.hcfb-about-impact-experience .hcfb-prominent-band__icon svg, body.hcfb-about-impact-experience .hcfb-prominent-band__icon img { display: block; width: auto; height: 100%; } body.hcfb-about-impact-experience .hcfb-prominent-band__icon svg { color: var(--wp--preset--color--hcfb-orange); } @media (max-width: 480px) { body.hcfb-about-impact-experience .hcfb-prominent-band__icon { height: 2.75rem; margin-bottom: 0.5rem; } } /* ------------------------------------------------------------------ */ /* Section rhythm: hero cream / who-we-are white / impact navy / */ /* neighbors cream / region white / story cream / what-we-do white / */ /* closing CTA navy -- no two adjacent sections share a background. */ /* hcfb-prominent-hero, hcfb-prominent-band, hcfb-prominent-cta, and */ /* hcfb-editorial-grid-section already default to cream/navy/navy/white */ /* respectively in the shared, unscoped prominent-sections.css, so only */ /* the sections that need a DIFFERENT background than that shared */ /* default are set here. */ /* ------------------------------------------------------------------ */ body.hcfb-about-impact-experience .hcfb-about-who-we-are { background: var(--wp--preset--color--hcfb-surface); padding: var(--wp--preset--spacing--hcfb-xl) 0; } body.hcfb-about-impact-experience .hcfb-about-neighbors { background: var(--wp--preset--color--hcfb-cream); padding: var(--wp--preset--spacing--hcfb-xl) 0; } body.hcfb-about-impact-experience .hcfb-about-region { background: var(--wp--preset--color--hcfb-surface); padding: var(--wp--preset--spacing--hcfb-xl) 0; } body.hcfb-about-impact-experience .hcfb-about-history { background: var(--wp--preset--color--hcfb-cream); padding: var(--wp--preset--spacing--hcfb-xl) 0; } /* ------------------------------------------------------------------ */ /* Hero -- text-only fallback (no photo bound). About page photo cleanup */ /* (Ryan-directed, 2026-09-23): `[hcfb_about_section_image key='hero']` */ /* (inc/about-impact-sections.php) renders NOTHING when no photo is */ /* bound in HCFB Website Settings -- no `.hcfb-prominent-hero__media` */ /* element at all in that case. This file already loads after the */ /* shared, unscoped prominent-sections.css (functions.php dependency */ /* order, see this file's own top docblock), so it can safely override */ /* that shared component's grid ONLY on this page, without affecting */ /* Volunteer/Give Food/any other page that also uses the shared hero. */ /* Collapses to the same centered single-column measure (44rem, matching */ /* the already-approved `.hcfb-prominent-hero--compact` variant's own */ /* 50rem-ish column) used on Give/Ways-to-Give/Privacy/Leadership when */ /* those pages have no split hero at all -- same `:has()` progressive- */ /* enhancement convention as the Who We Are/Neighbors rules below. */ /* ------------------------------------------------------------------ */ @supports selector(:has(*)) { body.hcfb-about-impact-experience .hcfb-prominent-hero__grid:not(:has(.hcfb-prominent-hero__media)) { grid-template-columns: minmax(0, 1fr); } body.hcfb-about-impact-experience .hcfb-prominent-hero__grid:not(:has(.hcfb-prominent-hero__media)) .hcfb-prominent-hero__text { max-width: 44rem; margin-inline: auto; text-align: center; } /* * Same real bug as prominent-sections.css's own copy of this pattern * (2026-09-30, Ryan-directed): centering `.text` itself isn't enough * when the heading (`max-width: 21ch`) and intro (`max-width: 34rem`) * -- both from the shared base rule -- are each narrower than that * now-centered container; without their own margin-inline: auto, each * stays flush against `.text`'s own left edge instead of centered * within it. */ body.hcfb-about-impact-experience .hcfb-prominent-hero__grid:not(:has(.hcfb-prominent-hero__media)) .hcfb-prominent-hero__heading, body.hcfb-about-impact-experience .hcfb-prominent-hero__grid:not(:has(.hcfb-prominent-hero__media)) .hcfb-prominent-hero__intro { margin-inline: auto; } body.hcfb-about-impact-experience .hcfb-prominent-hero__grid:not(:has(.hcfb-prominent-hero__media)) .hcfb-prominent-hero__actions { justify-content: center; } } /* ------------------------------------------------------------------ */ /* Bespoke section: Who We Are -- image-left/copy-right split, plain */ /* dashed border only (no color accent, no offset frame) -- this is the */ /* page's smaller, quieter supporting visual, deliberately de-emphasized */ /* relative to the hero and Neighbors sections' full ~50% image columns. */ /* ------------------------------------------------------------------ */ /* .hcfb-about-who-we-are__inner's wide-measure geometry now lives in */ /* assets/css/prominent-sections.css's canonical inner-container rule. */ /* * Visual-refinement pass 4 (staff review): inverted from the original * 60/40 image-heavy split to a 40/60 text-heavy split -- this section * must read as quieter/secondary next to the hero and Neighbors sections * (both keep a full ~50% image column), not compete with them. */ body.hcfb-about-impact-experience .hcfb-about-who-we-are__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: var(--wp--preset--spacing--hcfb-lg, 2.5rem); } body.hcfb-about-impact-experience .hcfb-about-who-we-are__media { position: relative; } /* * About page photo cleanup (Ryan-directed, 2026-09-23): the dashed-border * placeholder panel, its label, and its collapsed staff caption * (`.hcfb-about-who-we-are__placeholder`/`__label`/`__label-detail`/ * `__caption`) are removed -- `[hcfb_about_section_image key='who-we-are']` * (inc/about-impact-sections.php) now renders either a real photo through * this one class below, or nothing at all (no `.hcfb-about-who-we-are__media` * element renders in that case), so there is no placeholder state left to * style. Same 4:3 aspect ratio and rounded-corner treatment the * placeholder box used to have, so a bound photo crops exactly as * previously documented/approved. */ body.hcfb-about-impact-experience .hcfb-about-who-we-are__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; } /* * Text-only fallback (no photo bound): collapse to one centered column * rather than leaving an empty second grid track. Progressive * enhancement via `:has()` -- same `@supports` guard convention already * used elsewhere in this theme (see assets/css/finance-experience.css, * assets/css/our-impact-experience.css). Without `:has()` support, the * grid simply keeps its normal two-column template with nothing in the * second track -- an acceptable, rare-browser-only degradation, never * the common case. */ @supports selector(:has(*)) { body.hcfb-about-impact-experience .hcfb-about-who-we-are__grid:not(:has(.hcfb-about-who-we-are__media)) { grid-template-columns: minmax(0, 1fr); } body.hcfb-about-impact-experience .hcfb-about-who-we-are__grid:not(:has(.hcfb-about-who-we-are__media)) .hcfb-about-who-we-are__text { max-width: 44rem; margin-inline: auto; text-align: center; } body.hcfb-about-impact-experience .hcfb-about-who-we-are__grid:not(:has(.hcfb-about-who-we-are__media)) .hcfb-about-who-we-are__body { max-width: none; margin-inline: auto; } } /* .hcfb-about-who-we-are__eyebrow's shared, accessible color treatment */ /* now lives in assets/css/prominent-sections.css's eyebrow rule. */ body.hcfb-about-impact-experience .hcfb-about-who-we-are__heading { color: var(--wp--preset--color--hcfb-navy); margin: 0 0 0.75rem; } body.hcfb-about-impact-experience .hcfb-about-who-we-are__body { max-width: 32rem; margin: 0 0 1rem; } @media (max-width: 900px) { body.hcfb-about-impact-experience .hcfb-about-who-we-are__grid, body.hcfb-about-impact-experience .hcfb-about-neighbors__grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ */ /* Bespoke section: Neighbors We Serve -- one of this page's three major */ /* photographic moments (see the docblock on */ /* hcfb_about_render_visual_story() in inc/about-impact-sections.php). */ /* */ /* Visual-refinement pass 4 (staff review): rebuilt from a standalone */ /* full-width 16:9 image block ("a huge photograph with no immediate */ /* functional context") into a side-by-side editorial split -- narrative */ /* text LEFT, photograph RIGHT, at an even 50/50 width -- so the photo */ /* supports the section instead of becoming the entire section. Mirrors */ /* Who We Are's split shape (text/media reversed, for compositional */ /* variety) but keeps its own full ~50% image column, deliberately */ /* larger/more prominent than Who We Are's now-minority image share. */ /* ------------------------------------------------------------------ */ /* .hcfb-about-neighbors__inner's wide-measure geometry now lives in */ /* assets/css/prominent-sections.css's canonical inner-container rule. */ body.hcfb-about-impact-experience .hcfb-about-neighbors__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--wp--preset--spacing--hcfb-lg, 2.5rem); } /* .hcfb-about-neighbors__eyebrow's shared, accessible color treatment */ /* now lives in assets/css/prominent-sections.css's eyebrow rule. */ body.hcfb-about-impact-experience .hcfb-about-neighbors__heading { color: var(--wp--preset--color--hcfb-navy); margin: 0 0 0.75rem; } body.hcfb-about-impact-experience .hcfb-about-neighbors__body { max-width: 32rem; margin: 0; } body.hcfb-about-impact-experience .hcfb-about-neighbors__media { position: relative; } /* * About page photo cleanup (Ryan-directed, 2026-09-23): the gradient * placeholder panel, its decorative glyph, label, and collapsed staff * caption are removed -- `[hcfb_about_section_image key='neighbors']` * (inc/about-impact-sections.php) now renders either a real photo through * this one class below, or nothing at all. Same 3:2 aspect ratio and * rounded-corner treatment the placeholder box used to have. */ body.hcfb-about-impact-experience .hcfb-about-neighbors__photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; } /* Text-only fallback (no photo bound) -- same convention as Who We Are above. */ @supports selector(:has(*)) { body.hcfb-about-impact-experience .hcfb-about-neighbors__grid:not(:has(.hcfb-about-neighbors__media)) { grid-template-columns: minmax(0, 1fr); } body.hcfb-about-impact-experience .hcfb-about-neighbors__grid:not(:has(.hcfb-about-neighbors__media)) .hcfb-about-neighbors__text { max-width: 44rem; margin-inline: auto; text-align: center; } body.hcfb-about-impact-experience .hcfb-about-neighbors__grid:not(:has(.hcfb-about-neighbors__media)) .hcfb-about-neighbors__body { max-width: none; margin-inline: auto; } } /* ------------------------------------------------------------------ */ /* Bespoke section: Our Region -- text column + compact service-area */ /* visual placeholder (five verified county names, no invented map */ /* geometry). Gives this previously text-only section real visual */ /* weight without recreating the full interactive Food Map. */ /* ------------------------------------------------------------------ */ /* .hcfb-about-region__inner's wide-measure geometry now lives in */ /* assets/css/prominent-sections.css's canonical inner-container rule. */ body.hcfb-about-impact-experience .hcfb-about-region__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: var(--wp--preset--spacing--hcfb-lg, 2.5rem); } body.hcfb-about-impact-experience .hcfb-about-region__heading { color: var(--wp--preset--color--hcfb-navy); margin: 0 0 1rem; } body.hcfb-about-impact-experience .hcfb-about-region__body { color: var(--wp--preset--color--hcfb-text); margin: 0 0 1rem; } body.hcfb-about-impact-experience .hcfb-about-region__actions { margin-top: 0.5rem; } /* * Visual-refinement pass 7 (staff review): was a dashed-border "map * placeholder" box; now an intentional-feeling panel (solid border, no * dashes) holding the real static service-area SVG (or, if the Food Map * plugin is unavailable, the honest abstract five-tile fallback) -- * see the `[hcfb_about_service_area_map]` shortcode registered in * inc/about-impact-sections.php for exactly which one renders and why. */ /* * Visual fix (2026-09-30, Ryan-directed): the map is this panel's whole * reason to exist, but `.hcfb-about-region__map-svg`'s own `max-height: * 15rem` (240px) capped it far below what this frame's `aspect-ratio: * 1/1` actually made available (roughly 480-550px at typical desktop * widths) -- `justify-content: center` then centered that small map * inside the leftover space, reading as mostly empty cream padding above * and below it. Removing the cap and letting the SVG flex-grow to fill * the frame (after the label's own height) makes the map the panel's * dominant, focused element instead -- padding trimmed slightly too, but * the real fix is giving the map the space it was already entitled to. * County shapes/labels are untouched (only this frame's own layout * changed); labels render larger, not smaller, since the map itself is * larger -- confirmed legible via rendered screenshot at desktop and * mobile (the `@media (max-width: 900px)` single-column rule below still * applies unchanged, so mobile gets its own full-width square frame). */ body.hcfb-about-impact-experience .hcfb-about-region__visual-frame { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border-radius: 14px; background: var(--wp--preset--color--hcfb-cream); border: 1px solid var(--wp--preset--color--hcfb-border); } body.hcfb-about-impact-experience .hcfb-about-region__visual-label { margin: 0; font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--hcfb-orange); text-align: center; } body.hcfb-about-impact-experience .hcfb-about-region__map-svg { width: 100%; flex: 1 1 auto; min-height: 0; } body.hcfb-about-impact-experience .hcfb-about-region__map-shape { fill: var(--wp--preset--color--hcfb-surface); stroke: var(--wp--preset--color--hcfb-navy); stroke-width: 1.5; stroke-linejoin: round; } body.hcfb-about-impact-experience .hcfb-about-region__map-labels text { fill: var(--wp--preset--color--hcfb-navy); font-family: var(--wp--preset--font-family--hcfb-heading); font-size: 30px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--wp--preset--color--hcfb-surface); stroke-width: 8px; stroke-linejoin: round; } body.hcfb-about-impact-experience .hcfb-about-region__map-abstract { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 0.6rem; width: 100%; } body.hcfb-about-impact-experience .hcfb-about-region__map-tile { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } body.hcfb-about-impact-experience .hcfb-about-region__map-tile-shape { display: block; width: 2.25rem; height: 2.25rem; border-radius: 8px; background: var(--wp--preset--color--hcfb-surface); border: 1.5px solid var(--wp--preset--color--hcfb-navy); } body.hcfb-about-impact-experience .hcfb-about-region__map-tile:nth-child(odd) .hcfb-about-region__map-tile-shape { border-radius: 999px; } body.hcfb-about-impact-experience .hcfb-about-region__map-tile-label { font-size: 0.75rem; font-weight: 600; color: var(--wp--preset--color--hcfb-navy); } @media (max-width: 900px) { body.hcfb-about-impact-experience .hcfb-about-region__grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ */ /* Bespoke section: Our Story / History Timeline packet (Ryan-directed, */ /* 2026-09-23). The prior 2-column real-image + static-placeholder- */ /* timeline layout is gone entirely -- the building rendering was */ /* removed (the supplied timeline package neither references nor */ /* treats it as an approved design-only asset with confirmed public-use */ /* rights), and the old hardcoded 3-item timeline is replaced by the */ /* dynamic `[hcfb/history-timeline]` block (assets/css/history-timeline- */ /* block.css owns that block's own styling entirely -- nothing about it */ /* lives in this file). This section is now single-column, full */ /* available width, no empty media column -- same principle already */ /* established this session for Hero/Who We Are/Neighbors, except here */ /* unconditional (there was never a "photo may be bound later" case for */ /* this section to begin with). */ /* ------------------------------------------------------------------ */ /* .hcfb-about-history__inner's wide-measure geometry now lives in */ /* assets/css/prominent-sections.css's canonical inner-container rule. */ body.hcfb-about-impact-experience .hcfb-about-history__heading { color: var(--wp--preset--color--hcfb-navy); margin: 0 0 0.75rem; } body.hcfb-about-impact-experience .hcfb-about-history__intro { margin: 0 0 1.75rem; max-width: 44rem; color: var(--wp--preset--color--hcfb-text); } /* ------------------------------------------------------------------ */ /* Block-editor pass (staff review): CTAs on this page are now real */ /* core/button blocks (docs on hcfb_about_render_hero() etc. explain */ /* why) so staff can edit label/URL without touching HTML. core/button */ /* always renders as
, putting MY-CLASS */ /* on the WRAPPING div -- but hcfb-prominent-hero__cta, hcfb-prominent- */ /* cta__link, and hcfb-editorial-grid__card-link (all from the shared, */ /* unscoped prominent-sections.css) were written expecting that class */ /* directly on the , because their own starter patterns still apply */ /* it to a plain with no wrapping div. Editing that shared file to */ /* assume a wrapping div would break those starter patterns, so instead */ /* -- scoped to this template only -- the outer div's own box is */ /* removed entirely (`display: contents`, so its own background/ */ /* padding/border-radius become moot) and each class's actual visual */ /* treatment is re-declared against the real, clickable */ /* `.wp-block-button__link` anchor beneath it. Without this, every one */ /* of these buttons rendered as a nested navy pill (theme.json's default */ /* button fill, never overridden) inside the intended orange/outline */ /* pill -- confirmed via computed-style inspection during this pass. */ /* ------------------------------------------------------------------ */ body.hcfb-about-impact-experience .wp-block-button.hcfb-prominent-hero__cta, body.hcfb-about-impact-experience .wp-block-button.hcfb-prominent-cta__link, body.hcfb-about-impact-experience .wp-block-button.hcfb-editorial-grid__card-link, body.hcfb-about-impact-experience .wp-block-button.hcfb-about-region__cta { display: contents; } body.hcfb-about-impact-experience .hcfb-prominent-hero__cta .wp-block-button__link, body.hcfb-about-impact-experience .hcfb-prominent-cta__link .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px; font-weight: 700; text-decoration: none; } body.hcfb-about-impact-experience .hcfb-prominent-hero__cta .wp-block-button__link { padding: 0.75rem 1.5rem; } body.hcfb-about-impact-experience .hcfb-prominent-cta__link .wp-block-button__link { padding: 0.75rem 1.75rem; } body.hcfb-about-impact-experience .hcfb-prominent-hero__cta--primary .wp-block-button__link { background: var(--wp--preset--color--hcfb-orange); color: var(--wp--preset--color--hcfb-navy); } body.hcfb-about-impact-experience .hcfb-prominent-hero__cta--primary .wp-block-button__link:hover, body.hcfb-about-impact-experience .hcfb-prominent-hero__cta--primary .wp-block-button__link:focus-visible { background: var(--wp--preset--color--hcfb-navy); color: var(--wp--preset--color--hcfb-surface); } body.hcfb-about-impact-experience .hcfb-prominent-cta__link--primary .wp-block-button__link { background: var(--wp--preset--color--hcfb-orange); color: var(--wp--preset--color--hcfb-navy); } body.hcfb-about-impact-experience .hcfb-prominent-cta__link--primary .wp-block-button__link:hover, body.hcfb-about-impact-experience .hcfb-prominent-cta__link--primary .wp-block-button__link:focus-visible { background: var(--wp--preset--color--hcfb-surface); color: var(--wp--preset--color--hcfb-navy); } body.hcfb-about-impact-experience .hcfb-prominent-cta__link--secondary .wp-block-button__link { background: transparent; color: var(--wp--preset--color--hcfb-surface); border: 2px solid var(--wp--preset--color--hcfb-surface); } body.hcfb-about-impact-experience .hcfb-prominent-cta__link--secondary .wp-block-button__link:hover, body.hcfb-about-impact-experience .hcfb-prominent-cta__link--secondary .wp-block-button__link:focus-visible { background: var(--wp--preset--color--hcfb-surface); color: var(--wp--preset--color--hcfb-navy); } body.hcfb-about-impact-experience .hcfb-editorial-grid__card-link .wp-block-button__link { display: inline; background: none; padding: 0; border-radius: 0; color: var(--wp--preset--color--hcfb-navy); font-weight: 700; text-decoration: none; } body.hcfb-about-impact-experience .hcfb-editorial-grid__card-link .wp-block-button__link:hover, body.hcfb-about-impact-experience .hcfb-editorial-grid__card-link .wp-block-button__link:focus-visible { text-decoration: underline; } body.hcfb-about-impact-experience .hcfb-about-region__cta .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.5rem; background: none; padding: 0; border-radius: 0; color: var(--wp--preset--color--hcfb-navy); font-weight: 700; text-decoration: none; } body.hcfb-about-impact-experience .hcfb-about-region__cta .wp-block-button__link:hover, body.hcfb-about-impact-experience .hcfb-about-region__cta .wp-block-button__link:focus-visible { text-decoration: underline; } /* ------------------------------------------------------------------ */ /* Focus visibility, reduced motion -- same conventions as */ /* prominent-sections.css and partner-experience.css. */ /* ------------------------------------------------------------------ */ body.hcfb-about-impact-experience .hcfb-prominent-hero__cta .wp-block-button__link:focus-visible, body.hcfb-about-impact-experience .hcfb-prominent-cta__link .wp-block-button__link:focus-visible, body.hcfb-about-impact-experience .hcfb-editorial-grid__card-link .wp-block-button__link:focus-visible, body.hcfb-about-impact-experience .hcfb-about-region__cta .wp-block-button__link:focus-visible { outline: 3px solid var(--wp--preset--color--hcfb-focus, #262760); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { body.hcfb-about-impact-experience .hcfb-prominent-hero__cta .wp-block-button__link, body.hcfb-about-impact-experience .hcfb-prominent-cta__link .wp-block-button__link, body.hcfb-about-impact-experience .hcfb-editorial-grid__card-link .wp-block-button__link, body.hcfb-about-impact-experience .hcfb-about-region__cta .wp-block-button__link { transition: none; } } /* ------------------------------------------------------------------ */ /* Final-validation pass (staff review): a real axe-core finding, not an */ /* aesthetic change -- orange bold ~14px text sitting directly on cream/ */ /* white backgrounds measured 2.2-2.38:1 (WCAG AA requires 4.5:1 for */ /* text this size/weight). Originally fixed here with a navy pill */ /* (green/orange text on a navy chip) for all four affected elements. */ /* */ /* Prominent-system consolidation pass: the approved shared eyebrow */ /* direction is text-only, no navy filled pill, using the accessible */ /* `hcfb-green-text` token -- this page's hero, Who We Are, and */ /* Neighbors We Serve eyebrows now get that treatment from */ /* assets/css/prominent-sections.css's shared eyebrow rule instead (see */ /* its own docblock), so the pill rule for those three is removed here. */ /* .hcfb-about-region__visual-label is a different role -- a small map */ /* legend caption above the service-area graphic, not a heading eyebrow */ /* -- and keeps its own already-accessible navy-pill treatment */ /* unchanged; it was never part of this packet's eyebrow scope. */ /* ------------------------------------------------------------------ */ body.hcfb-about-impact-experience .hcfb-about-region__visual-label { display: inline-block; background: var(--wp--preset--color--hcfb-navy); color: var(--wp--preset--color--hcfb-orange); padding: 0.3rem 0.85rem; border-radius: 999px; }