/* ============================================================================ SANTA OLIVER — Elf Training Academy entrance film ---------------------------------------------------------------------------- Loaded ONLY by index.html and book.html. The stylesheet's presence on a page is the opt-in: reindeer-hunt.html deliberately omits it, because the hunt is reached FROM the Academy and replaying the intro on the way back would be a wall rather than a welcome. Paired with assets/js/np-intro.js, which builds the markup at runtime — so no page carries dead DOM for a film it may never show. ========================================================================== */ .np-intro { position: fixed; inset: 0; z-index: 9999; /* above .mmenu (200) and every sticky nav */ /* Not pure black. Against a warm gold film, black bars read as a broken player; this deep night-blue picks up the film's own sky and makes the letterboxing look like part of the frame. Matches north-pole.html's theme-color, so the arrival is continuous too. */ background: radial-gradient(120% 90% at 50% 45%, #10263f 0%, #0c1b2e 55%, #060d17 100%); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .45s ease; } .np-intro.in { opacity: 1; } .np-intro.out { opacity: 0; pointer-events: none; } /* The film is 16:9 and its title spans nearly the full frame width, so ANY horizontal crop eats the words — on a portrait phone `cover` cut it to "raining Acad". So: letterbox by default, and only fill when the viewport is at least as wide as the film. At exactly 16/9 contain and cover are identical, so the switch is seamless. Wider than that, `cover` trims a little off the top and bottom instead, where there is only background sparkle to lose. Do not "simplify" this back to a single object-fit. Losing the letterbox costs you the title on every phone in portrait. */ .np-intro video { width: 100%; height: 100%; object-fit: contain; display: block; } @media (min-aspect-ratio: 16/9) { .np-intro video { object-fit: cover; } } /* Deliberately understated but always reachable. A child who has seen it once should never feel trapped, and an adult skimming the site should not have to wait out a film to reach a booking page. */ .np-intro-skip { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 2; font-family: var(--body, system-ui, sans-serif); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: #f6efdf; background: rgba(0,0,0,0.42); border: 1px solid rgba(246,239,223,0.34); border-radius: 999px; padding: 11px 20px; min-height: 44px; /* tap target */ cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .2s, border-color .2s, color .2s; } .np-intro-skip:hover, .np-intro-skip:focus-visible { background: rgba(0,0,0,0.62); border-color: rgba(246,239,223,0.7); color: #fff; outline: none; } .np-intro-skip:focus-visible { box-shadow: 0 0 0 3px rgba(227,200,120,0.55); } /* ---- Arrival fade on north-pole.html ------------------------------------- The overlay fades out on the way here; this fades the Academy in, so the handover reads as one continuous transition instead of a cut. Triggered by a tiny inline script in north-pole.html's rather than a deferred file, because a deferred script can run after the browser has already painted — you would see the page at full opacity for a frame before it dropped to zero and faded back in. Written as an animation with `both`, NOT a class holding opacity: 0. If anything ever went wrong and the class were left on, an opacity-0 rule would leave the Academy permanently invisible. An animation always resolves to its final keyframe, so the worst case here is a fade that already finished. */ @keyframes np-arrive { from { opacity: 0; } to { opacity: 1; } } html.np-arriving body { animation: np-arrive .6s ease both; } @media (prefers-reduced-motion: reduce) { html.np-arriving body { animation: none; } } /* While the film is up, the page underneath must not scroll behind it. */ body.np-intro-open { overflow: hidden; touch-action: none; } @media (max-width: 620px) { .np-intro-skip { font-size: 13px; padding: 10px 17px; } } /* Anyone who has asked for reduced motion never reaches this stylesheet's behaviour — np-intro.js bails out before building the overlay — but if the preference is switched on mid-visit, kill the fade rather than animate it. */ @media (prefers-reduced-motion: reduce) { .np-intro { transition: none; } }