/* ========================================================================== market-hero-home.css Restyles the country/market .ed-hero into the homepage's centered, monumental hero composition. Pure presentation layer — no markup, copy, H1 or /SEO changes. Loaded AFTER market-modern.css so it overrides. Scoped to .market-page so it only affects country landing pages. ========================================================================== */ .market-page .ed-hero { min-height: 90svh; padding: 128px 0 72px; } /* Single centered column instead of the left-copy / right-art split */ .market-page .ed-hero-inner { display: block; width: min(calc(100% - 48px), 1000px); margin-inline: auto; text-align: center; } .market-page .ed-hero-copy { max-width: 900px; margin-inline: auto; text-align: center; } /* Kicker: centered, no leading rule (matches homepage "01 / WHAT WE DO") */ .market-page .ed-eyebrow { justify-content: center; margin-bottom: 22px; } .market-page .ed-eyebrow::before { display: none; } /* Monumental centered headline */ .market-page .ed-h1 { max-width: 16ch; margin-inline: auto; font-size: clamp(3.1rem, 5.6vw, 5.2rem); line-height: .95; } .market-page .ed-lede { max-width: 54ch; margin: 22px auto 0; font-size: clamp(1rem, 1.3vw, 1.1rem); } /* Centre the actions, trust line and guarantees */ .market-page .ed-cta-row { justify-content: center; margin-top: 32px; } .market-page .hero-trust { text-align: center; } .market-page .ed-guarantees { justify-content: center; } /* Artifact drops below the copy, centred like the homepage object */ .market-page .ed-hero-art { min-height: 0; margin: 34px auto 0; perspective: 1400px; } .market-page .ed-hero-art::before { width: min(52vw, 470px); } .market-page .ed-hero-art::after { width: min(42vw, 380px); } .market-page .ed-paper-stack { width: min(62vw, 292px); } /* Scroll cue, echoing the homepage's ".asm-cue" */ .market-page .ed-hero-inner::after { content: "Scroll"; display: block; width: fit-content; margin: 30px auto 0; padding-bottom: 6px; color: var(--ap-muted); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; background: linear-gradient(var(--ap-muted), transparent) center bottom / 1px 26px no-repeat; } /* ---- Entrance choreography (staggered, homepage-style) ---- */ @keyframes mhhRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes mhhArt { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } } .market-page .ed-hero-copy > [data-hero], .market-page .ed-hero-art { opacity: 0; animation: mhhRise .9s cubic-bezier(.22, 1, .36, 1) forwards; } .market-page .ed-hero-copy > [data-hero="1"] { animation-delay: .05s; } .market-page .ed-hero-copy > [data-hero="2"] { animation-delay: .16s; } .market-page .ed-hero-copy > [data-hero="3"] { animation-delay: .28s; } .market-page .ed-hero-copy > [data-hero="4"] { animation-delay: .40s; } .market-page .ed-hero-copy > .hero-trust { animation-delay: .50s; } .market-page .ed-hero-copy > [data-hero="6"] { animation-delay: .58s; } .market-page .ed-hero-art { animation-name: mhhArt; animation-duration: 1.1s; animation-delay: .34s; } @media (max-width: 800px) { .market-page .ed-hero { padding: 120px 0 72px; } .market-page .ed-h1 { font-size: clamp(3rem, 12vw, 4.6rem); } .market-page .ed-paper-stack { width: min(78vw, 300px); } } @media (prefers-reduced-motion: reduce) { .market-page .ed-hero-copy > [data-hero], .market-page .ed-hero-art { opacity: 1; animation: none; } .market-page .ed-hero-inner::after { background: none; } }