[data-visual-style="holographic"],
[data-item-style="holographic"],
[data-slide-style="holographic"] {
--vs-sombre-charte: color-mix(in oklab, var(--color-primary) 34%, black);
--vs-floor-holo: color-mix(in oklab, var(--vs-white-pivot, white) 90%, var(--vs-sombre-charte));
--vs-bg:
var(--vs-relief-layer),
linear-gradient(112deg,
transparent 31%,
rgb(255 255 255 / .64) 48%,
transparent 67%),
linear-gradient(112deg,
color-mix(in oklab, color-mix(in oklab, var(--fond-diluee-secondary, var(--color-secondary)) 78%, white) 20%, var(--vs-floor-holo))   0%,
color-mix(in oklab, color-mix(in oklab, var(--fond-diluee-secondary, var(--color-secondary)) 78%, white) 20%, var(--vs-floor-holo))  25%,
color-mix(in oklab, color-mix(in oklab, var(--fond-diluee-primary, var(--color-primary))   78%, white) 46%, var(--vs-floor-holo))  37%,
color-mix(in oklab, color-mix(in oklab, var(--fond-diluee-accent, var(--color-accent))    76%, white) 49%, var(--vs-floor-holo))  48%,
color-mix(in oklab, var(--color-highlight) 18%, var(--vs-floor-holo))  57%,
color-mix(in oklab, color-mix(in oklab, var(--fond-diluee-secondary, var(--color-secondary)) 78%, white) 20%, var(--vs-floor-holo))  75%,
color-mix(in oklab, color-mix(in oklab, var(--fond-diluee-secondary, var(--color-secondary)) 78%, white) 20%, var(--vs-floor-holo)) 100%);
--vs-text-primary: var(--hero-text-light-title);
--vs-ink-brand: var(--ink-brand-vivid-on-light);
--vs-text-secondary: var(--neutral-800);
--vs-border: color-mix(in oklab, var(--vs-sombre-charte) 14%, transparent);
--vs-border-width: 1px;
--vs-shadow: inset 0 1px 0 rgb(255 255 255 / .70);
--vs-backdrop: none;
--vs-form-label: var(--hero-text-light-title);
--vs-form-text: var(--hero-text-light-title);
--vs-form-help: var(--hero-text-light-description);
--vs-form-placeholder: var(--placeholder-on-light);
}
.banner.banner[data-visual-style="holographic"] {
--vs-shadow: inset 0 1px 0 rgb(255 255 255 / .70), var(--vs-elevation);
}
.banner.banner[data-visual-style="holographic"]:hover {
--vs-shadow: var(--shadow-xl), inset 0 1px 0 var(--shine-strong), var(--vs-elevation-hover);
transform: translateY(-2px);
}
:is(
.grid-block[data-visual-style="holographic"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="holographic"],
.grid-block[data-visual-style="holographic"] .grid-item--article:not([data-item-style]),
.grid-block .grid-item--article[data-item-style="holographic"],
.carousel-block[data-visual-style="holographic"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="holographic"],
.tabs.tabs[data-visual-style="holographic"] .tabs__panels,
.list-details[data-visual-style="holographic"] .list-details__card,
.chapters[data-visual-style="holographic"] .chapters__card:not([data-item-style]),
.list-details[data-visual-style="holographic"] .list-details__panel,
.timeline[data-visual-style="holographic"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="holographic"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="holographic"],
.bento[data-visual-style="holographic"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="holographic"]
) {
--vs-shadow: inset 0 1px 0 rgb(255 255 255 / .70), var(--vs-elevation);
}
:is(
.grid-block[data-visual-style="holographic"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="holographic"],
.grid-block[data-visual-style="holographic"] .grid-item--article:not([data-item-style]),
.grid-block .grid-item--article[data-item-style="holographic"],
.carousel-block[data-visual-style="holographic"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="holographic"],
.tabs.tabs[data-visual-style="holographic"] .tabs__panels,
.list-details[data-visual-style="holographic"] .list-details__card,
.chapters[data-visual-style="holographic"] .chapters__card:not([data-item-style]),
.list-details[data-visual-style="holographic"] .list-details__panel,
.timeline[data-visual-style="holographic"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="holographic"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="holographic"],
.bento[data-visual-style="holographic"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="holographic"]
):hover {
--vs-shadow: var(--shadow-xl), inset 0 1px 0 var(--shine-strong), var(--vs-elevation-hover);
}
[data-visual-style="holographic"],
[data-item-style="holographic"],
[data-slide-style="holographic"] {
--_vs-title-bg: linear-gradient(
var(--hero-text-light-title),
var(--hero-text-light-title)
);
--_vs-title-size: 100% 100%;
}
.list-details[data-visual-style="holographic"] .list-details__card-desc,
.list-details[data-visual-style="holographic"] .list-details__panel-desc,
.timeline[data-visual-style="holographic"] .timeline__desc,
:is(.testimonial, .bento)[data-visual-style="holographic"] .testimonial__item:not([data-item-style]) .testimonial__quote,
:is(.testimonial, .bento) .testimonial__item[data-item-style="holographic"] .testimonial__quote {
--lexical-strong-color: var(--vs-ink-brand);
color: var(--vs-text-secondary);
line-height: var(--line-height-relaxed);
}
.timeline[data-visual-style="holographic"] .timeline__ref {
color: var(--vs-ink-brand);
}