/* Theme Name: Kwip Template: twentytwentyfive Description: Vormgeving van kwip.nl. Logica zit in de plugin kwip-opvang en de mu-plugin kwip-core. Version: 1.4.0 Text Domain: kwip */ /* Huisstijl (Henk, 2026-10-27, planning/huisstijl.md). Kleuren: palet B (framboos), zie :root. Merkkleur voor knoppen en het logoblokje, blok 1 en 2 voor de soorten opvang. Achtergrond wit. Vorm (Henk, 2026-10-27: niet zoals eQuip en niet zoals de concurrenten): geen kaarten in een raster, geen ronde beige vlakken, geen cijferkaarten. Wel: een dorpskaart met genummerde blokjes en een index met een staaf van blokjes per locatie, de feiten als uittreksel uit het register, vierkante hoeken, gestapelde blokken (rand met een effen gekleurd blok erachter) en een lichte voet. Kleur per soort: kinderdagverblijf blok 1, bso blok 2, gastouderbureau blok 3. */ :root { /* Palet B, framboos (Henk, 2026-10-27, gekozen uit /kleurvoorstel.html) */ --k-wit: #FFFFFF; --k-papier: #F5F4F7; --k-vlak: #ECEAF0; --k-inkt: #1A1F2C; --k-inkt-zacht: #4D5263; --k-lijn: #DFDDE5; --k-lijn-sterk: #8B8898; --k-merk: #C2185B; --k-actie: #C2185B; --k-actie-donker: #9E1249; --k-b1: #F4A3BF; --k-b2: #8FD3BE; --k-b3: #BFC3CF; --k-b1-licht: #FDEBF2; --k-b2-licht: #E8F7F2; --k-b3-licht: #F2F3F6; --k-kop: var(--wp--preset--font-family--kop); --k-r: 2px; --k-stapel: 8px; } *, *::before, *::after { box-sizing: border-box; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--k-wit); } :focus-visible { outline: 3px solid var(--k-actie); outline-offset: 3px; } ::selection { background: var(--k-b1); color: var(--k-inkt); } p, li, dd { max-width: 38em; } h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; } @media (max-width: 420px) { h1, h2 { hyphens: auto; } } a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; } a:hover { text-decoration-color: var(--k-b1); text-decoration-thickness: 3px; } abbr[title] { text-decoration: none; cursor: help; } .k-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--k-inkt); color: var(--k-wit); padding: 10px 16px; font-weight: 700; text-decoration: none; } .k-skip:focus { top: 12px; } /* Kleur per soort opvang */ .k-soort-kdv { --k-soort: var(--k-b1); --k-soort-licht: var(--k-b1-licht); } .k-soort-bso { --k-soort: var(--k-b2); --k-soort-licht: var(--k-b2-licht); } .k-soort-gob { --k-soort: var(--k-b3); --k-soort-licht: var(--k-b3-licht); } /* Blokjes */ .k-blok { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.25rem; height: 2.25rem; background: var(--k-b1); color: var(--k-inkt); font-family: var(--k-kop); font-weight: 800; font-size: 1.125rem; line-height: 1; } .k-blok-3 { background: var(--k-b3); } .k-blok-2 { background: var(--k-b2); } .k-boven { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 700; font-size: 0.9375rem; color: var(--k-inkt-zacht); } .k-boven i { width: 12px; height: 12px; background: var(--k-b1); } .k-blokjes { display: inline-flex; flex-wrap: wrap; gap: 2px; vertical-align: middle; max-width: 220px; } .k-blokjes i { width: 10px; height: 10px; background: var(--k-b1); } .k-blokjes i:nth-child(3n+2) { background: var(--k-b3); } .k-blokjes i:nth-child(3n) { background: var(--k-b2); } .k-plaatsen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } /* Kop */ .k-kop { background: var(--k-wit); position: sticky; top: 0; z-index: 50; border-bottom: 2px solid var(--k-inkt); } .admin-bar .k-kop { top: 32px; } @media (max-width: 782px) { .admin-bar .k-kop { top: 46px; } } .k-kop-rij { min-height: 72px; gap: 16px; } .k-logo { font-family: var(--k-kop); font-weight: 800; font-size: 32px; letter-spacing: -0.045em; line-height: 1; text-decoration: none !important; color: var(--k-inkt); display: inline-flex; align-items: flex-end; } .k-logo-blok { display: inline-block; width: 0.3em; height: 0.3em; margin: 0 0 0.12em 0.08em; background: var(--k-merk); } .k-nav .wp-block-navigation-item__content { text-decoration: none; font-size: 1rem; font-weight: 700; padding: 10px 4px; } .k-nav .wp-block-navigation-item__content:hover, .k-nav .current-menu-item > .wp-block-navigation-item__content { text-decoration: underline; text-decoration-color: var(--k-b1); text-decoration-thickness: 4px; text-underline-offset: 8px; } .k-nav .wp-block-navigation__responsive-container-open { font-weight: 700; padding: 10px 14px; border: 2px solid var(--k-inkt); } /* Hoofdinhoud */ .k-hoofd { padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--60); } .k-voorpagina { padding-top: 0; } .k-paginatitel { margin-bottom: var(--wp--preset--spacing--30); } .k-lead { font-size: var(--wp--preset--font-size--groot); line-height: 1.5; max-width: 32em; } .k-zacht { color: var(--k-inkt-zacht); } .k-klein { font-size: var(--wp--preset--font-size--klein); } .k-breed { max-width: 1180px; margin-inline: auto; padding-inline: var(--wp--style--root--padding-left, 16px); } /* Knoppen: hoekig, één gevulde knop per beeld */ .k-knop, .k-knop-2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: var(--k-r); font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none !important; cursor: pointer; transition: background-color .18s ease, color .18s ease; } .k-knop { background: var(--k-actie); color: var(--k-wit); border: 2px solid var(--k-actie); } .k-knop:hover { background: var(--k-actie-donker); border-color: var(--k-actie-donker); color: var(--k-wit); } .k-knop[aria-pressed="true"] { background: var(--k-inkt); border-color: var(--k-inkt); } .k-knop-2 { background: var(--k-wit); color: var(--k-inkt); border: 2px solid var(--k-inkt); } .k-knop-2:hover { background: var(--k-b1-licht); } .k-knop-2[aria-pressed="true"] { background: var(--k-inkt); color: var(--k-wit); } .k-knop-klein { min-height: 44px; padding: 8px 14px; font-size: 0.9375rem; } /* Plusblokje: zet een locatie op je lijst */ .k-plus { flex: none; width: 44px; height: 44px; padding: 0; border: 2px solid var(--k-inkt); border-radius: var(--k-r); background: var(--k-wit); color: var(--k-inkt); cursor: pointer; position: relative; } .k-plus::before, .k-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); } .k-plus::before { width: 16px; height: 3px; } .k-plus::after { width: 3px; height: 16px; } .k-plus:hover { background: var(--k-b1-licht); } .k-plus[aria-pressed="true"] { background: var(--k-inkt); color: var(--k-wit); } .k-plus[aria-pressed="true"]::before { width: 7px; height: 3px; transform: translate(-90%, 0) rotate(45deg); } .k-plus[aria-pressed="true"]::after { width: 3px; height: 13px; transform: translate(10%, -60%) rotate(45deg); } /* Zoekformulier: veld en knop als één blok */ .k-zoek { margin-top: var(--wp--preset--spacing--40); max-width: 580px; } .k-zoek label { display: block; font-weight: 700; margin-bottom: 8px; } .k-zoek-rij { display: flex; border: 2px solid var(--k-inkt); background: var(--k-wit); box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-b1); margin-right: var(--k-stapel); } .k-zoek input[type="search"] { flex: 1; min-width: 0; height: 56px; padding: 0 16px; font: inherit; font-size: 1.125rem; color: var(--k-inkt); background: transparent; border: 0; border-radius: 0; } .k-zoek input[type="search"]:focus { outline: 3px solid var(--k-actie); outline-offset: 2px; } .k-zoek .k-knop { height: auto; margin: 6px; min-height: 44px; } .k-zoek-hint { margin-top: 14px; font-size: var(--wp--preset--font-size--klein); color: var(--k-inkt-zacht); } /* Opening van de voorpagina */ .k-held { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); } .k-held h1 { margin: 0; } .k-held .k-lead { margin-top: 20px; } @media (max-width: 900px) { .k-held { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 32px; } } /* Gestapeld blok: rand met een effen gekleurd blok erachter, geen zachte schaduw */ .k-stapel { background: var(--k-wit); border: 2px solid var(--k-inkt); box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-b1); margin-right: var(--k-stapel); } .k-stapel-3 { box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-b3); } .k-stapel-2 { box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-b2); } /* Voorbeeldkaart: een echte locatie, als kaartje voor de rondleiding */ .k-voorbeeld { background: var(--k-wit); border: 2px solid var(--k-inkt); padding: 26px 24px 20px; position: relative; box-shadow: 12px 12px 0 var(--k-b1), 24px 24px 0 var(--k-b2-licht); margin-right: 24px; } .k-voorbeeld-label { position: absolute; top: -14px; left: 20px; background: var(--k-inkt); color: var(--k-wit); font-size: 0.8125rem; font-weight: 700; padding: 4px 10px; } .k-voorbeeld h3, .k-voorbeeld-titel { margin: 8px 0 2px; font-size: 1.5rem; } .k-voorbeeld h3 a, .k-voorbeeld-titel a { text-decoration: none; } .k-voorbeeld-vraag { margin-top: 16px; padding: 14px 16px; background: var(--k-b1-licht); } .k-voorbeeld-vraag b { display: block; font-size: var(--wp--preset--font-size--klein); color: var(--k-inkt-zacht); } .k-voorbeeld-vraag p { margin: 4px 0 0; font-family: var(--k-kop); font-weight: 700; font-size: 1.125rem; line-height: 1.3; } @media (max-width: 480px) { .k-voorbeeld { margin-right: 14px; box-shadow: 8px 8px 0 var(--k-b1), 14px 14px 0 var(--k-b2-licht); } } .k-tegel-soort, .k-soortregel { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 700; color: var(--k-inkt-zacht); } .k-tegel-soort i, .k-soortregel i { width: 12px; height: 12px; background: var(--k-soort, var(--k-b1)); } /* Feiten: label en waarde zonder vlakken */ .k-feitjes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 16px 0 0; } .k-feitje:first-child { grid-column: 1 / -1; } .k-feitje dt { font-size: 0.875rem; color: var(--k-inkt-zacht); } .k-feitje dd { margin: 2px 0 0; font-weight: 700; } /* Secties */ .k-sectie { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); } .k-sectie-wit { background: var(--k-wit); } .k-sectie-vlak, .k-sectie-papier { background: var(--k-papier); } .k-sectie h2 { margin-top: 0; } .k-sectie-intro { margin-top: 12px; color: var(--k-inkt-zacht); font-size: var(--wp--preset--font-size--groot); line-height: 1.5; } /* Twee blokken naast elkaar */ .k-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 32px; } .k-twee > div { padding: 24px 26px; } .k-twee h3 { margin: 0 0 12px; } .k-twee ul { margin: 0; padding-left: 20px; } .k-twee li + li { margin-top: 6px; } @media (max-width: 760px) { .k-twee { grid-template-columns: minmax(0, 1fr); gap: 28px; } } /* Samenvatting van een plaats: één blokje per locatie */ .k-som { margin-top: 24px; } .k-som-rij { display: flex; flex-wrap: wrap; gap: 4px; } .k-som-rij i { width: 22px; height: 22px; background: var(--k-soort, var(--k-b1)); } .k-som-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 0.9375rem; font-weight: 700; } .k-som-legenda span { display: inline-flex; align-items: center; gap: 8px; } .k-som-legenda i { width: 12px; height: 12px; background: var(--k-soort, var(--k-b1)); } /* Dorpskaart met index: hetzelfde nummer op de kaart en in de lijst */ .k-dorp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; margin-top: 28px; align-items: start; } .k-dorp-kaart { position: sticky; top: 96px; } .k-dorp-kaart .k-kaart { height: min(620px, 70vh); } @media (max-width: 900px) { .k-dorp { grid-template-columns: minmax(0, 1fr); gap: 24px; } .k-dorp-kaart { position: static; } .k-dorp-kaart .k-kaart { height: 320px; } } .k-index { list-style: none; margin: 0; padding: 0; } .k-index li { max-width: none; } .k-index-groep { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; font-weight: 700; font-size: 0.9375rem; color: var(--k-inkt-zacht); } .k-index-groep:first-child { margin-top: 0; } .k-index-groep i { width: 12px; height: 12px; background: var(--k-soort, var(--k-b1)); } .k-index-regel { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 140px 4rem 44px; gap: 6px 14px; align-items: center; padding: 8px 0; } .k-index-regel + .k-index-regel { border-top: 2px dotted var(--k-lijn); } .k-nr { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: var(--k-soort, var(--k-b1)); color: var(--k-inkt); font-family: var(--k-kop); font-weight: 800; font-size: 0.9375rem; } .k-index-naam a { font-weight: 700; text-decoration: none; line-height: 1.25; } .k-index-naam a:hover { text-decoration: underline; text-decoration-color: var(--k-soort, var(--k-b1)); } .k-index-naam small { display: block; color: var(--k-inkt-zacht); font-size: 0.875rem; } .k-staaf { display: flex; flex-wrap: wrap; gap: 2px; } .k-staaf i { width: 5px; height: 14px; background: var(--k-soort, var(--k-b1)); } .k-index-getal { font-family: var(--k-kop); font-weight: 800; font-size: 1.125rem; text-align: right; line-height: 1.1; } .k-index-getal small { display: block; font-family: var(--wp--preset--font-family--tekst); font-weight: 400; font-size: 0.75rem; color: var(--k-inkt-zacht); } .k-index-uitleg { margin: 12px 0 0; font-size: 0.875rem; color: var(--k-inkt-zacht); } .k-index-uitleg span i { display: inline-block; width: 5px; height: 14px; background: var(--k-b1); vertical-align: middle; } @media (max-width: 560px) { .k-index-regel { grid-template-columns: 2rem minmax(0, 1fr) 44px; } .k-staaf { grid-column: 2; grid-row: 2; } .k-index-getal { grid-column: 3; grid-row: 2; text-align: center; } .k-plus { grid-column: 3; grid-row: 1; } } /* Uittreksel uit het register */ .k-uittreksel { border: 2px solid var(--k-inkt); background: var(--k-wit); box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-soort, var(--k-b1)); margin-right: var(--k-stapel); } .k-uittreksel-kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0; padding: 10px 16px; background: var(--k-inkt); color: var(--k-wit); font-size: 0.875rem; font-weight: 700; max-width: none; } .k-uittreksel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; padding: 18px 16px; } .k-uittreksel dt { font-size: 0.875rem; color: var(--k-inkt-zacht); } .k-uittreksel dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; } .k-uittreksel dd small { display: block; font-weight: 400; color: var(--k-inkt-zacht); } .k-uittreksel-voet { margin: 0; padding: 10px 16px; border-top: 2px dotted var(--k-lijn); font-size: 0.875rem; color: var(--k-inkt-zacht); max-width: none; } @media (max-width: 480px) { .k-uittreksel dl { grid-template-columns: minmax(0, 1fr); } } /* Locatiepagina */ .k-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: start; } .k-top h1 { margin: 6px 0 0; } .k-top .k-lead { margin-top: 16px; } @media (max-width: 900px) { .k-top { grid-template-columns: minmax(0, 1fr); gap: 32px; } } .k-locatie-sub { margin: 10px 0 0; font-size: var(--wp--preset--font-size--groot); color: var(--k-inkt-zacht); } .k-acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .k-blok-sectie { margin-top: var(--wp--preset--spacing--60); } .k-blok-sectie > h2 { font-size: 1.75rem; margin: 0; } .k-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: var(--wp--preset--spacing--50); align-items: start; } .k-duo > * { padding: 22px 24px; } .k-duo h2 { font-size: 1.375rem; margin: 0 0 10px; } @media (max-width: 760px) { .k-duo { grid-template-columns: minmax(0, 1fr); } } .k-onbekend { background: var(--k-b1-licht); border: 2px dashed var(--k-inkt); } .k-onbekend ul { margin: 8px 0 12px; padding-left: 20px; } .k-onbekend a { font-weight: 700; } .k-contactblok { background: var(--k-papier); } .k-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .k-contact li { max-width: none; overflow-wrap: anywhere; } .k-contact b { display: block; font-size: 0.875rem; color: var(--k-inkt-zacht); font-weight: 400; } /* Plaatspagina */ .k-plaats-kop h1 { margin: 0; } .k-plaats-kop .k-lead { margin-top: 16px; } /* Bron bij elk gegeven */ .k-bron { margin-top: 14px; font-size: var(--wp--preset--font-size--klein); color: var(--k-inkt-zacht); } .k-bron a { color: inherit; } /* Kruimelpad */ .k-kruimel { font-size: var(--wp--preset--font-size--klein); color: var(--k-inkt-zacht); margin-bottom: 20px; position: relative; z-index: 1; } .k-kruimel ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; } .k-kruimel li { max-width: none; } .k-kruimel li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--k-b1); margin: 0 10px; vertical-align: middle; } .k-kruimel a { color: inherit; } /* Kaart */ .k-kaart { height: 340px; border: 2px solid var(--k-inkt); background: var(--k-papier); z-index: 1; box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-b2); margin-right: var(--k-stapel); } .k-kaart-bron { margin-top: 16px; font-size: 0.8125rem; color: var(--k-inkt-zacht); } .k-pin { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--k-soort, var(--k-inkt)); border: 2px solid var(--k-inkt); color: var(--k-inkt); font-family: var(--k-kop); font-weight: 800; font-size: 12px; line-height: 1; } .k-pin:empty { background: var(--k-inkt); border-color: var(--k-wit); } .k-pin.k-pin-hier { background: var(--k-actie); border-color: var(--k-wit); outline: 2px solid var(--k-actie); } .leaflet-container { font: inherit; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { border-radius: var(--k-r); } .leaflet-popup-content { font-size: 0.9375rem; line-height: 1.4; } .leaflet-popup-content a { font-weight: 700; } /* Filter op soort */ .k-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .k-filter a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 2px solid var(--k-inkt); text-decoration: none; font-weight: 700; font-size: 0.9375rem; background: var(--k-wit); } .k-filter a:hover { background: var(--k-b1-licht); } .k-filter a[aria-current="page"] { background: var(--k-inkt); color: var(--k-wit); } .k-filter a i { width: 10px; height: 10px; background: var(--k-soort, var(--k-b1)); } /* Vragen */ .k-faq { margin-top: var(--wp--preset--spacing--60); max-width: 820px; } .k-faq > h2 { margin: 0 0 16px; } .k-faq details { border: 2px solid var(--k-inkt); margin-top: -2px; background: var(--k-wit); } .k-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 18px; font-weight: 700; font-size: 1.0625rem; } .k-faq summary::-webkit-details-marker { display: none; } .k-faq summary::after { content: ""; flex: none; width: 12px; height: 12px; background: var(--k-b1); transition: transform .18s ease; } .k-faq details[open] summary::after { transform: rotate(45deg); background: var(--k-actie); } .k-faq details[open] { background: var(--k-b1-licht); } .k-faq details > div { padding: 0 18px 18px; } .k-faq details p { margin: 0; } .k-sectie > .k-faq:first-child, .k-sectie .k-faq:only-child { margin-top: 0; } /* Melding */ .k-melding { display: block; background: var(--k-b2-licht); padding: 18px 20px 18px 50px; margin-top: 24px; position: relative; } .k-melding::before { content: ""; position: absolute; left: 20px; top: 23px; width: 14px; height: 14px; background: var(--k-b2); } .k-melding p { margin: 0; } .k-melding p + p { margin-top: 8px; } /* Verder lezen */ .k-verder { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: var(--wp--preset--spacing--50) 0 0; padding: 0; } .k-verder li { max-width: none; } .k-verder a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 2px solid var(--k-inkt); font-weight: 700; text-decoration: none; } .k-verder a::before { content: ""; width: 10px; height: 10px; background: var(--k-b1); } .k-verder a:hover { background: var(--k-b1-licht); } /* Vergelijken */ .k-vergelijk-wrap { overflow-x: auto; margin: 24px var(--k-stapel) 0 0; border: 2px solid var(--k-inkt); background: var(--k-wit); box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-b3); } .k-vergelijk { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 560px; font-size: 0.9375rem; } .k-vergelijk th, .k-vergelijk td { text-align: left; vertical-align: top; padding: 12px 14px; min-width: 160px; } .k-vergelijk thead th { background: var(--k-inkt); color: var(--k-wit); font-family: var(--k-kop); font-size: 1.0625rem; line-height: 1.2; } .k-vergelijk thead th a { color: var(--k-wit); text-decoration: none; } .k-vergelijk thead .k-knop-2 { color: var(--k-inkt); } .k-vergelijk tbody tr:nth-child(even) th, .k-vergelijk tbody tr:nth-child(even) td { background: var(--k-papier); } .k-vergelijk tbody th { position: sticky; left: 0; background: var(--k-wit); color: var(--k-inkt-zacht); font-weight: 400; min-width: 130px; width: 130px; z-index: 1; } .k-vergelijk thead th:first-child { position: sticky; left: 0; z-index: 2; min-width: 130px; width: 130px; } .k-vergelijk .k-onbekend-cel { color: var(--k-inkt-zacht); font-style: italic; } .k-vergelijk tr.k-rij-eigen th, .k-vergelijk tr.k-rij-eigen td { background: var(--k-b1-licht) !important; } .k-vergelijk button { margin-top: 8px; } /* Rondleiding: per locatie een kaart om mee te nemen */ .k-rl { margin: var(--wp--preset--spacing--50) var(--k-stapel) 0 0; padding: 24px 26px; background: var(--k-wit); border: 2px solid var(--k-inkt); box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-b3); } .k-rl h2 { margin: 0; } .k-rl-meta { margin: 6px 0 0; color: var(--k-inkt-zacht); } .k-rl ol { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: v; display: grid; gap: 18px; } .k-rl ol li { counter-increment: v; max-width: 46em; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 14px; } .k-rl ol li::before { content: counter(v); grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: var(--k-b1-licht); font-family: var(--k-kop); font-weight: 800; } .k-rl ol li > label { font-weight: 700; align-self: center; } .k-rl textarea, .k-rl-notitie textarea { display: block; width: 100%; min-height: 64px; margin: 8px 0 0; font: inherit; font-size: 1rem; padding: 10px 12px; border: 2px solid var(--k-lijn-sterk); border-radius: 0; background: var(--k-papier); color: var(--k-inkt); resize: vertical; } .k-rl-notitie { margin-top: 20px; } .k-rl textarea:focus { border-color: var(--k-inkt); background: var(--k-wit); outline: 3px solid var(--k-b1); outline-offset: 0; } .k-indruk { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; } .k-indruk legend { font-weight: 700; margin-bottom: 8px; } .k-indruk-keuzes { display: flex; flex-wrap: wrap; gap: 8px; } .k-indruk label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 2px solid var(--k-inkt); cursor: pointer; font-weight: 700; background: var(--k-wit); } .k-indruk input { width: 18px; height: 18px; accent-color: var(--k-inkt); } .k-indruk label:has(input:checked) { background: var(--k-b3-licht); } .k-opgeslagen { font-size: var(--wp--preset--font-size--klein); color: var(--k-inkt-zacht); min-height: 1.5em; margin-top: 8px; } /* Balk met je lijst, onderin beeld */ .k-balk { position: fixed; left: 12px; right: 20px; bottom: 16px; z-index: 60; background: var(--k-inkt); color: var(--k-wit); padding: 10px 14px; box-shadow: 6px 6px 0 var(--k-b1); margin-bottom: env(safe-area-inset-bottom); } .k-balk[hidden] { display: none; } .k-balk :focus-visible { outline-color: var(--k-b1); } .k-balk-rij { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } .k-balk p { margin: 0; font-weight: 700; } .k-balk-knoppen { display: flex; gap: 8px; flex-wrap: wrap; } .k-balk a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 2px solid var(--k-wit); color: var(--k-wit); font-weight: 700; text-decoration: none; } .k-balk a:hover { background: var(--k-wit); color: var(--k-inkt); } body.k-heeft-balk { padding-bottom: 100px; } @media (max-width: 520px) { body.k-heeft-balk { padding-bottom: 140px; } } /* Voet: licht, met een rij blokjes erboven */ .k-voet { position: relative; background: var(--k-papier); color: var(--k-inkt); padding-top: calc(var(--wp--preset--spacing--50) + 12px); padding-bottom: var(--wp--preset--spacing--50); margin-top: 0; border-top: 2px solid var(--k-inkt); } .k-voet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-linear-gradient(90deg, var(--k-b1) 0 24px, var(--k-b3) 24px 48px, var(--k-b2) 48px 72px); } .k-voet a { color: var(--k-inkt); } .k-voet-raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px 40px; } .k-voet-merk p { margin: 12px 0 0; } .k-voet .k-logo-licht { color: var(--k-inkt); } .k-voet-links { display: grid; gap: 4px; align-content: start; } .k-voet-links a { padding: 6px 0; } .k-voet-gegevens { grid-column: 1 / -1; padding-top: 16px; border-top: 2px dotted var(--k-lijn); font-size: var(--wp--preset--font-size--klein); color: var(--k-inkt-zacht); } .k-voet-gegevens p { margin: 0; max-width: none; } .k-voet-gegevens p + p { margin-top: 6px; } @media (max-width: 760px) { .k-voet-raster { grid-template-columns: minmax(0, 1fr); } } /* Micro-animaties: kort en rustig */ a, button, summary, .k-filter a, .k-indruk label { transition: background-color .18s ease, color .18s ease, border-color .18s ease, text-decoration-color .18s ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } } /* Afdrukken: de rondleidingslijst op papier meenemen */ @media print { .k-kop, .k-voet, .k-balk, .k-acties, .k-zoek, .k-geen-print, .wp-block-navigation { display: none !important; } body { background: #fff; padding: 0 !important; } .k-rl { break-inside: avoid-page; box-shadow: none; border-color: #000; margin-right: 0; } .k-rl textarea { border: 0; border-bottom: 1px solid #999; min-height: 48px; resize: none; background: #fff; } a { text-decoration: none; } } /* Voorpagina: de rondleidingslijst als voorbeeld (in plaats van drie stappen, die hebben de concurrenten ook) */ .k-uitleg-rl { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; } .k-uitleg-rl-knop { margin-top: 24px; } .k-rl-voorbeeld { position: relative; margin-top: 0; } .k-rl-voorbeeld .k-voorbeeld-label { position: absolute; top: -14px; left: 20px; margin: 0; } .k-rl-voorbeeld h3 { margin: 6px 0 0; font-size: 1.25rem; } .k-rl-voorbeeld ol li { grid-template-columns: 2.25rem minmax(0, 1fr); } .k-rl-voorbeeld ol li span { font-weight: 700; align-self: center; } .k-rl-voorbeeld ol li i { grid-column: 2; display: block; height: 30px; margin-top: 8px; border-bottom: 2px dotted var(--k-lijn-sterk); } .k-rl-voorbeeld-indruk { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; } .k-rl-voorbeeld-indruk span { padding: 6px 12px; border: 2px solid var(--k-inkt); font-weight: 700; font-size: 0.9375rem; } .k-rl-voorbeeld-indruk span:first-child { background: var(--k-b3-licht); } @media (max-width: 900px) { .k-uitleg-rl { grid-template-columns: minmax(0, 1fr); gap: 40px; } } /* Rondleidingslijst sterker naar voren (Henk, 2026-10-27) */ .k-voorbeeld-vraag ol { margin: 8px 0 0; padding-left: 20px; font-family: var(--k-kop); font-weight: 700; line-height: 1.3; } .k-voorbeeld-vraag ol li + li { margin-top: 6px; } .k-voorbeeld-meer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; font-size: 0.9375rem; color: var(--k-inkt-zacht); } .k-onbekend ol { margin: 8px 0 12px; padding-left: 22px; } .k-onbekend ol li + li { margin-top: 6px; } /* In het kort op de plaatspagina: één regel in een kader, geen cijferkaarten */ .k-kort-plaats { margin-top: 28px; border: 2px solid var(--k-inkt); } .k-kort-plaats h2 { margin: 0; padding: 8px 16px; background: var(--k-inkt); color: var(--k-wit); font-family: var(--wp--preset--font-family--tekst); font-size: 0.875rem; font-weight: 700; letter-spacing: 0; } .k-kort-plaats dl { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 14px 16px; } .k-kort-plaats dt { font-size: 0.875rem; color: var(--k-inkt-zacht); } .k-kort-plaats dd { margin: 2px 0 0; font-weight: 700; } @media (max-width: 760px) { .k-kort-plaats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-kort-plaats dl div:first-child { grid-column: 1 / -1; } } /* Delen met je partner */ .k-delen { margin-top: 20px; padding: 18px 20px; background: var(--k-b2-licht); border: 2px solid var(--k-inkt); } .k-delen[hidden] { display: none; } .k-delen p { margin: 0 0 12px; } .k-delen label { display: block; font-weight: 700; margin-bottom: 6px; } .k-delen-rij { display: flex; gap: 8px; } .k-delen-rij input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; font: inherit; font-size: 0.9375rem; border: 2px solid var(--k-inkt); border-radius: 0; background: var(--k-wit); color: var(--k-inkt); } .k-delen-voet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 12px 0 0 !important; font-size: var(--wp--preset--font-size--klein); color: var(--k-inkt-zacht); } .k-tekstknop { background: none; border: 0; padding: 10px 0; min-height: 44px; font: inherit; font-weight: 700; color: var(--k-inkt); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* Rekenhulp kinderopvangtoeslag */ .k-rekenhulp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; margin-top: 24px; align-items: start; width: min(1180px, calc(100vw - 32px)); margin-left: calc(50% - min(590px, 50vw - 16px)); } .k-rh-invoer { padding: 22px 24px; } .k-rh-invoer label { display: block; font-weight: 700; margin-bottom: 14px; } .k-rh-invoer input, .k-rh-invoer select { display: block; width: 100%; height: 48px; margin-top: 6px; padding: 0 12px; font: inherit; font-size: 1rem; border: 2px solid var(--k-lijn-sterk); border-radius: 0; background: var(--k-wit); color: var(--k-inkt); } .k-rh-invoer input:focus, .k-rh-invoer select:focus { border-color: var(--k-inkt); outline: 3px solid var(--k-b1); outline-offset: 0; } .k-rh-invoer small { display: block; margin-top: 6px; font-weight: 400; font-size: 0.875rem; color: var(--k-inkt-zacht); } .k-rh-kind { border: 0; border-top: 2px dotted var(--k-lijn); margin: 0; padding: 14px 0 6px; min-width: 0; } .k-rh-kind legend { padding: 0; font-family: var(--k-kop); font-weight: 800; font-size: 1.125rem; } .k-rh-velden { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; margin-top: 8px; } .k-rh-velden label { font-size: 0.9375rem; } @media (max-width: 600px) { .k-rh-velden { grid-template-columns: minmax(0, 1fr); } } .k-rh-uitkomst { border: 2px solid var(--k-inkt); background: var(--k-wit); position: sticky; top: 96px; box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-b1); margin-right: var(--k-stapel); } .k-rh-uitkomst [data-uitkomst] { padding: 18px 16px; } .k-rh-zelf { margin: 0 0 14px; max-width: none; } .k-rh-zelf span { display: block; color: var(--k-inkt-zacht); } .k-rh-zelf b { display: block; font-family: var(--k-kop); font-weight: 800; font-size: 2.5rem; line-height: 1.05; letter-spacing: -0.02em; } .k-rh-regels { list-style: none; margin: 0; padding: 0; } .k-rh-regels li { max-width: none; padding: 10px 0; border-top: 2px dotted var(--k-lijn); } .k-rh-regels b, .k-rh-regels span, .k-rh-regels small { display: block; } .k-rh-regels span { font-size: 0.9375rem; } .k-rh-regels small { margin-top: 4px; font-size: 0.875rem; color: var(--k-inkt-zacht); } .k-rh-totaal { margin: 12px 0 0; font-size: 0.875rem; color: var(--k-inkt-zacht); } @media (max-width: 900px) { .k-rekenhulp { grid-template-columns: minmax(0, 1fr); } .k-rh-uitkomst { position: static; } } /* Ronde 2 (Henk, 2026-10-27): "het moet moeders en locaties aanspreken", "meer kleur en opvallende blokken en highlights en leuke animaties". Zelfde palet B, maar de kleuren als vlakken in plaats van als randje. Beweging: blokjes die neerploffen, opstapelen en opkomen bij het scrollen; nooit bij prefers-reduced-motion. */ body { overflow-x: clip; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Markeerstift: een gekleurd blok achter een paar woorden */ .k-markeer { background: linear-gradient(var(--k-markeer, var(--k-b1)), var(--k-markeer, var(--k-b1))) no-repeat 0 88% / 100% 0.42em; color: inherit; padding: 0 0.04em; } .k-markeer-2 { --k-markeer: var(--k-b2); } /* Kop: ingang voor opvanglocaties als blokje, logo dat opspringt */ .k-nav .k-nav-opvang > .wp-block-navigation-item__content { background: var(--k-b2); padding: 10px 14px; } .k-nav .k-nav-opvang > .wp-block-navigation-item__content:hover { background: var(--k-inkt); color: var(--k-wit); text-decoration: none; } /* Knoppen: optillen als een blokje */ .k-knop, .k-knop-2, .k-snel a { transition: transform .15s ease, box-shadow .15s ease, background-color .18s ease, color .18s ease; } @media (hover: hover) { .k-knop:hover, .k-knop-2:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--k-inkt); } .k-stapel, .k-uittreksel, .k-voorbeeld, .k-vandeopvang, .k-contactblok { transition: transform .2s ease, box-shadow .2s ease; } .k-stapel:hover, .k-uittreksel:hover, .k-contactblok:hover { transform: translate(-3px, -3px); } .k-index-regel { transition: background-color .15s ease, box-shadow .15s ease; } .k-index-regel:hover { background: var(--k-soort-licht, var(--k-b1-licht)); box-shadow: -8px 0 0 var(--k-soort-licht, var(--k-b1-licht)), 8px 0 0 var(--k-soort-licht, var(--k-b1-licht)); } } .k-knop:active, .k-knop-2:active { transform: none; box-shadow: none; } /* Voorpagina: gekleurd begin met losse blokken */ .k-voorpagina .wp-block-post-content > .k-sectie:first-child { background: var(--k-b1-licht); position: relative; overflow: hidden; } .k-voorpagina .wp-block-post-content > .k-sectie:first-child::before, .k-voorpagina .wp-block-post-content > .k-sectie:first-child::after { content: ""; position: absolute; pointer-events: none; } .k-voorpagina .wp-block-post-content > .k-sectie:first-child::before { width: 84px; height: 84px; left: -22px; bottom: 56px; background: var(--k-b2); } .k-voorpagina .wp-block-post-content > .k-sectie:first-child::after { width: 34px; height: 34px; right: 5%; top: 30px; background: var(--k-merk); } .k-held { position: relative; z-index: 1; } .k-held .k-zoek-rij { box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-b2); } .k-snel { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; max-width: none; } .k-snel a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; background: var(--k-wit); border: 2px solid var(--k-inkt); font-weight: 700; text-decoration: none; color: var(--k-inkt); } .k-snel a::before { content: ""; width: 12px; height: 12px; background: var(--k-soort, var(--k-merk)); } .k-snel a:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--k-soort, var(--k-merk)); } .k-sectie-papier { background: var(--k-b2-licht); } /* Zo bouw je jullie keuze op: een toren van blokken, onderop de feiten. In de HTML staan ze in leesvolgorde (feiten, vragen, keuze); column-reverse zet ze van onder naar boven. Bewust geen genummerde stappen: die heeft plekko.nl (huisstijl.md, "Niet doen"). */ .k-toren-vak { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: end; } .k-toren { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; } .k-toren li { max-width: none; padding: 20px 24px 22px; border: 2px solid var(--k-inkt); background: var(--k-b1); } .k-toren li + li { margin-bottom: -2px; } .k-toren .k-toren-vragen { width: 88%; margin-left: 5%; background: var(--k-b2); } .k-toren .k-toren-keuze { width: 74%; margin-left: 12%; background: var(--k-merk); color: var(--k-wit); } .k-toren .k-toren-keuze a { color: var(--k-wit); } .k-toren h3 { margin: 0 0 6px; font-size: 1.375rem; } .k-toren p { margin: 0 0 10px; } .k-toren a { font-weight: 700; } @media (max-width: 860px) { .k-toren-vak { grid-template-columns: minmax(0, 1fr); gap: 28px; } .k-toren .k-toren-vragen { width: 94%; margin-left: 3%; } .k-toren .k-toren-keuze { width: 88%; margin-left: 6%; } } /* Voor kinderopvang: donkere band met gekleurde blokken */ .k-sectie-opvang { background: var(--k-inkt); color: var(--k-wit); } .k-sectie-opvang .k-boven, .k-sectie-opvang .k-sectie-intro { color: #D9DBE3; } .k-sectie-opvang .k-boven i { background: var(--k-merk); } .k-sectie-opvang h2 { color: var(--k-wit); } .k-sectie-opvang .k-knop { border-color: var(--k-wit); } .k-sectie-opvang .k-knop:hover { box-shadow: 4px 4px 0 var(--k-b2); } .k-opvang-band { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; } .k-opvang-punten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .k-opvang-punten li { max-width: none; padding: 18px 18px 20px; background: var(--k-b1); color: var(--k-inkt); border: 2px solid var(--k-wit); } .k-opvang-punten li:nth-child(2), .k-opvang-punten li:nth-child(3) { background: var(--k-b2); } .k-opvang-punten li:nth-child(4) { background: var(--k-wit); } .k-opvang-punten b { display: block; font-family: var(--k-kop); font-size: 1.125rem; } @media (max-width: 860px) { .k-opvang-band { grid-template-columns: minmax(0, 1fr); gap: 32px; } } @media (max-width: 420px) { .k-opvang-punten { grid-template-columns: minmax(0, 1fr); } } /* Locatie- en plaatspagina's: de kop op een gekleurd vlak */ .k-route-locatie .k-top, .k-plaats-kop { position: relative; isolation: isolate; } .k-route-locatie .k-top::before, .k-plaats-kop::before { content: ""; position: absolute; z-index: -1; top: -160px; bottom: -36px; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--k-soort-licht, var(--k-b1-licht)); } .k-plaats-kop { padding-bottom: 8px; margin-bottom: 44px; } .k-route-locatie .k-top { margin-bottom: 72px; } /* Naam van de locatie of plaats met de markeerstift in de kleur van de soort; onderstreping, zodat de kop een blok blijft */ .k-route-locatie h1, .k-plaats-kop h1 { text-decoration: underline; text-decoration-color: var(--k-soort, var(--k-b1)); text-decoration-thickness: 0.3em; text-underline-offset: -0.1em; text-decoration-skip-ink: none; } .k-contactblok { background: var(--k-wit); border: 2px solid var(--k-inkt); box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-b2); margin-right: var(--k-stapel); } /* Wat de opvang zelf vertelt: apart van het register, met een framboos kop */ .k-vandeopvang { margin-top: var(--wp--preset--spacing--50); border: 2px solid var(--k-inkt); background: var(--k-wit); box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-merk); margin-right: var(--k-stapel); padding: 0 24px 20px; } .k-vandeopvang-kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0 -24px 18px; padding: 10px 24px; background: var(--k-merk); color: var(--k-wit); font-size: 0.875rem; font-weight: 700; max-width: none; } .k-vandeopvang h2 { font-size: 1.5rem; margin: 0 0 8px; } .k-vandeopvang dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 16px 0; } .k-vandeopvang dt { font-size: 0.875rem; color: var(--k-inkt-zacht); } .k-vandeopvang dd { margin: 2px 0 0; font-weight: 700; } .k-vandeopvang dd small { display: block; font-weight: 400; color: var(--k-inkt-zacht); margin-top: 2px; } @media (max-width: 760px) { .k-vandeopvang dl { grid-template-columns: minmax(0, 1fr); } } .k-van-opvang { display: block; font-size: 0.8125rem; color: var(--k-inkt-zacht); } /* Strook voor wie bij de opvang werkt */ .k-voor-opvang { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; margin: 44px var(--k-stapel) 0 0; padding: 20px 24px; background: var(--k-b2); border: 2px solid var(--k-inkt); box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-inkt); } .k-voor-opvang > div { flex: 1 1 22rem; } .k-voor-opvang .k-boven { color: var(--k-inkt); margin: 0 0 4px; } .k-voor-opvang .k-boven i { background: var(--k-merk); } .k-voor-opvang p:last-child { margin: 0; } /* Formulieren voor opvanglocaties */ .k-formulier { display: grid; gap: 8px; max-width: 40rem; margin-top: 16px; } .k-formulier label { font-weight: 700; } .k-formulier input:not([type="radio"]):not([type="checkbox"]), .k-formulier textarea { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; color: var(--k-inkt); background: var(--k-wit); border: 2px solid var(--k-inkt); border-radius: 0; } .k-formulier input[type="time"] { width: auto; min-width: 7.5rem; } .k-formulier input:focus, .k-formulier textarea:focus { outline: 3px solid var(--k-actie); outline-offset: 2px; } .k-formulier input[aria-invalid="true"] { border-color: var(--k-actie-donker); background: var(--k-b1-licht); } .k-formulier > .k-knop { justify-self: start; margin-top: 12px; } .k-formulier fieldset { display: grid; gap: 8px; min-width: 0; margin: 20px 0 0; padding: 18px 20px 20px; border: 2px solid var(--k-inkt); background: var(--k-wit); box-shadow: 6px 6px 0 var(--k-b2); margin-right: 6px; } .k-formulier fieldset:nth-of-type(even) { box-shadow: 6px 6px 0 var(--k-b1); } .k-formulier legend { font-family: var(--k-kop); font-weight: 800; font-size: 1.25rem; padding: 0 8px; background: var(--k-wit); } .k-lokveld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .k-veldfout { margin: 0; color: var(--k-actie-donker); font-weight: 700; font-size: 0.9375rem; } .k-hint { margin: 0; font-size: 0.9375rem; color: var(--k-inkt-zacht); } .k-dagregel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .k-dagregel > span:first-child { width: 6.5rem; font-weight: 700; } @media (max-width: 560px) { .k-dagregel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .k-dagregel > span:first-child { grid-column: 1 / -1; width: auto; } .k-formulier .k-dagregel input[type="time"] { width: 100%; min-width: 0; } } /* De balk van de rondleidingslijst is voor ouders; op de pagina's voor opvanglocaties zit hij in de weg */ .k-route-aanbieder #k-balk { display: none !important; } .k-keuze { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400 !important; } .k-keuze input { width: 22px; height: 22px; accent-color: var(--k-actie); } .k-smal { max-width: 40rem; padding: 22px 24px; } .k-index-account { grid-template-columns: 2rem minmax(0, 1fr) auto; } .k-index-account small { display: block; } .k-tellingen { margin-top: 4px; color: var(--k-inkt) !important; font-weight: 700; } @media (max-width: 560px) { .k-index-account { grid-template-columns: 2rem minmax(0, 1fr); } .k-index-account .k-knop-2 { grid-column: 2; justify-self: start; } } /* Beweging. Bij het laden: de voorpagina stapelt zich op. Bij het scrollen: blokken komen op (alleen waar de browser dat zonder JavaScript kan, animation-timeline). Nooit met prefers-reduced-motion. */ @keyframes k-op { from { opacity: 0; transform: translateY(28px); } } @keyframes k-plof { 0% { opacity: 0; transform: translateY(-56px) rotate(-4deg); } 60% { opacity: 1; transform: translateY(6px) rotate(1deg); } } @keyframes k-markeer { from { background-size: 0 0.42em; } } @keyframes k-zweef { to { transform: translateY(-16px) rotate(10deg); } } @keyframes k-val { from { opacity: 0; transform: translateY(-36px); } } @keyframes k-pop { 50% { transform: scale(1.18) rotate(-6deg); } } @keyframes k-hup { 40% { transform: translateY(-0.4em) rotate(25deg); } } @keyframes k-vul { from { clip-path: inset(0 100% 0 0); } } @media (prefers-reduced-motion: no-preference) { .k-held h1, .k-held .k-lead, .k-held .k-zoek, .k-snel { animation: k-op .6s cubic-bezier(.2, .8, .2, 1) both; } .k-held .k-lead { animation-delay: .08s; } .k-held .k-zoek { animation-delay: .16s; } .k-snel { animation-delay: .24s; } .k-voorbeeld { animation: k-plof .75s cubic-bezier(.3, 1.3, .5, 1) .25s both; } .k-markeer { animation: k-markeer .7s ease .55s both; } .k-voorpagina .wp-block-post-content > .k-sectie:first-child::before { animation: k-zweef 6s ease-in-out infinite alternate; } .k-voorpagina .wp-block-post-content > .k-sectie:first-child::after { animation: k-zweef 4.5s ease-in-out -2s infinite alternate-reverse; } .k-plus[aria-pressed="true"], .k-knop[aria-pressed="true"] { animation: k-pop .35s cubic-bezier(.3, 1.6, .5, 1); } .k-logo:hover .k-logo-blok { animation: k-hup .5s cubic-bezier(.3, 1.6, .5, 1); } @supports (animation-timeline: view()) { .k-twee > div, .k-uitleg-rl > *, .k-duo > *, .k-vandeopvang, .k-voor-opvang, .k-opvang-band > *, .k-faq details, .k-blok-sectie, .k-formulier fieldset { animation: k-op linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; } /* De toren stapelt zich op: eerst het onderste blok */ .k-toren li { animation: k-val linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; } .k-toren .k-toren-vragen { animation-range: entry 25% entry 75%; } .k-toren .k-toren-keuze { animation-range: entry 50% cover 35%; } .k-staaf, .k-blokjes { animation: k-vul linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; } } } /* Stappenplan en netto per locatie (waardeplan C en D) */ .k-planner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; margin-top: 24px; align-items: start; width: min(1180px, calc(100vw - 32px)); margin-left: calc(50% - min(590px, 50vw - 16px)); } .k-planner-invoer { display: grid; gap: 16px; padding: 22px 24px 24px; } .k-planner fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; } .k-planner legend, .k-planner label { font-weight: 700; } .k-planner-velden, .k-planner-start { display: grid; gap: 14px; } .k-planner label { display: grid; gap: 6px; } .k-planner input[type="date"], .k-planner select, .k-netto-velden input { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; color: var(--k-inkt); background: var(--k-wit); border: 2px solid var(--k-inkt); border-radius: 0; } .k-planner [hidden] { display: none !important; } .k-planner label.k-keuze { display: flex; align-items: center; gap: 10px; font-weight: 400; } .k-planner-start small { font-weight: 400; color: var(--k-inkt-zacht); } .k-planner-uit { border: 2px solid var(--k-inkt); background: var(--k-wit); box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-b2); margin-right: var(--k-stapel); } .k-tijdlijn { list-style: none; margin: 0; padding: 8px 20px 4px; } .k-tijdlijn li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 4px 18px; padding: 14px 0; max-width: none; position: relative; } .k-tijdlijn li + li { border-top: 2px dotted var(--k-lijn); } .k-tijdlijn .k-tijd b { display: block; font-family: var(--k-kop); } .k-tijdlijn .k-tijd small, .k-tijdlijn .k-stap b { display: block; } .k-tijdlijn .k-tijd small { color: var(--k-inkt-zacht); } .k-tijdlijn .k-stap b { margin-bottom: 2px; } .k-tijdlijn li::before { content: ""; position: absolute; left: -20px; top: 18px; width: 10px; height: 10px; background: var(--k-b1); } .k-tijdlijn li.k-tip::before { background: var(--k-b2); } .k-tijdlijn li.k-voorbij { opacity: .55; } .k-planner-agenda { margin: 0; padding: 4px 20px 20px; } @media (max-width: 900px) { .k-planner { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { .k-tijdlijn li { grid-template-columns: minmax(0, 1fr); } } .k-netto-invoer { margin: 20px 0; padding: 18px 20px; background: var(--k-b2-licht); border: 2px solid var(--k-inkt); } .k-netto-invoer p { margin: 0 0 12px; } .k-netto-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 14rem)); gap: 12px 20px; } .k-netto-velden label { display: grid; gap: 6px; font-weight: 700; } @media (max-width: 480px) { .k-netto-velden { grid-template-columns: minmax(0, 1fr); } } /* Ronde 1 van de ideeën (waardeplan §9): opvang overtuigen, rondleiding-stand en inschrijving */ .k-actueel { display: inline-block; padding: 1px 8px; margin-right: 6px; background: var(--k-wit); color: var(--k-merk); font-weight: 700; } .k-kijk { margin: 4px 0 16px; padding: 14px 16px; background: var(--k-b2-licht); } .k-kijk h3 { margin: 0 0 6px; font-size: 1.125rem; } .k-kijk ul { margin: 0; padding-left: 18px; } .k-vdo-antwoorden { margin: 0 0 16px; border: 2px solid var(--k-inkt); } .k-vdo-antwoorden summary { padding: 12px 16px; font-weight: 700; cursor: pointer; } .k-vdo-antwoorden dl { margin: 0; padding: 0 16px 14px; } .k-vdo-antwoorden dt { margin-top: 12px; font-weight: 700; } .k-vdo-antwoorden dd { margin: 4px 0 0; } .k-rl-opvang { margin: 4px 0 6px; padding: 8px 12px; background: var(--k-b1-licht); border-left: 4px solid var(--k-merk); font-size: 0.9375rem; } .k-rl-kijk { margin: 6px 0 0; padding: 8px 12px; background: var(--k-b2-licht); } .k-inschrijving { display: flex; flex-wrap: wrap; gap: 12px 20px; min-width: 0; margin-top: 16px; padding: 14px 16px; border: 2px dashed var(--k-lijn-sterk); } .k-inschrijving label, .k-inschrijving input, .k-inschrijving select { min-width: 0; max-width: 100%; } .k-inschrijving legend { font-weight: 700; padding: 0 6px; } .k-inschrijving label { display: grid; gap: 4px; font-weight: 700; } .k-inschrijving input, .k-inschrijving select { min-height: 44px; padding: 8px 10px; font: inherit; border: 2px solid var(--k-inkt); border-radius: 0; background: var(--k-wit); } .k-kijkregel { display: grid; grid-template-columns: 10rem 7rem 7rem minmax(0, 1fr); gap: 8px 12px; align-items: end; } .k-kijkregel label { display: grid; gap: 4px; } @media (max-width: 640px) { .k-kijkregel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .k-kijkregel label:first-child, .k-kijk-wat { grid-column: 1 / -1; } } .k-zo-zien { margin-top: var(--wp--preset--spacing--60); } .k-nu-straks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 16px 0 8px; } .k-nu-straks > div { padding: 16px 18px; border: 2px solid var(--k-inkt); background: var(--k-wit); } .k-nu-straks > div + div { background: var(--k-b2-licht); } .k-nu-straks dl { margin: 0; display: grid; gap: 10px; } .k-nu-straks dt { font-size: 0.875rem; color: var(--k-inkt-zacht); } .k-nu-straks dd { margin: 2px 0 0; font-weight: 700; } .k-nu-straks dd small { display: block; font-weight: 400; color: var(--k-inkt-zacht); } @media (max-width: 640px) { .k-nu-straks { grid-template-columns: minmax(0, 1fr); } } dialog.k-stand { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 22px 22px 18px; border: 2px solid var(--k-inkt); box-shadow: 10px 10px 0 var(--k-b2); } dialog.k-stand::backdrop { background: rgba(26, 31, 44, .55); } .k-stand-teller { margin: 0; font-size: 0.9375rem; color: var(--k-inkt-zacht); font-weight: 700; } .k-stand-vraag { margin: 10px 0 14px; font-family: var(--k-kop); font-weight: 800; font-size: clamp(1.375rem, 4.5vw, 1.875rem); line-height: 1.25; max-width: none; } .k-stand-opvang { margin: 0 0 14px; padding: 10px 12px; background: var(--k-b1-licht); border-left: 4px solid var(--k-merk); } .k-stand-snel { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .k-stand textarea { width: 100%; padding: 12px; font: inherit; font-size: 1.125rem; border: 2px solid var(--k-inkt); border-radius: 0; } .k-stand-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; } .k-stand-sluit { display: block; margin: 12px auto 0; } /* Afstand vanaf huis en werk, en de keuzehulp (waardeplan §9) */ .k-adressen { margin: 20px 0; border: 2px solid var(--k-inkt); background: var(--k-wit); } .k-adressen summary { padding: 12px 16px; font-weight: 700; cursor: pointer; min-height: 44px; } .k-adressen-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 16rem)) auto; gap: 12px 16px; align-items: end; padding: 0 16px; } .k-adressen-velden label { display: grid; gap: 6px; font-weight: 700; } .k-adressen input { min-height: 48px; padding: 10px 12px; font: inherit; border: 2px solid var(--k-inkt); border-radius: 0; width: 100%; } .k-adressen .k-hint { padding: 10px 16px 14px; max-width: none; } @media (max-width: 640px) { .k-adressen-velden { grid-template-columns: minmax(0, 1fr); } .k-adressen-velden .k-knop-2 { justify-self: start; } } .k-keuzehulp { margin-top: var(--wp--preset--spacing--50); padding: 22px 24px 18px; background: var(--k-b1-licht); border: 2px solid var(--k-inkt); box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-merk); margin-right: var(--k-stapel); } .k-keuzehulp h2 { margin: 0 0 8px; font-size: 1.5rem; } .k-kh-wegingen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin: 14px 0; } .k-kh-wegingen fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .k-kh-wegingen legend { font-weight: 700; margin-bottom: 4px; } .k-kh-wegingen .k-keuze { min-height: 40px; } @media (max-width: 900px) { .k-kh-wegingen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .k-kh-wegingen { grid-template-columns: minmax(0, 1fr); } } .k-kh-uit { margin: 8px 0 0; padding-left: 24px; } .k-kh-uit li { padding: 8px 0; max-width: none; } .k-kh-uit li::marker { font-family: var(--k-kop); font-weight: 800; } .k-kh-uit small { display: block; color: var(--k-inkt-zacht); } /* Contact met de opvang (Ouders.php) en het maandbericht */ .k-ouders { margin-top: 28px; } .k-ouders h2 { font-size: 1.375rem; margin: 0 0 10px; } .k-ouders-vakken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .k-ouders-vak { border: 2px solid var(--k-inkt); background: var(--k-wit); } .k-ouders-vak summary { padding: 14px 16px; font-weight: 700; cursor: pointer; min-height: 44px; } .k-ouders-vak[open] summary { background: var(--k-b2-licht); } .k-ouders-vak .k-formulier { margin: 0; padding: 4px 16px 16px; } @media (max-width: 760px) { .k-ouders-vakken { grid-template-columns: minmax(0, 1fr); } } .k-berichten p { margin: 14px 0 0; } .k-formulier > .k-knop-2 { justify-self: start; } /* Begrippen: inhoudsopgave in twee kolommen */ .k-begrippen-inhoud ul { columns: 2 16rem; column-gap: 32px; margin: 20px 0 8px; padding: 18px 22px 18px 40px; background: var(--k-b2-licht); border: 2px solid var(--k-inkt); max-width: none; } .k-begrippen-inhoud li { break-inside: avoid; padding: 4px 0; } /* Plaatsen als index (Weergave::plaatsen): naam, soorten, staaf met kindplaatsen */ .k-plaatsen .k-index-regel { grid-template-columns: minmax(0, 1fr) 160px 5rem; } @media (max-width: 560px) { .k-plaatsen .k-index-regel { grid-template-columns: minmax(0, 1fr) 4.5rem; } .k-plaatsen .k-staaf { display: none; } } .k-wijken { margin-top: 10px; } .k-wijken-label { font-weight: 700; align-self: center; margin-right: 4px; } .k-toren .k-toren-keuze h3 { color: var(--k-wit); } /* Feiten uit het register per pagina (Weergave::cijfers) */ .k-cijfers { margin-top: var(--wp--preset--spacing--50); padding: 22px 24px 14px; border: 2px solid var(--k-inkt); background: var(--k-wit); box-shadow: var(--k-stapel) var(--k-stapel) 0 var(--k-b1); margin-right: var(--k-stapel); } .k-cijfers h2 { margin: 0 0 12px; font-size: 1.5rem; } .k-cijfers h3 { margin: 18px 0 8px; font-size: 1.125rem; } .k-cijfers > ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .k-cijfers > ul > li { position: relative; padding-left: 22px; max-width: 46em; } .k-cijfers > ul > li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; background: var(--k-b2); } .k-cijfers-kort { list-style: none; margin: 0; padding: 0; columns: 2 18rem; column-gap: 28px; } .k-cijfers-kort li { break-inside: avoid; padding: 4px 0; } .k-cijfers-kort span { color: var(--k-inkt-zacht); font-size: 0.9375rem; } .k-cijfers > ul.k-cijfers-kort { display: block; } /* ========================================================================== Ronde 3 (Henk, 2026-10-28): "grote ronde fonts, felle kleuren, foto's en beleving", eigen versie in de geest van careforkids.com.au. Fredoka voor koppen, Nunito voor tekst (zelf gehost, OFL). Felle kleuren altijd met donkere tekst; framboos alleen voor de primaire knop en accenten. Ronde vormen in plaats van vierkante blokken. Niet zoals de Nederlandse concurrenten (huisstijl.md): geen paars met geel (plekko), geen crème met perzik (kinderopvang.org), geen paars met zalmroze (kiddie.nl), geen donkere voet. ========================================================================== */ :root { --k-inkt: #1B1F3B; --k-inkt-zacht: #4A4F6A; --k-lijn: #E7E3EF; --k-lijn-sterk: #A7A3B8; --k-papier: #FFF9F1; --k-merk: #D1185A; --k-actie: #D1185A; --k-actie-donker: #A50F45; --k-b1: #FF7AA8; --k-b2: #2DD4BF; --k-b3: #FFD23F; --k-b4: #5EC8F2; --k-b1-licht: #FFE6EF; --k-b2-licht: #DCF8F3; --k-b3-licht: #FFF5CF; --k-b4-licht: #E3F5FD; --k-r: 16px; --k-r-groot: 32px; --k-schaduw: 0 12px 32px rgba(27, 31, 59, .10); --k-schaduw-klein: 0 6px 16px rgba(27, 31, 59, .08); --k-stapel: 0px; } body { font-size: 1.0625rem; } h1, h2, h3, .k-logo { font-family: var(--k-kop); } h1 { font-weight: 700; } h2, h3 { font-weight: 600; } /* Logo: ronde stip in plaats van een blokje */ .k-logo { font-weight: 700; letter-spacing: -0.01em; font-size: 34px; } .k-logo-blok { border-radius: 50%; width: 0.32em; height: 0.32em; } /* Kop en menu */ .k-kop { border-bottom: 0; box-shadow: 0 2px 0 var(--k-lijn); } .k-nav .wp-block-navigation-item__content { border-radius: 999px; padding: 10px 14px; transition: background-color .15s ease; } .k-nav .wp-block-navigation-item__content:hover, .k-nav .current-menu-item > .wp-block-navigation-item__content { background: var(--k-b3-licht); text-decoration: none; } .k-nav .k-nav-opvang > .wp-block-navigation-item__content { background: var(--k-b2); } .k-nav .wp-block-navigation__responsive-container-open { border-radius: 999px; } /* Knoppen: pillen met een vrolijke onderrand */ .k-knop, .k-knop-2, .k-snel a, .k-filter a, .k-verder a, .k-plus, .k-tekstknop { border-radius: 999px; } .k-knop { box-shadow: 0 5px 0 var(--k-actie-donker); border: 0; padding: 14px 26px; font-weight: 800; } .k-knop:hover { background: var(--k-actie); transform: translateY(-2px); box-shadow: 0 7px 0 var(--k-actie-donker); } .k-knop:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--k-actie-donker); } .k-knop-2 { border: 2px solid var(--k-inkt); background: var(--k-wit); font-weight: 800; } .k-knop-2:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--k-inkt); background: var(--k-b3-licht); } .k-plus { border-width: 2px; } .k-plus[aria-pressed="true"] { background: var(--k-b2); color: var(--k-inkt); border-color: var(--k-inkt); } /* Invoer */ input[type="search"], input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="month"], input[type="url"], select, textarea { border-radius: 14px !important; } .k-zoek-rij { border-radius: 999px; box-shadow: var(--k-schaduw); border: 2px solid var(--k-inkt); padding-left: 10px; margin-right: 0; overflow: hidden; } .k-held .k-zoek-rij { box-shadow: 0 10px 0 var(--k-b2), var(--k-schaduw); } .k-zoek input[type="search"] { border-radius: 999px !important; } /* Kaarten en vakken: rond, zacht, zonder harde blokschaduw */ .k-stapel, .k-uittreksel, .k-voorbeeld, .k-cijfers, .k-vandeopvang, .k-contactblok, .k-onbekend, .k-melding, .k-keuzehulp, .k-planner-uit, .k-planner-invoer, .k-rh-invoer, .k-rh-uitkomst, .k-formulier fieldset, .k-ouders-vak, .k-adressen, .k-netto-invoer, .k-voor-opvang, .k-kijk, .k-vdo-antwoorden, .k-nu-straks > div, .k-inschrijving, .k-rl, .k-rl-voorbeeld, .k-twee > div, .k-kort-plaats, .k-delen, .k-zo-zien, .k-begrippen-inhoud ul, .k-smal, dialog.k-stand, .k-faq details, .k-vergelijk-wrap { border-radius: var(--k-r-groot); } .k-stapel, .k-uittreksel, .k-voorbeeld, .k-cijfers, .k-vandeopvang, .k-contactblok, .k-keuzehulp, .k-planner-uit, .k-planner-invoer, .k-rh-invoer, .k-rh-uitkomst, .k-formulier fieldset, .k-voor-opvang, .k-rl, .k-rl-voorbeeld, .k-twee > div, .k-kort-plaats, dialog.k-stand { box-shadow: var(--k-schaduw) !important; margin-right: 0 !important; border: 0 !important; } .k-uittreksel, .k-cijfers, .k-vandeopvang, .k-planner-uit, .k-rh-uitkomst, .k-kort-plaats, .k-vergelijk-wrap { overflow: hidden; } .k-uittreksel-kop, .k-vandeopvang-kop, .k-kort-plaats > h2, .k-kort-plaats .k-uittreksel-kop { border-radius: 0; } .k-uittreksel-kop { background: var(--k-inkt); } .k-vandeopvang-kop { background: var(--k-merk); } .k-onbekend { border: 0; background: var(--k-b1-licht); } .k-contactblok { background: var(--k-b2-licht); } .k-melding { border-radius: 20px; background: var(--k-b3-licht); } .k-melding::before { border-radius: 50%; background: var(--k-b3); } .k-voor-opvang { background: var(--k-b2); } .k-cijfers { background: var(--k-wit); } .k-cijfers > ul > li::before, .k-cijfers-kort li::before { border-radius: 50%; } .k-keuzehulp { background: var(--k-b1-licht); } .k-netto-invoer, .k-adressen { border: 0; background: var(--k-b4-licht); } .k-faq details { border: 0 !important; background: var(--k-wit); box-shadow: var(--k-schaduw-klein); margin-bottom: 10px; } .k-faq details summary { border-radius: var(--k-r-groot); } .k-voorbeeld-label { border-radius: 999px; padding: 4px 12px; } .k-voorbeeld { border: 0; } /* Blokjes en markeringen rond */ .k-blokjes i, .k-staaf i, .k-boven i, .k-snel a::before, .k-filter a i, .k-index-groep i, .k-kruimel li + li::before, .k-blok, .k-index-uitleg i { border-radius: 50%; } .k-staaf i { border-radius: 3px; } .k-nr { border-radius: 50%; } .k-markeer { background-size: 100% 0.45em; border-radius: 6px; } .k-route-locatie h1, .k-plaats-kop h1 { text-decoration-thickness: 0.28em; } .k-boven { background: var(--k-wit); padding: 6px 14px; border-radius: 999px; box-shadow: var(--k-schaduw-klein); color: var(--k-inkt); } /* Secties als ronde eilanden met felle tinten */ .k-voorpagina .wp-block-post-content > .k-sectie:first-child { background: var(--k-b3-licht); } .k-voorpagina .wp-block-post-content > .k-sectie:first-child::before { width: 120px; height: 120px; left: -30px; bottom: 40px; border-radius: 50%; background: var(--k-b2); } .k-voorpagina .wp-block-post-content > .k-sectie:first-child::after { width: 46px; height: 46px; right: 6%; top: 34px; border-radius: 50%; background: var(--k-b1); } .k-sectie-papier { background: var(--k-b2-licht); } .k-sectie-opvang { background: var(--k-merk); } .k-sectie-opvang .k-boven { background: var(--k-wit); color: var(--k-inkt); } .k-sectie-opvang .k-sectie-intro { color: #FFF1F6; } .k-sectie-opvang .k-knop { background: var(--k-wit); color: var(--k-merk); box-shadow: 0 5px 0 var(--k-actie-donker); } .k-opvang-punten li { border: 0; border-radius: 24px; box-shadow: 0 6px 0 rgba(0, 0, 0, .12); } .k-opvang-punten li:nth-child(1) { background: var(--k-b3); } .k-opvang-punten li:nth-child(2) { background: var(--k-b2); } .k-opvang-punten li:nth-child(3) { background: var(--k-b4); } .k-opvang-punten li:nth-child(4) { background: var(--k-wit); } /* Toren: ronde speelblokken in felle kleuren */ .k-toren li { border: 0; border-radius: 28px; box-shadow: 0 8px 0 rgba(27, 31, 59, .14); } .k-toren li + li { margin-bottom: 10px; } .k-toren .k-toren-feiten { background: var(--k-b3); } .k-toren .k-toren-vragen { background: var(--k-b2); } .k-toren .k-toren-keuze { background: var(--k-merk); } /* Index, kaart en lijsten */ .k-index-regel { border-radius: 18px; } .k-dorp-kaart, .k-kaart, .leaflet-container { border-radius: var(--k-r-groot); } .k-dorp-kaart { box-shadow: var(--k-schaduw) !important; border: 0 !important; overflow: hidden; } .k-balk { border-radius: 24px 24px 0 0; } .k-vergelijk { border-radius: var(--k-r-groot); } /* Foto's: in een ronde, golvende vorm, met stickers erop */ .k-foto { position: relative; margin: 0; } .k-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; box-shadow: var(--k-schaduw); } .k-foto figcaption { position: absolute; right: 8%; bottom: -6px; font-size: .75rem; color: var(--k-inkt-zacht); background: rgba(255, 255, 255, .85); padding: 2px 10px; border-radius: 999px; } .k-sticker { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--k-wit); border-radius: 999px; box-shadow: var(--k-schaduw); font-weight: 800; font-size: .95rem; line-height: 1.2; max-width: 75%; } .k-sticker i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--k-b2); } .k-sticker-1 { left: -4%; top: 10%; } .k-sticker-2 { right: -2%; bottom: 14%; } .k-sticker-2 i { background: var(--k-merk); } @media (max-width: 900px) { .k-sticker-1 { left: 0; } .k-sticker-2 { right: 0; } } .k-foto-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 5vw, 64px); background: var(--k-b4-licht); } .k-foto-band h2 { margin: 0 0 12px; } @media (max-width: 860px) { .k-foto-band { grid-template-columns: minmax(0, 1fr); } } /* Beweging: zacht stuiteren */ @media (prefers-reduced-motion: no-preference) { .k-sticker-1 { animation: k-dobber 5s ease-in-out infinite alternate; } .k-sticker-2 { animation: k-dobber 6s ease-in-out -2s infinite alternate; } .k-foto img { animation: k-op .7s cubic-bezier(.2, .8, .2, 1) .15s both; } } @keyframes k-dobber { to { transform: translateY(-10px) rotate(-1.5deg); } } /* Ronde 3: de laatste vierkantjes rond (pinnen op de kaart, opsommingen, vragen, links) */ .k-pin { border-radius: 50% !important; } .k-pin-hier { border-radius: 50% 50% 50% 4px !important; } .k-soortregel i, .k-faq summary::after, .k-verder a::before, .k-filter a i, .k-index-groep i, .k-boven i { border-radius: 50%; } .k-voet::before { display: none; } /* Reviews van ouders (Reviews.php): sterren, chip, blok, sterren kiezen */ .k-sterren { position: relative; display: inline-block; vertical-align: -2px; font-size: 1.05rem; line-height: 1; letter-spacing: 2px; color: #D9D6E3; } .k-sterren::before { content: "★★★★★"; } .k-sterren-vol { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #F5A300; } .k-sterren-vol::before { content: "★★★★★"; } .k-sterren-groot { font-size: 1.75rem; } .k-review-kop { margin: 10px 0 0; } .k-review-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--k-wit); border-radius: 999px; box-shadow: var(--k-schaduw-klein); text-decoration: none; color: var(--k-inkt); font-weight: 600; } .k-review-chip span { color: var(--k-inkt-zacht); font-weight: 400; } .k-review-chip-leeg { background: var(--k-b3); } .k-review-chip:hover { transform: translateY(-1px); box-shadow: var(--k-schaduw); } .k-index-review { display: flex !important; align-items: center; gap: 6px; color: var(--k-inkt) !important; font-weight: 700; } .k-index-review .k-sterren { font-size: .85rem; } .k-reviews { margin-top: var(--wp--preset--spacing--50); padding: clamp(20px, 3vw, 32px); background: var(--k-b3-licht); border-radius: var(--k-r-groot); } .k-reviews-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; } .k-reviews-kop h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); } .k-reviews-totaal { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.5rem; } .k-reviews-totaal span { font-size: 1rem; color: var(--k-inkt-zacht); } .k-reviews-onderdelen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; margin: 18px 0; padding: 16px 20px; background: var(--k-wit); border-radius: 22px; } .k-reviews-onderdelen dt { font-size: .9375rem; color: var(--k-inkt-zacht); } .k-reviews-onderdelen dd { margin: 2px 0 0; font-weight: 700; display: flex; gap: 8px; align-items: center; } @media (max-width: 760px) { .k-reviews-onderdelen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .k-reviews-onderdelen { grid-template-columns: minmax(0, 1fr); } } .k-reviews-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .k-reviews-lijst > li { max-width: none; padding: 18px 20px; background: var(--k-wit); border-radius: 22px; box-shadow: var(--k-schaduw-klein); } .k-reviews-lijst header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; font-family: var(--k-kop); font-size: 1.15rem; } .k-review-tekst { margin: 8px 0; } .k-review-meta { margin: 0; font-size: .875rem; color: var(--k-inkt-zacht); } .k-review-reactie { margin-top: 12px; padding: 12px 14px; background: var(--k-b2-licht); border-radius: 16px; font-size: .9375rem; } .k-review-reactie p { margin: 4px 0 0; } .k-review-melden { margin-top: 8px; font-size: .875rem; } .k-review-melden summary { cursor: pointer; color: var(--k-inkt-zacht); min-height: 32px; } .k-review-melden form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 6px; } .k-review-melden select { min-height: 44px; padding: 6px 10px; font: inherit; border: 2px solid var(--k-lijn-sterk); } .k-reviews-leeg { margin: 0; color: var(--k-inkt-zacht); } .k-review-oproep { margin-top: 18px; padding: 18px 20px; background: var(--k-wit); border-radius: 22px; box-shadow: var(--k-schaduw-klein); } .k-review-oproep > p { margin: 0 0 12px; } .k-review-schrijf > summary { list-style: none; display: inline-flex; cursor: pointer; } .k-review-schrijf > summary::-webkit-details-marker { display: none; } .k-review-schrijf[open] > summary { margin-bottom: 8px; } .k-review-formulier fieldset { box-shadow: none !important; background: var(--k-b3-licht); } .k-ster-kies { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 6px 0; border-bottom: 1px dashed var(--k-lijn); } .k-ster-label { font-weight: 700; } .k-ster-knoppen { display: inline-flex; gap: 2px; } .k-ster-knoppen label { position: relative; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; font-size: 1.75rem; color: #D9D6E3; cursor: pointer; border-radius: 50%; } .k-ster-knoppen input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .k-ster-knoppen label:has(input:focus-visible) { outline: 3px solid var(--k-actie); } .k-ster-knoppen:has(input[value="1"]:checked) label:nth-child(-n+1), .k-ster-knoppen:has(input[value="2"]:checked) label:nth-child(-n+2), .k-ster-knoppen:has(input[value="3"]:checked) label:nth-child(-n+3), .k-ster-knoppen:has(input[value="4"]:checked) label:nth-child(-n+4), .k-ster-knoppen:has(input[value="5"]:checked) label:nth-child(-n+5) { color: #F5A300; } .k-ster-knoppen label:hover { transform: scale(1.12); } .k-review-account { padding: 14px 0; border-top: 1px dashed var(--k-lijn); } .k-review-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: clamp(24px, 4vw, 44px); background: var(--k-b3); border-radius: clamp(28px, 4vw, 48px); } .k-review-band h2 { margin: 0 0 6px; } .k-review-band p { margin: 0; } .k-review-band .k-sterren { font-size: 2rem; } .k-review-schrijf[open] > summary.k-knop { background: var(--k-wit); color: var(--k-inkt); border: 2px solid var(--k-inkt); box-shadow: none; } /* Filters, kenmerken, foto's van de opvang en delen via WhatsApp (vergelijking met kiddie.nl, 28-10) */ .k-filters { margin: 18px 0; padding: 16px 20px; background: var(--k-b4-licht); border-radius: 24px; } .k-filters-kop { margin: 0 0 10px; display: flex; gap: 12px; align-items: baseline; } .k-filters-kop span { color: var(--k-inkt-zacht); font-size: .9375rem; } .k-filters-keuzes { display: flex; flex-wrap: wrap; gap: 8px; } .k-filter-keuze { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; background: var(--k-wit); border-radius: 999px; cursor: pointer; font-weight: 600; box-shadow: var(--k-schaduw-klein); } .k-filter-keuze input { width: 18px; height: 18px; accent-color: var(--k-actie); } .k-filter-keuze:has(input:checked) { background: var(--k-b3); } .k-index-regel[hidden], .k-index-groep[hidden] { display: none !important; } .k-kenmerken { list-style: none; margin: 12px 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: none; } .k-kenmerken li { padding: 6px 12px; background: var(--k-b2-licht); border-radius: 999px; font-size: .9375rem; font-weight: 600; max-width: none; } .k-kenmerken-klein li { font-size: .8125rem; padding: 3px 9px; } .k-kenmerk-groep { margin: 12px 0 2px; } .k-galerij { margin-top: var(--wp--preset--spacing--50); } .k-galerij ul { list-style: none; margin: 0; padding: 4px 4px 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 32%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; } .k-galerij li { scroll-snap-align: start; max-width: none; } .k-galerij img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: var(--k-schaduw-klein); } @media (max-width: 600px) { .k-galerij ul { grid-auto-columns: 78%; } } .k-fotos-beheer { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .k-fotos-beheer img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; } .k-deel-wa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; font-weight: 700; color: var(--k-inkt); } .k-deel-wa::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #25D366; } .k-kenmerk-opties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } @media (max-width: 560px) { .k-kenmerk-opties { grid-template-columns: minmax(0, 1fr); } } .k-filters-meer { margin-top: 12px; } .k-filters-meer summary { cursor: pointer; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; padding: 6px 16px; background: var(--k-wit); border-radius: 999px; box-shadow: var(--k-schaduw-klein); } .k-filters-groep { margin: 14px 0 6px; font-weight: 700; font-size: .9375rem; color: var(--k-inkt-zacht); } /* Soorten kinderopvang op de voorpagina */ .k-soorten { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .k-soorten li { max-width: none; padding: 24px 24px 26px; border-radius: 28px; box-shadow: 0 8px 0 rgba(27, 31, 59, .12); } .k-soorten li:nth-child(1) { background: var(--k-b1); } .k-soorten li:nth-child(2) { background: var(--k-b2); } .k-soorten li:nth-child(3) { background: var(--k-b3); } .k-soorten h3 { margin: 0 0 4px; font-size: 1.5rem; } .k-soorten .k-leeftijd { display: inline-block; margin-bottom: 10px; padding: 3px 12px; background: var(--k-wit); border-radius: 999px; font-weight: 800; font-size: .9375rem; } .k-soorten p { margin: 0 0 10px; } .k-soorten a { font-weight: 800; color: var(--k-inkt); } @media (max-width: 860px) { .k-soorten { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Ronde 4 (Henk, 2026-10-28): compleet redesign met careforkids.com.au als voorbeeld (schermafbeeldingen van Henk). Overgenomen is de bouw: een volle band met een grote witte kop en een witte zoekkaart met tabbladen, een regel met een feit en een grote zin met krullen van markeerstift, tegels per fase, een rij pillen en lichte banden over de volle breedte. Eén lettertype: Poppins. Niet overgenomen: paars (dat doen plekko en kiddie.nl). Kwip houdt framboos als merkkleur, met zon, turkoois en lucht. Eén gevulde knop per beeld; de ingang voor kinderopvang in de kop is omrand. ========================================================================== */ :root { --k-inkt: #23233A; --k-inkt-zacht: #55576E; --k-lijn: #ECE6EE; --k-lijn-sterk: #8A8598; --k-papier: #FFF4F8; --k-zon: #FFC83D; --k-t1: #FDE7EF; --k-t2: #FFF3CC; --k-t3: #D7F6F0; --k-t4: #DDF2FC; --k-t5: #E9F7D5; --k-t6: #FFE6DB; --k-r: 14px; --k-r-groot: 22px; --k-schaduw: 0 10px 30px rgba(35, 35, 58, .08); --k-schaduw-klein: 0 4px 14px rgba(35, 35, 58, .07); } body { color: var(--k-inkt); } h1 { font-weight: 600; letter-spacing: -0.03em; } h2 { font-weight: 600; letter-spacing: -0.02em; } h3 { font-weight: 600; letter-spacing: -0.01em; } strong, b, summary { font-weight: 600; } /* Kop: wit, logo in framboos, de huidige pagina onderstreept zoals een tabblad */ .k-kop { box-shadow: none; border-bottom: 1px solid var(--k-lijn); } .k-kop-rij { min-height: 76px; } .k-logo { font-weight: 700; font-size: 32px; letter-spacing: -0.04em; color: var(--k-merk); } .k-logo-blok { background: var(--k-zon); } .k-nav .wp-block-navigation-item__content { font-weight: 500; font-size: .9375rem; padding: 10px 10px; border-radius: 0; background: none; } .k-nav .wp-block-navigation-item__content:hover { background: none; color: var(--k-merk); text-decoration: none; } .k-nav .current-menu-item > .wp-block-navigation-item__content { background: none; color: var(--k-merk); text-decoration: underline; text-decoration-color: var(--k-merk); text-decoration-thickness: 3px; text-underline-offset: 12px; } .k-nav .k-nav-opvang > .wp-block-navigation-item__content { margin-left: 6px; padding: 9px 20px; border: 2px solid var(--k-merk); border-radius: 999px; background: var(--k-wit); color: var(--k-merk); font-weight: 600; } .k-nav .k-nav-opvang > .wp-block-navigation-item__content:hover { background: var(--k-t1); } .k-nav .k-nav-opvang.current-menu-item > .wp-block-navigation-item__content { text-decoration: none; background: var(--k-t1); } /* Knoppen: platte pillen */ .k-knop, .k-knop-2 { border-radius: 999px; font-weight: 600; } .k-knop { padding: 14px 28px; border: 0; box-shadow: none; } .k-knop:hover { background: var(--k-actie-donker); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(209, 24, 90, .28); } .k-knop:active { transform: none; box-shadow: none; } .k-knop-2 { padding: 12px 24px; border: 2px solid var(--k-merk); color: var(--k-merk); background: var(--k-wit); } .k-knop-2:hover { background: var(--k-t1); color: var(--k-actie-donker); transform: none; box-shadow: none; } /* Secties: banden over de volle breedte, licht framboos als tweede kleur */ .k-sectie { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); } .k-sectie-papier { background: var(--k-papier); } .k-sectie-intro { color: var(--k-inkt-zacht); font-size: 1.125rem; line-height: 1.6; } .k-midden { text-align: center; } .k-midden h2, .k-midden .k-sectie-intro { margin-inline: auto; } .k-boven { padding: 0; background: none; box-shadow: none; color: var(--k-merk); font-weight: 600; font-size: .875rem; letter-spacing: .02em; } .k-boven i { background: var(--k-zon); } /* Opening: volle framboos band, grote witte kop, witte zoekkaart met tabbladen */ .k-held4 { background: var(--k-merk); color: var(--k-wit); padding-top: clamp(44px, 8vw, 104px); padding-bottom: clamp(52px, 9vw, 120px); overflow: hidden; } .k-held4-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 4vw, 64px); align-items: center; } .k-held4 h1 { margin: 0; max-width: 10.5em; color: var(--k-wit); font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.04; } .k-held4-sub { margin: clamp(20px, 3vw, 36px) 0 clamp(24px, 3.5vw, 40px); max-width: 26em; color: var(--k-wit); font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.4; } .k-zoekkaart { max-width: 660px; background: var(--k-wit); color: var(--k-inkt); border-radius: 20px; box-shadow: 0 24px 60px rgba(90, 0, 35, .28); } .k-tabs { display: flex; gap: clamp(20px, 3vw, 40px); padding: 0 clamp(18px, 3vw, 28px); border-bottom: 1px solid var(--k-lijn); overflow-x: auto; scrollbar-width: none; } .k-tabs::-webkit-scrollbar { display: none; } .k-tabs > * { flex: none; padding: 18px 0 13px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--k-inkt); font-size: .9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; } .k-tabs a:hover { color: var(--k-merk); border-bottom-color: var(--k-t1); text-decoration: none; } .k-tabs .k-tab-actief { color: var(--k-merk); font-weight: 600; border-bottom-color: var(--k-merk); } .k-zoekkaart .k-zoek { max-width: none; margin: 0; padding: clamp(16px, 2.5vw, 24px) clamp(16px, 3vw, 28px) clamp(18px, 3vw, 28px); } .k-zoekkaart .k-zoek label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .k-zoekkaart .k-zoek-rij { margin: 0; padding: 4px 4px 4px 44px; align-items: center; border: 1.5px solid var(--k-lijn-sterk); border-radius: 999px; box-shadow: none !important; background: var(--k-wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D1185A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") no-repeat 16px 50% / 20px 20px; } .k-zoekkaart .k-zoek-rij:focus-within { outline: 3px solid var(--k-actie); outline-offset: 2px; } .k-zoekkaart .k-zoek input[type="search"] { height: 48px; padding: 0 8px; font-size: 1rem; } .k-zoekkaart .k-zoek input[type="search"]:focus { outline: none; } .k-zoekkaart .k-zoek .k-knop { margin: 0; padding: 12px 30px; } .k-held4-foto img { border-radius: 50% 50% 46% 54% / 56% 48% 52% 44%; box-shadow: 0 24px 60px rgba(90, 0, 35, .3); } .k-held4 .k-sticker, .k-held4 figcaption { color: var(--k-inkt); } @media (max-width: 900px) { .k-held4-raster { grid-template-columns: minmax(0, 1fr); } .k-held4-foto { justify-self: center; width: 100%; max-width: 440px; } } /* Een feit en een grote zin, met krullen van markeerstift */ .k-bewijs { padding-top: clamp(48px, 7vw, 80px); padding-bottom: clamp(52px, 7vw, 88px); text-align: center; } .k-bewijs-regel { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; max-width: none; margin: 0 auto 24px; font-size: .9375rem; } .k-bewijs-regel em { font-weight: 600; } .k-ster-icoon { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--k-zon); stroke-width: 2; stroke-linejoin: round; transform: rotate(-12deg); } .k-bewijs-zin { max-width: 30em; margin: 0 auto; font-size: clamp(1.3rem, 2.4vw, 1.875rem); font-weight: 500; line-height: 1.55; letter-spacing: -0.01em; text-wrap: balance; } .k-krul, .k-streep { position: relative; white-space: nowrap; } .k-krul svg, .k-streep svg { position: absolute; overflow: visible; pointer-events: none; fill: none; stroke: var(--k-zon); stroke-linecap: round; } .k-krul svg { left: -12%; top: -32%; width: 124%; height: 164%; stroke-width: 4; } .k-streep svg { left: -3%; bottom: -0.3em; width: 106%; height: .45em; stroke-width: 6; } @media (prefers-reduced-motion: no-preference) { .k-krul path, .k-streep path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: k-teken .9s ease-out .4s forwards; } .k-streep path { animation-delay: 1.1s; } } @keyframes k-teken { to { stroke-dashoffset: 0; } } /* Begin waar je nu bent: tegels per fase in lichte tinten */ .k-reis { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .k-reis h2 { margin: 0 0 16px; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.12; } .k-reis-tekst p { color: var(--k-inkt-zacht); font-size: 1.125rem; } .k-reis mark, .k-uitleg-rl mark { padding: 0 .12em; border-radius: 8px; background: var(--k-t1); color: var(--k-merk); } .k-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .k-tegels li { max-width: none; } .k-tegels a { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 150px; padding: 20px 20px 66px; border-radius: 16px; color: var(--k-inkt); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .k-tegels strong { font-size: 1.125rem; line-height: 1.3; } .k-tegels span { font-size: .875rem; line-height: 1.45; color: var(--k-inkt-zacht); } .k-tegels a::after { content: "→"; content: "→" / ""; position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--k-wit); color: var(--k-merk); font-weight: 600; transition: transform .2s ease; } .k-tegels a:hover { transform: translateY(-3px); box-shadow: var(--k-schaduw); text-decoration: none; } .k-tegels a:hover::after { transform: translateX(3px); } .k-tegel-1 a { background: var(--k-t1); } .k-tegel-2 a { background: var(--k-t2); } .k-tegel-3 a { background: var(--k-t3); } .k-tegel-4 a { background: var(--k-t4); } .k-tegel-5 a { background: var(--k-t5); } .k-tegel-6 a { background: var(--k-t6); } @media (max-width: 900px) { .k-reis { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .k-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .k-tegels a { min-height: 136px; padding: 16px 16px 62px; } .k-tegels strong { font-size: 1rem; } } /* Drie soorten: lichte tinten in de kleur van de soort */ .k-soorten { text-align: left; } .k-soorten li { padding: 28px; border-radius: 20px; box-shadow: none; } .k-soorten li:nth-child(1) { background: var(--k-b1-licht); } .k-soorten li:nth-child(2) { background: var(--k-b2-licht); } .k-soorten li:nth-child(3) { background: var(--k-b3-licht); } .k-soorten .k-leeftijd { font-weight: 600; } .k-soorten a { font-weight: 600; color: var(--k-merk); } /* Organisaties als rij pillen, de grootste eerst */ .k-org-pillen { display: flex; gap: 16px; margin: 32px 0 28px; padding: 6px 4px 18px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; text-align: left; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); } .k-org-pillen li { flex: none; max-width: none; scroll-snap-align: start; } .k-org-pillen a { display: flex; flex-direction: column; justify-content: center; width: 260px; min-height: 80px; padding: 12px 28px; border: 1.5px solid #EED3DF; border-radius: 999px; background: var(--k-wit); box-shadow: 0 6px 18px rgba(209, 24, 90, .08); color: var(--k-inkt); text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .k-org-pillen span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 600; line-height: 1.3; } .k-org-pillen small { font-size: .8125rem; color: var(--k-inkt-zacht); } .k-org-pillen a:hover { border-color: var(--k-merk); transform: translateY(-2px); text-decoration: none; } /* Toren en kaarten: zachte tinten in plaats van felle vlakken met een harde rand */ .k-toren li { border-radius: 20px; box-shadow: var(--k-schaduw-klein); } .k-toren .k-toren-feiten { background: var(--k-t2); } .k-toren .k-toren-vragen { background: var(--k-t3); } .k-toren .k-toren-keuze { background: var(--k-merk); } /* Voor kinderopvang: dezelfde framboos band als de opening, als slot */ .k-sectie-opvang { background: var(--k-merk); color: var(--k-wit); } .k-sectie-opvang h2, .k-sectie-opvang .k-boven { color: var(--k-wit); } .k-sectie-opvang .k-boven { background: none; } .k-sectie-opvang .k-knop { background: var(--k-wit); color: var(--k-merk); box-shadow: none; } .k-sectie-opvang .k-knop:hover { background: var(--k-t2); color: var(--k-actie-donker); } /* Voet: lichte band over de volle breedte */ .k-voet { border-top: 0; background: var(--k-papier); padding-top: clamp(48px, 7vw, 80px); } .k-voet .k-logo-licht { color: var(--k-merk); } .k-voet-links a { font-size: .9375rem; font-weight: 500; text-decoration: none; } .k-voet-links a:hover { color: var(--k-merk); text-decoration: underline; } .k-voet-gegevens { border-top: 1px solid #F1D9E3; } /* Ronde 4, na de eerste toets: */ /* De voorpagina begint direct onder de kop en loopt door tot de voet */ .k-hoofd.k-voorpagina { padding-top: 0; padding-bottom: 0; } /* De index van plaatsen deelt de klasse k-plaatsen met de blokjes; die maken er een inline-flex van */ .k-index.k-plaatsen { display: block; } .k-midden p { margin-inline: auto; } .k-sectie-opvang .k-sticker, .k-sectie-opvang figcaption { color: var(--k-inkt); } /* Laatste vierkantjes rond: nummers en indruk in het voorbeeld van de rondleidingslijst */ .k-rl ol li::before { border-radius: 50%; background: var(--k-t1); color: var(--k-merk); font-weight: 600; } .k-rl-voorbeeld-indruk span { padding: 6px 14px; border: 1.5px solid var(--k-lijn-sterk); border-radius: 999px; font-weight: 600; } .k-rl-voorbeeld-indruk span:first-child { border-color: var(--k-merk); background: var(--k-t1); color: var(--k-merk); } .k-voorbeeld-label { background: var(--k-merk); } .k-voet { border-top: 1px solid #F1D9E3; } @media (max-width: 560px) { .k-plaatsen .k-index-getal { grid-column: auto; grid-row: auto; text-align: right; } } /* Poppins breekt lelijk af; koppen alleen op een spatie laten breken */ h1, h2 { hyphens: manual; } .k-review-band > p:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .k-review-band .k-knop-2 { border-color: var(--k-inkt); color: var(--k-inkt); } @media (max-width: 480px) { .k-zoekkaart .k-zoek-rij { padding-left: 38px; background-position: 13px 50%; } .k-zoekkaart .k-zoek .k-knop { padding: 12px 20px; } .k-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); } } @media (max-width: 420px) { h1 { hyphens: auto; } } /* Gewone pagina's: de titel op een lichte band, net als plaats- en locatiepagina's */ .k-hoofd:not(.k-voorpagina) { position: relative; isolation: isolate; } .k-paginatitel { position: relative; margin-bottom: 64px !important; } .k-paginatitel::before { content: ""; position: absolute; z-index: -1; top: -200px; bottom: -32px; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--k-papier); } /* Balk met de rondleidingslijst: wit en zwevend, met omrande pillen */ .k-balk { left: 12px; right: 12px; bottom: 12px; background: var(--k-wit); color: var(--k-inkt); border-radius: 20px; box-shadow: 0 -4px 30px rgba(35, 35, 58, .18); } .k-balk :focus-visible { outline-color: var(--k-merk); } .k-balk a { border: 2px solid var(--k-merk); border-radius: 999px; color: var(--k-merk); font-weight: 600; padding: 8px 18px; } .k-balk a:hover { background: var(--k-t1); color: var(--k-actie-donker); } .k-balk p { font-weight: 600; } /* Framboos op een lichte tint haalt net geen 4,5:1; daar de donkere framboos */ .k-soorten a, .k-rl ol li::before, .k-rl-voorbeeld-indruk span:first-child, .k-reis mark, .k-uitleg-rl mark, .k-nav .k-nav-opvang > .wp-block-navigation-item__content:hover, .k-nav .k-nav-opvang.current-menu-item > .wp-block-navigation-item__content { color: var(--k-actie-donker); } /* Tot 1020 px past het hele menu niet naast het logo: dan de menuknop, net als op de telefoon */ @media (min-width: 600px) and (max-width: 1020px) { .k-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .k-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } /* Open menu: grote, links uitgelijnde regels */ .k-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 20px 24px; } .k-nav .is-menu-open .wp-block-navigation__responsive-container-content, .k-nav .is-menu-open .wp-block-navigation__container { align-items: flex-start !important; gap: 4px; } .k-nav .is-menu-open .wp-block-navigation-item__content { font-size: 1.25rem; font-weight: 600; padding: 10px 0; } .k-nav .is-menu-open .k-nav-opvang > .wp-block-navigation-item__content { margin: 12px 0 0; padding: 10px 22px; font-size: 1.0625rem; } /* Henk, 28-10: framboos alleen voor knoppen; grote vlakken in turkoois of lucht, met donkere tekst */ .k-held4 { background: var(--k-b2); color: var(--k-inkt); } .k-held4 h1, .k-held4-sub, .k-held4 .k-boven { color: var(--k-inkt); } .k-held4-foto img { box-shadow: 0 24px 60px rgba(0, 80, 70, .22); } .k-sectie-opvang { background: var(--k-b4); color: var(--k-inkt); } .k-sectie-opvang h2, .k-sectie-opvang .k-boven, .k-sectie-opvang .k-sectie-intro { color: var(--k-inkt); } .k-sectie-opvang .k-knop { background: var(--k-actie); color: var(--k-wit); } .k-sectie-opvang .k-knop:hover { background: var(--k-actie-donker); color: var(--k-wit); } .k-toren .k-toren-keuze { background: var(--k-b4); color: var(--k-inkt); } .k-toren .k-toren-keuze h3, .k-toren .k-toren-keuze a { color: var(--k-inkt); } .k-voorbeeld-label { background: var(--k-inkt); } /* Henk, 28-10: alle organisaties zichtbaar over een paar regels, niet zijwaarts scrollen */ .k-org-pillen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; overflow: visible; padding: 6px 0 0; } .k-org-pillen li { flex: initial; } .k-org-pillen a { width: auto; height: 100%; } /* ========================================================================== Henk, 28-10: "Inspiratie betekent niet dat je het letterlijk zo moet doen." Wat ronde 4 letterlijk van careforkids.com.au overnam (zoekkaart met tabbladen, sticker-pillen op een blobfoto, een regel met een ster, krullen van markeerstift, pastel tegels met een rondje-pijl, een rij pillen) is vervangen door vormen uit Kwip zelf: het rondleidingskaartje, de speelgoedblokjes van het logo en de index met staven. ========================================================================== */ /* Zoekkaart als kaartje: zoeken bovenaan, een afscheurstrook met wat er in het register staat */ .k-zoekkaart { position: relative; box-shadow: 0 24px 60px rgba(0, 80, 70, .22); } .k-zoekkaart .k-zoek { padding-top: clamp(18px, 3vw, 28px); } .k-zoekkaart-stub { position: relative; display: flex; align-items: center; gap: 10px; max-width: none; margin: 0; padding: 14px clamp(18px, 3vw, 28px) 16px; border-top: 2px dashed #CFC8D4; color: var(--k-inkt-zacht); font-size: .875rem; line-height: 1.45; } .k-zoekkaart-stub::before, .k-zoekkaart-stub::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--k-b2); } .k-zoekkaart-stub::before { left: -10px; } .k-zoekkaart-stub::after { right: -10px; } .k-zoekkaart-stub i { flex: none; width: 13px; height: 13px; border-radius: 3px; background: var(--k-zon); transform: rotate(-8deg); } /* Foto's: een rechthoek met ronde hoeken en twee speelgoedblokjes erachter, in plaats van een blobvorm met stickers */ .k-foto { isolation: isolate; } .k-foto img, .k-held4-foto img { border-radius: var(--k-r-groot); } .k-foto::before, .k-foto::after { content: ""; position: absolute; z-index: -1; aspect-ratio: 1; border-radius: 12px; } .k-foto::before { width: 24%; right: -4%; top: -6%; background: var(--k-zon); transform: rotate(8deg); } .k-foto::after { width: 15%; left: -4%; bottom: -6%; background: var(--k-b1); transform: rotate(-10deg); } .k-sectie-opvang .k-foto::after { background: var(--k-b2); } @media (max-width: 600px) { .k-foto::before { right: -2%; } .k-foto::after { left: -2%; } } /* Een blokje achter een woord, zoals achter "kwip" in het logo; het valt erin bij het laden */ .k-blokwoord, .k-reis mark, .k-uitleg-rl mark { position: relative; z-index: 0; padding: 0 .12em; background: none; color: inherit; white-space: nowrap; } .k-blokwoord::before, .k-reis mark::before, .k-uitleg-rl mark::before { content: ""; position: absolute; z-index: -1; inset: .16em -.04em .02em; border-radius: 6px; background: var(--k-zon); transform: rotate(var(--k-draai, -2deg)); } .k-blokwoord-2::before, .k-uitleg-rl mark::before { --k-draai: 1.5deg; background: var(--k-b2); } @keyframes k-blokval { from { opacity: 0; transform: translateY(-1.1em) rotate(-16deg); } } @media (prefers-reduced-motion: no-preference) { .k-blokwoord::before { animation: k-blokval .65s cubic-bezier(.3, 1.5, .5, 1) .35s both; } .k-blokwoord-2::before { animation-delay: .95s; } } /* Begin waar je nu bent: een route met blokjes als haltes, geen tegels */ .k-route { position: relative; margin: 0; padding: 0; list-style: none; } .k-route::before { content: ""; position: absolute; left: 17px; top: 30px; bottom: 30px; width: 3px; background: repeating-linear-gradient(var(--k-lijn-sterk) 0 6px, transparent 6px 13px); } .k-route li { position: relative; max-width: none; } .k-route a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 18px; align-items: center; padding: 12px 18px 12px 0; border-radius: 14px; color: var(--k-inkt); text-decoration: none; transition: background-color .2s ease; } .k-route a::before { content: ""; grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 9px; background: var(--k-blok, var(--k-b1)); box-shadow: inset 0 -5px 0 rgba(35, 35, 58, .1); transform: rotate(-5deg); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); } .k-route li:nth-child(2) { --k-blok: var(--k-b2); } .k-route li:nth-child(3) { --k-blok: var(--k-b3); } .k-route li:nth-child(4) { --k-blok: var(--k-b4); } .k-route li:nth-child(5) { --k-blok: var(--k-zon); } .k-route strong { grid-column: 2; font-size: 1.125rem; line-height: 1.3; } .k-route span { grid-column: 2; color: var(--k-inkt-zacht); font-size: .9375rem; line-height: 1.4; } .k-route a::after { content: "→"; content: "→" / ""; grid-column: 3; grid-row: 1 / span 2; color: var(--k-actie-donker); font-weight: 600; font-size: 1.25rem; transition: transform .2s ease; } .k-route a:hover { background: var(--k-papier); text-decoration: none; } .k-route a:hover::before { transform: rotate(6deg) translateY(-3px); } .k-route a:hover::after { transform: translateX(4px); } /* Drie soorten als liniaal van 0 tot 12 jaar: één blokje per levensjaar */ .k-liniaal { max-width: 920px; margin: 32px auto 0; display: block; text-align: left; } .k-liniaal li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 8px 32px; max-width: none; padding: 22px 0; border-radius: 0; background: none !important; border-top: 2px dotted var(--k-lijn); } .k-liniaal li.k-liniaal-as { padding: 0 0 8px; border-top: 0; } .k-liniaal-as > span:last-child { position: relative; display: block; height: 1.4em; font-size: .8125rem; font-weight: 600; color: var(--k-inkt-zacht); } .k-liniaal-as b { position: absolute; top: 0; font-weight: 600; } .k-liniaal-as b:nth-child(2) { left: calc(100% / 3); } .k-liniaal-as b:nth-child(3) { right: 0; } .k-liniaal h3 { margin: 0; font-size: 1.375rem; } .k-liniaal .k-leeftijd { margin: 2px 0 0; padding: 0; background: none; font-weight: 600; color: var(--k-inkt-zacht); } .k-jaren { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin: 4px 0 14px; } .k-jaren i { height: 22px; border-radius: 5px; background: #EDE6EE; } .k-jaren i.k-aan { background: var(--k-soort); box-shadow: inset 0 -4px 0 rgba(35, 35, 58, .12); } .k-liniaal p { margin: 0 0 8px; } @media (max-width: 700px) { .k-liniaal li { grid-template-columns: minmax(0, 1fr); } .k-liniaal li.k-liniaal-as > span:first-child { display: none; } } /* Organisaties als index, net als de plaatsen: staaf van blokjes naar verhouding */ .k-org-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 28px 0 32px; text-align: left; } .k-org-index .k-index-regel { grid-template-columns: minmax(0, 1fr) 150px 6.5rem; border-top: 0; border-bottom: 2px dotted var(--k-lijn); } .k-org-index .k-index-naam a { color: var(--k-inkt); } .k-org-index .k-index-getal { text-align: right; font-weight: 600; } .k-org-index .k-staaf i { background: var(--k-b2); } @media (max-width: 860px) { .k-org-index { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .k-org-index .k-index-regel { grid-template-columns: minmax(0, 1fr) 6rem; } .k-org-index .k-staaf { display: none; } } /* Lijstje met blokjes in plaats van stickers op de foto */ .k-blokjeslijst { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; } .k-blokjeslijst li { display: flex; align-items: center; gap: 12px; max-width: none; font-weight: 600; } .k-blokjeslijst li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 3px; background: var(--k-zon); transform: rotate(-8deg); } .k-blokjeslijst li:nth-child(2)::before { background: var(--k-b1); transform: rotate(6deg); } /* Kinderopvang regelen: inleiding met het beeld ernaast */ .k-regelen-kop { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .k-regelen-kop .k-lead { margin: 0; } @media (max-width: 860px) { .k-regelen-kop { grid-template-columns: minmax(0, 1fr); } .k-regelen-kop .k-foto { max-width: 440px; } } /* Locatiepagina: links naar de kenmerkpagina's van de plaats */ .k-kenmerk-links { font-size: .9375rem; color: var(--k-inkt-zacht); } /* Na de toets: "Gastouderopvang" breekt niet af, de pijlen van de route blijven bij de tekst */ @media (min-width: 701px) { .k-liniaal li { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } } .k-liniaal h3 { overflow-wrap: normal; hyphens: manual; } .k-route { max-width: 560px; } .k-bewijs { padding-bottom: clamp(32px, 5vw, 56px); } /* Henk, 28-10: Nunito in plaats van Poppins, ronder en minder gangbaar. Nunito oogt lichter dan Poppins, dus koppen 800 en knoppen, menu en nadruk 700. */ h1, h2, h3 { font-weight: 800; letter-spacing: -0.015em; } h1 { letter-spacing: -0.02em; } strong, b, summary { font-weight: 700; } .k-knop, .k-knop-2, .k-nav .wp-block-navigation-item__content, .k-balk a { font-weight: 700; } .k-logo { font-weight: 900; } .k-held4-sub { font-weight: 700; } .k-bewijs-zin { font-weight: 600; } /* Nunito 400 is dun voor lopende tekst; 500 leest rustiger */ body { font-weight: 500; } /* Voorpagina: kenmerkpagina's per kenmerk, als regels onder de index van plaatsen */ .k-kenmerkblok { margin-top: clamp(36px, 5vw, 56px); } .k-kenmerkblok h3 { margin: 0 0 8px; font-size: 1.375rem; } .k-kenmerkrij { margin: 0; padding: 0; list-style: none; } .k-kenmerkrij li { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 4px 24px; align-items: baseline; max-width: none; padding: 12px 0; border-bottom: 2px dotted var(--k-lijn); } .k-kenmerkrij b { display: flex; align-items: center; gap: 10px; } .k-kenmerkrij b::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--k-zon); transform: rotate(-8deg); } .k-kenmerkrij li:nth-child(even) b::before { background: var(--k-b2); transform: rotate(6deg); } .k-kenmerkrij a { font-weight: 700; } .k-kenmerkrij small { color: var(--k-inkt-zacht); } @media (max-width: 700px) { .k-kenmerkrij li { grid-template-columns: minmax(0, 1fr); } .k-kenmerkrij span { padding-left: 22px; } } /* Formulier van de opvang: kenmerken waar ouders op zoeken (die kunnen een eigen pagina per plaats krijgen) */ .k-gezocht { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--k-t2); color: var(--k-inkt); font-size: .75rem; font-weight: 700; white-space: nowrap; } .k-kenmerkblok h2 { margin: 0 0 8px; font-size: 1.5rem; } .k-keuze input { flex: none; } /* ========================================================================== Henk, 28-10: "loopt niet lekker", "logo saai", "tabellen onoverzichtelijk en saai", "titels slecht leesbaar, te weinig ruimte eronder". Logo met een hartje op de i, de kop sluit aan op de pagina, titels zonder markeerstreep met lucht eronder, indexen met een balk en gekleurde labels, de vergelijking in groepen. ========================================================================== */ /* Logo: het puntje op de i is een hartje dat klopt als je erover gaat */ .k-logo { align-items: baseline; } .k-logo-i { position: relative; display: inline-block; } .k-hart { position: absolute; left: 50%; bottom: .6em; width: .4em; height: .37em; transform: translateX(-50%); fill: var(--k-zon); overflow: visible; } @keyframes k-klop { 30% { transform: translateX(-50%) scale(1.35); } 60% { transform: translateX(-50%) scale(.92); } } @media (prefers-reduced-motion: no-preference) { .k-logo:hover .k-hart { animation: k-klop .6s ease; } } /* De kop sluit direct aan op de pagina, zonder witte strook ertussen */ .wp-site-blocks > .k-hoofd { margin-block-start: 0; } /* Titels: geen markeerstreep door de letters, rustiger maat, en altijd lucht onder het gekleurde vlak */ .k-route-locatie h1, .k-plaats-kop h1 { text-decoration: none; } .k-route-locatie h1, .k-plaats-kop h1, h1.k-paginatitel { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; max-width: 20em; } .k-plaats-kop::before, .k-route-locatie .k-top::before { bottom: -40px; } .k-plaats-kop { margin-bottom: 96px; } .k-route-locatie .k-top { margin-bottom: 96px; } h1.k-paginatitel { margin-bottom: 96px !important; } .k-paginatitel::before { bottom: -40px; } /* Nog geen reviews: gewone tekst met een link, geen knop */ .k-review-leeg { margin: 6px 0 0; color: var(--k-inkt-zacht); } .k-review-leeg a { font-weight: 700; color: var(--k-inkt); } /* In het kort: licht blok met gekleurde streepjes per gegeven, drie naast elkaar */ .k-kort-plaats { border: 0; border-radius: var(--k-r-groot); background: var(--k-wit); box-shadow: var(--k-schaduw); padding: 22px 26px 24px; } .k-kort-plaats > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 0; background: none; color: var(--k-inkt); font-family: var(--k-kop); font-size: 1.25rem; font-weight: 800; } .k-kort-plaats > h2::before { content: ""; width: 13px; height: 13px; border-radius: 3px; background: var(--k-zon); transform: rotate(-8deg); } .k-kort-plaats dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; padding: 0; } .k-kort-plaats dl div:first-child { grid-column: auto; } .k-kort-plaats dl > div { padding-left: 14px; border-left: 4px solid var(--k-b2); } .k-kort-plaats dl > div:nth-child(3n+2) { border-left-color: var(--k-b1); } .k-kort-plaats dl > div:nth-child(3n) { border-left-color: var(--k-zon); } .k-kort-plaats dd { font-size: 1.0625rem; font-weight: 800; line-height: 1.4; } @media (max-width: 760px) { .k-kort-plaats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-kort-plaats dl div:first-child { grid-column: 1 / -1; } } /* Indexen: regels met lucht, een doorlopende balk in plaats van streepjes, kleur per soort */ .k-index-regel { padding: 14px 10px; border-radius: 0; } .k-index-regel + .k-index-regel, .k-org-index .k-index-regel { border-top: 1px solid var(--k-lijn); border-bottom: 0; } .k-index-regel:hover { background: var(--k-papier); } .k-index-naam a { font-size: 1.0625rem; font-weight: 800; color: var(--k-inkt); } .k-index-naam small { display: block; margin-top: 3px; font-size: .875rem; color: var(--k-inkt-zacht); } .k-staaf { display: block; position: relative; height: 12px; border-radius: 999px; background: #F1ECF2; overflow: hidden; } .k-staaf i { display: none; } .k-staaf::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: max(6px, calc(var(--k-deel, 0) * 100%)); border-radius: 999px; background: var(--k-soort, var(--k-b2)); } .k-staaf-delen::before { display: none; } .k-staaf-delen > span { display: flex; gap: 2px; height: 100%; width: max(6px, calc(var(--k-deel, 0) * 100%)); } .k-staaf-delen b { min-width: 3px; background: var(--k-soort); } .k-staaf-delen b:first-child { border-radius: 999px 0 0 999px; } .k-staaf-delen b:last-child { border-radius: 0 999px 999px 0; } .k-staaf-delen b:only-child { border-radius: 999px; } .k-index-getal { font-weight: 800; } .k-index-soorten { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: .875rem; font-weight: 700; } .k-index-soorten > span { display: inline-flex; align-items: center; gap: 6px; } .k-index-soorten i { width: 10px; height: 10px; border-radius: 3px; background: var(--k-soort); } .k-plaatsen .k-index-regel { grid-template-columns: minmax(0, 1fr) 220px 7.5rem; gap: 6px 24px; } .k-org-index .k-index-regel { grid-template-columns: minmax(0, 1fr) 140px 6.5rem; } @media (max-width: 760px) { .k-plaatsen .k-index-regel { grid-template-columns: minmax(0, 1fr) 6.5rem; } .k-plaatsen .k-staaf { grid-column: 1 / -1; grid-row: 2; } } @media (max-width: 560px) { .k-org-index .k-index-regel { grid-template-columns: minmax(0, 1fr) 6rem; } } /* Vergelijken: breder, in groepen, rustige kop met kleine knoppen, ja/nee als label */ .k-vergelijk-wrap { overflow-x: auto; width: min(1100px, calc(100vw - 32px)); margin: 24px 0 0 calc(50% - min(550px, 50vw - 16px)); border: 0; border-radius: var(--k-r-groot); box-shadow: var(--k-schaduw); } .k-vergelijk thead th { padding-top: 16px; padding-bottom: 16px; font-size: 1.0625rem; font-weight: 800; } .k-vergelijk thead .k-knop-klein { min-height: 32px; margin-top: 8px; padding: 4px 12px; border-width: 1.5px; font-size: .8125rem; background: transparent; color: var(--k-wit); border-color: rgba(255, 255, 255, .55); } .k-vergelijk thead .k-knop-klein:hover { background: rgba(255, 255, 255, .12); color: var(--k-wit); } .k-vergelijk tbody tr:nth-child(even) td, .k-vergelijk tbody tr:nth-child(even) th { background: inherit; } .k-vergelijk tbody td, .k-vergelijk tbody th[scope="row"] { border-top: 1px solid var(--k-lijn); background: var(--k-wit); } .k-vergelijk .k-rij-groep th { padding: 18px 14px 8px; border-top: 0; background: var(--k-wit); color: var(--k-actie-donker); font-family: var(--k-kop); font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .k-vergelijk .k-rij-onbekend td { color: var(--k-inkt-zacht); font-style: italic; } .k-vergelijk .k-rij-eigen td, .k-vergelijk .k-rij-eigen th { background: var(--k-papier); } .k-jn { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: .875rem; } .k-jn-ja { background: var(--k-t3); } .k-jn-nee { background: #F1ECF2; color: var(--k-inkt-zacht); } /* Na de toets: plaatsen compact (labels en gemeente op één regel), balk met de verdeling per soort, op /kinderopvang/ in twee kolommen */ .k-index-soorten small { display: inline; margin: 0; font-weight: 400; } .k-staaf-delen > span { width: 100%; } .k-plaatsen .k-index-regel { padding-top: 12px; padding-bottom: 12px; } @media (min-width: 1000px) { .k-route-overzicht .k-plaatsen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } .k-route-overzicht .k-plaatsen .k-index-regel { grid-template-columns: minmax(0, 1fr) 110px 6.5rem; gap: 6px 18px; border-top: 0; border-bottom: 1px solid var(--k-lijn); } } /* Henk, 28-10: logo groter; bij klikken geen vierkantje meer (wel een rond kader voor wie met het toetsenbord werkt) */ .k-kop-rij { min-height: 84px; } .k-logo { font-size: 42px; -webkit-tap-highlight-color: transparent; } .k-logo:focus:not(:focus-visible) { outline: none; } .k-logo:focus-visible { outline-offset: 8px; border-radius: 12px; } @media (max-width: 600px) { .k-logo { font-size: 36px; } } /* Het hartje komt terug in het ontwerp: op de i van "feiten" in de opening (het woord in rood) en als stip bij de bovenregels. Framboos haalt op turkoois geen 3:1, deze diepere tint wel (3,5:1, grote letters). De echte i blijft staan, zodat de tekst "feiten" blijft; het hartje ligt over de punt. */ .k-rood { color: #B8124F; } .k-hart-i { position: relative; display: inline-block; } .k-hart-i .k-hart { bottom: .6em; width: .5em; height: .46em; } @media (prefers-reduced-motion: no-preference) { .k-held4 .k-hart { animation: k-klop .7s ease 1s both; } } .k-boven i { width: 14px; height: 13px; border-radius: 0; background: var(--k-zon); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.4l-1.6-1.5C4.6 14.6.8 11.2.8 7 .8 3.6 3.4 1 6.8 1c1.9 0 3.8.9 5.2 2.4C13.4 1.9 15.3 1 17.2 1c3.4 0 6 2.6 6 6 0 4.2-3.8 7.6-9.6 12.9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.4l-1.6-1.5C4.6 14.6.8 11.2.8 7 .8 3.6 3.4 1 6.8 1c1.9 0 3.8.9 5.2 2.4C13.4 1.9 15.3 1 17.2 1c3.4 0 6 2.6 6 6 0 4.2-3.8 7.6-9.6 12.9z'/%3E%3C/svg%3E") center / contain no-repeat; } .k-sectie-opvang .k-boven i, .k-voor-opvang .k-boven i { background: #B8124F; } /* Hartje als teken, rood op licht: bij de review-oproep en bij "Goed gevoel" in de rondleidingslijst */ .k-hartje { display: inline-block; width: 1em; height: .92em; margin-right: .35em; vertical-align: -0.12em; background: #B8124F; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.4l-1.6-1.5C4.6 14.6.8 11.2.8 7 .8 3.6 3.4 1 6.8 1c1.9 0 3.8.9 5.2 2.4C13.4 1.9 15.3 1 17.2 1c3.4 0 6 2.6 6 6 0 4.2-3.8 7.6-9.6 12.9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.4l-1.6-1.5C4.6 14.6.8 11.2.8 7 .8 3.6 3.4 1 6.8 1c1.9 0 3.8.9 5.2 2.4C13.4 1.9 15.3 1 17.2 1c3.4 0 6 2.6 6 6 0 4.2-3.8 7.6-9.6 12.9z'/%3E%3C/svg%3E") center / contain no-repeat; } .k-hartje-groot { display: block; width: 44px; height: 40px; margin: 0 0 12px; } .k-indruk-keuzes .k-hartje { margin-right: .25em; } @media (prefers-reduced-motion: no-preference) { .k-indruk-keuzes input:checked + .k-hartje { animation: k-pop .45s cubic-bezier(.3, 1.6, .5, 1); } .k-review-band .k-hartje-groot { animation: k-klop-los 1.4s ease-in-out 1s 2; } } @keyframes k-klop-los { 15% { transform: scale(1.2); } 30% { transform: scale(.95); } 45% { transform: scale(1.12); } 60% { transform: none; } } /* Henk, 28-10: het zoekveld buiten de opening liep raar (een rood kader in de donkere pil). Overal hetzelfde als in de opening: één lichte pil met een speldje, de knop erin, en bij focus één kader om de hele pil. */ .k-zoek-rij { align-items: center; margin-right: 0; padding: 4px 4px 4px 44px; border: 1.5px solid var(--k-lijn-sterk); border-radius: 999px; overflow: visible; box-shadow: var(--k-schaduw-klein); background: var(--k-wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D1185A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") no-repeat 16px 50% / 20px 20px; } .k-held .k-zoek-rij { box-shadow: var(--k-schaduw-klein); } .k-zoek-rij:focus-within { outline: 3px solid var(--k-actie); outline-offset: 2px; border-color: var(--k-inkt); } .k-zoek input[type="search"] { height: 48px; padding: 0 8px; font-size: 1.0625rem; } .k-zoek input[type="search"]:focus { outline: none; } .k-zoek .k-knop { margin: 0; min-height: 48px; padding: 12px 28px; } @media (max-width: 480px) { .k-zoek-rij { padding-left: 38px; background-position: 13px 50%; } .k-zoek .k-knop { padding: 12px 20px; } } /* Bij focus één rode rand in plaats van twee ringen; op de telefoon past de voorbeeldtekst */ .k-zoek-rij:focus-within, .k-zoekkaart .k-zoek-rij:focus-within { outline: 3px solid var(--k-actie); outline-offset: -2px; border-color: transparent; } @media (max-width: 480px) { .k-zoek input[type="search"] { font-size: .9375rem; } } /* Abonnement in het account: eigen vlak, en na terugkomen van Mollie niet onder de vaste kop */ .k-abonnement { scroll-margin-top: 110px; margin: 0 0 40px; padding: 22px 26px 24px; border-radius: var(--k-r-groot); background: var(--k-papier); } .k-abonnement h2 { margin-top: 0; } .k-abonnement-stop summary { cursor: pointer; font-weight: 700; } /* Henk, 28-10: rood op turkoois leest slecht. "feiten" staat nu op een wit blokje (zoals de blokjes achter woorden), rood op wit haalt 6,5:1. Het hartje steekt erboven uit. */ .k-held4 .k-rood { position: relative; z-index: 0; padding: 0 .14em; } .k-held4 .k-rood::before { content: ""; position: absolute; z-index: -1; inset: .14em -.02em .02em; border-radius: .14em; background: var(--k-wit); transform: rotate(-1.5deg); box-shadow: 0 6px 0 rgba(0, 80, 70, .12); } @media (prefers-reduced-motion: no-preference) { .k-held4 .k-rood::before { animation: k-blokval .6s cubic-bezier(.3, 1.5, .5, 1) .25s both; } } /* GEO-plan v2 (28-10): Opgroeien in {plaats}, basisscholen, kijkmomenten per plaats, kennisbank en cijfertabel */ .k-opgroeien { margin-top: var(--wp--preset--spacing--50); padding: 22px 26px 24px; border-radius: var(--k-r-groot); background: var(--k-t3); } .k-opgroeien h2 { margin-top: 0; } .k-opgroeien > ul { padding-left: 1.2em; } .k-opgroeien > ul li { margin-bottom: 6px; } .k-opgroeien h3 { margin: 24px 0 8px; font-size: 1.25rem; } .k-scholen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 24px; margin: 8px 0 0; padding: 0; list-style: none; } .k-scholen li { display: flex; flex-direction: column; gap: 2px; max-width: none; padding: 12px 14px; border-radius: 12px; background: var(--k-wit); } .k-scholen li > a, .k-scholen li > b { font-weight: 800; color: var(--k-inkt); } .k-scholen span { font-size: .875rem; color: var(--k-inkt-zacht); } .k-scholen-alle summary { cursor: pointer; font-weight: 700; margin: 4px 0 8px; } .k-scholen-bij { margin-top: 28px; } .k-scholen-bij h3 { margin: 0 0 8px; font-size: 1.25rem; } .k-scholen-bij .k-scholen li { background: var(--k-papier); } .k-kijk-plaats { margin-top: var(--wp--preset--spacing--50); padding: 20px 24px; border-radius: var(--k-r-groot); background: var(--k-t2); } .k-kijk-plaats h2 { margin-top: 0; } .k-kijk-plaats ul { padding-left: 1.2em; } .k-kennisbank { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 24px; margin: 8px 0 24px; padding: 0; list-style: none; } .k-kennisbank li { display: flex; flex-direction: column; gap: 4px; max-width: none; padding: 14px 16px; border-left: 4px solid var(--k-b2); background: var(--k-papier); border-radius: 0 12px 12px 0; } .k-kennisbank li:nth-child(3n+2) { border-left-color: var(--k-b1); } .k-kennisbank li:nth-child(3n) { border-left-color: var(--k-zon); } .k-kennisbank a { font-weight: 800; color: var(--k-inkt); } .k-kennisbank span { font-size: .875rem; color: var(--k-inkt-zacht); } .k-cijfertabel { margin-bottom: 28px; } .k-cijfertabel table { min-width: 860px; } .k-cijfertabel td { text-align: right; font-variant-numeric: tabular-nums; } .k-cijfertabel th, .k-cijfertabel td { min-width: 0; } .k-opgroeien > ul.k-scholen { padding-left: 0; } /* Henk, 28-10: opening in rood met witte titel en tekst; "feiten" ook wit, zonder blokje, met het gele hartje. Wit op framboos haalt 5,3:1. De uitsparingen in het kaartje en het blokje achter de foto volgen de nieuwe kleur. */ .k-held4 { background: var(--k-merk); color: var(--k-wit); } .k-held4 h1, .k-held4-sub, .k-held4 .k-rood { color: var(--k-wit); } .k-held4 .k-rood { padding: 0; } .k-held4 .k-rood::before { content: none; } .k-zoekkaart { box-shadow: 0 24px 60px rgba(90, 0, 35, .3); } .k-zoekkaart-stub::before, .k-zoekkaart-stub::after { background: var(--k-merk); } .k-held4-foto img { box-shadow: 0 24px 60px rgba(90, 0, 35, .3); } .k-held4-foto::after { background: var(--k-b2); } @media (max-width: 480px) { .k-zoekkaart .k-zoek input[type="search"] { font-size: .9375rem; padding: 0 4px; } .k-zoekkaart .k-zoek-rij { padding-left: 34px; background-position: 11px 50%; } } @media (max-width: 400px) { .k-zoekkaart .k-zoek .k-knop, .k-zoek .k-knop { padding: 12px 14px; } .k-zoekkaart .k-zoek { padding-left: 12px; padding-right: 12px; } } /* Henk, 28-10: /aanbieders/ als verkooppagina. Rode band zoals de opening, met een witte prijskaart. */ .k-verkoop-kop { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: 96px; padding-bottom: 8px; color: var(--k-wit); } .k-verkoop-kop::before { content: ""; position: absolute; z-index: -1; top: -200px; bottom: -48px; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--k-merk); } .k-verkoop-kop h1 { margin: 6px 0 16px; color: var(--k-wit); font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); line-height: 1.06; text-wrap: balance; } .k-verkoop-kop .k-lead { color: var(--k-wit); } .k-verkoop-kop .k-boven { color: var(--k-wit); } .k-verkoop-links a { color: var(--k-wit); font-weight: 700; } .k-prijskaart { padding: 26px 28px 28px; border-radius: var(--k-r-groot); background: var(--k-wit); color: var(--k-inkt); box-shadow: 0 24px 60px rgba(90, 0, 35, .3); } .k-prijskaart-label { margin: 0; font-size: .875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--k-actie-donker); } .k-prijs { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; } .k-prijs-bedrag { font-family: var(--k-kop); font-size: clamp(3rem, 2rem + 3vw, 4.25rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; } .k-prijs-per { font-size: 1.125rem; font-weight: 700; } .k-prijs-btw { margin: 4px 0 18px; color: var(--k-inkt-zacht); font-size: .9375rem; } .k-vinkjes { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; } .k-vinkjes li { position: relative; max-width: none; padding-left: 28px; font-weight: 600; } .k-vinkjes li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%; background: var(--k-t3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2323233A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; } .k-knop-breed { display: block; width: 100%; text-align: center; } .k-verkoop-blok { margin: 0 0 clamp(48px, 7vw, 80px); } .k-voordelen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 18px 0 0; padding: 0; list-style: none; } .k-voordelen li { display: flex; flex-direction: column; gap: 4px; max-width: none; padding: 16px 18px 18px; border-left: 4px solid var(--k-b2); border-radius: 0 14px 14px 0; background: var(--k-papier); } .k-voordelen li:nth-child(4n+2) { border-left-color: var(--k-b1); } .k-voordelen li:nth-child(4n+3) { border-left-color: var(--k-zon); } .k-voordelen li:nth-child(4n) { border-left-color: var(--k-b4); } .k-voordelen b { font-size: 1.0625rem; font-weight: 800; } .k-voordelen span { color: var(--k-inkt-zacht); } .k-voorbeeld-lijst { position: relative; padding: 34px 22px 16px; border-radius: var(--k-r-groot); background: var(--k-wit); box-shadow: var(--k-schaduw); } .k-voorbeeld-lijst .k-voorbeeld-label { position: absolute; top: -12px; left: 18px; margin: 0; } .k-verkoop-gratis .k-vinkjes li { font-weight: 500; } .k-verkoop-inloggen { scroll-margin-top: 110px; } @media (max-width: 860px) { .k-verkoop-kop { grid-template-columns: minmax(0, 1fr); } .k-voordelen { grid-template-columns: minmax(0, 1fr); } } /* Gesponsord in de lijsten: zelfde plek, wel opvallend, met wat de opvang zelf opgaf */ .k-index-regel.k-gesponsord { background: #FFF8E1; box-shadow: inset 4px 0 0 var(--k-zon); } .k-index-regel.k-gesponsord:hover { background: #FFF1C7; } .k-label-gesponsord { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--k-zon); color: var(--k-inkt); font-size: .75rem; font-weight: 800; vertical-align: .15em; white-space: nowrap; } .k-index-eigen { color: var(--k-actie-donker) !important; font-weight: 700; } body:has(.k-verkoop-kop) .k-kruimel, body:has(.k-verkoop-kop) .k-kruimel a { color: var(--k-wit); } /* Henk, 28-10: gesponsord en reviews vallen overal op: kaart, kop van de locatie, vergelijking, rondleidingslijst, keuzehulp */ .k-pin-gesponsord { box-shadow: 0 0 0 3px var(--k-zon), 0 2px 8px rgba(35, 35, 58, .35); } .k-popup-labels { display: block; margin-top: 6px; } .k-popup-ster { color: #B46F00; } .k-sterren-kort { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .k-sterren-kort b { font-weight: 800; } .k-sterren-kort > span:last-child { color: var(--k-inkt-zacht); font-size: .875em; } .k-kop-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 0; font-size: .9375rem; } .k-vergelijk thead .k-kop-labels { color: var(--k-wit); font-size: .8125rem; font-family: var(--wp--preset--font-family--tekst); font-weight: 600; } .k-vergelijk thead .k-sterren-kort > span:last-child { color: rgba(255, 255, 255, .8); } .k-index-review { font-size: .9375rem !important; margin-top: 3px; } .k-index-review .k-sterren { font-size: 1.15rem; } .k-soortregel .k-label-gesponsord { margin-left: 8px; } .k-keuzehulp .k-label-gesponsord { margin-left: 6px; } .k-prijs-voorwaarden { margin: 12px 0 0; text-align: center; font-size: .875rem; } /* Henk, 28-10: "saai overzicht". Feitenblad: antwoorden op een rij, aanbod met vergelijking, alle locaties in een tabel */ .k-feitenblad { margin-top: var(--wp--preset--spacing--50); padding: 24px 26px 22px; border-radius: var(--k-r-groot); background: var(--k-wit); box-shadow: var(--k-schaduw); } .k-feitenblad > h2 { margin-top: 0; } .k-feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin: 0 0 8px; } .k-feiten > div { padding: 10px 0 10px 14px; border-left: 4px solid var(--k-b2); } .k-feiten > div:nth-child(4n+2) { border-left-color: var(--k-b1); } .k-feiten > div:nth-child(4n+3) { border-left-color: var(--k-zon); } .k-feiten > div:nth-child(4n) { border-left-color: var(--k-b4); } .k-feiten dt { font-size: .8125rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--k-inkt-zacht); } .k-feiten dd { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; } .k-aanbod { margin: 26px 0 8px; padding: 18px 20px; border-radius: 16px; background: var(--k-papier); } .k-aanbod h3, .k-feitenblad h3 { margin: 0 0 12px; font-size: 1.25rem; } .k-feitenblad h3 { margin-top: 26px; } .k-aanbod h3 { margin-top: 0; } .k-balken { margin-bottom: 14px; } .k-balken-kop { margin: 0 0 6px; font-size: .9375rem; } .k-balken ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .k-balken li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 2.5rem; gap: 12px; align-items: center; max-width: none; font-size: .9375rem; } .k-balken li b { text-align: right; font-weight: 800; } .k-balk-spoor { display: block; height: 14px; border-radius: 999px; background: #EDE6EE; overflow: hidden; } .k-balk-spoor i { display: block; height: 100%; border-radius: 999px; background: var(--k-soort, var(--k-b2)); } .k-balken li:first-child { font-weight: 700; } .k-rij-tabel { width: auto; margin: 0; box-shadow: none; border: 1px solid var(--k-lijn); } .k-rij-tabel table { min-width: 760px; } .k-rij-tabel th, .k-rij-tabel td { min-width: 0; padding: 10px 12px; } .k-rij-tabel tbody th a { font-weight: 800; color: var(--k-inkt); } .k-rij-tabel small { color: var(--k-inkt-zacht); font-size: .75rem; } .k-reviews-ouders { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 4px 0 16px; } .k-reviews-ouders dt { font-size: .8125rem; font-weight: 800; color: var(--k-inkt-zacht); } .k-reviews-ouders dd { margin: 0; font-weight: 700; } .k-review-extra select, .k-review-extra input { max-width: 320px; } .k-filter-school { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 10px; font-weight: 700; } .k-filter-school select { min-height: 40px; padding: 4px 10px; border: 1.5px solid var(--k-lijn-sterk); border-radius: 10px; font: inherit; font-weight: 500; max-width: 100%; } @media (max-width: 700px) { .k-feiten { grid-template-columns: minmax(0, 1fr); } .k-balken li { grid-template-columns: minmax(0, 1fr) 2.5rem; } .k-balken li .k-balk-spoor { grid-column: 1 / -1; grid-row: 2; } } .k-rij-tabel tbody th, .k-rij-tabel thead th:first-child { min-width: 210px; width: 210px; } /* Oudervragen in het reviewformulier vallen op (Henk, 28-10) */ .k-review-extra { padding: 16px 18px 18px; border: 0; border-radius: 16px; background: #FFF8E1; box-shadow: inset 4px 0 0 var(--k-zon); } .k-review-extra legend { float: left; width: 100%; margin-bottom: 6px; padding: 0; font-size: 1.0625rem; font-weight: 800; } .k-review-extra legend + * { clear: both; } .k-review-extra legend { background: none; } .k-review-extra select { display: block; width: 100%; max-width: 320px; min-height: 48px; padding: 8px 12px; border: 2px solid var(--k-inkt); border-radius: 12px; background: var(--k-wit); font: inherit; color: var(--k-inkt); } /* Henk, 28-10: inspecties van de GGD, beter dan kiddie: per domein, per regel, met later-in-orde, reactie en historie */ .k-inspectie { margin-top: var(--wp--preset--spacing--50); padding: 24px 26px; border-radius: var(--k-r-groot); background: var(--k-wit); box-shadow: var(--k-schaduw); } .k-inspectie > h2 { margin-top: 0; } .k-inspectie h3 { margin: 22px 0 8px; font-size: 1.2rem; } .k-inspectie-laatste { padding: 14px 18px; border-radius: 14px; border-left: 6px solid #2E9E6B; background: #EAF7F0; } .k-inspectie-laatste.k-insp-niet { border-left-color: #E08A00; background: #FFF4E0; } .k-inspectie-laatste p { margin: 0 0 4px; } .k-inspectie-status b { font-size: 1.25rem; } .k-inspectie-domeinen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } .k-inspectie-domeinen li { display: flex; flex-direction: column; gap: 2px; max-width: none; padding: 10px 12px; border-radius: 12px; background: var(--k-papier); font-size: .9375rem; } .k-inspectie-domeinen li span { font-size: .875rem; font-weight: 700; } .k-inspectie-domeinen .k-insp-in span { color: #1F7A50; } .k-inspectie-domeinen .k-insp-niet span { color: #A35A00; } .k-inspectie-domeinen .k-insp-nb span { color: var(--k-inkt-zacht); font-weight: 500; } .k-inspectie-domeinen .k-insp-niet { background: #FFF4E0; } .k-inspectie-niet { margin: 0; padding: 0; list-style: none; } .k-inspectie-niet li { max-width: none; padding: 10px 0; border-bottom: 1px solid var(--k-lijn); } .k-inspectie-niet details { margin-top: 4px; font-size: .9375rem; color: var(--k-inkt-zacht); } .k-inspectie-niet summary, .k-inspectie-tekst summary, .k-inspectie-volg summary { cursor: pointer; font-weight: 700; color: var(--k-inkt); } .k-insp-later { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #EAF7F0; color: #1F7A50; font-size: .8125rem; font-weight: 700; } .k-inspectie-tekst { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--k-papier); } .k-inspectie-eerder { margin: 0; padding-left: 1.2em; } .k-inspectie-eerder span { color: var(--k-inkt-zacht); } .k-inspectie-volg { margin-top: 14px; } .k-rl-inspectie { padding: 8px 12px; border-radius: 10px; background: #FFF4E0; } @media (max-width: 700px) { .k-inspectie-domeinen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Kiezen en prijzen per plaats, plek per dag */ .k-kiezen, .k-prijzen-plaats { margin-top: var(--wp--preset--spacing--50); max-width: 46rem; } .k-kiezen p, .k-prijzen-plaats p { font-size: 1.0625rem; } .k-dagen { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; } .k-dagen i { display: inline-grid; place-items: center; width: 28px; height: 24px; border-radius: 6px; font-style: normal; font-size: .75rem; font-weight: 800; text-transform: uppercase; } .k-dag-ja { background: #EAF7F0; color: #1F7A50; } .k-dag-nee { background: #F1ECF2; color: var(--k-inkt-zacht); text-decoration: line-through; } .k-feiten dt a { color: inherit; } /* Links naar andere sites: nieuw tabblad (Henk, 28-10). Zonder ondersteuning voor alt-tekst alleen het pijltje. */ a.k-extern::after { content: "\2197"; content: "\2197" / " (opent in een nieuw tabblad)"; display: inline-block; margin-left: .15em; font-size: .8em; line-height: 1; text-decoration: none; } /* Vragen van ouders aan de opvang (Henk, 28-10) */ .k-vragen { margin-top: var(--wp--preset--spacing--50); padding: clamp(20px, 3vw, 32px); background: var(--k-b2-licht); border-radius: var(--k-r-groot); } .k-vragen > h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 3vw, 2rem); } .k-vragen-lijst { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; } .k-vragen-lijst > li { max-width: none; padding: 18px 20px; background: var(--k-wit); border-radius: 22px; box-shadow: var(--k-schaduw-klein); } .k-vraag-tekst { margin: 0 0 4px; font-family: var(--k-kop); font-weight: 800; font-size: 1.1rem; } .k-vragen .k-review-reactie { background: var(--k-b3-licht); } .k-vragen .k-review-reactie .k-review-meta { margin-top: 6px; } .k-vraag-open { margin: 10px 0 0; font-size: .9375rem; color: var(--k-inkt-zacht); } .k-vragen .k-reviews-leeg { margin-bottom: 16px; } .k-vraag-stel > summary { list-style: none; display: inline-flex; cursor: pointer; } .k-vraag-stel > summary::-webkit-details-marker { display: none; } .k-vraag-stel[open] > summary { margin-bottom: 8px; } .k-vraag-stel .k-formulier { padding: 18px 20px; background: var(--k-wit); border-radius: 22px; } .k-vraag-keur { margin: 16px 0; padding: 16px 20px; background: var(--k-b2-licht); border-radius: 18px; font-size: 1.1rem; } .k-vragen-wacht { display: block; font-weight: 700; color: var(--k-inkt); } .k-acties + .k-hint { margin-top: 14px; } .k-vragen-plaats { margin-top: var(--wp--preset--spacing--50); max-width: 46rem; } .k-vragen-plaats .k-vragen-lijst > li { background: var(--k-b2-licht); box-shadow: none; } .k-vragen-plaats .k-review-reactie { background: var(--k-wit); } .k-vragen-plaats .k-review-meta { margin-top: 10px; } .k-vragen-plaats .k-review-meta a { font-weight: 700; color: var(--k-inkt); } /* Planning als route: blokjes als haltes op een lijn binnen de kaart (Henk, 28-10: "dit loopt niet lekker") */ .k-tijdlijn { padding: 8px 24px 4px 56px; } .k-tijdlijn li::before { left: -34px; top: 20px; width: 14px; height: 14px; border-radius: 4px; z-index: 1; } .k-tijdlijn li::after { content: ""; position: absolute; left: -28px; top: 0; bottom: 0; width: 2px; background: var(--k-lijn); } .k-tijdlijn li:first-child::after { top: 20px; } .k-tijdlijn li:last-child::after { bottom: auto; height: 20px; } .k-tijdlijn li:only-child::after { display: none; } @media (max-width: 480px) { .k-tijdlijn { padding-left: 44px; padding-right: 18px; } .k-tijdlijn li::before { left: -30px; } .k-tijdlijn li::after { left: -24px; } } /* Begin met zoeken: haast of geen haast (Henk, 28-10) */ .k-label-haast, .k-label-rustig { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: 999px; font-family: var(--k-tekst, inherit); font-size: .8125rem; font-weight: 800; vertical-align: 2px; } .k-label-haast { background: var(--k-actie); color: #fff; } .k-label-rustig { background: var(--k-b2-licht); color: var(--k-inkt); box-shadow: inset 0 0 0 1px var(--k-b2); } .k-tijdlijn li.k-stap-haast::before { background: var(--k-actie); } /* Voorpagina: meteen duidelijk dat het om kinderopvang gaat (Henk, 28-10) */ .k-held4 .k-boven { margin: 0 0 clamp(14px, 2vw, 22px); padding: 8px 16px; background: var(--k-wit); color: var(--k-inkt); border-radius: 999px; font-size: 1rem; font-weight: 800; box-shadow: 0 6px 18px rgba(90, 0, 35, .2); } .k-held4 .k-boven i { background: var(--k-actie); } .k-zoekkaart .k-zoek label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin: 0 0 10px; font-family: var(--k-kop); font-size: 1.0625rem; font-weight: 800; } p.k-inspectie-eerder { margin: 14px 0 0; padding: 0; font-size: .9375rem; } /* Terugkomen na een formulier (Henk, 28-10: "na review sturen krijg je geen feedback"): blok niet onder de vaste kop, melding als witte kaart die opvalt in het gekleurde blok */ #reviews, #vragen, #inspectie, #k-ouders-kop { scroll-margin-top: 100px; } .k-reviews .k-melding, .k-vragen .k-melding, .k-inspectie .k-melding, .k-ouders .k-melding { margin: 14px 0 18px; background: var(--k-wit); border-left: 6px solid var(--k-b2); box-shadow: var(--k-schaduw-klein); } .k-reviews .k-melding[role="alert"], .k-vragen .k-melding[role="alert"], .k-inspectie .k-melding[role="alert"], .k-ouders .k-melding[role="alert"] { border-left-color: var(--k-actie); } /* Laatste jaarlijkse inspectie naast een recenter, kleiner onderzoek (Henk, 28-10) */ .k-inspectie-jaar { margin: 12px 0 0; padding: 12px 16px; border-radius: 14px; background: #EAF7F0; border-left: 6px solid #2E9E6B; } .k-inspectie-jaar.k-insp-niet { border-left-color: #E08A00; background: #FFF4E0; } .k-inspecties-plaats { margin-top: var(--wp--preset--spacing--50); } .k-inspecties-plaats li a { font-weight: 700; } /* Goed om te weten: links naar de kennisbank (Henk, 28-10) */ .k-lees { margin-top: var(--wp--preset--spacing--50); } .k-lees > h2 { margin: 0 0 14px; } .k-lees ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 10px; } .k-lees li { max-width: none; } .k-lees li a { display: flex; align-items: center; gap: 10px; min-height: 48px; height: 100%; box-sizing: border-box; padding: 12px 16px; background: var(--k-wit); border-radius: 16px; box-shadow: var(--k-schaduw-klein); font-weight: 700; color: var(--k-inkt); text-decoration: none; } .k-lees li a::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--k-b2); } .k-lees li a:hover { text-decoration: underline; } .k-lees-alle { margin: 14px 0 0; } .k-lees-alle a { font-weight: 700; } /* Alle plaatsen per provincie (heel Nederland, Henk 28-10) */ .k-provincies { margin-top: var(--wp--preset--spacing--50); } .k-provincie { margin: 0 0 10px; background: var(--k-wit); border-radius: 18px; box-shadow: var(--k-schaduw-klein); } .k-provincie > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 12px 20px; cursor: pointer; font-family: var(--k-kop); font-weight: 800; font-size: 1.125rem; } .k-provincie > summary span { font-family: var(--k-tekst, inherit); font-weight: 500; font-size: .9375rem; color: var(--k-inkt-zacht); } .k-plaatsenlijst { list-style: none; margin: 0; padding: 4px 20px 18px; columns: 4 11rem; column-gap: 24px; } .k-plaatsenlijst li { break-inside: avoid; padding: 3px 0; max-width: none; } .k-plaatsenlijst small { color: var(--k-inkt-zacht); } .k-cijfers-provincie > summary h2 { margin: 0; font-size: 1.25rem; } .k-cijfers-provincie > p, .k-cijfers-provincie > .k-cijfertabel { margin: 0 20px 18px; } /* Alle locaties op een rij (Henk, 28-10): straat onder de naam, plusje voor de rondleidingslijst, alleen kolommen met inhoud */ .k-rij-tabel table { min-width: 0; } .k-rij-straat { display: block; margin-top: 2px; font-weight: 500; } .k-rij-tabel td:last-child { width: 56px; text-align: right; } .k-rij-tabel + .k-hint, .k-feitenblad .k-hint { margin: 0 0 10px; } .k-vergelijk-wrap { position: relative; } /* Dorpen met één of twee locaties, op de pagina van de plaats ernaast (Henk, 28-10) */ .k-dorpen { margin-top: var(--wp--preset--spacing--50); } .k-dorpen-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 12px; } .k-buurdorp { padding: 16px 18px; background: var(--k-wit); border-radius: 18px; box-shadow: var(--k-schaduw-klein); scroll-margin-top: 100px; } .k-buurdorp:target { outline: 3px solid var(--k-b2); } .k-buurdorp h3 { margin: 0; font-size: 1.15rem; } .k-buurdorp > p { margin: 2px 0 8px; font-size: .875rem; } .k-buurdorp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .k-buurdorp li { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; max-width: none; } .k-buurdorp li a { font-weight: 700; color: var(--k-inkt); } .k-buurdorp li small { grid-column: 1; color: var(--k-inkt-zacht); } .k-buurdorp li .k-plus { grid-column: 2; grid-row: 1 / span 2; } .k-buurdorp li .k-label-gesponsord { grid-column: 1; justify-self: start; } /* Kort antwoord bovenaan elk kennisbankartikel (gpt-5.5-beoordeling, Henk 28-10) */ .k-kort-antwoord { margin: 0 0 var(--wp--preset--spacing--50); padding: 18px 22px; background: var(--k-b2-licht); border-radius: 20px; border-left: 6px solid var(--k-b2); } .k-kort-antwoord .k-kort-antwoord-kop { margin: 0; font-family: var(--k-kop); font-size: 1.125rem; } .k-kort-antwoord ul { margin: 8px 0 10px; padding-left: 1.2em; } .k-kort-antwoord li { margin: 4px 0; max-width: none; font-size: 1.0625rem; } .k-kort-antwoord .k-bron { margin: 0; } /* Mobiel (planning/plan-mobiel.md, Henk 29-10): inklapblokken, toon-alle en kaart op verzoek. Dicht op mobiel, open op desktop (Weergave::openBreed zet ze open vóór de eerste weergave). */ .k-klap { margin-top: var(--wp--preset--spacing--50); } .k-klap > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; } .k-klap > summary::-webkit-details-marker { display: none; } .k-klap > summary > h2, .k-klap > summary > h3 { margin: 0; flex: 1 1 auto; } .k-klap-teller { flex: none; padding: 3px 12px; border-radius: 999px; background: var(--k-t4); color: var(--k-inkt); font-size: .875rem; font-weight: 800; } .k-klap > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin: 0 6px 4px 0; border-right: 3px solid var(--k-actie-donker); border-bottom: 3px solid var(--k-actie-donker); transform: rotate(45deg); transition: transform .2s ease; } .k-klap[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; } .k-klap[open] > summary { margin-bottom: 12px; } .k-klap-sub { margin-top: 18px; } .k-klap-sub > summary > h3 { font-size: 1.15rem; } .k-klap > summary:focus-visible { outline: 3px solid var(--k-actie); outline-offset: 4px; border-radius: 8px; } @media (max-width: 899px) { .k-klap:not([open]) { padding: 4px 16px; background: var(--k-wit); border-radius: 18px; box-shadow: var(--k-schaduw-klein); } .k-klap-sub:not([open]) { margin-top: 12px; } } .k-meer > summary, .k-kaart-klap > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 10px 0; padding: 8px 18px; border: 2px solid var(--k-actie-donker); border-radius: 999px; color: var(--k-actie-donker); font-weight: 800; cursor: pointer; } .k-meer > summary::-webkit-details-marker, .k-kaart-klap > summary::-webkit-details-marker { display: none; } .k-kaart-klap > summary::before { content: ""; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: var(--k-actie-donker); transform: rotate(-45deg); } @media (min-width: 900px) { .k-meer[open] > summary, .k-kaart-klap[open] > summary { display: none; } } @media (max-width: 899px) { .k-kaart-klap .k-kaart { height: 60vh; } } @media (max-width: 599px) { .k-top .k-acties { flex-direction: column; align-items: stretch; } .k-top .k-acties > .k-knop, .k-top .k-acties > .k-knop-2 { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .k-klap > summary::after { transition: none; } } /* Mobiel: voet in 2 kolommen, compacte regels in lijsten (plan mobiel, 29-10) */ @media (max-width: 760px) { .k-voet-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 20px; } .k-voet-merk, .k-voet-gegevens { grid-column: 1 / -1; } .k-voet-links a { font-size: .9375rem; } } @media (max-width: 560px) { .k-index-regel { grid-template-columns: 2rem minmax(0, 1fr) 44px; padding: 6px 0; } .k-index-regel .k-staaf, .k-index-regel .k-index-getal { display: none; } .k-index-regel .k-plus { grid-column: 3; grid-row: 1; } } .k-lijst-sectie { margin-top: var(--wp--preset--spacing--50); } .k-lijst-sectie > h2 { margin-bottom: 12px; } @media (max-width: 560px) { .k-alleen-breed { display: none; } } .k-klap, .k-klap-inhoud, .k-meer, .k-kaart-klap { min-width: 0; max-width: 100%; } .k-klap, .k-meer, .k-kaart-klap { overflow: clip; overflow-clip-margin: 8px; } .k-held4 { overflow-x: clip; } /* de blokjes achter de foto mogen op tabletbreedte niet buiten beeld steken (29-10) */ .k-sectie-opvang { overflow-x: clip; } /* idem voor de band Voor kinderopvang (29-10) */ /* Grote plaats per stadsdeel (Stadsdelen, Henk 29-10): tegels om te kiezen, daaronder alle locaties per stadsdeel ingeklapt */ .k-hub .k-zoek { margin: 0 0 var(--wp--preset--spacing--40); } .k-hub-kop { margin: var(--wp--preset--spacing--40) 0 12px; font-size: 1.25rem; } .k-stadsdelen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 900px) { .k-stadsdelen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } } .k-stadsdelen li { max-width: none; } .k-stadsdelen a { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; height: 100%; padding: 12px 14px; background: var(--k-wit); border-radius: 18px; box-shadow: var(--k-schaduw-klein); color: var(--k-inkt); text-decoration: none; transition: box-shadow .18s ease; } .k-stadsdelen a:hover { box-shadow: 0 0 0 2px var(--k-inkt); } .k-stadsdelen b { overflow-wrap: anywhere; } .k-stadsdelen span { font-weight: 700; color: var(--k-actie-donker); } .k-stadsdelen small { grid-column: 1 / -1; margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: var(--k-inkt-zacht); } .k-hub-alles { margin: 0 0 12px; } .k-compact { list-style: none; margin: 0; padding: 0; columns: 18rem auto; column-gap: 24px; } .k-compact li { break-inside: avoid; max-width: none; padding: 6px 0; line-height: 1.4; } .k-compact a { font-weight: 700; color: var(--k-inkt); } .k-compact small { display: block; font-size: .8125rem; color: var(--k-inkt-zacht); } .k-hub-naar { margin: 12px 0 0; font-weight: 700; } /* Grote organisatie (plan mobiel, fase 3): binnen een provincie per plaats */ .k-hub-plaats { margin: 18px 0 4px; font-size: 1.0625rem; } .k-hub-plaats:first-child { margin-top: 4px; } .k-hub-plaats span { margin-left: 4px; font-size: .875rem; font-weight: 700; color: var(--k-inkt-zacht); } /* Voorpagina op mobiel (plan mobiel fase 4, §4.7): korter met dezelfde HTML; alle links blijven in de pagina */ .k-index-totaal { display: none; } @media (max-width: 599px) { .k-sectie { padding-top: 32px; padding-bottom: 32px; } .k-bewijs { padding-top: 36px; padding-bottom: 28px; } .k-bewijs-zin { font-size: 1.1875rem; } /* Begin waar je nu bent: de route als 2 kolommen tegels */ .k-reis h2 { font-size: 1.875rem; } .k-route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .k-route::before, .k-route a::after { display: none; } .k-route li:last-child:nth-child(odd) { grid-column: 1 / -1; } .k-route a { grid-template-columns: minmax(0, 1fr); gap: 2px; height: 100%; box-sizing: border-box; padding: 12px; background: var(--k-papier); } .k-route a::before { grid-row: auto; width: 24px; height: 24px; margin-bottom: 6px; border-radius: 7px; } .k-route strong, .k-route span { grid-column: 1; } .k-route strong { font-size: 1rem; } .k-route span { font-size: .8125rem; } /* Drie soorten: smalle rijen met naam, leeftijd, balk en link; de omschrijving alleen op een breder scherm */ .k-liniaal { margin-top: 20px; } .k-liniaal li { gap: 6px; padding: 14px 0; } .k-liniaal .k-soort-naam { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .k-liniaal h3 { font-size: 1.1875rem; } .k-liniaal li > div:not(.k-soort-naam) > p { display: none; } /* Rondleidingslijst als voorbeeld: twee vragen zijn genoeg om het te zien */ .k-uitleg-rl { gap: 28px; } .k-rl-voorbeeld ol li:nth-child(n+3) { display: none; } /* Zo bouw je jullie keuze op */ .k-toren-vak { gap: 20px; } .k-toren li { padding: 14px 18px 16px; } .k-toren h3 { margin-bottom: 4px; font-size: 1.125rem; } /* Plaatsen: 6 tegels; de link naar alle plaatsen staat eronder */ .k-index.k-plaatsen.k-plaatsen-kort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .k-plaatsen-kort > li:nth-child(n+7) { display: none; } .k-plaatsen-kort .k-index-regel { display: block; padding: 12px; border-radius: 16px; background: var(--k-papier); } .k-plaatsen-kort .k-index-regel + .k-index-regel { border-top: 0; } .k-plaatsen-kort .k-staaf, .k-plaatsen-kort .k-index-getal, .k-plaatsen-kort .k-index-soorten small, .k-plaatsen-kort + .k-index-uitleg { display: none; } .k-plaatsen-kort .k-index-soorten { display: none; } .k-plaatsen-kort .k-index-naam .k-index-totaal { display: block; margin-top: 2px; font-size: .875rem; } /* Wat het register weet */ .k-twee { gap: 20px; margin-top: 20px; } .k-twee > div { padding: 16px 18px; } .k-twee li + li { margin-top: 2px; } /* De foto bovenaan iets lager, zodat de route eerder in beeld komt */ .k-held4-foto img { aspect-ratio: 16 / 10; object-fit: cover; } /* Zo bouw je: de kaartjes alleen met kop en link, de uitleg staat erboven */ .k-toren p { display: none; } .k-twee li { font-size: .9375rem; } .k-sectie-intro { font-size: 1.0625rem; } .k-opvang-band .k-sectie-intro { display: none; } /* Banden: de foto alleen op een breder scherm */ .k-opvang-band .k-foto { display: none; } /* Goed om te weten: 4 artikelen, de rest via de kennisbank */ .home .k-lees li:nth-child(n+5) { display: none; } }