[data-visual-style="gradient-mesh"],
[data-item-style="gradient-mesh"],
[data-slide-style="gradient-mesh"] {
--vs-encre-claire-2: var(--neutral-200);
--vs-backdrop: none;
}
[data-visual-style="gradient-mesh"],
[data-item-style="gradient-mesh"],
[data-slide-style="gradient-mesh"] {
--vs-nuit: color-mix(in oklab, var(--fond-sombre-primary, var(--color-primary)) 20%, black);
--vs-bg:
radial-gradient(44% 66% at 16% 20%,
color-mix(in oklab, var(--fond-degrade-gradient-decorative-1, var(--gradient-decorative-1)) 78%, white) 0%, transparent 58%),
radial-gradient(38% 56% at 84% 34%,
color-mix(in oklab, var(--fond-degrade-gradient-decorative-2, var(--gradient-decorative-2)) 74%, white) 0%, transparent 60%),
radial-gradient(52% 50% at 48% 108%,
color-mix(in oklab, var(--fond-degrade-gradient-decorative-3, var(--gradient-decorative-3)) 70%, white) 0%, transparent 62%),
var(--vs-nuit);
--vs-ink-brand: var(--ink-brand-vivid-on-dark);
--vs-border: rgb(255 255 255 / .09);
--vs-border-width: 1px;
--vs-shadow: inset 0 1px 0 rgb(255 255 255 / .16);
--vs-mesh-title-gradient: linear-gradient(
135deg,
var(--_vs-mesh-primaire) 0%,
var(--_vs-mesh-secondaire) 50%,
var(--_vs-mesh-primaire) 100%
);
--_vs-mesh-primaire: color-mix(
in srgb,
var(--color-primary-light) calc(var(--vs-encre, 1) * 100%),
var(--color-primary-dark)
);
--_vs-mesh-secondaire: color-mix(
in srgb,
var(--color-secondary-light) calc(var(--vs-encre, 1) * 100%),
var(--color-secondary-dark)
);
--_vs-mesh-surligneur: color-mix(
in srgb,
var(--color-highlight-light) calc(var(--vs-encre, 1) * 100%),
var(--color-highlight-dark)
);
--_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,
.list-details[data-visual-style="gradient-mesh"] .list-details__card,
.chapters[data-visual-style="gradient-mesh"] .chapters__card:not([data-item-style]),
.list-details[data-visual-style="gradient-mesh"] .list-details__panel,
.timeline[data-visual-style="gradient-mesh"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="gradient-mesh"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="gradient-mesh"],
:is(.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]), .bento .bento__tile.card.card--feature[data-item-style="gradient-mesh"]),
.section[data-visual-style="gradient-mesh"]:not(.section--full-bleed) .section__inner,
.section--full-bleed[data-visual-style="gradient-mesh"]
)::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: inherit;
filter: blur(30px);
opacity: .5;
z-index: 0;
}
:is(
.grid-block .grid-item.card.card--feature[data-item-style="gradient-mesh"],
.grid-block .grid-item--article[data-item-style="gradient-mesh"],
.bento .bento__tile.card.card--feature[data-item-style="gradient-mesh"]
)::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: inherit;
filter: blur(30px);
opacity: .5;
z-index: 0;
}
.hero.hero[data-visual-style="gradient-mesh"] {
background: var(--vs-bg);
color: var(--vs-text-primary);
--_vs-title-bg: linear-gradient(
135deg,
var(--_vs-mesh-primaire) 0%,
var(--_vs-mesh-secondaire) 33%,
var(--_vs-mesh-surligneur) 66%,
var(--_vs-mesh-primaire) 100%
);
}
.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 {
text-shadow: var(--vs-ombre-forte);
}
.banner.banner[data-visual-style="gradient-mesh"] {
background: var(--vs-bg);
color: var(--vs-text-primary);
box-shadow: var(--shadow-xl), var(--vs-elevation);
border: none;
}
.banner.banner[data-visual-style="gradient-mesh"] .banner__content {
position: relative;
z-index: 2;
}
.banner.banner[data-visual-style="gradient-mesh"] .banner__description,
.banner.banner[data-visual-style="gradient-mesh"] .banner__split:not([data-item-style]) .banner__split-content {
color: var(--vs-text-secondary);
}
.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(--vs-text-secondary);
}
.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,
.banner.banner[data-visual-style="gradient-mesh"] .banner__split:not([data-item-style]) .banner__split-content p,
.banner.banner[data-visual-style="gradient-mesh"] .banner__split:not([data-item-style]) .banner__split-content ul,
.banner.banner[data-visual-style="gradient-mesh"] .banner__split:not([data-item-style]) .banner__split-content ol,
.banner.banner[data-visual-style="gradient-mesh"] .banner__split:not([data-item-style]) .banner__split-content li,
.banner.banner[data-visual-style="gradient-mesh"] .banner__split:not([data-item-style]) .banner__split-content span,
.banner.banner[data-visual-style="gradient-mesh"] .banner__split:not([data-item-style]) .banner__split-content strong,
.banner.banner[data-visual-style="gradient-mesh"] .banner__split:not([data-item-style]) .banner__split-content em {
color: inherit;
}
.banner.banner[data-visual-style="gradient-mesh"]:hover {
box-shadow: var(--shadow-2xl), var(--vs-elevation-hover);
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"],
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="gradient-mesh"]
) {
background: var(--vs-bg);
border: none;
border-radius: var(--radius-composant-base);
box-shadow: var(--shadow-xl), var(--vs-elevation);
}
: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"],
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.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"],
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.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"],
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="gradient-mesh"]
) .card__description {
position: relative;
z-index: 2;
color: var(--vs-text-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"],
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.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"],
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.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"],
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.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"],
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.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"],
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.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"],
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.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"],
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.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"],
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="gradient-mesh"]
) .card__icon {
position: relative;
z-index: 2;
color: var(--vs-ink-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"],
.bento[data-visual-style="gradient-mesh"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="gradient-mesh"]
):hover {
box-shadow: var(--shadow-2xl), var(--vs-elevation-hover);
}
: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(--vs-bg);
border: none;
border-radius: var(--radius-composant-base);
box-shadow: var(--shadow-xl), var(--vs-elevation);
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"]):hover {
box-shadow: var(--shadow-2xl), var(--vs-elevation-hover);
}
: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(--vs-text-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(--vs-ink-brand);
}
: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), var(--vs-elevation);
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"]) .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-link-color: var(--color-primary-light);
color: var(--vs-text-secondary);
}
: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), var(--vs-elevation-hover);
}
: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;
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(--ink-brand) !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) {
color: var(--ink-brand-secondary);
background: color-mix(in srgb, var(--color-secondary) 8%, transparent);
}
.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), var(--vs-elevation);
color: var(--vs-text-primary);
overflow: hidden;
}
.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-link-color: var(--color-primary-light);
--lexical-spacing: var(--space-s);
color: var(--vs-text-secondary);
}
.header-master[data-visual-style="gradient-mesh"] {
background: var(--vs-bg);
color: var(--vs-text-primary);
box-shadow: var(--shadow-xl);
border: none;
--header-text: var(--vs-text-primary);
--header-text-secondary: var(--vs-text-secondary);
--header-border: var(--border-inverse-subtle);
--header-bg-surface: color-mix(in oklab, var(--color-primary) 12%, black);
--header-bg-elevated: color-mix(in oklab, var(--color-primary) 18%, black);
--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-mesh"] .nav-item__icon,
.header-master[data-visual-style="gradient-mesh"] .nav-item__chevron {
-webkit-text-fill-color: var(--vs-text-primary);
color: var(--vs-text-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(--vs-text-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(--vs-bg);
border: var(--border-width) solid color-mix(in srgb, var(--color-primary) 20%, transparent);
box-shadow: 0 4px 24px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.header-master[data-visual-style="gradient-mesh"] .nav-dropdown__icon {
color: var(--vs-text-secondary);
}
.header-master[data-visual-style="gradient-mesh"] .nav-dropdown__item {
color: var(--vs-text-secondary);
}
.header-master[data-visual-style="gradient-mesh"] .nav-dropdown__item:hover {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
:is(
.list-details[data-visual-style="gradient-mesh"] .list-details__card,
.chapters[data-visual-style="gradient-mesh"] .chapters__card:not([data-item-style]),
.list-details[data-visual-style="gradient-mesh"] .list-details__panel,
.timeline[data-visual-style="gradient-mesh"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="gradient-mesh"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="gradient-mesh"]
) {
position: relative;
background: var(--vs-bg);
border: var(--vs-border-width) solid var(--vs-border);
box-shadow: var(--vs-shadow), var(--vs-elevation);
color: var(--vs-text-primary);
overflow: hidden;
}
:is(
.list-details[data-visual-style="gradient-mesh"] .list-details__card,
.chapters[data-visual-style="gradient-mesh"] .chapters__card:not([data-item-style]),
.list-details[data-visual-style="gradient-mesh"] .list-details__panel,
.timeline[data-visual-style="gradient-mesh"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="gradient-mesh"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="gradient-mesh"]
) > * {
position: relative;
z-index: 1;
}
:is(
.list-details[data-visual-style="gradient-mesh"] .list-details__card,
.chapters[data-visual-style="gradient-mesh"] .chapters__card:not([data-item-style]),
.list-details[data-visual-style="gradient-mesh"] .list-details__panel,
.timeline[data-visual-style="gradient-mesh"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="gradient-mesh"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="gradient-mesh"]
):hover {
box-shadow: var(--shadow-2xl), var(--vs-elevation-hover);
}
.list-details[data-visual-style="gradient-mesh"] .list-details__card-desc,
.list-details[data-visual-style="gradient-mesh"] .list-details__panel-desc,
.timeline[data-visual-style="gradient-mesh"] .timeline__desc,
:is(.testimonial, .bento)[data-visual-style="gradient-mesh"] .testimonial__item:not([data-item-style]) .testimonial__quote,
:is(.testimonial, .bento) .testimonial__item[data-item-style="gradient-mesh"] .testimonial__quote {
--lexical-link-color: var(--color-primary-light);
color: var(--vs-text-secondary);
}
.timeline[data-visual-style="gradient-mesh"] .timeline__ref {
color: var(--vs-ink-brand);
}
.timeline[data-visual-style="gradient-mesh"] .timeline__desc strong {
color: var(--vs-ink-brand);
}