Site Audit — June 14, 2026

Figures above are a snapshot of the original June 14, 2026 pass. A later July QA cycle (see RELEASE-NOTES.md) closed the remaining gaps this page originally flagged as follow-up work: the last hardcoded-color literals were tokenized (adding --warning and --on-accent to theme.css), and admin-tools.html/audit.html's inline <style> blocks were extracted to their own CSS files. *"Outside palette" excludes the Birthdays & Anniversaries print-popup window in reports.js, which writes its own standalone HTML document with no access to theme.css and is intentionally inline.

The problem before

The site worked, but it had accumulated drift typical of patch-built projects. The issues weren't visible to family members loading the page, but every future change cost more time because the same inconsistencies kept resurfacing.

Multiple sources of truth for the palette

theme.css was the canonical source for colors, but dashboard.css and login.css each redeclared every color token in their own :root blocks — and won the cascade because they loaded later. Any change to theme.css would silently fail to propagate to those pages.

Dark-mode regressions

Several hardcoded colors looked fine in light mode and broke in dark mode:

• #0077cc on toast info buttons
• #c44 on the bootstrap error fallback
• #1a56db on print-preview buttons
• And the address link on the Look-Up contact card had no color rule at all — it fell back to the browser-default blue (~#0000EE) and was effectively invisible on a black background.

Defensive fallbacks that lied

Patterns like var(--text-muted, #666) were scattered across six files. The fallback values were always light-mode colors, so if the var lookup ever failed in dark mode you'd get a light-mode color rendered against a dark background.

Token naming inconsistency

--bg-card vs --card-bg, --accent vs --primary, --bg-card vs --surface — all aliases of the same thing, picked inconsistently per file.

Layout drift

.page-body padding varied across pages (24px, 24px 32px 80px 32px, 32px 24px, 24px 24px 48px) — content shifted as you navigated between tabs.

Duplicated JS

Helper functions were defined multiple times with subtle differences:

• fullName() — 4 implementations across edit / lookup / reports / view
• formatDOB() — 3 implementations with different output formats
• toast() — 2 implementations with different durations
• MONTHS array — declared 3 times
• BRANCH_ORDER array — declared 2 times

Inline-style sprawl

16 inline style="" attributes across HTML files plus 29 more inside JS template literals. Every one a future dark-mode landmine, since inline styles bypass the design tokens.

What's true now

Single source of truth, everywhere

• One palette: theme.css declares every color token. Every other CSS file inherits. Dark-mode flip happens in exactly one place.
• One body font + box-sizing: declared once in theme.css. Pages override only when intentional (view.css for Times New Roman).
• One CSS load order across all 13 authenticated pages: theme.css → site-nav.css → user-badge.css → (family-filter.css) → page.css.
• One canonical token name (no more --card-bg / --bg-card ambiguity; no more --primary / --accent ambiguity).
• One implementation of each JS helper. RFAPI on api.js owns fullName, formatDOB, parseLocalDate, telDigits, telLink, emailLink, toast, MONTHS, BRANCH_ORDER, BRANCHES. Pages alias them locally for readability.

Dark mode is correct everywhere

• All colors are token-based via theme.css, with one deliberate exception: the Birthdays & Anniversaries print-popup window (reports.js) writes its own standalone HTML document that never loads theme.css, so its styling is intentionally inline. Everywhere else — including dynamic chart values, which read their colors from CSS custom properties at render time rather than hardcoding hex — is token-based.
• Every link, button, toast, and error message uses semantic tokens (--danger, --success, --info, --link, --accent).
• The Look-Up contact card now renders all three link types (address, phone, email) in the lighter, legible blue that the dark-mode theme defines for link text.

Inline styles are gone from HTML

• All 15 HTML files: 0 inline style="" attributes. (A later July pass also extracted admin-tools.html's and audit.html's inline <style> blocks into their own external CSS files, matching every other page.)
• 30+ semantic utility classes added across edit.css, dashboard.css, signups.css, email.css — each documented with a comment explaining its purpose.
• The big win: renderPendingEdits() in edit.js went from ~60 lines of inline-style soup to clean class-based markup.

Layout consistency

• .page-body padding standardized to 24px 32px 48px 32px across every page (a few pages, like this one, document an intentional taller bottom margin for their content).
• CSS load order identical across all 13 authenticated pages.
• Heading sizes and font scales rationalized.

Accessibility

• Disabled tool card on admin-tools no longer in the tab order (<a> → <div tabindex="-1">).
• style="display:none" toggles replaced with the semantically-correct hidden attribute in two places.

What didn't change

• No behavior changes anywhere. All 13 commits were structural — visual presentation, code organization, dark-mode correctness. No business logic, no API contracts, no data model.
• The 10 remaining inline styles in JS are intentional: dynamic chart bar widths/colors/opacities (must be computed inline), print-popup document styles (no access to parent CSS), and the bootstrap.js error fallback (runs before CSS may be loaded — failsafe).

The practical payoff

The site looks the same to a family member loading it — but the codebase is now consistent enough that future iteration won't keep re-discovering the same pile of inconsistencies.

Commit log

• d0e65eb — dashboard.css palette dedup + body font moved to theme.css
• d3844f2 — standardize page-body padding, drop defensive fallbacks, fix dark-mode bugs
• 9c93830 — remove stray .bak file
• c1eb9a4 — kill remaining hardcoded colors + normalize CSS load order
• 1e5231a — dashboard.js + reports.js color literals aligned with palette
• 849248e — deduplicate JS helpers (single source of truth in RFAPI)
• e5cad0b — replace inline style attrs with semantic CSS classes
• 05e464a — lookup: fix address link being invisible in dark mode