/* Productthema "fris": rustig, licht en premium. Geladen via favicon.php (dat VOOR stijl.css staat) wanneer KR_PROFIEL_THEMA 'fris' is; daarom staan alle regels op body-niveau of dubbelklasse-specificiteit, zodat ze van stijl.css winnen ongeacht de laadvolgorde. Het Klimaatregie-profiel laadt dit bestand niet en blijft exact zoals het was. De accentkleuren (--kp-accent*) komen als inline variabelen uit favicon.php. Ontwerptaal: veel wit, verfijnde typografie, gelaagde zachte schaduwen — premium en kalm, nooit druk. */ body.kr-portaal-body { --kr-groen: var(--kp-accent, #2553d6); --kr-groen-donker: var(--kp-accent-donker, #1b3fa8); --kr-zachtgroen: var(--kp-accent-zacht, #e9eefc); --kr-inkt: #1d1d1f; --kr-grijs: #6e6e73; --kr-lijn: #e6e8ee; --kr-soft: #f2f4f7; --kr-radius: 14px; --kr-bg: #f6f5f2; --kr-kaart: #ffffff; --kr-kop-bg: #fbfaf8; --kr-veld-bg: #ffffff; /* Gelaagde schaduw: nauwelijks zichtbaar, wel voelbaar */ --kp-schaduw: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.05); --kp-schaduw-zweef: 0 2px 4px rgba(16, 24, 40, 0.05), 0 14px 34px rgba(16, 24, 40, 0.09); font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Inhoud in een kalme, gecentreerde kolom */ body.kr-portaal-body .kr-portaal-inhoud { max-width: 1080px; margin-left: auto; margin-right: auto; } /* Typografie: grote rustige koppen, cijfers netjes uitgelijnd */ body.kr-portaal-body .kr-portaal-paginatitel { font-size: 30px; font-weight: 700; letter-spacing: -1.1px; } body.kr-portaal-body .kr-portaal-paginasub { font-size: 14.5px; color: var(--kr-grijs); } body.kr-portaal-body { font-variant-numeric: tabular-nums; } /* Vlakken en kaarten: wit, hairline-rand en een gelaagde zachte schaduw */ body.kr-portaal-body .kr-tegel, body.kr-portaal-body .kr-form-vlak, body.kr-portaal-body .kr-tabel { border: 1px solid var(--kr-lijn); box-shadow: var(--kp-schaduw) !important; border-radius: var(--kr-radius); } body.kr-portaal-body .kr-tegel { transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } body.kr-portaal-body .kr-tegel:hover { transform: translateY(-2px); box-shadow: var(--kp-schaduw-zweef) !important; border-color: var(--kr-groen); } /* Knoppen: diep accent, zachte schaduw, duidelijke focus */ body.kr-portaal-body .kr-knop { border-radius: 999px; font-weight: 600; box-shadow: none !important; } body.kr-portaal-body .kr-knop:hover { filter: brightness(1.06); } body.kr-portaal-body a:focus-visible, body.kr-portaal-body button:focus-visible { outline: 2px solid var(--kr-groen); outline-offset: 2px; border-radius: var(--kr-radius-klein); } /* Zijbalk: bijna-wit met hairline, actieve regel als accentpil */ body.kr-portaal-body .kr-portaal-kop { background: var(--kr-kop-bg); border-right: 1px solid var(--kr-lijn); } body.kr-portaal-body .kr-portaal-kop nav a.kr-nav-actief { background: var(--kr-zachtgroen); color: var(--kr-groen-donker); border-radius: var(--kr-radius-klein); } /* Statuspillen: ingetogen en strak */ body.kr-portaal-body .kr-status-pil { border-radius: var(--kr-radius-klein); font-weight: 700; letter-spacing: 0; } /* Donkere modus: zelfde verfijning, accent leesbaar (dubbelklasse wint van stijl.css) */ html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body { --kr-focusring: 0 0 0 4px rgba(123,158,245,.18); --kr-groen: var(--kp-accent-licht, #7b9ef5); --kr-groen-donker: var(--kp-accent-licht, #7b9ef5); --kr-zachtgroen: rgba(84, 118, 224, 0.18); --kp-schaduw: none; --kp-schaduw-zweef: none; } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kr-tegel, html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kr-form-vlak, html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kr-tabel { box-shadow: none !important; } /* Menukopjes in de zijbalk (kernmodus): micro-labels */ body.kr-portaal-body .kp-nav-kop { display: block; font-size: 12.5px; font-weight: 700; color: var(--kr-grijs); margin: 18px 12px 5px; border-bottom: 1px solid var(--kr-lijn); padding-bottom: 5px; } body.kr-portaal-body .kp-nav-kop:first-child { margin-top: 4px; } /* Uitlegblok: vriendelijke hulp in gewone taal, op elke kernpagina */ body.kr-portaal-body .kp-uitleg { background: var(--kr-zachtgroen); border: 1px solid transparent; border-radius: var(--kr-radius); padding: 14px 18px; margin: 4px 0 20px; font-size: 14px; line-height: 1.65; color: var(--kr-inkt); } body.kr-portaal-body .kp-uitleg strong:first-child { display: block; margin-bottom: 3px; } body.kr-portaal-body .kp-uitleg summary { cursor: pointer; font-weight: 800; font-size: 13.5px; color: var(--kr-groen-donker); list-style: none; } body.kr-portaal-body .kp-uitleg summary::before { content: "? "; font-weight: 900; } body.kr-portaal-body .kp-uitleg[open] summary { margin-bottom: 6px; } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kp-uitleg { background: rgba(84, 118, 224, 0.12); } /* Abonnement-blokje onderin de zijbalk (kernmodus) */ body.kr-portaal-body .kp-abo { display: flex; flex-direction: column; gap: 3px; } body.kr-portaal-body .kp-abo-rij { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--kr-inkt); text-decoration: none; } body.kr-portaal-body a.kp-abo-rij:hover { text-decoration: underline; } body.kr-portaal-body .kp-abo-stip { width: 8px; height: 8px; border-radius: 999px; background: #17a35c; } /* Lege staten: vriendelijk en licht */ body.kr-portaal-body .kr-leeg-staat { border: 1.5px dashed var(--kr-lijn); border-radius: var(--kr-radius); background: var(--kr-kaart); color: var(--kr-grijs); } /* Startgids: premium kaart met accentstreep, groen vinkje bij afgeronde stap */ body.kr-portaal-body .kp-gids { background: var(--kr-kaart); border: 1px solid var(--kr-lijn); border-left: 3px solid var(--kr-groen); border-radius: var(--kr-radius); padding: 20px 22px; margin: 0 0 22px; box-shadow: var(--kp-schaduw); } body.kr-portaal-body .kp-gids-titel { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 10px; } body.kr-portaal-body .kp-gids-stap { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; font-size: 14.5px; } body.kr-portaal-body .kp-gids-nr { flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--kr-radius-klein); background: var(--kr-zachtgroen); color: var(--kr-groen-donker); font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } body.kr-portaal-body .kp-gids-nr-af { background: #e2f5ea; color: #17864d; } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kp-gids-nr-af { background: rgba(35, 170, 95, 0.2); color: #5fce93; } body.kr-portaal-body .kp-gids-stap a { color: var(--kr-groen-donker); font-weight: 700; text-decoration: none; } body.kr-portaal-body .kp-gids-stap a:hover { text-decoration: underline; } body.kr-portaal-body .kp-gids-af { text-decoration: line-through; color: var(--kr-grijs); } /* Startkaarten: premium met icoonchips en tilbeweging */ body.kr-portaal-body .kp-start-rooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 26px; } body.kr-portaal-body .kp-start-knop { display: flex; flex-direction: column; gap: 6px; background: var(--kr-kaart); border: 1px solid var(--kr-lijn); border-radius: var(--kr-radius); padding: 20px; text-decoration: none; color: var(--kr-inkt); box-shadow: var(--kp-schaduw); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } body.kr-portaal-body .kp-start-knop:hover { border-color: var(--kr-groen); transform: translateY(-2px); box-shadow: var(--kp-schaduw-zweef); } body.kr-portaal-body .kp-start-knop .kp-start-titel { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; } body.kr-portaal-body .kp-start-knop .kp-start-sub { font-size: 13px; color: var(--kr-grijs); } body.kr-portaal-body .kp-start-rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } body.kr-portaal-body .kp-start-knop .kp-start-cijfer { font-size: 24px; font-weight: 800; color: var(--kr-inkt); } body.kr-portaal-body .kp-start-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--kr-radius-klein); } body.kr-portaal-body .kp-start-ico svg { width: 21px; height: 21px; } body.kr-portaal-body .kp-ico-blauw { background: var(--kr-soft); color: var(--kr-inkt); } body.kr-portaal-body .kp-ico-groen { background: var(--kr-soft); color: var(--kr-inkt); } body.kr-portaal-body .kp-ico-amber { background: var(--kr-soft); color: var(--kr-inkt); } body.kr-portaal-body .kp-ico-paars { background: var(--kr-soft); color: var(--kr-inkt); } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kp-ico-blauw { background: rgba(255,255,255,0.06); color: var(--kr-inkt); } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kp-ico-groen { background: rgba(255,255,255,0.06); color: var(--kr-inkt); } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kp-ico-amber { background: rgba(255,255,255,0.06); color: var(--kr-inkt); } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kp-ico-paars { background: rgba(255,255,255,0.06); color: var(--kr-inkt); } /* Smalle schermen: het abonnement-blok hoort niet in de kopbalk */ @media (max-width: 980px) { body.kr-portaal-body .kp-abo { display: none; } } /* Invoervelden op onboarding-niveau: ruim, zachte rand, blauwe focusgloed. Geldt voor alle formulieren in het portaal (kernmodus laadt dit thema). */ body.kr-portaal-body input[type="text"], body.kr-portaal-body input[type="number"], body.kr-portaal-body input[type="email"], body.kr-portaal-body input[type="password"], body.kr-portaal-body input[type="date"], body.kr-portaal-body select, body.kr-portaal-body textarea { border-radius: var(--kr-radius-mid); border-width: 1.5px; padding: 11px 14px; transition: border-color .15s ease, box-shadow .15s ease; } body.kr-portaal-body input[type="text"]:focus, body.kr-portaal-body input[type="number"]:focus, body.kr-portaal-body input[type="email"]:focus, body.kr-portaal-body input[type="password"]:focus, body.kr-portaal-body select:focus, body.kr-portaal-body textarea:focus { outline: none; border-color: var(--kr-groen); box-shadow: var(--kr-focusring); } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body input[type="text"]:focus, html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body select:focus, html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body textarea:focus { box-shadow: var(--kr-focusring); } /* Formulierlabels: strak en klein, zoals de onboarding */ body.kr-portaal-body .kr-form-veld label, body.kr-portaal-body .kr-wb-veld label { font-size: 13px; font-weight: 600; } /* Tabellen: kalmer, meer lucht, rij-hover */ body.kr-portaal-body .kr-tabel th { font-size: 12.5px; font-weight: 600; color: var(--kr-grijs); } body.kr-portaal-body .kr-tabel td { padding-top: 13px; padding-bottom: 13px; } body.kr-portaal-body .kr-tabel tbody tr:hover td { background: var(--kr-soft); } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kr-tabel tbody tr:hover td { background: rgba(255, 255, 255, 0.04); } /* Primaire knoppen: onboarding-maat */ body.kr-portaal-body .kr-knop { padding: 12px 26px; font-size: 15px; } body.kr-portaal-body .kr-knop:active { transform: scale(.98); } /* ---- Hypermodern-laag: de diepere afwerking die het oude portaal loslaat ---- */ /* Navigatie als rustige rijen (Mollie-achtig): ruim, afgerond, duidelijke hover */ body.kr-portaal-body .kr-portaal-kop nav a { display: block; padding: 9px 12px; border-radius: var(--kr-radius-mid); font-size: 14px; font-weight: 500; color: var(--kr-inkt); transition: background .12s ease; } body.kr-portaal-body .kr-portaal-kop nav a:hover { background: var(--kr-soft); } body.kr-portaal-body .kr-portaal-kop nav a.kr-nav-actief { font-weight: 700; } /* Sectiekoppen en tussenkopjes: 700, strakker gespatieerd */ body.kr-portaal-body .kr-wb-sectiekop, body.kr-portaal-body .kr-dash-sectie, body.kr-portaal-body .kr-vh-sectiekop { font-weight: 700; letter-spacing: -0.4px; } /* Waarschuwings- en meldingsblokken: moderne callouts */ body.kr-portaal-body .kr-w-blok { border-radius: var(--kr-radius-mid); border: none; border-left: 3px solid var(--kr-lijn); box-shadow: var(--kp-schaduw); padding: 14px 18px; } body.kr-portaal-body .kr-w-groen { border-left-color: #17a35c; background: #f2faf5; } body.kr-portaal-body .kr-w-geel { border-left-color: #d9a514; background: #fdf9ee; } body.kr-portaal-body .kr-w-rood { border-left-color: #c0392b; background: #fdf3f1; } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kr-w-groen { background: rgba(35,170,95,.10); } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kr-w-geel { background: rgba(217,165,20,.10); } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kr-w-rood { background: rgba(192,57,43,.10); } /* Beheertegels: ruim en kalm */ body.kr-portaal-body .kr-tegel { padding: 22px 22px 20px; } body.kr-portaal-body .kr-tegel-label { font-size: 11.5px; font-weight: 600; color: var(--kr-grijs); text-transform: none; letter-spacing: 0; } body.kr-portaal-body .kr-tegel-titel { font-weight: 700; letter-spacing: -0.4px; } /* Alle secundaire knoppen als pill */ body.kr-portaal-body .kr-knop-licht { border-radius: 999px; font-weight: 600; } /* Lege staten: uitnodigend gecentreerd */ body.kr-portaal-body .kr-leeg-staat { text-align: center; padding: 30px 22px; font-size: 14.5px; } /* Restjes Klimaatregie-groen in hardgecodeerde inline-stijlen systematisch omkleuren naar het profiel-accent (zelfde techniek als het darkmode-vangnet: attribuutselector plus !important wint van een inline stijl). */ body.kr-portaal-body [style*="#117a35"] { color: var(--kr-groen-donker) !important; } body.kr-portaal-body [style*="#13913F"], body.kr-portaal-body [style*="#13913f"] { color: var(--kr-groen-donker) !important; } body.kr-portaal-body [style*="background:#eef9f1"], body.kr-portaal-body [style*="background: #eef9f1"] { background: var(--kr-zachtgroen) !important; color: var(--kr-groen-donker) !important; } body.kr-portaal-body [style*="background:#e6f6ec"], body.kr-portaal-body [style*="background: #e6f6ec"] { background: var(--kr-zachtgroen) !important; } body.kr-portaal-body [style*="border:1.5px solid var(--kr-groen)"] { border-color: var(--kr-lijn) !important; } /* De begroetingsbalk bovenaan: kalmer, zonder zware chips */ body.kr-portaal-body .kr-mkop-hallo, body.kr-portaal-body .kr-dash-groet { letter-spacing: -0.8px; } /* Knoppen: altijd witte tekst op het accent (de oude stijl rekende op groen) */ body.kr-portaal-body .kr-knop { background: var(--kr-groen-donker); color: #ffffff !important; border: none; } body.kr-portaal-body .kr-knop:hover { background: var(--kr-groen-donker); filter: brightness(1.12); } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kr-knop { background: var(--kp-accent-donker, #1b3fa8); color: #ffffff !important; } /* Accountchip: het bedrijfslogo in plaats van initialen (kernmodus, zie kop.php) */ body.kr-portaal-body .kr-gebruiker-avatar-logo { width: 32px; height: 32px; border-radius: 999px; background: #fff; border: 1px solid var(--kr-lijn); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; } body.kr-portaal-body .kr-gebruiker-avatar-logo img { width: 26px; height: 26px; object-fit: contain; } /* Uitlegblok in onboarding-stijl: witte kaart, rond info-chipje, rustige tekst */ body.kr-portaal-body .kp-uitleg { background: var(--kr-kaart); border: 1px solid var(--kr-lijn); box-shadow: var(--kp-schaduw); border-radius: var(--kr-radius); padding: 16px 20px; } body.kr-portaal-body .kp-uitleg summary { display: flex; align-items: center; gap: 10px; color: var(--kr-inkt); font-weight: 600; font-size: 14px; } body.kr-portaal-body .kp-uitleg summary::before { content: "i"; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; background: var(--kr-zachtgroen); color: var(--kr-groen-donker); font-weight: 700; font-size: 12.5px; font-style: normal; display: inline-flex; align-items: center; justify-content: center; } body.kr-portaal-body .kp-uitleg[open] summary { margin-bottom: 8px; } body.kr-portaal-body .kp-uitleg div { color: var(--kr-grijs); font-size: 14px; } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kp-uitleg { background: var(--kr-kaart); } /* Werkbon-formulier: compacte veldmaat herstellen (het meetrooster is er strak op berekend; de ruime onboarding-maat liet velden uit hun kolommen lopen). */ body.kr-portaal-body #kr-wb-formulier input[type="text"], body.kr-portaal-body #kr-wb-formulier select, body.kr-portaal-body #kr-wb-formulier textarea { padding: 9px 11px; border-width: 1px; border-radius: var(--kr-radius-klein); max-width: 100%; } body.kr-portaal-body #kr-wb-formulier input[type="text"]:focus, body.kr-portaal-body #kr-wb-formulier select:focus, body.kr-portaal-body #kr-wb-formulier textarea:focus { box-shadow: var(--kr-focusring); } /* Actiebalk onderaan de werkbon: duidelijke pill-acties */ body.kr-portaal-body .kr-actie { border-radius: 999px; font-weight: 600; } /* Uitgebreid vangnet uit de stijlaudit: ook deze inline-restjes van de oude huisstijl worden omgebogen. Donkere tekst op het accent wordt altijd wit. */ body.kr-portaal-body [style*="#073d1c"] { color: #ffffff !important; } body.kr-portaal-body [style*="#0a3318"] { color: #ffffff !important; } body.kr-portaal-body [style*="background:#f4fbf7"], body.kr-portaal-body [style*="background: #f4fbf7"] { background: var(--kr-zachtgroen) !important; } body.kr-portaal-body [style*="background:#f6fdf9"], body.kr-portaal-body [style*="background: #f6fdf9"] { background: var(--kr-zachtgroen) !important; } body.kr-portaal-body [style*="background:#eaf6ee"], body.kr-portaal-body [style*="background: #eaf6ee"] { background: var(--kr-zachtgroen) !important; } body.kr-portaal-body [style*="rgba(39,211,102"], body.kr-portaal-body [style*="rgba(39, 211, 102"] { border-color: var(--kr-lijn) !important; } body.kr-portaal-body [style*="rgba(17,122,53"], body.kr-portaal-body [style*="rgba(17, 122, 53"] { border-color: var(--kr-lijn) !important; } /* ---- Webapp-laag ---- */ /* Vloeiende overgangen tussen pagina's (View Transitions, moderne browsers; oudere browsers negeren dit gewoon) */ /* view-transition staat sinds 489 in stijl.css */ /* App-tabbalk onderin op telefoons (kernmodus, zie kop.php): vijf duidelijke tabs met iconen, veilige marge voor de home-balk van iOS. */ body.kr-portaal-body .kp-tabs { display: none; } @media (max-width: 820px) { body.kr-portaal-body .kp-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; justify-content: space-around; align-items: stretch; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--kr-lijn); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kp-tabs { background: rgba(18,21,26,.92); border-top-color: rgba(255,255,255,.08); } body.kr-portaal-body .kp-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; font-size: 10.5px; font-weight: 600; color: var(--kr-grijs); text-decoration: none; border: none; background: none; font-family: inherit; cursor: pointer; } body.kr-portaal-body .kp-tab svg { width: 22px; height: 22px; stroke-width: 1.9; } body.kr-portaal-body .kp-tab.kp-tab-actief { color: var(--kr-groen-donker); } body.kr-portaal-body .kp-tab-plus svg { width: 30px; height: 30px; padding: 3px; background: var(--kr-groen-donker); color: #fff; stroke: #fff; border-radius: 999px; } /* Ruimte onderaan zodat inhoud niet achter de balk verdwijnt */ body.kr-portaal-body .kr-portaal-inhoud { padding-bottom: 86px; } } /* ---- Eén visuele taal met de onboarding (aanmelden.html), 15-08-2026 ---- Dezelfde bouwstenen als het aanmeldscherm en het beheerpaneel: warm-grijs vlak #f6f4f1, witte kaarten met radius 22 en een dubbele zachte schaduw, invoervelden met 12px-radius en blauwe focusring, pil-knoppen die bij hover heel licht groeien, en nergens uppercase-letterspaced micro-labels. */ body.kr-portaal-body { --kr-bg: #f6f4f1; --kr-lijn: #d2d2d7; /* Eén hoek- en schaduwschaal, gedeeld met stijl.css (489): vier hoekmaten, drie schaduwniveaus, één focusring. Kernmodus vult de niveaus in met de zachte, gelaagde schaduw van de onboarding; de namen zijn dezelfde. */ --kr-radius-klein: 8px; --kr-radius-mid: 12px; --kr-radius-groot: 22px; --kr-radius: var(--kr-radius-groot); --kr-schaduw-rust: 0 1px 4px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.05); --kr-schaduw-licht: 0 2px 8px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.08); --kr-schaduw-diep: 0 4px 12px rgba(0,0,0,.06), 0 32px 80px rgba(0,0,0,.12); --kr-schaduw-accent: none; --kr-focusring: 0 0 0 4px rgba(37,83,214,.12); /* oude namen blijven werken, wijzen naar de schaal */ --kp-schaduw: var(--kr-schaduw-rust); --kp-schaduw-zweef: var(--kr-schaduw-licht); --kp-focus: var(--kr-focusring); } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body { --kr-lijn: rgba(255,255,255,.1); } /* Kaarten: iets ronder en dieper, zoals de aanmeldkaart */ body.kr-portaal-body .kr-tegel, body.kr-portaal-body .kr-form-vlak, body.kr-portaal-body .kp-gids, body.kr-portaal-body .kp-start-knop { border-radius: var(--kr-radius-groot); border-color: transparent; } body.kr-portaal-body .kr-tabel { border-radius: var(--kr-radius-groot); } body.kr-portaal-body .kr-tegel:hover, body.kr-portaal-body .kp-start-knop:hover { border-color: transparent; transform: translateY(-2px); box-shadow: var(--kp-schaduw-zweef) !important; } /* Geen uppercase micro-labels: gewone taal, gewone letters */ body.kr-portaal-body .kr-tabel th, body.kr-portaal-body table.kr-tabel thead th, body.kr-portaal-body .kr-tegel-label, body.kr-portaal-body .kr-form-veld label, body.kr-portaal-body .kr-gebruiker-rol { text-transform: none; letter-spacing: -0.1px; } body.kr-portaal-body table.kr-tabel thead th { font-size: 13px; font-weight: 600; color: var(--kr-grijs); background: transparent; } body.kr-portaal-body .kr-tabel th { font-size: 13px; } body.kr-portaal-body .kr-form-veld label { font-size: 13px; font-weight: 600; color: var(--kr-inkt); margin-bottom: 6px; } body.kr-portaal-body .kr-tegel-label { font-size: 12.5px; } body.kr-portaal-body .kr-portaal-kop nav::before, body.kr-portaal-body .kp-nav-kop { text-transform: none; letter-spacing: 0; font-size: 12.5px; } /* Invoervelden: zoals het aanmeldformulier */ body.kr-portaal-body .kr-form-veld input, body.kr-portaal-body .kr-form-veld select, body.kr-portaal-body .kr-form-veld textarea { font-size: 16px; padding: 13px 15px; border: 1.5px solid var(--kr-lijn); border-radius: var(--kr-radius-mid); box-shadow: none; } body.kr-portaal-body .kr-form-veld input:focus, body.kr-portaal-body .kr-form-veld select:focus, body.kr-portaal-body .kr-form-veld textarea:focus { border-color: var(--kr-groen); box-shadow: var(--kp-focus); } /* Knoppen: pil, stevig, groeit heel licht bij hover — precies als 'Doorgaan' */ body.kr-portaal-body .kr-knop { padding: 12px 24px; font-size: 15px; transition: transform .15s ease, background .15s ease, filter .15s ease; } body.kr-portaal-body .kr-knop:hover { transform: scale(1.03); filter: none; background: var(--kr-groen-donker); } body.kr-portaal-body .kr-knop:active { transform: scale(0.99); } /* Waarschuwingen: geen felle gele blokken, maar een kalme kaart met een gekleurde linkerlijn — dezelfde signaalvorm als in het beheerpaneel */ body.kr-portaal-body .kr-w-blok { border-radius: var(--kr-radius-mid); border: 1px solid var(--kr-lijn); border-left-width: 3px; box-shadow: none; } body.kr-portaal-body .kr-w-geel { background: var(--kr-kaart); border-color: var(--kr-lijn); border-left-color: #d9a514; color: var(--kr-inkt); } body.kr-portaal-body .kr-w-groen { background: var(--kr-kaart); border-color: var(--kr-lijn); border-left-color: #1d7d46; color: var(--kr-inkt); } body.kr-portaal-body .kr-w-rood { background: var(--kr-kaart); border-color: var(--kr-lijn); border-left-color: #c0392b; color: var(--kr-inkt); } body.kr-portaal-body .kp-uitleg { background: var(--kr-kaart); border: 1px solid var(--kr-lijn); border-left: 3px solid var(--kr-groen); } html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kr-w-geel, html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kr-w-groen, html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kr-w-rood, html[data-thema="donker"] body.kr-portaal-body.kr-portaal-body .kp-uitleg { background: var(--kr-kaart); color: var(--kr-inkt); } /* Demo-balk: zelfde kalme toon in plaats van geel */ body.kr-portaal-body .kr-demo-balk { background: var(--kr-zachtgroen) !important; border-bottom-color: transparent !important; color: var(--kr-groen-donker) !important; font-weight: 600 !important; } /* Zijbalk: actieve regel als volle pil, zoals de stappenbol in de onboarding */ body.kr-portaal-body .kr-portaal-kop nav a.kr-nav-actief { border-radius: 999px; } body.kr-portaal-body .kr-portaal-kop nav a { border-radius: 999px; } /* Zoekbalk: ruimte voor het loepje bewaren, focusring als de rest */ body.kr-portaal-body .kr-zoekbalk input { padding: 13px 18px 13px 44px; border: 1.5px solid var(--kr-lijn); border-radius: 999px; box-shadow: none; font-size: 15.5px; } body.kr-portaal-body .kr-zoekbalk input:focus { border-color: var(--kr-groen); box-shadow: var(--kp-focus); } /* Alle tabelkoppen, ook die zonder thead-klasse */ body.kr-portaal-body th { text-transform: none; letter-spacing: -0.1px; font-size: 13px; font-weight: 600; color: var(--kr-grijs); } /* Generiek, voor de ~50 pagina's met eigen