/* Theme Name: Sri Sai Ganesh Child Theme URI: https://bangaloreseptictankcleaningservice.com/ Description: Child theme for Sri Sai Ganesh Septic Tank Cleaners. Holds the mobile call bar, the quote-form bridge to the booking API, and brand CSS. Everything else is built in Elementor and stays editable there. Author: Sri Sai Ganesh Template: astra Version: 1.1.0 Text Domain: ssg-child */ /* Brand tokens mirrored from the Elementor global kit (CLAUDE.md section 1), so CSS written here cannot drift from what the page builder renders. */ :root{ --ssg-green:#0B5D1E; --ssg-green-bright:#2E9E44; --ssg-yellow:#FFC400; --ssg-navy:#0F172A; --ssg-body:#44504B; --ssg-muted:#F4F6F4; --ssg-border:#D9E0D9; --ssg-urgent:#B3261E; --ssg-bar-h:62px; } /* ---------- Mobile call bar ---------- Rendered by the child theme rather than per-Elementor-template, so it is genuinely on EVERY page including 404 and search, and cannot be deleted by accident while editing one page. Mobile only: on desktop the header phone number is always visible and a fixed bar would just eat viewport. */ .ssg-callbar{ position:fixed; left:0; right:0; bottom:0; z-index:9999; display:none; grid-template-columns:1fr 1fr; box-shadow:0 -2px 14px rgba(15,23,42,.18); } .ssg-callbar a{ display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:var(--ssg-bar-h); padding:.5rem; font-family:Poppins,"Open Sans",system-ui,sans-serif; font-weight:700; font-size:1.02rem; text-decoration:none; line-height:1.15; } .ssg-callbar .ssg-call{ background:var(--ssg-yellow); color:var(--ssg-navy); } .ssg-callbar .ssg-wa{ background:#25D366; color:#fff; } .ssg-callbar a:active{ filter:brightness(.94); } .ssg-callbar svg{ width:22px; height:22px; flex:0 0 auto; fill:currentColor; } .ssg-callbar .ssg-cb-sub{ display:block; font-weight:500; font-size:.72rem; opacity:.85; } @media (max-width:1024px){ .ssg-callbar{ display:grid; } /* Stop the fixed bar covering the last element of every page. */ body.ssg-has-callbar{ padding-bottom:var(--ssg-bar-h); } } /* Respect users who ask for reduced motion. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; } } /* ---------- Form honeypot ---------- Off-screen rather than display:none: some bots skip fields that are display:none, but they still fill one that is merely positioned away. */ .ssg-hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; } /* ---------- Layout helpers used by the Elementor templates ---------- */ @media (max-width:767px){ .ssg-hide-mobile{ display:none!important; } } .ssg-card{ transition:box-shadow .2s ease; } .ssg-card:hover{ box-shadow:0 6px 20px rgba(15,23,42,.10); } .ssg-mainhead{ box-shadow:0 2px 10px rgba(15,23,42,.08); position:relative; z-index:20; } .ssg-hero h1{ text-shadow:0 2px 12px rgba(0,0,0,.35); } .ssg-emergency .elementor-icon-box-title, .ssg-emergency .elementor-icon-box-description{ color:#fff!important; } .ssg-emergency .elementor-icon{ background-color:#FFC400!important; color:#B3261E!important; } .ssg-footer a:hover{ color:#FFC400!important; } /* ---------- Full-width Elementor pages inside Astra ---------- Astra wraps page content in .ast-container (max ~1240px). Every section here is built as a full-width band with its own boxed inner container, so Astra's box must step aside or the coloured bands stop short of the screen edges. */ body.page .site-content > .ast-container{ max-width:100%!important; padding:0!important; display:block!important; } body.page #primary{ margin:0!important; padding:0!important; width:100%!important; } /* ---------- Header ---------- */ .ssg-mainhead .elementor-button{ white-space:nowrap; } .ssg-mainhead .elementor-nav-menu--main .elementor-item{ padding-left:9px; padding-right:9px; } /* ---------- Mobile polish ---------- The top bar's job on desktop is phone + email + hours. On a phone the sticky bottom bar already carries call/WhatsApp, so the top bar shrinks to one line: the 24/7 promise, which is the thing worth reading first. */ @media (max-width:767px){ /* Rows stacked on mobile: drop the large desktop gap between the two halves. */ .e-con.e-flex{ --row-gap:16px; } .ssg-hero h1{ font-size:30px!important; } } /* Long email addresses must break instead of overflowing narrow columns. */ .elementor-icon-list-text, .elementor-icon-box-description{ overflow-wrap:anywhere; } /* ---------- Symmetric buttons ---------- Every Elementor button shares one box model: same height, same horizontal padding, icon and label centred together. Without this a button's size follows its label, so "Call 99000 07288" and "WhatsApp Us" come out different widths side by side. */ .elementor-button{ display:inline-flex!important; align-items:center; justify-content:center; gap:8px; line-height:1.2; } .elementor-button .elementor-button-content-wrapper{ align-items:center; justify-content:center; gap:8px; } .elementor-button .elementor-button-icon{ margin:0!important; display:inline-flex; } .elementor-button-icon svg{ width:1em; height:1em; } .elementor-button.elementor-size-lg{ min-height:54px; padding:14px 26px; } .elementor-button.elementor-size-md{ min-height:48px; padding:12px 22px; } .elementor-button.elementor-size-sm{ min-height:40px; padding:9px 16px; } /* The Call + WhatsApp pair: always the same width AND height as each other. An inline grid with equal 1fr columns sizes BOTH columns to the longer label, so the pair is symmetric whatever text the client later types into either button. */ .elementor-button-text{ white-space:nowrap; } .ssg-cta-pair{ display:inline-grid!important; grid-auto-flow:column; grid-auto-columns:1fr; gap:14px!important; width:auto!important; max-width:100%; } .ssg-cta-pair > .elementor-widget-button{ width:100%!important; max-width:none!important; margin:0!important; } .ssg-cta-pair > .elementor-widget-button .elementor-button{ width:100%; } @media (max-width:767px){ /* Phones: stacked, both full width — two equal tap targets. */ .ssg-cta-pair{ grid-auto-flow:row; width:100%!important; } } /* Header: brand left, menu centred on one line, call button right. */ .ssg-mainhead .elementor-nav-menu{ flex-wrap:nowrap!important; } .ssg-mainhead .elementor-nav-menu--main .elementor-item{ white-space:nowrap; } .ssg-brand .elementor-widget-text-editor p{ margin:0; white-space:nowrap; } /* ---------- Header on small laptops / tablets ---------- Brand + eight menu items + the call button need ~1280px. Below that the menu goes to the burger (exactly as on phones) instead of pushing the call button off-screen. */ @media (max-width:1279px){ .ssg-mainhead .elementor-nav-menu--main{ display:none!important; } .ssg-mainhead .elementor-menu-toggle{ display:flex!important; } .ssg-mainhead .elementor-nav-menu--dropdown.elementor-nav-menu__container{ display:block; } } @media (min-width:1280px){ .ssg-mainhead .elementor-menu-toggle{ display:none!important; } /* Hide the MOBILE menu only. `elementor-nav-menu--dropdown` is also the class on every hover sub-menu