/* ============================================================ ContractorPlus Free Website — template4 (reference-matched design) Rebuilt from the approved mockup. Themed by the tenant-injected --primary-color / --secondary-color (footer.blade.php sets them). ============================================================ */ :root{ --primary-color:#d92d20; --secondary-color:#16233d; --ink:#16233d; --body:#4a5568; --muted:#7a8699; --line:#e7ebf1; --surface:#ffffff; --surface-2:#f6f8fb; --surface-3:#eef2f7; --radius:16px; --radius-sm:10px; --pill:999px; --shadow:0 10px 30px rgba(22,35,61,.08); --shadow-sm:0 4px 14px rgba(22,35,61,.07); --wrap:1180px; --font:-apple-system,BlinkMacSystemFont,"Poppins","Segoe UI",Roboto,Helvetica,Arial,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth;font-size:100%;scroll-padding-top:90px} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;font-family:var(--font);color:var(--body);background:var(--surface);line-height:1.6;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{color:var(--ink);line-height:1.12;margin:0 0 .4em;font-weight:800;letter-spacing:-.02em} h1{font-size:clamp(2.3rem,5.4vw,4rem)} h2{font-size:clamp(1.8rem,3.8vw,2.8rem)} h3{font-size:1.2rem} p{margin:0 0 1rem} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px} .section{padding:clamp(48px,7vw,96px) 0} .center{text-align:center} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-color);margin-bottom:14px} .eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--primary-color)} .lead{font-size:1.08rem;color:var(--body);max-width:720px} .center .lead{margin-left:auto;margin-right:auto} .muted{color:var(--muted)} .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;padding:14px 26px;border-radius:var(--pill);border:2px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap;text-align:center;justify-content:center} .btn-primary{background:var(--primary-color);color:#fff} .btn-primary:hover{filter:brightness(.93);transform:translateY(-1px)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--secondary-color)} .btn-white{background:#fff;color:var(--secondary-color)} .btn-white:hover{transform:translateY(-1px)} .btn-lg{padding:16px 32px;font-size:1.06rem} .btn-full{width:100%} /* header */ header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .nav{display:flex;flex-wrap:nowrap;align-items:center;gap:22px;height:74px} .logo{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--secondary-color);font-size:1.22rem;letter-spacing:-.02em;white-space:nowrap;flex-shrink:0} .logo img{max-height:46px;width:auto} .logo .mark{width:38px;height:38px;border-radius:10px;background:var(--primary-color);display:grid;place-items:center;color:#fff} .nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0 24px;font-weight:600;color:var(--ink);flex:1;justify-content:center} .nav ul li{white-space:nowrap} .nav ul a:hover{color:var(--primary-color)} @media(max-width:1120px){ .nav ul{gap:18px;padding:0 14px} } .nav .spacer{flex:1} .nav .phone{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--secondary-color);flex-shrink:0;white-space:nowrap} .nav>.btn-primary{flex-shrink:0} .nav .phone .ic{width:34px;height:34px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;color:var(--secondary-color)} .burger{display:none;background:none;border:0;cursor:pointer;padding:6px} .burger span{display:block;width:24px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.2s} /* breadcrumbs */ .crumbs{background:var(--surface-2);border-bottom:1px solid var(--line)} .crumbs .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 22px;font-size:.86rem;color:var(--muted)} .crumbs a{color:var(--secondary-color);font-weight:600} .crumbs a:hover{color:var(--primary-color)} .crumbs .sep{opacity:.5} .crumbs .here{color:var(--ink);font-weight:700} /* hero */ .hero{position:relative;color:#fff;background-size:cover;background-position:center} .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,35,61,.66),rgba(22,35,61,.85))} .hero .grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:clamp(56px,7vw,104px) 0} .hero.compact .grid,.hero.compact .wrap{position:relative;padding:clamp(44px,6vw,80px) 0} .hero h1{color:#fff} .hero .rating{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:8px 14px;border-radius:var(--pill);font-weight:700;font-size:.9rem;margin-bottom:20px} .hero .rating .stars{color:#ffc531;letter-spacing:2px} .g-logo{flex-shrink:0} .hero p.sub{color:rgba(255,255,255,.9);font-size:1.1rem;max-width:520px} .stars{color:#ffc531;letter-spacing:1px} /* lead form card */ .lead-card{position:relative;background:#fff;color:var(--body);border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.28);padding:28px;min-height:470px;display:flex;flex-direction:column;justify-content:center} /* Free-estimate badge — pinned to the top-right corner of the lead card (same placement as siblings) */ .lead-card{scroll-margin:44px 0 16px} .lead-card .card-free-estimate-badge{position:absolute;top:-40px;right:-40px;z-index:3} .lead-card .card-free-estimate-badge img{height:120px;width:120px} @media(max-width:640px){.lead-card{scroll-margin:28px 0 16px}.lead-card .card-free-estimate-badge{top:-24px;right:6px}.lead-card .card-free-estimate-badge img{height:84px;width:84px}} /* each wizard step fills the card width; only one is visible at a time (others .d-none) */ .lead-card .add_lead_form_wizard{width:100%} /* loader img is display:block (global reset) so text-align can't center it — center it explicitly */ .lead-card .loader{display:block;margin:2px auto 8px} .lead-card h3{font-size:1.4rem;margin-bottom:4px;color:var(--ink);text-align:center} .lead-card .sm{font-size:.86rem;color:var(--muted);margin-bottom:16px;text-align:center} .field{margin-bottom:12px} .field label{display:block;font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:5px} .field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:.95rem;background:var(--surface-2)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary-color);background:#fff} .field .iti{width:100%} /* Google Places autocomplete dropdown. script.js moves Google's .pac-container into .form-group-autofill; without positioning it falls back to default absolute placement and floats off the card. Dock it directly under the address input (template1 does the same). */ .form-group-autofill{position:relative} .form-group-autofill .pac-container{top:100% !important;left:0 !important;width:100% !important;margin-top:4px;z-index:1200;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-sm);box-shadow:0 16px 38px rgba(0,0,0,.18);font-family:inherit;overflow:hidden} .form-group-autofill .pac-item{padding:9px 13px;font-size:.9rem;color:var(--ink);cursor:pointer;border-top:1px solid var(--surface-2)} .form-group-autofill .pac-item:hover,.form-group-autofill .pac-item-selected{background:var(--surface-2)} .form-group-autofill .pac-container:after{background-image:none !important;height:0} .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .consent{display:flex;gap:10px;align-items:flex-start;font-size:.76rem;line-height:1.45;color:var(--muted);margin:0 0 11px;cursor:pointer} .consent input[type=checkbox]{width:16px;height:16px;margin-top:1px;flex-shrink:0;accent-color:var(--primary-color);cursor:pointer} .consent a{color:var(--primary-color);text-decoration:underline} /* validation errors are always danger-red (never the tenant brand colour) + centered, like template1. !important so it beats `.field label{color:var(--ink)}` — these error labels live inside .field. */ .form-err{color:#dc2626 !important;font-size:.8rem;font-weight:600;display:block;text-align:center;margin-top:4px} .g-recaptcha{margin:6px 0 14px;transform-origin:left top} /* trust strip */ .trust{background:var(--surface-3)} .trust .trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;padding:20px 0} .trust .item{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--secondary-color)} .trust .item svg{color:var(--primary-color);flex-shrink:0} /* service cards */ /* flex so a small number of cards centers instead of hugging the left of a rigid grid */ .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:40px} .cards>*{flex:1 1 230px;min-width:220px;max-width:290px} .cards.c3>*{max-width:360px} .s-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;color:inherit;display:flex;flex-direction:column} .s-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent} .s-card .ico{display:grid;place-items:center;padding:34px 0;background:var(--surface-2);color:var(--primary-color);font-size:3.4rem} .s-card .ico [class^="service-icon-"],.s-card .ico [class^="icon-ico-"]{color:var(--primary-color)} .s-card img{aspect-ratio:4/3;object-fit:cover;width:100%} .s-card .body{padding:18px} .s-card h3{margin-bottom:6px} .s-card p{font-size:.92rem;margin:0} .s-card .more{display:inline-flex;align-items:center;gap:6px;color:var(--primary-color);font-weight:700;font-size:.9rem;margin-top:12px} /* step markers — used by the city-page (data-driven) "approach" section */ .step .n{width:60px;height:60px;border-radius:50%;border:3px solid var(--primary-color);color:var(--primary-color);font-weight:900;font-size:1.5rem;display:grid;place-items:center;margin-bottom:16px} .step h3{margin-bottom:6px} /* features / why */ .feat{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:44px} .feat .f{text-align:center;flex:0 1 240px} .feat .ic{width:64px;height:64px;border-radius:18px;background:var(--surface-3);color:var(--primary-color);display:grid;place-items:center;margin:0 auto 16px;font-size:1.7rem} .feat h3{font-size:1.06rem} .feat p{font-size:.9rem;margin:0} /* areas */ .areas{background:var(--secondary-color);color:#fff} .areas h2{color:#fff} .areas .lead{color:rgba(255,255,255,.82)} .chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;justify-content:center} .chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:10px 16px;border-radius:var(--pill);font-weight:600;transition:.18s;color:#fff} .chip:hover{background:var(--primary-color);border-color:var(--primary-color)} .chip svg{color:#ffc531} .chip:hover svg{color:#fff} /* areas: links + map, 2-column (matches template1/2/3 + reference) */ .areas-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;text-align:left} .areas-left .lead{margin:0} .area-links{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-top:26px} .area-links a,.area-links .area-link-static{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600} .area-links a:hover{opacity:.82} .area-links .pin{width:30px;height:30px;border-radius:50%;background:var(--primary-color);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .areas-map{border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.28);line-height:0} .areas-map iframe{width:100%;height:440px;border:0;display:block} /* single-area tenants (no neighbouring areas): map spans the section on its own */ .areas-grid--map-only{grid-template-columns:1fr;max-width:900px;margin:0 auto} /* city page: top-align the area list with the map (few areas would otherwise float to the vertical middle) */ .areas-grid--top{align-items:start} /* reviews */ .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;text-align:left} .rev{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)} .rev .stars{margin-bottom:10px} .rev p{font-size:.95rem} .rev .who{display:flex;align-items:center;gap:12px;margin-top:16px} .rev .who img{width:44px;height:44px;border-radius:50%} .rev .who b{color:var(--ink);display:block;font-size:.92rem} .rev .who span{font-size:.8rem;color:var(--muted)} /* CTA band */ .band{position:relative;color:#fff;text-align:center;background-size:cover;background-position:center} .band::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(22,35,61,.82),rgba(22,35,61,.9))} .band .wrap{position:relative} .band h2{color:#fff} .band .lead{color:rgba(255,255,255,.86);margin-left:auto;margin-right:auto} .band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px} /* FAQ */ .faq{max-width:820px;margin:36px auto 0;text-align:left} .qa{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden;background:#fff} .qa button{position:relative;width:100%;height:auto;min-height:0;text-align:left;background:none;border:0;padding:18px 50px 18px 20px;font:inherit;font-weight:700;color:var(--ink);font-size:1.02rem;line-height:1.45;cursor:pointer;display:block} .qa button .q{display:block;overflow-wrap:break-word;word-break:break-word} .qa .a{padding:0 20px;overflow:hidden;color:var(--body)} .qa .a p{padding-bottom:18px} .qa button .plus{position:absolute;right:20px;top:16px;color:var(--primary-color);font-size:1.4rem;line-height:1;transition:.2s} .qa button[aria-expanded="true"] .plus{transform:rotate(45deg)} /* prose */ .prose{max-width:760px} .prose p{color:var(--body)} .prose h3{margin:1.4em 0 .4em} /* gallery */ .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px} .gallery a{border-radius:var(--radius-sm);overflow:hidden} .gallery img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:.2s} .gallery a:hover img{transform:scale(1.05)} /* contractor associations */ .assoc-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px 46px;margin-top:40px} /* bigger logos, but keep aspect ratio (auto dims + contain) so they never stretch/distort */ .assoc-item img{max-height:96px;max-width:200px;width:auto;height:auto;object-fit:contain} /* footer */ footer.site{background:var(--secondary-color);color:rgba(255,255,255,.72);padding-top:60px} footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px} footer.site h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px} footer.site a:hover{color:#fff} footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.94rem} footer.site .flogo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:900;font-size:1.2rem;margin-bottom:16px} footer.site .flogo img{max-height:52px;width:auto} footer.site .frating{display:inline-flex;gap:8px;align-items:center;font-size:.9rem;margin-bottom:14px} /* Google-rating badge becomes a link when a Google review URL is set — keep the badge look, no underline */ .hero a.rating,footer.site a.frating{color:inherit;text-decoration:none;cursor:pointer} .hero a.rating:hover,footer.site a.frating:hover{opacity:.85} /* About section — company description (business_description) in a two-column copy + image layout */ .about-split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} .about-copy .eyebrow{margin-bottom:10px} .about-body{color:var(--muted);line-height:1.8;margin:16px 0 26px} .about-body p{margin-bottom:12px} .about-body p:last-child{margin-bottom:0} .about-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.16)} @media(max-width:900px){.about-split{grid-template-columns:1fr;gap:28px}.about-media{order:-1}} /* Wisetack "We Also Offer Financing" block in the hero (same content as siblings, styled for template4) */ .hero-left .power-by{margin-top:22px;font-weight:700;font-size:1.05rem;line-height:1.4} .hero-left .power-by.d-none{display:none} .hero-left .power-by .d-block{display:block;margin-bottom:8px} .hero-left .power-by .power-by-row{display:inline-flex;align-items:center;gap:12px} .hero-left .power-by .small{font-weight:400;font-size:.8rem;line-height:1;opacity:.85} .hero-left .power-by img{height:auto;max-width:150px;display:inline-block} footer.site .addr{font-size:.9rem;line-height:1.7} footer.site .social{display:flex;gap:10px;margin-top:14px} footer.site .social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff} footer.site .social a:hover{background:var(--primary-color)} footer.site .lic{display:inline-block;margin-top:12px;font-size:.8rem;background:rgba(255,255,255,.08);padding:5px 11px;border-radius:var(--pill)} .footbar{border-top:1px solid rgba(255,255,255,.12);margin-top:46px;padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem;align-items:center} .footbar .cp img{height:28px;width:auto;display:inline-block} /* modals (bootstrap) keep readable */ .modal-title{color:var(--ink)} /* Photo lightbox (bs5-lightbox) slider arrows: the intl-tel-input demo.css globally styles