/* ========================================================================== PM Theme — Learning Bangladesh brand layer for Perfex CRM 3.4 -------------------------------------------------------------------------- Layered on top of stock Perfex through the app_admin_head hook. No core file is modified; deactivating the module removes all of this. Brand colours are taken from the official logo SVGs: orange gradient #e46627 → #f59323 (the dot-map mark, the "g" swoosh) blue gradient #266db2 → #4083c4 (the "Learning" wordmark) COLOUR STRATEGY Blue carries every action (buttons, links, focus). Orange is spent only on brand moments — the active nav rail, the logo area, the top progress bar. Warning was deliberately pushed to yellow: an amber warning sitting next to a brand orange is unreadable as a signal. TO REBRAND: change the eight --lb-* values below. Nothing else references a literal colour. ========================================================================== */ :root { /* Brand ---------------------------------------------------------------- */ --lb-orange-600: #e46627; --lb-orange-500: #f59323; --lb-blue-600: #266db2; --lb-blue-500: #4083c4; --lb-blue-700: #1e5993; --lb-blue-050: #eaf2fa; --lb-orange-050: #fdf1e9; --lb-gradient: linear-gradient(135deg, #e46627 0%, #f59323 100%); /* Surfaces ------------------------------------------------------------- */ --pm-bg: #f4f7fa; --pm-surface: #ffffff; --pm-surface-2: #eef2f7; --pm-sidebar: #fafbfd; /* a hair off white so the rail reads as its own zone */ --pm-border: #dde4ec; --pm-border-2: #eaeff5; /* Text — neutrals biased slightly blue so they sit with the brand blue -- */ --pm-text: #1b2734; --pm-text-2: #3d4d5e; --pm-muted: #64778a; /* Actions -------------------------------------------------------------- */ --pm-primary: var(--lb-blue-600); --pm-primary-hover: var(--lb-blue-700); --pm-primary-soft: var(--lb-blue-050); --pm-accent: var(--lb-orange-600); --pm-accent-soft: var(--lb-orange-050); /* Signals — semantic, deliberately not brand hues ---------------------- */ --pm-success: #157f3d; --pm-success-soft: #e6f4ec; --pm-danger: #c0261d; --pm-danger-soft: #fbeae9; --pm-warning: #a97400; --pm-warning-soft: #fdf4e0; --pm-info: #0b7285; --pm-info-soft: #e4f4f7; /* Form ----------------------------------------------------------------- */ --pm-radius: 10px; --pm-radius-sm: 7px; --pm-radius-lg: 14px; --pm-shadow: 0 1px 2px rgba(27, 39, 52, .05), 0 8px 22px -14px rgba(27, 39, 52, .22); --pm-shadow-lg: 0 2px 6px rgba(27, 39, 52, .07), 0 18px 44px -22px rgba(27, 39, 52, .3); --pm-ring: 0 0 0 3px rgba(38, 109, 178, .18); /* Type ------------------------------------------------------------------ Latin resolves to Inter (already bundled by Perfex); Bengali falls through to whichever Bengali face the OS has. Measured on the live site: Kohinoor Bangla / Bangla Sangam MN on Apple, Nirmala UI on Windows, Noto Sans Bengali on Android and most Linux. */ --pm-font: Inter, "Kohinoor Bangla", "Noto Sans Bengali", "Nirmala UI", "Bangla Sangam MN", system-ui, sans-serif; /* Bengali conjuncts get clipped below about 1.7; stock Perfex ships 1.43 */ --pm-leading: 1.75; } /* ── Dark (opt-in only) ─────────────────────────────────────────────────── NOT wired to prefers-color-scheme, and that is deliberate. Perfex 3.4 has no dark mode of its own: hundreds of its components hardcode light backgrounds, so letting the operating system flip this on would leave white cards sitting inside a dark page across screens nobody has checked. Verified example: .panel-body stays #ffffff unless explicitly overridden. The palette below is complete and ready. To switch the CRM to dark, add the class `pm-dark` to — but only after walking the whole admin area and confirming each screen holds up. */ body.pm-dark { --lb-orange-600: #f5893c; --lb-orange-500: #ffab52; --lb-blue-600: #5fa3e0; --lb-blue-500: #7bb6ea; --lb-blue-700: #4b8fcd; --lb-blue-050: #16283a; --lb-orange-050: #2e1f14; --lb-gradient: linear-gradient(135deg, #f5893c 0%, #ffab52 100%); --pm-bg: #0f151b; --pm-surface: #161f28; --pm-surface-2: #1c2733; --pm-sidebar: #121a21; --pm-border: #26333f; --pm-border-2: #1f2b36; --pm-text: #e7ecf1; --pm-text-2: #c2ccd7; --pm-muted: #8b9bab; --pm-success: #4ec27d; --pm-success-soft: #16291f; --pm-danger: #f08a80; --pm-danger-soft: #2d1a18; --pm-warning: #e0ad4a; --pm-warning-soft: #2c2312; --pm-info: #57bccd; --pm-info-soft: #12272c; --pm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px -14px rgba(0, 0, 0, .8); --pm-shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 44px -22px rgba(0, 0, 0, .9); --pm-ring: 0 0 0 3px rgba(95, 163, 224, .25); } /* ══ Foundation ══════════════════════════════════════════════════════════ */ body, .form-control, .btn, button, input, select, textarea, .dropdown-menu, table { font-family: var(--pm-font); } body { background-color: var(--pm-bg); color: var(--pm-text); line-height: var(--pm-leading); -webkit-font-smoothing: antialiased; } /* Bengali needs the extra leading most; tables stay tighter to fit rows */ p, label, li, td, th, .form-control, .btn { line-height: var(--pm-leading); } td, th { line-height: 1.65; } h1, h2, h3, h4, h5, h6 { color: var(--pm-text); line-height: 1.5; text-wrap: balance; } a { color: var(--pm-primary); } a:hover, a:focus { color: var(--pm-primary-hover); } hr { border-color: var(--pm-border-2); } /* Digits line up in columns — but only Latin ones. Bengali numerals have no tabular variant, so this is scoped to elements known to hold Latin figures. */ .table td.num, .num-cell, .tabular { font-variant-numeric: tabular-nums; } /* ══ Chrome: sidebar and top bar ═════════════════════════════════════════ Selectors verified against assets/css/style.css — the stock sidebar is `.sidebar ul.nav li a`, not `#side-menu li a`. */ #header { background-color: var(--pm-surface); border-color: var(--pm-border); box-shadow: 0 1px 0 var(--pm-border-2); } #header li > a.active { background-color: var(--pm-surface-2); } .navbar-nav > li > a { color: var(--pm-muted); } .navbar-nav > li > a:hover, .navbar-nav > li > a:focus { color: var(--pm-text); } .sidebar { background-color: var(--pm-sidebar); border-right: 1px solid var(--pm-border-2); } .sidebar ul.nav li a { color: var(--pm-text-2); } .sidebar ul.nav li a i.menu-icon { color: var(--pm-muted); } .sidebar > ul.nav > li:hover a:first-child { background-color: var(--pm-surface-2); } /* Stock already reserves `border-left: 2px solid transparent` on every top-level item — the brand rail goes there rather than into a new pseudo-element, so nothing shifts by a pixel when an item activates. */ .sidebar > ul.nav > li.active { border-left-color: var(--lb-orange-600); } [dir="rtl"] .sidebar > ul.nav > li.active { border-right-color: var(--lb-orange-600); } .sidebar ul.nav li.active > a { background-color: var(--pm-primary-soft); color: var(--pm-primary); font-weight: 600; } .sidebar ul.nav li.active > a i.menu-icon { color: var(--pm-accent); } .sidebar ul.nav li .nav-second-level li a { color: var(--pm-text-2); } .sidebar ul.nav li .nav-second-level li.active a { color: var(--pm-primary); } /* ══ Buttons ═════════════════════════════════════════════════════════════ */ .btn { border-radius: var(--pm-radius-sm); font-weight: 500; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } /* Focus is a Tailwind ring here, driven by --tw-ring-color, so the token is set rather than the shadow replaced — otherwise the ring geometry is lost. */ .btn:focus, .btn.focus, .btn:focus-visible { --tw-ring-color: var(--pm-primary); } .btn-primary, .btn-info { background-color: var(--pm-primary); border-color: var(--pm-primary); color: #fff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-info:hover, .btn-info:focus, .btn-info:active { background-color: var(--pm-primary-hover); border-color: var(--pm-primary-hover); color: #fff; } .btn-success { background-color: var(--pm-success); border-color: var(--pm-success); color: #fff; } .btn-danger { background-color: var(--pm-danger); border-color: var(--pm-danger); color: #fff; } .btn-warning { background-color: var(--pm-warning); border-color: var(--pm-warning); color: #fff; } .btn-default { background-color: var(--pm-surface); border-color: var(--pm-border); color: var(--pm-text-2); } .btn-default:hover, .btn-default:focus { background-color: var(--pm-surface-2); border-color: var(--pm-border); color: var(--pm-text); } /* ══ Forms ═══════════════════════════════════════════════════════════════ Stock Perfex renders inputs at radius 4 and buttons at 8, which reads as two different design systems on one row. Unified here. */ .form-control, input.form-control, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], textarea.form-control, select.form-control, .bootstrap-select .btn { background-color: var(--pm-surface); border-color: var(--pm-border); border-radius: var(--pm-radius-sm); color: var(--pm-text); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } .form-control:focus, input.form-control:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea.form-control:focus { border-color: var(--pm-primary); --tw-ring-color: var(--pm-primary); box-shadow: var(--pm-ring); } .form-control::placeholder { color: var(--pm-muted); opacity: 1; } label, .control-label { color: var(--pm-text-2); font-weight: 600; } .dropdown-menu { background-color: var(--pm-surface); border-color: var(--pm-border); border-radius: var(--pm-radius); box-shadow: var(--pm-shadow-lg); padding: 6px; } .dropdown-menu > li > a { color: var(--pm-text-2); border-radius: var(--pm-radius-sm); padding: 7px 12px; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: var(--pm-primary-soft); color: var(--pm-primary); } /* ══ Surfaces ════════════════════════════════════════════════════════════ */ .panel_s, .panel, .panel-body, .well, .modal-content { background-color: var(--pm-surface); border: 1px solid var(--pm-border); border-radius: var(--pm-radius); box-shadow: var(--pm-shadow); } .panel-heading, .panel-footer, .modal-header { background-color: var(--pm-surface-2); border-bottom: 1px solid var(--pm-border-2); color: var(--pm-text); font-weight: 600; } .modal-footer { border-top: 1px solid var(--pm-border-2); } /* ══ Tables ══════════════════════════════════════════════════════════════ */ .table > thead > tr > th { background-color: var(--pm-surface-2); border-bottom: 1px solid var(--pm-border); color: var(--pm-muted); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; } .table > tbody > tr > td { border-top: 1px solid var(--pm-border-2); color: var(--pm-text-2); } .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--pm-surface-2); } .table-hover > tbody > tr:hover { background-color: var(--pm-primary-soft); } /* DataTables chrome */ .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--pm-radius-sm); border-color: var(--pm-border); color: var(--pm-text-2) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--pm-primary) !important; border-color: var(--pm-primary) !important; color: #fff !important; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: var(--pm-radius-sm); border: 1px solid var(--pm-border); background-color: var(--pm-surface); color: var(--pm-text); } /* ══ Signals ═════════════════════════════════════════════════════════════ Kept semantic. A status colour must never be mistaken for brand accent, which is why warning is yellow here rather than amber-orange. */ .label, .badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; padding: .3em .7em; } .label-success { background-color: var(--pm-success-soft); color: var(--pm-success); } .label-danger { background-color: var(--pm-danger-soft); color: var(--pm-danger); } .label-warning { background-color: var(--pm-warning-soft); color: var(--pm-warning); } .label-info { background-color: var(--pm-info-soft); color: var(--pm-info); } .label-default { background-color: var(--pm-surface-2); color: var(--pm-muted); } .label-primary { background-color: var(--pm-primary-soft); color: var(--pm-primary); } .alert { border-radius: var(--pm-radius); border-width: 1px; border-left-width: 3px; } .alert-success { background-color: var(--pm-success-soft); border-color: var(--pm-success); color: var(--pm-success); } .alert-danger { background-color: var(--pm-danger-soft); border-color: var(--pm-danger); color: var(--pm-danger); } .alert-warning { background-color: var(--pm-warning-soft); border-color: var(--pm-warning); color: var(--pm-warning); } .alert-info { background-color: var(--pm-info-soft); border-color: var(--pm-info); color: var(--pm-info); } .text-success { color: var(--pm-success) !important; } .text-danger { color: var(--pm-danger) !important; } .text-warning { color: var(--pm-warning) !important; } .text-info { color: var(--pm-info) !important; } .text-muted { color: var(--pm-muted) !important; } .progress { background-color: var(--pm-surface-2); border-radius: 999px; box-shadow: none; } .progress-bar { background: var(--lb-gradient); } /* ══ Login screen ════════════════════════════════════════════════════════ The one screen where the brand is allowed to be loud. Everything else in the CRM stays quiet, because people work in it all day. The texture is the logo's own motif: the Learning Bangladesh mark is a dot-map of the country's districts, so the field behind the card is that same dot grid rather than an imported pattern. */ body.customers_login { background-color: var(--pm-bg); background-image: /* the dot-map echo */ radial-gradient(circle at center, rgba(38, 109, 178, .14) 1.6px, transparent 1.7px), /* warm brand light from the top-left, cool from the bottom-right */ radial-gradient(48rem 30rem at 6% -10%, rgba(228, 102, 39, .16) 0%, transparent 62%), radial-gradient(46rem 30rem at 96% 110%, rgba(38, 109, 178, .16) 0%, transparent 64%); background-size: 22px 22px, 100% 100%, 100% 100%; background-position: 0 0, 0 0, 0 0; background-attachment: fixed; } body.customers_login #wrapper { position: relative; } body.customers_login .panel_s { position: relative; overflow: hidden; border: 1px solid var(--pm-border-2); border-radius: var(--pm-radius-lg); box-shadow: 0 1px 2px rgba(27, 39, 52, .04), 0 12px 28px -12px rgba(27, 39, 52, .16), 0 40px 80px -48px rgba(27, 39, 52, .5); } /* A single stroke of the brand gradient across the top of the card — the whole colour story in three pixels. */ body.customers_login .panel_s::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--lb-gradient); } body.customers_login h4, body.customers_login h1, body.customers_login h2 { font-weight: 700; letter-spacing: -.01em; color: var(--pm-text); } body.customers_login .panel_s .btn-primary { padding-top: 9px; padding-bottom: 9px; font-weight: 600; letter-spacing: .01em; } /* Top bar on the login screen reads as part of the field, not a separate slab */ body.customers_login .navbar-default { background-color: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--pm-border-2); } /* The portal login button ships as `background: #2563eb !important`, so the override has to carry the same weight to reach it. */ .navbar-default .navbar-nav > li.customers-nav-item-login > a { background: var(--pm-primary) !important; color: #fff !important; } .navbar-default .navbar-nav > li.customers-nav-item-login > a:hover { background: var(--pm-primary-hover) !important; } .navbar-default .navbar-nav > li > a { color: var(--pm-text-2); } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { background-color: var(--pm-surface-2); color: var(--pm-text); } /* ══ Client portal ═══════════════════════════════════════════════════════ */ body.customers .panel_s { border-radius: var(--pm-radius); } /* ══ Accessibility and motion ════════════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--pm-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Wide content scrolls inside its own container rather than the page body */ .table-responsive { overflow-x: auto; }