mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
Paul BakausandClaude Opus 4.6
d63855341a
The Visual Mode section had three competing cards in the right column
(25 deterministic checks, Three ways to use it, Get the Chrome extension)
all wrapped in bordered/backgrounded containers. The live detection
overlay iframe on the left is the visual anchor for the section — the
right column should be quieter editorial blocks, not three cards
fighting for attention.
Layout changes
- Strip card chrome from .visual-mode-feature: no padding, background,
or border-radius. Just an eyebrow label + paragraph in editorial flow.
- Strip card chrome from .detection-callout: no padding, background,
border, border-radius, or hover-transform theatrics.
- Bump .visual-mode-details gap from spacing-md to spacing-xl so the
three blocks breathe with editorial space instead of feeling stacked.
- Bump body text from 0.8125rem to 0.9375rem for readability without
the card padding.
Extension callout
- Add extension-detection.png — a tight 600×508 crop of the Chrome
extension's DevTools panel showing detected anti-patterns ("AI color
palette", "Overused font", "Quality issues", "Low contrast text").
Reads at thumbnail size and clearly shows the extension UI in action.
- Whole callout is a single anchor (entire row clickable).
- 88×88 image thumbnail on the left with a subtle border that shifts
to accent on hover.
- NEW eyebrow stacked above the "Get the Chrome extension →" CTA, both
left-aligned next to the thumbnail.
The result: the iframe carries the visual weight, the right column
becomes a quiet editorial sidebar, and the extension CTA gets just
enough visual punch (the thumbnail) without competing with the demo.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
