/** * The Feels Offerings — 4-card grid section. * * Renders a responsive card grid with image background, optional hover * overlay, centered white title + description, full-viewport-width section. * * Breakpoints: * - >= 1024px : 4 columns * - 640-1023 : 2 columns * - < 640 : 1 column * * Layered images: base image + optional hover overlay that fades in. */ /* * Section spans the full width of its container. The homepage template * (templates/home-page.php) emits sections directly into with no * constraining wrapper, so 100% naturally fills the viewport without * needing a 100vw breakout (which would cause horizontal scrollbars on * browsers where 100vw includes the vertical scrollbar width). */ .our-offerings-section { width: 100%; max-width: 100%; background-color: #fff; padding: 0 0 41px; box-sizing: border-box; overflow-x: hidden; } .our-offerings-section__heading { font-family: "PP Editorial New", sans-serif; font-size: clamp(36px, 6vw, 65px); font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; text-align: center; color: #1e1e1e; margin: 0 0 48px; padding: 0 20px; } .our-offerings-section__heading span { font-style: italic; } .our-offerings-section__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; } .our-offerings-section__card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 22vw; max-height: 320px; min-height: 220px; padding: 20px; overflow: hidden; text-decoration: none; color: #fff; box-sizing: border-box; } .our-offerings-section__media { position: absolute; inset: 0; z-index: 0; } .our-offerings-section__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .our-offerings-section__image--hover { opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } /* * Hover trigger scoped to the card itself, NOT to `a.card` — the card * element may render as either (when a link URL is set) or
* (when no link is set). The hover effect should fire in both cases. */ .our-offerings-section__card:hover .our-offerings-section__image--hover, .our-offerings-section__card:focus-visible .our-offerings-section__image--hover { opacity: 0.88; } .our-offerings-section__text { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; } /* * Subtle text-shadow on both title + description so white text stays legible * over varying photo backgrounds (some cards have light/highlighted areas * that wash out plain white text). Two layered shadows: * - tight inner shadow for crisp edge definition * - wider soft glow for a darkening halo on lighter backgrounds */ .our-offerings-section__title { margin: 0; font-family: "PP Editorial New", sans-serif; font-size: clamp(22px, 2vw, 28px); font-weight: 400; line-height: 1.14; letter-spacing: -0.02em; text-align: center; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.25); } .our-offerings-section__description { margin: 0; font-family: "Neue Haas Grotesk Display Pro", sans-serif; font-size: 18px; font-weight: 500; line-height: 24px; text-align: center; color: #fff; max-width: 220px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 0, 0, 0.25); } /* Tablet: 2 columns */ @media (max-width: 1023px) { .our-offerings-section__grid { grid-template-columns: repeat(2, 1fr); } .our-offerings-section__card { height: 45vw; max-height: 360px; } } /* Mobile: 1 column */ @media (max-width: 639px) { .our-offerings-section__grid { grid-template-columns: 1fr; } .our-offerings-section__card { height: 80vw; max-height: 420px; } /* * Bump title + description sizes on mobile. The desktop clamp() floor * keeps the title at 22px and description at 18px even on mobile, which * is too small against the larger card image area at 80vw tall. * Stronger text-shadow on mobile too — photo subjects fill more of the * frame on a 1-up grid, so contrast hotspots are more variable. */ .our-offerings-section__title { font-size: 36px; line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.35); } .our-offerings-section__description { font-size: 20px; line-height: 26px; max-width: 320px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.35); } }