[data-visual-style="gradient"],
[data-item-style="gradient"],
[data-slide-style="gradient"] {
--vs-bg: var(--gradient-aurora);
--vs-text-primary: var(--text-inverse-primary);
--vs-text-secondary: var(--text-inverse-primary);
--vs-border: rgba(255, 255, 255, 0.2);
--vs-border-width: 1px;
--vs-shadow: var(--shadow-lg);
--vs-backdrop: blur(8px);
--vs-form-label: var(--text-inverse-primary);
--vs-form-text: var(--text-inverse-primary);
--vs-form-help: var(--text-inverse-secondary);
--vs-form-placeholder: var(--placeholder-on-light);
--vs-form-focus-border: var(--shine-strong);
--vs-form-focus-shadow: rgba(255, 255, 255, 0.55);
}
.tabs.tabs.tabs--underline[data-visual-style="gradient"] {
--_tab-underline-active-color: var(--color-accent-text);
}
:is(
.hero.hero[data-visual-style="gradient"],
.banner.banner[data-visual-style="gradient"],
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature,
.grid-block[data-visual-style="gradient"] .grid-item--article,
.carousel-block[data-visual-style="gradient"] .carousel-slide,
.tabs.tabs[data-visual-style="gradient"] .tabs__button--active,
.header-master[data-visual-style="gradient"],
.grid-block .grid-item.card.card--feature[data-item-style="gradient"],
.grid-block .grid-item--article[data-item-style="gradient"],
.carousel-block .carousel-slide[data-slide-style="gradient"],
.spotlight[data-visual-style="gradient"] .spotlight__card,
.spotlight[data-visual-style="gradient"] .spotlight__panel,
.timeline[data-visual-style="gradient"] .timeline__card
)::before {
content: '';
display: block;
position: absolute;
inset: 0;
background-image: var(--vs-noise-image);
pointer-events: none;
opacity: 0.5;
mix-blend-mode: overlay;
border-radius: inherit;
}
.header-master[data-visual-style="gradient"]::before {
z-index: 0;
}
.hero.hero[data-visual-style="gradient"] {
color: var(--text-inverse-primary);
box-shadow: var(--shadow-glow-aurora);
border: none;
}
.hero.hero[data-visual-style="gradient"]::after {
content: '';
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 300%;
background: var(--gradient-aurora);
z-index: -2;
animation: vsGradientShiftGPU var(--animation-aurora) ease infinite;
pointer-events: none;
}
.hero.hero[data-visual-style="gradient"] .hero__title {
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
animation: none;
text-shadow: var(--text-shadow-gradient);
}
.hero.hero[data-visual-style="gradient"] .hero__description {
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-heavy);
}
.hero.hero[data-visual-style="gradient"] .hero__social-proof-text {
color: var(--shine-strong);
}
.hero.hero[data-visual-style="gradient"] .hero__social-proof-logo {
filter: grayscale(100%) brightness(2);
}
.hero.hero[data-visual-style="gradient"] .hero__content {
position: relative;
z-index: var(--z-elevated);
}
.hero.hero[data-visual-style="gradient"] .hero__actions {
justify-content: center;
}
.hero.hero[data-visual-style="gradient"]:hover {
box-shadow: var(--shadow-glow-aurora-hover);
transform: translateY(-3px);
}
.banner.banner[data-visual-style="gradient"] {
color: var(--text-inverse-primary);
box-shadow: var(--shadow-glow-aurora);
border: none;
}
.banner.banner[data-visual-style="gradient"]::after {
content: '';
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 300%;
background: var(--gradient-aurora);
z-index: -2;
animation: vsGradientShiftGPU var(--animation-aurora) ease infinite;
pointer-events: none;
}
.banner.banner[data-visual-style="gradient"] .banner__content {
position: relative;
z-index: var(--z-elevated);
}
.banner.banner[data-visual-style="gradient"] .banner__title {
color: var(--text-inverse-primary);
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-gradient);
}
.banner.banner[data-visual-style="gradient"] .banner__description {
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-heavy);
}
.banner.banner[data-visual-style="gradient"] .form-message,
.banner.banner[data-visual-style="gradient"] .form-message p,
.banner.banner[data-visual-style="gradient"] .form-message span,
.banner.banner[data-visual-style="gradient"] .form-message ul,
.banner.banner[data-visual-style="gradient"] .form-message ol,
.banner.banner[data-visual-style="gradient"] .form-message li,
.banner.banner[data-visual-style="gradient"] .form-message strong,
.banner.banner[data-visual-style="gradient"] .form-message em {
color: var(--text-inverse-primary);
}
.banner.banner[data-visual-style="gradient"] .banner__description h1,
.banner.banner[data-visual-style="gradient"] .banner__description h2,
.banner.banner[data-visual-style="gradient"] .banner__description h3,
.banner.banner[data-visual-style="gradient"] .banner__description h4,
.banner.banner[data-visual-style="gradient"] .banner__description h5,
.banner.banner[data-visual-style="gradient"] .banner__description h6 {
color: var(--text-inverse-primary);
-webkit-text-fill-color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-gradient);
}
.banner.banner[data-visual-style="gradient"] .banner__description p,
.banner.banner[data-visual-style="gradient"] .banner__description ul,
.banner.banner[data-visual-style="gradient"] .banner__description ol,
.banner.banner[data-visual-style="gradient"] .banner__description li,
.banner.banner[data-visual-style="gradient"] .banner__description span,
.banner.banner[data-visual-style="gradient"] .banner__description strong,
.banner.banner[data-visual-style="gradient"] .banner__description em {
color: inherit;
}
.banner.banner[data-visual-style="gradient"] .banner__actions {
justify-content: center;
}
.banner.banner[data-visual-style="gradient"]:hover {
box-shadow: var(--shadow-glow-aurora-hover);
transform: translateY(-3px);
}
@media (max-width: 1280px) {
:is(.hero.hero, .banner.banner)[data-visual-style="gradient"]::after {
width: 500%;
}
}
@media (max-width: 768px) {
:is(.hero.hero, .banner.banner)[data-visual-style="gradient"]::after {
width: 400%;
}
}
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature {
background: var(--gradient-aurora);
background-size: 300% 300%;
animation: vsGradientShift var(--animation-aurora) ease infinite;
border: none;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-glow-aurora);
text-align: center;
will-change: background-position;
}
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature .card__title,
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature .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[data-visual-style="gradient"] .grid-item.card.card--feature .card__description {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-heavy);
}
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature .card__description p,
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature .card__description ul,
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature .card__description ol,
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature .card__description li,
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature .card__description span,
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature .card__description strong,
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature .card__description em {
color: inherit;
}
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature .card__icon {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
}
.grid-block[data-visual-style="gradient"] .grid-item.card.card--feature:hover {
box-shadow: var(--shadow-glow-aurora-hover);
}
.grid-block[data-visual-style="gradient"] .grid-item--article {
background: var(--gradient-aurora);
background-size: 300% 300%;
animation: vsGradientShift var(--animation-aurora) ease infinite;
border: none;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-glow-aurora);
position: relative;
overflow: hidden;
will-change: background-position;
}
.grid-block[data-visual-style="gradient"] .grid-item--article:hover {
box-shadow: var(--shadow-glow-aurora-hover);
}
.grid-block[data-visual-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[data-visual-style="gradient"] .grid-item__article-excerpt {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-heavy);
}
.grid-block[data-visual-style="gradient"] .grid-item__article-category {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
}
.carousel-block[data-visual-style="gradient"] .carousel-slide {
position: relative;
background: var(--vs-bg);
background-size: 300% 300%;
animation: vsGradientShift var(--animation-aurora) ease infinite;
border: var(--vs-border-width) solid var(--vs-border);
box-shadow: var(--vs-shadow);
color: var(--vs-text-primary);
overflow: hidden;
will-change: background-position;
}
.carousel-block[data-visual-style="gradient"] .carousel-slide__title {
position: relative;
z-index: 1;
color: var(--vs-text-primary);
background: none;
-webkit-text-fill-color: var(--vs-text-primary);
text-shadow: var(--text-shadow-gradient);
}
.carousel-block[data-visual-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);
text-shadow: var(--text-shadow-heavy);
}
.carousel-block[data-visual-style="gradient"] .carousel-slide__cta,
.carousel-block[data-visual-style="gradient"] .lexical-content {
position: relative;
z-index: 1;
}
.carousel-block[data-visual-style="gradient"] .carousel-slide:hover {
box-shadow: var(--shadow-xl);
}
.carousel-block[data-visual-style="gradient"] .carousel-slide__article-title {
position: relative;
z-index: 1;
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-gradient);
}
.tabs.tabs[data-visual-style="gradient"] .tabs__button--active {
background: var(--gradient-aurora);
background-size: 300% 300%;
animation: vsGradientShift var(--animation-aurora) ease infinite;
color: var(--text-inverse-primary);
box-shadow: var(--shadow-glow-aurora);
border: none;
position: relative;
overflow: hidden;
will-change: background-position;
}
.tabs.tabs[data-visual-style="gradient"] .tabs__button--active .tabs__label {
position: relative;
z-index: 1;
text-shadow: var(--text-shadow-gradient);
}
.tabs.tabs.tabs--underline[data-visual-style="gradient"] .tabs__button--active {
overflow: visible !important;
}
.tabs.tabs.tabs--underline[data-visual-style="gradient"] .tabs__button--active .tabs__label {
text-shadow: none !important;
}
.tabs.tabs.tabs--underline[data-visual-style="gradient"] .tabs__button--active::after {
background: var(--gradient-aurora) !important;
background-size: 300% 300% !important;
animation: vsGradientShift var(--animation-aurora) ease infinite !important;
block-size: var(--border-width-3) !important;
will-change: background-position;
}
.tabs.tabs.tabs--underline[data-visual-style="gradient"] .tabs__button:hover:not(.tabs__button--active) {
color: var(--text-secondary) !important;
}
.tabs.tabs.tabs--underline[data-visual-style="gradient"] .tabs__button:hover:not(.tabs__button--active)::after {
background: var(--gradient-aurora) !important;
background-size: 300% 300% !important;
animation: vsGradientShift var(--animation-aurora) ease infinite !important;
will-change: background-position;
}
.tabs.tabs[data-visual-style="gradient"] .tabs__button:not(.tabs__button--active) {
color: var(--text-secondary);
}
.tabs.tabs[data-visual-style="gradient"] .tabs__button:hover:not(.tabs__button--active) {
color: var(--gradient-decorative-1);
background: color-mix(in srgb, var(--gradient-decorative-1) 8%, transparent);
}
.tabs.tabs[data-visual-style="gradient"] .tabs__panels {
position: relative;
border: var(--vs-border-width) solid transparent;
background-image: linear-gradient(var(--bg-base), var(--bg-base)),
var(--gradient-aurora);
background-origin: border-box;
background-clip: padding-box, border-box;
box-shadow:
var(--vs-shadow),
0 0 30px rgba(var(--gradient-aurora-rgb), 0.08);
}
.tabs.tabs[data-visual-style="gradient"] .tabs__panels::before {
content: '';
position: absolute;
inset: 0;
background: var(--gradient-aurora);
opacity: 0.15;
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
.tabs.tabs[data-visual-style="gradient"] .tabs__panel {
position: relative;
z-index: 1;
}
.header-master[data-visual-style="gradient"] {
background: var(--gradient-aurora);
background-size: 300% 300%;
animation: vsGradientShift var(--animation-aurora) ease infinite;
color: var(--text-inverse-primary);
box-shadow: var(--shadow-glow-aurora);
border: none;
--header-text: var(--text-inverse-primary);
--header-text-secondary: var(--text-inverse-secondary);
--header-border: var(--border-inverse-subtle);
--header-bg-surface: var(--neutral-900);
--header-bg-elevated: var(--neutral-800);
--header-hover-text: var(--color-primary-light);
--header-hover-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
--header-active-text: var(--color-accent-light);
will-change: background-position;
}
.header-master[data-visual-style="gradient"] .nav-item,
.header-master[data-visual-style="gradient"] .logo-wrapper a {
font-family: var(--font-sans);
font-weight: var(--font-extrabold);
color: var(--text-inverse-primary);
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
letter-spacing: var(--tracking-tighter);
text-shadow: var(--text-shadow-gradient);
}
.header-master[data-visual-style="gradient"] .nav-item:hover {
background: rgba(255, 255, 255, 0.1);
-webkit-text-fill-color: var(--neutral-50);
color: var(--neutral-50);
text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
.header-master[data-visual-style="gradient"] .nav-dropdown {
background: var(--neutral-900);
border: var(--border-width) solid rgba(255, 255, 255, 0.2);
}
.header-master[data-visual-style="gradient"] .nav-dropdown__item {
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-heavy);
}
.header-master[data-visual-style="gradient"] .nav-dropdown__item:hover {
background: rgba(255, 255, 255, 0.1);
}
.header-master[data-visual-style="gradient"] .burger-menu-toggle__bar {
background: var(--text-inverse-primary);
}
.header-master[data-visual-style="gradient"] .burger-menu-toggle:hover .burger-menu-toggle__bar {
background: var(--neutral-200);
}
:is(
.spotlight[data-visual-style="gradient"] .spotlight__card,
.spotlight[data-visual-style="gradient"] .spotlight__panel,
.timeline[data-visual-style="gradient"] .timeline__card
) {
position: relative;
background: var(--gradient-aurora);
background-size: 300% 300%;
animation: vsGradientShift var(--animation-aurora) ease infinite;
border: none;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-glow-aurora);
will-change: background-position;
}
:is(
.spotlight[data-visual-style="gradient"] .spotlight__card,
.spotlight[data-visual-style="gradient"] .spotlight__panel,
.timeline[data-visual-style="gradient"] .timeline__card
) > * {
position: relative;
z-index: 1;
}
:is(
.spotlight[data-visual-style="gradient"] .spotlight__card,
.spotlight[data-visual-style="gradient"] .spotlight__panel,
.timeline[data-visual-style="gradient"] .timeline__card
):hover {
box-shadow: var(--shadow-glow-aurora-hover);
}
.spotlight[data-visual-style="gradient"] .spotlight__card-title,
.spotlight[data-visual-style="gradient"] .spotlight__panel-title,
.timeline[data-visual-style="gradient"] .timeline__step-title {
color: var(--text-inverse-primary);
-webkit-text-fill-color: var(--text-inverse-primary);
background: none;
text-shadow: var(--text-shadow-gradient);
}
.timeline[data-visual-style="gradient"] .timeline__ref {
color: var(--text-inverse-primary);
}
.spotlight[data-visual-style="gradient"] .spotlight__card-desc,
.spotlight[data-visual-style="gradient"] .spotlight__panel-desc,
.timeline[data-visual-style="gradient"] .timeline__desc {
--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(--color-primary-light);
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-heavy);
}
.timeline[data-visual-style="gradient"] .timeline__desc.lexical-content strong,
.timeline[data-visual-style="gradient"] .timeline__desc.lexical-content b {
color: var(--color-primary-light);
}