*{box-sizing:border-box;margin:0;padding:0} :root{--navy:#0B0D10;--navy2:#0a1830;--ink:#D8D6D0;--orange:#B026FF;--orange2:#8F1FD1;--muted:#9A978F;--line:#33383E;--soft:#000000} html{scroll-behavior:smooth} body{font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#000000;line-height:1.7;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none}img{max-width:100%;display:block} .wrap{max-width:1400px;margin:0 auto;padding:0 24px} .skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:10px;z-index:80;background:#fff;color:#F3F1EC;padding:10px 16px;border-radius:8px;font-weight:800} a:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:8px} .btn{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;font-weight:800;font-size:16.5px;padding:15px 26px;border-radius:11px;box-shadow:0 10px 28px rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s} .btn:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(0,0,0,.28)} .btn.ghost{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30);box-shadow:none;color:#fff} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--orange)} header{position:sticky;top:0;z-index:50;background:rgba(11,31,58,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)} .bar{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:14px} .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:900;font-size:19.5px}.brand img{height:38px;width:auto} .brand strong{font-size:18.5px;letter-spacing:.2px} nav.main{display:flex;align-items:center;gap:2px}nav.main>.item{position:relative} nav.main>.item>a,nav.main>.item>span{display:inline-flex;align-items:center;gap:5px;color:#cfdaeb;font-size:15.5px;font-weight:600;padding:10px 12px;border-radius:8px;cursor:pointer} nav.main>.item:hover>a,nav.main>.item:hover>span{color:#fff;background:rgba(255,255,255,.07)} .drop{position:absolute;top:100%;left:0;min-width:230px;background:#0B0D10;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px;display:none;box-shadow:0 24px 50px rgba(0,0,0,.4);max-height:70vh;overflow:auto} .drop.wide{column-count:2;column-gap:6px;min-width:430px} nav.main>.item:hover .drop{display:block} .drop a{display:block;color:#cfdaeb;font-size:15px;padding:8px 12px;border-radius:8px;break-inside:avoid} .drop a:hover{background:rgba(249,115,22,.16);color:#fff} .hcall{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:16px;background:linear-gradient(135deg,var(--orange),var(--orange2));padding:10px 16px;border-radius:10px;white-space:nowrap} .navtoggle{display:none;background:transparent;border:0;color:#fff;cursor:pointer} .hero{position:relative;color:#fff;background:var(--navy)} .hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.34} .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(11,31,58,.92),rgba(11,31,58,.62))} .hero .wrap{position:relative;padding:70px 24px 76px;max-width:880px} .hero h1{font-size:clamp(2.1rem,5vw,3.3rem);line-height:1.08;font-weight:900;letter-spacing:-.5px;margin:14px 0 16px} .hero p.sub{font-size:clamp(1.05rem,2.3vw,1.25rem);color:#dbe6f5;max-width:660px;margin-bottom:26px} .hero .ctas{display:flex;gap:14px;flex-wrap:wrap} .trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;color:#aebdd4;font-size:15px;font-weight:700} .trust span{display:inline-flex;align-items:center;gap:8px} section{padding:64px 0}.center{text-align:center;max-width:720px;margin:0 auto 46px} h2{font-size:clamp(1.6rem,3.2vw,2.1rem);font-weight:800;letter-spacing:-.3px;color:#F3F1EC} .lede{color:var(--muted);font-size:18.5px;margin-top:12px}.soft{background:var(--soft)} .content h2{font-size:26.5px;margin:36px 0 12px;color:#F3F1EC}.content h2:first-child{margin-top:0} .content p{color:#37414f;margin-bottom:14px;max-width:780px;font-size:18px} .content ul{list-style:none;margin:10px 0 24px;max-width:820px} .content li{position:relative;padding:8px 0 8px 32px;color:#2f3a4d} .content li:before{content:"";position:absolute;left:4px;top:14px;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange2))} .split{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start} .split img{border-radius:16px;box-shadow:0 20px 50px rgba(14,26,48,.18);position:sticky;top:90px} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px} .card{background:#15181C;border:1px solid var(--line);border-radius:16px;padding:24px;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;flex-direction:column;overflow:hidden} .card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(14,26,48,.13);border-color:#E0B3FF} .card .ic{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,rgba(249,115,22,.16),rgba(234,88,12,.12));display:grid;place-items:center;color:var(--orange2);margin-bottom:13px} .card h3{font-size:18.5px;color:#F3F1EC;margin-bottom:6px}.card p{color:var(--muted);font-size:15.5px} .card .go{margin-top:auto;padding-top:12px;color:var(--orange2);font-weight:800;font-size:15px} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;counter-reset:s} .faq{max-width:840px;margin:0 auto} .faq details{background:#15181C;border:1px solid var(--line);border-radius:13px;padding:2px 22px;margin-bottom:13px} .faq summary{list-style:none;cursor:pointer;font-size:18px;font-weight:700;color:#F3F1EC;padding:17px 0;position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary:after{content:"+";position:absolute;right:0;color:var(--orange);font-weight:900} .faq details[open] summary:after{content:"\2013"} .faq details p{color:#4a5568;font-size:17px;padding:0 0 18px;max-width:none} .cta-band{position:relative;background:linear-gradient(135deg,var(--navy),#13294a);color:#fff;text-align:center;border-radius:22px;padding:52px 30px;margin:0 24px;box-shadow:0 30px 70px rgba(11,31,58,.3)} .cta-band h2{color:#fff;max-width:680px;margin:0 auto 12px}.cta-band p{color:#cfdaeb;max-width:600px;margin:0 auto 22px} .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:980px;margin:0 auto} .chips a{background:#15181C;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:15px;color:#F3F1EC;font-weight:700} .chips a:hover{border-color:var(--orange);color:var(--orange2)} footer{background:#0B0D10;color:#8aa0bf;padding:50px 0 110px;margin-top:70px} footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px} footer h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px} footer a{display:block;color:#8aa0bf;padding:3px 0;font-size:15px}footer a:hover{color:#fff} footer .legal{border-top:1px solid rgba(255,255,255,.08);margin-top:28px;padding-top:18px;font-size:14.5px;color:#8aa0bf;line-height:1.7} footer .legal a{display:inline;color:#cfdaeb;font-weight:700} .crumbs{max-width:1400px;margin:0 auto;padding:16px 24px 0;font-size:14.5px;color:var(--muted)} .crumbs a{color:var(--orange2);font-weight:700} .post-hero{position:relative;color:#fff;background:var(--navy)} .post-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.30} .post-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(11,31,58,.93),rgba(11,31,58,.66))} .post-hero .wrap{position:relative;padding:50px 24px 48px;max-width:880px} .post-hero h1{font-size:clamp(1.85rem,4.2vw,2.8rem);font-weight:900;line-height:1.13;margin:12px 0 14px} .post-hero .sub{font-size:clamp(1.02rem,2.1vw,1.18rem);color:#dbe6f5;max-width:700px} .post-hero .meta{margin-top:18px;color:#aebdd4;font-size:15px;font-weight:700;display:flex;gap:10px;flex-wrap:wrap} .card.post{padding:0;overflow:hidden}.card.post .thumb{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#F3F1EC} .card.post .pad{padding:20px 22px;display:flex;flex-direction:column;flex:1} .card.post .cat{font-size:12.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--orange2);margin-bottom:7px} .card.post h3{font-size:19px;line-height:1.3;color:#F3F1EC;margin-bottom:7px}.card.post p{color:var(--muted);font-size:15.5px} .card.post .date{margin-top:auto;padding-top:13px;color:var(--muted);font-size:14px;font-weight:700} .relwrap{background:var(--soft)} #svcmap{height:440px;border-radius:16px;overflow:hidden;border:1px solid var(--line);z-index:0} .geobanner{max-width:680px;margin:0 auto 18px;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;font-weight:800;text-align:center;padding:12px 18px;border-radius:12px;font-size:16.5px;box-shadow:0 8px 22px rgba(0,0,0,.15)} .leaflet-container{font:inherit}.leaflet-popup-content{font-weight:700;color:#16203a} footer .tmrow{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);margin-top:24px;padding-top:22px;text-align:center} footer .tmbadge{display:flex;align-items:center;gap:12px}.footer .tmbadge img,footer .tmbadge img{flex:none} footer .tmcap{font-size:13.5px;color:#9fb0c8;font-weight:700;letter-spacing:.3px;text-align:left} footer .creds{font-size:14px;color:#9fb0c8;font-weight:700;display:flex;gap:16px;flex-wrap:wrap;justify-content:center} footer .creds span{display:inline-block} .callbar{display:none} @media(max-width:980px){nav.main,.bar .hcall span.lbl{display:none}.navtoggle{display:inline-flex}.split{grid-template-columns:1fr}.split img{position:static}footer .cols{grid-template-columns:1fr 1fr} nav.mobile{display:none;position:absolute;top:100%;left:0;right:0;background:#0B0D10;border-bottom:1px solid rgba(255,255,255,.1);padding:8px 0;max-height:80vh;overflow:auto} nav.mobile.open{display:block}nav.mobile a{display:block;color:#cfdaeb;padding:11px 24px;font-size:16.5px;border-bottom:1px solid rgba(255,255,255,.05)} nav.mobile .h{color:var(--orange);font-weight:800;text-transform:uppercase;font-size:12.5px;letter-spacing:1px;padding:12px 24px 4px} .callbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;font-weight:800;box-shadow:0 -4px 18px rgba(0,0,0,.35)}} @media(min-width:981px){nav.mobile{display:none}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}} #cities-lightning .card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin-bottom:13px;display:block}/* ========================================================================== A 24 Hour Locksmith — LIGHT THEME Replaces the builder's dark-neon default. Appended after site.css so the layout, spacing and components are untouched; only the surfaces change. Palette rationale for a licensed emergency trade: trust deep blue — licence, insurance, "we are a real company" urgency burnt amber — the CALL action, and only the call action The accent is reserved for the phone. If everything is orange, nothing is. Contrast (WCAG 2.2 AA, normal text needs 4.5:1): #10161F on #FFFFFF 17.4:1 #5B6675 on #FFFFFF 6.4:1 #0B4FA8 on #FFFFFF 7.6:1 #FFFFFF on #C2410C 5.1:1 ========================================================================== */ :root{ --navy:#FFFFFF; /* was #0B0D10 — now the page surface */ --navy2:#F4F7FB; /* soft band */ --ink:#10161F; /* body text */ --muted:#5B6675; /* secondary text */ --line:#DDE4EC; /* hairlines */ --soft:#F4F7FB; --orange:#C2410C; /* CTA / accent — burnt amber, urgency */ --orange2:#9A3412; --brand:#0B4FA8; /* trust blue — links, headings, licence chip */ --brand2:#08376F; } html,body{background:#FFFFFF;color:var(--ink)} body{line-height:1.7} /* --- header --------------------------------------------------------- */ header{ background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); box-shadow:0 1px 3px rgba(16,22,31,.05); } header a{color:var(--ink)} header a:hover{color:var(--brand)} .hcall{background:var(--orange);color:#fff!important;border-radius:10px;font-weight:700} .hcall:hover{background:var(--orange2);color:#fff!important} nav.mobile{background:#fff;border-top:1px solid var(--line)} .menu,.dropdown,nav .panel{background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(16,22,31,.10)} /* --- hero: photo under a LIGHT scrim, dark type ---------------------- */ .hero{background:#F4F7FB;color:var(--ink)} .hero .bg{opacity:.20} .hero:before{ background:linear-gradient(105deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 45%,rgba(244,247,251,.58) 100%); } .hero h1{color:var(--ink)} .hero p.sub{color:#3B4655} .hero .eyebrow{color:var(--brand);font-weight:700;letter-spacing:.14em} /* --- buttons -------------------------------------------------------- */ .btn,.btn-primary{background:var(--orange);color:#fff;border:1px solid var(--orange);font-weight:700} .btn:hover,.btn-primary:hover{background:var(--orange2);border-color:var(--orange2);color:#fff} .btn-ghost,.ghost{background:transparent;color:var(--brand);border:1.5px solid var(--brand)} .btn-ghost:hover,.ghost:hover{background:var(--brand);color:#fff} /* --- cards ---------------------------------------------------------- */ .card{ background:#FFFFFF; border:1px solid var(--line); box-shadow:0 1px 2px rgba(16,22,31,.04); } .card:hover{ border-color:var(--brand); box-shadow:0 16px 34px rgba(11,79,168,.12); } .card h3{color:var(--ink)} .card p{color:var(--muted)} .card .go{color:var(--brand);font-weight:700} .card .ic{background:rgba(11,79,168,.10);color:var(--brand)} /* --- bands ---------------------------------------------------------- */ .soft,.split{background:#FFFFFF;color:var(--ink)} .soft h2,.split h2,h2,h3{color:var(--ink)} .soft p,.split p,p{color:var(--muted)} .split li{color:var(--muted)} a{color:var(--brand)} a:hover{color:var(--brand2)} /* --- CTA band: the one place the accent takes over ------------------- */ .cta-band{background:linear-gradient(135deg,var(--brand) 0%,var(--brand2) 100%);color:#fff} .cta-band h2,.cta-band p{color:#fff} .cta-band .btn{background:#fff;color:var(--brand);border-color:#fff} .cta-band .btn:hover{background:#F4F7FB;color:var(--brand2)} /* --- map ------------------------------------------------------------ */ #svcmap,.map{border:1px solid var(--line);border-radius:14px;overflow:hidden} .geobanner{background:rgba(11,79,168,.08);color:var(--brand);border:1px solid rgba(11,79,168,.20)} /* --- footer --------------------------------------------------------- */ footer{background:#F4F7FB;color:var(--muted);border-top:1px solid var(--line)} footer h4{color:var(--ink)} footer a{color:var(--muted)} footer a:hover{color:var(--brand)} footer .legal{color:#6B7686} .trustrow,.tmcap{color:var(--muted)} /* the licence line is a trust signal — give it weight */ .trustrow span{ display:inline-block;background:#fff;border:1px solid var(--line); border-radius:999px;padding:7px 14px;color:var(--ink);font-weight:600; } /* --- sticky mobile call bar ----------------------------------------- */ .callbar{background:var(--orange);border-top:none;box-shadow:0 -2px 14px rgba(16,22,31,.16)} .callbar a{color:#fff;font-weight:800;letter-spacing:.2px} /* --- focus visibility (WCAG 2.2) ------------------------------------ */ a:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:2px} .skip:focus{background:#fff;color:var(--ink);border:2px solid var(--brand)} /* ========================================================================== SHARP pass — crisper geometry, decisive type, less softness. The builder default is rounded and glowy; this is a licensed trade, so it should read like a contractor's card, not a consumer app. ========================================================================== */ /* tighter radii everywhere — 16px pills read soft, 4-6px reads sharp */ .card,.btn,.btn-primary,.btn-ghost,.ghost,.hcall, #svcmap,.map,.menu,.dropdown,nav .panel,input,select,textarea{ border-radius:4px!important; } .card .ic{border-radius:4px} .trustrow span{border-radius:3px} /* flatten the glow: real shadow, short throw */ .card{box-shadow:none;transition:border-color .14s ease, box-shadow .14s ease} .card:hover{box-shadow:0 6px 18px rgba(16,22,31,.10);border-color:var(--brand)} /* type: tighter tracking, heavier headings, clear hierarchy */ h1,h2,h3,h4{letter-spacing:-.02em;font-weight:800;color:var(--ink)} .hero h1{font-weight:900;letter-spacing:-.035em;line-height:1.04} h2{font-size:clamp(1.5rem,3vw,2.05rem);margin-bottom:.5em} h3{font-size:1.08rem;font-weight:750} p{max-width:68ch} /* rules instead of gradients for section separation */ .soft,.split{border-top:1px solid var(--line)} .cta-band{background:var(--brand);border-top:3px solid var(--orange)} /* buttons: solid, square, confident */ .btn,.btn-primary,.hcall{ padding:13px 22px;text-transform:none;font-size:1rem;line-height:1; box-shadow:none;border-width:1.5px; } .btn-ghost,.ghost{padding:11.5px 22px;border-width:1.5px} /* header: thin, precise */ header{box-shadow:none;border-bottom:1px solid var(--line)} /* the call bar is the loudest object on the page, deliberately */ .callbar{border-top:2px solid var(--orange2)} .eyebrow,.soft .eyebrow,.split .eyebrow{color:var(--brand)!important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem} .homegrid,.guidegrid,#cities-lightning,.relwrap{background:transparent} .chips a,.faq details{background:#fff;border:1px solid var(--line);color:var(--ink)} .drop,nav.mobile{background:#fff;border:1px solid var(--line)} .drop a,nav.mobile a{color:var(--ink)} footer{background:#F4F7FB;color:var(--muted)} /* ========================================================================== PALETTE — blue & white, green & white. Blue carries trust (licence, company, links). Green carries action (call). White carries everything else. Three colours, one job each. Contrast (WCAG 2.2 AA): #0A4FA0 on #FFFFFF 7.9:1 blue on white #0F7A43 on #FFFFFF 4.8:1 green on white #FFFFFF on #0F7A43 4.8:1 white on green (CTA) #10161F on #FFFFFF 17.4:1 ink on white ========================================================================== */ :root{ --brand:#0A4FA0; /* trust blue */ --brand2:#083C7A; --orange:#0F7A43; /* action green (var name kept: the stylesheet keys off it) */ --orange2:#0B5E33; --accent-tint:#E8F3ED; --brand-tint:#EAF1FA; } /* call actions = green */ .btn,.btn-primary,.hcall,.callbar{background:var(--orange);border-color:var(--orange);color:#fff} .btn:hover,.btn-primary:hover,.hcall:hover{background:var(--orange2);border-color:var(--orange2);color:#fff} .callbar{border-top:2px solid var(--orange2)} .callbar a{color:#fff} /* links, headings accents, icons = blue */ a{color:var(--brand)} a:hover{color:var(--brand2)} .eyebrow,.soft .eyebrow,.split .eyebrow{color:var(--brand)!important} .card .go{color:var(--brand)} .card .ic{background:var(--brand-tint);color:var(--brand)} .card:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(10,79,160,.12)} .btn-ghost,.ghost{color:var(--brand);border-color:var(--brand);background:transparent} .btn-ghost:hover,.ghost:hover{background:var(--brand);color:#fff} /* CTA band: blue field, green button */ .cta-band{background:var(--brand);border-top:3px solid var(--orange);color:#fff} .cta-band h2,.cta-band p{color:#fff} .cta-band .btn{background:var(--orange);color:#fff;border-color:var(--orange)} .cta-band .btn:hover{background:var(--orange2);border-color:var(--orange2)} /* trust strip under the hero reads green — availability, not alarm */ .hero .trust,.hero .trust *{color:var(--orange2);font-weight:650} /* the licence chip: blue, because it is a credential not a call to action */ .trustrow span{background:var(--brand-tint);border:1px solid rgba(10,79,160,.22);color:var(--brand2)} /* FAQ accordion */ .faq details{background:#fff;border:1px solid var(--line);border-radius:4px;margin-bottom:10px} .faq summary{cursor:pointer;font-weight:700;color:var(--ink);padding:14px 0;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary:before{content:"+";color:var(--brand);font-weight:800;margin-right:10px} .faq details[open] summary:before{content:"\2212"} .faq details[open]{border-color:var(--brand)} .faq p{color:var(--muted);padding-bottom:14px;margin:0} .geobanner{background:var(--accent-tint);color:var(--orange2);border:1px solid rgba(15,122,67,.25)} /* --- the dark-theme "lightning" bands ------------------------------------ #svc-lightning / #area-lightning / #cities-lightning are ID selectors (specificity 1-0-0) carrying linear-gradient(rgba(0,0,0,.88)...) over a dark hero photo. Class-level overrides cannot beat them, so they are replaced by ID here. These become the light tinted bands that give the page its rhythm: white section, tinted section, white section. -------------------------------------------------------------------------- */ #svc-lightning,#area-lightning,#cities-lightning{ background:var(--brand-tint)!important; background-image:none!important; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--ink); } #svc-lightning h2,#area-lightning h2,#cities-lightning h2, #svc-lightning h3,#area-lightning h3,#cities-lightning h3{color:var(--ink)} #svc-lightning p,#area-lightning p,#cities-lightning p, #svc-lightning .lede,#area-lightning .lede,#cities-lightning .lede{color:var(--muted)} #svc-lightning .eyebrow,#area-lightning .eyebrow,#cities-lightning .eyebrow{color:var(--brand)!important} #svc-lightning .card,#area-lightning .card,#cities-lightning .card{background:#fff;border:1px solid var(--line)} /* ========================================================================== PALETTE ALIGNED TO locksmithcheap.net — the fleet's 100/100 AEO site. Its tokens, read from the live page: --sky:#0369a1 --sky-mid:#0ea5e9 --sky-deep:#075985 --sky-pale:#e0f2fe --ok:#059669 --ok-pale:#d1fae5 --off-white:#f1f5f9 --border:#e2e8f0 --slate-mid:#1e293b --slate-3:#334155 Adopted as-is, with ONE deliberate change: the call button uses emerald-700 #047857 rather than --ok #059669, because white text on #059669 measures 3.5:1 and fails WCGA AA for normal text. #047857 gives 4.8:1. Everything else matches the reference site. ========================================================================== */ :root{ --sky:#0369a1; --sky-mid:#0ea5e9; --sky-deep:#075985; --sky-pale:#e0f2fe; --ok:#059669; --ok-pale:#d1fae5; --off-white:#f1f5f9; --slate-mid:#1e293b; --slate-3:#334155; --brand:#0369a1; /* sky — trust, links, credential */ --brand2:#075985; /* sky-deep */ --brand-tint:#e0f2fe; /* sky-pale */ --orange:#047857; /* emerald-700 — the CALL action (AA-safe) */ --orange2:#065f46; --accent-tint:#d1fae5; /* ok-pale */ --ink:#1e293b; /* slate-mid */ --muted:#334155; /* slate-3 */ --line:#e2e8f0; /* border */ --soft:#f1f5f9; /* off-white */ --navy:#ffffff; --navy2:#f1f5f9; } body,html{background:#fff;color:var(--ink)} .hero{background:var(--off-white)} #svc-lightning,#area-lightning,#cities-lightning{background:var(--off-white)!important} footer{background:var(--off-white);color:var(--muted)} .card{background:#fff;border:1px solid var(--line)} .card:hover{border-color:var(--sky-mid);box-shadow:0 6px 18px rgba(3,105,161,.12)} .card .ic{background:var(--sky-pale);color:var(--sky)} .trustrow span{background:var(--sky-pale);border:1px solid rgba(3,105,161,.25);color:var(--sky-deep)} .cta-band{background:var(--sky);border-top:3px solid var(--ok)} .geobanner{background:var(--ok-pale);color:var(--orange2);border:1px solid rgba(5,150,105,.28)} .hero .trust,.hero .trust *{color:var(--orange2)} /* --- CTA text colour ------------------------------------------------------- The call CTAs are elements, so the generic `a{color:var(--brand)}` rule beat the button rule and rendered blue-on-green: the single most important control on a call-first site was the least readable thing on the page. Anchors carrying a button class are forced white here. -------------------------------------------------------------------------- */ a.btn,a.btn-primary,a.hcall,.callbar a,.cta-band a.btn, a.btn *,a.btn-primary *,a.hcall *,.callbar a *{ color:#fff!important; fill:#fff; } a.btn:hover,a.btn-primary:hover,a.hcall:hover,.callbar a:hover{color:#fff!important} a.hcall svg,.callbar a svg,a.btn svg{stroke:#fff;fill:none} /* ghost button keeps blue text on white, and inverts on hover */ a.btn-ghost,a.ghost{color:var(--brand)!important;background:#fff} a.btn-ghost:hover,a.ghost:hover{color:#fff!important;background:var(--brand)} /* CTA band sits on sky blue: its button is white-on-emerald, its text white */ .cta-band,.cta-band h2,.cta-band p,.cta-band a:not(.btn){color:#fff!important} /* --- CTA text, corrected selectors ---------------------------------------- Measured from the live DOM rather than assumed: .hcall is the anchor (header) .btn in .ctas is the anchor (hero) <- was blue on green .callbar IS the anchor itself, not its parent <- was blue on green A ".callbar a" descendant selector matched nothing, which is why the single most important control on a call-first site stayed unreadable. -------------------------------------------------------------------------- */ a.callbar,a.callbar *, .ctas a.btn,.ctas a.btn *, a.hcall,a.hcall *, .cta-band a.btn,.cta-band a.btn *{ color:#ffffff!important; } a.callbar{background:var(--orange);display:block;text-align:center;padding:15px 0;font-weight:800} a.callbar svg,.ctas a.btn svg,a.hcall svg{stroke:#fff!important;color:#fff!important} nav.mobile a[href^="tel:"]{color:var(--orange2)!important} /* --- ghost button rescue --------------------------------------------------- The secondary CTA carries BOTH classes ("btn ghost"), so the white-text rule above matched it and rendered white-on-white: an invisible button. Ghost variants are excluded explicitly rather than by ordering. -------------------------------------------------------------------------- */ .ctas a.btn.ghost,.ctas a.btn.btn-ghost, a.btn.ghost,a.btn.btn-ghost, .ctas a.btn.ghost *,a.btn.ghost *{ color:var(--brand)!important; background:#fff!important; border:1.5px solid var(--brand)!important; } .ctas a.btn.ghost:hover,a.btn.ghost:hover, .ctas a.btn.ghost:hover *,a.btn.ghost:hover *{ color:#fff!important;background:var(--brand)!important; } /* heading colour was inconsistent: .split h2 inherited the link colour while every other h2 was ink. One rule, one colour. */ h2,.split h2,.soft h2,section h2{color:var(--ink)} .cta-band h2{color:#fff} header .brand img,header img{max-height:44px;width:auto} /* map: give the container a real height, and hide the text fallback once Leaflet has actually drawn something into it. Without the height rule the container collapsed to a tall empty box with nothing in it. */ #svcmap{height:420px;width:100%;background:var(--brand-tint);border:1px solid var(--line);border-radius:4px} #svcmap:empty{display:none} .map-fallback{font-size:.95rem;color:var(--muted);line-height:2;max-width:none} .map-fallback a{color:var(--brand);white-space:nowrap} .leaflet-container{border-radius:4px} /* --- FAQ accordion marker, de-duplicated ---------------------------------- site.css:337 already places a "+" on the RIGHT via summary:after. My earlier rule added a second one on the LEFT via summary:before, so every row showed two markers. The right-hand one is the conventional position and it was there first, so the left one is removed rather than the original overridden. -------------------------------------------------------------------------- */ .faq summary:before{content:none!important} .faq summary{padding:14px 34px 14px 16px;position:relative} .faq summary:after{ content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%); color:var(--brand);font-weight:900;font-size:1.25rem;line-height:1; } .faq details[open] summary:after{content:"\2212"} .faq details[open] summary{color:var(--brand)} .faq p{padding:0 16px 16px} /* ========================================================================== DEFECT REPAIR PASS — 2026-08-31 Every rule below fixes a defect confirmed by measurement (computed style, contrast ratio, or a 404 on the referenced file), not by inspection. ========================================================================== */ /* --- 1. mobile menu button was white-on-white ------------------------------ .navtoggle{color:#fff} plus a hardcoded stroke="#fff" on the inline SVG put a white icon on a white header: measured 1.00:1, i.e. invisible. Below 981px this is the ONLY way to reach the navigation, so the site had no usable menu on mobile at all. CSS beats the presentation attribute. */ .navtoggle{color:var(--ink)} .navtoggle svg{stroke:var(--ink)!important} .navtoggle:hover svg{stroke:var(--brand)!important} /* --- 2. the sticky call bar was leaking onto desktop ----------------------- site.css:559 hides it and only the max-width:980px query shows it, but the later `a.callbar{display:block}` rule sits outside every media query and out-specifies `.callbar` (0,1,1 vs 0,1,0). Result: a full-width green slab pinned to the bottom of every desktop page. Scoped properly here. */ a.callbar{display:none} @media(max-width:980px){ a.callbar{display:flex;align-items:center;justify-content:center;gap:9px; text-align:center;padding:15px 0;font-weight:800; background:var(--orange);border-top:2px solid var(--orange2)} } /* --- 3. keyboard access to the desktop dropdowns --------------------------- The triggers were plain s opened on :hover only — unreachable by keyboard, so every service, guide and city link was keyboard-inaccessible on desktop. The markup now uses a real