/* ============================================================ bp labs ecosystem — shared design tokens + saas components single source of truth for SaaS app shells. token vocabulary aligned with master design system at bp-labs-tech/public/design-system.html (locked Apr 27 2026). Brand accent: set [data-brand=""] on . 9 brands supported: aa · butzpeteza · bplabs · fflo · ffit · ffide · ffaro · ffuse · ffree To add a new brand: append a line to the brand-accent block. ============================================================ */ :root { /* ── Cyan ramp (shared across ecosystem) ─────────────── */ --cyan-50: #EAF6FB; --cyan-100: #D1EDF7; --cyan-300: #5CC9EA; --cyan-500: #009DD3; --cyan-600: #007DAA; --cyan-900: #003D52; /* ── Brand accent constants (one per brand) ──────────── */ --orange: #F6801F; /* aa */ --electric: #00F0FF; /* fflo, butzpeteza */ --green: #2A9D5C; /* ffide */ --sapphire: #2563EB; /* ffit */ --violet: #7C3AED; /* ffaro */ --gold: #F59E0B; /* ffuse */ --coral: #FB7185; /* ffree */ --flagblue: #0038A8; /* insurepinas */ --flagred: #CE1126; /* insurepinas gradient */ --magenta: #E11D74; /* ffaith */ --oceanteal:#0E7490; /* betterprepared */ /* ── Surface + ink ───────────────────────────────────── */ --canvas: #FAFAFA; --surface: #FFFFFF; --surface-2: #F5F5F5; --surface-3: #EBEBEB; --ink: #1E1E1E; --ink-muted: #6B7280; --ink-subtle: #9CA3AF; --border: #E5E7EB; --border-strong: #D1D5DB; /* ── Semantic ────────────────────────────────────────── */ --success: #10B981; --success-50: #ECFDF5; --warning: #F59E0B; --warning-50: #FFFBEB; --danger: #EF4444; --danger-50: #FEF2F2; --info: #009DD3; --info-50: #EAF6FB; /* ── Type scale ──────────────────────────────────────── */ --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: 48px; /* ── Spacing (4px base grid) ─────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ── Radius ──────────────────────────────────────────── */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px; /* ── Elevation ───────────────────────────────────────── */ --sh-sm: 0 1px 2px rgba(0,0,0,0.05); --sh-md: 0 2px 8px rgba(0,0,0,0.06); --sh-lg: 0 8px 24px rgba(0,0,0,0.08); --sh-xl: 0 16px 48px rgba(0,0,0,0.12); /* ── Motion ──────────────────────────────────────────── */ --t-fast: 150ms; --t-med: 250ms; --t-slow: 400ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* ── Layout ──────────────────────────────────────────── */ --sidebar-w: 260px; --topbar-h: 56px; /* ── Default brand accent (overridden by [data-brand]) ─ Components read: --accent solid colour for fills/borders/glyphs (any contrast) --accent-text text-safe colour for type/icons on light surface (WCAG AA against #FAFAFA). Differs from --accent only for brands whose accent is too light to read as text (fflo/butzpeteza electric, ffuse gold, ffree coral). --accent-50 10% tinted background for chips/callouts/hover --accent-600 hover/active darker shade --accent-grad hero gradient (cyan→accent for ff brands; orange→cyan for AA per locked spec) ────────── */ --accent: var(--cyan-500); --accent-text: var(--cyan-600); /* always read --accent-text for type */ --accent-fg: #fff; /* foreground when accent is BACKGROUND (e.g., on .btn-primary). Override per-brand for accents too light to carry white text. */ --accent-50: var(--cyan-50); --accent-600: var(--cyan-600); --accent-grad: linear-gradient(135deg, var(--cyan-500), var(--electric)); } [data-theme="dark"] { --canvas: #0E0E10; --surface: #1A1A1C; --surface-2: #232326; --surface-3: #2A2A2E; --ink: #F5F5F5; --ink-muted: #A1A1AA; --ink-subtle: #71717A; --border: #2A2A2E; --border-strong: #3F3F46; --cyan-50: rgba(0,157,211,0.15); --success-50: rgba(16,185,129,0.12); --warning-50: rgba(245,158,11,0.12); --danger-50: rgba(239,68,68,0.12); --info-50: rgba(0,157,211,0.12); --sh-sm: 0 1px 2px rgba(0,0,0,0.3); --sh-md: 0 2px 8px rgba(0,0,0,0.35); --sh-lg: 0 8px 24px rgba(0,0,0,0.45); --sh-xl: 0 16px 48px rgba(0,0,0,0.55); } /* ── Per-brand accent overrides (9 brands) ──────────────── To add a brand: append a single line below. Each brand defines: --accent, --accent-50, --accent-600, --accent-grad --accent-grad pairs the brand colour with cyan (or with itself for cyan-based brands). AA is the only brand whose gradient leads with the brand colour (orange → cyan) per the locked spec. ─────────────────────────────────────────────────────── */ [data-brand="aa"], [data-brand="advisor-accelerator"] { --accent: var(--orange); --accent-text: #C06010; /* darker orange for type */ --accent-50: rgba(246,128,31,0.10); --accent-600: #C06010; --accent-grad: linear-gradient(135deg, var(--orange) 0%, var(--cyan-500) 100%); } [data-brand="butzpeteza"], [data-brand="butz-peteza"] { --accent: var(--electric); --accent-text: var(--cyan-600); /* electric → cyan for type */ --accent-fg: var(--ink); /* dark text on electric bg */ --accent-50: rgba(0,240,255,0.10); --accent-600: #00C2D9; --accent-grad: linear-gradient(135deg, var(--cyan-500), var(--electric)); } [data-brand="bplabs"], [data-brand="bp-labs"] { --accent: var(--cyan-500); --accent-text: var(--cyan-600); --accent-50: var(--cyan-50); --accent-600: var(--cyan-600); --accent-grad: linear-gradient(135deg, var(--cyan-500), var(--electric)); } [data-brand="fflo"] { --accent: var(--electric); --accent-text: var(--cyan-600); /* electric → cyan for type */ --accent-fg: var(--ink); /* dark text on electric bg */ --accent-50: var(--cyan-50); --accent-600: var(--cyan-600); --accent-grad: linear-gradient(135deg, var(--cyan-500), var(--electric)); } [data-brand="ffit"] { --accent: var(--sapphire); --accent-text: var(--sapphire); /* sapphire is dark enough */ --accent-50: rgba(37,99,235,0.10); --accent-600: #1E3FCC; --accent-grad: linear-gradient(135deg, var(--cyan-500), var(--sapphire)); } [data-brand="ffide"] { --accent: var(--green); --accent-text: #1F7E47; /* darker green for type */ --accent-50: rgba(42,157,92,0.10); --accent-600: #1F7E47; --accent-grad: linear-gradient(135deg, var(--cyan-500), var(--green)); } [data-brand="ffaro"] { --accent: var(--violet); --accent-text: var(--violet); /* violet is dark enough */ --accent-50: rgba(124,58,237,0.10); --accent-600: #6A2DD3; --accent-grad: linear-gradient(135deg, var(--cyan-500), var(--violet)); } [data-brand="ffuse"] { --accent: var(--gold); --accent-text: #B45309; /* darker gold for type */ --accent-fg: var(--ink); /* dark text on gold bg */ --accent-50: rgba(245,158,11,0.10); --accent-600: #D88B0A; --accent-grad: linear-gradient(135deg, var(--cyan-500), var(--gold)); } [data-brand="ffree"] { --accent: var(--coral); --accent-text: #BE123C; /* darker coral for type */ --accent-50: rgba(251,113,133,0.10); --accent-600: #E04A60; --accent-grad: linear-gradient(135deg, var(--cyan-500), var(--coral)); } [data-brand="ask-ffai"] { --accent: var(--electric); --accent-text: var(--cyan-600); /* electric → cyan for type */ --accent-fg: var(--ink); /* dark text on electric bg */ --accent-50: var(--cyan-50); --accent-600: var(--cyan-600); --accent-grad: linear-gradient(135deg, var(--cyan-500), var(--electric)); } [data-brand="insurepinas"] { --accent: var(--flagblue); --accent-text: var(--flagblue); /* flag-blue is dark enough */ --accent-50: rgba(0,56,168,0.10); --accent-600: #002D87; --accent-grad: linear-gradient(135deg, var(--flagblue), var(--flagred)); } [data-brand="ffaith"] { --accent: var(--magenta); --accent-text: var(--magenta); /* magenta is dark enough */ --accent-50: rgba(225,29,116,0.10); --accent-600: #B81560; --accent-grad: linear-gradient(135deg, var(--cyan-500), var(--magenta)); } [data-brand="betterprepared"] { --accent: var(--oceanteal); --accent-text: var(--oceanteal); /* ocean-teal is dark enough */ --accent-50: rgba(14,116,144,0.10); --accent-600: #0B5C73; --accent-grad: linear-gradient(135deg, var(--cyan-500), var(--oceanteal)); } /* ── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; } body { font-family: 'Fira Sans', system-ui, -apple-system, sans-serif; font-size: var(--fs-base); line-height: 1.55; color: var(--ink); background: var(--canvas); transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease); } h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ── Preview bar (tier switcher, dev banner) ───────────── */ .preview-bar { background: var(--ink); color: #fff; padding: var(--sp-2) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-xs); letter-spacing: 0.03em; } .preview-label { font-weight: 700; text-transform: uppercase; color: var(--electric); letter-spacing: 0.08em; } .switcher { display: flex; gap: 4px; background: rgba(255,255,255,0.08); padding: 3px; border-radius: var(--r-md); } .switcher-btn { padding: 4px 10px; font-size: var(--fs-xs); font-weight: 600; color: #fff; opacity: 0.6; border-radius: var(--r-sm); transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); } .switcher-btn:hover { opacity: 1; } .switcher-btn.active { background: var(--accent); opacity: 1; box-shadow: 0 0 0 1px rgba(255,255,255,0.3); } .preview-note { margin-left: auto; color: rgba(255,255,255,0.55); } @media (max-width: 900px) { .preview-bar { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; } .preview-bar > * { flex-shrink: 0; } .preview-note { display: none; } } /* ── Shell (sidebar + topbar + content) ────────────────── */ .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "sidebar topbar" "sidebar content"; min-height: calc(100vh - 32px); } .sidebar { grid-area: sidebar; background: var(--surface); border-right: 1px solid var(--border); padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-6); } .brand-glyph { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--accent-grad); border-radius: var(--r-sm); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -0.5px; flex-shrink: 0; } /* When .brand-glyph contains an , drop the gradient and let the transparent-PNG glyph carry the brand colour. */ .brand-glyph:has(img) { background: transparent; padding: 0; } .brand-glyph img { width: 100%; height: 100%; object-fit: contain; display: block; } /* .brand-logo: alternative direct-image variant (no .brand-glyph wrapper) — used by older shells (portal) where the brand row is `` sibling to `.brand-name`. Keeps the img a fixed 28px box so a missing-image alt-text doesn't balloon and break flex layout. */ .brand-logo { width: 28px; height: 28px; border-radius: var(--r-sm); flex-shrink: 0; object-fit: contain; } /* ── Wordmark (STANDARDIZED — be strict, do not deviate) ── - Size: 18px (--fs-lg) for sidebar/nav · 22px (--fs-xl) for prominent uses - Weight: 700 always - Letter-spacing: -0.01em for legibility at small sizes - Case: lowercase always (locked Apr 27 brand spec) - prefix uses cyan→accent gradient (text-fill) so brands with low-contrast accents (electric, gold, coral) still read on light backgrounds — they pick up cyan at the start of the gradient. AA reverses this (accent → cyan) per locked brand spec. - The non-ff portion (e.g., "lo" in "fflo") stays in --ink. */ .brand-name { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em; text-transform: lowercase; line-height: 1.1; color: var(--ink); } .brand-name em { font-style: normal; background: linear-gradient(135deg, var(--cyan-500), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-brand="aa"] .brand-name em { background: linear-gradient(135deg, var(--orange), var(--cyan-500)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* When .brand-name appears on a brand-color or dark background, the wordmark uses white. Use class "on-dark" or place inside [data-bg="dark"]. */ .brand-name.on-dark, [data-bg="dark"] .brand-name { color: #fff; } .brand-name.on-dark em, [data-bg="dark"] .brand-name em { background: none; -webkit-text-fill-color: #fff; color: #fff; } .nav-list { display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); color: var(--ink-muted); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; position: relative; width: 100%; text-align: left; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .nav-item:hover { background: var(--surface-2); color: var(--ink); } .nav-item.active { background: var(--accent-50); color: var(--accent-text); font-weight: 600; } .nav-item.active::before { content: ''; position: absolute; left: -3px; top: 6px; bottom: 6px; width: 3px; background: var(--accent); border-radius: 3px; } .nav-item .icon { width: 18px; height: 18px; flex-shrink: 0; } .nav-item .badge-count { margin-left: auto; font-size: var(--fs-xs); background: var(--orange); color: #fff; padding: 1px 6px; border-radius: var(--r-full); font-weight: 700; } .nav-item .new-pill { margin-left: auto; font-size: 9px; background: var(--electric); color: #003D52; padding: 1px 6px; border-radius: var(--r-full); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .nav-item.locked { color: var(--ink-subtle); cursor: not-allowed; } .nav-item.locked .icon { opacity: 0.5; } .nav-divider { height: 1px; background: var(--border); margin: var(--sp-3) var(--sp-2); } .upgrade-card { margin-top: auto; padding: var(--sp-3); border-radius: var(--r-md); background: var(--accent-grad); color: #fff; font-size: var(--fs-xs); } .upgrade-card h4 { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 4px; } .upgrade-card p { opacity: 0.92; line-height: 1.4; margin-bottom: var(--sp-2); } .upgrade-card .btn { display: block; background: rgba(255,255,255,0.95); color: var(--accent-600); padding: 6px 10px; border-radius: var(--r-sm); font-weight: 700; text-align: center; } /* ══════════════════════════════════════════════════════════ STANDARD APP CHROME (locked — see "App shell" in design system) Layout: sidebar [brand · nav · sidebar-footer (user)] topbar [breadcrumb · cmdk-trigger · icon actions] Source of truth for every SaaS mock. Do NOT deviate per-mock. ══════════════════════════════════════════════════════════ */ .topbar { grid-area: topbar; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 var(--sp-6); gap: var(--sp-4); position: sticky; top: 0; z-index: 10; } /* Topbar LEFT: page breadcrumb / page title */ .breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-muted); } .breadcrumb .current { color: var(--ink); font-weight: 600; } .breadcrumb .sep { color: var(--ink-subtle); } /* Topbar CENTER (auto): command-palette-style search trigger. Replaces inline search to match AA portal pattern. */ .cmdk-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; margin-left: auto; margin-right: var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink-muted); font-size: var(--fs-xs); cursor: pointer; min-width: 220px; transition: border-color var(--t-fast), background var(--t-fast); } .cmdk-trigger:hover { border-color: var(--accent-text); background: var(--surface); } .cmdk-trigger .cmdk-icon { width: 14px; height: 14px; color: var(--ink-subtle); } .cmdk-trigger .cmdk-text { flex: 1; } .cmdk-trigger .cmdk-shortcut { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; background: var(--surface); border: 1px solid var(--border); padding: 1px 6px; border-radius: var(--r-sm); color: var(--ink-muted); } /* Topbar RIGHT: action icons (favorites, bookmarks, notifs, theme). Order is locked: [favorites] [bookmarks] [notifications] [theme-toggle] Optional product-specific icons (e.g., Hub link) sit to the LEFT of these. */ .topbar-actions { display: flex; align-items: center; gap: var(--sp-2); } .icon-btn { width: 36px; height: 36px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--ink-muted); cursor: pointer; border: none; background: none; transition: background var(--t-fast), color var(--t-fast); position: relative; } .icon-btn:hover { background: var(--surface-2); color: var(--ink); } .icon-btn .icon { width: 18px; height: 18px; } .icon-btn .notif-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); border: 2px solid var(--surface); } /* Optional: product-specific Hub link (used by fflo to link out to advisor hub). Same icon-btn shape, accent on hover, tiny external arrow. */ .topbar-hub-icon { position: relative; } .topbar-hub-icon:hover { color: var(--accent-text); } .topbar-hub-ext-arrow { position: absolute; bottom: 4px; right: 3px; opacity: 0.7; width: 8px; height: 8px; } /* Sidebar footer — user block. This is THE place users live. Never put user-chip in topbar. */ .sidebar-footer { margin-top: auto; padding: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); border-top: 1px solid var(--border); cursor: pointer; transition: background var(--t-fast); } .sidebar-footer:hover { background: var(--surface-2); } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm); flex-shrink: 0; } .user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .user-meta { flex: 1; min-width: 0; } .user-name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; color: var(--ink); } .user-plan { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.2; } /* DEPRECATED: .user-chip (was used in topbar in older mocks). Kept as alias of sidebar-footer styling for one-off contexts. */ .user-chip { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 10px 4px 4px; border-radius: var(--r-full); background: var(--surface-2); cursor: pointer; transition: background var(--t-fast); } .user-chip:hover { background: var(--border); } .user-chip .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm); } .user-chip .name { font-size: var(--fs-sm); font-weight: 600; } .content { grid-area: content; padding: var(--sp-6) var(--sp-8); max-width: 1400px; width: 100%; } /* ── Page header ───────────────────────────────────────── */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; } .page-title { font-size: var(--fs-2xl); margin-bottom: var(--sp-1); } .page-sub { font-size: var(--fs-sm); color: var(--ink-muted); } .page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; } /* ── Buttons ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 8px 16px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; transition: background var(--t-fast), opacity var(--t-fast), transform var(--t-fast); border: 1px solid transparent; } .btn:hover:not(:disabled) { transform: translateY(-1px); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--accent-fg); } .btn-primary:hover:not(:disabled) { background: var(--accent-600); color: #fff; } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--surface-2); } .btn-ghost { background: transparent; color: var(--ink-muted); } .btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); } .btn-danger { background: var(--danger); color: #fff; } /* Brand-gradient variants — use the active brand's --accent-grad. Use sparingly: heroes, key conversion CTAs, lockup contexts. */ .btn-grad { background: var(--accent-grad); color: var(--accent-fg); border: none; position: relative; overflow: hidden; } .btn-grad:hover:not(:disabled) { filter: brightness(1.05); } .btn-grad-outline { position: relative; background: var(--surface); color: var(--ink); border: 2px solid transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--accent-grad); background-origin: border-box; background-clip: padding-box, border-box; } .btn-grad-outline:hover:not(:disabled) { background-image: var(--accent-grad), var(--accent-grad); color: #fff; } .btn-sm { padding: 4px 10px; font-size: var(--fs-xs); } .btn-md { padding: 10px 18px; font-size: var(--fs-sm); } /* ── Cards / surfaces ─────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--sh-sm); padding: var(--sp-5); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .card-title { font-size: var(--fs-lg); font-weight: 700; } .card-sub { font-size: var(--fs-sm); color: var(--ink-muted); } .grid { display: grid; gap: var(--sp-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: 1100px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); position: relative; } .stat-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); font-weight: 600; margin-bottom: var(--sp-2); } .stat-value { font-size: var(--fs-2xl); font-weight: 700; line-height: 1; } .stat-delta { font-size: var(--fs-xs); margin-top: var(--sp-2); display: inline-flex; align-items: center; gap: 4px; } .stat-delta.up { color: var(--success); } .stat-delta.down { color: var(--danger); } /* ── Tables ───────────────────────────────────────────── */ .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .table th { text-align: left; padding: var(--sp-3) var(--sp-4); font-weight: 600; color: var(--ink-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); } .table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } .table tr:last-child td { border-bottom: none; } .table tr:hover td { background: var(--surface-2); } /* ── Pills / chips ────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; } .pill-success { background: var(--success-50); color: var(--success); } .pill-warning { background: var(--warning-50); color: var(--warning); } .pill-danger { background: var(--danger-50); color: var(--danger); } .pill-info { background: var(--accent-50); color: var(--accent-text); } .pill-muted { background: var(--surface-2); color: var(--ink-muted); } /* ── Callout ──────────────────────────────────────────── */ .callout { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--accent-50); color: var(--ink); border-left: 3px solid var(--accent); font-size: var(--fs-sm); } .callout.warning { background: var(--warning-50); border-left-color: var(--warning); } .callout.danger { background: var(--danger-50); border-left-color: var(--danger); } .callout.success { background: var(--success-50); border-left-color: var(--success); } .callout-icon { flex-shrink: 0; } .callout-body strong { display: block; margin-bottom: 2px; } /* ── List rows ────────────────────────────────────────── */ .row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } .row:last-child { border-bottom: none; } .row:hover { background: var(--surface-2); } .row .row-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm); flex-shrink: 0; } .row .row-body { flex: 1; min-width: 0; } .row .row-title { font-weight: 600; font-size: var(--fs-sm); } .row .row-sub { font-size: var(--fs-xs); color: var(--ink-muted); } .row .row-meta { font-size: var(--fs-xs); color: var(--ink-muted); flex-shrink: 0; } /* ── Forms ────────────────────────────────────────────── */ .form-row { margin-bottom: var(--sp-4); } .form-label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; color: var(--ink); } .form-input, .form-select, .form-textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-family: inherit; font-size: var(--fs-sm); transition: border-color var(--t-fast); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent-text); } .form-textarea { min-height: 96px; resize: vertical; } .form-help { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 4px; } /* ── Empty state ──────────────────────────────────────── */ .empty { padding: var(--sp-12) var(--sp-6); max-width: 480px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); } .empty-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-50); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: var(--sp-2); } .empty-title { font-size: var(--fs-xl); font-weight: 700; } .empty-desc { font-size: var(--fs-sm); color: var(--ink-muted); } /* ── Skeletons ────────────────────────────────────────── */ .sk { background: linear-gradient(90deg, var(--surface-2) 0%, var(--border) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: sk-shimmer 1.4s linear infinite; border-radius: var(--r-sm); } @keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Trial / lock banners ─────────────────────────────── */ .banner { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--accent-grad); color: #fff; display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); } .banner-body { flex: 1; } .banner-title { font-weight: 700; } .banner-sub { font-size: var(--fs-sm); opacity: 0.92; } /* ══════════════════════════════════════════════════════════ AUTH SCREEN — sign-up / log-in / qualification-call. Used in publicMode tiers as "the bridge from landing to app". Same shell across every brand; brand accent re-tints automatically. ══════════════════════════════════════════════════════════ */ .auth-shell { min-height: calc(100vh - 32px); display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); } .auth-shell.single { grid-template-columns: 1fr; } .auth-pane { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-12) var(--sp-8); max-width: 520px; margin: 0 auto; width: 100%; } .auth-side { background: var(--accent-grad); color: var(--accent-fg); padding: var(--sp-12) var(--sp-8); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .auth-side::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 60%); pointer-events: none; } .auth-side > * { position: relative; z-index: 1; } .auth-side h2 { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: var(--sp-4); } .auth-side p { font-size: var(--fs-base); opacity: 0.92; line-height: 1.55; margin-bottom: var(--sp-5); } .auth-side ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .auth-side ul li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); } .auth-side ul li::before { content: '✓'; font-weight: 800; } .auth-brand { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-8); } .auth-brand .brand-glyph { width: 32px; height: 32px; } .auth-eyebrow { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-text); margin-bottom: var(--sp-2); } .auth-title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--sp-2); } .auth-sub { font-size: var(--fs-base); color: var(--ink-muted); margin-bottom: var(--sp-6); line-height: 1.55; } /* Auth form is just engine form components stacked. Use: .form-row > .form-label + .form-input/.form-select/.form-textarea Auth-form adds nothing CSS-wise — it just guarantees vertical spacing when individual .form-row elements aren't used. */ .auth-form { display: flex; flex-direction: column; gap: var(--sp-4); } .auth-form .form-row { margin-bottom: 0; } /* gap on parent handles spacing */ .auth-form .form-input, .auth-form .form-select, .auth-form .form-textarea { padding: 12px 14px; font-size: var(--fs-base); /* slightly bigger than app shell */ } .auth-form .form-input:focus, .auth-form .form-select:focus, .auth-form .form-textarea:focus { box-shadow: 0 0 0 3px var(--accent-50); /* clearer focus ring on auth screens */ } .auth-divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; font-size: var(--fs-xs); color: var(--ink-subtle); text-transform: uppercase; letter-spacing: 0.06em; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .auth-social { display: flex; flex-direction: column; gap: var(--sp-2); } .auth-social .btn { justify-content: center; gap: var(--sp-2); } .auth-foot { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--ink-muted); text-align: center; } .auth-foot a { color: var(--accent-text); font-weight: 600; } @media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } .auth-side { display: none; } } /* ══════════════════════════════════════════════════════════ ASK BUTZ — floating AI assistant button + side panel. Locked in design system. Add the markup once (see App shell standard section in DS) and the panel/FAB work everywhere. ══════════════════════════════════════════════════════════ */ .ai-fab { position: fixed; bottom: 24px; right: 24px; z-index: 180; display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 14px 6px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); box-shadow: var(--sh-lg); cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast); color: var(--ink); font-weight: 600; font-size: var(--fs-sm); } .ai-fab:hover { transform: translateY(-1px); box-shadow: var(--sh-xl); border-color: var(--accent); } .ai-fab-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 12px; } .ai-fab-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .ai-fab-label { white-space: nowrap; } @media (max-width: 640px) { .ai-fab-label { display: none; } .ai-fab { padding: 4px; } } .ai-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 190; width: min(420px, 100vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--sh-xl); transform: translateX(100%); transition: transform var(--t-med) var(--ease); display: flex; flex-direction: column; } .ai-panel.open { transform: translateX(0); } .ai-panel-head { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--sp-4); border-bottom: 1px solid var(--border); } .ai-panel-title { display: flex; align-items: center; gap: var(--sp-3); } .ai-panel-headshot { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; } .ai-panel-headshot img { width: 100%; height: 100%; object-fit: cover; display: block; } .ai-panel-title strong { font-size: var(--fs-base); display: inline-flex; align-items: center; gap: 6px; } .ai-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--surface); } .ai-panel-sub { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 2px; } .ai-context-chip { padding: var(--sp-2) var(--sp-4); background: var(--surface-2); font-size: var(--fs-xs); color: var(--ink-muted); border-bottom: 1px solid var(--border); } .ai-context-chip strong { color: var(--accent-text); font-weight: 600; } .ai-panel-body { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); } .ai-msg { max-width: 80%; padding: 8px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.5; } .ai-msg.from-butz { background: var(--surface-2); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 3px; } .ai-msg.from-user { background: var(--accent); color: var(--accent-fg); align-self: flex-end; border-bottom-right-radius: 3px; } .ai-msg-suggest { align-self: flex-start; margin-top: -4px; display: flex; gap: 6px; flex-wrap: wrap; } .ai-suggest-chip { padding: 4px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); font-size: var(--fs-xs); color: var(--ink-muted); cursor: pointer; transition: all var(--t-fast); } .ai-suggest-chip:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-50); } .ai-panel-input { border-top: 1px solid var(--border); padding: var(--sp-3); } .ai-panel-input textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); font-family: inherit; font-size: var(--fs-sm); background: var(--surface); color: var(--ink); resize: none; } .ai-panel-input textarea:focus { outline: none; border-color: var(--accent); } .ai-panel-input-row { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-2); } .ai-disclaimer { font-size: 10px; color: var(--ink-subtle); } .ai-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 185; display: none; backdrop-filter: blur(2px); } .ai-overlay.open { display: block; } /* ══════════════════════════════════════════════════════════ ASK BUTZ — UNIFIED PATTERN (AA portal canonical: Chat / Support / Feedback / Request modes; used in fflo + ffuse + portal) ══════════════════════════════════════════════════════════ */ /* Mode tabs */ .ai-modes { display: flex; gap: 2px; padding: 6px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .ai-mode { flex: 1; padding: 6px 8px; background: none; border: none; border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--ink-muted); cursor: pointer; font-weight: 600; font-family: inherit; transition: all var(--t-fast); } .ai-mode:hover { color: var(--ink); } .ai-mode.active { background: var(--surface); color: var(--accent-text); } /* Chat greeting + suggested prompts */ .ai-greeting { padding: var(--sp-3); background: var(--accent-50); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; } .ai-greeting strong { color: var(--accent-text); } .ai-suggestions { display: flex; flex-direction: column; gap: 6px; } .ai-suggestion { padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--ink); text-align: left; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); } .ai-suggestion:hover { border-color: var(--accent); background: var(--surface); } .ai-suggestion-icon { margin-right: 6px; opacity: 0.7; } /* Chat thread (avatar + bubble pattern — supersedes from-butz/from-user) */ .ai-msg-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; } .ai-msg-avatar.user, .ai-msg-avatar.ai { background: var(--accent-grad); } .ai-msg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .ai-msg-body { background: var(--surface-2); padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; min-width: 0; flex: 1; } .ai-msg.user .ai-msg-body { background: var(--accent-50); } .ai-msg-body p { margin: 0 0 var(--sp-2) 0; } .ai-msg-body p:last-child { margin-bottom: 0; } .ai-msg-body ul { padding-left: var(--sp-4); margin: var(--sp-1) 0; } .ai-msg-body li { margin-bottom: 4px; } .ai-msg-body code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; background: var(--surface); padding: 1px 4px; border-radius: 3px; color: var(--accent-text); } .ai-msg-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .ai-msg-link { font-size: 10px; padding: 2px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); color: var(--accent-text); cursor: pointer; text-decoration: none; } .ai-msg-link:hover { border-color: var(--accent); } /* Typing indicator */ .ai-typing { display: inline-flex; gap: 3px; } .ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-subtle); animation: aiTyping 1.4s infinite; } .ai-typing span:nth-child(2) { animation-delay: 0.2s; } .ai-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes aiTyping { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } } /* Forms (Support / Feedback / Request) */ .ai-form-head { padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); margin-bottom: var(--sp-3); } .ai-form-head h3 { font-size: var(--fs-base); margin-bottom: 4px; } .ai-form-head p { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.4; } .ai-form { display: flex; flex-direction: column; gap: var(--sp-3); } .ai-field { display: flex; flex-direction: column; gap: 6px; } .ai-field > span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-subtle); } .ai-field select, .ai-field textarea { padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--ink); font-size: var(--fs-sm); font-family: inherit; resize: vertical; } .ai-field select:focus, .ai-field textarea:focus { outline: none; border-color: var(--accent); } .ai-sentiment { display: flex; gap: 4px; flex-wrap: wrap; } .ai-sentiment-btn { padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); font-size: var(--fs-xs); color: var(--ink); cursor: pointer; font-family: inherit; transition: all var(--t-fast); } .ai-sentiment-btn:hover { border-color: var(--accent); } .ai-sentiment-btn.active { background: var(--accent-50); border-color: var(--accent); color: var(--accent-text); } .ai-form-foot { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border); } .ai-form-note { font-size: 10px; color: var(--ink-subtle); } /* Submitted state (post-form confirmation) */ .ai-submitted { text-align: center; padding: var(--sp-6) var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); } .ai-submitted-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; } .ai-submitted h3 { font-size: var(--fs-lg); } .ai-submitted p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.5; max-width: 320px; } .ai-submitted-meta { font-size: var(--fs-xs); color: var(--ink-subtle); } .ai-submitted-actions { display: flex; gap: 6px; } /* FAB / panel headshot fallback (when img fails to load) */ .ai-fab-avatar-fallback { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } .ai-headshot-fallback { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; } /* ══════════════════════════════════════════════════════════ NOTIFICATIONS PANEL — dropdown anchored to the bell icon-btn ══════════════════════════════════════════════════════════ */ .notif-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-lg); display: none; flex-direction: column; max-height: 480px; } .notif-panel.open { display: flex; } .notif-panel-head { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .notif-panel-title { font-weight: 700; font-size: var(--fs-sm); } .notif-panel-mark { font-size: var(--fs-xs); color: var(--accent-text); cursor: pointer; } .notif-panel-body { overflow-y: auto; padding: 6px; } .notif-item { display: flex; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-fast); align-items: flex-start; } .notif-item:hover { background: var(--surface-2); } .notif-item .notif-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-xs); } .notif-item-body { flex: 1; min-width: 0; } .notif-item-title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; } .notif-item-sub { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 2px; } .notif-item-time { font-size: 10px; color: var(--ink-subtle); margin-top: 4px; } .notif-item.unread { background: var(--accent-50); } .notif-item.unread:hover { background: var(--surface-2); } .notif-panel-foot { padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border); text-align: center; } .notif-panel-foot a { font-size: var(--fs-xs); color: var(--accent-text); font-weight: 600; } /* notif bell needs position: relative wrapper for dropdown anchor */ .icon-btn.has-panel { position: relative; } /* ── Public-mode (when a tier renders public-facing content in a SaaS mock). Two variants: 1. landingSrc → iframe loads an existing landing-mock file 2. publicPage → inline render into a #publicContent div In either case the shell hides and Ask Butz hides (those are app-only). */ body.public-mode .shell, body.public-mode #appRoot, body.public-mode .ai-fab, body.public-mode .ai-panel, body.public-mode .ai-overlay { display: none; } .public-landing-frame { display: none; width: 100%; border: none; background: var(--canvas); } body.public-mode .public-landing-frame { display: block; height: calc(100vh - 32px); /* leave the preview-bar at top */ } .public-content { display: none; background: var(--surface); color: var(--ink); min-height: calc(100vh - 32px); } body.public-mode .public-content { display: block; } /* ── Mobile collapse ──────────────────────────────────── */ @media (max-width: 900px) { .shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "content"; } .sidebar { display: none; } .content { padding: var(--sp-4); } } /* ── Lockup helpers (header logo) ─────────────────────── */ .lockup-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .lockup-glyph { width: 56px; height: 56px; background: var(--accent-grad); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -1px; } .lockup-text { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; } .lockup-text .ff { color: var(--accent-text); } /* ── Status dots ──────────────────────────────────────── */ .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dot-success { background: var(--success); } .dot-warning { background: var(--warning); } .dot-danger { background: var(--danger); } .dot-muted { background: var(--ink-subtle); } /* ══════════════════════════════════════════════════════════ ONBOARDING SHELL (Sprint lessons L0–L10, ffide claim, etc.) ══════════════════════════════════════════════════════════ */ .onb-shell { max-width: 720px; margin: var(--sp-8) auto; padding: var(--sp-8); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); } .onb-step-list { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); } .onb-step-pill { flex: 1; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 600; background: var(--surface-2); color: var(--ink-muted); text-align: center; } .onb-step-pill.done { background: var(--success-50); color: var(--success); } .onb-step-pill.active { background: var(--accent); color: var(--accent-fg); } .onb-title { font-size: var(--fs-2xl); font-weight: 800; margin-bottom: var(--sp-2); } .onb-sub { color: var(--ink-muted); margin-bottom: var(--sp-6); } .onb-actions { display: flex; justify-content: space-between; margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--border); } /* ══════════════════════════════════════════════════════════ PRODUCT STRIP / PRODUCT TILE (admin cross-product views, design-system index, future ecosystem pickers) ══════════════════════════════════════════════════════════ */ .product-strip { display: flex; gap: 4px; align-items: center; padding: 4px; background: var(--surface-2); border-radius: var(--r-md); } .product-chip { padding: 4px 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-muted); border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); background: transparent; border: 0; } .product-chip:hover { color: var(--ink); } .product-chip.active { background: var(--surface); color: var(--accent); box-shadow: var(--sh-sm); } .admin-grid-products { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .product-tile { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); background: var(--surface); display: flex; flex-direction: column; gap: var(--sp-2); } .product-tile-head { display: flex; align-items: center; gap: var(--sp-2); } .product-tile-glyph { width: 28px; height: 28px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; } .product-tile-glyph.aa { background: linear-gradient(135deg, var(--aa-orange), var(--aa-cyan)); } .product-tile-glyph.fflo { background: linear-gradient(135deg, var(--fflo-cyan), var(--fflo-electric)); } .product-tile-glyph.ffide { background: linear-gradient(135deg, #14B8A6, var(--ffide-green)); } .product-tile-glyph.ffit { background: linear-gradient(135deg, #6366F1, var(--ffit-indigo)); } .product-tile-glyph.ffree { background: linear-gradient(135deg, #FB7185, #FDA4AF); } .product-tile-glyph.ffuse { background: linear-gradient(135deg, #F59E0B, #FCD34D); } .product-tile-glyph.ffaro { background: linear-gradient(135deg, #7C3AED, #A78BFA); } .product-tile-name { font-weight: 700; font-size: var(--fs-sm); } /* ══════════════════════════════════════════════════════════ TRIAL BAR (subscription trial banner with progress + CTA; used in fflo and any tier-gated mock) ══════════════════════════════════════════════════════════ */ .trial-bar { background: linear-gradient(135deg, var(--cyan-600), var(--cyan-500)); color: #fff; padding: var(--sp-3) var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); border-radius: var(--r-md); margin-bottom: var(--sp-5); } .trial-bar strong { font-weight: 700; } .trial-bar .progress { flex: 1; max-width: 240px; height: 6px; background: rgba(255,255,255,0.25); border-radius: 3px; overflow: hidden; } .trial-bar .progress > span { display: block; height: 100%; background: var(--electric); } .trial-bar .upgrade-btn { background: #fff; color: var(--cyan-600); padding: 6px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700; border: none; cursor: pointer; } .trial-bar .upgrade-btn:hover { background: var(--cyan-50); color: var(--cyan-900); } /* ══════════════════════════════════════════════════════════ CONTACT / CONTENT DETAIL HEAD (CRM contact detail row, content-asset detail head — large avatar + name + actions) ══════════════════════════════════════════════════════════ */ .contact-detail-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); } .contact-detail-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-grad); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-xl); flex-shrink: 0; } /* ══════════════════════════════════════════════════════════ CONTENT PREVIEW (read-mode preview block for content/assets) ══════════════════════════════════════════════════════════ */ .content-preview { background: var(--surface-2); padding: var(--sp-6); border-radius: var(--r-md); font-size: var(--fs-base); line-height: 1.65; border: 1px solid var(--border); } .content-preview h3 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: var(--sp-3); } .content-preview p { margin-bottom: var(--sp-3); } /* ══════════════════════════════════════════════════════════ PIPELINE COLUMNS (kanban-style tracker; ffit candidate pipeline, fflo deal pipeline, AA campaign pipeline) ══════════════════════════════════════════════════════════ */ .pipeline { display: grid; gap: var(--sp-3); grid-template-columns: repeat(5, 1fr); margin-top: var(--sp-4); } @media (max-width: 1100px) { .pipeline { grid-template-columns: repeat(2, 1fr); } } .pipe-col { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-3); min-height: 240px; } .pipe-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); font-weight: 700; font-size: var(--fs-sm); } .pipe-count { background: var(--accent); color: var(--accent-fg); padding: 1px 8px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; } .candidate-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .candidate-card:hover { border-color: var(--accent); box-shadow: var(--sh-sm); } .candidate-name { font-weight: 600; font-size: var(--fs-sm); } .candidate-meta { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 2px; } .candidate-fit { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; } .fit-bar { width: 60px; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; } .fit-bar > span { display: block; height: 100%; background: var(--accent); } /* ══════════════════════════════════════════════════════════ HEX MOTIF (ffit identity block; reusable as a brand-coloured feature panel for any product hero in-app) ══════════════════════════════════════════════════════════ */ .hex-motif { background: var(--accent-grad); color: #fff; padding: var(--sp-6); border-radius: var(--r-lg); margin-bottom: var(--sp-5); } /* ══════════════════════════════════════════════════════════ GENERIC SAAS UTILITIES (multi-mock helpers — tags, view-toggle, stat-trend, scaffold notes; previously duplicated in ffuse) ══════════════════════════════════════════════════════════ */ .card-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .stat-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(4, 1fr); margin-bottom: var(--sp-5); } @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } .stat-trend { font-size: var(--fs-xs); margin-top: 4px; color: var(--success); font-weight: 600; } .stat-trend.down { color: var(--danger); } table.list { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } table.list th, table.list td { padding: var(--sp-3); text-align: left; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); } table.list th { background: var(--surface-2); font-weight: 600; color: var(--ink-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; } table.list tr:last-child td { border-bottom: 0; } .tag { display: inline-block; padding: 2px 8px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; background: var(--accent-50); color: var(--accent-text); } .tag-neutral { background: var(--surface-2); color: var(--ink-muted); } .tag-success { background: rgba(16,185,129,0.10); color: var(--success); } .tag-warning { background: rgba(245,158,11,0.10); color: var(--warning); } .tag-danger { background: rgba(239,68,68,0.10); color: var(--danger); } .view { display: none; } .view.active { display: block; } .placeholder-note { background: var(--accent-50); border: 1px dashed var(--accent); border-radius: var(--r-md); padding: var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--accent-text); } /* nav-icon / avatar / user-role aliases — engine-name parity (some mocks use shorter local names; aliases avoid CSS forks) */ .nav-icon { width: 18px; height: 18px; flex-shrink: 0; } .user-role { font-size: var(--fs-xs); color: var(--ink-muted); } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; color: var(--ink); font-weight: 700; font-size: var(--fs-sm); } .main { padding: var(--sp-5) var(--sp-6); max-width: 1280px; } /* ══════════════════════════════════════════════════════════ SETUP SPRINT (lesson rail + content; AA L0–L10, fflo onboarding, any guided multi-step learning experience) ══════════════════════════════════════════════════════════ */ .sprint-shell { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-6); padding: var(--sp-6); } .sprint-rail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3); position: sticky; top: 80px; align-self: start; } .sprint-rail-head { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-3); } .sprint-rail-progress { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-muted); } .sprint-rail-bar { flex: 1; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; } .sprint-rail-bar > span { display: block; height: 100%; background: var(--success); } .sprint-lesson-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); } .sprint-lesson-row:hover { background: var(--surface-2); } .sprint-lesson-row.active { background: var(--accent-50); color: var(--accent-text); font-weight: 600; } .sprint-lesson-mark { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; } .sprint-lesson-mark.done { background: var(--success); color: #fff; } .sprint-lesson-mark.todo { background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--border); } .sprint-lesson-mark.active { background: var(--accent); color: var(--accent-fg); } .sprint-lesson-id { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--ink-subtle); width: 24px; } .sprint-lesson-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sprint-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-8); } .sprint-content-eyebrow { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-text); margin-bottom: var(--sp-2); } .sprint-content-title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--sp-3); } .sprint-content-meta { display: flex; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-muted); margin-bottom: var(--sp-5); } .sprint-video-placeholder { background: var(--ink); border-radius: var(--r-md); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-size: var(--fs-sm); margin-bottom: var(--sp-5); } .sprint-body { font-size: var(--fs-base); line-height: 1.65; } .sprint-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); } /* ══════════════════════════════════════════════════════════ LIBRARY TABS + ASSET GRID (content/asset library — fflo Library, AA portal Library, any tabbed asset collection) ══════════════════════════════════════════════════════════ */ .lib-tabs { display: flex; gap: 4px; margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border); } .lib-tab { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-muted); border-bottom: 2px solid transparent; cursor: pointer; transition: all var(--t-fast); background: transparent; border-left: 0; border-right: 0; border-top: 0; } .lib-tab:hover { color: var(--ink); } .lib-tab.active { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 700; } .lib-tab .count { font-size: var(--fs-xs); padding: 1px 8px; border-radius: var(--r-full); background: var(--surface-2); color: var(--ink-muted); } .lib-tab.active .count { background: var(--accent-50); color: var(--accent-text); } .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); } .lib-asset { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast); display: flex; flex-direction: column; gap: var(--sp-2); } .lib-asset:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--accent); } .lib-asset-emoji { font-size: 32px; } .lib-asset-title { font-weight: 700; font-size: var(--fs-base); } .lib-asset-sub { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.5; } .lib-asset-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: 11px; } .lib-empty { padding: var(--sp-12); text-align: center; color: var(--ink-muted); } /* Inline SVG sizer for brand-icon containers (social provider logos in integration rows, footer icons, etc.) */ .brand-icon svg { width: 22px; height: 22px; display: block; } /* ══════════════════════════════════════════════════════════ CONTENT WEEK GRID (7-column scheduled-content view: ffuse Calendar, fflo Content Planner, AA portal Content Calendar) ══════════════════════════════════════════════════════════ */ .cwk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); } @media (max-width: 1100px) { .cwk-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .cwk-grid { grid-template-columns: 1fr; } } .cwk-day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); min-height: 180px; display: flex; flex-direction: column; gap: var(--sp-2); } .cwk-day.today { border-color: var(--accent); background: var(--accent-50); } .cwk-day-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-xs); color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .cwk-day-date { font-weight: 800; color: var(--ink); font-size: var(--fs-base); } .cwk-post { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--ink-subtle); border-radius: var(--r-sm); padding: 6px 8px; font-size: var(--fs-xs); line-height: 1.3; } .cwk-post.approved { border-left-color: var(--success); } .cwk-post.scheduled { border-left-color: var(--accent); } .cwk-post.draft { border-left-color: var(--warning); } .cwk-post.published { border-left-color: var(--ink-muted); opacity: 0.7; } .cwk-post-time { font-size: 10px; color: var(--ink-subtle); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .cwk-post-hook { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); font-weight: 500; margin-top: 2px; } .cwk-post-meta { font-size: 10px; color: var(--ink-muted); margin-top: 2px; } /* ══════════════════════════════════════════════════════════ ENGAGEMENT BAR (lightweight horizontal bar for performance metrics — engagement rate per platform, post effectiveness, etc.) ══════════════════════════════════════════════════════════ */ .eng-bar-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; } .eng-bar-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); min-width: 100px; flex-shrink: 0; } .eng-bar-track { flex: 1; height: 8px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; } .eng-bar-fill { height: 100%; background: var(--accent); border-radius: var(--r-full); } .eng-bar-value { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); min-width: 60px; text-align: right; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════ BRAND SWITCHER (multi-tenant SaaS pattern: user manages multiple brands/workspaces. Sits at top of sidebar; click to open dropdown of accessible brands + "+ Add brand". Used by ffuse, future fflo team accounts, admin operator-on-behalf-of.) ══════════════════════════════════════════════════════════ */ .brand-switcher { position: relative; margin-bottom: var(--sp-4); } .brand-switcher-btn { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; width: 100%; font-family: inherit; color: var(--ink); text-align: left; transition: border-color var(--t-fast), background var(--t-fast); } .brand-switcher-btn:hover { border-color: var(--accent); background: var(--surface); } .brand-switcher-glyph { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); overflow: hidden; } .brand-switcher-glyph img { width: 100%; height: 100%; object-fit: contain; } .brand-switcher-info { flex: 1; min-width: 0; } .brand-switcher-name { font-weight: 700; font-size: var(--fs-sm); letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-switcher-sub { font-size: 10px; color: var(--ink-muted); margin-top: 2px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-switcher-chevron { width: 14px; height: 14px; color: var(--ink-subtle); flex-shrink: 0; } .brand-switcher-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 4px; z-index: 50; display: none; max-height: 380px; overflow-y: auto; } .brand-switcher-menu.open { display: block; } .brand-switcher-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); cursor: pointer; width: 100%; text-align: left; background: none; border: none; font-family: inherit; color: var(--ink); transition: background var(--t-fast); } .brand-switcher-item:hover { background: var(--surface-2); } .brand-switcher-item.active { background: var(--accent-50); } .brand-switcher-item.active .brand-switcher-name { color: var(--accent-text); } .brand-switcher-add { border-top: 1px solid var(--border); margin-top: 4px; padding-top: var(--sp-2); color: var(--ink-muted); } .brand-switcher-add .brand-switcher-glyph { background: var(--surface-2); color: var(--ink-muted); font-size: 18px; font-weight: 700; } .brand-switcher-add:hover .brand-switcher-name { color: var(--accent-text); } /* ══════════════════════════════════════════════════════════ SPARKLINE / AREA CHART (small inline trend visualization; uses inline SVG with currentColor → picks up surrounding accent. Use within a fixed-height parent.) ══════════════════════════════════════════════════════════ */ .sparkline { display: block; width: 100%; height: 60px; color: var(--accent); } .sparkline-lg { height: 120px; } .sparkline path.area { fill: currentColor; opacity: 0.15; } .sparkline path.line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; } .sparkline circle { fill: currentColor; } /* ══════════════════════════════════════════════════════════ PLATFORM BAR CHART (vertical stacked bars per day; for Performance views. Each .bar-col has: value (top) → flex-spacer → stacked bars (bottom-anchored, heights set via inline style %) → label.) ══════════════════════════════════════════════════════════ */ .bar-chart { display: flex; align-items: stretch; gap: var(--sp-2); min-height: 220px; padding: var(--sp-3) 0; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; } .bar-col-value { font-size: var(--fs-xs); font-weight: 700; color: var(--ink); margin-bottom: var(--sp-2); } .bar-col-bars { flex: 1; width: 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; } .bar-col-bar { width: 100%; background: var(--accent); } .bar-col-bars > .bar-col-bar:first-child { border-top-left-radius: var(--r-sm); border-top-right-radius: var(--r-sm); } .bar-col-bar.cyan { background: var(--cyan-500); } .bar-col-bar.muted { background: var(--ink-subtle); } .bar-col-bar.purple { background: var(--portal-purple, #7C5CBF); } .bar-col-label { font-size: 10px; color: var(--ink-subtle); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--sp-2); } /* ══════════════════════════════════════════════════════════ COMMAND PALETTE (⌘K modal — global search/jump across any app) ══════════════════════════════════════════════════════════ */ .cmdk-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; display: none; align-items: flex-start; justify-content: center; padding-top: 120px; } .cmdk-overlay.open { display: flex; } .cmdk-modal { width: min(640px, calc(100% - 32px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.4); overflow: hidden; display: flex; flex-direction: column; max-height: 60vh; } .cmdk-input-wrap { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border); } .cmdk-input-icon { color: var(--ink-muted); flex-shrink: 0; } .cmdk-input { flex: 1; background: none; border: none; outline: none; font-size: var(--fs-base); color: var(--ink); font-family: inherit; } .cmdk-input::placeholder { color: var(--ink-subtle); } .cmdk-kbd, .cmdk-kbd-close { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; padding: 2px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; color: var(--ink-subtle); font-weight: 600; } .cmdk-results { overflow-y: auto; flex: 1; padding: var(--sp-2); } .cmdk-group-label { padding: var(--sp-2) var(--sp-3) 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); } .cmdk-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-fast); } .cmdk-item:hover, .cmdk-item.highlighted { background: var(--surface-2); } .cmdk-item.highlighted { background: var(--accent-50); } .cmdk-item-icon { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--ink-muted); flex-shrink: 0; } .cmdk-item-icon svg { width: 14px; height: 14px; } .cmdk-item.highlighted .cmdk-item-icon { background: var(--accent); color: #fff; } .cmdk-item-body { flex: 1; min-width: 0; } .cmdk-item-title { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); line-height: 1.3; } .cmdk-item-sub { font-size: var(--fs-xs); color: var(--ink-muted); } .cmdk-item-kind { font-size: 10px; color: var(--ink-subtle); padding: 2px 8px; background: var(--surface-2); border-radius: var(--r-full); flex-shrink: 0; } .cmdk-empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--ink-muted); font-size: var(--fs-sm); } .cmdk-footer { display: flex; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--ink-subtle); } .cmdk-footer span { display: inline-flex; align-items: center; gap: 4px; } @media (max-width: 640px) { .cmdk-footer { flex-wrap: wrap; gap: var(--sp-2); } } /* ══════════════════════════════════════════════════════════ TOAST STACK (undo, success, error notifications) ══════════════════════════════════════════════════════════ */ .toast-stack { position: fixed; bottom: 24px; left: 24px; z-index: 200; display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; } .toast { background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-md); display: flex; align-items: center; gap: var(--sp-3); min-width: 300px; max-width: 420px; box-shadow: var(--sh-xl); pointer-events: auto; animation: toast-in 0.24s var(--ease); } @keyframes toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .toast-body { flex: 1; font-size: var(--fs-sm); line-height: 1.4; } .toast-body strong { color: #fff; } .toast-action { background: none; border: none; color: var(--electric); font-weight: 700; cursor: pointer; font-family: inherit; font-size: var(--fs-sm); } .toast-action:hover { text-decoration: underline; } .toast-close { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: var(--fs-base); padding: 0 4px; } .toast-close:hover { color: #fff; } .toast-success { background: var(--success); } .toast-error { background: var(--danger); } @media (max-width: 640px) { .toast-stack { left: 12px; right: 12px; } .toast { min-width: 0; width: 100%; } } /* ══════════════════════════════════════════════════════════ CONFIRMATION MODAL (destructive actions: delete, cancel, etc.) ══════════════════════════════════════════════════════════ */ .confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 230; display: none; align-items: center; justify-content: center; } .confirm-overlay.open { display: flex; } .confirm-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xl); padding: var(--sp-6); width: min(420px, calc(100% - 32px)); text-align: center; } .confirm-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--warning-50); color: var(--warning); display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto var(--sp-3); } .confirm-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-2); } .confirm-body { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.5; margin-bottom: var(--sp-4); } .confirm-actions { display: flex; gap: var(--sp-2); justify-content: center; } /* ══════════════════════════════════════════════════════════ FIRST-RUN PRODUCT TOUR (spotlight + tooltip) ══════════════════════════════════════════════════════════ */ .tour-overlay { position: fixed; inset: 0; z-index: 220; display: none; pointer-events: none; } .tour-overlay.open { display: block; } .tour-overlay::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.55); pointer-events: auto; } .tour-spotlight { position: fixed; border-radius: var(--r-md); box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 4px var(--accent); pointer-events: none; transition: all 0.3s var(--ease); } .tour-tooltip { position: fixed; width: min(380px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xl); padding: var(--sp-4); pointer-events: auto; z-index: 221; transition: all 0.3s var(--ease); } .tour-tooltip-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); } .tour-tooltip-headshot { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; } .tour-tooltip-headshot img { width: 100%; height: 100%; object-fit: cover; } .tour-headshot-fallback { color: #fff; font-weight: 700; } .tour-tooltip-by { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); } .tour-tooltip-step { font-size: 10px; color: var(--ink-subtle); font-weight: 500; margin-top: 2px; } .tour-close { margin-left: auto; background: none; border: none; color: var(--ink-subtle); font-size: var(--fs-lg); cursor: pointer; padding: 4px 8px; } .tour-close:hover { color: var(--ink); } .tour-tooltip-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-2); line-height: 1.3; } .tour-tooltip-body { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.55; margin-bottom: var(--sp-3); } .tour-tooltip-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .tour-progress-dots { display: flex; gap: 4px; } .tour-progress-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); } .tour-progress-dot.active { background: var(--accent); } .tour-actions { display: flex; gap: 4px; margin-left: auto; } /* ══════════════════════════════════════════════════════════ ENTRY STRIP (page-context callout: "You're in the Sprint flow", "This is your Library", etc.) ══════════════════════════════════════════════════════════ */ .entry-strip { background: var(--accent-50); border-left: 4px solid var(--accent); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); flex-wrap: wrap; } .entry-strip-icon { width: 28px; height: 28px; border-radius: var(--r-full); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .entry-strip-text { flex: 1; min-width: 0; } .entry-strip-text strong { font-weight: 700; display: block; line-height: 1.3; } .entry-strip-text span { font-size: var(--fs-xs); color: var(--ink-muted); } /* ══════════════════════════════════════════════════════════ FILTER BAR (page-level filter row with dropdowns + chips) ══════════════════════════════════════════════════════════ */ .filter-bar { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--sp-5); flex-wrap: wrap; } .filter-group { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .filter-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); margin-right: 4px; } .filter-dropdown { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-xs); font-weight: 600; color: var(--ink); cursor: pointer; } .filter-dropdown:hover { border-color: var(--accent); } .filter-dropdown svg { color: var(--ink-muted); } .filter-chips { display: flex; gap: 4px; flex-wrap: wrap; } .filter-chip-sm { padding: 5px 10px; font-size: var(--fs-xs); font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); color: var(--ink-muted); cursor: pointer; transition: all var(--t-fast) var(--ease); } .filter-chip-sm:hover { color: var(--ink); border-color: var(--border-strong); } .filter-chip-sm.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* ══════════════════════════════════════════════════════════ TRACK TOGGLE (Linear/Notion-style track/role/scope switcher) ══════════════════════════════════════════════════════════ */ .track-toggle-wrap { position: relative; margin-right: var(--sp-2); } .track-toggle-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 600; color: var(--ink); cursor: pointer; height: 32px; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .track-toggle-btn:hover { background: var(--surface); border-color: var(--accent); } .track-toggle-btn .track-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .track-toggle-btn .track-label { font-weight: 600; } .track-toggle-btn .track-chevron { width: 12px; height: 12px; opacity: 0.5; } .track-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 6px; z-index: 100; display: none; } .track-dropdown.open { display: block; } .track-dropdown-header { padding: 6px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); } .track-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; } .track-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); cursor: pointer; width: 100%; text-align: left; background: none; border: none; color: var(--ink); } .track-dropdown-item:hover { background: var(--surface-2); } .track-dropdown-item.active .track-item-name { color: var(--accent); } .track-dropdown-item .track-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .track-item-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .track-item-name { font-weight: 600; color: var(--ink); line-height: 1.2; } .track-item-desc { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.2; } .track-dropdown-item.add-track { border: 1px dashed var(--border); } .track-dropdown-item.add-track .icon { width: 14px; height: 14px; color: var(--ink-subtle); } .track-dropdown-item.add-track:hover { background: var(--accent-50); border-color: var(--accent); } .track-dropdown-hint { padding: 6px 10px; font-size: var(--fs-xs); color: var(--ink-subtle); line-height: 1.4; } @media (max-width: 640px) { .track-toggle-btn .track-label { display: none; } .track-dropdown { right: -40px; min-width: 220px; } } /* ══════════════════════════════════════════════════════════ COMPATIBILITY ALIASES ══════════════════════════════════════════════════════════ The previous vocabulary used --brand-*. These aliases let any not-yet-migrated component or inline style continue to work. New code should read --accent / --accent-grad directly. ────────────────────────────────────────────────────────── */ :root, [data-brand] { --brand-50: var(--accent-50); --brand-500: var(--accent); --brand-600: var(--accent-600); --brand-grad: var(--accent-grad); }