/* ===================================================================== CG Track A shared stylesheet — v2 (mirrored into Pitchgate) Source of truth lives at: github.com/AWCGAI/cg-pitch-pipeline-track-a → public/static/styles.css Mirrored here so Pitchgate's back-end (admin, login, landing) renders in the same Collaborate Global design language as every other Track A tool. Per-tenant pitch content (ADIO Goodwood etc.) intentionally does NOT load this file — those pages keep their own per-pitch brand. If the canonical CG styles are updated, refresh this copy via: curl -L > pitchgate/public/styles.css ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); :root { /* CG brand palette */ --cg-purple: #9333ea; --cg-purple-deep: #7c3aed; --cg-purple-dark: #6d28d9; --cg-purple-soft: #a78bfa; --cg-lavender: #f0e8ff; --cg-ink: #0a0a0a; --cg-ink-soft: #1e1b4b; --tool-accent: var(--cg-purple); --tool-accent-deep: var(--cg-purple-deep); --cg-chrome: linear-gradient(135deg, #fce4f6 0%, #f5d0fe 15%, #e9d5ff 35%, #ddd6fe 55%, #c7d2fe 80%, #bfdbfe 100%); --tool-gradient: var(--cg-chrome); --text: #0a0a0a; --text-muted: #475569; --text-soft: #64748b; --text-faint: #94a3b8; --surface: rgba(255, 255, 255, 0.75); --surface-solid: rgba(255, 255, 255, 0.92); --surface-hot: rgba(255, 255, 255, 0.92); --border-subtle: rgba(255, 255, 255, 0.9); --border: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.14); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06); --shadow-lg: 0 12px 40px rgba(147, 51, 234, 0.12); --shadow-glow: 0 12px 40px rgba(147, 51, 234, 0.18); --success: #059669; --success-soft: rgba(5, 150, 105, 0.10); --warning: #d97706; --warning-soft: rgba(245, 158, 11, 0.12); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.10); --info: #0891b2; --info-soft: rgba(8, 145, 178, 0.10); --beta: #7c3aed; --beta-soft: rgba(124, 58, 237, 0.10); --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --snap: 120ms var(--ease); --slide: 220ms var(--ease); } /* The per-tenant tracks set their own background on a wrapper. The CG chrome only kicks in when this class is on or a top-level wrapper. */ /* CG chrome activates by adding the .cg-chrome class to a top-level wrapper. Scoping under that class instead of html/body lets the per-tenant pitch pages (which keep their own brand) coexist in the same Next.js app without colour collisions. */ /* When CG chrome is mounted, override the dark body bg from globals.css so the pastel gradient can show through. :has() works in Chrome 105+, Safari 15.4+, Firefox 121+ — Andrew's stack is fine. */ html:has(.cg-chrome), html:has(.cg-chrome) body { background: transparent !important; } .cg-chrome { position: relative; min-height: 100vh; width: 100%; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; letter-spacing: -0.005em; } /* Full-viewport pastel gradient painted behind every back-end page. z-index: 0 keeps it visible (above transparent body) but below the page content (which the cg-chrome's children will sit on top of). */ .cg-chrome::before { content: ""; position: fixed; inset: 0; background: var(--tool-gradient); z-index: 0; pointer-events: none; } /* Direct children of cg-chrome stack above the gradient */ .cg-chrome > * { position: relative; z-index: 1; } .cg-chrome *, .cg-chrome *::before, .cg-chrome *::after { box-sizing: border-box; } .cg-chrome a { color: var(--cg-purple-dark); text-decoration: none; transition: opacity var(--snap); } .cg-chrome a:hover { text-decoration: underline; } .cg-chrome :focus-visible { outline: 3px solid rgba(147, 51, 234, 0.45); outline-offset: 2px; border-radius: 6px; } .cg-chrome ::-webkit-scrollbar { width: 9px; height: 9px; } .cg-chrome ::-webkit-scrollbar-track { background: rgba(147, 51, 234, 0.05); border-radius: 6px; } .cg-chrome ::-webkit-scrollbar-thumb { background: rgba(147, 51, 234, 0.35); border-radius: 6px; } .cg-chrome ::-webkit-scrollbar-thumb:hover { background: rgba(147, 51, 234, 0.55); } /* ===================================================================== Page layout ===================================================================== */ .page { min-height: 100vh; display: flex; flex-direction: column; } .page-header { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--border-subtle); padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: sticky; top: 0; z-index: 100; } .page-header .brand { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; color: var(--cg-ink); display: flex; align-items: center; gap: 12px; text-decoration: none; } .page-header .brand:hover { text-decoration: none; } .page-header .brand .logo-mark { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .page-header .brand .logo-mark img { width: 100%; height: 100%; display: block; } .page-header .brand .brand-name { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--cg-ink); line-height: 1.1; } .page-header .brand .brand-eyebrow { display: none; } .page-header .tool-title { font-size: 11px; color: var(--text-faint); font-weight: 600; padding-left: 14px; margin-left: 6px; border-left: 1px solid rgba(15, 23, 42, 0.12); letter-spacing: 0.12em; text-transform: uppercase; } .page-header nav { display: flex; align-items: center; gap: 6px; font-size: 13px; } /* Tier 1 — solid purple pill */ .page-header nav a { background: var(--cg-purple-dark); border: 1px solid var(--cg-purple-dark); color: white; padding: 6px 14px; border-radius: 999px; font-weight: 600; text-decoration: none; transition: background var(--snap), border-color var(--snap), color var(--snap); } .page-header nav a:hover { background: #5b21b6; border-color: #5b21b6; color: white; text-decoration: none; } /* Tier 2 — outlined purple pill */ .page-header nav a.admin-only { background: transparent; border-color: rgba(147, 51, 234, 0.35); color: var(--cg-purple-dark); } .page-header nav a.admin-only:hover { background: rgba(147, 51, 234, 0.10); border-color: rgba(147, 51, 234, 0.55); color: var(--cg-purple-dark); } .page-header nav a.admin-only.active { background: rgba(147, 51, 234, 0.14); border-color: rgba(147, 51, 234, 0.55); color: var(--cg-purple-dark); } .user-menu { display: flex; align-items: center; gap: 10px; font-size: 13px; } .user-menu .user-email { color: var(--text-muted); } .user-menu .tone-badge { background: rgba(147, 51, 234, 0.10); border: 1px solid rgba(147, 51, 234, 0.20); color: var(--cg-purple-dark); padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .page-body { flex: 1; padding: 40px 32px 64px; max-width: 1400px; margin: 0 auto; width: 100%; } .page-body.narrow { max-width: 900px; } .page-body.wide { max-width: 100%; } .eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; } /* ===================================================================== Cards — frosted glass ===================================================================== */ .card { background: var(--surface); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 24px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .card-hover { transition: transform var(--slide), box-shadow var(--slide), border-color var(--slide); cursor: pointer; } .card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(147, 51, 234, 0.25); } .card-glow::before { content: ""; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; border-radius: 50%; background: var(--tool-accent); opacity: 0.08; pointer-events: none; filter: blur(2px); transition: opacity var(--slide); } .card-glow:hover::before { opacity: 0.14; } .card-title { font-size: 16px; font-weight: 700; color: var(--cg-ink); margin-bottom: 4px; letter-spacing: -0.01em; line-height: 1.25; } .card-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.55; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } .card-grid-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } /* ===================================================================== Forms ===================================================================== */ .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .form-row.horizontal { flex-direction: row; align-items: center; gap: 12px; } .cg-chrome label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .cg-chrome label.required::after { content: ' *'; color: var(--danger); } .cg-chrome input[type="text"], .cg-chrome input[type="email"], .cg-chrome input[type="password"], .cg-chrome input[type="date"], .cg-chrome input[type="datetime-local"], .cg-chrome input[type="number"], .cg-chrome input[type="url"], .cg-chrome input[type="search"], .cg-chrome textarea, .cg-chrome select { width: 100%; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: rgba(255, 255, 255, 0.8); font-family: inherit; font-size: 14px; color: var(--text); transition: border-color var(--snap), box-shadow var(--snap), background var(--snap); } .cg-chrome input::placeholder, .cg-chrome textarea::placeholder { color: var(--text-faint); } .cg-chrome input:focus, .cg-chrome textarea:focus, .cg-chrome select:focus { outline: none; border-color: var(--cg-purple); box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15); background: rgba(255, 255, 255, 0.95); } .cg-chrome textarea { min-height: 100px; resize: vertical; line-height: 1.55; } .helper { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 500; text-transform: none; letter-spacing: 0; } .error-banner { background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.28); color: var(--danger); padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; font-weight: 500; } .success-banner { background: rgba(5, 150, 105, 0.08); border: 1px solid rgba(5, 150, 105, 0.28); color: var(--success); padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; font-weight: 500; } /* ===================================================================== Buttons ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 100px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: all var(--snap); border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.85); color: var(--text); box-shadow: var(--shadow-sm); text-decoration: none; white-space: nowrap; } .btn:hover { background: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow-md); border-color: rgba(147, 51, 234, 0.28); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .btn-primary { background: linear-gradient(135deg, var(--cg-ink), #1f1f1f); color: white; border-color: transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .btn-primary:hover { background: linear-gradient(135deg, var(--cg-ink), #1f1f1f); color: white; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); border-color: transparent; opacity: 0.95; } .btn-purple { background: linear-gradient(135deg, var(--cg-purple), var(--cg-purple-deep)); color: white; border-color: transparent; box-shadow: 0 2px 10px rgba(147, 51, 234, 0.22); } .btn-purple:hover { background: linear-gradient(135deg, var(--cg-purple), var(--cg-purple-deep)); color: white; box-shadow: 0 4px 16px rgba(147, 51, 234, 0.32); opacity: 0.95; border-color: transparent; } /* Override the global anchor colour for buttons rendered as tags. Without this `.cg-chrome a { color: var(--cg-purple-dark) }` wins on specificity and our purple-on-purple Send invitation button reads as dark-purple text on a dark-purple gradient. Same fix protects every future link styled as a button. */ .cg-chrome a.btn-primary, .cg-chrome a.btn-purple, .cg-chrome a.btn-tool, .cg-chrome a.btn-danger { color: white; } .cg-chrome a.btn-primary:hover, .cg-chrome a.btn-purple:hover, .cg-chrome a.btn-tool:hover, .cg-chrome a.btn-danger:hover { color: white; } .cg-chrome a.btn-secondary { color: var(--cg-purple-dark); } .cg-chrome a.btn-ghost { color: var(--cg-ink); } .btn-tool { background: linear-gradient(135deg, var(--tool-accent), var(--tool-accent-deep)); color: white; border-color: transparent; box-shadow: 0 2px 10px rgba(147, 51, 234, 0.22); } .btn-tool:hover { background: linear-gradient(135deg, var(--tool-accent), var(--tool-accent-deep)); color: white; opacity: 0.92; border-color: transparent; } .btn-ghost { background: white; color: var(--cg-ink); box-shadow: none; border: 1px solid rgba(15, 23, 42, 0.14); } .btn-ghost:hover { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.24); color: var(--cg-ink); } .btn-secondary { background: transparent; color: var(--cg-purple-dark); border: 1px solid rgba(147, 51, 234, 0.35); box-shadow: none; } .btn-secondary:hover { background: rgba(147, 51, 234, 0.10); border-color: rgba(147, 51, 234, 0.55); color: var(--cg-purple-dark); } .btn-danger { background: linear-gradient(135deg, var(--danger), #b91c1c); color: white; border-color: transparent; } .btn-sm { padding: 6px 14px; font-size: 12px; } .btn-lg { padding: 13px 26px; font-size: 14px; } .btn-block { width: 100%; } .btn .btn-arrow { display: inline-block; transition: transform var(--snap); } .btn:hover .btn-arrow { transform: translateX(2px); } /* ===================================================================== Tables ===================================================================== */ .table-wrap { overflow-x: auto; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; border: 1px solid var(--border-subtle); } table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; } table.data-table th { text-align: left; padding: 12px 16px; font-weight: 700; background: rgba(147, 51, 234, 0.04); border-bottom: 1px solid var(--border); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); } table.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); } table.data-table tr:last-child td { border-bottom: none; } table.data-table tr:hover td { background: rgba(147, 51, 234, 0.03); } table.data-table .num { text-align: right; font-variant-numeric: tabular-nums; } /* ===================================================================== Badges ===================================================================== */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(15, 23, 42, 0.05); color: var(--text-muted); border: 1px solid transparent; } .badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge-success { background: var(--success-soft); color: var(--success); border-color: rgba(5, 150, 105, 0.22); } .badge-warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(245, 158, 11, 0.28); } .badge-danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(220, 38, 38, 0.25); } .badge-info { background: var(--info-soft); color: var(--info); border-color: rgba(8, 145, 178, 0.25); } .badge-purple { background: var(--beta-soft); color: var(--cg-purple-dark); border-color: rgba(147, 51, 234, 0.22); } /* ===================================================================== Utility ===================================================================== */ .hstack { display: flex; align-items: center; gap: 12px; } .vstack { display: flex; flex-direction: column; gap: 12px; } .between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .small { font-size: 12px; } .strong { font-weight: 600; } .center { text-align: center; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .fade-in { animation: cg-fade 0.32s var(--ease); } @keyframes cg-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 900px) { .page-header { padding: 12px 16px; flex-wrap: wrap; gap: 10px; } .page-header .tool-title { display: none; } .page-body { padding: 24px 16px 48px; } .card-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }