/* Shared theme variable definitions for all clients / subdomains. * * Usage: * - In your base template, set a body class based on sub_domain, e.g.: * * - All structural styles live in main_system_index.css (or similar), * and they consume these variables via var(--primary-color), etc. * * Per‑client overrides are expressed as: * body.theme- { --var-name: value; } */ /* Generic fallback for any themed body. Individual themes override these. */ body[class^="theme-"] { --primary-color: #8F469B; --secondary-color: #494C9E; --navbar-bg-color: #b2c9ff; --sidebar-color: var(--navbar-bg-color); --profile-menu-bg-color: var(--primary-color); --profile-menu-text-color: #fff; --btn-color: #6918b4; /* Ensure tables always have a colored header, even if a theme does not define its own value. */ --table-header-color: var(--primary-color); /* Default outline primary button palette; can be overridden per client */ --btn-outline-primary-bg: var(--primary-color); --btn-outline-primary-border: var(--primary-color); --btn-outline-primary-text: #fff; --btn-outline-primary-hover-bg: var(--secondary-color); --btn-outline-primary-hover-border: var(--secondary-color); --btn-outline-primary-hover-text: #fff; /* Auth defaults: use a primary-colored gradient everywhere unless a client overrides */ --auth-body-bg: linear-gradient( 135deg, color-mix(in srgb, var(--primary-color) 85%, #000 15%) 0%, var(--primary-color) 45%, color-mix(in srgb, var(--primary-color) 55%, #fff 45%) 100% ); --auth-cover-image: none; --auth-login-side-image: none; --auth-register-side-image: none; --auth-register-side-image-assist: none; /* Default home-page card colors for all clients (overridden by specific themes like platform/vodacomretail) */ --homepage-card-color-1: var(--primary-color); --homepage-card-color-2: var(--secondary-color); --homepage-card-color-3: var(--primary-color); --homepage-card-color-4: var(--secondary-color); /* Shared calendar palette – accent uses each client's primary color */ --calendar-bg-color: #fff; --calendar-title-color: var(--primary-color); --calendar-header-days-color: #0000008a; --calendar-header-border-color: #929292; --calendar-buttons-color: var(--primary-color); --calendar-buttons-border-color: var(--primary-color); --calendar-dates-color: #000000; --calendar-grid-color: transparent; --calendar-current-date-background-color: var(--primary-color); --calendar-current-date-color: #fff; --calendar-dates-circle-color: transparent; /* Shared neutrals and helper palette used across widgets */ --light-purple: #ede0ff; --light-blue-color: var(--primary-color); --purple-primary: var(--primary-color); --purple-hover: var(--primary-color); --purple-light: var(--primary-color); --purple-dark: var(--primary-color); --green-primary: #3FCC3F; --green-dark: #2e7d32; --green-darker: #1b5e20; --green-light: #4caf50; --grey-light: #f5f5f5; --grey-lighter: #f9f9f9; --grey-lightest: #f0f0f0; --grey-medium: #E8E8E8; --grey-placeholder: #D3D3D3; --grey-border: #ccc; --grey-border-light: #eee; --grey-border-lighter: #e0e0e0; --text-primary: #333; --text-dark: #1d1d1f; --text-secondary: #666; --text-tertiary: #999; --white: #ffffff; --black: #000; --blue-primary: #0071e3; --blue-dark: #0062c3; --blue-light: #2196f3; --blue-lighter: #e3f2fd; --red-primary: #f44336; --red-light: #ffebee; --orange-primary: #ff9800; --success-bg: #e8f5e9; --error-bg: #ffebee; --light-bg: #f5f5ff; --lighter-bg: #f1f1f1; --lightest-bg: #f0f0f0; --white-1: #F5F5F5; --black-1: #1d1d1d; --hover-gray: #f3f4f6; --text-gray: #333; --shadow-color: rgba(0, 0, 0, 0.05); /* Shared Orcaa sidebar palette – tinted per client */ --orcaa-sidebar-primary: var(--primary-color); --orcaa-sidebar-primary-dark: var(--tab-color); --orcaa-sidebar-light-bg: var(--navbar-bg-color); --orcaa-sidebar-hover-bg: #F5F5F5; --orcaa-sidebar-text-dark: #333; --orcaa-sidebar-text-medium: #666; --orcaa-sidebar-text-light: #888; --orcaa-sidebar-white: #FFF; --orcaa-sidebar-shadow: rgba(0, 0, 0, 0.05); --orcaa-sidebar-shadow-medium: rgba(0, 0, 0, 0.1); --orcaa-sidebar-shadow-dark: rgba(0, 0, 0, 0.2); /* Shared card + chip colors */ --color-bg: #f5f6fa; --color-card: #fff; --color-border: #e9ecef; --color-text: #6c757d; --color-title: #343a40; --color-text-light: #adb5bd; --color-all: var(--primary-color); --color-all-light: #fff0f0; --color-all-border: #d9e1ff; --team-member-1: var(--primary-color); --team-member-2: #1d1d1d; --primary-purple: #e75c5c; --primary-purple-light: #e76767; --light-purple-bg: #e9e4ff; --background-purple: #ff8d8d; --light-gray: #f8f9fa; --medium-gray: #e9ecef; --accent-teal: #00daac; } /* Platform (default Orcaa theme) */ body.theme-platform { --folder-structure-item-height: 1.8rem; --folder-structure-item-margin-left: 2rem; --folder-structure-item-padding-top: 0.5rem; --disabled-link-color: #888; --primary-color: #300067; --primary-light-primary: #b19ee3; --secondary-color: #494C9E; --secondary-light-color: #8183bc; --bg-color: #f8f9ff; --bg-progress-bar: #6967b5; --dark-purple: #6918B4; --dark-purple-2: #300067; --bg-primary-btn: linear-gradient( 0deg, rgba(92, 82, 185, 0.677) 27%, rgba(143, 114, 216, 0.677) 100% ); --teriary-color: #1d1952a0; --teriary-light-color: #8284bc; --scroller-color: rgba(0, 0, 0, 0.513); --scroller-color-hovered: rgba(0, 0, 0, 0.7); --dark-blue-color: #00274F; --navbar-bg-color: #b2c9ff; --sidebar-color: var(--navbar-bg-color); --modal-header-color: #000; --modal-header-text: #fff; --modal-label-color: #605e5c; --sidebar-text-color: #212529e9; --table-header-color: #2b333f; --tab-color: #4b138c; --btn-color: #6918b4; --border-color: linear-gradient( -270deg, rgba(166, 166, 166, 1) 0%, rgba(255, 255, 255, 1) 100% ); --bg-card-purple: linear-gradient( to left, #8f469b, #7f489d, #6f4a9f, #5d4b9f, #494c9e ); --bg-card-blue: linear-gradient( to left, #8f469b, #713b8a, #542f78, #392465, #1d1952 ); --bg-card-grey: linear-gradient( to left, #a5a1b6, #827c9c, #615983, #40386a, #1d1952 ); --bg-colour-grey: linear-gradient( to right top, #4a4a4a, #5f5f5f, #757575, #8c8c8c, #a3a3a3 ); --calendar-bg-color: #fff; --calendar-title-color: #7167c2; --calendar-header-days-color: #0000008a; --calendar-header-border-color: #929292; --calendar-buttons-color: #7167c2; --calendar-buttons-border-color: #928cc5; --calendar-dates-color: #000000; --calendar-grid-color: transparent; --calendar-current-date-background-color: #7167c2; --calendar-current-date-color: #fff; --calendar-dates-circle-color: transparent; --light-purple: #ede0ff; --light-blue-color: #9239f9; --homepage-card-color-1: #6b98e6; --homepage-card-color-2: #A49CEB; --homepage-card-color-3: #6b98e6; --homepage-card-color-4: #A49CEB; --light-bg: #f5f5ff; --lighter-bg: #f1f1f1; --lightest-bg: #f0f0f0; --white: white; --white-1: #F5F5F5; --black-1: #1d1d1d; --hover-gray: #f3f4f6; --text-gray: #333; --shadow-color: rgba(0, 0, 0, 0.05); /* Auth-specific imagery (login/register side panels, covers) */ --auth-body-bg: url('../images/landing_bg.svg'); --auth-cover-image: url('../images/building.jpg'); --auth-login-side-image: url('../images/building.jpg'); --auth-register-side-image: url('../images/building.jpg'); --auth-register-side-image-assist: url('../images/orcaa-assist-hero.svg'); /* Orcaa sidebar palette (used by main_system_index.css) */ --orcaa-sidebar-primary: #8056FF; --orcaa-sidebar-primary-dark: #6a3dd6; --orcaa-sidebar-light-bg: #F0E7FF; --orcaa-sidebar-hover-bg: #F5F5F5; --orcaa-sidebar-text-dark: #333; --orcaa-sidebar-text-medium: #666; --orcaa-sidebar-text-light: #888; --orcaa-sidebar-white: #fff; --orcaa-sidebar-shadow: rgba(0, 0, 0, 0.05); --orcaa-sidebar-shadow-medium: rgba(0, 0, 0, 0.1); --orcaa-sidebar-shadow-dark: rgba(0, 0, 0, 0.2); } /* Vodacom Retail theme */ body.theme-vodacomretail { --folder-structure-item-height: 1.8rem; --folder-structure-item-margin-left: 2rem; --folder-structure-item-padding-top: 0.5rem; --primary-color: #CE1602; --secondary-color:#fbe5e5; --navbar-bg-color: var(--secondary-color); --sidebar-color: var(--primary-color); --btn-color: var(--primary-color); --dark-purple-2:var(--primary-color); --bs-table-bg:var(--primary-color); --btn-outline-primary-bg:var(--primary-color); /* normal */ --btn-outline-primary-hover-bg:var(--secondary-color); /* Auth-specific imagery for Vodacom Retail */ --auth-body-bg: url('../vodacom_image/landing_bg.svg'); --auth-cover-image: url('../vodacom_image/login.jpg'); --auth-login-side-image: url('../vodacom_image/login.jpg'); --auth-register-side-image: url('../vodacom_image/login.jpg'); --auth-register-side-image-assist: url('../vodacom_image/login.jpg'); } /* KFC theme */ body.theme-kfc { --primary-color: #e4002b; --secondary-color: #333; --navbar-bg-color: var(--primary-color); --sidebar-color: var(--secondary-color); --btn-color: var(--primary-color); --dark-purple-2:var(--primary-color); --btn-outline-primary-bg:var(--navbar-bg-color); /* normal */ --btn-outline-primary-hover-bg:var(--primary-color); } /* Demo (generic demo tenant) */ body.theme-demo { --primary-color: #950002; --secondary-color: #000; --dark-purple-2:var(--primary-color); --navbar-bg-color: linear-gradient( to left, var(--primary-color) 60%, var(--secondary-color) 90% ); --btn-outline-primary-bg:var(--navbar-bg-color); /* normal */ --btn-outline-primary-hover-bg:var(--primary-color); --sidebar-color: var(--navbar-bg-color); --btn-color: linear-gradient( 135deg, var(--primary-color) 100%, var(--secondary-color) 15% ); } /* Accelerate Cape Town */ body.theme-acceleratecapetown { --primary-color: #01486b; --secondary-color: #e41b2b; --navbar-bg-color: #21acdc; --sidebar-color: var(--navbar-bg-color); --btn-color: #01486b; --dark-purple-2:var(--primary-color); --btn-outline-primary-bg:var(--navbar-bg-color); /* normal */ --btn-outline-primary-hover-bg:var(--primary-color); } /* Chiefluthuli Assist */ body.theme-chiefluthuli { --primary-color: #ef9b9f; --secondary-color:#ef9b9f; --navbar-bg-color: #a9a9a7; --sidebar-color: var(--navbar-bg-color); --dark-purple-2:var(--primary-color); --btn-outline-primary-bg:var(--navbar-bg-color); /* normal */ --btn-outline-primary-hover-bg:var(--primary-color); /* Auth imagery */ --auth-login-side-image: url('../chiefluthuli_image/Luthuli_crest.png'); --auth-register-side-image: url('../chiefluthuli_image/Luthuli_crest.png'); } /* Make the Chiefluthuli logo side image less dominant on auth screens */ body.theme-chiefluthuli .login-wrapper .side-image, body.theme-chiefluthuli .register-wrapper .side-image { background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #fff; } /* Orcaa Assist */ body.theme-assist { --primary-color: #7B68EE; --secondary-color: #494C9E; --navbar-bg-color: #b2c9ff; --sidebar-color: var(--navbar-bg-color); --btn-color: #6918b4; --dark-purple-2:var(--primary-color); } /* GirlCode */ body.theme-girlcode { --primary-color: #CE1602; --secondary-color: #494C9E; --navbar-bg-color: #fbe5e5; --sidebar-color: var(--navbar-bg-color); --btn-color: #212529; --dark-purple-2:var(--primary-color); } /* Veersgroup */ body.theme-veersgroup { --primary-color: #233DFF; --secondary-color: #233DFF; --navbar-bg-color: #e5e7fb; --sidebar-color: var(--navbar-bg-color); --btn-color: #212529; --dark-purple-2:var(--primary-color); } /* EPF Tech Fund */ body.theme-epftechfund { --primary-color: #409696; --secondary-color: #017272; --navbar-bg-color: #e5f1fb; --sidebar-color: var(--navbar-bg-color); --btn-color: #212529; --dark-purple-2:var(--primary-color); } /* Leema Incubation */ body.theme-leemaincubation { --primary-color: #f94d1c; --secondary-color: #494C9E; --navbar-bg-color: #f8f9fa; --sidebar-color: var(--navbar-bg-color); --btn-color: #f94d1c; --dark-purple-2:var(--primary-color); } /* Kasid */ body.theme-kasid { --primary-color: #ff8e18; --secondary-color: #494C9E; --navbar-bg-color: #f8f9fa; --sidebar-color: var(--navbar-bg-color); --btn-color: #ff8e18; --dark-purple-2:var(--primary-color); } /* Flexylearn */ body.theme-flexylearn { --primary-color: #732773; --secondary-color: #494C9E; --navbar-bg-color: #f8f9fa; --sidebar-color: var(--navbar-bg-color); --btn-color: #732773; --dark-purple-2:var(--primary-color); } /* Funa */ body.theme-funa { --primary-color: #8F469B; --secondary-color: #494C9E; --navbar-bg-color: #f8f9fa; --sidebar-color: var(--navbar-bg-color); --btn-color: #6918b4; --dark-purple-2:var(--primary-color); } /* Tekkbridge */ body.theme-tekkbridge { --primary-color: #3a75eb; --secondary-color: #e6ad57; --navbar-bg-color: var(--primary-color); --sidebar-color: var(--navbar-bg-color); --btn-color: var(--primary-color); --dark-purple-2:var(--primary-color); } /* Forvis Mazars */ body.theme-forvismazars { --primary-color: #171C8F; --secondary-color: #005343; --navbar-bg-color: var(--primary-color); --sidebar-color: var(--navbar-bg-color); --btn-color: #171C8F; --dark-purple-2:var(--primary-color); } /* IDC */ body.theme-idc { --primary-color: #05527e; --secondary-color: #f1c54b; --navbar-bg-color: var(--primary-color); --sidebar-color: var(--navbar-bg-color); --btn-color: #05527e; --dark-purple-2:var(--primary-color); } /* EPF GTHub */ body.theme-epfgthub { --primary-color: #003299; --secondary-color: #5f5c5c; --navbar-bg-color: var(--primary-color); --sidebar-color: var(--navbar-bg-color); --btn-color: #003299; --dark-purple-2:var(--primary-color); } /* Lithala */ body.theme-lithala { --primary-color: #134779; --secondary-color: #333; --navbar-bg-color: var(--primary-color); --sidebar-color: var(--secondary-color); --btn-color: #134779; --dark-purple-2:var(--primary-color); } /* Rand Water */ body.theme-randwater { --primary-color: #0a2251; --secondary-color: #b2c9ff; --navbar-bg-color: var(--secondary-color); --sidebar-color: var(--primary-color); --btn-color: #1a3b8a; --dark-purple-2:var(--primary-color); --auth-login-side-image: url('../images/rand_water/landing_page_second_image.jpg'); --auth-register-side-image: url('../images/rand_water/landing_page_third_image.jpg'); } /* Remat Holdings */ body.theme-rematholdings { --primary-color: #006afe; --secondary-color: #006afe; --navbar-bg-color: #006afe66; --sidebar-color: var(--primary-color); --btn-color: #006afe; --dark-purple-2:var(--primary-color); } /* DWYPD theme (used by dwypd/recruitment tenants) */ body.theme-dwypd, body.theme-learning, body.theme-orcaa_learning_dwypd, body.theme-recruitment { --primary-color: #005D28; --secondary-color:#005D28; --navbar-bg-color: #000; --profile-menu-bg-color:#fff; --profile-menu-text-color:#000; --sidebar-color: var(--primary-color); --btn-color: #005D28; --dark-purple-2:var(--primary-color); --badge-color: #ff8e18; /* DWYPD auth imagery */ --auth-body-bg: url('../dwypd_image/dwypd_landing_bg2.png'); --auth-cover-image: url('../dwypd_image/dwypd_landing_photo.png'); --auth-login-side-image: url('../dwypd_image/dwypd_landing_photo.png'); --auth-register-side-image: url('../dwypd_image/dwypd_landing_photo.png'); } /* ICT Chamber (learning-ictchamber tenant) */ body.theme-ictchamber { --primary-color: #0F445E; --secondary-color: #0F445E; --navbar-bg-color: #e5f2fb; --sidebar-color: var(--navbar-bg-color); --btn-color: #6918b4; --dark-purple-2:var(--primary-color); } /* Music Business Lab */ body.theme-musicbusinesslab { --primary-color: #23847B; --secondary-color: #212223; --navbar-bg-color: #212223; --sidebar-color: var(--primary-color); --btn-color: var(--primary-color); --dark-purple-2:var(--primary-color); /* Auth imagery: reuse the logo as background and side image */ --auth-cover-image: url('images/Music_Business_lab/MBL LOGO SVG-01.svg'); --auth-login-side-image: url('images/Music_Business_lab/MBL LOGO SVG-01.svg'); --auth-register-side-image: url('images/Music_Business_lab/MBL LOGO SVG-01.svg'); } /* aic1 */ body.theme-aic1{ --primary-color: #8F469B; --secondary-color: #494C9E; --navbar-bg-color: #b2c9ff; --sidebar-color: var(--navbar-bg-color); --btn-color: #6918b4; }