/* ========================================================================== * AdsBrain Design System — one file, one visual language across every * product (landing, app dashboard, ee-intel, admin, retainer, outreach). * * Anchor: neutral near-black/off-white canvas, single blue accent, WCAG AA * contrast, Inter + Inter Display typography with tabular-nums on every * number, 4/8/12/16/24/32/48 spacing scale, 3 elevation levels, 8/12/16 * radii. Light mode default; dark mode via `[data-theme="dark"]` on . * ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap'); /* ─── Tokens ─── */ :root { /* Neutral — Tailwind-inspired but slightly cooler */ --neutral-0: #FFFFFF; --neutral-50: #FAFBFC; --neutral-100:#F4F6F8; --neutral-150:#EDF0F4; --neutral-200:#E5E9EF; --neutral-300:#D0D7E0; --neutral-400:#98A2B3; --neutral-500:#667085; --neutral-600:#475467; --neutral-700:#344054; --neutral-800:#1D2939; --neutral-900:#0B0F1A; /* Single accent — blue (links, primary buttons, focus rings) */ --accent-50: #EFF6FF; --accent-100: #DBEAFE; --accent-200: #BFDBFE; --accent-400: #60A5FA; --accent-500: #3B82F6; --accent-600: #2563EB; --accent-700: #1D4ED8; --accent-800: #1E40AF; /* Supporting accents — used sparingly (FLAGSHIP badges, gradient fills) */ --violet-400:#A78BFA; --violet-600:#7C3AED; --emerald-500:#10B981; --emerald-600:#059669; --amber-500:#F59E0B; --amber-600:#D97706; --rose-500:#F43F5E; --rose-600:#E11D48; /* Semantic */ --success: var(--emerald-600); --success-bg: #ECFDF5; --warning: var(--amber-600); --warning-bg: #FFFBEB; --danger: var(--rose-600); --danger-bg: #FEF2F2; --info: var(--accent-600); --info-bg: var(--accent-50); /* Surface tokens (light mode defaults) */ --bg: var(--neutral-50); --bg-elev: var(--neutral-0); --surface: var(--neutral-0); --surface-2: var(--neutral-100); --surface-3: var(--neutral-150); --border: var(--neutral-200); --border-strong: var(--neutral-300); --overlay: rgba(11,15,26,.55); /* Text */ --text: var(--neutral-900); --text-2: var(--neutral-700); --text-3: var(--neutral-500); --text-4: var(--neutral-400); --text-inverse: var(--neutral-0); --link: var(--accent-600); /* Spacing scale */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Radii */ --radius-xs: 6px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* Elevation */ --shadow-xs: 0 1px 2px rgba(16,24,40,.05); --shadow-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04); --shadow-md: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04); --shadow-lg: 0 12px 32px rgba(16,24,40,.12), 0 4px 8px rgba(16,24,40,.06); --shadow-xl: 0 24px 48px rgba(16,24,40,.16), 0 8px 16px rgba(16,24,40,.08); --shadow-focus: 0 0 0 3px rgba(37,99,235,.25); /* Motion */ --t-fast: 120ms cubic-bezier(.4,0,.2,1); --t: 200ms cubic-bezier(.4,0,.2,1); --t-slow: 320ms cubic-bezier(.4,0,.2,1); /* Typography */ --font-display: 'Inter Tight','Inter',system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif; --font-sans: 'Inter',system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif; --font-mono: 'JetBrains Mono','SF Mono',Menlo,monospace; /* Layout */ --container-max: 1280px; --sidebar-w: 240px; --sidebar-w-collapsed: 64px; --topbar-h: 64px; /* Z-index */ --z-sticky: 100; --z-dropdown:200; --z-modal: 300; --z-toast: 400; } /* ─── Dark theme override ─── */ [data-theme="dark"] { --bg: #0B0F1A; --bg-elev: #141B2E; --surface: #141B2E; --surface-2: #1A2238; --surface-3: #1F2A45; --border: #1F2A45; --border-strong: #2F3E68; --text: #F1F5FB; --text-2: #C5CEE0; --text-3: #8594B8; --text-4: #5C6A90; --text-inverse: var(--neutral-900); --link: var(--accent-400); --success-bg: rgba(16,185,129,.12); --warning-bg: rgba(245,158,11,.12); --danger-bg: rgba(244,63,94,.12); --info-bg: rgba(96,165,250,.12); --shadow-xs: 0 1px 2px rgba(0,0,0,.3); --shadow-sm: 0 2px 4px rgba(0,0,0,.35); --shadow-md: 0 6px 16px rgba(0,0,0,.4); --shadow-lg: 0 16px 40px rgba(0,0,0,.5); } /* ─── Reset ─── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%;line-height:1.55;color:var(--text);background:var(--bg);scroll-behavior:smooth} body{min-height:100vh;font-feature-settings:'cv11','ss01','ss03','cv02'} a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:2px} img,svg,video{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;background:none;border:0} ul,ol{list-style:none} /* ─── Typography ─── */ .t-display{font-family:var(--font-display);font-weight:800;letter-spacing:-.028em;line-height:1.04} .t-h1{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,5vw,60px);letter-spacing:-.025em;line-height:1.05;color:var(--text)} .t-h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;line-height:1.1;color:var(--text)} .t-h3{font-family:var(--font-sans);font-weight:700;font-size:22px;letter-spacing:-.01em;line-height:1.2;color:var(--text)} .t-h4{font-family:var(--font-sans);font-weight:700;font-size:17px;letter-spacing:-.005em;line-height:1.3;color:var(--text)} .t-body{font-size:15px;line-height:1.6;color:var(--text-2)} .t-body-sm{font-size:13.5px;line-height:1.55;color:var(--text-2)} .t-caption{font-size:12px;line-height:1.45;color:var(--text-3)} .t-overline{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--text-3)} .t-mono,code,kbd{font-family:var(--font-mono);font-size:.9em} .t-num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum','cv11'} .t-gradient{background:linear-gradient(90deg,var(--accent-600),var(--violet-600),var(--emerald-600));-webkit-background-clip:text;background-clip:text;color:transparent} .t-muted{color:var(--text-3)} /* ─── Layout primitives ─── */ .container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-5)} .stack{display:flex;flex-direction:column;gap:var(--space-4)} .stack-sm{gap:var(--space-2)} .stack-lg{gap:var(--space-6)} .row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap} .row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap} .grid{display:grid;gap:var(--space-4)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}} /* ─── Card ─── */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-xs);transition:border-color var(--t),box-shadow var(--t),transform var(--t)} .card.interactive:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px)} .card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)} .card-title{font-size:14px;font-weight:700;letter-spacing:-.005em;color:var(--text);display:flex;align-items:center;gap:var(--space-2)} /* Bento: larger cards with subtle gradient backgrounds */ .bento{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-6);position:relative;overflow:hidden} .bento.featured{border-color:rgba(124,58,237,.22);background:linear-gradient(180deg,var(--surface),#F7F5FF)} [data-theme="dark"] .bento.featured{background:linear-gradient(180deg,var(--surface),rgba(124,58,237,.08))} /* ─── Buttons ─── */ .btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:10px 16px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;letter-spacing:-.005em;line-height:1.2;text-decoration:none;transition:background var(--t),box-shadow var(--t),transform var(--t),border-color var(--t),color var(--t);white-space:nowrap;border:1px solid transparent;cursor:pointer} .btn:hover{text-decoration:none} .btn:focus-visible{outline:0;box-shadow:var(--shadow-focus)} .btn-sm{padding:6px 12px;font-size:12.5px;border-radius:var(--radius-xs)} .btn-lg{padding:14px 22px;font-size:15px;border-radius:var(--radius)} .btn-primary{background:var(--accent-600);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.25),inset 0 1px 0 rgba(255,255,255,.08)} .btn-primary:hover{background:var(--accent-700);transform:translateY(-1px);box-shadow:0 6px 14px rgba(37,99,235,.28)} .btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)} .btn-secondary:hover{background:var(--surface-2);border-color:var(--neutral-400)} .btn-ghost{background:transparent;color:var(--text-2)} .btn-ghost:hover{background:var(--surface-2);color:var(--text)} .btn-danger{background:var(--danger);color:#fff} .btn-danger:hover{background:var(--rose-600);filter:brightness(.95)} /* ─── Badges / status ─── */ .badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-full);border:1px solid transparent} .badge-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 2px color-mix(in srgb,currentColor 20%,transparent)} .badge-neutral{color:var(--text-3);background:var(--surface-2);border-color:var(--border)} .badge-blue {color:var(--accent-700);background:var(--accent-50);border-color:var(--accent-200)} .badge-green {color:var(--success);background:var(--success-bg);border-color:color-mix(in srgb,var(--success) 20%,transparent)} .badge-amber {color:var(--warning);background:var(--warning-bg);border-color:color-mix(in srgb,var(--warning) 20%,transparent)} .badge-red {color:var(--danger);background:var(--danger-bg);border-color:color-mix(in srgb,var(--danger) 20%,transparent)} .badge-violet {color:var(--violet-600);background:#F5F3FF;border-color:rgba(124,58,237,.22)} /* ─── KPI tiles ─── */ .kpi{padding:var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:4px} .kpi-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:700} .kpi-value{font-family:var(--font-display);font-weight:800;font-size:28px;letter-spacing:-.015em;color:var(--text);font-variant-numeric:tabular-nums} .kpi-delta{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums} .kpi-delta.up{color:var(--success)} .kpi-delta.down{color:var(--danger)} .kpi-delta.flat{color:var(--text-3)} /* ─── Forms ─── */ .input,.select,.textarea{width:100%;padding:10px 12px;font-size:14px;line-height:1.4;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);transition:border-color var(--t),box-shadow var(--t)} .input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--accent-500);box-shadow:var(--shadow-focus)} .input::placeholder{color:var(--text-4)} .label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:6px} /* ─── Tables ─── */ .table-wrap{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden} .table{width:100%;border-collapse:collapse;font-size:13.5px} .table thead th{position:sticky;top:0;background:var(--surface-2);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:var(--text-3);padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);z-index:1} .table tbody td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text-2);vertical-align:middle} .table tbody tr:last-child td{border-bottom:0} .table tbody tr:hover{background:var(--surface-2)} .table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums} .table td.muted{color:var(--text-3)} /* ─── Topbar ─── */ .topbar{position:sticky;top:0;z-index:var(--z-sticky);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--border);padding:0 var(--space-5);height:var(--topbar-h);display:flex;align-items:center;gap:var(--space-5)} .topbar-logo{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--text);letter-spacing:-.015em;text-decoration:none} .topbar-logo .logo-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent-600),var(--violet-600));display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:900} .topbar-logo em{font-style:normal;color:var(--accent-600)} .topbar-nav{display:flex;gap:2px;flex:1;align-items:center} .topbar-nav a{font-size:13px;padding:8px 12px;border-radius:var(--radius-xs);color:var(--text-3);font-weight:500;text-decoration:none;transition:all var(--t-fast)} .topbar-nav a:hover{color:var(--text);background:var(--surface-2)} .topbar-nav a.active{color:var(--accent-700);background:var(--accent-50);border:1px solid var(--accent-200)} [data-theme="dark"] .topbar-nav a.active{color:var(--accent-400);background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.25)} .topbar-right{display:flex;align-items:center;gap:var(--space-3);margin-left:auto;font-size:13px;color:var(--text-3)} /* ─── Sidebar (app shells) ─── */ .app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh} .sidebar{background:var(--bg-elev);border-right:1px solid var(--border);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);position:sticky;top:0;height:100vh;overflow-y:auto} .sidebar-brand{display:flex;align-items:center;gap:8px;padding:var(--space-2) var(--space-3) var(--space-5)} .sidebar-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-xs);color:var(--text-2);font-weight:500;font-size:13.5px;text-decoration:none;transition:background var(--t-fast),color var(--t-fast)} .sidebar-item:hover{background:var(--surface-2);color:var(--text);text-decoration:none} .sidebar-item.active{background:var(--accent-50);color:var(--accent-700);font-weight:600} [data-theme="dark"] .sidebar-item.active{background:rgba(96,165,250,.1);color:var(--accent-400)} .sidebar-item svg{width:16px;height:16px;flex-shrink:0;opacity:.8} .sidebar-group{font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--text-4);padding:var(--space-3) var(--space-3) 6px} /* ─── Hero (landings) ─── */ .hero{padding:var(--space-8) 0 var(--space-7);position:relative;overflow:hidden} .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 500px at 10% -10%,rgba(37,99,235,.08),transparent 60%),radial-gradient(700px 400px at 110% 10%,rgba(124,58,237,.06),transparent 60%)} .hero-inner{position:relative;max-width:860px;margin:0 auto;text-align:center} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-600);padding:6px 12px;border-radius:var(--radius-full);background:var(--accent-50);border:1px solid var(--accent-200);margin-bottom:var(--space-4)} .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-600);box-shadow:0 0 0 3px rgba(37,99,235,.15);animation:pulse 2s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} /* ─── Bento grid sections ─── */ .bento-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4);margin:var(--space-6) 0} .bento-grid .bento{padding:var(--space-6)} .bento-1x1{grid-column:span 2;grid-row:span 1} .bento-2x1{grid-column:span 3;grid-row:span 1} .bento-3x1{grid-column:span 6;grid-row:span 1} .bento-2x2{grid-column:span 3;grid-row:span 2} @media(max-width:900px){.bento-grid{grid-template-columns:1fr}.bento-1x1,.bento-2x1,.bento-3x1,.bento-2x2{grid-column:span 1;grid-row:span 1}} /* ─── Pricing ─── */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)} @media(max-width:900px){.pricing-grid{grid-template-columns:1fr}} .price-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);position:relative} .price-card.popular{border-color:var(--accent-600);box-shadow:0 12px 32px rgba(37,99,235,.12)} .price-card.popular::before{content:"MOST POPULAR";position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;letter-spacing:.12em;color:#fff;background:var(--accent-600);padding:4px 12px;border-radius:var(--radius-full)} .price-tier{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--text-3)} .price-amount{font-family:var(--font-display);font-weight:800;font-size:44px;letter-spacing:-.02em;color:var(--text);line-height:1;font-variant-numeric:tabular-nums} .price-amount small{font-size:15px;font-weight:500;color:var(--text-3)} .price-features{list-style:none;margin:var(--space-3) 0;padding:0} .price-features li{display:flex;gap:8px;padding:6px 0;font-size:13.5px;color:var(--text-2)} .price-features li::before{content:"✓";color:var(--success);font-weight:800;flex-shrink:0} /* ─── Utility ─── */ .u-mute{color:var(--text-3)} .u-strong{color:var(--text);font-weight:700} .u-num{font-variant-numeric:tabular-nums} .u-mt-0{margin-top:0!important}.u-mt-2{margin-top:var(--space-2)}.u-mt-4{margin-top:var(--space-4)}.u-mt-6{margin-top:var(--space-6)}.u-mt-8{margin-top:var(--space-8)} .u-mb-2{margin-bottom:var(--space-2)}.u-mb-4{margin-bottom:var(--space-4)}.u-mb-6{margin-bottom:var(--space-6)} .u-center{text-align:center} .u-hide{display:none!important} .u-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .u-spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent-600);border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ─── Command palette (Cmd+K) hook ─── */ .kbd{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;border:1px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-2);font-family:var(--font-mono);font-size:11px;color:var(--text-3);box-shadow:0 1px 0 var(--border)} /* ─── Empty state ─── */ .empty{text-align:center;padding:var(--space-8) var(--space-5);color:var(--text-3)} .empty-icon{width:56px;height:56px;margin:0 auto var(--space-4);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:var(--surface-2);color:var(--text-4)} /* ─── Focus reset ─── */ :focus-visible{outline:2px solid var(--accent-500);outline-offset:2px;border-radius:var(--radius-xs)} /* ─── Logo unification (2026-04-23) ─────────────────────────────────────── * "AdsBrain" must render as a single word on every page — no flex gap between * "Ads" and the accented "Brain" half. Any icon to the left keeps a fixed * 8px offset via margin-right. Applies to public landing .nav-logo, authed * .topbar-logo, and auth screens .auth-logo. */ .nav-logo, .topbar-logo, .auth-logo{gap:0 !important;white-space:nowrap} .nav-logo > svg, .topbar-logo > svg, .auth-logo > svg{margin-right:8px} .nav-logo > .logo-mark, .topbar-logo > .logo-mark{margin-right:8px}