/* Theme Name: OceanWP Child Theme Theme URI: https://oceanwp.org/ Description: OceanWP WordPress theme. Sample child theme. Author: OceanWP Author URI: https://oceanwp.org/ Template: oceanwp Version: 1.0 */ /* AF-111: Visible keyboard focus indicator for WCAG 2.1 AA compliance. Suppress :focus (which fires on mouse click too) then paint a brand-green outline only on :focus-visible (keyboard nav). !important is required to override OceanWP parent's `a:focus { outline: solid 1px !important; }`. */ a:focus, button:focus, input:focus, textarea:focus, select:focus, [tabindex]:focus { outline: none !important; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid #00833F !important; outline-offset: 2px; /* Two-tone ring: white inner + green outer guarantees visibility on dark headers/footers (where solid #00833F outline would be invisible against the brand-green background) AND on white page content. */ box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #00833F !important; } /* AF-111: Premium Nav Menu (Premium Addons for Elementor) override. The widget paints ::before/::after pseudo-elements at z-index:-1 with full-bleed backgrounds, and the .premium-nav-menu-container has a white background that visually swallows the 2px outline. The absolutely-positioned .premium-sub-menu sibling also overlaps focused links from the right. Use inset+outset box-shadow (paints on the link's layer, above pseudos) and z-index:5 to escape the submenu overlap. */ .premium-nav-menu .premium-menu-link:focus-visible, .premium-mobile-menu .premium-menu-link:focus-visible { outline: none !important; box-shadow: inset 0 0 0 2px #00833F, 0 0 0 2px rgba(0, 131, 63, 0.35) !important; border-radius: 2px; position: relative; z-index: 5; } /* Parent stylesheet should be loaded from functions.php not using @import */ /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ /* * Default theme - Owl Carousel CSS File */ .skip-link { padding: 30px !important; font-size: 20px !important; } .owl-theme .owl-nav { margin-top: 10px; text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-nav [class*='owl-'] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #D6D6D6; display: inline-block; cursor: pointer; border-radius: 3px; } .owl-theme .owl-nav [class*='owl-']:hover { background: #869791; color: #FFF; text-decoration: none; } .owl-theme .owl-nav .disabled { opacity: 0.5; cursor: default; } .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 10px; } .owl-theme .owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; } .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791; } #header-menu .sub-menu { /*margin-top: 20px;*/ } #header-menu .sub-menu li.menu-item:hover{ border-bottom: 2px solid #FFA401 } #product-main-menu .premium-mega-content-container { width: 100% !important } #shop-range-nav .premium-ver-toggler { background-color: unset !important; color: #fff; !important; border: 1px solid #fff; !important; padding: 10px 15px; border-radius: 3px; } #shop-range-nav .premium-nav-menu-container { /*margin-top: 15px;*/ } .wcmenucart-details.count { background-color: #FFA401 !important; /*color: #00833F !important;*/ } .wcmenucart-details.count:before { border-color: #FFA401 !important; } .em-btn-orange { -webkit-animation: fadeOut 1s; animation: fadeOut 1s; display: none; } .link-hover-toggle:hover .em-btn-orange { /*display: unset;*/ display: block; /*-webkit-animation: fadeIn 1s;*/ /*animation: fadeIn 1s;*/ } #home-hero-slider h2 { color: #FFA401; font-size: 40px; font-weight: 400; } .footer-menu ul { list-style: none; padding: 0; margin: 0 ; } .elementor .img-extend-right img { max-width: none; } .carbon-dioxide .digit { background: linear-gradient(#ffa401 50%, #db8e02 50%) } .trees-planted .digit { background: linear-gradient(#1F5730 50%, #184023 50%); } #product-sidebar-btn { position: fixed; width: 100px; height: 100px; left: 0; top: 50%; transform-origin: 0% 0%; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg) translateX(-50%); } .hero-slider { height: 400px; overflow: hidden; } .hero-slider-wrapper { /*width: 100%;*/ } .hero-home-slider .premium-woo-product-gallery-images{ display: none !important; } .hero-home-slider .slick-slide .elementor-widget-premium-woo-products .premium-woocommerce .slick-arrow { color: var( --e-global-color-primary ) !important; background-color: var( --e-global-color-secondary ) !important; font-size: 13px !important; } .hero-home-slider .slick-slide .elementor-widget-uael-image-gallery .slick-arrow { visibility: hidden; } .owl-prev, .owl-next { width: 15px; height: 100px; position: absolute; top: 50%; transform: translateY(-50%); display: block !important; border:0px solid black; } .owl-prev { left: 20px; } .owl-next { right: 20px; } .owl-prev i, .owl-next i { /*transform : scale(2,5); */ font-size: 40px; color: #ccc; } .woocommerce div.product form.cart .variations .reset_variations { display: none !important; } .owp-floating-bar { z-index: 99 !important; margin-top: 22px; } .amount { color: #00833F !important;} .footer-menu a{ color: #4A4A4A; } .footer-bottom a { color: #fff; text-decoration: underline; } .featured-products-heading { color: #1F201F; font-size: 35px; font-weight: 500; margin-bottom: 0; padding-bottom: 0; } .wpsl-search { padding-left: 0; padding-right: 0; background-color: transparent; } /* search inputs */ .wpsl-input, #wpsl-results { display: flex !important; align-items: center !important; } .wpsl-input label { font-size: 14px; min-width: 180px; } /* search input button */ .wpsl-search-btn-wrap #wpsl-search-btn { font-size: 16px; font-weight: 700; color: #fff !important; border: none; border-radius: 0; background-color: #00833F !important; background: #00833F; } #wpsl-search-wrap { display: flex; } #wpsl-result-list a { color: #00833F; } .wpsl-store-location p:first-child strong a { color: #00833F !important; } .wpsl-store-location p strong { color: #00833F !important; } .wpsl-direction-wrap .wpsl-directions { margin: 10px 0 !important; padding: 10px 15px !important; color: #fff !important; background-color: #00833F !important; } /*-------------------------------------------------------------- # Job Opening Cards --------------------------------------------------------------*/ .awsm-job-item { background: #fff; border: 1px solid #333 !important; border-radius: 5px; } .awsm-job-post-title { color: var(--e-global-color-primary); } .awsm-job-more { color: var(--e-global-color-primary); } .product-gaurantee .elementor-image-box-content { max-width: 279px; padding: 20px } /* Google Places Autocomplete dropdown - must appear above Elementor popups */ .pac-container { z-index: 999999 !important; } .elementor-icon-list-items { list-style-type: none; margin-top: 0; margin-bottom: 0; margin-right: calc(-2px/2); margin-left: calc(-2px/2); } .footer-social .elementor-icon-list-item { margin-right: calc(2px/2); margin-left: calc(2px/2); } .elementor-icon-list-item a { display: flex; font-size: inherit; align-items: var(--icon-vertical-align,center); } .elementor-icon-list-icon { display: flex; position: relative; top: var(--icon-vertical-offset,initial); } .footer-social i{ width: 1.25em; font-size: 30px; } .woocommerce div.product form.cart, .woo-variation-items-wrapper, table.variations th.label { border: none !important; } table.variations th.label { padding-left: 0 !important; } @media (max-width: 1024px) { .elementor-13 .elementor-element.elementor-element-9202519.premium-nav-ver .premium-ver-inner-container { margin: auto } } /* @media (min-width: 416px) { .home-hero-slider-wrapper .owl-stage, .home-hero-slider-wrapper{ height: 400px !important; overflow-y: hidden !important } .home-hero-slider-wrapper .owl-item { height: 400px !important; } } */ .star-rating-group .gchoice { font-size: 0; display: inline-block !important; } .star-rating-group .ginput_container_radio input { visibility: hidden; } .star-rating-group .ginput_container_radio label { font-size: 0 !important; } .star-rating-group .ginput_container_radio label:before { content: '\f005'; color: #ffab40; font-weight: 400; font-family: Font Awesome\ 5 Free; display: inline-block; font-size: 35px; } .star-rating-group label.hover-effect::before, .star-rating-group .ginput_container_radio label:hover:before, .star-rating-group label.selected-effect::before { font-weight: 900; font-size: 35px !important; } @media (max-width: 415px) { .hero-slider { height: 338px; } .hero-cards .woocommerce-loop-product__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75ch; } .hero-cards .premium-blog-entry-title a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75ch; } .hero-cards .elementor-post__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75ch; } .mobile-header-search-wrapper { height: 24px; } .awsm-job-item h2.awsm-job-post-title { text-align: center } .awsm-jobs-single-title { text-align: center; } .awsm-job-entry-content{ padding: 25px; font-size: 13px; } .awsm-job-specification-job-type { padding-left: 25px; padding-right: 25px; } .footer-cta-links ul { display: table; margin: 0 auto !important; text-align: left; } .footer-cta-links li, .footer-cta-links li a{ text-align: center !important; } } .wpdreams_asp_sc { background: #fff !important; border: 1px solid #B4B4B4 !important; border-radius: 3px !important; } .wpdreams_asp_sc .orig { color: #333 !important; } .wpdreams_asp_sc .orig::placeholder { color: #B4B4B4 !important; } div.asp_m .probox .promagnifier .innericon { background: #fff !important; } div.asp_m .probox .promagnifier .innericon svg { fill: #00833F !important; } .review-text.fold { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; } .review-read-more:hover { cursor: pointer; } .visualiser-button-wrapper { position: absolute !important; z-index: 9999 !important; bottom: 0; left: 10px; } .visualiser-button-wrapper.category-carousel { bottom: 60px !important; /* height: 44px; !important */ left: 3px; !important } /* ============================================ FREE MEASURE & QUOTE FORM STYLES Target: Gravity Forms with ID #free-measure-and-quote-form-simplified ============================================ */ /* CSS CUSTOM PROPERTIES */ #free-measure-and-quote-form-simplified { --green-primary: #00833F; --green-dark: #006B33; --orange-primary: #FFA401; --orange-secondary: #db8e02; --gray-light: #f5f5f5; --gray-border: #e0e0e0; --charcoal: #333333; --charcoal-light: #666666; --white: #FFFFFF; --error-red: #e74c3c; --focus-shadow: rgba(0, 131, 63, 0.1); } /* FORM WRAPPER */ #free-measure-and-quote-form-simplified { font-family: var(--and-text); font-size: 14px; color: var(--charcoal); line-height: 1.6; box-sizing: border-box; } #free-measure-and-quote-form-simplified *, #free-measure-and-quote-form-simplified *::before, #free-measure-and-quote-form-simplified *::after { box-sizing: border-box; } /* FORM BODY */ #free-measure-and-quote-form-simplified .gform_body { margin: 0; padding: 0; } #free-measure-and-quote-form-simplified .gform_fields { display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; list-style: none; } /* FIELD GROUPS */ #free-measure-and-quote-form-simplified .gfield { margin-bottom: 16px; padding: 0; } #free-measure-and-quote-form-simplified .gfield:last-child { margin-bottom: 0; } /* LABELS */ #free-measure-and-quote-form-simplified .gfield_label { display: block; font-size: 12px; font-weight: 600; color: var(--green-primary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; } #free-measure-and-quote-form-simplified .gfield_required, #free-measure-and-quote-form-simplified .gfield_required_asterisk { color: var(--error-red); margin-left: 2px; } #free-measure-and-quote-form-simplified .gfield_required_text { display: none; } /* INPUT CONTAINERS */ #free-measure-and-quote-form-simplified .ginput_container { margin: 0; padding: 0; } /* TEXT INPUTS, EMAIL, PHONE, NUMBER */ #free-measure-and-quote-form-simplified .ginput_container_text input, #free-measure-and-quote-form-simplified .ginput_container_email input, #free-measure-and-quote-form-simplified .ginput_container_phone input, #free-measure-and-quote-form-simplified .ginput_container_number input, #free-measure-and-quote-form-simplified .ginput_container_post_title input, #free-measure-and-quote-form-simplified .ginput_container input[type="text"], #free-measure-and-quote-form-simplified .ginput_container input[type="email"], #free-measure-and-quote-form-simplified .ginput_container input[type="tel"], #free-measure-and-quote-form-simplified .ginput_container input[type="number"] { width: 100%; padding: 12px 14px; border: 1px solid var(--gray-border); border-radius: 4px; font-family: var(--and-text); font-size: 14px; color: var(--charcoal); background: var(--white); transition: all 0.3s ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #free-measure-and-quote-form-simplified .ginput_container_text input:focus, #free-measure-and-quote-form-simplified .ginput_container_email input:focus, #free-measure-and-quote-form-simplified .ginput_container_phone input:focus, #free-measure-and-quote-form-simplified .ginput_container_number input:focus, #free-measure-and-quote-form-simplified .ginput_container_post_title input:focus, #free-measure-and-quote-form-simplified .ginput_container input[type="text"]:focus, #free-measure-and-quote-form-simplified .ginput_container input[type="email"]:focus, #free-measure-and-quote-form-simplified .ginput_container input[type="tel"]:focus, #free-measure-and-quote-form-simplified .ginput_container input[type="number"]:focus { outline: none; border-color: var(--green-primary); box-shadow: 0 0 0 3px var(--focus-shadow); } #free-measure-and-quote-form-simplified .ginput_container input::placeholder { color: #999; } /* TEXTAREAS */ #free-measure-and-quote-form-simplified .ginput_container_textarea textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--gray-border); border-radius: 4px; font-family: var(--and-text); font-size: 14px; color: var(--charcoal); background: var(--white); transition: all 0.3s ease; min-height: 80px; resize: vertical; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #free-measure-and-quote-form-simplified .ginput_container_textarea textarea:focus { outline: none; border-color: var(--green-primary); box-shadow: 0 0 0 3px var(--focus-shadow); } #free-measure-and-quote-form-simplified .ginput_container_textarea textarea::placeholder { color: #999; } /* SELECT DROPDOWNS */ #free-measure-and-quote-form-simplified .ginput_container_select select { width: 100%; padding: 12px 40px 12px 14px; border: 1px solid var(--gray-border); border-radius: 4px; font-family: var(--and-text); font-size: 14px; color: var(--charcoal); background-color: var(--white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; cursor: pointer; transition: all 0.3s ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #free-measure-and-quote-form-simplified .ginput_container_select select:focus { outline: none; border-color: var(--green-primary); box-shadow: 0 0 0 3px var(--focus-shadow); } #free-measure-and-quote-form-simplified .ginput_container_select select option[value=""] { color: #999; } /* MULTI-SELECT (Standard) */ #free-measure-and-quote-form-simplified .ginput_container_multiselect select { width: 100%; padding: 12px 14px; border: 1px solid var(--gray-border); border-radius: 4px; font-family: var(--and-text); font-size: 14px; color: var(--charcoal); background: var(--white); transition: all 0.3s ease; min-height: 120px; } #free-measure-and-quote-form-simplified .ginput_container_multiselect select:focus { outline: none; border-color: var(--green-primary); box-shadow: 0 0 0 3px var(--focus-shadow); } /* CHOSEN.JS MULTI-SELECT STYLING */ #free-measure-and-quote-form-simplified .chosen-container { width: 100% !important; font-family: var(--and-text); font-size: 14px; box-sizing: border-box; } #free-measure-and-quote-form-simplified .chosen-container-multi .chosen-choices { width: 100% !important; padding: 8px 12px; border: 1px solid var(--gray-border); border-radius: 4px; background: var(--white); background-image: none; min-height: 48px; cursor: text; transition: all 0.3s ease; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; box-sizing: border-box; list-style: none; margin: 0; } #free-measure-and-quote-form-simplified .chosen-container-multi.chosen-container-active .chosen-choices { border-color: var(--green-primary); box-shadow: 0 0 0 3px var(--focus-shadow); } #free-measure-and-quote-form-simplified .chosen-container-multi .chosen-choices li.search-field { margin: 0; padding: 0; flex: 1; min-width: 100px; } #free-measure-and-quote-form-simplified .chosen-container-multi .chosen-choices li.search-field input[type="text"], #free-measure-and-quote-form-simplified .chosen-container-multi .chosen-choices li.search-field input.chosen-search-input { font-family: var(--and-text) !important; font-size: 14px !important; color: var(--charcoal) !important; padding: 4px 0 !important; margin: 0 !important; height: auto !important; border: none !important; background: transparent !important; box-shadow: none !important; width: 100% !important; } #free-measure-and-quote-form-simplified .chosen-container-multi .chosen-choices li.search-field input.default { color: #999 !important; } #free-measure-and-quote-form-simplified .chosen-container-multi .chosen-choices li.search-field input[type="text"]::placeholder { color: #999; } /* Selected choices (tags) */ #free-measure-and-quote-form-simplified .chosen-container-multi .chosen-choices li.search-choice { background: var(--green-primary); border: none; border-radius: 4px; padding: 6px 28px 6px 12px; margin: 0; color: var(--white); font-size: 13px; font-weight: 500; box-shadow: none; background-image: none; position: relative; line-height: 1.3; } #free-measure-and-quote-form-simplified .chosen-container-multi .chosen-choices li.search-choice .search-choice-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: none !important; font-size: 0; cursor: pointer; } #free-measure-and-quote-form-simplified .chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before { content: '\00d7'; font-size: 16px; color: var(--white); opacity: 0.8; line-height: 1; } #free-measure-and-quote-form-simplified .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover::before { opacity: 1; } /* Dropdown */ #free-measure-and-quote-form-simplified .chosen-container .chosen-drop { border: 1px solid var(--gray-border); border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); background: var(--white); margin-top: -1px; } #free-measure-and-quote-form-simplified .chosen-container .chosen-results { padding: 0; margin: 0; max-height: 240px; overflow-y: auto; } #free-measure-and-quote-form-simplified .chosen-container .chosen-results li { padding: 10px 14px; font-size: 14px; color: var(--charcoal); border-bottom: 1px solid var(--gray-light); cursor: pointer; transition: background 0.2s ease; } #free-measure-and-quote-form-simplified .chosen-container .chosen-results li:last-child { border-bottom: none; } #free-measure-and-quote-form-simplified .chosen-container .chosen-results li.highlighted { background: var(--green-primary); color: var(--white); } #free-measure-and-quote-form-simplified .chosen-container .chosen-results li.result-selected { background: var(--gray-light); color: var(--charcoal-light); } #free-measure-and-quote-form-simplified .chosen-container .chosen-results li.group-result { font-weight: 600; color: var(--green-primary); background: var(--gray-light); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; cursor: default; } #free-measure-and-quote-form-simplified .chosen-container .chosen-results li.group-result:hover { background: var(--gray-light); color: var(--green-primary); } /* CHECKBOX STYLING */ #free-measure-and-quote-form-simplified .ginput_container_checkbox { margin-top: 4px; } #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox, #free-measure-and-quote-form-simplified .ginput_container_checkbox ul.gfield_checkbox { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; list-style: none; padding: 0; margin: 0; } #free-measure-and-quote-form-simplified .gf_list_4col .ginput_container_checkbox .gfield_checkbox, #free-measure-and-quote-form-simplified.gf_list_4col .ginput_container_checkbox .gfield_checkbox { grid-template-columns: repeat(4, 1fr); } #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox > li, #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox > li.gchoice { display: flex !important; align-items: center; gap: 10px; padding: 12px 14px; margin: 0; background: var(--gray-light); border: 1px solid var(--gray-border); border-radius: 4px; cursor: pointer; transition: all 0.3s ease; position: relative; width: 100% !important; min-width: 0; box-sizing: border-box; } #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox > li:hover { border-color: var(--green-primary); background: var(--white); } #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox > li input[type="checkbox"], #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox > li input.gfield-choice-input { width: 18px !important; height: 18px !important; min-width: 18px; margin: 0 !important; padding: 0 !important; flex-shrink: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 2px solid var(--gray-border); border-radius: 3px; background: var(--white); position: relative; transition: all 0.2s ease; display: inline-block !important; vertical-align: middle; } #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox > li input[type="checkbox"]:checked { background: var(--green-primary); border-color: var(--green-primary); } #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox > li input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); } #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox > li input[type="checkbox"]:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-shadow); } /* Checkbox inline labels */ #free-measure-and-quote-form-simplified .gfield_checkbox li label, #free-measure-and-quote-form-simplified .gfield_checkbox .gchoice label, #free-measure-and-quote-form-simplified .ginput_container_checkbox label.gform-field-label--type-inline { display: inline-block !important; visibility: visible !important; opacity: 1 !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: visible !important; text-indent: 0 !important; font-size: 14px !important; line-height: 1.4 !important; color: #333333 !important; font-family: var(--and-text) !important; font-weight: 500 !important; padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; cursor: pointer !important; white-space: normal !important; flex: 1 !important; text-transform: none !important; letter-spacing: normal !important; } #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox > li:has(input[type="checkbox"]:checked) { background: var(--white); border-color: var(--green-primary); } #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox > li:has(input[type="checkbox"]:checked) label { color: #00833F !important; } /* RADIO BUTTON STYLING */ #free-measure-and-quote-form-simplified .ginput_container_radio .gfield_radio { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; } #free-measure-and-quote-form-simplified .ginput_container_radio .gfield_radio li { margin: 0; padding: 0; } #free-measure-and-quote-form-simplified .ginput_container_radio .gfield_radio li label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--gray-light); border: 1px solid var(--gray-border); border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--charcoal); transition: all 0.3s ease; } #free-measure-and-quote-form-simplified .ginput_container_radio .gfield_radio li label:hover { border-color: var(--green-primary); background: var(--white); } #free-measure-and-quote-form-simplified .ginput_container_radio .gfield_radio li input[type="radio"] { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--green-primary); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 2px solid var(--gray-border); border-radius: 50%; background: var(--white); position: relative; transition: all 0.2s ease; } #free-measure-and-quote-form-simplified .ginput_container_radio .gfield_radio li input[type="radio"]:checked { border-color: var(--green-primary); } #free-measure-and-quote-form-simplified .ginput_container_radio .gfield_radio li input[type="radio"]:checked::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: var(--green-primary); } #free-measure-and-quote-form-simplified .ginput_container_radio .gfield_radio li input[type="radio"]:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-shadow); } /* TWO-COLUMN ROW LAYOUT */ #free-measure-and-quote-form-simplified .gfield.gf_left_half, #free-measure-and-quote-form-simplified .gfield.gf_right_half { display: inline-block; vertical-align: top; width: calc(50% - 6px); } #free-measure-and-quote-form-simplified .gfield.gf_left_half { margin-right: 6px; } #free-measure-and-quote-form-simplified .gfield.gf_right_half { margin-left: 6px; } #free-measure-and-quote-form-simplified .gform_fields.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* FORM FOOTER / SUBMIT BUTTON */ #free-measure-and-quote-form-simplified .gform_footer { margin-top: 8px; padding: 0; } #free-measure-and-quote-form-simplified .gform_footer input[type="submit"], #free-measure-and-quote-form-simplified .gform_button, #free-measure-and-quote-form-simplified .gform_footer .gform_button { width: 100%; padding: 14px 28px; background: var(--orange-primary); color: var(--white); border: none; border-radius: 4px; font-family: var(--and-text); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #free-measure-and-quote-form-simplified .gform_footer input[type="submit"]:hover, #free-measure-and-quote-form-simplified .gform_button:hover, #free-measure-and-quote-form-simplified .gform_footer .gform_button:hover { background: var(--orange-secondary); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 164, 1, 0.35); } #free-measure-and-quote-form-simplified .gform_footer input[type="submit"]:focus, #free-measure-and-quote-form-simplified .gform_button:focus, #free-measure-and-quote-form-simplified .gform_footer .gform_button:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-shadow), 0 8px 25px rgba(255, 164, 1, 0.35); } #free-measure-and-quote-form-simplified .gform_footer input[type="submit"]:active, #free-measure-and-quote-form-simplified .gform_button:active, #free-measure-and-quote-form-simplified .gform_footer .gform_button:active { transform: translateY(0); } /* HONEYPOT FIELD - HIDE */ #free-measure-and-quote-form-simplified .gform_validation_container, #free-measure-and-quote-form-simplified .gfield_visibility_hidden { position: absolute !important; left: -9999px !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; } /* VALIDATION / ERROR STATES */ #free-measure-and-quote-form-simplified .gfield_error .ginput_container input, #free-measure-and-quote-form-simplified .gfield_error .ginput_container textarea, #free-measure-and-quote-form-simplified .gfield_error .ginput_container select { border-color: var(--error-red); } #free-measure-and-quote-form-simplified .gfield_error .ginput_container input:focus, #free-measure-and-quote-form-simplified .gfield_error .ginput_container textarea:focus, #free-measure-and-quote-form-simplified .gfield_error .ginput_container select:focus { box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1); } #free-measure-and-quote-form-simplified .validation_message { color: var(--error-red); font-size: 12px; margin-top: 4px; font-weight: 500; } #free-measure-and-quote-form-simplified .gform_validation_errors { background: rgba(231, 76, 60, 0.1); border: 1px solid var(--error-red); border-radius: 4px; padding: 16px; margin-bottom: 20px; } #free-measure-and-quote-form-simplified .gform_validation_errors h2 { color: var(--error-red); font-size: 14px; font-weight: 600; margin: 0 0 8px 0; } #free-measure-and-quote-form-simplified .gform_validation_errors ol { margin: 0; padding-left: 20px; } #free-measure-and-quote-form-simplified .gform_validation_errors li { color: var(--error-red); font-size: 13px; margin-bottom: 4px; } #free-measure-and-quote-form-simplified .gform_validation_errors li:last-child { margin-bottom: 0; } /* SUCCESS / CONFIRMATION MESSAGE */ #free-measure-and-quote-form-simplified .gform_confirmation_message { background: rgba(0, 131, 63, 0.1); border: 1px solid var(--green-primary); border-radius: 4px; padding: 20px; text-align: center; color: var(--green-primary); font-size: 14px; font-weight: 500; } /* DESCRIPTION / HELPER TEXT */ #free-measure-and-quote-form-simplified .gfield_description { font-size: 12px; color: var(--charcoal-light); margin-top: 4px; line-height: 1.5; } #free-measure-and-quote-form-simplified .instruction { font-size: 12px; color: var(--charcoal-light); font-style: italic; } /* RESPONSIVE STYLES */ @media screen and (max-width: 768px) { #free-measure-and-quote-form-simplified .gfield.gf_left_half, #free-measure-and-quote-form-simplified .gfield.gf_right_half { display: block; width: 100%; margin-left: 0; margin-right: 0; } #free-measure-and-quote-form-simplified .gform_fields.two-column { grid-template-columns: 1fr; } #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox, #free-measure-and-quote-form-simplified .gf_list_4col .ginput_container_checkbox .gfield_checkbox, #free-measure-and-quote-form-simplified.gf_list_4col .ginput_container_checkbox .gfield_checkbox { grid-template-columns: repeat(2, 1fr); } #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox > li label { white-space: normal; font-size: 13px !important; } #free-measure-and-quote-form-simplified .ginput_container_text input, #free-measure-and-quote-form-simplified .ginput_container_email input, #free-measure-and-quote-form-simplified .ginput_container_phone input, #free-measure-and-quote-form-simplified .ginput_container_number input, #free-measure-and-quote-form-simplified .ginput_container input[type="text"], #free-measure-and-quote-form-simplified .ginput_container input[type="email"], #free-measure-and-quote-form-simplified .ginput_container input[type="tel"], #free-measure-and-quote-form-simplified .ginput_container input[type="number"], #free-measure-and-quote-form-simplified .ginput_container_textarea textarea, #free-measure-and-quote-form-simplified .ginput_container_select select { padding: 14px 12px; font-size: 16px; } #free-measure-and-quote-form-simplified .gform_footer input[type="submit"], #free-measure-and-quote-form-simplified .gform_button { padding: 16px 24px; font-size: 14px; } #free-measure-and-quote-form-simplified .gfield_label { font-size: 11px; } } @media screen and (max-width: 480px) { #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox, #free-measure-and-quote-form-simplified .gf_list_4col .ginput_container_checkbox .gfield_checkbox, #free-measure-and-quote-form-simplified.gf_list_4col .ginput_container_checkbox .gfield_checkbox { grid-template-columns: 1fr; } #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox > li, #free-measure-and-quote-form-simplified .ginput_container_radio .gfield_radio li { padding: 10px 12px; } #free-measure-and-quote-form-simplified .ginput_container_checkbox .gfield_checkbox > li label, #free-measure-and-quote-form-simplified .ginput_container_radio .gfield_radio li label { font-size: 13px !important; } } /* ========================================================================== Google Places Autocomplete Loading State Applied to input fields while waiting for Google Places API to initialize ========================================================================== */ /* Loading state for autocomplete inputs before initialization */ .autocomplete input.gp-loading, .suburb_autocomplete input.gp-loading { background-color: #f5f5f5 !important; color: #999999 !important; cursor: wait !important; opacity: 0.7 !important; } /* Optional: Add a subtle loading animation */ .autocomplete input.gp-loading::placeholder, .suburb_autocomplete input.gp-loading::placeholder { color: #888888 !important; } /* ========================================================================== Google Places Autocomplete Element Styling Styles for the new PlaceAutocompleteElement API (gmp-place-autocomplete) The component has shadow DOM with these exposed parts: - ::part(input) - the text input field - ::part(clear-button) - the X/clear button - ::part(search-icon) - the search/magnifying glass icon ========================================================================== */ /* Base styling for the autocomplete element container */ gmp-place-autocomplete { display: block !important; width: 100% !important; background: #FFFFFF !important; border: 1px solid #e0e0e0 !important; border-radius: 4px !important; overflow: visible !important; box-sizing: border-box !important; transition: all 0.3s ease !important; position: relative !important; z-index: 1000 !important; } /* Focus state on the outer container */ gmp-place-autocomplete:focus-within { outline: none !important; border-color: #00833F !important; box-shadow: 0 0 0 3px rgba(0, 131, 63, 0.1) !important; } /* Style the input within the shadow DOM using ::part */ gmp-place-autocomplete::part(input) { width: 100% !important; height: auto !important; padding: 12px 14px !important; padding-left: 8px !important; border: none !important; border-radius: 0 !important; font-family: var(--and-text) !important; font-size: 14px !important; line-height: 1.6 !important; color: #333333 !important; background: #FFFFFF !important; box-shadow: none !important; outline: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; box-sizing: border-box !important; } gmp-place-autocomplete::part(input):focus { outline: none !important; box-shadow: none !important; border: none !important; } gmp-place-autocomplete::part(input)::placeholder { color: #999 !important; opacity: 1 !important; } /* Style the search icon */ gmp-place-autocomplete::part(search-icon) { color: #888 !important; fill: #888 !important; width: 18px !important; height: 18px !important; margin-left: 14px !important; opacity: 0.7 !important; } /* Hide the clear button to match other form fields */ gmp-place-autocomplete::part(clear-button) { display: none !important; width: 0 !important; height: 0 !important; visibility: hidden !important; } /* Styling for autocomplete within Gravity Forms */ .gform_wrapper gmp-place-autocomplete, .ginput_container gmp-place-autocomplete { display: block !important; width: 100% !important; } /* Match the form-simplified styling specifically */ #free-measure-and-quote-form-simplified gmp-place-autocomplete { background: var(--white, #FFFFFF) !important; border: 1px solid var(--gray-border, #e0e0e0) !important; border-radius: 4px !important; transition: all 0.3s ease !important; } #free-measure-and-quote-form-simplified gmp-place-autocomplete:focus-within { outline: none !important; border-color: var(--green-primary, #00833F) !important; box-shadow: 0 0 0 3px var(--focus-shadow, rgba(0, 131, 63, 0.1)) !important; } #free-measure-and-quote-form-simplified gmp-place-autocomplete::part(input) { padding: 12px 14px !important; padding-left: 8px !important; font-family: var(--and-text) !important; font-size: 14px !important; color: var(--charcoal, #333333) !important; background: var(--white, #FFFFFF) !important; } /* Error state styling */ .gfield_error gmp-place-autocomplete { border-color: #c02b0a !important; } .gfield_error gmp-place-autocomplete:focus-within { box-shadow: 0 0 0 3px rgba(192, 43, 10, 0.1) !important; } .gfield_error gmp-place-autocomplete::part(input) { background: #fff !important; } /* Invalid selection state - shown when user types without selecting a suggestion */ gmp-place-autocomplete.gp-invalid { border-color: #c02b0a !important; animation: gp-shake 0.4s ease-in-out; } gmp-place-autocomplete.gp-invalid:focus-within { border-color: #00833F !important; box-shadow: 0 0 0 3px rgba(0, 131, 63, 0.1) !important; } @keyframes gp-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } /* Mobile responsive adjustments */ @media screen and (max-width: 768px) { gmp-place-autocomplete::part(input), #free-measure-and-quote-form-simplified gmp-place-autocomplete::part(input) { padding: 10px 12px !important; font-size: 16px !important; /* Prevents zoom on iOS */ } /* Force dropdown below input on mobile - prevents covering input when keyboard is open */ gmp-place-autocomplete::part(list) { top: 100% !important; bottom: auto !important; margin-top: 4px !important; max-height: 200px !important; overflow-y: auto !important; } } /* Autocomplete dropdown styling using ::part selectors */ gmp-place-autocomplete::part(list) { background: #fff !important; border: 1px solid #e0e0e0 !important; border-radius: 4px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; margin-top: 4px !important; z-index: 99999 !important; } gmp-place-autocomplete::part(list-item) { padding: 10px 14px !important; font-family: var(--and-text) !important; font-size: 14px !important; color: #333 !important; cursor: pointer !important; } gmp-place-autocomplete::part(list-item):hover, gmp-place-autocomplete::part(list-item-selected) { background: rgba(0, 131, 63, 0.08) !important; } /* Google Places dropdown container - rendered outside the component */ .pac-container, .gmp-place-autocomplete-suggestions, [class*="place-autocomplete"] { z-index: 99999 !important; background: #fff !important; border: 1px solid #e0e0e0 !important; border-radius: 4px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; font-family: var(--and-text) !important; } .pac-container .pac-item, .pac-container .pac-item-query { padding: 10px 14px !important; font-size: 14px !important; color: #333 !important; cursor: pointer !important; } .pac-container .pac-item:hover, .pac-container .pac-item-selected { background: rgba(0, 131, 63, 0.08) !important; } /* Note: Removed overflow:visible from popup containers to preserve scrolling */ /* ============================================ CHOSEN.JS MULTISELECT DROPDOWN VISIBILITY FIX Fixes dropdown not appearing on regular pages and inside Elementor popups ============================================ */ /* Force the dropdown to be visible with high z-index */ #free-measure-and-quote-form-simplified .chosen-container .chosen-drop { z-index: 999999 !important; position: absolute !important; clip: auto !important; -webkit-clip-path: none !important; clip-path: none !important; } /* When dropdown is open, ensure it's fully visible */ #free-measure-and-quote-form-simplified .chosen-container.chosen-with-drop .chosen-drop { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Only the multiselect-specific containers need overflow visible */ #free-measure-and-quote-form-simplified .ginput_container_multiselect { overflow: visible !important; position: relative !important; } #free-measure-and-quote-form-simplified .chosen-container, #free-measure-and-quote-form-simplified .chosen-container-multi { overflow: visible !important; position: relative !important; } /* Only the gfield containing the multiselect needs overflow visible */ #free-measure-and-quote-form-simplified .gfield:has(.chosen-container) { overflow: visible !important; } /* UAEL: Only override overflow on multiselect containers */ .uael-gf-style #free-measure-and-quote-form-simplified .ginput_container_multiselect, .uael-gf-style #free-measure-and-quote-form-simplified .chosen-container, .uael-gf-style #free-measure-and-quote-form-simplified .chosen-container-multi, .uael-gf-style #free-measure-and-quote-form-simplified .chosen-container-multi .chosen-choices { overflow: visible !important; } .uael-gf-style #free-measure-and-quote-form-simplified .chosen-container .chosen-drop { z-index: 999999 !important; position: absolute !important; } /* ------------------------------------------------------------------------- Brand face rollout (updated 18 August 2026, Brand Guidelines V4) The Elementor kit sets Instrument Serif / Inter globally, but widgets carrying their own typography (a legacy of the pre-kit build) keep overriding it. These rules catch those widgets. Deliberately scoped to text-bearing elements: icon fonts (eicons, Font Awesome, wpsl-fontello) are left alone, otherwise the icons render as tofu. ---------------------------------------------------------------------- */ .elementor-widget-heading h1.elementor-heading-title, .elementor-widget-heading h2.elementor-heading-title, .elementor-widget-heading h3.elementor-heading-title, .elementor-widget-heading h4.elementor-heading-title, .elementor-widget-heading h1.elementor-heading-title *, .elementor-widget-heading h2.elementor-heading-title *, .elementor-widget-heading h3.elementor-heading-title *, .elementor-widget-heading h4.elementor-heading-title * { font-family: var(--and-display) !important; } /* Eyebrows and kickers are heading widgets set to div/p/span, not real heading levels. Brand guide p.34 puts those in Inter Bold, with body copy, lists and buttons in Inter too. */ .elementor-widget-heading div.elementor-heading-title, .elementor-widget-heading p.elementor-heading-title, .elementor-widget-heading span.elementor-heading-title, .elementor-widget-heading div.elementor-heading-title *, .elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor span, .elementor-widget-text-editor a, .elementor-widget-text-editor strong, .elementor-widget-text-editor em, .elementor-widget-text-editor li, .elementor-widget-icon-list .elementor-icon-list-text, .elementor-widget-button .elementor-button-text { font-family: var(--and-text) !important; }