/** * LOA Hero — UI-01 (desktop) + UI-02 (mobile, media block at end). * Same markup serves both; mobile is override-only. Consumes * tokens.css exclusively. Breakpoint matches header.css interim * 1024px (Tyler to confirm). */ .loa-hero { position: relative; display: flex; align-items: center; justify-content: center; height: var(--loa-hero-h); /* 1080px at 1920w */ background: var(--loa-ink); /* base while image loads / absent */ overflow: hidden; } /* Full-bleed background image (rendered only when an asset exists). * Eager + high priority: this is the LCP element — do NOT lazy-load. * Explicit positioning prevents layout shift (QA note). */ .loa-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Gradient overlay per spec: 0.6 black top → 0.2 black mid → ink bottom */ .loa-hero__scrim { position: absolute; inset: 0; background: linear-gradient( to bottom, var(--loa-hero-grad-top) 0%, var(--loa-hero-grad-mid) 50%, var(--loa-hero-grad-bottom) 100% ); } .loa-hero__content { position: relative; /* above bg + scrim */ max-width: var(--loa-hero-content-max); padding-inline: var(--loa-gutter); text-align: center; } /* Eyebrow: renders only when content.php provides a non-empty string. * Since v0.19.0 (Byrne 2026-09-26) it carries the search phrase and is * the page's H1 (see index.php), so every property an

would bring * is pinned here. Same face and weight as the hero CTAs (Inter Bold, * uppercase); size and tracking are the UI-01 spec's eyebrow values. * The tracking also trails the last letter, so an equal start padding * keeps the line optically centered. */ .loa-hero__eyebrow { margin: 0 0 24px; padding-inline-start: var(--loa-hero-eyebrow-tracking); font-family: var(--loa-font-body); font-size: var(--loa-hero-eyebrow-size); font-weight: 700; line-height: var(--loa-hero-eyebrow-lh); letter-spacing: var(--loa-hero-eyebrow-tracking); text-transform: uppercase; text-wrap: balance; color: var(--loa-gold); text-shadow: var(--loa-hero-body-shadow); /* same lift as the body copy; it sits over the rocks too */ } /* Headline: 96px/96px at 1920w per spec. DEVIATION (Byrne * 2026-07-17): copy "Recognize Performance." is ~1050px at 96px, * wider than the spec's 1024px container, and must render on ONE * line — so lines are nowrap and centered overflow bleeds slightly * past the container (never near viewport edge at 1920w). Clamp * scales the size down on narrower windows; 6.67vw reaches the 96px * cap at 1440w, 32px floor keeps interim sub-UI-02 mobile sane. * Breakpoint behavior TBD (Tyler). */ .loa-hero__headline { margin: 0; font-family: var(--loa-font-display); font-size: clamp(32px, 6.67vw, var(--loa-hero-headline-size)); font-weight: 500; /* line 1: Playfair Medium */ line-height: 1; /* spec: 96px at 96px size */ color: #fff; } .loa-hero__headline-line { display: block; white-space: nowrap; /* single line per Byrne 2026-07-17 */ } /* Line 2: "Playfair Display Italic" — doc omits weight; interim 500 * to match line 1, flag for Tyler. */ .loa-hero__headline-line--italic { font-style: italic; font-weight: 500; } .loa-hero__body { max-width: var(--loa-hero-body-max); margin: 24px auto 0; font-family: var(--loa-font-body); font-size: var(--loa-hero-body-size); font-weight: 300; /* Inter Light */ line-height: var(--loa-hero-body-lh); color: rgba(255, 255, 255, 0.8); /* Soft shadow so the light text holds up over the bright rocks in * the photo (Byrne 2026-09-26). Kept faint: a lift, not an outline. */ text-shadow: var(--loa-hero-body-shadow); } /* CTA row: 24px gap, centered, 24px above (spec) */ .loa-hero__ctas { display: flex; justify-content: center; gap: var(--loa-hero-btn-gap); padding-top: 24px; } .loa-hero__btn { display: inline-flex; align-items: center; justify-content: center; height: var(--loa-hero-btn-h); /* 64px */ padding-inline: var(--loa-hero-btn-pad-x); font-family: var(--loa-font-body); font-size: 12px; font-weight: 700; /* Inter Bold */ letter-spacing: var(--loa-hero-btn-tracking); text-transform: uppercase; text-decoration: none; box-sizing: border-box; transition: background var(--loa-speed) var(--loa-ease), color var(--loa-speed) var(--loa-ease), border-color var(--loa-speed) var(--loa-ease); } .loa-hero__btn--primary { background: var(--loa-gold); color: #000; } .loa-hero__btn--secondary { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); /* frosted glass per spec */ color: #fff; } /* Hover/active: TBD per doc (Lynette). Interim gold treatments, * consistent with header conventions. */ .loa-hero__btn--primary:hover, .loa-hero__btn--primary:focus-visible { background: #e0c04f; } .loa-hero__btn--secondary:hover, .loa-hero__btn--secondary:focus-visible { border-color: var(--loa-gold); color: var(--loa-gold); } .loa-hero__btn:focus-visible { outline: 2px solid var(--loa-gold); outline-offset: 4px; } /* ================================================================== * UI-02 — Mobile hero. Byrne decisions 2026-07-17: * - body copy omitted (not in mobile Figma frame); markup stays, * hidden here, so Crucible pushes still populate desktop * - headline stays single-line and scales below 48px to fit * - CTAs fixed 289px centered (tech notes win over QA "full-width") * ================================================================== */ @media (max-width: 1024px) { .loa-hero { /* Figma frame: 884px fixed. Doc targets 100svh in * implementation (Tyler to confirm); vh fallback for engines * without svh. QA: test iOS Safari dynamic viewport. */ height: auto; min-height: 100vh; min-height: 100svh; background: var(--loa-ink-mobile); /* #0f0d13 base per spec */ } /* Image begins 75px from top over the ink base and runs to the * section bottom (809px of the 884px frame; flexes with svh). */ .loa-hero__bg { top: var(--loa-hero-m-img-top); height: calc(100% - var(--loa-hero-m-img-top)); } /* Mobile gradient per spec: ink-tinted, 0.2 → 0.6 @50% → #0f0d13 */ .loa-hero__scrim { background: linear-gradient( to bottom, var(--loa-hero-m-grad-top) 0%, var(--loa-hero-m-grad-mid) 50%, var(--loa-hero-m-grad-bottom) 100% ); } .loa-hero__content { padding-inline: var(--loa-hero-m-gutter); /* 20px per spec */ } /* Spec: 48px/52px. DEVIATION (Byrne 2026-07-17): "Recognize * Performance." is ~500px at 48px and cannot fit 375w on one * line — lines stay nowrap (matching desktop) and 8.6vw scales * down: ~32px at 375w, 48px cap from ~558w up. Flag for * Tyler/Lynette. */ /* Mobile eyebrow: the full phrase cannot fit 335px at desktop * tracking, so it steps down and may wrap to two balanced lines. */ .loa-hero__eyebrow { margin-bottom: var(--loa-hero-m-eyebrow-gap); padding-inline-start: var(--loa-hero-m-eyebrow-tracking); font-size: var(--loa-hero-m-eyebrow-size); letter-spacing: var(--loa-hero-m-eyebrow-tracking); } .loa-hero__headline { font-size: clamp(28px, 8.6vw, var(--loa-hero-m-headline-size)); line-height: calc(52 / 48); /* spec ratio: 52px at 48px */ } /* Body copy omitted on mobile per Byrne 2026-07-17 (absent from * the mobile Figma frame). */ .loa-hero__body { display: none; } /* Stacked CTAs: 289px fixed, centered. Gap DEVIATION (Byrne * 2026-07-17): 16px per reference image; tech notes' 74px was a * Figma mis-measure. */ .loa-hero__ctas { flex-direction: column; align-items: center; gap: var(--loa-hero-m-btn-gap); } .loa-hero__btn { width: var(--loa-hero-m-btn-w); padding-inline: 0; /* fixed width supersedes padding */ } } /* The hero secondary CTA can be flagged 'modal' => true in inc/content.php, in which case index.php emits a