/* Theme definitions — loaded by all templates. Default (no data-theme attribute) = deep-ocean. Override via data-theme="rain-forest" on . */ :root, [data-theme="deep-ocean"] { --primary: #1a56db; --primary-hover: #1648b8; --bg-dark: #0f172a; --bg-dark-rgb: 15,23,42; --bg-card: #1e293b; --bg-card-hover: #263548; --bg-input: #0f172a; --text-white: #f8fafc; --text-accent: #60a5fa; --text-muted: #a8b9d1; --border: #334155; --border-color: #334155; --placeholder: #475569; --success: #22c55e; --success-bg: rgba(34,197,94,0.1); --warning: #f59e0b; --error: #ef4444; --error-bg: rgba(239,68,68,0.1); --icon-bg: rgba(26,86,219,0.15); --icon-border: rgba(26,86,219,0.3); --card-glow: rgba(26,86,219,0.15); } [data-theme="rain-forest"] { --primary: #1ba74e; --primary-hover: #178c42; --bg-dark: #0b2013; --bg-dark-rgb: 11,32,19; --bg-card: #162c1d; --bg-card-hover: #1e3a25; --bg-input: #0b2013; --text-white: #f8fafc; --text-accent: #60fa84; --text-muted: #a8d1b3; --border: #2b4833; --border-color: #2b4833; --placeholder: #476950; --success: #22c55e; --success-bg: rgba(34,197,94,0.1); --warning: #f59e0b; --error: #ef4444; --error-bg: rgba(239,68,68,0.1); --icon-bg: rgba(26,219,97,0.15); --icon-border: rgba(26,219,97,0.3); --card-glow: rgba(26,219,97,0.15); } [data-theme="brick-and-mortar"] { --primary: #c2602a; --primary-hover: #a84f20; --bg-dark: #1a1210; --bg-dark-rgb: 26,18,16; --bg-card: #2a211d; --bg-card-hover: #352a25; --bg-input: #1a1210; --text-white: #f5f0ec; --text-accent: #e8a47a; --text-muted: #b8a99d; --border: #3d322c; --border-color: #3d322c; --placeholder: #6b5a4f; --success: #22c55e; --success-bg: rgba(34,197,94,0.1); --warning: #f59e0b; --error: #ef4444; --error-bg: rgba(239,68,68,0.1); --icon-bg: rgba(194,96,42,0.15); --icon-border: rgba(194,96,42,0.3); --card-glow: rgba(194,96,42,0.15); } [data-theme="purple-rain"] { --primary: #7c3aed; --primary-hover: #6a2dc7; --bg-dark: #110d1b; --bg-dark-rgb: 17,13,27; --bg-card: #1e1730; --bg-card-hover: #28203d; --bg-input: #110d1b; --text-white: #f3f0fa; --text-accent: #b794f6; --text-muted: #a89ec4; --border: #332b4d; --border-color: #332b4d; --placeholder: #564b72; --success: #22c55e; --success-bg: rgba(34,197,94,0.1); --warning: #f59e0b; --error: #ef4444; --error-bg: rgba(239,68,68,0.1); --icon-bg: rgba(124,58,237,0.15); --icon-border: rgba(124,58,237,0.3); --card-glow: rgba(124,58,237,0.15); } [data-theme="chalk-and-coal"] { --primary: #6b7280; --primary-hover: #555d6a; --bg-dark: #18191b; --bg-dark-rgb: 24,25,27; --bg-card: #26282c; --bg-card-hover: #303236; --bg-input: #18191b; --text-white: #f0eeeb; --text-accent: #d1cdc7; --text-muted: #9ca3af; --border: #3a3c41; --border-color: #3a3c41; --placeholder: #5c5f66; --success: #22c55e; --success-bg: rgba(34,197,94,0.1); --warning: #f59e0b; --error: #ef4444; --error-bg: rgba(239,68,68,0.1); --icon-bg: rgba(107,114,128,0.15); --icon-border: rgba(107,114,128,0.3); --card-glow: rgba(107,114,128,0.15); } [data-theme="blue-echeveria"] { --primary: #0d9488; --primary-hover: #0b7e73; --bg-dark: #0a1514; --bg-dark-rgb: 10,21,20; --bg-card: #142726; --bg-card-hover: #1c3332; --bg-input: #0a1514; --text-white: #f0fafa; --text-accent: #5eead4; --text-muted: #94c4be; --border: #254543; --border-color: #254543; --placeholder: #3f6b67; --success: #22c55e; --success-bg: rgba(34,197,94,0.1); --warning: #f59e0b; --error: #ef4444; --error-bg: rgba(239,68,68,0.1); --icon-bg: rgba(13,148,136,0.15); --icon-border: rgba(13,148,136,0.3); --card-glow: rgba(13,148,136,0.15); } [data-theme="bloody-mary"] { --primary: #b91c1c; --primary-hover: #9b1818; --bg-dark: #1a0f0f; --bg-dark-rgb: 26,15,15; --bg-card: #2a1a1a; --bg-card-hover: #352222; --bg-input: #1a0f0f; --text-white: #faf0f0; --text-accent: #f87171; --text-muted: #c4a0a0; --border: #3d2828; --border-color: #3d2828; --placeholder: #6b4444; --success: #22c55e; --success-bg: rgba(34,197,94,0.1); --warning: #f59e0b; --error: #ef4444; --error-bg: rgba(239,68,68,0.1); --icon-bg: rgba(185,28,28,0.15); --icon-border: rgba(185,28,28,0.3); --card-glow: rgba(185,28,28,0.15); } /* --------------------------------------------------------------------------- Light siblings — every dark theme "" has a "light-" twin on a shared warm off-white canvas (#faf9f7), keeping the theme's brand --primary. Activated by the floating toggle (/static/theme-toggle.js), which flips the "light-" prefix on the active theme and records the choice in localStorage.lead_theme_mode so it survives partner/default theme overrides. --------------------------------------------------------------------------- */ [data-theme="light-deep-ocean"] { --primary: #1a56db; --primary-hover: #1648b8; --bg-dark: #faf9f7; --bg-dark-rgb: 250,249,247; --bg-card: #ffffff; --bg-card-hover: #f6f8fe; --bg-input: #ffffff; --text-white: #1a1410; --text-accent: #1d4ed8; --text-muted: #5c5349; --border: #e7e3dd; --border-color: #e7e3dd; --placeholder: #6e665d; --success: #15803d; --success-bg: rgba(34,197,94,0.12); --warning: #b45309; --error: #c81e1e; --error-bg: rgba(239,68,68,0.10); --icon-bg: rgba(26,86,219,0.12); --icon-border: rgba(26,86,219,0.25); --card-glow: rgba(26,86,219,0.10); } [data-theme="light-rain-forest"] { --primary: #1ba74e; --primary-hover: #178c42; --bg-dark: #faf9f7; --bg-dark-rgb: 250,249,247; --bg-card: #ffffff; --bg-card-hover: #f6fbf8; --bg-input: #ffffff; --text-white: #1a1410; --text-accent: #15803d; --text-muted: #5c5349; --border: #e7e3dd; --border-color: #e7e3dd; --placeholder: #6e665d; --success: #15803d; --success-bg: rgba(34,197,94,0.12); --warning: #b45309; --error: #c81e1e; --error-bg: rgba(239,68,68,0.10); --icon-bg: rgba(27,167,78,0.12); --icon-border: rgba(27,167,78,0.25); --card-glow: rgba(27,167,78,0.10); } [data-theme="light-brick-and-mortar"] { --primary: #c2602a; --primary-hover: #a84f20; --bg-dark: #faf9f7; --bg-dark-rgb: 250,249,247; --bg-card: #ffffff; --bg-card-hover: #fdf9f6; --bg-input: #ffffff; --text-white: #1a1410; --text-accent: #a64f1f; --text-muted: #5c5349; --border: #e7e3dd; --border-color: #e7e3dd; --placeholder: #6e665d; --success: #15803d; --success-bg: rgba(34,197,94,0.12); --warning: #b45309; --error: #c81e1e; --error-bg: rgba(239,68,68,0.10); --icon-bg: rgba(194,96,42,0.12); --icon-border: rgba(194,96,42,0.25); --card-glow: rgba(194,96,42,0.10); } [data-theme="light-purple-rain"] { --primary: #7c3aed; --primary-hover: #6a2dc7; --bg-dark: #faf9f7; --bg-dark-rgb: 250,249,247; --bg-card: #ffffff; --bg-card-hover: #faf7fe; --bg-input: #ffffff; --text-white: #1a1410; --text-accent: #6d28d9; --text-muted: #5c5349; --border: #e7e3dd; --border-color: #e7e3dd; --placeholder: #6e665d; --success: #15803d; --success-bg: rgba(34,197,94,0.12); --warning: #b45309; --error: #c81e1e; --error-bg: rgba(239,68,68,0.10); --icon-bg: rgba(124,58,237,0.12); --icon-border: rgba(124,58,237,0.25); --card-glow: rgba(124,58,237,0.10); } [data-theme="light-chalk-and-coal"] { --primary: #6b7280; --primary-hover: #555d6a; --bg-dark: #faf9f7; --bg-dark-rgb: 250,249,247; --bg-card: #ffffff; --bg-card-hover: #f9f9fa; --bg-input: #ffffff; --text-white: #1a1410; --text-accent: #475569; --text-muted: #5c5349; --border: #e7e3dd; --border-color: #e7e3dd; --placeholder: #6e665d; --success: #15803d; --success-bg: rgba(34,197,94,0.12); --warning: #b45309; --error: #c81e1e; --error-bg: rgba(239,68,68,0.10); --icon-bg: rgba(107,114,128,0.12); --icon-border: rgba(107,114,128,0.25); --card-glow: rgba(107,114,128,0.10); } [data-theme="light-blue-echeveria"] { --primary: #0d9488; --primary-hover: #0b7e73; --bg-dark: #faf9f7; --bg-dark-rgb: 250,249,247; --bg-card: #ffffff; --bg-card-hover: #f5fbfa; --bg-input: #ffffff; --text-white: #1a1410; --text-accent: #0f766e; --text-muted: #5c5349; --border: #e7e3dd; --border-color: #e7e3dd; --placeholder: #6e665d; --success: #15803d; --success-bg: rgba(34,197,94,0.12); --warning: #b45309; --error: #c81e1e; --error-bg: rgba(239,68,68,0.10); --icon-bg: rgba(13,148,136,0.12); --icon-border: rgba(13,148,136,0.25); --card-glow: rgba(13,148,136,0.10); } [data-theme="light-bloody-mary"] { --primary: #b91c1c; --primary-hover: #9b1818; --bg-dark: #faf9f7; --bg-dark-rgb: 250,249,247; --bg-card: #ffffff; --bg-card-hover: #fcf6f6; --bg-input: #ffffff; --text-white: #1a1410; --text-accent: #b01616; --text-muted: #5c5349; --border: #e7e3dd; --border-color: #e7e3dd; --placeholder: #6e665d; --success: #15803d; --success-bg: rgba(34,197,94,0.12); --warning: #b45309; --error: #c81e1e; --error-bg: rgba(239,68,68,0.10); --icon-bg: rgba(185,28,28,0.12); --icon-border: rgba(185,28,28,0.25); --card-glow: rgba(185,28,28,0.10); } /* Floating light/dark toggle (injected by /static/theme-toggle.js). Token-driven so it matches the active theme. Bottom-LEFT (the LGPD consent banner card is centered, so the left corner stays clear on first visit). */ .theme-toggle { position: fixed; bottom: 20px; left: 20px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background: var(--bg-card); color: var(--text-white); border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); cursor: pointer; z-index: 900; transition: transform .15s ease, background .2s ease, border-color .2s ease; } .theme-toggle:hover { background: var(--bg-card-hover); border-color: var(--primary); transform: translateY(-2px); } .theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .theme-toggle svg { width: 20px; height: 20px; } @media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } .theme-toggle:hover { transform: none; } } /* Light-mode fixups for components that hardcode light-amber text or near-black text assuming a dark canvas. Scoped to light themes only, so the existing dark appearance is untouched. Covers the admin impersonation banner (replicated across dashboard/billing/cards/plans/landing) and the gestor role badge. */ [data-theme^="light-"] .impersonation-banner, [data-theme^="light-"] .impersonation-banner a, [data-theme^="light-"] .impersonation-banner strong, [data-theme^="light-"] .btn-stop-impersonation { color: var(--warning); } [data-theme^="light-"] .badge-gestor { color: #ffffff; } /* Light-canvas logo swap: the default Leadify wordmarks (logo.png / logov.png) are built for a dark background and vanish on the off-white canvas. Render the dark-wordmark variant instead. Scoped by [src$] so partner (white-label) logos — served from other paths — keep their own asset. content:url() on a replaced reacts to late src changes (auth pages set the logo via JS). */ [data-theme^="light-"] img[src$="/logo.png"], [data-theme^="light-"] img[src$="/logov.png"] { content: url(/static/logo_light_bg.png); }