/* ============================================================ FAST LOCKSMITH — "Safety Red on Bone" editorial design system Shared stylesheet for all three city sites. One source of truth. Theme per class: .site.v-light -> Vancouver (bone surface, RED accent) .site.v-dark.acc-blue -> Surrey (warm-black, BLUE accent) .site.v-dark.acc-yellow -> North Van (warm-black, YELLOW accent) Fonts (load in ): Archivo, Archivo Narrow, Bricolage Grotesque. ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} :root{ --ink:#141414; --ink-2:#1A0A08; --bone:#EFECE3; --bone-2:#E5E1D4; --taupe:#8A8474; --taupe-2:#B5AE97; --white:#FFFFFF; --red:#E63A1F; --blue:#2D6BFF; --yellow:#FFCB05; /* expansion-city accents (one per new site) */ --green:#1F9D55; --orange:#E8621F; --purple:#7C5CFF; --teal:#0E9C9C; --rose:#D6336C; --amber:#F59E0B; --mono:'Archivo Narrow',ui-monospace,monospace; --ui:'Archivo',system-ui,sans-serif; --disp:'Bricolage Grotesque','Archivo',sans-serif; } html{scroll-behavior:smooth} body{background:#23211c;font-family:var(--ui);color:var(--ink);-webkit-font-smoothing:antialiased} /* ===== theme tokens (set on or a wrapper) ===== */ .site{ --surface:var(--bone); --surface-2:var(--bone-2); --text:var(--ink); --muted:var(--taupe); --card:var(--white); --hair:rgba(20,20,20,.13); --accent:var(--red); --on-accent:#141414; --band:var(--ink-2); --band-text:var(--bone); font-family:var(--ui);background:var(--surface);color:var(--text); max-width:1180px;margin:0 auto;min-height:100vh; } .site.v-dark{ --surface:var(--ink-2); --surface-2:#20120e; --text:var(--bone); --muted:var(--taupe-2); --card:#221A16; --hair:rgba(239,236,227,.14); --band:#0d0907; --band-text:var(--bone); } .site.acc-blue{--accent:var(--blue)} .site.acc-yellow{--accent:var(--yellow)} .site.acc-green{--accent:var(--green)} .site.acc-orange{--accent:var(--orange)} .site.acc-purple{--accent:var(--purple);--on-accent:#FFFFFF} .site.acc-teal{--accent:var(--teal)} .site.acc-rose{--accent:var(--rose);--on-accent:#FFFFFF} .site.acc-amber{--accent:var(--amber)} a{color:var(--accent)} /* ===== marquee ticker ===== */ .mq{background:var(--accent);color:var(--on-accent);overflow:hidden;white-space:nowrap; border-bottom:1px solid rgba(0,0,0,.18)} .mq__row{display:inline-flex;gap:0;will-change:transform;animation:mq 34s linear infinite} .mq span{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.13em; text-transform:uppercase;padding:9px 0;display:inline-flex;align-items:center} .mq span::after{content:"★";opacity:.55;margin:0 18px;font-size:10px} @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ===== masthead nav ===== */ .nav{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:16px 30px;border-bottom:1px solid var(--hair)} .brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800; font-size:17px;letter-spacing:-.01em;text-transform:uppercase;color:var(--text);text-decoration:none} .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent)} .brand small{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.16em; color:var(--muted);text-transform:uppercase} /* Stacked brand: city eyebrow ABOVE "Fast Locksmith" (one line). */ .brand__txt{display:flex;flex-direction:column;justify-content:center;line-height:1.04;gap:1px;min-width:0} .brand__txt b{white-space:nowrap;font-weight:800} .nav__links{display:flex;gap:4px;align-items:center;font-family:var(--mono);font-size:12.5px; letter-spacing:.06em;text-transform:uppercase} .nav__links a{color:var(--text);text-decoration:none;padding:6px 9px;opacity:.78} .nav__links a::before{content:"[ ";color:var(--muted)} .nav__links a::after{content:" ]";color:var(--muted)} .nav__links a:hover{opacity:1;color:var(--accent)} .nav__cta{display:flex;gap:8px;align-items:center;flex-shrink:0} .btn{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.05em; text-transform:uppercase;padding:11px 18px;border-radius:2px;text-decoration:none; display:inline-flex;align-items:center;justify-content:center;gap:8px; border:1px solid transparent;cursor:pointer;white-space:nowrap;line-height:1.1} .btn--accent{background:var(--accent);color:var(--on-accent)} .btn--accent:hover{filter:brightness(1.06)} .btn--ghost{background:transparent;color:var(--text);border-color:var(--hair)} .btn--ghost:hover{border-color:var(--accent);color:var(--accent)} /* ===== breadcrumbs (inner pages) ===== */ .crumbs{padding:14px 30px;border-bottom:1px solid var(--hair);font-family:var(--mono); font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--accent)} .crumbs span{color:var(--accent);margin:0 6px} /* ===== hero ===== */ .hero{padding:40px 30px 48px;border-bottom:1px solid var(--hair)} .eyebrow{font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between; gap:14px;align-items:center;flex-wrap:wrap} .eyebrow .pre{font:700 11.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase; margin:0;color:var(--muted)} .eyebrow .pre b{color:var(--accent);font-weight:700} .hero .hd{font-family:var(--disp);font-weight:800;letter-spacing:-.04em;line-height:.86; font-size:clamp(52px,11vw,130px);margin:22px 0 0;text-transform:uppercase} .hero .hd .ln{display:block} .hero .hd .hl{background:var(--accent);color:#141414;padding:0 .1em; -webkit-box-decoration-break:clone;box-decoration-break:clone} /* inner-page hero headline: smaller than home */ .hero.hero--page .hd{font-size:clamp(34px,6.5vw,72px)} .hero__row{margin-top:30px} .hero__lead{max-width:60ch;margin:0 0 22px;font-size:16.5px;line-height:1.6;color:var(--text)} .hero__lead .mark{background:var(--accent);color:#141414;padding:.04em .26em;font-weight:600} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;max-width:760px} .hero__cta .btn{flex:1 1 220px;justify-content:space-between;padding:16px 18px;font-size:13px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:42px; background:var(--hair);border:1px solid var(--hair)} .stats div{background:var(--surface);padding:18px 16px} .stats .n{font-family:var(--disp);font-weight:800;font-size:clamp(28px,4vw,42px); letter-spacing:-.02em;color:var(--text);line-height:1;display:flex;align-items:baseline;gap:7px} .stats .n small{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em; color:var(--accent);text-transform:uppercase} .stats .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin-top:9px} /* ===== section head ===== */ section{padding:46px 30px} .sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between; gap:16px;border-top:1px solid var(--hair);padding-top:22px;margin-bottom:28px} .sec-head .kick{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.12em; text-transform:uppercase;color:var(--accent)} .sec-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,4vw,46px); letter-spacing:-.025em;text-transform:uppercase;line-height:1} .sec-head p{max-width:46ch;color:var(--muted);font-size:14.5px;line-height:1.55} /* ===== services grid (home + hub) ===== */ .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair); border:1px solid var(--hair)} .svc a{background:var(--card);padding:26px 24px 22px;text-decoration:none;color:var(--text); display:flex;flex-direction:column;min-height:188px;transition:background .18s} .svc a:hover{background:var(--surface-2)} .svc .num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted); display:flex;justify-content:space-between} .svc .num b{color:var(--accent);font-weight:700} .svc h3{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.01em;margin:16px 0 8px} .svc p{font-size:14px;line-height:1.5;color:var(--muted);flex:1} .svc .meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--text);margin-top:14px;display:flex;justify-content:space-between;align-items:center} .svc .meta .ar{color:var(--accent);font-size:16px} /* ===== long-form article content (service / area / about / legal) ===== */ .split{display:grid;grid-template-columns:1.7fr .9fr;gap:34px;align-items:start} .prose{max-width:68ch} .prose>p{font-size:16px;line-height:1.72;color:var(--text);margin:0 0 18px} .prose .lede{font-size:19px;line-height:1.6} .prose h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3vw,32px);letter-spacing:-.02em; text-transform:uppercase;line-height:1.05;margin:38px 0 14px} .prose h3{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.01em;margin:26px 0 10px} .prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .prose strong{color:var(--text);font-weight:700} .prose ul,.prose ol{margin:0 0 18px;padding-left:22px} .prose li{font-size:16px;line-height:1.66;margin:0 0 8px} .prose blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:22px 0; font-family:var(--disp);font-weight:600;font-size:20px;line-height:1.3;color:var(--text)} /* checklist (what's included) */ .checks{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px} .checks li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.5} .checks li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700} /* numbered steps (how it works) */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair); border:1px solid var(--hair);margin:8px 0 4px} .steps>div{background:var(--card);padding:24px 22px} .steps .sn{font-family:var(--disp);font-weight:800;font-size:34px;color:var(--accent);line-height:1} .steps h4{font-family:var(--disp);font-weight:700;font-size:17px;margin:10px 0 6px} .steps p{font-size:14px;line-height:1.5;color:var(--muted)} /* price/spec table */ .spec{width:100%;border-collapse:collapse;border:1px solid var(--hair);margin:6px 0 18px;font-size:14.5px} .spec th,.spec td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hair)} .spec th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .spec td:last-child{font-family:var(--mono);color:var(--accent);white-space:nowrap} /* aside CTA card (sticky on desktop) */ .aside{position:sticky;top:20px;display:grid;gap:18px} .card{background:var(--card);border:1px solid var(--hair);padding:24px 22px} .card h4{font-family:var(--disp);font-weight:800;font-size:20px;text-transform:uppercase;margin-bottom:6px} .card p{font-size:14px;line-height:1.55;color:var(--muted);margin-bottom:14px} .card .ph{font-family:var(--disp);font-weight:800;font-size:26px;color:var(--accent); text-decoration:none;display:block;margin-bottom:12px;letter-spacing:-.01em} .card .fl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);border-top:1px solid var(--hair);padding-top:12px;margin-top:4px;line-height:1.8} /* link grid — internal linking blocks (areas served / related services) */ .linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px; background:var(--hair);border:1px solid var(--hair)} .linkgrid a{background:var(--card);padding:15px 16px;text-decoration:none;color:var(--text); font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase; display:flex;justify-content:space-between;align-items:center;gap:8px;transition:background .15s} .linkgrid a:hover{background:var(--surface-2);color:var(--accent)} .linkgrid a::after{content:"→";color:var(--accent)} /* trust strip */ .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair); border:1px solid var(--hair)} .trust div{background:var(--surface);padding:18px 16px;font-family:var(--mono);font-size:11.5px; letter-spacing:.06em;text-transform:uppercase;color:var(--text);display:flex;align-items:center;gap:10px} .trust div::before{content:"✓";color:var(--accent);font-weight:700} /* FAQ (visual only — NO FAQPage schema, restricted since 2023) */ .faq{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)} .faq details{background:var(--card)} .faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-family:var(--disp);font-weight:700; font-size:17px;display:flex;justify-content:space-between;gap:14px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--accent);font-weight:800;font-size:22px} .faq details[open] summary::after{content:"–"} .faq .a{padding:0 22px 20px;font-size:15px;line-height:1.6;color:var(--muted)} /* ===== booking teaser ===== */ .book{display:grid;grid-template-columns:1.1fr .9fr;gap:1px;background:var(--hair); border:1px solid var(--hair)} .book>div{background:var(--card);padding:26px 24px} .book .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:14px} .book .cal span{font-family:var(--mono);font-size:12px;text-align:center;padding:7px 0; color:var(--text);border:1px solid var(--hair);border-radius:2px} .book .cal span.dow{border:0;color:var(--muted);font-size:10px;letter-spacing:.08em} .book .cal span.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700} .book .cal span.off{opacity:.32} .slots{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px} .slots span{font-family:var(--mono);font-size:12px;padding:8px 11px;border:1px solid var(--hair); border-radius:2px;color:var(--text)} .slots span.pick{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700} /* Make booking dates + time slots read as interactive (cursor + hover). */ .book .cal span:not(.dow):not(.off){cursor:pointer;transition:background .12s,border-color .12s,color .12s} .book .cal span:not(.dow):not(.off):hover{border-color:var(--accent);color:var(--accent)} .slots span:not(.off){cursor:pointer;transition:background .12s,border-color .12s,color .12s} .slots span:not(.off):hover{border-color:var(--accent);color:var(--accent)} .book label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);display:block;margin-bottom:6px} .cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .cal-head label{margin:0} .cal-nav{display:inline-flex;gap:6px} .cal-nav b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px; border:1px solid var(--hair);border-radius:2px;font-size:14px;cursor:pointer;color:var(--text)} .cal-nav b.next{background:var(--accent);color:#141414;border-color:var(--accent)} .cal-nav b:hover{border-color:var(--accent)} /* injected by fl-booking.js */ .fl-expand-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;background:transparent; border:1px solid var(--hair);border-radius:2px;padding:9px 13px; font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);cursor:pointer;margin-top:14px; transition:border-color .14s,color .14s;line-height:1} .fl-expand-btn:hover{border-color:var(--accent);color:var(--accent)} .fl-expand-btn span{font-size:13px;line-height:1} .fl-expand-btn small{font-weight:400;letter-spacing:.04em;font-size:11px} .fl-val-msg{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--red);margin-top:10px;padding:10px 14px; border:1px solid var(--red);border-radius:2px;background:rgba(230,58,31,.06)} /* Phone-consultation toggle (switches booking TYPE; keeps the calendar). */ .fl-consult{display:flex;align-items:center;gap:9px;margin-top:16px;cursor:pointer; font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase; color:var(--muted);line-height:1.35} .fl-consult input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent);cursor:pointer} .fl-consult.is-on{color:var(--text)} /* contact / booking form */ .form{display:grid;gap:14px;max-width:560px} .form label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);display:block;margin-bottom:5px} .form input,.form select,.form textarea{width:100%;background:var(--surface);color:var(--text); border:1px solid var(--hair);border-radius:2px;padding:12px 13px;font-family:var(--ui);font-size:15px} .form textarea{min-height:120px;resize:vertical} /* ===== dispatch notes (blog cards) ===== */ .notes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair); border:1px solid var(--hair)} .notes a{background:var(--card);padding:24px 22px;text-decoration:none;color:var(--text); display:flex;flex-direction:column;gap:10px;transition:background .18s} .notes a:hover{background:var(--surface-2)} .notes .top{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);display:flex;justify-content:space-between} .notes .top b{color:var(--accent);font-weight:700} .notes h4{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.15;letter-spacing:-.01em} .notes p{font-size:13.5px;line-height:1.5;color:var(--muted);flex:1} .notes .read{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--accent)} /* ===== CTA band ===== */ .band{background:var(--band);color:var(--band-text);padding:48px 30px;display:flex; flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px} .band .k{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent)} .band h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,5vw,54px);letter-spacing:-.03em; text-transform:uppercase;line-height:1} .band a{font-family:var(--disp);font-weight:800;color:var(--band-text);text-decoration:none; display:inline-flex;align-items:center;gap:12px} .band a:hover{color:var(--accent)} /* ===== footer ===== */ .foot{background:var(--band);color:var(--band-text);padding:46px 30px 28px; border-top:3px solid var(--accent)} .foot__top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:26px; padding-bottom:28px;border-bottom:1px solid rgba(239,236,227,.14)} .foot__brand .b{font-family:var(--disp);font-weight:800;font-size:18px;text-transform:uppercase; display:flex;align-items:center;gap:9px;color:var(--band-text);text-decoration:none} .foot__brand .b .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)} .foot__brand p{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--taupe-2);max-width:34ch} .foot__brand .addr{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--band-text);margin-top:14px;line-height:1.7} .foot__col h5,.foot__col>summary{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin-bottom:12px} /* Footer columns ship as

