/* Theme Name: Hello Elementor Child - GG Schilderwerken Description: Child theme van Hello Elementor voor ggschilderwerken.nl. Bevat de herregistratie van het post type "projecten" (voorheen in het SalesWizard-thema). Template: hello-elementor Version: 1.7.2 Author: Anne-Fleur Schotsman */ /* * Containerbreedte voor de WPBakery-content. * Het SalesWizard-thema wikkelde de pagina-inhoud in
; * zonder die wrapper plakt de tekst tegen de schermrand. Volle-breedte-rijen * (data-vc-full-width) worden door WPBakery's eigen JS weer uitgerekt. */ .elementor-widget-theme-post-content .wpb-content-wrapper { max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } /* * Vaste afspraak-knop: maatvoering van de afbeeldingen * (de positionering komt uit de SalesWizard-CSS, .gregory-link). */ .gregory-link > img { height: 70px; width: auto; border-radius: 5px 0 0 5px; object-fit: cover; } .gregory-link .grey-wrapper img { width: 27px; height: auto; } .gregory-link p { color: #fff; } /* * Hero-achtergrond voor projectpagina's (gezet via CSS-klasse op de * hero-sectie in het Elementor-template, want afbeeldingen in * geimporteerde templates verliezen hun koppeling). */ .gg-hero-projecten { background-image: url(/wp-content/uploads/PROJECTEN-hero-image.jpg) !important; background-size: cover !important; background-position: center center !important; } /* * Blogartikelen: artikelinhoud in een gecentreerde kolom * (blogposts hebben geen WPBakery-wrapper). */ body.single-post .elementor-widget-theme-post-content { max-width: 900px; margin-left: auto; margin-right: auto; padding: 30px 15px 60px; } /* * Kolommen met een overlay-link (big_link) hebben een positioned parent nodig. */ .vc_column-inner:has(> .big_link) { position: relative; } /* * WPBakery-knoppen in de huisstijl. Het thema verving de knop-template door * ; de standaard vc_btn3-markup krijgt hier * dezelfde stijl (goud, wit, pijltje) als op de live site. */ .vc_btn3-container .vc_btn3.vc_general { background-color: #CA9E01 !important; color: #fff !important; border: none !important; border-radius: 5px; padding: 18px 35px; font-size: 20px; font-weight: 400; line-height: 1; font-family: inherit; } /* Zelfde pijl als live (.btn::after) op alle WPBakery-knoppen, wit gemaakt. */ .vc_btn3-container .vc_btn3.vc_general::after { content: ""; background-image: url('data:image/svg+xml,'); display: inline-block; width: 16px; height: 16px; margin-left: 10px; background-size: contain; background-repeat: no-repeat; background-position: center; filter: brightness(0) invert(1); vertical-align: middle; border: none; } /* Knoppen: block-container met eigen hoogte, zoals .btn-container op live. */ .vc_btn3-container { position: relative; z-index: 5; margin-top: 0; } /* ========================================================= * Mobiele weergave hero — 1-op-1 met de live site: * - Google-badge verborgen vanaf 991px (live: .google-review-wrapper{display:none}) * - herohoogte 500px (<=991) / 300px (<=768), subpagina's 325px (<=450) * - H1 28px / regelhoogte 45px * - USP-balk toont 1 punt tegelijk, roulerend (live: splide perPage 1, 4s) * De hero is te herkennen aan de background-overlay die alleen daar staat. * ========================================================= */ @media (max-width: 991px) { .elementor-section:has(> .elementor-background-overlay) .elementor-widget-image.elementor-absolute { display: none; } .elementor-section:has(> .elementor-background-overlay) { min-height: 500px !important; } .elementor-section:has(> .elementor-background-overlay) h1 { line-height: 45px !important; } } @media (max-width: 767px) { .elementor-section:has(> .elementor-background-overlay) { min-height: 300px !important; } .elementor-section:has(> .elementor-background-overlay) h1 { font-size: 28px !important; line-height: 45px !important; } /* USP-balk: één punt tegelijk, zelfde ritme als de slider op live */ .elementor-section:has(> .elementor-background-overlay) .elementor-inner-section:has(.elementor-widget-icon-list) > .elementor-container { position: relative; min-height: 42px; } .elementor-section:has(> .elementor-background-overlay) .elementor-inner-section:has(.elementor-widget-icon-list) > .elementor-container > .elementor-column { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; animation: ggUspRotate 16s linear infinite; } .elementor-section:has(> .elementor-background-overlay) .elementor-inner-section:has(.elementor-widget-icon-list) > .elementor-container > .elementor-column:nth-child(1) { animation-delay: 0s; } .elementor-section:has(> .elementor-background-overlay) .elementor-inner-section:has(.elementor-widget-icon-list) > .elementor-container > .elementor-column:nth-child(2) { animation-delay: 4s; } .elementor-section:has(> .elementor-background-overlay) .elementor-inner-section:has(.elementor-widget-icon-list) > .elementor-container > .elementor-column:nth-child(3) { animation-delay: 8s; } .elementor-section:has(> .elementor-background-overlay) .elementor-inner-section:has(.elementor-widget-icon-list) > .elementor-container > .elementor-column:nth-child(4) { animation-delay: 12s; } .elementor-section:has(> .elementor-background-overlay) .elementor-inner-section:has(.elementor-widget-icon-list) .elementor-icon-list-items { justify-content: center; } } @keyframes ggUspRotate { 0%, 23% { opacity: 1; } 28%, 100% { opacity: 0; } } @media (max-width: 450px) { .elementor-section:has(> .elementor-background-overlay) { min-height: 325px !important; } } /* Knop krijgt de marge (live: .btn{margin-top:15px}); de container blijft * block met eigen hoogte, anders overlapt de sectie erna de knop. */ .vc_btn3-container .vc_btn3.vc_general { margin-top: 15px; } /* Google-reviewbadge in elke hero op vaste maat rechts, zoals live. */ .elementor-section:has(> .elementor-background-overlay) .elementor-widget-image.elementor-absolute img { width: 300px; max-width: 300px; height: auto; display: block; margin-left: auto; } /* De tekstkolom van het grijze blok mag meegroeien met zijn inhoud. * Met een vaste hoogte steekt de knop onder de rij uit, waardoor de * sectie erna eroverheen valt en de knop niet meer klikbaar is. */ .left_img_bg_right .column:has(.wpb_text_column) > .vc_column-inner, .right_img_bg_left .column:has(.wpb_text_column) > .vc_column-inner { height: auto; } /* Tekstkolom één laag omhoog: blijft onder de foto (z-index 2), maar boven * de sectie die erna komt. Anders vangt die sectie de klik op de knop. */ .left_img_bg_right .column:has(.wpb_text_column) > .vc_column-inner, .right_img_bg_left .column:has(.wpb_text_column) > .vc_column-inner { z-index: 1 !important; } /* ========================================================= * Mobiele header - 1-op-1 met de live site. * Live toont onder 992px: het Google-reviewbalkje bovenaan, * het contactregeltje, het logo en het * hamburgermenu. De socials staan op live alleen op desktop. * * ========================================================= */ @media (max-width: 991px) { /* Google-reviewbalkje bovenaan, zoals .google-review-header op live */ .elementor-location-header > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap::before { content: ""; display: block; width: 100%; height: 30px; background: url(/wp-content/uploads/GOOGLE-REVIEWS-MOBIEL.svg) no-repeat center top; background-size: 97px auto; } /* rij 2: logo gecentreerd met de hamburger rechts, zoals live */ .elementor-location-header .elementor-inner-section:nth-of-type(2) { position: relative !important; } .elementor-location-header .elementor-inner-section:nth-of-type(2) .elementor-column:nth-child(1) { width: 100% !important; } .elementor-location-header .elementor-inner-section:nth-of-type(2) .elementor-column:nth-child(1) .elementor-widget-image { text-align: center; } .elementor-location-header .elementor-inner-section:nth-of-type(2) .elementor-column:nth-child(2) { width: 0 !important; } .elementor-location-header .elementor-menu-toggle { position: absolute !important; right: 0; top: 50%; transform: translateY(-50%); } /* uitklapmenu over de volle schermbreedte, onder de header * (Elementor hangt het menu in de smalle kolom van de hamburger) */ .elementor-location-header > .elementor-section { position: relative; } /* Elementor zet de kolommen en widgets zelf op relative; daardoor zou het * menu binnen het smalle hamburgervak blijven hangen. */ .elementor-location-header .elementor-inner-section:nth-of-type(2) .elementor-column, .elementor-location-header .elementor-inner-section:nth-of-type(2) .elementor-widget-wrap, .elementor-location-header .elementor-widget-nav-menu { position: static !important; } .elementor-location-header nav.elementor-nav-menu--dropdown { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; z-index: 999; } /* socials: op live alleen op desktop zichtbaar */ .elementor-location-header .elementor-widget-social-icons { display: none; } .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-column:nth-child(1) { display: none; } /* contact: e-mailadres en telefoonnummer naast elkaar op een regel. * (Live verbergt op mobiel het e-mailadres en toont alleen een * telefoon-icoon; op verzoek blijven hier beide gegevens leesbaar.) */ .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-column:nth-child(2) { width: 100% !important; } .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-icon-list-items { display: flex; flex-wrap: nowrap !important; justify-content: flex-start; } .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-icon-list-item { white-space: nowrap; } .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-icon-list-item:not(:last-child) { margin-right: 14px; } } @media (max-width: 767px) { /* op telefoonformaat net iets kleiner, zodat beide gegevens passen * (Elementor zet de tekstgrootte op de link zelf, vandaar !important) */ .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-icon-list-item, .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-icon-list-item a, .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-icon-list-text { font-size: 13px !important; } .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-icon-list-item { margin-right: 8px !important; } .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-icon-list-icon svg { width: 13px; height: 13px; } } @media (max-width: 400px) { /* kleinste telefoons: nog een maatje kleiner */ .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-icon-list-item, .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-icon-list-item a, .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-icon-list-text { font-size: 12px !important; } .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-icon-list-item { margin-right: 6px !important; } .elementor-location-header .elementor-inner-section:nth-of-type(1) .elementor-icon-list-icon svg { width: 12px; height: 12px; } } /* Elementor stapelt onder 768px alle kolommen (100% breed), waardoor de * zwevende header over de herotitel viel. We zetten alleen de kolom- * breedtes terug; de flex-eigenschappen van Elementor blijven ongemoeid * (anders klapt het hamburgermenu niet uit). */ @media (max-width: 767px) { .elementor-location-header img[src*="LOGO"] { width: 90px !important; height: auto !important; } /* hero laat ruimte voor de zwevende header */ .elementor-section:has(> .elementor-background-overlay) > .elementor-container { padding-top: 130px; } } /* ========================================================= * "Contact opnemen"-knop in de hero van de homepage. * Live toont die alleen onder 992px (#hero .hero-btn); die * selector hangt aan het oude thema, vandaar hier opnieuw. * ========================================================= */ .hero-btn { display: none; } @media (max-width: 991px) { .hero-btn { display: block; margin-top: 20px; padding: 12px 30px 14px; border-radius: 5px; background-color: #CA9E01; color: #fff; font-size: 20px; line-height: 1.5; text-align: center; text-decoration: none; } .hero-btn:hover, .hero-btn:focus { background-color: #CA9E01; color: #fff; box-shadow: none; } .hero-btn::after { content: none; } } /* ========================================================= * Google-reviewbadge in de hero: alleen de badge zelf. * Op de hero van de subpagina's stond een grijze achtergrond op de * widget zelf, waardoor er een balk over de volle contentbreedte * verscheen. De homepage heeft die achtergrond niet; hiermee zien * alle pagina's er hetzelfde uit. * ========================================================= */ .elementor-section:has(> .elementor-background-overlay) .elementor-widget-image.elementor-absolute, .elementor-section:has(> .elementor-background-overlay) .elementor-widget-image.elementor-absolute > .elementor-widget-container { background-color: transparent !important; background-image: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ========================================================= * Hero van blogartikelen en de kennisbank: in die twee sjablonen * is bij de afbeeldingswidget geen afbeelding gekozen, waardoor * Elementors grijze plaatshouder in beeld kwam. Hier tonen we * dezelfde Google-reviewbadge als op alle andere pagina's. * ========================================================= */ .elementor-section:has(> .elementor-background-overlay) img[src*="/elementor/assets/images/placeholder.png"] { content: url("/wp-content/uploads/GOOGLE-REVIEW.svg"); width: 300px; max-width: 300px; height: auto; display: block; margin-left: auto; } @media (max-width: 991px) { .elementor-section:has(> .elementor-background-overlay) img[src*="/elementor/assets/images/placeholder.png"] { display: none; } }