/* The film (js/film.js): the page scrolls like a page while the card travels with you. Three layers share one screen-sized frame: wall sticky at the back; the hex wall (js/wall.js) slides up slowly page the hero and the three chapters, scrolling normally card sticky at the front; the card and what's under it, moved by film.js film.js sets the variables used here. */ .film { position: relative; overflow-x: clip; } /* Wall: always on screen, behind the page. Its shade fades it to the page's black at the bottom, so it hands over cleanly to the Questions below. */ .film__wall { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; overflow: clip; isolation: isolate; background: var(--bg); } /* Card: always on screen, above the page, never in the way of the pointer. */ .film__rig { position: sticky; top: 0; z-index: 2; display: grid; align-items: center; height: 100vh; height: 100svh; margin-top: -100vh; margin-top: -100svh; padding: calc(var(--header-h) + 16px) 0 32px; pointer-events: none; } .rig { display: grid; grid-template-columns: minmax(0, 1fr); } /* Page: scrolls over the wall and under the card. */ .film__flow { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; } .film__grid { display: grid; grid-template-columns: minmax(0, 1fr); } .film__how, .film__block { position: relative; display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-content: start; } .film__block--hero { min-height: 100vh; min-height: 100svh; align-content: center; padding: calc(var(--header-h) + 16px) 0 64px; } .film__block--split { min-height: 90svh; padding-block: 16svh 64px; } .film__block--approve { min-height: 85svh; padding-block: 12svh 64px; } /* After the phone, only the room the card needs to land (film.js sets --tail); the receipts follow the page itself, so they don't need the film to run on. */ .film__block--tap { padding: 12svh 0 calc(6svh + var(--tail, 0px)); } .hero__copy { position: relative; z-index: 1; } .film__words { position: relative; z-index: 1; } .film__words .lead { max-width: 26em; } /* A chapter stays readable while its card action plays, then leaves with its own section. Normal document scrolling is never intercepted. */ .film:not(.film--still)[data-ready] :is(.film__block--split, .film__block--approve) { align-content: stretch; } .film:not(.film--still)[data-ready] :is(.film__block--split, .film__block--approve) .film__words { position: sticky; top: 36svh; align-self: start; } /* Where each approval lands as it scrolls up to the arrival line. */ .film__step { position: absolute; left: 0; width: 1px; height: 0; } .film__step:nth-of-type(1) { top: 30%; } .film__step:nth-of-type(2) { top: 42%; } .film__step:nth-of-type(3) { top: 54%; } .film__step:nth-of-type(4) { top: 66%; } /* ---- The card: four bands, each a full copy of the card cut at the share boundaries. The whole pose turns as one. ---- */ .film__visual { position: relative; } .film__card { position: relative; z-index: 4; width: min(100%, 540px); margin-inline: auto; perspective: 1600px; } .film__pose { position: relative; transform: rotateX(10deg) rotateY(-15deg) rotateZ(-2deg); transform-style: preserve-3d; will-change: transform; } .film__shadow { position: absolute; inset: 18% 10% 4%; border-radius: 8%; box-shadow: 0 40px 70px 14px rgb(0 0 0 / .9); transform: translateZ(-2px); } .film__band { position: absolute; inset: 0; clip-path: inset(0 var(--r) 0 var(--l)); backface-visibility: hidden; will-change: transform; } .film__band:first-of-type { position: relative; } /* The cut faces: bright edges where a band has come apart. */ .film__band::before, .film__band::after { content: ""; position: absolute; z-index: 3; top: 6.6%; bottom: 6.6%; width: 1.5px; opacity: var(--cut, 0); background: linear-gradient(180deg, rgb(255 255 255 / .2), #f6f6f3 30%, rgb(255 255 255 / .7) 70%, rgb(255 255 255 / .15)); pointer-events: none; } .film__band::before { left: var(--l); } .film__band::after { right: var(--r); } .film__band:first-of-type::before, .film__band:last-of-type::after { display: none; } /* The card's name would be sliced by the cuts, so it waits until the card is whole. */ .film__pose .mc-name { opacity: var(--whole, 1); } /* Under the card: the total; then the four shares, each under its band; then "All four approved". The total and the shares share one place. */ .film__under { display: grid; justify-items: center; margin-top: var(--s6); opacity: var(--docked, 1); } .film__caption { grid-area: 1 / 1; margin: 0; opacity: var(--total, 1); } .film__shares { grid-area: 1 / 1; display: grid; grid-template-columns: 400fr 320fr 320fr 240fr; gap: 8px; width: min(100%, 540px); opacity: var(--shares, 0); } .share { display: grid; justify-items: center; gap: 2px; } .share__top { display: flex; align-items: center; gap: 6px; color: var(--text-3); } .share__amt { font-weight: 500; } .share__tick { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--text); opacity: 0; transform: scale(.6); transition: opacity .2s var(--ease), transform .3s var(--ease); } .share__tick::after { content: ""; position: absolute; inset: 0; background: var(--bg); mask: var(--i-check) center / 70% no-repeat; } .share[data-state="approved"] .share__tick { opacity: 1; transform: none; } .film__status { grid-area: 2 / 1; margin-top: var(--s3); color: var(--text-2); opacity: var(--covered, 0); } /* ---- Chapter 3: the phone scrolls up and the card lands in it ---- */ .film__block--tap { grid-template-areas: "words phone" "proof phone"; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: calc(var(--gutter) + (100% - 11 * var(--gutter)) / 12); align-content: center; } .film__block--tap .film__words { grid-area: words; } .film__phone { grid-area: phone; align-self: center; position: relative; z-index: 1; } .film__proof { grid-area: proof; position: relative; z-index: 1; margin-top: var(--s5); } .film__phone .metal-card--mini { transition: opacity .25s var(--ease); } .film__phone[data-card="out"] .metal-card--mini { opacity: 0; transition: none; } .film__phone .phone__paid { transition: opacity .3s var(--ease); } .film__phone[data-state="idle"] .phone__paid { opacity: 0; transition-duration: .15s; } /* The receipts come in one by one, then the closing line. */ .film__proof [data-receipt] { transition: opacity .3s var(--ease), transform .4s var(--ease); } .film__proof [data-receipt][data-state="hidden"] { opacity: 0; transform: translateY(6px); } .closer { max-width: 24em; margin-top: var(--s4); } /* Wide screens: copy on the left, the card on the right. */ @media (min-width: 1024px) { .film__grid, .rig { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); } .hero__copy { grid-column: 1 / span 6; } .film__visual { grid-column: 7 / span 6; margin-left: -6%; } .film__words { grid-column: 1 / span 5; } .film__block--tap .film__words { grid-column: auto; } } /* ---- Phones and small tablets: the same film, stacked. The card starts under the hero copy, rises with the page and docks under the header; the chapters scroll through below it and fade out as they slide up under it (film.js sets --fade). ---- */ .film :is(.film__words, .film__proof > *) { opacity: var(--fade, 1); } .film__proof [data-receipt][data-state="hidden"] { opacity: 0; } @media (max-width: 1023px) { .film__rig { align-items: start; padding: calc(var(--header-h) + 6px) 0 0; } .film__visual { width: min(84vw, 380px, 46svh); margin: 0 auto; padding-top: 16px; } .film__card { width: 100%; } .film__under { margin-top: var(--s3); } .film__shares { gap: 6px; width: 100%; } .share__amt { font-size: 17px; } .film__status { margin-top: 10px; } .film__block--hero { align-content: start; min-height: max(100svh, var(--hero-end, 0px)); } .film__block--split { min-height: max(80svh, calc(var(--copy-top, 46svh) + 280px)); padding-block: 8svh 64px; } .film__block--approve { min-height: max(88svh, calc(var(--copy-top, 46svh) + 280px)); padding-block: 8svh 64px; } .film:not(.film--still)[data-ready] :is(.film__block--split, .film__block--approve) .film__words { top: var(--copy-top, 46svh); } /* Phones: the approvals start while the chapter's words are still below the card. */ .film__step:nth-of-type(1) { top: 12%; } .film__step:nth-of-type(2) { top: 24%; } .film__step:nth-of-type(3) { top: 36%; } .film__step:nth-of-type(4) { top: 48%; } .film__block--tap { grid-template-areas: "phone" "words" "proof"; grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); padding: 8svh 0 calc(8svh + var(--tail, 0px)); } .film__phone .phone { width: 220px; } .film__proof { margin-top: 0; } } /* Until film.js has placed it, the card on phones would sit over the hero copy. */ @media (max-width: 1023px) { .film:not([data-ready]) .film__rig { visibility: hidden; } } /* ---- Reduced motion (and no JavaScript, via the