.text--zzoomm-signal {
color: #f5e20d !important;
}
.bg--zzoomm-signal {
background-color: #f5e20d;
}
.border--zzoomm-signal {
border-color: #f5e20d !important;
}
.stroke--zzoomm-signal {
stroke: #f5e20d !important;
}
.highlight-zzoomm-signal span {
color: #f5e20d !important;
}
.text--zzoomm-boost {
color: #e68a5c !important;
}
.bg--zzoomm-boost {
background-color: #e68a5c;
}
.border--zzoomm-boost {
border-color: #e68a5c !important;
}
.stroke--zzoomm-boost {
stroke: #e68a5c !important;
}
.highlight-zzoomm-boost span {
color: #e68a5c !important;
}
.text--zzoomm-ping {
color: #ed0074 !important;
}
.bg--zzoomm-ping {
background-color: #ed0074;
}
.border--zzoomm-ping {
border-color: #ed0074 !important;
}
.stroke--zzoomm-ping {
stroke: #ed0074 !important;
}
.highlight-zzoomm-ping span {
color: #ed0074 !important;
}
.text--zzoomm-nightmode {
color: #7353be !important;
}
.bg--zzoomm-nightmode {
background-color: #7353be;
}
.border--zzoomm-nightmode {
border-color: #7353be !important;
}
.stroke--zzoomm-nightmode {
stroke: #7353be !important;
}
.highlight-zzoomm-nightmode span {
color: #7353be !important;
}
.text--zzoomm-stream {
color: #00abbd !important;
}
.bg--zzoomm-stream {
background-color: #00abbd;
}
.border--zzoomm-stream {
border-color: #00abbd !important;
}
.stroke--zzoomm-stream {
stroke: #00abbd !important;
}
.highlight-zzoomm-stream span {
color: #00abbd !important;
}
.text--zzoomm-connect {
color: #6cc265 !important;
}
.bg--zzoomm-connect {
background-color: #6cc265;
}
.border--zzoomm-connect {
border-color: #6cc265 !important;
}
.stroke--zzoomm-connect {
stroke: #6cc265 !important;
}
.highlight-zzoomm-connect span {
color: #6cc265 !important;
} .zz26 {
font-family: Inter, Sans-serif !important;
color: #000;
}
.zz26-anim-cards {
display: flex;
align-items: center;
height: 100vh;
max-width: 1280px;
margin: 0 auto;
padding-top: 148px;
}
.zz26-anim-cards__sections {
width: 100%;
display: flex;
align-content: flex-start;
justify-content: space-between;
gap: 50px;
}
.zz26-anim-cards__primary {
flex: 1;
}
.zz26-anim-cards__secondary {
width: 48%;
padding-bottom: calc(var(--t) * 30px);
}
.zz26-anim-cards__contents {
display: grid;
}
.zz26-anim-cards__contents .zz26-anim-card {
grid-area: 1/1;
}
.zz26-anim-cards__images {
position: relative;
width: 100%;
padding-top: 75%;
}
@media only screen and (max-width: 800px) {
.zz26-anim-cards {
padding-top: 80px;
}
}
.zz26-anim-card {
max-width: 510px;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.zz26-anim-card.active {
opacity: 1;
pointer-events: all;
}
.zz26-anim-card__headline {
font-size: 60px;
font-weight: 800;
line-height: 110%;
}
.zz26-anim-card__content {
font-size: 16px;
line-height: 125%;
}
.zz26-anim-card .zz26-button {
margin-top: 36px;
}
@media only screen and (max-width: 800px) {
.zz26-anim-card .zz26-button {
margin-top: 24px;
}
}
.zz26-anim-image {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
transform: scale(calc(1 - var(--i) * 0.05)) translateY(calc((1 - var(--i)) * 32px));
z-index: calc(100 - var(--i));
transition: transform 0.25s ease;
}
.zz26-anim-image::after, .zz26-anim-image img, .zz26-anim-image__inner {
position: absolute;
border-radius: 24px !important;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.zz26-anim-image__inner {
z-index: 100;
}
.zz26-anim-image__inner > span {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
font-size: 82px;
color: red;
z-index: 7000;
}
.zz26-anim-image__inner::after {
content: "";
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 24px !important;
z-index: 0;
}
.zz26-anim-image img {
z-index: 100;
opacity: calc(1 - var(--i) * 0.25);
height: 100% !important;
object-fit: cover;
object-position: 50% 50%;
}
@media only screen and (max-width: 800px) {
.zz26-anim-cards {
height: 100vh;
}
.zz26-anim-cards__sections {
flex-direction: column-reverse;
justify-content: center;
gap: 0;
height: 100%;
padding-top: 50px;
}
.zz26-anim-cards__primary, .zz26-anim-cards__secondary {
width: 100%;
}
.zz26-anim-cards__primary {
flex: 1;
}
.zz26-anim-cards__secondary {
flex: 1;
position: relative;
padding-bottom: 40px;
display: none;
}
.zz26-anim-cards__images {
padding-top: 0;
max-height: 590px;
height: 100%;
}
.zz26-anim-card {
max-width: 100%;
}
.zz26-anim-card__headline {
font-size: 48px;
}
}
.zz26-button, a.zz26-button {
display: inline-flex;
justify-content: center;
align-items: center;
height: 44px;
font-size: 16px;
line-height: 125%;
color: #fff !important;
padding: 0 24px;
border-radius: 1000px;
font-weight: 700;
transition: all 0.2s ease;
}
.zz26-button:hover, a.zz26-button:hover {
transform: scale(1.1);
}