[data-visual-style="gradient-aurora"],
[data-item-style="gradient-aurora"],
[data-slide-style="gradient-aurora"] {
--vs-text-primary: var(--text-inverse-primary);
--vs-text-secondary: var(--hero-text-dark-subtitle);
--vs-backdrop: blur(12px);
--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(--color-secondary);
--vs-form-focus-shadow: rgba(var(--color-secondary-rgb), 0.55);
}
[data-visual-style="gradient-aurora"],
[data-item-style="gradient-aurora"],
[data-slide-style="gradient-aurora"] {
--vs-bg: linear-gradient(180deg, var(--hero-bg-ultra-dark) 0%, var(--hero-bg-deep-space) 40%, var(--hero-bg-deep-space-end) 100%);
--vs-border: rgba(var(--color-secondary-rgb), 0.2);
--vs-border-width: 1px;
--vs-shadow: 0 0 40px rgba(var(--color-secondary-rgb), 0.15);
--vs-aurora-title-glow:
0 0 60px rgba(var(--color-primary-rgb), 0.5),
0 0 120px rgba(var(--color-secondary-rgb), 0.3);
--vs-aurora-stars-bg:
radial-gradient(1px 1px at 20% 30%, color-mix(in oklab, var(--vs-white-pivot, white) 40%, transparent) 0%, transparent 100%),
radial-gradient(1px 1px at 40% 70%, color-mix(in oklab, var(--vs-white-pivot, white) 30%, transparent) 0%, transparent 100%),
radial-gradient(1px 1px at 60% 20%, color-mix(in oklab, var(--vs-white-pivot, white) 50%, transparent) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 80% 50%, color-mix(in oklab, var(--vs-white-pivot, white) 40%, transparent) 0%, transparent 100%),
radial-gradient(1px 1px at 10% 80%, color-mix(in oklab, var(--vs-white-pivot, white) 30%, transparent) 0%, transparent 100%),
radial-gradient(1px 1px at 70% 90%, color-mix(in oklab, var(--vs-white-pivot, white) 40%, transparent) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 90% 10%, color-mix(in oklab, var(--vs-white-pivot, white) 50%, transparent) 0%, transparent 100%);
--_vs-title-bg: var(--vs-aurora-title-gradient);
--_vs-title-size: 400% 400%;
}
:is(
.hero.hero[data-visual-style="gradient-aurora"] .hero__aurora-layer,
.banner.banner[data-visual-style="gradient-aurora"] .banner__aurora-layer
) {
position: absolute;
inline-size: 200%;
block-size: 55%;
border-radius: 40%;
filter: var(--blur-decorative-lg);
mix-blend-mode: screen;
}
:is(
.hero.hero[data-visual-style="gradient-aurora"] .hero__aurora-layer--1,
.banner.banner[data-visual-style="gradient-aurora"] .banner__aurora-layer--1
) {
inset-block-start: -20%;
inset-inline-start: -35%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(var(--color-primary-rgb), 0.7) 25%,
rgba(var(--color-primary-rgb), 0.5) 50%,
rgba(var(--color-primary-rgb), 0.3) 75%,
transparent 100%
);
animation: vsAuroraWave var(--hero-aurora-duration) ease-in-out infinite;
}
:is(
.hero.hero[data-visual-style="gradient-aurora"] .hero__aurora-layer--2,
.banner.banner[data-visual-style="gradient-aurora"] .banner__aurora-layer--2
) {
inset-block-start: 0%;
inset-inline-end: -35%;
background: linear-gradient(
270deg,
transparent 0%,
rgba(var(--color-secondary-rgb), 0.6) 25%,
rgba(var(--color-secondary-rgb), 0.4) 50%,
rgba(var(--color-secondary-rgb), 0.2) 75%,
transparent 100%
);
animation: vsAuroraWave var(--hero-aurora-duration) ease-in-out infinite;
animation-delay: var(--delay-aurora-2);
animation-direction: reverse;
}
:is(
.hero.hero[data-visual-style="gradient-aurora"] .hero__aurora-layer--3,
.banner.banner[data-visual-style="gradient-aurora"] .banner__aurora-layer--3
) {
inset-block-end: -10%;
inset-inline-start: -15%;
inline-size: 160%;
block-size: 45%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(var(--color-accent-rgb), 0.5) 30%,
rgba(var(--color-accent-rgb), 0.3) 50%,
rgba(var(--color-accent-rgb), 0.15) 70%,
transparent 100%
);
animation: vsAuroraWave calc(var(--hero-aurora-duration) * 1.3) ease-in-out infinite;
animation-delay: var(--delay-aurora-3);
}
:is(
.hero.hero[data-visual-style="gradient-aurora"]::before,
.banner.banner[data-visual-style="gradient-aurora"]::before,
.header-master[data-visual-style="gradient-aurora"]::before,
:is(.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="gradient-aurora"])::before,
:is(.grid-block[data-visual-style="gradient-aurora"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="gradient-aurora"])::before,
:is(.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-aurora"])::before,
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"]::before,
.grid-block .grid-item--article[data-item-style="gradient-aurora"]::before,
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"]::before,
.spotlight[data-visual-style="gradient-aurora"] .spotlight__card::before,
.spotlight[data-visual-style="gradient-aurora"] .spotlight__panel::before,
.timeline[data-visual-style="gradient-aurora"] .timeline__card::before
) {
content: '';
position: absolute;
inset: 0;
background-image: var(--vs-aurora-stars-bg);
z-index: 1;
pointer-events: none;
}
:where(
:is(.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="gradient-aurora"]),
:is(.grid-block[data-visual-style="gradient-aurora"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="gradient-aurora"]),
:is(.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-aurora"]),
.spotlight[data-visual-style="gradient-aurora"] .spotlight__card,
.spotlight[data-visual-style="gradient-aurora"] .spotlight__panel,
.timeline[data-visual-style="gradient-aurora"] .timeline__card
)::after {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-start: var(--_aurora-wave-inline-start, -10%);
inline-size: var(--_aurora-wave-inline-size, 120%);
block-size: 100%;
background:
radial-gradient(
ellipse 120% 60% at 20% 0%,
rgba(var(--color-primary-rgb), 0.4) 0%,
rgba(var(--color-primary-rgb), 0.15) 35%,
transparent 65%
),
radial-gradient(
ellipse 100% 50% at 80% 30%,
rgba(var(--color-secondary-rgb), 0.35) 0%,
rgba(var(--color-secondary-rgb), 0.12) 40%,
transparent 70%
),
radial-gradient(
ellipse 130% 45% at 50% 100%,
rgba(var(--color-accent-rgb), 0.3) 0%,
rgba(var(--color-accent-rgb), 0.1) 45%,
transparent 75%
);
filter: var(--blur-decorative);
animation: vsAuroraWave var(--hero-aurora-duration) ease-in-out infinite;
z-index: 0;
pointer-events: none;
border-radius: var(--radius-xl);
}
:where(
.grid-block .grid-item.card.card--feature[data-item-style="gradient-aurora"],
.grid-block .grid-item--article[data-item-style="gradient-aurora"],
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"]
)::after {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-start: var(--_aurora-wave-inline-start, -10%);
inline-size: var(--_aurora-wave-inline-size, 120%);
block-size: 100%;
background:
radial-gradient(
ellipse 120% 60% at 20% 0%,
rgba(var(--color-primary-rgb), 0.4) 0%,
rgba(var(--color-primary-rgb), 0.15) 35%,
transparent 65%
),
radial-gradient(
ellipse 100% 50% at 80% 30%,
rgba(var(--color-secondary-rgb), 0.35) 0%,
rgba(var(--color-secondary-rgb), 0.12) 40%,
transparent 70%
),
radial-gradient(
ellipse 130% 45% at 50% 100%,
rgba(var(--color-accent-rgb), 0.3) 0%,
rgba(var(--color-accent-rgb), 0.1) 45%,
transparent 75%
);
filter: var(--blur-decorative);
z-index: 0;
pointer-events: none;
border-radius: var(--radius-xl);
}
:is(.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-aurora"]) {
--_aurora-wave-inline-start: 0;
--_aurora-wave-inline-size: 100%;
}
.carousel-block .carousel-slide[data-slide-style="gradient-aurora"]::after {
display: block;
}
.hero.hero[data-visual-style="gradient-aurora"] {
background: linear-gradient(
180deg,
var(--hero-bg-ultra-dark) 0%,
var(--hero-bg-deep-space) 40%,
var(--hero-bg-deep-space-end) 100%
);
color: var(--text-inverse-primary);
}
.hero.hero[data-visual-style="gradient-aurora"]::after {
content: '';
position: absolute;
inset-block-start: -30%;
inset-inline-start: -20%;
inline-size: 140%;
block-size: 100%;
background:
radial-gradient(
ellipse 80% 35% at 30% 10%,
rgba(var(--color-primary-rgb), 0.5) 0%,
rgba(var(--color-primary-rgb), 0.2) 40%,
transparent 70%
),
radial-gradient(
ellipse 70% 30% at 70% 25%,
rgba(var(--color-secondary-rgb), 0.45) 0%,
rgba(var(--color-secondary-rgb), 0.15) 45%,
transparent 70%
),
radial-gradient(
ellipse 90% 25% at 50% 45%,
rgba(var(--color-accent-rgb), 0.35) 0%,
rgba(var(--color-accent-rgb), 0.1) 50%,
transparent 75%
);
filter: var(--blur-decorative);
animation: vsAuroraWave var(--hero-aurora-duration) ease-in-out infinite;
z-index: 0;
pointer-events: none;
}
.hero.hero[data-visual-style="gradient-aurora"] .hero__aurora {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero.hero[data-visual-style="gradient-aurora"] .hero__title {
text-shadow: var(--vs-aurora-title-glow);
}
.hero.hero[data-visual-style="gradient-aurora"] .hero__description {
color: var(--hero-text-dark-description);
text-shadow: var(--text-shadow-deepest);
}
.hero.hero[data-visual-style="gradient-aurora"] .hero__social-proof-text {
color: var(--hero-text-dark-description);
}
.hero.hero[data-visual-style="gradient-aurora"] .hero__social-proof-logo {
filter: grayscale(100%) brightness(2);
}
.banner.banner[data-visual-style="gradient-aurora"] {
background: linear-gradient(
180deg,
var(--hero-bg-ultra-dark) 0%,
var(--hero-bg-deep-space) 40%,
var(--hero-bg-deep-space-end) 100%
);
color: var(--text-inverse-primary);
box-shadow: var(--shadow-xl);
border: none;
}
.banner.banner[data-visual-style="gradient-aurora"] .banner__aurora {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.banner.banner[data-visual-style="gradient-aurora"] .banner__content {
position: relative;
z-index: 2;
}
.banner.banner[data-visual-style="gradient-aurora"] .banner__title {
text-shadow: var(--vs-aurora-title-glow);
}
.banner.banner[data-visual-style="gradient-aurora"] .banner__description {
color: var(--hero-text-dark-description);
}
.banner.banner[data-visual-style="gradient-aurora"] .form-message,
.banner.banner[data-visual-style="gradient-aurora"] .form-message p,
.banner.banner[data-visual-style="gradient-aurora"] .form-message span,
.banner.banner[data-visual-style="gradient-aurora"] .form-message ul,
.banner.banner[data-visual-style="gradient-aurora"] .form-message ol,
.banner.banner[data-visual-style="gradient-aurora"] .form-message li,
.banner.banner[data-visual-style="gradient-aurora"] .form-message strong,
.banner.banner[data-visual-style="gradient-aurora"] .form-message em {
color: var(--hero-text-dark-description);
}
.banner.banner[data-visual-style="gradient-aurora"] .banner__description h1,
.banner.banner[data-visual-style="gradient-aurora"] .banner__description h2,
.banner.banner[data-visual-style="gradient-aurora"] .banner__description h3,
.banner.banner[data-visual-style="gradient-aurora"] .banner__description h4,
.banner.banner[data-visual-style="gradient-aurora"] .banner__description h5,
.banner.banner[data-visual-style="gradient-aurora"] .banner__description h6 {
text-shadow: var(--vs-aurora-title-glow);
}
.banner.banner[data-visual-style="gradient-aurora"] .banner__description p,
.banner.banner[data-visual-style="gradient-aurora"] .banner__description ul,
.banner.banner[data-visual-style="gradient-aurora"] .banner__description ol,
.banner.banner[data-visual-style="gradient-aurora"] .banner__description li,
.banner.banner[data-visual-style="gradient-aurora"] .banner__description span,
.banner.banner[data-visual-style="gradient-aurora"] .banner__description strong,
.banner.banner[data-visual-style="gradient-aurora"] .banner__description em {
color: inherit;
}
.banner.banner[data-visual-style="gradient-aurora"]:hover {
box-shadow: var(--shadow-2xl);
transform: translateY(-3px);
}
:is(.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="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-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
}
:is(.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="gradient-aurora"])::before {
border-radius: var(--radius-xl);
}
:is(.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="gradient-aurora"]) .card__title,
:is(.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="gradient-aurora"]) .card__subtitle {
position: relative;
z-index: 2;
text-shadow: var(--vs-aurora-title-glow);
}
:is(.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="gradient-aurora"]) .card__description {
position: relative;
z-index: 2;
color: var(--hero-text-dark-description, var(--text-inverse-secondary));
}
:is(.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="gradient-aurora"]) .card__description p,
:is(.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="gradient-aurora"]) .card__description ul,
:is(.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="gradient-aurora"]) .card__description ol,
:is(.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="gradient-aurora"]) .card__description li,
:is(.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="gradient-aurora"]) .card__description span,
:is(.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="gradient-aurora"]) .card__description strong,
:is(.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="gradient-aurora"]) .card__description em {
color: inherit;
}
:is(.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="gradient-aurora"]) .card__icon {
position: relative;
z-index: 2;
color: var(--color-secondary);
}
:is(.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="gradient-aurora"]):hover {
box-shadow: var(--shadow-2xl);
}
:is(.grid-block[data-visual-style="gradient-aurora"] .grid-item--article:not([data-item-style]), .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-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
position: relative;
overflow: hidden;
}
:is(.grid-block[data-visual-style="gradient-aurora"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="gradient-aurora"])::before {
border-radius: var(--radius-xl);
}
:is(.grid-block[data-visual-style="gradient-aurora"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="gradient-aurora"]):hover {
box-shadow: var(--shadow-2xl);
}
:is(.grid-block[data-visual-style="gradient-aurora"] .grid-item--article:not([data-item-style]), .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);
}
:is(.grid-block[data-visual-style="gradient-aurora"] .grid-item--article:not([data-item-style]), .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));
}
:is(.grid-block[data-visual-style="gradient-aurora"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="gradient-aurora"]) .grid-item__article-category {
position: relative;
z-index: 2;
color: var(--color-primary-light);
}
:is(.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide:not([data-slide-style]), .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(--vs-text-primary);
overflow: hidden;
}
:is(.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-aurora"])::before {
border-radius: var(--radius-xl);
}
:is(.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-aurora"]) .carousel-slide__title {
position: relative;
z-index: 2;
text-shadow: var(--vs-aurora-title-glow);
}
:is(.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-aurora"]) .lexical-content {
--lexical-color: var(--hero-text-dark-description);
--lexical-heading-color: var(--text-inverse-primary);
--lexical-link-color: var(--color-primary-light);
--lexical-quote-color: var(--hero-text-dark-description);
--lexical-strong-color: var(--text-inverse-primary);
color: var(--hero-text-dark-description);
}
:is(.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-aurora"]) .carousel-slide__cta,
:is(.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-aurora"]) .lexical-content {
position: relative;
z-index: 2;
}
:is(.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-aurora"]):hover {
box-shadow: var(--shadow-2xl);
}
:is(.carousel-block[data-visual-style="gradient-aurora"] .carousel-slide:not([data-slide-style]), .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);
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__button--active {
position: relative;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-primary) 50%,
var(--color-secondary-light) 100%
);
background-size: 300% 300%;
animation: vsGradientShift var(--animation-aurora) ease infinite;
will-change: background-position;
color: var(--text-inverse-primary);
box-shadow: 0 8px 32px rgba(var(--color-secondary-rgb), 0.3);
border: none;
border-radius: var(--radius-lg);
overflow: hidden;
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__button--active::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(var(--color-primary-rgb), 0.2) 0%,
transparent 50%,
rgba(var(--color-secondary-rgb), 0.2) 100%
);
pointer-events: none;
border-radius: inherit;
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__button--active .tabs__label {
position: relative;
z-index: 1;
text-shadow: var(--text-shadow-gradient);
}
.tabs.tabs.tabs--underline[data-visual-style="gradient-aurora"] .tabs__button--active {
overflow: visible !important;
}
.tabs.tabs.tabs--underline[data-visual-style="gradient-aurora"] .tabs__button--active .tabs__label {
text-shadow: none !important;
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__button:not(.tabs__button--active) {
color: var(--text-secondary);
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__button:hover:not(.tabs__button--active) {
color: var(--color-secondary);
background: rgba(var(--color-secondary-rgb), 0.08);
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__panels {
position: relative;
border: var(--vs-border-width) solid transparent;
background-image:
linear-gradient(var(--bg-base), var(--bg-base)),
linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
box-shadow:
var(--vs-shadow),
0 0 30px rgba(var(--color-secondary-rgb), 0.08);
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__panels::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%);
opacity: 0.12;
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__panel {
position: relative;
z-index: 1;
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__panel .lexical-content {
--lexical-color: var(--text-primary);
--lexical-heading-color: var(--text-primary);
--lexical-link-color: var(--color-secondary);
--lexical-link-hover-color: var(--color-secondary-hover);
--lexical-quote-color: var(--text-secondary);
--lexical-strong-color: var(--text-primary);
--lexical-spacing: var(--space-s);
color: var(--text-primary);
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__panel .lexical-content ul {
list-style: disc;
padding-inline-start: var(--lexical-list-indent, var(--space-l));
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__panel .lexical-content ol {
list-style: decimal;
padding-inline-start: var(--lexical-list-indent, var(--space-l));
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__panel .lexical-content li {
padding-inline-start: var(--space-s);
}
.tabs.tabs[data-visual-style="gradient-aurora"] .tabs__panel .lexical-content a:hover {
text-decoration-thickness: 2px;
}
.header-master[data-visual-style="gradient-aurora"] {
background: linear-gradient(
180deg,
var(--hero-bg-ultra-dark) 0%,
var(--hero-bg-deep-space) 40%,
var(--hero-bg-deep-space-end) 100%
);
color: var(--text-inverse-primary);
box-shadow: var(--shadow-xl);
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);
}
.header-master[data-visual-style="gradient-aurora"]::after {
content: '';
position: absolute;
top: 0;
left: -5%;
width: 110%;
height: 100%;
background:
radial-gradient(
ellipse 80% 150% at 15% 50%,
rgba(var(--color-primary-rgb), 0.5) 0%,
rgba(var(--color-primary-rgb), 0.2) 35%,
transparent 65%
),
radial-gradient(
ellipse 70% 120% at 85% 50%,
rgba(var(--color-secondary-rgb), 0.45) 0%,
rgba(var(--color-secondary-rgb), 0.15) 40%,
transparent 70%
),
radial-gradient(
ellipse 90% 100% at 50% 100%,
rgba(var(--color-accent-rgb), 0.4) 0%,
rgba(var(--color-accent-rgb), 0.1) 45%,
transparent 75%
);
filter: var(--blur-decorative);
animation: vsAuroraWave var(--hero-aurora-duration) ease-in-out infinite;
z-index: 0;
pointer-events: none;
}
.header-master[data-visual-style="gradient-aurora"] .nav-item,
.header-master[data-visual-style="gradient-aurora"] .logo-wrapper a {
text-shadow: var(--vs-aurora-title-glow);
}
.header-master[data-visual-style="gradient-aurora"] .nav-item__icon,
.header-master[data-visual-style="gradient-aurora"] .nav-item__chevron {
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
.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;
animation: none;
color: var(--text-inverse-primary);
}
.header-master[data-visual-style="gradient-aurora"] .nav-item:hover {
filter: brightness(1.15);
text-shadow:
0 0 80px rgba(var(--color-primary-rgb), 0.6),
0 0 140px rgba(var(--color-secondary-rgb), 0.4);
}
.header-master[data-visual-style="gradient-aurora"] .nav-dropdown {
background: linear-gradient(
180deg,
var(--hero-bg-ultra-dark) 0%,
var(--hero-bg-deep-space) 100%
);
border: var(--border-width) solid rgba(var(--color-secondary-rgb), 0.2);
box-shadow: 0 0 40px rgba(var(--color-secondary-rgb), 0.15);
}
.header-master[data-visual-style="gradient-aurora"] .nav-dropdown__item {
color: var(--hero-text-dark-description);
}
.header-master[data-visual-style="gradient-aurora"] .nav-dropdown__item:hover {
background: rgba(var(--color-primary-rgb), 0.1);
}
.header-master[data-visual-style="gradient-aurora"] .burger-menu-toggle__bar {
background: var(--text-inverse-primary);
}
.header-master[data-visual-style="gradient-aurora"] .burger-menu-toggle:hover .burger-menu-toggle__bar {
background: var(--color-primary-light);
}
.header-master[data-visual-style="gradient-aurora"].header-master--blur-active {
background: var(--header-glass-bg-opaque-dark);
}
:is(
.spotlight[data-visual-style="gradient-aurora"] .spotlight__card,
.spotlight[data-visual-style="gradient-aurora"] .spotlight__panel,
.timeline[data-visual-style="gradient-aurora"] .timeline__card
) {
position: relative;
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;
box-shadow: var(--shadow-xl);
color: var(--vs-text-primary);
overflow: hidden;
}
:is(
.spotlight[data-visual-style="gradient-aurora"] .spotlight__card,
.spotlight[data-visual-style="gradient-aurora"] .spotlight__panel,
.timeline[data-visual-style="gradient-aurora"] .timeline__card
) > * {
position: relative;
z-index: 2;
}
:is(
.spotlight[data-visual-style="gradient-aurora"] .spotlight__card,
.spotlight[data-visual-style="gradient-aurora"] .spotlight__panel,
.timeline[data-visual-style="gradient-aurora"] .timeline__card
):hover {
box-shadow: var(--shadow-2xl);
}
.spotlight[data-visual-style="gradient-aurora"] .spotlight__card-title,
.spotlight[data-visual-style="gradient-aurora"] .spotlight__panel-title,
.timeline[data-visual-style="gradient-aurora"] .timeline__step-title {
position: relative;
z-index: 2;
text-shadow: var(--vs-aurora-title-glow);
}
.spotlight[data-visual-style="gradient-aurora"] .spotlight__card-desc,
.spotlight[data-visual-style="gradient-aurora"] .spotlight__panel-desc,
.timeline[data-visual-style="gradient-aurora"] .timeline__desc {
--lexical-color: var(--hero-text-dark-description);
--lexical-heading-color: var(--text-inverse-primary);
--lexical-link-color: var(--color-primary-light);
--lexical-quote-color: var(--hero-text-dark-description);
--lexical-strong-color: var(--color-primary-light);
color: var(--hero-text-dark-description);
}
.timeline[data-visual-style="gradient-aurora"] .timeline__ref,
.timeline[data-visual-style="gradient-aurora"] .timeline__desc.lexical-content strong,
.timeline[data-visual-style="gradient-aurora"] .timeline__desc.lexical-content b {
color: var(--color-primary-light);
}
.timeline[data-visual-style="gradient-aurora"] .timeline__row[data-active] .timeline__ref,
.timeline[data-visual-style="gradient-aurora"] .timeline__row[data-active] .timeline__step-title {
color: var(--color-primary-light);
}
.spotlight[data-visual-style="gradient-aurora"].spotlight--interactive .spotlight__item[data-active] .spotlight__card-title,
.spotlight[data-visual-style="gradient-aurora"].spotlight--pin .spotlight__item[data-active] .spotlight__card-title,
.spotlight[data-visual-style="gradient-aurora"].spotlight--interactive .spotlight__card:hover .spotlight__card-title,
.spotlight[data-visual-style="gradient-aurora"] .spotlight__card-trigger:hover {
color: var(--color-primary-light);
}