/* ═══════════════════════════════════════════════════════════════ bv-site-text.css — Site-wide typography accessibility pass ─────────────────────────────────────────────────────────────── Goal: minimum 17-18px body text, bold/larger headings, and easy- to-read nav + footer across every Brightview Homes page. Target audience is 35-65 yrs old, readability matters. Loaded LAST in so it wins the cascade against earlier page-specific styles. ═══════════════════════════════════════════════════════════════ */ /* ── Base body text ── */ html, body { font-size: 18px; line-height: 1.6; } /* ── Generic content elements ── */ p, li, dd, blockquote { font-size: 18px; line-height: 1.6; font-weight: 500; } /* ── Table cells (generic, excluding component tables) ── */ table:not(.proof-table):not(.compare-table) td, table:not(.proof-table):not(.compare-table) th { font-size: 17px; } /* ── Headings ── */ h1 { font-size: 52px; font-weight: 700; line-height: 1.08; } h2 { font-size: 40px; font-weight: 700; line-height: 1.12; } h3 { font-size: 27px; font-weight: 700; line-height: 1.2; } h4 { font-size: 22px; font-weight: 700; line-height: 1.25; } h5 { font-size: 18px; font-weight: 700; } /* ── Form controls — 16px+ prevents iOS auto-zoom on focus ── */ input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], input[type="date"], select, textarea { font-size: 17px !important; } label, .field-label { font-size: 16px; font-weight: 600; } /* ── Generic buttons + CTA links ── */ button, .btn, .cta-btn, input[type="submit"], input[type="button"] { font-size: 18px; font-weight: 700; } /* ── Common Brightview component classes (gentle overrides) ── */ .section-title { font-size: 44px; font-weight: 700; line-height: 1.08; } .section-sub { font-size: 20px; font-weight: 500; line-height: 1.55; } .section-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .14em; } /* ══════════════════════ HEADER NAV — enlarged for visibility ══════════════════════ */ /* Nav height bumped so larger text fits. !important on the variable wins page-level overrides. */ :root { --nav-h: 82px !important; } .bv-nav { height: 82px !important; padding: 0 1.75rem !important; } /* Logo */ .nav-logo img { height: 54px !important; } /* Menu links — bigger and bolder */ .nav-links { gap: 2.25rem !important; } .nav-links a { font-size: 18px !important; font-weight: 600 !important; color: rgba(255,255,255,.95) !important; letter-spacing: .01em !important; } /* "Contact Us" CTA button */ .nav-cta { font-size: 17px !important; font-weight: 700 !important; padding: 12px 26px !important; border-width: 2px !important; } /* Phone number — most prominent thing in the nav */ .nav-phone { font-size: 27px !important; font-weight: 700 !important; letter-spacing: 0 !important; } .nav-phone svg { width: 22px !important; height: 22px !important; } /* Hamburger touch target */ .nav-hamburger { width: 50px !important; height: 50px !important; } /* Mobile nav overlay links — tappable + readable */ .mobile-nav-links a { font-size: 23px !important; font-weight: 700 !important; padding: 1.2rem 1.75rem !important; min-height: 68px !important; } .mobile-nav-cta button { font-size: 17px !important; font-weight: 700 !important; padding: 18px 22px !important; min-height: 56px !important; } /* ══════════════════════ FOOTER — enlarged for readability ══════════════════════ */ .footer-col a, .footer-brand p, .footer-brand-addr { font-size: 16px !important; font-weight: 500 !important; line-height: 1.65 !important; } .footer-col-title { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .14em !important; } .footer-brand-logo { font-size: 24px !important; } .footer-brand-phone { font-size: 26px !important; font-weight: 700 !important; } .footer-copyright { font-size: 13px !important; line-height: 1.7 !important; } .footer-legal-links a { font-size: 13px !important; font-weight: 500 !important; } /* Mobile call bar stays at its original sizes (set on each page) */ .mobile-call-bar, .mobile-call-bar * { font-size: revert; font-weight: revert; line-height: revert; } /* ── Fine print: TCPA / consent / legal copy ── */ .hero-form-consent, .consent-copy, .fine-print, small { font-size: 12.5px; font-weight: 400; } /* ══════════════════════ MOBILE (≤768px) ══════════════════════ */ @media (max-width: 768px) { html, body { font-size: 17px; line-height: 1.55; } p, li, dd, blockquote { font-size: 17px; } h1 { font-size: 38px; } h2 { font-size: 32px; } h3 { font-size: 24px; } h4 { font-size: 20px; } .section-title { font-size: 34px; } .section-sub { font-size: 18px; } button, .btn, input[type="submit"] { font-size: 17px; } /* Mobile nav — bigger but compact */ :root { --nav-h: 72px !important; } .bv-nav { height: 72px !important; padding: 0 1rem !important; } .nav-logo img { height: 46px !important; } .nav-phone { font-size: 21px !important; font-weight: 700 !important; } .nav-phone svg { width: 17px !important; height: 17px !important; } /* Mobile footer */ .footer-col a, .footer-brand p, .footer-brand-addr { font-size: 16px !important; } .footer-col-title { font-size: 13px !important; } .footer-brand-phone { font-size: 24px !important; } }