/* ============================================================ HRMS UI THEME LAYER (review build) ------------------------------------------------------------ A custom CSS-variable theme system that sits ON TOP of the existing Bootstrap/Skote styles. It does NOT modify Bootstrap. Switch theme by setting an attribute on or : (default brand) Brand palette is taken from the company logo: Navy #1B2A4A Teal #1CA9A0 Orange #F7941E ============================================================ */ /* ---------- Default theme: Corporate Blue / Teal (brand) ---------- */ :root, [data-theme="teal"] { --brand-navy: #1B2A4A; --brand-navy-700: #233a63; --brand-teal: #1CA9A0; --brand-teal-600: #178f88; --brand-orange: #F7941E; --c-primary: var(--brand-teal); --c-primary-600: var(--brand-teal-600); --c-accent: var(--brand-orange); --c-sidebar: var(--brand-navy); --c-sidebar-2: #14213d; --c-bg: #f3f7fa; --c-surface: #ffffff; --c-surface-2: #f7fafc; --c-border: #e4ebf2; --c-text: #1f2d3d; --c-text-muted: #6b7c93; --c-text-invert: #ffffff; --grad-brand: linear-gradient(135deg, #1B2A4A 0%, #163a5f 45%, #1CA9A0 100%); --grad-primary: linear-gradient(135deg, #1CA9A0 0%, #178f88 100%); --ring: rgba(28,169,160,.28); --shadow-sm: 0 1px 2px rgba(16,32,55,.06), 0 1px 3px rgba(16,32,55,.08); --shadow-md: 0 8px 24px rgba(16,32,55,.10); --shadow-lg: 0 24px 60px rgba(16,32,55,.18); --radius: 16px; --radius-sm: 10px; --radius-pill: 999px; --ease: cubic-bezier(.4,0,.2,1); } /* ---------- Theme: Navy-forward ---------- */ [data-theme="navy"] { --c-primary: #1B2A4A; --c-primary-600: #14213d; --c-accent: #F7941E; --c-sidebar: #14213d; --c-sidebar-2: #0e1830; --c-bg: #eef2f7; --ring: rgba(27,42,74,.28); --grad-primary: linear-gradient(135deg, #233a63 0%, #1B2A4A 100%); } /* ---------- Theme: Indigo / Violet SaaS ---------- */ [data-theme="indigo"] { --c-primary: #6366F1; --c-primary-600: #4f46e5; --c-accent: #f59e0b; --c-sidebar: #1e1b4b; --c-sidebar-2: #181442; --c-bg: #f5f3ff; --ring: rgba(99,102,241,.30); --grad-brand: linear-gradient(135deg,#312e81 0%,#4f46e5 50%,#7c3aed 100%); --grad-primary: linear-gradient(135deg,#6366F1 0%,#4f46e5 100%); } /* ---------- Theme: Emerald Fresh ---------- */ [data-theme="emerald"] { --c-primary: #10B981; --c-primary-600: #059669; --c-accent: #f59e0b; --c-sidebar: #064e3b; --c-sidebar-2: #053d2e; --c-bg: #ecfdf5; --ring: rgba(16,185,129,.30); --grad-brand: linear-gradient(135deg,#064e3b 0%,#059669 55%,#34d399 100%); --grad-primary: linear-gradient(135deg,#10B981 0%,#059669 100%); } /* ---------- Theme: Dark Premium / Glass ---------- */ [data-theme="dark"] { --c-primary: #22d3ee; --c-primary-600: #06b6d4; --c-accent: #f7941e; --c-sidebar: #0b1220; --c-sidebar-2: #070d18; --c-bg: #0f172a; --c-surface: rgba(255,255,255,.06); --c-surface-2: rgba(255,255,255,.04); --c-border: rgba(255,255,255,.12); --c-text: #e6edf5; --c-text-muted: #93a4bd; --ring: rgba(34,211,238,.35); --grad-brand: linear-gradient(135deg,#0b1220 0%,#10243b 50%,#0e3a40 100%); --grad-primary: linear-gradient(135deg,#22d3ee 0%,#0891b2 100%); --shadow-lg: 0 24px 60px rgba(0,0,0,.55); } /* ---------- Theme: Orange (brand accent forward) ---------- */ [data-theme="orange"] { --c-primary: #F7941E; --c-primary-600: #e07d0a; --c-accent: #1CA9A0; --c-sidebar: #1B2A4A; --c-sidebar-2: #14213d; --c-bg: #fff7ed; --ring: rgba(247,148,30,.30); --grad-brand: linear-gradient(135deg,#1B2A4A 0%,#7a3d12 55%,#F7941E 100%); --grad-primary: linear-gradient(135deg,#F7941E 0%,#e07d0a 100%); } /* ---------- Theme: Sunset (warm orange → coral) ---------- */ [data-theme="sunset"] { --c-primary: #f97316; --c-primary-600: #ea580c; --c-accent: #f43f5e; --c-sidebar: #431407; --c-sidebar-2: #2e0d05; --c-bg: #fff7ed; --ring: rgba(249,115,22,.30); --grad-brand: linear-gradient(135deg,#7c2d12 0%,#ea580c 45%,#f59e0b 100%); --grad-primary: linear-gradient(135deg,#f97316 0%,#fb7185 100%); } /* ---------- Theme: Rose ---------- */ [data-theme="rose"] { --c-primary: #f43f5e; --c-primary-600: #e11d48; --c-accent: #f59e0b; --c-sidebar: #4c0519; --c-sidebar-2: #3a0413; --c-bg: #fff1f2; --ring: rgba(244,63,94,.28); --grad-brand: linear-gradient(135deg,#4c0519 0%,#be123c 50%,#fb7185 100%); --grad-primary: linear-gradient(135deg,#f43f5e 0%,#e11d48 100%); } /* ============================================================ DARK MODE (user toggle) — "dark-tinted brand" Orthogonal to the color theme: applied via data-mode="dark" on . It darkens surfaces/text but KEEPS --c-primary / --c-accent / --grad-primary from whatever color theme is set, so each company keeps its brand color in dark mode. ============================================================ */ [data-mode="dark"]{ --c-bg: #0f172a; --c-surface: #1a2336; --c-surface-2: #131c2e; --c-border: #28324a; --c-text: #e6edf5; --c-text-muted:#93a4bd; --c-sidebar: #0b1220; --c-sidebar-2: #070d18; --shadow-sm: 0 1px 2px rgba(0,0,0,.40); --shadow-md: 0 8px 24px rgba(0,0,0,.45); --shadow-lg: 0 24px 60px rgba(0,0,0,.55); } /* ============================================================ Small reusable utilities for the new UI (scoped, safe names) ============================================================ */ .ui-fade-in { animation: uiFadeIn .5s var(--ease) both; } .ui-rise-in { animation: uiRiseIn .55s var(--ease) both; } .ui-rise-in.d1{ animation-delay:.06s; } .ui-rise-in.d2{ animation-delay:.12s; } .ui-rise-in.d3{ animation-delay:.18s; } .ui-rise-in.d4{ animation-delay:.24s; } @keyframes uiFadeIn { from{opacity:0} to{opacity:1} } @keyframes uiRiseIn { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} } /* Button micro-interaction (press + ripple host) */ .ui-btn{ position:relative; overflow:hidden; border:0; cursor:pointer; border-radius:var(--radius-pill); font-weight:600; letter-spacing:.2px; transition: transform .12s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease); } .ui-btn:active{ transform:translateY(1px) scale(.99); } .ui-btn .ui-ripple{ position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.5); pointer-events:none; animation:uiRipple .6s var(--ease); } @keyframes uiRipple{ to{ transform:scale(2.6); opacity:0; } } /* Skeleton loader shimmer */ .ui-skeleton{ background:linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.12) 37%, rgba(0,0,0,.06) 63%); background-size:400% 100%; animation:uiShimmer 1.4s ease infinite; border-radius:8px; } @keyframes uiShimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} } /* Inline button spinner */ .ui-spin{ width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff; display:inline-block; animation:uiSpin .7s linear infinite; vertical-align:-3px; } @keyframes uiSpin{ to{ transform:rotate(360deg) } } @media (prefers-reduced-motion: reduce){ .ui-fade-in,.ui-rise-in{ animation:none !important; } }