/* ========================================================================== home.css — homepage hero Pairs with , which floats the masthead over this section and resolves it to solid on scroll. ========================================================================== */ .hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(460px, 70svh, 760px); padding-top: var(--header-h); /* Fallback tone in case the photo hasn't loaded — never a white flash */ background: var(--pine-deep); overflow: hidden; } /* ---- Media --------------------------------------------------------------- */ .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } /* With only the eyebrow on the image, the overlay's job changed. It no longer protects a paragraph — it just keeps the transparent header legible at the top and seats the eyebrow at the bottom. Everything between stays open so the photo carries the section. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to right, rgba(29, 42, 32, 0.38) 0%, rgba(29, 42, 32, 0.12) 45%, rgba(29, 42, 32, 0) 75% ), linear-gradient( to bottom, rgba(29, 42, 32, 0.58) 0%, rgba(29, 42, 32, 0.10) 24%, rgba(29, 42, 32, 0.08) 50%, rgba(29, 42, 32, 0.74) 100% ); } /* ---- Copy ---------------------------------------------------------------- */ .hero__inner { width: 100%; padding-block: var(--space-2xl) 0; } .hero__copy { max-width: 30ch; padding-bottom: var(--space-2xl); } .hero .eyebrow { color: var(--brass); margin-bottom: 0; letter-spacing: 0.18em; text-shadow: 0 1px 12px rgba(29, 42, 32, 0.6); } .hero__title { color: var(--paper); font-size: var(--step-5); font-weight: 800; } .hero__title em { font-style: normal; color: var(--sage-light); } .hero__lede { margin-top: var(--space-m); max-width: 46ch; color: rgba(242, 244, 239, 0.82); font-size: var(--step-1); line-height: 1.6; } .hero__actions { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: var(--space-s); } /* Ghost button needs inverting against the dark hero */ .hero__actions .btn--ghost { color: var(--paper); box-shadow: inset 0 0 0 2px rgba(242, 244, 239, 0.45); } .hero__actions .btn--ghost:hover { background: var(--paper); color: var(--pine); box-shadow: inset 0 0 0 2px var(--paper); } /* ---- Trust bar ----------------------------------------------------------- */ /* The peak marker returns here — same device as the active nav link. */ .hero__trust { border-top: 1px solid rgba(242, 244, 239, 0.20); padding-block: var(--space-m); display: grid; gap: var(--space-s) var(--space-l); grid-template-columns: 1fr; } @media (min-width: 640px) { .hero__trust { grid-template-columns: repeat(3, auto); justify-content: start; } } .hero__trust li { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-display); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.03em; color: rgba(242, 244, 239, 0.88); } .hero__trust li::before { content: ""; flex-shrink: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--brass); } /* ---- Entrance ------------------------------------------------------------ */ /* One quiet staggered reveal on load. Nothing else on the page animates. */ @media (prefers-reduced-motion: no-preference) { .hero__copy > *, .hero__trust { animation: hero-rise 700ms var(--ease) backwards; } .hero__copy > *:nth-child(1) { animation-delay: 60ms; } .hero__copy > *:nth-child(2) { animation-delay: 140ms; } .hero__copy > *:nth-child(3) { animation-delay: 220ms; } .hero__copy > *:nth-child(4) { animation-delay: 300ms; } .hero__trust { animation-delay: 400ms; } } @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }