/* homepage-layout-revision.css Overrides for the homepage redesign: slimmer mission accordion with a working bottom collapse control, and a horizontal swipe gallery for the programs section (moved directly under the mission accordion). Loaded last in , after homepage-mission.css and homepage-hub.css, so these rules take the cascade without needing !important. */ /* ---------- Mission accordion: slim card, not a full-bleed band ---------- */ .mission-story{ background:#f0eee8; } .mission-disclosure{ background:none; border-radius:0; overflow:visible; box-shadow:none; } .mission-collapse{ display:inline-flex; align-items:center; gap:8px; margin-top:24px; padding:10px 16px; border:1px solid var(--border); border-radius:20px; background:#f0eee8; color:#243747; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; box-shadow:var(--small); } .mission-collapse:hover{background:#e7e2d5} .mission-collapse:focus-visible{outline:3px solid #957141;outline-offset:3px} /* ---------- Programs: blunt heading, horizontal swipe gallery ---------- */ .project-section{ padding:26px 0 44px; border-block:1px solid #d7d1c580; background:#eae7df66; scroll-margin-top:100px; } #programs .section-heading{margin-bottom:16px} #programs .project-grid{ display:flex; flex-wrap:nowrap; grid-template-columns:unset; gap:18px; overflow-x:auto; overflow-y:visible; padding:10px 4px 16px; margin:0 -4px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#c7bfae transparent; } #programs .project-grid::-webkit-scrollbar{height:8px} #programs .project-grid::-webkit-scrollbar-thumb{background:#c7bfae;border-radius:20px} #programs .project-grid::-webkit-scrollbar-track{background:transparent} #programs .project-card{ flex:0 0 260px; width:260px; scroll-snap-align:start; } #programs .project-image{aspect-ratio:1.3} .project-swipe-hint{display:none;align-items:center;gap:6px;font-size:12px;font-weight:650;letter-spacing:.04em;color:#8b713b;margin:0 0 10px} .project-swipe-hint svg{width:14px;height:14px;animation:project-swipe-nudge 1.6s ease-in-out infinite} @keyframes project-swipe-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}} @media(prefers-reduced-motion:reduce){.project-swipe-hint svg{animation:none}} @media(max-width:850px){ #programs .project-card{flex-basis:220px;width:220px} } @media(max-width:600px){ .project-section{padding:20px 0 32px} #programs .project-card{flex-basis:82%;width:82%} #programs .project-copy h3{font-size:16px} .project-swipe-hint{display:flex} } /* ---------- Featured conversation: crossfading photo pair ---------- */ /* Replaces the section's single with two stacked photos that */ /* continuously crossfade, so the on-location shot and the video-call */ /* mosaic take turns without any JS. .feature-photo-fade takes over the */ /* sizing the theme's own ".featured-conversation>img" rule used to set. */ .featured-conversation>.feature-photo-fade{ position:relative; width:100%; height:350px; overflow:hidden; background:#f0eee8; } .feature-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:feature-photo-crossfade 8s cubic-bezier(.22,.61,.36,1) infinite; } .feature-photo-2{ animation-delay:-4s; /* The video-call mosaic is a full, uncropped graphic (transparent PNG) — */ /* letterbox it instead of cropping, so the whole monitor stays in frame. */ object-fit:contain; padding:18px 26px; box-sizing:border-box; } @keyframes feature-photo-crossfade{ 0%{opacity:1} 45%{opacity:1} 50%{opacity:0} 95%{opacity:0} 100%{opacity:1} } @media(max-width:600px){ .featured-conversation>.feature-photo-fade{height:240px} } @media(prefers-reduced-motion:reduce){ .feature-photo{animation:none;opacity:0} .feature-photo-1{opacity:1} } /* ---------- Our Programs: heading copy sits alone (2/3 width, one-line ---------- */ /* headline), and the scroll arrows now flank the slider itself. */ #programs .section-heading{display:block} .section-heading-copy{max-width:68%} .section-heading-copy h2{font-size:clamp(25px,2.3vw,34px);line-height:1.16;letter-spacing:-.03em} .section-heading-copy>p:not(.eyebrow){font-size:14px;line-height:1.65;color:#6d7476;margin:14px 0 0;max-width:560px} @media(max-width:850px){ .section-heading-copy{max-width:100%} } .project-grid-wrap{position:relative} .project-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:40px; height:40px; padding:0; border-radius:50%; border:1px solid #d7d1c5; background:#f0eee8; box-shadow:3px 3px 7px #d3cdbf,-3px -3px 7px #fff; color:#243747; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; } .project-arrow svg{width:16px;height:16px} .project-arrow:hover{box-shadow:inset 2px 2px 5px #d3cdbf,inset -2px -2px 5px #fff} .project-arrow:active{transform:translateY(calc(-50% + 1px))} .project-arrow:focus-visible{outline:2px solid #957141;outline-offset:2px} .project-arrow-prev{left:-14px} .project-arrow-next{right:-14px} @media(max-width:850px){ .project-arrow{width:34px;height:34px;top:131px} .project-arrow svg{width:14px;height:14px} .project-arrow-prev{left:-8px} .project-arrow-next{right:-8px} } @media(max-width:600px){ .project-arrow{width:30px;height:30px;top:119px} .project-arrow svg{width:13px;height:13px} .project-arrow-prev{left:-4px} .project-arrow-next{right:-4px} } /* ---------- Blog index ("What the work teaches"): drop the side copy, ---------- */ /* tighten the gap under the featured-conversation section above it. */ .collection-section{ padding-top:26px; } @keyframes hero-link-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .hero-new-here{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:26px;padding:18px 28px;border-radius:20px;background:#f0eee8;border:1px solid #d7d1c5;box-shadow:var(--raise);text-decoration:none;animation:hero-link-arrive .8s .2s both,hero-link-pulse 2.8s cubic-bezier(.22,.61,.36,1) 1.6s 2;transition:box-shadow .15s cubic-bezier(.22,.61,.36,1),transform .15s cubic-bezier(.22,.61,.36,1)} .hero-new-here:hover,.hero-new-here:focus-visible{box-shadow:var(--inset)} .hero-new-here:active{box-shadow:var(--inset);transform:translateY(1px)} .hero-new-here-lead{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#806238} .hero-new-here-cta{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.01em;text-transform:uppercase;color:#233d50;line-height:1.1} .hero-new-here-cta span{margin-left:6px} @keyframes hero-link-pulse{0%,100%{box-shadow:var(--raise)}50%{box-shadow:6px 6px 14px #d3cdbf,-6px -6px 14px #fff,0 0 0 4px #a6886233}} @media(max-width:850px){.hero-new-here{padding:15px 22px;margin-top:20px}.hero-new-here-cta{font-size:22px}} @media(prefers-reduced-motion:reduce){.hero-new-here{animation:none}} /* Three-step homepage narrative markers ("Step 1/2/3") share one badge style: */ /* dark blue surface, gold lettering, consistent across the featured-conversation, */ /* programs, and collection section headers. */ .eyebrow.step-eyebrow{display:inline-flex;align-items:center;background:#152b3b;color:#fff;padding:8px 18px;border-radius:999px;font-size:11px;letter-spacing:.2em;box-shadow:var(--raise)} @media print{.eyebrow.step-eyebrow{box-shadow:none;border:1px solid #152b3b}} /* Step 3 (Collection section) header: a section label sits above the */ /* headline — bigger than the pill eyebrow above it, but plain text (no */ /* uppercase/letter-spacing), so it reads as a lead-in line, not a tag. */ /* The tagline now follows directly under the headline itself. */ .collection-kicker{font-size:clamp(19px,2.1vw,24px);font-weight:700;color:#a68862;line-height:1.3;margin:14px 0 6px} .collection-tagline{font-size:19px;line-height:1.5;margin:12px 0 0} /* Steps 1 & 2's lead-in sentence under the headline must read at the same */ /* size as Step 3's tagline above -- this audience skews older and the */ /* smaller sizes those paragraph classes default to elsewhere on the page */ /* (14-16px) were inconsistent and too small. Scoped to the step shells so */ /* nothing else reusing .feature-copy/.section-heading-copy is affected. */ .step-shell-1 .feature-copy>p:not(.eyebrow), .step-shell-2 .section-heading-copy>p:not(.eyebrow){font-size:19px;line-height:1.5} /* Homepage-only: this is most visitors' first look at the site, so give the */ /* wordmark real weight in the header instead of the sitewide compact size. */ body.hub-page .site-header.mega-header{height:104px} body.hub-page .site-header.mega-header .brand img{width:260px} @media(max-width:650px){ body.hub-page .site-header.mega-header{height:80px} body.hub-page .site-header.mega-header .brand img{width:190px} } /* Homepage-only: lighthouse mark sits ahead of the wordmark, in the corner */ /* of the header. .brand img.brand-mark (not just .brand img) keeps this */ /* one class heavier than the generic ".brand img" rule above, so it wins */ /* outright on specificity -- no !important needed. */ body.hub-page .site-header.mega-header .brand{display:inline-flex;align-items:center;gap:14px} body.hub-page .site-header.mega-header .brand img.brand-mark{width:56px;height:auto;flex:none} @media(max-width:650px){ body.hub-page .site-header.mega-header .brand{gap:10px} body.hub-page .site-header.mega-header .brand img.brand-mark{width:38px} } /* Homepage-only: Donate and the Explore-the-site toggle read bigger here, */ /* matching the approved header mockup. The toggle's font-size overrides */ /* the sitewide !important rule, so it needs !important too; the padding */ /* has no !important upstream, so the extra class specificity is enough. */ body.hub-page .site-header.mega-header .mega-donate-link{font-size:19px} body.hub-page .site-header.mega-header .mega-toggle{font-size:18px!important;padding:16px 22px} @media(max-width:650px){ body.hub-page .site-header.mega-header .mega-donate-link{font-size:14px} body.hub-page .site-header.mega-header .mega-toggle{font-size:14px!important;padding:12px} }