/* Vervolgpagina's: de sterrenhemel, een dichte kop en een tekstkolom. Alles staat onder :root.fm-vervolg, zodat de homepage niets van dit bestand merkt. Het menu en de krappe kop staan in site.css. Regels uit globaal.css die hier ook gelden, zijn overstemd met een zwaardere selector, niet met de volgorde. */ :root.fm-vervolg { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 6rem); } :root.fm-vervolg body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; } /* geselecteerde tekst is wit: de selectiekleur (in zwart het brons uit site.css, in de bewaarde paletten het roze uit globaal.css) ligt hier direct op de hemel, en gedempte tekst haalt daarop het contrast niet */ :root.fm-vervolg ::selection { color: var(--fm-wit); } /* De hemel. Het doek met de sterren (Hemel.astro) vult de laag; het is verborgen tot het script het heeft getekend. Daaronder, voor wie geen script of geen WebGL heeft, het verloop hieronder. */ :root.fm-vervolg .fm-sterren { display: block; width: 100%; height: 100%; } :root.fm-vervolg .fm-sterren[hidden] { display: none; } /* Op papier en bij afgedwongen kleuren (hoog contrast) geen doek: een doek is inhoud en geen achtergrond, dus het zou als donker vlak op elk vel komen, en achter de tekst blijven staan in de kleuren die de bezoeker zelf koos. */ @media print { :root.fm-vervolg .fm-sterren { display: none; } } @media (forced-colors: active) { :root.fm-vervolg .fm-sterren { display: none; } } /* het verloop: de vier luchtkleuren van het palet (Hemel.astro zet ze op de laag), met de stops van de hemel zonder WebGL. De site heeft één palet (zwart); de regels voor de andere twee blijven staan voor als ze terugkomen. */ :root.fm-vervolg .fm-hemel { position: fixed; left: 0; top: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; background: linear-gradient(180deg, var(--fm-lucht-schemering-1) 0%, var(--fm-lucht-schemering-2) 38%, var(--fm-lucht-schemering-3) 72%, var(--fm-lucht-schemering-4) 100%); } :root.fm-vervolg[data-palet="brons"] .fm-hemel { background: linear-gradient(180deg, var(--fm-lucht-brons-1) 0%, var(--fm-lucht-brons-2) 38%, var(--fm-lucht-brons-3) 72%, var(--fm-lucht-brons-4) 100%); } :root.fm-vervolg[data-palet="zwart"] .fm-hemel { background: linear-gradient(180deg, var(--fm-lucht-zwart-1) 0%, var(--fm-lucht-zwart-2) 38%, var(--fm-lucht-zwart-3) 72%, var(--fm-lucht-zwart-4) 100%); } /* naar de inhoud: alleen te zien zolang de koppeling focus heeft */ :root.fm-vervolg .fm-sprong { position: fixed; z-index: 4; left: max(16px, 4vw, env(safe-area-inset-left, 0px)); top: calc(env(safe-area-inset-top, 0px) + 14px); padding: 8px 18px; border-radius: 999px; background: var(--fm-wit); color: var(--fm-nacht); font-size: 0.95rem; font-weight: 500; text-decoration: none; } :root.fm-vervolg .fm-sprong:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* donkere tekst op een licht vlak: die blijft donker als ze geselecteerd is */ :root.fm-vervolg .fm-sprong::selection { color: var(--fm-nacht); } /* ook de tekst op een knop blijft donker: wit op brons is niet te lezen */ :root.fm-vervolg .fm-knop::selection { color: var(--fm-knop-tekst); } /* de kop: dicht tot onder de regel "Data & AI", zodat de tekst van de pagina er niet doorheen schuift. De zijmarges wijken voor de uitsparing van een telefoon op zijn kant; de pagina loopt daar door tot de rand (viewport-fit=cover). */ :root.fm-vervolg .fm-kop { background: linear-gradient(180deg, var(--fm-nacht) 0%, var(--fm-nacht) 72%, transparent 100%); padding-left: max(16px, 4vw, env(safe-area-inset-left, 0px)); padding-right: max(16px, 4vw, env(safe-area-inset-right, 0px)); } /* het menu onder 900 pixels (de grens staat in site.css, bij de rij): het paneel en de rij zonder script houden de zijmarges van de kop aan */ @media not all and (min-width: 900px), not all and (min-width: 56.25em) { :root.fm-vervolg .fm-menuknop:not([hidden]) + .fm-paginas { right: max(16px, 4vw, env(safe-area-inset-right, 0px)); } :root.fm-vervolg .fm-menuknop[hidden] + .fm-paginas { padding-left: max(16px, 4vw, env(safe-area-inset-left, 0px)); padding-right: max(16px, 4vw, env(safe-area-inset-right, 0px)); } /* zonder script staat de lijst als extra rij onder de kop. De tekst begint dan lager, en een aangesprongen kop of een link met focus blijft onder die rij vandaan. Basis.astro zet fm-script op zodra er een script draait. */ :root.fm-vervolg:not(.fm-script) { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 9.5rem); } :root.fm-vervolg:not(.fm-script) .fm-pagina { padding-top: calc(env(safe-area-inset-top, 0px) + 11rem); } } /* de tekstkolom: links gelijk met de voet, bovenaan vrij van de vaste kop, en ongeveer 75 tekens per regel */ :root.fm-vervolg .fm-pagina { flex: 1 0 auto; max-width: 36rem; color: var(--fm-zacht); overflow-wrap: break-word; padding: calc(env(safe-area-inset-top, 0px) + clamp(7rem, 16vh, 10rem)) max(16px, 5vw) 4rem; padding-left: max(16px, 5vw, env(safe-area-inset-left, 0px)); padding-right: max(16px, 5vw, env(safe-area-inset-right, 0px)); } :root.fm-vervolg .fm-pagina:focus { outline: none; } :root.fm-vervolg .fm-pagina h1, :root.fm-vervolg .fm-pagina h2, :root.fm-vervolg .fm-pagina h3, :root.fm-vervolg .fm-pagina h4 { color: var(--fm-wit); } /* kleiner dan op de homepage, en een lang woord als Privacyverklaring breekt af op een smalle telefoon */ :root.fm-vervolg .fm-pagina h1 { font-size: clamp(2rem, 4vw, 3.4rem); margin: 0 0 1.75rem; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; } :root.fm-vervolg .fm-pagina h2 { font-size: clamp(1.45rem, 2.3vw, 1.9rem); line-height: 1.15; margin: 2.75rem 0 0.9rem; } /* een tussenkop die Kennismaken heet krijgt id="kennismaken", en globaal.css maakt dat id ruim een scherm hoog (hoofdstuk 4 van de homepage) */ :root.fm-vervolg #kennismaken { min-height: 0; } /* alleen gewicht 400 en 500 zijn geladen: 500 is hier het zwaarste, ook voor vette tekst */ :root.fm-vervolg .fm-pagina h3, :root.fm-vervolg .fm-pagina h4 { font-family: var(--fm-display); font-weight: 500; font-size: 1.2rem; line-height: 1.25; margin: 2rem 0 0.6rem; } :root.fm-vervolg .fm-pagina strong, :root.fm-vervolg .fm-pagina b { font-weight: 500; color: var(--fm-wit); } :root.fm-vervolg .fm-pagina p, :root.fm-vervolg .fm-pagina ul, :root.fm-vervolg .fm-pagina ol { margin: 0 0 1.1em; } :root.fm-vervolg .fm-pagina ul, :root.fm-vervolg .fm-pagina ol { padding-left: 1.3em; } :root.fm-vervolg .fm-pagina li { margin: 0 0 0.4em; } :root.fm-vervolg .fm-pagina a { color: var(--fm-wit); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } :root.fm-vervolg .fm-pagina a:hover { text-decoration-thickness: 2px; } :root.fm-vervolg .fm-pagina code { font-family: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace; font-size: 0.9em; color: var(--fm-wit); } /* wat breder is dan de kolom: een afbeelding krimpt mee, een codeblok en een tabel schuiven zelf opzij (de pagina knipt af wat uitsteekt) */ :root.fm-vervolg .fm-pagina img { max-width: 100%; height: auto; } :root.fm-vervolg .fm-pagina pre { overflow-x: auto; } :root.fm-vervolg .fm-pagina table { display: block; max-width: 100%; overflow-x: auto; } /* het label boven de titel: zacht in plaats van gedempt. In zwart haalt gedempt onderaan de hemel het contrast wel (ongeveer 5,6 op 1), in de twee bewaarde paletten niet */ :root.fm-vervolg .fm-pagina .fm-label { margin: 0 0 1.1rem; color: var(--fm-zacht); } :root.fm-vervolg .fm-pagina > :last-child { margin-bottom: 0; } /* het e-mailadres met de kopieerknop (Mailadres.astro); de melding is zacht in plaats van gedempt, net als het label */ :root.fm-vervolg .fm-pagina .fm-contact { margin: 0 0 0.6rem; } :root.fm-vervolg .fm-pagina .fm-melding { color: var(--fm-zacht); } /* de knop is verborgen tot het script draait; globaal.css geeft de knop geen eigen display, maar dit houdt het zeker */ :root.fm-vervolg .fm-pagina .fm-knop[hidden] { display: none; } /* ---- het contactformulier (Contactformulier.astro) ---- */ :root.fm-vervolg .fm-pagina .fm-formulier { margin: 0 0 2.75rem; } :root.fm-vervolg .fm-pagina .fm-veld { margin: 0 0 1.1rem; } :root.fm-vervolg .fm-pagina .fm-veld label { display: block; margin: 0 0 0.4rem; font-size: 0.95rem; font-weight: 500; color: var(--fm-wit); } /* De velden: een dicht, donker vlak met een lichte rand. De rand is zacht en niet de dunne randkleur van het menu: die is op de hemel te zwak om een veld aan te herkennen. De letter is die van de pagina, niet die van de browser. */ :root.fm-vervolg .fm-pagina .fm-veld input, :root.fm-vervolg .fm-pagina .fm-veld textarea { display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 12px 14px; font: inherit; color: var(--fm-wit); background: var(--fm-nacht); border: 1px solid var(--fm-zacht); border-radius: 12px; } :root.fm-vervolg .fm-pagina .fm-veld textarea { min-height: 9rem; resize: vertical; } /* globaal.css geeft alleen links en knoppen een focusrand */ :root.fm-vervolg .fm-pagina .fm-veld input:focus-visible, :root.fm-vervolg .fm-pagina .fm-veld textarea:focus-visible { outline: 2px solid var(--fm-wit); outline-offset: 3px; } /* een veld met een fout: een dikkere, witte rand; de melding eronder zegt wat er mis is */ :root.fm-vervolg .fm-pagina .fm-veld [aria-invalid="true"] { border-color: var(--fm-wit); border-width: 2px; padding: 11px 13px; } :root.fm-vervolg .fm-pagina .fm-veldfout:not([hidden]) { display: block; margin: 0.4rem 0 0; font-size: 0.9rem; font-weight: 500; color: var(--fm-wit); } /* het veld dat leeg moet blijven: uit beeld, maar niet verborgen voor een schermlezer (het label zegt wat het is) */ :root.fm-vervolg .fm-pagina .fm-valkuil { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } :root.fm-vervolg .fm-pagina .fm-formuliernoot { font-size: 0.9rem; } :root.fm-vervolg .fm-pagina .fm-verstuur { margin: 0 0 0.6rem; } /* tijdens het versturen: de knop houdt de focus, maar oogt en werkt even niet */ :root.fm-vervolg .fm-pagina .fm-knop[aria-disabled="true"] { opacity: 0.6; cursor: default; } :root.fm-vervolg .fm-pagina .fm-verzonden { margin: 0 0 2.75rem; font-size: 1.15rem; line-height: 1.5; color: var(--fm-wit); } :root.fm-vervolg .fm-pagina .fm-verzonden:focus { outline: none; } /* de kaart om het formulier (Ronald, 14 oktober 2026: "zo'n contactformulier, in mijn stijl"): een donker, iets doorschijnend vlak met een zachte rand, "Laten we kennismaken." erboven, een brede bronzen knop en drie korte regels eronder */ :root.fm-vervolg .fm-pagina .fm-formulierkaart { max-width: 40rem; margin: 2rem 0 2.25rem; padding: clamp(1.4rem, 4vw, 2.5rem); box-sizing: border-box; border: 1px solid rgba(218, 200, 172, 0.22); border-radius: 26px; background: linear-gradient(165deg, rgba(30, 28, 26, 0.92), rgba(20, 20, 20, 0.88)); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(243, 241, 247, 0.05); } :root.fm-vervolg .fm-pagina .fm-formulierkaart h2 { margin: 0 0 0.6rem; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.08; } :root.fm-vervolg .fm-pagina .fm-formulierintro { margin: 0 0 1.75rem; color: var(--fm-zacht); } :root.fm-vervolg .fm-pagina .fm-formulierkaart .fm-formulier { margin: 0; } :root.fm-vervolg .fm-pagina .fm-verplicht { color: #DAC8AC; } :root.fm-vervolg .fm-pagina .fm-formulierkaart .fm-veld input, :root.fm-vervolg .fm-pagina .fm-formulierkaart .fm-veld textarea { background: rgba(10, 10, 10, 0.55); border-color: rgba(198, 203, 208, 0.45); transition: border-color .2s, box-shadow .2s; } :root.fm-vervolg .fm-pagina .fm-formulierkaart .fm-veld input::placeholder, :root.fm-vervolg .fm-pagina .fm-formulierkaart .fm-veld textarea::placeholder { color: #8C9196; opacity: 1; } /* bij focus een bronzen rand en gloed; de witte focusrand blijft erbuiten staan */ :root.fm-vervolg .fm-pagina .fm-formulierkaart .fm-veld input:focus, :root.fm-vervolg .fm-pagina .fm-formulierkaart .fm-veld textarea:focus { border-color: #B18D5D; box-shadow: 0 0 0 3px rgba(177, 141, 93, 0.25); } :root.fm-vervolg .fm-pagina .fm-formulierkaart .fm-verstuur { margin: 1.6rem 0 0.9rem; } :root.fm-vervolg .fm-pagina .fm-formulierkaart .fm-verstuur .fm-knop { width: 100%; padding: 15px 22px; font-size: 1rem; } :root.fm-vervolg .fm-pagina .fm-pijl { display: inline-block; margin-left: 0.4rem; transition: transform .25s; } :root.fm-vervolg .fm-pagina .fm-knop:hover .fm-pijl { transform: translateX(3px); } :root.fm-vervolg .fm-pagina .fm-vertrouwen { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0 0 0.4rem; padding: 0; list-style: none; font-size: 0.88rem; color: var(--fm-zacht); } :root.fm-vervolg .fm-pagina .fm-vertrouwen li { position: relative; margin: 0; padding-left: 0.9rem; } :root.fm-vervolg .fm-pagina .fm-vertrouwen li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: #B18D5D; } @media (prefers-reduced-motion: reduce) { :root.fm-vervolg .fm-pagina .fm-pijl { transition: none; } } /* de eerste alinea van een case: iets groter en wit */ :root.fm-vervolg .fm-pagina .fm-inleiding { font-size: 1.15rem; line-height: 1.5; color: var(--fm-wit); } /* het overzicht van de cases: een lijst zonder bolletjes, met een dunne lijn tussen de cases */ :root.fm-vervolg .fm-pagina .fm-werklijst { list-style: none; padding: 0; margin: 0; } :root.fm-vervolg .fm-pagina .fm-werklijst > li { margin: 0; padding: 1.75rem 0; border-top: 1px solid var(--fm-rand); } :root.fm-vervolg .fm-pagina .fm-werklijst > li:first-child { border-top: 0; padding-top: 0; } :root.fm-vervolg .fm-pagina .fm-werklijst h2 { margin: 0 0 0.4rem; } :root.fm-vervolg .fm-pagina .fm-werklijst p { margin: 0 0 0.5rem; } :root.fm-vervolg .fm-pagina .fm-werklijst p:last-child { margin-bottom: 0; } /* de klant en het jaar onder de titel van een case in het overzicht; bij een artikel de datum */ :root.fm-vervolg .fm-pagina .fm-werkregel { font-size: 0.9rem; letter-spacing: 0.04em; } /* de lijn tussen de vraag, de aanpak en het resultaat en het langere verhaal van een case */ :root.fm-vervolg .fm-pagina hr { border: 0; border-top: 1px solid var(--fm-rand); margin: 2.75rem 0; } /* de link terug onder een case of een artikel */ :root.fm-vervolg .fm-pagina .fm-terug { margin-top: 2.75rem; } /* ---- een artikel (src/pages/artikelen/[artikel].astro) ---- */ /* een citaat: een dunne bronzen lijn links, de tekst iets groter en wit */ :root.fm-vervolg .fm-pagina blockquote { margin: 1.75rem 0; padding: 0.1rem 0 0.1rem 1.25rem; border-left: 2px solid #B18D5D; font-size: 1.1rem; line-height: 1.5; color: var(--fm-wit); } :root.fm-vervolg .fm-pagina blockquote > :last-child { margin-bottom: 0; } /* een afbeelding met onderschrift */ :root.fm-vervolg .fm-pagina figure { margin: 2rem 0; } :root.fm-vervolg .fm-pagina figcaption { margin-top: 0.6rem; font-size: 0.9rem; } /* een tabel: dunne lijnen en ruimte in de cellen */ :root.fm-vervolg .fm-pagina th, :root.fm-vervolg .fm-pagina td { padding: 0.5rem 0.9rem 0.5rem 0; border-bottom: 1px solid var(--fm-rand); text-align: left; vertical-align: top; } :root.fm-vervolg .fm-pagina th { font-weight: 500; color: var(--fm-wit); } /* de regel onder een artikel dat later is bijgewerkt */ :root.fm-vervolg .fm-pagina .fm-bijgewerkt { margin: 2rem 0 0; font-size: 0.9rem; } /* ---- Pakketten (src/pages/pakketten.astro; tot 9 november 2026 Diensten): een inhoudsopgave, zoals voorin een tijdschrift ---- Elke dienst is een rij tussen dunne lijnen: een nummer in brons, de naam en de tekst. Onderaan een afsluiting met een knop naar Contact. - smal: nummer, naam en tekst onder elkaar; - vanaf 40em: het nummer in de marge, naam en tekst ernaast; - vanaf 60em: de pagina wordt breed (fm-pagina-breed) en nummer, naam en tekst staan naast elkaar op één grondlijn. Er beweegt niets en er is geen script. De nummers zijn versiering (aria-hidden): de lijst zelf zegt al de hoeveelste dienst het is. */ /* de rijen: een dunne lijn erboven, met een bronzen begin zo breed als het nummer eronder */ :root.fm-vervolg .fm-pagina .fm-diensten { list-style: none; margin: 2.5rem 0 0; padding: 0; } :root.fm-vervolg .fm-pagina .fm-dienst { position: relative; margin: 0; padding: 1.5rem 0 2rem; border-top: 1px solid var(--fm-rand); } :root.fm-vervolg .fm-pagina .fm-dienst::before { content: ""; position: absolute; left: 0; top: -1px; width: 2.75rem; height: 2px; background: var(--fm-glans); } /* het nummer: Jost, in het bronzen verloop (de klasse fm-glans uit globaal.css), kleiner dan de titel van de pagina. Het vlak is zo breed als de cijfers, zodat het hele verloop over de cijfers loopt. */ :root.fm-vervolg .fm-pagina .fm-dienst-nr { display: block; width: -moz-fit-content; width: fit-content; margin: 0 0 0.5rem; font-family: var(--fm-display); font-weight: 400; font-size: 1.75rem; line-height: 1; letter-spacing: -0.01em; } /* de naam van de dienst: de maat van elke tussenkop op de site. Een lang woord breekt af in plaats van uit te steken. */ :root.fm-vervolg .fm-pagina .fm-dienst-kop { margin: 0 0 0.9rem; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; } /* de tekst: bij meer dan één alinea is de eerste de inleiding van de dienst (wit en iets groter, net als bij een case) */ :root.fm-vervolg .fm-pagina .fm-dienst-tekst > :first-child { margin-top: 0; } :root.fm-vervolg .fm-pagina .fm-dienst-tekst > :last-child { margin-bottom: 0; } :root.fm-vervolg .fm-pagina .fm-dienst-tekst > p:first-child:not(:only-child) { font-size: 1.15rem; line-height: 1.5; color: var(--fm-wit); } /* de naam is een link naar de eigen pagina van de dienst (28 oktober 2026): wit, zonder streep, met een streep bij aanwijzen; onder de eerste alinea "Lees meer" in licht brons (#DAC8AC haalt hier ruim 9 op 1) */ :root.fm-vervolg .fm-pagina .fm-dienst-kop a { color: inherit; text-decoration: none; } :root.fm-vervolg .fm-pagina .fm-dienst-kop a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } :root.fm-vervolg .fm-pagina .fm-dienst-meer { margin: 1rem 0 0; } :root.fm-vervolg .fm-pagina .fm-dienst-meer a { color: #DAC8AC; font-weight: 500; text-decoration: none; } :root.fm-vervolg .fm-pagina .fm-dienst-meer a:hover { color: var(--fm-wit); } /* tekst die alleen een schermlezer voorleest ("Lees meer over Programmamanagement") */ :root.fm-vervolg .fm-pagina .fm-voorlezer { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* de afsluiting: een uitnodiging om kennis te maken, groter dan een dienst, en een knop naar Contact */ :root.fm-vervolg .fm-pagina .fm-dienstslot { margin: 1rem 0 0; padding-top: 2.75rem; border-top: 1px solid var(--fm-rand); } :root.fm-vervolg .fm-pagina .fm-dienstslot-kop { margin: 0 0 1.4rem; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1; } :root.fm-vervolg .fm-pagina .fm-dienstslot-actie { margin: 0; } /* een link als knop: de tekst is die van de knop (donker op brons), niet het wit met de streep van een gewone link */ :root.fm-vervolg .fm-pagina a.fm-knop { display: inline-block; color: var(--fm-knop-tekst); text-decoration: none; } /* vanaf 40em: het nummer in de marge, de naam en de tekst ernaast; nummer en naam staan op één grondlijn */ @media (min-width: 40em) { :root.fm-vervolg .fm-pagina .fm-dienst { display: grid; grid-template-columns: minmax(3.5rem, max-content) minmax(0, 1fr); column-gap: 1.5rem; grid-template-areas: "merk merk" "nr kop" ". tekst"; align-items: baseline; padding: 1.75rem 0 2.5rem; } :root.fm-vervolg .fm-pagina .fm-dienst::before { width: 3.5rem; } /* het merk van een voorbeeld of concept (alleen in de dev-server) blijft een klein vakje boven de rij */ :root.fm-vervolg .fm-pagina .fm-dienst > .fm-kladmerk { grid-area: merk; justify-self: start; } :root.fm-vervolg .fm-pagina .fm-dienst-nr { grid-area: nr; margin: 0; font-size: 2rem; } :root.fm-vervolg .fm-pagina .fm-dienst-kop { grid-area: kop; min-width: 0; } :root.fm-vervolg .fm-pagina .fm-dienst-tekst { grid-area: tekst; min-width: 0; } } /* vanaf 60em: de pagina wordt breed (alleen een pagina met fm-pagina-breed: Pakketten). De kop, de inleiding en een placeholder houden de gewone tekstkolom; elke rij heeft drie kolommen. */ @media (min-width: 60em) { /* een brede pagina loopt over de hele breedte, tussen dezelfde marges als de kop (Ronald, 14 oktober 2026; eerst 76rem) */ :root.fm-vervolg .fm-pagina.fm-pagina-breed { max-width: none; } :root.fm-vervolg .fm-pagina.fm-pagina-breed > :not(.fm-diensten):not(.fm-dienstslot):not(.fm-stappen):not(.fm-over):not(.fm-aanpak):not(.fm-aanpak-bron):not(.fm-dienstpagina):not(.fm-dienstpagina-verder):not(.fm-inzichten):not(.fm-waarom):not(.fm-artikel-met-video) { max-width: 36rem; } :root.fm-vervolg .fm-pagina .fm-dienst { grid-template-columns: minmax(4.5rem, max-content) minmax(0, 1fr) minmax(0, 1.25fr); column-gap: clamp(1.75rem, 3.4vw, 3.5rem); grid-template-areas: "merk merk merk" "nr kop tekst"; padding-bottom: 2.75rem; } :root.fm-vervolg .fm-pagina .fm-dienst::before { width: 4.5rem; } :root.fm-vervolg .fm-pagina .fm-dienst-nr { font-size: clamp(2rem, 3vw, 2.75rem); } :root.fm-vervolg .fm-pagina .fm-dienst-kop { margin-bottom: 0; } } /* ---- De pagina van een pakket (src/pages/pakketten/[pakket].astro; Ronald, 28 oktober 2026, toen voor een dienst) ---- Op de pc twee vlakken naast elkaar (Ronald: "miss met vlakken links en rechts? Wees creatief"): een bronzen vlak met de naam, de korte regel in licht brons, onderaan de knop naar Contact en de geweven triquetra groot en heel licht in de hoek (), en een donker vlak met de tekst, met het bronzen streepje van het overzicht bovenaan. Daaronder de andere pakketten als kaarten. Smaller dan 60em open, zonder vlakken: de vlakken onder elkaar waren "te blokkerig op de telefoon" (Ronald, 28 oktober 2026), en een kale kolom in het midden was "niet mooi vormgegeven". Het bronzen vlak is daar een zacht licht achter de naam, de triquetra komt rechtsonder naast de knop op uit een dunne lijn, de tekst begint met het bronzen streepje op die lijn, en de andere pakketten zijn een lijst tussen dunne lijnen, met de iconen van puntjes en een pijlpunt. Een aparte afsluiting "Laten we kennismaken." is er niet: de knop staat bovenaan, direct in beeld. */ :root.fm-vervolg .fm-pagina .fm-dienstpagina { display: grid; grid-template-columns: minmax(0, 1fr); } :root.fm-vervolg .fm-pagina .fm-dienstpagina-kop { position: relative; isolation: isolate; display: flex; flex-direction: column; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-teken { position: absolute; z-index: -1; height: auto; pointer-events: none; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-kop h1 { -webkit-hyphens: manual; hyphens: manual; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-kort { line-height: 1.45; color: #DAC8AC; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-actie { margin: auto 0 0; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-tekst { position: relative; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-tekst::before { content: ""; position: absolute; top: -1px; height: 2px; background: var(--fm-glans); } :root.fm-vervolg .fm-pagina .fm-dienstpagina-tekst > p:first-child:not(:only-child) { line-height: 1.5; color: var(--fm-wit); } :root.fm-vervolg .fm-pagina .fm-dienstpagina-tekst > :last-child { margin-bottom: 0; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-tekst > h2:first-child { margin-top: 0; } /* De inleiding en "Voor wie" in het bronzen vlak (9 november 2026): met alles rechts bleef dat vlak op de pc grotendeels leeg. "Voor wie" krijgt een klein label in licht brons, zoals "Andere pakketten". */ :root.fm-vervolg .fm-pagina .fm-dienstpagina-intro > p { margin: 0 0 1.5rem; line-height: 1.55; color: var(--fm-wit); } :root.fm-vervolg .fm-pagina .fm-dienstpagina-voorwie { margin: 0 0 2rem; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-voorwie h2 { margin: 0 0 0.45rem; font-family: var(--fm-display); font-weight: 500; font-size: 0.78rem; line-height: 1.4; letter-spacing: 0.3em; text-transform: uppercase; color: #DAC8AC; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-voorwie p { margin: 0; line-height: 1.55; color: var(--fm-zacht); } /* een woord met een streepje erin breekt in de kop niet af bij dat streepje (heleWoorden in src/data/pakketten.js) */ :root.fm-vervolg .fm-pagina .fm-heel { white-space: nowrap; } /* de andere pakketten: het icoon, de naam en de korte regel */ :root.fm-vervolg .fm-pagina .fm-dienstpagina-verderkop { margin: 0 0 1rem; font-family: var(--fm-display); font-weight: 500; font-size: 0.78rem; line-height: 1.4; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fm-zacht); } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder ul { margin: 0; padding: 0; list-style: none; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder li { margin: 0; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder a { box-sizing: border-box; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 0.9rem; align-items: start; color: var(--fm-wit); text-decoration: none; } :root.fm-vervolg .fm-pagina .fm-verder-icoon { grid-row: span 2; width: 24px; height: 24px; margin-top: 2px; fill: #C9A673; } /* een lange naam (Programmamanagement) breekt met een afbreekstreepje, niet zomaar midden in het woord */ :root.fm-vervolg .fm-pagina .fm-verder-naam { font-weight: 500; line-height: 1.3; -webkit-hyphens: auto; hyphens: auto; } :root.fm-vervolg .fm-pagina .fm-verder-kort { font-size: 0.9rem; line-height: 1.35; color: var(--fm-zacht); } /* smaller dan 60em: open, zonder vlakken */ @media not all and (min-width: 60em) { /* De kop loopt aan de zijkanten door tot de rand van de pagina (de marges van de tekstkolom), en begint hoger dan de naam, zodat het licht ruimte heeft om uit te doven. Op een telefoon is dat de rand van het beeld: daar knipt de kop de triquetra af, zonder dat de pagina opzij schuift. */ :root.fm-vervolg .fm-pagina .fm-dienstpagina-kop { overflow: hidden; margin: -3.5rem calc(-1 * max(16px, 5vw, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, 5vw, env(safe-area-inset-left, 0px))); padding: 3.5rem max(16px, 5vw, env(safe-area-inset-right, 0px)) 3rem max(16px, 5vw, env(safe-area-inset-left, 0px)); background: radial-gradient(70% 48% at 22% 46%, rgba(177, 141, 93, 0.34), rgba(177, 141, 93, 0.12) 52%, rgba(177, 141, 93, 0) 100%); } /* onderaan de kop een dunne lijn, van de tekstkolom tot de rand van het beeld; het bronzen streepje van de tekst staat erop */ :root.fm-vervolg .fm-pagina .fm-dienstpagina-kop::after { content: ""; position: absolute; left: max(16px, 5vw, env(safe-area-inset-left, 0px)); right: 0; bottom: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(218, 200, 172, 0.4), rgba(218, 200, 172, 0.16)); } /* De triquetra rechtsonder, naast de knop, zoals op de pc: hij komt op uit de lijn, en naar boven vervaagt hij voordat hij bij de naam en de korte regel komt. Zo loopt hij bij geen enkele dienst achter de tekst langs (rechtsboven staat bij Programmamanagement de naam tot aan de rand). De lijn en de rand van het beeld knippen hem af; zonder masker (een oude browser) staat hij er heel. */ :root.fm-vervolg .fm-pagina .fm-dienstpagina-teken { right: 0; bottom: 0; width: clamp(12rem, 66vw, 15.5rem); opacity: 0.16; transform: translate(26%, 10%); -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 55%); mask-image: linear-gradient(to top, #000 25%, transparent 55%); } /* De naam zo groot als past: Programmamanagement blijft ook op 320 pixels één woord op één regel. Hooguit zo breed als dat woord, zodat er op een tablet ruimte overblijft voor de triquetra ernaast. */ :root.fm-vervolg .fm-pagina .fm-dienstpagina-kop h1 { max-width: 10.5em; margin: 0 0 0.8rem; font-size: clamp(1.6rem, 8.4vw, 2.5rem); line-height: 1.08; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-kort { margin: 0 0 1.75rem; font-size: 1.15rem; } /* een dienst zonder korte regel: dan staat de knop niet tegen de naam aan */ :root.fm-vervolg .fm-pagina .fm-dienstpagina-kop h1 + .fm-dienstpagina-actie { margin-top: 1.2rem; } /* de tekst zonder vlak, met bovenaan het bronzen streepje op de lijn van de kop */ :root.fm-vervolg .fm-pagina .fm-dienstpagina-tekst { padding: 2rem 0 0; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-tekst::before { left: 0; width: 3.5rem; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-tekst > p:first-child:not(:only-child) { font-size: 1.15rem; } /* de andere pakketten: een lijst tussen dunne lijnen, met rechts een pijlpunt in brons; de bovenste lijn begint met hetzelfde streepje, zoals de rijen op het overzicht */ :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder { margin: 3.25rem 0 0; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder ul { position: relative; border-bottom: 1px solid rgba(218, 200, 172, 0.18); } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder ul::before { content: ""; position: absolute; left: 0; top: 0; width: 3.5rem; height: 2px; background: var(--fm-glans); pointer-events: none; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder li { border-top: 1px solid rgba(218, 200, 172, 0.18); } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder a { grid-template-columns: 24px minmax(0, 1fr) 0.5rem; padding: 1.05rem 0.3rem 1.1rem 0; } :root.fm-vervolg .fm-pagina .fm-verder-naam, :root.fm-vervolg .fm-pagina .fm-verder-kort { grid-column: 2; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder a::after { content: ""; grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 0.45rem; height: 0.45rem; border-top: 1.5px solid #C9A673; border-right: 1.5px solid #C9A673; transform: translateX(-2px) rotate(45deg); transition: transform .2s; } /* bij aanwijzen een streep onder de naam, en de pijlpunt wordt wit en schuift iets op; alleen met een muis, want op een aanraakscherm blijft aanwijzen na een tik hangen */ @media (hover: hover) { :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder a:hover .fm-verder-naam { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder a:hover::after { border-color: var(--fm-wit); transform: translateX(1px) rotate(45deg); } } /* bij de voorkeur voor minder beweging schuift de pijlpunt niet */ @media (prefers-reduced-motion: reduce) { :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder a::after { transition: none; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder a:hover::after { transform: translateX(-2px) rotate(45deg); } } /* Vanaf 40em (een tablet) is de tekstkolom smaller dan het beeld en eindigt de kop niet meer aan de rand van het beeld. Een afgeknipte triquetra gaf daar een harde rand midden in het beeld: hij staat er heel, naast de naam, en de lijn dooft uit vóór het einde van de kop. */ @media (min-width: 40em) { :root.fm-vervolg .fm-pagina .fm-dienstpagina-kop::after { right: max(16px, 5vw, env(safe-area-inset-right, 0px)); background: linear-gradient(90deg, rgba(218, 200, 172, 0.4), rgba(218, 200, 172, 0) 85%); } :root.fm-vervolg .fm-pagina .fm-dienstpagina-teken { top: 50%; bottom: auto; width: 15.5rem; max-height: calc(100% - 1.5rem); opacity: 0.14; transform: translateY(-50%); -webkit-mask-image: none; mask-image: none; background: radial-gradient(closest-side, rgba(218, 200, 172, 0.95), rgba(218, 200, 172, 0)); } } } /* vanaf 60em: de twee vlakken naast elkaar, even hoog, en de andere pakketten als kaarten */ @media (min-width: 60em) { :root.fm-vervolg .fm-pagina .fm-dienstpagina { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; max-width: 76rem; margin: 0 auto; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-kop { overflow: hidden; min-height: 22rem; padding: clamp(2.25rem, 3.5vw, 3.5rem); border: 1px solid rgba(218, 200, 172, 0.35); border-radius: 28px; background: radial-gradient(120% 95% at 0% 0%, rgba(177, 141, 93, 0.36), rgba(177, 141, 93, 0.11) 55%, rgba(177, 141, 93, 0.05)); box-shadow: 0 30px 80px -40px rgba(177, 141, 93, 0.5); } :root.fm-vervolg .fm-pagina .fm-dienstpagina-teken { right: -3.5rem; bottom: -4rem; width: 19rem; opacity: 0.13; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-kop h1 { margin: 0 0 1rem; font-size: clamp(2.2rem, 2.6vw, 2.8rem); } :root.fm-vervolg .fm-pagina .fm-dienstpagina-kort { margin: 0 0 2.25rem; font-size: 1.2rem; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-tekst { padding: clamp(2.25rem, 3.5vw, 3.5rem); border: 1px solid rgba(218, 200, 172, 0.16); border-radius: 28px; background: linear-gradient(160deg, rgba(243, 241, 247, 0.05), rgba(243, 241, 247, 0.015)); } :root.fm-vervolg .fm-pagina .fm-dienstpagina-tekst::before { left: clamp(2.25rem, 3.5vw, 3.5rem); width: 4.5rem; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-tekst > p:first-child:not(:only-child) { font-size: 1.15rem; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-tekst > * { max-width: 38rem; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder { max-width: 76rem; margin: 3.5rem auto 0; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder a { height: 100%; padding: 1.4rem 1.5rem; border: 1px solid rgba(218, 200, 172, 0.18); border-radius: 20px; background: linear-gradient(160deg, rgba(243, 241, 247, 0.045), rgba(243, 241, 247, 0.01)); transition: background-color .2s, border-color .2s, transform .2s; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder a:hover { border-color: rgba(218, 200, 172, 0.45); background: rgba(177, 141, 93, 0.12); transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder a { transition: none; } :root.fm-vervolg .fm-pagina .fm-dienstpagina-verder a:hover { transform: none; } } /* op papier blijft een dienst bij elkaar */ @media print { :root.fm-vervolg .fm-pagina .fm-dienst { break-inside: avoid; } } /* afgedwongen kleuren (hoog contrast): het verloop in de letters is weg, de tekst krijgt de kleur van de bezoeker; de knop krijgt een rand in plaats van het bronzen vlak */ @media (forced-colors: active) { :root.fm-vervolg .fm-pagina .fm-glans { background: none; color: inherit; -webkit-text-fill-color: currentColor; } :root.fm-vervolg .fm-pagina a.fm-knop { background: none; border: 1px solid; } } /* Een voorbeeld of een concept: alleen in de dev-server (src/data/collecties.js). Het merk is een rand met tekst, zodat het niet op een deel van de site lijkt. npm run controleer keurt de build af als dit erin staat. */ :root.fm-vervolg .fm-pagina .fm-kladmerk { display: inline-block; margin: 0 0 0.9rem; padding: 3px 10px; border: 1px dashed var(--fm-zacht); border-radius: 6px; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--fm-wit); } /* de voet: zachte tekst, want het scherm achter de voet is bovenaan nog dun; de zijmarges zijn die van de tekstkolom */ :root.fm-vervolg .fm-voet { color: var(--fm-zacht); align-items: center; padding-left: max(16px, 5vw, env(safe-area-inset-left, 0px)); padding-right: max(16px, 5vw, env(safe-area-inset-right, 0px)); } /* ---- Aanpak (src/pages/aanpak.astro): de triquetra als kaart (Ronald, 28 oktober 2026: "wil je dit ook opnieuw vormgeven?") ---- De triquetra van de drie stappen is zelf de uitleg. - Op de pc (vanaf 60em) staat hij groot in het midden, en elke stap staat bij zijn eigen lus: Confront rechts van de lus bovenaan, Delete rechtsonder, Amplify linksonder. Een dunne bronzen lijn met een punt loopt van de punt van de lus naar het woord, zoals de punten en lijnen op de homepage. Linksboven, naast de bovenste lus, de titel, de inleiding en de knop (Ronald: "de CTA moet direct zichtbaar zijn"). Het beeld is daar de knoop zonder woorden (): de woorden staan er als tekst omheen. - Op een telefoon en een tablet de titel, de inleiding en de knop in het midden, zonder de grote triquetra, en daaronder de stappen als open lijst in het midden, met een dunne draad van stap naar stap en naar de afsluiting. Boven elke stap een klein teken: de knoop, met de eigen lus als volle bronzen band. Geen vlakken: die van een dienst vond Ronald op de telefoon "te blokkerig". In de pagina blijft het een genummerde lijst in de volgorde Confront, Delete, Amplify. De stijl van een stap hangt aan zijn plaats (eerste, tweede, derde), niet aan zijn naam, en de kaart gaat uit van precies drie stappen. */ :root.fm-vervolg .fm-pagina .fm-aanpak-intro > p { font-size: 1.2rem; line-height: 1.55; color: var(--fm-wit); } /* de knop meteen onder de inleiding, en nog eens onderaan */ :root.fm-vervolg .fm-pagina .fm-aanpak-actie { margin: 1.75rem 0 0; } /* de beloftes onder de knop (Ronald, 12 november 2026: "dit naar aanpak aub"; daarvoor op het eerste scherm van de homepage). Op de telefoon en de tablet in het midden, zoals de titel en de knop */ :root.fm-vervolg .fm-pagina .fm-aanpak-tekst .fm-keurmerken { margin-top: 2rem; } @media not all and (min-width: 60em) { :root.fm-vervolg .fm-pagina .fm-aanpak-tekst .fm-keurmerken { justify-content: center; } } /* doet zelf niet mee in de opmaak. Het beeld (de knoop zonder woorden) staat alleen op de pc; op de telefoon en de tablet niet (Ronald, 5 november 2026: "dit mag op de telefoon weg"). Daar kiest een leeg plaatje, zodat de knoop niet voor niets wordt opgehaald. */ :root.fm-vervolg .fm-pagina .fm-aanpak-beeldvak { display: contents; } /* anders telt als een leeg vak mee in het raster */ :root.fm-vervolg .fm-pagina .fm-aanpak-beeldvak source { display: none; } :root.fm-vervolg .fm-pagina .fm-aanpak-beeld { display: block; } /* het laatste woord van de titel in brons, zoals de tweede regel van een kop op de homepage */ :root.fm-vervolg .fm-pagina .fm-aanpak-woord { background-image: var(--fm-glans); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } :root.fm-vervolg .fm-pagina .fm-stappen { list-style: none; margin: 0; padding: 0; } :root.fm-vervolg .fm-pagina .fm-stap { position: relative; margin: 0; } :root.fm-vervolg .fm-pagina .fm-stap h2 { margin: 0 0 0.7rem; font-size: 1.5rem; line-height: 1.2; } /* het Engelse woord klein in licht brons boven de kop, zoals de woorden in de triquetra (#DAC8AC haalt op de hemel ruim 9 op 1) */ :root.fm-vervolg .fm-pagina .fm-stap-label { display: block; margin: 0 0 0.55rem; font-family: var(--fm-display); font-weight: 500; font-size: 0.75rem; line-height: 1.3; letter-spacing: 0.3em; text-transform: uppercase; color: #DAC8AC; } /* één korte zin per stap (Ronald: "slordig, veel tekst"), zonder een los woord op de laatste regel */ :root.fm-vervolg .fm-pagina .fm-stap > h2 + p { margin: 0; color: var(--fm-zacht); font-size: 1.02rem; line-height: 1.55; text-wrap: pretty; } :root.fm-vervolg .fm-pagina .fm-stap > h2 + p ~ p { margin: 0.8rem 0 0; text-wrap: pretty; } /* Meer tekst bij een stap staat er pas vanaf 80em: op de telefoon wilde Ronald het niet (20 oktober 2026: "op de pc mag er wel wat meer tekst staan, op de mobiele versie niet"), en op een smal pc-scherm past het niet naast de lus. */ @media not all and (min-width: 80em) { :root.fm-vervolg .fm-pagina .fm-stap > h2 + p ~ * { display: none; } } /* de afsluiting en de bron */ :root.fm-vervolg .fm-pagina .fm-aanpak-bron { margin: 2.5rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--fm-zacht); max-width: 40rem; text-wrap: pretty; } :root.fm-vervolg .fm-pagina .fm-aanpak-bron cite { font-style: italic; } /* Het teken boven een stap (alleen op de telefoon; op de pc is de grote knoop de kaart): de knoop klein, als dunne lijn in licht brons, met de eigen lus als volle bronzen band met gloed, zoals Amplify in het grote beeld (Ronald, 5 november 2026: "maak de icoontjes bij confront en delete ook in deze style"; eerst was Confront wit en open en Delete brons in streepjes). Elke stap heeft dezelfde tekening; de plaats van de stap kiest welke lus oplicht. De lichte lus ligt bovenop en houdt op vóór de lus waar hij onderdoor gaat, zoals in het logo. De maten staan in de eenheden van de tekening (ongeveer 830 breed): 84 is de volle band. */ :root.fm-vervolg .fm-pagina .fm-stap-lus { display: none; fill: none; } :root.fm-vervolg .fm-pagina .fm-lus-zacht { stroke: #DAC8AC; stroke-width: 14; opacity: 0.42; } :root.fm-vervolg .fm-pagina .fm-lus-licht { stroke: #E3C495; stroke-width: 84; } :root.fm-vervolg .fm-pagina .fm-lus-licht > path { display: none; } :root.fm-vervolg .fm-pagina .fm-stap:nth-child(1) .fm-lus-zacht > .fm-lus-confront, :root.fm-vervolg .fm-pagina .fm-stap:nth-child(2) .fm-lus-zacht > .fm-lus-delete, :root.fm-vervolg .fm-pagina .fm-stap:nth-child(3) .fm-lus-zacht > .fm-lus-amplify { display: none; } :root.fm-vervolg .fm-pagina .fm-stap:nth-child(1) .fm-lus-licht > .fm-lus-confront, :root.fm-vervolg .fm-pagina .fm-stap:nth-child(2) .fm-lus-licht > .fm-lus-delete, :root.fm-vervolg .fm-pagina .fm-stap:nth-child(3) .fm-lus-licht > .fm-lus-amplify { display: inline; } /* De telefoon en de tablet (smaller dan 60em). Bovenaan de titel, de inleiding en de knop in het midden, met het laatste woord van de titel in brons; maten als in het tekstblok van de homepage. Tot 5 november 2026 stond daarboven de grote triquetra met de woorden en vulde dat het eerste scherm, met onderaan "Scroll verder" (Ronald: "dit mag op de telefoon weg"). Nu volgen de stappen meteen. */ @media not all and (min-width: 60em) { /* Alles staat hier in het midden, dus ook de kolom zelf: op een tablet stond die links in het beeld. Met marges op auto wordt de kolom (een flexvak in body) zo smal als zijn inhoud; de breedte houdt hem op 36rem, binnen de zijmarges. */ :root.fm-vervolg .fm-pagina:has(> .fm-aanpak) { --fm-kolom: 36rem; margin-left: auto; margin-right: auto; width: min(var(--fm-kolom), 100% - max(16px, 5vw, env(safe-area-inset-left, 0px)) - max(16px, 5vw, env(safe-area-inset-right, 0px))); } :root.fm-vervolg .fm-pagina .fm-aanpak-kop { display: flex; flex-direction: column; align-items: center; text-align: center; } :root.fm-vervolg .fm-pagina .fm-aanpak-beeld { display: none; } :root.fm-vervolg .fm-pagina .fm-aanpak-tekst { display: flex; flex-direction: column; align-items: center; gap: 16px; } :root.fm-vervolg .fm-pagina .fm-aanpak-tekst > * { margin: 0; } /* in het midden: de letterafstand staat ook achter de laatste letter, en zonder deze inspringing staat het woord iets links */ :root.fm-vervolg .fm-pagina .fm-aanpak-tekst .fm-label, :root.fm-vervolg .fm-pagina .fm-stap-label { text-indent: 0.3em; } :root.fm-vervolg .fm-pagina .fm-aanpak-tekst h1 { font-size: 2.5rem; } /* even lange regels, zonder een los woord als "AI." op de laatste regel */ :root.fm-vervolg .fm-pagina .fm-aanpak-intro > p { font-size: 1rem; line-height: 1.5; color: var(--fm-zacht); max-width: 34ch; margin: 0 auto 0.6em; text-wrap: balance; } :root.fm-vervolg .fm-pagina .fm-aanpak-intro > p:last-child { margin-bottom: 0; } /* Dan de stappen: een open lijst in het midden, zonder vlakken. Een dunne draad loopt van stap naar stap en daarna naar de afsluiting, zoals de lijn door de knoop. Alleen de korte zin (zie boven). */ :root.fm-vervolg .fm-pagina .fm-stappen { max-width: 30rem; margin: 0 auto; padding-top: 2.5rem; text-align: center; } :root.fm-vervolg .fm-pagina .fm-stap { padding-bottom: 5.25rem; } :root.fm-vervolg .fm-pagina .fm-stap::after { content: ""; position: absolute; left: calc(50% - 0.5px); bottom: 1.2rem; width: 1px; height: 2.9rem; background: linear-gradient(180deg, rgba(218, 200, 172, 0.6), rgba(218, 200, 172, 0.06)); } /* elk teken gloeit, zoals Amplify in het grote beeld, en achter elke stap ligt een zachte gloed, zonder rand */ :root.fm-vervolg .fm-pagina .fm-stap-lus { display: block; width: 5rem; height: auto; margin: 0 auto 0.9rem; overflow: visible; --fm-lus-gloed: brightness(1) drop-shadow(0 0 7px rgba(224, 168, 102, 0.6)); filter: var(--fm-lus-gloed); } :root.fm-vervolg .fm-pagina .fm-stap { background: radial-gradient(closest-side at 50% 38%, rgba(224, 168, 102, 0.13), rgba(224, 168, 102, 0.04) 60%, rgba(224, 168, 102, 0)); } :root.fm-vervolg .fm-pagina .fm-stap > h2 + p { max-width: 31ch; margin-inline: auto; } :root.fm-vervolg .fm-pagina .fm-aanpak-slot { margin: 0 auto; padding-top: 0; border-top: 0; text-align: center; } :root.fm-vervolg .fm-pagina .fm-aanpak-bron { margin: 3rem auto 0; max-width: 30rem; text-align: center; } } /* een tablet staand: de letters iets groter */ @media not all and (min-width: 60em) { @media (min-width: 36em) and (min-height: 50em) { :root.fm-vervolg .fm-pagina .fm-aanpak-tekst h1 { font-size: 3.4rem; } :root.fm-vervolg .fm-pagina .fm-aanpak-intro > p { font-size: 1.12rem; max-width: 36ch; } } } /* afgedwongen kleuren (hoog contrast): zonder het verloop zou het bronzen woord doorzichtig blijven, net als bij fm-glans */ @media (forced-colors: active) { :root.fm-vervolg .fm-pagina .fm-aanpak-woord { background: none; color: inherit; -webkit-text-fill-color: currentColor; } } /* De pc (vanaf 60em): de kaart. De maten van de knoop staan in --fm-k (de breedte van het beeld) en --fm-kh (de hoogte, uit de verhouding van het beeld, 0,912). De punten van de lussen liggen op vaste plaatsen in dat beeld: de bovenste punt op 0,0668 van de hoogte, de twee onderste op 0,9007 van de hoogte en 0,0609 van de rand. Dat geldt voor de knoop met een marge van 46 rond de band (triquetra-drie-stappen-knoop.svg); maak je hem met een andere marge, reken die getallen dan opnieuw uit. 0,4875rem is de halve regel van het Engelse woord: de lijn loopt door het midden van die regel. */ @media (min-width: 60em) { :root.fm-vervolg .fm-pagina .fm-aanpak { --fm-k: clamp(21rem, 36vw, 40rem); --fm-kh: calc(var(--fm-k) * 0.912); --fm-g: clamp(2rem, 3.2vw, 4rem); max-width: 92rem; margin: 0 auto; } /* De titel staat in de kolom links van de knoop, boven Amplify. Op een smal scherm is die kolom smal; daar is alles iets kleiner, zodat de titel boven de onderste punten blijft. Het label blijft op één regel (het mag in de lege hoek naast de bovenste lus uitlopen). */ :root.fm-vervolg .fm-pagina .fm-aanpak-tekst .fm-label { line-height: 1.3; white-space: nowrap; margin-bottom: clamp(0.8rem, 1.2vw, 1.1rem); } :root.fm-vervolg .fm-pagina .fm-aanpak-tekst h1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); margin: 0 0 clamp(0.9rem, 1.4vw, 1.25rem); } :root.fm-vervolg .fm-pagina .fm-aanpak-intro > p { margin: 0; max-width: 30rem; font-size: clamp(0.95rem, 1.25vw, 1.2rem); line-height: 1.5; text-wrap: pretty; } :root.fm-vervolg .fm-pagina .fm-aanpak-actie { margin-top: clamp(1.1rem, 1.9vw, 1.75rem); } :root.fm-vervolg .fm-pagina .fm-stap h2 { font-size: clamp(1.3rem, 1.75vw, 1.65rem); margin-bottom: 0.6rem; } :root.fm-vervolg .fm-pagina .fm-stap > p { max-width: 24rem; font-size: clamp(0.97rem, 1.05vw, 1.08rem); } /* de afsluiting als rij, de kop links en de knop rechts, met op de lijn erboven het bronzen streepje van de pagina van een dienst */ :root.fm-vervolg .fm-pagina .fm-aanpak-slot { position: relative; max-width: 92rem; margin: clamp(3rem, 7vh, 5rem) auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 3rem; } :root.fm-vervolg .fm-pagina .fm-aanpak-slot::before { content: ""; position: absolute; left: 0; top: -1px; width: 4.5rem; height: 2px; background: var(--fm-glans); } :root.fm-vervolg .fm-pagina .fm-aanpak-slot .fm-dienstslot-kop { margin: 0; } :root.fm-vervolg .fm-pagina .fm-aanpak-bron { max-width: 92rem; margin: 1.75rem auto 0; } } @media (min-width: 60em) { @supports (grid-template-rows: subgrid) { /* drie kolommen (links, de knoop, rechts) en twee rijen: de bovenste rij loopt tot de hoogte van de onderste punten, zodat Delete en Amplify daar beginnen. De lijst ligt over het hele raster (subgrid), zodat elke stap in zijn eigen vak staat. */ :root.fm-vervolg .fm-pagina .fm-aanpak { display: grid; column-gap: var(--fm-g); align-content: start; grid-template-columns: [links] minmax(0, 1fr) [knoop] var(--fm-k) [rechts] minmax(0, 1fr); grid-template-rows: [boven] minmax(calc(var(--fm-kh) * 0.9007 - 0.4875rem), auto) [onder] auto; } :root.fm-vervolg .fm-pagina .fm-aanpak-kop { display: contents; } /* de titel ligt boven de lijst (z-index), anders vangt de lijst de klik op de knop */ :root.fm-vervolg .fm-pagina .fm-aanpak-tekst { grid-column: links; grid-row: boven; align-self: start; z-index: 1; padding: calc(var(--fm-kh) * 0.0668 - 0.4875rem) 0 1rem; } :root.fm-vervolg .fm-pagina .fm-aanpak-beeld { grid-column: knoop; grid-row: boven / span 2; align-self: start; width: var(--fm-k); height: var(--fm-kh); max-width: none; margin: 0; } :root.fm-vervolg .fm-pagina .fm-stappen { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } /* --fm-lijn: hoe ver de lijn vanaf de kant van de tekst doorloopt tot vlak bij de punt van de lus; --fm-punt: de kleur van de punt bij de lus, die van de lus zelf (wit bij Confront, brons bij Delete, warm en iets groter bij Amplify) */ :root.fm-vervolg .fm-pagina .fm-stap:nth-child(1) { grid-column: rechts; grid-row: boven; padding-top: calc(var(--fm-kh) * 0.0668 - 0.4875rem); --fm-lijn: calc(var(--fm-g) + var(--fm-k) * 0.5 - 0.8rem); --fm-punt: #F3F1F7; } :root.fm-vervolg .fm-pagina .fm-stap:nth-child(2) { grid-column: rechts; grid-row: onder; --fm-lijn: calc(var(--fm-g) + var(--fm-k) * 0.0609 - 0.55rem); --fm-punt: #EEDFC6; } :root.fm-vervolg .fm-pagina .fm-stap:nth-child(3) { grid-column: links; grid-row: onder; --fm-lijn: calc(var(--fm-g) + var(--fm-k) * 0.0609 - 0.55rem); --fm-punt: #F3D3A4; } :root.fm-vervolg .fm-pagina .fm-stap .fm-stap-label { display: flex; align-items: center; margin-bottom: 0.7rem; } /* De lijn: rechts komt hij van links, met de punt bij de lus; links (Amplify) loopt hij na het woord door naar rechts. De bovenste laag is het licht dat bij beweging van de lus naar het woord loopt (zie onder); stil ligt het buiten de lijn. */ :root.fm-vervolg .fm-pagina .fm-stap { --fm-lichtje: radial-gradient(closest-side, rgba(255, 246, 230, 0.95), rgba(255, 225, 176, 0.45) 45%, rgba(255, 225, 176, 0)); } :root.fm-vervolg .fm-pagina .fm-stap:nth-child(-n+2) .fm-stap-label::before { content: ""; flex: none; height: 9px; width: calc(var(--fm-lijn) - 0.9rem); margin: 0 0.9rem 0 calc(-1 * var(--fm-lijn)); background: var(--fm-lichtje) -3rem center / 3rem 9px no-repeat, radial-gradient(circle closest-side, var(--fm-punt) 0 50%, transparent 100%) left center / 9px 9px no-repeat, linear-gradient(90deg, rgba(218, 200, 172, 0.75), rgba(218, 200, 172, 0.3)) right center / calc(100% - 4.5px) 1px no-repeat; } :root.fm-vervolg .fm-pagina .fm-stap:nth-child(3) .fm-stap-label::after { content: ""; flex: 1 1 auto; min-width: 1.5rem; height: 11px; margin: 0 calc(-1 * var(--fm-lijn)) 0 0.9rem; background: var(--fm-lichtje) calc(100% + 3rem) center / 3rem 9px no-repeat, radial-gradient(circle closest-side, var(--fm-punt) 0 50%, transparent 100%) right center / 11px 11px no-repeat, linear-gradient(270deg, rgba(218, 200, 172, 0.75), rgba(218, 200, 172, 0.3)) left center / calc(100% - 5.5px) 1px no-repeat; } /* Tussen 60 en 64em is de kolom naast de knoop te smal voor de titel: die staat daar boven de kaart, over de hele breedte. Op een staand scherm (een iPad Pro staand) ook: daar is ruimte in de hoogte, en dan mag de knoop groter (zie onder). */ @media not all and (min-width: 64em), (max-aspect-ratio: 1/1) { :root.fm-vervolg .fm-pagina .fm-aanpak { grid-template-rows: [kop] auto [boven] minmax(calc(var(--fm-kh) * 0.9007 - 0.4875rem), auto) [onder] auto; } :root.fm-vervolg .fm-pagina .fm-aanpak-tekst { grid-column: 1 / -1; grid-row: kop; padding: 0 0 clamp(2.5rem, 6vh, 3.5rem); } :root.fm-vervolg .fm-pagina .fm-aanpak-tekst h1 { font-size: 2.6rem; } :root.fm-vervolg .fm-pagina .fm-aanpak-intro > p { max-width: 34rem; font-size: 1.08rem; } :root.fm-vervolg .fm-pagina .fm-stappen { grid-row: boven / -1; } } } /* een oudere browser zonder subgrid: de titel en de knoop naast elkaar, de stappen in drie kolommen eronder */ @supports not (grid-template-rows: subgrid) { :root.fm-vervolg .fm-pagina .fm-aanpak-kop { display: grid; grid-template-columns: minmax(0, 1fr) var(--fm-k); column-gap: var(--fm-g); align-items: center; } :root.fm-vervolg .fm-pagina .fm-aanpak-beeld { width: 100%; height: auto; } :root.fm-vervolg .fm-pagina .fm-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.25rem; margin-top: 3.5rem; } } } /* Op een liggend scherm vult de kaart het eerste scherm, net boven het midden van de hoogte (de ruimte eronder is 6rem groter), en komt de afsluiting daaronder. Op een staand scherm niet: daar bleef anders een groot stuk lege hemel onder de kaart. Daar staat de titel erboven en is de knoop groter, want de kolommen ernaast hoeven alleen de stappen te houden. */ @media (min-width: 60em) and (max-aspect-ratio: 1/1) { :root.fm-vervolg .fm-pagina .fm-aanpak { --fm-k: clamp(21rem, 42vw, 40rem); } } @media (min-width: 60em) and (min-aspect-ratio: 1/1) { @supports (grid-template-rows: subgrid) { :root.fm-vervolg .fm-pagina .fm-aanpak { min-height: calc(100vh - clamp(7rem, 16vh, 10rem) - 7.5rem); min-height: calc(100svh - clamp(7rem, 16svh, 10rem) - 7.5rem); padding-bottom: 6rem; align-content: center; } } } /* Een licht loopt van stap naar stap (Ronald, 14 oktober 2026), alleen bij beweging. Eén ronde duurt 6 seconden, 2 per stap (--i is het nummer van de stap; de procenten in de keyframes gaan uit van drie stappen). Na drie rondes staat alles stil: iets dat langer beweegt, moet je kunnen stoppen (WCAG 2.2.2). Bij de voorkeur voor minder beweging gebeurt er niets. - Op de telefoon licht het teken op en glijdt een lichtje over de draad naar de volgende stap; na Amplify naar de afsluiting. - Op de pc groeit eerst elke lijn uit de punt van zijn lus, op het moment dat het beeld die lus tekent (het beeld tekent zich in 5 seconden: Confront, Delete, Amplify). De tekst staat er meteen. Daarna loopt het licht van de lus naar het woord. */ @media not all and (min-width: 60em) { @media (prefers-reduced-motion: no-preference) { :root.fm-vervolg .fm-pagina .fm-stap-lus { animation: fm-stap-licht 6s ease-in-out calc(0.6s + var(--i, 0) * 2s) 3 both; } :root.fm-vervolg .fm-pagina .fm-stap::before { content: ""; position: absolute; left: calc(50% - 1.5px); bottom: 1.2rem; width: 3px; height: 2.9rem; pointer-events: none; background: linear-gradient(180deg, rgba(255, 241, 218, 0), #FFF1DA 50%, rgba(255, 241, 218, 0)) no-repeat 0 -40% / 100% 30%; filter: drop-shadow(0 0 4px rgba(255, 225, 176, 0.9)); opacity: 0; animation: fm-stap-loop-y 6s linear calc(0.6s + var(--i, 0) * 2s) 3 both; } } } @media (min-width: 60em) and (prefers-reduced-motion: no-preference) { @supports (grid-template-rows: subgrid) { :root.fm-vervolg .fm-pagina .fm-stap:nth-child(1) { --fm-wanneer: 0.6s; } :root.fm-vervolg .fm-pagina .fm-stap:nth-child(2) { --fm-wanneer: 1.8s; } :root.fm-vervolg .fm-pagina .fm-stap:nth-child(3) { --fm-wanneer: 3s; } :root.fm-vervolg .fm-pagina .fm-stap:nth-child(-n+2) .fm-stap-label::before { transform-origin: left center; animation: fm-stap-lijn 0.9s cubic-bezier(0.45, 0, 0.25, 1) var(--fm-wanneer, 0s) both, fm-lijn-licht-heen 6s linear calc(4.6s + var(--i, 0) * 2s) 3 both; } :root.fm-vervolg .fm-pagina .fm-stap:nth-child(3) .fm-stap-label::after { transform-origin: right center; animation: fm-stap-lijn 0.9s cubic-bezier(0.45, 0, 0.25, 1) var(--fm-wanneer, 0s) both, fm-lijn-licht-terug 6s linear calc(4.6s + var(--i, 0) * 2s) 3 both; } } } @keyframes fm-stap-licht { 0%, 18.7%, 100% { filter: var(--fm-lus-gloed); } 6.7% { filter: brightness(1.6) drop-shadow(0 0 9px rgba(255, 225, 176, 0.85)); } } @keyframes fm-stap-loop-y { 0%, 6.7% { opacity: 0; background-position: 0 -40%; } 8% { opacity: 1; background-position: 0 -40%; } 30.7% { opacity: 1; background-position: 0 140%; } 33.3%, 100% { opacity: 0; background-position: 0 140%; } } @keyframes fm-stap-lijn { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* het licht over de lijn: heen van links naar rechts (Confront en Delete), terug van rechts naar links (Amplify); de andere twee lagen (de punt en de lijn) blijven op hun plaats */ @keyframes fm-lijn-licht-heen { 0%, 6.7% { background-position: -3rem center, left center, right center; } 30.7%, 100% { background-position: calc(100% + 3rem) center, left center, right center; } } @keyframes fm-lijn-licht-terug { 0%, 6.7% { background-position: calc(100% + 3rem) center, right center, left center; } 30.7%, 100% { background-position: -3rem center, right center, left center; } } /* ---- Over (src/pages/over.astro): elk stuk een eigen vorm ---- begin: de kop, de foto van Ronald en "Wie erachter zit"; stelling: de kernzin groot in het midden, tussen twee lijnen; kaart: twee stukken naast elkaar; werkwijze: de genummerde lijst als kaarten; slot: de afsluiting met de link naar Contact als knop. Op een telefoon staat alles onder elkaar. */ :root.fm-vervolg .fm-pagina .fm-over { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 3.5rem; } :root.fm-vervolg .fm-pagina .fm-over-kop > * { max-width: 40rem; } :root.fm-vervolg .fm-pagina .fm-over-intro > p { font-size: 1.3rem; line-height: 1.55; color: var(--fm-wit); } :root.fm-vervolg .fm-pagina .fm-over-stuk > :first-child { margin-top: 0; } :root.fm-vervolg .fm-pagina .fm-over-stuk > :last-child { margin-bottom: 0; } :root.fm-vervolg .fm-pagina .fm-over-gewoon, :root.fm-vervolg .fm-pagina .fm-over-wie { max-width: 40rem; } /* begin: de kop, de foto en "Wie erachter zit" (Ronald, 28 oktober 2026: "deze foto mag je gebruiken bij over"). Staand in een boog, met een rand en een gloed, en onderaan verdwenen in de hemel, was het "net een grafsteen". Nu is het een gewone liggende foto: heel, in zijn eigen kleuren, scherp tot de rand en met de zachte hoek van de kaarten. Het enige merkteken is een strook puntjes zoals in de iconen, die rechtsboven achter de foto vandaan komt. Smal staat de foto over de hele kolom, direct onder de inleiding; vanaf 60em naast de tekst, in het midden, vlak ernaast en niet tegen de rechterrand, net als de triquetra op Aanpak. */ :root.fm-vervolg .fm-pagina .fm-over-begin { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 3.5rem; } /* op een liggende telefoon niet hoger dan het scherm onder de kop; sizes van de foto in over.astro rekent met deze maten */ :root.fm-vervolg .fm-pagina .fm-over-portret { position: relative; isolation: isolate; margin: -1rem 0 0; width: min(100%, (100vh - 8rem) * 1.5); width: min(100%, (100svh - 8rem) * 1.5); } :root.fm-vervolg .fm-pagina .fm-over-portret + .fm-over-wie { margin-top: -0.75rem; } /* "Wie erachter zit" begint met het bronzen streepje van de dienstpagina's, en de zin over Ronald is wit, zoals een inleiding */ :root.fm-vervolg .fm-pagina .fm-over-wie::before { content: ""; display: block; width: 3.5rem; height: 2px; margin: 0 0 1.25rem; background: var(--fm-glans); } :root.fm-vervolg .fm-pagina .fm-over-wie > h2 + p { font-size: 1.1rem; line-height: 1.55; color: var(--fm-wit); } /* De hele foto, 3 op 2 zoals hij is gemaakt. Astro snijdt hem niet bij; is het bestand ooit anders, dan blijft hij onvervormd en blijft zijn gezicht (49% 22%) in beeld. De ronde hoek staat op de foto zelf, niet op een vak eromheen. */ :root.fm-vervolg .fm-pagina .fm-over-portret picture { display: block; } :root.fm-vervolg .fm-pagina .fm-over-portret img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 3 / 2; object-fit: cover; object-position: 49% 22%; border-radius: 20px; } /* De puntjes: het brons en de stippen van de iconen, als een strook die achter de foto vandaan komt en naar links vervaagt. Alleen aan de bovenkant: rondom, of in een hoek om de foto heen, wordt het een lijst. */ :root.fm-vervolg .fm-pagina .fm-over-portret::before { content: ""; position: absolute; z-index: -1; top: -2rem; right: 0; width: 9rem; height: 5rem; pointer-events: none; background-image: radial-gradient(circle, rgba(201, 166, 115, 0.75) 1.25px, rgba(201, 166, 115, 0) 1.75px); background-size: 10px 10px; background-position: right top; -webkit-mask-image: linear-gradient(250deg, #000 25%, transparent 75%); mask-image: linear-gradient(250deg, #000 25%, transparent 75%); } /* stelling */ :root.fm-vervolg .fm-pagina .fm-over-stelling { padding: 3rem 0; text-align: center; border-top: 1px solid rgba(218, 200, 172, 0.25); border-bottom: 1px solid rgba(218, 200, 172, 0.25); } :root.fm-vervolg .fm-pagina .fm-over-stelling h2 { margin: 0 auto 1.1rem; max-width: 18ch; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; background-image: var(--fm-glans); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } :root.fm-vervolg .fm-pagina .fm-over-stelling p { margin-left: auto; margin-right: auto; max-width: 36rem; font-size: 1.15rem; color: var(--fm-wit); } /* kaart */ :root.fm-vervolg .fm-pagina .fm-over-kaart { padding: 1.75rem; border: 1px solid var(--fm-rand); border-radius: 20px; background: linear-gradient(160deg, rgba(243, 241, 247, 0.05), rgba(243, 241, 247, 0.015)); } :root.fm-vervolg .fm-pagina .fm-over-kaart h2 { font-size: 1.5rem; } /* werkwijze: de vijf punten als kaarten met een bronzen nummer */ :root.fm-vervolg .fm-pagina .fm-over-werkwijze ol { list-style: none; margin: 1.5rem 0 0; padding: 0; counter-reset: fm-punt; display: grid; gap: 1rem; } :root.fm-vervolg .fm-pagina .fm-over-werkwijze li { counter-increment: fm-punt; position: relative; margin: 0; padding: 1.4rem 1.4rem 1.4rem 4.2rem; border: 1px solid var(--fm-rand); border-radius: 18px; background: rgba(243, 241, 247, 0.03); } :root.fm-vervolg .fm-pagina .fm-over-werkwijze li::before { content: counter(fm-punt, decimal-leading-zero); position: absolute; left: 1.3rem; top: 1.25rem; font-family: var(--fm-display); font-size: 1.5rem; line-height: 1; background-image: var(--fm-glans); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } :root.fm-vervolg .fm-pagina .fm-over-werkwijze li strong { display: block; margin-bottom: 0.35rem; font-family: var(--fm-display); font-weight: 500; font-size: 1.15rem; color: var(--fm-wit); } /* slot: de link naar Contact als bronzen knop */ :root.fm-vervolg .fm-pagina .fm-over-slot { padding-top: 2.75rem; border-top: 1px solid var(--fm-rand); } :root.fm-vervolg .fm-pagina .fm-over-slot h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); } :root.fm-vervolg .fm-pagina .fm-over-slot a[href="/contact/"] { display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--fm-knop); color: var(--fm-knop-tekst); font-weight: 500; text-decoration: none; outline: 1px solid rgba(223, 207, 181, 0.45); outline-offset: 3px; } :root.fm-vervolg .fm-pagina .fm-over-slot a[href="/contact/"]:focus-visible { outline: 2px solid var(--fm-wit); } @media (min-width: 48em) { :root.fm-vervolg .fm-pagina .fm-over { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } :root.fm-vervolg .fm-pagina .fm-over > * { grid-column: 1 / -1; } :root.fm-vervolg .fm-pagina .fm-over > .fm-over-kaart { grid-column: auto; } :root.fm-vervolg .fm-pagina .fm-over-werkwijze ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* vanaf 60em: links de kop en "Wie erachter zit", rechts de foto, in het midden naast die twee, zoals de triquetra op Aanpak. Hooguit 36vw breed: bij 1440 pixels blijft er rechts ongeveer evenveel ruimte over als tussen tekst en foto. "Wie erachter zit" blijft links onder de inleiding en komt niet onder de foto: een foto met een tekst over hem eronder lijkt weer op een bidprentje. */ @media (min-width: 60em) { :root.fm-vervolg .fm-pagina .fm-over-begin { grid-template-columns: minmax(20rem, 40rem) auto; grid-template-rows: auto 1fr; column-gap: clamp(3rem, 7vw, 8rem); justify-content: start; } :root.fm-vervolg .fm-pagina .fm-over-begin > .fm-over-kop { grid-column: 1; grid-row: 1; } :root.fm-vervolg .fm-pagina .fm-over-begin > .fm-over-wie { grid-column: 1; grid-row: 2; margin-top: 0; } :root.fm-vervolg .fm-pagina .fm-over-begin > .fm-over-portret { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; width: min(38rem, 36vw); } :root.fm-vervolg .fm-pagina .fm-over-portret::before { top: -2.5rem; width: 12rem; height: 6rem; } } @media (min-width: 64em) { :root.fm-vervolg .fm-pagina .fm-over-werkwijze ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Contact: alles in het midden (Ronald, 14 oktober 2026). Het formulier zelf blijft links uitgelijnd: zo lees je labels en velden makkelijk. */ :root.fm-vervolg .fm-pagina.fm-pagina-midden { margin-left: auto; margin-right: auto; max-width: 42rem; text-align: center; } :root.fm-vervolg .fm-pagina.fm-pagina-midden .fm-formulierkaart { margin-left: auto; margin-right: auto; text-align: left; } :root.fm-vervolg .fm-pagina.fm-pagina-midden .fm-formulierkaart h2, :root.fm-vervolg .fm-pagina.fm-pagina-midden .fm-formulierintro { text-align: center; } :root.fm-vervolg .fm-pagina.fm-pagina-midden .fm-vertrouwen { justify-content: center; } :root.fm-vervolg .fm-pagina.fm-pagina-midden .fm-contact { justify-content: center; } /* ---- Waarom Forevermore (AI Security, onder de pakketten; Ronald, 12 november 2026, na het bekijken van defenced.com) ---- Korte punten met elk één zin: een klein bronzen woord en de zin eronder, met een dunne bronzen lijn erboven. Breed drie of vijf naast elkaar, op een telefoon onder elkaar. */ :root.fm-vervolg .fm-pagina .fm-waarom { margin: 3rem 0 0; padding-top: 2.75rem; border-top: 1px solid var(--fm-rand); } :root.fm-vervolg .fm-pagina .fm-waarom-kop { margin: 0 0 1.75rem; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1; } :root.fm-vervolg .fm-pagina .fm-waarom-lijst { display: grid; grid-template-columns: 1fr; gap: 1.5rem 2rem; list-style: none; margin: 0; padding: 0; } :root.fm-vervolg .fm-pagina .fm-waarom-punt { position: relative; margin: 0; padding-top: 1rem; } :root.fm-vervolg .fm-pagina .fm-waarom-punt::before { content: ""; position: absolute; left: 0; top: 0; width: 2.5rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #A37E54, #DAC8AC, #B08B5C); } :root.fm-vervolg .fm-pagina .fm-waarom-punt h3 { margin: 0 0 0.45rem; font-family: var(--fm-display); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: #DAC8AC; } :root.fm-vervolg .fm-pagina .fm-waarom-punt p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--fm-zacht); max-width: 32ch; } @media (min-width: 40em) { :root.fm-vervolg .fm-pagina .fm-waarom-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64em) { :root.fm-vervolg .fm-pagina .fm-waarom-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 90em) { :root.fm-vervolg .fm-pagina .fm-waarom-lijst { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ---- Inzichten: verhalen over echte aanvallen, als kaarten (Ronald, 12 november 2026) ---- Een kaart met een iets lichtere, warme ondergrond en een dunne bronzen rand, zoals het vlak met Ronald op de homepage: de datum klein, de titel als link (de hele kaart is aan te klikken), de samenvatting en "Lees het verhaal". Breed twee of drie naast elkaar, op een telefoon onder elkaar. */ :root.fm-vervolg .fm-pagina .fm-inzichten { display: grid; grid-template-columns: 1fr; gap: 1.25rem; list-style: none; margin: 2rem 0 0; padding: 0; } :root.fm-vervolg .fm-pagina .fm-inzicht { position: relative; display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 1.5rem 1.5rem 1.4rem; border-radius: 20px; border: 1px solid rgba(218, 200, 172, 0.26); background: linear-gradient(155deg, rgba(48, 39, 30, 0.7) 0%, rgba(26, 23, 20, 0.78) 65%, rgba(22, 20, 18, 0.8) 100%); box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.12), 0 22px 60px -32px rgba(177, 141, 93, 0.5); transition: border-color .25s, transform .25s; } :root.fm-vervolg .fm-pagina .fm-inzicht:hover { border-color: rgba(218, 200, 172, 0.55); transform: translateY(-2px); } :root.fm-vervolg .fm-pagina .fm-inzicht:focus-within { border-color: rgba(218, 200, 172, 0.7); } :root.fm-vervolg .fm-pagina .fm-inzicht-datum { margin: 0; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fm-gedempt); } :root.fm-vervolg .fm-pagina .fm-inzicht-kop { margin: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; } :root.fm-vervolg .fm-pagina .fm-inzicht-kop a { color: var(--fm-wit); text-decoration: none; } /* de hele kaart is aan te klikken: de link van de titel ligt over de kaart heen */ :root.fm-vervolg .fm-pagina .fm-inzicht-kop a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } :root.fm-vervolg .fm-pagina .fm-inzicht-tekst { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--fm-zacht); } :root.fm-vervolg .fm-pagina .fm-inzicht-meer { margin: auto 0 0; padding-top: 0.4rem; color: #DAC8AC; font-weight: 500; font-size: 0.95rem; } :root.fm-vervolg .fm-pagina .fm-inzicht .fm-kladmerk { margin: 0; } @media (min-width: 48em) { :root.fm-vervolg .fm-pagina .fm-inzichten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 72em) { :root.fm-vervolg .fm-pagina .fm-inzichten { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { :root.fm-vervolg .fm-pagina .fm-inzicht { transition: none; } :root.fm-vervolg .fm-pagina .fm-inzicht:hover { transform: none; } } /* ---- Een video bij een verhaal (Video.astro; Ronald, 12 november 2026: "Hier moet een video van youtube of vimeo embedded kunnen worden") ---- Een vlak van 16 bij 9 in de stijl van de kaarten: een warme, donkere ondergrond met een bronzen rand en gloed, de geweven triquetra heel licht in de hoek, en in het midden een ronde bronzen afspeelknop. Na de klik staat de speler van YouTube of Vimeo in hetzelfde vlak. Op een telefoon en een kleiner scherm staat de video onder de samenvatting, zo breed als de tekst. Vanaf 75em staat hij rechts naast de tekst, bovenaan gelijk met het label, en schuift hij mee tijdens het lezen (sticky, onder de vaste kop); de pagina is dan breed (Vervolg met breed). Tussen 60 en 75em bleef naast de tekstkolom te weinig ruimte over. Op een heel breed scherm wordt de video niet hoger dan ongeveer 70 procent van het beeld. */ :root.fm-vervolg .fm-pagina .fm-artikel-met-video { max-width: 36rem; } :root.fm-vervolg .fm-pagina .fm-video { margin: 0.4rem 0 2.25rem; } :root.fm-vervolg .fm-pagina .fm-video-vak { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; border: 1px solid rgba(218, 200, 172, 0.38); background: radial-gradient(90% 80% at 50% 42%, rgba(177, 141, 93, 0.24), rgba(177, 141, 93, 0) 62%), linear-gradient(160deg, rgba(48, 39, 30, 0.96) 0%, rgba(26, 23, 20, 0.97) 62%, rgba(20, 19, 17, 0.98) 100%); box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.14), 0 30px 80px -30px rgba(0, 0, 0, 0.9), 0 18px 60px -30px rgba(177, 141, 93, 0.5); } :root.fm-vervolg .fm-pagina .fm-video-vak.is-gestart { background: #000; } :root.fm-vervolg .fm-pagina .fm-video-vak iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } :root.fm-vervolg .fm-pagina a.fm-video-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; padding: 1rem 1.25rem; border-radius: inherit; color: var(--fm-wit); text-align: center; text-decoration: none; } :root.fm-vervolg .fm-pagina a.fm-video-start:focus-visible { outline: 2px solid var(--fm-wit); outline-offset: -6px; } :root.fm-vervolg .fm-pagina .fm-video-teken { position: absolute; right: -5%; bottom: -14%; width: 44%; height: auto; fill: #DAC8AC; opacity: 0.07; pointer-events: none; } :root.fm-vervolg .fm-pagina .fm-video-knop { position: relative; display: grid; place-items: center; width: clamp(60px, 7vw, 88px); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #A37E54 0%, #DAC8AC 30%, #B08B5C 52%, #CDB38E 75%, #9F7A50 100%); box-shadow: 0 0 0 1px rgba(218, 200, 172, 0.6), 0 0 0 8px rgba(218, 200, 172, 0.1), 0 16px 44px -12px rgba(177, 141, 93, 0.8); transition: transform .2s, box-shadow .2s; } :root.fm-vervolg .fm-pagina .fm-video-knop svg { width: 44%; height: 44%; margin-left: 9%; fill: #141414; } :root.fm-vervolg .fm-pagina a.fm-video-start:hover .fm-video-knop, :root.fm-vervolg .fm-pagina a.fm-video-start:focus-visible .fm-video-knop { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(218, 200, 172, 0.8), 0 0 0 10px rgba(218, 200, 172, 0.14), 0 18px 54px -10px rgba(177, 141, 93, 0.95); } :root.fm-vervolg .fm-pagina .fm-video-woorden { position: relative; display: flex; flex-direction: column; gap: 0.25rem; } :root.fm-vervolg .fm-pagina .fm-video-actie { font-family: var(--fm-display); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.02em; } :root.fm-vervolg .fm-pagina .fm-video-naam { max-width: 30em; font-size: 0.9rem; line-height: 1.4; color: var(--fm-zacht); } :root.fm-vervolg .fm-pagina .fm-video-uitleg { margin: 0.75rem 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--fm-zacht); } /* de lege plek, zolang er geen video is (Ronald, 12 november 2026: "enkel een placeholder waarin het geupload kan worden"): hetzelfde vlak, met een dunne stippellijn erbinnen, een camera en de placeholder in het midden */ :root.fm-vervolg .fm-pagina .fm-video-leeg .fm-video-vak::after { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(218, 200, 172, 0.32); border-radius: 14px; pointer-events: none; } :root.fm-vervolg .fm-pagina .fm-video-plek { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.25rem 1.75rem; text-align: center; } :root.fm-vervolg .fm-pagina .fm-video-camera { width: clamp(36px, 4vw, 52px); height: auto; fill: none; stroke: #DAC8AC; stroke-width: 1.4; stroke-linejoin: round; opacity: 0.85; } :root.fm-vervolg .fm-pagina .fm-video-plektekst { max-width: 26em; font-size: 0.9rem; line-height: 1.45; color: var(--fm-zacht); } @media (min-width: 75em) { :root.fm-vervolg .fm-pagina .fm-artikel-met-video { display: grid; max-width: none; align-items: start; column-gap: clamp(2.5rem, 4vw, 5rem); grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "kop video" "tekst video"; } :root.fm-vervolg .fm-pagina .fm-artikel-met-video > .fm-artikel-kop { grid-area: kop; } :root.fm-vervolg .fm-pagina .fm-artikel-met-video > .fm-artikel-tekst { grid-area: tekst; } :root.fm-vervolg .fm-pagina .fm-artikel-met-video > .fm-video { grid-area: video; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6.5rem); width: 100%; max-width: min(64rem, 124vh); margin: 0; } } @media (prefers-reduced-motion: reduce) { :root.fm-vervolg .fm-pagina .fm-video-knop { transition: none; } :root.fm-vervolg .fm-pagina a.fm-video-start:hover .fm-video-knop, :root.fm-vervolg .fm-pagina a.fm-video-start:focus-visible .fm-video-knop { transform: none; } } /* bij afgedwongen kleuren (hoog contrast) vallen het verloop en de gloed weg: dan een rand om het vlak en om de knop */ @media (forced-colors: active) { :root.fm-vervolg .fm-pagina .fm-video-vak { border: 1px solid CanvasText; } :root.fm-vervolg .fm-pagina .fm-video-knop { border: 2px solid LinkText; } :root.fm-vervolg .fm-pagina .fm-video-knop svg { fill: LinkText; } } /* ---- Een gekoppelde dienst onder een verhaal (GekoppeldeDienst.astro; Ronald, 12 november 2026: "Een gekoppelde dienst. Ik wil dat dit wordt vormgegeven zoals" het vlak met Ronald op de homepage) ---- Dezelfde vorm als dat vlak (#fm-verhaal .fm-ronald in site.css): een warme, iets lichtere ondergrond met een bronzen rand en een zachte bronzen gloed, links een ronde lijst met een bronzen randje, rechts de naam, één zin en de knoppen. In de lijst staat het icoon van puntjes van het pakket, waar bij Ronald zijn foto staat. Op een telefoon (smaller dan 36rem) is de lijst kleiner, staan de naam en de zin ernaast en de knoppen eronder in het midden, zoals bij Ronald. */ :root.fm-vervolg .fm-pagina .fm-gekoppeld { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 26px; margin: 2.5rem 0; padding: 24px 28px 24px 24px; border-radius: 24px; background: linear-gradient(155deg, rgba(52, 42, 32, 0.86) 0%, rgba(27, 24, 21, 0.9) 60%, rgba(22, 20, 18, 0.9) 100%); border: 1px solid rgba(218, 200, 172, 0.32); box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.16), 0 26px 70px -30px rgba(177, 141, 93, 0.55), 0 12px 32px -18px rgba(0, 0, 0, 0.7); } :root.fm-vervolg .fm-pagina .fm-gekoppeld-teken { display: grid; place-items: center; width: clamp(88px, 8vw, 112px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgba(177, 141, 93, 0.32), rgba(36, 31, 26, 0.95) 70%); box-shadow: 0 0 0 2px #DAC8AC, 0 0 0 7px rgba(218, 200, 172, 0.12), 0 12px 30px rgba(0, 0, 0, 0.55); } :root.fm-vervolg .fm-pagina .fm-gekoppeld-teken svg { width: 46%; height: 46%; fill: #DAC8AC; } :root.fm-vervolg .fm-pagina .fm-gekoppeld-tekst { display: flex; flex-direction: column; gap: 6px; min-width: 0; } :root.fm-vervolg .fm-pagina .fm-gekoppeld p { margin: 0; } :root.fm-vervolg .fm-pagina .fm-gekoppeld-naam { font-family: var(--fm-display); font-weight: 500; font-size: 1.25rem; line-height: 1.2; color: var(--fm-wit); } :root.fm-vervolg .fm-pagina .fm-gekoppeld-zin { font-size: 1.05rem; line-height: 1.5; color: var(--fm-zacht); text-wrap: balance; } :root.fm-vervolg .fm-pagina .fm-gekoppeld-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 12px; } :root.fm-vervolg .fm-pagina a.fm-gekoppeld-contact { color: #DAC8AC; font-weight: 500; font-size: 0.95rem; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(218, 200, 172, 0.4); text-underline-offset: 4px; } :root.fm-vervolg .fm-pagina a.fm-gekoppeld-contact:hover { color: var(--fm-wit); text-decoration-color: currentColor; } @media not all and (min-width: 36rem) { :root.fm-vervolg .fm-pagina .fm-gekoppeld { gap: 4px 16px; padding: 16px 18px; border-radius: 20px; grid-template-areas: "teken naam" "teken zin" "acties acties"; } :root.fm-vervolg .fm-pagina .fm-gekoppeld-teken { grid-area: teken; width: 64px; box-shadow: 0 0 0 2px #DAC8AC, 0 8px 20px rgba(0, 0, 0, 0.5); } :root.fm-vervolg .fm-pagina .fm-gekoppeld-tekst { display: contents; } :root.fm-vervolg .fm-pagina .fm-gekoppeld-naam { grid-area: naam; align-self: end; font-size: 1.1rem; } :root.fm-vervolg .fm-pagina .fm-gekoppeld-zin { grid-area: zin; align-self: start; font-size: 0.98rem; } :root.fm-vervolg .fm-pagina .fm-gekoppeld-acties { grid-area: acties; justify-content: center; gap: 10px 16px; margin-top: 12px; } } /* bij afgedwongen kleuren (hoog contrast) valt de ondergrond weg: dan een rand om het vlak */ @media (forced-colors: active) { :root.fm-vervolg .fm-pagina .fm-gekoppeld { border: 1px solid CanvasText; } :root.fm-vervolg .fm-pagina .fm-gekoppeld-teken svg { fill: CanvasText; } } /* ---- Een gekoppelde dienst, rustig (GekoppeldeDienst.astro; Ronald, 12 november 2026: "Dit is te druk. Redesign het.") ---- Eén regel tussen twee dunne lijnen, in haar geheel een link: een klein label erboven, het icoon van puntjes, de naam, de korte regel en een pijl. Geen vlak, geen ronde lijst en geen knop meer. */ :root.fm-vervolg .fm-pagina .fm-dienstlink { margin: 2.75rem 0; } :root.fm-vervolg .fm-pagina .fm-dienstlink-label { margin: 0 0 0.6rem; font-family: var(--fm-display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: #DAC8AC; } :root.fm-vervolg .fm-pagina a.fm-dienstlink-rij { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; padding: 1.05rem 0.25rem; border-top: 1px solid rgba(218, 200, 172, 0.28); border-bottom: 1px solid rgba(218, 200, 172, 0.28); color: var(--fm-wit); text-decoration: none; } :root.fm-vervolg .fm-pagina .fm-dienstlink-icoon { width: 24px; height: 24px; fill: #C9A673; } :root.fm-vervolg .fm-pagina .fm-dienstlink-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; } :root.fm-vervolg .fm-pagina .fm-dienstlink-naam { font-family: var(--fm-display); font-weight: 500; font-size: 1.15rem; line-height: 1.25; } :root.fm-vervolg .fm-pagina .fm-dienstlink-zin { font-size: 0.95rem; line-height: 1.4; color: var(--fm-zacht); } :root.fm-vervolg .fm-pagina .fm-dienstlink-pijl { color: #DAC8AC; font-size: 1.15rem; transition: transform .2s; } :root.fm-vervolg .fm-pagina a.fm-dienstlink-rij:hover .fm-dienstlink-naam { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } :root.fm-vervolg .fm-pagina a.fm-dienstlink-rij:hover .fm-dienstlink-pijl { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { :root.fm-vervolg .fm-pagina .fm-dienstlink-pijl { transition: none; } :root.fm-vervolg .fm-pagina a.fm-dienstlink-rij:hover .fm-dienstlink-pijl { transform: none; } } /* 12 november 2026 (Ronald): op de pagina van een dienst staat de knop rechts, onder "Voor wie"; op Over staat de afsluiting in het midden ("Centreren") */ :root.fm-vervolg .fm-pagina .fm-dienstpagina-actie-rechts { margin: 1.75rem 0 0; } :root.fm-vervolg .fm-pagina .fm-over-slot { text-align: center; } /* Contact: de zin met het telefoonnummer en het mailadres, iets groter dan gewone tekst (Ronald, 12 november 2026) */ :root.fm-vervolg .fm-pagina .fm-contactregel { font-size: 1.15rem; line-height: 1.6; color: var(--fm-wit); margin-bottom: 2rem; } :root.fm-vervolg .fm-pagina .fm-contactregel a { white-space: nowrap; } /* Over op een telefoon: de inleiding iets kleiner (Ronald, 12 november 2026: "op de telefoon de lettertype van deze tekst kleiner"); op een breed scherm blijft ze 1.3rem */ @media not all and (min-width: 40em) { :root.fm-vervolg .fm-pagina .fm-over-intro > p { font-size: 1.05rem; line-height: 1.6; } } /* "Hoe wij werken" staat op een telefoon niet op de pagina (Ronald, 12 november 2026: "dit mag weg op de telefoon"); op een breder scherm blijven de drie punten staan */ @media not all and (min-width: 40em) { :root.fm-vervolg .fm-pagina .fm-over-werkwijze { display: none; } }