/* ============================================================================
KSA JOBS PORTAL — GLASSMORPHISM DESIGN SYSTEM (ksa-glass.css)
----------------------------------------------------------------------------
Brand colors (STRICT — the only two brand colors allowed):
Primary : #444097 Accent : #eb3335
Typography: Poppins (webfont) -> Footlight MT -> system sans-serif.
Theming : light (default) / dark via html[data-ksa-theme="dark"].
Controlled by production/js/ksa-theme.js (toggle + localStorage persistence).
HOW FUTURE MODULES ADOPT THIS SYSTEM
Include two lines in the page (paths relative to the page):
Then wrap content panels in class "x_panel" or "ksa-glass".
Never hard-code colors — use the CSS variables below.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
/* ---------------------------------------------------------------------------
1. DESIGN TOKENS (CSS custom properties)
------------------------------------------------------------------------- */
:root {
/* Brand */
--ksa-primary: #444097;
--ksa-primary-600: #37347c; /* darker shade of primary */
--ksa-primary-300: #6f6bc0; /* lighter tint of primary */
--ksa-primary-100: #e9e8f6; /* faint tint of primary */
--ksa-accent: #eb3335;
--ksa-accent-600: #c4272a; /* darker shade of accent */
--ksa-accent-100: #fdeaea; /* faint tint of accent */
/* Typography */
--ksa-font: 'Poppins', 'Footlight MT', 'Segoe UI', Arial, sans-serif;
/* Light theme surfaces */
--ksa-bg-page: linear-gradient(135deg, #eef0fb 0%, #f6f5fc 45%, #fdf0f0 100%);
--ksa-bg-page-solid: #f2f2fa;
--ksa-text: #232244;
--ksa-text-soft: #55547a;
--ksa-text-inverse: #ffffff;
/* Glass tokens */
--ksa-glass-bg: rgba(255, 255, 255, 0.60);
--ksa-glass-bg-strong:rgba(255, 255, 255, 0.78);
--ksa-glass-border: rgba(68, 64, 151, 0.18);
--ksa-glass-blur: 14px;
--ksa-glass-shadow: 0 8px 32px rgba(68, 64, 151, 0.14);
--ksa-glass-radius: 14px;
/* Sidebar */
--ksa-side-bg: linear-gradient(180deg, rgba(68,64,151,0.94) 0%, rgba(55,52,124,0.94) 100%);
--ksa-side-text: #eceaf8;
--ksa-side-active: rgba(255,255,255,0.16);
/* Controls */
--ksa-input-bg: rgba(255,255,255,0.72);
--ksa-input-border: rgba(68, 64, 151, 0.28);
--ksa-focus-ring: 0 0 0 3px rgba(68, 64, 151, 0.25);
--ksa-table-stripe: rgba(68, 64, 151, 0.05);
--ksa-table-head: rgba(68, 64, 151, 0.10);
}
html[data-ksa-theme="dark"] {
--ksa-bg-page: linear-gradient(135deg, #14132b 0%, #1b1a38 55%, #2a1424 100%);
--ksa-bg-page-solid: #16152e;
--ksa-text: #eceaf8;
--ksa-text-soft: #b9b7d8;
--ksa-text-inverse: #ffffff;
--ksa-glass-bg: rgba(38, 36, 84, 0.48);
--ksa-glass-bg-strong:rgba(38, 36, 84, 0.70);
--ksa-glass-border: rgba(151, 148, 219, 0.22);
--ksa-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
--ksa-side-bg: linear-gradient(180deg, rgba(24,23,52,0.92) 0%, rgba(30,28,66,0.92) 100%);
--ksa-side-text: #d9d7f0;
--ksa-side-active: rgba(111,107,192,0.28);
--ksa-input-bg: rgba(20, 19, 43, 0.65);
--ksa-input-border: rgba(151, 148, 219, 0.35);
--ksa-focus-ring: 0 0 0 3px rgba(111, 107, 192, 0.45);
--ksa-table-stripe: rgba(111, 107, 192, 0.08);
--ksa-table-head: rgba(111, 107, 192, 0.16);
}
/* ---------------------------------------------------------------------------
2. BASE / TYPOGRAPHY
------------------------------------------------------------------------- */
html, body {
font-family: var(--ksa-font) !important;
color: var(--ksa-text);
background: var(--ksa-bg-page) fixed !important;
min-height: 100vh;
}
body { font-size: 14px; line-height: 1.6; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--ksa-font) !important;
color: var(--ksa-text);
font-weight: 600;
letter-spacing: .2px;
}
h1 { font-size: 26px; } h2 { font-size: 22px; } h3 { font-size: 19px; }
h4 { font-size: 16px; } h5 { font-size: 14px; }
label, .col-form-label {
font-weight: 500;
color: var(--ksa-text-soft);
font-size: 13px;
}
a { color: var(--ksa-primary); transition: color .18s ease; }
a:hover, a:focus { color: var(--ksa-accent); text-decoration: none; }
small, .small { font-size: 12px; color: var(--ksa-text-soft); }
/* Visible focus for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--ksa-accent) !important;
outline-offset: 2px;
}
/* ---------------------------------------------------------------------------
3. GLASS SURFACES — panels, cards, modals
Gentelella containers are re-skinned; use .ksa-glass on anything new.
------------------------------------------------------------------------- */
.ksa-glass,
.x_panel,
.panel, .card,
.modal-content,
.login_content form,
.jumbotron,
.well {
background: var(--ksa-glass-bg) !important;
-webkit-backdrop-filter: blur(var(--ksa-glass-blur));
backdrop-filter: blur(var(--ksa-glass-blur));
border: 1px solid var(--ksa-glass-border) !important;
border-radius: var(--ksa-glass-radius) !important;
box-shadow: var(--ksa-glass-shadow);
color: var(--ksa-text);
}
.x_panel { padding: 18px 20px; margin-bottom: 18px; }
.x_title {
border-bottom: 1px solid var(--ksa-glass-border) !important;
padding-bottom: 10px; margin-bottom: 14px;
}
.x_title h2, .x_title h3 { color: var(--ksa-primary); font-weight: 600; }
html[data-ksa-theme="dark"] .x_title h2,
html[data-ksa-theme="dark"] .x_title h3 { color: var(--ksa-primary-300); }
/* Section headings used across profile pages */
.auto-style2, .auto-style3 { font-family: var(--ksa-font) !important; }
/* ---------------------------------------------------------------------------
4. HEADER / TOP NAVIGATION
------------------------------------------------------------------------- */
.top_nav .nav_menu {
background: var(--ksa-glass-bg-strong) !important;
-webkit-backdrop-filter: blur(var(--ksa-glass-blur));
backdrop-filter: blur(var(--ksa-glass-blur));
border-bottom: 1px solid var(--ksa-glass-border);
box-shadow: 0 2px 18px rgba(68,64,151,.10);
color: var(--ksa-text);
}
/* NOTE: do NOT include .fa/.glyphicon here — a wildcard font-family replaces the
icon font and glyphs render as empty boxes (see §27). */
.top_nav .nav_menu, .top_nav .nav_menu *:not(.fa):not(.glyphicon) { font-family: var(--ksa-font); }
.top_nav .navbar-right li, .top_nav .navbar-right strong { color: var(--ksa-text) !important; }
.ksa-agency-name { font-size: 20px; font-weight: 700; color: var(--ksa-primary); }
html[data-ksa-theme="dark"] .ksa-agency-name { color: var(--ksa-primary-300); }
.ksa-agency-tagline { font-size: 12px; color: var(--ksa-text-soft); font-weight: 400; }
.ksa-nav-actions a {
display: inline-block; margin-left: 12px; font-weight: 600;
color: var(--ksa-primary) !important; font-size: 13px;
}
.ksa-nav-actions a:hover { color: var(--ksa-accent) !important; }
/* ---------------------------------------------------------------------------
5. SIDEBAR (production/js/user_menu.ascx — structure preserved)
------------------------------------------------------------------------- */
.left_col, .main_menu_side, #sidebar-menu {
background: transparent;
}
#sidebar-menu.main_menu {
background: var(--ksa-side-bg) !important;
-webkit-backdrop-filter: blur(var(--ksa-glass-blur));
backdrop-filter: blur(var(--ksa-glass-blur));
border: 1px solid var(--ksa-glass-border);
border-radius: var(--ksa-glass-radius);
box-shadow: var(--ksa-glass-shadow);
/* Tightened up (was 14px 10px 20px / 10px 6px) so more items fit before
the user needs to scroll to reach the rest. */
padding: 8px 8px 12px;
margin: 6px 6px;
}
/* Sidebar header: platform title only (logo removed - it made this header
tall enough to crowd/overflow the top navbar). */
.ksa-side-header { text-align: center; padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 12px; }
.ksa-side-title {
display: block; font-size: 15px; font-weight: 700; letter-spacing: .4px;
color: var(--ksa-text-inverse) !important; text-transform: uppercase; line-height: 1.35;
}
.ksa-side-title:hover { color: #ffd7d7 !important; }
/* Menu items — names/order untouched, visuals modernized. Styled like
.ksa-dash-cards (flex row, icon in its own badge) instead of a plain
text link, for the same look across every sidebar entry. */
#sidebar-menu .nav.side-menu > li > a,
#sidebar-menu .nav.child_menu > li > a {
color: var(--ksa-side-text) !important;
font-family: var(--ksa-font);
font-size: 13.5px; font-weight: 500;
border-radius: 8px;
/* Tightened up (was 10px 12px / 2px 4px) so more items fit before the
user needs to scroll to reach the rest. */
padding: 7px 10px;
margin: 1px 3px;
display: flex; align-items: center;
position: relative;
background: transparent;
transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
#sidebar-menu .nav.side-menu > li > a:hover,
#sidebar-menu .nav.child_menu > li > a:hover {
background: var(--ksa-side-active);
color: #ffffff !important;
padding-left: 18px;
}
#sidebar-menu .nav.side-menu > li.current-page > a,
#sidebar-menu .nav.child_menu > li.current-page > a,
#sidebar-menu li a.ksa-active {
background: var(--ksa-accent) !important;
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(235,51,53,.35);
}
#sidebar-menu li a.ksa-active::before {
content: ""; position: absolute; left: -4px; top: 20%; height: 60%; width: 4px;
border-radius: 4px; background: #ffffff;
}
#sidebar-menu .fa-chevron-down {
/* was float:right - doesn't apply inside the flex row above, use auto margin instead */
margin-left: auto; float: none; font-size: 10px;
transition: transform .25s ease;
}
#sidebar-menu li.active > a > .fa-chevron-down { transform: rotate(180deg); }
/* "My Profile" submenu items (.ksa-profile-cards, in user_menu.ascx) get the
full two-line ksa-dash-cards treatment - bold title + description - not
just an icon and a single line like other submenu entries. */
#sidebar-menu .ksa-profile-cards > li > a {
align-items: center;
min-height: 0;
}
#sidebar-menu .ksa-profile-cards > li > a > span {
display: flex; flex-direction: column; gap: 1px;
min-width: 0;
}
#sidebar-menu .ksa-profile-cards > li > a > span > b {
font-size: 12.5px; font-weight: 600;
white-space: normal; line-height: 1.25;
}
#sidebar-menu .ksa-profile-cards > li > a > span > span {
font-size: 10px; font-weight: 400; opacity: .7;
white-space: normal; line-height: 1.25;
}
/* Child menus: smooth open feel + indentation guides. Open by default (base
custom.css has display:none) - ksa-theme.js seeds .active on load so the
old jQuery accordion's own click-to-toggle still works from there, this
just avoids a flash-of-collapsed-content before that script runs.
height/max-height/overflow forced here because custom.js's slideUp/slideDown
leaves a cached inline pixel height behind after animating - once "My
Profile" grew taller (2-line card items), that stale height came up short
and clipped the last few entries. Forcing auto height means the toggle
snaps open/closed instead of sliding, but nothing gets clipped regardless
of content height. */
#sidebar-menu .nav.child_menu {
display: block;
height: auto !important;
max-height: none !important;
overflow: visible !important;
background: rgba(0,0,0,.14); border-radius: 8px;
/* Tightened up (was 2px 6px 6px / 4px 2px) so more items fit before the
user needs to scroll to reach the rest. */
margin: 1px 4px 4px;
padding: 2px 2px;
}
#sidebar-menu .nav.child_menu li {
border-left: 2px solid rgba(255,255,255,.12); margin-left: 8px;
/* Gentelella indents every nesting level by 36px (padding-left, custom.css
~1341). With nested child levels most of a narrow column went to pure
indent and labels word-broke when the sidebar was resized. The guide line
above already conveys depth; a small indent is enough. */
padding-left: 14px !important;
}
#sidebar-menu .nav.child_menu li:hover { border-left-color: var(--ksa-accent); }
/* Sidebar section slot for FUTURE MODULES: