[data-visual-style="dark"],
[data-item-style="dark"],
[data-slide-style="dark"] {
--vs-bg: var(--gradient-dark);
--vs-text-primary: var(--text-inverse-primary);
--vs-text-secondary: var(--text-inverse-secondary);
--vs-border: var(--border-inverse-subtle);
--vs-border-width: 1px;
--vs-shadow: var(--shadow-lg);
--vs-backdrop: none;
--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);
--focus-ring: var(--focus-ring-on-dark);
}
:is(
.hero.hero[data-visual-style="dark"],
.banner.banner[data-visual-style="dark"],
.header-master[data-visual-style="dark"],
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]),
:is(.grid-block[data-visual-style="dark"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="dark"]),
:is(.carousel-block[data-visual-style="dark"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="dark"]),
.tabs.tabs[data-visual-style="dark"] .tabs__button--active,
.tabs.tabs[data-visual-style="dark"] .tabs__panels,
.grid-block .grid-item.card.card--feature[data-item-style="dark"],
.grid-block .grid-item--article[data-item-style="dark"],
.carousel-block .carousel-slide[data-slide-style="dark"],
.spotlight[data-visual-style="dark"] .spotlight__card,
.spotlight[data-visual-style="dark"] .spotlight__panel,
.timeline[data-visual-style="dark"] .timeline__card
)::before {
content: '';
display: block;
position: absolute;
inset-block-start: 0;
inset-inline: 10%;
block-size: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--border-inverse-subtle) 50%,
transparent 100%
);
pointer-events: none;
z-index: var(--_dark-line-z, 0);
}
.tabs.tabs[data-visual-style="dark"] .tabs__button--active::before {
border-radius: inherit;
}
.hero.hero[data-visual-style="dark"] {
background: var(--gradient-dark);
color: var(--text-inverse-primary);
border: var(--border-width) solid var(--border-inverse-subtle);
box-shadow: var(--shadow-dark-card);
}
.hero.hero[data-visual-style="dark"] .hero__title {
background: none;
-webkit-text-fill-color: var(--text-inverse-primary);
color: var(--text-inverse-primary);
animation: none;
text-shadow: var(--text-shadow-lg);
}
.hero.hero[data-visual-style="dark"] .hero__description {
color: var(--text-inverse-secondary);
}
.hero.hero[data-visual-style="dark"] .hero__social-proof-text {
color: var(--text-inverse-secondary);
}
.hero.hero[data-visual-style="dark"] .hero__social-proof-logo {
filter: grayscale(100%) brightness(2);
}
.hero.hero[data-visual-style="dark"] .hero__description .lexical-content {
--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);
}
.hero.hero[data-visual-style="dark"] .hero__description .lexical-content ul {
list-style: disc;
padding-inline-start: var(--lexical-list-indent, var(--space-l));
}
.hero.hero[data-visual-style="dark"] .hero__description .lexical-content ol {
list-style: decimal;
padding-inline-start: var(--lexical-list-indent, var(--space-l));
}
.hero.hero[data-visual-style="dark"] .hero__description .lexical-content code {
background: rgba(255, 255, 255, 0.1);
color: var(--color-accent-light);
}
.hero.hero[data-visual-style="dark"] .hero__description .lexical-content pre {
background: rgba(255, 255, 255, 0.05);
border-color: var(--border-inverse-subtle);
}
.hero.hero[data-visual-style="dark"] .hero__description .lexical-content blockquote {
border-color: var(--color-primary-light);
}
.banner.banner[data-visual-style="dark"] {
background: var(--gradient-dark);
color: var(--text-inverse-primary);
border: var(--border-width) solid var(--border-inverse-subtle);
box-shadow: var(--shadow-dark-card);
}
.banner.banner[data-visual-style="dark"] .banner__title {
text-shadow: var(--text-shadow-lg);
color: var(--text-inverse-primary);
}
.banner.banner[data-visual-style="dark"] .banner__description {
color: var(--text-inverse-secondary);
}
.banner.banner[data-visual-style="dark"] .form-message,
.banner.banner[data-visual-style="dark"] .form-message p,
.banner.banner[data-visual-style="dark"] .form-message span,
.banner.banner[data-visual-style="dark"] .form-message ul,
.banner.banner[data-visual-style="dark"] .form-message ol,
.banner.banner[data-visual-style="dark"] .form-message li,
.banner.banner[data-visual-style="dark"] .form-message strong,
.banner.banner[data-visual-style="dark"] .form-message em {
color: var(--text-inverse-secondary);
}
.banner.banner[data-visual-style="dark"] .banner__description h1,
.banner.banner[data-visual-style="dark"] .banner__description h2,
.banner.banner[data-visual-style="dark"] .banner__description h3,
.banner.banner[data-visual-style="dark"] .banner__description h4,
.banner.banner[data-visual-style="dark"] .banner__description h5,
.banner.banner[data-visual-style="dark"] .banner__description h6 {
text-shadow: var(--text-shadow-lg);
color: var(--text-inverse-primary);
}
.banner.banner[data-visual-style="dark"] .banner__description .lexical-content {
--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);
}
.banner.banner[data-visual-style="dark"] .banner__description .lexical-content code {
background: var(--shine-light);
color: var(--color-accent-light);
}
.banner.banner[data-visual-style="dark"] .banner__description .lexical-content pre {
background: var(--shine-subtle);
border-color: var(--border-inverse-subtle);
}
.banner.banner[data-visual-style="dark"] .banner__description .lexical-content blockquote {
border-color: var(--color-primary-light);
}
.banner.banner[data-visual-style="dark"]:hover {
box-shadow: var(--shadow-2xl);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) {
background: var(--gradient-dark);
border: var(--border-width) solid var(--border-inverse-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-dark-card);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__title,
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__subtitle {
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-lg);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description {
color: var(--text-inverse-secondary);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description p,
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description ul,
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description ol,
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description li,
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description span,
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description strong,
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description em {
color: inherit;
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description .lexical-content {
--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);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description .lexical-content ul {
list-style: disc;
padding-inline-start: var(--lexical-list-indent, var(--space-l));
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description .lexical-content ol {
list-style: decimal;
padding-inline-start: var(--lexical-list-indent, var(--space-l));
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description .lexical-content code {
background: rgba(255, 255, 255, 0.1);
color: var(--color-accent-light);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description .lexical-content blockquote {
border-color: var(--color-primary-light);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description .lexical-content li {
padding-inline-start: var(--space-s);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description .lexical-content a:hover {
text-decoration-thickness: 2px;
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description .lexical-content pre {
background: rgba(255, 255, 255, 0.05);
border-color: var(--border-inverse-subtle);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description .lexical-content pre code {
background: transparent;
color: var(--text-inverse-secondary);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description .lexical-content s {
color: var(--neutral-500);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description .lexical-content mark {
background: rgba(var(--color-warning-rgb), 0.3);
color: var(--text-inverse-primary);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__description .lexical-content hr {
background: var(--border-inverse-subtle);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]) .card__icon {
color: var(--color-primary-light);
}
:is(.grid-block[data-visual-style="dark"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="dark"]):hover {
box-shadow: var(--shadow-dark-card-hover);
}
:is(.grid-block[data-visual-style="dark"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="dark"]) {
background: var(--gradient-dark);
border: var(--border-width) solid var(--border-inverse-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-dark-card);
position: relative;
overflow: hidden;
}
:is(.grid-block[data-visual-style="dark"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="dark"]):hover {
box-shadow: var(--shadow-dark-card-hover);
}
:is(.grid-block[data-visual-style="dark"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="dark"]) .grid-item__article-title {
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-lg);
}
:is(.grid-block[data-visual-style="dark"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="dark"]) .grid-item__article-excerpt {
color: var(--hero-text-dark-description, var(--text-inverse-secondary));
}
:is(.grid-block[data-visual-style="dark"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="dark"]) .grid-item__article-category {
color: var(--color-primary-light);
}
:is(.carousel-block[data-visual-style="dark"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="dark"]) {
position: relative;
background: var(--vs-bg);
border: var(--vs-border-width) solid var(--vs-border);
box-shadow: var(--shadow-dark-card);
color: var(--vs-text-primary);
}
:is(.carousel-block[data-visual-style="dark"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="dark"]) .carousel-slide__title {
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-lg);
}
:is(.carousel-block[data-visual-style="dark"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="dark"]) .lexical-content {
--lexical-color: var(--text-inverse-secondary);
--lexical-heading-color: var(--text-inverse-primary);
--lexical-link-color: var(--color-primary-light);
--lexical-quote-color: var(--text-inverse-secondary);
--lexical-strong-color: var(--text-inverse-primary);
color: var(--text-inverse-secondary);
}
:is(.carousel-block[data-visual-style="dark"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="dark"]) .carousel-slide__cta,
:is(.carousel-block[data-visual-style="dark"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="dark"]) .lexical-content {
position: relative;
z-index: 1;
}
:is(.carousel-block[data-visual-style="dark"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="dark"]):hover {
box-shadow: var(--shadow-2xl);
}
:is(.carousel-block[data-visual-style="dark"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="dark"]) .carousel-slide__article-title {
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-lg);
}
.tabs.tabs[data-visual-style="dark"] .tabs__button--active {
background: var(--gradient-dark);
font-family: var(--font-sans);
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-lg);
border: var(--border-width) solid var(--border-inverse-subtle);
box-shadow: var(--shadow-xl);
position: relative;
}
.tabs.tabs--underline[data-visual-style="dark"] .tabs__button--active {
background: transparent;
border: none;
box-shadow: none;
text-shadow: none;
color: var(--text-primary);
}
.tabs.tabs--underline[data-visual-style="dark"] .tabs__button--active::before {
display: none;
}
.tabs.tabs--underline[data-visual-style="dark"] .tabs__button:hover:not(.tabs__button--active) {
background: transparent;
}
.tabs.tabs[data-visual-style="dark"] .tabs__button:not(.tabs__button--active) {
color: var(--text-secondary);
}
.tabs.tabs[data-visual-style="dark"] .tabs__button:hover:not(.tabs__button--active) {
color: var(--text-primary);
background: rgba(0, 0, 0, 0.05);
}
.tabs.tabs[data-visual-style="dark"] .tabs__panels {
background: var(--gradient-dark);
color: var(--text-inverse-secondary);
border: var(--border-width) solid var(--border-inverse-subtle);
box-shadow: var(--shadow-dark-card);
position: relative;
}
.tabs.tabs[data-visual-style="dark"] .tabs__panels {
--_dark-line-z: 1;
}
.tabs.tabs[data-visual-style="dark"] .tabs__panel {
position: relative;
z-index: 1;
}
.tabs.tabs[data-visual-style="dark"] .tabs__panel .lexical-content {
--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);
--lexical-spacing: var(--space-s);
color: var(--text-inverse-secondary);
}
.header-master[data-visual-style="dark"] {
background: var(--gradient-dark);
color: var(--text-inverse-primary);
border: var(--border-width) solid var(--border-inverse-subtle);
box-shadow: var(--shadow-dark-card);
--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="dark"] .nav-item,
.header-master[data-visual-style="dark"] .logo-wrapper a {
font-family: var(--font-sans);
font-weight: var(--font-weight-bold);
text-shadow: var(--text-shadow-lg);
letter-spacing: var(--tracking-tight);
color: var(--text-inverse-primary);
}
.header-master[data-visual-style="dark"] .nav-item:hover {
background: var(--header-hover-bg);
color: var(--header-hover-text);
}
.header-master[data-visual-style="dark"] .nav-dropdown {
background: var(--neutral-900);
border: var(--border-width) solid var(--border-inverse-subtle);
}
.header-master[data-visual-style="dark"] .nav-dropdown__item {
color: var(--text-inverse-primary);
}
.header-master[data-visual-style="dark"] .nav-dropdown__item:hover {
background: var(--neutral-800);
}
.header-master[data-visual-style="dark"] .burger-menu-toggle__bar {
background: var(--text-inverse-primary);
}
.header-master[data-visual-style="dark"] .burger-menu-toggle:hover .burger-menu-toggle__bar {
background: var(--color-primary-light);
}
:is(
.spotlight[data-visual-style="dark"] .spotlight__card,
.spotlight[data-visual-style="dark"] .spotlight__panel,
.timeline[data-visual-style="dark"] .timeline__card
) {
position: relative;
background: var(--gradient-dark);
border: var(--vs-border-width) solid var(--vs-border);
box-shadow: var(--shadow-dark-card);
}
:is(
.spotlight[data-visual-style="dark"] .spotlight__card,
.spotlight[data-visual-style="dark"] .spotlight__panel,
.timeline[data-visual-style="dark"] .timeline__card
) > * {
position: relative;
z-index: 1;
}
:is(
.spotlight[data-visual-style="dark"] .spotlight__card,
.spotlight[data-visual-style="dark"] .spotlight__panel,
.timeline[data-visual-style="dark"] .timeline__card
):hover {
box-shadow: var(--shadow-dark-card-hover);
}
.spotlight[data-visual-style="dark"] .spotlight__card-title,
.spotlight[data-visual-style="dark"] .spotlight__panel-title,
.timeline[data-visual-style="dark"] .timeline__step-title {
color: var(--text-inverse-primary);
text-shadow: var(--text-shadow-lg);
}
.spotlight[data-visual-style="dark"] .spotlight__card-desc,
.spotlight[data-visual-style="dark"] .spotlight__panel-desc,
.timeline[data-visual-style="dark"] .timeline__desc {
--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);
}
.timeline[data-visual-style="dark"] .timeline__ref {
color: var(--color-primary-light);
}
.timeline[data-visual-style="dark"] .timeline__desc strong {
color: var(--color-primary-light);
}