/* ============================================================================ HELIOS MODULE BRIDGE — v2 palette overrides for legacy hardcoded colors ============================================================================ Charge APRÈS helios-stellar-polish.css. Cible les patterns hardcodés des modules qui n'utilisent pas les CSS vars et les force vers la palette Stellar (Indigo / Slate). STRATÉGIE : - PRIMARY CTAs hardcoded magenta/violet → indigo - Rainbow stripes (blue→violet→pink) → indigo gradient - Kanban col data-color attributes → palette harmonisée - KPI icon gradients → palette cohérente - GARDE pink/magenta pour les contextes sémantiques (danger, love, social) ============================================================================ */ /* ============================================================================ 1. DASHBOARD UNIFIED — rainbow stripes & KPI icons ============================================================================ */ /* Top accent stripe (was blue→violet→pink rainbow) */ .dashboard-stripe, .dashboard-accent, .dashboard-hero::before, .hub-card-accent, .hub-stripe, .module-stripe { background: linear-gradient(90deg, var(--hx-indigo-500), var(--hx-violet-500), var(--hx-sky-500)) !important; } /* KPI mini icons */ .dashboard-kpi-mini-icon.pink, .kpi-icon.pink, .icon-badge.pink { background: linear-gradient(135deg, var(--hx-violet-500), var(--hx-indigo-600)) !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.30) !important; } .dashboard-kpi-mini-icon.cyan, .kpi-icon.cyan, .icon-badge.cyan { background: linear-gradient(135deg, var(--hx-sky-400), var(--hx-sky-600)) !important; box-shadow: 0 4px 12px rgba(14, 165, 233, 0.30) !important; } .dashboard-kpi-mini-icon.blue, .kpi-icon.blue, .icon-badge.blue { background: linear-gradient(135deg, var(--hx-indigo-400), var(--hx-indigo-600)) !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.30) !important; } .dashboard-kpi-mini-icon.violet, .dashboard-kpi-mini-icon.purple, .kpi-icon.violet, .icon-badge.violet, .icon-badge.purple { background: linear-gradient(135deg, var(--hx-violet-400), var(--hx-violet-600)) !important; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.30) !important; } .dashboard-kpi-mini-icon.green, .kpi-icon.green, .icon-badge.green, .icon-badge.success { background: linear-gradient(135deg, var(--hx-emerald-400), var(--hx-emerald-600)) !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.30) !important; } .dashboard-kpi-mini-icon.amber, .dashboard-kpi-mini-icon.orange, .kpi-icon.amber, .kpi-icon.orange, .icon-badge.amber, .icon-badge.orange, .icon-badge.warning { background: linear-gradient(135deg, var(--hx-amber-400), var(--hx-amber-600)) !important; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.30) !important; } .dashboard-kpi-mini-icon.red, .kpi-icon.red, .icon-badge.red, .icon-badge.danger { background: linear-gradient(135deg, var(--hx-rose-400), var(--hx-rose-600)) !important; box-shadow: 0 4px 12px rgba(244, 63, 94, 0.30) !important; } /* ============================================================================ 2. MINI KANBAN COLUMNS — harmonised palette ============================================================================ */ .mini-kanban-col[data-color="cyan"] { border-top-color: var(--hx-sky-500) !important; } .mini-kanban-col[data-color="blue"] { border-top-color: var(--hx-indigo-500) !important; } .mini-kanban-col[data-color="violet"] { border-top-color: var(--hx-violet-500) !important; } .mini-kanban-col[data-color="amber"] { border-top-color: var(--hx-amber-500) !important; } .mini-kanban-col[data-color="green"] { border-top-color: var(--hx-emerald-500) !important; } .mini-kanban-col[data-color="red"] { border-top-color: var(--hx-rose-500) !important; } /* ============================================================================ 3. CRM PROSPECTION — timeline icons & CTA ============================================================================ */ .crm-timeline-icon.proposal, .crm-timeline-icon.contract { background: linear-gradient(135deg, var(--hx-violet-500), var(--hx-indigo-600)) !important; } .crm-timeline-icon.meeting, .crm-timeline-icon.call { background: linear-gradient(135deg, var(--hx-sky-500), var(--hx-indigo-500)) !important; } .crm-timeline-icon.success, .crm-timeline-icon.won { background: linear-gradient(135deg, var(--hx-emerald-500), var(--hx-emerald-700)) !important; } /* CRM CTA — was violet→pink gradient */ .crm-cta-primary, .btn-crm-primary { background: linear-gradient(137.5deg, var(--hx-indigo-500), var(--hx-violet-500)) !important; } /* ============================================================================ 4. ATS MISSION CENTER — chip AI colors ============================================================================ */ :root { --chip-ai-violet: var(--hx-indigo-500); --chip-ai-pink: var(--hx-violet-500); --chip-ai-blue: var(--hx-sky-500); --chip-ai-green: var(--hx-emerald-500); } /* ============================================================================ 5. CRA ADMIN — pink CTA ============================================================================ */ .cra-admin .btn-primary, .cra-admin-cta, .cra-export-btn { background: linear-gradient(137.5deg, var(--hx-indigo-500), var(--hx-violet-500)) !important; border: none !important; } /* ============================================================================ 6. CANDIDATE INBOX / MODAL PREMIUM — kill old cyan→violet gradients ============================================================================ */ .candidate-modal-premium .btn-primary, .candidate-action-cta, .candidate-premium-header, .candidate-card-header { background: linear-gradient(137.5deg, var(--hx-indigo-500), var(--hx-violet-500)) !important; } /* ============================================================================ 7. HEADER UNIFIED — subtle indigo glow (was magenta legacy) ============================================================================ BUG FIX critique : l'override précédent mettait un linear-gradient OPAQUE indigo→violet sur ::after { inset:0 } qui couvrait toute la zone du header → le titre

en dessous devenait invisible. Solution : radial-gradient SUBTLE (matchant le pattern legacy radial) en indigo léger, pour décorer sans cacher le contenu. ============================================================================ */ .helios-header::after, .module-header::after { background: radial-gradient( ellipse at 50% 0%, rgba(99, 102, 241, 0.10) 0%, transparent 70% ) !important; } body.light-theme .helios-header::after, body.light-theme .module-header::after { background: radial-gradient( ellipse at 50% 0%, rgba(99, 102, 241, 0.06) 0%, transparent 70% ) !important; } /* ============================================================================ 8. CHAT MAGENTA → INDIGO ============================================================================ */ .chat-bubble.outgoing, .message-bubble.outgoing, .chat-message.is-self, .chat-cta-primary { background: linear-gradient(135deg, var(--hx-indigo-500), var(--hx-violet-500)) !important; } /* ============================================================================ 9. QUICK PASTE — replace HSL hardcoded ============================================================================ */ .quick-paste-cta, .quick-paste-button, .qp-primary-button { background: linear-gradient(137.5deg, var(--hx-indigo-500), var(--hx-violet-500)) !important; } /* ============================================================================ 10. QUICK LEAVE ADMIN — ql violet/magenta vars ============================================================================ */ :root { --ql-violet: var(--hx-indigo-500); --ql-magenta: var(--hx-violet-500); --ql-cyan: var(--hx-sky-500); } /* ============================================================================ 11. DOCUMENT GENERATOR — chip colors ============================================================================ */ .doc-chip.violet, .doc-chip.pink, .doc-chip.magenta { background: rgba(99, 102, 241, 0.15); color: var(--hx-indigo-400); border-color: rgba(99, 102, 241, 0.32); } /* ============================================================================ 12. ORGANIGRAMME — node colors ============================================================================ */ .org-node-leader, .org-node-manager { background: linear-gradient(137.5deg, var(--hx-indigo-500), var(--hx-violet-500)) !important; } /* ============================================================================ 13. AVATAR PLACEHOLDER GRADIENTS — harmonized ============================================================================ */ .avatar-placeholder, .avatar-fallback, .user-initials { background: linear-gradient(137.5deg, var(--hx-indigo-500), var(--hx-violet-500)) !important; color: #FFFFFF !important; } /* ============================================================================ 14. GOODIES CATALOG — playful but premium ============================================================================ */ .goodies-card-cta, .goodies-primary-btn { background: linear-gradient(137.5deg, var(--hx-indigo-500), var(--hx-violet-500)) !important; } /* ============================================================================ 15. FORUM POST — refined ============================================================================ */ .forum-post.is-pinned { border-left: 3px solid var(--hx-indigo-500) !important; } .forum-post:hover { border-color: rgba(99, 102, 241, 0.25) !important; } /* ============================================================================ 16. ATS WIZARD — kill rainbow gradient header ============================================================================ */ .ats-wizard-header, .ats-wizard-stripe { background: linear-gradient(90deg, var(--hx-indigo-500), var(--hx-violet-500), var(--hx-sky-500)) !important; } /* ============================================================================ 17. WALLET / FINANCE — clean dark cards ============================================================================ */ .wallet-balance-card, .wallet-premium-card { background: linear-gradient(137.5deg, var(--hx-indigo-700), var(--hx-violet-700)) !important; color: #FFFFFF !important; } /* ============================================================================ 18. NOTIFICATIONS BELL — refined ============================================================================ */ .notification-badge, .notif-count { background: var(--hx-rose-500) !important; color: #FFFFFF !important; box-shadow: 0 2px 6px rgba(244, 63, 94, 0.35); } /* ============================================================================ 19. COMMAND PALETTE (Ctrl+K) — premium ============================================================================ */ .command-palette-overlay { background: rgba(2, 6, 23, 0.65) !important; backdrop-filter: blur(12px); } .command-palette-modal { background: rgba(15, 23, 42, 0.95) !important; backdrop-filter: blur(32px) saturate(180%); border: 1px solid rgba(99, 102, 241, 0.20) !important; box-shadow: var(--shadow-2xl), 0 0 0 1px rgba(99, 102, 241, 0.15); } body.light-theme .command-palette-modal { background: #FFFFFF !important; border-color: var(--hx-slate-200) !important; } /* ============================================================================ 20. SOURCING HUB / TALENT HUB — refined cards ============================================================================ */ .source-card, .talent-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } .source-card .source-cta, .talent-card-cta { background: linear-gradient(137.5deg, var(--hx-indigo-500), var(--hx-violet-500)) !important; color: #FFFFFF !important; } /* ============================================================================ 21. IMPERSONATE BANNER — premium amber warning ============================================================================ */ .impersonate-banner { background: linear-gradient(90deg, var(--hx-amber-500), var(--hx-amber-700)) !important; color: var(--hx-slate-900) !important; font-weight: 600; } /* ============================================================================ 22. AUTH PAGES — login/forgot — refined glow ============================================================================ */ .auth-bg-accent, .bg-accent { background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 70%); filter: blur(60px); } /* ============================================================================ 23. WIZARDS / MODALS — stepper polish ============================================================================ */ .wizard-step.is-active .step-number, .stepper-step.active .step-circle { background: var(--hx-indigo-500) !important; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22); } .wizard-step.is-complete .step-number, .stepper-step.completed .step-circle { background: var(--hx-emerald-500) !important; } .wizard-stepper-line, .stepper-line { background: linear-gradient(90deg, var(--hx-indigo-500), var(--hx-violet-500)); } /* ============================================================================ 24. GLOBAL — anti-cyan-glow override ============================================================================ */ /* Kill harsh cyan glows on cards (very common across modules) */ .card[style*="rgba(99, 102, 241"], .glass-card[style*="rgba(99, 102, 241"] { box-shadow: var(--shadow-md) !important; } /* ============================================================================ 25. HUB HERO PREMIUM — kill cyan, use indigo persona gradient ============================================================================ */ .hub-hero-premium { --persona-gradient: linear-gradient(135deg, var(--hx-indigo-500) 0%, var(--hx-violet-500) 100%) !important; --persona-glow: rgba(99, 102, 241, 0.40) !important; background: linear-gradient(137.5deg, rgba(99, 102, 241, 0.08), rgba(15, 23, 42, 0.6)) !important; border-color: rgba(99, 102, 241, 0.20) !important; } body.light-theme .hub-hero-premium { background: linear-gradient(137.5deg, rgba(99, 102, 241, 0.06), #FFFFFF) !important; border-color: rgba(99, 102, 241, 0.18) !important; } /* Avatar shadow indigo (au lieu de blue/violet fallback #667eea) */ .hub-hero-avatar, .hub-hero-avatar-placeholder { box-shadow: 0 8px 21px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.08), 0 0 21px var(--persona-glow, rgba(99, 102, 241, 0.40)) !important; } /* ============================================================================ 26. ONBOARDING TOOLTIPS — kill cyan halos, use indigo ============================================================================ */ .onboarding-tooltip, .onboarding-modal, .tour-tooltip, .tour-step { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45), 0 0 34px rgba(99, 102, 241, 0.30), var(--shadow-xl) !important; } @keyframes hxOnboardingPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45), 0 0 21px rgba(99, 102, 241, 0.25); } 50% { box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.65), 0 0 55px rgba(99, 102, 241, 0.40); } } .onboarding-spotlight, .tour-spotlight { animation: hxOnboardingPulse 2.4s ease-in-out infinite !important; } .onboarding-btn-next, .tour-btn-next, .tour-btn-primary { background: linear-gradient(137.5deg, var(--hx-indigo-500), var(--hx-violet-500)) !important; box-shadow: 0 4px 13px rgba(99, 102, 241, 0.40) !important; color: #FFFFFF !important; } .onboarding-btn-next:hover, .tour-btn-next:hover { box-shadow: 0 8px 21px rgba(99, 102, 241, 0.55) !important; transform: translateY(-1px); } /* ============================================================================ 27. KPI / METRICS CARDS — top accent bars (kill old palette) ============================================================================ */ .metric-card::before, .kpi-card::before, .metric-card[data-trend]::before { background: linear-gradient(90deg, var(--hx-indigo-500), var(--hx-violet-500)) !important; } /* Trend colors */ .metric-card.is-up::before, .kpi-card.up::before { background: linear-gradient(90deg, var(--hx-emerald-400), var(--hx-emerald-600)) !important; } .metric-card.is-down::before, .kpi-card.down::before { background: linear-gradient(90deg, var(--hx-rose-400), var(--hx-rose-600)) !important; } .metric-card.is-warning::before { background: linear-gradient(90deg, var(--hx-amber-400), var(--hx-amber-600)) !important; } /* ============================================================================ 28. SUNBURST / GAUGES — refined chart palette ============================================================================ */ .gauge-fg, .gauge-progress { stroke: var(--hx-indigo-500); } .gauge-bg { stroke: rgba(148, 163, 184, 0.20); } /* ============================================================================ 29. ATS GRID + DESIGN SYSTEM — kill cyan residuals (rgba 0,191,255 hardcoded) ============================================================================ ats-grid-unified.css et ats-design-system.css ont 43 occurrences cyan non-bridged. On override en masse pour les composants visibles. ============================================================================ */ .ats-grid, .ats-grid-unified, .ats-grid-row:hover, .ats-grid-cell-action { --grid-accent: var(--hx-indigo-500); } .ats-grid-row:hover { background: rgba(99, 102, 241, 0.06) !important; } .ats-grid-cell-action:hover { color: var(--hx-indigo-400) !important; } .ats-skill-pill, .ats-tag, .skill-pill, .skill-chip { background: rgba(99, 102, 241, 0.10) !important; color: var(--hx-indigo-300) !important; border: 1px solid rgba(99, 102, 241, 0.25) !important; } body.light-theme .ats-skill-pill, body.light-theme .ats-tag, body.light-theme .skill-pill, body.light-theme .skill-chip { color: var(--hx-indigo-700) !important; } /* ATS focus rings & badges */ .ats-grid-cell:focus-visible, .ats-grid-input:focus, .ats-grid-select:focus { outline: 2px solid var(--hx-indigo-500) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important; } /* ============================================================================ 30. CANDIDATE INBOX — kill cyan residuals ============================================================================ */ .candidate-inbox-card, .candidate-card, .inbox-card { background: var(--bg-card) !important; border-color: var(--border-color) !important; } .candidate-inbox-card:hover, .candidate-card:hover, .inbox-card:hover { border-color: rgba(99, 102, 241, 0.32) !important; background: var(--bg-card-hover) !important; } .candidate-inbox-search input:focus, .inbox-search input:focus { border-color: var(--hx-indigo-500) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important; } /* ============================================================================ 31. ORGANIGRAMME — ensure name text readable on dark ============================================================================ */ body:not(.light-theme) .org-card, body:not(.light-theme) .org-node { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } body:not(.light-theme) .org-card .org-name, body:not(.light-theme) .org-card-name, body:not(.light-theme) .org-node-name, body:not(.light-theme) .org-card h3, body:not(.light-theme) .org-card h4, body:not(.light-theme) .org-card .name { color: var(--text-primary) !important; font-weight: 600; } body:not(.light-theme) .org-card .org-role, body:not(.light-theme) .org-card-role, body:not(.light-theme) .org-card .role, body:not(.light-theme) .org-card .title, body:not(.light-theme) .org-card-meta { color: var(--text-secondary) !important; } /* ============================================================================ 32. CANDIDATES VIEW — kanban readable ============================================================================ */ body:not(.light-theme) .vivier-candidate-card, body:not(.light-theme) .candidate-card-name, body:not(.light-theme) .vivier-kanban-card .name, body:not(.light-theme) .candidate-row .candidate-name { color: var(--text-primary) !important; } body:not(.light-theme) .vivier-kanban-card .meta, body:not(.light-theme) .candidate-card .meta, body:not(.light-theme) .candidate-position, body:not(.light-theme) .candidate-company { color: var(--text-secondary) !important; } /* ============================================================================ 33. INVOICE / SALARY / KPI — visible labels & values ============================================================================ */ body:not(.light-theme) .invoice-status, body:not(.light-theme) .salary-amount, body:not(.light-theme) .kpi-value-large, body:not(.light-theme) .metric-number { color: var(--text-primary) !important; }