/* site.css */
body {
margin: 0;
color: var(--color-text);
background: var(--page-bg, var(--color-background));
font-family: var(--font-body);
font-weight: var(--body-weight);
font-size: var(--text-base);
line-height: var(--leading-body);
}
.page-frame {
padding: var(--page-frame-block, var(--page-frame, 0)) var(--page-frame, 0);
}
.page-sheet {
max-inline-size: var(--page-sheet-width, none);
margin-inline: auto;
background: var(--page-sheet, var(--color-background));
border-radius: var(--page-sheet-radius, 0);
box-shadow: var(--page-sheet-shadow, none);
overflow: clip;
}
.container {
max-width: var(--container-width);
margin-inline: auto;
padding-inline: var(--space-l);
}
:is(.text-heading, .image-text-heading, .cards-heading, .cta-heading, .form-block-heading, .accordion-heading, .stats-heading, .gallery-heading, .logos-heading, .downloads-heading) {
margin: 0 0 var(--space-m);
font-size: var(--text-2xl);
text-wrap: balance;
}
:is(.hero-subheading, .cards-intro, .form-block-intro, .cta-body) {
max-inline-size: 34em;
color: var(--section-muted);
font-size: var(--text-lead);
line-height: 1.6;
}
.block .richtext {
color: var(--section-muted);
}
.block .richtext :is(h2, h3, h4, strong, b) {
color: var(--section-text);
}
.block .richtext > :is(p, ul, ol) {
max-inline-size: 38em;
}
.align-center .richtext > :is(p, ul, ol) {
margin-inline: auto;
}
:is(.richtext, .site-footer-text) > .text-center {
margin-inline: auto;
text-align: center;
}
:is(.richtext, .site-footer-text) > .text-right {
margin-inline-start: auto;
text-align: right;
}
:is(.text, .accordion, .quote)[class*="measure-"] .richtext > :is(p, ul, ol) {
max-inline-size: none;
}
:is(.text, .accordion, .quote).measure-comfortable {
max-inline-size: 65ch;
}
:is(.text, .accordion, .quote).measure-wide {
max-inline-size: 85ch;
}
.layout-columns .text.measure-comfortable {
max-inline-size: calc(2 * 65ch + var(--space-xl));
}
.layout-columns .text.measure-wide {
max-inline-size: calc(2 * 85ch + var(--space-xl));
}
.align-center :is(.text, .accordion, .quote)[class*="measure-"] {
margin-inline: auto;
}
.text-link a {
color: var(--section-link);
font-weight: 700;
text-decoration: var(--link-line, none);
}
.text-link a:is(:hover, :focus-visible) {
text-decoration: underline;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-heading);
font-weight: var(--heading-weight);
letter-spacing: var(--heading-tracking);
text-transform: var(--heading-transform);
line-height: var(--leading-heading);
}
a {
color: var(--section-link, var(--color-link));
text-decoration-thickness: var(--border-width);
text-underline-offset: 0.18em;
}
code {
padding: 0 var(--space-xs);
background: var(--color-surface);
border-radius: var(--radius-s);
}
.not-found {
padding-block: var(--space-2xl);
}
.not-found h1 {
font-size: var(--text-3xl);
}
.meta {
color: var(--color-muted);
}
.locale-switcher {
display: flex;
gap: var(--space-m);
padding-block: var(--space-l);
}
.locale-switcher [aria-current] {
color: var(--section-text, var(--color-text));
text-decoration: none;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-block-size: var(--button-height);
padding: 0 calc(var(--button-height) * 0.48);
--button-ink: color-mix(in srgb, var(--section-button-text) calc(var(--button-filled, 1) * 100%), var(--section-button-bg));
--button-surface: color-mix(in srgb, var(--section-button-bg) calc(var(--button-fill, 1) * 100%), transparent);
--button-text-size: calc(var(--text-base) * 0.9375);
color: var(--button-ink);
background: var(--button-surface);
border: var(--border-width) solid var(--section-button-bg);
border-radius: var(--radius-button);
box-shadow: var(--shadow-s);
font-size: var(--button-text-size);
font-weight: 700;
line-height: 1.2;
text-transform: var(--button-transform, none);
text-decoration: none;
}
.media-placeholder {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
--placeholder-wash: linear-gradient(135deg, color-mix(in srgb, var(--section-link) 20%, var(--section-card)), var(--section-card));
background: var(--placeholder-wash);
border-radius: var(--radius-l);
}
:is(.bx-canvas, .bx-preview, .bx-design-preview) .media-placeholder::before {
content: "";
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
inline-size: min(2.5rem, 24%);
aspect-ratio: 1;
background: var(--section-placeholder-edge);
-webkit-mask: var(--placeholder-glyph) center / contain no-repeat;
mask: var(--placeholder-glyph) center / contain no-repeat;
}
.richtext > :first-child {
margin-top: 0;
}
.richtext > :last-child {
margin-bottom: 0;
}
.richtext h2 {
font-size: var(--text-xl);
}
.richtext h3 {
font-size: var(--text-lg);
}
.richtext h4 {
font-size: var(--text-base);
}
.richtext blockquote {
margin-inline: 0;
padding-inline-start: var(--space-m);
border-inline-start: var(--border-width) solid var(--section-link);
font-size: var(--text-lg);
}
@media (max-width: 40rem) {
.page-frame {
padding: min(var(--page-frame-block, var(--page-frame, 0rem)), 3vw) min(var(--page-frame, 0rem), 3vw);
}
}
/* blocks-hero.css */
.hero {
display: grid;
gap: var(--space-xl);
align-items: center;
}
.hero-text {
display: grid;
gap: calc(var(--space-m) * 1.25);
}
.hero-heading {
margin: 0 0 max(0em, calc(0.42em - 1.25 * var(--space-m)));
--hero-size: min(var(--text-4xl), calc(1rem + 4.6vw));
font-size: var(--hero-size);
line-height: max(1.06, calc(var(--leading-heading) - 0.08));
text-wrap: balance;
overflow-wrap: anywhere;
}
.hero-subheading {
margin: 0;
}
.hero-action {
margin: var(--space-xs) 0 0;
}
.align-center .hero-text {
justify-items: center;
}
.layout-center .hero,
.layout-center .hero-text {
justify-items: center;
text-align: center;
}
.layout-center .hero-text {
margin-inline: auto;
}
.hero.is-cover {
position: relative;
align-content: center;
padding: var(--space-xl);
overflow: hidden;
border-radius: var(--radius-l);
--section-bg: var(--color-contrast);
--section-text: var(--color-on-contrast);
--section-muted: var(--color-on-contrast);
--section-link: var(--color-on-contrast);
--section-button-bg: var(--color-on-contrast);
--section-button-text: var(--color-contrast);
--section-border: var(--color-muted-on-contrast);
color: var(--section-text);
}
.block-hero:has(> .container > .hero.is-cover) > .container > .hero.is-cover,
.block:has(> .container > .section-cols > .section-column:only-child > :only-child > .hero.is-cover) .hero.is-cover {
position: static;
padding: 0;
overflow: visible;
border-radius: 0;
}
.block:has(.hero.is-cover) {
container-type: inline-size;
}
.block:has(> .container > .section-cols > .section-column:only-child > * + *) .section-column > * > .hero.is-cover {
margin-inline: calc(50% - 50cqi);
padding-inline: calc(50cqi - 50%);
border-radius: 0;
}
.hero-cover-picture {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: var(--color-contrast);
}
.hero-cover-picture img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.hero.is-cover > .hero-text {
position: relative;
z-index: 1;
}
.hero.is-cover {
--hero-veil: max(0.65, var(--veil-least, 0.65));
}
.hero.is-cover.veil-medium {
--hero-veil: max(0.75, var(--veil-least, 0.75));
}
.hero.is-cover.veil-strong {
--hero-veil: max(0.85, var(--veil-least, 0.85));
}
.hero-cover-picture::after {
content: "";
position: absolute;
inset: 0;
background: var(--color-contrast);
opacity: var(--hero-veil);
}
.layout-cover-center .hero.is-cover,
.layout-cover-center .hero.is-cover > .hero-text {
justify-items: center;
text-align: center;
}
.layout-cover-center .hero.is-cover > .hero-text {
max-width: var(--container-narrow);
margin-inline: auto;
}
.layout-cover-left .hero.is-cover,
.layout-cover-low .hero.is-cover,
.layout-cover-left .hero.is-cover > .hero-text,
.layout-cover-low .hero.is-cover > .hero-text,
.layout-cover-right .hero.is-cover > .hero-text {
justify-items: start;
text-align: start;
}
.layout-cover-left .hero.is-cover > .hero-text,
.layout-cover-right .hero.is-cover > .hero-text,
.layout-cover-low .hero.is-cover > .hero-text {
max-width: var(--container-narrow);
}
.layout-cover-right .hero.is-cover {
justify-items: end;
}
.layout-cover-low .hero.is-cover {
align-content: end;
}
@media (min-width: 40rem) {
.layout-cover-left .hero-cover-picture::after {
background: none;
background-image: var(--hero-veil-top, none), linear-gradient(90deg, var(--color-contrast) 0%, var(--color-contrast) 55%, transparent 100%);
}
.layout-cover-right .hero-cover-picture::after {
background: none;
background-image: var(--hero-veil-top, none), linear-gradient(270deg, var(--color-contrast) 0%, var(--color-contrast) 55%, transparent 100%);
}
.layout-cover-low .hero.is-cover:not(.height-auto) .hero-cover-picture::after {
background: none;
background-image: var(--hero-veil-top, none), linear-gradient(0deg, var(--color-contrast) 0%, var(--color-contrast) 50%, transparent 100%);
}
}
.page-sheet:has(> .block-header .behaviour-over) > main > .block-hero:first-child > .container > .hero.is-cover,
.page-sheet:has(> .block-header .behaviour-over) > main > .block:first-child > .container > .section-cols > .section-column:only-child > :only-child > .hero.is-cover {
--hero-header: var(--chrome-header-height, 4.5rem);
--hero-veil-top: linear-gradient(180deg,
var(--color-contrast) 0%,
var(--color-contrast) var(--hero-header),
color-mix(in srgb, var(--color-contrast) 80%, transparent) calc(var(--hero-header) * 1.35),
color-mix(in srgb, var(--color-contrast) 50%, transparent) calc(var(--hero-header) * 1.9),
color-mix(in srgb, var(--color-contrast) 22%, transparent) calc(var(--hero-header) * 2.6),
color-mix(in srgb, var(--color-contrast) 6%, transparent) calc(var(--hero-header) * 3.2),
transparent calc(var(--hero-header) * 3.7));
}
.hero.height-tall {
min-block-size: 56svh;
}
.hero.height-screen {
min-block-size: calc(100svh - var(--section-pad-top) - var(--section-pad-bottom));
}
/* blocks-hero-split.css */
.layout-split .hero {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--space-columns);
align-items: stretch;
}
.layout-split .hero:not(.is-alone) {
padding-inline-start: max(0rem, calc((100% - var(--page-content-width, var(--container-width))) / 2));
}
.layout-split .hero-text {
container-type: inline-size;
align-content: center;
}
.layout-split .hero-heading {
--hero-size: min(var(--text-4xl), calc(1rem + 4.6vw), 12.5cqi);
}
.layout-split .hero-media {
position: relative;
min-block-size: 22.5rem;
}
.layout-split .hero-media picture,
.layout-split .hero-media img,
.layout-split .hero-media .media-placeholder {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.layout-split .hero.is-alone {
grid-template-columns: minmax(0, 1fr);
}
.layout-split .is-alone .hero-text {
container-type: normal;
}
.layout-split .is-alone .hero-heading {
--hero-size: min(var(--text-4xl), calc(1rem + 4.6vw));
}
@media (max-width: 40rem) {
.layout-split .hero-media {
min-block-size: 0;
}
.layout-split .hero-media picture,
.layout-split .hero-media img,
.layout-split .hero-media .media-placeholder {
position: static;
block-size: auto;
}
}
/* blocks.css */
.layout-columns .richtext {
columns: 16rem 2;
column-gap: var(--space-xl);
}
.image-text {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(max(16rem, calc((100% - var(--space-columns)) / 2)), 1fr));
gap: var(--space-columns);
align-items: center;
}
.image-text-media .media-placeholder {
aspect-ratio: auto;
min-block-size: calc(var(--space-m) * 17.5);
}
.layout-image-right .image-text-media {
order: 2;
}
.fit-contain .media-placeholder {
aspect-ratio: 16 / 9;
}
.image-text-media img,
.hero-media img {
display: block;
max-inline-size: 100%;
inline-size: 100%;
block-size: auto;
border-radius: var(--radius-l);
}
.fit-cover .image-text-media img {
aspect-ratio: 4 / 3;
object-fit: cover;
}
.fit-contain .image-text-media img {
aspect-ratio: 16 / 9;
object-fit: contain;
}
.form-block-head {
margin-block-end: var(--space-l);
}
.form-block-heading {
margin: 0;
}
.form-block-intro {
margin: var(--space-s) 0 0;
}
.layout-beside .form-block {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: var(--space-xl);
align-items: start;
}
.site-form {
display: grid;
gap: var(--space-m);
max-inline-size: var(--container-narrow);
}
.align-center .site-form {
margin-inline: auto;
text-align: start;
}
.layout-beside .site-form {
max-inline-size: none;
margin-inline: 0;
}
.site-form-field {
display: grid;
gap: var(--space-xs);
}
.site-form-field > label {
font-weight: var(--heading-weight);
}
.site-form-optional {
color: var(--section-muted);
font-weight: var(--body-weight);
}
.site-form input:not([type="checkbox"]),
.site-form select,
.site-form textarea {
inline-size: 100%;
box-sizing: border-box;
padding: var(--space-s) var(--space-m);
color: var(--section-text);
background: var(--section-bg);
border: var(--border-width) solid var(--section-muted);
border-radius: var(--radius-m);
font: inherit;
}
.site-form input:focus-visible,
.site-form select:focus-visible,
.site-form textarea:focus-visible {
outline: var(--border-width) solid var(--section-link);
outline-offset: var(--border-width);
}
.site-form-check label {
display: flex;
gap: var(--space-s);
align-items: baseline;
}
.site-form-error,
.site-form-alert {
margin: 0;
font-weight: var(--heading-weight);
}
.site-form-trap {
position: absolute;
inline-size: 0.0625rem;
block-size: 0.0625rem;
overflow: hidden;
clip-path: inset(50%);
}
.site-form-actions {
margin: 0;
}
.form-block-sent {
margin: 0;
padding: var(--space-s) var(--space-m);
border: max(var(--border-width), 0.0625rem) solid var(--section-success);
border-radius: var(--radius-s);
background: var(--section-success-tint);
color: var(--section-success);
font-size: var(--text-lg);
font-weight: var(--heading-weight);
}
@media (max-width: 40rem) {
.layout-split .hero,
.image-text {
grid-template-columns: 1fr;
}
.layout-image-right .image-text-media {
order: 0;
}
.layout-columns .richtext {
columns: 1;
}
.layout-beside .form-block {
grid-template-columns: minmax(0, 1fr);
}
}
/* blocks-cards.css */
.cards-head {
margin-block-end: var(--space-l);
}
.cards-heading {
margin: 0;
}
.cards-intro {
margin: var(--space-s) 0 0;
}
.align-center .cards-intro {
margin-inline: auto;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(var(--space-m) * 1.25);
}
.per-row-2 .cards-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.per-row-4 .cards-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cards-item {
display: flex;
flex-direction: column;
gap: calc(var(--space-m) * 0.875);
padding: calc(var(--space-m) * 1.125);
background: var(--section-card);
border: var(--border-width) solid var(--section-border);
border-radius: var(--radius-l);
box-shadow: var(--shadow-s);
}
.cards-media img,
.cards-media .media-placeholder {
display: block;
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
--card-media-radius: calc(var(--radius-l) * 0.7);
border-radius: var(--card-media-radius);
}
.shape-square .cards-media img,
.shape-square .cards-media .media-placeholder {
aspect-ratio: 1;
}
.shape-round .cards-media img,
.shape-round .cards-media .media-placeholder {
inline-size: calc(var(--space-m) * 5.5);
aspect-ratio: 1;
--card-media-radius: 50%;
}
.align-center .shape-round .cards-media img,
.align-center .shape-round .cards-media .media-placeholder {
margin-inline: auto;
}
.layout-list .cards-grid {
grid-template-columns: minmax(0, 1fr);
}
.layout-list .cards-item {
display: grid;
grid-template-columns: calc(var(--space-m) * 9) minmax(0, 1fr);
column-gap: calc(var(--space-m) * 1.25);
align-items: start;
}
.layout-list .cards-item > :not(.cards-media) {
grid-column: 2;
}
.layout-list .cards-media {
grid-row: 1 / span 4;
}
.layout-list .shape-none .cards-item {
grid-template-columns: minmax(0, 1fr);
}
.layout-list .shape-none .cards-item > :not(.cards-media) {
grid-column: 1;
}
.cards-item-heading {
margin: 0;
font-size: var(--text-lg);
}
.cards-item .richtext {
font-size: var(--text-small);
line-height: 1.6;
}
.cards-link {
margin: auto 0 0;
padding-block-start: var(--space-xs);
font-weight: var(--heading-weight);
}
@media (max-width: 64rem) {
.per-row-4 .cards-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.layout-grid .per-row-2 .cards-item:nth-child(odd of .cards-item:not(.bx-add-item-cell)):nth-last-child(1 of .cards-item:not(.bx-add-item-cell)):not(:nth-child(1 of .cards-item:not(.bx-add-item-cell))),
.layout-grid .per-row-3 .cards-item:nth-child(3n + 1 of .cards-item:not(.bx-add-item-cell)):nth-last-child(1 of .cards-item:not(.bx-add-item-cell)):not(:nth-child(1 of .cards-item:not(.bx-add-item-cell))),
.layout-grid .per-row-4 .cards-item:nth-child(4n + 1 of .cards-item:not(.bx-add-item-cell)):nth-last-child(1 of .cards-item:not(.bx-add-item-cell)):not(:nth-child(1 of .cards-item:not(.bx-add-item-cell))) {
grid-column: 1 / -1;
justify-self: center;
box-sizing: border-box;
--cards-across: 2;
inline-size: calc((100% - (var(--cards-across) - 1) * var(--space-m) * 1.25) / var(--cards-across));
}
.layout-grid .per-row-3 .cards-item:nth-child(3n + 1 of .cards-item:not(.bx-add-item-cell)):nth-last-child(1 of .cards-item:not(.bx-add-item-cell)):not(:nth-child(1 of .cards-item:not(.bx-add-item-cell))) {
--cards-across: 3;
}
.layout-grid .per-row-4 .cards-item:nth-child(4n + 1 of .cards-item:not(.bx-add-item-cell)):nth-last-child(1 of .cards-item:not(.bx-add-item-cell)):not(:nth-child(1 of .cards-item:not(.bx-add-item-cell))) {
--cards-across: 4;
}
@media (max-width: 64rem) {
.layout-grid .per-row-4 .cards-item:nth-child(n of .cards-item:not(.bx-add-item-cell)):nth-last-child(1 of .cards-item:not(.bx-add-item-cell)):not(:nth-child(1 of .cards-item:not(.bx-add-item-cell))) {
grid-column: auto;
justify-self: stretch;
inline-size: auto;
}
.layout-grid .per-row-4 .cards-item:nth-child(odd of .cards-item:not(.bx-add-item-cell)):nth-last-child(1 of .cards-item:not(.bx-add-item-cell)):not(:nth-child(1 of .cards-item:not(.bx-add-item-cell))) {
grid-column: 1 / -1;
justify-self: center;
--cards-across: 2;
inline-size: calc((100% - var(--space-m) * 1.25) / 2);
}
}
@media (max-width: 40rem) {
.cards-grid,
.per-row-2 .cards-grid,
.per-row-4 .cards-grid {
grid-template-columns: minmax(0, 1fr);
}
.layout-grid .cards .cards-item:nth-child(n of .cards-item:not(.bx-add-item-cell)):nth-last-child(1 of .cards-item:not(.bx-add-item-cell)):not(:nth-child(1 of .cards-item:not(.bx-add-item-cell))) {
grid-column: auto;
justify-self: stretch;
inline-size: auto;
}
}
/* blocks-words.css */
.quote {
display: grid;
gap: var(--space-m);
justify-items: start;
margin: 0;
}
.align-center .quote {
justify-items: center;
text-align: center;
}
.align-center .quote-words {
padding: 0;
border: 0;
}
.layout-card .quote {
padding: clamp(var(--space-s), calc((100% - 16rem) / 2 - var(--border-width)), calc(var(--space-m) * 1.125));
background: var(--section-card);
border: var(--border-width) solid var(--section-border);
border-radius: var(--radius-l);
box-shadow: var(--shadow-s);
}
.quote-portrait img {
inline-size: var(--space-2xl);
block-size: var(--space-2xl);
object-fit: cover;
clip-path: circle(50%);
}
.quote-words {
margin: 0;
padding: 0 0 0 calc(var(--space-m) * 1.125);
border: 0;
border-inline-start: calc(var(--border-width) * 3) solid var(--section-link);
color: var(--section-text);
--quote-size: calc(var(--text-base) * 1.375);
font-size: var(--quote-size);
font-weight: 600;
line-height: 1.35;
}
.layout-big .quote-words {
padding: 0;
border: 0;
--quote-size: calc(var(--text-base) * 1.875);
line-height: 1.25;
text-wrap: balance;
}
.layout-card .quote-words {
padding: 0;
border: 0;
}
:is(.layout-big, .layout-card) .quote-words {
font-family: var(--font-heading);
font-weight: var(--heading-weight);
letter-spacing: var(--heading-tracking);
}
.quote-said {
display: flex;
flex-wrap: wrap;
gap: var(--space-s);
align-items: baseline;
color: var(--section-muted);
font-size: var(--text-small);
}
.quote-who {
color: var(--section-text);
font-style: normal;
font-weight: 600;
}
.quote-role {
color: var(--section-muted);
}
.divider {
block-size: var(--space-l);
}
.height-medium.divider {
block-size: var(--space-xl);
}
.height-large.divider {
block-size: var(--space-3xl);
}
.layout-line .divider {
block-size: 0;
margin-block: var(--space-l);
border-top: var(--border-width) solid var(--section-border);
}
.layout-line.height-medium .divider {
margin-block: var(--space-xl);
}
.layout-line.height-large .divider {
margin-block: var(--space-3xl);
}
.cta {
display: grid;
gap: var(--space-l);
}
.layout-banner .cta {
justify-items: center;
text-align: center;
}
.layout-banner .cta-body {
margin-inline: auto;
}
.layout-banner .cta-links {
justify-content: center;
}
.layout-beside .cta {
grid-template-columns: minmax(0, 1fr) auto;
gap: calc(var(--space-m) * 1.5);
align-items: center;
}
.cta-heading {
margin: 0;
}
.cta-body {
margin: var(--space-s) 0 0;
color: var(--section-muted);
}
.cta-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
align-items: center;
margin: 0;
}
.align-center .cta-links {
justify-content: center;
}
.layout-beside .cta-links {
justify-content: flex-end;
}
.cta-quiet {
color: var(--section-link);
font-weight: var(--heading-weight);
}
@media (max-width: 40rem) {
.layout-beside .cta {
grid-template-columns: minmax(0, 1fr);
}
.layout-beside .cta-links {
justify-content: flex-start;
}
}
/* blocks-accordion.css */
.accordion-heading {
margin: 0 0 var(--space-l);
}
.accordion-items {
display: grid;
gap: var(--space-s);
}
.align-center .accordion-items {
text-align: start;
}
.accordion-item {
border-block-end: var(--border-width) solid var(--section-border);
}
.accordion-question {
padding-block: var(--space-s);
font-weight: var(--heading-weight);
cursor: pointer;
}
.accordion-question:hover,
.accordion-question:focus-visible {
color: var(--section-link);
}
.accordion-answer {
padding-block-end: var(--space-m);
}
.layout-cards .accordion-items {
gap: var(--space-m);
}
.layout-cards .accordion-item {
padding-inline: calc(var(--space-m) * 1.125);
background: var(--section-card);
border: var(--border-width) solid var(--section-border);
border-radius: var(--radius-l);
box-shadow: var(--shadow-s);
}
.layout-cards .accordion-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
padding-block: calc(var(--space-m) * 1.125);
font-size: var(--text-lg);
list-style: none;
}
.layout-cards .accordion-question::-webkit-details-marker {
display: none;
}
.layout-cards .accordion-question::after {
content: "";
flex: none;
inline-size: 0.5em;
block-size: 0.5em;
border-inline-end: max(0.125em, calc(var(--border-width) * 2)) solid currentColor;
border-block-end: max(0.125em, calc(var(--border-width) * 2)) solid currentColor;
transform: translateY(-25%) rotate(45deg);
transition: transform 0.2s ease;
}
.layout-cards .accordion-item[open] > .accordion-question::after {
transform: translateY(25%) rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
.layout-cards .accordion-question::after {
transition: none;
}
}
/* blocks-stats.css */
.stats-heading {
margin: 0 0 var(--space-l);
}
.stats {
container-type: inline-size;
}
.stats-grid {
--stats-across: 3;
display: grid;
grid-template-columns: repeat(var(--stats-across), minmax(0, 1fr));
gap: var(--space-l);
margin: 0;
}
.layout-four .stats-grid {
--stats-across: 4;
}
.stats-item {
display: grid;
gap: var(--space-xs);
}
.stats-value {
font-family: var(--font-heading);
--stats-size: clamp(var(--text-xl), calc((100cqi - (var(--stats-across) - 1) * var(--space-l)) / var(--stats-across) / 2.6), var(--text-3xl));
font-size: var(--stats-size);
font-weight: var(--heading-weight);
line-height: var(--leading-heading);
letter-spacing: var(--heading-tracking);
}
.stats-label {
margin: 0;
color: var(--section-muted);
font-size: var(--text-sm);
}
@container (max-width: 28rem) {
.layout-four .stats-grid {
--stats-across: 2;
}
}
@container (max-width: 20rem) {
.stats-grid,
.layout-four .stats-grid {
--stats-across: 1;
}
}
@container (14rem < width <= 20rem) {
.stats-grid:has(> :nth-child(even of .stats-item:not(.bx-add-item-cell)):nth-last-child(1 of .stats-item:not(.bx-add-item-cell))) {
--stats-across: 2;
}
}
/* blocks-media.css */
.picture {
margin: 0;
}
.layout-inset .picture-frame {
padding: var(--space-l);
background: var(--section-card);
border-radius: var(--radius-m);
}
.picture-frame img,
.picture-frame .media-placeholder {
inline-size: 100%;
block-size: auto;
border-radius: var(--radius-m);
}
.shape-wide .picture-frame img,
.shape-wide .picture-frame .media-placeholder {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.shape-square .picture-frame img,
.shape-square .picture-frame .media-placeholder {
aspect-ratio: 1;
object-fit: cover;
}
.shape-round .picture-frame img,
.shape-round .picture-frame .media-placeholder {
aspect-ratio: 1;
object-fit: cover;
clip-path: circle(50%);
}
.shape-natural .picture-frame .media-placeholder {
aspect-ratio: 4 / 3;
}
.picture-caption {
margin-block-start: var(--space-s);
color: var(--section-muted);
font-size: var(--text-sm);
}
.gallery-heading {
margin: 0 0 var(--space-l);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-l) var(--space-m);
}
.layout-two .gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.layout-four .gallery-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-m);
}
.gallery-item {
margin: 0;
}
.gallery-frame img,
.gallery-frame .media-placeholder {
inline-size: 100%;
block-size: auto;
border-radius: var(--radius-m);
}
.shape-square .gallery-frame img,
.shape-square .gallery-frame .media-placeholder {
aspect-ratio: 1;
object-fit: cover;
}
.shape-wide .gallery-frame img,
.shape-wide .gallery-frame .media-placeholder {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.shape-round .gallery-frame img,
.shape-round .gallery-frame .media-placeholder {
aspect-ratio: 1;
object-fit: cover;
clip-path: circle(50%);
}
.shape-natural .gallery-frame .media-placeholder {
aspect-ratio: 4 / 3;
}
.gallery-caption {
margin-block-start: var(--space-xs);
color: var(--section-muted);
font-size: var(--text-sm);
}
@media (max-width: 40rem) {
.gallery-grid,
.layout-two .gallery-grid,
.layout-four .gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* blocks-logos.css */
.logos-heading {
margin: 0 0 var(--space-l);
}
.logos-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-m) var(--space-xl);
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.align-center .logos-row {
justify-content: center;
}
.logos {
container-type: inline-size;
}
.layout-grid .logos-row {
--logos-across: 1;
display: grid;
grid-template-columns: repeat(var(--logos-across), minmax(0, 1fr));
gap: var(--space-l);
}
.layout-grid .logos-row:has(> :nth-child(2 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 2;
}
.layout-grid .logos-row:has(> :nth-child(3 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 3;
}
.layout-grid .logos-row:has(> :nth-child(4 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 4;
}
.layout-grid .logos-row:has(> :nth-child(5 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 3;
}
.layout-grid .logos-row:has(> :nth-child(7 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 4;
}
.layout-grid .logos-row:has(> :nth-child(9 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 3;
}
.layout-grid .logos-row:has(> :nth-child(10 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 5;
}
.layout-grid .logos-row:has(> :nth-child(11 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 4;
}
.layout-grid .logos-row:has(> :nth-child(13 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 5;
}
.layout-grid .logos-row:has(> :nth-child(16 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 4;
}
.layout-grid .logos-row:has(> :nth-child(17 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 6;
}
@container (max-width: 52rem) {
.layout-grid .logos-row:has(> :nth-child(10 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 4;
}
.layout-grid .logos-row:has(> :nth-child(10 of .logos-item:not(.bx-add-item-cell))) > :nth-child(4n + 1 of .logos-item:not(.bx-add-item-cell)):nth-last-child(1 of .logos-item:not(.bx-add-item-cell)) {
grid-column: 1 / -1;
}
}
@container (max-width: 34rem) {
.layout-grid .logos-row:has(> :nth-child(3 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 2;
}
.layout-grid .logos-item:nth-child(odd of .logos-item:not(.bx-add-item-cell)):nth-last-child(1 of .logos-item:not(.bx-add-item-cell)) {
grid-column: 1 / -1;
}
}
@container (max-width: 16rem) {
.layout-grid .logos-row:has(> :nth-child(2 of .logos-item:not(.bx-add-item-cell))) {
--logos-across: 1;
}
}
.logos-mark {
display: flex;
align-items: center;
justify-content: center;
block-size: 3.5rem;
color: var(--section-muted);
text-decoration: none;
}
.layout-grid .logos-mark {
justify-content: flex-start;
}
.align-center .layout-grid .logos-mark {
justify-content: center;
}
.logos-mark:has(> .logos-name) {
block-size: auto;
}
.logos-mark picture {
display: contents;
}
.logos-mark img {
inline-size: auto;
max-inline-size: 10rem;
block-size: 100%;
object-fit: contain;
}
.logos-mark .media-placeholder {
inline-size: 8rem;
block-size: 100%;
}
.logos-name {
font-family: var(--font-heading);
font-weight: var(--heading-weight);
}
a.logos-mark:hover,
a.logos-mark:focus-visible {
color: var(--section-link);
}
/* blocks-embed.css */
.embed {
margin: 0;
}
.embed.is-empty {
display: none;
}
.layout-inset .embed-frame {
padding: var(--space-l);
background: var(--section-card);
border-radius: var(--radius-m);
}
.embed-frame iframe {
display: block;
inline-size: 100%;
block-size: 100%;
border: 0;
border-radius: var(--radius-m);
}
.embed-play {
position: relative;
display: grid;
place-items: center;
inline-size: 100%;
block-size: 100%;
overflow: hidden;
border-radius: var(--radius-m);
color: var(--section-text);
text-decoration: none;
}
.embed-play.is-bare {
background: var(--section-placeholder);
border: var(--border-width) solid var(--section-placeholder-edge);
}
.embed-play picture,
.embed-play img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.embed-play-label {
position: relative;
display: grid;
justify-items: center;
gap: var(--space-xs);
padding: var(--space-s);
}
.embed-play-text {
display: inline-flex;
align-items: center;
gap: var(--space-s);
padding: var(--space-s) var(--space-l);
background: var(--section-button-bg);
border-radius: var(--radius-button);
box-shadow: var(--shadow-m);
color: var(--section-button-text);
font-weight: 600;
transition: transform 120ms ease;
}
.embed-play:not(.provider-googlemaps) .embed-play-text::before {
content: "";
inline-size: 0.7em;
block-size: 0.8em;
background: currentColor;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.embed-play-youtube {
inline-size: 4.25rem;
aspect-ratio: 68 / 48;
background-image: url("../assets/embed-youtube.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transition: transform 120ms ease;
}
.provider-youtube .embed-play-text {
position: absolute;
inline-size: 1em;
block-size: 1em;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.embed-play:hover .embed-play-text,
.embed-play:focus-visible .embed-play-text,
.embed-play:hover .embed-play-youtube,
.embed-play:focus-visible .embed-play-youtube {
transform: scale(1.06);
}
.embed-play:focus-visible {
outline: calc(var(--border-width) * 2) solid var(--section-link);
outline-offset: calc(var(--border-width) * 2);
}
@media (prefers-reduced-motion: reduce) {
.embed-play-text,
.embed-play-youtube {
transition: none;
}
}
.ratio-wide .embed-frame {
aspect-ratio: 16 / 9;
}
.ratio-square .embed-frame {
aspect-ratio: 1;
}
.ratio-tall .embed-frame {
aspect-ratio: 3 / 4;
}
.embed-caption {
margin-block-start: var(--space-s);
color: var(--section-muted);
font-size: var(--text-sm);
}
/* blocks-downloads.css */
.downloads-heading {
margin: 0 0 var(--space-l);
}
.downloads-list {
display: grid;
gap: var(--space-s);
margin: 0;
padding: 0;
list-style: none;
}
.downloads-link,
.downloads-item.is-empty {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-m);
align-items: center;
padding: var(--space-m);
color: var(--section-text);
text-decoration: none;
background: var(--section-card);
border: var(--border-width) solid var(--section-border);
border-radius: var(--radius-m);
}
.downloads-link:hover,
.downloads-link:focus-visible {
border-color: var(--section-link);
}
.downloads-type {
display: grid;
place-items: center;
min-inline-size: 3.25rem;
padding: var(--space-xs) var(--space-s);
color: var(--section-button-text);
background: var(--section-button-bg);
border-radius: var(--radius-s);
font-size: var(--text-sm);
font-weight: var(--heading-weight);
letter-spacing: var(--heading-tracking);
}
.downloads-text {
display: grid;
gap: var(--space-xs);
min-inline-size: 0;
}
.downloads-title {
font-family: var(--font-heading);
font-weight: var(--heading-weight);
overflow-wrap: anywhere;
}
.downloads-link:hover .downloads-title,
.downloads-link:focus-visible .downloads-title {
color: var(--section-link);
}
.downloads-description {
color: var(--section-muted);
}
.downloads-meta {
color: var(--section-muted);
font-size: var(--text-sm);
}
.layout-cards .downloads-list {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
gap: var(--space-m);
}
.layout-cards .downloads-link,
.layout-cards .downloads-item.is-empty {
grid-template-columns: minmax(0, 1fr);
align-content: start;
justify-items: start;
}
.downloads-item.is-empty {
display: none;
}
/* chrome.css */
.site-header {
display: flex;
flex-wrap: wrap;
gap: var(--space-m) var(--space-l);
align-items: center;
justify-content: space-between;
}
.site-logo {
display: inline-flex;
text-decoration: none;
}
.site-logo img {
display: block;
block-size: 2.5em;
inline-size: auto;
border-radius: 0;
}
.site-name {
color: var(--section-text);
font-family: var(--font-heading);
font-weight: var(--heading-weight);
letter-spacing: var(--heading-tracking);
--site-name-size: clamp(var(--text-base), calc(var(--chrome-logo-size, 2.75rem) * 0.5), var(--text-xl));
font-size: var(--site-name-size);
line-height: 1;
}
.site-nav ul,
.site-footer-nav ul {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
margin: 0;
padding: 0;
list-style: none;
}
.site-nav a,
.site-footer-nav a {
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-footer-nav a:hover,
.site-footer-nav a:focus-visible {
text-decoration: underline;
}
.site-nav-children {
display: none;
}
.site-header-action {
margin: 0;
}
header.block:not(:has(> .container > .behaviour-over)) {
background-color: var(--chrome-header-bg, var(--section-bg));
color: var(--chrome-header-text, var(--section-text));
}
footer.block {
background-color: var(--chrome-footer-bg, var(--section-bg));
color: var(--chrome-footer-text, var(--section-text));
}
.site-header.own-colour {
--section-bg: var(--chrome-header-bg);
--section-text: var(--chrome-header-text);
--section-muted: var(--chrome-header-muted);
--section-link: var(--chrome-header-text);
--section-button-bg: var(--chrome-header-text);
--section-button-text: var(--chrome-header-bg);
--section-card: var(--chrome-header-raised);
--section-border: var(--chrome-header-muted);
}
.site-footer.own-colour {
--section-bg: var(--chrome-footer-bg);
--section-text: var(--chrome-footer-text);
--section-muted: var(--chrome-footer-muted);
--section-link: var(--chrome-footer-text);
--section-button-bg: var(--chrome-footer-text);
--section-button-text: var(--chrome-footer-bg);
--section-card: var(--chrome-footer-raised);
--section-border: var(--chrome-footer-muted);
}
.site-header {
min-block-size: var(--chrome-header-height, 4.5rem);
padding-block: var(--space-s);
box-sizing: border-box;
}
.site-footer {
padding-block: var(--space-xl);
}
.block-header:has(.edge-line) {
border-block-end: var(--border-width) solid var(--chrome-header-muted, var(--section-border));
}
.block-header:has(.edge-shadow) {
position: relative;
z-index: 2;
box-shadow: var(--shadow-edge);
}
.site-logo img { block-size: var(--chrome-logo-size, 2.75rem); }
@media (max-width: 40rem) {
.site-logo img {
block-size: min(var(--chrome-logo-size, 2.75rem), 2.25em);
max-inline-size: 60vw;
object-fit: contain;
}
.site-name {
--site-name-size: min(var(--text-lg), calc(var(--chrome-logo-size, 2.75rem) * 0.5));
}
}
.site-brand {
align-items: center;
gap: var(--space-s);
}
.nav-caps .site-nav a {
font-size: var(--text-sm);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.nav-ink-ink .site-nav a {
color: var(--section-text);
}
.nav-pills .site-nav > ul > li > a {
padding: var(--space-xs) var(--space-s);
border-radius: var(--radius-button);
}
.nav-pills .site-nav a[aria-current="page"],
.nav-pills .site-nav .is-current-parent > a {
background: var(--section-card);
text-decoration: none;
}
.nav-bar .site-nav > ul > li > a {
padding-block: var(--space-xs);
border-block-end: 0.15em solid transparent;
text-decoration: none;
}
.nav-bar .site-nav > ul > li > a[aria-current="page"],
.nav-bar .site-nav > ul > li.is-current-parent > a,
.nav-bar .site-nav > ul > li > a:hover,
.nav-bar .site-nav > ul > li > a:focus-visible {
border-block-end-color: currentColor;
text-decoration: none;
}
.nav-chips .site-nav > ul > li > a {
padding: var(--space-xs) var(--space-s);
border: var(--border-width) solid var(--section-border);
border-radius: var(--radius-button);
text-decoration: none;
}
.nav-chips .site-nav > ul > li > a[aria-current="page"],
.nav-chips .site-nav > ul > li.is-current-parent > a {
background: var(--section-card);
border-color: currentColor;
text-decoration: none;
}
.nav-chips .site-nav > ul > li > a:hover,
.nav-chips .site-nav > ul > li > a:focus-visible {
border-color: currentColor;
text-decoration: none;
}
.site-header-action .button-outline {
background: transparent;
border-color: var(--section-text);
color: var(--section-text);
box-shadow: none;
}
.site-header-link {
font-weight: var(--heading-weight);
}
.site-nav a[aria-current="page"],
.site-nav .is-current-parent > a,
.site-footer-nav a[aria-current="page"] {
text-decoration: underline;
text-decoration-thickness: 0.12em;
text-underline-offset: 0.35em;
}
/* chrome-footer.css */
.site-footer {
display: grid;
gap: var(--space-s);
}
.site-footer-text {
color: var(--section-muted);
}
.site-footer .locale-switcher {
padding-block: 0;
}
.site-small-print {
margin: 0;
color: var(--section-muted);
font-size: var(--text-sm);
}
.layout-centred .site-footer {
justify-items: center;
text-align: center;
}
.layout-centred .site-footer-nav ul {
justify-content: center;
}
.site-footer-col {
display: grid;
gap: var(--space-s);
align-content: start;
}
.site-footer-title {
margin: 0;
font-size: var(--text-base);
font-weight: var(--heading-weight);
letter-spacing: var(--heading-tracking);
text-transform: var(--heading-transform);
}
.layout-columns .site-footer {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-xl);
align-items: start;
}
.layout-three .site-footer {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--space-xl);
align-items: start;
}
.layout-columns .site-footer.drawn-1,
.layout-three .site-footer.drawn-1 {
grid-template-columns: minmax(0, 1fr);
}
.layout-three .site-footer.drawn-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.layout-menu_first .site-footer-nav {
order: -1;
}
.site-footer-foot {
display: flex;
flex-wrap: wrap;
gap: var(--space-s) var(--space-l);
align-items: baseline;
}
.foot-split .site-footer-foot {
justify-content: space-between;
}
.foot-centred .site-footer-foot {
justify-content: center;
text-align: center;
}
.foot-left .site-footer-foot {
flex-direction: column;
align-items: flex-start;
}
.site-footer-foot {
grid-column: 1 / -1;
}
:is(.layout-columns, .layout-three, .layout-menu_first) .site-footer-foot {
--foot-rule: color-mix(in srgb, var(--section-text) 25%, transparent);
margin-block-start: var(--space-s);
padding-block-start: var(--space-m);
border-block-start: var(--border-width) solid var(--foot-rule);
}
.layout-centred .site-footer-col {
justify-items: center;
}
.site-footer-text p {
margin: 0;
}
.site-footer-text p + p {
margin-block-start: var(--space-xs);
}
.layout-columns .site-footer-nav ul {
display: block;
columns: 1;
column-gap: var(--space-l);
inline-size: max-content;
max-inline-size: 100%;
}
.layout-columns .site-footer-nav li {
break-inside: avoid;
padding-block-end: var(--space-xs);
}
.links-list .site-footer-nav ul {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-xs) var(--space-l);
}
.layout-centred .links-list .site-footer-nav ul {
justify-items: center;
}
.layout-columns .footer-cols-3 .site-footer-nav ul {
columns: 2;
}
.layout-columns .footer-cols-4 .site-footer-nav ul {
columns: 3;
}
@media (max-width: 40rem) {
.layout-columns .site-footer,
.layout-three .site-footer,
.layout-three .site-footer.drawn-2 {
grid-template-columns: minmax(0, 1fr);
}
.layout-columns .site-footer-nav ul,
.layout-columns .footer-cols-3 .site-footer-nav ul,
.layout-columns .footer-cols-4 .site-footer-nav ul {
columns: 1;
}
}
body:not(:has(.site-footer.own-colour)) :is(
main:has(+ footer.block.surface-plain) > .block.surface-plain:last-child,
main:has(+ footer.block.surface-tinted) > .block.surface-tinted:last-child,
main:has(+ footer.block.surface-contrast) > .block.surface-contrast:last-child,
main:has(+ footer.block.surface-gradient) > .block.surface-gradient:last-child
):not([class*="pad-b-"]) {
padding-bottom: calc(var(--section-gap) * 0.5);
}
:is(
main:has(> .block.surface-plain:last-child) + footer.block.surface-plain,
main:has(> .block.surface-tinted:last-child) + footer.block.surface-tinted,
main:has(> .block.surface-contrast:last-child) + footer.block.surface-contrast,
main:has(> .block.surface-gradient:last-child) + footer.block.surface-gradient
):not(:has(.own-colour)) {
margin-top: 0;
padding-top: 0;
border-radius: 0;
clip-path: none;
}
:is(
main:has(> .block.surface-plain:last-child) + footer.block.surface-plain,
main:has(> .block.surface-tinted:last-child) + footer.block.surface-tinted,
main:has(> .block.surface-contrast:last-child) + footer.block.surface-contrast,
main:has(> .block.surface-gradient:last-child) + footer.block.surface-gradient
):not(:has(.own-colour)) .site-footer {
padding-block-start: calc(var(--space-xl) * 0.5);
}
/* chrome-header.css */
.layout-inline .site-header {
justify-content: flex-start;
}
.layout-inline .site-header-action {
margin-inline-start: auto;
}
.layout-centred .site-header {
flex-direction: column;
justify-content: center;
text-align: center;
}
.layout-centred .site-nav ul {
justify-content: center;
}
.layout-masthead .site-header {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.layout-masthead .site-header-action {
margin-inline-start: 0;
}
.layout-split .site-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-areas: "before brand after" "action action action";
align-items: baseline;
align-content: center;
justify-items: center;
}
.layout-split .site-header:not(:has(.site-header-action)) {
grid-template-areas: "before brand after";
}
.layout-split .site-header:has(.site-logo img) {
align-items: center;
}
.layout-split .site-nav {
display: contents;
}
.layout-split .site-logo {
grid-area: brand;
}
.layout-split .site-nav > ul:first-child {
grid-area: before;
justify-content: flex-end;
justify-self: end;
}
.layout-split .site-nav > ul:last-child {
grid-area: after;
justify-content: flex-start;
justify-self: start;
}
.layout-split .site-header-action {
grid-area: action;
}
.block-header:has(> .container > .behaviour-sticky) {
position: sticky;
top: 0;
z-index: 10;
--header-sticky-bg: color-mix(in srgb, var(--section-bg) calc(var(--chrome-header-opacity, 1) * 100%), transparent);
background: var(--header-sticky-bg);
backdrop-filter: blur(var(--chrome-header-blur, 0rem));
}
.page-sheet {
position: relative;
}
.block-header:has(> .container > .behaviour-over) {
position: absolute;
inset-inline: 0;
top: 0;
z-index: 10;
background: transparent;
}
.page-sheet:has(> .block-header .behaviour-over) > main > .block:first-child {
padding-block-start: calc(var(--section-pad-top) + var(--space-3xl));
}
.page-sheet:has(> main > .block:first-child:is(.surface-contrast, .surface-image)) > .block-header:has(.behaviour-over) {
--section-bg: var(--color-contrast);
--section-text: var(--color-on-contrast);
--section-muted: var(--color-muted-on-contrast);
--section-link: var(--color-on-contrast);
--section-border: var(--color-muted-on-contrast);
--section-button-bg: var(--color-on-contrast);
--section-button-text: var(--color-contrast);
}
.page-sheet:has(> main > .block:first-child.surface-gradient) > .block-header:has(.behaviour-over) {
--section-bg: var(--color-gradient-start);
--section-text: var(--color-on-gradient);
--section-muted: var(--color-on-gradient);
--section-link: var(--color-on-gradient);
--section-border: var(--color-on-gradient);
--section-button-bg: var(--color-on-gradient);
--section-button-text: var(--color-gradient-start);
}
.page-sheet:has(> main > .block:first-child.surface-tinted) > .block-header:has(.behaviour-over) {
--section-bg: var(--color-surface);
--section-card: var(--color-background);
}
.page-sheet:has(> main > .block-hero:first-child > .container > .hero.is-cover) > .block-header:has(.behaviour-over),
.page-sheet:has(> main > .block:first-child > .container > .section-cols > .section-column:only-child > :only-child > .hero.is-cover) > .block-header:has(.behaviour-over) {
--section-bg: var(--color-contrast);
--section-card: var(--color-contrast-raised);
--section-text: var(--color-on-contrast);
--section-muted: var(--color-muted-on-contrast);
--section-link: var(--color-on-contrast);
--section-border: var(--color-muted-on-contrast);
--section-button-bg: var(--color-on-contrast);
--section-button-text: var(--color-contrast);
}
.site-nav li {
position: relative;
}
.site-nav-children {
display: block;
padding-inline-start: var(--space-m);
font-size: var(--text-sm);
}
.site-nav-children li + li {
margin-block-start: var(--space-xs);
}
.nav-ready .site-nav-children {
display: none;
}
.nav-ready .site-nav li.is-open > .site-nav-children {
display: grid;
gap: var(--space-xs);
position: absolute;
top: 100%;
inset-inline-start: 0;
z-index: 11;
min-inline-size: 12em;
margin-block-start: 0;
padding: var(--space-s) var(--space-m);
background: var(--section-bg);
border-radius: var(--radius-m);
box-shadow: var(--shadow-m);
font-size: inherit;
}
.nav-ready .site-nav > ul > li {
padding-block-end: var(--space-xs);
margin-block-end: calc(var(--space-xs) * -1);
}
.nav-ready .site-nav-children li + li {
margin-block-start: 0;
}
.site-nav-more,
.site-nav-toggle {
padding: var(--space-xs) var(--space-s);
background: transparent;
border: var(--border-width) solid var(--section-border);
border-radius: var(--radius-s);
color: var(--section-text);
font: inherit;
line-height: 1;
cursor: pointer;
}
.site-nav-more {
margin-inline-start: 0.2em;
padding: 0.1em 0.2em;
border-color: transparent;
font-size: var(--text-sm);
}
.site-nav-more[aria-expanded="true"] span {
display: inline-block;
transform: rotate(180deg);
}
.site-header-action .button {
white-space: nowrap;
}
.site-nav > ul > li {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.site-nav-toggle {
display: none;
}
@media (max-width: 40rem) {
.site-header {
justify-content: flex-start;
}
.nav-ready .site-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
margin-inline-start: auto;
padding: var(--space-xs);
border-radius: var(--radius-button);
}
.nav-ready .site-nav-toggle svg {
display: block;
}
.nav-ready .site-logo {
flex: 0 1 auto;
min-inline-size: 0;
}
.layout-centred .nav-ready.site-header,
.layout-masthead .nav-ready.site-header,
.layout-split .nav-ready.site-header,
.nav-ready.site-header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
text-align: start;
}
.layout-split .nav-ready .site-nav {
display: none;
}
.layout-split .nav-ready.nav-open .site-nav {
display: block;
}
.layout-split .nav-ready .site-nav > ul {
inline-size: 100%;
justify-self: auto;
}
.nav-ready .site-nav,
.nav-ready .site-header-action {
display: none;
flex-basis: 100%;
}
.nav-ready.nav-open .site-nav,
.nav-ready.nav-open .site-header-action {
display: block;
}
.block-header:has(.behaviour-over.nav-open) {
background-color: var(--section-bg);
}
.layout-centred .nav-ready .site-nav ul,
.layout-split .nav-ready .site-nav ul {
justify-content: flex-start;
}
.nav-ready .site-nav ul {
flex-direction: column;
gap: var(--space-s);
}
.nav-ready .site-nav li.is-open > .site-nav-children {
position: static;
margin-block-start: var(--space-xs);
padding-block: 0;
box-shadow: none;
}
.nav-ready .site-nav > ul > li {
padding-block-end: 0;
margin-block-end: 0;
}
.layout-columns .site-footer {
grid-template-columns: minmax(0, 1fr);
}
}
/* sections.css */
.block {
--section-bg: var(--color-background);
--section-text: var(--color-text);
--section-muted: var(--color-muted);
--section-link: var(--color-link);
--section-button-bg: var(--color-accent);
--section-button-text: var(--color-on-accent);
--section-card: var(--color-card);
--section-border: var(--color-border);
--section-success: var(--color-success);
--section-success-tint: color-mix(in srgb, var(--section-success) 10%, var(--section-bg));
--section-placeholder: color-mix(in srgb, var(--section-text) 10%, transparent);
--section-placeholder-edge: color-mix(in srgb, var(--section-text) 40%, transparent);
--placeholder-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5.5 3h13A2.5 2.5 0 0 1 21 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 18.5v-13A2.5 2.5 0 0 1 5.5 3Zm0 1.6a.9.9 0 0 0-.9.9v13a.9.9 0 0 0 .9.9h13a.9.9 0 0 0 .9-.9v-13a.9.9 0 0 0-.9-.9Z'/%3E%3Ccircle cx='9' cy='9' r='1.9'/%3E%3Cpath d='M5.6 18.4h12.8l-4.6-6-3 3.8-1.8-2.1z'/%3E%3C/svg%3E");
--section-picture-veil: var(--veil-least, 0.55);
--section-gap: var(--space-section, var(--space-xl));
--section-pad-top: var(--section-gap);
--section-pad-bottom: var(--section-gap);
--section-width: var(--container-width);
--divider-depth: var(--space-xl);
position: relative;
padding-block: var(--section-pad-top) var(--section-pad-bottom);
color: var(--section-text);
background: var(--section-bg);
}
@media (max-width: 40rem) {
.block {
--section-gap: calc(var(--space-section, var(--space-xl)) * 0.6);
}
}
.block > .container {
max-width: var(--section-width);
padding-block: 0;
}
.block-header,
.block-footer {
--section-pad-top: 0rem;
--section-pad-bottom: 0rem;
}
.block-header {
--section-width: var(--page-header-width, var(--container-width));
}
.block-footer {
--section-width: var(--page-footer-width, var(--container-width));
}
.surface-tinted {
--section-bg: var(--color-surface);
--section-card: var(--color-background);
}
.surface-contrast,
.surface-image {
--section-bg: var(--color-contrast);
--section-text: var(--color-on-contrast);
--section-muted: var(--color-muted-on-contrast);
--section-link: var(--color-on-contrast);
--section-button-bg: var(--color-on-contrast);
--section-button-text: var(--color-contrast);
--section-card: var(--color-contrast-raised);
--section-border: var(--color-muted-on-contrast);
--section-success: var(--color-success-on-contrast);
}
.surface-image {
--section-muted: var(--color-on-contrast);
}
.surface-gradient {
--section-text: var(--color-on-gradient);
--section-muted: var(--color-on-gradient);
--section-link: var(--color-on-gradient);
--section-button-bg: var(--color-on-gradient);
--section-button-text: var(--color-gradient-start);
--section-card: var(--color-gradient-end);
--section-border: var(--color-on-gradient);
background-image: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
}
.section-picture {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.section-picture img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.section-picture::after {
content: "";
position: absolute;
inset: 0;
background: var(--section-bg);
opacity: var(--section-picture-veil, 0.55);
}
.surface-image > .container {
position: relative;
z-index: 1;
}
.focal-x-0 { object-position: 0% var(--focal-y, 50%); }
.focal-x-10 { object-position: 10% var(--focal-y, 50%); }
.focal-x-20 { object-position: 20% var(--focal-y, 50%); }
.focal-x-30 { object-position: 30% var(--focal-y, 50%); }
.focal-x-40 { object-position: 40% var(--focal-y, 50%); }
.focal-x-50 { object-position: 50% var(--focal-y, 50%); }
.focal-x-60 { object-position: 60% var(--focal-y, 50%); }
.focal-x-70 { object-position: 70% var(--focal-y, 50%); }
.focal-x-80 { object-position: 80% var(--focal-y, 50%); }
.focal-x-90 { object-position: 90% var(--focal-y, 50%); }
.focal-x-100 { object-position: 100% var(--focal-y, 50%); }
.focal-y-0 { --focal-y: 0%; }
.focal-y-10 { --focal-y: 10%; }
.focal-y-20 { --focal-y: 20%; }
.focal-y-30 { --focal-y: 30%; }
.focal-y-40 { --focal-y: 40%; }
.focal-y-50 { --focal-y: 50%; }
.focal-y-60 { --focal-y: 60%; }
.focal-y-70 { --focal-y: 70%; }
.focal-y-80 { --focal-y: 80%; }
.focal-y-90 { --focal-y: 90%; }
.focal-y-100 { --focal-y: 100%; }
.width-narrow {
--section-width: var(--container-narrow);
}
.block:not(.block-header, .block-footer, :has(.section-column > * > .hero.is-cover)).align-left > .container {
margin-inline-start: max(0rem, calc((100% - max(var(--section-width), var(--page-content-width, var(--container-width)))) / 2 - var(--space-l)));
margin-inline-end: auto;
}
.width-wide {
--section-width: var(--container-wide);
}
.width-full {
--section-width: none;
}
.width-narrow .image-text {
grid-template-columns: 1fr;
}
.align-center {
text-align: center;
}
.align-center .container > * {
margin-inline: auto;
}
.align-center .richtext :is(ul, ol) {
width: fit-content;
max-width: 100%;
margin-inline: auto;
padding-inline-start: 1.25em;
text-align: start;
}
.align-center .richtext blockquote {
padding-inline-start: 0;
border-inline-start: 0;
}
.section-cols {
display: grid;
gap: var(--space-xl) var(--space-l);
align-items: start;
}
.cols-one {
grid-template-columns: minmax(0, 1fr);
}
.cols-halves {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cols-thirds {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cols-quarters {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cols-wide-left {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.cols-wide-right {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.cols-sidebar {
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}
.section-column {
display: grid;
align-content: start;
gap: var(--space-l);
}
.align-center .section-column > * > * {
margin-inline: auto;
}
@media (max-width: 64rem) {
.cols-quarters {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.section-cols:not(.stack-stay) {
grid-template-columns: minmax(0, 1fr);
}
.stack-reverse {
display: flex;
flex-direction: column-reverse;
row-gap: var(--space-xl);
}
.cols-quarters.stack-stay {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* sections-edges.css */
:is(
.block.surface-plain + .block.surface-plain,
.block.surface-tinted + .block.surface-tinted,
.block.surface-contrast + .block.surface-contrast,
.block.surface-gradient + .block.surface-gradient
):not([class*="pad-t-"]) {
--section-pad-top: calc(var(--section-gap) * 0.5);
}
:is(
.block.surface-plain:has(+ .block.surface-plain),
.block.surface-tinted:has(+ .block.surface-tinted),
.block.surface-contrast:has(+ .block.surface-contrast),
.block.surface-gradient:has(+ .block.surface-gradient)
):not([class*="pad-b-"]) {
--section-pad-bottom: calc(var(--section-gap) * 0.5);
}
.divider-line {
border-top: var(--border-width) solid var(--color-border);
}
.divider-slant,
.divider-curve {
margin-top: calc(var(--divider-depth) * -1);
padding-top: calc(var(--section-pad-top) + var(--divider-depth));
}
.block:has(+ .divider-slant),
.block:has(+ .divider-curve) {
padding-bottom: calc(var(--section-pad-bottom) + var(--divider-depth));
}
.divider-slant {
clip-path: polygon(0 calc(var(--divider-depth) - 0.0625rem), 100% 0, 100% 100%, 0 100%);
}
.divider-curve {
border-top-left-radius: 50% var(--divider-depth);
border-top-right-radius: 50% var(--divider-depth);
}
:is(
.block.surface-plain + .block.surface-plain,
.block.surface-tinted + .block.surface-tinted,
.block.surface-contrast + .block.surface-contrast,
.block.surface-gradient + .block.surface-gradient
):is(.divider-slant, .divider-curve) {
margin-top: 0;
padding-top: var(--section-pad-top);
clip-path: none;
border-start-start-radius: 0;
border-start-end-radius: 0;
}
:is(
.block.surface-plain:has(+ .block.surface-plain:is(.divider-slant, .divider-curve)),
.block.surface-tinted:has(+ .block.surface-tinted:is(.divider-slant, .divider-curve)),
.block.surface-contrast:has(+ .block.surface-contrast:is(.divider-slant, .divider-curve)),
.block.surface-gradient:has(+ .block.surface-gradient:is(.divider-slant, .divider-curve))
) {
padding-bottom: var(--section-pad-bottom);
}
main:has(+ .block-footer:is(.divider-slant, .divider-curve)) > .block:last-child {
padding-bottom: calc(var(--section-pad-bottom) + var(--divider-depth));
}
main > .block:first-child {
margin-top: 0;
padding-top: var(--section-pad-top);
border-top: 0;
clip-path: none;
border-start-start-radius: 0;
border-start-end-radius: 0;
}
/* sections-steps.css */
.pad-t-0 { --section-pad-top: 0rem; }
.pad-t-4 { --section-pad-top: 0.25rem; }
.pad-t-8 { --section-pad-top: 0.5rem; }
.pad-t-12 { --section-pad-top: 0.75rem; }
.pad-t-16 { --section-pad-top: 1rem; }
.pad-t-20 { --section-pad-top: 1.25rem; }
.pad-t-24 { --section-pad-top: 1.5rem; }
.pad-t-28 { --section-pad-top: 1.75rem; }
.pad-t-32 { --section-pad-top: 2rem; }
.pad-t-36 { --section-pad-top: 2.25rem; }
.pad-t-40 { --section-pad-top: 2.5rem; }
.pad-t-44 { --section-pad-top: 2.75rem; }
.pad-t-48 { --section-pad-top: 3rem; }
.pad-t-52 { --section-pad-top: 3.25rem; }
.pad-t-56 { --section-pad-top: 3.5rem; }
.pad-t-60 { --section-pad-top: 3.75rem; }
.pad-t-64 { --section-pad-top: 4rem; }
.pad-t-68 { --section-pad-top: 4.25rem; }
.pad-t-72 { --section-pad-top: 4.5rem; }
.pad-t-76 { --section-pad-top: 4.75rem; }
.pad-t-80 { --section-pad-top: 5rem; }
.pad-t-84 { --section-pad-top: 5.25rem; }
.pad-t-88 { --section-pad-top: 5.5rem; }
.pad-t-92 { --section-pad-top: 5.75rem; }
.pad-t-96 { --section-pad-top: 6rem; }
.pad-t-100 { --section-pad-top: 6.25rem; }
.pad-t-104 { --section-pad-top: 6.5rem; }
.pad-t-108 { --section-pad-top: 6.75rem; }
.pad-t-112 { --section-pad-top: 7rem; }
.pad-t-116 { --section-pad-top: 7.25rem; }
.pad-t-120 { --section-pad-top: 7.5rem; }
.pad-t-124 { --section-pad-top: 7.75rem; }
.pad-t-128 { --section-pad-top: 8rem; }
.pad-t-132 { --section-pad-top: 8.25rem; }
.pad-t-136 { --section-pad-top: 8.5rem; }
.pad-t-140 { --section-pad-top: 8.75rem; }
.pad-t-144 { --section-pad-top: 9rem; }
.pad-t-148 { --section-pad-top: 9.25rem; }
.pad-t-152 { --section-pad-top: 9.5rem; }
.pad-t-156 { --section-pad-top: 9.75rem; }
.pad-t-160 { --section-pad-top: 10rem; }
.pad-t-164 { --section-pad-top: 10.25rem; }
.pad-t-168 { --section-pad-top: 10.5rem; }
.pad-t-172 { --section-pad-top: 10.75rem; }
.pad-t-176 { --section-pad-top: 11rem; }
.pad-t-180 { --section-pad-top: 11.25rem; }
.pad-t-184 { --section-pad-top: 11.5rem; }
.pad-t-188 { --section-pad-top: 11.75rem; }
.pad-t-192 { --section-pad-top: 12rem; }
.pad-t-196 { --section-pad-top: 12.25rem; }
.pad-t-200 { --section-pad-top: 12.5rem; }
.pad-b-0 { --section-pad-bottom: 0rem; }
.pad-b-4 { --section-pad-bottom: 0.25rem; }
.pad-b-8 { --section-pad-bottom: 0.5rem; }
.pad-b-12 { --section-pad-bottom: 0.75rem; }
.pad-b-16 { --section-pad-bottom: 1rem; }
.pad-b-20 { --section-pad-bottom: 1.25rem; }
.pad-b-24 { --section-pad-bottom: 1.5rem; }
.pad-b-28 { --section-pad-bottom: 1.75rem; }
.pad-b-32 { --section-pad-bottom: 2rem; }
.pad-b-36 { --section-pad-bottom: 2.25rem; }
.pad-b-40 { --section-pad-bottom: 2.5rem; }
.pad-b-44 { --section-pad-bottom: 2.75rem; }
.pad-b-48 { --section-pad-bottom: 3rem; }
.pad-b-52 { --section-pad-bottom: 3.25rem; }
.pad-b-56 { --section-pad-bottom: 3.5rem; }
.pad-b-60 { --section-pad-bottom: 3.75rem; }
.pad-b-64 { --section-pad-bottom: 4rem; }
.pad-b-68 { --section-pad-bottom: 4.25rem; }
.pad-b-72 { --section-pad-bottom: 4.5rem; }
.pad-b-76 { --section-pad-bottom: 4.75rem; }
.pad-b-80 { --section-pad-bottom: 5rem; }
.pad-b-84 { --section-pad-bottom: 5.25rem; }
.pad-b-88 { --section-pad-bottom: 5.5rem; }
.pad-b-92 { --section-pad-bottom: 5.75rem; }
.pad-b-96 { --section-pad-bottom: 6rem; }
.pad-b-100 { --section-pad-bottom: 6.25rem; }
.pad-b-104 { --section-pad-bottom: 6.5rem; }
.pad-b-108 { --section-pad-bottom: 6.75rem; }
.pad-b-112 { --section-pad-bottom: 7rem; }
.pad-b-116 { --section-pad-bottom: 7.25rem; }
.pad-b-120 { --section-pad-bottom: 7.5rem; }
.pad-b-124 { --section-pad-bottom: 7.75rem; }
.pad-b-128 { --section-pad-bottom: 8rem; }
.pad-b-132 { --section-pad-bottom: 8.25rem; }
.pad-b-136 { --section-pad-bottom: 8.5rem; }
.pad-b-140 { --section-pad-bottom: 8.75rem; }
.pad-b-144 { --section-pad-bottom: 9rem; }
.pad-b-148 { --section-pad-bottom: 9.25rem; }
.pad-b-152 { --section-pad-bottom: 9.5rem; }
.pad-b-156 { --section-pad-bottom: 9.75rem; }
.pad-b-160 { --section-pad-bottom: 10rem; }
.pad-b-164 { --section-pad-bottom: 10.25rem; }
.pad-b-168 { --section-pad-bottom: 10.5rem; }
.pad-b-172 { --section-pad-bottom: 10.75rem; }
.pad-b-176 { --section-pad-bottom: 11rem; }
.pad-b-180 { --section-pad-bottom: 11.25rem; }
.pad-b-184 { --section-pad-bottom: 11.5rem; }
.pad-b-188 { --section-pad-bottom: 11.75rem; }
.pad-b-192 { --section-pad-bottom: 12rem; }
.pad-b-196 { --section-pad-bottom: 12.25rem; }
.pad-b-200 { --section-pad-bottom: 12.5rem; }
.min-h-5 { min-block-size: 5vh; min-block-size: 5svh; }
.min-h-10 { min-block-size: 10vh; min-block-size: 10svh; }
.min-h-15 { min-block-size: 15vh; min-block-size: 15svh; }
.min-h-20 { min-block-size: 20vh; min-block-size: 20svh; }
.min-h-25 { min-block-size: 25vh; min-block-size: 25svh; }
.min-h-30 { min-block-size: 30vh; min-block-size: 30svh; }
.min-h-35 { min-block-size: 35vh; min-block-size: 35svh; }
.min-h-40 { min-block-size: 40vh; min-block-size: 40svh; }
.min-h-45 { min-block-size: 45vh; min-block-size: 45svh; }
.min-h-50 { min-block-size: 50vh; min-block-size: 50svh; }
.min-h-55 { min-block-size: 55vh; min-block-size: 55svh; }
.min-h-60 { min-block-size: 60vh; min-block-size: 60svh; }
.min-h-65 { min-block-size: 65vh; min-block-size: 65svh; }
.min-h-70 { min-block-size: 70vh; min-block-size: 70svh; }
.min-h-75 { min-block-size: 75vh; min-block-size: 75svh; }
.min-h-80 { min-block-size: 80vh; min-block-size: 80svh; }
.min-h-85 { min-block-size: 85vh; min-block-size: 85svh; }
.min-h-90 { min-block-size: 90vh; min-block-size: 90svh; }
.min-h-95 { min-block-size: 95vh; min-block-size: 95svh; }
.min-h-100 { min-block-size: 100vh; min-block-size: 100svh; }
.v-top,
.v-center,
.v-bottom {
display: flex;
flex-direction: column;
}
.v-top > .container,
.v-center > .container,
.v-bottom > .container {
box-sizing: border-box;
inline-size: 100%;
max-inline-size: calc(var(--section-width) + 2 * var(--space-l));
}
.v-center {
justify-content: center;
}
.v-bottom {
justify-content: flex-end;
}
@media (max-width: 39.99rem) {
.hide-mobile {
display: none;
}
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
.hide-tablet {
display: none;
}
}
@media (min-width: 64rem) {
.hide-desktop {
display: none;
}
}
.bx-canvas :is(.hide-mobile, .hide-tablet, .hide-desktop) {
display: block;
}
.bx-canvas :is(.hide-mobile, .hide-tablet, .hide-desktop):is(.v-top, .v-center, .v-bottom) {
display: flex;
}
@media (prefers-reduced-motion: no-preference) {
.anim-ready [data-anim] {
transition: opacity 0.6s ease, transform 0.6s ease;
}
.anim-ready [data-anim]:not(.anim-in) {
opacity: 0;
}
.anim-ready [data-anim="up"]:not(.anim-in) {
transform: translateY(1.5rem);
}
.anim-ready [data-anim="zoom"]:not(.anim-in) {
transform: scale(0.96);
}
}
/* sections-columns.css */
.block:has(> .container > .cols-halves) {
--columns-need: calc(32rem + var(--space-l));
}
.block:has(> .container > .cols-thirds) {
--columns-need: calc(48rem + 2 * var(--space-l));
}
.block:has(> .container > .cols-quarters) {
--columns-need: calc(64rem + 3 * var(--space-l));
}
.block:has(> .container > :is(.cols-wide-left, .cols-wide-right)) {
--columns-need: calc(48rem + var(--space-l));
}
.block:has(> .container > .cols-sidebar) {
--columns-need: calc(64rem + var(--space-l));
}
.width-wide:has(> .container > .section-cols) {
--section-width: max(var(--container-wide), var(--columns-need, 0rem));
}
@media (min-width: 64.0625rem) {
.section-cols:not(.cols-one) {
display: flex;
flex-wrap: wrap;
}
.section-cols:not(.cols-one) > .section-column {
flex: var(--column-weight, 1) 1 calc((var(--columns-need, 0rem) - 100%) * 999);
min-inline-size: 0;
}
}
.cols-wide-left > .section-column:first-child,
.cols-wide-right > .section-column:last-child {
--column-weight: 2;
}
.cols-sidebar > .section-column:first-child {
--column-weight: 3;
}
:is(.layout-split, .layout-beside):has(> .hero, > .form-block),
:is(.layout-split, .layout-beside) :has(> .hero, > .form-block) {
container: words-beside / inline-size;
}
@container words-beside (max-width: 35rem) {
.layout-split .hero {
grid-template-columns: minmax(0, 1fr);
}
}
@container words-beside (max-width: 47rem) {
.layout-beside .form-block {
grid-template-columns: minmax(0, 1fr);
}
}