/* ========================================================================== Rijschool Simplicity — layout utilities (added by the Divi 5 build). Divi's native controls handle every colour, font, border, radius and spacing value on this site. Three things they cannot express, and only these, live here: 1. GRID ROWS. The design lays every multi-column band out with `grid-template-columns: repeat(auto-fit, minmax(Xpx,1fr))` and exact 16px / 48px gaps. Divi's column gutter is a 1-4 *percentage* scale, so it can produce neither the exact gaps nor the auto-fit reflow. The rows below opt into CSS grid; the columns and every module inside them stay native, editable Divi elements. 2. LAYERED SHADOW. The brand's only atmospheric effect is a 5-stop drop shadow. Divi's box-shadow control is single-stop. 3. MOBILE CTA BAR. A fixed bottom conversion bar. ========================================================================== */ /* --- 0. type rendering --------------------------------------------------- Two things must match the design or every line break on the site shifts: 1. font-optical-sizing: none. Divi requests Inter WITH its optical-size axis (Inter:opsz,wght@14..32,100..900); the design requests it without (Inter:wght@400;500;600;700). With the axis present the browser auto-applies the narrow "display" cut at large sizes, so the same headline renders ~7.7% tighter and wraps onto fewer lines than the design. Turning optical sizing off pins Inter to its default (text) cut and reproduces the design's metrics exactly. 2. font-feature-settings:'ss01' 1 — the design sets it on . Both are inherited; form controls are named explicitly because UA styles reset their font. */ html, body { font-optical-sizing: none; font-feature-settings: 'ss01' 1; -webkit-font-smoothing: antialiased; } input, select, textarea, button { font-optical-sizing: none; font-feature-settings: 'ss01' 1; } /* --- 1. grid rows -------------------------------------------------------- */ .rs-grid { display: grid !important; } .rs-grid::before, .rs-grid::after { content: none !important; display: none !important; } .rs-grid > .et_pb_column { width: auto !important; margin: 0 !important; float: none !important; min-width: 0; } .rs-split { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; } .rs-split-start { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: start; } .rs-split-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: center; } .rs-split-300-plain{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; } .rs-cards-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .rs-cards-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .rs-cards-250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; align-items: stretch; } .rs-cards-230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .rs-steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid #d8d8d8; } .rs-usp { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; } /* Cards must fill their grid cell, so a row of cards is equal height (the design's cards ARE the grid items; in Divi the column is, and the card sits inside it). */ .rs-cards-280 > .et_pb_column, .rs-cards-300 > .et_pb_column, .rs-cards-250 > .et_pb_column, .rs-cards-230 > .et_pb_column { display: flex; flex-direction: column; } .rs-cards-280 > .et_pb_column > .et_pb_module, .rs-cards-300 > .et_pb_column > .et_pb_module, .rs-cards-250 > .et_pb_column > .et_pb_module, .rs-cards-230 > .et_pb_column > .et_pb_module { flex: 1 1 auto; } /* pricing cards additionally pin their CTA to the bottom */ .rs-cardfill { display: flex !important; flex-direction: column; } .rs-push { margin-top: auto !important; } /* Divi reserves bottom space under every image; the design's image slots have none */ .rs-img.et_pb_image, .rs-img .et_pb_image_wrap { margin-bottom: 0 !important; } /* the design balances these headlines (text-wrap: balance) */ .rs-balance h1, .rs-balance h2 { text-wrap: balance; } /* --- 2. layered drop shadows -------------------------------------------- */ .rs-shadow { box-shadow: 0 84px 24px rgba(0,0,0,0), 0 54px 22px rgba(0,0,0,.01), 0 30px 18px rgba(0,0,0,.04), 0 13px 13px rgba(0,0,0,.08), 0 3px 7px rgba(0,0,0,.09); } .rs-shadow-strong { box-shadow: 0 84px 24px rgba(0,0,0,0), 0 54px 22px rgba(0,0,0,.02), 0 30px 18px rgba(0,0,0,.05), 0 13px 13px rgba(0,0,0,.10), 0 3px 7px rgba(0,0,0,.12); } /* --- 3. fixed mobile conversion bar ------------------------------------- */ .rs-mobilebar { display: none; } @media (max-width: 820px) { .rs-mobilebar { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #ffffff; border-top: 1px solid #d8d8d8; } .rs-mobilebar a { flex: 1; display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 4px; text-decoration: none; font: 500 16px/1 Inter, Arial, sans-serif; } .rs-mobilebar .rs-mb-primary { background: #2090d0; color: #ffffff; } .rs-mobilebar .rs-mb-secondary { background: #ffffff; color: #080808; border: 1px solid #d8d8d8; } /* keep the bar off the footer / forms / cookie controls */ body { padding-bottom: 84px; } } /* --- housekeeping -------------------------------------------------------- */ /* Divi pads every heading 10px at the bottom; the design does not. */ .rs-tight h1, .rs-tight h2, .rs-tight h3, .rs-tight h4 { padding-bottom: 0 !important; } .rs-tight p:last-of-type { padding-bottom: 0; } .rs-tight p { margin: 0; } /* Divi gives EVERY module a ~33px bottom margin. The design's list rows are separated by a hairline, not by a gap, so the row containers reset it. */ .rs-raterow, .rs-listrow, .rs-condrow, .rs-kieshulp, .rs-cmp, .rs-darkrow, .rs-addrblock, .rs-faq, .rs-push, .rs-cardhead, .rs-btnrow, .rs-headrow, .rs-faqcathead, .rs-listtop, .rs-cardfill, .rs-herocard { margin-bottom: 0 !important; } /* in-copy links follow the design's a{color:#006acc} */ .et_pb_text a, .et_pb_toggle_content a { color: #006acc; text-decoration: underline; } .et_pb_text a:hover, .et_pb_toggle_content a:hover { color: #080808; } /* ✓ / → bullet rows */ .rs-bullet { display: flex; gap: 8px; align-items: baseline; margin: 0 0 8px !important; padding: 0 !important; } .rs-bullet:last-child { margin-bottom: 0 !important; } .rs-glyph { flex: none; font-weight: 600; } .rs-usp-item p { display: flex; gap: 10px; align-items: center; margin: 0 !important; padding: 0 !important; } /* text-arrow link variant */ .rs-arrowwrap p { margin: 0 !important; padding: 0 !important; } .rs-arrow { text-decoration: underline !important; text-underline-offset: 4px; } .rs-arrow:hover { color: #080808 !important; } /* button rows */ .rs-btnrow { display: flex !important; flex-wrap: wrap; gap: 12px; align-items: center; } .rs-btnrow > .et_pb_module { margin: 0 !important; } .rs-btnrow-center { justify-content: center; } .rs-btn-full, .rs-btn-full .et_pb_button { width: 100%; justify-content: center; } /* buttons: kill Divi's icon slot + its 3px radius, keep the design's 4px box */ .et_pb_button { transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .et_pb_button:hover { padding: 12px 20px !important; } /* --- Gravity Forms ------------------------------------------------------ GF 2.10 ships its own theme framework whose selectors outrank plain class rules, so these overrides are deliberately !important. They reproduce the design's Input component: canvas fill, 1px #d8d8d8 hairline, 4px radius. */ .rs-gform .gform_wrapper .gform_fields { row-gap: 16px !important; column-gap: 16px !important; } /* the design's forms carry no "* indicates required fields" legend */ .rs-gform .gform_wrapper .gform_required_legend { display: none !important; } .rs-gform .gform_wrapper .gfield_label { font: 500 14px/1.6 Inter, Arial, sans-serif !important; color: #080808 !important; margin-bottom: 8px !important; } .rs-gform .gform_wrapper .gfield_required { color: #898989 !important; font-weight: 400; } .rs-gform .gform_wrapper input[type=text], .rs-gform .gform_wrapper input[type=email], .rs-gform .gform_wrapper input[type=tel], .rs-gform .gform_wrapper textarea, .rs-gform .gform_wrapper select { font: 400 16px/1.6 Inter, Arial, sans-serif !important; letter-spacing: -0.16px; color: #080808 !important; background: #ffffff !important; border: 1px solid #d8d8d8 !important; border-radius: 4px !important; padding: 12px 16px !important; width: 100% !important; box-sizing: border-box; box-shadow: none !important; height: auto !important; min-height: 0 !important; } .rs-gform .gform_wrapper select { appearance: auto; line-height: 1.6 !important; } .rs-gform .gform_wrapper input:focus, .rs-gform .gform_wrapper textarea:focus, .rs-gform .gform_wrapper select:focus { outline: 2px solid #2090d0 !important; outline-offset: 1px; border-color: #2090d0 !important; } .rs-gform .gform_wrapper .gform_footer { margin: 16px 0 0 !important; padding: 0 !important; } .rs-gform .gform_wrapper .gform_footer input[type=submit], .rs-gform .gform_wrapper .gform_footer button { font: 500 16px/1.6 Inter, Arial, sans-serif !important; letter-spacing: -0.16px; color: #ffffff !important; background: #2090d0 !important; border: none !important; border-radius: 4px !important; padding: 14px 24px !important; cursor: pointer; width: 100% !important; height: auto !important; box-shadow: none !important; text-transform: none !important; } .rs-gform .gform_wrapper .gform_footer input[type=submit]:hover { background: #1a7fba !important; } .rs-gform .gform_wrapper .gfield_description { font: 400 14px/1.6 Inter, Arial, sans-serif !important; color: #898989 !important; padding-top: 6px !important; } /* radio row: the design shows the three options inline as bordered pills */ .rs-gform .gform_wrapper .gfield_radio { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; } .rs-gform .gform_wrapper .gfield_radio .gchoice { display: flex !important; align-items: center; gap: 8px; width: auto !important; flex: 0 0 auto; border: 1px solid #d8d8d8; border-radius: 4px; padding: 10px 16px; font: 400 15px/1.4 Inter, Arial, sans-serif; color: #080808; margin: 0 !important; } .rs-gform .gform_wrapper .gfield_radio .gchoice input[type=radio] { accent-color: #080808; margin: 0 !important; width: 15px !important; height: 15px !important; min-width: 0 !important; min-height: 0 !important; flex: none; padding: 0 !important; } .rs-gform .gform_wrapper .gfield_radio .gchoice label { margin: 0 !important; cursor: pointer; font-size: 15px; padding: 0 !important; } /* the design's textareas are 3 rows (proefles) and 4 rows (contact); GF ships 10 */ #gform_wrapper_2 textarea { height: 96px !important; } #gform_wrapper_3 textarea { height: 120px !important; } /* The design's form grid is repeat(auto-fit, minmax(180px,1fr)), so its paired fields collapse to one column as soon as the card gets narrow. GF's 12-column grid keeps them side by side much longer, which crams them on tablet. */ @media (max-width: 980px) { .rs-gform .gform_wrapper .gform_fields > .gfield { grid-column: 1 / -1 !important; } } .rs-gform .gform_wrapper .gform_validation_errors { border-radius: 4px; } .rs-gform .gform_wrapper .gfield_validation_message, .rs-gform .gform_wrapper .validation_message { font: 400 13px/1.5 Inter, Arial, sans-serif !important; border-radius: 4px; } /* compact variant used inside the homepage hero card */ .rs-gform-compact .gform_wrapper .gfield_radio .gchoice { padding: 9px 13px; font-size: 14px; } .rs-gform-compact .gform_wrapper .gfield_radio .gchoice label { font-size: 14px; } .rs-gform-compact .gform_wrapper .gform_footer input[type=submit] { padding: 13px 20px !important; font-size: 15px !important; } .rs-gform-compact .gform_wrapper .gform_fields { row-gap: 14px !important; column-gap: 12px !important; } /* Home hero: the request card overlaps the photo above it (at every width — the design keeps the -56px pull on mobile too) */ .rs-herocard { margin-top: -56px !important; position: relative; z-index: 2; } /* header */ .rs-header { border-bottom: 1px solid #d8d8d8; background: #ffffff; } .rs-nav .et_pb_menu__menu > nav > ul > li > a { font: 500 14px/1.6 Inter, Arial, sans-serif; color: #080808; } .rs-nav .et_pb_menu__menu > nav > ul > li { padding-right: 24px; } .rs-nav .et_pb_menu__menu > nav > ul > li.current-menu-item > a { color: #080808; text-decoration: underline; text-underline-offset: 6px; } .rs-nav .et_mobile_menu { border-top: 1px solid #d8d8d8; } .rs-nav .et_mobile_menu li a { font: 500 15px/1.6 Inter, Arial, sans-serif; color: #080808; border-bottom: 1px solid #d8d8d8; } .rs-nav .et_pb_menu__wrap { justify-content: flex-end; } /* footer link colour (overrides the in-copy link rule above) */ .rs-flink a { color: #5a5a5a; text-decoration: none; } .rs-flink a:hover { color: #080808; text-decoration: underline; } .rs-flink p { margin: 0 0 8px !important; padding: 0 !important; } .rs-flink p:last-child { margin-bottom: 0 !important; } /* visible keyboard focus everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #2090d0; outline-offset: 2px; } /* Nothing may overflow horizontally. clip rather than hidden: overflow-x:hidden turns body into a scroll container, which silently kills position:sticky on the header. clip blocks horizontal scrolling without creating a scroll container, so the sticky header survives. */ html, body { overflow-x: clip; } /* --- component bits ------------------------------------------------------ */ /* card header: label left, badge/price right */ .rs-cardhead { display: flex !important; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .rs-cardhead > .et_pb_module { margin: 0 !important; } .rs-cardhead-baseline { align-items: baseline; } /* "Meest gekozen" badge */ .rs-badge span { display: inline-flex; align-items: center; background: #146ef5; color: #ffffff; border-radius: 4px; padding: 2px 8px; font: 550 12.8px/1.2 Inter, Arial, sans-serif; } /* numbered list rows (proefles steps) */ .rs-listrow { display: flex !important; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid #d8d8d8; } .rs-listrow > .et_pb_module { margin: 0 !important; } .rs-stepnum { flex: none; width: 28px; } .rs-lt { font: 600 16px/1.4 Inter, Arial, sans-serif; letter-spacing: -0.16px; color: #080808; margin: 0 0 2px !important; padding: 0 !important; } .rs-ld { font: 400 14px/1.55 Inter, Arial, sans-serif; color: #5a5a5a; margin: 0 !important; padding: 0 !important; } /* voorwaarden rows (✓ + title + text) */ .rs-condrow { display: flex !important; gap: 14px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid #d8d8d8; } .rs-condrow > .et_pb_module { margin: 0 !important; } /* process step columns */ .rs-steps > .et_pb_column { padding: 28px 24px 28px 0; border-bottom: 1px solid #d8d8d8; } /* pricing card feature list */ .rs-featlist { border-top: 1px solid #d8d8d8; padding-top: 16px; margin-bottom: 24px !important; } /* location chips */ .rs-chips p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0 !important; } .rs-chips span { border: 1px solid #d8d8d8; border-radius: 4px; padding: 8px 14px; font: 500 14px/1.4 Inter, Arial, sans-serif; color: #080808; } /* dark card list rows */ .rs-darkrow { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.15); } .rs-darkrow p { margin: 0 !important; } /* section head with a trailing link on the right */ .rs-headrow { display: flex !important; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; } .rs-headrow > .et_pb_module { margin: 0 !important; } /* key/value rate rows */ .rs-raterow { display: flex !important; justify-content: space-between; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid #d8d8d8; } .rs-raterow > .et_pb_module { margin: 0 !important; } .rs-raterow-14 { padding: 14px 0; } .rs-listtop { border-top: 1px solid #d8d8d8; } /* comparison table (schakel vs automaat) */ .rs-cmp { display: grid !important; grid-template-columns: minmax(140px,1fr) 1fr 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid #d8d8d8; } .rs-cmp > .et_pb_module { margin: 0 !important; } /* images: the design sizes each slot with a fixed height + cover crop */ .rs-img img { width: 100%; object-fit: cover; display: block; border-radius: 8px; } .rs-img .et_pb_image_wrap { display: block; width: 100%; } .rs-h440 img { height: clamp(320px,34vw,440px); } .rs-h420 img { height: clamp(320px,32vw,420px); } .rs-h400 img { height: clamp(300px,30vw,400px); } .rs-h460 img { height: clamp(340px,36vw,460px); } .rs-h380 img { height: clamp(300px,30vw,380px); } .rs-h360 img { height: clamp(280px,26vw,360px); } /* dark spoedcursus card row */ .rs-split-g40 { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 40px; align-items: center; } /* FAQ accordion — the design is a hairline-separated list, not Divi's boxed toggles */ .rs-faq { border-top: 1px solid #d8d8d8; } .rs-faq .et_pb_toggle { border: 0 !important; border-bottom: 1px solid #d8d8d8 !important; border-radius: 0 !important; padding: 18px 0 !important; background: transparent !important; margin: 0 !important; } .rs-faq .et_pb_toggle_title { font: 600 16px/1.5 Inter, Arial, sans-serif !important; letter-spacing: -0.16px; color: #080808 !important; padding: 0 30px 0 0 !important; cursor: pointer; } /* Divi's toggle marker is a circled glyph from its icon font; the design uses a plain "+". Decorative only — the open/closed state is carried by the toggle's own markup, not by this pseudo-element. */ .rs-faq .et_pb_toggle_title:before { content: "+" !important; font-family: Inter, Arial, sans-serif !important; font-size: 20px !important; font-weight: 400 !important; color: #898989; right: 0; top: 50%; transform: translateY(-50%); margin-top: 0; } .rs-faq .et_pb_toggle_open .et_pb_toggle_title:before { content: "\2212" !important; } .rs-faq .et_pb_toggle_content { font: 400 15px/1.6 Inter, Arial, sans-serif; color: #363636; padding: 12px 0 0 !important; max-width: 680px; } .rs-faq .et_pb_toggle_content p:last-of-type { padding-bottom: 0; } /* FAQ category anchor chips */ .rs-faqchips p { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 !important; padding: 0 !important; } .rs-faqchips a { border: 1px solid #d8d8d8; border-radius: 4px; padding: 9px 15px; font: 500 14px/1.4 Inter, Arial, sans-serif; color: #080808 !important; text-decoration: none !important; } .rs-faqchips a:hover { border-color: #080808; } /* Anchor targets must clear the 85px sticky header. scroll-margin-top does this for native scrolling (location.hash / scrollIntoView); Divi's own script would otherwise intercept the click and scroll straight to the element's top, so a small capture-phase handler (see the head integration) hands anchor clicks back to the browser. */ html { scroll-behavior: smooth; } .rs-anchor { scroll-margin-top: 100px; } /* centred columns (faalangst, dark CTA, FAQ + tarieven heroes) */ .rs-centered { text-align: center; } .rs-centered > .et_pb_module { margin-left: auto !important; margin-right: auto !important; } .rs-centered p, .rs-centered h1, .rs-centered h2, .rs-centered h3 { text-align: center; } .rs-centered .rs-btnrow { justify-content: center; } /* ...but buttons inside a button row must stay packed together, not auto-centred apart */ .rs-centered .rs-btnrow > .et_pb_module { margin-left: 0 !important; margin-right: 0 !important; } /* inline ✓ hero points (Proefles / Driving school) */ .rs-inlinechecks p { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 !important; padding: 0 !important; } .rs-inlinechecks .rs-inline { display: inline-flex; gap: 8px; align-items: baseline; } .rs-inlinechecks .rs-glyph { font-size: 13px; } /* ✓ / → bullets with 12px gaps (automaat "voor wie") */ .rs-bullets-12 .rs-bullet { gap: 12px; margin-bottom: 12px !important; } /* proefles form-side ✓ list */ .rs-condlist .rs-bullet { margin-bottom: 8px !important; } /* spoedcursus voorwaarden: the ✓ sits in its own flex-none column */ .rs-glyphcol { flex: none; } /* tarieven: "welk pakket past" rows */ .rs-kieshulp { display: flex !important; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid #d8d8d8; } .rs-kieshulp > .et_pb_module { margin: 0 !important; } .rs-kiescol { flex: none; width: 88px; } /* FAQ category heading row */ .rs-faqcathead { display: flex !important; align-items: baseline; gap: 14px; margin-bottom: 12px !important; } .rs-faqcathead > .et_pb_module { margin: 0 !important; } .rs-faqcat { margin-bottom: clamp(40px,5vw,64px) !important; } .rs-faqcat:last-of-type { margin-bottom: 0 !important; } /* contact: address block + big contact links */ .rs-addrblock { padding: 14px 0; border-bottom: 1px solid #d8d8d8; } .rs-addr-name { font: 500 15px/1.5 Inter, Arial, sans-serif; color: #080808; margin: 0 0 2px !important; padding: 0 !important; } .rs-addr-line { font: 400 14px/1.5 Inter, Arial, sans-serif; color: #5a5a5a; margin: 0 0 2px !important; padding: 0 !important; } .rs-addr-note { font: 400 13px/1.5 Inter, Arial, sans-serif; color: #898989; margin: 0 !important; padding: 0 !important; } .rs-contactlink a { text-decoration: none !important; color: #080808 !important; } .rs-contactlink a:hover { text-decoration: underline !important; } .rs-breakall a { word-break: break-all; } /* --- global header ------------------------------------------------------- */ /* Sticky goes on Divi's Theme Builder

