.whp-coverflow { position: relative; padding: 42px 0 92px; overflow: hidden; background: transparent; color: #bac7cf; } .whp-coverflow::before, .whp-coverflow::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(110px); opacity: .12; pointer-events: none; } .whp-coverflow::before { left: -240px; top: 80px; background: #006c6e; } .whp-coverflow::after { right: -260px; bottom: 0; background: #fa8705; } .whp-coverflow .container { position: relative; z-index: 1; } @media(min-width:1200px) { .whp-home-conversion .container { width: calc(100% - 96px); max-width: 1600px !important; padding-right: 0; padding-left: 0; } } .whp-coverflow__header { max-width: 760px; margin: 0 auto 28px; text-align: center; } .whp-coverflow__header h2 { margin: 0 0 14px; color: #fff; font-size: clamp(32px, 4vw, 48px); line-height: 1.12; letter-spacing: -.025em; } .whp-coverflow__header p { margin: 0; font-size: 18px; line-height: 1.7; } .whp-coverflow__viewport { position: relative; height: clamp(390px, 46vw, 610px); perspective: 1500px; perspective-origin: 50% 46%; outline: none; } .whp-coverflow__viewport:focus-visible { outline: 2px solid #fa8705; outline-offset: 8px; border-radius: 18px; } .whp-coverflow__track { position: absolute; inset: 0; transform-style: flat; } .whp-coverflow__panel { position: absolute; left: 50%; top: 50%; width: clamp(410px, 48vw, 700px); padding: 0; overflow: hidden; border: 0px solid rgba(255,255,255,.13); border-radius: 15px; background: #101920; box-shadow: 0 25px 60px rgba(0,0,0,.34); pointer-events: none; transform-origin: center center; transition: transform .62s cubic-bezier(.22,.75,.2,1), opacity .45s ease, border-color .3s ease; will-change: transform, opacity; } .whp-coverflow__panel img { display: block; width: 100%; height: auto; pointer-events: none; } .whp-coverflow__panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: transparent; pointer-events: none; transition: background-color .45s ease; } .whp-coverflow__panel span { position: absolute; left: 13px; bottom: 12px; padding: 7px 10px; border: 0px solid rgba(255,255,255,.1); border-radius: 7px; background: rgba(12,23,32,.86); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .03em; backdrop-filter: blur(8px); } .whp-coverflow__panel[data-slot="0"] { z-index: 1; opacity: 1; transform: translate(-122%,-50%) rotateY(54deg) scale(.57); } .whp-coverflow__panel[data-slot="1"] { z-index: 2; opacity: 1; transform: translate(-88%,-50%) rotateY(39deg) scale(.76); } .whp-coverflow__panel[data-slot="2"] { z-index: 5; opacity: 1; transform: translate(-50%,-50%) rotateY(0) scale(1); ; box-shadow: 0 30px 80px rgba(0,0,0,.52), 0 0 0 1px rgba(250,135,5,.12); } .whp-coverflow__panel[data-slot="3"] { z-index: 2; opacity: 1; transform: translate(-12%,-50%) rotateY(-39deg) scale(.76); } .whp-coverflow__panel[data-slot="4"] { z-index: 1; opacity: 1; transform: translate(22%,-50%) rotateY(-54deg) scale(.57); } .whp-coverflow__panel[data-slot="0"]::after,.whp-coverflow__panel[data-slot="4"]::after { background: rgba(4,10,14,.3); } .whp-coverflow__panel[data-slot="1"]::after,.whp-coverflow__panel[data-slot="3"]::after { background: rgba(4,10,14,.16); } .whp-coverflow__expand { position: absolute; z-index: 7; left: calc(50% + clamp(205px, 24vw, 350px) - 9px); top: calc(50% - clamp(137px, 16.1vw, 235px) + 9px); display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(12,23,32,.46); color: #fff; cursor: pointer; opacity: .76; transform: translate(-100%,0); box-shadow: 0 6px 18px rgba(0,0,0,.2); transition: background .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease; } .whp-coverflow__expand:hover, .whp-coverflow__expand:focus-visible { background: rgba(250,135,5,.9); border-color: #fa8705; opacity: 1; transform: translate(-100%,-2px); } .whp-coverflow__footer { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: -8px; } .whp-coverflow__control { display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid #394a50; border-radius: 50%; background: #1a2834; color: #fff; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .whp-coverflow__control:hover,.whp-coverflow__control:focus-visible { background: #394a50; border-color: #fa8705; } .whp-coverflow__dots { display: flex; gap: 9px; } .whp-coverflow__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #52636e; cursor: pointer; transition: width .25s ease, background .25s ease; } .whp-coverflow__dot[aria-current="true"] { width: 28px; border-radius: 999px; background: #fa8705; } .whp-coverflow__hint { margin: 14px 0 0; color: #82939d; font-size: 13px; text-align: center; } .whp-coverflow-lightbox[hidden] { display: none; } .whp-coverflow-lightbox { position: fixed; z-index: 10050; inset: 0; display: grid; padding: 32px; place-items: center; background: rgba(4,10,14,.94); backdrop-filter: blur(12px); } .whp-coverflow-lightbox__figure { display: flex; width: auto; max-width: calc(100vw - 180px); margin: 0; flex-direction: column; align-items: center; } .whp-coverflow-lightbox__figure img { display: block; width: auto; max-width: min(calc(100vw - 180px),1226px); height: auto; max-height: calc(100vh - 112px); margin: 0 auto; border: 0; border-radius: 18px; object-fit: contain; aspect-ratio: auto; box-shadow: 0 32px 90px rgba(0,0,0,.62); } .whp-coverflow-lightbox__figure figcaption { margin-top: 12px; color: #dbe4e8; font-weight: 700; text-align: center; } .whp-coverflow-lightbox__close { position: fixed; z-index: 2; right: 24px; top: 24px; display: grid; width: 48px; height: 48px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: #1a2834; color: #fff; font-size: 20px; cursor: pointer; } .whp-coverflow-lightbox__close:hover,.whp-coverflow-lightbox__close:focus-visible { background: #fa8705; border-color: #fa8705; } .whp-coverflow-lightbox__nav { position: fixed; z-index: 2; top: 50%; display: grid; width: 52px; height: 52px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(26,40,52,.92); color: #fff; cursor: pointer; transform: translateY(-50%); } .whp-coverflow-lightbox__nav--prev { left: 24px; } .whp-coverflow-lightbox__nav--next { right: 24px; } .whp-coverflow-lightbox__nav:hover,.whp-coverflow-lightbox__nav:focus-visible { background: #fa8705; border-color: #fa8705; } @media(max-width:991px) { .whp-coverflow { padding: 28px 0 70px; } .whp-coverflow__viewport { height: clamp(340px, 56vw, 480px); } .whp-coverflow__panel { width: clamp(360px, 66vw, 610px); } .whp-coverflow__panel[data-slot="0"] { opacity: 0; pointer-events: none; transform: translate(-125%,-50%) rotateY(50deg) scale(.5); } .whp-coverflow__panel[data-slot="1"] { transform: translate(-92%,-50%) rotateY(38deg) scale(.69); } .whp-coverflow__panel[data-slot="3"] { transform: translate(-8%,-50%) rotateY(-38deg) scale(.69); } .whp-coverflow__panel[data-slot="4"] { opacity: 0; pointer-events: none; transform: translate(25%,-50%) rotateY(-50deg) scale(.5); } .whp-coverflow__expand { left: calc(50% + min(30vw, 280px) - 8px); top: calc(50% - min(20vw, 185px) + 8px); } } @media(max-width:575px) { .whp-coverflow__header { margin-bottom: 12px; } .whp-coverflow__header p { font-size: 16px; } .whp-coverflow__viewport { height: 330px; } .whp-coverflow__panel { width: 82vw; border-radius: 10px; } .whp-coverflow__panel[data-slot="1"] { opacity: 1; transform: translate(-104%,-50%) rotateY(34deg) scale(.67); } .whp-coverflow__panel[data-slot="3"] { opacity: 1; transform: translate(4%,-50%) rotateY(-34deg) scale(.67); } .whp-coverflow__panel span { display: none; } .whp-coverflow__expand { left: calc(91% - 10px); top: calc(50% - 25vw); width: 42px; height: 42px; } .whp-coverflow__hint { padding: 0 24px; } .whp-coverflow-lightbox { padding: 14px; } .whp-coverflow-lightbox__figure { max-width: calc(100vw - 28px); } .whp-coverflow-lightbox__figure img { max-width: calc(100vw - 28px); max-height: calc(100vh - 120px); } .whp-coverflow-lightbox__close { right: 12px; top: 12px; } .whp-coverflow-lightbox__nav { top: auto; bottom: 18px; width: 46px; height: 46px; transform: none; } .whp-coverflow-lightbox__nav--prev { left: calc(50% - 58px); } .whp-coverflow-lightbox__nav--next { right: calc(50% - 58px); } .whp-coverflow-lightbox__figure figcaption { padding-bottom: 64px; } } @media(prefers-reduced-motion:reduce) { .whp-coverflow__panel,.whp-coverflow__dot,.whp-coverflow__expand { transition-duration: .01ms; } }