@import url('/assets/prodin/fonts/prodin-fonts.css');
/* Huisstijl-laag voor een klantbord (#13503, 8 sep 2026).
Hangt volledig aan body.klantskin en aan de CSS-variabelen die klant_skin_head() inline
meegeeft, zodat deze laag NIETS raakt van het gewone Insight-scherm. Kleuren, fonts en logo
komen uit design.md (/root/projects/prodin-insight/design.md) en die zijn letterlijk gemeten
op www.prodin.nl - purple #9C0158, accent #D82A84, blueish-grey #21253E, Montserrat/Open Sans/
Noto Sans. Niets hier is een zelfverzonnen tint. */
body.klantskin{
background:var(--kl-vlak,#F7F5F7);
color:var(--kl-donker,#21253E);
font-family:var(--kl-txt,'Open Sans'),system-ui,sans-serif;
font-size:15px;line-height:1.62;
}
body.klantskin .wrap{max-width:1000px;padding-top:26px}
/* Merkbalk: wit, logo links, dunne merklijn eronder. */
body.klantskin .klantbar{
display:flex;align-items:center;justify-content:space-between;gap:16px;
background:#fff;padding:14px 26px;border-bottom:3px solid var(--kl,#9C0158);
position:sticky;top:0;z-index:50;
}
body.klantskin .klantbar .kb-logo{display:flex;align-items:center;text-decoration:none}
body.klantskin .kb-wordmark{font-family:var(--kl-kop,'Montserrat'),system-ui,sans-serif;font-weight:700;
font-size:1.15rem;color:var(--kl,#9C0158)}
body.klantskin .kb-who{font-size:.82rem;color:#6B7186;display:flex;align-items:center;gap:12px}
body.klantskin .kb-who a{color:var(--kl,#9C0158);text-decoration:none}
body.klantskin .kb-who a:hover{color:var(--kl-accent,#D82A84);text-decoration:underline}
/* Wie er ingelogd is (#13838, 9 sep 2026). De naam is de enige persoonlijke tekst in deze balk en
moet dus het donkerst zijn, niet het lichtst: labelfont voor "Ingelogd als" (Noto Sans uppercase,
zoals elk kopje in deze huisstijl), naam in Montserrat op #21253E. De naam is ook de menuknop,
dus hij houdt de stippellijn en krijgt bij hover het merkpaars. */
body.klantskin .kb-who .bellen{order:-1}
body.klantskin .kb-who .kb-wie{font-family:var(--kl-lbl,'Noto Sans'),system-ui,sans-serif;
font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:500;color:#6B7186;margin-right:-6px}
body.klantskin .kb-who .who-menu summary.who-name{font-family:var(--kl-kop,'Montserrat'),system-ui,sans-serif;
font-size:.88rem;font-weight:600;color:var(--kl-donker,#21253E);border-bottom-color:rgba(33,37,62,.35)}
body.klantskin .kb-who .who-menu summary.who-name:hover{color:var(--kl,#9C0158);border-bottom-color:var(--kl,#9C0158)}
body.klantskin .kb-who .who-caret{color:var(--kl,#9C0158);opacity:1}
/* Koppen */
body.klantskin h1,body.klantskin h2,body.klantskin h3,body.klantskin .pagetitle{
font-family:var(--kl-kop,'Montserrat'),system-ui,sans-serif;color:var(--kl,#9C0158);
}
body.klantskin .pagetitle{font-size:1.9rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
body.klantskin .back{color:var(--kl,#9C0158);font-family:var(--kl-lbl,'Noto Sans'),system-ui,sans-serif;
font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:500}
/* Demo-label: verplicht zichtbaar op elke pagina van een demo-omgeving. */
body.klantskin .kb-demo{
display:inline-block;background:var(--kl-accent,#D82A84);color:#fff;border-radius:999px;
padding:3px 11px;font-family:var(--kl-lbl,'Noto Sans'),system-ui,sans-serif;font-size:.66rem;
font-weight:500;text-transform:uppercase;letter-spacing:.09em;vertical-align:middle;
}
body.klantskin .kb-hero{
font-family:var(--kl-kop,'Montserrat'),system-ui,sans-serif;font-size:1.12rem;font-weight:600;
color:var(--kl-donker,#21253E);max-width:60ch;margin:10px 0 6px;line-height:1.4;
}
body.klantskin .az-lead,body.klantskin .az-note{color:var(--kl-donker,#21253E)}
body.klantskin .az-note{color:#6B7186}
body.klantskin .kb-demonote{
max-width:74ch;font-size:.86rem;color:#6B7186;background:#fff;border:1px solid var(--kl-rand,#E7DDE6);
border-left:4px solid var(--kl-accent,#D82A84);border-radius:0 10px 10px 0;padding:11px 14px;margin:14px 0 4px;
}
/* Tegels. Padding zit sinds #13919 op .az-tile>a (de omhulsel-link), niet meer op .az-tile zelf -
hier dus GEEN eigen padding meer zetten, anders komt de vaste tegelhoogte (#13919 vervolg) op
deze omgeving niet uit doordat het dubbel telt. */
body.klantskin .az-tile{
border:1px solid var(--kl-rand,#E7DDE6);border-radius:14px;background:#fff;
transition:border-color .15s ease,transform .15s ease;
}
body.klantskin .az-tile:hover{border-color:var(--kl,#9C0158);transform:translateY(-1px)}
body.klantskin .az-tile h3{font-size:1.05rem;font-weight:600;color:var(--kl,#9C0158);margin:0 0 5px}
body.klantskin .az-tile p{color:#6B7186;font-size:.88rem}
body.klantskin .az-box{border:1px solid var(--kl-rand,#E7DDE6);border-radius:14px;padding:18px 20px;max-width:78ch}
body.klantskin .az-box h3{font-size:1.05rem;font-weight:600}
body.klantskin .az-box p{color:var(--kl-donker,#21253E);font-size:.95rem}
/* KPI-tegeltjes. Elk cijfer heeft een bijschrift dat zegt waar het vandaan zou komen. */
body.klantskin .kb-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0 22px}
body.klantskin .kb-kpi{background:#fff;border:1px solid var(--kl-rand,#E7DDE6);border-radius:14px;padding:14px 16px}
body.klantskin .kb-kpi b{display:block;font-family:var(--kl-kop,'Montserrat'),system-ui,sans-serif;
font-size:1.75rem;font-weight:700;color:var(--kl,#9C0158);line-height:1.15}
body.klantskin .kb-kpi span{display:block;font-family:var(--kl-lbl,'Noto Sans'),system-ui,sans-serif;
font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--kl-donker,#21253E);margin-top:4px}
body.klantskin .kb-kpi i{display:block;font-style:normal;font-size:.76rem;color:#6B7186;margin-top:6px;line-height:1.45}
body.klantskin .az-stat{border:1px solid var(--kl-rand,#E7DDE6);border-radius:14px}
body.klantskin .az-stat b{font-family:var(--kl-kop,'Montserrat'),system-ui,sans-serif;color:var(--kl,#9C0158)}
body.klantskin .az-stat span{font-family:var(--kl-lbl,'Noto Sans'),system-ui,sans-serif;font-size:.68rem;
text-transform:uppercase;letter-spacing:.08em;color:#6B7186}
/* Balkjes: altijd met het getal ernaast - een balk zonder getal is een plaatje. */
body.klantskin .kb-balken{margin:12px 0 4px;display:grid;gap:9px}
body.klantskin .kb-balk{display:grid;grid-template-columns:minmax(120px,1.1fr) 3fr auto;gap:12px;align-items:center}
body.klantskin .kb-balk-l{font-size:.84rem;color:var(--kl-donker,#21253E)}
body.klantskin .kb-balk-spoor{background:#F0E6EE;border-radius:999px;height:8px;overflow:hidden}
body.klantskin .kb-balk-vul{display:block;height:100%;border-radius:999px;
background:linear-gradient(90deg,var(--kl,#9C0158),var(--kl-accent,#D82A84))}
body.klantskin .kb-balk-w{font-family:var(--kl-kop,'Montserrat'),system-ui,sans-serif;font-weight:600;
font-size:.84rem;color:var(--kl,#9C0158);white-space:nowrap}
/* Rolkaartjes (de AI-ploeg): rollen, geen karikaturen van personen. */
body.klantskin .kb-rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:12px 0 4px}
body.klantskin .kb-rol{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--kl-rand,#E7DDE6);
border-radius:12px;padding:11px 13px;background:#fff}
body.klantskin .kb-rol-i{flex:none;width:34px;height:34px;border-radius:50%;background:var(--kl,#9C0158);color:#fff;
display:flex;align-items:center;justify-content:center;font-family:var(--kl-kop,'Montserrat'),system-ui,sans-serif;
font-weight:700;font-size:.8rem;letter-spacing:.02em}
body.klantskin .kb-rol-t b{display:block;font-family:var(--kl-kop,'Montserrat'),system-ui,sans-serif;
font-size:.92rem;font-weight:600;color:var(--kl-donker,#21253E)}
body.klantskin .kb-rol-t i{display:block;font-style:normal;font-size:.8rem;color:#6B7186;line-height:1.45;margin-top:2px}
/* De to-do-panelen eronder in dezelfde rust. */
body.klantskin .panel{border:1px solid var(--kl-rand,#E7DDE6);border-radius:14px;background:#fff}
body.klantskin .panel h2,body.klantskin .rem-head{font-family:var(--kl-kop,'Montserrat'),system-ui,sans-serif;
color:var(--kl,#9C0158);font-size:1rem;font-weight:600}
/* Links krijgen de merkkleur - MAAR een knop die als link is gebouwd niet. Een
/ heeft het merkpaars al als ACHTERGROND en zet
zijn eigen tekst op wit; deze regel won daarvan op specificiteit (body.klantskin a =
1 klasse + 2 elementen, .mt-btn = 1 klasse) en zette de tekst dus paars op paars -
knop onleesbaar (#14310, Egon van der Jagt, 11 sep 2026: "Nieuw MT-overleg"). Vandaar
de uitzondering op class*="-btn": elke knop houdt zo de tekstkleur die bij zijn eigen
achtergrond hoort, ook knoppen die er later bij komen. */
body.klantskin a:not([class*="-btn"]){color:var(--kl,#9C0158)}
body.klantskin a:not([class*="-btn"]):hover{color:var(--kl-accent,#D82A84)}
@media (max-width:640px){
body.klantskin .klantbar{padding:11px 16px}
body.klantskin .pagetitle{font-size:1.5rem}
body.klantskin .kb-balk{grid-template-columns:1fr auto;grid-template-areas:'l w' 's s';row-gap:5px}
body.klantskin .kb-balk-l{grid-area:l}
body.klantskin .kb-balk-w{grid-area:w}
body.klantskin .kb-balk-spoor{grid-area:s}
}
/* Actiestrook + kluispagina (#13503, 9 sep 2026). Volgt component 3 (witte kaart, rand #E7DDE6,
radius 14px); de strook krijgt bewust de merkrand #9C0158 in plaats van de neutrale rand, want
daar moet de klant iets DOEN. Knop met het verloop uit component 5, labeltekst in Noto Sans
uppercase (typografieregel 4). Geen nieuwe tinten. De Sleutelkluis zelf gebruikt deze strook
niet meer: die staat op verzoek van Paul (9 sep) als gewone tegel in het raster en erft dus de
.az-tile-opmaak hierboven; wat hier staat geldt nu voor de Onboarding-kaart en de kluispagina. */
body.klantskin .kb-kluislink{
border:2px solid var(--kl,#9C0158);border-radius:14px;background:#fff;padding:16px 20px;
transition:transform .15s ease,border-color .15s ease;
}
body.klantskin .kb-kluislink:hover{background:#fff;border-color:var(--kl-accent,#D82A84);transform:translateY(-1px)}
body.klantskin .kb-kluis-t b{font-family:var(--kl-kop,'Montserrat'),system-ui,sans-serif;font-weight:600;
font-size:1.05rem;color:var(--kl,#9C0158)}
body.klantskin .kb-kluis-t i{color:#6B7186;font-size:.88rem}
body.klantskin .kb-kluis-btn{
background:linear-gradient(90deg,var(--kl,#9C0158),var(--kl-accent,#D82A84));border-radius:999px;
font-family:var(--kl-lbl,'Noto Sans'),system-ui,sans-serif;font-size:.72rem;font-weight:500;
text-transform:uppercase;letter-spacing:.08em;padding:11px 18px;
}
/* De kluispagina zelf. */
body.klantskin .kl-box,body.klantskin .kl-form{border-radius:14px;border-color:var(--kl-rand,#E7DDE6)}
body.klantskin .kl-form{border:2px solid var(--kl,#9C0158)}
body.klantskin .kl-box h3,body.klantskin .kl-form h3{font-family:var(--kl-kop,'Montserrat'),system-ui,sans-serif;
font-weight:600;color:var(--kl,#9C0158)}
body.klantskin .kl-box p,body.klantskin .kl-box li,body.klantskin .kl-form label{color:var(--kl-donker,#21253E)}
body.klantskin .kl-note,body.klantskin .kl-form .hint{color:#6B7186}
body.klantskin .kl-form input[type=text],body.klantskin .kl-form input[type=password]{
border:1px solid var(--kl-rand,#E7DDE6);border-radius:10px;background:#F7F5F7;color:var(--kl-donker,#21253E);
font-family:var(--kl-txt,'Open Sans'),system-ui,sans-serif;
}
body.klantskin .kl-form input:focus{outline:2px solid var(--kl-accent,#D82A84);outline-offset:1px}
body.klantskin .kl-form button{
background:linear-gradient(90deg,var(--kl,#9C0158),var(--kl-accent,#D82A84));border-radius:999px;
font-family:var(--kl-lbl,'Noto Sans'),system-ui,sans-serif;font-size:.75rem;font-weight:500;
text-transform:uppercase;letter-spacing:.08em;padding:12px 22px;
}
body.klantskin .kl-tbl th{background:#F7F5F7;color:var(--kl,#9C0158);border-color:var(--kl-rand,#E7DDE6);
font-family:var(--kl-lbl,'Noto Sans'),system-ui,sans-serif;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
body.klantskin .kl-tbl td{border-color:var(--kl-rand,#E7DDE6);color:var(--kl-donker,#21253E)}
/* Robot uit "De reis van Prodin" (Egon's stripverhaal-presentatie), zelf uitgeknipt uit de PDF
met een transparante achtergrond. Bewust EIGEN materiaal van Prodin, geen generiek AI-robot-
plaatje (de verbodsregel bovenaan dit bestand ziet op dat laatste). Puur decoratief: vast in de
linkeronderhoek (9 sep verplaatst van rechts, Egon "ik wil hem links"), heel licht, nooit boven
tekst en nooit klikbaar. Verdwijnt pas op een ECHT
smal scherm (zelfde 640px-grens als #scrollfab) waar hij anders over de kaarten zou vallen -
niet op 1040px: dat verborg hem ook op heel gewone laptopbreedtes/niet-gemaximaliseerde
vensters (9 sep, Egon "ik zie hem nog niet" - gemeten met Playwright: bij 1040px en smaller
stond display:none, bij 1041px+ gewoon zichtbaar).
9 sep, derde ronde (Egon: "de robot mag wat groter, hij valt nu nauwelijks op"): groter EN
duidelijker (opacity .08 -> .18). De breedte is niet vast maar groeit mee met de vrije marge
naast de tekstkolom (.wrap is max 1000px breed en staat gecentreerd): clamp 150-320px met
(100vw - 1000px)/2 + 90px. Zo staat hij op een breed scherm groot en volledig NAAST de
kaarten (1920 -> 320px, 1440 -> 310px), en krimpt hij vanzelf op een smaller scherm waar die
marge er niet is (1024 -> 150px) in plaats van dwars over de tegels te vallen. Onder 1041px
bovendien lager, want daar raakt hij de kaarten wel.
10 sep, vierde ronde (Egon: "de robot mag ook minder prominent in beeld dus wat meer gefaded
op zowel light als dark"): GROOTTE en plek blijven exact gelijk, alleen de dekking gaat omlaag
- licht .18 -> .11, smal .12 -> .075, donker .10 -> .07 (die laatste staat in klantdonker.css).
Het ?v=2 achter de bestandsnaam is geen versiemap maar een cache-breker: sw.js serveert
plaatjes stale-while-revalidate, dus zonder nieuwe URL zou de eerste lading nog de oude
uitknip met de witte resten laten zien.
10 sep, vijfde ronde (Egon: "Pedrie gaat ons prodin poppetje heten, wij willen hem in de
kleuren van prodin dus beetje aubergine achtig", met zijn kleurcodes erbij): het poppetje
HEET nu Pedrie en is omgekleurd van blauw naar aubergine (#8B1A4A) met roze schakelingen
(#C4547A) - niet met een filter in de browser maar in het plaatje zelf
(pedrie/pedrie_kleur.py, HSV-kleurdraai op de bestaande uitknip), zodat er geen tweede
tekening ontstaat en licht/schaduw van HUN robot intact blijft. Nieuwe bestandsnaam
pedrie-prodin.png (de oude robot-prodin.png blijft staan) - dat is meteen de cache-breker
die sw.js nodig heeft. Zijn naam staat als klein plaatje-onderschrift onder zijn voeten:
daarom staat hij nu 22px van de onderrand in plaats van 0. Grootte ongewijzigd.
De naamregel is bewust leesbaarder dan de robot zelf - een naam die je
niet kunt lezen is geen naam - maar blijft klein, decoratief en niet klikbaar, en valt
op hetzelfde smalle scherm weg als Pedrie zelf.
10 sep, zesde ronde (#14073, Egon: "laat ons robotje iets meer wegvallen op de achtergrond,
hij is nu teveel aanwezig"): opnieuw ALLEEN de dekking omlaag, grootte/plek/plaatje blijven
exact gelijk - licht .11 -> .07, smal .075 -> .05, donker .07 -> .045 (klantdonker.css).
Waarom hij na de fade van ronde 4 tóch weer opviel: ronde 5 kleurde hem van blauw naar
aubergine #8B1A4A, en dat is op het lichte bord een veel donkerder, contrastrijker vlak dan
het oude blauw - bij gelijke opacity leest hetzelfde plaatje dus zwaarder. Het naambordje
gaat mee omlaag (.38 -> .30, smal .28 -> .24, donker .30 -> .26): dat is het best leesbare
element in die hoek, dus het bepaalt mede hoe aanwezig Pedrie voelt. Het blijft ruim
leesbaar; wil je de naam terug op de oude sterkte, dan is dat één waarde. */
body.klantskin{--pedrie-b:clamp(150px,calc((100vw - 1000px)/2 + 90px),320px)}
body.klantskin::after{
content:'';position:fixed;left:18px;bottom:22px;
width:var(--pedrie-b);aspect-ratio:640/1115;
background:url('/assets/prodin/pedrie-prodin.png') no-repeat bottom left/contain;
opacity:.07;pointer-events:none;z-index:1;
}
/* Naambordje. De breedte is 88% van de robotdoos omdat het plaatje met 'contain' in een doos
van 640/1115 staat terwijl het zelf 640/1265 is: het staat dus links uitgelijnd en vult de
doos niet helemaal. Met die 88% valt de naam gecentreerd onder zijn voeten. */
body.klantskin::before{
content:'Pedrie';position:fixed;left:18px;bottom:4px;
width:calc(var(--pedrie-b) * .88);text-align:center;
font-family:var(--kl-kop,'Montserrat'),system-ui,sans-serif;font-size:.68rem;font-weight:700;
text-transform:uppercase;letter-spacing:.16em;line-height:1;color:var(--kl,#9C0158);
opacity:.30;pointer-events:none;z-index:1;
}
@media (max-width:1040px){
body.klantskin::after{opacity:.05}
body.klantskin::before{opacity:.24}
}
@media (max-width:640px){
body.klantskin::after,body.klantskin::before{display:none}
}
/* ---- Pedrie's koplampen: alleen in de donkere stand -------------------------------------
#14076, 10 sep 2026, zevende ronde (Egon: "als je switched tussen licht en donker, dan wil
ik dat ons robotje in de donkere versie licht uit zijn ogen laat schijnen alsof het lampen
zijn als grap"). In het licht verandert er dus NIETS - deze regel begint met html.kb-donker.
WAAROM EEN DERDE DOOS EN NIET GEWOON EEN LAAG ERBIJ OP PEDRIE ZELF: body.klantskin::after
IS Pedrie en body.klantskin::before is zijn naambordje; beide pseudo-elementen zijn dus al
bezet. Een extra background-laag op ::after zou bovendien zijn dekking erven (.045 in het
donker) en dan zie je van een "lamp" niets. De lampen moeten juist LOS van hem gedimd
kunnen worden: dat is de grap - in het donker zie je twee brandende ogen en maar een vleugje
robot. Vandaar een eigen laag op .wrap::after: .wrap staat op elke klantskin-pagina, heeft
zelf nergens een pseudo-element, en staat BINNEN body - dus erft hij --pedrie-b en --kd-merk.
(Op html::after zou dat niet werken: custom properties erven omlaag, en html is de ouder.)
GEOMETRIE: de doos is exact Pedrie's doos (zelfde left/bottom/width/aspect-ratio), dus de
lampen schuiven vanzelf mee met de clamp-breedte op elk scherm; wijzigt zijn grootte of plek,
dan hoeft hier niets mee. Het PNG is 640x1265 en staat met 'contain' in een doos van 640/1115:
het vult dus de volle hoogte en 88,15% van de breedte, linksonder uitgelijnd. De ogen zijn in
het plaatje zelf opgemeten (pupilzwaartepunt 270,303 en 428,309 px) en dat rekent om naar
37,2%/24,0% en 58,9%/24,4% van deze doos. Verandert het PNG, dan moeten deze twee punten
opnieuw gemeten worden - pedrie/ronde7/meet_ogen.py doet dat.
KLEUR: wit hart (licht is wit) met een halo in var(--kd-merk), de lichte merktint die
klantdonker.css ook voor koppen en links gebruikt - geen nieuwe huiskleur. Eronder nog een
heel zwakke brede schijn, zodat het licht op zijn eigen gezicht valt in plaats van als twee
losse stippen te zweven.
HELDERHEID: alles hangt aan de opacity van deze doos, dus "iets minder fel" is hier
precies een getal. */
html.kb-donker body.klantskin .wrap::after{
content:'';position:fixed;left:18px;bottom:22px;
width:var(--pedrie-b);aspect-ratio:640/1115;
pointer-events:none;z-index:1;opacity:.5;mix-blend-mode:screen;
background:
radial-gradient(ellipse 4.4% 2.5% at 37.2% 24.0%,#fff 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 4.4% 2.5% at 58.9% 24.4%,#fff 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 100%),
radial-gradient(ellipse 13% 7.5% at 37.2% 24.0%,color-mix(in srgb,var(--kd-merk) 70%,transparent) 0%,transparent 70%),
radial-gradient(ellipse 13% 7.5% at 58.9% 24.4%,color-mix(in srgb,var(--kd-merk) 70%,transparent) 0%,transparent 70%),
radial-gradient(ellipse 34% 19.5% at 48% 24.2%,color-mix(in srgb,var(--kd-merk) 20%,transparent) 0%,transparent 72%);
}
/* Meebewegen met Pedrie: op een smaller scherm is hij zelf ook zwakker, en onder 641px staat hij
op display:none - dan mogen er geen twee lampjes in de lucht blijven hangen. */
@media (max-width:1040px){
html.kb-donker body.klantskin .wrap::after{opacity:.42}
}
@media (max-width:640px){
html.kb-donker body.klantskin .wrap::after{display:none}
}
/* ---- Pedrie schrikt van het licht: handen voor de ogen ---------------------------------------
#14076 vervolg, 10 sep 2026 (Paul, twee keer gevraagd): "Kun je hem ook even zijn handen voor
zijn ogen doen als het licht weer aan gaat?" - een vervolggrap op de koplampen hierboven: zet je
het licht van donker terug naar licht, dan houdt Pedrie heel even zijn handen voor zijn ogen
(net iemand die van fel licht schrikt), en dan gaan ze vanzelf weer weg.
EENMALIGE animatie, GEEN blijvende stand. JS (kb_thema_js() in lib.php) zet bij het omzetten
naar licht kort html.kb-lichtschrik en haalt die klasse na de animatieduur (1,7s) weer weg -
zonder die klasse (verreweg de meeste tijd, in zowel licht als donker) is deze laag onzichtbaar.
Werkt dus ook op /assets/klantdonker.css: die regel triggert tijdens de animatie zelf nog de
donkere kleurvariabelen af te bouwen, dus deze laag gebruikt bewust var(--kl,...) (de lichte
merkkleur) - dat is immers precies het moment waarop het bord weer licht wordt.
EIGEN LAAG op .wrap::before (nog vrij: body::after=Pedrie zelf, body::before=naambordje,
.wrap::after=koplampen), zelfde doos/geometrie als Pedrie zodat hij meebeweegt. EERSTE poging
was twee losse ronde vlekken pal op de oogposities uit ronde 7 (37,2%/24,0% en 58,9%/24,4%,
meet_ogen.py) - bij het uitproberen (headless screenshots) las dat als "grote dichte ogen",
niet als "handen ervoor". Nu één brede, ovale BAND die van links naast het linkeroog tot
rechts naast het rechteroog doorloopt (gecentreerd op het midden tussen beide ogen, (37,2+58,9)/2
= 48,05%) - dat leest wel als iets dat over de hele ooglijn ligt, zoals een blinddoek/twee
samenkomende handen, i.p.v. twee losse stippen. Kleur is Pedrie's EIGEN aubergine
lichaamskleur #8B1A4A (pedrie_kleur.py) en bewust NIET var(--kl) - dat is de gemeten
merkkleur van het hele bord (#9C0158) en volgens design.md een andere tint dan Pedrie zelf;
dit zijn zijn eigen handen, geen huisstijl-accent. (Een dunne naad in het midden om "twee
handen" te suggereren is BEWUST weer verwijderd - bij het uitproberen las dat als een verticale
pupil/spleet-oog i.p.v. twee handen, dus erger dan de brede band zonder naad.) Verdwijnt op
hetzelfde smalle scherm als Pedrie zelf. */
html.kb-lichtschrik body.klantskin .wrap::before{
content:'';position:fixed;left:18px;bottom:22px;
width:var(--pedrie-b);aspect-ratio:640/1115;
pointer-events:none;z-index:2;
background:radial-gradient(ellipse 21% 7% at 48.05% 22.7%,#8B1A4A 0%,#8B1A4A 58%,transparent 100%);
animation:pedrie-handen 1.6s ease-in-out both;
}
@keyframes pedrie-handen{
0%{opacity:0}
18%{opacity:1}
72%{opacity:1}
100%{opacity:0}
}
@media (max-width:640px){
html.kb-lichtschrik body.klantskin .wrap::before{display:none}
}
/* Inlogscherm (#20863, 10 okt 2026, Egon: "De buttons moeten altijd witte tekst hebben anders is
het slecht leesbaar en de blauwe achtergrond moet anders, ik wil daar een ai achtige background
hebben met onze pedrie erin ook. Het moet niet te veel afleiden van de login zelf.").
login.php laadt deze stylesheet op insight.prodin.nl en zet body.login-skin; alles hieronder
hangt daaraan, de rest van dit bestand (body.klantskin) doet op dat scherm niets.
Achtergrond: blueish-grey #21253E met een zachte gloed in merkpaars/accent.
Pedrie staat rechts naast de kaart, op een smal scherm klein en vaag achter de kaart.
10 okt, Egon: "Ik hoor van Paul dat je dit met Magic UI moet doen." Magic UI is React/Tailwind
en login.php is kale PHP zonder build, dus hier twee Magic UI-componenten nagebouwd in CSS,
met hun eigen maatvoering: Retro Grid (body::before, perspective 200px, rotateX 65deg, cel 60px)
en Border Beam (.login-card::before, lichtstraal die rond de kaartrand loopt). Beide traag en
gedempt, zodat de kaart voorop blijft; bij prefers-reduced-motion staan ze stil. */
@property --pd-beam{syntax:'';inherits:false;initial-value:0deg}
@keyframes pd-retro-grid{to{background-position:0 60px,0 60px}}
@keyframes pd-border-beam{to{--pd-beam:360deg}}
body.login-body.login-skin{
background-color:#1a1d31;
background-image:
radial-gradient(ellipse 60% 55% at 78% 72%,rgba(156,1,88,.42),transparent 70%),
radial-gradient(ellipse 45% 40% at 18% 18%,rgba(216,42,132,.20),transparent 70%),
radial-gradient(ellipse 70% 60% at 50% 50%,#262a47,#1a1d31 80%);
background-attachment:fixed;
font-family:'Open Sans',system-ui,sans-serif;
position:relative;overflow-x:hidden;
}
/* Retro Grid: een vloer van rasterlijnen die vanaf de horizon (iets boven het midden) naar je toe
schuift. Draaipunt op 100vh in het vlak = 60vh op het scherm; wat erboven ligt loopt weg naar de
horizon, wat eronder ligt komt naar voren. Het masker laat horizon, zijkanten en voorgrond wegvallen. */
body.login-body.login-skin::before{
content:'';position:fixed;pointer-events:none;z-index:0;
left:-100vw;width:300vw;top:-40vh;height:200vh;
transform-origin:50% 100vh;transform:perspective(200px) rotateX(65deg);
background-image:
linear-gradient(to right,rgba(216,42,132,.55) 1px,transparent 0),
linear-gradient(to bottom,rgba(216,42,132,.55) 1px,transparent 0);
background-size:60px 60px;
animation:pd-retro-grid 4s linear infinite;
-webkit-mask-image:
linear-gradient(to bottom,transparent 35vh,#000 88vh,#000 calc(100vh + 100px),transparent calc(100vh + 210px)),
linear-gradient(to right,transparent 20%,#000 30%,#000 70%,transparent 80%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(to bottom,transparent 35vh,#000 88vh,#000 calc(100vh + 100px),transparent calc(100vh + 210px)),
linear-gradient(to right,transparent 20%,#000 30%,#000 70%,transparent 80%);
mask-composite:intersect;
opacity:.5;
}
body.login-body.login-skin::after{
content:'';position:fixed;pointer-events:none;z-index:0;
right:max(24px,calc(50% - 560px));bottom:0;
height:min(64vh,520px);aspect-ratio:526/1040;
background:url('/assets/prodin/pedrie-login.webp') no-repeat bottom center/contain;
opacity:.78;filter:drop-shadow(0 0 34px rgba(216,42,132,.28));
}
body.login-skin .login-card{position:relative;z-index:1;border-radius:16px;
box-shadow:0 24px 60px rgba(8,9,20,.55),0 0 0 1px rgba(255,255,255,.06)}
/* Border Beam: smalle lichtstraal (accent naar merkpaars) die in 8s rond de kaartrand loopt.
Zonder @property-ondersteuning blijft hij stil op een vaste plek staan. */
body.login-skin .login-card::before{
content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
background:conic-gradient(from var(--pd-beam),transparent 0 76%,rgba(156,1,88,.9) 88%,#FF7AC0 96%,transparent 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:pd-border-beam 8s linear infinite;
}
body.login-skin .login-logo{font-family:'Montserrat',system-ui,sans-serif;font-weight:700;color:#9C0158}
body.login-skin .login-logo span{color:#21253E;font-weight:600}
body.login-skin .login-sub{color:#6B7186}
body.login-skin .login-card input{font-family:inherit}
body.login-skin .login-card input:focus{border-color:#9C0158}
body.login-skin .login-remember input{accent-color:#9C0158}
body.login-skin .login-forgot{color:#9C0158}
body.login-skin .login-card button,
body.login-skin .login-card button.pk-login-btn{
background:#9C0158;border-color:#9C0158;color:#fff;
font-family:'Montserrat',system-ui,sans-serif;font-weight:600;filter:none;
}
body.login-skin .login-card button:hover,
body.login-skin .login-card button.pk-login-btn:hover{background:#7E0147;border-color:#7E0147;filter:none}
body.login-skin .login-card button.pk-alt,
body.login-skin .login-card button.pk-go{background:#21253E;border-color:#21253E}
body.login-skin .login-card button.pk-alt:hover,
body.login-skin .login-card button.pk-go:hover{background:#363B5C;border-color:#363B5C}
/* Naast de kaart is pas ruimte vanaf ~980px; daaronder staat Pedrie klein en vaag achter de kaart. */
@media (max-width:980px){
body.login-body.login-skin::after{right:12px;height:min(42vh,340px);opacity:.22;filter:none}
}
@media (prefers-reduced-motion:reduce){
body.login-body.login-skin::before,body.login-skin .login-card::before{animation:none}
}