.tabs.tabs:is(
[data-visual-style="strong"],
[data-visual-style="pearl"],
[data-visual-style="holographic"],
[data-visual-style="smoked-glass"],
[data-visual-style="frosted-glass"]
) .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(--ink-brand);
}
.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(--ink-brand);
}
.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="holographic"] .tabs__button:hover:not(.tabs__button--active) {
background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
color: var(--ink-brand-secondary);
}
.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="smoked-glass"] .tabs__button:hover:not(.tabs__button--active) {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--ink-brand);
}
.tabs.tabs[data-visual-style="smoked-glass"] .tabs__button--active {
background: linear-gradient(
180deg,
color-mix(in oklab, var(--color-primary) 52%, var(--neutral-950))   0%,
color-mix(in oklab, var(--color-primary) 32%, var(--neutral-950)) 100%
);
color: var(--text-inverse-primary);
box-shadow:
var(--shadow-md),
inset 0 1px 0 rgb(255 255 255 / .22),
inset 0 -18px 26px rgba(var(--neutral-950-rgb), 0.30);
}
.tabs.tabs[data-visual-style="frosted-glass"] .tabs__button:hover:not(.tabs__button--active) {
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
color: var(--ink-brand-accent);
}
.tabs.tabs[data-visual-style="frosted-glass"] .tabs__button--active {
background: linear-gradient(
158deg,
color-mix(in oklab, var(--color-accent)  30%, var(--color-white))  0%,
color-mix(in oklab, var(--color-primary) 22%, 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="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[data-visual-style="dark-brand"] .tabs__button:hover:not(.tabs__button--active) {
background:
linear-gradient(158deg, var(--shine-light) 0%, transparent 38%),
color-mix(in srgb, var(--color-primary) 32%, var(--neutral-950));
color: var(--text-inverse-primary);
}
.tabs.tabs[data-visual-style="dark-brand"] .tabs__button--active {
background:
linear-gradient(158deg, var(--shine-medium-plus) 0%, transparent 38%),
linear-gradient(135deg,
color-mix(in oklab, var(--color-primary)   46%, var(--neutral-950))  0%,
color-mix(in oklab, var(--color-accent)    42%, var(--neutral-950)) 45%,
color-mix(in oklab, var(--color-secondary) 32%, 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="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="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="smoked-glass"] .tabs__button--active {
background: linear-gradient(
180deg,
color-mix(in oklab, var(--color-primary) 52%, var(--neutral-950))   0%,
color-mix(in oklab, var(--color-primary) 32%, var(--neutral-950)) 100%
);
color: var(--text-inverse-primary);
box-shadow:
var(--shadow-sm),
inset 0 1px 0 rgb(255 255 255 / .22),
inset 0 -18px 26px rgba(var(--neutral-950-rgb), 0.30);
}
.tabs.tabs.tabs--pills[data-visual-style="frosted-glass"] .tabs__button--active {
background: linear-gradient(
158deg,
color-mix(in oklab, var(--color-accent)  30%, var(--color-white))  0%,
color-mix(in oklab, var(--color-primary) 22%, 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="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);
}
.tabs.tabs.tabs--pills[data-visual-style="dark-brand"] .tabs__button--active {
background:
linear-gradient(158deg, var(--shine-medium-plus) 0%, transparent 38%),
linear-gradient(135deg,
color-mix(in oklab, var(--color-primary)   46%, var(--neutral-950))  0%,
color-mix(in oklab, var(--color-accent)    42%, var(--neutral-950)) 45%,
color-mix(in oklab, var(--color-secondary) 32%, var(--neutral-950)) 100%);
color: var(--text-inverse-primary);
box-shadow:
var(--shadow-dark-card),
inset 0 1px 0 var(--shine-medium-plus);
}
: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.tabs.tabs--underline[data-visual-style="dark-brand"]
) .tabs__button::after {
background: var(--color-primary);
}
.tabs.tabs.tabs--underline[data-visual-style="smoked-glass"] .tabs__button::after {
background: var(--color-primary);
}
.tabs.tabs.tabs--underline[data-visual-style="frosted-glass"] .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="dark-brand"]
) .tabs__button:hover:not(.tabs__button--active) {
background: transparent;
color: var(--ink-brand);
}
:is(
.hero.hero[data-visual-style="pearl"],
.hero.hero[data-visual-style="holographic"],
.banner.banner[data-visual-style="pearl"],
.banner.banner[data-visual-style="holographic"],
.tabs.tabs[data-visual-style="pearl"],
.tabs.tabs[data-visual-style="holographic"],
.carousel-block[data-visual-style="pearl"] .carousel-slide:not([data-slide-style]),
.carousel-block[data-visual-style="holographic"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="pearl"],
.carousel-block .carousel-slide[data-slide-style="holographic"],
.grid-block[data-visual-style="pearl"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block[data-visual-style="holographic"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="pearl"],
.grid-block .grid-item.card.card--feature[data-item-style="holographic"],
.spotlight[data-visual-style="pearl"],
.spotlight[data-visual-style="holographic"],
.timeline[data-visual-style="pearl"],
:is(.testimonial, .bento)[data-visual-style="pearl"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="pearl"],
.timeline[data-visual-style="holographic"],
:is(.testimonial, .bento)[data-visual-style="holographic"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="holographic"],
.bento[data-visual-style="pearl"] .bento__tile.card.card--feature:not([data-item-style]),
.bento[data-visual-style="holographic"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="pearl"],
.bento .bento__tile.card.card--feature[data-item-style="holographic"],
.hero.hero[data-visual-style="frosted-glass"],
.banner.banner[data-visual-style="frosted-glass"],
.tabs.tabs[data-visual-style="frosted-glass"],
.carousel-block[data-visual-style="frosted-glass"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="frosted-glass"],
.grid-block[data-visual-style="frosted-glass"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="frosted-glass"],
.spotlight[data-visual-style="frosted-glass"],
.timeline[data-visual-style="frosted-glass"],
:is(.testimonial, .bento)[data-visual-style="frosted-glass"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="frosted-glass"],
.bento[data-visual-style="frosted-glass"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="frosted-glass"]
) :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,
.testimonial__quote
) {
--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-slide:not([data-slide-style]),
.carousel-block[data-visual-style="velvet"] .carousel-slide:not([data-slide-style]),
.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:not([data-item-style]),
.grid-block[data-visual-style="velvet"] .grid-item.card.card--feature:not([data-item-style]),
.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"],
:is(.testimonial, .bento)[data-visual-style="lacquer"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="lacquer"],
.timeline[data-visual-style="velvet"],
:is(.testimonial, .bento)[data-visual-style="velvet"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="velvet"],
.bento[data-visual-style="lacquer"] .bento__tile.card.card--feature:not([data-item-style]),
.bento[data-visual-style="velvet"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="lacquer"],
.bento .bento__tile.card.card--feature[data-item-style="velvet"],
.hero.hero[data-visual-style="smoked-glass"],
.banner.banner[data-visual-style="smoked-glass"],
.tabs.tabs[data-visual-style="smoked-glass"],
.carousel-block[data-visual-style="smoked-glass"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="smoked-glass"],
.grid-block[data-visual-style="smoked-glass"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="smoked-glass"],
.spotlight[data-visual-style="smoked-glass"],
.timeline[data-visual-style="smoked-glass"],
:is(.testimonial, .bento)[data-visual-style="smoked-glass"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="smoked-glass"],
.bento[data-visual-style="smoked-glass"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="smoked-glass"]
) :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,
.testimonial__quote
) {
--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="dark-brand"],
.banner.banner[data-visual-style="dark-brand"],
.tabs.tabs[data-visual-style="dark-brand"],
.carousel-block[data-visual-style="dark-brand"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="dark-brand"],
.grid-block[data-visual-style="dark-brand"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="dark-brand"],
.spotlight[data-visual-style="dark-brand"],
.timeline[data-visual-style="dark-brand"],
:is(.testimonial, .bento)[data-visual-style="dark-brand"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="dark-brand"],
.bento[data-visual-style="dark-brand"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="dark-brand"]
) :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,
.testimonial__quote
) {
--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[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;
}
.bento[data-visual-style] .bento__tile.card.card--feature .bento__actions,
.bento .bento__tile.card.card--feature[data-item-style] .bento__actions {
position: relative;
z-index: 2;
}
@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="brand"]::after {
animation: none;
}
.hero.hero[data-visual-style="gradient"]::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"] .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__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:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="gradient"] {
animation: none;
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item:not([data-item-style]), .grid-block .grid-item[data-item-style="gradient-mesh"]) .card__title,
:is(.grid-block[data-visual-style="gradient-aurora"] .grid-item:not([data-item-style]), .grid-block .grid-item[data-item-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;
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item:not([data-item-style]), .grid-block .grid-item[data-item-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);
}
:is(.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]), .bento .bento__tile.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:not([data-item-style]),
.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:not([data-item-style]) .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:not([data-slide-style]) .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:not([data-slide-style]) .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:not([data-slide-style]) .carousel-slide__article-title,
.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide:not([data-slide-style]) .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:not([data-slide-style]) .carousel-slide__title,
.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide:not([data-slide-style]) .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);
}
.section[data-visual-style="gradient-mesh"]:not(.section--full-bleed) .section__inner::before,
.section[data-visual-style="gradient-mesh"]:not(.section--full-bleed) .section__inner::after,
.section--full-bleed[data-visual-style="gradient-mesh"]::before,
.section--full-bleed[data-visual-style="gradient-mesh"]::after,
.section[data-visual-style="gradient-aurora"]:not(.section--full-bleed) .section__inner::after,
.section--full-bleed[data-visual-style="gradient-aurora"]::after {
animation: none;
}
:is(
.hero.hero[data-visual-style="pearl"] .hero__title,
.hero.hero[data-visual-style="holographic"] .hero__title,
.banner.banner[data-visual-style="pearl"] .banner__title,
.banner.banner[data-visual-style="holographic"] .banner__title,
.grid-block[data-visual-style="pearl"] .grid-item.card.card--feature:not([data-item-style]) .card__title,
.grid-block[data-visual-style="holographic"] .grid-item.card.card--feature:not([data-item-style]) .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="holographic"] .card__title,
.grid-block[data-visual-style="pearl"] .grid-item--article:not([data-item-style]) .grid-item__article-title,
.grid-block[data-visual-style="holographic"] .grid-item--article:not([data-item-style]) .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:not([data-slide-style]) .carousel-slide__title,
.carousel-block[data-visual-style="holographic"] .carousel-slide:not([data-slide-style]) .carousel-slide__title,
.carousel-block .carousel-slide[data-slide-style="pearl"] .carousel-slide__title,
.carousel-block .carousel-slide[data-slide-style="holographic"] .carousel-slide__title,
.carousel-block[data-visual-style="pearl"] .carousel-slide:not([data-slide-style]) .carousel-slide__article-title,
.carousel-block[data-visual-style="holographic"] .carousel-slide:not([data-slide-style]) .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="holographic"] .spotlight__card-title,
.spotlight[data-visual-style="holographic"] .spotlight__panel-title,
.timeline[data-visual-style="pearl"] .timeline__step-title,
:is(.testimonial, .bento)[data-visual-style="pearl"] .testimonial__item:not([data-item-style]) .testimonial__item-title,
:is(.testimonial, .bento) .testimonial__item[data-item-style="pearl"] .testimonial__item-title,
.timeline[data-visual-style="holographic"] .timeline__step-title,
:is(.testimonial, .bento)[data-visual-style="holographic"] .testimonial__item:not([data-item-style]) .testimonial__item-title,
:is(.testimonial, .bento) .testimonial__item[data-item-style="holographic"] .testimonial__item-title,
.bento[data-visual-style="pearl"] .bento__tile.card.card--feature:not([data-item-style]) .card__title,
.bento[data-visual-style="holographic"] .bento__tile.card.card--feature:not([data-item-style]) .card__title,
.bento .bento__tile.card.card--feature[data-item-style="pearl"] .card__title,
.bento .bento__tile.card.card--feature[data-item-style="holographic"] .card__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,
:is(.testimonial, .bento)[data-visual-style="gradient-mesh"] .testimonial__item:not([data-item-style]) .testimonial__item-title,
:is(.testimonial, .bento) .testimonial__item[data-item-style="gradient-mesh"] .testimonial__item-title,
.timeline[data-visual-style="gradient-aurora"] .timeline__step-title,
:is(.testimonial, .bento)[data-visual-style="gradient-aurora"] .testimonial__item:not([data-item-style]) .testimonial__item-title,
:is(.testimonial, .bento) .testimonial__item[data-item-style="gradient-aurora"] .testimonial__item-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: 767px) {
.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%
);
}
.banner.banner[data-visual-style="gradient-mesh"]::after {
filter: var(--blur-decorative-md);
}
}
@media (max-width: 767px) {
.grid-item__article-excerpt {
font-size: var(--text-xs);
}
}
@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:not([data-item-style]),
.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block[data-visual-style="gradient-aurora"] .grid-item.card.card--feature:not([data-item-style]),
.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"],
.bento[data-visual-style="dark"] .bento__tile.card.card--feature:not([data-item-style]),
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento[data-visual-style="gradient-aurora"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="dark"],
.bento .bento__tile.card.card--feature[data-item-style="gradient-mesh"],
.bento .bento__tile.card.card--feature[data-item-style="gradient-aurora"]
) {
color: var(--text-inverse-primary);
}
:is(
[data-visual-style="dark"], [data-item-style="dark"], [data-slide-style="dark"],
[data-visual-style="lacquer"], [data-item-style="lacquer"], [data-slide-style="lacquer"],
[data-visual-style="velvet"], [data-item-style="velvet"], [data-slide-style="velvet"],
[data-visual-style="gradient"], [data-item-style="gradient"], [data-slide-style="gradient"],
[data-visual-style="gradient-mesh"], [data-item-style="gradient-mesh"], [data-slide-style="gradient-mesh"],
[data-visual-style="gradient-aurora"], [data-item-style="gradient-aurora"], [data-slide-style="gradient-aurora"],
[data-visual-style="dark-brand"], [data-item-style="dark-brand"], [data-slide-style="dark-brand"]
) .card-link-cue {
color: var(--vs-text-primary);
}