/* platform.css — Summit Exchange enterprise design system Owns: shared tokens, typography, components, layout primitives for all /platform pages. Does NOT own: page-specific layout (3-col builder, admin tabs). Palette: white canvas, black text, berry pink (#C94C6D) for CTAs, black for structure. Reference: LiveRamp-style enterprise data platform. */ /* ── Google Fonts preload handled in HTML ── */ /* ── Design Tokens ────────────────────────────────────────────────────────── */ :root { /* Brand palette — berry pink + black + white */ /* Primary CTA / accent: berry pink from Summit deck */ --sx-coral: #C94C6D; --sx-coral-hover: #B03A5B; --sx-coral-light: #F5E0E7; --sx-coral-xlight: #FDF4F7; /* Structural / sidebar: pure black for strong contrast */ --sx-navy: #000000; --sx-navy-mid: #111111; --sx-navy-light: #1A1A1A; --sx-navy-surface: #222222; /* Legacy sky — retained for charts/data viz where teal is needed */ --sx-sky: #1B7A9E; --sx-sky-hover: #155F7A; --sx-sky-light: #C9E8F3; --sx-sky-xlight: #EBF6FB; /* Gold accent (retained for highlight moments) */ --sx-gold: #FFD804; --sx-orange: #C94C6D; /* alias for berry pink */ /* Neutrals — white canvas, gray borders */ --sx-bg: #FFFFFF; --sx-surface: #FFFFFF; --sx-surface-alt: #F6F7F9; --sx-border: #E0E3E9; --sx-border-light: #ECEEF3; /* Text — black on white, high contrast */ --sx-text: #0D0D0D; --sx-text-secondary: #374151; --sx-text-muted: #6B7280; --sx-text-inverse: #FFFFFF; /* Semantic */ --sx-success: #059669; --sx-success-bg: #ECFDF5; --sx-warning: #D97706; --sx-warning-bg: #FFFBEB; --sx-danger: #DC2626; --sx-danger-bg: #FEF2F2; /* Shadows — clean, airy elevation */ --sx-shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --sx-shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); --sx-shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04); --sx-shadow-lg: 0 12px 40px rgba(0,0,0,0.09), 0 4px 12px rgba(0,0,0,0.05); --sx-shadow-xl: 0 24px 64px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06); /* Radii */ --sx-radius-sm: 6px; --sx-radius-md: 10px; --sx-radius-lg: 14px; --sx-radius-xl: 20px; --sx-radius-full: 100px; /* Transition */ --sx-ease: cubic-bezier(0.4, 0, 0.2, 1); --sx-t-fast: 0.15s var(--sx-ease); --sx-t-normal: 0.25s var(--sx-ease); --sx-t-slow: 0.35s var(--sx-ease); /* Sidebar width */ --sx-sidebar-w: 260px; --sx-topbar-h: 64px; } /* ── Base Reset ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--sx-text); background: #FFFFFF; line-height: 1.5; } /* Tabular numerals for data columns */ .tabular-nums { font-variant-numeric: tabular-nums; } /* ── Typography Scale ─────────────────────────────────────────────────────── */ .sx-h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--sx-text); } .sx-h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; color: var(--sx-text); } .sx-h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--sx-text); } .sx-h4 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--sx-text); } .sx-body { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--sx-text); } .sx-small { font-size: 13px; font-weight: 400; line-height: 1.5; } .sx-caption { font-size: 12px; font-weight: 500; line-height: 1.4; } .sx-overline { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sx-text-muted); } /* ── Sidebar ──────────────────────────────────────────────────────────────── */ /* Dark teal sidebar — structural anchor, high contrast with white content */ .sx-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sx-sidebar-w); background: var(--sx-navy); display: flex; flex-direction: column; z-index: 200; overflow: hidden; border-right: 1px solid rgba(255,255,255,0.06); } .sx-sidebar-brand { padding: 28px 24px 22px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; align-items: center; text-align: center; } .sx-sidebar-brand h1 { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -0.02em; display: flex; align-items: center; gap: 3px; justify-content: center; } /* Coral accent in brand name */ .sx-sidebar-brand h1 .accent { color: var(--sx-coral); } .sx-sidebar-brand .tagline { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 4px; letter-spacing: 0.02em; } .sx-sidebar-nav { padding: 16px 14px; flex: 1; display: flex; flex-direction: column; gap: 2px; } .sx-nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: var(--sx-radius-sm); color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: all var(--sx-t-fast); position: relative; } .sx-nav-item:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.9); } /* Coral active state */ .sx-nav-item.active { background: rgba(240,90,40,0.15); color: #fff; } .sx-nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--sx-coral); border-radius: 0 3px 3px 0; } .sx-nav-item .icon { width: 20px; text-align: center; font-size: 15px; opacity: 0.8; } .sx-nav-badge { margin-left: auto; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--sx-radius-full); letter-spacing: 0.02em; } .sx-nav-item.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .sx-sidebar-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.25); padding: 20px 14px 6px; margin-top: 4px; } .sx-sidebar-footer { padding: 16px 14px; border-top: 1px solid rgba(255,255,255,0.08); } .sx-user-info { display: flex; align-items: center; gap: 11px; padding: 8px 10px; margin-bottom: 4px; } .sx-user-avatar { width: 34px; height: 34px; background: var(--sx-coral); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; } .sx-user-name { color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sx-user-email { color: rgba(255,255,255,0.4); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sx-logout-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--sx-radius-sm); color: rgba(255,255,255,0.45); font-size: 13px; font-weight: 500; border: none; background: none; cursor: pointer; width: 100%; transition: all var(--sx-t-fast); } .sx-logout-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); } /* ── Main Content Area ────────────────────────────────────────────────────── */ .sx-main { margin-left: var(--sx-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; background: #FFFFFF; } .sx-topbar { background: #FFFFFF; border-bottom: 1px solid var(--sx-border); padding: 0 32px; height: var(--sx-topbar-h); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .sx-topbar-title { font-size: 16px; font-weight: 600; color: var(--sx-text); letter-spacing: -0.01em; } .sx-topbar-right { display: flex; align-items: center; gap: 12px; } .sx-content { padding: 32px; flex: 1; background: #FFFFFF; } /* ── Cards & Panels ───────────────────────────────────────────────────────── */ .sx-card { background: #FFFFFF; border: 1px solid var(--sx-border); border-radius: var(--sx-radius-md); box-shadow: var(--sx-shadow-xs); transition: box-shadow var(--sx-t-normal), border-color var(--sx-t-normal); } .sx-card:hover { box-shadow: var(--sx-shadow-sm); } .sx-card-header { padding: 18px 24px; border-bottom: 1px solid var(--sx-border-light); display: flex; align-items: center; justify-content: space-between; } .sx-card-title { font-size: 14px; font-weight: 600; color: var(--sx-text); } .sx-card-body { padding: 24px; } /* ── Stat Cards ───────────────────────────────────────────────────────────── */ .sx-stat-card { background: #FFFFFF; border: 1px solid var(--sx-border); border-radius: var(--sx-radius-md); padding: 24px; box-shadow: var(--sx-shadow-xs); transition: all var(--sx-t-normal); position: relative; overflow: hidden; } .sx-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sx-coral); opacity: 0; transition: opacity var(--sx-t-normal); } .sx-stat-card:hover { box-shadow: var(--sx-shadow-md); border-color: var(--sx-coral-light); } .sx-stat-card:hover::before { opacity: 1; } .sx-stat-label { font-size: 11px; font-weight: 700; color: var(--sx-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } .sx-stat-value { font-size: 30px; font-weight: 700; color: var(--sx-text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .sx-stat-sub { font-size: 12px; color: var(--sx-text-muted); margin-top: 6px; } /* ── Badges ───────────────────────────────────────────────────────────────── */ .sx-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--sx-radius-full); font-size: 12px; font-weight: 600; } .sx-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .sx-badge-approved { background: var(--sx-success-bg); color: var(--sx-success); } .sx-badge-pending { background: var(--sx-warning-bg); color: var(--sx-warning); } .sx-badge-rejected { background: var(--sx-danger-bg); color: var(--sx-danger); } .sx-badge-suspended { background: var(--sx-surface-alt); color: var(--sx-text-muted); } .sx-badge-info { background: var(--sx-coral-xlight); color: var(--sx-coral); } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .sx-btn { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; padding: 10px 22px; border-radius: var(--sx-radius-sm); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all var(--sx-t-fast); text-decoration: none; white-space: nowrap; } .sx-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Primary CTA — coral */ .sx-btn-primary { background: var(--sx-coral); color: #fff; } .sx-btn-primary:hover:not(:disabled) { background: var(--sx-coral-hover); box-shadow: 0 4px 12px rgba(240,90,40,0.25); } /* Accent — dark teal */ .sx-btn-accent { background: var(--sx-navy); color: #fff; } .sx-btn-accent:hover:not(:disabled) { background: var(--sx-navy-light); box-shadow: var(--sx-shadow-sm); } .sx-btn-outline { background: transparent; border: 1.5px solid var(--sx-border); color: var(--sx-text); } .sx-btn-outline:hover:not(:disabled) { border-color: var(--sx-coral); color: var(--sx-coral); } .sx-btn-ghost { background: transparent; color: var(--sx-text-secondary); padding: 8px 14px; } .sx-btn-ghost:hover { background: var(--sx-surface-alt); color: var(--sx-text); } .sx-btn-success { background: var(--sx-success); color: #fff; } .sx-btn-success:hover:not(:disabled) { opacity: 0.9; } .sx-btn-danger { background: var(--sx-danger); color: #fff; } .sx-btn-danger:hover:not(:disabled) { opacity: 0.9; } .sx-btn-sm { font-size: 12px; padding: 6px 14px; } .sx-btn-lg { font-size: 15px; padding: 13px 28px; } .sx-btn-full { width: 100%; } /* ── Form Inputs ──────────────────────────────────────────────────────────── */ .sx-input, .sx-select, .sx-textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--sx-border); border-radius: var(--sx-radius-sm); font-family: 'Inter', sans-serif; font-size: 14px; color: var(--sx-text); background: #FFFFFF; outline: none; transition: border-color var(--sx-t-fast), box-shadow var(--sx-t-fast); } .sx-input:focus, .sx-select:focus, .sx-textarea:focus { border-color: var(--sx-coral); box-shadow: 0 0 0 3px rgba(240,90,40,0.1); } .sx-input.error, .sx-select.error, .sx-textarea.error { border-color: var(--sx-danger); } .sx-textarea { resize: vertical; min-height: 100px; } .sx-label { display: block; font-size: 13px; font-weight: 600; color: var(--sx-text); margin-bottom: 6px; } .sx-label .required { color: var(--sx-danger); margin-left: 2px; } .sx-field-hint { font-size: 12px; color: var(--sx-text-muted); margin-top: 4px; } /* ── Alert Banners ────────────────────────────────────────────────────────── */ .sx-alert { padding: 14px 18px; border-radius: var(--sx-radius-sm); font-size: 13px; font-weight: 500; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; } .sx-alert-error { background: var(--sx-danger-bg); color: var(--sx-danger); border: 1px solid #FCA5A5; } .sx-alert-success { background: var(--sx-success-bg); color: var(--sx-success); border: 1px solid #6EE7B7; } .sx-alert-warning { background: var(--sx-warning-bg); color: #92400E; border: 1px solid #FDE68A; } .sx-alert-info { background: var(--sx-coral-xlight); color: var(--sx-navy); border: 1px solid var(--sx-coral-light); } /* ── Modal ────────────────────────────────────────────────────────────────── */ .sx-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; } .sx-modal-overlay.open { display: flex; } .sx-modal { background: #FFFFFF; border-radius: var(--sx-radius-lg); padding: 32px; width: 480px; max-width: 90vw; max-height: 85vh; overflow-y: auto; box-shadow: var(--sx-shadow-xl); animation: modalIn 0.2s var(--sx-ease); } @keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .sx-modal h3 { font-size: 18px; font-weight: 700; color: var(--sx-text); margin-bottom: 20px; letter-spacing: -0.015em; } .sx-modal-field { margin-bottom: 16px; } .sx-modal-field label { display: block; font-size: 12px; font-weight: 600; color: var(--sx-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .sx-modal-info { background: var(--sx-surface-alt); border-radius: var(--sx-radius-sm); padding: 16px; margin-bottom: 18px; font-size: 13px; color: var(--sx-text); } .sx-modal-actions { display: flex; gap: 10px; margin-top: 24px; justify-content: flex-end; } /* ── Table ────────────────────────────────────────────────────────────────── */ .sx-table-wrap { background: #FFFFFF; border-radius: var(--sx-radius-md); border: 1px solid var(--sx-border); box-shadow: var(--sx-shadow-xs); overflow: auto; } .sx-table { width: 100%; border-collapse: collapse; font-size: 13px; } .sx-table thead tr { background: var(--sx-surface-alt); } .sx-table th { padding: 12px 18px; text-align: left; font-size: 11px; font-weight: 700; color: var(--sx-text-muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; border-bottom: 1px solid var(--sx-border); } .sx-table td { padding: 14px 18px; border-top: 1px solid var(--sx-border-light); vertical-align: middle; color: var(--sx-text); } .sx-table tbody tr { transition: background var(--sx-t-fast); } .sx-table tbody tr:hover td { background: var(--sx-coral-xlight); } /* ── Toast ────────────────────────────────────────────────────────────────── */ .sx-toast { position: fixed; bottom: 24px; right: 24px; background: var(--sx-navy); color: #fff; padding: 14px 22px; border-radius: var(--sx-radius-sm); font-size: 13px; font-weight: 600; box-shadow: var(--sx-shadow-lg); z-index: 9999; display: none; animation: toastIn 0.25s var(--sx-ease); } .sx-toast.show { display: block; } @keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ── Trust Badges (HIPAA, BAA) ────────────────────────────────────────────── */ .sx-trust-strip { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; padding: 28px 32px; background: var(--sx-surface-alt); border-top: 1px solid var(--sx-border); } .sx-trust-item { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--sx-text); letter-spacing: 0.01em; } .sx-trust-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 14px; } /* ── Section Divider ──────────────────────────────────────────────────────── */ .sx-divider { border: none; border-top: 1px solid var(--sx-border); margin: 24px 0; } /* ── Skeleton loading ─────────────────────────────────────────────────────── */ @keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .sx-skeleton { background: linear-gradient(90deg, var(--sx-surface-alt) 0%, var(--sx-border-light) 50%, var(--sx-surface-alt) 100%); background-size: 200px 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 4px; } /* ── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .sx-sidebar { transform: translateX(-100%); transition: transform var(--sx-t-normal); } .sx-sidebar.open { transform: translateX(0); } .sx-main { margin-left: 0; } :root { --sx-sidebar-w: 0px; } } /* ── Scrollbar (platform panels) ──────────────────────────────────────────── */ .sx-scroll::-webkit-scrollbar { width: 5px; } .sx-scroll::-webkit-scrollbar-track { background: transparent; } .sx-scroll::-webkit-scrollbar-thumb { background: var(--sx-border); border-radius: 3px; } .sx-scroll::-webkit-scrollbar-thumb:hover { background: var(--sx-text-muted); } /* ── Empty States ──────────────────────────────────────────────────────────── */ /* Reusable empty state — centered in content area, muted icon + headline + body. Usage: wrap in a container that defines the bounding box. Copy rules: sentence-case, no exclamation, no emoji. */ .sx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; } .sx-empty-icon { font-size: 36px; color: var(--sx-border); margin-bottom: 16px; line-height: 1; } .sx-empty-title { font-size: 16px; font-weight: 700; color: var(--sx-text); margin-bottom: 8px; letter-spacing: -0.01em; } .sx-empty-body { font-size: 13px; color: var(--sx-text-muted); max-width: 360px; line-height: 1.55; margin-bottom: 0; } .sx-empty-body + .sx-empty-cta, .sx-empty-title + .sx-empty-cta { margin-top: 20px; } /* CTA button used within empty states — uses dusty rose accent */ .sx-empty-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--sx-coral); color: #fff; border: none; border-radius: var(--sx-radius-sm); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all var(--sx-t-fast); } .sx-empty-cta:hover { background: var(--sx-coral-hover); } /* Inline zero-match state — replaces the count panel content, no box */ .sx-zero-match { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; } .sx-zero-match-icon { font-size: 32px; color: var(--sx-border); margin-bottom: 14px; line-height: 1; } .sx-zero-match-title { font-size: 15px; font-weight: 700; color: var(--sx-text); margin-bottom: 8px; } .sx-zero-match-body { font-size: 13px; color: var(--sx-text-muted); line-height: 1.55; max-width: 300px; }