diff --git a/public/css/workflow.css b/public/css/workflow.css index 0f5704a90..8b60653fe 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -3654,3 +3654,109 @@ font-size: 12px; margin-top: 6px; } + +/* ============================================ + ANTIDOTE — visual-first wall of three + ============================================ */ + +.antidote-content .section-lead { + max-width: 54ch; + margin-bottom: var(--spacing-xl); +} + +.antidote-wall { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-lg); + margin-bottom: var(--spacing-xl); +} + +.antidote-wall-card { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + text-decoration: none; + color: inherit; + transition: transform 260ms var(--ease-out); +} + +.antidote-wall-card:hover { + transform: translateY(-4px); +} + +.antidote-wall-image { + 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); + 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-wall-image img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center top; + display: block; +} + +.antidote-wall-caption { + display: flex; + align-items: baseline; + gap: var(--spacing-sm); + padding: 0 2px; +} + +.antidote-wall-num { + font-family: var(--font-mono); + font-size: 0.6875rem; + letter-spacing: 0.22em; + text-transform: uppercase; + color: var(--color-accent); +} + +.antidote-wall-label { + font-family: var(--font-display); + font-style: italic; + font-weight: 400; + font-size: 1.375rem; + line-height: 1.1; + color: var(--color-ink); + letter-spacing: -0.01em; +} + +.antidote-foot { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: var(--spacing-lg); + padding-top: var(--spacing-md); + border-top: 1px solid var(--color-mist); + flex-wrap: wrap; +} + +.antidote-foot-meta { + font-family: var(--font-mono); + font-size: 0.6875rem; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--color-ash); +} + +@media (max-width: 820px) { + .antidote-wall { + grid-template-columns: 1fr; + gap: var(--spacing-md); + } + .antidote-foot { + flex-direction: column; + align-items: flex-start; + gap: var(--spacing-sm); + } +} diff --git a/public/index.html b/public/index.html index 14bab12a9..46e30c996 100644 --- a/public/index.html +++ b/public/index.html @@ -244,61 +244,41 @@

The Antidote

-
-
-

Every AI model learned from the same templates. Most design skills list a handful of don'ts in a document and hope the model remembers. Impeccable names 25 of them, catalogues them, and actively detects them, on your code and in your browser.

+

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

-
-
-
25
-
Named anti-patterns, each with a visual example and a detection rule. Comparable skills (Anthropic's frontend-design, assorted "AI design" skills) list a short set in prose and hope for the best.
-
-
-
2
-
Detection layers. A deterministic pass catches the 25 rules via source and DOM analysis: no LLM, no API keys, no flaky scoring. /impeccable critique layers an LLM semantic pass on top for the things patterns can't see.
-
-
-
3
-
Surfaces. The impeccable detect CLI gates your PRs. The Chrome extension flags issues on any page. The overlay lives inside /impeccable critique during AI design review.
-
-
- - Browse the full catalog → -
- -
-
-

Gallery of Shame

- - +
+ +
+ Purple gradient hero UI
- + + +
+ Cards nested inside cards +
+
+ 02 + Cardocalypse +
+ + +
+ Hero-metric template layout +
+
+ 03 + Hero-Metric Template +
+ +
+ +
+ Browse all 25 anti-patterns → + Detected by deterministic rules. Flagged by the LLM layer. Visualized in your browser.