/* ========================================================================== Vos Gietvloeren — aanpassingen n.a.v. feedback Dirk Vos (27-07-2026) Losse overrides bovenop de Elementor-export, zodat de export opnieuw gedraaid kan worden zonder dat deze wijzigingen verloren gaan. ========================================================================== */ :root { /* Schaduw achter alle witte tekst die op een foto staat. Twee lagen: een korte harde voor een scherpe rand tegen lichte vlakken, en een wijde zachte als donkere halo eromheen. Eén plek om de sterkte bij te stellen. */ --vg-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.60); --vg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 1. Geen donkere laag meer over de achtergrondfoto van de headers (slideshow homepage + de headersecties van alle pagina's) -------------------------------------------------------------------------- */ .elementor-element-28ae8392 > .elementor-background-overlay, /* home + gietvloer */ .elementor-element-30925ea > .elementor-background-overlay, /* dienstenpagina's */ .elementor-element-2d3f6a7 > .elementor-background-overlay, /* contact */ .elementor-element-cf70aa4 > .elementor-background-overlay, /* over ons */ .elementor-element-bc2992f > .elementor-background-overlay { /* impressie vloeren */ opacity: 0 !important; } /* -------------------------------------------------------------------------- 2. Teksten in de headersecties dikker voor de leesbaarheid (de foto's zijn licht, dus wit + vet) -------------------------------------------------------------------------- */ .elementor-element-28ae8392 .elementor-heading-title, .elementor-element-30925ea .elementor-heading-title, .elementor-element-2d3f6a7 .elementor-heading-title, .elementor-element-cf70aa4 .elementor-heading-title, .elementor-element-bc2992f .elementor-heading-title { font-weight: 700 !important; } .elementor-element-28ae8392 .elementor-widget-text-editor, .elementor-element-28ae8392 .elementor-widget-text-editor p, .elementor-element-30925ea .elementor-widget-text-editor, .elementor-element-30925ea .elementor-widget-text-editor p, .elementor-element-2d3f6a7 .elementor-widget-text-editor, .elementor-element-2d3f6a7 .elementor-widget-text-editor p, .elementor-element-cf70aa4 .elementor-widget-text-editor, .elementor-element-cf70aa4 .elementor-widget-text-editor p, .elementor-element-bc2992f .elementor-widget-text-editor, .elementor-element-bc2992f .elementor-widget-text-editor p { font-weight: 600 !important; } .elementor-element-28ae8392 .elementor-button-text, .elementor-element-30925ea .elementor-button-text, .elementor-element-2d3f6a7 .elementor-button-text, .elementor-element-cf70aa4 .elementor-button-text, .elementor-element-bc2992f .elementor-button-text { font-weight: 600 !important; } /* kruimelpad in de header */ .elementor-element-30925ea .bdt-ep-breadcrumb, .elementor-element-30925ea .bdt-ep-breadcrumb a, .elementor-element-30925ea .bdt-ep-breadcrumb span, .elementor-element-2d3f6a7 .bdt-ep-breadcrumb, .elementor-element-2d3f6a7 .bdt-ep-breadcrumb a, .elementor-element-2d3f6a7 .bdt-ep-breadcrumb span, .elementor-element-cf70aa4 .bdt-ep-breadcrumb, .elementor-element-cf70aa4 .bdt-ep-breadcrumb a, .elementor-element-cf70aa4 .bdt-ep-breadcrumb span, .elementor-element-bc2992f .bdt-ep-breadcrumb, .elementor-element-bc2992f .bdt-ep-breadcrumb a, .elementor-element-bc2992f .bdt-ep-breadcrumb span { font-weight: 600 !important; } /* Schaduw achter de witte tekst: nu de donkere laag weg is, houdt dit de tekst leesbaar op de lichtste plekken van de foto. */ .elementor-element-28ae8392 .elementor-heading-title, .elementor-element-30925ea .elementor-heading-title, .elementor-element-2d3f6a7 .elementor-heading-title, .elementor-element-cf70aa4 .elementor-heading-title, .elementor-element-bc2992f .elementor-heading-title, .elementor-element-28ae8392 .elementor-widget-text-editor, .elementor-element-30925ea .elementor-widget-text-editor, .elementor-element-2d3f6a7 .elementor-widget-text-editor, .elementor-element-cf70aa4 .elementor-widget-text-editor, .elementor-element-bc2992f .elementor-widget-text-editor, .elementor-element-30925ea .bdt-ep-breadcrumb, .elementor-element-2d3f6a7 .bdt-ep-breadcrumb, .elementor-element-cf70aa4 .bdt-ep-breadcrumb, .elementor-element-bc2992f .bdt-ep-breadcrumb { text-shadow: var(--vg-shadow); } /* de slogan-knop in de homepage-header heeft geen achtergrondkleur */ .elementor-element-2c5fc99 .elementor-button { text-shadow: var(--vg-shadow); } /* -------------------------------------------------------------------------- 3. Homepage — USP-sectie "Excellente afwerking voor kunststofvloeren" Teksten dikker voor de leesbaarheid. -------------------------------------------------------------------------- */ .elementor-element-5656f939 .elementor-heading-title { font-weight: 700 !important; } .elementor-element-5656f939 .elementor-widget-text-editor, .elementor-element-5656f939 .elementor-widget-text-editor p { font-weight: 500 !important; color: #FFFFFF !important; /* was #E6E6E6, verdween in de lichte delen van de foto */ } .elementor-element-5656f939 .elementor-button-text { font-weight: 600 !important; } /* de vier USP-blokken (Persoonlijke Benadering, Maatwerk Oplossingen, … ) */ .elementor-element-5656f939 .elementskit-info-box-title { font-weight: 700 !important; } .elementor-element-5656f939 .elementskit-infobox .box-body > p { font-weight: 500 !important; color: #FFFFFF !important; /* was #D5D5D5, te weinig contrast op de foto */ } /* De vier blokken hebben al een vulling binnen hun witte kader, maar die was lichtgrijs (#A7A3A3) — dat maakte witte tekst juist slechter leesbaar op de lichte delen van de foto. Nu een neutraal donkere vulling in hetzelfde kader. Alleen de kleur verandert, de vorm blijft gelijk. */ .elementor-element-5656f939 .elementor-element-populated > .elementor-background-overlay { background-color: #000000 !important; opacity: 0.34 !important; } .elementor-element-5656f939 .elementor-column:hover > .elementor-element-populated > .elementor-background-overlay { opacity: 0.46 !important; } /* de sectie heeft een lichte foto als achtergrond; dezelfde schaduw als in de headers houdt de witte tekst overal leesbaar */ .elementor-element-5656f939 .elementor-heading-title, .elementor-element-5656f939 .elementor-widget-text-editor, .elementor-element-5656f939 .elementor-button-text, .elementor-element-5656f939 .elementskit-info-box-title, .elementor-element-5656f939 .elementskit-infobox .box-body > p { text-shadow: var(--vg-shadow); } /* -------------------------------------------------------------------------- 4. "Waarom kiezen voor Vos Gietvloeren" — bolletjes vervangen door vinkjes Zelfde vinkje (check-circle) als in de icon-lists elders op de site. 4dcd216 = ondervloeren / polyurethaan (witte tekst op accentblauw) fa47d96 = betonlook / vloercoating / epoxy (grijze tekst op licht vlak) -------------------------------------------------------------------------- */ .elementor-element-4dcd216 .elementor-widget-container ul, .elementor-element-fa47d96 .elementor-widget-container ul { list-style: none; padding-left: 0; } .elementor-element-4dcd216 .elementor-widget-container ul > li, .elementor-element-fa47d96 .elementor-widget-container ul > li { position: relative; padding-left: 1.85em; } .elementor-element-4dcd216 .elementor-widget-container ul > li::before, .elementor-element-fa47d96 .elementor-widget-container ul > li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 1.05em; height: 1.05em; background-color: currentColor; -webkit-mask: var(--vg-check) center / contain no-repeat; mask: var(--vg-check) center / contain no-repeat; } /* op het lichte vlak het vinkje in de accentkleur, tekst blijft grijs */ .elementor-element-fa47d96 .elementor-widget-container ul > li::before { background-color: var(--e-global-color-accent, #028FC8); } /* -------------------------------------------------------------------------- 5. CTA "Neem contact op" op alle pagina's — wit en vetgedrukt Het blok staat op een drukke foto; kop, tekst én de contactgegevens (e-mail, telefoon, adres) moeten er duidelijk uitspringen. -------------------------------------------------------------------------- */ .elementor-element-58bda063 .elementor-heading-title { font-weight: 700 !important; } .elementor-element-a61265c, .elementor-element-a61265c p { font-weight: 600 !important; } .elementor-element-45ef535 .elementor-icon-list-item > a, .elementor-element-45ef535 .elementor-icon-list-text, .elementor-element-9560b76 .elementor-icon-list-item > a, .elementor-element-9560b76 .elementor-icon-list-text { font-weight: 600 !important; color: #FFFFFF !important; } .elementor-element-58bda063 .elementor-heading-title, .elementor-element-a61265c, .elementor-element-45ef535 .elementor-icon-list-item, .elementor-element-9560b76 .elementor-icon-list-item { text-shadow: var(--vg-shadow); } /* -------------------------------------------------------------------------- 6. Homepage — de strook "Topkwaliteit / Vakmanschap / Persoonlijk" Die staat over de headerfoto heen. De titels waren wit maar zonder schaduw, de zinnetjes eronder stonden op #DEDEDE en vielen daardoor helemaal weg tegen de lichte vloer op de foto. -------------------------------------------------------------------------- */ .elementor-element-a120c6e .elementor-icon-box-title, .elementor-element-a120c6e .elementor-icon-box-title a { font-weight: 700 !important; } .elementor-element-a120c6e .elementor-icon-box-description { font-weight: 500 !important; color: #FFFFFF !important; } .elementor-element-a120c6e .elementor-icon-box-title, .elementor-element-a120c6e .elementor-icon-box-title a, .elementor-element-a120c6e .elementor-icon-box-description { text-shadow: var(--vg-shadow); } /* Bedankpagina: knop "Terugkeren naar de homepagina". Deze knop heeft als enige op de site geen eigen kleurregel van Elementor, waardoor de tekst de linkkleur uit de kit erfde (.elementor-kit-4 a, oftewel #028fc8). Dat is precies de achtergrondkleur van de knop, dus het label viel weg. Hieronder expliciet wit, ook op hover en focus. */ .elementor-element-4c1a33b .elementor-button, .elementor-element-4c1a33b .elementor-button:hover, .elementor-element-4c1a33b .elementor-button:focus, .elementor-element-4c1a33b .elementor-button .elementor-button-text { color: #FFFFFF; }