[data-visual-style="pearl"],
[data-item-style="pearl"],
[data-slide-style="pearl"] {
--vs-bg:
conic-gradient(from 200deg at 35% 60%,
color-mix(in oklab, var(--color-primary)   14%, var(--vs-white-pivot, white)) 0%,
color-mix(in oklab, var(--color-secondary) 16%, var(--vs-white-pivot, white)) 22%,
color-mix(in oklab, var(--color-highlight) 92%, var(--vs-white-pivot, white)) 40%,
color-mix(in oklab, var(--color-accent)    14%, var(--vs-white-pivot, white)) 60%,
color-mix(in oklab, var(--color-secondary) 12%, var(--vs-white-pivot, white)) 78%,
color-mix(in oklab, var(--color-primary)   14%, var(--vs-white-pivot, white)) 100%),
color-mix(in oklab, var(--color-highlight) 60%, var(--vs-white-pivot, white));
--vs-text-primary: var(--hero-text-light-title);
--vs-text-secondary: var(--hero-text-light-description);
--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"] .hero__title,
.banner.banner[data-visual-style="pearl"] .banner__title,
.grid-block[data-visual-style="pearl"] .grid-item.card.card--feature .card__title,
.grid-block[data-visual-style="pearl"] .grid-item.card.card--feature .card__subtitle,
.grid-block .grid-item.card.card--feature[data-item-style="pearl"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="pearl"] .card__subtitle,
.grid-block[data-visual-style="pearl"] .grid-item__article-title,
.grid-block .grid-item--article[data-item-style="pearl"] .grid-item__article-title,
.carousel-block[data-visual-style="pearl"] .carousel-slide__title,
.carousel-block .carousel-slide[data-slide-style="pearl"] .carousel-slide__title,
.carousel-block[data-visual-style="pearl"] .carousel-slide__article-title,
.carousel-block .carousel-slide[data-slide-style="pearl"] .carousel-slide__article-title
) {
background: linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary)   22%, var(--neutral-900)) 0%,
var(--neutral-900) 32%,
color-mix(in srgb, var(--color-secondary) 22%, var(--neutral-900)) 50%,
var(--neutral-900) 68%,
color-mix(in srgb, var(--color-accent)    22%, var(--neutral-900)) 100%
);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: var(--hero-text-light-title);
animation: vsGradientShift var(--animation-gradient) ease infinite;
will-change: background-position;
}
.spotlight[data-visual-style="pearl"] .spotlight__card-title,
.spotlight[data-visual-style="pearl"] .spotlight__panel-title,
.timeline[data-visual-style="pearl"] .timeline__step-title {
background: linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary)   22%, var(--neutral-900)) 0%,
var(--neutral-900) 32%,
color-mix(in srgb, var(--color-secondary) 22%, var(--neutral-900)) 50%,
var(--neutral-900) 68%,
color-mix(in srgb, var(--color-accent)    22%, var(--neutral-900)) 100%
);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: var(--hero-text-light-title);
text-shadow: var(--text-shadow-md);
animation: vsGradientShift var(--animation-gradient) ease infinite;
will-change: background-position;
}
.spotlight[data-visual-style="pearl"] .spotlight__card-desc,
.spotlight[data-visual-style="pearl"] .spotlight__panel-desc,
.timeline[data-visual-style="pearl"] .timeline__desc {
--lexical-color: var(--hero-text-light-description);
--lexical-heading-color: var(--hero-text-light-title);
--lexical-link-color: var(--color-primary-text);
--lexical-quote-color: var(--hero-text-light-description);
--lexical-strong-color: var(--hero-text-light-title);
color: var(--hero-text-light-description);
text-shadow: var(--text-shadow-sm);
}
@media (prefers-reduced-motion: reduce) {
.spotlight[data-visual-style="pearl"] .spotlight__card-title,
.spotlight[data-visual-style="pearl"] .spotlight__panel-title,
.timeline[data-visual-style="pearl"] .timeline__step-title {
animation: none;
background: none;
-webkit-text-fill-color: var(--hero-text-light-title);
color: var(--hero-text-light-title);
}
}