diff --git a/public/app.js b/public/app.js index 042f46625..86e7169be 100644 --- a/public/app.js +++ b/public/app.js @@ -6,7 +6,6 @@ import { initLensEffect } from "./js/components/lens.js"; import { initFrameworkViz } from "./js/components/framework-viz.js"; import { initScrollReveal } from "./js/utils/reveal.js"; import { initAnchorScroll, initHashTracking } from "./js/utils/scroll.js"; -import { initThemeToggle } from "./js/utils/theme.js"; // ============================================ // STATE @@ -237,93 +236,18 @@ document.addEventListener("click", (e) => { } }); -// ============================================ -// CASE STUDIES TABS -// ============================================ - -function initCaseStudyTabs() { - const container = document.querySelector('.transformations-tabbed'); - if (!container) return; - - const tabs = container.querySelectorAll('.transformation-tab'); - const panels = container.querySelectorAll('.transformation-panel'); - - tabs.forEach(tab => { - tab.addEventListener('click', () => { - const tabIndex = tab.dataset.tab; - - // Update tabs - tabs.forEach(t => { - t.classList.remove('active'); - t.setAttribute('aria-selected', 'false'); - }); - tab.classList.add('active'); - tab.setAttribute('aria-selected', 'true'); - - // Update panels - panels.forEach(p => { - p.classList.remove('active'); - }); - const activePanel = container.querySelector(`[data-panel="${tabIndex}"]`); - if (activePanel) { - activePanel.classList.add('active'); - } - }); - }); -} - -// ============================================ -// LIGHTBOX -// ============================================ - -function initLightbox() { - const lightbox = document.getElementById('image-lightbox'); - if (!lightbox) return; - - const lightboxImage = lightbox.querySelector('.lightbox-image'); - const closeBtn = lightbox.querySelector('.lightbox-close'); - - // Click on transformation images to open lightbox - document.querySelectorAll('.transformation-before img, .transformation-after img').forEach(img => { - img.addEventListener('click', () => { - lightboxImage.src = img.src; - lightboxImage.alt = img.alt; - lightbox.classList.add('active'); - document.body.style.overflow = 'hidden'; - }); - }); - - // Close lightbox - function closeLightbox() { - lightbox.classList.remove('active'); - document.body.style.overflow = ''; - } - - closeBtn.addEventListener('click', closeLightbox); - lightbox.addEventListener('click', (e) => { - if (e.target === lightbox) closeLightbox(); - }); - document.addEventListener('keydown', (e) => { - if (e.key === 'Escape' && lightbox.classList.contains('active')) { - closeLightbox(); - } - }); -} // ============================================ // STARTUP // ============================================ function init() { - initThemeToggle(); initAnchorScroll(); initHashTracking(); initLensEffect(); initScrollReveal(); initGlassTerminal(); initFrameworkViz(); - initLightbox(); - initCaseStudyTabs(); loadContent(); document.body.classList.add("loaded"); diff --git a/public/css/main.css b/public/css/main.css index 6b069e5bb..a678b0989 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -107,136 +107,6 @@ button, input, textarea, select { --cat-system-text: #44403c; } -/* Dark Mode - Class-based for toggle support */ -html.dark { - --color-ink: oklch(98% 0 0); - --color-text: oklch(98% 0 0); - --color-paper: oklch(10% 0 0); - --color-cream: oklch(12% 0.005 350); - --color-charcoal: oklch(92% 0 0); - --color-ash: oklch(65% 0 0); - --color-mist: oklch(20% 0 0); - --color-bg: oklch(12% 0.005 350); - - --color-accent: oklch(68% 0.23 350); - --color-accent-hover: oklch(76% 0.23 350); - --color-accent-dim: oklch(68% 0.23 350 / 0.15); - --color-accent-soft: oklch(68% 0.23 350 / 0.25); - - /* Framework category colors - Dark mode (muted backgrounds, brighter accents) */ - --cat-diagnostic-bg: #2d1f3d; - --cat-diagnostic-border: #c084fc; - --cat-diagnostic-text: #e879f9; - - --cat-quality-bg: #14332a; - --cat-quality-border: #4ade80; - --cat-quality-text: #86efac; - - --cat-intensity-bg: #362a1a; - --cat-intensity-border: #fbbf24; - --cat-intensity-text: #fcd34d; - - --cat-adaptation-bg: #1e293b; - --cat-adaptation-border: #60a5fa; - --cat-adaptation-text: #93c5fd; - - --cat-enhancement-bg: #3b1f32; - --cat-enhancement-border: #f472b6; - --cat-enhancement-text: #f9a8d4; - - --cat-system-bg: #1c1917; - --cat-system-border: #a8a29e; - --cat-system-text: #d6d3d1; -} - -/* System preference fallback (when no explicit preference is set) */ -@media (prefers-color-scheme: dark) { - html:not(.light):not(.dark) { - --color-ink: oklch(98% 0 0); - --color-text: oklch(98% 0 0); - --color-paper: oklch(10% 0 0); - --color-cream: oklch(12% 0.005 350); - --color-charcoal: oklch(92% 0 0); - --color-ash: oklch(65% 0 0); - --color-mist: oklch(20% 0 0); - --color-bg: oklch(12% 0.005 350); - - --color-accent: oklch(68% 0.23 350); - --color-accent-hover: oklch(76% 0.23 350); - --color-accent-dim: oklch(68% 0.23 350 / 0.15); - --color-accent-soft: oklch(68% 0.23 350 / 0.25); - - /* Framework category colors - Dark mode */ - --cat-diagnostic-bg: #2d1f3d; - --cat-diagnostic-border: #c084fc; - --cat-diagnostic-text: #e879f9; - - --cat-quality-bg: #14332a; - --cat-quality-border: #4ade80; - --cat-quality-text: #86efac; - - --cat-intensity-bg: #362a1a; - --cat-intensity-border: #fbbf24; - --cat-intensity-text: #fcd34d; - - --cat-adaptation-bg: #1e293b; - --cat-adaptation-border: #60a5fa; - --cat-adaptation-text: #93c5fd; - - --cat-enhancement-bg: #3b1f32; - --cat-enhancement-border: #f472b6; - --cat-enhancement-text: #f9a8d4; - - --cat-system-bg: #1c1917; - --cat-system-border: #a8a29e; - --cat-system-text: #d6d3d1; - } -} - -/* Theme Toggle */ -.theme-toggle { - position: fixed; - bottom: var(--spacing-md); - right: var(--spacing-md); - z-index: 10001; - display: flex; - align-items: center; - background: var(--color-cream); - border: 1px solid var(--color-mist); - border-radius: 100px; - padding: 4px; - gap: 2px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} - -.theme-toggle-btn { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border: none; - background: transparent; - border-radius: 50%; - color: var(--color-ash); - cursor: pointer; - transition: all 0.2s ease; -} - -.theme-toggle-btn:hover { - color: var(--color-charcoal); - background: var(--color-mist); -} - -.theme-toggle-btn.active { - color: var(--color-paper); - background: var(--color-ink); -} - -.theme-toggle-btn svg { - width: 16px; - height: 16px; -} /* ============================================ SKIP LINK (Accessibility) @@ -271,7 +141,7 @@ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; - overflow-x: hidden; /* Prevent horizontal scroll from vw-based full-bleed sections */ + overflow-x: clip; /* Prevent horizontal scroll without breaking position:sticky */ } body { @@ -280,7 +150,7 @@ body { line-height: 1.625; color: var(--color-text); background: var(--color-paper); - overflow-x: hidden; + overflow-x: clip; min-height: 100vh; min-height: 100dvh; } @@ -436,13 +306,14 @@ code { display: flex; flex-direction: column; justify-content: center; - padding: var(--spacing-xl) var(--spacing-lg); + padding: var(--spacing-xl) 0; background: var(--color-paper); } .hero-combined-container { max-width: var(--width-max); margin: 0 auto; + padding: 0 var(--spacing-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); @@ -1982,16 +1853,6 @@ code { .antidote-section { padding: var(--spacing-2xl) 0; border-top: 1px solid var(--color-mist); - background: var(--color-cream); - margin-left: calc(-50vw + 50%); - margin-right: calc(-50vw + 50%); - padding-left: calc(50vw - 50% + var(--spacing-lg)); - padding-right: calc(50vw - 50% + var(--spacing-lg)); -} - -.antidote-content { - max-width: var(--width-max); - margin: 0 auto; } /* Patterns - tabbed layout */ diff --git a/public/css/styles.css b/public/css/styles.css index b0660bac9..bc10c6780 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1983,111 +1983,6 @@ button, input, textarea, select { --cat-system-border: #78716c; --cat-system-text: #44403c; } -html.dark { - --color-ink: oklch(98% 0 0); - --color-text: oklch(98% 0 0); - --color-paper: oklch(10% 0 0); - --color-cream: oklch(12% 0.005 350); - --color-charcoal: oklch(92% 0 0); - --color-ash: oklch(65% 0 0); - --color-mist: oklch(20% 0 0); - --color-bg: oklch(12% 0.005 350); - --color-accent: oklch(68% 0.23 350); - --color-accent-hover: oklch(76% 0.23 350); - --color-accent-dim: oklch(68% 0.23 350 / 0.15); - --color-accent-soft: oklch(68% 0.23 350 / 0.25); - --cat-diagnostic-bg: #2d1f3d; - --cat-diagnostic-border: #c084fc; - --cat-diagnostic-text: #e879f9; - --cat-quality-bg: #14332a; - --cat-quality-border: #4ade80; - --cat-quality-text: #86efac; - --cat-intensity-bg: #362a1a; - --cat-intensity-border: #fbbf24; - --cat-intensity-text: #fcd34d; - --cat-adaptation-bg: #1e293b; - --cat-adaptation-border: #60a5fa; - --cat-adaptation-text: #93c5fd; - --cat-enhancement-bg: #3b1f32; - --cat-enhancement-border: #f472b6; - --cat-enhancement-text: #f9a8d4; - --cat-system-bg: #1c1917; - --cat-system-border: #a8a29e; - --cat-system-text: #d6d3d1; -} -@media (prefers-color-scheme: dark) { - html:not(.light):not(.dark) { - --color-ink: oklch(98% 0 0); - --color-text: oklch(98% 0 0); - --color-paper: oklch(10% 0 0); - --color-cream: oklch(12% 0.005 350); - --color-charcoal: oklch(92% 0 0); - --color-ash: oklch(65% 0 0); - --color-mist: oklch(20% 0 0); - --color-bg: oklch(12% 0.005 350); - --color-accent: oklch(68% 0.23 350); - --color-accent-hover: oklch(76% 0.23 350); - --color-accent-dim: oklch(68% 0.23 350 / 0.15); - --color-accent-soft: oklch(68% 0.23 350 / 0.25); - --cat-diagnostic-bg: #2d1f3d; - --cat-diagnostic-border: #c084fc; - --cat-diagnostic-text: #e879f9; - --cat-quality-bg: #14332a; - --cat-quality-border: #4ade80; - --cat-quality-text: #86efac; - --cat-intensity-bg: #362a1a; - --cat-intensity-border: #fbbf24; - --cat-intensity-text: #fcd34d; - --cat-adaptation-bg: #1e293b; - --cat-adaptation-border: #60a5fa; - --cat-adaptation-text: #93c5fd; - --cat-enhancement-bg: #3b1f32; - --cat-enhancement-border: #f472b6; - --cat-enhancement-text: #f9a8d4; - --cat-system-bg: #1c1917; - --cat-system-border: #a8a29e; - --cat-system-text: #d6d3d1; - } -} -.theme-toggle { - position: fixed; - bottom: var(--spacing-md); - right: var(--spacing-md); - z-index: 10001; - display: flex; - align-items: center; - background: var(--color-cream); - border: 1px solid var(--color-mist); - border-radius: 100px; - padding: 4px; - gap: 2px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} -.theme-toggle-btn { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border: none; - background: transparent; - border-radius: 50%; - color: var(--color-ash); - cursor: pointer; - transition: all 0.2s ease; -} -.theme-toggle-btn:hover { - color: var(--color-charcoal); - background: var(--color-mist); -} -.theme-toggle-btn.active { - color: var(--color-paper); - background: var(--color-ink); -} -.theme-toggle-btn svg { - width: 16px; - height: 16px; -} .skip-link { position: absolute; top: -100%; @@ -2111,7 +2006,7 @@ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; - overflow-x: hidden; + overflow-x: clip; } body { font-family: var(--font-body); @@ -2119,7 +2014,7 @@ body { line-height: 1.625; color: var(--color-text); background: var(--color-paper); - overflow-x: hidden; + overflow-x: clip; min-height: 100vh; min-height: 100dvh; } @@ -2237,12 +2132,13 @@ code { display: flex; flex-direction: column; justify-content: center; - padding: var(--spacing-xl) var(--spacing-lg); + padding: var(--spacing-xl) 0; background: var(--color-paper); } .hero-combined-container { max-width: var(--width-max); margin: 0 auto; + padding: 0 var(--spacing-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); @@ -3529,15 +3425,6 @@ code { .antidote-section { padding: var(--spacing-2xl) 0; border-top: 1px solid var(--color-mist); - background: var(--color-cream); - margin-left: calc(-50vw + 50%); - margin-right: calc(-50vw + 50%); - padding-left: calc(50vw - 50% + var(--spacing-lg)); - padding-right: calc(50vw - 50% + var(--spacing-lg)); -} -.antidote-content { - max-width: var(--width-max); - margin: 0 auto; } .patterns-categories { margin-bottom: var(--spacing-xl); diff --git a/public/index.html b/public/index.html index cbb22bb1c..a17529bd8 100644 --- a/public/index.html +++ b/public/index.html @@ -38,26 +38,6 @@ - -
- - - -
@@ -208,106 +188,11 @@
- -
-
- 04 -

