mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
c8e973b324
* fix(home): command-wheel contrast, slop copy, line-length Address P1/P2/P3 findings from /impeccable critique of the homepage: - Command wheel (The Language): off-center command names floored at ~1.43:1 contrast were illegible (WCAG 1.4.3 fail) and hid most of the 23-command vocabulary. Raise the fisheye opacity floor 0.25 -> 0.62, MIN_SCALE 0.35 -> 0.52, and lift the base color from --ks-text-muted to --ks-text. Off-center now measures >=4.59:1; full list stays scannable while gold + size + weight still carry focus. - Slop section copy: rewrite all 7 discipline cards off the uniform "No X. No Y. No Z." triad into varied cadence with positives, and lead the section with what Impeccable does instead of the "Skills can't..." negation pivot. Drops the en-dash joiners too. - Line length: cap .downloads-rebuild-note (was unbounded, ~102ch) and tighten the homepage .section-lead 68ch -> 62ch (rendered ~86 actual chars/line). The diagonal plinth ramp on the slop grid is intentionally kept per design preference. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(home): de-warm and brighten the text ramp Warmth now lives only in the gold accents and surfaces, not the type. Body, headings, and the secondary tiers read crisp on lacquer instead of mushing into the warm floor: - --ks-champagne 84% .035 82 -> 91% .006 90 (headings/strong, now neutral; token name kept for compatibility) - --ks-text 81% .03 82 -> 88% .008 90 (body) - --ks-text-muted / -faint / -mute-deep lifted and de-warmed to match DESIGN.md frontmatter + prose synced to the new values. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(home): outlined testimonials + cleaner hero boundary Testimonials: - Flatten the double container: drop the t-plinth shelf wrapper (markup + CSS); the marquee sits directly in the section and carries its inset. - Outlined cards: no fill, 1px solid neutral border (oklch .64 0 0 / .22), no dead drop-shadow. Removes the mushy gray-on-gray blend and the stacked dotted-divider + gold-hairline chrome. - Section has no background of its own (rides the body lacquer gradient) and no top padding, so cards sit right under the hero divider. Hero: - Drop the bottom fade and the top nav scrim; the kintsugi art runs at full strength. A 1px neutral border-bottom (matching the card border) marks the testimonials boundary instead of a wash. - "How it works" is the kit ghost link (white), not an outlined button. Foundation/slop cards: lift the surface 9% -> 15% so they read as raised specimen cards instead of vanishing into the ground. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(live): quieter, more refined picker chrome Gold is reserved for the brand mark and the active control instead of ringing every container. Applied to the homepage demo, /live-mode, and the real injected picker (skill/scripts/live-browser.js, rebuilt into the harness dirs): - Container: neutral 1px hairline + tight neutral shadow (was a 1.5px gold border + gold halo ring); radius 10px -> 8px. - Active toggle: crisp graphite pill with gold text (was a murky kinpaku-dim wash). - Internal control borders (action pill / input / count): neutral hairline (was a warm gold rule); configure-row controls share one 30px baseline. - Pick outline: crisp 1.5px line, no soft gold glow ring; tighter radius. - Demo browser chrome: small uniform neutral dots, neutral URL pill, slimmer bar; frame edge neutral hairline + tighter shadow that registers on dark. DESIGN.md "Live Mode Picker" spec + "Picker Is Brand Rule" updated. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(design): neutral default hairline (--ks-rule) The default border/divider token was a warm gold hairline, used ~200x as the site-wide default border — so every small label, pill, counter, card, and divider carried warmth. Redefine it neutral so borders read clean; gold stays where it signals. - --ks-rule oklch(58% 0.065 82 / 0.32) -> oklch(78% 0 0 / 0.16) - --ks-rule-strong (active/focus/brand borders) unchanged, still gold - GitHub star pill: explicit near-white border (oklch 92% 0 0 / 0.18) - DESIGN.md hairline mirror + prose synced Verified across home, /design-system, and /docs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(home): testimonials separator + visible star-pill border - Move the dotted accent to the bottom of the testimonials (neutral dots) as a deliberate separator into the slop section; drop the oversized bottom padding to 1em so cards sit near the separator. - Star-counter pill: solid oklch(80% 0 0) border. The previous near-white at 0.32 alpha rendered as faded mid-gray on the near-black pill; a solid light border reads as the intended white hairline. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(design): neutralize body text (--ks-text) Drop the last bit of warm chroma from the body text token; it still read slightly warm at 0.008 chroma. --ks-text oklch(88% 0.008 90) -> oklch(88% 0 0) (pure neutral) DESIGN.md mirror + prose synced. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(design): neutral text everywhere Zero the residual warm chroma across the rest of the text ramp so no text tier carries warmth (warmth lives only in gold accents + surfaces). - --ks-champagne 91% .006 90 -> 91% 0 0 - --ks-text-muted 72% .01 90 -> 72% 0 0 - --ks-text-faint 62% .008 90 -> 62% 0 0 - --ks-text-mute-deep 52% .008 90 -> 52% 0 0 (--ks-text was already neutralized.) DESIGN.md mirror + prose synced. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(home): crisp, neutral Desloppification section - Foundation card background: oklch(15% .004 95) -> oklch(15% 0 0) (neutral graphite) so cards read crisp, not warm. - Plinth hatch: kinpaku gold -> neutral (oklch 80% 0 0 / .07) on a neutral base; the gold hatch was washing the section champagne. - Remove the plinth bottom mask-fade so the pedestals end on a clean edge. Gold stays only on the card icons as the accent. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(home): drop the homepage warm-token overrides The homepage redefined --ks-rule, --ks-rule-strong, and --ks-muted to warm values locally (an old "busier surfaces" tweak), so homepage borders and secondary text stayed champagne even after the global de-warm. That's why the Desloppification cards still read warm. - Remove the --ks-rule / --ks-rule-strong overrides; inherit the global tokens (neutral default border, gold strong/active border). - Alias --ks-muted to the global --ks-text-muted (no divergent value); legacy code still reads the --ks-muted name. Result: all homepage borders + secondary text are neutral; gold stays on accents (icons, mark, CTAs, active/focus). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(design): canonical code tokens (inline + block) Code styling was all over the place: homepage inline code was gold-on-gold, the slop CLI was a one-off gold-on-raised-lacquer, downloads used a separate --card-cmd-* set, docs used yet another. Add one shared token set and point the canonical surfaces at it. New :root tokens: - --ks-code-fg / --ks-code-bg / --ks-code-radius (inline: neutral chip) - --ks-code-block-fg / -bg / -border / -radius (block/CLI: lacquer terminal) - --ks-code-cmd (code that's a command link) Migrated: homepage inline code (was gold -> neutral chip), slop-teaser-cli (the "weird color" -> neutral terminal), downloads-cmd, and the docs inline + fenced-block rules (now the token source of truth; block text also neutralized). Remaining pages (designing, changelog/faq, detector, case studies) swept next. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(design): sweep remaining pages onto code tokens Point the rest of the site's code rules at the shared code tokens so inline code and blocks are consistent everywhere: - Inline code (designing, changelog, faq): gold -> neutral chip (--ks-code-fg / --ks-code-bg). - Detector rule pills + table cells: code text -> --ks-code-fg. - Neon-mirai case-study code block -> --ks-code-block-* tokens. Command tags (the gold /command pills: spread-flow-cmd, docs-flow-cmd, designing-phase-cmd, why-ci-cmd, etc.) are intentionally left as their own interactive category, not generic code. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(home): polish "The Language" section - Command tags (/polish, /adapt): gold command text on a neutral code chip (--ks-code-cmd / --ks-code-bg), dropping the muddy gold-tint border. - Commands panel kept as the solid oklch(0.17 0 0) panel (no border). - Demo preview cleaned up to a single framed split: strip the grid ::before, the gold-grid/radial-glow container background, and the inner drop-shadow; before-half inherits the panel, after-half is near-black, with one thin neutral border on the demo itself (caption sits outside it). - Periodic table: crisp flat neutral graphite tiles. Removed the JS-inlined category bg (var(--cat-*-bg)) + 1.5px colored border + hover drop-shadow, the gold-leaf ::before texture, the ::after accent line, the inset box-shadow, and the gold hover glow. Now a 1px neutral border, white symbols, readable neutral names, and a clean neutral-border hover with no shadow. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(design): roomier inline-code padding Inline code chips were tight top/bottom (the homepage one was only 0.05em). Add a --ks-code-pad token (0.3em 0.5em) and point every inline-code rule at it so the chips have consistent breathing room. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(home): drop non-steering commands from the command palette impeccable, init, extract, document, and live are setup/management commands, not steering verbs. Filter them out of the palette (fisheye + mobile carousel) via a shared PALETTE_EXCLUDED set. They stay in the periodic table, which is rendered separately by framework-viz.js. Palette: 23 -> 18 commands. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): flatten the pre-ship nested box The pre-ship cards were a box-in-box: a legacy .designing-polish-grid panel (cream bg + L/R/B border + padding, from docs-visuals.css) wrapping cards that already have their own border + fill. Override the grid to a plain transparent layout so the three cards are the only surface. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): remove step counter + flatten design-debt boxes - Drop the cryptic "03 · 04" pre-ship step counter (.designing-polish-band-meta) and tighten the band to a single bottom hairline. - Design-debt: flatten the box-in-box (bento plinth > tile > stage). The .designing-maintain-stage no longer adds its own border + fill; the demo sits directly in the bento tile. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): neutralize code/terminal/panel surfaces The terminal block, surface-cmd chips, command pills, live-frame, and other dark panels used a slightly-warm dark fill (oklch 1X% 0.006 95). Drop the warm chroma so they read neutral like the rest of the de-warmed site; the page ground + deep surfaces stay lacquer-warm. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): neutralize inline code + live-mock picker chrome - Inline code: the phase-sub and avoid-title code were still gold; point them at --ks-code-fg so all inline code reads neutral (gold stays only on command *links*). - docs-viz-live mock: bring the duplicated picker chrome in line with the refactored neutral treatment — neutral 1px container borders (no gold halo), neutral active "Pick" pill (was the kinpaku-dim wash), crisp pick outline (no glow), tighter radii. - CTAs (SEND ME ONE, Accept): pale-cream kinpaku-pale -> solid kinpaku gold. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): flatten lanes + avoid sections - Brand/Product lane mock cards: drop the inner border+fill box; the mock sits directly in the bento tile, separated by a top hairline (no plinth>tile>mock nesting). - "What to avoid" list: flatten the boxed list cards into a clean divided list (hairline separators, no per-item border/fill). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): clean up the Brand/Product lanes - Drop the bento plinth (0.17 fill + 8px gutter that drew the weird gutter "borders") and the tile fill; the two lanes sit on the page split by a single center hairline. - Brand mock title used the pinstripe display face at 1.6rem (reads broken at that size, the "champagne text"); switch it to the clean body face so it matches the product mock title. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * chore(site): update GitHub star count to 31k 31,188 stars as of now; header pill + aria-label were stale at 30k. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Add Neo Kinpaku light mode across the site. Wire theme persistence and a header toggle, then layer light-mode overrides for docs viz contrast, command demos, live-mode pathway cards, and the designing/home surfaces. Co-authored-by: Cursor <cursoragent@cursor.com> * fix(designing): replace em dashes flagged by prose validator Brand/Product lane copy used em dashes ("the deliverable —", "the task —"); swap for colons per STYLE.md so the Cloudflare build's validateProse passes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): address Cursor bugbot nits - Fold the duplicate .designing-avoid { gap: 0 } override into the original rule (the gap: 18px was dead code). - Drop the leftover el.style.boxShadow = 'none' in the periodic-tile deactivate handler — activate no longer sets a box-shadow, so this only left a dead inline none that could suppress a future CSS shadow. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
3408 lines
72 KiB
CSS
3408 lines
72 KiB
CSS
/*
|
|
* impeccable.style — docs visual components.
|
|
*
|
|
* Static mocks that illustrate what each command/tutorial is talking about:
|
|
* Live Mode frames, PRODUCT/DESIGN file renderings, register side-by-sides,
|
|
* step artifacts, flow diagrams, and audit/critique report mocks.
|
|
*
|
|
* These are deliberately non-interactive. Docs readers should be able to
|
|
* scan them at their own pace, not chase animations.
|
|
*
|
|
* Namespaced with `.docs-viz-` to stay clear of the homepage's .why-*,
|
|
* .live-demo-*, and .platforms-* classes.
|
|
*/
|
|
|
|
/* ============================================
|
|
GENERIC HERO VISUAL WRAPPER
|
|
============================================ */
|
|
|
|
.docs-viz-hero {
|
|
margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
|
|
padding: clamp(1rem, 2vw, 1.5rem);
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.docs-viz-hero--plain {
|
|
background: transparent;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.docs-viz-hero .docs-viz-caption,
|
|
.docs-viz-caption {
|
|
margin: 16px 0 0;
|
|
font-family: var(--font-body);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.docs-viz-eyebrow {
|
|
display: inline-block;
|
|
font-family: var(--font-body);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-accent);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
/* ============================================
|
|
LIVE MODE — static browser frame
|
|
|
|
Shows the picker overlay in "cycling" state: outline on target,
|
|
context bar with 2/3 counter, global bar pinned to the bottom.
|
|
Dimensionally this mirrors the homepage .live-demo-frame but
|
|
paused and stripped to the informative state.
|
|
============================================ */
|
|
|
|
.docs-viz-live-frame {
|
|
position: relative;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 12px 32px oklch(0% 0 0 / 0.06);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.docs-viz-live-chrome {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 9px 12px;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
.docs-viz-live-dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: var(--color-mist);
|
|
}
|
|
|
|
.docs-viz-live-url {
|
|
margin-left: 10px;
|
|
padding: 3px 10px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.docs-viz-live-stage {
|
|
position: relative;
|
|
min-height: 260px;
|
|
padding: 36px 28px 68px;
|
|
background: var(--color-paper);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.docs-viz-live-stage--tall {
|
|
min-height: 340px;
|
|
}
|
|
|
|
.docs-viz-live-target {
|
|
position: relative;
|
|
width: min(320px, 78%);
|
|
padding: 18px 20px;
|
|
background: var(--color-cream);
|
|
border: 1px dashed var(--color-accent);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.docs-viz-live-kicker {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.docs-viz-live-title {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-viz-live-title em {
|
|
color: var(--color-accent);
|
|
font-style: italic;
|
|
}
|
|
|
|
.docs-viz-live-body {
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-viz-live-btn {
|
|
align-self: flex-start;
|
|
margin-top: 4px;
|
|
padding: 7px 14px;
|
|
background: var(--color-accent);
|
|
color: var(--color-paper);
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Picker outline — sits around the target */
|
|
.docs-viz-live-outline {
|
|
position: absolute;
|
|
inset: 28px 24px 60px;
|
|
border: 2px solid var(--color-accent);
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 0 4px var(--color-accent-dim);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Context bar floating near the target */
|
|
.docs-viz-live-ctx {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 30px;
|
|
transform: translateX(-50%);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 20px oklch(0% 0 0 / 0.08);
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
color: var(--color-ink);
|
|
white-space: nowrap;
|
|
z-index: 2;
|
|
}
|
|
|
|
.docs-viz-live-ctx-nav {
|
|
padding: 2px 8px;
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--color-ash);
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.docs-viz-live-ctx-counter {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--color-ink);
|
|
padding: 0 4px;
|
|
min-width: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.docs-viz-live-ctx-divider {
|
|
width: 1px;
|
|
height: 14px;
|
|
background: var(--color-mist);
|
|
margin: 0 2px;
|
|
}
|
|
|
|
.docs-viz-live-ctx-accept {
|
|
padding: 4px 10px;
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
border: 0;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Global bar pinned to bottom */
|
|
.docs-viz-live-gbar {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 0 4px;
|
|
min-height: 30px;
|
|
background: oklch(14% 0 0);
|
|
color: oklch(92% 0 0);
|
|
border: 1px solid oklch(22% 0 0);
|
|
border-radius: 8px;
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
box-shadow: 0 6px 20px oklch(0% 0 0 / 0.2);
|
|
}
|
|
|
|
.docs-viz-live-gbar-brand {
|
|
font-family: var(--font-display);
|
|
font-size: 14px;
|
|
color: var(--color-accent);
|
|
padding: 0 8px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.docs-viz-live-gbar-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 5px 8px;
|
|
background: transparent;
|
|
color: oklch(75% 0 0);
|
|
font: inherit;
|
|
border: 0;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.docs-viz-live-gbar-btn.is-active {
|
|
background: var(--color-accent-dim);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.docs-viz-live-gbar-divider {
|
|
width: 1px;
|
|
height: 14px;
|
|
background: oklch(28% 0 0);
|
|
margin: 0 2px;
|
|
}
|
|
|
|
.docs-viz-live-gbar-x {
|
|
padding: 5px 8px;
|
|
color: oklch(60% 0 0);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Step-size (smaller) variant used inline in tutorials */
|
|
.docs-viz-live-frame--step {
|
|
max-width: 520px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.docs-viz-live-frame--step .docs-viz-live-stage {
|
|
min-height: 200px;
|
|
padding: 28px 22px 56px;
|
|
}
|
|
|
|
.docs-viz-live-frame--step .docs-viz-live-outline {
|
|
inset: 22px 20px 50px;
|
|
}
|
|
|
|
/* ============================================
|
|
PRODUCT.md and DESIGN.md file mocks
|
|
|
|
Single file-style card with a chrome row, fields, and a footer
|
|
that identifies what loads it. Shared .docs-viz-file for the
|
|
chrome; .docs-viz-productmd / .docs-viz-designmd for per-file content.
|
|
============================================ */
|
|
|
|
.docs-viz-file {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.docs-viz-file-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 9px 14px;
|
|
background: var(--color-cream);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.docs-viz-file-name {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.docs-viz-file-status {
|
|
font-family: var(--font-mono);
|
|
font-size: 9px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.docs-viz-file-body {
|
|
padding: 4px 14px;
|
|
}
|
|
|
|
.docs-viz-file-row {
|
|
display: grid;
|
|
grid-template-columns: 108px 1fr;
|
|
gap: 14px;
|
|
align-items: baseline;
|
|
padding: 9px 0;
|
|
border-bottom: 1px dashed var(--color-mist);
|
|
}
|
|
|
|
.docs-viz-file-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.docs-viz-file-k {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.docs-viz-file-v {
|
|
font-family: var(--font-body);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.docs-viz-file-footer {
|
|
padding: 10px 14px;
|
|
background: var(--color-cream);
|
|
border-top: 1px solid var(--color-mist);
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
/* DESIGN.md specific rows — six numbered sections, richer inline specimens */
|
|
|
|
.docs-viz-designmd-section {
|
|
padding: 12px 14px;
|
|
border-bottom: 1px dashed var(--color-mist);
|
|
}
|
|
|
|
.docs-viz-designmd-section:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.docs-viz-designmd-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.docs-viz-designmd-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: var(--color-ash);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.docs-viz-designmd-title {
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.docs-viz-designmd-note {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-size: 12px;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.45;
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-viz-designmd-swatches {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.docs-viz-designmd-swatch {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 4px;
|
|
border: 1px solid oklch(0% 0 0 / 0.06);
|
|
}
|
|
|
|
.docs-viz-designmd-type {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.docs-viz-designmd-type-display {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-size: 26px;
|
|
line-height: 1;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.docs-viz-designmd-type-body {
|
|
font-family: var(--font-body);
|
|
font-size: 13px;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.docs-viz-designmd-comps {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 4px;
|
|
align-items: center;
|
|
}
|
|
|
|
.docs-viz-designmd-btn {
|
|
padding: 5px 12px;
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
font-family: var(--font-body);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.docs-viz-designmd-chip {
|
|
padding: 3px 8px;
|
|
background: var(--color-accent-dim);
|
|
color: var(--color-accent);
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
border-radius: 11px;
|
|
}
|
|
|
|
.docs-viz-designmd-card {
|
|
padding: 6px 10px;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 4px;
|
|
font-family: var(--font-body);
|
|
font-size: 10px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.docs-viz-designmd-rules {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4px 14px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.docs-viz-designmd-do,
|
|
.docs-viz-designmd-dont {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.docs-viz-designmd-do::before {
|
|
content: "DO";
|
|
font-family: var(--font-mono);
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
color: oklch(45% 0.18 145);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.docs-viz-designmd-dont::before {
|
|
content: "DON'T";
|
|
font-family: var(--font-mono);
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
color: oklch(55% 0.22 25);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
REGISTER SIDE-BY-SIDE
|
|
|
|
Two faux browser frames showing the same element rendered in
|
|
brand vs product register. Each frame is self-contained and
|
|
styled per the lane's conventions.
|
|
============================================ */
|
|
|
|
.docs-viz-register {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.docs-viz-register {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.docs-viz-register-side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.docs-viz-register-label {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
.docs-viz-register-name {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-size: 18px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.docs-viz-register-lane {
|
|
font-family: var(--font-mono);
|
|
font-size: 9px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.docs-viz-register-frame {
|
|
position: relative;
|
|
padding: 22px 20px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
min-height: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* BRAND variant — editorial-magazine, serif display, drenched accent */
|
|
.docs-viz-register-frame--brand {
|
|
background: oklch(96% 0.02 30);
|
|
border-color: oklch(80% 0.08 30);
|
|
padding: 28px 22px;
|
|
}
|
|
|
|
.docs-viz-register-frame--brand .docs-viz-reg-kicker {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: oklch(40% 0.12 30);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.docs-viz-register-frame--brand .docs-viz-reg-title {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: 28px;
|
|
line-height: 1;
|
|
color: oklch(20% 0.1 30);
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
.docs-viz-register-frame--brand .docs-viz-reg-body {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: oklch(35% 0.04 30);
|
|
margin: 0 0 14px 0;
|
|
max-width: 26ch;
|
|
}
|
|
|
|
.docs-viz-register-frame--brand .docs-viz-reg-btn {
|
|
align-self: flex-start;
|
|
padding: 8px 18px;
|
|
background: oklch(20% 0.1 30);
|
|
color: oklch(96% 0.02 30);
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* PRODUCT variant — neutral sans, restrained, utility-shaped */
|
|
.docs-viz-register-frame--product {
|
|
background: var(--color-paper);
|
|
border-color: var(--color-mist);
|
|
}
|
|
|
|
.docs-viz-register-frame--product .docs-viz-reg-kicker {
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--color-ash);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.docs-viz-register-frame--product .docs-viz-reg-title {
|
|
font-family: var(--font-body);
|
|
font-weight: 600;
|
|
font-size: 17px;
|
|
line-height: 1.3;
|
|
color: var(--color-ink);
|
|
margin: 0 0 6px 0;
|
|
}
|
|
|
|
.docs-viz-register-frame--product .docs-viz-reg-body {
|
|
font-family: var(--font-body);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--color-charcoal);
|
|
margin: 0 0 14px 0;
|
|
max-width: 32ch;
|
|
}
|
|
|
|
.docs-viz-register-frame--product .docs-viz-reg-btn {
|
|
align-self: flex-start;
|
|
padding: 7px 14px;
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.docs-viz-register-notes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 0 4px;
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.docs-viz-register-notes span::before {
|
|
content: "· ";
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
/* ============================================
|
|
FLOW DIAGRAMS
|
|
|
|
Horizontal step strip — boxes separated by arrows. Used on
|
|
command pages where the value is a multi-phase workflow
|
|
(craft, shape, extract).
|
|
============================================ */
|
|
|
|
.docs-viz-flow {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.docs-viz-flow-step {
|
|
flex: 1;
|
|
min-width: 130px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 12px 14px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
position: relative;
|
|
}
|
|
|
|
.docs-viz-flow-step + .docs-viz-flow-step {
|
|
margin-left: 14px;
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.docs-viz-flow-step + .docs-viz-flow-step {
|
|
margin-left: 0;
|
|
margin-top: 14px;
|
|
}
|
|
}
|
|
|
|
.docs-viz-flow-step + .docs-viz-flow-step::before {
|
|
content: "→";
|
|
position: absolute;
|
|
left: -14px;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 14px;
|
|
text-align: center;
|
|
font-family: var(--font-body);
|
|
font-size: 14px;
|
|
color: var(--color-accent);
|
|
line-height: 1;
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.docs-viz-flow-step + .docs-viz-flow-step::before {
|
|
top: -14px;
|
|
left: 50%;
|
|
content: "↓";
|
|
}
|
|
}
|
|
|
|
.docs-viz-flow-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.docs-viz-flow-name {
|
|
font-family: var(--font-body);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.docs-viz-flow-hint {
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.docs-viz-flow-step--accent {
|
|
background: var(--color-accent-dim);
|
|
border-color: var(--color-accent-soft);
|
|
}
|
|
|
|
.docs-viz-flow-step--accent .docs-viz-flow-name {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* ============================================
|
|
AUDIT REPORT MOCK
|
|
============================================ */
|
|
|
|
.docs-viz-report {
|
|
padding: 20px 22px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
font-family: var(--font-body);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.docs-viz-report-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.docs-viz-report-title {
|
|
font-family: var(--font-body);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.docs-viz-report-target {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.docs-viz-report-score {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
}
|
|
|
|
.docs-viz-report-score-num {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-size: 36px;
|
|
line-height: 1;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.docs-viz-report-score-out {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.docs-viz-report-dims {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 9px;
|
|
}
|
|
|
|
.docs-viz-report-dim {
|
|
display: grid;
|
|
grid-template-columns: 110px 1fr 42px;
|
|
gap: 12px;
|
|
align-items: center;
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.docs-viz-report-dim-name {
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.docs-viz-report-dim-bar {
|
|
height: 5px;
|
|
background: var(--color-mist);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.docs-viz-report-dim-fill {
|
|
display: block;
|
|
height: 100%;
|
|
background: var(--color-accent);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.docs-viz-report-dim-fill--warn {
|
|
background: oklch(72% 0.15 70);
|
|
}
|
|
|
|
.docs-viz-report-dim-fill--fail {
|
|
background: oklch(60% 0.2 25);
|
|
}
|
|
|
|
.docs-viz-report-dim-score {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--color-ink);
|
|
text-align: right;
|
|
}
|
|
|
|
.docs-viz-report-issues {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.docs-viz-report-sev {
|
|
padding: 3px 10px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-paper);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.docs-viz-report-sev--p0 { background: oklch(50% 0.22 25); }
|
|
.docs-viz-report-sev--p1 { background: oklch(58% 0.18 45); }
|
|
.docs-viz-report-sev--p2 { background: oklch(70% 0.13 80); }
|
|
.docs-viz-report-sev--p3 { background: oklch(55% 0.06 260); }
|
|
|
|
.docs-viz-report-sev-n {
|
|
font-weight: 500;
|
|
margin-left: 4px;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* ============================================
|
|
CRITIQUE REPORT MOCK
|
|
============================================ */
|
|
|
|
.docs-viz-critique {
|
|
padding: 20px 22px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
font-family: var(--font-body);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.docs-viz-critique-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.docs-viz-critique-verdict {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.docs-viz-critique-verdict-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.docs-viz-critique-verdict-value {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3px 10px;
|
|
background: oklch(60% 0.2 25);
|
|
color: var(--color-paper);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.docs-viz-critique-verdict-value--pass {
|
|
background: oklch(52% 0.18 150);
|
|
}
|
|
|
|
.docs-viz-critique-cols {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.docs-viz-critique-cols {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.docs-viz-critique-col-title {
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ash);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.docs-viz-critique-personas {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.docs-viz-critique-persona {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 10px;
|
|
align-items: baseline;
|
|
padding: 8px 10px;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.docs-viz-critique-persona-name {
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.docs-viz-critique-persona-note {
|
|
display: block;
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
color: var(--color-charcoal);
|
|
font-weight: 400;
|
|
margin-top: 1px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.docs-viz-critique-persona-score {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--color-ink);
|
|
text-align: right;
|
|
}
|
|
|
|
.docs-viz-critique-heuristics {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.docs-viz-critique-heur {
|
|
display: grid;
|
|
grid-template-columns: 1fr 28px;
|
|
gap: 10px;
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
color: var(--color-ink);
|
|
padding: 4px 0;
|
|
border-bottom: 1px dashed var(--color-mist);
|
|
}
|
|
|
|
.docs-viz-critique-heur:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.docs-viz-critique-heur-score {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
text-align: right;
|
|
}
|
|
|
|
.docs-viz-critique-heur-score--good { color: oklch(45% 0.18 150); }
|
|
.docs-viz-critique-heur-score--ok { color: oklch(55% 0.15 70); }
|
|
.docs-viz-critique-heur-score--bad { color: oklch(55% 0.22 25); }
|
|
|
|
/* ============================================
|
|
STEP ARTIFACTS — inline mocks in tutorials
|
|
============================================ */
|
|
|
|
.docs-viz-step {
|
|
margin: 14px 0 18px;
|
|
padding: 16px 18px;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Picker-on-element strip */
|
|
.docs-viz-picker-row {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px 16px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
min-height: 110px;
|
|
}
|
|
|
|
.docs-viz-picker-target {
|
|
position: relative;
|
|
padding: 10px 16px;
|
|
border: 2px solid var(--color-accent);
|
|
border-radius: 6px;
|
|
box-shadow: 0 0 0 4px var(--color-accent-dim);
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-size: 15px;
|
|
color: var(--color-ink);
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
.docs-viz-picker-pin {
|
|
position: absolute;
|
|
top: -10px;
|
|
right: -10px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
background: var(--color-accent);
|
|
color: var(--color-paper);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 6px oklch(0% 0 0 / 0.2);
|
|
}
|
|
|
|
.docs-viz-picker-note {
|
|
position: absolute;
|
|
right: -12px;
|
|
top: 24px;
|
|
transform: translateX(100%);
|
|
padding: 3px 8px;
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.docs-viz-picker-note { display: none; }
|
|
}
|
|
|
|
/* Three-up variants strip */
|
|
.docs-viz-variants {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.docs-viz-variants {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.docs-viz-variant {
|
|
position: relative;
|
|
padding: 12px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
min-height: 120px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.docs-viz-variant.is-active {
|
|
border-color: var(--color-accent);
|
|
box-shadow: 0 0 0 3px var(--color-accent-dim);
|
|
}
|
|
|
|
.docs-viz-variant-badge {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
padding: 1px 6px;
|
|
background: oklch(14% 0 0);
|
|
color: oklch(92% 0 0);
|
|
font-family: var(--font-mono);
|
|
font-size: 9px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.docs-viz-variant-kicker {
|
|
font-family: var(--font-mono);
|
|
font-size: 9px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.docs-viz-variant-title {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-viz-variant-btn {
|
|
align-self: flex-start;
|
|
margin-top: auto;
|
|
padding: 4px 8px;
|
|
font-family: var(--font-body);
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.docs-viz-variant--v1 { background: var(--color-cream); }
|
|
.docs-viz-variant--v2 .docs-viz-variant-btn { background: var(--color-accent); }
|
|
.docs-viz-variant--v3 { background: oklch(96% 0.02 350); }
|
|
|
|
/* Accept pill */
|
|
.docs-viz-accept-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 14px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 14px oklch(0% 0 0 / 0.06);
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
color: oklch(45% 0.18 145);
|
|
}
|
|
|
|
.docs-viz-accept-pill::before {
|
|
content: "✓";
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ============================================
|
|
LIVE MODE LANDING PAGE (/live-mode)
|
|
|
|
Marketing-style landing that mirrors /visual-mode's structure.
|
|
Hosts the animated homepage live-demo and surfaces the tutorial,
|
|
reference, and install pathways.
|
|
============================================ */
|
|
|
|
.live-mode-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(2.5rem, 5vw, 3.5rem);
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem) clamp(4rem, 8vw, 6rem);
|
|
}
|
|
|
|
.live-mode-page-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
max-width: 56ch;
|
|
}
|
|
|
|
.live-mode-page-eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-family: var(--font-body);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.live-mode-page-eyebrow-badge {
|
|
padding: 2px 7px;
|
|
border: 1px solid var(--color-accent);
|
|
border-radius: 4px;
|
|
font-size: 0.625rem;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.live-mode-page-title {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
font-size: clamp(2.5rem, 5vw, 3.5rem);
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
}
|
|
|
|
.live-mode-page-lede {
|
|
font-family: var(--font-body);
|
|
font-size: 1.0625rem;
|
|
line-height: 1.55;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
max-width: 56ch;
|
|
}
|
|
|
|
.live-mode-page-alpha-note {
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
line-height: 1.55;
|
|
color: var(--color-ash);
|
|
margin: 0;
|
|
max-width: 56ch;
|
|
padding: 10px 14px;
|
|
border-left: 2px solid var(--color-accent);
|
|
background: color-mix(in oklab, var(--color-accent) 6%, transparent);
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
.live-mode-page-alpha-note strong {
|
|
color: var(--color-ink);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.live-mode-start {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 6px;
|
|
padding: 10px 14px;
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
border-radius: 8px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
align-self: flex-start;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.live-mode-start-prompt {
|
|
color: var(--color-accent);
|
|
user-select: none;
|
|
}
|
|
|
|
.live-mode-start-cmd {
|
|
flex: 1;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.live-mode-start-cmd::-webkit-scrollbar { display: none; }
|
|
|
|
.live-mode-start-copy {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: transparent;
|
|
color: oklch(75% 0 0);
|
|
border: 0;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.live-mode-start-copy:hover {
|
|
background: oklch(22% 0 0);
|
|
color: oklch(92% 0 0);
|
|
}
|
|
|
|
.live-mode-start-copy.is-copied {
|
|
color: oklch(70% 0.18 145);
|
|
}
|
|
|
|
/* Demo section — wraps the animated homepage .live-demo block.
|
|
The homepage uses a 2-col grid (frame + support cells). /live-mode
|
|
replaces the support cells with the stages section below, so the
|
|
frame should take the full width here. */
|
|
.live-mode-demo-wrap {
|
|
margin: 0;
|
|
}
|
|
|
|
.live-mode-demo-wrap .live-demo {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.live-mode-demo-wrap .live-demo-frame {
|
|
max-width: none;
|
|
}
|
|
|
|
.live-mode-demo-caption {
|
|
margin: 14px 0 0;
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
color: var(--color-ash);
|
|
line-height: 1.55;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Three-card "what happens" section */
|
|
.live-mode-stages {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.live-mode-stages-title {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
font-size: 1.75rem;
|
|
color: var(--color-ink);
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.live-mode-stages-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.live-mode-stages-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.live-mode-stage {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 18px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.live-mode-stage-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-ash);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.live-mode-stage-name {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: 1.375rem;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.live-mode-stage-desc {
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
line-height: 1.55;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
}
|
|
|
|
.live-mode-stage-viz {
|
|
margin-top: 4px;
|
|
padding: 14px;
|
|
background: var(--color-cream);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 92px;
|
|
}
|
|
|
|
/* Three pathway cards — tutorial, reference, install */
|
|
.live-mode-pathways {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.live-mode-pathways-title {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
font-size: 1.75rem;
|
|
color: var(--color-ink);
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.live-mode-pathways-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.live-mode-pathways-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.live-mode-pathway {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 20px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
transition: border-color 180ms ease, transform 180ms ease;
|
|
}
|
|
|
|
.live-mode-pathway:hover {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.live-mode-pathway-kind {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.live-mode-pathway-title {
|
|
font-family: var(--font-body);
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.live-mode-pathway-desc {
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.55;
|
|
margin: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.live-mode-pathway-cta {
|
|
font-family: var(--font-body);
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: var(--color-accent);
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* Frameworks strip */
|
|
.live-mode-frameworks {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 18px 20px;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.live-mode-frameworks-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-ash);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.live-mode-frameworks-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px 14px;
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.live-mode-frameworks-list li {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.live-mode-frameworks-list li::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
/* Docs/live page callout pointing back to /live-mode */
|
|
.docs-live-callout {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 12px 16px;
|
|
margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
|
|
background: var(--color-accent-dim);
|
|
border: 1px solid var(--color-accent-soft);
|
|
border-radius: 8px;
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
color: var(--color-ink);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.docs-live-callout-icon {
|
|
flex-shrink: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--color-accent);
|
|
color: var(--color-paper);
|
|
border-radius: 50%;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.docs-live-callout-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.docs-live-callout-text a {
|
|
color: var(--color-accent);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
DESIGNING WITH IMPECCABLE (/designing)
|
|
|
|
Editorial orientation page. Cards are rare — most sections
|
|
rely on typography, whitespace, and hairline rules for structure.
|
|
Four core phases get full weight; three appendix sections (register,
|
|
interop, avoid) render at a quieter tier. CTA climax at the bottom.
|
|
|
|
Spacing follows DESIGN.md: 8 / 16 / 24 / 32 / 48 / 80 / 120.
|
|
Two card radii: 8 (inline chrome like terminal, live frame) and 12
|
|
(only the loop spine + CTA climax). No freestyle paddings.
|
|
============================================ */
|
|
|
|
.designing-page {
|
|
max-width: 920px;
|
|
margin: 0 auto;
|
|
padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2rem) clamp(4rem, 8vw, 6rem);
|
|
}
|
|
|
|
/* ---------- Hero ---------- */
|
|
|
|
/* Hero wrapper: hero text on the left, compass loop on the right when
|
|
there's enough room. Single column below ~880px so both halves stay
|
|
legible. */
|
|
.designing-hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
|
|
column-gap: clamp(1.5rem, 4vw, 3rem);
|
|
row-gap: var(--spacing-xl, 48px);
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-2xl, 80px);
|
|
}
|
|
|
|
@media (max-width: 880px) {
|
|
.designing-hero {
|
|
grid-template-columns: 1fr;
|
|
align-items: start;
|
|
}
|
|
}
|
|
|
|
.designing-page-header {
|
|
max-width: 46ch;
|
|
}
|
|
|
|
.designing-page-eyebrow {
|
|
display: block;
|
|
font-family: var(--font-body);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--color-accent);
|
|
margin-bottom: var(--spacing-sm, 16px);
|
|
}
|
|
|
|
.designing-page-title {
|
|
font-family: var(--font-display);
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
font-size: clamp(2.75rem, 6vw, 4rem);
|
|
line-height: 1;
|
|
letter-spacing: -0.01em;
|
|
color: var(--color-ink);
|
|
margin: 0 0 var(--spacing-md, 24px) 0;
|
|
}
|
|
|
|
.designing-page-title em {
|
|
font-style: italic;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.designing-page-lede {
|
|
font-family: var(--font-body);
|
|
font-weight: 400;
|
|
font-size: clamp(1rem, 1.6vw, 1.125rem);
|
|
line-height: 1.65;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
max-width: 58ch;
|
|
}
|
|
|
|
/* ---------- Loop spine ---------- */
|
|
/*
|
|
* Editorial compass. A thin ink circle is the loop itself; four phase
|
|
* labels sit at the N/E/S/W compass points and read clockwise. Four
|
|
* small clockwise arrow glyphs mark the transit points on the ring.
|
|
* The center carries a quiet italic wordmark so the circle has a
|
|
* typographic anchor.
|
|
*/
|
|
|
|
.designing-loop-wrap {
|
|
padding: 0;
|
|
}
|
|
|
|
.designing-loop-wrap-eyebrow {
|
|
display: none;
|
|
}
|
|
|
|
.designing-loop {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(96px, 1fr) clamp(200px, 26vw, 280px) minmax(96px, 1fr);
|
|
grid-template-rows: auto clamp(200px, 26vw, 280px) auto;
|
|
column-gap: clamp(0.75rem, 2vw, 1.25rem);
|
|
row-gap: clamp(0.75rem, 2vw, 1.25rem);
|
|
max-width: 540px;
|
|
margin: 0 auto;
|
|
align-items: center;
|
|
justify-items: center;
|
|
}
|
|
|
|
/* When the loop stands alone (e.g. stacked below the hero on narrow
|
|
viewports), the eyebrow comes back and a touch more air surrounds it. */
|
|
@media (max-width: 880px) {
|
|
.designing-loop-wrap {
|
|
padding-top: clamp(1rem, 3vw, 2rem);
|
|
}
|
|
.designing-loop-wrap-eyebrow {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ash);
|
|
text-align: center;
|
|
margin-bottom: clamp(1rem, 2vw, 1.5rem);
|
|
}
|
|
}
|
|
|
|
.designing-loop-node {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
max-width: 24ch;
|
|
}
|
|
|
|
.designing-loop-node--start {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
text-align: center;
|
|
align-items: center;
|
|
}
|
|
.designing-loop-node--iterate {
|
|
grid-column: 3;
|
|
grid-row: 2;
|
|
text-align: left;
|
|
align-items: flex-start;
|
|
}
|
|
.designing-loop-node--polish {
|
|
grid-column: 2;
|
|
grid-row: 3;
|
|
text-align: center;
|
|
align-items: center;
|
|
}
|
|
.designing-loop-node--maintain {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
text-align: right;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.designing-loop-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
letter-spacing: 0.18em;
|
|
color: var(--color-accent);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.designing-loop-name {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: clamp(1.5rem, 2.4vw, 2rem);
|
|
line-height: 1;
|
|
color: var(--color-ink);
|
|
transition: color 180ms var(--ease-out, ease);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.designing-loop-node:hover .designing-loop-name {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.designing-loop-hint {
|
|
font-family: var(--font-body);
|
|
font-size: 0.8125rem;
|
|
line-height: 1.55;
|
|
color: var(--color-charcoal);
|
|
margin-top: 6px;
|
|
max-width: 20ch;
|
|
}
|
|
|
|
/* Hide hints inside the compressed hero-side compass; the full phase
|
|
description lives in its section below. Shown again when the compass
|
|
stacks under the hero on narrow viewports. */
|
|
@media (min-width: 881px) {
|
|
.designing-hero .designing-loop-hint {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* The wheel — center cell. Thin ink circle + clockwise arrow glyphs at
|
|
the 45° positions + an italic wordmark in the middle. */
|
|
.designing-loop-wheel {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
align-self: center;
|
|
justify-self: center;
|
|
}
|
|
|
|
.designing-loop-wheel-svg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
.designing-loop-wheel-ring {
|
|
fill: none;
|
|
stroke: var(--color-ink);
|
|
stroke-width: 1;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.designing-loop-wheel-tick {
|
|
stroke: var(--color-ink);
|
|
stroke-width: 1;
|
|
opacity: 0.18;
|
|
}
|
|
|
|
.designing-loop-wheel-tick--cardinal {
|
|
stroke-width: 1.25;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.designing-loop-wheel-dot {
|
|
fill: var(--color-accent);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.designing-loop-wheel-dot {
|
|
offset-path: path("M 50 4 A 46 46 0 1 1 50 96 A 46 46 0 1 1 50 4");
|
|
animation: designingWheelOrbit 22s linear infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes designingWheelOrbit {
|
|
from { offset-distance: 0%; }
|
|
to { offset-distance: 100%; }
|
|
}
|
|
|
|
.designing-loop-wheel-arrow {
|
|
position: absolute;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: var(--color-cream);
|
|
color: var(--color-accent);
|
|
font-family: var(--font-body);
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
border-radius: 50%;
|
|
user-select: none;
|
|
}
|
|
|
|
/* 45° offsets: cos 45° ≈ 0.7071. At radius 50% of wheel size, that's
|
|
~35.4% along each axis from center. */
|
|
.designing-loop-wheel-arrow--ne { top: calc(50% - 35.4%); left: calc(50% + 35.4%); transform: translate(-50%, -50%); }
|
|
.designing-loop-wheel-arrow--se { top: calc(50% + 35.4%); left: calc(50% + 35.4%); transform: translate(-50%, -50%); }
|
|
.designing-loop-wheel-arrow--sw { top: calc(50% + 35.4%); left: calc(50% - 35.4%); transform: translate(-50%, -50%); }
|
|
.designing-loop-wheel-arrow--nw { top: calc(50% - 35.4%); left: calc(50% - 35.4%); transform: translate(-50%, -50%); }
|
|
|
|
.designing-loop-wheel-center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.designing-loop-wheel-center-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.designing-loop-wheel-center-mark {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: clamp(1.125rem, 2.2vw, 1.375rem);
|
|
line-height: 1;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.designing-loop {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: repeat(7, auto);
|
|
row-gap: 12px;
|
|
justify-items: start;
|
|
}
|
|
.designing-loop-node {
|
|
text-align: left;
|
|
align-items: flex-start;
|
|
max-width: none;
|
|
}
|
|
.designing-loop-node--start { grid-column: 1; grid-row: 1; }
|
|
.designing-loop-node--iterate { grid-column: 1; grid-row: 3; }
|
|
.designing-loop-node--polish { grid-column: 1; grid-row: 5; }
|
|
.designing-loop-node--maintain { grid-column: 1; grid-row: 7; }
|
|
.designing-loop-wheel { display: none; }
|
|
}
|
|
|
|
/* ============================================
|
|
PHASE SECTIONS — editorial, text-dominant
|
|
============================================ */
|
|
|
|
.designing-phase {
|
|
scroll-margin-top: 80px;
|
|
padding-top: var(--spacing-xl, 48px);
|
|
padding-bottom: var(--spacing-xl, 48px);
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
/* First phase after the loop: no border (loop-wrap already separates),
|
|
but keep a little top air so the eye settles. */
|
|
.designing-loop-wrap + .designing-phase {
|
|
border-top: 0;
|
|
padding-top: var(--spacing-lg, 32px);
|
|
}
|
|
|
|
/* Transition from spine to appendix: rely on whitespace, not a thicker
|
|
rule. Design system uses only 1px mist separators. */
|
|
.designing-phase:not(.designing-phase--appendix) + .designing-phase--appendix {
|
|
margin-top: var(--spacing-2xl, 80px);
|
|
}
|
|
|
|
.designing-phase-head {
|
|
margin-bottom: var(--spacing-lg, 32px);
|
|
}
|
|
|
|
.designing-phase-num {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.16em;
|
|
color: var(--color-accent);
|
|
text-transform: uppercase;
|
|
margin-bottom: var(--spacing-sm, 16px);
|
|
}
|
|
|
|
.designing-phase--appendix .designing-phase-num {
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.designing-phase-title {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
font-size: clamp(1.875rem, 3.5vw, 2.5rem);
|
|
line-height: 1.15;
|
|
color: var(--color-ink);
|
|
margin: 0 0 var(--spacing-sm, 16px) 0;
|
|
max-width: 22ch;
|
|
}
|
|
|
|
.designing-phase--appendix .designing-phase-title {
|
|
font-size: clamp(1.25rem, 2.2vw, 1.625rem);
|
|
font-style: normal;
|
|
max-width: 32ch;
|
|
}
|
|
|
|
.designing-phase-sub {
|
|
font-family: var(--font-body);
|
|
font-size: 1.0625rem;
|
|
line-height: 1.65;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
max-width: 60ch;
|
|
}
|
|
|
|
.designing-phase-sub code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875em;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.designing-phase--appendix .designing-phase-sub {
|
|
font-size: 0.9375rem;
|
|
max-width: 64ch;
|
|
}
|
|
|
|
.designing-phase-commands {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: var(--spacing-md, 24px);
|
|
}
|
|
|
|
.designing-phase-cmd {
|
|
padding: 4px 10px;
|
|
background: transparent;
|
|
border: 1px solid var(--color-mist);
|
|
color: var(--color-ink);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
transition: border-color 160ms ease, color 160ms ease;
|
|
}
|
|
|
|
.designing-phase-cmd:hover {
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.designing-phase-body {
|
|
margin-top: var(--spacing-lg, 32px);
|
|
}
|
|
|
|
/* ============================================
|
|
PHASE 1 — Start
|
|
============================================ */
|
|
|
|
.designing-start-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 1fr;
|
|
gap: clamp(1.5rem, 4vw, 3rem);
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.designing-start-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.designing-start-grid-prose {
|
|
font-family: var(--font-body);
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
color: var(--color-ink);
|
|
max-width: 36ch;
|
|
}
|
|
|
|
.designing-start-grid-prose p {
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
|
|
.designing-start-grid-prose p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.designing-start-grid-prose code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Start-phase flow — two step blocks ("in words", "in pictures")
|
|
under the single 01 · Start header. Step labels carry the
|
|
narrative; no competing display headings inside the body. */
|
|
.designing-start {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-2xl, 80px);
|
|
}
|
|
|
|
.designing-start-step-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md, 24px);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent);
|
|
margin: 0 0 var(--spacing-md, 24px) 0;
|
|
}
|
|
|
|
.designing-start-step-label::after {
|
|
content: "";
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--color-mist);
|
|
}
|
|
|
|
.designing-start-step-note {
|
|
font-family: var(--font-body);
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
color: var(--color-ink);
|
|
margin: 0 0 var(--spacing-lg, 32px) 0;
|
|
max-width: 64ch;
|
|
}
|
|
|
|
.designing-start-step-note code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.designing-visualize-spread {
|
|
display: grid;
|
|
grid-template-columns: 1.35fr 1fr;
|
|
gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 880px) {
|
|
.designing-visualize-spread {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.designing-visualize-plate {
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md, 24px);
|
|
}
|
|
|
|
.designing-visualize-plate-frame {
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.designing-visualize-plate-frame img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.designing-visualize-plate-cap {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
column-gap: var(--spacing-md, 24px);
|
|
align-items: baseline;
|
|
}
|
|
|
|
.designing-visualize-plate-kind {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent);
|
|
white-space: nowrap;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.designing-visualize-plate-note {
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
line-height: 1.65;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
max-width: 48ch;
|
|
}
|
|
|
|
.designing-visualize-plate-note code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.designing-visualize-plate-cap {
|
|
grid-template-columns: 1fr;
|
|
row-gap: 8px;
|
|
}
|
|
}
|
|
|
|
.designing-visualize-foot {
|
|
margin: var(--spacing-xl, 48px) 0 0 0;
|
|
padding-top: var(--spacing-md, 24px);
|
|
border-top: 1px solid var(--color-mist);
|
|
font-family: var(--font-body);
|
|
font-size: 0.8125rem;
|
|
line-height: 1.7;
|
|
color: var(--color-ash);
|
|
max-width: 72ch;
|
|
}
|
|
|
|
.designing-visualize-foot strong {
|
|
font-weight: 500;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
/* ============================================
|
|
PHASE 2 — Iterate
|
|
============================================ */
|
|
|
|
.designing-iterate-split {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: clamp(1.5rem, 3vw, 2.5rem);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.designing-iterate-split {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-xl, 48px);
|
|
}
|
|
}
|
|
|
|
.designing-iterate-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm, 16px);
|
|
}
|
|
|
|
.designing-iterate-kind {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.designing-iterate-name {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-size: 1.375rem;
|
|
line-height: 1.2;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
}
|
|
|
|
.designing-iterate-when {
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
max-width: 36ch;
|
|
}
|
|
|
|
.designing-iterate-terminal {
|
|
background: var(--color-ink);
|
|
color: oklch(90% 0 0);
|
|
border-radius: 8px;
|
|
padding: 24px 22px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
line-height: 2.2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
min-height: 240px;
|
|
}
|
|
|
|
.designing-iterate-col {
|
|
align-self: stretch;
|
|
}
|
|
|
|
.designing-iterate-terminal-line {
|
|
display: flex;
|
|
gap: 8px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.designing-iterate-terminal-prompt {
|
|
color: var(--color-accent);
|
|
user-select: none;
|
|
}
|
|
|
|
/* Pass-through wrapper for the embedded docs-viz-live-frame.
|
|
Overrides shrink the stage so the frame matches the terminal
|
|
height on the opposite column. */
|
|
.designing-iterate-live .docs-viz-live-frame {
|
|
box-shadow: 0 4px 18px oklch(0% 0 0 / 0.05);
|
|
}
|
|
|
|
.designing-iterate-live .docs-viz-live-stage {
|
|
min-height: 180px;
|
|
padding: 20px 18px 52px;
|
|
}
|
|
|
|
.designing-iterate-live .docs-viz-live-stage--tall {
|
|
min-height: 180px;
|
|
}
|
|
|
|
.designing-iterate-live .docs-viz-live-target {
|
|
width: 60%;
|
|
}
|
|
|
|
.designing-iterate-live .docs-viz-live-outline {
|
|
inset: 14px 14px 44px;
|
|
}
|
|
|
|
.designing-iterate-live .docs-viz-live-ctx {
|
|
top: 16px;
|
|
}
|
|
|
|
.designing-iterate-live .docs-viz-live-gbar {
|
|
bottom: 10px;
|
|
}
|
|
|
|
/* Decision table (replaces the old matrix card) */
|
|
.designing-iterate-table {
|
|
margin-top: var(--spacing-xl, 48px);
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.designing-iterate-table caption {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ash);
|
|
text-align: left;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.designing-iterate-table th,
|
|
.designing-iterate-table td {
|
|
text-align: left;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.designing-iterate-table th {
|
|
font-weight: 500;
|
|
color: var(--color-charcoal);
|
|
width: 55%;
|
|
}
|
|
|
|
.designing-iterate-table td {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.designing-iterate-table td a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
|
|
.designing-iterate-table td a:hover {
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
|
|
/* ============================================
|
|
PHASE 3 — Polish (3-column editorial, no cards)
|
|
============================================ */
|
|
|
|
/* Polish section — drenched magenta masthead band over a three-column
|
|
title/description grid. Commands live in the band so the grid stays
|
|
focused on the editorial titles. */
|
|
.designing-polish {
|
|
display: block;
|
|
}
|
|
|
|
.designing-polish-band {
|
|
background: var(--color-accent);
|
|
padding: 20px 28px;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: 24px;
|
|
align-items: baseline;
|
|
color: oklch(98% 0 0);
|
|
}
|
|
|
|
.designing-polish-band-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.designing-polish-band-cmds {
|
|
display: flex;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.designing-polish-band-cmds a {
|
|
display: inline-block;
|
|
padding: 4px 16px;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
border-right: 1px solid color-mix(in oklch, currentColor 32%, transparent);
|
|
}
|
|
|
|
.designing-polish-band-cmds a:first-child { padding-left: 0; }
|
|
.designing-polish-band-cmds a:last-child { border-right: 0; padding-right: 0; }
|
|
|
|
.designing-polish-band-cmds a:hover {
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.designing-polish-band-meta {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.designing-polish-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 28px;
|
|
padding: 28px;
|
|
background: var(--color-cream);
|
|
border-left: 1px solid var(--color-mist);
|
|
border-right: 1px solid var(--color-mist);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.designing-polish-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.designing-polish-name {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: 1.5rem;
|
|
line-height: 1.15;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
}
|
|
|
|
.designing-polish-desc {
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.designing-polish-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.designing-polish-band {
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
PHASE 4 — Maintain (two editorial columns + one hero viz each)
|
|
============================================ */
|
|
|
|
/* Maintain section — architectural poster diptych. Each tile presents the
|
|
domain visualization as the hero (stage) with a quiet caption beneath
|
|
(command link, italic title, short description). */
|
|
.designing-maintain {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: clamp(1.5rem, 3vw, 2rem);
|
|
}
|
|
|
|
.designing-maintain-tile {
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.designing-maintain-stage {
|
|
aspect-ratio: 5 / 3;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 28px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.designing-maintain-caption {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.designing-maintain-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.designing-maintain-label a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.designing-maintain-label a:hover {
|
|
color: var(--color-accent-hover);
|
|
}
|
|
|
|
.designing-maintain-name {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: 1.5rem;
|
|
line-height: 1.15;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
}
|
|
|
|
.designing-maintain-desc {
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
line-height: 1.55;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
max-width: 42ch;
|
|
}
|
|
|
|
/* Extract consolidation viz — cloud of pills converging on a single primitive */
|
|
.designing-extract-viz {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.designing-extract-before {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, auto);
|
|
gap: 6px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.designing-extract-btn {
|
|
display: inline-block;
|
|
padding: 5px 12px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
font-family: var(--font-body);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.designing-extract-arrow {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-size: 2.5rem;
|
|
line-height: 1;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.designing-extract-after {
|
|
display: inline-block;
|
|
padding: 10px 22px;
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
font-family: var(--font-body);
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* DESIGN.md index — enlarged list of numbered sections */
|
|
.designing-designmd-preview {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
width: 100%;
|
|
max-width: 280px;
|
|
}
|
|
|
|
.designing-designmd-preview-line {
|
|
display: grid;
|
|
grid-template-columns: 32px 1fr;
|
|
gap: 14px;
|
|
padding-bottom: 6px;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.designing-designmd-preview-line:last-child { border-bottom: 0; }
|
|
|
|
.designing-designmd-preview-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.designing-maintain {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-xl, 48px);
|
|
}
|
|
.designing-extract-viz { flex-wrap: wrap; }
|
|
}
|
|
|
|
/* ============================================
|
|
APPENDIX: Register (cross-link, quieter aside)
|
|
============================================ */
|
|
|
|
/* Two-lane explainer — brand vs product as twin columns divided by a
|
|
hairline, each with its own mock to make the vocabulary visible. */
|
|
.designing-lanes {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
margin-bottom: var(--spacing-lg, 32px);
|
|
}
|
|
|
|
.designing-lane {
|
|
padding: 0 clamp(18px, 3vw, 32px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
border-left: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.designing-lane:first-child {
|
|
padding-left: 0;
|
|
border-left: 0;
|
|
}
|
|
|
|
.designing-lane-kind {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.designing-lane-rule {
|
|
margin: 0;
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
line-height: 1.55;
|
|
color: var(--color-charcoal);
|
|
max-width: 38ch;
|
|
}
|
|
|
|
.designing-lane-mock {
|
|
padding: 28px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
justify-content: center;
|
|
min-height: 116px;
|
|
border: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.designing-lane-mock--brand {
|
|
background: oklch(96% 0.02 30);
|
|
}
|
|
|
|
.designing-lane-mock--brand .designing-lane-mock-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 9px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: oklch(40% 0.12 30);
|
|
}
|
|
|
|
.designing-lane-mock--brand .designing-lane-mock-title {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-size: 22px;
|
|
color: oklch(20% 0.1 30);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.designing-lane-mock--product {
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
.designing-lane-mock--product .designing-lane-mock-label {
|
|
font-family: var(--font-body);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: var(--color-ash);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.designing-lane-mock--product .designing-lane-mock-title {
|
|
font-family: var(--font-body);
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
color: var(--color-ink);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.designing-lane-link {
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--color-accent);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
text-decoration-thickness: 1px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.designing-lane-link:hover {
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.designing-lanes {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-md, 24px);
|
|
}
|
|
.designing-lane {
|
|
padding: var(--spacing-md, 24px) 0 0 0;
|
|
border-left: 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
.designing-lane:first-child {
|
|
padding-top: 0;
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
APPENDIX: What to avoid (inline list, no cards)
|
|
============================================ */
|
|
|
|
.designing-avoid {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.designing-avoid li {
|
|
padding: var(--spacing-sm, 16px) 0;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
display: grid;
|
|
grid-template-columns: 28px 1fr;
|
|
gap: var(--spacing-sm, 16px);
|
|
align-items: baseline;
|
|
}
|
|
|
|
.designing-avoid li:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.designing-avoid-x {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: oklch(95% 0.04 25);
|
|
color: oklch(55% 0.22 25);
|
|
border-radius: 50%;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
align-self: start;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.designing-avoid-title {
|
|
display: block;
|
|
font-family: var(--font-body);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
line-height: 1.4;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.designing-avoid-desc {
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
max-width: 62ch;
|
|
}
|
|
|
|
/* ============================================
|
|
CTA climax (largest typographic moment)
|
|
============================================ */
|
|
|
|
.designing-cta {
|
|
margin-top: var(--spacing-3xl, 120px);
|
|
padding-top: var(--spacing-xl, 48px);
|
|
border-top: 1px solid var(--color-mist);
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: clamp(1.5rem, 3vw, 2.5rem);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.designing-cta {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.designing-cta-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm, 16px);
|
|
padding: var(--spacing-lg, 32px);
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 12px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: border-color 200ms ease, background 200ms ease;
|
|
}
|
|
|
|
.designing-cta-card:hover {
|
|
border-color: var(--color-accent);
|
|
background: var(--color-accent-dim);
|
|
}
|
|
|
|
.designing-cta-card-kind {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.designing-cta-card-title {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-size: clamp(1.5rem, 2.5vw, 1.875rem);
|
|
line-height: 1.1;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
}
|
|
|
|
.designing-cta-card-title em {
|
|
color: var(--color-accent);
|
|
font-style: italic;
|
|
}
|
|
|
|
.designing-cta-card-desc {
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Neo Mirai proof case: shared by Designing, Craft docs, and the case route. */
|
|
.designing-visualize-spread {
|
|
grid-template-columns: 0.88fr 0.72fr 0.88fr;
|
|
align-items: start;
|
|
}
|
|
|
|
.designing-visualize-plate-frame {
|
|
display: block;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
.designing-visualize-plate-frame:hover {
|
|
border-color: var(--color-accent);
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 20px 46px oklch(10% 0 0 / 0.08);
|
|
}
|
|
|
|
.designing-visualize-plate--live .designing-visualize-plate-frame {
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.designing-visualize-plate--live .designing-visualize-plate-frame img {
|
|
height: auto;
|
|
object-fit: contain;
|
|
object-position: top center;
|
|
}
|
|
|
|
.designing-visualize-plate-note a {
|
|
color: var(--color-accent);
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.craft-case-callout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(220px, 0.82fr);
|
|
gap: clamp(1.5rem, 4vw, 2.5rem);
|
|
align-items: stretch;
|
|
margin: clamp(2.5rem, 5vw, 3.5rem) 0;
|
|
padding: clamp(1.5rem, 3vw, 2rem);
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.craft-case-eyebrow,
|
|
.neon-case-eyebrow,
|
|
.neon-case-section-label,
|
|
.neon-case-strip figure > span {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.craft-case-copy h2 {
|
|
margin: 0.6rem 0 0.9rem;
|
|
font-family: var(--font-display);
|
|
font-size: clamp(1.8rem, 4vw, 2.5rem);
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.craft-case-copy p {
|
|
margin: 0 0 1.25rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.craft-case-command {
|
|
margin: 1.35rem 0 1rem;
|
|
}
|
|
|
|
.craft-case-link-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
margin-bottom: 0 !important;
|
|
font-family: var(--font-body);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.craft-case-link-row a {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.craft-case-images {
|
|
position: relative;
|
|
min-height: 260px;
|
|
}
|
|
|
|
.craft-case-images img {
|
|
position: absolute;
|
|
display: block;
|
|
width: 66%;
|
|
height: 78%;
|
|
object-fit: cover;
|
|
border: 1px solid var(--color-mist);
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
.craft-case-images img:first-child {
|
|
left: 0;
|
|
bottom: 0;
|
|
object-position: top center;
|
|
}
|
|
|
|
.craft-case-images img:last-child {
|
|
right: 0;
|
|
top: 0;
|
|
object-position: top left;
|
|
box-shadow: 0 20px 40px oklch(10% 0 0 / 0.08);
|
|
}
|
|
|
|
.neon-case-page {
|
|
background: var(--ks-lacquer);
|
|
}
|
|
|
|
/* Kinpaku eyebrow/labels override the color from the shared craft+neon rule
|
|
above (which keeps its legacy accent for the craft-case component). */
|
|
.neon-case-eyebrow,
|
|
.neon-case-section-label,
|
|
.neon-case-strip figure > span {
|
|
color: var(--ks-kinpaku);
|
|
font-family: var(--ks-mono);
|
|
letter-spacing: 0.2em;
|
|
}
|
|
|
|
.neon-case {
|
|
width: min(100%, 1392px);
|
|
margin: 0 auto;
|
|
/* Horizontal gutters mirror the site header's padding so the page edge
|
|
aligns with the header, instead of bleeding to the viewport. */
|
|
padding: clamp(4rem, 8vw, 6.5rem) clamp(22px, 4vw, 56px) clamp(4rem, 8vw, 7rem);
|
|
}
|
|
|
|
.neon-case-hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
|
|
gap: clamp(2rem, 5vw, 5rem);
|
|
align-items: end;
|
|
}
|
|
|
|
.neon-case-back {
|
|
display: inline-block;
|
|
margin-bottom: clamp(2rem, 5vw, 4rem);
|
|
font-family: var(--ks-font);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--ks-text-muted);
|
|
text-decoration: none;
|
|
transition: color var(--duration-fast) var(--ks-ease);
|
|
}
|
|
|
|
.neon-case-back:hover {
|
|
color: var(--ks-kinpaku);
|
|
}
|
|
|
|
.neon-case-hero h1 {
|
|
margin: 0.8rem 0 1.5rem;
|
|
font-family: var(--ks-font-display);
|
|
font-size: var(--ks-type-display-size);
|
|
font-weight: var(--ks-type-display-weight);
|
|
letter-spacing: var(--ks-type-display-track);
|
|
line-height: var(--ks-type-display-line);
|
|
color: var(--ks-champagne);
|
|
max-width: 15ch;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.neon-case-hero p,
|
|
.neon-case-command p {
|
|
max-width: 58ch;
|
|
margin: 0;
|
|
font-family: var(--ks-font);
|
|
font-size: clamp(1rem, 1.5vw, 1.1rem);
|
|
line-height: 1.75;
|
|
color: var(--ks-text);
|
|
}
|
|
|
|
.neon-case-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.neon-case-primary,
|
|
.neon-case-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 48px;
|
|
padding: 0 1.4rem;
|
|
border: 1px solid transparent;
|
|
border-radius: 2px;
|
|
font-family: var(--ks-font);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: transform var(--duration-base) var(--ks-ease), background var(--duration-fast) var(--ks-ease), color var(--duration-fast) var(--ks-ease), border-color var(--duration-fast) var(--ks-ease);
|
|
}
|
|
|
|
.neon-case-primary {
|
|
color: var(--ks-lacquer-deep);
|
|
background: var(--ks-kinpaku);
|
|
border-color: var(--ks-kinpaku);
|
|
}
|
|
|
|
.neon-case-secondary {
|
|
color: var(--ks-kinpaku);
|
|
border-color: var(--ks-rule-strong);
|
|
}
|
|
|
|
.neon-case-primary:hover,
|
|
.neon-case-secondary:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.neon-case-primary:hover {
|
|
background: var(--ks-kinpaku-pale);
|
|
border-color: var(--ks-kinpaku-pale);
|
|
}
|
|
|
|
.neon-case-secondary:hover {
|
|
background: oklch(77% 0.14 82 / 0.1);
|
|
border-color: var(--ks-kinpaku);
|
|
}
|
|
|
|
.neon-case-hero-shot {
|
|
display: block;
|
|
margin: 0;
|
|
border: 1px solid var(--ks-rule);
|
|
background: var(--ks-lacquer-raised);
|
|
overflow: hidden;
|
|
transition: transform var(--duration-base) var(--ks-ease), border-color var(--duration-fast) var(--ks-ease);
|
|
}
|
|
|
|
.neon-case-hero-shot:hover {
|
|
transform: translateY(-3px);
|
|
border-color: var(--ks-rule-strong);
|
|
}
|
|
|
|
.neon-case-hero-shot img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.neon-case-strip {
|
|
display: grid;
|
|
grid-template-columns: 0.78fr 0.78fr 1fr;
|
|
gap: clamp(1rem, 2vw, 1.5rem);
|
|
margin: clamp(4rem, 9vw, 8rem) 0;
|
|
align-items: start;
|
|
}
|
|
|
|
.neon-case-strip figure,
|
|
.neon-case-details figure {
|
|
margin: 0;
|
|
}
|
|
|
|
.neon-case-strip img,
|
|
.neon-case-details img {
|
|
display: block;
|
|
width: 100%;
|
|
border: 1px solid var(--ks-rule);
|
|
background: var(--ks-lacquer-raised);
|
|
}
|
|
|
|
.neon-case-strip a,
|
|
.neon-case-details a {
|
|
display: block;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.neon-case-strip img {
|
|
height: clamp(260px, 28vw, 430px);
|
|
object-fit: cover;
|
|
object-position: top center;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.neon-case-strip figure:first-child img,
|
|
.neon-case-strip figure:last-child img {
|
|
object-position: top left;
|
|
}
|
|
|
|
.neon-case-strip figcaption,
|
|
.neon-case-details figcaption {
|
|
margin-top: 0.9rem;
|
|
font-family: var(--ks-font);
|
|
font-size: 0.875rem;
|
|
line-height: 1.65;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.neon-case-body {
|
|
display: grid;
|
|
grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
|
|
gap: clamp(2rem, 6vw, 5rem);
|
|
padding: clamp(3rem, 6vw, 5rem) 0;
|
|
border-top: 1px solid var(--ks-rule);
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
.neon-case-body h2,
|
|
.neon-case-command h2 {
|
|
margin: 0.8rem 0 0;
|
|
font-family: var(--ks-font-display);
|
|
font-size: clamp(2.2rem, 4vw, 3.4rem);
|
|
font-weight: var(--ks-type-headline-weight);
|
|
letter-spacing: -0.005em;
|
|
line-height: var(--ks-type-headline-line);
|
|
color: var(--ks-champagne);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.neon-case-notes {
|
|
display: grid;
|
|
gap: 1px;
|
|
background: var(--ks-rule);
|
|
border: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
.neon-case-notes article {
|
|
padding: clamp(1.25rem, 3vw, 2rem);
|
|
background: var(--ks-lacquer-raised);
|
|
}
|
|
|
|
.neon-case-notes h3 {
|
|
margin: 0 0 0.6rem;
|
|
font-family: var(--ks-font);
|
|
font-size: 1.05rem;
|
|
font-weight: 600;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.neon-case-notes p {
|
|
margin: 0;
|
|
font-family: var(--ks-font);
|
|
font-size: 0.95rem;
|
|
line-height: 1.7;
|
|
color: var(--ks-text);
|
|
}
|
|
|
|
.neon-case-details {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
|
|
gap: clamp(1rem, 2.5vw, 2rem);
|
|
margin: clamp(4rem, 9vw, 8rem) 0;
|
|
align-items: start;
|
|
}
|
|
|
|
.neon-case-details img {
|
|
height: auto;
|
|
object-fit: contain;
|
|
object-position: top center;
|
|
}
|
|
|
|
.neon-case-details figcaption span {
|
|
display: block;
|
|
margin-bottom: 0.25rem;
|
|
font-weight: 600;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.neon-case-command {
|
|
display: grid;
|
|
grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
|
|
gap: clamp(2rem, 5vw, 4rem);
|
|
align-items: end;
|
|
padding: clamp(2rem, 5vw, 4rem);
|
|
background: var(--ks-lacquer-deep);
|
|
border: 1px solid var(--ks-rule-strong);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.neon-case-command h2 {
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.neon-case-command p {
|
|
margin-top: 1.1rem;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.neon-case-command code {
|
|
color: inherit;
|
|
}
|
|
|
|
.neon-case-command .code-block-wrap {
|
|
margin: 0;
|
|
}
|
|
|
|
.neon-case-command .code-block {
|
|
margin: 0;
|
|
padding: var(--spacing-md);
|
|
background: var(--ks-code-block-bg);
|
|
color: var(--ks-code-block-fg);
|
|
border: 1px solid var(--ks-code-block-border);
|
|
border-radius: var(--ks-code-block-radius);
|
|
overflow-x: auto;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.8125rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.neon-case-command .code-block code {
|
|
background: transparent;
|
|
border: 0;
|
|
padding: 0;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.neon-case-command .code-block-copy.is-copied {
|
|
background: var(--ks-kinpaku);
|
|
color: var(--ks-lacquer-deep);
|
|
border-color: var(--ks-kinpaku);
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.designing-visualize-spread,
|
|
.neon-case-hero,
|
|
.neon-case-strip,
|
|
.neon-case-body,
|
|
.neon-case-details,
|
|
.neon-case-command,
|
|
.craft-case-callout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.craft-case-images {
|
|
min-height: 320px;
|
|
}
|
|
|
|
.neon-case-hero h1 {
|
|
max-width: 11ch;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.neon-case-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.neon-case-primary,
|
|
.neon-case-secondary {
|
|
justify-content: center;
|
|
}
|
|
|
|
.craft-case-images img {
|
|
width: 74%;
|
|
}
|
|
}
|