/* ========================================================= hero-unified.css — v3 Identical hero height + homepage-style scale animations Usage: - - Wrap hero in

...

- Include this file LAST in ========================================================= */ /* Scope to migrated pages only */ body.hero-unified {} /* Unified hero: 1920×800 → 12:5 */ body.hero-unified .hero-uni { position: relative; width: 100%; aspect-ratio: 12 / 5; overflow: hidden; } /* Image fills hero */ body.hero-unified .hero-uni .main-image { position: absolute; inset: 0; margin: 0 !important; } body.hero-unified .hero-uni .main-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Overlay headings inside hero */ body.hero-unified .hero-uni .page-wide-title, body.hero-unified .hero-uni .page-wide-subtitle { position: absolute !important; left: 50%; /* IMPORTANT: start transform includes translateX + initial scale so the animation doesn't wipe out centering */ margin: 0 !important; width: 100%; text-align: center; color: #fff; text-shadow: 0 3px 4px #000; font-weight: 500; z-index: 1; } /* Positions + sizes (match your layout) */ body.hero-unified .hero-uni .page-wide-title { top: 22%; font-size: clamp(2rem, 6vw, 4rem); } body.hero-unified .hero-uni .page-wide-subtitle { top: 48%; font-size: clamp(1.5rem, 4.5vw, 3rem); } /* === HOMEPAGE-STYLE SCALE ANIMATIONS === Your homepage uses a scale-in. We replicate it, preserving translateX. */ body.hero-unified .hero-uni .page-wide-title { transform: translateX(-50%) scale(0.3); animation: heroScaleTitle 3s cubic-bezier(0.5, 1, 0.89, 1) forwards; } body.hero-unified .hero-uni .page-wide-subtitle { transform: translateX(-50%) scale(0.2); animation: heroScaleSub 5s cubic-bezier(0.5, 1, 0.89, 1) forwards; } @keyframes heroScaleTitle { to { transform: translateX(-50%) scale(1); } } @keyframes heroScaleSub { to { transform: translateX(-50%) scale(1); } } /* Small-screen nudge */ @media (max-width: 768px) { body.hero-unified .hero-uni .page-wide-title { top: 26%; } body.hero-unified .hero-uni .page-wide-subtitle { top: 56%; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { body.hero-unified .hero-uni .page-wide-title, body.hero-unified .hero-uni .page-wide-subtitle { animation: none !important; transform: translateX(-50%) scale(1); } } /* Optional: keep the book promo centered & consistent */ body.hero-unified .promo-image { float: none !important; width: 300px; margin: 30px auto 8px; left: auto; transform: none; } body.hero-unified .promo-image img { display: block; width: 100%; height: auto; }