.tabs.tabs:is(
[data-visual-style="strong"],
[data-visual-style="pearl"],
[data-visual-style="pearl-vivid"],
[data-visual-style="holographic"],
[data-visual-style="holographic-vivid"]
) .tabs__panels {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.tabs.tabs[data-visual-style="pearl"] .tabs__button:hover:not(.tabs__button--active) {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary-text);
}
.tabs.tabs[data-visual-style="pearl"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--color-primary)   22%, white)  0%,
color-mix(in oklab, var(--color-secondary) 18%, white) 35%,
color-mix(in oklab, var(--color-highlight) 50%, white) 65%,
color-mix(in oklab, var(--color-accent)    18%, white) 100%
);
color: var(--vs-text-primary);
box-shadow:
var(--shadow-md),
inset 0 1px 0 var(--shine-strong),
inset 0 -1px 0 var(--shine-strong);
}
.tabs.tabs[data-visual-style="strong"] .tabs__button:hover:not(.tabs__button--active) {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary-text);
}
.tabs.tabs[data-visual-style="strong"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--color-primary) 14%, var(--color-white))  0%,
color-mix(in oklab, var(--color-primary) 18%, var(--color-white)) 50%,
color-mix(in oklab, var(--color-accent)  16%, var(--color-white)) 100%
);
color: var(--vs-text-primary);
box-shadow:
var(--shadow-md),
inset 0 1px 0 var(--shine-strong),
inset 0 -1px 0 var(--shine-strong);
}
.tabs.tabs[data-visual-style="pearl-vivid"] .tabs__button:hover:not(.tabs__button--active) {
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
color: var(--color-accent-text);
}
.tabs.tabs[data-visual-style="pearl-vivid"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--color-accent)    35%, white)  0%,
color-mix(in oklab, var(--color-secondary) 32%, white) 40%,
color-mix(in oklab, var(--color-highlight) 55%, white) 70%,
color-mix(in oklab, var(--color-primary)   30%, white) 100%
);
color: var(--vs-text-primary);
box-shadow:
var(--shadow-md),
inset 0 1px 0 var(--shine-strong),
inset 0 -1px 0 var(--shine-strong);
}
.tabs.tabs[data-visual-style="holographic"] .tabs__button:hover:not(.tabs__button--active) {
background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
color: var(--color-secondary-text);
}
.tabs.tabs[data-visual-style="holographic"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--color-primary)   50%, white)  0%,
color-mix(in oklab, var(--color-secondary) 52%, white) 35%,
color-mix(in oklab, var(--color-highlight) 70%, white) 65%,
color-mix(in oklab, var(--color-accent)    48%, white) 100%
);
color: var(--vs-text-primary);
box-shadow:
var(--shadow-md),
inset 0 1px 0 var(--shine-strong),
inset 0 -1px 0 var(--shine-medium);
}
.tabs.tabs[data-visual-style="liquid-glass"] .tabs__button:hover:not(.tabs__button--active) {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--color-primary-text);
}
.tabs.tabs[data-visual-style="liquid-glass"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--color-primary)   6%, white)  0%,
color-mix(in oklab, var(--color-secondary) 6%, white) 50%,
color-mix(in oklab, var(--color-accent)    6%, white) 100%
);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
color: var(--vs-text-primary);
box-shadow:
var(--shadow-md),
inset 0 1px 0 var(--shine-strong),
inset 0 -1px 0 var(--shine-medium);
}
.tabs.tabs[data-visual-style="holographic-vivid"] .tabs__button:hover:not(.tabs__button--active) {
background: color-mix(in srgb, var(--color-secondary) 30%, var(--neutral-950) 50%);
color: var(--text-inverse-primary);
}
.tabs.tabs[data-visual-style="holographic-vivid"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--color-primary)   70%, var(--neutral-950))  0%,
color-mix(in oklab, var(--color-secondary) 65%, var(--neutral-950)) 50%,
color-mix(in oklab, var(--color-accent)    70%, var(--neutral-950)) 100%
);
background-size: 200% 200%;
animation: vsGradientShift var(--animation-gradient) ease infinite;
will-change: background-position;
color: var(--text-inverse-primary);
box-shadow: var(--vs-aurora-title-glow);
}
.tabs.tabs[data-visual-style="liquid-glass-vivid"] .tabs__button:hover:not(.tabs__button--active) {
background: color-mix(in srgb, var(--gradient-decorative-2) 30%, var(--neutral-950) 50%);
color: var(--text-inverse-primary);
}
.tabs.tabs[data-visual-style="liquid-glass-vivid"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--gradient-decorative-1) 70%, var(--neutral-950))  0%,
color-mix(in oklab, var(--gradient-decorative-2) 65%, var(--neutral-950)) 50%,
color-mix(in oklab, var(--gradient-decorative-3) 70%, var(--neutral-950)) 100%
);
background-size: 200% 200%;
animation: vsGradientShift var(--animation-gradient) ease infinite;
will-change: background-position;
color: var(--text-inverse-primary);
box-shadow: var(--vs-aurora-title-glow);
}
.tabs.tabs[data-visual-style="lacquer"] .tabs__button:hover:not(.tabs__button--active) {
background:
radial-gradient(80% 50% at 50% -10%, var(--shine-light) 0%, transparent 55%),
color-mix(in srgb, var(--color-primary) 30%, var(--neutral-950));
color: var(--text-inverse-primary);
}
.tabs.tabs[data-visual-style="lacquer"] .tabs__button--active {
background:
radial-gradient(80% 50% at 50% -10%, var(--shine-medium-plus) 0%, transparent 55%),
linear-gradient(180deg,
color-mix(in oklab, var(--color-primary) 75%, var(--neutral-950))  0%,
color-mix(in oklab, var(--color-primary) 35%, var(--neutral-950)) 100%);
color: var(--text-inverse-primary);
box-shadow:
var(--shadow-dark-card),
inset 0 1px 0 var(--shine-medium-plus);
}
.tabs.tabs[data-visual-style="velvet"] .tabs__button:hover:not(.tabs__button--active) {
background:
radial-gradient(120% 60% at 50% 30%, var(--shine-subtle) 0%, transparent 55%),
color-mix(in srgb, var(--color-primary) 20%, var(--neutral-950));
color: var(--text-inverse-primary);
}
.tabs.tabs[data-visual-style="velvet"] .tabs__button--active {
background:
radial-gradient(120% 60% at 50% 30%, var(--shine-light) 0%, transparent 55%),
linear-gradient(160deg,
color-mix(in oklab, var(--color-primary) 45%, var(--neutral-950))  0%,
color-mix(in oklab, var(--color-primary) 25%, var(--neutral-950)) 100%);
color: var(--text-inverse-primary);
box-shadow:
var(--shadow-dark-card),
inset 0 1px 0 var(--shine-light);
}
.tabs.tabs.tabs--pills[data-visual-style="pearl"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--color-primary)   22%, white)  0%,
color-mix(in oklab, var(--color-secondary) 18%, white) 35%,
color-mix(in oklab, var(--color-highlight) 50%, white) 65%,
color-mix(in oklab, var(--color-accent)    18%, white) 100%
);
color: var(--vs-text-primary);
box-shadow:
var(--shadow-sm),
inset 0 1px 0 var(--shine-strong),
inset 0 -1px 0 var(--shine-strong);
}
.tabs.tabs.tabs--pills[data-visual-style="strong"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--color-primary) 14%, var(--color-white))  0%,
color-mix(in oklab, var(--color-primary) 18%, var(--color-white)) 50%,
color-mix(in oklab, var(--color-accent)  16%, var(--color-white)) 100%
);
color: var(--vs-text-primary);
box-shadow:
var(--shadow-sm),
inset 0 1px 0 var(--shine-strong),
inset 0 -1px 0 var(--shine-strong);
}
.tabs.tabs.tabs--pills[data-visual-style="pearl-vivid"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--color-accent)    35%, white)  0%,
color-mix(in oklab, var(--color-secondary) 32%, white) 40%,
color-mix(in oklab, var(--color-highlight) 55%, white) 70%,
color-mix(in oklab, var(--color-primary)   30%, white) 100%
);
color: var(--vs-text-primary);
box-shadow:
var(--shadow-sm),
inset 0 1px 0 var(--shine-strong),
inset 0 -1px 0 var(--shine-strong);
}
.tabs.tabs.tabs--pills[data-visual-style="holographic"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--color-primary)   50%, white)  0%,
color-mix(in oklab, var(--color-secondary) 52%, white) 35%,
color-mix(in oklab, var(--color-highlight) 70%, white) 65%,
color-mix(in oklab, var(--color-accent)    48%, white) 100%
);
color: var(--vs-text-primary);
box-shadow:
var(--shadow-sm),
inset 0 1px 0 var(--shine-strong),
inset 0 -1px 0 var(--shine-medium);
}
.tabs.tabs.tabs--pills[data-visual-style="liquid-glass"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--color-primary)   6%, white)  0%,
color-mix(in oklab, var(--color-secondary) 6%, white) 50%,
color-mix(in oklab, var(--color-accent)    6%, white) 100%
);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
color: var(--vs-text-primary);
box-shadow:
var(--shadow-sm),
inset 0 1px 0 var(--shine-strong),
inset 0 -1px 0 var(--shine-medium);
}
.tabs.tabs.tabs--pills[data-visual-style="holographic-vivid"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--color-primary)   70%, var(--neutral-950))  0%,
color-mix(in oklab, var(--color-secondary) 65%, var(--neutral-950)) 50%,
color-mix(in oklab, var(--color-accent)    70%, var(--neutral-950)) 100%
);
background-size: 200% 200%;
animation: vsGradientShift var(--animation-gradient) ease infinite;
will-change: background-position;
color: var(--text-inverse-primary);
box-shadow:
var(--shadow-sm),
var(--vs-aurora-title-glow);
}
.tabs.tabs.tabs--pills[data-visual-style="liquid-glass-vivid"] .tabs__button--active {
background: linear-gradient(
135deg,
color-mix(in oklab, var(--gradient-decorative-1) 70%, var(--neutral-950))  0%,
color-mix(in oklab, var(--gradient-decorative-2) 65%, var(--neutral-950)) 50%,
color-mix(in oklab, var(--gradient-decorative-3) 70%, var(--neutral-950)) 100%
);
background-size: 200% 200%;
animation: vsGradientShift var(--animation-gradient) ease infinite;
will-change: background-position;
color: var(--text-inverse-primary);
box-shadow:
var(--shadow-sm),
var(--vs-aurora-title-glow);
}
.tabs.tabs.tabs--pills[data-visual-style="lacquer"] .tabs__button--active {
background:
radial-gradient(80% 50% at 50% -10%, var(--shine-medium-plus) 0%, transparent 55%),
linear-gradient(180deg,
color-mix(in oklab, var(--color-primary) 75%, var(--neutral-950))  0%,
color-mix(in oklab, var(--color-primary) 35%, var(--neutral-950)) 100%);
color: var(--text-inverse-primary);
box-shadow:
var(--shadow-dark-card),
inset 0 1px 0 var(--shine-medium-plus);
}
.tabs.tabs.tabs--pills[data-visual-style="velvet"] .tabs__button--active {
background:
radial-gradient(120% 60% at 50% 30%, var(--shine-light) 0%, transparent 55%),
linear-gradient(160deg,
color-mix(in oklab, var(--color-primary) 45%, var(--neutral-950))  0%,
color-mix(in oklab, var(--color-primary) 25%, var(--neutral-950)) 100%);
color: var(--text-inverse-primary);
box-shadow:
var(--shadow-dark-card),
inset 0 1px 0 var(--shine-light);
}
:is(
.tabs.tabs.tabs--underline[data-visual-style="strong"],
.tabs.tabs.tabs--underline[data-visual-style="pearl"],
.tabs.tabs.tabs--underline[data-visual-style="holographic"],
.tabs.tabs.tabs--underline[data-visual-style="lacquer"]
) .tabs__button::after {
background: var(--color-primary);
}
.tabs.tabs.tabs--underline[data-visual-style="pearl-vivid"] .tabs__button::after {
background: var(--color-accent);
}
.tabs.tabs.tabs--underline[data-visual-style="liquid-glass"] .tabs__button::after {
background: var(--color-secondary);
}
.tabs.tabs.tabs--underline[data-visual-style="holographic-vivid"] .tabs__button::after {
background: var(--color-primary);
}
.tabs.tabs.tabs--underline[data-visual-style="liquid-glass-vivid"] .tabs__button::after {
background: var(--color-accent);
}
.tabs.tabs.tabs--underline[data-visual-style="velvet"] .tabs__button::after {
background: var(--color-primary-light);
}
.tabs.tabs.tabs--underline:is(
[data-visual-style="lacquer"],
[data-visual-style="velvet"],
[data-visual-style="holographic-vivid"],
[data-visual-style="liquid-glass-vivid"]
) .tabs__button:hover:not(.tabs__button--active) {
background: transparent;
color: var(--color-primary-text);
}
:is(
.hero.hero[data-visual-style="pearl"],
.hero.hero[data-visual-style="holographic"],
.hero.hero[data-visual-style="liquid-glass"],
.hero.hero[data-visual-style="pearl-vivid"],
.banner.banner[data-visual-style="pearl"],
.banner.banner[data-visual-style="holographic"],
.banner.banner[data-visual-style="liquid-glass"],
.banner.banner[data-visual-style="pearl-vivid"],
.tabs.tabs[data-visual-style="pearl"],
.tabs.tabs[data-visual-style="holographic"],
.tabs.tabs[data-visual-style="liquid-glass"],
.tabs.tabs[data-visual-style="pearl-vivid"],
.carousel-block[data-visual-style="pearl"],
.carousel-block[data-visual-style="holographic"],
.carousel-block[data-visual-style="liquid-glass"],
.carousel-block[data-visual-style="pearl-vivid"],
.carousel-block .carousel-slide[data-slide-style="pearl"],
.carousel-block .carousel-slide[data-slide-style="holographic"],
.carousel-block .carousel-slide[data-slide-style="liquid-glass"],
.carousel-block .carousel-slide[data-slide-style="pearl-vivid"],
.grid-block[data-visual-style="pearl"] .grid-item.card.card--feature,
.grid-block[data-visual-style="holographic"] .grid-item.card.card--feature,
.grid-block[data-visual-style="liquid-glass"] .grid-item.card.card--feature,
.grid-block[data-visual-style="pearl-vivid"] .grid-item.card.card--feature,
.grid-block .grid-item.card.card--feature[data-item-style="pearl"],
.grid-block .grid-item.card.card--feature[data-item-style="holographic"],
.grid-block .grid-item.card.card--feature[data-item-style="liquid-glass"],
.grid-block .grid-item.card.card--feature[data-item-style="pearl-vivid"],
.spotlight[data-visual-style="pearl"],
.spotlight[data-visual-style="holographic"],
.spotlight[data-visual-style="liquid-glass"],
.spotlight[data-visual-style="pearl-vivid"],
.timeline[data-visual-style="pearl"],
.timeline[data-visual-style="holographic"],
.timeline[data-visual-style="liquid-glass"],
.timeline[data-visual-style="pearl-vivid"]
) :is(
.hero__description.lexical-content,
.banner__description.lexical-content,
.tabs__panel > .lexical-content,
.lexical-content,
.card__description.lexical-content,
.card__description,
.spotlight__card-desc,
.spotlight__panel-desc,
.timeline__desc
) {
--lexical-color: var(--hero-text-light-title);
--lexical-heading-color: var(--hero-text-light-title);
--lexical-link-color: var(--color-primary-text);
--lexical-link-hover-color: var(--color-primary-hover);
--lexical-quote-color: var(--hero-text-light-subtitle);
--lexical-strong-color: var(--hero-text-light-title);
color: var(--hero-text-light-title);
text-shadow: var(--text-shadow-sm);
}
:is(
.hero.hero[data-visual-style="lacquer"],
.hero.hero[data-visual-style="velvet"],
.banner.banner[data-visual-style="lacquer"],
.banner.banner[data-visual-style="velvet"],
.tabs.tabs[data-visual-style="lacquer"],
.tabs.tabs[data-visual-style="velvet"],
.carousel-block[data-visual-style="lacquer"],
.carousel-block[data-visual-style="velvet"],
.carousel-block .carousel-slide[data-slide-style="lacquer"],
.carousel-block .carousel-slide[data-slide-style="velvet"],
.grid-block[data-visual-style="lacquer"] .grid-item.card.card--feature,
.grid-block[data-visual-style="velvet"] .grid-item.card.card--feature,
.grid-block .grid-item.card.card--feature[data-item-style="lacquer"],
.grid-block .grid-item.card.card--feature[data-item-style="velvet"],
.spotlight[data-visual-style="lacquer"],
.spotlight[data-visual-style="velvet"],
.timeline[data-visual-style="lacquer"],
.timeline[data-visual-style="velvet"]
) :is(
.hero__description.lexical-content,
.banner__description.lexical-content,
.tabs__panel > .lexical-content,
.lexical-content,
.card__description.lexical-content,
.card__description,
.spotlight__card-desc,
.spotlight__panel-desc,
.timeline__desc
) {
--lexical-color: var(--text-inverse-secondary);
--lexical-heading-color: var(--text-inverse-primary);
--lexical-link-color: var(--color-primary-light);
--lexical-link-hover-color: var(--text-inverse-primary);
--lexical-quote-color: var(--text-inverse-secondary);
--lexical-strong-color: var(--text-inverse-primary);
color: var(--text-inverse-secondary);
text-shadow: var(--text-shadow-heavy);
}
:is(
.hero.hero[data-visual-style="holographic-vivid"],
.banner.banner[data-visual-style="holographic-vivid"],
.tabs.tabs[data-visual-style="holographic-vivid"],
.carousel-block[data-visual-style="holographic-vivid"],
.carousel-block .carousel-slide[data-slide-style="holographic-vivid"],
.grid-block[data-visual-style="holographic-vivid"] .grid-item.card.card--feature,
.grid-block .grid-item.card.card--feature[data-item-style="holographic-vivid"],
.spotlight[data-visual-style="holographic-vivid"],
.timeline[data-visual-style="holographic-vivid"]
) :is(
.hero__description.lexical-content,
.banner__description.lexical-content,
.tabs__panel > .lexical-content,
.lexical-content,
.card__description.lexical-content,
.card__description,
.spotlight__card-desc,
.spotlight__panel-desc,
.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));
}
:is(
.hero.hero[data-visual-style="liquid-glass-vivid"],
.banner.banner[data-visual-style="liquid-glass-vivid"],
.tabs.tabs[data-visual-style="liquid-glass-vivid"],
.carousel-block[data-visual-style="liquid-glass-vivid"],
.carousel-block .carousel-slide[data-slide-style="liquid-glass-vivid"],
.grid-block[data-visual-style="liquid-glass-vivid"] .grid-item.card.card--feature,
.grid-block .grid-item.card.card--feature[data-item-style="liquid-glass-vivid"],
.spotlight[data-visual-style="liquid-glass-vivid"],
.timeline[data-visual-style="liquid-glass-vivid"]
) :is(
.hero__description.lexical-content,
.banner__description.lexical-content,
.tabs__panel > .lexical-content,
.lexical-content,
.card__description.lexical-content,
.card__description,
.spotlight__card-desc,
.spotlight__panel-desc,
.timeline__desc
) {
--lexical-color: var(--text-inverse-primary);
--lexical-heading-color: var(--text-inverse-primary);
--lexical-link-color: var(--color-primary-light);
--lexical-link-hover-color: var(--text-inverse-primary);
--lexical-quote-color: var(--text-inverse-primary);
--lexical-strong-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-stronger);
}
.grid-block .grid-item.card.card--feature:is([data-item-style="default"], [data-item-style="light"], [data-item-style="minimalist"], [data-item-style="brand"], [data-item-style="dark"], [data-item-style="gradient"], [data-item-style="liquid-glass"]) .card__title {
-webkit-text-fill-color: unset;
-webkit-background-clip: unset;
background-clip: unset;
background: none;
animation: none;
text-shadow: none;
}
.grid-block .grid-item.card.card--feature[data-item-style] .card__description {
text-shadow: none;
-webkit-text-fill-color: unset;
}
.grid-block .grid-item.card.card--feature[data-item-style="default"] {
background: transparent;
color: var(--text-primary);
border: var(--border-width) solid var(--border-subtle);
border-inline-start: var(--border-width) solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: none;
}
.grid-block .grid-item.card.card--feature[data-item-style="default"]::before {
display: none;
}
.grid-block .grid-item.card.card--feature[data-item-style="default"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="default"] .card__subtitle {
color: var(--text-primary);
}
.grid-block .grid-item.card.card--feature[data-item-style="default"] .card__description {
color: var(--text-secondary);
}
.grid-block .grid-item.card.card--feature[data-item-style="default"] .card__icon {
position: relative;
z-index: 1;
}
.grid-block .grid-item.card.card--feature[data-item-style="default"]:hover .card__title {
color: var(--text-primary);
}
.grid-block .grid-item.card.card--feature[data-item-style="light"] {
background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
color: var(--text-primary);
border: var(--border-width) solid var(--border-subtle);
border-inline-start: var(--border-width) solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
.grid-block .grid-item.card.card--feature[data-item-style="light"]::before {
display: none;
}
.grid-block .grid-item.card.card--feature[data-item-style="light"] .card__title {
color: var(--text-primary);
text-shadow: var(--text-shadow-md);
}
.grid-block .grid-item.card.card--feature[data-item-style="light"] .card__subtitle {
color: var(--text-primary);
text-shadow: var(--text-shadow-sm);
}
.grid-block .grid-item.card.card--feature[data-item-style="light"] .card__description {
color: var(--hero-text-light-description);
text-shadow: var(--text-shadow-sm);
}
.grid-block .grid-item.card.card--feature[data-item-style="light"]:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.grid-block .grid-item.card.card--feature[data-item-style="light"]:hover .card__title {
color: var(--text-primary);
}
.grid-block .grid-item.card.card--feature[data-item-style="minimalist"] {
background: var(--vs-bg-glass);
backdrop-filter: var(--vs-backdrop-glass);
-webkit-backdrop-filter: var(--vs-backdrop-glass);
border: var(--border-width) solid var(--border-subtle);
border-inline-start: var(--border-width) solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--vs-shadow-glass);
position: relative;
overflow: hidden;
}
.grid-block .grid-item.card.card--feature[data-item-style="minimalist"] .card__title {
position: relative;
z-index: 1;
color: var(--text-primary);
text-shadow: var(--text-shadow-md);
}
.grid-block .grid-item.card.card--feature[data-item-style="minimalist"] .card__subtitle {
position: relative;
z-index: 1;
color: var(--text-primary);
text-shadow: var(--text-shadow-sm);
}
.grid-block .grid-item.card.card--feature[data-item-style="minimalist"] .card__description {
position: relative;
z-index: 1;
color: var(--text-secondary);
text-shadow: var(--text-shadow-sm);
}
.grid-block .grid-item.card.card--feature[data-item-style="minimalist"] .card__icon {
position: relative;
z-index: 1;
}
.grid-block .grid-item.card.card--feature[data-item-style="minimalist"]:hover {
box-shadow: var(--shadow-md);
}
.grid-block .grid-item.card.card--feature[data-item-style="minimalist"]:hover .card__title {
color: var(--text-primary);
}
.grid-block .grid-item.card.card--feature[data-item-style="brand"] {
background: var(--vs-bg);
border: var(--border-width) solid rgba(var(--color-primary-rgb), 0.15);
border-inline-start: var(--vs-accent-border);
border-radius: var(--radius-xl);
box-shadow: var(--vs-shadow);
}
.grid-block .grid-item.card.card--feature[data-item-style="brand"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="brand"] .card__subtitle {
position: relative;
z-index: 1;
color: var(--text-primary);
text-shadow: var(--text-shadow-lg);
}
.grid-block .grid-item.card.card--feature[data-item-style="brand"] .card__description {
position: relative;
z-index: 1;
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
text-shadow: var(--text-shadow-sm);
}
.grid-block .grid-item.card.card--feature[data-item-style="brand"] .card__icon {
position: relative;
z-index: 1;
}
.grid-block .grid-item.card.card--feature[data-item-style="brand"]:hover {
box-shadow: var(--vs-shadow-brand-hover);
transform: translateY(-2px);
border-inline-start-color: var(--color-primary-hover);
}
.grid-block .grid-item.card.card--feature[data-item-style="brand"]:hover .card__title {
color: var(--text-primary);
}
.grid-block .grid-item.card.card--feature[data-item-style="dark"] {
background: var(--gradient-dark);
border: var(--border-width) solid var(--border-inverse-subtle);
border-inline-start: var(--border-width) solid var(--border-inverse-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-dark-card);
}
.grid-block .grid-item.card.card--feature[data-item-style="dark"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="dark"] .card__subtitle {
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-lg);
}
.grid-block .grid-item.card.card--feature[data-item-style="dark"] .card__description {
color: var(--text-inverse-secondary);
}
.grid-block .grid-item.card.card--feature[data-item-style="dark"] .card__description p,
.grid-block .grid-item.card.card--feature[data-item-style="dark"] .card__description ul,
.grid-block .grid-item.card.card--feature[data-item-style="dark"] .card__description ol,
.grid-block .grid-item.card.card--feature[data-item-style="dark"] .card__description li,
.grid-block .grid-item.card.card--feature[data-item-style="dark"] .card__description span,
.grid-block .grid-item.card.card--feature[data-item-style="dark"] .card__description strong,
.grid-block .grid-item.card.card--feature[data-item-style="dark"] .card__description em {
color: inherit;
}
.grid-block .grid-item.card.card--feature[data-item-style="dark"] .card__icon {
color: var(--color-primary-light);
}
.grid-block .grid-item.card.card--feature[data-item-style="dark"]:hover {
box-shadow: var(--shadow-2xl);
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] {
background: var(--gradient-aurora);
background-size: 300% 300%;
animation: vsGradientShift var(--animation-aurora) ease infinite;
border: none;
border-inline-start: none;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-glow-aurora);
text-align: center;
will-change: background-position;
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] .card__subtitle {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-gradient);
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] .card__description {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-heavy);
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] .card__description p,
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] .card__description ul,
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] .card__description ol,
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] .card__description li,
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] .card__description span,
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] .card__description strong,
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] .card__description em {
color: inherit;
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] .card__icon {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient"]:hover {
box-shadow: var(--shadow-glow-aurora-hover);
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] {
background: var(--hero-bg-dark, var(--neutral-900));
border: none;
border-inline-start: none;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]::after {
border-radius: var(--radius-xl);
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] .card__subtitle {
position: relative;
z-index: 2;
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] .card__description {
position: relative;
z-index: 2;
color: var(--hero-text-dark-description, var(--text-inverse-secondary));
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] .card__description p,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] .card__description ul,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] .card__description ol,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] .card__description li,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] .card__description span,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] .card__description strong,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] .card__description em {
color: inherit;
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] .card__icon {
position: relative;
z-index: 2;
color: var(--color-highlight);
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]:hover {
box-shadow: var(--shadow-2xl);
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"] {
background: linear-gradient(
180deg,
var(--hero-bg-ultra-dark, var(--neutral-950)) 0%,
var(--hero-bg-deep-space, var(--neutral-900)) 40%,
var(--hero-bg-deep-space-end, var(--neutral-950)) 100%
);
border: none;
border-inline-start: none;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"]::before {
border-radius: var(--radius-xl);
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"] .card__subtitle {
position: relative;
z-index: 2;
text-shadow: var(--vs-aurora-title-glow);
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"] .card__description {
position: relative;
z-index: 2;
color: var(--hero-text-dark-description, var(--text-inverse-secondary));
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"] .card__description p,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"] .card__description ul,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"] .card__description ol,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"] .card__description li,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"] .card__description span,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"] .card__description strong,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"] .card__description em {
color: inherit;
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"] .card__icon {
position: relative;
z-index: 2;
color: var(--color-secondary);
}
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"]:hover {
box-shadow: var(--shadow-2xl);
}
.grid-block .grid-item--article:is([data-item-style="default"], [data-item-style="light"], [data-item-style="minimalist"], [data-item-style="brand"], [data-item-style="dark"], [data-item-style="gradient"], [data-item-style="liquid-glass"]) .grid-item__article-title {
-webkit-text-fill-color: unset;
-webkit-background-clip: unset;
background-clip: unset;
background: none;
animation: none;
text-shadow: none;
}
.grid-block .grid-item--article[data-item-style] .grid-item__article-excerpt {
text-shadow: none;
-webkit-text-fill-color: unset;
}
.grid-block .grid-item--article[data-item-style] .grid-item__article-category {
-webkit-text-fill-color: unset;
}
.grid-block .grid-item--article[data-item-style="default"] {
background: transparent;
color: var(--text-primary);
border: var(--border-width) solid var(--border-subtle);
border-inline-start: var(--border-width) solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: none;
}
.grid-block .grid-item--article[data-item-style="default"]::before {
display: none;
}
.grid-block .grid-item--article[data-item-style="default"] .grid-item__article-title {
color: var(--text-primary);
text-shadow: var(--text-shadow-md);
}
.grid-block .grid-item--article[data-item-style="default"] .grid-item__article-excerpt {
color: var(--text-secondary);
}
.grid-block .grid-item--article[data-item-style="default"] .grid-item__article-category {
color: var(--color-primary-text);
}
.grid-block .grid-item--article[data-item-style="default"]:hover .grid-item__article-title {
color: var(--text-primary);
}
.grid-block .grid-item--article[data-item-style="light"] {
background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
color: var(--text-primary);
border: var(--border-width) solid var(--border-subtle);
border-inline-start: var(--border-width) solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
.grid-block .grid-item--article[data-item-style="light"]::before {
display: none;
}
.grid-block .grid-item--article[data-item-style="light"] .grid-item__article-title {
color: var(--text-primary);
text-shadow: var(--text-shadow-md);
}
.grid-block .grid-item--article[data-item-style="light"] .grid-item__article-excerpt {
color: var(--hero-text-light-description);
text-shadow: var(--text-shadow-sm);
}
.grid-block .grid-item--article[data-item-style="light"] .grid-item__article-category {
color: var(--color-primary-text);
}
.grid-block .grid-item--article[data-item-style="light"]:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.grid-block .grid-item--article[data-item-style="light"]:hover .grid-item__article-title {
color: var(--text-primary);
}
.grid-block .grid-item--article[data-item-style="minimalist"] {
background: var(--vs-bg-glass);
backdrop-filter: var(--vs-backdrop-glass);
-webkit-backdrop-filter: var(--vs-backdrop-glass);
border: var(--border-width) solid var(--border-subtle);
border-inline-start: var(--border-width) solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--vs-shadow-glass);
position: relative;
overflow: hidden;
}
.grid-block .grid-item--article[data-item-style="minimalist"] .grid-item__article-title {
position: relative;
z-index: 1;
color: var(--text-primary);
text-shadow: var(--text-shadow-md);
}
.grid-block .grid-item--article[data-item-style="minimalist"] .grid-item__article-excerpt {
position: relative;
z-index: 1;
color: var(--text-secondary);
text-shadow: var(--text-shadow-sm);
}
.grid-block .grid-item--article[data-item-style="minimalist"] .grid-item__article-category {
position: relative;
z-index: 1;
color: var(--color-primary-text);
}
.grid-block .grid-item--article[data-item-style="minimalist"]:hover {
box-shadow: var(--shadow-md);
}
.grid-block .grid-item--article[data-item-style="minimalist"]:hover .grid-item__article-title {
color: var(--text-primary);
}
.grid-block .grid-item--article[data-item-style="brand"] {
background: var(--vs-bg);
border: var(--border-width) solid rgba(var(--color-primary-rgb), 0.15);
border-inline-start: var(--vs-accent-border);
border-radius: var(--radius-xl);
box-shadow: var(--vs-shadow);
position: relative;
overflow: hidden;
}
.grid-block .grid-item--article[data-item-style="brand"] .grid-item__article-title {
position: relative;
z-index: 1;
color: var(--text-primary);
text-shadow: var(--text-shadow-lg);
}
.grid-block .grid-item--article[data-item-style="brand"] .grid-item__article-excerpt {
position: relative;
z-index: 1;
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
text-shadow: var(--text-shadow-sm);
}
.grid-block .grid-item--article[data-item-style="brand"] .grid-item__article-category {
position: relative;
z-index: 1;
color: var(--color-primary-text);
}
.grid-block .grid-item--article[data-item-style="brand"]:hover {
box-shadow: var(--vs-shadow-brand-hover);
transform: translateY(-2px);
border-inline-start-color: var(--color-primary-hover);
}
.grid-block .grid-item--article[data-item-style="brand"]:hover .grid-item__article-title {
color: var(--text-primary);
}
.grid-block .grid-item--article[data-item-style="dark"] {
background: var(--gradient-dark);
border: var(--border-width) solid var(--border-inverse-subtle);
border-inline-start: var(--border-width) solid var(--border-inverse-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-dark-card);
position: relative;
overflow: hidden;
}
.grid-block .grid-item--article[data-item-style="dark"] .grid-item__article-title {
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-lg);
}
.grid-block .grid-item--article[data-item-style="dark"] .grid-item__article-excerpt {
color: var(--hero-text-dark-description, var(--text-inverse-secondary));
}
.grid-block .grid-item--article[data-item-style="dark"] .grid-item__article-category {
color: var(--color-primary-light);
}
.grid-block .grid-item--article[data-item-style="dark"]:hover {
box-shadow: var(--shadow-2xl);
}
.grid-block .grid-item--article[data-item-style="gradient"] {
background: var(--gradient-aurora);
background-size: 300% 300%;
animation: vsGradientShift var(--animation-aurora) ease infinite;
border: none;
border-inline-start: none;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-glow-aurora);
text-align: center;
position: relative;
overflow: hidden;
will-change: background-position;
}
.grid-block .grid-item--article[data-item-style="gradient"] .grid-item__article-title {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-gradient);
}
.grid-block .grid-item--article[data-item-style="gradient"] .grid-item__article-excerpt {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-heavy);
}
.grid-block .grid-item--article[data-item-style="gradient"] .grid-item__article-category {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
}
.grid-block .grid-item--article[data-item-style="gradient"]:hover {
box-shadow: var(--shadow-glow-aurora-hover);
}
.grid-block .grid-item--article[data-item-style="gradient-mesh"] {
background: var(--hero-bg-dark, var(--neutral-900));
border: none;
border-inline-start: none;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
position: relative;
overflow: hidden;
}
.grid-block .grid-item--article[data-item-style="gradient-mesh"]::after {
border-radius: var(--radius-xl);
}
.grid-block .grid-item--article[data-item-style="gradient-mesh"] .grid-item__article-title {
position: relative;
z-index: 2;
}
.grid-block .grid-item--article[data-item-style="gradient-mesh"] .grid-item__article-excerpt {
position: relative;
z-index: 2;
color: var(--hero-text-dark-description, var(--text-inverse-secondary));
}
.grid-block .grid-item--article[data-item-style="gradient-mesh"] .grid-item__article-category {
position: relative;
z-index: 2;
color: var(--color-primary-light);
}
.grid-block .grid-item--article[data-item-style="gradient-mesh"]:hover {
box-shadow: var(--shadow-2xl);
}
.grid-block .grid-item--article[data-item-style="gradient-aurora"] {
background: linear-gradient(
180deg,
var(--hero-bg-ultra-dark, var(--neutral-950)) 0%,
var(--hero-bg-deep-space, var(--neutral-900)) 40%,
var(--hero-bg-deep-space-end, var(--neutral-950)) 100%
);
border: none;
border-inline-start: none;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
position: relative;
overflow: hidden;
}
.grid-block .grid-item--article[data-item-style="gradient-aurora"]::before {
border-radius: var(--radius-xl);
}
.grid-block .grid-item--article[data-item-style="gradient-aurora"] .grid-item__article-title {
position: relative;
z-index: 2;
text-shadow: var(--vs-aurora-title-glow);
}
.grid-block .grid-item--article[data-item-style="gradient-aurora"] .grid-item__article-excerpt {
position: relative;
z-index: 2;
color: var(--hero-text-dark-description, var(--text-inverse-secondary));
}
.grid-block .grid-item--article[data-item-style="gradient-aurora"] .grid-item__article-category {
position: relative;
z-index: 2;
color: var(--color-primary-light);
}
.grid-block .grid-item--article[data-item-style="gradient-aurora"]:hover {
box-shadow: var(--shadow-2xl);
}
.grid-block[data-visual-style] .grid-item.card.card--feature .card__footer,
.grid-block .grid-item.card.card--feature[data-item-style] .card__footer {
position: relative;
z-index: 2;
}
.carousel-block .carousel-slide[data-slide-style="default"] {
position: relative;
background: transparent;
color: var(--text-primary);
border: var(--border-width) solid var(--border-subtle);
box-shadow: none;
}
.carousel-block .carousel-slide[data-slide-style="default"]::before {
display: none;
}
.carousel-block .carousel-slide[data-slide-style="default"] .carousel-slide__title {
color: var(--text-primary);
text-shadow: var(--text-shadow-md);
}
.carousel-block .carousel-slide[data-slide-style="default"] .lexical-content {
--lexical-color: var(--text-secondary);
--lexical-heading-color: var(--text-primary);
--lexical-link-color: var(--color-primary-text);
--lexical-quote-color: var(--text-secondary);
--lexical-strong-color: var(--text-primary);
color: var(--text-secondary);
text-shadow: var(--text-shadow-sm);
}
.carousel-block .carousel-slide[data-slide-style="default"]:hover .carousel-slide__title {
color: var(--text-primary);
}
.carousel-block .carousel-slide[data-slide-style="light"] {
position: relative;
background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
color: var(--hero-text-light-title);
border: var(--border-width) solid var(--border-subtle);
box-shadow: var(--shadow-md);
}
.carousel-block .carousel-slide[data-slide-style="light"]::before {
display: none;
}
.carousel-block .carousel-slide[data-slide-style="light"] .carousel-slide__title {
color: var(--text-primary);
}
.carousel-block .carousel-slide[data-slide-style="light"] .lexical-content {
--lexical-color: var(--hero-text-light-description);
--lexical-heading-color: var(--text-primary);
--lexical-link-color: var(--color-primary-text);
--lexical-quote-color: var(--hero-text-light-description);
--lexical-strong-color: var(--text-primary);
color: var(--hero-text-light-description);
}
.carousel-block .carousel-slide[data-slide-style="light"]:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.carousel-block .carousel-slide[data-slide-style="light"]:hover .carousel-slide__title {
color: var(--text-primary);
}
.carousel-block .carousel-slide[data-slide-style="minimalist"] {
--vs-bg-glass: rgba(255, 255, 255, 0.7);
--vs-backdrop-glass: blur(12px);
--vs-shadow-glass: 0 4px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
position: relative;
background: var(--vs-bg-glass);
backdrop-filter: var(--vs-backdrop-glass);
-webkit-backdrop-filter: var(--vs-backdrop-glass);
border: var(--border-width) solid var(--border-subtle);
box-shadow: var(--vs-shadow-glass);
overflow: hidden;
}
.carousel-block .carousel-slide[data-slide-style="minimalist"] .carousel-slide__title {
position: relative;
z-index: 1;
color: var(--text-primary);
}
.carousel-block .carousel-slide[data-slide-style="minimalist"] .lexical-content {
--lexical-color: var(--text-secondary);
--lexical-heading-color: var(--text-primary);
--lexical-link-color: var(--color-primary-text);
--lexical-quote-color: var(--text-secondary);
--lexical-strong-color: var(--text-primary);
color: var(--text-secondary);
}
.carousel-block .carousel-slide[data-slide-style="minimalist"]:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.carousel-block .carousel-slide[data-slide-style="brand"] {
position: relative;
background: var(--vs-bg);
border: var(--vs-border-width) solid var(--vs-border);
border-inline-start: var(--vs-accent-border);
box-shadow: var(--vs-shadow);
}
.carousel-block .carousel-slide[data-slide-style="brand"] .carousel-slide__title {
position: relative;
z-index: 1;
color: var(--text-primary);
text-shadow: var(--text-shadow-lg);
}
.carousel-block .carousel-slide[data-slide-style="brand"] .lexical-content {
--lexical-color: var(--text-secondary);
--lexical-heading-color: var(--text-primary);
--lexical-link-color: var(--color-primary-text);
--lexical-quote-color: var(--text-secondary);
--lexical-strong-color: var(--text-primary);
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
}
.carousel-block .carousel-slide[data-slide-style="brand"]:hover {
box-shadow: var(--vs-shadow-brand-hover);
transform: translateY(-2px);
border-inline-start-color: var(--color-primary-hover);
}
.carousel-block .carousel-slide[data-slide-style="dark"] {
position: relative;
background: var(--gradient-dark);
border: var(--border-width) solid var(--border-inverse-subtle);
box-shadow: var(--shadow-dark-card);
color: var(--text-inverse-primary);
}
.carousel-block .carousel-slide[data-slide-style="dark"] .carousel-slide__title {
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-lg);
}
.carousel-block .carousel-slide[data-slide-style="dark"] .lexical-content {
--lexical-color: var(--text-inverse-primary);
--lexical-heading-color: var(--text-inverse-primary);
--lexical-link-color: var(--color-primary-light);
--lexical-quote-color: var(--text-inverse-primary);
--lexical-strong-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
.carousel-block .carousel-slide[data-slide-style="dark"] .carousel-slide__cta,
.carousel-block .carousel-slide[data-slide-style="dark"] .lexical-content {
position: relative;
z-index: 1;
}
.carousel-block .carousel-slide[data-slide-style="dark"]:hover {
box-shadow: var(--shadow-2xl);
}
.carousel-block .carousel-slide[data-slide-style="gradient"] {
position: relative;
background: var(--gradient-aurora);
background-size: 300% 300%;
animation: vsGradientShift var(--animation-aurora) ease infinite;
border: var(--border-width) solid rgba(255, 255, 255, 0.2);
box-shadow: var(--shadow-lg);
color: var(--text-inverse-primary);
overflow: hidden;
will-change: background-position;
}
.carousel-block .carousel-slide[data-slide-style="gradient"] .carousel-slide__title {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-gradient);
}
.carousel-block .carousel-slide[data-slide-style="gradient"] .lexical-content {
--lexical-color: var(--text-inverse-primary);
--lexical-heading-color: var(--text-inverse-primary);
--lexical-link-color: var(--color-primary-light);
--lexical-quote-color: var(--text-inverse-primary);
--lexical-strong-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
.carousel-block .carousel-slide[data-slide-style="gradient"] .carousel-slide__cta,
.carousel-block .carousel-slide[data-slide-style="gradient"] .lexical-content {
position: relative;
z-index: 1;
}
.carousel-block .carousel-slide[data-slide-style="gradient"]:hover {
box-shadow: var(--shadow-xl);
}
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"] {
position: relative;
background: var(--vs-bg);
border: var(--vs-border-width) solid var(--vs-border);
box-shadow: var(--vs-shadow);
color: var(--text-inverse-primary);
overflow: hidden;
}
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"]::after {
display: block;
border-radius: var(--radius-xl);
}
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"] .carousel-slide__title {
position: relative;
z-index: 2;
}
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"] .lexical-content {
--lexical-color: var(--text-inverse-primary);
--lexical-heading-color: var(--text-inverse-primary);
--lexical-link-color: var(--color-primary-light);
--lexical-quote-color: var(--text-inverse-primary);
--lexical-strong-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"] .carousel-slide__cta,
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"] .lexical-content {
position: relative;
z-index: 2;
}
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"]:hover {
box-shadow: var(--shadow-2xl);
}
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"] {
position: relative;
background: var(--vs-bg);
border: var(--vs-border-width) solid var(--vs-border);
box-shadow: var(--vs-shadow);
color: var(--text-inverse-primary);
overflow: hidden;
}
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"]::before {
display: block;
border-radius: var(--radius-xl);
}
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"] .carousel-slide__title {
position: relative;
z-index: 2;
text-shadow: var(--vs-aurora-title-glow);
}
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"] .lexical-content {
--lexical-color: var(--text-inverse-primary);
--lexical-heading-color: var(--text-inverse-primary);
--lexical-link-color: var(--color-primary-light);
--lexical-quote-color: var(--text-inverse-primary);
--lexical-strong-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"] .carousel-slide__cta,
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"] .lexical-content {
position: relative;
z-index: 2;
}
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"]:hover {
box-shadow: var(--shadow-2xl);
}
.carousel-block .carousel-slide[data-slide-style="gradient"] .carousel-slide__article-title {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"] .carousel-slide__article-title {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"] .carousel-slide__article-title {
position: relative;
z-index: 2;
text-shadow: var(--vs-aurora-title-glow);
}
.carousel-block .carousel-slide[data-slide-style="dark"] .carousel-slide__article-title {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-md);
}
.carousel-block .carousel-slide[data-slide-style="light"] .carousel-slide__article-title {
position: relative;
z-index: 1;
color: var(--hero-text-light-title);
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
background-clip: unset;
animation: none;
text-shadow: var(--text-shadow-md);
}
.carousel-block .carousel-slide[data-slide-style="minimalist"] .carousel-slide__article-title {
position: relative;
z-index: 1;
color: var(--text-primary);
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
background-clip: unset;
animation: none;
text-shadow: var(--text-shadow-md);
}
.carousel-block .carousel-slide[data-slide-style="brand"] .carousel-slide__article-title {
position: relative;
z-index: 1;
color: var(--text-primary);
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
background-clip: unset;
animation: none;
text-shadow: var(--text-shadow-md);
}
@media (prefers-reduced-motion: reduce) {
[data-visual-style="gradient"],
[data-visual-style="gradient-mesh"],
[data-visual-style="gradient-aurora"] {
animation: none !important;
}
[data-visual-style] *,
[data-visual-style]::before,
[data-visual-style]::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.hero.hero[data-visual-style="light"]::after {
animation: none;
}
.hero.hero[data-visual-style="gradient"]::after {
animation: none;
}
.hero.hero[data-visual-style="gradient-mesh"]::before,
.hero.hero[data-visual-style="gradient-mesh"]::after,
.hero.hero[data-visual-style="gradient-mesh"] .hero__mesh-orb {
animation: none;
}
.hero.hero[data-visual-style="gradient-aurora"] .hero__aurora-layer,
.hero.hero[data-visual-style="gradient-aurora"]::after {
animation: none;
}
.hero.hero[data-visual-style="gradient-mesh"] .hero__title {
animation: none;
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
.hero.hero[data-visual-style="gradient-aurora"] .hero__title {
animation: none;
}
.banner.banner[data-visual-style="gradient"]::after {
animation: none;
}
.banner.banner[data-visual-style="gradient-mesh"]::before,
.banner.banner[data-visual-style="gradient-mesh"]::after,
.banner.banner[data-visual-style="gradient-mesh"] .banner__mesh-orb {
animation: none;
}
.banner.banner[data-visual-style="gradient-mesh"] .banner__title {
animation: none;
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
.banner.banner[data-visual-style="gradient-aurora"] .banner__aurora-layer {
animation: none;
}
.banner.banner[data-visual-style="gradient-aurora"] .banner__title {
animation: none;
}
.grid-block .grid-item.card.card--feature {
transition: none;
}
.grid-block .grid-item.card.card--feature:hover {
transform: none;
}
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature,
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] {
animation: none;
}
.grid-block[data-visual-style="gradient-mesh"] .card__title,
.grid-block[data-visual-style="gradient-aurora"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"] .card__title {
animation: none;
}
.grid-block[data-visual-style="gradient-mesh"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"] .card__title {
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
.grid-item--article {
transition: none;
}
.grid-item--article:hover {
transform: none;
}
.grid-item__article-media,
.grid-item__article-image {
transition: none;
}
.grid-item--article:hover .grid-item__article-media {
transform: none;
}
.grid-item--article:hover .grid-item__article-image {
transform: none;
}
.grid-block[data-visual-style="gradient"] .grid-item--article,
.grid-block .grid-item--article[data-item-style="gradient"] {
animation: none;
}
.grid-block .grid-item--article[data-item-style="gradient-mesh"] .grid-item__article-title,
.grid-block .grid-item--article[data-item-style="gradient-aurora"] .grid-item__article-title {
animation: none;
}
.grid-block[data-visual-style="gradient-mesh"] .grid-item__article-title,
.grid-block .grid-item--article[data-item-style="gradient-mesh"] .grid-item__article-title {
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
.carousel-block[data-visual-style] .carousel-slide::before,
.carousel-block[data-visual-style] .carousel-slide::after {
animation: none !important;
}
.carousel-block[data-visual-style] .carousel-slide__title {
animation: none !important;
}
.carousel-block[data-visual-style] .carousel-slide {
transition: none;
}
.carousel-block .carousel-slide[data-slide-style]::before,
.carousel-block .carousel-slide[data-slide-style]::after,
.carousel-block .carousel-slide[data-slide-style] .carousel-slide__title {
animation: none !important;
}
.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide__article-title,
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"] .carousel-slide__article-title,
.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide__article-title,
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"] .carousel-slide__article-title {
animation: none;
}
.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide__article-title,
.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide__article-title,
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"] .carousel-slide__article-title,
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"] .carousel-slide__article-title {
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide__title,
.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide__title,
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"] .carousel-slide__title,
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"] .carousel-slide__title {
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
.tabs.tabs[data-visual-style="light"] .tabs__panels:hover {
transform: none;
}
.tabs.tabs[data-visual-style="minimalist"] .tabs__panels:hover {
transform: none;
}
.tabs.tabs[data-visual-style="gradient"] .tabs__button--active {
animation: none;
background-size: 100% 100%;
}
.tabs.tabs[data-visual-style="gradient"] .tabs__panels:hover {
transform: none;
}
.tabs.tabs[data-visual-style="gradient-mesh"] .tabs__button--active {
animation: none;
background-size: 100% 100%;
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
.tabs.tabs[data-visual-style="gradient-mesh"] .tabs__panels::before,
.tabs.tabs[data-visual-style="gradient-mesh"] .tabs__panels::after {
animation: none;
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__button--active {
animation: none;
background-size: 100% 100%;
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
:is(
.hero.hero[data-visual-style="pearl"] .hero__title,
.hero.hero[data-visual-style="pearl-vivid"] .hero__title,
.hero.hero[data-visual-style="holographic"] .hero__title,
.banner.banner[data-visual-style="pearl"] .banner__title,
.banner.banner[data-visual-style="pearl-vivid"] .banner__title,
.banner.banner[data-visual-style="holographic"] .banner__title,
.grid-block[data-visual-style="pearl"] .grid-item.card.card--feature .card__title,
.grid-block[data-visual-style="pearl-vivid"] .grid-item.card.card--feature .card__title,
.grid-block[data-visual-style="holographic"] .grid-item.card.card--feature .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="pearl"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="pearl-vivid"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="holographic"] .card__title,
.grid-block[data-visual-style="pearl"] .grid-item__article-title,
.grid-block[data-visual-style="holographic"] .grid-item__article-title,
.grid-block .grid-item--article[data-item-style="pearl"] .grid-item__article-title,
.grid-block .grid-item--article[data-item-style="holographic"] .grid-item__article-title,
.carousel-block[data-visual-style="pearl"] .carousel-slide__title,
.carousel-block[data-visual-style="pearl-vivid"] .carousel-slide__title,
.carousel-block[data-visual-style="holographic"] .carousel-slide__title,
.carousel-block .carousel-slide[data-slide-style="pearl"] .carousel-slide__title,
.carousel-block .carousel-slide[data-slide-style="pearl-vivid"] .carousel-slide__title,
.carousel-block .carousel-slide[data-slide-style="holographic"] .carousel-slide__title,
.carousel-block[data-visual-style="pearl"] .carousel-slide__article-title,
.carousel-block[data-visual-style="holographic"] .carousel-slide__article-title,
.carousel-block .carousel-slide[data-slide-style="pearl"] .carousel-slide__article-title,
.carousel-block .carousel-slide[data-slide-style="holographic"] .carousel-slide__article-title,
.spotlight[data-visual-style="pearl"] .spotlight__card-title,
.spotlight[data-visual-style="pearl"] .spotlight__panel-title,
.spotlight[data-visual-style="pearl-vivid"] .spotlight__card-title,
.spotlight[data-visual-style="pearl-vivid"] .spotlight__panel-title,
.spotlight[data-visual-style="holographic"] .spotlight__card-title,
.spotlight[data-visual-style="holographic"] .spotlight__panel-title,
.timeline[data-visual-style="pearl"] .timeline__step-title,
.timeline[data-visual-style="pearl-vivid"] .timeline__step-title,
.timeline[data-visual-style="holographic"] .timeline__step-title
) {
animation: none;
background: none;
-webkit-text-fill-color: var(--hero-text-light-title);
color: var(--hero-text-light-title);
}
:is(
.spotlight[data-visual-style="gradient-mesh"] .spotlight__card-title,
.spotlight[data-visual-style="gradient-mesh"] .spotlight__panel-title,
.spotlight[data-visual-style="gradient-aurora"] .spotlight__card-title,
.spotlight[data-visual-style="gradient-aurora"] .spotlight__panel-title,
.timeline[data-visual-style="gradient-mesh"] .timeline__step-title,
.timeline[data-visual-style="gradient-aurora"] .timeline__step-title
) {
animation: none;
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
:is(
.hero.hero[data-visual-style="holographic-vivid"] .hero__title,
.banner.banner[data-visual-style="holographic-vivid"] .banner__title,
.grid-block[data-visual-style="holographic-vivid"] .grid-item.card.card--feature .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="holographic-vivid"] .card__title,
.grid-block[data-visual-style="holographic-vivid"] .grid-item__article-title,
.grid-block .grid-item--article[data-item-style="holographic-vivid"] .grid-item__article-title,
.carousel-block[data-visual-style="holographic-vivid"] .carousel-slide__title,
.carousel-block .carousel-slide[data-slide-style="holographic-vivid"] .carousel-slide__title,
.carousel-block[data-visual-style="holographic-vivid"] .carousel-slide__article-title,
.carousel-block .carousel-slide[data-slide-style="holographic-vivid"] .carousel-slide__article-title,
.spotlight[data-visual-style="holographic-vivid"] .spotlight__card-title,
.spotlight[data-visual-style="holographic-vivid"] .spotlight__panel-title,
.timeline[data-visual-style="holographic-vivid"] .timeline__step-title
) {
animation: none;
background: none;
-webkit-text-fill-color: var(--vs-hv-text-primary, var(--text-inverse-primary));
color: var(--vs-hv-text-primary, var(--text-inverse-primary));
}
:is(
.hero.hero[data-visual-style="liquid-glass-vivid"] .hero__title,
.banner.banner[data-visual-style="liquid-glass-vivid"] .banner__title,
.grid-block[data-visual-style="liquid-glass-vivid"] .grid-item.card.card--feature .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="liquid-glass-vivid"] .card__title,
.grid-block[data-visual-style="liquid-glass-vivid"] .grid-item__article-title,
.grid-block .grid-item--article[data-item-style="liquid-glass-vivid"] .grid-item__article-title,
.carousel-block[data-visual-style="liquid-glass-vivid"] .carousel-slide__title,
.carousel-block .carousel-slide[data-slide-style="liquid-glass-vivid"] .carousel-slide__title,
.carousel-block[data-visual-style="liquid-glass-vivid"] .carousel-slide__article-title,
.carousel-block .carousel-slide[data-slide-style="liquid-glass-vivid"] .carousel-slide__article-title,
.spotlight[data-visual-style="liquid-glass-vivid"] .spotlight__card-title,
.spotlight[data-visual-style="liquid-glass-vivid"] .spotlight__panel-title,
.timeline[data-visual-style="liquid-glass-vivid"] .timeline__step-title
) {
animation: none;
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
}
@media (prefers-reduced-motion: reduce) {
.header-master[data-visual-style] {
transition: none;
}
.header-master[data-visual-style="gradient"] {
animation: none;
}
.header-master[data-visual-style="gradient-mesh"]::before,
.header-master[data-visual-style="gradient-mesh"]::after {
animation: none;
}
.header-master[data-visual-style="gradient-mesh"] .nav-item,
.header-master[data-visual-style="gradient-mesh"] .logo-wrapper a {
animation: none;
background: var(--color-primary-light);
-webkit-text-fill-color: var(--color-primary-light);
}
.header-master[data-visual-style="gradient-mesh"] .logo-wrapper a:has(> .logo-image) {
-webkit-background-clip: initial;
-webkit-text-fill-color: initial;
background-clip: initial;
background: none;
color: var(--text-inverse-primary);
}
.header-master[data-visual-style="gradient-aurora"]::after {
animation: none;
}
.header-master[data-visual-style="gradient-aurora"] .nav-item,
.header-master[data-visual-style="gradient-aurora"] .logo-wrapper a {
animation: none;
background: var(--neutral-50);
-webkit-text-fill-color: var(--neutral-50);
}
.header-master[data-visual-style="gradient-aurora"] .logo-wrapper a:has(> .logo-image) {
-webkit-background-clip: initial;
-webkit-text-fill-color: initial;
background-clip: initial;
background: none;
color: var(--text-inverse-primary);
}
}
@media (max-width: 768px) {
.hero.hero[data-visual-style="gradient-mesh"] {
--_mesh-orb-block-start: -10%;
--_mesh-orb-inline-start: -10%;
--_mesh-orb-inline-size: 80%;
--_mesh-orb-block-size: 80%;
--_mesh-orb-filter: var(--blur-decorative);
}
.hero.hero[data-visual-style="gradient-mesh"]::after {
filter: var(--blur-decorative-md);
background:
radial-gradient(
ellipse 50% 60% at 90% 10%,
rgba(var(--color-accent-rgb), 0.4) 0%,
rgba(var(--color-accent-rgb), 0.15) 40%,
transparent 70%
),
radial-gradient(
ellipse 60% 55% at 85% 90%,
rgba(var(--color-secondary-rgb), 0.45) 0%,
rgba(var(--color-secondary-rgb), 0.2) 40%,
transparent 70%
);
}
.hero.hero[data-visual-style="gradient-aurora"]::after {
inset-block-start: -20%;
inset-inline-start: -10%;
inline-size: 120%;
block-size: 100%;
filter: var(--blur-decorative-md);
background:
radial-gradient(
ellipse 90% 40% at 30% 15%,
rgba(var(--color-primary-rgb), 0.45) 0%,
rgba(var(--color-primary-rgb), 0.15) 40%,
transparent 70%
),
radial-gradient(
ellipse 80% 35% at 70% 30%,
rgba(var(--color-secondary-rgb), 0.4) 0%,
rgba(var(--color-secondary-rgb), 0.1) 45%,
transparent 70%
),
radial-gradient(
ellipse 100% 30% at 50% 50%,
rgba(var(--color-accent-rgb), 0.3) 0%,
rgba(var(--color-accent-rgb), 0.08) 50%,
transparent 75%
);
}
.hero.hero[data-visual-style="gradient-aurora"] .hero__aurora-layer {
filter: var(--blur-decorative-xl);
}
.banner.banner[data-visual-style="gradient-mesh"] {
--_mesh-orb-filter: var(--blur-decorative-md);
}
.banner.banner[data-visual-style="gradient-mesh"]::after {
filter: var(--blur-decorative-md);
}
.banner.banner[data-visual-style="gradient-aurora"] .banner__aurora-layer {
filter: var(--blur-decorative-md);
}
}
@media (max-width: 767px) {
.grid-item__article-excerpt {
font-size: var(--text-xs);
}
}
@media (min-width: 768px) {
.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide::before {
filter: blur(50px);
}
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"] {
--_mesh-orb-filter: blur(50px);
}
.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide::after,
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"]::after {
filter: blur(40px);
}
.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide::after,
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"]::after {
filter: blur(30px);
}
}
@media (hover: none) {
.tabs.tabs:is([data-visual-style="light"], [data-visual-style="minimalist"]) .tabs__panels:hover {
transform: none;
}
}
@media (max-width: 1023px) {
.header-master--height-xl .header-content {
min-height: var(--header-height-xl-mobile);
}
}
:is(
.grid-block[data-visual-style="dark"] .grid-item.card.card--feature,
.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature,
.grid-block[data-visual-style="gradient-aurora"] .grid-item.card.card--feature,
.grid-block .grid-item.card.card--feature[data-item-style="dark"],
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"],
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"]
) {
color: var(--text-inverse-primary);
}