[data-visual-style="brand"],
[data-item-style="brand"],
[data-slide-style="brand"] {
--vs-text-primary: var(--text-primary);
--vs-text-secondary: var(--text-secondary);
--vs-backdrop: none;
--vs-accent-border: var(--border-accent-width) solid var(--color-primary);
--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);
}
[data-visual-style="brand"],
[data-item-style="brand"],
[data-slide-style="brand"] {
--vs-bg: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.06) 0%, rgba(var(--color-primary-rgb), 0.02) 100%);
--vs-border: var(--border-subtle);
--vs-border-width: 1px;
--vs-shadow: var(--shadow-md);
--vs-shadow-brand-hover:
var(--shadow-lg),
0 0 30px rgba(var(--color-primary-rgb), 0.1);
}
:is(
.hero.hero[data-visual-style="brand"],
.banner.banner[data-visual-style="brand"],
.header-master[data-visual-style="brand"],
:is(.grid-block[data-visual-style="brand"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="brand"]),
:is(.grid-block[data-visual-style="brand"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="brand"]),
:is(.carousel-block[data-visual-style="brand"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="brand"]),
.grid-block .grid-item.card.card--feature[data-item-style="brand"],
.grid-block .grid-item--article[data-item-style="brand"],
.carousel-block .carousel-slide[data-slide-style="brand"],
.spotlight[data-visual-style="brand"] .spotlight__card,
.spotlight[data-visual-style="brand"] .spotlight__panel,
.timeline[data-visual-style="brand"] .timeline__card
)::before {
content: '';
display: block;
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: var(--_brand-glow-inline-size, 40%);
block-size: var(--_brand-glow-block-size, 50%);
background: radial-gradient(
ellipse at top left,
rgba(var(--color-primary-rgb), 0.08) 0%,
transparent 70%
);
pointer-events: none;
z-index: 0;
}
.hero.hero[data-visual-style="brand"] {
background: var(--vs-bg);
border-inline-start: var(--vs-accent-border);
box-shadow: var(--vs-shadow);
color: var(--text-primary);
}
.hero.hero[data-visual-style="brand"] .hero__title {
background: none;
-webkit-text-fill-color: var(--text-primary);
color: var(--text-primary);
animation: none;
text-shadow: var(--text-shadow-md);
}
.hero.hero[data-visual-style="brand"] .hero__description {
color: var(--text-secondary);
text-shadow: var(--text-shadow-sm);
}
.hero.hero[data-visual-style="brand"] .hero__social-proof-text {
color: var(--text-tertiary);
}
.banner.banner[data-visual-style="brand"] {
background: var(--vs-bg);
border-inline-start: var(--vs-accent-border);
box-shadow: var(--vs-shadow);
color: var(--text-primary);
}
.banner.banner[data-visual-style="brand"] .banner__content {
position: relative;
z-index: var(--z-elevated);
}
.banner.banner[data-visual-style="brand"] .banner__title {
text-shadow: var(--text-shadow-lg);
background: none;
-webkit-text-fill-color: var(--text-primary);
color: var(--text-primary);
animation: none;
}
.banner.banner[data-visual-style="brand"] .banner__description {
color: var(--text-secondary);
}
.banner.banner[data-visual-style="brand"] .form-message,
.banner.banner[data-visual-style="brand"] .form-message p,
.banner.banner[data-visual-style="brand"] .form-message span,
.banner.banner[data-visual-style="brand"] .form-message ul,
.banner.banner[data-visual-style="brand"] .form-message ol,
.banner.banner[data-visual-style="brand"] .form-message li,
.banner.banner[data-visual-style="brand"] .form-message strong,
.banner.banner[data-visual-style="brand"] .form-message em {
color: var(--text-secondary);
}
.banner.banner[data-visual-style="brand"] .banner__description h1,
.banner.banner[data-visual-style="brand"] .banner__description h2,
.banner.banner[data-visual-style="brand"] .banner__description h3,
.banner.banner[data-visual-style="brand"] .banner__description h4,
.banner.banner[data-visual-style="brand"] .banner__description h5,
.banner.banner[data-visual-style="brand"] .banner__description h6 {
text-shadow: var(--text-shadow-lg);
background: none;
-webkit-text-fill-color: var(--text-primary);
color: var(--text-primary);
}
.banner.banner[data-visual-style="brand"]:hover {
box-shadow: var(--vs-shadow-brand-hover);
transform: translateY(-2px);
border-inline-start-color: var(--color-primary-hover);
}
:is(.grid-block[data-visual-style="brand"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="brand"]) {
background: var(--vs-bg);
border: var(--border-width) solid rgba(var(--color-primary-rgb), 0.15);
border-inline-start: var(--vs-accent-border);
border-radius: var(--radius-xl);
box-shadow: var(--vs-shadow);
}
:is(.grid-block[data-visual-style="brand"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="brand"]) .card__title,
:is(.grid-block[data-visual-style="brand"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="brand"]) .card__subtitle {
position: relative;
z-index: 1;
color: var(--text-primary);
text-shadow: var(--text-shadow-lg);
}
:is(.grid-block[data-visual-style="brand"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="brand"]) .card__description {
position: relative;
z-index: 1;
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
}
:is(.grid-block[data-visual-style="brand"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="brand"]) .card__icon {
position: relative;
z-index: 1;
}
:is(.grid-block[data-visual-style="brand"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="brand"]):hover {
box-shadow: var(--vs-shadow-brand-hover);
transform: translateY(-2px);
border-inline-start-color: var(--color-primary-hover);
}
:is(.grid-block[data-visual-style="brand"] .grid-item.card.card--feature:not([data-item-style]), .grid-block .grid-item.card.card--feature[data-item-style="brand"]):hover .card__title {
color: var(--text-primary);
}
:is(.grid-block[data-visual-style="brand"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="brand"]) {
background: var(--vs-bg);
border: var(--border-width) solid rgba(var(--color-primary-rgb), 0.15);
border-inline-start: var(--vs-accent-border);
border-radius: var(--radius-xl);
box-shadow: var(--vs-shadow);
position: relative;
overflow: hidden;
}
:is(.grid-block[data-visual-style="brand"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="brand"]):hover {
box-shadow: var(--vs-shadow-brand-hover);
transform: translateY(-2px);
border-inline-start-color: var(--color-primary-hover);
}
:is(.grid-block[data-visual-style="brand"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="brand"]):hover .grid-item__article-title {
color: var(--text-primary);
}
:is(.grid-block[data-visual-style="brand"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="brand"]) .grid-item__article-title {
position: relative;
z-index: 1;
color: var(--text-primary);
text-shadow: var(--text-shadow-lg);
}
:is(.grid-block[data-visual-style="brand"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="brand"]) .grid-item__article-excerpt {
position: relative;
z-index: 1;
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
}
:is(.grid-block[data-visual-style="brand"] .grid-item--article:not([data-item-style]), .grid-block .grid-item--article[data-item-style="brand"]) .grid-item__article-category {
position: relative;
z-index: 1;
color: var(--color-primary-text);
}
:is(.carousel-block[data-visual-style="brand"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="brand"]) {
position: relative;
background: var(--vs-bg);
border: var(--vs-border-width) solid var(--vs-border);
border-inline-start: var(--vs-accent-border);
box-shadow: var(--vs-shadow);
}
:is(.carousel-block[data-visual-style="brand"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="brand"]) .lexical-content {
--lexical-color: var(--text-secondary);
--lexical-heading-color: var(--text-primary);
--lexical-link-color: var(--color-primary-text);
--lexical-quote-color: var(--text-secondary);
--lexical-strong-color: var(--text-primary);
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
}
:is(.carousel-block[data-visual-style="brand"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="brand"]):hover {
box-shadow: var(--vs-shadow-brand-hover);
transform: translateY(-2px);
border-inline-start-color: var(--color-primary-hover);
}
:is(.carousel-block[data-visual-style="brand"] .carousel-slide:not([data-slide-style]), .carousel-block .carousel-slide[data-slide-style="brand"]) .carousel-slide__article-title {
color: var(--text-primary);
text-shadow: var(--text-shadow-md);
}
.tabs.tabs.tabs[data-visual-style="brand"] .tabs__button--active {
background: linear-gradient(
135deg,
var(--color-primary) 0%,
var(--color-primary-dark) 100%
);
color: var(--color-primary-contrast);
box-shadow: var(--shadow-md);
}
.tabs.tabs.tabs--underline[data-visual-style="brand"] .tabs__button--active {
background: transparent;
border: none;
box-shadow: none;
color: var(--color-primary-text);
}
.tabs.tabs.tabs--underline[data-visual-style="brand"] .tabs__button:hover:not(.tabs__button--active) {
background: transparent;
}
.tabs.tabs.tabs[data-visual-style="brand"] .tabs__button:not(.tabs__button--active) {
color: var(--text-secondary);
}
.tabs.tabs.tabs[data-visual-style="brand"] .tabs__button:hover:not(.tabs__button--active) {
color: var(--color-primary-text);
background: rgba(var(--color-primary-rgb), 0.08);
}
.tabs.tabs[data-visual-style="brand"] .tabs__panels {
position: relative;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-inline-start: var(--vs-accent-border);
border-block-start: var(--vs-border-width) solid rgba(var(--color-primary-rgb), 0.15);
border-inline-end: var(--vs-border-width) solid rgba(var(--color-primary-rgb), 0.15);
border-block-end: var(--vs-border-width) solid rgba(var(--color-primary-rgb), 0.15);
box-shadow: var(--shadow-md);
}
.tabs.tabs[data-visual-style="brand"] .tabs__panels::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(var(--color-primary-rgb), 0.04) 0%,
rgba(var(--color-primary-rgb), 0.01) 100%
);
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
.tabs.tabs[data-visual-style="brand"] .tabs__panel {
position: relative;
z-index: 1;
}
.header-master[data-visual-style="brand"] {
background: linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary) 6%, var(--bg-base)) 0%,
color-mix(in srgb, var(--color-primary) 2%, var(--bg-base)) 100%
);
color: var(--text-primary);
box-shadow: var(--shadow-md);
border-inline-start: var(--vs-accent-border);
--_brand-glow-inline-size: 30%;
--_brand-glow-block-size: 100%;
}
.header-master[data-visual-style="brand"] .nav-item,
.header-master[data-visual-style="brand"] .logo-wrapper a {
font-family: var(--font-sans);
font-weight: var(--font-extrabold);
letter-spacing: var(--tracking-tighter);
text-shadow: var(--text-shadow-lg);
background: none;
-webkit-text-fill-color: var(--text-primary);
color: var(--text-primary);
animation: none;
}
.header-master[data-visual-style="brand"] .nav-item:hover {
background: rgba(var(--color-primary-rgb), 0.08);
-webkit-text-fill-color: var(--color-primary-text);
color: var(--color-primary-text);
}
.header-master[data-visual-style="brand"] .nav-dropdown {
background: var(--bg-surface);
border: var(--border-width) solid var(--border-subtle);
}
.header-master[data-visual-style="brand"] .nav-dropdown__item {
color: var(--text-primary);
}
.header-master[data-visual-style="brand"] .nav-dropdown__item:hover {
background: rgba(var(--color-primary-rgb), 0.05);
}
.header-master[data-visual-style="brand"] .burger-menu-toggle__bar {
background: var(--text-inverse-primary);
}
.header-master[data-visual-style="brand"] .burger-menu-toggle:hover .burger-menu-toggle__bar {
background: var(--neutral-200);
}
.header-master[data-visual-style="brand"].header-master--blur-active {
background: var(--header-glass-bg-opaque-light);
}
:is(
.spotlight[data-visual-style="brand"] .spotlight__card,
.spotlight[data-visual-style="brand"] .spotlight__panel,
.timeline[data-visual-style="brand"] .timeline__card
) {
position: relative;
background: var(--vs-bg);
border: var(--border-width) solid rgba(var(--color-primary-rgb), 0.15);
border-inline-start: var(--vs-accent-border);
box-shadow: var(--vs-shadow);
}
:is(
.spotlight[data-visual-style="brand"] .spotlight__card,
.spotlight[data-visual-style="brand"] .spotlight__panel,
.timeline[data-visual-style="brand"] .timeline__card
) > * {
position: relative;
z-index: 1;
}
:is(
.spotlight[data-visual-style="brand"] .spotlight__card,
.spotlight[data-visual-style="brand"] .spotlight__panel,
.timeline[data-visual-style="brand"] .timeline__card
):hover {
box-shadow: var(--vs-shadow-brand-hover);
border-inline-start-color: var(--color-primary-hover);
}
.spotlight[data-visual-style="brand"] .spotlight__card-title,
.spotlight[data-visual-style="brand"] .spotlight__panel-title,
.timeline[data-visual-style="brand"] .timeline__step-title {
color: var(--text-primary);
text-shadow: var(--text-shadow-lg);
}
.spotlight[data-visual-style="brand"] .spotlight__card-desc,
.spotlight[data-visual-style="brand"] .spotlight__panel-desc,
.timeline[data-visual-style="brand"] .timeline__desc {
--lexical-color: var(--text-secondary);
--lexical-heading-color: var(--text-primary);
--lexical-link-color: var(--color-primary-text);
--lexical-quote-color: var(--text-secondary);
--lexical-strong-color: var(--text-primary);
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
}