/* TMS · Violet palette · CSS custom-property tokens * * Use these for anything Tailwind doesn't cover (inline styles, third-party * widgets, server-rendered fragments, runtime theming). Set on :root, or scope * to a wrapper class if you want to support multiple palettes side-by-side. */ :root { /* Surface scale */ --bg: #F6F5FA; --bg-2: #EDEBF5; --surface: #FFFFFF; --border: #E5E2EE; --border-strong: #D2CDE2; /* Text */ --text: #1F1B2E; --text-2: #6A6580; --text-3: #9C97AE; /* Brand */ --accent: #5B3FD6; /* deepened for more presence — was #6E55E0 */ --accent-2: #9B5FE0; /* gradient stop — was #B07BE8 */ --accent-soft: #EAE5FB; /* violet tint behind active/selected surfaces */ --accent-soft-bd: #DDD3F7; /* border to pair with --accent-soft */ --accent-ink: #4A2FB8; /* violet text/icon on --accent-soft (AA) */ --link: #5B3FD6; /* Secondary accent (teal) — additive identity, never a second primary */ --teal: #0F766E; /* secondary button text, positive stat values */ --teal-bright: #14B8A6; /* highlights, future chart series */ --teal-soft: #D5F2EE; /* secondary button fill (Command / Export / Pin) */ /* Chrome — bold (default). Rail = deep violet gradient; sidebar/topbar/ canvas = soft violet so the white content card floats in a violet frame. Flip to the dialed-back rail by adding class .chrome-soft on . */ --chrome-rail: linear-gradient(180deg, #5B3FD6, #4A2FB8); --chrome-rail-border: rgba(255,255,255,0.06); --chrome-rail-fg: rgba(255,255,255,0.74); /* inactive rail icon */ --chrome-rail-fg-active: #FFFFFF; /* active rail icon */ --chrome-rail-hover-bg: rgba(255,255,255,0.10); /* rail button hover */ --chrome-rail-active-bg: rgba(255,255,255,0.16); /* active rail pill */ --chrome-divider: rgba(255,255,255,0.18); --chrome-brand-bg: #FFFFFF; /* rail brand-mark box */ --chrome-brand-fg: #5B3FD6; --chrome-avatar-bg: #FFFFFF; /* rail + topbar user avatar */ --chrome-avatar-fg: #5B3FD6; --chrome-tint: #EFEAFB; /* sidebar + topbar + canvas behind card */ --chrome-tint-border: #E1D9F5; /* chrome hairlines / dividers */ /* Status semantics (cf_kpitile warn tone, cf_approval_status badges) — mirror the cf-pill foreground colours in shell.css */ --accent-ok: #3E7E2C; /* approved / positive */ --accent-warn: #A06A18; /* rejected / needs attention */ /* Radius scale */ --radius-sm: 8px; --radius: 10px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 20px; /* Shadows */ --shadow-card: 0 1px 0 rgba(0,0,0,0.04); --shadow-active: 0 1px 0 rgba(0,0,0,0.04), 0 0 0 1px var(--border); --shadow-modal: 0 1px 0 rgba(0,0,0,0.02), 0 24px 48px -24px rgba(40,30,80,0.18); --shadow-cta: 0 1px 0 rgba(255,255,255,0.4) inset, 0 4px 12px -4px rgba(91,63,214,0.5); /* Module accents */ --m-admin: #475569; --m-hr: #e25d5d; --m-mytrak: #4a90c8; --m-myprogress: #2f9d6e; --m-warehouse: #c89043; --m-orgcms: #2fa4a4; --m-morningcall: #3aa9d6; --m-workflow: #d35a82; --m-boardroom: #7a5cc4; --m-training: #5566c4; --m-cabinet: #8a7e6e; --m-webtasks: #7ba83f; --m-analytics: #c69a3a; --m-compliance: #4f6bd6; --m-safetypoint: #cf6b3a; --m-finance: #2e6f4e; } /* Dialed-back chrome — pure token override, no markup change. Add class="chrome-soft" on to soften the rail to lavender while keeping the same layout, icons and active states. */ .chrome-soft { --chrome-rail: #EFEAFB; --chrome-rail-border: #E1D9F5; --chrome-rail-fg: #6A6580; --chrome-rail-fg-active: #5B3FD6; --chrome-rail-hover-bg: #FFFFFF; --chrome-rail-active-bg: #FFFFFF; --chrome-divider: #E1D9F5; --chrome-brand-bg: linear-gradient(135deg, #5B3FD6, #9B5FE0); --chrome-brand-fg: #FFFFFF; --chrome-avatar-bg: #E6DEFA; --chrome-avatar-fg: #4A2FB8; --chrome-tint: #F4F1FC; --chrome-tint-border: #E8E2F7; } /* Base reset and font */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; } .tabular { font-variant-numeric: tabular-nums; } .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* Directional stat figures — teal for positive, amber for negative. Apply to a delta/value span, e.g. +6. */ .cf-pos { color: var(--teal); } .cf-neg { color: var(--accent-warn); } /* ============================================================ Login screen ============================================================ */ .login-shell { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden; } .login-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Violet + teal radial blooms — the brand's two accents framing the card */ background: radial-gradient(1200px 600px at 80% -10%, rgba(91,63,214,0.14), transparent 60%), radial-gradient(900px 520px at -10% 110%, rgba(20,184,166,0.12), transparent 60%); } .login-card { position: relative; z-index: 1; width: 800px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; box-shadow: var(--shadow-modal); } @media (max-width: 720px) { .login-card { grid-template-columns: 1fr; } } .login-brand-row { display: flex; align-items: center; gap: 10px; } .login-brand-mark { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, #5B3FD6, #9B5FE0); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; } .login-brand-text { display: flex; flex-direction: column; line-height: 1.1; } .login-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } .login-brand-tagline { font-size: 11px; color: var(--text-3); font-weight: 500; } .login-greeting { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 32px 0 4px; } .login-sub { font-size: 13px; color: var(--text-2); margin: 0; } .login-form { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; } .login-field { display: flex; flex-direction: column; gap: 6px; } .login-field-label { font-size: 11.5px; font-weight: 500; color: var(--text-2); } .login-input { height: 38px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 12px; font-size: 13.5px; font-family: inherit; color: var(--text); width: 100%; outline: none; } .login-input:focus { border: 1.5px solid var(--accent); box-shadow: none; } .login-input--password-wrap { position: relative; display: flex; align-items: center; } .login-input--password { background: var(--bg-2); padding-right: 36px; letter-spacing: 0; } .login-input--password::placeholder { letter-spacing: 0; } .login-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 0; color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .login-submit { height: 42px; margin-top: 6px; background: var(--accent); color: #fff; border: 0; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: var(--shadow-cta); } .login-submit:disabled { opacity: 0.6; cursor: default; } .login-footer { margin-top: 16px; font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; } .login-footer a { text-decoration: none; } .login-footer a:hover { text-decoration: underline; } .login-footer-primary { color: var(--link); } .login-footer-secondary { color: var(--text-3); } .login-side { background: linear-gradient(180deg, #F4F1FB, #F8F6FC); border-radius: var(--radius-lg); padding: 22px; } .login-side-eyebrow { font-size: 11.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; } .login-modules { margin-top: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .login-module { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); font-size: 12px; text-decoration: none; color: var(--text); } .login-module-icon { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; } .login-module-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .login-side-hint { margin-top: 16px; font-size: 11px; color: var(--text-3); } .login-error { margin-top: 18px; border: 1px solid #F2C4B0; background: #FFEFE9; color: #8A2B14; padding: 10px 12px; border-radius: var(--radius); font-size: 12.5px; } /* ------------------------------------------------------------ Flash alert on shell-less pages (auth screens) There is no lavender chrome to sit on, so the alert floats at the top of the viewport. The .tms-flash rules themselves live in shell.css, which these pages don't load — repeated here, scoped to the wrapper so they can never reach a shell page. ------------------------------------------------------------ */ .tms-flash-float { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 60; width: max-content; max-width: calc(100% - 32px); /* The wrapper is emitted on every shell-less page, message or not, and the include leaves a whitespace text node behind — so it is never :empty and must not intercept clicks on the card underneath it. */ pointer-events: none; } .tms-flash-float .tms-flash { pointer-events: auto; display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--radius); font-size: 13px; box-shadow: 0 6px 20px rgba(24, 20, 40, 0.12); } .tms-flash-float .tms-flash--error { background: #FFEFE9; color: #8A2B14; border-color: #F2C4B0; } .tms-flash-float .tms-flash--success { background: #E6F5EB; color: #14653B; border-color: #B7E0C5; } .tms-flash-float .tms-flash--warning { background: #FEF7E0; color: #78580A; border-color: #F1E3A6; } .tms-flash-float .tms-flash--info { background: #E0EAFB; color: #2C5E94; border-color: #B8CDF0; }