/* Clean Slate treatment (design-core.subako.studio), resynced 2026-09 directly against the design-core source (subako-design-core repo), not just the hosted docs site. Corrected from an earlier pass that had rebuilt "Pixel Drift" — the notched, hard-offset, brand-tinted-shadow treatment — which src/config/design-modes.ts explicitly says was RETIRED: "Clean Slate is currently the only registered mode." Its actual rules: - No notch anywhere. --mode-notch is 0 in the only registered mode, so no component ever shows a cut corner. - Elevation is a soft neutral blur, never brand-tinted. The mode sets --mode-shadow-color explicitly, which overrides the pink/gold/teal "surface tone" a toned panel would otherwise fall back to — so even a panel that requests a colored shadow renders a neutral one. Dark ground reads elevation through a 1px inset rim light instead (a blurred shadow is invisible on near-black), light ground through the shadow itself. - No grid texture. --mode-grid-opacity is 0%. - Buttons carry no shadow at all, in any state — that's a Surface thing, not a Button thing, and Button never opts in. - Any element carrying the brand mark (the top nav) stays pinned to dark tokens regardless of the active theme via .brand-chrome, because there is no light-safe logo treatment. - data-pixel-theme: light/dark, resolved from system by shared/theme.ts and set on . - data-shadow-style="hard" (static, set in every page's tag): "hard" means "show this mode's elevation" as opposed to "flat", which zeroes it to a plain bordered panel. It is not a description of the shadow's edge — Clean Slate's own elevation is a soft blur. Inter for UI text (normal case — buttons/nav/tabs/badges are NOT uppercase), Georgia only for display headings, JetBrains Mono only for literal code/terminal content. Uppercase+tracked is reserved for eyebrow/label text specifically, still in Inter, weight capped at 600 (semibold) — the system defines no bold/700 UI weight. Pink is the only default interactive accent; gold is this product's assigned per-tool accent; teal is unused. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { --ink: #09090b; --panel: #111114; --panel-soft: #18181b; --line: #29292e; --muted: #a1a1aa; --fg: #f4f4f5; --white: #fff; --pink: #f472b6; --pink-bright: #f9a8d4; --gold: #c8c86e; --teal: #86c5d3; --success: #4ade80; --success-soft: #6ee7b7; --success-strong: #052e16; --warning: #fde68a; --warning-strong: #713f12; --danger: #fca5a5; --danger-strong: #7f1d1d; --info: #93c5fd; --info-strong: #1e3a8a; /* Corners belong to the design mode, not to any component. */ --radius-xs: 0.2rem; --radius-sm: 0.35rem; --radius-md: 0.5rem; --radius-lg: 0.65rem; --radius-xl: 0.8rem; --radius-2xl: 1rem; --radius-3xl: 1.25rem; --radius-pill: 10rem; --radius-full: 9999px; --shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.35); --shadow-panel-lg: 0 24px 70px rgba(0, 0, 0, 0.3); --shadow-glow-pink: inset 0 0 60px rgba(244, 114, 182, 0.06); /* Neutral chrome shadow — dropdowns/menus/toasts. Never brand-tinted. */ --mode-chrome-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); --mode-chrome-shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.35); /* Soft, neutral surface elevation (geometry only — color composed at the point of use, see .pixel-shadow below). --mode-shadow-color is set, which overrides a toned panel's brand-color fallback, so every panel casts the same neutral shadow regardless of tone. */ --mode-shadow: 0 6px 20px 0; --mode-shadow-hover: 0 14px 32px 0; --mode-shadow-press: 0 3px 10px 0; --mode-shadow-color: rgba(0, 0, 0, 0.44); --mode-lift: 2px; --mode-shadow-rim: inset 0 1px 0 0 rgba(255, 255, 255, 0.078); --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --font-display: Georgia, "Times New Roman", serif; --tracking-tight: -0.025em; --tracking-wide: 0.025em; --leading-snug: 1.375; --leading-relaxed: 1.625; } /* data-shadow-style="hard" is set as a static attribute in every page's tag (this product doesn't expose a flat/hard toggle) — this block is the alias indirection the guide's mechanism expects, so a future flat mode could zero these out the same way it does upstream. */ [data-shadow-style="hard"] { --surface-shadow: var(--mode-shadow); --surface-shadow-hover: var(--mode-shadow-hover); --surface-shadow-press: var(--mode-shadow-press); --surface-lift: var(--mode-lift); } [data-pixel-theme="light"] { --ink: #efeff1; --panel: #ffffff; --panel-soft: #e6e7ea; --line: #c7c9ce; --muted: #54565c; --fg: #17171a; --pink: #a91d59; --pink-bright: #7a1440; --gold: #715b0c; --teal: #0b6575; --success: #166534; --success-soft: #16a34a; --success-strong: #dcfce7; --warning: #8a5a09; --warning-strong: #fef3c7; --danger: #b91c1c; --danger-strong: #fee2e2; --info: #1d4ed8; --info-strong: #dbeafe; --shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.12); --shadow-panel-lg: 0 24px 60px rgba(0, 0, 0, 0.14); --shadow-glow-pink: inset 0 0 60px rgba(169, 29, 89, 0.06); --mode-chrome-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); --mode-chrome-shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.12); /* Light ground: the drop shadow itself does the work, so the dark-mode rim light (invisible on light ground anyway) is switched off. */ --mode-shadow-rim: 0 0 0 0 transparent; --mode-shadow-color: rgba(0, 0, 0, 0.12); } /* Soft elevation, composed at the point of use (not baked into a single :root shadow) — a custom property's var() references resolve against the element they're declared on, so folding a toned fallback into a :root-level shadow would resolve the tone against :root, where none is set, and every toned panel would silently render the pink fallback. The rim is a hairline inset highlight for dark ground, where a blurred shadow disappears against near-black; it defaults to transparent so a theme that doesn't need it (light) pays nothing extra. */ .pixel-shadow { box-shadow: var(--mode-shadow-rim, 0 0 0 0 transparent), var(--surface-shadow) var(--mode-shadow-color, var(--surface-tone, var(--pink))); transition: transform 150ms ease, box-shadow 150ms ease; } .pixel-shadow-hover:hover { transform: translate(calc(var(--surface-lift, 0px) * -1), calc(var(--surface-lift, 0px) * -1)); box-shadow: var(--mode-shadow-rim, 0 0 0 0 transparent), var(--surface-shadow-hover) var(--mode-shadow-color, var(--surface-tone, var(--pink))); } .pixel-shadow-press:active { transform: translate(0, 0); box-shadow: var(--mode-shadow-rim, 0 0 0 0 transparent), var(--surface-shadow-press) var(--mode-shadow-color, var(--surface-tone, var(--pink))); } /* Any element carrying the brand mark (the top nav) stays pinned to dark tokens regardless of the active theme — there is no light-safe logo treatment yet. Matches design-core's .brand-chrome exactly. */ .brand-chrome { --ink: #09090b; --panel: #111114; --panel-soft: #18181b; --line: #29292e; --muted: #a1a1aa; --fg: #f4f4f5; --pink: #f472b6; --pink-bright: #f9a8d4; --gold: #c8c86e; --teal: #86c5d3; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ink); color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; min-height: 100vh; transition: background-color 0.2s, color 0.2s; } a { color: var(--pink); } a:hover { color: var(--pink-bright); } button, .btn { background: var(--panel-soft); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 9px 16px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color 0.1s, color 0.1s, background-color 0.1s; } /* No shadow on hover/press, ever — that's a Surface thing (see .pixel-shadow above), and Button never opts in. */ button:hover, .btn:hover { border-color: var(--pink); color: var(--pink); } button:active, .btn:active { border-color: var(--pink); color: var(--pink); } button:disabled { opacity: 0.5; cursor: not-allowed; } button:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px color-mix(in srgb, var(--pink) 70%, transparent); } .btn-primary { background: var(--pink); border-color: var(--pink); color: var(--ink); } .btn-primary:hover { background: var(--pink-bright); border-color: var(--pink-bright); color: var(--ink); } input, select, textarea { background: var(--panel-soft); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 10px; font-family: var(--font-sans); font-size: 15px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pink) 70%, transparent); } .input-error { border-color: var(--danger) !important; } .input-error:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 30%, transparent); } /* Full-bleed outer wrapper — chrome (header, sidebar, footer) spans the viewport edge to edge; only page CONTENT is capped, via .page-width below, matching the real system (TopNav/AppShell have no max-width, only the div inside
does). */ .container { padding: 24px 16px; } @media (min-width: 640px) { .container { padding: 24px; } } .page-width { max-width: 1152px; margin: 0 auto; width: 100%; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--mode-chrome-shadow); padding: 16px; } .card-danger { background: var(--panel); border: 1px solid var(--danger); border-radius: var(--radius-2xl); box-shadow: var(--mode-chrome-shadow); padding: 16px; } .hud { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .pill { display: inline-block; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--panel-soft); font-size: 13px; } .pill.gold { border-color: var(--gold); color: var(--gold); } .sync-indicator { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; transition: border-color 0.2s, color 0.2s; } .sync-icon { font-size: 13px; line-height: 1; } .sync-synced { border-color: var(--success); color: var(--success); } .sync-pending { border-color: var(--gold); color: var(--gold); } .sync-error { border-color: var(--danger); color: var(--danger); } .sync-offline { border-color: var(--line); color: var(--muted); } /* ---- Site header / primary nav ---- */ /* Carries the brand mark, so it also gets the .brand-chrome class in markup (dark tokens pinned in every theme — see .brand-chrome above). */ .site-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: -24px -16px 20px; padding: 16px; color: var(--fg); background: color-mix(in srgb, var(--ink) 90%, transparent); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } @media (min-width: 640px) { .site-header { margin: -24px -24px 20px; padding: 16px 24px; } } @supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--ink); } } .brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-family: var(--font-sans); font-weight: 600; font-size: 15px; } .brand:hover { color: var(--fg); } .brand-mark { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border: 1px solid var(--pink); border-radius: var(--radius-md); color: var(--pink); } .nav-primary { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .nav-link { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: var(--muted); text-decoration: none; padding: 4px 0; } .nav-link:hover, .nav-link.active { color: var(--pink); } .header-tail { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .page-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--pink); margin: 0 0 10px 0; } .auth-header-inner { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .auth-dropdown { position: relative; } .auth-dropdown summary { list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; } .auth-dropdown summary::-webkit-details-marker { display: none; } .auth-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--mode-chrome-shadow); padding: 12px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; } .auth-menu a.btn, .auth-menu button.btn { text-align: left; } .auth-magic { display: flex; gap: 6px; } .auth-magic input { flex: 1; min-width: 0; } .auth-profile { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .auth-profile label { font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); } .auth-status { font-size: 13px; color: var(--muted); min-height: 16px; } /* ---- Home / Docs hero + tile grid (shared across index.html, docs/index.html) ---- */ .hero { position: relative; text-align: center; padding: 48px 16px 24px; } .hero h1 { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.3; margin: 0; color: var(--fg); } .hero p { color: var(--fg); max-width: 600px; margin: 16px auto 0; font-size: 17px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--pink); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 14px; margin-bottom: 22px; } /* ---- Home page: left-aligned hero, glow blob, platform strip, dev split ---- */ /* Flat, untextured ground — the active design mode has no grid texture (--mode-grid-opacity is 0%), so this no longer draws one. */ .home-hero { position: relative; overflow: hidden; margin: 0 0 40px; } .home-hero-glow { position: absolute; top: -120px; right: -80px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(244, 114, 182, 0.22), transparent 60%); animation: rglow 6s steps(6) infinite; pointer-events: none; } @supports (color: color-mix(in srgb, red, red)) { .home-hero-glow { background: radial-gradient(circle, color-mix(in srgb, var(--pink) 22%, transparent), transparent 60%); } } @keyframes rglow { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } } .home-hero-inner { position: relative; max-width: 780px; padding: 56px 0 40px; } .home-hero-inner h1 { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.25; color: var(--fg); margin: 0 0 22px; } .home-hero-inner p { font-size: 18px; line-height: 1.5; max-width: 58ch; color: var(--fg); margin: 0 0 28px; } .home-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; } .platform-strip { display: flex; gap: 24px; flex-wrap: wrap; } .platform-strip .platform-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 500; font-size: 13px; color: var(--muted); } .platform-strip .platform-item .ph { font-size: 16px; color: var(--gold); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 44px; } .feature-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--mode-chrome-shadow); padding: 20px; display: flex; flex-direction: column; gap: 10px; } .feature-card .feature-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: var(--radius-md); color: var(--gold); font-size: 18px; } .feature-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--fg); margin: 0; } .feature-card p { font-size: 15px; line-height: 1.4; color: var(--muted); margin: 0; } /* True viewport-edge bleed (not a negative margin sized to one ancestor's padding) — correct regardless of how deep .stat-band sits inside the now page-width-capped content column. The grid itself lives in a nested .page-width so the band's background bleeds full-width while its content stays capped like everything else. */ .stat-band { background: var(--panel-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px 24px; margin: 0 0 44px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .stat-band .page-width { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; text-align: center; } .stat-band .stat-band-value { font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--gold); } .stat-band .stat-band-label { font-family: var(--font-sans); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); margin-top: 10px; } .dev-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 30px; align-items: center; margin-bottom: 52px; } @media (max-width: 720px) { .dev-split { grid-template-columns: 1fr; } } .dev-split h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--fg); margin: 0 0 14px; } .dev-split p { font-size: 16px; line-height: 1.4; color: var(--muted); max-width: 46ch; margin: 0 0 20px; } /* The terminal mock stays permanently dark in both themes — a real terminal doesn't relight for a light-mode page — so its colors are named tokens declared once in :root only, not redeclared under [data-pixel-theme="light"]. */ :root { --code-terminal-bg: #111114; --code-terminal-bar-bg: #18181b; --code-terminal-text: #6ee7b7; } .code-terminal { border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--code-terminal-bg); box-shadow: var(--mode-chrome-shadow); overflow: hidden; } .code-terminal-bar { background: var(--code-terminal-bar-bg); border-bottom: 1px solid var(--line); padding: 7px 12px; font-family: var(--font-sans); font-weight: 600; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .code-terminal pre { margin: 0; padding: 16px; font-family: var(--font-mono); font-size: 14px; line-height: 1.5; color: var(--code-terminal-text); overflow-x: auto; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 24px; } .tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--mode-chrome-shadow); padding: 18px; transition: border-color 0.15s; } .tile:hover { border-color: var(--pink); } .tile h3 { margin: 0 0 8px 0; color: var(--fg); font-family: var(--font-display); font-weight: 600; font-size: 16px; } .tile p { margin: 0 0 14px 0; font-size: 15px; color: var(--muted); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--panel-soft); border: 1px solid var(--line); font-family: var(--font-sans); font-weight: 600; font-size: 12px; margin-bottom: 10px; } .badge.available { background: color-mix(in srgb, var(--success-strong) 60%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 20%, transparent); } .badge.coming-soon { background: var(--panel-soft); color: var(--muted); border: 1px solid var(--line); } /* General-purpose status/rarity badge variants — usable anywhere a colored pill is needed beyond the docs-tile .badge.available pattern above (which keeps its own name for backward compatibility). */ .badge-success { background: color-mix(in srgb, var(--success-strong) 60%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 20%, transparent); } .badge-warning { background: color-mix(in srgb, var(--warning-strong) 60%, transparent); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent); } .badge-danger { background: color-mix(in srgb, var(--danger-strong) 60%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent); } .badge-info { background: color-mix(in srgb, var(--info-strong) 60%, transparent); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 20%, transparent); } .badge-brand { background: color-mix(in srgb, var(--pink) 10%, transparent); color: var(--pink-bright); border: 1px solid color-mix(in srgb, var(--pink) 20%, transparent); } .badge-neutral { background: var(--panel-soft); color: var(--muted); border: 1px solid var(--line); } /* ---- Docs shell — the guide's actual DocsShell pattern (section sidebar with grouped links + breadcrumb + a capped content column), used for the whole Developers section instead of each page rolling its own "← Docs" back-button header. ---- */ .docs-shell { display: flex; flex-direction: column; } .docs-sidebar { flex-shrink: 0; border-bottom: 1px solid var(--line); padding: 0 0 20px; margin-bottom: 20px; } .docs-sidebar-title { margin: 0 0 12px; padding: 0 12px; font-family: var(--font-sans); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--pink); } .docs-nav { display: flex; flex-direction: column; gap: 16px; } .docs-nav-group-title { margin: 0 0 4px; padding: 0 12px; font-family: var(--font-sans); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); } .docs-nav-links { display: flex; flex-direction: column; gap: 2px; } .docs-nav-link { display: block; border-left: 2px solid transparent; padding: 6px 12px; font-family: var(--font-sans); font-size: 14px; color: var(--muted); text-decoration: none; transition: border-color 0.1s, background-color 0.1s, color 0.1s; } .docs-nav-link:hover { border-left-color: var(--line); background: var(--panel-soft); color: var(--fg); } .docs-nav-link.active { border-left-color: var(--pink-bright); background: color-mix(in srgb, var(--pink) 10%, transparent); color: var(--pink-bright); } .docs-main { flex: 1; min-width: 0; } .docs-main-inner { max-width: 1024px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; } .docs-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .docs-breadcrumb a { color: var(--muted); text-decoration: none; } .docs-breadcrumb a:hover { color: var(--fg); } .docs-breadcrumb .current { color: var(--fg); } @media (min-width: 768px) { .docs-shell { flex-direction: row; gap: 32px; } .docs-sidebar { width: 220px; border-bottom: none; border-right: 1px solid var(--line); padding: 0 20px 0 0; margin-bottom: 0; position: sticky; top: 96px; align-self: flex-start; max-height: calc(100vh - 116px); overflow-y: auto; } } /* ---- Docs pages: "coming soon" platform tiles + prose/code articles. Consolidated out of per-page embedded