mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Paul BakausandClaude Opus 4.8
d2ab4ddee6
Promote the inline GitHub Copilot aside to a proper note block placed directly under "Step 1. Install", with the Copilot glyph. Full hairline frame + faint gold ground (no side-stripe, which the detector flags as the side-tab tell); gold icon carries the accent. Add a reusable .docs-note style to docs-kinpaku.css so it tracks the docs theme tokens. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1792 lines
44 KiB
CSS
1792 lines
44 KiB
CSS
/* ============================================================================
|
|
/docs — Neo Kinpaku redesign
|
|
|
|
Re-skins the docs index (/docs) and per-command detail (/docs/:slug) on the
|
|
dark lacquer kinpaku surface. Mirrors the /designing approach: remap the
|
|
generic light tokens (--color-paper, --color-cream, etc.) at the body class
|
|
so the inline visualizations from docs-visuals.css (.docs-viz-*) re-skin
|
|
into the dark theme without per-rule overrides.
|
|
|
|
Structure of this file mirrors the page structure:
|
|
1. Page scope + base
|
|
2. Sidebar (commands rail)
|
|
3. /docs index — categories + command tiles
|
|
4. /docs/:slug — breadcrumb, hero, related-commands footer
|
|
5. Prose body — markdown rendering on lacquer
|
|
6. Footer
|
|
============================================================================ */
|
|
|
|
@import "./kinpaku-tokens.css";
|
|
@import "./divider-patterns.css";
|
|
|
|
|
|
/* ============================================================================
|
|
1. PAGE SCOPE + BASE
|
|
============================================================================ */
|
|
|
|
.docs-kinpaku {
|
|
/* Surface/text/accent/font tokens default to kinpaku at :root now
|
|
(tokens.css), so the embedded docs-viz visualizations inherit dark
|
|
surfaces without a per-page remap. Only the --ks-muted alias (read by
|
|
name in this file) and the page shell remain. */
|
|
--ks-muted: var(--ks-text-muted);
|
|
--docs-accent: var(--ks-kinpaku);
|
|
--docs-accent-hover: var(--ks-kinpaku-pale);
|
|
--docs-accent-line: oklch(78% 0.12 82 / 0.42);
|
|
--docs-accent-wash: oklch(77% 0.13 82 / 0.10);
|
|
--docs-brand-accent: var(--ks-kinpaku);
|
|
--docs-panel-bg: var(--ks-lacquer-raised);
|
|
--docs-panel-hover-bg: oklch(11% 0.012 82);
|
|
--docs-row-bg: var(--ks-lacquer-raised);
|
|
--docs-row-hover-bg: oklch(13% 0.012 82);
|
|
|
|
background:
|
|
linear-gradient(180deg, oklch(7% 0.006 95), oklch(4% 0.004 95));
|
|
color: var(--ks-text);
|
|
font-family: var(--ks-font);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
html.light .docs-kinpaku {
|
|
--ks-champagne: oklch(16% 0 0);
|
|
--ks-text: oklch(24% 0 0);
|
|
--ks-text-muted: oklch(42% 0 0);
|
|
--ks-text-faint: oklch(55% 0 0);
|
|
--ks-rule: oklch(20% 0 0 / 0.12);
|
|
--docs-accent: var(--ks-patina);
|
|
--docs-accent-hover: var(--ks-patina-deep);
|
|
--docs-accent-line: oklch(70% 0.12 188 / 0.36);
|
|
--docs-accent-wash: oklch(70% 0.12 188 / 0.08);
|
|
--docs-brand-accent: var(--ks-kinpaku);
|
|
--docs-panel-bg: oklch(100% 0 0);
|
|
--docs-panel-hover-bg: color-mix(in oklch, oklch(100% 0 0), var(--docs-accent) 4%);
|
|
--docs-row-bg: oklch(100% 0 0);
|
|
--docs-row-hover-bg: color-mix(in oklch, oklch(100% 0 0), var(--docs-accent) 3%);
|
|
background: linear-gradient(180deg, var(--ks-lacquer), var(--ks-lacquer-deep));
|
|
}
|
|
|
|
.docs-kinpaku a {
|
|
color: inherit;
|
|
}
|
|
|
|
/* Page reset: the docs layout is its own full-bleed grid, no Base.astro
|
|
measure cap. */
|
|
.docs-kinpaku.skills-layout-page main#main {
|
|
max-width: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-layout {
|
|
display: grid;
|
|
grid-template-columns: 240px minmax(0, 1fr);
|
|
gap: clamp(40px, 4vw, 72px);
|
|
padding: 0 clamp(22px, 4vw, 56px);
|
|
align-items: start;
|
|
max-width: 1500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.docs-kinpaku .skills-layout {
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
2. SIDEBAR — commands rail
|
|
|
|
Sticky rail. Command names use the main UI family; monospace is reserved
|
|
for literal commands and code, not navigation.
|
|
============================================================================ */
|
|
|
|
.docs-kinpaku .skills-sidebar {
|
|
position: sticky;
|
|
top: 86px;
|
|
align-self: start;
|
|
max-height: calc(100vh - 86px);
|
|
overflow-y: auto;
|
|
padding: 48px 0 64px;
|
|
border-right: 1px solid var(--ks-rule);
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--ks-rule) transparent;
|
|
}
|
|
|
|
@media (min-width: 961px) {
|
|
.docs-kinpaku .skills-sidebar {
|
|
min-height: calc(100vh - 86px);
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar::-webkit-scrollbar-thumb {
|
|
background: var(--ks-rule);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-inner {
|
|
padding-right: 22px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-label {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
border: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-group {
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-category {
|
|
display: block;
|
|
font-family: var(--ks-font);
|
|
font-size: 0.72rem;
|
|
font-weight: 650;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--docs-accent);
|
|
margin-bottom: 10px;
|
|
padding: 0 0 0 14px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-list li {
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-list a {
|
|
display: block;
|
|
padding: 5px 0 5px 12px;
|
|
border-left: 2px solid transparent;
|
|
font-family: var(--ks-font);
|
|
font-size: 0.94rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: var(--ks-text);
|
|
text-decoration: none;
|
|
transition: color 160ms var(--ks-ease),
|
|
border-color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-list a:hover {
|
|
color: var(--docs-accent-hover);
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-list a[aria-current="page"] {
|
|
color: var(--docs-accent);
|
|
font-weight: 600;
|
|
border-left-color: var(--docs-accent);
|
|
}
|
|
|
|
|
|
/* Mobile: collapse the sidebar behind a toggle. */
|
|
@media (max-width: 960px) {
|
|
.docs-kinpaku .skills-sidebar {
|
|
position: static;
|
|
max-height: none;
|
|
min-height: 0;
|
|
overflow: visible;
|
|
padding: 18px 0 0;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 12px 0;
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--ks-text-muted);
|
|
font-family: var(--ks-font);
|
|
font-size: 0.92rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-toggle-chevron {
|
|
transition: transform 220ms var(--ks-ease);
|
|
color: var(--docs-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-toggle[aria-expanded="true"] .skills-sidebar-toggle-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-inner {
|
|
display: none;
|
|
padding: 14px 0 24px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-toggle[aria-expanded="true"] + .skills-sidebar-inner {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
3. /docs INDEX
|
|
|
|
Sections, in render order:
|
|
a. Starter hero
|
|
b. Intent chooser
|
|
c. Live mode callout
|
|
d. A typical session (linear workflow of 4 commands)
|
|
e. Pairs and chains (relational schema)
|
|
f. Full reference (cheatsheet by lifecycle phase)
|
|
============================================================================ */
|
|
|
|
.docs-kinpaku .docs-index {
|
|
padding: clamp(34px, 5vw, 70px) 0 clamp(80px, 10vw, 140px);
|
|
}
|
|
|
|
|
|
/* a. Starter rail ------------------------------------------------------ */
|
|
|
|
.docs-kinpaku .docs-start-rail {
|
|
display: grid;
|
|
gap: 28px;
|
|
margin-bottom: clamp(44px, 6vw, 72px);
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.docs-kinpaku .docs-index {
|
|
padding-top: 22px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-title {
|
|
font-size: 2.15rem;
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-head {
|
|
display: grid;
|
|
gap: 14px;
|
|
max-width: 780px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-title {
|
|
font-family: var(--ks-font);
|
|
font-style: normal;
|
|
font-weight: 650;
|
|
font-size: 2.6rem;
|
|
line-height: 1.12;
|
|
letter-spacing: 0;
|
|
color: var(--ks-champagne);
|
|
margin: 0;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-title span {
|
|
color: var(--docs-accent);
|
|
font-family: var(--ks-mono);
|
|
font-weight: 500;
|
|
font-size: 0.82em;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-lede {
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--ks-text);
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
/* Shared section scaffolding for the index sections ---------------- */
|
|
|
|
.docs-kinpaku .docs-chooser-section,
|
|
.docs-kinpaku .docs-manual-section,
|
|
.docs-kinpaku .docs-live,
|
|
.docs-kinpaku .docs-flow-section,
|
|
.docs-kinpaku .docs-chains-section,
|
|
.docs-kinpaku .docs-reference-section {
|
|
margin-bottom: clamp(48px, 6vw, 76px);
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-title,
|
|
.docs-kinpaku .docs-manual-title,
|
|
.docs-kinpaku .docs-live-title,
|
|
.docs-kinpaku .docs-flow-title,
|
|
.docs-kinpaku .docs-chains-title,
|
|
.docs-kinpaku .docs-reference-title {
|
|
font-family: var(--ks-font);
|
|
font-style: normal;
|
|
font-weight: 650;
|
|
font-size: 1.55rem;
|
|
line-height: 1.25;
|
|
letter-spacing: 0;
|
|
color: var(--ks-champagne);
|
|
margin: 0 0 12px;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-lede,
|
|
.docs-kinpaku .docs-manual-sub,
|
|
.docs-kinpaku .docs-flow-sub,
|
|
.docs-kinpaku .docs-chains-sub {
|
|
font-size: 1rem;
|
|
line-height: 1.65;
|
|
color: var(--ks-text);
|
|
margin: 0;
|
|
max-width: 52ch;
|
|
}
|
|
|
|
|
|
/* Quick start rail ----------------------------------------------------- */
|
|
|
|
.docs-kinpaku .docs-start-rail-sequence {
|
|
display: grid;
|
|
gap: clamp(12px, 1.8vw, 18px);
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-steps {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
@media (max-width: 940px) {
|
|
.docs-kinpaku .docs-start-rail-steps {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-step {
|
|
display: grid;
|
|
grid-template-rows: auto auto minmax(3.2em, auto) auto;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
padding: 18px 20px 20px;
|
|
background: var(--docs-row-bg);
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-num {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.72rem;
|
|
line-height: 1.1;
|
|
letter-spacing: 0.18em;
|
|
color: var(--docs-accent);
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-label {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.66rem;
|
|
line-height: 1.1;
|
|
letter-spacing: 0.24em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-command {
|
|
display: block;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.94rem;
|
|
line-height: 1.45;
|
|
color: var(--docs-accent-hover);
|
|
min-height: 2.8em;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-step {
|
|
grid-template-columns: minmax(34px, auto) minmax(0, 1fr);
|
|
grid-template-rows: auto auto auto;
|
|
column-gap: 16px;
|
|
row-gap: 9px;
|
|
padding: 18px 20px 20px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-num {
|
|
grid-column: 1;
|
|
grid-row: 1 / 4;
|
|
padding-top: 1px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-label,
|
|
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-command,
|
|
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-line {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-line {
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-note {
|
|
margin: 20px 0 0;
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-note a {
|
|
color: var(--docs-accent);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--docs-accent-line);
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-note a:hover {
|
|
color: var(--docs-accent-hover);
|
|
border-bottom-color: var(--docs-accent-hover);
|
|
}
|
|
|
|
@media (max-width: 940px) {
|
|
.docs-kinpaku .docs-start-rail-step,
|
|
.docs-kinpaku .docs-start-rail-step:last-child {
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-command {
|
|
min-height: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* b. Intent chooser ---------------------------------------------------- */
|
|
|
|
.docs-kinpaku .docs-chooser-head,
|
|
.docs-kinpaku .docs-manual-head {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-list {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
border-top: 0;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-list-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 7px 18px;
|
|
align-items: center;
|
|
padding: 18px 20px;
|
|
background: var(--docs-row-bg);
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: border-color 160ms var(--ks-ease),
|
|
background 160ms var(--ks-ease),
|
|
color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-list-row:hover {
|
|
background: var(--docs-row-hover-bg);
|
|
border-color: var(--docs-accent-line);
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-list-need {
|
|
font-size: 0.98rem;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-list-command {
|
|
display: inline-flex;
|
|
justify-self: end;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.74rem;
|
|
color: var(--docs-accent-hover);
|
|
line-height: 1.3;
|
|
padding: 5px 8px;
|
|
background: var(--docs-accent-wash);
|
|
border: 1px solid var(--docs-accent-line);
|
|
border-radius: 5px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.docs-kinpaku .docs-chooser-list-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-list-command {
|
|
justify-self: start;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
|
|
/* c. Live mode callout ------------------------------------------------- */
|
|
|
|
.docs-kinpaku .docs-live {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
|
|
gap: clamp(36px, 5vw, 64px);
|
|
align-items: center;
|
|
padding: 0;
|
|
}
|
|
|
|
@media (max-width: 880px) {
|
|
.docs-kinpaku .docs-live {
|
|
grid-template-columns: 1fr;
|
|
gap: 32px;
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-cta {
|
|
margin: 26px 0 0;
|
|
}
|
|
|
|
/* Static browser frame mock. Light, low-shadow frame with a precise target
|
|
outline and mock action bar underneath. No animation; this is a teaching
|
|
diagram, not a demo. */
|
|
.docs-kinpaku .docs-live-figure {
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-frame {
|
|
position: relative;
|
|
background: var(--ks-lacquer-raised);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
box-shadow: 0 14px 30px oklch(0% 0 0 / 0.08);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-chrome {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 14px;
|
|
background: transparent;
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: var(--ks-rule);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-url {
|
|
margin-left: 12px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.72rem;
|
|
color: var(--ks-text-muted);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-stage {
|
|
position: relative;
|
|
padding: 38px 28px 28px;
|
|
min-height: 220px;
|
|
background: transparent;
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-target {
|
|
position: relative;
|
|
padding: 22px 24px;
|
|
border: 1px solid var(--docs-accent-line);
|
|
border-radius: 2px;
|
|
background: var(--ks-lacquer);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-target-title {
|
|
font-family: var(--ks-font-display);
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 1.4rem;
|
|
line-height: 1.15;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-target-sub {
|
|
margin-top: 8px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--docs-accent-hover);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-bar {
|
|
margin-top: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 10px 14px;
|
|
background: var(--ks-lacquer);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 2px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.74rem;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-bar-counter {
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-bar-accept {
|
|
margin-left: auto;
|
|
color: var(--docs-accent-hover);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-bar-divider {
|
|
width: 1px;
|
|
align-self: stretch;
|
|
background: var(--ks-rule);
|
|
margin-left: auto;
|
|
}
|
|
|
|
|
|
/* d. A typical session (linear flow of commands) ----------------------- */
|
|
|
|
.docs-kinpaku .docs-flow-head {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
}
|
|
|
|
@media (max-width: 880px) {
|
|
.docs-kinpaku .docs-flow {
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-step {
|
|
display: contents;
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-link {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 8px;
|
|
padding: 22px 22px 24px;
|
|
background: var(--docs-panel-bg);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 2px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: border-color 180ms var(--ks-ease),
|
|
background 180ms var(--ks-ease);
|
|
min-height: 100%;
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-link:hover {
|
|
border-color: var(--docs-accent-line);
|
|
background: var(--docs-panel-hover-bg);
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-verb {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.66rem;
|
|
letter-spacing: 0.24em;
|
|
text-transform: uppercase;
|
|
color: var(--docs-accent);
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-cmd {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.94rem;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-tag {
|
|
font-size: 0.86rem;
|
|
line-height: 1.45;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-arrow {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 36px;
|
|
color: var(--docs-accent);
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-arrow svg {
|
|
width: 24px;
|
|
height: 8px;
|
|
}
|
|
|
|
@media (max-width: 880px) {
|
|
.docs-kinpaku .docs-flow-arrow {
|
|
width: 100%;
|
|
height: 18px;
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-alt {
|
|
margin: 22px 0 0;
|
|
font-family: var(--ks-font);
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
color: var(--ks-text-muted);
|
|
max-width: 60ch;
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-alt a {
|
|
color: var(--docs-accent);
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.88em;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--docs-accent-line);
|
|
transition: border-color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-alt a:hover {
|
|
color: var(--docs-accent-hover);
|
|
border-bottom-color: var(--docs-accent-hover);
|
|
}
|
|
|
|
|
|
/* e. Pairs and chains -------------------------------------------------- */
|
|
|
|
.docs-kinpaku .docs-chains-head {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chains-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.docs-kinpaku .docs-chains-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-chain {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 28px 28px 30px;
|
|
background: var(--docs-panel-bg);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chain-formula {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 14px;
|
|
margin: 0;
|
|
font-family: var(--ks-mono);
|
|
font-size: 1.06rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chain-cmd {
|
|
color: var(--docs-accent);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .docs-chain-cmd:hover {
|
|
color: var(--docs-accent-hover);
|
|
border-bottom-color: var(--docs-accent-hover);
|
|
}
|
|
|
|
.docs-kinpaku .docs-chain-arrow {
|
|
color: var(--docs-accent);
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chain-line {
|
|
margin: 0;
|
|
font-size: 0.94rem;
|
|
line-height: 1.5;
|
|
color: var(--ks-text);
|
|
}
|
|
|
|
|
|
/* f. Full reference (cheatsheet) --------------------------------------- */
|
|
|
|
.docs-kinpaku .docs-reference-head {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 36px 48px;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.docs-kinpaku .docs-reference {
|
|
grid-template-columns: 1fr;
|
|
gap: 32px;
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-group {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-cat {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
margin: 0 0 6px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-count {
|
|
color: var(--ks-text-faint);
|
|
font-size: 0.86em;
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-row {
|
|
display: grid;
|
|
grid-template-columns: 96px minmax(0, 1fr);
|
|
align-items: baseline;
|
|
gap: 14px;
|
|
padding: 4px 0;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-row:hover .docs-reference-name {
|
|
color: var(--docs-accent-hover);
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-row:hover .docs-reference-line {
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-name {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.92rem;
|
|
color: var(--ks-text);
|
|
transition: color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-line {
|
|
font-size: 0.9rem;
|
|
line-height: 1.45;
|
|
color: var(--ks-text-muted);
|
|
transition: color 160ms var(--ks-ease);
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
4. /docs/:slug — breadcrumb, hero, related-commands footer
|
|
============================================================================ */
|
|
|
|
.docs-kinpaku .skills-main {
|
|
min-width: 0;
|
|
padding: 48px 0 clamp(80px, 10vw, 140px);
|
|
}
|
|
|
|
.docs-kinpaku .skills-main--docs-index {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-detail {
|
|
max-width: 900px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-muted);
|
|
margin: 0 0 36px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-breadcrumb a {
|
|
color: var(--ks-kinpaku);
|
|
text-decoration: none;
|
|
transition: color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .skills-breadcrumb a:hover {
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .skills-breadcrumb span[aria-hidden] {
|
|
color: var(--ks-text-faint);
|
|
}
|
|
|
|
|
|
/* Hero — eyebrow (category), title (/impeccable name), lede. */
|
|
.docs-kinpaku .sub-page-header {
|
|
margin-bottom: clamp(40px, 5vw, 64px);
|
|
}
|
|
|
|
.docs-kinpaku .sub-page-eyebrow {
|
|
display: block;
|
|
font-family: var(--ks-mono);
|
|
font-size: var(--ks-type-eyebrow-size);
|
|
letter-spacing: var(--ks-type-eyebrow-track);
|
|
text-transform: uppercase;
|
|
color: var(--ks-kinpaku);
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
/* Command name (h1) — display scale, kinpaku gold so it carries the
|
|
page identity. */
|
|
.docs-kinpaku .sub-page-title {
|
|
font-family: var(--ks-font-display);
|
|
font-weight: var(--ks-type-display-weight);
|
|
font-size: var(--ks-type-display-size);
|
|
line-height: var(--ks-type-display-line);
|
|
letter-spacing: var(--ks-type-display-track);
|
|
color: var(--ks-kinpaku);
|
|
margin: 0 0 20px;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.docs-kinpaku .sub-page-lede {
|
|
font-size: 1.08rem;
|
|
line-height: 1.65;
|
|
color: var(--ks-text);
|
|
margin: 0;
|
|
max-width: 56ch;
|
|
}
|
|
|
|
|
|
/* Related commands footer — chips with relation label + command name. */
|
|
.docs-kinpaku .skills-relationships {
|
|
margin-top: clamp(56px, 7vw, 88px);
|
|
padding-top: 32px;
|
|
border-top: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
.docs-kinpaku .skills-relationships-title {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.24em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-kinpaku);
|
|
font-weight: 400;
|
|
margin: 0 0 18px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-relationships-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-relationship-chip {
|
|
display: inline-grid;
|
|
grid-auto-flow: column;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 2px;
|
|
background: var(--ks-lacquer-raised);
|
|
text-decoration: none;
|
|
transition: border-color 180ms var(--ks-ease),
|
|
background 180ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .skills-relationship-chip:hover {
|
|
border-color: var(--ks-kinpaku);
|
|
background: oklch(11% 0.012 82);
|
|
}
|
|
|
|
.docs-kinpaku .skills-relationship-label {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.64rem;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-faint);
|
|
}
|
|
|
|
.docs-kinpaku .skills-relationship-name {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.88rem;
|
|
color: var(--ks-kinpaku);
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
5. PROSE BODY — markdown rendering on lacquer
|
|
============================================================================ */
|
|
|
|
/* Vertical rhythm.
|
|
|
|
One base unit: 1em (≈ 16-17px at the prose font-size). Everything is a
|
|
multiple of that.
|
|
|
|
- paragraph-to-paragraph (sibling) = 1em
|
|
- paragraph-to-list = 1em (sibling rule)
|
|
- list-item-to-list-item = 0.25em (members of one thought)
|
|
- list-to-paragraph = 1em (sibling rule)
|
|
- block (pre/blockquote/hr) to neighbor = 1.4em (breathes more)
|
|
- h2 above body = 1.6em (anchor, not chasm)
|
|
- h3 above body = 1.2em
|
|
- heading to its body = 0.4em (kept tight)
|
|
*/
|
|
|
|
.docs-kinpaku .prose {
|
|
font-family: var(--ks-font);
|
|
font-size: 1.02rem;
|
|
line-height: 1.7;
|
|
color: var(--ks-text);
|
|
max-width: 76ch;
|
|
}
|
|
|
|
/* Single source of truth for margins:
|
|
- `.prose > *` zeros every direct child's margin (universal selector,
|
|
beats browser default but loses to element-selector rules).
|
|
- `.prose > * + *` adds the sibling gap.
|
|
- Element-specific overrides (h2, h3, h4) inherit from the same family.
|
|
Element-selector rules elsewhere in this file MUST NOT set `margin`
|
|
shorthand or `margin-top` — they'd outrank the sibling rule and starve
|
|
blocks of their spacing (this happened with the list + p combo). */
|
|
.docs-kinpaku .prose > * {
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose > * + * {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
/* Blocks (pre, blockquote, hr) get extra breath above and below. */
|
|
.docs-kinpaku .prose > pre + *,
|
|
.docs-kinpaku .prose > * + pre,
|
|
.docs-kinpaku .prose > blockquote + *,
|
|
.docs-kinpaku .prose > * + blockquote,
|
|
.docs-kinpaku .prose > .docs-note + *,
|
|
.docs-kinpaku .prose > * + .docs-note,
|
|
.docs-kinpaku .prose > hr + *,
|
|
.docs-kinpaku .prose > * + hr {
|
|
margin-top: 1.4em;
|
|
}
|
|
|
|
/* Note / callout block for prose docs (e.g. the GitHub Copilot built-in
|
|
aside under Step 1). Full hairline frame + faint gold-tinted ground so it
|
|
reads as an aside without a one-sided accent stripe (the side-tab tell the
|
|
detector flags). The gold icon carries the accent. */
|
|
.docs-kinpaku .prose .docs-note {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
background: color-mix(in oklch, var(--ks-kinpaku) 6%, var(--ks-lacquer-raised));
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 4px;
|
|
font-size: 0.95rem;
|
|
line-height: 1.55;
|
|
color: var(--ks-text);
|
|
}
|
|
.docs-kinpaku .prose .docs-note-icon {
|
|
flex: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 1px;
|
|
color: var(--ks-kinpaku);
|
|
}
|
|
.docs-kinpaku .prose .docs-note-icon svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
fill: currentColor;
|
|
}
|
|
.docs-kinpaku .prose .docs-note-text {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
.docs-kinpaku .prose .docs-note-text strong {
|
|
color: var(--ks-champagne);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.docs-kinpaku .prose h1,
|
|
.docs-kinpaku .prose h2,
|
|
.docs-kinpaku .prose h3,
|
|
.docs-kinpaku .prose h4 {
|
|
font-family: var(--ks-font-display);
|
|
color: var(--ks-champagne);
|
|
font-style: normal;
|
|
line-height: 1.2;
|
|
scroll-margin-top: 96px;
|
|
/* Intentionally no margin — see `.prose > *` rule above. */
|
|
}
|
|
|
|
.docs-kinpaku .prose > * + h2 {
|
|
margin-top: 1.6em;
|
|
}
|
|
|
|
.docs-kinpaku .prose > * + h3 {
|
|
margin-top: 1.2em;
|
|
}
|
|
|
|
.docs-kinpaku .prose > * + h4 {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.docs-kinpaku .prose > h2 + *,
|
|
.docs-kinpaku .prose > h3 + *,
|
|
.docs-kinpaku .prose > h4 + * {
|
|
margin-top: 0.4em;
|
|
}
|
|
|
|
/* h2/h3 follow the DESIGN.md type scale exactly:
|
|
- h2 (Headline): Alumni Sans Pinstripe, clamp 2.6-3.4rem, weight 600
|
|
- h3 (Title): Albert Sans, 1.18rem, weight 500
|
|
- h4: Albert Sans, 1rem, weight 600 (utility)
|
|
*/
|
|
.docs-kinpaku .prose h2 {
|
|
font-family: var(--ks-font-display);
|
|
font-size: var(--ks-type-headline-size);
|
|
font-weight: var(--ks-type-headline-weight);
|
|
line-height: var(--ks-type-headline-line);
|
|
letter-spacing: -0.005em;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.docs-kinpaku .prose h3 {
|
|
font-family: var(--ks-font);
|
|
font-size: var(--ks-type-title-size);
|
|
font-weight: var(--ks-type-title-weight);
|
|
line-height: var(--ks-type-title-line);
|
|
color: var(--ks-kinpaku);
|
|
}
|
|
|
|
.docs-kinpaku .prose h4 {
|
|
font-family: var(--ks-font);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
/* Lists. Margins are handled by the universal `> *` reset + sibling rule
|
|
above; only set list-specific padding and line-height here. */
|
|
.docs-kinpaku .prose ul,
|
|
.docs-kinpaku .prose ol {
|
|
padding-left: 1.4rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.docs-kinpaku .prose li + li {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.docs-kinpaku .prose li::marker {
|
|
color: var(--ks-kinpaku);
|
|
}
|
|
|
|
/* When a list item wraps multi-block content, hug its internals. */
|
|
.docs-kinpaku .prose li > p {
|
|
margin: 0;
|
|
}
|
|
.docs-kinpaku .prose li > * + * {
|
|
margin-top: 0.35em;
|
|
}
|
|
|
|
.docs-kinpaku .prose a {
|
|
color: var(--ks-kinpaku);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 4px;
|
|
text-decoration-color: oklch(78% 0.12 82 / 0.4);
|
|
transition: text-decoration-color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .prose a:hover {
|
|
text-decoration-color: var(--ks-kinpaku);
|
|
}
|
|
|
|
.docs-kinpaku .prose strong {
|
|
color: var(--ks-champagne);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.docs-kinpaku .prose em {
|
|
font-style: italic;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
/* Inline code — champagne mono on a graphite chip. The chip is the
|
|
affordance; color stays neutral so a paragraph full of inline
|
|
references doesn't vibrate. Kinpaku is reserved for links, h3s,
|
|
eyebrows, and CTAs. `--ks-graphite-2` (≈19% lightness) reads as the
|
|
neutral gray the chip wants without picking up cool tint. */
|
|
.docs-kinpaku .prose code {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.84em;
|
|
color: var(--ks-code-fg);
|
|
background: var(--ks-code-bg);
|
|
border: 0;
|
|
padding: 0.14em 0.36em;
|
|
border-radius: var(--ks-code-radius);
|
|
}
|
|
|
|
.docs-kinpaku .prose :not(pre) > code {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
html.light .docs-kinpaku .prose code {
|
|
background: oklch(25% 0.02 95 / 0.08);
|
|
}
|
|
|
|
/* Inline code that is itself a link — get the kinpaku cue back, since
|
|
the link semantic is the meaningful one. */
|
|
.docs-kinpaku .prose a code {
|
|
color: var(--ks-code-cmd);
|
|
}
|
|
|
|
/* Fenced code blocks — deep lacquer terminal. Astro/Shiki emits dual-theme
|
|
CSS variables from site/lib/impeccable-shiki-theme.mjs; the wrapper keeps
|
|
the surface in the kinpaku token system while token spans swap by theme. */
|
|
.docs-kinpaku .prose pre,
|
|
.docs-kinpaku .prose .code-block,
|
|
.docs-kinpaku .prose pre.astro-code {
|
|
margin: 0;
|
|
padding: 22px 24px;
|
|
background: var(--ks-code-block-bg) !important;
|
|
color: var(--ks-code-block-fg) !important;
|
|
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.84rem;
|
|
line-height: 1.6;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.docs-kinpaku .prose pre.astro-code span {
|
|
color: var(--shiki-dark, var(--ks-code-block-fg));
|
|
}
|
|
|
|
html.light .docs-kinpaku .prose pre.astro-code span {
|
|
color: var(--shiki-light, var(--ks-code-block-fg));
|
|
}
|
|
|
|
.docs-kinpaku .prose > * + pre.astro-code,
|
|
.docs-kinpaku .prose > * + pre,
|
|
.docs-kinpaku .prose > * + .code-block-wrap {
|
|
margin-top: 1.25em;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(p, ul, ol) + :is(pre.astro-code, pre, .code-block-wrap) {
|
|
margin-top: 1.25em;
|
|
}
|
|
|
|
.docs-kinpaku .prose pre code,
|
|
.docs-kinpaku .prose .code-block code {
|
|
background: transparent;
|
|
border: 0;
|
|
padding: 0;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
border-radius: 0;
|
|
}
|
|
|
|
html.light .docs-kinpaku .prose pre code,
|
|
html.light .docs-kinpaku .prose .code-block code {
|
|
background: transparent;
|
|
}
|
|
|
|
.docs-kinpaku .prose .code-block-wrap {
|
|
position: relative;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Copy button on dark — match the kinpaku button voice. */
|
|
.docs-kinpaku .code-block-copy {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
padding: 4px 10px;
|
|
background: var(--ks-lacquer-raised);
|
|
border: 1px solid var(--ks-rule);
|
|
color: var(--ks-text-muted);
|
|
border-radius: 2px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.62rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity 180ms var(--ks-ease),
|
|
border-color 180ms var(--ks-ease),
|
|
color 180ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .code-block-wrap:hover .code-block-copy,
|
|
.docs-kinpaku .code-block-copy:focus-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.docs-kinpaku .code-block-copy::before {
|
|
content: "Copy";
|
|
}
|
|
|
|
.docs-kinpaku .code-block-copy:hover {
|
|
border-color: var(--ks-kinpaku);
|
|
color: var(--ks-kinpaku);
|
|
}
|
|
|
|
.docs-kinpaku .code-block-copy.is-copied {
|
|
opacity: 1;
|
|
border-color: var(--ks-kinpaku);
|
|
color: var(--ks-lacquer-deep);
|
|
background: var(--ks-kinpaku);
|
|
}
|
|
|
|
.docs-kinpaku .code-block-copy.is-copied::before {
|
|
content: "Copied";
|
|
}
|
|
|
|
.docs-kinpaku .prose blockquote {
|
|
margin: 0;
|
|
padding: 6px 0 6px 22px;
|
|
border-block: 0;
|
|
border-left: 2px solid var(--ks-kinpaku);
|
|
color: var(--ks-text);
|
|
font-style: italic;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-note {
|
|
padding: 4px 0 4px 20px;
|
|
border-left: 2px solid var(--ks-kinpaku);
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.docs-kinpaku .prose hr {
|
|
border: 0;
|
|
height: 1px;
|
|
background: var(--ks-rule);
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.docs-kinpaku .prose th,
|
|
.docs-kinpaku .prose td {
|
|
padding: 10px 14px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.docs-kinpaku .prose th {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-kinpaku);
|
|
font-weight: 500;
|
|
border-bottom-color: var(--ks-kinpaku);
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.docs-kinpaku .prose table {
|
|
display: block;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.docs-kinpaku .prose th,
|
|
.docs-kinpaku .prose td {
|
|
min-width: 11rem;
|
|
}
|
|
}
|
|
|
|
/* Design Context guide -------------------------------------------------
|
|
|
|
The context page needs a quick mental model before it becomes reference
|
|
prose. Keep these modules small, sharp, and readable inside the normal
|
|
documentation measure.
|
|
*/
|
|
|
|
.docs-kinpaku .prose .docs-context-flow {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 1px;
|
|
background: var(--ks-rule);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-source,
|
|
.docs-kinpaku .prose .docs-context-flow-output {
|
|
display: grid;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
padding: 18px;
|
|
background: var(--ks-lacquer-raised);
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-source--generated {
|
|
background: var(--ks-lacquer-raised);
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-output {
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
|
|
column-gap: 20px;
|
|
align-items: center;
|
|
background: var(--ks-lacquer);
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-label {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.62rem;
|
|
line-height: 1.2;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--docs-accent);
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-source strong,
|
|
.docs-kinpaku .prose .docs-context-flow-output strong {
|
|
color: var(--ks-champagne);
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.84rem;
|
|
line-height: 1.35;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-source span:last-child,
|
|
.docs-kinpaku .prose .docs-context-flow-output span:last-child {
|
|
color: var(--ks-text-muted);
|
|
font-size: 0.9rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-output .docs-context-flow-label,
|
|
.docs-kinpaku .prose .docs-context-flow-output span:last-child {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-output strong {
|
|
grid-column: 2;
|
|
grid-row: 1 / 3;
|
|
align-self: center;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) {
|
|
border-top: 1px solid var(--ks-rule);
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
padding: 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) + :is(.docs-context-details, .docs-prose-details) {
|
|
margin-top: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) summary {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 14px;
|
|
align-items: center;
|
|
padding: 16px 0;
|
|
color: var(--ks-champagne);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) summary::after {
|
|
content: "+";
|
|
font-family: var(--ks-mono);
|
|
color: var(--docs-accent);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details)[open] summary::after {
|
|
content: "-";
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) summary:focus-visible {
|
|
outline: 2px solid var(--ks-patina);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) > div {
|
|
display: grid;
|
|
gap: 0.8em;
|
|
padding: 0 0 18px;
|
|
color: var(--ks-text);
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) > div > * {
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) ul {
|
|
padding-left: 1.4rem;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.docs-kinpaku .prose .docs-context-flow {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-output {
|
|
grid-column: auto;
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
}
|
|
}
|
|
|
|
|
|
/* Two-column editorial hero (when the command has a registered demo).
|
|
Demo on the left, h1 + lede on the right. Mirrors the old pre-Astro
|
|
layout: a slightly wider demo column (1.15fr) against a comfortable
|
|
text measure on the right (1fr). Collapses to single-column below
|
|
the breakpoint where the demo would be too cramped.
|
|
|
|
When there's no demo, the page renders the existing single-column
|
|
sub-page-header — no docs-hero wrapper, no grid. */
|
|
.docs-kinpaku .docs-hero--with-demo {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
|
|
gap: clamp(28px, 4vw, 48px);
|
|
align-items: center;
|
|
margin: 0 0 clamp(40px, 5vw, 64px);
|
|
}
|
|
|
|
@media (max-width: 880px) {
|
|
.docs-kinpaku .docs-hero--with-demo {
|
|
grid-template-columns: 1fr;
|
|
gap: 32px;
|
|
}
|
|
}
|
|
|
|
/* In the two-column hero, the h1 + lede sits in the right column and
|
|
doesn't need its own bottom margin (the grid gap handles spacing). */
|
|
.docs-kinpaku .docs-hero--with-demo .sub-page-header {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Command demo (rendered client-side by Doc.astro from
|
|
site/scripts/demos/commands/<id>.js). Same demos the homepage's
|
|
command carousel uses — one source of truth in the demo JS, two
|
|
surfaces that render from it.
|
|
|
|
Matches the homepage's dark dual-tone treatment: lacquer-raised
|
|
container with a subtle kinpaku-grid backing, then `before` and
|
|
`after` sides each picking up a different radial glow. The demo
|
|
content's `--color-*` tokens stay remapped to kinpaku (no local
|
|
light override) — shapes render light-on-dark and the kinpaku
|
|
accent shines. */
|
|
.docs-kinpaku .docs-command-demo {
|
|
margin: 0;
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
background: var(--ks-lacquer-raised);
|
|
}
|
|
|
|
.docs-kinpaku .docs-command-demo :is(.split-comparison, .demo-split-comparison) {
|
|
max-width: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.docs-kinpaku .docs-command-demo .split-container {
|
|
height: 300px;
|
|
max-width: none;
|
|
border-radius: 0;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
background:
|
|
linear-gradient(90deg, oklch(78% 0.12 82 / 0.04) 1px, transparent 1px),
|
|
linear-gradient(180deg, oklch(78% 0.12 82 / 0.035) 1px, transparent 1px),
|
|
var(--ks-lacquer-raised);
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-command-demo .split-before {
|
|
background:
|
|
linear-gradient(90deg, oklch(10% 0.006 95 / 0.92), oklch(12% 0.012 60 / 0.72)),
|
|
radial-gradient(circle at 28% 25%, oklch(78% 0.12 82 / 0.12), transparent 11rem);
|
|
}
|
|
|
|
.docs-kinpaku .docs-command-demo .split-after {
|
|
/* Doc.astro initSplitCompare uses skewAngle: 0 — vertical seam, not the
|
|
angled default from sub-pages.css / main.css. */
|
|
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
|
|
background:
|
|
linear-gradient(90deg, oklch(8% 0.006 95 / 0.92), oklch(10% 0.006 95 / 0.96)),
|
|
radial-gradient(circle at 82% 26%, oklch(78% 0.12 82 / 0.14), transparent 12rem);
|
|
}
|
|
|
|
.docs-kinpaku .docs-command-demo .split-divider {
|
|
background: var(--ks-kinpaku);
|
|
box-shadow: 0 0 20px oklch(78% 0.12 82 / 0.4);
|
|
transform: translateX(-50%) !important;
|
|
}
|
|
|
|
.docs-kinpaku .docs-command-demo .demo-caption {
|
|
padding: 10px 16px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.04em;
|
|
color: var(--ks-text-muted);
|
|
background: var(--ks-lacquer-deep);
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* Visualization wrappers inside the markdown body.
|
|
|
|
Default: .docs-viz-hero is a transparent layout container — no card
|
|
chrome, no border. The inner mock owns its own surface treatment, so
|
|
we don't get card-in-card.
|
|
|
|
When the wrapper contains a multi-tile group (.docs-viz-flow), apply
|
|
the tinted-plinth pattern from .ks-bento on the homepage:
|
|
- the wrapper becomes a graphite mat
|
|
- tiles sit on top in flat lacquer with no borders
|
|
- the gap between tiles is the plinth showing through as inset gutters
|
|
- depth contrast carries the edges; no double borders required */
|
|
|
|
.docs-kinpaku .prose .docs-viz-hero {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-viz-hero:has(.docs-viz-flow),
|
|
.docs-kinpaku .prose .docs-viz-hero:has(.docs-viz-variants) {
|
|
padding: 24px;
|
|
background: var(--ks-graphite-2);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-viz-flow {
|
|
gap: 8px;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-viz-flow-step,
|
|
.docs-kinpaku .prose .docs-viz-variant {
|
|
background: var(--ks-lacquer);
|
|
border: 0;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-viz-flow-step + .docs-viz-flow-step {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-viz-flow-step + .docs-viz-flow-step::before {
|
|
left: -8px;
|
|
width: 8px;
|
|
}
|
|
|
|
/* Accent / active states get a kinpaku-tinted fill instead of the
|
|
bordered/glow treatment from docs-visuals.css. */
|
|
.docs-kinpaku .prose .docs-viz-flow-step--accent,
|
|
.docs-kinpaku .prose .docs-viz-variant.is-active {
|
|
background: oklch(78% 0.12 82 / 0.16);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Per-variant theming in docs-visuals.css uses paper/cream/light-magenta
|
|
on the v1/v3 backgrounds — both off-brand here. Re-skin to lacquer
|
|
ramps so the variants still differ but stay kinpaku. */
|
|
.docs-kinpaku .prose .docs-viz-variant--v1 {
|
|
background: var(--ks-lacquer);
|
|
}
|
|
.docs-kinpaku .prose .docs-viz-variant--v3 {
|
|
background: var(--ks-lacquer-deep);
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-viz-caption {
|
|
margin-top: 16px;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
6. FOOTER on dark surface
|
|
============================================================================ */
|
|
|
|
/* Footer chrome moved to kinpaku-kit.css (.kinpaku-chrome .site-footer). */
|