/* YellowBriks brik-kit v1 (1.9) — huisstijl voor het portaal én elke brik. 1.9: let op is geel. Nieuwe tokens --yb-let-op (vlak, geel) en --yb-let-op-tekst (diepgeel); .yb-badge.yb-let-op krijgt een geel vlak en een gele rand; nieuw lampje .yb-lamp (.yb-goed, .yb-let-op, .yb-fout), zodat briks geen eigen stoplicht meer bouwen. --yb-oranje blijft als alias voor bestaande briks. 1.8: ingebed blijven de schermen van de brik bereikbaar: de zijbalk wordt een tabbalk boven de inhoud (zonder merk, context en voet, die het portaal al toont). Een brik met één scherm krijgt geen balk. 1.6: een brik laadt de kit van het portaal in plaats van een kopie (contract 2.0) en tekent zijbalk en merk met en uit yb.js. 1.5: volgens het YellowBriks-stijlboek 1.1: logo (de trap), statuslabels als omlijnde pil, velden op een grijs vlak, kaarten met zachte schaduw, dienstmerken per brik, radii 999/12/18/24, afstanden in veelvouden van 4, akkoord #2F7A4C en stop #B3402E, geen oranje. 1.4: de zijbalk blijft staan als de inhoud scrolt; de voet van de zijbalk (uitloggen, thema, versie) blijft altijd in beeld. 1.3: ingebed draaien in een frame van het portaal (data-yb-ingebed): geen eigen zijbalk en themaknop, de schil is die van het portaal. 1.2: licht/donker als keuze van de gebruiker (thema.js + .yb-thema in de voet van de zijbalk), naast de systeemvoorkeur. 1.1: de schil (zijbalk + inhoud) zit in de kit; het portaal gebruikt ditzelfde bestand, zodat portaal en briks niet uit elkaar kunnen lopen. .yb-balk (kopbalk) blijft werken maar is vervangen door .yb-zijbalk. Bron: YellowBriks-stijlboek 1.1 (september 2026), dat de Yellow55-huisstijl ongewijzigd overneemt (Y55_StandaardDocs/YellowBriks/). Een brik laadt dit bestand van het portaal ({portaal}/brik-kit/v1/) en neemt geen kopie op; hij wijzigt hem niet (BriksAfspraken 2.0, §6). Alle tokens en klassen hebben het voorvoegsel yb-, zodat ze een bestaande stylesheet in de brik niet in de weg zitten. Regels die hierin verwerkt zijn en die een brik niet mag omzeilen: - één accent: geel (#FFC803) is vlak- en knopkleur, nooit tekstkleur op licht; geel als tekst is diepgeel (#6B4E00). Status in akkoord, let op en stop; let op is geel (vlak) met diepgeel als tekst. Geen andere accentkleur, ook niet per brik. - Inter, koppen 800 met negatieve spatiëring, lopende tekst 400 in grijs - rond, nooit hard: knop en label 999, veld 12, kaart 18, groot vlak 24; één pixel rand en een zachte schaduw, geen zware lijnen - het merk is de trap met "yellowbriks" (.yb-merk uit zijbalk.html); niet nabouwen, niet uitrekken, geen schaduw of verloop op het merk - licht en donker volgen de voorkeur van de gebruiker */ :root { --yb-bg: #F6F6F4; --yb-vlak: #FFFFFF; --yb-vlak-2: #EDEEEA; --yb-lijn: #DEDFDA; --yb-lijn-zacht: #EAEBE7; --yb-tekst: #15171C; --yb-gedempt: #5A5F68; --yb-vaag: #6B7078; --yb-goud: #6B4E00; --yb-geel: #FFC803; --yb-geel-dim: #FFF3CC; --yb-geel-lijn: #F0DFA0; --yb-op-geel: #15171C; --yb-groen: #2F7A4C; /* akkoord */ --yb-let-op: #FFC803; /* let op, als vlak: geel (kit 1.9) */ --yb-let-op-tekst: #6B4E00; /* let op, als tekst: diepgeel */ --yb-oranje: #6B4E00; /* alias van --yb-let-op-tekst; het palet kent geen oranje */ --yb-rood: #B3402E; /* stop */ --yb-schaduw: 0 8px 24px rgba(21, 23, 28, .10); --yb-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --yb-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --yb-r-sm: 8px; --yb-r-md: 12px; --yb-r-lg: 18px; --yb-r-xl: 24px; --yb-r-pil: 999px; color-scheme: light; } /* Drie standen: systeem (niets gezet), licht, donker. thema.js zet data-yb-thema op vóór de eerste paint, uit localStorage. */ @media (prefers-color-scheme: dark) { :root:not([data-yb-thema="light"]) { --yb-bg: #0A0B0D; --yb-vlak: #15171C; --yb-vlak-2: #1D2026; --yb-lijn: #24262C; --yb-lijn-zacht: #1B1E23; --yb-tekst: #E8E9EC; --yb-gedempt: #A3A9B2; --yb-vaag: #8A9099; --yb-goud: #FFC803; --yb-geel-dim: rgba(255, 200, 3, .14); --yb-geel-lijn: rgba(255, 200, 3, .3); --yb-groen: #6FCF97; --yb-oranje: #FFC803; --yb-rood: #FF8A78; --yb-let-op-tekst: #FFC803; --yb-schaduw: 0 8px 28px rgba(0, 0, 0, .5); color-scheme: dark; } } :root[data-yb-thema="dark"] { --yb-bg: #0A0B0D; --yb-vlak: #15171C; --yb-vlak-2: #1D2026; --yb-lijn: #24262C; --yb-lijn-zacht: #1B1E23; --yb-tekst: #E8E9EC; --yb-gedempt: #A3A9B2; --yb-vaag: #8A9099; --yb-goud: #FFC803; --yb-geel-dim: rgba(255, 200, 3, .14); --yb-geel-lijn: rgba(255, 200, 3, .3); --yb-groen: #6FCF97; --yb-oranje: #FFC803; --yb-rood: #FF8A78; --yb-let-op-tekst: #FFC803; --yb-schaduw: 0 8px 28px rgba(0, 0, 0, .5); color-scheme: dark; } /* ---------- basis ---------- */ .yb-pagina, body.yb-pagina { margin: 0; background: var(--yb-bg); color: var(--yb-tekst); font-family: var(--yb-font); font-size: 16px; line-height: 1.625; -webkit-font-smoothing: antialiased; } .yb-pagina a { color: var(--yb-goud); } /* Een link die als knop of merk is opgemaakt, is geen tekstlink meer. */ .yb-pagina a.yb-knop { color: var(--yb-op-geel); text-decoration: none; } .yb-pagina a.yb-knop.yb-stil { color: var(--yb-tekst); } .yb-pagina a.yb-merk { color: var(--yb-tekst); text-decoration: none; } .yb-pagina h1, .yb-pagina h2, .yb-pagina h3 { color: var(--yb-tekst); } /* Stijlboek §7: sectiekop 36/41 ExtraBold −2%, kaartkop 20/26 Bold −1%, tussenkop 16 SemiBold. */ .yb-pagina h1 { font-size: 2.25rem; line-height: 1.14; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; } .yb-pagina h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; } .yb-pagina h3 { font-size: 1rem; line-height: 1.4; font-weight: 600; margin: 0 0 8px; } .yb-pagina :is(td, .yb-cijfer) { font-variant-numeric: tabular-nums; } /* Markering boven een kop: kapitaal, diepgeel, met // ervoor. */ .yb-markering { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--yb-goud); margin-bottom: 8px; } .yb-markering::before { content: "// "; color: var(--yb-geel); } .yb-pagina code { font-family: var(--yb-mono); font-size: .85em; } .yb-inhoud { padding: 32px 32px 64px; max-width: 1160px; } @media (max-width: 520px) { .yb-inhoud { padding: 24px 16px 48px; } } .yb-kop-tekst p { color: var(--yb-gedempt); margin: 0; max-width: 68ch; } /* ---------- de schil ---------- Zijbalk links, inhoud rechts; op een smal scherm boven elkaar. Dit is exact de opbouw van het portaal. Een brik vult de zijbalk met zijn eigen navigatie; merk, kantoor, gebruiker en versie komen uit het token. */ .yb-schil { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; } @media (max-width: 780px) { .yb-schil { grid-template-columns: 1fr; } } .yb-zijbalk { background: var(--yb-vlak); border-right: 1px solid var(--yb-lijn); padding: 20px 16px; display: flex; flex-direction: column; gap: 24px; } @media (max-width: 780px) { .yb-zijbalk { border-right: 0; border-bottom: 1px solid var(--yb-lijn); } } .yb-zijbalk .yb-merk .yb-woordmerk { font-size: 1.125rem; } .yb-zijbalk .yb-merk .yb-dot { width: 9px; height: 9px; } .yb-zijbalk .yb-merk .yb-streep { width: 11px; height: 20px; } /* Vaste opbouw van de zijbalk, in portaal en brik gelijk: merk → context (waar ben ik, welk kantoor, wie) → nav (schermen) → voet (één actie + versienummer). */ .yb-zijbalk .yb-context { font-size: .85rem; color: var(--yb-gedempt); line-height: 1.4; } .yb-zijbalk .yb-context .yb-brik { display: block; font-weight: 700; color: var(--yb-tekst); margin-bottom: 2px; } .yb-nav { display: flex; flex-direction: column; gap: 2px; } .yb-nav a { display: block; padding: 8px 12px; border-radius: var(--yb-r-md); color: var(--yb-tekst); text-decoration: none; font-size: .93rem; font-weight: 500; } .yb-nav a:hover { background: var(--yb-vlak-2); } .yb-nav a[aria-current="page"] { background: var(--yb-geel-dim); color: var(--yb-goud); font-weight: 600; } .yb-zijvoet { margin-top: auto; font-size: .78rem; color: var(--yb-vaag); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .yb-zijvoet .yb-knop { font-size: .875rem; padding: 8px 16px; } /* De zijbalk blijft staan terwijl de inhoud rechts scrolt (kit 1.4). Is de navigatie langer dan het scherm, dan scrolt alléén die lijst: merk, context en voet staan vast, zodat uitloggen, thema en versienummer altijd in beeld zijn. De scroll zit daarom op .yb-nav en niet op de balk — met de scroll op de balk zelf zou de voet juist wél wegschuiven. `overflow: hidden auto` op de balk is de uitweg voor het uiterste geval: op een laag maar breed scherm (liggende telefoon, klein venster) passen merk, context en voet samen al niet meer, en .yb-nav is dan tot niets geslonken. Met `hidden` op beide assen zou de voet daar onbereikbaar zijn — erger dan vóór deze wijziging, toen hij tenminste nog met de pagina meescrolde. `box-sizing` staat er expliciet bij: de kit zet dat niet globaal, en zonder dat komt de padding bovenop 100dvh en valt de voet onder de rand. De voorwaarde is het exacte spiegelbeeld van de `max-width: 780px` hierboven. `min-width: 781px` lijkt hetzelfde maar laat een gat: bij een gebroken vensterbreedte (zoom, niet-gehele pixelverhouding) is 780,5px geen van beide en verdwijnt het sticky-gedrag stilzwijgend. */ @media not all and (max-width: 780px) { .yb-zijbalk { position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; box-sizing: border-box; overflow: hidden auto; } .yb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .yb-zijvoet { flex: 0 0 auto; } } .yb-kop { margin-bottom: 24px; } .yb-kop p { color: var(--yb-gedempt); margin: 0; max-width: 68ch; } /* ---------- themakeuze (kit 1.2) ---------- Segment met drie knoppen in de voet van de zijbalk. thema.js koppelt ze; een brik bouwt geen eigen schakelaar. */ .yb-thema { display: inline-flex; border: 1px solid var(--yb-lijn); border-radius: var(--yb-r-pil); overflow: hidden; background: var(--yb-vlak-2); } .yb-thema button { border: 0; background: none; color: var(--yb-gedempt); font: inherit; font-size: .74rem; font-weight: 600; padding: 4px 10px; cursor: pointer; line-height: 1.4; } .yb-thema button + button { border-left: 1px solid var(--yb-lijn); } .yb-thema button[aria-pressed="true"] { background: var(--yb-geel); color: var(--yb-op-geel); } .yb-thema button:focus-visible { outline: 2px solid var(--yb-goud); outline-offset: -2px; } /* ---------- ingebed in het portaal (kit 1.3, 1.8) ---------- thema.js zet data-yb-ingebed op als de brik in een frame draait. Het portaal toont dan zijn eigen zijbalk met merk, kantoor en gebruiker; die van de brik hoeft dat niet nog eens. Maar de schermen van de brik (zijn nav) moeten bereikbaar blijven, anders kan iemand in het frame nergens heen (1.8). De zijbalk wordt daarom een tabbalk boven de inhoud, die blijft staan bij scrollen. Heeft de brik maar één scherm, dan is er niets te kiezen en geen balk. */ html[data-yb-ingebed] .yb-schil { grid-template-columns: 1fr; min-height: 0; } html[data-yb-ingebed] .yb-thema { display: none; } html[data-yb-ingebed] .yb-zijbalk { position: sticky; top: 0; z-index: 5; height: auto; overflow: visible; flex-direction: row; align-items: center; gap: 0; padding: 8px 28px; border-right: 0; border-bottom: 1px solid var(--yb-lijn); } html[data-yb-ingebed] .yb-zijbalk > .yb-merk, html[data-yb-ingebed] .yb-zijbalk > .yb-context, html[data-yb-ingebed] .yb-zijbalk > .yb-zijvoet { display: none; } html[data-yb-ingebed] .yb-zijbalk .yb-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; overflow: visible; } html[data-yb-ingebed] .yb-zijbalk .yb-nav a { padding: 6px 14px; border-radius: var(--yb-r-pil); } html[data-yb-ingebed] .yb-zijbalk:not(:has(.yb-nav a + a)) { display: none; } @media (max-width: 520px) { html[data-yb-ingebed] .yb-zijbalk { padding: 8px 16px; } } html[data-yb-ingebed] .yb-inhoud { padding: 24px 28px 48px; } /* Het frame in het portaal vult de hele inhoud, zonder de gebruikelijke marge en maximale breedte; scrollen gebeurt in het frame. */ .yb-inhoud:has(> .yb-brikpagina) { padding: 0; max-width: none; } .yb-brikpagina { display: flex; flex-direction: column; height: 100vh; } .yb-brikpagina .yb-brikbalk { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--yb-lijn); background: var(--yb-vlak); font-size: .9rem; } .yb-brikframe { flex: 1; width: 100%; border: 0; display: block; background: var(--yb-bg); } /* ---------- kopbalk (1.0, vervangen door de zijbalk) ---------- */ .yb-balk { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 20px; background: var(--yb-vlak); border-bottom: 1px solid var(--yb-lijn); border-top: 3px solid var(--yb-geel); font-size: .88rem; } .yb-balk a { text-decoration: none; } /* Het merk (stijlboek §3/§4): de trap en "yellowbriks". Stenen 54×28 in een raster van 100, 23 opzij en 33 omhoog, radius 4. De onderste twee volgen de tekstkleur (inkt, in donker wit = de inverse versie), de bovenste is geel. "yellow" in inkt, "briks" in geel. Minimaal 22px beeldmerk. */ .yb-merk { display: inline-flex; align-items: center; gap: 10px; color: var(--yb-tekst); text-decoration: none; } .yb-beeldmerk { width: 28px; height: 28px; flex: none; display: block; } .yb-beeldmerk .yb-steen { fill: currentColor; } .yb-beeldmerk .yb-steen-geel { fill: var(--yb-geel); } .yb-woordmerk { font-weight: 800; font-size: 1.25rem; line-height: 1; letter-spacing: -.045em; } .yb-woordmerk b { font-weight: inherit; color: var(--yb-geel); } /* Oude markup (punt + streep, kit ≤ 1.4) blijft werken voor briks die nog niet bij zijn. */ .yb-merk .yb-dot { width: 8px; height: 8px; border-radius: var(--yb-r-pil); background: var(--yb-geel); } .yb-merk .yb-streep { width: 10px; height: 18px; background: var(--yb-geel); transform: skewX(-18deg); border-radius: 2px; } .yb-balk .yb-brik { font-weight: 700; } .yb-balk .yb-scheiding { color: var(--yb-lijn); } .yb-balk .yb-context { color: var(--yb-gedempt); margin-left: auto; } .yb-balk .yb-versie { color: var(--yb-vaag); font-size: .78rem; } /* ---------- onderdelen ---------- */ .yb-kaart { background: var(--yb-vlak); border: 1px solid var(--yb-lijn); border-radius: var(--yb-r-lg); padding: 24px; box-shadow: var(--yb-schaduw); } .yb-kaart p { color: var(--yb-gedempt); } .yb-rooster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); } .yb-knop { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; background: var(--yb-geel); color: var(--yb-op-geel); font-family: var(--yb-font); font-weight: 600; font-size: 1rem; line-height: 1; padding: 12px 20px; border-radius: var(--yb-r-pil); text-decoration: none; } .yb-knop:hover { background: #FFDD4A; } /* Stijlboek §9: één gele knop per scherm; de rest is de witte pil. */ .yb-knop.yb-stil { background: var(--yb-vlak); color: var(--yb-tekst); border: 1px solid var(--yb-lijn); } .yb-knop.yb-stil:hover { border-color: var(--yb-tekst); background: var(--yb-vlak); } .yb-knop.yb-rond { width: 40px; height: 40px; padding: 0; justify-content: center; } /* a.yb-tekstlink: moet zwaarder wegen dan .yb-pagina a (diepgeel). */ .yb-pagina a.yb-tekstlink, .yb-tekstlink { color: var(--yb-tekst); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yb-geel); text-decoration-thickness: 2px; text-underline-offset: 6px; } .yb-knop:disabled { opacity: .5; cursor: not-allowed; } /* Statuslabel (stijlboek §9): omlijnde pil, kapitaal. Akkoord = groen (.yb-aan, .yb-goed), in aanbouw of let op = diepgeel, fout = stop, de rest grijs. Geen gevulde labels. */ .yb-badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; padding: 4px 10px; border-radius: var(--yb-r-pil); border: 1px solid var(--yb-lijn); background: transparent; color: var(--yb-vaag); white-space: nowrap; } .yb-badge.yb-aan, .yb-badge.yb-goed { color: var(--yb-groen); border-color: currentColor; } /* Let op is geel (1.9): diepgeel voor de tekst, want geel als tekst op licht is onleesbaar, en een geel vlak met gele rand zodat het label ook geel óógt. */ .yb-badge.yb-let-op { color: var(--yb-let-op-tekst); border-color: var(--yb-let-op); background: var(--yb-geel-dim); } .yb-badge.yb-fout { color: var(--yb-rood); border-color: currentColor; } /* Lampje (1.9): de status van een punt als bolletje, in dezelfde drie kleuren als het statuslabel. Het gele lampje krijgt een diepgele ring, anders valt het op een wit vlak weg. Zonder modifier grijs: niet van toepassing. */ .yb-lamp { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--yb-lijn); vertical-align: middle; } .yb-lamp.yb-goed { background: var(--yb-groen); } .yb-lamp.yb-let-op { background: var(--yb-let-op); box-shadow: inset 0 0 0 1px var(--yb-let-op-tekst); } .yb-lamp.yb-fout { background: var(--yb-rood); } /* Dienstmerk (stijlboek §10): vier vakken, één geel; de plek van het gele vak is de brik. Geen eigen kleuren of illustraties per dienst. */ .yb-dienstmerk { display: inline-grid; grid-template-columns: repeat(2, 1fr); gap: 3px; width: 32px; height: 32px; flex: none; } .yb-dienstmerk > span { border-radius: 3px; background: var(--yb-tekst); } .yb-dienstmerk > span.yb-geel { background: var(--yb-geel); } .yb-dienstmerk.yb-leeg > span { background: var(--yb-lijn); } .yb-tabel { border-collapse: collapse; width: 100%; font-size: .92rem; } .yb-tabel th { text-align: left; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--yb-vaag); border-bottom: 1px solid var(--yb-lijn); padding: 0 12px 8px 0; } .yb-tabel td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--yb-lijn-zacht); vertical-align: top; } .yb-tabelwrap { overflow-x: auto; } /* Veld (stijlboek §9): label erboven, nooit als grijze tekst in het veld. */ .yb-pagina label { display: block; font-size: .8rem; font-weight: 600; color: var(--yb-gedempt); margin-bottom: 8px; } .yb-pagina input:not([type=checkbox]):not([type=radio]), .yb-pagina select, .yb-pagina textarea { width: 100%; font-family: var(--yb-font); font-size: 1rem; color: var(--yb-tekst); background: var(--yb-vlak-2); border: 1px solid var(--yb-lijn); border-radius: var(--yb-r-md); padding: 12px 14px; box-sizing: border-box; } .yb-pagina :is(input, select, button, a):focus-visible { outline: 2px solid var(--yb-goud); outline-offset: 2px; } .yb-veld { margin-bottom: 16px; } .yb-rij { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .yb-melding { border-radius: var(--yb-r-md); padding: 12px 16px; font-size: .9rem; margin-bottom: 16px; background: var(--yb-geel-dim); border: 1px solid var(--yb-geel-lijn); color: var(--yb-tekst); } .yb-leeg { color: var(--yb-gedempt); font-size: .92rem; } /* De goedkeurbak: een AI-voorstel is altijd herkenbaar als voorstel. */ .yb-voorstel { border-left: 4px solid var(--yb-geel); padding-left: 14px; } .yb-voorstel .yb-bron { font-size: .8rem; color: var(--yb-vaag); } /* De payoff (stijlboek §2): twee zinnen, eerste in inkt, tweede in grijs. Eén keer per stuk, onder het logo. */ /* Dubbele klasse: moet zwaarder wegen dan .yb-kaart p (grijs). */ .yb-pagina .yb-payoff, .yb-payoff { font-size: 1.75rem; line-height: 1.14; font-weight: 800; letter-spacing: -.03em; color: var(--yb-tekst); margin: 0; } .yb-pagina .yb-payoff span, .yb-payoff span { color: var(--yb-gedempt); } /* ---------- onderdelen uit yb.js (kit 1.6) ---------- De host-elementen doen niet mee in de opmaak; wat yb.js erin zet wel. Tot het onderdeel getekend is, houdt de zijbalk zijn plek vast (geen sprong in de schil) en blijven de ruwe nav-links onzichtbaar. */ yb-merk { display: contents; } yb-zijbalk[data-yb-klaar] { display: contents; } yb-zijbalk:not([data-yb-klaar]) { display: block; background: var(--yb-vlak); border-right: 1px solid var(--yb-lijn); min-height: 100vh; } yb-zijbalk:not([data-yb-klaar]) > * { display: none; } @media (max-width: 780px) { yb-zijbalk:not([data-yb-klaar]) { min-height: 0; border-right: 0; } } /* Ingebed: zolang yb.js nog niet getekend heeft geen lege balk. Daarna doet de host niet mee (display: contents) en maakt de regel bij "ingebed in het portaal" van de zijbalk een tabbalk (1.8). */ html[data-yb-ingebed] yb-zijbalk:not([data-yb-klaar]) { display: none; }