/* ========================================================================== Publiek 2026 — de gedeelde componenten van de publieke site. Laadvolgorde is bindend: wereld-CSS (home.css / propositie.css) fenofin-2026.css de kern: tokens, knop, rubrieklabel, hero, agentvenster publiek-2026.css dit bestand: alles wat op meer dan één pagina staat .css wat écht van één pagina is Dit bestand herschrijft geen markup; het haalt weg wat de pagina's naar een sjabloon lieten lijken — ronde hoeken, slagschaduwen, gradients, pilknoppen, icoon-cirkels en gecentreerde koppen — en zet er inkt op papier met haarlijnen voor in de plaats. Over `html:root` en `:root` hieronder: die selectors hingen tot 25-08-2026 aan `.prop-light`, een klasse die elke publieke template hardcoded op zette. `html:root` matcht altijd en heeft exact dezelfde specificiteit, dus de cascade tegenover home.css bleef ongewijzigd. Zodra home.css zelf in deze laag opgaat kan het voorvoegsel weg. Vier regels hieronder dragen datzelfde voorvoegsel om een andere reden: home.css heeft er een `:root`-variant van, en zonder het voorvoegsel verliest deze laag op specificiteit. Zoek bij een regel die niet aankomt dus eerst naar een `:root`-tegenhanger elders. ========================================================================== */ /* ========================================================================== DEEL 1 — de bk-wereld (propositie- en bedanktpagina's) ========================================================================== */ /* ---------- De bk-tokens naar de ff-waarden ---------- De bk-wereld heeft een eigen tokenset. Door die hier op de ff-waarden te zetten schuift de hele pagina in één keer mee: kleuren, randen en — via --bk-shadow: none — alle slagschaduwen tegelijk. */ :root { --bk-accent: var(--ff-magenta); --bk-accent-dark: var(--ff-magenta-ink); --bk-ink: var(--ff-ink); --bk-text: #3d434c; --bk-muted: var(--ff-ink-60); --bk-bg: #f8fafc; /* dezelfde paginakleur als de homepage */ --bk-card: var(--ff-sheet); --bk-border: var(--ff-rule-soft); --bk-shadow: none; } /* body.bk-page reserveert 70px voor de vaste navigatiebalk. Een pagina met de ff-hero brengt die ruimte zelf al mee (7.5rem bovenpadding), dus daar zou het dubbel op komen. Alleen díe pagina's laten we de reservering vallen. Zonder :has()-ondersteuning krijgt zo'n pagina wat extra witruimte boven — dat valt nauwelijks op en niets breekt. */ body.bk-page:has(.ff-hero) { padding-top: 0; } /* De hero deelt de maat van de secties eronder. De ff-hero zet de zijrand op de sectie en de breedte op het grid; bk-container doet allebei op één element. Door de hero hetzelfde te laten doen (1080px inclusief 20px rand, want box-sizing: border-box) staat alles op dezelfde linkerlijn — ook als het scherm smaller wordt dan de container. */ .bk-page .ff-hero { padding-left: 0; padding-right: 0; } .bk-page .ff-hero-grid { max-width: 1080px; padding: 0 20px; } /* De variant-kop gebruikt .bk-plaats voor het accentdeel; die regel hing aan .bk-hero h1 en pakt dus niet meer nu de hero .ff-hero heet. Hetzelfde merkroze als .ff-hero-title em op de homepage. */ .ff-hero-title .bk-plaats { color: var(--ff-magenta); } /* ---------- Eén display-stem: Archivo voor de koppen ---------- */ .bk-page h1, .bk-page h2, .bk-page h3, .bk-section-head h2, .bk-card h3, .bk-band-text h2, .bk-form-card h2 { font-family: var(--ff-display); letter-spacing: -0.02em; } /* ---------- Rubrieklabel: mono, geen blokje ---------- De bk-eyebrow was een roze pil, de --type-variant een label met een roze vierkantje ervoor. De homepage heeft dat blokje overal weggehaald: het kleine schrift in machinetaal is het onderscheid al. */ .bk-eyebrow, .bk-eyebrow--type { display: inline-block; background: none; padding: 0; border-radius: 0; font-family: var(--ff-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ff-ink-60); } .bk-eyebrow--type::before { content: none; } /* ---------- Knoppen: rechthoekig, zonder glow ---------- */ .bk-btn { border-radius: var(--ff-r-1); border-width: 1px; padding: 0.85rem 1.6rem; font-size: 0.95rem; transition: background-color var(--ff-dur-hover) var(--ff-ease), border-color var(--ff-dur-hover) var(--ff-ease), color var(--ff-dur-hover) var(--ff-ease); } .bk-btn-primary { background: var(--ff-magenta); box-shadow: none; } .bk-btn-primary:hover { background: var(--ff-magenta-ink); transform: none; } .bk-btn-ghost { border-color: var(--ff-rule); } .bk-btn-ghost:hover { border-color: var(--ff-ink); color: var(--ff-ink); transform: none; } /* ---------- Sectiekop: links, niet gecentreerd ---------- Een gecentreerde kop boven links uitgelijnde inhoud geeft twee leesranden. De homepage houdt één linkerlijn vast over de hele pagina. */ .bk-section { padding: 2.5rem 0; } .bk-section-head { text-align: left; max-width: none; margin: 0 0 1.5rem; } .bk-section-head h2 { color: var(--ff-ink); } .bk-section-head .bk-eyebrow { margin-bottom: 0.6rem; } /* Het gecentreerde streepje boven de contactsectie was decoratie; die sectie staat al los door haar eigen ruimte. */ .bk-section--cta::before { content: none; } /* ---------- Hero-beeld: een vel, geen zwevende kaart ---------- De schermafbeelding is bewijs, geen decoratie: vierkant, één haarlijn, geen slagschaduw. De witte rand van 4px eromheen was een lijstje om een foto. */ .bk-portrait, .bk-portrait--product { border-radius: 0; border: 1px solid var(--ff-rule-soft); box-shadow: none; } /* ---------- Kaarten: vierkante vellen met één haarlijn ---------- */ .bk-praktijk-rekening { background: var(--ff-sheet); border: 1px solid var(--ff-rule-soft); color: var(--ff-ink); } .bk-praktijk-rekening th, .bk-praktijk-rekening td { border-bottom: 1px solid var(--ff-rule-soft); } .bk-praktijk-rekening thead { font-size: 0.75rem; color: var(--ff-ink-60); } .bk-praktijk-rekening tbody th { font-weight: 500; } .bk-praktijk-rekening tfoot { font-weight: 700; } .bk-praktijk-rekening tfoot th, .bk-praktijk-rekening tfoot td { border-bottom: 0; } .bk-praktijk-rekening small, .bk-praktijk-noot, .bk-rolverdeling { color: var(--ff-ink-60); } .bk-praktijk-stappen li::marker { color: var(--ff-magenta-ink); font-weight: 600; } .bk-praktijk-link { color: var(--ff-magenta-ink); text-underline-offset: 4px; } .bk-card.bk-card--voorkeur { border-top: 3px solid var(--ff-magenta-ink); } .bk-pillars { gap: 1.25rem; } .bk-card { border-radius: 0; border: 1px solid var(--ff-rule-soft); background: var(--ff-sheet); box-shadow: none; padding: 1.75rem 1.6rem; transition: background-color var(--ff-dur-hover) var(--ff-ease), border-color var(--ff-dur-hover) var(--ff-ease); } .bk-card:hover { transform: none; background: #FAFBFC; border-color: var(--ff-rule); box-shadow: none; } .bk-card h3 { font-size: 1.15rem; color: var(--ff-ink); } /* Het sub-kopje boven een opsomming spreekt dezelfde machinetaal als de rubrieklabels; anders staan er twee soorten kleinkapitaal op één kaart. */ .bk-card p.bk-list-label { font-family: var(--ff-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; color: var(--ff-ink-60); margin: 1.5rem 0 0.4rem; } /* ---------- Specificatielijst ---------- */ .bk-spec-lijst li { border-top-color: var(--ff-rule-soft); font-size: 0.94rem; } .bk-spec-lijst li:last-child { border-bottom-color: var(--ff-rule-soft); } .bk-spec-lijst li::before { background: var(--ff-magenta); } ol.bk-spec-lijst li::before { font-family: var(--ff-mono); color: var(--ff-ink-60); } /* ---------- FAQ: een doorlopende hairline-stapel ---------- Weg: de losse afgeronde kaartjes met slagschaduw en de roze icoon-cirkel per vraag (die staat ook niet meer in de markup). Zes vragen zijn zes regels in één lijst, geen zes zwevende objecten. Dit is de volledige component, niet een correctie op propositie.css: de vragenlijst (templates/home/partials/_faq_lijst.html) staat ook op /service//, en die pagina laadt propositie.css niet. De basisregels zijn daarom hierheen verhuisd en meteen samengevouwen tot één set eindwaarden -- de afgeronde hoek, de slagschaduw en de roze open-rand zijn als declaratie verdwenen in plaats van te worden weggepoetst. De sectiehuls eromheen blijft van de pagina: bk-stramien op de propositiepagina's, het Bootstrap-grid met .section-header op /service//. */ .bk-details-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--ff-rule-soft); } .bk-details { border-bottom: 1px solid var(--ff-rule-soft); overflow: hidden; transition: background-color var(--ff-dur-hover) var(--ff-ease); } .bk-details:hover { background: #FAFBFC; } .bk-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1.05rem 0; font-weight: 600; color: var(--ff-ink); user-select: none; } .bk-details > summary::-webkit-details-marker { display: none; } .bk-details > summary:focus-visible { outline: 2px solid var(--ff-magenta); outline-offset: -2px; } .bk-details-title { flex: 1 1 auto; font-size: 1rem; } .bk-details-chevron { color: var(--ff-ink-40); font-size: 0.85rem; transition: transform var(--ff-dur-hover) var(--ff-ease); } .bk-details[open] .bk-details-chevron { transform: rotate(180deg); } .bk-details-body { padding: 0 3rem 1.25rem 0; color: var(--bk-text); line-height: 1.65; } .bk-details-body p { margin: 0 0 0.625rem; } .bk-details-body p:last-child { margin-bottom: 0; } .bk-details-body a { color: var(--ff-magenta-ink); text-decoration: none; font-weight: 600; } .bk-details-body a:hover { text-decoration: underline; } /* ---------- "Prijs op afspraak": een vel, geen gradient-blok ---------- */ .bk-band { background: var(--ff-sheet); color: var(--ff-ink); border: 1px solid var(--ff-rule-soft); border-radius: 0; padding: 1.75rem 1.6rem; gap: 1.5rem; } .bk-band-text h2 { color: var(--ff-ink); font-size: 1.25rem; } .bk-band-text p { color: #3d434c; } .bk-band-text .bk-band-example { color: var(--ff-ink-60); } .bk-band-text .bk-band-example strong { color: var(--ff-ink); } .bk-band-divider { border-top-color: var(--ff-rule-soft); } /* ---------- Contactblok ---------- */ .bk-form-card { border-radius: 0; border: 1px solid var(--ff-rule-soft); box-shadow: none; padding: 2.25rem 2rem; max-width: none; } .bk-form-card h2 { text-align: left; font-size: 1.5rem; color: var(--ff-ink); } .bk-form-card .bk-form-sub { text-align: left; color: #3d434c; max-width: 52ch; } /* De feitenregel onderaan spreekt machinetaal, net als op de homepage. */ .bk-form-note { text-align: left; font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--ff-ink-60); border-top: 1px solid var(--ff-rule-soft); padding-top: 0.9rem; margin-top: 1.5rem; } /* ---------- Bedankpagina ---------- Weg: de roze cirkel van 90px met een vinkje erin — hetzelfde icoon-stramien dat elders al is afgeschaft — en de gecentreerde tekst onder een links uitgelijnde kop. Het vinkje blijft, als een regel in de tekst. */ .bk-thanks { text-align: left; } .bk-thanks-icon { width: auto; height: auto; margin: 0 0 1.25rem; border-radius: 0; background: none; color: var(--ff-tie); display: block; font-size: 1.6rem; } .bk-thanks-contact { text-align: left; font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.02em; border-top-color: var(--ff-rule-soft); } .bk-thanks .bk-actions { margin-top: 1.75rem; } /* Invoervelden in het leadformulier hadden 12px ronding. */ .bk-form-card .form-control { border-radius: var(--ff-r-1); border-color: var(--ff-rule); } /* ---------- Kennisbankregels ---------- */ .bk-kb-regels { max-width: none; } .bk-kb-regel { border-top-color: var(--ff-rule-soft); } .bk-kb-regel:last-child { border-bottom-color: var(--ff-rule-soft); } .bk-kb-regel i { color: var(--ff-magenta-ink); } /* ---------- Footer ---------- */ .bk-footer { background: none; border-top: 1px solid var(--ff-rule-soft); margin-top: 3rem; text-align: left; color: var(--ff-ink-60); } .bk-footer a { color: var(--ff-ink); text-decoration: underline; text-decoration-color: var(--ff-rule); text-underline-offset: 3px; } .bk-footer a:hover { color: var(--ff-magenta-ink); text-decoration-color: var(--ff-magenta-ink); } /* ---------- Responsief ---------- Onder 992px staan hero-tekst en paneel onder elkaar (fenofin-2026.css); de secties houden de zijrand van de bk-container aan. */ @media (max-width: 991px) { .bk-section { padding: 2rem 0; } } @media (max-width: 575px) { .bk-card, .bk-band, .bk-form-card { padding: 1.35rem 1.15rem; } .bk-details-body { padding-right: 0; } } /* ---------- Tarievenkaarten en hun knop ---------- De offerteregel met de stippellijn blijft — dat patroon ís de signatuur van de prijspagina. Alleen de kaart eromheen wordt een vel: vierkant, één haarlijn, geen slagschaduw. De knop verliest zijn pilvorm. */ :root .pricing-card, :root .pricing-card--regel { border-radius: 0; border: 1px solid var(--ff-rule-soft); box-shadow: none; } .btn-pricing, .btn-pricing--compact { border-radius: var(--ff-r-1); box-shadow: none; } /* De prijzenstapel had een eigen, smallere breedte dan de sectiekop erboven. Twee verschillende linkerranden onder elkaar lezen als rommelig; compactheid hoort uit de rij-opbouw te komen, niet uit een afwijkende breedte. */ .pricing-stack { max-width: none; } /* ---------- Sectiekop: links, niet gecentreerd ---------- Een gecentreerde kop boven links uitgelijnde inhoud geeft twee leesranden. */ .section-header { text-align: left; } .section-header p { margin-left: 0; margin-right: 0; max-width: 52ch; } /* ---------- Service- en ontwikkelaarspagina ---------- Deze pagina's draaien op het prop-stramien uit propositie-story.css. */ /* De hero stond gecentreerd terwijl alles eronder links begint. */ .prop-story-hero-content { text-align: left; } .prop-story-hero-content h1 { font-family: var(--ff-display); letter-spacing: -0.02em; } .prop-story-hero-content > p { margin-left: 0; margin-right: 0; max-width: 62ch; } /* De stappenlijst: het cijfer stond in een roze cirkel op een roze verticale lijn, en de kaart ernaast zweefde met 16px ronding. Nu: het cijfer in machinetaal op de haarlijn, de kaart een vel. */ .prop-workflow-marker { border-radius: 0; border: none; background: none; font-family: var(--ff-mono); font-size: 0.8rem; font-weight: 500; color: var(--ff-ink-60); } .prop-workflow-content { border-radius: 0; border: 1px solid var(--ff-rule-soft); box-shadow: none; } /* Eén stap is als "uitgelicht" gemarkeerd: roze blokje, roze vlak. De taal kent maar één manier om nadruk te leggen — de haarlijn wordt sterker, verder niets. */ .prop-workflow-step.step-highlight .prop-workflow-marker { background: none; color: var(--ff-magenta-ink); font-weight: 500; } .prop-workflow-step.step-highlight .prop-workflow-content { background: var(--ff-sheet); border-color: var(--ff-rule); } /* ---------- Rich text uit de database ---------- ServiceFeature.description en InfoPage.content bevatten HTML met vaste klassen (highlight-box, info-box, warning-box). Die staan in de database, dus ze verdwijnen niet; ze worden hier omgebogen naar een terzijde met één haarlijn in plaats van een gekleurd vlak. */ .highlight-box, .info-box, .warning-box, :root .content-body .highlight-box, :root .content-body .info-box, :root .content-body .warning-box, :root .feature-description .highlight-box, .prop-workflow-content .feature-description .highlight-box, .about-me-portrait .info-box { background: none; border-radius: 0; border-left: 2px solid var(--ff-rule); padding-left: 1.25rem; } /* De notitie was een roze vlak met een roze balk ernaast. Eén haarlijn links is genoeg om te zeggen: dit hoort erbij, maar het is een terzijde. */ .api-intro-highlight { border-radius: 0; background: none; border-left: 2px solid var(--ff-rule); padding-left: 1.25rem; } /* Het mediapaneel naast de connector-tekst had 20px ronding, een roze getinte rand en een slagschaduw van 32px. Een vel met één haarlijn zegt hetzelfde. */ :root .connector-showcase-media { border-radius: 0; border: 1px solid var(--ff-rule-soft); box-shadow: none; } /* ---------- "Hoe het werkt"-slider ---------- slider.css stuurt bijna alles via tokens met fallback; home.css en propositie.css zetten die allebei apart. Hier staan ze één keer, in de laag die na allebei laadt. Wat niet via een token loopt — de 14px ronding van de afbeelding, de ronde pijlknoppen en het gecentreerde bijschrift — staat eronder. Let op: slider.css wordt door {% slider_assets %} ná deze laag geïnjecteerd, dus die overrides hebben een :root nodig om te winnen. */ :root .hiw-swiper { --slider-img-border: 1px solid var(--ff-rule-soft); --slider-img-shadow: none; --slider-eyebrow: var(--ff-ink-60); --slider-title: var(--ff-ink); --slider-text: #3d434c; --slider-accent: var(--ff-magenta); --slider-arrow-bg: var(--ff-sheet); --slider-arrow-border: var(--ff-rule); --slider-arrow-hover-bg: #FAFBFC; --slider-arrow-hover-border: var(--ff-ink); --slider-arrow-shadow: none; --slider-arrow-backdrop: none; } :root .hiw-slide-image img { border-radius: 0; } :root .hiw-swiper .swiper-button-prev, :root .hiw-swiper .swiper-button-next { border-radius: var(--ff-r-1); } :root .hiw-swiper .swiper-button-prev:hover, :root .hiw-swiper .swiper-button-next:hover { transform: none; } /* Het bijschrift stond gecentreerd onder een links uitgelijnde pagina. */ :root .hiw-slide-caption { text-align: left; margin: 0; } :root .hiw-slide-eyebrow { font-family: var(--ff-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; } :root .hiw-slide-caption h3 { font-family: var(--ff-display); letter-spacing: -0.02em; } /* ---------- Contact- en CTA-blokken ---------- De propositiepagina's hadden dit al: een vel met een haarlijn, links uitgelijnd, rechthoekige knoppen. De homepage (.contact-card) en de service- en ontwikkelaarspagina (.prop-cta-card) hielden nog 24px ronding, een gecentreerde tekst, een glas- of glow-effect en pilknoppen met blur. Dat waren de laatste vier slob-patronen op de site. */ :root .contact-card, :root .prop-cta-card { max-width: none; margin: 0; border-radius: 0; border: 1px solid var(--ff-rule-soft); background: var(--ff-sheet); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; text-align: left; padding: 2.25rem 2rem; } :root .contact-card:hover, :root .prop-cta-card:hover { box-shadow: none; } /* Gewicht en schaal van de sectiekoppen op de propositiepagina's (.bk-section-head h2). Stond op 1.5rem in gewicht 500: naast de 700 van elke andere Archivo-kop las het contactvel als een ander lettertype. */ .contact-card h3, .contact-titel, .prop-cta-card h2 { font-family: var(--ff-display); font-weight: 700; letter-spacing: -0.02em; color: var(--ff-ink); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 0.5rem; } .contact-sub { color: #3d434c; max-width: 52ch; margin: 0 0 1.5rem; } .contact-sub p { margin: 0; } /* De feitenregel onderaan het vel — dezelfde als .bk-form-note. */ .contact-note { font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--ff-ink-60); border-top: 1px solid var(--ff-rule-soft); padding-top: 0.9rem; margin: 1.5rem 0 0; } .contact-note-scheiding { color: var(--ff-rule); padding: 0 0.35rem; } /* De knoppen deelden de pilvorm en een backdrop-blur. */ .btn-whatsapp-modern, .btn-contact-secondary { border-radius: var(--ff-r-1); padding: 0.85rem 1.6rem; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .btn-whatsapp-modern:hover, .btn-contact-secondary:hover { transform: none; box-shadow: none; } .contact-actions, .cta-actions { justify-content: flex-start; } /* Blokken die alleen op sommige servicepagina's staan en daardoor bij de eerste ronde buiten beeld bleven: de upgrade-kaart met pil-CTA en de kennisbanklinks. De FAQ-items stonden hier ook; die zijn nu .bk-details en gedeeld. */ .upgrade-card, .kb-link-block, a.kb-link-block, .kb-verdieping-section .kb-link-block { border-radius: 0; border: 1px solid var(--ff-rule-soft); box-shadow: none; } .upgrade-card-cta { border-radius: var(--ff-r-1); box-shadow: none; } /* Losse onderdelen die per pagina nog afweken. Ze staan bij elkaar omdat ze dezelfde oorzaak hebben: een zwevende kaart of een icoon-cirkel. */ /* De schermafbeeldingen in de dienstverlening-sectie op de homepage. */ :root .dienst-split-media img { border-radius: 0; border: 1px solid var(--ff-rule-soft); box-shadow: none; } /* Een decoratieve gloed achter de tekstkaart op /info//. */ .content-card-glow { display: none; } /* Kennisbank: de ronde filterknop, het uitklappaneel van de nieuwsbrief en de kleine afrondingen op links en blokken. */ :root .kb-filter-toggle, :root .kb-nl-popover, :root .kb-nl-popover-input, :root .kb-nl-popover-btn, :root .kb-topbar-subscribe, :root .kb-sidebar-link { border-radius: 0; } :root .kb-nl-popover { border: 1px solid var(--ff-rule-soft); box-shadow: none; } /* De sociale iconen in de footer waren afgeronde vlakjes. */ :root .social-links a { border-radius: 0; } /* De codeblokken en stapkaarten op /ontwikkelaars/. Het donkere vlak van het codeblok blijft — dat is functioneel; de afronding niet. */ .dev-stap-card, .dev-codeblok { border-radius: 0; box-shadow: none; } .dev-stap-card { border-color: var(--ff-rule-soft); } /* ---------- Infopagina (/info//) ---------- */ /* De kop was een gradient van inkt naar roze, met de tekst zelf doorzichtig. Eén kleur, één lettertype, links — zoals overal. */ .page-hero h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--ff-ink); font-family: var(--ff-display); letter-spacing: -0.02em; } .page-hero .hero-content { text-align: left; } .page-hero .hero-content p { margin-left: 0; margin-right: 0; max-width: 62ch; } /* De tekstkaart was een zwevend blok met ronde hoeken. */ .content-card { border-radius: 0; border: 1px solid var(--ff-rule-soft); box-shadow: none; } /* Uitgevulde tekst met automatische afbreekstreepjes leest rafelig; de rechterrand mag ongelijk zijn. */ .content-body { hyphens: manual; } /* De kop in de tekst had een roze streep eronder over de tekstbreedte. De ruimte erboven zegt al genoeg dat er een nieuw onderdeel begint. */ .content-body h2 { display: block; padding-bottom: 0; border-bottom: none; font-family: var(--ff-display); letter-spacing: -0.02em; } /* Het portret zat in een cirkel met een roze rand van 3px en een roze gloed. */ .about-me-img, :root .about-me-portrait img { border-radius: 0; border: 1px solid var(--ff-rule-soft); box-shadow: none; max-width: 100%; margin-bottom: 1.5rem; } .about-me-portrait { text-align: left; } /* ========================================================================== DEEL 2 — de home-wereld (home, tarieven, service, ontwikkelaars, kennisbank) ========================================================================== */ /* ========================================================================== Connector-sectie: verdiepingslinks als rustige regel-links (ontwikkelaars- en servicepagina). De wrapper .connector-showcase-links stond alleen op de homepage; die heeft sinds 22-09-2026 het verdiepingsblok .ff-verdieping. ========================================================================== */ /* nowrap is de kern: met flex-wrap breekt de flexbox eerst de regel voordat hij de titel laat krimpen, en valt de pijl op een eigen regel eronder. De titel is daarom ook een echte span met min-width: 0 — een kale tekstnode wordt een anoniem flexitem met een max-content basis en krimpt niet mee. */ .connector-showcase-link { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 1rem; width: 100%; padding: 0.8rem 0.15rem; border-top: 1px solid var(--ff-rule-soft); color: var(--ff-ink); font-size: 0.95rem; font-weight: 500; text-align: left; text-decoration: none; transition: color var(--ff-dur-hover) var(--ff-ease); } .connector-showcase-link:last-child { border-bottom: 1px solid var(--ff-rule-soft); } .connector-showcase-link-titel { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .connector-showcase-link i { flex-shrink: 0; color: var(--ff-magenta-ink); font-size: 0.85rem; transition: transform var(--ff-dur-hover) var(--ff-ease); } .connector-showcase-link i.fa-arrow-right { margin-left: auto; } .connector-showcase-link:hover { color: var(--ff-magenta-ink); } .connector-showcase-link:hover i.fa-arrow-right { transform: translateX(3px); } .connector-showcase-link:focus-visible { outline: 2px solid var(--ff-magenta); outline-offset: 2px; border-radius: 2px; } /* ========================================================================== Voor-wie: gelijke, vierkante vellen. Staat op de homepage en op /service//. Weg: de ronde hoeken, de drie verschillende pasteltinten (wit / roze / indigo), de gecentreerde tekst en de drie verschillende pijlkleuren. Dat waren vier losse signalen die niets betekenden; nu is er per kaart nog maar één verschil, en dat is de inhoud. ========================================================================== */ html:root .voor-wie-grid--three { gap: 1.25rem; /* lucht tussen de blokken */ } html:root .voor-wie-card, html:root .voor-wie-card--bedrijven, html:root .voor-wie-card--accountants, html:root .voor-wie-card--uitbesteden { align-items: stretch; text-align: left; border-radius: 0; /* vierkant */ border: 1px solid var(--ff-rule-soft); /* elk blok zijn eigen haarlijn */ background: var(--ff-sheet); box-shadow: none; padding-bottom: 1.75rem; gap: 0.65rem; } html:root .voor-wie-card:hover, html:root .voor-wie-card--bedrijven:hover, html:root .voor-wie-card--accountants:hover { transform: none; background: #FAFBFC; border-color: var(--ff-rule); box-shadow: none; } /* Beeld: vierkante uitsnede met een haarlijn eronder, geen zoom-effect */ html:root .voor-wie-card > .voor-wie-title-card, html:root .voor-wie-card > .voor-wie-sub, html:root .voor-wie-card > .voor-wie-arrow { padding-left: 1.5rem; padding-right: 1.5rem; } html:root .voor-wie-title-card { font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ff-ink); text-align: center; } html:root .voor-wie-sub { max-width: none; font-size: 0.92rem; line-height: 1.55; } /* Eén pijlkleur voor alle drie */ html:root .voor-wie-card .voor-wie-arrow, html:root .voor-wie-card--bedrijven .voor-wie-arrow, html:root .voor-wie-card--accountants .voor-wie-arrow { color: var(--ff-magenta-ink); font-family: var(--ff-mono); font-size: 0.78rem; letter-spacing: 0.04em; padding-top: 1.25rem; text-align: right; } @media (max-width: 991px) { html:root .voor-wie-grid--three { gap: 1.25rem; } } /* ========================================================================== Eén display-stem. De hero staat in Archivo; als alleen die kop dat lettertype heeft en de rest Poppins blijft, lezen de secties als losse pagina's. Daarom krijgen alle sectiekoppen Archivo — body en knoppen blijven Poppins. ========================================================================== */ html:root .section-header h2, html:root .connector-showcase-title, html:root .dienst-split-title, html:root .voor-wie-title-card { font-family: var(--ff-display); letter-spacing: -0.02em; } /* En één inkt. De sectiekoppen kwamen uit het oude `--text-primary` (#1A1A2E) van home.css, terwijl de hero-kop in --ff-ink (#14161A) staat: onder elkaar net twee verschillende zwarten. */ html:root .section-header h2 { color: var(--ff-ink); } /* ========================================================================== Eén eyebrow-motief. De home-wereld had vier bijna-identieke varianten met een roze vierkantje ervoor; de hero en de roadmap gebruiken al het mono-rubrieklabel zonder blokje. Hier trekken we de rest gelijk: één motief in plaats van vier. ========================================================================== */ html:root .sectie-eyebrow, html:root .dienst-split-eyebrow, html:root .dienst-uitgelicht-eyebrow, html:root .connector-showcase-eyebrow { font-family: var(--ff-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ff-ink-60); background: none; } html:root .sectie-eyebrow::before, html:root .dienst-split-eyebrow::before, html:root .connector-showcase-eyebrow::before { content: none; } /* ========================================================================== Rubriekregel en roadmap — gedeeld door de homepage en de propositiepagina's (partial home/partials/_roadmap.html). Verhuisd uit home-pagina.css op 23-09-2026, toen de roadmap ook op de kantorenpagina kwam. ========================================================================== */ .ff-roadmap a:focus-visible { outline: 2px solid var(--ff-magenta); outline-offset: 2px; border-radius: 2px; } .ff-roadmap { padding: 4rem 0; } /* De roadmap deelt de maat van de rest van de pagina. Een eigen, smallere container gaf twee verschillende linker- en rechterranden onder elkaar — dan lijnt niets meer uit. De compactheid zit in de rij-opbouw, niet in een afwijkende breedte. */ .ff-rubriek { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--ff-rule); padding-top: 0.6rem; margin-bottom: 1.25rem; } .ff-rubriek > span:first-child { font-family: var(--ff-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ff-ink-60); } .ff-rubriek-meta { font-family: var(--ff-mono); font-size: 0.72rem; color: var(--ff-ink-40); } .ff-roadmap-groep { display: grid; grid-template-columns: 7rem 1fr; gap: 1.25rem; border-top: 1px solid var(--ff-rule-soft); padding: 1rem 0; } .ff-roadmap-groep:last-of-type { border-bottom: 1px solid var(--ff-rule-soft); } .ff-roadmap-periode { font-family: var(--ff-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ff-ink); padding-top: 0.3rem; white-space: nowrap; } .ff-roadmap-items { list-style: none; margin: 0; padding: 0; } .ff-roadmap-items li { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 0.28rem 0; } .ff-roadmap-item-tekst { font-family: var(--font-body, 'Poppins', sans-serif); font-size: 0.94rem; line-height: 1.45; color: var(--ff-ink); } .ff-status { font-family: var(--ff-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; } .ff-status--live { color: var(--ff-tie); } .ff-status--gepland { color: var(--ff-ink-60); } .ff-roadmap-voorbehoud { font-family: var(--ff-mono); font-size: 0.68rem; color: var(--ff-ink-40); margin: 0.85rem 0 0; } @media (max-width: 600px) { .ff-roadmap-groep { grid-template-columns: 1fr; gap: 0.5rem; } .ff-roadmap-items li { flex-direction: column; align-items: flex-start; gap: 0.15rem; } } /* ========================================================================== Kantoor-suite — hoofdstukindex en hoofdstukken (/propositie/accountantskantoren/) Inhoud: home/content/kantoor_suite.py; hoofdstuk-partial home/propositie/_kantoor_hoofdstuk.html. De index is een raster met de haarlijn als goot (zoals .ff-ingangen op de homepage); een hoofdstuk is een kop met mono-nummer, vier punten op een haarlijn en één beeld of slider. Geen kaarten, iconen of gecentreerde koppen. ========================================================================== */ .ff-hoofdstukken { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--ff-rule-soft); border: 1px solid var(--ff-rule-soft); } .ff-hoofdstukken li { background: var(--bk-bg); } .ff-hoofdstukken a { display: flex; flex-direction: column; gap: 0.2rem; height: 100%; padding: 1rem 1.1rem 1.15rem; color: var(--ff-ink); text-decoration: none; transition: background-color var(--ff-dur-hover) var(--ff-ease); } .ff-hoofdstukken a:hover { background: var(--ff-sheet); } .ff-hoofdstukken a:focus-visible { outline: 2px solid var(--ff-magenta); outline-offset: -2px; } .ff-hoofdstukken-nr { font-family: var(--ff-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ff-magenta-ink); } .ff-hoofdstukken-titel { font-family: var(--ff-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; } .ff-hoofdstukken-oms { font-size: 0.85rem; line-height: 1.45; color: var(--ff-ink-60); } .ff-hoofdstuk { border-top: 1px solid var(--ff-rule-soft); padding: 3.5rem 0; } /* Wint van .ff-roadmap (4rem) op het roadmaphoofdstuk: één ritme voor alle hoofdstukken. */ .ff-hoofdstuk.ff-roadmap { padding: 3.5rem 0; } .ff-hoofdstuk .bk-section-head { margin-bottom: 1.75rem; } .ff-hoofdstuk .bk-section-head p { max-width: 760px; margin: 0.75rem 0 0; line-height: 1.7; color: var(--bk-text); } .ff-punten { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; } .ff-punten li { border-top: 1px solid var(--ff-rule-soft); padding-top: 0.9rem; } .ff-punten h3 { font-family: var(--ff-display); font-size: 1.05rem; letter-spacing: -0.01em; margin: 0 0 0.4rem; color: var(--ff-ink); } .ff-punten p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--bk-text); } .ff-punten--kolom { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; } .ff-hoofdstuk-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem; align-items: start; } .ff-hoofdstuk-beeld { margin: 0; } .ff-hoofdstuk-beeld img { display: block; width: 100%; height: auto; border: 1px solid var(--ff-rule-soft); background: var(--ff-sheet); } .ff-hoofdstuk-beeld figcaption { margin-top: 0.6rem; font-family: var(--ff-mono); font-size: 0.72rem; color: var(--ff-ink-60); } .ff-hoofdstuk .bk-video { margin: 0 0 2rem; } .ff-hoofdstuk-kaarten { margin-bottom: 0; } .ff-hoofdstuk-sub { margin-top: 2.75rem; } .ff-hoofdstuk-subtitel { font-family: var(--ff-display); font-size: 1.25rem; letter-spacing: -0.01em; margin: 0 0 1rem; color: var(--ff-ink); } @media (max-width: 991px) { .ff-hoofdstukken { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .ff-hoofdstuk, .ff-hoofdstuk.ff-roadmap { padding: 2.5rem 0; } .ff-punten, .ff-hoofdstuk-duo { grid-template-columns: minmax(0, 1fr); } .ff-hoofdstuk-duo { gap: 1.5rem; } } @media (max-width: 420px) { .ff-hoofdstukken { grid-template-columns: minmax(0, 1fr); } .ff-hoofdstukken a { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0.6rem; padding: 0.75rem 0.9rem; } .ff-hoofdstukken-oms { flex-basis: 100%; } } /* ========================================================================== Boekhouderpagina (/propositie/boekhouder/) — sinds 23-09-2026 staan werkwijze, tarieven en "Over mij" zichtbaar op de pagina in plaats van in dichtgeklapte vragen; de sitelink-ankers wijzen nu naar secties. ========================================================================== */ .bk-stappen-vervolg { margin: 2rem 0 0.5rem; } .bk-band-text h3 { font-family: var(--ff-display); font-size: 1.2rem; letter-spacing: -0.01em; margin: 0 0 0.6rem; color: var(--ff-ink); } .bk-over { max-width: 760px; } .bk-over p { line-height: 1.7; color: var(--bk-text); } .bk-kantoor { font-style: normal; font-size: 0.92rem; color: var(--bk-text); margin: 0 0 1.25rem; padding: 0.75rem 0; border-top: 1px solid var(--ff-rule-soft); border-bottom: 1px solid var(--ff-rule-soft); } .bk-kantoor strong { font-family: var(--ff-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ff-ink-60); margin-right: 0.5rem; } .bk-kantoor a { color: var(--ff-magenta-ink); text-underline-offset: 4px; margin-left: 0.35rem; }