.cwb-wave-background {
--cwb-bg: #010c15;
--cwb-dark: 1, 128, 140;
--cwb-light: 0, 204, 234;
position: relative;
width: 100%;
min-height: var(--cwb-height, 100vh);
overflow: hidden;
background:
radial-gradient(circle at 92% 62%, rgba(var(--cwb-light), 0.13), transparent 28%),
radial-gradient(circle at 6% 70%, rgba(var(--cwb-light), 0.11), transparent 30%),
radial-gradient(circle at 78% 66%, rgba(var(--cwb-light), 0.13), transparent 34%),
radial-gradient(circle at 28% 66%, rgba(var(--cwb-dark), 0.17), transparent 42%),
radial-gradient(circle at 52% 18%, rgba(var(--cwb-light), 0.07), transparent 32%),
var(--cwb-bg);
}
.cwb-wave-background,
.cwb-wave-background * {
box-sizing: border-box;
}
.cwb-wave-canvas {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
opacity: var(--cwb-dark-opacity, 0.72);
filter: blur(var(--cwb-dark-blur, 0));
}
.cwb-wave-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent 9%, transparent 91%, rgba(0, 0, 0, 0.12)),
linear-gradient(180deg, rgba(0, 0, 0, 0.52), transparent 22%, transparent 80%, rgba(0, 0, 0, 0.46)),
radial-gradient(circle at 50% 56%, transparent 58%, rgba(0, 0, 0, 0.24) 100%);
mix-blend-mode: multiply;
opacity: var(--cwb-dark-opacity, 0.72);
}
.cwb-wave-content {
position: relative;
z-index: 1;
}
body.cwb-sitewide-wave-active {
background: #010c15 !important;
}
html.light-mode body.cwb-sitewide-wave-active {
background: #ffffff !important;
}
html.light-mode .cwb-wave-background {
--cwb-bg: #ffffff;
}
html.light-mode .cwb-wave-vignette {
opacity: calc(var(--cwb-light-opacity, 0.42) * 0.2);
mix-blend-mode: multiply;
}
html.light-mode .cwb-wave-canvas {
opacity: var(--cwb-light-opacity, 0.42);
filter: blur(var(--cwb-light-blur, 0));
}
body.cwb-sitewide-wave-active #Wrapper,
body.cwb-sitewide-wave-active #Content,
body.cwb-sitewide-wave-active .sections_group,
body.cwb-sitewide-wave-active .section,
body.cwb-sitewide-wave-active .section_wrapper,
body.cwb-sitewide-wave-active .wrap {
background-color: transparent !important;
}
body.cwb-sitewide-wave-active #Content,
body.cwb-sitewide-wave-active .sections_group {
position: relative;
z-index: 1;
}
.cwb-wave-background--sitewide {
position: fixed;
inset: 0;
z-index: 0;
width: 100vw;
min-height: var(--cwb-height, 100vh);
pointer-events: none;
}
.cwb-wave-background--sitewide .cwb-wave-canvas {
pointer-events: none;
}
@media (max-width: 700px) {
.cwb-wave-background {
min-height: var(--cwb-height, 100vh);
background:
radial-gradient(circle at 84% 30%, rgba(var(--cwb-light), 0.12), transparent 34%),
radial-gradient(circle at 8% 62%, rgba(var(--cwb-light), 0.13), transparent 34%),
radial-gradient(circle at 58% 74%, rgba(var(--cwb-dark), 0.2), transparent 48%),
var(--cwb-bg);
}
.cwb-wave-vignette {
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.08)),
linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 20%, transparent 84%, rgba(0, 0, 0, 0.38)),
radial-gradient(circle at 50% 56%, transparent 62%, rgba(0, 0, 0, 0.2) 100%);
}
}