/* ============================================================ CAM 2.0 - Premium Dark Gold Brand System Content Automation Machine CRM Production CSS - Complete Visual Identity ============================================================ */ /* Alpine.js: hide x-cloak elements until Alpine initializes so x-show toggles (logo mark, modals, chat panel) don't flash before hydration. */ [x-cloak] { display: none !important; } /* ------------------------------------------------------------ 1. CSS CUSTOM PROPERTIES ------------------------------------------------------------ */ :root { color-scheme: light; /* Backgrounds (light: cream ground / white surfaces) */ --bg-primary: #FAF8F3; --bg-secondary: #FFFFFF; --bg-tertiary: #F4EFFE; --bg-card: #FFFFFF; --bg-card-hover: #F7F4FD; --bg-input: #FFFFFF; --bg-overlay: rgba(26, 20, 38, 0.45); /* Gold / Violet Palette */ --gold: #6D28D9; --gold-hover: #5B21B6; --gold-champagne: #8B5CF6; --gold-bronze: #A87A2A; --gold-tint: rgba(109, 40, 217, 0.07); --gold-glow: rgba(109, 40, 217, 0.14); --crown-gold: #A87A2A; /* Text (light: dark ink on cream) */ --text-primary: #1A1712; --text-muted: #514B60; --text-secondary: #514B60; --text-subtle: #8A8398; --text-inverse: #FFFFFF; /* Borders */ --border: #E8E2F1; --border-light: #F1ECF8; --border-gold: rgba(109, 40, 217, 0.30); /* Status */ --success: #22c55e; --success-bg: rgba(34, 197, 94, 0.10); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.10); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.10); /* Typography */ --font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Newsreader', 'Palatino', Georgia, serif; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* Radius */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(26, 20, 38, 0.06); --shadow-md: 0 4px 16px rgba(26, 20, 38, 0.08); --shadow-lg: 0 12px 40px rgba(26, 20, 38, 0.10); --shadow-gold: 0 6px 22px rgba(109, 40, 217, 0.16); /* Layout */ --sidebar-width: 200px; --sidebar-collapsed: 64px; --header-height: 64px; --chat-width: 320px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Z-index */ --z-sidebar: 100; --z-header: 90; --z-dropdown: 200; --z-modal: 300; --z-toast: 400; --z-chat: 150; } /* ------------------------------------------------------------ 1B. DARK THEME OVERRIDE (same variable names, dark values) Activated by [data-theme="dark"] on , set pre-paint by the no-flash script in base.html / base_admin.html. ------------------------------------------------------------ */ [data-theme="dark"] { color-scheme: dark; /* Backgrounds: charcoal/near-black layers */ --bg-primary: #12100E; --bg-secondary: #1A1712; --bg-tertiary: #221D2B; --bg-card: #1E1B21; --bg-card-hover: #272230; --bg-input: #1E1B21; --bg-overlay: rgba(0, 0, 0, 0.7); /* Gold / Violet Palette: brighter accent for dark contrast (#8250E8: 4.93:1 with white button text, 3.85:1 vs --bg-primary; WCAG AA both) */ --gold: #8250E8; --gold-hover: #A78BFA; --gold-champagne: #E4D3A2; --gold-bronze: #C9A227; --gold-tint: rgba(139, 92, 246, 0.12); --gold-glow: rgba(139, 92, 246, 0.28); --crown-gold: #C9A227; /* Text: light text on dark surfaces */ --text-primary: #F5F0E8; --text-muted: #C8C0B4; --text-secondary: #C8C0B4; --text-subtle: #9E978C; --text-inverse: #FFFFFF; /* Borders */ --border: #33303A; --border-light: #262229; --border-gold: rgba(139, 92, 246, 0.35); /* Status (kept consistent, slightly punchier backgrounds read fine on dark) */ --success: #22c55e; --success-bg: rgba(34, 197, 94, 0.16); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.16); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.16); /* Shadows: deeper on dark ground */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55); --shadow-gold: 0 0 20px rgba(139, 92, 246, 0.25); } /* ------------------------------------------------------------ 2. BASE RESET ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-family); font-weight: var(--font-weight-normal); color: var(--text-primary); background-color: var(--bg-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; } /* Smooth light/dark theme swap for chrome surfaces, skipped for reduced-motion users */ @media (prefers-reduced-motion: no-preference) { body, .sidebar, .card, .stat-card, .deal-card, .chat-panel, .modal, input, select, textarea { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } } a { color: var(--gold); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--gold-champagne); } img { max-width: 100%; height: auto; display: block; } button { cursor: pointer; font-family: inherit; border: none; background: none; } input, select, textarea { font-family: inherit; font-size: inherit; } ul, ol { list-style: none; } ::selection { background: var(--gold); color: var(--text-inverse); } /* ------------------------------------------------------------ 3. TYPOGRAPHY ------------------------------------------------------------ */ h1, h2, h3, h4 { color: var(--text-primary); font-weight: var(--font-weight-bold); line-height: 1.25; letter-spacing: -0.01em; } h1 { font-size: 2rem; margin-bottom: var(--space-5); } h2 { font-size: 1.5rem; margin-bottom: var(--space-4); } h3 { font-size: 1.25rem; margin-bottom: var(--space-3); } h4 { font-size: 1.0625rem; margin-bottom: var(--space-2); } p { color: var(--text-muted); margin-bottom: var(--space-3); line-height: 1.7; } .text-sm { font-size: 0.8125rem; line-height: 1.5; } .text-lg { font-size: 1.125rem; line-height: 1.6; } .text-xl { font-size: 1.375rem; line-height: 1.4; } .text-gold { color: var(--gold); } .text-muted { color: var(--text-muted); } .text-subtle { color: var(--text-subtle); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .text-center { text-align: center; } .text-right { text-align: right; } .text-uppercase { text-transform: uppercase; letter-spacing: 0.06em; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .font-medium { font-weight: var(--font-weight-medium); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); } /* ------------------------------------------------------------ 4. LAYOUT UTILITIES ------------------------------------------------------------ */ .container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-6); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .flex-1 { flex: 1; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .ml-1 { margin-left: var(--space-1); } .ml-2 { margin-left: var(--space-2); } .ml-3 { margin-left: var(--space-3); } .ml-4 { margin-left: var(--space-4); } .ml-5 { margin-left: var(--space-5); } .ml-6 { margin-left: var(--space-6); } .mr-1 { margin-right: var(--space-1); } .mr-2 { margin-right: var(--space-2); } .mr-3 { margin-right: var(--space-3); } .mr-4 { margin-right: var(--space-4); } .mr-5 { margin-right: var(--space-5); } .mr-6 { margin-right: var(--space-6); } .p-1 { padding: var(--space-1); } .p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); } .p-6 { padding: var(--space-6); } .w-full { width: 100%; } .h-full { height: 100%; } .hidden { display: none; } .block { display: block; } .inline-block { display: inline-block; } .relative { position: relative; } .absolute { position: absolute; } .overflow-hidden { overflow: hidden; } /* ------------------------------------------------------------ 5. SIDEBAR ------------------------------------------------------------ */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: var(--z-sidebar); transition: width var(--transition-base); overflow: hidden; } .sidebar.collapsed { width: var(--sidebar-collapsed); } .sidebar-brand { display: flex; align-items: center; gap: var(--space-3); padding: 20px 16px; border-bottom: 1px solid var(--border); min-height: var(--header-height); } .sidebar-brand-icon { width: 32px; height: 32px; background: linear-gradient(135deg, var(--gold), var(--gold-bronze)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); color: var(--text-inverse); font-size: 0.875rem; flex-shrink: 0; box-shadow: 0 2px 8px rgba(109, 40, 217, 0.25); } .sidebar-brand-name { font-size: 1rem; font-weight: var(--font-weight-bold); color: var(--text-primary); white-space: nowrap; line-height: 1.2; } .sidebar-brand-tagline { font-size: 0.6875rem; color: var(--text-subtle); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.08em; } .sidebar.collapsed .sidebar-brand-name, .sidebar.collapsed .sidebar-brand-tagline { display: none; } .sidebar-nav { flex: 1; padding: var(--space-3) 0; overflow-y: auto; overflow-x: hidden; } .sidebar-section-title { padding: var(--space-4) var(--space-4) var(--space-2); font-size: 0.6875rem; font-weight: var(--font-weight-semibold); color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.1em; } .sidebar.collapsed .sidebar-section-title { display: none; } .sidebar-link { display: flex; align-items: center; gap: var(--space-3); padding: 10px 16px; color: var(--text-muted); font-size: 0.875rem; font-weight: var(--font-weight-medium); transition: all var(--transition-fast); position: relative; white-space: nowrap; border-left: 3px solid transparent; margin: 1px 0; } .sidebar-link:hover { color: var(--text-primary); background: var(--gold-tint); border-left-color: rgba(109, 40, 217, 0.4); } .sidebar-link.active { color: var(--gold); background: var(--gold-tint); border-left-color: var(--gold); font-weight: var(--font-weight-semibold); } .sidebar-link .icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; opacity: 0.8; } .sidebar-link.active .icon { opacity: 1; } .sidebar-link .badge-count { margin-left: auto; background: var(--gold-tint); color: var(--gold); font-size: 0.6875rem; font-weight: var(--font-weight-semibold); padding: 2px 8px; border-radius: var(--radius-full); min-width: 20px; text-align: center; } .sidebar.collapsed .sidebar-link span:not(.icon), .sidebar.collapsed .sidebar-link .badge-count { display: none; } .sidebar.collapsed .sidebar-link { justify-content: center; padding: 12px; border-left-width: 0; } .sidebar-footer { padding: var(--space-4) var(--space-4); border-top: 1px solid var(--border); display: flex; align-items: center; gap: var(--space-3); } .sidebar-footer .user-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--gold), var(--gold-bronze)); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: var(--font-weight-bold); color: var(--text-inverse); flex-shrink: 0; } .sidebar-footer .user-info { overflow: hidden; } .sidebar-footer .user-name { font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-footer .user-role { font-size: 0.6875rem; color: var(--text-subtle); } .sidebar.collapsed .sidebar-footer .user-info { display: none; } /* ------------------------------------------------------------ 6. MAIN CONTENT ------------------------------------------------------------ */ .main-content { margin-left: var(--sidebar-width); padding: 24px 32px; min-height: 100vh; transition: margin-left var(--transition-base); } .sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-collapsed); } /* ------------------------------------------------------------ 7. PAGE HEADER ------------------------------------------------------------ */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-4); } .page-header .page-title { font-size: 1.625rem; font-weight: var(--font-weight-bold); color: var(--text-primary); margin: 0; } .page-header .page-subtitle { font-size: 0.875rem; color: var(--text-subtle); margin-top: var(--space-1); } .page-header .page-actions { display: flex; align-items: center; gap: var(--space-3); } .page-header .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; color: var(--text-subtle); margin-bottom: var(--space-2); } .page-header .breadcrumb a { color: var(--text-subtle); } .page-header .breadcrumb a:hover { color: var(--gold); } .page-header .breadcrumb .separator { color: var(--border); } /* ------------------------------------------------------------ 8. CARDS / WIDGETS ------------------------------------------------------------ */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; transition: all var(--transition-base); } .card:hover { background: var(--bg-card-hover); border-color: var(--border-gold); box-shadow: var(--shadow-gold); } .card-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-light); } .card-title { font-size: 1rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: 0; } .card-body { color: var(--text-muted); font-size: 0.875rem; line-height: 1.7; } .card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px solid var(--border-light); } .card-flat { border: none; background: transparent; } .card-flat:hover { background: var(--gold-tint); box-shadow: none; } /* ------------------------------------------------------------ 9. STAT CARDS ------------------------------------------------------------ */ .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; display: flex; align-items: flex-start; gap: var(--space-4); transition: all var(--transition-base); } .stat-card:hover { border-color: var(--border-gold); box-shadow: var(--shadow-gold); transform: translateY(-1px); } .stat-icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--gold-tint); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--gold); flex-shrink: 0; } .stat-icon.success { background: var(--success-bg); color: var(--success); } .stat-icon.warning { background: var(--warning-bg); color: var(--warning); } .stat-icon.danger { background: var(--danger-bg); color: var(--danger); } .stat-content { flex: 1; min-width: 0; } .stat-value { font-size: 1.75rem; font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: 1.2; letter-spacing: -0.02em; } .stat-label { font-size: 0.875rem; color: var(--text-muted); margin-top: var(--space-1); } .stat-change { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: var(--font-weight-semibold); margin-top: var(--space-2); padding: 2px 8px; border-radius: var(--radius-full); } .stat-change.positive { color: var(--success); background: var(--success-bg); } .stat-change.negative { color: var(--danger); background: var(--danger-bg); } .stat-change.neutral { color: var(--text-subtle); background: var(--gold-tint); } /* ------------------------------------------------------------ 10. BUTTONS ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 20px; font-size: 0.875rem; font-weight: var(--font-weight-semibold); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; text-decoration: none; line-height: 1.4; } .btn:active { transform: scale(0.97); } .btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-primary { background: var(--gold); color: var(--text-inverse); border-color: var(--gold); box-shadow: 0 2px 8px rgba(109, 40, 217, 0.25); } .btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); box-shadow: 0 4px 16px rgba(109, 40, 217, 0.35); transform: translateY(-1px); } .btn-primary:active { transform: scale(0.97); } .btn-secondary { background: var(--gold-tint); color: var(--text-primary); border-color: var(--border); } .btn-secondary:hover { background: var(--gold-tint); color: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px rgba(109, 40, 217, 0.15); } .btn-outline { background: transparent; color: var(--text-muted); border-color: var(--border); } .btn-outline:hover { color: var(--gold); border-color: var(--gold); background: var(--gold-tint); } .btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .btn-ghost:hover { color: var(--text-primary); background: var(--gold-tint); } .btn-danger { background: var(--danger); color: var(--text-inverse); border-color: var(--danger); } .btn-danger:hover { background: #dc2626; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); } .btn-success { background: var(--success); color: var(--text-inverse); border-color: var(--success); } .btn-success:hover { background: #16a34a; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); } .btn-sm { padding: 6px 14px; font-size: 0.8125rem; border-radius: var(--radius-sm); } .btn-lg { padding: 14px 28px; font-size: 1rem; border-radius: var(--radius-md); } .btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; } .btn-icon.btn-sm { width: 28px; height: 28px; } .btn-icon.btn-lg { width: 44px; height: 44px; } /* ------------------------------------------------------------ 11. FORM CONTROLS ------------------------------------------------------------ */ .form-group { margin-bottom: var(--space-5); } .form-label { display: block; font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--text-muted); margin-bottom: var(--space-2); letter-spacing: 0.01em; } .form-label .required { color: var(--danger); margin-left: 2px; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="datetime-local"], select, textarea { width: 100%; padding: 10px 14px; font-size: 0.875rem; color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); outline: none; transition: all var(--transition-fast); line-height: 1.5; } input::placeholder, textarea::placeholder { color: var(--text-subtle); } input:hover, select:hover, textarea:hover { border-color: #3E414A; } input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint), 0 0 12px rgba(109, 40, 217, 0.1); } input:disabled, select:disabled, textarea:disabled { opacity: 0.5; cursor: not-allowed; background: var(--bg-card); } textarea { min-height: 100px; resize: vertical; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239E978C' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; } .form-help { font-size: 0.75rem; color: var(--text-subtle); margin-top: var(--space-2); } .form-error { font-size: 0.75rem; color: var(--danger); margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-1); } input.error, select.error, textarea.error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); } .form-row { display: flex; gap: var(--space-4); } .form-row .form-group { flex: 1; } .checkbox-group, .radio-group { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; } .checkbox-group input, .radio-group input { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; } /* ------------------------------------------------------------ 12. SEARCH BAR ------------------------------------------------------------ */ .search-bar { position: relative; max-width: 400px; width: 100%; } .search-bar .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); font-size: 0.875rem; pointer-events: none; } .search-bar input { padding-left: 40px; background: var(--bg-card); border-color: var(--border-light); } .search-bar input:focus { border-color: var(--gold); background: var(--bg-input); box-shadow: 0 0 0 3px var(--gold-tint); } .search-bar .search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--text-subtle); cursor: pointer; border-radius: var(--radius-full); transition: all var(--transition-fast); } .search-bar .search-clear:hover { color: var(--text-primary); background: var(--gold-tint); } /* ------------------------------------------------------------ 13. TABLES ------------------------------------------------------------ */ .table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); } .table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table thead { background: var(--bg-secondary); } .table thead th { padding: 12px 16px; text-align: left; font-weight: var(--font-weight-semibold); color: var(--text-subtle); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none; } .table thead th.sortable { cursor: pointer; transition: color var(--transition-fast); } .table thead th.sortable:hover { color: var(--gold); } .table thead th.sorted { color: var(--gold); } .table tbody tr { border-bottom: 1px solid var(--border-light); transition: background var(--transition-fast); } .table tbody tr:nth-child(even) { background: var(--bg-card-hover); } .table tbody tr:hover { background: var(--gold-tint); } .table tbody td { padding: 14px 16px; color: var(--text-muted); vertical-align: middle; } .table tbody td:first-child { color: var(--text-primary); font-weight: var(--font-weight-medium); } .table tbody tr:last-child { border-bottom: none; } .table-actions { display: flex; align-items: center; gap: var(--space-2); } .table-empty { text-align: center; padding: 48px 24px; color: var(--text-subtle); } /* ------------------------------------------------------------ 14. BADGES ------------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 0.6875rem; font-weight: var(--font-weight-semibold); border-radius: var(--radius-full); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; } .badge-lead { color: var(--gold); background: transparent; border: 1px solid var(--gold); } .badge-customer { color: var(--success); background: var(--success-bg); border: 1px solid rgba(34, 197, 94, 0.25); } .badge-vip { color: var(--text-inverse); background: linear-gradient(135deg, var(--gold), var(--gold-hover)); border: none; box-shadow: 0 2px 6px rgba(109, 40, 217, 0.3); } .badge-inactive { color: var(--text-subtle); background: rgba(158, 151, 140, 0.1); border: 1px solid rgba(158, 151, 140, 0.2); } .badge-won { color: var(--text-inverse); background: var(--success); border: none; } .badge-lost { color: var(--text-inverse); background: var(--danger); border: none; } .badge-prospect { color: var(--gold-champagne); background: var(--gold-tint); border: 1px solid rgba(109, 40, 217, 0.2); } .badge-negotiation { color: var(--warning); background: var(--warning-bg); border: 1px solid rgba(245, 158, 11, 0.2); } .badge-dot { width: 8px; height: 8px; border-radius: var(--radius-full); margin-right: 6px; display: inline-block; } /* Shared success indicator: 64px circle with a centered checkmark. Reusable across confirmation states (form success, completed steps, etc). Markup: ✓ or an inline child. */ .success-badge { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--success-bg); color: var(--success); font-size: 2rem; line-height: 1; } /* ------------------------------------------------------------ 15. PIPELINE / DEAL CARDS ------------------------------------------------------------ */ .pipeline-container { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-4); min-height: 500px; align-items: flex-start; } .pipeline-column { min-width: 280px; max-width: 320px; flex: 1; background: var(--bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--border-light); display: flex; flex-direction: column; max-height: calc(100vh - 200px); } .pipeline-header { padding: 16px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .pipeline-stage-name { font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.05em; } .pipeline-stage-meta { display: flex; align-items: center; gap: var(--space-3); } .pipeline-stage-count { font-size: 0.6875rem; color: var(--text-subtle); background: var(--bg-card); padding: 2px 8px; border-radius: var(--radius-full); } .pipeline-stage-value { font-size: 0.6875rem; font-weight: var(--font-weight-semibold); color: var(--gold); } .pipeline-cards { padding: var(--space-3); overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--space-2); } .deal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; cursor: pointer; transition: all var(--transition-base); } .deal-card:hover { border-color: var(--border-gold); box-shadow: var(--shadow-gold); transform: translateY(-2px); } .deal-card-title { font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-2); line-height: 1.3; } .deal-card-contact { font-size: 0.75rem; color: var(--text-subtle); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-1); } .deal-card-footer { display: flex; align-items: center; justify-content: space-between; } .deal-card-value { font-size: 0.875rem; font-weight: var(--font-weight-bold); color: var(--gold); } .deal-card-date { font-size: 0.6875rem; color: var(--text-subtle); } /* Drag and Drop */ .deal-card[draggable="true"] { cursor: grab; } .deal-card[draggable="true"]:active { cursor: grabbing; } .deal-card.dragging { opacity: 0.4; transform: scale(0.95); } .pipeline-cards.drag-over { background: rgba(109, 40, 217, 0.08); border: 2px dashed var(--gold); border-radius: 8px; min-height: 100px; } .deal-card-tags { display: flex; gap: var(--space-1); margin-top: var(--space-2); flex-wrap: wrap; } .deal-card-tag { font-size: 0.625rem; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--gold-tint); color: var(--gold); } .pipeline-add-deal { padding: var(--space-3); margin: var(--space-2) var(--space-3) var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius-md); text-align: center; color: var(--text-subtle); font-size: 0.8125rem; cursor: pointer; transition: all var(--transition-fast); } .pipeline-add-deal:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-tint); } /* ------------------------------------------------------------ 16. ACTIVITY TIMELINE ------------------------------------------------------------ */ .timeline { position: relative; padding-left: 28px; } .timeline::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--border); border-radius: 1px; } .timeline-item { position: relative; padding-bottom: var(--space-5); } .timeline-item:last-child { padding-bottom: 0; } .timeline-dot { position: absolute; left: -24px; top: 4px; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--gold); border: 2px solid var(--bg-primary); box-shadow: 0 0 0 3px var(--gold-tint); z-index: 1; } .timeline-dot.success { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); } .timeline-dot.warning { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); } .timeline-dot.danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); } .timeline-content { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 12px 16px; } .timeline-content:hover { border-color: var(--border-gold); } .timeline-title { font-size: 0.875rem; font-weight: var(--font-weight-medium); color: var(--text-primary); margin-bottom: var(--space-1); } .timeline-description { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; } .timeline-time { font-size: 0.6875rem; color: var(--text-subtle); margin-top: var(--space-2); } /* ------------------------------------------------------------ 17. TOASTS ------------------------------------------------------------ */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-3); pointer-events: none; } .toast { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 20px; min-width: 320px; max-width: 420px; display: flex; align-items: flex-start; gap: var(--space-3); box-shadow: var(--shadow-lg); pointer-events: auto; animation: slideIn 0.35s ease forwards; border-left: 4px solid var(--border); } .toast.hiding { animation: slideOut 0.3s ease forwards; } .toast-success { border-left-color: var(--success); } .toast-error { border-left-color: var(--danger); } .toast-warning { border-left-color: var(--warning); } .toast-info { border-left-color: var(--gold); } .toast-icon { font-size: 1.125rem; flex-shrink: 0; margin-top: 1px; } .toast-success .toast-icon { color: var(--success); } .toast-error .toast-icon { color: var(--danger); } .toast-warning .toast-icon { color: var(--warning); } .toast-info .toast-icon { color: var(--gold); } .toast-body { flex: 1; } .toast-title { font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: 2px; } .toast-message { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.4; } .toast-close { color: var(--text-subtle); cursor: pointer; font-size: 1rem; padding: 2px; transition: color var(--transition-fast); flex-shrink: 0; } .toast-close:hover { color: var(--text-primary); } .toast-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--gold); border-radius: 0 0 0 var(--radius-md); animation: toastProgress 5s linear forwards; } /* ------------------------------------------------------------ 18. MODALS ------------------------------------------------------------ */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-5); animation: fadeIn 0.2s ease; } .modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); width: 100%; max-width: 500px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: slideUp 0.3s ease; overflow: hidden; } .modal-lg { max-width: 700px; } .modal-xl { max-width: 900px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border-light); flex-shrink: 0; } .modal-title { font-size: 1.125rem; font-weight: var(--font-weight-bold); color: var(--gold); margin: 0; } .modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-subtle); transition: all var(--transition-fast); font-size: 1.125rem; cursor: pointer; } .modal-close:hover { color: var(--text-primary); background: var(--gold-tint); } .modal-body { padding: 24px; overflow-y: auto; flex: 1; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: 16px 24px; border-top: 1px solid var(--border-light); flex-shrink: 0; } /* ------------------------------------------------------------ 19. CHAT PANEL ------------------------------------------------------------ */ .chat-panel { position: fixed; right: 0; top: 0; bottom: 0; width: var(--chat-width); background: var(--bg-secondary); border-left: 1px solid var(--border); z-index: var(--z-chat); display: flex; flex-direction: column; } .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .chat-header-title { display: flex; align-items: center; gap: var(--space-2); font-size: 0.9375rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); } .chat-header-title .status-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--success); animation: pulse 2s infinite; } .chat-messages { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .chat-message { max-width: 85%; padding: 10px 14px; border-radius: var(--radius-lg); font-size: 0.8125rem; line-height: 1.6; animation: fadeIn 0.2s ease; } .chat-message.user { align-self: flex-end; background: linear-gradient(135deg, var(--gold), var(--gold-hover)); color: var(--text-inverse); border-bottom-right-radius: 4px; } .chat-message.assistant { align-self: flex-start; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-light); border-bottom-left-radius: 4px; } .chat-message .message-time { font-size: 0.625rem; opacity: 0.6; margin-top: var(--space-1); display: block; } .chat-message.assistant .message-time { color: var(--text-subtle); } .chat-typing { align-self: flex-start; padding: 12px 16px; background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-light); display: flex; gap: 4px; } .chat-typing span { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--text-subtle); animation: chatBounce 1.4s infinite; } .chat-typing span:nth-child(2) { animation-delay: 0.2s; } .chat-typing span:nth-child(3) { animation-delay: 0.4s; } .chat-input-wrapper { padding: 16px; border-top: 1px solid var(--border); display: flex; gap: var(--space-2); flex-shrink: 0; } .chat-input { flex: 1; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.8125rem; outline: none; transition: border-color var(--transition-fast); } .chat-input:focus { border-color: var(--gold); } .chat-send { width: 40px; height: 40px; background: linear-gradient(135deg, var(--gold), var(--gold-hover)); border: none; border-radius: var(--radius-md); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; } .chat-send:hover { box-shadow: 0 2px 12px rgba(109, 40, 217, 0.3); transform: scale(1.05); } .chat-toggle { position: fixed; bottom: 24px; right: 24px; width: 52px; height: 52px; background: linear-gradient(135deg, var(--gold), var(--gold-hover)); border: none; border-radius: var(--radius-full); color: var(--text-inverse); font-size: 1.25rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: var(--z-chat); box-shadow: 0 4px 20px rgba(109, 40, 217, 0.35); transition: all var(--transition-base); } .chat-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(109, 40, 217, 0.45); } .chat-toggle .notification-dot { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; background: var(--danger); border-radius: var(--radius-full); border: 2px solid var(--bg-primary); font-size: 0; } /* ------------------------------------------------------------ 20. EMPTY STATES ------------------------------------------------------------ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 32px; text-align: center; } .empty-state-icon { width: 72px; height: 72px; border-radius: var(--radius-full); background: var(--gold-tint); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--gold); margin-bottom: var(--space-5); } .empty-state-heading { font-size: 1.25rem; font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: var(--space-2); } .empty-state-description { font-size: 0.875rem; color: var(--text-subtle); max-width: 400px; margin-bottom: var(--space-5); line-height: 1.6; } .empty-state .btn { margin-top: var(--space-2); } /* ------------------------------------------------------------ 21. DROPDOWN / SELECT ------------------------------------------------------------ */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) 0; box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all var(--transition-fast); } .dropdown.open .dropdown-menu, .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-menu.right { left: auto; right: 0; } .dropdown-item { display: flex; align-items: center; gap: var(--space-3); padding: 8px 16px; font-size: 0.8125rem; color: var(--text-muted); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .dropdown-item:hover { background: var(--gold-tint); color: var(--text-primary); } .dropdown-item.active { color: var(--gold); background: var(--gold-tint); } .dropdown-item.danger { color: var(--danger); } .dropdown-item.danger:hover { background: var(--danger-bg); } .dropdown-divider { height: 1px; background: var(--border-light); margin: var(--space-2) 0; } .dropdown-header { padding: 8px 16px 4px; font-size: 0.6875rem; font-weight: var(--font-weight-semibold); color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.08em; } /* ------------------------------------------------------------ 22. TABS ------------------------------------------------------------ */ .tabs { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); overflow-x: auto; } .tab-item { padding: 12px 20px; font-size: 0.875rem; font-weight: var(--font-weight-medium); color: var(--text-subtle); cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--transition-fast); white-space: nowrap; position: relative; top: 1px; } .tab-item:hover { color: var(--text-primary); } .tab-item.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: var(--font-weight-semibold); } .tab-item .tab-count { margin-left: var(--space-2); font-size: 0.6875rem; background: var(--gold-tint); color: var(--gold); padding: 1px 7px; border-radius: var(--radius-full); } .tab-content { padding-top: var(--space-4); } /* ------------------------------------------------------------ 23. LOADING STATES ------------------------------------------------------------ */ .skeleton { background: linear-gradient( 90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-md); } .skeleton-text { height: 14px; margin-bottom: var(--space-2); border-radius: var(--radius-sm); } .skeleton-text:last-child { width: 60%; } .skeleton-title { height: 22px; width: 50%; margin-bottom: var(--space-3); } .skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); } .skeleton-card { height: 120px; border-radius: var(--radius-lg); } .spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--gold); border-radius: var(--radius-full); animation: spin 0.7s linear infinite; } .spinner-sm { width: 16px; height: 16px; border-width: 2px; } .spinner-lg { width: 40px; height: 40px; border-width: 4px; } .loading-overlay { position: absolute; inset: 0; background: rgba(11, 11, 13, 0.7); display: flex; align-items: center; justify-content: center; border-radius: inherit; z-index: 10; } .loading-text { color: var(--text-muted); font-size: 0.875rem; margin-top: var(--space-3); } /* ------------------------------------------------------------ 24. RESPONSIVE ------------------------------------------------------------ */ @media (max-width: 1200px) { .sidebar { width: var(--sidebar-collapsed); } .sidebar .sidebar-brand-name, .sidebar .sidebar-brand-tagline, .sidebar .sidebar-section-title, .sidebar .sidebar-link span:not(.icon), .sidebar .sidebar-link .badge-count, .sidebar .sidebar-footer .user-info { display: none; } .sidebar .sidebar-link { justify-content: center; padding: 12px; border-left-width: 0; } .main-content { margin-left: var(--sidebar-collapsed); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { :root { --sidebar-width: 0px; } .sidebar { width: 260px; transform: translateX(-100%); box-shadow: var(--shadow-lg); } .sidebar.mobile-open { transform: translateX(0); } .sidebar .sidebar-brand-name, .sidebar .sidebar-brand-tagline, .sidebar .sidebar-section-title, .sidebar .sidebar-link span:not(.icon), .sidebar .sidebar-link .badge-count, .sidebar .sidebar-footer .user-info { display: initial; } .sidebar .sidebar-link { justify-content: flex-start; padding: 10px 16px; border-left-width: 3px; } .main-content { margin-left: 0; padding: 16px; } .page-header { flex-direction: column; align-items: flex-start; } .page-header .page-actions { width: 100%; flex-wrap: wrap; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } /* Pipeline becomes vertical on mobile */ .pipeline-container { flex-direction: column; overflow-x: visible; min-height: auto; } .pipeline-column { min-width: auto; max-width: none; max-height: none; } .pipeline-cards { max-height: 300px; overflow-y: auto; } .pipeline-column.collapsed .pipeline-cards { display: none; } .pipeline-header { cursor: pointer; } /* Cards stack */ .stat-card { flex-direction: row; align-items: center; } /* Table scroll */ .table-wrapper { margin: 0 -16px; border-radius: 0; border-left: none; border-right: none; } /* Modal full width */ .modal { max-width: 100%; max-height: 100vh; border-radius: var(--radius-lg); margin: var(--space-4); } /* Chat full width */ .chat-panel { width: 100%; } .chat-toggle { bottom: 16px; right: 16px; } /* Toast adjustments */ .toast-container { left: 16px; right: 16px; bottom: 16px; } .toast { min-width: auto; max-width: none; } /* Search bar full width */ .search-bar { max-width: none; } .form-row { flex-direction: column; gap: 0; } /* Tabs scroll */ .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab-item { padding: 10px 16px; } } @media (max-width: 480px) { body { font-size: 14px; } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.0625rem; } .btn { padding: 8px 16px; font-size: 0.8125rem; } .btn-lg { padding: 12px 24px; } .stat-value { font-size: 1.375rem; } } /* ------------------------------------------------------------ 25. ANIMATIONS ------------------------------------------------------------ */ @keyframes slideIn { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100px); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes toastProgress { from { width: 100%; } to { width: 0%; } } @keyframes chatBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 8px rgba(109, 40, 217, 0.15); } 50% { box-shadow: 0 0 20px rgba(109, 40, 217, 0.3); } } @keyframes borderGlow { 0%, 100% { border-color: var(--border); } 50% { border-color: var(--border-gold); } } /* ------------------------------------------------------------ 26. SCROLLBAR ------------------------------------------------------------ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--gold-bronze); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* Firefox scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--gold-bronze) var(--bg-primary); } /* ------------------------------------------------------------ 27. LOGIN PAGE ------------------------------------------------------------ */ .login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-5); background: var(--bg-primary); background-image: radial-gradient(ellipse at 20% 50%, rgba(109, 40, 217, 0.04) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(109, 40, 217, 0.03) 0%, transparent 50%); } .login-card { background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: var(--radius-xl); padding: 40px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg), var(--shadow-gold); } .login-card .login-logo { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-6); } .login-card .login-logo-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--gold), var(--gold-bronze)); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: var(--font-weight-bold); color: var(--text-inverse); box-shadow: 0 4px 12px rgba(109, 40, 217, 0.3); } .login-card .login-logo-text { font-size: 1.375rem; font-weight: var(--font-weight-bold); color: var(--text-primary); } .login-card .login-title { font-size: 1.25rem; font-weight: var(--font-weight-bold); color: var(--text-primary); text-align: center; margin-bottom: var(--space-2); } .login-card .login-subtitle { font-size: 0.875rem; color: var(--text-subtle); text-align: center; margin-bottom: var(--space-6); } .login-card .form-group { margin-bottom: var(--space-4); } .login-card .login-remember { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); font-size: 0.8125rem; } .login-card .login-remember a { color: var(--gold); font-size: 0.8125rem; } .login-card .login-btn { width: 100%; padding: 12px; font-size: 0.9375rem; } .login-card .login-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; color: var(--text-subtle); font-size: 0.75rem; } .login-card .login-divider::before, .login-card .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .login-card .login-footer { text-align: center; font-size: 0.8125rem; color: var(--text-subtle); margin-top: var(--space-5); } /* ------------------------------------------------------------ 28. LANDING / SALES PAGE ------------------------------------------------------------ */ .hero-section { min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px var(--space-6); background: radial-gradient(ellipse at 50% 0%, rgba(109, 40, 217, 0.08) 0%, transparent 60%), var(--bg-primary); position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(109, 40, 217, 0.06) 0%, transparent 70%); pointer-events: none; } .hero-content { max-width: 780px; position: relative; z-index: 1; } .hero-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 16px; background: var(--gold-tint); border: 1px solid rgba(109, 40, 217, 0.2); border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--gold); margin-bottom: var(--space-5); } .hero-title { font-size: 3.5rem; font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: 1.15; margin-bottom: var(--space-5); letter-spacing: -0.02em; } .hero-title .highlight { background: linear-gradient(135deg, var(--gold), var(--gold-champagne)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: 1.25rem; color: var(--text-muted); line-height: 1.6; margin-bottom: var(--space-6); max-width: 600px; margin-left: auto; margin-right: auto; } .hero-cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: 16px 36px; background: linear-gradient(135deg, var(--gold), var(--gold-hover)); color: var(--text-inverse); font-size: 1.0625rem; font-weight: var(--font-weight-bold); border-radius: var(--radius-md); border: none; cursor: pointer; transition: all var(--transition-base); box-shadow: 0 4px 24px rgba(109, 40, 217, 0.35); text-decoration: none; } .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(109, 40, 217, 0.45); color: var(--text-inverse); } .hero-cta-secondary { display: inline-flex; align-items: center; gap: var(--space-2); padding: 16px 36px; background: transparent; color: var(--text-muted); font-size: 1rem; font-weight: var(--font-weight-medium); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-base); text-decoration: none; margin-left: var(--space-3); } .hero-cta-secondary:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-tint); } .hero-stats { display: flex; justify-content: center; gap: var(--space-6); margin-top: 64px; padding-top: var(--space-6); border-top: 1px solid var(--border-light); } .hero-stat { text-align: center; } .hero-stat-value { font-size: 2rem; font-weight: var(--font-weight-bold); color: var(--gold); } .hero-stat-label { font-size: 0.875rem; color: var(--text-subtle); margin-top: var(--space-1); } /* Features Grid */ .features-section { padding: 100px var(--space-6); } .section-title { font-size: 2.25rem; font-weight: var(--font-weight-bold); text-align: center; margin-bottom: var(--space-3); color: var(--text-primary); } .section-subtitle { font-size: 1.0625rem; color: var(--text-muted); text-align: center; max-width: 600px; margin: 0 auto var(--space-6); } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); max-width: 1100px; margin: 0 auto; } .feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; transition: all var(--transition-base); text-align: center; } .feature-card:hover { border-color: var(--border-gold); box-shadow: var(--shadow-gold); transform: translateY(-4px); } .feature-card-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--gold-tint); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--gold); margin: 0 auto var(--space-4); } .feature-card-title { font-size: 1.125rem; font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: var(--space-2); } .feature-card-description { font-size: 0.875rem; color: var(--text-muted); line-height: 1.7; } /* Testimonials */ .testimonial-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; position: relative; } .testimonial-card::before { content: '\201C'; font-size: 4rem; color: var(--gold-tint); position: absolute; top: 12px; left: 20px; font-family: Georgia, serif; line-height: 1; } .testimonial-quote { font-size: 1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: var(--space-5); position: relative; z-index: 1; font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: var(--space-3); } .testimonial-avatar { width: 44px; height: 44px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--gold), var(--gold-bronze)); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); color: var(--text-inverse); font-size: 0.875rem; } .testimonial-name { font-size: 0.9375rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); } .testimonial-role { font-size: 0.8125rem; color: var(--text-subtle); } .testimonial-stars { color: var(--gold); font-size: 0.875rem; letter-spacing: 2px; margin-bottom: var(--space-3); } /* Pricing Cards */ .pricing-section { padding: 100px var(--space-6); } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); max-width: 1000px; margin: 0 auto; align-items: start; } .pricing-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 36px; text-align: center; transition: all var(--transition-base); position: relative; } .pricing-card.featured { border-color: var(--gold); box-shadow: var(--shadow-gold); transform: scale(1.05); } .pricing-card.featured::before { content: 'Most Popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--gold), var(--gold-hover)); color: var(--text-inverse); font-size: 0.6875rem; font-weight: var(--font-weight-bold); padding: 4px 16px; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.06em; } .pricing-card:hover { border-color: var(--border-gold); transform: translateY(-4px); } .pricing-card.featured:hover { transform: scale(1.05) translateY(-4px); } .pricing-plan-name { font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); } .pricing-price { font-size: 3rem; font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: 1; margin-bottom: var(--space-1); } .pricing-price .currency { font-size: 1.5rem; vertical-align: super; color: var(--text-muted); } .pricing-price .period { font-size: 1rem; font-weight: var(--font-weight-normal); color: var(--text-subtle); } .pricing-description { font-size: 0.875rem; color: var(--text-muted); margin-bottom: var(--space-5); } .pricing-features { text-align: left; margin-bottom: var(--space-6); } .pricing-feature { display: flex; align-items: center; gap: var(--space-3); padding: 8px 0; font-size: 0.875rem; color: var(--text-muted); } .pricing-feature .check { color: var(--gold); font-size: 1rem; flex-shrink: 0; } .pricing-cta { width: 100%; } /* FAQ */ .faq-section { padding: 100px var(--space-6); max-width: 700px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--border-light); } .faq-question { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; cursor: pointer; font-size: 1rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); transition: color var(--transition-fast); width: 100%; text-align: left; background: none; border: none; } .faq-question:hover { color: var(--gold); } .faq-question .faq-toggle { font-size: 1.25rem; color: var(--text-subtle); transition: transform var(--transition-base); flex-shrink: 0; margin-left: var(--space-4); } .faq-item.open .faq-toggle { transform: rotate(45deg); color: var(--gold); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow), padding var(--transition-slow); } .faq-item.open .faq-answer { max-height: 300px; padding-bottom: 20px; } .faq-answer p { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.7; } /* Landing page responsive */ @media (max-width: 768px) { .hero-title { font-size: 2.25rem; } .hero-subtitle { font-size: 1.0625rem; } .hero-cta, .hero-cta-secondary { display: flex; width: 100%; justify-content: center; margin-left: 0; margin-bottom: var(--space-3); } .hero-stats { flex-direction: column; gap: var(--space-4); } .features-grid, .pricing-grid { grid-template-columns: 1fr; gap: var(--space-4); } .pricing-card.featured { transform: none; } .pricing-card.featured:hover { transform: translateY(-4px); } .section-title { font-size: 1.75rem; } } /* ------------------------------------------------------------ UTILITIES - Additional helpers ------------------------------------------------------------ */ .divider { height: 1px; background: var(--border-light); margin: var(--space-5) 0; } .avatar { width: 36px; height: 36px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--gold), var(--gold-bronze)); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); color: var(--text-inverse); font-size: 0.8125rem; flex-shrink: 0; } .avatar-sm { width: 28px; height: 28px; font-size: 0.6875rem; } .avatar-lg { width: 48px; height: 48px; font-size: 1rem; } .avatar-xl { width: 64px; height: 64px; font-size: 1.25rem; } .tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 8px; font-size: 0.6875rem; border-radius: var(--radius-sm); background: var(--gold-tint); color: var(--gold); font-weight: var(--font-weight-medium); } .progress-bar { height: 6px; background: var(--border-light); border-radius: var(--radius-full); overflow: hidden; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-champagne)); border-radius: var(--radius-full); transition: width var(--transition-slow); } .tooltip { position: relative; } .tooltip::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 6px 12px; background: var(--bg-card); color: var(--text-primary); font-size: 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border); white-space: nowrap; opacity: 0; visibility: hidden; transition: all var(--transition-fast); pointer-events: none; box-shadow: var(--shadow-md); z-index: 50; } .tooltip:hover::after { opacity: 1; visibility: visible; } /* Focus visible for accessibility */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Print styles */ @media print { .sidebar, .chat-panel, .chat-toggle, .toast-container { display: none !important; } .main-content { margin-left: 0 !important; } body { background: #fff; color: #000; } } /* === Content Automation Styles === */ .pipeline-log { max-height: 400px; overflow-y: auto; font-family: 'Courier New', monospace; font-size: 0.8rem; padding: 1rem; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; } .pipeline-event { padding: 0.25rem 0; border-bottom: 1px solid rgba(109, 40, 217, 0.1); } .pipeline-event .stage { color: var(--gold); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; } .pipeline-event .message { color: var(--text-primary); } .pipeline-event.error .message { color: var(--danger); } .pipeline-event.success .message { color: var(--success); } .pipeline-event.polling .message { color: var(--warning); } .status-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; } .status-badge.draft { background: rgba(156, 163, 175, 0.2); color: #9ca3af; } .status-badge.processing { background: rgba(59, 130, 246, 0.2); color: #60a5fa; } .status-badge.scripted { background: rgba(59, 130, 246, 0.2); color: #60a5fa; } .status-badge.imageDone { background: rgba(139, 92, 246, 0.2); color: #a78bfa; } .status-badge.videoDone { background: rgba(139, 92, 246, 0.2); color: #a78bfa; } .status-badge.captioned { background: rgba(245, 158, 11, 0.2); color: #fbbf24; } .status-badge.ReadyToPost { background: rgba(16, 185, 129, 0.2); color: #34d399; } .status-badge.published { background: rgba(109, 40, 217, 0.2); color: var(--gold); } .status-badge.failed { background: rgba(239, 68, 68, 0.2); color: #f87171; } .platform-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 9999px; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; background: rgba(109, 40, 217, 0.15); color: var(--gold); } .stage-timeline { position: relative; padding-left: 2rem; } .stage-timeline::before { content: ''; position: absolute; left: 0.75rem; top: 0; bottom: 0; width: 2px; background: var(--border); } .stage-node { position: relative; padding: 0.5rem 0; } .stage-node::before { content: ''; position: absolute; left: -1.25rem; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-primary); } .stage-node.complete::before { background: var(--success); border-color: var(--success); } .stage-node.error::before { background: var(--danger); border-color: var(--danger); } .stage-node.active::before { background: var(--gold); border-color: var(--gold); animation: pulse 1.5s infinite; } @keyframes contentPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(109, 40, 217, 0); } } .content-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.2s ease; } .content-card:hover { border-color: var(--gold); } .content-card-thumbnail { width: 100%; height: 160px; object-fit: cover; background: var(--bg-primary); } .content-card-body { padding: 1rem; } /* ------------------------------------------------------------ SIDEBAR SECTIONS & BRANDING ------------------------------------------------------------ */ .sidebar-section { margin-top: 1.25rem; } .sidebar-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-subtle); padding: 0 1rem; margin-bottom: 0.15rem; display: block; font-weight: var(--font-weight-semibold); } .sidebar-branding { padding: 0.75rem 1rem; border-top: 1px solid var(--border-light); margin-bottom: 0.5rem; } .brand-badge { display: block; color: var(--gold); font-weight: 600; font-size: 0.7rem; margin-bottom: 0.15rem; } /* ------------------------------------------------------------ PAGE ANIMATIONS ------------------------------------------------------------ */ .main-content { animation: fadeSlideIn 0.3s ease-out; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Stat card hover */ .stat-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(109, 40, 217, 0.15); } /* Product card hover */ .product-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(109, 40, 217, 0.2); } /* Sidebar link hover slide */ .sidebar-link { transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease; } /* Toast slide-in */ .toast { animation: toastSlideIn 0.3s ease-out; } @keyframes toastSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Calendar event styles */ .fc .fc-event { border: none; border-radius: 4px; padding: 2px 6px; font-size: 0.75rem; } .fc .fc-toolbar-title { color: var(--text-primary); font-size: 1.25rem; } .fc .fc-button { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); } .fc .fc-button:hover { background: var(--bg-card-hover); border-color: var(--gold); } .fc .fc-button-active { background: var(--gold) !important; color: var(--text-inverse) !important; } .fc .fc-daygrid-day { background: var(--bg-secondary); border-color: var(--border-light); } .fc .fc-daygrid-day-number { color: var(--text-muted); } .fc .fc-col-header-cell { background: var(--bg-card); border-color: var(--border-light); color: var(--text-muted); font-size: 0.8rem; padding: 8px; } /* Jackie chat styles */ .jackie-chat-area { display: flex; flex-direction: column; height: calc(100vh - 200px); min-height: 400px; } .jackie-messages { flex: 1; overflow-y: auto; padding: 1rem; } .jackie-input-bar { padding: 1rem; border-top: 1px solid var(--border); background: var(--bg-secondary); display: flex; gap: 0.5rem; } .jackie-input-bar input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.75rem 1rem; color: var(--text-primary); font-size: 0.9rem; } .jackie-input-bar input:focus { outline: none; border-color: var(--gold); } .jackie-bubble { max-width: 80%; padding: 0.75rem 1rem; border-radius: 12px; margin-bottom: 0.75rem; line-height: 1.6; font-size: 0.9rem; } .jackie-bubble.user { background: rgba(109, 40, 217, 0.15); margin-left: auto; text-align: right; border-bottom-right-radius: 4px; } .jackie-bubble.assistant { background: var(--bg-card); border: 1px solid var(--border-light); margin-right: auto; border-bottom-left-radius: 4px; } /* Survey / onboarding form */ .survey-form .form-group { margin-bottom: 1.5rem; } .survey-form label { display: block; margin-bottom: 0.5rem; color: var(--text-primary); font-weight: var(--font-weight-medium); } .survey-form input, .survey-form textarea, .survey-form select { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.75rem 1rem; color: var(--text-primary); font-size: 0.9rem; } .survey-form input:focus, .survey-form textarea:focus, .survey-form select:focus { outline: none; border-color: var(--gold); } /* Booking public page */ .booking-page { max-width: 600px; margin: 2rem auto; padding: 2rem; } .time-slot-btn { display: inline-block; padding: 0.5rem 1rem; margin: 0.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); cursor: pointer; transition: all 0.15s ease; } .time-slot-btn:hover, .time-slot-btn.selected { background: var(--gold); color: var(--text-inverse); border-color: var(--gold); } /* Help tabs */ .help-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 2rem; } .help-tab { padding: 0.75rem 1.5rem; cursor: pointer; color: var(--text-muted); font-weight: var(--font-weight-medium); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s ease; } .help-tab:hover { color: var(--text-primary); } .help-tab.active { color: var(--gold); border-bottom-color: var(--gold); } /* Pricing cards */ .pricing-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; text-align: center; transition: all 0.2s ease; } .pricing-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(109, 40, 217, 0.15); } .pricing-card.featured { border-color: var(--gold); position: relative; } .pricing-card.featured::before { content: "POPULAR"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--text-inverse); padding: 2px 12px; border-radius: 10px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; } .pricing-amount { font-size: 2.5rem; font-weight: 700; color: var(--gold); margin: 1rem 0 0.25rem; } .pricing-period { color: var(--text-subtle); font-size: 0.85rem; margin-bottom: 1.5rem; } /* ============================================================ TOTAL TALENT SOURCE - Brand editorial system Cream ground · Royal Violet accent · Crown Gold (sparingly) Ink text · Newsreader serif · Archivo body · Inter numbers Token values now live in the :root / [data-theme="dark"] blocks at the top of this file (section 1 / 1B). ============================================================ */ /* Serif editorial headlines */ h1, h2, h3, h4, h5, .page-title, .brand-name, .modal-title, .empty-state-heading, .stat-value, .card-title { font-family: var(--font-heading); letter-spacing: -0.01em; } .page-title { font-weight: 600; } /* Tabular figures for money/metrics (Inter) */ .stat-value, .kpi-value, .table td, .price, .amount, .metric-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .stat-value { font-family: 'Inter', var(--font-heading); font-weight: 600; } /* Table header: ink on tint, not dark */ .table thead th { background: var(--bg-tertiary); color: var(--text-muted); } .table tbody tr:hover { background: var(--bg-card-hover); } /* .btn-primary / .btn-secondary consolidated to a single definition near .btn (see ~line 897) - no duplicate rules needed here. */ /* Scrollbar + misc dark remnants softened for light ground */ ::-webkit-scrollbar-thumb { background: #d9d0ea; } body { -webkit-font-smoothing: antialiased; } /* Light-theme fixes for legacy dark component values */ /* .table tbody tr:nth-child(even) consolidated to a single token-based rule near .table (see ~line 1241) - duplicate removed. */ /* ------------------------------------------------------------ WCAG pass additions (Wave 4A-1, public/marketing templates) Purely additive: does not modify any rule or token above. ------------------------------------------------------------ */ /* Visually-hidden helper for form labels that must exist for assistive tech but are represented visually by a placeholder. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Respect prefers-reduced-motion for public/marketing pages: dampen transitions and transform-based motion without disabling opacity-only fades needed for basic visibility toggles. */ @media (prefers-reduced-motion: reduce) { .htc *, .advisor-chip, .opt, .card, .btn, .btn-primary, .btn-outline, .btn-ghost { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ TTS DESIGN SYSTEM V5 -- single source of truth for every public (marketing/funnel) template. Replaces the former V2 + V4 + V5 stacked generations -- those layers cascaded on top of each other with only partial overrides, which let old V2 serif/oversized type and bordered-flat cards win on some pages. This section defines each class exactly once, fully, at final values. Class names are preserved so no template markup changes were required. Ground is the violet radial-glow canvas; cards are white/gradient panels with a soft double shadow (never a border); the ink panel (.px-section--ink) is the only constant-dark surface, in both themes. Fonts: Quicksand for headings/big numbers, Onest for everything else (both loaded via Google Fonts in base.html). Dark mode rides the site's existing [data-theme="dark"] toggle. ------------------------------------------------------------ */ /* ---- 1. Palette tokens (light) ---- */ :root { /* Deepened/more-saturated a notch (owner note 2026-07-26) so primary CTAs pop off the lilac ground; white label text still 6.87:1 on --accent and 10.88:1 on --accent-3 (both up from the prior pair). */ --accent: #6238D6; --accent-2: #8B6DF6; --accent-3: #422693; --accent-soft: #EEE8FD; --ink: #26233B; /* Deepened a notch for clearer body/caption contrast (owner note 2026-07-26): 8.23:1 on --bg-primary #F5F2FE, 9.09:1 on --bg-card #FFFFFF (was 5.9:1 / ~6.5:1). Still comfortably AA/AAA. */ --muted: #4A4560; /* 6.18:1 on --bg-primary (was 4.7:1). */ --faint: #5C5775; --v5-card: #FFFFFF; /* Strengthened framing line (owner note 2026-07-26): a soft violet- grey, not a hard border -- contrast vs white card is 1.53:1 (was 1.29:1), enough to read as a clear seam at a glance. */ --v5-line: #D3CEE6; --accent-ink: #3F2C82; /* Warm eyebrow amber (WCAG AA, see contrast math in report): 4.8:1 against --bg-primary #F5F2FE, 5.3:1 against --bg-card #FFFFFF. */ --eyebrow-amber: #A05A0D; --price-warm: #953C08; --teal: #16A394; --teal-ink: #0B6E5F; --teal-soft: #DBF3EE; /* Deepened/more-saturated for the warm scorecard CTA (owner note 2026-07-26); black label text stays 4.8:1 against this stop (was 5.5:1 against the paler orange -- still AA). */ --orange: #E24E00; --orange-ink: #953C08; --orange-soft: #FCE5D6; --yellow: #F4B60C; --yellow-soft: #FBEFC6; --blue: #3B82F6; --blue-deep: #2E6FE0; --green: #17A673; --purple-bright: #7C4DFF; --purple-deep: #3B1E8F; --v5-canvas: radial-gradient(1100px 600px at 82% -8%, #E7DFFB 0%, rgba(231, 223, 251, 0) 58%), linear-gradient(168deg, #EFEAFC 0%, #F5F2FE 38%, #FBFAFE 100%); /* Ink surface family -- the one constant-dark panel sitewide */ --px-ink: #1A1426; --px-ink-text: #F5F0E8; --px-ink-text-muted: rgba(245, 240, 232, 0.72); --px-ink-rule: rgba(245, 240, 232, 0.12); /* Rhythm */ --px-section-pad-y: 72px; --px-section-pad-y-tight: 56px; --px-section-pad-y-mobile: 48px; --px-max-width: 1440px; --px-measure: 68ch; /* Remap existing CAM tokens (--gold/--bg-card/--border/--text-* etc.) onto the V5 palette so every class already built on those tokens (admin included) inherits the new look without per-class rewrites. */ --gold: var(--accent); --gold-hover: var(--accent-3); --gold-champagne: var(--accent-2); --gold-tint: var(--accent-soft); --gold-glow: rgba(108, 76, 224, 0.16); --bg-card: var(--v5-card); --bg-card-hover: var(--accent-soft); --bg-tertiary: var(--accent-soft); --bg-primary: #F5F2FE; --text-primary: var(--ink); --text-secondary: var(--muted); --text-muted: var(--muted); --text-subtle: var(--faint); --border: var(--v5-line); --border-gold: rgba(108, 76, 224, 0.30); --px-gold-text: var(--accent-ink); /* Type: Quicksand for display/headings, Onest for body */ --font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Fill two gaps in the CAM spacing scale that public-page rules reference (var(--space-7)/var(--space-8)) but that were never defined anywhere above -- those margins/paddings were silently collapsing. Admin never references these two, so this only affects public pages. */ --space-7: 40px; --space-8: 48px; } /* ---- 1B. Palette tokens (dark) -- derived: deep violet ground with the same accent family lightened for contrast ---- */ [data-theme="dark"] { /* Deepened/more-saturated a notch (owner note 2026-07-26) so the CTA gradient pops off the dark ground; white label text now 5.41:1 on --accent and 6.44:1 on --accent-3 (was 3.05:1 / 4.64:1). */ --accent: #7A4CDB; --accent-2: #B4A0F7; --accent-3: #6C3FD0; --accent-soft: rgba(156, 130, 242, 0.16); --ink: #EDEAF7; /* Deepened (lightened) a notch (owner note 2026-07-26): 10.45:1 on --bg-primary #17142A (was 8.76:1). */ --muted: #C7C2E0; /* 7.49:1 on --bg-primary (was 5.81:1). */ --faint: #A9A3C8; --v5-card: #201C33; /* Strengthened framing line for dark theme, still soft (no hard border look) but reads clearly against panels. */ --v5-line: rgba(255, 255, 255, 0.16); --accent-ink: #D6C9FB; /* Warm eyebrow amber (dark theme): 10.1:1 against --bg-primary #17142A, 9.3:1 against --v5-card #201C33. */ --eyebrow-amber: #F5B84C; --price-warm: #FFC7A0; --teal: #4FD8C4; --teal-ink: #9EEFE3; --teal-soft: rgba(79, 216, 196, 0.14); /* Deepened for the warm scorecard CTA (owner note 2026-07-26); black label text stays 7.29:1 (was 8.11:1) -- still comfortably AAA. */ --orange: #FF7A33; --orange-ink: #FFC7A0; --orange-soft: rgba(255, 138, 76, 0.14); --yellow: #F7CB4D; --yellow-soft: rgba(247, 203, 77, 0.14); --blue: #5B9BFF; --blue-deep: #4A87FF; --green: #3DDBA0; --purple-bright: #9B7DFF; --purple-deep: #B49CFF; --px-ink: #0F0C16; --px-ink-text: #F5F0E8; --px-ink-text-muted: rgba(245, 240, 232, 0.72); --px-ink-rule: rgba(245, 240, 232, 0.14); --gold: var(--accent); --gold-hover: var(--accent-2); --gold-champagne: var(--accent-2); --gold-tint: var(--accent-soft); --gold-glow: rgba(156, 130, 242, 0.22); --bg-card: var(--v5-card); --bg-card-hover: #26213D; --bg-tertiary: #241F3A; --bg-primary: #17142A; --text-primary: var(--ink); --text-secondary: var(--muted); --text-muted: var(--muted); --text-subtle: var(--faint); --border: var(--v5-line); --border-gold: rgba(156, 130, 242, 0.32); --px-gold-text: var(--accent-ink); } /* ---- 2. Ground: violet radial glow canvas, fixed ---- */ body { background-image: var(--v5-canvas); background-attachment: fixed; } [data-theme="dark"] body { background-image: radial-gradient(1100px 600px at 82% -8%, rgba(124, 92, 230, 0.20) 0%, rgba(23, 20, 42, 0) 58%), linear-gradient(168deg, #17142A 0%, #191531 38%, #17142A 100%); } ::selection { background: var(--accent-soft); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--gold); } a { color: var(--accent-ink); } a:hover { color: var(--accent-3); } /* ---- 3. Type scale ---- h1 <= clamp(30,3vw,42) · h2 <= 22px · card titles (h3) <= 16px · body 15px/1.6 · lead 16px/1.6 · labels 11-12px uppercase · prices <= 26px. Headings + prices are Quicksand; everything else is Onest. Only the home hero h1 is allowed to run larger. */ .px-h1, .px-h2, .px-h3, .px-stat-number, .px-eyebrow, h1, h2, h3 { font-family: var(--font-heading); } .px-h1, h1 { font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; letter-spacing: -0.02em; color: var(--text-primary); } /* Home hero: the one place a larger display line is allowed. */ .landing-hero .px-h1 { font-size: clamp(34px, 4.4vw, 50px); } .px-h2, h2 { font-weight: 700; font-size: clamp(19px, 2vw, 22px); line-height: 1.25; letter-spacing: -0.01em; color: var(--text-primary); } .px-h3, h3 { font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--text-primary); } .px-eyebrow { display: block; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eyebrow-amber); margin-bottom: var(--space-3); } .px-lead { font-family: var(--font-family); font-size: 16px; line-height: 1.6; color: var(--text-muted); max-width: var(--px-measure); } .px-prose { font-family: var(--font-family); font-size: 15px; line-height: 1.6; color: var(--text-muted); max-width: var(--px-measure); } .px-prose p { font-size: 15px; line-height: 1.6; } .px-prose p + p { margin-top: var(--space-4); } .px-stat-number { font-weight: 700; font-size: clamp(22px, 2vw, 26px); line-height: 1.1; letter-spacing: -0.01em; color: var(--accent-ink); } .px-stat-caption { font-family: var(--font-family); font-size: 14px; color: var(--text-muted); letter-spacing: 0.02em; } .px-quote { font-family: var(--font-heading); font-weight: 500; font-size: 19px; line-height: 1.5; color: var(--text-primary); max-width: var(--px-measure); background: linear-gradient(165deg, var(--bg-card), var(--bg-tertiary)); border-radius: 28px; box-shadow: 0 2px 3px rgba(38, 35, 59, 0.06), 0 16px 38px rgba(108, 76, 224, 0.11); padding: 28px; } .px-quote cite { display: block; margin-top: var(--space-4); font-family: var(--font-family); font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-muted); } [data-theme="dark"] .px-quote { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35), 0 16px 38px rgba(0, 0, 0, 0.5); } /* ---- 4. Layout rhythm ---- */ /* Single shared hero rhythm (all .px-hero pages converge here; no per-page inline/CSS overrides should touch this spacing): eyebrow->h1 14px, h1->lead 20px, lead->CTA 28px, CTA->chip row 28px, equal top/bottom padding, vertically centered content. */ .px-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 42px; max-width: var(--px-max-width); margin: 0 auto; background: linear-gradient(135deg, #FFFFFF 0%, #F6F2FE 60%, #EFE8FD 100%); border-radius: 34px; box-shadow: 0 3px 5px rgba(38, 35, 59, 0.06), 0 24px 52px rgba(108, 76, 224, 0.14); } [data-theme="dark"] .px-hero { background: linear-gradient(135deg, #201C33 0%, #221D3B 60%, #241F3F 100%); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25), 0 24px 52px rgba(0, 0, 0, 0.42); } .px-hero > .px-h1, .px-hero > .px-lead, .px-hero > .px-prose { margin-left: auto; margin-right: auto; } .px-hero > .px-eyebrow + .px-h1 { margin-top: 14px; } .px-hero > .px-h1 + .px-lead { margin-top: 20px; } .px-hero > .px-lead + * { margin-top: 28px; } .px-hero > .px-cta + * { margin-top: 28px; } .px-section { padding: var(--px-section-pad-y) var(--space-6); max-width: var(--px-max-width); margin-left: auto; margin-right: auto; } .px-section--tight { padding-top: var(--px-section-pad-y-tight); padding-bottom: var(--px-section-pad-y-tight); } /* Alternating section wash (owner note 2026-07-26): every other section gets a soft frosted panel behind it so the page reads as distinct bands at a glance, without a hard edge -- a large-radius, border-less, low-opacity tint that fades at top/bottom via mask so it never draws a visible seam against the section before/after it. .px-section--ink and .px-hero are excluded (they already carry their own surface treatment). */ section.px-section:nth-of-type(even) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.28)); border-radius: 40px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); } [data-theme="dark"] section.px-section:nth-of-type(even) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); } .px-grid-23 { display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: start; } @media (max-width: 800px) { .px-grid-23 { grid-template-columns: 1fr; } } @media (max-width: 768px) { .px-hero, .px-section, .px-section--tight { padding-top: var(--px-section-pad-y-mobile); padding-bottom: var(--px-section-pad-y-mobile); padding-left: var(--space-4); padding-right: var(--space-4); } .px-hero { padding-left: 24px; padding-right: 24px; } } /* ---- 5. Nav: frosted pill container around the links, gradient logo tile, gradient active pill, theme toggle stays clear of content (extra right padding matches its fixed top-right slot). ---- */ .px-hero-band { display: none; } .px-nav { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 14px max(24px, calc((100% - var(--px-max-width)) / 2)); padding-right: max(76px, calc((100% - var(--px-max-width)) / 2 + 76px)); } .px-nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .px-nav-brand img { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(150deg, var(--accent-3), var(--accent-2)); box-shadow: 0 6px 16px rgba(108, 76, 224, 0.32); padding: 8px; box-sizing: border-box; object-fit: contain; } .px-nav-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .px-nav-brand-name { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--ink); } .px-nav-links { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--border); border-radius: 999px; padding: 5px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } [data-theme="dark"] .px-nav-links { background: rgba(32, 28, 51, 0.6); } .px-nav-link { padding: 9px 16px; border-radius: 999px; color: #6438E0; font-family: var(--font-family); font-weight: 600; font-size: 13.5px; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } [data-theme="dark"] .px-nav-link { color: var(--accent-2); } .px-nav-link:hover, .px-nav-link:focus-visible { background: var(--accent-soft); } .px-nav-link[aria-current="page"] { background: linear-gradient(135deg, var(--purple-bright), var(--blue-deep)); color: #FFFFFF; font-weight: 700; box-shadow: 0 6px 14px rgba(124, 77, 255, 0.35); } .px-nav-link[aria-current="page"]:hover { background: linear-gradient(135deg, var(--purple-bright), var(--blue-deep)); } /* ---- 6. Buttons / CTAs: violet gradient pill everywhere, except the nav's single yellow-to-orange standout audit CTA. ---- */ .px-cta, .btn-primary { border-radius: 999px; } .px-cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: 13px 28px; background: linear-gradient(135deg, var(--accent-3), var(--accent)); color: #FFFFFF; font-family: var(--font-family); font-size: 15px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; /* Deepened lift so the CTA reads as clearly raised off the ground (owner note 2026-07-26). */ box-shadow: 0 12px 28px -10px var(--accent); transition: filter 150ms ease; } .px-cta:hover, .btn-primary:hover { filter: brightness(1.06); } .px-nav .px-cta { padding: 9px 18px; font-size: 13px; font-weight: 700; } .px-nav .px-cta--warm { background: linear-gradient(135deg, var(--yellow), var(--orange)); color: #14100C; box-shadow: 0 10px 22px rgba(226, 78, 0, 0.42); } /* Between the desktop layout and the mobile layout the links used to wrap onto a second row while the pill kept its fully-rounded 999px corners, which left the capsule looking stretched and broken with the Scorecard button hanging below it. Raising the breakpoint to 1024px hands those widths to the mobile treatment, which is built to wrap: a softer radius, real row spacing, and full-width buttons. */ @media (max-width: 1024px) { .px-nav { padding: 12px 16px; padding-right: 64px; gap: 10px; } .px-nav-brand img { width: 36px; height: 36px; } .px-nav-brand-name { font-size: 16px; } .px-nav-links { margin-left: 0; width: 100%; justify-content: center; border-radius: 24px; row-gap: 6px; } .px-nav-link { padding: 8px 12px; font-size: 13px; } .px-nav .px-cta { flex: 1 1 100%; justify-content: center; text-align: center; } } /* Tablet and narrowed-desktop band. The mobile rules above stop the pill from looking broken, but stacking both buttons full width is heavy at these widths, where there is still room for them side by side. */ @media (min-width: 561px) and (max-width: 1024px) { .px-nav .px-cta { flex: 1 1 auto; min-width: 0; } .px-nav-links { row-gap: 8px; } } .px-cta:focus-visible, .px-cta-text:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .px-cta-text { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-family); font-size: 15px; font-weight: 600; color: var(--accent-ink); text-decoration: none; transition: color 150ms ease; } .px-cta-text::after { content: "\2192"; display: inline-block; } .px-cta-text:hover { text-decoration: underline; color: var(--accent-3); } .px-rule { border: none; border-top: 1px solid var(--border); height: 0; margin: var(--space-6) 0; } /* ---- 7. Motion ---- */ .px-fade { opacity: 0; transform: translateY(10px); animation: px-fade-up 200ms ease-out forwards; } @keyframes px-fade-up { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .px-fade { animation: none; opacity: 1; transform: none; } .px-cta, .px-cta-text, .px-nav-link, .px-footer-link, .opt, .audit-progress__bar { transition: none !important; animation: none !important; } } /* ---- 8. Cards / surfaces: white/gradient panel, no border, one soft violet-tinted double shadow. Never mixed with a border. ---- */ .px-card, .audit-card, .advisor-panel { background: linear-gradient(165deg, var(--bg-card), var(--bg-tertiary)); border: none; border-radius: 28px; padding: 28px; box-shadow: 0 2px 3px rgba(38, 35, 59, 0.06), 0 16px 38px rgba(108, 76, 224, 0.11); } .px-card:hover { box-shadow: 0 2px 4px rgba(38, 35, 59, 0.06), 0 18px 40px rgba(108, 76, 224, 0.12); } [data-theme="dark"] .px-card, [data-theme="dark"] .audit-card, [data-theme="dark"] .advisor-panel { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35), 0 16px 38px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .px-card:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 20px 44px rgba(0, 0, 0, 0.5); } /* ---- 9. Chips / badges: pill style, accent-soft default, with teal/orange context variants for the ladder + door meta chips (Free / $310 / By application language). ---- */ .px-chip { display: inline-flex; align-items: center; font-family: var(--font-family); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-ink); background: var(--accent-soft); border: none; padding: 5px 13px; border-radius: 999px; } .px-ladder-card:nth-child(2) .px-chip { color: var(--teal-ink); background: var(--teal-soft); } .px-ladder-card:nth-child(3) .px-chip { color: var(--orange-ink); background: var(--orange-soft); } .px-door .px-chip { color: var(--orange-ink); background: var(--orange-soft); } .px-door--emph .px-chip { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; } /* ---- 10. Ladder: portfolio-style numbered rows with hairline separators between rows and a right-aligned Quicksand price chip. The outer wrapper carries the one card shadow; individual rows have no card look of their own. ---- */ .grid-4:has(.px-ladder-card) { display: flex; flex-direction: column; gap: 0; background: var(--bg-card); border-radius: 26px; box-shadow: 0 1px 2px rgba(38, 35, 59, 0.04), 0 12px 30px rgba(108, 76, 224, 0.06); overflow: hidden; } [data-theme="dark"] .grid-4:has(.px-ladder-card) { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px rgba(0, 0, 0, 0.4); } .grid-4:has(.px-ladder-card) .px-ladder-card { flex-direction: row; align-items: center; gap: 18px; border-radius: 0; border: none; border-bottom: 1px solid var(--border); box-shadow: none; background: transparent; padding: 22px 26px; } .grid-4:has(.px-ladder-card) .px-ladder-card:last-child { border-bottom: none; } .grid-4:has(.px-ladder-card) .px-ladder-card:hover { box-shadow: none; background: var(--accent-soft); } .grid-4:has(.px-ladder-card) .px-ladder-num { margin-bottom: 0; flex-shrink: 0; } .grid-4:has(.px-ladder-card) .px-h3 { margin-top: 0 !important; } .grid-4:has(.px-ladder-card) .px-chip { order: 3; margin-left: auto; font-family: var(--font-heading); font-size: 13px; padding: 8px 16px; } .px-ladder-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: box-shadow 0.2s, background-color 0.2s; } .px-ladder-num { width: 40px; height: 40px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 16px; margin-bottom: 14px; } /* ---- 11. Doors: two cards side by side (existing .grid-2/.px-door markup already lays these out; just apply the tile language). ---- */ .px-door { border-radius: 26px; padding: 30px; display: flex; flex-direction: column; gap: 10px; } .px-door--emph { background: linear-gradient(150deg, var(--accent-3), var(--accent)); color: #FFFFFF; } .px-door--emph .px-h3, .px-door--emph .px-prose { color: #FFFFFF; } /* ---- 12. (removed: split label/floating-note header pattern. Formerly .px-shead/.px-snote; retired in favor of a plain eyebrow + heading, with any note text folded into the section's lead copy.) ---- */ /* ---- 13. Ink panel: the ONLY constant-dark surface sitewide, identical in both themes. ---- */ .px-section--ink { background: linear-gradient(160deg, #1A1426, #2A1F42); color: var(--px-ink-text); border-radius: 24px; max-width: var(--px-max-width); margin-left: auto; margin-right: auto; padding: 64px 40px; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6); } .px-section--ink .px-h1, .px-section--ink .px-h2, .px-section--ink .px-h3, .px-section--ink .px-stat-number { color: var(--px-ink-text); } .px-section--ink .px-lead, .px-section--ink .px-prose, .px-section--ink .px-stat-caption { color: var(--px-ink-text-muted); } .px-section--ink .px-cta { background: linear-gradient(135deg, var(--accent-2), var(--accent)); } @media (max-width: 768px) { .px-section--ink { padding: 48px 24px; margin-left: var(--space-4); margin-right: var(--space-4); } } /* ---- 14. Footer: one row, one hairline, legal links + copyright. ---- */ .px-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; text-align: center; padding: var(--space-6, 24px) var(--space-4, 16px); font-size: 11.5px; color: var(--faint); border-top: 1px solid var(--border); } .px-footer-link { margin: 0; color: var(--faint); text-decoration: none; transition: color 150ms ease; } .px-footer-link:hover, .px-footer-link:focus-visible { color: var(--accent-ink); } .px-footer-cookieprefs { background: none; border: none; padding: 0; font: inherit; font-size: 11.5px; cursor: pointer; } .px-footer-sep { color: var(--faint); opacity: 0.6; } .px-footer-meta { color: var(--faint); } .px-footer-gpc { flex-basis: 100%; color: var(--faint); font-size: 11px; } .px-footer-gpc.hidden { display: none; } /* ---- 15. Page shells / status pages ---- */ .px-page-bg { background: var(--v5-canvas); background-attachment: fixed; min-height: 100vh; } [data-theme="dark"] .px-page-bg { background-image: radial-gradient(1100px 600px at 82% -8%, rgba(124, 92, 230, 0.20) 0%, rgba(23, 20, 42, 0) 58%), linear-gradient(168deg, #17142A 0%, #191531 38%, #17142A 100%); background-attachment: fixed; } .px-center-shell { min-height: 100vh; max-width: var(--px-max-width); margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); } .px-center-shell-inner { text-align: center; max-width: 520px; } .px-status-icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-6); } .px-status-icon--gold { background: var(--accent-soft); border: 2px solid var(--accent); } .px-status-icon--success { background: rgba(34, 197, 94, 0.15); } .px-status-icon--danger { background: rgba(239, 68, 68, 0.15); } /* ---- 16. Notice banner + chat body helper ---- */ .px-notice-banner { text-align: center; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-family); font-size: 14px; font-weight: 500; padding: 12px 16px; } .px-chat-body { min-height: 220px; } /* ---- 17. Aux pages: store, thank-you, checkout ---- */ .px-aux-header { text-align: center; padding-bottom: 0; } .px-aux-tier-section { padding-top: 0; } .px-aux-tier-section .px-h2 { text-align: center; margin-bottom: var(--space-3); } .px-aux-tier-section .px-lead { text-align: center; margin: 0 auto var(--space-8); } .px-aux-tier-grid { gap: var(--space-6); } .px-aux-tier-card, .px-aux-product-card { display: flex; flex-direction: column; } .px-aux-tier-name { font-size: 16px; margin-bottom: var(--space-1); } .px-aux-tier-price-row { margin-bottom: var(--space-4); } .px-aux-tier-price { font-family: var(--font-heading); color: var(--price-warm); font-weight: 700; font-size: 26px; } .px-aux-tier-list { list-style: disc; padding-left: 20px; margin-bottom: var(--space-4); flex: 1; } .px-aux-tier-desc { font-size: 14px; margin-bottom: var(--space-4); } .px-aux-tier-cta { text-align: center; text-decoration: none; margin-bottom: 10px; } .px-aux-tier-cta-solo { text-align: center; text-decoration: none; } .px-aux-product-image { display: block; width: calc(100% + 56px); height: 180px; object-fit: cover; margin: -28px -28px var(--space-5); border-radius: 20px 20px 0 0; } .px-aux-product-title { font-family: var(--font-heading); color: var(--text-primary); font-weight: 700; font-size: 16px; margin-bottom: var(--space-2); } .px-aux-product-desc { font-size: 14px; margin-bottom: var(--space-4); flex: 1; } .px-aux-price-row { margin-bottom: 0; } .px-aux-price-row--with-offer { margin-bottom: var(--space-3); } .px-aux-price { font-family: var(--font-heading); color: var(--price-warm); font-weight: 700; font-size: 19px; } .px-aux-view-offer { font-size: 14px; text-decoration: none; } .px-aux-empty { text-align: center; padding: var(--space-8) var(--space-6); } .px-aux-empty .px-lead { margin: 0 auto; } .px-aux-logo-link { display: block; text-align: center; margin-bottom: var(--space-6); } .px-aux-logo-img { height: 22px; width: auto; opacity: 0.7; } .px-aux-badge-spaced { margin-bottom: var(--space-6); } .px-aux-title-spaced { margin-bottom: var(--space-3); } .px-aux-lead-spaced { margin: 0 auto var(--space-8); } .px-aux-lead-spaced--tight { margin: 0 auto var(--space-6); } .px-aux-divider { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border); } .px-aux-divider-caption { margin-bottom: var(--space-3); } .px-aux-caption-spaced { margin-top: var(--space-5); } .px-aux-secondary-p { margin-top: var(--space-4); } /* ---- 18. Offer detail page ---- */ .offer-page { background: var(--bg-primary); min-height: 100vh; } .offer-hero { text-align: center; } .offer-hero__subhead { color: var(--text-muted); } .offer-price { margin-bottom: var(--space-2); } .offer-price__amount { font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 2vw, 26px); color: var(--price-warm); } .offer-price__terms { color: var(--text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-6); } .offer-bullets { list-style: disc; text-align: left; display: inline-block; margin: 0 auto var(--space-7); padding-left: 20px; color: var(--text-muted); font-size: 15px; line-height: 1.9; } .offer-cta { margin-bottom: var(--space-3); } .offer-cta__button { padding: 13px 28px; font-size: 15px; font-weight: 700; text-decoration: none; display: inline-block; } .offer-cta__terms { margin-top: var(--space-2); margin-bottom: 0; font-size: 14px; color: var(--text-muted); } .offer-crosssell { max-width: 420px; margin: var(--space-8) auto 0; padding: 28px; text-align: left; } .offer-crosssell__eyebrow { color: var(--text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); } .offer-crosssell__link { color: var(--text-primary); font-weight: 700; font-size: 15px; text-decoration: none; } .offer-crosssell__link:hover, .offer-crosssell__link:focus-visible { text-decoration: underline; } .offer-crosssell__subhead { color: var(--text-muted); font-size: 14px; margin-top: var(--space-2); margin-bottom: 0; } .offer-footnote { margin-top: var(--space-8); font-size: 15px; color: var(--text-muted); } .offer-footnote__link { color: var(--accent-ink); } /* ---- 19. T.A.L.E.N.T. Audit onboarding wizard ---- */ .audit-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: stretch; } .audit-shell__inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: var(--space-8) var(--space-4); } .audit-shell__inner > * { width: 100%; max-width: 600px; } .audit-progress { height: 4px; background: var(--border); border-radius: 999px; margin-bottom: var(--space-8); overflow: hidden; } .audit-progress__bar { height: 100%; width: 10%; background: var(--accent); border-radius: 999px; transition: width 150ms ease; } .audit-error { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); padding: 12px 16px; border-radius: 8px; margin-bottom: var(--space-4); text-align: center; } .audit-card { padding: 40px 32px; } .audit-card__intro { text-align: center; margin-bottom: var(--space-7); } .audit-card__logo { height: 30px; width: auto; margin: 0 auto var(--space-4); display: block; } /* .audit-card__h1 is a modifier applied alongside .px-h1 (not a standalone h1 rule) so every page's h1 shares one type-scale rule -- only the home hero is allowed to run larger (see section 3 above). */ .audit-card__h1 { margin: 0; } .audit-card__lead { color: var(--text-secondary, var(--text-muted)); font-size: 16px; line-height: 1.6; margin: var(--space-3) 0 0; } .q { display: block; font-size: 16px; font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-3); } .audit-q--sub { font-family: inherit; font-size: 0.95rem; font-weight: 600; } .audit-q--spaced { font-family: inherit; font-size: 0.95rem; font-weight: 600; margin-top: var(--space-5); } .audit-optional { color: var(--text-muted); font-weight: 400; } .ti { width: 100%; padding: 0.85rem 1rem; font-size: 1rem; background: var(--bg-input); border: none; border-radius: 14px; color: var(--text-primary); box-sizing: border-box; box-shadow: 0 1px 2px rgba(38, 35, 59, 0.04), inset 0 0 0 1px var(--border); } [data-theme="dark"] .ti { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 0 0 1px var(--border); } .ti:focus { outline: none; box-shadow: 0 0 0 3px var(--gold-glow); } .hint { color: var(--text-muted); font-size: 0.8rem; margin: var(--space-2) 0 0; } .hint--gap { margin-bottom: var(--space-3); } .opts { display: flex; flex-direction: column; gap: 10px; } .opt { text-align: left; padding: 0.9rem 1rem; font-size: 0.95rem; background: var(--bg-input); border: none; border-radius: 16px; color: var(--text-primary); cursor: pointer; box-shadow: 0 1px 2px rgba(38, 35, 59, 0.04), 0 6px 16px rgba(108, 76, 224, 0.06); transition: box-shadow 150ms ease, background-color 150ms ease, color 150ms ease; } [data-theme="dark"] .opt { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.35); } .opt:hover { box-shadow: 0 2px 4px rgba(38, 35, 59, 0.06), 0 10px 22px rgba(108, 76, 224, 0.12); } [data-theme="dark"] .opt:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 26px rgba(0, 0, 0, 0.45); } .opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .opt.sel { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; box-shadow: 0 0 0 2px var(--accent) inset; } .fi { width: 100%; padding: 0.75rem; font-size: 0.9rem; background: var(--bg-input); border: none; border-radius: 14px; color: var(--text-secondary, var(--text-muted)); box-sizing: border-box; box-shadow: inset 0 0 0 1px var(--border); } .audit-reveal { margin-top: var(--space-4); } .audit-nav { display: flex; gap: 10px; margin-top: var(--space-7); } .audit-nav__flex { flex: 1; justify-content: center; } .audit-nav__back { display: none; } .audit-nav__back.px-cta-text::after { content: none; } .audit-nav__submit { display: none; } .audit-foot { text-align: center; color: var(--text-muted); font-size: 0.75rem; margin-top: var(--space-5); } .audit-foot--tight { margin-top: var(--space-2); } .audit-intro-panel { max-width: 600px; margin: 0 auto var(--space-6); text-align: center; } .audit-intro-panel .px-cta-text { display: inline-flex; margin-top: var(--space-3); } /* ---- 20. The Advisory page ---- */ .advisory-page { background: var(--bg-primary); min-height: 100vh; } .advisory-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); } .advisory-list li { position: relative; padding-left: var(--space-5); color: var(--text-muted); font-family: var(--font-family); font-size: 15px; line-height: 1.6; } .advisory-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .advisory-faq-list { display: flex; flex-direction: column; gap: 0; } .advisory-faq-item { border-top: 1px solid var(--border); padding-top: var(--space-4); padding-bottom: var(--space-4); } .advisory-faq-item:last-child { border-bottom: 1px solid var(--border); } .advisory-faq-item h3 { font-size: 16px; margin-bottom: var(--space-2); } .advisory-faq-item p { max-width: none; } .advisory-faq-ctas { display: flex; justify-content: center; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-6); } .advisory-faq-heading { margin-bottom: var(--space-6); } /* FAQ accordion: collapsed by default, chevron rotates on open */ .faq-item summary { font-weight: 600; cursor: pointer; list-style: none; font-size: 16px; color: var(--text-primary, inherit); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "\203A"; display: inline-block; transform: rotate(90deg); transition: transform 0.2s ease; flex-shrink: 0; color: var(--accent); } .faq-item[open] summary::after { transform: rotate(270deg); } .faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .faq-item .faq-a { margin-top: var(--space-3); max-width: none; } .advisory-card-title { margin-bottom: var(--space-4); } .advisory-section--flush { padding-top: 0; } .advisory-note { margin-top: var(--space-5); max-width: none; } .advisory-note--centered { text-align: center; max-width: 640px; margin: 32px auto; } .advisory-cta { margin-top: var(--space-4); } .advisory-hero-title { max-width: var(--px-measure); } .advisory-closing-note { max-width: none; margin: var(--space-5) auto 0; } /* ---- 21. Landing (Advisor-only home) ---- */ .landing-page { background: var(--bg-primary); min-height: 100vh; } .landing-hero { text-align: center; } .landing-advisor-wrap { max-width: 720px; margin: 0 auto; } .landing-caption { font-size: 13px; color: var(--text-muted); margin: 0 auto var(--space-4); } /* ---- 22. Advisor chat panel (home hero card) + widget shared bits ---- */ .advisor-panel { background: linear-gradient(165deg, var(--bg-card), var(--accent-soft)); } .advisor-log { overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; } .advisor-msg { display: flex; } .advisor-msg-user { justify-content: flex-end; } .advisor-msg-assistant, .advisor-msg-action { justify-content: flex-start; } .advisor-bubble { max-width: 80%; padding: 10px 16px; border-radius: 14px; font-size: 0.92rem; line-height: 1.5; } .advisor-bubble-user { background: var(--accent); color: #FFFFFF; } .advisor-bubble-assistant { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border); } .advisor-action-btn { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: #FFFFFF; font-weight: 600; font-size: 0.85rem; text-decoration: none; } .advisor-chip { border: 1px solid var(--border); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; border-radius: 999px; padding: 8px 14px; font-size: 0.82rem; cursor: pointer; transition: border-color 0.15s ease; } .advisor-chip:hover { border-color: var(--accent); } .advisor-chips-row { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 20px; margin-bottom: var(--space-4); } .advisor-form-row { display: flex; gap: 10px; padding: 0 20px var(--space-2); } .advisor-input { flex: 1; padding: 12px 16px; font-size: 0.95rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-input, #fff); color: var(--text-primary); } .advisor-reset-row { text-align: center; padding: 4px 20px; } .advisor-reset-btn { background: none; border: none; color: var(--text-muted); font-size: 0.78rem; text-decoration: underline; cursor: pointer; } .sr-only-label { position: absolute; left: -9999px; } /* ---- 23. Webinar / HTC Build Session page ---- */ .webinar-hero { text-align: center; } .webinar-meta-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); margin: 0; padding: 0; color: var(--text-muted); font-size: 14px; } .webinar-section-head { text-align: center; max-width: var(--px-measure); margin: 0 auto var(--space-6); } .webinar-quote-wrap { text-align: center; } .webinar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); } .webinar-act { display: flex; gap: var(--space-5); align-items: flex-start; padding: var(--space-5) 0; border-top: 1px solid var(--border); } .webinar-act:first-of-type { border-top: none; } .webinar-num { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 18px; } .webinar-time { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); margin-bottom: var(--space-1); } .webinar-offer-block { text-align: center; max-width: 480px; margin: 0 auto; } .webinar-note { text-align: center; margin: var(--space-6) auto 0; } .webinar-ip-notice { text-align: center; color: var(--text-muted); font-size: 12px; padding: var(--space-6) var(--space-4); } /* V5 page: home */ #advisor .advisor-bubble-assistant { border: none; } /* V5 page: advisory The sitewide advisor-widget partial (templates/partials/advisor_widget.html) ships legacy card/button styling (hairline+shadow panel, flat .btn-primary). This page can't edit that shared partial, so the_advisory.html tags the widget's own nodes with these two classes at runtime and we override just those instances here to match the V5 card + gradient-CTA spec. */ .advisory-advisor-panel { background: linear-gradient(165deg, var(--bg-card), var(--bg-tertiary)) !important; border: none !important; border-radius: 28px !important; box-shadow: 0 2px 3px rgba(38, 35, 59, 0.06), 0 16px 38px rgba(108, 76, 224, 0.11) !important; } [data-theme="dark"] .advisory-advisor-panel { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35), 0 16px 38px rgba(0, 0, 0, 0.5) !important; } .advisory-advisor-send.btn.btn-primary { background: linear-gradient(135deg, var(--accent-3), var(--accent)) !important; border: none !important; border-radius: 999px !important; box-shadow: 0 10px 24px -12px var(--accent) !important; } .advisory-advisor-send.btn.btn-primary:hover { filter: brightness(1.06); } /* V5 page: aux - .px-page-bg defined once in section 15 above. */ /* V5: KIE-generated silk veil layered into the hero panel (owner-requested hero image) */ .px-hero { background-image: url('/static/img/hero-veil-light.jpg'); background-size: cover; background-position: left center; background-repeat: no-repeat; } [data-theme="dark"] .px-hero { background-image: linear-gradient(rgba(18,14,32,0.74), rgba(18,14,32,0.60)), url('/static/img/hero-veil-dark.jpg'); } /* V5: breathing room between the nav and the hero panel (owner note 2026-07-15) */ .px-hero { margin: 34px auto 0; max-width: min(var(--px-max-width), calc(100% - 48px)); } .px-hero .px-h1, .landing-hero .px-h1 { font-size: clamp(28px, 2.6vw, 38px); } /* V5: per-page monochromatic hero veils (KIE, owner-approved theme set) */ .landing-hero { background-image: url('/static/img/hero-home-light.jpg'); } [data-theme="dark"] .landing-hero { background-image: linear-gradient(rgba(18,14,32,0.74), rgba(18,14,32,0.60)), url('/static/img/hero-home-dark.jpg'); } .advisory-hero { background-image: url('/static/img/hero-advisory-light.jpg'); } [data-theme="dark"] .advisory-hero { background-image: linear-gradient(rgba(18,14,32,0.74), rgba(18,14,32,0.60)), url('/static/img/hero-advisory-dark.jpg'); } .webinar-hero { background-image: url('/static/img/hero-webinar-light.jpg'); } [data-theme="dark"] .webinar-hero { background-image: linear-gradient(rgba(18,14,32,0.74), rgba(18,14,32,0.60)), url('/static/img/hero-webinar-dark.jpg'); } .offers-hero { background-image: url('/static/img/hero-offers-light.jpg'); } [data-theme="dark"] .offers-hero { background-image: linear-gradient(rgba(18,14,32,0.74), rgba(18,14,32,0.60)), url('/static/img/hero-offers-dark.jpg'); } .audit-intro-panel { background-image: url('/static/img/hero-audit-light.jpg'); background-size: cover; background-position: left center; } [data-theme="dark"] .audit-intro-panel { background-image: linear-gradient(rgba(18,14,32,0.74), rgba(18,14,32,0.60)), url('/static/img/hero-audit-dark.jpg'); } /* V5: center pull-quote cards (owner note: left-stuck card reads uncentered) */ .px-quote { margin-left: auto; margin-right: auto; max-width: 780px; text-align: center; } /* V5: uniform chips (owner note: ragged shapes/wrapping in price pills) */ .px-chip, .chip, .px-hero-chips > *, .ladder-price-chip, .badge-pill { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 34px; padding: 7px 16px; border-radius: 999px; font-size: 11px; letter-spacing: 0.08em; line-height: 1.35; white-space: normal; max-width: 240px; } /* V5: warm gradient lettering on violet buttons (owner request 2026-07-15) */ .px-grad-label { background-image: linear-gradient(135deg, #F7C948 0%, #F4B60C 45%, #EE5A0E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .px-grad-label { color: #F4B60C; } } .px-cta, .btn-primary, .advisor-send { color: #F4B60C; } /* Warm (orange) CTAs keep solid ink lettering; gradient text is for violet buttons only */ .px-cta--warm { color: #1A1426; } .px-cta--warm .px-grad-label { background-image: none; -webkit-background-clip: initial; background-clip: initial; color: #1A1426; } /* V5 revision: violet-button lettering is WHITE at rest; the warm gradient is a HOVER glow */ .px-cta .px-grad-label, .btn-primary .px-grad-label, .advisor-send .px-grad-label { background-image: none; -webkit-background-clip: initial; background-clip: initial; color: #FFFFFF; transition: color 150ms ease; } .px-cta, .btn-primary, .advisor-send { color: #FFFFFF; } .px-cta:hover .px-grad-label, .px-cta:focus-visible .px-grad-label, .btn-primary:hover .px-grad-label, .btn-primary:focus-visible .px-grad-label, .advisor-send:hover .px-grad-label, .advisor-send:focus-visible .px-grad-label { background-image: linear-gradient(135deg, #F7C948 0%, #F4B60C 45%, #EE5A0E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .px-cta:hover, .btn-primary:hover, .advisor-send:hover { box-shadow: 0 0 22px rgba(244, 182, 12, 0.40), 0 6px 16px -8px rgba(108, 76, 224, 0.5); } .px-cta--warm, .px-cta--warm:hover { color: #1A1426; } .px-cta--warm:hover .px-grad-label { background-image: none; color: #1A1426; } @media (prefers-reduced-motion: reduce) { .px-grad-label { transition: none; } } /* V5: social proof (quotes + strip + authority) */ .sp-stars { color: #F4B60C; font-size: 15px; letter-spacing: 2px; display: block; margin-bottom: 10px; } .px-quote cite { font-style: normal; font-size: 13px; color: var(--muted, #5F5A79); display: block; margin-top: 12px; } .px-quote cite b { color: var(--accent-ink, #3F2C82); } .sp-strip { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--bg-card, #fff); border-radius: 999px; padding: 12px 26px; max-width: 560px; margin: 34px auto; font-size: 14px; box-shadow: 0 1px 3px rgba(38,35,59,.08); } .sp-auth { max-width: 800px; margin: 30px auto 0; text-align: center; font-size: 15px; line-height: 1.7; color: var(--text-muted, #5F5A79); } /* V5 polish: centered included-list block + minimum breathing room */ .offer-bullets { max-width: 640px; margin: 28px auto; text-align: left; } .px-quote { margin-top: 34px; margin-bottom: 34px; } .advisory-note--centered + * , .px-quote + .px-cta, .faq-item:first-of-type { margin-top: 28px; } /* ===================================================================== ACCESSIBILITY DISPLAY PREFERENCES (first-party panel, 2026-07-26) Kept at the END of this file on purpose: the axs-* classes are user-chosen overrides and must win the cascade over every component section above (TTS Design System V5 cascade-order rule). Classes are toggled on by templates/partials/access_panel.html and persisted in localStorage key tts_axs. ===================================================================== */ /* Launcher: mid-LEFT edge, vertically centered (owner note 2026-07-26) -- bigger (56px) and labeled "Access" so it can't be missed, clear of the theme toggle (top-right), the Advisor widget (bottom-right) and the cookie banner (bottom). */ #axs-launcher { position: fixed; top: 50%; left: 14px; transform: translateY(-50%); z-index: 9990; width: 56px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; border-radius: 20px; background: linear-gradient(165deg, var(--bg-card), var(--bg-tertiary)); border: 1px solid var(--border); color: var(--accent-ink); cursor: pointer; box-shadow: 0 2px 3px rgba(38, 35, 59, 0.06), 0 16px 34px rgba(108, 76, 224, 0.16); } [data-theme="dark"] #axs-launcher { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35), 0 16px 34px rgba(0, 0, 0, 0.5); } #axs-launcher:hover, #axs-launcher:focus-visible { border-color: var(--accent); color: var(--accent); } #axs-launcher svg { width: 22px; height: 22px; flex-shrink: 0; } #axs-launcher-label { font-family: var(--font-family); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; } @media (max-width: 640px) { /* Still mid-left, but slimmer so it never eats into narrow content. */ #axs-launcher { width: 48px; min-height: 48px; left: 8px; border-radius: 18px; } #axs-launcher svg { width: 20px; height: 20px; } #axs-launcher-label { font-size: 9px; } } @media (prefers-reduced-motion: no-preference) { #axs-launcher { transition: background 150ms ease, border-color 150ms ease, color 150ms ease; } } /* Panel: bigger, easier to read, opens beside the launcher on desktop and as a centered sheet on small screens (owner note 2026-07-26). */ #axs-panel { position: fixed; top: 50%; left: 82px; transform: translateY(-50%); z-index: 9991; width: min(320px, calc(100vw - 32px)); background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 2px 3px rgba(38, 35, 59, 0.06), 0 24px 52px rgba(108, 76, 224, 0.16); overflow: hidden; font-family: inherit; } [data-theme="dark"] #axs-panel { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35), 0 24px 52px rgba(0, 0, 0, 0.5); } #axs-panel[hidden] { display: none; } @media (max-width: 640px) { /* Centered sheet, within one-hand reach. */ #axs-panel { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100vw - 40px)); max-height: calc(100vh - 48px); overflow-y: auto; } } #axs-panel .axs-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); color: var(--text-primary); font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; } #axs-close { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 999px; } #axs-close:hover { color: var(--text-primary); background: var(--accent-soft); } #axs-panel .axs-panel-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; } /* Toggle buttons: the label IS the button. Off = neutral light surface + black lettering; on = a bright, per-feature hue + black lettering, so the state is unmistakable at a glance (owner's explicit ask, 2026-07-26). Kept as rounded pills with a soft shadow to stay harmonious with the rest of V5. Off state is intentionally the same light neutral in both themes -- black-on-light reads best for "unmistakable off" regardless of site theme. */ .axs-toggle { display: flex; align-items: center; justify-content: flex-start; width: 100%; text-align: left; padding: 14px 18px; border-radius: 16px; border: none; background: #EDEAF7; color: #14100C; font-family: var(--font-family); font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgba(38, 35, 59, 0.08); transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; } .axs-toggle:hover { transform: translateY(-1px); } .axs-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .axs-toggle::before { content: ""; width: 10px; height: 10px; border-radius: 999px; margin-right: 12px; background: rgba(20, 16, 12, 0.25); flex-shrink: 0; } .axs-toggle[aria-pressed="true"] { box-shadow: 0 3px 4px rgba(38, 35, 59, 0.10), 0 8px 20px rgba(38, 35, 59, 0.16), inset 0 0 0 2px rgba(20, 16, 12, 0.18); } .axs-toggle[aria-pressed="true"]::before { background: #14100C; box-shadow: 0 0 0 3px rgba(20, 16, 12, 0.12); } /* Contrast, black text on bright bg, checked with the calc above: yellow 14.7:1, teal 11.8:1, lilac 10.6:1, orange 9.0:1, green 13.2:1. */ .axs-toggle--text[aria-pressed="true"] { background: #FFD43B; } .axs-toggle--contrast[aria-pressed="true"] { background: #2DD9C0; } .axs-toggle--font[aria-pressed="true"] { background: #C9A9FF; } .axs-toggle--links[aria-pressed="true"] { background: #FF8A3D; } .axs-toggle--motion[aria-pressed="true"] { background: #7CE38B; } #axs-panel .axs-reset { margin-top: 4px; width: 100%; padding: 12px 10px; border-radius: 16px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-family: var(--font-family); font-size: 14px; font-weight: 600; cursor: pointer; } #axs-panel .axs-reset:hover { color: var(--text-primary); border-color: var(--accent); background: var(--accent-soft); } /* Never show on admin pages */ body:has(.admin-layout) #axs-launcher, body:has(.admin-layout) #axs-panel { display: none; } /* The cookie/consent banner is public-site machinery; inside the admin it only obscures the bottom of every screen (2026-08-04 UI de-clutter). The admin's session cookie is essential and needs no consent prompt. */ body:has(.admin-layout) #privacy-notice { display: none !important; } /* --- Preference effects (toggled on ) --- */ /* Larger text */ html.axs-text { font-size: 118%; } /* High contrast */ html.axs-contrast body { filter: contrast(1.15); } html.axs-contrast a { text-decoration: underline; } html.axs-contrast, html.axs-contrast[data-theme="light"] { --text-muted: #3d3d3d; --text-subtle: #3d3d3d; } html.axs-contrast[data-theme="dark"] { --text-muted: #d8d8d8; --text-subtle: #d8d8d8; } /* Readable font */ html.axs-font body, html.axs-font body * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important; letter-spacing: 0.01em; } /* Highlight links */ html.axs-links a { text-decoration: underline !important; text-underline-offset: 2px; outline: 1px dashed currentColor; outline-offset: 2px; } /* Reduce motion / pause animations (user toggle) */ html.axs-motion *, html.axs-motion *::before, html.axs-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* System preference is always respected, regardless of the toggle */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------ MOBILE ADMIN NAVIGATION (2026-08-03 fix) Fixed top header + hamburger + slide-in drawer for the admin sidebar at phone/tablet widths. Base (hidden) state lives here; the <=768px media query below turns it on. Cascade-final block — keep at the end of this file. ------------------------------------------------------------ */ .sidebar-mobile-header { display: none; align-items: center; gap: var(--space-3); position: fixed; top: 0; left: 0; right: 0; height: var(--header-height, 56px); padding: 0 var(--space-4); background: var(--bg-secondary); border-bottom: 1px solid var(--border); z-index: var(--z-sidebar); } .sidebar-mobile-header .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; flex: 0 0 auto; border-radius: var(--radius-md); } .sidebar-mobile-header .brand-name { font-weight: var(--font-weight-bold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 12, 30, 0.45); z-index: calc(var(--z-sidebar) - 1); } @media (max-width: 768px) { .sidebar-mobile-header { display: flex; } .sidebar { top: 0; padding-top: var(--header-height, 56px); } .main-content { margin-left: 0 !important; padding-top: calc(var(--header-height, 56px) + var(--space-4)); padding-left: var(--space-4); padding-right: var(--space-4); } } /* ------------------------------------------------------------ MOBILE ADMIN CONTENT PASS (2026-08-04) The 2026-08-03 fix shipped the nav; this makes the page BODIES usable at phone widths. Wide content (tables, funnel flows) scrolls inside its own card instead of stretching the page. Cascade-final — keep after the nav block above. ------------------------------------------------------------ */ @media (max-width: 768px) { /* Wide tables: scroll within the card, never the page. :has() is scoped so card-bodies without tables keep visible overflow for dropdown/kebab menus. */ .admin-layout .card-body:has(table), .admin-layout .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Only genuinely wide tables (4+ columns) get a scroll floor; small key-value tables keep shrinking naturally. */ .admin-layout table:has(thead th:nth-child(4)) { min-width: 600px; } /* Filter/tab/action rows wrap instead of overflowing. */ .admin-layout .page-header, .admin-layout .card-header { flex-wrap: wrap; gap: var(--space-2); } /* Stat tiles and card grids collapse to one column — including the inline-styled fixed grids sprinkled through the admin templates (auto-fit grids already collapse on their own). */ .admin-layout .stats-grid, .admin-layout .card-grid, .admin-layout div[style*="grid-template-columns: 1fr 1fr"], .admin-layout div[style*="grid-template-columns: repeat(2"], .admin-layout div[style*="grid-template-columns: repeat(3"], .admin-layout div[style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; } /* Funnel flow visualization: horizontal scroll strip. */ .admin-layout .funnel-flow { overflow-x: auto; -webkit-overflow-scrolling: touch; } .admin-layout .funnel-flow > div[style*="flex: 1"] { flex: 0 0 auto !important; min-width: 150px; max-width: 180px; } /* Modals fit the viewport. */ .admin-layout .modal, .admin-layout [class*="modal-panel"] { max-width: calc(100vw - 24px); } /* Never allow the page itself to pan sideways. */ .admin-layout .main-content { overflow-x: hidden; } /* --- De-clutter pass (2026-08-04): breathing room + calmer type --- Phone widths get a consistent rhythm: one spacing unit between cards, compact headers, smaller data type, full-width touch targets. */ .admin-layout .page-header { margin-bottom: var(--space-4); } .admin-layout .page-header .page-title { font-size: 1.35rem; line-height: 1.2; } .admin-layout .page-header .page-subtitle { font-size: 0.85rem; } .admin-layout .card { margin-bottom: var(--space-4) !important; } .admin-layout .card-header { padding: var(--space-3) var(--space-4); } .admin-layout .card-title { font-size: 1rem; } .admin-layout .card-body { padding: var(--space-4); } .admin-layout .card-body[style*="padding: 0"] { padding: 0 !important; } .admin-layout table td, .admin-layout table th { padding: 10px 12px !important; font-size: 0.85rem; } .admin-layout .btn { min-height: 40px; } .admin-layout .funnel-flow { padding: var(--space-4) !important; gap: 4px; } /* Stat tiles: two-up compact grid reads better than one tall column of oversized tiles. .grid-4 is the dashboard KPI row. */ .admin-layout .stats-grid, .admin-layout .grid-4 { grid-template-columns: 1fr 1fr !important; gap: var(--space-3) !important; } .admin-layout .stat-card { padding: 12px 14px !important; gap: 10px !important; min-width: 0; /* let 1fr tracks shrink below content min-size */ } .admin-layout .stat-card > div { min-width: 0; } .admin-layout .stat-card div[style*="font-size: 1.5rem"] { font-size: 1.1rem !important; white-space: nowrap; } /* Decorative icon squares steal ~50px a phone column can't spare; the numbers matter, the icons don't. */ .admin-layout .stat-card > div[style*="width: 40px"] { display: none; } .admin-layout .stat-value { font-size: 1.3rem; } } /* --------------------------------------------------------------------------- System-demo video (36s VSL). Sits BELOW the Advisor chat by design — the live demo out-converts a recording of it, so the video's job is to rescue the visitor who scrolled instead of typing. --------------------------------------------------------------------------- */ .sysdemo { position: relative; margin: 0 0 var(--space-5); } .sysdemo-video { display: block; width: 100%; height: auto; border-radius: var(--radius-lg, 16px); border: 1px solid var(--px-line, rgba(0,0,0,.08)); background: #000; } .sysdemo-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; } .sysdemo-control { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; padding: 0; border: 1px solid var(--px-line, rgba(0,0,0,.16)); border-radius: 4px; color: var(--px-text, #17131f); background: var(--px-card, #fff); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; } .sysdemo-control:hover { border-color: var(--px-brand, #5B3DF5); } .sysdemo-control:focus-visible { outline: 2px solid var(--px-brand, #5B3DF5); outline-offset: 2px; } .sysdemo-icon { width: 16px; height: 16px; fill: currentColor; } .sysdemo-icon--pause, .sysdemo-icon--sound { display: none; } .sysdemo-play[data-playing='true'] .sysdemo-icon--play, .sysdemo-sound[data-muted='false'] .sysdemo-icon--muted { display: none; } .sysdemo-play[data-playing='true'] .sysdemo-icon--pause, .sysdemo-sound[data-muted='false'] .sysdemo-icon--sound { display: block; } .sysdemo-cap { font-size: 14px; font-weight: 650; color: var(--px-muted, #4A4653); } @media (max-width: 430px) { .sysdemo-controls { gap: 7px; } .sysdemo-control { width: 32px; height: 32px; flex-basis: 32px; } .sysdemo-cap { font-size: 13px; } } /* --------------------------------------------------------------------------- /services : a flat list of what is offered. Deliberately not a numbered ladder, because a visitor can legitimately start at any one of them. --------------------------------------------------------------------------- */ .services-lede { max-width: 62ch; margin-left: auto; margin-right: auto; } .services-hero-cta { display: flex; justify-content: center; margin-top: var(--space-4); } .services-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .services-card { display: flex; flex-direction: column; gap: 10px; padding: var(--space-5); } .services-card__title { margin: 0; } .services-card__sub { margin: 0; color: var(--muted); } .services-card__list { margin: 4px 0 0; padding-left: 20px; color: var(--muted); font-size: 15px; } .services-card__list li { margin-bottom: 6px; } .services-card__cta { margin-top: auto; align-self: flex-start; } .services-group__title { margin-bottom: 4px; } .services-group__job { color: var(--muted); margin: 0 0 var(--space-4); max-width: 60ch; } .services-close { max-width: 62ch; margin: 0 auto var(--space-4); } .services-faq__heading { margin-bottom: var(--space-4); } .services-faq__list { display: flex; flex-direction: column; gap: 10px; max-width: 780px; margin: 0 auto; } .services-faq__item { border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; } .services-faq__item summary { cursor: pointer; font-weight: 600; } .services-faq__item[open] summary { margin-bottom: 10px; } .services-faq__cta { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; } @media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } .services-card__cta { align-self: stretch; text-align: center; } }