mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-21 10:36:27 +03:00
refine(site): Antidote wall → before/after pairs
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).
This commit is contained in:
Paul Bakaus
+214
-22
@@ -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;
|
||||
|
||||
+67
-21
@@ -244,34 +244,80 @@
|
||||
<h2 class="section-title">The Antidote</h2>
|
||||
</div>
|
||||
<div class="antidote-content">
|
||||
<p class="section-lead" data-reveal>25 named anti-patterns, detected on your code and in your browser. These are three of them.</p>
|
||||
<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>
|
||||
<a href="/antipattern-examples/purple-gradients.html" class="antidote-wall-card">
|
||||
<div class="antidote-wall-image">
|
||||
<img src="antipattern-images/purple-gradients.png" alt="Purple gradient hero UI" loading="lazy">
|
||||
</div>
|
||||
<div class="antidote-wall-caption">
|
||||
<span class="antidote-wall-num">01</span>
|
||||
<span class="antidote-wall-label">Purple Gradients</span>
|
||||
<!-- 01: Purple Gradients → Warm editorial hero -->
|
||||
<a href="/antipattern-examples/purple-gradients.html" 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">
|
||||
<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>
|
||||
<figcaption>After</figcaption>
|
||||
</figure>
|
||||
<div class="antidote-pair-caption">
|
||||
<span class="antidote-pair-num">01</span>
|
||||
<span class="antidote-pair-name">Purple Gradients</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/antipattern-examples/cardocalypse.html" class="antidote-wall-card">
|
||||
<div class="antidote-wall-image">
|
||||
<img src="antipattern-images/cardocalypse.png" alt="Cards nested inside cards" loading="lazy">
|
||||
</div>
|
||||
<div class="antidote-wall-caption">
|
||||
<span class="antidote-wall-num">02</span>
|
||||
<span class="antidote-wall-label">Cardocalypse</span>
|
||||
|
||||
<!-- 02: Cardocalypse → Data list, no nesting -->
|
||||
<a href="/antipattern-examples/cardocalypse.html" 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">
|
||||
<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>
|
||||
<figcaption>After</figcaption>
|
||||
</figure>
|
||||
<div class="antidote-pair-caption">
|
||||
<span class="antidote-pair-num">02</span>
|
||||
<span class="antidote-pair-name">Cardocalypse</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/antipattern-examples/layout-templates.html" class="antidote-wall-card">
|
||||
<div class="antidote-wall-image">
|
||||
|
||||
<!-- 03: Hero-Metric Template → Insight-first dashboard hero -->
|
||||
<a href="/antipattern-examples/layout-templates.html" 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>
|
||||
<div class="antidote-wall-caption">
|
||||
<span class="antidote-wall-num">03</span>
|
||||
<span class="antidote-wall-label">Hero-Metric Template</span>
|
||||
<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>
|
||||
<figcaption>After</figcaption>
|
||||
</figure>
|
||||
<div class="antidote-pair-caption">
|
||||
<span class="antidote-pair-num">03</span>
|
||||
<span class="antidote-pair-name">Hero-Metric Template</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user