aura-components-mcp 1.5.4 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -1
- package/dist/server.js +164 -24
- package/flow/app.js +175 -37
- package/flow/compare.html +54 -18
- package/flow/docs.html +65 -18
- package/flow/how.html +55 -18
- package/flow/index.html +82 -19
- package/flow/setup.html +67 -19
- package/flow/styles.css +372 -81
- package/flow/tools.html +72 -19
- package/package.json +2 -1
- package/flow/b-compare.html +0 -1
- package/flow/b-docs.html +0 -1
- package/flow/b-how.html +0 -1
- package/flow/b-index.html +0 -1
- package/flow/b-setup.html +0 -4
- package/flow/b-tools.html +0 -1
- package/flow/hero-c.html +0 -1
- package/flow/logo-c.html +0 -1
- package/flow/shell-a.html +0 -7
- package/flow/shell-b.html +0 -7
- package/flow/shell-c.html +0 -12
package/flow/setup.html
CHANGED
|
@@ -1,29 +1,77 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
|
-
<html lang=
|
|
2
|
+
<html lang="en" data-theme="dark" class="no-js">
|
|
3
3
|
<head>
|
|
4
|
-
<meta charset=
|
|
5
|
-
<meta name=
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
6
|
<title>Setup — aura-components-mcp in a minute</title>
|
|
7
|
-
<meta name=
|
|
8
|
-
<link rel=
|
|
9
|
-
<link rel=
|
|
10
|
-
<link rel=
|
|
11
|
-
<link href=
|
|
12
|
-
<
|
|
7
|
+
<meta name="description" content="Clone, build, point any MCP client at one file. No signup.">
|
|
8
|
+
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='black'/%3E%3Cpath d='M16 6 26 24h-5l-5-10-5 10H6z' fill='white'/%3E%3C/svg%3E">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
11
|
+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
12
|
+
<meta name="color-scheme" content="light dark">
|
|
13
|
+
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
|
|
14
|
+
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
|
|
15
|
+
<script>(function(){try{var s=localStorage.getItem("acm-theme");document.documentElement.dataset.theme=s==="light"?"light":"dark"}catch(e){document.documentElement.dataset.theme="dark"}})();</script>
|
|
16
|
+
<link rel="stylesheet" href="./styles.css">
|
|
17
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
|
|
18
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
|
|
19
|
+
<script src="./app.js" defer></script>
|
|
13
20
|
</head>
|
|
14
21
|
<body>
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
<div class=
|
|
18
|
-
<
|
|
19
|
-
<
|
|
22
|
+
<a class="skip" href="#main">Skip to content</a>
|
|
23
|
+
<div id="progress"></div>
|
|
24
|
+
<nav class="nav"><div class="nav-in">
|
|
25
|
+
<a class="brand" href="./index.html"><span class="mark" aria-hidden="true"><svg viewBox="0 0 32 32"><path d="M16 5 27 25h-5.2L16 13.2 10.2 25H5Z" style="fill:var(--bg)"/><rect x="11" y="21.3" width="10" height="2.5" rx="1.25" style="fill:var(--muted2)"/></svg></span>
|
|
26
|
+
<span class="bname">aura-components-mcp<small>free catalogue · no login</small></span></a>
|
|
27
|
+
<div class="tabs" id="tabs"><a href="./index.html">Home</a><a href="./how.html">How it works</a><a href="./tools.html">Tools</a><a href="./compare.html">Compare</a><a href="./setup.html">Setup</a><a href="./docs.html">Docs</a></div>
|
|
28
|
+
<a class="ghbtn" href="https://github.com/swastiksingh-dev/Aura-Components-MCP" aria-label="GitHub"><svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg><span>GitHub</span></a>
|
|
29
|
+
<button class="iconbtn menubtn" id="menuBtn" aria-label="Menu">☰</button>
|
|
30
|
+
<button class="iconbtn" id="themeBtn" title="Toggle theme">☾</button>
|
|
20
31
|
</div></nav>
|
|
21
|
-
<
|
|
22
|
-
<div class=
|
|
32
|
+
<div class="mpanel" id="mpanel"><div class="moverlay" data-close></div><div class="msheet">
|
|
33
|
+
<div class="mhead"><span>Menu</span><button class="iconbtn" data-close aria-label="Close menu">✕</button></div>
|
|
34
|
+
<a href="./index.html" data-nav>Home</a><a href="./how.html" data-nav>How it works</a><a href="./tools.html" data-nav>Tools</a><a href="./compare.html" data-nav>Compare</a><a href="./setup.html" data-nav>Setup</a><a href="./docs.html" data-nav>Docs</a>
|
|
35
|
+
</div></div>
|
|
36
|
+
<header class="hero"><div class="hero-in">
|
|
37
|
+
<span class="badge"><i></i>setup · ~60 seconds</span>
|
|
38
|
+
<h1>In your agent<br><span class="grad">in a minute.</span></h1>
|
|
39
|
+
<p class="lede">Clone, build, point any client at one file. Nothing to sign up for.</p>
|
|
40
|
+
<div class="stats"><div class="stat"><b>2,495</b><span>components</span></div><div class="stat"><b>187</b><span>skills</span></div><div class="stat"><b>30,688</b><span>assets</span></div><div class="stat"><b>725</b><span>systems</span></div></div>
|
|
41
|
+
</div></header>
|
|
42
|
+
<main class="wrap" id="main">
|
|
43
|
+
<section class="sec"><div class="kicker">setup</div><h2>Three commands.</h2>
|
|
44
|
+
<div class="doc">
|
|
45
|
+
<h3>1 · Get the server — pick your way</h3>
|
|
46
|
+
<div class="ctabs"><button class="on" data-tab="clone">Clone</button><button data-tab="npm">npm</button><button data-tab="npx">npx</button></div>
|
|
47
|
+
<div class="code" data-pane="clone"><button class="copy" data-copy>Copy</button><pre>git clone https://github.com/swastiksingh-dev/Aura-Components-MCP.git
|
|
23
48
|
cd Aura-Components-MCP
|
|
24
49
|
npm run build
|
|
25
|
-
node ./dist/server.js</pre
|
|
26
|
-
<
|
|
27
|
-
|
|
50
|
+
node ./dist/server.js</pre></div>
|
|
51
|
+
<div class="code" data-pane="npm" hidden><button class="copy" data-copy>Copy</button><pre>npm install -g aura-components-mcp
|
|
52
|
+
aura-components-mcp</pre></div>
|
|
53
|
+
<div class="code" data-pane="npx" hidden><button class="copy" data-copy>Copy</button><pre>npx -y aura-components-mcp@latest</pre></div>
|
|
54
|
+
<p>If it prints <code>listening on stdio</code>, it works. Ctrl+C, then register. Package: <a href="https://www.npmjs.com/package/aura-components-mcp">npmjs.com/package/aura-components-mcp</a></p>
|
|
55
|
+
<h3>2 · Register — pick your client</h3>
|
|
56
|
+
<div class="ctabs"><button class="on" data-tab="claude">Claude Code</button><button data-tab="cursor">Cursor</button><button data-tab="opencode">OpenCode</button><button data-tab="codex">Codex / Cline</button></div>
|
|
57
|
+
<div class="code" data-pane="claude"><button class="copy" data-copy>Copy</button><pre>claude mcp add aura-components -- node ./dist/server.js</pre></div>
|
|
58
|
+
<div class="code" data-pane="cursor" hidden><button class="copy" data-copy>Copy</button><pre>// ~/.cursor/mcp.json — Cursor / Windsurf
|
|
59
|
+
{ "mcpServers": { "aura-components": { "command": "node", "args": ["./dist/server.js"] } } }</pre></div>
|
|
60
|
+
<div class="code" data-pane="opencode" hidden><button class="copy" data-copy>Copy</button><pre>// opencode.json — OpenCode
|
|
61
|
+
{ "mcp": { "aura-components": { "type": "local", "command": ["node", "./dist/server.js"] } } }</pre></div>
|
|
62
|
+
<div class="code" data-pane="codex" hidden><button class="copy" data-copy>Copy</button><pre>// Codex / Cline / Roo — same stdio pair
|
|
63
|
+
command: node · args: ["dist/server.js"]</pre></div>
|
|
64
|
+
<p>Installed via <code>npm -g</code>? Use command <code>aura-components-mcp</code> with no args. Prefer zero-install? Use command <code>npx</code>, args <code>["-y", "aura-components-mcp@latest"]</code>.</p>
|
|
65
|
+
<h3>3 · First prompt</h3>
|
|
66
|
+
<div class="code"><button class="copy" data-copy>Copy</button><pre>Check aura_status. Then recommend a starter kit for a dark cinematic portfolio (free only).</pre></div>
|
|
67
|
+
<div class="note">Trouble? <code>npm run verify</code> runs 18 live checks. Zero tools = path not absolute or client needs restart.</div>
|
|
68
|
+
</div></section></main>
|
|
69
|
+
<footer><div class="foot-grid">
|
|
70
|
+
<div class="foot-brand"><span class="bname">aura-components-mcp</span><p>Every free thing on Aura, one call away. Free only, no login, MIT.</p><span class="ver">v1.5.4 · 20 tools</span></div>
|
|
71
|
+
<div><h4>Product</h4><a href="./how.html">How it works</a><a href="./tools.html">All 20 tools</a><a href="./compare.html">vs official MCP</a></div>
|
|
72
|
+
<div><h4>Resources</h4><a href="./setup.html">Setup in a minute</a><a href="./docs.html">Docs, slowly</a><a href="https://www.aura.build/components">Aura catalogue</a></div>
|
|
73
|
+
<div><h4>Project</h4><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP">GitHub</a><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP/issues">Issues</a><a href="https://www.npmjs.com/package/aura-components-mcp">npm</a></div>
|
|
74
|
+
</div><div class="foot-in"><span><b>aura-components-mcp</b> by swastiksingh-dev · MIT</span><span class="sp"></span><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP">GitHub</a><a href="https://www.aura.build/components">Aura</a><span id="yr"></span></div></footer>
|
|
75
|
+
<button id="toTop" aria-label="Back to top">↑</button>
|
|
28
76
|
</body>
|
|
29
77
|
</html>
|
package/flow/styles.css
CHANGED
|
@@ -1,87 +1,378 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/* aura-components-mcp — Vercel Geist redesign (DESIGN.md tokens first) */
|
|
2
|
+
:root{
|
|
3
|
+
--bg:#000; --bg2:#0a0a0a; --card:#0a0a0a; --fg:#ededed;
|
|
4
|
+
--muted:#888; --muted2:#a1a1aa; --border:#1f1f1f; --border2:#333;
|
|
5
|
+
--acc:#ededed; --acc-soft:rgba(255,255,255,.08);
|
|
6
|
+
--code:#0a0a0a; --nav:rgba(0,0,0,.72);
|
|
7
|
+
--r-s:6px; --r-m:8px; --r-p:999px;
|
|
8
|
+
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,Inter,sans-serif;
|
|
9
|
+
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
|
|
10
|
+
}
|
|
11
|
+
html[data-theme="light"]{
|
|
12
|
+
--bg:#fff; --bg2:#fafafa; --card:#fff; --fg:#000;
|
|
13
|
+
--muted:#666; --muted2:#666; --border:#eaeaea; --border2:#d4d4d4;
|
|
14
|
+
--acc:#000; --acc-soft:rgba(0,0,0,.06);
|
|
15
|
+
--code:#fafafa; --nav:rgba(255,255,255,.78);
|
|
16
|
+
}
|
|
2
17
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
.
|
|
10
|
-
|
|
11
|
-
.
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
.
|
|
15
|
-
|
|
16
|
-
.
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
.
|
|
20
|
-
.
|
|
21
|
-
.
|
|
22
|
-
.
|
|
23
|
-
.
|
|
24
|
-
.
|
|
25
|
-
|
|
26
|
-
.
|
|
27
|
-
.
|
|
28
|
-
.
|
|
29
|
-
|
|
30
|
-
.
|
|
31
|
-
.
|
|
32
|
-
|
|
18
|
+
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
|
|
19
|
+
body{background:var(--bg);color:var(--fg);font-family:var(--font);
|
|
20
|
+
font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
|
|
21
|
+
::selection{background:var(--acc);color:#fff}
|
|
22
|
+
a{color:inherit}
|
|
23
|
+
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
|
|
24
|
+
.wrap{max-width:1024px;margin:0 auto;padding:0 24px}
|
|
25
|
+
/* nav — sticky blur, 64px, geist border */
|
|
26
|
+
.nav{position:sticky;top:0;z-index:50;background:var(--nav);
|
|
27
|
+
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
|
|
28
|
+
border-bottom:1px solid var(--border)}
|
|
29
|
+
.nav-in{max-width:1024px;margin:0 auto;padding:0 24px;height:64px;
|
|
30
|
+
display:flex;align-items:center;gap:12px}
|
|
31
|
+
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
|
|
32
|
+
.mark{width:30px;height:30px;border-radius:8px;background:#000;
|
|
33
|
+
border:1px solid var(--border2);display:grid;place-items:center;flex:none}
|
|
34
|
+
html[data-theme="light"] .mark{background:#000;border-color:#000}
|
|
35
|
+
.mark svg{width:18px;height:18px;display:block}
|
|
36
|
+
.bname{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
|
|
37
|
+
.bname small{display:block;font-weight:400;color:var(--muted);font-size:12px;font-family:var(--mono)}
|
|
38
|
+
.tabs{display:flex;gap:2px;margin-left:auto;align-items:center}
|
|
39
|
+
.tabs a{font-size:14px;color:var(--muted);text-decoration:none;
|
|
40
|
+
padding:8px 12px;border-radius:var(--r-s);transition:color .15s,background .15s}
|
|
41
|
+
.tabs a:hover{color:var(--fg);background:var(--acc-soft)}
|
|
42
|
+
.tabs a.on{color:var(--fg);background:var(--acc-soft)}
|
|
43
|
+
.iconbtn{width:36px;height:36px;border-radius:var(--r-s);flex:none;cursor:pointer;
|
|
44
|
+
border:1px solid var(--border);background:var(--card);color:var(--fg);font-size:15px}
|
|
45
|
+
.iconbtn:hover{border-color:var(--border2)}
|
|
46
|
+
.menubtn{display:none}
|
|
47
|
+
/* hero — css grid + glow only (no webgl, faster) */
|
|
48
|
+
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
|
|
49
|
+
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
|
|
50
|
+
background-image:linear-gradient(var(--border) 1px,transparent 1px),
|
|
51
|
+
linear-gradient(90deg,var(--border) 1px,transparent 1px);
|
|
52
|
+
background-size:56px 56px;opacity:.5;
|
|
53
|
+
mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 30%,transparent 75%);
|
|
54
|
+
-webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 30%,transparent 75%)}
|
|
55
|
+
.hero::after{content:"";position:absolute;left:50%;top:-180px;width:640px;height:380px;
|
|
56
|
+
transform:translateX(-50%);pointer-events:none;
|
|
57
|
+
background:radial-gradient(closest-side,rgba(0,112,243,.28),transparent 70%)}
|
|
58
|
+
.hero-in{position:relative;max-width:1024px;margin:0 auto;padding:96px 24px 64px;text-align:center}
|
|
59
|
+
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
|
|
60
|
+
font-size:12.5px;color:var(--muted);border:1px solid var(--border);
|
|
61
|
+
background:var(--card);border-radius:var(--r-p);padding:6px 14px}
|
|
62
|
+
.badge i{width:7px;height:7px;border-radius:50%;background:#07c983;flex:none;
|
|
63
|
+
box-shadow:0 0 8px rgba(7,201,131,.8)}
|
|
64
|
+
.hero h1{font-size:clamp(40px,7vw,72px);font-weight:800;line-height:1.02;
|
|
65
|
+
letter-spacing:-.045em;margin:24px 0 16px}
|
|
66
|
+
.hero h1 .grad{background:linear-gradient(180deg,var(--fg),var(--muted2));
|
|
67
|
+
-webkit-background-clip:text;background-clip:text;color:transparent}
|
|
68
|
+
.lede{font-size:17px;line-height:28px;color:var(--muted);max-width:600px;margin:0 auto}
|
|
69
|
+
.lede code,.muted code,.doc code{font-family:var(--mono);font-size:.85em;
|
|
70
|
+
background:var(--acc-soft);border:1px solid var(--border);
|
|
71
|
+
border-radius:6px;padding:1px 7px;color:var(--fg)}
|
|
72
|
+
.cta{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}
|
|
73
|
+
.btn{font:inherit;font-size:14px;font-weight:500;border-radius:var(--r-s);
|
|
74
|
+
padding:0 22px;height:44px;display:inline-flex;align-items:center;gap:8px;
|
|
75
|
+
text-decoration:none;border:1px solid transparent;cursor:pointer;
|
|
76
|
+
transition:transform .15s,border-color .15s,background .15s}
|
|
77
|
+
.btn-pri{background:var(--fg);color:var(--bg)}
|
|
78
|
+
html[data-theme="light"] .btn-pri{background:#000;color:#fff}
|
|
79
|
+
.btn-pri:hover{transform:translateY(-1px)}
|
|
80
|
+
.btn-sec{background:transparent;color:var(--fg);border-color:var(--border2)}
|
|
81
|
+
.btn-sec:hover{border-color:var(--muted)}
|
|
82
|
+
.stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:720px;
|
|
83
|
+
margin:44px auto 0;border:1px solid var(--border);border-radius:var(--r-m);
|
|
84
|
+
background:var(--card);overflow:hidden}
|
|
85
|
+
.stat{padding:18px 8px;border-left:1px solid var(--border)}
|
|
33
86
|
.stat:first-child{border-left:0}
|
|
34
|
-
.stat b{font-size:
|
|
35
|
-
.stat span{font-size:
|
|
36
|
-
/*
|
|
87
|
+
.stat b{font-size:22px;display:block;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
|
|
88
|
+
.stat span{font-size:12.5px;color:var(--muted);font-family:var(--mono)}
|
|
89
|
+
/* sections */
|
|
37
90
|
.sec{padding:72px 0 8px}
|
|
38
|
-
.
|
|
39
|
-
|
|
40
|
-
.
|
|
41
|
-
|
|
42
|
-
.
|
|
43
|
-
.
|
|
44
|
-
.
|
|
91
|
+
.kicker{font-family:var(--mono);font-size:12px;text-transform:uppercase;
|
|
92
|
+
letter-spacing:.1em;color:var(--muted);text-align:center}
|
|
93
|
+
.sec h2{font-size:clamp(28px,4vw,38px);font-weight:700;letter-spacing:-.03em;
|
|
94
|
+
text-align:center;margin:12px 0 8px}
|
|
95
|
+
.sub{color:var(--muted);font-size:15px;text-align:center;max-width:560px;margin:0 auto}
|
|
96
|
+
.sub a{color:var(--acc)}
|
|
97
|
+
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
|
|
98
|
+
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-m);
|
|
99
|
+
padding:22px;transition:border-color .15s,transform .15s}
|
|
100
|
+
.card:hover{border-color:var(--border2);transform:translateY(-2px)}
|
|
101
|
+
.card code{font-family:var(--mono);font-size:12.5px;color:var(--acc)}
|
|
102
|
+
.card h3{font-size:15px;margin:8px 0 4px;letter-spacing:-.01em}
|
|
103
|
+
.card p{font-size:13.5px;color:var(--muted);line-height:21px}
|
|
104
|
+
.card.new{position:relative}
|
|
105
|
+
.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
|
|
106
|
+
letter-spacing:.07em;color:var(--acc);border:1px solid var(--border);
|
|
107
|
+
border-radius:var(--r-p);padding:2px 9px;margin-top:12px;background:var(--acc-soft)}
|
|
108
|
+
.flow{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:stretch;margin:32px 0 8px}
|
|
109
|
+
.fnode{background:var(--card);border:1px solid var(--border);border-radius:var(--r-m);
|
|
110
|
+
padding:24px 16px;text-align:center}
|
|
45
111
|
.fnode.live{border-color:var(--acc)}
|
|
46
|
-
.
|
|
47
|
-
|
|
48
|
-
.fnode
|
|
49
|
-
.
|
|
50
|
-
.wire{
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
.
|
|
55
|
-
.
|
|
56
|
-
.
|
|
57
|
-
.
|
|
58
|
-
.
|
|
59
|
-
|
|
60
|
-
.
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
.
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
.
|
|
67
|
-
.
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
.
|
|
71
|
-
|
|
72
|
-
.
|
|
73
|
-
.cmp{width:100%;border-collapse:collapse;margin-top:24px;font-size:13px;background:var(--card);border:1px solid var(--hair);border-radius:12px;overflow:hidden}
|
|
74
|
-
.cmp th,.cmp td{padding:12px 14px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
|
|
75
|
-
.cmp th{font-size:11px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;color:var(--mute)}
|
|
112
|
+
.fnum{font-family:var(--mono);font-size:11px;color:var(--muted);display:block;margin-bottom:8px}
|
|
113
|
+
.fnode h3{font-size:14.5px;margin-bottom:4px}
|
|
114
|
+
.fnode small{font-size:12.5px;color:var(--muted)}
|
|
115
|
+
.wire{position:relative;align-self:center;height:1px;background:var(--border2)}
|
|
116
|
+
.wire::after{content:"";position:absolute;top:50%;left:0;width:7px;height:7px;border-radius:50%;
|
|
117
|
+
background:var(--acc);transform:translate(-50%,-50%);animation:go 1.8s linear infinite}
|
|
118
|
+
@keyframes go{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
|
|
119
|
+
.doc{max-width:720px;margin:28px auto 0;display:grid;gap:14px}
|
|
120
|
+
.doc h3{font-size:16px;letter-spacing:-.01em;margin-top:10px}
|
|
121
|
+
.doc p,.doc li{font-size:14.5px;color:var(--muted);line-height:23px}
|
|
122
|
+
.doc b,.doc strong{color:var(--fg);font-weight:600}
|
|
123
|
+
.doc ol,.doc ul{margin:4px 0 0 20px;display:grid;gap:6px}
|
|
124
|
+
.code{position:relative;background:var(--code);border:1px solid var(--border);
|
|
125
|
+
border-radius:var(--r-m);margin-top:10px;overflow:hidden}
|
|
126
|
+
.code pre{padding:16px;font-size:13px;line-height:21px;overflow-x:auto;
|
|
127
|
+
font-family:var(--mono);color:var(--fg);white-space:pre}
|
|
128
|
+
html[data-theme="dark"] .code pre{color:#ededed}
|
|
129
|
+
.copy{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:12px;
|
|
130
|
+
border:1px solid var(--border);background:var(--bg2);color:var(--muted);
|
|
131
|
+
border-radius:var(--r-s);padding:5px 11px;cursor:pointer}
|
|
132
|
+
.copy:hover{color:var(--fg);border-color:var(--border2)}
|
|
133
|
+
.note{border:1px solid var(--border);border-left:3px solid var(--acc);
|
|
134
|
+
border-radius:var(--r-s);background:var(--card);padding:14px 16px;
|
|
135
|
+
font-size:13.5px;color:var(--muted);line-height:21px}
|
|
136
|
+
.cmp{width:100%;border-collapse:separate;border-spacing:0;margin-top:24px;
|
|
137
|
+
font-size:13.5px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden}
|
|
138
|
+
.cmp th,.cmp td{padding:13px 16px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
|
|
76
139
|
.cmp tr:last-child td{border-bottom:0}
|
|
77
|
-
.cmp
|
|
78
|
-
.
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
.foot-in
|
|
82
|
-
|
|
83
|
-
.
|
|
140
|
+
.cmp th{font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
|
|
141
|
+
.yes{color:#07c983;font-weight:600}
|
|
142
|
+
.no{color:var(--muted)}
|
|
143
|
+
footer{border-top:1px solid var(--border);margin-top:80px}
|
|
144
|
+
.foot-in{max-width:1024px;margin:0 auto;padding:28px 24px;display:flex;gap:18px;
|
|
145
|
+
font-size:13.5px;color:var(--muted);flex-wrap:wrap;align-items:center}
|
|
146
|
+
.foot-in a{color:var(--muted);text-decoration:none}
|
|
147
|
+
.foot-in a:hover{color:var(--fg)}
|
|
148
|
+
.foot-in .sp{margin-left:auto;font-family:var(--mono);font-size:12px}
|
|
149
|
+
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
|
|
84
150
|
.reveal.in{opacity:1;transform:none}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
.
|
|
151
|
+
.skip{position:absolute;left:-999px;top:0;background:var(--fg);color:var(--bg);
|
|
152
|
+
padding:8px 14px;border-radius:0 0 6px 0;font-size:13px;z-index:99}
|
|
153
|
+
.skip:focus{left:0}
|
|
154
|
+
@media(max-width:860px){
|
|
155
|
+
.tabs{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;
|
|
156
|
+
background:var(--bg);border-bottom:1px solid var(--border);padding:8px 16px 14px;gap:0}
|
|
157
|
+
.tabs a{padding:12px 8px;font-size:15px}
|
|
158
|
+
.menubtn{display:inline-flex;align-items:center;justify-content:center}
|
|
159
|
+
.hero-in{padding:72px 20px 52px}
|
|
160
|
+
.grid3{grid-template-columns:1fr}
|
|
161
|
+
.flow{grid-template-columns:1fr;gap:10px}
|
|
162
|
+
.wire{width:1px;height:28px;margin:0 auto}
|
|
163
|
+
.wire::after{animation-name:godown}
|
|
164
|
+
.stats{grid-template-columns:1fr 1fr}
|
|
165
|
+
.stat:nth-child(3){border-left:0}
|
|
166
|
+
.stat:nth-child(n+3){border-top:1px solid var(--border)}
|
|
167
|
+
}
|
|
168
|
+
@keyframes godown{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
|
|
169
|
+
@media(prefers-reduced-motion:reduce){
|
|
170
|
+
*,*::before,*::after{animation:none!important;transition:none!important}
|
|
171
|
+
.reveal{opacity:1;transform:none}
|
|
172
|
+
html{scroll-behavior:auto}
|
|
173
|
+
}
|
|
174
|
+
/* ---- v2: Geist type + flash-free smooth theme ---- */
|
|
175
|
+
:root{color-scheme:light dark;
|
|
176
|
+
--font:"Geist",Inter,"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
|
177
|
+
--mono:"Geist Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
|
|
178
|
+
body,.nav,.card,.fnode,.code,.cmp,.iconbtn,.btn,.badge,.note,.stat{transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}
|
|
179
|
+
html{scroll-padding-top:84px}
|
|
180
|
+
section[id],.sec[id]{scroll-margin-top:84px}
|
|
181
|
+
::view-transition-old(root),::view-transition-new(root){animation-duration:220ms}
|
|
182
|
+
kbd{font-family:var(--mono);font-size:11.5px;border:1px solid var(--border);
|
|
183
|
+
border-bottom-width:2px;border-radius:6px;padding:1px 7px;background:var(--card)}
|
|
184
|
+
/* ---- v2b: balanced monochrome glass facets (Aura FBA1C recipe, dark-mono) ---- */
|
|
185
|
+
.nav{background:color-mix(in srgb,var(--bg) 72%,transparent);
|
|
186
|
+
backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}
|
|
187
|
+
.nav.scrolled{border-bottom-color:var(--border2)}
|
|
188
|
+
@supports not (backdrop-filter:blur(1px)){.nav{background:var(--bg)}}
|
|
189
|
+
.card,.fnode{position:relative;overflow:hidden;
|
|
190
|
+
background:linear-gradient(rgba(255,255,255,.055),rgba(255,255,255,.015) 40%,transparent),var(--card);
|
|
191
|
+
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 40px -24px rgba(0,0,0,.55)}
|
|
192
|
+
html[data-theme="light"] .card,html[data-theme="light"] .fnode{
|
|
193
|
+
background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.25),transparent),var(--card);
|
|
194
|
+
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 40px -28px rgba(0,0,0,.25)}
|
|
195
|
+
.card::before,.fnode::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
|
|
196
|
+
background:radial-gradient(320px 160px at var(--mx,50%) -10%,rgba(255,255,255,.12),transparent 70%)}
|
|
197
|
+
.card:hover::before,.fnode:hover::before{opacity:1}
|
|
198
|
+
.card:hover,.fnode.live{border-color:transparent;transform:translateY(-2px)}
|
|
199
|
+
.badge{background:color-mix(in srgb,var(--card) 60%,transparent);
|
|
200
|
+
backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
|
|
201
|
+
.stats{background:linear-gradient(rgba(255,255,255,.05),transparent 50%),var(--card);
|
|
202
|
+
box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
|
|
203
|
+
.btn-pri{box-shadow:0 8px 24px -12px rgba(255,255,255,.45)}
|
|
204
|
+
html[data-theme="light"] .btn-pri{box-shadow:0 8px 24px -12px rgba(0,0,0,.5)}
|
|
205
|
+
.btn-sec{background:color-mix(in srgb,var(--card) 55%,transparent);
|
|
206
|
+
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
|
|
207
|
+
/* ---- v2c: recreated logo, footer grid, client tabs, toc ---- */
|
|
208
|
+
.mark{width:32px;height:32px;border-radius:9px;background:var(--fg);display:grid;place-items:center;flex:none;
|
|
209
|
+
box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 14px -6px rgba(0,0,0,.6);transition:transform .25s}
|
|
210
|
+
.brand:hover .mark{transform:rotate(-6deg) scale(1.05)}
|
|
211
|
+
.mark svg{width:19px;height:19px;display:block}
|
|
212
|
+
.ghbtn{font:inherit;font-size:13px;font-weight:500;text-decoration:none;color:var(--fg);
|
|
213
|
+
border:1px solid var(--border2);border-radius:var(--r-s);padding:0 13px;height:36px;
|
|
214
|
+
display:inline-flex;align-items:center;gap:7px;background:var(--card);flex:none}
|
|
215
|
+
.ghbtn:hover{border-color:var(--muted)}
|
|
216
|
+
.ghbtn svg{width:15px;height:15px}
|
|
217
|
+
.ctabs{display:flex;gap:4px;margin-top:14px;border:1px solid var(--border);border-radius:var(--r-m);
|
|
218
|
+
padding:4px;background:var(--card);width:max-content;max-width:100%;flex-wrap:wrap}
|
|
219
|
+
.ctabs button{font:inherit;font-size:13px;font-weight:500;color:var(--muted);background:transparent;
|
|
220
|
+
border:0;border-radius:var(--r-s);padding:8px 15px;cursor:pointer}
|
|
221
|
+
.ctabs button.on{background:var(--fg);color:var(--bg)}
|
|
222
|
+
.ctabs button:not(.on):hover{color:var(--fg)}
|
|
223
|
+
.toc{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:22px}
|
|
224
|
+
.toc a{font-family:var(--mono);font-size:12px;color:var(--muted);text-decoration:none;
|
|
225
|
+
border:1px solid var(--border);border-radius:var(--r-p);padding:6px 14px;background:var(--card)}
|
|
226
|
+
.toc a:hover{color:var(--fg);border-color:var(--border2)}
|
|
227
|
+
.foot-grid{max-width:1024px;margin:0 auto;padding:52px 24px 8px;display:grid;
|
|
228
|
+
grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
|
|
229
|
+
.foot-grid h4{font-size:12px;font-family:var(--mono);text-transform:uppercase;
|
|
230
|
+
letter-spacing:.08em;color:var(--muted);margin-bottom:12px;font-weight:500}
|
|
231
|
+
.foot-grid a{display:block;font-size:13.5px;color:var(--muted);text-decoration:none;padding:4px 0}
|
|
232
|
+
.foot-grid a:hover{color:var(--fg)}
|
|
233
|
+
.foot-brand p{font-size:13px;color:var(--muted);margin-top:10px;max-width:260px;line-height:21px}
|
|
234
|
+
.ver{font-family:var(--mono);font-size:11px;border:1px solid var(--border);border-radius:var(--r-p);
|
|
235
|
+
padding:2px 10px;color:var(--muted);display:inline-block;margin-top:12px}
|
|
236
|
+
/* ---- v2d: hero float, mobile slide-in, reduced motion ---- */
|
|
237
|
+
.hero-badge-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:4px}
|
|
238
|
+
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
|
|
239
|
+
.hero .badge{animation:floaty 6s ease-in-out 1.4s infinite}
|
|
240
|
+
.hero-badge-row .badge:nth-child(2){animation-delay:4.4s}
|
|
241
|
+
.stat b{display:block;font-variant-numeric:tabular-nums}
|
|
242
|
+
.mpanel{position:fixed;inset:0;z-index:60;display:none}
|
|
243
|
+
.mpanel.open{display:block}
|
|
244
|
+
.moverlay{position:absolute;inset:0;background:rgba(0,0,0,.6);
|
|
245
|
+
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
|
|
246
|
+
html[data-theme="light"] .moverlay{background:rgba(255,255,255,.6)}
|
|
247
|
+
.msheet{position:absolute;right:0;top:0;bottom:0;width:min(340px,88vw);background:var(--bg2);
|
|
248
|
+
border-left:1px solid var(--border);padding:20px;display:flex;flex-direction:column;gap:4px;
|
|
249
|
+
transform:translateX(100%);transition:transform .3s ease;overflow-y:auto}
|
|
250
|
+
.mpanel.open .msheet{transform:none}
|
|
251
|
+
.msheet a{font-size:16px;color:var(--muted);text-decoration:none;padding:12px;border-radius:var(--r-s)}
|
|
252
|
+
.msheet a:hover,.msheet a.on{color:var(--fg);background:var(--acc-soft)}
|
|
253
|
+
@media(max-width:860px){.ghbtn span{display:none}.foot-grid{grid-template-columns:1fr 1fr}}
|
|
254
|
+
@media(prefers-reduced-motion:reduce){
|
|
255
|
+
*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
|
|
256
|
+
html{scroll-behavior:auto!important}}
|
|
257
|
+
/* ---- v3: Ethereal Minimal System (free DESIGN.md, monochrome, no blue) ---- */
|
|
258
|
+
:root{--acc:#ededed;--acc-soft:rgba(255,255,255,.08);--beam:rgba(255,255,255,.9);
|
|
259
|
+
--surface:#191c21;--glow:rgba(255,255,255,.09)}
|
|
260
|
+
html[data-theme="light"]{--acc:#000;--acc-soft:rgba(0,0,0,.06);--beam:rgba(0,0,0,.85);
|
|
261
|
+
--surface:#fff;--glow:rgba(0,0,0,.06)}
|
|
262
|
+
::selection{background:#27272a;color:#fff}
|
|
263
|
+
html[data-theme="light"] ::selection{background:#e4e4e7;color:#000}
|
|
264
|
+
:focus-visible{outline:2px solid var(--muted2)}
|
|
265
|
+
.card code{color:var(--fg)}
|
|
266
|
+
.sub a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border2)}
|
|
267
|
+
.sub a:hover{text-decoration-color:var(--fg)}
|
|
268
|
+
.tag{color:var(--fg)}
|
|
269
|
+
.badge i{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9)}
|
|
270
|
+
html[data-theme="light"] .badge i{background:#000;box-shadow:0 0 8px rgba(0,0,0,.4)}
|
|
271
|
+
.wire::after{background:var(--beam)}
|
|
272
|
+
.hero::after{background:radial-gradient(closest-side,var(--glow),transparent 70%)}
|
|
273
|
+
/* flashlight cards — border beam follows cursor (Ethereal recipe) */
|
|
274
|
+
.card,.fnode{border:1px solid transparent;background:
|
|
275
|
+
linear-gradient(var(--card),var(--card)) padding-box,
|
|
276
|
+
radial-gradient(320px circle at var(--fx,50%) var(--fy,-20%),rgba(255,255,255,.35),rgba(255,255,255,.06) 45%,transparent 70%) border-box;
|
|
277
|
+
box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
|
|
278
|
+
html[data-theme="light"] .card,html[data-theme="light"] .fnode{background:
|
|
279
|
+
linear-gradient(var(--card),var(--card)) padding-box,
|
|
280
|
+
radial-gradient(320px circle at var(--fx,50%) var(--fy,-20%),rgba(0,0,0,.22),rgba(0,0,0,.06) 45%,transparent 70%) border-box;
|
|
281
|
+
box-shadow:0 24px 48px -28px rgba(0,0,0,.25)}
|
|
282
|
+
.card::before,.fnode::before{background:radial-gradient(280px 140px at var(--fx,50%) 0%,rgba(255,255,255,.09),transparent 70%)}
|
|
283
|
+
html[data-theme="light"] .card::before,html[data-theme="light"] .fnode::before{background:radial-gradient(280px 140px at var(--fx,50%) 0%,rgba(0,0,0,.05),transparent 70%)}
|
|
284
|
+
/* v3: monochrome buttons (732 recipe), nicer links, animated bg layers */
|
|
285
|
+
.btn-sec{border-color:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);position:relative;overflow:hidden}
|
|
286
|
+
html[data-theme="light"] .btn-sec{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
|
|
287
|
+
.btn-sec::after{content:"";position:absolute;bottom:0;left:50%;height:1px;width:70%;
|
|
288
|
+
transform:translateX(-50%);opacity:.25;transition:opacity .4s;
|
|
289
|
+
background:linear-gradient(90deg,transparent,#fff,transparent)}
|
|
290
|
+
html[data-theme="light"] .btn-sec::after{background:linear-gradient(90deg,transparent,#000,transparent)}
|
|
291
|
+
.btn-sec:hover::after{opacity:.9}
|
|
292
|
+
.btn-sec:hover{transform:translateY(-1px)}
|
|
293
|
+
.foot-grid a{position:relative;transition:color .2s,padding-left .2s}
|
|
294
|
+
.foot-grid a:hover{padding-left:14px}
|
|
295
|
+
.foot-grid a:hover::before{content:"\2192";position:absolute;left:0;color:var(--muted2)}
|
|
296
|
+
.foot-grid a[href^="http"]::after{content:"\2197";font-size:.8em;margin-left:5px;color:var(--muted)}
|
|
297
|
+
#bg-net{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
|
|
298
|
+
body{position:relative}
|
|
299
|
+
.nav,.hero,.wrap,footer{position:relative;z-index:1}
|
|
300
|
+
.hero::before{animation:gridrift 60s linear infinite}
|
|
301
|
+
@keyframes gridrift{to{background-position:56px 56px,56px 56px}}
|
|
302
|
+
.hero .badge:nth-child(2) i{background:var(--muted2);box-shadow:none}
|
|
303
|
+
.note a,.doc a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border2)}
|
|
304
|
+
.doc .cta{margin-top:18px}
|
|
305
|
+
/* ---- v4: dark-always panel, scroll progress, marquee, toTop ---- */
|
|
306
|
+
#progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:70;
|
|
307
|
+
background:var(--fg);transform:scaleX(0);transform-origin:0 50%}
|
|
308
|
+
.msheet{background:rgba(10,10,10,.86);color:#ededed;border-left:1px solid #262626;
|
|
309
|
+
backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%)}
|
|
310
|
+
.mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
|
|
311
|
+
.mhead span{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#888}
|
|
312
|
+
.mhead .iconbtn{background:#141414;border-color:#2a2a2a;color:#ededed}
|
|
313
|
+
.msheet a{color:#a1a1aa}
|
|
314
|
+
.msheet a:hover,.msheet a.on{color:#fff;background:rgba(255,255,255,.08)}
|
|
315
|
+
.marquee{border-top:1px solid var(--border);border-bottom:1px solid var(--border);
|
|
316
|
+
overflow:hidden;position:relative;z-index:1;background:var(--bg)}
|
|
317
|
+
.mtrack{display:flex;gap:0;width:max-content;padding:13px 0;
|
|
318
|
+
animation:mscroll 32s linear infinite}
|
|
319
|
+
.marquee:hover .mtrack{animation-play-state:paused}
|
|
320
|
+
.mtrack span{font-family:var(--mono);font-size:12.5px;color:var(--muted);padding:0 22px;white-space:nowrap}
|
|
321
|
+
.mtrack span b{color:var(--fg);font-weight:500}
|
|
322
|
+
@keyframes mscroll{to{transform:translateX(-50%)}}
|
|
323
|
+
#toTop{position:fixed;right:22px;bottom:22px;z-index:60;width:42px;height:42px;border-radius:50%;
|
|
324
|
+
border:1px solid var(--border2);background:var(--card);color:var(--fg);font-size:17px;cursor:pointer;
|
|
325
|
+
opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s}
|
|
326
|
+
#toTop.show{opacity:1;transform:none;pointer-events:auto}
|
|
327
|
+
#toTop:hover{border-color:var(--muted)}
|
|
328
|
+
@media(prefers-reduced-motion:reduce){.mtrack{animation:none}}
|
|
329
|
+
/* ---- v5: monochrome scrollbars + bulletproof primary button ---- */
|
|
330
|
+
html{scrollbar-width:thin;scrollbar-color:#3a3a3a #000}
|
|
331
|
+
html[data-theme="light"]{scrollbar-color:#c9c9c9 #fafafa}
|
|
332
|
+
::-webkit-scrollbar{width:10px;height:10px}
|
|
333
|
+
::-webkit-scrollbar-track{background:#000}
|
|
334
|
+
::-webkit-scrollbar-thumb{background:#2e2e2e;border-radius:8px;border:2px solid #000}
|
|
335
|
+
::-webkit-scrollbar-thumb:hover{background:#4a4a4a}
|
|
336
|
+
::-webkit-scrollbar-corner{background:#000}
|
|
337
|
+
html[data-theme="light"] ::-webkit-scrollbar-track{background:#fafafa}
|
|
338
|
+
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#d4d4d4;border:2px solid #fafafa}
|
|
339
|
+
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#a3a3a3}
|
|
340
|
+
html[data-theme="light"] ::-webkit-scrollbar-corner{background:#fafafa}
|
|
341
|
+
a.btn-pri{color:var(--bg)}
|
|
342
|
+
html[data-theme="light"] a.btn-pri{color:#fff}
|
|
343
|
+
@media (forced-colors:active){.btn-pri{forced-color-adjust:none}}
|
|
344
|
+
/* ---- v6: cursor aura, magnetic, letter wave, tilt, nav hide ---- */
|
|
345
|
+
#cursor,#aura{position:fixed;top:0;left:0;z-index:90;pointer-events:none;border-radius:50%}
|
|
346
|
+
#cursor{width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;mix-blend-mode:difference}
|
|
347
|
+
#aura{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid #fff;mix-blend-mode:difference;opacity:.7}
|
|
348
|
+
@media(pointer:coarse){#cursor,#aura{display:none}}
|
|
349
|
+
.nav{transition:transform .35s ease,background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}
|
|
350
|
+
.nav.hide{transform:translateY(-100%)}
|
|
351
|
+
.hero .btn{transition:background-color .15s,border-color .15s,box-shadow .3s}
|
|
352
|
+
.btn .ch{display:inline-block;will-change:transform}
|
|
353
|
+
.hero .stats{will-change:transform}
|
|
354
|
+
@media(prefers-reduced-motion:reduce){#cursor,#aura{display:none}}
|
|
355
|
+
/* ---- v7: Space Grotesk display + story air + chapters ---- */
|
|
356
|
+
:root{--disp:"Space Grotesk","Geist",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
|
|
357
|
+
.hero h1,.sec h2{font-family:var(--disp);letter-spacing:-.02em}
|
|
358
|
+
.hero-in{padding:120px 24px 88px}
|
|
359
|
+
.lede{font-size:18px;line-height:30px}
|
|
360
|
+
.sec{padding:112px 0 8px}
|
|
361
|
+
.grid3{gap:20px;margin-top:36px}
|
|
362
|
+
.card{padding:28px}
|
|
363
|
+
.doc{max-width:680px;gap:20px}
|
|
364
|
+
.flow{margin:44px 0 8px}
|
|
365
|
+
.hero-badge-row{margin-bottom:8px}
|
|
366
|
+
.wrap{counter-reset:chap}
|
|
367
|
+
.sec{counter-increment:chap;position:relative}
|
|
368
|
+
.sec::before{content:"0" counter(chap);position:absolute;top:96px;right:24px;
|
|
369
|
+
font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--muted);opacity:.75}
|
|
370
|
+
.foot-grid{padding:72px 24px 8px}
|
|
371
|
+
footer{margin-top:112px}
|
|
372
|
+
.mtrack{padding:16px 0}
|
|
373
|
+
@media(max-width:860px){
|
|
374
|
+
.hero-in{padding:88px 20px 64px}
|
|
375
|
+
.sec{padding:72px 0 8px}
|
|
376
|
+
.sec::before{top:60px}
|
|
377
|
+
.card{padding:22px}
|
|
378
|
+
}
|