diff --git a/site/src/components/ChangelogPage.astro b/site/src/components/ChangelogPage.astro index 6038e79b36..9406658d60 100644 --- a/site/src/components/ChangelogPage.astro +++ b/site/src/components/ChangelogPage.astro @@ -3,23 +3,22 @@ import Base from '../layouts/Base.astro'; import SiteHeader from './SiteHeader.astro'; import type { ReleaseItem, ReleaseRecord } from '../data/releases'; import { releasePath } from '../data/releases'; +import { isThematicTitle } from '../scripts/release-title.js'; import '../styles/changelog.css'; -const { release, releases } = Astro.props as { release: ReleaseRecord; releases: ReleaseRecord[] }; +const { release, releases, canonical } = Astro.props as { + release: ReleaseRecord; + releases: ReleaseRecord[]; + canonical?: string; +}; const base = import.meta.env.BASE_URL.replace(/\/$/, ''); const repo = 'https://github.com/esengine/DeepSeek-Reasonix'; const prHref = (ref: number) => `${repo}/pull/${ref}`; -const sectionItems = [ - ...(release.guides.length ? [{ id: 'guides', en: 'Guides', zh: '使用攻略' }] : []), - { id: 'highlights', en: 'Highlights', zh: '重点内容' }, - ...(release.changes.new.length ? [{ id: 'new', en: 'New', zh: '新功能' }] : []), - ...(release.changes.improved.length ? [{ id: 'improved', en: 'Improved', zh: '改进' }] : []), - ...(release.changes.fixed.length ? [{ id: 'fixed', en: 'Fixed', zh: '修复' }] : []), - { id: 'upgrade', en: 'Upgrade notes', zh: '升级提醒' }, - { id: 'risks', en: 'Risk notes', zh: '风险提示' }, - ...(release.contributors.length ? [{ id: 'thanks', en: 'Thanks', zh: '致谢' }] : []), - { id: 'download', en: 'Download', zh: '下载与安装' }, -]; + +/* A title that is exactly the version string ("Reasonix 1.17.14") means a + patch release — it gets the compact hero; anything else (including + "Reasonix 1.18.0 — Better agents") keeps the full hero. */ +const isThematic = isThematicTitle(release.title.en, release.version); const kindLabel = (kind: string) => ({ new: { en: 'New', zh: '新增' }, @@ -38,12 +37,38 @@ const surfaceLabel = (surface: string) => ({ plugin: { en: 'Plugins', zh: '插件' }, }[surface] ?? { en: surface, zh: surface }); +/* Sections render only when they have content; numbering is sequential. */ +const sectionDefs = [ + ...(release.guides.length ? [{ id: 'guides', en: 'Guides', zh: '使用攻略' }] : []), + { id: 'highlights', en: 'Highlights', zh: '重点内容' }, + ...(['new', 'improved', 'fixed'] as const) + .filter((kind) => release.changes[kind].length) + .map((kind) => ({ id: kind, ...kindLabel(kind) })), + ...(release.upgrade.length ? [{ id: 'upgrade', en: 'Upgrade notes', zh: '升级提醒' }] : []), + ...(release.risks.length ? [{ id: 'risks', en: 'Risk notes', zh: '风险提示' }] : []), + ...(release.contributors.length ? [{ id: 'thanks', en: 'Thanks', zh: '致谢' }] : []), +]; +const sectionNum = new Map(sectionDefs.map((s, i) => [s.id, String(i + 1).padStart(2, '0')])); +const tocItems = [...sectionDefs, { id: 'download', en: 'Download', zh: '下载与安装' }]; + +/* Version rail: group by minor, show the latest few patches per group, + older ones behind a native
expander. */ +const minorKey = (v: string) => v.split('.').slice(0, 2).join('.'); +const railGroups: { key: string; items: ReleaseRecord[] }[] = []; +for (const item of releases) { + const key = minorKey(item.version); + const last = railGroups[railGroups.length - 1]; + if (last && last.key === key) last.items.push(item); + else railGroups.push({ key, items: [item] }); +} +const RAIL_VISIBLE = 3; + const titleEn = `Reasonix v${release.version} release notes`; const titleZh = `Reasonix v${release.version} 更新日志`; const description = release.summary.en; --- - +
@@ -58,23 +83,46 @@ const description = release.summary.en;
-
+
{release.channel}
-

Reasonix / v{release.version}

+ {isThematic &&

Reasonix / v{release.version}

}

{release.title.en}{release.title.zh}

{release.surfaces.map((surface) => { @@ -82,16 +130,22 @@ const description = release.summary.en; return {label.en}{label.zh}; })}
-
{release.summary.en}{release.summary.zh}
-
- Download v{release.version}下载 v{release.version} - View on GitHub ↗在 GitHub 查看 ↗ -
+ {isThematic ? ( +
{release.summary.en}{release.summary.zh}
+ ) : ( +

{release.summary.en}{release.summary.zh}

+ )} + {isThematic && ( +
+ Download v{release.version}下载 v{release.version} + View on GitHub ↗在 GitHub 查看 ↗ +
+ )}
{release.guides.length > 0 && (
-
01

Start here使用攻略

+
{sectionNum.get('guides')}

Start here使用攻略

{release.guides.map((guide) => ( @@ -105,7 +159,7 @@ const description = release.summary.en; )}
-
02

Highlights重点内容

+
{sectionNum.get('highlights')}

Highlights重点内容

{release.highlights.map((item, index) => { const kind = kindLabel(item.kind); @@ -124,13 +178,13 @@ const description = release.summary.en;
- {(['new', 'improved', 'fixed'] as const).map((kind, index) => { + {(['new', 'improved', 'fixed'] as const).map((kind) => { const items = release.changes[kind]; if (!items.length) return null; const label = kindLabel(kind); return (
-
{String(index + 3).padStart(2, '0')}

{label.en}{label.zh}

+
{sectionNum.get(kind)}

{label.en}{label.zh}

{items.map((item: ReleaseItem) => (
@@ -144,38 +198,42 @@ const description = release.summary.en; ); })} -
-
U

Upgrade notes升级提醒

-
- {release.upgrade.length ? release.upgrade.map((item) => ( -
-
{item.level === 'warning' ? '!' : 'i'}
-
- )) :

No manual migration is required.本版本无需手动迁移。

} -
-
- -
-
R

Risk notes风险提示

-
- {release.risks.length ? release.risks.map((item) => ( -
-

{item.title.en}{item.title.zh}

-

{item.body.en}{item.body.zh}

- {item.refs?.length &&
{item.refs.map((ref) => #{ref})}
} -
- )) :

There are no known risks requiring extra action.当前没有需要额外操作的已知风险。

} -
-
+
+ ))} +
+
+ )} {release.contributors.length > 0 && (
-
♥

Thanks致谢

+
{sectionNum.get('thanks')}

Thanks致谢

This release was shaped by:感谢本版本的贡献者：

{release.contributors.map((name) => @{name})}
@@ -195,7 +253,7 @@ const description = release.summary.en;
diff --git a/site/src/components/SiteHeader.astro b/site/src/components/SiteHeader.astro index 9b74d80ce8..5be86daaf1 100644 --- a/site/src/components/SiteHeader.astro +++ b/site/src/components/SiteHeader.astro @@ -51,6 +51,11 @@ const items: Array<{ +
+ + + +
{accountSlot ? ( ) : ( diff --git a/site/src/layouts/Base.astro b/site/src/layouts/Base.astro index 9a89429da8..aea5b2480d 100644 --- a/site/src/layouts/Base.astro +++ b/site/src/layouts/Base.astro @@ -1,8 +1,8 @@ --- import '../styles/global.css'; const base = import.meta.env.BASE_URL.replace(/\/$/, ''); -const { title, description, titleEn, titleZh } = Astro.props; -const canonical = new URL(Astro.url.pathname, Astro.site).href; +const { title, description, titleEn, titleZh, canonical: canonicalOverride } = Astro.props; +const canonical = canonicalOverride ?? new URL(Astro.url.pathname, Astro.site).href; const ogImage = new URL(`${base}/og.png`, Astro.site).href; --- @@ -16,6 +16,9 @@ const ogImage = new URL(`${base}/og.png`, Astro.site).href; + @@ -34,7 +37,6 @@ const ogImage = new URL(`${base}/og.png`, Astro.site).href; -
@@ -21,7 +24,7 @@ const canonical = new URL(Astro.url.pathname, Astro.site).href;
- RReasonixCommunity社区 + ReasonixCommunity社区
+
+ + + +
diff --git a/site/src/pages/404.astro b/site/src/pages/404.astro index fc21761ea9..33e90d9cc6 100644 --- a/site/src/pages/404.astro +++ b/site/src/pages/404.astro @@ -18,6 +18,7 @@ const base = import.meta.env.BASE_URL.replace(/\/$/, '');
404

This page went cold.这一页冷掉了。

The page you're looking for doesn't exist — but the session is still warm.你找的页面不存在——但会话还热着。

+
Back to home回到首页 Read the docs查看文档 diff --git a/site/src/pages/changelog/index.astro b/site/src/pages/changelog/index.astro index fceec7398e..1ec050a3cf 100644 --- a/site/src/pages/changelog/index.astro +++ b/site/src/pages/changelog/index.astro @@ -1,6 +1,10 @@ --- import ChangelogPage from '../../components/ChangelogPage.astro'; -import { latestRelease, releases } from '../../data/releases'; +import { latestRelease, releases, releasePath } from '../../data/releases'; + +/* /changelog/ renders the latest release but canonicalizes to its version URL + to avoid duplicate content with /changelog/vX.Y.Z/. */ +const canonical = new URL(releasePath(latestRelease.version), Astro.site).href; --- - + diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro index 7d3511f24e..9b8032ee8c 100644 --- a/site/src/pages/index.astro +++ b/site/src/pages/index.astro @@ -57,8 +57,8 @@ const ld = {
DeepSeek-native · built for your terminal · MITDeepSeek 原生 · 为终端而生 · MIT

- A DeepSeek-native agent
for your terminal. - DeepSeek 原生的
终端编码 Agent。 + A DeepSeek-native agent
for your terminal. + DeepSeek 原生的
终端编码 Agent。

The loop is append-only, aligned to DeepSeek's byte-stable prefix cache — so long sessions hold 90%+ cache hit and input-token cost collapses to ~1/5. Use the same engine from the CLI/TUI, desktop app, or local browser UI. @@ -249,34 +249,12 @@ const ld = {

- + + -
-
- $npm i -g reasonix -
-
- npm i -g reasonixv{goVer} - Stable 1.x · one binary · no Node · actively developed稳定 1.x · 单二进制 · 无需 Node · 主力开发中 - recommended推荐 -
-
- npm i -g reasonix@0.53.2v0.53.2 - deprecated 0.x line · no longer maintained已废弃的 0.x 线 · 不再维护 - deprecated已废弃 -
-
-
macOS / Linux / Windows / WSL · npm latest tracks the current 1.x stable · v{goVer} release notes →macOS / Linux / Windows / WSL · npm latest 指向当前 1.x 稳定版 · v{goVer} 更新说明 →
-
- -
- $brew install esengine/reasonix/reasonix -
v{goVer} (Go rewrite) · macOS & Linux · update with brew upgradev{goVer}(Go 重写)· macOS 与 Linux · 通过 brew upgrade 更新
-
- -
+

macOS

@@ -315,6 +293,28 @@ const ld = { When to use this →查看适用场景 →
+ +
+ $npm i -g reasonix +
+
+ npm i -g reasonixv{goVer} + Stable 1.x · one binary · no Node · actively developed稳定 1.x · 单二进制 · 无需 Node · 主力开发中 + recommended推荐 +
+
+ npm i -g reasonix@0.53.2v0.53.2 + deprecated 0.x line · no longer maintained已废弃的 0.x 线 · 不再维护 + deprecated已废弃 +
+
+
macOS / Linux / Windows / WSL · npm latest tracks the current 1.x stable · v{goVer} release notes →macOS / Linux / Windows / WSL · npm latest 指向当前 1.x 稳定版 · v{goVer} 更新说明 →
+
+ +
+ $brew install esengine/reasonix/reasonix +
v{goVer} (Go rewrite) · macOS & Linux · update with brew upgradev{goVer}(Go 重写)· macOS 与 Linux · 通过 brew upgrade 更新
+
diff --git a/site/src/pages/skills.astro b/site/src/pages/skills.astro index a4d5753954..a22dd9b48d 100644 --- a/site/src/pages/skills.astro +++ b/site/src/pages/skills.astro @@ -154,7 +154,7 @@ const desc = "Browse, publish, and install community skills and MCP servers for background: var(--bg-soft); border-radius: 999px; padding: 0 18px; border: 1px solid transparent; transition: border-color .2s, background .2s; } - .reg-search:focus-within { background: #fff; border-color: var(--line); box-shadow: var(--shadow-1); } + .reg-search:focus-within { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-1); } .reg-search svg { width: 18px; height: 18px; fill: var(--ink-3); flex: none; } .reg-search input { border: none; background: none; outline: none; width: 100%; @@ -167,7 +167,7 @@ const desc = "Browse, publish, and install community skills and MCP servers for transition: background .2s, color .2s, box-shadow .2s; } .reg-tabs button:hover { color: var(--ink); } - .reg-tabs button.active { background: #fff; color: var(--accent); box-shadow: var(--shadow-1); } + .reg-tabs button.active { background: var(--card); color: var(--accent); box-shadow: var(--shadow-1); } .reg-body { padding: 36px 0 96px; } .reg-cols { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; } @@ -183,9 +183,9 @@ const desc = "Browse, publish, and install community skills and MCP servers for .pkg-card:hover { box-shadow: var(--shadow-2); border-color: transparent; transform: translateY(-2px); } .pkg-top { display: flex; align-items: center; gap: 8px; } .pkg-kind { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); padding: 4px 9px; border-radius: 999px; } - .pkg-kind.mcp { color: oklch(0.5 0.16 300); background: color-mix(in oklch, oklch(0.5 0.16 300) 9%, white); } + .pkg-kind.mcp { color: oklch(0.5 0.16 300); background: color-mix(in oklch, oklch(0.5 0.16 300) 9%, var(--card)); } .pkg-badge { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; } - .pkg-badge.verified { color: oklch(0.5 0.13 155); background: color-mix(in oklch, oklch(0.5 0.13 155) 10%, white); } + .pkg-badge.verified { color: oklch(0.5 0.13 155); background: color-mix(in oklch, oklch(0.5 0.13 155) 10%, var(--card)); } .pkg-badge.community { color: var(--ink-3); background: var(--bg-soft); } .pkg-stars { margin-left: auto; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .pkg-name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; } @@ -202,13 +202,13 @@ const desc = "Browse, publish, and install community skills and MCP servers for .pkg-install code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pkg-install button { margin-left: auto; flex: none; font-family: var(--font-sans); font-size: 12px; font-weight: 600; - background: #fff; color: var(--accent); border: none; cursor: pointer; padding: 6px 13px; + background: var(--card); color: var(--accent); border: none; cursor: pointer; padding: 6px 13px; border-radius: 999px; box-shadow: var(--shadow-1); transition: background .2s, color .2s; } .pkg-install button.copied { background: oklch(0.55 0.14 155); color: #fff; } .pkg-meta { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } - .pkg-skel, .feed-skel { display: none; border-radius: var(--radius); background: linear-gradient(100deg, var(--bg-soft) 30%, oklch(0.94 0.004 247) 50%, var(--bg-soft) 70%); background-size: 200% 100%; animation: sheen 1.2s linear infinite; } + .pkg-skel, .feed-skel { display: none; border-radius: var(--radius); background: linear-gradient(100deg, var(--bg-soft) 30%, var(--line) 50%, var(--bg-soft) 70%); background-size: 200% 100%; animation: sheen 1.2s linear infinite; } .pkg-skel { height: 168px; } .feed-skel { height: 44px; border-radius: 12px; margin-bottom: 10px; } @keyframes sheen { to { background-position: -200% 0; } } @@ -238,13 +238,13 @@ const desc = "Browse, publish, and install community skills and MCP servers for .acct-name { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; } .acct-name:hover { color: var(--accent); } .acct-logout { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--bg-soft); border: none; cursor: pointer; padding: 8px 14px; border-radius: 999px; transition: background .2s, color .2s; } - .acct-logout:hover { color: var(--ink); background: oklch(0.94 0.004 247); } - .acct-warn { font-size: 11px; font-weight: 600; color: oklch(0.52 0.15 60); background: color-mix(in oklch, oklch(0.7 0.16 60) 16%, white); padding: 3px 9px; border-radius: 999px; text-decoration: none; } + .acct-logout:hover { color: var(--ink); background: var(--line); } + .acct-warn { font-size: 11px; font-weight: 600; color: oklch(0.52 0.15 60); background: color-mix(in oklch, oklch(0.7 0.16 60) 16%, var(--card)); padding: 3px 9px; border-radius: 999px; text-decoration: none; } .reg-review { padding: 8px 0 40px; } .review-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; } .review-count { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .review-list { display: flex; flex-direction: column; gap: 12px; } - .review-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: color-mix(in oklch, oklch(0.7 0.16 60) 6%, white); border: 1px solid color-mix(in oklch, oklch(0.7 0.16 60) 30%, white); border-radius: var(--radius-sm); padding: 14px 16px; } + .review-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: color-mix(in oklch, oklch(0.7 0.16 60) 6%, var(--card)); border: 1px solid color-mix(in oklch, oklch(0.7 0.16 60) 30%, var(--card)); border-radius: var(--radius-sm); padding: 14px 16px; } .review-row .rv-main { flex: 1; min-width: 0; } .review-row .rv-name { font-size: 15px; font-weight: 600; } .review-row .rv-name .scope { color: var(--ink-3); font-weight: 500; } @@ -254,7 +254,7 @@ const desc = "Browse, publish, and install community skills and MCP servers for .rv-btn { font-family: var(--font-sans); font-size: 13px; font-weight: 600; border: none; cursor: pointer; padding: 8px 14px; border-radius: 999px; transition: background .2s, color .2s, box-shadow .2s; } .rv-btn.approve { background: oklch(0.55 0.13 155); color: #fff; } .rv-btn.reject { background: var(--bg-soft); color: oklch(0.5 0.18 25); } - .rv-btn.verify { background: #fff; color: var(--accent); box-shadow: var(--shadow-1); } + .rv-btn.verify { background: var(--card); color: var(--accent); box-shadow: var(--shadow-1); } .rv-btn:disabled { opacity: .5; cursor: default; } .review-empty { font-size: 14px; color: var(--ink-3); padding: 28px 0; } @@ -273,7 +273,7 @@ const desc = "Browse, publish, and install community skills and MCP servers for background: var(--bg-soft); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 11px 14px; outline: none; transition: border-color .2s, background .2s; } - .pub-form input:focus, .pub-form select:focus { background: #fff; border-color: var(--accent); } + .pub-form input:focus, .pub-form select:focus { background: var(--card); border-color: var(--accent); } .pub-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; } .pub-msg { font-size: 13.5px; color: var(--ink-2); } .pub-msg.err { color: oklch(0.55 0.18 25); } diff --git a/site/src/scripts/community.js b/site/src/scripts/community.js index da67314cc7..0959ac5bec 100644 --- a/site/src/scripts/community.js +++ b/site/src/scripts/community.js @@ -2,6 +2,8 @@ // gates posting on the shared id.reasonix.io session (cookie sent cross-subdomain). // Bilingual like the rest of the site: static labels via .l-en/.l-zh spans that the // shared `reasonix-lang` choice toggles; plain-text strings pick the current lang. +import { initTheme } from "./theme.js"; + const FORUM = (import.meta.env.PUBLIC_FORUM_API || "https://forum.reasonix.io").replace(/\/$/, ""); const ACCOUNTS = (import.meta.env.PUBLIC_ACCOUNTS_API || "https://id.reasonix.io").replace(/\/$/, ""); @@ -306,6 +308,7 @@ async function renderNew() { } (async function () { + initTheme(); initLang(); await loadAccount(); if (el("topic-list")) renderHome(); diff --git a/site/src/scripts/fx.js b/site/src/scripts/fx.js index 2181358f2f..b5e647ed41 100644 --- a/site/src/scripts/fx.js +++ b/site/src/scripts/fx.js @@ -8,6 +8,25 @@ mouse.x = e.clientX; mouse.y = e.clientY; mouse.active = true; }, { passive: true }); + /* run a rAF loop only while `el` is on screen — no idle spinning */ + const rafWhileVisible = (el, fn) => { + let rafId = 0, running = false; + const loop = () => { + if (!running) return; + fn(); + rafId = requestAnimationFrame(loop); + }; + const setRunning = (on) => { + if (on === running) return; + running = on; + if (on) rafId = requestAnimationFrame(loop); + else cancelAnimationFrame(rafId); + }; + new IntersectionObserver((entries) => { + setRunning(entries[entries.length - 1].isIntersecting); + }).observe(el); + }; + /* particle grid (hero canvas) */ const canvas = document.querySelector(".hero-dots"); if (canvas) { @@ -32,10 +51,8 @@ let mx = -9999, my = -9999; const accent = () => getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#3a5fd0"; - const tick = () => { - requestAnimationFrame(tick); + rafWhileVisible(hero, () => { const r = hero.getBoundingClientRect(); - if (r.bottom < 0) return; ctx.clearRect(0, 0, w, h); if (!rich()) return; const tx = mouse.active ? mouse.x - r.left : -9999; @@ -55,61 +72,8 @@ ctx.fill(); } ctx.globalAlpha = 1; - }; - tick(); - } - - /* cursor glow */ - const glowEl = document.querySelector(".cursor-glow"); - if (glowEl && matchMedia("(pointer: fine)").matches) { - let gx = mouse.x, gy = mouse.y; - const move = () => { - requestAnimationFrame(move); - if (!rich() || !mouse.active) { glowEl.style.opacity = 0; return; } - glowEl.style.opacity = 1; - gx = lerp(gx, mouse.x, 0.09); - gy = lerp(gy, mouse.y, 0.09); - glowEl.style.transform = `translate(${gx}px, ${gy}px) translate(-50%, -50%)`; - }; - move(); - } - - /* typewriter headline (re-runs per language) */ - const typeH1 = () => { - const lang = document.body.dataset.lang || "en"; - const span = document.querySelector(`.hero h1 .l-${lang}`); - if (!span || span.dataset.typed || !rich()) return; - span.dataset.typed = "1"; - const walker = document.createTreeWalker(span, NodeFilter.SHOW_TEXT); - const texts = []; - while (walker.nextNode()) texts.push(walker.currentNode); - const chars = []; - texts.forEach((node) => { - const frag = document.createDocumentFragment(); - for (const ch of node.textContent) { - const s = document.createElement("span"); - s.className = "ch"; - s.textContent = ch; - frag.appendChild(s); - chars.push(s); - } - node.parentNode.replaceChild(frag, node); }); - const caret = document.createElement("span"); - caret.className = "type-caret"; - let i = 0; - const step = () => { - if (i >= chars.length) { setTimeout(() => caret.remove(), 900); return; } - const c = chars[i++]; - c.classList.add("on"); - c.after(caret); - setTimeout(step, c.textContent.trim() ? 34 : 10); - }; - setTimeout(step, 250); - }; - typeH1(); - new MutationObserver(() => typeH1()) - .observe(document.body, { attributes: true, attributeFilter: ["data-lang"] }); + } /* terminal 3D tilt toward cursor */ const term = document.querySelector(".term"); @@ -122,27 +86,11 @@ trx = (0.5 - (e.clientY - r.top) / r.height) * 4; }); stage.addEventListener("mouseleave", () => { trx = 0; try_ = 0; }); - const tilt = () => { - requestAnimationFrame(tilt); + rafWhileVisible(stage, () => { if (!rich()) { term.style.transform = ""; return; } rx = lerp(rx, trx, 0.08); ry = lerp(ry, try_, 0.08); term.style.transform = `rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg)`; - }; - tilt(); - } - - /* magnetic buttons */ - if (matchMedia("(pointer: fine)").matches) { - document.querySelectorAll(".btn").forEach((btn) => { - btn.addEventListener("mousemove", (e) => { - if (!rich()) return; - const r = btn.getBoundingClientRect(); - const dx = (e.clientX - r.left - r.width / 2) / r.width; - const dy = (e.clientY - r.top - r.height / 2) / r.height; - btn.style.transform = `translate(${dx * 5}px, ${dy * 4 - 1}px)`; - }); - btn.addEventListener("mouseleave", () => { btn.style.transform = ""; }); }); } diff --git a/site/src/scripts/mobile-nav-contract.test.mjs b/site/src/scripts/mobile-nav-contract.test.mjs new file mode 100644 index 0000000000..ac94276920 --- /dev/null +++ b/site/src/scripts/mobile-nav-contract.test.mjs @@ -0,0 +1,49 @@ +import assert from "node:assert/strict"; +import { readFile } from "node:fs/promises"; +import test from "node:test"; + +const source = (path) => readFile(new URL(path, import.meta.url), "utf8"); + +/* Extract the body of a `@media (max-width: Npx)` block (up to the next + at-rule or EOF) so assertions stay scoped to small viewports. */ +const mediaBlock = (css, px) => { + const marker = `@media (max-width: ${px}px)`; + const start = css.indexOf(marker); + assert.notEqual(start, -1, `missing ${marker}`); + const rest = css.slice(start + marker.length); + const next = rest.search(/@media|@keyframes/); + return next === -1 ? rest : rest.slice(0, next); +}; + +/* The header must fit a 390px viewport: brand logo + language switch + + theme switch + install button. These contraction rules are what keep the + nav from overflowing horizontally (body has overflow-x: hidden). */ +test("≤640px: marketing nav contracts to fit 390px viewports", async () => { + const css = await source("../styles/global.css"); + const block = mediaBlock(css, 640); + assert.match(block, /\.nav-sign-in \{ display: none/); + assert.match(block, /\.nav \.brand span \{ display: none/); + assert.match(block, /\.theme-switch button \{ padding: 6px 9px/); +}); + +test("≤360px: marketing nav keeps every control within 320px", async () => { + const css = await source("../styles/global.css"); + const block = mediaBlock(css, 360); + assert.match(block, /\.nav-inner \{ padding: 0 12px; gap: 6px/); + assert.match(block, /\.lang-switch button \{ padding: 6px 8px/); + assert.match(block, /\.theme-switch button \{ padding: 6px 7px/); + assert.match(block, /\.nav \.btn \{ padding: 9px 14px/); +}); + +test("≤440px: community nav budgets for the async account control", async () => { + const css = await source("../styles/community.css"); + const layout = await source("../layouts/Community.astro"); + const block = mediaBlock(css, 440); + assert.match(layout, /class="brand-name">Reasonix/); + assert.match(layout, /id="nav-account"/); + assert.match(block, /\.nav \.brand-name \{ display: none/); + assert.match(block, /\.nav-right \{ gap: 8px/); + assert.match(block, /\.lang-switch button \{ padding: 6px 8px/); + assert.match(block, /\.theme-switch button \{ padding: 6px 7px/); + assert.match(block, /#nav-account \.btn \{ padding: 7px 10px/); +}); diff --git a/site/src/scripts/release-title.js b/site/src/scripts/release-title.js new file mode 100644 index 0000000000..283dbcea5f --- /dev/null +++ b/site/src/scripts/release-title.js @@ -0,0 +1,10 @@ +// Release-hero classification: a release whose title is exactly its version +// string ("Reasonix 1.17.14") is a patch release and gets the compact hero. +// Anything else — including titles that merely START with the version, like +// "Reasonix 1.18.0 — Better agents" — is thematic and keeps the full hero. +// Exact, normalized comparison only (no prefix regex). +export function isThematicTitle(titleEn, version) { + const title = String(titleEn || "").trim().toLowerCase().replace(/\s+/g, " "); + const v = String(version || "").trim().toLowerCase(); + return title !== `reasonix ${v}` && title !== `reasonix v${v}`; +} diff --git a/site/src/scripts/release-title.test.mjs b/site/src/scripts/release-title.test.mjs new file mode 100644 index 0000000000..03dffbb7b9 --- /dev/null +++ b/site/src/scripts/release-title.test.mjs @@ -0,0 +1,22 @@ +import assert from "node:assert/strict"; +import test from "node:test"; +import { isThematicTitle } from "./release-title.js"; + +test("version-string titles are patch releases (compact hero)", () => { + assert.equal(isThematicTitle("Reasonix 1.17.14", "1.17.14"), false); + assert.equal(isThematicTitle("Reasonix v1.17.14", "1.17.14"), false); + assert.equal(isThematicTitle(" reasonix 1.17.14 ", "1.17.14"), false); +}); + +test("titles that merely start with the version stay thematic", () => { + assert.equal(isThematicTitle("Reasonix 1.18.0 — Better agents", "1.18.0"), true); + assert.equal( + isThematicTitle("A safer delivery loop, trusted MCP execution, and offline recovery", "1.17.13"), + true, + ); +}); + +test("edge cases stay thematic (full hero is the safe default)", () => { + assert.equal(isThematicTitle("", "1.17.14"), true); + assert.equal(isThematicTitle("Reasonix 1.17.14", ""), true); +}); diff --git a/site/src/scripts/site.js b/site/src/scripts/site.js index 94f2867add..ad71db415a 100644 --- a/site/src/scripts/site.js +++ b/site/src/scripts/site.js @@ -1,7 +1,9 @@ import { downloadPaneFromURL } from "./download-link.js"; +import { initTheme } from "./theme.js"; // Reasonix site — vanilla interactions (function () { + initTheme(); const motionOK = () => document.body.dataset.motion === "rich" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches; diff --git a/site/src/scripts/theme.js b/site/src/scripts/theme.js new file mode 100644 index 0000000000..6e0b48bd8c --- /dev/null +++ b/site/src/scripts/theme.js @@ -0,0 +1,54 @@ +// Reasonix — shared three-state theme switch (system / light / dark). +// The pre-paint inline script in each layout sets documentElement.dataset.theme +// before first paint; this module wires the toggle buttons and keeps the +// resolved theme in sync with OS changes while the preference is "system". +const THEME_KEY = "reasonix-theme"; +const META_LIGHT = "#ffffff"; +const META_DARK = "#1f232b"; + +export function currentThemePref() { + try { + const p = localStorage.getItem(THEME_KEY); + return p === "light" || p === "dark" ? p : "system"; + } catch (e) { + return "system"; + } +} + +export function resolveTheme(pref) { + return pref === "dark" || + (pref === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches) + ? "dark" + : "light"; +} + +export function applyTheme(pref) { + const resolved = resolveTheme(pref); + document.documentElement.dataset.theme = resolved; + const meta = document.querySelector('meta[name="theme-color"]'); + if (meta) meta.content = resolved === "dark" ? META_DARK : META_LIGHT; + document.querySelectorAll(".theme-switch button").forEach((b) => { + const on = b.dataset.theme === pref; + b.classList.toggle("active", on); + if (on) b.setAttribute("aria-pressed", "true"); + else b.setAttribute("aria-pressed", "false"); + }); +} + +export function initTheme() { + applyTheme(currentThemePref()); + const mq = window.matchMedia("(prefers-color-scheme: dark)"); + const onOsChange = () => { + const pref = currentThemePref(); + if (pref === "system") applyTheme(pref); + }; + if (mq.addEventListener) mq.addEventListener("change", onOsChange); + document.querySelectorAll(".theme-switch button").forEach((b) => { + b.addEventListener("click", () => { + try { + localStorage.setItem(THEME_KEY, b.dataset.theme); + } catch (e) {} + applyTheme(b.dataset.theme); + }); + }); +} diff --git a/site/src/styles/changelog.css b/site/src/styles/changelog.css index b490298bad..ff7e1ad8b0 100644 --- a/site/src/styles/changelog.css +++ b/site/src/styles/changelog.css @@ -1,16 +1,25 @@ +/* Palette unified with the global.css base tokens; --release-paper keeps the + ledger identity. Dark flips for base tokens live in global.css. */ :root { + --release-backdrop: var(--bg-soft); --release-paper: #fbfaf7; - --release-ink: #20242d; - --release-blue: #2f6fe4; - --release-blue-soft: #eaf1ff; + --release-ink: var(--ink); + --release-blue: var(--accent); + --release-blue-soft: var(--accent-soft); --release-orange: #d97732; --release-green: #178b67; } +:root[data-theme="dark"] { + --release-paper: var(--card); + --release-orange: oklch(0.76 0.13 60); + --release-green: oklch(0.76 0.13 160); +} + body { background: - linear-gradient(90deg, transparent 0 49.94%, rgba(47, 111, 228, 0.025) 50%, transparent 50.06%), - #f3f5f8; + linear-gradient(90deg, transparent 0 49.94%, color-mix(in oklch, var(--accent) 2.5%, transparent) 50%, transparent 50.06%), + var(--release-backdrop); } .release-stage { @@ -57,7 +66,30 @@ body { transform: rotate(-12deg); } -.release-rail nav { display: grid; gap: 7px; } +.release-rail nav { display: grid; gap: 18px; } +.release-rail__group { display: grid; gap: 7px; } +.release-rail__minor { + margin: 0 0 2px 10px; + color: var(--ink-3); + font-family: var(--font-mono); + font-size: 10.5px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; +} +.release-rail__more summary { + margin: 2px 10px 6px; + color: var(--ink-3); + font-size: 11.5px; + font-weight: 600; + cursor: pointer; + list-style: none; +} +.release-rail__more summary::-webkit-details-marker { display: none; } +.release-rail__more summary:hover { color: var(--release-blue); } +.release-rail__more .when-open { display: none; } +.release-rail__more[open] .when-open { display: inline; } +.release-rail__more[open] .when-closed { display: none; } .release-version-link { display: grid; @@ -73,12 +105,12 @@ body { .release-version-link:hover { transform: translateX(2px); border-color: var(--line); - background: rgba(255,255,255,.68); + background: color-mix(in oklch, var(--card) 68%, transparent); } .release-version-link.active { border-color: color-mix(in srgb, var(--release-blue) 22%, transparent); - background: #fff; + background: var(--card); color: var(--release-blue); box-shadow: 0 8px 24px rgba(35, 55, 92, .08); } @@ -111,10 +143,10 @@ body { .release-paper { min-width: 0; overflow: hidden; - border: 1px solid rgba(41, 50, 70, .11); + border: 1px solid var(--line); border-radius: 20px; background: - linear-gradient(rgba(47, 111, 228, .035) 1px, transparent 1px) 0 0 / 100% 34px, + linear-gradient(color-mix(in oklch, var(--accent) 3.5%, transparent) 1px, transparent 1px) 0 0 / 100% 34px, var(--release-paper); box-shadow: 0 28px 80px -42px rgba(24, 35, 60, .38); } @@ -123,8 +155,8 @@ body { position: relative; padding: 58px 62px 52px; background: - radial-gradient(circle at 90% 5%, rgba(47, 111, 228, .14), transparent 28%), - linear-gradient(180deg, rgba(255,255,255,.88), rgba(251,250,247,.92)); + radial-gradient(circle at 90% 5%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 28%), + linear-gradient(180deg, color-mix(in oklch, var(--card) 88%, transparent), color-mix(in oklch, var(--release-paper) 92%, transparent)); } .release-hero::after { @@ -167,7 +199,7 @@ body { padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--release-blue) 18%, var(--line)); border-radius: 999px; - background: rgba(255,255,255,.72); + background: color-mix(in oklch, var(--card) 72%, transparent); color: var(--ink-2); font-size: 11px; font-weight: 600; @@ -178,7 +210,7 @@ body { padding: 20px 24px; border-left: 3px solid var(--release-blue); border-radius: 0 12px 12px 0; - background: rgba(47, 111, 228, .055); + background: color-mix(in oklch, var(--accent) 5.5%, transparent); color: var(--ink-2); font-size: 17px; line-height: 1.72; @@ -186,6 +218,11 @@ body { .release-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } +/* compact hero for patch releases whose title is just the version */ +.release-hero--compact { padding: 42px 62px 38px; } +.release-hero--compact h1 { margin-top: 22px; font-size: clamp(30px, 3.6vw, 42px); } +.release-lede { margin: 22px 0 0; max-width: 640px; color: var(--ink-2); font-size: 16.5px; line-height: 1.7; } + .release-section { padding: 52px 62px 0; scroll-margin-top: 100px; } .release-section__head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .release-section__head > span { @@ -213,7 +250,7 @@ body { padding: 22px; border: 1px solid var(--line); border-radius: 14px; - background: rgba(255,255,255,.72); + background: color-mix(in oklch, var(--card) 72%, transparent); color: inherit; text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; @@ -231,7 +268,7 @@ body { padding: 24px; border: 1px solid var(--line); border-radius: 14px; - background: rgba(255,255,255,.68); + background: color-mix(in oklch, var(--card) 68%, transparent); } .release-highlight__index { color: color-mix(in srgb, var(--release-blue) 48%, var(--ink-3)); font-family: var(--font-mono); font-size: 12px; padding-top: 4px; } .release-highlight__kind { margin-bottom: 7px; color: var(--release-blue); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } @@ -243,7 +280,7 @@ body { padding: 3px 7px; border-radius: 6px; background: var(--release-blue-soft); - color: #2456b8; + color: var(--release-blue); font-family: var(--font-mono); font-size: 10px; font-weight: 600; @@ -254,7 +291,7 @@ body { .release-change-list article { padding: 20px 22px; border-top: 2px solid color-mix(in srgb, var(--release-blue) 42%, var(--line)); - background: rgba(255,255,255,.46); + background: color-mix(in oklch, var(--card) 46%, transparent); } .release-change-list p { margin-top: 8px; font-size: 14px; } @@ -266,16 +303,16 @@ body { padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--release-blue) 22%, var(--line)); border-radius: 12px; - background: color-mix(in srgb, var(--release-blue-soft) 56%, white); + background: color-mix(in srgb, var(--release-blue-soft) 56%, var(--card)); } -.release-notice--warning { border-color: color-mix(in srgb, var(--release-orange) 32%, var(--line)); background: color-mix(in srgb, #fff0e5 66%, white); } +.release-notice--warning { border-color: color-mix(in srgb, var(--release-orange) 32%, var(--line)); background: color-mix(in srgb, var(--release-orange) 12%, var(--card)); } .release-notice__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--release-blue); color: white; font-family: var(--font-mono); font-size: 12px; font-weight: 700; } .release-notice--warning .release-notice__icon { background: var(--release-orange); } .release-notice p { margin-top: 6px; font-size: 14px; } .release-thanks > p { margin-bottom: 14px; } .release-thanks > div { display: flex; flex-wrap: wrap; gap: 8px; } -.release-thanks a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.7); color: var(--ink-2); font-family: var(--font-mono); font-size: 11px; text-decoration: none; } +.release-thanks a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in oklch, var(--card) 70%, transparent); color: var(--ink-2); font-family: var(--font-mono); font-size: 11px; text-decoration: none; } .release-thanks a:hover { color: var(--release-blue); border-color: color-mix(in srgb, var(--release-blue) 34%, var(--line)); } .release-download { @@ -286,7 +323,7 @@ body { justify-content: space-between; gap: 26px; border-radius: 16px; - background: var(--release-ink); + background: #20242d; } .release-download h2 { max-width: 480px; color: #fff; font-size: 28px; } .release-download__kicker { margin-bottom: 7px; color: #91b8ff !important; font-size: 11px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } @@ -323,7 +360,7 @@ body { color: var(--ink-3); font-size: 12px; } -.release-footer > span { margin-left: auto; color: #686b70; } +.release-footer > span { margin-left: auto; color: var(--ink-3); } .release-footer > a:last-child { color: var(--ink-2); text-decoration: none; } @media (max-width: 1180px) { @@ -345,7 +382,7 @@ body { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; - background: #fff; + background: var(--card); color: var(--ink-2); font-size: 12px; font-weight: 700; @@ -353,6 +390,7 @@ body { .release-mobile-switcher select { min-width: 130px; padding: 7px 28px 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); color: var(--ink); font: inherit; } .release-paper { width: min(720px, 100%); margin: 0 auto; border-radius: 15px; } .release-hero { padding: 38px 28px 34px; } + .release-hero--compact { padding: 30px 28px 28px; } .release-hero::after { left: 28px; right: 28px; } .release-hero__version { margin-top: 36px; } .release-section { padding: 40px 28px 0; } diff --git a/site/src/styles/community.css b/site/src/styles/community.css index 3050929fbe..3402dedf6f 100644 --- a/site/src/styles/community.css +++ b/site/src/styles/community.css @@ -4,18 +4,20 @@ @import "@fontsource-variable/jetbrains-mono"; :root { + color-scheme: light; --accent: oklch(0.55 0.17 257); --accent-deep: oklch(0.48 0.17 257); - --accent-soft: color-mix(in oklch, var(--accent) 8%, white); + --accent-soft: color-mix(in oklch, var(--accent) 8%, var(--bg)); --accent-line: color-mix(in oklch, var(--accent) 26%, transparent); --bg: #ffffff; --bg-soft: oklch(0.977 0.0025 247); + --card: #ffffff; --ink: oklch(0.25 0.006 260); --ink-2: oklch(0.47 0.008 260); --ink-3: oklch(0.62 0.008 260); --line: oklch(0.925 0.004 247); --ok: oklch(0.6 0.14 155); - --ok-soft: color-mix(in oklch, var(--ok) 12%, white); + --ok-soft: color-mix(in oklch, var(--ok) 12%, var(--bg)); --err: oklch(0.5 0.19 25); --warm: oklch(0.72 0.13 66); --violet: oklch(0.58 0.17 300); @@ -29,6 +31,23 @@ --ease: cubic-bezier(0.22, 1, 0.36, 1); } +:root[data-theme="dark"] { + color-scheme: dark; + --accent: oklch(0.66 0.16 257); + --accent-deep: oklch(0.73 0.14 257); + --accent-soft: color-mix(in oklch, var(--accent) 16%, var(--bg)); + --bg: oklch(0.19 0.006 260); + --bg-soft: oklch(0.225 0.008 260); + --card: oklch(0.255 0.009 260); + --ink: oklch(0.93 0.004 260); + --ink-2: oklch(0.78 0.008 260); + --ink-3: oklch(0.63 0.008 260); + --line: oklch(0.33 0.008 260); + --ok-soft: color-mix(in oklch, var(--ok) 18%, var(--bg)); + --shadow-1: 0 1px 2px oklch(0 0 0 / 0.42), 0 1px 3px 1px oklch(0 0 0 / 0.24); + --shadow-2: 0 2px 6px oklch(0 0 0 / 0.35), 0 12px 30px -6px oklch(0 0 0 / 0.5); +} + * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.5; } @@ -40,12 +59,14 @@ a { color: inherit; text-decoration: none; } /* bilingual toggle — mirrors the main site (shared reasonix-lang choice) */ body[data-lang="en"] .l-zh { display: none !important; } body[data-lang="zh"] .l-en { display: none !important; } -.lang-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-soft); border-radius: 999px; } -.lang-switch button { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: transparent; border: none; cursor: pointer; padding: 6px 12px; border-radius: 999px; transition: background 0.2s, color 0.2s, box-shadow 0.2s; } -.lang-switch button:hover { color: var(--ink); } -.lang-switch button.active { background: #fff; color: var(--accent); box-shadow: var(--shadow-1); } - -.nav { position: sticky; top: 0; z-index: 50; background: oklch(1 0 0 / 0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } +.lang-switch, .theme-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-soft); border-radius: 999px; } +.lang-switch button, .theme-switch button { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: transparent; border: none; cursor: pointer; padding: 6px 12px; border-radius: 999px; transition: background 0.2s, color 0.2s, box-shadow 0.2s; } +.lang-switch button:hover, .theme-switch button:hover { color: var(--ink); } +.lang-switch button.active, .theme-switch button.active { background: var(--card); color: var(--accent); box-shadow: var(--shadow-1); } +.theme-switch button { display: inline-flex; align-items: center; justify-content: center; } +.theme-switch svg { display: block; } + +.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; gap: 20px; height: 64px; max-width: 1180px; margin: 0 auto; padding: 0 32px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; } .brand .mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(140deg, var(--accent), var(--violet)); color: #fff; font-weight: 700; font-size: 15px; } @@ -56,7 +77,7 @@ body[data-lang="zh"] .l-en { display: none !important; } .nav-links a.here { color: var(--accent); background: var(--accent-soft); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .nav-search { display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid transparent; border-radius: 999px; padding: 8px 14px; width: 220px; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } -.nav-search:focus-within { background: #fff; border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); } +.nav-search:focus-within { background: var(--card); border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); } .nav-search input { border: none; outline: none; background: none; font-family: var(--font-sans); font-size: 14px; color: var(--ink); width: 100%; } .nav-search .ico { color: var(--ink-3); } @@ -70,7 +91,7 @@ body[data-lang="zh"] .l-en { display: none !important; } .btn[disabled] { opacity: 0.55; pointer-events: none; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } -.av { flex: none; display: grid; place-items: center; border-radius: 50%; width: 40px; height: 40px; font-size: 14px; font-weight: 600; color: #fff; border: 2px solid #fff; box-shadow: var(--shadow-1); overflow: hidden; } +.av { flex: none; display: grid; place-items: center; border-radius: 50%; width: 40px; height: 40px; font-size: 14px; font-weight: 600; color: #fff; border: 2px solid var(--bg); box-shadow: var(--shadow-1); overflow: hidden; } .av.sm { width: 28px; height: 28px; font-size: 11px; border-width: 1.5px; } .av.lg { width: 52px; height: 52px; font-size: 18px; } @@ -83,7 +104,7 @@ body[data-lang="zh"] .l-en { display: none !important; } a.tag:hover { color: var(--accent); background: var(--accent-soft); } .cat-tag { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); } -.head { padding: 40px 0 28px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--accent-soft), #fff 76%); } +.head { padding: 40px 0 28px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--accent-soft), var(--bg) 76%); } .head .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .head .eyebrow { font-size: 13px; font-weight: 600; color: var(--accent); } .head h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 600; letter-spacing: -0.02em; margin-top: 8px; } @@ -95,18 +116,18 @@ a.tag:hover { color: var(--accent); background: var(--accent-soft); } .sec-title h2 { font-size: 15px; font-weight: 600; } .tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-soft); border-radius: 999px; } .tabs button { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--ink-2); background: none; border: none; cursor: pointer; padding: 7px 15px; border-radius: 999px; transition: background 0.2s, color 0.2s, box-shadow 0.2s; } -.tabs button.on { background: #fff; color: var(--accent); box-shadow: var(--shadow-1); } +.tabs button.on { background: var(--card); color: var(--accent); box-shadow: var(--shadow-1); } .tabs button:hover:not(.on) { color: var(--ink); } .cats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 34px; } .cat { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-soft); border-radius: var(--radius-sm); padding: 18px; transition: box-shadow 0.3s, transform 0.3s var(--ease), background 0.3s; } -.cat:hover { background: #fff; box-shadow: var(--shadow-2); transform: translateY(-2px); } +.cat:hover { background: var(--card); box-shadow: var(--shadow-2); transform: translateY(-2px); } .cat .ico { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 20px; background: var(--accent-soft); } .cat h3 { font-size: 15.5px; font-weight: 600; } .cat p { font-size: 13px; color: var(--ink-2); margin-top: 3px; } .cat .meta { font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); margin-top: 9px; } -.topics { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; } +.topics { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); } .topic { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); transition: background 0.18s; } .topic:last-child { border-bottom: none; } .topic:hover { background: var(--bg-soft); } @@ -122,7 +143,7 @@ a.tag:hover { color: var(--accent); background: var(--accent-soft); } .topic .last { min-width: 96px; text-align: right; font-size: 12px; color: var(--ink-3); } .card { background: var(--bg-soft); border-radius: var(--radius-sm); padding: 20px; } -.card.cta { background: linear-gradient(160deg, var(--accent-soft), #fff 82%); border: 1px solid var(--accent-line); } +.card.cta { background: linear-gradient(160deg, var(--accent-soft), var(--bg) 82%); border: 1px solid var(--accent-line); } .card h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; } .card .lead { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin-bottom: 14px; } .card .btn { width: 100%; } @@ -134,11 +155,11 @@ a.tag:hover { color: var(--accent); background: var(--accent-soft); } .empty { padding: 40px 20px; text-align: center; color: var(--ink-3); font-size: 14px; } .skeleton { padding: 16px 20px; border-bottom: 1px solid var(--line); } -.skeleton .bar { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-soft), oklch(0.95 0.003 247), var(--bg-soft)); background-size: 200% 100%; animation: sk 1.3s linear infinite; } +.skeleton .bar { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-soft), var(--line), var(--bg-soft)); background-size: 200% 100%; animation: sk 1.3s linear infinite; } .skeleton .bar.short { width: 40%; margin-top: 8px; } @keyframes sk { to { background-position: -200% 0; } } .msg { margin: 16px 0; font-size: 13.5px; border-radius: var(--radius-sm); padding: 11px 14px; } -.msg.error { color: var(--err); background: color-mix(in oklch, var(--err) 9%, white); } +.msg.error { color: var(--err); background: color-mix(in oklch, var(--err) 9%, var(--bg)); } .msg.ok { color: var(--ok); background: var(--ok-soft); } /* thread */ @@ -168,7 +189,7 @@ a.tag:hover { color: var(--accent); background: var(--accent-soft); } .link-act { font-size: 13px; font-weight: 500; color: var(--ink-3); padding: 6px 10px; border-radius: 999px; cursor: pointer; background: none; border: none; font-family: var(--font-sans); } .link-act:hover { color: var(--accent); background: var(--accent-soft); } -.composer { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; margin-top: 24px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; } +.composer { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; margin-top: 24px; background: var(--card); transition: border-color 0.2s, box-shadow 0.2s; } .composer:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); } .composer input.title { width: 100%; border: none; outline: none; padding: 12px 14px 4px; font-family: var(--font-sans); font-size: 18px; font-weight: 600; color: var(--ink); background: none; } .composer textarea { width: 100%; border: none; outline: none; resize: vertical; min-height: 96px; padding: 12px 14px; font-family: var(--font-sans); font-size: 15px; color: var(--ink); background: none; line-height: 1.6; } @@ -199,3 +220,21 @@ a.tag:hover { color: var(--accent); background: var(--accent-soft); } .topic .stat, .topic .last { display: none; } .wrap { padding: 0 20px; } } + +@media (max-width: 640px) { + /* drop the Community tag and tighten the shared controls */ + .nav-inner { padding: 0 16px; gap: 10px; } + .brand .ctag { display: none; } + .theme-switch button { padding: 6px 9px; } +} + +@media (max-width: 440px) { + /* Include the async account control in the narrow-header budget. */ + .nav-inner { padding: 0 12px; gap: 8px; } + .nav .brand { gap: 0; } + .nav .brand-name { display: none; } + .nav-right { gap: 8px; } + .lang-switch button { padding: 6px 8px; } + .theme-switch button { padding: 6px 7px; } + #nav-account .btn { padding: 7px 10px; } +} diff --git a/site/src/styles/global.css b/site/src/styles/global.css index 697830aa55..6af23e4348 100644 --- a/site/src/styles/global.css +++ b/site/src/styles/global.css @@ -1,15 +1,17 @@ -/* Reasonix marketing site — Google-style visual language: - pure white, one blue accent, soft-gray surfaces, large radii, pill buttons. */ +/* Reasonix marketing site — visual language: + one blue accent, soft-gray surfaces, large radii, pill buttons. + Light/dark themes via [data-theme] on ; every color is a token. */ @import '@fontsource-variable/outfit'; @import '@fontsource-variable/jetbrains-mono'; :root { + color-scheme: light; --acc-1: #4f9dff; --acc-2: #7a6bff; --acc-3: #c46bff; --accent: oklch(0.55 0.17 257); --accent-deep: oklch(0.48 0.17 257); - --accent-soft: color-mix(in oklch, var(--accent) 8%, white); + --accent-soft: color-mix(in oklch, var(--accent) 8%, var(--bg)); --bg: #ffffff; --bg-soft: oklch(0.976 0.0025 247); --ink: oklch(0.25 0.006 260); @@ -28,9 +30,27 @@ --ease: cubic-bezier(0.22, 1, 0.36, 1); } +:root[data-theme="dark"] { + color-scheme: dark; + --accent: oklch(0.66 0.16 257); + --accent-deep: oklch(0.73 0.14 257); + --accent-soft: color-mix(in oklch, var(--accent) 16%, var(--bg)); + --bg: oklch(0.19 0.006 260); + --bg-soft: oklch(0.225 0.008 260); + --ink: oklch(0.93 0.004 260); + --ink-2: oklch(0.78 0.008 260); + --ink-3: oklch(0.63 0.008 260); + --line: oklch(0.33 0.008 260); + --card: oklch(0.255 0.009 260); + --term-bg: oklch(0.15 0.005 260); + --term-edge: oklch(0.29 0.008 260); + --shadow-1: 0 1px 2px oklch(0 0 0 / 0.42), 0 1px 3px 1px oklch(0 0 0 / 0.24); + --shadow-2: 0 1px 3px oklch(0 0 0 / 0.4), 0 8px 24px -4px oklch(0 0 0 / 0.5); +} + * { margin: 0; padding: 0; box-sizing: border-box; } -html { scroll-behavior: smooth; } +html { scroll-behavior: smooth; background: var(--bg); } body { font-family: var(--font-sans); @@ -52,15 +72,17 @@ body[data-lang="zh"] h2, body[data-lang="zh"] h3 { letter-spacing: 0; } body[data-lang="zh"] .hero h1 { font-size: clamp(42px, 5.6vw, 72px); line-height: 1.22; } -.lang-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-soft); border-radius: 999px; } -.lang-switch button { +.lang-switch, .theme-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-soft); border-radius: 999px; } +.lang-switch button, .theme-switch button { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: transparent; border: none; cursor: pointer; padding: 6px 13px; border-radius: 999px; transition: background 0.2s, color 0.2s, box-shadow 0.2s; } -.lang-switch button:hover { color: var(--ink); } -.lang-switch button.active { background: #fff; color: var(--accent); box-shadow: var(--shadow-1); } +.theme-switch button { display: inline-flex; align-items: center; justify-content: center; } +.theme-switch svg { display: block; } +.lang-switch button:hover, .theme-switch button:hover { color: var(--ink); } +.lang-switch button.active, .theme-switch button.active { background: var(--card); color: var(--accent); box-shadow: var(--shadow-1); } /* nav */ .nav { @@ -68,7 +90,7 @@ body[data-lang="zh"] .hero h1 { font-size: clamp(42px, 5.6vw, 72px); line-height transition: background 0.4s, box-shadow 0.4s; } .nav.scrolled { - background: oklch(1 0 0 / 0.92); + background: color-mix(in oklch, var(--bg) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); @@ -101,7 +123,7 @@ body[data-lang="zh"] .hero h1 { font-size: clamp(42px, 5.6vw, 72px); line-height .btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); } .btn-ghost:hover { background: var(--accent-soft); border-color: transparent; } .nav .btn { padding: 9px 20px; font-size: 14px; } -.nav .btn, .nav .lang-switch, .nav-acct { flex: none; } +.nav .btn, .nav .lang-switch, .nav .theme-switch, .nav-acct { flex: none; } @media (max-width: 1260px) { .nav-link--secondary { display: none; } @@ -113,7 +135,7 @@ body[data-lang="zh"] .hero h1 { font-size: clamp(42px, 5.6vw, 72px); line-height .eyebrow { display: inline-flex; align-items: center; gap: 9px; - font-size: 13px; font-weight: 600; + font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--accent); margin-bottom: 26px; letter-spacing: 0.01em; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.7 0.16 150); box-shadow: 0 0 0 3px oklch(0.7 0.16 150 / 0.18); } @@ -126,6 +148,14 @@ body[data-lang="zh"] .hero h1 { font-size: clamp(42px, 5.6vw, 72px); line-height } .hero h1 .grad { color: var(--accent); } .hero h1 em { font-style: italic; color: var(--accent); } +/* mono keyword styled like a warm cache block */ +.hero h1 .tt { + font-family: var(--font-mono); font-weight: 500; font-size: 0.8em; + letter-spacing: -0.01em; white-space: nowrap; + background: var(--accent-soft); + box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 26%, transparent); + border-radius: 0.16em; padding: 0.05em 0.24em; +} .hero .sub { margin: 28px auto 0; max-width: 620px; font-size: 19px; line-height: 1.6; color: var(--ink-2); font-weight: 400; @@ -143,11 +173,11 @@ body[data-lang="zh"] .hero h1 { font-size: clamp(42px, 5.6vw, 72px); line-height display: grid; align-content: start; justify-items: start; gap: 12px; min-height: 172px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); - background: color-mix(in oklch, var(--bg-soft) 68%, white); + background: var(--bg-soft); text-align: left; } .install-option--desktop { - background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 11%, white), #fff 78%); + background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 11%, var(--bg)), var(--bg) 78%); border-color: color-mix(in oklch, var(--accent) 22%, var(--line)); } .install-kicker { @@ -184,7 +214,7 @@ body[data-lang="zh"] .hero h1 { font-size: clamp(42px, 5.6vw, 72px); line-height .install button { flex: none; font-family: var(--font-sans); font-size: 13px; font-weight: 600; - background: #fff; color: var(--accent); border: none; cursor: pointer; + background: var(--card); color: var(--accent); border: none; cursor: pointer; padding: 7px 16px; border-radius: 999px; box-shadow: var(--shadow-1); transition: background 0.2s, color 0.2s, box-shadow 0.2s; } @@ -205,6 +235,16 @@ body[data-lang="zh"] .hero h1 { font-size: clamp(42px, 5.6vw, 72px); line-height .also a { color: var(--accent); text-decoration: none; font-weight: 500; } .also a:hover { text-decoration: underline; } +/* 404 — CTA row + "gone cold" cache blocks */ +.hero-cta { margin-top: 38px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } +.cold-blocks { display: flex; justify-content: center; gap: 8px; margin-top: 46px; } +.cold-blocks i { + width: 26px; height: 26px; border-radius: 7px; + background: var(--accent-soft); + box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 26%, transparent); +} +.cold-blocks i.new { background: var(--accent); box-shadow: none; } + /* terminal */ .term-stage { position: relative; margin: 64px auto 0; max-width: 880px; perspective: 1200px; } .fig { @@ -258,9 +298,10 @@ section { padding: 150px 0 0; } .sec-head { max-width: 680px; margin: 0 auto 64px; text-align: center; } .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; } .kicker { - font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em; + font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--accent); display: block; margin-bottom: 18px; } +.kicker::before { content: "$ "; color: var(--ink-3); } .sec-head h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; @@ -296,7 +337,7 @@ section { padding: 150px 0 0; } .feat-chip { display: inline-block; margin-top: 30px; font-family: var(--font-mono); font-size: 12.5px; - background: #fff; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); + background: var(--card); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); padding: 9px 16px; color: var(--ink-2); } .feat { @@ -329,7 +370,7 @@ section { padding: 150px 0 0; } .cache-row.row-on .lbl { color: var(--ink); } .blk { width: 34px; height: 34px; border-radius: 9px; flex: none; - background: #fff; box-shadow: inset 0 0 0 1px var(--line); + background: var(--card); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; transform: scale(0.7); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); @@ -354,7 +395,7 @@ section { padding: 150px 0 0; } transition: background 0.3s, color 0.3s, box-shadow 0.3s; } .cap .n { font-family: var(--font-mono); font-size: 12px; margin-right: 12px; color: var(--ink-3); } -.cap.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); } +.cap.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); } .cap.on .n { color: var(--accent); } .how-track { height: 280vh; } @@ -402,7 +443,7 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; - border: 2px solid #fff; box-shadow: var(--shadow-1); + border: 2px solid var(--bg); box-shadow: var(--shadow-1); text-decoration: none; overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s; } @@ -414,7 +455,7 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } content: attr(data-h); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); font-size: 12px; font-weight: 500; white-space: nowrap; - background: var(--ink); color: #fff; padding: 5px 12px; border-radius: 8px; + background: var(--ink); color: var(--bg); padding: 5px 12px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s var(--ease); } @@ -442,21 +483,6 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } } /* FX layers */ -.cursor-glow { - position: fixed; left: 0; top: 0; width: 540px; height: 540px; border-radius: 50%; - pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.5s; - background: radial-gradient(circle, color-mix(in oklch, var(--accent) 5%, transparent), transparent 65%); - will-change: transform; -} - -.hero h1 .ch { opacity: 0; } -.hero h1 .ch.on { opacity: 1; } -.type-caret { - display: inline-block; width: 4px; height: 0.82em; margin-left: 3px; - background: var(--accent); vertical-align: -0.06em; border-radius: 2px; - animation: blink 1s steps(1) infinite; -} - .os-card::after, .doc-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), @@ -469,13 +495,22 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } } .os-card:hover::after, .doc-card:hover::after { opacity: 1; } -/* dividers */ +/* dividers — section break as a row of cache blocks: solid center, fading edges */ .divider { position: relative; height: 80px; margin-top: 110px; pointer-events: none; } .divider + section { padding-top: 70px; } .divider .line { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); - width: min(1100px, calc(100% - 80px)); height: 1px; - background: var(--line); + width: min(1100px, calc(100% - 80px)); height: 12px; + background: repeating-linear-gradient(90deg, + color-mix(in oklch, var(--accent) 20%, transparent) 0 12px, + transparent 12px 26px); + -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); + mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); +} +.divider .line::before { + content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); + width: 102px; height: 12px; + background: repeating-linear-gradient(90deg, var(--accent) 0 12px, transparent 12px 26px); } /* CTA band */ @@ -487,16 +522,16 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } .cta h2 { font-size: clamp(34px, 4.2vw, 52px); letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; } .cta h2 .em { color: var(--accent); } .cta p { margin: 20px auto 0; max-width: 560px; font-size: 17px; line-height: 1.65; color: var(--ink-2); } -.cta .install { background: #fff; box-shadow: var(--shadow-1); } +.cta .install { background: var(--card); box-shadow: var(--shadow-1); } .cta .install button { background: var(--accent-soft); box-shadow: none; } -.cta .install button:hover { background: color-mix(in oklch, var(--accent) 14%, white); } +.cta .install button:hover { background: color-mix(in oklch, var(--accent) 16%, var(--bg)); } .cta .install button.copied { background: oklch(0.55 0.14 155); color: #fff; } /* download tabs */ .dl { margin-top: 44px; } .dl-tabs { display: inline-flex; gap: 2px; padding: 4px; - background: oklch(0.94 0.004 247); border-radius: 999px; + background: color-mix(in oklch, var(--ink) 5%, var(--bg)); border-radius: 999px; } .dl-tab { font-family: var(--font-sans); font-size: 14px; font-weight: 500; @@ -505,7 +540,7 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } transition: background 0.25s, color 0.25s, box-shadow 0.25s; } .dl-tab:hover { color: var(--ink); } -.dl-tab.active { background: #fff; color: var(--accent); box-shadow: var(--shadow-1); } +.dl-tab.active { background: var(--card); color: var(--accent); box-shadow: var(--shadow-1); } .dl-pane { display: none; margin-top: 36px; } .dl-pane.active { display: block; animation: pane-in 0.45s var(--ease); } @@ -519,7 +554,7 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } /* npm release channels */ .chan { max-width: 660px; margin: 26px auto 0; text-align: left; - background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-1); overflow: hidden; + background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-1); overflow: hidden; } .chan-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; @@ -547,7 +582,7 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } } .os-card { position: relative; display: flex; flex-direction: column; gap: 10px; - background: #fff; border-radius: var(--radius); + background: var(--card); border-radius: var(--radius); padding: 30px 28px 28px; box-shadow: var(--shadow-1); transition: box-shadow 0.3s, transform 0.3s var(--ease); } @@ -576,12 +611,12 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } .os-card .alt a { color: var(--accent); text-decoration: none; font-weight: 500; } .os-card .alt a:hover { text-decoration: underline; } .btn-light { background: var(--accent-soft); color: var(--accent); } -.btn-light:hover { background: color-mix(in oklch, var(--accent) 14%, white); } +.btn-light:hover { background: color-mix(in oklch, var(--accent) 16%, var(--bg)); } .dl-help { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; max-width: 900px; margin: 18px auto 0; padding: 16px 18px; - background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); + background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-1); text-align: left; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; } @@ -626,7 +661,7 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } .docs-side-links { border: 1px solid var(--line); border-radius: var(--radius-sm); - background: color-mix(in oklch, var(--bg-soft) 70%, white); + background: var(--card); padding: 16px; } .side-card-kicker { @@ -676,9 +711,10 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } } .docs-kicker { display: inline-flex; align-items: center; margin-bottom: 12px; - font-size: 12px; font-weight: 700; letter-spacing: 0.07em; + font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); } +.docs-kicker::before { content: "$ "; color: var(--ink-3); } .docs-main h1 { font-size: 42px; line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 14px; max-width: 760px; } .docs-main .lede { font-size: 17px; color: var(--ink-2); line-height: 1.65; margin: 0 0 26px; max-width: 760px; text-wrap: pretty; } .docs-path-grid { @@ -689,13 +725,13 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } display: flex; flex-direction: column; gap: 7px; min-height: 148px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-sm); - background: color-mix(in oklch, var(--bg-soft) 55%, white); + background: var(--card); color: var(--ink-2); text-decoration: none; transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease); } .docs-path-grid a:hover { border-color: color-mix(in oklch, var(--accent) 38%, var(--line)); - background: #fff; transform: translateY(-1px); text-decoration: none; + background: var(--card); transform: translateY(-1px); text-decoration: none; } .docs-path-grid strong { color: var(--ink); font-size: 14.5px; line-height: 1.25; @@ -761,7 +797,7 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } .doc-note-grid > div { border: 1px solid var(--line); border-radius: var(--radius-sm); - background: color-mix(in oklch, var(--bg-soft) 65%, white); + background: var(--card); padding: 17px 18px; } .doc-choice-grid strong, @@ -784,7 +820,7 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } margin: 20px 0 8px; padding: 24px; border: 1px solid color-mix(in oklch, var(--accent) 18%, var(--line)); border-radius: var(--radius-sm); - background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 9%, white), #fff 72%); + background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 9%, var(--bg)), var(--bg) 72%); } .desktop-panel-head { max-width: 680px; } .desktop-kicker { @@ -804,12 +840,12 @@ body.how-flat .how-stage { position: static; min-height: 0; display: block; } } .desktop-downloads--secondary { margin-top: 10px; } .desktop-downloads--secondary .desktop-download { - box-shadow: none; background: color-mix(in oklch, var(--bg-soft) 72%, white); + box-shadow: none; background: var(--bg-soft); } .desktop-download { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 15px 16px; border-radius: 10px; - background: #fff; border: 1px solid var(--line); + background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease); @@ -898,6 +934,11 @@ footer { background: var(--bg); border-top: 1px solid var(--line); margin-top: 0 } @media (max-width: 640px) { + .nav-inner { padding: 0 16px; gap: 10px; } + .nav-sign-in { display: none; } + /* logo-only brand + compact theme buttons keep the nav within 390px */ + .nav .brand span { display: none; } + .theme-switch button { padding: 6px 9px; } .docs-path-grid { grid-template-columns: 1fr; } .docs-main h1 { font-size: 34px; } .hero-install { --hero-action-width: 100%; } @@ -911,8 +952,16 @@ footer { background: var(--bg); border-top: 1px solid var(--line); margin-top: 0 .hero-install .install button { flex-basis: 100%; } } +@media (max-width: 360px) { + /* Keep logo, language, theme, and install visible at 320px. */ + .nav-inner { padding: 0 12px; gap: 6px; } + .lang-switch button { padding: 6px 8px; } + .theme-switch button { padding: 6px 7px; } + .nav .btn { padding: 9px 14px; } +} + /* account / auth pages */ -.auth-nav { background: oklch(1 0 0 / 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); } +.auth-nav { background: color-mix(in oklch, var(--bg) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); } .auth-main { min-height: 100vh; display: grid; place-items: center; padding: 116px 24px 72px; } .auth-card { width: 100%; max-width: 420px; @@ -934,7 +983,7 @@ footer { background: var(--bg); border-top: 1px solid var(--line); margin-top: 0 transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .field input:focus, .field textarea:focus { - outline: none; background: #fff; + outline: none; background: var(--card); border-color: color-mix(in oklch, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 4px var(--accent-soft); } @@ -945,8 +994,10 @@ footer { background: var(--bg); border-top: 1px solid var(--line); margin-top: 0 .auth-small { font-size: 12.5px; color: var(--accent); text-decoration: none; font-weight: 500; } .auth-small:hover { text-decoration: underline; } .auth-msg { margin-top: 20px; font-size: 13.5px; line-height: 1.55; border-radius: var(--radius-sm); padding: 11px 14px; text-align: left; } -.auth-msg.error { background: color-mix(in oklch, oklch(0.63 0.21 25) 10%, white); color: oklch(0.5 0.19 25); } -.auth-msg.ok { background: color-mix(in oklch, oklch(0.65 0.16 155) 13%, white); color: oklch(0.44 0.12 155); } +.auth-msg.error { background: color-mix(in oklch, oklch(0.63 0.21 25) 10%, var(--card)); color: oklch(0.5 0.19 25); } +.auth-msg.ok { background: color-mix(in oklch, oklch(0.65 0.16 155) 13%, var(--card)); color: oklch(0.44 0.12 155); } +:root[data-theme="dark"] .auth-msg.error { color: oklch(0.75 0.16 25); } +:root[data-theme="dark"] .auth-msg.ok { color: oklch(0.78 0.14 155); } .auth-alt { margin-top: 24px; text-align: center; font-size: 14px; color: var(--ink-3); } .auth-alt a { color: var(--accent); text-decoration: none; font-weight: 500; } .auth-alt a:hover { text-decoration: underline; }