/* Label 7 theme CSS. GENERATED by scripts/build-theme-css.js from assets/css/ (tokens.css, base.css, layout.css, sc-blocks.css, sc-hero.css, sc-page-header.css, sc-highlight.css, sc-band.css, sc-cards.css, sc-articles.css, sc-post.css, sc-steps.css, sc-bouwsteen.css, sc-team.css, sc-contact.css). Do not edit: edit the sources and rebuild. */
/* tokens.css */
:root {
--sc-color-ink:   var(--wp--preset--color--zwart, #000000);
--sc-color-paper: var(--wp--preset--color--grijs, #ebe9e1);
--sc-color-white: var(--wp--preset--color--wit, #ffffff);
--sc-color-licht-roze: var(--wp--preset--color--licht-roze, #ffb7bd);
--sc-color-groen:      var(--wp--preset--color--groen, #61cc71);
--sc-color-paars:      var(--wp--preset--color--paars, #9f96ec);
--sc-color-blauw:      var(--wp--preset--color--blauw, #1ca3eb);
--sc-color-oranje:     var(--wp--preset--color--oranje, #fe7c16);
--sc-color-geel:       var(--wp--preset--color--geel, #ffe633);
--sc-color-roze:       var(--wp--preset--color--roze, #ff7b97);
--sc-color-muted:         rgb(0 0 0 / 0.5);
--sc-color-muted-on-dark: rgb(255 255 255 / 0.5);
--sc-header-bg-scrolled: color-mix(in srgb, var(--sc-color-paper) 80%, transparent);
--sc-glass:      rgb(255 255 255 / 0.5);
--sc-glass-blur: blur(6px);
--sc-font-sans:  var(--wp--preset--font-family--instrument-sans, "Instrument Sans", sans-serif);
--sc-font-serif: var(--wp--preset--font-family--crimson-text, "Crimson Text", serif);
--sc-text-xs:  var(--wp--preset--font-size--xs, 0.875rem);
--sc-text-sm:  var(--wp--preset--font-size--sm, 1rem);
--sc-text-md:  var(--wp--preset--font-size--md, 1.125rem);
--sc-text-lg:  var(--wp--preset--font-size--lg, 1.25rem);
--sc-text-xl:  var(--wp--preset--font-size--xl, 1.5rem);
--sc-text-2xl: var(--wp--preset--font-size--2-xl, 2rem);
--sc-text-3xl: var(--wp--preset--font-size--3-xl, 2.625rem);
--sc-text-4xl: var(--wp--preset--font-size--4-xl, 3.5625rem);
--sc-text-body: var(--sc-text-lg);
--sc-leading-display: 0.94;
--sc-leading-body:    1.3;
--sc-tracking-tight:  -0.02em;
--sc-stretch-display: 92%;
--sc-stretch-text:    96%;
--sc-gutter:        clamp(16px, 2.25vw, 32px);
--sc-space-xs:      8px;
--sc-space-s:       16px;
--sc-space-m:       32px;
--sc-space-l:       clamp(48px, 5.5vw, 80px);
--sc-space-header:  42px;
--sc-space-section: clamp(64px, 7vw, 100px);
--sc-space-xl:      clamp(72px, 8.9vw, 128px);
--sc-radius:        4px;
--sc-radius-button: 2px;
--sc-control-height: 40px;
--sc-header-height:  76px;
--sc-width-wide: 1376px;
--sc-width-text: 1205px;
}
/* base.css */
*, *::before, *::after { box-sizing: border-box; }
:where(html) { scroll-padding-block-start: var(--sc-header-height); }
:where(body) {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
:where(img, video) {
max-width: 100%;
height: auto;
}
:where(h1, h2, h3, h4, .sc-page-statement) { overflow-wrap: anywhere; }
:focus-visible {
outline: 2px solid var(--sc-color-ink);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; }
}
/* layout.css */
.wp-site-blocks {
position: relative;
& > * { margin-block-start: 0; }
}
.sc-logo {
margin: 0;
& a {
display: inline-flex;
align-items: baseline;
gap: 4px;
color: var(--sc-color-ink);
font-family: var(--sc-font-serif);
font-size: 27.5px;
line-height: 1;
letter-spacing: -0.03em;
text-decoration: none;
}
& strong {
font-family: var(--sc-font-sans);
font-size: 24.5px;
font-weight: 700;
font-stretch: var(--sc-stretch-display);
letter-spacing: var(--sc-tracking-tight);
}
}
.wp-block-template-part.is-overlay {
position: fixed;
inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
z-index: 20;
transition: background-color 200ms ease;
&.is-scrolled { background-color: var(--sc-header-bg-scrolled); }
@media (max-width: 600px) { inset-block-start: 0; }
}
.sc-site-header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--sc-space-s);
padding: 16px var(--sc-gutter);
font-family: var(--sc-font-sans);
font-size: var(--sc-text-sm);
line-height: 1;
& > * { margin-block: 0; }
& .sc-logo {
justify-self: start;
& a {
align-items: center;
height: var(--sc-control-height);
padding-inline: 14px;
background: var(--sc-color-white);
border-radius: var(--sc-radius-button);
}
}
& .sc-site-nav { justify-self: center; }
& .sc-contact-link {
justify-self: end;
margin: 0;
& a {
display: inline-flex;
align-items: center;
height: var(--sc-control-height);
padding-inline: 22px;
color: var(--sc-color-ink);
text-decoration: none;
background: var(--sc-glass);
backdrop-filter: var(--sc-glass-blur);
border-radius: var(--sc-radius-button);
}
&.is-current a { background: var(--sc-color-white); }
}
@media (max-width: 48.875em) {
grid-template-columns: auto 1fr auto;
& .sc-site-nav { justify-self: end; }
}
}
.sc-site-nav {
& .wp-block-navigation-item { background: transparent; }
& .wp-block-navigation-item__content {
display: block;
padding: 8px 16px;
color: var(--sc-color-ink);
text-decoration: none;
border-radius: var(--sc-radius-button);
}
& .current-menu-item > .wp-block-navigation-item__content,
& .wp-block-navigation-item__content:hover {
background: var(--sc-color-white);
}
@media (min-width: 600px) {
& .wp-block-navigation__container {
gap: 4px;
padding: 6px;
background: var(--sc-glass);
backdrop-filter: var(--sc-glass-blur);
border-radius: var(--sc-radius-button);
}
}
}
.sc-page-content {
padding-block-start: var(--sc-space-l);
& > :where(:not(.sc-band)) {
max-width: calc(var(--sc-width-text) + 2 * var(--sc-gutter));
padding-inline: var(--sc-gutter);
}
}
.sc-site-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sc-space-s);
min-height: 59px;
margin-block-start: var(--sc-space-section);
padding: 16px var(--sc-gutter);
border-top: 1px solid var(--sc-color-ink);
& > * { margin: 0; }
& .sc-logo a { font-size: 29px; }
& .sc-logo strong { font-size: 26px; }
}
body:has(.sc-page-content > .sc-band:is(.like-closing, .has-background):last-child) .sc-site-footer {
margin-block-start: 0;
background: var(--sc-footer-bg);
}
body:has(.sc-page-content > .like-closing:last-child)                    { --sc-footer-bg: var(--sc-color-oranje); }
body:has(.sc-page-content > .has-licht-roze-background-color:last-child) { --sc-footer-bg: var(--sc-color-licht-roze); }
body:has(.sc-page-content > .has-groen-background-color:last-child)      { --sc-footer-bg: var(--sc-color-groen); }
body:has(.sc-page-content > .has-paars-background-color:last-child)      { --sc-footer-bg: var(--sc-color-paars); }
body:has(.sc-page-content > .has-blauw-background-color:last-child)      { --sc-footer-bg: var(--sc-color-blauw); }
body:has(.sc-page-content > .has-oranje-background-color:last-child)     { --sc-footer-bg: var(--sc-color-oranje); }
body:has(.sc-page-content > .has-geel-background-color:last-child)       { --sc-footer-bg: var(--sc-color-geel); }
body:has(.sc-page-content > .has-roze-background-color:last-child)       { --sc-footer-bg: var(--sc-color-roze); }
body:has(.sc-page-content > .has-grijs-background-color:last-child)      { --sc-footer-bg: var(--sc-color-paper); }
.sc-footer-links {
display: flex;
flex-wrap: wrap;
gap: 8px 32px;
font-family: var(--sc-font-sans);
font-size: var(--sc-text-sm);
font-weight: 500;
font-stretch: var(--sc-stretch-text);
& a {
color: inherit;
text-decoration: none;
&:hover { text-decoration: underline; }
}
}
/* sc-blocks.css */
.is-style-sc-lead {
max-width: var(--sc-width-text);
font-family: var(--sc-font-sans);
font-size: var(--sc-text-3xl);
font-weight: 500;
font-stretch: var(--sc-stretch-text);
line-height: 1.2;
}
.is-style-sc-lead + .wp-block-buttons { margin-block-start: var(--sc-space-l); }
.is-style-sc-eyebrow {
font-family: var(--sc-font-serif);
font-size: var(--sc-text-body);
line-height: var(--sc-leading-body);
color: var(--sc-color-muted);
}
.wp-block-buttons {
align-items: center;
gap: 16px 35px;
}
.wp-block-button {
& .wp-block-button__link {
display: inline-flex;
align-items: center;
min-height: var(--sc-control-height);
transition: opacity 120ms ease;
&:hover { opacity: 0.85; }
}
&.is-style-sc-link .wp-block-button__link {
min-height: 0;
padding: 0;
color: var(--sc-color-ink);
background: transparent;
text-decoration: underline;
text-underline-offset: 0.15em;
}
}
/* sc-hero.css */
.sc-hero {
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
height: clamp(560px, 100svh, 960px);
overflow: hidden;
isolation: isolate;
color: var(--sc-color-white);
background: var(--sc-color-ink);
& > * {
grid-area: 1 / 1;
margin: 0;
}
&::after {
content: "";
grid-area: 1 / 1;
z-index: -1;
background: rgb(0 0 0 / 0.15);
mix-blend-mode: multiply;
}
& .sc-hero-image {
z-index: -2;
height: 100%;
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.sc-hero-title {
align-self: center;
justify-self: center;
max-width: 14em;
padding-inline: var(--sc-gutter);
font-size: var(--sc-text-4xl);
font-stretch: var(--sc-stretch-display);
text-align: center;
text-wrap: balance;
&:empty { display: none; }
}
.sc-hero-gap {
display: inline-block;
width: min(4em, 16vw);
}
.sc-hero .sc-hero-subtitle {
position: relative;
align-self: end;
justify-self: center;
margin-block-end: 40px;
padding-inline: var(--sc-gutter);
font-family: var(--sc-font-serif);
font-size: var(--sc-text-lg);
line-height: var(--sc-leading-body);
text-align: center;
&::before {
content: "";
position: absolute;
inset: -24px -48px;
z-index: -1;
background: rgb(0 0 0 / 0.6);
filter: blur(30px);
}
&:empty { display: none; }
}
/* sc-page-header.css */
.sc-page-header {
display: flex;
flex-direction: column;
gap: 12px;
max-width: calc(73.5625rem + 2 * var(--sc-gutter));
padding: calc(var(--sc-space-section) + 56px) var(--sc-gutter) 0;
& > * { margin: 0; }
& .sc-page-title,
& .sc-page-statement {
font-family: var(--sc-font-sans);
font-size: var(--sc-text-4xl);
font-weight: 700;
font-stretch: var(--sc-stretch-display);
line-height: var(--sc-leading-display);
letter-spacing: var(--sc-tracking-tight);
}
&:has(.sc-page-statement:not(:empty)) .sc-page-title { color: var(--sc-color-muted); }
& .sc-page-statement:empty { display: none; }
}
.sc-page-header + .sc-page-content { padding-block-start: var(--sc-space-header); }
.sc-page-header + .sc-page-content:has(> .sc-band:not(.like-overview):first-child) { padding-block-start: var(--sc-space-section); }
.sc-page-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sc-space-header);
& > * { margin: 0; }
& > p:not([class*="sc-"]) { max-width: 23.875rem; }
}
.sc-step-nav {
display: flex;
flex-wrap: wrap;
gap: 12px;
& a {
color: var(--sc-color-ink);
text-decoration: none;
background: var(--sc-color-white);
&:hover { text-decoration: underline; }
}
}
.sc-step-nav a,
.sc-step .sc-step-label {
display: inline-flex;
align-items: center;
padding: 6px 16px;
font-family: var(--sc-font-sans);
font-size: var(--sc-text-sm);
line-height: 1;
letter-spacing: var(--sc-tracking-tight);
border-radius: var(--sc-radius);
}
/* sc-highlight.css */
.sc-highlight {
--sc-hl: var(--sc-color-paars);
&.like-licht-roze { --sc-hl: var(--sc-color-licht-roze); }
&.like-groen      { --sc-hl: var(--sc-color-groen); }
&.like-blauw      { --sc-hl: var(--sc-color-blauw); }
&.like-oranje     { --sc-hl: var(--sc-color-oranje); }
&.like-geel       { --sc-hl: var(--sc-color-geel); }
&.like-roze       { --sc-hl: var(--sc-color-roze); }
&.like-grijs      { --sc-hl: var(--sc-color-paper); }
}
mark.sc-highlight,
.sc-highlight-word {
padding-inline: 0.12em;
color: inherit;
background: color-mix(in srgb, var(--sc-hl) 60%, transparent);
border-radius: var(--sc-radius);
}
.is-style-sc-lead .sc-highlight-word { background: var(--sc-hl); }
.sc-highlight.has-note {
position: relative;
& .sc-highlight-word { cursor: help; }
& .sc-highlight-note {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 10;
display: none;
width: min(var(--sc-note-width, 15.625rem), 70vw);
padding: 12px;
color: var(--sc-color-ink);
background: var(--sc-hl);
border-radius: var(--sc-radius);
font-family: var(--sc-font-sans);
font-size: var(--sc-text-md);
font-weight: 500;
font-stretch: var(--sc-stretch-text);
line-height: var(--sc-leading-body);
letter-spacing: 0;
text-align: left;
}
&:hover .sc-highlight-note,
&:focus-within .sc-highlight-note { display: block; }
}
@media (min-width: 37.5625em) {
.sc-highlight.has-note-above .sc-highlight-note {
top: auto;
bottom: calc(100% + 4px);
}
}
@media (max-width: 37.5em) {
.sc-highlight.has-note .sc-highlight-note {
position: fixed;
inset: auto var(--sc-gutter) var(--sc-gutter);
width: auto;
padding: 12px;
box-shadow: 0 4px 24px rgb(0 0 0 / 0.2);
}
}
/* sc-band.css */
.sc-band {
margin-block-start: var(--sc-space-section);
& .sc-band-image {
margin: 0;
& img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--sc-radius);
}
&.has-focus-top img { object-position: 50% 0; }
}
& .sc-band-body > *,
& .sc-band-head > *,
& .sc-cards > * { margin-block: 0; }
}
.sc-band.like-media-text > * { margin-block: 0; }
.sc-band-title {
margin: 0;
font-size: var(--sc-text-4xl);
font-stretch: var(--sc-stretch-display);
text-wrap: balance;
& em {
font-family: var(--sc-font-serif);
font-style: normal;
font-weight: 400;
font-stretch: normal;
}
}
.sc-band-link {
font-family: var(--sc-font-sans);
font-size: var(--sc-text-md);
letter-spacing: var(--sc-tracking-tight);
& a {
color: var(--sc-color-muted);
text-underline-offset: 0.15em;
}
}
.sc-band.like-photo-quote {
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
min-height: 480px;
margin-inline: var(--sc-gutter);
aspect-ratio: 1376 / 827;
overflow: hidden;
border-radius: var(--sc-radius);
& > * {
grid-area: 1 / 1;
margin-block: 0;
}
& .sc-band-image { height: 100%; }
&::after {
content: "";
position: relative;
grid-area: 1 / 1;
background: linear-gradient(223deg, rgb(0 0 0 / 0) 44.8%, rgb(0 0 0 / 0.5) 81.3%);
border-radius: var(--sc-radius);
pointer-events: none;
}
& .sc-band-body {
z-index: 1;
display: flex;
flex-direction: column;
align-self: end;
align-items: flex-start;
gap: var(--sc-space-m);
padding: var(--sc-space-m);
text-align: left;
}
& .sc-band-link {
font-weight: 500;
font-stretch: var(--sc-stretch-text);
line-height: var(--sc-leading-body);
& a { color: var(--sc-color-muted-on-dark); }
}
}
.sc-quote {
max-width: 37rem;
font-family: var(--sc-font-serif);
font-size: var(--sc-text-2xl);
line-height: 1;
letter-spacing: var(--sc-tracking-tight);
color: var(--sc-color-white);
}
.sc-band.like-media-text {
display: grid;
align-items: center;
gap: 17px;
padding-inline: var(--sc-gutter);
&.has-media-start {
grid-template-columns: minmax(0, 777fr) minmax(0, 581fr);
& .sc-band-image img { aspect-ratio: 777 / 972; }
}
&.has-media-end {
grid-template-columns: minmax(0, 580fr) minmax(0, 779fr);
padding-block: 40px;
& .sc-band-image img { aspect-ratio: 779 / 744; }
}
}
.sc-band-body {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sc-space-m);
padding: var(--sc-space-m);
text-align: center;
& > p:not([class*="is-style-"], [class*="sc-"]) { max-width: 32.3125rem; }
}
.sc-band.like-closing {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sc-space-m);
margin-block-start: 40px;
padding: calc(var(--sc-space-section) * 1.2) var(--sc-gutter) var(--sc-space-section);
text-align: center;
background: var(--sc-color-oranje);
& > * { margin-block: 0; }
& .sc-band-title { max-width: 45.625rem; }
& .sc-band-text {
display: flex;
flex-direction: column;
gap: var(--sc-space-s);
max-width: 36rem;
& > * { margin: 0; }
}
& .sc-band-image {
width: min(100%, 27.9375rem);
margin-block-start: 24px;
& img { aspect-ratio: 1; }
}
}
.sc-band.like-closing.like-narrow {
margin-block-start: var(--sc-space-l);
padding-block: calc(var(--sc-space-m) * 2) calc(var(--sc-space-section) * 1.2);
& .sc-band-text { max-width: 28rem; }
& .sc-band-image { margin-block-start: 8px; }
}
@media (max-width: 48.875em) {
.sc-band.like-media-text.has-media-start,
.sc-band.like-media-text.has-media-end {
grid-template-columns: minmax(0, 1fr);
}
.sc-band.like-media-text .sc-band-body { padding-inline: 0; }
.sc-band.like-photo-quote {
aspect-ratio: auto;
min-height: 520px;
}
}
/* sc-cards.css */
.sc-band.like-bouwstenen {
padding-inline: var(--sc-gutter);
& .sc-band-head {
display: grid;
grid-template-columns: minmax(0, 776fr) minmax(0, 600fr);
gap: var(--sc-space-s) 9px;
align-items: start;
}
& .sc-band-text {
max-width: 23.875rem;
padding-block-start: 7px;
}
& .sc-cards { margin-block-start: var(--sc-space-section); }
}
.sc-cards {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 16px;
}
.sc-card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
min-height: 245px;
padding: 20px;
color: var(--sc-color-ink);
text-align: center;
border-radius: var(--sc-radius);
container-type: inline-size;
& > * { margin-block: 0; }
& .sc-card-title {
max-width: calc(100% + 28px);
margin-inline: -14px;
font-size: clamp(var(--sc-text-md), 16.8cqi, var(--sc-text-xl));
overflow-wrap: break-word;
font-weight: 500;
font-stretch: 100%;
line-height: 1;
}
& .sc-card-question {
font-size: var(--sc-text-body);
line-height: var(--sc-leading-body);
}
}
.sc-band.like-cards {
margin-block-start: var(--sc-space-l);
padding-inline: var(--sc-gutter);
}
.sc-card:has(.sc-card-title a) {
position: relative;
& .sc-card-title a {
color: inherit;
text-decoration: none;
&::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--sc-radius);
}
&:focus-visible { outline: none; }
}
&:hover .sc-card-title a { text-decoration: underline; text-underline-offset: 0.15em; }
&:has(.sc-card-title a:focus-visible) {
outline: 2px solid var(--sc-color-ink);
outline-offset: 2px;
}
}
@media (max-width: 68.75em) {
.sc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-card { min-height: 180px; }
}
@media (max-width: 48.875em) {
.sc-band.like-bouwstenen .sc-band-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 37.5em) {
.sc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-card { min-height: 140px; }
}
@media (max-width: 20em) {
.sc-cards { grid-template-columns: minmax(0, 1fr); }
}
/* sc-articles.css */
.sc-band.like-articles {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sc-space-m);
max-width: calc(54.875rem + 2 * var(--sc-gutter));
margin-inline: auto;
padding-inline: var(--sc-gutter);
text-align: center;
& > * { margin-block: 0; }
& .sc-band-title { max-width: 44.8125rem; }
&:has(.sc-articles):not(:has(.sc-article-card, .sc-empty)) { display: none; }
}
.sc-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 32px;
margin: 0;
padding: 0;
list-style: none;
font-family: var(--sc-font-sans);
font-size: var(--sc-text-md);
font-weight: 500;
font-stretch: var(--sc-stretch-text);
line-height: var(--sc-leading-body);
& li {
--sc-chip: var(--sc-color-groen);
--sc-chip-size: 26px;
display: flex;
align-items: center;
gap: 12px;
&::before {
content: "";
flex: none;
width: var(--sc-chip-size);
height: var(--sc-chip-size);
border-radius: 50%;
background: var(--sc-chip);
}
&.like-roze       { --sc-chip: var(--sc-color-roze); }
&.like-paars      { --sc-chip: var(--sc-color-paars); }
&.like-blauw      { --sc-chip: var(--sc-color-blauw); }
&.like-oranje     { --sc-chip: var(--sc-color-oranje); }
&.like-geel       { --sc-chip: var(--sc-color-geel); }
&.like-licht-roze { --sc-chip: var(--sc-color-licht-roze); }
}
& a {
color: inherit;
text-decoration: none;
&:hover { text-decoration: underline; text-underline-offset: 0.15em; }
}
& .cat-item-none { display: none; }
&.like-pills {
justify-content: flex-start;
gap: 12px;
font-size: var(--sc-text-sm);
font-weight: 400;
font-stretch: normal;
line-height: 1;
letter-spacing: var(--sc-tracking-tight);
& li {
--sc-chip-size: 16px;
position: relative;
gap: 8px;
padding: 8px 12px;
background: var(--sc-color-white);
border-radius: var(--sc-radius);
outline: 1px solid transparent;
}
& a::after {
content: "";
position: absolute;
inset: 0;
}
& li.is-current { outline-color: var(--sc-color-ink); }
}
&.like-stack {
flex-direction: column;
align-items: flex-start;
gap: 16px;
font-size: var(--sc-text-lg);
font-stretch: normal;
line-height: 1;
letter-spacing: var(--sc-tracking-tight);
& li { --sc-chip-size: 20px; }
}
}
.sc-articles { width: 100%; }
.sc-article-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
& > li { margin: 0; }
@media (max-width: 48.875em) {
grid-template-columns: minmax(0, 1fr);
}
}
.sc-article-card {
height: 100%;
padding: 10px;
text-align: left;
background: var(--sc-color-white);
border-radius: var(--sc-radius);
& > * { margin-block: 0; }
& .wp-block-post-featured-image {
aspect-ratio: 262 / 279.5;
overflow: hidden;
border-radius: var(--sc-radius);
& a { display: block; height: 100%; }
& img,
& .sc-illustration {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--sc-radius);
}
}
& .wp-block-post-title {
padding-block: 12px;
font-family: var(--sc-font-serif);
font-size: var(--sc-text-body);
font-weight: 400;
line-height: var(--sc-leading-body);
letter-spacing: 0;
& a {
color: inherit;
text-decoration: none;
&:hover { text-decoration: underline; text-underline-offset: 0.15em; }
}
}
}
.sc-empty { color: var(--sc-color-muted); }
.sc-band.like-overview {
display: flex;
flex-direction: column;
gap: 62px;
margin-block-start: 0;
padding-inline: var(--sc-gutter);
& > * { margin-block: 0; }
}
.sc-article-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sc-space-s);
& > * { margin: 0; }
}
.sc-sort {
position: relative;
margin-inline-start: auto;
font-family: var(--sc-font-sans);
font-size: var(--sc-text-sm);
line-height: 1;
letter-spacing: var(--sc-tracking-tight);
& summary {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--sc-color-white);
border-radius: var(--sc-radius);
cursor: pointer;
list-style: none;
&::-webkit-details-marker { display: none; }
}
& .sc-sort-caret { flex: none; transition: transform 120ms ease; }
&[open] .sc-sort-caret { transform: rotate(180deg); }
& ul {
position: absolute;
inset-block-start: calc(100% + 4px);
inset-inline-end: 0;
z-index: 5;
min-width: 100%;
margin: 0;
padding: 6px;
list-style: none;
white-space: nowrap;
background: var(--sc-color-white);
border-radius: var(--sc-radius);
box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
}
& a {
display: block;
padding: 8px 12px;
color: var(--sc-color-ink);
text-decoration: none;
border-radius: var(--sc-radius-button);
&:hover { background: var(--sc-color-paper); }
&[aria-current] { font-weight: 600; }
}
}
.sc-articles.like-large {
& .sc-article-grid {
@media (max-width: 68.75em) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 37.5em) { grid-template-columns: minmax(0, 1fr); }
}
& .sc-article-card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
& .wp-block-post-featured-image { aspect-ratio: 1; }
& .wp-block-post-title {
font-size: var(--sc-text-xl);
line-height: 1;
letter-spacing: var(--sc-tracking-tight);
}
}
& .wp-block-query-pagination {
gap: 16px 35px;
margin-block-start: 62px;
& a {
display: inline-flex;
align-items: center;
min-height: var(--sc-control-height);
padding: 11px 20px;
font-family: var(--sc-font-sans);
font-size: var(--sc-text-md);
line-height: 1;
letter-spacing: var(--sc-tracking-tight);
text-decoration: none;
border-radius: var(--sc-radius-button);
}
& .wp-block-query-pagination-next {
color: var(--sc-color-white);
background: var(--sc-color-ink);
&:hover { opacity: 0.85; }
}
& .wp-block-query-pagination-previous {
color: var(--sc-color-ink);
text-decoration: underline;
text-underline-offset: 0.15em;
}
}
}
/* sc-post.css */
.sc-post-hero {
display: grid;
grid-template-columns: minmax(0, 811fr) minmax(0, 629fr);
& > * { margin: 0; }
@media (max-width: 48.875em) {
grid-template-columns: minmax(0, 1fr);
}
}
.sc-post-hero-image {
aspect-ratio: 811 / 865;
margin: 0;
& img,
& .sc-illustration {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.sc-post-hero-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 48px;
padding: 48px clamp(16px, 4.5vw, 64px);
text-align: center;
& > * { max-width: 31.125rem; margin: 0; }
& .sc-post-title {
font-size: var(--sc-text-4xl);
font-stretch: var(--sc-stretch-display);
text-wrap: balance;
}
& .sc-post-excerpt p {
margin: 0;
font-size: var(--sc-text-body);
line-height: var(--sc-leading-body);
}
@media (max-width: 48.875em) {
gap: var(--sc-space-m);
padding-block: var(--sc-space-m) 0;
}
}
.sc-post {
max-width: calc(36.25rem + 2 * var(--sc-gutter));
margin: var(--sc-space-section) auto 0;
padding-inline: var(--sc-gutter);
& > * { margin-block: 0; }
}
.sc-post-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 0.3em;
font-family: var(--sc-font-serif);
font-size: var(--sc-text-body);
line-height: var(--sc-leading-body);
text-align: center;
& > * {
margin: 0;
font: inherit;
letter-spacing: normal;
}
& > * + *::before { content: "• "; }
}
.sc-post-content {
margin-block-start: 48px;
font-family: var(--sc-font-serif);
font-size: var(--sc-text-body);
line-height: var(--sc-leading-body);
& > * { margin-block: 0; }
& > * + * { margin-block-start: 16px; }
& > * + :is(figure, h2, h3, .wp-block-image),
& > :is(figure, .wp-block-image) + * { margin-block-start: 48px; }
& > :is(h2, h3) + * { margin-block-start: 16px; }
& h2 {
font-size: var(--sc-text-2xl);
line-height: 1.2;
letter-spacing: 0;
}
& h3 {
font-size: var(--sc-text-xl);
line-height: 1.2;
letter-spacing: 0;
}
& :is(ul, ol) { padding-inline-start: 1.25em; }
& figure { margin-inline: 0; }
& img {
display: block;
max-width: 100%;
height: auto;
}
& .wp-block-image {
& img { width: 100%; }
&.aligncenter,
&.is-resized {
text-align: center;
& img { width: auto; margin-inline: auto; }
}
& figcaption {
margin-block-start: 8px;
font-family: var(--sc-font-sans);
font-size: var(--sc-text-xs);
color: var(--sc-color-muted);
}
}
& > .alignwide {
--sc-wide: min(45.625rem, 100vw - 2 * var(--sc-gutter));
width: var(--sc-wide);
max-width: none;
margin-inline: calc(50% - var(--sc-wide) / 2);
}
& a { text-underline-offset: 0.15em; }
}
/* sc-steps.css */
.sc-band.like-steps {
--sc-note-width: 20rem;
display: grid;
gap: var(--sc-space-m);
margin-block-start: 0;
padding-inline: var(--sc-gutter);
& > * { margin-block: 0; }
}
.sc-step {
display: grid;
grid-template-columns: minmax(0, 579fr) minmax(0, 581fr);
column-gap: 15.7%;
align-items: center;
scroll-margin-block-start: var(--sc-space-m);
& > * { margin-block: 0; }
& .sc-band-image img { aspect-ratio: 581 / 548; }
& .sc-step-body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sc-space-m);
& > * { margin: 0; }
}
& .sc-step-title {
font-size: var(--sc-text-3xl);
font-stretch: var(--sc-stretch-display);
}
& .sc-step-text {
display: flex;
flex-direction: column;
gap: var(--sc-space-s);
& > * { margin: 0; }
}
}
@media (max-width: 48.875em) {
.sc-band.like-steps {
gap: var(--sc-space-section);
margin-block-start: var(--sc-space-l);
}
.sc-step {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--sc-space-m);
}
}
/* sc-bouwsteen.css */
.sc-band.like-bouwsteen {
display: grid;
grid-template-columns: minmax(0, 167fr) minmax(0, 32fr) minmax(0, 382fr) minmax(0, 214fr) minmax(0, 581fr);
grid-template-rows: auto auto auto 1fr;
row-gap: 40px;
align-items: start;
margin-block-start: var(--sc-space-l);
padding: var(--sc-space-xl) var(--sc-gutter) var(--sc-space-l);
& + .like-bouwsteen { margin-block-start: 0; }
& > * { margin: 0; }
& .sc-band-title {
grid-area: 1 / 1 / 2 / 4;
& em { font-size: 1.0877em; }
}
& .sc-bouwsteen-question {
grid-area: 2 / 1 / 4 / 2;
font-family: var(--sc-font-sans);
font-size: var(--sc-text-xl);
font-weight: 550;
line-height: 1.2;
letter-spacing: var(--sc-tracking-tight);
}
& .sc-bouwsteen-text {
grid-area: 2 / 3 / 3 / 4;
display: flex;
flex-direction: column;
gap: var(--sc-space-s);
& > * { margin: 0; }
}
& .sc-bouwsteen-extra {
grid-area: 3 / 3 / 4 / 5;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 40px var(--sc-space-m);
& > * { margin: 0; }
}
& .sc-bouwsteen-services {
display: flex;
flex-direction: column;
gap: 8px;
flex: none;
width: 11.4375rem;
font-family: var(--sc-font-sans);
font-size: var(--sc-text-md);
font-weight: 500;
font-stretch: var(--sc-stretch-text);
line-height: var(--sc-leading-body);
& > * { margin: 0; }
}
& .sc-bouwsteen-sketch {
flex: 0 1 auto;
max-width: 100%;
& img { mix-blend-mode: multiply; }
}
& .sc-band-image {
grid-area: 1 / 5 / 5 / 6;
& img { aspect-ratio: 581 / 734; }
}
}
@media (max-width: 68.75em) {
.sc-band.like-bouwsteen {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: repeat(4, auto) 1fr;
column-gap: var(--sc-space-m);
row-gap: var(--sc-space-m);
& .sc-band-title { grid-area: 1 / 1 / 2 / 2; }
& .sc-bouwsteen-question { grid-area: 2 / 1 / 3 / 2; }
& .sc-bouwsteen-text { grid-area: 3 / 1 / 4 / 2; }
& .sc-bouwsteen-extra { grid-area: 4 / 1 / 5 / 2; }
& .sc-band-image { grid-area: 1 / 2 / 6 / 3; }
}
}
@media (max-width: 48.875em) {
.sc-band.like-bouwsteen {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
& :is(.sc-band-title, .sc-bouwsteen-question, .sc-bouwsteen-text, .sc-bouwsteen-extra, .sc-band-image) { grid-area: auto; }
& .sc-band-title { order: -2; }
& .sc-band-image { order: -1; }
}
}
/* sc-team.css */
.sc-band.like-photo {
padding-inline: var(--sc-gutter);
& .sc-band-image img { aspect-ratio: 1376 / 817; }
}
.sc-band.like-split {
--sc-note-width: 20rem;
display: grid;
grid-template-columns: minmax(0, 795fr) minmax(0, 581fr);
align-items: start;
padding-inline: var(--sc-gutter);
& > * { margin: 0; }
& .sc-band-title { max-width: 48.5rem; }
& .sc-band-text {
display: flex;
flex-direction: column;
gap: var(--sc-space-s);
max-width: 30.9375rem;
& > * { margin: 0; }
}
@media (max-width: 48.875em) {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--sc-space-m);
}
}
.sc-band.like-team {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sc-space-m);
margin-block-start: var(--sc-space-m);
padding: 72px var(--sc-gutter) var(--sc-space-l);
text-align: center;
& > * { margin: 0; }
& .sc-band-text { max-width: 32.25rem; }
}
.sc-team {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sc-space-m) 16px;
width: 100%;
text-align: left;
& > * { margin: 0; }
@media (max-width: 68.75em) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 37.5em) { grid-template-columns: minmax(0, 1fr); }
}
.sc-person {
display: flex;
flex-direction: column;
& > * { margin: 0; }
& .sc-person-photo {
margin-block-end: 24px;
background: var(--sc-color-white);
border-radius: var(--sc-radius);
& img {
aspect-ratio: 448 / 422;
object-position: 50% 100%;
mix-blend-mode: multiply;
}
}
& .sc-person-name,
& .sc-person-role {
font-family: var(--sc-font-sans);
font-size: var(--sc-text-md);
font-weight: 500;
font-stretch: var(--sc-stretch-text);
line-height: var(--sc-leading-body);
letter-spacing: 0;
}
& .sc-person-role { margin-block-start: 8px; }
& .sc-person-motto {
margin-block-start: 20px;
font-style: italic;
}
}
/* sc-contact.css */
.sc-contact {
display: grid;
grid-template-columns: minmax(0, 629fr) minmax(0, 811fr);
align-items: start;
& > * { margin: 0; }
& .sc-page-header { padding-inline-end: 16px; }
& .sc-page-content > * { padding-inline-end: 16px; }
@media (max-width: 48.875em) {
grid-template-columns: minmax(0, 1fr);
& .sc-page-header,
& .sc-page-content > * { padding-inline-end: var(--sc-gutter); }
& .sc-contact-image { margin-block-start: var(--sc-space-l); }
}
}
.sc-contact-image {
aspect-ratio: 811 / 1027;
margin: 0;
& img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.sc-contact-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sc-space-header);
& > * { margin: 0; }
& > p { max-width: 23.875rem; }
}
.sc-contact-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
width: min(100%, 26.375rem);
padding: 20px;
border-radius: var(--sc-radius);
& > * { margin: 0; }
& .sc-contact-photo {
margin: 0;
& img {
display: block;
width: 63px;
height: 63px;
object-fit: cover;
border-radius: var(--sc-radius-button);
}
}
& .sc-contact-person {
font-family: var(--sc-font-sans);
font-size: var(--sc-text-md);
font-weight: 500;
font-stretch: var(--sc-stretch-text);
line-height: var(--sc-leading-body);
}
}
.sc-contact-details {
display: flex;
flex-direction: column;
gap: 16px;
font-family: var(--sc-font-sans);
font-size: var(--sc-text-sm);
font-weight: 500;
font-stretch: var(--sc-stretch-text);
line-height: 1.2;
& > * { margin: 0; }
& strong { font-weight: 700; }
& a {
color: inherit;
text-underline-offset: 0.15em;
}
}