[data-visual-style="light"],
[data-item-style="light"],
[data-slide-style="light"] {
--vs-bg: linear-gradient(180deg, var(--hero-bg-light) 0%, var(--hero-bg-light-tinted) 100%);
--vs-text-primary: var(--hero-text-light-title);
--vs-text-secondary: var(--hero-text-light-subtitle);
--vs-border: rgba(var(--color-primary-rgb), 0.1);
--vs-border-width: 1px;
--vs-shadow: var(--shadow-lg);
--vs-backdrop: none;
--vs-form-label: var(--text-primary);
--vs-form-text: var(--text-primary);
--vs-form-help: var(--text-secondary);
--vs-form-placeholder: var(--placeholder-on-light);
--vs-form-focus-border: var(--color-primary);
--vs-form-focus-shadow: rgba(var(--color-primary-rgb), 0.2);
}
.hero.hero[data-visual-style="light"] {
background: linear-gradient(
180deg,
var(--hero-bg-light) 0%,
var(--hero-bg-light-tinted) 100%
);
color: var(--text-primary);
}
.hero.hero[data-visual-style="light"]::before {
display: none;
}
.hero.hero[data-visual-style="light"]::after {
content: '';
position: absolute;
inset-block-end: 0;
inset-inline: 0;
block-size: var(--hero-decorative-line-height);
background: linear-gradient(
90deg,
transparent 0%,
var(--color-primary) 20%,
var(--color-secondary) 50%,
var(--color-primary) 80%,
transparent 100%
);
background-size: 200% 100%;
animation: vsGradientShift var(--animation-gradient) ease infinite;
will-change: background-position;
}
.hero.hero[data-visual-style="light"] .hero__title {
background: none;
-webkit-text-fill-color: var(--hero-text-light-title);
color: var(--hero-text-light-title);
animation: none;
text-shadow: var(--text-shadow-md);
}
.hero.hero[data-visual-style="light"] .hero__description {
color: var(--hero-text-light-description);
text-shadow: var(--text-shadow-sm);
}
.hero.hero[data-visual-style="light"] .hero__media {
box-shadow: var(--shadow-hero-media);
}
.hero.hero[data-visual-style="light"] .hero__social-proof-text {
color: var(--text-tertiary);
}
[data-theme="dark"] .hero.hero[data-visual-style="light"] {
background: var(--bg-base);
}
[data-theme="dark"] .hero.hero[data-visual-style="light"] .hero__title {
-webkit-text-fill-color: var(--text-primary);
}
.banner.banner[data-visual-style="light"] {
background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
color: var(--text-primary);
box-shadow: var(--shadow-md);
border: var(--border-width) solid var(--border-subtle);
}
.banner.banner[data-visual-style="light"]::before {
display: none;
}
.banner.banner[data-visual-style="light"] .banner__title {
color: var(--text-primary);
text-shadow: var(--text-shadow-md);
}
.banner.banner[data-visual-style="light"] .banner__description {
color: var(--hero-text-light-description);
}
.banner.banner[data-visual-style="light"] .form-message,
.banner.banner[data-visual-style="light"] .form-message p,
.banner.banner[data-visual-style="light"] .form-message span,
.banner.banner[data-visual-style="light"] .form-message ul,
.banner.banner[data-visual-style="light"] .form-message ol,
.banner.banner[data-visual-style="light"] .form-message li,
.banner.banner[data-visual-style="light"] .form-message strong,
.banner.banner[data-visual-style="light"] .form-message em {
color: var(--hero-text-light-description);
}
.banner.banner[data-visual-style="light"] .banner__description h1,
.banner.banner[data-visual-style="light"] .banner__description h2,
.banner.banner[data-visual-style="light"] .banner__description h3,
.banner.banner[data-visual-style="light"] .banner__description h4,
.banner.banner[data-visual-style="light"] .banner__description h5,
.banner.banner[data-visual-style="light"] .banner__description h6 {
color: var(--text-primary);
text-shadow: var(--text-shadow-md);
}
.banner.banner[data-visual-style="light"]:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.grid-block[data-visual-style="light"] .grid-item.card.card--feature {
background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
color: var(--text-primary);
border: var(--border-width) solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
.grid-block[data-visual-style="light"] .grid-item.card.card--feature::before {
display: none;
}
.grid-block[data-visual-style="light"] .grid-item.card.card--feature .card__title,
.grid-block[data-visual-style="light"] .grid-item.card.card--feature .card__subtitle {
color: var(--text-primary);
}
.grid-block[data-visual-style="light"] .grid-item.card.card--feature .card__description {
color: var(--hero-text-light-description);
}
.grid-block[data-visual-style="light"] .grid-item.card.card--feature:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.grid-block[data-visual-style="light"] .grid-item.card.card--feature:hover .card__title {
color: var(--text-primary);
}
.grid-block[data-visual-style="light"] .grid-item--article {
background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
color: var(--text-primary);
border: var(--border-width) solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
.grid-block[data-visual-style="light"] .grid-item--article::before {
display: none;
}
.grid-block[data-visual-style="light"] .grid-item--article:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.grid-block[data-visual-style="light"] .grid-item--article:hover .grid-item__article-title {
color: var(--text-primary);
}
.grid-block[data-visual-style="light"] .grid-item__article-title {
color: var(--text-primary);
text-shadow: var(--text-shadow-md);
}
.grid-block[data-visual-style="light"] .grid-item__article-excerpt {
color: var(--hero-text-light-description);
}
.grid-block[data-visual-style="light"] .grid-item__article-category {
color: var(--color-primary-text);
}
.carousel-block[data-visual-style="light"] .carousel-slide {
position: relative;
background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
color: var(--vs-text-primary);
border: var(--border-width) solid var(--border-subtle);
box-shadow: var(--shadow-md);
}
.carousel-block[data-visual-style="light"] .carousel-slide::before {
display: none;
}
.carousel-block[data-visual-style="light"] .lexical-content {
--lexical-color: var(--hero-text-light-description);
--lexical-heading-color: var(--text-primary);
--lexical-link-color: var(--color-primary-text);
--lexical-quote-color: var(--hero-text-light-description);
--lexical-strong-color: var(--text-primary);
color: var(--hero-text-light-description);
}
.carousel-block[data-visual-style="light"] .carousel-slide:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.carousel-block[data-visual-style="light"] .carousel-slide:hover .carousel-slide__title {
color: var(--vs-text-primary);
}
.carousel-block[data-visual-style="light"] .carousel-slide__article-title {
color: var(--hero-text-light-title);
text-shadow: var(--text-shadow-md);
}
.tabs.tabs[data-visual-style="light"] .tabs__panels {
background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
color: var(--text-primary);
box-shadow: var(--shadow-md);
border: var(--border-width) solid var(--border-subtle);
position: relative;
}
.tabs.tabs[data-visual-style="light"] .tabs__panels::before {
display: none;
}
.tabs.tabs[data-visual-style="light"] .tabs__panels:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.header-master[data-visual-style="light"] {
background: var(--bg-surface);
color: var(--text-primary);
box-shadow: var(--shadow-md);
border: var(--border-width) solid var(--border-subtle);
}
.header-master[data-visual-style="light"]::before {
display: none;
}
.header-master[data-visual-style="light"] .nav-item,
.header-master[data-visual-style="light"] .logo-wrapper a {
font-family: var(--font-sans);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
text-shadow: var(--text-shadow-md);
}
.header-master[data-visual-style="light"] .nav-item:hover {
background: rgba(var(--color-primary-rgb), 0.08);
color: var(--color-primary-text);
}
.header-master[data-visual-style="light"] .nav-dropdown {
background: var(--bg-surface);
border: var(--border-width) solid var(--border-subtle);
}
.header-master[data-visual-style="light"] .nav-dropdown__item {
color: var(--text-primary);
}
.header-master[data-visual-style="light"] .nav-dropdown__item:hover {
background: var(--bg-elevated);
}
.header-master[data-visual-style="light"] .burger-menu-toggle__bar {
background: var(--text-primary);
}
.header-master[data-visual-style="light"] .burger-menu-toggle:hover .burger-menu-toggle__bar {
background: var(--color-primary);
}
:is(
.spotlight[data-visual-style="light"] .spotlight__card,
.spotlight[data-visual-style="light"] .spotlight__panel,
.timeline[data-visual-style="light"] .timeline__card
) {
background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
border: var(--border-width) solid var(--border-subtle);
box-shadow: var(--shadow-md);
}
:is(
.spotlight[data-visual-style="light"] .spotlight__card,
.spotlight[data-visual-style="light"] .spotlight__panel,
.timeline[data-visual-style="light"] .timeline__card
)::before {
display: none;
}
:is(
.spotlight[data-visual-style="light"] .spotlight__card,
.spotlight[data-visual-style="light"] .spotlight__panel,
.timeline[data-visual-style="light"] .timeline__card
):hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.spotlight[data-visual-style="light"] .spotlight__card-title,
.spotlight[data-visual-style="light"] .spotlight__panel-title,
.timeline[data-visual-style="light"] .timeline__step-title {
color: var(--text-primary);
text-shadow: var(--text-shadow-md);
}
.spotlight[data-visual-style="light"] .spotlight__card-desc,
.spotlight[data-visual-style="light"] .spotlight__panel-desc,
.timeline[data-visual-style="light"] .timeline__desc {
--lexical-color: var(--hero-text-light-description);
--lexical-heading-color: var(--text-primary);
--lexical-link-color: var(--color-primary-text);
--lexical-quote-color: var(--hero-text-light-description);
--lexical-strong-color: var(--text-primary);
color: var(--hero-text-light-description);
}