/** * 42ostriches — Homepage page styles * Only layout/arrangement specific to index.html lives here. * Component rules (buttons, cards, etc.) stay in components.css. */ /* z-index: 0 here is load-bearing, not decorative — it forces .hero to establish its own stacking context. Without it, a plain `position: relative` element doesn't contain z-index children at all: .hero__media's z-index: -1 (below) would paint behind whatever ancestor happens to sit between .hero and — invisible on this flat prototype, but a real bug once embedded inside WordPress/ Elementor's much deeper wrapper-div structure, where that ancestor usually has its own opaque background. */ .hero { position: relative; z-index: 0; min-height: 88svh; display: flex; align-items: flex-end; color: var(--color-paper-000); overflow: hidden; } /* Mobile: shorter hero so the next section is reachable with less scrolling */ @media (max-width: 640px) { .hero { min-height: 62svh; } } .hero__media { position: absolute; inset: 0; z-index: -1; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(13, 13, 13, 0.15) 0%, rgba(13, 13, 13, 0.45) 55%, rgba(13, 13, 13, 0.86) 100% ); } .hero__inner { padding-block: var(--space-9) var(--space-8); max-width: min(94%, 62rem); } @media (max-width: 640px) { .hero__inner { padding-block: var(--space-6) var(--space-6); } .hero__actions { margin-top: var(--space-5); gap: var(--space-3); } .hero__actions .btn { flex: 1 1 auto; } } .hero__eyebrow { color: var(--color-paper-000); opacity: 0.9; } .hero__eyebrow::before { background: var(--color-paper-000); } .hero h1 { margin-bottom: var(--space-5); font-size: clamp(2.85rem, 5.2vw, 4.35rem); line-height: 0.95; } .hero h1 em { /* Was a muted red that blended into the dark photo — plain white reads cleanly against the hero overlay at every crop/zoom level. */ font-style: normal; color: inherit; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); } .included-strip { padding-top: var(--space-7); /* Tighter bottom edge — this section sits directly above "Upcoming events" and the previous default (clamp-based --section-pad-y) left an oversized gap between the two. Fixed value keeps the gap identical on mobile and desktop. */ padding-bottom: var(--space-5); } .included-strip .section-head { margin-bottom: var(--space-6); } .events-section { /* Mirrors .included-strip's tightened bottom padding above, so the combined whitespace between the two sections stays modest and consistent at every breakpoint instead of relying on the viewport-scaled --section-pad-y clamp(). */ padding-top: var(--space-5); } .events-section .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); max-width: none; } /* Event card tags (location / date / nights): plain minimalistic frame, no perforated "race bib" circle notches on the sides. Scoped to .event-card__tags only — the base .bib-tag component elsewhere keeps its signature look. */ .event-card__tags .bib-tag { padding: var(--space-1) var(--space-3); } .event-card__tags .bib-tag::before, .event-card__tags .bib-tag::after { content: none; } .sponsors-section { padding-block: var(--space-6); } .sponsors-section .section-head { margin-bottom: var(--space-6); } .vision-callout { margin-top: var(--space-6); display: inline-flex; } .faq-intro { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-7); } .faq-intro a { font-weight: 700; color: var(--color-red-600); }