skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-18 00:56:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

refine(site): Antidote pairs use compact inline visual examples, not page screenshots

Browse Source 
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.
This commit is contained in:
Paul Bakaus
2026-04-22 14:43:40 -07:00
parent 598c43cc05
commit 1ac4cf91e2
3 changed files with 53 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/workflow.css
+23 -9
View File
@@ -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);
}