/* ========================================================================== CP6 — shared UI (Phase C). Loaded on every Astro page from BaseLayout; NOT loaded on the funnel pages (sell-car.html, es/offer.html), which are static passthroughs and keep their own chrome. Contents 1. T11 fonts — self-hosted @fontsource files (no external requests). 2. T7 headings — line-height 1.1-1.15 baseline. 3. T5 inline icons — Lucide, stroke 1.75, currentColor. 4. T7 tap targets — >= 44px, mobile menu rows >= 48px. 5. T6 footer social row. Font swap rationale: the served minified bundles name 'Hind'/'Outfit' ONLY inside @font-face blocks and use var(--font-head)/var(--font-body) everywhere else (verified). These bundles are shared with the frozen funnel (wizard.min.css -> es/offer.html, sell-car-chrome.css -> sell-car.html), so instead of editing them we redefine the tokens and declare the new faces here, on site pages only. Documented weights (from @fontsource, latin + latin-ext subsets): Barlow 400 (body) / 600 / 700 Barlow Semi Cond. 600 / 700 / 800 (display + headings) IBM Plex Mono 400 / 600 (code / tabular data) ========================================================================== */ /* --- 1. Fonts (T11) -------------------------------------------------------- */ /* Barlow — body text */ @font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* Barlow Semi Condensed — display + headings */ @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-semi-condensed-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-semi-condensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-semi-condensed-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-semi-condensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/barlow-semi-condensed-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/barlow-semi-condensed-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* IBM Plex Mono — code / tabular data (role token only; fetched if used) */ @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* Role tokens. Later stylesheet than the served bundle, equal specificity, so these win on site pages; the funnel never loads this file. */ :root{ --font-head:'Barlow Semi Condensed', sans-serif; --font-body:'Barlow', sans-serif; --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* --- 2. Headings (T7): computed line-height 1.1-1.15 ---------------------- Element rule (equal specificity to the bundle's bare heading rules, later in the cascade so it wins), plus explicit overrides for the class-scoped heading rules that hard-code values outside the range. Verified by computed-style measurement on representative pages. */ h1,h2,h3,h4,h5,h6{line-height:1.12} .hero h1,.vehicle-hero-clean h1,.footer-cta h2,.blog-card h3,.bento-lime h3{line-height:1.12} /* --- 3. Inline icons (T5): Lucide, stroke 1.75, currentColor -------------- */ .lucide{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .lang-btn .lucide,.chat-btn-desktop .lucide{width:20px;height:20px} .phone-number .lucide{width:17px;height:17px} .btn-mobile-action .lucide{width:18px;height:18px} .lang-popup .lucide{width:18px;height:18px} /* --- 4. Tap targets (T7): true >= 44x44 bounding boxes --------------------- */ .lang-btn,.chat-btn-desktop{width:44px;height:44px} .phone-number{height:44px} .nav-cta .btn-primary{height:44px} .mobile-action-bar .btn-mobile-action{min-height:44px} /* menu toggle: 44x44 hit area, bars centred */ #nav-icon{width:44px;height:44px} #nav-icon span{width:24px;left:10px} #nav-icon span:nth-child(1){top:14px} #nav-icon span:nth-child(2){top:21px} #nav-icon span:nth-child(3){top:28px} #nav-icon.open span:nth-child(1){transform:rotate(45deg);top:21px;left:12px} #nav-icon.open span:nth-child(3){transform:rotate(-45deg);top:21px;left:12px} /* footer link targets: real 44x44, not height-only */ .footer-col ul li{margin-bottom:0} .footer-col ul li a,.sub-footer a{display:inline-flex;align-items:center;min-height:44px;min-width:44px} .social-bar a,.footer-social .social-bar a{min-width:44px;min-height:44px} @media(max-width:768px){ .nav-links a,.dropdown-trigger{min-height:48px;display:flex;align-items:center;justify-content:center} .dropdown-menu a{min-height:48px;display:flex;align-items:center} .mobile-menu-ctas .btn-primary,.mobile-menu-ctas .btn-outline{min-height:48px;display:flex;align-items:center;justify-content:center} /* header grows by the 44px action-bar row: keep the content offset correct */ .content-area{margin-top:146px} } /* --- 5. Footer social row (T6) -------------------------------------------- */ .footer-social{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.2)} .footer-social .social-bar{padding:0;justify-content:flex-start;flex-wrap:wrap} .footer-social .social-bar a{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.3);color:var(--on-green)} .footer-social .social-bar a:hover{background:#fff;border-color:#fff;color:var(--neon-lime-text);transform:translateY(-2px)} /* The Nextdoor mark is a wordmark: at 19px inside a 44px circle it is an illegible blob. Render the official glyph at a legible size in a wider (still >=44px tall) chip; the label/link are unchanged. */ .footer-social .social-bar a[aria-label="Nextdoor"]{width:auto;min-width:44px;height:44px;padding:0 14px;border-radius:22px} .footer-social .social-bar a[aria-label="Nextdoor"] svg{width:auto;height:16px} /* --- 6. Remaining tap targets (T7): real >=44x44 boxes -------------------- Classless content links (breadcrumbs, prose/help links, phone links, city list, verified badge) get real inline-flex boxes with min 44x44. Button links keep their own class-based sizing. The only visual effect is a taller line box on lines that contain a link. */ main a[aria-label*="verified"]{min-height:44px} .breadcrumb-bar{row-gap:4px} .breadcrumb-bar a{display:inline-flex;align-items:center;min-height:44px} .qw-tab{min-height:44px} main a:not([class]){display:inline-flex;align-items:center;min-height:44px;min-width:44px} .blog-pagination button{height:44px} .blog-pagination .page-num{width:44px;min-width:44px} /* --- 7. Opened menu + keyboard (T7/T5) ------------------------------------ Dropdown triggers are now native