/* * Shared Oleksy Services design system. * * Used by the Residential Services page and the five dedicated service * pages (house-washing, roof-cleaning, window-cleaning, concrete-cleaning, * gutter-cleaning) so every page shares identical typography, color, * spacing, buttons, and component styling. * * index.html and contact.html keep their own inline copies of this same * design system (pre-dating this file) rather than being migrated onto * it, to avoid any risk of visual regression on those already-shipped, * already-tested pages. If those two pages are ever migrated onto this * shared file, the class names below already match exactly. */ :root{ --white:#FFFFFF; --paper:#F5F7F8; --ink:#0E2A47; --navy:#0E2A47; --blue-light:#15D0FF; --blue-mid:#15ACFF; --blue:#1583FF; --green:#6DD612; --green-dark:#529C0D; --gray:#808284; --ink-soft: rgba(14,42,71,0.72); --mist:#E8F2FB; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{background:var(--white); font-family:'Work Sans',sans-serif; color:var(--ink); line-height:1.6;} h1,h2,h3{font-family:'Montserrat',sans-serif; letter-spacing:-0.01em;} a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} .wrap{max-width:1180px; margin:0 auto; padding:0 6vw;} .eyebrow{font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue); display:block; margin-bottom:12px;} .btn{display:inline-flex; align-items:center; gap:8px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; padding:13px 24px; border-radius:6px; border:none; cursor:pointer; transition:transform 0.18s ease, box-shadow 0.18s ease;} .btn:hover{transform:scale(1.06); box-shadow:0 6px 16px rgba(14,42,71,0.18);} .btn:active{transform:scale(0.97);} .btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px;} .btn-green{background:var(--green); color:var(--ink);} .btn-green:hover{background:var(--green-dark);} .btn-outline{background:transparent; border:1.5px solid var(--white); color:var(--white);} .btn-outline-blue{background:transparent; border:1.5px solid var(--blue); color:var(--blue);} .check-item{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink);} .check-item svg{width:18px; height:18px; color:var(--blue); flex-shrink:0;} /* Header */ .topbar{background:var(--ink); color:rgba(255,255,255,0.85); font-family:'Work Sans',sans-serif; font-size:12px;} .topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:8px 6vw;} .topbar a{color:var(--white); font-weight:600;} header{background:var(--white); position:sticky; top:0; z-index:50; border-bottom:1px solid var(--paper); box-shadow:0 1px 6px rgba(14,42,71,0.06);} .navrow{display:flex; align-items:center; justify-content:space-between; padding:8px 0; gap:20px; flex-wrap:wrap;} .brandlogo{display:flex; align-items:center; gap:10px; flex-shrink:0;} .brandlogo img{height:64px; width:auto;} nav{display:flex; gap:26px; align-items:center; padding:0 28px; flex-wrap:wrap;} nav a{font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap;} nav a:hover{color:var(--blue);} .navcta{display:flex; align-items:center; gap:16px; flex-shrink:0;} .phonelink{font-family:'Montserrat',sans-serif; font-size:15px; color:var(--blue); font-weight:700; white-space:nowrap;} @media(max-width:1100px){ .navrow{justify-content:center;} nav{order:3; width:100%; justify-content:center; padding:12px 0 0; border-top:1px solid var(--paper);} } .hamburger{display:none; background:none; border:none; cursor:pointer; padding:6px; flex-shrink:0;} .hamburger span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform 0.2s, opacity 0.2s;} .mobile-nav{display:none; flex-direction:column; width:100%; padding:14px 0 4px;} .mobile-nav a{padding:12px 0; font-size:15px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--paper);} @media(max-width:640px){ header nav, .navcta .phonelink{display:none;} .hamburger{display:block; order:3;} .navrow{justify-content:space-between;} .navrow .brandlogo{order:1;} .navrow .navcta{order:2;} .navcta .btn{padding:10px 16px; font-size:13px;} .mobile-nav.open{display:flex;} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .hamburger.open span:nth-child(2){opacity:0;} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} } /* Breadcrumbs — sticky just below the sticky header so users can jump back up a level without scrolling to the top. --header-h is kept in sync with the header's actual rendered height by js/sticky-breadcrumbs.js. */ .breadcrumbs{padding:12px 0; position:sticky; top:var(--header-h, 64px); z-index:40; background:var(--white); border-bottom:1px solid var(--paper);} .breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:var(--ink-soft);} .breadcrumbs li{display:flex; align-items:center; gap:6px;} .breadcrumbs li:not(:last-child)::after{content:'/'; color:#C7CED6;} .breadcrumbs a{color:var(--ink-soft); font-weight:600;} .breadcrumbs a:hover{color:var(--blue);} .breadcrumbs li[aria-current="page"]{color:var(--ink); font-weight:600;} /* Hero */ .hero{padding:40px 0 48px; background:linear-gradient(180deg, var(--paper) 0%, var(--white) 100%);} .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;} /* Mobile: lead with the copy (what the page is + the CTA), then the image. The standard hero markup lists the visual first, so swap the order below 900px — text-first is the stronger mobile sales flow on every hero page. */ @media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:26px;} .hero-grid > div:first-child{order:2;} .hero-grid > div:last-child{order:1;} } @media(max-width:640px){.hero{padding:24px 0 30px;}} .hero-visual{border-radius:14px; overflow:hidden; box-shadow:0 12px 32px rgba(14,42,71,0.14);} .hero-visual img{width:100%; height:auto;} .hero-visual.icon-hero{aspect-ratio:1269/952; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--ink) 0%, #163E63 100%);} .hero-visual.icon-hero svg{width:35%; height:35%; color:var(--blue-light);} .badge-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;} .badge{font-size:12px; font-weight:600; color:var(--ink); background:var(--paper); border:1px solid #E1E6EA; padding:7px 12px; border-radius:20px; display:flex; align-items:center; gap:6px;} .badge svg{width:14px; height:14px; color:var(--green-dark);} /* Two trust badges sit side by side on phones instead of stacking. */ @media(max-width:640px){ .hero .badge-row{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px;} .hero .badge{justify-content:center;} } .headline{font-size:clamp(28px,3.6vw,38px); font-weight:800; line-height:1.15; color:var(--ink);} .headline .accent{background:linear-gradient(90deg, var(--blue-mid), var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent;} .hero-sub{font-size:16px; color:var(--ink-soft); max-width:480px; margin:16px 0 22px;} .check-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-bottom:26px;} .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; align-items:center;} /* Section generic */ section{padding:56px 0;} .section-head{max-width:640px; margin:0 auto 32px; text-align:center;} .section-head h2{font-size:clamp(24px,3vw,32px); color:var(--ink); font-weight:800;} .section-head p{font-size:15px; color:var(--ink-soft); margin-top:12px;} .section-head.align-left{text-align:left; margin-left:0;} /* Why choose us / Benefits (shared visual pattern, different heading copy) */ .why{background:var(--white);} .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;} @media(max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.why-grid{grid-template-columns:1fr;}} .why-card{text-align:center;} .why-card .icn-wrap{width:48px; height:48px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; transition:transform 0.2s ease, background 0.2s ease;} .why-card:hover .icn-wrap{transform:scale(1.15); background:var(--mist);} .why-card .icn-wrap svg{width:22px; height:22px; color:var(--blue);} .why-card h3{font-family:'Montserrat',sans-serif; font-size:15px; font-weight:700; color:var(--ink); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.02em;} .why-card p{font-size:13px; color:var(--ink-soft);} /* Services */ .services{background:var(--paper);} .svc-tabs{display:flex; gap:8px; margin-bottom:24px; justify-content:center;} .svc-tab{font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; padding:11px 22px; border-radius:6px; border:1px solid #DCE2E7; background:var(--white); cursor:pointer; color:var(--ink-soft);} .svc-tab.active{background:var(--blue); color:var(--white); border-color:var(--blue);} .svc-panel{display:none; grid-template-columns:repeat(3,1fr); gap:18px;} .svc-panel.active{display:grid;} @media(max-width:900px){.svc-panel.active{grid-template-columns:repeat(2,1fr);}} @media(max-width:600px){.svc-panel.active{grid-template-columns:1fr;}} .svc-card{border:1px solid #E1E6EA; border-radius:12px; padding:20px 18px; background:var(--white); transition:transform 0.2s ease, box-shadow 0.2s ease;} .svc-card:hover{transform:translateY(-4px); box-shadow:0 10px 24px rgba(14,42,71,0.1);} .svc-card .icn{width:28px; height:28px; color:var(--blue); margin-bottom:12px; transition:transform 0.2s ease;} .svc-card:hover .icn{transform:scale(1.18);} .svc-card h3{font-family:'Montserrat',sans-serif; font-size:16px; font-weight:700; color:var(--ink); margin-bottom:6px;} .svc-card p{font-size:13px; color:var(--ink-soft);} /* Service overview cards (Residential Services page): image + summary + benefits + CTA */ .service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;} @media(max-width:900px){.service-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:640px){.service-grid{grid-template-columns:1fr;}} .service-overview-card{background:var(--white); border:1px solid #E1E6EA; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:transform 0.2s ease, box-shadow 0.2s ease;} .service-overview-card:hover{transform:translateY(-4px); box-shadow:0 10px 24px rgba(14,42,71,0.1);} .service-overview-card .service-card-media{aspect-ratio:4/3; overflow:hidden;} .service-overview-card .service-card-media img{width:100%; height:100%; object-fit:cover;} .service-overview-card .service-card-media.icon-media{display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--ink) 0%, #163E63 100%);} .service-overview-card .service-card-media.icon-media svg{width:56px; height:56px; color:var(--blue-light);} .service-overview-card.featured{grid-column:span 2;} @media(max-width:900px){.service-overview-card.featured{grid-column:span 1;}} .service-overview-card.featured .service-card-media{aspect-ratio:21/9;} @media(max-width:700px){.service-overview-card.featured .service-card-media{aspect-ratio:4/3;}} .flagship-badge{display:inline-flex; align-items:center; gap:6px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--green-dark); background:#EFFBE6; border:1px solid rgba(109,214,18,0.4); padding:5px 12px; border-radius:20px; margin-bottom:10px;} .service-overview-card .service-card-body{padding:20px 20px; display:flex; flex-direction:column; flex:1;} .service-overview-card h3{font-size:18px; font-weight:800; color:var(--ink); margin-bottom:8px;} .service-overview-card .service-card-summary{font-size:14px; color:var(--ink-soft); margin-bottom:14px;} .service-card-benefits{list-style:none; display:grid; gap:8px; margin-bottom:20px;} .service-card-benefits li{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink);} .service-card-benefits svg{width:16px; height:16px; color:var(--blue); flex-shrink:0; margin-top:2px;} .service-overview-card .btn{margin-top:auto; align-self:flex-start;} /* Split section: image beside text (results, "what is X", "why Y" sections) */ .split-section{display:grid; grid-template-columns:1.2fr 0.8fr; gap:28px; align-items:center;} .split-section.reverse{grid-template-columns:0.8fr 1.2fr;} .split-section.reverse .split-media{order:2;} @media(max-width:900px){ .split-section, .split-section.reverse{grid-template-columns:1fr;} .split-section.reverse .split-media{order:0;} } .split-media img{border-radius:12px; width:100%; height:auto;} .split-list{display:grid; gap:14px;} /* Real results (homepage-specific alias of split-section, kept for index.html compatibility) */ .results{background:var(--white);} .results-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:28px; align-items:center;} @media(max-width:900px){.results-grid{grid-template-columns:1fr;}} .results-grid img{border-radius:12px; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;} .results-list{display:grid; gap:14px;} /* Interactive tabbed explainer: material selectors, stain-type selectors, service comparisons, and maintenance timelines all share this one component (js/tab-switcher.js), styled differently only through content. */ .explainer-tabs{display:flex; gap:8px; margin-bottom:28px; justify-content:center; flex-wrap:wrap;} .explainer-tab{font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; padding:10px 18px; border-radius:20px; border:1px solid #DCE2E7; background:var(--white); cursor:pointer; color:var(--ink-soft); transition:transform 0.15s ease, background 0.15s ease, color 0.15s ease;} .explainer-tab:hover{transform:translateY(-2px);} .explainer-tab.active{background:var(--ink); color:var(--white); border-color:var(--ink);} .explainer-panels{position:relative;} .explainer-panel{display:none; grid-template-columns:auto 1fr; gap:22px; align-items:flex-start; background:var(--white); border:1px solid #E1E6EA; border-radius:14px; padding:24px;} .explainer-panel.active{display:grid; animation:explainerFade 0.2s ease;} @keyframes explainerFade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}} @media(prefers-reduced-motion:reduce){.explainer-panel.active{animation:none;}} @media(max-width:700px){.explainer-panel{grid-template-columns:1fr;}} .explainer-icon{width:52px; height:52px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .explainer-icon svg{width:26px; height:26px; color:var(--blue);} .explainer-panel h3{font-size:19px; font-weight:800; color:var(--ink); margin-bottom:10px;} .explainer-panel p{font-size:14.5px; color:var(--ink-soft); margin-bottom:10px;} .explainer-panel p:last-child{margin-bottom:0;} .explainer-panel ul{margin:8px 0 10px 18px;} .explainer-panel li{font-size:14.5px; color:var(--ink-soft); margin-bottom:4px;} /* Click-to-reveal educational callouts: same accordion the FAQ section uses (js/faq-accordion.js binds .faq-q globally), just usable inline within body copy with a distinct "callout" skin. */ .faq-item.callout{border:1px solid #E1E6EA; border-radius:10px; padding:18px 20px; background:var(--paper); margin-bottom:14px;} .faq-item.callout.open{background:var(--white); box-shadow:0 10px 28px rgba(14,42,71,0.1);} .faq-item.callout.open .faq-a{max-height:500px;} /* Process steps (4-step process, reusable across pages). Flexbox + justify-content:center rather than CSS grid so that an incomplete last row (e.g. 6 steps in 4 columns, or 7 steps in the wide variant) centers itself instead of left-hugging the row. */ .process-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:24px; counter-reset:step;} .process-step{flex:0 0 calc(25% - 18px); text-align:center; position:relative;} @media(max-width:900px){.process-step{flex-basis:calc(50% - 12px);}} @media(max-width:560px){.process-step{flex-basis:100%;}} .process-step .step-num{width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--white); font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px;} .process-step h3{font-family:'Montserrat',sans-serif; font-size:15px; font-weight:700; color:var(--ink); margin-bottom:6px;} .process-step p{font-size:13px; color:var(--ink-soft);} /* Wide process variant for longer sequences (e.g. the 7-step commercial process) — allows more, narrower columns to fit per row instead of the fixed 4-column base, while still centering any incomplete last row. */ .process-grid.wide .process-step{flex:1 1 150px; max-width:200px;} @media(max-width:900px){.process-grid.wide .process-step{flex-basis:calc(50% - 12px); max-width:none;}} @media(max-width:560px){.process-grid.wide .process-step{flex-basis:100%; max-width:none;}} /* Featured projects */ .featured-projects{background:var(--paper);} .fp-filters{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:24px;} .fp-filters[hidden]{display:none;} .fp-filter-btn{font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; padding:9px 18px; border-radius:6px; border:1px solid #DCE2E7; background:var(--white); cursor:pointer; color:var(--ink-soft);} .fp-filter-btn.active{background:var(--blue); color:var(--white); border-color:var(--blue);} .fp-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-bottom:24px;} @media(max-width:900px){.fp-grid{grid-template-columns:1fr;}} /* "View More Projects" reveal: keeps the section to one strong project up front instead of every real project loading (and every slider instantiating) at once. */ .fp-viewmore-wrap{text-align:center; margin:8px 0 40px;} .fp-viewmore-wrap[hidden]{display:none;} .fp-viewmore-btn{padding:12px 26px;} .project-card{background:var(--white); border-radius:12px; overflow:hidden; border:1px solid #E1E6EA; transition:transform 0.2s ease, box-shadow 0.2s ease;} .project-card:hover{transform:translateY(-4px); box-shadow:0 10px 24px rgba(14,42,71,0.1);} .project-card-inner{display:flex; flex-direction:column; height:100%;} .project-card.featured{grid-column:span 2;} @media(max-width:900px){.project-card.featured{grid-column:span 1;}} .project-card.featured .ba-frame, .project-card.featured .project-card-single-image{aspect-ratio:21/9;} @media(max-width:700px){ .project-card.featured .ba-frame, .project-card.featured .project-card-single-image{aspect-ratio:4/3;} } .project-card.featured .project-card-body h3{font-size:20px;} .project-card-media{position:relative;} .project-card-single-image{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;} .project-card-body{padding:20px 20px; display:flex; flex-direction:column; flex:1;} .project-card-service{display:block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue); margin-bottom:8px;} .project-card-body h3{font-size:17px; font-weight:800; color:var(--ink); margin-bottom:4px;} .project-card-loc{font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:12px;} .project-card-desc{font-size:14px; color:var(--ink-soft); margin-bottom:16px;} .project-card-quote{border-left:3px solid var(--blue); padding-left:14px; margin-bottom:18px;} .project-card-quote p{font-size:13px; font-style:italic; color:var(--ink-soft);} .project-card-quote cite{display:block; margin-top:6px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; font-style:normal; color:var(--ink);} .project-card-body .view-project-btn{margin-top:auto; align-self:flex-start;} /* Before/after slider (shared by cards and modal) */ .ba-frame{position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--paper); touch-action:pan-y; cursor:ew-resize;} .ba-img{position:absolute; inset:0; width:100%; height:100% !important; object-fit:cover; -webkit-user-select:none; user-select:none; pointer-events:none;} .ba-before{clip-path:inset(0 50% 0 0);} .ba-label{position:absolute; top:12px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--white); background:rgba(14,42,71,0.65); padding:5px 10px; border-radius:20px; pointer-events:none;} .ba-label-before{left:12px;} .ba-label-after{right:12px;} .ba-handle{position:absolute; top:0; bottom:0; left:50%; width:0; display:flex; align-items:center; justify-content:center;} .ba-handle::before{content:''; position:absolute; top:0; bottom:0; left:-1px; width:2px; background:var(--white); box-shadow:0 0 0 1px rgba(14,42,71,0.15);} .ba-handle-grip{width:38px; height:38px; border-radius:50%; background:var(--white); box-shadow:0 4px 14px rgba(14,42,71,0.28); display:flex; align-items:center; justify-content:center; color:var(--blue); flex-shrink:0;} .ba-handle-grip svg{width:18px; height:18px;} .ba-handle:focus-visible{outline:none;} .ba-handle:focus-visible .ba-handle-grip{box-shadow:0 0 0 4px rgba(21,131,255,0.35), 0 4px 14px rgba(14,42,71,0.28);} .ba-frame.dragging .ba-handle-grip{transform:scale(1.08);} .ba-frame-modal{aspect-ratio:16/10;} .ba-frame-tall{aspect-ratio:1/1.4;} .ba-frame-window{aspect-ratio:5/9;} .ba-frame-square{aspect-ratio:1/1;} /* Static before/after comparison — used when the two states are a single real photo (a cleaned surface beside an uncleaned one), where a drag slider can't line the halves up. Before on the left, after on the right, with pill tags. */ .ba-static{position:relative;} .ba-static > img{display:block; width:100%; height:auto;} .ba-static .ba-tag{position:absolute; top:12px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:#fff; background:rgba(14,42,71,0.82); padding:6px 12px; border-radius:20px; pointer-events:none;} .ba-static .ba-tag-before{left:12px;} .ba-static .ba-tag-after{right:12px;} /* Featured projects CTA */ .fp-cta{text-align:center; background:var(--white); border:1px solid #E1E6EA; border-radius:14px; padding:26px 24px;} .fp-cta h3{font-family:'Montserrat',sans-serif; font-size:22px; font-weight:800; color:var(--ink); margin-bottom:8px;} .fp-cta p{font-size:14px; color:var(--ink-soft); margin-bottom:20px;} .fp-cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;} /* Project modal */ .project-modal-overlay{position:fixed; inset:0; background:rgba(14,42,71,0.6); display:flex; align-items:center; justify-content:center; padding:24px; z-index:300;} .project-modal-overlay[hidden]{display:none;} .project-modal{background:var(--white); border-radius:14px; width:100%; max-width:900px; max-height:calc(100vh - 48px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 64px rgba(14,42,71,0.35); position:relative;} .project-modal-close{position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,0.9); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 12px rgba(14,42,71,0.18);} .project-modal-close:hover{background:var(--white);} .project-modal-close svg{width:18px; height:18px;} .project-modal-scroll{overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;} .project-modal-single-image{width:100%; height:auto; display:block;} .project-modal-gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:16px 28px 0;} .project-modal-gallery[hidden]{display:none;} .project-gallery-item{border-radius:8px; overflow:hidden; aspect-ratio:1; margin:0;} .project-gallery-item img{width:100%; height:100%; object-fit:cover;} .project-modal-body{padding:24px 28px 32px;} .project-modal-body h2{font-size:clamp(22px,3vw,28px); font-weight:800; color:var(--ink); margin-bottom:6px;} .project-modal-loc{font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:16px;} .project-modal-loc[hidden]{display:none;} .project-modal-meta{display:flex; gap:24px; flex-wrap:wrap; margin-bottom:18px; padding:14px 16px; background:var(--paper); border-radius:10px;} .project-modal-meta[hidden]{display:none;} .project-modal-meta-item dt{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--gray); margin-bottom:2px;} .project-modal-meta-item dd{font-size:14px; font-weight:600; color:var(--ink);} .project-modal-description{font-size:15px; color:var(--ink-soft); margin-bottom:20px;} .project-modal-description[hidden]{display:none;} .project-modal-block{margin-bottom:20px;} .project-modal-block[hidden]{display:none;} .project-modal-block h3{font-family:'Montserrat',sans-serif; font-size:14px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px;} .project-modal-block p{font-size:14px; color:var(--ink-soft);} .project-modal-testimonial{border-left:3px solid var(--blue); padding-left:16px; margin-bottom:24px;} .project-modal-testimonial[hidden]{display:none;} .project-modal-testimonial p{font-size:15px; font-style:italic; color:var(--ink);} .project-modal-testimonial cite{display:block; margin-top:8px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; font-style:normal; color:var(--ink-soft);} .project-modal-cta{display:flex; gap:14px; flex-wrap:wrap;} @media(max-width:640px){ .project-modal-overlay{padding:0;} .project-modal{max-height:100vh; border-radius:0;} .project-modal-gallery{grid-template-columns:repeat(3,1fr);} } @media(prefers-reduced-motion:reduce){ .ba-before, .ba-handle{transition:none !important;} } /* Coverage */ .coverage{background:var(--ink); color:var(--white);} .coverage .eyebrow{color:var(--blue-light);} .coverage .section-head h2{color:var(--white);} .coverage .section-head p{color:rgba(255,255,255,0.72);} .radius-grid{display:grid; grid-template-columns:220px 1fr; gap:32px; align-items:center;} @media(max-width:800px){.radius-grid{grid-template-columns:1fr; justify-items:center; text-align:center;}} .radius-svg{width:190px; height:190px;} .radius-svg .pulse-ring{animation:radiusPulse 2.6s ease-in-out infinite;} @keyframes radiusPulse{ 0%,100%{opacity:0.55; stroke-width:1.5;} 50%{opacity:1; stroke-width:2.5;} } .town-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;} .town{display:flex; align-items:center; gap:10px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:13px; padding:9px 14px; border:1px solid rgba(255,255,255,0.18); border-radius:8px; transition:transform 0.2s ease, border-color 0.2s ease;} .town:hover{transform:translateY(-2px); border-color:var(--green);} .town .dot{width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; animation:dotGlow 1.8s ease-in-out infinite;} @keyframes dotGlow{ 0%,100%{box-shadow:0 0 0px 0px rgba(109,214,18,0.6); transform:scale(1);} 50%{box-shadow:0 0 8px 3px rgba(109,214,18,0.6); transform:scale(1.25);} } /* Service area checker */ .sac-card{background:var(--white); color:var(--ink); border-radius:14px; padding:26px; box-shadow:0 20px 48px rgba(0,0,0,0.28); max-width:560px; margin:32px auto 0;} .sac-intro h3{font-family:'Montserrat',sans-serif; font-size:20px; font-weight:800; color:var(--ink); margin-bottom:6px;} .sac-intro p{font-size:14px; color:var(--ink-soft); margin-bottom:22px;} .sac-field{margin-bottom:14px;} .sac-field label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px;} .sac-autocomplete-wrap{position:relative;} .sac-autocomplete-wrap input{width:100%; padding:13px 14px; border:1px solid #DCE2E7; border-radius:6px; font-family:'Work Sans',sans-serif; font-size:15px; color:var(--ink); background:var(--white);} .sac-autocomplete-wrap input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,131,255,0.15);} .sac-suggestions{position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--white); border:1px solid #DCE2E7; border-radius:8px; box-shadow:0 12px 28px rgba(14,42,71,0.16); max-height:260px; overflow-y:auto; z-index:20; list-style:none; padding:6px; margin:0;} .sac-suggestions[hidden]{display:none;} .sac-suggestion{padding:11px 12px; font-size:14px; color:var(--ink); border-radius:6px; cursor:pointer;} .sac-suggestion:hover, .sac-suggestion.active{background:var(--paper); color:var(--blue);} .sac-submit{width:100%; justify-content:center; margin-top:6px;} .sac-privacy{font-size:12px; color:var(--gray); margin-top:12px; text-align:center;} .sac-card a:focus-visible, .sac-card button:focus-visible, .sac-suggestion:focus-visible{outline:2px solid var(--blue); outline-offset:2px;} .sac-result{margin-top:20px; border-radius:10px; padding:20px; opacity:0; transform:translateY(6px); transition:opacity 0.25s ease, transform 0.25s ease;} .sac-result[hidden]{display:none;} .sac-result.show{opacity:1; transform:translateY(0);} .sac-result-loading{background:var(--paper); color:var(--ink-soft); font-size:14px;} .sac-result-standard{background:#EFFBE6; border:1px solid rgba(109,214,18,0.4);} .sac-result-extended{background:#FFF7E3; border:1px solid rgba(230,166,0,0.35);} .sac-result-unknown{background:var(--paper); border:1px solid #DCE2E7;} .sac-result-headline{font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px; color:var(--ink); margin-bottom:6px;} .sac-result-headline:focus{outline:none;} .sac-result-body{font-size:14px; color:var(--ink-soft); margin-bottom:14px;} .sac-result-actions{display:flex; gap:12px; flex-wrap:wrap;} .sac-spinner{width:16px; height:16px; border:2px solid rgba(14,42,71,0.15); border-top-color:var(--blue); border-radius:50%; display:inline-block; margin-right:8px; vertical-align:-3px; animation:sacSpin 0.8s linear infinite;} @keyframes sacSpin{to{transform:rotate(360deg);}} @media(max-width:640px){ .sac-card{padding:24px 20px; margin-top:32px;} .sac-result-actions{flex-direction:column; align-items:stretch;} .sac-result-actions .btn{width:100%; justify-content:center;} } @media(prefers-reduced-motion:reduce){ .sac-result{transition:none;} .sac-spinner{animation:none;} } /* Testimonials / reviews carousel */ .reviews{background:var(--white); overflow:hidden;} .reviews-carousel{margin-top:8px;} .reviews-viewport{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 6vw 22px; } .reviews-viewport::-webkit-scrollbar{display:none;} .reviews-track{display:flex; gap:20px;} .reviews-set{display:flex; align-items:flex-start; gap:20px;} .rev-card{ background:var(--paper); border-radius:12px; padding:24px 22px; flex:0 0 300px; width:300px; display:flex; flex-direction:column; min-height:230px; } .rev-card:focus-visible{outline:2px solid var(--blue); outline-offset:3px;} .rev-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;} .rev-stars{display:flex; gap:2px; color:#FBBC05;} .rev-stars svg{width:15px; height:15px; fill:currentColor;} .google-g{width:18px; height:18px; flex-shrink:0;} .rev-text{ font-size:14px; color:var(--ink-soft); font-style:italic; flex:1; margin:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden; } .rev-text.expanded{-webkit-line-clamp:unset; overflow:visible;} .rev-readmore{ align-self:flex-start; margin-top:8px; background:none; border:none; padding:0; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; color:var(--blue); cursor:pointer; } .rev-readmore:hover{text-decoration:underline;} .rev-card .who{margin-top:14px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; color:var(--ink);} .reviews-cta-wrap{text-align:center; margin-top:12px;} @media(max-width:640px){ .rev-card{flex-basis:82vw; width:82vw;} } /* FAQ */ .faq{background:var(--paper);} .faq-list{max-width:760px; margin:0 auto;} .faq-item{border-bottom:1px solid #DCE2E7; padding:15px 0; transition:transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; border-radius:8px;} .faq-item.open{transform:scale(1.02); background:var(--white); box-shadow:0 10px 28px rgba(14,42,71,0.14); padding:15px 18px; border-bottom-color:transparent; position:relative; z-index:2;} .faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:'Montserrat',sans-serif; font-weight:700; font-size:15px; color:var(--ink);} .faq-q .plus{font-size:20px; color:var(--blue); transition:transform 0.2s;} .faq-item.open .plus{transform:rotate(45deg);} .faq-a{max-height:0; overflow:hidden; transition:max-height 0.25s ease; font-size:14px; color:var(--ink-soft);} .faq-item.open .faq-a{max-height:200px; margin-top:12px;} /* Final CTA */ .final-cta{background:linear-gradient(120deg, var(--ink) 0%, #163E63 100%); color:var(--white); text-align:center;} .final-cta h2{color:var(--white); font-size:clamp(24px,3.2vw,34px); font-weight:800; margin-bottom:14px;} .final-cta p{color:rgba(255,255,255,0.72); max-width:480px; margin:0 auto 28px;} .final-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;} /* Footer */ footer{background:var(--ink); color:rgba(255,255,255,0.75); padding:40px 0 22px; font-size:14px;} .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.15);} @media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;}} .foot-grid h4{font-family:'Montserrat',sans-serif; font-size:14px; font-weight:700; color:var(--white); margin-bottom:14px; text-transform:uppercase;} .foot-grid a, .foot-grid p{display:block; color:rgba(255,255,255,0.7); margin-bottom:8px; font-size:14px;} .foot-bottom{display:flex; justify-content:space-between; padding-top:18px; font-size:12px; color:rgba(255,255,255,0.5); flex-wrap:wrap; gap:12px;} .foot-social{display:flex; gap:14px;} /* ========================================================================== Landing pages (paid Facebook traffic) ========================================================================== Used only by the standalone conversion landing pages (house-washing-offer, window-cleaning-offer, property-refresh-package). These pages reuse every component above (hero, ba-frame slider, why-grid, fp-grid, reviews carousel, sac-card, faq, final-cta) but replace the full site header/ footer with a stripped-down version and add an embedded estimate form, since the entire point of a paid landing page is keeping the visitor on one page instead of routing them through the normal site nav. */ .lp-header{background:var(--white); position:sticky; top:0; z-index:50; border-bottom:1px solid var(--paper); box-shadow:0 1px 6px rgba(14,42,71,0.06);} .lp-header .wrap{display:flex; align-items:center; justify-content:space-between; padding:12px 6vw; gap:16px;} .lp-header .brandlogo img{height:52px; width:auto;} .lp-header-cta{display:flex; align-items:center; gap:16px;} .lp-header-cta .phonelink{display:flex; align-items:center; gap:6px;} .lp-header-cta .phonelink svg{width:16px; height:16px;} @media(max-width:560px){ .lp-header-cta .phonelink span{display:none;} .lp-header-cta .btn{padding:11px 16px; font-size:13px;} } /* Offer banner: the single, clear, no-gimmick value prop under the hero copy */ .lp-offer{background:linear-gradient(120deg, #EFFBE6 0%, #E8F9F0 100%); border:1.5px solid rgba(109,214,18,0.45); border-radius:12px; padding:16px 20px; display:flex; align-items:center; gap:14px; margin:20px 0;} .lp-offer-icon{width:44px; height:44px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .lp-offer-icon svg{width:22px; height:22px; color:var(--ink);} .lp-offer-text{font-size:14px; color:var(--ink);} .lp-offer-text strong{display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px; color:var(--ink); margin-bottom:2px;} /* Offer ribbon variant used inside the hero visual card itself */ .lp-offer-ribbon{position:absolute; top:14px; left:14px; background:var(--green); color:var(--ink); font-family:'Montserrat',sans-serif; font-weight:800; font-size:12px; letter-spacing:0.02em; padding:8px 14px; border-radius:8px; box-shadow:0 6px 16px rgba(14,42,71,0.25); z-index:5;} /* Package/bundle savings badge (Complete Property Refresh page) */ .lp-savings-badge{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--white); font-family:'Montserrat',sans-serif; font-weight:800; font-size:14px; padding:10px 18px; border-radius:8px; margin-bottom:16px;} .lp-savings-badge svg{width:18px; height:18px; color:var(--blue-light);} /* What's included / package grid: one row, three cards, a single "+" between each pair (not a card of its own — an absolutely-positioned connector so the cards themselves stay close together). */ .lp-package-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; position:relative; counter-reset:none;} @media(max-width:700px){.lp-package-grid{grid-template-columns:1fr; gap:32px;}} .lp-package-card{background:var(--white); border:1px solid #E1E6EA; border-radius:12px; padding:24px 22px; text-align:center; position:relative;} .lp-package-card:not(:last-child)::after{ content:'+'; position:absolute; top:50%; right:-25px; transform:translate(50%,-50%); width:34px; height:34px; border-radius:50%; background:var(--white); border:1px solid #E1E6EA; color:var(--gray); font-size:18px; font-weight:600; display:flex; align-items:center; justify-content:center; z-index:2; } @media(max-width:700px){ .lp-package-card:not(:last-child)::after{right:50%; top:100%; bottom:auto; transform:translate(50%,-50%);} } .lp-package-card .icn-wrap{width:52px; height:52px; border-radius:50%; background:var(--mist); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;} .lp-package-card .icn-wrap svg{width:26px; height:26px; color:var(--blue);} .lp-package-card h3{font-size:17px; font-weight:800; color:var(--ink); margin-bottom:8px;} .lp-package-card p{font-size:13.5px; color:var(--ink-soft);} /* Simple photo gallery grid (Window Cleaning page) */ .lp-gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;} @media(max-width:700px){.lp-gallery-grid{grid-template-columns:repeat(2,1fr);}} .lp-gallery-item{border-radius:10px; overflow:hidden; aspect-ratio:4/5; background:var(--paper);} .lp-gallery-item img{width:100%; height:100%; object-fit:cover;} .lp-gallery-item.wide{aspect-ratio:4/3;} /* Embedded estimate form (ported from contact.html so it can live directly on a landing page instead of requiring a click-through to /contact) */ .lp-form-section{background:var(--paper);} .lp-form-wrap{display:grid; grid-template-columns:1fr; max-width:640px; margin:0 auto;} .contact-form{background:var(--white); border-radius:14px; padding:28px; border:1px solid #E1E6EA; box-shadow:0 12px 32px rgba(14,42,71,0.08);} .contact-form h2{font-size:22px; font-weight:800; color:var(--navy); margin-bottom:6px;} .contact-form .sub{font-size:14px; color:var(--ink-soft); margin-bottom:22px;} .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;} @media(max-width:560px){.form-row{grid-template-columns:1fr;}} .form-field{display:flex; flex-direction:column; gap:6px; min-width:0;} /* Let form controls shrink below their content's intrinsic width so a long