/* ========================================================================== rocket.f19.org — design system (v4 layout, from Jeff's approved mockup) -------------------------------------------------------------------------- Light "paper" theme. Per-org accent re-tint via : graco = default Rocket colours (no override) affordable = Affordable Door red (#DD2034, from affordabledoorco.com) float = Float OKC light blue (future entity — theme only for now) Fonts: Barlow Condensed (display), IBM Plex Sans (body), IBM Plex Mono (figures) — all from Google Fonts, loaded in layout.php. No build step. Every value is a token so a re-tint touches one place. Component class names match the approved mockup so the view reads 1:1 against the design. ========================================================================== */ :root{ --paper:#F3F5F1; --panel:#FFFFFF; --ink:#17211B; --muted:#5C675F; --line:#DCE2D9; --line-strong:#C9D2C6; --spend:#C4661A; /* money out */ --spend-soft:#F7E8DA; --rev:#1E7A4B; /* money in */ --rev-soft:#DFEFE5; --link:#2451C9; /* external drill links (ST / Google) */ --warn:#B33A3A; --unmatched:#97A0AC; --band:#111A14; /* header band */ --band-accent:#E8A05C; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --r-sm:3px; --r-md:4px; /* Chart.js token bridge — public/assets/charts.js reads these names. Aliased to the paper-theme palette via var() so they RE-TINT per org automatically (a data-theme override of --spend/--rev flows through). The trend chart is spend-vs-revenue, so series 1/2 map to those two semantic colours. */ --series-1:var(--spend); --series-2:var(--rev); --series-3:var(--band-accent); --series-4:var(--link); --ink-2:var(--ink); --ink-3:var(--muted); --grid:var(--line); --axis:var(--line-strong); --surface:var(--panel); } /* Per-org accents. Graco = default (no override block needed). */ body[data-theme="affordable"]{ --band:#3A0F15; --band-accent:#DD2034; --spend:#DD2034; --spend-soft:#F9E2E4; --link:#B01A2A; } body[data-theme="float"]{ --band:#0E2A3A; --band-accent:#6FD3F2; --rev:#1B7FA8; --rev-soft:#E0F2F9; --link:#1B7FA8; } *{ box-sizing:border-box; margin:0; padding:0; } html{ font-size:15px; } body{ background:var(--paper); color:var(--ink); font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif; line-height:1.45; } a{ color:var(--link); text-decoration:none; } a:hover{ text-decoration:underline; } .num{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; } /* ── header band ────────────────────────────────────────────────────────── */ header{ background:var(--band); color:#F2F5F0; padding:0 28px; transition:background .25s; } .band-top{ display:flex; align-items:center; gap:22px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); flex-wrap:wrap; } .wordmark{ font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:1.9rem; letter-spacing:.14em; text-transform:uppercase; } .wordmark span{ color:var(--band-accent); } .band-sub{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#9BAA9F; } .org-tabs{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; } .org-tab{ font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; background:transparent; border:1px solid rgba(255,255,255,.22); color:#C9D3CB; padding:6px 14px; border-radius:var(--r-sm); cursor:pointer; } .org-tab[aria-selected="true"]{ background:#F2F5F0; color:var(--band); border-color:#F2F5F0; } .org-tab[disabled]{ opacity:.4; cursor:not-allowed; } .band-controls{ display:flex; align-items:center; gap:8px; padding:10px 0 14px; flex-wrap:wrap; } .preset{ background:transparent; border:1px solid rgba(255,255,255,.18); color:#AEBBB1; padding:4px 10px; border-radius:var(--r-sm); cursor:pointer; font:inherit; font-size:.78rem; } .preset[aria-pressed="true"]{ background:var(--band-accent); border-color:var(--band-accent); color:var(--band); font-weight:600; } .custom-range{ display:flex; align-items:center; gap:6px; padding-left:12px; border-left:1px solid rgba(255,255,255,.18); } .custom-range label{ font-size:.68rem; color:#8E9C91; text-transform:uppercase; letter-spacing:.06em; } .custom-range input[type="date"]{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#DCE4DD; border-radius:var(--r-sm); padding:4px 6px; color-scheme:dark; font:inherit; font-size:.76rem; } .custom-range button{ background:transparent; border:1px solid var(--band-accent); color:var(--band-accent); border-radius:var(--r-sm); padding:4px 12px; font-size:.74rem; cursor:pointer; font-weight:600; } .band-controls select{ background:#1C2820; color:#DCE4DD; border:1px solid rgba(255,255,255,.18); border-radius:var(--r-sm); padding:5px 8px; font-size:.8rem; } .refresh{ margin-left:auto; font-size:.72rem; color:#8E9C91; } .refresh b{ color:#DCE4DD; font-weight:500; } .who{ font-size:.72rem; color:#8E9C91; } .who form{ display:inline; } .logout{ background:transparent; border:1px solid rgba(255,255,255,.22); color:#C9D3CB; border-radius:var(--r-sm); padding:3px 10px; cursor:pointer; font:inherit; font-size:.72rem; } /* ── layout ─────────────────────────────────────────────────────────────── */ main{ max-width:1240px; margin:0 auto; padding:22px 28px 60px; } h2{ font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:1.25rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; } h2 small{ font-family:"IBM Plex Sans",sans-serif; font-weight:400; font-size:.72rem; letter-spacing:0; text-transform:none; color:var(--muted); margin-left:10px; } section{ margin-bottom:30px; } .drillable{ cursor:pointer; } .drillable:hover{ outline:2px solid var(--band-accent); outline-offset:-1px; } /* a section with no live backend yet — shown, clearly marked, never faked */ .badge-soon{ display:inline-block; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line); color:var(--muted); border-radius:2px; padding:1px 6px; margin-left:8px; } /* orphan revenue: an attributed campaign with no ad_spend_daily row in range. Muted, never hidden — the reconciliation contract requires it stay visible. */ tr.orphan > td{ background:color-mix(in srgb, var(--muted) 6%, transparent); } tr.orphan .src{ opacity:.7; } /* ── hero row ───────────────────────────────────────────────────────────── */ .hero{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } @media(max-width:1100px){ .hero{ grid-template-columns:repeat(2,1fr); } } @media(max-width:800px){ .hero{ grid-template-columns:1fr; } } .hero-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; border-top:4px solid var(--rev); } .hero-card.sales{ border-top-color:var(--band-accent); } .hero-card .label{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .hero-card .label small{ text-transform:none; letter-spacing:0; } .hero-card .value{ font-family:"IBM Plex Mono",monospace; font-size:2rem; font-weight:600; margin-top:4px; } .hero-card .sub{ font-size:.72rem; color:var(--muted); margin-top:3px; } /* ── KPI strip ──────────────────────────────────────────────────────────── */ .kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:10px; } .kpi{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; border-top:3px solid var(--line); } .kpi.spend{ border-top-color:var(--spend); } .kpi.rev{ border-top-color:var(--rev); } .kpi .label{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .kpi .value{ font-family:"IBM Plex Mono",monospace; font-size:1.45rem; font-weight:600; margin-top:2px; } .kpi .delta{ font-size:.72rem; margin-top:2px; } .up{ color:var(--rev); } .down{ color:var(--warn); } .kpi .sub{ font-size:.7rem; color:var(--muted); margin-top:2px; } /* ── callout ────────────────────────────────────────────────────────────── */ .callout{ background:#FBF6EC; border:1px solid var(--spend); border-left-width:4px; border-radius:var(--r-md); padding:12px 16px; font-size:.84rem; } .callout b{ color:var(--ink); } /* ── funnel rail ────────────────────────────────────────────────────────── */ .rail-wrap{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:18px; } .rail{ display:flex; align-items:stretch; margin:8px 0 4px; flex-wrap:wrap; } .stage{ position:relative; flex:1; min-width:138px; padding:10px 12px 12px; border-right:1px dashed var(--line); } .stage:last-child{ border-right:none; } .stage .s-label{ font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .stage .s-value{ font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:1.1rem; } .stage .s-sub{ font-size:.66rem; color:var(--muted); } .stage .bar{ height:8px; border-radius:2px; margin-top:8px; background:var(--rev); } .stage.money-out .bar{ background:var(--spend); } .stage .bar.hatch{ background:repeating-linear-gradient(45deg,var(--unmatched) 0 4px,#C7CDD6 4px 8px); margin-top:3px; } .rail-note{ font-size:.72rem; color:var(--muted); } .rail-note b{ color:var(--ink); font-weight:600; } /* ── tables ─────────────────────────────────────────────────────────────── */ table{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; font-size:.8rem; } thead th{ font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); text-align:right; padding:9px 10px; border-bottom:2px solid var(--ink); background:#FAFBF9; white-space:nowrap; } thead th:first-child, tbody td:first-child, tfoot td:first-child{ text-align:left; } tbody td, tfoot td{ padding:9px 10px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; } tbody tr:hover{ background:#F6F8F4; } td .src{ display:inline-block; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line); border-radius:2px; padding:1px 6px; margin-right:8px; color:var(--muted); } .expander{ cursor:pointer; user-select:none; } .caret{ display:inline-block; transition:transform .15s; margin-right:6px; color:var(--muted); } tr.open .caret{ transform:rotate(90deg); } .range{ color:var(--muted); } .neg{ color:var(--warn); } tr.unmatched td{ background:repeating-linear-gradient(45deg,#F2F4F6 0 6px,#FAFBFC 6px 12px); } .footnote{ font-size:.74rem; color:var(--muted); margin-top:8px; } tr.totals td{ font-weight:600; background:#FAFBF9; border-top:2px solid var(--line-strong); } /* ── split: trend + rollup ──────────────────────────────────────────────── */ .split{ display:grid; grid-template-columns:2fr 1fr; gap:14px; } @media(max-width:900px){ .split{ grid-template-columns:1fr; } } .card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; } .legend{ display:flex; gap:16px; font-size:.72rem; color:var(--muted); margin-bottom:6px; } .chip{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; } .chart-wrap{ position:relative; height:220px; } .roll{ display:flex; flex-direction:column; gap:8px; } .roll-row{ display:grid; grid-template-columns:1fr auto auto auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; font-size:.8rem; } .roll-row .org{ font-weight:600; } .roas-pill{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:600; padding:2px 7px; border-radius:10px; background:var(--rev-soft); color:var(--rev); } .roas-pill.low{ background:var(--spend-soft); color:var(--spend); } /* ── drill-down modal ───────────────────────────────────────────────────── */ /* Overlay (backdrop) + centered dialog. display:none until .show; Esc / click-outside / focus-trap are wired in dashboard.php's drill JS. */ #drill{ display:none; position:fixed; inset:0; z-index:1250; /* above the sticky header (1200), below the global search palette (1300) */ background:rgba(17,24,33,.55); padding:5vh 16px 24px; overflow-y:auto; -webkit-overflow-scrolling:touch; } #drill.show{ display:flex; align-items:flex-start; justify-content:center; } #drill .drill-dialog{ position:relative; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--band-accent); border-left-width:4px; border-radius:var(--r-md); padding:16px 18px; width:min(1080px, 100%); max-height:90vh; overflow:hidden; box-shadow:0 20px 55px rgba(0,0,0,.30); } #drill .drill-dialog:focus{ outline:none; } #drill h3{ font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:1.15rem; letter-spacing:.06em; text-transform:uppercase; padding-right:64px; } #drill .d-sub{ font-size:.74rem; color:var(--muted); margin:2px 0 10px; } /* Only the body scrolls, so the pinned Close (below) never scrolls out of reach — the mobile full-screen sheet has no backdrop to tap and no Esc key. */ #drill .d-body{ overflow-y:auto; flex:1 1 auto; min-height:0; } #drill .close{ position:absolute; top:12px; right:14px; z-index:1; background:var(--panel); border:1px solid var(--line); color:var(--muted); border-radius:var(--r-sm); padding:4px 12px; cursor:pointer; font-size:.74rem; } #drill .close:focus-visible{ outline:2px solid var(--band-accent); outline-offset:1px; } #drill .loading{ font-size:.8rem; color:var(--muted); padding:10px 0; } /* Mobile: full-screen sheet that fills the fixed overlay. height:100% agrees with the inset:0 overlay (single scroll region; avoids a dvh double-scrollbar). */ @media (max-width:640px){ #drill{ padding:0; } #drill .drill-dialog{ width:100%; height:100%; max-height:none; border-radius:0; border-left-width:1px; } #drill .close{ padding:8px 14px; } } .rec::before{ content:"▶ "; font-size:.6rem; } .ext::after{ content:" ↗"; font-size:.62rem; } .call-table{ border:1px solid var(--line); font-size:.76rem; } .call-table thead th{ background:#EEF2EA; border-bottom:1px solid var(--line); } .call-table td{ padding:7px 10px; } .drill-links{ margin-top:10px; font-size:.74rem; display:flex; gap:18px; flex-wrap:wrap; } /* drill tabs (By Day / Call Detail) */ .drill-tabs{ display:flex; gap:2px; margin-bottom:10px; border-bottom:1px solid var(--line); } .drill-tab{ border:1px solid var(--line); border-bottom:none; background:var(--surface-2,#f2f4f7); color:var(--muted); font:inherit; font-size:.74rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:6px 14px; border-radius:var(--r-sm) var(--r-sm) 0 0; cursor:pointer; margin-bottom:-1px; } .drill-tab.active{ background:var(--panel); color:var(--ink); border-bottom:1px solid var(--panel); } .drill-panel table.call-table tfoot tr.totals td{ font-weight:700; background:#FAFBF9; border-top:2px solid var(--line-strong); } /* nested By-Day: each day row expands to that day's calls underneath */ .call-table.nested .exp-col{ width:26px; text-align:center; padding-left:6px; padding-right:0; } .call-table.nested tr.day-row{ cursor:pointer; } .call-table.nested tr.day-row:hover{ background:#F6F8F4; } .call-table.nested tr.day-row.open{ background:#EEF2EA; font-weight:600; } .call-table.nested tr.day-detail > td{ padding:0; background:#FBFCFA; } .day-inner{ padding:8px 8px 12px 30px; } .day-inner table.call-table{ margin:0; } /* ── CSR toggle ─────────────────────────────────────────────────────────── */ .csr-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; margin-left:12px; vertical-align:middle; } .csr-toggle button{ border:none; background:var(--panel); padding:4px 12px; cursor:pointer; color:var(--muted); font:inherit; font-size:.7rem; } .csr-toggle button[aria-pressed="true"]{ background:var(--ink); color:#fff; } /* ── trend: granularity + metric toggles, period-over-period strip ──────── */ /* Reuses the .csr-toggle segmented pattern so the dashboard has ONE control idiom, and the theme tokens so the Affordable red / Float blue skins inherit it without further work. */ .trend-gran, .trend-series{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; vertical-align:middle; } .trend-gran{ float:right; margin-left:12px; } .trend-series{ margin:0 0 8px; } .trend-gran .tg, .trend-series .ts{ border:none; background:var(--panel); padding:4px 12px; cursor:pointer; color:var(--muted); font:inherit; font-size:.7rem; } .trend-gran .tg.is-on, .trend-series .ts.is-on{ background:var(--ink); color:#fff; } .trend-deltas{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; margin:4px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line); } .trend-deltas .td{ display:flex; flex-direction:column; gap:1px; min-width:92px; } .trend-deltas .k{ font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); } .trend-deltas .v{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.95rem; color:var(--ink); } .trend-deltas .d{ font-size:.7rem; } /* Direction is coloured only where direction has a meaning: revenue/sales/leads up is good, cost-per-deal down is good, and SPEND is neutral — more spend is neither win nor loss without the return beside it. */ .trend-deltas .d.good{ color:var(--rev); } .trend-deltas .d.bad{ color:var(--warn); } .trend-deltas .d.flat{ color:var(--muted); } .trend-deltas .td-note{ flex-basis:100%; font-size:.68rem; color:var(--muted); } @media(max-width:640px){ .trend-deltas .td{ min-width:74px; } .trend-gran{ float:none; } } /* ── alerts / coverage warnings ─────────────────────────────────────────── */ .alert{ padding:10px 14px; border-radius:var(--r-md); margin-bottom:14px; font-size:.84rem; border:1px solid var(--line); background:var(--panel); } .alert.warning{ border-color:var(--spend); border-left-width:4px; background:#FBF6EC; } .alert.error{ border-color:var(--warn); border-left-width:4px; background:#F9ECEC; } /* ── login ──────────────────────────────────────────────────────────────── */ .center-card{ max-width:380px; margin:8vh auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:26px; } label.field{ display:block; font-size:.72rem; color:var(--muted); margin:12px 0 4px; text-transform:uppercase; letter-spacing:.06em; } input[type=text],input[type=email],input[type=password]{ width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm); font:inherit; background:var(--paper); color:var(--ink); } .btn{ display:inline-block; padding:9px 16px; border-radius:var(--r-sm); border:1px solid var(--band-accent); background:var(--band-accent); color:var(--band); font-weight:600; cursor:pointer; font:inherit; } .handoff{ font-size:.72rem; color:var(--muted); border-left:3px solid var(--spend); padding:8px 12px; background:var(--panel); } footer{ max-width:1240px; margin:0 auto; padding:0 28px 40px; font-size:.68rem; color:var(--muted); } @media(prefers-reduced-motion:reduce){ *{ transition:none !important; } } /* ── call-summary popover (drill modals: hover/click a Time or Grade cell) ── */ .cs-sum{color:#0645ad;cursor:pointer;border-bottom:1px dotted #9db3d8} .cs-sum:hover{background:#eef4ff} #csPop{display:none;position:fixed;z-index:1290; /* above #drill (1250), below search palette (1300) */background:#fff;color:#14201b; border:1px solid #cbd3dc;border-radius:12px;box-shadow:0 14px 38px rgba(0,0,0,.22); padding:12px 14px;font-size:.86rem;line-height:1.45} #csPop .cs-pop-sum{margin-bottom:8px} #csPop .cs-pop-link{display:inline-block;font-weight:700;color:#0645ad;text-decoration:none} #csPop .cs-pop-link:hover{text-decoration:underline} /* ── Lead Inbox (/leads) ─────────────────────────────────────────────────── */ .page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px} .page-head h1{margin:0;font-size:1.3rem} .page-head h1 small{font-weight:500;color:#64748b;font-size:.72rem;margin-left:6px} .inline-filters{display:flex;gap:8px} .inline-filters select{padding:6px 10px;border:1px solid #dbe2ea;border-radius:8px;background:#fff;font-size:.85rem} .lead-card{border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;margin:0 0 12px;background:#fff} .lead-card.is-converted{background:#f8fbf9;border-color:#cfe8d8} .lead-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap} .lead-phone{font-size:1.02rem} .lead-meta{color:#64748b;font-size:.8rem} .badge{display:inline-block;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;margin-right:6px} .badge-msg{background:#eef2ff;color:#3730a3} .badge-call{background:#ecfdf5;color:#065f46} .chip{display:inline-block;font-size:.68rem;padding:1px 7px;border-radius:999px;margin-left:6px} .chip-paid{background:#fef3c7;color:#92400e} .lead-note{margin:10px 0 0;padding:8px 12px;border-radius:8px;background:#f1f5f9;font-size:.85rem} .lead-note.ok{background:#ecfdf5;color:#065f46} .thread{margin:12px 0 0;display:flex;flex-direction:column;gap:8px} .msg{max-width:78%;padding:8px 12px;border-radius:12px;font-size:.86rem;line-height:1.45} .msg-them{align-self:flex-start;background:#f1f5f9;border-bottom-left-radius:3px} .msg-us{align-self:flex-end;background:#e0edff;border-bottom-right-radius:3px} .msg-who{font-size:.7rem;font-weight:700;color:#475569;margin-bottom:2px} .msg-time{font-weight:400;color:#94a3b8;margin-left:6px} .convert{margin-top:12px} .convert summary{cursor:pointer;display:inline-block;list-style:none} .convert summary::-webkit-details-marker{display:none} .convert-form{margin-top:12px;padding:14px;border:1px dashed #cbd5e1;border-radius:10px} .convert-form .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px} .convert-form label.field{display:flex;flex-direction:column;gap:3px;font-size:.78rem;font-weight:600;color:#334155} .convert-form input,.convert-form textarea{padding:7px 10px;border:1px solid #dbe2ea;border-radius:8px;font-size:.88rem;font-family:inherit;font-weight:400} .convert-form textarea{margin-top:10px;width:100%} .btn-sm{padding:6px 14px;font-size:.85rem} .small{font-size:.78rem} /* csPop mobile — the call-summary popover is anchored + 360px wide, which on a phone lands half off-screen and clips the text. Make it a bottom sheet: the JS positions it with inline top/left, so these need !important to win. */ @media (max-width: 640px) { #csPop { left: 8px !important; right: 8px !important; top: auto !important; bottom: 12px !important; max-width: none !important; width: auto !important; max-height: 55vh; overflow-y: auto; font-size: .92rem; line-height: 1.5; padding: 14px 15px; box-shadow: 0 -8px 40px rgba(0,0,0,.30); } .cs-sum { border-bottom-style: solid; } /* clearer it is tappable */ } /* ── Ad Intelligence ───────────────────────────────────────────────────── Appended, not merged in place: every selector here is module-scoped (.adi*), except .btn-sm which live already defines and followups / lead_inbox / reports rely on — so that one is scoped to .adi .btn-sm rather than overriding the global rule. */ /* ══ Ad Intelligence ═══════════════════════════════════════════════════════ Competitor Facebook/Meta ad research. Uses the same tokens as the rest of Rocket, so the module re-tints with the org theme and reads as part of the app rather than a bolted-on tool. Nothing here overrides an existing rule. ========================================================================== */ /* ── primary section nav in the header band ─────────────────────────────── */ .band-nav{ display:flex; gap:2px; padding:0 0 4px; flex-wrap:wrap; } .band-link{ font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:.92rem; letter-spacing:.08em; text-transform:uppercase; color:#9BAA9F; text-decoration:none; padding:5px 12px; border-radius:var(--r-sm); border:1px solid transparent; } .band-link:hover{ color:#F2F5F0; text-decoration:none; background:rgba(255,255,255,.07); } .band-link[aria-current="page"]{ color:var(--band); background:var(--band-accent); border-color:var(--band-accent); } /* ── module sub-nav (Overview | Competitors | Ads | …) ──────────────────── */ .adi-subnav{ display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin:0 0 18px; } .adi-subnav a{ font-size:.76rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding:8px 14px; border:1px solid transparent; border-bottom:none; border-radius:var(--r-sm) var(--r-sm) 0 0; margin-bottom:-1px; } .adi-subnav a:hover{ color:var(--ink); background:#FAFBF9; text-decoration:none; } .adi-subnav a[aria-current="page"]{ background:var(--panel); color:var(--ink); border-color:var(--line); border-bottom-color:var(--panel); } .adi-subnav .adi-badge{ display:inline-block; min-width:17px; margin-left:6px; padding:0 5px; background:var(--spend); color:#fff; border-radius:9px; font-size:.62rem; line-height:16px; text-align:center; font-variant-numeric:tabular-nums; } /* ── page head: title + entity + right-hand actions ─────────────────────── */ .adi-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; } .adi-head h1{ font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:1.6rem; letter-spacing:.06em; text-transform:uppercase; } .adi-head .sub{ font-size:.76rem; color:var(--muted); margin-top:2px; } .adi-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .adi .btn-sm{ display:inline-block; padding:5px 11px; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); font:inherit; font-size:.74rem; font-weight:600; cursor:pointer; text-decoration:none; } .btn-sm:hover{ background:#F2F5EF; text-decoration:none; } .btn-sm.primary{ background:var(--band-accent); border-color:var(--band-accent); color:var(--band); } .btn-sm.danger{ color:var(--warn); border-color:var(--warn); } .btn-sm[disabled]{ opacity:.45; cursor:not-allowed; } /* ── filter bar ─────────────────────────────────────────────────────────── */ .adi-filters{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-bottom:16px; } .adi-filters form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; } .adi-field{ display:flex; flex-direction:column; gap:3px; } .adi-field label{ font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .adi-field select, .adi-field input[type=text], .adi-field input[type=search], .adi-field input[type=date]{ border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 8px; font:inherit; font-size:.8rem; background:var(--paper); color:var(--ink); min-width:132px; } .adi-field input[type=search]{ min-width:230px; } .adi-chips{ display:flex; gap:5px; flex-wrap:wrap; margin-top:10px; } .adi-chip{ font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600; border:1px solid var(--line-strong); border-radius:12px; padding:3px 10px; color:var(--muted); text-decoration:none; background:var(--panel); } .adi-chip:hover{ text-decoration:none; border-color:var(--band-accent); color:var(--ink); } .adi-chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; } .adi-chip .x{ opacity:.6; margin-left:5px; } /* ── ad card grid ───────────────────────────────────────────────────────── */ .adi-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px; } .adi-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; } .adi-card.is-inactive{ opacity:.72; } .adi-card .thumb{ position:relative; aspect-ratio:1/1; background:#EDF0EA; overflow:hidden; display:flex; align-items:center; justify-content:center; } .adi-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .adi-card .thumb .placeholder{ font-family:"Barlow Condensed",sans-serif; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center; padding:12px; } .adi-card .fmt{ position:absolute; top:8px; left:8px; background:rgba(17,26,20,.82); color:#fff; font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; padding:2px 7px; border-radius:2px; } .adi-card .days{ position:absolute; bottom:8px; right:8px; background:var(--panel); border:1px solid var(--line-strong); font-family:"IBM Plex Mono",monospace; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:11px; } .adi-card .days.long{ background:var(--rev-soft); color:var(--rev); border-color:var(--rev); } .adi-card .days.new{ background:var(--spend-soft); color:var(--spend); border-color:var(--spend); } .adi-card .body{ padding:11px 12px; display:flex; flex-direction:column; gap:5px; flex:1; } .adi-card .company{ font-weight:600; font-size:.84rem; line-height:1.25; } .adi-card .meta{ font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); } .adi-card .headline{ font-size:.8rem; line-height:1.3; } .adi-card .offer{ font-size:.72rem; font-weight:600; color:var(--spend); } .adi-card .offer.none{ color:var(--muted); font-weight:400; } .adi-card .started{ font-size:.66rem; color:var(--muted); margin-top:auto; } .adi-card .card-actions{ display:flex; gap:5px; padding:9px 12px; border-top:1px solid var(--line); background:#FAFBF9; flex-wrap:wrap; } .adi-card .card-actions a, .adi-card .card-actions button{ font-size:.66rem; padding:4px 9px; } /* trade pill — colour-coded so a grid scans by trade at a glance */ .trade-pill{ display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:2px; border:1px solid var(--line-strong); color:var(--muted); background:var(--panel); } .trade-pill.hvac{ background:#E4EEF7; border-color:#9DBBD6; color:#1B4C77; } .trade-pill.plumbing{ background:#E0F0EC; border-color:#8FC5B7; color:#12604D; } .trade-pill.electrical{ background:#FBF0D8; border-color:#DDBE71; color:#7A5A0B; } .trade-pill.garage_door{ background:#EDE6F5; border-color:#B7A2D6; color:#4C2F7A; } .trade-pill.gates{ background:#F3E7E1; border-color:#CDAA97; color:#6E432C; } /* status + confidence markers */ .pill{ display:inline-block; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line); border-radius:2px; padding:1px 6px; color:var(--muted); } .pill.active{ border-color:var(--rev); color:var(--rev); background:var(--rev-soft); } .pill.inactive{ border-color:var(--unmatched); color:var(--unmatched); } .pill.ok{ border-color:var(--rev); color:var(--rev); background:var(--rev-soft); } .pill.partial{ border-color:var(--spend); color:var(--spend); background:var(--spend-soft); } .pill.failed{ border-color:var(--warn); color:var(--warn); background:#F9ECEC; } .pill.high{ border-color:var(--rev); color:var(--rev); } .pill.medium{ border-color:var(--spend); color:var(--spend); } .pill.low{ border-color:var(--unmatched); color:var(--unmatched); } .pill.manual{ border-color:var(--link); color:var(--link); } /* "observed vs inferred" is a first-class distinction in this module */ .obs-label{ display:inline-block; font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:1px 6px; border-radius:2px; } .obs-label.observed{ background:#E7EEE9; color:#25543A; } .obs-label.inferred{ background:#F1ECF7; color:#4C2F7A; } .not-available{ font-size:.74rem; color:var(--muted); font-style:italic; } /* ── detail layout ──────────────────────────────────────────────────────── */ .adi-detail{ display:grid; grid-template-columns:minmax(280px,380px) 1fr; gap:18px; align-items:start; } @media(max-width:900px){ .adi-detail{ grid-template-columns:1fr; } } .adi-creative{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; position:sticky; top:14px; } @media(max-width:900px){ .adi-creative{ position:static; } } .adi-creative img{ width:100%; display:block; } .adi-creative .cap{ padding:11px 13px; font-size:.72rem; color:var(--muted); border-top:1px solid var(--line); } .adi-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:14px; flex-wrap:wrap; } .adi-tabs a{ font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding:7px 13px; border:1px solid transparent; border-bottom:none; border-radius:var(--r-sm) var(--r-sm) 0 0; margin-bottom:-1px; } .adi-tabs a[aria-current="page"]{ background:var(--panel); color:var(--ink); border-color:var(--line); border-bottom-color:var(--panel); } .adi-tabs a:hover{ color:var(--ink); text-decoration:none; } .kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:.82rem; } .kv dt{ font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; padding-top:2px; } .kv dd{ margin:0; word-break:break-word; } .scene{ border-left:3px solid var(--band-accent); padding:8px 0 8px 13px; margin-bottom:12px; } .scene .t{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--muted); } .scene .lbl{ font-weight:600; font-size:.8rem; } .scene .txt{ font-size:.82rem; margin-top:3px; } .adi-pre{ background:#FAFBF9; border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.76rem; line-height:1.55; white-space:pre-wrap; word-break:break-word; overflow-x:auto; max-height:640px; } .adi-quote{ border-left:3px solid var(--line-strong); padding:4px 0 4px 13px; font-size:.84rem; line-height:1.5; color:var(--ink); } .adi-note{ font-size:.74rem; color:var(--muted); background:#FAFBF9; border:1px solid var(--line); border-left:3px solid var(--band-accent); border-radius:var(--r-sm); padding:9px 12px; } .adi-note.warn{ border-left-color:var(--spend); background:#FBF6EC; } .adi-note.bad{ border-left-color:var(--warn); background:#F9ECEC; } /* small stat strip used on competitor / concept pages */ .adi-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:9px; margin-bottom:16px; } .adi-stat{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:9px 11px; border-top:3px solid var(--line); } .adi-stat .l{ font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); } .adi-stat .v{ font-family:"IBM Plex Mono",monospace; font-size:1.3rem; font-weight:600; } .adi-stat.accent{ border-top-color:var(--band-accent); } .adi-stat.good{ border-top-color:var(--rev); } .adi-stat.warn{ border-top-color:var(--spend); } .adi-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; } @media(max-width:900px){ .adi-two{ grid-template-columns:1fr; } } .adi-empty{ background:var(--panel); border:1px dashed var(--line-strong); border-radius:var(--r-md); padding:26px; text-align:center; color:var(--muted); font-size:.84rem; } .adi-empty b{ color:var(--ink); display:block; margin-bottom:5px; font-size:.94rem; } textarea.adi-input{ width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px; font:inherit; font-size:.82rem; background:var(--paper); color:var(--ink); min-height:110px; resize:vertical; } input.adi-input, select.adi-input{ width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; font:inherit; font-size:.84rem; background:var(--paper); color:var(--ink); } /* A section subtitle is one unit: let it wrap BELOW the heading rather than breaking mid-sentence when the column is narrow (the settings page puts two sections side by side). */ .adi h2{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; } .adi h2 small{ margin-left:0; } /* Wide module tables (offers, scan history, competitors) scroll inside their own box on a narrow screen, so the page body never scrolls sideways. Scoped to .adi so the dashboard's own tables are untouched. */ @media (max-width:760px){ .adi table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .adi .adi-filters form{ gap:8px; } .adi .adi-field select, .adi .adi-field input[type=text], .adi .adi-field input[type=search]{ min-width:0; width:100%; } .adi .adi-field{ flex:1 1 46%; } .adi .adi-head h1{ font-size:1.3rem; } }