/* ============================================================ Breakout AI Solutions — Phase 1 Redesign Foundation Light mode + Inter + clean buttons + restrained accents. Loaded last in on every public page so overrides win against existing inline styles (incl. the "NUCLEAR SYNE" fix). Scope: visual only. No structural / copy changes. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --bg: #FFFFFF; --bg-alt: #F8FAFC; --text: #0F172A; --text-muted: #475569; --text-dim: #64748B; --border: #E2E8F0; --brand: #1E3A5F; --brand-hover: #15294A; --brand-active: #0F1F38; --accent: #1E3A5F; --accent-soft: rgba(30,58,95,0.08); --accent-line: rgba(30,58,95,0.20); } /* Per-audience accents (kept restrained — used only on small chrome, never on backgrounds, never on primary buttons). */ body[data-page="business"] { --accent: #0E7C86; --accent-soft: rgba(14,124,134,0.08); --accent-line: rgba(14,124,134,0.25); } body[data-page="coaching"] { --accent: #5A7A5C; --accent-soft: rgba(90,122,92,0.08); --accent-line: rgba(90,122,92,0.25); } body[data-page="govcon"] { --accent: #B8923D; --accent-soft: rgba(184,146,61,0.10); --accent-line: rgba(184,146,61,0.30); } /* ------------------------------------------------------------ Foundation */ html, body { background: var(--bg) !important; color: var(--text) !important; font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; } body::before { display: none !important; background: none !important; } /* Force Inter on every headline / chrome class (must beat inline !important). */ h1, h2, h3, h4, h5, h6, .hero-headline, .section-headline, .door-headline, .inquiry-box h2, .nav-brand, .faq-item summary, .section-eyebrow, .door-eyebrow, .eyebrow, .door-price, .trust-item, .area-chip, .foot-phone, .inq-eyebrow, .blead-inq-tag, .card-title, .step-title, .bottom-cta h2, .testimonial-name, .contact-card h3, .rwp-title, .rwp-tag, .step-num, .card-num, .btn-primary, .btn-secondary, .btn-cyan, .btn-amber, .door-cta, .inquiry-box .inq-btn, .blead-inq-cta, .contact-link-big, .nav-phone, .testimonial-avatar, .area-card h2 { font-family: 'Inter', system-ui, sans-serif !important; -webkit-text-stroke: 0 !important; } /* Headline rhythm — tight, navy, no descender padding */ .hero-headline, h1.hero-headline { font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; padding-bottom: 0 !important; color: var(--text) !important; } .section-headline, h2.section-headline, h2 { font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.015em !important; padding-bottom: 0 !important; color: var(--text) !important; } h3, .door-headline, .card-title, .rwp-title, .contact-card h3, .bottom-cta h2, .inquiry-box h2, .area-card h2 { color: var(--text) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; padding-bottom: 0 !important; } /* Kill gradient text on headlines — solid navy. */ .hero-headline .gradient, h1.hero-headline .gradient, .gradient { background: none !important; background-image: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; } /* Eyebrows — quiet uppercase muted text, no pill background, no border */ .eyebrow, .section-eyebrow, .door-eyebrow, .inq-eyebrow { display: inline-block !important; background: none !important; background-image: none !important; border: none !important; border-radius: 0 !important; color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; padding: 0 !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin-bottom: 14px !important; } /* Body / paragraph text */ .hero-sub, .section-sub, .door-sub, .card-body, .step-body, .faq-answer, .blead-inq-summary, .bottom-cta p, .trust-block p, .example-item, .who-pill, .rwp-body, .area-card p { color: var(--text-muted) !important; } body, p, li { line-height: 1.6 !important; } /* ------------------------------------------------------------ Nav */ .nav { background: rgba(255,255,255,0.96) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border-bottom: 1px solid var(--border) !important; } .nav-brand { color: var(--brand) !important; -webkit-text-fill-color: var(--brand) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } .nav-brand .accent { background: none !important; background-image: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--brand) !important; -webkit-text-fill-color: var(--brand) !important; } .nav-phone { color: var(--brand) !important; font-weight: 600 !important; letter-spacing: 0 !important; } .nav-phone:hover { color: var(--brand-hover) !important; } /* ------------------------------------------------------------ Logo — kill glow + animation */ .logo-hero { box-shadow: 0 4px 16px rgba(15,23,42,0.08) !important; animation: none !important; border: 1px solid var(--border) !important; } /* ------------------------------------------------------------ Buttons */ .btn-primary, .btn-cyan, .btn-amber, .door-cta, .inquiry-box .inq-btn, .blead-inq-cta, .contact-link-big { background: var(--brand) !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; box-shadow: none !important; border-radius: 6px !important; border: none !important; font-weight: 600 !important; letter-spacing: 0 !important; transform: none !important; transition: background .15s ease !important; } .btn-primary:hover, .btn-cyan:hover, .btn-amber:hover, .door-cta:hover, .inquiry-box .inq-btn:hover, .blead-inq-cta:hover, .contact-link-big:hover { background: var(--brand-hover) !important; box-shadow: none !important; transform: none !important; } .btn-primary:active, .btn-cyan:active, .btn-amber:active, .door-cta:active, .inquiry-box .inq-btn:active { background: var(--brand-active) !important; } .btn-primary:focus-visible, .btn-cyan:focus-visible, .btn-amber:focus-visible, .door-cta:focus-visible, .inquiry-box .inq-btn:focus-visible, .contact-link-big:focus-visible, .blead-inq-cta:focus-visible { outline: 2px solid var(--brand) !important; outline-offset: 2px !important; } .btn-secondary { background: transparent !important; background-image: none !important; color: var(--brand) !important; -webkit-text-fill-color: var(--brand) !important; border: 1.5px solid var(--brand) !important; border-radius: 6px !important; box-shadow: none !important; transform: none !important; font-weight: 600 !important; letter-spacing: 0 !important; transition: background .15s ease, color .15s ease !important; } .btn-secondary:hover { background: var(--brand) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border-color: var(--brand) !important; } /* ------------------------------------------------------------ Cards / surfaces */ .door, .card, .step, .testimonial, .area-card, .who-pill, .contact-card, .faq-item, .inquiry-box, .trust-block, .rwp-card, .bottom-cta, #book .bottom-cta, .blead-inq-result, .example-item { background: var(--bg) !important; background-image: none !important; border: 1px solid var(--border) !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; color: var(--text) !important; } .door:hover, .card:hover, .rwp-card:hover, .contact-card:hover, .testimonial:hover, .who-pill:hover { transform: none !important; border-color: var(--brand) !important; box-shadow: 0 4px 16px rgba(15,23,42,0.06) !important; } .door::before, .door::after, .rwp-card::before, .rwp-card::after, .testimonial::before, .testimonial::after { display: none !important; } /* Section rhythm — alternating subtle band */ section:nth-of-type(even) { background: var(--bg-alt) !important; } /* ------------------------------------------------------------ Numbered badges */ .card-num, .testimonial-avatar { background: var(--accent) !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; box-shadow: none !important; } .step-num { background: transparent !important; background-image: none !important; color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; font-weight: 700 !important; } /* ------------------------------------------------------------ Trust strip / chips */ .trust-item::before, .blead-inq-examples li::before { color: var(--accent) !important; } .trust-item, .area-chip { color: var(--text-muted) !important; background: var(--bg-alt) !important; border: 1px solid var(--border) !important; font-weight: 500 !important; letter-spacing: 0 !important; } /* ------------------------------------------------------------ Inquiry textarea */ .inquiry-box textarea { background: var(--bg) !important; border: 1.5px solid var(--border) !important; color: var(--text) !important; box-shadow: none !important; } .inquiry-box textarea::placeholder { color: var(--text-dim) !important; } .inquiry-box textarea:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(30,58,95,0.12) !important; background: var(--bg) !important; } /* ------------------------------------------------------------ FAQ */ .faq-item { background: var(--bg) !important; border-color: var(--border) !important; } .faq-item[open] { border-color: var(--brand) !important; background: var(--bg-alt) !important; } .faq-item summary { color: var(--text) !important; font-weight: 600 !important; letter-spacing: 0 !important; } .faq-item summary::after { color: var(--brand) !important; } .faq-item summary:hover { color: var(--brand) !important; } .faq-answer { color: var(--text-muted) !important; } .faq-answer a { color: var(--brand) !important; } /* ------------------------------------------------------------ Footer */ footer { background: var(--bg-alt) !important; border-top: 1px solid var(--border) !important; color: var(--text-muted) !important; } .foot-phone { color: var(--brand) !important; font-weight: 700 !important; } .foot-phone:hover { color: var(--brand-hover) !important; } .foot-links a { color: var(--text-muted) !important; } .foot-links a:hover { color: var(--brand) !important; } .foot-email, .foot-email:hover { color: var(--text-muted) !important; } .foot-copy { color: var(--text-dim) !important; } /* ------------------------------------------------------------ Tag pills */ .rwp-tag, .door-price, .blead-inq-tag, .rwp-tag-amber { background: var(--accent-soft) !important; color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; border: 1px solid var(--accent-line) !important; font-weight: 600 !important; letter-spacing: 0.08em !important; } /* ------------------------------------------------------------ Per-audience accent hovers */ body[data-page="business"] .door.b2b:hover { border-color: var(--accent) !important; } body[data-page="coaching"] .door.b2c:hover { border-color: var(--accent) !important; } /* ------------------------------------------------------------ Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .logo-hero { animation: none !important; } } /* ============================================================ Page-specific bespoke classes (Added to override more-specific selectors on individual pages) ============================================================ */ /* Homepage door cards — beat .door.b2b/.door.b2c specificity */ .door.b2b .door-cta, .door.b2c .door-cta, .door .door-cta { background: var(--brand) !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; box-shadow: none !important; border-radius: 6px !important; font-weight: 600 !important; letter-spacing: 0 !important; } .door.b2b::before, .door.b2c::before, .door::before { display: none !important; } .door.b2b .door-eyebrow, .door.b2c .door-eyebrow, .door .door-eyebrow { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } /* Business page — path cards */ .path-card, .path-card-cyan, .path-card-amber { background: var(--bg) !important; background-image: none !important; border: 1px solid var(--border) !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; color: var(--text) !important; } .path-card::before, .path-card-cyan::before, .path-card-amber::before { display: none !important; } .path-card:hover, .path-card-amber:hover, .path-card-cyan:hover { transform: none !important; border-color: var(--brand) !important; box-shadow: 0 4px 16px rgba(15,23,42,0.06) !important; } .path-card-title { color: var(--text) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; padding-bottom: 0 !important; } .path-card-body, .path-hits li { color: var(--text-muted) !important; } .path-hits li::before, .path-card-amber .path-hits li::before { background: var(--accent) !important; background-image: none !important; box-shadow: none !important; } .path-btn-cyan, .path-btn-amber { background: var(--brand) !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; box-shadow: none !important; border-radius: 6px !important; font-weight: 600 !important; letter-spacing: 0 !important; } .path-btn-cyan:hover, .path-btn-amber:hover { background: var(--brand-hover) !important; box-shadow: none !important; transform: none !important; } /* Coaching / shared — card icon + testimonial quote mark */ .card-icon { background: var(--accent) !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; box-shadow: none !important; } .testimonial::before { color: var(--accent-soft) !important; opacity: 0.6 !important; } .card-bullets li, .card-bullets li::before { color: var(--text-muted) !important; } .card-bullets li::before { background: var(--accent) !important; background-image: none !important; box-shadow: none !important; } /* Pricing — tier cards */ .tier, .tier.featured { background: var(--bg) !important; background-image: none !important; border: 1px solid var(--border) !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; } .tier.featured { border-color: var(--brand) !important; box-shadow: 0 4px 16px rgba(30,58,95,0.10) !important; } .tier-name, .tier-price { color: var(--text) !important; font-weight: 700 !important; } .tier-eyebrow, .tier-price-note, .tier-bullets li { color: var(--text-muted) !important; } .tier-divider { background: var(--border) !important; } .tier-badge { background: var(--brand) !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; box-shadow: none !important; font-weight: 600 !important; letter-spacing: 0.04em !important; } .tier-cta, .biz-section .tier-cta, .coach-section .tier-cta { background: var(--brand) !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; box-shadow: none !important; border-radius: 6px !important; font-weight: 600 !important; letter-spacing: 0 !important; } .tier-cta:hover { background: var(--brand-hover) !important; transform: none !important; box-shadow: none !important; } .biz-section .tier-badge, .coach-section .tier-badge { background: var(--brand) !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } .biz-section, .coach-section { background: var(--bg-alt) !important; background-image: none !important; border-top: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; } .tier-bullets li::before { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; } /* About — value items + about cards */ .about-card { background: var(--bg) !important; background-image: none !important; border: 1px solid var(--border) !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; color: var(--text) !important; } .value-item { background: var(--bg) !important; background-image: none !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .value-icon { background: var(--bg-alt) !important; background-image: none !important; border: 1px solid var(--border) !important; } .btn-call { color: var(--text-muted) !important; } .btn-call:hover { color: var(--brand) !important; } /* ============================================================ Final sweep — pricing + contact bespoke selectors ============================================================ */ /* Pricing tier internals */ .tier-eyebrow, .tier-name, .tier-price .amount, .tier-price .unit, .tier-price-note, .tier-bullets li, .tier-badge, .tier-cta { font-family: 'Inter', system-ui, sans-serif !important; -webkit-text-stroke: 0 !important; } .tier-eyebrow { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; font-weight: 600 !important; letter-spacing: 0.08em !important; } .tier-name { color: var(--text) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; padding-bottom: 0 !important; } .tier-price .amount { color: var(--text) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } .tier-price .unit { color: var(--text-muted) !important; font-weight: 500 !important; } .tier-bullets li::before { color: var(--accent) !important; font-weight: 700 !important; } .tier-badge { font-weight: 600 !important; letter-spacing: 0.08em !important; } /* Pricing hero phone link */ .hero-callfoot a, .hero-callfoot { font-family: 'Inter', system-ui, sans-serif !important; color: var(--brand) !important; -webkit-text-fill-color: var(--brand) !important; font-weight: 600 !important; letter-spacing: 0 !important; } /* Contact page card links + chips */ .contact-link { font-family: 'Inter', system-ui, sans-serif !important; color: var(--brand) !important; -webkit-text-fill-color: var(--brand) !important; font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 3px !important; letter-spacing: 0 !important; } .contact-link:hover { color: var(--brand-hover) !important; } .contact-icon { color: var(--brand) !important; } .area-chip { font-family: 'Inter', system-ui, sans-serif !important; background: var(--bg-alt) !important; border: 1px solid var(--border) !important; color: var(--text-muted) !important; font-weight: 500 !important; letter-spacing: 0 !important; } /* Belt-and-suspenders: any element still using Syne anywhere → Inter */ *, *::before, *::after { font-synthesis: none !important; } [style*="Syne"], .syne, .syne-font { font-family: 'Inter', system-ui, sans-serif !important; } /* ============================================================ Post-review fixes ============================================================ */ /* 1. Pricing ghost CTAs — beat .biz-section/.coach-section .tier-cta.ghost */ .tier-cta.ghost, .biz-section .tier-cta.ghost, .coach-section .tier-cta.ghost { background: transparent !important; background-image: none !important; color: var(--brand) !important; -webkit-text-fill-color: var(--brand) !important; border: 1.5px solid var(--brand) !important; box-shadow: none !important; } .tier-cta.ghost:hover, .biz-section .tier-cta.ghost:hover, .coach-section .tier-cta.ghost:hover { background: var(--brand) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border-color: var(--brand) !important; } /* 2. Hamburger icon — make stripes visible on new white nav */ .nav-hamburger { border: 1px solid var(--border) !important; background: transparent !important; } .nav-hamburger:hover { border-color: var(--brand) !important; background: var(--bg-alt) !important; } .nav-hamburger span i { background: var(--text) !important; } /* 3. Footer copy contrast — darken from #64748B (3.47:1) to #475569 (4.54:1, AA pass) */ .foot-copy { color: #475569 !important; } /* ============================================================ Phase 2 — Homepage 3-door switchboard + GovCon proof section ============================================================ */ /* Homepage doors */ body[data-page="home"] .doors-switchboard { padding: 56px 0 64px !important; } body[data-page="home"] .doors-switchboard .section-head { margin-bottom: 36px !important; } body[data-page="home"] .doors-3 { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 22px !important; max-width: 1100px !important; margin: 0 auto !important; align-items: stretch !important; } body[data-page="home"] .door-card { display: flex !important; flex-direction: column !important; background: #FFFFFF !important; border: 1px solid var(--border) !important; border-radius: 12px !important; padding: 28px 26px 26px !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; transition: border-color .15s, box-shadow .15s, transform .15s !important; } body[data-page="home"] .door-card:hover { border-color: var(--brand) !important; box-shadow: 0 6px 20px -10px rgba(30,58,95,0.25) !important; transform: translateY(-2px) !important; } body[data-page="home"] .door-card.door-secondary { background: var(--bg-alt) !important; border-style: dashed !important; } body[data-page="home"] .door-eyebrow { font-family: 'Inter', sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--text-muted) !important; margin-bottom: 10px !important; } body[data-page="home"] .door-title { font-family: 'Inter', sans-serif !important; font-size: 19px !important; font-weight: 700 !important; color: var(--text) !important; line-height: 1.35 !important; margin: 0 0 12px !important; background: none !important; -webkit-text-fill-color: var(--text) !important; } body[data-page="home"] .door-body { font-family: 'Inter', sans-serif !important; font-size: 14.5px !important; line-height: 1.65 !important; color: var(--text-muted) !important; margin: 0 0 20px !important; flex: 1 !important; } body[data-page="home"] .door-cta { font-family: 'Inter', sans-serif !important; display: inline-block !important; font-size: 14px !important; font-weight: 600 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: var(--brand) !important; border: 1px solid var(--brand) !important; padding: 10px 16px !important; border-radius: 6px !important; text-decoration: none !important; align-self: flex-start !important; transition: background .15s, color .15s !important; } body[data-page="home"] .door-cta:hover { background: #16304F !important; } body[data-page="home"] .door-cta.door-cta-ghost { background: transparent !important; color: var(--brand) !important; -webkit-text-fill-color: var(--brand) !important; border: 1px solid var(--brand) !important; } body[data-page="home"] .door-cta.door-cta-ghost:hover { background: var(--brand) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } body[data-page="home"] .gov-teaser { display: none !important; } @media (max-width: 900px) { body[data-page="home"] .doors-3 { grid-template-columns: 1fr !important; gap: 16px !important; } } /* GovCon proof section */ body[data-page="govcon"] .govcon-proof { padding: 24px 0 56px !important; } body[data-page="govcon"] .govcon-proof-list { list-style: none !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; gap: 12px !important; max-width: 880px !important; margin: 22px auto 24px !important; padding: 0 !important; } body[data-page="govcon"] .govcon-proof-list li { font-family: 'Inter', sans-serif !important; font-size: 14.5px !important; font-weight: 500 !important; color: var(--text) !important; background: var(--bg-alt) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--accent-govcon, #B8923D) !important; border-radius: 6px !important; padding: 12px 16px !important; line-height: 1.5 !important; } body[data-page="govcon"] .govcon-proof-note { font-family: 'Inter', sans-serif !important; font-size: 13px !important; line-height: 1.65 !important; color: var(--text-muted) !important; font-style: italic !important; text-align: center !important; max-width: 760px !important; margin: 18px auto 0 !important; } /* Hero callfoot polish (used on govcon hero too) */ body[data-page="govcon"] .hero-callfoot { font-family: 'Inter', sans-serif !important; font-size: 13.5px !important; color: var(--text-muted) !important; font-style: italic !important; } /* === LEAD MODAL: NEW SITE DESIGN OVERRIDES (CSS-only, no JS changes) === Targets the modal injected by lead-modal.js (#blead-modal-root). Forces white card / Inter / navy primary / dark slate text / subtle slate borders. Overrides the per-config CSS variables (cyan business / amber personal). */ #blead-modal-root { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; } #blead-modal-root .blead-back { background: rgba(15,23,42,0.55) !important; backdrop-filter: blur(4px) !important; } #blead-modal-root .blead-card { background: #FFFFFF !important; color: #0F172A !important; border: 1px solid #E2E8F0 !important; border-radius: 16px !important; box-shadow: 0 20px 60px -10px rgba(15,23,42,0.25) !important; } #blead-modal-root .blead-close { color: #64748B !important; background: transparent !important; } #blead-modal-root .blead-close:hover { background: #F1F5F9 !important; color: #0F172A !important; } #blead-modal-root .blead-eyebrow { font-family: 'Inter', sans-serif !important; color: #475569 !important; letter-spacing: 0.14em !important; } #blead-modal-root .blead-title { font-family: 'Inter', sans-serif !important; color: #0F172A !important; font-weight: 800 !important; } #blead-modal-root .blead-sub { color: #475569 !important; } #blead-modal-root .blead-progress { background: #E2E8F0 !important; } #blead-modal-root .blead-progress span { background: #1E3A8A !important; } #blead-modal-root .blead-q label { color: #0F172A !important; } #blead-modal-root .blead-q .opt label { color: #475569 !important; font-weight: 400 !important; } #blead-modal-root .blead-q input[type=text], #blead-modal-root .blead-q input[type=email], #blead-modal-root .blead-q input[type=tel], #blead-modal-root .blead-q textarea { background: #FFFFFF !important; border: 1px solid #CBD5E1 !important; color: #0F172A !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 16px !important; /* prevents iOS zoom on tap */ border-radius: 10px !important; } #blead-modal-root .blead-q input::placeholder, #blead-modal-root .blead-q textarea::placeholder { color: #94A3B8 !important; } #blead-modal-root .blead-q input:focus, #blead-modal-root .blead-q textarea:focus { border-color: #1E3A8A !important; background: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(30,58,138,0.15) !important; outline: none !important; } #blead-modal-root .blead-q .opt input { accent-color: #1E3A8A !important; } #blead-modal-root .blead-btn { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.01em !important; border-radius: 10px !important; transition: background .15s, color .15s, border-color .15s !important; } #blead-modal-root .blead-btn.primary { background: #1E3A8A !important; color: #FFFFFF !important; border: 1px solid #1E3A8A !important; transform: none !important; } #blead-modal-root .blead-btn.primary:hover { background: #1E40AF !important; border-color: #1E40AF !important; transform: none !important; } #blead-modal-root .blead-btn.ghost { background: #FFFFFF !important; color: #475569 !important; border: 1px solid #CBD5E1 !important; } #blead-modal-root .blead-btn.ghost:hover { background: #F1F5F9 !important; color: #0F172A !important; } #blead-modal-root .blead-err { color: #B91C1C !important; background: #FEF2F2 !important; border-color: #FECACA !important; } #blead-modal-root .blead-callfoot { color: #475569 !important; } #blead-modal-root .blead-callfoot a { color: #1E3A8A !important; font-weight: 600 !important; } @media (max-width: 480px) { #blead-modal-root { padding: 12px !important; } #blead-modal-root .blead-card { padding: 22px 18px 18px !important; max-height: 92vh !important; border-radius: 14px !important; } #blead-modal-root .blead-title { font-size: 22px !important; } #blead-modal-root .blead-actions { flex-direction: column-reverse !important; align-items: stretch !important; } #blead-modal-root .blead-btn { width: 100% !important; } } /* === HEADLINE LINE-BREAK POLISH (CSS-only) === text-wrap: balance gives short multi-line headlines an intentional, even rhythm without forcing brittle
tags or HTML in marketing-copy values. */ .hero-headline, .section-headline, .bottom-cta h2, #blead-modal-root .blead-title { text-wrap: balance; } .hero-headline { max-width: 18ch; margin-left: auto; margin-right: auto; } @media (min-width: 720px) { .hero-headline { max-width: 22ch; } } /* === MODAL CALLFOOT — clean "Call / (760) 423 4773" two-line layout === The JS injects: "Or skip the form and call us now: ☎ (760) 423 4773". We hide the prefix text via font-size:0 on the wrapper and restore the link. A ::before pseudo provides the new "Call" label. Phone link gets nowrap so the number never splits across lines. CSS-only — no JS edit. */ #blead-modal-root .blead-callfoot { font-size: 0 !important; border-top: 1px solid #E2E8F0 !important; margin-top: 18px !important; padding-top: 16px !important; text-align: center !important; } #blead-modal-root .blead-callfoot::before { content: "Call"; display: block; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 500; color: #475569; letter-spacing: 0.04em; margin-bottom: 6px; } #blead-modal-root .blead-callfoot a { display: inline-block !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; color: #1E3A8A !important; letter-spacing: 0.01em !important; white-space: nowrap !important; text-decoration: none !important; } #blead-modal-root .blead-callfoot a:hover { text-decoration: underline !important; } @media (max-width: 360px) { #blead-modal-root .blead-callfoot a { font-size: 15px !important; } }