From 59769e316fde632e55bc8b25eccf93b14bf1ce89 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 15:59:47 -0700 Subject: [PATCH] redesign(site): restructure "The Case" tabs, wrap panels in card MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Reorder and relabel all 8 tabs (Prevents AI slop, Brand + Product design, Ships code not mockups, Fluent in DESIGN.md, etc.) - Flip every panel to title → body → visual → meta so the claim leads and the visual serves as proof - Move "The Case" section header above the tab layout, matching the other sections - Let panel visuals span the full right column; cap only the text at 60ch - Wrap the right-side content in a paper card; strip .why-visual chrome to avoid nested cards - Add a heading to panel 02 (Prevents AI slop) so it matches the others Co-Authored-By: Claude Opus 4.7 (1M context) --- public/css/workflow.css | 43 +++++----- public/index.html | 177 +++++++++++++++++++++------------------- 2 files changed, 114 insertions(+), 106 deletions(-) diff --git a/public/css/workflow.css b/public/css/workflow.css index e28a0a92c..f2d5fc304 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -1378,8 +1378,8 @@ .why-layout { display: grid; - grid-template-columns: minmax(280px, 360px) 1fr; - gap: var(--spacing-2xl); + grid-template-columns: minmax(240px, 300px) 1fr; + gap: var(--spacing-xl); align-items: start; } @@ -1389,10 +1389,6 @@ gap: var(--spacing-lg); } -.why-left .section-header { - margin-bottom: 0; -} - .why-tabs { list-style: none; padding: 0; @@ -1463,15 +1459,24 @@ .why-panels { position: relative; min-height: 280px; - padding-left: var(--spacing-md); + background: var(--color-paper); + border: 1px solid var(--color-mist); + border-radius: 10px; + padding: var(--spacing-xl); + box-shadow: 0 1px 2px oklch(0.2 0 0 / 0.04); } .why-panel { display: none; - max-width: 60ch; animation: whyFadeIn 260ms var(--ease-out); } +.why-panel-title, +.why-panel-body, +.why-panel-meta { + max-width: 60ch; +} + .why-panel.is-active { display: block; } @@ -1617,12 +1622,11 @@ /* Visual frame — common base */ .why-visual { - background: var(--color-paper); - border: 1px solid var(--color-mist); - border-radius: 8px; - padding: var(--spacing-md); + background: transparent; + border: 0; + padding: 0; margin-bottom: var(--spacing-md); - min-height: 240px; + min-height: 0; display: flex; align-items: stretch; position: relative; @@ -3984,26 +3988,25 @@ ============================================ */ .why-visual--antidote { - padding: 0; - background: transparent; - border: 0; - min-height: 0; display: grid; - grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); - gap: var(--spacing-md); - margin-bottom: var(--spacing-md); + grid-template-columns: minmax(0, 1fr) 340px; + gap: var(--spacing-lg); + align-items: start; } .why-visual--antidote .patterns-tabbed { margin: 0; min-width: 0; + width: 100%; } .why-visual--antidote .gallery-stack-container { flex: none; width: 100%; + max-width: none; } @media (max-width: 860px) { .why-visual--antidote { grid-template-columns: 1fr; } } + diff --git a/public/index.html b/public/index.html index 70cbd67f6..8a0ec5b8b 100644 --- a/public/index.html +++ b/public/index.html @@ -239,26 +239,28 @@
+
+ 03 +

The Case

+
-
- 03 -

The Case

-
    2. -
    3. +
    5. -
    6. -
    7. -
    8. -
    9. -
    10. +
    11. +
    12. +
    13. +
    14. +
+

Design that knows who it's for.

+

Most AI tools one-shot a plausible-looking mock. Impeccable starts with a conversation: audience, brand personality, anti-references, aesthetic direction. It captures the answer in PRODUCT.md and DESIGN.md and loads them on every command. The output is design that fits the actual business, not a generic impression of one.

@@ -289,35 +291,56 @@
-

Design that knows who it's for.

-

Most AI tools one-shot a plausible-looking mock. Impeccable starts with a conversation: audience, brand personality, anti-references, aesthetic direction. It captures the answer in PRODUCT.md and DESIGN.md and loads them on every command. The output is design that fits the actual business, not a generic impression of one.

/impeccable teach · /impeccable document · /impeccable shape

- -
@@ -1105,6 +1105,7 @@ +

Work with me

Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

@@ -1120,6 +1121,7 @@ +
Get in touch @@ -1161,5 +1163,8 @@ + + +