/* Self-hosted fonts (latin) — removes render-blocking third-party CSS + shrinks the font-swap reflow that was the main CLS/LCP drag. Critical weights preloaded in . */ @font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/anton-400.woff2') format('woff2');} @font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/barlow-400.woff2') format('woff2');} @font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-600.woff2') format('woff2');} @font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/barlow-700.woff2') format('woff2');} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlowcondensed-600.woff2') format('woff2');} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/barlowcondensed-700.woff2') format('woff2');} /* ===================================================================== Elevate Pressure Washing — styles.css Patriotic Americana · bold industrial · clean. Navy / red / water-blue. Fonts: Anton (display), Barlow Condensed (headings), Barlow (body). ===================================================================== */ :root{ /* brand */ --navy: #10294A; --navy-700: #16375f; --navy-900: #0A1C33; --red: #C8102E; --red-dark: #A50D26; --water: #1C7FD6; --water-600: #1668b0; --sky: #E6F1FB; --sky-line: #cfe3f6; /* neutrals */ --paper: #F5F8FC; /* page background, cool clean */ --white: #FFFFFF; --ink: #12263F; /* body text */ --ink-soft: #46576e; /* secondary text */ --border: #DBE4EF; --muted: #EDF2F8; /* system */ --maxw: 1160px; --radius: 16px; --radius-sm: 11px; --radius-lg: 24px; --shadow-sm: 0 2px 8px rgba(16,41,74,.06); --shadow: 0 14px 34px rgba(16,41,74,.12); --shadow-lg: 0 26px 60px rgba(16,41,74,.20); --ring: 0 0 0 4px rgba(28,127,214,.28); --ease: cubic-bezier(.2,.7,.2,1); --f-display: 'Anton', 'Barlow Condensed', sans-serif; --f-head: 'Barlow Condensed', 'Barlow', sans-serif; --f-body: 'Barlow', system-ui, -apple-system, Segoe UI, sans-serif; } *{ box-sizing:border-box; } *::selection{ background:var(--water); color:#fff; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } .band-navy a:not(.btn), .discount a:not(.btn){ color:#7fc0f4; } .band-navy a:not(.btn):hover, .discount a:not(.btn):hover{ color:#fff; } /* skip link (keyboard users) */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 10px 0; font-family:var(--f-head); font-weight:700; } .skip-link:focus{ left:0; } /* visible focus ring on every interactive element */ :focus-visible{ outline:3px solid var(--water); outline-offset:2px; } body{ margin:0; font-family:var(--f-body); color:var(--ink); background:var(--paper); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; touch-action:manipulation; } img{ max-width:100%; display:block; } a{ color:var(--water-600); text-decoration:none; } p a:not(.btn){ text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; } h1,h2,h3,h4{ font-family:var(--f-head); color:var(--navy); line-height:1.04; margin:0 0 .4em; font-weight:700; letter-spacing:.1px; } h1{ font-size:clamp(2rem, 7vw, 4.5rem); } h2{ font-size:clamp(2rem, 4.3vw, 3.1rem); } h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); } p{ margin:0 0 1rem; } .display{ font-family:var(--f-display); font-weight:400; letter-spacing:.4px; text-transform:none; line-height:.98; } .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; } .section{ padding:clamp(56px, 8vw, 104px) 0; position:relative; } .center{ text-align:center; } .lead{ font-size:clamp(1rem, 2.4vw, 1.18rem); color:var(--ink-soft); } .eyefree{ /* intentional: section leads use headings, no kicker labels */ } /* ---- section heading helper (no kicker; heading leads) ---- */ .section-head{ max-width:720px; margin:0 auto clamp(30px,4vw,52px); } .section-head.center{ text-align:center; } .section-head h2{ margin-bottom:.35em; } .section-head .block{ background:transparent; padding:0; } .section-head p{ color:var(--ink-soft); font-size:1.12rem; margin:0; } /* flag accent rendered as a heading underline via pseudo-element (no extra DOM node, so it never reads as a kicker; a tinted block accent, not a border-ornament) */ .flag-underline::after{ content:""; display:block; width:82px; height:7px; border-radius:4px; margin-top:18px; background:linear-gradient(90deg, var(--navy) 0 33%, var(--red) 33% 66%, var(--water) 66% 100%); } .center .flag-underline::after, .flag-underline.center::after{ margin-left:auto; margin-right:auto; } .band-navy .flag-underline::after, .hero .flag-underline::after{ background:linear-gradient(90deg,#fff 0 33%, var(--red) 33% 66%, var(--water) 66% 100%); } /* ===================================================================== Buttons ===================================================================== */ .btn{ --bg:var(--red); --fg:#fff; display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-family:var(--f-head); font-weight:700; font-size:1.08rem; background:var(--bg); color:var(--fg); padding:15px 26px; border-radius:12px; border:0; cursor:pointer; min-height:52px; line-height:1; box-shadow:0 10px 22px rgba(200,16,46,.28); transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); white-space:nowrap; } .btn svg{ width:20px; height:20px; } .btn:hover{ background:var(--red-dark); transform:translateY(-2px); box-shadow:0 16px 30px rgba(200,16,46,.36); } .btn:active{ transform:translateY(0); } .btn:focus-visible{ outline:none; box-shadow:var(--ring), 0 10px 22px rgba(200,16,46,.28); } .btn-ghost{ --bg:transparent; --fg:var(--navy); box-shadow:none; border:2px solid var(--border); background:#fff; } .btn-ghost:hover{ background:var(--sky); border-color:var(--water); color:var(--navy-900); box-shadow:0 12px 24px rgba(16,41,74,.10); } .btn-ghost:focus-visible{ box-shadow:var(--ring); } .btn-water{ --bg:var(--water-600); box-shadow:0 10px 22px rgba(28,127,214,.30); } .btn-water:hover{ background:#12558f; box-shadow:0 16px 30px rgba(28,127,214,.40); } .btn-onnavy{ --bg:#fff; --fg:var(--navy); box-shadow:0 10px 22px rgba(0,0,0,.22); } .btn-onnavy:hover{ background:var(--sky); color:var(--navy-900); } .btn-lg{ font-size:1.2rem; padding:18px 32px; min-height:60px; } .btn-block{ width:100%; } /* ===================================================================== Header / Nav ===================================================================== */ .topbar{ background:var(--navy-900); color:#cfe0f2; font-size:.95rem; } .topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:40px; padding-top:6px; padding-bottom:6px; } .topbar a{ color:#fff; font-weight:600; } .topbar .tb-left{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; } .topbar .tb-item{ display:inline-flex; align-items:center; gap:7px; } .topbar svg{ width:16px; height:16px; color:#7fc0f4; } /* Nothing in the topbar earns its 40px on a phone, and the nav CTA + sticky call bar already carry the number. Hidden rather than left as an empty navy strip. */ @media (max-width:720px){ .topbar{ display:none; } } .nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:76px; } .brand{ display:inline-flex; align-items:center; } /* The logo art already contains the wordmark, so it replaces the old icon+text lockup. width:auto + the width/height attrs keep the aspect ratio and reserve space (no CLS). 64px is the floor where "PRESSURE WASHING" still resolves; below that it turns to mush. */ .brand .logo{ height:64px; width:auto; display:block; } .nav-links{ display:flex; align-items:center; gap:6px; } .nav-links .link{ font-family:var(--f-head); font-weight:600; font-size:1.08rem; color:var(--navy); padding:10px 14px; border-radius:9px; transition:background .15s, color .15s; } .nav-links .link:hover{ background:var(--sky); color:var(--navy-900); } .nav-links .link.active{ color:var(--water-600); } .nav-cta{ display:inline-flex; gap:10px; align-items:center; } .nav-toggle{ display:none; width:48px; height:48px; border:1px solid var(--border); background:#fff; border-radius:11px; color:var(--navy); align-items:center; justify-content:center; cursor:pointer; } .nav-toggle svg{ width:26px; height:26px; } @media (max-width:960px){ /* Keep the lockup clear of the 76px bar so the menu still meets it at inset:76px. */ .brand .logo{ height:52px; } .nav-links{ position:fixed; inset:76px 0 auto 0; flex-direction:column; align-items:stretch; gap:2px; background:#fff; border-bottom:1px solid var(--border); padding:14px 18px 22px; box-shadow:var(--shadow); transform:translateY(-140%); transition:transform .3s var(--ease); z-index:49; } .nav-links.open{ transform:translateY(0); } .nav-links .link{ padding:14px 12px; font-size:1.2rem; border-bottom:1px solid var(--muted); border-radius:0; } .nav-cta{ margin-top:12px; flex-direction:column; align-items:stretch; } .nav-cta .btn{ width:100%; } .nav-toggle{ display:inline-flex; } } /* ===================================================================== HERO ===================================================================== */ .hero{ position:relative; overflow:hidden; color:#eaf3fc; background: radial-gradient(1200px 520px at 82% -10%, rgba(28,127,214,.36), transparent 60%), radial-gradient(900px 500px at 8% 8%, rgba(200,16,46,.20), transparent 55%), linear-gradient(160deg, #0c2444 0%, #10294A 55%, #0A1C33 100%); } .hero::before{ /* faint star field */ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image: radial-gradient(2px 2px at 12% 30%, rgba(255,255,255,.6), transparent 60%), radial-gradient(2px 2px at 28% 68%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1.6px 1.6px at 46% 22%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1.6px 1.6px at 66% 60%, rgba(255,255,255,.35), transparent 60%), radial-gradient(2px 2px at 84% 34%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1.4px 1.4px at 92% 74%, rgba(255,255,255,.35), transparent 60%); } .hero .wrap{ position:relative; z-index:2; } .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding-top:clamp(34px,6vw,86px); padding-bottom:clamp(34px,6vw,86px); } /* longhand: never clobber .wrap side padding */ .hero h1{ color:#fff; margin-bottom:.35em; } .hero h1 .hl{ color:#7fc0f4; } .hero .display .hl{ color:#7fc0f4; } .hero-copy{ max-width:600px; } .hero-copy .lead{ color:#c7dcf1; font-size:clamp(1.02rem, 2.6vw, 1.24rem); } .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 22px; } /* flag ribbon top accent */ .flagline{ height:6px; width:100%; background:linear-gradient(90deg, var(--navy) 0 33%, var(--red) 33% 66%, var(--water) 66% 100%); } /* hero water spray + floating droplets */ .hero-spray{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; } .hero-spray svg{ position:absolute; right:-4%; bottom:-8%; width:min(520px,56%); height:auto; opacity:.28; } @media (max-width:960px){ .hero-spray svg{ opacity:.18; } } /* ===================================================================== Before / After slider ===================================================================== */ .ba{ position:relative; width:100%; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:5px solid #fff; user-select:none; touch-action:pan-y; background:#0b2036; } .ba-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .ba-before{ /* the "before" photo, revealed to the right of the handle */ position:absolute; inset:0; clip-path:inset(0 0 0 50%); } .ba-tag{ position:absolute; top:14px; font-family:var(--f-head); font-weight:700; font-size:.92rem; color:#fff; padding:5px 13px; border-radius:999px; z-index:4; box-shadow:0 4px 12px rgba(0,0,0,.28); } .ba-tag.before{ left:14px; background:rgba(16,28,51,.82); } .ba-tag.after{ right:14px; background:var(--water-600); } .ba-divider{ position:absolute; top:0; bottom:0; left:50%; width:4px; margin-left:-2px; background:#fff; z-index:5; box-shadow:0 0 0 1px rgba(16,41,74,.15); } .ba-handle{ position:absolute; top:50%; left:50%; width:52px; height:52px; margin:-26px 0 0 -26px; z-index:6; background:var(--white); border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; color:var(--water); cursor:ew-resize; border:3px solid var(--water); } .ba-handle svg{ width:26px; height:26px; } .ba input[type=range]{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:7; } .ba-hint{ position:absolute; left:0; right:0; bottom:12px; text-align:center; color:#fff; font-size:.9rem; z-index:4; text-shadow:0 1px 6px rgba(0,0,0,.5); pointer-events:none; } /* ===================================================================== Cards / grids ===================================================================== */ .grid{ display:grid; gap:22px; } .grid.cols-3{ grid-template-columns:repeat(3,1fr); } .grid.cols-4{ grid-template-columns:repeat(4,1fr); } .grid.cols-2{ grid-template-columns:repeat(2,1fr); } .card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; } .card h3{ margin:.2em 0 .35em; } .card p{ color:var(--ink-soft); margin:0; } .svc-card{ position:relative; overflow:hidden; } .svc-card .ico{ width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--sky); color:var(--water-600); margin-bottom:14px; transition:background .2s, color .2s, transform .2s var(--ease); } .svc-card .ico svg{ width:30px; height:30px; } .svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--sky-line); } .svc-card:hover .ico{ background:var(--water); color:#fff; transform:scale(1.06) rotate(-4deg); } .svc-card .more{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family:var(--f-head); font-weight:700; color:var(--water-600); } .svc-card .more svg{ width:18px; height:18px; transition:transform .2s var(--ease); } .svc-card:hover .more svg{ transform:translateX(4px); } /* feature tiles (why us) */ .feature{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); display:flex; gap:16px; align-items:flex-start; } .feature .ico{ width:48px; height:48px; border-radius:12px; background:var(--navy); color:#fff; flex:none; display:flex; align-items:center; justify-content:center; } .feature .ico svg{ width:26px; height:26px; } .feature h3{ margin:0 0 .25em; font-size:1.3rem; } .feature p{ margin:0; color:var(--ink-soft); font-size:1rem; } /* ===================================================================== Bands (tinted / navy) ===================================================================== */ .band-soft{ background:var(--sky); } .band-muted{ background:var(--muted); } .band-navy{ background:var(--navy); color:#dfeaf6; position:relative; overflow:hidden; } .band-navy h2,.band-navy h3{ color:#fff; } .band-navy .lead{ color:#c7dcf1; } /* .contact-line is reused on paper AND on navy. Its label is hardcoded var(--navy), which lands navy-on-navy here (contrast 1.00 — invisible, and it still occupies a line, so the link below it reads as misaligned with the icon). */ .band-navy .contact-line b{ color:#fff; } /* patriotic discount band */ .discount{ background:linear-gradient(160deg,#0c2444,#10294A 60%,#0A1C33); color:#fff; position:relative; overflow:hidden; } .discount::before{ content:""; position:absolute; inset:0; opacity:.5; background-image: radial-gradient(2px 2px at 15% 40%, rgba(255,255,255,.5), transparent 60%), radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,.4), transparent 60%), radial-gradient(2px 2px at 74% 30%, rgba(255,255,255,.5), transparent 60%), radial-gradient(2px 2px at 88% 66%, rgba(255,255,255,.35), transparent 60%); } .discount .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; } .discount .shield{ width:88px; height:88px; flex:none; color:#fff; } .discount h2{ color:#fff; margin:0 0 .2em; } .discount p{ color:#cfe0f2; margin:0; font-size:1.12rem; } @media (max-width:820px){ .discount .wrap{ grid-template-columns:1fr; text-align:center; justify-items:center; } } /* ===================================================================== Service area ===================================================================== */ .area-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; } .city-list{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; } .city{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:11px 16px; font-family:var(--f-head); font-weight:600; font-size:1.06rem; color:var(--navy); box-shadow:var(--shadow-sm); transition:transform .18s var(--ease), border-color .18s; } .city svg{ width:18px; height:18px; color:var(--red); } .city:hover{ transform:translateY(-3px); border-color:var(--water); } .map-card{ background:var(--navy); border-radius:var(--radius-lg); padding:0; box-shadow:var(--shadow); overflow:hidden; } .map-card svg{ width:100%; height:auto; display:block; } .map-card img.map-img{ width:100%; height:auto; display:block; } .map-svg .city-label{ font-family:'Barlow', sans-serif; font-weight:600; font-size:13px; fill:#e2edf9; paint-order:stroke; stroke:#091a30; stroke-width:3.5px; stroke-linejoin:round; } .map-svg .city-label.home{ fill:#fff; font-weight:700; } .map-svg .pin-pulse{ transform-box:fill-box; transform-origin:center; } @media (prefers-reduced-motion:no-preference){ .map-svg .pin-pulse{ animation:pinpulse 2.6s ease-out infinite; } } @keyframes pinpulse{ 0%{ transform:scale(.5); opacity:.85; } 100%{ transform:scale(2.7); opacity:0; } } /* ===================================================================== FAQ ===================================================================== */ .faq{ max-width:820px; margin:0 auto; } .faq details{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:14px; box-shadow:var(--shadow-sm); overflow:hidden; } .faq summary{ list-style:none; cursor:pointer; padding:20px 56px 20px 22px; position:relative; font-family:var(--f-head); font-weight:700; font-size:1.22rem; color:var(--navy); } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:""; position:absolute; right:22px; top:50%; width:14px; height:14px; margin-top:-7px; border-right:3px solid var(--water); border-bottom:3px solid var(--water); transform:rotate(45deg); transition:transform .2s var(--ease); } .faq details[open] summary::after{ transform:rotate(225deg); } .faq .faq-a{ padding:0 22px 20px; color:var(--ink-soft); } .faq .faq-a p{ margin:0; } /* ===================================================================== Real results gallery ===================================================================== */ .result-grid{ gap:24px; } .result{ margin:0; border-radius:var(--radius); overflow:hidden; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease); } .result:hover{ transform:translateY(-5px); box-shadow:var(--shadow); } .result .shot{ position:relative; display:block; } .result img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; } .result .compare{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px; font-family:var(--f-head); font-weight:700; font-size:.8rem; color:#fff; background:rgba(16,28,51,.82); padding:5px 12px; border-radius:999px; box-shadow:0 3px 10px rgba(0,0,0,.3); pointer-events:none; } .result .compare svg{ width:15px; height:15px; color:#7fc0f4; } .result .compare.done{ background:var(--water); } .result .compare.done svg{ color:#fff; } .result figcaption{ padding:15px 18px; font-family:var(--f-head); font-weight:600; color:var(--navy); font-size:1.06rem; } .result-ph{ width:100%; aspect-ratio:1/1; display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:linear-gradient(160deg,#12315a,#0a1c33); color:#7fc0f4; } .result-ph svg{ width:42px; height:42px; } .result-ph span{ font-family:var(--f-head); font-weight:600; color:#cfe0f2; font-size:.95rem; } /* ===================================================================== Testimonials ===================================================================== */ .quote{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; } .quote .stars{ display:inline-flex; gap:3px; color:#f4b740; margin-bottom:12px; } .quote .stars svg{ width:20px; height:20px; } .quote p{ color:var(--ink); font-size:1.08rem; } .quote .who{ margin-top:auto; display:flex; align-items:center; gap:12px; padding-top:14px; } .quote .who .av{ width:44px; height:44px; border-radius:999px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--f-head); font-weight:700; } .quote .who b{ color:var(--navy); font-family:var(--f-head); } .quote .who span{ color:var(--ink-soft); font-size:.95rem; display:block; } .sample-note{ text-align:center; color:var(--ink-soft); font-size:.95rem; margin-top:18px; } /* ===================================================================== Contact / form ===================================================================== */ .form-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(24px,4vw,38px); box-shadow:var(--shadow); } .field{ margin-bottom:16px; } .field label{ display:block; font-family:var(--f-head); font-weight:600; color:var(--navy); margin-bottom:6px; } .field label .req{ color:var(--red); } .field input,.field select,.field textarea{ width:100%; font-family:var(--f-body); font-size:16px; color:var(--ink); padding:14px 15px; border:1.5px solid var(--border); border-radius:11px; background:#fff; min-height:52px; transition:border-color .15s, box-shadow .15s; } .field textarea{ min-height:120px; resize:vertical; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--water); box-shadow:var(--ring); } .field .help{ font-size:.9rem; color:var(--ink-soft); margin-top:5px; } /* Off-screen honeypot: humans never see it; field-filler bots fill it and Netlify rejects them. */ .recaptcha-field{ margin-top:4px; } .hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; } .field .err{ display:none; color:var(--red-dark); font-size:.92rem; font-weight:600; margin-top:5px; } .field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:var(--red); } .field.invalid .err{ display:block; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .form-status{ display:none; padding:14px 16px; border-radius:11px; margin-bottom:16px; font-weight:600; } .form-status.ok{ display:block; background:#e8f6ee; color:#1c7a45; border:1px solid #bfe6cf; } .form-status.err{ display:block; background:#fdeaec; color:#a50d26; border:1px solid #f4c6cd; } .contact-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:start; } .contact-grid > *{ min-width:0; } .contact-lines{ display:flex; flex-direction:column; gap:14px; margin:22px 0; } .contact-line span{ min-width:0; overflow-wrap:anywhere; } .contact-line a{ overflow-wrap:anywhere; word-break:break-word; } .contact-line{ display:flex; gap:14px; align-items:flex-start; } .contact-line .ico{ width:46px; height:46px; border-radius:12px; background:var(--sky); color:var(--water-600); flex:none; display:flex; align-items:center; justify-content:center; } .contact-line .ico svg{ width:24px; height:24px; } .contact-line b{ font-family:var(--f-head); color:var(--navy); font-size:1.12rem; } .contact-line a{ font-size:1.12rem; } /* ===================================================================== Footer + sticky mobile call bar ===================================================================== */ .footer{ background:var(--navy-900); color:#a9c1da; padding:56px 0 26px; } .footer h3{ color:#fff; font-size:1.15rem; margin-bottom:14px; } .footer a{ color:#cfe0f2; } .footer a:hover{ color:#fff; } .foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:34px; } .foot-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; } .foot-brand .bname{ font-family:var(--f-display); color:#fff; font-size:1.6rem; } /* The logo art is built for light backgrounds: its "PRESSURE WASHING" is navy and vanishes on --navy-900. The nav (white) carries the real mark; the footer uses type. */ .foot-brand p{ color:#9db6d2; margin-top:10px; max-width:34ch; } .foot-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:38px; padding-top:20px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.92rem; color:#8fabc8; } .callbar{ display:none; } @media (max-width:720px){ .callbar{ display:grid; grid-template-columns:1fr 1fr; gap:0; position:fixed; left:0; right:0; bottom:0; z-index:60; box-shadow:0 -8px 24px rgba(10,28,51,.22); } /* Hero already has Call/Text CTAs, so the bar stays out of the way until you scroll past it. Scoped to .js so a script failure never hides the primary conversion path. */ .js .callbar{ transform:translateY(100%); transition:transform .3s var(--ease); will-change:transform; } .js .callbar.show{ transform:translateY(0); } .callbar a{ display:flex; align-items:center; justify-content:center; gap:8px; padding:15px; font-family:var(--f-head); font-weight:700; font-size:1.1rem; color:#fff; min-height:56px; } .callbar a svg{ width:20px; height:20px; } .callbar .call{ background:var(--red); } .callbar .text{ background:var(--water-600); } body{ padding-bottom:56px; } } /* ===================================================================== Interior page header ===================================================================== */ .pagehero{ position:relative; overflow:hidden; color:#eaf3fc; padding:clamp(40px,6vw,72px) 0 clamp(44px,6vw,72px); background: radial-gradient(1000px 460px at 84% -20%, rgba(28,127,214,.34), transparent 60%), linear-gradient(160deg,#0c2444,#10294A 60%,#0A1C33); } .pagehero::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), transparent 60%), radial-gradient(2px 2px at 60% 66%, rgba(255,255,255,.4), transparent 60%), radial-gradient(2px 2px at 86% 40%, rgba(255,255,255,.5), transparent 60%); } .pagehero .wrap{ position:relative; z-index:2; } .pagehero::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:min(56%,760px); z-index:1; background-image:var(--hero-img,none); background-size:cover; background-position:center; -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 58%); mask-image:linear-gradient(to right, transparent 0%, #000 58%); opacity:.5; pointer-events:none; } .pagehero h1{ color:#fff; margin-bottom:.3em; max-width:16ch; } .pagehero .lead{ color:#c7dcf1; max-width:56ch; } .pagehero .hero-cta{ margin-top:24px; } @media (max-width:820px){ .pagehero::after{ display:none; } } .crumbs{ display:flex; gap:8px; align-items:center; font-size:.95rem; color:#9db6d2; margin-bottom:18px; flex-wrap:wrap; } .crumbs a{ color:#cfe0f2; } .crumbs a:hover{ color:#fff; } .crumbs span{ color:#7893b3; } /* service detail rows */ .svc-detail{ display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:center; padding:clamp(30px,5vw,54px) 0; border-bottom:1px solid var(--border); } .svc-detail:last-child{ border-bottom:0; } .svc-detail.flip .svc-visual{ order:-1; } .svc-detail h2{ margin-bottom:.35em; } .svc-detail .block > p{ color:var(--ink-soft); font-size:1.1rem; } .svc-visual{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:5px solid #fff; aspect-ratio:4/3; background:var(--navy); position:relative; } .svc-visual svg{ width:100%; height:100%; display:block; } .svc-visual img{ width:100%; height:100%; object-fit:cover; display:block; } .checklist{ list-style:none; padding:0; margin:14px 0 22px; display:grid; gap:10px; } .checklist li{ display:flex; gap:11px; align-items:flex-start; color:var(--ink); } .checklist li svg{ width:22px; height:22px; color:var(--water); flex:none; margin-top:2px; } @media (max-width:820px){ .svc-detail{ grid-template-columns:1fr; gap:22px; } .svc-detail.flip .svc-visual{ order:0; } } /* prose block for about / long text */ .prose{ max-width:760px; } .prose p{ font-size:1.12rem; color:var(--ink); } .prose h2{ margin-top:1.4em; } /* About: story + owner photo, side by side */ .owner-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:46px; align-items:start; } .owner-grid > *{ min-width:0; } .owner-grid .prose{ max-width:none; } .owner-photo{ margin:0; } .owner-photo img{ width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow); border:5px solid #fff; } .owner-photo figcaption{ margin-top:12px; text-align:center; font-family:var(--f-head); font-weight:600; color:var(--navy); font-size:1.05rem; } @media (max-width:860px){ .owner-grid{ grid-template-columns:1fr; gap:30px; } .owner-photo{ max-width:420px; margin:0 auto; } } .value-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:10px; } @media (max-width:720px){ .value-row{ grid-template-columns:1fr; } } /* ===================================================================== Utility ===================================================================== */ .mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; } .js .rise{ transform:translateY(18px); } .js .rise.in{ transform:none; transition:transform .6s var(--ease); } @media (prefers-reduced-motion:reduce){ .js .rise{ opacity:1; transform:none; } .js .rise.in{ transition:none; } } /* ===================================================================== Responsive ===================================================================== */ @media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; gap:34px; } .hero-copy{ max-width:none; } .grid.cols-4{ grid-template-columns:repeat(2,1fr); } .area-grid{ grid-template-columns:1fr; gap:30px; } .contact-grid{ grid-template-columns:1fr; gap:30px; } .foot-grid{ grid-template-columns:1fr 1fr; gap:26px; } } @media (max-width:640px){ body{ font-size:16px; } .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr; } .grid.cols-4{ grid-template-columns:1fr 1fr; } .form-row{ grid-template-columns:1fr; } .foot-grid{ grid-template-columns:1fr; } .hero-cta .btn{ width:100%; } } /* ===================================================================== Reduced motion: honor the OS setting globally ===================================================================== */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }