/* ===================================================================== Job Factory Portal — design system Color scheme matched to the Naandi Foundation "Jobutsav" portal's Liquid Glass theme (same warm-orange/charcoal palette, same glass surfaces + light/dark tokens) so the two portals read as one family. No external CSS/JS framework dependency — keeps the portal fast and working even on restrictive hosting or offline localhost setups. Mobile-first; the sidebar collapses to a slide-in panel on small screens. ===================================================================== */ :root { /* ---- Brand (warm orange, from Jobutsav's brand-500/600/700) ---- */ --brand: #f2660f; --brand-hover: #d4550a; --brand-light: #ffe1cc; --brand-gradient: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #fb923c 100%); /* ---- Ink scale (warm cream/charcoal, not flat grey) ---- */ --ink: #211d19; --ink-muted: #7a7166; --border: rgba(122, 113, 102, 0.22); --bg-solid: #faf6f0; --bg-gradient: radial-gradient(circle at 8% 0%, rgba(194, 65, 12, 0.10) 0%, transparent 42%), radial-gradient(circle at 92% 100%, rgba(87, 83, 78, 0.09) 0%, transparent 48%), var(--bg-solid); /* ---- Liquid-glass surfaces ---- */ --glass-bg: rgba(255, 255, 255, 0.6); --glass-bg-strong: rgba(255, 255, 255, 0.78); --glass-border: rgba(255, 255, 255, 0.55); --glass-blur: 20px; /* Delivery 43 fix: these four used to be fixed values (dark panel, light/cream text) no matter which theme was active, which is why the plain Light theme showed a dark sidebar with light text sitting right next to a light page — jarring, and reported as an "issue" in its own right, separate from the contrast bugs below. --sidebar-bg already had a per-theme override for dark/glass-dark/glass-light (only this base/Light value was ever wrong); --sidebar-border/ --sidebar-ink/--sidebar-ink-strong never had ANY per-theme override at all. Rather than add three new override blocks per theme, these now simply point at --border/--ink-muted/--ink — tokens that already flip correctly for every theme this file has — so the sidebar's text/border colour automatically tracks whichever theme is active, including glass-light (whose sidebar-bg this file already made light, which is exactly the "glass-light sidebar text unreadable" bug fixed here too). The one exception is the profile card's name/role text, which sits on its own permanently-dark photo scrim (templates/layout/sidebar.php) regardless of theme — that is NOT wired to these tokens, see .sidebar__profile-name/-role below. */ --sidebar-bg: linear-gradient(180deg, #fffbf7 0%, #fbf0e4 45%, #f3e2cc 100%); --sidebar-border: var(--border); /* Delivery 61: darkened from var(--ink-muted) (#7a7166) on direct request ("make font color and icon color darker in the sidebar menus" — light themes only). This is now a fixed colour rather than a forwarded var(), specifically for the light-theme case. glass-light needs no override of its own: it never redefines --ink/--ink-muted or --sidebar-ink, so it inherits this same darker value automatically. Each dark theme below (and the prefers-color-scheme dark block) now carries its own fixed --sidebar-ink too — Delivery 62 lightened those independently, on a separate direct request — so none of them fall through to this light-theme value. */ --sidebar-ink: #49433c; --sidebar-ink-strong: var(--ink); /* Delivery 62 — "give one more theme option to add cover page, selected will be the background for all pages": each page now sets this custom property inline on (or , same cascade) to the actor's own chosen cover photo — the exact URL already computed by coverImageForCurrentActor(), the same helper the sidebar profile card and My Profile use — wrapped as url('...'). It defaults to `none` here so a page that has not been updated to set it (or the "Cover" theme simply not being chosen) never breaks the `background` declaration that reads it below; see the new :root[data-theme="cover"] body rule. */ --page-cover-url: none; --surface: var(--glass-bg); /* One step up from --surface, for a hovered or currently-selected row. Real bug found while fixing the dropdowns: this variable was USED in four places (.ss__option:hover / .is-current, .theme-menu__item:hover / .is-current, .panel__head:hover) but never defined anywhere, so `background: var(--surface-2)` was an invalid declaration the browser threw away — those rows had no highlight at all, in any theme. It is deliberately a translucent ink wash rather than a fixed colour, so the one value darkens a light surface and the dark themes' own override lightens a dark one. */ --surface-2: rgba(122, 113, 102, 0.13); --success: #12b76a; --success-bg: #e7fbf1; --success-text: #12b76a; --danger: #dc2626; --danger-bg: #fdeceb; --danger-text: #dc2626; --warning: #ca8a04; --warning-bg: #fdf5db; --info: #0ba5ec; --info-bg: #e9f8ff; --radius: 14px; --shadow: 0 12px 32px rgba(120, 53, 15, 0.16), 0 1px 2px rgba(120, 53, 15, 0.06); --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: 'Outfit', var(--font); } /* Dark theme: applied when the user picks it explicitly, OR when the browser is set to dark mode and the user hasn't chosen "light". */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink: #f3ede4; --ink-muted: #a3978a; --border: rgba(255, 255, 255, 0.10); --surface-2: rgba(255, 255, 255, 0.09); --bg-solid: #131110; --bg-gradient: radial-gradient(circle at 8% 0%, rgba(194, 65, 12, 0.16) 0%, transparent 42%), radial-gradient(circle at 92% 100%, rgba(87, 83, 78, 0.20) 0%, transparent 48%), var(--bg-solid); --glass-bg: rgba(38, 32, 25, 0.55); --glass-bg-strong: rgba(38, 32, 25, 0.82); --glass-border: rgba(255, 255, 255, 0.09); --sidebar-bg: linear-gradient(180deg, #171310 0%, #1d1712 45%, #0e0c0a 100%); /* Delivery 61 hardcoded --sidebar-ink for the light themes instead of forwarding var(--ink-muted), so dark contexts each need their own explicit value to stay independent of that. Delivery 62: lightened further on direct request ("in the dark themes, make sidebar menu font and icons lighter") — this was var(--ink-muted) (#a3978a) until now. */ --sidebar-ink: #cfc6bc; --success-bg: rgba(18, 183, 106, 0.16); --success-text: #4ade80; --danger-bg: rgba(220, 38, 38, 0.16); --danger-text: #f87171; --warning-bg: rgba(202, 138, 4, 0.16); --info-bg: rgba(11, 165, 236, 0.16); --shadow: 0 14px 34px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { color-scheme: dark; --ink: #f3ede4; --ink-muted: #a3978a; --border: rgba(255, 255, 255, 0.10); --surface-2: rgba(255, 255, 255, 0.09); --bg-solid: #131110; --bg-gradient: radial-gradient(circle at 8% 0%, rgba(194, 65, 12, 0.16) 0%, transparent 42%), radial-gradient(circle at 92% 100%, rgba(87, 83, 78, 0.20) 0%, transparent 48%), var(--bg-solid); --glass-bg: rgba(38, 32, 25, 0.55); --glass-bg-strong: rgba(38, 32, 25, 0.82); --glass-border: rgba(255, 255, 255, 0.09); --sidebar-bg: linear-gradient(180deg, #171310 0%, #1d1712 45%, #0e0c0a 100%); /* Delivery 62: lightened on direct request — see the matching comment in the prefers-color-scheme dark block above. */ --sidebar-ink: #cfc6bc; --success-bg: rgba(18, 183, 106, 0.16); --success-text: #4ade80; --danger-bg: rgba(220, 38, 38, 0.16); --danger-text: #f87171; --warning-bg: rgba(202, 138, 4, 0.16); --info-bg: rgba(11, 165, 236, 0.16); --shadow: 0 14px 34px rgba(0, 0, 0, 0.5); } /* ===================================================================== Two extra themes: glossy "liquid glass" in light and dark. Same tokens as the base themes — only the surfaces change — so every component picks them up without any component-level styling. The gloss is a stronger blur, a brighter translucent surface, a highlight along the top edge of each panel and a deeper shadow, which together read as thick glass rather than flat translucency. ===================================================================== */ :root[data-theme="glass-light"] { color-scheme: light; --glass-blur: 26px; --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-strong: rgba(255, 255, 255, 0.74); --glass-border: rgba(255, 255, 255, 0.85); --bg-solid: #eef1f7; --bg-gradient: radial-gradient(circle at 12% 4%, rgba(242, 102, 15, 0.20) 0%, transparent 46%), radial-gradient(circle at 88% 12%, rgba(11, 165, 236, 0.20) 0%, transparent 44%), radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.16) 0%, transparent 52%), var(--bg-solid); --shadow: 0 16px 40px rgba(31, 41, 55, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.75); --sidebar-bg: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.58) 100%); } :root[data-theme="glass-dark"] { color-scheme: dark; --ink: #f4f1ec; --ink-muted: #a9a29a; --border: rgba(255, 255, 255, 0.14); --surface-2: rgba(255, 255, 255, 0.10); --glass-blur: 26px; --glass-bg: rgba(30, 34, 44, 0.52); --glass-bg-strong: rgba(30, 34, 44, 0.76); --glass-border: rgba(255, 255, 255, 0.16); --bg-solid: #0b0f16; --bg-gradient: radial-gradient(circle at 10% 0%, rgba(242, 102, 15, 0.22) 0%, transparent 44%), radial-gradient(circle at 90% 8%, rgba(11, 165, 236, 0.20) 0%, transparent 46%), radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.18) 0%, transparent 54%), var(--bg-solid); --shadow: 0 18px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14); --sidebar-bg: linear-gradient(180deg, rgba(18,22,30,.82) 0%, rgba(12,15,21,.72) 100%); /* Delivery 62: lightened on direct request — see the matching comment in the prefers-color-scheme dark block above. This was var(--ink-muted) (#a9a29a) until now. */ --sidebar-ink: #d2cdc7; --success-bg: rgba(18, 183, 106, 0.18); --success-text: #4ade80; --danger-bg: rgba(220, 38, 38, 0.18); --danger-text: #f87171; --warning-bg: rgba(202, 138, 4, 0.18); --info-bg: rgba(11, 165, 236, 0.18); } /* The gloss itself: a bright hairline along the top of every glass panel. */ :root[data-theme="glass-light"] .card, :root[data-theme="glass-light"] .kpi, :root[data-theme="glass-dark"] .card, :root[data-theme="glass-dark"] .kpi { position: relative; background-image: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 38%); } :root[data-theme="glass-light"] .topbar, :root[data-theme="glass-dark"] .topbar { -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); } /* ===================================================================== Delivery 103 — "Frosted Cover": one more theme, requested as "add one more theme with this effect...only for the cover page..if added the transparency will be like this everywhere..on all tables, info card.. charts etc..and add the same in profile theme section". Built from two pieces that already exist in this file, turned up together rather than as new machinery: - the Cover theme's own page background (the actor's own chosen cover photo, full-bleed, fixed — see coverImageForCurrentActor(), core/helpers.php, and the :root[data-theme="cover"] body rule above) — reused below with a much thinner tint, so the photo itself stays fully visible behind the frosted surfaces, the way the requested screenshot showed pill badges floating over a clearly visible snowy photo rather than a tinted-over one. - the glass-light/glass-dark gloss just above, turned up well past either of them. --glass-blur, --glass-bg, --glass-bg-strong and --glass-border are the four tokens every frosted surface in this app already reads from directly — .card, .kpi (gloss highlight below), .table (line ~1174), .topbar, .sidebar (its own backdrop-filter already uses var(--glass-blur)), .btn-secondary, dropdown/select menus and more — so turning those four up in one place is what makes cards, roster tables, KPI/info tiles AND every chart (each one drawn inside a .card — see modules/dashboard/_charts.php) all read as the same frosted glass over the photo, everywhere, without a single new selector for any of them individually. One variant, not the usual light/dark/cover trio sharp-* and squircle-* got — the request asked for this effect "only for the cover page". ===================================================================== */ :root[data-theme="frost-cover"] { color-scheme: light; --glass-blur: 34px; --glass-bg: rgba(255, 255, 255, 0.32); --glass-bg-strong: rgba(255, 255, 255, 0.5); --glass-border: rgba(255, 255, 255, 0.7); --shadow: 0 16px 44px rgba(31, 41, 55, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6); --sidebar-bg: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.24) 100%); } /* Same photo-background mechanic as the Cover theme, deliberately with a much thinner tint on top of the photo than that theme uses, so more of the photo shows through behind the frosted surfaces above. */ :root[data-theme="frost-cover"] body { background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .22) 100%) no-repeat, var(--page-cover-url) center / cover no-repeat fixed var(--bg-solid); } :root[data-theme="frost-cover"] .card, :root[data-theme="frost-cover"] .kpi { position: relative; background-image: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 42%); } :root[data-theme="frost-cover"] .topbar { -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); } /* ===================================================================== Delivery 107/108 — "Dynamic Backgrounds": Morning, Afternoon and Evening Themes that switch automatically, plus a Festival Theme. This one theme option (data-theme="dynamic") carries no fixed look of its own — templates/layout/app.php also writes a data-daypart attribute (morning/afternoon/evening — see currentDaypart(), core/helpers.php) that these rules key off, corrected client-side for the VISITOR's own local time before first paint (templates/partials/theme_init.php), the same reasoning this app's existing time-of-day greeting and birthday check already use for reading the visitor's own clock rather than the server's. Delivery 108 FIX — "font is not visible": the first version of this block (Delivery 107) left ink/border/card tokens alone, on the assumption that the base (Light) values would simply apply. They don't, always: this app ALSO auto-switches to dark tokens whenever the VISITOR's OWN operating system is set to dark mode, for every theme except one literally named "light" — see the `@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {...} }` block far above. "dynamic" is not literally "light", so that rule matched it too — meaning a visitor whose OS is in dark mode got Dynamic's light morning/afternoon PAGE background with that block's light-on-dark TEXT colour on top of it (invisible), and conversely a visitor whose OS is in light mode got Dynamic's dark evening background with default light-theme text and card colours (also invisible). Each daypart below now explicitly pins its own COMPLETE set of ink/border/card/sidebar/status tokens — mirroring exactly what :root[data-theme="dark"] already does for the plain Dark theme, instead of leaving them to whatever else happens to cascade in — so the visitor's OS colour-scheme setting can never override what this theme intends for the time of day. */ :root[data-theme="dynamic"][data-daypart="morning"], :root[data-theme="dynamic"][data-daypart="afternoon"] { color-scheme: light; --ink: #211d19; --ink-muted: #7a7166; --border: rgba(122, 113, 102, 0.22); --surface-2: rgba(122, 113, 102, 0.13); --glass-bg: rgba(255, 255, 255, 0.6); --glass-bg-strong: rgba(255, 255, 255, 0.78); --glass-border: rgba(255, 255, 255, 0.55); --sidebar-bg: linear-gradient(180deg, #fffbf7 0%, #fbf0e4 45%, #f3e2cc 100%); --sidebar-ink: #49433c; --success-bg: #e7fbf1; --success-text: #12b76a; --danger-bg: #fdeceb; --danger-text: #dc2626; --warning-bg: #fdf5db; --info-bg: #e9f8ff; --shadow: 0 12px 32px rgba(120, 53, 15, 0.16), 0 1px 2px rgba(120, 53, 15, 0.06); /* Delivery 110 fix — "combobox text / chart text / popup theme not visible": the same OS-dark-mode cascade bug the ink/border tokens above were fixed for (Delivery 108) also hit --bg-solid (every 's OPEN option list is drawn by the browser as its own separate surface, not as part of the page — so a translucent background like .form-control's own `rgba(255,255,255,.06)` (which only ever looked dark because it composited over this page's own dark background behind it) has nothing to composite against there, and the browser fell back to a plain near-white list with our dark-theme text colour (light cream) still applied on top of it — exactly the barely-readable "Gates Foundation / Loreal / Mahindra..." dropdown reported. Every