From 1ac4cf91e254403c727c15e724d7b3e626a64eca Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Wed, 22 Apr 2026 14:43:40 -0700
Subject: [PATCH] refine(site): Antidote pairs use compact inline visual
 examples, not page screenshots
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced the tall page-screenshot "before" images with the
self-contained inline visual examples from the /anti-patterns
catalog (VISUAL_EXAMPLES dict). Three before/after pairs:

1. Gradient Text — purple-blue "Build the Future" gradient text vs.
   a solid italic Cormorant "Build the future." with magenta emphasis.
2. Side-Tab Cards — the ban signature, thick colored left stripe on
   an otherwise neutral card vs. a hairline-bordered card with a mono
   kicker and italic title.
3. Hero-Metric Template — the SaaS gradient "10M+" with tiny stats
   vs. a single "+18.4%" italic insight with real explanation and
   "from checkout fixes" causal tail.

Panels are now ~140px tall (was 4:3 aspect of full-page screenshots),
so the whole section is roughly half as tall. No large images, no
risk of the "Before" screenshots reading as Impeccable output. The
After panels sit on warm cream (brand surface) while the Before
panels use neutral cool white to further distance them visually.
---
 public/css/workflow.css | 32 +++++++++++++++------
 public/index.html       | 64 +++++++++++++++++------------------------
 public/privacy.html     |  3 ++
 3 files changed, 53 insertions(+), 46 deletions(-)