accordions — open on desktop (normal columns), JS-collapsed on mobile. Hide the native disclosure marker. */ .foot__col>summary{list-style:none;cursor:default} .foot__col>summary::-webkit-details-marker{display:none} .foot__col a{display:block;color:var(--taupe-2);text-decoration:none;font-size:13.5px;padding:4px 0} .foot__col a:hover{color:var(--band-text)} .foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:20px; font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe)} .foot__legal .ok{color:var(--accent)} /* ===== responsive ===== */ @media(max-width:980px){ .split{grid-template-columns:1fr} .aside{position:static} } @media(max-width:880px){ .nav__links{display:none} .svc,.steps{grid-template-columns:1fr 1fr} .book,.hero__row{grid-template-columns:1fr} .stats,.trust{grid-template-columns:1fr 1fr} .foot__top{grid-template-columns:1fr} /* Footer accordions: full-width, tappable, with a +/- affordance. The key column (Services) stays open and reads as a plain heading. */ details.foot__col{border-top:1px solid rgba(239,236,227,.14);padding-top:14px} details.foot__col>summary{cursor:pointer;position:relative;padding-right:22px;margin-bottom:0} details.foot__col[open]>summary{margin-bottom:12px} details.foot__col>summary::after{content:"+";position:absolute;right:2px;top:-2px;font-size:16px;color:var(--taupe-2)} details.foot__col[open]>summary::after{content:"–"} .foot__col--key{border-top:0;padding-top:0} .foot__col--key>summary{cursor:default} .foot__col--key>summary::after{display:none} /* Horizontal chip-row for the "some accordions" (Areas / Company). */ .foot__col--row .foot__links{display:flex;flex-wrap:wrap;gap:2px 18px} /* Notes / dispatch cards: single-row horizontal scroll on mobile (snap), like the Therapy homepage feature rail. */ .notes{grid-template-columns:none;display:flex;overflow-x:auto;gap:1px; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none} .notes::-webkit-scrollbar{display:none} .notes a{flex:0 0 82%;scroll-snap-align:start} } @media(max-width:560px){ .svc,.stats,.trust,.steps,.foot__top{grid-template-columns:1fr} /* Keep the masthead from overflowing → no horizontal page scroll. The nav Call button drops its number (compact "CALL"); the tel: link still works. */ .nav{padding:12px 14px;gap:10px} .nav__cta{gap:6px} .nav__cta .btn{padding:9px 12px;font-size:11px;letter-spacing:.03em;gap:5px} .nav__cta .btn--ghost .np{display:none} } /* ============================================================ TRILINGUAL — language toggle + CJK / Gurmukhi typefaces EN (default) · 中文 (.lang-zh) · ਪੰਜਾਬੀ (.lang-pa). The toggle is injected by the public renderer above the page body on every FL page; the .lang-* body class is set on translated pages so non-Latin copy renders in the matching Noto family. (Noto @font-face links are added in per-page by fl_translate / the EN pages' own head.) ============================================================ */ .lang-switch{display:flex;justify-content:flex-end;align-items:center;gap:2px; padding:7px 30px;background:var(--surface-2,#E5E1D4); border-bottom:1px solid var(--hair,rgba(20,20,20,.13)); font-family:var(--mono);font-size:11.5px;letter-spacing:.08em; text-transform:uppercase} .lang-switch a{color:var(--muted,#8A8474);text-decoration:none; padding:4px 9px;border-radius:2px;line-height:1;opacity:.85; transition:color .12s ease,background .12s ease} .lang-switch a:hover{color:var(--accent);opacity:1} .lang-switch a.is-active{color:var(--on-accent,#141414);background:var(--accent);opacity:1} /* Render the non-Latin labels in their own face inside the toggle so the 中文 / ਪੰਜਾਬੀ words look right regardless of the page's body class. */ .lang-switch a[lang="zh"]{font-family:'Noto Sans SC',var(--mono)} .lang-switch a[lang="pa"]{font-family:'Noto Sans Gurmukhi',var(--mono)} @media(max-width:880px){.lang-switch{padding:6px 18px}} /* Whole-page typeface overrides for translated pages. Noto keeps the editorial weight ladder close to Archivo so the layout doesn't reflow. */ .lang-zh,.lang-zh .site, .lang-zh .nav__links,.lang-zh .btn,.lang-zh .mq span{ font-family:'Noto Sans SC',var(--ui)} .lang-zh .brand,.lang-zh .disp,.lang-zh h1,.lang-zh h2,.lang-zh h3{ font-family:'Noto Sans SC',var(--disp)} .lang-pa,.lang-pa .site, .lang-pa .nav__links,.lang-pa .btn,.lang-pa .mq span{ font-family:'Noto Sans Gurmukhi',var(--ui)} .lang-pa .brand,.lang-pa .disp,.lang-pa h1,.lang-pa h2,.lang-pa h3{ font-family:'Noto Sans Gurmukhi',var(--disp)} /* Brand wordmark stays Latin — never recolour/restyle "Fast Locksmith". */ .lang-zh .brand,.lang-pa .brand{letter-spacing:-.01em}