/* --------------------------------------------------------------------------- * Straven — alleen wat het ontwerp zelf niet meelevert. * * De opmaak van de site staat in base.css (letterlijk uit de bundel) en verder * als inline-stijl in de onderdelen onder parts/. Hier staan uitsluitend de * dingen die nodig zijn omdat de site nu WordPress-pagina's is in plaats van * één JavaScript-pagina. * ------------------------------------------------------------------------- */ :root { --accent: #315CFF; } /* De bundel had een volledige reset (marge en opvulling) in het laadscherm; die gold ook voor de site zelf, dus die houden we aan. */ *, *::before, *::after { margin: 0; padding: 0; } /* In het ontwerp waren de navigatie-elementen knoppen. Ze zijn nu echte links, zodat ze een URL hebben. Daardoor pakken ze de algemene a- en a:hover-regels uit base.css op, die eerder niet op ze van toepassing waren. Dat draaien we terug: de inline-stijlen en de hover-klassen uit generated.css bepalen het uiterlijk, precies zoals voorheen. */ a.stv-link, a.stv-link:hover, a.stv-link:focus { color: inherit; font: inherit; text-decoration: none; cursor: pointer; } /* --------------------------------------------------------------------------- * Mobiel — het ontwerp klapt om onder 980px (dezelfde grens als de bundel) * ------------------------------------------------------------------------- */ .stv-burger { display: none; } .stv-mpanel { display: none; } @media (max-width: 979px) { .stv-navrow { display: none !important; } .stv-burger { display: flex !important; margin-left: 6px !important; } .stv-langpush { margin-left: auto !important; } .stv-mpanel.is-open { display: flex !important; } /* logo + vlaggen + burger past anders niet op 375px (v2-vlaggen zijn breder) */ .stv-langpush > * { padding: 8px 9px !important; } } /* Heel smal (telefoons): alleen de vlagjes, zonder NL/EN-tekst */ @media (max-width: 429px) { .stv-langpush > * > span:last-child { display: none !important; } } /* --------------------------------------------------------------------------- * Branches-uitklapmenu in de navigatie (desktop) en het mobiele paneel * ------------------------------------------------------------------------- */ .stv-navdrop { position: relative; flex: 0 1 auto; } .stv-navdrop-paneel { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 20px; z-index: 60; } .stv-navdrop:hover .stv-navdrop-paneel, .stv-navdrop:focus-within .stv-navdrop-paneel { display: block; } .stv-navdrop-lijst { background: #0B1118; border: 1px solid #1D242E; border-radius: 14px; padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(210px, 1fr)); gap: 2px; box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .65); } .stv-navdrop-lijst a { display: block; padding: 11px 14px; border-radius: 9px; color: #F7F7F5; font-family: Manrope, sans-serif; font-weight: 600; font-size: 13.5px; text-decoration: none; white-space: nowrap; transition: background 260ms cubic-bezier(.16, 1, .3, 1), color 260ms; } .stv-navdrop-lijst a:hover { background: #131A24; color: #FFFFFF; } @media (max-width: 979px) { .stv-navdrop { display: none !important; } } .stv-mbranches { border-bottom: 1px solid #1D242E; } .stv-mbranches summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; color: #F7F7F5; font-family: Manrope, sans-serif; font-weight: 600; font-size: 16px; } .stv-mbranches summary::-webkit-details-marker { display: none; } .stv-mbranches[open] summary span { transform: rotate(180deg); } .stv-mbranches summary span { transition: transform 320ms cubic-bezier(.16, 1, .3, 1); } .stv-mbranches-lijst { display: flex; flex-direction: column; padding: 0 0 10px; } .stv-mbranches-lijst a { color: #B4BAC2; text-decoration: none; font-size: 14.5px; padding: 9px 0 9px 14px; border-left: 1px solid #1D242E; } .stv-mbranches-lijst a:active, .stv-mbranches-lijst a:hover { color: #F7F7F5; } @media (min-width: 980px) { .stv-mbranches { display: none !important; } } @media (min-width: 980px) { .stv-mpanel { display: none !important; } } /* --------------------------------------------------------------------------- * Cookiebanner — verborgen tot JavaScript bepaalt of hij nodig is * ------------------------------------------------------------------------- */ .stv-cookiebar { display: none; } .stv-cookiebar.is-visible { display: flex; } /* --------------------------------------------------------------------------- * WordPress-adminbalk * * De adminbalk duwt het document 32px omlaag, maar de header staat fixed en * schuift niet mee — dat gaf een lichte strook onder de header. Alleen * zichtbaar voor ingelogde beheerders; bezoekers merken er niets van. * De !important is nodig omdat top:0 in het ontwerp inline staat. * ------------------------------------------------------------------------- */ body.admin-bar header[data-nav] { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar header[data-nav] { top: 46px !important; } } /* --------------------------------------------------------------------------- * Afwerking * * Kleine toevoegingen bovenop het ontwerp. Alles hangt aan transform en * opacity, dus het kost de browser niets. De globale regel voor * prefers-reduced-motion in base.css zet dit vanzelf allemaal uit. * ------------------------------------------------------------------------- */ /* Navigatie: een lijntje dat vanaf links meegroeit. Het ontwerp liet de kleur al verspringen; dit geeft de beweging een richting. */ .stv-navrow a.stv-link { position: relative; } .stv-navrow a.stv-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 420ms cubic-bezier(.16, 1, .3, 1); } .stv-navrow a.stv-link:hover::after, .stv-navrow a.stv-link:focus-visible::after { transform: scaleX(1); } /* De knop met de bolle achtergrond heeft al een eigen hover; die krijgt geen lijntje eronder. */ .stv-navrow a.stv-h4::after { content: none; } /* De donkere kaarten komen iets omhoog. Het ontwerp verandert al rand en achtergrond; dit maakt van die verandering een beweging. */ .stv-h9 { /* De kaart heeft een inline transition uit het ontwerp (rand en achtergrond). Inline wint van een stylesheet, dus zonder !important zou transform niet meegaan en zou de kaart springen in plaats van glijden. De twee originele eigenschappen staan er daarom in dezelfde tijd bij. */ transition: transform 420ms cubic-bezier(.16, 1, .3, 1), background 440ms cubic-bezier(.16, 1, .3, 1), border-color 440ms cubic-bezier(.16, 1, .3, 1) !important; will-change: transform; } .stv-h9:hover { transform: translateY(-3px); } /* De lopende tekstbalk staat stil zolang je erop wijst — anders kun je hem niet lezen. */ [style*="stravenMarquee"]:hover { animation-play-state: paused; } /* --------------------------------------------------------------------------- * Stijlronde 26 aug 2026 — professioneler en minder vlak * * 1. Pill-knoppen krijgen voelbare diepte bij hover. * 2. Een meereizende "Plan een gesprek" verschijnt zodra de hero uit beeld * is (gedrag in straven.js). * (Een proef met een serif-displayletter is op verzoek teruggedraaid; de * koppen staan gewoon weer in Manrope uit het ontwerp.) * ------------------------------------------------------------------------- */ a.stv-link[style*="border-radius:999px"] { transition: transform 380ms cubic-bezier(.16, 1, .3, 1), box-shadow 380ms cubic-bezier(.16, 1, .3, 1), background 420ms cubic-bezier(.16, 1, .3, 1), color 420ms !important; } a.stv-link[style*="border-radius:999px"]:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(11, 17, 24, .45); } .stv-zweef-cta { position: fixed; right: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 30px); z-index: 70; display: inline-flex; align-items: center; gap: 10px; background: #315CFF; color: #F7F7F5; border-radius: 999px; padding: 15px 24px; font-family: Manrope, sans-serif; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; box-shadow: 0 18px 44px -16px rgba(49, 92, 255, .55); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 420ms cubic-bezier(.16, 1, .3, 1), transform 420ms cubic-bezier(.16, 1, .3, 1), background 300ms; } .stv-zweef-cta.is-zichtbaar { opacity: 1; transform: none; pointer-events: auto; } .stv-zweef-cta:hover { background: #274BDB; } @media (prefers-reduced-motion: reduce) { .stv-zweef-cta { transition: opacity 200ms; transform: none; } } /* Op lagere schermen (laptops) wordt de hero-tool compacter, zodat de lopende tekstbalk op de onderrand van het eerste scherm uitkomt. */ @media (max-height: 999px) and (min-width: 980px) { .stv-hero { padding-top: 82px !important; padding-bottom: 16px !important; } .stv-hero .strv-calc__head { padding-top: 12px !important; padding-bottom: 12px !important; } .stv-hero .strv-calc__invoer { padding-top: 13px !important; } .stv-hero .strv-calc__invoer .strv-calc__field { padding-bottom: 11px !important; } .stv-hero .strv-calc__assumeBtn { padding-top: 9px !important; padding-bottom: 9px !important; } .stv-hero .strv-calc__resultaat { padding-top: 14px !important; padding-bottom: 16px !important; } .stv-hero .strv-calc__omzet { font-size: clamp(26px, 7cqw, 44px) !important; } .stv-hero .strv-calc__voet { padding-top: 9px !important; padding-bottom: 11px !important; } .stv-hero .strv-calc__foot { font-size: 10.5px !important; line-height: 1.5 !important; } .stv-hero + div[style*="height:72px"] { height: 54px !important; } } /* In het eerste scherm blijft de tool op de kern (verzoek 28 aug 2026): de kleine-lettertjesregel en de aannames-knop staan wel op de branchepagina's, maar niet in de hero — dat scheelt hoogte en dus wordt alles groter weergegeven. */ .stv-hero .strv-calc__foot { display: none !important; } .stv-hero .strv-calc__assumeWrap { display: none !important; } /* --------------------------------------------------------------------------- * Rekentool-opfrissing (verzoek 26 aug 2026) — geldt op alle pagina's * * 1. De branche-/specialismekeuze in huisstijl: donker veld, eigen chevron; * in browsers met customizable selects (Chromium 135+) ook het * uitklaplijstje zelf in de stijl van de site. * 2. De tool springt eruit: blauwgetinte kop, accentrand en sterkere gloed. * ------------------------------------------------------------------------- */ .strv-calc select[data-strv="branche"] { appearance: none !important; -webkit-appearance: none !important; background-color: rgba(11, 17, 24, .5) !important; /* het pijl-merkteken uit het logo, naar beneden gedraaid */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 124 130' width='11' height='11'%3E%3Cg transform='rotate(180 52 55)'%3E%3Cpolygon points='48,0 0,100 12.4,100 52,17.5 91.6,100 104,100 56,0' fill='%236E8CFF'/%3E%3C/g%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding: 11px 38px 11px 14px !important; border: 1px solid #2A303A !important; border-radius: 9px !important; color: #F7F7F5 !important; font-family: Manrope, sans-serif !important; font-weight: 700 !important; font-size: 15px !important; height: 44px; cursor: pointer; transition: border-color 320ms; } .strv-calc select[data-strv="branche"]:hover { border-color: #F7F7F5 !important; } .strv-calc select[data-strv="branche"]:focus { outline: none !important; border-color: #315CFF !important; } @supports selector(::picker(select)) { .strv-calc select[data-strv="branche"], .strv-calc select[data-strv="branche"]::picker(select) { appearance: base-select !important; } .strv-calc select[data-strv="branche"]::picker-icon { display: none; } .strv-calc select[data-strv="branche"]::picker(select) { background: #0B1118; border: 1px solid #2A303A; border-radius: 12px; box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .75); padding: 8px; margin-top: 6px; } .strv-calc select[data-strv="branche"] option { padding: 10px 12px; border-radius: 8px; color: #F7F7F5; background: transparent; font: 600 13.5px Manrope, sans-serif; cursor: pointer; } .strv-calc select[data-strv="branche"] option:hover, .strv-calc select[data-strv="branche"] option:focus { background: #131A24; } .strv-calc select[data-strv="branche"] option:checked { color: #6E8CFF; } .strv-calc select[data-strv="branche"] option:disabled { color: #5E6670; cursor: default; } .strv-calc select[data-strv="branche"] optgroup { font: 600 10.5px Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #5E6670; padding: 10px 12px 2px; } } /* Eigen getrapt uitklappaneel (28 aug 2026): vervangt de native keuzelijst, die na een categoriekeuze niet vanzelf open mag van de browser. De knop oogt exact als het oude gesloten veld; het paneel als het ::picker-lijstje hierboven. De