From a825b106bb5c22124bec636219d80b75f3412475 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 10 May 2026 13:27:04 +0000 Subject: [PATCH 1/2] Initial plan From 7278ba562fbab0e7ef10179961d2559d82e1dd78 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 10 May 2026 13:32:06 +0000 Subject: [PATCH 2/2] Frontend polish: harmonize CTAs, comparison surfaces, and input focus rhythm Agent-Logs-Url: https://github.com/RahilKothari9/chimera/sessions/40a2d7cb-d488-4c23-b775-c2f70df0937b Co-authored-by: RahilKothari9 <110282686+RahilKothari9@users.noreply.github.com> --- README.md | 8 +++ public/README.md | 8 +++ src/style.css | 124 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 140 insertions(+) diff --git a/README.md b/README.md index 30b0bc0..9578251 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,14 @@ This is the living history of Chimera's evolution. Each entry represents a day o --- +### Day 64: 2026-05-10 + +**Feature/Change**: Frontend Polish - CTA Harmony, Comparison Surface & Input Rhythm +**Description**: Delivered three focused visual refinements to make interactions feel more intentional without changing functionality. Primary action buttons (`Export`, `Compare`, `Share`, and `Analyze`) now share a tighter motion language with smoother lift/press feedback and consistent accent elevation, reducing the previously inconsistent hover intensity across modules. The comparison tool received a premium surface pass (theme-aware ambient gradient, refined radius, and layered card elevation) so period/difference cards read with clearer hierarchy in both dark and light themes. High-traffic controls (search/filter/select inputs) were unified with consistent corner geometry and focus-ring behavior for a cleaner rhythm across desktop and mobile breakpoints while preserving accessibility and reduced-motion handling. +**Files Modified**: src/style.css, README.md, public/README.md + +--- + ### Day 63: 2026-04-19 **Feature/Change**: Frontend Polish - Hero Surface, Heading Rhythm & Timeline Card Refinement diff --git a/public/README.md b/public/README.md index 30b0bc0..9578251 100644 --- a/public/README.md +++ b/public/README.md @@ -19,6 +19,14 @@ This is the living history of Chimera's evolution. Each entry represents a day o --- +### Day 64: 2026-05-10 + +**Feature/Change**: Frontend Polish - CTA Harmony, Comparison Surface & Input Rhythm +**Description**: Delivered three focused visual refinements to make interactions feel more intentional without changing functionality. Primary action buttons (`Export`, `Compare`, `Share`, and `Analyze`) now share a tighter motion language with smoother lift/press feedback and consistent accent elevation, reducing the previously inconsistent hover intensity across modules. The comparison tool received a premium surface pass (theme-aware ambient gradient, refined radius, and layered card elevation) so period/difference cards read with clearer hierarchy in both dark and light themes. High-traffic controls (search/filter/select inputs) were unified with consistent corner geometry and focus-ring behavior for a cleaner rhythm across desktop and mobile breakpoints while preserving accessibility and reduced-motion handling. +**Files Modified**: src/style.css, README.md, public/README.md + +--- + ### Day 63: 2026-04-19 **Feature/Change**: Frontend Polish - Hero Surface, Heading Rhythm & Timeline Card Refinement diff --git a/src/style.css b/src/style.css index 62a1be0..074027b 100644 --- a/src/style.css +++ b/src/style.css @@ -14445,3 +14445,127 @@ textarea:focus::placeholder { transform: translateY(-2px); } } + +/* ================================ + Day 64: Frontend Polish — CTA Harmony, Comparison Surface & Input Rhythm + ================================ */ + +/* 1) Cohesive call-to-action button motion across primary actions */ +.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); +} + +.export-button:hover, +.comparison-button:hover, +.share-button:hover, +.analyze-button:hover { + transform: translateY(-3px) scale(1.01); + box-shadow: var(--shadow-accent-hover); + filter: brightness(1.06); +} + +.export-button:active, +.comparison-button:active, +.share-button:active, +.analyze-button:active { + transform: translateY(-1px) scale(0.99); +} + +.clear-button { + transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out), background-color 220ms var(--ease-out); +} + +.clear-button:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-sm); +} + +/* 2) Premium surface treatment for comparison area cards */ +.comparison-container { + border-radius: 20px; + border-color: color-mix(in srgb, var(--color-accent) 24%, var(--color-border)); + background: + radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--color-accent) 12%, transparent) 0%, transparent 45%), + var(--color-background); + box-shadow: var(--shadow-sm); +} + +.period-card, +.entry-card, +.differences-card, +.entry-differences-card { + border-radius: 14px; + border-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-border)); + box-shadow: 0 1px 2px color-mix(in srgb, #000 10%, transparent), 0 10px 22px -16px color-mix(in srgb, #000 35%, transparent); + transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out); +} + +.period-card:hover, +.entry-card:hover, +.differences-card:hover, +.entry-differences-card:hover { + transform: translateY(-2px); + border-color: color-mix(in srgb, var(--color-accent) 36%, var(--color-border)); + box-shadow: 0 2px 6px color-mix(in srgb, #000 12%, transparent), 0 16px 32px -18px color-mix(in srgb, var(--color-accent) 45%, transparent); +} + +/* 3) Input rhythm and focus consistency for high-traffic controls */ +.search-input, +.category-select, +.export-format-select, +.comparison-mode-select, +.period-select, +.entry-select { + border-radius: 14px; + border-color: color-mix(in srgb, var(--color-accent) 22%, var(--color-border)); + background: color-mix(in srgb, var(--color-background-secondary) 86%, transparent); +} + +.search-input:focus, +.category-select:focus, +.export-format-select:focus, +.comparison-mode-select:focus, +.period-select:focus, +.entry-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); +} + +[data-theme="light"] .comparison-container { + background: + radial-gradient(circle at 90% 0%, rgba(124, 58, 237, 0.09) 0%, transparent 45%), + rgba(255, 255, 255, 0.78); +} + +[data-theme="light"] .search-input, +[data-theme="light"] .category-select, +[data-theme="light"] .export-format-select, +[data-theme="light"] .comparison-mode-select, +[data-theme="light"] .period-select, +[data-theme="light"] .entry-select { + background: rgba(255, 255, 255, 0.9); +} + +@media (max-width: 768px) { + .comparison-container { + border-radius: 16px; + } +} + +@media (prefers-reduced-motion: reduce) { + .export-button:hover, + .comparison-button:hover, + .share-button:hover, + .analyze-button:hover, + .clear-button:hover, + .period-card:hover, + .entry-card:hover, + .differences-card:hover, + .entry-differences-card:hover { + transform: none; + } +}