) */ .kh-waarden .kh-waarde-uitleg p{text-wrap:wrap} /* ── sync_waarden — end ── */ /* ── sync_werkwijze — start (Pixel, 2026-10-21 · only what Elementor has no setting for. The scene — pinned, the plate turning a quarter per step, the next dish turning in, the gold rim, the mint wash, the step names on the dial — stays the theme's motion; it works through the names process / process__… and data-motion. Places and sizes of the parts stay the theme's, so the computer, phone and "reduce motion" versions all stay as before.) ── */ /* the theme's motion moves these parts; Elementor's own .4s transform transition would make them stop half-way */ .kh-werkwijze,.kh-werkwijze .elementor-element{transition:none} /* the round top corners when this layer slides over the one before (the theme's rule reaches only a section right under the layer; here Elementor's template box sits between) */ .kh-werkwijze{border-top-left-radius:var(--layer-top,0);border-top-right-radius:var(--layer-top,0)} /* the title: its lines rise (the theme splits the box); balanced lines, as the theme gives every h2 */ .kh-werkwijze .process__title{line-height:0;text-wrap:balance} /* "reduce motion" (and the editor): the theme shows the title a size bigger */ html:not(.has-motion) .kh-werkwijze .process__title .elementor-heading-title{font-size:var(--e-global-typography-khlijsttitel-font-size)} /* the steps (one numbered list in a Text Editor — the dial reads its items): number and step name in the Site Settings fonts and colours */ .kh-werkwijze .process__num{font-family:var(--e-global-typography-khnummer-font-family),serif;font-size:var(--e-global-typography-khwerktitel-font-size);color:var(--e-global-color-khgoud)} .has-motion .kh-werkwijze .process__num{font-size:var(--e-global-typography-khlijsttitel-font-size)} .kh-werkwijze .process__list h3{font-family:var(--e-global-typography-khheldtitel-font-family),serif;font-size:var(--e-global-typography-khheldtitel-font-size);font-weight:var(--e-global-typography-khheldtitel-font-weight);color:var(--e-global-color-khgroen)} /* the plate: the dial (HTML) lies over the photos, the size of the plate */ .elementor .kh-werkwijze .elementor-element.kh-werkwijze-wijzer{position:absolute;top:0;right:0;bottom:0;left:0;max-width:none} /* the dial, the wash and the step names in the Site Settings colours */ .kh-werkwijze .process__track{stroke:var(--e-global-color-khlijn)} .kh-werkwijze .process__rim{stroke:var(--e-global-color-khgoud)} .kh-werkwijze .process__wash{background:var(--e-global-color-khmint)} .kh-werkwijze .process__label{fill:var(--e-global-color-khgroen)} .kh-werkwijze .process__label tspan{fill:var(--e-global-color-khgoud)} @media (max-width:47.99em){ /* phone: plate first, then the steps (the theme orders its list; here Elementor's box around it) */ .has-motion .kh-werkwijze .elementor-element.kh-werkwijze-stappen{order:2;align-self:start} .has-motion .kh-werkwijze .process__num{font-size:var(--e-global-typography-khwerktitel-font-size)}} /* ── sync_werkwijze — end ── */ /* ── sync_opdrachten — start (Pixel, 2026-10-21 · only what Elementor has no setting for. The title's lines rising, each case's text rising in and the two plates drifting at their own pace are the theme's motion; the places (the 12 columns, every second case mirrored, the plates' spots, the phone layout) are the theme's too — both work through the names cases / case… / plate… and data-split-lines, data-reveal-group, data-plate, data-ambient.) ── */ /* the theme's motion moves these parts; Elementor's own .4s transform transition would make them lag */ .kh-opdrachten,.kh-opdrachten .elementor-element{transition:none} /* the soft photo is wider than the section (it bleeds over the edges); Elementor caps an element at 100 % */ .kh-opdrachten.cases>.elementor-element.ambient{max-width:none} /* the title: its lines rise (the theme splits the box); balanced lines, as the theme gives every h2 */ .kh-opdrachten .cases__title{line-height:0;text-wrap:balance} /* the case number counts by itself (01, 02 …): a case added, removed or moved renumbers itself, as before */ .kh-opdrachten .cases__list{counter-reset:kh-opdracht} .kh-opdrachten .case{counter-increment:kh-opdracht} .kh-opdrachten .case__kind::before{content:counter(kh-opdracht,decimal-leading-zero);content:counter(kh-opdracht,decimal-leading-zero) / ""; font-family:var(--e-global-typography-khheldtitel-font-family),serif;font-size:var(--e-global-typography-khheldtitel-font-size); font-weight:var(--e-global-typography-khheldtitel-font-weight);line-height:1;color:var(--e-global-color-khgoud)} /* the line between two cases and the ring around each plate: Site Settings "Goud", lighter */ .kh-opdrachten .case+.case{border-top-color:color-mix(in srgb,var(--e-global-color-khgoud) 25%,transparent)} .kh-opdrachten .plate::after{border-color:color-mix(in srgb,var(--e-global-color-khgoud) 55%,transparent)} /* the details and the text take the colour set in their Text Editor (the theme gives every p there a fixed grey) */ .kh-opdrachten .case__meta p,.kh-opdrachten .kh-opdracht-tekst p{color:inherit} /* "Op tafel": the theme's list look (a short gold line before each dish) on the list inside the text box */ .kh-opdrachten .feature__points ul{display:grid;gap:.35rem;margin:0;padding:0;list-style:none} /* the client's words: Site Settings fonts and colours */ .kh-opdrachten .case__quote{border-left-color:var(--e-global-color-khgoud)} .kh-opdrachten .case__quote blockquote{font-family:var(--e-global-typography-khreviewtekst-font-family),serif;font-size:var(--e-global-typography-khreviewtekst-font-size);color:var(--e-global-color-khwit)} .kh-opdrachten .case__quote figcaption{color:var(--e-global-color-khgrijsdonker)} /* ── sync_opdrachten — end ── */ /* ── sync_tekstblok — start (Pixel, 2026-10-21 · only what Elementor has no setting for. The title's lines rising and the paragraphs and buttons rising in one by one are the theme's motion; it works through data-split-lines and data-reveal-group.) ── */ /* the theme's motion moves these parts; Elementor's own .4s transform transition would make them lag */ .kh-tekstblok,.kh-tekstblok .elementor-element{transition:none} /* the title: its lines rise (the theme splits the box); balanced lines, as the theme gives every h2 */ .kh-tekstblok .kh-tekstblok-titel{line-height:0;text-wrap:balance} /* ── sync_tekstblok — end ── */ /* ── sync_artikel — start (Pixel, 2026-10-21 · only what Elementor has no setting for. The photo drifting softly and the short answer rising in are the theme's motion; the article's width, spacing and table / list look are the theme's too — they work through the names article… and data-parallax, data-reveal-group.) ── */ /* the theme's motion moves these parts; Elementor's own .4s transform transition would make them lag */ .kh-artikel,.kh-artikel .elementor-element{transition:none} /* the short answer: Site Settings font "Review: tekst" in green (the theme sets it on the answer's paragraph) */ .kh-artikel .article__answer .kh-artikel-antwoord p{font-family:var(--e-global-typography-khreviewtekst-font-family),serif;font-size:var(--e-global-typography-khreviewtekst-font-size);font-weight:var(--e-global-typography-khreviewtekst-font-weight);line-height:var(--e-global-typography-khreviewtekst-line-height);color:var(--e-global-color-khgroen)} /* links, table heads and lines in the Site Settings colours */ .kh-artikel .article__section a{color:var(--e-global-color-khgroen);text-decoration-color:var(--e-global-color-khgoud)} .kh-artikel .article__section th{color:var(--e-global-color-khgroen);background:var(--e-global-color-khmint)} .kh-artikel .article__section :is(th,td){border-bottom-color:var(--e-global-color-khlijn)} /* ── sync_artikel — end ── */ /* ── sync_blogberichten — start (Pixel, 2026-10-21 · only what Elementor has no setting for. The cards rising in one by one, the photo zooming and the title underlined under the mouse are the theme's; so are the section's spacing and the card look — they work through the names posts, post__… and data-reveal-group.) ── */ /* the theme's motion moves the cards; Elementor's own .4s transform transition would make them lag */ .kh-blogberichten .elementor-element{transition:none} /* at exactly 1024 px (an iPad held sideways) the theme still shows the desktop columns; Elementor's tablet starts at 1024, the theme's below it. 3 = the Loop Grid's desktop Columns — change both together */ @media (min-width:64em) and (max-width:1024px){.kh-blogberichten .elementor-loop-container.elementor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} /* ── sync_blogberichten — end ── */ /* ── sync_contact — start (Pixel, 2026-10-21 · only what Elementor has no setting for. The left side rising in is the theme's motion; so are the section's grid and spacing, the big links' line under the mouse and the yellow marks — they work through the names contact… and data-reveal-group. The form is Elementor Pro's own (it sends the message itself, his "1" 2026-10-21); below its fields, messages and button get the look the theme's form had.) ── */ /* the theme's motion moves the left side; Elementor's own .4s transform transition would make it lag */ .kh-contact,.kh-contact .elementor-element{transition:none} /* the fields: the theme's height and room inside (Elementor has only fixed sizes) */ .kh-contactformulier .elementor-field-group .elementor-field-textual{min-height:3.25rem;padding:.75rem 1rem} .kh-contactformulier .elementor-field-group select.elementor-field-textual{padding-inline-end:3rem} .kh-contactformulier .elementor-field-group textarea.elementor-field-textual{min-height:7rem;resize:vertical} /* the subject list without Elementor's arrow, as the theme's had none */ .kh-contactformulier .elementor-select-wrapper .select-caret-down-wrapper{display:none} /* a message under one field: the field beside it stays at the top of the row (Elementor would centre it lower) */ .kh-contactformulier .elementor-field-group{align-content:flex-start} /* the button sits 1.5rem under the last field, as before (the rows are 1rem apart) */ .kh-contactformulier .e-form__buttons{margin-top:.5rem} /* a field not filled in right: a red edge (Site Settings colour "Fout") and the message under it in the labels' font */ .kh-contactformulier .elementor-error .elementor-field-textual{box-shadow:inset 0 0 0 2px var(--e-global-color-khfout)} .kh-contactformulier .elementor-message{margin:.4rem 0 0;font-family:var(--e-global-typography-khformlabel-font-family),sans-serif;font-size:var(--e-global-typography-khformlabel-font-size);font-weight:var(--e-global-typography-khformlabel-font-weight);line-height:var(--e-global-typography-khformlabel-line-height)} .kh-contactformulier .elementor-message::before{content:none} /* the thank-you line: running text on mint, as the theme's */ .kh-contactformulier .elementor-message.elementor-message-success{width:fit-content;margin-top:1.5rem;padding:1rem 1.25rem;background:var(--e-global-color-khmint);font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit} /* the button: the house button (as block 5, here for the form's own button) — colours --kh-bg / --kh-ink */ .kh-contactformulier{--kh-bg:var(--e-global-color-khgroen);--kh-ink:var(--e-global-color-khwit);--kh-pad:2rem;--kh-tile:2.375rem;--kh-tile-gap:.3125rem} .kh-contactformulier .e-form__buttons .elementor-button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;min-height:3.25rem;padding-block:0;padding-inline:var(--kh-pad) calc(var(--kh-tile) + var(--kh-tile-gap) + var(--kh-pad) * .7);background-color:var(--kh-bg);color:var(--kh-ink);border:2px solid var(--kh-bg);border-radius:999px;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .45s cubic-bezier(.77,0,.175,1),transform .14s cubic-bezier(.23,1,.32,1)} .kh-contactformulier .e-form__buttons .elementor-button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--kh-ink);clip-path:inset(calc(50% - var(--kh-tile) / 2) var(--kh-tile-gap) calc(50% - var(--kh-tile) / 2) calc(100% - var(--kh-tile-gap) - var(--kh-tile)) round 999px);transition:clip-path .45s cubic-bezier(.77,0,.175,1)} .kh-contactformulier .e-form__buttons .elementor-button::after{--arrow: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 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");content:"";position:absolute;top:50%;right:var(--kh-tile-gap);width:var(--kh-tile);height:var(--kh-tile);translate:0 -50%;background:var(--kh-bg);pointer-events:none;-webkit-mask:var(--arrow) 50% 50% / 46% 46% no-repeat,var(--arrow) -40% 50% / 0% 0% no-repeat;mask:var(--arrow) 50% 50% / 46% 46% no-repeat,var(--arrow) -40% 50% / 0% 0% no-repeat;transition:-webkit-mask-position .45s cubic-bezier(.77,0,.175,1),-webkit-mask-size .45s cubic-bezier(.77,0,.175,1),mask-position .45s cubic-bezier(.77,0,.175,1),mask-size .45s cubic-bezier(.77,0,.175,1)} .kh-contactformulier .e-form__buttons .elementor-button:is(:focus-visible,:active){color:var(--kh-bg)} .kh-contactformulier .e-form__buttons .elementor-button:is(:focus-visible,:active)::before{clip-path:inset(0 round 999px)} .kh-contactformulier .e-form__buttons .elementor-button:is(:focus-visible,:active)::after{-webkit-mask-position:140% 50%,50% 50%;mask-position:140% 50%,50% 50%;-webkit-mask-size:0% 0%,46% 46%;mask-size:0% 0%,46% 46%} @media (hover:hover) and (pointer:fine){ .kh-contactformulier .e-form__buttons .elementor-button:hover{color:var(--kh-bg)} .kh-contactformulier .e-form__buttons .elementor-button:hover::before{clip-path:inset(0 round 999px)} .kh-contactformulier .e-form__buttons .elementor-button:hover::after{-webkit-mask-position:140% 50%,50% 50%;mask-position:140% 50%,50% 50%;-webkit-mask-size:0% 0%,46% 46%;mask-size:0% 0%,46% 46%} } .kh-contactformulier .e-form__buttons .elementor-button:active{transform:scale(.97)} @media (prefers-reduced-motion:reduce){.kh-contactformulier .e-form__buttons .elementor-button,.kh-contactformulier .e-form__buttons .elementor-button::before,.kh-contactformulier .e-form__buttons .elementor-button::after{transition:none}} /* ── sync_contact — end ── *//* End custom CSS */