/* kaart-viewer.css — de chrome van de kaart (public/kaart.html) * * ONTWERP 3A "KALK" — 19 augustus 2026 * Uitvoering van de design-handoff (docs/design/kaart-2026-08/), richting 3a, * besluit vastgelegd in docs/architectuur/adr-kaart-ontwerp-2026-08.md (#1255). * Kalkwit papier, één gedempt accent, radius 6, lijn 1px, mono alleen voor * registers. De maten komen letterlijk uit splitify-kaart.dc.html. * * HET TOKENBLOK HIERONDER IS DE ENIGE PLEK MET KLEUREN EN LETTERS. * De rest van dit bestand gebruikt alleen var(--kv-*). Wordt de scope later * site-breed, dan verhuist dat blok naar splitify-design.css en verandert er * aan de kaart niets. Kiest iemand alsnog richting 3b of 3c, dan is dit het * enige dat om moet. * * GEEN TAILWIND, GEEN EXTERNE FONT-HOST * Poort 2 van qa/kaart-viewer-contract.test.mjs verbiedt de fonts-host van * Google in de kaart-bundel: geen derde partij op de kanonieke kaart-URL en * geen render-blokkerende externe stylesheet. (Die poort zoekt op de * letterlijke hostnaam, dus die staat hier bewust niet uitgeschreven.) * De letters staan daarom sinds #1256 in public/fonts/ en worden hieronder * met @font-face aangehaald -- alles van eigen origin. De fallback-stack in * --kv-font/--kv-font-mono blijft staan: valt een woff2 uit, dan is het * beeld de systeemletter en niets breekt. * * SELECTOR #map — regressiewacht op OORZAAK 1 (§1.1 Technische Eisen) * De basisregel (buiten elke @media) zet #map altijd op left:0;right:0. */ /* --------------------------------------------------------------------------- * LETTERS, ZELF GEHOST (#1256) * * Beide families staan onder de SIL Open Font License 1.1; de volledige * licentietekst ligt naast de bestanden (public/fonts/LICENSE-*.txt). De * woff2's komen uit de npm-pakketten @fontsource-variable/schibsted-grotesk * 5.3.0 en @fontsource/ibm-plex-mono 5.3.0 -- dezelfde subsets en * unicode-ranges als de bekende fonts-CDN, maar dan van onze eigen origin, * zodat poort 2 blijft gelden. * * WAT ER WEL EN NIET LIGT -- gemeten, niet geschat: * Schibsted Grotesk staat er als VARIABELE letter (wght-as 400-900), één * bestand voor alle vier de gewichten die deze pagina gebruikt (400, 500, * 600, 700). Dat is 46.752 bytes tegen 99.892 bytes voor dezelfde vier als * losse statics -- de helft, zonder verlies aan gewichten. * IBM Plex Mono ligt er alleen in 400. Geen enkele regel in dit bestand * vraagt de mono in een ander gewicht, en 500 erbij zou 14.888 bytes kosten * voor niets. Vraagt een latere regel wél mono 500, dan hoort dat bestand * er alsnog bij -- anders verzint de browser een schuine/vette variant. * * De latin-ext-varianten kosten bij een Nederlandse kaart niets: de * unicode-range zorgt dat de browser ze alleen ophaalt als er een teken * buiten latin op het scherm staat (een Poolse of Tsjechische straatnaam). * --------------------------------------------------------------------------- */ @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- Palet 3a Kalk ---------------------------------------------------- */ --kv-papier: #E8E4DA; --kv-paneel: #F5F2EA; --kv-rand: #DFDACE; --kv-inkt: #1F2A26; --kv-inkt-mat: #3A423E; /* CONTRAST — de twee gedempte inkten zijn verdonkerd t.o.v. de handoff; die haalden AA niet. GEMETEN (WCAG 2.1 relatieve luminantie) op de drie vlakken waarop ze staan; alles hieronder is gewone tekst, dus de eis is 4,5:1. token waarde paneel papier chip was (paneel/papier/chip) --kv-inkt-zacht #5A605C 5,75 5,07 5,27 #6E7570: 4,23 3,72 3,87 --kv-inkt-licht #676963 4,97 4,38* 4,55 #8A8C84: 3,04 2,68 2,79 Vierde vlak, en meteen de krapste marge in het ontwerp: een GEKOZEN adresknop is rgba(accent,.08) over papier = #DADCD0, en de subregel daarin (--kv-inkt-licht) staat daar op 4,64:1. Haalt AA, maar wie aan het accent of aan die dekking draait, breekt dit als eerste. * --kv-inkt-licht staat nergens op papierkleur; de chip telt wel mee, want een gemarkeerde zoeksuggestie krijgt chip als achtergrond. De verdonkering is de kleinste die 4,5:1 haalt op elk vlak waar het token echt gebruikt wordt (licht: #6D6F68 zou op het paneel al 4,55 halen, maar op de chip 4,17). --kv-inkt-zacht is daarna zo ver bijgezet dat de twee onderling te onderscheiden blijven -- onderling 1,16 (was 1,39) -- en de rangorde inkt 13,24 > inkt-mat 9,25 > zacht 5,75 > licht 4,97 klopt. VIJFDE VLAK (20 aug): de donkergroene paneelkop #3D5A4E. Alles daarin is licht-op-donker en klein, dus opnieuw 4,5:1: adres/titel #F5F2EA 6,77 AA statuschip #D2E2D7 5,63 AA postcode #C2CDC6 4,63 AA (handoff: #8A8C84 = 2,40 -- zakt) mono-chip #C2CDC6 4,63 AA (handoff: #AEBAB2 = 3,78 -- zakt) Zelfde soort afwijking als hierboven: de kleinste stap in dezelfde tint die de eis haalt. Afwijking van de handoff, vastgelegd in docs/architectuur/adr-kaart-ontwerp-2026-08.md. */ --kv-inkt-zacht: #5A605C; --kv-inkt-licht: #676963; --kv-accent: #3E7A5A; --kv-accent-diep: #2E463D; --kv-tegel: #FBF9F3; /* vlak van een kerngegeven-tegel (handoff) */ --kv-tegel-lijn: #E4DFD3; /* de haarlijn ertussen: 1px raster-gap */ --kv-chip: #EDE8DC; --kv-chip-rand: #DFDACE; --kv-wit: #FFFFFF; /* Kanaalwaarden voor rgba(). CSS kan geen alfa uit een hex-token halen, dus staan de kanalen hier één keer -- nergens anders in dit bestand een rauwe kleurwaarde. Elke regel noemt de kleur waar hij bij hoort. */ --kv-schim-kanalen: 35, 45, 40; /* de schaduw-/vignetkleur uit het ontwerp */ --kv-rand-kanalen: 223, 218, 206; /* = --kv-rand */ --kv-paneel-kanalen: 245, 242, 234; /* = --kv-paneel */ --kv-accent-kanalen: 62, 122, 90; /* = --kv-accent */ --kv-label-g-kanalen: 163, 68, 56; /* = --kv-label-g */ /* Energielabel — DATAkleuren, nooit als merkkleur gebruiken. B en F zijn donkerder dan de handoff; zie de meettabel bij .kv-label. */ --kv-label-a: #2F7D52; --kv-label-b: #4F8242; --kv-label-c: #9CAF4E; --kv-label-d: #D8B040; --kv-label-e: #C98A3E; --kv-label-f: #AC6338; --kv-label-g: #A34438; /* --- Vorm ------------------------------------------------------------- */ --kv-radius: 6px; --kv-radius-klein: 4px; --kv-schaduw: 0 10px 26px rgba(var(--kv-schim-kanalen), .10); --kv-schaduw-diep: 0 10px 26px rgba(var(--kv-schim-kanalen), .14); --kv-lijn: 1px solid var(--kv-rand); /* --- Letters ---------------------------------------------------------- */ --kv-font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --kv-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* --- Maten ------------------------------------------------------------ */ --kv-balk-h: 54px; /* 478px is de maat uit de handoff (docs/design/kaart-2026-08/splitify-kaart.dc.html, het paneelblok op left:24px/top:88px). Stond op 396px; breder en lager betekent dat het paneel het beeld in komt in plaats van de zoekbalk opzij te duwen. */ --kv-paneel-b: 478px; /* De drie maten uit docs/design/design-system/tokens/maten.css. Ze stonden wél in de kit en wél in de gegenereerde public/designsysteem/splitify.css, maar kaart.html laadt die stylesheet niet -- de kaart draait op dit bestand. Gemeten 27 augustus 2026: getComputedStyle gaf hier drie lege waarden, dus elke regel die ze gebruikte viel stil terug op nul. */ --kv-marge-scherm: 24px; /* 12px onder 1024px */ --kv-marge-paneel: 18px; /* binnenmarge van het dossier */ --kv-romp-b: 940px; /* leesbreedte van een paginascherm */ --kv-kopband: #3D5A4E; /* de donkergroene paneelkop uit het ontwerp */ --kv-kopband-zacht: #D2E2D7; /* de statuschip daarin */ --kv-kopband-mat: #C2CDC6; /* postcode + mono-chip; zie de contrasttabel */ --kv-tap: 44px; } @media (prefers-reduced-motion: reduce) { #kv-app, #kv-app * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } #kv-app { font-family: var(--kv-font); color: var(--kv-inkt); -webkit-font-smoothing: antialiased; } /* De reset zet alleen wat de browser opdringt aan lettertype en muisaanwijzer. Achtergrond, rand en binnenruimte horen bij het onderdeel zelf: een reset met #kv-app ervoor wint van elke class, en dat maakte eerst de filterchips en daarna de themaknoppen onzichtbaar. */ /* Alleen de LETTERFAMILIE erven, niet het hele font-shorthand: `font: inherit` zet ook grootte en dikte, en deze selector (id + element) wint van elke kale class -- daardoor renderden de thema- en adresknoppen op 16px/400 in plaats van hun eigen 12,5px/600. Elke knop in dit bestand zet zijn eigen grootte, dus erven is hier niet nodig. Derde keer dat deze reset iets stils brak; laat 'm smal. */ #kv-app button { font-family: inherit; color: inherit; cursor: pointer; } #kv-app input { font-family: inherit; color: inherit; } #kv-app [hidden] { display: none !important; } /* De reset hierboven geldt de knoppen VAN de kaart. Hij wint met zijn id van elke klasse-regel, dus ook van die van portefeuillemodules/toevoegen-knop.css -- en op 21 augustus 2026 kregen de projectnamen in dat menu daardoor de lichte kopbandkleur en waren ze onzichtbaar op het lichte menu. Deze regel geeft die component zijn eigen keuze terug. De kleurwaarden staan daar, niet hier: dit is alleen het doorgeefluik. */ #kv-app .tvp button, #kv-app .tvp input { color: var(--tvp-kleur, var(--kv-inkt)); } #kv-app ::placeholder { color: var(--kv-inkt-licht); } @keyframes kv-spin { to { transform: rotate(360deg); } } @keyframes kv-pulse { 0% { opacity: .9; transform: scale(1); } 70% { opacity: 0; transform: scale(2.4); } 100% { opacity: 0; transform: scale(2.4); } } /* --- De kaart ------------------------------------------------------------- * BASISREGEL (buiten elke @media): left:0;right:0 -- ALTIJD volle breedte. * De chrome zweeft eroverheen, zoals in het ontwerp. */ #map { position: fixed; top: 0; left: 0; right: 0; bottom: 0; /* Neutrale no-data-kleur. Zee is geografische data in de kaartstijl; de container mag buiten die geometrie nooit zee suggereren. */ background: #ECE8DE; } .maplibregl-canvas:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: -3px; } /* Het ontwerp legt links een zachte verduistering over de kaart, zodat het paneel op papierkleur niet in de foto verdwijnt. */ #kv-vignet { position: fixed; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(90deg, rgba(var(--kv-schim-kanalen), .16) 0%, rgba(var(--kv-schim-kanalen), .05) 34%, rgba(var(--kv-schim-kanalen), 0) 52%); } /* --- Zwevende balk linksboven -------------------------------------------- */ #kv-balk { position: fixed; top: 18px; left: 24px; right: 24px; z-index: 30; display: flex; align-items: flex-start; gap: 10px; pointer-events: none; } #kv-zoek-blok { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; max-width: 520px; height: var(--kv-balk-h); padding: 0 8px 0 10px; pointer-events: auto; background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius); box-shadow: var(--kv-schaduw); } #kv-merk { display: flex; flex-direction: column; gap: 5px; padding-right: 12px; flex: none; text-decoration: none; } #kv-merk .kv-woord { font-size: 15px; font-weight: 600; letter-spacing: .24em; color: var(--kv-inkt); } #kv-merk .kv-streep { height: 1.5px; background: var(--kv-accent); } #kv-scheiding { width: 1px; height: 26px; background: var(--kv-rand); flex: none; } #kv-zoek-wrap { display: flex; align-items: center; gap: 9px; padding: 0 6px 0 13px; flex: 1 1 auto; min-width: 120px; position: relative; } #kv-zoek-icoon { flex: none; display: flex; color: var(--kv-inkt); } #kv-zoek { flex: 1; min-width: 0; border: 0; background: none; font-size: 14.5px; font-weight: 500; } #kv-zoek:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 3px; border-radius: var(--kv-radius-klein); } #kv-sneltoets { width: 36px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--kv-chip); color: var(--kv-inkt-zacht); font-size: 10.5px; font-family: var(--kv-font-mono); border-radius: var(--kv-radius-klein); } /* Filterchips: vorm uit het ontwerp, werking volgt in een eigen werkitem. Uitgezet i.p.v. half werkend -- een chip die iets halfs doet is erger dan een chip die duidelijk nog niet aan staat. */ #kv-chips { display: flex; align-items: center; gap: 8px; height: var(--kv-balk-h); overflow: hidden; pointer-events: auto; } #kv-chips .kv-chip { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius); font-size: 12.5px; font-weight: 600; color: var(--kv-inkt-mat); white-space: nowrap; box-shadow: var(--kv-schaduw); } #kv-chips .kv-chip[disabled] { opacity: .55; cursor: default; } @media (max-width: 1099.98px) { #kv-chips { display: none; } } #kv-teller { margin-left: auto; align-self: center; padding: 0 12px; height: 34px; display: inline-flex; align-items: center; pointer-events: auto; background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius); box-shadow: var(--kv-schaduw); font-family: var(--kv-font-mono); font-size: 11px; color: var(--kv-inkt-zacht); white-space: nowrap; } @media (max-width: 767.98px) { #kv-teller { display: none; } } /* LEEG IS GEEN KNOP. bijwerkenCounter(null) zet de tekst op '' zodra er niets te tellen valt -- uitgezoomd, of vóór de eerste lees. De regel hierboven bleef dan wel tekenen: GEMETEN op productie 28 augustus 2026 stond er rechtsboven een pil van 26 bij 34 px met rand #DFDACE en vlak #F5F2EA, tien pixels links van de Menu-knop. Niets erin, en toch de vorm van iets dat je aan kunt klikken. NIET display:none. De margin-left:auto hierboven is wat de teller én het menu naar de rechterrand duwt (gemeten 661px op een venster van 1877). Haal je het element uit de stroom, dan schuift Menu 36px naar links tegen de chips aan. Hij blijft dus staan als spacer van nul breedte en tekent alleen niets meer. */ #kv-teller:empty { padding: 0; border: 0; background: none; box-shadow: none; } /* --- Accountblok (#1274) -------------------------------------------------- */ /* Zelfde vorm als #kv-teller: paneelvlak, haarlijn, dezelfde hoogte. Geen nieuwe kleur -- alles komt uit de bestaande tokens, dus de contrasttabel bovenin dit bestand hoeft geen zesde regel. */ #kv-account { margin-left: 8px; align-self: center; padding: 0 6px 0 12px; height: 34px; display: inline-flex; align-items: center; gap: 8px; pointer-events: auto; background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius); box-shadow: var(--kv-schaduw); white-space: nowrap; max-width: 40vw; } #kv-account[hidden] { display: none; } /* Zonder teller (smal scherm) mag het accountblok de plek van margin-left:auto overnemen -- anders plakt hij tegen de chips aan. */ @media (max-width: 767.98px) { #kv-account { margin-left: auto; } } .kv-account-naam { font-size: 12.5px; font-weight: 600; color: var(--kv-inkt-mat); overflow: hidden; text-overflow: ellipsis; max-width: 22ch; } .kv-account-knop { font-family: var(--kv-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--kv-accent); background: none; border: 0; border-radius: calc(var(--kv-radius) - 4px); padding: 6px 8px; cursor: pointer; text-decoration: none; } .kv-account-knop:hover { background: var(--kv-tegel); } .kv-account-knop[disabled] { opacity: .55; cursor: default; } /* --- Zoeksuggesties (contract van kaart-zoekbalk.js) ---------------------- */ /* De kop stond hier als content:'...' -- onvertaalbaar en onbetrouwbaar voor schermlezers. Hij is nu een echt element mét data-i18n, buiten #kv-zoek-suggesties: kaart-zoekbalk.js schrijft de innerHTML daarvan en zou de kop bij elke render wegvegen. Het omhulsel volgt de hidden-stand van de lijst, zodat de module niets hoeft te weten van de kop. */ #kv-zoek-dropdown { position: absolute; top: calc(100% + 14px); left: -13px; width: min(460px, calc(100vw - 48px)); background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius); box-shadow: var(--kv-schaduw-diep); padding: 6px; z-index: 45; } #kv-zoek-dropdown:has(> #kv-zoek-suggesties[hidden]) { display: none; } #kv-zoek-suggesties-kop { display: block; padding: 8px 10px 6px; font-family: var(--kv-font-mono); font-size: 10px; letter-spacing: .08em; color: var(--kv-inkt-licht); /* De kop is een opschrift, geen doelwit: zonder dit vangt hij de klik die kaart-zoekbalk.js als "buiten de lijst" leest en waarmee de dropdown dichtvalt. Het omhulsel vangt de rest -- zie kaart-viewer-kern.js. */ pointer-events: none; } #kv-zoek-suggesties { max-height: 330px; overflow-y: auto; } #kv-zoek-suggesties .zoek-suggestie { padding: 9px 10px; border-radius: var(--kv-radius-klein); cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--kv-inkt); } #kv-zoek-suggesties .zoek-suggestie:hover, #kv-zoek-suggesties .zoek-suggestie.actief { background: var(--kv-chip); } #kv-zoek-suggesties .zoek-suggestie small { display: block; margin-top: 2px; font-family: var(--kv-font-mono); font-size: 10.5px; color: var(--kv-inkt-licht); } /* Zonder :has() (Firefox < 121, Safari < 15.4) volgt het omhulsel de hidden-stand van de lijst niet en blijft er permanent een lege doos mét kop onder de zoekbalk hangen. Dan verhuizen kop-zichtbaarheid en chrome naar de lijst zelf: die krijgt wél hidden, dus er blijft niets staan. Dit blok staat bewust ná de basisregels: @supports voegt geen specificiteit toe, dus eerder zou de latere display:block van de kop gewoon winnen. */ @supports not selector(:has(*)) { #kv-zoek-suggesties-kop { display: none; } #kv-zoek-dropdown { background: none; border: 0; box-shadow: none; padding: 0; } #kv-zoek-suggesties { background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius); box-shadow: var(--kv-schaduw-diep); padding: 6px; } } /* --- Knoppen rechts ------------------------------------------------------- */ #kv-knoppen { position: fixed; right: 24px; top: calc(18px + var(--kv-balk-h) + 14px); z-index: 25; display: flex; flex-direction: column; gap: 10px; } .kv-knopgroep { background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius); box-shadow: var(--kv-schaduw); overflow: hidden; display: flex; flex-direction: column; } .kv-knopgroep button { border: 0; background: transparent; padding: 0; width: var(--kv-tap); height: var(--kv-tap); display: flex; align-items: center; justify-content: center; color: var(--kv-inkt); font-size: 15px; transition: background .15s ease; } .kv-knopgroep button:hover { background: var(--kv-chip); } .kv-knopgroep button[disabled] { opacity: .4; cursor: default; } .kv-knopgroep button[disabled]:hover { background: none; } .kv-knopgroep .kv-knop-mono { font-family: var(--kv-font-mono); font-size: 9.5px; letter-spacing: .06em; } .kv-knopgroep hr { margin: 0; border: 0; border-top: var(--kv-lijn); } /* --- Linksonder: thema, bron ---------------------------------------------- */ #kv-onder { position: fixed; left: 24px; bottom: 20px; z-index: 22; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; transition: left .28s cubic-bezier(.22,.61,.36,1); } #kv-thema { display: inline-flex; padding: 4px; gap: 3px; background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius); box-shadow: var(--kv-schaduw); } .kv-thema-knop { border: 0; background: transparent; padding: 7px 13px; border-radius: var(--kv-radius-klein); font-size: 12.5px; font-weight: 600; color: var(--kv-inkt-mat); transition: background .15s ease, color .15s ease; } .kv-thema-knop:hover { background: var(--kv-chip); } /* #kv-app WINT met een id-selector (#kv-app button { color: inherit }), dus deze twee regels moeten dezelfde specificiteit halen. Zonder dat erfde de ACTIEVE knop donkere inkt op het groene accent -- en dan is het label van de weergave die je net koos onleesbaar. Precies het label dat je wilt zien. */ #kv-app .kv-thema-knop { color: var(--kv-inkt-mat); } #kv-app .kv-thema-knop.kv-actief { background: var(--kv-accent); color: var(--kv-wit); } .kv-thema-knop:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 2px; } #kv-bronregel { font-family: var(--kv-font-mono); font-size: 10px; letter-spacing: .06em; color: var(--kv-inkt-mat); background: rgba(var(--kv-paneel-kanalen), .82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 5px 9px; border-radius: var(--kv-radius-klein); } /* --- Paneel links ---------------------------------------------------------- */ #kv-panel-content { /* top:88px laat het paneel ONDER de zwevende balk beginnen. Op 18px stond het ernaast en moest de zoekbalk opzij (margin-left), waardoor die tegen de rechterrand werd gedrukt. Nu schuift er niets meer. */ position: fixed; left: 24px; top: 88px; bottom: 24px; width: var(--kv-paneel-b); z-index: 28; background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius); box-shadow: var(--kv-schaduw-diep); overflow: hidden; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transform: translateX(-10px); transition: opacity .18s ease, transform .28s cubic-bezier(.22,.61,.36,1); } #kv-panel-content.open { opacity: 1; pointer-events: auto; transform: none; } /* Het blok linksonder schuift wel opzij -- dat zit op dezelfde hoogte als het paneel. De ZOEKBALK niet meer: die staat er nu boven. */ #kv-app.kv-paneel-open #kv-onder { left: calc(24px + var(--kv-paneel-b) + 14px); } /* De kopband is donkergroen, zoals de handoff hem tekent: het adres springt eruit en de rest van het dossier blijft rustig papier. */ .kv-paneel-kop { flex: 0 0 auto; padding: 20px 20px 17px; background: var(--kv-kopband); color: var(--kv-paneel); } .kv-paneel-kop-regel { display: flex; align-items: flex-start; gap: 10px; } .kv-paneel-kop h3 { margin: 0; font-size: 23px; font-weight: 600; line-height: 1.15; letter-spacing: -.03em; color: var(--kv-paneel); flex: 1; min-width: 0; } /* De plek van "Opslaan" uit de handoff (#1300). De knop zelf staat in portefeuillemodules/toevoegen-knop.css; hier alleen waar hij komt te staan -- naast de titel en niet eronder, en hij krimpt niet mee als het adres lang is. De marge rechts houdt #kv-panel-close vrij. Die knop staat `position: fixed` op 47px van de paneelrand (27px breed + 20px padding), dus zonder deze marge valt het kruisje over de laatste letter van "Opslaan" -- zoals het op 20 augustus 2026 in de browser ook echt deed. 37px = 27 kruisje + 10 lucht. */ .kv-paneel-opslaan { flex: none; margin-right: 37px; } .kv-paneel-kop p { margin: 3px 0 0; font-size: 13px; font-weight: 500; color: var(--kv-kopband-mat); } /* In de band draaien de chips om: licht op donker in plaats van andersom. */ .kv-paneel-kop .kv-mini { background: rgba(245, 242, 234, .15); color: var(--kv-kopband-zacht); border-color: transparent; } .kv-paneel-kop .kv-mini--mono { background: rgba(242, 241, 236, .12); color: var(--kv-kopband-mat); } .kv-paneel-chips { display: flex; align-items: center; gap: 7px; margin-top: 11px; flex-wrap: wrap; } .kv-mini { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--kv-radius-klein); font-size: 11px; font-weight: 600; background: var(--kv-chip); color: var(--kv-inkt-mat); border: 1px solid var(--kv-chip-rand); } .kv-mini--groen { background: rgba(var(--kv-accent-kanalen), .12); color: var(--kv-accent-diep); border-color: rgba(var(--kv-accent-kanalen), .28); } .kv-mini--rood { background: rgba(var(--kv-label-g-kanalen), .10); color: var(--kv-label-g); border-color: rgba(var(--kv-label-g-kanalen), .26); } .kv-mini--mono { font-family: var(--kv-font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: .04em; } .kv-paneel-body { flex: 1 1 auto; overflow-y: auto; } .kv-sectie-kop { padding: 14px 18px 7px; font-family: var(--kv-font-mono); font-size: 10px; letter-spacing: .10em; color: var(--kv-inkt-licht); } /* KERNGEGEVENS ALS TEGELS (20 aug) De rijvorm (label links, waarde rechts, dunne scheiding) maakte van het dossier een tabel: dertien regels met veel wit ertussen, en de waarde -- het enige wat je komt halen -- als kleinste element op het scherm. De handoff tekent hier een raster van twee kolommen. Het 1px-gat IS de scheidingslijn: het raster staat op --kv-tegel-lijn en de tegels dekken hem af, dus er is geen border per tegel nodig die op de randen dubbel zou vallen. Contrast op --kv-tegel (#FBF9F3): waarde 14,07:1, label 6,11:1. GEEN tabular-nums, anders dan de handoff: in Schibsted Grotesk krijgt de punt dan een cijferbreedte en leest EUR 565.000 als "565 . 000". Tabellarische cijfers verdienen zich terug bij een kolom getallen onder elkaar; hier staat naast elk getal een ander label, dus er valt niets uit te lijnen. */ .kv-tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 10px 18px 4px; padding: 0; background: var(--kv-tegel-lijn); border: 1px solid var(--kv-tegel-lijn); border-radius: var(--kv-radius-klein); overflow: hidden; } .kv-tegel { background: var(--kv-tegel); padding: 12px 13px 13px; min-width: 0; } .kv-tegel--breed { grid-column: 1 / -1; } .kv-tegel-label { display: block; font-size: 12.5px; color: var(--kv-inkt-zacht); } .kv-tegel-waarde { display: block; margin-top: 3px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--kv-inkt); word-break: break-word; } .kv-tegel-waarde.kv-leeg { font-size: 14px; font-weight: 500; color: var(--kv-inkt-licht); } /* Laadt nog: de spinner staat op de plek van de waarde, met dezelfde hoogte als een gevulde tegel -- anders springt het raster zodra het antwoord komt. */ .kv-tegel-waarde.kv-laadt { display: flex; align-items: center; min-height: 22px; } /* De omtrek hangt aan de perceeloppervlakte: zelfde tegel, maar ondergeschikt. */ .kv-tegel-bij { margin-left: 7px; font-size: 12.5px; font-weight: 500; color: var(--kv-inkt-zacht); } /* Het voorbehoud bij de vergunningen (publicatievenster) staat onder de waarde. */ .kv-rij-noot { display: block; margin-top: 3px; font-family: var(--kv-font-mono); font-size: 9.5px; letter-spacing: .03em; font-weight: 400; color: var(--kv-inkt-licht); line-height: 1.45; } /* BRON PER VELD (#1439). Zelfde regelstijl als .kv-rij-noot -- dit IS er een, met een eigen klasse zodat het bronregel-vinkje er specifiek op kan schakelen zonder de vergunningen-/misdrijven-/politiek-noten te raken. */ .kv-veld-bron a { color: var(--kv-accent-diep); text-decoration: underline; text-underline-offset: 1px; } .kv-veld-bron a:hover { color: var(--kv-accent); } .kv-veld-bron a:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 1px; } /* Uitgezet: de klasse staat op het paneel, niet op de tegels zelf -- één vinkje voor alle bronregels tegelijk. */ .kv-bronnen-uit .kv-veld-bron { display: none; } /* Het vinkje zelf. Boven de Kerngegevens-tegels, want het regelt wat er in die tegels aan bronregels verschijnt. */ .kv-bron-toggle { padding: 8px 18px 0; } .kv-bron-toggle label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--kv-inkt-zacht); cursor: pointer; } .kv-bron-toggle input { margin: 0; } .kv-bron-toggle input:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 2px; } /* Energielabel als datakleur -- A t/m G elk hun eigen vlak. */ .kv-label { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--kv-radius-klein); color: var(--kv-wit); font-weight: 700; font-size: 12px; } /* CONTRAST — gemeten (WCAG 2.1 relatieve luminantie) op de vlakkleuren; 12px vet is gewone tekst, dus de eis is 4,5:1. Alle zeven opnieuw nagerekend na het besluit op #1255 om B en F te verdonkeren. label vlak wit --kv-inkt gekozen A #2F7D52 5,03 2,95 wit B #4F8242 4,56 3,25 wit (was #5E9B4E: 3,35 / 4,43) C #9CAF4E 2,43 6,11 inkt D #D8B040 2,06 7,20 inkt E #C98A3E 2,92 5,07 inkt F #AC6338 4,57 3,24 wit (was #B96A3C: 4,05 / 3,66) G #A34438 6,10 2,43 wit Op de oude B en F haalde GEEN enkele tekstkleur uit het palet 4,5:1 -- de hoogst haalbare was 4,43 (B, op inkt) en 4,05 (F, op wit). Dat is niet met een andere tekstkleur op te lossen, alleen met een donkerder vlak. B en F staan nu net over de grens en de tekst gaat daarmee terug naar wit, zodat A/B/F/G weer één beeld vormen. Tweede bewuste afwijking van de handoff, vastgelegd in docs/architectuur/adr-kaart-ontwerp-2026-08.md. LET OP: --kv-label-g doet dubbel werk (.kv-mini--rood zet 'm als TEKST op het paneel, 5,45:1); wie aan G draait, meet die ook na. */ .kv-label--a { background: var(--kv-label-a); } .kv-label--b { background: var(--kv-label-b); } .kv-label--c { background: var(--kv-label-c); color: var(--kv-inkt); } .kv-label--d { background: var(--kv-label-d); color: var(--kv-inkt); } .kv-label--e { background: var(--kv-label-e); color: var(--kv-inkt); } .kv-label--f { background: var(--kv-label-f); } .kv-label--g { background: var(--kv-label-g); } .kv-adreslijst { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 4px; } .kv-adres-knop { text-align: left; width: 100%; font-size: 13px; font-weight: 600; color: var(--kv-inkt); background: var(--kv-papier); border: var(--kv-lijn); border-radius: var(--kv-radius-klein); padding: 9px 11px; min-height: 38px; transition: background .15s ease, border-color .15s ease; } .kv-adres-knop:hover { background: var(--kv-chip); } .kv-adres-knop.kv-actief { border-color: var(--kv-accent); background: rgba(var(--kv-accent-kanalen), .08); } .kv-adres-knop small { display: block; margin-top: 2px; font-weight: 400; font-size: 11px; color: var(--kv-inkt-zacht); } /* --- Tweeluik in het voorbeeld (#1254) -------------------------------------- * Lijst links, het gekozen ding rechts. Een demo waarin je niets kunt * aanraken verkoopt niets: je wilt zien wat er gebeurt als je klikt. En het * gebruikt de breedte die het luik toch al heeft -- één smalle kolom in een * kader van 1180 laat het leeg ogen. */ .kv-tweeluik { display: flex; gap: 0; min-height: 0; flex: 1 1 auto; } .kv-tweeluik-lijst { flex: none; width: 320px; overflow-y: auto; border-right: var(--kv-lijn); padding-bottom: 14px; } .kv-tweeluik-blad { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 0 0 18px; } .kv-lijst-regel { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; text-align: left; cursor: pointer; padding: 11px 16px; border: 0; border-bottom: var(--kv-lijn); background: none; } .kv-lijst-regel:hover { background: var(--kv-chip); } .kv-lijst-regel.kv-actief { background: var(--kv-tegel); box-shadow: inset 3px 0 0 var(--kv-accent); } .kv-lijst-regel:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: -2px; } .kv-lijst-soort, .kv-lijst-tijd { font-family: var(--kv-font-mono); font-size: 9.5px; letter-spacing: .08em; color: var(--kv-inkt-licht); } .kv-lijst-tijd { text-align: right; } .kv-lijst-vraag { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--kv-inkt); line-height: 1.35; } .kv-lijst-onder { grid-column: 1 / -1; font-size: 11px; color: var(--kv-inkt-zacht); } .kv-lijst-onder.kv-let-op { color: var(--kv-label-g); } .kv-detail-kop { padding: 16px 18px 4px; } .kv-detail-soort { font-family: var(--kv-font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--kv-inkt-licht); } .kv-detail-titel { margin: 5px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; } /* De regie-stappen: dit is wat Splitify DOET, en daarom het hart van de demo. */ /* Waar het gesprek over gaat. Een knop als er een pand aan hangt -- je klikt * door naar het kader met alle objectgegevens -- en een gewone regel als het * een losse vraag is. Die tweede staat er voluit: een lege plek zou lezen als * een ontbrekend gegeven in plaats van als een antwoord. */ .kv-onderwerp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 18px 0; padding: 10px 12px; width: calc(100% - 36px); background: var(--kv-tegel); border: var(--kv-lijn); border-radius: var(--kv-radius-klein); text-align: left; } .kv-onderwerp--knop { cursor: pointer; } .kv-onderwerp--knop:hover { border-color: var(--kv-accent); background: var(--kv-chip); } .kv-onderwerp--knop:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 2px; } .kv-onderwerp--los { background: none; border-style: dashed; } .kv-onderwerp-label { font-family: var(--kv-font-mono); font-size: 9.5px; letter-spacing: .08em; color: var(--kv-inkt-licht); } .kv-onderwerp-waarde { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--kv-inkt); } .kv-onderwerp--los .kv-onderwerp-waarde { font-weight: 400; color: var(--kv-inkt-zacht); } .kv-onderwerp-pijl { color: var(--kv-accent); font-size: 14px; } .kv-stappen { padding: 0 18px; display: flex; flex-direction: column; gap: 2px; } .kv-stap { position: relative; padding: 11px 0 11px 20px; border-bottom: var(--kv-lijn); } .kv-stap::before { content: ''; position: absolute; left: 2px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--kv-accent); } .kv-stap--bezig::before { background: var(--kv-label-d); } .kv-stap--wacht::before { background: none; border: 1.5px solid var(--kv-rand); } .kv-stap-kop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .kv-stap-code { font-family: var(--kv-font-mono); font-size: 9.5px; color: var(--kv-inkt-licht); } .kv-stap-naam { font-size: 13px; font-weight: 600; } .kv-stap-staat { font-size: 9.5px; font-family: var(--kv-font-mono); letter-spacing: .06em; padding: 2px 6px; border-radius: 3px; background: var(--kv-chip); color: var(--kv-inkt-zacht); } .kv-stap--klaar .kv-stap-staat { background: var(--kv-kopband-zacht); color: var(--kv-accent-diep); } .kv-stap-duur { font-family: var(--kv-font-mono); font-size: 9.5px; color: var(--kv-inkt-licht); } .kv-stap-tekst { margin: 5px 0 7px; font-size: 12.5px; line-height: 1.55; color: var(--kv-inkt-mat); } .kv-stap-bronnen { display: flex; gap: 5px; flex-wrap: wrap; } .kv-bron-chip { font-family: var(--kv-font-mono); font-size: 9px; letter-spacing: .06em; padding: 3px 6px; border-radius: 3px; background: var(--kv-chip); color: var(--kv-inkt-zacht); } .kv-antwoord { margin: 14px 18px 0; padding: 14px 16px; background: var(--kv-kopband); border-radius: var(--kv-radius); } .kv-antwoord-kop { font-family: var(--kv-font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--kv-kopband-mat); } .kv-antwoord p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--kv-paneel); } .kv-antwoord ul { margin: 10px 0 0; padding-left: 18px; } .kv-antwoord li { font-size: 12.5px; line-height: 1.55; color: var(--kv-kopband-zacht); margin-bottom: 5px; } .kv-taken { padding: 0 18px; } .kv-taak { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: var(--kv-lijn); } .kv-taak-vink { width: 13px; height: 13px; border: 1.5px solid var(--kv-rand); border-radius: 3px; } .kv-taak-naam { font-size: 13px; } .kv-taak-datum { font-family: var(--kv-font-mono); font-size: 10px; color: var(--kv-inkt-licht); } .kv-taak--laat .kv-taak-datum { color: var(--kv-label-g); } .kv-notitie, .kv-leeg-regel { padding: 0 18px; font-size: 12.5px; line-height: 1.6; color: var(--kv-inkt-zacht); } /* --- Voorbeeldweergave in het luik (#1254) ---------------------------------- * Uitgelogd zie je hoe het eruit ziet vóór je een account maakt. De band * bovenaan is niet weg te klikken en niet subtiel: verzonnen data die voor * echt kan doorgaan is precies wat dit product niet mag doen. */ /* Het luik is een flexbox voor de twee kolommen van de echte pagina; het voorbeeld is één kolom en moet zelf de breedte pakken. Zonder flex:1 perst hij zich in de linkerhelft en staat de rest leeg. */ .kv-voorbeeld { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* Niet over de volle 1180 uitsmeren: een lijst van drie regels over een meter scherm leest slechter dan een kolom die je in één blik vangt. */ .kv-voorbeeld-band { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; padding: 10px 18px; background: var(--kv-chip); border-bottom: var(--kv-lijn); font-size: 11.5px; color: var(--kv-inkt-zacht); } .kv-voorbeeld-merk { font-family: var(--kv-font-mono); font-size: 9.5px; letter-spacing: .1em; padding: 3px 7px; border-radius: var(--kv-radius-klein); background: var(--kv-kopband); color: var(--kv-paneel); } /* Het voorbeeld staat een tint terug: je kijkt naar iets van iemand anders. */ .kv-voorbeeld .kv-tegels { opacity: .82; } .kv-tegel--let-op .kv-tegel-bij { color: var(--kv-label-g); } .kv-voorbeeld-oproep { margin: 16px 18px 0; padding: 18px; text-align: center; background: var(--kv-tegel); border: var(--kv-lijn); border-radius: var(--kv-radius); } .kv-voorbeeld-oproep p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--kv-inkt); } .kv-voorbeeld-knop { display: inline-block; padding: 10px 20px; border-radius: var(--kv-radius-klein); background: var(--kv-accent); color: var(--kv-paneel); font-size: 13.5px; font-weight: 600; text-decoration: none; } .kv-voorbeeld-knop:hover { background: var(--kv-accent-diep); } .kv-voorbeeld-knop:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 2px; } .kv-voorbeeld-klein { margin: 12px 0 0 !important; font-size: 11.5px !important; color: var(--kv-inkt-zacht) !important; } /* --- Het luik (#1254) ------------------------------------------------------- * Portefeuille en gesprekken over de kaart, in hetzelfde kader als het * pandpaneel maar breder: dat paneel is een pand, dit is een werkblad. * Links blijft een strook kaart zichtbaar -- je moet blijven voelen dat je op * de kaart staat, anders is het alsnog een aparte pagina. */ #kv-luik { /* LINKS, waar ook het pandpaneel staat -- dat is waar je op deze pagina naar kijkt. Stond eerst rechts; dan moest je oog verspringen tussen "pand aangeklikt" en "portefeuille geopend", terwijl het hetzelfde soort ding is. Breder dan het pandpaneel, want een portefeuille is een werkblad. */ /* 88px, gelijk aan #kv-panel-content. Stond op 84 en dat scheelde vier pixels met het pandpaneel ernaast -- net genoeg om scheef te ogen. */ position: fixed; top: 88px; left: 24px; bottom: 24px; z-index: 38; width: min(1180px, calc(100vw - 320px)); display: flex; flex-direction: column; background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius); box-shadow: var(--kv-schaduw-diep); overflow: hidden; } #kv-luik[hidden] { display: none; } /* Inloggen is een formulier, geen werkblad: smaller, en niet tot onderaan het scherm. Een e-mailveld in een kader van 1180 breed oogt als een vergissing. */ /* Inloggen komt RECHTS. Het luik links vervangt waar je naar keek; inloggen hoort daarnaast te staan -- je klikt het meestal aan vanuit iets wat je openhoudt, en dan wil je dat niet kwijt. */ #kv-luik[data-oppervlak="inloggen"] { width: min(460px, calc(100vw - 48px)); bottom: auto; left: auto; right: 24px; } #kv-luik[data-oppervlak="inloggen"] #kv-luik-romp { display: block; overflow-y: auto; padding: 18px; } /* Panden binnen een project: aanklikbaar, want een project is een verzameling panden en niet alleen een getal. Zelfde data-pand-haak als het gesprek. */ .kv-pandlijst { display: flex; flex-direction: column; gap: 6px; margin: 0 0 4px; } .kv-pandregel { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; text-align: left; cursor: pointer; background: var(--kv-papier); border: var(--kv-lijn); border-radius: 8px; font: inherit; color: inherit; transition: border-color .15s ease, background .15s ease; } .kv-pandregel:hover { background: var(--kv-paneel); border-color: var(--kv-accent); } .kv-pandregel-adres { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; } .kv-pandregel-pijl { flex: none; opacity: .5; font-size: 13px; } /* HET PAND KOMT RECHTS TE STAAN, NIET LINKS. Ze stonden allebei op left:24px, en met z-index 28 tegen 38 verdween het pand achter het luik: je klikte een pand aan vanuit een gesprek en zag niets gebeuren. Eerst schoof het luik opzij en bleef het pand links. Dat werkte, maar je leesplek verspringt dan: het project dat je aan het lezen was schuift onder je ogen weg. Andersom blijft het luik staan waar het stond en komt het pand ernaast -- dezelfde kant als waar je klikte. Het inlogvenster doet hier niet aan mee: dat staat zelf al rechts. */ /* TWEE MATEN DRAGEN DE HELE INDELING. --kv-luik-b hoe breed het luik is (smaller zodra er een pandpaneel bij komt) --kv-pand-l waar het pandpaneel begint Alles wat aan het pandpaneel hangt rekent vanaf --kv-pand-l. Dat was eerder niet zo: het kruisje en de lagenknoppen bleven op de OUDE plek van het paneel staan (455 en 516) terwijl het paneel naar rechts verhuisde, en verdwenen dus onder het luik. Gemeld 27 augustus 2026. */ #kv-app { --kv-luik-b: min(1180px, calc(100vw - 320px)); --kv-pand-l: var(--kv-marge-scherm); --kv-strook-b: 46px; } #kv-app.kv-paneel-open { --kv-luik-b: min(1180px, calc(100vw - var(--kv-paneel-b) - 62px)); } #kv-app.kv-luik-open:not(.kv-luik-inloggen) { --kv-pand-l: calc(var(--kv-marge-scherm) + var(--kv-luik-b) + 14px); } #kv-app.kv-paneel-open #kv-luik:not([hidden]):not([data-oppervlak="inloggen"]) { width: var(--kv-luik-b); } #kv-app.kv-luik-open.kv-paneel-open:not(.kv-luik-inloggen) #kv-panel-content { left: var(--kv-pand-l); right: auto; transform: translateX(10px); /* komt van rechts binnen, niet van links */ } #kv-app.kv-luik-open.kv-paneel-open:not(.kv-luik-inloggen) #kv-panel-content.open { transform: none; } /* Het kruisje hangt aan de rechterbovenhoek van het paneel, dus het verhuist mee. */ #kv-app.kv-luik-open.kv-paneel-open:not(.kv-luik-inloggen) #kv-panel-close { left: calc(var(--kv-pand-l) + var(--kv-paneel-b) - 47px); } /* En de lagenknoppen komen naast wat er open staat te staan, niet eronder. */ #kv-app.kv-luik-open #kv-onder { left: calc(var(--kv-pand-l) + var(--kv-marge-scherm)); } #kv-app.kv-luik-open.kv-paneel-open:not(.kv-luik-inloggen) #kv-onder { left: calc(var(--kv-pand-l) + var(--kv-paneel-b) + 14px); } #kv-luik-kop { flex: none; display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: var(--kv-kopband); } #kv-luik-titel { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--kv-paneel); } #kv-luik-sluit { flex: none; width: 27px; height: 27px; border: 0; cursor: pointer; border-radius: var(--kv-radius-klein); background: rgba(var(--kv-paneel-kanalen), .16); color: var(--kv-paneel); font-size: 15px; line-height: 1; } #kv-luik-sluit:hover { background: rgba(var(--kv-paneel-kanalen), .26); } #kv-luik-sluit:focus-visible { outline: 2px solid var(--kv-paneel); outline-offset: -2px; } /* SCROLLEN, NIET AFKNIPPEN (28 augustus 2026). Stond op overflow:hidden. Dat werkt voor het portefeuille-overzicht, want .pf-app laat zijn twee kolommen zelf scrollen. Het PROJECTscherm gebruikt .pf-romp en heeft die kolommen niet: gemeten scrollHeight 772 tegen clientHeight 679, dus 93px viel buiten beeld en was onbereikbaar. Hetzelfde knipte het keuzemenu van de toevoegen-knop af. Auto in plaats van hidden: waar een oppervlak zijn eigen scroll regelt komt er geen tweede balk bij, want dan past de inhoud precies. */ #kv-luik-romp { flex: 1 1 auto; min-height: 0; display: flex; overflow-y: auto; overflow-x: hidden; } /* Het skelet: de vorm van wat er komt, niet het woord "Laden". De puls is traag en klein -- een opvallende animatie maakt wachten langer, geen korter. Respecteert prefers-reduced-motion. */ .kv-luik-skelet { flex: 1 1 auto; display: flex; gap: 12px; padding: 12px; min-height: 0; } .kv-skelet-rail { flex: none; width: 290px; display: flex; flex-direction: column; gap: 8px; } .kv-skelet-blad { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; } .kv-skelet-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .kv-skelet { display: block; border-radius: var(--kv-radius-klein); background: var(--kv-chip); animation: kv-puls 1.8s ease-in-out infinite; } .kv-skelet--knop { height: 34px; } .kv-skelet--rij { height: 78px; } .kv-skelet--kop { height: 14px; width: 130px; } .kv-skelet--tegel { height: 62px; } .kv-skelet--breed { height: 54px; } @keyframes kv-puls { 0%, 100% { opacity: .55; } 50% { opacity: .95; } } @media (prefers-reduced-motion: reduce) { .kv-skelet { animation: none; } } .kv-luik-laadt-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .kv-luik-laadt { padding: 22px 18px; font-size: 12.5px; color: var(--kv-inkt-zacht); } /* De pagina brengt zijn eigen schil mee. Binnen het luik is die schil er al -- de kop staat hierboven -- dus vervalt de buitenrand en scrollen de kolommen binnen het luik in plaats van binnen het scherm. */ #kv-luik-romp .pf-app { flex: 1 1 auto; min-height: 0; padding: 12px; gap: 12px; } #kv-luik-romp .pf-decor, #kv-luik-romp .pf-decor-bron, #kv-luik-romp .pf-balk { display: none; } @media (max-width: 900px) { #kv-luik { left: 12px; right: 12px; top: 74px; bottom: 12px; width: auto; } } /* --- Alles in Splitify (#1254) ---------------------------------------------- * Het woordmerk is de ingang. Het paneel zweeft over de chrome, in dezelfde * paneelkleur en met dezelfde kopband als het pandpaneel -- het is hetzelfde * soort ding en hoort er zo uit te zien. Vier kolommen op breed, twee op * tablet, één op een telefoon. */ /* Het anker waar kaart-nav.js de knop in zet. * * pointer-events: auto is hier GEEN opsmuk. De kaartbalk staat op * pointer-events: none zodat je dwars door de chrome heen de kaart kunt * slepen; elk interactief onderdeel zet het zelf weer aan (#kv-zoek-blok, * #kv-chips, #kv-account doen dat ook). Zonder deze regel ligt het * kaart-canvas erbovenop en bereikt een muisklik de knop nooit -- terwijl * button.click() in de console gewoon werkt, wat het lastig te vinden maakt. * * align-self: center omdat de balk zijn kinderen op flex-start zet; zonder * dit staat de knop tien pixels hoger dan inloggen ernaast. */ [data-splitify-nav] { align-self: center; display: inline-flex; align-items: center; pointer-events: auto; } #kv-nav-knop { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 34px; padding: 0 12px; margin-right: 8px; background: var(--kv-chip); border: var(--kv-lijn); border-radius: var(--kv-radius-klein); font-size: 13px; font-weight: 600; color: var(--kv-inkt); cursor: pointer; } #kv-nav-knop:hover { background: var(--kv-rand); } #kv-nav-knop:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 1px; } #kv-nav-knop[aria-expanded="true"] { background: var(--kv-kopband); border-color: var(--kv-kopband); color: var(--kv-paneel); } .kv-nav-knop-icoon { display: inline-flex; color: var(--kv-inkt-zacht); } #kv-nav-knop[aria-expanded="true"] .kv-nav-knop-icoon { color: var(--kv-kopband-zacht); } #kv-nav { /* Rechts uitgelijnd, want de knop staat rechts. Een paneel dat linksonder een knop rechtsboven opent, laat je zoeken waar het vandaan kwam. top/right zijn een TERUGVAL: kaart-nav.js zet ze bij het openen op de werkelijke plek van de knop, want de kaart heeft zwevende chrome en de portefeuille een gewone kopbalk. */ position: fixed; top: 88px; right: 24px; z-index: 39; width: min(852px, calc(100vw - 48px)); max-height: calc(100vh - 116px); overflow-y: auto; background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius); box-shadow: var(--kv-schaduw); } #kv-nav[hidden] { display: none; } #kv-nav-kop { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px 15px; background: var(--kv-kopband); } #kv-nav-titel { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--kv-paneel); } #kv-nav-onder { font-size: 12.5px; line-height: 1.45; color: var(--kv-kopband-mat); margin-top: 3px; } #kv-nav-sluit { flex: none; width: 27px; height: 27px; border-radius: var(--kv-radius-klein); background: rgba(var(--kv-paneel-kanalen), .16); color: var(--kv-paneel); font-size: 15px; line-height: 1; border: 0; cursor: pointer; } #kv-nav-sluit:hover { background: rgba(var(--kv-paneel-kanalen), .26); } #kv-nav-sluit:focus-visible { outline: 2px solid var(--kv-paneel); outline-offset: -2px; } #kv-nav-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--kv-tegel-lijn); border-bottom: var(--kv-lijn); } .kv-nav-kolom { background: var(--kv-paneel); padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 2px; } .kv-nav-groep { font-family: var(--kv-font-mono); font-size: 10px; letter-spacing: .10em; color: var(--kv-inkt-licht); margin-bottom: 9px; } .kv-nav-kolom a { display: block; padding: 6px 8px; margin: 0 -8px; font-size: 13px; color: var(--kv-inkt); text-decoration: none; border-radius: var(--kv-radius-klein); } .kv-nav-kolom a:hover { background: var(--kv-chip); } .kv-nav-kolom a:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: -2px; } /* Het accountblok, verhuisd naar het menu. In de balk stond het horizontaal * naast de andere chrome; hier staat het onder elkaar en mag het de volle * breedte van de kolom nemen. */ .kv-nav-account { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0 -8px 8px; padding: 0 0 8px; border-bottom: var(--kv-lijn); } .kv-nav-account #kv-account, .kv-nav-account #pf-account { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 0; height: auto; } .kv-nav-account .kv-account-knop, .kv-nav-account .pf-knop { display: block; width: auto; text-align: left; padding: 6px 8px; margin: 0; font-family: var(--kv-font); font-size: 13px; color: var(--kv-inkt); text-decoration: none; background: none; border: 0; border-radius: var(--kv-radius-klein); cursor: pointer; /* De balkvariant staat in kapitalen met letterspatiëring, want daar is het een los knopje. In het menu leest hij als de regels eronder. */ text-transform: none; letter-spacing: normal; font-weight: 400; } .kv-nav-account .kv-account-knop:hover, .kv-nav-account .pf-knop:hover { background: var(--kv-chip); } .kv-nav-account .kv-account-naam { font-size: 12px; color: var(--kv-inkt-zacht); padding: 0 0 2px; } #kv-nav-voet { padding: 11px 20px; font-family: var(--kv-font-mono); font-size: 9.5px; letter-spacing: .05em; color: var(--kv-inkt-licht); } @media (max-width: 860px) { #kv-nav-raster { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { #kv-nav { right: 12px; top: 74px; width: calc(100vw - 24px); } #kv-nav-raster { grid-template-columns: 1fr; } } /* --- Inklapbare adviesregels (#1372, herzien na feedback) ------------------- * Vijftien alinea's onder elkaar leest niemand. Titel zichtbaar, uitleg * erachter -- met
, dus zonder JavaScript en toetsenbordbedienbaar. * Het bedrag staat in de samenvatting: dat is waar iemand op scant. */ .kv-sub-kop { padding: 10px 18px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--kv-inkt-zacht); } .kv-vouwlijst { padding: 0 12px 4px; display: flex; flex-direction: column; gap: 3px; } .kv-vouw { background: var(--kv-papier); border: var(--kv-lijn); border-radius: var(--kv-radius-klein); } .kv-vouw__kop { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 10px; padding: 8px 11px; cursor: pointer; list-style: none; font-size: 12.5px; color: var(--kv-inkt); } .kv-vouw__kop::-webkit-details-marker { display: none; } /* Het driehoekje links, zodat zichtbaar is dat er meer achter zit. */ .kv-vouw__titel { font-weight: 600; } .kv-vouw__titel::before { content: '\25B8'; display: inline-block; width: 12px; color: var(--kv-inkt-licht); transition: transform .12s ease; } .kv-vouw[open] .kv-vouw__titel::before { transform: rotate(90deg); } .kv-vouw__kort { font-family: var(--kv-font-mono); font-size: 10.5px; color: var(--kv-inkt-licht); white-space: nowrap; } .kv-vouw__uitleg { padding: 0 11px 9px 23px; font-size: 11.5px; line-height: 1.55; color: var(--kv-inkt-zacht); } .kv-vouw__kop:hover { background: var(--kv-chip); border-radius: var(--kv-radius-klein); } .kv-vouw__kop:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: -2px; } /* --- Onderwijs en opvang (#1371) ------------------------------------------- * Een lijst en geen tegels: bij een school telt de naam, en die past niet in * een tegel van twee regels. De afstand staat rechts uitgelijnd zodat je de * regels langs elkaar kunt lezen zonder ze te vergelijken op tekstlengte. */ .kv-voorzieningen { padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 4px; } .kv-voorziening { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 10px; background: var(--kv-papier); border: var(--kv-lijn); border-radius: var(--kv-radius-klein); padding: 8px 11px; } .kv-voorziening__naam { font-size: 13px; font-weight: 600; color: var(--kv-inkt); } /* Vergunningen-tijdlijn (#1438 AC3): een titel kan zijn eigen publicatie-URL dragen. Inherit + underline, geen los blauw -- ziet er hetzelfde uit als een naam zonder link, maar is aanklikbaar. */ .kv-voorziening__naam a { color: inherit; text-decoration: underline; text-underline-offset: 1px; } .kv-voorziening__sub { grid-column: 1; font-size: 11px; color: var(--kv-inkt-zacht); margin-top: 2px; } .kv-voorziening__afstand { grid-row: 1; grid-column: 2; font-family: var(--kv-font-mono); font-size: 11px; color: var(--kv-inkt-licht); white-space: nowrap; } /* Zowel "niets gevonden" als "niet op te halen" -- die twee zeggen iets * verschillends en de tekst maakt het onderscheid, niet de opmaak. */ .kv-lijst-leeg { padding: 8px 18px 10px; font-size: 12px; line-height: 1.5; color: var(--kv-inkt-zacht); } .kv-lijst-voet { padding: 2px 18px 10px; font-size: 11px; line-height: 1.5; color: var(--kv-inkt-licht); } .kv-paneel-noot { padding: 11px 18px; font-size: 11.5px; line-height: 1.5; color: var(--kv-inkt-zacht); } .kv-paneel-noot--mono { font-family: var(--kv-font-mono); font-size: 9.5px; letter-spacing: .05em; color: var(--kv-inkt-licht); } .kv-laadregel { display: flex; align-items: center; gap: 9px; padding: 11px 18px; font-size: 12px; color: var(--kv-inkt-zacht); } .kv-spinner { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid var(--kv-rand); border-top-color: var(--kv-accent); animation: kv-spin .9s linear infinite; } /* --- Wat is hier mogelijk (#1267) ------------------------------------------- Maten uit splitify-kaart.dc.html: nummerblok 30x24, gat 12, kaartmarge 8, titel 15/600, regel 12,5/1.45. Alleen de zijmarge is 18px in plaats van 20px en de radius van het nummerblok 4px in plaats van 3px -- dat zijn de maat en het token die de rest van dit paneel al aanhoudt. GEEN NIEUWE KLEUREN. Kaart 01 draagt de accenttint die .kv-vraag-melding al gebruikt (accent op 10%, rand op 28%); de overige kaarten staan op de vorm van .kv-adres-knop (--kv-papier + --kv-lijn), de bestaande klikbare kaart in dit paneel. De kansrijkheid-chip is de kale .kv-mini -- bewust niet --groen/--rood, want die twee zijn oordelen en er is nog geen oordeel. CONTRAST -- gemeten (WCAG 2.1), eis 4,5:1. De kaart-01-achtergrond is de samenstelling van --kv-accent op 10% over --kv-paneel = #E3E6DC: titel --kv-inkt op #E3E6DC 11,72 op --kv-papier 11,67 regel --kv-inkt-zacht op #E3E6DC 5,09 op --kv-papier 5,07 nummer --kv-wit op --kv-accent 5,08 nummer --kv-accent-diep op --kv-chip 8,34 chip --kv-inkt-mat op --kv-chip 8,47 pijl --kv-accent-diep op #E3E6DC 8,07 (--kv-inkt-mat op --kv-papier 8,15; beide zijn beeld, maar halen de teksteis toch) --------------------------------------------------------------------------- */ .kv-mogelijk { display: flex; flex-direction: column; gap: 8px; padding: 4px 18px 6px; } .kv-kans { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 13px 14px; text-align: left; background: var(--kv-papier); border: var(--kv-lijn); border-radius: var(--kv-radius-klein); transition: background .15s ease; } .kv-kans:hover { background: var(--kv-chip); } .kv-kans:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 2px; } .kv-kans--eerst { background: rgba(var(--kv-accent-kanalen), .10); border-color: rgba(var(--kv-accent-kanalen), .28); } .kv-kans--eerst:hover { background: rgba(var(--kv-accent-kanalen), .16); } .kv-kans-nr { flex: none; width: 30px; height: 24px; border-radius: var(--kv-radius-klein); display: flex; align-items: center; justify-content: center; background: var(--kv-chip); color: var(--kv-accent-diep); font-family: var(--kv-font-mono); font-size: 10.5px; } .kv-kans--eerst .kv-kans-nr { background: var(--kv-accent); color: var(--kv-wit); } .kv-kans-tekst { flex: 1; min-width: 0; } .kv-kans-titel { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 15px; font-weight: 600; letter-spacing: -.02em; } .kv-kans-regel { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--kv-inkt-zacht); } /* TEASERBANNER onder "Wat is hier mogelijk" Een omlijnd kaartje viel weg tussen de dossierrijen. Dit is een vlak in de kopbandkleur: het leest als een aanbod en niet als nog een rij. Hij draagt wat er achter zit -- de acht mogelijkheden en de acht dossieronderdelen -- want dat is waar je op klikt. Contrast op #3D5A4E: titel #F5F2EA 6,77:1, de twee fijne regels #C2CDC6 4,63:1 (zie de contrasttabel bovenin). */ .kv-teaser { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 15px 16px; text-align: left; background: var(--kv-kopband); color: var(--kv-paneel); border: 0; border-radius: var(--kv-radius-klein); transition: background .15s ease; } .kv-teaser:hover { background: var(--kv-accent-diep); } .kv-teaser:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 2px; } .kv-teaser-tekst { flex: 1; min-width: 0; } .kv-teaser-titel { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--kv-paneel); } .kv-teaser-regel { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--kv-kopband-zacht); } .kv-teaser-actie { display: block; margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--kv-paneel); } .kv-teaser-pijl { flex: none; font-size: 17px; color: var(--kv-kopband-zacht); } /* --- Dialoog "Wat is hier mogelijk" ------------------------------------------- Zelfde papier, zelfde rand, zelfde radius als het paneel: het punt van dit venster is dat je NIET het gevoel hebt de kaart te verlaten. */ #kv-mogelijk-dialoog { width: min(460px, calc(100vw - 32px)); padding: 0; border: var(--kv-lijn); border-radius: var(--kv-radius); background: var(--kv-paneel); color: var(--kv-inkt); box-shadow: var(--kv-schaduw-diep); } #kv-mogelijk-dialoog::backdrop { background: rgba(var(--kv-schim-kanalen), .42); } .kv-dialoog-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; } .kv-dialoog-kop h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; } #kv-mogelijk-sluit { flex: none; width: 30px; height: 30px; border-radius: var(--kv-radius-klein); background: var(--kv-chip); border: var(--kv-lijn); font-size: 17px; line-height: 1; } #kv-mogelijk-sluit:hover { background: var(--kv-rand); } .kv-dialoog-adres { margin: 0; padding: 0 18px 12px; font-family: var(--kv-font-mono); font-size: 11px; color: var(--kv-inkt-zacht); } .kv-dialoog-body { padding: 0 18px 14px; } .kv-dialoog-sectie { padding: 10px 0 7px; font-family: var(--kv-font-mono); font-size: 10px; letter-spacing: .10em; color: var(--kv-inkt-licht); } .kv-dialoog-alinea { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--kv-inkt-mat); } .kv-dialoog-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 18px 16px; border-top: var(--kv-lijn); background: var(--kv-papier); border-radius: 0 0 var(--kv-radius) var(--kv-radius); } .kv-dialoog-prijs { font-family: var(--kv-font-mono); font-size: 11px; color: var(--kv-inkt-zacht); } .kv-dialoog-actie { padding: 10px 16px; border-radius: var(--kv-radius-klein); background: var(--kv-accent); color: var(--kv-wit); font-size: 13.5px; font-weight: 600; text-decoration: none; } .kv-dialoog-actie:hover { background: var(--kv-accent-diep); } .kv-dialoog-actie:focus-visible { outline: 2px solid var(--kv-accent-diep); outline-offset: 2px; } /* Op een telefoon staat hij onderaan, zoals het paneel: dan valt hij binnen duimbereik in plaats van midden op het scherm. */ @media (max-width: 767.98px) { /* DE DUURSTE GETALLEN STAAN NIET ONDERAAN (#1345) Op een telefoon is het paneel een bodemplaat van 74vh met een raster van twee kolommen. Op een breed scherm zie je alle tien de tegels in een blik; op een telefoon zie je de eerste rijen en moet je scrollen. De WOZ was de TIENDE tegel en het energielabel de achtste -- precies de twee waar iemand voor komt, precies buiten beeld. Een melding daarover was geen datafout maar deze volgorde. Alleen de volgorde verschuift, niet de inhoud: `order` raakt de DOM niet, dus een schermlezer en de toetsenbordvolgorde houden de bronvolgorde. */ .kv-tegels .kv-tegel { order: 5; } .kv-tegels .kv-tegel--bouwjaar { order: 1; } .kv-tegels .kv-tegel--oppervlakte { order: 2; } .kv-tegels .kv-tegel--woz { order: 3; } .kv-tegels .kv-tegel--energielabel{ order: 4; } .kv-tegels .kv-tegel--woningtype { order: 5; } .kv-tegels .kv-tegel--gebruiksdoel{ order: 6; } .kv-tegels .kv-tegel--adressen { order: 7; } .kv-tegels .kv-tegel--perceel { order: 8; } .kv-tegels .kv-tegel--onbebouwd { order: 9; } .kv-tegels .kv-tegel--monument { order: 10; } /* De vergunningtegel loopt over de volle breedte en blijft onderaan. */ .kv-tegels .kv-tegel--breed { order: 11; } #kv-mogelijk-dialoog { width: 100%; max-width: none; margin: auto auto 0; border-radius: var(--kv-radius) var(--kv-radius) 0 0; border-left: 0; border-right: 0; border-bottom: 0; } .kv-dialoog-voet { justify-content: stretch; } .kv-dialoog-actie { flex: 1; text-align: center; } } .kv-kans-pijl { flex: none; margin-top: 1px; font-size: 15px; color: var(--kv-inkt-mat); } .kv-kans--eerst .kv-kans-pijl { color: var(--kv-accent-diep); } /* --- Vraag het Splitify (#1262) -------------------------------------------- Maten uit splitify-kaart.dc.html (veld 46px, snelvraag 32px), alleen de zijmarge is 18px in plaats van 20px -- dat is de marge die de rest van dit paneel al aanhoudt. #kv-app ERVOOR IS GEEN SLORDIGHEID: de reset bovenin zet `font: inherit; color: inherit` op elke knop en elk invoerveld ONDER een id-selector, en die wint van een kale class. Zonder de #kv-app-prefix hier zouden de snelvraag- knoppen en het invoerveld hun eigen maat en kleur niet krijgen. CONTRAST — gemeten (WCAG 2.1), eis 4,5:1: invoertekst --kv-inkt op --kv-papier 11,67 placeholder --kv-inkt-zacht op --kv-papier 5,07 prompt > --kv-accent-diep op --kv-papier 8,03 verzendpijl --kv-wit op --kv-accent 5,08 snelvraag --kv-inkt-mat op --kv-chip 8,47 melding --kv-accent-diep op #E3E6DC 8,07 Die placeholder heeft een eigen regel nodig: de algemene ::placeholder staat op --kv-inkt-licht, en dit is de enige plek waar dat token op papierkleur zou belanden -- daar haalt het 4,38 en dus niet AA (zie het tokenblok). */ .kv-vraagblok { padding: 4px 18px 6px; } .kv-vraagveld { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 5px 0 12px; background: var(--kv-papier); border: var(--kv-lijn); border-radius: var(--kv-radius-klein); } .kv-vraag-prompt { flex: none; font-family: var(--kv-font-mono); font-size: 13px; color: var(--kv-accent-diep); } #kv-app .kv-vraag-invoer { flex: 1; min-width: 0; border: 0; background: none; font-size: 13.5px; font-weight: 500; color: var(--kv-inkt); } #kv-app .kv-vraag-invoer::placeholder { color: var(--kv-inkt-zacht); } .kv-vraag-invoer:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 3px; border-radius: var(--kv-radius-klein); } #kv-app .kv-vraag-verzend { flex: none; width: 36px; height: 36px; border: 0; border-radius: var(--kv-radius-klein); display: flex; align-items: center; justify-content: center; background: var(--kv-accent); color: var(--kv-wit); font-size: 16px; font-weight: 600; transition: background .15s ease; } #kv-app .kv-vraag-verzend:hover { background: var(--kv-accent-diep); } .kv-snelvragen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } #kv-app .kv-snelvraag { height: 32px; padding: 0 12px; border-radius: var(--kv-radius-klein); background: var(--kv-chip); border: 1px solid var(--kv-chip-rand); font-size: 12.5px; font-weight: 500; color: var(--kv-inkt-mat); transition: background .15s ease; } #kv-app .kv-snelvraag:hover { background: var(--kv-rand); } .kv-vraag-verzend:focus-visible, .kv-snelvraag:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 2px; } .kv-vraag-melding { margin-top: 11px; padding: 13px 14px; border-radius: var(--kv-radius-klein); background: rgba(var(--kv-accent-kanalen), .10); border: 1px solid rgba(var(--kv-accent-kanalen), .28); font-size: 13px; line-height: 1.45; color: var(--kv-accent-diep); } .kv-vraag-melding p { margin: 0; } .kv-vraag-melding a { display: inline-block; margin-top: 7px; font-weight: 600; color: var(--kv-accent-diep); } .kv-paneel-voet { flex: 0 0 auto; border-top: var(--kv-lijn); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .kv-paneel-voet a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: var(--kv-radius); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .15s ease; } .kv-paneel-voet a.kv-primair { background: var(--kv-accent); color: var(--kv-wit); } .kv-paneel-voet a.kv-primair:hover { background: var(--kv-accent-diep); } .kv-paneel-voet a.kv-secundair { background: var(--kv-papier); border: var(--kv-lijn); color: var(--kv-inkt); } .kv-paneel-voet a.kv-secundair:hover { background: var(--kv-chip); } /* DE HOOFDACTIE VAN DE VOET IS NU HET DOSSIER, NIET "VOLLEDIGE ANALYSE" (#1442) De span komt leeg binnen (data-tvp-slot="voet") en ToevoegenAanProject vult 'm; deze regels blazen de standaard .tvp-knop (28px, chip-formaat -- goed genoeg voor de kop, te klein voor een hoofdactie) op naar dezelfde maat als .kv-primair hierboven. `.kv-paneel-voet-hoofdactie .tvp-knop` telt twee klassen (0,2,0), dat wint van de kale `.tvp-knop`-regel in toevoegen-knop.css (0,1,0); de :hover/--erin-varianten hieronder voegen zelf ook een klasse toe en blijven zo altijd één specificiteitsniveau boven hun tegenhanger daar -- ongeacht laadvolgorde van de twee stylesheets (zie kaart.html). */ .kv-paneel-voet-hoofdactie .tvp { display: block; } .kv-paneel-voet-hoofdactie .tvp-knop { width: 100%; height: auto; min-height: 42px; padding: 0 16px; border-radius: var(--kv-radius); font-size: 13.5px; background: var(--kv-accent); border-color: var(--kv-accent); --tvp-kleur: var(--kv-wit); } .kv-paneel-voet-hoofdactie .tvp-knop:hover { background: var(--kv-accent-diep); border-color: var(--kv-accent-diep); } .kv-paneel-voet-hoofdactie .tvp-knop--erin { background: var(--kv-papier); border-color: var(--kv-rand); --tvp-kleur: var(--kv-inkt); } #kv-panel-close { border: 0; padding: 0; /* De knop hangt in de donkere kopband, dus licht-op-donker. Hij staat vast t.o.v. het paneel: top 88 (paneelrand) + 20 (padding van de band). */ position: fixed; top: 108px; left: calc(24px + var(--kv-paneel-b) - 47px); z-index: 36; width: 27px; height: 27px; border-radius: var(--kv-radius-klein); background: rgba(242, 241, 236, .16); color: var(--kv-paneel); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s ease; } #kv-panel-close:hover { background: rgba(242, 241, 236, .28); } #kv-panel-close:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 2px; } .kv-vragen { display: flex; flex-direction: column; gap: 8px; padding: 0 18px; } .kv-vraag { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; background: var(--kv-papier); border: var(--kv-lijn); border-radius: var(--kv-radius-klein); font-size: 13px; line-height: 1.4; color: var(--kv-inkt-mat); } .kv-wenk { display: flex; align-items: center; gap: 9px; padding: 16px 18px; font-size: 12px; color: var(--kv-inkt-zacht); } .kv-stip { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--kv-accent); } .kv-stip::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--kv-accent); animation: kv-pulse 2.2s ease-out infinite; } /* --- Meldingen -------------------------------------------------------------- */ #kv-toast, #kv-afkap { position: fixed; left: 50%; transform: translate(-50%, 8px); bottom: 24px; z-index: 60; background: var(--kv-inkt); color: var(--kv-paneel); padding: 10px 16px; border-radius: var(--kv-radius); font-size: 12.5px; font-weight: 500; box-shadow: var(--kv-schaduw-diep); max-width: min(90vw, 460px); text-align: center; opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.22,.61,.36,1), opacity .16s ease; } #kv-toast.kv-show, #kv-afkap.kv-show { opacity: 1; transform: translate(-50%, 0); } /* NIET OVER HET LUIK HEEN. Allebei staan ze middenonder op z-index 60; #kv-luik staat op 38 en beslaat min(1180px, 100vw - 320px). Met een project of gesprek open landde het zwarte pilletje dus bovenop wat je aan het lezen was -- en "Zoom in om panden te zien" bleef staan zolang je uitgezoomd stond, want toonAfkap() heeft anders dan toonToast() geen timer. Verbergen en niet verschuiven: dit zijn meldingen over de KAART, met pointer-events:none. Kijk je naar een luik, dan is dat advies niet uitvoerbaar en niet waar je naar kijkt. Sluit je het luik en sta je nog uitgezoomd, dan komt hij vanzelf terug -- de stand zit in een class, niet in een timer. #kv-onder kreeg deze behandeling wel (regel 783) en deze twee niet; dat is hoe ze erover heen bleven staan. Inloggen doet niet mee: dat luik is smal en staat rechts, dus daar is geen overlap. Interactieve chrome die hoger staat -- #kv-nav (39), #kv-zoek-dropdown (45) -- blijft juist wel zichtbaar: die moet je kunnen gebruiken mét een luik open. */ #kv-app.kv-luik-open:not(.kv-luik-inloggen) #kv-toast, #kv-app.kv-luik-open:not(.kv-luik-inloggen) #kv-afkap { display: none; } /* Kaart-bezig: zwevend blokje bovenaan, zoals in het ontwerp. */ #kv-bezig { position: fixed; top: calc(18px + var(--kv-balk-h) + 14px); left: 50%; transform: translateX(-50%); z-index: 26; display: none; align-items: center; gap: 11px; height: 38px; padding: 0 15px; background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius); box-shadow: var(--kv-schaduw-diep); font-size: 12.5px; font-weight: 600; color: var(--kv-inkt-mat); } #kv-bezig.kv-show { display: flex; } /* --- Onder 1024px: paneel als bottom-sheet ---------------------------------- */ @media (max-width: 1023.98px) { #kv-balk { left: 12px; right: 12px; top: 12px; } #kv-knoppen { right: 12px; } #kv-onder { left: 12px; bottom: 12px; } #kv-vignet { display: none; } #kv-panel-content { left: 0; right: 0; width: auto; top: auto; bottom: 0; max-height: 74vh; border-radius: var(--kv-radius) var(--kv-radius) 0 0; border-left: 0; border-right: 0; border-bottom: 0; transform: translateY(100%); opacity: 1; } #kv-panel-content.open { transform: none; } /* De knop hoort in de kopband, en die zit bovenaan de bodemplaat: 74vh hoog, dus 74vh vanaf de onderrand minus de bandpadding. */ #kv-panel-close { top: auto; left: auto; right: 16px; bottom: calc(74vh - 47px); } #kv-app.kv-paneel-open #kv-zoek-blok { margin-left: 0; } #kv-app.kv-paneel-open #kv-onder { left: 12px; } } /* --- WebGL-terugval ---------------------------------------------------------- */ #kv-webgl-fallback { position: fixed; inset: 0; overflow-y: auto; background: var(--kv-papier); padding: 24px 16px; z-index: 10; } #kv-webgl-fallback .kv-webgl-melding { max-width: 640px; margin: 0 auto 20px; background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius); padding: 20px; font-size: 14px; line-height: 1.5; } #kv-webgl-fallback .kv-webgl-melding a { color: var(--kv-accent); font-weight: 600; } #kv-webgl-fallback table { width: 100%; max-width: 900px; margin: 0 auto; border-collapse: collapse; background: var(--kv-paneel); } #kv-webgl-fallback th, #kv-webgl-fallback td { text-align: left; padding: 8px 10px; border-bottom: var(--kv-lijn); font-size: 13px; } /* --- Projectspelden op de kaart (27 aug 2026) ------------------------------ Zetten het portefeuille-overzicht op DEZE kaart in plaats van op een tweede kaartje in het luik. Vorm volgt .pf-speld uit portefeuille.css, maar dan met de kaartchrome-schaduw eronder: hij zweeft boven de kaart en ligt er niet in. */ .kv-projectspeld { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 6px 11px; font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: var(--kv-inkt); text-align: left; cursor: pointer; background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius-pil); box-shadow: var(--kv-schaduw); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .kv-projectspeld:hover { border-color: var(--kv-accent); box-shadow: var(--kv-schaduw-diep); transform: translateY(-1px); } .kv-projectspeld-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kv-projectspeld-telling { flex: none; min-width: 19px; padding: 1px 5px; font-family: var(--kv-font-mono); font-size: 10.5px; font-weight: 500; text-align: center; color: var(--kv-paneel); background: var(--kv-kopband); border-radius: var(--kv-radius-pil); } /* --- Inklappen naar links (28 aug 2026) ------------------------------------ Sluiten gooit weg wat je aan het lezen was; inklappen zet het even opzij. Het vouwde eerst omhoog tot een balk over de volle breedte, en dan heb je de kaart nog steeds niet terug -- die lag onder een streep van 1180 pixels. Nu krimpt het paneel naar een strook aan zijn eigen linkerrand: de kaart komt vrij en de knop om terug te klappen blijft waar hij stond. */ #kv-luik.kv-ingeklapt { width: var(--kv-strook-b); } #kv-luik.kv-ingeklapt #kv-luik-romp { display: none; } #kv-luik.kv-ingeklapt #kv-luik-kop { flex-direction: column; gap: 8px; padding: 12px 0; height: 100%; align-items: center; justify-content: flex-start; } #kv-luik.kv-ingeklapt #kv-luik-titel { display: none; } #kv-luik-klap { flex: none; width: 26px; height: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--kv-paneel); cursor: pointer; background: rgba(var(--kv-paneel-kanalen), .16); border: 0; border-radius: var(--kv-radius-klein); } #kv-luik-klap:hover { background: rgba(var(--kv-paneel-kanalen), .28); } /* Het pandpaneel krimpt op dezelfde manier naar zijn linkerrand. */ #kv-panel-content.kv-ingeklapt { width: var(--kv-strook-b); } #kv-panel-content.kv-ingeklapt > * { display: none; } /* De twee knoppen van het pandpaneel hangen buiten het paneel, dus ze moeten apart mee naar binnen. Ingeklapt blijft alleen uitklappen over: sluiten doe je als je het dossier ziet, niet vanaf een blinde strook. */ /* TWEE VARIANTEN, ZODAT ER NIETS TE WINNEN VALT. De luik-open-regel hierboven zet dezelfde eigenschap met twee id's en drie klassen. Alleen op specificiteit gokken is hier broos -- de tweede variant draagt daarom exact dezelfde klassen plus een id extra, en wint dus altijd. Zonder dat bleef de knop op 1618 staan terwijl de strook op 1208 begon (gemeten 28 augustus 2026). */ #kv-panel-content.kv-ingeklapt ~ #kv-panel-klap, #kv-app.kv-luik-open.kv-paneel-open:not(.kv-luik-inloggen) #kv-panel-content.kv-ingeklapt ~ #kv-panel-klap { left: calc(var(--kv-pand-l) + 9px); } #kv-panel-content.kv-ingeklapt ~ #kv-panel-close { display: none; } #kv-panel-klap { position: fixed; top: 108px; z-index: 36; left: calc(24px + var(--kv-paneel-b) - 78px); width: 27px; height: 27px; line-height: 1; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--kv-paneel); cursor: pointer; background: rgba(var(--kv-paneel-kanalen), .16); border: 0; border-radius: var(--kv-radius-klein); } #kv-panel-klap:hover { background: rgba(var(--kv-paneel-kanalen), .28); } #kv-panel-klap[hidden] { display: none; } /* Mee naar rechts met het paneel, net als het kruisje. */ #kv-app.kv-luik-open.kv-paneel-open:not(.kv-luik-inloggen) #kv-panel-klap { left: calc(var(--kv-pand-l) + var(--kv-paneel-b) - 78px); }