/* ============================================================ no-glow.css — PROJECT-WIDE BAN on the browser's blue glow. Loaded FIRST in the of every page of every module. THE RULE (non-negotiable, platform-wide): No element in Netconnection may ever render a blue halo, blue focus ring, blue outline or blue drop-shadow. Not from our CSS, and not from the user agent's defaults either. Safari paints `-webkit-focus-ring-color` (a wide, blurred rgba(0,103,244,.25) glow) around ANY focused element that has no author focus style — which is how a plain in /help ended up wearing a blue halo nobody wrote. Chrome and Edge do the same with a crisper ring. This file removes all of them and replaces them with a tenant-brand ring. If you need a focus affordance, use the brand ring below or a brand-coloured `box-shadow: 0 0 0 3px var(--input-focus-ring)`. NEVER a blue one. See CLAUDE.md → "Blue glow ban". Guard: `python misc/check_no_blue_glow.py` fails the build if a blue ring/shadow is reintroduced. ============================================================ */ /* 1 — Kill every user-agent focus halo. */ :focus { outline: none; } /* 2 — Keyboard users still get a visible ring, in the tenant brand colour. :where() keeps specificity at 0 so any module rule (e.g. the red `box-shadow` input rings) still wins. */ :where(a, button, summary, input, select, textarea, [tabindex], [contenteditable]):focus-visible { outline: 2px solid var(--focus-ring, var(--brand-red, #e00102)); outline-offset: 2px; } /* 3 — Firefox's inner dotted focus border on buttons. */ ::-moz-focus-inner { border: 0; } /* 4 — Mobile Safari / Chrome Android paint a blue-grey flash on tap. */ html { -webkit-tap-highlight-color: transparent; /* Native checkbox / radio / range / progress default to system blue — brand them instead. */ accent-color: var(--brand-red, #e00102); } /* 5 — Chrome's autofill wash (blue in dark mode, yellow in light). Repaint it with the field's own tokens. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--input-bg, var(--bg-elevated, #fff)) inset; box-shadow: 0 0 0 1000px var(--input-bg, var(--bg-elevated, #fff)) inset; -webkit-text-fill-color: var(--text-primary, #1c1c1c); caret-color: var(--text-primary, #1c1c1c); /* Chrome animates the wash back in; outrun it. */ transition: background-color 9999s ease-out 0s; }