/* ============================================================ MedPathX — Step 1 typography utilities + nav polish (NEW FILE) Path: wwwroot/css/app-typography.css Linked from App.razor , AFTER MudBlazor.min.css so these rules win. The MudTheme handles font sizes/weights on components; this file adds the mono + eyebrow utilities and the nav-drawer polish. Palette untouched. ============================================================ */ :root { --mpx-font-ui: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mpx-font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; } /* Belt-and-suspenders: MudTheme covers MudBlazor components; this covers plain HTML, third-party widgets (e.g. Leaflet controls), and anything unstyled. */ html, body { font-family: var(--mpx-font-ui); } /* ---- Utilities you add per element as you touch each screen ---- */ /* .mono — put on case IDs, tail numbers (N560PU), UNOS IDs, coordinates, times, and scores. tabular-nums keeps digits column-aligned in tables. */ .mono { font-family: var(--mpx-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } /* .eyebrow — uppercase micro-label for field captions (Overview panel, etc.). (Or just use which the theme already styles.) */ .eyebrow { font-size: .625rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--mud-palette-text-secondary); } /* Buttons in sentence case instead of ALL CAPS. */ .mud-button-root { text-transform: none; } /* ============================================================ Nav drawer polish — keeps your existing MudBlazor blue. Targets standard MudNavMenu / MudNavGroup / MudNavLink markup (MAIN, PART 135, REPORTS, ADMINISTRATION groups). ============================================================ */ .mud-navmenu .mud-nav-link { min-height: 40px; /* taller, calmer rows */ margin: 1px 8px; padding: 0 10px; gap: 10px; border-radius: 6px; border-left: 3px solid transparent; } .mud-navmenu .mud-nav-link:hover { background: rgba(21,101,192,.06); } /* Active item: left accent + tint + weight (instead of a flat full-width fill). */ .mud-navmenu .mud-nav-link.active, .mud-navmenu .mud-nav-link.mud-nav-link-active { background: rgba(21,101,192,.10); border-left-color: var(--mud-palette-primary); color: var(--mud-palette-primary); font-weight: 600; } .mud-navmenu .mud-nav-link .mud-icon-root { font-size: 1.15rem; } /* Section headers (MudNavGroup titles: MAIN / PART 135 / REPORTS / ADMINISTRATION). */ .mud-navmenu .mud-nav-group > .mud-nav-link { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--mud-palette-text-disabled); min-height: 32px; } /* CREATE CASE button — a touch more presence. */ .mud-navmenu .mud-button-root { border-radius: 7px; font-weight: 600; letter-spacing: .04em; padding-block: 9px; }