/* * Audience design system, applied to SendPortal (Bootstrap 4 UI). * Tokens mirror aptivada/audience-ui — the UX Bible + packages/ui/src/styles/tokens.css * (commit faa1524). Light mode. Loaded AFTER the stock styles so these win. * * Philosophy (from the UX Bible, "Brand through restraint"): neutral/white * surfaces with subtle borders; purple (#8a33ea) is reserved for primary * actions and active states only — never decorative. * * Figtree is loaded via a preconnected in the page * (faster than an @import here, which would be render-blocking). */ :root { --aud-bg: #ffffff; --aud-card: #ffffff; /* elevated surface (cards, inputs) */ --aud-fg: #18181b; /* zinc-900 text */ --aud-muted: #71717a; /* muted text */ --aud-secondary: #f4f4f5; /* zinc-100 */ --aud-accent: #e4e4e7; /* zinc-200 */ --aud-border: #e4e4e7; --aud-primary: #8a33ea; /* brand-600 */ --aud-primary-hover: #7822ce; --aud-primary-fg: #fafafa; --aud-active: #f3e8ff; /* brand-100, active nav background */ --aud-ring: rgba(24, 24, 27, 0.20); --aud-success: #16a34a; --aud-warning: #d97706; --aud-danger: #dc2626; --aud-info: #0284c7; --aud-sidebar: #f4f4f5; --aud-radius: 0.375rem; /* 6px */ --aud-radius-lg: 0.625rem; /* 10px (cards) */ color-scheme: light; /* light-only app; avoids dark-OS black flash */ } /* ---- Base ---- */ html { background-color: var(--aud-bg); } body { font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif !important; color: var(--aud-fg); background-color: var(--aud-bg); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 { font-family: 'Figtree', sans-serif; color: var(--aud-fg); font-weight: 700; } h3, h4, h5, .h3, .h4, .h5 { font-weight: 600; } .text-muted { color: var(--aud-muted) !important; } /* ---- Links ---- */ a:not(.btn) { color: var(--aud-primary); } a:not(.btn):hover { color: var(--aud-primary-hover); } /* ---- Buttons ---- */ .btn { border-radius: var(--aud-radius) !important; font-weight: 500; font-size: 14px; transition: all .15s ease; } .btn-primary, .bg-primary { background-color: var(--aud-primary) !important; border-color: var(--aud-primary) !important; color: var(--aud-primary-fg) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--aud-primary-hover) !important; border-color: var(--aud-primary-hover) !important; } .btn-outline-primary { color: var(--aud-primary) !important; border-color: var(--aud-primary) !important; background-color: var(--aud-card) !important; } .btn-outline-primary:hover { background-color: rgba(138, 51, 234, 0.10) !important; color: var(--aud-primary) !important; } .btn-secondary { background-color: var(--aud-secondary) !important; border-color: var(--aud-border) !important; color: var(--aud-fg) !important; } .btn-secondary:hover { background-color: var(--aud-accent) !important; } .btn-success { background-color: var(--aud-success) !important; border-color: var(--aud-success) !important; } .btn-danger { background-color: var(--aud-danger) !important; border-color: var(--aud-danger) !important; } .text-primary { color: var(--aud-primary) !important; } /* ---- Focus ring (audience-ui uses a 3px ring) ---- */ .form-control:focus, .custom-select:focus, .btn:focus, .btn.focus { border-color: #a1a1aa !important; box-shadow: 0 0 0 3px var(--aud-ring) !important; } /* ---- Inputs ---- */ .form-control, .custom-select, .custom-file-label { border-radius: var(--aud-radius) !important; border: 1px solid var(--aud-border) !important; background-color: var(--aud-card) !important; color: var(--aud-fg); font-size: 14px; } .form-control::placeholder { color: var(--aud-muted); } label, .col-form-label { font-weight: 600; color: var(--aud-fg); } /* ---- Cards ---- */ .card { border-radius: var(--aud-radius-lg) !important; border: 1px solid var(--aud-border) !important; background-color: var(--aud-card) !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; } .card-header { background-color: var(--aud-card) !important; border-bottom: 1px solid var(--aud-border) !important; font-weight: 600; } /* ---- Tables ---- */ .table { color: var(--aud-fg); } .table thead th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aud-muted); border-top: none; border-bottom: 1px solid var(--aud-border); } .table td, .table th { border-top: 1px solid var(--aud-border); } .table-hover tbody tr:hover { background-color: var(--aud-secondary); } /* ---- Badges (pill + semantic) ---- */ .badge { border-radius: 9999px !important; font-weight: 500; padding: 0.30em 0.65em; } .badge-primary { background-color: var(--aud-primary) !important; color: var(--aud-primary-fg) !important; } .badge-secondary { background-color: var(--aud-secondary) !important; color: var(--aud-fg) !important; } .badge-success { background-color: var(--aud-success) !important; color: #f0fdf4 !important; } .badge-warning { background-color: var(--aud-warning) !important; color: #fffbeb !important; } .badge-danger { background-color: var(--aud-danger) !important; color: #fef2f2 !important; } .badge-info { background-color: var(--aud-info) !important; color: #f0f9ff !important; } .text-success { color: var(--aud-success) !important; } .text-warning { color: var(--aud-warning) !important; } .text-danger { color: var(--aud-danger) !important; } .text-info { color: var(--aud-info) !important; } /* ---- Pagination ---- */ .page-link { color: var(--aud-primary); border-color: var(--aud-border); } .page-item.active .page-link { background-color: var(--aud-primary) !important; border-color: var(--aud-primary) !important; } /* ---- Tabs / pills ---- */ .nav-pills .nav-link.active { background-color: var(--aud-primary) !important; } .nav-tabs .nav-link.active { color: var(--aud-primary); border-bottom: 2px solid var(--aud-primary); } /* ---- Sidebar: neutral surface, dark text, purple active ---- SendPortal styles these as white text at high specificity (.sidebar li.nav-item a.nav-link), built for its old dark-purple sidebar — so we match that specificity and use !important to recolor for the light bg. */ .bg-purple-100 { background-color: var(--aud-sidebar) !important; } .sidebar li.nav-item a.nav-link { color: var(--aud-fg) !important; font-weight: 600 !important; border-left-color: transparent !important; } .sidebar li.nav-item a.nav-link .fas, .sidebar li.nav-item a.nav-link .fa, .sidebar li.nav-item a.nav-link i { color: var(--aud-muted) !important; } .sidebar li.nav-item a.nav-link:hover { color: var(--aud-primary) !important; background: var(--aud-accent) !important; border-left-color: var(--aud-accent) !important; } .sidebar li.nav-item a.nav-link:hover .fas, .sidebar li.nav-item a.nav-link:hover i { color: var(--aud-primary) !important; } .sidebar li.nav-item.active a.nav-link { color: var(--aud-primary) !important; background: var(--aud-active) !important; /* brand-100, "purple for active states" */ border-left-color: var(--aud-primary) !important; } .sidebar li.nav-item.active a.nav-link .fas, .sidebar li.nav-item.active a.nav-link i { color: var(--aud-primary) !important; } /* ---- Sidebar section labels (overline dividing Clients / Internal / Workspace) ---- */ .sidebar .nav-section-label { display: block; padding: 1rem 0.75rem 0.25rem; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--aud-muted); } /* ---- Logo sizing ---- */ .logo img { max-width: 100%; height: auto; } .sidebar .logo img { width: 48px !important; } /* the small "A" mark, not 175px */