/* Rijschool Oude Maas – Full page (mobiel) menu: roze ronde knop + fullscreen overlay. 1-op-1 gebaseerd op rijschool-oude-maas-fullpage-menu.html (CSS regel 25-217). BEM: .rom-fpm__* | CSS-vars: --rom-fpm-* (fallback = design-waarden). Ontwerpkleuren: blauw #00A1E1, blauw-diep #0B68A0, navy #073A5E, roze #EB0D6D, roze-diep #D21E7E. Gebruikt door: ROM · Mobiel menu (eigen knop), ROM · Header v2 en ROM · Menu navigatie (daar opent de hamburger in de balk dit menu). Het menu wordt op de frontend door rom-fpmenu.js naar verplaatst (portal) zodat het boven álle Elementor-secties komt. */ .rom-fpm, .rom-fpm *, .rom-fpm__menu, .rom-fpm__menu * { box-sizing: border-box; } /* Reset binnen het menu, zodat thema-stijlen (marges op lijsten/koppen) niets verschuiven. Het menu staat op de frontend buiten .rom-scope (portal naar ). */ .rom-fpm__menu ul, .rom-fpm__menu li, .rom-fpm__menu p { margin: 0; padding: 0; list-style: none; } .rom-fpm__menu button { font: inherit; color: inherit; } /* ---------- Knop (hamburger -> kruis) ---------- */ .rom-fpm__toggle { position: fixed; top: calc(var(--rom-fpm-toggle-top, 14px) + env(safe-area-inset-top, 0px)); right: calc(var(--rom-fpm-toggle-right, 16px) + env(safe-area-inset-right, 0px)); z-index: calc(var(--rom-fpm-z, 2147483000) + 1); width: var(--rom-fpm-toggle-size, 50px); height: var(--rom-fpm-toggle-size, 50px); margin: 0; padding: 0; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--rom-fpm-toggle-grad1, #EB0D6D), var(--rom-fpm-toggle-grad2, #D21E7E)); box-shadow: 0 10px 24px var(--rom-fpm-toggle-shadow, rgba(235, 13, 109, .35)); cursor: pointer; display: grid; place-items: center; transition: transform .25s cubic-bezier(.22, .8, .3, 1); -webkit-appearance: none; appearance: none; line-height: 0; } .rom-fpm__toggle:hover { transform: scale(1.05); } .rom-fpm__toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .rom-fpm__toggle span { grid-area: 1 / 1; display: block; width: 22px; height: 3px; background: var(--rom-fpm-toggle-bar, #fff); border-radius: 3px; transition: transform .35s cubic-bezier(.22, .8, .3, 1), opacity .2s; } .rom-fpm__toggle span:nth-child(1) { transform: translateY(-6px); } .rom-fpm__toggle span:nth-child(3) { transform: translateY(6px); } .rom-fpm__toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); } .rom-fpm__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } .rom-fpm__toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); } /* Sluitknop ín het menu (header v2 / menu navigatie: de hamburger in de balk ligt onder het menu) */ .rom-fpm__toggle--close { position: absolute; z-index: 3; } /* ---------- Overlay ---------- */ .rom-fpm__menu { position: fixed; inset: 0; z-index: var(--rom-fpm-z, 2147483000); margin: 0; padding: 0; font-family: 'Poppins', system-ui, sans-serif; color: var(--rom-fpm-text, #fff); background: linear-gradient(165deg, var(--rom-fpm-bg1, #00A1E1) 0%, var(--rom-fpm-bg2, #0B68A0) 50%, var(--rom-fpm-bg3, #073A5E) 100%); clip-path: circle(0 at var(--rom-fpm-origin-x, calc(100% - 41px)) var(--rom-fpm-origin-y, 39px)); visibility: hidden; transition: clip-path .6s cubic-bezier(.22, .8, .3, 1), visibility 0s linear .6s; overflow: hidden; } .rom-fpm__menu.is-open { clip-path: circle(160% at var(--rom-fpm-origin-x, calc(100% - 41px)) var(--rom-fpm-origin-y, 39px)); visibility: visible; transition: clip-path .6s cubic-bezier(.22, .8, .3, 1), visibility 0s; } /* Wegdek: schuine baan met streeplijn als decor, rechtsonder */ .rom-fpm__menu::before { content: ""; position: absolute; right: -30%; bottom: -12%; width: 120%; height: 34%; background: var(--rom-fpm-road, rgba(255, 255, 255, .05)); transform: rotate(-14deg); pointer-events: none; } .rom-fpm__menu::after { content: ""; position: absolute; right: -30%; bottom: 5%; width: 120%; height: 3px; background: repeating-linear-gradient(90deg, var(--rom-fpm-dash, rgba(255, 255, 255, .28)) 0 44px, transparent 44px 80px); transform: rotate(-14deg); transform-origin: right center; pointer-events: none; } .rom-fpm__menu--no-decor::before, .rom-fpm__menu--no-decor::after { display: none; } /* dvh zodat het op iPhone echt in beeld past, ook met Safari-balk */ .rom-fpm__inner { position: relative; z-index: 1; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top, 0px)) 24px calc(18px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .rom-fpm__brand { display: flex; align-items: center; height: 46px; flex: none; padding-right: 64px; /* ruimte voor de sluitknop */ text-decoration: none; } .rom-fpm__brand img { display: block; height: var(--rom-fpm-brand-h, 34px); width: auto; max-width: 100%; } /* ---------- Navigatie ---------- */ .rom-fpm__nav { margin: auto 0; padding: 12px 0; } .rom-fpm__nav ul { list-style: none; margin: 0; padding: 0; } .rom-fpm__nav > ul > li { opacity: 0; transform: translateY(22px); transition: opacity .45s cubic-bezier(.22, .8, .3, 1), transform .5s cubic-bezier(.22, .8, .3, 1); transition-delay: calc(.18s + var(--i, 0) * .06s); } .rom-fpm__menu.is-open .rom-fpm__nav > ul > li { opacity: 1; transform: none; } .rom-fpm__link { position: relative; display: inline-block; padding: 7px 0; /* 8vw voor breedte, 4.6vh zodat het op kleine iPhones niet uit beeld loopt */ font-size: clamp(26px, min(8vw, 4.6vh), 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--rom-fpm-link, #fff); text-decoration: none; } .rom-fpm__link:hover, .rom-fpm__link:focus, .rom-fpm__link:active { color: var(--rom-fpm-link, #fff); text-decoration: none; } /* Streeplijn die inrijdt onder de tekst bij hover/focus */ .rom-fpm__link::after { content: ""; position: absolute; left: 0; bottom: 4px; height: 4px; width: 0; background: repeating-linear-gradient(90deg, var(--rom-fpm-accent, #EB0D6D) 0 18px, transparent 18px 30px); border-radius: 2px; transition: width .35s cubic-bezier(.22, .8, .3, 1); } .rom-fpm__link:hover::after, .rom-fpm__link:focus-visible::after { width: 100%; } .rom-fpm__link:focus-visible { outline: none; } /* Subitems: Schakel en Automaat onder Auto rijbewijs */ .rom-fpm__sub { margin: 0 0 4px 4px; } .rom-fpm__sub li { list-style: none; } .rom-fpm__sub a { display: inline-flex; align-items: center; gap: 12px; padding: 4px 0; font-size: clamp(19px, min(5.6vw, 3.1vh), 24px); font-weight: 600; letter-spacing: -.01em; color: var(--rom-fpm-sub-link, #fff); text-decoration: none; } .rom-fpm__sub a:hover, .rom-fpm__sub a:focus, .rom-fpm__sub a:active { color: var(--rom-fpm-sub-link, #fff); text-decoration: none; } .rom-fpm__sub a::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--rom-fpm-sub-accent, var(--rom-fpm-accent, #EB0D6D)); transition: width .25s cubic-bezier(.22, .8, .3, 1); } .rom-fpm__sub a:hover, .rom-fpm__sub a:focus-visible { outline: none; } .rom-fpm__sub a:hover::before, .rom-fpm__sub a:focus-visible::before { width: 30px; } /* ---------- Onderkant: gratis proefles ---------- */ .rom-fpm__bottom { flex: none; opacity: 0; transform: translateY(18px); transition: opacity .45s cubic-bezier(.22, .8, .3, 1) .55s, transform .5s cubic-bezier(.22, .8, .3, 1) .55s; } .rom-fpm__menu.is-open .rom-fpm__bottom { opacity: 1; transform: none; } .rom-fpm__cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(135deg, var(--rom-fpm-cta-grad1, #EB0D6D), var(--rom-fpm-cta-grad2, #D21E7E)); color: var(--rom-fpm-cta-text, #fff); text-decoration: none; border-radius: var(--rom-fpm-cta-radius, 20px); padding: 15px 15px 15px 20px; box-shadow: 0 14px 30px var(--rom-fpm-cta-shadow, rgba(235, 13, 109, .35)); transition: transform .25s cubic-bezier(.22, .8, .3, 1); } .rom-fpm__cta:hover, .rom-fpm__cta:focus-visible { transform: translateY(-2px); outline: none; color: var(--rom-fpm-cta-text, #fff); text-decoration: none; } .rom-fpm__cta strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; } .rom-fpm__cta small { display: block; font-size: 13px; font-weight: 500; opacity: .92; margin-top: 1px; } .rom-fpm__arrow { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--rom-fpm-arrow-bg, #fff); color: var(--rom-fpm-arrow, #EB0D6D); display: grid; place-items: center; } .rom-fpm__arrow svg { display: block; width: 20px; height: 20px; } /* ---------- Desktop / tablet ---------- */ @media (min-width: 900px) { .rom-fpm__inner { padding: 28px 64px 40px; display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: auto 1fr; column-gap: 64px; } .rom-fpm__brand { grid-column: 1 / -1; height: 56px; } .rom-fpm__brand img { height: var(--rom-fpm-brand-h, 40px); } .rom-fpm__nav { grid-row: 2; align-self: center; padding: 0; } .rom-fpm__link { font-size: clamp(46px, 5.4vw, 72px); padding: 4px 0; } .rom-fpm__link::after { bottom: 8px; height: 5px; } .rom-fpm__sub { margin: 2px 0 10px 6px; } .rom-fpm__sub a { font-size: 22px; } .rom-fpm__bottom { grid-row: 2; align-self: center; justify-self: end; width: 100%; max-width: 420px; } .rom-fpm__cta { padding: 20px 20px 20px 24px; border-radius: var(--rom-fpm-cta-radius, 24px); } .rom-fpm__cta strong { font-size: 22px; } .rom-fpm__cta small { font-size: 14.5px; } .rom-fpm__arrow { width: 48px; height: 48px; } } @media (prefers-reduced-motion: reduce) { .rom-fpm__menu, .rom-fpm__menu.is-open { transition: visibility 0s; clip-path: none; } .rom-fpm__menu { opacity: 0; } .rom-fpm__menu.is-open { opacity: 1; } .rom-fpm__nav > ul > li, .rom-fpm__bottom, .rom-fpm__link::after, .rom-fpm__toggle span { transition: none; } } /* Body-lock (rom-fpmenu.js zet/haalt weg o.b.v. de "lock_scroll"-control) */ body.rom-fpm-locked { overflow: hidden; } /* Zolang het menu open is, mag er niets anders in beeld zweven: de contactpopup van deze plugin gaat sowieso uit, en rom-fpmenu.js verbergt andere vaste/zwevende elementen (WhatsApp-knoppen, chatbalken, sticky headers, adminbalk) met .rom-fpm-hidden. */ body.rom-fpm-open .rom-contact-popup, body.rom-fpm-open .rom-header.is-sticky, body.rom-fpm-open .rom-nv--pos-fixed, body.rom-fpm-open .rom-nv--pos-sticky { display: none !important; } .rom-fpm-hidden { visibility: hidden !important; pointer-events: none !important; } /* Portal-wrappers dragen alleen de Elementor-classes (voor de stijl-controls) en maken geen box */ .rom-fpm__portal, .rom-fpm__portal-inner { display: contents; } /* ---------- Elementor-editor: het losse menu als vaste preview in de canvas tonen ---------- (niet fixed/fullscreen, altijd open, zodat kleuren/teksten direct zichtbaar zijn) */ .rom-fpm--standalone.rom-fpm--editor, .rom-fpm--standalone.is-editor, body.elementor-editor-active .rom-fpm--standalone, body.elementor-editor-preview .rom-fpm--standalone { position: relative; min-height: 640px; } .rom-fpm--standalone.rom-fpm--editor .rom-fpm__toggle, .rom-fpm--standalone.is-editor .rom-fpm__toggle, body.elementor-editor-active .rom-fpm--standalone .rom-fpm__toggle, body.elementor-editor-preview .rom-fpm--standalone .rom-fpm__toggle { position: absolute; } .rom-fpm--standalone.rom-fpm--editor .rom-fpm__menu, .rom-fpm--standalone.is-editor .rom-fpm__menu, body.elementor-editor-active .rom-fpm--standalone .rom-fpm__menu, body.elementor-editor-preview .rom-fpm--standalone .rom-fpm__menu { position: absolute; clip-path: none !important; visibility: visible !important; opacity: 1 !important; } .rom-fpm--standalone.rom-fpm--editor .rom-fpm__inner, .rom-fpm--standalone.is-editor .rom-fpm__inner, body.elementor-editor-active .rom-fpm--standalone .rom-fpm__inner, body.elementor-editor-preview .rom-fpm--standalone .rom-fpm__inner { height: 100%; min-height: 640px; } .rom-fpm--standalone.rom-fpm--editor .rom-fpm__nav > ul > li, .rom-fpm--standalone.rom-fpm--editor .rom-fpm__bottom, .rom-fpm--standalone.is-editor .rom-fpm__nav > ul > li, .rom-fpm--standalone.is-editor .rom-fpm__bottom, body.elementor-editor-active .rom-fpm--standalone .rom-fpm__nav > ul > li, body.elementor-editor-active .rom-fpm--standalone .rom-fpm__bottom, body.elementor-editor-preview .rom-fpm--standalone .rom-fpm__nav > ul > li, body.elementor-editor-preview .rom-fpm--standalone .rom-fpm__bottom { opacity: 1; transform: none; }