diff --git a/tests/website-docs.test.ts b/tests/website-docs.test.ts index 95e9879..9cdab08 100644 --- a/tests/website-docs.test.ts +++ b/tests/website-docs.test.ts @@ -54,6 +54,10 @@ describe('website documentation', () => { 'refresh-project', 'manps [area]', '--remediate', + 'design configure --expected-revision', + '--confirm-experimental', + 'forbid-as-interface-icon', + '--browser-validation', 'workflow verify', 'workflow review', 'governed_execution', @@ -139,17 +143,23 @@ describe('website documentation', () => { expect(english).toContain('Project rules · commands'); expect(english).toContain('Repository instructions · prompts'); expect(english).toContain('Preview adapter'); + expect(english).toContain('id="design"'); + expect(english).toContain('05 / Design policy'); + expect(english).toContain('Present
2–3 routes.'); expect(english).toContain('id="continuity"'); - expect(english).toContain('06 / Cross-session continuity'); + expect(english).toContain('07 / Cross-session continuity'); expect(english).toContain('Raw chat history is not copied'); - expect(english).toContain('07 / Quick start'); + expect(english).toContain('08 / Quick start'); expect(chinese).toContain('id="context"'); expect(chinese).toContain('04 / 项目感知'); - expect(chinese).toContain('05 / 适配器'); + expect(chinese).toContain('id="design"'); + expect(chinese).toContain('05 / 设计策略'); + expect(chinese).toContain('先给出
2–3 个方向。'); + expect(chinese).toContain('06 / 适配器'); expect(chinese).toContain('id="continuity"'); - expect(chinese).toContain('06 / 跨会话续接'); + expect(chinese).toContain('07 / 跨会话续接'); expect(chinese).toContain('不复制原始聊天记录'); - expect(chinese).toContain('07 / 快速开始'); + expect(chinese).toContain('08 / 快速开始'); expect(chinese).toContain('交付干净'); expect(chinese).toContain('代码，避免'); expect(chinese).toContain('AI 屎山。'); @@ -159,6 +169,23 @@ describe('website documentation', () => { expect(chinese).toContain(`Continuity / v${version}`); }); + it('documents the opt-in design policy and its safety boundaries', async () => { + for (const name of ['docs.html', 'docs.zh-CN.html']) { + const html = await readPage(name); + expect(html).toContain('id="design"'); + expect(html).toContain('

preserve

'); + expect(html).toContain('

refine

'); + expect(html).toContain('

experimental

'); + expect(html).toContain('mancode design status --json'); + expect(html).toContain('mancode design context --json'); + expect(html).toContain('--icons lucide'); + expect(html).toContain('.mancode/shared/context/design-policy.json'); + } + + expect(await readPage('docs.html')).toContain('does not install a package'); + expect(await readPage('docs.zh-CN.html')).toContain('不会自动安装依赖'); + }); + it('documents the cross-session boundary in both languages', async () => { const english = await readPage('docs.html'); const chinese = await readPage('docs.zh-CN.html'); diff --git a/website/docs.css b/website/docs.css index 93e49eb..def2553 100644 --- a/website/docs.css +++ b/website/docs.css @@ -593,6 +593,18 @@ line-height: 1.65; } +.design-presets { + grid-template-columns: repeat(3, 1fr); +} + +.design-presets article:nth-child(2) { + position: relative; + background: + linear-gradient(rgba(255, 100, 20, 0.07), rgba(255, 100, 20, 0.02)), + var(--docs-panel); + box-shadow: inset 0 3px 0 var(--orange); +} + .docs-admonition { margin-top: 24px; padding: 18px 20px; diff --git a/website/docs.html b/website/docs.html index f62c5ac..73d0c51 100644 --- a/website/docs.html +++ b/website/docs.html @@ -28,7 +28,7 @@
Website GitHub - + 中
@@ -44,7 +44,7 @@ @@ -83,7 +83,7 @@

Non-interactive or targeted initialization

--platform LISTYou know the target agentsInstalls one or more of claude-code, cursor, codex, copilot, and zcode. --emptyThe directory is intentionally emptyAllows generic-project initialization without git init or a package manifest. --team / --no-teamAuto-detection is not the policy you wantForces shared-memory mode on or off. - --style NAMEYou have a named visual preferenceSaves it as the default style preference. + --style NAMEYou explicitly initialize with --legacyStores the old free-text style preference. Continuity projects use the revisioned mancode design policy instead. --lang en|zh-CNYou need deterministic generated textSets the generated-content locale. @@ -131,6 +131,35 @@

Choose the smallest mode

Rule of thumb

Use /man when a wrong choice would be expensive, hard to reverse, or difficult to inspect later—not simply because the task is large.

+
+

Set a design policy

+

The design policy is an explicit, opt-in Continuity feature for UI work. mancode init does not create it. When no valid policy is active, design context fails open to preserve, so ordinary coding and workflow recovery are not blocked.

+
+
Lowest disruption

preserve

Keeps the existing hierarchy, layout, component system, and interaction patterns. The agent makes only the UI changes required by the task.

+
Recommended default

refine

Improves hierarchy, typography, spacing, states, and responsive behavior without changing the product structure.

+
Explicit confirmation

experimental

Allows one stronger product-appropriate composition and purposeful motion after --confirm-experimental. It still cannot expand scope or invent product features.

+
+ +

Choose a direction before implementation

+

For a new UI surface or aesthetic redesign, if the user has not chosen a visual direction, the agent presents 2–3 distinct, product-appropriate directions with concise tradeoffs and a recommendation, then waits for a choice. Scoped UI fixes, work inside an established design system, and tasks with an already selected direction continue directly.

+
Context decides the intensity

Brand, campaign, editorial, portfolio, and launch surfaces may use a memorable first viewport and one visual motif across the page. Task-oriented products keep workflow clarity ahead of spectacle.

+ +

Configure and inspect

+ 
$ mancode design status --json
+$ mancode design configure --expected-revision 0 --preset refine --icons lucide --emoji forbid-as-interface-icon --motion purposeful --browser-validation when-available
+$ mancode design context --json
+$ mancode design configure --expected-revision 1 --preset experimental --confirm-experimental
+$ mancode design disable --expected-revision 2
+ + + + + + +
ControlAccepted valuesBoundary
--presetpreserve, refine, experimentalexperimental requires explicit confirmation every time it is enabled.
--iconsexisting-first, lucideChoosing Lucide does not install a package; dependency changes still require task approval.
--emojiallow, forbid-as-interface-iconThe stricter value prevents emoji from replacing interface icons.
--motionminimal, purposefulMotion must support hierarchy, feedback, or narrative—not obscure the core workflow.
--browser-validationoff, when-available, requiredrequired creates a hard quality gate when browser verification cannot run.
+
Scope stays fixed

No design preset authorizes new features, information-architecture changes, silent dependency installation, or unrelated redesign. The policy is stored at .mancode/shared/context/design-policy.json and should be reviewed like any other repository configuration.

+
+

Invoke a mode

Mode names are portable, but invocation follows the extension model of each agent. Run them in the agent chat—not in your operating-system shell. /mansolo or $mansolo explicitly returns to the default solo mode.

@@ -168,7 +197,7 @@

Invoke a mode

CLI reference

The CLI installs adapters and enforces durable workflow state. Run state-reading commands from an initialized project. Invalid transitions fail safely instead of silently editing workflow metadata.

-

mancode init

Start

Creates .mancode/, detects the project, scans style tokens where relevant, and installs adapters.

  • Options: --force, --yes, --team, --no-team, --style <name>, --platform <list>, --empty, --lang <locale>.
+

mancode init

Start

Creates .mancode/, detects the project, scans style tokens where relevant, and installs adapters.

  • Options: --force, --yes, --team, --no-team, --platform <list>, --empty, --lang <locale>. --style <name> is legacy-only.

mancode install [platform]

Adapter

Installs one adapter through the journaled upgrade path after initialization.

  • --confirm --operation-id <operationId> and an active session authorize the previewed managed writes.
  • --minimal remains available for legacy compatibility.

mancode adapter status | upgrade

Repair

Compares managed-content digests, stages changes with --dry-run, and publishes that exact preview only with --confirm --operation-id <operationId>.

mancode project upgrade --policy 2

Policy

Previews or commits the project Policy 2 default without rewriting existing workflows. A commit requires the preview's operation ID and an active session.

@@ -176,6 +205,7 @@

CLI reference

mancode list-platforms

Discover

Lists adapters known to the installed CLI and marks those already configured in the project.

mancode workflow <subcommand>

Govern

Creates and validates Continuity requirements, plans, verification evidence, reviews, remediation, and completion.

  • Inspect with list and show <namespace:ULID> [--json].
  • Use context compact --dry-run to inspect removable runtime records; Continuity workflow authority is not deleted by workflow clean.

mancode manps [area]

Scan

Runs a deterministic health scan for all, deps, security, dead-code, config.

  • --json emits machine-readable output.
  • --remediate enters the explicit remediation path; the default is scan-only.
+

mancode design status | context | configure | disable

Design

Inspects effective UI guidance or changes the revisioned project design policy. Configuration requires --expected-revision <n>; experimental mode also requires --confirm-experimental.

mancode refresh-project

Rescan

Refreshes project facts after adding Git, a manifest, a framework, or validation commands, then reports stale adapters.

mancode refresh-style

Design

Refreshes the project profile and design tokens. Preview any adapter repair with mancode adapter upgrade --platform <platform> --dry-run.

mancode uninstall [platform]

Remove

Removes one Continuity adapter. Continuity protects authority from bulk removal; use context compact --dry-run for retention candidates. The --all form is legacy-only.

diff --git a/website/docs.zh-CN.html b/website/docs.zh-CN.html index 4594316..a8a1afb 100644 --- a/website/docs.zh-CN.html +++ b/website/docs.zh-CN.html @@ -28,7 +28,7 @@
官网 GitHub - + EN
@@ -44,7 +44,7 @@ @@ -83,7 +83,7 @@

指定平台或非交互初始化

--platform LIST已经知道目标 Agent安装 claude-code、cursor、codex、copilot、zcode 中的一个或多个。 --empty目录有意保持为空无需先执行 git init 或创建 manifest，也能初始化通用项目。 --team / --no-team不采用自动判断结果强制开启或关闭团队共享上下文。 - --style NAME已有明确的视觉偏好保存为默认样式偏好。 + --style NAME显式使用 --legacy 初始化保存旧版自由文本样式偏好。Continuity 项目改用带 revision 的 mancode design 策略。 --lang en|zh-CN需要稳定的生成语言指定生成内容的语言。 @@ -131,6 +131,35 @@

选择最小够用的模式

判断原则

不要因为任务很长就默认使用 /man。当错误选择代价高、难以回滚，或事后很难审查时，再升级到它。

+
+

设置设计策略

+

设计策略是面向 UI 任务的显式启用 Continuity 能力。mancode init 不会自动创建它；策略缺失、禁用或损坏时，设计上下文会安全降级为 preserve，不会阻塞普通编码或工作流恢复。

+
+
改动最小

preserve

保留现有层级、布局、组件系统和交互模式，只完成任务真正要求的 UI 改动。

+
推荐默认

refine

改善层级、排版、间距、状态和响应式行为，但不改变产品结构。

+
显式确认

experimental

传入 --confirm-experimental 后允许一个更强、符合产品语境的构图与有目的动效，但不能扩大范围或虚构产品功能。

+
+ +

实现前先选视觉方向

+

新建 UI 或视觉重做时，如果用户尚未选定方向，Agent 会先给出 2–3 个差异明确、符合产品语境的方向，简述取舍并推荐一个，再等待用户选择。局部 UI 修复、既有设计系统内的改动，以及用户已经选定方向的任务不会被这一步打断。

+
产品语境决定强度

品牌、活动、编辑、作品集和发布型页面可以强化首屏记忆点，并让一个视觉母题贯穿全页；任务型产品仍然把工作流清晰度放在视觉奇观之前。

+ +

配置与检查

+ 
$ mancode design status --json
+$ mancode design configure --expected-revision 0 --preset refine --icons lucide --emoji forbid-as-interface-icon --motion purposeful --browser-validation when-available
+$ mancode design context --json
+$ mancode design configure --expected-revision 1 --preset experimental --confirm-experimental
+$ mancode design disable --expected-revision 2
+ + + + + + +
控制项可选值边界
--presetpreserve、refine、experimental每次启用 experimental 都需要显式确认。
--iconsexisting-first、lucide选择 Lucide 不会自动安装依赖；依赖变更仍需任务明确授权。
--emojiallow、forbid-as-interface-icon严格模式禁止用表情符号代替界面图标。
--motionminimal、purposeful动效必须服务于层级、反馈或叙事，不能遮蔽核心工作流。
--browser-validationoff、when-available、requiredrequired 会在无法执行浏览器验证时形成硬质量门槛。
+
任务范围保持不变

任何设计 preset 都不授权新增功能、改变信息架构、静默安装依赖或重做无关界面。策略保存在 .mancode/shared/context/design-policy.json，应像其他仓库配置一样审查。

+
+

调用模式

模式名称是通用的，但调用方式取决于平台的扩展机制。下面这些内容应输入 Agent 对话框，而不是操作系统终端。/mansolo 或 $mansolo 会显式回到默认 solo 模式。

@@ -168,7 +197,7 @@

调用模式

CLI 参考

CLI 负责安装适配器和强制执行持久化工作流状态。读取状态的命令应在已初始化项目中运行；非法状态转换会安全失败，不会静默篡改元数据。

-

mancode init

初始化

创建 .mancode/，识别项目，在适用时扫描样式 token，并安装平台适配器。

  • 选项：--force、--yes、--team、--no-team、--style <name>、--platform <list>、--empty、--lang <locale>。
+

mancode init

初始化

创建 .mancode/，识别项目，在适用时扫描样式 token，并安装平台适配器。

  • 选项：--force、--yes、--team、--no-team、--platform <list>、--empty、--lang <locale>。--style <name> 仅适用于 legacy。

mancode install [platform]

适配器

初始化后通过 journaled upgrade 路径安装一个平台。

  • --confirm --operation-id <operationId> 和 active session 授权发布预览中的 managed 写入。
  • --minimal 保留用于 legacy 兼容。

mancode adapter status | upgrade

修复

比较 managed-content digest，用 --dry-run 生成 staging，并且只用 --confirm --operation-id <operationId> 发布该次预览。

mancode project upgrade --policy 2

策略

预览或提交项目的 Policy 2 默认值，不重写已有 workflow；提交需要预览返回的 operation ID 和 active session。

@@ -176,6 +205,7 @@

CLI 参考

mancode list-platforms

发现

列出当前 CLI 支持的平台，并标出项目中已经配置的平台。

mancode workflow <subcommand>

治理

创建和校验 Continuity 需求、计划、验证证据、评审、修复与完成状态。

  • 使用 list 和 show <namespace:ULID> [--json] 检查。
  • 使用 context compact --dry-run 检查可回收的运行时记录；Continuity workflow authority 不会被 workflow clean 删除。

mancode manps [area]

扫描

对 all、deps、security、dead-code 或 config 执行确定性健康扫描。

  • --json 输出机器可读结果。
  • --remediate 显式进入修复路径；默认只扫描。
+

mancode design status | context | configure | disable

设计

检查有效 UI 指导，或修改带 revision 的项目设计策略。配置必须传入 --expected-revision <n>；experimental 还需要 --confirm-experimental。

mancode refresh-project

重扫项目

在加入 Git、manifest、框架或验证命令后刷新项目事实，并报告 stale adapter。

mancode refresh-style

设计上下文

刷新项目画像和设计 token；adapter 修复先用 mancode adapter upgrade --platform <platform> --dry-run 预览。

mancode uninstall [platform]

移除

移除一个 Continuity 适配器。Continuity 会保护权威数据不被批量删除；用 context compact --dry-run 检查保留候选。--all 只适用于 legacy 项目。

diff --git a/website/index.html b/website/index.html index 560d3b3..5c8a6b5 100644 --- a/website/index.html +++ b/website/index.html @@ -5,7 +5,7 @@ @@ -37,6 +37,7 @@
中 Get mancode ↘ @@ -314,9 +315,71 @@

Read the room
before writing.

+
+
+ 05 / Design policy + Direction before decoration. +
+
+
+

New in 0.5.0

+

Choose the look.
Then make it real.

+
+
+

+ A new UI or visual redesign no longer starts from one silent default. When the direction + is open, mancode asks the agent for 2–3 product-appropriate routes, the tradeoffs, and a + recommendation. You choose. Then it builds one coherent system. +

+ Configure the policy +
+
+ +
+
+
UI brief / unselectedDecision required
+
+ Before implementation + Present
2–3 routes. +

Distinct visual logic. Clear tradeoffs. One recommendation. No code until the direction is yours.

+
+
    +
  1. 01Editorial precisionQuiet / typographic
    2. +
  2. 02Technical theatreBold / kinetic
    3. +
  3. 03Product clarityDense / functional
    4. +
+
+ +
+
+
Preset / 01Safest
+

preserve

+

Keep the hierarchy, components, layout, and interaction patterns. Change only what the task requires.

+
+
+
Preset / 02Recommended
+

refine

+

Improve type, spacing, hierarchy, states, and responsive behavior without changing the product structure.

+
+
+
Preset / 03Explicit opt-in
+

experimental

+

Allow one stronger composition and purposeful motion—after confirmation, inside the existing product scope.

+
+
+
+ +
+ 01 Existing system first + 02 No product-scope expansion + 03 No surprise dependencies + 04 Browser validation when available +
+
+
- 05 / Adapters + 06 / Adapters Keep your agent. Add the discipline.
@@ -351,7 +414,7 @@

One playbook.
Your tools.

- 06 / Cross-session continuity + 07 / Cross-session continuity Change windows without losing the task.
@@ -384,7 +447,7 @@

One task.
Another session.

- 07 / Quick start + 08 / Quick start One install. One init. Keep coding.
diff --git a/website/index.zh-CN.html b/website/index.zh-CN.html index 0b3f211..cc9240e 100644 --- a/website/index.zh-CN.html +++ b/website/index.zh-CN.html @@ -3,7 +3,7 @@ - + @@ -20,8 +20,8 @@
mancode - -
EN开始使用 ↘
+ +
EN开始使用 ↘
@@ -67,10 +67,43 @@

先读懂现场，
再开始写。

-
05 / 适配器保留你的 Agent，加入纪律。

一套战术。
你的工具。

mancode 是工作流层，不是新的编码 Agent。Claude Code 获得最完整的原生集成；其他工具获得持久 rules、skills 或 instruction 文件。

平台适配方式级别
Claude CodeHooks · skills · subagents完整集成
Cursor项目 rules · commands适配器
CodexAGENTS.md · 项目 skills适配器
GitHub Copilot仓库 instructions · prompts适配器
ZCodeAGENTS.md · 项目 skills预览适配器
+
+
05 / 设计策略先选方向，再谈装饰。
+
+

0.5.0 新能力

方向你来选。
效果交给它。

+
+

新建 UI 或视觉重做，不再由 Agent 默默套用唯一默认风格。方向尚未确定时，mancode 会先给出 2–3 个符合产品语境的方案、简明取舍和一个推荐；你选定后，它再把一个视觉系统做完整。

+ 配置设计策略 +
+
+ +
+
+
UI 需求 / 尚未选定等待决策
+
开始实现之前先给出
2–3 个方向。

视觉逻辑要有差异，取舍要说清楚，并给出一个推荐。在方向属于你之前，不急着写代码。

+
    +
  1. 01编辑式精度克制 / 排版驱动
    2. +
  2. 02技术剧场强烈 / 动态叙事
    3. +
  3. 03产品清晰度紧凑 / 功能优先
    4. +
+
+ +
+
策略 / 01最稳妥

preserve

保留现有层级、组件、布局和交互模式，只完成任务真正要求的 UI 改动。

+
策略 / 02推荐

refine

改善排版、间距、层级、状态和响应式行为，但不改变产品结构。

+
策略 / 03显式开启

experimental

确认后允许更强的构图与有目的的动效，仍然不能突破既有产品范围。

+
+
+ +
+ 01 现有设计系统优先02 不扩大产品范围03 不偷加依赖04 条件允许时浏览器验证 +
+
+ +
06 / 适配器保留你的 Agent，加入纪律。

一套战术。
你的工具。

mancode 是工作流层，不是新的编码 Agent。Claude Code 获得最完整的原生集成；其他工具获得持久 rules、skills 或 instruction 文件。

平台适配方式级别
Claude CodeHooks · skills · subagents完整集成
Cursor项目 rules · commands适配器
CodexAGENTS.md · 项目 skills适配器
GitHub Copilot仓库 instructions · prompts适配器
ZCodeAGENTS.md · 项目 skills预览适配器
-
06 / 跨会话续接换窗口，不丢任务脉络。
+
07 / 跨会话续接换窗口，不丢任务脉络。

一项任务。
下个会话继续。

mancode 把目标、需求、计划、检查结果和交接信息保存在稳定 TaskRef 下。新聊天窗口或 CLI session 可以恢复这项任务，只加载当前目的需要的 Context Pack，不依赖旧窗口一直打开。

@@ -84,7 +117,7 @@

一项任务。
下个会话继续。

-
07 / 快速开始安装一次，初始化一次，继续编码。

准备上场

把 mancode
放进轮换。

不需要账户、Dashboard、API Key 或新编辑器。原生支持 Windows CMD、PowerShell、Git Bash、macOS 与 Linux。

阅读完整文档 ↗
01 / 安装npm install -g mancode
02 / 进入项目cd your-project
03 / 初始化mancode init
solo 模式已就绪00:03
+
08 / 快速开始安装一次，初始化一次，继续编码。

准备上场

把 mancode
放进轮换。

不需要账户、Dashboard、API Key 或新编辑器。原生支持 Windows CMD、PowerShell、Git Bash、macOS 与 Linux。

阅读完整文档 ↗
01 / 安装npm install -g mancode
02 / 进入项目cd your-project
03 / 初始化mancode init
solo 模式已就绪00:03

简单任务少一点仪式。
关键任务多一点纪律。

别再替 AI
收拾臃肿。

> npm install -g mancode
GitHub 上查看 ↗
diff --git a/website/site.js b/website/site.js index 5df69cd..1b6bc84 100644 --- a/website/site.js +++ b/website/site.js @@ -16,7 +16,6 @@ function updateThemeToggle(theme) { : "Switch to light theme"; themeToggle.setAttribute("aria-label", label); themeToggle.title = label; - themeToggle.querySelector("span").textContent = isLight ? "◑" : "◐"; } updateThemeToggle(document.documentElement.dataset.theme || "dark"); diff --git a/website/styles.css b/website/styles.css index 49be51d..a3fd5d2 100644 --- a/website/styles.css +++ b/website/styles.css @@ -614,6 +614,7 @@ h1 .orange { .modes-section, .workflow-section, .awareness-section, +.design-section, .platforms-section, .install-section { padding: 0 var(--gutter) clamp(92px, 11vw, 160px); @@ -665,6 +666,7 @@ h1 .orange { .section-title-row h2, .workflow-lead h2, .awareness-copy h2, +.design-lead h2, .install-copy h2, .final-cta h2 { margin-bottom: 0; @@ -1258,6 +1260,273 @@ h1 .orange { color: var(--lime); } +.design-section { + position: relative; + overflow: hidden; + background: + radial-gradient(circle at 1px 1px, rgba(8, 9, 10, 0.22) 1px, transparent 0) 0 0 / 28px 28px, + var(--orange); + color: #08090a; +} + +.design-section::before { + position: absolute; + top: 8%; + right: -9%; + width: clamp(260px, 38vw, 560px); + aspect-ratio: 1; + border: 1px solid rgba(8, 9, 10, 0.24); + border-radius: 50%; + content: ""; + box-shadow: + 0 0 0 42px rgba(8, 9, 10, 0.035), + 0 0 0 84px rgba(8, 9, 10, 0.025); + pointer-events: none; +} + +.design-section > * { + position: relative; + z-index: 1; +} + +.design-section .section-kicker { + border-color: rgba(8, 9, 10, 0.72); +} + +.design-lead { + display: grid; + grid-template-columns: 1.3fr 0.7fr; + align-items: end; + gap: clamp(48px, 8vw, 112px); + padding: clamp(70px, 8vw, 118px) 0 clamp(58px, 7vw, 96px); +} + +.design-lead .eyebrow { + color: #08090a; +} + +.design-lead h2 { + margin: 18px 0 0; + max-width: 920px; + font-size: clamp(64px, 8.4vw, 124px); +} + +.design-thesis p { + margin: 0; + font-size: 12px; + line-height: 1.85; +} + +.design-thesis a { + display: inline-flex; + align-items: center; + justify-content: space-between; + gap: 28px; + width: 100%; + margin-top: 30px; + padding: 17px 0; + border-top: 1px solid #08090a; + border-bottom: 1px solid #08090a; + font-size: 9px; + font-weight: 800; + letter-spacing: 0.12em; + text-transform: uppercase; + transition: padding 180ms ease; +} + +.design-thesis a:hover { + padding-inline: 12px; +} + +.design-thesis a span { + font-size: 20px; +} + +.design-board { + display: grid; + grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr); + border: 1px solid #08090a; + box-shadow: 18px 18px 0 rgba(8, 9, 10, 0.15); +} + +.direction-board { + min-width: 0; + background: #08090a; + color: #f4f1e9; +} + +.direction-board header, +.preset-stack article > div { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + min-height: 48px; + padding: 0 20px; + border-bottom: 1px solid rgba(244, 241, 233, 0.18); + font-size: 8px; + letter-spacing: 0.11em; + text-transform: uppercase; +} + +.direction-board header b { + color: var(--lime); + font-size: inherit; +} + +.direction-prompt { + padding: clamp(36px, 5vw, 72px); + background: + linear-gradient(rgba(69, 216, 238, 0.055) 1px, transparent 1px), + linear-gradient(90deg, rgba(69, 216, 238, 0.055) 1px, transparent 1px); + background-size: 42px 42px; +} + +.direction-prompt small { + color: var(--cyan); + font-size: 8px; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.direction-prompt strong { + display: block; + margin-top: 22px; + font-family: var(--display); + font-size: clamp(58px, 7vw, 96px); + font-weight: 900; + line-height: 0.82; + letter-spacing: -0.035em; + text-transform: uppercase; +} + +.direction-prompt p { + max-width: 520px; + margin: 30px 0 0; + color: #92989d; + font-size: 10px; + line-height: 1.75; +} + +.direction-board ol { + margin: 0; + padding: 0; + border-top: 1px solid rgba(244, 241, 233, 0.18); + list-style: none; +} + +.direction-board li { + display: grid; + grid-template-columns: 42px 1fr auto; + align-items: center; + min-height: 67px; + padding: 0 20px; + border-bottom: 1px solid rgba(244, 241, 233, 0.14); + color: #92989d; + font-size: 10px; +} + +.direction-board li:last-child { + border-bottom: 0; +} + +.direction-board li b, +.direction-board li em { + font-size: 8px; + font-style: normal; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.direction-board li.selected { + background: var(--cyan); + color: #08090a; + box-shadow: inset 5px 0 0 var(--lime); +} + +.preset-stack { + display: grid; + grid-template-rows: repeat(3, 1fr); + border-left: 1px solid #08090a; +} + +.preset-stack article { + min-height: 230px; + padding: 0 clamp(24px, 3.5vw, 46px) clamp(30px, 4vw, 48px); + border-bottom: 1px solid #08090a; + background: #f4f1e9; +} + +.preset-stack article:last-child { + border-bottom: 0; +} + +.preset-stack article > div { + margin: 0 clamp(-46px, -3.5vw, -24px) clamp(26px, 3vw, 40px); + padding-inline: clamp(24px, 3.5vw, 46px); + border-color: rgba(8, 9, 10, 0.2); +} + +.preset-stack article > div span { + color: #656a6e; +} + +.preset-stack h3 { + margin: 0; + font-family: var(--display); + font-size: clamp(44px, 5vw, 74px); + line-height: 0.9; + letter-spacing: -0.025em; + text-transform: uppercase; +} + +.preset-stack p { + max-width: 520px; + margin: 22px 0 0; + color: #5a6064; + font-size: 10px; + line-height: 1.75; +} + +.preset-stack .preset-featured { + background: #111417; + color: #f4f1e9; +} + +.preset-stack .preset-featured > div { + border-color: rgba(244, 241, 233, 0.18); +} + +.preset-stack .preset-featured > div span, +.preset-stack .preset-featured p { + color: #c8ff4a; +} + +.design-guardrails { + display: grid; + grid-template-columns: repeat(4, 1fr); + margin-top: 52px; + border-top: 1px solid #08090a; + border-left: 1px solid #08090a; +} + +.design-guardrails span { + display: flex; + flex-direction: column; + gap: 22px; + min-height: 128px; + padding: 20px; + border-right: 1px solid #08090a; + border-bottom: 1px solid #08090a; + font-size: 9px; + line-height: 1.5; + text-transform: uppercase; +} + +.design-guardrails b { + font-size: 20px; +} + .platform-title { grid-template-columns: 1.1fr 0.9fr; } @@ -1618,6 +1887,7 @@ h1 .orange { .section-title-row, .workflow-lead, .awareness-grid, + .design-lead, .install-grid { gap: 48px; } @@ -1645,6 +1915,27 @@ h1 .orange { min-height: 190px; } + .design-board { + grid-template-columns: 1fr; + } + + .preset-stack { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: none; + border-top: 1px solid #08090a; + border-left: 0; + } + + .preset-stack article { + min-height: 275px; + border-right: 1px solid #08090a; + border-bottom: 0; + } + + .preset-stack article:last-child { + border-right: 0; + } + .site-footer { grid-template-columns: 1fr 1fr; } @@ -1743,6 +2034,7 @@ h1 .orange { .section-title-row, .workflow-lead, .awareness-grid, + .design-lead, .install-grid { grid-template-columns: 1fr; } @@ -1755,10 +2047,45 @@ h1 .orange { .section-title-row h2, .workflow-lead h2, .awareness-copy h2, + .design-lead h2, .install-copy h2 { font-size: clamp(58px, 18vw, 82px); } + .design-lead { + gap: 38px; + } + + .design-board { + box-shadow: 10px 10px 0 rgba(8, 9, 10, 0.15); + } + + .direction-prompt { + padding: 38px 26px; + } + + .direction-board li { + grid-template-columns: 34px 1fr; + } + + .direction-board li em { + display: none; + } + + .preset-stack { + grid-template-columns: 1fr; + } + + .preset-stack article { + min-height: 0; + border-right: 0; + border-bottom: 1px solid #08090a; + } + + .design-guardrails { + grid-template-columns: 1fr 1fr; + } + .versus-grid { grid-template-columns: 1fr; gap: 0; @@ -2038,7 +2365,31 @@ h1 .orange { .theme-toggle span { color: var(--cyan); - font-size: 13px; +} + +.theme-toggle-icon { + display: inline-grid; + width: 15px; + height: 15px; + place-items: center; +} + +.theme-toggle-icon svg { + display: none; + width: 15px; + height: 15px; +} + +.theme-icon-sun { + display: block !important; +} + +html[data-theme="light"] .theme-icon-sun { + display: none !important; +} + +html[data-theme="light"] .theme-icon-moon { + display: block !important; } .language-link {