mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
Paul BakausandClaude Opus 4.7
2341fe3637
Adds a coarse-controls ("Tune") popover that slides out from behind the
contextual bar via clip-path, showing 2-4 per-variant knobs (range / steps /
toggle) driven by a `data-impeccable-params` manifest. Range/toggle drive
CSS custom properties on the variant wrapper; steps toggle a data
attribute. Values reset per variant; on accept, current values are passed
through live-poll to live-accept as an `impeccable-param-values` comment
for the carbonize cleanup step to bake in.
Other live-UI work in this change:
- Theme-aware palette (barPaletteForTheme) now drives the contextual bar,
action picker, and tune popover. Dark sand on light pages, paper on
dark. Detection has a localStorage dev override for QA.
- Action picker chips get inline SVG icons (wand / bars / funnel / sparkle /
type ramp / circles / grid / devices / curve / star / bolt) stacked
above the label; selection state recolors via currentColor.
- Accept button switched to saturated site magenta with paper text.
- Cycle dots reworked: solid accent for active, neutral for arrived,
hairline ring for pending. No more magenta-on-gray noise.
- Tune chip sits in the cycling row with a count pill badge; open state
uses accentSoft bg + accent text (no ad-hoc white border).
- Popover uses the bar's palette with a deeper surface (surfaceDeep),
lives behind the bar via z-index so a 6px overlap reads as tucked under
it, and animates with clip-path inset() for reliable slide behavior.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1258 lines
26 KiB
CSS
1258 lines
26 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-caption {
|
|
margin: 10px 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;
|
|
}
|