/* Local-services agency funnel — "Missed-Call Money Report" Shared stylesheet. No external deps except Google Fonts (loaded in ). Self-hosted static pattern (mirrors WebOps/weatherguard-pages). */ :root { --navy: #0b1f33; --navy-2: #12314f; --ink: #14202b; --muted: #5c6b78; --line: #e5e9ee; --emerald: #10a86b; --emerald-dark: #0c8a57; --emerald-bright: #17c07d; --amber: #f5a623; --card: #ffffff; --bg: #ffffff; --soft: #f5f8fa; --shadow: 0 18px 45px rgba(11, 31, 51, 0.14); --shadow-sm: 0 6px 16px rgba(11, 31, 51, 0.06); --radius: 16px; --wrap: 1140px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.55; font-size: 17px; } img, svg { max-width: 100%; display: block; } h1, h2, h3, .display { font-family: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; line-height: 1.1; margin: 0 0 .4em; color: var(--ink); letter-spacing: -0.01em; } a { color: var(--emerald-dark); } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; } /* ---------- header ---------- */ .site-header { padding: 15px 0; background: #fff; border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; } /* Text wordmark = the LeadLock brand (pure CSS/SVG text, no logo image). */ .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; } .brand__mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--emerald-bright), var(--emerald-dark)); display: flex; align-items: center; justify-content: center; } .brand__mark svg { width: 18px; height: 18px; stroke: #fff; } .brand__name { font-family: "Sora"; font-weight: 700; font-size: 1.15rem; color: var(--navy); letter-spacing: -0.02em; } .header-call { font-weight: 600; font-size: .95rem; color: var(--navy); text-decoration: none; white-space: nowrap; } .header-call span { color: var(--muted); font-weight: 500; } /* ---------- hero ---------- */ .hero { position: relative; background: radial-gradient(1100px 520px at 78% -10%, rgba(23, 192, 125, 0.20), transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #eaf1f7; padding: 54px 0 62px; overflow: hidden; } .hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .hero__copy { max-width: 560px; } .pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(23,192,125,.14); border: 1px solid rgba(23,192,125,.35); color: #9ff0c6; font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; margin-bottom: 20px; } .pill svg { width: 15px; height: 15px; stroke: #9ff0c6; } .hero h1 { color: #fff; font-size: 2.7rem; font-weight: 800; margin-bottom: 18px; } .hero h1 .accent { color: var(--emerald-bright); } .hero__sub { font-size: 1.14rem; color: #c3d2df; margin: 0 0 26px; } .hero__points { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 11px; } .hero__points li { display: flex; align-items: flex-start; gap: 11px; font-size: 1.02rem; color: #dce7f0; } .hero__points svg { width: 22px; height: 22px; stroke: var(--emerald-bright); flex: 0 0 22px; margin-top: 1px; } .hero__cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--emerald-bright), var(--emerald-dark)); color: #fff; text-decoration: none; font-family: "Sora"; font-weight: 700; font-size: 1.08rem; padding: 16px 30px; border-radius: 12px; border: 0; cursor: pointer; box-shadow: 0 12px 26px rgba(16,168,107,.34); transition: transform .12s ease, box-shadow .12s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(16,168,107,.42); } .btn-primary svg { width: 20px; height: 20px; stroke: #fff; } .hero__note { font-size: .9rem; color: #93a6b6; } /* ---------- lead card ---------- */ .lead-card { width: 100%; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; color: var(--ink); } .lead-card__head { background: linear-gradient(135deg, var(--emerald), var(--emerald-dark)); color: #fff; padding: 20px 30px; text-align: center; } .lead-card__head h2 { color: #fff; font-size: 1.32rem; font-weight: 700; margin: 0; } .lead-card__head p { margin: 4px 0 0; font-size: .92rem; opacity: .92; } .lead-card__body { padding: 26px 30px 8px; } .progress { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; margin-bottom: 20px; } .progress__bar { height: 100%; width: 20%; background: var(--emerald); border-radius: 99px; transition: width .25s ease; } .quiz__q { font-weight: 700; text-align: center; margin: 4px 0 16px; font-size: 1.06rem; color: var(--navy); } .quiz__hint { text-align: center; color: var(--muted); font-size: .9rem; margin: -8px 0 16px; } .step { display: none; } .step.active { display: block; animation: fade .25s ease; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .step.shake { animation: shake .35s; } @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} } .opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 9px 0; border: 1.5px solid var(--line); border-radius: 11px; cursor: pointer; transition: border-color .15s, background .15s; font-size: 1rem; } .opt:hover { border-color: var(--emerald); background: #f0fbf6; } .opt input { accent-color: var(--emerald); width: 18px; height: 18px; } .opt.selected { border-color: var(--emerald); background: #eafaf2; } .field { margin: 13px 0; } .field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--navy); } .field .opt-tag { color: var(--muted); font-weight: 500; } .field input { width: 100%; padding: 13px 15px; font-size: 1rem; border: 1.5px solid var(--line); border-radius: 11px; font-family: inherit; color: var(--ink); } .field input:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16,168,107,.12); } .phone-row { display: flex; gap: 8px; } .phone-row .cc { flex: 0 0 60px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 11px; font-weight: 700; color: var(--navy); background: #f4f6f8; } /* honeypot — visually hidden, off-screen, not display:none (bots skip display:none) */ .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .consent { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 6px; font-size: .82rem; color: var(--muted); line-height: 1.45; } .consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--emerald); flex: 0 0 17px; } .consent a { color: var(--emerald-dark); } .lead-card__foot { padding: 16px 30px 26px; } .btn-next, .btn-submit { width: 100%; text-align: center; background: linear-gradient(135deg, var(--emerald-bright), var(--emerald-dark)); color: #fff; border: 0; font-family: "Sora"; font-weight: 700; font-size: 1.06rem; cursor: pointer; padding: 15px 20px; border-radius: 12px; transition: transform .12s ease; box-shadow: 0 10px 22px rgba(16,168,107,.3); } .btn-next:hover, .btn-submit:hover { transform: translateY(-2px); } .btn-back { display: block; width: 100%; text-align: center; background: none; border: 0; color: var(--muted); font-size: .9rem; margin-top: 12px; cursor: pointer; } [hidden] { display: none !important; } .form-trust { text-align: center; color: var(--muted); font-size: .82rem; margin: 12px 0 0; } .form-trust svg { width: 13px; height: 13px; stroke: var(--muted); vertical-align: -2px; margin-right: 3px; } /* ---------- logos / trust strip ---------- */ .trust-strip { background: var(--soft); border-bottom: 1px solid var(--line); padding: 18px 0; } .trust-strip .wrap { display: flex; align-items: center; justify-content: center; gap: 12px 34px; flex-wrap: wrap; text-align: center; } .trust-strip span { color: var(--muted); font-size: .92rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } .trust-strip svg { width: 18px; height: 18px; stroke: var(--emerald); } /* ---------- section shells ---------- */ .section { padding: 66px 0; } .section--soft { background: var(--soft); } .section__head { text-align: center; max-width: 680px; margin: 0 auto 46px; } .section__head h2 { font-size: 2rem; font-weight: 800; color: var(--navy); } .section__head p { color: var(--muted); font-size: 1.08rem; margin: 10px 0 0; } .eyebrow { color: var(--emerald-dark); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 10px; } /* ---------- stat row ---------- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 30px 24px; text-align: center; box-shadow: var(--shadow-sm); } .stat__num { font-family: "Sora"; font-weight: 800; font-size: 2.6rem; color: var(--emerald-dark); line-height: 1; } .stat__label { color: var(--ink); font-weight: 600; margin: 12px 0 4px; } .stat__sub { color: var(--muted); font-size: .9rem; } .stats-source { text-align: center; color: var(--muted); font-size: .8rem; margin: 26px auto 0; max-width: 760px; } /* ---------- how it works ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .step-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 30px 26px; box-shadow: var(--shadow-sm); } .step-card__ico { width: 52px; height: 52px; border-radius: 13px; margin-bottom: 18px; background: #eafaf2; display: flex; align-items: center; justify-content: center; } .step-card__ico svg { width: 26px; height: 26px; stroke: var(--emerald-dark); } .step-card__n { font-family: "Sora"; font-weight: 700; font-size: .82rem; color: var(--emerald-dark); letter-spacing: .06em; } .step-card h3 { font-size: 1.24rem; font-weight: 700; margin: 4px 0 8px; color: var(--navy); } .step-card p { color: var(--muted); margin: 0; font-size: 1rem; } /* ---------- case study ---------- */ .case { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; } .case__media { border-radius: 16px; min-height: 300px; background: radial-gradient(600px 300px at 30% 20%, rgba(23,192,125,.25), transparent 60%), linear-gradient(150deg, var(--navy), var(--navy-2)); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; color: #cfe8dc; text-align: center; padding: 30px; position: relative; } .case__media .ph-label { font-size: .82rem; opacity: .55; position: absolute; bottom: 12px; left: 0; right: 0; } .case__badge { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 26px 30px; max-width: 300px; } .case__badge .big { font-family: "Sora"; font-weight: 800; font-size: 2.1rem; color: #fff; } .case__badge .lbl { color: #9ff0c6; font-size: .95rem; margin-top: 6px; } .case h2 { font-size: 1.9rem; font-weight: 800; color: var(--navy); } .case p { color: var(--muted); font-size: 1.05rem; } .case ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; } .case li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink); } .case li svg { width: 21px; height: 21px; stroke: var(--emerald-dark); flex: 0 0 21px; margin-top: 2px; } /* ---------- CTA band ---------- */ .cta-band { background: radial-gradient(900px 400px at 20% 0%, rgba(23,192,125,.22), transparent 60%), linear-gradient(150deg, var(--navy), var(--navy-2)); color: #fff; text-align: center; padding: 62px 0; } .cta-band h2 { color: #fff; font-size: 2.05rem; font-weight: 800; } .cta-band p { color: #c3d2df; font-size: 1.1rem; max-width: 560px; margin: 12px auto 26px; } /* ---------- FAQ ---------- */ .faq { max-width: 760px; margin: 0 auto; } .faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 22px; margin-bottom: 12px; box-shadow: var(--shadow-sm); } .faq summary { cursor: pointer; font-weight: 700; color: var(--navy); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: "Sora"; font-size: 1.02rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--emerald-dark); font-size: 1.5rem; font-weight: 400; } .faq details[open] summary::after { content: "\2212"; } .faq p { color: var(--muted); margin: 0 0 18px; } /* ---------- thank-you ---------- */ .ty { text-align: center; padding: 60px 0 40px; } .ty__badge { width: 78px; height: 78px; border-radius: 50%; background: #eafaf2; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .ty__badge svg { width: 40px; height: 40px; stroke: var(--emerald-dark); } .ty h1 { font-size: 2.2rem; font-weight: 800; color: var(--navy); } .ty__sub { color: var(--muted); font-size: 1.12rem; max-width: 560px; margin: 8px auto 0; } .next-card { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 40px 34px; text-align: center; } .next-card h2 { font-size: 1.6rem; font-weight: 800; color: var(--navy); } .next-card > p { color: var(--muted); margin: 8px 0 26px; } .sched-placeholder { border: 2px dashed var(--emerald); border-radius: 13px; padding: 40px 24px; background: #f0fbf6; } .sched-placeholder .pin { width: 46px; height: 46px; stroke: var(--emerald-dark); margin: 0 auto 12px; } .sched-placeholder p { color: var(--muted); margin: 6px 0 0; } .sched-call { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; background: linear-gradient(135deg, var(--emerald-bright), var(--emerald-dark)); color: #fff; text-decoration: none; font-family: "Sora"; font-weight: 700; font-size: 1.15rem; padding: 16px 36px; border-radius: 12px; box-shadow: 0 10px 22px rgba(16,168,107,.3); } .sched-call svg { width: 20px; height: 20px; stroke: #fff; } .ty-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; max-width: 760px; margin: 34px auto 0; text-align: left; } .ty-step { display: flex; gap: 12px; align-items: flex-start; } .ty-step .n { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--emerald); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: "Sora"; font-size: .95rem; } .ty-step p { margin: 0; font-size: .95rem; color: var(--ink); } .ty-step p b { color: var(--navy); } /* ---------- legal / prose pages (privacy.html, terms.html) ---------- */ .prose { max-width: 820px; margin: 0 auto; padding: 50px 0 46px; } .prose .back { display: inline-flex; align-items: center; gap: 7px; color: var(--emerald-dark); text-decoration: none; font-weight: 600; font-size: .92rem; margin-bottom: 22px; } .prose .back svg { width: 16px; height: 16px; stroke: var(--emerald-dark); } .prose h1 { font-size: 2.1rem; font-weight: 800; color: var(--navy); margin-bottom: 6px; } .prose .updated { color: var(--muted); font-size: .9rem; margin: 0 0 26px; } .prose h2 { font-size: 1.3rem; font-weight: 700; color: var(--navy); margin: 34px 0 10px; } .prose h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 22px 0 8px; } .prose p, .prose li { color: #33434f; font-size: 1rem; } .prose ul { padding-left: 20px; margin: 10px 0; display: grid; gap: 7px; } .prose a { color: var(--emerald-dark); } .prose .callout { background: var(--soft); border: 1px solid var(--line); border-left: 3px solid var(--emerald); border-radius: 10px; padding: 15px 20px; margin: 18px 0; } .prose .callout p { margin: 0; } /* ---------- footer ---------- */ .site-footer { background: var(--navy); color: #b6c6d4; padding: 40px 0 30px; font-size: .9rem; } .site-footer .wrap { text-align: center; } .site-footer .brand__name { color: #fff; } .site-footer .brand { justify-content: center; margin-bottom: 14px; } .site-footer .row { margin: 5px 0; } .site-footer a { color: #9ff0c6; } .site-footer .legal { margin-top: 16px; opacity: .75; font-size: .82rem; } .site-footer .legal a { color: #b6c6d4; margin: 0 8px; } .disclaimer { max-width: 820px; margin: 14px auto 0; opacity: .6; font-size: .78rem; line-height: 1.5; } /* ---------- responsive ---------- */ @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 34px; } .hero__copy { max-width: none; } .case { grid-template-columns: 1fr; gap: 26px; } .case__media { min-height: 220px; order: 2; } } @media (max-width: 760px) { .stats, .steps, .ty-steps { grid-template-columns: 1fr; gap: 18px; } .hero h1 { font-size: 2.1rem; } .section { padding: 48px 0; } .section__head h2, .cta-band h2 { font-size: 1.6rem; } .header-call { display: none; } body { font-size: 16px; } }