mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 23:56:29 +03:00
373039a837
* Give DESIGN.md a real type ramp so the design hook stops crying wolf The design hook fired on nearly every CSS file we touched. The cause was DESIGN.md's typography block: it declared seven named roles rather than a scale, and two of those roles used clamp(), which the extractor skipped outright. That left an allowlist of five sizes standing against the 86 distinct font sizes actually in use, so design-system-font-size flagged roughly 500 declarations. Editing any .astro page made it worse, because the companion-stylesheet scan re-reported the whole backlog. Extractor (cli/engine/design-system.mjs): - Read a typography.scale map as the enumerated ramp. - Read both clamp() endpoints as allowed sizes. These stay additive on purpose: clamp endpoints alone cannot switch the rule on, because a fully fluid system enumerates no discrete ramp and inferring one from its endpoints would flag every intermediate size. The existing abstention test still passes, and three new tests cover the added behavior. DESIGN.md: - Document a 19-step ramp, 8px through 72px at a 16px root. - Snap the five discrete role sizes onto ramp steps. This also fixes real drift. DESIGN.md claims to mirror kinpaku-tokens.css verbatim, but wordmark was 1.15rem in the CSS against 1.3rem documented, with tracking at 0.42em against 0.15em. Both are re-synced. Standardization, 64 declarations: - Six near-identical steps between 13.7px and 15.4px collapse onto 14 and 15. - .foundation-card-label, .designing-lane-mock-title and .designing-iterate-name each existed at two different sizes in two files. Now unified. - The wordmark rendered at four sizes (20.8, 18.4, 17, 16.8px). Now 18px, plus one deliberate smaller nav variant. Exemptions, for designs that are foreign on purpose: the antipattern-example fixtures, the neo-mirai case-study build, the periodic-table cell annotations in framework-viz.js (5 to 7px diagram geometry sitting at 2 to 3px offsets), and the .why-slop-* before-state card's Inter and gradient text. Verified by computed style across ten rendered pages: every element lands on a ramp step except clamp() values mid-interpolation, which is what fluid means. Full test suite and build validators pass. Generated provider output is deliberately left out; the sync workflow owns it. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Validate clamp() endpoints in usage, not just when reading DESIGN.md Reading clamp endpoints as documented steps without also checking them in source left an asymmetry: `isAllowedFontSizeRaw` returned true for anything failing the px/rem literal test, so `clamp(99rem, 1vw, 200rem)` passed. That is how `.ptable-symbol` at `clamp(1.45rem, 1.8vw, 1.8rem)` stayed invisible until someone measured computed styles, which is not a check the hook can run. Fluid values are now judged on their min and max. The viewport term interpolates between them and is never a fixed step, so it is left alone. Endpoints that cannot be resolved, such as var() or calc() or em, abstain rather than guess. Findings name the offending endpoint and use it as the ignore-value, because the whole clamp string is not actionable on its own. Turning the check on surfaced 22 fluid declarations that had never been looked at. Three used hero sizes above the ramp's 72px cap (80, 83.2 and 88px) alongside the display role's documented 89.6px max, so the top of the ramp was genuinely incomplete. Added the 80 and 88 steps, which gives the display end consistent 8px increments instead of 48/56/64/72 plus an orphan at 89.6, and fixes two declarations outright. The other 20 are snapped by a stated rule: nearest step, ties toward the smaller step, endpoints already matching a documented fluid role left as-is, and where nearest-step would make a breakpoint override meet or exceed its base, the next smaller step so the override still reduces. That last case applies once, to .designing-page-title. Also narrows the framework-viz.js waiver. The periodic-table cell annotations now carry two `impeccable-disable-line` comments naming the reason, instead of a config entry wildcarding the whole file for the rule. Inline waivers travel with the code and cannot silence future drift elsewhere in that file. Verified at 420px, 900px and 1600px across seven pages. The pinned ends are fully on-ramp; the only off-ramp values at 900px are the vw term mid-interpolation, which is what fluid means. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Address review: wordmark tracking picked the wrong side, stale ramp count Two review findings, both fair. Wordmark tracking (greptile, bugbot). This PR moved DESIGN.md's wordmark letterSpacing from 0.15em to 0.42em on the grounds that DESIGN.md claims to mirror kinpaku-tokens.css and the token read 0.42em. That was the wrong side to trust. `--ks-type-wordmark-track` has exactly one consumer, design-system.css:570, which is the specimen page. Every production lockup (.ks-wordmark, .kinpaku-chrome .site-header-brand-name, .footer-logo) hardcodes 0.15em, so 0.15em is what every visitor actually sees and what DESIGN.md already documented correctly before this PR touched it. Reverted the doc to 0.15em and moved the token to 0.15em as well, so the specimen now renders the same lockup as production instead of a wider one nothing else uses. Verified by computed style: header and specimen both report 18px with 2.7px tracking. No production visual change. Stale ramp count (copilot). The sidecar described an "18-step ramp, 8px through 72px". It went stale twice inside this PR, once when the 8 step was added and again when 80 and 88 were added for the hero display sizes. It is 21 steps, 8px through 88px. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Strip !important from the font-size ignore value Follow-on from the waiver wiring in the hook branch. The ignoreValue is what a `hooks ignore-value` waiver has to match, and `font-size: 1.4rem !important` emitted `1.4rem !important` while a plain declaration emitted `1.4rem`. Once font-size is a direct-value rule, that means the same size needs two different waivers depending on whether it carries a priority marker. font-family already strips the marker before matching, and there is a test for that. font-size now does the same. The snippet still shows the declaration as authored. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Have the wordmark rules consume their tokens instead of copying the values Follow-up to the tracking fix, and the residual half of what the reviewers were pointing at. `.ks-wordmark` and the kinpaku chrome lockup each repeated `1.125rem` and `0.15em` literally rather than reading `--ks-type-wordmark-size` and `--ks-type-wordmark-track`. That duplication is exactly how the token drifted to 0.42em while every production lockup stayed at 0.15em and nobody noticed, which is the confusion that started this thread. The values already agree, so this is a no-op visually and is verified as such: computed styles across the home, design-system, docs and changelog pages all still report 18px with 2.7px tracking. What changes is that there is now one place to edit, so the next tracking change cannot silently apply to the specimen page alone. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
3464 lines
73 KiB
CSS
3464 lines
73 KiB
CSS
/* 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: var(--color-accent); }
|
|
.magazine-spread[data-category="evaluate"] { --spread-accent: var(--ks-patina); }
|
|
.magazine-spread[data-category="refine"] { --spread-accent: var(--color-accent); }
|
|
.magazine-spread[data-category="simplify"] { --spread-accent: var(--ks-kinpaku-rich); }
|
|
.magazine-spread[data-category="harden"] { --spread-accent: var(--ks-patina); }
|
|
.magazine-spread[data-category="system"] { --spread-accent: var(--color-ash); }
|
|
|
|
.magazine-container {
|
|
position: relative;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
grid-template-columns: clamp(172px, 21vw, 200px) minmax(0, 1fr);
|
|
gap: var(--spacing-lg);
|
|
align-items: start;
|
|
overflow: hidden;
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
@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.5rem;
|
|
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;
|
|
}
|
|
|
|
.demo-placeholder {
|
|
padding: var(--spacing-lg);
|
|
color: var(--color-ash);
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
|
|
/* (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, var(--ks-patina));
|
|
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: 1rem;
|
|
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: 1.25rem;
|
|
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);
|
|
/* Lines stay `pre` (a terminal keeps its alignment); when they outrun the
|
|
frame on narrow viewports, scroll like a real terminal instead of clipping
|
|
mid-word. No scrollbar chrome — it reads as terminal output, not a widget. */
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
.why-terminal-body::-webkit-scrollbar { display: none; }
|
|
.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: var(--ks-patina); }
|
|
.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: var(--ks-vermilion);
|
|
background: oklch(58% 0.15 35 / 0.16);
|
|
}
|
|
.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: var(--ks-patina);
|
|
padding: 0;
|
|
font-size: 1em;
|
|
}
|
|
.why-ci-x { color: var(--ks-vermilion); }
|
|
.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: var(--ks-patina);
|
|
}
|
|
.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: var(--ks-patina); }
|
|
.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: var(--ks-vermilion); background: oklch(58% 0.15 35 / 0.1); }
|
|
.antidote-pair-figure--after figcaption { color: var(--ks-patina); background: oklch(70% 0.12 188 / 0.1); }
|
|
.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.25rem;
|
|
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: var(--ks-patina);
|
|
}
|
|
|
|
/* 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: 3rem;
|
|
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; }
|
|
}
|