/* ========================================================================== EventGo Australia — Homepage · 1 · Hero -------------------------------------------------------------------------- One photograph, one headline, two actions. The "wow" is the art direction — a crowd facing a stage lit in the brand's own violet and teal, shot so its left half falls into darkness — and the TYPESETTING, not an effect stack. No video, no parallax, no pin. The image names no genre: EventGo Australia is for every kind of event (docs/HANDOFF.md 0g). THE HEADLINE IS SET, NOT JUST SIZED (Figma 10 · Hero — final): · a staircase — each promise starts a step further in, so the three lines read as a movement (discover → book → go) and the block has an asymmetric edge against the stage instead of a flush-left slab · a scale change — "Experience more." is the payoff and is 1.18x the two actions above it; the gradient is on that line only · the step is in em, so it scales with the type at every width Phones keep the staircase at a smaller step and set every line the same size, so each promise still holds one line at 320px. The photograph is decorative (alt="") and its left ~45% is the text-safe field it was generated for (see Figma 07 · Homepage Media). The scrim is LOAD-BEARING: it guarantees the headline's contrast whatever the frame is. It is black-with-alpha, a neutral density filter, which is the one colour the base layer allows outside the tokens. Phones get their OWN crop (hero-tall-*, 4:5, on the crowd and stage) as a band above the words — never the desktop frame squeezed behind them. ========================================================================== */ .eg-c-hh { position: relative; isolation: isolate; display: grid; align-items: center; /* Short of a full screen on purpose: the search bar that overlaps the hero's lower edge has to be IN the first view, so discovery starts before the first scroll. */ min-height: calc(100vh - 5rem); min-height: calc(100svh - 5rem); padding: calc(var(--hdr-h) + 2rem) var(--c-gut) clamp(6rem, 12vh, 8rem); overflow: hidden; } .eg-c-hh__media { position: absolute; inset: 0; z-index: -1; } .eg-c-hh__media picture, .eg-c-hh__media img { display: block; width: 100%; height: 100%; } .eg-c-hh__media img { object-fit: cover; object-position: 66% 40%; } .eg-c-hh__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* The fade into the page is the TOP layer, so the hero ends in exactly the page's ink across its whole width; drawn under the side scrim it ended darker than the page on the left and left a visible seam. The side scrim holds density to ~62% so the payoff line, which reaches over the lit crowd on wide screens, keeps its contrast. */ background: linear-gradient(180deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / 0) 20%, rgb(0 0 0 / 0) 66%, var(--c-ink) 100%), linear-gradient(90deg, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .68) 38%, rgb(0 0 0 / .42) 62%, rgb(0 0 0 / .08) 84%, rgb(0 0 0 / 0) 100%); } .eg-c-hh__in { width: 100%; max-width: 1320px; margin-inline: auto; display: grid; gap: 1.5rem; justify-items: start; } .eg-c-hh .eg-c-hh__tag { font-size: .875rem; } /* ---- The headline ------------------------------------------------------- */ .eg-c-hh__h { --step: .6em; font-size: var(--t-hero); line-height: .92; letter-spacing: -.035em; margin-block: .25rem .5rem; } /* Each line is a mask for the entrance. The inner span is what moves; the bottom padding keeps descenders out of the mask's clip. */ .eg-c-hh__line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; } .eg-c-hh__line > span { display: inline-block; } .eg-c-hh__line:nth-child(2) { padding-inline-start: var(--step); } /* The payoff. Its own font-size changes what an em is, so the step is divided back out to land exactly two steps in. */ .eg-c-hh__line--pay { font-size: 1.18em; letter-spacing: -.04em; padding-inline-start: calc(var(--step) * 2 / 1.18); } .eg-c-hh__lead { max-inline-size: 34rem; color: var(--c-text-2); } .eg-c-hh__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; } /* ---- Entrance pre-hide ---------------------------------------------------- Only when the head script has said motion is allowed (html.eg-c-js), so reduced motion and no-JS both see the final hero. eg-boot removes the class as a safety net if this section's script never runs. */ html.eg-c-js .eg-c-hh__line > span { transform: translateY(112%); } html.eg-c-js [data-hh-fade] { opacity: 0; } /* ---- Phones: the photograph becomes a band ABOVE the words --------------- A 4:5 crop, full bleed, falling into the ink so the headline starts on a calm ground rather than over the brightest part of the stage. */ @media (max-width: 699.98px) { .eg-c-hh { display: block; min-height: 0; padding: 0 var(--c-gut) 6.5rem; } .eg-c-hh__media { position: relative; inset: auto; z-index: -1; margin-inline: calc(var(--c-gut) * -1); height: 62vh; height: 62svh; min-height: 21rem; max-height: 32rem; } .eg-c-hh__media img { object-position: 50% 35%; } .eg-c-hh__media::after { background: linear-gradient(180deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / 0) 24%, rgb(0 0 0 / 0) 46%, var(--c-ink) 97%); } .eg-c-hh__in { margin-top: -8.5rem; gap: 1.125rem; } /* Every line one size and a shallower step: measured, "Experience more." two steps in fits 280px of text column at 320px wide. */ .eg-c-hh__h { --step: .35em; font-size: clamp(2rem, 10.2vw, 2.875rem); } .eg-c-hh__line--pay { font-size: 1em; padding-inline-start: calc(var(--step) * 2); } .eg-c-hh__actions { width: 100%; } .eg-c-hh__actions .eg-c-btn { flex: 1 1 100%; } } /* ========================================================================== CINEMATIC THRESHOLD (branch eventgo-v3-homepage-cinematic-build) -------------------------------------------------------------------------- POSTER FIRST → PAGE USABLE → MOTION ENHANCEMENT LOADS → WORLD WAKES. The