/* ==========================================================================
Stad & Natuur - refresh layer
--------------------------------------------------------------------------
A scoped modernisation OVERLAY on top of the faithful carbon-copy base.
It is the LAST stylesheet loaded (after blackwhite.css) so it wins the
cascade against the vendored CSS without editing a single vendored file -
fully reversible by removing one .
Contract (read before editing):
1. KEEP THE BRAND. No font-family changes (Gravur stays). No logo changes.
Palette mirrors the existing one; we refine metrics, depth and motion.
2. NEVER use `!important` on color / background / filter here. The
high-contrast accessibility mode (.bw_mode, blackwhite.css) relies on
`!important`; because we load later but stay non-important, its rules
still win. New properties bw_mode doesn't touch (radius, shadow,
transform) are safe in both modes.
3. All motion lives behind `@media (prefers-reduced-motion: no-preference)`
and is further reset for `reduce`. Motion is also gated on `.gd-js`
(set on by the refresh script) so no-JS users never get stuck
with hidden/transformed content.
========================================================================== */
/* ---------------------------------------------------------------- tokens -- */
:root {
/* Brand palette (mirrors the vendored values; only what the overlay uses) */
--gd-green: #95ac0e; /* primary */
--gd-green-bright: #c6d300; /* bright lime: hover/focus on the dark footer */
--gd-green-dark: #7d8f0b; /* derived: button/link hover */
--gd-ink: #3f423a; /* warm near-black */
--gd-line: #e4e4e4; /* hairline */
--gd-surface: #ffffff;
--gd-surface-muted:#f6f6f6;
/* Warm-tinted shadows (rgb of --gd-ink, never pure black - keeps depth soft) */
--gd-shadow-sm: 0 1px 2px rgba(63,66,58,.08), 0 1px 3px rgba(63,66,58,.06);
--gd-shadow: 0 8px 24px -10px rgba(63,66,58,.22), 0 2px 6px -2px rgba(63,66,58,.10);
--gd-shadow-lg: 0 22px 48px -16px rgba(63,66,58,.32), 0 6px 14px -6px rgba(63,66,58,.14);
/* Radius */
--gd-radius-sm: 6px;
--gd-radius: 10px;
--gd-radius-pill: 999px;
/* Typography metrics (NB: no font-family; Gravur stays) */
--gd-text-base: 16px;
--gd-leading: 1.6;
/* Motion */
--gd-ease: cubic-bezier(.22, .61, .36, 1);
--gd-ease-out: cubic-bezier(.16, 1, .3, 1);
--gd-dur-fast: .22s;
--gd-dur: .42s;
--gd-dur-slow: .7s;
}
/* ------------------------------------------------------- base typography -- */
/* Lift the dated 14px / 0.26px body to a calmer, larger modern rhythm.
Family is untouched; headings/labels keep their own explicit sizes. */
body {
font-size: var(--gd-text-base);
line-height: var(--gd-leading);
letter-spacing: normal; /* drop the dated 0.26px tracking on body copy */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Slightly more air between paragraphs of running copy without touching
the structural margins the vendored layout depends on. */
p { line-height: var(--gd-leading); }
/* Links in body copy: keep brand green, add a gentle hover. Scoped to content
regions so it never recolors nav / buttons / chrome. */
.page-content a:not(.btn):not([class*="button"]),
.content a:not(.btn):not([class*="button"]) {
transition: color var(--gd-dur-fast) var(--gd-ease);
}
.page-content a:not(.btn):not([class*="button"]):hover,
.content a:not(.btn):not([class*="button"]):hover {
color: var(--gd-green-dark);
}
/* Consistent, visible keyboard focus everywhere (a11y). Uses outline only -
no layout shift, survives bw_mode. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--gd-green);
outline-offset: 2px;
border-radius: 2px;
}
/* ---------------------------------------------------- motion primitives -- */
/* The motion SYSTEM. Classes are applied by /assets/refresh.js at runtime;
they are dormant (no visual effect) until that script runs, and fully
disabled for users who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
/* Scroll reveal - elements fade + rise into place as they enter the viewport.
Gated on .gd-js so content is never hidden before/without JS. */
.gd-js .gd-reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity var(--gd-dur-slow) var(--gd-ease-out),
transform var(--gd-dur-slow) var(--gd-ease-out);
will-change: opacity, transform;
}
.gd-js .gd-reveal.is-visible {
opacity: 1;
transform: none;
}
/* Ken-Burns - slow, calm zoom keyframes for the hero photographic layer
(applied to .gd-hero-media-zoom further down, gated on .gd-js). */
@keyframes gd-kenburns {
from { transform: scale(1); transform-origin: 50% 50%; }
to { transform: scale(1.075); transform-origin: 50% 42%; }
}
}
/* Once a reveal has played it must never re-hide (e.g. resize recalcs). */
.gd-js .gd-reveal.is-visible { opacity: 1 !important; transform: none !important; }
/* ----------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.gd-js .gd-reveal { opacity: 1 !important; transform: none !important; }
}
/* ====================================================== buttons & forms == */
/* The vendored .btn is already green/white/uppercase with radius 5px; we add
depth, a clear hover/active and smooth motion. Colors stay non-!important so
.bw_mode wins. */
.btn {
border-radius: var(--gd-radius-sm);
transition: background-color var(--gd-dur-fast) var(--gd-ease),
transform var(--gd-dur-fast) var(--gd-ease),
box-shadow var(--gd-dur-fast) var(--gd-ease);
will-change: transform;
}
.btn:hover {
background-color: var(--gd-green-dark);
transform: translateY(-1px);
box-shadow: var(--gd-shadow);
color: #fff;
}
.btn:active { transform: translateY(0); box-shadow: var(--gd-shadow-sm); }
/* The Q&A accordion re-uses .btn as a white header row - don't give that a green
hover; keep it a quiet surface tint instead. */
.qa-accordion .qa-header .btn:hover {
background-color: var(--gd-surface-muted);
color: #000;
transform: none;
box-shadow: none;
}
/* The Mailchimp newsletter submit is a primary conversion CTA but carries its
own `.button` class, so it misses the .btn treatment above and would sit flat
while every other button lifts. Give it the same modern hover. The id matches
the vendored rule's specificity (#mc_embed_signup input.button); still
non-!important so .bw_mode wins. */
#mc_embed_signup input.button {
border-radius: var(--gd-radius-sm);
transition: background-color var(--gd-dur-fast) var(--gd-ease),
transform var(--gd-dur-fast) var(--gd-ease),
box-shadow var(--gd-dur-fast) var(--gd-ease);
will-change: transform;
}
#mc_embed_signup input.button:hover {
background-color: var(--gd-green-dark);
transform: translateY(-1px);
box-shadow: var(--gd-shadow);
color: #fff;
}
#mc_embed_signup input.button:active { transform: translateY(0); box-shadow: var(--gd-shadow-sm); }
/* The "Bekijk alle activiteiten" view-all link is an underlined text CTA (not a
button); give it the same gentle branded hover as body links so it doesn't
read as dead next to the now-interactive buttons. */
.all-activities { transition: color var(--gd-dur-fast) var(--gd-ease); }
.all-activities:hover { color: var(--gd-green-dark); }
/* Text inputs, selects and textareas: a calm, consistent field with a clear
focus state. Scoped to text-like controls so checkboxes/radios/buttons are
untouched. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="date"],
select,
textarea {
border: 1px solid var(--gd-line);
border-radius: var(--gd-radius-sm);
transition: border-color var(--gd-dur-fast) var(--gd-ease),
box-shadow var(--gd-dur-fast) var(--gd-ease);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
border-color: var(--gd-green);
box-shadow: 0 0 0 3px rgba(149, 172, 14, .18);
outline: none;
}
/* ========================================================= cards & tiles == */
/* Modern editorial cards: round + soften the imagery, float it on a warm
shadow, and add a calm lift + photo-zoom on hover. One emphasis device per
card (no dotted-border + shadow stacking). Photo-zoom + lift are MOTION, so
they sit behind prefers-reduced-motion: no-preference; the shadow change is
not motion and stays in both modes. */
/* Activity cards (.event-item) - image is a bg-image on the inner . */
.activities-list .event-item { transition: transform var(--gd-dur) var(--gd-ease); }
.activities-list .event-item .img-cover {
border-radius: var(--gd-radius);
overflow: hidden;
box-shadow: var(--gd-shadow-sm);
transition: box-shadow var(--gd-dur) var(--gd-ease);
}
.activities-list .event-item .img-cover > a {
transition: transform var(--gd-dur-slow) var(--gd-ease-out);
will-change: transform;
}
.activities-list .event-item:hover .img-cover { box-shadow: var(--gd-shadow); }
/* Location slider cards (.slider-item) - real ![]()
inside .img-container. */
.home-locations-slider .slider-item a {
display: block;
overflow: hidden;
border-radius: var(--gd-radius);
box-shadow: var(--gd-shadow-sm);
transition: box-shadow var(--gd-dur) var(--gd-ease), transform var(--gd-dur) var(--gd-ease);
}
.home-locations-slider .slider-item .img-container { border-radius: var(--gd-radius) var(--gd-radius) 0 0; }
.home-locations-slider .slider-item .title { border-radius: 0 0 var(--gd-radius) var(--gd-radius); }
.home-locations-slider .slider-item img {
transition: transform var(--gd-dur-slow) var(--gd-ease-out);
will-change: transform;
}
.home-locations-slider .slider-item a:hover { box-shadow: var(--gd-shadow); }
/* Promo banners (.banner): a bg-image tile with a text label; lift + soft shadow.
No inner zoom here. The image is a CSS background (there is no ![]()
to scale)
and the tile carries its own label, so scaling the element would scale the
text too. Lift + shadow is the single, complete emphasis device. */
.banners .banner {
border-radius: var(--gd-radius);
transition: box-shadow var(--gd-dur) var(--gd-ease), transform var(--gd-dur) var(--gd-ease);
}
.banners .banner:hover { box-shadow: var(--gd-shadow); }
@media (prefers-reduced-motion: no-preference) {
.activities-list .event-item:hover { transform: translateY(-4px); }
.activities-list .event-item:hover .img-cover > a { transform: scale(1.06); }
.home-locations-slider .slider-item a:hover { transform: translateY(-4px); }
.home-locations-slider .slider-item a:hover img { transform: scale(1.06); }
.banners .banner:hover { transform: translateY(-3px); }
}
/* =============================================================== hero ===== */
/* Let the photography (the brand's strongest asset) breathe and move. Taller,
immersive frame; a subtle scrim for depth + nav legibility; and a JS-injected
nested media layer (refresh.js) that carries Ken-Burns (inner, CSS) and
scroll-parallax (outer, JS) without the two transforms fighting. The section
keeps its own inline background-image as the no-JS fallback. */
.top-image-container {
height: clamp(460px, 56vh, 600px);
position: relative;
overflow: hidden;
}
.top-image-container > .container { position: relative; z-index: 2; }
/* Outer layer → scroll-parallax (JS sets translateY). Oversized so the shift
never reveals an edge. */
.gd-hero-media {
position: absolute;
left: 0; right: 0; top: -10%; height: 120%;
z-index: 0;
overflow: hidden;
will-change: transform;
}
/* Inner layer → Ken-Burns (CSS scale). Bleed covers the zoom. */
.gd-hero-media-zoom {
position: absolute;
inset: -4%;
background-size: cover;
background-position: 50% 50%;
will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
.gd-js .gd-hero-media-zoom { animation: gd-kenburns 26s ease-in-out infinite alternate; }
}
/* Depth + nav legibility scrim. Kept off in high-contrast mode. */
.top-image-container::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to bottom,
rgba(31, 33, 28, .30) 0%,
rgba(31, 33, 28, 0) 24%,
rgba(31, 33, 28, 0) 72%,
rgba(31, 33, 28, .16) 100%);
}
.bw_mode .top-image-container::after { display: none; }
/* Slogan + weather balls: lift them off the busy photo with a soft shadow and
give the slogan a gentle interactive cue. */
.top-image-slogan { box-shadow: var(--gd-shadow-lg); transition: transform var(--gd-dur) var(--gd-ease); }
.top-image-slogan-container .weather-ball { box-shadow: var(--gd-shadow); }
@media (prefers-reduced-motion: no-preference) {
.top-image-slogan-container:hover .top-image-slogan { transform: scale(1.04); }
}
/* ============================================= sections, dividers, titles == */
/* Modernise the signature dated device - the 4px DOTTED green rules - into a
clean center-fading green hairline (border-image gradient; degrades to a
solid green line if border-image is unsupported). Same green, current feel. */
.section-block.top-border {
border-top-width: 2px;
border-top-style: solid;
border-image: linear-gradient(90deg, transparent, var(--gd-green) 18%, var(--gd-green) 82%, transparent) 1;
}
.section-block.bottom-border {
border-bottom-width: 2px;
border-bottom-style: solid;
border-image: linear-gradient(90deg, transparent, var(--gd-green) 18%, var(--gd-green) 82%, transparent) 1;
}
.img-with-text-block.top-border .text-part .text-part-container {
border-top-width: 2px;
border-top-style: solid;
border-image: linear-gradient(90deg, transparent, var(--gd-green) 18%, var(--gd-green) 82%, transparent) 1;
}
.img-with-text-block.bottom-border .text-part .text-part-container {
border-bottom-width: 2px;
border-bottom-style: solid;
border-image: linear-gradient(90deg, transparent, var(--gd-green) 18%, var(--gd-green) 82%, transparent) 1;
}
.img-with-text-block.full-border .text-part .text-part-container {
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-image: linear-gradient(90deg, transparent, var(--gd-green) 18%, var(--gd-green) 82%, transparent) 1;
}
/* High-contrast mode: a border-image gradient would override the vendored
`.bw_mode { border-color:#000 }`, leaving these rules green. Drop the gradient
in bw_mode so the solid black border shows - a clean high-contrast hairline. */
.bw_mode .section-block.top-border,
.bw_mode .section-block.bottom-border,
.bw_mode .img-with-text-block.top-border .text-part .text-part-container,
.bw_mode .img-with-text-block.bottom-border .text-part .text-part-container,
.bw_mode .img-with-text-block.full-border .text-part .text-part-container {
border-image: none;
}
/* Section titles: warm near-black instead of harsh pure black, plus a small
centered green accent that ties the brand colour into every section head. */
.section-head .title { color: var(--gd-ink); }
.section-head .title::after {
content: '';
display: block;
width: 46px;
height: 3px;
margin: 16px auto 0;
background: var(--gd-green);
border-radius: var(--gd-radius-pill);
}
/* Headings that already carry the brand's own playful animal icon don't also
need the accent bar - that stacks two decorative devices on one short
heading. The icon is the native brand mark; let it stand alone. The accent
bar still serves the ~90% of section heads that have no animal. */
.section-head .title.with-animal::after { display: none; }
/* High-contrast mode: the accent bar must not stay brand-green. Blacken it so it
keeps the section-head rhythm at full contrast (like the vendored bw_mode
blackens borders). More specific than the rule above, so no !important. */
.bw_mode .section-head .title::after { background: #000; }
/* Intro / lead text blocks were locked at the dated 14px / 0.26px - lift them to
the new reading rhythm (font family untouched). */
.centered-block {
font-size: 16px;
line-height: 1.6;
letter-spacing: normal;
max-width: 680px;
}
/* ====================================================== news scannability == */
/* Turn the dense homepage news list into a scannable feed: clear separators,
calmer tracking, a readable intro and an interactive title. No copy changes -
the news content is reproduced verbatim and must not be rewritten. */
.latest-news .news-item {
letter-spacing: normal;
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid var(--gd-line);
}
.latest-news .news-item:last-child { border-bottom: 0; padding-bottom: 0; }
.latest-news .news-title { transition: color var(--gd-dur-fast) var(--gd-ease); }
.latest-news .news-title:hover { color: var(--gd-green-dark); text-decoration: none; }
.latest-news .news-intro { color: var(--gd-ink); line-height: 1.6; }
.latest-news .news-intro .date { letter-spacing: .04em; margin-right: 2px; }
/* ============================================================ header ====== */
/* Make the primary nav sticky so it - and the contrast toggle - stay reachable
on long municipal pages (a direct "gebruiksvriendelijkheid" win). The bar was
in-flow with no background; sticking it over the hero photo needs an explicit
white surface + a hairline, plus a soft shadow once the page is scrolled (the
.gd-scrolled state is toggled by refresh.js). position:sticky is pure CSS, so
the bar sticks even without JS; only the elevated shadow waits for the script.
No transform / will-change here on purpose: either would make the fixed mobile
off-canvas position against the header instead of the viewport. */
header {
position: sticky;
top: 0;
z-index: 100;
background: var(--gd-surface);
border-bottom: 1px solid var(--gd-line);
transition: box-shadow var(--gd-dur) var(--gd-ease);
}
.gd-scrolled header { box-shadow: var(--gd-shadow-sm); }
/* Anchored sections (the nav is full of #ontdek / #locaties / #het-gebied links)
must clear the sticky bar instead of landing beneath it. */
html { scroll-padding-top: 100px; }
/* Dropdown panels: trade the harsh near-black drop shadow for a soft warm one,
round the corners and tie in the brand with a thin green cap. */
header ul.nav li .dropdown-menu {
box-shadow: var(--gd-shadow);
border-top: 2px solid var(--gd-green);
border-radius: var(--gd-radius-sm);
}
header ul.nav li .dropdown-menu > li > a {
transition: color var(--gd-dur-fast) var(--gd-ease);
}
/* Keyboard focus on the nav. The vendored CSS sets `outline:none` on these with
enough specificity to beat the global focus ring, so restate it here - scoped
and a touch more specific - for visible keyboard navigation. */
header ul.nav a:focus-visible,
header .account-menu a:focus-visible,
header .mobile-nav-container .menu-toggle:focus-visible,
header .mobile-nav-container a.close-menu:focus-visible {
outline: 3px solid var(--gd-green);
outline-offset: 2px;
}
/* ============================================================ footer ====== */
/* Dark brand band (#3f423a). De-date the dotted title rules into a quiet
hairline, give the links a clear branded hover, and add gentle affordance to
the social icons. Brighter lime for hover/focus so it reads on the dark bg. */
footer .footer-section .title {
border-bottom: 1px solid rgba(255, 255, 255, .18);
}
footer .footer-links li a {
transition: color var(--gd-dur-fast) var(--gd-ease);
}
footer .footer-links li a:hover {
color: var(--gd-green-bright);
text-decoration: none;
}
footer a:focus-visible { outline-color: var(--gd-green-bright); }
.social-links a {
transition: color var(--gd-dur-fast) var(--gd-ease),
opacity var(--gd-dur-fast) var(--gd-ease),
transform var(--gd-dur-fast) var(--gd-ease);
}
.social-links a:hover { opacity: .82; }
.social-links a:not(.social):hover { color: var(--gd-green-bright); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
.social-links a:hover { transform: translateY(-2px); }
}