/* Theme Name: GCS Child Theme URI: https://globalconservationservices.com Description: Child theme for Global Conservation Services (Divi 5) Author: Paul Cheney Author URI: https://paulcheney.ca Template: Divi Version: 1.0.0 Text Domain: gcs-child */ /******************************************************************************************************************/ /******************************************************************************************************************/ /*----------------------------------------Home Page Body----------------------------------------------------------*/ /******************************************************************************************************************/ /******************************************************************************************************************/ /******************************************************************************************************************/ /* ========================================================= DIVI HEADER — ========================================================= */ #main-header .container.et_menu_container { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: 8vw !important; padding-right: 8vw !important; } #main-header .container.et_menu_container { margin-left: auto !important; margin-right: auto !important; margin-top: 40 !important; margin-bottom: 0 !important; } /* STOP DIVI LEFT-HEADER FROM HIDING THE LOGO */ .et_header_style_left .logo_container { position: relative !important; width: auto !important; display: flex !important; align-items: center !important; flex: 0 0 auto !important; } /* FORCE LOGO TO EXIST IN FLEX LAYOUT */ .logo_container { flex: 0 0 auto !important; padding: 10px 24px 10px 0; /* top right bottom left */ min-width: 180px; /* adjust if needed */ display: flex !important; align-items: center !important; } /* Ensure logo itself can render */ .logo_container img, #logo { display: block !important; max-height: 60px !important; width: auto !important; } /* === LOGO VISIBILITY FIX === */ #main-header .logo_container { flex: 0 0 auto !important; display: flex !important; align-items: center !important; min-width: 120px; /* prevents collapse */ } #main-header #logo { display: block !important; max-height: 60px; width: auto; } /* ========================= GLOBAL Settings ========================= */ .et_pb_text h2 { font-family: 'Public Sans', sans-serif; font-weight: 500; font-size: 22px; text-transform: uppercase; color: #076839; } .et_pb_text h3 { font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 26px; color: #076839; } /* ========================= GLOBAL ROW ALIGNMENT SYSTEM ========================= */ .et_pb_row { width: 100%; max-width: 100% !important; padding-left: 8vw; padding-right: 8vw; } /* Allow headline line to extend into frog column */ .hero-row, .hero-row .et_pb_row { overflow: visible !important; } /* Override Divi's default large screen padding */ @media only screen and (min-width: 1350px) { .et_pb_row { padding-left: 8vw !important; padding-right: 8vw !important; } } /* ------------------------- TITLE TEXT ------------------------- */ .headline { margin: 0; font-family: 'Roboto Condensed', sans-serif; font-size: 54px; line-height: 0.95; text-transform: uppercase; letter-spacing: 0.04em; position: relative; } .headline span { display: block; } /* Helping People and Nature */ .line-one { line-height: .95 !important; margin-bottom: 0; font-weight: 400; color: #ffffff; padding-left: 8vw; margin-top: 40px; } /* Thrive Together */ .line-two { line-height: 0.95 !important; margin-top: -0.85em !important; font-weight: 700; color: #81b39c; padding-left: 8vw; } /* Body copy */ .line-three { margin-top: 5vh; padding-left: 8vw; line-height: 1.2 !important; } /* Headline wrapper */ .hero-headline { position: relative; display: inline-block; z-index: 3; } /* Green divider line — shortened */ .hero-headline::after { content: ""; position: absolute; left: 0; width: 105%; /* was 115% — corrected */ height: 6px; background-color: #076839; top: 100%; margin-top: 32px; z-index: 10; pointer-events: none; } /* ------------------------- FROG COLUMN (FULL HEIGHT) ------------------------- */ .frog-column { position: relative; z-index: 1; overflow: hidden; display: flex; align-items: stretch; } /* Divi image wrapper must stretch */ .frog-column .et_pb_image, .frog-column .et_pb_image_wrap { height: 100%; } /* Frog image fills column height */ .frog-column img { height: 100%; width: auto; object-fit: cover; display: block; } /* ------------------------- TEXT COLUMN ------------------------- */ .text-column { position: relative; z-index: 2; margin-right: 0 !important; margin-top: 40px !important; } /* Our Services */ .services-row { padding-left: 8vw !important; padding-right: 8vw !important; } .service-item { display: flex; align-items: center; gap: 14px; margin: 0 0 24px 0; padding: 0; font-size: 24px; line-height: 1.4; } .service-item p { margin: 0; } .service-icon { width: 36px; height: 36px; flex-shrink: 0; display: block; } /* How We Support */ .how-we-support-row { padding-left: 8vw !important; padding-right: 8vw !important; } .home-sector-card .card-header { display: flex; align-items: center; /* vertical centering */ justify-content: space-between; padding: 24px 40px; /* top/bottom | left/right */ background: #e9f3ee; /* adjust if needed */ min-height: 155px; /* adjust to match the tallest header */ max-height: 260px; } @media (min-width: 1201px) { .card-header { height: 180px; min-height: 180px; max-height: 180px; } } @media (min-width: 981px) and (max-width: 1200px) { .card-header { height: 180px; min-height: 180px; max-height: 180px; } .card-title { font-size: 16px; max-width: 420px; } .card-arrow { width: 24px; height: 24px; font-size: 36px; } } .card-title { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: clamp(20px, 1.3vw, 28px); line-height: 1.2; color: #076839; max-width: min(420px, 75%); } .card-arrow { width: 59px; height: 59px; font-size: 50px; opacity: 0.75; border: 2px solid #81b39c; color: #81b39c; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } /* make sure this stays under the font rules above or it will not kick in. This shrinks the text to fit in the box at screens narrower than 1201px */ @media (min-width: 1201px) { .card-header { height: 180px; min-height: 180px; max-height: 180px; } } @media (min-width: 981px) and (max-width: 1200px) { .card-header { height: 180px; min-height: 180px; max-height: 180px; } .card-title { font-size: 24px; max-width: 420px; } .card-arrow { width: 34px; height: 34px; font-size: 40px; } } /* --- Card Image --- */ .card-image, .card-image .et_pb_image_wrap { display: block !important; width: 100% !important; } .card-image img { display: block !important; width: 100% !important; height: 260px !important; /* back to a real crop */ object-fit: cover !important; /* now this actually works */ } /* responsive crop */ @media (max-width: 1200px) { .card-image img { height: 230px !important; } } @media (max-width: 980px) { .card-image img { height: auto !important; /* on stacked layouts, let it breathe */ } } /* Kill bottom space under the header module */ .et_pb_text .card-header { margin-bottom: 0; } .et_pb_text { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Kill top space above the image module */ .et_pb_image { margin-top: 0 !important; padding-top: 0 !important; } /*----------------------------------------------*/ /* A few of the organizations we've helped */ .h2-dark { padding-left: 8vw !important; padding-right: 8vw !important; padding-bottom: 4vh !important; font-family: 'Roboto Condensed', sans-serif; font-weight: 900; color: #2b744c; } /* Logo marquee container */ .logo-marquee { overflow: hidden; } /* Inner column becomes the conveyor belt */ .logo-marquee .et_pb_column { display: flex; align-items: center; width: max-content; animation: logo-scroll 60s linear infinite; /* change this to adjust the speed of the animation */ } /* Logo images */ .logo-marquee img { max-height: 140px; /* Control Logo size with This */ width: auto; margin-right: 80px; object-fit: contain; } /* Animation */ @keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* remove divi padding from logos */ .logo-marquee .et_pb_image { margin: 0 !important; padding: 0 !important; } /* Pause animation on mouse over */ .logo-marquee .et_pb_column:hover { animation-play-state: paused; } /* un comment to remove animation from mobile but will need to adjust logo size probably @media (max-width: 768px) { .logo-marquee .et_pb_column { animation: none; } } */ /* ========================= INSIGHTS SECTION ========================= */ .insights-section { background-color: #1f1d19 !important; color: #ffffff; } .insights-section > .et_pb_row { margin-left: 0 !important; margin-right: 0 !important; } /* ========================= HEADER ROW ========================= */ .insights-header-row { max-width: none !important; width: 100% !important; padding-left: 8vw !important; padding-right: 8vw !important; } .insights-header-row .et_pb_column { padding-left: 0 !important; padding-right: 0 !important; } .insights-header-link { display: inline-flex; align-items: center; gap: 8px; } .insights-header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } .insights-title h2, h2.insights-title { margin: 0 !important; font-family: 'Public Sans', sans-serif; font-size: 22px !important; font-weight: 600 !important; color: #81b39c !important; text-transform: uppercase; letter-spacing: 0.12em; } .insights-view-all { display: inline-flex; align-items: center; gap: 8px; font-family: 'Public Sans', sans-serif; font-size: 20px !important; font-weight: 400 !important; color: #ffffff; white-space: nowrap; } .view-all-arrow { display: inline-block; vertical-align: middle; margin-left: 8px; width: 22px; height: 22px; background: #ffffff; border-radius: 50%; color: #1f1d19; font-size: 12px; line-height: 22px; text-align: center; } .insights-view-all a:hover { opacity: 0.85; } /* ========================= CARDS ROW ========================= */ .insights-cards-row { padding-left: 8vw !important; padding-right: 8vw !important; } /* ========================= IMAGE (fixed ratio + border) ========================= */ .insight-image .et_pb_image_wrap { position: relative !important; width: 100% !important; padding-top: 56.25% !important; /* 16:9 */ overflow: hidden !important; border: 5px solid #ffffff !important; } .insight-image img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* ========================= TEXT + ARROW UNDER IMAGE ========================= */ .insight-link { display: inline; } .insight-title { font-family: 'Public Sans', sans-serif; font-size: 20px !important; font-weight: 400 !important; line-height: 1.3 !important; color: #ffffff !important; margin-top: 14 !important; } /* ========================= ARROW (Divi icon) ========================= */ .insight-arrow { display: inline-flex; margin-left: 10px; vertical-align: middle; width: 22px; height: 22px; background: #ffffff; border-radius: 50%; color: #1f1d19; font-size: 14px; line-height: 1; align-items: center; justify-content: center; } /* ========================= RESPONSIVE ========================= */ @media (max-width: 980px) { .insights-cards-row { flex-wrap: wrap !important; gap: 36px !important; } .insight-card.et_pb_column { flex: 1 1 100% !important; } } /* ============================================================================= * ============================================================================== INSIGHTS ARCHIVE (Blog Index) ============================================================================== ============================================================================== ============================================================================== */ .insights-archive { background-color: #1f1d19; padding: 20px 8vw; } .insights-archive .et_pb_post { background: transparent; border: none; margin-bottom: 28px; } .insights-archive .et_pb_image_container { overflow: hidden; border: 5px solid #ffffff; } .insights-archive .et_pb_image_container img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } /* Remove Divi default spacing */ .insights-archive .entry-title { margin-top: 18px; margin-bottom: 0; font-family: 'Public Sans', sans-serif; font-size: 20px; font-weight: 400; line-height: 1.3; } .insights-archive .entry-title a { color: #ffffff; text-decoration: none; } /* Arrow circle inline */ .insights-archive .entry-title a::after { content: "›"; display: inline-flex; margin-left: 10px; width: 22px; height: 22px; background: #ffffff; border-radius: 50%; color: #1f1d19; font-size: 14px; align-items: center; justify-content: center; vertical-align: middle; } /* Remove meta + excerpt spacing if present */ .insights-archive .post-meta, .insights-archive .post-content { display: none; } /* Grid spacing tighten */ .insights-archive .et_pb_blog_grid .et_pb_post { padding-bottom: 0; } /* Responsive */ @media (max-width: 980px) { .insights-archive { padding: 60px 6vw; } } /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /* Testimonial Slider */ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /* Name and Job line spacing */ .testimonial-author { line-height: 1.2 !important; } .testimonial-row { padding-left: 8vw !important; padding-right: 8vw !important; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; } .testimonial-author { font-size: 20px !important; } .et_pb_slide_image { right: 0; } .et_pb_slide_description { float: left !important; width: 60% !important; padding-left: 5vw !important; } /* Pull arrows closer to the edges */ /* tighten arrow position */ .testimonial-row .et-pb-arrow-next { margin-right: 10vw !important; padding-left: 0 !important; opacity: 1 !important; } .testimonial-row .et-pb-arrow-prev { left: 40px !important; opacity: 1 !important; } /* Testimonial slider – mobile only image stack */ /* Tablet + Mobile: stack testimonial image above text, keep desktop untouched */ @media (max-width: 1024px) { /* 1) Kill the Divi Slider padding that’s creating the huge empty space */ .testimonial-row .et_pb_slider, .testimonial-row .et_pb_slides, .testimonial-row .et_pb_slide { padding-top: 0 !important; padding-bottom: 0 !important; } /* 2) Make the image behave like a normal block ABOVE the text */ .testimonial-row .et_pb_slide_image { float: none !important; position: relative !important; /* Divi often uses absolute internally */ left: auto !important; right: auto !important; width: 100% !important; text-align: center !important; margin: 0 0 8px 0 !important; /* spacing between image and text */ } .testimonial-row .et_pb_slide_image img { display: inline-block !important; /* center inside text-align */ max-width: 160px !important; /* adjust if you want */ height: auto !important; border-radius: 50% !important; } /* 3) Text goes full width under the image */ .testimonial-row .et_pb_slide_description { float: none !important; width: 100% !important; padding-left: 0 !important; } } /* Tablet + Mobile polish for testimonial slider */ @media (max-width: 1024px) { /* Tighten space between image and text */ .testimonial-row .et_pb_slide_image { margin-bottom: 12px !important; /* adjust to taste: 10–14px */ } /* Move arrows outside the text block */ .testimonial-row .et-pb-arrow-prev, .testimonial-row .et-pb-arrow-next { top: 50% !important; transform: translateY(-50%); } .testimonial-row .et-pb-arrow-prev { left: -24px !important; /* pushes arrow outside text */ } .testimonial-row .et-pb-arrow-next { right: -24px !important; /* pushes arrow outside text */ margin-right: 0 !important; } } @media (max-width: 1024px) { /* Reduce space between image and text */ .testimonial-row .et_pb_slide_image { margin-bottom: 8px !important; } /* Allow arrows to sit outside text without being clipped */ .testimonial-row .et_pb_slider, .testimonial-row .et_pb_slides { overflow: visible !important; } /* Keep arrows vertically centered without translate clipping */ .testimonial-row .et-pb-arrow-prev, .testimonial-row .et-pb-arrow-next { top: 50% !important; transform: none !important; /* remove translateY entirely */ } .testimonial-row .et-pb-arrow-prev { left: -24px !important; } .testimonial-row .et-pb-arrow-next { right: -24px !important; } } /* Fix Divi mobile slide padding killing image spacing */ @media (max-width: 980px) { .testimonial-row .et_pb_slide { padding-top: 40px !important; padding-bottom: 40px !important; } } /* Tablet & Mobile (980px and down) – mirror 1024px fix exactly */ @media (max-width: 980px) { /* Kill Divi slide padding causing phantom space */ .testimonial-row .et_pb_slider, .testimonial-row .et_pb_slides, .testimonial-row .et_pb_slide { padding-top: 0 !important; padding-bottom: 0 !important; } /* Image behaves like a normal block above text */ .testimonial-row .et_pb_slide_image { float: none !important; position: relative !important; left: auto !important; right: auto !important; width: 100% !important; text-align: center !important; margin: 0 0 8px 0 !important; } .testimonial-row .et_pb_slide_image img { display: inline-block !important; max-width: 160px !important; height: auto !important; border-radius: 50% !important; } /* Text full width under image */ .testimonial-row .et_pb_slide_description { float: none !important; width: 100% !important; padding-left: 0 !important; } /* Allow arrows to sit outside without clipping */ .testimonial-row .et_pb_slider, .testimonial-row .et_pb_slides { overflow: visible !important; } .testimonial-row .et-pb-arrow-prev { left: -24px !important; } .testimonial-row .et-pb-arrow-next { right: -24px !important; margin-right: 0 !important; } } /* FORCE testimonial image to show on phones (Divi hides it) */ @media (max-width: 767px) { .testimonial-row .et_pb_slide_image { display: block !important; } } /********************************************************************************************************************************************/ /********************************************************************************************************************************************/ /* NGO PAGE */ /********************************************************************************************************************************************/ /********************************************************************************************************************************************/ .ngo-header-text-top h1{ font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; font-weight: 400; font-size: 46px; color: #fff; } .ngo-header-text-bottom h2{ font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; font-weight: 400; font-size: 46px; color: #81b39c; } .ngo-header-text-bottom { font-family: 'Public Sans', sans-serif; font-size: 24px; color: #fff; line-height:1.2; } /*-------------Mobile------------------------*/ @media (max-width: 980px) { /* Normalize padding on the TEXT MODULE wrappers */ .ngo-header-text-top, .ngo-header-text-bottom { padding-left: 20px !important; padding-right: 20px !important; } /* Headline */ .ngo-header-text-top h1 { font-size: 36px; margin-bottom: 0px !important; } /* Sub-headline */ .ngo-header-text-bottom h2 { font-size: 36px; margin-top: 0 !important; margin-bottom: 12px !important; } /* Body copy */ .ngo-header-text-bottom { font-size: 22px; } } /* <---------------------------------------------------------------------------------------------->*/ /* <-----------------------------Challenge & how GCS helps section ------------------------------->*/ /* <---------------------------------------------------------------------------------------------->*/ .challenge-section { } @media (max-width: 980px) { .ngo-image-column { padding-top: 24vw !important; padding-bottom: 24vw !important; } } /* <---------------------------------------------------------------------------------------------->*/ /* <--------------------------------- Our Services section --------------------------------------->*/ /* <---------------------------------------------------------------------------------------------->*/ /* Make blurb layout predictable */ .et_pb_blurb_content { display: flex; flex-direction: column; } /* Lock header height so descriptions align */ .et_pb_module_header { min-height: 80px; /* adjust until all titles fit */ } /* Make Blurb Bullets Green and keep text white */ .et_pb_blurb_description li { color: #fff; } .et_pb_blurb_description li::marker { color: #9cdaa5; } /***************************************************************************************/ /***************************************************************************************/ /* FOOTER */ /***************************************************************************************/ /***************************************************************************************/ #site-footer { background-color: #1f1d19; color: #ffffff; padding: 80px 0 40px; } /* Layout wrapper */ .footer-row { max-width: 1400px; /* match Divi row width */ margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* Two-column footer top */ .footer-cta-inner { align-items: flex-start; display: flex; justify-content: center; gap: 80px; /* fixed, predictable, Divi-like */ } /* Left column */ .footer-left h3 { color: #fff !important; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; } .footer-left p { margin-bottom: 24px; line-height: 1.5; } /* CTA button */ .footer-cta { display: inline-flex; align-items: center; justify-content: center; padding: 10px 28px; border-radius: 999px; background-color: #f2c94c; color: #111111; font-size: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; line-height: 1; } /* Right column */ .footer-right h4 { text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; color: #fff !important; } .footer-right h3, .footer-right h4 { font-family: 'Roboto Condensed', sans-serif !important; font-size: 22px !important; } /* Social icons */ .footer-social .menu-icon { font-size: 0; } .footer-social .menu-icon::before { font-family: "ETmodules"; font-size: 22px; color: #ffffff; } .footer-social .menu-icon:hover::before { color: #f2c94c; } .footer-social .menu-linkedin::before { content: "\e09d"; } .footer-social .menu-instagram::before { content: "\e09a"; } .footer-social .menu-facebook::before { content: "\e093"; } /* Trust logos */ .footer-logo-row { max-width: 1400px; margin: 60px auto 0; padding-left: 24px; padding-right: 24px; } .footer-logos { display: flex; justify-content: center; gap: 48px; margin-top: 60px; } .footer-logos img { height: 98px; width: auto; } .logo-bfc { height: 50px !important; } /* Footer legal */ .footer-legal { text-align: center; margin-top: 48px; font-size: 14px; } .footer-legal a { color: #ffffff; text-decoration: none; } .footer-legal a:hover { text-decoration: underline; } .footer-left, .footer-right { flex: 1 1 100%; max-width: 700px; } /* <----------------------Mobile-------------------------------------> */ @media (max-width: 768px) { .footer-cta-inner { flex-direction: column; } .footer-logos { flex-wrap: wrap; gap: 24px; } .footer-logos img { height: 48px; } } #site-footer { background-color: #1f1d19; position: relative; z-index: 10; } /* ========================= Footer Newsletter (CF7) ========================= */ /* Form layout */ .footer-newsletter .wpcf7-form { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 4px; } /* Reset CF7 spacing */ .footer-newsletter .wpcf7-form p { margin: 0; } /* Input wrappers stay grouped */ .footer-newsletter .wpcf7-form-control-wrap { flex: 0 0 auto; } /* Inputs */ .footer-newsletter input[type="text"], .footer-newsletter input[type="email"] { width: 260px; max-width: 260px; height: 36px; border: none; border-radius: 2px; padding: 0 12px; font-size: 16px; } /* Force submit wrapper onto its own row aka align the yellow button left */ .wpcf7-form > p { flex: 0 0 auto; } .wpcf7-form > p > input.wpcf7-submit { width: auto; } .wpcf7-form > p:last-of-type { flex: 0 0 100%; display: flex; justify-content: flex-start; } /* Button styling */ .footer-newsletter input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; padding: 10px 28px; border-radius: 999px; background-color: #f2c94c; color: #111; font-size: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border: none; cursor: pointer; } /* Remove Form Field auto line breaks */ .wpcf7-form br { display: none; } /* Mobile stack */ @media (max-width: 768px) { .footer-newsletter .wpcf7-form p { flex: 0 0 100%; } .footer-newsletter input[type="submit"] { width: 100%; } } @media (max-width: 767px) { .wpcf7-form { gap: 6px; } .wpcf7-form > p:last-of-type { margin-top: 6px; } } /* Align BOTH footer CTAs vertically by setting the margin on the CONTACT US button */ .footer-cta-inner { align-items: flex-start; } .wpcf7-form-control wpcf7-submit has-spinner { margin-top: 40px !important; } /* ========================= HARD STOP DIVI HEADER JS SHIFT ========================= */ #et-top-navigation { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; } #main-header { padding-top: 30px !important; padding-bottom: 30px !important; position: sticky; top: 0; z-index: 9999 !important; margin-bottom: 1px !important; } #et-top-navigation { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; } /* =============================== FIX CONTACT BUTTON ALIGNMENT =============================== */ /* Kill Divi's LI padding ONLY for contact */ #top-menu > li.menu-contact { padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; } /* Button itself */ #top-menu > li.menu-contact > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 6px 16px !important; line-height: 1 !important; height: auto !important; } /* FINAL FIX: KILL DIVI LOGO HELPER SYSTEM */ .logo_container { display: flex !important; align-items: center !important; } .logo_container .logo_helper { display: none !important; } .logo_container img#logo { position: static !important; height: 60px !important; width: auto !important; max-height: none !important; } /* FIX: re-anchor desktop dropdowns to their menu items */ @media (min-width: 981px) { #top-menu > li { position: relative !important; } } #et-top-navigation { margin-right: clamp(12px, 3vw, 32px); margin-left: auto !important; } #main-header #et-top-navigation { padding-left: 0 !important; } #main-header .container.et_menu_container { display: flex !important; width: 100% !important; } .hero-row { padding-left: 8vw; padding-right: 8vw; } /* FINAL OVERRIDE – NGO HEADER H1 */ .ngo-header-text-top h1, .ngo-header-text-top h1.p1 { font-weight: 500 !important; } .wpcf7 input::-webkit-input-placeholder { color: #555555; } .wpcf7 input::-moz-placeholder { color: #555555; opacity: 1; } /* ============================================================================== GCS DIVI-BUILT GLOBAL HEADER (Theme Builder) Scoped to .gcs-tb-header to avoid collisions with the original custom header.php selectors (#main-header, #top-menu, #et-top-navigation). Append these rules to style.css. ============================================================================== */ /* Header section — dark, sticky, full width, contained padding via 8vw on the row */ body .gcs-tb-header, body .et_pb_section.gcs-tb-header { background-color: #1f1d19 !important; padding-top: 12px !important; padding-bottom: 12px !important; z-index: 9999 !important; } /* Row inside the header — full width, flexed so logo/menu sit side-by-side */ body .gcs-tb-header .et_pb_row { width: 100% !important; max-width: none !important; margin: 0 auto !important; display: flex !important; align-items: center !important; } /* Both columns vertically centered */ body .gcs-tb-header .et_pb_column { display: flex !important; align-items: center !important; margin: 0 !important; } body .gcs-tb-header .gcs-tb-header-logo-col { justify-content: flex-start !important; } body .gcs-tb-header .gcs-tb-header-menu-col { justify-content: flex-end !important; } /* Logo image */ body .gcs-tb-header .gcs-tb-header-logo img { height: 50px !important; width: auto !important; max-height: 50px !important; display: block !important; } /* ========================= Desktop menu — top-level items ========================= */ body .gcs-tb-header .et_pb_menu .et-menu { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0 !important; } body .gcs-tb-header .et_pb_menu .et-menu > li { display: flex !important; align-items: center !important; line-height: 1 !important; padding: 0 !important; margin: 0 16px !important; } body .gcs-tb-header .et_pb_menu .et-menu > li > a { color: #ffffff !important; font-weight: 600 !important; font-size: 16px !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; line-height: 1 !important; padding: 0 !important; border: 0 !important; opacity: 1 !important; text-decoration: none !important; } body .gcs-tb-header .et_pb_menu .et-menu > li > a:hover, body .gcs-tb-header .et_pb_menu .et-menu > li > a:focus, body .gcs-tb-header .et_pb_menu .et-menu > li.current-menu-item > a, body .gcs-tb-header .et_pb_menu .et-menu > li.current-menu-ancestor > a { color: #f1c232 !important; opacity: 1 !important; text-decoration: none !important; border-bottom: 0 !important; box-shadow: none !important; } /* Push the dropdown chevron OFF the last letter — give items with submenus a bit of right padding so Divi's auto-injected arrow has room to live next to the text. */ body .gcs-tb-header .et_pb_menu .et-menu > li.menu-item-has-children > a { padding-right: 18px !important; position: relative !important; } body .gcs-tb-header .et_pb_menu .et-menu > li.menu-item-has-children > a::after { margin-left: 6px !important; right: 0 !important; line-height: 1 !important; } /* ========================= Contact pill (li.menu-contact) ========================= */ body .gcs-tb-header .et_pb_menu .et-menu > li.menu-contact { margin-left: 24px !important; } body .gcs-tb-header .et_pb_menu .et-menu > li.menu-contact > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: #f1c232 !important; color: #1f1d19 !important; padding: 6px 16px !important; border-radius: 999px !important; line-height: 1 !important; font-weight: 700 !important; } body .gcs-tb-header .et_pb_menu .et-menu > li.menu-contact > a:hover { background-color: #e0b831 !important; color: #1f1d19 !important; } /* ========================= Social icon items (li.menu-icon.menu-linkedin / .menu-instagram / .menu-facebook) Uses ETmodules icon font (already loaded by Divi). ========================= */ body .gcs-tb-header .et_pb_menu .et-menu > li.menu-icon { margin: 0 6px !important; } body .gcs-tb-header .et_pb_menu .et-menu > li.menu-icon > a { font-size: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; } body .gcs-tb-header .et_pb_menu .et-menu > li.menu-icon > a::before { font-family: "ETmodules" !important; font-size: 20px !important; color: #ffffff !important; line-height: 1 !important; } body .gcs-tb-header .et_pb_menu .et-menu > li.menu-icon > a:hover::before { color: #f1c232 !important; } body .gcs-tb-header .et_pb_menu .et-menu > li.menu-linkedin > a::before { content: "\e09d" !important; } body .gcs-tb-header .et_pb_menu .et-menu > li.menu-instagram > a::before { content: "\e09a" !important; } body .gcs-tb-header .et_pb_menu .et-menu > li.menu-facebook > a::before { content: "\e093" !important; } /* ========================= Desktop dropdown (sub-menu) ========================= */ body .gcs-tb-header .et_pb_menu .et-menu > li > ul.sub-menu { background-color: #1f1d19 !important; border-top: 0 !important; border: 0 !important; padding: 8px 0 !important; min-width: 200px !important; box-shadow: none !important; } body .gcs-tb-header .et_pb_menu .et-menu > li > ul.sub-menu li a { color: #ffffff !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-size: 14px !important; font-weight: 600 !important; padding: 8px 20px !important; text-decoration: none !important; border: 0 !important; } body .gcs-tb-header .et_pb_menu .et-menu > li > ul.sub-menu li a:hover, body .gcs-tb-header .et_pb_menu .et-menu > li > ul.sub-menu li a:focus { background: transparent !important; color: #f1c232 !important; text-decoration: none !important; border: 0 !important; box-shadow: none !important; } /* ========================= Mobile menu ========================= */ @media (max-width: 980px) { body .gcs-tb-header .gcs-tb-header-row { padding-left: 6vw !important; padding-right: 6vw !important; } /* Hide desktop horizontal menu */ body .gcs-tb-header .et_pb_menu .et-menu { display: none !important; } /* Mobile menu container (the dropdown panel Divi shows on hamburger click) */ body .gcs-tb-header .et_pb_menu .et_mobile_menu { background-color: #1f1d19 !important; border-top: 2px solid #f1c232 !important; padding: 16px 0 !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; } body .gcs-tb-header .et_pb_menu .et_mobile_menu li a { color: #ffffff !important; background: transparent !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-weight: 600 !important; border: 0 !important; padding: 12px 24px !important; } body .gcs-tb-header .et_pb_menu .et_mobile_menu li a:hover { color: #f1c232 !important; background: transparent !important; } /* Contact pill on mobile */ body .gcs-tb-header .et_pb_menu .et_mobile_menu li.menu-contact { text-align: left !important; padding: 0 24px !important; } body .gcs-tb-header .et_pb_menu .et_mobile_menu li.menu-contact > a { display: inline-flex !important; background-color: #f1c232 !important; color: #1f1d19 !important; padding: 8px 20px !important; border-radius: 999px !important; margin: 12px 0 !important; } /* Social icons on mobile — inline row */ body .gcs-tb-header .et_pb_menu .et_mobile_menu li.menu-icon { display: inline-block !important; width: auto !important; margin: 8px 12px !important; } body .gcs-tb-header .et_pb_menu .et_mobile_menu li.menu-icon > a { font-size: 0 !important; padding: 0 !important; display: inline-flex !important; width: 32px !important; height: 32px !important; align-items: center !important; justify-content: center !important; } body .gcs-tb-header .et_pb_menu .et_mobile_menu li.menu-icon > a::before { font-family: "ETmodules" !important; font-size: 22px !important; color: #ffffff !important; } body .gcs-tb-header .et_pb_menu .et_mobile_menu li.menu-icon > a:hover::before { color: #f1c232 !important; } body .gcs-tb-header .et_pb_menu .et_mobile_menu li.menu-linkedin > a::before { content: "\e09d" !important; } body .gcs-tb-header .et_pb_menu .et_mobile_menu li.menu-instagram > a::before { content: "\e09a" !important; } body .gcs-tb-header .et_pb_menu .et_mobile_menu li.menu-facebook > a::before { content: "\e093" !important; } /* Hamburger icon */ body .gcs-tb-header .et_pb_menu .mobile_menu_bar:before { color: #f1c232 !important; content: "\61" !important; font-family: "ETmodules" !important; font-size: 28px !important; } body .gcs-tb-header .et_pb_menu .mobile_nav.opened .mobile_menu_bar:before { content: "\4d" !important; color: #f1c232 !important; } /* Logo size on mobile */ body .gcs-tb-header .gcs-tb-header-logo img { height: 40px !important; max-height: 40px !important; } } /* Remove top padding that Divi adds to push content below the (now-removed) original header */ body.et_fixed_nav #page-container { padding-top: 0 !important; } /* HEADER UNIFORMITY LOCK — consistent padding/height on Theme Builder header section */ body .et_pb_section.gcs-tb-header, body.home .et_pb_section.gcs-tb-header, body.page .et_pb_section.gcs-tb-header { padding-top: 12px !important; padding-bottom: 12px !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important; } /* HEADER HEIGHT LOCK — fixed 74px section so logo + menu center vertically */ body .et_pb_section.gcs-tb-header { height: 74px !important; min-height: 74px !important; max-height: 74px !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; } /* Row inside the header — same dimensions on every page */ body .et_pb_section.gcs-tb-header .gcs-tb-header-row, body .et_pb_section.gcs-tb-header > .et_pb_row { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Logo size — force 50px on every context */ body .et_pb_section.gcs-tb-header .gcs-tb-header-logo, body .et_pb_section.gcs-tb-header .gcs-tb-header-logo .et_pb_image_wrap, body .et_pb_section.gcs-tb-header .gcs-tb-header-logo img { height: 50px !important; max-height: 50px !important; line-height: 1 !important; } body .et_pb_section.gcs-tb-header .gcs-tb-header-logo img { width: auto !important; display: block !important; } /* Menu link size — lock to 16px regardless of page context. EXCLUDE .menu-icon items because those are social icons whose text should stay hidden via font-size: 0 from the earlier icon rule. */ body .et_pb_section.gcs-tb-header .et_pb_menu .et-menu > li:not(.menu-icon) > a { font-size: 16px !important; line-height: 1 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Re-assert the icon text-hide rule with maximum specificity so it can't lose to anything else added later in the file. */ body .et_pb_section.gcs-tb-header .et_pb_menu .et-menu > li.menu-icon > a { font-size: 0 !important; padding: 0 !important; line-height: 0 !important; } /* ============================================================================== FOOTER LOGO SIZING LOCK — applies on every page context. On inner pages Divi was constraining the column width, which (combined with the image's default max-width: 100%) was squishing the logos horizontally while my height: 98px rule kept them tall. Removing max-width on the image and making the columns sized-to-content fixes it. ============================================================================== */ /* Image itself: locked height, natural width, no max-width constraint */ body .gcs-footer-logos-section .et_pb_image, body .gcs-footer-logos-section .et_pb_image .et_pb_image_wrap, body .gcs-footer-logos-section .et_pb_image img, body .gcs-footer-logos-section img { max-width: none !important; width: auto !important; height: auto !important; box-sizing: content-box !important; } body .gcs-footer-logos-section .gcs-logo-ppf img, body .gcs-footer-logos-section .gcs-logo-one-percent img, body .gcs-footer-logos-section .gcs-logo-cc img { height: 98px !important; width: auto !important; max-width: none !important; object-fit: contain !important; flex-shrink: 0 !important; } body .gcs-footer-logos-section .gcs-logo-bfc img { height: 50px !important; width: auto !important; max-width: none !important; object-fit: contain !important; flex-shrink: 0 !important; } /* Each logo column sizes to its image — don't shrink columns to fit */ body .gcs-footer-logos-section .et_pb_column { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body .gcs-footer-logos-section .et_pb_row, body .gcs-footer-logos-section .gcs-footer-logos-row { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 60px !important; } body .et_pb_section.gcs-footer-logos-section .et_pb_row > .et_pb_column, body .et_pb_section.gcs-footer-logos-section .et_pb_row > [class*="et_pb_column"] { flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* Row inside the header fills the height and centers content. Explicit padding values on ALL four sides so the row renders identically on every page (Divi was leaking different padding-left/right from per-page static CSS — see DevTools diff: home had 0, inner pages had 91.68px / 8vw). 24px gives the logo and menu a small consistent inset from the section edge. */ body .et_pb_section.gcs-tb-header > .et_pb_row, body .et_pb_section.gcs-tb-header .gcs-tb-header-row { height: 100% !important; align-items: center !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 32px !important; padding-right: 32px !important; } /* Columns inside the header fill height vertically */ body .et_pb_section.gcs-tb-header .et_pb_column { height: 100% !important; } /* Menu wrapper — no extra height padding */ body .et_pb_section.gcs-tb-header .et_pb_menu, body .et_pb_section.gcs-tb-header .et_pb_menu_inner_container, body .et_pb_section.gcs-tb-header .et_pb_menu__wrap { min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ============================================================================== MOBILE HERO OVERLAY (≤ 980px) Hero row has a background image of the frog. On mobile the columns stack, so the text ends up sitting on top of the frog and becomes hard to read. Drop an 80% black overlay between the background and the content. ============================================================================== */ @media (max-width: 980px) { .ngo-header-row { position: relative !important; } .ngo-header-row::before { content: "" !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; /* ---------------------------------------------------------------- CLIENT: change the 0.6 below to adjust how dark the mobile hero overlay is. 0 = no overlay (frog at full strength). 1 = solid black. Suggested range: 0.3 (light dim) — 0.8 (heavy dim). ---------------------------------------------------------------- */ background-color: rgba(0, 0, 0, 0.6) !important; z-index: 1 !important; pointer-events: none !important; } /* Make sure the column content sits above the overlay */ .ngo-header-row > .et_pb_column { position: relative !important; z-index: 2 !important; } } /* ============================================================================== GCS DIVI-BUILT FOOTER (Theme Builder global footer) Replaces the old hand-built footer.php markup. Scoped to .gcs-footer-* classes that match the modules in the Divi footer layout. ============================================================================== */ /* The whole footer sits on the dark brand color */ .gcs-footer-cta, .gcs-footer-logos-section, .gcs-footer-legal { background-color: #1f1d19 !important; color: #ffffff; } /* --- CTA + Newsletter row --- */ .gcs-footer-cta .et_pb_text h3 { text-transform: uppercase; letter-spacing: 0.12em; color: #ffffff !important; margin-bottom: 16px !important; } .gcs-footer-cta .gcs-footer-left p { color: #e8e6e0 !important; line-height: 1.5; margin-bottom: 24px; } .gcs-footer-cta .gcs-footer-right h4 { color: #ffffff !important; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px !important; } /* Make the CTA row a flex container with equal-height columns, so we can pin both buttons to the same baseline. */ .gcs-footer-cta-row.et_pb_row, .et_pb_row.gcs-footer-cta-row { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; } .gcs-footer-cta-row .et_pb_column { display: flex !important; flex-direction: column !important; height: auto !important; } /* Left column — push CONTACT US to the bottom. */ .gcs-footer-cta-row .et_pb_column:first-child .gcs-footer-btn { margin-top: auto !important; } /* Right column — make the contact-form module fill the column vertically, then push its bottom container (submit + captcha) to the bottom too. */ .gcs-footer-cta-row .gcs-footer-form, .gcs-footer-cta-row .gcs-footer-form .et_pb_module_inner, .gcs-footer-cta-row .gcs-footer-form .et_pb_contact { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; } .gcs-footer-form .et_pb_contact_form { flex: 1 1 auto !important; } .gcs-footer-form .et_contact_bottom_container { margin-top: auto !important; width: 100% !important; } /* CONTACT US + SUBMIT buttons share these rules so they look identical */ .gcs-footer-btn .et_pb_button, a.et_pb_button.gcs-footer-btn, .gcs-footer-form .et_pb_button, .gcs-footer-form button.et_pb_contact_submit { background-color: #f2c94c !important; color: #111111 !important; border: 0 !important; border-radius: 999px !important; padding: 14px 40px !important; font-size: 16px !important; font-weight: 700 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; line-height: 1 !important; display: inline-block !important; min-width: 180px !important; text-align: center !important; } .gcs-footer-btn .et_pb_button:after, a.et_pb_button.gcs-footer-btn:after, .gcs-footer-form .et_pb_button:after, .gcs-footer-form button.et_pb_contact_submit:after { display: none !important; content: "" !important; } .gcs-footer-btn .et_pb_button:hover, a.et_pb_button.gcs-footer-btn:hover, .gcs-footer-form .et_pb_button:hover, .gcs-footer-form button.et_pb_contact_submit:hover { background-color: #e0b831 !important; color: #111111 !important; } /* --- Newsletter form --- */ .gcs-footer-form .et_pb_contact_form_container, .gcs-footer-form .et_pb_contact { width: 100% !important; } .gcs-footer-form .et_pb_contact_form { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; } /* Name + Email row */ .gcs-footer-form p.et_pb_contact_field { flex: 1 1 calc(50% - 4px) !important; padding: 0 !important; margin: 0 !important; } /* Hide built-in labels — we use the field title as placeholder via the input */ .gcs-footer-form .et_pb_contact_form_label { display: none !important; } /* Input fields: white, rounded, padded */ .gcs-footer-form input.input, .gcs-footer-form input[type="text"].input, .gcs-footer-form input[type="email"].input { background-color: #ffffff !important; color: #333333 !important; border: 0 !important; border-radius: 6px !important; padding: 12px 16px !important; height: auto !important; width: 100% !important; font-size: 15px !important; line-height: 1.2 !important; } .gcs-footer-form input.input::placeholder, .gcs-footer-form input[type="text"].input::placeholder, .gcs-footer-form input[type="email"].input::placeholder { color: #6b6b6b !important; opacity: 1 !important; } /* Captcha row — compact, on its own line under the Name/Email fields */ .gcs-footer-form .et_pb_contact_right { flex: 1 1 100% !important; display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } .gcs-footer-form .et_pb_contact_captcha_question { color: #ffffff !important; background: transparent !important; padding: 0 !important; margin: 0 !important; font-size: 14px !important; white-space: nowrap !important; } .gcs-footer-form input.et_pb_contact_captcha { width: 90px !important; margin: 0 !important; padding: 8px 12px !important; border-radius: 6px !important; border: 0 !important; background: #ffffff !important; color: #333333 !important; font-size: 14px !important; height: auto !important; } /* Submit button — gets the shared button styling above; just ensure it can be a flex child below the form fields */ .gcs-footer-form .et_pb_button_wrapper, .gcs-footer-form .et_contact_bottom_container { flex: 1 1 100% !important; margin: 0 !important; padding: 0 !important; } /* --- Trust logos --- */ .gcs-footer-logos-section .et_pb_row, .gcs-footer-logos-section .gcs-footer-logos-row { margin-left: auto !important; margin-right: auto !important; max-width: 640px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .gcs-footer-logos-section .et_pb_column { display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 0 !important; min-width: 0 !important; } .gcs-footer-logos-section .et_pb_image, .gcs-footer-logos-section .et_pb_image .et_pb_image_wrap { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; } .gcs-footer-logos-section .gcs-logo-ppf img, .gcs-footer-logos-section .gcs-logo-one-percent img, .gcs-footer-logos-section .gcs-logo-cc img { height: 98px !important; width: auto !important; } .gcs-footer-logos-section .gcs-logo-bfc img { height: 50px !important; width: auto !important; } /* --- Copyright row --- */ .gcs-footer-legal .gcs-footer-copyright p { color: #ffffff !important; font-size: 14px; margin: 0; } .gcs-footer-legal .gcs-footer-copyright a { color: #ffffff !important; text-decoration: none; } .gcs-footer-legal .gcs-footer-copyright a:hover { text-decoration: underline; } /* --- Mobile --- */ @media (max-width: 980px) { .gcs-footer-cta .et_pb_row { gap: 32px; } .gcs-footer-form p.et_pb_contact_field { flex: 1 1 100% !important; } .gcs-footer-form .et_pb_contact_captcha_question { flex: 1 1 100% !important; } } @media (max-width: 768px) { .gcs-footer-logos-section .et_pb_row { flex-wrap: wrap !important; gap: 24px; } .gcs-footer-logos-section .gcs-logo-ppf img, .gcs-footer-logos-section .gcs-logo-one-percent img, .gcs-footer-logos-section .gcs-logo-cc img { height: 64px !important; } .gcs-footer-logos-section .gcs-logo-bfc img { height: 36px !important; } } /* ============================================================================== ROUND 4 — Aggressive overrides to beat Divi's generated CSS. These come last in the file and use body-prefixed selectors so they win against anything Divi outputs from the et_pb_section/row/module shortcodes. ============================================================================== */ /* Constrain every footer row to a sensible max-width. The dark bg stays full-width because it's on the section, but the content inside is contained. */ body .gcs-footer-cta > .et_pb_row, body .gcs-footer-cta .et_pb_row.gcs-footer-cta-row, body .et_pb_section.gcs-footer-cta .et_pb_row { width: 100% !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; } body .gcs-footer-legal .et_pb_row { width: 100% !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; } /* (Stale logos-row rule removed — superseded by the rule at line ~1841.) */ /* Use CSS Grid on the CTA row so columns are guaranteed equal height and we can pin both buttons to the bottom row. */ body .gcs-footer-cta > .et_pb_row, body .gcs-footer-cta .gcs-footer-cta-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 60px !important; align-items: stretch !important; } /* Each CTA column is itself a flex column so margin-top:auto on its button works. */ body .gcs-footer-cta .et_pb_column { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; height: auto !important; } /* Push CONTACT US to the bottom of the left column. */ body .gcs-footer-cta .et_pb_column:first-child .gcs-footer-btn { margin-top: auto !important; } /* The contact-form module fills the right column. Use CSS Grid inside the form itself so Name+Email are on row 1, an empty 1fr row pushes the submit row to the bottom (matching CONTACT US baseline). */ body .gcs-footer-cta .gcs-footer-form { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; } body .gcs-footer-cta .gcs-footer-form > form.et_pb_contact_form, body .gcs-footer-cta .gcs-footer-form form.et_pb_contact_form { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto 1fr auto !important; gap: 10px !important; flex: 1 1 auto !important; width: 100% !important; } body .gcs-footer-cta .gcs-footer-form p.et_pb_contact_field { flex: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } body .gcs-footer-cta .gcs-footer-form p.et_pb_contact_field:nth-of-type(1) { grid-column: 1 !important; grid-row: 1 !important; } body .gcs-footer-cta .gcs-footer-form p.et_pb_contact_field:nth-of-type(2) { grid-column: 2 !important; grid-row: 1 !important; } body .gcs-footer-cta .gcs-footer-form .et_contact_bottom_container { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100% !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; } /* Captcha inside bottom container — keep it small and left-aligned. */ body .gcs-footer-cta .gcs-footer-form .et_pb_contact_right { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; } body .gcs-footer-cta .gcs-footer-form .et_pb_contact_right > p { margin: 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; } body .gcs-footer-cta .gcs-footer-form .et_pb_contact_captcha_question { color: #ffffff !important; background: transparent !important; font-size: 14px !important; white-space: nowrap !important; padding: 0 !important; margin: 0 !important; } body .gcs-footer-cta .gcs-footer-form input.et_pb_contact_captcha { width: 70px !important; height: auto !important; padding: 8px 10px !important; border-radius: 6px !important; border: 0 !important; background: #ffffff !important; color: #333333 !important; font-size: 14px !important; margin: 0 !important; } /* SUBMIT pinned to the right of the bottom container. */ body .gcs-footer-cta .gcs-footer-form button.et_pb_contact_submit, body .gcs-footer-cta .gcs-footer-form .et_pb_button { margin-left: auto !important; flex: 0 0 auto !important; } /* Constrain form field input widths so they don't stretch the full column. */ body .gcs-footer-cta .gcs-footer-form input.input, body .gcs-footer-cta .gcs-footer-form input[type="text"].input, body .gcs-footer-cta .gcs-footer-form input[type="email"].input { width: 100% !important; max-width: 100% !important; padding: 12px 16px !important; border-radius: 6px !important; border: 0 !important; background: #ffffff !important; color: #333333 !important; font-size: 15px !important; height: auto !important; box-sizing: border-box !important; } /* Both buttons — final word, identical visual treatment. */ body .gcs-footer-cta .gcs-footer-btn .et_pb_button, body .gcs-footer-cta .gcs-footer-form .et_pb_button, body .gcs-footer-cta .gcs-footer-form button.et_pb_contact_submit { background-color: #f2c94c !important; color: #111111 !important; border: 0 !important; border-radius: 999px !important; padding: 14px 40px !important; font-size: 14px !important; font-weight: 700 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; line-height: 1 !important; min-width: 170px !important; text-align: center !important; box-shadow: none !important; cursor: pointer !important; } body .gcs-footer-cta .gcs-footer-btn .et_pb_button:after, body .gcs-footer-cta .gcs-footer-form .et_pb_button:after, body .gcs-footer-cta .gcs-footer-form button.et_pb_contact_submit:after { display: none !important; content: "" !important; } /* (Stale logos-column rule removed — superseded by the rule at line ~1828.) */ @media (max-width: 980px) { body .gcs-footer-cta > .et_pb_row, body .gcs-footer-cta .gcs-footer-cta-row { grid-template-columns: 1fr !important; gap: 32px !important; } body .gcs-footer-cta .gcs-footer-form > form.et_pb_contact_form { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto !important; } body .gcs-footer-cta .gcs-footer-form .et_contact_bottom_container { flex-wrap: wrap !important; } } /* ============================================================================== ROUND 5 — Section/row padding lock-down + SUBMIT styling lock-down. These come last so they win against the earlier rules and any Divi-generated inline padding on sections. ============================================================================== */ /* SECTIONS — force exact padding, no Divi auto-padding additions. */ body .et_pb_section.gcs-footer-cta { padding-top: 60px !important; padding-bottom: 0 !important; margin: 0 !important; } body .et_pb_section.gcs-footer-logos-section { padding-top: 20px !important; padding-bottom: 0 !important; margin: 0 !important; } body .et_pb_section.gcs-footer-legal { padding-top: 0 !important; padding-bottom: 30px !important; margin: 0 !important; } /* ROWS — no extra top/bottom padding inside rows. */ body .gcs-footer-cta > .et_pb_row, body .gcs-footer-cta .gcs-footer-cta-row { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } body .gcs-footer-logos-section .et_pb_row { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } body .gcs-footer-legal .et_pb_row { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* SUBMIT — anchor next to the captcha (not pinned to the far right), and force the exact same look as CONTACT US, including font-style: normal with selectors specific enough to beat Divi's .et_pb_contact_submit rule. */ body .gcs-footer-cta .gcs-footer-form .et_contact_bottom_container { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; /* not space-between */ gap: 20px !important; } body .gcs-footer-cta .gcs-footer-form .et_contact_bottom_container .et_pb_contact_right { flex: 0 0 auto !important; } body .gcs-footer-cta .gcs-footer-form button.et_pb_contact_submit, body .gcs-footer-cta .gcs-footer-form button.et_pb_contact_submit.et_pb_button, body .gcs-footer-cta .gcs-footer-form .et_pb_button.et_pb_contact_submit, body .gcs-footer-cta .gcs-footer-form .et_pb_button { margin: 0 !important; /* no margin-left:auto pushing it right */ flex: 0 0 auto !important; align-self: center !important; font-style: normal !important; font-family: inherit !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-size: 14px !important; padding: 14px 40px !important; border-radius: 999px !important; border: 0 !important; background-color: #f2c94c !important; color: #111111 !important; min-width: 170px !important; line-height: 1 !important; box-shadow: none !important; text-align: center !important; } /* Belt-and-braces: kill any italic the contact_submit selector might bring in. */ body .et_pb_contact_form_container.gcs-footer-form button.et_pb_contact_submit, body .et_pb_contact_form_container.gcs-footer-form .et_pb_button { font-style: normal !important; } /* ============================================================================== ROUND 6 — Maximum-specificity SUBMIT lock + captcha hidden by default. ============================================================================== */ /* Hide the captcha question wrapper by default. The footer.js script reveals it on the first SUBMIT click. If JS fails for some reason, we add a `.gcs-show-captcha` toggle escape hatch. */ body .gcs-footer-cta .gcs-footer-form .et_contact_bottom_container .et_pb_contact_right { display: none !important; } body .gcs-footer-cta .gcs-footer-form .et_contact_bottom_container .et_pb_contact_right[data-gcs-captcha-state="visible"], body .gcs-footer-cta .gcs-footer-form.gcs-show-captcha .et_pb_contact_right { display: flex !important; } /* Make the SUBMIT button visually identical to CONTACT US. The selector chain is the highest specificity we can write without inline styles: 1 tag + 5 classes + 1 attribute selector = beats anything Divi outputs. We also reset every native