/* Theme Name: GD Locksmith Theme URI: https://gd-locksmith.com/ Author: Lucid Bubble Author URI: https://lucidbubble.com/ Description: Bespoke theme for G.D. Locksmith, a licensed 24/7 mobile locksmith serving San Diego County — full-service: locks changed and rekeyed, keys and car keys made, business security, and 24-hour lockouts. Service-area business: no street address is printed in any template or schema block. Fifty-two fixed URLs, each with its own written title, meta description, canonical and JSON-LD. Version: 1.2.0 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 License: Proprietary — licensed to G.D. Locksmith Text Domain: gd-locksmith Tags: locksmith, service-area-business, static-first */ /* ========================================================================== THIS is the stylesheet the browser loads (WordPress enqueues it from the theme root). assets/style.css is the untouched copy of the static build's sheet, kept for reference and diffing — it is NOT enqueued. Edit this file. Everything below the next rule is assets/style.css, verbatim. ========================================================================== */ /* WordPress puts a `page` class on for every Page post type. The design system below does not use a `.page` selector, but if one is ever added it would hit the body element too. Neutralise the body case here and scope any future wrapper rule as `body > .page`. */ body.page { display: block; min-height: 0; } /* ========================================================================== G.D. Locksmith — shared stylesheet Every page on gd-locksmith.com links this ONE file. Do not fork it. Tokens are locked in BRAND.md (sampled from the logo). Never re-derive. Light UI only. No dark mode, no prefers-color-scheme switch anywhere. ========================================================================== */ :root{ --brand-red:#F74335; /* logo red — large display marks only (3.4:1 on white) */ --accent:#DB1809; /* CTA + small accent text (5.06:1 on white) */ --ink:#14181C; --ink-2:#4E5863; --bg:#FFFFFF; --bg-alt:#F6F7F8; --line:#E3E6E9; --line-dark:#39424B; --radius:14px; /* ONE radius */ --shadow:0 8px 24px rgba(20,24,28,.08); /* ONE shadow */ --wrap:1140px; --gutter:clamp(20px,5vw,40px); --sec-pad:clamp(64px,10vw,120px); --display:"Open Sans","Segoe UI",Arial,sans-serif; --body:"Inter","Segoe UI",Arial,sans-serif; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--body);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:var(--accent);text-underline-offset:3px} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px} h1,h2,h3,h4{font-family:var(--display);font-weight:800;color:var(--ink);margin:0 0 16px;line-height:1.15} h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1.05;letter-spacing:-.015em} h2{font-size:clamp(1.6rem,3.5vw,2.4rem);letter-spacing:-.01em} h3{font-size:21px;font-weight:700} h4{font-size:17px;font-weight:700} p{margin:0 0 16px;max-width:72ch} ul,ol{margin:0 0 16px;padding-left:22px} li{margin:0 0 8px} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 16px;z-index:200} .skip:focus{left:8px;top:8px} /* ---------- layout ---------- */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:var(--sec-pad)} .section--tight{padding-block:clamp(48px,7vw,80px)} .section--alt{background:var(--bg-alt)} .section--dark{background:var(--ink);color:#fff} .section--dark h2,.section--dark h3{color:#fff} .eyebrow{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.06em; text-transform:uppercase;color:var(--accent);margin:0 0 8px} .section--dark .eyebrow{color:#FF8B80} .lede{font-size:21px;color:var(--ink-2);max-width:64ch} .section--dark .lede{color:#D3D8DD} .sec-head{max-width:720px;margin-bottom:48px} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:52px;padding:12px 26px;border-radius:var(--radius); font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2; text-decoration:none;border:2px solid transparent;cursor:pointer; transition:background-color .15s ease,color .15s ease,border-color .15s ease; } .btn--call{background:var(--accent);color:#fff} .btn--call:hover{background:#B71407} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)} .btn--ghost:hover{background:var(--ink);color:#fff} .section--dark .btn--ghost{color:#fff;border-color:#fff} .section--dark .btn--ghost:hover{background:#fff;color:var(--ink)} .btn--lg{min-height:60px;font-size:21px;padding:14px 32px;width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 24px} .btn-row .btn{flex:1 1 238px} .btn .num{white-space:nowrap} /* ---------- header ---------- */ .site-head{background:#fff;border-bottom:1px solid var(--line);z-index:60} .head-row{display:flex;align-items:center;justify-content:space-between;gap:16px; min-height:68px;padding-block:10px} .brand{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none; font-family:var(--display);font-weight:800;letter-spacing:-.01em;font-size:23px;padding:6px 0} .brand .b-gd{color:var(--brand-red)} .brand .b-name{color:var(--ink)} .brand .b-sub{display:block;font-family:var(--body);font-weight:600;font-size:11px; letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin-top:2px} .head-cta{display:flex;align-items:center;gap:16px} .head-hours{font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap} .head-cta .btn{min-height:48px;padding:10px 20px;font-size:16px} .site-nav{background:var(--bg-alt);border-bottom:1px solid var(--line)} .site-nav ul{display:flex;gap:4px;margin:0;padding:0;list-style:none; overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .site-nav ul::-webkit-scrollbar{display:none} .site-nav a{display:flex;align-items:center;min-height:48px;padding:0 14px; font-size:16px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap; border-bottom:3px solid transparent} .site-nav a:hover{color:var(--ink)} .site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)} /* ---------- breadcrumb ---------- */ .crumbs{font-size:15px;color:var(--ink-2);padding-block:4px 0} .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0;padding:0;list-style:none} .crumbs li{display:flex;align-items:center;min-height:44px;margin:0} .crumbs li+li::before{content:"/";margin-right:6px;color:var(--line-dark);opacity:.6} .crumbs a{color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px} /* ---------- hero ---------- */ .hero{padding-block:clamp(32px,5vw,64px) clamp(40px,6vw,72px)} .hero-grid{display:grid;gap:clamp(24px,4vw,48px);align-items:center} .hero h1{margin-bottom:16px} .hero .lede{margin-bottom:32px} .hero-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)} .hero-trust{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0;padding:0;list-style:none; font-size:16px;font-weight:600;color:var(--ink)} .hero-trust li{display:flex;align-items:center;gap:7px;margin:0} .stars{color:var(--accent);font-size:17px;letter-spacing:1px} .trustbar .stars,.section--dark .stars{color:var(--brand-red)} .tick{color:var(--accent);font-weight:700} .es-line{margin:24px 0 0;font-size:16px;color:var(--ink-2);max-width:60ch} /* ---------- trust strip ---------- */ .trustbar{background:var(--ink);color:#fff} .trustbar ul{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 24px; margin:0;padding:28px 0;list-style:none} .trustbar li{margin:0} .trustbar b{display:block;font-family:var(--display);font-size:21px;font-weight:800;line-height:1.2} .trustbar span{display:block;font-size:14px;color:#C7CDD3;margin-top:4px} /* ---------- cards ---------- */ .cards{display:grid;gap:24px;grid-template-columns:1fr;margin:0;padding:0;list-style:none} .cards--3{--cols:3} .cards--2{--cols:2} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:28px;box-shadow:var(--shadow);margin:0} .section--alt .card{background:#fff} .card h3{margin-bottom:12px} .card p{font-size:16px;color:var(--ink-2);margin-bottom:16px} .card ul{margin:0 0 20px;padding-left:20px;font-size:16px;color:var(--ink-2)} .card-media{border-radius:calc(var(--radius) - 4px);margin-bottom:20px;width:100%} .card-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700; font-family:var(--display);text-decoration:none;color:var(--accent)} .card-link:hover{text-decoration:underline} /* ---------- plain service list ---------- */ .svc-list{display:grid;grid-template-columns:1fr;gap:0 32px;margin:0;padding:0;list-style:none} .svc-list li{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--line); margin:0;font-size:17px} .svc-list li b{font-weight:600} .section--dark .svc-list li{border-bottom-color:var(--line-dark)} /* ---------- steps ---------- */ .steps{display:grid;gap:24px;grid-template-columns:1fr;counter-reset:s;margin:0;padding:0;list-style:none} .step{margin:0;padding-top:16px;border-top:3px solid var(--accent)} .step b{display:block;font-family:var(--display);font-size:13px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px} .step h3{margin-bottom:8px} .step p{font-size:16px;color:var(--ink-2);margin:0} /* ---------- area list ---------- */ .areas{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 32px;padding:0;list-style:none} .areas li{margin:0} .areas a{display:flex;align-items:center;min-height:52px;padding:8px 16px;background:#fff; border:1px solid var(--line);border-radius:var(--radius);color:var(--ink); font-weight:600;font-size:16px;text-decoration:none} .areas a:hover{border-color:var(--ink);} .section--alt .areas a{background:#fff} /* ---------- reviews ---------- */ .reviews{display:grid;gap:24px;grid-template-columns:1fr;margin:0;padding:0;list-style:none} .review{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px} .review .ph-note{display:block;font-size:12px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-2);margin-bottom:12px} .review blockquote{margin:0 0 16px;font-size:17px;color:var(--ink)} .review cite{font-style:normal;font-size:16px;color:var(--ink-2)} /* ---------- FAQ ---------- */ .faq{max-width:820px} .faq details{border-bottom:1px solid var(--line)} .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px; min-height:60px;padding:14px 0;cursor:pointer;list-style:none; font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:26px;font-weight:700;color:var(--accent);line-height:1} .faq details[open] summary::after{content:"\2013"} .faq .answer{padding:0 0 20px} .faq .answer p{font-size:17px;color:var(--ink-2);margin-bottom:12px} .faq .answer p:last-child{margin-bottom:0} /* ---------- form ---------- */ .form{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow); color:var(--ink);max-width:560px} .form h3,.section--dark .form h3{color:var(--ink);margin-bottom:8px} .section--dark .form,.section--dark .form p,.section--dark .form label{color:var(--ink)} .form .form-note{font-size:16px;color:var(--ink-2);margin-bottom:24px} .field{margin-bottom:16px} .field label{display:block;font-weight:600;font-size:16px;margin-bottom:6px;color:var(--ink)} .field input,.field select,.field textarea{ width:100%;min-height:52px;padding:12px 14px;font-family:var(--body);font-size:16px; color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:var(--radius)} .field textarea{min-height:104px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)} .form .btn{width:100%} .form-legal{font-size:15px;color:var(--ink-2);margin:16px 0 0} /* ---------- CTA band ---------- */ .cta-grid{display:grid;gap:40px;align-items:start} .cta-phone{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5.5vw,3rem); color:#fff;text-decoration:none;display:inline-flex;align-items:center;min-height:56px; padding:4px 0;margin:8px 0 16px;line-height:1.1} .cta-phone:hover{text-decoration:underline} /* ---------- footer ---------- */ .site-foot{background:var(--ink);color:#C7CDD3;padding-block:56px 32px;font-size:16px} .site-foot a{color:#fff;text-decoration:none} .site-foot a:hover{text-decoration:underline} .foot-grid{display:grid;gap:40px;grid-template-columns:1fr} .foot-grid h3{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:16px} .foot-grid ul{list-style:none;margin:0;padding:0} .foot-grid li{margin:0} .foot-grid li a{display:inline-flex;align-items:center;min-height:44px} .foot-brand .brand{font-size:23px} .foot-brand .b-name{color:#fff} .foot-brand .b-sub{color:#9AA3AC} .foot-brand p{font-size:16px;color:#C7CDD3;max-width:40ch} .foot-phone{font-family:var(--display);font-weight:800;font-size:26px;color:#fff; text-decoration:none;display:inline-flex;min-height:48px;align-items:center} .foot-bottom{border-top:1px solid var(--line-dark);margin-top:48px;padding-top:16px; display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;font-size:15px;color:#9AA3AC} .foot-bottom span{display:inline-flex;align-items:center;min-height:44px} .foot-bottom a{color:#C7CDD3;display:inline-flex;align-items:center;min-height:44px} /* ---------- sticky mobile call bar ---------- */ .callbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:8px; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(20,24,28,.08)} .callbar .btn{flex:1 1 0;min-height:56px;font-size:17px;padding:10px 12px} /* ---------- prose (legal) ---------- */ .prose{max-width:760px} .prose h2{font-size:26px;margin-top:48px} .prose h3{font-size:19px;margin-top:32px} .prose p,.prose li{color:var(--ink-2);font-size:17px} .prose strong{color:var(--ink)} .updated{font-size:15px;color:var(--ink-2)} /* ---------- scroll reveal: OPACITY ONLY ---------- Never translate or scale — it rasterises text and renders soft on macOS. Only active when script.js confirms IntersectionObserver and sets html.js-anim. */ html.js-anim .reveal{opacity:0;transition:opacity .5s ease} html.js-anim .reveal.is-in{opacity:1} @media (prefers-reduced-motion:reduce){ html.js-anim .reveal{opacity:1!important;transition:none!important} html{scroll-behavior:auto} } /* ========================================================================== Breakpoints ========================================================================== */ @media (min-width:600px){ .areas{grid-template-columns:repeat(3,1fr)} .svc-list{grid-template-columns:repeat(2,1fr)} .btn--lg{width:auto} } @media (min-width:768px){ .trustbar ul{grid-template-columns:repeat(4,1fr);padding:32px 0} .cards{grid-template-columns:repeat(2,1fr)} .reviews{grid-template-columns:repeat(3,1fr)} .steps{grid-template-columns:repeat(3,1fr)} .foot-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:900px){ .cards--3{grid-template-columns:repeat(3,1fr)} .hero-grid{grid-template-columns:1.05fr .95fr} .cta-grid{grid-template-columns:1fr 1fr;gap:64px} .foot-grid{grid-template-columns:1.5fr 1fr 1.5fr} .areas{grid-template-columns:repeat(4,1fr)} .svc-list{grid-template-columns:repeat(3,1fr)} } /* footer city list reads as one block, two columns, one heading */ .foot-areas{column-count:1} @media (min-width:600px){.foot-areas{column-count:2;column-gap:24px}} /* mobile: bottom call bar replaces the sticky header */ @media (max-width:560px){ .brand{font-size:19px} .brand .b-sub{font-size:10px;letter-spacing:.04em;white-space:nowrap} .head-cta .btn{font-size:15px;padding:10px 14px} .site-nav ul{flex-wrap:wrap;overflow-x:visible} /* the rating, the review count and the licence must clear the sticky call bar on a 390x844 phone — that is the whole point of the design */ .site-nav a{min-height:44px} .hero{padding-block:24px 40px} .hero h1{margin-bottom:12px} .hero .lede{font-size:19px;margin-bottom:24px} .btn-row{gap:12px;margin-bottom:20px} .btn--lg{min-height:56px;font-size:19px} } /* narrow Androids: the header must never push a scrollbar */ @media (max-width:420px){ .head-row{gap:10px} /* 19px keeps the 800-weight wordmark inside WCAG's large-text band (>=18.66px), so the logo red clears 3:1. The sub-line governs the block width, not the wordmark, so this costs nothing horizontally. */ .brand{font-size:19px} .head-cta .btn{font-size:14px;padding:10px 12px;gap:6px} .callbar .btn{font-size:16px;padding:10px 10px} } @media (max-width:359px){ .brand{font-size:17px} .brand .b-sub{display:none} } @media (max-width:768px){ .callbar{display:flex} body{padding-bottom:80px} .head-hours{display:none} .hero-media{order:2} .hero-copy{order:1} } @media (min-width:769px){ .site-head{position:sticky;top:0} }