/* * Header- en layoutcorrecties na de Elementor Pro-verwijdering (Phase 4b/4d) * * BELANGRIJK - waar de kleuren nu vandaan komen: * De menu-, submenu- en hamburgerkleuren staan NIET meer in dit bestand. * Ze zijn gezet als instellingen op de ekit-nav-menu widget zelf, waardoor * Elementor ze uitschrijft in wp-content/uploads/elementor/css/post-315.css * (en post-15.css). Dat is de juiste plek: het blijft bewerkbaar in de * Elementor-editor en heeft de hoogste specificiteit. * * Reden dat het eerst niet werkte: Elementor genereert * .elementor-315 .elementor-element.elementor-element-e18377a * .elementskit-navbar-nav > li > a { color:#000000 } * en die selector wint het van iedere handgeschreven regel hier. * * Gebruikte kleuren komen uit de Elementor Kit van deze site: * primary/accent #00AEEF text #302A2B "Wit" #FFFFFF * * Wat hieronder overblijft, zijn zaken die NIET via widget-instellingen kunnen. */ /* ------------------------------------------------------------------ * * 1. Actieve pagina markeren met een blauwe onderlijn in plaats van een vlak * Het origineel had hiervoor de CSS-klasse "underline" met eigen Custom CSS * (een Pro-functie). Dit is het gratis equivalent. * * LET OP - waarom een pseudo-element en geen inset-schaduw: * de menulink is even hoog als de header (80px, zie post-315.css) en heeft * verticaal geen padding. Een schaduw onderaan die doos komt daardoor * ongeveer 28px onder de tekst uit. Het pseudo-element hieronder lijnt uit * op het hart van de link, waardoor de streep op een vaste, kleine afstand * onder de tekst blijft staan - ongeacht de hoogte van de header. * ------------------------------------------------------------------ */ @media (min-width: 1025px) { .elementskit-navbar-nav > li > a.ekit-menu-nav-link { position: relative; } .elementskit-navbar-nav > li.current-menu-item > a.ekit-menu-nav-link::after, .elementskit-navbar-nav > li.current_page_item > a.ekit-menu-nav-link::after { content: ""; position: absolute; left: 15px; right: 15px; top: calc(50% + 16px); height: 3px; background-color: #00AEEF; pointer-events: none; } } .elementskit-navbar-nav > li.current-menu-item > a.ekit-menu-nav-link, .elementskit-navbar-nav > li.current_page_item > a.ekit-menu-nav-link { background-color: transparent; } /* geen achtergrondvlak bij klikken/ingedrukt houden */ .elementskit-navbar-nav > li > a.ekit-menu-nav-link:active, .elementskit-navbar-nav > li > a.ekit-menu-nav-link.active { background-color: transparent; background-image: none; } /* ------------------------------------------------------------------ * * 2. Leesbaarheid boven de lichte delen van de hero-afbeelding * ------------------------------------------------------------------ */ .elementskit-navbar-nav > li > a.ekit-menu-nav-link { text-shadow: 1px 2px rgba(0, 0, 0, .55); } /* ------------------------------------------------------------------ * * 3. Uitklapmenu: donkere ondergrond zodat de witte tekst leesbaar is * ------------------------------------------------------------------ */ .elementskit-submenu-panel { background-color: #302A2B; } .elementskit-submenu-panel > li > a:hover, .elementskit-submenu-panel > li > a:focus-visible { background-color: #00AEEF; } /* ------------------------------------------------------------------ * * 4. Mobiel/tablet: het uitschuifmenu dezelfde opmaak als het uitklapmenu * op desktop - donkere ondergrond, witte tekst, blauw bij aanwijzen. * * WAAROM HIER WEL !important STAAT * ElementsKit zet in widgets/init/assets/css/nav-menu.css: * .ekit_menu_responsive_tablet > .elementskit-navbar-nav-default * { background-color: #f7f7f7 } * Dat is precies even specifiek als een eigen regel (twee klassen), en dat * bestand wordt door de widget zelf ingeladen en belandt daardoor NA dit * bestand in de pagina. Bij gelijke specificiteit wint de laatste regel. * Zonder !important bleef het paneel dus lichtgrijs met witte tekst erop - * precies het probleem dat gemeld werd. * ------------------------------------------------------------------ */ @media (max-width: 1024px) { /* het uitschuifpaneel zelf */ .ekit_menu_responsive_tablet > .elementskit-navbar-nav-default, .ekit_menu_responsive_mobile > .elementskit-navbar-nav-default, .elementskit-menu-container.elementskit-menu-offcanvas-elements, .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements { background-color: #302A2B !important; background-image: none !important; } /* de balk met het sluitkruis bovenin het paneel */ .elementskit-nav-identity-panel { background-color: #302A2B !important; } .elementskit-navbar-nav > li > a.ekit-menu-nav-link { text-shadow: none; color: #FFFFFF !important; } /* scheidingslijn tussen de items, net als in het uitklapmenu */ .elementskit-navbar-nav > li + li { border-top: 1px solid rgba(255, 255, 255, .12); } .elementskit-navbar-nav > li > a.ekit-menu-nav-link:hover, .elementskit-navbar-nav > li > a.ekit-menu-nav-link:focus-visible { background-color: #00AEEF !important; color: #FFFFFF !important; } /* huidige pagina: blauwe balk aan de linkerkant */ .elementskit-navbar-nav > li.current-menu-item > a.ekit-menu-nav-link, .elementskit-navbar-nav > li.current_page_item > a.ekit-menu-nav-link { box-shadow: inset 3px 0 0 0 #00AEEF; } /* uitklapbare subitems binnen het paneel */ .elementskit-navbar-nav .elementskit-submenu-panel { background-color: rgba(255, 255, 255, .06) !important; } .elementskit-navbar-nav .elementskit-submenu-panel > li > a { color: #FFFFFF !important; } .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover, .elementskit-navbar-nav .elementskit-submenu-panel > li:hover > a { background-color: #00AEEF !important; color: #FFFFFF !important; } .elementskit-submenu-indicator, .ekit-submenu-indicator-icon { color: #FFFFFF !important; fill: #FFFFFF !important; border-color: rgba(255, 255, 255, .5) !important; } /* * Hamburger- en sluitknop. * Alle toestanden expliciet vastleggen, ook :focus en :active: op een * aanraakscherm blijft de knop na het tikken in focus staan en kreeg hij * daardoor een afwijkende achtergrondkleur. */ button.elementskit-menu-hamburger, button.elementskit-menu-hamburger:hover, button.elementskit-menu-hamburger:focus, button.elementskit-menu-hamburger:focus-visible, button.elementskit-menu-hamburger:active, button.elementskit-menu-close, button.elementskit-menu-close:hover, button.elementskit-menu-close:focus, button.elementskit-menu-close:focus-visible, button.elementskit-menu-close:active { background-color: transparent !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, .45) !important; color: #FFFFFF !important; border-radius: 3px !important; outline: none !important; -webkit-tap-highlight-color: transparent; } button.elementskit-menu-hamburger:hover, button.elementskit-menu-close:hover { border-color: #00AEEF !important; color: #00AEEF !important; } button.elementskit-menu-hamburger .elementskit-menu-hamburger-icon { background-color: #FFFFFF !important; height: 2px !important; } button.elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon { background-color: #00AEEF !important; } /* het sluitkruis is bij ElementsKit letterlijk de tekst "X" */ button.elementskit-menu-close { font-size: 18px; line-height: 1; font-weight: 600; } } /* ------------------------------------------------------------------ * * 5. Logo en hamburger niet meer door de hero-tekst * * De header-secties hebben margin-bottom: -250px met z-index 1, zodat de * header over de hero-afbeelding valt. Op desktop klopt dat; op kleinere * schermen is 250px te veel en schuift het logo over de titel. * * Let op: in de praktijk gebruikt ElementsKit op ALLE pagina's template 315 * ("Header services", conditie entire_site). Template 15 ("Header", * conditie front_page) wordt niet toegepast. Beide element-ids staan * hieronder, zodat het ook klopt als die conditie later wordt hersteld. * * 98f001d / 4db8f3b = sectie en logo in template 15 * ed4e19a / 08f24df = sectie en logo in template 315 <- nu actief * ------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-element-98f001d, .elementor-element-ed4e19a { margin-bottom: -120px; } } @media (max-width: 767px) { /* * LET OP - wat hier WEL en NIET werkt. * * Hier stonden ook margin-bottom:0 en een eigen padding voor de * headersectie. Die hebben nooit iets gedaan: Elementor schrijft * .elementor-315 .elementor-element.elementor-element-ed4e19a * { margin-bottom: -250px; } * @media(max-width:767px) ... { padding: 0px 10px 0px 10px; } * uit in post-315.css. Die selectors tellen drie klassen en winnen het * van de enkele klasse hieronder, ongeacht de laadvolgorde. Ze zijn * verwijderd omdat dode regels die suggereren iets te regelen alleen maar * verwarren. * * Gevolg: de header ligt op mobiel met -250px over de hero heen. Dat is * bewust zo gelaten - die waarde bepaalt op ELKE pagina waar de hero * begint, en op de andere pagina's klopt de uitlijning. * * De achtergrondkleur hieronder werkt wel: Elementor zet die voor deze * sectie niet, dus er is geen concurrerende regel. */ .elementor-element-98f001d, .elementor-element-ed4e19a { background-color: rgba(48, 42, 43, .55); } /* * De mobiele logomaat staat NIET meer hier maar als instelling op de * image-widget zelf (width_mobile = 85px op widget 08f24df in header * 315). Daardoor blijft hij bewerkbaar in de Elementor-editor en staat * de maat op een plek in plaats van twee. * * Alleen 4db8f3b - het logo in header-template 15 - houdt hier een * bovengrens. Dat template wordt in de praktijk niet toegepast, maar de * regel staat er zodat het ook klopt als die conditie ooit terugkomt. */ .elementor-element-4db8f3b img { max-width: 85px; height: auto; } .elementor-element-98f001d > .elementor-container, .elementor-element-ed4e19a > .elementor-container { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; } } /* header altijd boven de hero-inhoud */ .elementor-element-98f001d, .elementor-element-ed4e19a { position: relative; z-index: 10; } /* ------------------------------------------------------------------ * * 6. Reviewblok "5-sterrenspecialist" op volle kolombreedte * De widget had dit als per-widget Custom CSS staan - een Pro-functie die * zonder Pro niet werd toegepast, waardoor het blok smal bleef. * ------------------------------------------------------------------ */ .ss-review-carousel, #ss-review-carousel, [id*="5ss-review"], .elementor-widget-html .ss-review-carousel { max-width: 100% !important; width: 100% !important; } .elementor-widget-html iframe[src*="5sterrenspecialist"] { width: 100% !important; max-width: 100% !important; display: block; } /* ------------------------------------------------------------------ * * 7. Globale linkkleur * * Het thema Hello Elementor zet in assets/css/reset.css: * a { color: #c36 } (roze) * Dat is een themastandaard die niets met deze huisstijl te maken heeft. * Overal waar Elementor zelf geen kleur meegeeft - bijvoorbeeld in het * contactformulier - sloeg dat roze door. * * Bewust GEEN !important en dezelfde lage specificiteit als het thema: * dit bestand wordt later ingeladen dan reset.css en wint daardoor al, * terwijl elke Elementor-instelling er nog steeds overheen kan. * ------------------------------------------------------------------ */ a { color: #00AEEF; } a:hover, a:focus-visible { color: #302A2B; } /* ------------------------------------------------------------------ * * 8. (vervallen) * * Hier stond een regel die op tablet en mobiel de negatieve ondermarge * van de divider-widgets op nul zette. Die is verwijderd. * * Reden: de blauwe streepjes staan via hun eigen Custom CSS op * position:absolute. Bij een absoluut gepositioneerd element doen die * marges niets voor de omringende tekst, dus de regel loste niets op - * maar hij verstoorde wel de uitlijning van het oorspronkelijke ontwerp, * dat op desktop juist correct was. * * De streepjes staan nu weer exact zoals ze in de opgeslagen layout en in * de oorspronkelijke Custom CSS bedoeld zijn, inclusief de pulserende * animatie (thb-scrollanimation) in elementor-custom-css.css. * ------------------------------------------------------------------ */