diff --git a/site/pages/design-system/index.astro b/site/pages/design-system/index.astro new file mode 100644 index 000000000..bc1d1e036 --- /dev/null +++ b/site/pages/design-system/index.astro @@ -0,0 +1,467 @@ +--- +import Base from '../../layouts/Base.astro'; +import '../../styles/design-system.css'; +--- + + +
+
+ + + IMPECCABLE + + + Build plan +
+ +
+
+

Neo kinpaku system

+

IMPECCABLE

+

Kinpaku gold carries the brand. Verdigris patina carries signal, status, and precision.

+
+ Start audit + See rules +
+ +
+ + +
+ + +
+ +
+
+

Foundations

+

Material tokens with restraint.

+
+ +
+
+

Color Roles

+
+
Lacqueroklch(7% 0.006 95)
+
Graphiteoklch(16% 0.006 95)
+
Kinpakuoklch(78% 0.12 82)
+
Brassoklch(62% 0.08 78)
+
Champagneoklch(85% 0.035 82)
+
Verdigrisoklch(69% 0.105 190)
+
Oxideoklch(48% 0.08 188)
+
Vermilionoklch(63% 0.16 35)
+
+
+ +
+

Type Scale

+
+ Wordmark + IMPECCABLE +

A restrained geometric display treatment using the site sans stack while we evaluate a custom wordmark.

+
+
+ Headline + Detect visual debt before it ships. +
+
+ Body +

Specific audit evidence, clear command language, no decorative hedging.

+
+
+ Micro +

LAYOUT · TYPE · COLOR · MOTION · ACCESS

+
+
+
+ +
+
+ Pin / calibration + +
+
+ Gold dust rule + +
+
+ Circuit trace + +
+
+ Kinpaku / verdigris edge + +
+
+
+ + + +
+
+

Actions

+

Gold is commitment. Patina is state.

+
+ +
+ + +
+

Inputs

+
+ + +
+
+ +
+

Tabs

+
+
+ + + +
+
Run checks, preserve evidence.
+ + +
+
+
+
+ +
+
+

Product Proof

+

Before and after, kept in the hero language.

+
+ +
+
+
+

Design audit comparison

+ Drag +
+
+
+ Before +
+ +
+ + Welcome to Dashboard +

The best solution for your needs.

+ +
+ +
+ Gradient + Cards on cards +
+
+ After +
+ +
+ +
+ + Operational overview +

Hierarchy, spacing, contrast, and motion are intentional.

+
+
+ +
+ Hierarchy +
+ + +
+
+ +
+
+ High +
+ Purple gradient +

Decorative color carries no product meaning.

+
+ Detected +
+
+ Medium +
+ Flat hierarchy +

Actions, titles, and data share one visual weight.

+
+ Improved +
+
+ Low +
+ Spacing drift +

Repeated gaps read as template rhythm.

+
+ Ready +
+
+
+
+ +
+
+

Content

+

Cards, rules, docs, and pricing without SaaS sludge.

+
+ +
+
+ +

Layout

+

Structure before decoration.

+ View rule +
+
+ +

Type

+

Hierarchy through weight and scale.

+ View rule +
+
+ +

Color

+

Accent only when it carries meaning.

+ View rule +
+
+ +

Motion

+

State, feedback, orientation.

+ View rule +
+
+ +

Access

+

Keyboard, contrast, semantics.

+ View rule +
+
+ +
+
+ Docs +

Install the skill

+ 
codex skills install impeccable
+

Each command reads project context before changing code.

+
+ +
+ Skill +

Open source

+

Agent skill, CLI, detector rules, and Chrome extension.

+ View GitHub +
+ +
+ Changelog +

v3.1.0

+

Codex asset producer agent, critique persistence, palette-first image flow.

+
+
+
+ +
+
+

Utilities

+

Feedback is quiet until it matters.

+
+ +
+
+ Audit complete + 12 issues detected, 8 ready to fix. +
+
+ Audit failed + Reconnect the live page and run again. +
+
+ + Evidence stays attached to the exact component. +
+
+ + + +
+
+
+ +
+
+

Implementation

+

Systematic build order.

+
+ +
    +
  1. Route lab: stabilize `/design-system` as the source of truth for tokens, components, and states.
    2. +
  2. Asset pass: regenerate kinpaku seams, lacquer grain, and verdigris patina as high-resolution image edits from approved references. Do not crop concept boards into production assets.
    3. +
  3. Homepage: replace the current hero with the sparse kinpaku layout and the compact before/after inspection panel.
    4. +
  4. Core pages: migrate Docs, Designing, Slop, and Live one surface at a time with shared components.
    5. +
  5. Detector UI: map audit severities, rule cards, and overlay evidence to the gold/patina vocabulary.
    6. +
  6. Verification: run visual checks, responsive passes, contrast checks, and the existing build/test suite after each surface lands.
    7. +
