/* ===================== Intro splash ===================== A branded teaser film that gates the page behind an "Enter Website" button. Visibility is driven by html.has-intro, which a tiny inline script in sets before first paint. That ordering matters twice over: it avoids a flash of the homepage before the splash covers it, and it fails open — if JS is off or broken the class is never added, the splash stays display:none, and the site is still reachable. Layout is a flex column rather than a full-bleed background because the film is 16:9 and centre-composed: object-fit:cover would crop the wordmark off the sides on a phone. Letterboxing against the film's own cream keeps it intact, and giving the button its own band means it can never sit on top of the closing card's text. */ .intro { display: none; } html.has-intro .intro { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 10000; /* over the 9999 drawer overlay */ background: #f2ece0; /* sampled from the film */ opacity: 1; transition: opacity .55s ease; } html.has-intro body { overflow: hidden; } .intro.done { opacity: 0; pointer-events: none; } .intro-video { flex: 1 1 auto; min-height: 0; /* let it shrink inside the flex column */ width: 100%; object-fit: contain; display: block; background: #f2ece0; } .intro-actions { flex: 0 0 auto; display: flex; justify-content: center; padding: 16px 20px calc(28px + env(safe-area-inset-bottom, 0px)); } /* Revealed on a delay so the film gets a moment first — but on a timer short enough that nobody is stuck waiting out all ten seconds. Driven by CSS rather than JS so it still appears if scripting is sluggish. */ .intro-enter { font-size: 16px; padding: 14px 34px; letter-spacing: .3px; animation: introCta .5s ease .9s both; } @keyframes introCta { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html.has-intro .intro { transition: none; } .intro-enter { animation: none; opacity: 1; transform: none; } } /* Landing-page overrides — layered on top of the shared styles.css. The static build drops the two taxonomy-driven footer columns ("Invitations" / "Occasions"), so the 4-column footer grid needs to re-balance to the two columns that remain. */ .footer-grid { grid-template-columns: 1.6fr 1.3fr; } /* The detached corner logo overlaps the start of the nav. The full site hides part of "Home"/"Invitations" behind it; this page's nav is short enough that "Home" vanished completely, so start the menu clear of it. The logo is position:fixed, so its right edge stays ~145px from the viewport edge, while the nav starts at the container edge — which is 24px until the container hits its 1200px cap, then drifts right. Pad by exactly the shortfall, so wide screens get no needless gap. Only above 861px; below that .logo-corner is display:none. */ @media (min-width: 861px) { .nav-menu { padding-left: max(0px, calc(162px - 24px - (100vw - min(100vw, var(--container))) / 2)); } } @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }