, en die alinea heeft marge. Daardoor verschilt de witruimte per parameter (gezien door Mees). Deze twee regels halen dat verschil weg zonder aan de rest van de opmaak te komen. */ .fern-prose.text-sm > p:first-child, .fern-prose.text-sm > div > p:first-child { margin-top: 0; } .fern-prose.text-sm > p:last-child, .fern-prose.text-sm > div > p:last-child { margin-bottom: 0; } /* Zijbalk en codepaneel op hun plek bij het statuscode-menu. Het menu-component zet tijdens het openen `overflow: hidden` op de body en markeert hem met `data-scroll-locked`. Daardoor wordt de body zelf het scrollvenster en berekenen de sticky zijbalk en het codepaneel hun positie opnieuw: ze schuiven precies de scrollafstand omhoog en lijken te verdwijnen. Gemeten op onze eigen pagina's; Brevo heeft er geen last van omdat hun pagina anders scrollt. Door de body niet te laten vergrendelen blijft alles staan. De pagina kan dan achter het open menu meescrollen, en dat is bij een klein keuzemenu geen bezwaar. */ /* `html body` en niet alleen `body`: het component injecteert zijn eigen regel met !important later in de
, dus we hebben hogere specificiteit nodig. */ html body[data-scroll-locked] { overflow: visible !important; margin-right: 0 !important; } /* De Explorer toont twee identieke knoppen "Send request": een rechtsboven en een midden in het lege antwoordvak. Dat is druk, en de bovenste is de knop die je toch al ziet staan (gezien door Mees). We laten alleen die staan. */ .fern-explorer-response-card .fern-explorer-send-request-button { display: none; } /* Explorer: Fern zet de groepskoppen in de zijbalk van het Try it-scherm in de accentkleur. Bij ons is dat rood, en dan lezen die koppen als een waarschuwing (gezien door Mees). Hier worden ze net zo grijs als in de gewone zijbalk. */ .fern-scroll-area-viewport ul.list-none > li > div > span[class*="accent-a11"], .fern-scroll-area-viewport ul.list-none > li > span[class*="accent-a11"] { color: var(--grayscale-a11) !important; } /* Try it: het tweede inlogveld verbergen. De API kent geen wachtwoord (de sleutel staat op de plek van de gebruikersnaam), dus dat veld hoort er niet te staan. Fern rendert het toch, want zo werkt basic auth in hun formulier, en hun eigen `omit`-instelling geldt alleen voor gegenereerde SDK's. Puur op de structuur, zonder javascript: een eerdere js-ingreep sloopte het hele paneel. De regel erboven noemt het veld nog wel; die zin bouwt Fern zelf op en is niet los aan te passen. */ li:has(input.fern-input[type="password"]) { display: none; } /* ============================================================================ LANDINGSPAGINA-BOUWSTENEN (site-afwerking, 2026-08-01) Generieke bouwstenen voor de startpagina en de landingspagina's per tab. Ze staan hier en niet in een pagina, zodat elke landingspagina dezelfde opbouw en dezelfde maten krijgt. Voorbeelden staan op /stijlgids. Fern heeft hier zelf geen component voor; wel voor de gewone kaartenrijen (Card/CardGroup), en die blijven de standaard. Deze twee bouwstenen zijn alleen voor het rijkere blok bovenaan een landingspagina. .lp-rij horizontaal schuivende rij (css scroll-snap, werkt zonder js) .lp-kaart kaart met een illustratievlak bovenin ============================================================================ */ /* -- Leesbreedte op landingspagina's ---------------------------------------- De landingspagina's draaien op Ferns layout "overview": een kolom die ongeveer de helft breder is dan een gewone docpagina. Die extra ruimte is er voor de hero en de schuifrij, niet voor de lopende tekst: op ~970px worden regels van ruim honderd tekens en dat leest slecht. Daarom houden alleen de tekstblokken de gewone leesbreedte aan. Alle rijke blokken (.lp-hero, .lp-rij, kaartenrijen) staan hier bewust niet in en gebruiken dus wel de volle kolom. Alleen landingspagina's gebruiken layout: overview; gewone docs staan op "guide" en merken hier niets van. Let op: Fern zet de body van een pagina in een naamloze div binnen .fern-prose, dus de tekstblokken zijn kleinkinderen. Beide niveaus staan hieronder, zodat de regel blijft werken als die tussen-div ooit verdwijnt. */ .fern-layout-overview .fern-prose > :is(p, ul, ol, blockquote, table, h2, h3, h4), .fern-layout-overview .fern-prose > div > :is(p, ul, ol, blockquote, table, h2, h3, h4), /* Staat er een knop op de pagina (het zoekveld van de startpagina), dan zet Fern de body nog een laag dieper, in een astro-island (gezien 29 september 2026). */ .fern-layout-overview .fern-prose > astro-island > div > :is(p, ul, ol, blockquote, table, h2, h3, h4) { max-width: 44rem; } /* -- Schuifrij --------------------------------------------------------------- Eén rij die horizontaal doorschuift in plaats van een raster dat naar beneden uitdijt: tien onderwerpen naast elkaar blijven zo één rustig blok in plaats van een muur van kaarten. De volgende kaart steekt half in beeld; dat is de uitnodiging om te schuiven (geen fade, geen pijlknoppen, geen javascript). De 3px ruimte rondom is voor de kaartrand en de focusring: zonder die ruimte snijdt overflow:auto ze af. */ .lp-rij { display: grid; grid-auto-flow: column; grid-auto-columns: 15.5rem; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: 3px; padding: 3px 3px 1.1rem; margin: 1.25rem -3px 0; scrollbar-width: thin; scrollbar-color: var(--lp-border) transparent; } .lp-rij > * { scroll-snap-align: start; } .dark .lp-rij { scrollbar-color: #3e3b37 transparent; } /* -- Kaart met icoon en knop ------------------------------------------------- Gelijk aan de kaart op laposta.nl (Jelle, 28 september 2026): wit, dunne lichte rand, klein omlijnd rood icoon, vette titel, omlijnde knop. De hoverreactie blijft die van een gewone Fern-kaart (rode rand), met één verschil: de kaart licht omhoog in plaats van naar rechts. In een rij die zelf zijwaarts schuift leest een zijwaartse hoverbeweging als een haperende scroll. */ a.lp-kaart { display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--lp-text); border: 1px solid var(--lp-border); border-radius: var(--lp-kaart-radius); corner-shape: var(--lp-corner); text-decoration: none; transition: border-color .2s ease, transform .2s ease; } .dark a.lp-kaart { background: transparent; color: var(--lp-text-darkmode); border-color: #3e3b37; } a.lp-kaart:hover { border-color: var(--lp-accent); transform: translateY(-3px); } .dark a.lp-kaart:hover { border-color: var(--lp-accent-darkmode); } .dark a.lp-kaart:focus-visible { border-color: var(--lp-accent-darkmode); } a.lp-kaart:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { a.lp-kaart { transition: border-color .2s ease; } a.lp-kaart:hover { transform: none; } } /* Het icoonvak. Geschiedenis: tot 28 september 2026 een zacht merkvlak met een kleurverloop en drie iconkleuren; daarna (Jelle, ronde 1) een klein rood omlijnd icoon; sinds ronde 3 (hieronder) de squircle met verlooprand van laposta.nl. De tintklassen in de mdx (.lp-t-rood, .lp-t-oranje, .lp-t-geel) doen niets meer. */ /* Icoonvak, ronde 3 van Jelle (29 september 2026): een squircle met een witte vulling, een rood-oranje verlooprand en een donker icoon, net als op laposta.nl (daar is het verloop 135deg van #e42219 naar #f39200). Hetzelfde vak staat om de iconen van Ferns eigen kaarten (Card), zodat alle kaarten er hetzelfde uitzien (punt 4). De verlooprand is een tweede achtergrond onder de border (border-box) met de witte vulling erboven (padding-box); zo volgt hij de squircle-vorm. Kent de browser corner-shape niet (Safari, Firefox), dan wordt radius 50% een cirkel. Daarom daar een afgeronde hoek van 12px, die het dichtst bij de squircle komt. */ .lp-kaart .lp-vlak, .fern-card .card-icon { --lp-vlak-vul: #fff; box-sizing: border-box; width: 40px !important; height: 40px !important; display: grid; place-items: center; flex: none; color: var(--lp-text) !important; border: 1.5px solid transparent; border-radius: 12px; background: linear-gradient(var(--lp-vlak-vul), var(--lp-vlak-vul)) padding-box, linear-gradient(135deg, var(--lp-accent) 0%, #F39200 100%) border-box; } @supports (corner-shape: superellipse(1.5)) { .lp-kaart .lp-vlak, .fern-card .card-icon { border-radius: 50%; corner-shape: var(--lp-corner); } } .lp-kaart .lp-vlak { margin: 1.15rem 1.1rem 0; } .dark .lp-kaart .lp-vlak, .dark .fern-card .card-icon { --lp-vlak-vul: var(--lp-bg-darkmode); color: var(--lp-text-darkmode) !important; } /* Fern zet de icoongrootte als inline style op de svg; !important is hier de enige manier om er met css overheen te gaan. Zo staat de maat op één plek en hoeft hij niet bij elke kaart in de mdx herhaald te worden. */ .lp-kaart .lp-vlak svg, .fern-card .card-icon svg { color: currentColor; width: 18px !important; height: 18px !important; } /* Font Awesome tekent sommige iconen net buiten hun eigen tekenvak (de beugel van fa-unlock komt tot y = -32 bij een viewBox van 0 tot 512). Font Awesome zet daarom zelf overflow: visible op .svg-inline--fa; Fern doet dat niet, waardoor de bovenkant werd afgekapt (Mees, 2 november 2026, Account-pagina). Voor alle iconen, niet alleen in de kaarten. */ svg.svg-inline--fa { overflow: visible; } .lp-kaart-tekst { display: flex; flex-direction: column; flex: 1; gap: .35rem; padding: .8rem 1.1rem 1.1rem; } .lp-kaart-titel { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 1rem; line-height: 1.3; } .lp-kaart-regel { flex: 1; font-size: .875rem; line-height: 1.5; color: var(--lp-text); } .dark .lp-kaart-regel { color: #cfccc7; } /* De knop onderin: een omlijnde secundaire knop, net als "Lees meer" op laposta.nl. Het is een span in de link, dus de hele kaart blijft het klikdoel. */ .lp-kaart-cta { margin-top: .9rem; padding: .5rem .75rem; text-align: center; font-size: .85rem; font-weight: 700; color: var(--lp-text); box-shadow: inset 0 0 0 1px var(--lp-knop-lijn); border-radius: var(--lp-knop-radius); corner-shape: var(--lp-corner); transition: background-color .15s ease, color .15s ease; } .dark .lp-kaart-cta { color: var(--lp-knop-lijn-dark); box-shadow: inset 0 0 0 1px var(--lp-knop-lijn-dark); } a.lp-kaart:hover .lp-kaart-cta { background: var(--lp-knop-lijn); color: #fff; } a.lp-kaart:focus-within .lp-kaart-cta { background: var(--lp-knop-lijn); color: #fff; } .dark a.lp-kaart:hover .lp-kaart-cta { background: var(--lp-knop-lijn-dark); color: var(--lp-bg-darkmode); } .dark a.lp-kaart:focus-within .lp-kaart-cta { background: var(--lp-knop-lijn-dark); color: var(--lp-bg-darkmode); } /* Smal scherm: één kaart per keer, met de volgende half in beeld. */ @media (max-width: 767px) { .lp-rij { grid-auto-columns: 77%; gap: .75rem; } } /* ----- Taalwisselaar: nooit een ring, in geen enkele toestand. Fern tekent rond deze knop een ring in de accentkleur. Met ons rood leest die als een foutmelding rond de knop. Mees meldde dat op 19 augustus; de regel die er toen kwam dekte alleen `:focus` zonder `:focus-visible`, dus alleen de muisklik-nasleep. De ring die je in de praktijk ziet hangt aan de OPEN staat van het uitklapmenu (`aria-expanded="true"` / `data-state="open"`), en die viel er buiten. Op 20 augustus gemeten met een testregel: een groene outline op die attributen verving precies de rode die Mees zag. Nu alle toestanden, op verzoek van Mees ("die moet gewoon helemaal nooit meer komen"). Let op: daarmee heeft deze ene knop geen zichtbare focusindicator meer voor wie met Tab navigeert. Bewuste keuze, geen omissie. Het open menu is zelf de aanwijzing dat de knop actief is. Beide vormen worden gereset, want of Fern outline of box-shadow gebruikt verschilt per versie. */ button.fern-language-selector, button.fern-language-selector:hover, button.fern-language-selector:focus, button.fern-language-selector:focus-visible, button.fern-language-selector[aria-expanded="true"], button.fern-language-selector[data-state="open"], .language-dropdown-trigger, .language-dropdown-trigger:hover, .language-dropdown-trigger:focus, .language-dropdown-trigger:focus-visible, .language-dropdown-trigger[aria-expanded="true"], .language-dropdown-trigger[data-state="open"] { outline: none; box-shadow: none; } /* ----- Diatype op dezelfde optische grootte als Open Sans. Diatype heeft een kleinere x-hoogte (0,482 tegen 0,535 van de em), dus bij dezelfde font-size oogt alle broodtekst zo'n tien procent kleiner. font-size-adjust schaalt het lettertype tot de x-hoogte weer gelijk is; koppen (Fira Sans) en code houden hun eigen maat. */ body { font-size-adjust: 0.535; } h1, h2, h3, h4, h5, h6, .lp-kaart-titel, code, pre, kbd, samp { font-size-adjust: none; } /* ----- Zoekbalk in de kop: prominenter (Mees, 29 september 2026) ------------------ Bezoekers komen meestal om te zoeken (Jelle, 28 september 2026). De zoekbalk staat op elke pagina bovenin; hier krijgt hij de knopvorm van de knoppen ernaast, een eigen vlak in de huisstijlkleur, een duidelijke rand en donkerdere tekst, zodat hij opvalt zonder te schreeuwen. */ #fern-search-button { height: 40px; border-radius: var(--lp-knop-radius); corner-shape: var(--lp-corner); /* Rechts 14px: dan staat het midden van het "/"-rondje even ver van de rand als het vergrootglas links (25,4 px, gemeten 2 november 2026; met 8px plakte het tegen de rand). */ padding-left: 16px; padding-right: 14px; gap: 10px; background: #FAF8F4; border: 1px solid #adb5bd; color: #495057; font-size: 15px; transition: border-color .15s, background-color .15s; } #fern-search-button:hover { border-color: #212529; background: #fff; } #fern-search-button:focus-visible { border-color: #212529; background: #fff; } #fern-search-button svg { color: #212529; width: 17px; height: 17px; } #fern-search-button kbd { border-radius: 999px; } html.dark #fern-search-button { background: #242427; border-color: #5a5a5f; color: #c9c7c3; } html.dark #fern-search-button:hover { border-color: #E4E2DF; background: #1B1B1D; } html.dark #fern-search-button:focus-visible { border-color: #E4E2DF; background: #1B1B1D; } html.dark #fern-search-button svg { color: #E4E2DF; } /* Het doek onderaan: ruimte erboven in plaats van eronder. */ .lp-hero.lp-hero-onder { margin: .5rem 0 -1rem calc((100% - var(--lp-band)) / 2); } /* Het doek in zijn iframe kiest zijn kleurschema naar de computer ("light dark"). Staat de site op een ander thema dan de computer, dan tekent Chrome het iframe op een dicht vlak van dat andere schema: een zwart blok op de witte pagina (gemeten 29 september 2026, site licht en computer donker). Met hetzelfde schema op het iframe-element blijft het doorzichtig; de kleur van het doek zelf volgt de site via doek-thema.js. */ .lp-wave { color-scheme: light dark; } /* ----- Zijbalk zonder het item "Overzicht" (Mees, 29 september 2026) --------------- Elke tab opent op zijn overzichtspagina; dat item bovenaan de zijbalk voegde niets toe. De pagina blijft bestaan en is bereikbaar via de tab, alleen het item is weg. Het gaat om de tien overzichtspagina's: de slugs eindigen op "overzicht", die van de API-tab is "api" (geen andere pagina heeft zo'n slug). Alleen binnen de zijbalk, want de tabs bovenin linken naar dezelfde adressen. */ #fern-sidebar-scroll-area li:has(> a:is([href$="overzicht"], [href$="/api"])) { display: none; } /* ----- Kop rustiger (Mees, 29 september 2026) --------------------------------------- 1. De taalknop: wereldbol en taalcode in plaats van vlag en volledige naam. De taal lezen we af aan de links in de tabrij en de zijbalk (/en/, /de/, /es/, anders Nederlands), zodat de code er meteen staat: een script draaide live pas na 2 tot 4 seconden, en de vlag is niet te gebruiken (live een bestand, op een preview ingebakken). De naam blijft onzichtbaar staan, zodat een schermlezer nog "Nederlands" voorleest. Kent de browser :has() niet, dan blijft Ferns eigen knop met vlag en naam staan. */ @supports selector(:has(a)) { .language-dropdown-trigger { gap: 6px; } .language-dropdown-trigger > div:first-child { display: none; } .language-dropdown-trigger > span.truncate { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .language-dropdown-trigger::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19M12 2.5c2.6 2.8 3.9 6 3.9 9.5s-1.3 6.7-3.9 9.5c-2.6-2.8-3.9-6-3.9-9.5s1.3-6.7 3.9-9.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19M12 2.5c2.6 2.8 3.9 6 3.9 9.5s-1.3 6.7-3.9 9.5c-2.6-2.8-3.9-6-3.9-9.5s1.3-6.7 3.9-9.5z'/%3E%3C/svg%3E") center / contain no-repeat; } .language-dropdown-trigger::after { content: "NL"; order: 1; font-weight: 500; letter-spacing: .02em; } :root:has(:is(.fern-header-tabs, #fern-sidebar-scroll-area) a[href^="/en/"]) .language-dropdown-trigger::after { content: "EN"; } :root:has(:is(.fern-header-tabs, #fern-sidebar-scroll-area) a[href^="/de/"]) .language-dropdown-trigger::after { content: "DE"; } :root:has(:is(.fern-header-tabs, #fern-sidebar-scroll-area) a[href^="/es/"]) .language-dropdown-trigger::after { content: "ES"; } .language-dropdown-trigger > svg { order: 2; } } /* 2. De tabrij loopt over de volle breedte en staat in het midden. "safe center": past de rij niet (smal scherm), dan begint hij links en blijft hij schuifbaar, in plaats van aan beide kanten af te vallen. */ .fern-header-tabs { justify-content: flex-start; } /* Fern zet soms een astro-island (display: contents) tussen de tabrij en zijn binnenste lagen (gezien op een preview van 29 september 2026, live nog niet). Daarom geen kind-selectors (>) maar :has() op de laag die de tabs zelf bevat. */ .fern-header-tabs div:has(> div > a[role="tab"]) { max-width: none; width: 100%; } /* Punt 7 van ronde 3 (Mees, 29 september 2026): de tabrij liep als blok in het midden en niet over de volle breedte. Nu gespreid, van onder het logo tot onder de themaknop. min-width in plaats van width: past de rij niet, dan schuift hij in plaats van dat de tabs krimpen. */ /* Ronde 4 (Mees, 29 september 2026): toch links, onder het logo, met Inloggen rechts in dezelfde rij (zie "Ronde 4" onderaan). De negatieve marge is de binnenruimte van de eerste tab, zodat het icoon precies onder de linkerrand van het logo staat. */ .fern-header-tabs div:has(> a[role="tab"]) { justify-content: flex-start; min-width: 100%; margin-left: -12px; } /* Fern kapt de tabnamen af als de rij niet past ("Aan de...", "Rel..."). Daarom per schermbreedte minder ruimte per tab en daarna de tabs zonder icoon. Gemeten grenzen: zie "Ronde 4". Onder 1024 px staan de tabs in het menu. */ @media (max-width: 1469px) { .fern-header-tabs a[role="tab"] { padding-inline: 8px; } .fern-header-tabs div:has(> a[role="tab"]) { margin-left: -8px; } } @media (max-width: 1389px) { .fern-header-tabs a[role="tab"] > svg { display: none; } } /* ----- Telefoon en tablet rustiger (Mees, 29 september 2026) ------------------------ */ @media (max-width: 1023px) { /* Het uitklapmenu over de volle breedte: de pagina piepte er links onder uit. */ #fern-sidebar { width: 100% !important; max-width: none !important; left: 0 !important; margin-left: 0 !important; } /* De tabs in het menu: kaal icoon in plaats van een icoon in een kadertje. */ #fern-sidebar-scroll-area a > span[class*="shadow-card"] { border: 0 !important; box-shadow: none !important; background: none !important; color: inherit !important; width: auto; margin-right: 12px; } /* Sluitknop neutraal, niet rood gevuld. */ button[aria-label="Close menu"] { background: none !important; color: var(--grayscale-a11, #212529) !important; box-shadow: none !important; } } /* De suggestieknop weg op een telefoon of ander aanraakscherm: hij klapte er raar uit en tekst selecteren werkt daar anders. */ @media (max-width: 767px), (hover: none) and (pointer: coarse) { .lp-sug-fab, .lp-sug-sel { display: none !important; } } /* ----- Startknop op de startpagina (Mees, 29 september 2026) ------------------------- "Start direct gratis" staat niet meer in de kop (die was te druk) maar op de startpagina, onder de stappen om te beginnen. Zelfde vorm als de knoppen in de kop. */ .lp-cta-rij { margin: 1.75rem 0 0; } /* zie ook punt 11 onderaan */ a.lp-cta { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: var(--lp-knop-radius); corner-shape: var(--lp-corner); background: var(--lp-accent); color: #fff !important; font-weight: 700; font-size: 16px; text-decoration: none !important; transition: background-color .15s ease; } a.lp-cta:hover { background: var(--lp-accent-dark); } a.lp-cta .external-link-icon { display: none; } /* Ferns icoon voor externe links hoort niet op een knop */ a.lp-cta:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; } /* ===== Ronde 3 van Jelle, plus punten van Mees (29 september 2026) ==================== Knopgewicht 700 en het icoonvak staan bij hun eigen regels hierboven. */ /* Punt 2. Kaarten als squircle, zoals op laposta.nl: daar staat een radius van 32px met corner-shape, en zonder corner-shape (Safari, Firefox) dezelfde radius maal 0,752, zodat de gewone afgeronde hoek ongeveer even rond oogt. Onze kaarten zijn kleiner, dus 24px. */ :root { --lp-hoek-factor: .752; --lp-kaart-radius: calc(24px * var(--lp-hoek-factor)); } @supports (corner-shape: superellipse(2)) { :root { --lp-hoek-factor: 1; } } a.fern-card { border-radius: var(--lp-kaart-radius) !important; corner-shape: var(--lp-corner); } /* Punt 6. De rubriek boven de paginatitel ("Introductie") in hetzelfde grijs en gewicht als de kopjes in de zijbalk, niet meer in het rood van een link. */ .fern-breadcrumb-item { color: var(--lp-kop-zacht) !important; font-weight: 600; } .dark .fern-breadcrumb-item { color: var(--lp-kop-zacht-darkmode) !important; } a.fern-breadcrumb-item:hover { color: var(--lp-accent) !important; } a.fern-breadcrumb-item:focus-visible { color: var(--lp-accent) !important; } .dark a.fern-breadcrumb-item:hover { color: var(--lp-accent-darkmode) !important; } .dark a.fern-breadcrumb-item:focus-visible { color: var(--lp-accent-darkmode) !important; } /* Punt 8. De taalknop even hoog als de themaknop ernaast (36px, Ferns size-9) en met dezelfde hover: Ferns accentvlak en accenttekst. Gemeten vooraf: taalknop 32px hoog, themaknop 36px. */ .language-dropdown-trigger { height: 36px !important; min-height: 36px; padding: 0 10px !important; border-radius: 8px; transition: background-color .15s ease, color .15s ease; color: var(--grayscale-a11) !important; /* zelfde rustkleur als de themaknop */ } .language-dropdown-trigger:hover, .language-dropdown-trigger[data-state="open"], .language-dropdown-trigger[aria-expanded="true"] { background-color: var(--accent-a3) !important; color: var(--accent-11) !important; } /* Punt 9. De rij kaarten loopt vanzelf rond (Mees; startrij.js zet de klasse lp-loopt en de twee maten). Rustig tempo (30px per seconde), eindeloos, zonder zelf te schuiven. Staat stil zolang de muis erop staat of een kaart toetsenbordfocus heeft, zodat "Bekijken" geen bewegend doel is. Links en rechts vervaagt de rij (mask), zoals op laposta.nl. De hoverreactie is hier alleen de rode rand: de animatie gebruikt de transform al, dus het optillen van de kaart valt weg. */ .lp-rij.lp-loopt { display: flex; gap: 1rem; overflow: hidden; scroll-snap-type: none; padding: 3px 0 1.1rem; margin-inline: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%); } .lp-rij.lp-loopt > * { flex: 0 0 15.5rem; animation: lp-loop var(--lp-loop-duur, 80s) linear infinite; } .lp-rij.lp-loopt:hover > *, .lp-rij.lp-loopt:focus-within > * { animation-play-state: paused; } .lp-rij.lp-loopt:focus-within > * { animation-play-state: paused; } .lp-rij.lp-loopt > a.lp-kaart:hover { transform: none; } .lp-rij.lp-loopt > a.lp-kaart:focus-visible { transform: none; } @keyframes lp-loop { to { transform: translateX(calc(-1 * var(--lp-loop-afstand, 0px))); } } @media (max-width: 767px) { .lp-rij.lp-loopt { gap: .75rem; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%); } .lp-rij.lp-loopt > * { flex-basis: 72%; } } /* Verminderde beweging aan in het systeem: geen beweging maar een stilstaand raster van kleine kaarten (startrij.js doet dan niets). Zonder de uitleg en zonder de knop, want de hele kaart is de link. */ @media (prefers-reduced-motion: reduce) { .lp-rij { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); overflow: visible; } .lp-rij .lp-kaart-regel, .lp-rij .lp-kaart-cta { display: none; } .lp-rij .lp-kaart-tekst { padding-bottom: 1rem; } } /* Punt 10 (Jelle, via Mees, 29 september 2026; hij bouwde het zelf na in de browser). De zoekbalk rustiger: smaller (25rem, gecentreerd tussen logo en Inloggen), wit in plaats van het beige vlak, een lichtere rand en zonder Ferns schaduwring. En een dunne lijn boven de tabrij, in dezelfde kleur als de lijn eronder (Ferns --grayscale-a3), zodat de rij met logo en zoeken los staat van de tabs. Dit overschrijft een deel van "Zoekbalk in de kop: prominenter" hierboven. */ div:has(> #fern-search-button) { max-width: 25rem !important; margin-inline: auto; } #fern-search-button { background: #fff; border-color: var(--lp-border); box-shadow: none !important; } #fern-search-button:hover { border-color: #adb5bd; } #fern-search-button:focus-visible { border-color: #adb5bd; } html.dark #fern-search-button { background: var(--lp-bg-darkmode); border-color: #3e3b37; } html.dark #fern-search-button:hover { border-color: #5a5a5f; } html.dark #fern-search-button:focus-visible { border-color: #5a5a5f; } .fern-header-tabs { border-top: 1px solid var(--grayscale-a3); } /* Punt 11 (Jelle, ronde 3): "Start direct gratis" meteen op de startpagina, direct onder de introductie, met ernaast in één zin waarom (dezelfde feiten als stap 1 verderop). */ .lp-cta-rij { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 1.5rem 0 .25rem; } .lp-cta-regel { color: #6C757D; font-size: .95rem; max-width: 30rem; } .dark .lp-cta-regel { color: #9A968F; } /* Punt 12 (Jelle): witruimte boven het eerste kopje in de zijbalk. Die kwam van het verborgen item "Overzicht": het binnenste item was weg, maar het buitenste bleef staan en kreeg van Fern 24px ondermarge. Nu verdwijnt het hele buitenste item (alleen als er geen kopje in zit, zodat er nooit een groep verdwijnt). */ #fern-sidebar-scroll-area .fern-sidebar-group > li:has(li > a:is([href$="overzicht"], [href$="/api"])):not(:has(.fern-sidebar-heading)) { display: none; } /* Punt 13 (Mees): logo even groot als op laposta.nl, 48px hoog op de computer (docs.yml) en 40px op de telefoon. */ /* Fern zet onder 768px max-height 32px op het logo, met !important in een CSS-laag; daar wint geen enkele gewone regel van. zoom schaalt het beeld zelf: 32px x 1,25 = 40px. */ @media (max-width: 767px) { #fern-header a > img { zoom: 1.25; } } /* Punt 14 (Mees): alle lijnen in één kleur. Fern tekende de lijn onder de kop en naast de zijbalk zelf (een doorzichtig grijs), de kaarten hadden #dee2e6 (ook in donker, dus een lichte rand op het donkere vlak) en het zoekveld een eigen grijs. */ #fern-header { border-bottom-color: var(--lp-lijn) !important; } #fern-sidebar { border-right-color: var(--lp-lijn) !important; } .fern-header-tabs { border-top-color: var(--lp-lijn); } a.fern-card, .fern-back-to-top, a.fern-footer-next { border-color: var(--lp-lijn) !important; } #fern-search-button { border-color: var(--lp-lijn); } html.dark #fern-header { border-bottom-color: var(--lp-lijn-darkmode) !important; } html.dark #fern-sidebar { border-right-color: var(--lp-lijn-darkmode) !important; } html.dark .fern-header-tabs { border-top-color: var(--lp-lijn-darkmode); } html.dark :is(a.fern-card, .fern-back-to-top, a.fern-footer-next) { border-color: var(--lp-lijn-darkmode) !important; } html.dark #fern-search-button, .dark a.lp-kaart { border-color: var(--lp-lijn-darkmode); } .dark .fern-table th, .dark .fern-table td { border-color: var(--lp-lijn-darkmode); } /* Punt 15 (Mees): op een heel breed scherm (vanaf 2400px, bv. een ver uitgezoomde browser) tekende het doek maar een deel van de band, of niets. Daar blijft hij 2000px breed, gecentreerd onder de tekst, en vervaagt hij aan beide kanten. */ @media (min-width: 2400px) { .lp-hero, .lp-hero.lp-hero-onder { width: 2000px; margin-left: calc((100% - 2000px) / 2); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } } /* ===== Ronde 4 (Mees, 29 september 2026) ================================================== Kop. De bovenste rij is hoger (docs.yml header-height 80px, was 64) zodat er meer lucht boven de lijn zit, en de zoekbalk is 44px hoog. Inloggen staat niet meer naast de taalknop maar rechts in de tabrij, op één lijn met de tabs. Dat kan alleen waar de tabs en de knop samen passen (gemeten: vanaf 1180 px met tabs zonder icoon); daaronder blijft hij boven. */ #fern-search-button { height: 52px; } /* 52px sinds 29 september 2026, 17 uur (Mees) */ /* Omgewisseld op verzoek van Mees (29 september 2026, na ronde 4): Inloggen staat weer rechtsboven, en de taalknop en de themaknop staan rechts in de tabrij. Die twee horen bij het lezen van de docs, Inloggen bij het product. */ @media (min-width: 1180px) { nav.fern-header-navbar-links > button { position: absolute; top: calc(var(--header-height-real, 80px) + (var(--header-height, 125px) - var(--header-height-real, 80px) - 36px) / 2); } nav.fern-header-navbar-links > button:not(.fern-language-selector) { right: 32px; } nav.fern-header-navbar-links > button.fern-language-selector { right: 76px; } .fern-header-tabs { padding-right: 180px; } } /* Stapnummers (Fern Steps): vet en iets kleiner, zodat het cijfer rustig in zijn vakje staat. */ .fern-step .fern-anchor-icon { font-weight: 700; font-size: 14px; } /* De rij kaarten op de landingspagina's iets breder dan de tekstkolom (Jelle: margin-top 2rem, margin-inline -5rem), maar nooit tot buiten het scherm of over de zijbalk. De kolom staat gecentreerd in het scherm; links ligt de zijbalk (300px), dus de ruimte links is de beperking. Gemeten: vanaf 1440 px is er links 86px vrij, daaronder minder. */ /* Vrije ruimte naast de kolom = (schermbreedte - 1274px) / 2, met minstens 29px (gemeten op 1024 tot 1600 px). 1282 in plaats van 1274 houdt 4px marge voor een vaste schuifbalk. */ .lp-rij, .lp-rij.lp-loopt { margin-top: 2rem; } @media (min-width: 1024px) { .lp-rij.lp-loopt { margin-inline: calc(-1 * min(5rem, max(25px, (100vw - 1282px) / 2))); } } /* Startblok op de startpagina: een vlak met de uitleg links en de knop rechts (Mees). In de mdx staat de knop eerst, dus order zet de tekst ervoor; een schermlezer leest de knop eerst, wat hier niet uitmaakt. Op een smal scherm staat de knop onder de tekst. */ .lp-cta-rij { justify-content: space-between; gap: 1rem 2rem; margin: 1.75rem 0 .5rem; padding: 1.25rem 1.5rem; background: var(--lp-callout-bg); border-radius: var(--lp-kaart-radius); corner-shape: var(--lp-corner); } .lp-cta-regel { order: -1; flex: 1 1 18rem; color: var(--lp-text); font-size: 1rem; line-height: 1.5; max-width: none; } .dark .lp-cta-rij { background: #242427; } .dark .lp-cta-regel { color: var(--lp-text-darkmode); } @media (max-width: 767px) { .lp-cta-rij { padding: 1rem 1.1rem; } .lp-cta-rij a.lp-cta { width: 100%; justify-content: center; } } /* De Beacon (onze helpdesk-chatbot, geladen door beacon-laden.js) staat op de docs LINKSONDER, zijn eigen plek, net als op laposta.nl (Mees, 2 november 2026, 's avonds). Rechtsonder (variant B, eerder die dag) zat hij in de weg bij de Suggestie-knop en de suggestiehulp. Links dekte hij op Fern de onderste menu-items van de zijbalk af, want die loopt tot onderaan het scherm. Daarom krijgt de zijbalk onderaan lege ruimte zo hoog als de knop plus zijn marge: het laatste item scrolt dan altijd boven de knop uit. Aan de Beacon zelf verandert niets. */ /* flex: none, want het scrollvlak is een flexbox en drukte de ruimte anders plat tot 0 (gemeten). */ #fern-sidebar-scroll-area::after { content: ""; display: block; flex: none; height: 104px; } /* Fern's eigen Ask AI staat uit in het Fern-dashboard (Settings, kaart Ask AI); twee AI-knoppen naast elkaar verwarren. Deze regel is het vangnet voor als hij daar ooit weer aan gaat. */ #fern-ask-ai-button { display: none !important; } /* — Aanmeldformulier op een docs-pagina (Laposta MCP-server, november 2026) --------------- De kale html uit de app, in de huisstijl. De spambeveiliging laadt aanmeldformulier-laden.js. */ .lp-aanmeldformulier { max-width: 420px; margin: 1.5em 0; } .lp-aanmeldformulier label { display: block; padding: .6em 0 .25em; font-weight: 600; } .lp-aanmeldformulier input[type=email], .lp-aanmeldformulier input[type=text] { width: 100%; padding: .55em .7em; border: 1px solid var(--lp-border); border-radius: 8px; background: transparent; color: inherit; font: inherit; } .lp-aanmeldformulier input[type=email]:focus, .lp-aanmeldformulier input[type=text]:focus { outline: 2px solid var(--lp-accent); outline-offset: 1px; } .lp-aanmeldformulier input[type=submit] { margin-top: 1.1em; padding: .6em 1.4em; border: 0; border-radius: var(--lp-knop-radius); background: var(--lp-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .lp-aanmeldformulier input[type=submit]:hover { background: var(--lp-accent-dark); } .lp-aanmeldformulier input[type=submit]:focus-visible { background: var(--lp-accent-dark); } .dark .lp-aanmeldformulier input[type=email], .dark .lp-aanmeldformulier input[type=text] { border-color: var(--lp-lijn-darkmode); }