/* 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) ================================================= De site had geen enkel merkanker: primary stond op "white", accent op indigo. De kleuren hieronder komen uit het CreditSoft-logo (docs/images/logo.svg): #1d4ed8 diep blauw, #60a5fa licht blauw. Bewuste keuze: de header blijft WIT. Een volblauwe balk oogt gedateerd; het merk komt terug in links, actieve navigatie en accenten. ⚠️ WAAROM DE SELECTORS ER ZO UITZIEN. Deze regels stonden eerst enkel op :root, en dan komt er van het merkblauw niets op de pagina terecht — gemeten op de live site: de variabele klopte op (#1d4ed8) terwijl elke link indigo rendeerde (#4051b5). Geen specificiteitsgevecht op hetzelfde element, maar een verkeerd element: Material zet `data-md-color-primary` op de BODY en declareert daar `[data-md-color-primary=white] { --md-typeset-a-color: #4051b5 }`. Alles binnen de body erft die body-waarde; de :root-waarde op komt er nooit aan te pas. In de inspector lijkt alles in orde, want op staat de juiste kleur. Vandaar `[data-md-color-primary]` erbij: dan landt onze declaratie op hetzelfde element als die van Material. Voor donker maakt het twee attributen (0,2,0), zodat we winnen ongeacht de laadvolgorde van de stylesheets. */ :root, [data-md-color-primary] { --cs-blauw: #1d4ed8; --cs-blauw-licht: #60a5fa; --md-accent-fg-color: var(--cs-blauw); --md-typeset-a-color: var(--cs-blauw); } [data-md-color-scheme="slate"], [data-md-color-scheme="slate"][data-md-color-primary] { /* Op donkere achtergrond is #1d4ed8 te donker om te lezen — lichter nemen. */ --md-accent-fg-color: var(--cs-blauw-licht); --md-typeset-a-color: var(--cs-blauw-licht); } /* Actieve pagina in de zijbalk krijgt het merkblauw 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 (augustus 2026) ================================================= Gemeten op 1541 px venster: de contentkolom was 736 px — minder dan de helft, met twee schaarse zijkolommen eromheen. Material's .md-grid staat standaard op 61rem; ruimer zetten geeft de tekst zijn plaats terug zonder de regels onleesbaar lang te maken (~90 tekens blijft de bovengrens). */ .md-grid { max-width: 70rem; } /* === Koppen ==================================================================== h2 en h3 leken te veel op elkaar: zelfde kleur, nauwelijks verschil in gewicht. 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 ============================================================= De home was een titel met een bullet-lijst en daaronder 60% lege pagina. Hieronder de opmaak voor het nieuwe onthaal: een kop-blok plus een kaartraster (Material's ingebouwde .grid.cards, mogelijk dankzij attr_list + md_in_html). */ .cs-hero { padding: 2.2rem 0 1.6rem; border-bottom: 1px solid var(--md-default-fg-color--lightest); margin-bottom: 2rem; } .cs-hero h1 { font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; background: linear-gradient(95deg, var(--cs-blauw), var(--cs-blauw-licht)); -webkit-background-clip: text; background-clip: text; color: transparent; } .cs-hero p { font-size: 0.9rem; color: var(--md-default-fg-color--light); max-width: 34rem; margin: 0; } /* Drie kolommen op een breed scherm: met Material's standaard (auto-fit vanaf 16rem) werden het er vier, en brak de zesde kaart af op een halve rij. 20rem geeft 3×2. Let op: het raster staat op de .grid-div zelf — de