From e631074a65801bd407bdd68b4ad3ef2e12c78762 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 11:59:02 -0700 Subject: [PATCH] feat(site): Why Impeccable section with tabbed feature loop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New section 04 with a vertical tab list on the left and a panel on the right. Seven items covering the actual differentiators: 1. Intentional design — PRODUCT.md + DESIGN.md + shape as the opposite of one-shot-mock tools. 2. Brand and product, both — the register split, called out against frontend-design-style single-mode skills. 3. Production codebases — reads your design system, daily-driver. 4. Where you code — IDE-native, no canvas, no handoff. 5. DESIGN.md — Google Stitch spec-compliant, interoperable. 6. CI/CD-ready — CLI + JSON output for PR gates. 7. Chrome extension — 25 checks, one click, any page. Section numbers bumped: Visual 04→05, Install 05→06, Changelog 06→07, FAQ 07→08. Sticky nav updated to match. Arrow-key tab navigation, aria-selected, hidden attr on inactive panels, subtle fade on switch, respects prefers-reduced-motion. Vertical layout on desktop, stacked on mobile. --- public/app.js | 35 +++++++ public/css/workflow.css | 207 ++++++++++++++++++++++++++++++++++++++++ public/index.html | 88 +++++++++++++++-- 3 files changed, 320 insertions(+), 10 deletions(-) diff --git a/public/app.js b/public/app.js index 1b54a7054..397fdc563 100644 --- a/public/app.js +++ b/public/app.js @@ -214,11 +214,46 @@ function init() { initFrameworkViz(); initFoundationGrid(); initSectionNav(); + initWhyTabs(); loadContent(); document.body.classList.add("loaded"); } +function initWhyTabs() { + const container = document.querySelector('.why-layout'); + if (!container) return; + const tabs = Array.from(container.querySelectorAll('.why-tab')); + const panels = Array.from(container.querySelectorAll('.why-panel')); + if (!tabs.length || !panels.length) return; + + const activate = (index) => { + tabs.forEach((tab, i) => { + const on = i === index; + tab.classList.toggle('is-active', on); + tab.setAttribute('aria-selected', on ? 'true' : 'false'); + }); + panels.forEach((panel, i) => { + const on = i === index; + panel.classList.toggle('is-active', on); + if (on) panel.removeAttribute('hidden'); + else panel.setAttribute('hidden', ''); + }); + }; + + tabs.forEach((tab, index) => { + tab.addEventListener('click', () => activate(index)); + tab.addEventListener('keydown', (e) => { + if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return; + e.preventDefault(); + const dir = e.key === 'ArrowDown' ? 1 : -1; + const next = (index + dir + tabs.length) % tabs.length; + tabs[next].focus(); + activate(next); + }); + }); +} + if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { diff --git a/public/css/workflow.css b/public/css/workflow.css index cbdf3c5cf..7101f8814 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -1366,3 +1366,210 @@ transform: translateY(0); } } + +/* ============================================ + WHY IMPECCABLE — tabbed feature loop + ============================================ */ + +.why-section { + padding: var(--spacing-3xl) 0; + max-width: var(--width-max); + margin: 0 auto; + padding-left: var(--spacing-xl); + padding-right: var(--spacing-xl); +} + +.why-content .section-lead { + max-width: 42ch; + margin-bottom: var(--spacing-2xl); +} + +.why-layout { + display: grid; + grid-template-columns: minmax(280px, 360px) 1fr; + gap: var(--spacing-2xl); + align-items: start; +} + +.why-tabs { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0; + border-top: 1px solid var(--color-mist); +} + +.why-tabs li { + border-bottom: 1px solid var(--color-mist); +} + +.why-tab { + display: grid; + grid-template-columns: 40px 1fr; + gap: var(--spacing-sm); + align-items: baseline; + width: 100%; + padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0; + background: transparent; + border: 0; + border-left: 2px solid transparent; + padding-left: var(--spacing-sm); + cursor: pointer; + text-align: left; + font-family: var(--font-body); + color: var(--color-ash); + transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out); +} + +.why-tab-num { + font-family: var(--font-mono); + font-size: 0.6875rem; + letter-spacing: 0.18em; + color: var(--color-ash); + transition: color 180ms var(--ease-out); +} + +.why-tab-label { + font-family: var(--font-display); + font-size: 1.125rem; + font-weight: 400; + line-height: 1.2; +} + +.why-tab:hover { + color: var(--color-ink); +} + +.why-tab:hover .why-tab-num { + color: var(--color-charcoal); +} + +.why-tab.is-active { + color: var(--color-ink); + border-left-color: var(--color-accent); +} + +.why-tab.is-active .why-tab-num { + color: var(--color-accent); +} + +.why-tab:focus-visible { + outline: 2px solid var(--color-accent); + outline-offset: 2px; +} + +.why-panels { + position: relative; + min-height: 280px; + padding-left: var(--spacing-md); +} + +.why-panel { + display: none; + max-width: 60ch; + animation: whyFadeIn 260ms var(--ease-out); +} + +.why-panel.is-active { + display: block; +} + +.why-panel-title { + font-family: var(--font-display); + font-style: italic; + font-weight: 400; + font-size: clamp(1.75rem, 3vw, 2.5rem); + line-height: 1.1; + color: var(--color-ink); + margin: 0 0 var(--spacing-md); + letter-spacing: -0.01em; +} + +.why-panel-body { + font-family: var(--font-body); + font-size: 1.0625rem; + line-height: 1.65; + color: var(--color-charcoal); + margin: 0 0 var(--spacing-md); +} + +.why-panel-body em { + font-style: italic; + color: var(--color-ink); + font-weight: 500; +} + +.why-panel-body a { + color: var(--color-ink); + text-decoration: underline; + text-underline-offset: 3px; + text-decoration-color: var(--color-accent); +} + +.why-panel-body a:hover { + color: var(--color-accent); +} + +.why-panel-body code { + font-family: var(--font-mono); + font-size: 0.875em; + background: var(--color-mist); + padding: 2px 6px; + border-radius: 3px; + color: var(--color-ink); +} + +.why-panel-meta { + font-family: var(--font-mono); + font-size: 0.75rem; + letter-spacing: 0.05em; + color: var(--color-ash); + margin: var(--spacing-md) 0 0; +} + +.why-panel-meta code { + font-family: var(--font-mono); + font-size: 0.875em; + color: var(--color-charcoal); +} + +.why-panel-meta a { + color: var(--color-ink); + text-decoration: underline; + text-underline-offset: 3px; + text-decoration-color: var(--color-accent); +} + +.why-panel-meta a:hover { color: var(--color-accent); } + +@keyframes whyFadeIn { + from { opacity: 0; transform: translateY(6px); } + to { opacity: 1; transform: translateY(0); } +} + +@media (prefers-reduced-motion: reduce) { + .why-panel { animation: none; } +} + +@media (max-width: 900px) { + .why-section { + padding-left: var(--spacing-md); + padding-right: var(--spacing-md); + } + .why-layout { + grid-template-columns: 1fr; + gap: var(--spacing-lg); + } + .why-panels { + padding-left: 0; + min-height: auto; + } + .why-tab-label { + font-size: 1rem; + } + .why-tab-num { + font-size: 0.625rem; + } +} diff --git a/public/index.html b/public/index.html index ebee82c22..df08eb076 100644 --- a/public/index.html +++ b/public/index.html @@ -75,10 +75,11 @@ 01Foundation 02Language 03Antidote - 04Visual - 05Install - 06New - 07FAQ + 04Why + 05Visual + 06Install + 07New + 08FAQ @@ -286,10 +287,77 @@ - -
+ +
04 +

Why Impeccable

+
+
+

Seven reasons this isn't another AI design tool.

+ +
+
    +
    2. +
    3. +
    4. +
    5. +
    6. +
    7. +
    8. +
+ +
+
+

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

+
+ + + + + + + + + + + + +
+
+
+
+ + +
+
+ 05

Visual Mode

@@ -330,7 +398,7 @@
- 05 + 06

Get Started

@@ -505,7 +573,7 @@
- 06 + 07

What's New

@@ -650,10 +718,10 @@
- +
- 07 + 08

Frequently Asked Questions