/* * Gymna rebrand 2026 — CSS-overrides voor plugin-output. * * Refereert aan Elementor's globale CSS-custom-properties (gegenereerd door de actieve kit). * Custom-color-id's komen uit de kit `_elementor_page_settings` van post 7: * - system text = Gymna Black #29282A var(--e-global-color-text) * - system primary = Gymna Grey #807F83 var(--e-global-color-primary) * - system accent = Gymna Red #D22730 var(--e-global-color-accent) (na kit-fix) * - f55fd98 = Base Blue #7E97AD * - a27bdfe = Light blue #A9BED1 * - 641e984 = Dark Green #91A89E * - c9fddcd = Base Green #A4B7B1 * - f794e80 = Base Peach #E98277 * - cd946e1 = Wit #FFFFFF * - e70ac76 = Light Grey #F0F2F1 * * Fallback hex wordt meegegeven voor het geval de Elementor kit-CSS nog niet ingeladen * is (volgorde-issue op kale plugin-rendered fragmenten). */ /* ============================================================ * 1. AW product-label badges (uit awcf-allround-web-custom-modules plugin) * ============================================================ */ /* Korting-badge (bijv. "-26%"). * Merlijn 2026-08-03 ronde 2b: border weg, was Gymna Grey rand. */ .aw-product-label-item.korting { background-color: var(--e-global-color-f794e80, #E98277) !important; /* Base Peach */ border-top: 1px solid var(--e-global-color-primary, #807F83) !important; border-bottom: 1px solid var(--e-global-color-primary, #807F83) !important; border-left: none !important; border-right: none !important; color: var(--e-global-color-cd946e1, #FFFFFF) !important; flex: 1; max-width: 90px; padding: 3px; font-size: 20px; margin-top: 20px; position: relative; top: 20px; } /* "NEW" / generieke label-badge ("Gratis draagtas", "Meest verkocht"). * Merlijn 2026-08-03 ronde 2b: expliciet !important zodat evt. plugin-defaults * geen "light green" overrulen. */ .aw-product-label-item.label { color: var(--e-global-color-c9fddcd, #A4B7B1) !important; /* Base Green */ background: transparent !important; border-top: 1px solid var(--e-global-color-primary, #807F83) !important; border-bottom: 1px solid var(--e-global-color-primary, #807F83) !important; border-left: none !important; border-right: none !important; flex: 3; font-size: 20px; padding: 3px 0; margin-top: 20px; position: relative; top: 20px; } /* ============================================================ * 2. WooCommerce — bestel-CTA op single product * * Merlijn 2026-07-09: felgroene knoppen op productpagina's naar Base Blue. * Betreft de "Direct bestellen" / .single_add_to_cart_button. Child-theme * style.css had bg #4fbe9e !important — via child-theme-cleanup patch 6 * gestript zodat deze regel zichtbaar wordt. * ============================================================ */ .single-product .single_add_to_cart_button, .single-product button.single_add_to_cart_button, .woocommerce .single_add_to_cart_button.button.alt, .single-product .checkout-button { background-color: var(--e-global-color-f55fd98, #7E97AD) !important; /* Base Blue */ color: var(--e-global-color-cd946e1, #FFFFFF) !important; border-color: var(--e-global-color-f55fd98, #7E97AD) !important; } .single-product .single_add_to_cart_button:hover, .single-product button.single_add_to_cart_button:hover, .single-product .checkout-button:hover { background-color: var(--e-global-color-text, #29282A) !important; /* hover: Gymna Black */ color: var(--e-global-color-cd946e1, #FFFFFF) !important; border-color: var(--e-global-color-text, #29282A) !important; } /* ============================================================ * 3. WooCommerce variation swatches — geselecteerde optie * * Selectors hangen af van de actieve swatches-implementatie. Op gymna.awdev.nl is * géén woo-variation-swatches-plugin actief; vermoedelijk wordt dit door een * theme-/custom-functie gerenderd. Selectors hieronder zijn defensief en dekken * de meest voorkomende patterns. Verifieer na deploy of de juiste swatch wordt * getroffen; pas anders selector aan. * ============================================================ */ .swatch-wrapper.selected, .variations-swatch.selected, .variable-item.selected, .product-option--selected, .aw-swatch.is-selected, .aw-swatch[aria-checked="true"] { background-color: var(--e-global-color-c9fddcd, #A4B7B1) !important; /* Base Green */ border-color: var(--e-global-color-c9fddcd, #A4B7B1) !important; color: var(--e-global-color-text, #29282A) !important; } .swatch-wrapper:not(.selected), .variations-swatch:not(.selected), .variable-item:not(.selected), .aw-swatch:not(.is-selected) { background-color: var(--e-global-color-cd946e1, #FFFFFF); color: var(--e-global-color-text, #29282A); } /* ============================================================ * 4. FacetWP — filter-checkbox knoppen (workshop + blog filter-rij) * * Bevestigd 2026-06-29: normal = wit bg + Gymna Black tekst + Gymna Black * border. Hover en active (checked) = andersom (Gymna Black bg + wit tekst). * Geldt voor de "Alle X" knop (`.facetwp-facet-alle-*`) zonder .checked én * voor checked categorieën. * ============================================================ */ .facetwp-checkbox { background-color: var(--e-global-color-cd946e1, #FFFFFF); border: 1px solid var(--e-global-color-text, #29282A); color: var(--e-global-color-text, #29282A); padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } /* Tekst-elementen binnen .facetwp-checkbox: expliciet Gymna Black (overrult * kit a-link rule en eventuele spans die hun eigen styling hebben). */ .facetwp-checkbox a, .facetwp-checkbox .facetwp-display-value, .facetwp-checkbox .facetwp-counter { color: var(--e-global-color-text, #29282A) !important; } /* Hover: Gymna Black bg, Wit tekst. */ .facetwp-checkbox:hover { background-color: var(--e-global-color-text, #29282A); border-color: var(--e-global-color-text, #29282A); color: var(--e-global-color-cd946e1, #FFFFFF) !important; } .facetwp-checkbox:hover a, .facetwp-checkbox:hover .facetwp-display-value, .facetwp-checkbox:hover .facetwp-counter { color: var(--e-global-color-cd946e1, #FFFFFF) !important; } /* Active / checked: zelfde als hover (Gymna Black bg, Wit tekst). */ .facetwp-checkbox.checked, .facetwp-checkbox[aria-pressed="true"], .facetwp-checkbox.is-active { background-color: var(--e-global-color-text, #29282A); border-color: var(--e-global-color-text, #29282A); color: var(--e-global-color-cd946e1, #FFFFFF) !important; } .facetwp-checkbox.checked a, .facetwp-checkbox.checked .facetwp-display-value, .facetwp-checkbox.checked .facetwp-counter, .facetwp-checkbox[aria-pressed="true"] a, .facetwp-checkbox[aria-pressed="true"] .facetwp-display-value, .facetwp-checkbox[aria-pressed="true"] .facetwp-counter, .facetwp-checkbox.is-active a, .facetwp-checkbox.is-active .facetwp-display-value, .facetwp-checkbox.is-active .facetwp-counter { color: var(--e-global-color-cd946e1, #FFFFFF) !important; } /* ============================================================ * 4b. FacetWP filter-rij op /blog/ en /workshops/ — outlined Base Blue * * Merlijn 2026-08-06: de filter-knoppen-rij op de blog- en workshop- * paginas krijgt uniforme outlined-Base-Blue-styling: * - Niet aangeklikt: transparant + Base Blue border + Base Blue tekst. * - Hover / aangeklikt (.checked / [aria-pressed="true"] / .is-active): * Base Blue bg + wit tekst + Base Blue border. * * Geldt voor drie facets: * - .facetwp-facet-categorie_blog (Blog: Lees alle artikelen + * Behandelingen, Fysio Snacks, * Osteopathie, Praktijkvoering) * - .facetwp-facet-categorie_workshop (Workshop-categorieen) * - .facetwp-facet-alle-workshops ("Alle workshops" toon-alles-knop) * * !important nodig omdat child-theme style.css legacy-regels bevat op * .facetwp-facet-categorie_workshop (regel 1080-1086: #19343C bg). * * Vervangt de eerdere sectie 12 (Lees-alle-artikelen als solide Base Blue) * en sectie 4b (categorie_workshop met Gymna Black tekst in rust). * ============================================================ */ .facetwp-facet-categorie_blog .facetwp-checkbox, .facetwp-facet-categorie_workshop .facetwp-checkbox, .facetwp-facet-alle-workshops .facetwp-checkbox { background-color: transparent !important; border: 1px solid var(--e-global-color-f55fd98, #7E97AD) !important; } .facetwp-facet-categorie_blog .facetwp-checkbox, .facetwp-facet-categorie_blog .facetwp-checkbox a, .facetwp-facet-categorie_blog .facetwp-checkbox .facetwp-display-value, .facetwp-facet-categorie_blog .facetwp-checkbox .facetwp-counter, .facetwp-facet-categorie_workshop .facetwp-checkbox, .facetwp-facet-categorie_workshop .facetwp-checkbox a, .facetwp-facet-categorie_workshop .facetwp-checkbox .facetwp-display-value, .facetwp-facet-categorie_workshop .facetwp-checkbox .facetwp-counter, .facetwp-facet-alle-workshops .facetwp-checkbox, .facetwp-facet-alle-workshops .facetwp-checkbox a, .facetwp-facet-alle-workshops .facetwp-checkbox .facetwp-display-value, .facetwp-facet-alle-workshops .facetwp-checkbox .facetwp-counter { color: var(--e-global-color-f55fd98, #7E97AD) !important; } .facetwp-facet-categorie_blog .facetwp-checkbox:hover, .facetwp-facet-categorie_blog .facetwp-checkbox.checked, .facetwp-facet-categorie_blog .facetwp-checkbox[aria-pressed="true"], .facetwp-facet-categorie_blog .facetwp-checkbox.is-active, .facetwp-facet-categorie_workshop .facetwp-checkbox:hover, .facetwp-facet-categorie_workshop .facetwp-checkbox.checked, .facetwp-facet-categorie_workshop .facetwp-checkbox[aria-pressed="true"], .facetwp-facet-categorie_workshop .facetwp-checkbox.is-active, .facetwp-facet-alle-workshops .facetwp-checkbox:hover, .facetwp-facet-alle-workshops .facetwp-checkbox.checked, .facetwp-facet-alle-workshops .facetwp-checkbox[aria-pressed="true"], .facetwp-facet-alle-workshops .facetwp-checkbox.is-active { background-color: var(--e-global-color-f55fd98, #7E97AD) !important; border-color: var(--e-global-color-f55fd98, #7E97AD) !important; color: var(--e-global-color-cd946e1, #FFFFFF) !important; } .facetwp-facet-categorie_blog .facetwp-checkbox:hover a, .facetwp-facet-categorie_blog .facetwp-checkbox:hover .facetwp-display-value, .facetwp-facet-categorie_blog .facetwp-checkbox:hover .facetwp-counter, .facetwp-facet-categorie_blog .facetwp-checkbox.checked a, .facetwp-facet-categorie_blog .facetwp-checkbox.checked .facetwp-display-value, .facetwp-facet-categorie_blog .facetwp-checkbox.checked .facetwp-counter, .facetwp-facet-categorie_blog .facetwp-checkbox[aria-pressed="true"] a, .facetwp-facet-categorie_blog .facetwp-checkbox[aria-pressed="true"] .facetwp-display-value, .facetwp-facet-categorie_blog .facetwp-checkbox[aria-pressed="true"] .facetwp-counter, .facetwp-facet-categorie_blog .facetwp-checkbox.is-active a, .facetwp-facet-categorie_blog .facetwp-checkbox.is-active .facetwp-display-value, .facetwp-facet-categorie_blog .facetwp-checkbox.is-active .facetwp-counter, .facetwp-facet-categorie_workshop .facetwp-checkbox:hover a, .facetwp-facet-categorie_workshop .facetwp-checkbox:hover .facetwp-display-value, .facetwp-facet-categorie_workshop .facetwp-checkbox:hover .facetwp-counter, .facetwp-facet-categorie_workshop .facetwp-checkbox.checked a, .facetwp-facet-categorie_workshop .facetwp-checkbox.checked .facetwp-display-value, .facetwp-facet-categorie_workshop .facetwp-checkbox.checked .facetwp-counter, .facetwp-facet-categorie_workshop .facetwp-checkbox[aria-pressed="true"] a, .facetwp-facet-categorie_workshop .facetwp-checkbox[aria-pressed="true"] .facetwp-display-value, .facetwp-facet-categorie_workshop .facetwp-checkbox[aria-pressed="true"] .facetwp-counter, .facetwp-facet-categorie_workshop .facetwp-checkbox.is-active a, .facetwp-facet-categorie_workshop .facetwp-checkbox.is-active .facetwp-display-value, .facetwp-facet-categorie_workshop .facetwp-checkbox.is-active .facetwp-counter, .facetwp-facet-alle-workshops .facetwp-checkbox:hover a, .facetwp-facet-alle-workshops .facetwp-checkbox:hover .facetwp-display-value, .facetwp-facet-alle-workshops .facetwp-checkbox:hover .facetwp-counter, .facetwp-facet-alle-workshops .facetwp-checkbox.checked a, .facetwp-facet-alle-workshops .facetwp-checkbox.checked .facetwp-display-value, .facetwp-facet-alle-workshops .facetwp-checkbox.checked .facetwp-counter, .facetwp-facet-alle-workshops .facetwp-checkbox[aria-pressed="true"] a, .facetwp-facet-alle-workshops .facetwp-checkbox[aria-pressed="true"] .facetwp-display-value, .facetwp-facet-alle-workshops .facetwp-checkbox[aria-pressed="true"] .facetwp-counter, .facetwp-facet-alle-workshops .facetwp-checkbox.is-active a, .facetwp-facet-alle-workshops .facetwp-checkbox.is-active .facetwp-display-value, .facetwp-facet-alle-workshops .facetwp-checkbox.is-active .facetwp-counter { color: var(--e-global-color-cd946e1, #FFFFFF) !important; } /* ============================================================ * 5. Section-context overrides * * Voor secties waarvan de child-buttons in loop-templates zitten (zoals * c92c19a met blog-loop, of 274e74c met een product-loop). Loop-templates * worden op meerdere pages gebruikt, dus we kunnen ze NIET per-page via * Elementor-data anders kleuren — we doen dat hier via CSS-context. * ============================================================ */ /* Blog-loop secties (patroon 'Fysio nieuws en inspiratie'). Sectie-bg is * Base Green (blog-loop-section-fix). Loop-cards (post 327) hebben een witte * gradient-overlay onderaan de afbeelding, dus de knop staat op (semi)wit. * Daarom: Gymna Black bg + Wit tekst voor leesbaarheid. * IDs: c92c19a (homepage), 378f1f9 (Contact), * 5a2a832 (Winkelwagen), c90c48e (Gymna Medical), 4d30a4b (product tpl). * Bevestigd 2026-07-01. * * Merlijn 2026-07-09: About sectie d38f245 uit deze set gehaald. * Sectie-bg wordt daar Light Grey (about-blog-section-lightgrey.php) en * cards-buttons krijgen Base Blue — zie sectie 11 hieronder. */ .elementor-element-c92c19a .elementor-button, .elementor-element-c92c19a .elementor-widget-button .elementor-button, .elementor-element-378f1f9 .elementor-button, .elementor-element-378f1f9 .elementor-widget-button .elementor-button, .elementor-element-5a2a832 .elementor-button, .elementor-element-5a2a832 .elementor-widget-button .elementor-button, .elementor-element-c90c48e .elementor-button, .elementor-element-c90c48e .elementor-widget-button .elementor-button, .elementor-element-4d30a4b .elementor-button, .elementor-element-4d30a4b .elementor-widget-button .elementor-button { background-color: var(--e-global-color-text, #29282A) !important; /* Gymna Black */ color: var(--e-global-color-cd946e1, #FFFFFF) !important; /* Wit */ border-color: transparent !important; } /* 274e74c — Homepage: 'Ontdek ons assortiment' sectie. * Bg = Base Blue via Elementor-data. Buttons binnen (categorie-cards) wit. */ .elementor-element-274e74c .elementor-button, .elementor-element-274e74c .elementor-widget-button .elementor-button { background-color: var(--e-global-color-cd946e1, #FFFFFF) !important; color: var(--e-global-color-text, #29282A) !important; border-color: transparent !important; } /* 2443336 — Doelgroep: 'Premium essentials' grid sectie. * Bg = Light Grey. Standaard ghost button (transparent + Gymna Black). */ .elementor-element-2443336 .elementor-button { background-color: transparent !important; border: 1px solid var(--e-global-color-text, #29282A) !important; color: var(--e-global-color-text, #29282A) !important; } /* 2443336 op WC-productpagina (single-product) → Dark Green button */ .single-product .elementor-element-2443336 .elementor-button { background-color: var(--e-global-color-641e984, #91A89E) !important; border-color: transparent !important; color: var(--e-global-color-cd946e1, #FFFFFF) !important; } /* 0b64f38 — Doelgroep: 'Nu met 475 euro extra voordeel' container. * Ghost button (transparent + Gymna Black). */ .elementor-element-0b64f38 .elementor-button { background-color: transparent !important; border: 1px solid var(--e-global-color-text, #29282A) !important; color: var(--e-global-color-text, #29282A) !important; } /* Vragen-sectie (h2='Vragen?') — Bg = Base Peach via Elementor-data. * Child-buttons wit. Geen ID-selector mogelijk; selecteren we via attribute * van de heading. Werkt als de h2 inderdaad "Vragen?" als title heeft. * Backup: in Elementor-data is dit ook gefixed voor de directe child-buttons, * deze CSS pakt eventuele loop-buttons binnen die sectie. */ /* ============================================================ * 6. Mega-menu Deals-item (#desktopNavigatieDeals) * * Mega-menu rendert items als . Elementor * heeft geen per-item color-setting in de mega-menu widget, dus styling per * specifiek item kan alleen via CSS. Migrated from child-theme style.css * (waar het hard-coded #e23a4e / #4fbe9e was) naar deze AWCF-module met * brand-globals via CSS-vars. 2026-06-29: van Gymna Red naar Gymna Black * (gebruiker wil geen rood accent meer op de Deals-tab). * ============================================================ */ #desktopNavigatieDeals a span, #desktopNavigatieDeals .e-n-menu-title-text { color: var(--e-global-color-403ed89, #29282A) !important; /* Gymna Black */ } #desktopNavigatieDeals a:hover span, #desktopNavigatieDeals .e-n-menu-title:hover .e-n-menu-title-text, #desktopNavigatieDeals a span:hover { color: var(--e-global-color-primary, #807F83) !important; /* Gymna Grey */ } /* ============================================================ * 7. TI WooCommerce Wishlist — Inkooplijst-tabel op /winkelwagen/ * * Plugin rendert .tinv-wishlist met eigen HTML. Default styling gebruikt * accent-rood voor links en teal/groen voor add-to-cart. Vervangen door * brand-globals via CSS-vars. * ============================================================ */ /* Product-titel links: Gymna Black, hover Gymna Red */ .tinv-wishlist a.tinvwl-product-title, .tinv-wishlist .product-name a, .tinv-wishlist .product-name { color: var(--e-global-color-text, #29282A) !important; } .tinv-wishlist a.tinvwl-product-title:hover, .tinv-wishlist .product-name a:hover { color: var(--e-global-color-e686f65, #D22730) !important; } /* Doorgestreepte oude prijs: Gymna Grey */ .tinv-wishlist .product-price del, .tinv-wishlist .product-price del .amount, .tinv-wishlist .product-price del .woocommerce-Price-amount { color: var(--e-global-color-primary, #807F83) !important; } /* Nieuwe prijs: Gymna Black */ .tinv-wishlist .product-price ins, .tinv-wishlist .product-price .amount { color: var(--e-global-color-text, #29282A) !important; } /* Add-to-cart button binnen wishlist: Dark Green + Wit, hover Gymna Black */ .tinv-wishlist .product-action .button, .tinv-wishlist a.button.alt, .tinv-wishlist .product-action button.button { background-color: var(--e-global-color-641e984, #91A89E) !important; color: var(--e-global-color-cd946e1, #FFFFFF) !important; border-color: var(--e-global-color-641e984, #91A89E) !important; } .tinv-wishlist .product-action .button:hover, .tinv-wishlist a.button.alt:hover, .tinv-wishlist .product-action button.button:hover { background-color: var(--e-global-color-text, #29282A) !important; color: var(--e-global-color-cd946e1, #FFFFFF) !important; border-color: var(--e-global-color-text, #29282A) !important; } /* "X" verwijder-knop / remove icon: Gymna Grey */ .tinv-wishlist .product-remove button, .tinv-wishlist .product-remove .button { color: var(--e-global-color-primary, #807F83) !important; } .tinv-wishlist .product-remove button:hover, .tinv-wishlist .product-remove .button:hover { color: var(--e-global-color-e686f65, #D22730) !important; } /* ============================================================ * 8. Levertijd-badge (● tekst) op single product * * Renderer: allroundweb-child/functions.php print * ● ... (postmeta `levertijd`) * en optioneel `.aw-levertijd-orange`. In child-theme style.css stond hard-coded * #4FBE9E en #EC8D16. Migrated naar Gymna Black via brand-global. De originele * regels worden uit child-theme/style.css gestripped. * ============================================================ */ .aw-levertijd-green, .aw-levertijd-orange { color: var(--e-global-color-403ed89, #29282A) !important; /* Gymna Black */ } /* ============================================================ * 9. Gravity Forms — submit-knop op offerte-formulieren (Merlijn 2026-07-09) * * Klant: submit-knop van offerteformulieren (Osteopathie, Shockwave, Elexeo, * en meer) moet #7E97AD (Base Blue) worden. Container-bg wordt Light Blue * via offerte-form-styling.php (Elementor-data patch). Child-theme * style.css bevatte .aw-gymna-form .gform_button en #gform_submit_button_4 * met bg #4fbe9e !important — via child-theme-cleanup patches 10+11 * gestript zodat deze regel wint. * ============================================================ */ .gform_wrapper .gform_footer .gform_button, .gform_wrapper input[type="submit"].gform_button, .aw-gymna-form .gform_footer .gform_button, #gform_submit_button_4 { background-color: var(--e-global-color-f55fd98, #7E97AD) !important; color: var(--e-global-color-cd946e1, #FFFFFF) !important; border-color: var(--e-global-color-f55fd98, #7E97AD) !important; } .gform_wrapper .gform_footer .gform_button:hover, .gform_wrapper input[type="submit"].gform_button:hover, .aw-gymna-form .gform_footer .gform_button:hover, #gform_submit_button_4:hover { background-color: var(--e-global-color-text, #29282A) !important; color: var(--e-global-color-cd946e1, #FFFFFF) !important; border-color: var(--e-global-color-text, #29282A) !important; } /* ============================================================ * 10. WooCommerce winkelmand knoppen (Merlijn 2026-07-09) * * Klant: op /winkelmand/ (post 18) moeten de tabs 'Winkelwagen' / * 'Inkooplijst' en 'Terug naar de winkel' Dark Green (#91A89E) worden, * zonder omlijning. De Elementor button-widgets ea2b7f0 (Winkelwagen tab) * en b3b4c9d (Inkooplijst tab) op post 18 vallen buiten `solid-button- * border-none.php` omdat hun bg wit is; CSS-override is de nette route. * * Selectors dekken WooCommerce block-cart, klassieke cart, én de twee * Elementor button-widgets in de tabs-header van /winkelmand/. * ============================================================ */ .woocommerce-cart .wc-backward, .woocommerce-cart a.button.wc-backward, .wc-block-cart .wc-block-components-button, .wc-block-cart .wc-block-cart__submit-button, .woocommerce-cart table.cart .button, .woocommerce-cart .actions .button { background-color: var(--e-global-color-641e984, #91A89E) !important; /* Dark Green */ color: var(--e-global-color-cd946e1, #FFFFFF) !important; border: none !important; } .woocommerce-cart .wc-backward:hover, .woocommerce-cart a.button.wc-backward:hover, .wc-block-cart .wc-block-components-button:hover, .woocommerce-cart table.cart .button:hover, .woocommerce-cart .actions .button:hover { background-color: var(--e-global-color-text, #29282A) !important; color: var(--e-global-color-cd946e1, #FFFFFF) !important; border: none !important; } .page-id-18 #winkelwagen-button:not(.active) .elementor-button, .page-id-18 #inkooplijst-button:not(.active) .elementor-button { background-color: transparent !important; color: var(--e-global-color-641e984, #91A89E) !important; border: 1px solid var(--e-global-color-641e984, #91A89E) !important; } .page-id-18 #winkelwagen-button.active .elementor-button, .page-id-18 #inkooplijst-button.active .elementor-button { background-color: var(--e-global-color-641e984, #91A89E) !important; color: var(--e-global-color-cd946e1, #FFFFFF) !important; border: 1px solid var(--e-global-color-641e984, #91A89E) !important; } .page-id-18 #winkelwagen-button .elementor-button:hover, .page-id-18 #inkooplijst-button .elementor-button:hover { background-color: var(--e-global-color-641e984, #91A89E) !important; color: var(--e-global-color-cd946e1, #FFFFFF) !important; border-color: var(--e-global-color-641e984, #91A89E) !important; } /* ============================================================ * 11. About blog-sectie context (Merlijn 2026-07-09) * * Post 44 (About) sectie d38f245 heeft nu Light Grey bg (via * about-blog-section-lightgrey.php). Cards-buttons in de loop erin * (post 327) mogen Base Blue bg + Wit tekst zijn. Overrulet blog-loop- * standaard uit sectie 5. * * Selector alleen actief in About-context: body.page-id-44. * ============================================================ */ body.page-id-44 .elementor-element-d38f245 .elementor-button, body.page-id-44 .elementor-element-d38f245 .elementor-widget-button .elementor-button { background-color: var(--e-global-color-f55fd98, #7E97AD) !important; /* Base Blue */ color: var(--e-global-color-cd946e1, #FFFFFF) !important; border-color: transparent !important; } body.page-id-44 .elementor-element-d38f245 .elementor-button:hover, body.page-id-44 .elementor-element-d38f245 .elementor-widget-button .elementor-button:hover { background-color: var(--e-global-color-text, #29282A) !important; color: var(--e-global-color-cd946e1, #FFFFFF) !important; } /* ============================================================ * 12. (vervallen 2026-08-06) * * De eerdere sectie 12 zette `.facetwp-checkbox[data-value="lees-alle- * artikelen"]` in alle states op solide Base Blue. Merlijn 2026-08-06: * de hele filter-rij op /blog/ en /workshops/ moet uniform outlined * Base Blue zijn (niet aangeklikt) en solide Base Blue + wit (aangeklikt). * Verplaatst naar sectie 4b (unified regel voor drie facets). * ============================================================ */ /* ============================================================ * 13. Elementor Loop-Grid — "Meer laden"-knop (Merlijn 2026-08-03) * * Klant: op /product/gymna-shockmaster-500/ heeft de "Meer laden"-knop nu een * rode achtergrond met zwarte tekst. Geen expliciete kleur-wens van klant; * gekozen voor consistentie met andere secundaire CTA's: Base Blue bg + Wit * tekst, hover Gymna Black. * * Selector dekt de load-more anchor + button variant die Elementor Pro's * Loop-Grid rendert. * ============================================================ */ .e-loop__load-more .elementor-button, .e-load-more-anchor + .e-loop__load-more .elementor-button, .elementor-widget-loop-grid .e-loop__load-more a.elementor-button { background-color: var(--e-global-color-f55fd98, #7E97AD) !important; color: var(--e-global-color-cd946e1, #FFFFFF) !important; border: none !important; } .e-loop__load-more .elementor-button:hover, .e-loop__load-more .elementor-button:focus { background-color: var(--e-global-color-text, #29282A) !important; color: var(--e-global-color-cd946e1, #FFFFFF) !important; } .e-loop__load-more .elementor-button .elementor-button-text { color: var(--e-global-color-cd946e1, #FFFFFF) !important; } .fysiotechniekButton, .fysiotechniekButton:hover, .fysiotechniekButton:focus, .fysiotechniekButton.active { border: none !important; outline: none !important; } .elementor-popup-modal:has([data-elementor-id="20537"]) .dialog-widget-content, .elementor-popup-modal:has([data-elementor-id="20537"]) .dialog-message, .elementor-popup-modal:has([data-elementor-id="20739"]) .dialog-widget-content, .elementor-popup-modal:has([data-elementor-id="20739"]) .dialog-message, .elementor-popup-modal:has([data-elementor-id="31696"]) .dialog-widget-content, .elementor-popup-modal:has([data-elementor-id="31696"]) .dialog-message { background-color: var(--e-global-color-a27bdfe, #A9BED1) !important; }