/* ============================================================ Custom maintenance overrides — SolarZero static site Loaded LAST in so these rules win the cascade. Add future fix CSS here instead of editing Elementor output. ============================================================ */ /* --- Sticky footer ------------------------------------------ Footer pinned to the bottom of the viewport when page content is short (no empty gap below it); normal flow on long pages. Flexbox column layout on the #page wrapper. ----------------------------------------------------------- */ html { height: 100%; /* Always reserve space for the vertical scrollbar so the viewport width doesn't change when page content loads and the scrollbar appears. Without this, the nav button could be clipped on first load (before the scrollbar appeared) and only look right after a reload. */ scrollbar-gutter: stable; } body { min-height: 100%; } #page.site { display: flex; flex-direction: column; min-height: 100vh; } #page.site > main { flex: 1 0 auto; /* grow to fill remaining space, pushing footer down */ } #page.site > #masthead, #page.site > #colophon { flex: 0 0 auto; /* header & footer keep their natural height */ } /* --- Solar-Subscription: intro paragraph width = video box (#4) --------- */ .elementor-2086 .elementor-element.elementor-element-84e1f88 > .elementor-container { max-width: 1140px !important; } /* --- Solar-Subscription: "24/7 Monitoring" heading was pushed below the body copy by a 115px top padding -> align it to top so header sits above body (#6) */ .elementor-2086 .elementor-element.elementor-element-10ef524 { padding-top: 0 !important; } /* --- Nav: at tablet/mobile the hamburger was stranded mid-row (and the "My SolarZero" button wrapped to a 2nd line). Group hamburger + button together on the right, logo on the left, on one line. (#2) ------------ */ @media (max-width: 1024px) { .elementor-2082 .elementor-element.elementor-element-561ab82 > .elementor-container { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; padding-left: 16px; padding-right: 16px; /* keep the button off the edge so a scrollbar can't clip it */ box-sizing: border-box; } /* Logo is the ONLY item allowed to flex/shrink. The hamburger + button never shrink and never disappear, so the customer's CTA always stays visible. */ .elementor-2082 .elementor-element.elementor-element-5c54ecf { /* logo column */ flex: 1 1 auto !important; /* yields space first under pressure */ width: auto !important; min-width: 60px; /* small floor -> logo always shows, just smaller */ max-width: 119px; margin-right: auto !important; /* push hamburger + button to the right */ overflow: hidden; } .elementor-2082 .elementor-element.elementor-element-a835822 img { width: auto !important; height: auto !important; max-width: 100% !important; /* scale down with the column */ } .elementor-2082 .elementor-element.elementor-element-00502fa { /* hamburger column */ flex: 0 0 auto !important; width: auto !important; max-width: 48px !important; /* cap it so a JS-set nav width can't balloon the column */ order: 2; } .elementor-2082 .elementor-element.elementor-element-e8942d4 { /* search (already hidden) */ display: none !important; } .elementor-2082 .elementor-element.elementor-element-aafbecf { /* My SolarZero button column */ flex: 0 0 auto !important; /* never shrink -> button always visible */ width: auto !important; order: 3; } .elementor-2082 .elementor-element.elementor-element-9f7b054 { /* the button widget -> shrink to pill */ width: auto !important; max-width: none !important; flex: 0 0 auto !important; } } /* --- About / FAQs / Contact: these 3 pages were published WITHOUT their per-page Elementor CSS (confirmed: same on the live site), so they had no coloured page-title bar and fell back to the kit's default heading font (Roboto), making them look different from the rest of the site. Best-effort match to the other pages: a coloured title bar + the same Helvetica headings. NOTE: proper fix is regenerating Elementor CSS in WordPress (needs WP access). Contact's yellow is a best guess — confirm the exact shade with the customer. */ .elementor-2089 .elementor-element.elementor-element-f40bc21, /* About hero */ .elementor-2091 .elementor-element.elementor-element-f7f429a { /* FAQs hero */ background-color: #D1F2FC; /* same pale blue as the home hero */ padding-top: 40px; padding-bottom: 40px; } .elementor-2093 .elementor-element.elementor-element-485bcf8 { /* Contact hero */ background-color: #FCF3D1; /* pale yellow, per the customer's feedback (others are blue) */ padding-top: 40px; padding-bottom: 40px; } /* Contact hero was full-width (content flush to the edge); box it like the other pages' heroes so the title/subtitle line up with the rest of the site. */ .elementor-2093 .elementor-element.elementor-element-485bcf8 > .elementor-container { max-width: 1140px; margin-left: auto; margin-right: auto; } .elementor-2089 .elementor-heading-title, .elementor-2091 .elementor-heading-title, .elementor-2093 .elementor-heading-title { font-family: "Helvetica", Arial, sans-serif !important; /* match the other pages' headings */ } /* --- Solar-Subscription: the intro paragraph (text widget f5cbeff) has a fixed "initial width" on mobile (max-width:308px), so below 768px it shrank to a narrow column instead of filling the width. Make it full width on mobile. */ @media (max-width: 767px) { .elementor-2086 .elementor-element.elementor-element-f5cbeff { width: 100% !important; max-width: 100% !important; } } /* --- Solar-Subscription mobile: Elementor's "mobile width: initial" baked fixed px widths onto text + heading widgets, so on mobile they shrank to narrow columns (e.g. intro paragraph, "24/7 Monitoring" heading + body). On mobile the layout is single-column, so force all such text/heading widgets to full width. This is a broad rule to avoid fixing each widget one at a time. */ @media (max-width: 767px) { .elementor-2086 .elementor-widget-text-editor.elementor-widget-mobile__width-initial, .elementor-2086 .elementor-widget-heading.elementor-widget-mobile__width-initial { width: 100% !important; max-width: 100% !important; } } /* "24/7 Monitoring" heading + body are also px-capped at tablet width (<=1024) */ @media (max-width: 1024px) { .elementor-2086 .elementor-element.elementor-element-10ef524, .elementor-2086 .elementor-element.elementor-element-2da6bb0 { width: 100% !important; max-width: 100% !important; } }