[data-visual-style="pearl-vivid"],
[data-item-style="pearl-vivid"],
[data-slide-style="pearl-vivid"] {
--vs-bg:
linear-gradient(118deg,
transparent 32%,
color-mix(in oklab, var(--vs-white-pivot, white) 55%, transparent) 45%,
var(--shine-strong) 50%,
color-mix(in oklab, var(--vs-white-pivot, white) 55%, transparent) 55%,
transparent 68%),
conic-gradient(from 210deg at 42% 52%,
var(--color-accent) 0%,
var(--gradient-decorative-3) 15%,
var(--color-primary) 31%,
var(--gradient-decorative-1) 47%,
var(--color-accent) 63%,
var(--gradient-decorative-2) 80%,
var(--color-accent) 100%),
linear-gradient(135deg,
color-mix(in oklab, var(--vs-white-pivot, white) 80%, var(--color-accent)) 0%,
color-mix(in oklab, var(--vs-white-pivot, white) 74%, var(--gradient-decorative-2)) 50%,
color-mix(in oklab, var(--vs-white-pivot, white) 82%, var(--color-primary)) 100%);
--vs-text-primary: var(--hero-text-light-title);
--vs-text-secondary: var(--hero-text-light-subtitle);
--vs-border: var(--shine-strong);
--vs-border-width: 1px;
--vs-shadow:
var(--shadow-lg),
inset 0 1px 0 var(--shine-strong),
inset 0 -1px 0 var(--shine-strong);
--vs-backdrop: none;
--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="pearl-vivid"],
.banner.banner[data-visual-style="pearl-vivid"],
.header-master[data-visual-style="pearl-vivid"],
.grid-block[data-visual-style="pearl-vivid"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block[data-visual-style="pearl-vivid"] .grid-item--article:not([data-item-style]),
.carousel-block[data-visual-style="pearl-vivid"] .carousel-slide:not([data-slide-style]),
.tabs.tabs[data-visual-style="pearl-vivid"] .tabs__panels,
.grid-block .grid-item.card.card--feature[data-item-style="pearl-vivid"],
.grid-block .grid-item--article[data-item-style="pearl-vivid"],
.carousel-block .carousel-slide[data-slide-style="pearl-vivid"],
.spotlight[data-visual-style="pearl-vivid"] .spotlight__card,
.spotlight[data-visual-style="pearl-vivid"] .spotlight__panel,
.timeline[data-visual-style="pearl-vivid"] .timeline__card
) {
background-blend-mode: screen, overlay, normal;
}