/* ===================================================================== VIZYPAY · HERO + WHO WE'RE FOR — CSS pane COMPLETE PANE. Select all in the CSS pane, delete, paste this. WHAT CHANGED FROM WHAT IS LIVE RIGHT NOW 1. every `var(--vzwf-vh, 100dvh)` stage-height rule is GONE. That custom property was written from JS on scroll and resize events, so the pinned stage was being resized mid-scroll — which is what made the panels grow, the content below jump, and a white band lag in under the video. My fault, and it is removed at the root rather than overridden. 2. the stage is now sized ONCE on mobile, in `lvh`, a constant. 3. the press rail is lifted by the exact toolbar height rather than a guess, so it is visible whether the toolbar is showing or not. 4. the track is shorter (265vh -> 205vh, 240vh -> 185vh) with a wider sweep window in the JS, so the sweep reads at the same speed but the dead scrolling after it is gone. PAIRS WITH the JS pane shipped alongside this. The two must go in together: this file no longer reads --vzwf-vh, and that file no longer writes it. ===================================================================== */ /* ====================================================================== THE DISPLAY FACES ARE LOADED HERE, NOT BY A The module's HTML pane carried a to Google Fonts, and HubSpot does not reliably keep a inside module markup. When it is dropped, font-family silently falls back to Montserrat — the rule still applies, the face just is not there, which looks exactly like "the cool fonts disappeared". An @import in the stylesheet survives, and it has to be the FIRST thing in the file, before any rule. ====================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Bungee&family=Lilita+One&family=Permanent+Marker&family=Shrikhand&display=swap'); /* ==================================================================== ONE SWEEP, FOUR BUSINESSES — v8 -------------------------------------------------------------------- THE HAIRLINE IS FIXED, AND IT WAS A GEOMETRY BUG, NOT A ROUNDING ONE. The white sheet's edge is a DIAGONAL. Every panel was clipped with inset(), whose edge is a VERTICAL LINE — sampled at that panel's middle height. So above the middle the panel's edge sat to the right of the sheet's edge and a sliver of the card leaked onto the video; below it, the reverse. On a tall card that sliver is a hairline, and it moves as you scroll, which is exactly what you were seeing. Every clipped element now uses the SAME polygon as the sheet, solved in its own coordinates, so the two edges are the same line. Also: mobile rebuilt and re-evaluated on resize, more wall, more nodes (including a constellation between them), and the numbers are no longer a footnote. ==================================================================== */ *{box-sizing:border-box} :root{--vz-green:#81b338;--vz-green-dk:#6e9830;--vz-green-tx:#557625; --vz-ink:#191414;--vz-bright:#9acb4e} /* the figures are real now, so they carry no placeholder marker */ .vzwf-real{border-bottom:0} /* ---------------- the ride ---------------- */ /* ================================================================== THE SWEEP IS SLOWED THE ONLY HONEST WAY: MORE SCROLL A scroll-driven animation runs at whatever speed the scroll runs, so the only way to make it last longer is to give it more distance. Holding it back instead was what made it look skipped. THE TRACK LENGTH IS SET AT THE BOTTOM OF THIS FILE, not here — see "1. THE TRACK, WITHOUT THE DEAD TAIL". This value is the module's original and is left in place so the file still reads in order. ================================================================== */ .vzwf{position:relative;height:265vh;background:#fff} /* ================================================================== THE STAGE PINS BELOW THE HEADER, NOT BEHIND IT There was never any need for a strip, and both of my answers to it were wrong. The stage was one viewport minus the header, but pinned to the very TOP — so its bottom edge stopped short of the fold and left a band to explain away. Pin it to the header's height instead. Then the stage occupies exactly the space you can see, top edge under the header and bottom edge on the fold, which puts the rail flush at the bottom of the frame AND on the first screen with nothing left over at either end. One number does both jobs: the height it is missing is the distance it is pushed down. ================================================================== */ .vzwf{background:#fff} .vzwf__stage{position:sticky;top:var(--vzwf-top,0px); height:calc(100vh - var(--vzwf-top,0px)); overflow:hidden;background:#000} /* dvh on DESKTOP, where it is identical to vh and never changes. Mobile is handled at the bottom of this file with lvh, which is the same number every frame — see "2. A STAGE THAT IS SIZED ONCE". */ @supports (height:100dvh){ .vzwf__stage{height:calc(100dvh - var(--vzwf-top,0px))} } /* ================================================================== HIDING SAFARI'S OWN PLAY BUTTON When iOS decides a video is user-controlled it draws its own start button over it — a shadow-DOM control that belongs to the browser, not to us, so nothing in the markup or the script can remove it. This pseudo-element is the one documented way to reach it. The clip still starts on the first touch, and the retry loop still catches it the moment the browser relents, but the page no longer looks like a broken video player while it waits. ================================================================== */ /* Scoped to the ELEMENT, not to our class. A vendor pseudo-element hangs off the shadow root of the