/* Ontwerpstudio 3D (jdb-studio) — paneel, stappen, beeldbalk en belblok.
Laadt na de gegenereerde jdb-studio.css en overschrijft die met dezelfde
specificiteit (.jdb-studio …). Desktop (≥64rem): links de 3D-ruimte
(werkbalk erboven) vast in beeld, rechts een brede paneelkaart die met de
pagina meeloopt; voortgang bovenin en navigatie onderin blijven staan.
Weinig tekst: keuzes zijn foto's, tegels met eigen iconen
(jdb-studio-iconen.css) en kleurstalen. Geen stapnummers.
Mobiel: beeld bovenin, paneel eronder, navigatie onderin vast. */
.jdb-studio {
--studio-top: 6.25rem;
--studio-h: max(36rem, calc(100svh - 7.5rem));
--paneel-x: 1.5rem;
--ctrl-compact: 2.25rem;
}
/* ================================================================ paneel */
.jdb-studio .studio__kop {
gap: .55rem;
}
.jdb-studio .studio__titel {
font-size: var(--stap-2);
}
.jdb-studio .studio__intro {
font-size: var(--stap--1);
color: var(--tekst-zwak);
max-inline-size: 40ch;
}
.jdb-studio .studio__opslag {
min-block-size: 0;
font-size: .75rem;
}
.jdb-studio .studio__opslag:empty {
display: none;
}
.jdb-studio .studio__project {
grid-template-columns: auto 1fr;
align-items: center;
gap: .75rem;
}
.jdb-studio .studio__project legend {
float: left;
padding: 0;
font-size: .8rem;
white-space: nowrap;
}
/* In stap 6 staat het belformulier al in beeld. */
.jdb-studio .studio__paneel:has(.studiostap[data-stap="6"]:not([hidden])) .studio__overslaan {
display: none;
}
.jdb-studio .segment {
padding: .2rem;
}
.jdb-studio .segment__optie span {
min-block-size: var(--ctrl-compact);
padding-inline: .95rem;
font-size: .82rem;
}
/* Intro en projectkeuze alleen bij het begin; daarna krijgt de inhoud de ruimte. */
.jdb-studio .studio__paneel:not(:has(.studiostap[data-stap="1"]:not([hidden]))) .studio__intro {
display: none;
}
.jdb-studio .studio__paneel:not(:has(.studiostap[data-stap="1"]:not([hidden]), .studiostap[data-stap="2"]:not([hidden]))) .studio__project {
display: none;
}
/* ------------------------------------------------------ stappen (voortgang) */
.jdb-studio .studio__stappen ol {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: .3rem;
overflow: visible;
margin-inline: 0;
padding-inline: 0;
}
.jdb-studio .stapknop {
display: grid;
align-content: start;
gap: .4rem;
inline-size: 100%;
min-block-size: 0;
padding: 0 0 .1rem;
border: 0;
border-radius: 0;
background: none;
color: var(--tekst-zwak);
font-size: .7rem;
line-height: 1.2;
text-align: start;
white-space: normal;
}
.jdb-studio .stapknop::before {
content: "";
block-size: 4px;
border-radius: var(--radius-pil);
background: var(--lijn);
transition: background var(--normaal) var(--curve);
}
.jdb-studio .stapknop__nr {
display: none;
}
.jdb-studio .stapknop__naam {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.jdb-studio .stapknop.is-gedaan {
color: var(--tekst);
}
.jdb-studio .stapknop.is-gedaan::before {
background: var(--accent);
}
.jdb-studio .stapknop[aria-current=step] {
background: none;
color: var(--tekst-sterk);
font-weight: 600;
}
.jdb-studio .stapknop[aria-current=step]::before {
background: var(--inkt);
}
.jdb-studio .stapknop:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
@media (hover: hover) {
.jdb-studio .stapknop:not([aria-current]):hover {
color: var(--tekst-sterk);
}
.jdb-studio .stapknop:not([aria-current]):hover::before {
background: var(--lijn-sterk);
}
}
/* --------------------------------------------------------------- inhoud */
.jdb-studio .studiostap {
gap: var(--r-4);
}
/* Koppen klein en rustig: de paneeltitel blijft het grootst, daaronder stap, groep, eigenschap. */
.jdb-studio .stap__kop {
font-size: 1.15rem;
letter-spacing: -.01em;
}
.jdb-studio .groep__kop,
.jdb-studio .categorie__naam {
font-size: .95rem;
letter-spacing: -.005em;
margin-block-end: .1rem;
}
.jdb-studio .eigenschap__naam {
font-size: .8rem;
color: var(--tekst);
}
.jdb-studio .stap__kop .cijfer {
font-size: .8em;
}
/* Stijlen: grote fotokaarten, alleen de naam op de foto. */
.jdb-studio .stijlen {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .85rem;
}
.jdb-studio .keuze--stijl {
position: relative;
padding: 0;
border-width: 0;
background: var(--klei);
}
.jdb-studio .stijlen .keuze--stijl .keuze__foto {
aspect-ratio: 4 / 5;
}
.jdb-studio .stijlkeuze--signatuur .keuze--stijl .keuze__foto {
aspect-ratio: 16 / 10;
}
.jdb-studio .keuze--stijl .keuze__tekst,
.jdb-studio .stijlkeuze--signatuur .keuze__tekst {
position: absolute;
inset: auto 0 0;
gap: .15rem;
padding: 3.5rem 1rem .9rem;
background: linear-gradient(180deg, transparent, rgb(24 18 12 / .78));
color: #fff;
pointer-events: none;
}
.jdb-studio .keuze--stijl .keuze__naam {
font-size: var(--stap-0);
font-weight: 600;
color: #fff;
}
.jdb-studio .stijlkeuze--signatuur .keuze__naam {
font-size: var(--stap-1);
}
.jdb-studio .keuze--stijl .label--accent {
color: var(--goud-licht);
font-size: .72rem;
letter-spacing: .06em;
text-transform: uppercase;
}
.jdb-studio .keuze--stijl .keuze__omschrijving,
.jdb-studio .stijlen .stijl__tegels {
display: none;
}
.jdb-studio .keuze--stijl:has(.keuze__invoer:checked) {
box-shadow: 0 0 0 3px var(--accent), var(--lift-2);
}
.jdb-studio .keuze--stijl::after {
inline-size: 1.7rem;
block-size: 1.7rem;
inset-block-start: .75rem;
inset-inline-end: .75rem;
}
.jdb-studio .stijlkeuze__vergroot {
inline-size: var(--ctrl-compact);
block-size: var(--ctrl-compact);
}
/* Laatste stijl alleen op een rij: dan over de volle breedte. */
.jdb-studio .stijlkeuze:last-child:nth-child(even) {
grid-column: 1 / -1;
}
.jdb-studio .stijlkeuze:last-child:nth-child(even) .keuze--stijl .keuze__foto {
aspect-ratio: 16 / 10;
}
/* Uitklapblok voor zelden gebruikte keuzes (afwijkende kraanafwerking). */
.jdb-studio .studio-meer {
border: 1px solid var(--lijn);
border-radius: var(--radius);
background: var(--vlak);
}
.jdb-studio .studio-meer__kop {
position: relative;
display: flex;
align-items: center;
gap: .6rem;
padding: .95rem 2.75rem .95rem 1.1rem;
font-size: .9rem;
font-weight: 600;
color: var(--tekst-sterk);
list-style: none;
cursor: pointer;
}
.jdb-studio .studio-meer__kop::-webkit-details-marker {
display: none;
}
.jdb-studio .studio-meer__kop::before {
content: "";
inline-size: 1.4rem;
block-size: 1.4rem;
border-radius: 50%;
background: conic-gradient(#8f7556 0 25%, #c9a265 0 50%, #e9eaec 0 75%, #1d1c1b 0);
box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}
.jdb-studio .studio-meer__kop::after {
content: "";
position: absolute;
inset-inline-end: 1.2rem;
inset-block-start: 1.15rem;
inline-size: .5rem;
block-size: .5rem;
border-inline-end: 1.5px solid currentColor;
border-block-end: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform var(--normaal) var(--curve);
}
.jdb-studio .studio-meer[open] .studio-meer__kop::after {
transform: rotate(-135deg);
inset-block-start: 1.4rem;
}
.jdb-studio .studio-meer__kop:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius);
}
.jdb-studio .studio-meer > .groep {
padding: 0 1.1rem 1.1rem;
}
.jdb-studio .studio-meer > .groep > .groep__kop {
display: none;
}
/* Minder tekst: uitleg weg, kaarten tonen alleen beeld en naam. */
.jdb-studio .studio__intro,
.jdb-studio .stap__uitleg,
.jdb-studio .groep__uitleg,
.jdb-studio .categorie__uitleg,
.jdb-studio .stap__noot,
.jdb-studio .raster .keuze__omschrijving,
.jdb-studio .chip__sub {
display: none;
}
/* Geen stappenbalk en geen keuzestrook onder het beeld (de JS werkt ze nog bij, ze zijn alleen verborgen). */
.jdb-studio .studio__stappen,
.jdb-studio .studio__beeld .beeld__keuzes {
display: none;
}
/* Geen stapnummers. */
.jdb-studio .stap__kop .cijfer,
.jdb-studio .categorie__naam .cijfer,
.jdb-studio .subnav__knop .cijfer,
.jdb-studio .studio__voortgang {
display: none;
}
/* Paletten en indelingen in twee kolommen. */
.jdb-studio .raster--palet,
.jdb-studio .raster--twee,
.jdb-studio .raster--modellen {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
}
/* Tegelstalen compacter. */
.jdb-studio .raster--stalen {
grid-template-columns: repeat(auto-fill, minmax(4.9rem, 1fr));
gap: .5rem;
}
/* Keuzetegels (was: tekstchips): icoon of staal boven een korte naam. */
.jdb-studio .chips {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
gap: .5rem;
}
.jdb-studio .chip,
.jdb-studio .chip--breed {
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: .5rem;
min-block-size: 5.25rem;
padding: .75rem .5rem .65rem;
border-radius: var(--radius);
font-size: .8rem;
line-height: 1.25;
text-align: center;
}
.jdb-studio .chip__kleur {
inline-size: 1.6rem;
block-size: 1.6rem;
}
.jdb-studio .chip__icoon svg {
inline-size: 1.75rem;
block-size: 1.75rem;
}
.jdb-studio .chip__vorm {
block-size: 1.4rem;
max-inline-size: 2rem;
}
.jdb-studio .chip:has(.keuze__invoer:checked) {
background: var(--vlak-hoog);
border-color: var(--accent);
color: var(--tekst-sterk);
box-shadow: 0 0 0 1px var(--accent), var(--lift-1);
}
.jdb-studio .chip:has(.keuze__invoer:checked) .chip__reden {
color: var(--accent-diep);
}
.jdb-studio .chip::after {
content: "";
position: absolute;
inset-block-start: .4rem;
inset-inline-end: .4rem;
inline-size: 1.05rem;
block-size: 1.05rem;
border-radius: 50%;
background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fdfbf7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
opacity: 0;
scale: .6;
transition: opacity var(--snel) var(--curve), scale var(--normaal) var(--curve);
}
.jdb-studio .chip:has(.keuze__invoer:checked)::after {
opacity: 1;
scale: 1;
}
/* Sanitair: onderdelen als een horizontale rij, blijft bovenin staan. */
.jdb-studio .subnav {
display: flex;
gap: .4rem;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.jdb-studio .subnav::-webkit-scrollbar {
display: none;
}
.jdb-studio .subnav__knop {
flex: none;
grid-auto-flow: column;
align-items: center;
gap: .4rem;
min-block-size: var(--ctrl-compact);
padding: .3rem .85rem .3rem .65rem;
border-radius: var(--radius-pil);
font-size: .8rem;
white-space: nowrap;
scroll-snap-align: start;
}
.jdb-studio .subnav__icoon svg {
inline-size: 1.1rem;
block-size: 1.1rem;
}
.jdb-studio .subnav__knop[aria-selected=true] {
background: var(--inkt);
border-color: var(--inkt);
color: var(--room-hoog);
box-shadow: none;
}
.jdb-studio .subnav__knop[aria-selected=true] .cijfer {
color: var(--goud-licht);
}
/* --------------------------------------------------------- navigatie */
/* De studio zet "Bekijk mijn ontwerp" in de knop; flex-gap gaf dubbele woordafstand. */
.jdb-studio #stap-volgende {
gap: .28em;
}
/* Knoppen gelijk aan de sitebrede .jdb-btn (navy/ghost), via dezelfde --jdb-btn-* tokens. */
.jdb-studio .studio__navigatie .knop,
.jdb-studio .ontwerp__acties .knop {
gap: .55rem;
min-block-size: var(--jdb-btn-h, 2.875rem);
padding: .7rem var(--jdb-btn-pad-x, 1.6rem);
border: 1px solid var(--jdb-btn-primary-bg, #2b2621);
border-radius: var(--jdb-btn-radius, 999px);
background: var(--jdb-btn-primary-bg, #2b2621);
color: var(--jdb-btn-primary-fg, #fbf9f5);
font-family: var(--jdb-font-body, var(--sans));
font-size: var(--jdb-btn-fs, .9375rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -.005em;
box-shadow: 0 1px 2px rgb(43 38 33 / .12);
overflow: visible;
transition:
transform .25s var(--jdb-btn-ease, ease),
background-color .25s var(--jdb-btn-ease, ease),
border-color .25s var(--jdb-btn-ease, ease),
color .25s var(--jdb-btn-ease, ease),
box-shadow .3s var(--jdb-btn-ease, ease);
}
.jdb-studio .studio__navigatie .knop::after,
.jdb-studio .ontwerp__acties .knop::after {
content: none;
}
.jdb-studio .studio__navigatie .knop:hover,
.jdb-studio .ontwerp__acties .knop:hover {
transform: translateY(-1px);
background: var(--jdb-btn-primary-bg-hover, #4a3d31);
border-color: var(--jdb-btn-primary-bg-hover, #4a3d31);
color: var(--jdb-btn-primary-fg, #fbf9f5);
box-shadow: var(--jdb-btn-shadow-hover, 0 10px 24px -14px rgb(43 38 33 / .55));
}
.jdb-studio .studio__navigatie .knop:active,
.jdb-studio .ontwerp__acties .knop:active {
transform: translateY(0) scale(.98);
transition-duration: .1s;
}
.jdb-studio .studio__navigatie .knop:focus-visible,
.jdb-studio .ontwerp__acties .knop:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: var(--jdb-focus-ring, 0 0 0 2px #fbf9f5, 0 0 0 4px #7a5c3e);
}
/* Secundair: outline, zoals .jdb-btn--ghost. */
.jdb-studio .studio__navigatie .knop--stil,
.jdb-studio .ontwerp__acties .knop--stil {
background: transparent;
border-color: var(--jdb-btn-outline-border, rgb(43 38 33 / .22));
color: var(--mdb-ink, #2b2621);
box-shadow: none;
}
.jdb-studio .studio__navigatie .knop--stil:hover,
.jdb-studio .ontwerp__acties .knop--stil:hover {
background: var(--mdb-sand-2, #ede5d9);
border-color: var(--mdb-ink, #2b2621);
color: var(--mdb-ink, #2b2621);
box-shadow: 0 8px 18px -14px rgb(43 38 33 / .45);
}
.jdb-studio .studio__navigatie .knop:disabled {
opacity: .4;
transform: none;
background: transparent;
border-color: var(--jdb-btn-outline-border, rgb(43 38 33 / .22));
box-shadow: none;
cursor: default;
}
/* Pijlen zoals bij de site-CTA's; de studio zet alleen tekst in de knoppen, dus via pseudo-elementen. */
.jdb-studio #stap-volgende::after,
.jdb-studio #stap-vorige::before {
content: "";
position: static;
inset: auto;
flex: none;
inline-size: 1.05em;
block-size: 1.05em;
border-radius: 0;
background: currentColor;
transform: none;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .3s var(--jdb-btn-ease, ease);
}
.jdb-studio #stap-vorige::before {
scale: -1 1;
}
.jdb-studio #stap-volgende:hover::after {
transform: translateX(3px);
}
.jdb-studio #stap-vorige:not(:disabled):hover::before {
transform: translateX(3px);
}
.jdb-studio .studio__overslaan {
margin: 0;
font-size: .8rem;
text-align: center;
}
.jdb-studio .studio__overslaan a {
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--accent);
text-underline-offset: .25em;
}
/* ========================================================= stap 6 */
.jdb-studio .ontwerp__titel {
font-size: var(--stap-0);
}
.jdb-studio .ontwerp__details {
border: 1px solid var(--lijn);
border-radius: var(--radius);
background: var(--vlak);
}
.jdb-studio .ontwerp__details-kop {
position: relative;
padding: .9rem 2.75rem .9rem 1.1rem;
font-size: .88rem;
font-weight: 600;
color: var(--tekst-sterk);
list-style: none;
cursor: pointer;
}
.jdb-studio .ontwerp__details-kop::-webkit-details-marker {
display: none;
}
.jdb-studio .ontwerp__details-kop::after {
content: "";
position: absolute;
inset-inline-end: 1.2rem;
inset-block-start: 1.05rem;
inline-size: .5rem;
block-size: .5rem;
border-inline-end: 1.5px solid currentColor;
border-block-end: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform var(--normaal) var(--curve);
}
.jdb-studio .ontwerp__details[open] .ontwerp__details-kop::after {
transform: rotate(-135deg);
inset-block-start: 1.3rem;
}
.jdb-studio .ontwerp__details-kop:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius);
}
.jdb-studio .ontwerp__details .ontwerp__lijst {
gap: .6rem;
padding: 0 .6rem .6rem;
}
.jdb-studio .ontwerp__details .ontwerp__groep {
padding: .75rem .9rem;
background: var(--vlak-hoog);
}
.jdb-studio .ontwerp__lijst dl > div {
grid-template-columns: minmax(6rem, .45fr) 1fr;
font-size: .8rem;
}
.jdb-studio .ontwerp__acties {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.jdb-studio .ontwerp__noot {
font-size: .78rem;
color: var(--tekst-zwak);
}
/* ------------------------------------------------- belblok (stap 6) */
.jdb-studio .studio-bel {
display: grid;
gap: .5rem;
padding: 1.25rem 1.25rem 1rem;
border: 1px solid var(--lijn-sterk);
border-radius: var(--radius);
background: linear-gradient(180deg, var(--room-hoog), var(--vlak));
box-shadow: var(--lift-1);
outline: none;
scroll-margin-block-start: 1rem;
}
.jdb-studio .studio-bel__kop {
font-size: var(--stap-1);
margin: 0;
}
.jdb-studio .studio-bel__tekst {
margin: 0 0 .35rem;
font-size: .85rem;
color: var(--tekst-zwak);
}
.jdb-studio .studio-bel__direct {
margin: 0;
font-size: .8rem;
color: var(--tekst-zwak);
text-align: center;
}
.jdb-studio .studio-bel__direct a {
color: var(--tekst-sterk);
font-weight: 600;
white-space: nowrap;
}
/* CF7 in het belblok: de sitebrede .wpcf7-regels hebben hoge specificiteit. */
html body .jdb-studio .studio-bel .wpcf7-form {
display: grid;
gap: .8rem;
margin: 0;
}
html body .jdb-studio .studio-bel .wpcf7-form p {
margin: 0;
}
html body .jdb-studio .studio-bel .jdb-cf7-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: .8rem;
}
html body .jdb-studio .studio-bel .wpcf7-form-control-wrap {
display: block;
margin-block-start: .35rem;
}
html body .jdb-studio .studio-bel .wpcf7-form label,
html body .jdb-studio .studio-bel .jdb-bel-moment legend {
display: block;
font-size: .8rem;
font-weight: 600;
color: var(--tekst-sterk);
}
html body .jdb-studio .studio-bel .jdb-cf7-optional {
font-weight: 400;
color: var(--tekst-zwak);
}
html body .jdb-studio .studio-bel .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
inline-size: 100%;
min-block-size: 2.85rem;
padding: .6rem .85rem;
border: 1px solid var(--lijn-sterk);
border-radius: .65rem;
background: var(--room-hoog);
font-size: .95rem;
color: var(--tekst-sterk);
box-shadow: none;
}
html body .jdb-studio .studio-bel .wpcf7-form input:not([type="submit"]):focus {
border-color: var(--accent);
outline: 2px solid color-mix(in oklab, var(--accent) 35%, transparent);
outline-offset: 0;
}
html body .jdb-studio .studio-bel .jdb-bel-moment {
display: grid;
gap: .45rem;
margin: 0;
padding: 0;
border: 0;
}
html body .jdb-studio .studio-bel .jdb-bel-moment legend {
padding: 0;
margin-block-end: .4rem;
}
html body .jdb-studio .studio-bel .wpcf7-radio {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
html body .jdb-studio .studio-bel .wpcf7-list-item {
margin: 0;
}
html body .jdb-studio .studio-bel .wpcf7-list-item label {
position: relative;
display: block;
cursor: pointer;
}
html body .jdb-studio .studio-bel .wpcf7-list-item input {
position: absolute;
inset: 0;
opacity: 0;
margin: 0;
cursor: pointer;
}
html body .jdb-studio .studio-bel .wpcf7-list-item-label {
display: inline-flex;
align-items: center;
min-block-size: var(--ctrl-compact);
padding: .3rem .85rem;
border: 1px solid var(--lijn-sterk);
border-radius: var(--radius-pil);
background: var(--room-hoog);
font-size: .8rem;
font-weight: 500;
color: var(--tekst-sterk);
transition: background var(--snel) var(--curve), color var(--snel) var(--curve), border-color var(--snel) var(--curve);
}
html body .jdb-studio .studio-bel .wpcf7-list-item input:checked + .wpcf7-list-item-label {
background: var(--inkt);
border-color: var(--inkt);
color: var(--room-hoog);
}
html body .jdb-studio .studio-bel .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
html body .jdb-studio .studio-bel .wpcf7-submit {
inline-size: 100%;
min-block-size: 3rem;
}
html body .jdb-studio .studio-bel .wpcf7-not-valid-tip {
font-size: .78rem;
font-weight: 500;
}
html body .jdb-studio .studio-bel .wpcf7-response-output {
margin: 0;
font-size: .82rem;
}
/* ================================================== beeldbalk (boven) */
.jdb-studio .beeld__balk {
order: -1;
}
.jdb-studio .beeld__keuzes {
order: 2;
}
.jdb-studio .beeld__tip {
order: 3;
}
/* ============================================ desktop: beeld vast, paneel loopt mee */
@media (width >= 64rem) {
.jdb-studio .studio__lay {
grid-template-columns: minmax(0, 1fr) clamp(27rem, 38vw, 37rem);
gap: var(--r-5);
align-items: start;
}
/* Beeld links: werkbalk, 3D, keuzestrook; blijft in beeld tijdens het kiezen. */
.jdb-studio .studio__beeld {
grid-column: 1;
inset-block-start: var(--studio-top);
block-size: var(--studio-h);
display: flex;
flex-direction: column;
gap: .6rem;
}
.jdb-studio .studio__beeld .beeld {
flex: 1 1 auto;
min-block-size: 0;
aspect-ratio: auto;
block-size: auto;
max-block-size: none;
}
/* Werkbalk zweeft op het beeld, zodat het canvas de volle hoogte krijgt. */
.jdb-studio .studio__beeld .beeld__balk {
position: absolute;
inset-block-start: .9rem;
inset-inline: .9rem;
z-index: 4;
flex-wrap: nowrap;
gap: .5rem;
pointer-events: none;
}
.jdb-studio .studio__beeld .beeld__balk > * {
pointer-events: auto;
}
.jdb-studio .studio__beeld .beeld__balk .beeld__standpunten,
.jdb-studio .studio__beeld .beeld__balk .beeld__sfeer,
.jdb-studio .studio__beeld .beeld__balk .beeld__ruimte,
.jdb-studio .studio__beeld .beeld__balk .pil--rond,
.jdb-studio .studio__beeld .beeld__balk .beeld__vergelijk {
border-color: rgb(255 255 255 / .55);
background: color-mix(in oklab, var(--room-hoog) 82%, transparent);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
box-shadow: 0 6px 18px -10px rgb(30 22 14 / .45);
}
.jdb-studio .studio__beeld .beeld__balk .beeld__standpunten .pil,
.jdb-studio .studio__beeld .beeld__balk .beeld__sfeer .pil,
.jdb-studio .studio__beeld .beeld__balk .beeld__ruimte .pil {
background: none;
border-color: transparent;
box-shadow: none;
}
.jdb-studio .studio__beeld .beeld__balk .beeld__standpunten .pil[aria-pressed=true],
.jdb-studio .studio__beeld .beeld__balk .beeld__sfeer .pil[aria-pressed=true],
.jdb-studio .studio__beeld .beeld__balk .beeld__ruimte .pil[aria-pressed=true] {
background: var(--inkt);
border-color: var(--inkt);
color: var(--room-hoog);
}
.jdb-studio .studio__beeld .beeld__balk .pil {
min-block-size: var(--ctrl-compact);
padding-inline: .8rem;
font-size: .8rem;
}
.jdb-studio .studio__beeld .beeld__balk .pil--rond {
inline-size: var(--ctrl-compact);
padding: 0;
}
.jdb-studio .studio__beeld .beeld__balk .pil--rond svg {
inline-size: 1rem;
block-size: 1rem;
}
.jdb-studio .studio__beeld .beeld__standpunten,
.jdb-studio .studio__beeld .beeld__sfeer,
.jdb-studio .studio__beeld .beeld__ruimte {
flex: none;
padding: .15rem;
}
.jdb-studio .studio__beeld .beeld__sfeer .pil {
padding-inline: .6rem;
}
.jdb-studio .studio__beeld .beeld__sfeer .pil__tekst {
display: none;
}
.jdb-studio .studio__beeld .beeld__vergelijk {
min-inline-size: 0;
flex: 0 1 auto;
}
.jdb-studio .studio__beeld .beeld__keuzes li {
padding: .3rem .65rem;
font-size: .72rem;
line-height: 1.3;
}
/* Paneel rechts: kaart zonder eigen scroll; voortgang en navigatie blijven staan. */
.jdb-studio .studio__paneel {
grid-column: 2;
display: flex;
flex-direction: column;
gap: 0;
min-block-size: var(--studio-h);
border: 1px solid var(--lijn);
border-radius: var(--arc);
background: var(--vlak-hoog);
box-shadow: var(--lift-2);
}
.jdb-studio .studio__kop {
padding: 1.4rem var(--paneel-x) .9rem;
gap: .55rem;
}
.jdb-studio .studio__titel {
font-size: clamp(1.5rem, 1.1rem + .8vw, 1.9rem);
}
.jdb-studio .studio__stappen {
position: sticky;
inset-block-start: var(--studio-top);
z-index: 3;
padding: .8rem var(--paneel-x);
border-block: 1px solid var(--lijn);
background: color-mix(in oklab, var(--vlak-hoog) 94%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.jdb-studio .studio__scroll {
flex: 1 1 auto;
padding: 1.5rem var(--paneel-x) 2rem;
}
.jdb-studio .studio__navigatie {
position: sticky;
inset-block-end: 0;
z-index: 3;
padding: .8rem var(--paneel-x);
border-block-start: 1px solid var(--lijn);
border-end-start-radius: var(--arc);
border-end-end-radius: var(--arc);
background: color-mix(in oklab, var(--vlak-hoog) 94%, transparent);
}
.jdb-studio .studio__overslaan {
padding: 0 var(--paneel-x) 1rem;
}
.jdb-studio .studio-bel,
.jdb-studio .studiostap {
scroll-margin-block-start: 7rem;
}
.jdb-studio .studio__kop {
border-block-end: 1px solid var(--lijn);
}
}
/* ======================================================== mobiel */
@media (width < 64rem) {
.jdb-studio .studio__kop {
gap: .45rem;
}
.jdb-studio .studio__stappen ol {
gap: .25rem;
}
.jdb-studio .stapknop {
font-size: .66rem;
}
.jdb-studio .subnav {
margin-inline: calc(-1 * var(--marge));
padding-inline: var(--marge);
scroll-padding-inline: var(--marge);
}
.jdb-studio .studio__overslaan {
padding-block: .5rem 0;
}
.jdb-studio .studio__project {
display: flex;
flex-wrap: wrap;
gap: .4rem .75rem;
}
/* Stap 6: het beeld laat los, zodat het belformulier vrij in beeld staat. */
.jdb-studio .studio__lay:has(.studiostap[data-stap="6"]:not([hidden])) .studio__beeld {
position: relative;
inset-block-start: auto;
}
.jdb-studio .studio-bel {
scroll-margin-block-start: 1rem;
}
}
@media (width < 30rem) {
/* Alleen visueel weg: de knop houdt zijn naam voor schermlezers. */
.jdb-studio .stapknop__naam {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.jdb-studio .stapknop {
padding-block-end: 0;
}
.jdb-studio .stijlen {
gap: .55rem;
}
}
/* Snelle terugbel-link in de navigatie: alleen op mobiel, niet in stap 6. */
.jdb-studio .studio__bel-snel {
display: none;
}
/* ============================================= mobiel: compact bekijken en aanvragen */
@media (width < 64rem) {
.jdb-studio #ontwerpstudio {
padding-block: 2rem 0;
}
/* Beeld: blijft helemaal bovenin staan (de siteheader scrolt op mobiel mee weg),
met 8px ruimte boven het canvas; werkbalk compact op het beeld. */
.jdb-studio .studio__beeld {
inset-block-start: 0;
padding-block: max(.5rem, env(safe-area-inset-top)) .5rem;
}
.jdb-studio .studio__beeld .beeld {
block-size: clamp(12.5rem, 32svh, 20rem);
}
.jdb-studio .studio__beeld .beeld__balk {
inset: calc(var(--r-2) + .45rem) calc(var(--marge) + .45rem);
}
.jdb-studio .studio__beeld .beeld__balk .pil {
min-block-size: 2.1rem;
}
.jdb-studio .studio__beeld .beeld__balk .pil--rond {
inline-size: 2.1rem;
}
.jdb-studio .studio__beeld .beeld__standpunten .pil {
padding-inline: .55rem;
font-size: .74rem;
}
.jdb-studio .studio__beeld .beeld__sfeer .pil {
padding-inline: .55rem;
}
/* Paneel: korte kop, weinig witruimte. */
.jdb-studio .studio__paneel {
gap: var(--r-3);
}
.jdb-studio .studio__kop {
gap: .35rem;
}
/* Titel weg: het vaste beeld erboven maakt duidelijk waar je bent. */
.jdb-studio .studio__kop > .label,
.jdb-studio .studio__titel {
display: none;
}
.jdb-studio .studiostap {
gap: var(--r-3);
}
.jdb-studio .stap__kop {
font-size: 1.05rem;
}
/* Stijlen: vierkante kaarten, zodat er meer tegelijk in beeld staan. */
.jdb-studio .stijlen {
gap: .55rem;
}
.jdb-studio .stijlen .keuze--stijl .keuze__foto {
aspect-ratio: 1;
}
.jdb-studio .stijlen .stijlkeuze--signatuur .keuze--stijl .keuze__foto,
.jdb-studio .stijlen .stijlkeuze:last-child:nth-child(even) .keuze--stijl .keuze__foto {
aspect-ratio: 16 / 10;
}
.jdb-studio .keuze--stijl .keuze__tekst {
padding: 2.5rem .7rem .6rem;
}
.jdb-studio .keuze--stijl .keuze__naam {
font-size: .88rem;
}
.jdb-studio .stijlkeuze--signatuur .keuze__naam {
font-size: 1.05rem;
}
/* Tegels en stalen: drie of vier per rij. */
.jdb-studio .chips {
grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr));
gap: .4rem;
}
.jdb-studio .chip,
.jdb-studio .chip--breed {
min-block-size: 4.4rem;
padding: .55rem .35rem .5rem;
gap: .35rem;
font-size: .74rem;
}
.jdb-studio .chip::before,
.jdb-studio .chip__icoon svg {
inline-size: 1.45rem;
block-size: 1.45rem;
}
.jdb-studio .raster--stalen {
grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr));
gap: .4rem;
}
/* Navigatie onderin: Vorige · Bel mij terug · Volgende. De veilige zone (iPhone)
als minimum i.p.v. erbovenop, anders staat er onder de studio een extra strook. */
.jdb-studio .studio__navigatie {
gap: .5rem;
padding-block: .55rem max(.55rem, env(safe-area-inset-bottom));
/* Boven het vaste beeld: aan het eind van de studio schuift dat anders over de knoppen. */
z-index: 6;
}
.jdb-studio .studio__navigatie .knop {
min-block-size: 2.75rem;
padding: .6rem 1.05rem;
font-size: .88rem;
}
.jdb-studio .studio__bel-snel {
display: inline-flex;
align-items: center;
gap: .35rem;
min-block-size: 2.75rem;
padding-inline: .25rem;
font-size: .8rem;
font-weight: 600;
color: var(--tekst-sterk);
text-decoration: underline;
text-decoration-color: var(--accent);
text-underline-offset: .25em;
white-space: nowrap;
}
.jdb-studio .studio__bel-snel::before {
content: "";
inline-size: .95rem;
block-size: .95rem;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.jdb-studio .studio__paneel:has(.studiostap[data-stap="6"]:not([hidden])) .studio__bel-snel,
.jdb-studio .studio__overslaan {
display: none;
}
}
@media (width < 22.5rem) {
.jdb-studio .studio__navigatie .knop {
padding-inline: .8rem;
}
.jdb-studio #stap-vorige::before {
display: none;
}
}
/* Mobiel: de sectie direct na de studio begint minder ver weg (de studio eindigt al met een balk). */
@media (width < 64rem) {
.e-con:has(> .elementor-widget-jdb-studio) + .e-con > .elementor-widget:first-child > .elementor-widget-container > :first-child {
padding-top: 2.5rem;
}
}
/* De zwevende contactbalk van de site wijkt zolang de studio in beeld is. */
html.jdb-studio-in-beeld .jdb-stickycta {
transform: translateY(calc(100% + 2rem)) !important;
pointer-events: none;
}
/* ======================================================== melding */
/* De toast ("Stijl … toegepast") is uit: de 3D laat de wijziging al zien. */
.jdb-studio .melding {
display: none !important;
}
/* ===================================================== vergroot-dialoog */
.jdb-studio .vergroot {
/* De studio-reset (* { margin: 0 }) haalt het centreren van