/*
* cham.css — Cham Solutions Standard CSS (LTR)
* Replaces : custom.css / custom.min.css
* Applies to : all LTR masters
* Website_Master_LTR.Master
* Menu_Master_LTR.Master
* Master_Cpanel_LTR.Master
*
* Load order : LAST — after app.css, never before it.
* Versioning : reference as cham.min.css?v=x.x.x in production.
*
* Sections
* §1 Font Standard
* §2 Color Themes
* §3 Language Flipper
* §4 RTL-Flip Utility
* §5 Layout Utilities
* §6 Play Button
* §7 Auth Page Backgrounds
*/
/* ============================================================
§1 FONT STANDARD — LTR Projects
------------------------------------------------------------
bootstrap.min.css hard-codes --vz-font-sans-serif: Inter.
This block makes LTR behave like RTL: delegated, not fixed.
app-rtl.css already does this for RTL; we must do it here.
============================================================ */
:root {
--vz-font-family-primary: "Poppins", sans-serif; /* headings, menus, UI labels */
--vz-font-family-secondary: "Inter", sans-serif; /* body text, inputs, tables */
--vz-font-sans-serif: var(--vz-font-family-secondary);
--vz-headings-font-family: var(--vz-font-family-primary);
}
/* ============================================================
§2 COLOR THEMES
------------------------------------------------------------
Usage:
Each project block overrides --vz-primary-* AND --vz-secondary-*
inside [data-theme="default"][data-brand-theme="SLUG"].
Those variables cascade into every Velzon utility class
(bg-primary, btn-secondary, text-secondary-emphasis, etc.)
without touching any vendor file.
Brand utility classes provided per block:
.text-brand — primary text colour
.bg-brand — primary background
.btn-brand — solid primary button
.text-brand-secondary — secondary text colour
.bg-brand-secondary — secondary background
.btn-brand-secondary — solid secondary button
How to derive the 5 secondary values from a hex colour HEX:
--vz-secondary → HEX
--vz-secondary-rgb → decimal R, G, B of HEX
--vz-secondary-text-emphasis → ~20 % darker than HEX
--vz-secondary-bg-subtle → ~93 % lighter (near-white tint)
--vz-secondary-border-subtle → ~65 % lighter tint
============================================================ */
/* --- Jasmine RMS ------------------------------------------ */
/*
* Primary : #23587A (dark blue-teal)
* Secondary : #2A9D8F (sea-green accent — hospitality complementary)
* Teal : #5cbeb0 (brand teal — buttons, highlights)
* Accent : #39a4a6 (darker teal accent — hover states)
*/
[data-theme="default"][data-brand-theme="jasmine"] {
--vz-primary: #23587A;
--vz-primary-rgb: 35, 88, 122;
--vz-primary-text-emphasis: #1a4259;
--vz-primary-bg-subtle: #e8f0f5;
--vz-primary-border-subtle: #b8d0de;
--vz-secondary: #2A9D8F;
--vz-secondary-rgb: 42, 157, 143;
--vz-secondary-text-emphasis: #207d72;
--vz-secondary-bg-subtle: #e4f5f3;
--vz-secondary-border-subtle: #9dd4ce;
}
[data-theme="default"][data-brand-theme="jasmine"] .text-brand { color: var(--vz-primary) !important; }
[data-theme="default"][data-brand-theme="jasmine"] .bg-brand { background-color: var(--vz-primary) !important; }
[data-theme="default"][data-brand-theme="jasmine"] .btn-brand { background-color: var(--vz-primary); border-color: var(--vz-primary); color: #fff; }
[data-theme="default"][data-brand-theme="jasmine"] .btn-brand:hover { filter: brightness(0.9); }
[data-theme="default"][data-brand-theme="jasmine"] .text-brand-secondary { color: var(--vz-secondary) !important; }
[data-theme="default"][data-brand-theme="jasmine"] .bg-brand-secondary { background-color: var(--vz-secondary) !important; }
[data-theme="default"][data-brand-theme="jasmine"] .btn-brand-secondary { background-color: var(--vz-secondary); border-color: var(--vz-secondary); color: #fff; }
[data-theme="default"][data-brand-theme="jasmine"] .btn-brand-secondary:hover { filter: brightness(0.9); }
/* Jasmine teal accent utilities — hardcoded, work without data-brand-theme */
.text-jasmine-teal { color: #5cbeb0 !important; }
.text-jasmine-accent { color: #39a4a6 !important; }
.bg-jasmine-teal { background-color: #5cbeb0 !important; }
.bg-jasmine-accent { background-color: #39a4a6 !important; }
.btn-jasmine-teal { background-color: #5cbeb0; border-color: #5cbeb0; color: #fff; }
.btn-jasmine-teal:hover { background-color: #368d96; border-color: #368d96; color: #fff; }
/* --- Bridge Digital Menu ---------------------------------- */
/*
* Primary : #E8711A (orange)
* Secondary : #1A73E8 (blue — classic orange-blue complementary pair)
*/
[data-theme="default"][data-brand-theme="bdm"] {
--vz-primary: #E8711A;
--vz-primary-rgb: 232, 113, 26;
--vz-primary-text-emphasis: #c55e15;
--vz-primary-bg-subtle: #fdf0e6;
--vz-primary-border-subtle: #f5c49a;
--vz-secondary: #1A73E8;
--vz-secondary-rgb: 26, 115, 232;
--vz-secondary-text-emphasis: #1561c4;
--vz-secondary-bg-subtle: #e4eefb;
--vz-secondary-border-subtle: #96c3f6;
}
[data-theme="default"][data-brand-theme="bdm"] .text-brand { color: var(--vz-primary) !important; }
[data-theme="default"][data-brand-theme="bdm"] .bg-brand { background-color: var(--vz-primary) !important; }
[data-theme="default"][data-brand-theme="bdm"] .btn-brand { background-color: var(--vz-primary); border-color: var(--vz-primary); color: #fff; }
[data-theme="default"][data-brand-theme="bdm"] .btn-brand:hover { filter: brightness(0.9); }
[data-theme="default"][data-brand-theme="bdm"] .text-brand-secondary { color: var(--vz-secondary) !important; }
[data-theme="default"][data-brand-theme="bdm"] .bg-brand-secondary { background-color: var(--vz-secondary) !important; }
[data-theme="default"][data-brand-theme="bdm"] .btn-brand-secondary { background-color: var(--vz-secondary); border-color: var(--vz-secondary); color: #fff; }
[data-theme="default"][data-brand-theme="bdm"] .btn-brand-secondary:hover { filter: brightness(0.9); }
/* BDM hardcoded color utilities — work without data-brand-theme */
.text-bdm-orange { color: #E8711A !important; }
.bg-bdm-orange { background-color: #E8711A !important; }
.btn-bdm-orange { background-color: #E8711A; border-color: #E8711A; color: #fff; }
.btn-bdm-orange:hover { background-color: #c55e15; border-color: #c55e15; color: #fff; }
.text-bdm-blue { color: #1A73E8 !important; }
.bg-bdm-blue { background-color: #1A73E8 !important; }
.btn-bdm-blue { background-color: #1A73E8; border-color: #1A73E8; color: #fff; }
.btn-bdm-blue:hover { background-color: #1561c4; border-color: #1561c4; color: #fff; }
/* --- Moalem Chat ------------------------------------------ */
/*
* Primary : #1B3A6B (dark navy)
* Secondary : #00BFA5 (bright teal — modern chat accent)
*/
[data-theme="default"][data-brand-theme="mo3lem"] {
--vz-primary: #1B3A6B;
--vz-primary-rgb: 27, 58, 107;
--vz-primary-text-emphasis: #142d53;
--vz-primary-bg-subtle: #e5e9f0;
--vz-primary-border-subtle: #a8b8d0;
--vz-secondary: #00BFA5;
--vz-secondary-rgb: 0, 191, 165;
--vz-secondary-text-emphasis: #009982;
--vz-secondary-bg-subtle: #e0f7f4;
--vz-secondary-border-subtle: #8ae3d9;
}
[data-theme="default"][data-brand-theme="mo3lem"] .text-brand { color: var(--vz-primary) !important; }
[data-theme="default"][data-brand-theme="mo3lem"] .bg-brand { background-color: var(--vz-primary) !important; }
[data-theme="default"][data-brand-theme="mo3lem"] .btn-brand { background-color: var(--vz-primary); border-color: var(--vz-primary); color: #fff; }
[data-theme="default"][data-brand-theme="mo3lem"] .btn-brand:hover { filter: brightness(0.9); }
[data-theme="default"][data-brand-theme="mo3lem"] .text-brand-secondary { color: var(--vz-secondary) !important; }
[data-theme="default"][data-brand-theme="mo3lem"] .bg-brand-secondary { background-color: var(--vz-secondary) !important; }
[data-theme="default"][data-brand-theme="mo3lem"] .btn-brand-secondary { background-color: var(--vz-secondary); border-color: var(--vz-secondary); color: #fff; }
[data-theme="default"][data-brand-theme="mo3lem"] .btn-brand-secondary:hover { filter: brightness(0.9); }
/* Mo3lem hardcoded color utilities — work without data-brand-theme */
.text-mo3lem-navy { color: #1B3A6B !important; }
.bg-mo3lem-navy { background-color: #1B3A6B !important; }
.btn-mo3lem-navy { background-color: #1B3A6B; border-color: #1B3A6B; color: #fff; }
.btn-mo3lem-navy:hover { background-color: #142d53; border-color: #142d53; color: #fff; }
.text-mo3lem-teal { color: #00BFA5 !important; }
.bg-mo3lem-teal { background-color: #00BFA5 !important; }
.btn-mo3lem-teal { background-color: #00BFA5; border-color: #00BFA5; color: #fff; }
.btn-mo3lem-teal:hover { background-color: #009982; border-color: #009982; color: #fff; }
/* --- Cham MMS (Manufacturing Management System) ----------- */
/*
* Primary : #114A7E (dark navy blue — industrial authority)
* Secondary : #D95F02 (burnt orange — industrial accent / safety color)
*/
[data-theme="default"][data-brand-theme="cham-mms"] {
--vz-primary: #114A7E;
--vz-primary-rgb: 17, 74, 126;
--vz-primary-text-emphasis: #0E3B65;
--vz-primary-bg-subtle: #EEF2F6;
--vz-primary-border-subtle: #ACC0D2;
--vz-secondary: #D95F02;
--vz-secondary-rgb: 217, 95, 2;
--vz-secondary-text-emphasis: #AE4C02;
--vz-secondary-bg-subtle: #FCF4ED;
--vz-secondary-border-subtle: #F2C7A6;
}
[data-theme="default"][data-brand-theme="cham-mms"] .text-brand { color: var(--vz-primary) !important; }
[data-theme="default"][data-brand-theme="cham-mms"] .bg-brand { background-color: var(--vz-primary) !important; }
[data-theme="default"][data-brand-theme="cham-mms"] .btn-brand { background-color: var(--vz-primary); border-color: var(--vz-primary); color: #fff; }
[data-theme="default"][data-brand-theme="cham-mms"] .btn-brand:hover { filter: brightness(0.9); }
[data-theme="default"][data-brand-theme="cham-mms"] .text-brand-secondary { color: var(--vz-secondary) !important; }
[data-theme="default"][data-brand-theme="cham-mms"] .bg-brand-secondary { background-color: var(--vz-secondary) !important; }
[data-theme="default"][data-brand-theme="cham-mms"] .btn-brand-secondary { background-color: var(--vz-secondary); border-color: var(--vz-secondary); color: #fff; }
[data-theme="default"][data-brand-theme="cham-mms"] .btn-brand-secondary:hover { filter: brightness(0.9); }
/* Cham MMS hardcoded color utilities — work without data-brand-theme */
.text-cham-mms-blue { color: #114A7E !important; }
.bg-cham-mms-blue { background-color: #114A7E !important; }
.btn-cham-mms-blue { background-color: #114A7E; border-color: #114A7E; color: #fff; }
.btn-cham-mms-blue:hover { background-color: #0E3B65; border-color: #0E3B65; color: #fff; }
.text-cham-mms-orange { color: #D95F02 !important; }
.bg-cham-mms-orange { background-color: #D95F02 !important; }
.btn-cham-mms-orange { background-color: #D95F02; border-color: #D95F02; color: #fff; }
.btn-cham-mms-orange:hover { background-color: #AE4C02; border-color: #AE4C02; color: #fff; }
/* --- NEW PROJECT TEMPLATE — copy, uncomment, fill in ------- */
/*
[data-theme="default"][data-brand-theme="SLUG"] {
--vz-primary: #HEXHEX;
--vz-primary-rgb: R, G, B;
--vz-primary-text-emphasis: #DARKER;
--vz-primary-bg-subtle: #LIGHTEST;
--vz-primary-border-subtle: #LIGHT;
--vz-secondary: #HEXHEX;
--vz-secondary-rgb: R, G, B;
--vz-secondary-text-emphasis: #DARKER;
--vz-secondary-bg-subtle: #LIGHTEST;
--vz-secondary-border-subtle: #LIGHT;
}
[data-theme="default"][data-brand-theme="SLUG"] .text-brand { color: var(--vz-primary) !important; }
[data-theme="default"][data-brand-theme="SLUG"] .bg-brand { background-color: var(--vz-primary) !important; }
[data-theme="default"][data-brand-theme="SLUG"] .btn-brand { background-color: var(--vz-primary); border-color: var(--vz-primary); color: #fff; }
[data-theme="default"][data-brand-theme="SLUG"] .btn-brand:hover { filter: brightness(0.9); }
[data-theme="default"][data-brand-theme="SLUG"] .text-brand-secondary { color: var(--vz-secondary) !important; }
[data-theme="default"][data-brand-theme="SLUG"] .bg-brand-secondary { background-color: var(--vz-secondary) !important; }
[data-theme="default"][data-brand-theme="SLUG"] .btn-brand-secondary { background-color: var(--vz-secondary); border-color: var(--vz-secondary); color: #fff; }
[data-theme="default"][data-brand-theme="SLUG"] .btn-brand-secondary:hover { filter: brightness(0.9); }
*/
/* ============================================================
§3 LANGUAGE FLIPPER — LTR masters switch TO Arabic
------------------------------------------------------------
Both icons sit inside every flipper button:
![]()
← target: Arabic
![]()
← target: English
On LTR pages we are going TO Arabic → show the Arabic label.
cham-rtl.css overrides this with the opposite rules.
Dark mode: SVG icons use black fills on transparent.
Invert them so they remain legible on dark navbars.
============================================================ */
.btn-language-flipper .lang-icon-en { display: none; }
.btn-language-flipper .lang-icon-ar { display: inline-block; }
[data-bs-theme="dark"] .btn-language-flipper img { filter: invert(1); }
/* ============================================================
§4 RTL-FLIP UTILITY
------------------------------------------------------------
Add class rtl-flip to any directional icon (arrow-right,
chevron-right, send, etc.). On LTR this is a no-op.
cham-rtl.css overrides to scaleX(-1) — mirrors the icon.
Usage:
Result: → in LTR, ← in RTL. One icon, no duplicate files.
============================================================ */
.rtl-flip { transform: scaleX(1); }
/* ============================================================
§5 LAYOUT UTILITIES
============================================================ */
/* Force RTL text flow on a specific element inside an LTR page */
.text-box-rtl { direction: rtl; }
/* Responsive container that preserves a 16:9 (1000×562) ratio.
Use for 360° frames, embedded videos, iframes. */
.frame-360 {
display: flex;
min-width: 0;
width: 100%;
height: auto;
aspect-ratio: 1000 / 562;
margin: auto;
}
/* ============================================================
§6 PLAY BUTTON — video thumbnail overlays
------------------------------------------------------------
A circular red pulsing button with a right-pointing triangle.
The triangle always points → (play direction is universal).
============================================================ */
.play-button {
width: 70px;
height: 70px;
border-radius: 50%;
background: rgba(255, 0, 0, 0.8);
position: relative;
animation: cham-pulse 1.5s infinite;
cursor: pointer;
}
.play-button::before {
content: "";
position: absolute;
left: 28px;
top: 20px;
width: 0;
height: 0;
border-left: 16px solid white;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
@keyframes cham-pulse {
0% { transform: scale(1); opacity: 1; }
70% { transform: scale(1.15); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
/* ============================================================
§7 AUTH PAGE BACKGROUNDS
------------------------------------------------------------
Velzon built-in auth layout variants — images ship with the
template at assets/images/.
For project-specific auth backgrounds, add a new rule here
and reference an image in assets/images/auth/.
============================================================ */
/* Generic Cham Solutions auth cover — .jpg fallback */
.auth-bg-cover-cham {
background-image: url('../images/auth/auth-one-bg.jpg');
background-position: center;
background-size: cover;
}
.auth-bg-cover-cham > .bg-overlay {
background-image: url("../images/cover-pattern.png");
background-position: center;
background-size: cover;
opacity: 1;
background-color: transparent;
}
.auth-bg-cover-cham .footer {
background-color: rgba(var(--vz-primary-rgb), 0.95);
color: rgba(255, 255, 255, 1);
}
/* Jasmine RMS auth cover — .webp (modern format) */
.auth-bg-cover-jasmine {
background-image: url('../images/auth/auth-one-bg.webp');
background-position: center;
background-size: cover;
}
.auth-bg-cover-jasmine > .bg-overlay {
background-image: url("../images/cover-pattern.png");
background-position: center;
background-size: cover;
opacity: 1;
background-color: transparent;
}
.auth-bg-cover-jasmine .footer {
background-color: rgba(var(--vz-primary-rgb), 0.95);
color: rgba(255, 255, 255, 1);
}
/* Auth layout variants (two-column / three-panel) */
.auth-two-bg {
background-image: url('../images/auth-two-bg.jpg');
background-position: center;
background-size: cover;
}
.auth-three-bg {
background-image: url('../images/auth-three-bg.jpg');
background-position: center;
background-size: cover;
}
.auth-middle-image {
background-color: rgba(242, 242, 242, 1);
background-position: center;
background-size: cover;
}
/* ============================================================
§8 app-cham.css BUG FIXES — LTR correction
------------------------------------------------------------
Two known transcription errors in app-cham.css vs original
Velzon app.min.css are corrected here:
1. TOPBAR BADGE — left: vs right:
app-cham.css: .topbar-badge { left: -9px } ← wrong
original: .topbar-badge { right: -9px } ← correct
Result: badge appears on wrong (left) side of bell icon.
2. TOASTIFY — .toastify-right / .toastify-left swapped
app-cham.css: .toastify-right { left: 15px } ← wrong for LTR
app-cham.css: .toastify-left { right: 15px } ← wrong for LTR
This was designed for RTL-first layouts.
For LTR projects this block restores standard anchoring so
that position:"right" = right edge, position:"left" = left edge.
cham-rtl.css does NOT override this — RTL projects use
position:"center" in MessageBox.cs instead (direction-neutral).
============================================================ */
/* Fix 1 — topbar notification badge */
.topbar-badge { right: -9px; left: auto; top: 4px !important; }
.topbar-badge-sm { right: 0; left: auto; top: 7px !important; }
/* Fix 2 — Toastify positioning + layout */
.toastify { display: inline-flex !important; align-items: flex-start; white-space: normal !important; word-break: break-word !important; max-width: 360px !important; }
.toastify-right { right: 15px; left: auto; }
.toastify-left { left: 15px; right: auto; }
.toast-close { flex: 0 0 auto; align-self: center; margin-left: 16px; opacity: 0.85; cursor: pointer; font-size: 1em; border: 1px solid rgba(255,255,255,0.5); border-radius: 3px; padding: 1px 5px; background: rgba(255,255,255,0.15); }
/* ============================================================
§9 HORIZONTAL NAV — LTR direction fixes
------------------------------------------------------------
app-cham.css contains RTL-specific values for three
horizontal-navbar rules. Compared against original
Velzon app.min.css:
A. Top-level toggle arrow
app-cham.css: left:0px; rotate(-90deg) ← RTL
original: right:0; rotate(90deg) ← LTR
B. Nested nav-item toggle arrow
app-cham.css: left:10px ← RTL offset
original: (no left/right set)
C. Nested menu-dropdown (fly-out sub-menu)
app-cham.css: right:100% ← opens LEFT ← RTL
original: left:100% ← opens RIGHT ← LTR
============================================================ */
/* Fix A — top-level horizontal nav toggle arrow */
[data-layout=horizontal] .navbar-menu .navbar-nav > .nav-item > .nav-link[data-bs-toggle=collapse]:after {
right: 0 !important;
left: auto !important;
-webkit-transform: rotate(90deg) !important;
transform: rotate(90deg) !important;
}
/* Fix B — nested nav-item toggle arrow (clear wrong RTL offset) */
[data-layout=horizontal] .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse]:after {
right: 0 !important;
left: auto !important;
}
/* Fix C — nested fly-out sub-menu: open to the RIGHT not the LEFT */
[data-layout=horizontal] .menu-dropdown .menu-dropdown {
left: 100% !important;
right: auto !important;
}