/* ───────────────────────────────────────────────────────────── BK WIRELESS — Design Tokens Locked 2026-04-29. Source of truth for colors, type, spacing, motion. Loaded BEFORE bk-chrome.css and any page-specific styles. Reference league: Apple Support / Stripe / Verizon retail / iFixit / CPR. ───────────────────────────────────────────────────────────── */ :root { /* ═══ COLORS ═══ */ --bk-red: #c41e3a; --bk-red-dark: #a01629; --bk-red-light: #e84258; --bk-black: #0A0A0A; --bk-charcoal: #1a1a1a; --bk-charcoal-2: #2a2a2a; --bk-offwhite: #fafafa; --bk-white: #ffffff; --bk-text: #0A0A0A; --bk-text-2: #3d3d3d; --bk-text-mute: #6b6b6b; --bk-text-soft: #9a9a9a; --bk-border: #2a2a2a; /* on dark surfaces */ --bk-border-light: #e5e5e5; /* on light surfaces */ --bk-border-soft: #f0f0f0; /* Semantic */ --bk-success: #1f7a3a; --bk-warning: #b58300; --bk-error: #b22a2a; /* ═══ TYPOGRAPHY ═══ */ --bk-font-display: 'Bebas Neue', system-ui, -apple-system, sans-serif; --bk-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Type scale (mobile-first; desktop adjusts via @media) */ --bk-fs-xs: 12px; --bk-fs-sm: 14px; --bk-fs-base: 16px; --bk-fs-lg: 18px; --bk-fs-xl: 22px; --bk-fs-2xl: 28px; --bk-fs-3xl: 36px; --bk-fs-4xl: 48px; --bk-fs-5xl: 64px; --bk-fs-display: 80px; /* Line heights */ --bk-lh-tight: 1.1; --bk-lh-snug: 1.3; --bk-lh-normal: 1.5; --bk-lh-relaxed: 1.65; /* Letter spacing */ --bk-ls-tight: -0.02em; --bk-ls-normal: 0; --bk-ls-wide: 0.02em; --bk-ls-display: 0.5px; --bk-ls-eyebrow: 1.5px; /* Font weights */ --bk-fw-normal: 400; --bk-fw-medium: 500; --bk-fw-semibold: 600; --bk-fw-bold: 700; /* ═══ SPACING ═══ (8px base scale) */ --bk-sp-1: 4px; --bk-sp-2: 8px; --bk-sp-3: 12px; --bk-sp-4: 16px; --bk-sp-5: 20px; --bk-sp-6: 24px; --bk-sp-8: 32px; --bk-sp-10: 40px; --bk-sp-12: 48px; --bk-sp-16: 64px; --bk-sp-20: 80px; --bk-sp-24: 96px; --bk-sp-32: 128px; /* Section padding (mobile / desktop) */ --bk-section-y-mobile: 48px; --bk-section-y-desktop: 96px; --bk-section-x-mobile: 20px; --bk-section-x-desktop: 32px; /* ═══ LAYOUT ═══ */ --bk-container: 1240px; --bk-container-narrow: 920px; --bk-container-wide: 1440px; --bk-radius-sm: 4px; --bk-radius: 6px; --bk-radius-lg: 10px; --bk-radius-pill: 999px; /* ═══ ELEVATION ═══ (subtle — restraint mandate) */ --bk-shadow-sm: 0 1px 2px rgba(10,10,10,0.04); --bk-shadow: 0 2px 8px rgba(10,10,10,0.06); --bk-shadow-lg: 0 8px 24px rgba(10,10,10,0.08); /* ═══ MOTION ═══ */ --bk-ease: cubic-bezier(.4,0,.2,1); --bk-ease-out: cubic-bezier(0,0,.2,1); --bk-dur-fast: 120ms; --bk-dur: 200ms; --bk-dur-slow: 320ms; /* ═══ Z-INDEX ═══ */ --bk-z-base: 1; --bk-z-sticky: 100; --bk-z-header: 1000; --bk-z-overlay: 5000; --bk-z-modal: 9000; --bk-z-bottom-bar: 999; } /* ═══════════════════════════════════════════ BASE — applies to anything inheriting from ═══════════════════════════════════════════ */ body { font-family: var(--bk-font-body); font-size: var(--bk-fs-base); line-height: var(--bk-lh-relaxed); color: var(--bk-text); background: var(--bk-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ═══════════════════════════════════════════ HEADINGS — Bebas Neue ONLY for display H1; Inter elsewhere ═══════════════════════════════════════════ */ h1, .bk-h1 { font-family: var(--bk-font-display); font-size: var(--bk-fs-4xl); line-height: var(--bk-lh-tight); letter-spacing: var(--bk-ls-display); font-weight: var(--bk-fw-normal); color: var(--bk-text); margin: 0; } @media (min-width: 768px) { h1, .bk-h1 { font-size: var(--bk-fs-5xl); } } @media (min-width: 1024px) { h1, .bk-h1 { font-size: var(--bk-fs-display); } } h2, .bk-h2 { font-family: var(--bk-font-body); font-size: var(--bk-fs-2xl); line-height: var(--bk-lh-snug); letter-spacing: var(--bk-ls-tight); font-weight: var(--bk-fw-semibold); color: var(--bk-text); margin: 0; } @media (min-width: 768px) { h2, .bk-h2 { font-size: var(--bk-fs-3xl); } } h3, .bk-h3 { font-family: var(--bk-font-body); font-size: var(--bk-fs-xl); line-height: var(--bk-lh-snug); font-weight: var(--bk-fw-semibold); color: var(--bk-text); margin: 0; } h4, .bk-h4 { font-family: var(--bk-font-body); font-size: var(--bk-fs-lg); line-height: var(--bk-lh-snug); font-weight: var(--bk-fw-semibold); color: var(--bk-text); margin: 0; } p { margin: 0 0 var(--bk-sp-4); } /* Eyebrow — small uppercase label above headlines */ .bk-eyebrow { font-family: var(--bk-font-body); font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-semibold); text-transform: uppercase; letter-spacing: var(--bk-ls-eyebrow); color: var(--bk-red); margin: 0 0 var(--bk-sp-3); } /* ═══════════════════════════════════════════ LINKS ═══════════════════════════════════════════ */ a { color: var(--bk-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--bk-dur-fast) var(--bk-ease); } a:hover { color: var(--bk-red); } /* ═══════════════════════════════════════════ CONTAINERS ═══════════════════════════════════════════ */ .bk-container { max-width: var(--bk-container); margin: 0 auto; padding-left: var(--bk-section-x-mobile); padding-right: var(--bk-section-x-mobile); } .bk-container-narrow { max-width: var(--bk-container-narrow); margin: 0 auto; padding-left: var(--bk-section-x-mobile); padding-right: var(--bk-section-x-mobile); } @media (min-width: 768px) { .bk-container, .bk-container-narrow { padding-left: var(--bk-section-x-desktop); padding-right: var(--bk-section-x-desktop); } } /* ═══════════════════════════════════════════ SECTIONS ═══════════════════════════════════════════ */ .bk-section { padding: var(--bk-section-y-mobile) 0; } .bk-section--lg { padding: calc(var(--bk-section-y-mobile) * 1.5) 0; } .bk-section--dark { background: var(--bk-black); color: var(--bk-white); } .bk-section--dark h1, .bk-section--dark h2, .bk-section--dark h3, .bk-section--dark h4 { color: var(--bk-white); } .bk-section--charcoal { background: var(--bk-charcoal); color: var(--bk-white); } .bk-section--charcoal h1, .bk-section--charcoal h2, .bk-section--charcoal h3, .bk-section--charcoal h4 { color: var(--bk-white); } .bk-section--offwhite { background: var(--bk-offwhite); } @media (min-width: 768px) { .bk-section { padding: var(--bk-section-y-desktop) 0; } .bk-section--lg { padding: calc(var(--bk-section-y-desktop) * 1.3) 0; } } /* ═══════════════════════════════════════════ BUTTONS — substantial, restrained, brand ═══════════════════════════════════════════ */ .bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bk-sp-2); min-height: 56px; padding: 0 var(--bk-sp-6); font-family: var(--bk-font-body); font-size: var(--bk-fs-base); font-weight: var(--bk-fw-semibold); letter-spacing: 0.2px; border: 1px solid transparent; border-radius: var(--bk-radius); cursor: pointer; text-decoration: none; transition: background var(--bk-dur) var(--bk-ease), border-color var(--bk-dur) var(--bk-ease), color var(--bk-dur) var(--bk-ease); white-space: nowrap; } .bk-btn--primary { background: var(--bk-red); color: var(--bk-white); border-color: var(--bk-red); } .bk-btn--primary:hover { background: var(--bk-red-dark); border-color: var(--bk-red-dark); color: var(--bk-white); } .bk-btn--secondary { background: var(--bk-white); color: var(--bk-text); border-color: var(--bk-text); } .bk-btn--secondary:hover { background: var(--bk-text); color: var(--bk-white); } .bk-btn--secondary-dark { background: transparent; color: var(--bk-white); border-color: var(--bk-white); } .bk-btn--secondary-dark:hover { background: var(--bk-white); color: var(--bk-text); } .bk-btn--ghost { background: transparent; color: var(--bk-text); border-color: transparent; text-decoration: underline; } .bk-btn--lg { min-height: 64px; padding: 0 var(--bk-sp-8); font-size: var(--bk-fs-lg); } .bk-btn svg { flex-shrink: 0; } /* Dual CTA pattern — substantial, mobile-stack, desktop side-by-side */ .bk-cta-row { display: flex; flex-direction: column; gap: var(--bk-sp-3); width: 100%; max-width: 560px; } .bk-cta-row .bk-btn { width: 100%; flex-direction: column; gap: 2px; padding: var(--bk-sp-4) var(--bk-sp-6); min-height: 72px; } .bk-cta-row .bk-btn-label { font-size: var(--bk-fs-base); font-weight: var(--bk-fw-semibold); display: flex; align-items: center; gap: var(--bk-sp-2); } .bk-cta-row .bk-btn-sub { font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-normal); letter-spacing: 0; opacity: 0.85; } @media (min-width: 768px) { .bk-cta-row { flex-direction: row; max-width: none; } .bk-cta-row .bk-btn { flex: 1; min-height: 84px; } .bk-cta-row .bk-btn-label { font-size: var(--bk-fs-lg); } .bk-cta-row .bk-btn-sub { font-size: var(--bk-fs-sm); } } /* ═══════════════════════════════════════════ TRUST STRIP — restrained metrics row ═══════════════════════════════════════════ */ .bk-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bk-sp-4); padding: var(--bk-sp-8) 0; border-top: 1px solid var(--bk-border-light); border-bottom: 1px solid var(--bk-border-light); } .bk-trust-item { text-align: center; } .bk-trust-num { font-family: var(--bk-font-display); font-size: var(--bk-fs-3xl); line-height: 1; color: var(--bk-text); letter-spacing: var(--bk-ls-display); display: block; margin-bottom: var(--bk-sp-1); } .bk-trust-label { font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-medium); text-transform: uppercase; letter-spacing: var(--bk-ls-eyebrow); color: var(--bk-text-mute); } @media (min-width: 768px) { .bk-trust { grid-template-columns: repeat(4, 1fr); } .bk-trust-num { font-size: var(--bk-fs-4xl); } } /* On dark sections */ .bk-section--dark .bk-trust, .bk-section--charcoal .bk-trust { border-color: var(--bk-border); } .bk-section--dark .bk-trust-num, .bk-section--charcoal .bk-trust-num { color: var(--bk-white); } .bk-section--dark .bk-trust-label, .bk-section--charcoal .bk-trust-label { color: var(--bk-text-soft); } /* ═══════════════════════════════════════════ CARDS ═══════════════════════════════════════════ */ .bk-card { background: var(--bk-white); border: 1px solid var(--bk-border-light); border-radius: var(--bk-radius); padding: var(--bk-sp-6); transition: border-color var(--bk-dur) var(--bk-ease), box-shadow var(--bk-dur) var(--bk-ease); } .bk-card:hover { border-color: var(--bk-text-mute); } /* ═══════════════════════════════════════════ FAQ ═══════════════════════════════════════════ */ .bk-faq { border-top: 1px solid var(--bk-border-light); } .bk-faq details { border-bottom: 1px solid var(--bk-border-light); padding: var(--bk-sp-5) 0; } .bk-faq summary { font-size: var(--bk-fs-lg); font-weight: var(--bk-fw-semibold); color: var(--bk-text); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--bk-sp-4); } .bk-faq summary::-webkit-details-marker { display: none; } .bk-faq summary::after { content: '+'; font-family: var(--bk-font-body); font-size: 24px; font-weight: 300; color: var(--bk-text-mute); transition: transform var(--bk-dur) var(--bk-ease); } .bk-faq details[open] summary::after { transform: rotate(45deg); } .bk-faq-body { margin-top: var(--bk-sp-4); color: var(--bk-text-2); line-height: var(--bk-lh-relaxed); } /* ═══════════════════════════════════════════ UTILITIES ═══════════════════════════════════════════ */ .bk-mt-0 { margin-top: 0; } .bk-mt-2 { margin-top: var(--bk-sp-2); } .bk-mt-4 { margin-top: var(--bk-sp-4); } .bk-mt-6 { margin-top: var(--bk-sp-6); } .bk-mt-8 { margin-top: var(--bk-sp-8); } .bk-mt-12 { margin-top: var(--bk-sp-12); } .bk-text-mute { color: var(--bk-text-mute); } .bk-text-center { text-align: center; } .bk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ═══════════════════════════════════════════ NEUTRALIZE legacy bkw-overrides leaks (page-15-content era) These rules existed inline on page 15 with !important. We retain only the safe ones; the body>header{display:none} rule was already stripped in W1.A4. ═══════════════════════════════════════════ */ .wp-site-blocks, main, .wp-block-group { width: 100%; } /* ─── HIDE duplicate WP-injected post-title H1 on pages with inline H1 (added 2026-04-29 phase 6b) ─── */ /* Affects rebuilt pages: home (15), lp-store (972), lp-repair (973), lp-trade (974), lp-van-exterior (975), lp-van-interior (976). These pages have their own

in content, so the WP-injected post-title is redundant. / body.page-id-15 .wp-block-post-title, body.page-id-972 .wp-block-post-title, body.page-id-973 .wp-block-post-title, body.page-id-974 .wp-block-post-title, body.page-id-975 .wp-block-post-title, body.page-id-976 .wp-block-post-title { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } / ─── HIDE duplicate WP-injected post-title H1 on pages with inline H1 (added 2026-04-29 phase 6b) ─── */ body.page-id-15 .wp-block-post-title, body.page-id-972 .wp-block-post-title, body.page-id-973 .wp-block-post-title, body.page-id-974 .wp-block-post-title, body.page-id-975 .wp-block-post-title, body.page-id-976 .wp-block-post-title { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }