/* ============================================================ Lxera CRM theme — design layer over Concord CRM 1.7.0 ------------------------------------------------------------ Loaded LAST in via resources/views/custom/includes/head.blade.php, so it wins over the Vite-built CSS without touching a single Vue component or rebuilding assets (there is no npm on this host). Concord drives its whole UI from the CSS variables in resources/css/variables.css, which live in @layer base. This file is unlayered, so it beats them in the cascade by design, not by !important. To remove the theme entirely: delete custom/includes/head.blade.php. ============================================================ */ /* ---------- 1. Design tokens -> Concord's variable contract ---------- Concord consumes these as "R, G, B" triplets inside rgb(var(--x)). */ :root { /* Lxera blue ramp (indigo -> #1024dd) */ --color-primary-50: 238, 241, 255; --color-primary-100: 223, 227, 255; --color-primary-200: 194, 201, 255; --color-primary-300: 167, 177, 250; --color-primary-400: 111, 124, 240; --color-primary-500: 61, 82, 229; --color-primary-600: 16, 36, 221; /* --blue #1024dd */ --color-primary-700: 12, 28, 192; /* hover #0c1cc0 */ --color-primary-800: 10, 23, 153; --color-primary-900: 8, 18, 117; /* Neutrals -> the design's ink/grey/line scale */ --color-neutral-50: 250, 251, 254; --color-neutral-100: 244, 246, 251; /* --crm-bg #f4f6fb */ --color-neutral-200: 231, 233, 240; /* --line #e7e9f0 */ --color-neutral-300: 212, 216, 227; --color-neutral-400: 137, 145, 160; /* --grey-2 #8991a0 */ --color-neutral-500: 112, 120, 136; --color-neutral-600: 80, 89, 103; /* --grey #505967 */ --color-neutral-700: 60, 66, 80; --color-neutral-800: 34, 36, 44; --color-neutral-900: 22, 23, 28; /* --ink #16171c */ /* Success -> Lxera teal-green */ --color-success-50: 230, 251, 245; --color-success-100: 200, 242, 230; --color-success-200: 157, 233, 213; --color-success-300: 93, 222, 190; --color-success-400: 29, 225, 186; /* --teal #1de1ba */ --color-success-500: 18, 185, 140; /* --green #12b98c */ --color-success-600: 15, 138, 109; --color-success-700: 12, 110, 87; --color-success-800: 10, 88, 70; --color-success-900: 8, 70, 56; /* Warning -> amber #d9902b */ --color-warning-50: 255, 244, 229; --color-warning-100: 254, 235, 205; --color-warning-200: 252, 219, 165; --color-warning-300: 246, 195, 116; --color-warning-400: 231, 168, 70; --color-warning-500: 217, 144, 43; --color-warning-600: 179, 120, 31; --color-warning-700: 143, 95, 24; --color-warning-800: 114, 76, 19; --color-warning-900: 92, 61, 15; /* Danger -> red #e0483f */ --color-danger-50: 253, 236, 236; --color-danger-100: 251, 217, 214; --color-danger-200: 246, 207, 203; --color-danger-300: 240, 160, 153; --color-danger-400: 232, 114, 105; --color-danger-500: 224, 72, 63; --color-danger-600: 196, 56, 48; --color-danger-700: 162, 44, 38; --color-danger-800: 130, 35, 30; --color-danger-900: 104, 28, 24; /* Shell chrome */ --sidebar-bg-color: 255, 255, 255; --navbar-bg-color: rgba(255, 255, 255, 0.86); --navbar-height: 4rem; /* Local helpers used below */ --lx-line: #e7e9f0; --lx-line-soft: #eef0f6; --lx-ink: #16171c; --lx-grey: #505967; --lx-grey-2: #8991a0; --lx-blue: #1024dd; --lx-radius: 16px; } /* Keep dark mode genuinely dark — the white sidebar is a light-mode look. */ html.dark { --sidebar-bg-color: 15, 23, 42; --navbar-bg-color: rgba(22, 23, 28, 0.86); } /* ---------- 2. Typography ---------- */ body, .font-sans { font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, .text-lg, .text-xl, .text-2xl { letter-spacing: -0.01em; } /* Numerals read better in the design's mono face */ .font-mono, code, kbd, pre, samp { font-family: 'IBM Plex Mono', ui-monospace, monospace; } /* ---------- 3. Page canvas ---------- */ html:not(.dark) body, html:not(.dark) #app { background-color: #f4f6fb; } /* ---------- 4. Sidebar: white shell, blue active pill ---------- Concord ships a DARK sidebar, so everything inside it is painted for a dark panel: nav labels and the metrics block use text-neutral-50, icons use text-neutral-300, the active item uses bg-white/10 + text-white. All of that is invisible or unreadable once the panel turns white, so the rules below restate the sidebar palette wholesale. Scope is the sidebar WRAPPER (the element carrying the --sidebar-bg-color class), not #sidebar-lg: the metrics list and the logo live outside that nav but inside the same panel, and scoping to the nav alone left them white-on- white. Matches the desktop column and the mobile dialog panel alike. */ html:not(.dark) [class*='sidebar-bg-color'] { border-inline-end: 1px solid var(--lx-line); } html:not(.dark) [class*='sidebar-bg-color'] .text-neutral-50, html:not(.dark) [class*='sidebar-bg-color'] .text-white, html:not(.dark) [class*='sidebar-bg-color'] a, html:not(.dark) [class*='sidebar-bg-color'] button { color: #3c4250; } html:not(.dark) [class*='sidebar-bg-color'] .text-neutral-300, html:not(.dark) [class*='sidebar-bg-color'] a svg, html:not(.dark) [class*='sidebar-bg-color'] button svg { color: #8a90a0; } html:not(.dark) [class*='sidebar-bg-color'] a, html:not(.dark) [class*='sidebar-bg-color'] button { border-radius: 10px; transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; } html:not(.dark) [class*='sidebar-bg-color'] a:hover, html:not(.dark) [class*='sidebar-bg-color'] button:hover { background-color: #f4f6fb; color: var(--lx-ink); } html:not(.dark) [class*='sidebar-bg-color'] a:hover svg { color: var(--lx-blue); } /* Active item: Concord's bg-white/10 is transparent on a white panel, so repaint it as the design's solid blue pill. !important because these fight Tailwind utilities carried on the same element. */ html:not(.dark) [class*='sidebar-bg-color'] .bg-white\/10 { background-color: var(--lx-blue) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(16, 36, 221, 0.22); } html:not(.dark) [class*='sidebar-bg-color'] .bg-white\/10 svg, html:not(.dark) [class*='sidebar-bg-color'] .bg-white\/10 span { color: #fff !important; } /* ---------- 5. Navbar: glassy, matches the design topbar ---------- */ html:not(.dark) nav.bg-\[var\(--navbar-bg-color\)\], html:not(.dark) header, html:not(.dark) [class*="navbar"] { backdrop-filter: blur(10px); } /* The logo slot the sidebar reads (logo_light) now holds the colour logo, so it reads on the white panel. Dark mode keeps a dark panel — lift it back to white there rather than shipping a third asset. */ html.dark .bg-\[rgb\(var\(--sidebar-bg-color\)\)\] img, html.dark .bg-\[rgb\(var\(--sidebar-dark-bg-color\)\)\] img { filter: brightness(0) invert(1); } /* ---------- 6. Cards, panels and surfaces ---------- Deliberately NOT restyling the generic .rounded-* utilities: Concord uses them on menu items, avatars and inputs too, and a blanket radius bloats those. Only card-like surfaces are widened. */ html:not(.dark) .bg-white.shadow, html:not(.dark) .bg-white.shadow-sm, html:not(.dark) .bg-white.rounded-lg, html:not(.dark) .bg-white.rounded-xl { border-radius: var(--lx-radius); border: 1px solid var(--lx-line); box-shadow: 0 1px 2px rgba(20, 30, 80, 0.04); } /* ---------- 7. Buttons — pill shaped, per the design ---------- */ button, .btn, a[role="button"] { font-family: inherit; } /* ---------- 8. Tables ---------- */ table thead th { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--lx-grey-2); } html:not(.dark) table tbody tr:hover { background-color: #fafbfe; } /* ---------- 9. Inputs ---------- */ html:not(.dark) input[type="text"], html:not(.dark) input[type="email"], html:not(.dark) input[type="search"], html:not(.dark) input[type="number"], html:not(.dark) input[type="password"], html:not(.dark) select, html:not(.dark) textarea { border-radius: 11px; border-color: var(--lx-line); } html:not(.dark) input:focus, html:not(.dark) select:focus, html:not(.dark) textarea:focus { border-color: var(--lx-blue); box-shadow: 0 0 0 3px rgba(16, 36, 221, 0.09); } /* ---------- 10. Badges / status pills ---------- */ .rounded-full { letter-spacing: 0.01em; } /* ---------- 11. Links ---------- */ html:not(.dark) a.text-primary-600, html:not(.dark) a.text-primary-500 { color: var(--lx-blue); }