Skip to content

style: refine services hero process card accent chips#60

Merged
romahawk merged 1 commit intomainfrom
dev
Apr 29, 2026
Merged

style: refine services hero process card accent chips#60
romahawk merged 1 commit intomainfrom
dev

Conversation

@romahawk
Copy link
Copy Markdown
Owner

Summary

  • Replaced flat signal cards with amber/cyan/emerald semantic accent variants (bg, border, top accent line) to create Start → Build → Result color progression
  • Replaced vertical connector line with labelled Scope (cyan) and Ship (emerald) transition chips between cards
  • Removed scale(1.01) dominance from the featured (Build) card — subtle box-shadow emphasis only
  • Reduced all accent background/border opacities (~0.06→0.04, ~0.2→0.15) and toned down chip font/padding/gradient lines to keep chips as secondary UI
  • Added opacity: 0.6 on step numbers to reinforce hierarchy (number < label < value)
  • Added subtle linear-gradient inner overlay to outer panel for visual grouping
  • Bumped panel gap to 12px for cleaner breathing room
  • All hover states use neutral lift only (translateY(-2px) + plain shadow) — no colored glow

Test plan

  • Visit /services, confirm Start/Build/Result cards show amber/cyan/emerald accent lines and backgrounds
  • Confirm "Scope" and "Ship" chips appear between cards with gradient side lines
  • Confirm Build card does not scale or pop out of plane
  • Hover each card — verify neutral lift only, no colored shadow
  • Check prefers-reduced-motion — all transforms disabled
  • Verify no horizontal overflow at mobile widths
  • Lint and build both exit 0 ✓

🤖 Generated with Claude Code

- Add amber/cyan/emerald accents to Start/Build/Result step cards
- Replace vertical connector line with Scope/Ship transition chips
- Remove scale from featured card; normalize hover to neutral lift only
- Reduce all accent opacities for a quieter, cohesive flow panel
- Add opacity:0.6 on step numbers to reinforce typography hierarchy
- Tone down chip sizing, tracking, and gradient lines to secondary UI
- Add subtle inner gradient to panel for visual grouping cue

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 29, 2026

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

Project Deployment Actions Updated (UTC)
portfolio-fullstack Ready Ready Preview, Comment Apr 29, 2026 7:20pm
portfolio-react Ready Ready Preview, Comment Apr 29, 2026 7:20pm

@romahawk romahawk merged commit abcfef8 into main Apr 29, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant