:root {
color-scheme: light dark;
--connectz-ink: #111315;
--connectz-surface: #FFFFFF;
--connectz-radius-pill: 999px;
--cz-overlay-veil-base: #F7F5F0;
--cz-overlay-veil-color: #111315;
--cz-overlay-veil-alpha: 20%;
--cz-overlay-veil: color-mix(in srgb, var(--cz-overlay-veil-color) var(--cz-overlay-veil-alpha), transparent);
--cz-overlay-panel-shadow-left: inset -28px 0 32px -24px rgba(17, 19, 21, 0.55);
--cz-overlay-panel-shadow-right: inset 28px 0 32px -24px rgba(17, 19, 21, 0.55);
--cz-overlay-close-border: rgba(17, 19, 21, 0.16);
--cz-overlay-close-shadow: 0 8px 24px rgba(17, 19, 21, 0.18);
}
@media (prefers-color-scheme: dark) {
:root {
--cz-overlay-veil-base: #0B1120;
--cz-overlay-veil-color: #000000;
--cz-overlay-veil-alpha: 35%;
}
}
.cz-overlay-side,
.cz-overlay-close {
display: none;
}
@media (min-width: 1180px) {
html[data-cz-overlay="landingpage-modo-evento"] {
--cz-overlay-side: clamp(48px, calc((100vw - 1080px) / 2 - 72px), 200px);
}
html[data-cz-overlay="landingpage-geral"],
html[data-cz-overlay="landingpage-modo-jogo"],
html[data-cz-overlay="landingpage-modo-universidade"],
html[data-cz-overlay="landingpage-pre-cadastro"] {
--cz-overlay-side: clamp(39px, calc((100vw - 1120px) / 2), 240px);
--cz-panel-w: calc(100vw - 2 * var(--cz-overlay-side));
}
html[data-cz-overlay="landingpage-geral"] body,
html[data-cz-overlay="landingpage-modo-jogo"] body,
html[data-cz-overlay="landingpage-modo-universidade"] body,
html[data-cz-overlay="landingpage-pre-cadastro"] body {
margin-inline: var(--cz-overlay-side);
overflow-x: clip;
}
html[data-cz-overlay="landingpage-geral"] .cz-overlay-close,
html[data-cz-overlay="landingpage-modo-jogo"] .cz-overlay-close,
html[data-cz-overlay="landingpage-modo-universidade"] .cz-overlay-close,
html[data-cz-overlay="landingpage-pre-cadastro"] .cz-overlay-close {
left: calc(var(--cz-overlay-side) + 14px);
}
html[data-cz-overlay] .cz-overlay-side {
display: block;
position: fixed;
top: 0;
bottom: 0;
z-index: 60;
width: var(--cz-overlay-side);
overflow: hidden;
background-color: var(--cz-overlay-veil-base);
}
.cz-overlay-side::before {
content: "";
position: absolute;
inset: -48px;
background-image: url(/assets/home-1440x900-light.c97f3aa92d.webp);
background-size: auto calc(100% + 96px);
background-repeat: no-repeat;
filter: blur(22px) saturate(1.1);
transform: scale(1.04);
}
@media (prefers-color-scheme: dark) {
.cz-overlay-side::before {
background-image: url(/assets/home-1440x900-dark.c318068d80.webp);
}
}
.cz-overlay-side::after {
content: "";
position: absolute;
inset: 0;
background: var(--cz-overlay-veil);
}
.cz-overlay-side--left { left: 0; }
.cz-overlay-side--left::before { background-position: left center; }
.cz-overlay-side--left::after { box-shadow: var(--cz-overlay-panel-shadow-left); }
.cz-overlay-side--right { right: 0; }
.cz-overlay-side--right::before { background-position: right center; }
.cz-overlay-side--right::after { box-shadow: var(--cz-overlay-panel-shadow-right); }
html[data-cz-overlay="landingpage-modo-evento"] .cz-overlay-close {
left: calc(var(--cz-overlay-side) + 14px);
}
}
@media (max-width: 720px) {
html[data-cz-overlay="landingpage-pre-cadastro"] .cz-overlay-close {
display: grid;
place-items: center;
position: fixed;
z-index: 120;
left: 12px;
bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
width: 44px;
height: 44px;
border-radius: var(--connectz-radius-pill);
border: 1px solid var(--cz-overlay-close-border);
background: var(--connectz-surface);
color: var(--connectz-ink);
font: 700 26px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
text-decoration: none;
box-shadow: var(--cz-overlay-close-shadow);
}
}
@media (min-width: 721px) {
.cz-overlay-close {
display: grid;
place-items: center;
position: fixed;
z-index: 120;
left: 14px;
bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
width: 44px;
height: 44px;
border-radius: var(--connectz-radius-pill);
border: 1px solid var(--cz-overlay-close-border);
background: var(--connectz-surface);
color: var(--connectz-ink);
font: 700 26px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
text-decoration: none;
box-shadow: var(--cz-overlay-close-shadow);
}
.cz-overlay-close:focus-visible {
outline: 3px solid var(--connectz-ink);
outline-offset: 2px;
box-shadow:
0 0 0 2px var(--connectz-surface),
0 0 0 7px var(--connectz-surface);
}
}