/* Compact font sizing — Inter heeft een grotere x-hoogte dan Roboto default. Lichte reductie van body-grootte zodat de docs visueel compacter ogen, met behoud van brand-consistentie met de marketing-website. Headings gebruiken in Material em-eenheden (proportioneel aan body), dus die schalen automatisch mee — NIET expliciet overschrijven. */ .md-typeset { font-size: 0.8rem; line-height: 1.72; } /* Sidebar en nav iets compacter */ .md-nav { font-size: 0.72rem; } /* === Header verfijning (mei 2026) === */ /* Subtiele border-bottom in plaats van Material's harde schaduw. Pill-vormige zoekbalk met zachte achtergrond. Subtielere header-buttons. Werkt in zowel licht als donker schema. */ .md-header { border-bottom: 1px solid rgba(0, 0, 0, 0.06); box-shadow: none; } [data-md-color-scheme="slate"] .md-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Tabs-rij (navigation.tabs) sluit visueel aan op de header */ .md-tabs { border-bottom: 1px solid rgba(0, 0, 0, 0.06); } [data-md-color-scheme="slate"] .md-tabs { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Zachte pill-vormige zoekbalk */ .md-search__form { background-color: rgba(0, 0, 0, 0.04); border-radius: 9999px; height: 2.2rem; transition: background-color 0.15s ease, box-shadow 0.15s ease; } .md-search__form:hover { background-color: rgba(0, 0, 0, 0.06); } [data-md-toggle="search"]:checked ~ .md-header .md-search__form, [data-md-toggle="search"]:checked ~ .md-container .md-search__form { background-color: var(--md-default-bg-color); box-shadow: 0 0 0 2px var(--md-accent-fg-color); } [data-md-color-scheme="slate"] .md-search__form { background-color: rgba(255, 255, 255, 0.06); } [data-md-color-scheme="slate"] .md-search__form:hover { background-color: rgba(255, 255, 255, 0.1); } /* Subtielere header-buttons (theme toggle, taal-switch) */ .md-header__button { opacity: 0.7; transition: opacity 0.15s ease; } .md-header__button:hover, .md-header__button:focus-visible { opacity: 1; } /* === Globaal font-scale (mei 2026) ============================================ mkdocs-material gebruikt standaard html { font-size: 137.5% }. Lager getal = compactere site overal (header, tabs, sidebar, body, footer). Eén knop om alles proportioneel mee te schalen. */ html { font-size: 130%; } /* === Merkkleur (augustus 2026) ================================================= Doorgetrokken van CreditSoft (zelfde opzet, eigen kleuren): de site had geen merkanker — accent stond op Material's "deep purple", niet op óns paars. De kleuren hieronder komen rechtstreeks uit het Nimble-logo (docs/images/logo.svg): #7c3aed diep paars, #c084fc licht paars — hetzelfde verloop als het login-tweeluik van de app. Bewuste keuze (van CreditSoft overgenomen): de header blijft WIT. Een volpaarse balk oogt gedateerd; het merk komt terug in links, actieve navigatie en accenten. */ :root { --nb-paars: #7c3aed; --nb-paars-licht: #c084fc; } /* ⚠️ Óók op [data-md-color-primary], niet enkel :root. Material zet data-md-color-primary op de BODY en declareert de linkkleur dáár — een :root-regel staat op en verliest dan binnen de body. Het venijn: in de inspector ziet alles er gezond uit (de variabele stáát, met de juiste waarde), maar de links renderen Material-indigo. Live gemeten op 14/08/2026: --nb-paars = #7c3aed op , linkkleur rgb(64,81,181). Controleer dus de GERENDERDE kleur van een link, nooit de variabele. Gevonden door de CleanOps-sessie. */ :root, [data-md-color-primary] { --md-accent-fg-color: var(--nb-paars); --md-typeset-a-color: var(--nb-paars); } /* In donker wint Material met [data-md-color-scheme][data-md-color-primary] (specificiteit 0,2,0) — dus hier dezelfde dubbele selector. Op donkere achtergrond is #7c3aed te donker om te lezen — de lichte variant. */ [data-md-color-scheme="slate"][data-md-color-primary] { --md-accent-fg-color: var(--nb-paars-licht); --md-typeset-a-color: var(--nb-paars-licht); } /* Actieve pagina in de zijbalk krijgt het merkpaars i.p.v. Material's indigo */ .md-nav__link--active, .md-nav__link--active:focus, .md-nav__link--active:hover { color: var(--md-typeset-a-color); font-weight: 600; } /* === Leeskolom ================================================================= Zelfde meting als bij CreditSoft: Material's .md-grid staat op 61rem en laat de tekst in een smalle kolom tussen twee schaarse zijkolommen staan. 70rem geeft de tekst zijn plaats terug zonder onleesbaar lange regels (~90 tekens bovengrens). */ .md-grid { max-width: 70rem; } /* === Koppen ==================================================================== h2 en h3 leken te veel op elkaar. h2 krijgt een fijne scheidingslijn zodat een lange pagina leesbaar opdeelt. */ .md-typeset h2 { font-weight: 650; letter-spacing: -0.01em; margin-top: 2.2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--md-default-fg-color--lightest); } .md-typeset h3 { font-weight: 600; margin-top: 1.8em; } /* === Onthaalpagina ============================================================= Kop-blok plus kaartraster (Material's .grid.cards, dankzij attr_list + md_in_html + pymdownx.emoji). Vorm van CreditSoft; klasse-prefix nb-. */ .nb-hero { padding: 2.2rem 0 1.6rem; border-bottom: 1px solid var(--md-default-fg-color--lightest); margin-bottom: 2rem; } .nb-hero h1 { font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; background: linear-gradient(95deg, var(--nb-paars), var(--nb-paars-licht)); -webkit-background-clip: text; background-clip: text; color: transparent; } .nb-hero p { font-size: 0.9rem; color: var(--md-default-fg-color--light); max-width: 34rem; margin: 0; } /* Drie kolommen op een breed scherm — zie de CreditSoft-nota: het raster staat op de .grid-div zelf; de