Lead Intelligence

Crocs and Clicks — Lead Intelligence :root { --bg-primary: #0c0a0b; --bg-secondary: #151213; --bg-tertiary: #1e1a1c; --bg-card: #1a1618; --accent: #E87BA4; --accent-light: #F4B6C2; --accent-hot: #d64a80; --accent-glow: rgba(232,123,164,0.12); --text-primary: #F5F5F5; --text-secondary: #a89da5; --text-muted: #6d5f6a; --border: #2a2327; --border-light: #352a33; --success: #34d399; --warning: #fbbf24; --danger: #f87171; --info: #60a5fa; --google-ppc: #34A853; --lsa-orange: #FBBC04; --meta-blue: #0668E1; --seo-teal: #14b8a6; --gbp-blue: #4285F4; --radius: 10px; } * { margin:0; padding:0; box-sizing:border-box; } body { font-family:'Outfit',sans-serif; background:var(--bg-primary); color:var(--text-primary); min-height:100vh; overflow-x:hidden; } /* ─── HEADER ─── */ .header { background:var(--bg-secondary); border-bottom:1px solid var(--border); padding:0 1.5rem; height:60px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; backdrop-filter:blur(12px); } .header-left { display:flex; align-items:center; gap:1.5rem; } .logo { display:flex; align-items:center; gap:0.6rem; } .logo-mark { width:34px; height:34px; background:linear-gradient(135deg,var(--accent),var(--accent-hot)); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; } .logo-text { font-family:'Fraunces',serif; font-size:1.1rem; font-weight:800; } .logo-text span { font-family:'Outfit',sans-serif; font-weight:400; font-size:0.8em; color:var(--text-secondary); } .logo-badge { font-size:0.6rem; color:var(--accent); font-weight:600; background:var(--accent-glow); padding:0.15rem 0.5rem; border-radius:4px; letter-spacing:0.03em; } .nav-tabs { display:flex; gap:0.25rem; background:var(--bg-tertiary); border-radius:8px; padding:3px; } .nav-tab { padding:0.45rem 0.85rem; border-radius:6px; font-size:0.78rem; font-weight:500; color:var(--text-muted); cursor:pointer; transition:all 0.2s; border:none; background:none; display:flex; align-items:center; gap:0.4rem; white-space:nowrap; } .nav-tab:hover { color:var(--text-secondary); } .nav-tab.active { background:var(--bg-secondary); color:var(--text-primary); box-shadow:0 1px 3px rgba(0,0,0,0.2); } .nav-tab .tab-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; } .header-right { display:flex; align-items:center; gap:0.75rem; } .date-range { display:flex; align-items:center; gap:0.5rem; background:var(--bg-tertiary); border:1px solid var(--border); border-radius:8px; padding:0.4rem 0.75rem; font-size:0.78rem; color:var(--text-secondary); } .date-range select { background:none; border:none; color:var(--text-primary); font-family:inherit; font-size:0.78rem; cursor:pointer; outline:none; } .date-range select option { background:var(--bg-secondary); } .hdr-btn { background:var(--bg-tertiary); border:1px solid var(--border); color:var(--text-primary); padding:0.45rem 0.85rem; border-radius:8px; cursor:pointer; font-size:0.78rem; font-family:inherit; font-weight:500; display:flex; align-items:center; gap:0.4rem; transition:all 0.2s; } .hdr-btn:hover { border-color:var(--accent); background:var(--accent-glow); } .hdr-btn.primary { background:linear-gradient(135deg,var(--accent),var(--accent-hot)); border:none; color:#fff; font-weight:600; } .hdr-btn.primary:hover { transform:translateY(-1px); box-shadow:0 4px 15px rgba(232,123,164,0.3); } /* ─── LAYOUT ─── */ .main { padding:1.25rem 1.5rem 2rem; max-width:1600px; margin:0 auto; } /* ─── CONNECTION BAR ─── */ .conn-bar { display:flex; gap:0.5rem; margin-bottom:1.25rem; flex-wrap:wrap; } .conn-chip { display:flex; align-items:center; gap:0.5rem; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:0.5rem 0.85rem; font-size:0.78rem; cursor:pointer; transition:all 0.2s; } .conn-chip:hover { border-color:var(--accent); } .conn-chip.on { border-color:var(--success); } .conn-dot { width:8px; height:8px; border-radius:50%; background:var(--text-muted); flex-shrink:0; } .conn-chip.on .conn-dot { background:var(--success); box-shadow:0 0 6px rgba(52,211,153,0.4); } .conn-name { font-weight:500; } .conn-sub { color:var(--text-muted); font-size:0.68rem; } /* ─── TABS ─── */ .tab { display:none; } .tab.active { display:block; animation:fadeIn 0.3s ease; } @keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } /* ─── KPI ─── */ .kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:0.75rem; margin-bottom:1.25rem; } .kpi { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; position:relative; overflow:hidden; transition:all 0.2s; } .kpi:hover { border-color:var(--border-light); transform:translateY(-1px); } .kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--c, var(--accent)); opacity:0.6; } .kpi-label { font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; margin-bottom:0.45rem; } .kpi-val { font-family:'Space Mono',monospace; font-size:1.5rem; font-weight:700; line-height:1.1; } .kpi-sub { font-size:0.7rem; color:var(--text-muted); margin-top:0.35rem; } /* ─── CHARTS ─── */ .chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin-bottom:1.25rem; } .chart-grid.g3 { grid-template-columns:2fr 1fr; } .chart-grid.g1 { grid-template-columns:1fr; } @media(max-width:1000px) { .chart-grid, .chart-grid.g3 { grid-template-columns:1fr; } } .card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.15rem; } .card-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; } .card-title { font-size:0.85rem; font-weight:600; display:flex; align-items:center; gap:0.4rem; } .card-sub { font-size:0.7rem; color:var(--text-muted); } .chart-wrap { position:relative; height:260px; } .chart-wrap.short { height:200px; } .chart-wrap.tall { height:320px; } /* ─── TABLES ─── */ .tbl-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:1.25rem; } .tbl-hdr { padding:1rem 1.15rem; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); } .tbl-title { font-size:0.85rem; font-weight:600; } .tbl-count { font-size:0.7rem; color:var(--text-muted); } .tbl-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:0.8rem; } thead th { background:var(--bg-tertiary); padding:0.65rem 1rem; text-align:left; font-weight:600; font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; border-bottom:1px solid var(--border); white-space:nowrap; } tbody td { padding:0.7rem 1rem; border-bottom:1px solid var(--border); white-space:nowrap; } tbody tr:hover { background:rgba(255,255,255,0.02); } tbody tr:last-child td { border-bottom:none; } .td-name { font-weight:600; max-width:250px; overflow:hidden; text-overflow:ellipsis; } .td-m { font-family:'Space Mono',monospace; font-size:0.78rem; } .td-st { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.72rem; font-weight:500; padding:0.2rem 0.55rem; border-radius:4px; } .td-st.active { background:rgba(52,211,153,0.1); color:var(--success); } .td-st.paused { background:rgba(251,191,36,0.1); color:var(--warning); } .td-st.ended { background:rgba(248,113,113,0.1); color:var(--danger); } .td-bar { display:flex; align-items:center; gap:0.5rem; } .td-bar-track { flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden; min-width:60px; } .td-bar-fill { height:100%; border-radius:2px; } /* ─── PLATFORM CARDS ─── */ .plat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:0.75rem; margin-bottom:1.25rem; } .plat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.15rem; position:relative; overflow:hidden; } .plat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--pc); } .plat-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.85rem; } .plat-name { font-weight:600; font-size:0.85rem; display:flex; align-items:center; gap:0.4rem; } .plat-stats { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; } .plat-stat-lbl { font-size:0.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; } .plat-stat-val { font-family:'Space Mono',monospace; font-size:1rem; font-weight:700; margin-top:0.15rem; } /* ─── GBP PROFILES (v1 Performance API) ─── */ .gbp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:0.75rem; margin-bottom:1.25rem; } .gbp-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.15rem; position:relative; overflow:hidden; } .gbp-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gbp-blue); } .gbp-card-hdr { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.75rem; } .gbp-card-name { font-weight:700; font-size:0.9rem; } .gbp-card-addr { font-size:0.72rem; color:var(--text-muted); margin-top:0.15rem; } .gbp-card-rating { display:flex; align-items:center; gap:0.3rem; font-size:0.78rem; font-weight:600; color:var(--warning); } .gbp-stat-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:0.35rem; margin-top:0.5rem; } .gbp-stat-row.actions { grid-template-columns:repeat(4, 1fr); } .gbp-stat { text-align:center; padding:0.45rem 0.15rem; background:var(--bg-tertiary); border-radius:6px; } .gbp-stat-val { font-family:'Space Mono',monospace; font-size:0.88rem; font-weight:700; } .gbp-stat-lbl { font-size:0.55rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.03em; margin-top:0.1rem; line-height:1.2; } .gbp-section-lbl { font-size:0.6rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin-top:0.6rem; margin-bottom:0.2rem; padding-left:0.1rem; display:flex; align-items:center; gap:0.3rem; } .gbp-section-lbl .api-tag { font-size:0.5rem; color:var(--accent); background:var(--accent-glow); padding:0.1rem 0.3rem; border-radius:3px; font-weight:500; letter-spacing:0; text-transform:none; } /* ─── LEAD CARDS ─── */ .lead-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:0.75rem; margin-bottom:1.25rem; } .lead-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; } .lead-card-hdr { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.5rem; } .lead-card-name { font-weight:600; font-size:0.88rem; } .lead-tag { font-size:0.66rem; padding:0.15rem 0.45rem; border-radius:4px; font-weight:500; } .lead-tag.phone { background:rgba(96,165,250,0.1); color:var(--info); } .lead-tag.message { background:rgba(52,211,153,0.1); color:var(--success); } .lead-tag.booking { background:rgba(251,191,36,0.1); color:var(--warning); } .lead-detail { font-size:0.75rem; color:var(--text-muted); margin-bottom:0.15rem; } .lead-time { font-size:0.68rem; color:var(--text-muted); margin-top:0.45rem; font-family:'Space Mono',monospace; } /* ─── FUNNEL ─── */ .funnel { display:flex; align-items:center; gap:0; margin:1rem 0; flex-wrap:wrap; } .funnel-step { flex:1; text-align:center; padding:1rem 0.5rem; min-width:100px; } .funnel-bar { height:6px; border-radius:3px; margin-bottom:0.6rem; } .funnel-val { font-family:'Space Mono',monospace; font-size:1.1rem; font-weight:700; } .funnel-lbl { font-size:0.68rem; color:var(--text-muted); margin-top:0.2rem; } .funnel-arr { color:var(--text-muted); font-size:0.85rem; flex-shrink:0; margin-top:-1rem; } /* ─── EMPTY STATE ─── */ .empty { text-align:center; padding:4rem 2rem; } .empty-icon { font-size:3.5rem; margin-bottom:1rem; opacity:0.5; } .empty-title { font-family:'Fraunces',serif; font-size:1.4rem; font-weight:800; color:var(--accent); margin-bottom:0.5rem; } .empty-desc { color:var(--text-muted); font-size:0.9rem; max-width:500px; margin:0 auto 1.5rem; line-height:1.6; } .empty-actions { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; } /* ─── MODAL ─── */ .modal-bg { position:fixed; inset:0; background:rgba(12,10,11,0.85); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:200; padding:1rem; } .modal-bg.active { display:flex; } .modal { background:var(--bg-secondary); border:1px solid var(--border); border-radius:12px; padding:1.75rem; max-width:520px; width:100%; max-height:90vh; overflow-y:auto; } .modal-title { font-family:'Fraunces',serif; font-size:1.15rem; font-weight:800; margin-bottom:0.35rem; } .modal-desc { font-size:0.82rem; color:var(--text-muted); margin-bottom:1.25rem; line-height:1.5; } .m-field { margin-bottom:1rem; } .m-label { font-size:0.75rem; font-weight:600; color:var(--text-secondary); margin-bottom:0.35rem; } .m-input { width:100%; background:var(--bg-tertiary); border:1px solid var(--border); color:var(--text-primary); padding:0.65rem 0.85rem; border-radius:8px; font-family:'Space Mono',monospace; font-size:0.82rem; transition:all 0.2s; } .m-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,123,164,0.15); } .m-input::placeholder { color:var(--text-muted); font-family:'Outfit',sans-serif; } .m-hint { font-size:0.7rem; color:var(--text-muted); margin-top:0.25rem; line-height:1.4; } .m-actions { display:flex; gap:0.5rem; justify-content:flex-end; margin-top:1.5rem; } /* ─── SECTION HDR ─── */ .sec-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.85rem; } .sec-title { font-size:0.95rem; font-weight:700; } /* ─── LOADING / TOAST ─── */ .load-bar { position:fixed; top:60px; left:0; right:0; height:3px; z-index:150; display:none; } .load-bar.on { display:block; } .load-bar-inner { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-hot),var(--accent)); width:30%; animation:loadSlide 1.5s ease infinite; border-radius:2px; } @keyframes loadSlide { 0%{transform:translateX(-100%)} 100%{transform:translateX(400%)} } .toast { position:fixed; bottom:1.5rem; right:1.5rem; background:var(--bg-secondary); border:1px solid var(--border); padding:0.75rem 1.25rem; border-radius:10px; font-size:0.82rem; z-index:300; transform:translateY(80px); opacity:0; transition:all 0.3s ease; } .toast.show { transform:translateY(0); opacity:1; } .toast.success { border-color:var(--success); } .toast.error { border-color:var(--danger); } /* ─── CHANNEL LEGEND ─── */ .ch-legend { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; } .ch-legend-item { display:flex; align-items:center; gap:0.35rem; font-size:0.75rem; color:var(--text-secondary); } .ch-legend-dot { width:10px; height:10px; border-radius:3px; } /* ─── OPTIMIZATION SCORE (PPC) ─── */ .opt-score { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.72rem; font-weight:600; padding:0.15rem 0.5rem; border-radius:4px; font-family:'Space Mono',monospace; } .opt-score.high { background:rgba(52,211,153,0.12); color:var(--success); } .opt-score.mid { background:rgba(251,191,36,0.12); color:var(--warning); } .opt-score.low { background:rgba(248,113,113,0.12); color:var(--danger); } /* ─── OPPORTUNITY SCORE (Meta) ─── */ .opp-badge { display:inline-flex; align-items:center; gap:0.25rem; font-size:0.68rem; padding:0.15rem 0.45rem; border-radius:4px; font-weight:600; } .opp-badge.high { background:rgba(52,211,153,0.1); color:var(--success); } .opp-badge.mid { background:rgba(96,165,250,0.1); color:var(--info); } .opp-badge.low { background:rgba(248,113,113,0.1); color:var(--danger); } /* ─── API NOTES ─── */ .api-note { background:var(--bg-tertiary); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; padding:0.65rem 0.85rem; margin:0.75rem 0; font-size:0.72rem; color:var(--text-muted); line-height:1.5; } .api-note code { background:var(--bg-primary); padding:0.1rem 0.35rem; border-radius:3px; font-family:'Space Mono',monospace; font-size:0.68rem; color:var(--accent-light); } .api-note strong { color:var(--text-secondary); font-weight:600; } /* ─── DATA PIPELINE NOTE ─── */ .pipeline-note { background:var(--bg-tertiary); border:1px solid var(--border); border-radius:8px; padding:0.75rem 1rem; margin:0.75rem 0; font-size:0.72rem; color:var(--text-muted); line-height:1.5; } .pipeline-note .pipe-title { font-size:0.68rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.35rem; display:flex; align-items:center; gap:0.4rem; } .pipeline-note code { background:var(--bg-primary); padding:0.1rem 0.35rem; border-radius:3px; font-family:'Space Mono',monospace; font-size:0.68rem; color:var(--accent-light); } .pipeline-note .pipe-row { display:flex; gap:0.35rem; margin-bottom:0.2rem; } .pipeline-note .pipe-arrow { color:var(--accent); font-weight:700; } /* ─── HOURLY BADGE ─── */ .hourly-badge { display:inline-flex; align-items:center; gap:0.25rem; font-size:0.62rem; padding:0.12rem 0.4rem; border-radius:4px; font-weight:600; background:rgba(20,184,166,0.1); color:var(--seo-teal); border:1px solid rgba(20,184,166,0.2); } /* ─── RESPONSIVE ─── */ @media(max-width:768px) { .header { padding:0 0.75rem; flex-wrap:wrap; height:auto; padding:0.5rem 0.75rem; } .nav-tabs { order:3; width:100%; overflow-x:auto; } .main { padding:1rem; } .kpi-row { grid-template-columns:repeat(2, 1fr); } } ::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-track { background:var(--bg-primary); } ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

Google Ads

Not connected

Local Services

Not connected

Meta Ads

Not connected

Search Console

Not connected

GBP Profiles

Not connected

🐊

Connect Your Lead Sources

Link your ad accounts, website, and Google Business profiles to see every lead — paid and organic — in one unified dashboard.

🟢

Connect Google Ads

Link your Google Ads account to pull campaign performance, ad group metrics, and conversion tracking.

🟡

Connect Local Services

Link your LSA account to see lead data, booking rates, and budget utilization. Uses Google Ads API local_services_lead resource.

🔵

Connect Meta Ads

Link your Meta ad account to pull Facebook & Instagram campaign data and ROAS metrics.

🟩

Connect Your Organic Sources

Link Google Search Console for website organic traffic and Google Business Profile(s) for local leads — calls, direction requests, messages, and website clicks.