HeroOverview.css

.hero-overview{width:100vw;position:relative;height:800vh}.hero-overview__overlay{background:#000;height:100%;left:0;opacity:.6;position:absolute;right:0;top:0;width:100%;z-index:1}.hero-overview__pin{position:relative;height:100%;-webkit-mask-image:linear-gradient(180deg, transparent 50vw, black 50vw),url("/static/images/svg-mask-semicircle.svg");mask-image:linear-gradient(180deg, transparent 50vw, black 50vw),url("/static/images/svg-mask-semicircle.svg");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}.hero-overview__slider{position:absolute;top:0;left:0;width:100vw;height:100vh}.hero-overview__slides{visibility:hidden}.hero-overview__canvas{position:absolute;width:100%;height:100%;left:0;top:0;pointer-events:none}.hero-overview__skip{position:fixed;bottom:0;left:50%;transform:translate(-50%)}.hero-overview__ui{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-between;align-items:center;z-index:2}.hero-overview__ui button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:0;background:none}.hero-overview__ui__gutter{flex:15%;display:flex;align-items:center;justify-content:center;z-index:2}.hero-overview__ui__button{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.hero-overview__ui__button svg{fill:#fff}@media(max-width: 599px){.hero-overview__ui__button{display:none}}.hero-overview__content{display:flex;flex-direction:column;width:100%;height:100%}@media(max-width: 599px){.hero-overview__content{padding:0 24px}}.hero-overview__content__upper{flex:0 0 55%;position:relative;z-index:3}.hero-overview__content__lower{flex:1;display:flex;flex-direction:column;justify-content:space-between;z-index:3}.hero-overview__content__swipe{margin-bottom:80px}@media(min-width: 600px){.hero-overview__content__swipe{display:none}}.hero-overview__content__swipe-text{color:#dadce0;font-size:14px;text-align:center}.hero-overview__title{--annotation: Heading 1;font-family:"Google Sans",Arial,Helvetica,sans-serif;font-size:72px;letter-spacing:-2px;line-height:68px;color:#202124;font-weight:500;width:100%;color:#fff;position:absolute;bottom:0;left:50%;transform:translateX(-50%);text-align:center}@media(max-width: 599px){.hero-overview__title{font-size:42px;letter-spacing:0;line-height:36px}}@media(max-width: 1080px){.hero-overview__title{--annotation: Heading 2;font-family:"Google Sans",Arial,Helvetica,sans-serif;font-size:56px;letter-spacing:-1px;line-height:56px;color:#202124;font-weight:400;line-height:1.4;color:#fff}}@media(max-width: 1080px)and (max-width: 1080px){.hero-overview__title{font-size:42px;letter-spacing:0;line-height:56px}}@media(max-width: 1080px)and (max-width: 599px){.hero-overview__title{font-size:24px;letter-spacing:0;line-height:32px}}@media(max-width: 599px){.hero-overview__title{--annotation: Heading 3;font-family:"Google Sans",Arial,Helvetica,sans-serif;font-size:36px;letter-spacing:0;line-height:48px;color:#3c4043;font-weight:400;color:#fff}}@media(max-width: 599px)and (max-width: 1080px){.hero-overview__title{font-size:32px;letter-spacing:0;line-height:46px}}@media(max-width: 599px)and (max-width: 599px){.hero-overview__title{font-size:22px;letter-spacing:0;line-height:28px}}.hero-overview__title__line{display:block}.hero-overview__title__line--outer{overflow:hidden;line-height:1.15;transform:translateY(-1em)}.hero-overview__title__line--inner{opacity:0%;transform:translateY(-1em)}@keyframes title-anim-outer-in{from{transform:translateY(1em)}to{transform:translateY(0%)}}@keyframes title-anim-outer-out{from{transform:translateY(0%)}to{transform:translateY(-1em)}}@keyframes title-anim-inner-in{from{transform:translateY(0.5em);opacity:0}to{transform:translateY(0%);opacity:1}}@keyframes title-anim-inner-out{from{transform:translateY(0%);opacity:1}to{transform:translateY(-1em);opacity:0}}.hero-overview__title.transition-in .hero-overview__title__line--outer{animation-fill-mode:both !important;animation:title-anim-outer-in 1s cubic-bezier(0, 0, 0, 1)}.hero-overview__title.transition-in .hero-overview__title__line--outer:nth-child(1n){animation-delay:0s}.hero-overview__title.transition-in .hero-overview__title__line--outer:nth-child(1n) .hero-overview__title__line--inner{animation-delay:0s}.hero-overview__title.transition-in .hero-overview__title__line--outer:nth-child(2n){animation-delay:0.1s}.hero-overview__title.transition-in .hero-overview__title__line--outer:nth-child(2n) .hero-overview__title__line--inner{animation-delay:0.1s}.hero-overview__title.transition-in .hero-overview__title__line--outer:nth-child(3n){animation-delay:0.2s}.hero-overview__title.transition-in .hero-overview__title__line--outer:nth-child(3n) .hero-overview__title__line--inner{animation-delay:0.2s}.hero-overview__title.transition-in .hero-overview__title__line--outer .hero-overview__title__line--inner{animation-fill-mode:both !important;animation:title-anim-inner-in 1s cubic-bezier(0, 0, 0, 1)}.hero-overview__title.transition-out .hero-overview__title__line--outer{transform:translateY(0%);animation-fill-mode:forwards !important;animation:title-anim-outer-out 1s cubic-bezier(1, 0, 0.5, 1)}.hero-overview__title.transition-out .hero-overview__title__line--outer:nth-child(1n){animation-delay:0s}.hero-overview__title.transition-out .hero-overview__title__line--outer:nth-child(1n) .hero-overview__title__line--inner{animation-delay:0s}.hero-overview__title.transition-out .hero-overview__title__line--outer:nth-child(2n){animation-delay:0.05s}.hero-overview__title.transition-out .hero-overview__title__line--outer:nth-child(2n) .hero-overview__title__line--inner{animation-delay:0.05s}.hero-overview__title.transition-out .hero-overview__title__line--outer:nth-child(3n){animation-delay:0.1s}.hero-overview__title.transition-out .hero-overview__title__line--outer:nth-child(3n) .hero-overview__title__line--inner{animation-delay:0.1s}.hero-overview__title.transition-out .hero-overview__title__line--outer .hero-overview__title__line--inner{transform:translateY(0%);opacity:1;animation-fill-mode:forwards !important;animation:title-anim-inner-out 1s cubic-bezier(1, 0, 0.5, 1)}.hero-overview__navigation-bars{width:580px;max-width:100%;display:flex;gap:20px;margin:auto;margin-top:80px}.hero-overview__navigation-bar{flex:1;height:40px;display:flex;align-items:flex-start}.hero-overview__navigation-bar__bar{position:relative;width:100%;height:2px;background:rgba(255,255,255,.3)}.hero-overview__navigation-bar__bar__inner{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;transform:scaleX(0%);transform-origin:0 0}.hero-overview .hero-overview-video{position:absolute;width:100%;height:100%;left:0;top:0;transition:opacity .5s linear;opacity:0}.hero-overview .hero-overview-video.active{opacity:1}.hero-overview .hero-overview-video video{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.hero-overview__collage{background:#fff;z-index:-1;display:flex;justify-content:center;align-tracks:flex-start;padding:0 24px;position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}.hero-overview__collage__content{position:relative;width:640px;max-width:100%;display:flex;flex-direction:column;justify-content:center}.hero-overview__collage h3{font-family:Google Sans;font-size:56px;font-weight:400;line-height:1.14;letter-spacing:-0.01em;margin-top:.85em;margin-bottom:.42em}@media(max-height: 850px){.hero-overview__collage h3{font-size:46px}}@media(max-width: 599px){.hero-overview__collage h3{font-size:32px}}@media(max-height: 850px){.hero-overview__collage p{font-size:16px}}@media(max-width: 599px){.hero-overview__collage p{font-size:14px}}.hero-overview__collage .footer-image{position:absolute}.hero-overview__collage .footer-image img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.hero-overview__collage .top-content{position:relative;margin-left:auto;margin-right:auto;max-width:calc(100vw - 128px);width:100%}@media(max-width: 599px){.hero-overview__collage .top-content:after{content:"";display:block;height:0;width:100%;margin-bottom:25%}}.hero-overview__collage .image-ref{position:relative;width:100%;margin:auto;max-width:628px;height:0;padding-top:56.25%}.hero-overview__collage .top-content video,.hero-overview__collage .top-content img{border-radius:16px;-o-object-fit:cover;object-fit:cover}.hero-overview__collage .bottom-content{text-align:center}.hero-overview__collage #footer-center{width:100%;height:auto;position:relative;border-radius:16px}.hero-overview__collage #footer-image1{left:0;top:calc(50% - 25px);transform:translate(calc(-100% - 25px), -100%);width:400px}.hero-overview__collage #footer-image1:before{content:"";display:block;width:100%;padding-top:50%}@media(max-width: 599px){.hero-overview__collage #footer-image1{width:75%;left:initial;top:initial;right:100%;bottom:100%;transform:translate(25%, 50%)}}.hero-overview__collage #footer-image2{right:0;top:calc(50% - 25px);transform:translate(calc(100% + 105px), -100%);width:200px}.hero-overview__collage #footer-image2:before{content:"";display:block;width:100%;padding-top:100%}@media(max-width: 599px){.hero-overview__collage #footer-image2{width:50%;right:initial;top:initial;left:100%;bottom:100%;transform:translate(-50%, 50%)}}.hero-overview__collage #footer-image3{left:0;bottom:calc(50% - 25px);transform:translate(calc(-100% - 105px), 100%);width:200px}.hero-overview__collage #footer-image3:before{content:"";display:block;width:100%;padding-top:100%}@media(max-width: 599px){.hero-overview__collage #footer-image3{width:50%;left:initial;bottom:initial;right:100%;top:100%;transform:translate(50%, -50%)}}.hero-overview__collage #footer-image4{right:0;bottom:calc(50% - 25px);transform:translate(calc(100% + 25px), 100%);width:400px}.hero-overview__collage #footer-image4:before{content:"";display:block;width:100%;padding-top:50%}@media(max-width: 599px){.hero-overview__collage #footer-image4{width:75%;right:initial;bottom:initial;top:100%;left:100%;transform:translate(-25%, -50%)}}.hero-overview__collage-scroll-anchor{position:absolute;bottom:0;width:100vw;height:100vh;left:0}