[data-visual-style="liquid-glass-vivid"],
[data-item-style="liquid-glass-vivid"],
[data-slide-style="liquid-glass-vivid"] {
--vs-bg:
radial-gradient(72% 88% at 50% 50%, var(--vs-lgv-scrim, rgba(0, 0, 0, 0.30)) 0%, transparent 70%),
radial-gradient(55% 90% at 12% 18%, var(--gradient-decorative-1) 0%, transparent 55%),
radial-gradient(60% 85% at 88% 22%, var(--gradient-decorative-2) 0%, transparent 55%),
radial-gradient(70% 100% at 50% 110%, var(--gradient-decorative-3) 0%, transparent 60%),
radial-gradient(45% 60% at 70% 65%, var(--color-accent) 0%, transparent 60%),
radial-gradient(50% 70% at 28% 75%, var(--color-primary) 0%, transparent 60%),
radial-gradient(40% 60% at 55% 30%, var(--color-secondary) 0%, transparent 60%),
color-mix(in oklab, var(--gradient-decorative-2) 50%, var(--gradient-decorative-3));
--vs-text-primary: var(--vs-lgv-text-primary, var(--text-inverse-primary));
--vs-text-secondary: var(--vs-lgv-text-secondary, var(--text-inverse-secondary));
--vs-border: transparent;
--vs-border-width: 0;
--vs-shadow: var(--shadow-xl);
--vs-backdrop: blur(28px) saturate(1.65);
--vs-form-label: var(--text-inverse-primary);
--vs-form-text: var(--text-inverse-primary);
--vs-form-help: var(--text-inverse-secondary);
--vs-form-placeholder: var(--placeholder-on-light);
--vs-form-focus-border: var(--focus-ring-on-dark);
--vs-form-focus-shadow: var(--shine-medium-plus);
}
.banner.banner[data-visual-style="liquid-glass-vivid"] {
--vs-shadow: var(--shadow-xl), var(--vs-elevation);
}
.banner.banner[data-visual-style="liquid-glass-vivid"]:hover {
--vs-shadow: var(--shadow-xl), var(--vs-elevation-hover);
transform: translateY(-2px);
}
:is(
.grid-block[data-visual-style="liquid-glass-vivid"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="liquid-glass-vivid"],
.grid-block[data-visual-style="liquid-glass-vivid"] .grid-item--article:not([data-item-style]),
.grid-block .grid-item--article[data-item-style="liquid-glass-vivid"],
.carousel-block[data-visual-style="liquid-glass-vivid"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="liquid-glass-vivid"],
.tabs.tabs[data-visual-style="liquid-glass-vivid"] .tabs__panels,
.spotlight[data-visual-style="liquid-glass-vivid"] .spotlight__card,
.spotlight[data-visual-style="liquid-glass-vivid"] .spotlight__panel,
.timeline[data-visual-style="liquid-glass-vivid"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="liquid-glass-vivid"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="liquid-glass-vivid"],
.bento[data-visual-style="liquid-glass-vivid"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="liquid-glass-vivid"]
) {
--vs-shadow: var(--shadow-xl), var(--vs-elevation);
}
:is(
.grid-block[data-visual-style="liquid-glass-vivid"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="liquid-glass-vivid"],
.grid-block[data-visual-style="liquid-glass-vivid"] .grid-item--article:not([data-item-style]),
.grid-block .grid-item--article[data-item-style="liquid-glass-vivid"],
.carousel-block[data-visual-style="liquid-glass-vivid"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="liquid-glass-vivid"],
.tabs.tabs[data-visual-style="liquid-glass-vivid"] .tabs__panels,
.spotlight[data-visual-style="liquid-glass-vivid"] .spotlight__card,
.spotlight[data-visual-style="liquid-glass-vivid"] .spotlight__panel,
.timeline[data-visual-style="liquid-glass-vivid"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="liquid-glass-vivid"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="liquid-glass-vivid"],
.bento[data-visual-style="liquid-glass-vivid"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="liquid-glass-vivid"]
):hover {
--vs-shadow: var(--shadow-xl), var(--vs-elevation-hover);
}
[data-visual-style="liquid-glass-vivid"],
[data-item-style="liquid-glass-vivid"],
[data-slide-style="liquid-glass-vivid"] {
--_vs-title-bg: var(--vs-aurora-title-gradient);
--_vs-title-size: 400% 400%;
--vs-aurora-title-glow:
0 0 60px rgba(var(--color-primary-rgb), 0.5),
0 0 120px rgba(var(--color-secondary-rgb), 0.3);
}
.timeline[data-visual-style="liquid-glass-vivid"] .timeline__ref {
color: var(--color-primary-light);
}
.timeline[data-visual-style="liquid-glass-vivid"] .timeline__desc.lexical-content strong,
.timeline[data-visual-style="liquid-glass-vivid"] .timeline__desc.lexical-content b {
color: var(--text-inverse-primary);
}