/* ============================================================================= Above All Garage Door Service, stylesheet. Design notes, so the choices are not a mystery later: - Three palettes live in this one file. The page picks one with . Everything is driven by custom properties, so a palette swap never touches a layout rule. - Backgrounds alternate white and a soft tint. Large blocks of near black navy read as heavy and cheap on a phone, so the dark navy is now reserved for the header, the footer and one call to action band per page. - Cards are white with a hairline border and a soft shadow, not solid colour blocks. Photos sit on top, text below, which is what a service business page is expected to look like. - Every colour pair in here was checked for WCAG AA contrast at its real font size. The old red on navy and slate on navy combinations failed. ============================================================================= */ /* ---------- 1. PALETTES, all three are light ---------- */ /* The dark hero and the near black footer were what made the page feel heavy. Both are light now. The only saturated colour left is the call to action, so the eye still knows where to go. */ :root{ /* C, Bright Navy. The existing brand colours, opened up. */ --ink:#12395f; /* headings */ --ink-soft:#41556b; /* body text */ --ink-faint:#556b7a; /* captions */ --brand:#1668b8; /* primary, bright blue */ --brand-deep:#0d4a86; /* hover, top bar */ --brand-tint:#e8f2fd; /* hero wash, icon chips */ --cta:#d5342f; /* calls and quotes only */ --cta-dark:#b0231f; --good:#1e7a4c; --star:#9c650b; --surface:#ffffff; --surface-alt:#f4f9ff; --footer-bg:#eef5fc; --line:#dae6f2; --line-strong:#bdd0e4; --shadow:0 1px 2px rgba(18,57,95,.05),0 8px 22px rgba(18,57,95,.07); --shadow-lift:0 2px 5px rgba(18,57,95,.07),0 18px 40px rgba(18,57,95,.13); --r-sm:8px; --r:14px; --r-lg:20px; --r-pill:999px; --wrap:1180px; --gut:24px; --tap:44px; } body[data-theme=a]{ /* A, Warm Sand. Cream wash, warm red. Softest of the three. */ --ink:#243447; --ink-soft:#4a5464; --ink-faint:#666f7e; --brand:#2c6ea3; --brand-deep:#1e5480; --brand-tint:#fdf2e6; --cta:#c04122; --cta-dark:#9c3319; --good:#2c7550; --star:#9c650b; --surface:#ffffff; --surface-alt:#fdf7f0; --footer-bg:#fbf3e9; --line:#eee3d5; --line-strong:#dbcbb6; --shadow:0 1px 2px rgba(60,45,30,.05),0 8px 22px rgba(60,45,30,.08); --shadow-lift:0 2px 5px rgba(60,45,30,.07),0 18px 40px rgba(60,45,30,.14); } body[data-theme=b]{ /* B, Fresh Mint. Coolest and lightest, orange call to action. */ --ink:#11454a; --ink-soft:#3f5457; --ink-faint:#5a6d70; --brand:#0d7a76; --brand-deep:#095e5b; --brand-tint:#e3f6f3; --cta:#c9491f; --cta-dark:#a63b18; --good:#1e7a5a; --star:#9c650b; --surface:#ffffff; --surface-alt:#f1fbf9; --footer-bg:#e8f7f4; --line:#d5eae6; --line-strong:#b4d8d2; --shadow:0 1px 2px rgba(17,69,74,.05),0 8px 22px rgba(17,69,74,.08); --shadow-lift:0 2px 5px rgba(17,69,74,.07),0 18px 40px rgba(17,69,74,.13); } /* ---------- 2. FONTS, the ones already on the server ---------- */ @font-face{font-family:THICCCBOI;src:url('/fonts/THICCCBOI-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:THICCCBOI;src:url('/fonts/THICCCBOI-Medium.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:THICCCBOI;src:url('/fonts/THICCCBOI-Bold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:THICCCBOI;src:url('/fonts/THICCCBOI-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap} /* ---------- 3. RESET ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--surface);color:var(--ink-soft); font-family:THICCCBOI,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:17px;line-height:1.65;font-weight:500;-webkit-font-smoothing:antialiased; } img,svg,video{max-width:100%;height:auto;display:block} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{color:var(--ink);font-weight:800;line-height:1.18;margin:0 0 14px;letter-spacing:-.015em} h1{font-size:clamp(31px,4.6vw,52px)} h2{font-size:clamp(26px,3.1vw,38px)} h3{font-size:clamp(19px,1.6vw,23px);letter-spacing:-.01em} h4{font-size:18px;letter-spacing:0} p{margin:0 0 16px} ul,ol{margin:0 0 16px;padding-left:22px} li{margin-bottom:9px} a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} a:hover{color:var(--cta)} .nav a,.btn,.card,.chip,.brand,.tile-more,.footer-nav a,.topbar a,.callbar a{text-decoration:none} /* ---------- 4. ACCESSIBILITY PLUMBING ---------- */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cta);color:#fff; padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:700} .skip:focus{left:0} :focus-visible{outline:3px solid var(--cta);outline-offset:2px;border-radius:3px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- 5. LAYOUT ---------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .sec{padding:clamp(52px,6vw,88px) 0} .sec--alt{background:var(--surface-alt)} .sec--tint{background:var(--brand-tint)} .sec--dark{background:var(--brand-deep);color:#eaf3fb} .sec--dark h2,.sec--dark h3{color:#fff} .sec--dark p,.sec--dark li{color:#d3dde7} .sec--tight{padding:clamp(34px,3.4vw,48px) 0} .center{text-align:center} .narrow{max-width:760px} .narrow.center{margin-left:auto;margin-right:auto} .grid{display:grid;gap:22px} @media(min-width:640px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}} @media(min-width:980px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}} .lede{font-size:19px;color:var(--ink-soft);max-width:70ch} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800; letter-spacing:.10em;text-transform:uppercase;color:var(--cta-dark);margin:0 0 14px} .sec--dark .eyebrow,.band .eyebrow{color:#ffd98a} .eyebrow::before{content:"";width:22px;height:2px;background:currentColor;display:inline-block} /* ---------- 6. TOP BAR ---------- */ .topbar{background:var(--brand-deep);color:#fff;font-size:14.5px} .topbar .wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between; min-height:40px;padding-top:5px;padding-bottom:5px} .topbar a{color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:7px; min-height:26px;justify-content:center} .topbar a:hover{color:#ffcf6b} .topbar svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto} .topbar .meta{color:#dbe9f7;display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center} /* ---------- 7. HEADER ---------- */ .navbar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60} .navbar .wrap{display:flex;align-items:center;gap:18px;min-height:74px} .brand{margin-right:auto;display:flex;align-items:center} .brand img{width:auto;max-height:52px} .nav{display:none} .nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0} .nav li{margin:0} .nav a{color:var(--ink);font-weight:700;font-size:15.5px;padding:10px 13px;border-radius:var(--r-sm); display:block;min-height:var(--tap);line-height:24px} .nav a:hover{background:var(--surface-alt);color:var(--brand)} /* colour alone must not be the only cue for the current page, and small red text on the tinted chip needed the darker red to clear 4.5:1 */ .nav a[aria-current=page]{color:var(--cta-dark);background:var(--surface-alt); box-shadow:inset 0 -3px 0 var(--cta)} .hdr-cta{display:none} .nav-toggle{display:inline-flex;align-items:center;gap:9px;background:var(--brand);color:#fff; border:0;border-radius:var(--r-sm);font-weight:800;padding:11px 16px;min-height:var(--tap);cursor:pointer} .nav-toggle:hover{background:var(--brand-deep)} @media(min-width:1000px){.nav,.hdr-cta{display:block}.nav-toggle{display:none}} .nav[data-open=true]{display:block;position:absolute;left:0;right:0;top:100%;background:var(--surface); border-bottom:1px solid var(--line);box-shadow:var(--shadow-lift)} .nav[data-open=true] ul{flex-direction:column;gap:0;padding:8px var(--gut) 16px} .nav[data-open=true] a{padding:14px 4px;border-bottom:1px solid var(--line);border-radius:0;font-size:17px} /* ---------- 8. BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--tap); padding:14px 24px;border-radius:var(--r-pill);font-weight:800;font-size:16px;border:2px solid transparent; transition:transform .12s ease,background .15s ease,box-shadow .15s ease} .btn svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto} .btn:hover{transform:translateY(-1px)} .btn--cta{background:var(--cta);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.16)} .btn--cta:hover{background:var(--cta-dark);color:#fff} .btn--brand{background:var(--brand);color:#fff} .btn--brand:hover{background:var(--brand-deep);color:#fff} .btn--outline{background:transparent;color:var(--brand);border-color:var(--line-strong)} .btn--outline:hover{background:var(--surface-alt);color:var(--brand)} .sec--dark .btn--outline,.band .btn--outline{color:#fff;border-color:rgba(255,255,255,.6)} .sec--dark .btn--outline:hover,.band .btn--outline:hover{background:rgba(255,255,255,.16);color:#fff} .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 8px} .btn-row.center{justify-content:center} /* ---------- 9. HERO, photo behind the headline with a half fade over it ------ */ /* Back to the first version: the photo fills the whole section and the headline sits straight on it. The difference is that the fade now covers the ENTIRE image at one strength instead of being strong on the left and clear on the right. Half strength white, so the picture is plainly visible and the headline still measures about 7:1 against it even over the darkest part of a photo, which is above what WCAG AA asks for. */ .hero{position:relative;background-color:var(--brand-tint); border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate} .hero-bg{position:absolute;inset:0;z-index:0;background-position:50% 45%; background-size:cover;background-repeat:no-repeat;filter:saturate(1.06) contrast(1.04); background-image:var(--h)} /* The hero picture is the biggest thing the browser paints, and it was costing about a second on a phone for two reasons: a background image is only discovered after the stylesheet has been read, and a background image cannot pick a size the way an img tag can, so a phone was downloading the desktop file. Nothing about the design changes here. Same photograph, same crop, same position, same overlay. The page hands over the same picture at three sizes and the browser takes the one that fits the screen it is on. --h1 and --h2 fall back to --h, so a photo with no smaller version on the server still shows exactly as before. The preload links in the head use these same three conditions. */ @media(max-width:640px) and (max-resolution:1.5dppx){ .hero-bg{background-image:var(--h1,var(--h))}} @media(max-width:640px) and (min-resolution:1.5dppx){ .hero-bg{background-image:var(--h2,var(--h))}} @media(min-width:641px) and (max-width:1100px) and (max-resolution:1.5dppx){ .hero-bg{background-image:var(--h2,var(--h))}} .hero::after{content:"";position:absolute;inset:0;z-index:1; background:rgba(255,255,255,.65)} .hero .wrap{position:relative;z-index:2;padding:clamp(40px,4.6vw,68px) var(--gut); text-align:center} /* one centred column, since the card that used to sit on the right is gone */ .hero-grid{display:grid;gap:32px;justify-items:center} .hero .eyebrow{justify-content:center} .hero h1{color:var(--ink);margin-bottom:14px;max-width:22ch;margin-left:auto;margin-right:auto} .hero .sub{color:var(--ink);font-size:clamp(18px,1.7vw,21px);font-weight:700; margin:0 auto 16px;max-width:44ch} /* the accent rule reads as a left edge marker, which is wrong on centred text */ .hero .lead-answer{margin-left:auto;margin-right:auto;padding-left:0;border-left:0; border-top:3px solid var(--cta);padding-top:16px} .hero .btn-row{justify-content:center} .hero--short .wrap{padding:clamp(32px,3.6vw,52px) var(--gut)} /* the quotable direct answer. Speakable points at this class, it is structural */ .lead-answer{font-size:17px;line-height:1.72;color:var(--ink-soft);max-width:62ch;margin:0 0 22px; padding-left:16px;border-left:3px solid var(--cta)} .speakable-primary{} /* the card floating over the photo: phone, hours, three facts */ .hero-card{background:var(--surface);color:var(--ink-soft);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lift)} .hero-card .in{padding:22px} .hero-card h2{font-size:20px;margin-bottom:2px} .hero-card .num{display:inline-block;font-size:29px;font-weight:800;color:var(--cta); letter-spacing:-.02em;margin:2px 0 4px;text-decoration:none} .hero-card .num:hover{color:var(--cta-dark);text-decoration:underline} .hero-card ul{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line)} .hero-card li{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin-bottom:9px} .hero-card li svg{width:18px;height:18px;fill:var(--good);flex:0 0 auto;margin-top:3px} .hero-card .hours{font-size:14.5px;color:var(--ink-faint);margin:0} /* ---------- 10. TRUST STRIP ---------- */ .trust{background:var(--surface);border-bottom:1px solid var(--line)} .trust ul{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px;list-style:none;margin:0;padding:20px 0} /* four across only when there is genuinely room, otherwise two, so no item wraps to a second line while its neighbours stay on one */ @media(min-width:1100px){.trust ul{grid-template-columns:repeat(4,1fr)}} .trust li{margin:0;display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:700;color:var(--ink)} .trust svg{flex:0 0 auto;width:20px;height:20px;fill:var(--good)} .rating-star{color:var(--star);letter-spacing:1px;font-size:15px} /* ---------- 11. CARDS ---------- */ .card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow);overflow:hidden;color:var(--ink-soft); transition:box-shadow .18s ease,transform .18s ease} a.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)} .card-img{aspect-ratio:3/2;background:var(--brand-tint)} .card-img img{width:100%;height:100%;object-fit:cover} .card-body{padding:20px 22px 22px} .card-body h3{margin-bottom:8px} .card-body p{font-size:15.5px;margin:0 0 12px;color:var(--ink-soft)} .tile-more{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:15px;color:var(--cta-dark)} .tile-more::after{content:"\203A";font-size:19px;line-height:1} .feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:24px;box-shadow:var(--shadow)} .feat .ico{width:44px;height:44px;border-radius:12px;background:var(--brand-tint); display:flex;align-items:center;justify-content:center;margin-bottom:14px} .feat .ico svg{width:23px;height:23px;fill:var(--brand)} .feat h3{font-size:19px;margin-bottom:7px} .feat p{font-size:15.5px;margin:0} .facts{display:grid;gap:18px} @media(min-width:860px){.facts{grid-template-columns:repeat(3,1fr)}} .fact{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--cta); border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow)} .fact h2{font-size:17px;margin-bottom:6px;letter-spacing:0} .fact p{margin:0;font-size:15.5px} .fact a{font-weight:700} .note{background:var(--surface-alt);border:1px solid var(--line);border-left:4px solid var(--star); border-radius:var(--r);padding:20px 22px;margin:0 0 20px} .note h3{font-size:19px;margin-bottom:7px} .note p{margin:0;font-size:15.5px} figure{margin:24px 0} figure img{border-radius:var(--r);border:1px solid var(--line)} figcaption{font-size:14px;color:var(--ink-faint);margin-top:9px} .steps{list-style:none;margin:0 0 20px;padding:0;counter-reset:s} .steps li{counter-increment:s;position:relative;padding:0 0 16px 46px;margin:0;font-size:15.5px} .steps li::before{content:counter(s);position:absolute;left:0;top:0;width:31px;height:31px; border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:15px; display:flex;align-items:center;justify-content:center} /* ---------- 12. FAQ ---------- */ .faq{max-width:860px} .faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); margin-bottom:12px;box-shadow:var(--shadow)} .faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 22px;position:relative; font-weight:800;font-size:17.5px;color:var(--ink);min-height:var(--tap)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:20px;top:50%;width:11px;height:11px; border-right:2.5px solid var(--cta);border-bottom:2.5px solid var(--cta); transform:translateY(-70%) rotate(45deg);transition:transform .18s ease} .faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)} .faq .faq-answer{padding:0 22px 20px} .faq .faq-answer p{margin:0;font-size:16px;color:var(--ink-soft)} /* ---------- 13. CITY CHIPS ---------- */ .chips{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;list-style:none;margin:0;padding:0} @media(min-width:640px){.chips{grid-template-columns:repeat(3,1fr)}} @media(min-width:980px){.chips{grid-template-columns:repeat(5,1fr)}} .chips li{margin:0} .chip{display:flex;align-items:center;justify-content:center;text-align:center;min-height:var(--tap); padding:11px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm); font-weight:700;font-size:14.5px;color:var(--ink)} .chip:hover{border-color:var(--cta);color:var(--cta)} /* ---------- 13B. BRAND WALL ---------- */ /* The equipment brands actually serviced. Real logos, on white tiles, with the brand name as alt text so a screen reader and Google both read them. */ .brands{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;list-style:none;margin:26px 0 0;padding:0} @media(min-width:640px){.brands{grid-template-columns:repeat(3,1fr)}} @media(min-width:980px){.brands{grid-template-columns:repeat(6,1fr)}} .brands li{margin:0} .brands .b{display:flex;align-items:center;justify-content:center;height:88px;padding:14px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)} .brands img{max-height:56px;width:auto;object-fit:contain} /* ---------- 14. CALL BAND ---------- */ .band{background-color:var(--brand-deep); background-image:linear-gradient(120deg,var(--brand) 0%,var(--brand-deep) 100%);color:#fff;border-radius:var(--r-lg); padding:clamp(28px,3.4vw,44px);text-align:center} .band h2{color:#fff;margin-bottom:10px} .band p{color:#d3dde7;max-width:60ch;margin:0 auto 20px} /* ---------- 15. STICKY MOBILE CALL BAR ---------- */ .callbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex; box-shadow:0 -2px 14px rgba(0,0,0,.2)} .callbar a{flex:1;text-align:center;padding:15px 8px;font-weight:800;font-size:15.5px; background:var(--cta);color:#fff;min-height:52px;display:flex;align-items:center; justify-content:center;gap:8px} .callbar a svg{width:17px;height:17px;fill:currentColor} .callbar a+a{background:var(--brand);border-left:1px solid rgba(255,255,255,.25)} @media(min-width:1000px){.callbar{display:none}} @media(max-width:999px){body{padding-bottom:52px}} /* ---------- 16. BREADCRUMBS ---------- */ .crumb{padding:12px 0;border-bottom:1px solid var(--line);background:var(--surface)} .crumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-size:14px} .crumb li{margin:0;display:inline-flex;align-items:center;min-height:24px;color:var(--ink-faint)} .crumb li+li::before{content:"/";margin-right:8px;color:var(--line-strong)} .crumb a{color:var(--brand);font-weight:600;display:inline-block;min-height:26px;padding:3px 0} /* ---------- 17. FOOTER ---------- */ .site-footer{background:var(--footer-bg);color:var(--ink-soft);border-top:1px solid var(--line)} .footer-grid{display:grid;gap:32px;padding:52px 0 26px} @media(min-width:860px){.footer-grid{grid-template-columns:1.4fr 1fr 1.2fr}} .site-footer h2,.site-footer h3{color:var(--ink);font-size:18px;margin-bottom:14px} .site-footer p,.site-footer li{color:var(--ink-soft);font-size:15px} .site-footer a{color:var(--brand-deep);font-weight:600} /* a link that is the whole list item, or the whole line, is a control and needs a 24px target. A link inside a sentence is exempt and stays inline. */ .site-footer p > a{display:inline-block;min-height:24px;padding:3px 0} main li a{display:inline-block;min-height:24px;padding:3px 0} .fact p a{display:inline-block;min-height:24px;padding:2px 0} .site-footer a:hover{color:var(--cta)} .footer-nav ul{list-style:none;margin:0;padding:0} .footer-nav li{margin-bottom:4px} .footer-nav li a{display:inline-block;min-height:24px;padding:3px 0;font-weight:500} @media(min-width:1040px){.footer-nav--2col ul{columns:2;column-gap:22px}} .social-row{display:flex;flex-wrap:wrap;gap:8px 18px} .social-row a{font-weight:700} .footer-phone{display:inline-block;font-size:23px;font-weight:800;color:var(--cta-dark);margin:6px 0} .footer-row{border-top:1px solid var(--line);padding:14px 0} .footer-row ul{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0;font-size:14.5px} .footer-bottom{border-top:1px solid var(--line);padding:16px 0 22px;font-size:14px} .footer-bottom p{color:var(--ink-faint);margin:0} /* ---------- 17B. TABLES, used by the internal AI brief ---------- */ .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow);background:var(--surface);margin:24px 0} table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:640px} th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top} th{background:var(--surface-alt);color:var(--ink);font-weight:800;font-size:14px; letter-spacing:.02em;text-transform:uppercase} tbody tr:last-child td{border-bottom:0} pre{margin:0;padding:18px;overflow-x:auto;font-size:13px;line-height:1.55; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink-soft); background:var(--surface);white-space:pre;min-width:0} /* ---------- 18. FORMS ---------- */ .form{display:grid;gap:16px;max-width:600px;background:var(--surface);border:1px solid var(--line); padding:28px;border-radius:var(--r);box-shadow:var(--shadow)} /* the honeypot field carries the hidden attribute, and display:grid on .field would otherwise override it and show the trap to real visitors */ [hidden]{display:none!important} .field{display:grid;gap:6px} .field label{font-weight:700;font-size:14px;color:var(--ink)} .field input,.field select,.field textarea{min-height:var(--tap);padding:12px; border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;width:100%;font-size:16px} .field textarea{min-height:110px;resize:vertical} .field .err{font-size:13.5px;color:var(--cta);font-weight:700} .field[data-invalid=true] input,.field[data-invalid=true] select,.field[data-invalid=true] textarea{ border-color:var(--cta)} /* ---------- 19. MOTION ---------- */ @media (prefers-reduced-motion:no-preference){ [data-reveal]{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease} [data-reveal][data-seen=false]{opacity:.001;transform:translateY(14px)} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .btn:hover,a.card:hover{transform:none} } /* ---------- 20. PRINT ---------- */ @media print{ .navbar,.topbar,.callbar,.site-footer,.btn,.nav-toggle{display:none!important} body{color:#000;font-size:12pt} .hero,.hero h1,.hero .sub,.lead-answer{color:#000!important;background:#fff!important} a::after{content:" (" attr(href) ")";font-size:.85em} } /* The round company badge on city pages, as it was on the old site. Small, and it sits next to a line of text rather than floating on its own. */ .badge-row{display:grid;gap:18px;align-items:center;justify-items:center;text-align:center} .badge-row img{width:132px;height:132px;object-fit:contain} .badge-row p{margin:0;color:var(--muted)} /* The badge stands on its own now that the paragraph under it is gone, so it stays centred at every width instead of sitting in the left column of an empty grid. */ /* Real customer quotes. A card, not a carousel: a slider hides four of five reviews behind a control nobody clicks, and Google only reads what is rendered. */ .quote{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:24px 26px;box-shadow:0 1px 2px rgba(16,32,56,.04)} .quote blockquote{margin:0} .quote blockquote p{margin:0;font-size:1.02rem;line-height:1.65} .quote figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--line); font-size:.94rem;color:var(--muted)} .quote figcaption strong{color:var(--ink)} .quote .rating-star{margin-right:8px;letter-spacing:1px} .quote--single{background:var(--surface-alt);border-color:transparent} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Job photos as small square thumbnails. Portrait phone photos in a two column grid are enormous, and four of them halfway down a page push the text nobody has read yet off the screen. Cropped square, uniform, and small. */ .thumbs{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)} @media(min-width:600px){.thumbs{grid-template-columns:repeat(3,1fr)}} @media(min-width:900px){.thumbs{grid-template-columns:repeat(5,1fr)}} .thumb{margin:0} .thumb img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block; border-radius:var(--r);border:1px solid var(--line)} .thumb figcaption{margin-top:10px;color:var(--muted);font-size:.88rem;line-height:1.5} /* The clip sits in the same row as the photographs, at the same size, so it reads as one more picture rather than as a feature. */ .thumb--vid video{width:100%;aspect-ratio:1/1;object-fit:cover;display:block; border-radius:var(--r);border:1px solid var(--line);background:#000} /* Social links are the network marks, drawn inline. A 32 pixel round chip, so the tap target clears WCAG 2.2 with room to spare, and the glyph takes the colour of the bar it sits in instead of four brand colours fighting each other. */ .social{display:inline-flex;align-items:center;gap:6px} .social a,.footer-social a{display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border-radius:50%} .social svg,.footer-social svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto} .topbar .social a{background:rgba(255,255,255,.14)} .topbar .social a:hover{background:rgba(255,255,255,.30);color:#fff} .social-row .social a{background:var(--surface-alt);color:var(--brand-deep); border:1px solid var(--line)} .social-row .social a:hover{background:var(--brand-deep);color:#fff} /* The owner, next to the paragraph about him, rather than a photo floating on its own. On a phone the picture goes first, because it is the thing that earns the paragraph. */ .owner-grid{display:grid;gap:26px;margin-top:24px} @media(min-width:820px){.owner-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start;gap:34px}} .owner-photo{margin:0} .owner-photo img{width:100%;height:auto;display:block;border-radius:var(--r); border:1px solid var(--line)} .owner-photo figcaption{margin-top:10px;color:var(--muted);font-size:.9rem} .owner-copy p:first-child{margin-top:0} /* The coverage map: a real OpenStreetMap render of the Valley with the cities drawn over it. The SVG sits on top of the image and shares its coordinate system, so a dot lands on its town at every screen width. */ .cov-wrap{position:relative;margin-top:24px;border-radius:var(--r);overflow:hidden; border:1px solid var(--line);background:var(--surface-alt);line-height:0} .cov-base{display:block;width:100%;height:auto} .cov{position:absolute;inset:0;width:100%;height:100%} .cov .ring{fill:rgba(22,104,184,.13);stroke:#1668b8;stroke-width:3.5; stroke-dasharray:14 9;stroke-linecap:round} .cov .city{fill:#1668b8;stroke:#fff;stroke-width:2.5;opacity:.95} .cov circle.base{fill:#d5342f;stroke:#fff;stroke-width:3.5} .cov .lbl{font:700 19px/1 system-ui,-apple-system,'Segoe UI',sans-serif;fill:#12324f; paint-order:stroke;stroke:#fff;stroke-width:4;stroke-linejoin:round} .cov .lbl.base{font-size:22px;fill:#a3231f;stroke-width:5} .cov .scale line{stroke:#12324f;stroke-width:2.5} .cov .scale text{font:700 17px/1 system-ui,-apple-system,'Segoe UI',sans-serif;fill:#12324f} .cov .scale-bg{fill:rgba(255,255,255,.82)} .cov-note{margin-top:14px;color:var(--muted);font-size:.95rem;line-height:1.6} .cov-note a{color:var(--muted);text-decoration:underline} /* On a phone the image scales to about a third, so a 19 unit label would render at six real pixels. The labels come off and the city links underneath do the naming. */ @media(max-width:700px){.cov .lbl{display:none}.cov .scale{display:none}}