/* Theme Name: Poolcare Child Template: googly Author: Googly WP Description: Googly Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more. Tags: translation-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce Version: 1.1.40.1693277791 Updated: 2023-08-29 02:56:31 */ /* 2026-07-21 font unification: Sora only (Cormorant SC + Permanent Marker dropped; Elementor's Roboto/Roboto Slab/Cormorant loads disabled in functions.php). */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap'); /*------------ common css ------------*/ .single-content h1.elementor-heading-title, .single-content h2.elementor-heading-title, .single-content h3.elementor-heading-title, .single-content h4.elementor-heading-title, .single-content h5.elementor-heading-title, .single-content h6.elementor-heading-title { margin: 0; } body .wp-block-search .wp-block-search__input, body .wp-block-search, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, button:hover, .wp-element-button:hover, button:focus, .wp-element-button:focus { box-shadow: none; border-radius: 0; } textarea, textarea:focus { box-shadow: none; color: var(--global-palette1); } .footer-widget-area-inner .wp-block-list { padding: 0; margin: 0; } /* footer */ .site-footer-section .widget-area ul { list-style: none; } /* archive page read more icon*/ body .loop-entry .entry-content-wrap .entry-footer .more-link-wrap .googly-svg-iconset { display: none; } /* archive conetnt left sidebar */ body .wp-block-latest-posts__list li, body.search-results.content-style-unboxed .site .post-thumbnail, body.woocommerce div.product .woocommerce-tabs ul.tabs li:first-child, .wp-block-latest-posts.wp-block-latest-posts__list { margin: 0; list-style: none; } .wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date { color: var(--global-palette2); } #secondary .woocommerce.widget_product_categories>ul li, .widget .tagcloud a, .widget li, #secondary .woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item, .wp-block-tag-cloud .tag-cloud-link { padding-block: 6px; } .wp-block-search .wp-block-search__button { color: var(--global-palette9); } /*------------ end common css ------------*/ /* -------------------- ----> elementor design css <---- -------------------- */ /* FAQ area */ .faq-area .elementor-accordion .elementor-accordion-item .elementor-tab-title { border-bottom: 1px solid #dbdad7; } /* Blog title truncation removed 2026-07-21 — it hid 60-72% of every headline. Replaced by a 3-line clamp in the formatting block below. */ /* newslatter section */ .newsletter-form { display: inline-flex; text-align: center; } .newsletter-form input[type="email"], input[type="text"], .newsletter-form input[type="email"], input[type="text"]:focus { border-radius: 10PX; background: #fff; border: none; border-bottom: 1px solid #fff; padding: 20px 8px; color: #000000; box-shadow: none; width: 300px; } .mc4wp-form .newsletter-form input[type="submit"] { background-color: var(--global-palette3); padding: 33px 35px; border-radius: 27px; margin-left: 10px; border-radius: 10PX; width: 65px; background-image: url(./assets/image/subscribe-arrow.svg); background-size: 25px; background-repeat: no-repeat; background-position: 50%; top: 0; bottom: 0; font-size: 0; } @media (max-width: 576px) { .newsletter-form { width: 215px; display: flex; } } /****newslatter section center/**** /* archive search left sidebar */ .wp-block-search .wp-block-search__input { border: none; padding: 0.7em 0.5em; color: #000000; border: 1px solid var(--global-palette6); } input[type="search"]:focus { color: #000000; } body .wp-block-search button.wp-block-search__button { fill: var(--global-palette9); background: var(--global-palette2); border-radius: 0; margin-left: 10px; } /* archive page read more */ body .loop-entry .entry-content-wrap .entry-footer .more-link-wrap .post-more-link { font-size: 14px; text-transform: capitalize; text-decoration: underline; font-weight: 500; color: var(--global-palette1); } .wp-block-gallery.has-nested-images.columns-default.is-cropped.wp-block-gallery-1.is-layout-flex.wp-block-gallery-is-layout-flex { justify-content: center; } /* icon-area*/ body .uc_thumb img { border-radius: 30px; } /* what we do */ .shine-effect { overflow: hidden; } .shine-effect::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 50%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 50%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } .shine-effect:hover::before { -webkit-animation: shine .75s; animation: shine .75s; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } /* cms-area */ .cms-area .uc_long_content_box .uc_box_content { opacity: 0; } .cms-area .uc_long_content_box:hover .uc_box_content { opacity: 1; margin: 30px; } /* header-contact: phone icon + number on one line, icon sized off the same font-size (1.2em) so it always matches the number's text height, even as that font-size scales fluidly below. */ .header-html-inner { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-right: 30px; } .header-html .header-html-inner::before { content: ''; display: inline-block; flex: 0 0 auto; background-image: url('assets/image/call.svg'); background-size: contain; background-repeat: no-repeat; width: 1.2em; height: 1.2em; } .header-html-inner p { margin: 0; line-height: 1; } .element-contact-inner-wrap { display: grid; margin: 0; } .element-contact-inner-wrap .header-contact-item { margin-top: 0; } /* ============================================================ H2Oasis customizations ============================================================ */ /* Floating brand logo (H2Oasis emblem, square 1:1): pinned to the top-left, detached from the header flow so it floats as an oversized badge and stays visible on scroll (position: fixed). It's still the home link. */ .site-branding a.brand { position: fixed !important; /* Fluid top/left offset: constant 14px/22px down through the desktop nav's own cutover (1024px); below that it eases toward 6px/12px so the badge tracks the shrinking logo instead of leaving a fixed-position cliff. */ top: clamp(6px, 3vw - 9px, 14px); left: clamp(10px, 1.4vw - 4px, 22px); z-index: 9999; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .site-branding a.brand img.custom-logo, .site-branding a.brand img { width: auto !important; /* Fluid size: a continuous ramp replaces the old two-tier 315px/146px cliff at 767px (which left the logo pinned at full 315px through the whole 768-1024 tablet range -> it overran the portal banner text there) and now keeps shrinking below 767px too (the old flat 146px still clipped narrow phones like 375px). Two clamp segments meet exactly at 146px @767px so there's no visible jump, just a steady scale-down from 315px (>=1024px) to 90px (<=320px). */ height: clamp(146px, 65.76vw - 358.4px, 315px) !important; max-width: none !important; max-height: none !important; aspect-ratio: 1 / 1; object-fit: contain; margin: 0 !important; display: block; /* 1s fade + matching 1s shrink/grow so both the scroll-dim and the hover feel smooth easing in AND out. */ transition: transform 1s ease, opacity 1s ease; transform-origin: top left; /* shrink stays docked in the top-left corner */ will-change: transform, opacity; } /* Once scrolled out of the header (JS toggles .h2o-logo-dim), the logo eases to 45% opacity AND shrinks to half size; both run over 1s (transition set above). */ .site-branding a.brand.h2o-logo-dim img.custom-logo, .site-branding a.brand.h2o-logo-dim img { opacity: .45; transform: scale(.5); } /* Hovering/focusing the logo always overrides the dim state: full opacity and a gentle "breathing" grow. Listed last so it wins at equal specificity. */ .site-branding a.brand:hover img.custom-logo, .site-branding a.brand:hover img, .site-branding a.brand:focus-visible img.custom-logo, .site-branding a.brand:focus-visible img { opacity: 1; transform: scale(1.08); transform-origin: bottom left; /* hover grows toward the right and UP */ } /* Keep header dropdown submenus from being clipped. */ #main-header, .site-header, .site-header-wrap, .site-header-inner-wrap, .site-main-header-wrap, .site-main-header-inner-wrap { overflow: visible !important; } @media (max-width: 767px) { /* Segment 2 of the fluid logo ramp: continues shrinking below 767px (where segment 1 above would otherwise plateau at its 146px floor) down to a 90px floor at ~320px, so the logo keeps clearing the portal banner text on narrow phones instead of holding a flat 146px that clipped it at e.g. 375px wide. */ .site-branding a.brand img.custom-logo, .site-branding a.brand img { height: clamp(90px, 12.53vw + 49.9px, 146px) !important; } } /* Header CTA button -> logo "sun" orange (#f8a820, sampled from the logo). Theme styles it via #main-header .header-button, so match + !important. */ /* "App" badge — the H2Oasis sun logo with "App" baked in (red marker, canted up), gently breathing. Replaces the old text sign-in button. The theme's text label is hidden (font-size:0) but stays in the DOM as the accessible name. */ #main-header .header-button, .site-header .header-button, #main-header .header-button:focus, .site-header .header-button:focus { background: url('assets/image/h2oasis-app-badge.png?v=17') center center / contain no-repeat !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; width: 92px !important; height: 92px !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; animation: h2o-app-breathe 4.6s ease-in-out infinite !important; /* slower breathing */ transform-origin: center center !important; } #main-header .header-button:hover, .site-header .header-button:hover { animation-play-state: paused !important; /* settle the breathing on hover */ transform: scale(1.05) !important; } /* Slow "breathing" pulse. */ @keyframes h2o-app-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.085); } } /* The "2" in H2Oapp: 60% of the main letters, lowered like a subscript. */ .header-button .h2o-sub2, .mobile-header-button .h2o-sub2 { font-size: 0.62em; vertical-align: -0.16em; /* small 2 dropped just below the baseline → H₂O subscript */ } /* Center the primary menu in the header bar. The Googly header row has only left/right zones (the menu sits in the left zone with the logo), so we pull the nav out of flow and absolutely-center it across the whole row. - Force the row inner-wrap to be the positioning context (neutralise the intermediate positioned section/item wrappers). - width:max-content + nowrap so the menu stays on one horizontal line. */ .site-main-header-inner-wrap { position: relative; } /* the nav's wrapper item is position:relative (the collapsed containing block); make it static so the nav centers against the full-width inner-wrap instead. */ .site-main-header-inner-wrap .site-header-item-main-navigation { position: static !important; } .site-main-header-inner-wrap .main-navigation { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; /* Asymmetric gutters (2026-07-10): right needs MORE room than left — the App badge (92px, breathing) + its gap + the call block stack up to ~390px from the right edge, while the floating logo needs ~350px on the left. The wider right gutter also shifts the centered menu ~20px left of true center, buying permanent clearance from the badge. */ padding: 0 390px 0 350px; box-sizing: border-box; white-space: nowrap; pointer-events: none; /* gutters don't swallow logo/call clicks */ } .site-main-header-inner-wrap .main-navigation > * { pointer-events: auto; } .site-main-header-inner-wrap .main-navigation ul { display: flex !important; flex-wrap: nowrap !important; white-space: nowrap; } /* (2026-07-10) With Pricing + Free Estimate nested under "More", the menu is 3 top-level items (~260px) and fits the desktop header at every width from the theme's own 1025px cutover up — the earlier squeeze tiers and the 1025-1139 hamburger band are no longer needed and were removed. */ /* Dropdown panels: the theme's fixed 220px sub-menu is narrower than the new "Commercial Pressure Washing" label, so the text ran off the white panel. Let each panel size to its longest item instead. */ .site-main-header-inner-wrap .main-navigation ul.menu li ul.sub-menu, #main-header ul.menu ul.sub-menu { width: max-content !important; min-width: 230px !important; max-width: 340px !important; } #main-header ul.menu ul.sub-menu a { white-space: nowrap; } /* ------------------------------------------------------------------ Reserve the hamburger for tablet-PORTRAIT and phones only; give tablet-LANDSCAPE (and, since real laptops/monitors are already >=1025px wide, effectively every computer screen) the full menu. The theme's own breakpoint (googly/assets/css/header.min.css) is a single plain `@media (min-width:1025px)` swap between #main-header and #mobile-header with no orientation awareness, so e.g. an older 4:3 iPad in LANDSCAPE (1024x768) falls 1px short and gets the hamburger even though there's plenty of width for the real menu. This override reopens the desktop header for that landscape gap: - floor 960px comfortably EXCLUDES every current iPhone's landscape width (largest is the 14/15/16 Pro Max at 926px), so phones stay on the hamburger in either orientation. - ceiling 1024px hands off to the theme's own unconditional >=1025px rule above, which already covers every newer/larger tablet-landscape width (1080-1366) and every real computer screen (>=1280 in practice). Tablet-PORTRAIT stays on the hamburger even at its widest (iPad Pro 12.9" portrait = 1024px) because it fails the orientation check. */ /* (Removed 2026-07-10) The old 960-1024-landscape desktop-header override predates the 5-item menu ("Free Estimate" + the wider "Pools +/Patios +" labels). With the fixed 315px floating logo on the left and the App badge + call block on the right, the centered menu physically cannot fit at those widths anymore — it overlapped the logo. Tablet-landscape now gets the theme's clean hamburger instead. */ /* Task: "About Us" button -> same blue as the Free Estimate button (#27b0cc). */ .elementor-element-5b8f285 .elementor-button { background-color: #27b0cc !important; border-color: #27b0cc !important; } /* Recolor the template's lime/matte-gold (Elementor global "googly3", used by the Premium pricing card, hover overlays, the testimonial icon, etc.) to the brand blue. !important beats the theme's inline `:root body.googly-elementor-colors` block. One variable swap covers all 12 instances (none are hardcoded). */ body { --e-global-color-googly3: #27b0cc !important; } /* The newsletter form's submit button hardcodes the lime (not the variable). */ .newsletter-form input[type="submit"], .newsletter-form button[type="submit"] { background-color: #27b0cc !important; border-color: #27b0cc !important; } /* ============================================================ Service detail pages (.h2o-svc) — shared on-brand styling ============================================================ */ .h2o-svc { font-family: 'Sora', sans-serif; } .h2o-svc-hero { background: linear-gradient(135deg, #27b0cc 0%, #1f93ac 100%); color: #ffffff; text-align: center; padding: 66px 20px 86px; } .h2o-svc-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 600; opacity: .9; margin: 0 0 12px; } /* H1 is constrained to a centered column so a long heading clears the big floating logo (top-left, ~315x335px) instead of running under it. */ .h2o-svc-h1 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 40px; line-height: 1.15; margin: 0 auto 16px; max-width: 760px; color: #ffffff; } .h2o-svc-sub { font-size: 19px; max-width: 700px; margin: 0 auto 30px; opacity: .95; } /* Body copy reads as written; the theme-wide `capitalize` on only suits the display headings, not multi-sentence paragraphs. */ .h2o-svc-sub, .h2o-svc-intro, .h2o-svc-card p { text-transform: none; } .h2o-svc-btn { display: inline-block; background: #f8a820; color: #0e2a3a; font-weight: 700; padding: 13px 32px; border-radius: 10px; text-decoration: none; transition: background .25s ease; } .h2o-svc-btn:hover { background: #e3960f; color: #0e2a3a; } .h2o-svc-intro { max-width: 880px; margin: -44px auto 0; background: #ffffff; border-radius: 16px; padding: 40px 44px; box-shadow: 0 10px 34px rgba(15,42,58,.10); position: relative; } .h2o-svc-intro p { font-size: 17px; line-height: 1.75; color: #3a4a55; margin: 0 0 18px; } .h2o-svc-intro p:last-child { margin-bottom: 0; } .h2o-svc-features { max-width: 1080px; margin: 0 auto; padding: 52px 20px 60px; } .h2o-svc-h2 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 30px; text-align: center; margin: 0 0 34px; color: #0f2a3a; } .h2o-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .h2o-svc-card { background: #ffffff; border: 1px solid #e5eef4; border-radius: 14px; padding: 26px; box-shadow: 0 6px 22px rgba(15,42,58,.06); } .h2o-svc-card h3 { font-size: 19px; margin: 0 0 10px; color: #27b0cc; } .h2o-svc-card p { font-size: 15px; line-height: 1.6; color: #52616b; margin: 0; } .h2o-svc-cta { background: #eef7fb; text-align: center; padding: 58px 20px; } @media (max-width: 900px) { .h2o-svc-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .h2o-svc-grid { grid-template-columns: 1fr; } .h2o-svc-h1 { font-size: 38px; } } /* The big floating logo only renders at >=1025px (mobile header takes over at <=1024). Between 1025 and ~1400px a centered 760px heading can still slip under it, so drop the hero content below the logo's footprint in that range. */ @media (min-width: 1025px) and (max-width: 1399px) { .h2o-svc-hero { padding-top: 270px; } } /* dark mode */ html.h2o-dark .h2o-svc-intro { background: #1f2c4a; box-shadow: 0 10px 34px rgba(0,0,0,.4); } html.h2o-dark .h2o-svc-intro p { color: #c2ccdb; } html.h2o-dark .h2o-svc-h2 { color: #f2f6fb; } html.h2o-dark .h2o-svc-card { background: #1f2c4a; border-color: #324063; } html.h2o-dark .h2o-svc-card p { color: #aeb9c4; } html.h2o-dark .h2o-svc-cta { background: #16213a; } /* ---- Extended service-page sections (bring pages up to Home standard) ---- */ .h2o-svc-intro h2 { font-family:'Sora',sans-serif; font-weight:600; font-size:24px; color:#0f2a3a; margin:0 0 16px; text-transform:none; } html.h2o-dark .h2o-svc-intro h2 { color:#f2f6fb; } /* breadcrumb */ .h2o-svc-bc { max-width:1080px; margin:0 auto; padding:16px 20px 0; font-size:13px; color:#5a6b78; text-transform:none; } .h2o-svc-bc a { color:#27b0cc; text-decoration:none; } .h2o-svc-bc a:hover { text-decoration:underline; } .h2o-svc-bc i { font-style:normal; opacity:.5; margin:0 7px; } html.h2o-dark .h2o-svc-bc { color:#9fb0c4; } /* secondary ghost CTA */ .h2o-svc-btn--ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.75); margin-left:10px; } .h2o-svc-btn--ghost:hover { background:#fff; color:#0e2a3a; } /* trust strip */ .h2o-svc-trust { max-width:1080px; margin:30px auto 0; padding:0 20px; } .h2o-svc-trust ul { list-style:none; margin:0; padding:18px 22px; display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; align-items:center; background:#fff; border:1px solid #e5eef4; border-radius:14px; box-shadow:0 6px 22px rgba(15,42,58,.06); text-transform:none; } .h2o-svc-trust li { font-size:14px; font-weight:600; color:#3a4a55; display:flex; align-items:center; gap:8px; } .h2o-svc-trust li::before { content:"\2714"; color:#27b0cc; font-weight:800; } html.h2o-dark .h2o-svc-trust ul { background:#1f2c4a; border-color:#324063; } html.h2o-dark .h2o-svc-trust li { color:#c2ccdb; } /* generic band + section */ /* Band wash = the homepage's protected two-layer recipe (sky fade over the afternoon/sunset diagonal) so content pages match Home aesthetically. */ .h2o-svc-band { background-image: linear-gradient(180deg, #87CEEB 0%, rgba(135, 206, 235, 0) 180px, rgba(135, 206, 235, 0) calc(100% - 180px), #87CEEB 100%), var(--h2o-afternoon); } html.h2o-dark .h2o-svc-band { background-color:#2a2438; background-image: linear-gradient(180deg, var(--h2o-bg) 0%, rgba(24, 35, 63, 0) 180px, rgba(24, 35, 63, 0) calc(100% - 180px), var(--h2o-bg) 100%), var(--h2o-sunset); } .h2o-svc-sec { max-width:1080px; margin:0 auto; padding:clamp(84px, 8.5vw, 112px) 20px; } /* how it works steps */ .h2o-svc-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .h2o-svc-step { background:#fff; border:1px solid #e5eef4; border-radius:14px; padding:26px 22px; box-shadow:0 6px 22px rgba(15,42,58,.06); text-transform:none; } .h2o-svc-step-n { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:#27b0cc; color:#fff; font-weight:800; font-size:18px; margin:0 0 14px; } .h2o-svc-step h3 { font-size:17px; margin:0 0 8px; color:#0f2a3a; } .h2o-svc-step p { font-size:14.5px; line-height:1.6; color:#52616b; margin:0; } html.h2o-dark .h2o-svc-step { background:#1f2c4a; border-color:#324063; } html.h2o-dark .h2o-svc-step h3 { color:#f2f6fb; } html.h2o-dark .h2o-svc-step p { color:#aeb9c4; } @media(max-width:900px){ .h2o-svc-steps{ grid-template-columns:1fr 1fr; } } @media(max-width:560px){ .h2o-svc-steps{ grid-template-columns:1fr; } } /* expertise deep-dive */ .h2o-svc-expert { max-width:900px; margin:0 auto; text-transform:none; } .h2o-svc-expert p { font-size:17px; line-height:1.8; color:#3a4a55; margin:0 0 18px; } .h2o-svc-points { list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; } .h2o-svc-points li { position:relative; padding-left:30px; font-size:15.5px; line-height:1.6; color:#3a4a55; } .h2o-svc-points li::before { content:"\2714"; position:absolute; left:0; top:1px; color:#27b0cc; font-weight:800; } html.h2o-dark .h2o-svc-expert p, html.h2o-dark .h2o-svc-points li { color:#c2ccdb; } @media(max-width:600px){ .h2o-svc-points{ grid-template-columns:1fr; } } /* before/after placeholder */ .h2o-svc-ba-wrap { max-width:980px; margin:0 auto; text-transform:none; } .h2o-svc-ba { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .h2o-svc-ba figure { margin:0; border-radius:14px; overflow:hidden; position:relative; border:1px solid #cfe2ee; background:#dceaf2; min-height:240px; display:flex; align-items:center; justify-content:center; } .h2o-svc-ba figcaption { position:absolute; top:12px; left:12px; background:rgba(15,42,58,.78); color:#fff; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:5px 12px; border-radius:6px; } .h2o-svc-ba-ph { color:#5a6b78; font-size:13px; padding:20px; text-align:center; } .h2o-svc-ba-cap { text-align:center; color:#52616b; font-size:14px; margin:16px 0 0; } html.h2o-dark .h2o-svc-ba figure { background:#22324f; border-color:#324063; } html.h2o-dark .h2o-svc-ba-cap { color:#9fb0c4; } @media(max-width:600px){ .h2o-svc-ba{ grid-template-columns:1fr; } } /* pricing note callout */ .h2o-svc-note { max-width:900px; margin:0 auto; background:#eef7fb; border-left:4px solid #f8a820; border-radius:12px; padding:24px 28px; text-transform:none; } .h2o-svc-note p { margin:0; font-size:16px; line-height:1.7; color:#3a4a55; } html.h2o-dark .h2o-svc-note { background:#1f2c4a; } html.h2o-dark .h2o-svc-note p { color:#c2ccdb; } /* faq accordion */ .h2o-svc-faq-wrap { max-width:840px; margin:0 auto; text-transform:none; } .h2o-svc-faq { background:#fff; border:1px solid #e5eef4; border-radius:12px; margin:0 0 12px; overflow:hidden; } .h2o-svc-faq summary { cursor:pointer; list-style:none; padding:18px 22px; font-weight:600; font-size:16px; color:#0f2a3a; display:flex; justify-content:space-between; gap:16px; align-items:center; } .h2o-svc-faq summary::-webkit-details-marker{ display:none; } .h2o-svc-faq summary::after { content:"+"; color:#27b0cc; font-size:24px; font-weight:700; flex:0 0 auto; } .h2o-svc-faq[open] summary::after { content:"\2013"; } .h2o-svc-faq-a { padding:0 22px 20px; font-size:15px; line-height:1.7; color:#52616b; } html.h2o-dark .h2o-svc-faq { background:#1f2c4a; border-color:#324063; } html.h2o-dark .h2o-svc-faq summary { color:#f2f6fb; } html.h2o-dark .h2o-svc-faq-a { color:#aeb9c4; } /* related services */ .h2o-svc-related { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .h2o-svc-rel { display:block; background:#fff; border:1px solid #e5eef4; border-radius:12px; padding:22px; text-decoration:none; box-shadow:0 6px 22px rgba(15,42,58,.06); transition:transform .2s ease, box-shadow .2s ease; text-transform:none; } .h2o-svc-rel:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(15,42,58,.12); } .h2o-svc-rel span { font-size:17px; font-weight:700; color:#27b0cc; } .h2o-svc-rel small { display:block; margin-top:6px; color:#52616b; font-size:14px; } html.h2o-dark .h2o-svc-rel { background:#1f2c4a; border-color:#324063; } @media(max-width:760px){ .h2o-svc-related{ grid-template-columns:1fr; } } /* final CTA tel */ .h2o-svc-cta .h2o-svc-tel { display:block; margin-top:16px; color:#0f2a3a; font-weight:700; text-decoration:none; font-size:18px; } html.h2o-dark .h2o-svc-cta .h2o-svc-tel { color:#9fd9e8; } /* ---- About: Meet the Owner ---- */ .h2o-owner-card { max-width:920px; margin:0 auto; display:grid; grid-template-columns:230px 1fr; gap:38px; align-items:center; text-transform:none; } .h2o-owner-photo { width:230px; height:230px; border-radius:50%; object-fit:cover; border:5px solid #fff; box-shadow:0 12px 34px rgba(15,42,58,.20); } .h2o-owner-bio h2 { text-align:left; margin:0 0 6px; } .h2o-owner-name { font-weight:700; color:#27b0cc; font-size:18px; margin:0 0 14px; } .h2o-owner-bio p { font-size:17px; line-height:1.8; color:#3a4a55; margin:0 0 14px; } html.h2o-dark .h2o-owner-bio p { color:#c2ccdb; } @media(max-width:620px){ .h2o-owner-card{ grid-template-columns:1fr; text-align:center; justify-items:center; } .h2o-owner-bio h2{ text-align:center; } } /* ---- Linked service cards (Services hub) + group label ---- */ a.h2o-svc-card--link { text-decoration:none; display:block; transition:transform .2s ease, box-shadow .2s ease; } a.h2o-svc-card--link:hover { transform:translateY(-4px); box-shadow:0 14px 32px rgba(15,42,58,.13); } .h2o-svc-more { display:inline-block; margin-top:14px; color:#f8a820; font-weight:700; font-size:14px; } .h2o-svc-grouplabel { max-width:1080px; margin:0 auto; padding:0 20px; font-family:'Sora',sans-serif; font-weight:600; font-size:20px; color:#27b0cc; text-transform:none; } html.h2o-dark .h2o-svc-grouplabel { color:#6fd2e6; } /* FAQ category heading spacing */ .h2o-svc-faqcat { font-family:'Sora',sans-serif; font-weight:600; font-size:20px; color:#0f2a3a; margin:38px 0 16px; text-transform:none; } html.h2o-dark .h2o-svc-faqcat { color:#f2f6fb; } /* ============================================================ Live Google reviews ([h2o_google_reviews]) — on-brand block ============================================================ */ .h2o-greviews { max-width: 1180px; margin: 0 auto; font-family: 'Sora', sans-serif; text-transform: none; } .h2o-greviews-head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 30px; } .h2o-greviews-g { flex: 0 0 auto; } .h2o-greviews-headtext { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .h2o-greviews-rating { font-size: 30px; font-weight: 800; color: #0f2a3a; line-height: 1; } .h2o-greviews-count { color: #5a6b78; font-size: 15px; } .h2o-greviews-stars { display: inline-flex; gap: 1px; } .h2o-greviews-stars .h2o-star { color: #d9dde2; font-size: 18px; line-height: 1; } .h2o-greviews-stars .h2o-star.is-on { color: #fbbc05; } .h2o-greviews-write { margin-left: 6px; font-size: 14px; font-weight: 700; color: #27b0cc; text-decoration: none; border: 1.5px solid #27b0cc; border-radius: 8px; padding: 7px 14px; transition: background .2s ease, color .2s ease; } .h2o-greviews-write:hover { background: #27b0cc; color: #fff; } .h2o-greviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 22px; } .h2o-greviews-card { background: #fff; border: 1px solid #e5eef4; border-radius: 14px; padding: 24px; box-shadow: 0 6px 22px rgba(15,42,58,.06); text-align: left; display: flex; flex-direction: column; gap: 12px; } .h2o-greviews-card-top { display: flex; align-items: center; gap: 12px; } .h2o-greviews-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .h2o-greviews-avatar--letter { display: flex; align-items: center; justify-content: center; background: #27b0cc; color: #fff; font-weight: 700; font-size: 19px; } .h2o-greviews-author { display: block; font-weight: 700; color: #0f2a3a; font-size: 15px; } .h2o-greviews-time { display: block; color: #8a97a3; font-size: 13px; } .h2o-greviews-text { margin: 0; color: #3a4a55; font-size: 14.5px; line-height: 1.65; } .h2o-greviews-foot { text-align: center; margin: 34px 0 0; } .h2o-greviews-all { display: inline-block; background: #27b0cc; color: #fff; font-weight: 700; padding: 12px 28px; border-radius: 10px; text-decoration: none; transition: background .2s ease; } .h2o-greviews-all:hover { background: #1f93ac; color: #fff; } /* dark mode */ html.h2o-dark .h2o-greviews-rating { color: #f2f6fb; } html.h2o-dark .h2o-greviews-count { color: #aeb9c4; } html.h2o-dark .h2o-greviews-card { background: #1f2c4a; border-color: #324063; box-shadow: 0 10px 30px rgba(0,0,0,.35); } html.h2o-dark .h2o-greviews-author { color: #f2f6fb; } html.h2o-dark .h2o-greviews-time { color: #9fb0c4; } html.h2o-dark .h2o-greviews-text { color: #c2ccdb; } html.h2o-dark .h2o-greviews-stars .h2o-star { color: #3a4763; } html.h2o-dark .h2o-greviews-stars .h2o-star.is-on { color: #fbbc05; } /* ============================================================ Reviews carousel — reuse the template's Owl Carousel slide transition. Until Owl initialises (or if it's unavailable) the .h2o-greviews-grid rules above lay the cards out as the original responsive grid, so every review still renders. Once Owl loads we drop the grid and let it drive the slider. ============================================================ */ .h2o-greviews-carousel.owl-loaded { display: block; position: relative; } .h2o-greviews-carousel .owl-stage { display: flex; } .h2o-greviews-carousel .owl-item { display: flex; height: auto; } .h2o-greviews-carousel .owl-item .h2o-greviews-card { width: 100%; } /* Owl's base CSS forces .owl-item img to width:100% — keep avatars small. */ .h2o-greviews-carousel .owl-item img.h2o-greviews-avatar { width: 44px; height: 44px; max-width: 44px; } .h2o-greviews-carousel .h2o-greviews-avatar { flex: 0 0 44px; } .h2o-greviews-carousel .h2o-greviews-card-top > div { min-width: 0; } .h2o-greviews-carousel .owl-nav { margin: 0; } .h2o-greviews-carousel .owl-nav button.owl-prev, .h2o-greviews-carousel .owl-nav button.owl-next { position: absolute; top: 42%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid #e5eef4; box-shadow: 0 6px 22px rgba(15,42,58,.10); color: #27b0cc; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease, border-color .2s ease; } .h2o-greviews-carousel .owl-nav button.owl-prev:hover, .h2o-greviews-carousel .owl-nav button.owl-next:hover { background: #27b0cc; color: #fff; border-color: #27b0cc; } .h2o-greviews-carousel .owl-nav .owl-prev { left: -6px; } .h2o-greviews-carousel .owl-nav .owl-next { right: -6px; } .h2o-greviews-carousel .owl-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; } .h2o-greviews-carousel .owl-dots .owl-dot span { width: 9px; height: 9px; margin: 0; background: #d9dde2; border-radius: 50%; display: block; transition: background .2s ease, width .2s ease; } .h2o-greviews-carousel .owl-dots .owl-dot.active span { background: #27b0cc; width: 26px; border-radius: 6px; } html.h2o-dark .h2o-greviews-carousel .owl-nav button.owl-prev, html.h2o-dark .h2o-greviews-carousel .owl-nav button.owl-next { background: #1f2c4a; border-color: #324063; color: #6fd2e6; } html.h2o-dark .h2o-greviews-carousel .owl-dots .owl-dot span { background: #3a4763; } html.h2o-dark .h2o-greviews-carousel .owl-dots .owl-dot.active span { background: #27b0cc; } /* 1-up layout: keep reviews clear of the offset pool image on desktop, and drop the "Review us on Google" button onto its own centred line below the rating. */ .h2o-greviews-head { flex-direction: column; gap: 14px; } .h2o-greviews-summary { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; } .h2o-greviews-write { margin-left: 0; } @media (min-width: 1025px) { .h2o-greviews { max-width: 620px; margin-left: 0; margin-right: auto; } } .h2o-greviews-carousel .owl-nav .owl-prev { left: -2px; } .h2o-greviews-carousel .owl-nav .owl-next { right: -2px; } /* Sign-in (H₂Oapp portal) button restored into the header as the rightmost item. */ .site-header .header-button-wrap { display: block !important; order: 100; } /* inline-block (NOT flex) so the H₂O can use vertical-align for the subscript. */ #main-header .header-button { display: inline-flex !important; align-items: center; justify-content: center; } /* If the header row is flex, push the button to the far right (after the call block). */ .site-main-header-inner-wrap .site-header-item-end { display: flex; align-items: center; } .site-main-header-inner-wrap .site-header-item-end .header-button-wrap { margin-left: 0; } /* The button and the "Call Us Today" block are SEPARATE .site-header-item flex children of the header's right zone; reorder the button's item before the phone's so the button sits to the LEFT of the phone. */ /* margin-right needs !important — the theme pins .site-header-item margins. The gap must clear the phone block's call icon, which sits ~50px left of its text. */ .site-header-item:has(> .header-button-wrap) { order: -1; margin-right: clamp(40px, 12.5vw - 88px, 112px) !important; } /* ------------------------------------------------------------------ Fluid desktop-header scaling (1025-1600px window). The centered nav's edge sits at ~50vw and the right-hand badge+phone block sits a near-fixed distance from the viewport's right edge, so as the window narrows the two inevitably collide (verified: they start touching around 1300px and are fully overlapping by ~1100px, right up until the theme's own hamburger takes over at 1024px). Shrinking ONLY one side isn't enough without making it unreadably tiny, so both sides ease down together: nav link padding/font-size on the left-of-center edge, badge size + its right-margin + the phone block's own margin/font-size on the right-of-center edge. Every clamp() here plateaus at its current/original value at 1600px and above, so nothing changes for normal desktop widths - the ramp only kicks in through the narrow window where the overlap was actually happening. ------------------------------------------ */ .main-navigation #primary-menu > li > a { /* 2026-07-21 round 4 (owner: "menu too narrow at full width — font and spacing should auto-adjust to the width"): both curves anchored at the ~1100px collision floor (12.5px / 5px, where nav meets the phone block) and now keep GROWING with the viewport instead of plateauing at 1600px: font 15.6px @1440, 17px @1600, caps 20px @1930; padding 12px @1440, 15px @1600, caps 30px @2350. letter-spacing is em-based so it scales with the font automatically. */ padding-left: clamp(5px, 2vw - 17px, 30px) !important; padding-right: clamp(5px, 2vw - 17px, 30px) !important; font-size: clamp(12.5px, 0.9vw + 2.6px, 20px) !important; } #main-header .header-button, .site-header .header-button { width: clamp(64px, 4.87vw + 14px, 92px) !important; height: clamp(64px, 4.87vw + 14px, 92px) !important; } /* font-size lives on .header-html-inner (not the

) so the icon's 1.2em size above scales in lockstep with the phone number text at every width. */ .header-html-inner { margin-right: clamp(14px, 2.78vw - 14.5px, 30px); font-size: clamp(14px, 0.6vw + 8.6px, 18px); } /* Client-portal CTA banner (thin orange strip under the header). */ .h2o-portal-banner { display: block; width: 100%; /* Symmetric banner: solid sun-disc yellow (#f9d018) on the LEFT, held across the floating logo's inner sun (its right edge sits at ~269px from the viewport left at desktop), then white behind the centered text, then the header teal (#27b0cc) on the RIGHT so the strip ties into the teal nav above. The teal mirrors the yellow EXACTLY: the same pixel distances from the RIGHT edge as the yellow is from the LEFT (solid teal until calc(100% - 290px), fully white by calc(100% - 440px)). Both ends use px so the mirror holds at any viewport width. */ background-color: #f9d018; background-image: linear-gradient(90deg, #f9d018 0px, #f9d018 290px, #ffffff 440px, #ffffff calc(100% - 440px), #27b0cc calc(100% - 290px)); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; color: #111111; /* black text — readable across the gradient */ text-align: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.25; padding: 9px 16px; text-decoration: none; text-transform: none; /* keep the sentence-case wording as written */ letter-spacing: 0.2px; } .h2o-portal-banner:hover, .h2o-portal-banner:focus { background-color: #e6c00e; background-image: linear-gradient(90deg, #e6c00e 0px, #e6c00e 290px, #f4f9fd 440px, #f4f9fd calc(100% - 440px), #1f93ac calc(100% - 290px)); color: #111111; text-decoration: none; } /* Mobile: the floating logo now shrinks continuously from ~156px (@767px) down to ~100px (@320px) right edge (see the fluid clamp() on .site-branding a.brand img above) instead of holding flat, so the yellow hold + text clearance below track that same edge with matching clamp() formulas rather than one fixed number that only fit the old 767px-only size. */ @media (max-width: 767px) { .h2o-portal-banner { background-image: linear-gradient(90deg, #f9d018 0px, #f9d018 clamp(100px, 12.53vw + 59.9px, 156px), #ffffff clamp(210px, 12.53vw + 169.9px, 266px), #ffffff 80%, #27b0cc 92%); /* Push the centered text clear of the logo's right edge (+ a 14px gap) instead of true dead-center, which is what let the logo clip "Schedule" at narrow widths like 500px/375px. */ padding-left: clamp(114px, 12.53vw + 73.9px, 170px); font-size: clamp(12.5px, 0.56vw + 10.7px, 15px); } .h2o-portal-banner:hover, .h2o-portal-banner:focus { background-image: linear-gradient(90deg, #e6c00e 0px, #e6c00e clamp(100px, 12.53vw + 59.9px, 156px), #f4f9fd clamp(210px, 12.53vw + 169.9px, 266px), #f4f9fd 80%, #1f93ac 92%); } } /* Utility: hide a section/element (e.g. homepage Team section per content plan) */ .h2o-hidden { display: none !important; } /* Homepage Team section (no live-site equivalent) — hidden per content plan */ /* d02abfa (was hidden fake template team) now holds the real "Meet the Owner" card — visible since 2026-07-21. */ /* Header phone link: inherit header styling, no underline */ .header-html .header-html-inner a { text-decoration: none; color: inherit; } .header-html .header-html-inner a:hover { text-decoration: underline; } /* H2Oasis: blog/single article body in normal case, not the theme-wide capitalize landmine */ .single-content, .single-content p, .single-content li, .single-content blockquote, .single-content h2, .single-content h3, .single-content h4, .entry-content-wrap p, .entry-content-wrap li { text-transform: none; } /* Services-hub "Commercial" band (hand-added 2026-07-10, section 1fa5903 — cloned from the why-band AFTER page-285.css was generated, so it needs its own light-mode eyebrow tint to match the engine-built clones). */ html:not(.h2o-dark) .elementor-element-1fa5903 .elementor-icon-list-text, html:not(.h2o-dark) .elementor-element-1fa5903 .elementor-icon-list-icon i { color: #0e4d6e !important; } html:not(.h2o-dark) .elementor-element-1fa5903 .elementor-icon-list-icon svg { fill: #0e4d6e !important; } /* Trust badges ([h2o_trust_badges]) — pill row, both themes */ .h2o-trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 720px; margin: 6px auto 0; text-transform: none; } .h2o-trust-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; background: #f1f8fb; border: 1px solid #cfe6ee; color: #0e4d6e; font-family: 'Sora', sans-serif; font-size: .8rem; font-weight: 600; letter-spacing: .01em; } .h2o-trust-badge svg { color: #27b0cc; flex: 0 0 auto; } html.h2o-dark .h2o-trust-badge { background: var(--h2o-surface, #1f2c4a); border-color: rgba(255, 255, 255, 0.14); color: var(--h2o-ink-soft, #c2ccdb); } html.h2o-dark .h2o-trust-badge svg { color: #7dd3e8; } /* Pricing band v2 (2026-07-10): heading forced to ONE line from 900px up (owner request); below that the long line would clip the gutters, so phones/small tablets wrap naturally. */ @media (min-width: 900px) { .elementor-element-5f61c2a .elementor-heading-title { white-space: nowrap; } } /* "Free Estimate" replaces a 2-3 digit price on the side cards — size it to fit the card on one line instead of the giant numeral size. */ .elementor-element-004afba .elementor-heading-title, .elementor-element-2a4a1e9 .elementor-heading-title { font-size: clamp(24px, 2.1vw, 32px) !important; line-height: 1.5 !important; white-space: nowrap; } /* Reviews head (owner, 2026-07-10): "N Google reviews" sits on its own line UNDER the rating + stars instead of beside them. headtext already wraps, so a full-width flex-basis drops the count to the next row. */ .h2o-greviews-headtext { row-gap: 3px; } .h2o-greviews-count { flex-basis: 100%; } /* ================================================================== Design grid (2026-07-10): ONE fluid gutter system for every width. Boxed containers previously ran max-width:1300 with no side padding, so below ~1340px viewport several bands (counters, reviews, testimonials) sat at the literal screen edge while neighbours kept 24px insets — the page read as ragged/misaligned. Every TOP-LEVEL boxed container now shares the same fluid gutter, so all section content aligns to the same two vertical edges at every width: 70px @1440 (unchanged from the original desktop look), ~62 @1280, ~50 @1024, ~37 @768, 20px floor on phones. Full-bleed section BACKGROUNDS still run edge-to-edge; only content aligns to the grid. Designed offsets/overlaps between elements are untouched. ================================================================== */ :root { --h2o-gutter: clamp(20px, 4.86vw, 70px); } /* 100vw (not 100%): non-stretched sections resolve % against the content wrap, which double-inset them (140px) while stretched ones kept 70px. Viewport units give every top-level band the exact same two content edges. */ .elementor-section.elementor-top-section.elementor-section-boxed > .elementor-container { max-width: min(1300px, calc(100vw - 2 * var(--h2o-gutter))) !important; } /* Footer joins the same grid (it ran 24px insets while content ran wider). */ .site-footer .site-container { max-width: min(1300px, calc(100vw - 2 * var(--h2o-gutter))) !important; } /* Floating logo must ALWAYS ride above page content (owner, 2026-07-10). #masthead carries its own z-index:11, which traps the brand's z-index:9999 inside an 11-level stacking context — any section/widget reaching z-index 12+ could paint over the logo. Lift the whole header context above content. (The estimate popup overlay at z 100000 and the admin bar still win.) */ header#masthead.site-header { z-index: 5000 !important; } /* Home services grid, Pools/Patios pillars (2026-07-17): the 5-card Patios group leaves row 36b2ffb with 2 cards — center it so it doesn't hug the left edge. (The Plans & Free Estimates card was removed entirely 2026-07-18.) */ .elementor-element-36b2ffb > .elementor-container { justify-content: center; } /* Card rows (2026-07-18, owner: pricing row "isn't centered"): at tablet widths the 50%-wide cards wrap a 3-card row into 2+1 and the orphan card hugged the left edge. Center each flex line — full rows have no free space, so desktop is untouched; only the wrapped orphan moves. */ .elementor-element-0a57cff > .elementor-container, .elementor-element-190696e > .elementor-container, .elementor-element-7a2f9c1 > .elementor-container { justify-content: center; } /* ===================================================================== 2026-07-21 DESIGN PASS (owner feedback): 1. Typography unification — one family (Sora) sitewide. Kills the split between the template's Roboto Elementor sections and the Cormorant SC custom h2o-* blocks that made side pages feel unrelated to Home. 2. Bigger top navigation (was 12.4px Sora — owner: "menu looks small"). 3. Step-title fix: "We Handle Everythin/g" mid-word breaks in the narrow how-it-works columns (33px type in a 140px column). 4. "Meet the Owner" card: fill out the very empty white band. ===================================================================== */ /* 1 — headings + template widget titles -> Sora */ h1, h2, h3, h4, h5, h6, .elementor-heading-title, .uc_title, .ue_title, .uc_post_title, .elementor-image-box-title, .elementor-button { font-family: 'Sora', sans-serif !important; } h1.elementor-heading-title, h2.elementor-heading-title { letter-spacing: -0.02em; } .elementor-image-box-description, .uc_details, .ue_subtitle, .elementor-widget-text-editor, .elementor-icon-list-text { font-family: 'Sora', sans-serif !important; } /* 2 — top navigation: bigger, steadier (theme rule is `.main-navigation .primary-menu-container > ul li.menu-item > a` at 13px with fluid scaling — match it and out-rank it) */ .main-navigation .primary-menu-container > ul li.menu-item > a { /* size handled by the fluid #primary-menu clamp above */ font-weight: 600 !important; letter-spacing: 0.02em; } .main-navigation .primary-menu-container ul ul li.menu-item > a { font-size: 13.5px !important; text-transform: none; } /* (stale 5-id step patch removed 2026-07-21 — superseded by the generated 26-row block and the structural rule below; it was leaving two different title sizes inside the same numbered list.) */ /* 4 — owner card: horizontal layout, centered column, roomier text */ .elementor-element-af9e632 > .elementor-container { justify-content: center; } .elementor-element-025d05c .elementor-image-box-title { font-size: 26px; margin-top: 4px; } .elementor-element-025d05c .elementor-image-box-description { font-size: 16px; line-height: 1.75; max-width: 58ch; } .elementor-element-025d05c .elementor-image-box-wrapper { text-align: left; } @media (max-width: 767px) { .elementor-element-025d05c .elementor-image-box-wrapper { text-align: center; } } /* Content pages: slightly larger base text (owner: parts feel cramped) */ .h2o-svc { font-size: 16px; } .h2o-svc-faq-a { line-height: 1.75; } /* ===================================================================== 2026-07-21 DESIGN PASS 2 (owner screenshot feedback): A. Dark mode: the auto-generated page files reuse the depth-unlimited rule Home was cured of in Round 3 — it paints the whole boxed column navy and buries the sunset band (the "cheap hard rectangle"). Neutralized globally below: outer wraps transparent, only wraps whose DIRECT child is a card keep the surface. B. Bands were too thin — one uniform generous vertical rhythm on every band section (Home's three included, per "refine home by ~10%") so the morning-sky / glowing-sunset gradients breathe around the content. C. Service-page heroes run full-bleed like Home's slider. ===================================================================== */ /* A — kill the navy rectangle: outer wraps transparent… (`.elementor-section` ancestor included so this hits (0,5,2) and out-ranks the page files' id-scoped depth-unlimited rule at (0,5,1)) */ html.h2o-dark body .elementor-section .elementor-widget-wrap.elementor-element-populated:has(.elementor-widget-ucaddon_icon_image_content_box) { background-color: transparent !important; } /* …but real card columns (card is a DIRECT child) keep the dusk surface */ html.h2o-dark body .elementor-section .elementor-widget-wrap.elementor-element-populated:has(> .elementor-widget-ucaddon_icon_image_content_box) { background-color: var(--h2o-surface) !important; } /* B — uniform tall band rhythm (inner-page sunset sections + Home's bands) */ body .elementor-element-03f8c25, body .elementor-element-06d7b8f, body .elementor-element-083f82b, body .elementor-element-2444f18, body .elementor-element-3137779, body .elementor-element-445de99, body .elementor-element-4b76567, body .elementor-element-4dde303, body .elementor-element-598c8c6, body .elementor-element-7cbc3a3, body .elementor-element-7d1f130, body .elementor-element-82cd139, body .elementor-element-878eedf, body .elementor-element-8a955c2, body .elementor-element-9594c11, body .elementor-element-a1baf4f, body .elementor-element-a1d4a24, body .elementor-element-ad3744c, body .elementor-element-b7d87a8, body .elementor-element-ccdcd96, body .elementor-element-d02abfa, body .elementor-element-e99a7bb, body .elementor-element-eb4deb3, body .elementor-element-f1ee292, body .elementor-element-f2bd7c6, body .elementor-element-f5ad35b, body .elementor-element-fd69882, body .elementor-element-fd7c5aa { padding-top: clamp(84px, 8.5vw, 122px) !important; padding-bottom: clamp(84px, 8.5vw, 122px) !important; } /* C — full-bleed service heroes (out-ranks the boxed-gutter rule above) */ .elementor-section.elementor-top-section:has(.h2o-hero) { padding: 0 !important; } .elementor-section.elementor-top-section:has(.h2o-hero) > .elementor-container { max-width: 100% !important; width: 100% !important; } .elementor-section.elementor-top-section:has(.h2o-hero) > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0 !important; } .elementor-section:has(.h2o-hero) .elementor-widget-html { margin: 0 !important; width: 100%; } .h2o-hero { border-radius: 0 !important; } /* ---- 2026-07-21 polish round 3 (owner screenshots) ---- */ /* Icon widgets in dark mode picked up the surface navy as a full-width strip across the card — icons sit directly on their card background instead. */ html.h2o-dark body .elementor-widget-icon { background-color: transparent !important; } /* Bordered column wraps (pricing/tier cards etc.): the 1px #e5e5e5 border reads as a washed-out white line on the light sky — owner wants black. Only wraps that already HAVE a border change; borderless wraps ignore border-color. Dark mode keeps the light border (visible on navy). */ html:not(.h2o-dark) .elementor-column > .elementor-widget-wrap.elementor-element-populated { border-color: #0f172a !important; } /* Header submenu runoff: theme fixes dropdown links at 220px while labels like "Pool Equipment Maintenance" grew — let the dropdown fit its longest label instead of clipping. */ #main-header ul.menu ul.sub-menu { width: max-content; min-width: 240px; } #main-header ul.menu ul.sub-menu li.menu-item > a { width: 100% !important; white-space: nowrap; } /* ===================================================================== 2026-07-21 round 5 — "How It Works" step blocks (owner screenshots). The template gives these rows [number 15%][title 25%][description 60%]; at 1440px the title column renders ~150px while the theme's global h3 is 33px, so long words ("Equipment-Pad", "Everything") broke MID-WORD. Column ids auto-derived from the Elementor data — 26 step rows, 26 title columns sitewide. Fix: give the title real room, size the type to the column, and forbid mid-word breaking so any future overflow shows up as a wrap, not a split. ===================================================================== */ body .elementor-element-1c89d1a .elementor-heading-title, body .elementor-element-2298755 .elementor-heading-title, body .elementor-element-258dcc0 .elementor-heading-title, body .elementor-element-47245ef .elementor-heading-title, body .elementor-element-51d8e3d .elementor-heading-title, body .elementor-element-5a54184 .elementor-heading-title, body .elementor-element-64d576c .elementor-heading-title, body .elementor-element-6c98470 .elementor-heading-title, body .elementor-element-6ed3bbc .elementor-heading-title, body .elementor-element-7a8765e .elementor-heading-title, body .elementor-element-832b2a6 .elementor-heading-title, body .elementor-element-902a896 .elementor-heading-title, body .elementor-element-916128b .elementor-heading-title, body .elementor-element-9b6b8b4 .elementor-heading-title, body .elementor-element-9dc9330 .elementor-heading-title, body .elementor-element-9fecbe6 .elementor-heading-title, body .elementor-element-a9ad35e .elementor-heading-title, body .elementor-element-ab2aeb0 .elementor-heading-title, body .elementor-element-bdfa57e .elementor-heading-title, body .elementor-element-bf3ff0b .elementor-heading-title, body .elementor-element-c9ea5a1 .elementor-heading-title, body .elementor-element-d2719b9 .elementor-heading-title, body .elementor-element-d5a6b0f .elementor-heading-title, body .elementor-element-dde5a51 .elementor-heading-title, body .elementor-element-ea32d26 .elementor-heading-title, body .elementor-element-f94714f .elementor-heading-title { font-size: clamp(17px, 1.15vw + 3px, 22px) !important; line-height: 1.3 !important; text-transform: none !important; overflow-wrap: normal; word-break: keep-all; hyphens: none; } @media (max-width: 767px) { body .elementor-element-0589f97, body .elementor-element-0decab7, body .elementor-element-0e05f46, body .elementor-element-0fb687b, body .elementor-element-1958f68, body .elementor-element-196f91d, body .elementor-element-26f5670, body .elementor-element-4441f30, body .elementor-element-4dc242f, body .elementor-element-4ebd165, body .elementor-element-5d30893, body .elementor-element-6055bb8, body .elementor-element-62492f0, body .elementor-element-6715f94, body .elementor-element-6a41fcf, body .elementor-element-739b4bc, body .elementor-element-73cb5c0, body .elementor-element-9a4e247, body .elementor-element-9c23a28, body .elementor-element-b397111, body .elementor-element-c199fa4, body .elementor-element-c31840d, body .elementor-element-d87bdf3, body .elementor-element-e67171f, body .elementor-element-ecb09fd, body .elementor-element-f4bd5ff { width: 16% !important; } body .elementor-element-1c89d1a, body .elementor-element-2298755, body .elementor-element-258dcc0, body .elementor-element-47245ef, body .elementor-element-51d8e3d, body .elementor-element-5a54184, body .elementor-element-64d576c, body .elementor-element-6c98470, body .elementor-element-6ed3bbc, body .elementor-element-7a8765e, body .elementor-element-832b2a6, body .elementor-element-902a896, body .elementor-element-916128b, body .elementor-element-9b6b8b4, body .elementor-element-9dc9330, body .elementor-element-9fecbe6, body .elementor-element-a9ad35e, body .elementor-element-ab2aeb0, body .elementor-element-bdfa57e, body .elementor-element-bf3ff0b, body .elementor-element-c9ea5a1, body .elementor-element-d2719b9, body .elementor-element-d5a6b0f, body .elementor-element-dde5a51, body .elementor-element-ea32d26, body .elementor-element-f94714f { width: 84% !important; } } /* The step numerals are decorative display type — size them to their column so the glyph never clips (theme h2/h3 globals are 75px/33px). */ body .elementor-element-0589f97 .elementor-heading-title, body .elementor-element-0decab7 .elementor-heading-title, body .elementor-element-0e05f46 .elementor-heading-title, body .elementor-element-0fb687b .elementor-heading-title, body .elementor-element-1958f68 .elementor-heading-title, body .elementor-element-196f91d .elementor-heading-title, body .elementor-element-26f5670 .elementor-heading-title, body .elementor-element-4441f30 .elementor-heading-title, body .elementor-element-4dc242f .elementor-heading-title, body .elementor-element-4ebd165 .elementor-heading-title, body .elementor-element-5d30893 .elementor-heading-title, body .elementor-element-6055bb8 .elementor-heading-title, body .elementor-element-62492f0 .elementor-heading-title, body .elementor-element-6715f94 .elementor-heading-title, body .elementor-element-6a41fcf .elementor-heading-title, body .elementor-element-739b4bc .elementor-heading-title, body .elementor-element-73cb5c0 .elementor-heading-title, body .elementor-element-9a4e247 .elementor-heading-title, body .elementor-element-9c23a28 .elementor-heading-title, body .elementor-element-b397111 .elementor-heading-title, body .elementor-element-c199fa4 .elementor-heading-title, body .elementor-element-c31840d .elementor-heading-title, body .elementor-element-d87bdf3 .elementor-heading-title, body .elementor-element-e67171f .elementor-heading-title, body .elementor-element-ecb09fd .elementor-heading-title, body .elementor-element-f4bd5ff .elementor-heading-title { font-size: clamp(34px, 2.6vw + 6px, 52px) !important; line-height: 1.1 !important; } /* ===================================================================== 2026-07-21 round 5 — BAND SYSTEM, consolidated (29 sections). Supersedes the earlier partial lists above. Ideally this would key on a `.h2o-band` role class, but LANDMINE #3 is real: _css_classes does NOT render on Elementor SECTIONS in this template (verified on 7d1f130), so the id list stays — regenerate it from the `role=sunset` markers in assets/css/pages/page-*.css plus home's 3 bands + pricing's 384dc09 (which the page generator mislabelled role=cards — see recipes/282.json). Adds: the full-bleed net, so a band renders edge-to-edge even when its Elementor stretch_section setting is missing (the "hard rectangle" the owner reported on /pricing-plan/). ===================================================================== */ body .elementor-element-03f8c25, body .elementor-element-06d7b8f, body .elementor-element-083f82b, body .elementor-element-2444f18, body .elementor-element-3137779, body .elementor-element-384dc09, body .elementor-element-445de99, body .elementor-element-4b76567, body .elementor-element-4dde303, body .elementor-element-598c8c6, body .elementor-element-7cbc3a3, body .elementor-element-7d1f130, body .elementor-element-82cd139, body .elementor-element-878eedf, body .elementor-element-8a955c2, body .elementor-element-9594c11, body .elementor-element-a1baf4f, body .elementor-element-a1d4a24, body .elementor-element-ad3744c, body .elementor-element-b7d87a8, body .elementor-element-ccdcd96, body .elementor-element-d02abfa, body .elementor-element-e99a7bb, body .elementor-element-eb4deb3, body .elementor-element-f1ee292, body .elementor-element-f2bd7c6, body .elementor-element-f5ad35b, body .elementor-element-fd69882, body .elementor-element-fd7c5aa { padding-block: clamp(84px, 8.5vw, 122px) !important; } /* Full-bleed net — harmless on already-stretched sections. */ body .elementor-element-03f8c25:not(.elementor-section-stretched),body .elementor-element-06d7b8f:not(.elementor-section-stretched),body .elementor-element-083f82b:not(.elementor-section-stretched),body .elementor-element-2444f18:not(.elementor-section-stretched),body .elementor-element-3137779:not(.elementor-section-stretched),body .elementor-element-384dc09:not(.elementor-section-stretched),body .elementor-element-445de99:not(.elementor-section-stretched),body .elementor-element-4b76567:not(.elementor-section-stretched),body .elementor-element-4dde303:not(.elementor-section-stretched),body .elementor-element-598c8c6:not(.elementor-section-stretched),body .elementor-element-7cbc3a3:not(.elementor-section-stretched),body .elementor-element-7d1f130:not(.elementor-section-stretched),body .elementor-element-82cd139:not(.elementor-section-stretched),body .elementor-element-878eedf:not(.elementor-section-stretched),body .elementor-element-8a955c2:not(.elementor-section-stretched),body .elementor-element-9594c11:not(.elementor-section-stretched),body .elementor-element-a1baf4f:not(.elementor-section-stretched),body .elementor-element-a1d4a24:not(.elementor-section-stretched),body .elementor-element-ad3744c:not(.elementor-section-stretched),body .elementor-element-b7d87a8:not(.elementor-section-stretched),body .elementor-element-ccdcd96:not(.elementor-section-stretched),body .elementor-element-d02abfa:not(.elementor-section-stretched),body .elementor-element-e99a7bb:not(.elementor-section-stretched),body .elementor-element-eb4deb3:not(.elementor-section-stretched),body .elementor-element-f1ee292:not(.elementor-section-stretched),body .elementor-element-f2bd7c6:not(.elementor-section-stretched),body .elementor-element-f5ad35b:not(.elementor-section-stretched),body .elementor-element-fd69882:not(.elementor-section-stretched),body .elementor-element-fd7c5aa:not(.elementor-section-stretched) { width: 100%; margin-left: 0; margin-right: 0; } html:not(.h2o-dark) body .elementor-element-03f8c25, html:not(.h2o-dark) body .elementor-element-06d7b8f, html:not(.h2o-dark) body .elementor-element-083f82b, html:not(.h2o-dark) body .elementor-element-2444f18, html:not(.h2o-dark) body .elementor-element-3137779, html:not(.h2o-dark) body .elementor-element-384dc09, html:not(.h2o-dark) body .elementor-element-445de99, html:not(.h2o-dark) body .elementor-element-4b76567, html:not(.h2o-dark) body .elementor-element-4dde303, html:not(.h2o-dark) body .elementor-element-598c8c6, html:not(.h2o-dark) body .elementor-element-7cbc3a3, html:not(.h2o-dark) body .elementor-element-7d1f130, html:not(.h2o-dark) body .elementor-element-82cd139, html:not(.h2o-dark) body .elementor-element-878eedf, html:not(.h2o-dark) body .elementor-element-8a955c2, html:not(.h2o-dark) body .elementor-element-9594c11, html:not(.h2o-dark) body .elementor-element-a1baf4f, html:not(.h2o-dark) body .elementor-element-a1d4a24, html:not(.h2o-dark) body .elementor-element-ad3744c, html:not(.h2o-dark) body .elementor-element-b7d87a8, html:not(.h2o-dark) body .elementor-element-ccdcd96, html:not(.h2o-dark) body .elementor-element-d02abfa, html:not(.h2o-dark) body .elementor-element-e99a7bb, html:not(.h2o-dark) body .elementor-element-eb4deb3, html:not(.h2o-dark) body .elementor-element-f1ee292, html:not(.h2o-dark) body .elementor-element-f2bd7c6, html:not(.h2o-dark) body .elementor-element-f5ad35b, html:not(.h2o-dark) body .elementor-element-fd69882, html:not(.h2o-dark) body .elementor-element-fd7c5aa { background-color: transparent !important; background-image: linear-gradient(180deg, #87CEEB 0%, rgba(135, 206, 235, 0) 180px, rgba(135, 206, 235, 0) calc(100% - 180px), #87CEEB 100%), var(--h2o-afternoon) !important; } html.h2o-dark body .elementor-element-03f8c25, html.h2o-dark body .elementor-element-06d7b8f, html.h2o-dark body .elementor-element-083f82b, html.h2o-dark body .elementor-element-2444f18, html.h2o-dark body .elementor-element-3137779, html.h2o-dark body .elementor-element-384dc09, html.h2o-dark body .elementor-element-445de99, html.h2o-dark body .elementor-element-4b76567, html.h2o-dark body .elementor-element-4dde303, html.h2o-dark body .elementor-element-598c8c6, html.h2o-dark body .elementor-element-7cbc3a3, html.h2o-dark body .elementor-element-7d1f130, html.h2o-dark body .elementor-element-82cd139, html.h2o-dark body .elementor-element-878eedf, html.h2o-dark body .elementor-element-8a955c2, html.h2o-dark body .elementor-element-9594c11, html.h2o-dark body .elementor-element-a1baf4f, html.h2o-dark body .elementor-element-a1d4a24, html.h2o-dark body .elementor-element-ad3744c, html.h2o-dark body .elementor-element-b7d87a8, html.h2o-dark body .elementor-element-ccdcd96, html.h2o-dark body .elementor-element-d02abfa, html.h2o-dark body .elementor-element-e99a7bb, html.h2o-dark body .elementor-element-eb4deb3, html.h2o-dark body .elementor-element-f1ee292, html.h2o-dark body .elementor-element-f2bd7c6, html.h2o-dark body .elementor-element-f5ad35b, html.h2o-dark body .elementor-element-fd69882, html.h2o-dark body .elementor-element-fd7c5aa { background-color: #2a2438 !important; background-image: linear-gradient(180deg, var(--h2o-bg) 0%, rgba(24, 35, 63, 0) 180px, rgba(24, 35, 63, 0) calc(100% - 180px), var(--h2o-bg) 100%), var(--h2o-sunset) !important; } /* ===================================================================== 2026-07-21 round 5 — SHARED PAGE PRIMITIVES (from the theming audit). Goal: non-service pages read as the same site as the service pages. ===================================================================== */ /* --- 1. ONE content width. Elementor boxed sections use min(1300px, 100vw - 2*gutter); the raw-HTML pages used 1080px, and the inline-styled pages 820px — three different content edges. Unify. --- */ :root { --h2o-content: min(1300px, calc(100vw - 2 * var(--h2o-gutter))); } .h2o-svc-sec, .h2o-svc-features, .h2o-svc-bc, .h2o-svc-trust, .h2o-svc-grouplabel { max-width: var(--h2o-content) !important; padding-left: 0 !important; padding-right: 0 !important; } /* --- 2. Hero clearance. The floating logo renders at >=1025px with no upper bound, but the clearance rule was capped at 1399px — so at >=1400px the logo sat on top of the breadcrumb and H1 on faq/gallery/clermont. Open-ended, and matched to .h2o-hero's own 300px/660px. --- */ @media (min-width: 1025px) { .h2o-svc-hero { padding-top: 300px; min-height: 620px; } } /* --- 3. Shared card surface (pricing tiers, form column, any boxed column). Replaces the blunt black-hairline hack with a real card in both modes. --- */ .h2o-card > .elementor-widget-wrap.elementor-element-populated { background: #fff; border: 1px solid #e5eef4; border-radius: 14px; box-shadow: 0 6px 22px rgba(15, 42, 58, .06); } html.h2o-dark .h2o-card > .elementor-widget-wrap.elementor-element-populated { background: var(--h2o-surface) !important; border-color: #324063; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } /* --- 4. Shared prose block for legal/long-form pages (privacy, future terms). The global heading rule is 75px, which on a non-Elementor page made H2s dwarf the H1 — hence !important. Also makes body copy mode-aware. --- */ .h2o-prose { max-width: min(880px, calc(100vw - 2 * var(--h2o-gutter))); margin: 0 auto; padding: clamp(48px, 5vw, 72px) 0; text-transform: none; font-size: 16px; line-height: 1.75; color: #3a4a55; } .h2o-prose h1 { font-size: clamp(30px, 3.4vw, 44px) !important; line-height: 1.15; margin: 0 0 10px; color: #0f2a3a; } .h2o-prose h2 { font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.25; margin: 36px 0 12px; color: #0f2a3a; } .h2o-prose h3 { font-size: 19px !important; margin: 26px 0 10px; color: #0f2a3a; } .h2o-prose p, .h2o-prose li { color: inherit; } html.h2o-dark .h2o-prose { color: var(--h2o-ink-soft, #c2ccdb); } html.h2o-dark .h2o-prose h1, html.h2o-dark .h2o-prose h2, html.h2o-dark .h2o-prose h3 { color: var(--h2o-ink, #f2f6fb); } /* --- 5. BLOG — the only genuinely broken thing in dark mode: the parent theme keeps white card backgrounds on the navy body, so excerpts rendered pale grey on white and sidebar headings black on navy. --- */ html.h2o-dark body.blog .content-bg.loop-entry, html.h2o-dark body.archive .content-bg.loop-entry, html.h2o-dark body.search .content-bg.loop-entry, html.h2o-dark body.single .entry.content-bg, html.h2o-dark .comments-area { background: var(--h2o-surface, #1f2c4a) !important; border-color: #324063; } html.h2o-dark .entry.content-bg .entry-title, html.h2o-dark .entry.content-bg .entry-title a, html.h2o-dark .widget-area .widget-title, html.h2o-dark .widget-area a, html.h2o-dark .entry-content-wrap p, html.h2o-dark .entry-content-wrap li { color: var(--h2o-ink, #f2f6fb) !important; } html.h2o-dark .entry-summary, html.h2o-dark .entry-summary p, html.h2o-dark .entry-meta, html.h2o-dark .entry-meta a { color: var(--h2o-ink-soft, #c2ccdb) !important; } /* Card shape, matching .h2o-svc-card elsewhere on the site. SCOPED to blog/archive/single ONLY: `.entry.content-bg` is also the wrapper around the whole page body on Elementor pages, so an unscoped rule drew a 1px near-white border + rounded corners down both edges of EVERY page — the "white vertical lines" the owner reported 2026-07-21. */ body.blog .content-bg.loop-entry, body.archive .content-bg.loop-entry, body.search .content-bg.loop-entry, body.single .entry.content-bg { border-radius: 14px; border: 1px solid #e5eef4; box-shadow: 0 6px 22px rgba(15, 42, 58, .06); overflow: hidden; } /* Post titles: sentence case, wrapping — they were ALL-CAPS and hard-truncated mid-word, the only clipped headlines on the site (old rule ~line 110). */ .blog .loop-entry .entry-header .entry-title, .blog-section .ue-grid-item-title, .entry-title, .entry-title a { text-transform: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; } /* Card surface for the pricing tier columns. NOTE: _css_classes does not render on Elementor SECTIONS *or* COLUMNS in this template (both verified) — only on widgets — so the shared .h2o-card class above can't be attached from the editor; these three ids are the pricing tiers (667aa91/b3851d7/987dafb). */ body .elementor-element-667aa91 > .elementor-widget-wrap.elementor-element-populated, body .elementor-element-b3851d7 > .elementor-widget-wrap.elementor-element-populated, body .elementor-element-987dafb > .elementor-widget-wrap.elementor-element-populated { border-radius: 14px; box-shadow: 0 6px 22px rgba(15, 42, 58, .06); } html.h2o-dark body .elementor-element-667aa91 > .elementor-widget-wrap.elementor-element-populated, html.h2o-dark body .elementor-element-b3851d7 > .elementor-widget-wrap.elementor-element-populated, html.h2o-dark body .elementor-element-987dafb > .elementor-widget-wrap.elementor-element-populated { background: var(--h2o-surface, #1f2c4a) !important; border-color: #324063 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } /* Blog / archive / single-post hero: the parent theme renders a flat light-grey band that ignores dark mode entirely — the last unbranded template on the site. Give it the same sky/sunset treatment the rest of the site uses. */ .entry-hero.post-archive-hero-section, .entry-hero.page-hero-section, .entry-hero.post-hero-section { background-color: transparent !important; background-image: linear-gradient(180deg, #87CEEB 0%, rgba(135, 206, 235, 0) 180px, rgba(135, 206, 235, 0) calc(100% - 180px), #87CEEB 100%), var(--h2o-afternoon) !important; padding-block: clamp(64px, 6vw, 96px); } html.h2o-dark .entry-hero.post-archive-hero-section, html.h2o-dark .entry-hero.page-hero-section, html.h2o-dark .entry-hero.post-hero-section { background-color: #2a2438 !important; background-image: linear-gradient(180deg, var(--h2o-bg) 0%, rgba(24, 35, 63, 0) 180px, rgba(24, 35, 63, 0) calc(100% - 180px), var(--h2o-bg) 100%), var(--h2o-sunset) !important; } html.h2o-dark .entry-hero .entry-title, html.h2o-dark .entry-hero .googly-breadcrumbs, html.h2o-dark .entry-hero .googly-breadcrumbs a, html.h2o-dark .entry-hero a { color: #fff !important; } /* Prose pages have no hero, so the floating logo (rendered at >=1025px) lands on the H1 — same collision the .h2o-svc-hero clearance rule solves elsewhere. */ @media (min-width: 1025px) { .h2o-prose { padding-top: 300px; } } /* ===================================================================== 2026-07-21 round 5 — SITEWIDE FORMATTING PASS (from the formatting audit). ===================================================================== */ /* --- ROOT CAUSE. The parent theme sets `word-break: break-word` on all content, which is what turns "column too narrow" into "shatter the word" ("Full Equipm/ent-Pad Audit"). Headings never shatter; body copy keeps break-word so long URLs in posts still wrap. --- */ h1, h2, h3, h4, h5, h6, .elementor-heading-title, .uc_title, .ue-grid-item-title, .uc_post_title, .elementor-image-box-title, .h2o-svc-h1, .h2o-svc-h2, .h2o-hero-h1, .h2o-svc-card h3 { word-break: normal !important; overflow-wrap: break-word; hyphens: manual; /* never auto-hyphenate display type */ } /* --- Structural step-row rule: id-independent, so it survives Elementor re-saves and covers all 26 numbered rows (the old 5-id patch left two different title sizes inside one list). --- */ @media (min-width: 768px) { .elementor-inner-section > .elementor-container:has(> .elementor-column:nth-child(1) .elementor-widget-heading h2):has(> .elementor-column:nth-child(2) .elementor-widget-heading h3):has(> .elementor-column:nth-child(3) .elementor-widget-text-editor) > .elementor-column:nth-child(1) { width: 12% !important; } .elementor-inner-section > .elementor-container:has(> .elementor-column:nth-child(1) .elementor-widget-heading h2):has(> .elementor-column:nth-child(2) .elementor-widget-heading h3):has(> .elementor-column:nth-child(3) .elementor-widget-text-editor) > .elementor-column:nth-child(2) { width: 33% !important; } .elementor-inner-section > .elementor-container:has(> .elementor-column:nth-child(1) .elementor-widget-heading h2):has(> .elementor-column:nth-child(2) .elementor-widget-heading h3):has(> .elementor-column:nth-child(3) .elementor-widget-text-editor) > .elementor-column:nth-child(3) { width: 55% !important; } } /* --- Service-card titles were hard-coded 33px with a 0.88 line-height in ~200px boxes: 13 more mid-word breaks and universally cramped leading. --- */ .uc_title { font-size: clamp(18px, 1.05vw + 6px, 23px) !important; line-height: 1.28 !important; text-wrap: balance; } @media (min-width: 1200px) and (max-width: 1366px) { .uc_details { padding-left: 14px !important; padding-right: 14px !important; } } /* --- Display headings had line-height:1 — 75px with zero leading. --- */ body .elementor-widget-heading h1.elementor-heading-title, body .elementor-widget-heading h2.elementor-heading-title { line-height: 1.1 !important; text-wrap: balance; } body .elementor-widget-heading h3.elementor-heading-title { line-height: 1.25 !important; } .h2o-hero-h1 { line-height: 1.14 !important; text-wrap: balance; } /* --- body{text-transform:capitalize} was rendering the footer email as "Info@H2oas.is" on every page and rewriting "Green-to-Clean" as "Green-To-Clean". Nav labels are deliberately left alone so the protected "Pools +" / "Patios +" styling is untouched. --- */ .h2o-svc-h1, .h2o-svc-h2, .h2o-hero-h1, .h2o-hero-eyebrow, .h2o-svc h1, .h2o-svc h2, .h2o-svc h3, .h2o-svc p, .h2o-svc li, .elementor-heading-title, .uc_title, .uc_details, .elementor-image-box-title, .elementor-image-box-description, .site-footer, .site-footer a, .site-footer p, .site-footer li, .footer-widget-area, .footer-widget-area a { text-transform: none; } /* --- Blog card titles: 3-line clamp instead of a one-line ellipsis that hid 60-72% of every headline. --- */ .blog .loop-entry .entry-header .entry-title, .blog-section .ue-grid-item-title { white-space: normal; max-width: none; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: clamp(18px, 0.9vw + 9px, 22px); line-height: 1.3; text-transform: none; } /* --- Remaining Roboto: the "Read More" popup buttons in the home news grid. --- */ .uc_more_btn, .ue-dynamic-popup, a.uc_more_btn { font-family: 'Sora', sans-serif !important; } /* --- Elementor factory green (#61CE70) still shipping on 5 buttons. Brand colour instead: the same orange primary the .h2o-cta blocks use. --- */ body .elementor-element-44f3bf9 .elementor-button, body .elementor-element-371246a .elementor-button, body .elementor-element-a3c5872 .elementor-button, body .elementor-element-cf645a2 .elementor-button, body .elementor-element-6aef9a9 .elementor-button { background-color: #27b0cc !important; color: #fff !important; } body .elementor-element-44f3bf9 .elementor-button:hover, body .elementor-element-371246a .elementor-button:hover, body .elementor-element-a3c5872 .elementor-button:hover, body .elementor-element-cf645a2 .elementor-button:hover, body .elementor-element-6aef9a9 .elementor-button:hover { background-color: #1f93ac !important; } /* --- /blog/ archive H1 rendered at 85px — roughly double every other page title (service heroes are 44px, .h2o-svc-h1 40px). --- */ h1.page-title.post-home-title.archive-title, .entry-hero h1.page-title { font-size: clamp(34px, 3vw + 10px, 46px) !important; line-height: 1.15 !important; text-transform: none !important; } /* --- Photo credits: CC-BY/BY-SA images require visible attribution. Collapsed by default so it satisfies the licence without competing with the design. --- */ .h2o-credits { max-width: var(--h2o-content); margin: 0 auto; padding: 10px 0 26px; font-size: 12px; line-height: 1.6; color: #6b7f8c; text-transform: none; } .h2o-credits summary { cursor: pointer; list-style: none; opacity: .75; letter-spacing: .02em; } .h2o-credits summary::-webkit-details-marker { display: none; } .h2o-credits summary::after { content: " ▸"; } .h2o-credits details[open] summary::after { content: " ▾"; } .h2o-credits ul { margin: 10px 0 6px; padding-left: 18px; } .h2o-credits li { margin-bottom: 3px; } .h2o-credits a { color: inherit; text-decoration: underline; } .h2o-credits p { margin: 6px 0 0; opacity: .8; } html.h2o-dark .h2o-credits { color: var(--h2o-ink-soft, #9fb0c0); } /* ===================================================================== 2026-07-21 — UNBOX THE ELEMENTOR PAGE COLUMN (owner: "white vertical lines on every page"). The parent theme wraps page content in `.content-container` capped at 1348px, and `.site-main` sits inside that at 1300px. Elementor's stretched sections (hero + gradient bands) escape that box and run the full viewport, but PLAIN sections stay locked to ~1298px — so every page alternated between full-bleed and inset, leaving a visible vertical seam at the content edge. The gap scales with the window: 71px at 1440, 311px at 1920. Fix the container, not each section: let the page column span the viewport and let the existing boxed-container rule keep CONTENT on the 1300px grid. Scoped to Elementor pages only — the blog/archive templates carry `.has-sidebar` and must keep their boxed layout. ===================================================================== */ body.elementor-page:not(.has-sidebar) .content-container.site-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.elementor-page:not(.has-sidebar) .site-main, body.elementor-page:not(.has-sidebar) .content-wrap, body.elementor-page:not(.has-sidebar) .entry, body.elementor-page:not(.has-sidebar) .entry-content-wrap, body.elementor-page:not(.has-sidebar) .entry-content, body.elementor-page:not(.has-sidebar) .elementor { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* ===================================================================== FOOTER LEGAL LINK ROW (Privacy / Terms / Cookies / SMS / Accessibility) Injected via `footer_html_content` (inc/default-setting.php), so it renders inside .site-info on EVERY page — these five pages are the only ones with no nav entry, and the footer row is their sole sitewide entry point. Deliberately quieter than the copyright line: legally reachable, visually subordinate to the CTAs above it. ===================================================================== */ .footer-html-inner .h2o-legal-links { display: inline-block; margin-top: 6px; font-size: 13px; line-height: 1.9; opacity: 0.78; text-transform: none; } .footer-html-inner .h2o-legal-links a { white-space: nowrap; /* never split "Terms of Service" mid-phrase */ text-decoration: none; border-bottom: 1px solid transparent; } .footer-html-inner .h2o-legal-links a:hover, .footer-html-inner .h2o-legal-links a:focus-visible { border-bottom-color: currentColor; opacity: 1; } .footer-html-inner .h2o-legal-links > span[aria-hidden] { padding: 0 4px; opacity: 0.55; } @media (max-width: 600px) { .footer-html-inner .h2o-legal-links { font-size: 12.5px; } } /* ===================================================================== 2026-07-22 — IMAGE PLACEHOLDER SLOTS (/pool-app/). Labelled boxes standing in for app screenshots the owner will supply. Deliberately obvious so they can't be mistaken for finished design, but on-brand so the page still reads. Delete a slot's markup when its real image lands. Announced to screen readers via role="img" + aria-label on the

, so the placeholder text itself stays decorative. ===================================================================== */ .h2o-imgslot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; margin: 34px auto 0; padding: clamp(28px, 5vw, 52px) clamp(18px, 3vw, 34px); max-width: 760px; min-height: 220px; border: 2px dashed #9fc6d8; border-radius: 16px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 14px, rgba(233, 245, 250, .55) 14px 28px); text-transform: none; } .h2o-imgslot--phone { max-width: 420px; min-height: 380px; } .h2o-imgslot--optional { border-style: dotted; opacity: .85; } .h2o-imgslot-tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1f7899; background: #fff; border-radius: 999px; padding: 5px 14px; box-shadow: 0 2px 8px rgba(15, 42, 58, .08); } .h2o-imgslot-note { font-size: 15px; line-height: 1.6; color: #3f5a68; max-width: 46ch; } .h2o-imgslot-note strong { color: #0f2a3a; } html.h2o-dark .h2o-imgslot { border-color: #3d5573; background: repeating-linear-gradient(135deg, rgba(31, 44, 74, .55) 0 14px, rgba(24, 35, 63, .55) 14px 28px); } html.h2o-dark .h2o-imgslot-tag { background: #1f2c4a; color: #8fe3f4; } html.h2o-dark .h2o-imgslot-note { color: var(--h2o-ink-soft, #c2ccdb); } html.h2o-dark .h2o-imgslot-note strong { color: var(--h2o-ink, #f2f6fb); } /* ===================================================================== 2026-07-22 — GRADIENT BAND SPACING (owner: "gradients need to be a minimum apart — it should switch and then 100px later switch back; all gradients evenly spaced"). The band wash fades to the page sky at both edges. Where two bands sat directly against each other (4 joins on /gallery/, 1 on /clermont/) the first faded out and the second immediately faded back in — a switch and an instant switch back, with no sky in between. Merging them into one continuous wash was tried and rejected: the diagonal gradient restarts per band, so it produced a hard colour seam. The right fix is real separation — insert a consistent run of plain sky between consecutive bands so the alternation reads evenly everywhere. ===================================================================== */ .h2o-svc-band + .h2o-svc-band, .h2o-svc-band + .h2o-svc-ba-wrap + .h2o-svc-band { margin-top: 120px; } /* Same guarantee for Elementor band sections should any ever end up adjacent. */ .elementor-section.h2o-band + .elementor-section.h2o-band { margin-top: 120px; } /* A band stays tall enough that its two 180px edge fades never overlap. */ .h2o-svc-band { min-height: 420px; } /* ===================================================================== 2026-07-22 — /free-estimate/ (page 482) dark-mode legibility. That page's intro block is hand-written HTML with inline styles: the H1 sets no colour at all (so it inherited near-black and vanished against the dusk navy), and the sub-paragraph pins #5a6b7b. Inline styles beat normal rules, so the paragraph needs !important. Scoped to the page id so no other page is affected. ===================================================================== */ html.h2o-dark .page-id-482 h1, html.h2o-dark .page-id-482 h2, html.h2o-dark .page-id-482 h3 { color: var(--h2o-ink, #f2f6fb) !important; } html.h2o-dark .page-id-482 p, html.h2o-dark .page-id-482 li, html.h2o-dark .page-id-482 p[style*="color"] { color: var(--h2o-ink-soft, #c2ccdb) !important; } /* keep the teal eyebrow and any white-on-teal button text as authored */ html.h2o-dark .page-id-482 span[style*="#27b0cc"] { color: #7dd3e8 !important; } html.h2o-dark .page-id-482 .h2os-btn, html.h2o-dark .page-id-482 a.h2o-svc-btn { color: #fff !important; }