/* Traderoute theme — neutral base. White background, near-black type, ONE accent color set per market via --accent in the page . Nothing here knows about a city or a trade. Two jobs: make the phone number obvious, make the form easy. */ :root{ /* Modelled on fresnostucco.com — a working lead-gen operator network. Warm off-white ground, amber CTA, Inter body with a display face for headings. */ --accent:#b45309; --accent-d:#92400e; --accent-soft:#fdf3e8; --cta:var(--accent); --cta-h:var(--accent-d); --ink:#1a1a1a; --body:#4a5568; --soft:#7b8494; --line:#e5e0d8; --bg:var(--ground,#f8f6f3); /* per-site ground, injected in */ --bg2:#fff; --maxw:1140px; --r:var(--radius,6px); --sans:var(--bodyfont,Inter),system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink); background:var(--bg);-webkit-font-smoothing:antialiased;padding-bottom:64px} img{max-width:100%;height:auto;display:block} a{color:var(--accent)} h1,h2,h3,h4{margin:0 0 .55em;line-height:1.2;font-weight:700;letter-spacing:-.02em} h1{font-size:clamp(1.9rem,5vw,2.7rem)} h2{font-size:clamp(1.35rem,3vw,1.75rem);margin-top:0} h3{font-size:1.08rem} p{margin:0 0 1.1em} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} .narrow{max-width:720px} section{padding:clamp(40px,6vw,60px) 0} .alt{background:var(--bg2)} .skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:12px 18px;z-index:300} .skip:focus{left:0;top:0} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- top strip ---------- */ .topbar{background:var(--bg2);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--soft)} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px; min-height:38px;flex-wrap:wrap;padding-block:7px} .topbar a{color:var(--ink);font-weight:600;text-decoration:none} /* ---------- header ---------- */ header.site{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)} .bar{display:flex;align-items:center;gap:14px;min-height:68px} .logo{display:flex;flex-direction:column;justify-content:center;margin-right:auto; text-decoration:none;color:var(--ink);line-height:1.15} .logo b{font-size:clamp(1rem,3.4vw,1.18rem);font-weight:700;letter-spacing:-.02em} .logo span{font-size:12px;color:var(--soft);font-weight:500} .navtoggle{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line); color:var(--ink);font:inherit;font-weight:600;font-size:14px;padding:11px 14px;border-radius:var(--r); cursor:pointer;min-height:46px} .nav{display:none} .nav.open{display:block;position:absolute;left:0;right:0;top:100%;background:#fff; border-bottom:1px solid var(--line);box-shadow:0 12px 28px rgba(0,0,0,.08); max-height:74vh;overflow:auto;padding-bottom:10px} .nav ul{list-style:none;margin:0;padding:0} .nav .grp{padding:15px 20px 4px;font-size:12px;color:var(--soft);font-weight:600} .nav a{display:block;padding:12px 20px;color:var(--body);text-decoration:none;font-weight:500;font-size:16px} .nav a:hover,.nav a[aria-current="page"]{color:var(--accent);background:var(--bg2)} .bar .hdr-cta{display:none} @media(min-width:1000px){ .bar .navtoggle{display:none} .nav{display:block!important;position:static;max-height:none;overflow:visible; border:0;box-shadow:none;padding:0} .nav>ul{display:flex;align-items:center;gap:2px} .nav .grp{display:none} .nav li{position:relative} .nav a{padding:9px 12px;font-size:15px;border-radius:var(--r)} .nav .has-sub>.sub{display:none;position:absolute;top:100%;left:0;background:#fff; border:1px solid var(--line);border-radius:var(--r);min-width:280px;padding:6px 0;z-index:60; box-shadow:0 14px 34px rgba(0,0,0,.11)} .nav .has-sub:hover>.sub,.nav .has-sub:focus-within>.sub{display:block} .nav .sub a{font-size:15px;padding:9px 16px;border-radius:0} .bar .hdr-cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff; text-decoration:none;padding:12px 20px;border-radius:var(--r);font-weight:700;white-space:nowrap} .bar .hdr-cta small{display:none} .bar .hdr-cta b{font-size:16.5px;font-weight:700} } /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 24px; font-family:inherit;font-size:16px;font-weight:650;text-decoration:none;border:1px solid transparent; border-radius:var(--r);cursor:pointer;min-height:52px;transition:background .13s ease,border-color .13s ease} .btn-primary{background:var(--ink);color:#fff} .btn-primary:hover{background:#000} .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--ink)} .btn-lg{padding:17px 30px;font-size:17px;min-height:56px} .btn-block{width:100%} /* ---------- hero ---------- */ .hero{background:#fff;border-bottom:1px solid var(--line)} .hero .wrap{display:grid;gap:32px;padding-top:clamp(30px,5vw,48px);padding-bottom:clamp(34px,5vw,52px)} .hero h1{margin-bottom:.4em} .eyebrow{display:inline-block;color:var(--accent);font-size:13px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px} .lede{font-size:clamp(1.02rem,2vw,1.14rem);color:var(--body);max-width:38em} .hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0} .plainline{color:var(--soft);font-size:14.5px;margin:18px 0 0} .specs{display:grid;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line); grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .specs b{display:block;font-size:15px;font-weight:650;color:var(--ink)} .specs span{font-size:14px;color:var(--soft)} @media(min-width:980px){ .hero .wrap{grid-template-columns:1.05fr .95fr;gap:44px;align-items:start} } /* ---------- images ---------- */ .shot{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--bg2)} .shot.wide{aspect-ratio:16/9;object-fit:cover} .card .shot{aspect-ratio:16/10;object-fit:cover;border-radius:0} .ph{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;text-align:center; padding:16px;font-size:12px;font-weight:600;color:var(--soft);background:var(--bg2); border:1px dashed var(--line);border-radius:var(--r)} .ph.wide{aspect-ratio:16/9} /* ---------- section heads ---------- */ .sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-bottom:22px} .sechead h2{margin:0} .sechead a{color:var(--accent);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap} /* ---------- cards ---------- */ .grid{display:grid;gap:16px} @media(min-width:620px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}} @media(min-width:940px){.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}} .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;overflow:hidden} .card h3{margin-bottom:.3em} .card p{color:var(--body);font-size:15px;margin-bottom:.7em} .card .more{color:var(--accent);font-weight:600;font-size:15px;text-decoration:none} .card .more::after{content:" →"} a.card{display:block;text-decoration:none;color:inherit} a.card:hover{border-color:var(--ink)} .card .shot,.card .ph{margin:-20px -20px 16px;width:calc(100% + 40px);max-width:none} /* ---------- process ---------- */ .steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:16px} @media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}} .steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px} .steps li::before{content:counter(s);display:flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent); font-weight:700;font-size:14px;margin-bottom:10px} .steps b{display:block;margin-bottom:3px} .steps span{color:var(--soft);font-size:15px} .ticks{list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:9px} .ticks li{padding-left:26px;position:relative;color:var(--body)} .ticks li::before{content:"";position:absolute;left:1px;top:.52em;width:13px;height:7px; border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)} .arealist{list-style:none;padding:0;margin:0;display:grid;gap:8px;grid-template-columns:repeat(2,1fr)} @media(min-width:760px){.arealist{grid-template-columns:repeat(4,1fr)}} .arealist a{display:block;padding:12px 14px;background:#fff;border:1px solid var(--line); border-radius:var(--r);text-decoration:none;color:var(--body);font-weight:500;font-size:15px} .arealist a:hover{border-color:var(--ink);color:var(--ink)} /* ---------- FAQ ---------- */ .faq details{border-bottom:1px solid var(--line)} .faq details:first-child{border-top:1px solid var(--line)} .faq summary{cursor:pointer;padding:17px 40px 17px 0;font-weight:650;list-style:none;position:relative;font-size:17px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%); font-size:24px;color:var(--soft);font-weight:400;line-height:1} .faq details[open] summary::after{content:"–"} .faq details p{margin:0 0 17px;color:var(--body)} /* ---------- quote form ---------- */ .quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px} .hero .quote{box-shadow:0 2px 6px rgba(0,0,0,.04)} .quote h3{font-size:1.18rem;margin-bottom:.15em} .quote .sub{color:var(--soft);font-size:14.5px;margin-bottom:18px} .progress{display:flex;gap:5px;margin-bottom:18px} .progress i{flex:1;height:3px;border-radius:99px;background:var(--line)} .progress i.on{background:var(--accent)} .step{display:none} .step.on{display:block} .field{margin-bottom:15px} .field label{display:block;font-weight:650;font-size:15px;margin-bottom:6px} .field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid var(--line); border-radius:var(--r);font:inherit;font-size:16px;background:#fff;color:var(--ink);min-height:50px} .field textarea{min-height:104px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none; box-shadow:0 0 0 3px var(--accent-soft)} .field .err{display:none;color:#b3261e;font-size:14px;margin-top:5px} .field.bad input,.field.bad select{border-color:#b3261e} .field.bad .err{display:block} .opts{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)} .opts label{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r); padding:12px;cursor:pointer;font-weight:500;font-size:15px;background:#fff;min-height:50px} .opts input{width:auto;min-height:0;margin:0;accent-color:var(--accent)} .opts label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)} .hp{position:absolute!important;left:-9999px!important} .formnav{display:flex;gap:8px;margin-top:4px} .formnav .btn{flex:1;padding-inline:14px} .fineprint{font-size:13.5px;color:var(--soft);line-height:1.5;margin:14px 0 0} .thanks{display:none;text-align:center;padding:26px 6px} .thanks.on{display:block} .thanks .big{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent); display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:26px;font-weight:700} /* ---------- closing CTA ---------- */ .band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .band .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap} .band h2{margin:0 0 .2em} .band p{color:var(--body);margin:0;max-width:44em} .band .hero-cta{margin:0} /* ---------- footer ---------- */ footer.site{background:#fff;border-top:1px solid var(--line);padding:40px 0 90px;font-size:15px} footer.site .cols{display:grid;gap:26px} @media(min-width:760px){footer.site .cols{grid-template-columns:1.5fr 1fr 1fr 1fr}} footer.site h4{font-size:13px;color:var(--soft);margin:0 0 12px;font-weight:650} footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} footer.site a{color:var(--body);text-decoration:none} footer.site a:hover{color:var(--accent)} footer.site p{color:var(--soft)} .legal{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--soft);font-size:13.5px} /* ---------- sticky mobile bar: call + quote, nothing else ---------- */ .callbar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:grid;grid-template-columns:1fr 1fr; gap:1px;background:var(--line);border-top:1px solid var(--line)} .callbar a{display:flex;align-items:center;justify-content:center;min-height:60px;text-decoration:none; font-weight:650;font-size:16.5px;background:var(--ink);color:#fff} .callbar a.alt2{background:#fff;color:var(--ink)} @media(min-width:1000px){.callbar{display:none} body{padding-bottom:0}} .crumbs{font-size:14px;color:var(--soft);padding:14px 0 0} .crumbs a{color:var(--soft);text-decoration:none} .crumbs a:hover{color:var(--accent)} .prose h2{margin-top:1.7em} .prose h2:first-child{margin-top:0} .prose p,.prose li{color:var(--body)} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ---------- variant: call-first ---------- */ .hero.callfirst .wrap{grid-template-columns:1fr;text-align:center;padding-top:clamp(38px,6vw,64px); padding-bottom:clamp(38px,6vw,64px)} .hero.callfirst .mid{max-width:660px;margin:0 auto} .hero.callfirst .lede{margin-inline:auto} .bigphone{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin-top:26px; background:var(--ink);color:#fff;text-decoration:none;padding:18px 40px;border-radius:var(--r); min-width:min(100%,420px)} .bigphone span{font-size:14px;opacity:.8;font-weight:500} .bigphone b{font-size:clamp(1.6rem,6vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.15} .bigphone:hover{background:#000} /* ---------- variant: form-first ---------- */ .hero.formfirst .wrap{padding-top:clamp(26px,4vw,40px)} .hero.formfirst .intro{max-width:38em} .hero.formfirst .intro h1{font-size:clamp(1.6rem,4vw,2.15rem)} .hero.formfirst .plainline a{text-decoration:none} .hero.formfirst .plainline b{font-size:17px} @media(min-width:980px){ .hero.formfirst .wrap{grid-template-columns:.92fr 1.08fr;align-items:center} } /* ===== R2 additions — operator reference ===== */ h1,h2,h3{font-family:var(--headfont,"Exo 2"),var(--bodyfont,Inter),system-ui,sans-serif;font-weight:600} h1{font-size:clamp(1.9rem,4.6vw,2.85rem)} header.site,.card,.quote,.steps li,.arealist a{background:#fff} .alt{background:#fff} .btn{font-weight:700} .btn-primary{background:var(--cta);color:#fff} .btn-primary:hover{background:var(--cta-h)} .bigphone{background:var(--cta)} .bigphone:hover{background:var(--cta-h)} .bar .hdr-cta{background:var(--cta)} .callbar a{background:var(--cta)} .callbar a.alt2{background:#fff;color:var(--ink)} .eyebrow{color:var(--accent-d)} .trustrow{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-top:24px;padding-top:20px;border-top:1px solid var(--line)} .trustrow div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px} .trustrow b{display:block;color:var(--ink);font-size:15px} .trustrow span{font-size:13.5px;color:var(--soft)} .stars{color:#e0a800;letter-spacing:2px} /* ---------- mobile tap targets ---------- Every conversion path must be thumb-sized. Apple HIG minimum is 44px; the top-bar phone link was 22px, which is a call being dropped on a mistap. */ @media(max-width:999px){ .topbar .wrap{min-height:46px} .topbar a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:700} .logo{min-height:46px} footer.site ul a,.card .more,.sechead a,.crumbs a{display:inline-flex;align-items:center;min-height:44px} .arealist a{min-height:48px;display:flex;align-items:center} .faq summary{min-height:52px;display:flex;align-items:center} .prose a{padding-block:2px} } /* ---------- full-width hero band ---------- */ .heroband{border-bottom:1px solid var(--line);background:var(--bg2)} .heroband img{width:100%;max-width:1600px;margin:0 auto;aspect-ratio:16/7;object-fit:cover;border-radius:0} @media(max-width:700px){.heroband img{aspect-ratio:16/9}} /* ---------- blog ---------- */ .kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--accent);margin-bottom:8px} .prose .kicker{margin-bottom:12px} .card .kicker{margin-bottom:6px} /* ---------- reference list ---------- */ .reflist{list-style:none;margin:0;padding:0;display:grid;gap:8px} .reflist a{font-size:15px} @media(max-width:999px){.reflist a{display:inline-flex;align-items:center;min-height:44px}} /* Site map — dense link index, not cards */ .grid.sitemap{align-items:start;gap:32px} .grid.sitemap h2{font-size:1.05rem;margin:0 0 10px} .sitemap-list{list-style:none;margin:0;padding:0} .sitemap-list li{padding:2px 0} .sitemap-list a{display:block;padding:8px 0;min-height:24px;line-height:1.45; text-decoration:none;border-bottom:1px solid rgba(0,0,0,.06)} .sitemap-list a:hover{text-decoration:underline} /* Card grids: centre an incomplete final row. 14 services across 3 columns left two cards hanging at the left edge, which reads as a broken layout rather than a short row. A complete row fills the line exactly, so justify-content only ever moves the short last one. .sitemap keeps CSS grid - a link index should stay left-aligned for scanning. */ @media(min-width:620px){ .grid.c2:not(.sitemap),.grid.c3:not(.sitemap),.grid.c4:not(.sitemap){ display:flex;flex-wrap:wrap;justify-content:center} .grid.c2:not(.sitemap)>*,.grid.c3:not(.sitemap)>*,.grid.c4:not(.sitemap)>*{ flex:0 1 calc((100% - 16px)/2)} } @media(min-width:940px){ .grid.c3:not(.sitemap)>*{flex:0 1 calc((100% - 32px)/3)} .grid.c4:not(.sitemap)>*{flex:0 1 calc((100% - 48px)/4)} } /* Mobile: reclaim the fold. The topbar wrapped to two lines and then put the phone on a third, eating 118px of a 390x844 screen and pushing the H1 to 295px - 35% of the viewport gone before the headline. The phone number also appeared three times above the fold: topbar, hero button, and sticky call bar. Below 700px the topbar keeps only the service-area line, on one line, and drops its duplicate phone link. The sticky bar already carries the call. */ @media(max-width:700px){ .topbar{font-size:12.5px} .topbar .wrap{min-height:0;padding-block:7px;gap:0} .topbar .wrap > span{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto} .topbar a{display:none} .hero{padding-top:18px} /* keep the last content clear of the fixed call bar */ body{padding-bottom:0} .site.site-footer,footer.site{padding-bottom:78px} } /* Anchor targets must clear the sticky header. header.site is position:sticky, so #quote landed underneath it - the form's heading was hidden behind the bar the user had just tapped past. */ :target,#quote,[id]{scroll-margin-top:84px} @media(max-width:700px){:target,#quote,[id]{scroll-margin-top:72px}} html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ---- QA fixes ---- */ /* --muted and --ink-2 are referenced hundreds of times in generated markup and were defined in no stylesheet. An undefined custom property makes the whole declaration invalid, so every "muted" caption rendered at full ink instead. */ :root{--muted:var(--soft);--ink-2:var(--body)} /* The service picker forced horizontal page scroll on small phones. repeat(2,1fr) is minmax(auto,1fr), and that auto floor is the item's min-content - the longest word plus the radio - which does not shrink. minmax(0,...) lets the track shrink; one column below 420px keeps the label readable rather than merely un-overflowed. */ .opts{grid-template-columns:repeat(2,minmax(0,1fr))} .opts label{overflow-wrap:anywhere} @media(max-width:420px){.opts{grid-template-columns:1fr}} /* Long email addresses are one unbreakable run - neither @ nor . is a break opportunity - so they overflowed the contact list on a 320px screen. */ .ticks{overflow-wrap:anywhere} /* The phone number on the contact page was a 28px tap target: the ≤999px tap-target block covered every other link list but not this one. It is the page people open specifically to find the number. */ @media(max-width:999px){ .ticks a{display:inline-flex;align-items:center;min-height:44px} .sitemap-list a{min-height:44px;display:flex;align-items:center} .fineprint a[href^="tel:"]{display:inline-block;padding-block:8px} } /* Published price ranges on service pages */ .pricetable{overflow-x:auto} .pricetable table{width:100%;border-collapse:collapse;font-size:.97rem} .pricetable th,.pricetable td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .pricetable th{font-weight:600;color:var(--ink);width:58%} .pricetable td{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600} @media(max-width:520px){ .pricetable th,.pricetable td{display:block;border:0;padding:2px 0} .pricetable th{width:auto;padding-top:12px} .pricetable td{padding-bottom:12px;border-bottom:1px solid var(--line);white-space:normal} }