From 598c43cc05854d9608621b1f4ab41a7b8f902767 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 14:39:09 -0700 Subject: [PATCH] =?UTF-8?q?refine(site):=20Antidote=20wall=20=E2=86=92=20b?= =?UTF-8?q?efore/after=20pairs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The "wall of three screenshots" alone looked, at a glance, like examples of pages made WITH Impeccable. Wrong signal. Replace each card with a vertical before/after pair: anti-pattern screenshot on top, hand-built refined alternative underneath. Pair labels use colored pills (before = crimson, after = green) on the image corners so the contrast is immediate. Three pairs shown: 1. Purple Gradients → warm editorial hero (cream bg, italic serif title with magenta emphasis word, squared ink CTA, no gradient) 2. Cardocalypse → flat data table (mono labels, display numbers, green delta, hairline rules between rows, no nested boxes) 3. Hero-Metric Template → one honest insight (single 52px italic number with percent accent, body explanation mentioning the actual reason, subtle sparkline) Lead copy updated: "Before, and what Impeccable steers toward instead." After mocks are pure inline HTML/CSS — no new image assets needed, no font dependencies, fully respect brand (Cormorant italic display, Instrument Sans body, magenta accent, warm cream bg, sharp CTAs). --- public/css/workflow.css | 236 ++++++++++++++++++++++++++++++++++++---- public/index.html | 88 +++++++++++---- 2 files changed, 281 insertions(+), 43 deletions(-) diff --git a/public/css/workflow.css b/public/css/workflow.css index fd392f985..ede16c0af 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -3671,57 +3671,74 @@ margin-bottom: var(--spacing-xl); } -.antidote-wall-card { - display: flex; - flex-direction: column; - gap: var(--spacing-sm); +.antidote-pair { + display: grid; + grid-template-rows: 1fr 1fr auto; + gap: 12px; text-decoration: none; color: inherit; transition: transform 260ms var(--ease-out); } +.antidote-pair:hover { transform: translateY(-4px); } -.antidote-wall-card:hover { - transform: translateY(-4px); -} - -.antidote-wall-image { +.antidote-pair-figure { + position: relative; + margin: 0; aspect-ratio: 4 / 3; - overflow: hidden; border-radius: 8px; background: var(--color-paper); border: 1px solid var(--color-mist); - box-shadow: 0 12px 32px oklch(0% 0 0 / 0.08); + overflow: hidden; transition: box-shadow 260ms var(--ease-out); } - -.antidote-wall-card:hover .antidote-wall-image { - box-shadow: 0 20px 40px oklch(0% 0 0 / 0.14), 0 0 0 1px var(--color-accent-soft); +.antidote-pair-figure--before { + filter: saturate(1.05); } - -.antidote-wall-image img { +.antidote-pair-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } +.antidote-pair-figure figcaption { + position: absolute; + top: 10px; + left: 10px; + z-index: 2; + font-family: var(--font-mono); + font-size: 10px; + font-weight: 600; + letter-spacing: 0.2em; + text-transform: uppercase; + padding: 3px 8px; + border-radius: 3px; + background: oklch(100% 0 0 / 0.88); + color: var(--color-ink); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); +} +.antidote-pair-figure--before figcaption { color: oklch(35% 0.15 25); } +.antidote-pair-figure--after figcaption { color: oklch(45% 0.18 145); } +.antidote-pair:hover .antidote-pair-figure { + box-shadow: 0 14px 28px oklch(0% 0 0 / 0.1); +} -.antidote-wall-caption { +.antidote-pair-caption { display: flex; align-items: baseline; gap: var(--spacing-sm); padding: 0 2px; } - -.antidote-wall-num { +.antidote-pair-num { font-family: var(--font-mono); font-size: 0.6875rem; - letter-spacing: 0.22em; + font-weight: 600; + letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); } - -.antidote-wall-label { +.antidote-pair-name { font-family: var(--font-display); font-style: italic; font-weight: 400; @@ -3731,6 +3748,181 @@ letter-spacing: -0.01em; } +/* After mocks — pure HTML/CSS impressions of what Impeccable steers toward */ +.ab-after { + position: absolute; + inset: 0; + padding: 12px; + display: flex; + flex-direction: column; +} + +/* After 01: editorial hero */ +.ab-after--editorial { + background: var(--color-cream); + gap: 10px; +} +.ab-after-nav { + display: flex; + align-items: center; + gap: 6px; + padding-bottom: 8px; + border-bottom: 1px solid var(--color-mist); +} +.ab-after-logo { + width: 12px; + height: 12px; + border-radius: 3px; + background: var(--color-ink); +} +.ab-after-link { + width: 22px; + height: 5px; + border-radius: 2px; + background: var(--color-mist); +} +.ab-after-cta { + margin-left: auto; + width: 48px; + height: 16px; + border-radius: 2px; + background: var(--color-ink); +} +.ab-after-hero { + display: flex; + flex-direction: column; + gap: 6px; + flex: 1; + justify-content: center; +} +.ab-after-kicker { + font-family: var(--font-mono); + font-size: 9px; + letter-spacing: 0.22em; + text-transform: uppercase; + color: var(--color-accent); +} +.ab-after-title { + font-family: var(--font-display); + font-weight: 400; + font-size: 20px; + line-height: 1.05; + color: var(--color-ink); + letter-spacing: -0.01em; + max-width: 10ch; +} +.ab-after-title em { + font-style: italic; + color: var(--color-accent); +} +.ab-after-line { + height: 5px; + border-radius: 2px; + background: var(--color-mist); +} +.ab-after-line--short { width: 60%; } +.ab-after-btn { + align-self: flex-start; + margin-top: 4px; + font-family: var(--font-body); + font-weight: 500; + font-size: 10px; + letter-spacing: 0.12em; + text-transform: uppercase; + padding: 7px 12px; + background: var(--color-ink); + color: var(--color-paper); + border-radius: 0; +} + +/* After 02: flat data table */ +.ab-after--data { + background: var(--color-paper); + gap: 0; + padding: 14px 14px 10px; +} +.ab-after-data-kicker { + font-family: var(--font-mono); + font-size: 9px; + letter-spacing: 0.22em; + text-transform: uppercase; + color: var(--color-ash); + margin-bottom: 10px; +} +.ab-after-data-row { + display: grid; + grid-template-columns: 1fr max-content max-content; + gap: 10px; + align-items: baseline; + padding: 8px 0; + border-bottom: 1px solid var(--color-mist); + font-family: var(--font-body); + font-size: 11px; +} +.ab-after-data-row:last-child { border-bottom: 0; } +.ab-after-data-k { color: var(--color-charcoal); } +.ab-after-data-v { + font-family: var(--font-display); + font-weight: 500; + font-size: 14px; + color: var(--color-ink); + letter-spacing: -0.01em; +} +.ab-after-data-d { + font-family: var(--font-mono); + font-size: 10px; + color: oklch(45% 0.18 145); +} + +/* After 03: one big honest insight */ +.ab-after--insight { + background: var(--color-cream); + padding: 18px 20px; + gap: 6px; + justify-content: center; +} +.ab-after-insight-kicker { + font-family: var(--font-mono); + font-size: 9px; + letter-spacing: 0.24em; + text-transform: uppercase; + color: var(--color-ash); +} +.ab-after-insight-num { + font-family: var(--font-display); + font-style: italic; + font-weight: 400; + font-size: 52px; + line-height: 1; + color: var(--color-ink); + letter-spacing: -0.03em; +} +.ab-after-insight-num span { + font-size: 0.5em; + font-style: normal; + color: var(--color-accent); + margin-left: 2px; + vertical-align: top; +} +.ab-after-insight-label { + font-family: var(--font-body); + font-size: 12px; + line-height: 1.4; + color: var(--color-charcoal); + max-width: 24ch; +} +.ab-after-insight-label em { + font-style: italic; + color: var(--color-ink); +} +.ab-after-spark { + width: 100%; + height: 28px; + margin-top: 6px; + color: var(--color-accent); + opacity: 0.8; +} + .antidote-foot { display: flex; align-items: baseline; diff --git a/public/index.html b/public/index.html index 6aef13a58..a832df1df 100644 --- a/public/index.html +++ b/public/index.html @@ -244,34 +244,80 @@

The Antidote

-

25 named anti-patterns, detected on your code and in your browser. These are three of them.

+

25 named anti-patterns, detected on your code and in your browser. Before, and what Impeccable steers toward instead.

- -
- Purple gradient hero UI -
-
- 01 - Purple Gradients + + +
+ Synthwave AI landing page, purple gradient hero +
Before
+
+
+ +
After
+
+
+ 01 + Purple Gradients
- -
- Cards nested inside cards -
-
- 02 - Cardocalypse + + + +
+ Dashboard with cards nested inside cards +
Before
+
+
+ +
After
+
+
+ 02 + Cardocalypse
- -
+ + + +
Hero-metric template layout -
-
- 03 - Hero-Metric Template +
Before
+ +
+ +
After
+
+
+ 03 + Hero-Metric Template