[data-visual-style="liquid-glass"],
[data-item-style="liquid-glass"],
[data-slide-style="liquid-glass"] {
--vs-bg:
radial-gradient(50% 80% at 18% 22%, color-mix(in oklab, var(--color-primary)   65%, var(--vs-white-pivot, white)) 0%, transparent 55%),
radial-gradient(60% 80% at 85% 28%, color-mix(in oklab, var(--color-accent)    60%, var(--vs-white-pivot, white)) 0%, transparent 55%),
radial-gradient(70% 90% at 50% 110%, color-mix(in oklab, var(--color-secondary) 55%, var(--vs-white-pivot, white)) 0%, transparent 60%),
radial-gradient(40% 50% at 70% 65%, color-mix(in oklab, var(--color-accent)    35%, var(--vs-white-pivot, white)) 0%, transparent 60%),
color-mix(in oklab, var(--color-highlight) 55%, var(--vs-white-pivot, white));
--vs-text-primary: var(--hero-text-light-title);
--vs-text-secondary: color-mix(in srgb, var(--hero-text-light-subtitle) 70%, var(--hero-text-light-title));
--vs-border: transparent;
--vs-border-width: 0;
--vs-shadow: var(--shadow-xl);
--vs-backdrop: blur(28px) saturate(1.65);
--vs-form-label: var(--text-primary);
--vs-form-text: var(--text-primary);
--vs-form-help: var(--text-secondary);
--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);
}
:is(
.hero.hero[data-visual-style="liquid-glass"] .hero__title,
.banner.banner[data-visual-style="liquid-glass"] .banner__title,
.grid-block[data-visual-style="liquid-glass"] .grid-item.card.card--feature:not([data-item-style]) .card__title,
.grid-block[data-visual-style="liquid-glass"] .grid-item.card.card--feature:not([data-item-style]) .card__subtitle,
.grid-block .grid-item.card.card--feature[data-item-style="liquid-glass"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="liquid-glass"] .card__subtitle,
.grid-block[data-visual-style="liquid-glass"] .grid-item--article:not([data-item-style]) .grid-item__article-title,
.grid-block .grid-item--article[data-item-style="liquid-glass"] .grid-item__article-title,
.carousel-block[data-visual-style="liquid-glass"] .carousel-slide:not([data-slide-style]) .carousel-slide__title,
.carousel-block .carousel-slide[data-slide-style="liquid-glass"] .carousel-slide__title,
.carousel-block[data-visual-style="liquid-glass"] .carousel-slide:not([data-slide-style]) .carousel-slide__article-title,
.carousel-block .carousel-slide[data-slide-style="liquid-glass"] .carousel-slide__article-title
) {
background: none;
-webkit-text-fill-color: var(--hero-text-light-title);
color: var(--hero-text-light-title);
animation: none;
text-shadow:
0 1px 0 var(--shine-strong),
0 -1px 0 rgba(var(--neutral-950-rgb), 0.12),
0 0 28px rgba(var(--color-primary-rgb), 0.50),
0 0 50px rgba(var(--color-secondary-rgb), 0.30),
0 4px 16px rgba(var(--neutral-950-rgb), 0.20);
}
.spotlight[data-visual-style="liquid-glass"] .spotlight__card-title,
.spotlight[data-visual-style="liquid-glass"] .spotlight__panel-title,
.timeline[data-visual-style="liquid-glass"] .timeline__step-title {
background: none;
-webkit-text-fill-color: var(--hero-text-light-title);
color: var(--hero-text-light-title);
text-shadow:
0 1px 0 var(--shine-strong),
0 -1px 0 rgba(var(--neutral-950-rgb), 0.12),
0 0 28px rgba(var(--color-primary-rgb), 0.50),
0 0 50px rgba(var(--color-secondary-rgb), 0.30),
0 4px 16px rgba(var(--neutral-950-rgb), 0.20);
}
.spotlight[data-visual-style="liquid-glass"] .spotlight__card-desc,
.spotlight[data-visual-style="liquid-glass"] .spotlight__panel-desc,
.timeline[data-visual-style="liquid-glass"] .timeline__desc {
--lexical-color: var(--vs-text-secondary);
--lexical-heading-color: var(--vs-text-primary);
--lexical-link-color: var(--color-primary-text);
--lexical-quote-color: var(--vs-text-secondary);
--lexical-strong-color: var(--color-primary-text);
color: var(--vs-text-secondary);
line-height: var(--line-height-relaxed);
}
.timeline[data-visual-style="liquid-glass"] .timeline__ref,
.timeline[data-visual-style="liquid-glass"] .timeline__desc.lexical-content strong,
.timeline[data-visual-style="liquid-glass"] .timeline__desc.lexical-content b {
color: var(--color-primary-text);
}