skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 22:26:38 +03:00
Code Issues Packages Projects Releases Wiki Activity
Files
eecdfa128ea1a17637dc43cd363af3f3e34b74dc
pbakaus_impeccable/site/styles/workflow.css
T
Paul BakausGitHubClaude Opus 4.7
 b8f09c8142 Migrate site from Bun to Astro (#130) 
* feat(site): scaffold Astro migration, convert 3 pages

Phase 1+2 of the Astro migration:

- Astro v6.2.1 installed, srcDir: 'site', static output to build/
- Shared layout: Base.astro (head, fonts, meta, slots), Header.astro
  (star count in one place: 23k), Footer.astro
- CSS moved from public/css/ to site/styles/ (9 files, @import chains
  resolve via Vite)
- Three pages converted: privacy, cases/neo-mirai, live-mode
  (all return 200 on astro dev)

Remaining: designing, slop, homepage, content collections (docs),
JS migration, server/index.js deletion, build.js cleanup.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(site): migrate all 6 main pages to Astro

Converts the remaining pages:
- designing/index.html → site/pages/designing/index.astro (551 lines)
- slop/index.html → site/pages/slop/index.astro (909 lines)
- index.html → site/pages/index.astro (1278 lines, the homepage)

Base.astro gains OG meta tag props, before-header/after-header
slots (for grain overlay and section nav), and configurable mainId.

Homepage uses link tags to public/css/ instead of frontmatter CSS
imports to avoid esbuild choking on :has() in main.css. Curly
braces inside <code> elements (CSS snippets in changelog) escaped
with HTML entities to prevent Astro JSX expression parsing.

All 6 pages return 200 on astro dev. Branch: feat/astro-migration.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(site): content collections for docs and tutorials

Replaces the 1532-line build-sub-pages.js generator with Astro v6
content collections:

- 24 skill editorial files move to site/content/skills/
- 4 tutorial files move to site/content/tutorials/
- site/content.config.ts defines both collections with glob loaders
- site/pages/docs/[...slug].astro reads skills collection + command
  metadata from source/skills/ at build time
- site/pages/docs/index.astro renders the command grid grouped by
  category (create, evaluate, refine, simplify, harden, system)
- site/pages/tutorials/ mirrors the pattern with ordered index
- Doc.astro layout provides sidebar nav, breadcrumbs, and related-
  command chips from the COMMAND_RELATIONSHIPS data
- Category/relationship data extracted to site/data/sub-pages-data.ts

All 15 tested pages return 200: 6 main pages + 5 docs + 2 tutorials
+ 2 index pages. The old generator is not yet deleted (Task #6).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(site): move JS source from public/js/ to site/scripts/

Moves all 49 JS files (app.js + 48 in js/) into site/scripts/.
Vite now processes them through its module bundler instead of
serving them raw from public/.

app.js import paths updated from ./js/X to ./X (the js/ nesting
is gone since app.js now lives alongside the subdirectories).

Homepage and live-mode page switch from <script is:inline src="/app.js">
to Vite-processed <script> imports, so tree-shaking, bundling,
and minification happen automatically at build time.

public/js/ still exists for now (cleanup in Task #6) and the
generated/counts.js build output path needs updating there too.
@paper-design/shaders added to npm dependencies (was missing).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(site): delete old Bun server, generator, and duplicated files

Cleanup after the Astro migration:

Deleted:
- server/index.js (233 lines, replaced by `astro dev`)
- scripts/build-sub-pages.js (1532 lines, replaced by content collections)
- scripts/lib/render-page.js (247 lines, replaced by Base.astro layout)
- content/site/partials/header.html (replaced by Header.astro component)
- public/index.html, privacy.html, designing/, live-mode/, cases/
  (replaced by .astro pages in site/pages/)
- public/css/ (moved to site/styles/)
- public/js/ old source files (moved to site/scripts/)
- public/app.js (moved to site/scripts/app.js)

Kept in public/:
- antipattern-examples/ (standalone HTML demos, not Astro pages)
- antipattern-images/, assets/, neo-mirai/ (static assets)
- js/detect-antipatterns-browser.js (referenced by antipattern examples)
- js/generated/counts.js (build output from scripts/build.js)
- _data/api/ (generated API data, now written to public/ so Astro
  passes it through to build/)

Updated:
- astro.config.mjs: added redirects (skills->docs, cheatsheet->docs,
  gallery->slop, neon-mirai->neo-mirai, etc.)
- package.json: dev->astro dev, build->build:skills+build:site,
  preview->astro preview
- scripts/build.js: removed buildStaticSite(), generateSubPages(),
  static-asset copying. API data writes to public/_data/ instead of
  build/_data/. Site-header validator is a no-op (shared component).
  Em-dash validator scans site/components + site/layouts, not pages
  (pages contain content from other sources like detector descriptions).
- .gitignore: removed public/slop/ entry

Tests: 186/186 pass. Skills build: clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(site): fix redirect config for Astro compatibility

Move the dynamic /skills/:id -> /docs/:id redirect to public/_redirects
(Cloudflare Pages native format) since Astro's redirect config can't
handle dynamic routes that don't match existing page patterns.

Remove duplicate trailing-slash redirect entries that caused warnings.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(site): switch remaining pages from /css/ link tags to frontmatter imports

Doc.astro, docs/index, tutorials/index, and tutorials/[slug] were
still using <link href="/css/sub-pages.css"> which pointed at the
deleted public/css/ directory. Switched to frontmatter CSS imports
(import '../../styles/sub-pages.css') which Vite resolves from
site/styles/.

Homepage also switches from link tags to frontmatter imports for
main.css and sub-pages.css — the esbuild error that originally
forced the link-tag workaround was caused by unescaped curly braces
in the HTML content (since fixed), not by the CSS itself.

All pages verified visually in Chrome: homepage hero, foundation
grid, docs index (card grid with categories), docs detail (sidebar +
editorial content + visual mockups), designing (core loop diagram),
privacy, tutorials. Header renders with 23k stars on every page.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(site): fix edge-to-edge sections, broken API paths, CSS links

Three fixes:

1. Homepage sections sat on the viewport edge because Base.astro's
   <main> lacked the site-content class (provides max-width + padding).
   Added mainClass prop to Base.astro; homepage sets mainClass="site-content".

2. "Failed to load commands" because app.js fetched /api/commands
   which only existed in the old Bun server's routing. Updated to
   fetch from /_data/api/commands.json (the static JSON files that
   build:skills writes to public/_data/).

3. CSS reference fix (previous commit was incomplete): Doc.astro,
   docs/index, tutorials pages all used <link href="/css/sub-pages.css">
   pointing at deleted public/css/. Switched to frontmatter imports.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(site): add sidebar to docs index page

The docs index was using Base.astro directly without the skills-layout
grid, so it rendered without a sidebar. Added the same sidebar structure
from Doc.astro (category-grouped command list) and wrapped the content
in the skills-layout grid.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(site): extract footer CSS to shared file, import in Base.astro

Footer was unstyled on sub-pages because footer CSS lived only in
main.css (loaded by the homepage) not in sub-pages.css. Extracted
the 95 lines of footer rules into site/styles/footer.css and
imported it in Base.astro so every page gets footer styles regardless
of which page-specific CSS it loads.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(demos): move landing-demo into repo, add as slop specimens

Moves ~/code/landing-demo/ into demos/landing-demo/ (without
node_modules or the redundant .claude/.agents skill copies — the
repo root's skill is found by walking up). PRODUCT.md, DESIGN.md,
DESIGN.json, PROMPT.md, and SCRIPT.md stay in place so running
Claude from demos/landing-demo/ picks up the project context.

Also copies both pages as slop specimens to public/antipattern-examples/
with the detector script baked in:
- new-slop-2026.html (Fraunces + warm cream editorial monoculture)
- old-slop-2022.html (purple gradient + glassmorphism + neon glow)

These can be linked from the slop page gallery alongside the
existing 11 synthetic specimens.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(slop): replace single demo iframe with Then vs Now comparison

The "See it" section (01) on the slop page now shows two side-by-side
browser frames: 2022 slop (purple gradients, glassmorphism, neon glow)
and 2026 slop (Fraunces, warm cream, editorial restraint). Both run
the detector overlay live — hover either to see which rules fire.

Replaces the single visual-mode-demo.html iframe. Responsive: stacks
vertically on viewports below 900px.

Caption: "Same engine, different decade, both flagged."

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(slop): switch to single-frame era toggle, center the section

Replaces the side-by-side dual-iframe layout with a single large
frame and a segmented 2022/2026 toggle. Clicking the toggle swaps
which iframe is visible (both pre-loaded, instant switch). Browser
chrome title updates to match the active era.

Centers the lede text and toggle above the frame for visual
cohesion with the full-width iframe below.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(slop): left-align See It section, toggle inline with lede

Moves the era toggle to the right of the lede paragraph using a
flex row (align-items: flex-end). Left-aligned text + right-docked
toggle matches the rest of the page's flow instead of standing out
as a centered island. Stacks vertically on narrow viewports.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(slop): left-align iframe, remove max-width and auto margin

The visual-mode-preview had max-width: 1040px + margin: 0 auto
which centered it within the column. Override both in the
.slop-then-now context so the frame fills the full content width
flush with the text above. Caption left-aligned to match.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(site): update star count to 24k (24,062)

One file, one edit. The Astro migration working as intended.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(build): regenerate pnpm-lock.yaml for astro + shaders deps

Cloudflare Pages uses pnpm with frozen-lockfile. The lockfile was
stale after adding astro, @astrojs/cloudflare, and
@paper-design/shaders via npm.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(build): resolve 3 bugbot review issues

1. Restore public/slop/ to .gitignore — prevents accidental legacy
   generator output from conflicting with the Astro page.

2. Move astro and @paper-design/shaders to devDependencies — these
   are site-build tools, not CLI runtime deps. Removes @astrojs/cloudflare
   entirely (unused; static output mode needs no adapter).

3. Fix Astro wiping build:skills output — CF config (_headers,
   _redirects, _routes.json) and API data now write to public/ so
   Astro copies them through. Dist ZIPs copy to build/_data/dist/
   as a post-build step (after Astro finishes).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(build): merge duplicate devDependencies, use npx for astro CLI

The previous commit created a second devDependencies key in
package.json. JSON doesn't support duplicate keys — pnpm ignored
the first block (with astro), so `astro build` wasn't found.

Merged astro and @paper-design/shaders into the existing
devDependencies block. Changed `astro build/dev/preview` to
`npx astro build/dev/preview` so pnpm finds the local binary
on Cloudflare Pages (which doesn't add node_modules/.bin to PATH
by default).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(demos): remove private demo script and prompt from public repo

SCRIPT.md contained a detailed conference talk script with personal
delivery strategies, rehearsed Q&A answers, and venue details.
PROMPT.md contained the origin brief for the demo page. Neither
belongs in a public repo.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(build): gitignore generated public/ artifacts, consolidate redirects

1. Generated files written to public/ by build:skills (API data,
   CF config, browser detector, counts.js) are now gitignored.
   Prevents noisy diffs and merge conflicts from committed build
   artifacts.

2. Removed duplicate redirects from astro.config.mjs. All redirects
   now live in one place: the _redirects file generated by
   scripts/build.js (which Cloudflare Pages processes natively).
   Eliminates the dual-maintenance risk where the two sources
   could drift apart.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-02 11:29:10 -07:00

3449 lines
72 KiB
CSS
Raw Blame History

/* Workflow / Commands - Renaissance Edition */
.commands-section {
position: relative;
padding: var(--spacing-xl) 0;
background: var(--color-paper);
}
.commands-gallery {
/* Reset grid */
display: block;
}
/* ============================================
MAGAZINE SPREAD - Desktop Layout
============================================ */
/* Category accent colors */
.magazine-spread[data-category="create"] { --spread-accent: oklch(55% 0.20 340); }
.magazine-spread[data-category="evaluate"] { --spread-accent: oklch(55% 0.20 300); }
.magazine-spread[data-category="refine"] { --spread-accent: oklch(55% 0.18 260); }
.magazine-spread[data-category="simplify"] { --spread-accent: oklch(55% 0.20 80); }
.magazine-spread[data-category="harden"] { --spread-accent: oklch(55% 0.20 160); }
.magazine-spread[data-category="system"] { --spread-accent: oklch(45% 0.05 0); }
.magazine-container {
position: relative;
width: 100%;
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--spacing-lg);
align-items: start;
overflow: hidden;
}
@media (min-width: 1100px) {
.magazine-container {
background: white;
border-radius: 16px;
padding: var(--spacing-lg);
}
}
/* Fisheye command list */
.fisheye-list {
position: relative;
height: 400px;
align-self: center;
overflow: hidden;
mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
.fisheye-scroll {
height: 100%;
overflow-y: auto;
scrollbar-width: none;
position: relative;
}
.fisheye-scroll::-webkit-scrollbar { display: none; }
.fisheye-item {
display: block;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 400;
color: var(--color-ink);
background: none;
border: none;
padding: 0;
position: absolute;
left: 0;
cursor: pointer;
white-space: nowrap;
text-align: left;
width: 100%;
line-height: 1.3;
transform-origin: left center;
will-change: transform, opacity;
}
.fisheye-slash {
color: var(--color-mist);
font-weight: 300;
}
.fisheye-item.is-active {
font-weight: 600;
}
.fisheye-item.is-active .fisheye-slash {
color: var(--color-accent);
}
.fisheye-beta {
font-family: var(--font-body);
font-size: 0.45rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ash);
border: 1px solid var(--color-mist);
border-radius: 3px;
padding: 1px 4px;
margin-left: 0.35em;
vertical-align: middle;
}
/* The viewport that clips to one spread at a time */
.magazine-viewport {
position: relative;
height: 520px;
overflow: hidden;
}
/* Individual spread */
.magazine-spread {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 38% 1fr;
grid-template-rows: 1fr auto;
gap: 0 var(--spacing-2xl);
padding: var(--spacing-lg) var(--spacing-lg);
opacity: 0;
pointer-events: none;
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
transform: translateY(16px);
will-change: opacity, transform;
}
.magazine-spread.active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
z-index: 2;
}
.magazine-spread.exiting {
opacity: 0;
transform: translateY(-16px);
z-index: 1;
}
/* Left column: Big name + meta */
.spread-identity {
grid-column: 1;
grid-row: 1 / 3;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--spacing-md);
padding-right: var(--spacing-lg);
}
.spread-category-label {
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--spread-accent);
}
.spread-command-name {
white-space: nowrap;
font-family: var(--font-display);
font-size: clamp(3rem, 5.5vw, 5.5rem);
font-weight: 600;
line-height: 0.95;
color: var(--color-ink);
margin: 0;
letter-spacing: -0.02em;
}
.spread-command-name .spread-slash {
color: var(--spread-accent);
font-weight: 300;
}
/* Sub-commands: stack the /impeccable namespace as a smaller label above the
command name so the command name stays at full display size and never
clips (e.g., "overdrive" is long). */
.spread-command-name .spread-namespace {
display: block;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-ash);
letter-spacing: 0.04em;
margin-bottom: 0.4em;
}
.spread-command-name .spread-namespace .spread-slash {
color: var(--spread-accent);
font-weight: 400;
}
.spread-command-name .beta-badge {
font-family: var(--font-body);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--spread-accent);
border: 1px solid var(--spread-accent);
border-radius: 3px;
padding: 2px 6px;
vertical-align: super;
margin-left: 8px;
}
.spread-description {
font-family: var(--font-body);
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-charcoal);
max-width: 360px;
}
/* Flow / relationship line */
.spread-flow {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
margin-top: var(--spacing-xs);
white-space: nowrap;
}
.spread-flow-label {
font-family: var(--font-body);
font-size: 0.75rem;
color: var(--color-ash);
}
.spread-flow-icon {
color: var(--spread-accent);
font-weight: 600;
font-size: 0.8125rem;
}
.spread-flow-cmd {
font-family: var(--font-mono);
font-size: 0.6875rem;
background: var(--color-mist);
padding: 2px 7px;
border-radius: 3px;
color: var(--color-ink);
}
/* Right column: Demo area */
.spread-demo-area {
grid-column: 2;
grid-row: 1 / 3;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
/* Demo split comparison inside the spread */
.spread-demo-area .demo-split-comparison {
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
min-height: 0;
}
.spread-demo-area .demo-split-comparison .split-container {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
cursor: ew-resize;
user-select: none;
background: var(--color-cream);
}
.spread-demo-area .demo-split-comparison .split-before,
.spread-demo-area .demo-split-comparison .split-after {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
}
.spread-demo-area .demo-split-comparison .split-before {
z-index: 1;
background: var(--color-cream);
}
.spread-demo-area .demo-split-comparison .split-after {
z-index: 2;
background: var(--color-paper);
clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
}
.spread-demo-area .demo-split-comparison .split-content {
width: 100%;
max-width: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.spread-demo-area .demo-split-comparison .split-divider {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background: var(--spread-accent, var(--color-accent));
transform: translateX(-50%) skewX(-10deg);
pointer-events: none;
z-index: 3;
box-shadow: 0 0 12px rgba(0,0,0,0.1);
}
.spread-demo-area .demo-split-comparison .split-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) skewX(10deg);
font-size: 0.5625rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-paper);
background: var(--spread-accent, var(--color-accent));
padding: 4px 10px;
border-radius: 3px;
white-space: nowrap;
}
.spread-demo-area .demo-split-comparison .demo-caption {
flex-shrink: 0;
font-size: 0.75rem;
color: var(--color-ash);
text-align: center;
padding: var(--spacing-sm) var(--spacing-md);
}
/* Fallback demo container inside spread */
.spread-demo-area .demo-container {
flex: 1;
display: flex;
flex-direction: column;
}
.spread-demo-area .demo-container .demo-viewport {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
max-width: 420px;
background: none;
min-height: auto;
}
/* (nav moved to fisheye list) */
/* ============================================
OLD DESKTOP STYLES (kept for mobile reuse)
============================================ */
.commands-container {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--spacing-2xl);
align-items: start;
}
@media (max-width: 900px) {
.commands-container {
grid-template-columns: 1fr;
}
}
/* Left: The Manual (Scrollable) */
.command-manual {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
padding-bottom: 20vh;
}
.command-category-header {
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
color: var(--color-accent);
text-transform: uppercase;
letter-spacing: 0.1em;
padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-sm);
margin-top: var(--spacing-md);
border-bottom: 1px solid var(--color-mist);
}
.command-category-header:first-child {
margin-top: 0;
}
.manual-entry {
position: relative;
padding: var(--spacing-lg);
padding-left: calc(var(--spacing-lg) + 16px); /* Reserve space for transform */
border-left: 2px solid var(--color-mist);
transition: border-color 0.4s var(--ease-out), opacity 0.4s var(--ease-out), background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
opacity: 0.4;
cursor: pointer;
transform: translateX(-16px);
}
.manual-entry:hover {
opacity: 0.7;
}
.manual-entry.active {
border-left-color: var(--color-accent);
opacity: 1;
transform: translateX(0);
background: linear-gradient(to right, var(--color-bg), transparent);
}
.manual-cmd-name {
font-family: var(--font-mono);
font-size: 1.5rem;
margin: 0 0 var(--spacing-sm);
color: var(--color-ink);
font-weight: 500;
}
.beta-badge {
font-family: var(--font-body);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-accent);
border: 1px solid var(--color-accent);
border-radius: 3px;
padding: 1px 5px;
vertical-align: middle;
margin-left: 6px;
}
.section-title .beta-badge {
font-size: 0.6875rem;
padding: 2px 7px;
border-radius: 4px;
vertical-align: 0.35em;
margin-left: 10px;
}
.manual-cmd-desc {
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-charcoal);
margin: 0;
}
.manual-cmd-rel {
font-size: 0.8125rem;
color: var(--color-ash);
margin-top: var(--spacing-sm);
display: flex;
align-items: center;
gap: 0.5ch;
flex-wrap: wrap;
}
.manual-cmd-rel .rel-icon {
color: var(--color-accent);
font-weight: 600;
}
.manual-cmd-rel code {
font-family: var(--font-mono);
font-size: 0.75rem;
background: var(--color-mist);
padding: 2px 6px;
border-radius: 3px;
color: var(--color-ink);
}
/* Right: The Terminal Stack (Sticky, vertically centered) */
.glass-terminal-wrapper {
position: sticky;
top: 50vh;
transform: translateY(-50%);
height: calc(100vh - var(--spacing-xl) * 2);
max-height: 800px;
min-height: 500px;
}
/* Stacked Windows Container */
.terminal-stack {
position: relative;
height: 100%;
perspective: 1200px;
}
.terminal-stack-tabs {
position: absolute;
top: -31px;
right: 8px;
display: flex;
gap: 4px;
z-index: 10;
}
.terminal-stack-tab {
font-family: var(--font-mono);
font-size: 0.75rem;
padding: 5px 12px;
background: var(--color-cream);
border: 1px solid var(--color-mist);
border-bottom: none;
border-radius: 6px 6px 0 0;
color: var(--color-ash);
cursor: pointer;
transition: all 0.2s ease;
}
.terminal-stack-tab:hover {
background: var(--color-paper);
color: var(--color-charcoal);
}
.terminal-stack-tab.active {
background: var(--color-paper);
color: var(--color-ink);
border-color: var(--color-mist);
}
/* Individual Windows */
.terminal-window {
position: absolute;
inset: 0;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease,
filter 0.3s ease;
transform-origin: center bottom;
}
/* Demo window (front by default) */
.terminal-window--demo {
z-index: 2;
}
.terminal-window--demo.is-back {
transform: translateY(16px) translateX(12px) scale(0.96);
opacity: 0.6;
filter: brightness(0.92);
pointer-events: none;
z-index: 1;
}
/* Source window (back by default) */
.terminal-window--source {
z-index: 1;
transform: translateY(16px) translateX(12px) scale(0.96);
opacity: 0.6;
filter: brightness(0.92);
pointer-events: none;
}
.terminal-window--source.is-front {
transform: translateY(0) translateX(0) scale(1);
opacity: 1;
filter: brightness(1);
pointer-events: auto;
z-index: 2;
}
/* Source Window Content */
.source-window {
background: var(--color-paper);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--color-mist);
border-radius: 8px;
box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.source-header {
background: var(--color-cream);
padding: 12px 16px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--color-mist);
flex-shrink: 0;
}
.source-title {
font-family: var(--font-mono);
font-size: 0.875rem;
color: var(--color-ink);
font-weight: 500;
}
.source-body {
flex: 1;
padding: var(--spacing-md);
font-family: var(--font-mono);
font-size: 0.75rem;
line-height: 1.5;
color: var(--color-charcoal);
overflow-y: auto;
overscroll-behavior: contain;
white-space: pre-wrap;
word-break: break-word;
background: var(--color-cream);
}
.source-loading {
color: var(--color-ash);
font-style: italic;
}
@media (max-width: 900px) {
.magazine-container { display: none; }
.fisheye-list { display: none; }
.glass-terminal-wrapper {
display: none; /* Hide on mobile for now, or stack */
}
}
.glass-terminal {
background: var(--color-paper);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--color-mist);
border-radius: 8px;
box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.terminal-header {
background: var(--color-cream);
padding: 12px 16px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--color-mist);
}
.terminal-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.terminal-dot.red { background: #ff5f56; }
.terminal-dot.yellow { background: #ffbd2e; }
.terminal-dot.green { background: #27c93f; }
.terminal-title {
margin-left: auto;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--color-ash);
}
.terminal-body {
flex: 1;
padding: var(--spacing-md);
font-family: var(--font-mono);
font-size: 0.9375rem;
color: var(--color-ink);
overflow-y: auto;
display: flex;
flex-direction: column;
min-height: 0; /* Allow flex shrinking */
}
.terminal-line {
margin-bottom: var(--spacing-sm);
display: flex;
gap: var(--spacing-sm);
line-height: 1.5;
}
.terminal-prompt {
color: var(--color-accent);
user-select: none;
font-weight: bold;
}
.terminal-cursor {
display: inline-block;
width: 8px;
height: 1.2em;
background: var(--color-accent);
vertical-align: middle;
animation: blink 1s step-end infinite;
}
.terminal-output {
color: var(--color-ash);
margin-bottom: var(--spacing-md);
white-space: pre-wrap;
}
/* Hide steps when viewport is short */
@media (max-height: 800px) {
.terminal-output {
display: none;
}
}
.terminal-cmd {
color: var(--color-accent);
font-weight: 600;
}
.terminal-step {
color: var(--color-charcoal);
}
.terminal-done {
color: var(--color-success, #22c55e);
font-weight: 500;
}
.terminal-preview {
background: var(--color-paper);
margin: var(--spacing-sm) 0;
flex: 1;
min-height: 0; /* Allow shrinking */
overflow: hidden;
border-radius: 12px;
}
.terminal-cursor-line {
flex-shrink: 0;
margin-top: var(--spacing-sm) !important;
}
/* Demo Split Comparison in Terminal */
.terminal-preview .demo-split-comparison {
display: flex;
flex-direction: column;
height: 100%;
}
.terminal-preview .demo-split-comparison .split-container {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
cursor: ew-resize;
user-select: none;
background: var(--color-cream);
}
.terminal-preview .demo-split-comparison .split-before,
.terminal-preview .demo-split-comparison .split-after {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
}
.terminal-preview .demo-split-comparison .split-before {
z-index: 1;
background: var(--color-cream);
}
.terminal-preview .demo-split-comparison .split-after {
z-index: 2;
background: var(--color-paper);
clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
}
.terminal-preview .demo-split-comparison .split-content {
width: 100%;
max-width: 280px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.terminal-preview .demo-split-comparison .split-divider {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background: var(--color-accent);
transform: translateX(-50%) skewX(-10deg);
pointer-events: none;
z-index: 3;
box-shadow: 0 0 12px rgba(0,0,0,0.1);
}
.terminal-preview .demo-split-comparison .split-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) skewX(10deg);
font-size: 0.5625rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-paper);
background: var(--color-accent);
padding: 4px 10px;
border-radius: 3px;
white-space: nowrap;
}
.terminal-preview .demo-split-comparison .demo-caption {
flex-shrink: 0;
font-size: 0.75rem;
color: var(--color-ash);
text-align: center;
padding: var(--spacing-sm) var(--spacing-md);
}
@keyframes blink { 50% { opacity: 0; } }
/* ============================================
CASE STUDIES / TRANSFORMATIONS SECTION
============================================ */
.casestudies-section {
position: relative;
padding: var(--spacing-2xl) 0;
border-top: 1px solid var(--color-mist);
}
/* Tabbed transformations */
.transformations-tabbed {
margin-top: var(--spacing-xl);
}
.transformation-tabs {
display: flex;
gap: var(--spacing-xs);
border-bottom: 1px solid var(--color-mist);
margin-bottom: var(--spacing-lg);
}
.transformation-tab {
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-ash);
background: none;
border: none;
padding: var(--spacing-sm) var(--spacing-md);
cursor: pointer;
position: relative;
transition: color 0.2s ease;
}
.transformation-tab:hover {
color: var(--color-charcoal);
}
.transformation-tab.active {
color: var(--color-ink);
}
.transformation-tab.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background: var(--color-accent);
}
.transformation-panels {
position: relative;
}
.transformation-panel {
display: none;
flex-direction: column;
gap: var(--spacing-lg);
animation: fadeInPanel 0.3s ease;
}
.transformation-panel.active {
display: flex;
}
@keyframes fadeInPanel {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Side-by-side images */
.transformation-images {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.transformation-before,
.transformation-after {
flex: 1;
margin: 0;
}
.transformation-before img,
.transformation-after img,
.transformation-placeholder {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--color-mist);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.transformation-before img:hover,
.transformation-after img:hover,
.transformation-placeholder:hover {
transform: scale(1.02);
box-shadow: 0 8px 24px -4px rgba(0,0,0,0.15);
}
.transformation-placeholder {
background: linear-gradient(135deg, var(--color-mist) 0%, var(--color-cream) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-ash);
font-size: 0.8125rem;
font-style: italic;
}
.transformation-before figcaption,
.transformation-after figcaption {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-ash);
margin-top: var(--spacing-xs);
text-align: center;
}
.transformation-arrow {
font-size: 1.5rem;
color: var(--color-accent);
font-weight: 300;
flex-shrink: 0;
}
/* Info section */
.transformation-info {
max-width: 600px;
}
.transformation-title {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
color: var(--color-ink);
margin: 0 0 var(--spacing-xs);
}
.transformation-desc {
font-size: 0.9375rem;
color: var(--color-charcoal);
line-height: 1.6;
margin: 0 0 var(--spacing-sm);
}
.transformation-commands {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.transformation-command {
font-family: var(--font-mono);
font-size: 0.75rem;
background: var(--color-mist);
color: var(--color-charcoal);
padding: 4px 10px;
border-radius: 4px;
}
/* Lightbox */
.lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.active {
opacity: 1;
visibility: visible;
}
.lightbox-close {
position: absolute;
top: 20px;
right: 24px;
background: none;
border: none;
color: white;
font-size: 2.5rem;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s ease;
line-height: 1;
}
.lightbox-close:hover {
opacity: 1;
}
.lightbox-image {
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
@media (max-width: 768px) {
.transformation-images {
flex-direction: column;
}
.transformation-arrow {
transform: rotate(90deg);
}
.transformation-before,
.transformation-after {
width: 100%;
}
}
/* ============================================
HERO VERSION LINK
============================================ */
.hero-version-link {
font-size: 0.8125rem;
color: var(--color-ash);
margin-top: var(--spacing-sm);
}
.hero-version-link a {
color: var(--color-ash);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.hero-version-link a:hover {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
/* ============================================
CHANGELOG + FAQ ROW (side-by-side on desktop)
============================================ */
.changelog-faq-row {
position: relative;
}
@media (min-width: 1024px) {
.changelog-faq-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: calc(var(--spacing-xl) * 1.5);
border-top: 1px solid var(--color-mist);
}
.changelog-faq-row > .changelog-section,
.changelog-faq-row > .faq-section {
border-top: none;
}
.changelog-faq-row > .faq-section {
border-left: 1px solid var(--color-mist);
padding-left: calc(var(--spacing-xl) * 0.75);
margin-left: calc(var(--spacing-xl) * -0.75);
}
}
/* ============================================
CHANGELOG SECTION
============================================ */
.changelog-section {
position: relative;
padding: var(--spacing-xl) 0;
border-top: 1px solid var(--color-mist);
}
.changelog-list {
display: flex;
flex-direction: column;
gap: 0;
}
.changelog-entry {
padding: var(--spacing-md) 0;
}
.changelog-entry + .changelog-entry {
border-top: 1px solid var(--color-mist);
}
.changelog-version-header {
display: flex;
align-items: baseline;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.changelog-version {
font-family: var(--font-mono);
font-size: 1.125rem;
font-weight: 600;
color: var(--color-ink);
}
.changelog-date {
font-size: 0.8125rem;
color: var(--color-ash);
}
.changelog-items {
margin: 0;
padding-left: var(--spacing-md);
color: var(--color-charcoal);
font-size: 0.9375rem;
line-height: 1.65;
max-width: 72ch;
}
.changelog-items li {
margin-bottom: var(--spacing-xs);
}
.changelog-items code {
font-family: var(--font-mono);
font-size: 0.875em;
background: var(--color-mist);
padding: 2px 6px;
border-radius: 3px;
color: var(--color-ink);
}
/* Changelog: highlight reel */
.changelog-highlights {
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--color-mist);
}
.changelog-highlights-label {
font-family: var(--font-mono);
font-size: 1.125rem;
font-weight: 600;
color: var(--color-ink);
margin: 0 0 var(--spacing-sm);
}
.changelog-highlights-label .changelog-date {
margin-left: var(--spacing-xs);
}
/* Changelog: collapsible older entries */
.changelog-older {
margin-top: 0;
}
.changelog-older + .changelog-older {
margin-top: 0;
border-top: 1px solid var(--color-mist);
}
.changelog-older-toggle {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-accent);
padding: var(--spacing-md) 0;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 6px;
transition: color 0.2s ease;
}
.changelog-older-toggle::-webkit-details-marker {
display: none;
}
.changelog-older-toggle::before {
content: '+';
font-size: 1.25rem;
font-weight: 300;
transition: transform 0.3s var(--ease-out);
}
.changelog-older[open] .changelog-older-toggle::before {
transform: rotate(45deg);
}
.changelog-older-toggle:hover {
color: var(--color-accent-hover);
}
.changelog-older-entries {
animation: faqFadeIn 0.3s var(--ease-out);
}
/* ============================================
FAQ SECTION
============================================ */
.faq-section {
position: relative;
padding: var(--spacing-xl) 0;
border-top: 1px solid var(--color-mist);
}
.faq-list {
display: flex;
flex-direction: column;
gap: 0;
}
.faq-item {
border-bottom: 1px solid var(--color-mist);
}
.faq-question {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
color: var(--color-ink);
padding: var(--spacing-md) calc(var(--spacing-md) + 1.5rem) var(--spacing-md) 0;
cursor: pointer;
list-style: none;
position: relative;
transition: color 0.2s ease;
}
.faq-question::-webkit-details-marker {
display: none;
}
.faq-question::after {
content: '+';
font-family: var(--font-body);
font-size: 1.5rem;
font-weight: 300;
color: var(--color-accent);
transition: transform 0.3s var(--ease-out);
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.faq-item[open] .faq-question::after {
transform: translateY(-50%) rotate(45deg);
}
.faq-question:hover {
color: var(--color-accent);
}
.faq-answer {
padding: 0 0 var(--spacing-md);
color: var(--color-charcoal);
line-height: 1.7;
max-width: 70ch;
animation: faqFadeIn 0.3s var(--ease-out);
}
.faq-answer p {
margin: 0 0 var(--spacing-sm);
}
.faq-answer p:last-child {
margin-bottom: 0;
}
.faq-answer ul {
margin: var(--spacing-sm) 0;
padding-left: var(--spacing-md);
}
.faq-answer li {
margin-bottom: var(--spacing-xs);
}
.faq-answer code {
font-family: var(--font-mono);
font-size: 0.875em;
background: var(--color-mist);
padding: 2px 6px;
border-radius: 3px;
color: var(--color-ink);
}
.faq-answer a {
color: var(--color-accent);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.faq-answer a:hover {
border-bottom-color: var(--color-accent);
}
/* Mobile: FAQ + Changelog */
@media (max-width: 600px) {
.faq-question {
font-size: 1rem;
padding: var(--spacing-md) 0;
min-height: 44px;
gap: var(--spacing-sm);
}
.faq-answer {
font-size: 0.875rem;
}
.changelog-version {
font-size: 1rem;
}
.changelog-version-header {
flex-wrap: wrap;
gap: var(--spacing-xs);
}
.changelog-items {
padding-left: var(--spacing-sm);
font-size: 0.875rem;
}
.changelog-older-toggle {
min-height: 44px;
}
}
@keyframes faqFadeIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================
WHY IMPECCABLE — tabbed feature loop
============================================ */
.why-section {
padding: var(--spacing-2xl) 0;
border-top: 1px solid var(--color-mist);
}
.why-layout {
display: grid;
grid-template-columns: minmax(240px, 300px) 1fr;
gap: var(--spacing-xl);
align-items: start;
}
.why-left {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.why-tabs {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.why-tabs li + li {
border-top: 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-body);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.3;
}
.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);
}
.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;
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);
/* All panels stack in one grid cell so the outgoing panel can cross-fade
out while the incoming one fades in. Container auto-sizes to the
tallest panel, so switching between tabs doesn't jump. */
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "stack";
}
.why-panel,
.why-panel[hidden] {
/* [hidden] attribute on initial markup would force display:none and skip
the crossfade; keep the element rendered so opacity/transform can run. */
display: block;
grid-area: stack;
min-width: 0;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition:
opacity 650ms var(--ease-out),
transform 800ms var(--ease-out),
visibility 0s linear 650ms;
pointer-events: none;
}
.why-panel-title,
.why-panel-body,
.why-panel-meta {
max-width: 60ch;
}
.why-panel.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition:
opacity 650ms var(--ease-out),
transform 800ms var(--ease-out),
visibility 0s linear 0s;
}
.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); }
@media (prefers-reduced-motion: reduce) {
.why-panel,
.why-panel.is-active {
transition: none;
transform: none;
}
}
@media (max-width: 900px) {
.why-layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--spacing-md);
}
/* Sticky horizontal tab strip under the 54px site header */
.why-left {
position: sticky;
top: 54px;
z-index: 10;
min-width: 0;
padding: var(--spacing-xs) 0;
background: oklch(96% 0.005 350 / 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--color-mist);
gap: 0;
/* Horizontal edge fade signals scrollable content */
mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 24px), transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 24px), transparent);
}
.why-tabs {
flex-direction: row;
flex-wrap: nowrap;
gap: 4px;
min-width: 0;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
padding: 0 var(--spacing-sm);
}
.why-tabs::-webkit-scrollbar {
display: none;
}
.why-tabs li + li {
border-top: 0;
}
.why-tab {
display: inline-flex;
grid-template-columns: none;
align-items: center;
gap: 6px;
width: auto;
padding: 7px 12px;
border: 0;
border-radius: 100px;
scroll-snap-align: center;
white-space: nowrap;
}
.why-tab-label {
font-size: 0.8125rem;
font-weight: 500;
}
.why-tab-num {
font-size: 0.5625rem;
letter-spacing: 0.1em;
}
.why-tab.is-active {
background: var(--color-ink);
color: var(--color-paper);
}
.why-tab.is-active .why-tab-label,
.why-tab.is-active .why-tab-num {
color: var(--color-paper);
}
/* Vertical progress stripe is meaningless on a horizontal strip */
.why-tab-progress {
display: none;
}
.why-panels {
padding: var(--spacing-md);
min-height: auto;
border-radius: 8px;
}
}
/* ============================================
WHY — per-panel visuals + auto-rotation
============================================ */
.why-tab-progress {
position: absolute;
left: -2px;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-accent);
transform-origin: top;
transform: scaleY(0);
pointer-events: none;
opacity: 0;
transition: opacity 220ms var(--ease-out);
}
.why-tab { position: relative; }
/* Active tab always shows the accent column. When cycling, the column
fills from top to bottom over the cycle window. When not cycling
(user paused or clicked), it stays full-height so the active state
is unambiguous. */
.why-tab.is-active .why-tab-progress {
opacity: 1;
transform: scaleY(1);
}
.why-tab.is-active.is-cycling .why-tab-progress {
animation: whyTabProgress var(--why-cycle-ms, 7000ms) linear forwards;
}
@keyframes whyTabProgress {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
.why-tab.is-active.is-cycling .why-tab-progress {
animation: none;
transform: scaleY(1);
}
}
/* Visual frame — common base */
.why-visual {
background: transparent;
border: 0;
padding: 0;
margin-bottom: var(--spacing-md);
min-height: 0;
display: flex;
align-items: stretch;
position: relative;
overflow: hidden;
}
/* ─ Panel 01: Generic vs PRODUCT.md ─ */
.why-visual--compare {
gap: var(--spacing-md);
}
.why-compare-card {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.why-compare-label {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-ash);
}
.why-slop-card {
flex: 1;
background: linear-gradient(135deg, oklch(35% 0.14 280), oklch(55% 0.18 220));
border-radius: 10px;
padding: 14px;
color: white;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow: 0 20px 40px oklch(40% 0.14 270 / 0.25);
}
.why-slop-pill {
font-family: 'Inter', system-ui, sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
background: rgba(255, 255, 255, 0.2);
padding: 2px 6px;
border-radius: 999px;
align-self: flex-start;
}
.why-slop-title {
font-family: 'Inter', system-ui, sans-serif;
font-size: 14px;
font-weight: 700;
background: linear-gradient(135deg, #fff, #c4b5fd);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1.1;
}
.why-slop-line {
height: 4px;
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
}
.why-slop-line--short { width: 60%; }
.why-slop-cta {
font-family: 'Inter', system-ui, sans-serif;
font-size: 10px;
font-weight: 600;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 6px;
align-self: flex-start;
margin-top: auto;
}
.why-impeccable-card {
flex: 1;
background: var(--color-cream);
border: 1px solid var(--color-mist);
padding: 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.why-impeccable-kicker {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent);
}
.why-impeccable-title {
font-family: var(--font-display);
font-size: 22px;
line-height: 1.05;
color: var(--color-ink);
}
.why-impeccable-title em {
font-style: italic;
color: var(--color-accent);
}
.why-impeccable-line {
height: 4px;
background: var(--color-mist);
border-radius: 2px;
}
.why-impeccable-line--short { width: 55%; }
.why-impeccable-cta {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink);
border-bottom: 1.5px solid var(--color-ink);
align-self: flex-start;
margin-top: auto;
padding-bottom: 3px;
}
/* ─ Panel 02: Brand vs Product registers ─ */
.why-visual--registers {
gap: var(--spacing-md);
}
.why-register {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.why-register-label {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent);
}
.why-register-mock {
flex: 1;
border-radius: 6px;
padding: 18px;
display: flex;
flex-direction: column;
justify-content: center;
}
.why-register-mock--brand {
background: var(--color-cream);
border: 1px solid var(--color-mist);
gap: 12px;
}
.why-brand-hero-mono {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-ash);
}
.why-brand-hero-title {
font-family: var(--font-display);
font-size: 28px;
line-height: 1;
color: var(--color-ink);
letter-spacing: -0.02em;
}
.why-brand-hero-title em {
font-style: italic;
color: var(--color-accent);
}
.why-register-mock--product {
background: var(--color-paper);
border: 1px solid var(--color-mist);
padding: 0;
gap: 0;
}
.why-product-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 14px;
border-bottom: 1px solid var(--color-mist);
}
.why-product-row:last-child { border-bottom: 0; }
.why-product-k {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ash);
}
.why-product-v {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--color-ink);
}
/* ─ Panel 03: Terminal output ─ */
.why-visual--terminal,
.why-visual--ci {
padding: 0;
background: oklch(12% 0 0);
border-color: oklch(18% 0 0);
}
.why-terminal {
width: 100%;
display: flex;
flex-direction: column;
}
.why-terminal-header {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
border-bottom: 1px solid oklch(20% 0 0);
background: oklch(14% 0 0);
border-radius: 7px 7px 0 0;
}
.why-terminal-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: oklch(35% 0 0);
}
.why-terminal-title {
font-family: var(--font-mono);
font-size: 11px;
color: oklch(65% 0 0);
margin-left: 10px;
}
.why-terminal-body {
padding: 14px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.7;
color: oklch(80% 0 0);
}
.why-terminal-line { white-space: pre; }
.why-terminal-line--prompt { color: oklch(90% 0 0); }
.why-terminal-prompt { color: var(--color-accent); margin-right: 4px; }
.why-terminal-ok { color: oklch(75% 0.15 145); }
.why-terminal-arrow { color: var(--color-accent); }
.why-terminal-line--hint {
margin-top: 6px;
color: oklch(90% 0 0);
}
/* ─ Panel 04: Harness grid ─ */
.why-visual--harnesses {
flex-direction: column;
padding: 16px;
gap: 14px;
}
.why-prompt-bar {
font-family: var(--font-mono);
font-size: 12px;
color: var(--color-ink);
background: var(--color-cream);
border: 1px solid var(--color-mist);
border-radius: 4px;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 2px;
}
.why-prompt-slash {
color: var(--color-accent);
margin-right: 4px;
font-weight: 500;
}
.why-prompt-caret {
display: inline-block;
width: 7px;
height: 14px;
background: var(--color-accent);
margin-left: 2px;
animation: whyCaret 1.1s steps(1) infinite;
}
@keyframes whyCaret {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
.why-harness-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
flex: 1;
}
.why-harness {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 4px;
background: var(--color-cream);
border: 1px solid var(--color-mist);
border-radius: 6px;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-charcoal);
}
.why-harness img {
width: 24px;
height: 24px;
object-fit: contain;
opacity: 0.85;
}
/* ─ Panel 05: DESIGN.md file ─ */
.why-visual--designmd {
padding: 0;
}
.why-designmd-file {
flex: 1;
display: flex;
flex-direction: column;
background: var(--color-paper);
border-radius: 7px;
}
.why-designmd-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid var(--color-mist);
background: var(--color-cream);
border-radius: 7px 7px 0 0;
}
.why-designmd-filename {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--color-ink);
}
.why-designmd-badge {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-accent);
background: var(--color-accent-dim);
border: 1px solid var(--color-accent-soft);
padding: 3px 8px;
border-radius: 999px;
}
.why-designmd-sections {
list-style: none;
padding: 10px 14px;
margin: 0;
display: flex;
flex-direction: column;
font-family: var(--font-mono);
font-size: 12px;
line-height: 2;
color: var(--color-ink);
}
.why-designmd-num {
color: var(--color-accent);
margin-right: 8px;
font-weight: 500;
}
.why-designmd-footer {
padding: 10px 14px;
border-top: 1px solid var(--color-mist);
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--color-charcoal);
}
/* ─ Panel 06: CI output ─ */
.why-ci-window {
width: 100%;
display: flex;
flex-direction: column;
}
.why-ci-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid oklch(20% 0 0);
background: oklch(14% 0 0);
border-radius: 7px 7px 0 0;
}
.why-ci-branch {
font-family: var(--font-mono);
font-size: 11px;
color: oklch(75% 0 0);
}
.why-ci-status {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 999px;
}
.why-ci-status--fail {
color: oklch(78% 0.18 25);
background: oklch(30% 0.15 25 / 0.3);
}
.why-ci-body {
padding: 14px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.8;
color: oklch(80% 0 0);
}
.why-ci-line { color: oklch(85% 0 0); }
.why-ci-cmd { color: var(--color-accent); margin-right: 6px; }
.why-ci-issue {
display: flex;
align-items: baseline;
gap: 10px;
padding-left: 4px;
color: oklch(85% 0 0);
}
.why-ci-issue code {
background: transparent;
color: oklch(70% 0.12 220);
padding: 0;
font-size: 1em;
}
.why-ci-x { color: oklch(75% 0.18 25); }
.why-ci-summary {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid oklch(20% 0 0);
font-weight: 500;
color: oklch(85% 0 0);
}
/* ─ Panel 07: Chrome extension ─ */
.why-visual--extension {
padding: 0;
background: var(--color-cream);
}
.why-browser {
flex: 1;
display: flex;
flex-direction: column;
background: var(--color-paper);
border-radius: 7px;
overflow: hidden;
}
.why-browser-chrome {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: var(--color-mist);
border-bottom: 1px solid oklch(86% 0 0);
}
.why-browser-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: oklch(75% 0 0);
}
.why-browser-url {
margin-left: 12px;
padding: 3px 10px;
background: var(--color-paper);
border-radius: 4px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--color-charcoal);
flex: 1;
}
.why-browser-body {
flex: 1;
position: relative;
padding: 20px;
background:
linear-gradient(var(--color-cream), var(--color-cream)) padding-box,
repeating-linear-gradient(90deg, transparent 0 60px, var(--color-mist) 60px 61px);
}
.why-ext-popup {
position: absolute;
top: 16px;
right: 16px;
width: 180px;
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 6px;
box-shadow: 0 8px 24px oklch(0% 0 0 / 0.12);
overflow: hidden;
z-index: 2;
}
.why-ext-popup-header {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink);
padding: 8px 12px;
background: var(--color-cream);
border-bottom: 1px solid var(--color-mist);
}
.why-ext-popup-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
font-size: 11px;
color: var(--color-charcoal);
border-bottom: 1px solid var(--color-mist);
}
.why-ext-popup-row:last-child { border-bottom: 0; }
.why-ext-sev {
color: var(--color-accent);
font-weight: 600;
}
.why-ext-overlay-a,
.why-ext-overlay-b {
position: absolute;
border: 2px solid var(--color-accent);
border-radius: 4px;
pointer-events: none;
}
.why-ext-overlay-a {
left: 20px;
top: 30px;
width: 42%;
height: 36px;
}
.why-ext-overlay-b {
left: 20px;
bottom: 24px;
width: 30%;
height: 30px;
}
/* Mobile */
@media (max-width: 700px) {
.why-visual { min-height: 200px; }
.why-harness-grid { grid-template-columns: repeat(3, 1fr); }
.why-compare-card, .why-register { gap: 8px; }
}
/* ============================================
WHY — updated visuals (panels 1, 3, 4, 5)
============================================ */
/* ─ Panel 01: PRODUCT.md file view ─ */
.why-visual--productmd {
padding: 0;
background: transparent;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--spacing-lg);
align-items: start;
}
@media (max-width: 780px) {
.why-visual--productmd {
grid-template-columns: 1fr;
}
}
.why-productmd-file {
display: flex;
flex-direction: column;
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 8px;
overflow: hidden;
min-width: 0;
}
.why-productmd-commands {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 4px;
min-width: 160px;
}
.why-productmd-commands-label {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-ash);
margin-bottom: 4px;
}
.why-productmd-commands code {
font-family: var(--font-mono);
font-size: 12px;
color: var(--color-ink);
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 5px;
padding: 5px 9px;
white-space: nowrap;
}
.why-productmd-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--color-mist);
background: var(--color-cream);
border-radius: 7px 7px 0 0;
}
.why-productmd-filename {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--color-ink);
}
.why-productmd-status {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-accent);
}
.why-productmd-body {
padding: 6px 14px;
display: flex;
flex-direction: column;
}
.why-productmd-field {
display: grid;
grid-template-columns: 110px 1fr;
gap: 16px;
align-items: baseline;
padding: 9px 0;
border-bottom: 1px dashed var(--color-mist);
}
.why-productmd-field:last-child { border-bottom: 0; }
.why-productmd-k {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ash);
}
.why-productmd-v {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.5;
color: var(--color-ink);
}
.why-productmd-footer {
padding: 10px 14px;
border-top: 1px solid var(--color-mist);
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
line-height: 1.4;
color: var(--color-charcoal);
display: flex;
align-items: center;
gap: 8px;
background: var(--color-cream);
border-radius: 0 0 7px 7px;
}
.why-productmd-footer-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent);
animation: whyPulse 2.4s ease-out infinite;
flex-shrink: 0;
}
@keyframes whyPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.6); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
.why-productmd-footer-dot { animation: none; }
}
/* ─ Panel 03: path + meta additions ─ */
.why-terminal-path {
color: oklch(88% 0.05 220);
}
.why-terminal-meta {
color: oklch(58% 0 0);
font-size: 0.9em;
}
/* ─ Panel 04: waterfall vs unified surface ─ */
.why-visual--flow {
flex-direction: column;
gap: 14px;
padding: 16px;
}
.why-flow-row {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-height: 0;
}
.why-flow-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-ash);
}
.why-flow-row--old .why-flow-label { color: var(--color-ash); }
.why-flow-row--new .why-flow-label { color: var(--color-accent); }
.why-flow-steps {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
opacity: 0.5;
}
.why-flow-step {
font-family: var(--font-body);
font-size: 12px;
color: var(--color-charcoal);
padding: 4px 10px;
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 3px;
text-decoration: line-through;
text-decoration-color: var(--color-ash);
}
.why-flow-arrow {
color: var(--color-ash);
font-size: 12px;
}
.why-flow-pair {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: stretch;
}
.why-flow-tile {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 6px;
min-width: 0;
}
.why-flow-tile--agent {
background: var(--color-ink);
border-color: var(--color-ink);
color: var(--color-paper);
}
.why-flow-tile--browser {
background: var(--color-cream);
border-color: var(--color-mist);
}
.why-flow-tile-kicker {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-accent);
}
.why-flow-tile--agent .why-flow-tile-kicker { color: oklch(72% 0.15 350); }
.why-flow-tile-title {
font-family: var(--font-display);
font-style: italic;
font-size: 20px;
line-height: 1.1;
color: inherit;
}
.why-flow-tile--browser .why-flow-tile-title { color: var(--color-ink); }
.why-flow-tile-meta {
font-family: var(--font-body);
font-size: 12px;
line-height: 1.4;
color: inherit;
opacity: 0.75;
}
.why-flow-tile--browser .why-flow-tile-meta { color: var(--color-charcoal); opacity: 1; }
.why-flow-plus {
align-self: center;
font-family: var(--font-display);
font-size: 28px;
color: var(--color-accent);
font-weight: 300;
padding: 0 4px;
}
.why-flow-surface-foot {
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--color-charcoal);
padding: 0 4px;
margin-top: 6px;
}
/* ─ Panel 05: rich DESIGN.md tiles ─ */
.why-visual--designmd-v2 {
flex-direction: column;
gap: 12px;
padding: 12px;
background: var(--color-cream);
}
.why-dm-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2px;
}
.why-dm-filename {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--color-ink);
}
.why-dm-badge {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-accent);
background: var(--color-accent-dim);
border: 1px solid var(--color-accent-soft);
padding: 3px 8px;
border-radius: 999px;
}
.why-dm-grid {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 8px;
flex: 1;
min-height: 0;
}
.why-dm-tile {
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 6px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
overflow: hidden;
}
.why-dm-tile-meta {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ash);
}
.why-dm-tile-meta span:first-child { color: var(--color-ink); }
.why-dm-tile--color { grid-row: 1 / 3; }
.why-dm-color-hero {
flex: 1;
background: var(--c);
border-radius: 4px;
min-height: 40px;
}
.why-dm-color-ramp {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 2px;
height: 16px;
}
.why-dm-color-ramp span {
border-radius: 2px;
}
.why-dm-tile--type {
align-items: flex-start;
}
.why-dm-type-specimen {
font-family: var(--font-display);
font-style: italic;
font-size: 48px;
line-height: 0.9;
color: var(--color-ink);
flex: 1;
display: flex;
align-items: center;
}
.why-dm-type-specimen--sans {
font-family: var(--font-body);
font-style: normal;
font-weight: 400;
}
.why-dm-type-family {
font-family: var(--font-mono);
font-size: 10px;
color: var(--color-charcoal);
}
.why-dm-tile--components {
justify-content: space-between;
}
.why-dm-comp-row {
display: flex;
gap: 6px;
}
.why-dm-comp-chip {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
padding: 5px 10px;
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 3px;
color: var(--color-ink);
}
.why-dm-comp-chip--primary {
background: var(--color-ink);
color: var(--color-paper);
border-color: var(--color-ink);
}
.why-dm-comp-input {
font-family: var(--font-body);
font-size: 11px;
padding: 6px 10px;
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 4px;
color: var(--color-ash);
}
.why-dm-foot {
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--color-charcoal);
padding: 0 2px;
}
@media (max-width: 700px) {
.why-dm-grid {
grid-template-columns: 1fr 1fr;
}
.why-dm-tile--color { grid-row: 1 / 3; }
.why-flow-step { font-size: 11px; padding: 4px 8px; }
}
/* ============================================
WHY panel 04 — split diagonal (canvas vs. agent+browser)
Carbonized from live session afb9794d.
============================================ */
.why-visual--v2 {
padding: 0;
gap: 0;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
}
.why-visual--v2 .v2-side {
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.why-visual--v2 .v2-side--old {
background: oklch(94% 0 0);
position: relative;
}
.why-visual--v2 .v2-side--old::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, transparent 0 24px, oklch(0% 0 0 / 0.04) 24px 25px);
pointer-events: none;
}
.why-visual--v2 .v2-side--new {
background: var(--color-cream);
border-left: 1px solid var(--color-mist);
}
.why-visual--v2 .v2-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-ash);
z-index: 1;
}
.why-visual--v2 .v2-side--new .v2-label { color: var(--color-accent); }
.why-visual--v2 .v2-canvas-chrome {
display: flex;
gap: 6px;
align-items: center;
padding-bottom: 8px;
border-bottom: 1px solid oklch(86% 0 0);
z-index: 1;
}
.why-visual--v2 .v2-canvas-tool {
font-family: var(--font-mono);
font-size: 9px;
color: oklch(45% 0 0);
background: var(--color-paper);
padding: 3px 7px;
border-radius: 3px;
border: 1px solid oklch(86% 0 0);
}
.why-visual--v2 .v2-canvas-art {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
z-index: 1;
}
.why-visual--v2 .v2-canvas-file {
font-family: var(--font-mono);
font-size: 10px;
color: oklch(40% 0 0);
}
.why-visual--v2 .v2-canvas-mock {
width: 100%;
max-width: 120px;
height: 60px;
background: var(--color-paper);
border: 1px solid oklch(82% 0 0);
border-radius: 4px;
box-shadow: 0 4px 16px oklch(0% 0 0 / 0.08);
}
.why-visual--v2 .v2-canvas-stamp {
font-family: var(--font-display);
font-style: italic;
font-size: 11px;
color: oklch(50% 0 0);
}
.why-visual--v2 .v2-new-surface {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
}
.why-visual--v2 .v2-new-line {
font-family: var(--font-mono);
font-size: 12px;
color: var(--color-ink);
background: var(--color-paper);
border: 1px solid var(--color-mist);
padding: 8px 12px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.why-visual--v2 .v2-new-line::before {
content: "/";
color: var(--color-accent);
font-weight: 500;
}
.why-visual--v2 .v2-new-browser {
flex: 1;
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 60px;
}
.why-visual--v2 .v2-new-browser-dots {
display: flex;
gap: 4px;
padding: 6px 8px;
background: var(--color-mist);
}
.why-visual--v2 .v2-new-browser-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: oklch(78% 0 0);
}
.why-visual--v2 .v2-new-browser-frame {
flex: 1;
background: linear-gradient(0deg, var(--color-cream) 0, transparent 40%), var(--color-paper);
position: relative;
}
.why-visual--v2 .v2-new-browser-frame::after {
content: "";
position: absolute;
left: 10px;
top: 10px;
width: 40%;
height: 8px;
border: 1.5px solid var(--color-accent);
border-radius: 3px;
}
.why-visual--v2 .v2-new-bar {
align-self: center;
background: var(--color-ink);
color: var(--color-paper);
padding: 4px 10px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: -2px;
}
/* ─ Panel: Visualize, then ship: generated inputs plus live build ─ */
.why-visual--vizfirst {
display: grid;
grid-template-columns: 0.88fr 0.68fr 1.18fr;
gap: clamp(10px, 1.5vw, 18px);
align-items: stretch;
padding: 0;
overflow: visible;
}
.why-vz-plate {
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.why-vz-plate-kind {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent);
}
.why-vz-plate-frame {
display: block;
background: var(--color-cream);
border: 1px solid var(--color-mist);
overflow: hidden;
height: 250px;
transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.why-vz-plate:hover .why-vz-plate-frame {
border-color: var(--color-accent);
transform: translateY(-2px);
}
.why-vz-plate-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.why-vz-plate--live .why-vz-plate-frame img {
object-position: top left;
}
@media (max-width: 720px) {
.why-visual--vizfirst {
grid-template-columns: 1fr;
gap: 12px;
}
.why-vz-plate-frame {
height: 240px;
}
}
/* ============================================
LANGUAGE section — Palette / Periodic tabs
============================================ */
.language-intro-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--spacing-lg);
}
.language-intro-row .section-lead {
margin: 0;
flex: 1;
}
.language-view-toggle {
display: inline-flex;
gap: 2px;
padding: 3px;
background: var(--color-mist);
border-radius: 999px;
flex-shrink: 0;
}
.language-view-tab {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 8px 18px;
background: transparent;
border: 0;
border-radius: 999px;
color: var(--color-ash);
cursor: pointer;
transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.language-view-tab:hover { color: var(--color-ink); }
.language-view-tab.is-active {
background: var(--color-paper);
color: var(--color-ink);
box-shadow: 0 1px 3px oklch(0% 0 0 / 0.08);
}
.language-view-tab:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.language-view { display: none; }
.language-view.is-active { display: block; }
@media (max-width: 680px) {
.language-intro-row {
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================
ANTIDOTE — two-column editorial layout
============================================ */
.antidote-row--split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
gap: var(--spacing-2xl);
align-items: start;
}
.antidote-intro {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
max-width: 60ch;
}
.antidote-intro .section-lead {
margin-bottom: 0;
}
.antidote-stats {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin: 0;
padding: var(--spacing-md) 0 0;
border-top: 1px solid var(--color-mist);
}
.antidote-stat {
display: grid;
grid-template-columns: 80px 1fr;
gap: var(--spacing-md);
align-items: baseline;
padding: var(--spacing-sm) 0;
border-bottom: 1px dashed var(--color-mist);
}
.antidote-stat:last-child { border-bottom: 0; }
.antidote-stat dt {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 3rem;
line-height: 1;
color: var(--color-accent);
letter-spacing: -0.02em;
}
.antidote-stat dd strong {
font-weight: 600;
color: var(--color-ink);
}
.antidote-stat dd {
margin: 0;
font-family: var(--font-body);
font-size: 0.9375rem;
line-height: 1.5;
color: var(--color-charcoal);
}
.antidote-stat dd code {
font-family: var(--font-mono);
font-size: 0.875em;
background: var(--color-mist);
padding: 1px 6px;
border-radius: 3px;
color: var(--color-ink);
}
.antidote-catalog-link {
font-family: var(--font-body);
font-weight: 500;
font-size: 0.875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-ink);
border-bottom: 2px solid var(--color-ink);
padding-bottom: 4px;
text-decoration: none;
align-self: flex-start;
transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.antidote-catalog-link:hover {
color: var(--color-accent);
border-color: var(--color-accent);
}
@media (max-width: 900px) {
.antidote-row--split {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
}
/* ============================================
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-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-pair-figure {
position: relative;
margin: 0;
min-height: 140px;
border-radius: 8px;
background: var(--color-paper);
border: 1px solid var(--color-mist);
overflow: hidden;
transition: box-shadow 260ms var(--ease-out);
display: flex;
align-items: center;
justify-content: center;
padding: 20px 18px;
}
.antidote-pair-figure--before {
background: oklch(98% 0 0);
}
.antidote-pair-figure--after {
background: var(--color-cream);
}
.ab-slot {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.antidote-pair-figure img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.antidote-pair-figure figcaption {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 3px;
background: oklch(100% 0 0 / 0.9);
color: var(--color-ink);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.antidote-pair-figure--before figcaption { color: oklch(35% 0.15 25); background: oklch(98% 0.04 25 / 0.9); }
.antidote-pair-figure--after figcaption { color: oklch(45% 0.18 145); background: oklch(96% 0.04 145 / 0.9); }
.antidote-pair:hover .antidote-pair-figure {
box-shadow: 0 14px 28px oklch(0% 0 0 / 0.1);
}
.antidote-pair-caption {
display: flex;
align-items: baseline;
gap: var(--spacing-sm);
padding: 0 2px;
}
.antidote-pair-num {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent);
}
.antidote-pair-name {
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;
}
/* 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;
gap: var(--spacing-lg);
padding-top: var(--spacing-md);
border-top: 1px solid var(--color-mist);
flex-wrap: wrap;
}
.antidote-foot-meta {
flex: 1;
min-width: 0;
font-family: var(--font-body);
font-style: italic;
font-size: 0.875rem;
line-height: 1.55;
color: var(--color-charcoal);
}
.antidote-foot .antidote-suggest-link {
font-size: 0.8125rem;
color: var(--color-ash);
text-decoration: none;
white-space: nowrap;
}
.antidote-foot .antidote-suggest-link:hover {
color: var(--color-accent);
text-decoration: underline;
}
@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);
}
}
/* ============================================
WHY — Anti-patterns, caught (tab 08 visual)
============================================ */
.why-visual--antidote {
display: grid;
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;
}
.gallery-stack-link {
display: inline-flex;
align-self: center;
margin-top: var(--spacing-sm);
font-family: var(--font-body);
font-size: 0.82rem;
color: var(--color-ink);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--color-accent);
transition: color 0.12s ease;
}
.gallery-stack-link:hover { color: var(--color-accent); }
@media (max-width: 860px) {
.why-visual--antidote { grid-template-columns: 1fr; }
}
Reference in New Issue View Git Blame Copy Permalink