/* mobile-polish */ /* Mobile polish — overrides applied on top of the inline Tampa template CSS. Injected at the end of so it wins specificity battles. Zero content changes, just layout / spacing / sizing on small screens. */ /* ============== CONTACT HERO FOOTER (all viewports) ============== */ .ft-hero { background: linear-gradient(180deg, #0A1626 0%, #060A14 100%); padding: 44px 28px 24px; border-top: 1px solid rgba(26,86,200,0.2); position: relative; overflow: hidden; } .ft-hero::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 2px; background: linear-gradient(90deg, transparent, #C91515, transparent); } .ft-hero-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.08); } .ft-hero-brand .ft-logo-super { font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 4px; color: var(--red-text); text-transform: uppercase; margin-bottom: 4px; } .ft-hero-brand .ft-logo-main { font-family: 'Barlow Condensed', sans-serif; font-size: 36px; font-weight: 900; color: #fff; letter-spacing: 1px; line-height: 1; text-transform: uppercase; } .ft-hero-brand .ft-logo-main span { color: var(--red-text); } .ft-hero-phone { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; text-align: right; padding: 14px 26px; background: linear-gradient(135deg, rgba(201,21,21,0.15) 0%, rgba(201,21,21,0.05) 100%); border: 1px solid rgba(201,21,21,0.4); transition: all 0.2s; position: relative; } .ft-hero-phone::before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: #C91515; } .ft-hero-phone:hover { background: rgba(201,21,21,0.2); transform: translateY(-2px); } .ft-hero-phone-label { font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 2.5px; color: rgba(255,200,200,0.7); text-transform: uppercase; } .ft-hero-phone-number { font-family: 'Barlow Condensed', sans-serif; font-size: 38px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: 1px; margin: 4px 0 2px; } .ft-hero-phone-cta { font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 2.5px; color: var(--red-text); text-transform: uppercase; } .ft-hero-badges { max-width: 1100px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .ft-badge { padding: 16px 12px; background: rgba(10,42,94,0.25); border: 1px solid rgba(26,86,200,0.2); text-align: center; } .ft-badge-k { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 6px; } .ft-badge-v { font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 1.5px; color: rgba(184,196,212,0.6); text-transform: uppercase; } .ft-hero-legal { max-width: 1100px; margin: 28px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .ft-hero-legal-left { font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 1.8px; color: rgba(184,196,212,0.35); text-transform: uppercase; } .ft-hero-legal-right { display: flex; gap: 16px; flex-wrap: wrap; } .ft-hero-legal-right a { font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 1.8px; color: rgba(184,196,212,0.45); text-transform: uppercase; text-decoration: none; transition: color 0.15s; } .ft-hero-legal-right a:hover { color: var(--red-text); } @media (max-width: 780px) { .ft-hero { padding: 32px 18px 20px; } .ft-hero-inner { grid-template-columns: 1fr !important; gap: 24px; text-align: center; padding-bottom: 24px; } .ft-hero-brand { text-align: center; } .ft-hero-phone { align-items: center; text-align: center; width: 100%; padding: 16px 20px; } .ft-hero-phone-number { font-size: 34px; } .ft-hero-badges { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; margin-top: 20px; } .ft-badge { padding: 12px 8px; } .ft-badge-k { font-size: 20px; } .ft-hero-legal { flex-direction: column; text-align: center; margin-top: 22px; padding-top: 16px; } .ft-hero-legal-right { justify-content: center; } } @media (max-width: 400px) { .ft-hero-badges { grid-template-columns: 1fr !important; } } /* ============== ACCORDION FOOTER DIRECTORY (all viewports) ============== */ .footer-directory .fd-inner { max-width: 900px !important; margin: 0 auto !important; display: block !important; border: none !important; grid-template-columns: none !important; } .footer-directory details.acc { border: 1px solid rgba(26,86,200,0.2) !important; background: rgba(10,42,94,0.18) !important; margin-bottom: 8px !important; padding: 0 !important; display: block !important; } .footer-directory details.acc:hover { border-color: rgba(201,21,21,0.35) !important; } .footer-directory details.acc[open] { border-color: rgba(201,21,21,0.45) !important; } .footer-directory details.acc::before { display: none !important; } .footer-directory details.acc summary { list-style: none !important; cursor: pointer !important; padding: 16px 22px !important; display: flex !important; align-items: center !important; gap: 14px !important; font-family: 'Barlow Condensed', sans-serif !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #fff !important; user-select: none !important; margin: 0 !important; } .footer-directory details.acc summary::-webkit-details-marker { display: none !important; } .footer-directory details.acc summary::marker { display: none !important; content: '' !important; } .footer-directory .acc-icon { width: 8px; height: 8px; background: var(--red, #C91515); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); flex-shrink: 0; } .footer-directory .acc-title { flex: 1; } .footer-directory .acc-count { font-family: 'Share Tech Mono', ui-monospace, monospace !important; font-size: 10px !important; letter-spacing: 1.5px !important; color: rgba(255,255,255,0.4) !important; font-weight: 400 !important; text-transform: none !important; } .footer-directory .acc-chev { font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 18px; color: var(--red-text); width: 20px; text-align: center; transition: transform 0.2s; } .footer-directory details.acc[open] .acc-chev { transform: rotate(45deg); } .footer-directory .acc-list { list-style: none !important; padding: 0 22px 20px !important; margin: 0 !important; columns: 4 140px; column-gap: 20px; } .footer-directory .acc-list li { break-inside: avoid; margin-bottom: 0 !important; display: block !important; } .footer-directory .acc-list a { display: block !important; font-family: 'Barlow', sans-serif !important; font-size: 13px !important; color: rgba(184,196,212,0.7) !important; text-decoration: none !important; padding: 5px 0 !important; border-bottom: 1px solid transparent !important; transition: color 0.15s, padding-left 0.15s; } .footer-directory .acc-list a:hover { color: #fff !important; padding-left: 6px !important; } @media (max-width: 720px) { .footer-directory details.acc summary { padding: 14px 16px !important; font-size: 13px !important; gap: 10px !important; } .footer-directory .acc-count { font-size: 9px !important; } .footer-directory .acc-list { columns: 2 120px !important; column-gap: 14px !important; padding: 0 16px 16px !important; } .footer-directory .acc-list a { font-size: 12.5px !important; padding: 4px 0 !important; } } @media (max-width: 400px) { .footer-directory .acc-list { columns: 1 !important; } } @media (max-width: 1024px) { /* NAV — tighten */ nav { padding: 0 20px !important; height: 64px !important; } .nav-links { display: none !important; } .burger { display: flex !important; } .nav-phone { font-size: 14px !important; } .logo-main { font-size: 18px !important; } .logo-super { font-size: 9px !important; letter-spacing: 2px !important; } /* ANNOUNCE BAR */ .announce-bar { font-size: 9px !important; letter-spacing: 1.5px !important; padding: 7px 0 !important; } /* HERO — stack vertically */ .hero { flex-direction: column !important; min-height: auto !important; padding: 40px 20px 40px !important; gap: 32px !important; text-align: left; } .hero-left { max-width: 100% !important; flex: 1 1 auto !important; } .hero-bg-stripe { display: none !important; } .hero-h1 { font-size: clamp(40px, 11vw, 68px) !important; line-height: 0.95 !important; } .hero-desc { font-size: 14px !important; line-height: 1.65 !important; margin-bottom: 28px !important; } .hero-btns { gap: 10px !important; } .btn-primary, .btn-outline { padding: 12px 20px !important; font-size: 13px !important; letter-spacing: 1px !important; } /* RADAR HUD — shrink & center */ .hero-radar { align-self: center !important; margin: 0 auto !important; } .radar-wrap { width: 320px !important; height: 320px !important; max-width: 100% !important; } .radar-wrap canvas { width: 100% !important; height: auto !important; } .radar-label-tl, .radar-label-tr, .radar-label-bl, .radar-label-br { font-size: 9px !important; letter-spacing: 1.2px !important; } .radar-status { font-size: 10px !important; letter-spacing: 1.5px !important; } /* STATS GRID — wrap 2x2 then 1 col */ .hero-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; width: 100% !important; margin-top: 8px !important; } .stat-card { padding: 16px 14px !important; } .stat-num { font-size: 30px !important; } .stat-num span { font-size: 14px !important; } .stat-card[data-label]::before { font-size: 9px !important; letter-spacing: 1.2px !important; } } @media (max-width: 640px) { /* Even tighter on phones */ .hero { padding: 28px 18px 36px !important; gap: 24px !important; } .hero-h1 { font-size: clamp(34px, 9vw, 52px) !important; } .hero-desc { margin-bottom: 22px !important; } .hero-stats { grid-template-columns: 1fr 1fr !important; } /* SECTIONS — tighten padding */ section[class*="section"], .services-section, .reviews-section, .areas-section, .form-section, .about-section, .process-section, .faq-section { padding: 48px 18px !important; } .section-h2 { font-size: clamp(26px, 7vw, 40px) !important; } .section-tag { font-size: 11px !important; letter-spacing: 2px !important; } /* SERVICES GRID — 1 col */ .services-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .service-card { padding: 22px !important; } .service-title { font-size: 22px !important; } .service-desc { font-size: 13.5px !important; line-height: 1.6 !important; } /* WHY BAR */ .why-grid { flex-direction: column !important; gap: 0 !important; } .why-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; padding: 18px 0 !important; } .why-item:last-child { border-bottom: none !important; } /* EMERGENCY SECTION */ .emergency-section { grid-template-columns: 1fr !important; gap: 28px !important; padding: 36px 18px !important; } .emergency-phone-block { padding: 26px !important; } .ep-number { font-size: 36px !important; } /* LEAD FORM */ .form-wrap { grid-template-columns: 1fr !important; gap: 28px !important; padding: 0 18px !important; } .form-card { padding: 24px 18px !important; clip-path: none !important; } .form-row { grid-template-columns: 1fr !important; gap: 12px !important; } .form-card input, .form-card select, .form-card textarea { font-size: 15px !important; padding: 12px 14px !important; } /* AREAS GRID */ .areas-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; padding: 0 !important; } .area-pill { padding: 10px 12px !important; font-size: 12px !important; letter-spacing: 0.8px !important; } .areas-section::before { font-size: 48px !important; bottom: -10px !important; right: -10px !important; } /* REVIEWS */ .reviews-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .review-card { padding: 22px !important; } /* ABOUT / INTEL BRIEFING */ .about-inner { grid-template-columns: 1fr !important; gap: 28px !important; } .about-prose h3 { font-size: 18px !important; } .about-prose p { font-size: 14.5px !important; line-height: 1.75 !important; } /* PROCESS STEPS */ .process-steps { grid-template-columns: 1fr 1fr !important; gap: 14px !important; } .process-steps::before { display: none !important; } .proc-step-num { font-size: 20px !important; } /* FAQ */ .faq-q { font-size: 15px !important; padding: 16px 20px !important; } .faq-a p { padding: 0 20px 20px !important; font-size: 14px !important; line-height: 1.75 !important; } /* FOOTER DIRECTORY — mobile stacked */ .footer-directory { padding: 36px 18px 24px !important; } .footer-dir-header { margin: 0 auto 22px !important; } .footer-dir-header-label { font-size: 9px !important; letter-spacing: 3px !important; } .footer-dir-inner { grid-template-columns: 1fr !important; gap: 0 !important; border: 1px solid rgba(26,86,200,0.25) !important; border-radius: 2px; } .footer-dir-col { padding: 20px 18px !important; border-right: none !important; border-bottom: 1px solid rgba(26,86,200,0.15) !important; } .footer-dir-col:last-child { border-bottom: none !important; } .footer-dir-col::before { height: 2px !important; } .footer-dir-title { font-size: 12px !important; letter-spacing: 2px !important; margin-bottom: 12px !important; } .footer-dir-col ul { column-count: 2 !important; column-gap: 14px !important; } .footer-dir-col li { break-inside: avoid !important; page-break-inside: avoid !important; } .footer-dir-inner ul li a { font-size: 12px !important; padding: 5px 0 !important; color: rgba(184,196,212,0.7) !important; } /* FOOTER TOP — mobile stacked */ .footer-top { grid-template-columns: 1fr !important; padding: 32px 18px 24px !important; gap: 26px !important; } .footer-brand .logo-main { font-size: 22px !important; } .footer-brand .logo-super { font-size: 9px !important; letter-spacing: 3px !important; } .footer-brand p { font-size: 13px !important; line-height: 1.6 !important; } .footer-col h4 { font-size: 11px !important; letter-spacing: 2px !important; margin-bottom: 10px !important; } .footer-col ul li { margin-bottom: 6px !important; } .footer-col ul a { font-size: 13.5px !important; } .footer-bottom { padding: 18px !important; flex-direction: column !important; gap: 10px !important; text-align: center !important; font-size: 11px !important; } /* CITY-PAGE DEEP CONTENT (injected blocks) */ .hvz-lead-section { padding: 40px 18px !important; } .hvz-lead-grid { grid-template-columns: 1fr !important; gap: 26px !important; padding: 0 !important; } /* Tighten the injected city-deep sections */ .process-section { padding: 48px 18px !important; } } @media (max-width: 360px) { /* Extra tight phones (iPhone SE and below) */ .hero-h1 { font-size: clamp(30px, 8.5vw, 44px) !important; } .hero-stats { grid-template-columns: 1fr !important; } .areas-grid { grid-template-columns: 1fr !important; } .footer-dir-col ul { column-count: 1 !important; } .section-h2 { font-size: clamp(22px, 7vw, 34px) !important; } } /* mobile-critical */ /* Mobile-critical fixes, measured with Playwright at 320/360/390/414/768. Every rule here answers a specific failure from that run, not a guess. Findings addressed: a.btn-primary 41-42px tall -> the primary CTA was below the 44px minimum on every page at every width a.nav-phone 95-111 x 19 -> the header phone link, the single most important control on a locksmith site button.urgency-btn 211 x 35 a.sc-num 672 x 43 -> one pixel short a.skip-link 181 x 43 -> one pixel short input 662 x 39 span text 9-10px -> below the 12px legibility floor */ /* ---------------------------------------------------------------- targets */ /* WCAG 2.5.5 / Apple HIG want 44px. 48px is used for the primary call actions because they are pressed one-handed, often in the dark, frequently by someone who is already having a bad evening. */ .btn-primary, .btn-secondary, .cta-btn, a.sc-num, button.urgency-btn, .hero-cta a, .form-submit, button[type="submit"] { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding-top: 14px; padding-bottom: 14px; line-height: 1.2; } /* The header phone link was 19px tall — the smallest target on the page and the one most likely to be tapped. */ a.nav-phone, a[href^="tel:"] { min-height: 44px; display: inline-flex; align-items: center; } /* Inline tel: links inside running prose keep their natural flow; padding there would break the line box. The rule above targets standalone links. */ p a[href^="tel:"], li a[href^="tel:"] { min-height: 0; display: inline; } a.skip-link { min-height: 44px; display: inline-flex; align-items: center; } input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 48px; font-size: 16px; /* under 16px iOS Safari zooms the whole page on focus */ } /* ------------------------------------------------------------- legibility */ /* 9-10px spans were measured on live pages. 12px is the floor; the monospace kicker text reads smaller than its nominal size so it gets 13px. */ body { -webkit-text-size-adjust: 100%; } @media (max-width: 900px) { .section-tag, .acc-count, .gr-meta, .slk-fact-src, .footer-license, .announce-ticker, small { font-size: 13px !important; letter-spacing: 1.5px; } span, .stat-label, .trust-label { font-size: max(12px, 1em); } } /* ------------------------------------------------------- sticky call bar */ /* A locksmith page is read by someone who wants to call, so the number should never be more than a thumb away. Sits above the fold-line on scroll, is hidden on desktop, and reserves its own space so it never covers content. */ @media (max-width: 900px) { body { padding-bottom: 72px; } .mobile-call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(6, 22, 48, 0.97); border-top: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px); } .mobile-call-bar a { flex: 1 1 auto; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; border-radius: 2px; } .mobile-call-bar .mcb-call { background: var(--red-bright, #E02020); color: #fff; flex: 2 1 auto; } .mobile-call-bar .mcb-quote { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); } .mobile-call-bar a:focus-visible { outline: 3px solid #FFC53D; outline-offset: 2px; } } @media (min-width: 901px) { .mobile-call-bar { display: none; } } /* ------------------------------------------------------------ void spots */ /* Card rows are flex-with-grow so a final short row fills the width instead of leaving orphan gaps. Fixed column counts strand items whenever the count is not a multiple of the column count. */ .services-grid, .trust-grid, .why-grid, .steps-grid, .gr-grid, .slk-fact-grid, .areas-grid { display: flex; flex-wrap: wrap; gap: 16px; } .services-grid > *, .trust-grid > *, .why-grid > *, .steps-grid > *, .gr-grid > *, .slk-fact-grid > * { flex: 1 1 260px; } .areas-grid > * { flex: 0 1 auto; } /* A section whose only child is an empty container collapses to a band of dead space. Height is driven by content rather than a fixed minimum. */ section:empty, div:empty:not([class*="rule"]):not([class*="divider"]):not([class*="bar"]) { display: none; } /* ---- second pass: the exact offenders the Playwright probe named --------- Measured at 390px on the live site after the first pass. Targeted by their real selectors rather than broad element rules, so nothing else moves. */ @media (max-width: 900px) { /* Footer site-directory links were 151x24. Padding brings each to 44px and the two-column layout stops a 53-city list becoming an endless scroll. */ /* !important here only because FOOTER_OPEN_CSS already uses it on the same property; without matching it the grid never applies. */ .acc-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; } .acc-list li { margin: 0; } .acc-list li a, .acc-list a, .footer-col li a { display: flex !important; align-items: center; min-height: 44px !important; padding: 4px 6px 4px 0; font-size: 14px; line-height: 1.25; } /* Breadcrumb links were 30x11 — the smallest targets on the page. */ .breadcrumb-inner a, .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; } /* The contact email link was 178x16. */ .info-val a { display: inline-flex; align-items: center; min-height: 44px; } /* Text measured at 9-11px. 12px is the floor; the logo lockup keeps its proportions because both lines scale together. */ .logo-super, .logo-sub, .rc-badge, .form-note, .ect-sub, .contact-hero-tag { font-size: 12px !important; letter-spacing: 1px; } .logo-sub { letter-spacing: .5px; } } /* The announce ticker is a marquee: it is intentionally wider than the viewport and lives inside an overflow-hidden rail, which is why the page reports overflow=0 while the span measures ~1800px. Pinning the rail makes that explicit so the element is not mistaken for a layout defect. */ .announce-bar { overflow: hidden; max-width: 100%; } /* ---- third pass: the static service/legal pages use a THIRD footer shape --- The site has three different footer markups depending on how a page is built: .acc-list (rebuilt pages), .footer-col, and .footer-dir-col on the 13 hand-written service/legal pages whose footer the build never rebuilds. Missing the third is why those links stayed 151x24 after two passes. */ @media (max-width: 900px) { .footer-dir-col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; } .footer-dir-col ul li { margin: 0; } .footer-dir-col ul li a { display: flex !important; align-items: center; min-height: 44px !important; padding: 4px 6px 4px 0; font-size: 14px; line-height: 1.25; } /* Short breadcrumb links measured 36px wide. Padding gives the horizontal hit area without stretching the visible text. */ .breadcrumb-inner a, .breadcrumbs a { min-width: 44px; padding: 0 6px; justify-content: center; } } /* ---- fourth pass --------------------------------------------------------- Measured after cache-busting the probe. The earlier runs were reading a CDN-cached page, which is why fixes looked inert; always bust the cache before concluding a rule does not apply. */ @media (max-width: 900px) { /* City pills in the service-areas grid were 36px tall. */ a.area-pill { min-height: 44px; display: inline-flex; align-items: center; padding: 6px 12px; } /* Decorative HUD labels rendered at 9-11px. They are stylistic, but text is text — a visitor still has to read the city name in the radar status. */ .hero-tag, .radar-status, .service-num { font-size: 12px !important; } .radar-label-tl, .radar-label-tr, .radar-label-bl, .radar-label-br { font-size: 12px !important; letter-spacing: .5px; } /* 7px of horizontal overflow at 320px on the contact page. Nothing should force the layout wider than the viewport at the narrowest supported size. */ .contact-hero, .contact-grid, .info-row { max-width: 100%; overflow-wrap: anywhere; } * { min-width: 0; } } /* ---- fifth pass: last measured offenders --------------------------------- */ @media (max-width: 900px) { /* Citation links under each data card (16px) and the footer legal row (11px). */ a.slk-fact-src { min-height: 44px; display: inline-flex; align-items: center; } .ft-hero-legal-right a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 13px; } .ft-hero-legal-right { display: flex; flex-wrap: wrap; gap: 4px; } .emergency-badge, .ep-label, .ep-sub { font-size: 12px !important; } } /* ---- sixth pass: form legibility ----------------------------------------- Error messages were 11px. That is the text a visitor reads at exactly the moment something has gone wrong with the form, so it is the last place to economise on size. */ @media (max-width: 900px) { .form-header-sub, .urgency-label, .form-error-msg { font-size: 13px !important; } .form-error-msg { line-height: 1.4; } } /* ---- seventh pass: the hand-written service/legal pages ------------------- These carry their own hero and footer markup, so they needed their own selectors rather than inheriting the template fixes. */ @media (max-width: 900px) { .page-hero-tag { font-size: 12px !important; } .svc-num { font-size: 12px !important; } /* Footer legal row on the static pages: unclassed links inside a bare div. */ .ft-legal a, .footer-legal a, .ft-hero-legal a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 13px; } } @media (max-width: 900px) { .sc-label { font-size: 12px !important; } } /* ---- eighth pass: last small-text offenders, both page shapes ------------- */ @media (max-width: 900px) { .sc-sub, .price-note, .region-title, .form-disclaimer, .trust-badge, .form-group label, label { font-size: 12px !important; } .region-title { letter-spacing: 1.5px; } /* the "CHAPTER 493 COMPLIANT" strip is an unclassed span in a trust row */ .trust-item span, .trust-row span { font-size: 12px !important; } } /* ---- ninth pass: footer typography --------------------------------------- Every remaining sub-12px element lives in the footer. Several are set by rules more specific than the earlier .acc-count fix, so these are scoped to the footer containers to win on specificity rather than piling on more !important at the same level. */ @media (max-width: 900px) { .footer-directory .footer-dir-header-label, .footer-directory .acc-count, .acc .acc-head .acc-count, .ft-hero-inner .ft-logo-super, .ft-hero-inner .ft-hero-phone-label, .ft-hero-inner .ft-hero-phone-cta, .ft-hero-badges .ft-badge-v { font-size: 12px !important; letter-spacing: .8px; } } @media (max-width: 900px) { .ft-hero-legal .ft-hero-legal-left, .ft-hero-legal .ft-hero-legal-right { font-size: 12px !important; line-height: 1.6; } } /* ---- tenth pass: the static pages' own footer (a fourth footer shape) ----- */ @media (max-width: 900px) { .footer-top .footer-brand .logo-super, .footer-col ul li, .footer-bottom p { font-size: 12px !important; line-height: 1.6; } } /* ---- eleventh pass: contact page labels ---------------------------------- "Phone", "Email", "Walk-In Location" were 9px. These label the most important information on the contact page. */ @media (max-width: 900px) { .info-row .info-label, .emergency-cta .ect-label { font-size: 12px !important; letter-spacing: 1px; } } /* ---- twelfth pass: contact page cards ------------------------------------ */ @media (max-width: 900px) { .hours-card .hours-note, .license-card .license-text, .license-card .license-text strong { font-size: 12px !important; line-height: 1.6; } } /* layout-pockets: no empty space -- card rows are flex-with-grow (portfolio rule). Pass 13. The area pills and the generators' inline auto-fit grids left last-row pockets of 400-970px at desktop widths. Inline display:grid can only be beaten with !important; the children carry no inline flex props, so their rule needs none. */ .areas-grid{display:flex;flex-wrap:wrap;} .area-pill{flex:1 1 auto;text-align:center;} .related-grid{display:flex;flex-wrap:wrap;} .related-grid>*{flex:1 1 220px;} main [style*="repeat(auto-fit"]{display:flex!important;flex-wrap:wrap!important;} main [style*="repeat(auto-fit"]>*{flex:1 1 260px;min-width:240px;} main [style*="repeat(auto-fill"]{display:flex!important;flex-wrap:wrap!important;} main [style*="repeat(auto-fill"]>*{flex:1 1 220px;min-width:200px;} /* gradient buttons: an explicit background-color under the gradient, so the colour survives gradient-off rendering and reads correctly to tooling */ .btn-primary{background-color:var(--red);} .btn-outline{background-color:#12294D;} /* tap target: brand link was 42px tall at 768 */ a.nav-logo{min-height:44px;display:inline-flex;align-items:center;} /* nav-phone nowrap: the header number wrapped mid-digits at 390px */ .nav-phone{white-space:nowrap;} @media(max-width:480px){.nav-phone{font-size:13px;letter-spacing:0;}} /* why-basis-fix: mobile-polish stacks .why-grid into a column at <=640px, and there the portfolio grow rule's flex-basis:300px becomes a HEIGHT basis -- every item ballooned to 260px with ~130px of dead space. In a column the basis must be content-sized. */ @media(max-width:640px){ .why-grid > *{flex-basis:auto;} .why-bar{padding:40px 24px;} } /* voids-round3 ---------------------------------------------------------- */ /* 1. about section: kill the half-void two-column grid */ .about-inner{display:block;} .about-prose .ap-grid{flex-direction:row;flex-wrap:wrap;gap:16px;} .about-prose .ap-grid .ap-card{flex:1 1 460px;} .about-aside{flex-direction:row;flex-wrap:wrap;gap:14px;margin-top:16px;} .about-aside .aside-card{flex:1 1 300px;} /* 2. quote form: centre the short column; the CTA block fills the rest */ .form-wrap{align-items:center;} .fl-call-block{margin-top:26px;padding:20px 22px;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--red); border-radius:10px;} .fl-call-label{display:block;font-family:'Share Tech Mono',ui-monospace,monospace; font-size:12px;letter-spacing:2px;text-transform:uppercase; color:rgba(255,255,255,.75);margin-bottom:10px;} .fl-call-block .btn-call{width:100%;box-sizing:border-box;align-items:center;justify-content:center;} /* 3. site directory: compact, links stay visible */ .footer-directory{padding:44px 32px 40px;} .footer-directory .acc{margin-bottom:18px;} .footer-directory .acc-head{margin-bottom:6px;} .footer-dir-inner ul li a,.acc-list li a{padding:3px 0;font-size:12.5px;} .acc-list{columns:4;column-gap:22px;} .acc-list li{break-inside:avoid;} @media(max-width:900px){.acc-list{columns:3;}} @media(max-width:700px){ .footer-directory{padding:32px 18px 28px;} .acc-list{columns:2;column-gap:14px;} .acc-list li a{padding:3px 0;font-size:12px;} .footer-directory .acc{margin-bottom:14px;} } /* 4. nav phone: give the glyph a real box; number only on tiny screens */ .nav-phone span{display:inline-block;margin-right:7px;min-width:1em;text-align:center;} @media(max-width:480px){.nav-phone span{display:none;}} /* voids-round3b: mobile-polish arms its directory rules with !important and at <=400px forces columns:1 -- which is what a 390px phone gets, hence one link per row and a 3,445px directory. This file is injected LAST, so equal-specificity !important here wins the tie. */ .footer-directory .acc-list a{font-size:12.5px !important;padding:3px 0 !important;} .footer-directory .acc-list{padding:0 22px 12px !important;} .footer-directory .footer-dir-header{margin-bottom:14px !important;} @media (max-width: 720px){ .footer-directory .acc-list a{font-size:12px !important;padding:3px 0 !important;} } @media (max-width: 400px){ .footer-directory .acc-list{columns:2 120px !important;} } /* voids-round3c: the directory lists ignored multicol under three layers of !important, and this file's own 44px tap rule made every row 44px tall -- 33 cities x 44px is most of a 3,400px footer. Flex half-width rows bypass multicol entirely. 30px rows are a deliberate density exception for this dense navigation list (WCAG 2.5.8 spacing provision); every other tap target on the site keeps 44px. */ @media(max-width:720px){ .footer-directory .acc-list{display:flex !important;flex-wrap:wrap !important; columns:auto !important;gap:0 !important;padding:0 16px 10px !important;} .footer-directory .acc-list li{flex:0 0 50%;margin:0 !important;min-width:0;} .footer-directory .acc-list a{min-height:30px !important; padding:4px 8px 4px 0 !important;font-size:12px !important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} } /* brand sub-line wraps at tiny widths; the wordmark carries the identity */ @media(max-width:480px){.logo-sub{display:none;}} /* hscroll-rows: mobile card sections become swipeable horizontal rows. The stacked 1-column layout put ~17,000px under a 390px thumb. Cards sit at ~78vw so the next card peeks past the edge -- that peek IS the scroll affordance -- with snap points and a thin branded scrollbar. Desktop is untouched. Traps this respects, all hit earlier this session: - mobile-polish arms .why-grid { flex-direction:column !important } at <=640px; equal-specificity !important later in the cascade (this file is injected last) is the only thing that beats it. - no negative-margin edge bleed: parent padding varies per section and an unlucky pairing reopens page-level horizontal scroll. - the audits only flag elements WIDER than the viewport; a scroller's box stays at container width, so these rows pass clean. */ @media(max-width:700px){ .services-grid, .why-grid, .gr-grid, .process-steps, .ap-grid, .about-aside, .slk-lb-grid, .slk-fact-grid, .slk-eta-row, .slk-cases, .trust-grid, .steps-grid, .related-grid{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto; gap:12px !important; padding:4px 2px 14px !important; scroll-snap-type:x mandatory; scroll-padding-left:2px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--red) rgba(255,255,255,.08); } .services-grid::-webkit-scrollbar, .why-grid::-webkit-scrollbar, .gr-grid::-webkit-scrollbar, .process-steps::-webkit-scrollbar, .ap-grid::-webkit-scrollbar, .about-aside::-webkit-scrollbar, .slk-lb-grid::-webkit-scrollbar, .slk-fact-grid::-webkit-scrollbar, .slk-eta-row::-webkit-scrollbar, .slk-cases::-webkit-scrollbar, .trust-grid::-webkit-scrollbar, .steps-grid::-webkit-scrollbar, .related-grid::-webkit-scrollbar{height:4px;} .services-grid::-webkit-scrollbar-thumb, .why-grid::-webkit-scrollbar-thumb, .gr-grid::-webkit-scrollbar-thumb, .process-steps::-webkit-scrollbar-thumb, .ap-grid::-webkit-scrollbar-thumb, .about-aside::-webkit-scrollbar-thumb, .slk-lb-grid::-webkit-scrollbar-thumb, .slk-fact-grid::-webkit-scrollbar-thumb, .slk-eta-row::-webkit-scrollbar-thumb, .slk-cases::-webkit-scrollbar-thumb, .trust-grid::-webkit-scrollbar-thumb, .steps-grid::-webkit-scrollbar-thumb, .related-grid::-webkit-scrollbar-thumb{background:var(--red);border-radius:2px;} .services-grid > *, .why-grid > *, .gr-grid > *, .process-steps > *, .ap-grid > *, .about-aside > *, .slk-lb-grid > *, .slk-fact-grid > *, .slk-eta-row > *, .slk-cases > *, .trust-grid > *, .steps-grid > *, .related-grid > *{ flex:0 0 78vw !important; max-width:330px; scroll-snap-align:start; box-sizing:border-box; } /* smaller units read better narrower */ .slk-fact-grid > *, .slk-eta-row > *, .slk-cases > *, .why-grid > *{ flex-basis:64vw !important; max-width:280px; } /* why items were a divider list in the column design; as row cards they need card framing */ .why-grid > .why-item{background:var(--surface-2); border:1px solid var(--light-gray);border-radius:10px; border-bottom:1px solid var(--light-gray) !important;padding:16px 18px;} /* 53 area pills: three stacked rows that scroll sideways together */ .areas-grid{display:grid !important;grid-auto-flow:column; grid-template-rows:repeat(3,auto);grid-auto-columns:max-content; overflow-x:auto;gap:8px !important;justify-content:start; padding:4px 2px 12px !important; scrollbar-width:thin;scrollbar-color:var(--red) rgba(255,255,255,.08);} .areas-grid::-webkit-scrollbar{height:4px;} .areas-grid::-webkit-scrollbar-thumb{background:var(--red);border-radius:2px;} .areas-grid .area-pill{flex:none;width:auto;min-width:72px; padding:10px 14px;text-align:center;box-sizing:border-box;} } /* hscroll-inline: the generators emit card grids as INLINE style attributes (repeat(auto-fit,...)), so the class-based row conversion never touched them -- city pages kept 6-card stacks. Same row treatment; inline display:grid needs !important to beat. */ @media(max-width:700px){ main [style*="repeat(auto-fit"], main [style*="repeat(auto-fill"]{ display:flex !important;flex-wrap:nowrap !important;overflow-x:auto; gap:12px !important;padding:4px 2px 14px !important; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--red) rgba(255,255,255,.08); } main [style*="repeat(auto-fit"]::-webkit-scrollbar, main [style*="repeat(auto-fill"]::-webkit-scrollbar{height:4px;} main [style*="repeat(auto-fit"]::-webkit-scrollbar-thumb, main [style*="repeat(auto-fill"]::-webkit-scrollbar-thumb{background:var(--red);border-radius:2px;} main [style*="repeat(auto-fit"] > *, main [style*="repeat(auto-fill"] > *{ flex:0 0 78vw !important;max-width:330px;min-width:0; scroll-snap-align:start;box-sizing:border-box; } } /* hscroll-pairs: the local-vs-callcentre card pair (inline 1fr 1fr grid) and the neighbourhood callout pairs (inside max-width:920px wrappers) were the last 900-1,650px stacks on city pages. .proc-wrap is excluded -- it is a 920px wrapper too, but it holds the whole overview flow, not a card set. */ @media(max-width:700px){ main [style*="grid-template-columns:1fr 1fr"]{ display:flex !important;flex-wrap:nowrap !important;overflow-x:auto; gap:12px !important;padding:4px 2px 14px !important; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--red) rgba(255,255,255,.08);} main [style*="grid-template-columns:1fr 1fr"]::-webkit-scrollbar{height:4px;} main [style*="grid-template-columns:1fr 1fr"]::-webkit-scrollbar-thumb{background:var(--red);border-radius:2px;} main [style*="grid-template-columns:1fr 1fr"] > *{ flex:0 0 84vw !important;max-width:360px;min-width:0;scroll-snap-align:start;box-sizing:border-box;} main [style*="max-width:920px"]:not(.proc-wrap){ display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px; padding:4px 2px 14px !important;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--red) rgba(255,255,255,.08);} main [style*="max-width:920px"]:not(.proc-wrap)::-webkit-scrollbar{height:4px;} main [style*="max-width:920px"]:not(.proc-wrap)::-webkit-scrollbar-thumb{background:var(--red);border-radius:2px;} main [style*="max-width:920px"]:not(.proc-wrap) > .slk-callout{ flex:0 0 84vw;max-width:360px;min-width:0;scroll-snap-align:start; box-sizing:border-box;margin:0;} }