/* ------------------------------------------------------------------ */ /* Neighbor Service Finder / Donor Impact Journey -- now the permanent */ /* homepage design (formerly Phase 7A1's preview prototype) */ /* ------------------------------------------------------------------ */ /* * QA navigation integration pass: previously only ever loaded when * hcfb_is_neighbor_journey_preview_request() was true; now enqueued * unconditionally on the front page (see functions.php's * wp_enqueue_scripts callback) since this content -- reviewed and * approved as "Preview 2", the coexistence variant -- is the permanent * homepage design, not a prototype. Reuses this theme's existing * color/spacing tokens and card/button conventions (docs/DESIGN_SYSTEM.md) * rather than introducing a separate design language, per the original * Phase 7A1 visual direction. * * The legacy ?hcfb_neighbor_journey_preview=1|2 query parameter still * works as a comparison toggle (functions.php's * hcfb_get_neighbor_journey_preview_variant(), unchanged) -- variant 1 * still applies the rule immediately below on top of this always-rendered * content; variant 2 is now a no-op (byte-identical to the default). */ /* * Legacy variant-1 toggle only (body.hcfb-neighbor-preview--1) -- the * original, historical "replacement style" comparison view, where the * five sections below (superseded by this permanent design's own dual- * path/finder/map-bridge/ways-to-help sections) are hidden, not removed * from the DOM, only while ?hcfb_neighbor_journey_preview=1 is explicitly * requested. A normal request (no query parameter) never carries this * body class, so this rule has no effect on the default homepage. */ /* * Real bug found+fixed building this: several elements below (e.g. * `.hcfb-neighbor-finder__entry`, `.hcfb-neighbor-finder__remembered`) * are toggled via the plain `hidden` IDL property/attribute in * assets/js/hcfb-neighbor-journey.js, but also carry an unconditional * `display: flex` rule for when they're shown -- an AUTHOR-origin * `display` declaration always beats the UA stylesheet's own * `[hidden] { display: none }` rule regardless of specificity, so * without this override those elements stayed visibly flexed even while * `hidden` was correctly set to true. Scoped to this component only. */ body.home .hcfb-neighbor-finder [hidden] { display: none !important; } body.hcfb-neighbor-preview--1 .hcfb-home-help, body.hcfb-neighbor-preview--1 .hcfb-home-choice, body.hcfb-neighbor-preview--1 .hcfb-home-facility, body.hcfb-neighbor-preview--1 .hcfb-home-impact, body.hcfb-neighbor-preview--1 .hcfb-home-partners { display: none; } /* * Packet 2 (architecture consolidation) resolved what used to be two * separate, overlapping donor-action modules ("How Can You Help?" and * hcfb/neighbor-ways-to-help-placeholder) down to exactly one visible at * a time -- originally scoped to the variant-2 preview only, with the * default homepage still showing "How Can You Help?" unchanged. * * QA navigation integration pass: neighbor-ways-to-help-placeholder now * always renders (its own preview gate removed), so this hiding rule is * promoted to unconditional on the homepage -- "How Can You Help?" is * permanently superseded by "Ways to Help" everywhere, not just in * preview. Hidden here, not removed from the DOM, same technique as the * legacy variant-1 rule above. */ body.home .hcfb-home-help { display: none; } /* A small, visible "prototype section" label on every new section, * hidden in clean-screenshot mode via the existing .hcfb-clean-hide * mechanism (home.css) so a review screenshot reads as production-like. */ body.home [class^="hcfb-neighbor-"] [class$="__preview-label"] { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--hcfb-text-muted, #5b5b66); margin-bottom: var(--wp--preset--spacing--hcfb-sm, 1rem); } /* * Phase 7A1C: box-sizing reset for the journey sections, mirroring the * identical fix home.css already applies to the default homepage * sections (width:100% + padding-inline otherwise overflows under the * browser's content-box default). Scoped here (loaded only during * preview mode) rather than added to home.css, since these classes only * ever exist while the preview is active. */ body.home .hcfb-neighbor-dual-path, body.home .hcfb-neighbor-dual-path *, body.home .hcfb-neighbor-impact-snapshot, body.home .hcfb-neighbor-impact-snapshot *, body.home .hcfb-neighbor-finder, body.home .hcfb-neighbor-finder *, body.home .hcfb-neighbor-map-bridge, body.home .hcfb-neighbor-map-bridge *, body.home .hcfb-neighbor-ways-to-help, body.home .hcfb-neighbor-ways-to-help * { box-sizing: border-box; } /* ------------------------------------------------------------------ */ /* Phase 7A1C -- shared journey container */ /* ------------------------------------------------------------------ */ /* * Root cause of the narrow central column (Phase 7A1C width audit): each * of these five sections renders with theme.json's default * `"layout":{"type":"constrained"}`, which WordPress's global styles cap * at `--wp--style--global--content-size` (theme.json settings.layout. * contentSize: 720px) -- a fixed, non-responsive value, hence the * identical 720px width measured at every desktop size. Every OTHER * top-level homepage section (hero, help, choice, whats-happening, * facility, impact, get-in-touch, partners) was already released from * this same cap in home.css when the homepage was first built; these * five Phase 7 sections were simply added later and never received the * same treatment. * * This class releases that cap and recenters each section at the * theme's own existing "wide" alignment measure -- * `--wp--style--global--wide-size` (theme.json settings.layout. * wideSize: 1200px) -- rather than inventing a new width or reusing * home.css's `--hcfb-home-wide` (82rem/1312px), which is reserved for * the full-bleed decorative bands (header row, What's Happening) and is * wider than the 1120-1240px range requested for these content * sections. 1200px sits in the middle of that range and is already a * real theme token, with an explicit fallback in case the variable is * ever unavailable. * * Side gutters below come from the theme's own spacing scale * (theme.json settings.spacing.spacingSizes), chosen so the *inner* * gutter lands in each breakpoint's requested range once the * 1200px cap no longer exceeds the viewport: * >= 1025px: hcfb-lg (2.5rem/40px) -- 1024px inner gutter = 40px (32-48 target) * 769-1024px: hcfb-lg (2.5rem/40px) * 481-768px: hcfb-md (1.5rem/24px) -- 768px inner gutter = 24px (24-32 target) * <=480px: hcfb-sm (1rem/16px) -- 390/375/320px inner gutter = 16px (16-20 target) */ body.home .hcfb-journey-container { max-width: var(--wp--style--global--wide-size, 1200px); width: 100%; margin-left: auto; margin-right: auto; padding-inline: var(--wp--preset--spacing--hcfb-lg, 2.5rem); } /* * Releasing the section itself only widens the section -- every direct * child (the intro paragraph, the card grid, the funnel form, the map * preview wrapper, etc.) is ALSO capped individually by WordPress's own * `.is-layout-constrained > *` global-styles rule at the same 720px * content-size. This is the exact same root cause home.css's "Pass 4" * fix already documents for .hcfb-home-hero__grid and others -- verified * here the same way, via a live bounding-box measurement (every one of * these child elements measured 720px/centered before this rule * existed, despite the parent section correctly measuring 1200px). * Released generically for every direct child; elements that want a * narrower, intentional measure (the funnel form, the centered * methodology/notice copy) get their own more specific max-width rule * further down, which wins the cascade over this universal selector. */ body.home .hcfb-journey-container > * { max-width: none; width: 100%; } @media (max-width: 768px) { body.home .hcfb-journey-container { padding-inline: var(--wp--preset--spacing--hcfb-md, 1.5rem); } } @media (max-width: 480px) { body.home .hcfb-journey-container { padding-inline: var(--wp--preset--spacing--hcfb-sm, 1rem); } } /* Readable-measure copy: explanatory prose inside the wider journey * sections stays constrained to a comfortable reading line length * (roughly 70-80 characters) even though its section now spans the * full 1200px grid -- cards/controls are free to use the wider * measure, running text is not. */ body.home .hcfb-neighbor-dual-path__text, body.home .hcfb-neighbor-finder__intro, body.home .hcfb-neighbor-finder__privacy, body.home .hcfb-neighbor-impact-snapshot__notice, body.home .hcfb-neighbor-map-bridge__intro, body.home .hcfb-neighbor-map-bridge__caption { max-width: 68ch; } body.home .hcfb-neighbor-impact-snapshot__notice, body.home .hcfb-neighbor-impact-snapshot__footnote { margin-left: auto; margin-right: auto; } /* * Map redesign pass (per Harry's review): .hcfb-neighbor-map-bridge__intro * was previously in the auto-margin-centering group above, which visually * indented it away from the section's left edge while the "Hunger Across * Every County" heading directly above it (a full-width, naturally * left-aligned H2) stayed at the true left edge -- the two never shared a * left edge despite reading as one heading/intro pair. Explicit * margin-left: 0 (rather than just removing the old rule) guarantees this * regardless of any future change to the shared group above. * * Narrow correction pass (per Harry's review): the margin-left: 0 above * was never actually winning -- confirmed via a live computed-style * check (marginLeft measured at 217px, not 0). Root cause: this section * carries WordPress's own `.is-layout-constrained` class, and core's * global-styles output sets `margin-left/margin-right: auto !important` * on that class's direct, non-aligned children -- the exact same root * cause home.css already documents fixing the same way for * .hcfb-home-facility__gallery. A plain (non-!important) override can * never beat that regardless of specificity. `!important` on * margin-left alone is sufficient -- margin-right is left to keep * absorbing the remaining space as auto, which is what actually * produces a flush-left result once margin-left is pinned to 0. */ body.home .hcfb-neighbor-map-bridge__intro { margin-left: 0 !important; } /* ------------------------------------------------------------------ */ /* Phase 7A1C -- consistent section rhythm */ /* ------------------------------------------------------------------ */ /* * One shared major-section spacing value for every journey section -- * larger than any section's own internal (heading-to-content) spacing, * so the rhythm between sections reads as deliberate rather than ad * hoc per-section margins. Scoped to these five sections only; the * surrounding non-journey sections (hero, What's Happening, Get in * Touch) keep their own existing, already-approved spacing untouched. */ body.home .hcfb-neighbor-dual-path, body.home .hcfb-neighbor-impact-snapshot, body.home .hcfb-neighbor-finder, body.home .hcfb-neighbor-map-bridge, body.home .hcfb-neighbor-ways-to-help { padding-top: var(--wp--preset--spacing--hcfb-xl, 4rem); padding-bottom: var(--wp--preset--spacing--hcfb-xl, 4rem); } /* The dual-path section immediately follows the hero, which already * carries its own bottom spacing -- a touch less top padding here * avoids stacking two large gaps into one oversized dead zone. Dead * (dual-path no longer renders, see front-page.html), kept only because * this pattern/CSS stays on disk unused -- see this rule's counterpart * below for the live version of the same fix. */ body.home .hcfb-neighbor-dual-path { padding-top: var(--wp--preset--spacing--hcfb-lg, 2.5rem); } /* * Reposition pass (per Harry's review): Ways to Help now renders * immediately below the hero (previously much further down the page, * immediately before Get in Touch) -- same top-padding trim as * dual-path's rule above, same reason (the hero already carries its own * bottom spacing). Bottom padding also trimmed, now for a different * reason: this section is immediately followed by the dark-green Find * Food band, which carries its own top padding (2.5rem) -- see * .hcfb-neighbor-finder's own override further down this file. Kept * intentionally un-huge on both sides so the two sections read as one * continuous rhythm rather than a big cream gap before a big green one. */ body.home .hcfb-neighbor-ways-to-help { padding-top: var(--wp--preset--spacing--hcfb-lg, 2.5rem); padding-bottom: var(--wp--preset--spacing--hcfb-lg, 2.5rem); } /* * Transition pass (per Harry's review): WordPress's global blockGap * (theme.json styles.spacing.blockGap, ~1rem) inserts a margin-top * between every top-level homepage block, including here -- since Ways * to Help now has its own full-bleed cream band (see below) and Find * Food its own full-bleed dark-green band, that 1rem would show as a * plain white seam cut between the two colors, exactly the "cream * section -> random white gap -> green section" this pass was asked to * avoid. Zeroed the same way this theme already zeroes an identical * blockGap seam elsewhere (see home.css's `.hcfb-home-facility + *`). */ body.home .hcfb-neighbor-ways-to-help + #hcfb-neighbor-finder { margin-top: 0; } @media (max-width: 768px) { body.home .hcfb-neighbor-dual-path, body.home .hcfb-neighbor-impact-snapshot, body.home .hcfb-neighbor-finder, body.home .hcfb-neighbor-map-bridge, body.home .hcfb-neighbor-ways-to-help { padding-top: var(--wp--preset--spacing--hcfb-lg, 2.5rem); padding-bottom: var(--wp--preset--spacing--hcfb-lg, 2.5rem); } body.home .hcfb-neighbor-dual-path { padding-top: var(--wp--preset--spacing--hcfb-md, 1.5rem); } body.home .hcfb-neighbor-ways-to-help { padding-top: var(--wp--preset--spacing--hcfb-md, 1.5rem); padding-bottom: var(--wp--preset--spacing--hcfb-md, 1.5rem); } } /* ---------------------------------------------------------------- */ /* Dual-path introduction */ /* ---------------------------------------------------------------- */ /* * Storytelling iteration 3 (per Harry's review): this section previously * had no background of its own -- it sat directly on the page's plain * white canvas immediately below the navy hero, reading as disconnected * from the hero's visual confidence. A full-bleed warm cream band now * fills that gap, using a `::before` pseudo-element (not a background on * the section itself) specifically so it never fights * `.hcfb-journey-container`'s own `max-width: 1200px` rule on this same * element -- the pseudo-element paints independently behind the content, * escaping to the true viewport edge via the same 100vw/-50vw technique * already used elsewhere in this theme (e.g. .hcfb-home-facility__gallery), * while the section's own box and its content stay exactly as wide as * before. `z-index: -1` keeps it strictly behind the grid/cards; no * existing content changed position. * * Iteration 4 (per Harry's review): iteration 3's version of this band was * "too subtle" -- fixed with more presence, not a new/brighter color. * Padding increased substantially (from a reduced hcfb-lg/shared-hcfb-xl * pairing to a uniform hcfb-2xl top and bottom) so the band reads as a * real, generous chapter rather than a thin strip barely wrapping the * cards. An orange bottom accent rule (the same primary accent already * carried by the Find Food card's own top border and CTA button -- not a * new color) gives the cream-to-white transition at the band's bottom * edge a crisp, intentional boundary; the top edge already reads clearly * against the navy hero immediately above it, so no accent was needed * there. */ body.home .hcfb-neighbor-dual-path { position: relative; padding-top: var(--wp--preset--spacing--hcfb-2xl, 6rem); padding-bottom: var(--wp--preset--spacing--hcfb-2xl, 6rem); } body.home .hcfb-neighbor-dual-path::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: var(--wp--preset--color--hcfb-cream); border-bottom: 5px solid var(--wp--preset--color--hcfb-orange); z-index: -1; } @media (max-width: 768px) { body.home .hcfb-neighbor-dual-path { padding-top: var(--wp--preset--spacing--hcfb-xl, 4rem); padding-bottom: var(--wp--preset--spacing--hcfb-xl, 4rem); } } body.home .hcfb-neighbor-dual-path__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--hcfb-lg, 2.5rem); align-items: stretch; } /* * Cards flip from cream to white (iteration 3): now that the section * itself carries the cream band above, cream-on-cream cards would have * had zero contrast against their own background -- "stronger separation * from page background" (this pass's own instruction) is exactly this: * white cards reading as distinct surfaces sitting on the warm band, * rather than blending into it. Each card's own colored top border * (orange/green, unchanged) still carries the restrained per-path accent. */ body.home .hcfb-neighbor-dual-path__card { background: var(--wp--preset--color--hcfb-surface); border-radius: 12px; padding: var(--wp--preset--spacing--hcfb-lg, 2.5rem); border-top: 6px solid transparent; display: flex; flex-direction: column; height: 100%; } body.home .hcfb-neighbor-dual-path__card--find-food { border-top-color: var(--wp--preset--color--hcfb-orange); } body.home .hcfb-neighbor-dual-path__card--impact { border-top-color: var(--wp--preset--color--hcfb-green); } /* * Phase 7A1D: one photo per card (docs/HOMEPAGE_ASSET_PROVISIONAL_USE.md * -- no new asset sourced, see this pattern's docblock). A 4:3 box keeps * a meaningful crop of each source's portrait-oriented photo without the * extreme vertical crop a wider/shorter box would force; both cards use * the identical box treatment (aspect ratio, radius, object-fit) so the * two paths read as visually equal, per this phase's requirements. The * per-photo object-position (set inline, see the pattern file) is the * only thing that differs between the two. */ body.home .hcfb-neighbor-dual-path__media { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; margin-bottom: var(--wp--preset--spacing--hcfb-md, 1.5rem); } body.home .hcfb-neighbor-dual-path__media img { width: 100%; height: 100%; object-fit: cover; display: block; } body.home .hcfb-neighbor-dual-path__heading { font-size: 1.75rem; margin: 0 0 0.5rem; } body.home .hcfb-neighbor-dual-path__text { margin: 0 0 1.25rem; } /* * height: auto is a real-bug fix, not decorative: this anchor also * carries WordPress core's own `.wp-block-button__link` class (reused * here purely for its free pill-shape/padding), and core's own inline * button-block stylesheet sets `.wp-block-button__link { height: 100% }` * -- intended for buttons inside a `wp:buttons` block using vertical * "stretch" alignment, not for a plain anchor inside this flex-column * card. Since the card is a tall `display:flex; flex-direction:column` * box (stretched further by the dual-path grid's `align-items:stretch`), * that inherited 100% resolved against the whole card's height, turning * this into an ~246px vertical capsule instead of a normal pill. This * rule's own selector (2 classes) already outranks core's bare * `.wp-block-button__link` (1 class), so overriding the one offending * property here is enough -- no !important, no new higher-specificity * selector needed. * * CTA hierarchy pass (balance pass): the "prominence" treatment * originally added for "Give Now" only -- full width, larger type, * padding, shadow, transition -- now lives on this shared base rule * instead, so Find Food's CTA gets the identical treatment automatically * rather than duplicating these properties on both `--find-food` and * `--primary`. Safe to share here specifically because this class is * scoped to this dual-path component alone (confirmed: no other homepage * section or card reuses `.hcfb-neighbor-dual-path__cta`), so promoting * these properties can't leak into any other section's buttons. * * Baseline-alignment pass: bottom-pinning (margin-top: auto) moved off * this button and onto its new `.hcfb-neighbor-dual-path__actions` * wrapper below -- see that rule for why. */ body.home .hcfb-neighbor-dual-path__cta { height: auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; align-self: stretch; /* Transparent 2px border keeps the same box-model height as the * secondary pills below "Give Now" (border-box), matching this * file's existing convention for that alignment fix -- applies * equally to Find Food now that both share this treatment. */ border: 2px solid transparent; padding: 0.9rem 1.75rem; font-size: 1.0625rem; font-weight: 700; box-shadow: 0 2px 6px rgba(38, 39, 96, 0.16); transition: background-color 0.15s ease, color 0.15s ease; } /* * Action zone: wraps each card's primary CTA (Make an Impact's also wraps * its secondary pill row). This zone -- not the button itself -- is what * pins to the bottom of the card (margin-top: auto, the same technique * the button used before), so both cards' primary buttons can align on * the same row even though Find Food's zone holds one element and Make * an Impact's holds two: giving both zones an equal minimum height * (below, desktop/tablet only) means their shared bottom edge puts both * zones' -- and so both primary buttons' -- top edges at the same Y * position, with any leftover space in the shorter zone simply sitting * above the button as intentional breathing room. */ body.home .hcfb-neighbor-dual-path__actions { display: flex; flex-direction: column; align-self: stretch; margin-top: auto; } /* * Matches this file's existing 899px/900px card-stacking breakpoint * below: the equal-height treatment only matters while the two cards sit * side by side, so it's skipped entirely once they stack (mobile keeps * its natural, unreserved flow). Value is the Make an Impact action * stack's own natural height, measured in the browser at 1440px: * primary CTA (~60px) + gap (the secondary row's own 0.85rem margin-top, * ~13.6px) + secondary pill row (~44px) = ~117.5px, rounded up slightly * for a small safety margin. */ @media (min-width: 900px) { body.home .hcfb-neighbor-dual-path__actions { min-height: 7.35rem; } } /* * Find Food and Give Now: same orange-fill/navy-text primary treatment * (docs/COLOR_USAGE_RULES.md contrast pairing: navy text on orange * measures 5.70:1; white on orange would fail at 2.39:1, which is why the * hover/focus state below swaps to navy background with white text * instead of just darkening the orange). Kept as two modifier classes * rather than merging into one, even though their treatment is currently * identical -- each still names which specific card CTA it is, in case * the two ever need to diverge again. */ body.home .hcfb-neighbor-dual-path__cta--find-food, body.home .hcfb-neighbor-dual-path__cta--primary { background: var(--wp--preset--color--hcfb-orange); color: var(--wp--preset--color--hcfb-navy); } body.home .hcfb-neighbor-dual-path__cta--find-food:hover, body.home .hcfb-neighbor-dual-path__cta--find-food:focus-visible, body.home .hcfb-neighbor-dual-path__cta--primary:hover, body.home .hcfb-neighbor-dual-path__cta--primary:focus-visible { background: var(--wp--preset--color--hcfb-navy); color: var(--wp--preset--color--hcfb-surface); } /* * Volunteer / See Our Impact: a clearly grouped pair of small secondary * pills beneath the primary "Give Now" button, rather than two inline * text links -- an intentional secondary-action row. Outline treatment * (transparent fill, navy border/text) is the same secondary-button * pairing already used by prominent-sections.css's own hero CTAs, reused * here rather than inventing a new style. Sits directly under the "Give * Now" button; both are pinned to the bottom of the card together via the * shared `.hcfb-neighbor-dual-path__cta` rule's own `margin-top: auto` * above (an auto top-margin pushes every subsequent flex sibling down * with it, not just the element it's set on). */ body.home .hcfb-neighbor-dual-path__secondary-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.85rem; } body.home .hcfb-neighbor-dual-path__secondary-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1.15rem; border-radius: 999px; border: 2px solid var(--wp--preset--color--hcfb-navy); color: var(--wp--preset--color--hcfb-navy); font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } body.home .hcfb-neighbor-dual-path__secondary-link:hover, body.home .hcfb-neighbor-dual-path__secondary-link:focus-visible { background: var(--wp--preset--color--hcfb-navy); color: var(--wp--preset--color--hcfb-surface); } @media (max-width: 899px) { body.home .hcfb-neighbor-dual-path__grid { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------------------- */ /* Donor-impact snapshot */ /* ---------------------------------------------------------------- */ body.home .hcfb-neighbor-impact-snapshot { text-align: center; } body.home .hcfb-neighbor-impact-snapshot__heading { font-size: 1.8rem; margin-bottom: var(--wp--preset--spacing--hcfb-sm); } body.home .hcfb-neighbor-impact-snapshot__notice { margin-bottom: var(--wp--preset--spacing--hcfb-md); } body.home .hcfb-neighbor-impact-snapshot__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--hcfb-md, 1.5rem); align-items: stretch; text-align: left; } /* * Phase 7A1C: strengthened value/label/period hierarchy -- the * placeholder value is now the strongest element on the card (larger, * heavier), the label a clear second, and the reporting period a small, * subdued third line pinned to the bottom of the card so all four cards * read at a consistent baseline regardless of how many lines their own * value/label wrap to. */ body.home .hcfb-neighbor-impact-snapshot__card { background: var(--wp--preset--color--hcfb-cream); border-radius: 12px; padding: var(--wp--preset--spacing--hcfb-md, 1.5rem); display: flex; flex-direction: column; height: 100%; } body.home .hcfb-neighbor-impact-snapshot__value { font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: var(--wp--preset--color--hcfb-navy); margin: 0 0 0.4rem; } body.home .hcfb-neighbor-impact-snapshot__label { font-size: 1rem; font-weight: 600; margin: 0; } body.home .hcfb-neighbor-impact-snapshot__period { font-size: 0.75rem; color: var(--wp--preset--color--hcfb-text-muted, #5b5b66); margin: 0; margin-top: auto; padding-top: 0.75rem; } /* * Phase 7A1B/C: source / verification / approval / methodology all live * inside this one shared disclosure, directly beneath the metric grid, * instead of repeating on every card -- keeps each card to three short * lines while the full review-status detail (normal local mode only; * clean mode omits this entire block) is still one click away. */ body.home .hcfb-neighbor-impact-snapshot__methodology { text-align: center; margin: var(--wp--preset--spacing--hcfb-sm, 1rem) auto 0; } body.home .hcfb-neighbor-impact-snapshot__methodology summary { font-weight: 600; cursor: pointer; padding: 0.5rem 0; } body.home .hcfb-neighbor-impact-snapshot__methodology-inner { max-width: 42rem; margin: 0 auto; text-align: left; } body.home .hcfb-neighbor-impact-snapshot__methodology ul { list-style: none; padding: 0; margin: var(--wp--preset--spacing--hcfb-sm) 0 0; } body.home .hcfb-neighbor-impact-snapshot__methodology li { padding: 0.5rem 0; border-top: 1px solid var(--wp--preset--color--hcfb-border, #dcdce4); } body.home .hcfb-neighbor-impact-snapshot__meta { font-size: 0.8rem; color: var(--wp--preset--color--hcfb-text-muted, #5b5b66); margin: 0; } body.home .hcfb-neighbor-impact-snapshot__footnote { font-size: 0.8rem; color: var(--wp--preset--color--hcfb-text-muted, #5b5b66); margin-top: var(--wp--preset--spacing--hcfb-md); } @media (max-width: 899px) { body.home .hcfb-neighbor-impact-snapshot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { body.home .hcfb-neighbor-impact-snapshot__grid { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------------------- */ /* Neighbor Service Finder */ /* ---------------------------------------------------------------- */ /* * Phase 7A1 visual polish: the introduction (preview label, headline, * intro copy, entry actions, privacy note) and the existing intro image * now form a two-column "hero" at desktop -- .hcfb-neighbor-finder__hero * is a new wrapper grid around the same elements from * neighbor-service-finder-placeholder.php; no ids/data attributes/ * classes assets/js/hcfb-neighbor-journey.js depends on changed, so * funnel/results/privacy behavior is unaffected. Purely decorative * (aria-hidden, noninteractive, unanimated) shapes sit behind the hero * via z-index and are dropped entirely at mobile widths below. */ /* * Final structural pass (per Harry's review): the previous cream, * rounded, padded "card" box around this entire grid is what made the * section read as a self-contained app/widget dropped into the * homepage rather than a natural section of the page. That box is * removed outright -- .hero is now a plain grid with no background/ * border-radius/padding of its own. Color now lives on the SECTION * itself as a full-width band (see .hcfb-neighbor-finder background * below), which is what a normal homepage section looks like elsewhere * on this site (dual-path, map-bridge, etc. all use plain section * backgrounds, not an inner card). * * Compact-band pass (per Harry's review): the photo column is gone * (see the pattern file), so this is no longer a two-column grid -- * .hero is now a simple flex column that centers its one remaining * child (.hero-content) horizontally, matching the "compact, centered * wayfinding band" direction. max-width lives on .hero-content itself, * below. */ body.home .hcfb-neighbor-finder__hero { position: relative; display: flex; flex-direction: column; align-items: center; } /* * Compact-band pass (per Harry's review): a single centered column, * capped at a comfortable reading/scanning width instead of stretching * across the full 1200px section -- a wide, sparse hero would work * against the "compact" direction. text-align:center plus * align-items:center centers both text and block-level children * (button, quick-path row, funnel panel); individual children that need * to use the full column width (the quick-path grid, the funnel panel) * get their own align-self:stretch further down rather than changing * this rule. */ body.home .hcfb-neighbor-finder__hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 40rem; width: 100%; } /* * Final structural pass (per Harry's review): a full-width, edge-to- * edge color band behind the whole section -- the "use color on a * larger surface, not just small controls" direction. Same full-bleed * pseudo-element technique already used for this theme's own full-bleed * bands (see home.css's .hcfb-home-facility__gallery comment for the * underlying "break out of a centered container" pattern); applied to * a ::before here instead of the section's own box so it doesn't fight * the shared .hcfb-journey-container max-width/centering rule this * section also carries. body.home's existing overflow-x:hidden (see * home.css) is the same safety net against the 100vw-includes- * scrollbar edge case documented there. Scoped to this one section * only -- the other four journey sections (dual-path, impact-snapshot, * map-bridge, ways-to-help) are unaffected and keep their existing * plain backgrounds. * * Compact-band pass (per Harry's review): swapped from a pale green * tint to the theme's existing darkened/text-safe green token * (`hcfb-green-text`, #627425 -- already in theme.json, derived from * the brand green specifically for accessible contrast, not a new * color) for the "dark green" background this pass asked for. Text on * this section was recolored to light tones to match -- see .heading/ * .intro/.guided-link below -- and every focus outline inside this * section was checked against this exact background (verified via * WCAG contrast math, not eyeballed): navy/orange, this component's * usual outline colors, both fall below the 3:1 non-text-contrast * minimum on this background (2.6:1 and 2.2:1), so those outlines are * swapped to white here specifically -- same established pattern this * theme already uses for its other dark-background band (see * public-shell.css's `.hcfb-utility-bar--navy :focus-visible` swap). */ body.home .hcfb-neighbor-finder { position: relative; isolation: isolate; } body.home .hcfb-neighbor-finder::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; background: var(--wp--preset--color--hcfb-green-text); z-index: -1; } /* * Compact-band pass (per Harry's review): trimmed from the shared * hcfb-xl (4rem) vertical rhythm this section otherwise inherits (see * the shared five-section rule near the top of this file) -- with the * photo gone and the content centered into one narrower column, the * previous spacing read as too tall/billboard-like for what's left. * Same specificity as the shared rule, placed after it in the * cascade, so no !important is needed; scoped to this one section * only, the other four journey sections keep the shared value. */ body.home .hcfb-neighbor-finder { padding-top: var(--wp--preset--spacing--hcfb-lg, 2.5rem); padding-bottom: var(--wp--preset--spacing--hcfb-lg, 2.5rem); } @media (max-width: 768px) { body.home .hcfb-neighbor-finder { padding-top: var(--wp--preset--spacing--hcfb-md, 1.5rem); padding-bottom: var(--wp--preset--spacing--hcfb-md, 1.5rem); } } /* * A subtle orange rule beside the local-review notice, scoped to this * section's hero only -- the shared `__preview-label` rule above (used * by all five journey sections) is left untouched. * * Refinement pass: also brought the notice back to the theme's existing * small/body typography (font-size--small token, regular body weight, * sentence case) instead of the shared rule's uppercase eyebrow-label * treatment, since this is a plain disclosure sentence, not a label. */ body.home .hcfb-neighbor-finder__hero-content .hcfb-neighbor-finder__preview-label { border-left: 3px solid var(--wp--preset--color--hcfb-orange); padding-left: var(--wp--preset--spacing--hcfb-sm, 1rem); font-size: var(--wp--preset--font-size--small, 0.875rem); font-weight: 400; text-transform: none; letter-spacing: normal; } /* * Refinement pass: replaced the previous isolated clamp() (up to * 4.25rem) with an existing homepage H2/section-heading scale used * verbatim elsewhere (.hcfb-home-impact__heading in home.css) rather * than a one-off scale for this component alone -- picked over the * other homepage H2 clamps (which run up to 3.25rem) specifically * because its smaller max is what lets this particular headline settle * into two natural lines in the hero's own column width (paired with * the column-ratio adjustment above), rather than three. No explicit * max-width -- the column width itself is what wraps it now. * * Final structural pass (per Harry's review): scaled down ~10% across * the clamp (2.9rem max -> 2.6rem, 2rem min -> 1.8rem, same reduction * applied to the preferred-value coefficients) -- the heading dominated * the module substantially more than the actual actions beneath it. * Still the largest, boldest element in the section (line-height/ * two-line wrap behavior unchanged), just brought into better * proportion with the supporting copy/CTA/quick paths below it. * * Compact-band pass (per Harry's review): color set to white -- the * section background is now the theme's dark green token * (hcfb-green-text), so the heading's previous inherited navy would be * close to invisible. White gives the strongest, cleanest contrast * (5.19:1) for the single largest text element in the section. */ body.home .hcfb-neighbor-finder__heading { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); line-height: 1.2; margin: 0; color: var(--wp--preset--color--hcfb-surface, #fff); } /* * Compact-band pass (per Harry's review): margins trimmed (was 1.5rem/ * 2.5rem, now 1rem/1.5rem) as part of the overall height reduction -- * every element in this section gave up some of its previous vertical * margin so the whole band reads as tighter, not just the outer section * padding. */ body.home .hcfb-neighbor-finder__accent { display: block; width: 5.5rem; height: 5px; background: var(--wp--preset--color--hcfb-orange); border-radius: 999px; margin: var(--wp--preset--spacing--hcfb-sm, 1rem) 0 var(--wp--preset--spacing--hcfb-md, 1.5rem); } @media (max-width: 768px) { body.home .hcfb-neighbor-finder__accent { width: 4rem; margin: var(--wp--preset--spacing--hcfb-xs, 0.5rem) 0 var(--wp--preset--spacing--hcfb-sm, 1rem); } } /* * Compact-band pass (per Harry's review): color set to cream (the * theme's existing warm off-white token) rather than white -- still a * comfortable 4.78:1 against the new dark green background, but one * step softer than the white heading so the two keep a visible * hierarchy on a dark surface the same way navy heading / near-black * body copy did on the previous light surface. Margin trimmed (was * 2.5rem) as part of the section's overall height reduction. */ body.home .hcfb-neighbor-finder__intro { margin: 0 0 var(--wp--preset--spacing--hcfb-md, 1.5rem); color: var(--wp--preset--color--hcfb-cream, #faf5ec); } body.home .hcfb-neighbor-finder__entry { display: flex; align-items: center; margin-bottom: var(--wp--preset--spacing--hcfb-sm, 1rem); } /* * Real-simplification pass: "Not sure where to start? Answer a few * questions" -- a quiet inline sentence, not a second button competing * with "Find food now" above. Only the lead-in question text is muted, * matching this file's existing convention of pairing a plain prompt * with one clear action; the action itself is a plain `` with no * class, styled by the sitewide default link color rather than * anything in this component (see theme.json's elements.link). * * Compact-band pass (per Harry's review): two contrast problems fixed * here now that the section background is dark green. (1) This * paragraph's own muted color was `hcfb-text-muted` (#5a5a66, meant for * light backgrounds) -- swapped to a muted cream instead, built the * same way as the quick-path tiles elsewhere in this file * (color-mix against an existing token, no new hex color), so the * prompt text stays visibly softer than the heading/CTA while still * clearing 4.5:1 on this background. (2) The action link itself * inherited the sitewide default navy link color (theme.json * elements.link), which measures only 2.62:1 here -- well under the * 4.5:1 text minimum -- so it's explicitly overridden to white below, * along with its `:focus-visible` outline (navy also fails the 3:1 * non-text minimum on this background at 2.62:1; white clears it at * 5.19:1). Margin trimmed as part of the section's height reduction. */ body.home .hcfb-neighbor-finder__guided-link { margin: 0 0 var(--wp--preset--spacing--hcfb-md, 1.5rem); font-size: 0.9rem; color: color-mix(in srgb, var(--wp--preset--color--hcfb-cream) 70%, var(--wp--preset--color--hcfb-green-text)); } body.home .hcfb-neighbor-finder__guided-link a { color: var(--wp--preset--color--hcfb-surface, #fff); } body.home .hcfb-neighbor-finder__guided-link a:focus-visible { outline: 3px solid var(--wp--preset--color--hcfb-surface, #fff); outline-offset: 2px; } /* * Real-simplification pass (per Harry's review): three colored tiles * instead of a row of plain white outline pills -- restrained brand-tint * backgrounds (color-mix against white, not saturated blocks) so the * section gains real, controlled color without adding visual weight. * Equal-width grid instead of organically-wrapping pills so all three * read as one deliberate group. Each tile's own background is a light * pastel regardless of section background, so navy tile text/borders * are unaffected by the compact-band pass's dark green swap -- these * three tiles are the one place in the initial state that still reads * as light chips against the dark band, which is the intended "tiles * feel secondary, don't compete with the primary button" effect. * * Compact-band pass (per Harry's review): `align-self: stretch` added * so this row uses the full centered column width (see * .hero-content's max-width) instead of shrink-wrapping to the tiles' * own minimum content size, now that .hero-content is a centering flex * column rather than a grid track. Margin trimmed as part of the * section's height reduction. */ body.home .hcfb-neighbor-finder__quick-links { align-self: stretch; margin-bottom: 0; } body.home .hcfb-neighbor-finder__quick-links-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; } @media (max-width: 480px) { body.home .hcfb-neighbor-finder__quick-links-list { grid-template-columns: 1fr; } } body.home .hcfb-neighbor-finder__quick-path { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 0.75rem 1rem; border-radius: 14px; border-top: 3px solid transparent; font-size: 0.88rem; font-weight: 700; color: var(--wp--preset--color--hcfb-navy); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } body.home .hcfb-neighbor-finder__quick-path:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(38, 39, 96, 0.14); } /* * Compact-band pass (per Harry's review): outline swapped from navy to * white -- the ring is drawn outside the tile's own light pastel fill, * over the section's dark green background, where navy measures only * 2.62:1 (below the 3:1 non-text-contrast minimum) and white measures * 5.19:1. */ body.home .hcfb-neighbor-finder__quick-path:focus-visible { outline: 3px solid var(--wp--preset--color--hcfb-surface, #fff); outline-offset: 2px; } body.home .hcfb-neighbor-finder__quick-path--orange { background: color-mix(in srgb, var(--wp--preset--color--hcfb-orange) 18%, white); border-top-color: var(--wp--preset--color--hcfb-orange); } body.home .hcfb-neighbor-finder__quick-path--green { background: color-mix(in srgb, var(--wp--preset--color--hcfb-green) 24%, white); border-top-color: var(--wp--preset--color--hcfb-green); } body.home .hcfb-neighbor-finder__quick-path--navy { background: color-mix(in srgb, var(--wp--preset--color--hcfb-navy) 9%, white); border-top-color: var(--wp--preset--color--hcfb-navy); } /* * Compact-band pass (per Harry's review): the photo is removed from * this module entirely (see the pattern file) -- .hero-media/ * .intro-media and their rules (sizing, aspect-ratio, corners, the * results-hide switch, the mobile order/aspect-ratio overrides) are * deleted along with it, rather than left as dead CSS for a now- * nonexistent element. * * Refinement pass: while the funnel is open, replace only the * introduction's own text/buttons in .hero-content (label, heading, * accent, intro copy, entry actions) -- the funnel itself (already a * child of .hero-content) becomes the visible content in that column * instead. Pure CSS, mirroring the :has() convention already used * elsewhere in this file -- no JS change. * * Final structural pass (per Harry's review): .privacy is no longer in * this list -- it moved out of .hero-content entirely (now a child of * .funnel in the pattern file, see there), so this selector's `>` direct- * child match would never have applied to it anyway; removed rather * than left as a dead selector. .guided-link ("Answer a few questions") * is newly added -- it was a pre-existing gap in this list, the one * remaining redundant control that stayed visible next to the open * funnel it itself opens. */ body.home .hcfb-neighbor-finder__hero-content:has(> .hcfb-neighbor-finder__funnel:not([hidden])) > .hcfb-neighbor-finder__preview-label, body.home .hcfb-neighbor-finder__hero-content:has(> .hcfb-neighbor-finder__funnel:not([hidden])) > .hcfb-neighbor-finder__heading, body.home .hcfb-neighbor-finder__hero-content:has(> .hcfb-neighbor-finder__funnel:not([hidden])) > .hcfb-neighbor-finder__accent, body.home .hcfb-neighbor-finder__hero-content:has(> .hcfb-neighbor-finder__funnel:not([hidden])) > .hcfb-neighbor-finder__intro, body.home .hcfb-neighbor-finder__hero-content:has(> .hcfb-neighbor-finder__funnel:not([hidden])) > .hcfb-neighbor-finder__entry, body.home .hcfb-neighbor-finder__hero-content:has(> .hcfb-neighbor-finder__funnel:not([hidden])) > .hcfb-neighbor-finder__guided-link, body.home .hcfb-neighbor-finder__hero-content:has(> .hcfb-neighbor-finder__funnel:not([hidden])) > .hcfb-neighbor-finder__quick-links { display: none; } /* * Real-simplification pass: "Find food now" is now the ONLY button-styled * control in the intro -- solid orange fill, bold weight, its own arrow * icon. It no longer shares a base rule with "Answer a few questions" * (moved below as a quiet inline link, styled with the shared plain- * text-link group further down this file) or "Skip questions" (removed * from this intro entirely -- see the pattern file for why that was * safe). */ body.home .hcfb-neighbor-finder__find-food-now { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1.75rem; border-radius: 999px; font-weight: 700; min-height: 44px; box-sizing: border-box; text-decoration: none; background: var(--wp--preset--color--hcfb-orange); color: var(--wp--preset--color--hcfb-navy); box-shadow: 0 2px 6px rgba(38, 39, 96, 0.16); transition: background-color 0.15s ease, color 0.15s ease; } body.home .hcfb-neighbor-finder__find-food-now:hover { background: var(--wp--preset--color--hcfb-navy); color: var(--wp--preset--color--hcfb-surface); } /* * Compact-band pass (per Harry's review): outline swapped from orange * to white -- with the section background now dark green, orange * against it measures only 2.17:1 (and the previous orange-on-orange * pairing against this button's own fill was never distinct anyway). * White clears the 3:1 non-text-contrast minimum at 5.19:1 and is * clearly visible against both the button's orange fill and the green * section background around it. */ body.home .hcfb-neighbor-finder__find-food-now:focus-visible { outline: 3px solid var(--wp--preset--color--hcfb-surface, #fff); outline-offset: 2px; } body.home .hcfb-neighbor-finder__button-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(38, 39, 96, 0.15); font-size: 0.85rem; line-height: 1; } /* * Real-simplification pass (per Harry's review): no icon, no colored * border, no card/pill treatment -- one quiet line of muted text. * Wording/behavior unchanged. * * Final structural pass (per Harry's review): now lives inside the * funnel form (right after the progress bar, see the pattern file) -- * top margin dropped in favor of bottom margin, since it now follows * .progress (which already carries its own bottom spacing) rather than * following the quick-links row. */ body.home .hcfb-neighbor-finder__privacy { font-size: 0.82rem; color: var(--wp--preset--color--hcfb-text-muted, #5b5b66); margin: 0 0 var(--wp--preset--spacing--hcfb-md, 1.5rem); } /* * Shared plain-text-link treatment for every "quiet" control in this * component: Skip questions (mid-funnel only now), the guided-question * link, Back/start-over/change-answers, etc. `.start` (formerly a * bordered secondary button) now belongs to this group instead of the * button styling above -- underlined navy text, nothing else, so it * reads as clearly secondary to "Find food now". `.view-all` ("View * all food options") was removed from this group in the final * structural pass along with its markup -- audited as redundant with * "Find food now" (identical /find-food/ destination, no params). */ body.home .hcfb-neighbor-finder__start, body.home .hcfb-neighbor-finder__skip, body.home .hcfb-neighbor-finder__start-over, body.home .hcfb-neighbor-finder__back, body.home [data-hcfb-neighbor-change-answers], body.home [data-hcfb-neighbor-start-over], body.home [data-hcfb-neighbor-change-preferences], body.home [data-hcfb-neighbor-clear-preferences] { background: none; border: 0; color: var(--wp--preset--color--hcfb-navy); font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0.5rem 0; } /* Same 44px tap-target convention used throughout this component -- measured at ~31px before this fix (padding-only, no min-height), the one tap-target gap found auditing this packet's own changed flow. */ body.home .hcfb-neighbor-finder__nav .hcfb-neighbor-finder__skip { display: inline-flex; align-items: center; min-height: 44px; } body.home .hcfb-neighbor-finder__remembered { margin-top: var(--wp--preset--spacing--hcfb-sm); display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--hcfb-sm); align-items: center; } /* * The funnel form itself keeps a comfortable but not excessive measure * on very wide screens -- one question at a time reads best when it * isn't stretched across the entire 1200px grid, while its answer * options (below) are free to fan out into 2-3 columns. In practice * this is now capped by .hero-content's own 40rem max-width first (see * above), so this rule mainly matters if that width is ever loosened. * * Compact-band pass (per Harry's review): the funnel is a multi-step * question flow (radio-card options, hints, error text, Back/Continue/ * Skip) originally designed to sit on a light surface -- it previously * inherited that from the section's own light background. Now that the * section is dark green, the funnel gets its own light panel (white, * matching this theme's `hcfb-surface` token) rather than recoloring * every piece of text/border inside it individually; this is the one * light surface inside the section, shown only once a visitor actively * opens the guided questions, not part of the initial compact band. * `align-self: stretch` uses the full centered column width; `text- * align: left` undoes the section-level text centering for this one * child, since question/option text reads best left-aligned, matching * how it read before this pass. `display: flex; flex-direction: column` * with the default `align-items: stretch` (not overridden here) keeps * every child -- progress bar, privacy note, each fieldset, the nav * row -- at the panel's full width rather than shrink-wrapping to its * own content, same as normal block flow would. */ body.home .hcfb-neighbor-finder__funnel { max-width: 56rem; align-self: stretch; display: flex; flex-direction: column; text-align: left; background: var(--wp--preset--color--hcfb-surface, #fff); border-radius: 20px; padding: var(--wp--preset--spacing--hcfb-md, 1.5rem) var(--wp--preset--spacing--hcfb-lg, 2.5rem); box-shadow: 0 0.75rem 2rem -1rem rgba(38, 39, 96, 0.35); } @media (max-width: 768px) { body.home .hcfb-neighbor-finder__funnel { padding: var(--wp--preset--spacing--hcfb-md, 1.5rem); } } body.home .hcfb-neighbor-finder__funnel fieldset { border: 0; padding: 0; margin: var(--wp--preset--spacing--hcfb-md, 1.5rem) 0; } /* * Refinement pass: uses the theme's existing subsection-heading * treatment (the same Montserrat-heading family/color/weight the global * `styles.elements.heading` already applies, at the `x-large` preset * size -- theme.json's step between the base body size and the section * H2 scale above) instead of an ad hoc 1.15rem/700, so each question * reads as a proper subheading under the section title. */ body.home .hcfb-neighbor-finder__funnel legend { font-family: var(--wp--preset--font-family--hcfb-heading); color: var(--wp--preset--color--hcfb-navy); font-weight: 700; font-size: var(--wp--preset--font-size--x-large, clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem)); line-height: 1.2; margin-bottom: var(--wp--preset--spacing--hcfb-sm); } /* * Phase 7A1C: answer options use a responsive grid at desktop (2-3 * columns depending on available width and label length via auto-fit) * instead of one full-width row per option, giving them more breathing * room on the wider journey grid. `auto-fit` with a 220px floor * naturally collapses back to a single column on narrow viewports with * no separate mobile-only rule required -- answer controls stay * full-width and easy to tap there automatically. */ body.home .hcfb-neighbor-finder__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.5rem 0.75rem; } @media (max-width: 480px) { body.home .hcfb-neighbor-finder__options { grid-template-columns: minmax(0, 1fr); } } /* * Radio-card controls: each option is a large, clearly-bordered tap * target rather than a bare radio dot + text row, per the Phase 7A1B * "large accessible answer buttons or radio-card controls" requirement. * The native ``/`` stays * visible and in normal tab order -- only the surrounding label gets * the card treatment. */ body.home .hcfb-neighbor-finder__option { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; margin-bottom: 0; border: 2px solid var(--wp--preset--color--hcfb-border, #dcdce4); border-radius: 10px; cursor: pointer; height: 100%; } body.home .hcfb-neighbor-finder__option:has(input:checked) { border-color: var(--wp--preset--color--hcfb-green); background: var(--wp--preset--color--hcfb-cream); } body.home .hcfb-neighbor-finder__option:has(input:focus-visible) { outline: 3px solid var(--wp--preset--color--hcfb-orange, #ff8a3d); outline-offset: 2px; } body.home .hcfb-neighbor-finder__option input { margin-top: 0.2rem; flex-shrink: 0; width: 1.15rem; height: 1.15rem; } body.home .hcfb-neighbor-finder__field-label { display: block; font-weight: 600; margin: var(--wp--preset--spacing--hcfb-sm) 0 0.25rem; } body.home .hcfb-neighbor-finder__hint { font-size: var(--wp--preset--font-size--small, 0.875rem); color: var(--wp--preset--color--hcfb-text-muted, #5b5b66); } body.home .hcfb-neighbor-finder__field-error { color: #b3261e; font-weight: 600; } body.home .hcfb-neighbor-finder__progress { position: relative; height: 6px; background: var(--wp--preset--color--hcfb-border, #dcdce4); border-radius: 999px; margin-bottom: var(--wp--preset--spacing--hcfb-sm); } body.home .hcfb-neighbor-finder__progress-bar { position: absolute; left: 0; top: 0; height: 100%; background: var(--wp--preset--color--hcfb-green); border-radius: 999px; transition: width 0.2s ease; } @media (prefers-reduced-motion: reduce) { body.home .hcfb-neighbor-finder__progress-bar { transition: none; } } /* Existing small-label treatment (font-size--small token, muted color, * semibold) -- same convention this file already uses for hints/notes, * rather than a bare unstyled 0.85rem string. */ body.home .hcfb-neighbor-finder__progress-text { display: block; font-size: var(--wp--preset--font-size--small, 0.875rem); font-weight: 600; color: var(--wp--preset--color--hcfb-text-muted, #5b5b66); } body.home .hcfb-neighbor-finder__error-summary { background: #fdecea; border: 1px solid #d93025; color: #611a15; padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: var(--wp--preset--spacing--hcfb-md); } body.home .hcfb-neighbor-finder__nav { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--hcfb-sm); align-items: center; } body.home .hcfb-neighbor-finder__remember { display: block; margin-top: var(--wp--preset--spacing--hcfb-md); font-weight: 600; } body.home .hcfb-neighbor-finder__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--hcfb-md, 1.5rem); margin: var(--wp--preset--spacing--hcfb-md) 0; } body.home .hcfb-neighbor-finder__card { background: var(--wp--preset--color--hcfb-cream); border-radius: 12px; padding: var(--wp--preset--spacing--hcfb-md, 1.5rem); } body.home .hcfb-neighbor-finder__card-name { margin: 0 0 0.5rem; font-size: 1.15rem; } body.home .hcfb-neighbor-finder__card-disclaimer { font-size: 0.8rem; color: var(--wp--preset--color--hcfb-text-muted, #5b5b66); } body.home .hcfb-neighbor-finder__alternative { grid-column: 1 / -1; font-weight: 600; } body.home .hcfb-neighbor-finder__results-actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--hcfb-sm, 1rem); align-items: center; } /* * Phase 7A1B: the complete synthetic directory is now a native *
, collapsed by default -- this is the single biggest * contributor to a short initial page state. `` is styled to * look like the section's other disclosure/action controls so it reads * as an obvious, tappable affordance rather than plain text. * * Refinement pass: given a designed resting state (cream/white card, * border, custom chevron replacing the native marker) instead of a * plain top-border rule, so it feels like part of the section. Content * and
/ behavior are unchanged; only this container * and its summary label are restyled -- the result cards inside stay * as they are. */ body.home .hcfb-neighbor-finder__all-services { margin-top: var(--wp--preset--spacing--hcfb-lg, 2.5rem); padding: 0 var(--wp--preset--spacing--hcfb-md, 1.5rem); background: var(--wp--preset--color--hcfb-surface, #fff); border: 1px solid var(--wp--preset--color--hcfb-border, #dcdce4); border-radius: 16px; } body.home .hcfb-neighbor-finder__all-services[open] { padding-bottom: var(--wp--preset--spacing--hcfb-md, 1.5rem); } body.home .hcfb-neighbor-finder__all-services-summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--hcfb-sm, 1rem); font-weight: 600; font-size: 1.1rem; color: var(--wp--preset--color--hcfb-navy); cursor: pointer; padding: 1rem 0; min-height: 44px; box-sizing: border-box; } body.home .hcfb-neighbor-finder__all-services-summary::-webkit-details-marker { display: none; } body.home .hcfb-neighbor-finder__all-services-summary::after { content: ''; flex-shrink: 0; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--wp--preset--color--hcfb-orange); border-bottom: 2px solid var(--wp--preset--color--hcfb-orange); transform: rotate(45deg); transition: transform 0.2s ease; } body.home .hcfb-neighbor-finder__all-services[open] .hcfb-neighbor-finder__all-services-summary::after { transform: rotate(-135deg); } @media (prefers-reduced-motion: reduce) { body.home .hcfb-neighbor-finder__all-services-summary::after { transition: none; } } body.home .hcfb-neighbor-finder__all-services-summary:focus-visible { outline: 3px solid var(--wp--preset--color--hcfb-orange, #ff8a3d); outline-offset: 3px; border-radius: 8px; } body.home .hcfb-neighbor-finder__all-services-note { font-size: 0.85rem; color: var(--wp--preset--color--hcfb-text-muted, #5b5b66); margin-top: 0; padding-bottom: 0.5rem; } body.home .hcfb-neighbor-finder__all-services ul { list-style: none; padding: 0; margin-top: var(--wp--preset--spacing--hcfb-md, 1.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--hcfb-md, 1.5rem); } body.home .hcfb-neighbor-finder__all-services-name { font-weight: 700; margin-bottom: 0.25rem; } /* "View all matching services" -- the extra ranked recommendations, * distinct from the full unfiltered directory above. */ body.home .hcfb-neighbor-finder__more-matches { margin-top: var(--wp--preset--spacing--hcfb-md, 1.5rem); } body.home .hcfb-neighbor-finder__more-matches summary { font-weight: 600; cursor: pointer; padding: 0.5rem 0; } body.home .hcfb-neighbor-finder__more-matches .hcfb-neighbor-finder__cards { margin-top: var(--wp--preset--spacing--hcfb-md, 1.5rem); } @media (max-width: 1024px) { body.home .hcfb-neighbor-finder__cards, body.home .hcfb-neighbor-finder__all-services ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { body.home .hcfb-neighbor-finder__cards, body.home .hcfb-neighbor-finder__all-services ul { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------------------- */ /* Map bridge -- homepage teaser for /food-insecurity/ */ /* ---------------------------------------------------------------- */ /* * Storytelling iteration 2 (per Harry's review): simplified from a two- * mode toggle (a real map banner alongside an abstract "Find Food coming * soon" stub) down to a single short heading/intro, the real Food Map * banner as a small/controlled preview, and one clear CTA to the real * /food-insecurity/ page -- see inc/food-insecurity-sections.php's own * pattern file docblock for the full reasoning. The toggle, its two radio * inputs, the abstract CSS-only "canvas" placeholder, and the pure-CSS * :has() panel-switching rules that all supported the removed "Find Food" * mode are gone along with that markup. */ /* * Storytelling iteration 2 (per Harry's review): this used to be full-bleed * (100vw edge-to-edge), matching the old two-mode toggle design. Removed * that escape entirely -- a "small/controlled map... concise preview" (this * pass's own instruction) reads as contained within the section's normal * measure, not as a second full-width band competing with the interactive * Food Map page it's teasing. This also fixes a real layout bug the * full-bleed version produced once the toggle/second panel were removed: * with only one (full-bleed) panel left, the heading/intro above it (still * constrained to the section's normal width) and the now-100vw-wide map * below it no longer shared a left edge, leaving a large, awkward empty gap * to the map's left at desktop widths. Containing this wrapper to the same * width as everything else in the section fixes both issues at once. The * plugin's own .hcfb-food-map__inner (max-width: 75rem) still re-centers * the map/copy/stats/CTA inside whatever width contains it, so no plugin * CSS needed to change. */ /* * Narrow correction pass (per Harry's review): trimmed from * hcfb-sm (1rem) -- measured, together with the plugin's own banner- * specific .hcfb-food-map__inner padding-top (1.5rem, overridden just * below), a 40px structural gap between the intro paragraph and the * map/controls area before this fix, on top of whatever visual gap the * map-frame's own padding adds beneath that -- read as more space than * this one paragraph-to-content transition needed. */ body.home .hcfb-neighbor-map-bridge__preview { margin-top: var(--wp--preset--spacing--hcfb-xs, 0.5rem); } /* * Narrow correction pass (per Harry's review): the plugin's own base * banner rule (assets/css/hcfb-food-map.css) sets * .hcfb-food-map--banner .hcfb-food-map__inner { padding-top: 1.5rem; } * -- reduced here, homepage-only, as the other half of the intro-to- * content gap trim above. */ #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__inner { padding-top: var(--wp--preset--spacing--hcfb-sm, 1rem); } /* * The embedded Food Map banner carries its own eyebrow/heading/intro * ("Food insecurity in Southwest Florida" / "Hunger affects every * community." / "Explore food insecurity..."), which duplicated this * section's own new "Hunger Across Every County" heading/intro almost * word for word -- two headings stacked directly on top of each other, * exactly the "tell the same story twice" this pass's own design * principle warns against. CSS-only, scoped to this ONE instance of the * banner (not the plugin's own stylesheet, not any other page that embeds * it) -- the map/data/controls themselves are completely unaffected, only * this one redundant text block is hidden here. */ body.home #hcfb-neighbor-map-bridge .hcfb-food-map__eyebrow, body.home #hcfb-neighbor-map-bridge .hcfb-food-map__heading, body.home #hcfb-neighbor-map-bridge .hcfb-food-map__intro { display: none; } /* * Top-alignment pass (per Harry's review): hiding the three children * above still left their empty
wrapper * itself as a real grid item occupying the "introduction" row -- with * .hcfb-food-map__map-region now set to align-self: start (see the map * redesign rules below), that empty-but-present row was still enough * to keep the map's top above the "Explore by county" heading's top * instead of level with it. Hiding the wrapper itself removes the row * entirely rather than leaving an empty one. */ body.home #hcfb-neighbor-map-bridge .hcfb-food-map__introduction { display: none; } /* Still used by this pattern's own shortcode_exists()-false fallback text. */ body.home .hcfb-neighbor-map-bridge__caption { margin: var(--wp--preset--spacing--hcfb-md, 1.5rem) 0 var(--wp--preset--spacing--hcfb-sm, 1rem); font-weight: 600; } /* * Duplicate-CTA removal pass (per Harry's review): the lower centered * "Explore the Need" button these rules styled is removed from * patterns/neighbor-map-bridge-placeholder.php -- it was redundant * with the embedded banner's own CTA, now relabeled "Explore the * Need: Interactive Map" (hcfb-food-map/templates/banner.php) to * carry this section's original "Explore the Need" framing forward as * the section's one remaining action. Removed rather than left as * dead CSS for markup that no longer exists. */ /* * Map redesign pass (per Harry's review): a stronger, HCFB-branded * presentation for the embedded Food Map banner * ([hcfb_food_map view="banner"], hcfb-food-map/templates/banner.php). * Every rule below is scoped via the #hcfb-neighbor-map-bridge id -- * the same homepage-only-override convention already used above for * hiding the banner's own duplicate eyebrow/heading/intro -- rather * than editing the plugin's own stylesheet (assets/css/ * hcfb-food-map.css), which stays completely untouched. This view is * only ever embedded on this one homepage section (confirmed via * repo-wide search before this pass), so scoping is a safety * discipline, not a functional requirement, but it keeps the plugin's * own reusable component free of homepage-specific styling. Geometry, * data, selection logic (assets/js/hcfb-food-map.js, untouched), and * the CTA/destination are all unaffected -- presentation only. * * Simplification pass (per Harry's review): every decorative * background behind the map -- the solid navy rectangle from the * first pass, then the fluid orange field from the two passes after * that -- is removed outright. The map now sits directly on the * section's own white background, no card/panel/tint/shadow of any * kind behind it. Color moved onto the counties themselves instead: * orange by default (Service Area), true white for every unselected * county once one is individually selected, navy strokes/labels * throughout -- no cream, tint, gray, or pale blue anywhere in this * module. */ #hcfb-neighbor-map-bridge .hcfb-food-map--banner { background: transparent; } /* * Two-column desktop/tablet split (was an even ~52/48, then an * asymmetric ~58/42 -- pulled back slightly here since the map's own * visual footprint is also reduced below, so the previous wider map * column read as excess empty space rather than content). Gated to * min-width: 601px -- the plugin's own mobile stack (assets/css/ * hcfb-food-map.css's `@media (max-width: 600px)`) sets a single * grid-template-columns: minmax(0, 1fr) there; without this guard, * this override's higher specificity (one id vs. two classes) would * win the cascade even inside that media query and break the mobile * single-column stack -- this exact regression was caught and fixed * during the previous pass's own validation, so the guard stays. */ @media (min-width: 601px) { /* * Top-alignment fix (per Harry's review): the base plugin grid * (assets/css/hcfb-food-map.css) has THREE row areas -- * "introduction" (row 1, right column only) then "controls" (row 2) * then "note" (row 3, under map only) -- so "controls" naturally * starts one row below "map", which spans all three rows from row * 1. Hiding introduction's content doesn't change that row * structure; align-self alone can't fix a real row offset. Redefines * the areas so "map" and "controls" both start in row 1 together -- * "note" (the Census disclosure) still sits under the map only, in * row 2 -- which is what actually brings their tops level, not just * a vertical-alignment tweak within the old structure. */ #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__banner-layout { grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 1fr); grid-template-areas: "map controls" "note controls"; } #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__map-region { align-self: start; } } /* * Simplification pass (per Harry's review): the map-frame's own * background, the county-map's shrink-and-recenter sizing, and the * mobile-labels z-index were ALL added purely to leave room for and * contain the now-removed orange field -- none of that had any other * purpose, so all of it is removed rather than left behind as unused * leftovers. The map returns to filling its frame at its natural, * full size, directly on the section's plain white background. */ #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__map-frame { background: transparent; } /* * County fills/strokes/labels, simplified to three flat colors only -- * orange, white, navy -- no tint, cream, gray, or pale blue anywhere: * - .is-service-area (the default -- every shape carries this class on * initial load, templates/banner.php): the established HCFB orange * fill, navy stroke. Identical for all five counties -- explicitly * not a choropleth. * - Base (no state class): true white fill, navy stroke. This is what * the OTHER four counties fall back to once one is individually * selected -- selectCounty() (assets/js/hcfb-food-map.js, untouched) * removes .is-service-area from every shape and adds .is-selected to * only the chosen one, so the remaining four have no class at all * and land here. Never used at initial page load, since every shape * starts with .is-service-area already applied. * - .is-selected (one county individually selected): the same orange * fill as the default state -- "keep the selected county orange," * not a second fill color -- with a visibly thicker navy stroke so * the selection is apparent through more than the color it already * shares with the default state (and, surrounded by four now-white * counties, through contrast with its neighbors too). * - .is-preview (hover/keyboard-focus on a county button or shape): * stroke-width only, no fill change -- works identically whether the * hovered shape currently reads white or orange. * Declaration order (equal specificity throughout -- one id + one or * two classes each -- so later rules win ties): base, then * service-area, then preview, then selected. */ #hcfb-neighbor-map-bridge .hcfb-food-map__county-shape { fill: var(--wp--preset--color--hcfb-surface); stroke: var(--wp--preset--color--hcfb-navy); stroke-width: 1.5; stroke-opacity: 1; } #hcfb-neighbor-map-bridge .hcfb-food-map__county-shape.is-service-area { fill: var(--wp--preset--color--hcfb-orange); } #hcfb-neighbor-map-bridge .hcfb-food-map__county-shape.is-preview { stroke-width: 2.5; } #hcfb-neighbor-map-bridge .hcfb-food-map__county-shape.is-selected { fill: var(--wp--preset--color--hcfb-orange); stroke-width: 3; } /* * Dynamic label-color pass (per Harry's review): a county's label must * always be legible against ITS OWN county's current fill -- navy on * the white (unselected) counties, white on whichever counties are * currently orange (every county by default, or just the one selected * county). The shapes and labels are separate SVG groups (siblings, * not parent/child), so a plain descendant/sibling selector can't link * "this label" to "that shape's current state" -- five explicit * :has() rules below, one per real county FIPS (Charlotte 12015, * Collier 12021, Glades 12043, Hendry 12051, Lee 12071 -- stable, * federally assigned Census codes), each keyed off the matching * data-hcfb-map-county/-label attribute pair (the latter added to * templates/banner.php's elements specifically for this). Not * read by any JS -- selectCounty() (assets/js/hcfb-food-map.js, * untouched) only ever toggles the shapes' own is-service-area/ * is-selected classes; these rules just react to that. * * Base rule below is the default (navy, no halo) -- since every * orange-producing state (.is-service-area or .is-selected) is * exhaustively listed below, the base rule in practice only ever * renders on a county's own white fill, where a white halo would be * invisible anyway, so none is set. */ #hcfb-neighbor-map-bridge .hcfb-food-map__county-labels { fill: var(--wp--preset--color--hcfb-navy); } #hcfb-neighbor-map-bridge .hcfb-food-map__county-labels text { stroke: none; } /* * White label on an orange county: the plugin's own base label rule * (assets/css/hcfb-food-map.css) paired a navy fill with a 4px white * halo stroke, sized for legibility against a photo or a varied * background -- both wrong once a label itself needs to be white on * orange (a white halo around white fill has no effect, and the navy * fill this rule assumed is exactly what's being replaced here). A * clean white fill with a restrained ~1px navy stroke -- thin enough * to read as a crisp edge, not the thick/fuzzy/embossed outline this * pass was asked to avoid -- keeps the label readable at a boundary * line without competing with the white fill itself. */ #hcfb-neighbor-map-bridge svg:has([data-hcfb-map-county="12015"]:is(.is-service-area, .is-selected)) [data-hcfb-map-label="12015"], #hcfb-neighbor-map-bridge svg:has([data-hcfb-map-county="12021"]:is(.is-service-area, .is-selected)) [data-hcfb-map-label="12021"], #hcfb-neighbor-map-bridge svg:has([data-hcfb-map-county="12043"]:is(.is-service-area, .is-selected)) [data-hcfb-map-label="12043"], #hcfb-neighbor-map-bridge svg:has([data-hcfb-map-county="12051"]:is(.is-service-area, .is-selected)) [data-hcfb-map-label="12051"], #hcfb-neighbor-map-bridge svg:has([data-hcfb-map-county="12071"]:is(.is-service-area, .is-selected)) [data-hcfb-map-label="12071"] { fill: var(--wp--preset--color--hcfb-surface); stroke: var(--wp--preset--color--hcfb-navy); stroke-width: 1px; paint-order: stroke; } /* * Mobile-label layer: below the plugin's own 600px breakpoint, the SVG * labels above are hidden entirely and this separate HTML * .mobile-label layer (plain elements, positioned by CSS custom * properties, templates/banner.php) takes over -- it needed its own, * parallel fix, not just the SVG rules above, since it is a completely * different set of DOM elements. The plugin's own base rule (assets/ * css/hcfb-food-map.css) set an unconditional navy color with a 1px * cream text-shadow halo in all four directions -- wrong on two counts * once checked against this pass's own requirements: never dynamic (a * navy label sat on the orange default/selected fill just as often as * on white), and cream, which this module was already asked to remove * entirely. Same fix as the SVG labels, same five FIPS-keyed :has() * rules (reusing the identical data-hcfb-map-label attribute added to * the .mobile-label itself this time, disambiguated from the * SVG rule above by requiring the .hcfb-food-map__mobile-label * class too) -- navy by default, white with a thin ~1px navy * text-shadow (the nearest HTML-text equivalent of an SVG stroke) when * that county is currently orange. */ #hcfb-neighbor-map-bridge .hcfb-food-map__mobile-label { color: var(--wp--preset--color--hcfb-navy); text-shadow: none; } #hcfb-neighbor-map-bridge:has([data-hcfb-map-county="12015"]:is(.is-service-area, .is-selected)) [data-hcfb-map-label="12015"].hcfb-food-map__mobile-label, #hcfb-neighbor-map-bridge:has([data-hcfb-map-county="12021"]:is(.is-service-area, .is-selected)) [data-hcfb-map-label="12021"].hcfb-food-map__mobile-label, #hcfb-neighbor-map-bridge:has([data-hcfb-map-county="12043"]:is(.is-service-area, .is-selected)) [data-hcfb-map-label="12043"].hcfb-food-map__mobile-label, #hcfb-neighbor-map-bridge:has([data-hcfb-map-county="12051"]:is(.is-service-area, .is-selected)) [data-hcfb-map-label="12051"].hcfb-food-map__mobile-label, #hcfb-neighbor-map-bridge:has([data-hcfb-map-county="12071"]:is(.is-service-area, .is-selected)) [data-hcfb-map-label="12071"].hcfb-food-map__mobile-label { color: var(--wp--preset--color--hcfb-surface); text-shadow: -1px -1px 0 var(--wp--preset--color--hcfb-navy), 1px -1px 0 var(--wp--preset--color--hcfb-navy), -1px 1px 0 var(--wp--preset--color--hcfb-navy), 1px 1px 0 var(--wp--preset--color--hcfb-navy); } /* * Balanced control grid (was a flex-wrap row of compact chips before * that, and a 2-column grid of full-width pills before that). Service * Area is now the county-list's own first
  • (templates/banner.php), * so all six controls -- Service Area plus five counties -- are equal * grid items of the same three-by-two grid at wide desktop widths. * White surface / navy border+text throughout -- never orange, so the * controls never compete with the counties' own orange/white states. */ #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__county-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } /* * The plugin's own base stylesheet (assets/css/hcfb-food-map.css) has * `.county-list li:last-child { grid-column: 1 / -1; }`, written for * its original 5-item county-only list (an odd count, so the last item * spanned full-width to avoid a lone half-empty row). This list is now * 6 items (Service Area folded in, templates/banner.php) -- an even * count at both 2 and 3 columns, so that rule is no longer correct and * would otherwise stretch "Lee County" alone across the full grid * width. Reset to the grid's own default placement. */ #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__county-list li:last-child { grid-column: auto; } /* * Three columns only once there's genuinely enough room in the ~42% * controls column for "Charlotte County"/"Collier County"/etc. to sit * on one line -- confirmed via a live 1024px screenshot during this * pass's own validation that those labels wrap to two lines at * 900-1024px viewport widths in this column's actual (fractional, not * full-viewport) width, exactly the "crowd or wrap" case this pass * asks to avoid. 1280px leaves a clear margin above the 1024px * breakpoint this pass explicitly validates against. */ @media (min-width: 1280px) { #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__county-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__county-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.75rem; padding: 0.55rem 0.75rem; border-radius: 10px; /* * Staff Review comment 6793 (2026-09-24, Ryan-directed): county names * (Glades, etc.) read too small -- bumped from 0.88rem to read a * little more prominent, still comfortably inside the 2.75rem * min-height/0.55rem vertical padding above. */ font-size: 1rem; font-weight: 600; text-align: center; background: var(--wp--preset--color--hcfb-surface); color: var(--wp--preset--color--hcfb-navy); } #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__county-button--service-area { margin-bottom: 0; } /* * Active control: solid navy fill / white text -- a real fill change, * not just a hue shift, so the state reads through shape/fill as well * as color. Replaces the previous orange-fill-plus-inset-ring * treatment, which combined with the button's own 2px border read as * an oversized double ring around the active chip. */ #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__county-button[aria-pressed="true"] { background: var(--wp--preset--color--hcfb-navy); color: var(--wp--preset--color--hcfb-surface); box-shadow: none; } #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__county-button:hover, #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__county-button:focus-visible { background: color-mix(in srgb, var(--wp--preset--color--hcfb-navy) 10%, var(--wp--preset--color--hcfb-surface)); } #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__county-button[aria-pressed="true"]:hover, #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__county-button[aria-pressed="true"]:focus-visible { background: var(--wp--preset--color--hcfb-navy); } /* * Information panel: a plain content block (was a bordered/backgrounded * card, before that a heavier cream box with a thick left stripe) -- * no border, no background of its own (inherits the white page), just * a short accent rule above the heading and restrained spacing. */ #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__summary { border: 0; border-radius: 0; background: transparent; padding: 0; margin-top: var(--wp--preset--spacing--hcfb-sm, 1rem); } #hcfb-neighbor-map-bridge .hcfb-food-map--banner .hcfb-food-map__summary::before { content: ""; display: block; width: 2.5rem; height: 3px; margin-bottom: 0.6rem; background: var(--wp--preset--color--hcfb-orange); border-radius: 999px; } /* * Redundant nested Service Area card fix: .summary-default (the * concise "Our Southwest Florida service area / Serving Charlotte, * Collier, Glades, Hendry and Lee counties." pair, templates/ * banner.php) and .summary-detail (the existing real per-county * stats/fail-closed-fallback markup, completely unchanged) are * siblings inside the one result container selectCounty() already * targets. Exactly one shows at a time, purely via CSS keyed off which * button already carries aria-pressed="true" -- no JS change, since * selectCounty() already maintains that attribute correctly for every * click. When any real county (a fips other than "service-area") is * pressed, the default flips to the real detail content; reselecting * Service Area flips it back. */ #hcfb-neighbor-map-bridge .hcfb-food-map__summary-default { display: block; } #hcfb-neighbor-map-bridge .hcfb-food-map__summary-detail { display: none; } #hcfb-neighbor-map-bridge:has([data-hcfb-county][data-county-fips]:not([data-county-fips="service-area"])[aria-pressed="true"]) .hcfb-food-map__summary-default { display: none; } #hcfb-neighbor-map-bridge:has([data-hcfb-county][data-county-fips]:not([data-county-fips="service-area"])[aria-pressed="true"]) .hcfb-food-map__summary-detail { display: block; } #hcfb-neighbor-map-bridge .hcfb-food-map__summary-default-lead { margin: 0 0 0.35rem; color: var(--wp--preset--color--hcfb-navy); font-weight: 700; font-size: 1.05rem; } #hcfb-neighbor-map-bridge .hcfb-food-map__summary-default-line { margin: 0; color: var(--wp--preset--color--hcfb-text-muted, #5a5a66); font-size: 0.95rem; } /* ---------------------------------------------------------------- */ /* Ways to help */ /* ---------------------------------------------------------------- */ /* * Card-soup reduction pass (per Harry's review): the previous tiered * 6-column card grid (Phase 7A1C) put all five actions in the same * cream/border-top card treatment at two sizes -- still read as "five * cards" rather than one clear primary pair plus lightweight secondary * links. Replaced with two genuinely different treatments: a 2-up photo * feature grid for Donate/Volunteer (no card background of their own -- * the photo carries the visual weight, matching the "let photography * carry visual energy, avoid another heavy section" direction), and a * plain text row for the other three (see .secondary-list below). * * Reposition/graphic-strength pass (per Harry's review): the section * was disappearing into the white page once photography lost its color * accent. Two fixes, both reusing techniques already established * elsewhere in this codebase rather than inventing new ones: (1) a * full-width cream band behind the whole section, same full-bleed * pseudo-element technique as the dark-green Find Food band below (see * .hcfb-neighbor-finder::before) -- a light surface, not another giant * rounded card, so the section reads as a deliberate homepage chapter * instead of blending into the page background; (2) an offset brand- * color panel behind each primary photo, restoring the same "photo + * one offset color block" treatment already approved for the Feeding * Children/Families/Seniors section immediately below this one (see * .primary-media::before further down). No dark-green here -- that * color moment stays exclusive to the Find Food band, per this pass's * instructions. */ body.home .hcfb-neighbor-ways-to-help { position: relative; isolation: isolate; } body.home .hcfb-neighbor-ways-to-help::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; background: var(--wp--preset--color--hcfb-cream); z-index: -1; } /* * Final spacing/heading cleanup pass (per Harry's review): the intro * sentence is removed entirely (see the pattern file) -- "Ways to Help" * now reads as the direct, centered introduction to both the Donate/ * Volunteer pair and the secondary row beneath it, per this pass's own * framing. */ body.home .hcfb-neighbor-ways-to-help__heading { text-align: center; } body.home .hcfb-neighbor-ways-to-help__primary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--hcfb-lg, 2.5rem); margin-top: var(--wp--preset--spacing--hcfb-lg, 2.5rem); } body.home .hcfb-neighbor-ways-to-help__primary-card { display: flex; flex-direction: column; } /* * Offset color panel behind the photo -- same technique/values as * .hcfb-home-choice__media::before (home.css): one ::before pseudo- * element, percentage-based offsets so it scales with the frame, a * slight rotation so it reads as an intentional angled backing shape * rather than a symmetric border, one flat brand color, no gradient. * .primary-media itself switches to overflow:visible so the panel can * peek past the photo's own edges; the photo now clips to its rounded * corners via the new .primary-photo inner wrapper instead (mirroring * .hcfb-home-choice__panel-photo), so this doesn't reintroduce any * bleed on the image itself. z-index keeps the panel behind the photo. * * Final spacing cleanup pass (per Harry's review): margin-bottom * increased from hcfb-sm (1rem) -- the accent panel's own `bottom: -5%` * offset (above) bleeds below .primary-media's own box by ~5% of its * height, which was eating most of that 1rem margin, so the heading * below it read as butting directly against the accent. hcfb-lg * (2.5rem) leaves a clear, consistent ~1-1.5rem visible gap after that * bleed is accounted for, measured in the browser across breakpoints. */ body.home .hcfb-neighbor-ways-to-help__primary-media { position: relative; aspect-ratio: 4 / 3; overflow: visible; margin-bottom: var(--wp--preset--spacing--hcfb-lg, 2.5rem); } body.home .hcfb-neighbor-ways-to-help__primary-media::before { content: ""; position: absolute; top: -4%; left: -4%; right: 2%; bottom: -5%; border-radius: 12px; transform: rotate(-2deg); z-index: 0; } body.home .hcfb-neighbor-ways-to-help__primary-media--orange::before { background: var(--wp--preset--color--hcfb-orange); } body.home .hcfb-neighbor-ways-to-help__primary-media--green::before { background: var(--wp--preset--color--hcfb-green); } body.home .hcfb-neighbor-ways-to-help__primary-photo { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 20px; box-shadow: 0 0.75rem 1.75rem -1rem rgba(38, 39, 96, 0.28); } body.home .hcfb-neighbor-ways-to-help__primary-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } body.home .hcfb-neighbor-ways-to-help__primary-title { font-family: var(--wp--preset--font-family--hcfb-heading); font-weight: 700; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem); color: var(--wp--preset--color--hcfb-navy); margin: 0 0 0.4rem; } body.home .hcfb-neighbor-ways-to-help__primary-line { color: var(--wp--preset--color--hcfb-text-muted, #5b5b66); margin: 0 0 var(--wp--preset--spacing--hcfb-sm, 1rem); max-width: 32ch; } /* * Matched-pair button CTA, same solid orange/navy pill treatment * already established sitewide (e.g. .hcfb-neighbor-dual-path__cta, * .hcfb-neighbor-finder__find-food-now) rather than a new button * style -- reads as intentional and clickable in place of the previous * plain "Learn more" text link. align-self: flex-start keeps the * button its own natural width instead of stretching full column * width. No custom focus-visible override needed -- this section sits * on the normal light surface, where the sitewide default navy focus * outline (style.css) already has strong contrast. */ body.home .hcfb-neighbor-ways-to-help__primary-cta { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.85rem 1.75rem; border-radius: 999px; font-weight: 700; text-decoration: none; background: var(--wp--preset--color--hcfb-orange); color: var(--wp--preset--color--hcfb-navy); box-shadow: 0 2px 6px rgba(38, 39, 96, 0.16); transition: background-color 0.15s ease, color 0.15s ease; } body.home .hcfb-neighbor-ways-to-help__primary-cta:hover, body.home .hcfb-neighbor-ways-to-help__primary-cta:focus-visible { background: var(--wp--preset--color--hcfb-navy); color: var(--wp--preset--color--hcfb-surface); } @media (max-width: 768px) { body.home .hcfb-neighbor-ways-to-help__primary-grid { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--hcfb-lg, 2.5rem); margin-top: var(--wp--preset--spacing--hcfb-md, 1.5rem); } } /* * Secondary actions (Give Food, Fundraise, Corporate & Community * Support): deliberately NOT another set of cards -- a small uppercase * label, then plain heading/description/link items with a thin * existing-brand top accent (the same orange/green/navy tokens and * order the Find Food quick-path tiles use elsewhere on this homepage). * No border, radius-as-a-box-edge, or shadow, so these stay * substantially lighter weight than the Donate/Volunteer pair above. * * Graphic-strength pass (per Harry's review): one very subtle brand- * tint background added beneath each item (per this pass's "optional... * if needed" allowance) so the row reads as intentionally designed * rather than plain navigation text -- built with color-mix against the * section's own cream background (same technique as the Find Food * quick-path tiles, just a much lighter 6% mix so it stays a quiet * tint, not a visible card edge). Still no border/shadow and the tint * is barely distinguishable from the cream section behind it -- this is * a texture change, not a card. */ body.home .hcfb-neighbor-ways-to-help__secondary-label { margin: var(--wp--preset--spacing--hcfb-lg, 2.5rem) 0 var(--wp--preset--spacing--hcfb-sm, 1rem); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--hcfb-text-muted, #5b5b66); } body.home .hcfb-neighbor-ways-to-help__secondary-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--hcfb-lg, 2.5rem); } body.home .hcfb-neighbor-ways-to-help__secondary-item { border-top: 3px solid transparent; border-radius: 0 0 10px 10px; padding: 0.85rem 1rem 1.1rem; } body.home .hcfb-neighbor-ways-to-help__secondary-item--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-cream)); } body.home .hcfb-neighbor-ways-to-help__secondary-item--green { border-top-color: var(--wp--preset--color--hcfb-green); background: color-mix(in srgb, var(--wp--preset--color--hcfb-green) 8%, var(--wp--preset--color--hcfb-cream)); } body.home .hcfb-neighbor-ways-to-help__secondary-item--navy { border-top-color: var(--wp--preset--color--hcfb-navy); background: color-mix(in srgb, var(--wp--preset--color--hcfb-navy) 4%, var(--wp--preset--color--hcfb-cream)); } body.home .hcfb-neighbor-ways-to-help__secondary-title { font-weight: 700; font-size: 1.05rem; color: var(--wp--preset--color--hcfb-navy); margin: 0 0 0.3rem; } body.home .hcfb-neighbor-ways-to-help__secondary-line { font-size: 0.92rem; color: var(--wp--preset--color--hcfb-text-muted, #5b5b66); margin: 0 0 0.5rem; } body.home .hcfb-neighbor-ways-to-help__secondary-link { font-weight: 600; color: var(--wp--preset--color--hcfb-navy); text-decoration: underline; } @media (max-width: 768px) { body.home .hcfb-neighbor-ways-to-help__secondary-list { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--hcfb-md, 1.5rem); } }