[data-visual-style="gradient-mesh"],
[data-item-style="gradient-mesh"],
[data-slide-style="gradient-mesh"] {
--vs-text-primary: var(--text-inverse-primary);
--vs-text-secondary: var(--hero-text-dark-subtitle);
--vs-backdrop: blur(16px);
--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-highlight);
--vs-form-focus-shadow: rgba(var(--color-highlight-rgb), 0.55);
}
[data-visual-style="gradient-mesh"],
[data-item-style="gradient-mesh"],
[data-slide-style="gradient-mesh"] {
--vs-bg: var(--hero-bg-dark);
--vs-border: rgba(var(--color-highlight-rgb), 0.2);
--vs-border-width: 1px;
--vs-shadow: var(--shadow-xl);
--vs-mesh-title-gradient: linear-gradient(
135deg,
var(--color-primary-light) 0%,
var(--color-secondary-light) 25%,
var(--color-accent-light) 50%,
var(--color-primary-light) 100%
);
--vs-mesh-primary-orb: radial-gradient(
ellipse at center,
rgba(var(--color-primary-rgb), 0.55) 0%,
rgba(var(--color-primary-rgb), 0.3) 35%,
rgba(var(--color-primary-rgb), 0.1) 60%,
transparent 80%
);
--vs-mesh-multi-orb:
radial-gradient(
ellipse 45% 55% at 85% 15%,
rgba(var(--color-accent-rgb), 0.5) 0%,
rgba(var(--color-accent-rgb), 0.2) 40%,
transparent 70%
),
radial-gradient(
ellipse 55% 50% at 80% 85%,
rgba(var(--color-secondary-rgb), 0.55) 0%,
rgba(var(--color-secondary-rgb), 0.25) 40%,
transparent 70%
);
--_vs-title-bg: var(--vs-mesh-title-gradient);
--_vs-title-size: 400% 400%;
}
:is(
.hero.hero[data-visual-style="gradient-mesh"],
.banner.banner[data-visual-style="gradient-mesh"],
.header-master[data-visual-style="gradient-mesh"],
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]),
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="gradient-mesh"]),
.tabs.tabs[data-visual-style="gradient-mesh"] .tabs__panels,
.spotlight[data-visual-style="gradient-mesh"] .spotlight__card,
.spotlight[data-visual-style="gradient-mesh"] .spotlight__panel,
.timeline[data-visual-style="gradient-mesh"] .timeline__card
)::before {
content: '';
position: absolute;
inset-block-start: var(--_mesh-orb-block-start, -15%);
inset-inline-start: var(--_mesh-orb-inline-start, -5%);
inline-size: var(--_mesh-orb-inline-size, 65%);
block-size: var(--_mesh-orb-block-size, 70%);
background: var(--vs-mesh-primary-orb);
filter: var(--_mesh-orb-filter, var(--blur-decorative-lg));
animation: vsMeshFloat var(--animation-float) ease-in-out infinite;
pointer-events: none;
z-index: var(--_mesh-orb-z, 0);
}
:is(
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"],
.grid-block .grid-item--article[data-item-style="gradient-mesh"]
)::before {
content: '';
display: block;
position: absolute;
inset-block-start: -15%;
inset-inline-start: -5%;
inline-size: 65%;
block-size: 70%;
background: var(--vs-mesh-primary-orb);
filter: var(--_mesh-orb-filter, var(--blur-decorative-lg));
pointer-events: none;
z-index: 0;
}
:is(
.banner.banner[data-visual-style="gradient-mesh"],
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]),
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="gradient-mesh"]),
:is(.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-mesh"]),
.tabs.tabs[data-visual-style="gradient-mesh"] .tabs__panels,
.spotlight[data-visual-style="gradient-mesh"] .spotlight__card,
.spotlight[data-visual-style="gradient-mesh"] .spotlight__panel,
.timeline[data-visual-style="gradient-mesh"] .timeline__card
)::after {
content: '';
position: absolute;
inset: 0;
background: var(--vs-mesh-multi-orb);
filter: var(--blur-decorative);
animation: vsMeshFloat var(--animation-float-slow) ease-in-out infinite reverse;
z-index: 0;
pointer-events: none;
}
:is(
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"],
.grid-block .grid-item--article[data-item-style="gradient-mesh"],
.carousel-block .carousel-slide[data-slide-style="gradient-mesh"]
)::after {
content: '';
position: absolute;
inset: 0;
background: var(--vs-mesh-multi-orb);
filter: var(--blur-decorative);
z-index: 0;
pointer-events: none;
}
.hero.hero[data-visual-style="gradient-mesh"] {
background: var(--hero-bg-dark);
color: var(--text-inverse-primary);
--_mesh-orb-z: 1;
--_vs-title-bg: linear-gradient(
135deg,
var(--color-primary-light) 0%,
var(--color-secondary-light) 25%,
var(--color-accent-light) 50%,
var(--color-highlight-light) 75%,
var(--color-primary-light) 100%
);
}
.hero.hero[data-visual-style="gradient-mesh"]::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 45% 55% at 85% 15%,
rgba(var(--color-accent-rgb), 0.5) 0%,
rgba(var(--color-accent-rgb), 0.2) 40%,
transparent 70%
),
radial-gradient(
ellipse 55% 50% at 80% 85%,
rgba(var(--color-secondary-rgb), 0.55) 0%,
rgba(var(--color-secondary-rgb), 0.25) 40%,
transparent 70%
),
radial-gradient(
ellipse 40% 45% at 15% 75%,
rgba(var(--color-highlight-rgb), 0.4) 0%,
rgba(var(--color-highlight-rgb), 0.15) 45%,
transparent 70%
);
filter: var(--blur-decorative);
animation: vsMeshFloat var(--animation-float-slow) ease-in-out infinite reverse;
z-index: 1;
pointer-events: none;
}
.hero.hero[data-visual-style="gradient-mesh"] .hero__mesh {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.hero.hero[data-visual-style="gradient-mesh"] .hero__mesh-orb {
position: absolute;
filter: var(--blur-decorative);
pointer-events: none;
}
.hero.hero[data-visual-style="gradient-mesh"] .hero__mesh-orb--1 {
inset-block-start: 22%;
inset-inline-start: 42%;
inline-size: 28%;
block-size: 32%;
background: radial-gradient(
ellipse at center,
rgba(var(--color-accent-rgb), 0.35) 0%,
rgba(var(--color-accent-rgb), 0.12) 50%,
transparent 75%
);
animation: vsMeshFloat var(--animation-float) ease-in-out infinite;
}
.hero.hero[data-visual-style="gradient-mesh"] .hero__mesh-orb--2 {
inset-block-start: 45%;
inset-inline-start: 28%;
inline-size: 30%;
block-size: 32%;
background: radial-gradient(
ellipse at center,
rgba(var(--color-highlight-rgb), 0.32) 0%,
rgba(var(--color-highlight-rgb), 0.10) 50%,
transparent 75%
);
animation: vsMeshFloat var(--animation-float-slow) ease-in-out infinite reverse;
}
.hero.hero[data-visual-style="gradient-mesh"] .hero__mesh-orb--3 {
inset-block-start: 50%;
inset-inline-start: 58%;
inline-size: 24%;
block-size: 28%;
background: radial-gradient(
ellipse at center,
rgba(var(--color-secondary-rgb), 0.36) 0%,
rgba(var(--color-secondary-rgb), 0.12) 50%,
transparent 75%
);
animation: vsMeshFloat calc(var(--animation-float) * 1.4) ease-in-out infinite;
}
.hero.hero[data-visual-style="gradient-mesh"] .hero__title {
text-shadow: var(--hero-title-glow-mesh-rainbow);
}
.hero.hero[data-visual-style="gradient-mesh"] .hero__description {
color: var(--hero-text-dark-description);
text-shadow: var(--text-shadow-stronger);
}
.hero.hero[data-visual-style="gradient-mesh"] .hero__social-proof-text {
color: var(--hero-text-dark-description);
}
.hero.hero[data-visual-style="gradient-mesh"] .hero__social-proof-logo {
filter: grayscale(100%) brightness(2);
}
.banner.banner[data-visual-style="gradient-mesh"] {
background: var(--hero-bg-dark);
color: var(--text-inverse-primary);
box-shadow: var(--shadow-xl);
border: none;
}
.banner.banner[data-visual-style="gradient-mesh"] .banner__mesh-orb {
position: absolute;
filter: var(--blur-decorative);
pointer-events: none;
}
.banner.banner[data-visual-style="gradient-mesh"] .banner__mesh-orb--1 {
inset-block-start: 22%;
inset-inline-start: 42%;
inline-size: 28%;
block-size: 32%;
background: radial-gradient(
ellipse at center,
rgba(var(--color-accent-rgb), 0.35) 0%,
rgba(var(--color-accent-rgb), 0.12) 50%,
transparent 75%
);
animation: vsMeshFloat var(--animation-float) ease-in-out infinite;
}
.banner.banner[data-visual-style="gradient-mesh"] .banner__mesh-orb--2 {
inset-block-start: 45%;
inset-inline-start: 28%;
inline-size: 30%;
block-size: 32%;
background: radial-gradient(
ellipse at center,
rgba(var(--color-highlight-rgb), 0.32) 0%,
rgba(var(--color-highlight-rgb), 0.10) 50%,
transparent 75%
);
animation: vsMeshFloat var(--animation-float-slow) ease-in-out infinite reverse;
}
.banner.banner[data-visual-style="gradient-mesh"] .banner__mesh-orb--3 {
inset-block-start: 50%;
inset-inline-start: 58%;
inline-size: 24%;
block-size: 28%;
background: radial-gradient(
ellipse at center,
rgba(var(--color-secondary-rgb), 0.36) 0%,
rgba(var(--color-secondary-rgb), 0.12) 50%,
transparent 75%
);
animation: vsMeshFloat calc(var(--animation-float) * 1.4) ease-in-out infinite;
}
.banner.banner[data-visual-style="gradient-mesh"] .banner__content {
position: relative;
z-index: 2;
}
.banner.banner[data-visual-style="gradient-mesh"] .banner__description {
color: var(--hero-text-dark-description);
}
.banner.banner[data-visual-style="gradient-mesh"] .form-message,
.banner.banner[data-visual-style="gradient-mesh"] .form-message p,
.banner.banner[data-visual-style="gradient-mesh"] .form-message span,
.banner.banner[data-visual-style="gradient-mesh"] .form-message ul,
.banner.banner[data-visual-style="gradient-mesh"] .form-message ol,
.banner.banner[data-visual-style="gradient-mesh"] .form-message li,
.banner.banner[data-visual-style="gradient-mesh"] .form-message strong,
.banner.banner[data-visual-style="gradient-mesh"] .form-message em {
color: var(--hero-text-dark-description);
}
.banner.banner[data-visual-style="gradient-mesh"] .banner__description p,
.banner.banner[data-visual-style="gradient-mesh"] .banner__description ul,
.banner.banner[data-visual-style="gradient-mesh"] .banner__description ol,
.banner.banner[data-visual-style="gradient-mesh"] .banner__description li,
.banner.banner[data-visual-style="gradient-mesh"] .banner__description span,
.banner.banner[data-visual-style="gradient-mesh"] .banner__description strong,
.banner.banner[data-visual-style="gradient-mesh"] .banner__description em {
color: inherit;
}
.banner.banner[data-visual-style="gradient-mesh"]:hover {
box-shadow: var(--shadow-2xl);
transform: translateY(-3px);
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]) {
background: var(--hero-bg-dark, var(--neutral-900));
border: none;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"])::after {
border-radius: var(--radius-xl);
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]) .card__title,
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]) .card__subtitle {
position: relative;
z-index: 2;
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .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));
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]) .card__description p,
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]) .card__description ul,
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]) .card__description ol,
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]) .card__description li,
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]) .card__description span,
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]) .card__description strong,
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]) .card__description em {
color: inherit;
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]) .card__icon {
position: relative;
z-index: 2;
color: var(--color-highlight);
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"]):hover {
box-shadow: var(--shadow-2xl);
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="gradient-mesh"]) {
background: var(--hero-bg-dark, var(--neutral-900));
border: none;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
position: relative;
overflow: hidden;
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="gradient-mesh"])::after {
border-radius: var(--radius-xl);
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="gradient-mesh"]):hover {
box-shadow: var(--shadow-2xl);
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="gradient-mesh"]) .grid-item__article-title {
position: relative;
z-index: 2;
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item--article:not([data-item-style]), .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));
}
:is(.grid-block[data-visual-style="gradient-mesh"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="gradient-mesh"]) .grid-item__article-category {
position: relative;
z-index: 2;
color: var(--color-primary-light);
}
:is(.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide:not([data-slide-style]), .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(--vs-text-primary);
overflow: hidden;
}
:is(.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-mesh"])::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 65% 70% at 15% 20%,
rgba(var(--color-primary-rgb), 0.55) 0%,
rgba(var(--color-primary-rgb), 0.3) 35%,
rgba(var(--color-primary-rgb), 0.1) 60%,
transparent 80%
);
filter: var(--blur-decorative-lg);
animation: vsMeshFloat var(--animation-float) ease-in-out infinite;
z-index: 0;
}
:is(.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-mesh"])::after {
border-radius: var(--radius-xl);
}
:is(.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-mesh"]) .carousel-slide__title {
position: relative;
z-index: 2;
}
:is(.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-mesh"]) .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-mesh"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-mesh"]) .carousel-slide__cta,
:is(.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-mesh"]) .lexical-content {
position: relative;
z-index: 2;
}
:is(.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-mesh"]):hover {
box-shadow: var(--shadow-2xl);
}
:is(.carousel-block[data-visual-style="gradient-mesh"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="gradient-mesh"]) .carousel-slide__article-title {
position: relative;
z-index: 2;
}
.tabs.tabs[data-visual-style="gradient-mesh"] .tabs__button--active {
position: relative;
font-family: var(--font-sans);
font-weight: var(--font-weight-bold);
background: var(--_vs-title-bg);
background-size: var(--_vs-title-size);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: vsGradientShift var(--animation-gradient) ease infinite;
will-change: background-position;
border: none;
box-shadow: none;
}
.tabs.tabs[data-visual-style="gradient-mesh"] .tabs__button--active::before {
content: '';
position: absolute;
inset: 0;
background: var(--vs-bg);
border-radius: inherit;
z-index: -1;
}
.tabs.tabs.tabs--underline[data-visual-style="gradient-mesh"] .tabs__button--active {
-webkit-background-clip: initial !important;
-webkit-text-fill-color: var(--color-primary-text) !important;
background-clip: initial !important;
}
.tabs.tabs.tabs--underline[data-visual-style="gradient-mesh"] .tabs__button:hover:not(.tabs__button--active) {
color: var(--text-secondary) !important;
}
.tabs.tabs[data-visual-style="gradient-mesh"] .tabs__button:not(.tabs__button--active) {
color: var(--text-secondary);
}
.tabs.tabs[data-visual-style="gradient-mesh"] .tabs__button:hover:not(.tabs__button--active) {
background: var(--neutral-900);
color: var(--color-primary-light);
}
.tabs.tabs[data-visual-style="gradient-mesh"] .tabs__panels {
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;
}
.tabs.tabs[data-visual-style="gradient-mesh"] .tabs__panels::after {
border-radius: var(--radius-xl);
}
.tabs.tabs[data-visual-style="gradient-mesh"] .tabs__panel {
position: relative;
z-index: 2;
}
.tabs.tabs[data-visual-style="gradient-mesh"] .tabs__panel .lexical-content {
--lexical-color: var(--hero-text-dark-description);
--lexical-heading-color: var(--text-inverse-primary);
--lexical-link-color: var(--color-primary-light);
--lexical-link-hover-color: var(--color-secondary-light);
--lexical-quote-color: var(--hero-text-dark-description);
--lexical-strong-color: var(--text-inverse-primary);
--lexical-spacing: var(--space-s);
color: var(--hero-text-dark-description);
}
.header-master[data-visual-style="gradient-mesh"] {
background: var(--hero-bg-dark);
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);
--_mesh-orb-block-start: -50%;
--_mesh-orb-inline-start: -10%;
--_mesh-orb-inline-size: 50%;
--_mesh-orb-block-size: 200%;
}
.header-master[data-visual-style="gradient-mesh"]::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 35% 150% at 90% 50%,
rgba(var(--color-accent-rgb), 0.5) 0%,
rgba(var(--color-accent-rgb), 0.2) 40%,
transparent 70%
),
radial-gradient(
ellipse 40% 120% at 70% 100%,
rgba(var(--color-secondary-rgb), 0.55) 0%,
rgba(var(--color-secondary-rgb), 0.25) 40%,
transparent 70%
);
filter: var(--blur-decorative);
animation: vsMeshFloat var(--animation-float-slow) ease-in-out infinite reverse;
z-index: 0;
pointer-events: none;
}
.header-master[data-visual-style="gradient-mesh"] .nav-item__icon,
.header-master[data-visual-style="gradient-mesh"] .nav-item__chevron {
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
}
.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;
animation: none;
color: var(--text-inverse-primary);
}
.header-master[data-visual-style="gradient-mesh"] .nav-item:hover {
filter: brightness(1.15);
}
.header-master[data-visual-style="gradient-mesh"] .nav-dropdown {
background: var(--hero-bg-dark);
border: var(--border-width) solid rgba(var(--color-primary-rgb), 0.2);
box-shadow: 0 4px 24px rgba(var(--color-primary-rgb), 0.2);
}
.header-master[data-visual-style="gradient-mesh"] .nav-dropdown__item {
color: var(--hero-text-dark-description);
}
.header-master[data-visual-style="gradient-mesh"] .nav-dropdown__item:hover {
background: rgba(var(--color-primary-rgb), 0.1);
}
.header-master[data-visual-style="gradient-mesh"] .burger-menu-toggle__bar {
background: var(--text-inverse-primary);
}
.header-master[data-visual-style="gradient-mesh"] .burger-menu-toggle:hover .burger-menu-toggle__bar {
background: var(--color-primary-light);
}
:is(
.spotlight[data-visual-style="gradient-mesh"] .spotlight__card,
.spotlight[data-visual-style="gradient-mesh"] .spotlight__panel,
.timeline[data-visual-style="gradient-mesh"] .timeline__card
) {
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(
.spotlight[data-visual-style="gradient-mesh"] .spotlight__card,
.spotlight[data-visual-style="gradient-mesh"] .spotlight__panel,
.timeline[data-visual-style="gradient-mesh"] .timeline__card
)::after {
border-radius: var(--radius-3xl);
}
:is(
.spotlight[data-visual-style="gradient-mesh"] .spotlight__card,
.spotlight[data-visual-style="gradient-mesh"] .spotlight__panel,
.timeline[data-visual-style="gradient-mesh"] .timeline__card
) > * {
position: relative;
z-index: 1;
}
:is(
.spotlight[data-visual-style="gradient-mesh"] .spotlight__card,
.spotlight[data-visual-style="gradient-mesh"] .spotlight__panel,
.timeline[data-visual-style="gradient-mesh"] .timeline__card
):hover {
box-shadow: var(--shadow-2xl);
}
.spotlight[data-visual-style="gradient-mesh"] .spotlight__card-desc,
.spotlight[data-visual-style="gradient-mesh"] .spotlight__panel-desc,
.timeline[data-visual-style="gradient-mesh"] .timeline__desc {
--lexical-color: var(--hero-text-dark-description);
--lexical-heading-color: var(--text-inverse-primary);
--lexical-link-color: var(--color-primary-light);
--lexical-link-hover-color: var(--color-secondary-light);
--lexical-quote-color: var(--hero-text-dark-description);
--lexical-strong-color: var(--text-inverse-primary);
color: var(--hero-text-dark-description);
}
.timeline[data-visual-style="gradient-mesh"] .timeline__ref {
color: var(--color-primary-light);
}
.timeline[data-visual-style="gradient-mesh"] .timeline__desc strong {
color: var(--color-primary-light);
}