/* Fluent UI Blazor v5 - FinCom custom styles Color rules: Fluent design tokens (--colorNeutral*) for anything that must flip with the light/dark theme (with light-scheme fallbacks); FinCom brand palette only for deliberate brand accents. */ /* Global styles */ html, body { font-family: var(--font-family-base); background-color: var(--colorNeutralBackground2, #F8F9FA); color: var(--colorNeutralForeground1, #1A1A1A); margin: 0; padding: 0; height: 100%; } /* Custom theme colors for FinCom branding */ :root { --fincom-navy-900: #0A1628; --fincom-navy-800: #13294B; --fincom-navy-700: #1B3A5C; --fincom-gold-500: #C8963E; --fincom-gold-400: #D4A84D; --fincom-gold-300: #E0BE6A; /* Theme-adaptive brand accents (dark values below) */ --fincom-link: var(--fincom-navy-800); --fincom-eyebrow: #8B7A68; } /* The Fluent theme runtime stamps data-theme="dark" on when the effective theme is dark, and removes the attribute for light — so absence means light. (A prefers-color-scheme media query would fight the in-app toggle when the user picks light on a dark-mode OS.) */ body[data-theme="dark"] { --fincom-link: var(--fincom-gold-400); --fincom-eyebrow: #B5A48B; } /* Blazor error UI */ #blazor-error-ui { color-scheme: light only; background: #fef9c3; border-top: 2px solid #eab308; bottom: 0; box-sizing: border-box; display: none; left: 0; padding: 0.75rem 1.5rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* Loading spinner */ .loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto 0 auto; } .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--fincom-gold-500); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } /* Custom FinCom logo styling */ .logo-link { text-decoration: none; display: flex; flex-direction: column; } .logo-text { font-size: 1.5rem; font-weight: bold; } .logo-sub { font-size: 0.75rem; color: var(--fincom-gold-500); text-transform: uppercase; letter-spacing: 0.2em; } /* Content area */ .content-area { max-width: 1200px; margin: 0 auto; width: 100%; } /* Custom nav menu width */ .navmenu { width: 250px; } /* FocusOnNavigate focuses the page h1 for screen readers; hide the visual outline */ h1:focus { outline: none; } /* Page headings */ .page-title { font-size: 1.875rem; font-weight: bold; color: var(--colorNeutralForeground1, #1A1A1A); margin: 0 0 0.5rem; } .page-subtitle { color: var(--colorNeutralForeground3, #666); margin: 0 0 1.5rem; line-height: 1.5; } /* Small uppercase section label */ .eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--fincom-eyebrow); font-weight: bold; } .eyebrow-gold { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--fincom-gold-300); font-weight: bold; } /* Navy brand banner (page heroes, client group headers) — dark in both themes */ .brand-hero { background: linear-gradient(to right, var(--fincom-navy-900), var(--fincom-navy-800)); color: white; padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem; } /* Stat tiles */ .stat-value { font-size: 1.5rem; font-weight: bold; color: var(--colorNeutralForeground1, #1A1A1A); margin-top: 0.25rem; white-space: nowrap; } .stat-unit { font-size: 0.8rem; color: var(--colorNeutralForeground3, #666); } /* Responsive card grids */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } /* Gain/loss coloring; falls back to fixed colors outside a Fluent theme */ .gain { color: var(--colorStatusSuccessForeground1, #16a34a); } .loss { color: var(--colorStatusDangerForeground1, #dc2626); } .muted { color: var(--colorNeutralForeground3, #666); font-size: 0.875rem; } /* Gold accent edge for highlight cards */ .accent-gold { border-left: 4px solid var(--fincom-gold-500); } /* Card section header (title strip above a table inside a FluentCard) */ .card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb); } .card-title { font-size: 1.125rem; font-weight: 600; } /* Account links (card titles that navigate) */ .entity-link { color: var(--fincom-link); text-decoration: none; } .entity-link:hover { text-decoration: underline; } /* Quiet bordered link rows (Home developer links) */ .link-row { display: flex; justify-content: space-between; padding: 1rem; border: 1px solid var(--colorNeutralStroke2, #e5e7eb); border-radius: 12px; text-decoration: none; color: inherit; } /* Subtle inset panel (form summary strips) */ .inset-panel { background: var(--colorNeutralBackground3, #f9fafb); border: 1px solid var(--colorNeutralStroke2, #e5e7eb); border-radius: 6px; padding: 0.75rem 1rem; font-size: 0.875rem; } /* Emphasized synthetic rows (cash / totals) in data grids */ .totals-row { font-weight: 600; background: var(--colorNeutralBackground3, #f9fafb); } /* Responsive adjustments */ @media (max-width: 768px) { .navmenu { width: 100%; } .logo-text { font-size: 1.25rem; } .logo-sub { font-size: 0.625rem; } }