Skip to content

Frontend polish: search surface hierarchy, CTA interaction consistency, timeline readability #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Frontend polish: search surface hierarchy, CTA interaction consistency, timeline readability #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4acee14
Initial plan
Copilot May 17, 2026
85780f9
feat: polish search surface CTA interactions and timeline readability
Copilot May 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,14 @@ This is the living history of Chimera's evolution. Each entry represents a day o

---

### Day 64: 2026-05-17

**Feature/Change**: Frontend Polish - Search Surface, CTA Motion Harmony & Timeline Readability
**Description**: Applied three focused visual refinements to elevate overall polish without changing behavior. The search/filter zone now sits on a distinct glass-like surface with subtle accent lighting and theme-tuned borders, improving visual hierarchy in both dark and light mode. Primary action buttons (`Export` and comparison CTA) now share tighter motion/shape behavior and stronger focus-visible feedback, creating more intentional micro-interactions while preserving accessibility. Timeline metadata was also rebalanced with improved date tracking and description/file readability for cleaner scanning across desktop and mobile.
**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
Expand Down
8 changes: 8 additions & 0 deletions public/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,14 @@ This is the living history of Chimera's evolution. Each entry represents a day o

---

### Day 64: 2026-05-17

**Feature/Change**: Frontend Polish - Search Surface, CTA Motion Harmony & Timeline Readability
**Description**: Applied three focused visual refinements to elevate overall polish without changing behavior. The search/filter zone now sits on a distinct glass-like surface with subtle accent lighting and theme-tuned borders, improving visual hierarchy in both dark and light mode. Primary action buttons (`Export` and comparison CTA) now share tighter motion/shape behavior and stronger focus-visible feedback, creating more intentional micro-interactions while preserving accessibility. Timeline metadata was also rebalanced with improved date tracking and description/file readability for cleaner scanning across desktop and mobile.
**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
Expand Down
75 changes: 75 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14445,3 +14445,78 @@ textarea:focus::placeholder {
transform: translateY(-2px);
}
}

/* ================================
Day 64: Frontend Polish — Search Surface, CTA Harmonization & Timeline Readability
================================ */

/* 1) Search/filter area gets a distinct premium surface */
.search-container {
padding: clamp(0.9rem, 2vw, 1.35rem);
border-radius: 20px;
border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
background:
linear-gradient(160deg, color-mix(in srgb, var(--color-background-secondary) 92%, transparent) 0%, transparent 100%),
radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 55%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 24px -18px color-mix(in srgb, #000 55%, transparent);
}

[data-theme="light"] .search-container {
border-color: color-mix(in srgb, var(--color-accent) 16%, rgba(255, 255, 255, 0.7));
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.7) 100%),
radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.1) 0%, transparent 58%);
}

/* 2) Primary CTA buttons share a more intentional motion/shape system */
.export-button,
.comparison-button {
border-radius: 14px;
letter-spacing: 0.015em;
transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), filter 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.export-button:hover,
.comparison-button:hover {
transform: translateY(-2px);
}

.export-button:focus-visible,
.comparison-button:focus-visible {
outline: 2px solid color-mix(in srgb, var(--color-accent-light) 75%, white);
outline-offset: 2px;
}

/* 3) Timeline metadata readability and rhythm polish */
.timeline-date {
font-size: 0.84rem;
letter-spacing: 0.12em;
}

.timeline-description {
line-height: 1.75;
}

.timeline-files {
font-size: 0.82rem;
opacity: 0.9;
}

@media (max-width: 768px) {
.search-container {
border-radius: 16px;
padding: 0.85rem;
}
}

@media (prefers-reduced-motion: reduce) {
.export-button,
.comparison-button {
transition: none;
}

.export-button:hover,
.comparison-button:hover {
transform: none;
}
}