[data-visual-style="velvet"],
[data-item-style="velvet"],
[data-slide-style="velvet"] {
--vs-bg:
radial-gradient(140% 60% at 50% 30%, var(--shine-soft) 0%, transparent 55%),
radial-gradient(85% 110% at 50% 50%, transparent 40%, rgb(0 0 0 / .40) 100%),
linear-gradient(160deg,
color-mix(in oklab, var(--fond-sombre-primary, var(--color-primary)) 72%, black) 0%,
color-mix(in oklab, var(--fond-sombre-primary, var(--color-primary)) 48%, black) 100%);
--vs-encre-claire-2: var(--text-inverse-secondary);
--vs-ink-brand: var(--vs-text-primary);
--vs-border: rgb(0 0 0 / .40);
--vs-border-width: 1px;
--vs-shadow:
var(--shadow-dark-card),
inset 0 1px 0 var(--shine-soft),
inset 0 0 90px rgb(0 0 0 / .30);
--vs-backdrop: none;
}
.banner.banner[data-visual-style="velvet"] {
--vs-shadow: var(--shadow-dark-card), inset 0 1px 0 var(--shine-soft), inset 0 0 90px rgb(0 0 0 / .30), var(--vs-elevation);
}
.banner.banner[data-visual-style="velvet"]:hover {
--vs-shadow: var(--shadow-dark-card), inset 0 1px 0 var(--shine-soft), inset 0 0 90px rgb(0 0 0 / .30), var(--vs-elevation-hover);
}
:is(
.grid-block[data-visual-style="velvet"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="velvet"],
.grid-block[data-visual-style="velvet"] .grid-item--article:not([data-item-style]),
.grid-block .grid-item--article[data-item-style="velvet"],
.carousel-block[data-visual-style="velvet"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="velvet"],
.tabs.tabs[data-visual-style="velvet"] .tabs__panels,
.list-details[data-visual-style="velvet"] .list-details__card,
.chapters[data-visual-style="velvet"] .chapters__card:not([data-item-style]),
.list-details[data-visual-style="velvet"] .list-details__panel,
.timeline[data-visual-style="velvet"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="velvet"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="velvet"],
.bento[data-visual-style="velvet"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="velvet"]
) {
--vs-shadow: var(--shadow-dark-card), inset 0 1px 0 var(--shine-soft), inset 0 0 90px rgb(0 0 0 / .30), var(--vs-elevation);
}
:is(
.grid-block[data-visual-style="velvet"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="velvet"],
.grid-block[data-visual-style="velvet"] .grid-item--article:not([data-item-style]),
.grid-block .grid-item--article[data-item-style="velvet"],
.carousel-block[data-visual-style="velvet"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="velvet"],
.tabs.tabs[data-visual-style="velvet"] .tabs__panels,
.list-details[data-visual-style="velvet"] .list-details__card,
.chapters[data-visual-style="velvet"] .chapters__card:not([data-item-style]),
.list-details[data-visual-style="velvet"] .list-details__panel,
.timeline[data-visual-style="velvet"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="velvet"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="velvet"],
.bento[data-visual-style="velvet"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="velvet"]
):hover {
--vs-shadow: var(--shadow-dark-card), inset 0 1px 0 var(--shine-soft), inset 0 0 90px rgb(0 0 0 / .30), var(--vs-elevation-hover);
}
:is(
.hero.hero[data-visual-style="velvet"],
.banner.banner[data-visual-style="velvet"],
.header-master[data-visual-style="velvet"],
.grid-block[data-visual-style="velvet"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block[data-visual-style="velvet"] .grid-item--article:not([data-item-style]),
.carousel-block[data-visual-style="velvet"] .carousel-slide:not([data-slide-style]),
.tabs.tabs[data-visual-style="velvet"] .tabs__panels,
.grid-block .grid-item.card.card--feature[data-item-style="velvet"],
.grid-block .grid-item--article[data-item-style="velvet"],
.carousel-block .carousel-slide[data-slide-style="velvet"],
.list-details[data-visual-style="velvet"] .list-details__card,
.chapters[data-visual-style="velvet"] .chapters__card:not([data-item-style]),
.list-details[data-visual-style="velvet"] .list-details__panel,
.timeline[data-visual-style="velvet"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="velvet"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="velvet"],
.bento[data-visual-style="velvet"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="velvet"]
) {
background: var(--vs-bg);
color: var(--vs-text-primary);
border: var(--vs-border-width) solid var(--vs-border);
box-shadow: var(--vs-shadow);
position: relative;
}
:is(
.hero.hero[data-visual-style="velvet"],
.banner.banner[data-visual-style="velvet"],
.header-master[data-visual-style="velvet"],
.grid-block[data-visual-style="velvet"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block[data-visual-style="velvet"] .grid-item--article:not([data-item-style]),
.carousel-block[data-visual-style="velvet"] .carousel-slide:not([data-slide-style]),
.tabs.tabs[data-visual-style="velvet"] .tabs__panels,
.grid-block .grid-item.card.card--feature[data-item-style="velvet"],
.grid-block .grid-item--article[data-item-style="velvet"],
.carousel-block .carousel-slide[data-slide-style="velvet"],
.list-details[data-visual-style="velvet"] .list-details__card,
.chapters[data-visual-style="velvet"] .chapters__card:not([data-item-style]),
.list-details[data-visual-style="velvet"] .list-details__panel,
.timeline[data-visual-style="velvet"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="velvet"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="velvet"],
.bento[data-visual-style="velvet"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="velvet"],
.section[data-visual-style="velvet"]:not(.section--full-bleed) .section__inner,
.section--full-bleed[data-visual-style="velvet"]
)::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.55;
mix-blend-mode: overlay;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
z-index: 0;
}
:is(
.hero.hero[data-visual-style="velvet"],
.banner.banner[data-visual-style="velvet"],
.header-master[data-visual-style="velvet"],
.grid-block[data-visual-style="velvet"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block[data-visual-style="velvet"] .grid-item--article:not([data-item-style]),
.carousel-block[data-visual-style="velvet"] .carousel-slide:not([data-slide-style]),
.tabs.tabs[data-visual-style="velvet"] .tabs__panels,
.grid-block .grid-item.card.card--feature[data-item-style="velvet"],
.grid-block .grid-item--article[data-item-style="velvet"],
.carousel-block .carousel-slide[data-slide-style="velvet"],
.list-details[data-visual-style="velvet"] .list-details__card,
.chapters[data-visual-style="velvet"] .chapters__card:not([data-item-style]),
.list-details[data-visual-style="velvet"] .list-details__panel,
.timeline[data-visual-style="velvet"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="velvet"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="velvet"],
.bento[data-visual-style="velvet"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="velvet"],
.section[data-visual-style="velvet"]:not(.section--full-bleed) .section__inner,
.section--full-bleed[data-visual-style="velvet"]
)::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: soft-light;
opacity: 0.35;
background: repeating-linear-gradient(105deg,
var(--shine-subtle) 0 2px,
transparent 2px 6px);
z-index: 0;
}
.tabs.tabs[data-visual-style="velvet"] .tabs__panels {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
:is(
.hero.hero[data-visual-style="velvet"] .hero__title,
.banner.banner[data-visual-style="velvet"] .banner__title,
.grid-block[data-visual-style="velvet"] .grid-item.card.card--feature:not([data-item-style]) .card__title,
.grid-block[data-visual-style="velvet"] .grid-item.card.card--feature:not([data-item-style]) .card__subtitle,
.grid-block .grid-item.card.card--feature[data-item-style="velvet"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="velvet"] .card__subtitle,
.grid-block[data-visual-style="velvet"] .grid-item--article:not([data-item-style]) .grid-item__article-title,
.grid-block .grid-item--article[data-item-style="velvet"] .grid-item__article-title,
.carousel-block[data-visual-style="velvet"] .carousel-slide:not([data-slide-style]) .carousel-slide__title,
.carousel-block .carousel-slide[data-slide-style="velvet"] .carousel-slide__title,
.carousel-block[data-visual-style="velvet"] .carousel-slide:not([data-slide-style]) .carousel-slide__article-title,
.carousel-block .carousel-slide[data-slide-style="velvet"] .carousel-slide__article-title,
.list-details[data-visual-style="velvet"] .list-details__card-title,
.list-details[data-visual-style="velvet"] .list-details__panel-title,
.timeline[data-visual-style="velvet"] .timeline__step-title,
:is(.testimonial, .bento)[data-visual-style="velvet"] .testimonial__item:not([data-item-style]) .testimonial__item-title,
:is(.testimonial, .bento) .testimonial__item[data-item-style="velvet"] .testimonial__item-title,
.bento[data-visual-style="velvet"] .bento__tile.card.card--feature:not([data-item-style]) .card__title,
.bento[data-visual-style="velvet"] .bento__tile.card.card--feature:not([data-item-style]) .card__subtitle,
.bento .bento__tile.card.card--feature[data-item-style="velvet"] .card__title,
.bento .bento__tile.card.card--feature[data-item-style="velvet"] .card__subtitle
) {
background: linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary)   18%, var(--text-inverse-primary)) 0%,
var(--text-inverse-primary) 30%,
color-mix(in srgb, var(--color-secondary) 18%, var(--text-inverse-primary)) 50%,
var(--text-inverse-primary) 70%,
color-mix(in srgb, var(--color-accent)    18%, var(--text-inverse-primary)) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: var(--text-inverse-primary);
animation: none;
text-shadow:
0 1px 0 var(--shine-light),
var(--vs-ombre-forte);
}
:is(
.list-details[data-visual-style="velvet"] .list-details__card,
.chapters[data-visual-style="velvet"] .chapters__card:not([data-item-style]),
.list-details[data-visual-style="velvet"] .list-details__panel,
.timeline[data-visual-style="velvet"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="velvet"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="velvet"]
) > * {
position: relative;
z-index: 1;
}
.list-details[data-visual-style="velvet"] .list-details__card-desc,
.list-details[data-visual-style="velvet"] .list-details__panel-desc,
.timeline[data-visual-style="velvet"] .timeline__desc,
:is(.testimonial, .bento)[data-visual-style="velvet"] .testimonial__item:not([data-item-style]) .testimonial__quote,
:is(.testimonial, .bento) .testimonial__item[data-item-style="velvet"] .testimonial__quote {
--lexical-link-color: var(--color-primary-light);
color: var(--vs-text-secondary);
}
.timeline[data-visual-style="velvet"] .timeline__ref {
color: var(--color-primary-light);
}
.timeline[data-visual-style="velvet"] .timeline__desc strong {
color: var(--color-primary-light);
}