[data-visual-style="strong-coloured"],
[data-item-style="strong-coloured"],
[data-slide-style="strong-coloured"] {
--vs-bg:
radial-gradient(120% 66% at 50% -16%, rgb(255 255 255 / .28) 0%, transparent 58%),
linear-gradient(180deg,
color-mix(in oklab, var(--color-primary) 94%, white) 0%,
var(--color-primary) 46%,
color-mix(in oklab, var(--color-primary) 78%, black) 100%);
--vs-text-primary: var(--vs-sc-text-primary, var(--text-inverse-primary));
--vs-text-secondary: var(--vs-sc-text-secondary, var(--neutral-100));
--vs-logo-invert: var(--vs-sc-logo-invert, 1);
--focus-ring: color-mix(
in srgb,
var(--focus-ring-on-dark) calc(var(--vs-sc-encre, 1) * 100%),
var(--focus-ring-on-light)
);
--vs-border: rgb(255 255 255 / .18);
--vs-border-width: 1px;
--_sc-rim:
inset 0 1px 0 rgb(255 255 255 / .40),
inset 0 -1px 0 rgb(0 0 0 / .30);
--vs-shadow: var(--_sc-rim);
--vs-backdrop: none;
--vs-form-label: var(--vs-text-primary);
--vs-form-text: var(--vs-text-primary);
--vs-form-help: var(--vs-text-secondary);
--vs-form-placeholder: var(--placeholder-on-light);
--vs-form-focus-border: var(--color-primary);
--vs-form-focus-shadow: rgba(var(--color-primary-rgb), 0.2);
}
.banner.banner[data-visual-style="strong-coloured"] {
--vs-shadow: var(--_sc-rim), var(--vs-elevation);
}
.banner.banner[data-visual-style="strong-coloured"]:hover {
--vs-shadow: var(--_sc-rim), var(--vs-elevation-hover);
transform: translateY(-2px);
}
:is(
.grid-block[data-visual-style="strong-coloured"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="strong-coloured"],
.grid-block[data-visual-style="strong-coloured"] .grid-item--article:not([data-item-style]),
.grid-block .grid-item--article[data-item-style="strong-coloured"],
.carousel-block[data-visual-style="strong-coloured"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="strong-coloured"],
.tabs.tabs[data-visual-style="strong-coloured"] .tabs__panels,
.spotlight[data-visual-style="strong-coloured"] .spotlight__card,
.spotlight[data-visual-style="strong-coloured"] .spotlight__panel,
.timeline[data-visual-style="strong-coloured"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="strong-coloured"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="strong-coloured"],
.bento[data-visual-style="strong-coloured"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="strong-coloured"]
) {
--vs-shadow: var(--_sc-rim), var(--vs-elevation);
}
:is(
.grid-block[data-visual-style="strong-coloured"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="strong-coloured"],
.grid-block[data-visual-style="strong-coloured"] .grid-item--article:not([data-item-style]),
.grid-block .grid-item--article[data-item-style="strong-coloured"],
.carousel-block[data-visual-style="strong-coloured"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="strong-coloured"],
.tabs.tabs[data-visual-style="strong-coloured"] .tabs__panels,
.spotlight[data-visual-style="strong-coloured"] .spotlight__card,
.spotlight[data-visual-style="strong-coloured"] .spotlight__panel,
.timeline[data-visual-style="strong-coloured"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="strong-coloured"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="strong-coloured"],
.bento[data-visual-style="strong-coloured"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="strong-coloured"]
):hover {
--vs-shadow: var(--_sc-rim), var(--vs-elevation-hover);
}
:is(
.hero.hero[data-visual-style="strong-coloured"],
.banner.banner[data-visual-style="strong-coloured"],
.grid-block[data-visual-style="strong-coloured"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block[data-visual-style="strong-coloured"] .grid-item--article:not([data-item-style]),
.carousel-block[data-visual-style="strong-coloured"] .carousel-slide:not([data-slide-style]),
.tabs.tabs[data-visual-style="strong-coloured"] .tabs__panels,
.grid-block .grid-item.card.card--feature[data-item-style="strong-coloured"],
.grid-block .grid-item--article[data-item-style="strong-coloured"],
.carousel-block .carousel-slide[data-slide-style="strong-coloured"],
.spotlight[data-visual-style="strong-coloured"] .spotlight__card,
.spotlight[data-visual-style="strong-coloured"] .spotlight__panel,
.timeline[data-visual-style="strong-coloured"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="strong-coloured"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="strong-coloured"],
.bento[data-visual-style="strong-coloured"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="strong-coloured"]
) {
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="strong-coloured"],
.banner.banner[data-visual-style="strong-coloured"],
.grid-block[data-visual-style="strong-coloured"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block[data-visual-style="strong-coloured"] .grid-item--article:not([data-item-style]),
.carousel-block[data-visual-style="strong-coloured"] .carousel-slide:not([data-slide-style]),
.tabs.tabs[data-visual-style="strong-coloured"] .tabs__panels,
.grid-block .grid-item.card.card--feature[data-item-style="strong-coloured"],
.grid-block .grid-item--article[data-item-style="strong-coloured"],
.carousel-block .carousel-slide[data-slide-style="strong-coloured"],
.spotlight[data-visual-style="strong-coloured"] .spotlight__card,
.spotlight[data-visual-style="strong-coloured"] .spotlight__panel,
.timeline[data-visual-style="strong-coloured"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="strong-coloured"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="strong-coloured"],
.bento[data-visual-style="strong-coloured"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="strong-coloured"]
) > * {
position: relative;
z-index: 1;
}
:is(
.hero.hero[data-visual-style="strong-coloured"],
.banner.banner[data-visual-style="strong-coloured"],
.tabs.tabs[data-visual-style="strong-coloured"],
.carousel-block[data-visual-style="strong-coloured"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="strong-coloured"],
.grid-block[data-visual-style="strong-coloured"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="strong-coloured"],
.spotlight[data-visual-style="strong-coloured"] .spotlight__card,
.spotlight[data-visual-style="strong-coloured"] .spotlight__panel,
.timeline[data-visual-style="strong-coloured"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="strong-coloured"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="strong-coloured"],
.bento[data-visual-style="strong-coloured"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="strong-coloured"]
) :is(
.hero__description.lexical-content,
.banner__description.lexical-content,
.tabs__panel > .lexical-content,
.lexical-content,
.card__description.lexical-content,
.card__description,
.spotlight__card-desc,
.spotlight__panel-desc,
.timeline__desc,
.testimonial__quote
) {
--lexical-color: var(--vs-text-secondary);
--lexical-heading-color: var(--vs-text-primary);
--lexical-link-color: var(--vs-text-primary);
--lexical-link-hover-color: var(--vs-text-primary);
--lexical-quote-color: var(--vs-text-secondary);
--lexical-strong-color: var(--vs-text-primary);
color: var(--vs-text-secondary);
text-shadow: var(--text-shadow-sm);
}
:is(
.hero.hero[data-visual-style="strong-coloured"],
.banner.banner[data-visual-style="strong-coloured"],
.grid-block[data-visual-style="strong-coloured"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block[data-visual-style="strong-coloured"] .grid-item--article:not([data-item-style]),
.carousel-block[data-visual-style="strong-coloured"] .carousel-slide:not([data-slide-style]),
.tabs.tabs[data-visual-style="strong-coloured"] .tabs__panels,
.grid-block .grid-item.card.card--feature[data-item-style="strong-coloured"],
.grid-block .grid-item--article[data-item-style="strong-coloured"],
.carousel-block .carousel-slide[data-slide-style="strong-coloured"],
.spotlight[data-visual-style="strong-coloured"] .spotlight__card,
.spotlight[data-visual-style="strong-coloured"] .spotlight__panel,
.timeline[data-visual-style="strong-coloured"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="strong-coloured"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="strong-coloured"],
.bento[data-visual-style="strong-coloured"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="strong-coloured"],
.section[data-visual-style="strong-coloured"]:not(.section--full-bleed) .section__inner,
.section--full-bleed[data-visual-style="strong-coloured"]
)::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
mix-blend-mode: overlay;
opacity: 0.7;
background: repeating-linear-gradient(90deg,
var(--shine-light) 0 1px,
transparent 1px 2px,
var(--shadow-overlay-xs) 2px 3px,
transparent 3px 4px);
z-index: 0;
}
:is(
.hero.hero[data-visual-style="strong-coloured"],
.banner.banner[data-visual-style="strong-coloured"],
.grid-block[data-visual-style="strong-coloured"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block[data-visual-style="strong-coloured"] .grid-item--article:not([data-item-style]),
.carousel-block[data-visual-style="strong-coloured"] .carousel-slide:not([data-slide-style]),
.tabs.tabs[data-visual-style="strong-coloured"] .tabs__panels,
.grid-block .grid-item.card.card--feature[data-item-style="strong-coloured"],
.grid-block .grid-item--article[data-item-style="strong-coloured"],
.carousel-block .carousel-slide[data-slide-style="strong-coloured"],
.spotlight[data-visual-style="strong-coloured"] .spotlight__card,
.spotlight[data-visual-style="strong-coloured"] .spotlight__panel,
.timeline[data-visual-style="strong-coloured"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="strong-coloured"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="strong-coloured"],
.bento[data-visual-style="strong-coloured"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="strong-coloured"],
.section[data-visual-style="strong-coloured"]:not(.section--full-bleed) .section__inner,
.section--full-bleed[data-visual-style="strong-coloured"]
)::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
opacity: 0.14;
mix-blend-mode: multiply;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='nsc'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23nsc)'/></svg>");
z-index: 0;
}
.hero.hero[data-visual-style="strong-coloured"] .hero__title {
background: none;
-webkit-text-fill-color: var(--vs-text-primary);
color: var(--vs-text-primary);
animation: none;
}
.carousel-block[data-visual-style="strong-coloured"] .carousel-slide:not([data-slide-style]):hover,
.carousel-block .carousel-slide[data-slide-style="strong-coloured"]:hover {
--vs-shadow: var(--_sc-rim), var(--vs-elevation);
}
.tabs.tabs[data-visual-style="strong-coloured"] .tabs__panels {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
:is(
.grid-block[data-visual-style="strong-coloured"] .grid-item--article:not([data-item-style]),
.grid-block .grid-item--article[data-item-style="strong-coloured"]
) .grid-item__article-title {
color: var(--vs-text-primary);
text-shadow: var(--text-shadow-sm);
}
:is(
.grid-block[data-visual-style="strong-coloured"] .grid-item--article:not([data-item-style]),
.grid-block .grid-item--article[data-item-style="strong-coloured"]
) :is(.grid-item__article-excerpt, .grid-item__article-category) {
color: var(--vs-text-secondary);
text-shadow: var(--text-shadow-sm);
}
.spotlight[data-visual-style="strong-coloured"] .spotlight__card-title,
.spotlight[data-visual-style="strong-coloured"] .spotlight__panel-title,
.timeline[data-visual-style="strong-coloured"] .timeline__step-title,
:is(.testimonial, .bento)[data-visual-style="strong-coloured"] .testimonial__item:not([data-item-style]) .testimonial__item-title,
:is(.testimonial, .bento) .testimonial__item[data-item-style="strong-coloured"] .testimonial__item-title {
color: var(--vs-text-primary);
text-shadow: var(--text-shadow-sm);
}
.spotlight[data-visual-style="strong-coloured"] .spotlight__card-desc,
.spotlight[data-visual-style="strong-coloured"] .spotlight__panel-desc,
.timeline[data-visual-style="strong-coloured"] .timeline__desc,
:is(.testimonial, .bento)[data-visual-style="strong-coloured"] .testimonial__item:not([data-item-style]) .testimonial__quote,
:is(.testimonial, .bento) .testimonial__item[data-item-style="strong-coloured"] .testimonial__quote {
color: var(--vs-text-secondary);
text-shadow: var(--text-shadow-sm);
}
:is(
.grid-block[data-visual-style="strong-coloured"] .grid-item.card.card--feature:not([data-item-style]) .card__title,
.grid-block[data-visual-style="strong-coloured"] .grid-item.card.card--feature:not([data-item-style]) .card__subtitle,
.grid-block .grid-item.card.card--feature[data-item-style="strong-coloured"] .card__title,
.grid-block .grid-item.card.card--feature[data-item-style="strong-coloured"] .card__subtitle,
.carousel-block[data-visual-style="strong-coloured"] .carousel-slide:not([data-slide-style]) .carousel-slide__title,
.carousel-block .carousel-slide[data-slide-style="strong-coloured"] .carousel-slide__title,
.carousel-block[data-visual-style="strong-coloured"] .carousel-slide:not([data-slide-style]) .carousel-slide__article-title,
.carousel-block .carousel-slide[data-slide-style="strong-coloured"] .carousel-slide__article-title,
.bento[data-visual-style="strong-coloured"] .bento__tile.card.card--feature:not([data-item-style]) .card__title,
.bento[data-visual-style="strong-coloured"] .bento__tile.card.card--feature:not([data-item-style]) .card__subtitle,
.bento .bento__tile.card.card--feature[data-item-style="strong-coloured"] .card__title,
.bento .bento__tile.card.card--feature[data-item-style="strong-coloured"] .card__subtitle
) {
background: none;
-webkit-text-fill-color: var(--vs-text-primary);
color: var(--vs-text-primary);
text-shadow: var(--text-shadow-sm);
animation: none;
}
:is(
.grid-block[data-visual-style="strong-coloured"] .grid-item.card.card--feature:not([data-item-style]) .card__icon,
.grid-block .grid-item.card.card--feature[data-item-style="strong-coloured"] .card__icon,
.carousel-block[data-visual-style="strong-coloured"] .carousel-slide:not([data-slide-style]) .carousel-slide__icon,
.carousel-block .carousel-slide[data-slide-style="strong-coloured"] .carousel-slide__icon,
.spotlight[data-visual-style="strong-coloured"] .spotlight__icon,
.bento[data-visual-style="strong-coloured"] .bento__tile.card.card--feature:not([data-item-style]) .card__icon,
.bento .bento__tile.card.card--feature[data-item-style="strong-coloured"] .card__icon
) {
color: currentColor;
}
:is(
.hero.hero[data-visual-style="strong-coloured"],
.banner.banner[data-visual-style="strong-coloured"],
.grid-block[data-visual-style="strong-coloured"] .grid-item.card.card--feature:not([data-item-style]),
.grid-block .grid-item.card.card--feature[data-item-style="strong-coloured"],
.carousel-block[data-visual-style="strong-coloured"] .carousel-slide:not([data-slide-style]),
.carousel-block .carousel-slide[data-slide-style="strong-coloured"],
.spotlight[data-visual-style="strong-coloured"] .spotlight__card,
.spotlight[data-visual-style="strong-coloured"] .spotlight__panel,
.timeline[data-visual-style="strong-coloured"] .timeline__card,
:is(.testimonial, .bento)[data-visual-style="strong-coloured"] .testimonial__item:not([data-item-style]),
:is(.testimonial, .bento) .testimonial__item[data-item-style="strong-coloured"],
.bento[data-visual-style="strong-coloured"] .bento__tile.card.card--feature:not([data-item-style]),
.bento .bento__tile.card.card--feature[data-item-style="strong-coloured"]
) {
--vs-title-primary: var(--vs-sc-title-primary, var(--color-primary-text));
--vs-title-secondary: var(--vs-sc-title-secondary, var(--color-secondary-text));
--vs-title-accent: var(--vs-sc-title-accent, var(--color-accent-text));
--vs-title-deco-1: var(--vs-sc-title-deco-1, var(--gradient-decorative-1));
--vs-title-deco-2: var(--vs-sc-title-deco-2, var(--gradient-decorative-2));
--vs-title-deco-3: var(--vs-sc-title-deco-3, var(--gradient-decorative-3));
--vs-title-gradient-primary: var(--vs-sc-title-gradient-primary, var(--gradient-primary));
--vs-title-gradient-hero: var(--vs-sc-title-gradient-hero, var(--gradient-hero-statement));
--vs-title-gradient-secondary: var(--vs-sc-title-gradient-secondary, var(--gradient-secondary));
--vs-title-gradient-accent: var(--vs-sc-title-gradient-accent, var(--gradient-accent));
}
.timeline[data-visual-style="strong-coloured"] .timeline__ref,
.timeline[data-visual-style="strong-coloured"] .timeline__desc.lexical-content strong,
.timeline[data-visual-style="strong-coloured"] .timeline__desc.lexical-content b {
color: var(--vs-text-primary);
}
@media (hover: hover) {
.spotlight[data-visual-style="strong-coloured"] .spotlight__card-trigger:hover {
color: var(--vs-text-primary);
}
}