@charset "UTF-8";
@import url("https://use.typekit.net/bpv6pzj.css");
@layer lucy-reset, lucy-core, lucy-utilities; @layer lucy-reset { *, *::before, *::after { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; box-sizing: border-box; } img, picture, video, canvas, svg { display: block; max-width: 100%; } textarea { display: block; resize: vertical; } button { border: none; } table { border-collapse: collapse; }
}
:root { --base_font_size: clamp(12px, calc(10px + .5vw), 16px); --spacer_xs: 1.125rem; --spacer_s: 1.875rem; --spacer_m: 2.5rem; --spacer_l: 3.75rem; --spacer_xl: 5rem; --spacer_2xl: 7.5rem; --fs_xs: 13px; --fs_s: 14px; --fs_m: max(16px, 1rem); --fs_l: max(18px, 1.125rem); --fs_xl: max(18px, 1.375rem); --fs_2xl: max(18px, 1.5rem); --fs_3xl: max(20px, 1.75rem); --fs_4xl: max(28px, 2.875rem); --fs_5xl: 3.625rem; --fs_6xl: 6.25rem; --grid_gutter: 1rem; --color_primary: #EB0029; --color_dark_red: #8D120E; --color_secondary: #197D91; --color_dark: #3C3636; --color_dark_alt: #656565; --color_light: #F3F3F3; --color_text: #191919; --color_success: var(--color_secondary); --color_error: var(--color_primary); --color_warning: #DBA01C; --color_border: #D4CFC8; --color_button_hover: var(--color_dark_red); --transition_speed: .3s; --transition_timing: ease; --font_primary: Arial, sans-serif; --font_secondary: "trade-gothic-next-compressed", serif; --font_accent: "marydale", sans-serif; --button_height: max(40px, 2.75rem); --button_cta_height: 60px; --alert_height: 130px; --input_height: 60px; --input_border_radius: .625rem; --border_color: var(--color_border); --border_width: 1px; --border_radius: 20px; --border_style: solid; --underline_offset: 6px; --header_height: 108px; --header_spacing: 40px; --overlay_color: #000; --overlay_opacity: .4; --tear_mask_size: 1500px; --tear_mask_padding: 2.88rem;
}
@media only screen and (max-width: 900px) { :root { --header_height: 65px; --header_spacing: 8px; }
} .block-link { position: relative;
}
.block-link a[href]::after { content: ""; z-index: 1; display: block; position: absolute; inset: 0; width: 100%; height: 100%;
} .block-button { position: relative;
}
.block-button button::after { content: ""; z-index: 1; display: block; position: absolute; inset: 0; width: 100%; height: 100%;
} .skip-link { position: fixed; top: 1rem; left: 50%; z-index: 25; padding: 0.75rem 2rem; text-decoration: none; line-height: 1; font-size: var(--base_font_size); font-weight: bold; color: #FFF; text-transform: uppercase; background-color: var(--color_primary); translate: -50% calc(-100% - 1rem);
}
.skip-link:focus { translate: -50% 0; outline: none; -moz-outline: none;
} #lucy-content:has(aside), .container { margin-inline: auto; max-width: 1360px; width: 100%;
}
@media only screen and (max-width: 1400px) { #lucy-content:has(aside), .container { max-width: 1360px; padding-inline: max(20px, 4dvw); }
} .tear-both { mask-image: linear-gradient(#000 0 0), url("/images/tear-up.svg"), url("/images/tear-down.svg"); mask-position: 0% -0.1%, 100% calc(100% + 2px); mask-size: var(--tear_mask_size); mask-repeat: repeat-x; mask-composite: exclude; margin-block: -1px;
}
.tear-both + section { position: relative; z-index: 1;
} .tear-block-start-mask { mask-image: url("/images/tear-down.svg"), linear-gradient(#000 0 0); mask-position: 0% -0.1%; mask-size: var(--tear_mask_size); mask-repeat: repeat-x; mask-composite: exclude;
} .tear-block-end-mask { mask-image: url("/images/tear-up.svg"), linear-gradient(#000 0 0); mask-position: 100% calc(100% + 2px); mask-size: var(--tear_mask_size); mask-repeat: repeat-x; mask-composite: exclude;
} .tear-inline-end-mask { mask-image: url("/images/tear-right.svg"), linear-gradient(#000 0 0); mask-position: calc(100% + 2px); mask-size: auto 1000px; mask-repeat: repeat-y; mask-composite: exclude;
} :is(header:has(.page-header) + #lucy-content) { padding-block: 6.125rem;
}
:is(header:has(.page-header) + #lucy-content).no-padding { padding-block: 0;
}
:is(header:has(.page-header) + #lucy-content).no-padding-start { padding-block-start: 0;
}
@media only screen and (max-width: 1000px) { :is(header:has(.page-header) + #lucy-content) { padding-block: 1.5rem 3rem; }
} #lucy-content.no-header { padding-block: calc(6.125rem + var(--header_height) + var(--header_spacing)) 6.125rem;
} .lucy-layout { display: grid; grid-template-areas: "main"; gap: 2rem 8.3cqi; grid-template-columns: 1fr;
}
.lucy-layout:has(aside) { grid-template-areas: "sidenav main"; grid-template-columns: minmax(0, 20.25rem) minmax(0, 56.25rem);
}
.lucy-layout:has(aside).sidebar-mobile-only { grid-template-areas: "main"; grid-template-columns: 1fr;
}
.lucy-layout:has(aside).sidebar-mobile-only aside { display: none;
}
@media only screen and (max-width: 1000px) { .lucy-layout:has(aside) { grid-template-areas: "sidenav" "main"; grid-template-columns: 1fr; }
}
@media only screen and (max-width: 700px) { .lucy-layout:has(aside) { grid-template-columns: 1fr; grid-template-areas: "sidenav" "main"; }
}
.lucy-layout aside { grid-area: sidenav; padding-inline-end: 56px; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line.png); border-image-slice: 0 6 0 0; border-image-width: 4px; border-image-repeat: repeat;
}
@media only screen and (max-width: 1000px) { .lucy-layout aside { padding-inline-end: 0; border-image-slice: unset; }
}
.lucy-layout aside:has(.full-sidebar) { padding-inline-end: 0; border-image-slice: unset;
}
.lucy-layout main { grid-area: main;
} header { display: contents;
} .page-header { position: relative; display: grid; align-items: center; width: 100%; color: #FFF; text-align: center; background-color: #1E1A1A; background-image: url(https://secondharvest.b-cdn.net/images/noise-bg.webp), url(https://secondharvest.b-cdn.net/images/food-bg-large.webp); background-size: 200px, cover;
}
.page-header:has(.bg)::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.4); background-image: url("/images/noise-bg.webp"); background-size: 200px;
}
.page-header .header-inner-bg { display: grid; align-items: center; height: 100%; min-height: 576px; padding-block: 3rem 8rem;
}
.page-header .header-inner-bg:has(.map-page-header) { min-height: 420px;
}
@media only screen and (max-width: 910px) { .page-header .header-inner-bg { min-height: 420px; }
}
.page-header:not(:has(.bg)) .header-inner-bg { background-blend-mode: multiply; background-color: rgba(30, 26, 26, 0.75);
}
.page-header.large-header { min-height: min(1130px, 100dvh); min-height: min(70.63rem, 100dvh);
}
@media only screen and (max-width: 910px) { .page-header.large-header { min-height: min(50rem, 100dvh); }
}
.page-header.donate-header { padding-block-end: 10rem;
}
.page-header.home-header { padding-block-end: 7.5rem;
}
.page-header.home-header h1 { max-width: 600px; margin-inline: auto;
}
.page-header.home-header .button svg { width: 16px;
}
@media only screen and (max-width: 525px) { .page-header.home-header .header-inner-bg { padding-block: 5rem 10rem; }
}
.page-header.featured-news-header .header-inner-bg { padding-block-end: 20rem;
}
.page-header .map-page-header { --header_gap: 2rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--header_gap);
}
.page-header .map-page-header h1, .page-header .map-page-header p { margin: 0;
}
.page-header .map-page-header .intro { line-height: 1.5; text-wrap: balance; max-width: none;
}
.page-header .map-page-header p { padding-block: 1rem; padding-inline-start: var(--header_gap); text-align: start; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line.png); border-image-slice: 0 0 0 6; border-image-width: 4px; border-image-repeat: repeat;
}
@media only screen and (max-width: 860px) { .page-header .map-page-header { grid-template-columns: 1fr; } .page-header .map-page-header p { padding: 0; text-align: center; font-size: var(--fs_s); border: none; }
}
.page-header .page-header-img { position: absolute; z-index: -1; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.page-header h1:last-child { margin-block-end: 0;
}
.page-header .container { position: relative; z-index: 1; margin-block-start: calc(var(--header_height) + var(--header_spacing));
}
.page-header .intro { max-width: 700px; margin-inline: auto;
}
.page-header .intro:last-child { margin-block-end: 0;
}
@media only screen and (max-width: 1000px) { .page-header .crumb-trail { display: none; }
} .crumb-trail { display: flex; justify-content: center; gap: 1rem; margin-block-end: 1.25rem; font-weight: 700; font-family: var(--font_secondary); letter-spacing: 2px; text-transform: uppercase; list-style: none; white-space: nowrap; max-width: 90dvw;
}
.crumb-trail .separator { margin-inline-start: 1rem;
}
.crumb-trail a:hover, .crumb-trail a:focus-visible { text-decoration: underline;
}
.crumb-trail li:last-child { overflow: hidden; text-overflow: ellipsis;
} body:has(#navbar.hide) .sidebar .inner { top: calc(var(--header_spacing) * 2);
} .sidebar .inner { position: sticky; top: calc(var(--header_height) + var(--header_spacing) * 2); transition: top var(--transition_speed) var(--transition_timing);
}
@media only screen and (max-width: 1000px) { .sidebar .inner { margin-block-end: 2rem; }
}
.sidebar .section-title { font-size: var(--fs_xl); font-family: var(--font_secondary); font-weight: bold; text-transform: uppercase; letter-spacing: 2px;
}
@media only screen and (max-width: 1000px) { .sidebar .section-title { display: none; }
}
.sidebar .sidebar-nav { list-style: none;
}
.sidebar .sidebar-nav li { margin-block-end: 0.5rem; padding-block: 0.33rem; padding-inline: 15px; border-radius: 10px;
}
.sidebar .sidebar-nav li:has([aria-current]) { font-weight: bold; background-color: var(--color_light);
}
.sidebar .sidebar-nav a:hover, .sidebar .sidebar-nav a:focus-visible { text-decoration: underline; font-weight: bold;
}
@media only screen and (max-width: 1000px) { .sidebar .sidebar-nav { display: none; } .sidebar .sidebar-nav.active { margin-block-start: 1rem; display: block; }
} .mobile-toggle-heading { display: none;
}
@media only screen and (max-width: 1000px) { .mobile-toggle-heading { display: block; }
}
.mobile-toggle-heading .toggle-label { margin-block-end: 0.25rem; font-weight: 700; line-height: 1.5;
} #mobile-page-nav-toggle, .mobile-page-nav-toggle { display: none;
}
@media (pointer: fine) { #mobile-page-nav-toggle:hover, #mobile-page-nav-toggle:focus-visible, .mobile-page-nav-toggle:hover, .mobile-page-nav-toggle:focus-visible { background-color: #e6e6e6; }
}
@media only screen and (max-width: 1000px) { #mobile-page-nav-toggle, .mobile-page-nav-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem 20px; background-color: var(--color_light); border-radius: 10px; transition: background-color 0.3s ease; } #mobile-page-nav-toggle .toggle-label, .mobile-page-nav-toggle .toggle-label { font-size: 16px; font-weight: bold; line-height: 1.5; } #mobile-page-nav-toggle svg, .mobile-page-nav-toggle svg { width: 16px; } #mobile-page-nav-toggle[aria-expanded=true] .hide-active, .mobile-page-nav-toggle[aria-expanded=true] .hide-active { display: none; }
} @media only screen and (max-width: 1000px) { .mobile-nav-wrapper { margin-block-end: 1.5rem; } .mobile-nav-wrapper:not(:has(~ .active)) { margin-block-end: 4rem; } .mobile-nav-wrapper + .mobile-nav-content { display: none; } .mobile-nav-wrapper + .mobile-nav-content.active { display: block; }
}
.navbar { --navbar_inline_space: 4dvw; position: fixed; z-index: 4; top: var(--header_spacing); left: var(--navbar_inline_space); right: var(--navbar_inline_space); display: grid; grid-template-rows: var(--header_height) 0fr; width: 100%; width: calc(100% - var(--navbar_inline_space) * 2); max-width: 1507px; margin-inline: auto; border-radius: 20px 0 20px 0; background-color: #FFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); transition: grid-template-rows 0.3s ease-in-out, border-radius 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.navbar .is-closed { display: block;
}
.navbar .is-open { display: none;
}
.navbar.hide:not(.menu-open) { transform: translateY(calc(-100% - var(--header_spacing)));
}
.navbar.menu-open { grid-template-rows: var(--header_height) 1fr; border-radius: 20px;
}
.navbar.menu-open ~ .navbar-menu-overlay { opacity: 1;
}
.navbar.menu-open .is-closed { display: none;
}
.navbar.menu-open .is-closed#search-button { display: block; visibility: hidden;
}
.navbar.menu-open .is-open { display: block;
}
.navbar .inner { display: flex; justify-content: space-between; align-items: center; padding-block: 10px; padding-inline: 10px 30px;
}
.navbar .logo-wrap { flex-basis: 184px; display: grid; justify-content: start; align-items: center;
}
.navbar .logo-wrap a:hover svg, .navbar .logo-wrap a:focus-visible svg { color: var(--color_dark_red);
}
@media only screen and (max-width: 1200px) { .navbar .logo-wrap { flex-basis: auto; }
}
.navbar .logo { width: clamp(80px, 1rem + 7dvw, 130px);
}
.navbar .logo svg { color: var(--color_primary); transition: color 0.2s;
}
.navbar .navbar-nav { --navbar_gap: 2rem; display: flex; gap: var(--navbar_gap); align-items: center; margin: 0; font-family: var(--font_secondary); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; list-style: none;
}
.navbar .navbar-nav li { display: flex; gap: var(--navbar_gap); align-items: center;
}
.navbar .navbar-nav li:not(:last-child)::after { display: inline-block; width: 1px; height: 2rem; background-color: var(--color_border); content: "";
}
.navbar .navbar-nav a:hover, .navbar .navbar-nav a:focus-visible { text-decoration: underline;
}
@media only screen and (max-width: 1100px) { .navbar .navbar-nav { --navbar_gap: 1rem; font-size: var(--fs_m); }
}
@media only screen and (max-width: 900px) { .navbar .navbar-nav { display: none; }
}
.navbar .navbar-agency-link { display: flex; align-items: center; gap: 10px; color: var(--color_secondary); transition: color 0.2s;
}
.navbar .navbar-agency-link svg { width: 18px;
}
.navbar .navbar-agency-link:hover, .navbar .navbar-agency-link:focus-visible { color: var(--color_primary);
}
.navbar .search-button svg { width: 18px;
}
@media only screen and (max-width: 900px) { .navbar .search-button svg { display: none; }
}
.navbar .menu-button { font-size: var(--fs_l); width: 136px; height: 3.75rem; padding-inline: 0;
}
.navbar .menu-button svg { position: relative; top: -0.05em; width: 18px; color: #FFF;
}
@media only screen and (max-width: 900px) { .navbar .menu-button svg { width: 16px; }
}
.navbar .menu-button .is-open svg { width: 14px;
}
@media only screen and (max-width: 900px) { .navbar .menu-button .is-open svg { width: 12px; }
}
@media only screen and (max-width: 900px) { .navbar .menu-button { background-color: transparent; width: auto; color: var(--color_text); } .navbar .menu-button svg { color: var(--color_text); }
}
.navbar .navbar-end { display: flex; align-items: center; gap: 30px;
}
@media only screen and (max-width: 1100px) { .navbar .navbar-end { gap: 20px; }
}
@media only screen and (max-width: 1600px) { .navbar .container { padding-inline: 4dvw; width: 100%; box-sizing: border-box; }
}
@media only screen and (max-width: 600px) { .navbar .container { padding-inline: 25px; }
}
@media only screen and (max-width: 600px) { .navbar { --navbar_inline_space: 8px; }
} .navbar-menu { max-height: calc(100dvh - (var(--header_height) + var(--header_spacing) + var(--header_spacing))); overflow-x: scroll;
}
.navbar-menu #menu-search-form { margin-block: 3.75rem;
}
@media only screen and (max-width: 525px) { .navbar-menu #menu-search-form { margin-block: 2.5rem; }
}
.navbar-menu #menu-search-form .field-wrap button { position: absolute; top: 50%; right: 20px; transform: translateY(-50%);
}
.navbar-menu #menu-search-form input { --input_height: 5.25rem; padding-inline-start: 3.5rem; font-size: var(--fs_xl); font-weight: bold;
}
@media only screen and (max-width: 525px) { .navbar-menu #menu-search-form input { font-size: var(--fs_l); }
}
.navbar-menu #menu-search-form input:focus-visible { border: 2px solid var(--color_secondary);
}
.navbar-menu #menu-search-form svg { position: absolute; top: 50%; left: 1.25rem; width: 1.25rem; transform: translateY(-50%);
}
.navbar-menu .menu-nav { display: grid; grid-template-columns: 2fr minmax(390px, 1fr); align-items: start; gap: 3rem min(5.2cqi, 5.625rem); margin-block-end: 5rem;
}
@media only screen and (max-width: 1160px) { .navbar-menu .menu-nav { grid-template-columns: 2fr minmax(290px, 1fr); }
}
@media only screen and (max-width: 1000px) { .navbar-menu .menu-nav { grid-template-columns: 1fr; margin-block-end: 3rem; }
}
.navbar-menu .menu-accordions .accordion-wrap { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows 0.3s ease-in-out; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 0 0 6 0; border-image-width: 4px; border-image-repeat: repeat;
}
.navbar-menu .menu-accordions .accordion-wrap:first-child { border-image-slice: 6 0 6 0;
}
.navbar-menu .menu-accordions .accordion-wrap:has([aria-expanded=true]) { grid-template-rows: auto 1fr;
}
.navbar-menu .menu-accordions .accordion-wrap:has([aria-expanded=true]) .hide-active { display: none;
}
.navbar-menu .menu-accordions .accordion-wrap ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 0; list-style: none; margin-block-start: -0.7rem; padding-block-start: 0.7rem;
}
@media only screen and (max-width: 700px) { .navbar-menu .menu-accordions .accordion-wrap ul { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
.navbar-menu .menu-accordions .accordion-wrap a { position: relative; display: block; padding-block: 0.4rem 0.3rem; padding-inline: 15px 30px; border-radius: 8px; line-height: 1.5;
}
@media only screen and (max-width: 700px) { .navbar-menu .menu-accordions .accordion-wrap a { font-size: 16px; }
}
.navbar-menu .menu-accordions .accordion-wrap a:is(:hover, :focus-visible) { font-weight: bold; background-color: var(--color_light);
}
.navbar-menu .menu-accordions .accordion-wrap a:is(:hover, :focus-visible)::after { position: absolute; width: 12px; right: 15px; top: 50%; transform: translateY(-50%); content: url(https://secondharvest.b-cdn.net/images/icons/arrow-right.svg);
}
.navbar-menu .menu-accordions .accordion-wrap [data-disclosed] { margin: 0; overflow: hidden;
}
.navbar-menu .menu-accordions button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-block: 1.375rem 1.6rem;
}
.navbar-menu .menu-accordions button[aria-expanded=true] { color: var(--color_primary);
}
.navbar-menu .menu-accordions button svg { width: 14px;
}
@media only screen and (max-width: 1000px) { .navbar-menu .menu-accordions button { font-size: 36px; }
}
.navbar-menu .menu-accordions h2 { margin: 0;
}
.navbar-menu .menu-accordions .toggle-marker { display: grid; place-content: center; width: 50px; height: 50px; margin-right: 20px; border-radius: 50%; transition: background-color var(--transition_speed) var(--transition_timing), color var(--transition_speed) var(--transition_timing);
}
.navbar-menu .menu-nav-aside { border: 1px solid var(--color_border); border-radius: 20px; overflow: hidden;
}
.navbar-menu .menu-nav-aside > div { padding-block: 1.875rem; padding-inline: 40px;
}
.navbar-menu .menu-nav-aside > div:hover, .navbar-menu .menu-nav-aside > div:focus { background-color: var(--color_light);
}
.navbar-menu .menu-nav-aside > div:hover h2, .navbar-menu .menu-nav-aside > div:focus h2 { text-decoration: underline;
}
.navbar-menu .menu-nav-aside > div h2 { margin-block-end: 0.25rem;
}
.navbar-menu .menu-nav-aside > div p { margin: 0; line-height: 1.5;
}
.navbar-menu .menu-nav-aside > div:not(:last-child) { border-bottom: 1px solid var(--color_border);
}
@media only screen and (max-width: 600px) { .navbar-menu .menu-nav-aside > div { padding-inline: 22px; } .navbar-menu .menu-nav-aside > div h2 { font-size: 20px; } .navbar-menu .menu-nav-aside > div p { font-size: 16px; line-height: 1.5; }
}
.navbar-menu .menu-nav-end { display: flex; justify-content: space-between; align-items: center; margin-block-end: 3.375rem;
}
.navbar-menu .menu-nav-end .start { display: flex; align-items: center; gap: 3rem;
}
.navbar-menu .menu-nav-end .start .event-date { font-weight: bold;
}
.navbar-menu .menu-nav-end .end { display: flex; gap: 1rem;
}
@media only screen and (max-width: 1040px) { .navbar-menu .menu-nav-end .end { flex-wrap: wrap; width: 100%; } .navbar-menu .menu-nav-end .end .button { width: 100%; }
}
.navbar-menu .menu-nav-end .button-link { font-size: 1.375rem;
}
@media only screen and (max-width: 1040px) { .navbar-menu .menu-nav-end { flex-wrap: wrap; gap: 3rem; }
}
.navbar-menu .mobile-end-section { padding-block-start: var(--spacer_m); border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 6 0 0 0; border-image-width: 4px; border-image-repeat: repeat;
}
.navbar-menu .mobile-end-section h2 { margin: 0;
}
.navbar-menu .mobile-end-section a:is(:hover, :focus-visible) { text-decoration: underline;
}
.navbar-menu .mobile-social-wrap { flex-shrink: 0; display: flex; align-items: center; gap: 5px; color: var(--color_primary); list-style: none;
}
.navbar-menu .mobile-social-wrap a { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 50%; transition: 0.2s;
}
.navbar-menu .mobile-social-wrap a:hover, .navbar-menu .mobile-social-wrap a:focus-visible { color: #FFF; background-color: var(--color_primary);
}
.navbar-menu .mobile-social-wrap svg { width: 34px;
}
.navbar-menu .mobile-only { display: none;
}
@media only screen and (max-width: 1000px) { .navbar-menu .mobile-only { display: block; }
} .navbar-menu-overlay { position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: 0.3s opacity; background-color: rgba(0, 0, 0, 0.5); pointer-events: none;
} .page-footer .footer-full-callout { position: relative; padding-block: 10.875rem; text-align: center; color: #FFF; background-color: var(--color_dark);
}
.page-footer .footer-full-callout > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.5);
}
.page-footer .footer-full-callout span { font-family: var(--font_accent); text-transform: none;
}
.page-footer .footer-full-callout .container { position: relative; z-index: 1;
}
.page-footer .footer-full-callout .sub-header { margin-block-end: 1.25rem; letter-spacing: 2px; text-transform: uppercase; font-family: var(--font_secondary); font-size: var(--fs_l);
}
.page-footer .footer-full-callout .footer-callout-heading { margin-block-end: 0.5rem; font-size: 4.5rem;
}
@media only screen and (max-width: 450px) { .page-footer .footer-full-callout .footer-callout-heading { font-size: 3.75rem; }
}
.page-footer .footer-full-callout .intro { margin-inline: auto; max-width: 700px;
}
@media only screen and (max-width: 525px) { .page-footer .footer-full-callout { padding-block-start: 7rem; }
}
.page-footer .footer-bg { color: #FFF; background-color: #362F2F;
}
.page-footer .footer-section { margin-block-end: 5rem;
}
.page-footer .footer-section:first-of-type { padding-block-start: 5rem;
}
.page-footer .footer-section:last-of-type { padding-block-end: 5rem; margin-block-end: 0;
}
@media only screen and (max-width: 600px) { .page-footer .footer-section:last-of-type { padding-block-end: 3rem; }
}
.page-footer .footer-callouts { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 6 0 6 0; border-image-width: 4px; border-image-repeat: repeat;
}
.page-footer .footer-callouts .footer-callout { padding-block: 3.75rem; padding-inline: 70px; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line.png); border-image-slice: 0 6 0 0; border-image-width: 4px; border-image-repeat: repeat;
}
.page-footer .footer-callouts .footer-callout:hover h2, .page-footer .footer-callouts .footer-callout:focus-within h2 { text-decoration: underline;
}
.page-footer .footer-callouts .footer-callout:last-of-type { border-image-slice: 0 0 0 0;
}
.page-footer .footer-callouts .footer-callout h2, .page-footer .footer-callouts .footer-callout p, .page-footer .footer-callouts .footer-callout .circle-button { margin-inline: auto;
}
.page-footer .footer-callouts .footer-callout h2 { margin-block-end: 1.25rem; max-width: 188px;
}
.page-footer .footer-callouts .footer-callout p { max-width: 314px;
}
.page-footer .footer-callouts .footer-callout .circle-button { --button_size: 60px; --button_bg: #1E1A1A;
}
@media only screen and (max-width: 1060px) { .page-footer .footer-callouts .footer-callout { padding-inline: 40px; }
}
@media only screen and (max-width: 910px) { .page-footer .footer-callouts .footer-callout { border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 0 0 6 0; border-image-width: 4px; border-image-repeat: repeat; }
}
@media only screen and (max-width: 600px) { .page-footer .footer-callouts .footer-callout { padding-block: 2rem; } .page-footer .footer-callouts .footer-callout p { margin: 0 auto; line-height: 1.5; font-size: var(--fs_s); } .page-footer .footer-callouts .footer-callout .circle-button { display: none; }
}
@media only screen and (max-width: 910px) { .page-footer .footer-callouts { grid-template-columns: 1fr; }
}
.page-footer .footer-nav-start { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5.1875rem;
}
.page-footer .footer-nav-start h2 { margin-block-end: 1.5rem;
}
.page-footer .footer-nav-start ul { list-style: none;
}
.page-footer .footer-nav-start li { margin-block-end: 0.5rem; line-height: 1.5;
}
.page-footer .footer-nav-start a:is(:hover, :focus) { text-decoration: underline;
}
@media only screen and (max-width: 1200px) { .page-footer .footer-nav-start { gap: 2rem; }
}
@media only screen and (max-width: 1000px) { .page-footer .footer-nav-start { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 740px) { .page-footer .footer-nav-start { display: none; }
}
.page-footer .quick-nav-section { display: none;
}
@media only screen and (max-width: 740px) { .page-footer .quick-nav-section { display: block; margin-block-end: 2rem; }
}
.page-footer .footer-nav-end { display: flex; justify-content: space-between; align-items: center; gap: 2rem;
}
.page-footer .footer-nav-end .start { display: flex; align-items: center; gap: 3rem;
}
@media only screen and (max-width: 740px) { .page-footer .footer-nav-end .start { display: none; }
}
.page-footer .footer-nav-end .end { display: flex; gap: 1rem;
}
@media only screen and (max-width: 525px) { .page-footer .footer-nav-end .end { display: grid; }
}
.page-footer .footer-nav-end .button-link { --button_size: 60px; --button_bg: #1E1A1A; font-size: 1.375rem;
}
@media only screen and (max-width: 1060px) { .page-footer .footer-nav-end { display: grid; }
}
@media only screen and (max-width: 740px) { .page-footer .footer-nav-end { justify-content: center; }
}
.page-footer .mission-wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.page-footer .mission-wrap ul, .page-footer .mission-wrap p { margin: 0;
}
.page-footer .mission-wrap p { max-width: 827px;
}
@media only screen and (max-width: 660px) { .page-footer .mission-wrap { display: grid; justify-items: center; text-align: center; }
}
.page-footer .social-wrap { flex-shrink: 0; display: flex; align-items: center; gap: 5px; color: var(--color_secondary); list-style: none;
}
.page-footer .social-wrap a { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 50%; transition: 0.2s;
}
.page-footer .social-wrap a:hover, .page-footer .social-wrap a:focus-visible { color: #FFF; background-color: var(--color_secondary);
}
.page-footer .social-wrap svg { width: 34px;
}
.page-footer .footer-sponsors { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: center; gap: 4.18755rem; padding-block: 4.125rem;
}
.page-footer .footer-sponsors img { display: block; margin-inline: auto; max-height: 180px;
}
@media only screen and (max-width: 540px) { .page-footer .footer-sponsors { grid-template-columns: 1fr 1fr; } .page-footer .footer-sponsors img { max-height: 120px; }
}
.page-footer .footer-bottom { margin-block-end: 16px; padding-block: 2rem; background-color: var(--color_light);
}
.page-footer .footer-bottom .inner, .page-footer .footer-bottom .inner > div { display: flex; justify-content: space-between; align-items: center;
}
.page-footer .footer-bottom .inner p, .page-footer .footer-bottom .inner > div p { margin: 0;
}
.page-footer .footer-bottom .inner .by-form svg, .page-footer .footer-bottom .inner > div .by-form svg { width: 290px;
}
.page-footer .footer-bottom .inner > div { gap: 1rem;
}
@media only screen and (max-width: 860px) { .page-footer .footer-bottom .inner > div { justify-content: center; flex-wrap: wrap; } .page-footer .footer-bottom .inner > div :first-child { width: 100%; } .page-footer .footer-bottom .inner > div span:first-of-type { display: none; } .page-footer .footer-bottom .inner > div a { font-weight: bold; }
}
@media only screen and (max-width: 510px) { .page-footer .footer-bottom .inner > div { display: grid; } .page-footer .footer-bottom .inner > div span { display: none; }
}
@media only screen and (max-width: 1220px) { .page-footer .footer-bottom .inner { display: grid; justify-content: center; justify-items: center; gap: 2rem; text-align: center; } .page-footer .footer-bottom .inner > div { gap: 16px; }
}
.page-footer .footer-signup-wrap { background-color: #362F2F;
}
.page-footer .footer-email-signup { position: relative; display: block; padding-block: 3.375rem 4.0625rem; padding-inline: 60px; color: #FFF; border-radius: 20px 0 20px 0; overflow: hidden; background-color: var(--color_primary); transform: translateY(-50%);
}
.page-footer .footer-email-signup .inner-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 2rem;
}
.page-footer .footer-email-signup h2, .page-footer .footer-email-signup p { margin: 0;
}
.page-footer .footer-email-signup h2 { margin-block-end: 0.5rem;
}
.page-footer .footer-email-signup p { line-height: 1.5;
}
.page-footer .footer-email-signup .signup-bg { position: absolute; inset: 0; background-image: url("/images/noise-bg.webp"), url(https://secondharvest.b-cdn.net/images/food-bg-large.webp); background-size: 200px, cover; mix-blend-mode: multiply;
}
@media only screen and (max-width: 760px) { .page-footer .footer-email-signup { padding-block: 2rem; padding-inline: 30px; } .page-footer .footer-email-signup .inner-layout { grid-template-columns: 50px 1fr; } .page-footer .footer-email-signup .inner-layout .button-wrap { display: none; }
} .alert-outer { position: fixed; z-index: 3; bottom: 45px; width: 100%;
}
.alert-outer .container { max-width: 1360px;
}
@media only screen and (max-width: 700px) { .alert-outer { bottom: 0; } .alert-outer .container { max-width: 100%; padding-inline: 0; }
} .alert { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; width: 100%; padding-block: 2.25rem; padding-inline: 50px; background-color: var(--color_warning); border-radius: 20px 0 20px 0;
}
.alert h2 { margin-block-end: 0.25rem;
}
.alert p { margin: 0;
}
.alert .alert-end { display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.alert .alert-end svg { width: 12px; color: var(--color_text);
}
@media only screen and (max-width: 700px) { .alert { border-radius: 0; }
}
@media only screen and (max-width: 600px) { .alert { grid-template-columns: 1fr; justify-items: start; padding-inline: 30px; } .alert .alert-end { gap: 20px; } .alert .alert-end svg { width: 14px; } .alert .alert-close { position: absolute; top: 0; right: 0; padding: 14px; cursor: pointer; }
} .plugin-output { margin-block-end: var(--spacer_s);
} .pages-list-container { container-type: inline-size; container-name: pages-list;
}
.pages-list-container .inner { display: grid; border: 1px solid var(--border_color); border-radius: 1.25rem; overflow: hidden;
} .page-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.25rem; padding-block: 2.375rem 2.6875rem; padding-inline: 3rem; transition: background-color var(--transition_speed) var(--transition_timing);
}
.page-item:not(:last-of-type) { border-block-end: 1px solid var(--border_color);
}
.page-item:focus-within, .page-item:hover { background-color: var(--color_light);
}
.page-item:focus-within .pages-heading, .page-item:hover .pages-heading { text-decoration: underline; text-decoration-color: var(--color_primary); text-underline-offset: var(--underline_offset);
}
.page-item .text-wrap { max-width: 612px;
}
.page-item .pages-heading { margin: 0;
}
.page-item .pages-desc { margin-block: 0.5rem 0; line-height: 1.875;
}
@container pages-list (max-width: 540px) { .page-item { padding-inline: 2rem; } .page-item .pages-desc { font-size: var(--fs_s); } .page-item .circle-button { --button_size: 36px; }
} .stats-wrap { --gap: 5.125rem; display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; margin-inline-start: calc(-1 * var(--gap)); overflow: hidden;
}
.stats-wrap .stats-container { container-type: inline-size; container-name: stats; width: 100%;
}
.stats-wrap .stats-container .inner { margin-inline-start: var(--gap); padding-block: 1rem 0.75rem; height: 100%; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line.png); border-image-slice: 0 6 0 0; border-image-width: 4px; border-image-repeat: repeat; border-image-outset: 0 calc(var(--gap) / 2) 0 0;
}
.stats-wrap .stats-container p { margin: 0; font-weight: bold;
}
.stats-wrap .stats-container em { display: block; margin-block-end: 0.3ex; font-size: min(18cqi, 3.875rem); font-family: var(--font_accent); color: var(--color_primary); line-height: 1; font-weight: normal;
}
@media only screen and (max-width: 580px) { .stats-wrap.stack-mobile { grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "stack"; } .stats-wrap.stack-mobile .stats-container { grid-area: stack; transition: opacity 1.5s ease, transform 1.5s ease; opacity: 0; transform: translateY(-1rem); } .stats-wrap.stack-mobile .stats-container.active { opacity: 1; transform: translateY(0); } .stats-wrap:not(.stack-mobile) { grid-template-columns: 1fr; } .stats-wrap:not(.stack-mobile) .inner { padding-block: 2rem; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 0 0 6 0; border-image-width: 4px; border-image-repeat: repeat; } .stats-wrap:not(.stack-mobile) .stats-container:first-of-type .inner { border-image-slice: 6 0 6 0; }
} .callout-container { container-type: inline-size; container-name: callout;
}
.callout-container:hover .inner, .callout-container:focus-within .inner { background-color: var(--color_primary);
}
.callout-container .inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding-block: 1.625rem; padding-inline: 30px; background-color: var(--color_warning); border-radius: 50px 0 50px 0;
}
.callout-container .callout-start { display: flex; gap: 2rem; align-items: center;
}
.callout-container .callout-start .img-wrap { max-width: 130px; overflow: hidden; border-radius: 50%;
}
.callout-container .callout-start p { margin: 0;
}
.callout-container .callout-start .callout-heading { margin-block: 0 0.56rem;
}
@container callout (max-width: 720px) { .callout-container .inner { padding-inline: 20px; } .callout-container a { grid-column: 1/-1; }
}
@container callout (max-width: 500px) { .callout-container .callout-start { flex-direction: column; text-align: center; } .callout-container .callout-start p { font-size: var(--fs_s); } .callout-container .inner { padding-block: 2.5rem; } .callout-container a { margin-inline: auto; }
} .faqs-wrapper { container-name: faqs; container-type: inline-size; display: grid; border-radius: 20px; border: 1px solid var(--color_border); overflow: hidden;
}
.faqs-wrapper .faq-article { --underline_offset: 4px; display: grid; grid-template-columns: 1fr 45px; grid-template-rows: auto 0fr; column-gap: 1.65rem; padding-block: 2.3125rem; padding-inline: 50px; transition: grid-template-rows 0.2s, background-color 0.2s;
}
.faqs-wrapper .faq-article:not(:last-of-type) { border-block-end: 1px solid var(--color_border);
}
.faqs-wrapper .faq-article:has(button:hover), .faqs-wrapper .faq-article:focus-within:has(:focus-visible) { background-color: var(--color_light);
}
.faqs-wrapper .faq-article:has(button:hover) .disclosure-heading, .faqs-wrapper .faq-article:focus-within:has(:focus-visible) .disclosure-heading { text-decoration: underline; text-decoration-color: var(--color_primary); text-underline-offset: var(--underline_offset);
}
.faqs-wrapper .faq-article:has([aria-expanded=true]) { grid-template-rows: auto 1fr;
}
.faqs-wrapper .faq-article:has([aria-expanded=true]) .toggle-marker { background-color: var(--color_dark);
}
.faqs-wrapper .faq-article:has([aria-expanded=true]) .toggle-marker svg .hide-active { display: none;
}
.faqs-wrapper .faq-article:has([aria-expanded=true]) .toggle-marker:hover, .faqs-wrapper .faq-article:has([aria-expanded=true]) .toggle-marker:focus-visible { background-color: var(--color_dark);
}
.faqs-wrapper .toggle-marker { display: grid; place-content: center; width: 100%; color: #FFF; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--color_primary); transition: background-color 0.2s;
}
.faqs-wrapper .toggle-marker:hover, .faqs-wrapper .toggle-marker:focus-visible { background-color: var(--color_dark);
}
.faqs-wrapper .toggle-marker svg { width: 20px;
}
.faqs-wrapper .disclosure-heading { display: grid; grid-template-columns: subgrid; grid-column: span 2; margin: 0;
}
.faqs-wrapper .disclosure-heading .question-toggle { display: grid; grid-template-columns: subgrid; grid-column: span 2; text-align: left; cursor: pointer;
}
.faqs-wrapper [data-disclosed] { grid-column: 1; margin: 0; overflow: hidden;
}
.faqs-wrapper [data-disclosed] :first-child { margin-block-start: 1.25rem;
}
.faqs-wrapper [data-disclosed] :last-child { margin-block-end: 0;
}
.faqs-wrapper [data-disclosed] p { font-size: var(--fs_m);
}
@media only screen and (max-width: 700px) { .faqs-wrapper [data-disclosed] { grid-column: 1/-1; }
}
@container faqs (max-width: 540px) { .faqs-wrapper .faq-article { padding-inline: 30px; } .faqs-wrapper [data-disclosed] p { font-size: var(--fs_s); }
} .resources-list { container-type: inline-size; container-name: resources-list;
}
.resources-list .resource-article { display: grid; grid-template-columns: 22px 1fr 130px; align-items: center; gap: 1rem 20px; padding-block: 1.375rem; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 0 0 6 0; border-image-width: 4px; border-image-repeat: repeat;
}
.resources-list .resource-article:focus-within svg, .resources-list .resource-article:has(a:hover) svg { color: var(--color_primary);
}
.resources-list .resource-article:first-child { border-image-slice: 6 0 6 0;
}
.resources-list .resource-article svg { color: var(--color_secondary);
}
.resources-list .resource-article .button-link { --button_img: url(https://secondharvest.b-cdn.net/images/icons/external-link.svg);
}
.resources-list .resource-article .button-link.download { --button_img: url(https://secondharvest.b-cdn.net/images/icons/download.svg);
}
.resources-list .resource-article .button-link.download::before { background-size: 40%;
}
@container resources-list (max-width: 540px) { .resources-list .resource-article { grid-template-columns: 40px 1fr auto; } .resources-list .resource-article .resource-actions .button-link span { display: none; } .resources-list .resource-article .button-link { --button_size: 34px; }
}
.resources-list .resource-heading, .resources-list .resource-desc { margin-block-end: 0;
}
.resources-list .resource-heading { font-family: var(--font_primary);
}
.resources-list .resource-actions { display: flex; gap: 20px; align-self: center;
} .events-plugin, .event-wrapper { display: grid; gap: 20px; container-name: event-item; container-type: inline-size;
} .event-article { display: grid; grid-template-columns: auto 1fr; padding-block: 3rem; padding-inline: 50px; background-color: #FFF; box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.05); border-radius: 20px;
}
.event-article:hover .event-heading, .event-article:focus-within .event-heading { text-decoration: underline; text-decoration-color: var(--color_primary); text-underline-offset: var(--underline_offset);
}
.event-article:hover .cal-date-block, .event-article:focus-within .cal-date-block { background-color: var(--color_primary);
}
.event-article.transparent { padding-inline: 0; background-color: transparent; box-shadow: none;
}
.event-article.spaced { padding-block: 5.125rem;
}
@media only screen and (max-width: 600px) { .event-article.spaced { padding-block: 3.5rem; }
}
.event-article .event-heading { margin-block-end: 0.5rem;
}
.event-article .event-date, .event-article .event-location { margin-block-end: 0; color: var(--color_text_alt);
}
.event-article a { color: var(--color_text); text-decoration: none;
}
.event-article .event-start { display: grid; place-content: center; margin-inline-end: 50px; padding-inline-end: 50px; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line.png); border-image-slice: 0 6 0 0; border-image-width: 4px; border-image-repeat: repeat;
}
.event-article .event-datetime { display: block; margin-block-end: 0.5rem; font-size: 16px;
}
@container event-item (max-width: 680px) { .event-article { grid-template-columns: 1fr; } .event-article .event-heading { padding-inline-end: 7rem; } .event-article .event-start { margin-inline-end: 0; padding-inline-end: 0; border: none; } .event-article .event-start .cal-date-block { position: absolute; top: -10px; right: 40px; }
}
@container event-item (max-width: 540px) { .event-article p { font-size: var(--fs_s); }
} .cal-date-block { display: grid; place-content: center; width: 95px; height: 95px; text-align: center; color: #FFF; font-family: var(--font_secondary); background-color: var(--color_secondary); border-radius: 50%; transition: background-color var(--transition_speed) var(--transition_timing);
}
.cal-date-block .cal-date-month { font-size: 18px; text-transform: uppercase; letter-spacing: 2px; line-height: 1;
}
.cal-date-block .cal-date-day { font-size: 38px; line-height: 0.89;
} .no-upcoming-events { container-name: no-upcoming-events; container-type: inline-size;
}
.no-upcoming-events .inner-wrap { padding-block: 3.375rem; padding-inline: min(5.5cqi, 40px); text-align: center; border-radius: 20px; box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.05);
}
.no-upcoming-events h2 { margin-block-end: 0.5rem;
}
.no-upcoming-events p { margin: 0;
}
.no-upcoming-events svg { display: block; margin-block-end: 0.85rem; margin-inline: auto; width: 34px; color: var(--color_primary);
} .gallery-wrapper { container-name: gallery; container-type: inline-size; overflow: hidden;
}
.gallery-wrapper .slides-wrapper { position: relative; width: 100cqi;
}
.gallery-wrapper .gallery-slides { display: flex; gap: 20px; align-items: start; grid-auto-flow: column; grid-auto-columns: max-content; padding-inline-end: 100cqi; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; grid-row: 1; grid-column: 1/-1;
}
.gallery-wrapper .gallery-slide { flex: 1 0 auto; position: relative; scroll-snap-align: start; display: grid; align-items: center; align-self: flex-end; place-content: center; overflow: hidden; border-radius: 10px;
}
.gallery-wrapper .gallery-slide img { display: block; border-radius: 10px; max-height: 600px; max-width: 92dvw; max-width: min(92dvw, 100cqi);
}
.gallery-wrapper .gallery-slide:not(.active) { opacity: 0.5;
}
@media only screen and (max-width: 525px) { .gallery-wrapper .gallery-slide { max-width: 100cqi; }
}
.gallery-wrapper .gallery-controls { display: flex; gap: 10px;
}
.gallery-wrapper .gallery-controls [data-prev] { rotate: 180deg;
}
.gallery-wrapper .gallery-controls .circle-button { --button_size: 60px;
}
.gallery-wrapper .gallery-controls .circle-button:focus-visible, .gallery-wrapper .gallery-controls .circle-button:hover { scale: 1.1;
}
.gallery-wrapper .gallery-end { display: grid; grid-template-columns: auto 1fr 125px 40px; gap: 20px;
}
.gallery-wrapper .gallery-end .gallery-controls { position: relative; top: -50%; grid-column: 3/4;
}
.gallery-wrapper .gallery-end .gallery-counter { margin-block-start: 0.25rem; font-weight: bold;
}
.gallery-wrapper .gallery-end .gallery-captions { margin-block-start: 0.6rem;
}
.gallery-wrapper .gallery-end .gallery-captions p { min-height: 2lh;
}
.gallery-wrapper .gallery-end .gallery-captions p:not(:first-child) { display: none;
}
@container gallery (max-width: 540px) { .gallery-wrapper .gallery-slide img { max-height: 300px; } .gallery-wrapper .gallery-end { row-gap: 0; } .gallery-wrapper .gallery-end .gallery-controls { grid-row: 1; grid-column: 3/5; margin-inline-start: auto; padding-inline-end: 20px; } .gallery-wrapper .gallery-end .gallery-controls .circle-button { --button_size: 50px; } .gallery-wrapper .gallery-captions { grid-column: 1/-1; margin-block-start: -1rem !important; }
} .sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--grid_gutter); margin-block-end: var(--spacer_s); align-items: center;
}
.sponsor-grid .sponsor-wrap { position: relative; padding: 10px; background-color: #FFF;
}
.sponsor-grid .sponsor-wrap::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(https://secondharvest.b-cdn.net/images/noise-bg.webp); pointer-events: none; content: "";
}
.sponsor-grid p { display: grid; place-content: center; height: 100%; font-weight: bold; padding-inline: 10px; background-color: #FFF;
} .lucy-spacer { position: relative; font-size: 0;
}
.lucy-spacer.separate-full { margin: calc(var(--spacer_s) * 2) 0;
}
.lucy-spacer.separate-half { margin: var(--spacer_m) 0;
}
.lucy-spacer[class*=separate-]:before { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: var(--border_color); transform: translate(0, -50%); content: "";
} .text-plugin a:not(.button), .plugin-content > p a:not(.button) { color: var(--color_primary); text-decoration: underline;
}
.text-plugin a:not(.button):hover, .text-plugin a:not(.button):focus-visible, .plugin-content > p a:not(.button):hover, .plugin-content > p a:not(.button):focus-visible { text-decoration: none;
}
.text-plugin .button, .plugin-content > p .button { margin-block-end: 10px;
}
.text-plugin ul, .text-plugin ol, .plugin-content > p ul, .plugin-content > p ol { padding-inline-start: 1.5rem;
} [data-bucket] { display: grid; width: 100%; gap: var(--grid_gutter);
}
[data-bucket][data-alignment=middle] { align-items: center;
}
[data-bucket][data-alignment=bottom] { align-items: end;
} [data-bucket="1-column"] { grid-template-columns: 1fr;
} [data-bucket="2-column"] { grid-template-columns: repeat(2, 1fr);
} [data-bucket="3-column"] { grid-template-columns: repeat(3, 1fr);
} [data-bucket="4-column"] { grid-template-columns: repeat(4, 1fr);
} [data-bucket="70-30"] { grid-template-columns: 7fr 3fr;
} [data-bucket="30-70"] { grid-template-columns: 3fr 7fr;
} @media only screen and (max-width: 910px) { [data-bucket] { grid-template-columns: 1fr; gap: 0; }
}
#lucy-page-template .lucy-spacer { min-height: 3rem; background-color: rgba(0, 0, 0, 0.05);
}
#lucy-page-template .plugin.filled { min-height: 60px;
} #lucy-page-template-inner { margin-block-start: 4rem;
}
#lucy-page-template-inner #lucy-content { max-width: min(100%, 1360px);
} #lucy-page-template-inner img, #lucy-modal img { display: initial;
} .lucy-box-inner:has(.plugin .empty) { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; justify-content: center;
}
.lucy-box-inner:has(.plugin .empty) .plugin { width: auto !important; height: auto !important; margin: 0 !important; padding: 1rem !important;
}
.lucy-box-inner:has(.plugin .empty) .plugin img { display: inline-block; width: auto !important; max-height: 22px;
}
.lucy-box-inner:has(.plugin .empty) .empty { display: grid; place-items: center;
}
.lucy-box-inner:has(.plugin .empty) .empty br { display: none;
} .lucy-buckets .bucket img { display: inline-block;
} @layer lucy-core { a { color: inherit; text-decoration: none; } a.back-to { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: var(--spacer_xxs) var(--spacer_xs); background-color: var(--color_light); border-radius: var(--border_radius); box-sizing: border-box; font-size: clamp(12px, 0.667rem, 0.667rem); line-height: 1.3; letter-spacing: 0.057rem; text-transform: uppercase; text-decoration: none; } a.back-to .arrow { display: flex; justify-content: center; align-items: center; position: relative; width: var(--spacer_xxs); height: var(--spacer_xxs); border: 2px solid var(--color_dark); border-radius: 50%; } a.back-to .arrow svg { width: 70%; } a.back-to .arrow svg path { fill: var(--color_dark); } a.back-to span { background-image: linear-gradient(transparent, transparent), linear-gradient(var(--color_text), var(--color_text)); background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; text-decoration: none; } @media (pointer: fine) { a.back-to span:hover, a.back-to span:focus-visible { background-size: 0 1px, 100% 1px; } } a.back-to:hover span, a.back-to:focus-visible span { background-size: 0 1px, 100% 1px; } :where(#lucy-page, #lucy-content, .lucy-content) h1, :where(#lucy-page, #lucy-content, .lucy-content) h2, :where(#lucy-page, #lucy-content, .lucy-content) h3, :where(#lucy-page, #lucy-content, .lucy-content) h4, :where(#lucy-page, #lucy-content, .lucy-content) .display-6xl, :where(#lucy-page, #lucy-content, .lucy-content) .display-5xl, :where(#lucy-page, #lucy-content, .lucy-content) .display-4xl, :where(#lucy-page, #lucy-content, .lucy-content) .display-3xl, :where(#lucy-page, #lucy-content, .lucy-content) .display-2xl { margin-block-end: var(--spacer_s); font-family: var(--font_secondary); text-transform: uppercase; font-weight: normal; } :where(#lucy-page, #lucy-content, .lucy-content) h1, :where(#lucy-page, #lucy-content, .lucy-content) .display-6xl { font-size: var(--fs_6xl); line-height: 1.04; letter-spacing: -0.0625rem; } @media only screen and (max-width: 910px) { :where(#lucy-page, #lucy-content, .lucy-content) h1, :where(#lucy-page, #lucy-content, .lucy-content) .display-6xl { font-size: 3.925rem; line-height: 1.04; } } :where(#lucy-page, #lucy-content, .lucy-content) .display-5xl { font-size: var(--fs_5xl); line-height: 1.04; letter-spacing: -0.0625rem; } :where(#lucy-page, #lucy-content, .lucy-content) h2, :where(#lucy-page, #lucy-content, .lucy-content) .display-4xl { font-size: var(--fs_4xl); line-height: 1.08; } @media only screen and (max-width: 910px) { :where(#lucy-page, #lucy-content, .lucy-content) h2, :where(#lucy-page, #lucy-content, .lucy-content) .display-4xl { font-size: max(28px, 2.2rem); line-height: 1.25; } } :where(#lucy-page, #lucy-content, .lucy-content) h3, :where(#lucy-page, #lucy-content, .lucy-content) .display-3xl { font-size: var(--fs_3xl); line-height: 1.21; } :where(#lucy-page, #lucy-content, .lucy-content) h4, :where(#lucy-page, #lucy-content, .lucy-content) .display-2xl { font-size: var(--fs_2xl); line-height: 1.21; letter-spacing: 0.3px; } :where(#lucy-page, #lucy-content, .lucy-content) h5, :where(#lucy-page, #lucy-content, .lucy-content) .display-xl { font-size: var(--fs_xl); line-height: 1.27; font-family: var(--font_primary); font-weight: bold; text-transform: none; } :where(#lucy-page, #lucy-content, .lucy-content) .display-l { font-size: var(--fs_l); font-family: var(--font_primary); font-weight: bold; text-transform: none; line-height: 1.33; } :where(#lucy-page, #lucy-content, .lucy-content) .display-m { font-family: var(--font_primary); font-size: var(--fs_m); font-weight: normal; line-height: 1.875; text-transform: none; } :where(#lucy-page, #lucy-content, .lucy-content) .display-s { font-size: var(--fs_s); font-family: var(--font_primary); text-transform: none; line-height: 1.375; } :where(#lucy-page, #lucy-content, .lucy-content) .display-xs { font-size: var(--fs_xs); font-family: var(--font_primary); text-transform: none; line-height: 1.375; } :where(#lucy-page, #lucy-content, .lucy-content) p, :where(#lucy-page, #lucy-content, .lucy-content) blockquote, :where(#lucy-page, #lucy-content, .lucy-content) ul, :where(#lucy-page, #lucy-content, .lucy-content) ol, :where(#lucy-page, #lucy-content, .lucy-content) .page-image { margin-bottom: var(--spacer_s); } :where(#lucy-page, #lucy-content, .lucy-content) .page-image { border-radius: 20px; } :where(#lucy-page, #lucy-content, .lucy-content) p, :where(#lucy-page, #lucy-content, .lucy-content) ul, :where(#lucy-page, #lucy-content, .lucy-content) ol, :where(#lucy-page, #lucy-content, .lucy-content) dl { font-size: var(--fs_m); font-weight: normal; line-height: 1.875; } :where(#lucy-page, #lucy-content, .lucy-content) blockquote { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; font-size: var(--fs_l); font-weight: bold; line-height: 1.66; } :where(#lucy-page, #lucy-content, .lucy-content) blockquote::before { position: relative; top: -0.75rem; font-size: 2.625rem; color: #A2001C; content: "“"; } :where(#lucy-page, #lucy-content, .lucy-content) .intro { font-family: var(--font_primary); font-size: var(--fs_2xl); font-weight: normal; line-height: 1.66; } :where(#lucy-page, #lucy-content, .lucy-content) .body-small { font-size: var(--fs_s); font-weight: normal; letter-spacing: 0.009rem; line-height: 1.857; } :where(#lucy-page, #lucy-content, .lucy-content) .sub-header { font-family: var(--font_secondary); font-size: var(--fs_l); font-weight: normal; line-height: 1.33; letter-spacing: 0.125rem; text-transform: uppercase; } :where(#lucy-page, #lucy-content, .lucy-content) .caption, :where(#lucy-page, #lucy-content, .lucy-content) .photo-caption { font-size: var(--fs_xs); font-weight: bold; line-height: 1.375; }
} @layer lucy-core { :where(button) { font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; background-color: transparent; cursor: pointer; } .button { --button_text_color: #FFF; --button_inline_padding: 2.5rem; --button_gap: 8px; --button_icon_size: .75rem; --button_indent: calc((var(--button_icon_size) * -.5) - 1px); display: inline-flex; justify-content: center; align-items: center; gap: var(--button_gap); height: var(--button_height); padding-inline: var(--button_inline_padding) calc(var(--button_inline_padding) - var(--button_gap) - var(--button_icon_size)); color: var(--button_text_color); font-family: var(--font_primary); font-size: var(--fs_s); font-weight: bold; line-height: 1; text-decoration: none; text-indent: 0rem; text-align: center; border-radius: 0.625rem; background-color: var(--color_primary); transition: background-color 0.3s ease, padding-inline 0.15s ease, text-indent 0.15s ease; cursor: pointer; } .button::after { content: url(https://secondharvest.b-cdn.net/images/icons/button-arrow-white.svg); flex-shrink: 0; display: block; width: var(--button_icon_size); opacity: 0; transform: translateX(var(--button_indent)); transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease; } .button:has(svg) { padding-inline: var(--button_inline_padding); text-indent: 0 !important; } .button:has(svg)::after { content: none !important; } .button:has(svg):hover, .button:has(svg):focus-visible { text-indent: 0 !important; } .button:has(svg) svg { width: 1em; color: #FFF; } .button.cta { --button_icon_size: .9rem; height: var(--button_cta_height); font-family: var(--font_secondary); font-size: max(18px, var(--fs_l)); text-transform: uppercase; letter-spacing: 3px; } .button.dark { --color_button_hover: #1E1A1A; background-color: var(--color_dark); } .button.light { --color_button_hover: var(--color_light); background-color: var(--color_light); color: var(--color_text); } .button.light::after { filter: invert(1); } .button.white { --color_button_hover: #FFF; color: var(--color_text); background-color: #FFF; } .button.white::after { filter: invert(1); } .button.outline-white { --color_button_hover: #FFF; --button_text_color: #FFF; background-color: transparent; border: 2px solid #FFF; } .button:not(:where(.disabled, [disabled], [aria-disabled=true])):hover, .button:not(:where(.disabled, [disabled], [aria-disabled=true])):focus-visible, .block-link:has(.button:not(:where(.disabled, [disabled], [aria-disabled=true]))):is(:hover, :focus-visible) .button:not(:where(.disabled, [disabled], [aria-disabled=true])) { background-color: var(--color_button_hover); } .button:not(:where(.disabled, [disabled], [aria-disabled=true])):hover:not(:where(:has(svg))), .button:not(:where(.disabled, [disabled], [aria-disabled=true])):focus-visible:not(:where(:has(svg))), .block-link:has(.button:not(:where(.disabled, [disabled], [aria-disabled=true]))):is(:hover, :focus-visible) .button:not(:where(.disabled, [disabled], [aria-disabled=true])):not(:where(:has(svg))) { padding-inline: var(--button_inline_padding) calc(var(--button_inline_padding) - var(--button_gap) - var(--button_icon_size) - var(--button_indent)); text-indent: var(--button_indent); } .button:not(:where(.disabled, [disabled], [aria-disabled=true])):hover.outline-white, .button:not(:where(.disabled, [disabled], [aria-disabled=true])):focus-visible.outline-white, .block-link:has(.button:not(:where(.disabled, [disabled], [aria-disabled=true]))):is(:hover, :focus-visible) .button:not(:where(.disabled, [disabled], [aria-disabled=true])).outline-white { --button_text_color: var(--color_text); } .button:not(:where(.disabled, [disabled], [aria-disabled=true])):hover.outline-white::after, .button:not(:where(.disabled, [disabled], [aria-disabled=true])):focus-visible.outline-white::after, .block-link:has(.button:not(:where(.disabled, [disabled], [aria-disabled=true]))):is(:hover, :focus-visible) .button:not(:where(.disabled, [disabled], [aria-disabled=true])).outline-white::after { filter: invert(1); } .button:not(:where(.disabled, [disabled], [aria-disabled=true])):hover.heart-button svg, .button:not(:where(.disabled, [disabled], [aria-disabled=true])):focus-visible.heart-button svg, .block-link:has(.button:not(:where(.disabled, [disabled], [aria-disabled=true]))):is(:hover, :focus-visible) .button:not(:where(.disabled, [disabled], [aria-disabled=true])).heart-button svg { color: var(--color_primary); } .button:not(:where(.disabled, [disabled], [aria-disabled=true])):hover::after, .button:not(:where(.disabled, [disabled], [aria-disabled=true])):focus-visible::after, .block-link:has(.button:not(:where(.disabled, [disabled], [aria-disabled=true]))):is(:hover, :focus-visible) .button:not(:where(.disabled, [disabled], [aria-disabled=true]))::after { transform: translateX(0); opacity: 1; } .button.disabled, .button[disabled], .button [aria-disabled=true] { opacity: 0.5; cursor: not-allowed; } :is(.button-link, .circle-button) { --button_img: url(https://secondharvest.b-cdn.net/images/icons/button-arrow-white.svg); --button_size: 45px; --button_bg: var(--color_primary); cursor: pointer; } :is(.button-link, .circle-button):hover:not(.disabled, [disabled], [aria-disabled=true])::before, :is(.button-link, .circle-button):focus-visible:not(.disabled, [disabled], [aria-disabled=true])::before, .block-link:has(:is(.button-link, .circle-button)):is(:hover, :focus-visible) :is(.button-link, .circle-button):not(.disabled, [disabled], [aria-disabled=true])::before { background-color: var(--color_button_hover); } :is(.button-link, .circle-button).disabled, :is(.button-link, .circle-button)[disabled], :is(.button-link, .circle-button)[aria-disabled=true] { opacity: 0.5; cursor: not-allowed; } :is(.button-link, .circle-button).dark { --color_button_hover: #1E1A1A; --button_bg: var(--color_dark); } :is(.button-link, .circle-button).white { --color_button_hover: var(--color_light); --button_bg: #FFF; color: var(--color_text); } :is(.button-link, .circle-button).white::after { filter: invert(1); } @media only screen and (max-width: 525px) { :is(.button-link, .circle-button) { --button_size: 40px; } } .button-link.back-button::before, .circle-button.back-button::before { transform: rotate(180deg); } .button-link::before, .circle-button::before { content: ""; display: block; width: var(--button_size); height: var(--button_size); padding: 0.85rem; line-height: 0; transition: 0.3s ease; border-radius: 50%; background-color: var(--button_bg); background-image: var(--button_img); background-repeat: no-repeat; background-position: center; background-size: 33%; } .button-link { --underline_color: var(--color_primary); display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs_m); font-weight: bold; } .button-link:is(:hover, :focus-visible), .block-link:has(.button-link):is(:hover, :focus-visible) .button-link { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--underline_color); text-underline-offset: var(--underline_offset); } .circle-button { display: inline-block; } .news-button { --button_img: url(https://secondharvest.b-cdn.net/images/icons/news-white.svg); } .phone-button { --button_img: url(https://secondharvest.b-cdn.net/images/icons/phone-white.svg); }
} @layer lucy-forms { #lucy-page .lucy-form, #lucy-content .lucy-form, .lucy-content .lucy-form { margin-bottom: var(--spacer_2xs); container-type: inline-size; container-name: lucy-form; } #lucy-page .custom-form, #lucy-content .custom-form, .lucy-content .custom-form { box-sizing: border-box; border: 1px solid var(--border_color); border-radius: var(--border_radius); } #lucy-page .custom-form h3, #lucy-page .custom-form p.body-small, #lucy-content .custom-form h3, #lucy-content .custom-form p.body-small, .lucy-content .custom-form h3, .lucy-content .custom-form p.body-small { margin-bottom: 0; } #lucy-page input[type=text], #lucy-page input[type=email], #lucy-page input[type=tel], #lucy-page input[type=password], #lucy-page input[type=number], #lucy-page input[type=date], #lucy-page input[type=datetime-local], #lucy-page select, #lucy-page textarea, #lucy-content input[type=text], #lucy-content input[type=email], #lucy-content input[type=tel], #lucy-content input[type=password], #lucy-content input[type=number], #lucy-content input[type=date], #lucy-content input[type=datetime-local], #lucy-content select, #lucy-content textarea, .lucy-content input[type=text], .lucy-content input[type=email], .lucy-content input[type=tel], .lucy-content input[type=password], .lucy-content input[type=number], .lucy-content input[type=date], .lucy-content input[type=datetime-local], .lucy-content select, .lucy-content textarea { width: 100%; font-size: 16px; font-family: var(--font_primary); border: 1px solid var(--border_color); background-color: #FFF; color: var(--color_text); border-radius: var(--input_border_radius); appearance: none; -moz-appearance: none; -webkit-appearance: none; } #lucy-page input[type=text]:not(textarea), #lucy-page input[type=email]:not(textarea), #lucy-page input[type=tel]:not(textarea), #lucy-page input[type=password]:not(textarea), #lucy-page input[type=number]:not(textarea), #lucy-page input[type=date]:not(textarea), #lucy-page input[type=datetime-local]:not(textarea), #lucy-page select:not(textarea), #lucy-page textarea:not(textarea), #lucy-content input[type=text]:not(textarea), #lucy-content input[type=email]:not(textarea), #lucy-content input[type=tel]:not(textarea), #lucy-content input[type=password]:not(textarea), #lucy-content input[type=number]:not(textarea), #lucy-content input[type=date]:not(textarea), #lucy-content input[type=datetime-local]:not(textarea), #lucy-content select:not(textarea), #lucy-content textarea:not(textarea), .lucy-content input[type=text]:not(textarea), .lucy-content input[type=email]:not(textarea), .lucy-content input[type=tel]:not(textarea), .lucy-content input[type=password]:not(textarea), .lucy-content input[type=number]:not(textarea), .lucy-content input[type=date]:not(textarea), .lucy-content input[type=datetime-local]:not(textarea), .lucy-content select:not(textarea), .lucy-content textarea:not(textarea) { height: var(--input_height); padding: 0 1rem; } #lucy-page input[type=text][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-page input[type=text][required][data-interacted]:invalid, #lucy-page input[type=email][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-page input[type=email][required][data-interacted]:invalid, #lucy-page input[type=tel][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-page input[type=tel][required][data-interacted]:invalid, #lucy-page input[type=password][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-page input[type=password][required][data-interacted]:invalid, #lucy-page input[type=number][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-page input[type=number][required][data-interacted]:invalid, #lucy-page input[type=date][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-page input[type=date][required][data-interacted]:invalid, #lucy-page input[type=datetime-local][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-page input[type=datetime-local][required][data-interacted]:invalid, #lucy-page select[required]:not(:placeholder-shown):not(:focus):invalid, #lucy-page select[required][data-interacted]:invalid, #lucy-page textarea[required]:not(:placeholder-shown):not(:focus):invalid, #lucy-page textarea[required][data-interacted]:invalid, #lucy-content input[type=text][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-content input[type=text][required][data-interacted]:invalid, #lucy-content input[type=email][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-content input[type=email][required][data-interacted]:invalid, #lucy-content input[type=tel][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-content input[type=tel][required][data-interacted]:invalid, #lucy-content input[type=password][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-content input[type=password][required][data-interacted]:invalid, #lucy-content input[type=number][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-content input[type=number][required][data-interacted]:invalid, #lucy-content input[type=date][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-content input[type=date][required][data-interacted]:invalid, #lucy-content input[type=datetime-local][required]:not(:placeholder-shown):not(:focus):invalid, #lucy-content input[type=datetime-local][required][data-interacted]:invalid, #lucy-content select[required]:not(:placeholder-shown):not(:focus):invalid, #lucy-content select[required][data-interacted]:invalid, #lucy-content textarea[required]:not(:placeholder-shown):not(:focus):invalid, #lucy-content textarea[required][data-interacted]:invalid, .lucy-content input[type=text][required]:not(:placeholder-shown):not(:focus):invalid, .lucy-content input[type=text][required][data-interacted]:invalid, .lucy-content input[type=email][required]:not(:placeholder-shown):not(:focus):invalid, .lucy-content input[type=email][required][data-interacted]:invalid, .lucy-content input[type=tel][required]:not(:placeholder-shown):not(:focus):invalid, .lucy-content input[type=tel][required][data-interacted]:invalid, .lucy-content input[type=password][required]:not(:placeholder-shown):not(:focus):invalid, .lucy-content input[type=password][required][data-interacted]:invalid, .lucy-content input[type=number][required]:not(:placeholder-shown):not(:focus):invalid, .lucy-content input[type=number][required][data-interacted]:invalid, .lucy-content input[type=date][required]:not(:placeholder-shown):not(:focus):invalid, .lucy-content input[type=date][required][data-interacted]:invalid, .lucy-content input[type=datetime-local][required]:not(:placeholder-shown):not(:focus):invalid, .lucy-content input[type=datetime-local][required][data-interacted]:invalid, .lucy-content select[required]:not(:placeholder-shown):not(:focus):invalid, .lucy-content select[required][data-interacted]:invalid, .lucy-content textarea[required]:not(:placeholder-shown):not(:focus):invalid, .lucy-content textarea[required][data-interacted]:invalid { color: var(--color_error); border-color: currentcolor; } #lucy-page input[type=text][required][data-interacted]:invalid::placeholder, #lucy-page input[type=email][required][data-interacted]:invalid::placeholder, #lucy-page input[type=tel][required][data-interacted]:invalid::placeholder, #lucy-page input[type=password][required][data-interacted]:invalid::placeholder, #lucy-page input[type=number][required][data-interacted]:invalid::placeholder, #lucy-page input[type=date][required][data-interacted]:invalid::placeholder, #lucy-page input[type=datetime-local][required][data-interacted]:invalid::placeholder, #lucy-page select[required][data-interacted]:invalid::placeholder, #lucy-page textarea[required][data-interacted]:invalid::placeholder, #lucy-content input[type=text][required][data-interacted]:invalid::placeholder, #lucy-content input[type=email][required][data-interacted]:invalid::placeholder, #lucy-content input[type=tel][required][data-interacted]:invalid::placeholder, #lucy-content input[type=password][required][data-interacted]:invalid::placeholder, #lucy-content input[type=number][required][data-interacted]:invalid::placeholder, #lucy-content input[type=date][required][data-interacted]:invalid::placeholder, #lucy-content input[type=datetime-local][required][data-interacted]:invalid::placeholder, #lucy-content select[required][data-interacted]:invalid::placeholder, #lucy-content textarea[required][data-interacted]:invalid::placeholder, .lucy-content input[type=text][required][data-interacted]:invalid::placeholder, .lucy-content input[type=email][required][data-interacted]:invalid::placeholder, .lucy-content input[type=tel][required][data-interacted]:invalid::placeholder, .lucy-content input[type=password][required][data-interacted]:invalid::placeholder, .lucy-content input[type=number][required][data-interacted]:invalid::placeholder, .lucy-content input[type=date][required][data-interacted]:invalid::placeholder, .lucy-content input[type=datetime-local][required][data-interacted]:invalid::placeholder, .lucy-content select[required][data-interacted]:invalid::placeholder, .lucy-content textarea[required][data-interacted]:invalid::placeholder { color: var(--color_error); } #lucy-page input[type=text][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-page input[type=text][required][data-interacted]:invalid + label, #lucy-page input[type=email][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-page input[type=email][required][data-interacted]:invalid + label, #lucy-page input[type=tel][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-page input[type=tel][required][data-interacted]:invalid + label, #lucy-page input[type=password][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-page input[type=password][required][data-interacted]:invalid + label, #lucy-page input[type=number][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-page input[type=number][required][data-interacted]:invalid + label, #lucy-page input[type=date][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-page input[type=date][required][data-interacted]:invalid + label, #lucy-page input[type=datetime-local][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-page input[type=datetime-local][required][data-interacted]:invalid + label, #lucy-page select[required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-page select[required][data-interacted]:invalid + label, #lucy-page textarea[required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-page textarea[required][data-interacted]:invalid + label, #lucy-content input[type=text][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-content input[type=text][required][data-interacted]:invalid + label, #lucy-content input[type=email][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-content input[type=email][required][data-interacted]:invalid + label, #lucy-content input[type=tel][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-content input[type=tel][required][data-interacted]:invalid + label, #lucy-content input[type=password][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-content input[type=password][required][data-interacted]:invalid + label, #lucy-content input[type=number][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-content input[type=number][required][data-interacted]:invalid + label, #lucy-content input[type=date][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-content input[type=date][required][data-interacted]:invalid + label, #lucy-content input[type=datetime-local][required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-content input[type=datetime-local][required][data-interacted]:invalid + label, #lucy-content select[required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-content select[required][data-interacted]:invalid + label, #lucy-content textarea[required]:not(:placeholder-shown):not(:focus):invalid + label, #lucy-content textarea[required][data-interacted]:invalid + label, .lucy-content input[type=text][required]:not(:placeholder-shown):not(:focus):invalid + label, .lucy-content input[type=text][required][data-interacted]:invalid + label, .lucy-content input[type=email][required]:not(:placeholder-shown):not(:focus):invalid + label, .lucy-content input[type=email][required][data-interacted]:invalid + label, .lucy-content input[type=tel][required]:not(:placeholder-shown):not(:focus):invalid + label, .lucy-content input[type=tel][required][data-interacted]:invalid + label, .lucy-content input[type=password][required]:not(:placeholder-shown):not(:focus):invalid + label, .lucy-content input[type=password][required][data-interacted]:invalid + label, .lucy-content input[type=number][required]:not(:placeholder-shown):not(:focus):invalid + label, .lucy-content input[type=number][required][data-interacted]:invalid + label, .lucy-content input[type=date][required]:not(:placeholder-shown):not(:focus):invalid + label, .lucy-content input[type=date][required][data-interacted]:invalid + label, .lucy-content input[type=datetime-local][required]:not(:placeholder-shown):not(:focus):invalid + label, .lucy-content input[type=datetime-local][required][data-interacted]:invalid + label, .lucy-content select[required]:not(:placeholder-shown):not(:focus):invalid + label, .lucy-content select[required][data-interacted]:invalid + label, .lucy-content textarea[required]:not(:placeholder-shown):not(:focus):invalid + label, .lucy-content textarea[required][data-interacted]:invalid + label { color: var(--color_error); } #lucy-page input[type=text][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-page input[type=text][required][data-interacted]:invalid + label:after, #lucy-page input[type=email][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-page input[type=email][required][data-interacted]:invalid + label:after, #lucy-page input[type=tel][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-page input[type=tel][required][data-interacted]:invalid + label:after, #lucy-page input[type=password][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-page input[type=password][required][data-interacted]:invalid + label:after, #lucy-page input[type=number][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-page input[type=number][required][data-interacted]:invalid + label:after, #lucy-page input[type=date][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-page input[type=date][required][data-interacted]:invalid + label:after, #lucy-page input[type=datetime-local][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-page input[type=datetime-local][required][data-interacted]:invalid + label:after, #lucy-page select[required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-page select[required][data-interacted]:invalid + label:after, #lucy-page textarea[required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-page textarea[required][data-interacted]:invalid + label:after, #lucy-content input[type=text][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-content input[type=text][required][data-interacted]:invalid + label:after, #lucy-content input[type=email][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-content input[type=email][required][data-interacted]:invalid + label:after, #lucy-content input[type=tel][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-content input[type=tel][required][data-interacted]:invalid + label:after, #lucy-content input[type=password][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-content input[type=password][required][data-interacted]:invalid + label:after, #lucy-content input[type=number][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-content input[type=number][required][data-interacted]:invalid + label:after, #lucy-content input[type=date][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-content input[type=date][required][data-interacted]:invalid + label:after, #lucy-content input[type=datetime-local][required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-content input[type=datetime-local][required][data-interacted]:invalid + label:after, #lucy-content select[required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-content select[required][data-interacted]:invalid + label:after, #lucy-content textarea[required]:not(:placeholder-shown):not(:focus):invalid + label:after, #lucy-content textarea[required][data-interacted]:invalid + label:after, .lucy-content input[type=text][required]:not(:placeholder-shown):not(:focus):invalid + label:after, .lucy-content input[type=text][required][data-interacted]:invalid + label:after, .lucy-content input[type=email][required]:not(:placeholder-shown):not(:focus):invalid + label:after, .lucy-content input[type=email][required][data-interacted]:invalid + label:after, .lucy-content input[type=tel][required]:not(:placeholder-shown):not(:focus):invalid + label:after, .lucy-content input[type=tel][required][data-interacted]:invalid + label:after, .lucy-content input[type=password][required]:not(:placeholder-shown):not(:focus):invalid + label:after, .lucy-content input[type=password][required][data-interacted]:invalid + label:after, .lucy-content input[type=number][required]:not(:placeholder-shown):not(:focus):invalid + label:after, .lucy-content input[type=number][required][data-interacted]:invalid + label:after, .lucy-content input[type=date][required]:not(:placeholder-shown):not(:focus):invalid + label:after, .lucy-content input[type=date][required][data-interacted]:invalid + label:after, .lucy-content input[type=datetime-local][required]:not(:placeholder-shown):not(:focus):invalid + label:after, .lucy-content input[type=datetime-local][required][data-interacted]:invalid + label:after, .lucy-content select[required]:not(:placeholder-shown):not(:focus):invalid + label:after, .lucy-content select[required][data-interacted]:invalid + label:after, .lucy-content textarea[required]:not(:placeholder-shown):not(:focus):invalid + label:after, .lucy-content textarea[required][data-interacted]:invalid + label:after { font-size: clamp(14px, 0.778rem, 0.778rem); font-weight: normal; letter-spacing: 0.009rem; line-height: 1.571; content: attr(data-error); } #lucy-page input[type=text]:focus, #lucy-page input[type=email]:focus, #lucy-page input[type=tel]:focus, #lucy-page input[type=password]:focus, #lucy-page input[type=number]:focus, #lucy-page input[type=date]:focus, #lucy-page input[type=datetime-local]:focus, #lucy-page select:focus, #lucy-page textarea:focus, #lucy-content input[type=text]:focus, #lucy-content input[type=email]:focus, #lucy-content input[type=tel]:focus, #lucy-content input[type=password]:focus, #lucy-content input[type=number]:focus, #lucy-content input[type=date]:focus, #lucy-content input[type=datetime-local]:focus, #lucy-content select:focus, #lucy-content textarea:focus, .lucy-content input[type=text]:focus, .lucy-content input[type=email]:focus, .lucy-content input[type=tel]:focus, .lucy-content input[type=password]:focus, .lucy-content input[type=number]:focus, .lucy-content input[type=date]:focus, .lucy-content input[type=datetime-local]:focus, .lucy-content select:focus, .lucy-content textarea:focus { border-color: var(--color_secondary); outline: none; -moz-outline: none; -webkit-outline: none; } #lucy-page input[type=text].error, #lucy-page input[type=email].error, #lucy-page input[type=tel].error, #lucy-page input[type=password].error, #lucy-page input[type=number].error, #lucy-page input[type=date].error, #lucy-page input[type=datetime-local].error, #lucy-page select.error, #lucy-page textarea.error, #lucy-content input[type=text].error, #lucy-content input[type=email].error, #lucy-content input[type=tel].error, #lucy-content input[type=password].error, #lucy-content input[type=number].error, #lucy-content input[type=date].error, #lucy-content input[type=datetime-local].error, #lucy-content select.error, #lucy-content textarea.error, .lucy-content input[type=text].error, .lucy-content input[type=email].error, .lucy-content input[type=tel].error, .lucy-content input[type=password].error, .lucy-content input[type=number].error, .lucy-content input[type=date].error, .lucy-content input[type=datetime-local].error, .lucy-content select.error, .lucy-content textarea.error { border-color: var(--color_error); } #lucy-page select, #lucy-content select, .lucy-content select { padding: 0 2rem 0 1rem !important; background-image: url(https://secondharvest.b-cdn.net/images/icons/select-marker.svg); background-repeat: no-repeat; background-position: calc(100% - 1rem) center; background-size: 1rem auto; } #lucy-page select[required][data-interacted]:invalid, #lucy-content select[required][data-interacted]:invalid, .lucy-content select[required][data-interacted]:invalid { color: var(--color_error); border-color: currentcolor; } #lucy-page select[required][data-interacted]:invalid + label, #lucy-content select[required][data-interacted]:invalid + label, .lucy-content select[required][data-interacted]:invalid + label { color: var(--color_error); } #lucy-page select[required][data-interacted]:invalid + label:after, #lucy-content select[required][data-interacted]:invalid + label:after, .lucy-content select[required][data-interacted]:invalid + label:after { letter-spacing: 0; content: attr(data-error); } #lucy-page textarea, #lucy-content textarea, .lucy-content textarea { height: calc(var(--input_height) * 2); padding: 1rem; } #lucy-page input[type=radio], #lucy-page input[type=checkbox], #lucy-content input[type=radio], #lucy-content input[type=checkbox], .lucy-content input[type=radio], .lucy-content input[type=checkbox] { flex: 0 0 auto; max-width: 1rem; max-height: 1rem; accent-color: var(--color_primary); } #lucy-page input::placeholder, #lucy-page textarea::placeholder, #lucy-content input::placeholder, #lucy-content textarea::placeholder, .lucy-content input::placeholder, .lucy-content textarea::placeholder { color: var(--color_text); } #lucy-page input:focus::placeholder, #lucy-page textarea:focus::placeholder, #lucy-content input:focus::placeholder, #lucy-content textarea:focus::placeholder, .lucy-content input:focus::placeholder, .lucy-content textarea:focus::placeholder { opacity: 0; } #lucy-page label, #lucy-content label, .lucy-content label { z-index: 2; display: block; margin-bottom: 0; font-family: var(--font_primary); font-size: var(--fs_s); font-weight: 600; letter-spacing: 0.001rem; } #lucy-page .label-hidden, #lucy-content .label-hidden, .lucy-content .label-hidden { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; white-space: nowrap; } #lucy-page ::placeholder, #lucy-content ::placeholder, .lucy-content ::placeholder { color: var(--color_text); opacity: 1; } #lucy-page ::-ms-input-placeholder, #lucy-content ::-ms-input-placeholder, .lucy-content ::-ms-input-placeholder { color: var(--color_text); } @container lucy-form (min-width: 1000px) { .custom-form { padding: var(--spacer_m); } } @container lucy-form (max-width: 1000px) { .custom-form { padding: var(--spacer_m); } } @container lucy-form (min-width: 700px) { .custom-form { padding: var(--spacer_m); } }
}
.field-wrap { position: relative; display: flex; flex-direction: column-reverse; gap: 0.33rem;
}
.field-wrap > * { margin-bottom: 0;
}
.field-wrap .icon-left { position: relative; --icon_width: 12px;
}
.field-wrap .icon-left input, .field-wrap .icon-left select, .field-wrap .icon-left textarea { padding-left: calc(var(--spacer_s) + var(--icon_width));
}
.field-wrap .icon-left svg { position: absolute; top: 50%; left: var(--spacer_xs); width: var(--icon_width); transform: translate(0, -50%); pointer-events: none;
}
.field-wrap .field-wrap-field { position: relative;
}
.field-wrap span.error { display: none;
}
.field-wrap [disabled] { opacity: 0.5; cursor: not-allowed;
}
.field-wrap [disabled] + label { opacity: 0.5; pointer-events: none;
} .field-wrap.separator { grid-column: auto/span 6 !important; margin: var(--grid_gutter) 0; border-top: 1px solid var(--border_color);
} .field-wrap.select select { position: relative; z-index: 1;
} .field-wrap.date input[type=date]::-webkit-calendar-picker-indicator, .field-wrap.date input[type=datetime-local]::-webkit-calendar-picker-indicator { filter: var(--filter_primary);
} .field-wrap.check, .field-wrap.radio { display: flex; gap: 0.5rem;
}
.field-wrap.check .check-group, .field-wrap.radio .check-group { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.889rem;
}
.field-wrap.check .check-group .option, .field-wrap.radio .check-group .option { display: flex; align-items: center; gap: 0.5rem;
}
.field-wrap.check .check-group .option input, .field-wrap.radio .check-group .option input { flex: 0 0 auto;
} .field-wrap.search { position: relative;
}
.field-wrap.search .icon-search { position: absolute; top: 50%; left: var(--spacer_xs); transform: translate(0, -50%);
}
.field-wrap.search input { padding-left: var(--spacer_m);
}
.field-wrap.search #page-search-clear { position: absolute; top: 50%; right: 1rem; font-size: 0.667rem; line-height: 0; transform: translate(0, -50%);
} .field-wrap label { display: flex; justify-content: space-between; align-items: center;
}
.field-wrap label.error { color: var(--color_error);
} .form-container { container-name: form-grid; container-type: inline-size;
} form.grid, div.grid[id*=form], .form-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--grid_gutter);
}
form.grid .field-wrap, form.grid .field-wrap.half, div.grid[id*=form] .field-wrap, div.grid[id*=form] .field-wrap.half, .form-grid .field-wrap, .form-grid .field-wrap.half { grid-column: auto/span 3;
}
form.grid .field-wrap.third, div.grid[id*=form] .field-wrap.third, .form-grid .field-wrap.third { grid-column: auto/span 2;
}
form.grid .field-wrap.textarea, form.grid .field-wrap.check, form.grid .field-wrap.full, form.grid > *:not(.field-wrap), div.grid[id*=form] .field-wrap.textarea, div.grid[id*=form] .field-wrap.check, div.grid[id*=form] .field-wrap.full, div.grid[id*=form] > *:not(.field-wrap), .form-grid .field-wrap.textarea, .form-grid .field-wrap.check, .form-grid .field-wrap.full, .form-grid > *:not(.field-wrap) { grid-column: auto/span 6;
}
@container form-grid (max-width: 600px) { form.grid, div.grid[id*=form], .form-grid { grid-template-columns: 1fr; } form.grid .field-wrap, form.grid > *, div.grid[id*=form] .field-wrap, div.grid[id*=form] > *, .form-grid .field-wrap, .form-grid > * { grid-column: 1/-1 !important; }
} #recaptcha_widget_div { margin-bottom: 1rem;
} #lucy-content:has(.home-main-ctas) { padding-block-end: 0;
} .home-main-ctas { position: relative; z-index: 1; margin-block-start: -15rem; text-align: center; border-radius: 20px 0 20px 0; background-image: url("/images/noise-bg.webp"), url("/images/food-bg-small-opacity-15.webp"); background-size: 200px, cover; overflow: hidden;
}
.home-main-ctas .main-ctas-background { position: absolute; inset: 0; background-color: var(--color_primary); background-color: #EB0029; mix-blend-mode: multiply;
}
.home-main-ctas .main-ctas-inner { display: grid; grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 1080px) { .home-main-ctas .main-ctas-inner { grid-template-columns: repeat(2, 1fr); }
}
.home-main-ctas article { padding-block: 4.25rem 4rem; color: #FFF; transition: background-color var(--transition_speed) var(--transition_timing);
}
.home-main-ctas article:hover, .home-main-ctas article:focus-within { background-color: var(--color_button_hover);
}
@media (pointer: fine) { .home-main-ctas article:hover .hover-only, .home-main-ctas article:focus-within .hover-only { display: revert-layer; } .home-main-ctas article:hover svg:not(.hover-only), .home-main-ctas article:focus-within svg:not(.hover-only) { display: none; }
}
.home-main-ctas article h2 { margin-block: 1.25rem 0;
}
.home-main-ctas article svg { height: 72px; margin-inline: auto;
}
.home-main-ctas article .home-cta-icon-wrap { display: grid; height: 72px; place-content: center;
}
.home-main-ctas article .circle-button { color: var(--color_text); --button_bg: #FFF; --color_button_hover: #FFF; --button_img: url('/images/icons/arrow-right.svg'); --button_size: 60px;
}
.home-main-ctas article .hover-only { display: none;
}
@media only screen and (max-width: 520px) { .home-main-ctas article { padding-block: 3.25rem 2.5rem; } .home-main-ctas article svg { height: 50px; } .home-main-ctas article .circle-button { --button_size: 40px; }
} .home-section-header { margin-block-end: 0.75rem; line-height: 0.75; font-size: 2rem; font-family: var(--font_accent); text-transform: none;
}
@media only screen and (max-width: 525px) { .home-section-header { font-size: 20px; }
} .home-serve-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7.75cqi; margin-block: 7.3rem calc(7.3rem + var(--tear_mask_padding));
}
.home-serve-section .image-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px;
}
.home-serve-section .image-grid img { border-radius: 20px;
}
.home-serve-section .image-grid :first-child { grid-row: span 2;
}
.home-serve-section .image-grid :nth-child(n+2) { grid-column: 2;
}
@media only screen and (max-width: 525px) { .home-serve-section .image-grid { gap: 10px; }
}
@media only screen and (max-width: 730px) { .home-serve-section { grid-template-columns: 1fr; } .home-serve-section .image-grid { order: 2; }
}
@media only screen and (max-width: 600px) { .home-serve-section { margin-block: 3.5rem 0; gap: 2rem 0; }
} .home-stats-section { margin-block: 7.3rem 0; padding-block-end: 7.3rem; text-align: center;
}
.home-stats-section .home-stats { --transition_speed: 1s; padding-block: 3.125rem; row-gap: 1rem;
}
@media only screen and (max-width: 910px) { .home-stats-section .home-stats { padding-block-start: 0; }
}
.home-stats-section .home-stats .stats-container { opacity: 0; transform: translateY(-2em); transition-property: opacity, transform; transition-duration: var(--transition_speed); transition-timing-function: var(--transition_timing);
}
.home-stats-section .home-stats .stats-container em { font-size: 5.875rem;
}
@media only screen and (max-width: 910px) { .home-stats-section .home-stats .stats-container em { font-size: 4rem; }
}
.home-stats-section .home-stats .stats-container p { font-size: 1.375rem; line-height: 1.45;
}
.home-stats-section .home-stats .stats-container.show { opacity: 1; transform: translateY(0);
}
@media only screen and (max-width: 600px) { .home-stats-section { margin-block: 3.5rem 0; padding-block-end: 3.5rem; } .home-stats-section .home-stats { grid-template-columns: 1fr; } .home-stats-section .stats-container em { font-size: 5rem !important; }
} .page-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media only screen and (max-width: 1080px) { .page-card-grid { grid-template-columns: 1fr; gap: 1rem; }
} .home-find-food-section { padding-block: calc(7.3rem + var(--tear_mask_padding)); position: relative; text-align: center; color: #FFF; background-color: var(--color_dark);
}
.home-find-food-section .inner-bg { position: absolute; inset: 0; z-index: -1; background-image: url("/images/noise-bg.webp"), url(https://secondharvest.b-cdn.net/images/food-bg-opacity-25.webp); background-size: 200px, cover; mix-blend-mode: multiply; pointer-events: none;
}
.home-find-food-section .page-card-grid { margin-block-end: 3.5rem;
} .home-stories-section { padding-block: 4.5rem; background-color: #FFF;
}
@media only screen and (max-width: 600px) { .home-stories-section { padding-block: 3.5rem; }
} .home-give-section { position: relative; padding-block: 11rem; text-align: center; color: #FFF; background-color: var(--color_dark); background-image: url(https://secondharvest.b-cdn.net/images/food-blurred-photo.jpg); background-size: cover; background-position: center;
}
.home-give-section::before { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); content: "";
}
.home-give-section .container { position: relative; z-index: 1;
}
.home-give-section .page-card-grid { margin-block: 4.875rem 3.5rem;
}
@media only screen and (max-width: 600px) { .home-give-section .page-card-grid { margin-block-start: 3rem; }
}
.home-give-section .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
@media only screen and (max-width: 600px) { .home-give-section { padding-block: 9rem; }
} .home-programs-section { padding-block: 4.5rem 7rem; background-color: #FFF;
}
.home-programs-section .section-grid { display: grid; grid-template-columns: 3fr 2fr; align-items: center; gap: 7.6875rem;
}
.home-programs-section .section-grid img { border-radius: 20px 0 20px 0;
}
.home-programs-section .home-section-subheader { text-wrap: balance;
}
@media only screen and (max-width: 600px) { .home-programs-section { padding-block: 3.5rem; }
} .home-events-section > .container { padding-block: 7rem 0; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 6 0 0 0; border-image-width: 4px; border-image-repeat: repeat;
}
@media only screen and (max-width: 600px) { .home-events-section > .container { padding-block: 3.5rem; }
}
.home-events-section .event-heading-wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-block-end: 3.25rem;
}
.home-events-section .event-heading-wrap h2 { margin: 0;
}
@media only screen and (max-width: 600px) { .home-events-section .event-heading-wrap .button { display: none; }
}
.home-events-section .home-event-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.home-events-section .home-event-grid .img-wrap { position: relative; margin-block-end: 1.5rem; aspect-ratio: 326/212;
}
.home-events-section .home-event-grid .img-wrap img { width: 100%; height: 100%; object-fit: cover;
}
.home-events-section .home-event-grid .img-wrap-inner { background-color: var(--color_light); border-radius: 20px; overflow: hidden;
}
@media only screen and (max-width: 1080px) { .home-events-section .home-event-grid { grid-template-columns: 1fr 1fr; }
}
@media only screen and (max-width: 600px) { .home-events-section .home-event-grid { grid-template-columns: 1fr; }
}
.home-events-section .event-card:hover .event-heading, .home-events-section .event-card:focus-within .event-heading { text-decoration: underline;
}
.home-events-section .event-card:hover .cal-date-block, .home-events-section .event-card:focus-within .cal-date-block { background-color: var(--color_primary);
}
.home-events-section .event-card .event-date { margin-block-end: 0.4375rem; font-weight: bold;
}
.home-events-section .event-card .cal-date-block { position: absolute; z-index: 1; right: 20px; bottom: -30px;
}
.home-events-section .event-card .img-wrap { border-radius: 20px; background-color: var(--color_dark);
} .featured-event-wrap { margin-block-start: 4.625rem; background-color: var(--color_light); background-image: url("/images/noise-bg.webp"), url(https://secondharvest.b-cdn.net/images/food-bg-small-opacity-15.webp); background-size: 200px, cover; border-radius: 20px 0 20px 0; overflow: hidden;
}
.featured-event-wrap.home-featured-event { margin-block-start: 0;
}
.featured-event-wrap.dark { color: #FFF; background-color: #1E1A1A; background-image: none;
}
.featured-event-wrap.news-featured { margin-block: 0 5rem;
}
.featured-event-wrap .inner { display: grid;
}
.featured-event-wrap .inner:where(:has(img)) { grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 800px) { .featured-event-wrap .inner { grid-template-columns: 1fr; } .featured-event-wrap .inner .start { min-height: 100px; mask: none; }
}
.featured-event-wrap .img-wrap { position: relative; height: 100%;
}
.featured-event-wrap .img-wrap img { width: 100%; height: 100%; object-fit: cover;
}
.featured-event-wrap .end { padding-block: 4.125rem; padding-inline: 70px 88px; text-align: left;
}
@media only screen and (max-width: 990px) { .featured-event-wrap .end { padding-inline-start: 40px; }
}
@media only screen and (max-width: 900px) { .featured-event-wrap .end { padding-inline-start: 20px; padding-inline-end: 60px; }
}
@media only screen and (max-width: 600px) { .featured-event-wrap .end { padding-block: 2.5rem; } .featured-event-wrap .end p { font-size: var(--fs_s); }
}
.featured-event-wrap .event-date { margin-block-end: 1.5rem; font-weight: bold;
}
.featured-event-wrap .cal-date-block { position: absolute; top: 20px; right: 20px;
}
.featured-event-wrap .cal-date-block.date-block-mobile { display: none;
}
@media only screen and (max-width: 600px) { .featured-event-wrap .cal-date-block.date-block-mobile { display: block; top: auto; bottom: -30px; }
}
.featured-event-wrap .cal-date-block:not(.date-block-mobile) { display: block;
}
@media only screen and (max-width: 600px) { .featured-event-wrap .cal-date-block:not(.date-block-mobile) { display: none; }
} .home-event-layout { display: grid; gap: 3rem;
} .news-filters-container { container-name: news-filters; container-type: inline-size;
} .news-filters { width: 100%; display: flex; align-items: end; gap: var(--grid_gutter); margin-block-end: 3.125rem;
}
.news-filters .field-wrap { flex: 1;
}
.news-filters .large { flex: 2;
}
@media only screen and (max-width: 1280px) { .news-filters .large { flex: 1; }
}
.news-filters .button { flex-basis: 13.125rem;
}
@media only screen and (max-width: 1360px) { .news-filters .button { flex-basis: auto; }
}
@container news-filters (width < 574px) { .news-filters { flex-direction: column; align-items: start; } .news-filters > * { width: 100%; }
} .news-article { padding-block: 4.125rem; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 0 0 6 0; border-image-width: 4px; border-image-repeat: repeat;
}
.news-article:first-child { border-image-slice: 6 0 6 0;
}
.news-article:has(.news-image) { display: grid; grid-template-columns: 1fr 23.9375rem; gap: 1rem 4.625rem;
}
.news-article .news-heading, .news-article .news-intro, .news-article .news-meta { margin-block-end: 1rem;
}
.news-article .news-image-wrap { border-radius: 20px; overflow: hidden;
}
.news-article .news-start { max-width: 1130px;
}
@media only screen and (max-width: 525px) { .news-article .news-intro { font-size: var(--fs_s); }
} :is(.news-article, .news-page-header) .news-meta .separator { margin-inline: 0.5rem;
} .news-page-header .news-meta { font-weight: bold;
} .news-grid:has(~ *) { margin-block-end: 3.125rem;
} .share-aside-wrap { padding-block: 2.625rem; padding-inline: 38px; text-align: center; border-radius: 20px; background-color: #FFF; box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.05);
}
.share-aside-wrap h2 { margin-block-end: 1rem;
}
.share-aside-wrap ul { display: flex; gap: 5px; justify-content: center; align-items: center; margin-block-end: 1.5rem; list-style: none;
}
.share-aside-wrap ul svg { width: 34px;
}
.share-aside-wrap a { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; color: var(--color_dark); border-radius: 50%; transition: 0.2s;
}
.share-aside-wrap a:hover, .share-aside-wrap a:focus-visible { color: #FFF; background-color: var(--color_dark);
}
.share-aside-wrap .button { width: 100%;
}
.share-aside-wrap #copy-to-clipboard { position: absolute; top: -9999px; left: -9999px;
} .news-back-button { margin-block-end: 3.5rem;
}
@media only screen and (max-width: 1000px) { .news-back-button { margin-block: 3.5rem; }
} .contact-layout { display: grid; grid-template-columns: 3fr 383px; gap: 4.625rem;
}
@media only screen and (max-width: 1000px) { .contact-layout { grid-template-columns: 1fr; }
} .location-small-article:not(:last-child) { margin-block-end: 3.125rem;
}
.location-small-article h2 { margin-block-end: 0.875rem;
}
.location-small-article dl div { display: flex; align-items: baseline; gap: 5px; margin-block-end: 10px;
}
.location-small-article svg { width: 13px;
} .donate-page { position: relative; z-index: 1; margin-block-start: -12rem; padding-block-end: var(--spacer_xl); background-image: linear-gradient(to bottom, rgba(60, 54, 54, 0) 0%, #3C3636 10rem);
}
.donate-page .donate-form-wrap { width: 100%; min-height: 400px; padding: 2rem; text-align: center; background-color: #FFF; border-radius: 20px;
} .page-cards-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); justify-content: center; gap: var(--grid_gutter);
}
.page-cards-layout.margin-top { margin-block-start: var(--spacer_xl);
}
@media only screen and (max-width: 600px) { .page-cards-layout.margin-top { margin-block-start: var(--spacer_m); }
}
@media only screen and (max-width: 1080px) { .page-cards-layout { grid-template-columns: 1fr; }
} .overview-section { position: relative; padding-block: var(--spacer_2xl);
}
.overview-section .callout-large-container:not(:first-child) { margin-block-start: var(--spacer_2xl);
}
@media only screen and (max-width: 600px) { .overview-section .callout-large-container:not(:first-child) { margin-block-start: var(--spacer_l); }
}
.overview-section .callout-large-container:not(:last-child) { margin-block-end: var(--spacer_2xl);
}
@media only screen and (max-width: 600px) { .overview-section .callout-large-container:not(:last-child) { margin-block-end: var(--spacer_l); }
}
@media only screen and (max-width: 600px) { .overview-section:not(.tear-both) { padding-block: var(--spacer_l); }
} .overview-section-heading { text-align: center; margin-inline: auto; max-width: 550px;
} .location-article .inner { display: grid; grid-template-columns: 290px 1fr; gap: 2rem 3.25rem;
}
.location-article .inner:not(:has(.location-img)) { grid-template-columns: 1fr;
}
@media only screen and (max-width: 630px) { .location-article .inner { grid-template-columns: 1fr; }
}
.location-article .img-wrap { border-radius: 20px; overflow: hidden;
}
.location-article .location-img { width: 100%;
}
.location-article .location-title, .location-article .location-icon-list { margin-block-end: 1rem;
}
.location-article:not(:last-of-type) { margin-block-end: 3.25rem; padding-block-end: 3.25rem; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 0 0 6 0; border-image-width: 4px; border-image-repeat: repeat;
} .job-page .job-article { padding-block: 2.5rem; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 0 0 6 0; border-image-width: 4px; border-image-repeat: repeat;
}
.job-page .job-article:first-child { border-image-slice: 6 0 6 0;
}
.job-page .job-heading, .job-page .job-intro { margin-block-end: var(--spacer_xs);
}
.job-page .job-type { margin: 0; font-weight: bold; color: var(--color_dark);
} .job-detail-page .job-header { margin-block-end: 1.875rem;
}
.job-detail-page .job-header h1, .job-detail-page .job-header p { margin: 0;
}
.job-detail-page .job-type-wrap { display: flex; gap: 10px; align-items: center; margin-block-start: 1.5rem;
}
.job-detail-page .job-type-wrap p { color: var(--color_dark); font-weight: bold;
}
.job-detail-page .job-type-wrap svg { width: 18px; color: var(--color_primary);
} .staff-article { padding-block: 2.5rem; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 0 0 6 0; border-image-width: 4px; border-image-repeat: repeat;
}
.staff-article:first-child { border-image-slice: 6 0 6 0;
}
.staff-article .inner { display: grid; grid-template-columns: 1fr auto; gap: 0 40px; align-items: center;
}
.staff-article .inner:has(.staff-img) { grid-template-columns: 170px 1fr auto; gap: 40px;
}
.staff-article .staff-heading, .staff-article .staff-title { margin-block-end: var(--spacer_xs);
}
.staff-article .staff-title { font-weight: bold;
}
@media only screen and (max-width: 525px) { .staff-article .staff-title { font-weight: normal; line-height: 1.5; }
}
.staff-article .staff-img { border-radius: 20px;
}
.staff-article .staff-bio-wrap { position: relative; margin-block-end: var(--spacer_s);
}
.staff-article .staff-bio-wrap:not(.overflow) button { display: none;
}
.staff-article .staff-bio-wrap.expanded .staff-bio { max-height: none;
}
.staff-article .staff-bio-wrap.expanded button { position: static;
}
.staff-article .staff-bio-wrap.expanded button .bio-ellipses { display: none;
}
.staff-article .staff-bio-wrap button { position: absolute; bottom: 0; right: 0; background-color: #FFF; background-image: url("/images/noise-bg.webp");
}
.staff-article .staff-bio-wrap button .bio-action { color: var(--color_primary); font-weight: bold; text-decoration: underline;
}
.staff-article .staff-bio { margin: 0; max-height: 2lh; overflow: hidden;
}
.staff-article .content-area { grid-row: span 2;
} .story-container { container-name: story-article; container-type: inline-size; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 0 0 6 0; border-image-width: 4px; border-image-repeat: repeat;
}
.story-container:first-child { border-image-slice: 6 0 6 0;
} .story-article { padding-block: 2.5rem;
}
.story-article .inner { display: grid; grid-template-columns: 1fr; gap: 1.5rem 3.25rem; align-items: center;
}
.story-article .inner:has(.story-img) { grid-template-columns: 18.125rem 1fr;
}
.story-article .story-heading, .story-article .story-intro { margin-block-end: 1rem;
}
.story-article .img-wrap { border-radius: 20px; overflow: hidden;
}
.story-article .img-wrap img { width: 100%;
}
@container story-article (max-width: 768px) { .story-article .inner.inner { grid-template-columns: 14rem 1fr; }
}
@container story-article (max-width: 520px) { .story-article .inner.inner { grid-template-columns: 1fr; } .story-article p { font-size: var(--fs_s); }
} .sidebar-callout { position: relative; margin-block: 3.375rem; color: #FFF; background-color: var(--color_dark); border-radius: 20px; overflow: hidden;
}
.sidebar-callout::after { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 99%); content: "";
}
.sidebar-callout h2 { margin-block-end: 1rem;
}
.sidebar-callout .callout-inner { position: relative; z-index: 1; padding-block: 11.8rem 2rem; padding-inline: 28px;
}
@media only screen and (max-width: 1000px) { .sidebar-callout .callout-inner:has(+ .callout-img)::before { content: ""; z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 200px); }
}
.sidebar-callout .callout-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
@media only screen and (max-width: 1000px) { .sidebar-callout .callout-img { width: auto; }
}
.sidebar-callout .button { width: 100%;
} @media only screen and (max-width: 1000px) { .story-back-button { margin-block-start: 2rem; }
}
.map-section { display: grid; grid-template-columns: 1fr 350px; width: 100%; height: min(100dvh, 1076px); margin-block-end: var(--spacer_xl);
}
.map-section .map-sidebar { overflow: scroll; background-color: #FFF;
}
.map-section .map-sidebar .map-location-listing { --category_color: var(--color_primary); padding-block: 1.25rem; padding-inline: 25px; background-color: #FFF; border-inline-start: 5px solid transparent; border-block-end: 1px solid var(--color_border);
}
.map-section .map-sidebar .map-location-listing:has(.active) { border-inline-start-color: var(--category_color);
}
.map-section .map-sidebar .map-location-listing:first-of-type { border-block-start: 1px solid var(--color_border);
}
.map-section .map-sidebar .map-location-listing.hidden { display: none;
}
.map-section .map-sidebar .map-location-listing h2, .map-section .map-sidebar .map-location-listing p { margin: 0;
}
.map-section .map-sidebar .map-location-listing button { text-align: left; line-height: 1.5;
}
.map-section .map-sidebar .map-type-wrap p { display: flex; gap: 6px; align-items: baseline; color: var(--color_dark); font-weight: bold;
}
.map-section .map-sidebar .map-type-wrap p::before { content: ""; border-radius: 50%; display: inline-block; width: 0.714em; height: 0.714em; background-color: var(--category_color);
}
.map-section .map { width: 100%; height: 100%;
}
.map-section .map .location-icon-list svg { color: var(--color_dark);
}
.map-section .map .location-icon-list div:has(dd:empty) { display: none;
}
.map-section .popup-header { margin-block-end: 1rem;
}
.map-section .popup-header h2, .map-section .popup-header h3, .map-section .popup-header p { margin: 0;
}
.map-section .popup-category { margin-block-end: 0.25rem; font-weight: bold;
}
.map-section .mapboxgl-popup-content { padding-block: 1.5rem; padding-inline: 32px; border-radius: 20px; box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.05);
}
.map-section .mapboxgl-popup-close-button { top: 10px; right: 10px; font-size: 24px;
}
@media (min-width: 600px) { .map-section .mapboxgl-popup { max-width: 434px !important; }
}
.map-section .mapboxgl-marker path[opacity] { display: none;
}
@media only screen and (max-width: 920px) { .map-section { grid-template-columns: 1fr; } .map-section .map-sidebar { display: none; overflow: hidden; }
}
@media (pointer: coarse) { .map-section { height: min(600px, 66dvh); }
}
@media only screen and (max-width: 700px) { .map-section .mapboxgl-popup-content { padding-inline: 20px; }
} #map-filters { margin-block-end: 3.125rem;
}
#map-filters .fields-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end;
}
#map-filters .fields-row .button { width: 100%;
}
@media only screen and (max-width: 1080px) { #map-filters .fields-row { grid-template-columns: 1fr 1fr; } #map-filters .fields-row .button { grid-column: 1/-1; width: auto; }
}
@media only screen and (max-width: 600px) { #map-filters .fields-row { grid-template-columns: 1fr; } #map-filters .fields-row .button { width: 100%; }
} #geolocation-disabled-text svg { display: inline; width: 1.3rem; color: var(--color_primary); vertical-align: text-bottom; margin-inline-end: 0.5rem; filter: drop-shadow(2px 7px 6px rgba(22, 20, 19, 0.2));
}
#geolocation-disabled-text button { text-decoration: underline; font-weight: bold;
} .account-login-outer { display: grid; gap: 2rem 8.4375rem;
}
.account-login-outer:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 980px) { .account-login-outer { column-gap: 3rem; }
}
@media only screen and (max-width: 750px) { .account-login-outer { grid-template-columns: 1fr; }
} .agency-login-form { padding-block: 4.875rem; padding-inline: 94px; background-color: #FFF; border-radius: 20px; box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.05);
}
.agency-login-form.forgot-form { justify-self: center; min-width: 700px;
}
@media only screen and (max-width: 1000px) { .agency-login-form.forgot-form { justify-self: auto; min-width: auto; }
}
.agency-login-form .field-wrap { margin-block-end: 1rem;
}
.agency-login-form .icon-left { --icon_width: 20px;
}
.agency-login-form .button { width: 100%;
}
.agency-login-form .form-end-link { margin-block-start: 0.33rem; text-decoration: underline;
}
.agency-login-form .form-end-link:hover { text-decoration: none;
}
@media only screen and (max-width: 1200px) { .agency-login-form { padding-inline: 40px; }
}
@media only screen and (max-width: 440px) { .agency-login-form { padding-inline: 20px; }
} .protected-heading-wrapper { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 1.5rem;
} .event-page .event-filters { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--grid_gutter); align-items: end; width: 100%; margin-block-end: 3.625rem;
}
@media only screen and (max-width: 1200px) { .event-page .event-filters { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 768px) { .event-page .event-filters { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 525px) { .event-page .event-filters { grid-template-columns: 1fr; }
}
.event-page .calendar-date-separator { padding-block: 1rem; background-color: var(--color_light);
}
.event-page .calendar-date-separator h2 { margin: 0;
}
.event-page .close-search-button { position: absolute; display: block; right: 20px; top: 50%; width: 12px; transform: translateY(-50%);
}
@media only screen and (max-width: 525px) { .event-page .event-wrapper .cal-date-block { display: none; }
} .page-header .event-page-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block-end: 3.5rem;
} #event-listing .container + .container .event-article { border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 6 0 0; border-image-width: 4px; border-image-repeat: repeat;
} .signature-event-section { margin-block-start: 3.75rem; padding-block-start: 3.75rem; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 6 0 0 0; border-image-width: 4px; border-image-repeat: repeat;
}
.signature-event-section h2 { margin-block-end: 3.375rem;
} .event-detail-header { display: grid; gap: 2rem 7.125rem; align-items: center; text-align: left;
}
@media only screen and (max-width: 900px) { .event-detail-header { gap: 2rem 3rem; }
}
.event-detail-header a:hover, .event-detail-header a:focus-visible { text-decoration: underline;
}
.event-detail-header:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 700px) { .event-detail-header:has(> :nth-child(2)) { grid-template-columns: 1fr; }
}
.event-detail-header .event-icon-list div { display: grid; grid-template-columns: 18px 1fr; justify-content: center; align-items: center; gap: 10px;
}
.event-detail-header .event-icon-list div:not(:last-child) { margin-block-end: 5px;
}
.event-detail-header .event-icon-list svg { position: relative; top: -0.1em; width: 18px; margin-inline: auto; color: #FFF;
}
.event-detail-header .back-button { margin-block-end: 1.5rem;
}
.event-detail-header .event-image img { margin-inline-start: auto; border-radius: 20px;
}
@media only screen and (max-width: 700px) { .event-detail-header .event-image { order: -1; } .event-detail-header .event-image img { margin: 0; max-width: min(100%, 600px); }
}
.event-detail-header .event-buttons-wrap { display: flex; gap: 10px; margin-block-start: 2.75rem;
} .sponsorships-grid { display: grid; gap: var(--grid_gutter); grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); grid-template-rows: auto 1fr auto;
}
@media only screen and (max-width: 525px) { .sponsorships-grid { grid-template-columns: 1fr; }
} .sponsor-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0; padding-block: 3rem; padding-inline: 50px; text-align: center; border-radius: 20px; background-color: #FFF; box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.05);
}
.sponsor-card .sponsorship-title { margin-block-end: 0.5rem;
}
.sponsor-card .button { width: 100%;
}
.sponsor-card .sponsorship-buttons { display: grid; gap: 10px;
}
.sponsor-card .sponsorship-image { width: 134px; margin-block-end: 1.5rem; margin-inline: auto; border-radius: 50%;
} .sponsorship-cards-dialog { --card_width: 470px; width: 100dvw; height: 100dvh; max-width: 100dvw; max-height: 100dvh; background-color: var(--color_dark); border: 0;
}
.sponsorship-cards-dialog:has(.sponsor-card.in-view:first-of-type) .circle-button[data-prev] { display: none;
}
.sponsorship-cards-dialog:has(.sponsor-card.in-view:last-of-type) .circle-button[data-next] { display: none;
}
.sponsorship-cards-dialog .dialog-inner { display: grid; grid-template-rows: auto 1fr; height: 100%;
}
.sponsorship-cards-dialog .cards-slider { display: grid; gap: calc(46.1dvw - var(--card_width)); align-items: start; grid-auto-flow: column; grid-auto-columns: min(100cqi, var(--card_width)); width: 100%; margin-block: auto; padding-block-start: 40px; padding-inline: 46.1vw; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: contain; scroll-snap-type: x mandatory;
}
@media only screen and (max-width: 1200px) { .sponsorship-cards-dialog .cards-slider { column-gap: max(20px, 44dvw - var(--card_width) / 2); }
}
.sponsorship-cards-dialog .cards-slider { -ms-overflow-style: none; scrollbar-width: none;
}
.sponsorship-cards-dialog .cards-slider::-webkit-scrollbar { display: none;
}
.sponsorship-cards-dialog .cards-slider .sponsor-card { display: block; max-height: 90dvh; overflow-y: scroll; transition: transform 0.2s ease; scroll-snap-align: center;
}
.sponsorship-cards-dialog .cards-slider .sponsor-card.in-view { transform: translateY(-40px);
}
@media only screen and (max-width: 600px) { .sponsorship-cards-dialog .cards-slider .sponsor-card { max-width: 90dvw; }
}
.sponsorship-cards-dialog #close-sponsorship-dialog { margin-block-start: 20px; margin-inline: auto 20px;
}
.sponsorship-cards-dialog .circle-button { --button_size: 60px; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
}
.sponsorship-cards-dialog .circle-button[data-prev] { left: calc(50% - var(--card_width));
}
.sponsorship-cards-dialog .circle-button[data-next] { right: calc(50% - var(--card_width));
}
.sponsorship-cards-dialog .benefits-wrap { text-align: left;
}
.sponsorship-cards-dialog .benefits-heading { margin-block: 1.5rem 0.5rem; padding-block-start: 1.5rem; border-image-source: url(https://secondharvest.b-cdn.net/images/dotted-line-horizontal.png); border-image-slice: 6 0 0 0; border-image-width: 4px; border-image-repeat: repeat;
}
.sponsorship-cards-dialog .benefits-list { list-style: none;
}
.sponsorship-cards-dialog .benefits-list li { display: flex; gap: 12px; align-items: baseline; margin-block-end: 0.33rem;
}
.sponsorship-cards-dialog .benefits-list svg { width: 12px; color: var(--color_secondary); flex-shrink: 0;
} .event-sponsors-grid { display: grid; gap: var(--grid_gutter); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: center;
} #search-results .result-container { display: flex; flex-direction: column; gap: 1rem; padding: var(--spacer_m) 0; border-top: 1px solid var(--border_color);
}
#search-results .result-container a { text-decoration: underline;
}
#search-results .result-container a:hover, #search-results .result-container a:focus-visible { text-decoration: none;
}
#search-results .result-container > * { margin-bottom: 0;
}
#search-results .result-container p.result-title a:any-link { font-weight: 700;
}
#search-results .result-container:last-of-type { border-bottom: 1px solid var(--border_color);
} html { line-height: 1.875; font-size: var(--base_font_size); font-family: var(--font_primary); overflow-x: hidden;
} .noise-bg { background-image: url("/images/noise-bg.webp");
} .hover-scale-img img { scale: 1; transition: scale var(--transition_speed) var(--transition_timing);
}
.hover-scale-img:hover img, .hover-scale-img:focus-within img { scale: 1.1;
} .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
} .pagination-wrap { display: grid; grid-template-columns: auto 1fr auto; gap: var(--grid_gutter); align-items: center;
}
.pagination-wrap.search-pagination { margin-block-start: var(--spacer_m);
}
.pagination-wrap .middle { display: flex; justify-content: center; align-items: center; gap: 10px;
}
.pagination-wrap .middle select { display: inline-block; width: auto; min-width: 70px;
}
@media only screen and (max-width: 600px) { .pagination-wrap .button { --button_inline_padding: 1.5rem; font-size: var(--fs_s); }
} .location-icon-list div { display: flex; align-items: baseline; gap: 5px;
}
.location-icon-list div:not(:last-child) { margin-block-end: 10px;
}
.location-icon-list svg { width: 13px; color: var(--color_secondary);
} .callout-large { display: grid; grid-template-columns: 5fr 4fr; align-items: center; gap: 2rem clamp(2rem, 8dvw, 7.6875rem);
}
.callout-large .img-wrap { overflow: hidden; border-radius: 20px 0 20px 0;
}
.callout-large img { width: 100%;
}
.callout-large .sub-header { margin-block-end: 1rem;
}
@media only screen and (max-width: 860px) { .callout-large { grid-template-columns: 1fr; }
} .callout-large-container + .callout-large-container .callout-large { grid-template-columns: 4fr 5fr;
}
@media only screen and (max-width: 860px) { .callout-large-container + .callout-large-container .callout-large { grid-template-columns: 1fr; } .callout-large-container + .callout-large-container .callout-large .img-wrap { order: -1; }
}
.callout-large-container + .callout-large-container .img-wrap { order: 2;
} .story-full-container .story-inner { display: flex; gap: clamp(2rem, 8cqi, 80px); align-items: center; max-width: 1100px; margin-inline: auto;
}
.story-full-container .story-inner img { border-radius: 50%; max-width: 440px;
}
@media only screen and (max-width: 1140px) { .story-full-container .story-inner img { max-width: clamp(200px, 38dvw, 440px); }
}
@media only screen and (max-width: 800px) { .story-full-container .story-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; text-align: center; } .story-full-container .story-inner img { margin-inline: auto; } .story-full-container .story-inner .story-buttons { justify-content: center; }
}
.story-full-container .story-buttons { display: flex; align-items: center; gap: 1rem;
}
.story-full-container .story-subheader { margin-block-end: 1.5rem; text-wrap: balance;
}
.story-full-container .story-subheader ~ p { max-width: 720px;
} .find-food-form { position: relative; margin-block: 4rem 2.375rem; padding-block: 3.375rem 4.0625rem; padding-inline: 60px; border-radius: 20px 0 20px 0; overflow: hidden; background-color: var(--color_primary);
}
.find-food-form .form-bg { position: absolute; inset: 0; background-image: url("/images/noise-bg.webp"), url(https://secondharvest.b-cdn.net/images/food-bg-large.webp); background-size: 200px, cover; mix-blend-mode: multiply;
}
.find-food-form h3 { text-align: left;
}
.find-food-form .fields-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
@media only screen and (max-width: 1080px) { .find-food-form .fields-row { grid-template-columns: 1fr 1fr; } .find-food-form .fields-row .button { grid-column: 1/-1; }
}
@media only screen and (max-width: 600px) { .find-food-form .fields-row { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 660px) { .find-food-form { margin-block-start: 2rem; padding-inline: 30px; }
} .page-card { padding-block: 3.4375rem; padding-inline: 70px; text-align: center; background-color: var(--color_dark); background-color: #1E1A1A; border-radius: 20px; transition: background-color var(--transition_speed) var(--transition_timing);
}
.page-card:hover, .page-card:focus-within { background-color: var(--color_dark);
}
.page-card:hover .page-card-heading, .page-card:focus-within .page-card-heading { text-decoration: underline;
}
.page-card.card-white { background-color: #FFF; color: var(--color_dark);
}
.page-card .page-card-heading { max-width: 182px; margin-inline: auto; margin-block-end: 1.25rem;
}
.page-card .page-card-heading:not(:has(+ p)) { margin-block-end: 0;
}
.page-card .page-card-img { margin-inline: auto; max-width: 180px; margin-block-end: 1.875rem; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover; object-position: center;
}
.page-card p { margin: 0;
}
@media only screen and (max-width: 600px) { .page-card p { font-size: var(--fs_s); }
}
.page-card > :last-child { margin-block-end: 0;
}
@media only screen and (max-width: 1080px) { .page-card { display: grid; grid-template-columns: 1fr; align-items: center; gap: 40px; padding-block: 2.5rem; text-align: left; } .page-card:has(img) { grid-template-columns: clamp(40px, 18dvw, 180px) 1fr; } .page-card .page-card-heading { margin-inline: 0; max-width: none; } .page-card .page-card-img { width: 100%; margin: 0; }
}
@media only screen and (max-width: 680px) { .page-card { gap: 20px; padding-inline: 40px; }
}
@media only screen and (max-width: 500px) { .page-card { padding-inline: 20px; }
} .bg-light { background-color: var(--color_light);
} .bg-dark { background-color: var(--color_dark);
} .bg-grain { background-image: url("/images/noise-bg.webp");
} .bg-food { background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("/images/food-bg-large.webp");
} .blend-multiply { mix-blend-mode: multiply;
} .inner-bg { position: absolute; inset: 0; z-index: -1; background-image: url("/images/noise-bg.webp"), url(https://secondharvest.b-cdn.net/images/food-bg-opacity-25.webp); background-size: 200px, cover; mix-blend-mode: multiply; pointer-events: none;
} .bg-light .inner-bg { background-image: url("/images/noise-bg.webp"), url(https://secondharvest.b-cdn.net/images/food-bg-opacity-8.webp); background-size: 200px, cover;
} .error-message { color: var(--color_error);
}
.error-message p { font-weight: bold;
} .embed-codes-overrides-wrapper.normalize-form-styles input, .embed-codes-overrides-wrapper.normalize-form-styles select, .embed-codes-overrides-wrapper.normalize-form-styles textarea, .embed-codes-overrides-wrapper.normalize-form-styles label { all: revert-layer;
}
.embed-codes-overrides-wrapper.normalize-form-styles input, .embed-codes-overrides-wrapper.normalize-form-styles select, .embed-codes-overrides-wrapper.normalize-form-styles textarea { width: 100%; font-size: 16px; font-family: var(--font_primary); border: 1px solid var(--border_color); background-color: #FFF; color: var(--color_text); border-radius: var(--input_border_radius);
}
.embed-codes-overrides-wrapper #dafdirectdiv { width: auto; max-width: 100%; padding: 2rem 20px;
}
.embed-codes-overrides-wrapper #dafdirectdiv #showwhatisthis { width: 100% !important;
}
.embed-codes-overrides-wrapper #dafdirectdiv #notwhatisthis br { display: none;
}
.embed-codes-overrides-wrapper #dafdirectdiv #notwhatisthis label { margin-bottom: 10px;
}
.embed-codes-overrides-wrapper #dafdirectdiv #notwhatisthis input, .embed-codes-overrides-wrapper #dafdirectdiv #notwhatisthis select, .embed-codes-overrides-wrapper #dafdirectdiv #notwhatisthis textarea { margin-bottom: 10px;
}
.embed-codes-overrides-wrapper #dafdirectdiv .dafdirectInputAmount { float: none; width: auto;
}