mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Abdul WahabandCursor
60130bcea9
Mirror the screen 02 neutral contrast badge on the strategy strip, share alert painting between both strips, and render richer PRODUCT.md context in the design document with matching visual-cues schema guidance. AI-assisted commit. Co-authored-by: Cursor <cursoragent@cursor.com>
1644 lines
42 KiB
CSS
1644 lines
42 KiB
CSS
/* ============================================================
|
|
Design context document — ported from
|
|
docs/design-context-categorization/design-context.html.
|
|
The mosaic landing, tile-to-fullscreen morph, sidebar shell,
|
|
and article vocabulary are the prototype's; only the theme
|
|
plumbing changed (picker vendors the kinpaku tokens and runs
|
|
dark-only, so the light remaps and the standalone token copy
|
|
are gone). Section vars scope to the doc's own roots.
|
|
============================================================ */
|
|
.dcx-shell,
|
|
.dcx-expander {
|
|
--accent: var(--ks-kinpaku);
|
|
--accent-hover: var(--ks-kinpaku-pale);
|
|
--accent-wash: oklch(78% 0.12 82 / 0.1);
|
|
--accent-line: oklch(78% 0.12 82 / 0.32);
|
|
--panel-bg: oklch(11% 0.006 95);
|
|
--shadow-color: oklch(0% 0 0 / 0.4);
|
|
|
|
--viz-ink: var(--ks-text);
|
|
--viz-mist: oklch(78% 0 0 / 0.3);
|
|
--viz-accent: var(--ks-kinpaku);
|
|
|
|
font-family: var(--ks-font);
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--ks-text);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
body.is-locked { overflow: hidden; }
|
|
|
|
/* The document takes the page over: the picker's shell (form, progress,
|
|
hero art) leaves the flow entirely, and the mosaic becomes the page.
|
|
The width gate stands down too: the questionnaire needs a wide viewport,
|
|
but the document has its own stacked layout below 920px. */
|
|
body.dcx-open .picker-shell { display: none; }
|
|
body.dcx-open .picker-width-gate { display: none; }
|
|
body.dcx-open { overflow: hidden; background: linear-gradient(180deg, var(--ks-lacquer), var(--ks-lacquer-deep)); }
|
|
|
|
.dcx-shell {
|
|
height: 100svh;
|
|
max-height: 100svh;
|
|
overflow: hidden;
|
|
background: linear-gradient(180deg, var(--ks-lacquer), var(--ks-lacquer-deep));
|
|
}
|
|
|
|
.dcx-expander code {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.82em;
|
|
color: var(--ks-code-fg);
|
|
background: var(--ks-code-bg);
|
|
border-radius: 3px;
|
|
padding: 0.14em 0.4em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ============================================================
|
|
Mosaic landing
|
|
============================================================ */
|
|
.dcx-shell {
|
|
--dcx-gap: clamp(10px, 0.9vw, 14px);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: var(--dcx-gap) clamp(14px, 2vw, 26px) clamp(16px, 2.2vw, 28px);
|
|
}
|
|
|
|
.dcx-grid {
|
|
position: relative;
|
|
flex: 1 1 0;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(18, minmax(0, 1fr));
|
|
grid-template-rows: repeat(12, minmax(0, 1fr));
|
|
gap: var(--dcx-gap);
|
|
}
|
|
|
|
.dcx-tile--product { grid-column: 1 / 5; grid-row: 1 / 7; --vz-delay: -1.1s; }
|
|
.dcx-tile--brand { grid-column: 5 / 11; grid-row: 1 / 6; --vz-delay: -1.9s; }
|
|
.dcx-tile--audience { grid-column: 11 / 15; grid-row: 1 / 7; --vz-delay: -0.4s; }
|
|
.dcx-tile--typography { grid-column: 15 / 19; grid-row: 1 / 6; --vz-delay: -2.6s; }
|
|
.dcx-tile--color { grid-column: 5 / 10; grid-row: 6 / 13; --vz-delay: -0.7s; }
|
|
.dcx-tile--iconography { grid-column: 1 / 5; grid-row: 7 / 13; --vz-delay: -1.3s; }
|
|
.dcx-tile--interface { grid-column: 10 / 15; grid-row: 7 / 13; --vz-delay: -1.6s; }
|
|
.dcx-tile--material { grid-column: 15 / 19; grid-row: 6 / 13; --vz-delay: -3.2s; }
|
|
|
|
.dcx-tile {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
gap: clamp(12px, 1.6vw, 24px);
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: clamp(18px, 2.2vw, 36px);
|
|
background: var(--panel-bg);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
color: var(--ks-champagne);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
isolation: isolate;
|
|
container-type: inline-size;
|
|
font-family: inherit;
|
|
transition:
|
|
transform 220ms var(--ks-ease),
|
|
border-color 220ms var(--ks-ease),
|
|
background 220ms var(--ks-ease);
|
|
}
|
|
|
|
/* Hover follows the kit's pagination treatment: the surface stays put,
|
|
only the border (and title) take the accent. */
|
|
.dcx-tile:hover,
|
|
.dcx-tile:focus-visible {
|
|
transform: translateY(-2px);
|
|
border-color: var(--accent);
|
|
outline: none;
|
|
}
|
|
|
|
.dcx-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
|
|
|
/* Staggered reveal on load — the homepage foundation-grid treatment. */
|
|
.dcx-tile[data-reveal],
|
|
.dcx-badge[data-reveal] {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition:
|
|
opacity 0.8s var(--ks-ease),
|
|
transform 0.8s var(--ks-ease);
|
|
transition-delay: var(--reveal-delay, 0s);
|
|
}
|
|
|
|
.dcx-badge[data-reveal] { transform: translateY(0) scale(0.6); }
|
|
|
|
.dcx-tile[data-reveal].revealed {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
/* Hand hover transforms back to the fast transition once revealed. */
|
|
transition:
|
|
transform 220ms var(--ks-ease),
|
|
border-color 220ms var(--ks-ease),
|
|
background 220ms var(--ks-ease),
|
|
opacity 0.8s var(--ks-ease);
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
.dcx-badge[data-reveal].revealed {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
|
|
.dcx-tile-title {
|
|
position: relative;
|
|
z-index: 2;
|
|
margin: 0;
|
|
font-family: var(--ks-font-display);
|
|
font-size: clamp(2.3rem, 4.8vw, 4.4rem);
|
|
font-weight: 100;
|
|
line-height: 1.02;
|
|
letter-spacing: 0.01em;
|
|
color: inherit;
|
|
text-wrap: balance;
|
|
transition: color 220ms var(--ks-ease);
|
|
}
|
|
|
|
.dcx-tile:hover .dcx-tile-title,
|
|
.dcx-tile:focus-visible .dcx-tile-title { color: var(--accent); }
|
|
|
|
.dcx-tile--typography .dcx-tile-title,
|
|
.dcx-tile--iconography .dcx-tile-title {
|
|
font-size: min(clamp(2.3rem, 4.8vw, 4.4rem), 20cqw);
|
|
}
|
|
|
|
/* Center mark on the gutter seam — the bare glyph in kinpaku gold,
|
|
inset by the same gap the mosaic tiles use. The padding ring is
|
|
painted page-background so it reads as seam, not as a frame. */
|
|
.dcx-badge {
|
|
position: relative;
|
|
z-index: 0;
|
|
grid-column: 10 / 11;
|
|
grid-row: 6 / 7;
|
|
width: clamp(82px, 7vw, 118px);
|
|
height: clamp(82px, 7vw, 118px);
|
|
display: grid;
|
|
place-items: center;
|
|
align-self: center;
|
|
justify-self: center;
|
|
padding: var(--dcx-gap);
|
|
background: var(--ks-lacquer);
|
|
/* glyph corner radius (~9% of the box) plus the gap, so the ring hugs the mark */
|
|
border-radius: calc(9% + var(--dcx-gap));
|
|
color: var(--ks-kinpaku);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dcx-badge svg { width: 100%; height: 100%; display: block; fill: currentColor; }
|
|
|
|
/* ============================================================
|
|
Tile vignettes — foundation-card animation system.
|
|
The title renders first; the vignette sits below it and scales
|
|
to fill whatever space the tile has left.
|
|
============================================================ */
|
|
.dcx-tile-title { order: 1; }
|
|
|
|
.dcx-tile-viz {
|
|
order: 2;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--viz-ink);
|
|
}
|
|
|
|
.dcx-viz-svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
/* Every vignette stroke uses vector-effect: non-scaling-stroke, so the
|
|
line weight is a fixed pixel value no matter how large the tile lets
|
|
the SVG scale. One thinness across all eight tiles. */
|
|
.dcx-viz-svg .vz-stroke { stroke-width: 3.5px; }
|
|
.dcx-viz-svg .vz-ghost { stroke-width: 2.5px; }
|
|
|
|
@media (max-width: 920px) {
|
|
.dcx-viz-svg .vz-stroke { stroke-width: 1.5px; }
|
|
.dcx-viz-svg .vz-ghost { stroke-width: 1px; }
|
|
}
|
|
|
|
/* Draw (Typography, Material, Brand, Audience figure).
|
|
Same draw-breathe / draw-in choreography as the impeccable homepage.
|
|
The homepage uses stroke-dasharray: 100 in user units, but with
|
|
vector-effect: non-scaling-stroke Chromium measures dashes in screen
|
|
pixels, so a fixed 100 chops scaled-up paths into segments. A script
|
|
sets --pl on each vignette SVG to "100 user units in screen px" and
|
|
the dash keyframes work from that, giving the exact site animation
|
|
at any tile size. */
|
|
.anim-draw {
|
|
stroke-dasharray: var(--pl, 999px);
|
|
stroke-dashoffset: var(--pl, 999px);
|
|
animation: draw-breathe 4s ease-in-out var(--vz-delay, 0s) infinite;
|
|
}
|
|
.dcx-tile:hover .anim-draw { animation: draw-in 0.8s var(--ks-ease) forwards; }
|
|
.anim-draw-delay {
|
|
stroke-dasharray: var(--pl, 999px);
|
|
stroke-dashoffset: var(--pl, 999px);
|
|
}
|
|
.dcx-tile:hover .anim-draw-delay { animation: draw-in 1s var(--ks-ease) 0.2s forwards; }
|
|
@keyframes draw-breathe {
|
|
0%, 100% { stroke-dashoffset: var(--pl, 999px); }
|
|
50% { stroke-dashoffset: calc(var(--pl, 999px) * 0.4); }
|
|
}
|
|
@keyframes draw-in {
|
|
from { stroke-dashoffset: var(--pl, 999px); }
|
|
to { stroke-dashoffset: 0px; }
|
|
}
|
|
|
|
/* Color venn (breathing pulse, spread on hover) */
|
|
.anim-move-x { animation: pulse-x 3s ease-in-out var(--vz-delay, 0s) infinite; }
|
|
.dcx-tile:hover .anim-move-x { animation: spread-x 0.6s ease-in-out forwards; }
|
|
.anim-move-x-opp { animation: pulse-x-opp 3s ease-in-out var(--vz-delay, 0s) infinite; }
|
|
.dcx-tile:hover .anim-move-x-opp { animation: spread-x-opp 0.6s ease-in-out forwards; }
|
|
.anim-fade-in { opacity: 0; transition: opacity 0.6s ease-in-out; }
|
|
.dcx-tile:hover .anim-fade-in { opacity: 1; }
|
|
@keyframes pulse-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
|
|
@keyframes pulse-x-opp { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.5px); } }
|
|
@keyframes spread-x { from { transform: translateX(0); } to { transform: translateX(4px); } }
|
|
@keyframes spread-x-opp { from { transform: translateX(0); } to { transform: translateX(-4px); } }
|
|
|
|
/* Interface toggle (gentle drift, full snap on hover) */
|
|
.anim-toggle-move { animation: toggle-drift 3s ease-in-out var(--vz-delay, 0s) infinite; }
|
|
.dcx-tile:hover .anim-toggle-move { animation: toggle-snap 0.35s ease-in-out forwards; }
|
|
@keyframes toggle-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
|
|
@keyframes toggle-snap {
|
|
from { transform: translateX(0); fill: var(--viz-mist); }
|
|
to { transform: translateX(8px); fill: var(--viz-accent); }
|
|
}
|
|
|
|
/* Product pitch lines (cursor always blinks) */
|
|
.anim-blink { animation: blink-key 1s step-end var(--vz-delay, 0s) infinite; }
|
|
@keyframes blink-key { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
|
|
|
|
/* Iconography glyph grid. At rest the four glyphs brighten one by one on
|
|
a shared 4.8s cycle (1.2s apart). Opacity only — scaling the glyphs
|
|
blurs the strokes into a halo and makes them balloon. Hovering kills
|
|
the cycle and lights all four with a small stagger. */
|
|
.anim-pop {
|
|
opacity: 0.35;
|
|
transition: opacity 0.35s var(--ks-ease);
|
|
animation: pop-glow 4.8s ease-in-out infinite;
|
|
}
|
|
.anim-pop-1 { transition-delay: 0s; animation-delay: calc(var(--vz-delay, 0s) + 0s); }
|
|
.anim-pop-2 { transition-delay: 0.07s; animation-delay: calc(var(--vz-delay, 0s) + 1.2s); }
|
|
.anim-pop-3 { transition-delay: 0.14s; animation-delay: calc(var(--vz-delay, 0s) + 2.4s); }
|
|
.anim-pop-4 { transition-delay: 0.21s; animation-delay: calc(var(--vz-delay, 0s) + 3.6s); }
|
|
.dcx-tile:hover .anim-pop { animation: none; opacity: 1; }
|
|
@keyframes pop-glow {
|
|
0%, 25%, 100% { opacity: 0.35; }
|
|
10% { opacity: 1; }
|
|
}
|
|
|
|
/* Audience second figure joins on hover */
|
|
.anim-join { opacity: 0.25; transition: opacity 0.5s var(--ks-ease); }
|
|
.dcx-tile:hover .anim-join { opacity: 1; }
|
|
|
|
/* Typography: ink-only at rest; gold draws in on hover. */
|
|
.dcx-tile--typography:not(:hover) .anim-join {
|
|
opacity: 0;
|
|
}
|
|
|
|
.dcx-tile--typography:not(:hover) :is(.anim-draw, .anim-draw-delay) {
|
|
animation: none;
|
|
stroke-dashoffset: var(--pl, 999px);
|
|
}
|
|
|
|
/* Material: wireframe reads quieter than full ink until hover. */
|
|
.dcx-tile--material .dcx-viz-svg :is(rect, line).vz-stroke {
|
|
transition: stroke 220ms var(--ks-ease);
|
|
}
|
|
|
|
.dcx-tile--material:not(:hover) .dcx-viz-svg :is(rect, line).vz-stroke {
|
|
stroke: var(--viz-mist);
|
|
}
|
|
|
|
/* ============================================================
|
|
Expander — tile-to-fullscreen morph
|
|
============================================================ */
|
|
.dcx-expander {
|
|
position: fixed;
|
|
z-index: 500;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
background: var(--ks-lacquer);
|
|
color: var(--ks-text);
|
|
box-shadow: 0 18px 46px var(--shadow-color);
|
|
transition:
|
|
top 520ms var(--ks-ease),
|
|
left 520ms var(--ks-ease),
|
|
width 520ms var(--ks-ease),
|
|
height 520ms var(--ks-ease),
|
|
border-radius 520ms var(--ks-ease);
|
|
}
|
|
|
|
.dcx-expander.is-full {
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100vw !important;
|
|
height: 100svh !important;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.dcx-expander-inner {
|
|
width: 100%;
|
|
height: 100svh;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: 264px minmax(0, 1fr);
|
|
opacity: 0;
|
|
transform: translateY(44px);
|
|
transition: opacity 420ms var(--ks-ease), transform 520ms var(--ks-ease);
|
|
transition-delay: 260ms;
|
|
}
|
|
|
|
.dcx-expander.is-ready .dcx-expander-inner { opacity: 1; transform: translateY(0); }
|
|
|
|
/* ============================================================
|
|
Expander sidebar — DocsSidebar visual language
|
|
============================================================ */
|
|
.dcx-sidebar {
|
|
min-height: 0;
|
|
overflow: hidden auto;
|
|
padding: 26px 22px 32px;
|
|
border-right: 1px solid var(--ks-rule);
|
|
background: var(--ks-lacquer-deep);
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--ks-rule) transparent;
|
|
}
|
|
|
|
.dcx-sidebar-brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 2px 0 28px;
|
|
color: var(--ks-kinpaku);
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
.dcx-sidebar-brand svg { width: 26px; height: 26px; fill: currentColor; flex-shrink: 0; }
|
|
|
|
.dcx-sidebar-brand-name {
|
|
font-family: var(--ks-font-display);
|
|
font-weight: 400;
|
|
font-size: 1.02rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: auto;
|
|
}
|
|
|
|
.dcx-nav-label {
|
|
display: block;
|
|
font-size: 0.72rem;
|
|
font-weight: 650;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
margin-bottom: 10px;
|
|
padding-left: 14px;
|
|
}
|
|
|
|
.dcx-nav-list { list-style: none; padding: 0; margin: 0; }
|
|
.dcx-nav-list li { margin: 0; }
|
|
|
|
.dcx-nav-link {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 5px 0 5px 12px;
|
|
border: 0;
|
|
border-left: 2px solid transparent;
|
|
background: transparent;
|
|
font-family: var(--ks-font);
|
|
font-size: 0.94rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: var(--ks-text);
|
|
text-align: left;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: color 160ms var(--ks-ease), border-color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.dcx-nav-link:hover,
|
|
.dcx-nav-link:focus-visible { color: var(--accent-hover); outline: none; }
|
|
|
|
.dcx-nav-link[aria-current="page"] {
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
border-left-color: var(--accent);
|
|
}
|
|
|
|
.dcx-subnav { display: none; padding: 2px 0 8px 24px; }
|
|
|
|
.dcx-nav-list li.is-active .dcx-subnav {
|
|
display: grid;
|
|
gap: 2px;
|
|
animation: subnav-in 180ms var(--ks-ease) both;
|
|
}
|
|
|
|
@keyframes subnav-in {
|
|
from { opacity: 0; transform: translateY(-4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.dcx-sub-link {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 3px 0;
|
|
border: 0;
|
|
background: transparent;
|
|
font-family: var(--ks-font);
|
|
font-size: 0.85rem;
|
|
color: var(--ks-text-muted);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.dcx-sub-link:hover,
|
|
.dcx-sub-link:focus-visible { color: var(--accent-hover); outline: none; }
|
|
|
|
/* ============================================================
|
|
Expander topbar + main
|
|
============================================================ */
|
|
.dcx-panel {
|
|
position: relative;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-rows: 64px minmax(0, 1fr);
|
|
}
|
|
|
|
.dcx-topbar {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 0 clamp(22px, 4vw, 48px);
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
.dcx-current {
|
|
min-width: 0;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dcx-close {
|
|
flex-shrink: 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--ks-text);
|
|
cursor: pointer;
|
|
transition:
|
|
color 160ms var(--ks-ease),
|
|
border-color 160ms var(--ks-ease),
|
|
transform 220ms var(--ks-ease);
|
|
}
|
|
|
|
.dcx-close:hover,
|
|
.dcx-close:focus-visible {
|
|
color: var(--accent);
|
|
border-color: var(--accent-line);
|
|
transform: rotate(90deg);
|
|
outline: none;
|
|
}
|
|
|
|
.dcx-close::before,
|
|
.dcx-close::after {
|
|
content: "";
|
|
grid-area: 1 / 1;
|
|
width: 16px;
|
|
height: 1.5px;
|
|
background: currentColor;
|
|
}
|
|
|
|
.dcx-close::before { transform: rotate(45deg); }
|
|
.dcx-close::after { transform: rotate(-45deg); }
|
|
|
|
.dcx-main {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--ks-rule) transparent;
|
|
}
|
|
|
|
.dcx-main:focus { outline: none; }
|
|
|
|
/* ============================================================
|
|
Article
|
|
============================================================ */
|
|
/* Wide enough for the questionnaire's own drawings to breathe; running text
|
|
holds its measure through the caps on lede, defs, and callouts below. */
|
|
.dcx-article {
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
padding: clamp(36px, 5vw, 64px) clamp(22px, 4vw, 56px) 110px;
|
|
}
|
|
|
|
.dcx-eyebrow {
|
|
display: block;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.dcx-title {
|
|
margin: 0 0 18px;
|
|
font-family: var(--ks-font-display);
|
|
font-weight: 100;
|
|
font-size: clamp(3rem, 6vw, 5.2rem);
|
|
line-height: 1.02;
|
|
letter-spacing: -0.01em;
|
|
color: var(--ks-kinpaku);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
|
|
.dcx-lede {
|
|
margin: 0;
|
|
max-width: 56ch;
|
|
font-size: 1.08rem;
|
|
line-height: 1.65;
|
|
color: var(--ks-text);
|
|
}
|
|
|
|
.dcx-block { margin-top: clamp(34px, 5vw, 52px); }
|
|
|
|
.dcx-block-label {
|
|
display: block;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-faint);
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
/* Definition rows: term + description. */
|
|
.dcx-defs { border-top: 1px solid var(--ks-rule); }
|
|
|
|
.dcx-def {
|
|
display: grid;
|
|
grid-template-columns: minmax(180px, 0.44fr) minmax(0, 1fr);
|
|
gap: 6px 26px;
|
|
align-items: baseline;
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
.dcx-def dt {
|
|
margin: 0;
|
|
font-size: 0.98rem;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.dcx-def dd {
|
|
margin: 0;
|
|
font-size: 0.92rem;
|
|
line-height: 1.55;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
/* Chips. */
|
|
.dcx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
|
|
.dcx-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 6px 13px;
|
|
border: 1px solid var(--accent-line);
|
|
border-radius: 999px;
|
|
background: var(--accent-wash);
|
|
color: var(--accent-hover);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
.dcx-chip--muted {
|
|
border-color: var(--ks-rule);
|
|
background: transparent;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
/* Callout card (north star, named rules). */
|
|
.dcx-callout {
|
|
padding: clamp(20px, 3vw, 30px);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 10px;
|
|
background: var(--panel-bg);
|
|
}
|
|
|
|
.dcx-callout + .dcx-callout { margin-top: 12px; }
|
|
|
|
.dcx-callout-name {
|
|
margin: 0 0 8px;
|
|
font-size: 1.02rem;
|
|
font-weight: 600;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.dcx-callout p:not(.dcx-callout-name) {
|
|
margin: 0;
|
|
font-size: 0.92rem;
|
|
line-height: 1.6;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.dcx-callout--accent { border-color: var(--accent-line); background: var(--accent-wash); }
|
|
|
|
/* ============================================================
|
|
Context enrichment: the success line, paired callouts, the
|
|
needs/trust columns, the platform pill, reference cards, and
|
|
the operating-context prose. Each rule exists for a block
|
|
that renders only when the agent passed the matching context
|
|
field; every value is a dcx or ks token already in this file.
|
|
============================================================ */
|
|
.dcx-callout p.dcx-callout-success {
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
/* Two callouts sharing a row: the emotional journey's arrival and
|
|
leaving beats, and positioning's not-this / this cells. */
|
|
.dcx-callout-pair {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Two sibling blocks sharing a row (needs beside trust triggers). The
|
|
children stay real .dcx-block elements so the subnav still finds them. */
|
|
.dcx-cols {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
|
|
gap: 0 clamp(24px, 4vw, 48px);
|
|
align-items: start;
|
|
}
|
|
|
|
/* The purpose callout with the platform pill at its shoulder. */
|
|
.dcx-purpose {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 14px;
|
|
align-items: start;
|
|
}
|
|
|
|
.dcx-platform-pill {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Named references as cards, the .dcx-pick anatomy with a takeaway. */
|
|
.dcx-ref-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
|
|
gap: clamp(14px, 2vw, 22px);
|
|
}
|
|
|
|
.dcx-ref-cards + .dcx-chips { margin-top: 12px; }
|
|
|
|
.dcx-ref-card {
|
|
border: 1px solid var(--ks-rule);
|
|
background: var(--panel-bg);
|
|
padding: clamp(18px, 2.5vw, 26px);
|
|
}
|
|
|
|
.dcx-ref-name {
|
|
margin: 0 0 8px;
|
|
font-family: var(--ks-font-display);
|
|
font-weight: 300;
|
|
font-size: 1.3rem;
|
|
color: var(--ks-text);
|
|
}
|
|
|
|
.dcx-ref-takeaway {
|
|
margin: 0;
|
|
color: var(--ks-text-muted);
|
|
font-size: 0.92rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Operating context: one paragraph at reading measure. */
|
|
.dcx-prose {
|
|
margin: 0;
|
|
max-width: 62ch;
|
|
color: var(--ks-text-muted);
|
|
font-size: 0.96rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Numbered principle list. */
|
|
.dcx-principles {
|
|
list-style: none;
|
|
counter-reset: principle;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-top: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
.dcx-principles li {
|
|
counter-increment: principle;
|
|
display: grid;
|
|
grid-template-columns: 44px minmax(0, 1fr);
|
|
gap: 20px;
|
|
align-items: baseline;
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
font-size: 0.94rem;
|
|
line-height: 1.55;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.dcx-principles li::before {
|
|
content: counter(principle, decimal-leading-zero);
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.78rem;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.dcx-principles strong { color: var(--ks-champagne); font-weight: 600; }
|
|
|
|
/* Plain bullet list. */
|
|
.dcx-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: 9px;
|
|
}
|
|
|
|
.dcx-list li {
|
|
position: relative;
|
|
padding-left: 20px;
|
|
font-size: 0.94rem;
|
|
line-height: 1.55;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.dcx-list li::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 0.62em;
|
|
width: 7px;
|
|
height: 1.5px;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.dcx-list strong { color: var(--ks-champagne); font-weight: 600; }
|
|
|
|
/* Swatch fan (Color) — hover fans up, click copies. */
|
|
.dcx-fan {
|
|
position: relative;
|
|
height: clamp(150px, 16vw, 195px);
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
|
|
.dcx-fan::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; right: 0; bottom: 0;
|
|
z-index: 30;
|
|
height: 1px;
|
|
background: var(--ks-rule);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dcx-fan-panel {
|
|
position: absolute;
|
|
inset-block: 0;
|
|
left: var(--panel-left);
|
|
z-index: var(--panel-z);
|
|
width: var(--panel-width, 40%);
|
|
border: 0;
|
|
border-radius: 22px 22px 0 0;
|
|
padding: 0;
|
|
background: var(--panel-swatch);
|
|
box-shadow: inset 0 0 0 1px oklch(78% 0 0 / 0.14);
|
|
color: var(--panel-ink);
|
|
cursor: copy;
|
|
text-align: left;
|
|
transform: translate3d(0, 58%, 0);
|
|
transform-origin: 50% 100%;
|
|
transition:
|
|
transform 740ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
filter 460ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
will-change: transform;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.dcx-fan.is-engaged .dcx-fan-panel { transform: translate3d(0, 54%, 0); }
|
|
.dcx-fan.is-engaged .dcx-fan-panel.is-neighbor { transform: translate3d(0, 48%, 0); }
|
|
|
|
.dcx-fan.is-engaged .dcx-fan-panel.is-active,
|
|
.dcx-fan-panel:focus-visible,
|
|
.dcx-fan-panel.is-copied {
|
|
outline: none;
|
|
filter: saturate(1.04);
|
|
transform: translate3d(0, 10%, 0) rotate(-0.48deg);
|
|
}
|
|
|
|
.dcx-fan-info {
|
|
position: absolute;
|
|
top: clamp(20px, 2.6vw, 34px);
|
|
left: clamp(20px, 2.6vw, 34px);
|
|
right: clamp(20px, 2.6vw, 34px);
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
transition: opacity 320ms var(--ks-ease), transform 420ms var(--ks-ease);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dcx-fan-panel.is-active .dcx-fan-info,
|
|
.dcx-fan-panel:focus-visible .dcx-fan-info,
|
|
.dcx-fan-panel.is-copied .dcx-fan-info { opacity: 1; transform: translateY(0); }
|
|
|
|
.dcx-fan-name {
|
|
margin: 0;
|
|
font-family: var(--ks-font);
|
|
font-size: clamp(0.95rem, 1.6vw, 1.3rem);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dcx-fan-value {
|
|
margin: 0;
|
|
flex: 0 0 auto;
|
|
font-family: var(--ks-mono);
|
|
font-size: clamp(0.6rem, 1vw, 0.72rem);
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.82;
|
|
}
|
|
|
|
.dcx-fan-note {
|
|
margin: 10px 0 0;
|
|
font-size: 0.8rem;
|
|
color: var(--ks-text-faint);
|
|
}
|
|
|
|
/* Type specimen (Typography) — set in the project's real faces. */
|
|
.dcx-specimen {
|
|
display: grid;
|
|
gap: 18px;
|
|
padding: clamp(24px, 3.4vw, 40px);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 10px;
|
|
background: var(--panel-bg);
|
|
}
|
|
|
|
.dcx-specimen-display {
|
|
margin: 0;
|
|
font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
|
|
font-weight: 400;
|
|
font-size: clamp(2.2rem, 4.6vw, 3.6rem);
|
|
line-height: 1.15;
|
|
color: var(--ks-champagne);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.dcx-specimen-body {
|
|
margin: 0;
|
|
max-width: 62ch;
|
|
font-family: "Source Sans 3", system-ui, sans-serif;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.dcx-specimen-label {
|
|
margin: 0;
|
|
font-family: "Source Sans 3", system-ui, sans-serif;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-faint);
|
|
}
|
|
|
|
/* Radius samples (Material). */
|
|
.dcx-radius-row { display: flex; flex-wrap: wrap; gap: 18px; }
|
|
|
|
.dcx-radius-sample { display: grid; gap: 8px; justify-items: center; }
|
|
|
|
.dcx-radius-box {
|
|
width: 76px;
|
|
height: 76px;
|
|
border: 1.5px solid var(--accent-line);
|
|
background: var(--accent-wash);
|
|
}
|
|
|
|
.dcx-radius-caption {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.68rem;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
/* Spacing scale bars (Material). */
|
|
.dcx-space-rows { display: grid; gap: 8px; }
|
|
|
|
.dcx-space-row {
|
|
display: grid;
|
|
grid-template-columns: 74px minmax(0, 1fr) 84px;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.dcx-space-name,
|
|
.dcx-space-value {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.7rem;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.dcx-space-value { text-align: right; color: var(--ks-text-faint); }
|
|
|
|
.dcx-space-bar {
|
|
height: 12px;
|
|
width: var(--bar, 20%);
|
|
min-width: 6px;
|
|
border-radius: 3px;
|
|
background: var(--accent-wash);
|
|
border: 1px solid var(--accent-line);
|
|
}
|
|
|
|
/* Empty state (Iconography). */
|
|
.dcx-empty {
|
|
padding: clamp(26px, 4vw, 40px);
|
|
border: 1px dashed var(--ks-rule);
|
|
border-radius: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
.dcx-empty-title {
|
|
margin: 0 0 8px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.dcx-empty p:not(.dcx-empty-title) {
|
|
margin: 0;
|
|
font-size: 0.92rem;
|
|
line-height: 1.6;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
/* ============================================================
|
|
Responsive fallback
|
|
============================================================ */
|
|
@media (max-width: 920px) {
|
|
.dcx-shell { padding: 10px; }
|
|
|
|
.dcx-grid {
|
|
height: auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.dcx-tile {
|
|
grid-column: auto;
|
|
grid-row: auto;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
grid-template-rows: auto;
|
|
align-items: center;
|
|
align-content: center;
|
|
gap: 16px;
|
|
min-height: clamp(72px, 9svh, 104px);
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
/* Compact row: title left, small vignette right. */
|
|
.dcx-tile-viz { width: 44px; height: 44px; }
|
|
|
|
.dcx-tile-title,
|
|
.dcx-tile--typography .dcx-tile-title,
|
|
.dcx-tile--iconography .dcx-tile-title {
|
|
font-size: clamp(1.9rem, 8vw, 2.6rem);
|
|
}
|
|
|
|
.dcx-tile--product { order: 1; }
|
|
.dcx-tile--audience { order: 2; }
|
|
.dcx-tile--brand { order: 3; }
|
|
.dcx-tile--color { order: 4; }
|
|
.dcx-tile--typography { order: 5; }
|
|
.dcx-tile--iconography { order: 6; }
|
|
.dcx-tile--material { order: 7; }
|
|
.dcx-tile--interface { order: 8; }
|
|
|
|
.dcx-badge { display: none; }
|
|
|
|
.dcx-expander-inner {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.dcx-sidebar {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dcx-sidebar-brand { margin: 0; }
|
|
.dcx-sidebar-brand-name { display: none; }
|
|
.dcx-nav-label { display: none; }
|
|
|
|
.dcx-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
|
|
.dcx-nav::-webkit-scrollbar { display: none; }
|
|
.dcx-nav-list { display: flex; gap: 4px; }
|
|
|
|
.dcx-nav-link {
|
|
width: auto;
|
|
padding: 8px 10px;
|
|
border-left: 0;
|
|
border-bottom: 2px solid transparent;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dcx-nav-link[aria-current="page"] {
|
|
border-left-color: transparent;
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
|
|
.dcx-nav-list li.is-active .dcx-subnav { display: none; }
|
|
|
|
.dcx-panel { grid-template-rows: 56px minmax(0, 1fr); }
|
|
.dcx-topbar { padding: 0 16px; }
|
|
.dcx-article { padding: 30px 18px 84px; }
|
|
|
|
.dcx-def { grid-template-columns: 1fr; gap: 4px; }
|
|
|
|
.dcx-fan { height: 210px; }
|
|
|
|
.dcx-fan-info {
|
|
top: 18px; left: 16px; right: 16px;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
|
|
.dcx-space-row { grid-template-columns: 58px minmax(0, 1fr) 70px; }
|
|
}
|
|
|
|
/* ============================================================
|
|
Borrowed proofs — questionnaire drawings inside the document.
|
|
|
|
A .dcx-proof frames a clone of a drawing the questionnaire
|
|
painted: a surface's dual artboard, the type scale sheet, the
|
|
long-form specimen, the icon grid. The clone arrives with its
|
|
inline variables; the frame supplies the context selectors the
|
|
originals took from their screens.
|
|
============================================================ */
|
|
.dcx-proof {
|
|
border: 1px solid var(--ks-rule);
|
|
background: var(--panel-bg);
|
|
padding: clamp(14px, 2vw, 22px);
|
|
}
|
|
|
|
/* The strategy stage's base mapping, restated for clones that live outside
|
|
it: the artboard reads the committed palette painted on the frame. */
|
|
.dcx-proof--board > .picker-preview {
|
|
--pv-primary: var(--pkc-primary, var(--ks-champagne));
|
|
--pv-secondary: var(--pkc-secondary, var(--ks-patina));
|
|
--pv-tertiary: var(--pkc-tertiary, var(--ks-kinpaku));
|
|
--pv-neutral: var(--pkc-neutral, var(--ks-lacquer-raised));
|
|
--pv-n-ink: var(--pkc-n-ink, var(--ks-champagne));
|
|
--pv-p-ink: var(--pkc-p-ink, var(--ks-champagne));
|
|
}
|
|
|
|
/* The three strategy remaps, mirrored from picker.css's strategy stage.
|
|
There they key off hover and checked state inside #picker-form; here the
|
|
answer is settled, so a data attribute on the frame carries it. Change the
|
|
remap bodies in both places together. */
|
|
.dcx-proof--board[data-dcx-strategy="restrained"] > .picker-preview {
|
|
--pv-secondary: color-mix(in oklab, var(--pkc-neutral) 78%, var(--pkc-n-ink));
|
|
--pv-tertiary: color-mix(in oklab, var(--pkc-neutral) 86%, var(--pkc-n-ink));
|
|
--pv-t-ink: var(--pkc-n-ink);
|
|
--pv-t-on-t: var(--pkc-n-ink);
|
|
--pv-t-on-n: color-mix(in oklab, var(--pkc-n-ink) 62%, var(--pkc-neutral));
|
|
--pv-t-on-p: var(--pkc-p-ink);
|
|
}
|
|
|
|
.dcx-proof--board[data-dcx-strategy="committed"] > .picker-preview {
|
|
--pv-neutral: color-mix(in oklab, var(--pkc-neutral) 95%, var(--pkc-primary));
|
|
--pv-secondary: var(--pkc-primary);
|
|
--pv-tertiary: var(--pkc-primary);
|
|
--pv-t-ink: var(--pkc-p-ink);
|
|
--pv-t-on-t: var(--pkc-p-on-p);
|
|
--pv-t-on-n: var(--pkc-p-on-n);
|
|
--pv-t-on-p: var(--pkc-p-on-p);
|
|
}
|
|
|
|
.dcx-proof--board[data-dcx-strategy="drenched"] > .picker-preview {
|
|
--pv-neutral: var(--pkc-primary);
|
|
--pv-n-ink: var(--pkc-p-ink);
|
|
--pv-primary: var(--pkc-p-ink);
|
|
--pv-p-ink: var(--pkc-primary);
|
|
--pv-p-on-n: var(--pkc-p-ink);
|
|
--pv-p-on-p: var(--pkc-primary);
|
|
--pv-secondary: var(--pkc-tertiary);
|
|
--pv-tertiary: var(--pkc-tertiary);
|
|
--pv-t-on-n: var(--pkc-t-on-p);
|
|
}
|
|
|
|
/* The scale sheet and specimen size themselves against their rail on screen
|
|
05; in the document they stand at natural height and full width. */
|
|
.dcx-proof--scale > .picker-scale-sheet {
|
|
grid-template-rows: none;
|
|
height: auto;
|
|
row-gap: 10px;
|
|
}
|
|
|
|
.dcx-proof--specimen > .picker-scale-specimen {
|
|
height: auto;
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.dcx-proof--icons > .picker-icon-sheet {
|
|
height: auto;
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
/* ============================================================
|
|
Surface cards — the tile anatomy, kept.
|
|
============================================================ */
|
|
.dcx-surfaces {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
|
|
gap: clamp(18px, 2.5vw, 28px);
|
|
}
|
|
|
|
.dcx-surfaces[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
|
|
|
|
.dcx-surface-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dcx-surface-copy { padding: 0 2px; }
|
|
|
|
.dcx-surface-name {
|
|
margin: 0 0 8px;
|
|
font-family: var(--ks-font-display);
|
|
font-weight: 300;
|
|
font-size: 1.45rem;
|
|
letter-spacing: 0.01em;
|
|
color: var(--ks-text);
|
|
}
|
|
|
|
.dcx-surface-name em {
|
|
font-style: normal;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.dcx-surface-goal {
|
|
margin: 0 0 12px;
|
|
max-width: 52ch;
|
|
color: var(--ks-text-muted);
|
|
font-size: 0.94rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.dcx-default-mark {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-left: 6px;
|
|
padding: 2px 8px;
|
|
border: 1px solid var(--ks-rule);
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.62rem;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-faint);
|
|
}
|
|
|
|
/* ============================================================
|
|
Swatch board — each role at real size, both notations.
|
|
============================================================ */
|
|
.dcx-swatches {
|
|
display: grid;
|
|
gap: clamp(14px, 2vw, 20px);
|
|
}
|
|
|
|
.dcx-swatch {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
|
|
gap: clamp(16px, 2.5vw, 30px);
|
|
align-items: center;
|
|
}
|
|
|
|
.dcx-swatch-chip {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
min-height: 128px;
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--ks-rule);
|
|
background: var(--swatch);
|
|
color: var(--swatch-ink);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
text-align: left;
|
|
transition: transform 0.25s var(--ks-ease);
|
|
}
|
|
|
|
.dcx-swatch-chip:hover { transform: translateY(-2px); }
|
|
|
|
.dcx-swatch-chip:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.dcx-swatch-hex {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.88rem;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.dcx-swatch-copy-hint {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 14px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.62rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
opacity: 0;
|
|
transition: opacity 0.2s var(--ks-ease);
|
|
}
|
|
|
|
.dcx-swatch-chip:hover .dcx-swatch-copy-hint,
|
|
.dcx-swatch-chip:focus-visible .dcx-swatch-copy-hint { opacity: 0.85; }
|
|
|
|
.dcx-swatch-meta h3 {
|
|
margin: 0 0 6px;
|
|
font-family: var(--ks-font-display);
|
|
font-weight: 300;
|
|
font-size: 1.3rem;
|
|
color: var(--ks-text);
|
|
}
|
|
|
|
.dcx-swatch-meta p {
|
|
margin: 0 0 8px;
|
|
max-width: 40ch;
|
|
color: var(--ks-text-muted);
|
|
font-size: 0.9rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.dcx-swatch-meta code {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.78rem;
|
|
color: var(--ks-text-faint);
|
|
}
|
|
|
|
/* ============================================================
|
|
Font pair — the fonttrio anatomy from the font screen.
|
|
============================================================ */
|
|
.dcx-pair {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
|
|
gap: clamp(16px, 2.5vw, 26px);
|
|
}
|
|
|
|
.dcx-pair-card {
|
|
border: 1px solid var(--ks-rule);
|
|
background: var(--panel-bg);
|
|
padding: clamp(20px, 3vw, 32px);
|
|
}
|
|
|
|
.dcx-pair-role {
|
|
display: block;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.66rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-faint);
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.dcx-pair-name {
|
|
margin: 0;
|
|
font-size: clamp(2.1rem, 4vw, 3.2rem);
|
|
line-height: 1.1;
|
|
color: var(--ks-text);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.dcx-pair-source {
|
|
display: inline-block;
|
|
margin-top: 12px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.74rem;
|
|
color: var(--ks-text-faint);
|
|
}
|
|
|
|
.dcx-pair-why {
|
|
margin: 18px 0 0;
|
|
max-width: 62ch;
|
|
font-size: 1.02rem;
|
|
line-height: 1.65;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.dcx-scale-head {
|
|
margin: 0 0 16px;
|
|
max-width: 62ch;
|
|
color: var(--ks-text-muted);
|
|
font-size: 0.96rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.dcx-scale-head strong { color: var(--ks-text); font-weight: 500; }
|
|
|
|
/* ============================================================
|
|
Pick grid — one card per surface for the material questions.
|
|
============================================================ */
|
|
.dcx-picks {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
|
|
gap: clamp(14px, 2vw, 22px);
|
|
}
|
|
|
|
.dcx-pick {
|
|
border: 1px solid var(--ks-rule);
|
|
background: var(--panel-bg);
|
|
padding: clamp(18px, 2.5vw, 26px);
|
|
}
|
|
|
|
.dcx-pick-surface {
|
|
display: block;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.66rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-faint);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.dcx-pick-title {
|
|
margin: 0 0 8px;
|
|
font-family: var(--ks-font-display);
|
|
font-weight: 300;
|
|
font-size: 1.5rem;
|
|
color: var(--ks-text);
|
|
}
|
|
|
|
.dcx-pick-desc {
|
|
margin: 0;
|
|
color: var(--ks-text-muted);
|
|
font-size: 0.92rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ============================================================
|
|
Decision matrix — the Interface category's per-surface recap.
|
|
============================================================ */
|
|
.dcx-matrix {
|
|
margin: 0;
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.dcx-matrix-row {
|
|
display: grid;
|
|
grid-template-columns: 130px minmax(0, 1fr);
|
|
gap: 12px;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid color-mix(in oklab, var(--ks-rule) 60%, transparent);
|
|
}
|
|
|
|
.dcx-matrix-row dt {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-faint);
|
|
align-self: center;
|
|
}
|
|
|
|
.dcx-matrix-row dd {
|
|
margin: 0;
|
|
color: var(--ks-text);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
@media (max-width: 920px) {
|
|
.dcx-swatch { grid-template-columns: 1fr; }
|
|
.dcx-matrix-row { grid-template-columns: 110px minmax(0, 1fr); }
|
|
}
|
|
|
|
/* ============================================================
|
|
Live editing — affordances appear once the edit session is up
|
|
(body.dcx-live), and stand down when it goes away.
|
|
============================================================ */
|
|
.dcx-edit,
|
|
.dcx-request {
|
|
display: none;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 14px;
|
|
border: 1px solid var(--ks-rule);
|
|
background: transparent;
|
|
color: var(--ks-text-muted);
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: color 0.2s var(--ks-ease), border-color 0.2s var(--ks-ease);
|
|
}
|
|
|
|
body.dcx-live .dcx-edit,
|
|
body.dcx-live .dcx-request { display: inline-flex; }
|
|
|
|
.dcx-edit:hover,
|
|
.dcx-request:hover {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.dcx-edit:focus-visible,
|
|
.dcx-request:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.dcx-swatch-actions {
|
|
position: relative;
|
|
display: block;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* Same trick as the palette screen's custom-color input: present for the
|
|
picker dialog, invisible to layout. */
|
|
.dcx-native-color {
|
|
position: absolute;
|
|
inset: auto auto 0 0;
|
|
width: 1px;
|
|
height: 1px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.dcx-pair-why + .dcx-edit { margin-top: 18px; }
|
|
|
|
.dcx-topbar .dcx-request { margin-left: auto; margin-right: 14px; }
|
|
|
|
/* The topbar is a grid of current + close today; let the request button sit
|
|
between them without re-authoring the bar. */
|
|
.dcx-topbar { display: flex; align-items: center; }
|
|
.dcx-topbar .dcx-current { flex: 1; min-width: 0; }
|
|
|
|
/* ============================================================
|
|
Request tray — queued work and its status, bottom right.
|
|
============================================================ */
|
|
.dcx-tray {
|
|
position: fixed;
|
|
right: 22px;
|
|
bottom: 22px;
|
|
z-index: 300;
|
|
display: grid;
|
|
gap: 10px;
|
|
width: min(340px, calc(100vw - 44px));
|
|
}
|
|
|
|
.dcx-tray[hidden] { display: none; }
|
|
|
|
.dcx-tray-item {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: 12px;
|
|
align-items: start;
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--ks-rule);
|
|
background: var(--panel-bg);
|
|
box-shadow: 0 12px 32px rgb(0 0 0 / 0.35);
|
|
}
|
|
|
|
.dcx-tray-dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
margin-top: 5px;
|
|
border-radius: 50%;
|
|
background: var(--ks-text-faint);
|
|
}
|
|
|
|
.dcx-tray-item[data-status="pending"] .dcx-tray-dot { background: var(--ks-text-muted); }
|
|
|
|
.dcx-tray-item[data-status="working"] .dcx-tray-dot {
|
|
background: var(--accent);
|
|
animation: dcx-tray-pulse 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
.dcx-tray-item[data-status="done"] .dcx-tray-dot { background: var(--ks-patina, #7ba98f); }
|
|
.dcx-tray-item[data-status="error"] .dcx-tray-dot,
|
|
.dcx-tray-item[data-status="offline"] .dcx-tray-dot { background: #c26d5a; }
|
|
|
|
@keyframes dcx-tray-pulse {
|
|
50% { opacity: 0.35; }
|
|
}
|
|
|
|
.dcx-tray-prompt {
|
|
margin: 0 0 3px;
|
|
font-size: 0.86rem;
|
|
line-height: 1.4;
|
|
color: var(--ks-text);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dcx-tray-note {
|
|
margin: 0;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.66rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-faint);
|
|
}
|
|
|
|
/* ============================================================
|
|
Request modal — rides the picker's modal shell.
|
|
============================================================ */
|
|
.dcx-request-modal .dcx-request-prompt {
|
|
width: 100%;
|
|
resize: vertical;
|
|
min-height: 96px;
|
|
}
|
|
|
|
/* ============================================================
|
|
Reduced motion
|
|
============================================================ */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[class^="dcx-"], [class^="dcx-"]::before, [class^="dcx-"]::after,
|
|
[class*=" dcx-"], [class*=" dcx-"]::before, [class*=" dcx-"]::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
transition-delay: 0ms !important;
|
|
}
|
|
|
|
.dcx-tile[data-reveal],
|
|
.dcx-badge[data-reveal] {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|