/* ═══════════════════════════════════════════════════════════════ CameraCashier Portal — app.css Design system: Direction B (Warm & Approachable) — default Direction A (Refined Pro) available via data-theme="a" on ═══════════════════════════════════════════════════════════════ */ /* ── Design tokens — Direction B (default) ──────────────────────── */ :root { /* Brand primitives (locked — from TallyTill badge) */ --cc-blue: #1565C0; --cc-blue-lt: #90CAF9; --cc-blue-dk: #0d47a1; --cc-green: #1B3D2A; /* forest green — primary brand */ --cc-green-md: #2D6040; /* aperture ring tone */ --cc-green-dk: #111A14; /* near-black */ --cc-amber: #D97746; /* badge centre — CTAs, active states */ /* Direction B: Warm & Approachable */ --sidebar-bg: #1b3d2a; --sidebar-border: #2a5940; --sidebar-text: #6ea882; --sidebar-text-hover: #a8d4b6; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(255, 255, 255, 0.09); --sidebar-active-bar: #f4a261; --content-bg: #faf8f4; --card-bg: #ffffff; --border: #e2dbd0; --border-focus: #d97746; --text-primary: #1c2a1e; --text-secondary: #4f6855; /* Muted text, WCAG-corrected. It was #8aa290, which is 2.74:1 on --card-bg and 2.59:1 on --content-bg — a normative failure of WCAG 2.2 SC 1.4.3 (4.5:1 for text this size), and the token is the Portal's default for help text, placeholders, table sub-values and every .text-muted in the app. Same treatment --accent-strong got, and for the same reason: the hue is kept (H135, the forest-green family) and pushed dark enough to clear the bar rather than swapped for a different colour. Measured, not eyeballed — 4.99:1 on --card-bg #ffffff and 4.70:1 on --content-bg #faf8f4, which is the darker of the two surfaces it actually sits on and therefore the binding one. MutedTextContrastTests computes both from this file and fails the build if either drops below 4.5. Still a clear step lighter than --text-secondary (5.75:1 on --content-bg), so the three-tier hierarchy survives the fix. */ --text-muted: #5b7662; --text-inverse: #ffffff; --accent: #d97746; --accent-hover: #c0612e; --accent-light: #fff4ee; --accent-text: #ffffff; /* The brand accent is a decorative colour and stays as-is, but it fails WCAG 1.4.3 the moment it CARRIES text: white on #d97746 is 3.14:1 and #d97746 as body text on --surface-2 is 2.96:1, both short of the 4.5:1 minimum. This is the same hue pushed dark enough to clear it — 5.0:1 against white, 4.7:1 as text on --surface-2 — so anything text-bearing uses this and the brand colour is unchanged everywhere it is purely decorative. */ --accent-strong: #b8501f; --success: #2E7D32; --success-hover: #1b5e20; --success-light: #e8f5e9; --success-text: #1b5e20; --warning: #d97706; --warning-hover: #b45309; --warning-light: #fef3c7; --warning-text: #854d0e; --danger: #c62828; --danger-hover: #b71c1c; --danger-light: #fce8e8; --danger-text: #b71c1c; --info: #0277bd; --info-light: #e1f5fe; --info-text: #01579b; --code-bg: #f5f0e8; --code-text: #9a3412; /* Typography */ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono: 'DM Mono', 'Cascadia Code', ui-monospace, monospace; --text-2xs: 0.625rem; --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --card-pad: 1.5rem; --card-pad-sm: 1rem; /* Border radius — sharp by design */ --radius-none: 0px; --radius-sm: 2px; --radius: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-full: 9999px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.05); --shadow-focus: 0 0 0 3px rgba(217, 119, 70, 0.22); /* Layout */ --topnav-height: 58px; --input-height-sm: 30px; --input-height-md: 36px; --input-height-lg: 44px; } /* Direction A: Refined Pro — opt-in via data-theme="a" */ [data-theme="a"] { --sidebar-bg: #0d1e35; --sidebar-border: #1a3052; --sidebar-text: #6b93bb; --sidebar-text-hover: #b3cfe4; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(21, 101, 192, 0.12); --sidebar-active-bar: #1565C0; --content-bg: #f0f5fa; --border: #d4e3f0; --border-focus: #1565C0; --text-primary: #0e1e33; --text-secondary: #3d5a78; /* Same correction as Direction B above, in this theme's own hue (H210). #7a9ab8 was 2.94:1 on white and 2.68:1 on this theme's --content-bg; this is 5.55:1 and 5.06:1. Direction A is opt-in via data-theme="a" but it is reachable from the theme toggle, so it is a live surface and MutedTextContrastTests holds it to the same bar. */ --text-muted: #4f6b87; --accent: #1565C0; --accent-hover: #0d47a1; --accent-light: #e3f0fc; --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --shadow-focus: 0 0 0 3px rgba(21, 101, 192, 0.22); } /* ── Reset & base ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; font-family: var(--font-sans); font-size: 14px; color: var(--text-primary); background: var(--content-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin-bottom: .25rem; } /* Routes.razor mounts , so every navigation programmatically focuses the page's first heading. That is deliberate and stays — it is what moves a screen reader to the new page instead of leaving it at the top of the chrome. The side effect is that the browser then paints a focus ring around the heading, which sits there until the next click. Suppress the ring, never the focus. An

is not in the tab order and carries no positive tabindex anywhere in this Portal, so there is no keyboard user who can reach it and be left without an indicator; the ring conveys nothing here and reads as a stray border around the page title. Focus rings on real controls are untouched — this selector names h1 and nothing else. PublicLayout.razor and Home.razor each already carried a scoped copy of this rule. That is the evidence it belongs here: the same fix written twice, on the two pages someone happened to look at, while every other page in the Portal kept the border. Those two are now redundant; they are left in place only because Home's targets a class rather than the element, and proving that class is always an h1 is not worth coupling to this change. / h1:focus, h1:focus-visible { outline: none; } h2 { font-size: var(--text-lg); font-weight: 600; } h3 { font-size: var(--text-md); font-weight: 600; } h4 { font-size: .9375rem; font-weight: 600; } h5 { font-size: var(--text-base); font-weight: 500; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } / ── Top-nav layout ──────────────────────────────────────────────── / .cc-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .cc-content { flex: 1; overflow-y: auto; background: var(--content-bg); } .cc-page { padding: 32px 40px; } / ── Page header ─────────────────────────────────────────────────── / .page-header { margin-bottom: 1.75rem; } .page-header h1 { margin-bottom: .25rem; } .page-header .lead { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; } / ── Cards ───────────────────────────────────────────────────────── / .cc-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); overflow: hidden; } / The Portal's eyebrow label — small, bold, uppercase, letterspaced, in the secondary text colour. ONE definition, shared by everything that wants the treatment. It started life inside .cc-card-header, which is why every panel heading in the app already reads this way; naming it lets a stat-card label ask for the same thing without also inheriting a card header's padding, border and flex layout. The alternative — a second copy of the four declarations on some page's own