/* ============================================================= FUNNEL PAGES — shared dedicated stylesheet Used by pages/get-more-leads.html and pages/vehicle-acquisition.html. One shared file so both ad landing pages read as the same design system rather than drifting apart — extend this file for new funnel pages instead of forking it. Hand-written to match the visual language of /lp/agency/ (Tailwind CDN, brand-900/brand-600 palette, rounded-lg glow buttons, dark "problem" band with frosted-glass cards, mock product UI) WITHOUT loading Tailwind's CDN build — that ships a full JIT compiler to the browser and Tailwind's own docs advise against it in production. This file is self-contained; it does not depend on /css/style.css or /lp/style.css. Served at an absolute path (/pages/get-more-leads.css) so it never hits the relative-href bug that broke /lp when requested without a trailing slash. ============================================================= */ /* Inter is loaded from the page's via a direct , not an @import here — an @import would block on this file parsing first, delaying font discovery on a page where mobile ad load speed matters. */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: hidden; } :root { --brand-50: #f0fdf4; --brand-100: #dcfce7; --brand-500: #22c55e; --brand-600: #16a34a; --brand-700: #15803d; --brand-900: #0f172a; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-900: #111827; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 14px rgba(0,0,0,.07); --shadow-lg: 0 14px 34px rgba(0,0,0,.12); --shadow-xl: 0 22px 50px rgba(0,0,0,.16); --shadow-brand: 0 10px 26px rgba(34,197,94,.32); } body { margin: 0; font-family: 'Inter', -apple-system, system-ui, sans-serif; background: #fff; color: var(--gray-700); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--brand-900); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0; } h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); } h3 { font-size: 1.3rem; font-weight: 700; } h4 { font-size: 1.05rem; font-weight: 700; } p { margin: 0; } a { color: inherit; } .gradient-text { background: linear-gradient(90deg, var(--brand-500), #34d399); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Layout ── */ .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .container-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; } .section { padding: 88px 0; } .section-sm { padding: 56px 0; } .band-tint { background: var(--gray-100); } .band-dark { background: var(--brand-900); color: #fff; } .band-dark p { color: #cbd5e1; } .band-dark h2 { color: #fff; } @media (max-width: 768px) { .section { padding: 56px 0; } .section-sm { padding: 40px 0; } } /* ── Section headers ── */ .section-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-600); margin-bottom: 12px; } .section-eyebrow.warn { color: #b45309; } .band-dark .section-eyebrow { color: var(--brand-500); } .section-header { text-align: center; margin-bottom: 48px; } .section-header h2 { margin-bottom: 14px; } .section-header p { max-width: 620px; margin: 0 auto; color: var(--gray-600); font-size: 17px; line-height: 1.6; } .band-dark .section-header p { color: #cbd5e1; } /* A demo-form dropped into a dark band (vehicle-acquisition.html's Growth Audit section) needs its label color flipped — the default gray-700 is unreadable on brand-900. Inputs stay white/dark-text since they're their own white field, not sitting directly on the dark background. */ .band-dark .demo-form label { color: #cbd5e1; } .pill-badge { display: inline-block; padding: 8px 18px; border-radius: 999px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700); font-weight: 600; font-size: 14px; margin-bottom: 22px; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 16px; border-radius: 10px; padding: 14px 28px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease; } .btn-lg { padding: 16px 32px; font-size: 17px; } .btn-primary { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-brand); } .btn-primary:hover { background: var(--brand-700); } .btn-secondary { background: #fff; color: var(--gray-900); border-color: var(--gray-200); } .btn-secondary:hover { background: var(--gray-50); } .btn-phone { display: inline-block; color: var(--gray-700); font-weight: 600; font-size: 16px; text-decoration: none; border-bottom: 1px solid var(--gray-300); padding-bottom: 2px; } .btn-phone:hover { color: var(--brand-600); border-color: var(--brand-600); } .link-muted { color: var(--gray-500); font-size: 14px; text-decoration: underline; } .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } @media (max-width: 480px) { .cta-row { flex-direction: column; align-items: stretch; } .cta-row .btn { width: 100%; } } /* ── Cards ── */ .card { background: #fff; border: 1px solid var(--gray-100); border-radius: 16px; padding: 32px; box-shadow: var(--shadow-sm); transition: box-shadow .15s ease; } .card:hover { box-shadow: var(--shadow-md); } .card-glass { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 28px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .card-glass p { color: #e2e8f0; } .icon-chip { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; flex-shrink: 0; } .icon-chip i, .icon-chip svg { width: 24px; height: 24px; stroke-width: 2; } .icon-chip-blue { background: #dbeafe; color: #2563eb; } .icon-chip-green { background: var(--brand-100); color: var(--brand-600); } .icon-chip-purple { background: #ede9fe; color: #7c3aed; } .icon-chip-amber { background: #fef3c7; color: #b45309; } .icon-chip-rose { background: #ffe4e6; color: #e11d48; } .icon-chip-slate { background: #f1f5f9; color: #475569; } .card-glass .icon-chip { background: rgba(255,255,255,.14); color: #fff; } /* ── Feature rows (icon circle + text, no card box) ── */ .feature-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 28px; } .feature-row:last-child { margin-bottom: 0; } .icon-circle { flex-shrink: 0; width: 44px; height: 44px; border-radius: 999px; background: var(--brand-100); color: var(--brand-600); display: flex; align-items: center; justify-content: center; } .icon-circle i, .icon-circle svg { width: 20px; height: 20px; } .feature-row h4 { margin-bottom: 6px; } .feature-row p { font-size: 15px; color: var(--gray-600); } /* ── Grids ── */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* ── Testimonials ── */ .stars { color: #f59e0b; display: flex; gap: 2px; margin-bottom: 14px; } .stars i, .stars svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; } .result-tag { font-weight: 700; color: var(--brand-600); font-size: 15px; margin-bottom: 10px; } .testimonial-text { font-size: 15px; color: var(--gray-700); line-height: 1.6; margin-bottom: 20px; } .author-row { display: flex; align-items: center; gap: 12px; } .avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .author-name { font-weight: 600; font-size: 14px; color: var(--brand-900); } .author-title { font-size: 12px; color: var(--gray-500); } /* ── Pricing / offer card ── */ .price-amount { font-size: 42px; font-weight: 800; color: var(--brand-900); } .price-period { font-size: 14px; color: var(--gray-500); margin-bottom: 4px; } .feature-list { list-style: none; margin: 20px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .feature-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gray-700); } .feature-list li i, .feature-list li svg { width: 16px; height: 16px; color: var(--brand-600); flex-shrink: 0; } /* ── Step numbers (How It Works) ── */ .step-num { width: 44px; height: 44px; border-radius: 999px; background: var(--brand-900); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; margin: 0 auto 20px; } /* ── Checkmark row (final section) ── */ .check-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 32px; margin-bottom: 40px; } .check-item { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gray-700); font-size: 15px; } .check-item i, .check-item svg { width: 20px; height: 20px; color: var(--brand-600); flex-shrink: 0; } .cta-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 20px; padding: 44px 32px; box-shadow: var(--shadow-xl); text-align: center; max-width: 640px; margin: 0 auto; } /* ── Decorative mock product UI (Solution section) ── */ .mock-panel { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 24px; padding: 26px; box-shadow: var(--shadow-lg); } .mock-lead-card { background: #fff; border: 1px solid var(--gray-100); border-radius: 14px; padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .mock-lead-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--gray-100); } .mock-lead-head .tag { font-size: 13px; font-weight: 700; color: var(--brand-600); } .mock-vehicle-row { display: flex; gap: 14px; margin-bottom: 14px; align-items: center; } .mock-vehicle-thumb { width: 56px; height: 44px; border-radius: 8px; background: var(--gray-200); flex-shrink: 0; } .mock-vehicle-row strong { font-size: 15px; color: var(--gray-900); display: block; } .mock-vehicle-row span { font-size: 12px; color: var(--gray-500); } .mock-offer-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--gray-500); } .mock-offer-amount { font-weight: 800; font-size: 19px; color: var(--brand-600); } .mock-call-card { background: var(--brand-900); color: #fff; border-radius: 14px; padding: 20px; position: relative; box-shadow: var(--shadow-lg); } .mock-live-badge { position: absolute; top: -12px; right: 14px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; animation: mockBounce 1.8s infinite; } .mock-call-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .mock-live-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--brand-500); animation: mockPulse 1.6s infinite; } .mock-call-quote { font-size: 14px; color: #cbd5e1; font-style: italic; margin: 0; } @keyframes mockPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes mockBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .mock-live-badge, .mock-live-dot { animation: none; } } /* ── Top bar (logo only, no nav) ── */ .topbar { padding: 18px 20px; background: #fff; border-bottom: 1px solid var(--gray-100); } .brand-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .brand-logo .logo-chip { width: 34px; height: 34px; border-radius: 8px; background: var(--brand-900); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; } .brand-logo .logo-word { font-weight: 800; color: var(--brand-900); font-size: 17px; letter-spacing: -0.02em; } /* ── Mini footer ── */ .mini-footer { background: var(--brand-900); padding: 28px 20px; text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; } .mini-footer span, .mini-footer a { font-size: 13px; color: #94a3b8; text-decoration: none; } .mini-footer a { border-bottom: 1px solid #334155; } .mini-footer a:hover { color: #fff; border-bottom-color: #fff; } /* ── Demo form ── */ .demo-form input { width: 100%; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 13px 16px; font-size: 15px; font-family: inherit; color: var(--gray-900); outline: none; transition: border-color .15s, box-shadow .15s; } .demo-form input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(34,197,94,.14); } .demo-form label { font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; display: block; } .demo-form .form-group { margin-bottom: 16px; } .info-box { background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 10px; padding: 16px; font-size: 14px; color: var(--brand-900); } .info-box.orange { background: #fef3c7; border-color: #fde68a; color: #92400e; } /* ── Sticky mobile CTA ── */ .sticky-cta { display: none; } @media (max-width: 768px) { .sticky-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: #fff; border-top: 1px solid var(--gray-200); padding: 12px 16px; box-shadow: 0 -6px 20px rgba(0,0,0,.08); } .sticky-cta .btn { width: 100%; } body { padding-bottom: 70px; } } /* ── Small utilities ── */ .text-center { text-align: center; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; } /* ── Comparison columns (added for vehicle-acquisition.html) ── Qualitative side-by-side contrast — reuses .card as the base so it never needs its own shadow/radius rules. */ .cmp-col { display: flex; flex-direction: column; } .cmp-col.cmp-bad { border-color: #fecaca; background: #fff5f5; } .cmp-col.cmp-good { border-color: var(--brand-100); background: var(--brand-50); } .cmp-col h4 { margin-bottom: 18px; } .cmp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .cmp-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--gray-700); } .cmp-list li i, .cmp-list li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; } .cmp-bad .cmp-list li i { color: #ef4444; } .cmp-good .cmp-list li i { color: var(--brand-600); } /* ── FAQ (visible text only — no accordion JS, no FAQPage schema) ── */ .faq-item { padding: 20px 0; border-bottom: 1px solid var(--gray-100); } .faq-item:last-child { border-bottom: none; } .faq-item h4 { margin-bottom: 8px; } .faq-item p { font-size: 15px; color: var(--gray-600); }