.ontwerp{ --o-pagina: #ffffff; --o-paneel: #fbfaf8; --o-ink: #1a1a18; --o-ink-hover: #000000; --o-tekst-2: #5f5c55; --o-tekst-3: #6f6b63; --o-lijn: #9c9890; --o-lijn-licht: #b3afa7; --o-lijn-zeerlicht: #cbc7c0; --o-invoerrand: #6f6b63; --o-keuzerand: #6f6b63; --o-accent: #a8746b; --o-accent-licht: #c9a49c; --o-op-donker: #ffffff; --o-op-donker-2: #c9c5bd; --o-maatlijn: #b5b1a9; --o-glaslijn: #8f8a82; --o-greep: #b7babe; --o-radius: 0; --o-radius-greep: 2px; --o-kolomgap: 44px; --o-veldpad: 13px 14px; --o-cta-pad: 18px 30px; --o-knop2-pad: 17px 24px; --o-schaduw-tekening: 0 18px 40px -26px rgba(26, 26, 24, 0.45); --o-serif: var(--kop, 'Playfair Display', Georgia, serif); --o-sans: var(--label, 'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif); --o-mono: var(--label, 'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif); } .ontwerp .o-glas, .ontwerp.o-glas{ background: linear-gradient(142deg, rgba(255, 255, 255, 0.92) 0%, rgba(223, 232, 237, 0.95) 26%, rgba(244, 248, 250, 0.98) 41%, rgba(214, 226, 232, 0.95) 54%, rgba(232, 239, 243, 0.95) 100%); } .ontwerp .o-plaatshouder, .ontwerp.o-plaatshouder{ background-image: repeating-linear-gradient(135deg, #f3f1ec 0 9px, #e9e6e0 9px 18px); } .ontwerp .o-vlak--product, .ontwerp.o-vlak--product{ height: 168px; } .ontwerp .o-vlak--materiaal, .ontwerp.o-vlak--materiaal{ height: 146px; object-fit: cover; } .ontwerp .o-vlak--profiel, .ontwerp.o-vlak--profiel{ height: 116px; } .ontwerp .o-vlak--paneel, .ontwerp.o-vlak--paneel{ height: 238px; } .ontwerp .o-paginatitel, .ontwerp.o-paginatitel{ font: 400 26px/1.2 var(--o-serif); letter-spacing: -0.01em; color: var(--o-ink) } .ontwerp .o-stapkop, .ontwerp.o-stapkop{ font: 400 37px/1.1 var(--o-serif); letter-spacing: -0.015em; color: var(--o-ink) } .ontwerp .o-stapteller, .ontwerp.o-stapteller{ font: 400 14px var(--o-sans); color: var(--o-tekst-3) } .ontwerp .o-lead, .ontwerp.o-lead{ font: 300 15px/1.65 var(--o-sans); max-width: 56ch; text-wrap: pretty; color: var(--o-tekst-2) } .ontwerp .o-sectiekop, .ontwerp.o-sectiekop{ font: 400 21px var(--o-serif); color: var(--o-ink) } .ontwerp .o-sectienr, .ontwerp.o-sectienr{ font: 400 11px var(--o-sans); letter-spacing: 0.16em; color: var(--o-accent) } .ontwerp .o-microlabel, .ontwerp.o-microlabel{ font: 400 11px var(--o-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--o-tekst-3) } .ontwerp .o-kaartnaam, .ontwerp.o-kaartnaam{ font: 400 19px/1.2 var(--o-serif); color: var(--o-ink) } .ontwerp .o-kaartnaam--klein, .ontwerp.o-kaartnaam--klein{ font: 400 17px/1.25 var(--o-serif) } .ontwerp .o-kaarttekst, .ontwerp.o-kaarttekst{ font: 300 13px/1.45 var(--o-sans); color: var(--o-tekst-2) } .ontwerp .o-invoer, .ontwerp.o-invoer{ font: 400 16px var(--o-sans) } .ontwerp input.o-invoer, .ontwerp select.o-invoer, .ontwerp textarea.o-invoer{ border: 1px solid var(--o-invoerrand) } .ontwerp .o-cta-tekst, .ontwerp.o-cta-tekst{ font: 400 12.5px var(--o-sans); letter-spacing: 0.14em; text-transform: uppercase } .ontwerp .o-tabelregel, .ontwerp.o-tabelregel{ font: 400 13.5px var(--o-sans) } .ontwerp .o-tabellabel, .ontwerp.o-tabellabel{ font: 400 11.5px var(--o-sans); letter-spacing: 0.1em; text-transform: uppercase } .ontwerp .o-maatlabel, .ontwerp.o-maatlabel{ font: 400 12.5px var(--o-sans); letter-spacing: 0.06em; fill: var(--o-maatlijn) } .ontwerp .o-raam, .ontwerp.o-raam{ display: flex; flex-wrap: wrap; gap: 0 var(--o-kolomgap); max-width: 1460px; margin: 0 auto; padding: 40px 44px 80px; background: var(--o-pagina); } .ontwerp .o-kopstrip, .ontwerp.o-kopstrip{ flex: 1 1 100%; display: flex; align-items: flex-end; border-bottom: 1px solid var(--o-lijn-licht); margin-bottom: 34px } .ontwerp .o-stapnav, .ontwerp.o-stapnav{ margin-left: auto; display: flex; font-family: var(--o-sans) } .ontwerp .o-hoofd, .ontwerp.o-hoofd{ flex: 1 1 360px; min-width: min(100%, 300px) } .ontwerp .o-paneel, .ontwerp.o-paneel{ flex: 0 1 368px; min-width: min(100%, 292px); position: sticky; top: 24px; align-self: flex-start; max-height: calc(100vh - 48px); overflow-y: auto; background: var(--o-paneel); } .ontwerp .o-sectie, .ontwerp.o-sectie{ margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--o-lijn-licht) } .ontwerp .o-sectie--eerst, .ontwerp.o-sectie--eerst{ border-top-color: var(--o-ink) } .ontwerp .o-actiebalk, .ontwerp.o-actiebalk{ margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--o-ink); display: flex; gap: 14px; align-items: center; flex-wrap: wrap } .ontwerp .o-kaart, .ontwerp.o-kaart{ border: 1px solid var(--o-lijn); border-radius: var(--o-radius); background: var(--o-pagina) } .ontwerp .o-kaart[aria-pressed="true"], .ontwerp.o-kaart[aria-pressed="true"], .ontwerp .o-kaart.is-gekozen, .ontwerp.o-kaart.is-gekozen{ border-color: var(--o-ink); box-shadow: inset 0 0 0 1px var(--o-ink); } .ontwerp .o-stap--actief, .ontwerp.o-stap--actief{ border-bottom: 2px solid var(--o-ink); background: var(--o-paneel); color: var(--o-ink) } .ontwerp .o-stap--gedaan, .ontwerp.o-stap--gedaan{ color: #4a4741; cursor: pointer } .ontwerp .o-stap--komt-nog, .ontwerp.o-stap--komt-nog{ color: var(--o-tekst-3); cursor: default } .ontwerp :focus-visible{ outline: 2px solid var(--o-ink); outline-offset: 2px; } .ontwerp button, .ontwerp [role="button"], .ontwerp a.o-knop, .ontwerp input, .ontwerp select{ min-height: 44px } .ontwerp .o-tekstlink{ min-height: 0 } .ontwerp .o-vink, .ontwerp .o-keuzerij input[type="checkbox"], .ontwerp .o-keuzerij input[type="radio"]{ min-height: 0 } @media (prefers-reduced-motion: reduce) { .ontwerp *, .ontwerp *::before, .ontwerp *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .ontwerp .o-raster, .ontwerp.o-raster{ display: grid; gap: 14px } .ontwerp .o-raster--product, .ontwerp.o-raster--product{ grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)) } .ontwerp .o-raster--materiaal, .ontwerp.o-raster--materiaal{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) } .ontwerp .o-raster--profiel, .ontwerp.o-raster--profiel{ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) } .ontwerp .o-raster--samenstelling, .ontwerp.o-raster--samenstelling{ grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px } .ontwerp .o-raster--kleur, .ontwerp.o-raster--kleur{ grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) } .ontwerp .o-staal, .ontwerp.o-staal{ height: 56px } .ontwerp .o-mini, .ontwerp.o-mini{ height: 124px; background: #efece7; border: 1px solid #9c9890 } .ontwerp .o-mini--liggend, .ontwerp.o-mini--liggend{ width: 96px } .ontwerp .o-mini--staand, .ontwerp.o-mini--staand{ width: 54px } .ontwerp .o-paneel > * + *, .ontwerp.o-paneel > * + *{ border-top: 0 } .ontwerp .o-tekenvlak, .ontwerp.o-tekenvlak{ background: var(--o-paneel); padding: 42px 44px 50px 52px } .ontwerp .o-tab--actief, .ontwerp.o-tab--actief{ border-bottom: 1px solid var(--o-ink) } .ontwerp .o-posities-kop, .ontwerp.o-posities-kop{ font: 400 11px var(--o-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--o-tekst-3); padding: 16px 20px 6px } .ontwerp .o-positie, .ontwerp.o-positie{ display: flex; align-items: center; width: 100%; padding: 10px 14px 10px 20px; background: var(--o-pagina); border: 0; border-bottom: 1px solid var(--o-lijn-zeerlicht); text-align: left } .ontwerp .o-positie--actief, .ontwerp.o-positie--actief{ background: var(--o-paneel) } .ontwerp .o-positie-mini, .ontwerp.o-positie-mini{ height: 32px; background: #efece7; border: 1px solid #9c9890 } .ontwerp .o-positie--actief .o-positie-mini, .ontwerp.o-positie--actief .o-positie-mini{ border-color: var(--o-ink) } .ontwerp .o-positie-mini--liggend, .ontwerp.o-positie-mini--liggend{ width: 46px } .ontwerp .o-positie-mini--staand, .ontwerp.o-positie-mini--staand{ width: 28px } .ontwerp .o-positie-naam, .ontwerp.o-positie-naam{ font: 400 13px var(--o-sans); color: var(--o-ink) } .ontwerp .o-positie-regel, .ontwerp.o-positie-regel{ font: 400 11.5px var(--o-sans); color: var(--o-tekst-3) } .ontwerp .o-positie-status, .ontwerp.o-positie-status{ font: 400 10px var(--o-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--o-tekst-3) } .ontwerp .o-positie--actief .o-positie-status, .ontwerp.o-positie--actief .o-positie-status{ color: var(--o-ink) } .ontwerp .o-positie-weg, .ontwerp.o-positie-weg{ width: 26px; height: 26px; min-height: 26px; color: var(--o-tekst-3) } .ontwerp .o-positie-erbij, .ontwerp.o-positie-erbij{ display: block; width: 100%; text-align: left; background: var(--o-paneel); border: 0; border-top: 1px solid var(--o-lijn-licht); font: 400 12px var(--o-sans); letter-spacing: .1em; text-transform: uppercase } .ontwerp .o-actieve-positie, .ontwerp.o-actieve-positie{ font: 400 11px var(--o-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--o-ink) } .ontwerp .o-projectregel, .ontwerp.o-projectregel{ font: 400 12px var(--o-sans); color: var(--o-tekst-3) } .ontwerp .o-speclijst, .ontwerp.o-speclijst{ display: grid; grid-template-columns: fit-content(46%) 1fr } .ontwerp .o-specregel, .ontwerp.o-specregel{ display: grid; grid-template-columns: fit-content(46%) 1fr; grid-column: 1 / -1; gap: 0 14px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--o-lijn-zeerlicht) } @supports (grid-template-columns: subgrid) { .ontwerp .o-specregel, .ontwerp.o-specregel{ grid-template-columns: subgrid } } .ontwerp .o-specregel:last-child, .ontwerp.o-specregel:last-child{ border-bottom: 0 } .ontwerp .o-speclabel, .ontwerp.o-speclabel{ font: 400 11.5px/1.4 var(--o-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--o-tekst-3) } .ontwerp .o-specwaarde, .ontwerp.o-specwaarde{ font: 400 13.5px/1.4 var(--o-sans); color: var(--o-ink); overflow-wrap: anywhere } .ontwerp .o-donkere-kaart, .ontwerp.o-donkere-kaart{ background: var(--o-ink); color: var(--o-op-donker); padding: 22px } .ontwerp .o-donkere-kaart p, .ontwerp.o-donkere-kaart p{ color: var(--o-op-donker-2) } .ontwerp .o-kaartvoet, .ontwerp.o-kaartvoet{ padding: 13px 22px; border: 1px solid var(--o-lijn-licht); border-top: 0; font: 300 12.5px/1.5 var(--o-sans); color: var(--o-tekst-3); margin: 0 } .ontwerp .o-belofte::before, .ontwerp.o-belofte::before{ content: ""; width: 5px; height: 5px; background: var(--o-accent); display: inline-block } .ontwerp .o-maat-breedte, .ontwerp.o-maat-breedte{ margin-top: 22px; border-top: 1px solid var(--o-maatlijn) } .ontwerp .o-maat-hoogte, .ontwerp.o-maat-hoogte{ margin-right: 22px; border-right: 1px solid var(--o-maatlijn) } .ontwerp .o-maat-eind, .ontwerp.o-maat-eind{ width: 26px; height: 26px } .ontwerp .o-cta, .ontwerp.o-cta{ background: var(--o-ink); color: var(--o-op-donker); border: 1px solid var(--o-ink); padding: var(--o-cta-pad) } .ontwerp .o-cta:hover, .ontwerp.o-cta:hover{ background: var(--o-ink-hover); border-color: var(--o-ink-hover) } .ontwerp .o-knop2, .ontwerp.o-knop2{ background: transparent; color: var(--o-ink); border: 1px solid var(--o-lijn); padding: var(--o-knop2-pad) } .ontwerp .o-knop2:hover, .ontwerp.o-knop2:hover{ border-color: var(--o-ink) } .ontwerp .o-tekstlink, .ontwerp.o-tekstlink{ background: none; border: 0; padding: 0; border-bottom: 1px solid #9c9890; color: var(--o-tekst-2) } .ontwerp .o-veld[aria-invalid="true"], .ontwerp.o-veld[aria-invalid="true"]{ border-color: var(--o-accent) } .ontwerp .o-veldfout, .ontwerp.o-veldfout{ font: 400 12px var(--o-sans); color: var(--o-accent); margin-top: 6px } .ontwerp .o-veldfout:empty, .ontwerp.o-veldfout:empty{ display: none } .ontwerp .o-cta[aria-busy="true"], .ontwerp.o-cta[aria-busy="true"], .ontwerp .o-cta[disabled], .ontwerp.o-cta[disabled]{ opacity: .55; cursor: default } .ontwerp .o-kaart, .ontwerp.o-kaart{ font: inherit; text-align: left; cursor: pointer } .ontwerp .o-kaart[disabled], .ontwerp.o-kaart[disabled], .ontwerp .o-kaart[aria-disabled="true"], .ontwerp.o-kaart[aria-disabled="true"]{ cursor: default; opacity: .5 } @media (max-width: 800px) { .ontwerp .o-raam, .ontwerp.o-raam{ padding: 24px 16px 56px } .ontwerp .o-paneel, .ontwerp.o-paneel{ position: static; max-height: none; overflow: visible } } .ontwerp .o-stapnav ol{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0; margin: 0; padding: 0; list-style: none; } .ontwerp .o-stapnav li{ display: flex; gap: 8px; align-items: baseline; padding: 10px 14px; border-left: 0; white-space: nowrap; } @media (max-width: 56rem){ .ontwerp .o-kopstrip{ flex-wrap: wrap } .ontwerp .o-stapnav{ margin-left: 0; width: 100%; overflow-x: auto } .ontwerp .o-stapnav li{ padding: 8px 10px } } .ontwerp .o-raster.o-raster--product{ grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)) } .ontwerp .o-raster.o-raster--materiaal{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) } .ontwerp .o-raster.o-raster--profiel{ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) } .ontwerp .o-raster.o-raster--samenstelling{ grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px } .ontwerp .o-raster.o-raster--kleur{ grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) } .ontwerp .o-raster{ max-width: none } .ontwerp .o-raster.o-raster--product{ grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)) !important; max-width: none !important; } .ontwerp .o-uitklap, .ontwerp.o-uitklap{ border-top: 1px solid var(--o-lijn-licht) } .ontwerp .o-uitklap[open], .ontwerp.o-uitklap[open]{ border-top-color: var(--o-ink) } .ontwerp .o-uitklap-kop, .ontwerp.o-uitklap-kop{ display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 20px 0; min-height: 44px; background: none; border: 0; text-align: left; cursor: pointer; } .ontwerp .o-uitklap-kop .o-sectiekop, .ontwerp.o-uitklap-kop .o-sectiekop{ margin: 0 } .ontwerp .o-uitklap-waarde, .ontwerp.o-uitklap-waarde{ margin-left: auto; font: 400 13.5px var(--o-sans); color: var(--o-tekst-2); } .ontwerp .o-uitklap-waarde--leeg, .ontwerp.o-uitklap-waarde--leeg{ color: var(--o-tekst-3) } .ontwerp .o-uitklap-lijf, .ontwerp.o-uitklap-lijf{ padding-bottom: 24px } .ontwerp .o-sectie-kop, .ontwerp.o-sectie-kop{ display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 20px 0; min-height: 44px; background: none; border: 0; text-align: left; cursor: pointer; } .ontwerp .o-sectie-lijf, .ontwerp.o-sectie-lijf{ padding-bottom: 24px } .ontwerp .o-sectie-lijf[hidden], .ontwerp.o-sectie-lijf[hidden]{ display: none } .ontwerp .o-sectie:has(> .o-sectie-kop[aria-expanded="true"]){ border-top-color: var(--o-ink); } .ontwerp .o-maat-breedte, .ontwerp.o-maat-breedte{ height: 0; padding-bottom: 1.6rem } .ontwerp .o-maat-breedte .o-maatlabel{ top: 6px; text-align: center } .ontwerp .o-maat-breedte .o-maat-eind{ top: -13px; width: 1px; height: 26px; background: var(--o-maatlijn) } .ontwerp .o-maat-hoogte, .ontwerp.o-maat-hoogte{ width: 0; padding-left: 1.6rem } .ontwerp .o-maat-hoogte .o-maat-eind{ left: -13px; width: 26px; height: 1px; background: var(--o-maatlijn) } .ontwerp .o-maatlabel, .ontwerp.o-maatlabel{ color: var(--o-maatlijn) } .ontwerp .o-maatlabel--gedraaid, .ontwerp.o-maatlabel--gedraaid{ position: absolute; top: 50%; left: 0; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg) } .ontwerp .o-glasrand, .ontwerp.o-glasrand{ box-shadow: inset 0 0 0 1px rgba(26, 26, 24, .18), inset 0 8px 22px -10px rgba(255, 255, 255, .7) } .ontwerp .o-positie, .ontwerp.o-positie{ gap: 10px } .ontwerp .o-positie .o-positie-tekst{ min-width: 0 } .ontwerp .o-positie .o-positie-regel{ display: block; overflow-wrap: anywhere } .ontwerp .o-positie .o-positie-status{ margin-left: auto; flex: 0 0 auto } .ontwerp .o-kopstrip, .ontwerp.o-kopstrip{ flex-wrap: wrap; gap: 0 1.5rem } .ontwerp .o-donkere-kaart h3, .ontwerp.o-donkere-kaart h3{ color: var(--o-op-donker) } .ontwerp .o-sectie-kop, .ontwerp.o-sectie-kop{ font: inherit; color: inherit } .ontwerp .o-sectie-kop[aria-expanded="false"] .o-sectiekop{ font-weight: 400 } .ontwerp .o-sectie-kop::after{ content: ""; margin-left: auto; width: .6rem; height: .6rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); flex: 0 0 auto } .ontwerp .o-sectie-kop[aria-expanded="true"]::after{ transform: rotate(-135deg) } .ontwerp .o-keuzerij, .ontwerp.o-keuzerij{ display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--o-lijn-licht) } .ontwerp .o-keuzerij:first-of-type{ border-top: 0 } .ontwerp .o-keuzerij > label{ flex: 1 1 auto; display: block; min-height: 44px; cursor: pointer } .ontwerp .o-keuzerij > label > span{ display: block } .ontwerp .o-vink, .ontwerp .o-keuzerij input[type="checkbox"]{ appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; background: var(--o-pagina); border: 1px solid var(--o-keuzerand); border-radius: 0; cursor: pointer; position: relative } .ontwerp .o-vink:checked, .ontwerp .o-keuzerij input[type="checkbox"]:checked{ background: var(--o-ink); border-color: var(--o-ink) } .ontwerp .o-vink:checked::after, .ontwerp .o-keuzerij input[type="checkbox"]:checked::after{ content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #ffffff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) } .ontwerp .o-keuzerij input[type="radio"]{ appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 15px; height: 15px; margin: 3px 0 0; background: var(--o-pagina); border: 1px solid var(--o-keuzerand); border-radius: 50%; cursor: pointer } .ontwerp .o-keuzerij input[type="radio"]:checked{ background: var(--o-ink); border-color: var(--o-ink); box-shadow: inset 0 0 0 2.5px #ffffff } .ontwerp .o-keuzerij input:focus-visible{ outline: 2px solid var(--o-ink); outline-offset: 2px }