/* ============================================================ ZANE POOL HEATING — main.css Core design system + per-template sections. Self-hosted font @font-face is at the top; swap the Google Fonts out of header.php once the woff2 is in /assets/fonts/. ============================================================ */ /* --- Font: Bricolage Grotesque (free Google Font) --- Loaded from Google Fonts in functions.php (enqueued + preconnect), so it renders on every device with no font file to manage. OPTIONAL speed upgrade — to self-host instead: download the variable woff2 from https://fonts.google.com/specimen/Bricolage+Grotesque, drop it in /assets/fonts/BricolageGrotesque.woff2, remove the 'zane-fonts' enqueue in functions.php, and uncomment the @font-face below. --------------------------------------------------------------------------- */ /* @font-face{ font-family:'Bricolage Grotesque'; src:url('../fonts/BricolageGrotesque.woff2') format('woff2-variations'); font-weight:300 800; font-stretch:75% 100%; font-display:swap; } */ /* ===================== CORE ===================== */ /* ============ TOKENS ============ */ :root{ --navy:#0B2440; /* deep ocean */ --navy-2:#123659; --blue:#0E7FB8; /* pool blue */ --blue-deep:#0A648F; --aqua:#E9F5FB; --sea:#CFE9F5; --gold:#F5A623; /* zane gold */ --gold-deep:#D98A0B; --ink:#132A3C; --muted:#3F5A6E; --paper:#FFFFFF; --shell:#F5FAFC; --line:#D8E7EF; --ok:#1B7A4B; --radius:14px; --radius-lg:22px; --shadow:0 10px 30px rgba(11,36,64,.10); --shadow-sm:0 3px 12px rgba(11,36,64,.08); --z-sticky:40; --z-header:50; --font:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } body{ font-family:var(--font); font-optical-sizing:auto; color:var(--ink); background:var(--paper); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:var(--blue-deep)} :focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px} .wrap{max-width:1180px;margin:0 auto;padding:0 20px} h1,h2,h3{text-wrap:balance;line-height:1.12;font-weight:700;letter-spacing:-0.02em} p{text-wrap:pretty;max-width:68ch} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--blue-deep); } .eyebrow::before{content:"";width:26px;height:3px;background:var(--gold);border-radius:2px} .section{padding:72px 0} @media (min-width:860px){.section{padding:104px 0}} /* ============ BUTTONS ============ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:52px;padding:14px 26px;border-radius:999px; font-family:var(--font);font-size:17px;font-weight:700;letter-spacing:.01em; text-decoration:none;border:2px solid transparent;cursor:pointer; transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, background .18s ease; } .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .btn:active{transform:translateY(0)} .btn-call{background:var(--gold);color:var(--navy)} .btn-call:hover{background:#FFB43A} .btn-quote{background:var(--navy);color:#fff} .btn-quote:hover{background:var(--navy-2)} .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .btn-ghost:hover{border-color:#fff} .btn svg{flex:none} .btn-row{display:flex;flex-wrap:wrap;gap:14px} @media (max-width:560px){.btn-row .btn{width:100%}} /* ============ HEADER ============ */ .header{ position:sticky;top:0;z-index:var(--z-header); background:rgba(255,255,255,.92);backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .header-in{display:flex;align-items:center;gap:22px;min-height:70px} .logo{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--navy)} .logo b{font-size:24px;font-weight:800;letter-spacing:-.02em} .logo span{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep)} .nav{display:none;gap:26px;margin-left:auto} .nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15.5px;padding:8px 2px;border-bottom:2px solid transparent} .nav a:hover{border-color:var(--gold)} .header .btn{min-height:46px;padding:10px 20px;font-size:15.5px} .header-call-desktop{display:none;margin-left:8px} .header-call-mobile{margin-left:auto} @media (min-width:960px){ .nav{display:flex} .header-call-desktop{display:inline-flex} .header-call-mobile{display:none} } /* ============ HERO ============ */ .hero{background:linear-gradient(180deg,var(--aqua) 0%,#fff 88%);overflow:hidden} .hero-in{display:grid;gap:44px;padding:56px 0 64px} @media (min-width:960px){.hero-in{grid-template-columns:1.08fr .92fr;align-items:center;padding:84px 0 96px}} .hero h1{font-size:clamp(2.5rem,6.4vw,4.4rem);font-weight:800;color:var(--navy);margin:18px 0 16px} .hero h1 em{font-style:normal;color:var(--blue);position:relative;white-space:nowrap} .hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.28em;background:rgba(245,166,35,.4);z-index:-1;border-radius:3px} .hero .sub{font-size:19px;color:var(--muted);margin-bottom:28px} .trust-chips{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)} .trust-chips li{list-style:none;display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--muted)} .trust-chips li svg{flex:none;color:var(--blue)} /* season strip — the signature */ .season-card{ background:var(--navy);border-radius:var(--radius-lg);padding:26px 24px 22px;color:#E8F2F9; box-shadow:var(--shadow);position:relative;overflow:hidden; } .season-card::before{ /* water caustic glow */ content:"";position:absolute;inset:auto -40% -55% -40%;height:70%; background:radial-gradient(ellipse at 50% 100%, rgba(14,127,184,.55), transparent 70%); pointer-events:none; } .season-card h3{font-size:18px;font-weight:700;color:#fff;margin-bottom:4px} .season-card .cap{font-size:14px;color:#9FC4DA;margin-bottom:22px} .season-row{margin-bottom:18px;position:relative} .season-row .lab{display:flex;justify-content:space-between;font-size:13px;font-weight:600;letter-spacing:.04em;margin-bottom:7px} .season-row .lab b{color:var(--gold);font-weight:700} .season-track{height:30px;background:rgba(255,255,255,.10);border-radius:8px;overflow:hidden;position:relative} .season-fill{height:100%;border-radius:8px;width:var(--w);transition:width 1.4s cubic-bezier(.22,1,.36,1) .3s} .fill-cold{background:linear-gradient(90deg,#3E7FA6,#5FA5C9)} .fill-warm{background:linear-gradient(90deg,var(--gold),#FFC65C)} .months{display:grid;grid-template-columns:repeat(12,1fr);margin-top:10px;font-size:11px;letter-spacing:.06em;color:#8FB6CE;text-align:center;font-weight:600} .season-note{font-size:12.5px;color:#9FC4DA;margin-top:16px;position:relative} .photo-ph{ margin-top:18px;border-radius:12px;aspect-ratio:16/7;position:relative;overflow:hidden; background:linear-gradient(135deg,#0E7FB8 0%,#0B2440 70%); display:flex;align-items:flex-end;padding:12px 14px; } .photo-ph::before{content:"";position:absolute;inset:0;background: radial-gradient(circle at 25% 30%, rgba(255,255,255,.22), transparent 42%), radial-gradient(circle at 75% 65%, rgba(245,166,35,.28), transparent 46%)} .photo-ph span{position:relative;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85); background:rgba(11,36,64,.55);padding:6px 10px;border-radius:6px} /* ============ QUIZ ============ */ .quiz-section{background:var(--shell)} .quiz-shell{ max-width:760px;margin:40px auto 0;background:#fff;border:1px solid var(--line); border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:30px 24px; } @media (min-width:700px){.quiz-shell{padding:44px 48px}} .quiz-progress{display:flex;gap:8px;margin-bottom:26px} .quiz-progress i{flex:1;height:5px;border-radius:3px;background:var(--line);transition:background .3s} .quiz-progress i.done{background:var(--gold)} .quiz-q{font-size:clamp(1.35rem,3vw,1.7rem);font-weight:700;color:var(--navy);margin-bottom:6px} .quiz-hint{color:var(--muted);font-size:15.5px;margin-bottom:22px} .quiz-opts{display:grid;gap:12px} @media (min-width:700px){.quiz-opts{grid-template-columns:1fr 1fr}} .opt{ display:flex;align-items:center;gap:14px;text-align:left;width:100%; min-height:64px;padding:14px 18px;border-radius:var(--radius); border:2px solid var(--line);background:#fff;cursor:pointer; font-family:var(--font);font-size:16.5px;font-weight:600;color:var(--ink); transition:border-color .15s,background .15s,transform .15s; } .opt:hover{border-color:var(--blue);background:var(--aqua);transform:translateY(-1px)} .opt .oi{flex:none;width:40px;height:40px;border-radius:10px;background:var(--aqua);color:var(--blue-deep);display:grid;place-items:center;font-size:19px} .opt small{display:block;font-weight:500;color:var(--muted);font-size:13.5px;margin-top:2px} .quiz-back{margin-top:20px;background:none;border:none;font:inherit;font-weight:600;color:var(--blue-deep);cursor:pointer;padding:10px 4px;font-size:15px} .quiz-back:hover{text-decoration:underline} /* result */ .rec-badge{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);background:#FDF1DC;border-radius:999px;padding:7px 14px;margin-bottom:14px} .rec-title{font-size:clamp(1.6rem,4vw,2.2rem);color:var(--navy);font-weight:800;margin-bottom:12px} .rec-why{color:var(--muted);margin-bottom:18px} .rec-points{list-style:none;display:grid;gap:10px;margin:0 0 22px} .rec-points li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px} .rec-points li svg{flex:none;margin-top:3px;color:var(--ok)} .rec-pair{background:var(--aqua);border-radius:var(--radius);padding:14px 18px;font-size:15px;color:var(--ink);margin-bottom:24px} .rec-restart{display:inline-block;margin-top:18px;background:none;border:none;font:inherit;font-size:14.5px;color:var(--muted);cursor:pointer;text-decoration:underline;padding:8px 2px} /* ============ PRODUCTS ============ */ .prod-grid{display:grid;gap:18px;margin-top:44px} @media (min-width:700px){.prod-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1040px){.prod-grid{grid-template-columns:repeat(3,1fr)}} .prod{ border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px; display:flex;flex-direction:column;gap:12px;background:#fff; transition:box-shadow .2s,transform .2s; } .prod:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .prod .pi{width:52px;height:52px;border-radius:14px;background:var(--aqua);color:var(--blue-deep);display:grid;place-items:center} .prod h3{font-size:21px;color:var(--navy)} .bestfor{align-self:flex-start;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-deep);background:var(--aqua);padding:5px 12px;border-radius:999px} .prod p{font-size:15.5px;color:var(--muted)} .prod ul{list-style:none;display:grid;gap:7px;font-size:14.5px;color:var(--ink)} .prod ul li{display:flex;gap:8px;align-items:flex-start} .prod ul li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:8px} .prod a{margin-top:auto;font-weight:700;font-size:15px;text-decoration:none} .prod a:hover{text-decoration:underline} .cta-bar{ margin-top:34px;background:var(--aqua);border-radius:var(--radius-lg); padding:24px 26px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between; } .cta-bar p{font-weight:700;color:var(--navy);font-size:18px;max-width:none} /* ============ TRUST ============ */ .trust{background:var(--navy);color:#DCEBF5} .trust .eyebrow{color:var(--gold)} .trust h2{color:#fff} .stat-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin:40px 0 12px} @media (min-width:900px){.stat-grid{grid-template-columns:repeat(4,1fr)}} .stat{border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:24px 20px;background:rgba(255,255,255,.04)} .stat b{display:block;font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:800;color:var(--gold);letter-spacing:-.02em;line-height:1.1} .stat span{font-size:14.5px;color:#AECBDE;display:block;margin-top:6px} .quotes{display:grid;gap:16px;margin-top:34px} @media (min-width:900px){.quotes{grid-template-columns:repeat(3,1fr)}} .quote{border-radius:var(--radius-lg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:24px} .quote .stars{color:var(--gold);letter-spacing:3px;font-size:15px;margin-bottom:10px} .quote p{font-size:15px;color:#DCEBF5} .quote footer{margin-top:12px;font-size:13.5px;color:#9FC4DA;font-weight:600} /* ============ DEALER FINDER ============ */ .dealer-grid{display:grid;gap:34px;margin-top:40px} @media (min-width:960px){.dealer-grid{grid-template-columns:1fr 1fr;gap:56px}} .pc-form{display:flex;gap:10px;flex-wrap:wrap} .pc-form input{ flex:1;min-width:200px;min-height:54px;padding:12px 18px;font:inherit;font-size:17px; border:2px solid var(--line);border-radius:999px;color:var(--ink); } .pc-form input:focus{border-color:var(--blue);outline:none} .pc-results{margin-top:22px;display:grid;gap:12px} .dealer-card{ border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px; display:flex;align-items:center;gap:14px;background:#fff;box-shadow:var(--shadow-sm); } .dealer-card .di{flex:none;width:42px;height:42px;border-radius:50%;background:var(--aqua);color:var(--blue-deep);display:grid;place-items:center;font-weight:800} .dealer-card b{display:block;font-size:16px;color:var(--navy)} .dealer-card span{font-size:13.5px;color:var(--muted)} .pc-empty{margin-top:18px;font-size:15px;color:var(--muted);background:var(--shell);border-radius:var(--radius);padding:16px 18px;display:none} .states-toggle{margin-top:22px} .states-toggle summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--blue-deep)} .states-toggle ul{columns:2;margin-top:12px;font-size:14px;color:var(--muted);list-style:none;line-height:2} /* enquiry form */ .enq{ background:var(--shell);border:1px solid var(--line);border-radius:var(--radius-lg); padding:28px 24px; } @media (min-width:700px){.enq{padding:36px 34px}} .enq h3{font-size:22px;color:var(--navy);margin-bottom:4px} .enq .reassure{font-size:14.5px;color:var(--muted);margin-bottom:22px;display:flex;gap:8px;align-items:center} .enq .reassure svg{color:var(--ok);flex:none} .field{margin-bottom:16px} .field label{display:block;font-size:14px;font-weight:700;margin-bottom:6px;color:var(--navy)} .field input,.field select{ width:100%;min-height:52px;padding:12px 16px;font:inherit;font-size:16.5px; border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink); } .field input:focus,.field select:focus{border-color:var(--blue);outline:none} .enq .btn{width:100%;margin-top:6px} .enq-success{display:none;text-align:center;padding:30px 10px} .enq-success .ok-ring{width:64px;height:64px;border-radius:50%;background:#E4F4EB;color:var(--ok);display:grid;place-items:center;margin:0 auto 18px} .enq-success h3{margin-bottom:8px} .enq-success p{color:var(--muted);font-size:15.5px;margin:0 auto} /* ============ FAQ ============ */ .faq{max-width:820px;margin:40px auto 0} .faq details{border-bottom:1px solid var(--line)} .faq summary{ cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px; padding:22px 4px;font-size:17.5px;font-weight:700;color:var(--navy);min-height:52px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:26px;font-weight:400;color:var(--blue);transition:transform .2s} .faq details[open] summary::after{transform:rotate(45deg)} .faq .a{padding:0 4px 24px;color:var(--muted);font-size:16px} .faq .a a{font-weight:600} /* ============ FINAL CTA / FOOTER ============ */ .final{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;text-align:center} .final h2{font-size:clamp(2rem,5vw,3rem);font-weight:800;margin-bottom:14px} .final p{color:#B9D4E5;margin:0 auto 30px} .final .btn-row{justify-content:center} .footer{background:#08192D;color:#8FB0C6;font-size:14px;padding:44px 0 120px; position: relative; z-index: 999} @media (min-width:860px){.footer{padding-bottom:44px}} .footer-in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center} .footer a{color:#B9D4E5;text-decoration:none;margin-right:18px} .footer a:hover{text-decoration:underline} /* ============ STICKY MOBILE BAR ============ */ .sticky-bar{ position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky); display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(11,36,64,.12); } .sticky-bar .btn{min-height:50px;font-size:15.5px;padding:10px 12px;border-radius:12px} @media (min-width:860px){.sticky-bar{display:none}} .sticky-bar.hide{transform:translateY(110%);transition:transform .25s ease} /* reveal (progressive enhancement — content visible without JS) */ .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} .js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}} /* ===== HERO (full-bleed photo, scrim, floating proof card) ===== */ .hero{position:relative;overflow:hidden;min-height:600px;background:#E9F3F8} @media (min-width:960px){.hero{min-height:724px}} .hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:72% 42%} .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(93deg,#F5FBFE 0%, rgba(245,251,254,.99) 22%, rgba(245,251,254,.82) 38%, rgba(245,251,254,.34) 54%, rgba(245,251,254,0) 70%), linear-gradient(0deg, rgba(245,251,254,.55) 0%, rgba(245,251,254,0) 22%);} .hero-in{position:relative;z-index:2} @media (min-width:960px){.hero-in{grid-template-columns:1.06fr .94fr;align-items:center;min-height:724px;padding:72px 0}} .hero-copy{align-self:center} .hero-cardwrap{display:flex;justify-content:flex-end;align-items:center} .hero-cardwrap .season-card{width:min(100%,452px);box-shadow:0 30px 70px rgba(11,36,64,.34)} @media (max-width:959px){ .hero{min-height:0} .hero-bg{position:relative;height:300px;inset:auto} .hero-scrim{display:none} .hero-in{padding-top:32px} .hero-cardwrap{justify-content:center;margin-top:26px} } /* dealer trust panel inside the proof card */ .dealer-badge{display:flex;align-items:center;gap:12px;margin-top:18px;padding:14px 16px;border-radius:14px; background:linear-gradient(120deg, rgba(23,110,158,.6), rgba(14,127,184,.32));border:1px solid rgba(143,216,239,.4); color:#EAF4FB;font-weight:600;font-size:14.5px;line-height:1.35} .dealer-badge svg{flex:none;color:#8FD8EF} .dealer-badge b{color:#fff} /* ===================== WHY ZANE ===================== */ /* ===== WHY ZANE — page-specific ===== */ .why-hero{background:linear-gradient(180deg,var(--aqua) 0%,#fff 88%)} .why-hero-in{display:grid;gap:40px;padding:52px 0 60px} @media (min-width:960px){.why-hero-in{grid-template-columns:1.08fr .92fr;align-items:center;padding:80px 0 88px}} .why-hero h1{font-size:clamp(2.3rem,5.6vw,3.7rem);font-weight:800;color:var(--navy);margin:16px 0 16px} .why-hero .sub{font-size:18.5px;color:var(--muted);margin-bottom:28px;max-width:58ch} .heritage-card{background:var(--navy);border-radius:var(--radius-lg);padding:30px 28px;color:#E8F2F9;box-shadow:var(--shadow);position:relative;overflow:hidden} .heritage-card::before{content:"";position:absolute;inset:auto -40% -55% -40%;height:70%;background:radial-gradient(ellipse at 50% 100%, rgba(14,127,184,.5), transparent 70%);pointer-events:none} .heritage-card h2{font-size:16px;color:#fff;margin-bottom:20px;position:relative} .hc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;position:relative} .hc-grid b{display:block;font-size:clamp(1.9rem,3.2vw,2.5rem);color:var(--gold);font-weight:800;line-height:1;letter-spacing:-.02em} .hc-grid span{font-size:13.5px;color:#AECBDE;display:block;margin-top:7px;line-height:1.4} /* timeline */ .timeline{position:relative;display:grid;gap:26px;margin-top:48px} @media (min-width:860px){.timeline{grid-auto-flow:column;grid-auto-columns:1fr;gap:0} .timeline::before{content:"";position:absolute;left:8px;right:8px;top:9px;height:2px;background:var(--line)}} .tl-item{position:relative} @media (min-width:860px){.tl-item{padding:32px 22px 0 0}} .tl-item::before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px #fff, var(--shadow-sm);top:0;left:0} .tl-item b{display:block;font-size:21px;color:var(--navy);font-weight:800;margin-bottom:4px} .tl-item span{font-size:14.5px;color:var(--muted);line-height:1.45;display:block;max-width:30ch} @media (max-width:859px){ .timeline{padding-left:26px} .timeline::before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:var(--line)} .tl-item{padding-left:26px} .tl-item::before{left:-26px;top:2px} .tl-item b{margin-top:-2px} } /* reasons grid uses shared .prod / .prod-grid; add an icon tint */ .reason .pi{background:var(--aqua);color:var(--blue-deep)} /* credential chips inside dark band */ .creds{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .creds li{list-style:none;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:#DCEBF5;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 16px} .creds li svg{flex:none;color:var(--gold)} /* two-col explainer band */ .split{display:grid;gap:30px;margin-top:8px} @media (min-width:900px){.split{grid-template-columns:1.05fr .95fr;align-items:center;gap:56px}} .split ul{list-style:none;display:grid;gap:12px;margin-top:18px} .split ul li{display:flex;gap:11px;align-items:flex-start;font-size:16px;color:var(--ink)} .split ul li svg{flex:none;margin-top:3px;color:var(--ok)} .split-card{background:var(--shell);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px} .split-card h3{font-size:20px;color:var(--navy);margin-bottom:8px} .split-card p{color:var(--muted);font-size:15.5px} .split-card .btn-row{margin-top:20px} /* ===================== REVIEWS & CASE STUDIES ===================== */ /* ===== REVIEWS & CASE STUDIES — page-specific ===== */ .rv-hero{background:linear-gradient(180deg,var(--aqua) 0%,#fff 88%)} .rv-hero-in{display:grid;gap:40px;padding:52px 0 56px} @media (min-width:960px){.rv-hero-in{grid-template-columns:1.1fr .9fr;align-items:center;padding:78px 0 82px}} .rv-hero h1{font-size:clamp(2.3rem,5.6vw,3.7rem);font-weight:800;color:var(--navy);margin:16px 0 16px} .rv-hero .sub{font-size:18.5px;color:var(--muted);margin-bottom:28px;max-width:56ch} .rating-card{background:var(--navy);color:#E8F2F9;border-radius:var(--radius-lg);padding:32px 28px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden} .rating-card::before{content:"";position:absolute;inset:auto -40% -55% -40%;height:70%;background:radial-gradient(ellipse at 50% 100%, rgba(14,127,184,.5), transparent 70%)} .rating-card .big{font-size:3.6rem;font-weight:800;color:var(--gold);line-height:1;position:relative} .rating-card .rc-stars{color:var(--gold);font-size:24px;letter-spacing:5px;margin:8px 0 6px;position:relative} .rating-card .rc-count{font-size:14.5px;color:#AECBDE;position:relative} .rating-card .rc-sources{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px;position:relative} .rating-card .rc-sources span{font-size:12.5px;font-weight:700;color:#DCEBF5;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 14px} /* filters + review grid */ .filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px} .filters button{min-height:46px;padding:10px 18px;border-radius:999px;border:2px solid var(--line);background:#fff;font-family:var(--font);font-weight:700;font-size:14.5px;color:var(--navy);cursor:pointer;transition:background .15s,border-color .15s} .filters button:hover{border-color:var(--blue)} .filters button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)} .review-grid{display:grid;gap:18px;margin-top:26px} @media (min-width:700px){.review-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1040px){.review-grid{grid-template-columns:repeat(3,1fr)}} .review{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm)} .review .stars{color:var(--gold);letter-spacing:2px;font-size:15px} .review .tag{align-self:flex-start;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-deep);background:var(--aqua);padding:5px 11px;border-radius:999px} .review p{font-size:15px;color:var(--ink);flex:1} .review .who{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)} .review .who .av{width:40px;height:40px;border-radius:50%;background:var(--aqua);color:var(--blue-deep);display:grid;place-items:center;font-weight:800;flex:none} .review .who b{display:block;font-size:14.5px;color:var(--navy)} .review .who small{font-size:13px;color:var(--muted)} .review.hide{display:none} .rv-empty{margin-top:20px;color:var(--muted);font-size:15px} /* case studies */ .cs{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:#fff;margin-top:40px} @media (min-width:920px){.cs{display:grid;grid-template-columns:1fr 1.05fr}} .cs-media{position:relative;min-height:280px;background:linear-gradient(135deg,#0E7FB8 0%,#0B2440 75%);display:flex;align-items:flex-end;padding:16px} .cs-media::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.2), transparent 45%),radial-gradient(circle at 75% 70%, rgba(245,166,35,.28), transparent 48%)} .cs-media span{position:relative;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(11,36,64,.55);padding:6px 12px;border-radius:6px} .cs-body{padding:32px 30px} .cs-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .cs-meta span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-deep);background:var(--aqua);border-radius:999px;padding:5px 12px} .cs-body h3{font-size:clamp(1.4rem,3vw,1.9rem);color:var(--navy);margin-bottom:16px} .cs-blocks{display:grid;gap:14px;margin-bottom:22px} .cs-blocks .b{display:flex;gap:12px;align-items:flex-start} .cs-blocks .b .lbl{flex:none;width:84px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-deep);padding-top:2px} .cs-blocks .b p{font-size:15px;color:var(--ink);margin:0} .cs-outcome{display:flex;gap:20px;flex-wrap:wrap;padding:18px 20px;background:var(--aqua);border-radius:var(--radius);margin-bottom:22px} .cs-outcome div b{display:block;font-size:1.9rem;font-weight:800;color:var(--gold-deep);line-height:1} .cs-outcome div span{font-size:13px;color:var(--muted)} .cs-more{display:grid;gap:18px;margin-top:20px} @media (min-width:820px){.cs-more{grid-template-columns:1fr 1fr}} /* leave-a-review band */ .leave{display:flex;flex-wrap:wrap;align-items:center;gap:20px;justify-content:space-between} /* ===================== WARRANTY ===================== */ /* ===== WARRANTY — page-specific ===== */ .w-hero{background:linear-gradient(180deg,var(--aqua) 0%,#fff 88%)} .w-hero-in{display:grid;gap:40px;padding:52px 0 56px} @media (min-width:960px){.w-hero-in{grid-template-columns:1.1fr .9fr;align-items:center;padding:78px 0 82px}} .w-hero h1{font-size:clamp(2.3rem,5.6vw,3.7rem);font-weight:800;color:var(--navy);margin:16px 0 16px} .w-hero .sub{font-size:18.5px;color:var(--muted);margin-bottom:28px;max-width:56ch} .w-card{background:var(--navy);color:#E8F2F9;border-radius:var(--radius-lg);padding:30px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden} .w-card::before{content:"";position:absolute;inset:auto -40% -55% -40%;height:70%;background:radial-gradient(ellipse at 50% 100%, rgba(14,127,184,.5), transparent 70%)} .w-card h2{font-size:16px;color:#fff;margin-bottom:18px;position:relative} .w-card ul{list-style:none;display:grid;gap:14px;position:relative} .w-card li{display:flex;gap:12px;align-items:flex-start;font-size:15px} .w-card li svg{flex:none;margin-top:2px;color:var(--gold)} .w-card li b{color:#fff} /* coverage cards */ .cover-grid{display:grid;gap:16px;margin-top:30px} @media (min-width:700px){.cover-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1040px){.cover-grid{grid-template-columns:repeat(3,1fr)}} .cover{border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;background:#fff;box-shadow:var(--shadow-sm)} .cover h3{font-size:18px;color:var(--navy)} .cover .period{display:inline-block;margin:10px 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-deep);background:#FDF1DC;border-radius:999px;padding:6px 13px} .cover p{font-size:14.5px;color:var(--muted)} .w-note{margin-top:22px;font-size:14px;color:var(--muted);background:var(--shell);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px} .w-note b{color:var(--navy)} /* covered / not covered split */ .cn-grid{display:grid;gap:20px;margin-top:30px} @media (min-width:820px){.cn-grid{grid-template-columns:1fr 1fr}} .cn{border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;background:#fff} .cn h3{font-size:18px;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:10px} .cn ul{list-style:none;display:grid;gap:11px} .cn li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink)} .cn.yes h3 svg{color:var(--ok)} .cn.yes li svg{flex:none;margin-top:3px;color:var(--ok)} .cn.no h3 svg{color:#B0483B} .cn.no li svg{flex:none;margin-top:3px;color:#B0483B} /* claim steps */ .steps{display:grid;gap:16px;margin-top:30px} @media (min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}} .step{position:relative;padding:26px 22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm)} .step .n{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;margin-bottom:16px} .step h3{font-size:16.5px;color:var(--navy);margin-bottom:6px} .step p{font-size:14.5px;color:var(--muted)} /* register band */ .register{display:flex;flex-wrap:wrap;align-items:center;gap:20px;justify-content:space-between} /* ===================== GUIDES HUB ===================== */ /* ===== GUIDES HUB — page-specific ===== */ .g-hero{background:linear-gradient(180deg,var(--aqua) 0%,#fff 92%)} .g-hero-in{padding:52px 0 40px;text-align:center} @media (min-width:960px){.g-hero-in{padding:76px 0 48px}} .g-hero h1{font-size:clamp(2.3rem,5.6vw,3.6rem);font-weight:800;color:var(--navy);margin:14px 0 14px} .g-hero .sub{font-size:18.5px;color:var(--muted);max-width:60ch;margin:0 auto 26px} .g-search{max-width:560px;margin:0 auto;position:relative} .g-search input{width:100%;min-height:56px;padding:14px 20px 14px 52px;font:inherit;font-size:17px;border:2px solid var(--line);border-radius:999px;background:#fff} .g-search input:focus{border-color:var(--blue);outline:none} .g-search svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--muted)} .g-hero .btn-row{justify-content:center;margin-top:22px} /* featured */ .feat-grid{display:grid;gap:20px;margin-top:8px} @media (min-width:820px){.feat-grid{grid-template-columns:1fr 1fr}} .feat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;border-radius:var(--radius-lg);overflow:hidden;padding:28px;color:#fff;text-decoration:none;box-shadow:var(--shadow)} .feat::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--blue) 0%,var(--navy) 85%);z-index:0} .feat::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 15%, rgba(245,166,35,.35), transparent 55%);z-index:0} .feat>*{position:relative;z-index:1} .feat .k{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:10px} .feat h3{font-size:clamp(1.4rem,2.6vw,1.85rem);color:#fff;margin-bottom:8px} .feat p{font-size:15px;color:#DCEBF5;max-width:44ch} .feat .go{margin-top:16px;font-weight:700;font-size:15px;color:#fff} .feat:hover .go{text-decoration:underline} /* filters */ .g-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px} .g-filters button{min-height:46px;padding:10px 18px;border-radius:999px;border:2px solid var(--line);background:#fff;font-family:var(--font);font-weight:700;font-size:14.5px;color:var(--navy);cursor:pointer;transition:.15s} .g-filters button:hover{border-color:var(--blue)} .g-filters button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)} /* guide grid */ .g-grid{display:grid;gap:18px;margin-top:26px} @media (min-width:700px){.g-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1040px){.g-grid{grid-template-columns:repeat(3,1fr)}} .g-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;text-decoration:none;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s} .g-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .g-card .k{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-deep);background:var(--aqua);padding:5px 11px;border-radius:999px} .g-card h3{font-size:18px;color:var(--navy);line-height:1.25} .g-card p{font-size:14.5px;color:var(--muted);flex:1} .g-card .meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600;padding-top:10px;border-top:1px solid var(--line)} .g-card .meta .go{margin-left:auto;color:var(--blue-deep);font-weight:700} .g-card.hide{display:none} .g-empty{margin-top:20px;color:var(--muted);font-size:15px} /* mid-page conversion band */ .g-cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px;justify-content:space-between;background:var(--aqua);border:1px solid var(--sea);border-radius:var(--radius-lg);padding:28px 30px;margin-top:40px} .g-cta p{font-weight:700;color:var(--navy);font-size:18px;max-width:none} /* ===================== GUIDE TEMPLATE ===================== */ /* ===== GUIDE TEMPLATE — page-specific ===== */ .guide-hero{background:linear-gradient(180deg,var(--aqua) 0%,#fff 96%)} .guide-hero-in{padding:44px 0 30px;max-width:820px} @media (min-width:960px){.guide-hero-in{padding:64px 0 34px}} .guide-k{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep);background:var(--aqua);border:1px solid var(--sea);padding:6px 13px;border-radius:999px;margin-bottom:14px} .guide-hero h1{font-size:clamp(2rem,4.8vw,3rem);font-weight:800;color:var(--navy);margin-bottom:16px;line-height:1.14} .guide-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--muted);font-weight:600} .guide-meta span{display:flex;align-items:center;gap:7px} .guide-meta svg{color:var(--blue)} /* layout: article + sticky aside */ .guide-layout{display:grid;gap:40px} @media (min-width:980px){.guide-layout{grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}} .guide-aside{display:grid;gap:18px} @media (min-width:980px){.guide-aside{position:sticky;top:88px}} .aside-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;background:#fff;box-shadow:var(--shadow-sm)} .aside-card.dark{background:var(--navy);color:#E8F2F9;border-color:var(--navy)} .aside-card h3{font-size:17px;color:var(--navy);margin-bottom:8px} .aside-card.dark h3{color:#fff} .aside-card p{font-size:14px;color:var(--muted);margin-bottom:14px} .aside-card.dark p{color:#AECBDE} .aside-card .btn{width:100%;margin-bottom:10px} .aside-card .btn:last-child{margin-bottom:0} /* table of contents */ .toc{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:var(--shell);margin-bottom:30px} .toc b{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-deep);display:block;margin-bottom:10px} .toc ul{list-style:none;display:grid;gap:8px} .toc a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600} .toc a:hover{color:var(--blue-deep);text-decoration:underline} /* article prose */ .prose{max-width:720px} .prose h2{font-size:clamp(1.5rem,3vw,1.9rem);color:var(--navy);margin:36px 0 12px;scroll-margin-top:90px} .prose h3{font-size:1.25rem;color:var(--navy);margin:26px 0 10px} .prose p{font-size:17px;color:var(--ink);margin-bottom:16px;line-height:1.7} .prose ul,.prose ol{margin:0 0 18px 22px;display:grid;gap:8px} .prose li{font-size:17px;color:var(--ink);line-height:1.6} .prose strong{color:var(--navy)} .callout{background:var(--aqua);border:1px solid var(--sea);border-radius:var(--radius-lg);padding:22px 24px;margin:26px 0} .callout b{color:var(--navy);display:block;margin-bottom:8px;font-size:15px;letter-spacing:.02em} .callout ul{margin:0 0 0 20px;display:grid;gap:7px} .callout li{font-size:15.5px} .inline-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:22px 26px;margin:30px 0} .inline-cta p{color:#fff;font-weight:700;font-size:17px;margin:0;max-width:none} .sample-flag{font-size:13px;color:var(--muted);background:#FDF1DC;border:1px solid #F3D9A8;border-radius:8px;padding:8px 12px;margin-bottom:22px} /* mini comparison table */ .mini{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:8px 0 22px;font-size:15px} .mini th,.mini td{padding:12px 14px;text-align:left} .mini thead th{background:var(--navy);color:#fff} .mini tbody th{background:var(--shell);color:var(--navy);font-weight:700} .mini tbody tr:not(:last-child) td,.mini tbody tr:not(:last-child) th{border-bottom:1px solid var(--line)} /* related */ .rel-grid{display:grid;gap:18px;margin-top:26px} @media (min-width:700px){.rel-grid{grid-template-columns:repeat(3,1fr)}} /* ===================== COMMERCIAL ===================== */ /* ===== COMMERCIAL — page-specific ===== */ .c-hero{background:linear-gradient(180deg,var(--aqua) 0%,#fff 90%)} .c-hero-in{display:grid;gap:40px;padding:52px 0 56px} @media (min-width:960px){.c-hero-in{grid-template-columns:1.12fr .88fr;align-items:center;padding:78px 0 84px}} .c-hero h1{font-size:clamp(2.2rem,5.4vw,3.6rem);font-weight:800;color:var(--navy);margin:16px 0 16px;line-height:1.12} .c-hero .sub{font-size:18.5px;color:var(--muted);margin-bottom:28px;max-width:58ch} .c-stat{background:var(--navy);color:#E8F2F9;border-radius:var(--radius-lg);padding:30px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden} .c-stat::before{content:"";position:absolute;inset:auto -40% -55% -40%;height:70%;background:radial-gradient(ellipse at 50% 100%, rgba(14,127,184,.5), transparent 70%)} .c-stat h2{font-size:16px;color:#fff;margin-bottom:20px;position:relative} .c-stat .g{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;position:relative} .c-stat b{display:block;font-size:clamp(1.7rem,3vw,2.3rem);color:var(--gold);font-weight:800;line-height:1;letter-spacing:-.02em} .c-stat span{font-size:13px;color:#AECBDE;display:block;margin-top:7px;line-height:1.4} /* segments (who it's for) */ .seg-grid{display:grid;gap:16px;margin-top:36px} @media (min-width:640px){.seg-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1000px){.seg-grid{grid-template-columns:repeat(3,1fr)}} .seg{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;background:#fff;box-shadow:var(--shadow-sm)} .seg .si{flex:none;width:46px;height:46px;border-radius:12px;background:var(--aqua);color:var(--blue-deep);display:grid;place-items:center} .seg b{display:block;font-size:16.5px;color:var(--navy);margin-bottom:3px} .seg span{font-size:14px;color:var(--muted)} /* process steps */ .steps{display:grid;gap:16px;margin-top:34px} @media (min-width:900px){.steps{grid-template-columns:repeat(5,1fr)}} .step{position:relative;padding:24px 20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm)} .step .n{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:14px} .step h3{font-size:16px;color:var(--navy);margin-bottom:6px} .step p{font-size:14px;color:var(--muted)} /* case study highlight */ .case-hl{display:grid;gap:0;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);overflow:hidden;margin-top:34px;background:rgba(255,255,255,.04)} @media (min-width:900px){.case-hl{grid-template-columns:1fr 1.1fr}} .case-hl .m{position:relative;min-height:260px;background:linear-gradient(135deg,var(--blue) 0%,var(--navy) 80%);display:flex;align-items:flex-end;padding:16px} .case-hl .m::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 45%),radial-gradient(circle at 78% 72%, rgba(245,166,35,.28), transparent 48%)} .case-hl .m span{position:relative;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(11,36,64,.55);padding:6px 12px;border-radius:6px} .case-hl .b{padding:32px 30px;color:#DCEBF5} .case-hl .b .meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .case-hl .b .meta span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.3);border-radius:999px;padding:5px 12px} .case-hl .b h3{font-size:clamp(1.4rem,3vw,1.9rem);color:#fff;margin-bottom:12px} .case-hl .b p{font-size:15px;color:#C7DCEA;margin-bottom:18px} .case-out{display:flex;gap:24px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)} .case-out div b{display:block;font-size:1.7rem;font-weight:800;color:var(--gold);line-height:1} .case-out div span{font-size:12.5px;color:#AECBDE} /* commercial enquiry grid */ .enq-grid{display:grid;gap:34px;margin-top:36px} @media (min-width:960px){.enq-grid{grid-template-columns:1fr 1fr;gap:56px;align-items:start}} .field-2{display:grid;gap:16px} @media (min-width:600px){.field-2{grid-template-columns:1fr 1fr}} .enq textarea{width:100%;min-height:110px;padding:12px 16px;font:inherit;font-size:16px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);resize:vertical} .enq textarea:focus{border-color:var(--blue);outline:none} /* ===================== SUPPORT ===================== */ /* ===== SUPPORT — page-specific ===== */ .s-hero{background:linear-gradient(180deg,var(--aqua) 0%,#fff 92%)} .s-hero-in{padding:52px 0 40px;text-align:center} @media (min-width:960px){.s-hero-in{padding:74px 0 46px}} .s-hero h1{font-size:clamp(2.3rem,5.6vw,3.6rem);font-weight:800;color:var(--navy);margin:14px 0 14px} .s-hero .sub{font-size:18.5px;color:var(--muted);max-width:58ch;margin:0 auto 26px} .s-search{max-width:560px;margin:0 auto;position:relative} .s-search input{width:100%;min-height:56px;padding:14px 20px 14px 52px;font:inherit;font-size:17px;border:2px solid var(--line);border-radius:999px;background:#fff} .s-search input:focus{border-color:var(--blue);outline:none} .s-search svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--muted)} .s-hero .btn-row{justify-content:center;margin-top:22px} /* help tiles */ .help-grid{display:grid;gap:16px;margin-top:36px} @media (min-width:640px){.help-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1000px){.help-grid{grid-template-columns:repeat(3,1fr)}} .help{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;background:#fff;text-decoration:none;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s} .help:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .help .hi{flex:none;width:48px;height:48px;border-radius:12px;background:var(--aqua);color:var(--blue-deep);display:grid;place-items:center} .help b{display:block;font-size:17px;color:var(--navy);margin-bottom:4px} .help span{font-size:14.5px;color:var(--muted)} .help .go{display:block;margin-top:8px;font-size:14px;font-weight:700;color:var(--blue-deep)} /* contact cards */ .contact-grid{display:grid;gap:18px;margin-top:34px} @media (min-width:820px){.contact-grid{grid-template-columns:repeat(3,1fr)}} .contact{border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;background:#fff;box-shadow:var(--shadow-sm)} .contact.dark{background:var(--navy);color:#E8F2F9;border-color:var(--navy)} .contact .ci{width:46px;height:46px;border-radius:12px;background:var(--aqua);color:var(--blue-deep);display:grid;place-items:center;margin-bottom:14px} .contact.dark .ci{background:rgba(255,255,255,.1);color:var(--gold)} .contact h3{font-size:18px;color:var(--navy);margin-bottom:6px} .contact.dark h3{color:#fff} .contact p{font-size:14.5px;color:var(--muted);margin-bottom:14px} .contact.dark p{color:#AECBDE} .contact .big{font-size:22px;font-weight:800;color:var(--navy);text-decoration:none;display:inline-block;margin-bottom:6px} .contact.dark .big{color:#fff} .contact .btn{width:100%} .contact .hours{list-style:none;display:grid;gap:6px;font-size:14px} .contact .hours li{display:flex;justify-content:space-between;color:var(--muted)} .contact .hours li b{color:var(--navy);font-weight:700} /* downloads */ .dl-list{display:grid;gap:12px;margin-top:30px} @media (min-width:760px){.dl-list{grid-template-columns:1fr 1fr}} .dl{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:#fff;text-decoration:none;box-shadow:var(--shadow-sm)} .dl:hover{border-color:var(--blue)} .dl .di{flex:none;width:40px;height:40px;border-radius:10px;background:var(--aqua);color:var(--blue-deep);display:grid;place-items:center} .dl b{display:block;font-size:15.5px;color:var(--navy)} .dl span{font-size:13px;color:var(--muted)} .dl .arw{margin-left:auto;color:var(--blue-deep);font-weight:800} /* ===================== BECOME A DEALER ===================== */ /* ===== BECOME A DEALER — page-specific ===== */ .d-hero{background:linear-gradient(180deg,var(--aqua) 0%,#fff 90%)} .d-hero-in{display:grid;gap:40px;padding:52px 0 56px} @media (min-width:960px){.d-hero-in{grid-template-columns:1.1fr .9fr;align-items:center;padding:78px 0 84px}} .d-hero h1{font-size:clamp(2.2rem,5.4vw,3.6rem);font-weight:800;color:var(--navy);margin:16px 0 16px;line-height:1.12} .d-hero .sub{font-size:18.5px;color:var(--muted);margin-bottom:28px;max-width:58ch} .d-stat{background:var(--navy);color:#E8F2F9;border-radius:var(--radius-lg);padding:30px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden} .d-stat::before{content:"";position:absolute;inset:auto -40% -55% -40%;height:70%;background:radial-gradient(ellipse at 50% 100%, rgba(14,127,184,.5), transparent 70%)} .d-stat h2{font-size:16px;color:#fff;margin-bottom:20px;position:relative} .d-stat .g{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;position:relative} .d-stat b{display:block;font-size:clamp(1.7rem,3vw,2.3rem);color:var(--gold);font-weight:800;line-height:1;letter-spacing:-.02em} .d-stat span{font-size:13px;color:#AECBDE;display:block;margin-top:7px;line-height:1.4} /* who makes a great dealer */ .who-grid{display:grid;gap:16px;margin-top:36px} @media (min-width:640px){.who-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1000px){.who-grid{grid-template-columns:repeat(3,1fr)}} .who{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;background:#fff;box-shadow:var(--shadow-sm)} .who .wi{flex:none;width:46px;height:46px;border-radius:12px;background:var(--aqua);color:var(--blue-deep);display:grid;place-items:center} .who b{display:block;font-size:16.5px;color:var(--navy);margin-bottom:3px} .who span{font-size:14px;color:var(--muted)} /* process steps */ .steps{display:grid;gap:16px;margin-top:34px} @media (min-width:900px){.steps{grid-template-columns:repeat(5,1fr)}} .step{position:relative;padding:24px 20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm)} .step .n{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:14px} .step h3{font-size:16px;color:var(--navy);margin-bottom:6px} .step p{font-size:14px;color:var(--muted)} /* application form */ .apply-grid{display:grid;gap:34px;margin-top:36px} @media (min-width:960px){.apply-grid{grid-template-columns:1fr 1fr;gap:56px;align-items:start}} .field-2{display:grid;gap:16px} @media (min-width:600px){.field-2{grid-template-columns:1fr 1fr}} .enq textarea{width:100%;min-height:110px;padding:12px 16px;font:inherit;font-size:16px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);resize:vertical} .enq textarea:focus{border-color:var(--blue);outline:none} /* ===================== PRODUCTS ===================== */ /* ============ PRODUCTS PAGE ADDITIONS ============ */ .page-hero{background:linear-gradient(180deg,var(--aqua) 0%,#fff 92%)} .page-hero-in{padding:44px 0 56px} @media (min-width:860px){.page-hero-in{padding:64px 0 72px}} .crumbs{font-size:13.5px;color:var(--muted);margin-bottom:18px} .crumbs a{color:var(--blue-deep);text-decoration:none} .crumbs a:hover{text-decoration:underline} .page-hero h1{font-size:clamp(2.1rem,5.4vw,3.4rem);font-weight:800;color:var(--navy);margin:16px 0 14px} .page-hero .sub{font-size:18.5px;color:var(--muted);margin-bottom:26px;max-width:62ch} /* comparison table */ .cmp-wrap{margin-top:44px} .cmp{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)} .cmp th,.cmp td{padding:18px 20px;text-align:left;font-size:15.5px;vertical-align:top} .cmp thead th{background:var(--navy);color:#fff;font-size:16.5px;font-weight:700} .cmp thead th:first-child{background:var(--navy)} .cmp tbody th{font-weight:700;color:var(--navy);background:var(--shell);width:180px;font-size:14.5px} .cmp tbody tr:not(:last-child) td,.cmp tbody tr:not(:last-child) th{border-bottom:1px solid var(--line)} .cmp td b{color:var(--navy)} .cmp .dollar{letter-spacing:2px;color:var(--gold-deep);font-weight:800} .cmp-cards{display:none} .cmp-note{margin-top:16px;font-size:14px;color:var(--muted)} @media (max-width:759px){ .cmp-wrap table{display:none} .cmp-cards{display:grid;gap:14px;margin-top:32px} .cmp-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm)} .cmp-card h3{font-size:20px;color:var(--navy);margin-bottom:12px} .cmp-card dl{display:grid;gap:8px} .cmp-card dt{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep)} .cmp-card dd{font-size:15px;color:var(--ink);margin:0 0 4px} } /* category rows */ .cat{padding:64px 0} @media (min-width:860px){.cat{padding:88px 0}} .cat:nth-child(even){background:var(--shell)} .cat-in{display:grid;gap:36px} @media (min-width:960px){ .cat-in{grid-template-columns:1.05fr .95fr;align-items:center;gap:64px} .cat.flip .cat-in>.cat-media{order:-1} } .cat h2{font-size:clamp(1.7rem,4vw,2.4rem);color:var(--navy);margin:14px 0 12px} .cat .lead{color:var(--muted);font-size:16.5px;margin-bottom:18px} .cat ul.benefits{list-style:none;display:grid;gap:9px;margin-bottom:20px} .cat ul.benefits li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px} .cat ul.benefits li svg{flex:none;margin-top:3px;color:var(--ok)} .chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px} .chips a{ display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border-radius:999px; border:1.5px solid var(--sea);background:var(--aqua);color:var(--navy); font-size:14.5px;font-weight:700;text-decoration:none;transition:border-color .15s,background .15s; } .chips a:hover{border-color:var(--blue);background:#fff} .chips a::after{content:"\2192";margin-left:8px;color:var(--blue-deep)} .cat-cta{font-weight:700;font-size:15.5px} .cat-media .photo-ph{margin-top:0;aspect-ratio:4/3;border-radius:var(--radius-lg)} /* quiz cross-link band */ .quiz-band{background:var(--navy);color:#fff} .quiz-band .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:22px;justify-content:space-between;padding-top:44px;padding-bottom:44px} .quiz-band h2{font-size:clamp(1.5rem,3.6vw,2.1rem)} .quiz-band p{color:#B9D4E5;font-size:15.5px;max-width:52ch} /* quote section grid */ .quote-grid{display:grid;gap:36px;margin-top:36px} @media (min-width:960px){.quote-grid{grid-template-columns:1fr 1fr;gap:56px;align-items:start}} /* facts book strip */ .magnet{background:var(--shell);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;display:grid;gap:20px} @media (min-width:860px){.magnet{grid-template-columns:auto 1fr auto;align-items:center;padding:28px 32px}} .magnet .book{width:64px;height:84px;border-radius:6px;background:linear-gradient(160deg,var(--blue) 0%,var(--navy) 80%);position:relative;box-shadow:var(--shadow-sm)} .magnet .book::after{content:"PDF";position:absolute;inset:auto 8px 8px auto;font-size:10px;font-weight:800;color:var(--gold);letter-spacing:.08em} .magnet h3{font-size:18px;color:var(--navy);margin-bottom:4px} .magnet p{font-size:14.5px;color:var(--muted)} .magnet form{display:flex;flex-wrap:wrap;gap:10px} .magnet input{flex:1;min-width:170px;min-height:48px;padding:10px 16px;font:inherit;font-size:15.5px;border:2px solid var(--line);border-radius:999px} .magnet input:focus{border-color:var(--blue);outline:none} .magnet .btn{min-height:48px;font-size:15px;background:#fff;color:var(--navy);border-color:var(--navy)} .magnet .btn:hover{background:var(--navy);color:#fff} .magnet .fine{font-size:12.5px;color:var(--muted);flex-basis:100%} .magnet-success{display:none;font-weight:700;color:var(--ok);font-size:15.5px} /* ===================== DEALER (single) ===================== */ /* ============ DEALER PAGE ADDITIONS ============ */ .dhero{background:linear-gradient(180deg,var(--aqua) 0%,#fff 92%)} .dhero-in{display:grid;gap:36px;padding:48px 0 64px} @media (min-width:960px){.dhero-in{grid-template-columns:1.1fr .9fr;align-items:start;gap:56px;padding:72px 0 88px}} .dhero h1{font-size:clamp(2.3rem,6vw,3.9rem);font-weight:800;color:var(--navy);margin:16px 0 14px} .dhero h1 em{font-style:normal;color:var(--blue)} .dhero .sub{font-size:18.5px;color:var(--muted);margin-bottom:26px;max-width:56ch} /* local info card — the page signature */ .local-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden} .local-card .map-ph{ aspect-ratio:16/8;position:relative; background:#E9EBE4 center/cover no-repeat; background-image:url("data:image/png;base64,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"); display:flex;align-items:center;justify-content:center; } .local-card .map-ph::before{content:none} .local-card .map-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1} .local-card .map-pin{position:relative;z-index:2;width:46px;height:46px;border-radius:50% 50% 50% 0;background:var(--gold);transform:rotate(-45deg);box-shadow:var(--shadow-sm)} .local-card .map-pin::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--navy)} .local-card .map-label{position:absolute;bottom:10px;left:12px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep);background:rgba(255,255,255,.9);padding:5px 10px;border-radius:6px} .local-body{padding:24px 24px 26px} .local-body h2{font-size:21px;color:var(--navy);margin-bottom:2px} .local-body .stars{color:var(--gold);letter-spacing:2px;font-size:15px} .local-body .stars small{color:var(--muted);letter-spacing:0;font-size:13px;margin-left:6px} .local-rows{display:grid;gap:12px;margin:18px 0} .local-rows>div{display:flex;gap:12px;align-items:flex-start;font-size:15px} .local-rows svg{flex:none;margin-top:2px;color:var(--blue-deep)} .open-now{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-left:8px} .open-now.open{background:#E4F4EB;color:var(--ok)} .open-now.closed{background:#FBEAEA;color:#A33B3B} .hours-toggle summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--blue-deep);list-style:none;min-height:44px;display:flex;align-items:center} .hours-toggle summary::-webkit-details-marker{display:none} .hours-toggle table{width:100%;font-size:14px;border-collapse:collapse;margin-top:6px} .hours-toggle td{padding:5px 0;color:var(--muted)} .hours-toggle td:last-child{text-align:right;color:var(--ink)} .hours-toggle tr.today td{font-weight:800;color:var(--navy)} .local-actions{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:6px} .local-actions .btn{min-height:48px;font-size:15px;padding:10px 14px} .btn-outline{background:#fff;color:var(--navy);border-color:var(--navy)} .btn-outline:hover{background:var(--navy);color:#fff} /* multi-step form */ .dq-shell{max-width:760px;margin:40px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:30px 24px} @media (min-width:700px){.dq-shell{padding:44px 48px}} .dq-progress{display:flex;gap:8px;margin-bottom:8px} .dq-progress i{flex:1;height:5px;border-radius:3px;background:var(--line);transition:background .3s} .dq-progress i.done{background:var(--gold)} .dq-step-label{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:18px} .chip-grid{display:flex;flex-wrap:wrap;gap:10px} .chip-grid .chip{ display:inline-flex;align-items:center;min-height:50px;padding:11px 18px;border-radius:999px; border:2px solid var(--line);background:#fff;color:var(--navy);cursor:pointer; font-family:var(--font);font-size:15.5px;font-weight:700;transition:border-color .15s,background .15s; } .chip-grid .chip:hover{border-color:var(--blue);background:var(--aqua)} .chip-grid .chip[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:#fff} .dq-note{font-size:14px;color:var(--muted);margin-top:16px} /* generic filter visibility (used by main.js [data-filterable]) */ .hide{display:none !important} /* ===== MOBILE NAV (hamburger) — applies to every page via header.php ===== */ .nav-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:10px;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;color:var(--navy);flex:none} .nav-toggle .x{display:none} .header.nav-open .nav-toggle .bars{display:none} .header.nav-open .nav-toggle .x{display:block} @media (max-width:959px){ .nav{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:6px 20px 16px;margin:0;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .28s ease,opacity .2s ease} .header.nav-open .nav{max-height:76vh;opacity:1;visibility:visible} .nav a{padding:15px 4px;border-bottom:1px solid var(--line);font-size:17px} .nav a:last-child{border-bottom:none} } @media (min-width:960px){ .nav-toggle{display:none} } /* ===== 2-up form fields (Phone + Postcode etc.) ===== */ .field-2{display:grid;gap:16px} @media (min-width:600px){ .field-2{grid-template-columns:1fr 1fr} } /* =========================================================================== GRAVITY FORMS skin — makes zane_form() output match the Zane design. Scoped to .gform_wrapper so it only touches Gravity Forms. =========================================================================== */ .gform_wrapper .gform_fields{display:grid;gap:16px;grid-template-columns:1fr} .gform_wrapper .gfield_label{font-weight:600;font-size:14px;color:var(--navy);margin-bottom:6px;display:block} .gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper input[type=tel], .gform_wrapper input[type=number], .gform_wrapper select, .gform_wrapper textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s} .gform_wrapper input:focus,.gform_wrapper select:focus,.gform_wrapper textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,127,184,.15)} .gform_wrapper .gform_footer input[type=submit], .gform_wrapper .gform_page_footer input[type=submit], .gform_wrapper .gform_page_footer input[type=button]{background:var(--gold);color:var(--navy);font-weight:700;font-size:16px;border:none;border-radius:999px;padding:14px 26px;cursor:pointer;width:100%;max-width:360px} .gform_wrapper .gform_page_footer input.gform_previous_button{background:transparent;color:var(--blue);max-width:none;width:auto;padding:14px 10px} .gform_wrapper .gfield_required{color:#C0392B} .gform_wrapper .gform_confirmation_message{background:var(--aqua);border-radius:16px;padding:22px;color:var(--navy);font-weight:600} @media (min-width:600px){ .gform_wrapper .gform_fields{grid-template-columns:1fr 1fr} .gform_wrapper .gfield.gfield--width-full, .gform_wrapper li.gfield:not(.gf_left_half):not(.gf_right_half){grid-column:1 / -1} .gform_wrapper .gf_left_half{grid-column:1} .gform_wrapper .gf_right_half{grid-column:2} } /* ===== Quiz-integrated form + dealer CTA (homepage) ===== */ .quiz-form{margin-top:26px;padding-top:26px;border-top:1px solid var(--line);animation:zfadeup .4s ease} .quiz-form-lead{font-weight:700;color:var(--navy);font-size:18px;margin:0 0 14px} @keyframes zfadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .dealer-cta{max-width:760px;margin:0 auto;text-align:center} .dealer-cta .states-toggle{max-width:560px;margin:28px auto 0;text-align:left} /* ===== Commercial hero — mobile overflow fix ===== */ @media (max-width:959px){ .c-hero-in{grid-template-columns:minmax(0,1fr)} /* commercial hero mobile fix */ .c-stat .g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } .c-stat .g b{overflow-wrap:anywhere} /* ===== .stat-grid — small-screen fix (shared component) ===== */ @media (max-width:519px){ .stat-grid{grid-template-columns:1fr} /* stat-grid mobile fix */ } @media (min-width:520px) and (max-width:899px){ .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:400px){ .c-stat .g{grid-template-columns:1fr} } /* ===== Reviews hero — mobile overflow fix ===== */ @media (max-width:959px){ .rv-hero-in{grid-template-columns:minmax(0,1fr)} /* reviews hero mobile fix */ } /* =================================================================================== */ /* Custom Code - Fixing responsiveness and other stylings */ /* =================================================================================== */ /* ========================================================================== ZANE — NEW TEMPLATE OVERRIDES Adjustments layered on top of the base theme to match the mockups. Grouped by area: hero padding, Gravity Forms skin, per-page fixes, and the dealer Google Reviews skin. ========================================================================== */ /* ========================================================================== 1. HERO BANNERS — horizontal padding Adds side padding (20px) so hero content doesn't sit flush against the screen edge on narrower widths. One rule per page's hero wrapper. ========================================================================== */ .hero-in { display:grid; gap:44px; padding:56px 20px 64px; } .page-hero-in { padding:44px 20px 56px; } /* Products */ .why-hero-in { padding:52px 20px 60px; } /* Why Zane */ .s-hero-in { padding:52px 20px 40px; } /* Support */ .c-hero-in { padding:52px 20px 56px; } /* Commercial */ .d-hero-in { padding:52px 20px 56px; } /* Become a Dealer */ .rv-hero-in { padding:52px 20px 56px; } /* Reviews & Case Studies */ .g-hero-in { padding:52px 20px 40px; } /* Guides */ .dhero-in { padding:72px 20px 88px; } /* Dealer pages */ /* ========================================================================== 2. GRAVITY FORMS SKIN Gravity Forms outputs its own markup/classes, so the theme's field styles don't reach it. These rules map GF fields onto the mockup's .field look (pill-ish inputs, consistent borders/padding). Applies to all GF forms. ========================================================================== */ /* Text inputs, selects, and textareas → mockup .field style */ .gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper input[type="url"], .gform_wrapper select, .gform_wrapper textarea { width: 100%; min-height: 52px; padding: 12px 16px !important; /* !important: overrides GF legacy padding */ font: inherit; font-size: 16.5px; border: 2px solid var(--line); background: #fff; color: var(--ink); } .gform_wrapper textarea{ } /* Textareas: taller and vertically resizable */ .gform_wrapper textarea { min-height: 120px; resize: vertical; } /* Strip native select chrome so the custom border/radius shows */ .gform_wrapper select { -webkit-appearance: base-select; -moz-appearance: base-select; appearance: base-select; } /* Focus state → brand blue border */ .gform_wrapper input:focus, .gform_wrapper select:focus, .gform_wrapper textarea:focus { border-color: var(--blue); outline: none; } /* Legacy-markup select padding (Chrome-specific GF wrapper) */ .gform_legacy_markup_wrapper.gf_browser_chrome select { padding: 12px 16px; } /* Let the form body span the full column width */ .gform-body.gform_body { width: 100%; } /* Hide GF's "* indicates required fields" legend */ p.gform_required_legend { display: none; } /* Make the submit button 100% width */ .gform_wrapper.gravity-theme #field_submit .gform-button--width-full, .gform_wrapper.gravity-theme .gform_footer .gform-button--width-full { text-align: center; width: 100%; max-width: unset; } /* Make the button hover animation */ .gform_wrapper .gform_button { transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, background .18s ease; } .gform_wrapper .gform_button:hover { background: var(--navy-2); transform: translateY(-2px); box-shadow: var(--shadow); } /* Adjusting Ebook Magnet form */ #gform_25 input[type="text"], #gform_25 input[type="email"]{ border-radius: 999px } input#gform_submit_button_25{ background: #fff; color: var(--navy); border: 2px solid var(--navy); border-radius: 999px; transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, background .18s ease; } input#gform_submit_button_25:hover{ background: var(--navy); color: #fff; } /* ========================================================================== 3. PER-PAGE FIXES ========================================================================== */ /* --- Products: Facts Book ("magnet") block -------------------------------- */ .book-wrapper { display:flex; gap:20px; } /* Force the magnet block to a single column from tablet up */ @media (min-width:860px) { .magnet { grid-template-columns: 1fr !important; align-items: center; padding: 28px 32px; } } /* --- Warranty: "Making a claim" steps → 4 columns ------------------------- */ .w-hero-in{ padding: 52px 20px 56px; } @media (min-width:900px) { .steps.warranty-steps { grid-template-columns: repeat(4, 1fr); } } /* --- Commercial: "How it works" steps → responsive 3 → 5 columns ---------- */ @media (min-width:800px) { .steps { grid-template-columns: repeat(3, 1fr); } } @media (min-width:900px) { .steps { grid-template-columns: repeat(5, 1fr); } } /* --- Become a Dealer: contain the enquiry column (prevents overflow) ------ */ .enq { overflow: hidden; width: 100%; max-width: 100%; } /* --- Dealer pages: outline button ("Get Directions") --------------------- */ .btn-outline { background: #fff; color: #014482 !important; border: 2px solid #014482 !important; } .btn-outline:hover { color: #fff !important; } /* ========================================================================== 4. DEALER "FROM YOUR NEIGHBOURS" — Everest Google Reviews skin The reviews plugin outputs its own list markup; these rules reshape it into the mockup's navy 3-card grid (gold stars, truncated text, name footer). Scoped to .dealer-reviews so other GReviews instances are safe. ========================================================================== */ /* Hide the plugin's own "Google Reviews" heading (we render our own H2) */ .dealer-reviews h3 { display:none; } /* Review list → 3-up card grid (like .quotes) */ .dealer-reviews .egpr-show-reviews-wrap.egpr-lists-type { display:grid; gap:16px; margin-top:0; padding:0; list-style:none; } @media (min-width:900px) { .dealer-reviews .egpr-show-reviews-wrap.egpr-lists-type { grid-template-columns: repeat(3, 1fr); } } /* Show only the first 3 reviews (fallback if plugin count can't be set) */ .dealer-reviews .egpr-show-reviews-wrap.egpr-lists-type > li:nth-child(n+4) { display:none; } /* Each review → translucent card (like .quote) */ .dealer-reviews .egpr-sp-review { border-radius: var(--radius-lg); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14) !important; padding: 24px; margin: 0; list-style: none; } /* Card internals: reorder to stars → review text → name */ .dealer-reviews .egpr-info-section.egpr-right-info-section { display:flex; flex-direction:column; } .dealer-reviews .egpr-reviewer-star { order:1; margin:0 0 14px; letter-spacing:2px; font-size:15px; } .dealer-reviews .egpr-content-reviews-wrapper { order:2; } .dealer-reviews .egpr-user-info { order:3; } /* Gold stars */ .dealer-reviews .egpr-reviewer-star .egpr-star-icon.full { color: var(--gold); } /* Remove reviewer avatar (mockup cards have no photo) */ .dealer-reviews .egpr-user-review-avatar { display:none; } /* Review text → truncate to 3 lines, no "Read More" (keeps card heights even) */ .dealer-reviews .egpr-readtxt { display:none; } .dealer-reviews .egpr-small-description { display:none; } .dealer-reviews .egpr-full-description { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; color: #DCEBF5; line-height: 1.55; } /* Reviewer name → footer style */ .dealer-reviews .egpr-reviewer-name { margin-top:12px; } .dealer-reviews .egpr-reviewer-name a, .dealer-reviews .egpr-reviewer-name span { color: #9FC4DA; font-size: 13.5px; font-weight: 600; text-decoration: none; } /* "Write a review" link — keeps the plugin's per-dealer placeid, restyled */ .dealer-reviews .egpr-rateus-button-wrap { margin-top:24px; } .dealer-reviews .egpr-rate-button { color: var(--gold) !important; font-weight: 700 !important; font-size: 15px; font-family: var(--font) !important; text-decoration: underline; } .dealer-reviews .egpr-rate-button:hover { color: var(--gold) !important; text-decoration: underline; } /* Reset the plugin's default inner spacing so the card padding is clean */ .egpr-review-template3 .egpr-content-reviews-wrapper { margin:0; } .egpr-review-section { padding:0 !important; } .egpr-review-template3 li.egpr-sp-review { padding:25px !important; } .egpr-review-template3 .egpr-right-info-section { padding-left:0 !important; } /* Footer link columns (Explore / More) */ .footer-links{display:flex;flex-direction:column;gap:10px} .footer-links a{margin-right:0} /* Support page — manual/brochure category groups */ .dl-groups{display:flex;flex-direction:column;gap:30px;margin-top:10px} .dl-group-title{font-size:14px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)} .dl-group .dl-list{margin-top:0} /* Store locator finder — restore map + layout styles the old theme provided */ /* ============================================================ 1. Fix Map Layout (Replacing #main with #top) ============================================================ */ @media (min-width: 992px) { body #top .location-finder-page { padding-top: 115px; } /* Fix the map to the background */ body #top .location-finder-page .location-map { position: fixed; bottom: 0; left: 0; right: 0; height: calc(100% - 160px); top: 120px; z-index: 1; } /* Fix the search bar overlay to the top */ body #top section.search-section.text-center.orange-bg { position: fixed !important; left: 0; right: 0; top: 0; margin-top: 70px !important; z-index: 10; } /* Position the scrolling list on the left */ body #top .location-finder-page .location-finder { margin-bottom: calc(100% - 70%); padding: 50px 0 70px; position: relative; z-index: 2; pointer-events: none; /* Allows clicks to pass through the empty right side to the map */ } /* Re-enable clicks on the actual cards */ body #top .location-finder-page .container { pointer-events: auto; } } /* ============================================================ 2. Base Card Styling (Borders, Shadows, Colors) ============================================================ */ body #top .search-criteria, body #top .search-criteria-item { padding: 24px; background-color: var(--paper, #fff); margin-bottom: 18px; border: 1px solid var(--line, #D8E7EF); border-radius: var(--radius-lg, 22px); box-shadow: var(--shadow-sm, 0 3px 12px rgba(11,36,64,.08)); } /* Top criteria bar */ body #top .search-criteria { color: var(--navy, #0B2440); text-transform: uppercase; font-size: 18px; font-weight: 700; } body #top .search-criteria .orange { color: var(--gold, #F5A623); font-weight: 800; } /* Card titles */ body #top .search-criteria-item .search-criteria-title { font-size: 20px; color: var(--navy, #0B2440); margin: 0 0 16px 0; font-weight: 800; } /* ============================================================ 3. Card Inner Organization (Matching Live Site Layout) ============================================================ */ /* Icon & Text Alignment */ body #top .search-criteria-item .search-info .address, body #top .search-criteria-item .search-info .phone, body #top .search-criteria-item .search-info .time { display: flex; align-items: flex-start; margin-bottom: 16px; clear: both; } /* Force icons to a strict width */ body #top .search-criteria-item .search-info .zmdi { flex: 0 0 35px; font-size: 24px; color: var(--blue-deep, #0A648F); float: none; margin-top: 2px; } /* Text wrapper styling */ body #top .search-criteria-item .search-info > span, body #top .search-criteria-item .search-info ul { flex: 1; float: none; width: auto !important; font-size: 15px; color: var(--ink, #132A3C); } /* Opening Hours Layout (Space between Day and Time) */ body #top .search-criteria-item .search-info .time ul { padding: 0; margin: 0; list-style: none; } body #top .search-criteria-item .search-info .time ul li { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; width: 100%; } /* Prevent old classes from breaking the flex layout */ body #top .search-criteria-item .search-info .time ul li span.pull-left, body #top .search-criteria-item .search-info .time ul li span.pull-right { float: none !important; display: inline-block; width: auto; } body #top .search-criteria-item .search-info .time ul li span.pull-right { text-align: right; } /* "Visit our store page" Button */ body #top .search-criteria-item .btn { background-color: var(--navy, #0B2440); color: #fff; width: auto; display: inline-flex; border-radius: 4px; padding: 12px 24px; margin-top: 10px; font-weight: 700; transition: transform 0.18s, background 0.18s; border: none; } body #top .search-criteria-item .btn:hover { background-color: var(--navy-2, #123659); transform: translateY(-2px); } .phone { display: block !important; } body #top .search-criteria-item .address > span { font-size: 14px; } @media only screen and (max-width: 375px) { .page-template-locations-template .search-criteria-item .row.search-info .col-sm-7, .page-template-locations-template .search-criteria-item .row.search-info .col-sm-5 { width: fit-content; } } .location-finder-page .location-map, .location-finder .location-map { width: 100% !important; height: 100% !important; /* matches the plugin's map_options height:"500" */ z-index: -2 !important; top: 140px !important; } .location-finder-page .location-finder { position: relative; min-height: 500px; } @media (min-width: 992px) { body #top section.search-section.text-center.orange-bg { position: fixed !important; left: 0; right: 0; top: 0; margin-top: 70px !important; z-index: 10; } } #store_locator_load_more{ display: none !important; } body .search-section.orange-bg{ margin-top: 0px !important; } /* Make sure the map canvas and its children can size correctly */ .location-finder-page .location-map * { box-sizing: content-box; } /* Dealer page enquiry form — constrained white card on the shell section */ .dealer-enq{max-width:700px;margin:22px auto 0;background:#fff} /* ============================================================ DEALER MULTI-STEP QUOTE FORM (#28) Skins Gravity Form #28 to match the "Free local quote" mockup. Every rule is scoped to #gform_wrapper_28 so no other form on the site is affected. ============================================================ */ /* ------------------------------------------------------------ 1. Hide default GF elements the mockup doesn't use (the "* indicates required fields" legend and the red asterisks on each label) ------------------------------------------------------------ */ #gform_wrapper_28 .gform_required_legend, #gform_wrapper_28 .gfield_required { display:none; } /* ------------------------------------------------------------ 2. Progress bar Stacked so the "STEP X OF 3" label sits BELOW the bar (flex-column + order), and the fill is gold on a grey track. ------------------------------------------------------------ */ /* #gform_wrapper_28 .gf_progressbar_wrapper { margin-bottom:8px; display:flex; flex-direction:column; } */ /* "STEP X OF 3" label — small uppercase, placed under the bar */ /* #gform_wrapper_28 .gf_progressbar_title { font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:12px; font-family:Ubuntu, Arial, sans-serif !important; order:2; /* below the bar */ } */ /* The bar track sits above the label */ /* #gform_wrapper_28.gform_wrapper.gravity-theme .gf_progressbar_blue { order:1; } */ /* Fill colour → gold (overrides GF's default blue) */ /* #gform_wrapper_28.gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_blue { background:var(--gold); } */ /* Fixing the progress bar */ #gform_wrapper_28 .gf_progressbar_wrapper { margin-bottom:20px; display:flex; flex-direction:column; } /* "STEP X OF 3" label */ #gform_wrapper_28 .gf_progressbar_title { font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:12px; font-family:Ubuntu, Arial, sans-serif !important; order:2; /* label below the bar */ } /* Hide GF's original single bar — we replace it with our segments */ #gform_wrapper_28 .gf_progressbar { order:1; display:flex; gap:8px; background:none !important; box-shadow:none; padding:0; height:6px; border-radius:0; } #gform_wrapper_28 .gf_progressbar_percentage { display:none !important; } /* hide GF's fill */ /* Our 3 injected segments */ #gform_wrapper_28 .dq28-seg { flex:1; height:6px; border-radius:999px; background:var(--line); transition:background .3s ease; } #gform_wrapper_28 .dq28-seg.done { background:var(--gold); } /* ------------------------------------------------------------ 3. Step question headings (the field labels / legends) Large navy headings like the mockup's .quiz-q ------------------------------------------------------------ */ #gform_wrapper_28 .gfield_label, #gform_wrapper_28 legend.gfield_label { font-size:clamp(1.25rem,3vw,1.55rem); font-weight:800; color:var(--navy); margin-bottom:16px; padding:0; border:none; } /* Explicit sizing for the two main step questions (#4 "What do you need?", #18 "How should we help?") */ #gform_wrapper_28 #field_28_18 .gfield_label, #gform_wrapper_28 #field_28_4 .gfield_label { font-size:25px; font-weight:700; color:var(--navy); margin-bottom:16px; } /* ------------------------------------------------------------ 4. Radio options → auto-width PILL chips The native radio dot is hidden and each label becomes a clickable pill that wraps left-to-right. ------------------------------------------------------------ */ #gform_wrapper_28 .gfield_radio { display:flex; flex-wrap:wrap; gap:12px; } /* Each choice is the positioning context for its hidden radio (keeps focus local so clicking doesn't scroll the page) */ #gform_wrapper_28 .gfield_radio .gchoice { margin:0; position:relative; } /* Visually hide the radio input, but keep it in place */ #gform_wrapper_28 .gfield_radio .gfield-choice-input { position:absolute; top:50%; left:0; width:1px; height:1px; opacity:0; margin:0; } /* The label = the visible pill chip */ #gform_wrapper_28 .gfield_radio label { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:11px 18px; margin:0; border-radius:999px; /* pill shape */ border:1.5px solid var(--line); background:#fff; cursor:pointer; font-family:var(--font); font-size:16px; font-weight:700; color:var(--navy); white-space:nowrap; transition:border-color .15s, background .15s, transform .15s; } /* Hover state */ #gform_wrapper_28 .gfield_radio label:hover { border-color:var(--blue); background:var(--aqua); transform:translateY(-1px); } /* Selected state (checked radio → highlighted pill) */ #gform_wrapper_28 .gfield_radio .gfield-choice-input:checked + label { border-color:var(--blue); background:var(--aqua); } /* Override GF's default choice-label rule (width cap + spacing) */ #gform_wrapper_28.gform_wrapper.gravity-theme .gfield-choice-input+label { margin-bottom:0; max-width:100%; vertical-align:middle; } /* Remove GF's default left padding on the radio container */ #gform_wrapper_28 .ginput_container.ginput_container_radio { padding-left:0; } /* ------------------------------------------------------------ 5. Step 3 — summary line (HTML field) The bold "Where do we send it?" intro line ------------------------------------------------------------ */ #gform_wrapper_28 .gfield_html p:first-child { font-size:clamp(1.25rem,3vw,1.55rem); font-weight:800; color:var(--navy); margin-bottom:6px; } /* ------------------------------------------------------------ 6. Step 3 — text field labels (Name / Phone / Suburb) Small bold labels above each input ------------------------------------------------------------ */ #gform_wrapper_28 #gform_page_28_3 .gfield_label { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:8px; } /* ------------------------------------------------------------ 7. Step 3 — text inputs (Name / Phone / Suburb) Rounded fields matching the mockup's .field style ------------------------------------------------------------ */ #gform_wrapper_28 input[type="text"], #gform_wrapper_28 input[type="tel"], #gform_wrapper_28 input[type="email"] { width:100%; min-height:54px; padding:14px 18px; font:inherit; font-size:16.5px; border:1.5px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); } #gform_wrapper_28 input:focus { border-color:var(--blue); outline:none; } /* ------------------------------------------------------------ 8. Buttons ------------------------------------------------------------ */ /* "Next" (steps 1–2) → solid navy pill */ #gform_wrapper_28 .gform_next_button { background:var(--navy); color:#fff; border:2px solid var(--navy); border-radius:999px; padding:15px 40px; min-height:54px; font-family:var(--font); font-size:16.5px; font-weight:700; cursor:pointer; transition:background .18s, transform .18s; max-width: fit-content; } #gform_wrapper_28 .gform_next_button:hover { background:var(--navy-2); transform:translateY(-2px); } /* "Send Enquiry" (step 3 submit) → solid gold, full width */ #gform_wrapper_28 .gform_button { background:var(--gold) !important; color:var(--navy) !important; border:2px solid var(--gold); border-radius:999px; padding:16px 40px; min-height:56px; width:100%; font-family:var(--font); font-size:17px; font-weight:800; cursor:pointer; transition:filter .18s, transform .18s; max-width: fit-content; } #gform_wrapper_28 .gform_button:hover { filter:brightness(.95); transform:translateY(-2px); } /* "Previous" → outline navy pill; fills navy on hover (matches Next) */ #gform_wrapper_28 .gform_previous_button { background:#fff; color:var(--navy); border:2px solid var(--navy); border-radius:999px; padding:15px 40px; min-height:54px; font-family:var(--font); font-size:16.5px; font-weight:700; cursor:pointer; transition:background .18s, color .18s, transform .18s; max-width: fit-content; } #gform_wrapper_28 .gform_previous_button:hover { background:var(--navy); color:#fff; transform:translateY(-2px); } /* ------------------------------------------------------------ 9. Footer layout (button row spacing) ------------------------------------------------------------ */ #gform_wrapper_28 .gform_page_footer, #gform_wrapper_28 .gform_footer { display:flex; align-items:center; gap:16px; margin-top:24px; flex-wrap:wrap; } /* ============================================================ LEGAL PAGES (Privacy Policy / Terms of Use) Scoped to .legal-page so nothing else is affected. ============================================================ */ .legal-wrap { max-width: 1180px; /* comfortable reading measure */ padding-top: 20px; padding-bottom: 40px; } /* Intro paragraphs under the title */ .legal-page > .wrap > p { color: var(--ink); font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; max-width: 100%; } /* Section headings — more breathing room above each numbered section */ .legal-page h2 { font-size: 1.4rem; color: var(--navy); font-weight: 800; margin: 52px 0 16px; /* was 34px 0 12px — more space before each section */ padding-top: 8px; } /* First heading shouldn't have a huge gap from the intro */ .legal-page h2:first-of-type { margin-top: 40px; } /* Body paragraphs */ .legal-page p { color: var(--ink); font-size: 16.5px; line-height: 1.8; /* looser line spacing */ margin: 0 0 18px; } /* Lists — more space around and between items */ .legal-page ul { margin: 0 0 24px; padding-left: 24px; } .legal-page li { color: var(--ink); font-size: 16.5px; line-height: 1.8; margin-bottom: 12px; /* was 8px — more gap between bullets */ padding-left: 4px; } /* Links */ .legal-page a { color: var(--blue-deep); text-decoration: underline; } /* A bit more space around the title block */ .legal-page h1 { margin-bottom: 10px; } .legal-page .eyebrow { margin-bottom: 4px; } /* Footer layout: company block + 3 link columns */ .footer-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; /* company col wider, 3 equal link cols */ gap: 32px 40px; align-items: start; } .footer-links { display: flex; flex-direction: column; gap: 12px; } /* Tablet: company on top row, links share the row below */ @media (max-width: 900px) { .footer-in { grid-template-columns: 1fr 1fr 1fr; } .footer-company { grid-column: 1 / -1; margin-bottom: 8px; } } /* Mobile: stack everything */ @media (max-width: 560px) { .footer-in { grid-template-columns: 1fr; } } .rating-card .rc-stars { --rating: 4.6; /* out of 5 */ --pct: calc(var(--rating) / 5 * 100%); display: inline-block; font-size: 1.6rem; /* match your current star size */ letter-spacing: 2px; background: linear-gradient( 90deg, var(--gold) 0, var(--gold) var(--pct), #D8E7EF var(--pct) /* grey for the empty part */ ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ SOCIAL PAGE (Follow us) — Facebook / Instagram / LinkedIn Scoped to .social-page so nothing else is affected. ============================================================ */ .social-grid { display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 720px) { .social-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1040px) { .social-grid { grid-template-columns: 1fr 1fr 1fr; } } .social-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; height: fit-content; gap: 10px; } .social-h { font-size: 1.3rem; font-weight: 800; color: var(--navy); margin: 0 0 18px; } /* Give FB a real width to measure — remove centering flex + reduce squeeze */ .social-embed { width: 100%; max-width: 100%; overflow-x: auto; /* scroll inside the box, not the page */ -webkit-overflow-scrolling: touch; } .social-embed iframe, .social-embed .fb-page, .social-embed .instagram-media { max-width: 100% !important; } .social-fallback { color: var(--muted); font-size: 15.5px; line-height: 1.6; padding: 40px 12px; } .social-btn { margin-top: auto; } .social-embed .instagram-media { min-width: 0 !important; width: 100% !important; max-width: 100% !important; } /* ===== Pool Heating Products — real product images ===== */ /* Shared sizing for the 5 category images */ #solar .photo-ph, #heat-pumps .photo-ph, #gas .photo-ph, #covers .photo-ph, #automation .photo-ph{ /* set your dimensions here */ width:100%; height:420px; /* <-- your fixed height */ aspect-ratio:auto; /* override the theme's 4/3 so height wins */ background-size:cover; background-position:center center; background-repeat:no-repeat; } #automation .photo-ph{ background-position:bottom center; } /* Kill the gradient overlay + placeholder label once a real image is set */ #solar .photo-ph::before, #heat-pumps .photo-ph::before, #gas .photo-ph::before, #covers .photo-ph::before, #automation .photo-ph::before{content:none} #solar .photo-ph span, #heat-pumps .photo-ph span, #gas .photo-ph span, #covers .photo-ph span, #automation .photo-ph span{display:none} /* Individual images */ #solar .photo-ph{ background-image:url("/wp-content/themes/zane-theme/assets/img/solar-pool-heating-roof.webp"); } #heat-pumps .photo-ph{ background-image:url("/wp-content/themes/zane-theme/assets/img/pool-heat-pump-electroheat.webp"); } #gas .photo-ph{ background-image:url("/wp-content/themes/zane-theme/assets/img/gas-pool-heating-spa.webp"); } #covers .photo-ph{ background-image:url("/wp-content/themes/zane-theme/assets/img/pool-cover-roller.webp"); } #automation .photo-ph{ background-image:url("/wp-content/themes/zane-theme/assets/img/pool-automation-controller.webp"); } /* ===== Commercial Pool Heating — Nanango case study photo ===== */ #why .case-hl .m{ /* set your dimensions here */ min-height:340px; /* <-- your fixed height (raise/lower as needed) */ background-image:url("/wp-content/themes/zane-theme/assets/img/nanango-public-pool-gulfpanel-install.webp"); background-size:cover; background-position:center center; background-repeat:no-repeat; } /* Kill the gradient overlay + placeholder label once the real image is set */ #why .case-hl .m::before{content:none} #why .case-hl .m span{display:none} /* ===== Reviews / Case Studies — featured case study photo ===== */ #case-studies .cs > .cs-media{ /* set your dimensions here */ min-height:460px; /* <-- your fixed height; this is a tall/portrait slot */ background-image:url("/wp-content/themes/zane-theme/assets/img/case-study-template.webp"); background-size:cover; background-position:center center; background-repeat:no-repeat; } /* Kill the gradient overlay + placeholder label once the real image is set */ #case-studies .cs > .cs-media::before{content:none} #case-studies .cs > .cs-media span{display:none} .gform_button.button{ float: inline-end !important; } /* Map interaction fix: wrappers pass clicks through, map itself catches them */ body #top .location-finder-page .location-map, body #top .location-finder-page .swimart-store-results { pointer-events: none !important; } body #top .location-finder-page #store_locatore_search_map { pointer-events: auto !important; }