/* ============================================================ Fidelity ETRM — Premium Dark Design System Inspired by Linear, Vercel, Raycast ============================================================ */ /* Fonts loaded via App.razor — Plus Jakarta Sans + JetBrains Mono */ /* --- Custom Properties --- */ :root { /* Background layers */ --bg-base: #0C0C0E; --bg-surface: #141416; --bg-raised: #1A1A1E; --bg-overlay: #202024; --bg-hover: #252529; /* Borders */ --border-default: rgba(255, 255, 255, 0.06); --border-hover: rgba(255, 255, 255, 0.1); --border-active: rgba(255, 255, 255, 0.15); /* Text */ --text-primary: #ECECEE; --text-secondary: #8A8A8E; --text-tertiary: #5C5C63; /* Accent */ --accent: #6366F1; --accent-light: #818CF8; --accent-soft: rgba(99, 102, 241, 0.12); --accent-glow: rgba(99, 102, 241, 0.25); /* Semantic */ --success: #22C55E; --success-soft: rgba(34, 197, 94, 0.12); --error: #EF4444; --error-soft: rgba(239, 68, 68, 0.12); --warning: #EAB308; --warning-soft: rgba(234, 179, 8, 0.12); --info: #3B82F6; --info-soft: rgba(59, 130, 246, 0.12); /* Radii */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; /* Motion — spring-like easing */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 0.15s; --duration-normal: 0.25s; --duration-slow: 0.4s; --duration-enter: 0.5s; /* Legacy aliases (referenced in Razor files) */ --etrm-bg: var(--bg-base); --etrm-surface: var(--bg-surface); --etrm-surface-raised: var(--bg-raised); --etrm-border: var(--border-default); --etrm-text: var(--text-primary); --etrm-text-muted: var(--text-secondary); --etrm-primary: var(--accent); --etrm-primary-soft: var(--accent-soft); --etrm-success: var(--success); --etrm-success-soft: var(--success-soft); --etrm-error: var(--error); --etrm-error-soft: var(--error-soft); --etrm-warning: var(--warning); --etrm-warning-soft: var(--warning-soft); --etrm-radius: var(--radius-md); --etrm-radius-sm: var(--radius-sm); --etrm-radius-lg: var(--radius-lg); /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 24px -4px var(--accent-glow); } /* --- Base --- */ html, body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; background-color: var(--bg-base); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; line-height: 1.6; } /* Override MudBlazor font everywhere */ .mud-typography, .mud-input, .mud-button-root, .mud-chip, .mud-tab, .mud-table, .mud-select, .mud-menu, .mud-dialog, .mud-alert, .mud-navmenu, .mud-nav-link, .mud-appbar { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important; } /* --- Scrollbar --- */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.14); } /* --- Mono for financial data --- */ .mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-variant-numeric: tabular-nums; font-size: 0.8125rem; letter-spacing: 0; } /* --- Semantic value colours --- */ .value-positive { color: var(--success) !important; } .value-negative { color: var(--error) !important; } .value-neutral { color: var(--text-secondary) !important; } .risk-green { color: var(--success); } .risk-amber { color: var(--warning); } .risk-red { color: var(--error); } /* ============================================================ CARDS — the core building block ============================================================ */ .card-elevated { background: var(--bg-surface) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-md) !important; transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } .card-elevated:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow-sm); } .card-interactive { background: var(--bg-surface) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-md) !important; transition: all var(--duration-normal) var(--ease-out); cursor: pointer; } .card-interactive:hover { border-color: var(--accent) !important; box-shadow: var(--shadow-glow); transform: translateY(-2px); } /* --- KPI Cards --- */ .kpi-card { background: var(--bg-surface) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-md) !important; transition: all var(--duration-normal) var(--ease-out); position: relative; overflow: hidden; } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0; transition: opacity var(--duration-normal) var(--ease-out); z-index: 1; } .kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-hover) !important; } .kpi-card:hover::before { opacity: 1; } /* Accent gradient bars — always visible */ .kpi-card.accent-blue::before { background: linear-gradient(90deg, #6366F1 0%, #818CF8 40%, transparent 100%); opacity: 1; } .kpi-card.accent-green::before { background: linear-gradient(90deg, #22C55E 0%, #4ADE80 40%, transparent 100%); opacity: 1; } .kpi-card.accent-orange::before { background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 40%, transparent 100%); opacity: 1; } .kpi-card.accent-red::before { background: linear-gradient(90deg, #EF4444 0%, #F87171 40%, transparent 100%); opacity: 1; } .kpi-card.accent-purple::before { background: linear-gradient(90deg, #A855F7 0%, #C084FC 40%, transparent 100%); opacity: 1; } /* Subtle inner glow matching accent */ .kpi-card.accent-blue { background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, var(--bg-surface) 50%) !important; } .kpi-card.accent-green { background: linear-gradient(180deg, rgba(34, 197, 94, 0.04) 0%, var(--bg-surface) 50%) !important; } .kpi-card.accent-orange { background: linear-gradient(180deg, rgba(245, 158, 11, 0.04) 0%, var(--bg-surface) 50%) !important; } .kpi-card.accent-red { background: linear-gradient(180deg, rgba(239, 68, 68, 0.04) 0%, var(--bg-surface) 50%) !important; } .kpi-card.accent-purple { background: linear-gradient(180deg, rgba(168, 85, 247, 0.04) 0%, var(--bg-surface) 50%) !important; } /* ============================================================ ANIMATIONS — smooth, spring-like motion ============================================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Staggered entrance classes */ .animate-in { animation: fadeInUp var(--duration-enter) var(--ease-out) both; } .animate-in-delay-1 { animation-delay: 0.06s; } .animate-in-delay-2 { animation-delay: 0.12s; } .animate-in-delay-3 { animation-delay: 0.18s; } .animate-in-delay-4 { animation-delay: 0.24s; } .animate-in-delay-5 { animation-delay: 0.30s; } .animate-fade { animation: fadeIn var(--duration-slow) var(--ease-out) both; } .animate-slide-left { animation: slideInLeft var(--duration-slow) var(--ease-out) both; } .page-enter { animation: fadeInUp var(--duration-enter) var(--ease-out) both; } /* ============================================================ SKELETON LOADERS ============================================================ */ .skeleton { background: linear-gradient( 90deg, var(--bg-surface) 25%, var(--bg-raised) 50%, var(--bg-surface) 75% ); background-size: 400% 100%; animation: shimmer 2s ease-in-out infinite; border-radius: var(--radius-sm); } .skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 4px; } .skeleton-text:last-child { width: 60%; } .skeleton-card { height: 100px; border-radius: var(--radius-md); } /* ============================================================ TABLES — clean, spacious ============================================================ */ .mud-table-container { border-radius: var(--radius-md); border: 1px solid var(--border-default); overflow: hidden; } .mud-table .mud-table-head .mud-table-cell { font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); padding: 14px 16px; border-bottom: 1px solid var(--border-default) !important; background: var(--bg-raised) !important; } .mud-table .mud-table-body .mud-table-row { transition: background-color var(--duration-fast) var(--ease-out); } .mud-table .mud-table-body .mud-table-row:hover { background: var(--bg-hover) !important; } .mud-table .mud-table-body .mud-table-cell { padding: 12px 16px; border-bottom: 1px solid var(--border-default) !important; } /* DataGrid overrides */ .mud-data-grid .mud-table-head .mud-table-cell { background: var(--bg-raised) !important; } /* ============================================================ STATUS INDICATORS ============================================================ */ .status-dot { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 500; } .status-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .status-dot.green::before { background: var(--success); box-shadow: 0 0 8px var(--success-soft); } .status-dot.amber::before { background: var(--warning); box-shadow: 0 0 8px var(--warning-soft); } .status-dot.red::before { background: var(--error); box-shadow: 0 0 8px var(--error-soft); } .status-dot.blue::before { background: var(--accent); box-shadow: 0 0 8px var(--accent-soft); } /* Static variant (no animation) */ .status-dot.static::before { animation: none; } /* ============================================================ NAVIGATION ============================================================ */ .mud-nav-link { border-radius: var(--radius-sm) !important; margin: 2px 8px !important; padding: 8px 12px !important; transition: all var(--duration-normal) var(--ease-out) !important; position: relative; font-weight: 500 !important; font-size: 0.8125rem !important; color: var(--text-secondary) !important; } .mud-nav-link:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } .mud-nav-link.active { background: var(--accent-soft) !important; color: var(--accent-light) !important; } .mud-nav-link.active .mud-nav-link-icon { color: var(--accent-light) !important; } .mud-nav-link .mud-nav-link-icon { transition: color var(--duration-normal) var(--ease-out) !important; } /* Drawer styling */ .mud-drawer { background: var(--bg-base) !important; } /* ============================================================ BUTTONS ============================================================ */ .mud-button-root { transition: all var(--duration-normal) var(--ease-out) !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; border-radius: var(--radius-sm) !important; } .mud-button-root:active { transform: scale(0.97); } /* Filled primary gets glow on hover */ .mud-button-filled.mud-button-primary:hover { box-shadow: var(--shadow-glow) !important; } /* Outlined buttons */ .mud-button-outlined { border-color: var(--border-default) !important; } .mud-button-outlined:hover { border-color: var(--border-hover) !important; background: var(--bg-hover) !important; } /* ============================================================ CHIPS / BADGES ============================================================ */ .chip-soft-blue { background: var(--accent-soft) !important; color: var(--accent-light) !important; font-weight: 500 !important; border: none !important; } .chip-soft-green { background: var(--success-soft) !important; color: #4ADE80 !important; font-weight: 500 !important; border: none !important; } .chip-soft-red { background: var(--error-soft) !important; color: #F87171 !important; font-weight: 500 !important; border: none !important; } .chip-soft-orange { background: var(--warning-soft) !important; color: #FDE047 !important; font-weight: 500 !important; border: none !important; } .mud-chip { font-weight: 500 !important; border-radius: 6px !important; } /* ============================================================ APPBAR ============================================================ */ .mud-appbar { background: var(--bg-base) !important; border-bottom: 1px solid var(--border-default) !important; } /* Ensure popovers/menus render above everything */ .mud-popover-provider { z-index: 10000 !important; } /* Custom appbar dropdowns */ .appbar-dropdown { position: fixed; top: 56px; z-index: 9999; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); overflow: hidden; animation: scaleIn var(--duration-normal) var(--ease-out) both; } .dropdown-item { display: block; padding: 10px 18px; font-size: 0.8125rem; color: var(--text-secondary); text-decoration: none; transition: all var(--duration-fast) var(--ease-out); } .dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); } /* ============================================================ DIALOGS ============================================================ */ .mud-dialog { background: var(--bg-surface) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-xl) !important; animation: scaleIn var(--duration-slow) var(--ease-out) both; } .mud-overlay-dialog { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ============================================================ TABS ============================================================ */ .mud-tabs { border-radius: var(--radius-md) !important; } .mud-tab { font-weight: 600 !important; font-size: 0.8125rem !important; letter-spacing: -0.01em !important; text-transform: none !important; transition: all var(--duration-normal) var(--ease-out) !important; } /* ============================================================ INPUTS ============================================================ */ .mud-input-outlined .mud-input-outlined-border { border-color: var(--border-default) !important; border-radius: var(--radius-sm) !important; transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out) !important; } .mud-input.mud-input-underline::after { border-color: var(--accent) !important; } .mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; } /* ============================================================ ALERTS ============================================================ */ .mud-alert { border-radius: var(--radius-sm) !important; } /* ============================================================ EMPTY STATE ============================================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px; text-align: center; animation: fadeIn var(--duration-slow) var(--ease-out) both; } .empty-state-icon { font-size: 3rem; color: var(--text-tertiary); margin-bottom: 16px; opacity: 0.5; } .empty-state-title { font-weight: 600; font-size: 0.9375rem; color: var(--text-primary); margin-bottom: 4px; } .empty-state-subtitle { font-size: 0.8125rem; color: var(--text-secondary); max-width: 300px; line-height: 1.5; } /* ============================================================ LOGIN ============================================================ */ .login-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-base); background-image: radial-gradient(ellipse at 20% 40%, rgba(99, 102, 241, 0.08), transparent 50%), radial-gradient(ellipse at 80% 60%, rgba(168, 85, 247, 0.06), transparent 50%), radial-gradient(ellipse at 50% 90%, rgba(34, 197, 94, 0.04), transparent 40%); } .login-card { width: 100%; max-width: 400px; padding: 44px 36px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); animation: fadeInUp 0.6s var(--ease-out) both; } .login-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; letter-spacing: -0.01em; } .login-input { width: 100%; padding: 11px 14px; background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.875rem; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; outline: none; transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out); } .login-input::placeholder { color: var(--text-tertiary); } .login-input:hover { border-color: var(--border-hover); background: var(--bg-raised); } .login-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); background: var(--bg-base); } .login-button { width: 100%; padding: 12px 20px; border: none; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent), #7C3AED); color: white; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.875rem; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; transition: all var(--duration-normal) var(--ease-out); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); text-align: center; } .login-button:hover { box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4); transform: translateY(-1px); } .login-button:active { transform: translateY(0) scale(0.98); } .login-link { font-size: 0.8125rem; color: var(--text-tertiary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .login-link:hover { color: var(--text-secondary); } /* ============================================================ GLASSMORPHISM ============================================================ */ .glass { background: rgba(20, 20, 22, 0.6) !important; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.06) !important; } /* ============================================================ SNACKBAR / TOAST ============================================================ */ .mud-snackbar { border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-lg) !important; font-weight: 500 !important; } /* ============================================================ PROGRESS / CIRCULAR ============================================================ */ .mud-progress-circular svg circle:last-child { transition: stroke-dashoffset var(--duration-slow) var(--ease-out); } /* ============================================================ TOOLTIP ============================================================ */ .mud-tooltip { border-radius: var(--radius-sm) !important; font-size: 0.75rem !important; font-weight: 500 !important; } /* ============================================================ SELECTION COLOURS ============================================================ */ ::selection { background: var(--accent-soft); color: var(--text-primary); } /* ============================================================ PRINT ============================================================ */ @media print { .mud-drawer, .mud-appbar, .no-print { display: none !important; } .mud-main-content { margin: 0 !important; padding: 0 !important; } body { background-color: white !important; color: black !important; } }