/*
De Kraamkeuken — modern layer
=============================
Loaded after main.css (the compiled Big Picture base). This file holds
everything that is specific to this standalone theme:
1. Design tokens
2. Accessibility (skip link, focus rings, reduced motion, anchors)
3. Typography and readability
4. Sections and backgrounds
5. Header and mobile navigation
6. Forms
7. FAQ accordion
8. Gallery lightbox
9. Print
Only widely-supported CSS is used (custom properties, clamp(), logical
properties, :focus-visible, :where(), aspect-ratio, dialog) — all available
in every current browser. Newer niceties sit behind @supports so older
engines keep the working baseline.
*/
/* ==========================================================================
1. Design tokens
========================================================================== */
:root {
/* Brand */
--dkk-green: #98c593;
--dkk-green-dark: #457a3d; /* 5.1:1 on white — safe for text/buttons */
--dkk-green-darker: #3f7038; /* 5.9:1 on white — link + hover state */
--dkk-blue: #9ac8e9;
--dkk-blue-dark: #356f93;
/* Neutrals */
--dkk-ink: #39454b;
--dkk-ink-muted: #5b6a71;
--dkk-surface: #ffffff;
--dkk-surface-alt: #f5f6f7;
--dkk-border: #d8dcde;
/* State */
--dkk-error: #b3261e;
--dkk-success: #1b5e20;
/* Layout */
--dkk-header-height: 3em;
--dkk-radius: 0.4rem;
--dkk-radius-pill: 3.5em;
--dkk-focus-width: 3px;
--dkk-focus-offset: 2px;
/* Motion — set to 0s by the reduced-motion block further down */
--dkk-duration-fast: 0.2s;
--dkk-duration: 0.6s;
--dkk-duration-slow: 1s;
--dkk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media screen and (max-width: 736px) {
:root {
--dkk-header-height: 2.5em;
}
}
/* ==========================================================================
2. Accessibility
========================================================================== */
/* Skip link: hidden until focused, then pinned to the top-left. */
.skip-link {
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
z-index: 100002;
padding: 0.75em 1.25em;
background: var(--dkk-ink);
color: #fff;
font-size: 1rem;
line-height: 1.2;
text-decoration: none;
border-end-end-radius: var(--dkk-radius);
transform: translateY(-120%);
transition: transform var(--dkk-duration-fast) var(--dkk-ease);
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
outline: var(--dkk-focus-width) solid var(--dkk-green);
outline-offset: calc(var(--dkk-focus-offset) * -1);
}
/* Available to assistive tech, invisible on screen. */
.visually-hidden:not(:focus):not(:active) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/*
main.css sets `outline: 0` in several places, which removes the only
keyboard affordance there is. Restore a visible ring for keyboard users
while leaving mouse clicks clean.
*/
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: var(--dkk-focus-width) solid var(--dkk-green-darker);
outline-offset: var(--dkk-focus-offset);
border-radius: 2px;
}
/* On dark sections the dark green ring would disappear. */
.main.dark :where(a, button, summary, [tabindex]):focus-visible,
#header :where(a, button):focus-visible {
outline-color: #fff;
}
/* Never remove focus styling for keyboard users, whatever main.css says. */
a:focus-visible,
.button:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline-style: solid !important;
outline-width: var(--dkk-focus-width) !important;
}
/*
Anchor scrolling used to be animated by jQuery Scrolly with a manual
pixel offset. CSS does both jobs natively and respects user preferences.
*/
html {
scroll-behavior: smooth;
scroll-padding-block-start: var(--dkk-header-height);
}
:target,
.main[id],
.anchor-alias {
scroll-margin-block-start: var(--dkk-header-height);
}
/* Zero-size marker that keeps old numbered deep links working. */
.anchor-alias {
display: block;
width: 0;
height: 0;
overflow: hidden;
}
/*
Reduced motion: keep the layout and the flow, drop the movement.
Reveal animations are turned into instant state changes rather than
removed, so nothing stays invisible.
*/
@media (prefers-reduced-motion: reduce) {
:root {
--dkk-duration-fast: 0.01ms;
--dkk-duration: 0.01ms;
--dkk-duration-slow: 0.01ms;
}
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Parallax backgrounds can trigger motion sickness. */
.main {
background-attachment: scroll !important;
}
/* Anything the reveal script would animate in is simply shown. */
.main.style1 > .content,
.main.style2 > .content,
.gallery article,
.contact .box {
opacity: 1 !important;
transform: none !important;
}
}
/* Respect the OS "increase contrast" setting. */
@media (prefers-contrast: more) {
:root {
--dkk-green-dark: #2f5a2a;
--dkk-green-darker: #2f5a2a;
--dkk-ink-muted: var(--dkk-ink);
--dkk-border: var(--dkk-ink);
}
.box.style2 {
background-color: #fff !important;
opacity: 1 !important;
}
}
/* ==========================================================================
3. Typography and readability
========================================================================== */
/*
main.css steps the root font size down through six fixed breakpoints in
`pt`. Replace that with one fluid `clamp()` in `rem` so text scales
smoothly, respects the user's browser font size, and stays zoomable.
*/
body,
input,
textarea,
select,
button {
font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-weight: 300;
/* Matches the original fixed-pt scale: 12pt@360, 15pt@1280, 18pt@1920. */
font-size: clamp(1rem, 0.85rem + 0.5vw, 1.5rem);
line-height: 1.7;
color: var(--dkk-ink);
letter-spacing: 0.02em;
text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Oswald', system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
text-wrap: balance;
}
/*
The intro heading is now an (it used to be an , which left the
page without a top-level heading). Keep the original display size.
*/
.main.style1 h1,
.main.style1 h2 {
/* Original was 4.25em at 1440px (≈ 85 px). */
font-size: clamp(2.25em, 1.95em + 3.05vw, 4.25em);
line-height: 1.05;
letter-spacing: -0.03em;
}
.main.style2 h1,
.main.style2 h2,
.main.style3 h1,
.main.style3 h2 {
/* Original was 2.25em at 1440px (≈ 45 px). */
font-size: clamp(1.75em, 1.2em + 1.4vw, 2.25em);
}
h3 {
/* Original was 1.25em at 1440px (≈ 25 px). */
font-size: clamp(1.15em, 0.95em + 0.4vw, 1.25em);
}
/*
Comfortable measure for body copy; 45em of prose is hard to read.
The heading is included here too so its left edge lines up with the
paragraph text below it — without this, the heading spans the full box
width while the centered paragraph sits inset, and the two look
misaligned.
*/
.main.style3 .content > header,
.main.style3 .content > p,
.main.style3 .content > ul,
.main.style3 .content > ol,
.box.style2 header,
.box.style2 p,
.box.style2 ul,
.box.style2 ol,
.faq__answer {
max-inline-size: 68ch;
margin-inline: auto;
hyphens: auto;
}
/* Links: contrast-safe and underlined so colour is not the only cue. */
a {
color: var(--dkk-green-darker);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
a:hover {
color: var(--dkk-ink);
}
/* Headings and buttons keep their own styling. */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.button,
.icons a,
.site-nav a,
.site-header__logo a,
.gallery a {
text-decoration: none;
}
/* Dark sections already invert the palette. */
.main.dark a {
color: #fff;
}
.main.dark a:hover {
color: var(--dkk-green);
}
/* Buttons: white on a dark enough green to pass AA. */
input[type='button'],
input[type='submit'],
input[type='reset'],
.button,
button:not(.nav-toggle):not(.lightbox__control) {
background-color: var(--dkk-green-dark);
color: #fff;
font-family: 'Oswald', system-ui, sans-serif;
letter-spacing: 0.02em;
transition: background-color var(--dkk-duration-fast) var(--dkk-ease),
transform var(--dkk-duration-fast) var(--dkk-ease);
}
input[type='button']:hover,
input[type='submit']:hover,
.button:hover,
button:not(.nav-toggle):not(.lightbox__control):hover {
background-color: var(--dkk-green-darker);
}
input[type='submit']:active,
.button:active,
button:not(.nav-toggle):not(.lightbox__control):active {
transform: translateY(1px);
}
/* Minimum 44x44 CSS px target, per WCAG 2.5.8. */
.button,
button,
input[type='submit'],
.site-nav a,
.icons a {
min-height: 44px;
}
/* The "next section" arrow button on dark backgrounds. */
.main.dark .button.style2 {
background-color: rgba(0, 0, 0, 0.25);
border: 2px solid #fff;
color: #fff;
}
.main.dark .button.style2:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/* ==========================================================================
4. Sections and backgrounds
========================================================================== */
/*
Section background images now arrive as a single `--section-bg` custom
property on the element instead of a full inline `background-image`
declaration. That keeps the overlay in the stylesheet where it belongs
and means a missing image degrades to a flat colour rather than a
broken shorthand.
*/
.intro,
.info,
.main.fullscreen[style*='--section-bg'] {
background-color: var(--dkk-ink);
background-image: url('images/overlay.png'), var(--section-bg, none);
background-repeat: repeat, no-repeat;
background-size: 256px 256px, cover;
background-position: top left, center center;
}
/*
Intro contrast. White display type over a photo only passes AA where the
photo happens to be dark, so a scrim layer sits between the photo and the
texture overlay. It is darkest top and bottom, where the heading and the
"next section" button sit.
The scrim's strength comes from the module's "Background Overlay" field
(0-100, default 74) via --overlay-top/-mid/-bottom, set inline per page
by the overlay_vars() macro. The var() fallbacks below only apply to
pages rendered before that field existed.
Layer order (top to bottom): texture, scrim, photo.
*/
.intro {
background-image: url('images/overlay.png'),
linear-gradient(
to bottom,
rgba(10, 16, 12, var(--overlay-top, 0.74)),
rgba(10, 16, 12, var(--overlay-mid, 0.72)) 45%,
rgba(10, 16, 12, var(--overlay-bottom, 0.78))
),
var(--section-bg, none);
background-repeat: repeat, no-repeat, no-repeat;
background-size: 256px 256px, cover, cover;
background-position: top left, center center, center center;
}
/*
Info sections keep their text in an opaque side panel rather than over
the photo, so no darkening is needed by default (the field defaults to
0%, i.e. fully transparent -- same look as before this existed).
Authors can still dial one in for a moodier background.
*/
.info {
background-image: url('images/overlay.png'),
linear-gradient(
to bottom,
rgba(10, 16, 12, var(--overlay-top, 0)),
rgba(10, 16, 12, var(--overlay-mid, 0)) 45%,
rgba(10, 16, 12, var(--overlay-bottom, 0))
),
var(--section-bg, none);
background-repeat: repeat, no-repeat, no-repeat;
background-size: 256px 256px, cover, cover;
background-position: top left, center center, center center;
}
/* Keeps the type readable where the scrim alone is not enough. The body
paragraphs are smaller and lighter-weight than the heading, so they need
a stronger shadow to hold AA contrast at the same scrim darkness. */
.intro > .content {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.intro > .content p {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 1px 6px rgba(0, 0, 0, 0.6);
}
/* The arrow button was 25% black on an already dark photo: too faint. */
.intro .button.style2 {
background-color: rgba(10, 16, 12, 0.55);
text-shadow: none;
}
.intro .button.style2:hover {
background-color: rgba(255, 255, 255, 0.25);
}
@media (prefers-contrast: more) {
.intro {
background-image: url('images/overlay.png'),
linear-gradient(rgba(10, 16, 12, 0.82), rgba(10, 16, 12, 0.82)),
var(--section-bg, none);
}
}
/*
Full-viewport intro on desktop. The header is fixed and body carries a
matching padding-top, so subtract the header height to avoid a scrollbar
caused by the first section being taller than the space below the header.
Below 737px main.css forces `height: auto` on .fullscreen, so this stays
desktop-only.
*/
@media (min-width: 737px) {
.main.fullscreen.intro {
min-height: calc(100vh - var(--dkk-header-height));
min-height: calc(100dvh - var(--dkk-header-height));
}
}
/* Parallax only where it is cheap and safe. */
@media (min-width: 737px) and (prefers-reduced-motion: no-preference) {
.intro,
.info {
background-attachment: fixed, fixed;
}
}
.main.style3.primary {
background-color: var(--dkk-surface);
}
.main.style3.secondary {
background-color: var(--dkk-surface-alt);
}
/* Sections are landmarks; give them an accessible name and sane padding. */
.main.style3 {
padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
/* ==========================================================================
5. Header and mobile navigation
========================================================================== */
.site-header {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
height: var(--dkk-header-height);
padding-inline: 1em;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(6px);
box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1);
}
/* The logo used to be an on every page; it is a
now. */
.site-header__logo {
position: static;
margin: 0;
font-family: 'Oswald', system-ui, sans-serif;
font-weight: 700;
font-size: 1.25em;
line-height: 1.2;
letter-spacing: -0.01em;
white-space: nowrap;
}
.site-header__logo a {
color: var(--dkk-ink);
display: inline-flex;
align-items: center;
min-height: 44px;
}
.site-nav {
position: static;
height: auto;
line-height: normal;
}
.site-nav__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25em;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav__list li {
display: block;
margin: 0;
font-size: 0.9em;
}
.site-nav a {
display: flex;
align-items: center;
height: var(--dkk-header-height);
padding-inline: 0.6em;
color: var(--dkk-ink);
border-radius: var(--dkk-radius);
}
.site-nav a:hover {
background: var(--dkk-surface-alt);
color: var(--dkk-green-darker);
}
/* Set by theme.js while a section is in view. */
.site-nav a[aria-current='true'] {
color: var(--dkk-green-darker);
box-shadow: inset 0 -3px 0 0 var(--dkk-green-dark);
}
/* --- Mobile navigation ---------------------------------------------------
The original theme simply did `nav { display: none }` below 736px, so
small screens had no navigation at all. Replaced with a disclosure
button and a slide-down panel.
----------------------------------------------------------------------- */
.nav-toggle {
display: none;
align-items: center;
gap: 0.5em;
height: calc(var(--dkk-header-height) - 0.5em);
min-height: 44px;
padding-inline: 0.75em;
background: transparent;
border: 1px solid var(--dkk-border);
border-radius: var(--dkk-radius);
color: var(--dkk-ink);
font-family: 'Oswald', system-ui, sans-serif;
font-size: 0.85em;
line-height: 1;
cursor: pointer;
}
.nav-toggle__bars {
position: relative;
display: block;
width: 1.1em;
height: 2px;
background: currentColor;
transition: background-color var(--dkk-duration-fast) var(--dkk-ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
transition: transform var(--dkk-duration-fast) var(--dkk-ease);
}
.nav-toggle__bars::before {
top: -0.35em;
}
.nav-toggle__bars::after {
top: 0.35em;
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars {
background: transparent;
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before {
transform: translateY(0.35em) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after {
transform: translateY(-0.35em) rotate(-45deg);
}
@media screen and (max-width: 860px) {
.site-header {
padding-inline: 0.75em;
}
.nav-toggle {
display: inline-flex;
}
/* Panel is closed by default once JavaScript has taken over. */
.js .site-nav {
position: absolute;
inset-inline: 0;
inset-block-start: var(--dkk-header-height);
max-height: min(70vh, 30em);
overflow-y: auto;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.12);
transform-origin: top center;
}
.js .site-nav[hidden] {
display: none;
}
.site-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.site-nav__list li {
font-size: 1em;
border-block-end: 1px solid var(--dkk-border);
}
.site-nav__list li:last-child {
border-block-end: 0;
}
.site-nav a {
height: auto;
min-height: 48px;
padding: 0.75em 1em;
border-radius: 0;
}
/* Without JavaScript the list is always visible — never a dead end. */
.no-js .nav-toggle {
display: none;
}
.no-js .site-nav {
position: static;
}
}
@media screen and (min-width: 861px) {
/* The toggle is irrelevant on wide screens; hide it from everyone. */
.nav-toggle {
display: none !important;
}
.site-nav[hidden] {
display: block;
}
}
/* main.css adds `padding-top` to body for the fixed header. */
body {
padding-top: var(--dkk-header-height);
}
/* ==========================================================================
6. Forms
========================================================================== */
.form-wrapper .fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1em;
}
/* Override main.css flex widths and gutters: grid controls field placement. */
.form-wrapper form > .fields > .field,
.form-wrapper form > .fields > .field.half {
width: auto;
max-width: none;
padding: 0;
grid-column: 1 / -1;
min-inline-size: 0;
}
/* Naam and E-mailadres share one row at wider screen sizes. */
.form-wrapper form > .fields > .field:has(input[name='data[name]']),
.form-wrapper form > .fields > .field:has(input[name='data[email]']) {
grid-column: span 1;
}
/* On small screens every field becomes a comfortable full-width row. */
@media screen and (max-width: 736px) {
.form-wrapper form > .fields {
grid-template-columns: minmax(0, 1fr);
width: 100%;
margin: 0 0 2em;
padding-inline: 0.75em;
}
.form-wrapper form > .fields > .field:has(input[name='data[name]']),
.form-wrapper form > .fields > .field:has(input[name='data[email]']) {
grid-column: 1 / -1;
}
}
/*
Visible labels. The previous build commented the label markup out and
relied on placeholders, which vanish as soon as you start typing and are
invisible to some screen readers.
*/
.form-wrapper label,
.form-wrapper .form-label {
display: block;
margin-block-end: 0.35em;
font-family: 'Oswald', system-ui, sans-serif;
font-size: 0.8em;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--dkk-ink-muted);
}
.form-wrapper .form-label.inline {
/* Plugin adds .inline; keep it block so it sits above the input. */
display: block;
}
.form-wrapper .required {
color: var(--dkk-error);
margin-inline-start: 0.15em;
}
.form-wrapper input[type='text'],
.form-wrapper input[type='email'],
.form-wrapper input[type='tel'],
.form-wrapper input[type='url'],
.form-wrapper input[type='number'],
.form-wrapper select,
.form-wrapper textarea {
inline-size: 100%;
padding: 0.7em 0.85em;
background: var(--dkk-surface);
border: 1px solid var(--dkk-border);
border-radius: var(--dkk-radius);
color: var(--dkk-ink);
transition: border-color var(--dkk-duration-fast) var(--dkk-ease),
box-shadow var(--dkk-duration-fast) var(--dkk-ease);
}
.form-wrapper textarea {
min-height: 8em;
resize: vertical;
field-sizing: content; /* progressive: auto-grow where supported */
max-height: 20em;
}
.form-wrapper :is(input, select, textarea):hover {
border-color: var(--dkk-green-dark);
}
.form-wrapper :is(input, select, textarea):focus-visible {
border-color: var(--dkk-green-darker);
box-shadow: 0 0 0 3px rgba(69, 122, 61, 0.2);
}
/* Only flag an invalid field once the visitor has interacted with it. */
.form-wrapper :is(input, textarea, select):user-invalid {
border-color: var(--dkk-error);
box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15);
}
.form-wrapper .form-message,
.form-wrapper .form-errors,
.form-wrapper .form-inline-errors {
margin-block-start: 0.4em;
font-size: 0.85em;
color: var(--dkk-error);
}
.form-wrapper .form-description {
display: block;
margin-block-start: 0.35em;
font-size: 0.85em;
color: var(--dkk-ink-muted);
}
/*
Form plugin overrides.
The plugin always loads form-styles.css, even when built_in_css is off.
We override the parts we need with higher specificity.
*/
/* Reset the plugin's field wrapper margins and padding. */
.form-wrapper .field {
margin: 0;
padding: 0;
}
/* Reset the plugin's form-field wrapper. */
.form-wrapper .form-field {
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
/* Reset the plugin's label styling. */
.form-wrapper .form-label,
.form-wrapper label {
margin: 0;
padding: 0;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
letter-spacing: inherit;
text-transform: none;
color: inherit;
white-space: normal;
line-height: inherit;
display: block;
margin-block-end: 0.35em;
}
.form-wrapper .form-label.inline {
/* Plugin adds .inline; keep it block so it sits above the input. */
display: block;
}
/* Reset the plugin's input wrapper. */
.form-wrapper .form-data,
.form-wrapper .form-input,
.form-wrapper .form-input-wrapper,
.form-wrapper .form-input-inner {
margin: 0;
padding: 0;
border: 0;
background: transparent;
width: auto;
max-width: none;
display: block;
}
/* Now apply our own form styling. */
.form-wrapper .field > .form-field > .form-label {
margin: 0;
}
.form-wrapper .field > .form-field > .form-input {
margin: 0;
}
/* The plugin nests each input in wrappers; they must fill their grid cell. */
.form-wrapper .field > .form-field,
.form-wrapper .field > .form-field > .form-data,
.form-wrapper .field > .form-field > .form-data > .form-input-wrapper {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
}
/*
Make name, email, and telefoon fields take equal grid column width on wider screens.
*/
.form-wrapper .field.half {
width: auto;
flex: none;
max-width: none;
}
/* Add padding below each field for breathing room. */
.form-wrapper .field {
padding-block-end: 0.75em;
}
/*
Turnstile container: the plugin emits its own wrapper; keep it
centered and spaced correctly.
*/
.form-wrapper .turnstile-container {
margin-block: 1em;
display: flex;
justify-content: center;
}
/* Status region: empty until there is something to announce. */
.form-messages:empty {
display: none;
}
.form-messages .toast,
.form-wrapper .toast {
margin-block-end: 1em;
padding: 0.85em 1em;
border-radius: var(--dkk-radius);
border-inline-start: 4px solid currentColor;
text-align: start;
font-size: 0.95em;
}
.toast-success,
.toast.green {
background: #eaf4ea;
color: var(--dkk-success);
}
.toast-error,
.toast.red {
background: #fdecea;
color: var(--dkk-error);
}
.toast-warning,
.toast.yellow {
background: #fff6e5;
color: #7a4b00;
}
.form-wrapper .buttons {
display: flex;
flex-wrap: wrap;
gap: 0.75em;
justify-content: center;
margin-block-start: 1.25em;
}
/* Submit button feedback while the request is in flight. */
.form-wrapper[aria-busy='true'] input[type='submit'],
form[aria-busy='true'] input[type='submit'] {
opacity: 0.6;
cursor: progress;
}
/*
Honeypot. Kept out of the accessibility tree and off screen rather than
`display: none`, because some bots skip hidden inputs but not positioned
ones. Real users never reach it: it is aria-hidden and not tabbable.
*/
.spam-guard {
position: absolute !important;
left: -9999px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* Turnstile widget spacing. */
.turnstile-container {
display: flex;
justify-content: center;
margin-block: 1em 0;
}
/* ==========================================================================
7. FAQ accordion
========================================================================== */
.faq__list {
max-inline-size: 45em;
margin-inline: auto;
text-align: start;
}
.faq__item {
border-block-end: 1px solid var(--dkk-border);
}
.faq__item:first-child {
border-block-start: 1px solid var(--dkk-border);
}
.faq__question {
display: flex;
align-items: center;
gap: 0.75em;
padding: 0.9em 0.25em;
cursor: pointer;
list-style: none;
}
/* Hide the default triangle in every engine. */
.faq__question::-webkit-details-marker {
display: none;
}
.faq__question::marker {
content: '';
}
.faq__question h3 {
margin: 0;
flex: 1 1 auto;
color: var(--dkk-ink);
}
.faq__question::after {
content: '';
flex: 0 0 auto;
width: 0.6em;
height: 0.6em;
border-right: 2px solid var(--dkk-green-dark);
border-bottom: 2px solid var(--dkk-green-dark);
transform: rotate(45deg);
transition: transform var(--dkk-duration-fast) var(--dkk-ease);
}
.faq__item[open] > .faq__question::after {
transform: rotate(-135deg);
}
.faq__question:hover h3 {
color: var(--dkk-green-darker);
}
.faq__answer {
padding: 0 0.25em 1.25em;
}
.faq__answer > :last-child {
margin-bottom: 0;
}
/* Smooth open/close where the browser supports animating to auto height. */
@supports (interpolate-size: allow-keywords) {
@media (prefers-reduced-motion: no-preference) {
:root {
interpolate-size: allow-keywords;
}
.faq__item::details-content {
block-size: 0;
overflow: hidden;
transition: block-size var(--dkk-duration) var(--dkk-ease),
content-visibility var(--dkk-duration) allow-discrete;
}
.faq__item[open]::details-content {
block-size: auto;
}
}
}
/* ==========================================================================
8. Gallery lightbox
========================================================================== */
.gallery article {
overflow: hidden;
}
.gallery a.image {
position: relative;
display: block;
}
.gallery a.image img {
display: block;
inline-size: 100%;
block-size: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.gallery a.image::after {
content: '';
position: absolute;
inset: 0;
background: rgba(57, 69, 75, 0);
transition: background-color var(--dkk-duration-fast) var(--dkk-ease);
}
.gallery a.image:hover::after,
.gallery a.image:focus-visible::after {
background: rgba(57, 69, 75, 0.25);
}
/* Native