+
+ + + + + diff --git a/site/public/assets/neo-kinpaku/before-after-seam.png b/site/public/assets/neo-kinpaku/before-after-seam.png new file mode 100644 index 000000000..9bb7c36a3 Binary files /dev/null and b/site/public/assets/neo-kinpaku/before-after-seam.png differ diff --git a/site/public/assets/neo-kinpaku/gold-dust-rule.png b/site/public/assets/neo-kinpaku/gold-dust-rule.png new file mode 100644 index 000000000..69e5f9d82 Binary files /dev/null and b/site/public/assets/neo-kinpaku/gold-dust-rule.png differ diff --git a/site/public/assets/neo-kinpaku/hero-seam-field-v2.png b/site/public/assets/neo-kinpaku/hero-seam-field-v2.png new file mode 100644 index 000000000..72d2181a8 Binary files /dev/null and b/site/public/assets/neo-kinpaku/hero-seam-field-v2.png differ diff --git a/site/public/assets/neo-kinpaku/hero-seam-field.png b/site/public/assets/neo-kinpaku/hero-seam-field.png new file mode 100644 index 000000000..35a0a7ba8 Binary files /dev/null and b/site/public/assets/neo-kinpaku/hero-seam-field.png differ diff --git a/site/public/assets/neo-kinpaku/kinpaku-gold-leaf.png b/site/public/assets/neo-kinpaku/kinpaku-gold-leaf.png new file mode 100644 index 000000000..9fc214c61 Binary files /dev/null and b/site/public/assets/neo-kinpaku/kinpaku-gold-leaf.png differ diff --git a/site/public/assets/neo-kinpaku/lacquer-grain.png b/site/public/assets/neo-kinpaku/lacquer-grain.png new file mode 100644 index 000000000..77d31e02d Binary files /dev/null and b/site/public/assets/neo-kinpaku/lacquer-grain.png differ diff --git a/site/public/assets/neo-kinpaku/oxidation-edge-accent.png b/site/public/assets/neo-kinpaku/oxidation-edge-accent.png new file mode 100644 index 000000000..ff1515701 Binary files /dev/null and b/site/public/assets/neo-kinpaku/oxidation-edge-accent.png differ diff --git a/site/public/assets/neo-kinpaku/verdigris-patina.png b/site/public/assets/neo-kinpaku/verdigris-patina.png new file mode 100644 index 000000000..c6d3d6161 Binary files /dev/null and b/site/public/assets/neo-kinpaku/verdigris-patina.png differ diff --git a/site/styles/design-system.css b/site/styles/design-system.css new file mode 100644 index 000000000..f9a5406c9 --- /dev/null +++ b/site/styles/design-system.css @@ -0,0 +1,1892 @@ +.kinpaku-system-page { + --ks-lacquer: oklch(7% 0.006 95); + --ks-lacquer-2: oklch(10% 0.006 95); + --ks-graphite: oklch(15% 0.008 95); + --ks-graphite-2: oklch(20% 0.008 95); + --ks-rule: oklch(45% 0.04 82 / 0.42); + --ks-rule-soft: oklch(45% 0.04 82 / 0.22); + --ks-kinpaku: oklch(78% 0.12 82); + --ks-kinpaku-deep: oklch(62% 0.08 78); + --ks-kinpaku-pale: oklch(88% 0.055 84); + --ks-champagne: oklch(84% 0.035 82); + --ks-text: oklch(78% 0.025 82); + --ks-muted: oklch(58% 0.02 82); + --ks-patina: oklch(69% 0.105 190); + --ks-oxide: oklch(48% 0.08 188); + --ks-vermilion: oklch(63% 0.16 35); + --ks-shadow: oklch(2% 0.004 95 / 0.7); + --ks-font: "Avenir Next", "Helvetica Neue", Arial, system-ui, sans-serif; + --ks-mono: "SFMono-Regular", "Roboto Mono", Consolas, monospace; + color: var(--ks-text); + background: + linear-gradient(180deg, oklch(3% 0.004 95 / 0.88), oklch(3% 0.004 95 / 0.97)), + radial-gradient(circle at 80% 18%, oklch(28% 0.04 82 / 0.075), transparent 34rem), + radial-gradient(circle at 18% 72%, oklch(69% 0.105 190 / 0.036), transparent 28rem), + url("/assets/neo-kinpaku/lacquer-grain.png") center top / 1900px auto fixed, + linear-gradient(180deg, var(--ks-lacquer), oklch(4% 0.004 95)); + font-family: var(--ks-font); + margin: 0; +} + +.kinpaku-system-page *, +.kinpaku-system-page *::before, +.kinpaku-system-page *::after { + box-sizing: border-box; +} + +.kinpaku-system-page img, +.kinpaku-system-page svg, +.kinpaku-system-page canvas, +.kinpaku-system-page video { + display: block; + max-width: 100%; +} + +.kinpaku-system-page a { + color: inherit; +} + +.kinpaku-system-page button, +.kinpaku-system-page input { + font-family: inherit; +} + +.kinpaku-system-page::before { + content: ""; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + opacity: 0.11; + background-image: + linear-gradient(90deg, transparent 0, oklch(88% 0.055 84 / 0.06) 1px, transparent 1px), + linear-gradient(180deg, transparent 0, oklch(88% 0.055 84 / 0.04) 1px, transparent 1px), + url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); + background-size: 180px 180px, 180px 180px, 240px 240px; + mask-image: linear-gradient(180deg, black, transparent 78%); +} + +.kinpaku-system { + position: relative; + isolation: isolate; + overflow: clip; +} + +.kinpaku-system-page .skip-link { + position: fixed; + top: -96px; + left: 50%; + z-index: 1000; + transform: translateX(-50%); + padding: 12px 18px; + border: 1px solid var(--ks-patina); + border-radius: 4px; + color: var(--ks-lacquer); + background: var(--ks-patina); + font-weight: 700; + text-decoration: none; + transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); +} + +.kinpaku-system-page .skip-link:focus { + top: 16px; +} + +.kinpaku-system-page .skip-link:focus:not(:focus-visible) { + top: -96px; +} + +.kinpaku-system h1, +.kinpaku-system h2, +.kinpaku-system h3, +.kinpaku-system p { + color: inherit; + letter-spacing: 0; +} + +.ks-hero { + min-height: 100svh; + display: grid; + grid-template-rows: auto 1fr auto; + padding: 42px 44px 0; + position: relative; +} + +.ks-hero::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 91px; + height: 18px; + background: url("/assets/neo-kinpaku/gold-dust-rule.png") center / cover no-repeat; + opacity: 0.4; + mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); +} + +.ks-topbar, +.ks-header-sample { + display: flex; + align-items: center; + justify-content: space-between; + gap: 32px; +} + +.ks-brand { + display: inline-flex; + align-items: center; + gap: 22px; + text-decoration: none; +} + +.ks-mark { + width: 46px; + height: 46px; + display: grid; + place-items: center; + border: 1px solid var(--ks-kinpaku-deep); + border-radius: 6px; + color: var(--ks-kinpaku); + font-size: 26px; + line-height: 1; + box-shadow: inset 0 0 22px oklch(78% 0.12 82 / 0.07); +} + +.ks-wordmark { + color: var(--ks-kinpaku); + font-size: 0.95rem; + font-weight: 400; + letter-spacing: 0.42em; + text-transform: uppercase; +} + +.ks-nav { + display: flex; + align-items: center; + gap: 42px; +} + +.ks-nav a, +.ks-nav-cta { + color: var(--ks-champagne); + font-size: 0.95rem; + line-height: 1; + text-decoration: none; + transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1); +} + +.ks-nav a:hover, +.ks-nav-cta:hover { + color: var(--ks-kinpaku); +} + +.ks-nav a[aria-current="page"] { + color: var(--ks-kinpaku); + box-shadow: 0 12px 0 -10px var(--ks-kinpaku); +} + +.ks-nav-cta { + border: 1px solid var(--ks-kinpaku-deep); + padding: 18px 34px; + min-width: 142px; + text-align: center; +} + +.ks-hero-grid { + display: grid; + grid-template-columns: 1fr; + align-items: center; + position: relative; + min-height: 560px; + isolation: isolate; +} + +.ks-hero-copy { + position: relative; + z-index: 2; + max-width: 930px; + padding-left: 54px; +} + +.ks-kicker, +.ks-section-head > p, +.ks-component-group > h3, +.ks-token-panel > h3 { + color: var(--ks-kinpaku); + font-size: 0.72rem; + font-weight: 500; + letter-spacing: 0.34em; + text-transform: uppercase; +} + +.ks-hero h1 { + margin-top: 112px; + color: var(--ks-kinpaku); + font-family: var(--ks-font); + font-size: 5.5rem; + font-weight: 300; + line-height: 1; + letter-spacing: 0.18em; +} + +.ks-hero-line { + margin-top: 28px; + max-width: 640px; + color: var(--ks-champagne); + font-size: 1.45rem; + line-height: 1.65; +} + +.ks-hero-actions, +.ks-button-row { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 18px; +} + +.ks-hero-actions { + margin-top: 42px; +} + +.ks-button { + min-height: 56px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 18px; + padding: 0 34px; + border-radius: 2px; + font-size: 1rem; + line-height: 1; + text-decoration: none; + border: 1px solid transparent; + transition: + transform 220ms cubic-bezier(0.16, 1, 0.3, 1), + border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), + background 220ms cubic-bezier(0.16, 1, 0.3, 1), + color 220ms cubic-bezier(0.16, 1, 0.3, 1); + cursor: pointer; +} + +.ks-button:hover { + transform: translateY(-2px); +} + +.ks-button:focus-visible, +.ks-nav a:focus-visible, +.ks-nav-cta:focus-visible, +.ks-brand:focus-visible, +.ks-category-rail a:focus-visible, +.ks-rule-card a:focus-visible, +.ks-menu-button:focus-visible, +.ks-icon-button:focus-visible, +.ks-tabs button:focus-visible, +.ks-form-sample input:focus-visible { + outline: 2px solid var(--ks-patina); + outline-offset: 4px; +} + +.ks-button-primary { + background: + linear-gradient(90deg, oklch(92% 0.065 84 / 0.4), oklch(78% 0.12 82 / 0.7)), + url("/assets/neo-kinpaku/kinpaku-gold-leaf.png") center / 150% auto; + color: oklch(9% 0.006 95); + box-shadow: + inset 0 0 18px oklch(100% 0 0 / 0.08), + 0 18px 42px oklch(2% 0.004 95 / 0.35); +} + +.kinpaku-system-page .ks-button-primary { + color: oklch(9% 0.006 95) !important; +} + +.kinpaku-system-page .ks-button-primary span { + color: oklch(9% 0.006 95); +} + +.ks-button-primary:hover { + background: + linear-gradient(90deg, oklch(96% 0.05 84 / 0.32), oklch(78% 0.12 82 / 0.42)), + url("/assets/neo-kinpaku/kinpaku-gold-leaf.png") 60% 46% / 135% auto; +} + +.ks-button-secondary, +.ks-button-ghost { + background: transparent; + color: var(--ks-kinpaku); + border-color: var(--ks-kinpaku-deep); +} + +.kinpaku-system-page .ks-button-secondary, +.kinpaku-system-page .ks-button-ghost, +.kinpaku-system-page .ks-nav-cta { + color: var(--ks-kinpaku); +} + +.ks-button-secondary:hover, +.ks-button-ghost:hover { + border-color: var(--ks-patina); + color: var(--ks-patina); +} + +.ks-button-disabled, +.ks-button-disabled:hover { + background: oklch(18% 0.008 95); + color: var(--ks-muted); + border-color: var(--ks-rule-soft); + transform: none; + cursor: not-allowed; +} + +.ks-note { + margin-top: 42px; + display: grid; + grid-template-columns: 90px minmax(0, 1fr); + align-items: start; + gap: 16px; + max-width: 460px; + color: var(--ks-muted); + font-size: 1rem; + line-height: 1.7; +} + +.ks-note-pin { + height: 54px; + border-top: 1px solid var(--ks-kinpaku-deep); + border-left: 1px solid var(--ks-kinpaku-deep); + position: relative; +} + +.ks-note-pin::before, +.ks-note-pin::after { + content: ""; + position: absolute; + border-radius: 999px; + background: var(--ks-kinpaku); +} + +.ks-note-pin::before { + top: -4px; + left: -4px; + width: 8px; + height: 8px; +} + +.ks-note-pin::after { + top: -3px; + right: -2px; + width: 6px; + height: 6px; +} + +.ks-hero-art { + position: absolute; + inset: 0 -44px 0 -44px; + z-index: 0; + pointer-events: none; + background: + linear-gradient(90deg, oklch(4% 0.004 95 / 0.74) 0%, oklch(4% 0.004 95 / 0.24) 42%, transparent 68%), + linear-gradient(180deg, oklch(4% 0.004 95 / 0.22) 0%, transparent 52%, oklch(4% 0.004 95 / 0.52) 100%), + url("/assets/neo-kinpaku/hero-seam-field-v2.png") center / cover no-repeat; + filter: saturate(1.16) contrast(1.1) brightness(1.04); + mask-image: + linear-gradient(90deg, transparent 0%, black 12%, black 100%), + linear-gradient(180deg, black 0%, black 88%, transparent 100%); + mask-composite: intersect; +} + +.ks-circuit-field { + position: absolute; + right: 0; + top: 4%; + width: min(920px, 62vw); + height: 76%; + overflow: visible; + opacity: 0.68; + mix-blend-mode: screen; +} + +.ks-circuit-field path, +.ks-circuit-field circle, +.ks-circuit-specimen path, +.ks-circuit-specimen circle { + vector-effect: non-scaling-stroke; +} + +.ks-circuit-lines path { + fill: none; + stroke: var(--ks-kinpaku-deep); + stroke-width: 1.1; + stroke-linecap: round; + stroke-linejoin: round; + opacity: 0.74; +} + +.ks-circuit-nodes circle { + fill: oklch(5% 0.004 95 / 0.78); + stroke: var(--ks-kinpaku); + stroke-width: 1.2; + opacity: 0.9; +} + +.ks-foil-seam { + position: absolute; + top: 24%; + right: 24%; + width: 18px; + height: 58%; + transform: rotate(44deg); + background: + radial-gradient(circle at 52% 10%, oklch(95% 0.04 84 / 0.9), transparent 9px), + radial-gradient(circle at 34% 38%, oklch(86% 0.08 82 / 0.95), transparent 12px), + radial-gradient(circle at 72% 58%, oklch(94% 0.05 84 / 0.9), transparent 10px), + linear-gradient(180deg, transparent, var(--ks-kinpaku) 12%, var(--ks-kinpaku-deep) 52%, var(--ks-kinpaku-pale) 82%, transparent); + clip-path: polygon(42% 0, 62% 8%, 47% 20%, 70% 33%, 41% 50%, 58% 66%, 38% 82%, 54% 100%, 25% 100%, 39% 82%, 20% 68%, 42% 49%, 18% 34%, 39% 19%, 24% 7%); + filter: drop-shadow(0 0 16px oklch(78% 0.12 82 / 0.38)); + opacity: 0.22; +} + +.ks-foil-seam::before { + content: ""; + position: absolute; + inset: -18px -32px; + background: + radial-gradient(circle, oklch(78% 0.12 82 / 0.75) 0 1px, transparent 2px), + radial-gradient(circle, oklch(78% 0.12 82 / 0.4) 0 1px, transparent 3px); + background-size: 18px 14px, 31px 27px; + mask-image: linear-gradient(90deg, transparent, black 36%, transparent 78%); +} + +.ks-calibration { + position: absolute; + border: 1px solid var(--ks-rule); + opacity: 0.68; +} + +.ks-calibration::before, +.ks-calibration::after { + content: ""; + position: absolute; + background: var(--ks-kinpaku-deep); +} + +.ks-calibration-one { + right: 0; + top: 16%; + width: 380px; + height: 250px; + border-left: 0; +} + +.ks-calibration-one::before { + top: 54%; + left: -120px; + width: 220px; + height: 1px; +} + +.ks-calibration-one::after { + top: -22px; + left: 38%; + width: 1px; + height: 300px; +} + +.ks-calibration-two { + right: 9%; + bottom: 22%; + width: 460px; + height: 112px; + border-right: 0; + border-bottom: 0; +} + +.ks-calibration-two::before { + left: 12%; + top: 50%; + width: 100%; + height: 1px; +} + +.ks-calibration-two::after { + left: 22%; + bottom: -35px; + width: 1px; + height: 100px; +} + +.ks-patina-dot { + position: absolute; + width: 8px; + height: 8px; + border-radius: 999px; + background: var(--ks-patina); + box-shadow: 0 0 22px var(--ks-patina); + opacity: 0.9; +} + +.ks-patina-dot-one { + right: 8%; + top: 47%; +} + +.ks-patina-dot-two { + right: 34%; + bottom: 25%; +} + +.ks-category-rail { + min-height: 92px; + display: grid; + grid-template-columns: repeat(5, 1fr); + border-top: 1px solid var(--ks-rule-soft); +} + +.ks-category-rail a { + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + color: var(--ks-champagne); + text-decoration: none; + font-size: 1.05rem; + border-right: 1px solid var(--ks-rule-soft); +} + +.ks-category-rail a:last-child { + border-right: 0; +} + +.ks-category-rail a:hover { + color: var(--ks-patina); +} + +.ks-rail-icon, +.ks-rule-icon { + width: 28px; + height: 28px; + flex: none; + display: inline-grid; + place-items: center; + color: var(--ks-kinpaku); + border: 1px solid var(--ks-kinpaku-deep); +} + +.ks-rail-layout, +.ks-rail-color { + background: + linear-gradient(90deg, transparent 47%, var(--ks-kinpaku-deep) 47% 53%, transparent 53%), + linear-gradient(180deg, transparent 47%, var(--ks-kinpaku-deep) 47% 53%, transparent 53%); +} + +.ks-rail-type { + font-family: Georgia, serif; + font-size: 1rem; +} + +.ks-rail-color { + border-radius: 999px; +} + +.ks-rail-motion { + border: 0; + background: + linear-gradient(160deg, transparent 0 32%, var(--ks-kinpaku) 32% 37%, transparent 37% 60%, var(--ks-kinpaku) 60% 65%, transparent 65%); +} + +.ks-rail-access { + border-radius: 999px; + position: relative; +} + +.ks-rail-access::before, +.ks-rail-access::after { + content: ""; + position: absolute; + background: var(--ks-kinpaku); +} + +.ks-rail-access::before { + width: 14px; + height: 1px; + top: 9px; + left: 6px; +} + +.ks-rail-access::after { + width: 1px; + height: 13px; + top: 9px; + left: 13px; +} + +.ks-section { + max-width: 1500px; + margin: 0 auto; + padding: 118px 44px; + border-top: 1px solid var(--ks-rule-soft); +} + +.ks-section-head { + max-width: 760px; + margin-bottom: 52px; +} + +.ks-section-head h2 { + margin-top: 14px; + color: var(--ks-champagne); + font-size: 2.55rem; + font-weight: 400; + line-height: 1.12; +} + +.ks-token-layout, +.ks-action-grid, +.ks-proof-layout, +.ks-content-modules, +.ks-utility-grid { + display: grid; + gap: 24px; +} + +.ks-token-layout { + grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr); +} + +.ks-token-panel, +.ks-component-group, +.ks-doc-module, +.ks-pricing-module, +.ks-changelog-module, +.ks-before-after, +.ks-audit-row, +.ks-toast, +.ks-tooltip-sample, +.ks-skeleton { + background: + linear-gradient(135deg, oklch(100% 0 0 / 0.024), transparent 38%), + linear-gradient(180deg, oklch(5% 0.004 95 / 0.74), oklch(5% 0.004 95 / 0.96)), + url("/assets/neo-kinpaku/lacquer-grain.png") center / 960px auto, + oklch(11% 0.006 95 / 0.92); + border: 1px solid var(--ks-rule-soft); + border-radius: 8px; + box-shadow: 0 24px 70px var(--ks-shadow); +} + +.ks-token-panel, +.ks-component-group { + padding: 28px; +} + +.ks-swatch-grid { + margin-top: 28px; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 14px; +} + +.ks-swatch { + display: grid; + gap: 10px; + padding: 14px; + min-height: 138px; + background: oklch(7% 0.004 95 / 0.7); + border: 1px solid var(--ks-rule-soft); + border-radius: 6px; +} + +.ks-swatch-chip { + width: 100%; + height: 48px; + border-radius: 4px; + border: 1px solid oklch(100% 0 0 / 0.08); +} + +.ks-swatch strong, +.ks-swatch small { + display: block; +} + +.ks-swatch strong { + color: var(--ks-champagne); + font-size: 0.92rem; +} + +.ks-swatch small { + color: var(--ks-muted); + font-family: var(--ks-mono); + font-size: 0.68rem; + line-height: 1.45; +} + +.ks-swatch-lacquer { background: var(--ks-lacquer); } +.ks-swatch-graphite { + background: + linear-gradient(180deg, oklch(15% 0.008 95 / 0.74), oklch(5% 0.004 95 / 0.9)), + url("/assets/neo-kinpaku/lacquer-grain.png") center / cover; +} +.ks-swatch-kinpaku { + background: + linear-gradient(180deg, oklch(96% 0.035 84 / 0.14), oklch(62% 0.08 78 / 0.22)), + url("/assets/neo-kinpaku/kinpaku-gold-leaf.png") center / cover; +} +.ks-swatch-brass { + background: + linear-gradient(180deg, oklch(52% 0.08 78 / 0.18), oklch(24% 0.05 78 / 0.24)), + url("/assets/neo-kinpaku/kinpaku-gold-leaf.png") 66% 48% / 170% auto; +} +.ks-swatch-champagne { background: var(--ks-champagne); } +.ks-swatch-patina { + background: + linear-gradient(180deg, oklch(80% 0.08 190 / 0.1), oklch(26% 0.05 188 / 0.2)), + url("/assets/neo-kinpaku/verdigris-patina.png") center / cover; +} +.ks-swatch-teal { + background: + linear-gradient(180deg, oklch(48% 0.08 188 / 0.22), oklch(12% 0.035 188 / 0.36)), + url("/assets/neo-kinpaku/verdigris-patina.png") 72% 64% / 165% auto; +} +.ks-swatch-vermilion { background: var(--ks-vermilion); } + +.ks-type-panel { + display: grid; + align-content: start; + gap: 24px; +} + +.ks-type-spec { + display: grid; + gap: 8px; + padding-bottom: 20px; + border-bottom: 1px solid var(--ks-rule-soft); +} + +.ks-type-spec:last-child { + border-bottom: 0; + padding-bottom: 0; +} + +.ks-type-spec span { + color: var(--ks-kinpaku); + font-family: var(--ks-mono); + font-size: 0.72rem; +} + +.ks-type-spec strong { + color: var(--ks-champagne); + font-weight: 400; +} + +.ks-type-spec:first-of-type strong { + color: var(--ks-kinpaku); + font-size: 2.35rem; + letter-spacing: 0.18em; +} + +.ks-type-spec:first-of-type p { + max-width: 44ch; + font-size: 0.86rem; +} + +.ks-accent-library { + margin-top: 24px; + display: grid; + grid-template-columns: 0.8fr 1fr 1fr 1.1fr; + gap: 16px; +} + +.ks-accent-card { + min-height: 150px; + padding: 20px; + overflow: hidden; + position: relative; + border: 1px solid var(--ks-rule-soft); + border-radius: 8px; + background: + linear-gradient(180deg, oklch(5% 0.004 95 / 0.78), oklch(4% 0.004 95 / 0.94)), + url("/assets/neo-kinpaku/lacquer-grain.png") center / 920px auto; +} + +.ks-accent-card > span { + color: var(--ks-kinpaku); + font-family: var(--ks-mono); + font-size: 0.68rem; + letter-spacing: 0.16em; + text-transform: uppercase; +} + +.ks-pin-field { + position: absolute; + inset: 56px 24px 24px; +} + +.ks-pin-field i { + position: absolute; + width: 42px; + height: 42px; + border-top: 1px solid var(--ks-kinpaku-deep); + border-left: 1px solid var(--ks-kinpaku-deep); +} + +.ks-pin-field i::before, +.ks-pin-field i::after { + content: ""; + position: absolute; + background: var(--ks-kinpaku); +} + +.ks-pin-field i::before { + top: 19px; + left: -14px; + width: 70px; + height: 1px; +} + +.ks-pin-field i::after { + top: -14px; + left: 19px; + width: 1px; + height: 70px; +} + +.ks-pin-field i:nth-child(1) { + left: 0; + top: 12px; +} + +.ks-pin-field i:nth-child(2) { + left: 92px; + top: 30px; + transform: scale(0.64); +} + +.ks-pin-field i:nth-child(3) { + right: 0; + top: 0; + transform: scale(0.46); + opacity: 0.7; +} + +.ks-dust-field { + position: absolute; + left: 22px; + right: 22px; + top: 74px; + height: 52px; + background: url("/assets/neo-kinpaku/gold-dust-rule.png") center / cover no-repeat; + opacity: 0.64; + mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); +} + +.ks-circuit-specimen { + position: absolute; + left: 22px; + right: 22px; + bottom: 18px; + width: calc(100% - 44px); + height: 94px; +} + +.ks-circuit-specimen path { + fill: none; + stroke: var(--ks-kinpaku-deep); + stroke-width: 1.35; + stroke-linecap: round; + stroke-linejoin: round; +} + +.ks-circuit-specimen circle { + fill: oklch(5% 0.004 95); + stroke: var(--ks-kinpaku); + stroke-width: 1.35; +} + +.ks-oxidation-field { + position: absolute; + inset: 12px -28px -32px auto; + width: 270px; + background: url("/assets/neo-kinpaku/oxidation-edge-accent.png") center bottom / contain no-repeat; + opacity: 0.72; +} + +.ks-type-spec:nth-of-type(2) strong { + font-size: 1.55rem; +} + +.ks-type-spec p { + color: var(--ks-muted); + line-height: 1.65; +} + +.ks-component-strip { + padding: 26px; + border: 1px solid var(--ks-rule-soft); + border-radius: 8px; + background: oklch(9% 0.006 95 / 0.72); +} + +.ks-header-sample { + min-height: 82px; + padding: 0 22px; + background: var(--ks-lacquer-2); + border: 1px solid var(--ks-rule-soft); + border-radius: 6px; +} + +.ks-brand-small .ks-mark { + width: 38px; + height: 38px; + font-size: 22px; +} + +.ks-brand-small .ks-wordmark { + font-size: 0.78rem; +} + +.ks-menu-button { + width: 48px; + height: 48px; + display: grid; + place-content: center; + gap: 7px; + background: transparent; + border: 0; + color: var(--ks-kinpaku); + cursor: pointer; +} + +.ks-menu-button span { + width: 24px; + height: 1px; + background: currentColor; +} + +.ks-action-grid { + grid-template-columns: 1.05fr 0.95fr 0.9fr; +} + +.ks-form-sample { + display: grid; + gap: 20px; + margin-top: 24px; +} + +.ks-form-sample label { + display: grid; + gap: 8px; + color: var(--ks-muted); + font-size: 0.86rem; +} + +.ks-form-sample input[type="search"] { + min-height: 48px; + padding: 0 14px; + border: 1px solid var(--ks-rule); + border-radius: 4px; + background: oklch(6% 0.004 95); + color: var(--ks-champagne); +} + +.ks-form-sample input[type="search"]:focus { + border-color: var(--ks-patina); +} + +.ks-toggle { + display: flex !important; + grid-template-columns: none; + align-items: center; + gap: 12px !important; +} + +.ks-toggle input { + appearance: none; + width: 48px; + height: 26px; + border-radius: 999px; + border: 1px solid var(--ks-rule); + background: var(--ks-graphite); + position: relative; + cursor: pointer; +} + +.ks-toggle input::before { + content: ""; + position: absolute; + width: 18px; + height: 18px; + left: 3px; + top: 3px; + border-radius: 999px; + background: var(--ks-muted); + transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background 220ms cubic-bezier(0.16, 1, 0.3, 1); +} + +.ks-toggle input:checked { + border-color: var(--ks-patina); + background: oklch(48% 0.08 188 / 0.2); +} + +.ks-toggle input:checked::before { + transform: translateX(22px); + background: var(--ks-patina); +} + +.ks-tabs { + margin-top: 24px; +} + +.ks-tab-list { + display: flex; + border-bottom: 1px solid var(--ks-rule-soft); +} + +.ks-tab-list button { + flex: 1; + min-height: 44px; + border: 0; + border-bottom: 2px solid transparent; + background: transparent; + color: var(--ks-muted); + cursor: pointer; +} + +.ks-tab-list button[aria-selected="true"] { + color: var(--ks-kinpaku); + border-bottom-color: var(--ks-kinpaku); +} + +.ks-tab-panel { + min-height: 86px; + padding: 20px 4px 0; + color: var(--ks-champagne); + line-height: 1.65; +} + +.ks-proof-layout { + grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr); + align-items: stretch; +} + +.ks-before-after { + padding: 22px; +} + +.ks-comparison-head { + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: 18px; +} + +.ks-comparison-head h3 { + color: var(--ks-champagne); + font-size: 1.05rem; + font-weight: 500; +} + +.ks-comparison-head span { + color: var(--ks-muted); + font-family: var(--ks-mono); + font-size: 0.72rem; + text-transform: uppercase; +} + +.ks-comparison-stage { + position: relative; + min-height: 480px; + overflow: hidden; + border: 1px solid var(--ks-rule-soft); + border-radius: 6px; + background: + linear-gradient(90deg, oklch(100% 0 0 / 0.026) 1px, transparent 1px), + linear-gradient(180deg, oklch(100% 0 0 / 0.018) 1px, transparent 1px), + radial-gradient(circle at 74% 50%, oklch(69% 0.105 190 / 0.08), transparent 18rem), + linear-gradient(180deg, oklch(5% 0.004 95 / 0.42), oklch(5% 0.004 95 / 0.95)), + url("/assets/neo-kinpaku/lacquer-grain.png") center / 900px auto, + oklch(7% 0.004 95); + background-size: 36px 36px, 36px 36px, auto, auto, 900px auto, auto; +} + +.ks-comparison-side { + position: absolute; + inset: 0; + padding: 28px; +} + +.ks-comparison-before { + background: + radial-gradient(circle at 30% 42%, oklch(62% 0.18 305 / 0.1), transparent 15rem), + linear-gradient(180deg, transparent, oklch(3% 0.004 95 / 0.34)); +} + +.ks-comparison-after { + background: + radial-gradient(circle at 76% 46%, oklch(69% 0.105 190 / 0.11), transparent 18rem), + linear-gradient(90deg, oklch(5% 0.004 95 / 0.88), oklch(7% 0.006 95 / 0.96)); +} + +.ks-badge { + display: inline-flex; + align-items: center; + min-height: 30px; + padding: 0 12px; + border: 1px solid currentColor; + border-radius: 3px; + font-size: 0.72rem; + font-weight: 600; + text-transform: uppercase; +} + +.ks-badge-warning { + color: var(--ks-vermilion); +} + +.ks-badge-success { + color: var(--ks-patina); +} + +.ks-mini-ui { + width: min(350px, 44%); + min-height: 258px; + padding: 18px; + border: 1px solid var(--ks-rule-soft); + border-radius: 7px; + box-shadow: 0 22px 58px oklch(1% 0.004 95 / 0.42); +} + +.ks-mini-ui strong { + display: block; + color: var(--ks-champagne); + font-size: 1rem; + font-weight: 600; +} + +.ks-mini-ui p { + margin-top: 8px; + color: var(--ks-muted); + font-size: 0.82rem; + line-height: 1.45; +} + +.ks-mini-ui button { + width: 100%; + min-height: 46px; + margin-top: 18px; + border: 0; + border-radius: 4px; +} + +.ks-mini-ui-before { + margin: 58px auto 0 7%; + background: oklch(96% 0.01 285); + color: oklch(20% 0.02 285); + box-shadow: 0 18px 50px oklch(78% 0.2 300 / 0.16); + background: + linear-gradient(135deg, oklch(100% 0 0 / 0.06), transparent 44%), + linear-gradient(180deg, oklch(17% 0.008 95), oklch(8% 0.006 95)); +} + +.ks-mini-ui-before strong { + color: oklch(90% 0.018 82); +} + +.ks-mini-ui-before p { + color: oklch(58% 0.02 82); +} + +.ks-mini-ui-before button { + color: oklch(98% 0.01 285); + background: linear-gradient(90deg, oklch(62% 0.24 285), oklch(48% 0.22 315)); +} + +.ks-mini-toolbar { + display: flex; + align-items: center; + gap: 9px; +} + +.ks-mini-toolbar span { + height: 4px; + width: 42px; + display: block; + border-radius: 999px; + background: oklch(54% 0.01 95 / 0.55); +} + +.ks-mini-toolbar span:first-child { + width: 18px; + height: 18px; + border-radius: 999px; + background: oklch(54% 0.01 95 / 0.55); +} + +.ks-mini-toolbar span:last-child { + margin-left: auto; + width: 34px; +} + +.ks-mini-toolbar-after span { + background: var(--ks-kinpaku-deep); +} + +.ks-mini-toolbar-after span:first-child { + background: var(--ks-kinpaku); +} + +.ks-slop-card { + margin-top: 16px; + padding: 22px; + border: 1px solid oklch(100% 0 0 / 0.08); + border-radius: 7px; + background: + radial-gradient(circle at 22% 18%, oklch(66% 0.22 285 / 0.34), transparent 4.5rem), + linear-gradient(135deg, oklch(100% 0 0 / 0.08), oklch(100% 0 0 / 0.02)); +} + +.ks-ui-orb { + width: 42px; + height: 42px; + display: block; + margin-bottom: 16px; + border-radius: 999px; + background: linear-gradient(135deg, oklch(65% 0.22 285), oklch(54% 0.25 310)); +} + +.ks-mini-tile-row { + margin-top: 14px; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; +} + +.ks-mini-tile-row span { + min-height: 26px; + border: 1px solid oklch(100% 0 0 / 0.08); + border-radius: 4px; + background: linear-gradient(180deg, oklch(100% 0 0 / 0.09), oklch(100% 0 0 / 0.02)); +} + +.ks-mini-ui-after { + width: min(390px, 50%); + margin: 58px 6% 0 auto; + background: + linear-gradient(135deg, oklch(78% 0.12 82 / 0.1), transparent), + oklch(10% 0.006 95); +} + +.ks-after-layout { + margin-top: 18px; + display: grid; + grid-template-columns: 0.9fr 1fr; + gap: 18px; + align-items: start; +} + +.ks-after-visual { + aspect-ratio: 1.2; + border: 1px solid var(--ks-rule-soft); + border-radius: 5px; + background: + linear-gradient(180deg, transparent 50%, oklch(5% 0.004 95 / 0.92)), + url("/assets/neo-kinpaku/kinpaku-gold-leaf.png") 48% 42% / 190% auto, + oklch(9% 0.006 95); + filter: saturate(0.72) contrast(1.02); +} + +.ks-after-copy { + display: grid; + align-content: start; +} + +.ks-ui-rule { + width: 86px; + height: 1px; + display: block; + margin-bottom: 18px; + background: var(--ks-kinpaku); + box-shadow: 94px 0 0 var(--ks-patina); +} + +.ks-after-metrics { + margin-top: 18px; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 14px; +} + +.ks-after-metrics span { + height: 36px; + border-top: 1px solid var(--ks-kinpaku-deep); + border-bottom: 1px solid var(--ks-rule-soft); + background: + linear-gradient(90deg, var(--ks-kinpaku-deep) 0 58%, transparent 58%) 0 9px / 100% 2px no-repeat, + linear-gradient(90deg, oklch(69% 0.105 190 / 0.5) 0 28%, transparent 28%) 0 23px / 100% 2px no-repeat; +} + +.ks-callout { + position: absolute; + min-height: 30px; + display: inline-flex; + align-items: center; + padding: 0 12px; + border-radius: 3px; + font-size: 0.76rem; + font-weight: 600; +} + +.ks-callout-warning { + left: 8%; + bottom: 34%; + border: 1px solid var(--ks-vermilion); + color: var(--ks-vermilion); + background: oklch(9% 0.006 95 / 0.8); +} + +.ks-callout-low { + bottom: 18%; + left: 12%; +} + +.ks-callout-success { + right: 12%; + bottom: 26%; + border: 1px solid var(--ks-patina); + color: var(--ks-patina); + background: oklch(9% 0.006 95 / 0.8); +} + +.ks-comparison-divider { + position: absolute; + top: -9%; + left: 56%; + width: 150px; + height: 118%; + transform: translateX(-50%); + transform-origin: center; + pointer-events: none; + z-index: 4; + background: url("/assets/neo-kinpaku/before-after-seam.png") center / auto 100% no-repeat; + filter: drop-shadow(0 0 11px oklch(78% 0.12 82 / 0.28)); +} + +.ks-comparison-range { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: ew-resize; +} + +.ks-audit-stack { + display: grid; + gap: 14px; +} + +.ks-audit-row { + display: grid; + grid-template-columns: auto 1fr auto; + gap: 18px; + align-items: center; + padding: 18px; +} + +.ks-audit-row strong, +.ks-doc-module h3, +.ks-pricing-module h3, +.ks-changelog-module h3, +.ks-rule-card h3 { + color: var(--ks-champagne); + font-weight: 500; +} + +.ks-audit-row p, +.ks-doc-module p, +.ks-pricing-module p, +.ks-changelog-module p { + margin-top: 4px; + color: var(--ks-muted); + line-height: 1.55; +} + +.ks-severity, +.ks-status { + min-height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 10px; + border-radius: 3px; + font-size: 0.72rem; + font-weight: 600; +} + +.ks-severity-high { + color: var(--ks-vermilion); + border: 1px solid var(--ks-vermilion); +} + +.ks-severity-medium { + color: var(--ks-kinpaku); + border: 1px solid var(--ks-kinpaku-deep); +} + +.ks-severity-low { + color: var(--ks-muted); + border: 1px solid var(--ks-rule); +} + +.ks-status { + color: var(--ks-kinpaku); +} + +.ks-status-ready, +.ks-status-fixed { + color: var(--ks-patina); +} + +.ks-card-grid { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 16px; +} + +.ks-rule-card { + min-height: 260px; + display: grid; + align-content: start; + gap: 18px; + padding: 24px; + border: 1px solid var(--ks-rule-soft); + border-radius: 8px; + background: oklch(10% 0.006 95 / 0.82); + text-decoration: none; + transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1); +} + +.ks-rule-card::before { + content: ""; + width: 100%; + height: 18px; + display: block; + order: -1; + margin-bottom: 2px; + background: url("/assets/neo-kinpaku/gold-dust-rule.png") center / cover no-repeat; + opacity: 0.32; + mask-image: linear-gradient(90deg, black, transparent 72%); +} + +.ks-rule-card:hover { + transform: translateY(-3px); + border-color: var(--ks-kinpaku-deep); +} + +.ks-rule-card p, +.ks-doc-module > span, +.ks-pricing-module > span, +.ks-changelog-module > span { + color: var(--ks-kinpaku); + font-family: var(--ks-mono); + font-size: 0.72rem; + text-transform: uppercase; +} + +.ks-rule-card h3 { + font-size: 1.18rem; + line-height: 1.35; +} + +.ks-rule-card a { + margin-top: auto; + color: var(--ks-patina); + text-decoration: none; +} + +.ks-content-modules { + margin-top: 24px; + grid-template-columns: 1.1fr 0.85fr 0.85fr; +} + +.ks-doc-module, +.ks-pricing-module, +.ks-changelog-module { + padding: 26px; +} + +.ks-doc-module h3, +.ks-pricing-module h3, +.ks-changelog-module h3 { + margin-top: 16px; + font-size: 1.35rem; +} + +.ks-doc-module pre { + margin-top: 18px; + padding: 18px; + overflow-x: auto; + border: 1px solid var(--ks-rule-soft); + border-radius: 6px; + color: var(--ks-patina); + background: oklch(5% 0.004 95); +} + +.ks-doc-module code { + padding: 0; + background: transparent; + color: inherit; + border-radius: 0; +} + +.ks-pricing-module .ks-button { + margin-top: 22px; + width: 100%; +} + +.ks-utility-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.ks-toast, +.ks-tooltip-sample, +.ks-skeleton { + min-height: 126px; + padding: 20px; +} + +.ks-toast strong, +.ks-toast span { + display: block; +} + +.ks-toast strong { + color: var(--ks-champagne); +} + +.ks-toast span { + margin-top: 8px; + color: var(--ks-muted); + line-height: 1.5; +} + +.ks-toast-success { + border-color: oklch(69% 0.105 190 / 0.36); + background: + linear-gradient(90deg, oklch(4% 0.004 95 / 0.42), oklch(4% 0.004 95 / 0.78)), + linear-gradient(90deg, oklch(69% 0.105 190 / 0.2), transparent 34%), + url("/assets/neo-kinpaku/verdigris-patina.png") 20% 44% / 260% auto, + oklch(11% 0.006 95 / 0.92); +} + +.ks-toast-success span { + color: oklch(88% 0.028 82); +} + +.ks-toast-warning { + border-color: oklch(63% 0.16 35 / 0.36); +} + +.ks-tooltip-sample { + display: grid; + place-items: center; + position: relative; +} + +.ks-icon-button { + width: 42px; + height: 42px; + border: 1px solid var(--ks-kinpaku-deep); + border-radius: 999px; + background: transparent; + color: var(--ks-kinpaku); + cursor: pointer; +} + +.ks-tooltip { + position: absolute; + left: 50%; + bottom: 18px; + transform: translateX(-50%); + width: 220px; + padding: 10px 12px; + border-radius: 4px; + color: var(--ks-champagne); + background: oklch(4% 0.004 95); + border: 1px solid var(--ks-rule); + box-shadow: 0 18px 36px var(--ks-shadow); + font-size: 0.78rem; + line-height: 1.45; + opacity: 0; + pointer-events: none; + transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1); +} + +.ks-icon-button:hover + .ks-tooltip, +.ks-icon-button:focus-visible + .ks-tooltip { + opacity: 1; + transform: translateX(-50%) translateY(-8px); +} + +.ks-skeleton { + display: grid; + align-content: center; + gap: 14px; +} + +.ks-skeleton span { + height: 14px; + border-radius: 999px; + background: linear-gradient(90deg, var(--ks-graphite), oklch(69% 0.105 190 / 0.14), var(--ks-graphite)); + background-size: 240% 100%; + animation: ks-skeleton 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; +} + +.ks-skeleton span:nth-child(2) { + width: 72%; +} + +.ks-skeleton span:nth-child(3) { + width: 48%; +} + +.ks-implementation { + padding-bottom: 150px; + position: relative; + overflow: hidden; +} + +.ks-implementation::after { + content: ""; + position: absolute; + right: -150px; + bottom: -120px; + width: 500px; + height: 860px; + pointer-events: none; + background: url("/assets/neo-kinpaku/oxidation-edge-accent.png") center bottom / contain no-repeat; + opacity: 0.44; + filter: saturate(0.92); +} + +.ks-implementation > * { + position: relative; + z-index: 1; +} + +.ks-build-plan { + display: grid; + gap: 12px; + counter-reset: build-plan; + list-style: none; + padding: 0; +} + +.ks-build-plan li { + counter-increment: build-plan; + display: grid; + grid-template-columns: 46px minmax(0, 1fr); + gap: 16px; + align-items: start; + padding: 22px; + border: 1px solid var(--ks-rule-soft); + border-radius: 8px; + background: oklch(10% 0.006 95 / 0.72); + color: var(--ks-muted); + line-height: 1.65; +} + +.ks-build-plan li > span { + min-width: 0; +} + +.ks-build-plan li::before { + content: counter(build-plan, decimal-leading-zero); + color: var(--ks-patina); + font-family: var(--ks-mono); + font-size: 0.82rem; +} + +.ks-build-plan strong { + color: var(--ks-champagne); + font-weight: 600; +} + +@keyframes ks-skeleton { + 0% { background-position: 100% 0; } + 100% { background-position: -100% 0; } +} + +@media (max-width: 1180px) { + .ks-nav { + gap: 22px; + } + + .ks-hero-grid, + .ks-token-layout, + .ks-proof-layout { + grid-template-columns: 1fr; + } + + .ks-hero-copy { + padding-left: 0; + } + + .ks-hero h1 { + margin-top: 96px; + font-size: 4.15rem; + } + + .ks-hero-art { + min-height: 360px; + } + + .ks-foil-seam { + right: 42%; + height: 118%; + top: -10%; + transform: rotate(72deg); + } + + .ks-action-grid, + .ks-content-modules, + .ks-utility-grid, + .ks-accent-library { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .ks-card-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (max-width: 820px) { + .ks-hero, + .ks-section { + padding-left: 22px; + padding-right: 22px; + } + + .ks-topbar { + align-items: flex-start; + } + + .ks-nav, + .ks-nav-cta, + .ks-nav-sample { + display: none; + } + + .ks-hero h1 { + font-size: clamp(2rem, 8.2vw, 2.9rem); + letter-spacing: 0.08em; + } + + .ks-hero-line { + font-size: 1.08rem; + } + + .ks-hero-grid { + align-items: start; + min-height: 600px; + } + + .ks-hero-art { + inset: 318px -150px 0 0; + background-position: right bottom; + background-size: auto 560px; + filter: saturate(1.08) contrast(1.04) brightness(0.92); + mask-image: + linear-gradient(90deg, transparent 0%, transparent 26%, black 58%, black 100%), + linear-gradient(180deg, transparent 0%, black 18%, black 88%, transparent 100%); + } + + .ks-circuit-field { + top: 8%; + right: -18%; + width: 136vw; + height: 68%; + opacity: 0.42; + } + + .ks-calibration, + .ks-patina-dot { + opacity: 0.36; + } + + .ks-foil-seam { + opacity: 0.12; + } + + .ks-wordmark { + font-size: 0.72rem; + letter-spacing: 0.28em; + } + + .ks-category-rail { + grid-template-columns: 1fr; + padding: 12px 0; + } + + .ks-category-rail a { + min-height: 62px; + justify-content: flex-start; + padding-left: 8px; + border-right: 0; + border-bottom: 1px solid var(--ks-rule-soft); + } + + .ks-category-rail a:last-child { + border-bottom: 0; + } + + .ks-section { + padding-top: 80px; + padding-bottom: 80px; + } + + .ks-section-head h2 { + font-size: 2rem; + } + + .ks-swatch-grid, + .ks-action-grid, + .ks-content-modules, + .ks-utility-grid, + .ks-accent-library, + .ks-card-grid { + grid-template-columns: 1fr; + } + + .ks-header-sample { + padding: 0 14px; + } + + .ks-audit-row { + grid-template-columns: 1fr; + } + + .ks-mini-ui { + width: 80%; + margin-left: auto; + margin-right: auto; + } + + .ks-mini-ui-after { + width: 84%; + } + + .ks-comparison-divider { + width: 108px; + } +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + scroll-behavior: auto !important; + transition-duration: 0.001ms !important; + } +} diff --git a/site/styles/footer.css b/site/styles/footer.css index 81afd16cf..6de849d13 100644 --- a/site/styles/footer.css +++ b/site/styles/footer.css @@ -92,4 +92,4 @@ } } -/* ============================================ +/* ============================================ */