/* ========================================================================== HERO · THE WONDERWORLD FILM ========================================================================== Why this file was rewritten --------------------------- The previous version looked washed out, and the cause was measurable rather than a matter of taste: 1. A `.veil` element covered the left 64 % of the hero with cream at .985 / .975 / .86 opacity. The final frame of the film happens to keep all of its colour in the left 55 % — the papercraft blocks — and nothing but a bright empty wall on the right. So the veil erased exactly the colourful half and left the empty half on show. Measured on the final frame: left half saturation 38, right half 13. 2. `object-fit:contain` under `max-aspect-ratio:16/9` letterboxed the film with cream bands top and bottom. 3. `min-height:100svh` on the hero, plus `.hero`'s own `padding:calc(var(--nav-h) + 2.4rem) 0 clamp(3rem,7vw,6rem)`, plus `.hero-in`'s `padding:6rem 0 3rem`, stacked into the empty space above and below the picture. The veil is gone. There is no overlay, no opacity, no filter and no blend mode anywhere over the film — it plays at full strength. Readability is solved in the type instead: every word laid over the film is a papercraft letter with a cream halo and a cast shadow, the same visual language as the HELLO letters the film opens on. That reads over the colourful blocks and over the pale wall alike, so it survives whatever the crop does at any viewport size. The height is now the picture's own height — a wide band under the header — instead of a viewport-height box with a picture floating inside it. ========================================================================== */ .hero-auto{ /* One height, shared by the picture and by the heading laid over it. The heading is a sibling of the band rather than a child of it, so that on a phone it can simply leave the picture and stack underneath — a static child of an overflow-hidden band cannot, it just sits on top of the video and lands on Kelly. */ --band-h:clamp(430px, min(100vw / 1.9, 82svh), 840px); /* .hero's own generous padding is what left the blank band. The hero begins directly under the fixed header and ends at the bottom of the film. */ padding:var(--nav-h) 0 0; position:relative;z-index:2; background:var(--cream); isolation:isolate} /* ---- the band -------------------------------------------------------------- Height comes from the aspect ratio, so there is never a letterbox and never a gap: 1.9:1 on desktop, which is a touch wider than the film's 16:9 and trims a little off the top and bottom rather than adding cream to the sides. The clamp keeps it from becoming a slot on a very wide screen or a strip on a short one. */ .hero-auto .film-band{ position:relative; height:var(--band-h); overflow:hidden; background:var(--cream)} .hero-auto .film-wrap{position:absolute;inset:0;z-index:0} .hero-auto .film, .hero-auto .film-still{ position:absolute;inset:0;width:100%;height:100%; /* cover everywhere. The band's ratio is close enough to the film's that the trim only takes floor and sky, never HELLO, never the words, never the blocks. */ object-fit:cover;object-position:center 46%; display:block; /* no opacity, no filter, no mix-blend-mode. On purpose. */ transform:scale(1);transition:transform 2.6s var(--ease)} /* A breath of a push-in as the camera comes to rest. 4 % — enough to feel like the world settles, small enough to crop nothing. */ .hero-auto.finale .film, .hero-auto.finale .film-still{transform:scale(1.04)} /* The still holds the first frame until the film has genuinely painted, so there is no black flash and no jump. Both are the same picture. */ .hero-auto .film-still{z-index:1;opacity:1;transition:opacity .45s ease} .hero-auto.film-live .film-still{opacity:0} .hero-auto.film-static .film{display:none} .hero-auto.film-static .film-still{opacity:1} /* ========================================================================== PAPERCRAFT TYPE The one treatment every word over the film shares: a solid brand colour, a cream halo punched around it, and a cast shadow underneath. The halo is what makes it readable on a busy ground without touching the film. ========================================================================== */ .hero-auto .paper{ --halo:.055em; text-shadow: calc(var(--halo) * -1) 0 0 var(--cream), var(--halo) 0 0 var(--cream), 0 calc(var(--halo) * -1) 0 var(--cream), 0 var(--halo) 0 var(--cream), calc(var(--halo) * -.72) calc(var(--halo) * -.72) 0 var(--cream), calc(var(--halo) * .72) calc(var(--halo) * -.72) 0 var(--cream), calc(var(--halo) * -.72) calc(var(--halo) * .72) 0 var(--cream), calc(var(--halo) * .72) calc(var(--halo) * .72) 0 var(--cream), 0 .075em 0 rgba(51,40,74,.20), 0 .13em .26em rgba(51,40,74,.30)} /* Where paint-order is available the eight-way shadow trick is replaced by a genuine continuous stroke, which is cleaner at large sizes and does not thin out on diagonals. The cast shadow stays. */ @supports (paint-order: stroke) { .hero-auto .paper{ paint-order:stroke fill; -webkit-text-stroke:.088em var(--cream); text-shadow:0 .075em 0 rgba(51,40,74,.20), 0 .13em .26em rgba(51,40,74,.30)} .hero-auto .h-small{-webkit-text-stroke-width:.11em} } /* ========================================================================== PLAY · DREAM · LEARN Three English words the camera flies past while it crosses the world. They are objects standing in the scene, not captions: each one swells toward the lens on its own beat, tilted, off-centre, at its own depth, and is gone before the next arrives. No cards, no boxes, no borders. ========================================================================== */ .hero-auto .film-words{position:absolute;inset:0;z-index:2;pointer-events:none; overflow:hidden} .hero-auto .fw{ position:absolute;left:50%;top:50%; font-family:var(--display);font-weight:700; font-size:clamp(2.6rem,10.5vw,9rem);line-height:1;letter-spacing:-.035em; transform-origin:50% 50%;white-space:nowrap; opacity:0;will-change:transform,opacity} .hero-auto .fw-1{color:#FF3D86} .hero-auto .fw-2{color:#6544C4} .hero-auto .fw-3{color:#E06A00} /* ========================================================================== THE HEADING — in the picture Phase two. Nothing here is visible while the camera is still travelling. It sits over the left of the final composition, where the papercraft blocks are, and it is readable there because of the halo rather than because anything has been laid over the film. ========================================================================== */ .hero-auto .hero-over{ position:absolute;left:0;right:0;top:var(--nav-h);height:var(--band-h);z-index:3; display:flex;flex-direction:column;justify-content:center; text-align:left;pointer-events:none; /* PHASE GATE. The whole block stays off the screen until the camera has arrived. Hiding only the individual letters was not enough: "Welcome to" and the coloured word shapes were legible from the very first frame, over a cinematic that had not started travelling yet. */ opacity:0;visibility:hidden; transition:opacity .55s ease} .hero-auto.finale .hero-over{opacity:1;visibility:visible} .hero-auto .hero-over > *{max-width:min(33rem,46%);margin-left:0;margin-right:auto; position:relative} /* No gradient, no scrim, no veil. Nothing at all is laid over the film. The eyebrow is an opaque white pill already (site.css), and the heading carries its own outline, so neither needs a ground painted for it. */ .hero-auto .eyebrow{color:#A8104C} .hero-auto .hero-head{margin:.45rem 0 0;line-height:.94;letter-spacing:-.028em} .hero-auto .h-small{display:block;font-family:var(--display);font-weight:600; font-size:clamp(1.15rem,2.5vw,1.9rem);color:var(--ink); margin-bottom:.1em;letter-spacing:-.012em} .hero-auto .h-big{display:block;font-size:clamp(2.5rem,6.9vw,5.2rem);font-weight:700} .hero-auto .h-big em{font-style:normal;display:inline-block;margin-right:.2em} /* Pink, green and blue in one pastel family, at the owner's request: the same lightness and softness for all three, so no word shouts over the others. Pastel alone fades on a light ground, so each word stands on a cast edge in a deeper shade of its own colour, like a toy letter. That edge carries the legibility; the cream outline still separates it from the film. */ .hero-auto .h-big .w1{color:#F58AB3;--shade:#C8497F;transform:rotate(-1.6deg)} .hero-auto .h-big .w2{color:#7DD39C;--shade:#2F9A5B;transform:rotate(.9deg)} .hero-auto .h-big .w3{color:#86BDF4;--shade:#3A7EC6;transform:rotate(-.7deg)} .hero-auto .h-big em.paper{ text-shadow:0 .075em 0 var(--shade), 0 .13em .26em rgba(51,40,74,.28)} /* one span per letter, each landing on its own beat */ .hero-auto .h-big i{display:inline-block;font-style:normal;white-space:pre; /* keeps a space inside a word ("της Miss") from collapsing */ opacity:0;transform:translateY(.42em) scale(.84)} .hero-auto .h-big i.in{opacity:1;transform:none; transition:opacity .3s ease, transform .48s cubic-bezier(.28,1.5,.5,1)} /* ========================================================================== THE COPY — under the picture Everything that has to clear 4.5:1 lives here, on cream, where it gets it without the film being touched at all. ========================================================================== */ .hero-auto .hero-under{ padding:clamp(1.3rem,2.6vw,2rem) 0 clamp(1.5rem,3vw,2.4rem); opacity:0;transform:translateY(10px); transition:opacity .6s ease, transform .6s var(--ease)} .hero-auto.copy-in .hero-under{opacity:1;transform:none} .hero-auto .hero-under .lede{margin:0;max-width:44rem} .hero-auto .hero-under .row{margin-top:1.35rem;justify-content:flex-start} .hero-auto .hero-under .cue{margin-top:1.2rem;justify-content:flex-start;opacity:.72} /* ---- Kelly ---------------------------------------------------------------- She stands on the right, in front of the pale wall the final composition leaves clear for her, and rises in as the camera settles. */ .hero-auto .kelly-cut{position:absolute;right:4%;bottom:0;z-index:2; height:min(88%,780px); opacity:0;transform:translateY(6%); filter:drop-shadow(0 22px 34px rgba(51,40,74,.26)); pointer-events:none} .hero-auto .kelly-cut img{height:100%;width:auto;display:block} .hero-auto.kelly-in .kelly-cut{opacity:1;transform:none; transition:opacity .7s ease, transform .95s var(--ease)} @keyframes kelly-wave{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-1%) rotate(.5deg)}} .hero-auto.kelly-settled .kelly-cut img{animation:kelly-wave 5.5s ease-in-out infinite} /* ---- the tap-to-play fallback -------------------------------------------- Only ever appears if the browser refuses a muted autoplay. */ .hero-auto .film-start{position:absolute;right:1.1rem;bottom:1.1rem;z-index:5; width:54px;height:54px;border-radius:50%;border:0;cursor:pointer; background:var(--pink-btn,#E01860);color:#fff;font-size:1.1rem; display:grid;place-items:center; box-shadow:0 4px 0 rgba(168,16,73,.55), var(--shadow-soft)} .hero-auto .film-start[hidden]{display:none} /* ========================================================================== TABLET AND PHONE Below 900 px the copy stops sitting on the film and stacks underneath it. Two reasons: a portrait band would have to crop half the width away to cover, which is exactly what would cut HELLO in half; and text over a picture on a small screen is where readability goes to die. So the film keeps its own full frame and the words get clean cream underneath. ========================================================================== */ @media (max-width:900px){ .hero-auto{--band-h:min(64vw,58svh)} .hero-auto .film-band{min-height:210px} /* On a phone the heading comes out of the picture too and joins the copy on cream. A portrait band would have to crop half the width away to cover, which is exactly what would cut HELLO in half, and text over a picture on a small screen is where readability goes to die. */ .hero-auto .hero-over{position:static;height:auto;display:block; padding:1.5rem 0 0;text-align:center;pointer-events:auto; opacity:1;visibility:visible} .hero-auto .hero-over::before{display:none} .hero-auto .hero-over > *{max-width:38rem;margin-left:auto;margin-right:auto} /* on cream there is nothing to be read over, so the halo comes off and the type is simply itself */ .hero-auto .paper{text-shadow:0 .05em 0 rgba(51,40,74,.13)} .hero-auto .hero-under{padding-top:.9rem;text-align:center} .hero-auto .hero-under .lede{margin-inline:auto} .hero-auto .hero-under .row, .hero-auto .hero-under .cue{justify-content:center} .hero-auto .kelly-cut{right:2%;height:min(84%,420px)} .hero-auto .fw{font-size:clamp(2rem,11vw,4.4rem)} } @media (max-width:520px){ .hero-auto{--band-h:min(74vw,50svh)} .hero-auto .kelly-cut{height:min(80%,300px);right:1%} } /* ---- reduced motion ------------------------------------------------------- The owner asked for the film to play for everyone, and it does. What we can still honour is everything that never stops: the endless wave loop and the push-in are dropped, so the hero comes to a genuine standstill. */ @media (prefers-reduced-motion: reduce){ .hero-auto.kelly-settled .kelly-cut img{animation:none} .hero-auto .film, .hero-auto .film-still, .hero-auto.finale .film, .hero-auto.finale .film-still{transform:none;transition:none} }