wrapper, not on the section inside it: a sticky element can only travel inside its containing block, and that wrapper is exactly the header's own height (85px), so sticking the inner section gives it zero travel and it just scrolls away. The wrapper's containing block is #et-boc (the full page), which is what we want. */ header.et-l--header { position: sticky; top: 0; z-index: 50; } .rs-header { border-bottom: 1px solid #d8d8d8; background: #ffffff; } .rs-header .et_pb_row { padding: 0 !important; } .rs-headbar { display: flex !important; align-items: center; justify-content: space-between; gap: 32px; } .rs-headbar::before, .rs-headbar::after { content: none !important; } .rs-headbar > .et_pb_column { width: auto !important; margin: 0 !important; float: none !important; } .rs-brand { flex: none; } .rs-logo img { height: 34px; width: auto; display: block; border-radius: 0; } .rs-navwrap { display: flex !important; align-items: center; justify-content: flex-end; gap: 32px; flex: 1; } .rs-navwrap > .et_pb_module { margin: 0 !important; } .rs-headcta > .et_pb_module { margin: 0 !important; } .rs-nav .et_pb_menu__logo-wrap { display: none; } .rs-nav .et_pb_menu__menu > nav > ul { display: flex; gap: 24px; align-items: center; } .rs-nav .et_pb_menu__menu > nav > ul > li { padding-right: 0 !important; margin: 0; } .rs-nav .et_pb_menu__menu > nav > ul > li > a { font: 500 14px/1.6 Inter, Arial, sans-serif !important; color: #080808 !important; text-decoration: none; padding: 0; } .rs-nav .et_pb_menu__menu > nav > ul > li.current-menu-item > a { text-decoration: underline; text-underline-offset: 6px; } .rs-nav .et_pb_menu__wrap { justify-content: flex-end; } /* the design drops the nav links below 1120px; Divi's hamburger takes over */ @media (max-width: 1120px) { .rs-nav .et_pb_menu__menu { display: none !important; } .rs-nav .et_mobile_nav_menu { display: block !important; } } @media (min-width: 1121px) { .rs-nav .et_mobile_nav_menu { display: none !important; } } .rs-nav .et_mobile_menu { border-top: 3px solid #2090d0; } .rs-nav .et_mobile_menu li a { font: 500 15px/1.6 Inter, Arial, sans-serif; color: #080808; border-bottom: 1px solid #d8d8d8; padding: 12px 5%; } .rs-nav .mobile_menu_bar:before { color: #080808; font-size: 26px; } /* Small-screen header. The supplied design overflows horizontally below ~600px: its 254px-wide wordmark plus the 188px CTA cannot fit (the .dc.html pages measure scrollWidth 505 at a 360/390px viewport). The brief requires no horizontal scrolling, so below 600px we shrink the wordmark and drop the header CTA — the design's own fixed bottom conversion bar already carries the identical "Proefles" CTA at these widths, which is exactly what it is for. */ @media (max-width: 600px) { .rs-header { padding-left: 20px !important; padding-right: 20px !important; } .rs-logo img { height: 26px; } .rs-headcta { display: none !important; } .rs-navwrap { gap: 12px; } } /* --- global footer ------------------------------------------------------- */ .rs-footer { border-top: 1px solid #d8d8d8; background: #ffffff; } .rs-footer .et_pb_row { padding: 0 !important; } /* the design puts the brand at the left and groups the four link columns to the right with 32px gaps (not evenly distributed across the full width) */ .rs-footgrid { display: flex !important; flex-wrap: wrap; gap: 32px; justify-content: flex-start; align-items: flex-start; } .rs-footgrid > .et_pb_column { width: auto !important; margin: 0 !important; float: none !important; } .rs-footbrand { max-width: 280px; margin-right: auto !important; } .rs-flogo img { height: 30px; width: auto; max-width: 100%; display: block; border-radius: 0; } .rs-footlegal { border-top: 1px solid #d8d8d8; padding-top: 16px; margin-top: 32px !important; }