From 89f4ec41d739bde12eab809911207f9d0ae58fda Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Tue, 7 Apr 2026 01:37:54 -0700 Subject: [PATCH] Refocus Visual Mode section on the Chrome extension MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The CLI command `npx impeccable detect src/` was promoted in the "New!" callout but it scans static source files — that's a separate feature, not visual mode. Replaces it with a "Get the Chrome extension" CTA which is the actual way users get visual mode in their browser. Also updates the lead text to drop the /critique-specific framing and reframes the second feature blurb to mention all three usage modes (Chrome extension, /critique embed, npx impeccable live). The .detection-cmd class is restyled from a code-block-with-arrow to a proper link/button with hover state, since it's now a CTA rather than a shell prompt. Co-Authored-By: Claude Opus 4.6 (1M context) --- public/css/main.css | 42 +++++++++++++++++++++++++++++------------- public/css/styles.css | 37 +++++++++++++++++++++++++------------ public/index.html | 13 +++++++------ 3 files changed, 61 insertions(+), 31 deletions(-) diff --git a/public/css/main.css b/public/css/main.css index f49d047eb..9b173f253 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -2619,19 +2619,40 @@ code { } -/* Detection callout — horizontal below cards */ +/* Detection callout — image hero with NEW badge + CTA below. + The whole callout is a single anchor so the entire card is clickable. */ .detection-callout { + display: block; margin-bottom: var(--spacing-xl); border: 1px solid var(--color-mist); - border-radius: 8px; - padding: var(--spacing-sm) var(--spacing-md); + border-radius: 12px; + overflow: hidden; + background: var(--color-paper); + text-decoration: none; + color: inherit; + transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; +} + +.detection-callout:hover { + border-color: var(--color-accent); + transform: translateY(-2px); + box-shadow: 0 12px 32px -8px var(--color-accent-dim); +} + +.detection-callout-image { + display: block; + width: 100%; + height: auto; + background: var(--color-cream); + border-bottom: 1px solid var(--color-mist); } .detection-callout-inner { display: flex; align-items: center; + justify-content: space-between; gap: var(--spacing-md); - flex-wrap: wrap; + padding: var(--spacing-sm) var(--spacing-md); } .detection-badge { @@ -2664,20 +2685,15 @@ code { .detection-cmd { flex-shrink: 0; font-family: var(--font-body); - font-size: 0.8125rem; + font-size: 0.875rem; font-weight: 600; color: var(--color-ink); - background: oklch(96% 0.005 350); - padding: 6px 14px; - border-radius: 6px; white-space: nowrap; - text-decoration: none; - transition: background 0.15s ease, color 0.15s ease; + transition: color 0.15s ease; } -a.detection-cmd:hover { - background: var(--color-accent); - color: white; +.detection-callout:hover .detection-cmd { + color: var(--color-accent); } /* Antidote footer */ diff --git a/public/css/styles.css b/public/css/styles.css index 1dabd13ab..fcb3d0bb2 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -4710,16 +4710,34 @@ code { font-weight: 600; } .detection-callout { + display: block; margin-bottom: var(--spacing-xl); border: 1px solid var(--color-mist); - border-radius: 8px; - padding: var(--spacing-sm) var(--spacing-md); + border-radius: 12px; + overflow: hidden; + background: var(--color-paper); + text-decoration: none; + color: inherit; + transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; +} +.detection-callout:hover { + border-color: var(--color-accent); + transform: translateY(-2px); + box-shadow: 0 12px 32px -8px var(--color-accent-dim); +} +.detection-callout-image { + display: block; + width: 100%; + height: auto; + background: var(--color-cream); + border-bottom: 1px solid var(--color-mist); } .detection-callout-inner { display: flex; align-items: center; + justify-content: space-between; gap: var(--spacing-md); - flex-wrap: wrap; + padding: var(--spacing-sm) var(--spacing-md); } .detection-badge { font-family: var(--font-mono); @@ -4748,19 +4766,14 @@ code { .detection-cmd { flex-shrink: 0; font-family: var(--font-body); - font-size: 0.8125rem; + font-size: 0.875rem; font-weight: 600; color: var(--color-ink); - background: oklch(96% 0.005 350); - padding: 6px 14px; - border-radius: 6px; white-space: nowrap; - text-decoration: none; - transition: background 0.15s ease, color 0.15s ease; + transition: color 0.15s ease; } -a.detection-cmd:hover { - background: var(--color-accent); - color: white; +.detection-callout:hover .detection-cmd { + color: var(--color-accent); } .antidote-footer { text-align: center; diff --git a/public/index.html b/public/index.html index 066c5ba0e..5419cb611 100644 --- a/public/index.html +++ b/public/index.html @@ -268,7 +268,7 @@

Visual Mode

-

See design issues highlighted directly in your browser. When you run /critique, Impeccable injects a diagnostic overlay onto your live page. No screenshots, no guesswork.

+

See design issues highlighted directly on the page. No screenshots, no guesswork — Impeccable’s overlay shows you exactly what’s wrong and where.

@@ -286,15 +286,16 @@

No LLM needed. Pattern matching catches purple gradients, overused fonts, nested cards, low contrast, and more.

- Any workflow -

Embedded in /critique, or run standalone via the CLI.

+ Three ways to use it +

The Chrome extension on any site, embedded in /critique during an AI design review, or standalone via npx impeccable live.

-
+ + Impeccable Chrome extension flagging anti-patterns on a live page
New! - npx impeccable detect src/ + Get the Chrome extension →
-
+