@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700&display=swap'); /* Gravity Forms Customizations */ #gform_submit_button_1{ color: #fff !important; border-width: 0px !important; border-radius: 5px; font-size: 1.3rem; font-family: 'Sora', Helvetica, Arial, Lucida, sans-serif !important; text-transform: uppercase !important; background-color: #2b2b2b !important; padding:1rem; cursor: pointer !important } .gform_validation_errors { display: none !important; } /* ===== Stadswandelingen Utrecht — styleguide (geport uit static/styleguide) ===== */ /* --- tokens.css --- */ /* ===================================================================== Stadswandelingen Utrecht — Design Tokens Bron: Huisstijlhandboek v1.6 + Briefing webbouwer Merkkompas: licht, lucht, stad, water, beweging en kennis. Dit bestand bevat ALLE merkvariabelen (kleur, type, ruimte, vorm). Pas hier waarden aan; base.css en components.css erven hiervan. ===================================================================== */ :root { /* ------------------------------------------------------------------- KLEUR — palet uit de huisstijl ------------------------------------------------------------------- */ --su-blauw-krachtig: #2468B4; /* Hoofdkleur: logo, primaire knoppen, accenten */ --su-blauw-middel: #5B93D0; /* Steunkleur: secundaire accenten, vlakken */ --su-blauw-lucht: #A9CBEA; /* Steunkleur: subtiele vlakken, lijnen */ --su-blauw-ijs: #E7F2FB; /* Achtergrond: rustige informatievlakken */ --su-blauw-tekst: #163A63; /* Tekstkleur: vervangt zwart (lange tekst/kop) */ --su-wit: #FFFFFF; /* Ruimte, rust, contrast */ /* Afgeleide tinten (alleen voor states/hover — blijven binnen het merk) */ --su-blauw-krachtig-hover: #1d568f; /* donkerder voor hover op primaire knop */ --su-blauw-krachtig-active: #18497a; /* nog donkerder voor active/pressed */ --su-rand-zacht: #cfe2f4; /* zachte rand/scheidingslijn (licht) */ /* Semantische rollen — gebruik deze in de UI, niet de ruwe kleuren */ --su-kleur-tekst: var(--su-blauw-tekst); --su-kleur-tekst-zacht: #41618a; /* secundaire tekst, labels */ --su-kleur-achtergrond: var(--su-wit); --su-kleur-achtergrond-alt: var(--su-blauw-ijs); /* afwisselende secties */ --su-kleur-primair: var(--su-blauw-krachtig); --su-kleur-op-primair: var(--su-wit); /* tekst op primaire vlakken */ --su-kleur-link: var(--su-blauw-krachtig); --su-kleur-link-hover: var(--su-blauw-krachtig-active); --su-kleur-focus: var(--su-blauw-krachtig); /* ------------------------------------------------------------------- TYPOGRAFIE — Source Sans 3 (basis), College Semi = ALLEEN logo ------------------------------------------------------------------- */ --su-font-basis: "Source Sans 3", Arial, "Aptos", system-ui, sans-serif; /* Fluïde typeschaal (clamp: mobiel → desktop), conform huisstijltabel. Verhoudingen, ruime regelafstand en leesbaarheid blijven leidend. Doelgroep is gemiddeld wat ouder: leesbaarheid > compactheid. */ --su-tekst-h1: clamp(2.25rem, 1.30rem + 3.8vw, 3.50rem); /* 36 → 56 px */ --su-tekst-h2: clamp(1.75rem, 1.30rem + 1.9vw, 2.50rem); /* 28 → 40 px */ --su-tekst-h3: clamp(1.375rem, 1.18rem + 0.8vw, 1.75rem);/* 22 → 28 px */ --su-tekst-h4: clamp(1.1875rem, 1.13rem + 0.3vw, 1.375rem);/* 19 → 22 px */ --su-tekst-body: clamp(1.1875rem, 1.15rem + 0.2vw, 1.3125rem);/* 19 → 21 px */ --su-tekst-klein: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16 → 18 px */ --su-tekst-knop: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);/* 17 → 19 px */ /* Gewichten */ --su-gewicht-regular: 400; --su-gewicht-medium: 500; --su-gewicht-semibold: 600; --su-gewicht-bold: 700; /* Regelafstand (line-height) per type */ --su-lh-h1: 1.12; --su-lh-h2: 1.20; --su-lh-h3: 1.28; --su-lh-h4: 1.35; --su-lh-body: 1.2; --su-lh-klein: 1.3; --su-lh-knop: 1.20; /* Leesbreedte voor lopende tekst (rustig, niet te breed) */ --su-leesbreedte: 70ch; /* ------------------------------------------------------------------- RUIMTE — spacing-schaal (ruime, gecontroleerde witruimte) ------------------------------------------------------------------- */ --su-ruimte-3xs: 0.25rem; /* 4px */ --su-ruimte-2xs: 0.5rem; /* 8px */ --su-ruimte-xs: 0.75rem; /* 12px */ --su-ruimte-sm: 1rem; /* 16px */ --su-ruimte-md: 1.5rem; /* 24px */ --su-ruimte-lg: 2.5rem; /* 40px */ --su-ruimte-xl: 4rem; /* 64px */ --su-ruimte-2xl: 6rem; /* 96px */ /* Sectiepadding (verticale ademruimte tussen blokken) */ --su-sectie-padding: clamp(3rem, 2rem + 5vw, 6rem); /* Maximale contentbreedte van de pagina */ --su-container: 75rem; /* 1200px */ --su-container-smal: 48rem; /* 768px — voor langere leesteksten */ /* ------------------------------------------------------------------- VORM — radius, randen, schaduw (subtiel, geen harde zakelijkheid) ------------------------------------------------------------------- */ /* Afgestemd op de huidige live site: kaarten/afbeeldingen 10px, primaire knoppen volledig afgerond (pill, daar 50px ≈ pill). */ --su-radius-sm: 6px; --su-radius-md: 10px; /* standaard voor kaarten, velden, vlakken (= live site) */ --su-radius-lg: 12px; /* iets ruimer, optioneel voor grote panelen */ --su-radius-pil: 999px; /* knoppen en badges */ --su-rand-dikte: 1px; --su-rand-kleur: var(--su-rand-zacht); /* Schaduwen — licht en zacht, nooit hard/dramatisch */ --su-schaduw-sm: 0 1px 2px rgba(22, 58, 99, 0.06), 0 1px 3px rgba(22, 58, 99, 0.08); --su-schaduw-md: 0 4px 12px rgba(22, 58, 99, 0.08), 0 2px 6px rgba(22, 58, 99, 0.06); --su-schaduw-lg: 0 12px 32px rgba(22, 58, 99, 0.10), 0 4px 12px rgba(22, 58, 99, 0.07); /* Focus-ring (toegankelijkheid — duidelijk zichtbaar) */ --su-focus-ring: 0 0 0 3px var(--su-wit), 0 0 0 6px var(--su-blauw-krachtig); /* ------------------------------------------------------------------- OVERIG ------------------------------------------------------------------- */ --su-transitie: 160ms ease; } /* --- base.css --- */ /* ===================================================================== Stadswandelingen Utrecht — Base / Foundation Reset, typografie, koppen, links, lopende tekst. Vereist: tokens.css (laad dit ervoor). Font laden (Source Sans 3) — kies één: 1) Google Fonts in de : 2) Of zelf-gehost via @font-face (aanbevolen voor snelheid/privacy). College Semi wordt NIET als webfont geladen — alleen voor het logo (SVG). ===================================================================== */ /* ------- Reset (compact, modern) ------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { font-family: var(--su-font-basis); font-size: var(--su-tekst-body); font-weight: var(--su-gewicht-regular); line-height: var(--su-lh-body); color: var(--su-kleur-tekst); background-color: var(--su-kleur-achtergrond); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } /* ------- Koppen ------- */ h1, h2, h3, h4 { color: var(--su-kleur-tekst); text-wrap: balance; /* nette regelafbreking in koppen */ } h1 { font-size: var(--su-tekst-h1); font-weight: var(--su-gewicht-bold); line-height: var(--su-lh-h1); letter-spacing: -0.01em; } h2 { font-size: var(--su-tekst-h2); font-weight: var(--su-gewicht-bold); line-height: var(--su-lh-h2); letter-spacing: -0.005em; } h3 { font-size: var(--su-tekst-h3); font-weight: var(--su-gewicht-semibold); line-height: var(--su-lh-h3); } h4 { font-size: var(--su-tekst-h4); font-weight: var(--su-gewicht-semibold); line-height: var(--su-lh-h4); } /* ------- Lopende tekst ------- */ p, ul, ol, blockquote { max-width: var(--su-leesbreedte); } p { margin-block: 0 var(--su-ruimte-sm); } /* Verticaal ritme: ruimte tussen kop en volgende blok */ * + h2 { margin-block-start: var(--su-ruimte-xl); } * + h3 { margin-block-start: var(--su-ruimte-lg); } * + h4 { margin-block-start: var(--su-ruimte-md); } h1 + *, h2 + *, h3 + *, h4 + * { margin-block-start: var(--su-ruimte-sm); } /* ------- Links ------- */ a { color: var(--su-kleur-link); text-decoration-color: color-mix(in srgb, var(--su-kleur-link) 40%, transparent); text-underline-offset: 0.15em; transition: color var(--su-transitie), text-decoration-color var(--su-transitie); } a:hover { color: var(--su-kleur-link-hover); text-decoration-color: currentColor; } /* ------- Tekstaccenten ------- */ strong, b { font-weight: var(--su-gewicht-semibold); } small, .su-klein { font-size: var(--su-tekst-klein); line-height: var(--su-lh-klein); } .su-label { display: block; font-size: 0.875rem; font-weight: var(--su-gewicht-semibold); line-height: 1.25; text-transform: uppercase; letter-spacing: 0.09em; color: var(--su-kleur-tekst-zacht); margin-block-end: var(--su-ruimte-3xs); } /* Subkop ('eyebrow') plakt direct boven de heading eronder */ .su-label + :is(h1, h2, h3, h4) { margin-block-start: 0; } /* Merkzin / tagline — los te gebruiken, niet standaard onder het logo */ .su-merkzin { font-weight: var(--su-gewicht-semibold); color: var(--su-kleur-primair); } /* ------- Lijsten ------- */ ul, ol { padding-inline-start: 1.25em; } li { margin-block: 0.25em; } li::marker { color: var(--su-blauw-middel); } /* ------- Citaat ------- */ blockquote { border-inline-start: 4px solid var(--su-blauw-lucht); padding-inline-start: var(--su-ruimte-md); color: var(--su-kleur-tekst-zacht); font-size: var(--su-tekst-h4); line-height: var(--su-lh-h4); } /* ------- Scheidingslijn ------- */ hr { border: none; border-top: var(--su-rand-dikte) solid var(--su-rand-kleur); margin-block: var(--su-ruimte-lg); } /* ------- Selectie & focus (toegankelijkheid) ------- */ ::selection { background: var(--su-blauw-lucht); color: var(--su-blauw-tekst); } :focus-visible { outline: none; box-shadow: var(--su-focus-ring); border-radius: var(--su-radius-sm); } /* ------- Layout-helpers ------- */ .su-container { width: 100%; max-width: var(--su-container); margin-inline: auto; padding-inline: var(--su-ruimte-md); } .su-container--smal { max-width: var(--su-container-smal); } .su-sectie { padding-block: var(--su-sectie-padding); } .su-sectie--alt { background-color: var(--su-kleur-achtergrond-alt); } /* = ijsblauw */ /* ------- Sectie-achtergronden — blauwvarianten ------- Wissel lichte en donkere banden af voor rust en ritme. Aanbevolen volgorde, bv.: wit → ijs → wit → lucht → krachtig → wit. Lichte banden (wit/ijs/lucht) houden de standaard tekstkleur (tekstblauw). Donkere banden (middel/krachtig) krijgen witte tekst. */ .su-sectie--wit { background-color: var(--su-wit); } .su-sectie--ijs { background-color: var(--su-blauw-ijs); } .su-sectie--lucht { background-color: var(--su-blauw-lucht); } .su-sectie--middel { background-color: var(--su-blauw-middel); } .su-sectie--krachtig { background-color: var(--su-blauw-krachtig); } /* Lucht is licht maar iets dieper: een subtiele scheidingslijn helpt. */ .su-sectie--lucht { box-shadow: inset 0 1px 0 rgba(22,58,99,.08), inset 0 -1px 0 rgba(22,58,99,.08); } /* Diepte-effect: koppen lijken uit de blauwe achtergrond gesneden (platte 'letterpress'-schaduw onder de tekst, lichter dan de band). */ .su-sectie--ijs :is(h1, h2, h3, h4), .su-sectie--ijs .su-label, .su-sectie--lucht :is(h1, h2, h3, h4), .su-sectie--lucht .su-label { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85); } /* Donkere banden: witte tekst + aangepaste accenten voor leesbaarheid */ .su-sectie--middel, .su-sectie--krachtig { color: var(--su-wit); } .su-sectie--middel :is(h1, h2, h3, h4), .su-sectie--krachtig :is(h1, h2, h3, h4) { color: var(--su-wit); } .su-sectie--middel .su-label, .su-sectie--krachtig .su-label, .su-sectie--middel .su-merkzin, .su-sectie--krachtig .su-merkzin { color: var(--su-blauw-lucht); } /* Tekstlinks op donkere banden: luchtblauw i.p.v. krachtig blauw */ .su-sectie--middel a:not(.su-knop):not(.su-link-cta), .su-sectie--krachtig a:not(.su-knop):not(.su-link-cta) { color: var(--su-blauw-lucht); } .su-sectie--middel a:not(.su-knop):hover, .su-sectie--krachtig a:not(.su-knop):hover { color: var(--su-wit); } /* Op donkere banden geeft de witte knop (su-knop--op-donker) het beste contrast. Het ijsblauwe informatievlak (.su-vlak) blijft licht binnen een donkere band. */ /* Rustig informatievlak (ijsblauw) */ .su-vlak { background-color: var(--su-kleur-achtergrond-alt); border-radius: var(--su-radius-md); padding: var(--su-ruimte-lg); } /* ------- Landmark-patronen ------- Subtiele repeating achtergrond met Utrechtse landmarks (Domtoren, trapgevel, bruggetje, bootje) over de bandkleur. Donkere variant voor lichte banden, lichte variant voor donkere banden. */ .su-patroon-donker, .su-patroon-licht { background-repeat: repeat; background-size: 480px auto; } .su-patroon-donker { background-image: url(../images/patroon-landmarks-donker.svg); } .su-patroon-licht { background-image: url(../images/patroon-landmarks-licht.svg); } /* --- components.css --- */ /* ===================================================================== Stadswandelingen Utrecht — Componenten Knoppen, badges, kaarten, formulier-velden (Recras-stijlbasis). Vereist: tokens.css + base.css. ===================================================================== */ /* ===================================================================== LOGO Plaatsing van het SVG-logo met een vaste, consequente hoogte. Stuur de grootte via de hoogte (het logo schaalt mee in breedte). Gebruik de blauwe variant op licht, de witte variant op donker. ===================================================================== */ .su-logo { display: inline-block; line-height: 0; /* geen extra ruimte onder de inline afbeelding */ } .su-logo__img { display: block; width: auto; height: var(--su-logo-hoogte, 2.75rem); /* ~44px standaard, prettig in een header */ } /* Maatvarianten */ .su-logo--klein { --su-logo-hoogte: 2rem; } /* compacte/sticky header */ .su-logo--groot { --su-logo-hoogte: 4.5rem; } /* hero of footer */ /* ===================================================================== KNOPPEN Conform huisstijl: rustig, professioneel, consequent, goed zichtbaar. - Primair = krachtig blauw (de "Vraag wandeling aan"-knop) - Secundair = outline in krachtig blauw - Subtiel = zachte ijsblauwe knop voor minder nadruk ===================================================================== */ .su-knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-size: var(--su-tekst-knop); font-weight: var(--su-gewicht-semibold); line-height: var(--su-lh-knop); text-decoration: none; text-align: center; cursor: pointer; padding: 0.7em 1.5em; border-radius: var(--su-radius-pil); border: 2px solid transparent; transition: background-color var(--su-transitie), border-color var(--su-transitie), color var(--su-transitie), box-shadow var(--su-transitie), transform var(--su-transitie); } .su-knop:active { transform: translateY(1px); } /* Primair — hoofd-CTA */ .su-knop--primair { background-color: var(--su-kleur-primair); color: var(--su-kleur-op-primair); box-shadow: var(--su-schaduw-sm); } .su-knop--primair:hover { background-color: var(--su-blauw-krachtig-hover); color: var(--su-wit); box-shadow: var(--su-schaduw-md); } .su-knop--primair:active { background-color: var(--su-blauw-krachtig-active); } /* Secundair — outline */ .su-knop--secundair { background-color: transparent; color: var(--su-kleur-primair); border-color: var(--su-kleur-primair); } .su-knop--secundair:hover { background-color: var(--su-kleur-primair); color: var(--su-wit); } /* Subtiel — zacht ijsblauw, voor lagere nadruk */ .su-knop--subtiel { background-color: var(--su-blauw-ijs); color: var(--su-blauw-tekst); border-color: var(--su-rand-zacht); } .su-knop--subtiel:hover { background-color: var(--su-blauw-lucht); color: var(--su-blauw-tekst); } /* Op donkere/blauwe achtergrond (bv. in hero of footer) */ .su-knop--op-donker { background-color: var(--su-wit); color: var(--su-kleur-primair); } .su-knop--op-donker:hover { background-color: var(--su-blauw-ijs); } /* Maten */ .su-knop--groot { padding: 0.9em 2em; } .su-knop--klein { padding: 0.5em 1.1em; font-size: var(--su-tekst-klein); } .su-knop:disabled, .su-knop[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Tekstlink-knop (call-to-action zonder vlak). Inline zodat 'ie meevloeit met de excerpt-tekst; white-space:nowrap houdt tekst + pijl als geheel bij elkaar (wipt netjes samen naar de volgende regel i.p.v. mid-link te breken). */ .su-link-cta { display: inline; white-space: nowrap; font-weight: var(--su-gewicht-semibold); color: var(--su-kleur-primair); text-decoration: none; } .su-link-cta:hover { color: var(--su-blauw-krachtig-active); } .su-link-cta::after { content: "\00a0\2192"; display: inline-block; transition: transform var(--su-transitie); } .su-link-cta:hover::after { transform: translateX(3px); } /* ===================================================================== BADGE / LABEL-CHIP Bv. taal, specialisatie, thema bij een wandeling. ===================================================================== */ .su-badge { display: inline-block; font-size: var(--su-tekst-klein); font-weight: var(--su-gewicht-medium); line-height: 1.2; padding: 0.3em 0.75em; border-radius: var(--su-radius-pil); background-color: var(--su-blauw-ijs); color: var(--su-blauw-tekst); border: 1px solid var(--su-rand-zacht); } .su-badge--primair { background-color: var(--su-kleur-primair); color: var(--su-wit); border-color: transparent; } /* ===================================================================== KAART — voor wandelingen, gidsen, blogs (tegels) ===================================================================== */ .su-kaart { display: flex; flex-direction: column; background-color: var(--su-wit); border: var(--su-rand-dikte) solid var(--su-rand-kleur); border-radius: var(--su-radius-md); /* 10px — gelijk aan de huidige site */ overflow: hidden; box-shadow: var(--su-schaduw-sm); transition: box-shadow var(--su-transitie), transform var(--su-transitie); } .su-kaart:hover { box-shadow: var(--su-schaduw-md); transform: translateY(-2px); } .su-kaart__beeld { aspect-ratio: 3 / 2; /* vast beeldformaat = rustige, gelijke uitsnedes */ object-fit: cover; width: 100%; } .su-kaart__body { display: flex; flex-direction: column; gap: var(--su-ruimte-2xs); padding: var(--su-ruimte-md); } .su-kaart__body p { margin: 0; } .su-kaart__footer { margin-top: auto; padding-top: var(--su-ruimte-sm); } /* Eenvoudig responsive raster voor kaarten */ .su-raster { display: grid; gap: var(--su-ruimte-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } /* ===================================================================== FORMULIER-VELDEN — stijlbasis zodat het Recras-formulier visueel aansluit (Source Sans 3, tekstblauw, krachtig blauw knop). ===================================================================== */ .su-veld { display: flex; flex-direction: column; gap: var(--su-ruimte-3xs); margin-block-end: var(--su-ruimte-sm); } .su-veld__label { font-size: var(--su-tekst-klein); font-weight: var(--su-gewicht-semibold); color: var(--su-blauw-tekst); } .su-veld__label .su-verplicht { color: var(--su-blauw-krachtig); } .su-input, .su-textarea, .su-select { width: 100%; font-size: var(--su-tekst-body); color: var(--su-blauw-tekst); background-color: var(--su-wit); padding: 0.6em 0.8em; border: var(--su-rand-dikte) solid var(--su-rand-zacht); border-radius: var(--su-radius-md); transition: border-color var(--su-transitie), box-shadow var(--su-transitie); } .su-input::placeholder, .su-textarea::placeholder { color: var(--su-kleur-tekst-zacht); opacity: 0.7; } .su-input:focus-visible, .su-textarea:focus-visible, .su-select:focus-visible { outline: none; border-color: var(--su-blauw-krachtig); box-shadow: 0 0 0 3px color-mix(in srgb, var(--su-blauw-krachtig) 22%, transparent); } .su-textarea { min-height: 7rem; resize: vertical; } /* Foutmelding — rustig en helder (binnen de blauwtinten, geen schreeuwerig rood) */ .su-veld--fout .su-input, .su-veld--fout .su-textarea, .su-veld--fout .su-select { border-color: #b4452f; /* gedempt baksteenrood, alleen functioneel */ } .su-veld__fout { font-size: var(--su-tekst-klein); color: #b4452f; } /* Bevestiging na verzending */ .su-melding { padding: var(--su-ruimte-md); border-radius: var(--su-radius-md); background-color: var(--su-blauw-ijs); border: 1px solid var(--su-rand-zacht); color: var(--su-blauw-tekst); } /* ===================================================================== HULPKLASSEN ===================================================================== */ .su-skip-link { position: absolute; left: -9999px; top: 0; background: var(--su-blauw-krachtig); color: var(--su-wit); padding: var(--su-ruimte-2xs) var(--su-ruimte-sm); border-radius: 0 0 var(--su-radius-sm) 0; z-index: 100; } .su-skip-link:focus { left: 0; } .su-visueel-verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .su-stack > * + * { margin-block-start: var(--su-ruimte-sm); } .su-stack--ruim > * + * { margin-block-start: var(--su-ruimte-lg); } .su-knoprij { display: flex; flex-wrap: wrap; gap: var(--su-ruimte-sm); align-items: center; } /* --- wireframe page-specifieke layout --- */ /* ===================================================================== PAGINA-SPECIFIEKE LAYOUT (wireframe) Alleen page-level opbouw die niet in de component-CSS zit: header, hero, footer, rasters. Alles op merk-tokens. ===================================================================== */ /* ---- Wireframe-label (subtiel, rechtsboven) ---- */ .wf-badge { position: fixed; top: .6rem; right: .6rem; z-index: 200; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--su-blauw-tekst); color: var(--su-wit); padding: .3em .7em; border-radius: var(--su-radius-pil); opacity: .85; } /* ---- Placeholder-beeld (sfeerfoto's nog niet aangeleverd) ---- */ .wf-ph { display: flex; align-items: center; justify-content: center; text-align: center; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--su-blauw-lucht) 55%, white) 0 14px, color-mix(in srgb, var(--su-blauw-ijs) 80%, white) 14px 28px); color: var(--su-kleur-tekst-zacht); font-size: var(--su-tekst-klein); font-weight: 600; letter-spacing: .03em; } .wf-ph span { padding: .5em 1em; } /* ---- Header ---- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--su-wit) 90%, transparent); backdrop-filter: saturate(150%) blur(8px); border-bottom: 1px solid var(--su-rand-zacht); } .site-header__inner { display: flex; align-items: center; gap: var(--su-ruimte-md); min-height: 5.5rem; } /* Logo groter in de header (klantfeedback) */ .site-header .su-logo__img { height: 3.75rem; } .site-nav { margin-inline-start: auto; } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--su-ruimte-md); align-items: center; } .site-nav a { text-decoration: none; font-weight: var(--su-gewicht-semibold); color: var(--su-kleur-tekst); font-size: var(--su-tekst-klein); } .site-nav a:hover { color: var(--su-kleur-primair); } /* Hamburger (CSS-only, geen JS) */ .nav-toggle, .nav-toggle-label { display: none; } @media (max-width: 60rem) { .nav-toggle-label { display: inline-flex; flex-direction: column; gap: 5px; margin-inline-start: auto; cursor: pointer; padding: .5rem; } .nav-toggle-label span { width: 26px; height: 2px; background: var(--su-kleur-tekst); display: block; } .site-nav { position: absolute; inset-inline: 0; top: 100%; background: var(--su-wit); border-bottom: 1px solid var(--su-rand-zacht); margin: 0; max-height: 0; overflow: hidden; transition: max-height .2s ease; } .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--su-ruimte-sm) var(--su-ruimte-md); } .site-nav li { border-bottom: 1px solid var(--su-rand-zacht); } .site-nav a { display: block; padding: .8rem 0; font-size: var(--su-tekst-body); } .nav-toggle:checked ~ .site-nav { max-height: 22rem; } } /* ---- Hero ---- */ .hero { position: relative; overflow: hidden; } .hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Geen blauwe overlay. Leesbaarheid via een neutraal donker kader op de tekst. Kader op containerbreedte -> tekst lijnt links uit met de overige secties. */ .hero__inner { position: relative; z-index: 2; margin: 2rem auto; padding: 2rem; background: rgba(0, 0, 0, 0.4); border-radius: var(--su-radius-md); color: var(--su-wit); } .hero h1, .hero p { color: var(--su-wit); max-width: 100%; } .hero p { max-width: 46rem; } .hero .su-label { color: var(--su-wit); } .hero__buttons { margin-top: var(--su-ruimte-lg); } /* Wit logo in de hero, ~breedte van de tekst (2x groter, klantwens) */ .hero__logo { display: block; width: auto; height: clamp(6rem, 3.2rem + 12vw, 11rem); margin: var(--su-ruimte-sm) 0 var(--su-ruimte-md); filter: drop-shadow(0 3px 16px rgba(22, 58, 99, .55)); } /* ---- Sectie-kop ---- */ .sectiekop { max-width: var(--su-container-smal); margin-bottom: var(--su-ruimte-lg); } .sectiekop p { color: var(--su-kleur-tekst-zacht); } .sectiekop--midden { margin-inline: auto; text-align: center; } /* ---- Tours: 2x2, landschap 16:9 (klantfeedback) ---- */ .tour-raster { display: grid; gap: var(--su-ruimte-lg); grid-template-columns: repeat(2, 1fr); } @media (max-width: 36rem) { .tour-raster { grid-template-columns: 1fr; } } .tour-kaart { height: 100%; } .tour-kaart .su-kaart__beeld { aspect-ratio: 16 / 9; } /* landschap, minder dominant op desktop */ .tour-kaart .wf-ph { aspect-ratio: 16 / 9; width: 100%; } .tour-kaart h3 { margin: 0; font-size: var(--su-tekst-h3); } /* Gelijke kaarthoogte -> CTA's ("Lees verder" / "Meer over deze tour") lijnen onderaan op dezelfde hoogte uit (su-kaart__footer heeft margin-top:auto) */ .su-raster .su-kaart { height: 100%; } /* Blog: vaste 3-koloms band (i.p.v. auto-fill) voor een uitgebalanceerde rij */ .blog-raster { grid-template-columns: repeat(3, 1fr); } @media (max-width: 60rem) { .blog-raster { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 40rem) { .blog-raster { grid-template-columns: 1fr; } } /* ---- Gidsen: beeld + tekst naast elkaar ---- */ .split { display: grid; gap: var(--su-ruimte-xl); align-items: center; grid-template-columns: 1fr 1fr; } @media (max-width: 52rem) { .split { grid-template-columns: 1fr; } } .split .wf-ph { aspect-ratio: 4 / 3; border-radius: var(--su-radius-md); } .gids-portret { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--su-radius-md); box-shadow: var(--su-schaduw-md); } .thema-beeld { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--su-radius-md); box-shadow: var(--su-schaduw-md); } /* ---- Volledige-breedte sfeerband (extra beeldmoment, klantfeedback "meer beeld") ---- */ .beeldband { position: relative; overflow: hidden; height: clamp(15rem, 26vw, 24rem); } .beeldband__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---- Tour-strook (categorie onder de foto, volledige breedte) ---- */ .tour-strook { background: var(--su-blauw-krachtig); color: var(--su-wit); font-size: var(--su-tekst-klein); font-weight: var(--su-gewicht-semibold); text-transform: uppercase; letter-spacing: .06em; padding: .45em var(--su-ruimte-md); border-bottom: 1px solid var(--su-rand-zacht); } /* ---- Tarieven-balk (strak en verankerd) ---- */ .tarief-balk { display: flex; align-items: center; justify-content: space-between; gap: var(--su-ruimte-lg); background: var(--su-wit); border: 1px solid var(--su-rand-zacht); border-radius: var(--su-radius-md); box-shadow: var(--su-schaduw-sm); padding: var(--su-ruimte-lg) var(--su-ruimte-xl); } .tarief-balk__tekst > * { margin: 0; } .tarief-balk__titel { font-size: var(--su-tekst-h3); color: var(--su-blauw-krachtig); margin: .15em 0 .35em; } .tarief-balk .su-knop { flex-shrink: 0; } @media (max-width: 44rem) { .tarief-balk { flex-direction: column; align-items: flex-start; gap: var(--su-ruimte-md); } } /* ---- Kernzin: altijd op een eigen regel ---- */ .su-kernzin { font-weight: var(--su-gewicht-semibold); color: var(--su-kleur-tekst); } /* Intro- en afsluitblok: even breed als de overige secties (su-container), lopende tekst 100% breed en links uitgelijnd (klantwens) */ .tekst-breed p, .tekst-breed li { max-width: none; } /* ---- Praktische info ---- */ .praktisch-raster { display: grid; gap: var(--su-ruimte-md); grid-template-columns: repeat(4, 1fr); } @media (max-width: 60rem) { .praktisch-raster { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 36rem) { .praktisch-raster { grid-template-columns: 1fr; } } .praktisch-item { background: var(--su-wit); border: 1px solid var(--su-rand-zacht); border-radius: var(--su-radius-md); padding: var(--su-ruimte-md); } .praktisch-item h4 { margin: 0 0 var(--su-ruimte-2xs); } .praktisch-item p { margin: 0; font-size: var(--su-tekst-klein); color: var(--su-kleur-tekst-zacht); } /* ---- Reviews ---- */ .review-raster { display: grid; gap: var(--su-ruimte-md); grid-template-columns: repeat(3, 1fr); } @media (max-width: 52rem) { .review-raster { grid-template-columns: 1fr; } } .review { background: var(--su-wit); border: 1px solid var(--su-rand-zacht); border-radius: var(--su-radius-md); padding: var(--su-ruimte-lg); box-shadow: var(--su-schaduw-sm); } .review p { margin: 0 0 var(--su-ruimte-sm); } .review cite { font-style: normal; font-weight: 600; color: var(--su-kleur-tekst-zacht); } .review__sterren { color: #ffd166; letter-spacing: 2px; margin-bottom: var(--su-ruimte-2xs); } /* ---- Footer ---- */ .site-footer { color: var(--su-wit); position: relative; } /* Skyline-divider: komt uit de footer omhoog, over de sfeerfoto (verbindingsstuk) */ .footer-skyline { position: absolute; left: 0; right: 0; bottom: 100%; width: 100%; height: auto; display: block; z-index: 2; } /* Logo: horizontaal gecentreerd, bovenaan het egale blauwe footervlak */ .footer-logo { display: block; height: 4rem; width: auto; margin: 0 auto var(--su-ruimte-lg); } .site-footer a { color: var(--su-blauw-lucht); } .site-footer a:hover { color: var(--su-wit); } .footer-raster { display: grid; gap: var(--su-ruimte-xl); grid-template-columns: 1.4fr 1fr 1fr; align-items: start; } @media (max-width: 52rem) { .footer-raster { grid-template-columns: 1fr 1fr; } } @media (max-width: 32rem) { .footer-raster { grid-template-columns: 1fr; } } .footer-raster h4 { color: var(--su-wit); margin-bottom: var(--su-ruimte-sm); } .footer-nav ul { list-style: none; margin: 0; padding: 0; } .footer-nav li { margin-block: .35rem; } /* Footermenu in witte tekst — leest beter (klantfeedback) */ .footer-nav a { text-decoration: none; color: var(--su-wit); } .footer-nav a:hover { color: var(--su-wit); text-decoration: underline; } .footer-onder { border-top: 1px solid color-mix(in srgb, var(--su-wit) 18%, transparent); margin-top: var(--su-ruimte-xl); padding-top: var(--su-ruimte-md); display: flex; flex-wrap: wrap; gap: var(--su-ruimte-sm) var(--su-ruimte-md); justify-content: space-between; font-size: var(--su-tekst-klein); color: var(--su-blauw-lucht); } /* --- Divi-shell neutralisatie: onze Divi section/row/column zijn onzichtbaar scaffold --- */ .sw-wire .wf-badge, .sw-wire .su-skip-link { display: none !important; } /* Dubbele (Divi-thema) footer verbergen: de merk-footer staat in de content */ #main-footer { display: none !important; } /* Menubalk: search-icoon altijd verbergen (klantwens) */ #et_top_search, #et_search_icon, li#et_top_search, .et_search_form_container, #et_search_outer { display: none !important; } /* Header-nav op merk (Source Sans 3, iets groter, tekstblauw) — alle items als normale link */ #top-menu li a { font-size: var(--su-tekst-klein) !important; color: var(--su-blauw-tekst) !important; font-weight: 600; } #top-menu li a:hover { color: var(--su-blauw-krachtig) !important; } /* ===================================================================== BRIDGE — styleguide op Divi's eigen module-DOM. De layout is opgebouwd uit echte Divi-modules; de zichtbare styling (sectie-bg, kaart-look, hero-paneel, beeld-radius, footer) staat op de modules via de Divi Design-instellingen (decoration) en is dus in de Visual Builder bewerkbaar. Module-níveau su-classes renderen niet via REST, dus mappen we alleen wat CSS moet blijven op Divi's eigen classes (.et_pb_text, .et_pb_blurb) + de content-classes (renderen wél). ===================================================================== */ /* Lopende tekst op de styleguide-schaal (Divi forceert body 14px). Geen leesbreedte-cap: binnen de kolommen komt de tekst vanzelf goed uit (klantwens). */ .et_pb_text, .et_pb_text .et_pb_text_inner { font-size: var(--su-tekst-body); line-height: var(--su-lh-body); } .et_pb_text p, .et_pb_text li, .su-sectie p, .et_pb_blurb_description p { max-width: none; } .et_pb_text .su-klein, .et_pb_text small { font-size: var(--su-tekst-klein) !important; line-height: var(--su-lh-klein); } .et_pb_text .su-label { font-size: 0.875rem !important; } /* su-label tegen de bovenkant van de kop plakken. Divi 5 kolommen zijn FLEX met een row-gap (~30px) tussen modules; die gap (geen marge) veroorzaakt de ruimte, dus trekken we de kop met een negatieve marge omhoog tot vlak onder het label. */ .et_pb_text:has(.su-label) .su-label { margin-bottom: 0 !important; } .et_pb_text:has(.su-label) + .et_pb_heading { margin-top: -26px !important; } /* Kaart = divi/blurb (zonder titel): beeld FLUSH tegen de blauwe balk, dan gepadde body. Hover-lift zoals in de wireframe (.su-kaart:hover). */ .et_pb_blurb { overflow: hidden; text-align: left; transition: transform 160ms ease, box-shadow 160ms ease; } .et_pb_blurb:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(22,58,99,.16), 0 5px 14px rgba(22,58,99,.10); } /* blurb-content is flex met 30px gap -> beeld staat los van de balk; gap weg = flush */ .et_pb_blurb .et_pb_blurb_content { max-width: none; gap: 0 !important; } .et_pb_blurb .et_pb_main_blurb_image { margin: 0 !important; padding: 0 !important; line-height: 0; font-size: 0; } .et_pb_blurb .et_pb_main_blurb_image img { width: 100%; display: block; vertical-align: bottom; margin: 0 !important; } .et_pb_blurb .et_pb_blurb_container { margin: 0 !important; padding: 0 !important; } .et_pb_blurb .et_pb_blurb_description { padding: 0 !important; font-size: var(--su-tekst-klein); } .et_pb_blurb .et_pb_blurb_description > *:first-child { margin-top: 0 !important; } /* Blauwe balk onder het beeld — categorie (tour-strook) én kaart-titel (sh-strook-titel) */ .tour-strook { display: block; background: var(--su-blauw-krachtig); color: #fff !important; letter-spacing: .06em; font-weight: 600; font-size: var(--su-tekst-klein) !important; text-transform: uppercase; line-height: 1.3; padding: .5em var(--su-ruimte-md); margin: 0; } .sh-strook-titel { text-transform: none; letter-spacing: normal; font-size: calc(var(--su-tekst-h4) * 0.8) !important; line-height: 1.25; } .sh-card-body { padding: var(--su-ruimte-md); display: flex; flex-direction: column; gap: .6rem; } .sh-card-body h3, .sh-card-titel { margin: 0; color: var(--su-blauw-tekst); font-size: var(--su-tekst-h3); } .sh-card-body p { margin: 0; } /* Reviews (content-classes) */ .review__sterren { color: #ffd166; letter-spacing: 2px; margin-bottom: var(--su-ruimte-2xs); font-size: 1.2rem; } cite { font-style: normal; font-weight: 600; color: var(--su-kleur-tekst-zacht); } /* Knop-hover: vullen met krachtig-blauw + witte tekst + subtiele lift (fill zoals de wireframe; de decoration-hover rendert niet via REST, dus doen we het hier). */ .et_pb_button { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .et_pb_button:hover { background-color: var(--su-blauw-krachtig) !important; color: #fff !important; border-color: var(--su-blauw-krachtig) !important; transform: translateY(-1px); box-shadow: var(--su-schaduw-md); } /* Witte hero-knop ("Bekijk de wandelingen") houdt een witte hover (+ Divi's pijltje) */ .et_pb_button_0:hover { background-color: #fff !important; color: var(--su-blauw-tekst) !important; border-color: #fff !important; } /* Letterpress-doordruk op de sectiekoppen/labels van de licht-blauwe banden (ijs = tours/praktisch, lucht = thema/reviews). Wireframe: .su-sectie--ijs/lucht. Alleen de sectie-heading-modules + labels; de kaart-titels (in blurbs) blijven vrij. */ .et_pb_section_2 .et_pb_heading .et_pb_module_header, .et_pb_section_2 .su-label, .et_pb_section_4 .et_pb_heading .et_pb_module_header, .et_pb_section_4 .su-label, .et_pb_section_6 .et_pb_heading .et_pb_module_header, .et_pb_section_6 .su-label, .et_pb_section_7 .et_pb_heading .et_pb_module_header, .et_pb_section_7 .su-label { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85); } /* Losse foto's — afgeronde hoeken (split-portret / themabeeld) */ img[alt="Willemijn Banki, stadsgids"], img[alt="Verlichte terrassen in de avond"] { border-radius: var(--su-radius-md); } /* De oude in-content footer-hack op de laatste sectie is VERVALLEN: de footer is nu een globale Divi Theme Builder-footer (.et-l--footer). De vorige regels maakten de laatste sectie van élke pagina wit (witte FAQ-koppen, onzichtbare outline-knop). */ /* --------------------------------------------------------------------- DIEPERE PAGINA'S — bewuste afwijkingen van de v1-ontwerpen (klantfeedback). De VOLLEDIGE styleguide (typografie, ritme, kaarten, strook, hero) staat gescoped in pages.css; hier alleen de gevraagde overrides. -------------- */ /* Gidsportretten: profielformaat (1:1) i.p.v. het te hoge 4:5. */ .et_pb_code_inner .su-gids__portret { aspect-ratio: 1 / 1; } /* Uitgelichte CTA (direct in een .su-stack, bv. 'Vraag een wandeling met Willemijn aan') was een tekstlink en viel weg. Nu een knop zodat hij opvalt. De 'Lees meer'- links in kaarten (.su-kaart__footer) blijven tekstlinks. */ .et_pb_code_inner .su-stack > a.su-link-cta { align-self: flex-start; margin-top: var(--su-ruimte-sm); background: var(--su-kleur-primair); color: var(--su-kleur-op-primair); padding: 0.7em 1.5em; border-radius: var(--su-radius-pil); font-weight: var(--su-gewicht-semibold); text-decoration: none; box-shadow: var(--su-schaduw-sm); } .et_pb_code_inner .su-stack > a.su-link-cta:hover { background: var(--su-blauw-krachtig-hover); color: var(--su-wit); } /* Anchor-navigatie (one-pager): zacht scrollen naar secties, met offset zodat de doelsectie niet onder de vaste header (#main-header, ~80px) verdwijnt. De id's worden client-side gezet (zie includes/general/anchor-nav.php). */ html { scroll-behavior: smooth; } #wandelingen, #gidsen, #blog, #tarieven, #contact { scroll-margin-top: 96px; } /* ===================================================================== Mobiel menu (wireframe-stijl): witte dropdown onder de header, gestapelde items met scheidingslijnen, merk-tekstblauw + gekleurde hamburger. Vervangt Divi's default mobiele menu-styling. ===================================================================== */ #main-header .mobile_menu_bar:before, #et_mobile_nav_menu .mobile_menu_bar:before { color: var(--su-blauw-tekst) !important; } #main-header .et_mobile_menu { background-color: var(--su-wit); border-top: 3px solid var(--su-blauw-krachtig); box-shadow: var(--su-schaduw-md); /* Lucht boven en onder de menu-items; zonder de scheidingslijnen tussen de items voelde het uitgeklapte menu krap. 3rem = 48px (hele pixels). */ padding: 3rem 0; /* Volle pagina-breedte i.p.v. de header-containerbreedte */ left: 50%; right: auto; margin-left: -50vw; width: 100vw; /* Het menu is een