See It In Action

-

Sample projects transformed with Impeccable commands

-
-
- -
- - - -
- - -
-
-
-
- Landing page before transformation -
Before
-
- → -
- Landing page after transformation -
After
-
-
-
-

Landing Page Polish

-

AI-generated landing page refined from generic template to memorable brand experience.

-
- /critique - /polish - /animate -
-
-
- -
-
-
- Form before transformation -
Before
-
- → -
- Form after transformation -
After
-
-
-
-

Form UX Overhaul

-

Complex multi-step form simplified and clarified for better completion rates.

-
- /simplify - /clarify - /harden -
-
-
- -
-
-
- Dashboard before transformation -
Before
-
- → -
- Dashboard after transformation -
After
-
-
-
-

Dashboard Redesign

-

Generic analytics dashboard transformed into a distinctive, scannable interface.

-
- /audit - /normalize - /bolder -
-
-
-
-
- - - -
- - +
- 05 + 04

Download for Your AI Harness

Same design intelligence, adapted for your workflow. Download and start using in seconds.

@@ -408,10 +293,10 @@
- +
- 06 + 05

Frequently Asked Questions

@@ -463,30 +348,15 @@
-

Support the Project

-

Impeccable isn't backed by a company or VC. It's just me, building tools I wish existed. Your support keeps this independent and actively maintained.

+

Buy me a coffee

+

If Impeccable helped you ship something better, consider a one-time tip.

-
- - $20 - Supporter - - - Popular - $100 - Sponsor - - - $10k - Patron - -
- - - Or choose your own amount → + + Leave a tip + + + - -

Voluntary contribution. No expectation of influence or future maintenance.

@@ -517,7 +387,6 @@ Anti-Patterns Commands Cheatsheet - Case Studies Downloads GitHub