Frontend polish: unify CTA interaction language, refine comparison surface, and normalize input focus rhythm

[Copilot]

This PR addresses the 2026-05-10 frontend polish issue by applying a small set of high-impact visual refinements (no feature changes) and ensuring the updates read consistently across dark/light themes and responsive breakpoints. It focuses on interaction quality, visual hierarchy, and design-system cohesion.

• Scope

  • CSS-only polish in src/style.css targeting existing components.
  • Changelog updates in both README.md and public/README.md using the required Day/Date format.

• CTA interaction consistency

  • Harmonized hover/active motion and elevation for primary actions (.export-button, .comparison-button, .share-button, .analyze-button).
  • Normalized active-state compression and shadow transitions so key actions feel consistent across modules.
  • Refined .clear-button hover behavior to match the same motion language without making it visually primary.

• Comparison module visual hierarchy

  • Upgraded .comparison-container to a theme-aware premium surface (accent radial tint + stronger border/radius).
  • Refined .period-card, .entry-card, and diff cards with layered shadows, tighter border treatment, and subtle lift on hover.
  • Added light-theme-specific surface adjustments to avoid flat/inverted appearance.

• Input rhythm and focus coherence

  • Unified geometry and focus treatment across frequently used controls (.search-input, .category-select, .export-format-select, .comparison-mode-select, .period-select, .entry-select).
  • Standardized focus ring intensity and border behavior for clearer interaction feedback while preserving accessibility patterns.
  • Included mobile and reduced-motion guards for parity across viewport sizes and user preferences.

.export-button,
.comparison-button,
.share-button,
.analyze-button {
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), filter 220ms var(--ease-out);
  box-shadow: var(--shadow-accent);
}

.search-input:focus,
.category-select:focus,
.export-format-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent), var(--shadow-sm);
}

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1187/chrome-linux/headless_shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1187/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AvoidUnnecessaryBeforeUnloadCheckSync,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate --allow-pre-commit-input --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
chimera	Ready	Preview, Comment	May 10, 2026 1:32pm