/* Shared by every dashboard page: design tokens (light and dark), base, the app shell (sidebar + page header), and the building blocks (metric cards, chips, panels, stat rows, filter pills, alerts). Page-specific styles stay inline in each page. The theme is set on by the small script in each page's , before first paint. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Tokens: light (default) ─────────────────────────────────────────── */ /* Brand: Delivering Demand aubergine #14001F + gold #CB933A. In light, the aubergine carries the ink and a plum derived from it marks "where you are" (the active page, the selected option, headline numbers); gold marks the main action. All neutrals are tinted toward the brand hue (312.5). */ :root { color-scheme: light; --brand: #14001F; --gold: #CB933A; --bg: oklch(0.97 0.006 312.5); --surface: oklch(1 0 0); --surface-2: oklch(0.96 0.012 312.5); --surface-3: oklch(0.925 0.02 312.5); --border: oklch(0.915 0.012 312.5); --border-strong: oklch(0.85 0.018 312.5); --sidebar-bg: var(--surface); --ink: oklch(0.2 0.05 312.5); --ink-2: oklch(0.36 0.04 312.5); --muted: oklch(0.5 0.03 312.5); --primary: oklch(0.44 0.17 312.5); --primary-hover: oklch(0.39 0.16 312.5); --on-primary: oklch(1 0 0); --primary-wash: oklch(0.44 0.17 312.5 / 0.08); --accent: var(--gold); --accent-hover: oklch(0.7 0.13 72); --accent-ink: oklch(0.52 0.11 70); --accent-wash: oklch(0.7 0.12 75 / 0.16); --on-accent: var(--brand); --good: oklch(0.52 0.14 152); --warn: oklch(0.72 0.15 85); --bad: oklch(0.54 0.2 25); --good-wash: oklch(0.52 0.14 152 / 0.12); --bad-wash: oklch(0.54 0.2 25 / 0.09); --bad-line: oklch(0.54 0.2 25 / 0.3); --flat-wash: oklch(0.5 0.03 312.5 / 0.1); /* Funnel: one-hue ordinal ramp, first stage darkest. */ --f1: oklch(0.34 0.15 312.5); --f2: oklch(0.44 0.16 312.5); --f3: oklch(0.55 0.15 312.5); --f4: oklch(0.66 0.13 312.5); /* KPI bands (the account owner's framework). CPL and booking rate deliberately use DIFFERENT colours for the same band names. */ --cpl-exceptional: var(--good); --cpl-good: oklch(0.57 0.16 50); --cpl-redflag: var(--bad); --br-exceptional: oklch(0.5 0.16 255); --br-good: var(--good); --br-needsattention: var(--bad); --nav-active-bg: var(--primary); --nav-active-ink: var(--on-primary); --nav-active-icon: oklch(0.86 0.1 78); --select-bg: var(--primary); --select-ink: var(--on-primary); --kpi-num: var(--primary); --icon-accent: var(--primary); --table-head: var(--surface-2); --focus: var(--primary); --danger-bg: oklch(0.52 0.2 25); --danger-bg-hover: oklch(0.47 0.19 25); --shadow-card: 0 1px 2px oklch(0.2 0.05 312.5 / 0.04), 0 2px 8px oklch(0.2 0.05 312.5 / 0.03); --shadow-pop: 0 12px 32px oklch(0.2 0.05 312.5 / 0.16); --backdrop: oklch(0.2 0.05 312.5 / 0.4); --radius: 12px; --radius-sm: 8px; --ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* Inter throughout (loaded from Google Fonts in each page head): 700 for headings and key numbers, 600 for buttons and important labels, 500 for navigation and section headings, 400 for body, table data and chart labels. */ --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --sidebar-w: 248px; --z-sidebar: 40; --z-tooltip: 50; } /* ── Tokens: dark ────────────────────────────────────────────────────── */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--brand); --surface: oklch(0.19 0.06 312.5); --surface-2: oklch(0.235 0.055 312.5); --surface-3: oklch(0.27 0.055 312.5); --border: oklch(0.3 0.05 312.5); --border-strong: oklch(0.38 0.05 312.5); --sidebar-bg: var(--bg); --ink: oklch(0.96 0.01 312.5); --ink-2: oklch(0.83 0.025 312.5); --muted: oklch(0.72 0.04 312.5); --primary: var(--gold); --primary-hover: oklch(0.76 0.12 75.5); --on-primary: var(--brand); --primary-wash: oklch(0.702 0.123 75.5 / 0.14); --accent-hover: oklch(0.76 0.12 75.5); --accent-ink: oklch(0.82 0.1 78); --accent-wash: oklch(0.702 0.123 75.5 / 0.14); --good: oklch(0.8 0.16 152); --warn: oklch(0.89 0.17 102); --bad: oklch(0.66 0.2 22); --good-wash: oklch(0.8 0.16 152 / 0.13); --bad-wash: oklch(0.66 0.2 22 / 0.13); --bad-line: oklch(0.66 0.2 22 / 0.4); --flat-wash: oklch(0.72 0.04 312.5 / 0.14); --f1: oklch(0.48 0.13 312.5); --f2: oklch(0.58 0.14 312.5); --f3: oklch(0.68 0.13 312.5); --f4: oklch(0.78 0.11 312.5); --cpl-good: oklch(0.76 0.15 50); --br-exceptional: oklch(0.74 0.13 250); --nav-active-bg: var(--surface-2); --nav-active-ink: var(--ink); --nav-active-icon: var(--accent-ink); --select-bg: var(--accent); --select-ink: var(--on-accent); --kpi-num: var(--ink); --icon-accent: var(--muted); --table-head: var(--surface-2); --focus: var(--accent-ink); --danger-bg: oklch(0.5 0.18 22); --danger-bg-hover: oklch(0.45 0.17 22); --shadow-card: none; --shadow-pop: 0 12px 32px oklch(0.08 0.05 312.5 / 0.6); --backdrop: oklch(0.08 0.05 312.5 / 0.7); } html { -webkit-text-size-adjust: 100%; } [hidden] { display: none !important; } body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 0.875rem; line-height: 1.45; min-height: 100vh; -webkit-font-smoothing: antialiased; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ── Shell: sidebar + content ────────────────────────────────────────── */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } .content { min-width: 0; } /* A client's own link (data-view="client", set by the server): no sidebar, the page takes the full width. */ [data-view="client"] .shell { grid-template-columns: minmax(0, 1fr); } [data-view="client"] .sidebar { display: none; } .sidebar { position: sticky; top: 0; z-index: var(--z-sidebar); height: 100vh; display: flex; flex-direction: column; background: var(--sidebar-bg); border-right: 1px solid var(--border); } /* ── Collapsible sidebar (sidebar.js) ───────────────────────────────────── A round button on the sidebar's edge folds it to its icons; the choice is remembered per browser. Collapsed, each icon says its name on hover. */ :root[data-sidebar="collapsed"] { --sidebar-w: 76px; } .sidebar-animate .shell { transition: grid-template-columns 240ms cubic-bezier(0.22, 1, 0.36, 1); } .sidebar-toggle { position: absolute; top: 34px; right: -13px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-card); color: var(--muted); cursor: pointer; transition: color 150ms, border-color 150ms; } .sidebar-toggle:hover { color: var(--ink); border-color: var(--ink-2); } .sidebar-toggle svg { transform: rotate(180deg); transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); } [data-sidebar="collapsed"] .sidebar-toggle svg { transform: none; } [data-sidebar="collapsed"] .brand { justify-content: center; padding: 26px 0 22px; } [data-sidebar="collapsed"] .brand-text, [data-sidebar="collapsed"] .nav-full, [data-sidebar="collapsed"] .me-text { display: none; } [data-sidebar="collapsed"] .nav { padding: 8px 14px; } [data-sidebar="collapsed"] .nav a { justify-content: center; padding: 10px 0; position: relative; } [data-sidebar="collapsed"] .sidebar-foot { flex-direction: column; gap: 6px; margin-inline: 10px; padding: 14px 0 18px; } [data-sidebar="collapsed"] .me { flex: none; margin: 0 0 4px; } /* Names as tooltips when it's folded, like the Clients page's icon buttons. */ [data-sidebar="collapsed"] .nav a::after, .sidebar-toggle[data-tip]::after { position: absolute; left: calc(100% + 12px); top: 50%; z-index: var(--z-tooltip); padding: 5px 9px; border-radius: 6px; background: var(--ink); color: var(--surface); font-size: 0.75rem; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-3px, -50%); transition: opacity 120ms ease-out, transform 120ms ease-out; } [data-sidebar="collapsed"] .nav a::after { content: attr(data-label); } .sidebar-toggle[data-tip]::after { content: attr(data-tip); left: calc(100% + 8px); } [data-sidebar="collapsed"] .nav a:hover::after, [data-sidebar="collapsed"] .nav a:focus-visible::after, .sidebar-toggle:hover::after, .sidebar-toggle:focus-visible::after { opacity: 1; transform: translate(0, -50%); } @media (prefers-reduced-motion: reduce) { .sidebar-animate .shell, .sidebar-toggle svg { transition: none; } } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 26px 24px 22px; } .brand-mark { flex: none; display: block; width: 40px; height: 40px; } .brand-text { display: grid; min-width: 0; line-height: 1.25; } .brand-name { font-weight: 600; font-size: 1rem; white-space: nowrap; } .brand-product { color: var(--muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav { display: grid; gap: 4px; padding: 8px 16px; } .nav a { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: background-color 150ms, color 150ms; } .nav a svg { flex: none; color: var(--muted); transition: color 150ms; } .nav a:hover { background: var(--surface-2); color: var(--ink); } .nav a:hover svg { color: var(--ink-2); } .nav a[aria-current="page"] { background: var(--nav-active-bg); color: var(--nav-active-ink); } .nav a[aria-current="page"] svg { color: var(--nav-active-icon); } .nav-short { display: none; } /* Bottom of the sidebar: who's signed in, then Settings and Log out. */ .sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 4px; margin-inline: 12px; padding: 14px 4px 18px 8px; border-top: 1px solid var(--border); } /* Who's signed in: a button that opens Your profile (sidebar.js). */ .me { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; margin: -6px 4px -6px -6px; padding: 6px; background: none; border: 0; border-radius: var(--radius-sm); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 150ms; } .me[hidden] { display: none; } .me:hover { background: var(--surface-2); } .me:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; } .me-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--primary-wash); color: var(--primary); font-size: 0.8125rem; font-weight: 600; } .me-avatar img, .pf-photo img { width: 100%; height: 100%; object-fit: cover; } /* Your profile: photo, name, then password under a divider. */ dialog.profile { width: min(480px, calc(100vw - 32px)); padding: 24px; } .pf-close { position: absolute; top: 14px; right: 14px; } .profile h2 { margin-right: 36px; } .profile h3 { font-size: 0.9375rem; font-weight: 700; margin-bottom: 12px; } .pf-top { display: flex; align-items: center; gap: 16px; margin: 18px 0 18px; } .pf-photo { position: relative; flex: none; display: grid; place-items: center; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--primary-wash); color: var(--primary); font-size: 1.75rem; font-weight: 700; } .pf-photo > span:first-child { display: contents; } .pf-photo-edit { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgb(0 0 0 / 0.45); opacity: 0; transition: opacity 150ms; } .pf-photo:hover .pf-photo-edit, .pf-photo:focus-visible .pf-photo-edit { opacity: 1; } .pf-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .pf-who { display: grid; gap: 2px; min-width: 0; } .pf-email { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-role { color: var(--muted); font-size: 0.8125rem; } .pf-photo-actions { display: flex; gap: 8px; margin-top: 8px; } .pf-remove:hover { color: var(--bad); } .pf-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .pf-saved { color: var(--good); font-size: 0.8125rem; font-weight: 600; } .pf-pw { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); } .pf-pw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .pf-pw .hint { display: block; margin: -6px 0 12px; color: var(--muted); font-size: 0.75rem; } @media (max-width: 520px) { .pf-pw-row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .pf-photo-edit { transition: none; } } .me-text { display: grid; min-width: 0; line-height: 1.3; } .me-name { font-weight: 600; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me-role { color: var(--muted); font-size: 0.75rem; } .icon-btn { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer; text-decoration: none; transition: background-color 150ms, border-color 150ms, color 150ms; } .icon-btn:hover { background: var(--surface-2); border-color: var(--border); color: var(--ink); } .icon-btn[aria-current="page"] { background: var(--nav-active-bg); color: var(--nav-active-icon); } .btn-quiet { background: var(--surface); border: 1px solid var(--border); color: var(--ink-2); padding: 6px 12px; min-height: 32px; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background-color 150ms, border-color 150ms, color 150ms; } .btn-quiet:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink); } /* ── Buttons, forms, dialogs, tabs ─────────────────────────────────── */ /* Used by Settings and by Client Portfolio → Clients. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border: none; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-size: 0.8125rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color 150ms; } .btn:hover { background: var(--accent-hover); } .btn:disabled { opacity: 0.6; cursor: progress; } .btn-danger { background: var(--danger-bg); color: white; } /* darker than --bad so white text clears 4.5:1 */ .btn-danger:hover { background: var(--danger-bg-hover); } .link-btn { background: none; border: none; padding: 4px 6px; border-radius: 6px; color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); } .link-btn:hover { color: var(--ink); text-decoration-color: currentColor; } .link-btn.danger:hover { color: var(--bad); } .select { min-height: 34px; padding: 0 32px 0 10px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23b3a3c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 600; appearance: none; cursor: pointer; } .select:hover { border-color: var(--border-strong); } .select option { background: var(--surface); } /* Dialogs */ dialog { width: min(440px, calc(100vw - 32px)); margin: auto; padding: 24px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); } dialog::backdrop { background: var(--backdrop); } dialog h2 { font-size: 1.125rem; font-weight: 700; } dialog .lede { color: var(--muted); margin: 4px 0 16px; } .field { display: grid; gap: 6px; margin-bottom: 14px; } .field label { font-weight: 600; } .field .hint { color: var(--muted); font-size: 0.75rem; } .input { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; } .input:focus-visible { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--primary-wash); } .field .select { min-height: 40px; font-size: 1rem; width: 100%; } .pw-row { display: flex; gap: 8px; } .pw-row .input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; } .form-error { color: var(--bad); font-size: 0.8125rem; margin: -4px 0 12px; } .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } .creds { display: grid; gap: 8px; padding: 14px 16px; margin: 12px 0 4px; background: var(--bg); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: 0.875rem; } .creds div { display: flex; justify-content: space-between; gap: 16px; } .creds span { color: var(--muted); } .creds b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; overflow-wrap: anywhere; text-align: right; } .toast { position: fixed; left: 50%; bottom: 24px; z-index: var(--z-tooltip); transform: translateX(-50%); padding: 10px 16px; border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--ink); font-size: 0.8125rem; box-shadow: var(--shadow-pop); } .toast[data-kind="error"] { border-color: var(--bad-line); } /* Page tabs, e.g. Client Portfolio → Dashboard | Clients */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; } .tabs a { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; text-decoration: none; transition: color 150ms, border-color 150ms; } .tabs a:hover { color: var(--ink); } .tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); } /* The Sync button in a dashboard's header (sidebar.js): refreshes what's on screen from GoHighLevel and Meta. The icon turns while it runs. */ .sync-btn { display: inline-flex; align-items: center; gap: 6px; } .sync-btn:disabled { cursor: progress; color: var(--muted); } .sync-btn:disabled:hover { background: var(--surface); border-color: var(--border); } .sync-btn.is-off:disabled { cursor: not-allowed; } .sync-btn[aria-busy="true"] svg { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .sync-btn[aria-busy="true"] svg { animation: none; } } /* ── Page header: title + summary, filters, freshness ────────────────── */ /* Title on the left and the freshness group (Sync, Updated, theme — built by sidebar.js) pinned top right on the same row; the page's filters get the row below. */ .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title meta" "actions actions"; align-items: start; gap: 16px 24px; padding: 28px 32px 4px; } .topbar.no-actions { grid-template-areas: "title meta"; } .topbar-title { grid-area: title; min-width: 0; } .topbar-title h1 { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; } .topbar-title h1 b { font-weight: 700; } .topbar-actions { grid-area: actions; min-width: 0; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; justify-content: flex-start; } .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .topbar-meta { grid-area: meta; display: flex; align-items: center; gap: 8px; white-space: nowrap; } /* The one-line summary under the title: what period and scope you're looking at, in words. */ .intro { margin-top: 6px; color: var(--muted); font-size: 0.9375rem; text-wrap: pretty; } .intro b { color: var(--ink-2); font-weight: 600; } .intro small { display: block; margin-top: 2px; font-size: 0.8125rem; } .sync { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; } .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; } .sync[data-state="loading"] .sync-dot { background: var(--muted); animation: pulse 1.2s ease-in-out infinite; } .sync[data-state="error"] .sync-dot { background: var(--bad); } @keyframes pulse { 50% { opacity: 0.35; } } /* Whether a client is still with us: a green dot that pulses outwards while they're active, a still red one once they're turned off (contract ended). Used on the portfolio title, the Clients list and the edit dialog. */ .life-dot { position: relative; display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--good); vertical-align: middle; } .life-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--good); animation: life-pulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; } .life-dot.is-off { background: var(--bad); } .life-dot.is-off::after { content: none; } @keyframes life-pulse { from { transform: scale(1); opacity: 0.55; } to { transform: scale(2.8); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .life-dot::after { animation: none; content: none; } } /* Filter pill: a native