/* ============================================================================= EasyPay Design System — Colors & Typography ============================================================================= Single source of truth for CSS variables used across the EasyPay brand. Derived from the EasyPayRevamp codebase (Bootstrap 5 + Metronic + Poppins). ============================================================================= */ /* ── BRAND FONTS ──────────────────────────────────────────────────────────── Myriad Pro is the official EasyPay wordmark + UI typeface. Photograph Signature is the script face used for signatures on pay slips, letters, and hero moments ("Welcome back"). =========================================================================== */ @font-face { font-family: 'Myriad Pro'; src: url('../fonts/MyriadPro-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Myriad Pro'; src: url('../fonts/MyriadPro-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Photograph Signature'; src: url('../fonts/PHOTOGRAPH_SIGNATURE.TTF') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ── BRAND COLORS ─────────────────────────────────────────────────────── */ /* The "easypay" wordmark uses a bluish turquoise "P" glyph. The sidebar uses deep navy. Active states use a cyan→azure gradient. */ --ep-brand-cyan: #53D0E0; /* logo glyph cyan */ --ep-brand-cyan-light: #8FDEE8; /* logo tint, hover */ --ep-brand-cyan-dark: #2FB8CC; /* darker cyan */ --ep-brand-teal: #0ea5e9; /* action icon tint */ --ep-brand-navy: #002843; /* sidebar deepest */ --ep-brand-navy-2: #003d60; /* sidebar gradient top */ --ep-brand-navy-3: #004080; /* primary buttons, table headers */ --ep-brand-navy-4: #004B78; /* dashboard heading */ --ep-brand-navy-5: #004e6a; /* secondary navy */ --ep-brand-blue: #007bff; /* sign-in submit */ --ep-brand-blue-hover: #0056b3; /* hover */ --ep-brand-azure: #0073e6; /* table sort */ --ep-brand-sky: #3399ff; /* secondary blue */ /* Signature gradient — primary actions, active states, table headers. Inset stops (-25% / 125%) push the saturated endpoint hues off the rounded edges so buttons don't show indigo/cyan "caps" at left/right. */ --ep-gradient-active: linear-gradient(90deg, #3a7bd5 -25%, #00d2ff 125%); /* @kind color */ --ep-gradient-sidebar: linear-gradient(180deg, #003d60, #002843); /* @kind color */ --ep-gradient-card-navy: linear-gradient(135deg, #002843, #004e6a); /* @kind color */ --ep-gradient-card-blu: linear-gradient(135deg, #004B78, #53D0E0); /* @kind color */ /* ── NEUTRALS (Slate palette used throughout) ─────────────────────────── */ --ep-ink: #0f172a; /* titles, strong text */ --ep-ink-2: #1a202c; /* section title */ --ep-ink-3: #1e293b; /* body-strong */ --ep-ink-4: #334155; /* body */ --ep-text: #475569; /* paragraph */ --ep-text-muted: #64748b; /* subtle text */ --ep-text-subtle: #94a3b8; /* placeholder, meta */ --ep-text-dim: #cbd5e1; /* disabled hints */ --ep-line: #e2e8f0; /* default border */ --ep-line-2: #e8eef6; /* card border */ --ep-line-3: #f1f5f9; /* subtle divider */ --ep-surface: #ffffff; /* cards, inputs */ --ep-surface-2: #f8fafc; /* subtle raised */ --ep-surface-3: #f8f9fa; /* bs light */ --ep-bg: #e3ebf2; /* app background tint */ --ep-bg-page: #e4f0fc; /* content area tint (blue) */ /* ── SEMANTIC / STATUS ────────────────────────────────────────────────── */ --ep-success: #10b981; --ep-success-deep: #0b6623; --ep-success-soft-bg: #e8fdf2; --ep-success-soft-fg: #0f766e; --ep-warning: #faad39; /* EasyPay amber — leave/local badge */ --ep-warning-orange: #f59e0b; /* KPI orange */ --ep-warning-deep: #b8751a; --ep-warning-soft-bg: #fff4ed; --ep-warning-soft-fg: #c2410c; --ep-danger: #dc2626; --ep-danger-soft-bg: #fff0ef; --ep-danger-soft-fg: #dc2626; --ep-danger-strong: #e70d0d; /* required asterisk */ --ep-info: #3b82f6; --ep-info-soft-bg: #eff6ff; --ep-info-soft-fg: #1d4ed8; --ep-accent-orange: #f05b2b; /* secondary employee accent */ --ep-accent-amber: #f6aa38; --ep-accent-pink: #ec4899; /* female gender, accent */ --ep-accent-purple: #8b5cf6; /* KPI purple */ /* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */ /* UI text + display both use Myriad Pro (the brand UI face). Myriad Pro ships Regular (400) + Semibold (600) — Semibold is the heaviest weight, so display headings render at 600, not 700/800. Script: Photograph Signature — reserved for signature moments. */ --ep-font-sans: 'Myriad Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --ep-font-display: 'Myriad Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --ep-font-script: 'Photograph Signature', 'Brush Script MT', cursive; --ep-font-mono: 'SFMono-Regular', ui-monospace, Consolas, 'Liberation Mono', Menlo, monospace; /* Type scale (rem) */ --ep-text-xs: 0.75rem; /* 12 — meta, legend */ --ep-text-sm: 0.8125rem; /* 13 — table cells, labels */ --ep-text-base: 0.9375rem; /* 15 — body */ --ep-text-md: 1rem; /* 16 — default */ --ep-text-lg: 1.125rem; /* 18 — card titles */ --ep-text-xl: 1.25rem; /* 20 — section title */ --ep-text-2xl: 1.5rem; /* 24 — h4 */ --ep-text-3xl: 1.75rem; /* 28 — card values */ --ep-text-4xl: 2rem; /* 32 — display */ --ep-weight-light: 300; --ep-weight-regular: 400; --ep-weight-medium: 500; --ep-weight-semi: 600; /* ⚠ Myriad Pro has no 700 or 800 cut. Setting either of these on Myriad Pro text makes the browser synthesize a fake bold — which is exactly what the condensed alias was hiding. Kept for non-Myriad text only. */ --ep-weight-bold: 700; --ep-weight-heavy: 800; --ep-leading-tight: 1.2; --ep-leading-snug: 1.35; --ep-leading-normal: 1.5; --ep-leading-relaxed: 1.7; --ep-tracking-tight: -0.02em; --ep-tracking-normal: 0; --ep-tracking-wide: 0.06em; --ep-tracking-wider: 0.12em; /* ── RADII, SHADOWS, SPACING, MOTION ──────────────────────────────────── */ --ep-radius-xs: 5px; --ep-radius-sm: 8px; --ep-radius-md: 10px; /* default card */ --ep-radius-lg: 12px; /* buttons, inputs */ --ep-radius-xl: 14px; /* chart cards */ --ep-radius-2xl: 16px; /* notification */ --ep-radius-3xl: 20px; /* KPI cards */ --ep-radius-pill: 999px; /* Navy-tinted shadows — warmer than neutral grey, more visible than the originals. Every tier layers a crisp 1–2px contact shadow with a softer diffuse shadow so edges stay defined on light backgrounds. */ --ep-shadow-xs: 0 1px 2px rgba(0, 40, 80, 0.08); --ep-shadow-sm: 0 2px 4px rgba(0, 40, 80, 0.06), 0 4px 10px rgba(0, 40, 80, 0.08); --ep-shadow-md: 0 2px 4px rgba(0, 40, 80, 0.06), 0 8px 20px rgba(0, 40, 80, 0.10); --ep-shadow-card: 0 1px 2px rgba(0, 40, 80, 0.06), 0 6px 16px rgba(0, 40, 80, 0.10); --ep-shadow-hover: 0 2px 4px rgba(0, 40, 80, 0.08), 0 12px 28px rgba(0, 40, 80, 0.16); --ep-shadow-lg: 0 4px 8px rgba(0, 40, 80, 0.08), 0 16px 40px rgba(0, 40, 80, 0.18); --ep-shadow-sidebar: 4px 0 24px rgba(0, 0, 0, 0.28); --ep-shadow-focus-blue: 0 0 0 3px rgba(58, 123, 213, 0.18); --ep-shadow-login: 0 12px 24px rgba(0, 40, 80, 0.12), 0 32px 80px rgba(0, 40, 80, 0.22); /* Overlay surfaces — modals & sweet-alerts (NewModalDesign.css / commonModals.css) */ --ep-shadow-modal: 0 0 0 1px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.08), 0 32px 64px -8px rgba(15, 23, 42, 0.22); --ep-shadow-popup: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); /* Overlay radii */ --ep-radius-modal: 18px; /* .ep-modal */ --ep-radius-popup: 14px; /* .ep-choice-popup (SweetAlert) + toast */ /* Toast palette (toastr theme — easyPayAnimations.css). NOTE these differ slightly from the core semantic set: error is the lighter #ef4444 and info is #3b82f6, matching the toastr left-bar + icon-pill treatment. */ --ep-toast-success: #10b981; --ep-toast-error: #ef4444; --ep-toast-warning: #f59e0b; --ep-toast-info: #3b82f6; --ep-space-1: 4px; --ep-space-2: 8px; --ep-space-3: 12px; --ep-space-4: 16px; --ep-space-5: 20px; --ep-space-6: 24px; --ep-space-8: 32px; --ep-space-10: 40px; --ep-space-12: 48px; --ep-motion-fast: 0.15s ease; /* @kind other */ --ep-motion-base: 0.25s ease; /* @kind other */ --ep-motion-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ep-motion-card: 0.22s ease; /* @kind other */ } /* ============================================================================= SEMANTIC ELEMENT DEFAULTS Give raw HTML tags a sensible look without any class. Consumers still get everything they need via .ep-h1 etc. helper classes. ============================================================================= */ .ep-type { font-family: var(--ep-font-sans); color: var(--ep-ink); line-height: var(--ep-leading-normal); } /* Display (hero / splash) — Semibold is the heaviest real cut Myriad Pro has */ .ep-display { font-family: var(--ep-font-display); font-size: clamp(2rem, 3.4vw, var(--ep-text-4xl)); font-weight: var(--ep-weight-semi); line-height: var(--ep-leading-tight); letter-spacing: var(--ep-tracking-tight); color: var(--ep-brand-navy-4); } /* Headings — Myriad Pro ships 400 and 600 only, so Semibold is the ceiling. Hierarchy comes from size, colour and letterspacing rather than weight. */ .ep-h1 { font-family: var(--ep-font-display); font-size: var(--ep-text-3xl); font-weight: var(--ep-weight-semi); color: var(--ep-brand-navy-4); line-height: var(--ep-leading-tight); letter-spacing: -0.01em; margin: 0 0 .25em; } .ep-h2 { font-size: var(--ep-text-2xl); font-weight: var(--ep-weight-semi); color: var(--ep-brand-navy-4); line-height: var(--ep-leading-snug); margin: 0 0 .4em; } .ep-h3 { font-size: var(--ep-text-xl); font-weight: var(--ep-weight-semi); color: var(--ep-ink-2); line-height: var(--ep-leading-snug); margin: 0 0 .4em; } .ep-h4 { font-size: var(--ep-text-lg); font-weight: var(--ep-weight-semi); color: var(--ep-ink-3); line-height: var(--ep-leading-snug); margin: 0 0 .4em; } .ep-h5 { font-size: var(--ep-text-md); font-weight: var(--ep-weight-semi); color: var(--ep-brand-navy-4); line-height: var(--ep-leading-snug); margin: 0 0 .5em; } .ep-h6 { font-family: var(--ep-font-display); font-size: var(--ep-text-sm); font-weight: var(--ep-weight-semi); color: var(--ep-text-muted); text-transform: uppercase; letter-spacing: var(--ep-tracking-wide); margin: 0 0 .5em; } /* Script face — signatures, hero welcome moments */ .ep-script { font-family: var(--ep-font-script); font-weight: 400; color: var(--ep-brand-navy-4); } /* Body copy */ .ep-p { font-size: var(--ep-text-md); color: var(--ep-text); line-height: var(--ep-leading-normal); margin: 0 0 .75em; } .ep-p-sm { font-size: var(--ep-text-sm); color: var(--ep-text-muted); line-height: var(--ep-leading-normal); } .ep-lead { font-size: var(--ep-text-lg); color: var(--ep-text); line-height: var(--ep-leading-relaxed); font-weight: var(--ep-weight-regular); } /* Eyebrow — used on card labels */ .ep-eyebrow { font-family: var(--ep-font-display); font-size: 11px; font-weight: var(--ep-weight-semi); color: var(--ep-text-muted); text-transform: uppercase; letter-spacing: var(--ep-tracking-wide); } /* Stat / KPI value — big tabular numerals */ .ep-stat { font-family: var(--ep-font-display); font-size: var(--ep-text-3xl); font-weight: var(--ep-weight-semi); color: var(--ep-brand-navy-4); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; letter-spacing: var(--ep-tracking-tight); line-height: var(--ep-leading-tight); } /* Code / mono */ .ep-code { font-family: var(--ep-font-mono); font-size: 0.85em; background: var(--ep-surface-2); padding: 0.1em 0.4em; border-radius: var(--ep-radius-xs); color: var(--ep-brand-navy-3); border: 1px solid var(--ep-line-3); } /* Links */ .ep-link { color: var(--ep-brand-blue); text-decoration: none; transition: color var(--ep-motion-fast); } .ep-link:hover { color: var(--ep-brand-blue-hover); text-decoration: underline; } /* Numbers / metrics */ .ep-num { font-variant-numeric: tabular-nums; letter-spacing: var(--ep-tracking-tight); } /* Required asterisk convention */ .ep-required::after { content: "*"; color: var(--ep-danger-strong); font-weight: var(--ep-weight-semi); margin-left: 4px; }