[data-visual-style="frosted-glass"],
[data-item-style="frosted-glass"],
[data-slide-style="frosted-glass"] {
--vs-sombre-charte: color-mix(in oklab, var(--color-primary) 34%, black);
--vs-floor-frost: color-mix(in oklab, var(--vs-white-pivot, white) 90%, var(--vs-sombre-charte));
--vs-bg:
var(--vs-relief-layer),
linear-gradient(158deg,
rgb(255 255 255 / .80)  0%,
rgb(255 255 255 / .46) 44%,
rgb(255 255 255 / .64) 100%),
radial-gradient(62% 88% at 14% 8%,
color-mix(in oklab, var(--color-accent) 66%, var(--vs-floor-frost)) 0%, transparent 66%),
radial-gradient(58% 84% at 88% 80%,
color-mix(in oklab, var(--color-primary) 62%, var(--vs-floor-frost)) 0%, transparent 68%),
var(--vs-floor-frost);
--vs-text-primary: var(--hero-text-light-title);
--vs-text-secondary: var(--neutral-800);
--vs-border: color-mix(in oklab, var(--vs-sombre-charte) 14%, transparent);
--vs-border-width: 1px;
--vs-shadow:
inset 0 1px 0 rgb(255 255 255 / .90),
inset 0 -50px 80px rgb(0 0 0 / .04);
--vs-backdrop: none;
--vs-form-label: var(--hero-text-light-title);
--vs-form-text: var(--hero-text-light-title);
--vs-form-help: var(--neutral-800);
--vs-form-placeholder: var(--placeholder-on-light);
--vs-form-focus-border: var(--color-primary);
--vs-form-focus-shadow: rgba(var(--color-primary-rgb), 0.2);
}
.banner.banner[data-visual-style="frosted-glass"] {
--vs-shadow:
inset 0 1px 0 rgb(255 255 255 / .90),
inset 0 -50px 80px rgb(0 0 0 / .04),
var(--vs-elevation);
}
.banner.banner[data-visual-style="frosted-glass"]:hover {
--vs-shadow:
inset 0 1px 0 rgb(255 255 255 / .90),
inset 0 -50px 80px rgb(0 0 0 / .04),
var(--vs-elevation-hover);
transform: translateY(-2px);
}
:is(
.grid-block[data-visual-style="frosted-glass"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="frosted-glass"],
.grid-block[data-visual-style="frosted-glass"] .grid-item--article:not([data-item-style]),
.grid-block .grid-item--article[data-item-style="frosted-glass"],
.carousel-block[data-visual-style="frosted-glass"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="frosted-glass"],
.tabs.tabs[data-visual-style="frosted-glass"] .tabs__panels,
.spotlight[data-visual-style="frosted-glass"] .spotlight__card,
.spotlight[data-visual-style="frosted-glass"] .spotlight__panel,
.timeline[data-visual-style="frosted-glass"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="frosted-glass"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="frosted-glass"],
.bento[data-visual-style="frosted-glass"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="frosted-glass"]
) {
--vs-shadow:
inset 0 1px 0 rgb(255 255 255 / .90),
inset 0 -50px 80px rgb(0 0 0 / .04),
var(--vs-elevation);
}
:is(
.grid-block[data-visual-style="frosted-glass"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="frosted-glass"],
.grid-block[data-visual-style="frosted-glass"] .grid-item--article:not([data-item-style]),
.grid-block .grid-item--article[data-item-style="frosted-glass"],
.carousel-block[data-visual-style="frosted-glass"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="frosted-glass"],
.tabs.tabs[data-visual-style="frosted-glass"] .tabs__panels,
.spotlight[data-visual-style="frosted-glass"] .spotlight__card,
.spotlight[data-visual-style="frosted-glass"] .spotlight__panel,
.timeline[data-visual-style="frosted-glass"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="frosted-glass"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="frosted-glass"],
.bento[data-visual-style="frosted-glass"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="frosted-glass"]
):hover {
--vs-shadow:
inset 0 1px 0 rgb(255 255 255 / .90),
inset 0 -50px 80px rgb(0 0 0 / .04),
var(--vs-elevation-hover);
}
.hero.hero[data-visual-style="frosted-glass"] .hero__title {
background: none;
-webkit-text-fill-color: var(--vs-text-primary);
color: var(--vs-text-primary);
animation: none;
}