[data-visual-style="holographic-vivid"],
[data-item-style="holographic-vivid"],
[data-slide-style="holographic-vivid"] {
--vs-bg:
radial-gradient(60% 78% at 50% 50%,
var(--vs-hv-scrim-strong, rgba(0, 0, 0, 0.20)) 0%,
var(--vs-hv-scrim-soft, rgba(0, 0, 0, 0.06)) 55%,
transparent 82%),
conic-gradient(from 220deg at 12% 110%,
var(--color-primary) 0%,
var(--gradient-decorative-3) 13%,
var(--color-secondary) 28%,
var(--gradient-decorative-2) 44%,
var(--color-accent) 60%,
var(--gradient-decorative-1) 76%,
var(--gradient-decorative-3) 90%,
var(--color-primary) 100%);
--vs-text-primary: var(--vs-hv-text-primary, var(--text-inverse-primary));
--vs-text-secondary: var(--vs-hv-text-secondary, var(--text-inverse-secondary));
--vs-border: var(--shine-strong);
--vs-border-width: 1px;
--vs-shadow:
var(--shadow-xl),
inset 0 1px 0 var(--shine-strong);
--vs-backdrop: none;
--vs-form-label: var(--vs-hv-text-primary, var(--text-inverse-primary));
--vs-form-text: var(--vs-hv-text-primary, var(--text-inverse-primary));
--vs-form-help: var(--vs-hv-text-secondary, 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);
}
[data-visual-style="holographic-vivid"],
[data-item-style="holographic-vivid"],
[data-slide-style="holographic-vivid"] {
--_vs-title-bg: var(--vs-hv-title-bg, var(--vs-aurora-title-gradient));
--_vs-title-size: 400% 400%;
--vs-aurora-title-glow: var(--vs-hv-title-glow,
0 0 60px rgba(var(--color-primary-rgb), 0.5),
0 0 120px rgba(var(--color-secondary-rgb), 0.3));
}
:is(
.grid-block[data-visual-style="holographic-vivid"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block[data-visual-style="holographic-vivid"] .grid-item--article:not([data-item-style]),
.carousel-block[data-visual-style="holographic-vivid"] .carousel-slide:not([data-slide-style]),
.grid-block .grid-item.card.card--feature[data-item-style="holographic-vivid"],
.grid-block .grid-item--article[data-item-style="holographic-vivid"],
.carousel-block .carousel-slide[data-slide-style="holographic-vivid"]
)::after {
opacity: 0.2;
}
.spotlight[data-visual-style="holographic-vivid"] .spotlight__card-desc,
.spotlight[data-visual-style="holographic-vivid"] .spotlight__panel-desc,
.timeline[data-visual-style="holographic-vivid"] .timeline__desc {
--lexical-color: var(--vs-hv-text-primary, var(--text-inverse-primary));
--lexical-heading-color: var(--vs-hv-text-primary, var(--text-inverse-primary));
--lexical-link-color: var(--vs-hv-link, var(--color-primary-light));
--lexical-link-hover-color: var(--vs-hv-link-hover, var(--text-inverse-primary));
--lexical-quote-color: var(--vs-hv-text-primary, var(--text-inverse-primary));
--lexical-strong-color: var(--vs-hv-text-primary, var(--text-inverse-primary));
color: var(--vs-hv-text-primary, var(--text-inverse-primary));
text-shadow: var(--vs-hv-text-shadow, var(--text-shadow-stronger));
}
.timeline[data-visual-style="holographic-vivid"] .timeline__ref {
color: var(--vs-hv-link, var(--color-primary-light));
}
.timeline[data-visual-style="holographic-vivid"] .timeline__desc strong {
color: var(--vs-hv-text-primary, var(--text-inverse-primary));
}