diff --git a/public/css/workflow.css b/public/css/workflow.css
index ede16c0af..ef8de1304 100644
--- a/public/css/workflow.css
+++ b/public/css/workflow.css
@@ -3684,15 +3684,29 @@
 .antidote-pair-figure {
   position: relative;
   margin: 0;
-  aspect-ratio: 4 / 3;
+  min-height: 140px;
   border-radius: 8px;
   background: var(--color-paper);
   border: 1px solid var(--color-mist);
   overflow: hidden;
   transition: box-shadow 260ms var(--ease-out);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 18px;
 }
 .antidote-pair-figure--before {
-  filter: saturate(1.05);
+  background: oklch(98% 0 0);
+}
+.antidote-pair-figure--after {
+  background: var(--color-cream);
+}
+.ab-slot {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
 }
 .antidote-pair-figure img {
   width: 100%;
@@ -3703,23 +3717,23 @@
 }
 .antidote-pair-figure figcaption {
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 8px;
+  right: 8px;
   z-index: 2;
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: 9px;
   font-weight: 600;
   letter-spacing: 0.2em;
   text-transform: uppercase;
-  padding: 3px 8px;
+  padding: 2px 8px;
   border-radius: 3px;
-  background: oklch(100% 0 0 / 0.88);
+  background: oklch(100% 0 0 / 0.9);
   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-figure--before figcaption { color: oklch(35% 0.15 25); background: oklch(98% 0.04 25 / 0.9); }
+.antidote-pair-figure--after figcaption { color: oklch(45% 0.18 145); background: oklch(96% 0.04 145 / 0.9); }
 .antidote-pair:hover .antidote-pair-figure {
   box-shadow: 0 14px 28px oklch(0% 0 0 / 0.1);
 }
diff --git a/public/index.html b/public/index.html
index a832df1df..727e8ed85 100644
--- a/public/index.html
+++ b/public/index.html
@@ -247,71 +247,58 @@
         <p class="section-lead" data-reveal>25 named anti-patterns, detected on your code and in your browser. Before, and what Impeccable steers toward instead.</p>
 
         <div class="antidote-wall" data-reveal>
-          <!-- 01: Purple Gradients → Warm editorial hero -->
-          <a href="/antipattern-examples/purple-gradients.html" class="antidote-pair">
+          <!-- 01: Gradient text → solid italic headline -->
+          <a href="/anti-patterns#gradient-text" class="antidote-pair">
             <figure class="antidote-pair-figure antidote-pair-figure--before">
-              <img src="antipattern-images/purple-gradients.png" alt="Synthwave AI landing page, purple gradient hero" loading="lazy">
+              <div class="ab-slot">
+                <div style="font-family: system-ui, sans-serif;"><div style="font-size: 26px; font-weight: 700; background: linear-gradient(135deg, oklch(65% 0.25 320), oklch(60% 0.25 265)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1;">Build the Future</div><div style="font-size: 11px; color: #888; margin-top: 6px;">Gradient text kills scannability.</div></div>
+              </div>
               <figcaption>Before</figcaption>
             </figure>
             <figure class="antidote-pair-figure antidote-pair-figure--after">
-              <div class="ab-after ab-after--editorial" aria-hidden="true">
-                <div class="ab-after-nav">
-                  <span class="ab-after-logo"></span>
-                  <span class="ab-after-link"></span><span class="ab-after-link"></span><span class="ab-after-link"></span>
-                  <span class="ab-after-cta"></span>
-                </div>
-                <div class="ab-after-hero">
-                  <span class="ab-after-kicker">Dispatch · 04</span>
-                  <div class="ab-after-title">Build what <em>actually</em> works.</div>
-                  <div class="ab-after-line"></div>
-                  <div class="ab-after-line ab-after-line--short"></div>
-                  <div class="ab-after-btn">Get started <span aria-hidden="true">→</span></div>
-                </div>
+              <div class="ab-slot">
+                <div style="font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.02; color: var(--color-ink); letter-spacing: -0.01em;">Build the <em style="font-style: italic; color: var(--color-accent);">future</em>.</div>
+                <div style="font-family: var(--font-body); font-size: 11px; color: var(--color-charcoal); margin-top: 8px;">One weight, one voice, perfect scannability.</div>
               </div>
               <figcaption>After</figcaption>
             </figure>
             <div class="antidote-pair-caption">
               <span class="antidote-pair-num">01</span>
-              <span class="antidote-pair-name">Purple Gradients</span>
+              <span class="antidote-pair-name">Gradient Text</span>
             </div>
           </a>
 
-          <!-- 02: Cardocalypse → Data list, no nesting -->
-          <a href="/antipattern-examples/cardocalypse.html" class="antidote-pair">
+          <!-- 02: Side-tab card → hairline card -->
+          <a href="/anti-patterns#side-tab" class="antidote-pair">
             <figure class="antidote-pair-figure antidote-pair-figure--before">
-              <img src="antipattern-images/cardocalypse.png" alt="Dashboard with cards nested inside cards" loading="lazy">
+              <div class="ab-slot">
+                <div style="background: #fff; border: 1px solid #e8e4df; border-left: 4px solid oklch(60% 0.22 265); border-radius: 6px; padding: 14px 16px; width: 100%; max-width: 240px; font-family: system-ui, sans-serif; font-size: 13px; color: #111;"><div style="font-weight: 600; margin-bottom: 4px;">Alert title</div><div style="color: #666; font-size: 12px;">Thick colored stripe on one side.</div></div>
+              </div>
               <figcaption>Before</figcaption>
             </figure>
             <figure class="antidote-pair-figure antidote-pair-figure--after">
-              <div class="ab-after ab-after--data" aria-hidden="true">
-                <div class="ab-after-data-kicker">This month</div>
-                <div class="ab-after-data-row"><span class="ab-after-data-k">Revenue</span><span class="ab-after-data-v">$2.4M</span><span class="ab-after-data-d">+24.5%</span></div>
-                <div class="ab-after-data-row"><span class="ab-after-data-k">Active users</span><span class="ab-after-data-v">48,219</span><span class="ab-after-data-d">+12.3%</span></div>
-                <div class="ab-after-data-row"><span class="ab-after-data-k">Conversion</span><span class="ab-after-data-v">8.7%</span><span class="ab-after-data-d">+2.1%</span></div>
-                <div class="ab-after-data-row"><span class="ab-after-data-k">NPS</span><span class="ab-after-data-v">72</span><span class="ab-after-data-d">+5 pts</span></div>
+              <div class="ab-slot">
+                <div style="background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 8px; padding: 14px 16px; width: 100%; max-width: 240px; font-family: var(--font-body); font-size: 13px; color: var(--color-ink);"><div style="font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 6px;">Alert</div><div style="font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.2; color: var(--color-ink); margin-bottom: 3px;">Alert title.</div><div style="color: var(--color-charcoal); font-size: 12px; line-height: 1.45;">Full border, mono kicker, no side stripe.</div></div>
               </div>
               <figcaption>After</figcaption>
             </figure>
             <div class="antidote-pair-caption">
               <span class="antidote-pair-num">02</span>
-              <span class="antidote-pair-name">Cardocalypse</span>
+              <span class="antidote-pair-name">Side-Tab Cards</span>
             </div>
           </a>
 
-          <!-- 03: Hero-Metric Template → Insight-first dashboard hero -->
-          <a href="/antipattern-examples/layout-templates.html" class="antidote-pair">
+          <!-- 03: Hero-metric layout → one honest insight -->
+          <a href="/anti-patterns#hero-metric-layout" class="antidote-pair">
             <figure class="antidote-pair-figure antidote-pair-figure--before">
-              <img src="antipattern-images/layout-templates.png" alt="Hero-metric template layout" loading="lazy">
+              <div class="ab-slot">
+                <div style="font-family: system-ui, sans-serif; text-align: left;"><div style="font-size: 44px; font-weight: 800; background: linear-gradient(135deg, oklch(65% 0.25 265), oklch(65% 0.25 340)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1;">10M+</div><div style="font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px;">Active users</div><div style="display: flex; gap: 16px; margin-top: 12px; font-size: 10px; color: #555;"><span><strong>99.9%</strong> uptime</span><span><strong>200ms</strong> p50</span></div></div>
+              </div>
               <figcaption>Before</figcaption>
             </figure>
             <figure class="antidote-pair-figure antidote-pair-figure--after">
-              <div class="ab-after ab-after--insight" aria-hidden="true">
-                <div class="ab-after-insight-kicker">This week</div>
-                <div class="ab-after-insight-num">+18.4<span>%</span></div>
-                <div class="ab-after-insight-label">Conversion lift, driven by <em>checkout fixes</em> shipped Tuesday.</div>
-                <svg class="ab-after-spark" viewBox="0 0 140 36" preserveAspectRatio="none" aria-hidden="true">
-                  <polyline points="0,28 18,24 32,26 48,18 62,22 78,14 96,12 112,8 128,10 140,4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-                </svg>
+              <div class="ab-slot">
+                <div style="font-family: var(--font-body);"><div style="font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-ash); margin-bottom: 6px;">This week</div><div style="font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 46px; line-height: 0.95; color: var(--color-ink); letter-spacing: -0.03em;">+18.4<span style="font-style: normal; font-size: 0.5em; color: var(--color-accent); margin-left: 1px; vertical-align: top;">%</span></div><div style="font-size: 11px; line-height: 1.4; color: var(--color-charcoal); margin-top: 6px; max-width: 22ch;">Conversion lift, from <em style="font-style: italic; color: var(--color-ink);">checkout fixes</em>.</div></div>
               </div>
               <figcaption>After</figcaption>
             </figure>
@@ -1210,5 +1197,8 @@
 
   <script type="module" src="./app.js"></script>
 
+<!-- impeccable-live-start -->
+<script src="http://localhost:8400/live.js"></script>
+<!-- impeccable-live-end -->
 </body>
 </html>
diff --git a/public/privacy.html b/public/privacy.html
index 3a41097f0..4139e711e 100644
--- a/public/privacy.html
+++ b/public/privacy.html
@@ -77,5 +77,8 @@
   <h2>Contact</h2>
   <p>Questions about this policy? Open an issue on <a href="https://github.com/pbakaus/impeccable">GitHub</a> or reach out to <a href="https://x.com/pbakaus">@pbakaus</a>.</p>
   </main>
+<!-- impeccable-live-start -->
+<script src="http://localhost:8400/live.js"></script>
+<!-- impeccable-live-end -->
 </body>
 </html>