@oracle-agent/oracle 0.35.38 → 0.35.40
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 +1 -1
- package/dist/agent-sessions.mjs +13 -13
- package/dist/assets/skills/blocked-page-recovery.md +16 -0
- package/dist/assets/skills/browser-use.md +19 -0
- package/dist/assets/skills/chrome-profile-browser.md +21 -0
- package/dist/assets/skills/oracle-agentic-crypto/SKILL.md +27 -0
- package/dist/assets/skills/oracle-desk-product/SKILL.md +1 -1
- package/dist/assets/skills/oracle-x402/SKILL.md +54 -11
- package/dist/assets/skills/web-form-filling.md +19 -0
- package/dist/assets/skills/web-research.md +17 -0
- package/dist/assets/skills/x-read-browser.md +17 -0
- package/dist/assets/skills/xurl.md +1 -1
- package/dist/bin/desk-server.mjs +30 -30
- package/dist/bin/oracle-data-mcp.mjs +17 -13
- package/dist/bin/oracle-public-server.mjs +1 -1
- package/dist/bin/oracle-route.mjs +26 -14
- package/dist/bin/oracle-scan.mjs +4 -4
- package/dist/bin/oracle.mjs +11 -10
- package/dist/cli/commands/agent-session.mjs +18 -18
- package/dist/cli/commands/auth.mjs +20 -17
- package/dist/cli/commands/chat.mjs +231 -228
- package/dist/cli/commands/data.mjs +5 -5
- package/dist/cli/commands/doctor.mjs +1 -1
- package/dist/cli/commands/eval.mjs +154 -152
- package/dist/cli/commands/extension-policy.mjs +1 -1
- package/dist/cli/commands/follow.mjs +57 -19
- package/dist/cli/commands/governance-prepare.mjs +1 -1
- package/dist/cli/commands/init.mjs +2 -2
- package/dist/cli/commands/model.mjs +235 -232
- package/dist/cli/commands/public.mjs +3 -3
- package/dist/cli/commands/route.mjs +1 -1
- package/dist/cli/commands/setup.mjs +62 -59
- package/dist/cli/commands/signer.mjs +4 -4
- package/dist/cli/commands/upgrade.mjs +2 -2
- package/dist/cli/commands/x402.mjs +19 -0
- package/dist/control-plane/index.mjs +1 -1
- package/dist/data/desk-data.mjs +28 -28
- package/dist/index.mjs +46 -46
- package/dist/local-signer/runtime.mjs +6 -6
- package/dist/teams/index.mjs +6 -5
- package/dist/tui/standalone-client.mjs +84 -82
- package/package.json +1 -1
- package/public/eval-report.json +2 -2
- package/public/oracle-splash/docs/browser-and-web/index.html +32 -0
- package/public/oracle-splash/docs/connectors/index.html +18 -0
- package/public/oracle-splash/docs/docs.css +21 -0
- package/public/oracle-splash/docs/docs.js +108 -0
- package/public/oracle-splash/docs/getting-started/index.html +36 -0
- package/public/oracle-splash/docs/index.html +26 -0
- package/public/oracle-splash/docs/reference/index.html +20 -0
- package/public/oracle-splash/docs/security/index.html +19 -0
- package/public/oracle-splash/docs/using-oracle/index.html +32 -0
- package/public/oracle-splash/download/index.html +2584 -0
- package/public/oracle-splash/index.html +313 -942
- package/public/oracle-splash/pricing/index.html +2570 -0
- package/public/oracle-splash/security/index.html +2574 -0
- package/public/oracle-splash/what-it-does/index.html +2608 -0
- package/public/oracle-splash/where-it-works/index.html +2635 -0
- package/server.json +2 -2
- package/dist/assets/equities-fixtures/bridge_routes.json +0 -159
|
@@ -0,0 +1,2574 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Security and custody | ORACLE</title>
|
|
7
|
+
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
8
|
+
<link rel="shortcut icon" href="/favicon.ico">
|
|
9
|
+
<meta name="description" content="Public routing stays unsigned. Self-hosted keys stay local behind bound grants, evidence, and fail-closed policy.">
|
|
10
|
+
<meta name="theme-color" content="#0B1018" />
|
|
11
|
+
<meta name="robots" content="index,follow" />
|
|
12
|
+
<meta property="og:title" content="ORACLE | The all-in-one multichain agent">
|
|
13
|
+
<meta property="og:description" content="Trade, research, and build across Oracle's working chain surfaces, with extensible EVM support and self-custodial signing.">
|
|
14
|
+
<meta property="og:image" content="https://oracle.demi.la/assets/hero/orb-poster.jpg">
|
|
15
|
+
<meta property="og:image:width" content="900">
|
|
16
|
+
<meta property="og:image:height" content="900">
|
|
17
|
+
<meta property="og:url" content="https://oracle.demi.la/">
|
|
18
|
+
<meta property="og:type" content="website">
|
|
19
|
+
<meta name="twitter:card" content="summary_large_image">
|
|
20
|
+
<meta name="twitter:title" content="ORACLE | The all-in-one multichain agent">
|
|
21
|
+
<meta name="twitter:description" content="Trade, research, and build across Oracle's working chain surfaces, with extensible EVM support and self-custodial signing.">
|
|
22
|
+
<meta name="twitter:image" content="https://oracle.demi.la/assets/hero/orb-poster.jpg">
|
|
23
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
24
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
25
|
+
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&family=Outfit:wght@300;400;500;600;700&family=UnifrakturCook:wght@700&display=swap" rel="stylesheet" />
|
|
26
|
+
<style>
|
|
27
|
+
:root{
|
|
28
|
+
--bg:#0B1018;
|
|
29
|
+
--panel:#111925;
|
|
30
|
+
--panel-2:#152031;
|
|
31
|
+
--blue:#7CC4FF;
|
|
32
|
+
--blue2:#A7D8FF;
|
|
33
|
+
--blue-dim:#3a6f99;
|
|
34
|
+
--ink:#F4F9FE;
|
|
35
|
+
--cool:#C9DAEC;
|
|
36
|
+
--mute:#9FB8D2;
|
|
37
|
+
--line:rgba(124,196,255,.14);
|
|
38
|
+
--line-2:rgba(124,196,255,.24);
|
|
39
|
+
--evm:#7CC4FF;
|
|
40
|
+
--hl:#50D2C1;
|
|
41
|
+
--rh:#d7ff4d;
|
|
42
|
+
--sol:#9945FF;
|
|
43
|
+
--poly:#3B82F6;
|
|
44
|
+
--stable:#F0B90B;
|
|
45
|
+
--display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
|
|
46
|
+
--sans:"Outfit",system-ui,sans-serif;
|
|
47
|
+
--mono:"IBM Plex Mono",ui-monospace,monospace;
|
|
48
|
+
--ease:cubic-bezier(.16,1,.3,1);
|
|
49
|
+
--scene-a:#7CC4FF;
|
|
50
|
+
--scene-b:#50D2C1;
|
|
51
|
+
--scene-soft:rgba(124,196,255,.14);
|
|
52
|
+
--scroll-pct:0%;
|
|
53
|
+
--scroll-shift:0px;
|
|
54
|
+
--scroll-shift-neg:0px;
|
|
55
|
+
--scroll-shift-soft:0px;
|
|
56
|
+
--scroll-drift:0px;
|
|
57
|
+
--scroll-rot:0deg;
|
|
58
|
+
--scroll-rot-neg:0deg;
|
|
59
|
+
--scroll-zoom:.94;
|
|
60
|
+
--pad:clamp(18px,4vw,48px);
|
|
61
|
+
|
|
62
|
+
--fs-micro:10px;
|
|
63
|
+
--fs-xs:12px;
|
|
64
|
+
--fs-sm:13.5px;
|
|
65
|
+
--fs-base:15px;
|
|
66
|
+
--fs-md:clamp(18px,1.6vw,20px);
|
|
67
|
+
--fs-lg:clamp(22px,2.2vw,26px);
|
|
68
|
+
--fs-xl:clamp(28px,3.2vw,34px);
|
|
69
|
+
--fs-2xl:clamp(34px,4.4vw,50px);
|
|
70
|
+
--fs-3xl:clamp(46px,6.5vw,84px);
|
|
71
|
+
--fs-4xl:clamp(64px,10vw,150px);
|
|
72
|
+
--r-sm:12px;
|
|
73
|
+
--r-md:16px;
|
|
74
|
+
--r-lg:22px;
|
|
75
|
+
--r-pill:999px;
|
|
76
|
+
--space-1:4px;
|
|
77
|
+
--space-2:8px;
|
|
78
|
+
--space-3:12px;
|
|
79
|
+
--space-4:16px;
|
|
80
|
+
--space-5:24px;
|
|
81
|
+
--space-6:32px;
|
|
82
|
+
--space-7:48px;
|
|
83
|
+
--space-8:72px;
|
|
84
|
+
--space-9:110px;
|
|
85
|
+
--max:1100px;
|
|
86
|
+
}
|
|
87
|
+
*{box-sizing:border-box;margin:0;padding:0}
|
|
88
|
+
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;max-width:100%}
|
|
89
|
+
body{
|
|
90
|
+
min-height:100dvh;background:var(--bg);color:var(--ink);position:relative;isolation:isolate;
|
|
91
|
+
font-family:var(--sans);font-weight:400;max-width:100vw;
|
|
92
|
+
/* `overflow-x:hidden` here computed overflow-y to `auto`, which turned <body>
|
|
93
|
+
into a scroll container and silently killed every `position:sticky` on the
|
|
94
|
+
page (the existing .atlas-sticky included). `clip` suppresses the same
|
|
95
|
+
horizontal overflow without creating a scrollport. */
|
|
96
|
+
overflow-x:clip;
|
|
97
|
+
}
|
|
98
|
+
::selection{background:var(--blue);color:#071018}
|
|
99
|
+
a{color:inherit;text-decoration:none}
|
|
100
|
+
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
|
|
101
|
+
img{display:inline-block}
|
|
102
|
+
|
|
103
|
+
.grain{
|
|
104
|
+
position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.04;mix-blend-mode:soft-light;
|
|
105
|
+
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.scroll-craft{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.7;mix-blend-mode:screen;contain:layout paint style}
|
|
109
|
+
.scroll-craft::before{content:"";position:absolute;inset:-12%;background:radial-gradient(46% 34% at 72% 22%,var(--scene-soft),transparent 66%),radial-gradient(38% 28% at 12% 76%,rgba(80,210,193,.10),transparent 70%);filter:blur(8px);transform:translate3d(0,var(--scroll-drift),0) scale(1.04)}
|
|
110
|
+
.craft-grid{position:absolute;inset:-8%;opacity:.22;background-image:linear-gradient(rgba(124,196,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(124,196,255,.10) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse at 56% 42%,#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 56% 42%,#000 0%,transparent 70%);transform:translate3d(var(--scroll-drift),var(--scroll-shift-neg),0)}
|
|
111
|
+
.craft-orbit{position:absolute;right:min(7vw,92px);top:22vh;width:clamp(220px,28vw,430px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(167,216,255,.2);box-shadow:0 0 70px rgba(124,196,255,.1),inset 0 0 42px rgba(124,196,255,.06);transform:translate3d(0,var(--scroll-shift),0) rotate(var(--scroll-rot)) scale(var(--scroll-zoom))}
|
|
112
|
+
.craft-orbit::before,.craft-orbit::after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(124,196,255,.18);transform:rotateX(68deg)}
|
|
113
|
+
.craft-orbit::after{inset:24%;border-color:rgba(80,210,193,.2);transform:rotateY(64deg)}
|
|
114
|
+
.craft-orbit.is-b{right:auto;left:-8vw;top:62vh;width:clamp(240px,34vw,520px);opacity:.46;filter:blur(.2px);transform:translate3d(0,var(--scroll-shift-soft),0) rotate(var(--scroll-rot-neg)) scale(.86)}
|
|
115
|
+
.scene-rail{position:fixed;right:18px;top:50%;z-index:29;transform:translateY(-50%);display:grid;gap:11px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(201,218,236,.44)}
|
|
116
|
+
.scene-rail span{position:relative;display:grid;place-items:center;width:30px;height:22px;border:1px solid rgba(124,196,255,.12);border-radius:999px;background:rgba(11,16,24,.40);transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)}
|
|
117
|
+
body[data-scene="home"] .scene-rail span[data-scene-dot="home"],body[data-scene="orchestration"] .scene-rail span[data-scene-dot="orchestration"],body[data-scene="chains"] .scene-rail span[data-scene-dot="chains"],body[data-scene="cli"] .scene-rail span[data-scene-dot="cli"],body[data-scene="fees"] .scene-rail span[data-scene-dot="fees"]{color:#071018;border-color:rgba(184,240,255,.82);background:linear-gradient(180deg,var(--scene-a),var(--scene-b));transform:translateX(-4px)}
|
|
118
|
+
body[data-scene="home"],body[data-scene="orchestration"],body[data-scene="chains"],body[data-scene="cli"],body[data-scene="fees"]{--scene-a:#7CC4FF;--scene-b:#50D2C1;--scene-soft:rgba(124,196,255,.16)}
|
|
119
|
+
|
|
120
|
+
/* ── orbital oracle mark ───────────────────────────── */
|
|
121
|
+
.orbital{position:relative;display:inline-block}
|
|
122
|
+
.orbital svg{display:block;overflow:visible;width:100%;height:100%}
|
|
123
|
+
.orbital .ring{transform-origin:50% 50%;fill:none;stroke:var(--blue);stroke-width:2;opacity:.55}
|
|
124
|
+
.orbital .ring ellipse{vector-effect:non-scaling-stroke}
|
|
125
|
+
.orbital .r1{animation:orb-spin 13s linear infinite}
|
|
126
|
+
.orbital .r2{animation:orb-spin 21s linear infinite reverse;opacity:.4}
|
|
127
|
+
.orbital .r3{animation:orb-spin 32s linear infinite;opacity:.28}
|
|
128
|
+
.orbital .tickring{transform-origin:50% 50%;fill:none;stroke:rgba(124,196,255,.35);stroke-width:1.4;stroke-dasharray:2 7;animation:orb-spin 46s linear infinite reverse}
|
|
129
|
+
.orbital .core{fill:var(--blue);animation:core-pulse 3.2s var(--ease) infinite}
|
|
130
|
+
.orbital .halo{fill:none;stroke:rgba(124,196,255,.22);stroke-width:5;filter:blur(3px)}
|
|
131
|
+
@keyframes orb-spin{to{transform:rotate(360deg)}}
|
|
132
|
+
@keyframes core-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.06)}}
|
|
133
|
+
@keyframes core-billboard{from{transform:rotateY(0deg) rotateX(-18deg) rotateZ(8deg)}to{transform:rotateY(-360deg) rotateX(-18deg) rotateZ(8deg)}}
|
|
134
|
+
@keyframes orbit-travel{from{transform:rotateX(76deg) rotateZ(0deg) translateX(clamp(170px,23vw,280px))}to{transform:rotateX(76deg) rotateZ(360deg) translateX(clamp(170px,23vw,280px))}}
|
|
135
|
+
|
|
136
|
+
.loader{
|
|
137
|
+
position:fixed;inset:0;z-index:50;background:var(--bg);
|
|
138
|
+
display:grid;place-items:center;
|
|
139
|
+
transition:opacity .7s var(--ease),visibility .7s;
|
|
140
|
+
}
|
|
141
|
+
.loader.out{opacity:0;visibility:hidden;pointer-events:none}
|
|
142
|
+
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
|
|
143
|
+
.loader-mark{width:clamp(150px,26vmin,240px);height:clamp(150px,26vmin,240px);filter:drop-shadow(0 0 34px rgba(124,196,255,.42))}
|
|
144
|
+
|
|
145
|
+
.progress{
|
|
146
|
+
position:fixed;top:0;left:0;right:0;height:2px;z-index:35;pointer-events:none;
|
|
147
|
+
background:linear-gradient(90deg,var(--scene-a),var(--scene-b));
|
|
148
|
+
transform-origin:0 50%;transform:scaleX(0);
|
|
149
|
+
box-shadow:0 0 14px var(--scene-soft);
|
|
150
|
+
transition:background .45s var(--ease),box-shadow .45s var(--ease);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.nav{
|
|
154
|
+
position:fixed;top:0;left:0;right:0;z-index:30;
|
|
155
|
+
display:grid;
|
|
156
|
+
grid-template-columns:1fr auto;
|
|
157
|
+
align-items:center;gap:16px;
|
|
158
|
+
padding:14px var(--pad);
|
|
159
|
+
background:linear-gradient(90deg,rgba(11,16,24,.88),rgba(11,16,24,.72));
|
|
160
|
+
border-bottom:1px solid var(--line);
|
|
161
|
+
box-shadow:0 18px 50px rgba(0,0,0,.22);
|
|
162
|
+
backdrop-filter:blur(18px);
|
|
163
|
+
-webkit-backdrop-filter:blur(18px);
|
|
164
|
+
transition:border-color .45s var(--ease),box-shadow .45s var(--ease);
|
|
165
|
+
}
|
|
166
|
+
body[data-scene="cli"] .nav,body[data-scene="fees"] .nav{border-bottom-color:rgba(184,240,255,.22);box-shadow:0 18px 60px rgba(0,0,0,.34),0 0 42px var(--scene-soft)}
|
|
167
|
+
.brand{
|
|
168
|
+
display:flex;align-items:center;gap:12px;
|
|
169
|
+
font-family:var(--display);font-size:var(--fs-lg);font-weight:400;letter-spacing:.02em;
|
|
170
|
+
text-transform:none;justify-self:start;
|
|
171
|
+
}
|
|
172
|
+
.brand .orbital{width:26px;height:26px;filter:drop-shadow(0 0 10px rgba(124,196,255,.6))}
|
|
173
|
+
.nav-links{
|
|
174
|
+
display:flex;align-items:center;gap:18px;justify-self:end;
|
|
175
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--cool);
|
|
176
|
+
}
|
|
177
|
+
.nav-links a{opacity:.78;transition:opacity .25s,color .25s;position:relative}
|
|
178
|
+
.nav-links a:hover{opacity:1;color:var(--blue2)}
|
|
179
|
+
.nav-links a::after{
|
|
180
|
+
content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
|
|
181
|
+
background:var(--blue);transform:scaleX(0);transform-origin:left;
|
|
182
|
+
transition:transform .3s var(--ease);
|
|
183
|
+
}
|
|
184
|
+
.nav-links a:hover::after{transform:scaleX(1)}
|
|
185
|
+
.nav-links a.is-active{opacity:1;color:var(--blue2)}
|
|
186
|
+
.nav-links a.is-active::after{transform:scaleX(1)}
|
|
187
|
+
/* Download reads as the action, not a fifth link of equal weight. */
|
|
188
|
+
.nav-links a.nav-download{
|
|
189
|
+
opacity:1;color:#071018;
|
|
190
|
+
background:linear-gradient(180deg,rgba(184,240,255,.98),rgba(124,196,255,.9));
|
|
191
|
+
border-radius:999px;padding:8px 15px;
|
|
192
|
+
}
|
|
193
|
+
.nav-links a.nav-download::after{display:none}
|
|
194
|
+
.nav-links a.nav-download:hover{color:#071018;box-shadow:0 0 0 1px rgba(184,240,255,.4),0 12px 30px rgba(124,196,255,.24)}
|
|
195
|
+
/* Mobile menu: hidden on desktop, drawer below. */
|
|
196
|
+
.nav-toggle{
|
|
197
|
+
display:none;justify-self:end;width:38px;height:38px;
|
|
198
|
+
align-items:center;justify-content:center;
|
|
199
|
+
border:1px solid var(--line-2);border-radius:10px;background:none;
|
|
200
|
+
color:var(--cool);cursor:pointer;padding:0;
|
|
201
|
+
}
|
|
202
|
+
.nav-toggle span{display:block;width:16px;height:1px;background:currentColor;position:relative}
|
|
203
|
+
.nav-toggle span::before,.nav-toggle span::after{
|
|
204
|
+
content:"";position:absolute;left:0;width:16px;height:1px;background:currentColor;
|
|
205
|
+
transition:transform .3s var(--ease),opacity .2s;
|
|
206
|
+
}
|
|
207
|
+
.nav-toggle span::before{top:-5px}
|
|
208
|
+
.nav-toggle span::after{top:5px}
|
|
209
|
+
.nav[data-open="1"] .nav-toggle span{background:transparent}
|
|
210
|
+
.nav[data-open="1"] .nav-toggle span::before{transform:translateY(5px) rotate(45deg)}
|
|
211
|
+
.nav[data-open="1"] .nav-toggle span::after{transform:translateY(-5px) rotate(-45deg)}
|
|
212
|
+
.nav-chip{
|
|
213
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
|
|
214
|
+
border:1px solid rgba(124,196,255,.3);border-radius:999px;padding:7px 11px;color:var(--blue2);opacity:.95;
|
|
215
|
+
}
|
|
216
|
+
.nav-cta{
|
|
217
|
+
border:1px solid rgba(124,196,255,.28);border-radius:999px;padding:10px 16px;color:var(--ink);
|
|
218
|
+
transition:border-color .3s,color .3s,box-shadow .3s;
|
|
219
|
+
}
|
|
220
|
+
.nav-cta:hover{border-color:var(--blue);color:var(--blue2);box-shadow:0 0 0 1px rgba(124,196,255,.12)}
|
|
221
|
+
|
|
222
|
+
/* fixed soft field behind content */
|
|
223
|
+
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;opacity:.4;pointer-events:none}
|
|
224
|
+
.veil{
|
|
225
|
+
position:fixed;inset:0;z-index:1;pointer-events:none;
|
|
226
|
+
background:
|
|
227
|
+
radial-gradient(60% 50% at 50% 28%, rgba(124,196,255,.10), transparent 58%),
|
|
228
|
+
linear-gradient(180deg, rgba(11,16,24,.12), rgba(11,16,24,.42));
|
|
229
|
+
}
|
|
230
|
+
main{position:relative;z-index:2;padding-top:84px}
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
/* homepage */
|
|
234
|
+
.home{
|
|
235
|
+
overflow-x:clip;
|
|
236
|
+
min-height:calc(100dvh - 84px);
|
|
237
|
+
padding-block:clamp(28px,6vh,72px);
|
|
238
|
+
display:grid;place-items:center;
|
|
239
|
+
padding:clamp(20px,4vh,44px) var(--pad) clamp(56px,9vh,96px);
|
|
240
|
+
position:relative;overflow:hidden;text-align:left;
|
|
241
|
+
}
|
|
242
|
+
.home::after{
|
|
243
|
+
content:"";position:absolute;left:50%;bottom:22px;width:1px;height:74px;
|
|
244
|
+
background:linear-gradient(180deg, rgba(124,196,255,.65), transparent);
|
|
245
|
+
transform-origin:50% 0;animation:drop-line 2.8s var(--ease) infinite;
|
|
246
|
+
}
|
|
247
|
+
.home-inner{max-width:min(1180px,100%);width:100%;min-width:0;margin:0 auto;position:relative}
|
|
248
|
+
.hero-primary{min-width:0;display:flex;flex-direction:column;align-items:center}
|
|
249
|
+
.home-kicker{
|
|
250
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.34em;text-transform:uppercase;color:var(--blue);
|
|
251
|
+
margin-bottom:6px;position:relative;z-index:3;
|
|
252
|
+
}
|
|
253
|
+
.hero-stage{position:relative;width:100%;display:grid;place-items:center;min-height:clamp(360px,52vh,560px)}
|
|
254
|
+
.hero-art{position:absolute;inset:0;display:grid;place-items:center;z-index:0;pointer-events:none;overflow:clip}
|
|
255
|
+
.hero-orb{
|
|
256
|
+
width:clamp(380px,50vw,640px);aspect-ratio:1;position:relative;transform-style:preserve-3d;
|
|
257
|
+
animation:orb-slew 22s linear infinite;
|
|
258
|
+
}
|
|
259
|
+
.hero-orb .lat{position:absolute;inset:0;border-radius:50%;border:1.2px solid rgba(124,196,255,.42);transform-style:preserve-3d;box-shadow:0 0 26px rgba(124,196,255,.1), inset 0 0 34px rgba(124,196,255,.07)}
|
|
260
|
+
.hero-orb .lat.l1{transform:rotateY(0deg);border-color:rgba(167,216,255,.62)}
|
|
261
|
+
.hero-orb .lat.l2{transform:rotateY(45deg)}
|
|
262
|
+
.hero-orb .lat.l3{transform:rotateY(90deg);border-color:rgba(167,216,255,.58)}
|
|
263
|
+
.hero-orb .lat.l4{transform:rotateY(135deg)}
|
|
264
|
+
.hero-orb .par{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(124,196,255,.3);transform-style:preserve-3d;box-shadow:inset 0 0 24px rgba(124,196,255,.06)}
|
|
265
|
+
.hero-orb .par.p1{width:96%;height:96%;transform:translate(-50%,-50%) rotateX(90deg)}
|
|
266
|
+
.hero-orb .par.p2{width:78%;height:78%;transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(clamp(380px,50vw,640px) * .31))}
|
|
267
|
+
.hero-orb .par.p3{width:78%;height:78%;transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(clamp(380px,50vw,640px) * -.31))}
|
|
268
|
+
.hero-orb .eq{position:absolute;inset:-4%;border-radius:50%;border:1.8px solid rgba(190,228,255,.82);transform:rotateX(76deg);box-shadow:0 0 44px rgba(124,196,255,.4), inset 0 0 30px rgba(167,216,255,.14)}
|
|
269
|
+
.hero-orb .core-glow{
|
|
270
|
+
position:absolute;inset:38%;border-radius:50%;
|
|
271
|
+
transform:rotateZ(8deg) rotateX(-18deg);
|
|
272
|
+
animation:core-billboard 22s linear infinite;
|
|
273
|
+
background:
|
|
274
|
+
radial-gradient(circle at 36% 30%, rgba(255,255,255,.95) 0%, rgba(214,238,255,.8) 12%, rgba(140,204,255,.55) 32%, rgba(74,150,214,.34) 56%, rgba(28,74,124,.22) 78%, rgba(14,34,62,.12) 100%);
|
|
275
|
+
box-shadow:
|
|
276
|
+
inset -12px -15px 34px rgba(6,16,32,.5),
|
|
277
|
+
inset 8px 10px 26px rgba(210,238,255,.2),
|
|
278
|
+
0 0 60px rgba(124,196,255,.5),
|
|
279
|
+
0 0 140px rgba(124,196,255,.2);
|
|
280
|
+
}
|
|
281
|
+
.hero-orb .core-glow::before{
|
|
282
|
+
content:"";position:absolute;left:22%;top:16%;width:26%;height:20%;border-radius:50%;
|
|
283
|
+
background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,.28) 44%, transparent 74%);
|
|
284
|
+
transform:rotate(-24deg);
|
|
285
|
+
}
|
|
286
|
+
.hero-orb .core-glow::after{
|
|
287
|
+
content:"";position:absolute;inset:-6%;border-radius:50%;pointer-events:none;
|
|
288
|
+
background:radial-gradient(circle at 50% 50%, rgba(124,196,255,.3) 0%, rgba(124,196,255,.09) 46%, transparent 68%);
|
|
289
|
+
animation:core-pulse 3.4s var(--ease) infinite;
|
|
290
|
+
}
|
|
291
|
+
.hero-orb .orbit-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 38% 34%, #fff, var(--blue2) 55%, rgba(124,196,255,.5));box-shadow:0 0 22px rgba(167,216,255,.95), 0 0 44px rgba(124,196,255,.4);left:calc(50% - 4.5px);top:calc(50% - 4.5px);transform-style:preserve-3d;animation:orbit-travel 14s linear infinite}
|
|
292
|
+
.home-title{
|
|
293
|
+
position:relative;z-index:2;
|
|
294
|
+
font-family:var(--display);font-weight:300;font-size:var(--fs-4xl);line-height:.9;letter-spacing:-.045em;
|
|
295
|
+
text-transform:uppercase;color:var(--ink);
|
|
296
|
+
text-shadow:0 2px 30px rgba(0,0,0,.6);
|
|
297
|
+
}
|
|
298
|
+
.home-title em{font-style:italic;color:var(--blue2)}
|
|
299
|
+
.home-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}
|
|
300
|
+
.home-copy p:not(.home-kicker){max-width:56ch;color:var(--mute);font-size:var(--fs-base);line-height:1.7;margin:18px 0 0;text-shadow:0 1px 20px rgba(0,0,0,.65)}
|
|
301
|
+
.home-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;align-items:center;justify-content:center}
|
|
302
|
+
.enter-cta{
|
|
303
|
+
display:inline-flex;align-items:center;gap:12px;border:1px solid rgba(124,196,255,.45);border-radius:999px;
|
|
304
|
+
padding:14px 22px;color:var(--ink);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;
|
|
305
|
+
background:linear-gradient(180deg, rgba(124,196,255,.12), rgba(124,196,255,.035));
|
|
306
|
+
box-shadow:0 0 0 1px rgba(124,196,255,.08),0 20px 46px rgba(0,0,0,.3);
|
|
307
|
+
transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
|
|
308
|
+
}
|
|
309
|
+
.enter-cta::after{content:"↓";font-size:var(--fs-sm);color:var(--blue)}
|
|
310
|
+
.enter-cta:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 0 0 1px rgba(124,196,255,.18),0 24px 58px rgba(0,0,0,.36)}
|
|
311
|
+
.hero-note{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
|
|
312
|
+
@keyframes orb-slew{0%{transform:rotateX(18deg) rotateZ(-8deg) rotateY(0deg)}100%{transform:rotateX(18deg) rotateZ(-8deg) rotateY(360deg)}}
|
|
313
|
+
@keyframes home-breathe{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
|
|
314
|
+
@keyframes drop-line{0%,100%{opacity:.25;transform:translateX(-50%) scaleY(.45)}50%{opacity:1;transform:translateX(-50%) scaleY(1)}}
|
|
315
|
+
|
|
316
|
+
|
|
317
|
+
code{font-family:var(--mono)}
|
|
318
|
+
|
|
319
|
+
.hero-note-line{white-space:nowrap;overflow:visible}
|
|
320
|
+
.hero-note-line code{white-space:nowrap}
|
|
321
|
+
@media (max-width:1180px){
|
|
322
|
+
.hero-note-line{white-space:normal}
|
|
323
|
+
.hero-note-line code{display:inline-block}
|
|
324
|
+
}
|
|
325
|
+
/* figcaption was stranded at the far left of a 742px figure while the orb sits
|
|
326
|
+
right of centre -- it read as a loose fragment, not a caption. Centre it under
|
|
327
|
+
the mark it belongs to. */
|
|
328
|
+
.hero-product figcaption{text-align:center;width:100%}
|
|
329
|
+
.section{
|
|
330
|
+
position:relative;z-index:2;max-width:var(--max);margin:0 auto;
|
|
331
|
+
padding:clamp(56px,10vh,110px) var(--pad) var(--space-8);
|
|
332
|
+
}
|
|
333
|
+
.section:first-of-type{padding-top:clamp(18px,3vh,28px)}
|
|
334
|
+
.section-label{
|
|
335
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.34em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;
|
|
336
|
+
display:inline-flex;align-items:center;gap:12px;
|
|
337
|
+
}
|
|
338
|
+
.section-title{
|
|
339
|
+
font-family:var(--display);font-weight:400;
|
|
340
|
+
font-size:var(--fs-2xl);line-height:1.06;letter-spacing:-.01em;
|
|
341
|
+
max-width:18ch;margin-bottom:20px;
|
|
342
|
+
}
|
|
343
|
+
.section-title em{font-style:italic;color:var(--blue2)}
|
|
344
|
+
.done .word-mask{overflow:visible!important}
|
|
345
|
+
.section-lede{max-width:52ch;color:var(--cool);font-size:var(--fs-base);line-height:1.7;margin-bottom:clamp(28px,4vw,44px)}
|
|
346
|
+
|
|
347
|
+
/* orchestration graph */
|
|
348
|
+
.graph-shell{
|
|
349
|
+
border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
|
|
350
|
+
background:linear-gradient(180deg, rgba(124,196,255,.04), transparent 42%), var(--panel);
|
|
351
|
+
}
|
|
352
|
+
.graph-top{
|
|
353
|
+
display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
|
|
354
|
+
padding:14px 18px;border-bottom:1px solid var(--line);
|
|
355
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
|
|
356
|
+
}
|
|
357
|
+
.graph-top b{color:var(--blue);font-weight:500}
|
|
358
|
+
.graph-canvas{padding:clamp(28px,4vw,40px) clamp(14px,2.5vw,24px) clamp(22px,3vw,30px);overflow:auto}
|
|
359
|
+
.orch{width:min(1100px,100%);margin:0 auto;min-width:720px}
|
|
360
|
+
.row{display:flex;justify-content:center;gap:14px;align-items:stretch}
|
|
361
|
+
.row.profiles{
|
|
362
|
+
display:grid;
|
|
363
|
+
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
364
|
+
gap:10px;width:100%;
|
|
365
|
+
}
|
|
366
|
+
@media (min-width:900px){
|
|
367
|
+
.row.profiles{grid-template-columns:repeat(3,minmax(0,1fr))}
|
|
368
|
+
}
|
|
369
|
+
@media (min-width:1180px){
|
|
370
|
+
.row.profiles{grid-template-columns:repeat(4,minmax(0,1fr))}
|
|
371
|
+
}
|
|
372
|
+
.route-strip{
|
|
373
|
+
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
|
|
374
|
+
gap:1px;background:var(--line);border-top:1px solid var(--line);
|
|
375
|
+
}
|
|
376
|
+
@media (min-width:1100px){
|
|
377
|
+
.route-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
|
|
378
|
+
}
|
|
379
|
+
.node{
|
|
380
|
+
border:1px solid rgba(124,196,255,.42);border-radius:var(--r-md);background:rgba(21,32,49,.92);
|
|
381
|
+
padding:14px 12px;text-align:center;
|
|
382
|
+
transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
|
|
383
|
+
}
|
|
384
|
+
.node:hover{transform:translate3d(0,-3px,0);box-shadow:0 14px 34px rgba(0,0,0,.32)}
|
|
385
|
+
.node.hub{
|
|
386
|
+
width:min(300px,100%);
|
|
387
|
+
border-color:rgba(124,196,255,.5);
|
|
388
|
+
background:linear-gradient(180deg, rgba(124,196,255,.12), rgba(11,16,24,.88));
|
|
389
|
+
box-shadow:0 0 0 1px rgba(124,196,255,.08), 0 16px 40px rgba(0,0,0,.3);
|
|
390
|
+
padding:18px 16px 20px;
|
|
391
|
+
display:flex;flex-direction:column;align-items:center;
|
|
392
|
+
}
|
|
393
|
+
.node.hub .orbital{width:74px;height:74px;margin:2px 0 10px;filter:drop-shadow(0 0 20px rgba(124,196,255,.35))}
|
|
394
|
+
.node .tag{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
|
|
395
|
+
.node.hub .tag{color:var(--blue)}
|
|
396
|
+
.node .name{font-family:var(--display);font-size:var(--fs-lg);font-weight:500;color:var(--ink);line-height:1;letter-spacing:.01em;margin-bottom:6px}
|
|
397
|
+
.node.hub .name{font-size:var(--fs-xl);font-weight:400;font-style:italic}
|
|
398
|
+
.node .sub{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.05em;color:var(--cool);line-height:1.5}
|
|
399
|
+
.node.route{min-height:138px;display:flex;flex-direction:column;justify-content:flex-start;text-align:left;padding:14px}
|
|
400
|
+
.node.route .name{font-size:var(--fs-md);margin-bottom:8px}
|
|
401
|
+
.node.route .chains{
|
|
402
|
+
margin-top:auto;padding-top:10px;
|
|
403
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;line-height:1.7;
|
|
404
|
+
display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;
|
|
405
|
+
}
|
|
406
|
+
.ch-add{border:1px dashed color-mix(in oklab,var(--blue) 42%,transparent);border-radius:999px;padding:1px 7px;color:var(--blue);opacity:.92}
|
|
407
|
+
.ch{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
|
|
408
|
+
.ch img{width:13px;height:13px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.06)}
|
|
409
|
+
.node.add{
|
|
410
|
+
border-style:dashed;border-color:rgba(124,196,255,.28);
|
|
411
|
+
background:rgba(11,16,24,.35);
|
|
412
|
+
min-height:138px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
|
|
413
|
+
text-align:left;padding:14px;
|
|
414
|
+
}
|
|
415
|
+
.node.add .name{font-size:var(--fs-md);color:var(--blue2)}
|
|
416
|
+
.node.add .sub{color:var(--mute)}
|
|
417
|
+
.node.add:hover{border-color:rgba(124,196,255,.55);background:rgba(124,196,255,.06)}
|
|
418
|
+
|
|
419
|
+
.builder-row{margin-top:0;display:flex;justify-content:center}
|
|
420
|
+
.node.builder-sink{width:min(430px,100%);text-align:center;align-items:center;min-height:162px;position:relative}
|
|
421
|
+
.node.builder-sink .name{font-size:var(--fs-lg)}
|
|
422
|
+
.node.builder-sink .chains{justify-content:center}
|
|
423
|
+
.wires.funnel{height:62px}
|
|
424
|
+
.wires.funnel path{stroke:rgba(255,176,137,.48)}
|
|
425
|
+
.wires.funnel path:nth-child(2n){stroke:rgba(124,196,255,.32)}
|
|
426
|
+
.wires.funnel circle{fill:#ffb089}
|
|
427
|
+
|
|
428
|
+
|
|
429
|
+
/* protocol colors */
|
|
430
|
+
.node.p-hl{border-color:rgba(80,210,193,.45);background:linear-gradient(180deg, rgba(80,210,193,.14), rgba(11,16,24,.88))}
|
|
431
|
+
.node.p-hl .tag,.node.p-hl .name{color:var(--hl)}
|
|
432
|
+
.node.p-hl .chains{color:var(--hl)}
|
|
433
|
+
.node.p-hl:hover{border-color:var(--hl);box-shadow:0 12px 30px rgba(80,210,193,.12)}
|
|
434
|
+
|
|
435
|
+
.node.p-rh{border-color:rgba(215,255,77,.55);background:linear-gradient(180deg, rgba(215,255,77,.14), rgba(11,16,24,.88))}
|
|
436
|
+
.node.p-rh .tag,.node.p-rh .name{color:var(--rh)}
|
|
437
|
+
.node.p-rh .chains{color:var(--rh)}
|
|
438
|
+
.node.p-rh:hover{border-color:var(--rh);box-shadow:0 12px 30px rgba(215,255,77,.16)}
|
|
439
|
+
|
|
440
|
+
.node.p-sol{border-color:rgba(153,69,255,.5);background:linear-gradient(180deg, rgba(153,69,255,.14), rgba(11,16,24,.88))}
|
|
441
|
+
.node.p-sol .tag,.node.p-sol .name{color:#c4a0ff}
|
|
442
|
+
.node.p-sol .chains{color:#c4a0ff}
|
|
443
|
+
.node.p-sol:hover{border-color:var(--sol);box-shadow:0 12px 30px rgba(153,69,255,.14)}
|
|
444
|
+
|
|
445
|
+
.node.p-poly{border-color:rgba(59,130,246,.5);background:linear-gradient(180deg, rgba(59,130,246,.14), rgba(11,16,24,.88))}
|
|
446
|
+
.node.p-poly .tag,.node.p-poly .name{color:#93c5fd}
|
|
447
|
+
.node.p-poly .chains{color:#93c5fd}
|
|
448
|
+
.node.p-poly:hover{border-color:var(--poly);box-shadow:0 12px 30px rgba(59,130,246,.14)}
|
|
449
|
+
|
|
450
|
+
.node.p-stable{border-color:rgba(240,185,11,.5);background:linear-gradient(180deg, rgba(240,185,11,.12), rgba(11,16,24,.88))}
|
|
451
|
+
.node.p-build{border-color:rgba(255,140,90,.55);background:linear-gradient(180deg, rgba(255,140,90,.14), rgba(11,16,24,.88))}
|
|
452
|
+
.node.p-build .tag,.node.p-build .name{color:#ffb089}
|
|
453
|
+
.node.p-build .chains{color:#ffb089}
|
|
454
|
+
.node.p-build:hover{border-color:#ff8c5a;box-shadow:0 12px 30px rgba(255,140,90,.14)}
|
|
455
|
+
.route-card.p-build .where{color:#ffb089}
|
|
456
|
+
.route-card.p-build{box-shadow:inset 3px 0 0 #ff8c5a}
|
|
457
|
+
.route-card.p-build .build-copy{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
|
|
458
|
+
.route-card.p-build .build-copy > div{display:flex;flex-direction:column;gap:10px;min-width:0}
|
|
459
|
+
.route-card.p-build .build-bench{margin:0;border:1px solid rgba(255,140,90,.22);border-radius:var(--r-md);overflow:hidden;background:#080d15;line-height:0}
|
|
460
|
+
.route-card.p-build .build-bench img{display:block;width:100%;height:auto;border-radius:0;object-fit:contain;background:transparent}
|
|
461
|
+
.route-card.p-build .build-bench figcaption{line-height:1.4;padding:10px 14px;border-top:1px solid rgba(255,140,90,.16);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:#ffb089}
|
|
462
|
+
.node.p-stable .tag,.node.p-stable .name{color:#fcd34d}
|
|
463
|
+
.node.p-stable .chains{color:#fcd34d}
|
|
464
|
+
.node.p-stable:hover{border-color:var(--stable);box-shadow:0 12px 30px rgba(240,185,11,.12)}
|
|
465
|
+
|
|
466
|
+
.route-card.p-hl .where{color:var(--hl)}
|
|
467
|
+
.route-card.p-rh .where{color:var(--rh)}
|
|
468
|
+
.route-card.p-sol .where{color:#c4a0ff}
|
|
469
|
+
.route-card.p-poly .where{color:#93c5fd}
|
|
470
|
+
.route-card.p-stable .where{color:#fcd34d}
|
|
471
|
+
.route-card.p-add .where{color:var(--blue2)}
|
|
472
|
+
.route-card.p-hl{box-shadow:inset 3px 0 0 var(--hl)}
|
|
473
|
+
.route-card.p-rh{box-shadow:inset 3px 0 0 var(--rh)}
|
|
474
|
+
.route-card.p-sol{box-shadow:inset 3px 0 0 var(--sol)}
|
|
475
|
+
.route-card.p-poly{box-shadow:inset 3px 0 0 var(--poly)}
|
|
476
|
+
.route-card.p-stable{box-shadow:inset 3px 0 0 var(--stable)}
|
|
477
|
+
.route-card.p-add{box-shadow:inset 3px 0 0 rgba(124,196,255,.45);opacity:.92}
|
|
478
|
+
|
|
479
|
+
.node.p-btc{border-color:rgba(247,147,26,.55);background:linear-gradient(180deg, rgba(247,147,26,.14), rgba(11,16,24,.88))}
|
|
480
|
+
.node.p-btc .tag,.node.p-btc .name{color:#fbbf24}
|
|
481
|
+
.node.p-btc .chains{color:#fbbf24}
|
|
482
|
+
.node.p-btc:hover{border-color:#f7931a;box-shadow:0 12px 30px rgba(247,147,26,.14)}
|
|
483
|
+
.route-card.p-btc .where{color:#fbbf24}
|
|
484
|
+
.route-card.p-btc{box-shadow:inset 3px 0 0 #f7931a}
|
|
485
|
+
|
|
486
|
+
.node.p-base{border-color:rgba(0,82,255,.5);background:linear-gradient(180deg, rgba(0,82,255,.14), rgba(11,16,24,.88))}
|
|
487
|
+
.node.p-base .tag,.node.p-base .name{color:#7aa2ff}
|
|
488
|
+
.node.p-base .chains{color:#7aa2ff}
|
|
489
|
+
.node.p-base:hover{border-color:#0052ff;box-shadow:0 12px 30px rgba(0,82,255,.16)}
|
|
490
|
+
.route-card.p-base .where{color:#7aa2ff}
|
|
491
|
+
.route-card.p-base{box-shadow:inset 3px 0 0 #0052ff}
|
|
492
|
+
.node.p-evm{border-color:rgba(98,126,234,.5);background:linear-gradient(180deg, rgba(98,126,234,.14), rgba(11,16,24,.88))}
|
|
493
|
+
.node.p-evm .tag,.node.p-evm .name{color:#a5b4fc}
|
|
494
|
+
.node.p-evm .chains{color:#a5b4fc}
|
|
495
|
+
.node.p-evm:hover{border-color:#627eea;box-shadow:0 12px 30px rgba(98,126,234,.14)}
|
|
496
|
+
.route-card.p-evm .where{color:#a5b4fc}
|
|
497
|
+
.route-card.p-evm{box-shadow:inset 3px 0 0 #627eea}
|
|
498
|
+
|
|
499
|
+
|
|
500
|
+
.selfcustody{margin-top:clamp(34px,5vw,58px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line)}
|
|
501
|
+
.selfcustody h3{font-family:var(--display);font-weight:400;font-size:var(--fs-xl);line-height:1.12;margin-top:8px;max-width:24ch}
|
|
502
|
+
.teams-flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin-top:clamp(22px,3vw,32px)}
|
|
503
|
+
.teams-node{flex:1 1 128px;display:flex;flex-direction:column;gap:3px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(17,25,37,.82)}
|
|
504
|
+
.teams-node b{font-size:.8rem;letter-spacing:-.01em}
|
|
505
|
+
.teams-node i{font-family:var(--font-mono,monospace);font-style:normal;font-size:.54rem;text-transform:uppercase;letter-spacing:.12em;opacity:.62}
|
|
506
|
+
.teams-node.is-terminal{border-color:color-mix(in srgb,var(--scene-a) 55%,var(--line))}
|
|
507
|
+
.teams-arrow{display:flex;align-items:center;opacity:.4;font-size:.85rem}
|
|
508
|
+
.teams-templates{margin-top:18px;padding-bottom:clamp(12px,2vw,20px);line-height:1.7}
|
|
509
|
+
.section-label.teams-next{margin-top:clamp(46px,6vw,78px)}
|
|
510
|
+
@media (max-width:860px){.teams-flow{flex-direction:column}.teams-arrow{transform:rotate(90deg);justify-content:center;padding:1px 0}}
|
|
511
|
+
.selfcustody-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,30px);margin-top:clamp(22px,3vw,32px)}
|
|
512
|
+
.selfcustody-grid h4{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--blue2);font-weight:500;margin-bottom:8px}
|
|
513
|
+
.selfcustody-grid p{color:var(--cool);font-size:var(--fs-base);line-height:1.65;max-width:52ch}
|
|
514
|
+
.selfcustody-grid > *{opacity:0;transform:translate3d(0,18px,0);transition:opacity .55s var(--ease),transform .55s var(--ease)}
|
|
515
|
+
.selfcustody-grid > *:nth-child(1){transition-delay:.05s}
|
|
516
|
+
.selfcustody-grid > *:nth-child(2){transition-delay:.15s}
|
|
517
|
+
.selfcustody-grid > *:nth-child(3){transition-delay:.25s}
|
|
518
|
+
.selfcustody-grid > *:nth-child(4){transition-delay:.35s}
|
|
519
|
+
.selfcustody.in .selfcustody-grid > *{opacity:1;transform:none}
|
|
520
|
+
@media (max-width:760px){.selfcustody-grid{grid-template-columns:1fr}}
|
|
521
|
+
.moat-grid{
|
|
522
|
+
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
|
|
523
|
+
gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
|
|
524
|
+
margin-top:22px;
|
|
525
|
+
}
|
|
526
|
+
.moat-card{
|
|
527
|
+
background:rgba(17,25,37,.94);padding:clamp(20px,3vw,28px);min-height:140px;
|
|
528
|
+
display:flex;flex-direction:column;gap:10px;
|
|
529
|
+
transition:background .35s;
|
|
530
|
+
}
|
|
531
|
+
.moat-card:hover{background:var(--panel-2)}
|
|
532
|
+
.moat-card .n{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
|
|
533
|
+
.moat-card h3{font-family:var(--display);font-weight:400;font-size:var(--fs-lg)}
|
|
534
|
+
.moat-card p{color:var(--cool);font-size:var(--fs-base);line-height:1.55;max-width:44ch}
|
|
535
|
+
@media (max-width:860px){.moat-grid{grid-template-columns:1fr}}
|
|
536
|
+
|
|
537
|
+
.strategy-surface{
|
|
538
|
+
margin-top:clamp(30px,5vw,52px);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
|
|
539
|
+
background:linear-gradient(145deg,rgba(124,196,255,.07),rgba(17,25,37,.92) 40%,rgba(11,16,24,.98));
|
|
540
|
+
max-width:960px;margin-left:auto;margin-right:auto;
|
|
541
|
+
}
|
|
542
|
+
.strategy-head{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:clamp(22px,3vw,34px);border-bottom:1px solid var(--line)}
|
|
543
|
+
.strategy-kicker{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
|
|
544
|
+
.strategy-head h3{font-family:var(--display);font-weight:400;font-size:var(--fs-xl);line-height:1.05;margin-top:8px}
|
|
545
|
+
.strategy-head p{max-width:50ch;color:var(--cool);font-size:var(--fs-sm);line-height:1.6}
|
|
546
|
+
.strategy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line)}
|
|
547
|
+
.strategy-card{min-height:205px;padding:clamp(20px,2.6vw,28px);background:rgba(11,16,24,.96);display:flex;flex-direction:column;gap:11px}
|
|
548
|
+
.strategy-card .mode{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--blue2)}
|
|
549
|
+
.strategy-card h4{font-family:var(--display);font-weight:400;font-size:var(--fs-lg)}
|
|
550
|
+
.strategy-card p{color:var(--cool);font-size:var(--fs-sm);line-height:1.6}
|
|
551
|
+
.strategy-more{border-top:1px solid var(--line);background:rgba(11,16,24,.72)}
|
|
552
|
+
.strategy-more > summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 24px;cursor:pointer;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--blue2);transition:background .25s var(--ease),color .25s var(--ease)}
|
|
553
|
+
.strategy-more > summary::-webkit-details-marker{display:none}
|
|
554
|
+
.strategy-more > summary::after{content:"+";font-size:var(--fs-sm);transition:transform .3s var(--ease)}
|
|
555
|
+
.strategy-more[open] > summary::after{transform:rotate(45deg)}
|
|
556
|
+
.strategy-more > summary:hover{background:rgba(124,196,255,.05);color:var(--ink)}
|
|
557
|
+
.strategy-more > summary:focus-visible{outline:2px solid var(--blue2);outline-offset:-4px}
|
|
558
|
+
.strategy-grid-more{border-top:1px solid var(--line)}
|
|
559
|
+
.strategy-posture{padding:14px clamp(20px,3vw,34px);border-top:1px solid var(--line);font-family:var(--mono);font-size:var(--fs-micro);line-height:1.6;letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
|
|
560
|
+
.strategy-posture b{font-weight:500;color:var(--warm);letter-spacing:.04em}
|
|
561
|
+
@media (max-width:900px){
|
|
562
|
+
.strategy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
563
|
+
.strategy-head{align-items:start;flex-direction:column}
|
|
564
|
+
.strategy-posture{padding:12px clamp(16px,2.5vw,28px)}
|
|
565
|
+
.route-proof{margin-top:14px}
|
|
566
|
+
.route-tree{width:100%;height:auto}
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
.strategy-posture b{color:var(--blue2);font-weight:500}
|
|
570
|
+
@media (max-width:980px){.strategy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.strategy-head{align-items:start;flex-direction:column}}
|
|
571
|
+
@media (max-width:620px){.strategy-card .mode{display:none}.strategy-grid{grid-template-columns:1fr}.strategy-card{min-height:0;padding:24px 22px;gap:8px}}
|
|
572
|
+
|
|
573
|
+
/* actual Oracle CLI */
|
|
574
|
+
.convert-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:clamp(22px,3.2vw,40px);align-items:start;margin-top:clamp(20px,3vw,32px)}
|
|
575
|
+
.convert-copy{display:flex;flex-direction:column;gap:16px;text-align:left;min-width:0}
|
|
576
|
+
.convert-copy h3{font-family:var(--display);font-weight:400;font-size:var(--fs-xl);line-height:1.1}
|
|
577
|
+
.convert-copy p{color:var(--cool);font-size:var(--fs-base);line-height:1.65}
|
|
578
|
+
.convert-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
|
|
579
|
+
.convert-pills span{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(124,196,255,.28);border-radius:999px;padding:8px 12px;color:var(--blue2)}
|
|
580
|
+
.platform-beta{display:block;max-width:56ch;font-family:var(--sans);font-size:var(--fs-sm);line-height:1.7;letter-spacing:0;color:var(--mute)}
|
|
581
|
+
.platform-beta b{float:left;margin:3px 10px 0 0;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:#071018;background:var(--blue2);border-radius:var(--r-pill);padding:4px 9px}
|
|
582
|
+
.app-shot-title{margin-top:clamp(48px,6vw,80px)}
|
|
583
|
+
.app-shot{margin-top:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:10px}
|
|
584
|
+
.app-shot{margin-top:12px}
|
|
585
|
+
.app-shot + .platform-beta{margin-top:14px}
|
|
586
|
+
.os-dl{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
|
|
587
|
+
.os-link{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--warm);text-decoration:none;transition:border-color .2s}
|
|
588
|
+
.os-link:hover{border-color:var(--blue)}
|
|
589
|
+
.app-shot img{width:100%;height:auto;display:block;border-radius:var(--r-md);border:1px solid rgba(124,196,255,.2);box-shadow:0 24px 60px rgba(0,0,0,.45)}
|
|
590
|
+
.app-shot figcaption{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
|
|
591
|
+
|
|
592
|
+
.cli-install{margin:0 0 22px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
|
|
593
|
+
.agent-caret{display:inline-block;width:2px;height:1.15em;margin-left:1px;vertical-align:-.2em;background:#7cc4ff;animation:agentblink 1s step-end infinite;flex:0 0 auto}
|
|
594
|
+
@keyframes agentblink{50%{opacity:0}}
|
|
595
|
+
.agent-prompt .agent-does,.agent-prompt .agent-out{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
|
|
596
|
+
.agent-prompt .agent-does.in,.agent-prompt .agent-out.in{opacity:1;transform:none}
|
|
597
|
+
.agent-tool.working{position:relative}
|
|
598
|
+
.agent-tool.working::after{content:"";position:absolute;inset:-1px;border-radius:999px;border:1px solid rgba(124,196,255,.85);animation:agentpulse 1.1s ease-out infinite}
|
|
599
|
+
@keyframes agentpulse{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}
|
|
600
|
+
@media (prefers-reduced-motion:reduce){
|
|
601
|
+
.agent-caret{animation:none}
|
|
602
|
+
.agent-tool.working::after{animation:none}
|
|
603
|
+
.agent-prompt .agent-does,.agent-prompt .agent-out{opacity:1;transform:none;transition:none}
|
|
604
|
+
}
|
|
605
|
+
.agent-install{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 0;padding:13px 18px;border:1px solid rgba(124,196,255,.3);border-radius:var(--r-sm);background:rgba(8,13,21,.7)}
|
|
606
|
+
.agent-install code{font-family:var(--mono);font-size:14px;color:var(--ink)}
|
|
607
|
+
.agent-install span{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
|
|
608
|
+
.agent-install b{color:var(--dim);font-weight:600}
|
|
609
|
+
.agent-install .btn{font-family:var(--mono);font-size:13px;color:var(--ink);text-decoration:none;padding:7px 16px;border:1px solid rgba(124,196,255,.35);border-radius:999px;transition:background .2s var(--ease),border-color .2s var(--ease)}
|
|
610
|
+
.agent-install .btn:hover{background:rgba(124,196,255,.12);border-color:var(--blue)}
|
|
611
|
+
.agent-install .btn-claude{color:#d97706;border-color:rgba(217,119,6,.35)}
|
|
612
|
+
.agent-install .btn-claude:hover{background:rgba(217,119,6,.1);border-color:#d97706}
|
|
613
|
+
.agent-install .btn-chatgpt{color:#10a37f;border-color:rgba(16,163,127,.35)}
|
|
614
|
+
.agent-install .btn-chatgpt:hover{background:rgba(16,163,127,.1);border-color:#10a37f}
|
|
615
|
+
.agent-install .btn-cursor{color:#a855f7;border-color:rgba(168,85,247,.35)}
|
|
616
|
+
.agent-install .btn-cursor:hover{background:rgba(168,85,247,.1);border-color:#a855f7}
|
|
617
|
+
.agent-install .btn-vscode{color:#0078d4;border-color:rgba(0,120,212,.35)}
|
|
618
|
+
.agent-install .btn-vscode:hover{background:rgba(0,120,212,.1);border-color:#0078d4}
|
|
619
|
+
.agent-install .btn-copilot{color:#2ea44f;border-color:rgba(46,164,79,.35)}
|
|
620
|
+
.agent-install .btn-copilot:hover{background:rgba(46,164,79,.1);border-color:#2ea44f}
|
|
621
|
+
.harness-marquee{margin:24px 0 0}
|
|
622
|
+
.harness-marquee .track{gap:18px;padding:14px 0}
|
|
623
|
+
.harness-marquee .btn{font-family:var(--mono);font-size:13px;color:var(--ink);text-decoration:none;padding:8px 18px;border:1px solid rgba(124,196,255,.35);border-radius:999px;transition:background .2s var(--ease),border-color .2s var(--ease);white-space:nowrap}
|
|
624
|
+
.harness-marquee .btn:hover{background:rgba(124,196,255,.12);border-color:var(--blue)}
|
|
625
|
+
.harness-marquee .btn-claude{color:#d97706;border-color:rgba(217,119,6,.35)}
|
|
626
|
+
.harness-marquee .btn-claude:hover{background:rgba(217,119,6,.1);border-color:#d97706}
|
|
627
|
+
.harness-marquee .btn-chatgpt{color:#10a37f;border-color:rgba(16,163,127,.35)}
|
|
628
|
+
.harness-marquee .btn-chatgpt:hover{background:rgba(16,163,127,.1);border-color:#10a37f}
|
|
629
|
+
.harness-marquee .btn-cursor{color:#a855f7;border-color:rgba(168,85,247,.35)}
|
|
630
|
+
.harness-marquee .btn-cursor:hover{background:rgba(168,85,247,.1);border-color:#a855f7}
|
|
631
|
+
.harness-marquee .btn-vscode{color:#0078d4;border-color:rgba(0,120,212,.35)}
|
|
632
|
+
.harness-marquee .btn-vscode:hover{background:rgba(0,120,212,.1);border-color:#0078d4}
|
|
633
|
+
.harness-marquee .btn-copilot{color:#2ea44f;border-color:rgba(46,164,79,.35)}
|
|
634
|
+
.harness-marquee .btn-copilot:hover{background:rgba(46,164,79,.1);border-color:#2ea44f}
|
|
635
|
+
.harness-marquee code{font-family:var(--mono);font-size:13px;color:var(--cool);white-space:nowrap}
|
|
636
|
+
.agent-prompts{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:22px;margin:32px 0 0}
|
|
637
|
+
.agent-prompt{padding:0;text-align:left}
|
|
638
|
+
.agent-chips{display:flex;align-items:center;gap:8px;margin:0 0 12px}
|
|
639
|
+
.agent-chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:5px 11px;background:rgba(255,255,255,.02)}
|
|
640
|
+
/* Real app composers. Text is positioned in % of the shot so it tracks the
|
|
641
|
+
image at every width -- derived from measured pixel geometry:
|
|
642
|
+
claude.png 1610x264 text band y136-160, left inset x54
|
|
643
|
+
codex.png 1490x204 text band y42-64, left inset x84 */
|
|
644
|
+
.agent-shot{margin:0}
|
|
645
|
+
/* Claude and Codex composers rebuilt 1:1 in DOM from DEMI's screenshots.
|
|
646
|
+
Real elements, so they stay crisp at any width -- a 1474px PNG could only
|
|
647
|
+
ever be downscaled. Colours and geometry sampled from the source images:
|
|
648
|
+
Claude field #292929 on #161716, radius ~37px, coral #d87656 accent;
|
|
649
|
+
Codex field #2c2c2a on #20201f, radius ~9px, amber "Auto". */
|
|
650
|
+
.agent-panel{margin:0;padding:20px;border-radius:14px}
|
|
651
|
+
.is-claude{background:#161716}
|
|
652
|
+
.is-codex{background:#20201f}
|
|
653
|
+
.agent-panel .ai{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
|
|
654
|
+
.agent-spacer{flex:1}
|
|
655
|
+
.agent-line{display:flex;align-items:center;min-height:26px;font-family:var(--sans);font-size:19px;line-height:1.4;color:#ececec;overflow-wrap:anywhere}
|
|
656
|
+
.agent-typed:empty::before{content:attr(data-ph);color:#8b8b8b}
|
|
657
|
+
.agent-caret{display:inline-block;width:2px;height:1.15em;margin-left:2px;background:#c9c9c9;animation:agentblink 1.05s step-end infinite;flex:0 0 auto}
|
|
658
|
+
.agent-bar{display:flex;align-items:center;gap:13px}
|
|
659
|
+
@keyframes agentblink{50%{opacity:0}}
|
|
660
|
+
|
|
661
|
+
/* Claude: one rounded field, controls on the bottom row inside it. */
|
|
662
|
+
.is-claude .agent-box{background:#292929;border-radius:26px;padding:18px 20px 14px}
|
|
663
|
+
.is-claude .agent-line{margin:0 0 22px}
|
|
664
|
+
.is-claude .agent-bar{color:#9a9a9a}
|
|
665
|
+
.ca-access{display:inline-flex;align-items:center;gap:7px;color:#e0763f;font-size:15px}
|
|
666
|
+
.ca-model{display:inline-flex;align-items:center;gap:9px;font-size:15px}
|
|
667
|
+
.ca-model b{color:#ededed;font-weight:600}
|
|
668
|
+
.ca-model span{color:#8f8f8f}
|
|
669
|
+
.ca-orb{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#1a1a1a;transition:transform .2s ease}
|
|
670
|
+
.ca-orb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
|
|
671
|
+
.agent-panel.sent .ca-orb{transform:scale(1.12)}
|
|
672
|
+
|
|
673
|
+
/* Codex: chips above, bordered field, controls below it. */
|
|
674
|
+
.cx-chips{display:flex;align-items:center;gap:9px;margin:0 0 12px}
|
|
675
|
+
.cx-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;background:#2f2f2e;color:#d6d6d4;font-size:14px}
|
|
676
|
+
.cx-chip .ai{width:16px;height:16px;opacity:.75}
|
|
677
|
+
.cx-sq{padding:7px 9px}
|
|
678
|
+
.is-codex .agent-box{display:flex;align-items:center;gap:12px;background:#2c2c2a;border:1px solid #4a4a48;border-radius:12px;padding:15px 16px;transition:border-color .3s ease}
|
|
679
|
+
.is-codex .agent-box.focus{border-color:#6f6f6c}
|
|
680
|
+
.is-codex .agent-line{flex:1;min-width:0}
|
|
681
|
+
.cx-return{color:#8b8b89}
|
|
682
|
+
.is-codex .agent-bar{margin:13px 0 0;color:#8b8b89;gap:12px}
|
|
683
|
+
.cx-auto{color:#e3b341;font-size:14px}
|
|
684
|
+
.cx-model,.cx-eff{color:#c8c8c6;font-size:14px}
|
|
685
|
+
.cx-ring{width:15px;height:15px;border-radius:50%;border:1.7px solid #6f6f6c;border-right-color:transparent;flex:0 0 auto}
|
|
686
|
+
|
|
687
|
+
@media (max-width:640px){
|
|
688
|
+
.agent-line{font-size:16px}
|
|
689
|
+
.is-claude .agent-box{padding:14px 15px 11px;border-radius:20px}
|
|
690
|
+
.agent-bar{gap:9px}
|
|
691
|
+
.ca-model span,.cx-eff{display:none}
|
|
692
|
+
}
|
|
693
|
+
.agent-prompt .agent-does,.agent-prompt .agent-out{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
|
|
694
|
+
.agent-prompt .agent-does.in,.agent-prompt .agent-out.in{opacity:1;transform:none}
|
|
695
|
+
.agent-tool.working{position:relative}
|
|
696
|
+
.agent-tool.working::after{content:"";position:absolute;inset:-1px;border-radius:999px;border:1px solid rgba(124,196,255,.85);animation:agentpulse 1.1s ease-out infinite}
|
|
697
|
+
@keyframes agentpulse{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}
|
|
698
|
+
@media (prefers-reduced-motion:reduce){
|
|
699
|
+
.agent-caret{animation:none}
|
|
700
|
+
.agent-tool.working::after{animation:none}
|
|
701
|
+
.agent-prompt .agent-does,.agent-prompt .agent-out{opacity:1;transform:none;transition:none}
|
|
702
|
+
}
|
|
703
|
+
.agent-install{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 0;padding:13px 18px;border:1px solid rgba(124,196,255,.3);border-radius:var(--r-sm);background:rgba(8,13,21,.7)}
|
|
704
|
+
.agent-install code{font-family:var(--mono);font-size:14px;color:var(--ink)}
|
|
705
|
+
.agent-install span{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
|
|
706
|
+
.agent-install b{color:var(--dim);font-weight:600}
|
|
707
|
+
.agent-prompts{display:grid;grid-template-columns:1fr;gap:34px;margin:32px 0 0}
|
|
708
|
+
.agent-prompt{padding:0;text-align:left}
|
|
709
|
+
.agent-chips{display:flex;align-items:center;gap:8px;margin:0 0 12px}
|
|
710
|
+
.agent-chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:5px 11px;background:rgba(255,255,255,.02)}
|
|
711
|
+
/* Real app composers. Text is positioned in % of the shot so it tracks the
|
|
712
|
+
image at every width -- derived from measured pixel geometry:
|
|
713
|
+
claude.png 1610x264 text band y136-160, left inset x54
|
|
714
|
+
codex.png 1490x204 text band y42-64, left inset x84 */
|
|
715
|
+
.agent-shot{margin:0}
|
|
716
|
+
.agent-frame{position:relative;container-type:inline-size;overflow:hidden}
|
|
717
|
+
.is-claude .agent-frame{border-radius:2.5cqw}
|
|
718
|
+
.is-codex .agent-frame{border-radius:.6cqw}
|
|
719
|
+
.agent-frame img{display:block;width:100%;height:auto}
|
|
720
|
+
.agent-type{position:absolute;display:flex;align-items:center;white-space:nowrap;overflow:hidden;pointer-events:none}
|
|
721
|
+
.is-claude .agent-type{left:5.22%;right:6%;top:17.7%;height:16.2%;font-family:var(--sans);font-size:1.02cqw;color:#f5f6f6}
|
|
722
|
+
.is-codex .agent-type{left:1.30%;right:6%;top:44.4%;height:19.4%;font-family:var(--sans);font-size:0.98cqw;color:#f5f4ee}
|
|
723
|
+
.agent-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;animation:agentblink 1s step-end infinite;flex:0 0 auto}
|
|
724
|
+
.is-claude .agent-caret{background:#f5f6f6}
|
|
725
|
+
.is-codex .agent-caret{background:#d87656}
|
|
726
|
+
@keyframes agentblink{50%{opacity:0}}
|
|
727
|
+
.agent-ask{margin:14px 0 16px;font-size:19px;line-height:1.45;color:var(--ink)}
|
|
728
|
+
.agent-does{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding:11px 14px;border-radius:10px;background:rgba(8,13,21,.6);border:1px solid rgba(124,196,255,.18)}
|
|
729
|
+
.agent-tool{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7cc4ff;border:1px solid rgba(124,196,255,.4);border-radius:999px;padding:3px 9px;flex:0 0 auto}
|
|
730
|
+
.agent-does code{font-family:var(--mono);font-size:13px;color:var(--ink);overflow-wrap:anywhere}
|
|
731
|
+
.agent-out{margin:16px 0 0;font-family:var(--mono);font-size:14.5px;line-height:1.65;color:var(--dim)}
|
|
732
|
+
.agent-out b{color:var(--ink);font-weight:600}
|
|
733
|
+
.agent-caption{margin:20px 0 0;color:var(--mute);font-size:14px}
|
|
734
|
+
.agent-caption code{font-family:var(--mono);font-size:12.5px;color:var(--dim)}
|
|
735
|
+
@media (max-width:640px){.agent-prompts{grid-template-columns:1fr}.agent-ask{font-size:17px}}
|
|
736
|
+
.cli-install-hint{display:block;margin-top:8px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
|
|
737
|
+
.cli-install-cmd{padding:16px 20px;border-radius:var(--r-sm);border:1px solid rgba(124,196,255,.34);background:rgba(17,25,37,.9);max-width:100%;overflow-x:auto}
|
|
738
|
+
.cli-install-cmd code{font-family:var(--mono);font-size:var(--fs-base);letter-spacing:.02em;color:var(--blue2);white-space:nowrap}
|
|
739
|
+
.cli-install-gate{display:block;font-family:var(--sans);font-size:var(--fs-sm);letter-spacing:0;color:var(--mute);margin:0;line-height:1.7}
|
|
740
|
+
.cli-install-gate b{display:inline;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:#071018;background:var(--blue2);border-radius:var(--r-pill);padding:4px 9px;white-space:nowrap}
|
|
741
|
+
.cli-install-gate a{color:var(--blue2);text-decoration:underline;text-underline-offset:3px}
|
|
742
|
+
.cli-frame{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#0d1420;box-shadow:0 24px 60px rgba(0,0,0,.35)}
|
|
743
|
+
.cli-frame img{display:block;width:100%;height:auto}
|
|
744
|
+
.cli-cap{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:10px;text-align:left}
|
|
745
|
+
.cli-code{margin-top:14px;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(17,25,37,.9);font-family:var(--mono);font-size:var(--fs-xs);line-height:1.55;color:var(--cool);overflow-x:auto;text-align:left}
|
|
746
|
+
.cli-code b{color:var(--blue2);font-weight:500}
|
|
747
|
+
|
|
748
|
+
.evolve-rail{
|
|
749
|
+
display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
|
|
750
|
+
padding:14px 16px 4px;
|
|
751
|
+
}
|
|
752
|
+
.evolve-pill{
|
|
753
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
|
|
754
|
+
border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--cool);
|
|
755
|
+
}
|
|
756
|
+
.evolve-pill.on{border-color:rgba(124,196,255,.35);color:var(--blue2)}
|
|
757
|
+
|
|
758
|
+
.wires{height:40px;position:relative}
|
|
759
|
+
.wires svg{width:100%;height:100%;display:block;overflow:visible}
|
|
760
|
+
.wires path{
|
|
761
|
+
fill:none;stroke:rgba(124,196,255,.58);stroke-width:1.5;stroke-linecap:round;
|
|
762
|
+
stroke-dasharray:1;stroke-dashoffset:1;
|
|
763
|
+
transition:stroke-dashoffset 1.3s var(--ease);
|
|
764
|
+
}
|
|
765
|
+
.wires.in path{stroke-dashoffset:0}
|
|
766
|
+
.wires path.w-2{transition-delay:.12s}
|
|
767
|
+
.wires path.w-3{transition-delay:.2s}
|
|
768
|
+
.wires path.w-4{transition-delay:.28s}
|
|
769
|
+
.wires path.w-5{transition-delay:.36s}
|
|
770
|
+
.wires circle{fill:var(--blue);opacity:0;transition:opacity .5s var(--ease) .7s}
|
|
771
|
+
.wires.in circle{opacity:1}
|
|
772
|
+
.wires.multi path.w-poly{stroke:rgba(59,130,246,.55)}
|
|
773
|
+
.wires.multi path.w-hl{stroke:rgba(80,210,193,.55)}
|
|
774
|
+
.wires.multi path.w-rh{stroke:rgba(215,255,77,.6)}
|
|
775
|
+
.wires.multi path.w-sol{stroke:rgba(153,69,255,.55)}
|
|
776
|
+
.wires.multi circle.c-poly{fill:var(--poly)}
|
|
777
|
+
.wires.multi circle.c-hl{fill:var(--hl)}
|
|
778
|
+
.wires.multi circle.c-rh{fill:var(--rh)}
|
|
779
|
+
.wires.multi circle.c-sol{fill:var(--sol)}
|
|
780
|
+
|
|
781
|
+
/* Live lanes. The wires draw once on scroll and then sit still, which reads as
|
|
782
|
+
a diagram rather than a control plane moving traffic. A second stroked copy
|
|
783
|
+
of each path runs a short dash along it on a loop, so every lane shows flow
|
|
784
|
+
in its own colour. Pure CSS on paths that already exist -- no extra DOM. */
|
|
785
|
+
.wires.in path{animation:lane-flow 2.6s linear infinite}
|
|
786
|
+
.wires.in path.w-2{animation-delay:.35s}
|
|
787
|
+
.wires.in path.w-3{animation-delay:.7s}
|
|
788
|
+
.wires.in path.w-4{animation-delay:1.05s}
|
|
789
|
+
.wires.in path.w-5{animation-delay:1.4s}
|
|
790
|
+
@keyframes lane-flow{
|
|
791
|
+
0%{stroke-dasharray:.16 .84;stroke-dashoffset:1}
|
|
792
|
+
100%{stroke-dasharray:.16 .84;stroke-dashoffset:0}
|
|
793
|
+
}
|
|
794
|
+
/* The endpoint dots breathe so the lane reads as connected, not decorative. */
|
|
795
|
+
.wires.in circle{animation:lane-node 2.6s var(--ease) infinite}
|
|
796
|
+
@keyframes lane-node{0%,100%{opacity:.55;r:1.4}50%{opacity:1;r:1.8}}
|
|
797
|
+
@media (prefers-reduced-motion:reduce){
|
|
798
|
+
.wires.in path,.wires.in circle{animation:none}
|
|
799
|
+
.wires.in path{stroke-dasharray:1;stroke-dashoffset:0}
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
/* route detail cards */
|
|
803
|
+
.route-card{background:rgba(17,25,37,.94);
|
|
804
|
+
background:var(--bg);padding:22px 20px;min-height:150px;
|
|
805
|
+
display:flex;flex-direction:column;gap:10px;transition:background .35s;
|
|
806
|
+
}
|
|
807
|
+
.route-card:hover{background:var(--panel-2)}
|
|
808
|
+
.route-card h3{font-family:var(--display);font-weight:400;font-size:var(--fs-lg);display:flex;align-items:center;gap:10px}
|
|
809
|
+
.route-card h3 img{width:20px;height:20px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.06)}
|
|
810
|
+
.route-card .where{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
|
|
811
|
+
.route-card p{color:var(--cool);font-size:var(--fs-base);line-height:1.55}
|
|
812
|
+
.route-card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
|
|
813
|
+
.route-card.p-add{grid-column:1/-1;align-items:center;text-align:center;justify-content:center;gap:14px;padding:30px 22px}
|
|
814
|
+
.route-card.p-add .chips{justify-content:center;margin-top:4px}
|
|
815
|
+
.route-card.p-add p{max-width:46ch}
|
|
816
|
+
.chip-s{
|
|
817
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
|
|
818
|
+
border:1px solid var(--line);border-radius:999px;padding:5px 8px;color:var(--cool);
|
|
819
|
+
}
|
|
820
|
+
.band-head{max-width:var(--max);margin:96px auto 0;padding:0 var(--pad)}
|
|
821
|
+
.band-head .eyebrow{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:3.4px;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
|
|
822
|
+
.band-head h2{font-family:var(--display);font-weight:400;font-size:var(--fs-2xl);line-height:1.06;letter-spacing:-.01em}
|
|
823
|
+
@media (max-width:760px){.band-head{margin-top:60px}}
|
|
824
|
+
.why-band{
|
|
825
|
+
border-top:1px solid var(--line);
|
|
826
|
+
padding:22px 24px 24px;
|
|
827
|
+
background:rgba(11,16,24,.55);
|
|
828
|
+
}
|
|
829
|
+
.why-band p{
|
|
830
|
+
max-width:62ch;margin:0 auto;text-align:center;
|
|
831
|
+
font-family:var(--display);font-style:italic;font-weight:400;
|
|
832
|
+
font-size:var(--fs-md);line-height:1.4;color:var(--blue2);
|
|
833
|
+
}
|
|
834
|
+
.why-band span{
|
|
835
|
+
display:block;margin-top:10px;
|
|
836
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-style:normal;
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
/* chains */
|
|
840
|
+
.chain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
|
|
841
|
+
.chain{transition:border-color .5s var(--ease),transform .5s var(--ease),background .5s var(--ease)}
|
|
842
|
+
.chain:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--blue) 34%,transparent)}
|
|
843
|
+
.chain .badge{font-variant-numeric:tabular-nums;letter-spacing:.1em}
|
|
844
|
+
.chain .badge:not(.live){opacity:.62;border-style:dashed}
|
|
845
|
+
.hl-surface{margin-top:34px;border:1px solid var(--line);border-radius:var(--r-md);padding:20px;background:rgba(124,196,255,.02)}
|
|
846
|
+
.hl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
|
|
847
|
+
.hl-grid article{border:1px solid rgba(124,196,255,.22);border-radius:var(--r-sm);padding:16px 17px;background:rgba(17,25,37,.92)}
|
|
848
|
+
.hl-grid h3{font-family:var(--display);font-size:var(--fs-base);font-weight:500;color:var(--ink);margin:0 0 6px}
|
|
849
|
+
.hl-grid p{font-size:var(--fs-sm);line-height:1.6;color:var(--cool);margin:0}
|
|
850
|
+
.hl-note{margin:16px 0 0;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;color:var(--cool);opacity:.62}
|
|
851
|
+
.hip3{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
|
|
852
|
+
.hl-note code{font-family:var(--mono);color:var(--blue2);opacity:.9}
|
|
853
|
+
@media(max-width:900px){.hl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
|
854
|
+
@media(max-width:620px){.hl-grid{grid-template-columns:1fr}}
|
|
855
|
+
.chain{
|
|
856
|
+
border:1px solid var(--line);border-radius:var(--r-md);padding:16px;
|
|
857
|
+
background:linear-gradient(180deg, rgba(124,196,255,.06), transparent 55%), rgba(17,25,37,.94);
|
|
858
|
+
min-height:100px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;
|
|
859
|
+
transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
|
|
860
|
+
}
|
|
861
|
+
.chain:hover{border-color:rgba(124,196,255,.45);transform:translate3d(0,-3px,0)}
|
|
862
|
+
.chain-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
|
|
863
|
+
.chain .nm{font-family:var(--display);font-size:var(--fs-md);display:flex;align-items:center;gap:8px}
|
|
864
|
+
.chain .nm img{width:18px;height:18px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.06)}
|
|
865
|
+
.chain .id{font-family:var(--mono);font-size:var(--fs-xs);color:var(--blue);white-space:nowrap;padding-top:4px}
|
|
866
|
+
.chain .meta{
|
|
867
|
+
display:flex;justify-content:space-between;gap:8px;
|
|
868
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
|
|
869
|
+
}
|
|
870
|
+
.badge{border:1px solid var(--line);border-radius:999px;padding:4px 8px;color:var(--cool)}
|
|
871
|
+
.badge.live{border-color:rgba(124,196,255,.35);color:var(--blue)}
|
|
872
|
+
|
|
873
|
+
.venues{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:rgba(17,25,37,.85)}
|
|
874
|
+
.venues{background:rgba(17,25,37,.86);border:1px solid rgba(124,196,255,.16);border-radius:var(--r-md);overflow:hidden;margin-bottom:14px}
|
|
875
|
+
.venues-head{
|
|
876
|
+
padding:11px 14px;border-bottom:1px solid var(--line);
|
|
877
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
|
|
878
|
+
display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
|
|
879
|
+
}
|
|
880
|
+
.venues-head b{color:var(--blue);font-weight:500}
|
|
881
|
+
.marquee{overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
|
|
882
|
+
.marquee:hover .track{animation-play-state:paused}
|
|
883
|
+
.marquee + .marquee{border-top:1px solid rgba(124,196,255,.08)}
|
|
884
|
+
.track{display:inline-flex;gap:26px;padding:12px 0;animation:scroll var(--marquee-duration,240s) linear infinite;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}
|
|
885
|
+
.marquee.rev .track{animation-direction:reverse}
|
|
886
|
+
a.chip{text-decoration:none;color:inherit}
|
|
887
|
+
.chip{
|
|
888
|
+
display:inline-flex;align-items:center;gap:10px;
|
|
889
|
+
font-size:var(--fs-base);letter-spacing:-.015em;text-transform:none;color:var(--proto-color,var(--cool));
|
|
890
|
+
padding:8px 13px;border:1px solid rgba(124,196,255,.1);border-radius:999px;background:rgba(11,16,24,.38);
|
|
891
|
+
box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
|
|
892
|
+
transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
|
|
893
|
+
}
|
|
894
|
+
a.chip:hover{border-color:rgba(124,196,255,.3);background:rgba(21,32,49,.6);transform:translate3d(0,-2px,0)}
|
|
895
|
+
.chip img{width:18px;height:18px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.06)}
|
|
896
|
+
.chip.wm-chip{padding:11px 18px}
|
|
897
|
+
.chip img.wm{width:auto;height:27px;max-width:180px;border-radius:0;object-fit:contain;background:none;opacity:1}
|
|
898
|
+
.chip img.wm.tall{width:30px;height:30px;min-width:30px;max-width:30px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
|
|
899
|
+
.chip img.wm.mono{filter:brightness(0) invert(1)}
|
|
900
|
+
|
|
901
|
+
.chip .wordmark{font-family:var(--proto-font,var(--sans));font-weight:var(--proto-weight,750);font-style:var(--proto-style,normal);text-transform:var(--proto-transform,none);letter-spacing:var(--proto-track,-.025em);line-height:1.2}
|
|
902
|
+
.proto-uniswap{--proto-font:"Inter",var(--sans);--proto-color:#ff4dcb;--proto-weight:850}
|
|
903
|
+
.proto-hyperliquid{--proto-font:var(--display);--proto-style:italic;--proto-color:#50d2c1;--proto-weight:500;--proto-track:.01em}
|
|
904
|
+
.proto-polymarket{--proto-font:"Manrope",var(--sans);--proto-color:#7aa7ff;--proto-weight:800;--proto-track:-.035em}
|
|
905
|
+
.proto-aerodrome,.proto-velodrome{--proto-font:"Space Grotesk",var(--sans);--proto-color:#f2f7ff;--proto-weight:700;--proto-transform:lowercase}
|
|
906
|
+
.proto-pancakeswap{--proto-font:"DM Sans",var(--sans);--proto-color:#d1884f;--proto-weight:700}
|
|
907
|
+
.proto-quickswap{--proto-font:"Archivo Black",var(--sans);--proto-color:#35a7ff;--proto-weight:800;--proto-transform:uppercase;--proto-track:.005em}
|
|
908
|
+
.proto-lfj{--proto-font:"Sora",var(--sans);--proto-color:#ff6357;--proto-weight:700;--proto-transform:uppercase;--proto-track:.05em}
|
|
909
|
+
.proto-hyperswap{--proto-font:"Space Grotesk",var(--sans);--proto-color:#69f0d8;--proto-weight:700}
|
|
910
|
+
.proto-curve{--proto-font:"Times New Roman",serif;--proto-color:#f7f3dd;--proto-weight:700;--proto-track:.01em}
|
|
911
|
+
.proto-balancer{--proto-font:"Inter",var(--sans);--proto-color:#f6f6f6;--proto-weight:850;--proto-track:-.055em}
|
|
912
|
+
.proto-pendle{--proto-font:"Sora",var(--sans);--proto-color:#a7f3d0;--proto-weight:700}
|
|
913
|
+
.proto-morpho{--proto-font:"Manrope",var(--sans);--proto-color:#75b9ff;--proto-weight:800;--proto-track:-.04em}
|
|
914
|
+
.proto-gmx{--proto-font:"Archivo Black",var(--sans);--proto-color:#41d3ff;--proto-weight:800;--proto-transform:uppercase;--proto-track:.04em}
|
|
915
|
+
.proto-lifi{--proto-font:"Inter",var(--sans);--proto-color:#d8b4fe;--proto-weight:850;--proto-transform:uppercase;--proto-track:.02em}
|
|
916
|
+
.proto-relay{--proto-font:"Space Grotesk",var(--sans);--proto-color:#f2f7ff;--proto-weight:700;--proto-transform:lowercase}
|
|
917
|
+
.proto-paraswap{--proto-font:"Manrope",var(--sans);--proto-color:#ff9a76;--proto-weight:800}
|
|
918
|
+
.proto-odos{--proto-font:"Sora",var(--sans);--proto-color:#f0f9ff;--proto-weight:700;--proto-transform:lowercase}
|
|
919
|
+
.proto-cow{--proto-font:"DM Sans",var(--sans);--proto-color:#fcd34d;--proto-weight:700}
|
|
920
|
+
.proto-oneinch{--proto-font:"Inter",var(--sans);--proto-color:#9ec5ff;--proto-weight:850;--proto-track:-.045em}
|
|
921
|
+
.proto-jupiter{--proto-font:"Space Grotesk",var(--sans);--proto-color:#f6a5ff;--proto-weight:700}
|
|
922
|
+
.proto-across{--proto-font:"Manrope",var(--sans);--proto-color:#ff6b9b;--proto-weight:800}
|
|
923
|
+
.proto-stargate{--proto-font:"Sora",var(--sans);--proto-color:#9ddcff;--proto-weight:700}
|
|
924
|
+
.proto-magic-eden{--proto-font:"Archivo Black",var(--sans);--proto-color:#dfc7ff;--proto-weight:800;--proto-track:.01em}
|
|
925
|
+
@keyframes scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
|
|
926
|
+
|
|
927
|
+
|
|
928
|
+
|
|
929
|
+
/* dense premium layer: protocol atlas + hero metrics */
|
|
930
|
+
.home-stats{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line);padding-top:26px;
|
|
931
|
+
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
|
|
932
|
+
width:100%;margin:28px 0 0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
|
|
933
|
+
background:var(--line);position:relative;z-index:3;box-shadow:0 24px 70px rgba(0,0,0,.28);
|
|
934
|
+
}
|
|
935
|
+
.home-stat{background:rgba(17,25,37,.82);padding:15px 16px 14px;text-align:left;min-height:86px;position:relative;overflow:hidden}
|
|
936
|
+
.home-stat::after{content:"";position:absolute;inset:-1px;opacity:0;background:radial-gradient(160px 120px at var(--mx,50%) var(--my,50%),rgba(124,196,255,.16),transparent 65%);transition:opacity .35s var(--ease)}
|
|
937
|
+
.home-stat:hover::after{opacity:1}
|
|
938
|
+
.home-stat b{display:block;font-family:var(--display);font-weight:400;font-size:var(--fs-2xl);line-height:.9;color:var(--ink);letter-spacing:-.03em;position:relative;z-index:1}
|
|
939
|
+
.home-stat .stat-suffix{font-size:.42em;letter-spacing:0;color:var(--cool);margin-left:.18em;vertical-align:.42em}
|
|
940
|
+
.home-stat span{display:block;margin-top:9px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);position:relative;z-index:1}
|
|
941
|
+
|
|
942
|
+
.protocol-atlas{max-width:min(1280px,100%)}
|
|
943
|
+
.protocol-atlas .section-title{max-width:15ch;font-size:var(--fs-3xl);line-height:.94;letter-spacing:-.035em}
|
|
944
|
+
.protocol-atlas .section-lede{max-width:62ch}
|
|
945
|
+
.atlas-sticky{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,rgba(124,196,255,.10),rgba(17,25,37,.88) 42%,rgba(11,16,24,.94));box-shadow:0 30px 90px rgba(0,0,0,.34)}
|
|
946
|
+
.atlas-orbit{height:220px;position:relative;display:grid;place-items:center;border-bottom:1px solid var(--line);overflow:hidden}
|
|
947
|
+
.atlas-orbit::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(124,196,255,.24),rgba(124,196,255,.08) 28%,transparent 62%);filter:blur(12px);animation:home-breathe 5.8s var(--ease) infinite}
|
|
948
|
+
.atlas-orbit .orbital{width:124px;height:124px;filter:drop-shadow(0 0 32px rgba(124,196,255,.4))}
|
|
949
|
+
.atlas-copy{padding:clamp(20px,3vw,30px)}
|
|
950
|
+
.atlas-copy h3{font-family:var(--display);font-weight:400;font-size:var(--fs-xl);line-height:1;letter-spacing:-.025em;color:var(--ink)}
|
|
951
|
+
.atlas-sub{margin-top:16px;color:var(--cool);font-size:var(--fs-base);line-height:1.68;max-width:34ch}
|
|
952
|
+
|
|
953
|
+
@media (max-width:960px){
|
|
954
|
+
.home-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
955
|
+
.atlas-sticky{position:relative;top:auto}
|
|
956
|
+
}
|
|
957
|
+
@media (max-width:560px){.home-stats{grid-template-columns:1fr}.home-stat{min-height:0}.atlas-orbit{height:170px}}
|
|
958
|
+
|
|
959
|
+
|
|
960
|
+
|
|
961
|
+
/* high-end motion surface, replaces visible DEX/lending lists */
|
|
962
|
+
.motion-lab{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.55fr);gap:clamp(22px,4vw,54px);align-items:start;margin-top:clamp(26px,5vw,58px);perspective:1200px}
|
|
963
|
+
.motion-main{display:flex;flex-direction:column;gap:16px;min-width:0}
|
|
964
|
+
.motion-command{transform-style:preserve-3d}
|
|
965
|
+
.toolbelt{display:flex;flex-wrap:wrap;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px;background:rgba(11,16,24,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);overflow:hidden}
|
|
966
|
+
.toolbelt span{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--blue2);border:1px solid rgba(124,196,255,.18);border-radius:999px;padding:8px 10px;background:rgba(124,196,255,.045);white-space:nowrap}
|
|
967
|
+
.operator-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
|
|
968
|
+
.motion-card{--mx:50%;--my:50%;position:relative;min-height:252px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;padding:clamp(20px,3vw,30px);background:linear-gradient(155deg,rgba(124,196,255,.095),rgba(17,25,37,.84) 34%,rgba(11,16,24,.96));box-shadow:0 30px 90px rgba(0,0,0,.22);transform-style:preserve-3d;will-change:transform;transition:transform .55s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
|
|
969
|
+
.motion-card::before{content:"";position:absolute;inset:-40%;opacity:.62;background:radial-gradient(340px 220px at var(--mx) var(--my),rgba(184,240,255,.18),transparent 58%),conic-gradient(from var(--spin,0deg),transparent,rgba(124,196,255,.24),transparent 34%,rgba(80,210,193,.18),transparent 66%);filter:blur(26px);transform:translateZ(-1px);animation:card-spin 12s linear infinite}
|
|
970
|
+
.motion-card::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.08) 44%,transparent 58%);transform:translateX(-120%);transition:transform .9s var(--ease);pointer-events:none}
|
|
971
|
+
.motion-card:hover{border-color:rgba(184,240,255,.38);box-shadow:0 34px 110px rgba(0,0,0,.34),0 0 0 1px rgba(184,240,255,.06)}
|
|
972
|
+
.motion-card:hover::after{transform:translateX(120%)}
|
|
973
|
+
.motion-card h3{position:relative;z-index:1;margin:10px 0 14px;font-family:var(--display);font-weight:400;font-size:var(--fs-2xl);line-height:.96;letter-spacing:-.03em}
|
|
974
|
+
.motion-card p{position:relative;z-index:1;color:var(--cool);font-size:var(--fs-base);line-height:1.62;max-width:34ch}
|
|
975
|
+
.motion-scan{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(124,196,255,.08),transparent);height:38%;animation:scan-pass 4.8s var(--ease) infinite;mix-blend-mode:screen}
|
|
976
|
+
.word-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}.word-mask>span{display:inline-block}
|
|
977
|
+
@keyframes card-spin{to{--spin:360deg}}
|
|
978
|
+
@keyframes scan-pass{0%,100%{transform:translateY(-115%);opacity:0}18%,70%{opacity:.7}100%{transform:translateY(215%);opacity:0}}
|
|
979
|
+
@media (max-width:960px){.motion-lab{grid-template-columns:1fr}.operator-grid{grid-template-columns:1fr}.toolbelt{border-radius:var(--r-md)}.motion-card{min-height:220px}}
|
|
980
|
+
@media (prefers-reduced-motion:reduce){.motion-card::before,.motion-scan{animation:none}.motion-card{will-change:auto}}
|
|
981
|
+
|
|
982
|
+
/* ── hero: product-first split. Real artifact leads, orb is ambience ── */
|
|
983
|
+
.hero-split{
|
|
984
|
+
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
|
|
985
|
+
gap:clamp(28px,4vw,56px);align-items:center;text-align:left;width:100%;
|
|
986
|
+
}
|
|
987
|
+
.hero-lede{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
|
|
988
|
+
.hero-lede .home-kicker{margin-bottom:14px}
|
|
989
|
+
/* One shared measure so the headline and the paragraph under it are the same
|
|
990
|
+
block width; the headline is sized to break onto two lines inside it. */
|
|
991
|
+
.hero-lede{--hero-measure:min(100%,620px)}
|
|
992
|
+
.hero-split .home-title{
|
|
993
|
+
font-size:clamp(40px,4.4vw,58px);line-height:1.02;letter-spacing:-.03em;
|
|
994
|
+
text-transform:none;text-align:left;margin:0;
|
|
995
|
+
max-width:var(--hero-measure);
|
|
996
|
+
}
|
|
997
|
+
.hero-sub{
|
|
998
|
+
max-width:var(--hero-measure);margin:20px 0 0;color:var(--cool);
|
|
999
|
+
font-size:var(--fs-base);line-height:1.65;text-shadow:0 1px 20px rgba(0,0,0,.6);
|
|
1000
|
+
}
|
|
1001
|
+
.hero-split .home-actions{justify-content:flex-start;margin-top:30px}
|
|
1002
|
+
.enter-cta.primary{
|
|
1003
|
+
background:linear-gradient(180deg,rgba(184,240,255,.98),rgba(124,196,255,.9));
|
|
1004
|
+
color:#071018;border-color:transparent;font-weight:600;
|
|
1005
|
+
}
|
|
1006
|
+
.enter-cta.primary::after{color:#071018}
|
|
1007
|
+
.enter-cta.primary:hover{box-shadow:0 0 0 1px rgba(184,240,255,.4),0 22px 54px rgba(124,196,255,.22)}
|
|
1008
|
+
.enter-cta.ghost{background:none}
|
|
1009
|
+
.hero-note-line{
|
|
1010
|
+
margin-top:18px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;
|
|
1011
|
+
text-transform:uppercase;color:var(--mute);
|
|
1012
|
+
}
|
|
1013
|
+
.hero-note-line code{color:var(--blue2);font-size:var(--fs-micro)}
|
|
1014
|
+
/* Two unbreakable halves joined by a centered dot. On wide viewports they sit
|
|
1015
|
+
on one line; below 1180px they stack and the dot is dropped, so nothing strands. */
|
|
1016
|
+
.hero-note-line{display:flex;flex-wrap:nowrap;align-items:baseline;column-gap:.9em;row-gap:4px}
|
|
1017
|
+
.hero-note-line span{white-space:nowrap}
|
|
1018
|
+
.hero-note-sep{font-style:normal;color:var(--blue2)}
|
|
1019
|
+
@media (max-width:1180px){
|
|
1020
|
+
.hero-note-line{flex-direction:column;align-items:flex-start}
|
|
1021
|
+
.hero-note-sep{display:none}
|
|
1022
|
+
}
|
|
1023
|
+
/* Five sequential steps. Numbers carry the order, so these are lighter than
|
|
1024
|
+
moat-cards: no heavy border box, just a rule per column. At five across a
|
|
1025
|
+
2-column grid would strand the last one, hence its own track sizing. */
|
|
1026
|
+
.steps-grid{
|
|
1027
|
+
display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
|
|
1028
|
+
gap:clamp(18px,2.4vw,30px);margin-top:22px;
|
|
1029
|
+
}
|
|
1030
|
+
/* Trailing "see the full X" line under a grid. Shares moat-grid's rhythm so
|
|
1031
|
+
sections do not each invent their own spacing. */
|
|
1032
|
+
.agent-icons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
|
|
1033
|
+
.agent-icons span{
|
|
1034
|
+
display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
|
|
1035
|
+
border:1px solid var(--line);border-radius:999px;
|
|
1036
|
+
font-family:var(--mono);font-size:var(--fs-micro);color:var(--cool);letter-spacing:.08em;
|
|
1037
|
+
}
|
|
1038
|
+
.section-more{margin-top:22px}
|
|
1039
|
+
.section-more a{color:var(--blue2);text-decoration:none;transition:color .25s}
|
|
1040
|
+
.section-more a:hover{color:var(--ink)}
|
|
1041
|
+
.step-card{position:relative;padding-top:18px;border-top:1px solid var(--line-2)}
|
|
1042
|
+
.step-card .n{
|
|
1043
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;
|
|
1044
|
+
text-transform:uppercase;color:var(--blue);opacity:.85;
|
|
1045
|
+
}
|
|
1046
|
+
.step-card h3{
|
|
1047
|
+
font-family:var(--display);font-weight:400;font-size:var(--fs-lg);
|
|
1048
|
+
line-height:1.18;margin:10px 0 8px;color:var(--ink);
|
|
1049
|
+
}
|
|
1050
|
+
.step-card p{color:var(--cool);font-size:var(--fs-sm);line-height:1.6}
|
|
1051
|
+
/* Two-column client/chain roster on the landing. Chips are static labels, not
|
|
1052
|
+
links: the section header carries the one link that matters. */
|
|
1053
|
+
.reach-cols{
|
|
1054
|
+
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
|
|
1055
|
+
gap:clamp(20px,3vw,40px);margin-top:22px;
|
|
1056
|
+
}
|
|
1057
|
+
.reach-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
|
|
1058
|
+
.reach-chips span{
|
|
1059
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;
|
|
1060
|
+
color:var(--cool);border:1px solid var(--line);border-radius:999px;
|
|
1061
|
+
padding:7px 13px;background:rgba(124,196,255,.03);
|
|
1062
|
+
transition:border-color .25s,color .25s;
|
|
1063
|
+
}
|
|
1064
|
+
.reach-chips span:hover{border-color:var(--line-2);color:var(--ink)}
|
|
1065
|
+
.cmd-hint a{color:var(--blue2);text-decoration:none;transition:color .25s}
|
|
1066
|
+
.cmd-hint a:hover{color:var(--ink)}
|
|
1067
|
+
/* Inline links inside body copy need to read as links; the global rule strips
|
|
1068
|
+
color and underline for nav and card-wrapper anchors. */
|
|
1069
|
+
.section-lede a{
|
|
1070
|
+
color:var(--blue2);text-decoration:none;
|
|
1071
|
+
border-bottom:1px solid rgba(124,196,255,.35);
|
|
1072
|
+
transition:border-color .25s,color .25s;
|
|
1073
|
+
}
|
|
1074
|
+
.section-lede a:hover{color:var(--ink);border-bottom-color:var(--blue)}
|
|
1075
|
+
.moat-card p a{
|
|
1076
|
+
color:var(--blue2);text-decoration:none;
|
|
1077
|
+
border-bottom:1px solid rgba(124,196,255,.35);
|
|
1078
|
+
transition:border-color .25s,color .25s;
|
|
1079
|
+
}
|
|
1080
|
+
.moat-card p a:hover{color:var(--ink);border-bottom-color:var(--blue)}
|
|
1081
|
+
.hero-installer{
|
|
1082
|
+
margin:clamp(24px,4vw,38px) 0 0;width:100%;border:1px solid var(--line-2);border-radius:var(--r-md);
|
|
1083
|
+
overflow:hidden;background:linear-gradient(145deg,rgba(17,25,37,.95),rgba(10,16,25,.98));
|
|
1084
|
+
box-shadow:0 28px 80px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);
|
|
1085
|
+
}
|
|
1086
|
+
.hero-install-tabs{display:flex;align-items:center;border-bottom:1px solid var(--line);padding:0 18px;gap:4px}
|
|
1087
|
+
.hero-install-tab{
|
|
1088
|
+
appearance:none;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--mute);
|
|
1089
|
+
padding:14px 16px 12px;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
|
|
1090
|
+
cursor:pointer;transition:color .2s,border-color .2s,background .2s;
|
|
1091
|
+
}
|
|
1092
|
+
.hero-install-tab:hover{color:var(--ink)}
|
|
1093
|
+
.hero-install-tab[aria-selected="true"]{color:var(--blue2);border-bottom-color:var(--blue);background:rgba(124,196,255,.04)}
|
|
1094
|
+
.hero-install-panel{padding:18px 20px 16px}
|
|
1095
|
+
.hero-install-panel[hidden]{display:none}
|
|
1096
|
+
.hero-install-command{
|
|
1097
|
+
width:100%;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:18px;
|
|
1098
|
+
border:0;background:transparent;color:var(--blue2);padding:0;text-align:left;cursor:pointer;
|
|
1099
|
+
}
|
|
1100
|
+
.hero-install-command code{min-width:0;overflow-x:auto;white-space:nowrap;font-size:clamp(12px,1.4vw,17px);line-height:1.5;scrollbar-width:none}
|
|
1101
|
+
.hero-install-command code::-webkit-scrollbar{display:none}
|
|
1102
|
+
.hero-install-copy{flex:none;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
|
|
1103
|
+
.hero-install-command:hover .hero-install-copy{color:var(--blue2)}
|
|
1104
|
+
.hero-install-meta{
|
|
1105
|
+
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px;
|
|
1106
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
|
|
1107
|
+
}
|
|
1108
|
+
.hero-install-meta a{color:var(--blue2);text-decoration:none;border-bottom:1px solid rgba(124,196,255,.35);padding-bottom:2px}
|
|
1109
|
+
.hero-install-meta a:hover{border-bottom-color:var(--blue2)}
|
|
1110
|
+
@media (max-width:620px){
|
|
1111
|
+
.hero-install-tabs{padding:0 10px}
|
|
1112
|
+
.hero-install-tab{flex:1;padding-inline:8px;font-size:9px}
|
|
1113
|
+
.hero-install-panel{padding:16px}
|
|
1114
|
+
.hero-install-command{align-items:flex-start;gap:10px}
|
|
1115
|
+
.hero-install-meta{align-items:flex-start;flex-direction:column;gap:8px}
|
|
1116
|
+
}
|
|
1117
|
+
|
|
1118
|
+
.hero-product{position:relative;margin:0;min-width:0;perspective:1600px;overflow:clip}
|
|
1119
|
+
.hero-product .hero-art{display:none}
|
|
1120
|
+
.hero-product .hero-orb{width:min(100%,560px)}
|
|
1121
|
+
.hero-shot{
|
|
1122
|
+
position:relative;z-index:1;border-radius:var(--r-md);overflow:hidden;
|
|
1123
|
+
border:1px solid var(--line-2);background:#05080D;
|
|
1124
|
+
box-shadow:0 40px 120px rgba(0,0,0,.62),0 0 0 1px rgba(184,240,255,.06),inset 0 1px 0 rgba(255,255,255,.05);
|
|
1125
|
+
transform:perspective(2000px) rotateY(-4deg) rotateX(1.5deg);
|
|
1126
|
+
transition:transform 1s var(--ease),box-shadow 1s var(--ease);
|
|
1127
|
+
/* Bleed toward the viewport edge so the shot reads at a legible size. */
|
|
1128
|
+
width:calc(100% + max(0px,(100vw - var(--max))/2 - var(--pad) + 20px));
|
|
1129
|
+
max-width:none;
|
|
1130
|
+
}
|
|
1131
|
+
.hero-shot img{display:block;width:100%;height:auto}
|
|
1132
|
+
.hero-shot::after{
|
|
1133
|
+
content:"";position:absolute;inset:0;pointer-events:none;
|
|
1134
|
+
background:linear-gradient(130deg,rgba(184,240,255,.1),transparent 42%);
|
|
1135
|
+
}
|
|
1136
|
+
.hero-product:hover .hero-shot{transform:perspective(2000px) rotateY(-1deg) rotateX(.5deg)}
|
|
1137
|
+
.hero-product figcaption{
|
|
1138
|
+
position:relative;z-index:1;margin-top:14px;font-family:var(--mono);font-size:var(--fs-micro);
|
|
1139
|
+
letter-spacing:.2em;text-transform:uppercase;color:var(--mute);text-align:right;
|
|
1140
|
+
}
|
|
1141
|
+
@media (max-width:960px){
|
|
1142
|
+
/* The orb poster carries its own breathing room inside the square, so the
|
|
1143
|
+
stacked layout needs less grid gap or the mark floats away from the copy. */
|
|
1144
|
+
.hero-split{grid-template-columns:minmax(0,1fr);gap:16px}
|
|
1145
|
+
.hero-shot{transform:none;width:100%}
|
|
1146
|
+
.hero-product .hero-art{inset:-10% -6%;opacity:.34}
|
|
1147
|
+
.hero-product figcaption{text-align:left}
|
|
1148
|
+
}
|
|
1149
|
+
@media (prefers-reduced-motion:reduce){.hero-shot{transform:none;transition:none}}
|
|
1150
|
+
|
|
1151
|
+
/* Route proof: the ranking claim, recorded. */
|
|
1152
|
+
.risk-proof,
|
|
1153
|
+
.route-proof{position:relative;margin:0 auto var(--space-5);max-width:868px;border:1px solid rgba(124,196,255,.16);border-radius:var(--r-md);overflow:hidden;background:#080d15;line-height:0}
|
|
1154
|
+
.risk-proof video,
|
|
1155
|
+
.route-proof video{display:block;width:100%;max-width:868px;height:auto;opacity:0;transition:opacity .5s var(--ease)}
|
|
1156
|
+
.risk-proof video.ready,
|
|
1157
|
+
.route-proof video.ready{opacity:1}
|
|
1158
|
+
.risk-proof #risk-still,
|
|
1159
|
+
.route-proof #route-still{display:block;width:100%;max-width:868px;height:auto}
|
|
1160
|
+
.risk-proof video.ready ~ #risk-still,
|
|
1161
|
+
.route-proof video.ready ~ #route-still{position:absolute;inset:0;opacity:0;pointer-events:none}
|
|
1162
|
+
.risk-proof figcaption,
|
|
1163
|
+
.route-proof figcaption{line-height:1.4;padding:10px 14px;border-top:1px solid rgba(124,196,255,.12);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--blue2)}
|
|
1164
|
+
@media (prefers-reduced-motion:reduce){
|
|
1165
|
+
.risk-proof video,
|
|
1166
|
+
.route-proof video{display:none}
|
|
1167
|
+
.risk-proof #risk-still,
|
|
1168
|
+
.route-proof #route-still{position:static;opacity:1}
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
/* The orb is the hero mark, so it drops the terminal panel chrome entirely:
|
|
1172
|
+
no border, no dark fill, no 3D tilt, no edge bleed. */
|
|
1173
|
+
.hero-shot-orb{
|
|
1174
|
+
border:0;background:transparent;box-shadow:none;transform:none;overflow:visible;
|
|
1175
|
+
width:min(100%,560px);margin-inline:auto;border-radius:0;
|
|
1176
|
+
}
|
|
1177
|
+
.hero-shot-orb::after{display:none}
|
|
1178
|
+
.hero-product:hover .hero-shot-orb{transform:none}
|
|
1179
|
+
.hero-shot-orb video,
|
|
1180
|
+
.hero-shot-orb #orb-still{
|
|
1181
|
+
display:block;width:100%;height:auto;
|
|
1182
|
+
/* The render's background is rgb(10,16,23) at full alpha -- near-black, but not
|
|
1183
|
+
black. Screen/additive blending can only cancel true #000, which is why the
|
|
1184
|
+
plate stayed visible. Crush the floor to real black first, then screen it
|
|
1185
|
+
away. Highlights sit at 244+ so they survive the crush untouched. */
|
|
1186
|
+
filter:brightness(1.16) contrast(1.3);
|
|
1187
|
+
mix-blend-mode:screen;
|
|
1188
|
+
/* Belt and braces: feather the boundary so no engine can show a hard edge. */
|
|
1189
|
+
-webkit-mask-image:radial-gradient(ellipse 64% 64% at 50% 47%, #000 42%, transparent 74%);
|
|
1190
|
+
mask-image:radial-gradient(ellipse 64% 64% at 50% 47%, #000 42%, transparent 74%);
|
|
1191
|
+
}
|
|
1192
|
+
.hero-shot-orb video{opacity:0;transition:opacity .6s var(--ease)}
|
|
1193
|
+
.hero-shot-orb video.ready{opacity:1}
|
|
1194
|
+
.hero-shot-orb video.ready ~ #orb-still{position:absolute;inset:0;opacity:0;pointer-events:none}
|
|
1195
|
+
@media (prefers-reduced-motion:reduce){.hero-shot-orb video{display:none}.hero-shot-orb video.ready~#orb-still{position:static;opacity:1}}
|
|
1196
|
+
/* CLI section leads with a real TUI capture; poster is the reduced-motion fallback. */
|
|
1197
|
+
.cli-proof{position:relative;aspect-ratio:auto;height:auto;min-height:0;padding:0;
|
|
1198
|
+
max-width:868px;margin-inline:auto;line-height:0;display:block}
|
|
1199
|
+
.cli-proof picture,.cli-proof img{display:block;width:100%;height:auto}
|
|
1200
|
+
.cli-proof figcaption{line-height:1.4}
|
|
1201
|
+
@media (prefers-reduced-motion:reduce){
|
|
1202
|
+
.cli-proof img{position:static;opacity:1}
|
|
1203
|
+
}
|
|
1204
|
+
|
|
1205
|
+
/* Recorded session leads; the still is the fallback underneath it. */
|
|
1206
|
+
.hero-shot{position:relative}
|
|
1207
|
+
.hero-shot video{display:block;width:100%;height:auto;opacity:0;transition:opacity .6s var(--ease)}
|
|
1208
|
+
.hero-shot video.ready{opacity:1}
|
|
1209
|
+
.hero-shot video.ready + #cli-still{opacity:0}
|
|
1210
|
+
#cli-still{display:block;width:100%;height:auto;transition:opacity .6s var(--ease)}
|
|
1211
|
+
.hero-shot video.ready ~ #cli-still{position:absolute;inset:0;pointer-events:none}
|
|
1212
|
+
@media (prefers-reduced-motion:reduce){
|
|
1213
|
+
.hero-shot video{display:none}
|
|
1214
|
+
#cli-still{position:static;opacity:1}
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1217
|
+
footer{margin-top:clamp(64px,10vh,100px);border-top:1px solid var(--line);padding:30px var(--pad) 36px;position:relative;z-index:2}
|
|
1218
|
+
.labs-link{font-family:"UnifrakturCook","Old English Text MT","Lucida Blackletter",serif;font-size:var(--fs-base);letter-spacing:.04em;text-transform:none;color:var(--blue2)}
|
|
1219
|
+
.labs-link:hover{color:var(--ink)}
|
|
1220
|
+
.foot-row{
|
|
1221
|
+
max-width:var(--max);margin:0 auto;
|
|
1222
|
+
display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;
|
|
1223
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
|
|
1224
|
+
}
|
|
1225
|
+
.foot-links{display:flex;gap:18px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
|
|
1226
|
+
.foot-links a:hover{color:var(--blue)}
|
|
1227
|
+
|
|
1228
|
+
.js .rv{opacity:0;transform:translate3d(0,22px,0);will-change:opacity,transform}
|
|
1229
|
+
.js .rv.in{opacity:1;transform:translate3d(0,0,0);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
|
|
1230
|
+
.js .rv.done{transform:none;will-change:auto}
|
|
1231
|
+
.js .home-kicker.rv.in{transition-delay:.04s}
|
|
1232
|
+
.js .home-title.rv.in{transition-delay:.14s}
|
|
1233
|
+
.js .hero-sub.rv.in{transition-delay:.26s}
|
|
1234
|
+
.js .home-stats.rv.in{transition-delay:.34s}
|
|
1235
|
+
|
|
1236
|
+
|
|
1237
|
+
.section{position:relative}
|
|
1238
|
+
.section::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:linear-gradient(90deg,transparent,var(--scene-a),transparent);opacity:.38;transform-origin:0 50%;transform:scaleX(.35);transition:opacity .45s var(--ease),background .45s var(--ease),transform .8s var(--ease)}
|
|
1239
|
+
.section.is-scene::before{opacity:.82;transform:scaleX(1)}
|
|
1240
|
+
.section-title em,.home-title em{transition:color .45s var(--ease),text-shadow .45s var(--ease)}
|
|
1241
|
+
.section.is-scene .section-title em,body[data-scene="home"] .home-title em{color:var(--scene-a);text-shadow:0 0 34px var(--scene-soft)}
|
|
1242
|
+
.graph-shell,.hl-surface,.strategy-surface,.cli-proof,.moat-grid,.selfcustody,.motion-lab{transition:box-shadow .55s var(--ease),border-color .55s var(--ease),transform .55s var(--ease)}
|
|
1243
|
+
.section.is-scene .graph-shell,.section.is-scene .hl-surface,.section.is-scene .strategy-surface,.section.is-scene .cli-proof,.section.is-scene .moat-grid,.section.is-scene .selfcustody,.section.is-scene .motion-lab{box-shadow:0 34px 120px rgba(0,0,0,.34),0 0 0 1px color-mix(in srgb,var(--scene-a) 22%,transparent),0 0 80px var(--scene-soft)}
|
|
1244
|
+
.premium-motion .strategy-card,.premium-motion .chain,.premium-motion .agent-panel{will-change:transform}
|
|
1245
|
+
.premium-motion .route-tree line{stroke-dasharray:10 7;animation:flow-down 2.4s linear infinite}
|
|
1246
|
+
.premium-motion .cli-proof{transform-origin:50% 45%}
|
|
1247
|
+
@media (max-width:980px){.scene-rail{display:none}.scroll-craft{opacity:.42}.craft-orbit{right:-18vw;top:18vh}.craft-orbit.is-b{display:none}}
|
|
1248
|
+
@media (prefers-reduced-motion:reduce){.scroll-craft{display:none}.scene-rail{display:none}.section::before{transform:none}.section.is-scene .graph-shell,.section.is-scene .hl-surface,.section.is-scene .strategy-surface,.section.is-scene .cli-proof,.section.is-scene .moat-grid,.section.is-scene .selfcustody,.section.is-scene .motion-lab{box-shadow:none}.premium-motion .route-tree line{animation:none}}
|
|
1249
|
+
|
|
1250
|
+
@media (max-width:960px){
|
|
1251
|
+
.home-inner{max-width:760px}
|
|
1252
|
+
.hero-stage{min-height:clamp(300px,44vh,460px)}.home-title{font-size:var(--fs-4xl)}
|
|
1253
|
+
.nav-chip{display:none}
|
|
1254
|
+
/* Links collapse into a drawer; the toggle takes their place. */
|
|
1255
|
+
.nav-toggle{display:flex}
|
|
1256
|
+
.nav-links{
|
|
1257
|
+
position:fixed;top:64px;left:0;right:0;
|
|
1258
|
+
flex-direction:column;align-items:stretch;gap:0;
|
|
1259
|
+
background:rgba(11,16,24,.97);
|
|
1260
|
+
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
|
|
1261
|
+
border-bottom:1px solid var(--line);
|
|
1262
|
+
padding:6px var(--pad) 18px;
|
|
1263
|
+
opacity:0;visibility:hidden;transform:translateY(-8px);
|
|
1264
|
+
transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
|
|
1265
|
+
}
|
|
1266
|
+
.nav[data-open="1"] .nav-links{opacity:1;visibility:visible;transform:translateY(0)}
|
|
1267
|
+
.nav-links a{padding:15px 0;border-bottom:1px solid var(--line);opacity:1;font-size:var(--fs-micro)}
|
|
1268
|
+
.nav-links a::after{display:none}
|
|
1269
|
+
.nav-links a.nav-download{
|
|
1270
|
+
margin-top:16px;border-bottom:none;text-align:center;padding:14px 15px;
|
|
1271
|
+
}
|
|
1272
|
+
.route-strip{grid-template-columns:1fr}
|
|
1273
|
+
.route-card.p-build .build-copy{grid-template-columns:1fr}
|
|
1274
|
+
.convert-grid{grid-template-columns:1fr}
|
|
1275
|
+
.chain-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
1276
|
+
.row.profiles{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
1277
|
+
}
|
|
1278
|
+
@media (max-width:720px){
|
|
1279
|
+
:root{--pad:clamp(16px,5vw,24px)}
|
|
1280
|
+
.cli-frame,.cli-frame img,.convert-copy,.convert-grid{max-width:100%;width:100%}
|
|
1281
|
+
.cli-frame img{height:auto}
|
|
1282
|
+
main{padding-top:68px}
|
|
1283
|
+
.nav{padding:12px var(--pad)}
|
|
1284
|
+
.brand{font-size:var(--fs-lg)}
|
|
1285
|
+
.brand .orbital{width:24px;height:24px}
|
|
1286
|
+
.home{min-height:auto;padding-top:22px;padding-bottom:58px}
|
|
1287
|
+
.home::after{bottom:8px;height:48px}
|
|
1288
|
+
.hero-stage{min-height:240px}
|
|
1289
|
+
.hero-orb{width:min(78vw,300px)}
|
|
1290
|
+
.hero-orb .orbit-dot{animation-name:orbit-travel-mobile}
|
|
1291
|
+
@keyframes orbit-travel-mobile{from{transform:rotateX(76deg) rotateZ(0deg) translateX(min(30vw,128px))}to{transform:rotateX(76deg) rotateZ(360deg) translateX(min(30vw,128px))}}
|
|
1292
|
+
.home-title{font-size:var(--fs-4xl);letter-spacing:-.05em}
|
|
1293
|
+
.home-kicker{font-size:var(--fs-micro);letter-spacing:.22em}
|
|
1294
|
+
.home-copy p:not(.home-kicker){max-width:34ch;font-size:var(--fs-base);line-height:1.58;margin-top:14px}
|
|
1295
|
+
.home-actions{width:100%;margin-top:22px}
|
|
1296
|
+
.enter-cta{width:100%;max-width:280px;min-height:48px;justify-content:center;padding:13px 18px}
|
|
1297
|
+
.section{padding:clamp(44px,8vh,72px) var(--pad) 0}
|
|
1298
|
+
.section-label{letter-spacing:.22em}
|
|
1299
|
+
.section-title{font-size:var(--fs-xl);max-width:12ch}
|
|
1300
|
+
.section-lede{font-size:var(--fs-base);line-height:1.6;margin-bottom:24px}
|
|
1301
|
+
.graph-top{justify-content:flex-start;padding:12px;font-size:var(--fs-micro);line-height:1.55;letter-spacing:.12em}
|
|
1302
|
+
.evolve-rail{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:12px;-webkit-overflow-scrolling:touch}
|
|
1303
|
+
.evolve-pill{white-space:nowrap;flex:0 0 auto}
|
|
1304
|
+
.graph-canvas{overflow:visible;padding:22px 12px 24px}
|
|
1305
|
+
.orch{width:100%;min-width:0}
|
|
1306
|
+
.row{gap:10px}
|
|
1307
|
+
.row>.node[style]{width:100%!important;max-width:260px}
|
|
1308
|
+
.node.hub{width:100%;max-width:260px}
|
|
1309
|
+
.row.profiles{grid-template-columns:1fr}
|
|
1310
|
+
.node.route,.node.add,.node.builder-sink{min-height:auto}
|
|
1311
|
+
.node.route .chains{line-height:1.55}
|
|
1312
|
+
.wires{height:34px;overflow:hidden}
|
|
1313
|
+
.wires.funnel{height:42px}
|
|
1314
|
+
.builder-row{margin-top:4px}
|
|
1315
|
+
.route-card{min-height:auto;padding:20px 16px;background:rgba(17,25,37,.94)}
|
|
1316
|
+
.route-card h3{font-size:var(--fs-lg);line-height:1.05;flex-wrap:wrap}
|
|
1317
|
+
.why-band{padding:20px 16px 22px}
|
|
1318
|
+
.hl-surface{padding:16px}
|
|
1319
|
+
.chain .id{white-space:normal;text-align:right}
|
|
1320
|
+
.venues-head{font-size:var(--fs-micro);letter-spacing:.12em;line-height:1.5}
|
|
1321
|
+
.marquee{overflow-x:auto;overflow-y:hidden;mask-image:none;-webkit-mask-image:none;scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
|
|
1322
|
+
.marquee::-webkit-scrollbar{display:none}
|
|
1323
|
+
.marquee .track,.marquee.rev .track{min-width:max-content;animation:none;transform:none;will-change:auto}
|
|
1324
|
+
.track{gap:16px}
|
|
1325
|
+
.chip{font-size:var(--fs-sm);padding:8px 11px}
|
|
1326
|
+
.chip.wm-chip{padding:10px 14px}
|
|
1327
|
+
.chip img.wm{height:24px;max-width:132px}
|
|
1328
|
+
.chip img.wm.tall{width:26px;height:26px;min-width:26px;max-width:26px}
|
|
1329
|
+
footer{padding:28px var(--pad) 34px}
|
|
1330
|
+
.foot-row{justify-content:center;text-align:center}
|
|
1331
|
+
.foot-links{flex-wrap:wrap;justify-content:center;gap:12px 16px}
|
|
1332
|
+
}
|
|
1333
|
+
@media (max-width:560px){
|
|
1334
|
+
.chain-grid{grid-template-columns:1fr}
|
|
1335
|
+
}
|
|
1336
|
+
@media (max-width:380px){
|
|
1337
|
+
.home-title{font-size:var(--fs-3xl)}
|
|
1338
|
+
.hero-stage{min-height:220px}
|
|
1339
|
+
.section-title{font-size:var(--fs-xl)}
|
|
1340
|
+
}
|
|
1341
|
+
@media (prefers-reduced-motion:reduce){
|
|
1342
|
+
html{scroll-behavior:auto}
|
|
1343
|
+
.js .rv{opacity:1;transform:none;filter:none}
|
|
1344
|
+
.track,.orbital .ring,.orbital .tickring,.orbital .core,.hero-orb,.hero-art::before,.home::after{animation:none}
|
|
1345
|
+
.wires path{stroke-dasharray:none;stroke-dashoffset:0}
|
|
1346
|
+
.wires circle{opacity:1}
|
|
1347
|
+
.node:hover,.chain:hover{transform:none}
|
|
1348
|
+
}
|
|
1349
|
+
|
|
1350
|
+
/* ══════════════════════════════════════════════════════════════════
|
|
1351
|
+
SIGNAL RIDGE — the scroll narrative
|
|
1352
|
+
One idea carried the length of the page: raw market noise (the far,
|
|
1353
|
+
jagged ridge) resolving line by line into a single routed signal you
|
|
1354
|
+
can read and sign. Every piece below is visible by default and is
|
|
1355
|
+
only *scrubbed* by JS, so a failed CDN or a blocked script leaves a
|
|
1356
|
+
readable page rather than a blank one. Motion is transform/opacity.
|
|
1357
|
+
══════════════════════════════════════════════════════════════════ */
|
|
1358
|
+
.ridge-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
|
|
1359
|
+
.ridge{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
|
|
1360
|
+
.ridge use{fill:none;stroke:inherit;stroke-width:inherit;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
|
|
1361
|
+
.ridge .rg{fill:none}
|
|
1362
|
+
.ridge .rg-0{stroke:rgba(124,196,255,.26);stroke-width:1}
|
|
1363
|
+
.ridge .rg-1{stroke:rgba(124,196,255,.34);stroke-width:1.05}
|
|
1364
|
+
.ridge .rg-2{stroke:rgba(140,208,255,.46);stroke-width:1.15}
|
|
1365
|
+
.ridge .rg-3{stroke:rgba(167,216,255,.64);stroke-width:1.3}
|
|
1366
|
+
.ridge .rg-4{stroke:rgba(120,232,214,.95);stroke-width:1.8;filter:drop-shadow(0 0 8px rgba(80,210,193,.45))}
|
|
1367
|
+
|
|
1368
|
+
/* ── chapter 01 · the opening viewport ───────────────────────────── */
|
|
1369
|
+
/* The horizon sits at the fold, not at the foot of the section, so the ridge
|
|
1370
|
+
is part of the opening composition rather than something you scroll to. */
|
|
1371
|
+
.hero-ridge{
|
|
1372
|
+
position:absolute;left:50%;top:50%;width:min(1680px,150vw);
|
|
1373
|
+
height:clamp(240px,44vh,470px);transform:translateX(-50%);
|
|
1374
|
+
z-index:0;pointer-events:none;
|
|
1375
|
+
-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
|
|
1376
|
+
mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
|
|
1377
|
+
}
|
|
1378
|
+
.hero-index{
|
|
1379
|
+
display:flex;align-items:center;gap:14px;width:100%;margin-bottom:18px;
|
|
1380
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--mute);
|
|
1381
|
+
}
|
|
1382
|
+
.hero-index i{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent);font-style:normal;transform-origin:0 50%}
|
|
1383
|
+
.home{align-content:center}
|
|
1384
|
+
/* The old centred hairline was an unlabelled decoration. One cue, anchored to
|
|
1385
|
+
the editorial left edge, that says what the next chapter is. */
|
|
1386
|
+
.home::after{display:none}
|
|
1387
|
+
.hero-cue{
|
|
1388
|
+
position:relative;z-index:3;margin-top:clamp(26px,5vh,54px);
|
|
1389
|
+
display:flex;align-items:center;gap:10px;
|
|
1390
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
|
|
1391
|
+
}
|
|
1392
|
+
.hero-cue span{display:block;width:34px;height:1px;background:linear-gradient(90deg,var(--blue),transparent);transform-origin:0 50%;animation:cue-sweep 3.4s var(--ease) infinite}
|
|
1393
|
+
@keyframes cue-sweep{0%,100%{transform:scaleX(.3);opacity:.4}50%{transform:scaleX(1);opacity:1}}
|
|
1394
|
+
.home-inner{z-index:2}
|
|
1395
|
+
.hero-installer{max-width:min(660px,100%)}
|
|
1396
|
+
|
|
1397
|
+
/* ── chapter 02 · the thesis passage (masked line reveal) ────────── */
|
|
1398
|
+
.thesis{
|
|
1399
|
+
position:relative;z-index:2;max-width:var(--max);margin:0 auto;
|
|
1400
|
+
padding:clamp(70px,16vh,190px) var(--pad) clamp(60px,14vh,160px);
|
|
1401
|
+
}
|
|
1402
|
+
.thesis-label{
|
|
1403
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.34em;text-transform:uppercase;
|
|
1404
|
+
color:var(--blue);margin-bottom:clamp(28px,5vh,54px);
|
|
1405
|
+
}
|
|
1406
|
+
.thesis-lines{list-style:none;display:flex;flex-direction:column;gap:clamp(20px,3.4vh,40px);margin:0}
|
|
1407
|
+
.thesis-lines li{
|
|
1408
|
+
font-family:var(--display);font-weight:300;font-size:var(--fs-2xl);line-height:1.14;letter-spacing:-.02em;
|
|
1409
|
+
color:var(--ink);max-width:20ch;
|
|
1410
|
+
}
|
|
1411
|
+
.thesis-lines li em{font-style:italic;color:var(--blue2)}
|
|
1412
|
+
/* Alternating indents and widths: the eye travels rather than scanning a
|
|
1413
|
+
justified block, and the short lines carry the load-bearing claims. */
|
|
1414
|
+
.thesis-lines li:nth-child(even){margin-left:clamp(0px,9vw,150px)}
|
|
1415
|
+
.thesis-lines li:nth-child(3),
|
|
1416
|
+
.thesis-lines li:nth-child(4){max-width:28ch}
|
|
1417
|
+
.thesis-close{
|
|
1418
|
+
margin-top:clamp(36px,7vh,80px);margin-left:auto;max-width:34ch;
|
|
1419
|
+
font-family:var(--mono);font-size:var(--fs-xs);line-height:1.9;letter-spacing:.1em;
|
|
1420
|
+
text-transform:uppercase;color:var(--mute);text-align:right;
|
|
1421
|
+
}
|
|
1422
|
+
.premium-motion .thesis-lines li{opacity:.2}
|
|
1423
|
+
@media (max-width:720px){
|
|
1424
|
+
.thesis-lines{max-width:100%}
|
|
1425
|
+
.thesis-lines li{font-size:var(--fs-xl);max-width:100%}
|
|
1426
|
+
.thesis-lines li:nth-child(even){margin-left:0}
|
|
1427
|
+
.thesis-close{text-align:left;margin-left:0}
|
|
1428
|
+
}
|
|
1429
|
+
|
|
1430
|
+
/* ── chapter 03 · the instrument (pinned, scrubbed) ──────────────── */
|
|
1431
|
+
.stack-scene{max-width:min(1240px,100%);padding-bottom:0}
|
|
1432
|
+
.stack-run{position:relative}
|
|
1433
|
+
.premium-motion .stack-run{height:300vh}
|
|
1434
|
+
.stack-sticky{position:static;padding-block:clamp(8px,2vh,20px)}
|
|
1435
|
+
.premium-motion .stack-sticky{
|
|
1436
|
+
position:sticky;top:92px;min-height:calc(100dvh - 92px);
|
|
1437
|
+
display:flex;flex-direction:column;justify-content:center;
|
|
1438
|
+
}
|
|
1439
|
+
.stack-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end;margin-bottom:clamp(14px,2.4vh,26px)}
|
|
1440
|
+
.stack-head .section-title{margin-bottom:0;max-width:26ch;font-size:var(--fs-xl)}
|
|
1441
|
+
.stack-head .section-label{margin-bottom:8px}
|
|
1442
|
+
.stack-readout{
|
|
1443
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;
|
|
1444
|
+
color:var(--mute);text-align:right;line-height:1.9;white-space:nowrap;
|
|
1445
|
+
}
|
|
1446
|
+
.stack-readout b{display:block;color:var(--blue2);font-weight:500;font-size:var(--fs-sm);letter-spacing:.1em}
|
|
1447
|
+
.stack-layers{list-style:none;display:grid;gap:0;border-top:1px solid var(--line);margin:0}
|
|
1448
|
+
.stack-layer{
|
|
1449
|
+
position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
|
|
1450
|
+
gap:clamp(14px,2.6vw,34px);align-items:center;
|
|
1451
|
+
padding:clamp(12px,1.7vh,20px) 0;border-bottom:1px solid var(--line);
|
|
1452
|
+
isolation:isolate;overflow:hidden;
|
|
1453
|
+
}
|
|
1454
|
+
.stack-layer .layer-ridge{
|
|
1455
|
+
position:absolute;inset:0;z-index:0;opacity:.9;
|
|
1456
|
+
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
|
|
1457
|
+
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
|
|
1458
|
+
}
|
|
1459
|
+
.stack-layer > *:not(.layer-ridge){position:relative;z-index:1}
|
|
1460
|
+
.stack-body{min-width:0}
|
|
1461
|
+
.stack-body h3{
|
|
1462
|
+
font-family:var(--display);font-weight:400;font-size:var(--fs-lg);line-height:1.04;letter-spacing:-.02em;
|
|
1463
|
+
color:var(--ink);margin-bottom:5px;
|
|
1464
|
+
}
|
|
1465
|
+
.stack-body p{color:var(--cool);font-size:var(--fs-sm);line-height:1.55;max-width:58ch;margin:0}
|
|
1466
|
+
.stack-sig{
|
|
1467
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
|
|
1468
|
+
color:var(--mute);text-align:right;white-space:nowrap;
|
|
1469
|
+
border:1px solid var(--line);border-radius:999px;padding:6px 11px;
|
|
1470
|
+
transition:color .45s var(--ease),border-color .45s var(--ease);
|
|
1471
|
+
}
|
|
1472
|
+
.stack-layer.is-live .stack-sig{color:var(--blue2);border-color:var(--line-2)}
|
|
1473
|
+
.stack-layer.is-live .stack-body h3{color:#fff}
|
|
1474
|
+
.stack-meter{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:clamp(14px,2.4vh,26px)}
|
|
1475
|
+
.stack-meter i{display:block;height:100%;width:100%;transform:scaleX(var(--stack-p,1));transform-origin:0 50%;
|
|
1476
|
+
background:linear-gradient(90deg,var(--blue),var(--hl))}
|
|
1477
|
+
@media (max-width:900px){
|
|
1478
|
+
.premium-motion .stack-run{height:auto}
|
|
1479
|
+
.premium-motion .stack-sticky{position:static}
|
|
1480
|
+
.stack-head{grid-template-columns:1fr}
|
|
1481
|
+
.stack-readout{text-align:left;white-space:normal}
|
|
1482
|
+
.stack-layer{grid-template-columns:minmax(0,1fr)}
|
|
1483
|
+
.stack-sig{grid-column:1/-1;justify-self:start;text-align:left;white-space:normal}
|
|
1484
|
+
/* A 900-unit ridge squeezed into a phone column reads as hatching over the
|
|
1485
|
+
copy rather than as depth. Drop it back to a texture. */
|
|
1486
|
+
.stack-layer .layer-ridge{opacity:.26}
|
|
1487
|
+
}
|
|
1488
|
+
|
|
1489
|
+
/* ── kinetic telemetry strip (velocity responsive) ───────────────── */
|
|
1490
|
+
.telemetry{
|
|
1491
|
+
position:relative;margin-top:clamp(26px,5vh,56px);border-block:1px solid var(--line);
|
|
1492
|
+
overflow:hidden;padding:14px 0;background:rgba(11,16,24,.4);
|
|
1493
|
+
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
|
|
1494
|
+
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
|
|
1495
|
+
}
|
|
1496
|
+
.telemetry-track{
|
|
1497
|
+
display:flex;align-items:center;gap:clamp(20px,3vw,44px);width:max-content;
|
|
1498
|
+
transform:translate3d(var(--tele-x,0%),0,0) skewX(var(--kin-skew,0deg));
|
|
1499
|
+
transition:transform .38s var(--ease);will-change:transform;
|
|
1500
|
+
}
|
|
1501
|
+
.telemetry-track span{
|
|
1502
|
+
font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;
|
|
1503
|
+
color:var(--cool);white-space:nowrap;
|
|
1504
|
+
}
|
|
1505
|
+
.telemetry-track span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
|
|
1506
|
+
background:var(--blue);margin-right:12px;vertical-align:.14em;box-shadow:0 0 10px rgba(124,196,255,.7)}
|
|
1507
|
+
.telemetry-track span.k{color:var(--blue2)}
|
|
1508
|
+
.telemetry-track span.k::before{background:var(--hl);box-shadow:0 0 10px rgba(80,210,193,.7)}
|
|
1509
|
+
.marquee{transform:skewX(var(--kin-skew,0deg));transition:transform .42s var(--ease)}
|
|
1510
|
+
|
|
1511
|
+
/* ── chapter labels on the existing capability sections ─────────── */
|
|
1512
|
+
.chapter-tab{
|
|
1513
|
+
position:relative;top:auto;z-index:6;display:flex;width:fit-content;align-items:center;gap:12px;
|
|
1514
|
+
margin-bottom:clamp(14px,2.4vh,26px);padding:7px 14px;
|
|
1515
|
+
border:1px solid var(--line);border-radius:999px;background:rgba(11,16,24,.82);
|
|
1516
|
+
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
|
|
1517
|
+
font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
|
|
1518
|
+
transition:border-color .5s var(--ease),color .5s var(--ease);
|
|
1519
|
+
}
|
|
1520
|
+
.section.is-scene .chapter-tab{border-color:var(--line-2);color:var(--cool)}
|
|
1521
|
+
|
|
1522
|
+
/* ── environment + failure posture ───────────────────────────────── */
|
|
1523
|
+
@media (max-width:900px){
|
|
1524
|
+
.marquee{transform:none}
|
|
1525
|
+
.telemetry-track{transform:translate3d(var(--tele-x,0%),0,0)}
|
|
1526
|
+
}
|
|
1527
|
+
@media (prefers-reduced-motion:reduce){
|
|
1528
|
+
.hero-cue span{animation:none;transform:scaleX(1)}
|
|
1529
|
+
.premium-motion .thesis-lines li{opacity:1}
|
|
1530
|
+
.telemetry-track,.marquee{transform:none;transition:none}
|
|
1531
|
+
.stack-sticky,.premium-motion .stack-sticky{position:static}
|
|
1532
|
+
.premium-motion .stack-run{height:auto}
|
|
1533
|
+
.chapter-tab{position:static}
|
|
1534
|
+
.stack-meter i{transform:scaleX(1)}
|
|
1535
|
+
}
|
|
1536
|
+
</style>
|
|
1537
|
+
</head>
|
|
1538
|
+
<body>
|
|
1539
|
+
<div class="grain" aria-hidden="true"></div>
|
|
1540
|
+
<!-- Signal-ridge geometry, drawn once and re-used by the hero, the instrument
|
|
1541
|
+
and the close. rg0 is raw noise; each successive line is the same field
|
|
1542
|
+
resolved further, until rg4 is a single routed signal. Original curves,
|
|
1543
|
+
generated deterministically for this page. -->
|
|
1544
|
+
<svg class="ridge-defs" aria-hidden="true" focusable="false"><defs>
|
|
1545
|
+
<path id="rg0" d="M0 114.9C4.4 114.6 17.6 114.7 26.5 113.1C35.3 111.6 44.1 106.6 52.9 105.6C61.8 104.7 70.6 111.2 79.4 107.3C88.2 103.5 97.1 81.5 105.9 82.3C114.7 83.2 123.5 100 132.4 112.3C141.2 124.7 150 156.2 158.8 156.3C167.6 156.4 176.5 121.5 185.3 113.1C194.1 104.6 202.9 104.4 211.8 105.7C220.6 106.9 229.4 118.7 238.2 120.8C247.1 122.8 255.9 124.2 264.7 117.9C273.5 111.6 282.4 82.1 291.2 83C300 84 308.8 120.9 317.6 123.7C326.5 126.5 335.3 103.8 344.1 99.7C352.9 95.5 361.8 90.4 370.6 98.6C379.4 106.7 388.2 140.5 397.1 148.6C405.9 156.6 414.7 148.7 423.5 146.9C432.4 145 441.2 141 450 137.5C458.8 134 467.6 127.6 476.5 126C485.3 124.4 494.1 130.8 502.9 127.8C511.8 124.8 520.6 104.1 529.4 108.1C538.2 112.1 547.1 152 555.9 151.8C564.7 151.5 573.5 113.9 582.4 106.7C591.2 99.5 600 105.8 608.8 108.7C617.6 111.5 626.5 128.1 635.3 123.8C644.1 119.5 652.9 89.1 661.8 83C670.6 76.8 679.4 85.5 688.2 86.7C697.1 87.9 705.9 82.4 714.7 90.2C723.5 98 732.4 131.2 741.2 133.5C750 135.8 758.8 103.1 767.6 104.2C776.5 105.2 785.3 130.8 794.1 139.8C802.9 148.9 811.8 166.4 820.6 158.6C829.4 150.8 838.2 107.6 847.1 92.9C855.9 78.1 864.7 63 873.5 70.1C882.4 77.2 895.6 124.6 900 135.5"/>
|
|
1546
|
+
<path id="rg1" d="M0 217.4C5.8 217.9 23.1 225.2 34.6 220.2C46.2 215.3 57.7 189.3 69.2 187.5C80.8 185.6 92.3 205.2 103.8 208.9C115.4 212.5 126.9 207.9 138.5 209.3C150 210.7 161.5 218.9 173.1 217.4C184.6 216 196.2 207.8 207.7 200.7C219.2 193.6 230.8 177.9 242.3 175C253.8 172.2 265.4 173.9 276.9 183.7C288.5 193.5 300 232.7 311.5 234C323.1 235.4 334.6 193.8 346.2 191.8C357.7 189.9 369.2 216 380.8 222.3C392.3 228.6 403.8 237.5 415.4 229.5C426.9 221.4 438.5 182.1 450 174.2C461.5 166.3 473.1 177.3 484.6 182.2C496.2 187.1 507.7 202.8 519.2 203.4C530.8 204 542.3 182 553.8 185.7C565.4 189.5 576.9 223.6 588.5 226C600 228.4 611.5 206.9 623.1 200.3C634.6 193.7 646.2 192.3 657.7 186.4C669.2 180.5 680.8 160.8 692.3 164.8C703.8 168.8 715.4 209.4 726.9 210.4C738.5 211.4 750 171.2 761.5 170.7C773.1 170.2 784.6 200.8 796.2 207.1C807.7 213.5 819.2 214.6 830.8 208.8C842.3 203 853.8 172.1 865.4 172.3C876.9 172.6 894.2 203.9 900 210.2"/>
|
|
1547
|
+
<path id="rg2" d="M0 252.1C7.5 249.8 30 234.9 45 237.9C60 240.9 75 268.6 90 270.1C105 271.6 120 248 135 246.9C150 245.8 165 263.2 180 263.6C195 264 210 249.9 225 249.5C240 249 255 263.5 270 260.7C285 257.9 300 236.2 315 232.8C330 229.4 345 238.8 360 240.3C375 241.9 390 242.8 405 242.1C420 241.4 435 238.5 450 236C465 233.5 480 226 495 227.3C510 228.6 525 244.2 540 243.9C555 243.7 570 229.9 585 225.8C600 221.7 615 220.2 630 219.4C645 218.6 660 221 675 221.1C690 221.1 705 215.5 720 219.5C735 223.5 750 242.4 765 245C780 247.6 795 237.1 810 235.1C825 233.1 840 229.3 855 232.9C870 236.4 892.5 252.6 900 256.5"/>
|
|
1548
|
+
<path id="rg3" d="M0 313.2C10.7 311.1 42.9 301.9 64.3 300.8C85.7 299.7 107.1 307.9 128.6 306.5C150 305.2 171.4 293.6 192.9 292.7C214.3 291.8 235.7 300.8 257.1 301.1C278.6 301.4 300 294.8 321.4 294.7C342.9 294.6 364.3 300.6 385.7 300.4C407.1 300.2 428.6 293.8 450 293.5C471.4 293.3 492.9 298.3 514.3 298.9C535.7 299.5 557.1 296.2 578.6 297.1C600 298 621.4 303.1 642.9 304.2C664.3 305.3 685.7 303 707.1 303.8C728.6 304.5 750 307.8 771.4 308.7C792.9 309.5 814.3 309.1 835.7 308.8C857.1 308.6 889.3 307.4 900 307.1"/>
|
|
1549
|
+
<path id="rg4" d="M0 335.6C16.7 335.9 66.7 337.2 100 337.7C133.3 338.3 166.7 338.1 200 338.8C233.3 339.4 266.7 340.4 300 341.4C333.3 342.3 366.7 343.5 400 344.3C433.3 345.2 466.7 346.2 500 346.5C533.3 346.8 566.7 346.7 600 346.2C633.3 345.7 666.7 344.1 700 343.3C733.3 342.5 766.7 342.3 800 341.5C833.3 340.7 883.3 339 900 338.5"/>
|
|
1550
|
+
</defs></svg>
|
|
1551
|
+
<div class="progress" id="progress" aria-hidden="true"></div>
|
|
1552
|
+
<div class="scroll-craft" aria-hidden="true">
|
|
1553
|
+
<div class="craft-grid"></div>
|
|
1554
|
+
<div class="craft-orbit is-a"></div>
|
|
1555
|
+
<div class="craft-orbit is-b"></div>
|
|
1556
|
+
</div>
|
|
1557
|
+
|
|
1558
|
+
<div class="loader out" id="loader" aria-hidden="true" style="display:none">
|
|
1559
|
+
<div class="loader-inner">
|
|
1560
|
+
<div class="loader-mark orbital" aria-hidden="true">
|
|
1561
|
+
<svg viewBox="0 0 100 100">
|
|
1562
|
+
<g class="ring r1"><ellipse cx="50" cy="50" rx="44" ry="15"/></g>
|
|
1563
|
+
<g class="ring r2"><ellipse cx="50" cy="50" rx="44" ry="15" transform="rotate(62 50 50)"/></g>
|
|
1564
|
+
<g class="ring r3"><ellipse cx="50" cy="50" rx="44" ry="15" transform="rotate(124 50 50)"/></g>
|
|
1565
|
+
<circle class="tickring" cx="50" cy="50" r="30"/>
|
|
1566
|
+
<circle class="halo" cx="50" cy="50" r="9"/>
|
|
1567
|
+
<circle class="core" cx="50" cy="50" r="6.5"/>
|
|
1568
|
+
</svg>
|
|
1569
|
+
</div>
|
|
1570
|
+
</div>
|
|
1571
|
+
</div>
|
|
1572
|
+
|
|
1573
|
+
<header class="nav">
|
|
1574
|
+
<a class="brand" href="/">
|
|
1575
|
+
<span class="orbital" aria-hidden="true">
|
|
1576
|
+
<svg viewBox="0 0 100 100">
|
|
1577
|
+
<g class="ring r1"><ellipse cx="50" cy="50" rx="45" ry="17"/></g>
|
|
1578
|
+
<g class="ring r2"><ellipse cx="50" cy="50" rx="45" ry="17" transform="rotate(64 50 50)"/></g>
|
|
1579
|
+
<circle class="halo" cx="50" cy="50" r="13"/>
|
|
1580
|
+
<circle class="core" cx="50" cy="50" r="11"/>
|
|
1581
|
+
</svg>
|
|
1582
|
+
</span>
|
|
1583
|
+
oracle <span class="nav-chip">beta</span></a>
|
|
1584
|
+
<nav class="nav-links" id="nav-links" aria-label="Primary">
|
|
1585
|
+
<a href="/what-it-does/">What it does</a>
|
|
1586
|
+
<a href="/where-it-works/">Where it works</a>
|
|
1587
|
+
<a class="is-active" href="/security/">Security</a>
|
|
1588
|
+
<a href="/pricing/">Pricing</a>
|
|
1589
|
+
<a href="/docs/">Docs</a>
|
|
1590
|
+
<a class="nav-download" href="/download/">Download</a>
|
|
1591
|
+
</nav>
|
|
1592
|
+
<button class="nav-toggle" id="nav-toggle" type="button" aria-label="Menu" aria-expanded="false" aria-controls="nav-links"><span></span></button>
|
|
1593
|
+
</header>
|
|
1594
|
+
<main id="top">
|
|
1595
|
+
<canvas id="gl" aria-hidden="true"></canvas>
|
|
1596
|
+
<div class="veil" aria-hidden="true"></div>
|
|
1597
|
+
<section class="section" id="protects">
|
|
1598
|
+
<p class="section-label rv">Security</p>
|
|
1599
|
+
<h2 class="section-title rv" data-split>The wallet <em>stays yours.</em></h2>
|
|
1600
|
+
<p class="section-lede rv">Public routing stays unsigned. Self-hosted execution stays local, owner-gated, bounded, and receipt-verified.</p>
|
|
1601
|
+
<div class="moat-grid rv">
|
|
1602
|
+
<article class="moat-card">
|
|
1603
|
+
<div class="n">no hosted keys</div>
|
|
1604
|
+
<h3>Public routing never holds signing keys</h3>
|
|
1605
|
+
<p>Use your wallet for ordinary artifacts, or a local signer you run yourself. Keys never leave your machine.</p>
|
|
1606
|
+
</article>
|
|
1607
|
+
<article class="moat-card">
|
|
1608
|
+
<div class="n">bound grants</div>
|
|
1609
|
+
<h3>Agents get temporary, capped permission</h3>
|
|
1610
|
+
<p>Max value, chain, venue, destination, and expiry. Outside the grant is a hard refuse, not an agent with a free wallet.</p>
|
|
1611
|
+
</article>
|
|
1612
|
+
<article class="moat-card">
|
|
1613
|
+
<div class="n">evidence</div>
|
|
1614
|
+
<h3>See it before you approve. Prove it after.</h3>
|
|
1615
|
+
<p>Before: what you receive, the expected cost, which app gets permission. After: whether it worked, what changed, and what permission is still open.</p>
|
|
1616
|
+
</article>
|
|
1617
|
+
<article class="moat-card">
|
|
1618
|
+
<div class="n">fail closed</div>
|
|
1619
|
+
<h3>Unconfigured means refused</h3>
|
|
1620
|
+
<p>A fresh install signs nothing. Prepare is not sign, sign is not broadcast. An empty allowlist refuses everything until you add entries.</p>
|
|
1621
|
+
</article>
|
|
1622
|
+
</div>
|
|
1623
|
+
</section>
|
|
1624
|
+
</main>
|
|
1625
|
+
<script>
|
|
1626
|
+
// ── Header: mobile drawer + scrollspy. Plain DOM, no library dependency, so
|
|
1627
|
+
// the menu still works if the vendored animation bundles fail to load. ──
|
|
1628
|
+
(function () {
|
|
1629
|
+
"use strict";
|
|
1630
|
+
var nav = document.querySelector(".nav");
|
|
1631
|
+
var toggle = document.getElementById("nav-toggle");
|
|
1632
|
+
var links = document.getElementById("nav-links");
|
|
1633
|
+
if (!nav || !toggle || !links) return;
|
|
1634
|
+
|
|
1635
|
+
function setOpen(open) {
|
|
1636
|
+
nav.dataset.open = open ? "1" : "0";
|
|
1637
|
+
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
|
1638
|
+
}
|
|
1639
|
+
setOpen(false);
|
|
1640
|
+
|
|
1641
|
+
toggle.addEventListener("click", function () {
|
|
1642
|
+
setOpen(nav.dataset.open !== "1");
|
|
1643
|
+
});
|
|
1644
|
+
// Any in-page jump closes the drawer, otherwise it covers the target.
|
|
1645
|
+
links.addEventListener("click", function (e) {
|
|
1646
|
+
if (e.target.closest("a")) setOpen(false);
|
|
1647
|
+
});
|
|
1648
|
+
document.addEventListener("keydown", function (e) {
|
|
1649
|
+
if (e.key === "Escape") setOpen(false);
|
|
1650
|
+
});
|
|
1651
|
+
// A resize back to desktop must not leave the drawer state stuck open.
|
|
1652
|
+
window.addEventListener("resize", function () {
|
|
1653
|
+
if (window.innerWidth > 960) setOpen(false);
|
|
1654
|
+
});
|
|
1655
|
+
|
|
1656
|
+
// Scrollspy: mark the section currently under the header.
|
|
1657
|
+
var anchors = [].slice.call(links.querySelectorAll('a[href^="#"]'));
|
|
1658
|
+
var targets = anchors.map(function (a) {
|
|
1659
|
+
return { link: a, el: document.querySelector(a.getAttribute("href")) };
|
|
1660
|
+
}).filter(function (t) { return t.el; });
|
|
1661
|
+
if (!targets.length) return;
|
|
1662
|
+
|
|
1663
|
+
var ticking = false;
|
|
1664
|
+
function spy() {
|
|
1665
|
+
ticking = false;
|
|
1666
|
+
var line = window.scrollY + 120; // just under the fixed header
|
|
1667
|
+
var current = null;
|
|
1668
|
+
targets.forEach(function (t) {
|
|
1669
|
+
if (t.el.offsetTop <= line) current = t;
|
|
1670
|
+
});
|
|
1671
|
+
targets.forEach(function (t) {
|
|
1672
|
+
t.link.classList.toggle("is-active", t === current);
|
|
1673
|
+
});
|
|
1674
|
+
}
|
|
1675
|
+
window.addEventListener("scroll", function () {
|
|
1676
|
+
if (!ticking) { ticking = true; window.requestAnimationFrame(spy); }
|
|
1677
|
+
}, { passive: true });
|
|
1678
|
+
window.addEventListener("resize", spy);
|
|
1679
|
+
spy();
|
|
1680
|
+
})();
|
|
1681
|
+
</script>
|
|
1682
|
+
<footer>
|
|
1683
|
+
<div class="foot-row">
|
|
1684
|
+
<span>oracle · <a class="labs-link" href="https://demi.la">locals only labs</a></span>
|
|
1685
|
+
<div class="foot-links">
|
|
1686
|
+
<a href="/download/">Download</a>
|
|
1687
|
+
<a href="/eval" target="_blank" rel="noopener noreferrer">Evals</a>
|
|
1688
|
+
<a href="/docs/">Docs</a>
|
|
1689
|
+
</div>
|
|
1690
|
+
</div>
|
|
1691
|
+
</footer>
|
|
1692
|
+
|
|
1693
|
+
<script>
|
|
1694
|
+
// Load optional animation libraries in background — page works without them.
|
|
1695
|
+
//
|
|
1696
|
+
// The libraries are vendored, not pulled from a CDN. This page carries the
|
|
1697
|
+
// install commands and download links for a wallet-adjacent tool, so no
|
|
1698
|
+
// third-party origin may execute code here. Each file is byte-identical to
|
|
1699
|
+
// the published npm artifact (gsap@3.13.0/dist, lenis@1.3.11/dist); the SRI
|
|
1700
|
+
// hash pins that, and a mismatch degrades to the static page, never to a
|
|
1701
|
+
// different script.
|
|
1702
|
+
(function loadExtras(){
|
|
1703
|
+
var libs = [
|
|
1704
|
+
["/assets/vendor/gsap-3.13.0.min.js", "sha384-ZQM47dxemavqCeTvz4hdNVKt+v4pKNkIrfmve4Tz/dQ0N5JJ2LCG5fIrdbu3MTRn"],
|
|
1705
|
+
["/assets/vendor/gsap-scrolltrigger-3.13.0.min.js", "sha384-8OvHTRXcQvo7eXlNE8pVpVQi6sbtk0k0YBaRBLcOHxZFf16V/Jebonn0+GvHNNEy"],
|
|
1706
|
+
["/assets/vendor/lenis-1.3.11.min.js", "sha384-kdY9hFBPoAPpxcrLihsO3APivFOxtQwSeYdzFD5CIIfLurwhdMrEHhkQxZJDkxgk"]
|
|
1707
|
+
];
|
|
1708
|
+
var settled = 0;
|
|
1709
|
+
// Fires once every request has finished, loaded or failed. Deciding what is
|
|
1710
|
+
// actually usable belongs to initPremiumMotion, which checks the globals it
|
|
1711
|
+
// needs rather than trusting a load count.
|
|
1712
|
+
function settle(){
|
|
1713
|
+
settled++;
|
|
1714
|
+
if (settled === libs.length) {
|
|
1715
|
+
window.__oracleMotionReady = true;
|
|
1716
|
+
window.dispatchEvent(new Event("oracle:motion-ready"));
|
|
1717
|
+
}
|
|
1718
|
+
}
|
|
1719
|
+
libs.forEach(function (lib) {
|
|
1720
|
+
var s = document.createElement("script");
|
|
1721
|
+
s.src = lib[0];
|
|
1722
|
+
s.integrity = lib[1];
|
|
1723
|
+
s.async = false; // keep document order: gsap before its plugin
|
|
1724
|
+
s.onload = settle;
|
|
1725
|
+
s.onerror = settle;
|
|
1726
|
+
document.head.appendChild(s);
|
|
1727
|
+
});
|
|
1728
|
+
})();
|
|
1729
|
+
|
|
1730
|
+
(function () {
|
|
1731
|
+
"use strict";
|
|
1732
|
+
document.documentElement.classList.add("js");
|
|
1733
|
+
|
|
1734
|
+
var ICON = "https://icons.llamao.fi/icons/";
|
|
1735
|
+
var CHAINS = [
|
|
1736
|
+
{ name: "HyperEVM", id: "999", logo: "chains/rsz_hyperliquid", note: "hyperliquid agent", badge: "route" },
|
|
1737
|
+
{ name: "Ethereum", id: "1", logo: "chains/rsz_ethereum", note: "evm / bridge agent", badge: "route" },
|
|
1738
|
+
{ name: "Base", id: "8453", logo: "chains/rsz_base", note: "evm / bridge agent", badge: "route" },
|
|
1739
|
+
{ name: "Arbitrum", id: "42161", logo: "chains/rsz_arbitrum", note: "evm / bridge agent", badge: "route" },
|
|
1740
|
+
{ name: "Optimism", id: "10", logo: "chains/rsz_optimism", note: "evm / bridge agent", badge: "route" },
|
|
1741
|
+
{ name: "BNB Chain", id: "56", logo: "chains/rsz_binance", note: "evm / bridge agent", badge: "route" },
|
|
1742
|
+
{ name: "Avalanche", id: "43114", logo: "chains/rsz_avalanche", note: "evm / bridge agent", badge: "route" },
|
|
1743
|
+
{ name: "Polygon", id: "137", logo: "chains/rsz_polygon", note: "evm / bridge agent", badge: "route" },
|
|
1744
|
+
{ name: "Robinhood", id: "4663", logo: "chains/rsz_robinhood", note: "robinhood agent", badge: "route" },
|
|
1745
|
+
{ name: "Abstract", id: "2741", logo: "chains/rsz_abstract", note: "open / add agent", badge: "route" },
|
|
1746
|
+
{ name: "Stable", id: "988", logo: "chains/rsz_stable", note: "stable agent", badge: "route" },
|
|
1747
|
+
{ name: "Solana", id: "SOL", logo: "chains/rsz_solana", note: "solana agent", badge: "route" },
|
|
1748
|
+
{ name: "Bitcoin", id: "BTC", logo: "chains/rsz_bitcoin", note: "bitcoin agent", badge: "route" }
|
|
1749
|
+
];
|
|
1750
|
+
// Guarded: this grid only exists on /where-it-works/. Throwing here would
|
|
1751
|
+
// abort the rest of the script, including the .rv reveal that makes hero
|
|
1752
|
+
// copy visible, leaving other pages blank.
|
|
1753
|
+
var chainGrid = document.getElementById("chain-grid");
|
|
1754
|
+
if (chainGrid) chainGrid.innerHTML = CHAINS.map(function (c) {
|
|
1755
|
+
var cls = c.badge === "route" ? "badge live" : "badge";
|
|
1756
|
+
var label = c.badge === "route" ? "route" : "read only";
|
|
1757
|
+
return '<article class="chain rv"><div class="chain-top"><div class="nm">' + c.name +
|
|
1758
|
+
' <img src="' + ICON + c.logo + '?w=36&h=36" alt="' + c.name + ' logo" loading="lazy"></div></div><div class="meta"><span>' + c.note + '</span><span class="' + cls + '">' + label + '</span></div></article>';
|
|
1759
|
+
}).join("");
|
|
1760
|
+
|
|
1761
|
+
var WM = "/assets/wordmarks/";
|
|
1762
|
+
var BRAND = "/brand/";
|
|
1763
|
+
var PROTOS_A = [
|
|
1764
|
+
{ n: "Uniswap V3", wm: "uniswap.svg", cap: "read + quote + prepare + policy", u: "https://app.uniswap.org/" },
|
|
1765
|
+
{ n: "Aerodrome Slipstream", wm: "aerodrome.svg", cap: "read + quote + prepare", u: "https://aerodrome.finance/" },
|
|
1766
|
+
{ n: "Pancake V3", wm: "pancakeswap.svg", cap: "read + quote", u: "https://pancakeswap.finance/swap" },
|
|
1767
|
+
{ n: "LFJ Liquidity Book", img: "lfj", cap: "read + quote", u: "https://lfj.gg/avalanche/trade" },
|
|
1768
|
+
{ n: "Curve RouterNG", img: "curve", cap: "read + quote + prepare + policy", u: "https://curve.finance" },
|
|
1769
|
+
{ n: "Pendle Router", wm: "pendle.png", cap: "read + quote + prepare + policy", u: "https://pendle.finance/" },
|
|
1770
|
+
{ n: "Morpho vaults", wm: "morpho.svg", cap: "read + deposit prepare", u: "https://app.morpho.org/" },
|
|
1771
|
+
{ n: "Lido stETH", img: "lido", cap: "read + stake prepare + policy", u: "https://lido.fi/" },
|
|
1772
|
+
{ n: "Kinetiq kHYPE", wm: "kinetiq.svg", tall: 1, cap: "read + quote + stake prepare + policy", u: "https://kinetiq.xyz/stake" },
|
|
1773
|
+
{ n: "Project X", img: "projectx", cap: "read", u: "https://www.prjx.com" },
|
|
1774
|
+
{ n: "Uniswap V4", img: "uniswapv4", cap: "read + quote", u: "https://app.uniswap.org/" },
|
|
1775
|
+
{ n: "Aborean CL", img: "aborean", cap: "read + quote", u: "https://aborean.finance/" },
|
|
1776
|
+
{ n: "Aborean AMM", img: "aborean", cap: "read + quote", u: "https://aborean.finance/" },
|
|
1777
|
+
{ n: "Stable Swap V3", img: "stableswap", cap: "read + quote", u: "https://swap.stable.xyz/" },
|
|
1778
|
+
{ n: "Stable Swap V2", img: "stableswap", cap: "read + quote", u: "https://swap.stable.xyz/" },
|
|
1779
|
+
{ n: "Compound V3", img: "compound", cap: "read + quote", u: "https://www.compound.xyz/" },
|
|
1780
|
+
{ n: "Aerodrome V1", img: "aerodrome", cap: "read + quote", u: "https://aerodrome.finance/" },
|
|
1781
|
+
{ n: "Ethena sUSDe", img: "ethena", cap: "read + quote", u: "https://app.ethena.fi/" },
|
|
1782
|
+
{ n: "Lido wstETH", img: "lido", cap: "read + quote", u: "https://lido.fi/" },
|
|
1783
|
+
{ n: "Benqi sAVAX", img: "benqi", cap: "read + quote", u: "https://app.benqi.fi/savax" },
|
|
1784
|
+
{ n: "EigenLayer", img: "eigenlayer", cap: "read + quote", u: "https://www.eigencloud.xyz/eigenlayer" },
|
|
1785
|
+
{ n: "SSV Network", img: "ssv", cap: "read", u: "https://ssv.network/" },
|
|
1786
|
+
{ n: "Fluid Lending", img: "fluid", cap: "read + quote", u: "https://www.fluid.io/" },
|
|
1787
|
+
{ n: "Rain", img: "rain", cap: "read + quote", u: "https://www.rain.one/" },
|
|
1788
|
+
{ n: "Derive V2", img: "derive", cap: "read", u: "https://app.derive.xyz" },
|
|
1789
|
+
{ n: "PancakeSwap AMM", img: "pancakeswap", cap: "read + quote", u: "https://pancakeswap.finance/" },
|
|
1790
|
+
{ n: "Lista Lending", img: "lista", cap: "read + quote", u: "https://lista.org/lending" },
|
|
1791
|
+
{ n: "Silhouette", img: "silhouette", cap: "read", u: "https://silhouette.exchange/" },
|
|
1792
|
+
{ n: "Nest Exchange", img: "nest", cap: "read", u: "https://usenest.xyz/" },
|
|
1793
|
+
{ n: "Lista CDP", img: "lista", cap: "read", u: "https://lista.org/" },
|
|
1794
|
+
{ n: "Benqi Lending", img: "benqi", cap: "read", u: "https://benqi.fi" },
|
|
1795
|
+
{ n: "Pharaoh V3", img: "pharaoh", cap: "read + quote", u: "https://www.phar.gg/" },
|
|
1796
|
+
{ n: "Trade XYZ", img: "tradexyz", cap: "read", u: "https://trade.xyz/" },
|
|
1797
|
+
{ n: "Markets by Kinetiq", img: "markets", cap: "read", u: "https://markets.xyz/" },
|
|
1798
|
+
{ n: "Outcome", img: "outcome", cap: "read", u: "https://outcome.xyz/" },
|
|
1799
|
+
{ n: "Polymarket", wm: "polymarket.png", cap: "read", u: "https://polymarket.com/" },
|
|
1800
|
+
{ n: "XSY", img: "xsy", cap: "read", u: "https://xsy.fi" },
|
|
1801
|
+
{ n: "Balancer V2", wm: "balancer.svg", cap: "read + quote", u: "https://balancer.fi/" },
|
|
1802
|
+
{ n: "Harmonix", img: "harmonix", cap: "read + quote", u: "https://app.harmonix.fi/" },
|
|
1803
|
+
{ n: "Hyperliquid HLP", wm: "hyperliquid.svg", cap: "read", u: "https://app.hyperliquid.xyz" },
|
|
1804
|
+
{ n: "stHYPE + wstHYPE", img: "sthype", cap: "read + quote", u: "https://app.valantis.xyz" },
|
|
1805
|
+
{ n: "Arcus Perps", img: "arcus", cap: "read", u: "https://arcus.xyz/" },
|
|
1806
|
+
{ n: "NOXA Fun", img: "noxa", cap: "read + quote", u: "https://fun.noxa.eth.limo/" },
|
|
1807
|
+
{ n: "Kona V2", img: "kona", cap: "read + quote", u: "https://kona.surf/" },
|
|
1808
|
+
{ n: "Kona Stableswap", img: "kona", cap: "read + quote", u: "https://kona.surf/" },
|
|
1809
|
+
{ n: "NOXA DEX V2", img: "noxa", cap: "read", u: "https://fun.noxa.eth.limo/" },
|
|
1810
|
+
{ n: "AFI Protocol", img: "afi", cap: "read + quote", u: "https://afiprotocol.xyz/" },
|
|
1811
|
+
{ n: "Kelp", img: "kelp", cap: "read + quote", u: "https://kelpdao.xyz/" },
|
|
1812
|
+
{ n: "Dolomite", img: "dolomite", cap: "read", u: "https://dolomite.io" },
|
|
1813
|
+
{ n: "Camelot V3", img: "camelot", cap: "read + quote", u: "https://camelot.exchange/" },
|
|
1814
|
+
{ n: "Beefy", img: "beefy", cap: "read + quote", u: "https://beefy.com" },
|
|
1815
|
+
{ n: "BounceBit", img: "bouncebit", cap: "read", u: "https://bouncebit.io/" },
|
|
1816
|
+
{ n: "BitFi", img: "bitfi", cap: "read", u: "https://www.bitfi.one/" },
|
|
1817
|
+
{ n: "Hypha", img: "hypha", cap: "read + quote", u: "https://www.hypha.sh/" },
|
|
1818
|
+
{ n: "40 Acres", img: "fortyacres", cap: "read + quote", u: "https://www.40acres.finance/" },
|
|
1819
|
+
{ n: "Hyperbeat", img: "hyperbeat", cap: "read + quote", u: "https://app.hyperbeat.org/" },
|
|
1820
|
+
{ n: "GMX V2", wm: "gmx.svg", cap: "read + order attestation", u: "https://gmx.io/" },
|
|
1821
|
+
{ n: "Relay", wm: "relay.svg", cap: "route source", u: "https://relay.link/" },
|
|
1822
|
+
{ n: "Odos", wm: "odos.svg", cap: "read + route source", u: "https://app.odos.xyz" },
|
|
1823
|
+
{ n: "Jupiter", wm: "jupiter.svg", cap: "solana route source", u: "https://jup.ag/" },
|
|
1824
|
+
{ n: "Stargate", wm: "stargate.svg", cap: "read + bridge route", u: "https://stargate.finance/" },
|
|
1825
|
+
{ n: "Motion", img: "motion", cap: "read", u: "https://motion.meme/" },
|
|
1826
|
+
{ n: "LiquidLaunch", img: "liquidlaunch", cap: "read", u: "https://liquidlaunch.app/" },
|
|
1827
|
+
];
|
|
1828
|
+
var PROTOS_B = [
|
|
1829
|
+
{ n: "Uniswap V3 LP", img: "uniswap", cap: "preview + mint/collect prepare", u: "https://app.uniswap.org/" },
|
|
1830
|
+
{ n: "Velodrome V2", wm: "velodrome.svg", cap: "read + quote", u: "https://velodrome.finance/" },
|
|
1831
|
+
{ n: "QuickSwap", wm: "quickswap.png", cap: "read + quote", u: "https://quickswap.exchange/" },
|
|
1832
|
+
{ n: "HyperSwap V3", wm: "hyperswap.svg", cap: "read + quote", u: "https://app.hyperswap.exchange/" },
|
|
1833
|
+
{ n: "Balancer V3", img: "balancer", cap: "read + quote + prepare + policy", u: "https://balancer.fi/" },
|
|
1834
|
+
{ n: "Aave V3", img: "aave", cap: "read + supply/withdraw prepare + policy", u: "https://aave.com/" },
|
|
1835
|
+
{ n: "Morpho Blue", img: "morpho", cap: "read", u: "https://app.morpho.org" },
|
|
1836
|
+
{ n: "Concrete", img: "concrete", cap: "read + quote", u: "https://app.concrete.xyz" },
|
|
1837
|
+
{ n: "HyperLend", img: "hyperlend", cap: "read + supply/withdraw prepare + policy", u: "https://app.hyperlend.finance/" },
|
|
1838
|
+
{ n: "Kinetiq Earn", img: "kinetiq", cap: "read + quote", u: "https://kinetiq.xyz/stake-hype#kinetiq-earn" },
|
|
1839
|
+
{ n: "Kona Lend", img: "konalend", cap: "read + supply/withdraw prepare + policy", u: "https://app.kona.surf/lending" },
|
|
1840
|
+
{ n: "Uniswap V2", img: "uniswapv2", cap: "read + quote", u: "https://app.uniswap.org/" },
|
|
1841
|
+
{ n: "SakuraSwap AMM", img: "sakuraswap", cap: "read + quote", u: "https://sakuraswap.com/" },
|
|
1842
|
+
{ n: "SakuraSwap CLMM", img: "sakuraswap", cap: "read + quote", u: "https://sakuraswap.com/" },
|
|
1843
|
+
{ n: "Curve DEX", img: "curve", cap: "read + quote", u: "https://curve.finance" },
|
|
1844
|
+
{ n: "Aave V2", img: "aavev2", cap: "read + quote", u: "https://aave.com" },
|
|
1845
|
+
{ n: "Velodrome Slipstream", img: "velodrome", cap: "read + quote", u: "https://velodrome.finance/" },
|
|
1846
|
+
{ n: "Sky sUSDS", img: "sky", cap: "read + quote", u: "https://app.sky.money/" },
|
|
1847
|
+
{ n: "ether.fi weETH", img: "etherfi", cap: "read + quote", u: "https://www.ether.fi/" },
|
|
1848
|
+
{ n: "SparkLend", img: "spark", cap: "read + supply/withdraw prepare + policy", u: "https://spark.finance/" },
|
|
1849
|
+
{ n: "Binance wBETH", img: "wbeth", cap: "read + quote", u: "https://www.binance.com/en/wbeth" },
|
|
1850
|
+
{ n: "Spark Savings", img: "sparksavings", cap: "read + quote", u: "https://spark.finance/" },
|
|
1851
|
+
{ n: "Fluid DEX", img: "fluid", cap: "read + quote", u: "https://www.fluid.io/" },
|
|
1852
|
+
{ n: "ZEROBASE", img: "zerobase", cap: "read", u: "https://app.zerobase.pro/" },
|
|
1853
|
+
{ n: "EtherFi Cash", img: "etherfiborrow", cap: "read", u: "https://www.ether.fi/cash" },
|
|
1854
|
+
{ n: "Venus", img: "venus", cap: "read + quote", u: "https://app.venus.io/" },
|
|
1855
|
+
{ n: "Lista slisBNB", img: "lista", cap: "read + quote", u: "https://lista.org/" },
|
|
1856
|
+
{ n: "Solv", img: "solv", cap: "read + quote", u: "https://solv.finance/" },
|
|
1857
|
+
{ n: "Avant avUSD", img: "avant", cap: "read + quote", u: "https://app.avantprotocol.com/" },
|
|
1858
|
+
{ n: "Yield Yak", img: "yieldyak", cap: "read + quote", u: "https://yieldyak.com/" },
|
|
1859
|
+
{ n: "SushiSwap", img: "sushiswap", cap: "read + quote", u: "https://sushi.com/" },
|
|
1860
|
+
{ n: "Sphere", img: "sphere", cap: "read", u: "https://sphere.finance/" },
|
|
1861
|
+
{ n: "Felix", img: "felix", cap: "read + quote", u: "https://www.usefelix.xyz/" },
|
|
1862
|
+
{ n: "Unit", img: "unit", cap: "read", u: "https://hyperunit.xyz/" },
|
|
1863
|
+
{ n: "Hyperliquid Spot", img: "hyperliquidspot", cap: "read + quote", u: "https://app.hyperliquid.xyz/" },
|
|
1864
|
+
{ n: "Kinetiq kmHYPE", img: "kmhype", cap: "read + quote", u: "https://markets.xyz" },
|
|
1865
|
+
{ n: "Lighter Robinhood", img: "lighter", cap: "read", u: "https://robinhoodchain.lighter.xyz/trade/LIT" },
|
|
1866
|
+
{ n: "Ekubo", img: "ekubo", cap: "read", u: "https://ekubo.org/" },
|
|
1867
|
+
{ n: "Myriad Markets", img: "myriad", cap: "read + quote", u: "https://myriad.markets/markets" },
|
|
1868
|
+
{ n: "GASSSS", img: "gassss", cap: "read + quote", u: "https://gassss.xyz" },
|
|
1869
|
+
{ n: "Rocket Pool", img: "rocketpool", cap: "read + quote", u: "https://rocketpool.net" },
|
|
1870
|
+
{ n: "StakeWise V2", img: "stakewise", cap: "read + quote", u: "https://stakewise.io/" },
|
|
1871
|
+
{ n: "Ostium", img: "ostium", cap: "read + quote", u: "https://www.ostium.io/" },
|
|
1872
|
+
{ n: "Gains Network", img: "gainsnetwork", cap: "read + quote", u: "https://gains.trade/" },
|
|
1873
|
+
{ n: "Aster asBNB", img: "aster", cap: "read + quote", u: "https://www.asterdex.com/en/earn" },
|
|
1874
|
+
{ n: "Lorenzo", img: "lorenzo", cap: "read", u: "https://www.lorenzo-protocol.xyz/" },
|
|
1875
|
+
{ n: "Trader Joe", img: "joedex", cap: "read + quote", u: "https://lfj.gg/avalanche" },
|
|
1876
|
+
{ n: "Folks Finance", img: "folks", cap: "read", u: "https://folks.finance/" },
|
|
1877
|
+
{ n: "Velodrome V1", img: "velodrome", cap: "read + quote", u: "https://velodrome.finance/" },
|
|
1878
|
+
{ n: "Looped Hype", img: "loopedhype", cap: "read + quote", u: "https://www.loopingcollective.org/" },
|
|
1879
|
+
{ n: "LI.FI", wm: "lifi.png", cap: "read + route source", u: "https://li.fi/" },
|
|
1880
|
+
{ n: "Velora", img: "velora", cap: "read + route source", u: "https://app.velora.xyz" },
|
|
1881
|
+
{ n: "CoW Swap", wm: "cowswap.svg", cap: "read + route source", u: "https://cow.fi/" },
|
|
1882
|
+
{ n: "Across", wm: "across.svg", cap: "read + bridge route", u: "https://across.to" }
|
|
1883
|
+
];
|
|
1884
|
+
|
|
1885
|
+
// Equalize optical weight: constant target area, clamped, then width-capped.
|
|
1886
|
+
function normalizeMark(img) {
|
|
1887
|
+
var ar = img.naturalWidth / img.naturalHeight;
|
|
1888
|
+
if (!isFinite(ar) || ar <= 0) return;
|
|
1889
|
+
var h = Math.sqrt(2600 / ar);
|
|
1890
|
+
h = Math.max(22, Math.min(34, h));
|
|
1891
|
+
if (h * ar > 170) h = 170 / ar;
|
|
1892
|
+
img.style.height = h.toFixed(1) + "px";
|
|
1893
|
+
}
|
|
1894
|
+
function wireMarks(root) {
|
|
1895
|
+
if (!root) return;
|
|
1896
|
+
root.querySelectorAll("img.wm").forEach(function (img) {
|
|
1897
|
+
if (img.complete) {
|
|
1898
|
+
if (!img.classList.contains("tall") && img.naturalWidth) normalizeMark(img);
|
|
1899
|
+
return;
|
|
1900
|
+
}
|
|
1901
|
+
img.addEventListener("load", function () {
|
|
1902
|
+
if (!img.classList.contains("tall")) normalizeMark(img);
|
|
1903
|
+
syncMarqueeVelocity();
|
|
1904
|
+
}, { once: true });
|
|
1905
|
+
});
|
|
1906
|
+
}
|
|
1907
|
+
|
|
1908
|
+
var MARQUEE_PX_PER_SECOND = 20;
|
|
1909
|
+
var marqueeResizeTimer = 0;
|
|
1910
|
+
function syncMarqueeVelocity() {
|
|
1911
|
+
document.querySelectorAll(".track").forEach(function (track) {
|
|
1912
|
+
var distance = track.scrollWidth / 2;
|
|
1913
|
+
if (distance > 0) {
|
|
1914
|
+
track.style.setProperty("--marquee-duration", Math.max(30, distance / MARQUEE_PX_PER_SECOND).toFixed(2) + "s");
|
|
1915
|
+
}
|
|
1916
|
+
});
|
|
1917
|
+
}
|
|
1918
|
+
|
|
1919
|
+
function protocolName(name) {
|
|
1920
|
+
var label = name.replace(/\s+(?:DEX\s+)?V\d+(?:\s+LP)?\b/gi, "").trim();
|
|
1921
|
+
var aliases = [
|
|
1922
|
+
[/^Outcome\b/i, "Outcome"],
|
|
1923
|
+
[/^Markets by Kinetiq\b/i, "Markets by Kinetiq"],
|
|
1924
|
+
[/^Trade XYZ\b/i, "Trade XYZ"],
|
|
1925
|
+
[/^Nest Exchange\b/i, "Nest Exchange"],
|
|
1926
|
+
[/^Silhouette\b/i, "Silhouette"],
|
|
1927
|
+
[/^Aerodrome\b/i, "Aerodrome"],
|
|
1928
|
+
[/^Pancake(?:Swap)?\b/i, "PancakeSwap"],
|
|
1929
|
+
[/^LFJ\b/i, "LFJ"],
|
|
1930
|
+
[/^Curve\b/i, "Curve"],
|
|
1931
|
+
[/^Pendle\b/i, "Pendle"],
|
|
1932
|
+
[/^Morpho\b/i, "Morpho"],
|
|
1933
|
+
[/^Lido\b/i, "Lido"],
|
|
1934
|
+
[/^Kinetiq\b/i, "Kinetiq"],
|
|
1935
|
+
[/^Aborean\b/i, "Aborean"],
|
|
1936
|
+
[/^Stable Swap\b/i, "Stable"],
|
|
1937
|
+
[/^Ethena\b/i, "Ethena"],
|
|
1938
|
+
[/^Benqi\b/i, "Benqi"],
|
|
1939
|
+
[/^Fluid\b/i, "Fluid"],
|
|
1940
|
+
[/^Lista\b/i, "Lista"],
|
|
1941
|
+
[/^Hyperliquid\b/i, "Hyperliquid"],
|
|
1942
|
+
[/^Arcus\b/i, "Arcus"],
|
|
1943
|
+
[/^NOXA\b/i, "NOXA"],
|
|
1944
|
+
[/^Kona\b/i, "Kona"],
|
|
1945
|
+
[/^Velodrome\b/i, "Velodrome"],
|
|
1946
|
+
[/^SakuraSwap\b/i, "SakuraSwap"],
|
|
1947
|
+
[/^Spark(?:Lend|\b)/i, "Spark"],
|
|
1948
|
+
[/^(?:ether\.fi|EtherFi)\b/i, "EtherFi"],
|
|
1949
|
+
[/^Sky\b/i, "Sky"],
|
|
1950
|
+
[/^Binance\b/i, "Binance"],
|
|
1951
|
+
[/^Avant\b/i, "Avant"],
|
|
1952
|
+
[/^Motion\b/i, "Motion"],
|
|
1953
|
+
[/^LiquidLaunch\b/i, "LiquidLaunch"],
|
|
1954
|
+
[/^Felix\b/i, "Felix"],
|
|
1955
|
+
[/^Aster\b/i, "Aster"],
|
|
1956
|
+
[/^Lighter\b/i, "Lighter"],
|
|
1957
|
+
[/^stHYPE \+ wstHYPE$/i, "Valantis"]
|
|
1958
|
+
];
|
|
1959
|
+
for (var i = 0; i < aliases.length; i++) {
|
|
1960
|
+
if (aliases[i][0].test(label)) return aliases[i][1];
|
|
1961
|
+
}
|
|
1962
|
+
return label;
|
|
1963
|
+
}
|
|
1964
|
+
function uniqueProtocols(list, seen) {
|
|
1965
|
+
return list.filter(function (x) {
|
|
1966
|
+
var label = protocolName(x.n);
|
|
1967
|
+
if (seen[label]) return false;
|
|
1968
|
+
seen[label] = true;
|
|
1969
|
+
return true;
|
|
1970
|
+
});
|
|
1971
|
+
}
|
|
1972
|
+
function chipRow(list) {
|
|
1973
|
+
var seq = list.concat(list);
|
|
1974
|
+
return seq.map(function (x) {
|
|
1975
|
+
var label = protocolName(x.n);
|
|
1976
|
+
var body = x.img
|
|
1977
|
+
? '<img class="wm tall" src="' + BRAND + x.img + '.webp" alt="' + label + '" decoding="async">' +
|
|
1978
|
+
'<span class="wordmark">' + label + '</span>'
|
|
1979
|
+
: x.wm
|
|
1980
|
+
? '<img class="' + (x.tall ? 'wm tall' : 'wm') + (x.mono ? ' mono' : '') + '" src="' + WM + x.wm + '" alt="' + label + '" decoding="async">' +
|
|
1981
|
+
(x.tall ? '<span class="wordmark">' + label + '</span>' : '')
|
|
1982
|
+
: '<span class="wordmark">' + label + '</span>';
|
|
1983
|
+
return '<a class="chip wm-chip" href="' + x.u + '" target="_blank" rel="noopener noreferrer" aria-label="' + label + '">' + body + '</a>';
|
|
1984
|
+
}).join("");
|
|
1985
|
+
}
|
|
1986
|
+
(function () {
|
|
1987
|
+
// Marquee is the BREADTH signal (every brand, moving). The per-tier chip
|
|
1988
|
+
// wall that used to sit below it was removed. This is a presentation subset;
|
|
1989
|
+
// the source-derived hero total remains separate.
|
|
1990
|
+
var marqueeSeen = Object.create(null);
|
|
1991
|
+
var trackA = document.getElementById("proto-track-a");
|
|
1992
|
+
var trackB = document.getElementById("proto-track-b");
|
|
1993
|
+
if (trackA) trackA.innerHTML = chipRow(uniqueProtocols(PROTOS_A, marqueeSeen));
|
|
1994
|
+
if (trackB) trackB.innerHTML = chipRow(uniqueProtocols(PROTOS_B, marqueeSeen));
|
|
1995
|
+
wireMarks(trackA);
|
|
1996
|
+
wireMarks(trackB);
|
|
1997
|
+
})();
|
|
1998
|
+
|
|
1999
|
+
function renderProtocolAtlas() {
|
|
2000
|
+
var root = document.getElementById("protocol-atlas-grid");
|
|
2001
|
+
if (!root) return;
|
|
2002
|
+
var cards = [
|
|
2003
|
+
["State engine", "Portfolio, markets, positions, pools, NFTs, ordinals and venue state pulled before any action is proposed."],
|
|
2004
|
+
["Route brain", "Quotes and bridges normalize into comparable intents, with slippage, destination and calldata shape surfaced before signing."],
|
|
2005
|
+
["Policy wall", "Every value-moving path passes local bounds: chain, spender, destination, amount, TTL and simulation posture."],
|
|
2006
|
+
["Wallet handoff", "Oracle prepares. Your wallet signs. Broadcast lives behind owner auth, armed state and receipts."],
|
|
2007
|
+
["Agent mesh", "Hyperliquid, Polymarket, Solana, Bitcoin, EVM, Stable, Robinhood Chain and protocol builder profiles stay separate."],
|
|
2008
|
+
["Builder layer", "New contracts, route modules and chain-specific scaffolds get generated with checks before deployment ever reaches a wallet."]
|
|
2009
|
+
];
|
|
2010
|
+
root.innerHTML = cards.map(function (x) {
|
|
2011
|
+
return '<article class="motion-card"><div class="motion-scan"></div><h3>' + x[0] + '</h3><p>' + x[1] + '</p></article>';
|
|
2012
|
+
}).join("");
|
|
2013
|
+
}
|
|
2014
|
+
renderProtocolAtlas();
|
|
2015
|
+
|
|
2016
|
+
|
|
2017
|
+
var LM = "/assets/llms/";
|
|
2018
|
+
var LLMS = [
|
|
2019
|
+
{ n: "Hermes Agent", wm: "hermes.png", tall: 1, u: "https://hermes.nousresearch.com" },
|
|
2020
|
+
{ n: "Claude", wm: "claude.svg", u: "https://claude.ai" },
|
|
2021
|
+
{ n: "Grok", wm: "grok.svg", u: "https://grok.com" },
|
|
2022
|
+
{ n: "Codex", wm: "codex-icon.svg", tall: 1, u: "https://openai.com/codex" },
|
|
2023
|
+
{ n: "Gemini", wm: "gemini-icon.svg", tall: 1, u: "https://gemini.google.com" },
|
|
2024
|
+
{ n: "OpenClaw", wm: "openclaw.svg", tall: 1, u: "https://openclaw.ai" },
|
|
2025
|
+
{ n: "Perplexity", wm: "perplexity.svg", u: "https://perplexity.ai" },
|
|
2026
|
+
{ n: "Manus", wm: "manus.svg", u: "https://manus.im" },
|
|
2027
|
+
{ n: "Cursor", wm: "cursor-icon.svg", tall: 1, u: "https://cursor.com" },
|
|
2028
|
+
{ n: "Windsurf", wm: "windsurf.svg", u: "https://windsurf.com" },
|
|
2029
|
+
{ n: "DeepSeek", wm: "deepseek.svg", u: "https://deepseek.com" },
|
|
2030
|
+
{ n: "Qwen", wm: "qwen.svg", tall: 1, u: "https://chat.qwen.ai" },
|
|
2031
|
+
{ n: "Kimi", wm: "kimi-icon.svg", tall: 1, u: "https://kimi.com" }
|
|
2032
|
+
];
|
|
2033
|
+
// Guarded: the model marquee only exists on /where-it-works/.
|
|
2034
|
+
var llmTrack = document.getElementById("llm-track");
|
|
2035
|
+
if (llmTrack) llmTrack.innerHTML = LLMS.concat(LLMS).map(function (x) {
|
|
2036
|
+
var cls = x.tall ? "wm tall" : "wm";
|
|
2037
|
+
return '<a class="chip wm-chip" href="' + x.u + '" target="_blank" rel="noopener noreferrer" aria-label="' + x.n + '"><img class="' + cls + '" src="' + LM + x.wm + '" alt="' + x.n + '" decoding="async">' + (x.tall ? '<span class="wordmark">' + x.n + '</span>' : '') + '</a>';
|
|
2038
|
+
}).join("");
|
|
2039
|
+
|
|
2040
|
+
wireMarks(llmTrack);
|
|
2041
|
+
syncMarqueeVelocity();
|
|
2042
|
+
if (document.fonts && document.fonts.ready) document.fonts.ready.then(syncMarqueeVelocity);
|
|
2043
|
+
window.addEventListener("load", syncMarqueeVelocity);
|
|
2044
|
+
window.addEventListener("resize", function () {
|
|
2045
|
+
clearTimeout(marqueeResizeTimer);
|
|
2046
|
+
marqueeResizeTimer = setTimeout(syncMarqueeVelocity, 120);
|
|
2047
|
+
});
|
|
2048
|
+
|
|
2049
|
+
// Dismiss loader on DOM ready — doesn't wait for external scripts
|
|
2050
|
+
if (document.readyState === "loading") {
|
|
2051
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
2052
|
+
setTimeout(function () { document.getElementById("loader").classList.add("out"); }, 650);
|
|
2053
|
+
});
|
|
2054
|
+
} else {
|
|
2055
|
+
setTimeout(function () { document.getElementById("loader").classList.add("out"); }, 50);
|
|
2056
|
+
}
|
|
2057
|
+
// Belt-and-suspenders: if all else fails, dismiss after 4s
|
|
2058
|
+
setTimeout(function () {
|
|
2059
|
+
var l = document.getElementById("loader");
|
|
2060
|
+
if (l && !l.classList.contains("out")) l.classList.add("out");
|
|
2061
|
+
}, 4000);
|
|
2062
|
+
|
|
2063
|
+
var reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
2064
|
+
var coarse = window.matchMedia("(pointer: coarse)").matches;
|
|
2065
|
+
var activeLenis = null;
|
|
2066
|
+
|
|
2067
|
+
|
|
2068
|
+
if (!reduced && !coarse) {
|
|
2069
|
+
document.querySelectorAll(".home-stat,.motion-card").forEach(function (card) {
|
|
2070
|
+
card.addEventListener("pointermove", function (ev) {
|
|
2071
|
+
var r = card.getBoundingClientRect();
|
|
2072
|
+
var x = (ev.clientX - r.left) / r.width;
|
|
2073
|
+
var y = (ev.clientY - r.top) / r.height;
|
|
2074
|
+
card.style.setProperty("--mx", (x * 100).toFixed(2) + "%");
|
|
2075
|
+
card.style.setProperty("--my", (y * 100).toFixed(2) + "%");
|
|
2076
|
+
if (card.classList.contains("motion-card")) {
|
|
2077
|
+
card.classList.add("is-hot");
|
|
2078
|
+
card.style.transform = "rotateX(" + ((.5 - y) * 5).toFixed(2) + "deg) rotateY(" + ((x - .5) * 7).toFixed(2) + "deg) translateY(-3px)";
|
|
2079
|
+
}
|
|
2080
|
+
});
|
|
2081
|
+
card.addEventListener("pointerleave", function () {
|
|
2082
|
+
if (!card.classList.contains("motion-card")) return;
|
|
2083
|
+
card.classList.remove("is-hot");
|
|
2084
|
+
card.style.transform = "";
|
|
2085
|
+
});
|
|
2086
|
+
});
|
|
2087
|
+
}
|
|
2088
|
+
|
|
2089
|
+
var progress = document.getElementById("progress");
|
|
2090
|
+
var ticking = false;
|
|
2091
|
+
var lastScrollY = window.scrollY || 0;
|
|
2092
|
+
function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); }
|
|
2093
|
+
function onScroll() {
|
|
2094
|
+
if (ticking) return;
|
|
2095
|
+
ticking = true;
|
|
2096
|
+
requestAnimationFrame(function () {
|
|
2097
|
+
var h = document.scrollingElement || document.documentElement;
|
|
2098
|
+
var max = Math.max(1, h.scrollHeight - h.clientHeight);
|
|
2099
|
+
var y = h.scrollTop || window.scrollY || 0;
|
|
2100
|
+
var p = clamp(y / max, 0, 1);
|
|
2101
|
+
var velocity = clamp(y - lastScrollY, -90, 90);
|
|
2102
|
+
lastScrollY = y;
|
|
2103
|
+
progress.style.transform = "scaleX(" + p.toFixed(4) + ")";
|
|
2104
|
+
document.documentElement.style.setProperty("--scroll-pct", (p * 100).toFixed(2) + "%");
|
|
2105
|
+
document.documentElement.style.setProperty("--scroll-shift", (p * 170).toFixed(2) + "px");
|
|
2106
|
+
document.documentElement.style.setProperty("--scroll-shift-neg", (p * -170).toFixed(2) + "px");
|
|
2107
|
+
document.documentElement.style.setProperty("--scroll-shift-soft", (p * -119).toFixed(2) + "px");
|
|
2108
|
+
document.documentElement.style.setProperty("--scroll-drift", (velocity * .36).toFixed(2) + "px");
|
|
2109
|
+
document.documentElement.style.setProperty("--scroll-rot", (p * 620).toFixed(2) + "deg");
|
|
2110
|
+
document.documentElement.style.setProperty("--scroll-rot-neg", (p * -620).toFixed(2) + "deg");
|
|
2111
|
+
document.documentElement.style.setProperty("--scroll-zoom", (.94 + p * .16).toFixed(3));
|
|
2112
|
+
// Kinetic telemetry rides this one spine rather than opening its own rAF
|
|
2113
|
+
// loop: --tele-x is page position, --kin-skew is instantaneous velocity.
|
|
2114
|
+
// The decay back to rest is a CSS transition on the consuming element, so
|
|
2115
|
+
// nothing keeps running once the scroll stops.
|
|
2116
|
+
if (!reduced) {
|
|
2117
|
+
document.documentElement.style.setProperty("--kin-skew", (clamp(velocity, -60, 60) * .05).toFixed(2) + "deg");
|
|
2118
|
+
document.documentElement.style.setProperty("--tele-x", (-6 - p * 26).toFixed(2) + "%");
|
|
2119
|
+
}
|
|
2120
|
+
if (sceneSections.length) pickScene();
|
|
2121
|
+
ticking = false;
|
|
2122
|
+
});
|
|
2123
|
+
}
|
|
2124
|
+
window.addEventListener("scroll", onScroll, { passive: true });
|
|
2125
|
+
|
|
2126
|
+
var sceneSections = Array.prototype.slice.call(document.querySelectorAll("section[id]"));
|
|
2127
|
+
function activateScene(id) {
|
|
2128
|
+
document.body.dataset.scene = id || "home";
|
|
2129
|
+
sceneSections.forEach(function (section) { section.classList.toggle("is-scene", section.id === id); });
|
|
2130
|
+
}
|
|
2131
|
+
function pickScene(){
|
|
2132
|
+
var mark=innerHeight*.46,best="home",bestDist=1e9;
|
|
2133
|
+
sceneSections.forEach(function(section){var r=section.getBoundingClientRect();if(r.bottom<80||r.top>innerHeight-80)return;var d=Math.abs(r.top+r.height*.42-mark);if(d<bestDist){bestDist=d;best=section.id;}});
|
|
2134
|
+
activateScene(best);
|
|
2135
|
+
}
|
|
2136
|
+
pickScene();
|
|
2137
|
+
onScroll();
|
|
2138
|
+
|
|
2139
|
+
var heroOrb = document.getElementById("hero-orb");
|
|
2140
|
+
var heroTitle = document.getElementById("hero-title");
|
|
2141
|
+
if (heroOrb && heroTitle && !reduced) {
|
|
2142
|
+
var px = false;
|
|
2143
|
+
window.addEventListener("scroll", function () {
|
|
2144
|
+
if (px) return;
|
|
2145
|
+
px = true;
|
|
2146
|
+
requestAnimationFrame(function () {
|
|
2147
|
+
var y = window.scrollY;
|
|
2148
|
+
var lim = window.innerHeight * .8;
|
|
2149
|
+
var f = Math.min(y / lim, 1);
|
|
2150
|
+
var art = heroOrb.parentElement;
|
|
2151
|
+
art.style.opacity = String(1 - f);
|
|
2152
|
+
art.style.visibility = f >= 1 ? "hidden" : "visible";
|
|
2153
|
+
art.style.transform = "translateY(" + (Math.min(y, lim) * .28) + "px)";
|
|
2154
|
+
heroTitle.style.transform = "translateY(" + (Math.min(y, lim) * .16) + "px)";
|
|
2155
|
+
heroTitle.style.opacity = String(1 - f * .8);
|
|
2156
|
+
px = false;
|
|
2157
|
+
});
|
|
2158
|
+
}, { passive: true });
|
|
2159
|
+
}
|
|
2160
|
+
|
|
2161
|
+
// Hero is the original CSS orb.
|
|
2162
|
+
|
|
2163
|
+
var nodes = Array.prototype.slice.call(document.querySelectorAll(".rv, .wires"));
|
|
2164
|
+
if (reduced || !("IntersectionObserver" in window)) {
|
|
2165
|
+
nodes.forEach(function (n) { n.classList.add("in"); n.classList.add("done"); });
|
|
2166
|
+
} else {
|
|
2167
|
+
var io = new IntersectionObserver(function (entries) {
|
|
2168
|
+
entries.forEach(function (e) {
|
|
2169
|
+
if (e.isIntersecting) {
|
|
2170
|
+
e.target.classList.add("in");
|
|
2171
|
+
(function (el) { setTimeout(function () { el.classList.add("done"); }, 1100); })(e.target);
|
|
2172
|
+
io.unobserve(e.target);
|
|
2173
|
+
}
|
|
2174
|
+
});
|
|
2175
|
+
}, { threshold: 0.01, rootMargin: "0px 0px -2% 0px" });
|
|
2176
|
+
nodes.forEach(function (n) { io.observe(n); });
|
|
2177
|
+
setTimeout(function () {
|
|
2178
|
+
nodes.forEach(function (n) { n.classList.add("in"); n.classList.add("done"); });
|
|
2179
|
+
}, 2600);
|
|
2180
|
+
}
|
|
2181
|
+
|
|
2182
|
+
function splitWords(root) {
|
|
2183
|
+
root.querySelectorAll("[data-split]").forEach(function (el) {
|
|
2184
|
+
if (el.dataset.splitDone) return;
|
|
2185
|
+
el.dataset.splitDone = "1";
|
|
2186
|
+
function wrap(node) {
|
|
2187
|
+
var frag = document.createDocumentFragment();
|
|
2188
|
+
Array.prototype.slice.call(node.childNodes).forEach(function (child) {
|
|
2189
|
+
if (child.nodeType === 3) {
|
|
2190
|
+
child.textContent.split(/(\s+)/).forEach(function (w) {
|
|
2191
|
+
if (!w) return;
|
|
2192
|
+
if (/^\s+$/.test(w)) { frag.appendChild(document.createTextNode(w)); return; }
|
|
2193
|
+
var m = document.createElement("span"); m.className = "word-mask";
|
|
2194
|
+
var s = document.createElement("span"); s.textContent = w;
|
|
2195
|
+
m.appendChild(s); frag.appendChild(m);
|
|
2196
|
+
});
|
|
2197
|
+
} else if (child.nodeType === 1) {
|
|
2198
|
+
var clone = child.cloneNode(false);
|
|
2199
|
+
clone.appendChild(wrap(child));
|
|
2200
|
+
frag.appendChild(clone);
|
|
2201
|
+
}
|
|
2202
|
+
});
|
|
2203
|
+
return frag;
|
|
2204
|
+
}
|
|
2205
|
+
var out = wrap(el);
|
|
2206
|
+
el.innerHTML = "";
|
|
2207
|
+
el.appendChild(out);
|
|
2208
|
+
});
|
|
2209
|
+
}
|
|
2210
|
+
function initPremiumMotion() {
|
|
2211
|
+
// Every scene below is driven by ScrollTrigger, and the `premium-motion`
|
|
2212
|
+
// styles (dimmed thesis lines, the 300vh instrument runway) are only correct
|
|
2213
|
+
// while those scenes are driving them. A partial load — gsap present, plugin
|
|
2214
|
+
// missing — has to stay on the static page, so both are required up front.
|
|
2215
|
+
// Lenis is smoothing only; without it the scenes run on native scroll.
|
|
2216
|
+
if (reduced || coarse || !window.gsap || !window.ScrollTrigger) return;
|
|
2217
|
+
var gsap = window.gsap;
|
|
2218
|
+
gsap.registerPlugin(window.ScrollTrigger);
|
|
2219
|
+
var LenisCtor = typeof window.Lenis === "function" ? window.Lenis : (window.Lenis && window.Lenis.Lenis);
|
|
2220
|
+
if (LenisCtor) {
|
|
2221
|
+
activeLenis = new LenisCtor({ lerp:.08, smoothWheel:true, wheelMultiplier:.86 });
|
|
2222
|
+
activeLenis.on("scroll", window.ScrollTrigger.update);
|
|
2223
|
+
gsap.ticker.add(function (time) { activeLenis.raf(time * 1000); });
|
|
2224
|
+
gsap.ticker.lagSmoothing(0);
|
|
2225
|
+
}
|
|
2226
|
+
splitWords(document);
|
|
2227
|
+
// Set before any trigger is built: the sticky instrument only grows its tall
|
|
2228
|
+
// scroll run once premium motion is actually on, so ScrollTrigger measures
|
|
2229
|
+
// the final layout rather than the fallback one.
|
|
2230
|
+
document.documentElement.classList.add("premium-motion");
|
|
2231
|
+
document.querySelectorAll("[data-split]").forEach(function (el) {
|
|
2232
|
+
el.classList.add("in", "done");
|
|
2233
|
+
gsap.fromTo(el.querySelectorAll(".word-mask > span"), { yPercent:112 }, { yPercent:0, duration:1.05, ease:"power4.out", stagger:.04, scrollTrigger:{ trigger:el, start:"top 82%" }, clearProps:"transform" });
|
|
2234
|
+
});
|
|
2235
|
+
gsap.to(".hero-art", { yPercent:18, scale:.9, ease:"none", scrollTrigger:{ trigger:".home", start:"top top", end:"bottom top", scrub:true } });
|
|
2236
|
+
gsap.fromTo(".hero-installer", { y:26, filter:"brightness(.92)" }, { y:0, filter:"brightness(1)", duration:1.1, ease:"power4.out", scrollTrigger:{ trigger:".hero-installer", start:"top 88%" }, clearProps:"transform,filter" });
|
|
2237
|
+
gsap.fromTo(".motion-card", { y:44, scale:.97 }, { y:0, scale:1, duration:1.15, ease:"power4.out", stagger:.07, scrollTrigger:{ trigger:".operator-grid", start:"top 82%" }, clearProps:"transform" });
|
|
2238
|
+
gsap.to(".motion-command", { y:-54, ease:"none", scrollTrigger:{ trigger:".motion-lab", start:"top 76%", end:"bottom top", scrub:true } });
|
|
2239
|
+
gsap.fromTo(".chain", { y:28, opacity:.55 }, { y:0, opacity:1, duration:.85, ease:"power3.out", stagger:.03, scrollTrigger:{ trigger:"#chains", start:"top 76%" }, clearProps:"transform,opacity" });
|
|
2240
|
+
gsap.fromTo(".strategy-card", { y:30, opacity:.58 }, { y:0, opacity:1, duration:.95, ease:"power3.out", stagger:.025, scrollTrigger:{ trigger:".strategy-grid", start:"top 78%" }, clearProps:"transform,opacity" });
|
|
2241
|
+
gsap.fromTo(".cli-proof", { scale:.96, y:30 }, { scale:1, y:0, ease:"none", scrollTrigger:{ trigger:".cli-proof", start:"top 86%", end:"bottom 38%", scrub:1 }, clearProps:"transform" });
|
|
2242
|
+
gsap.to(".route-tree", { scale:1.018, ease:"none", transformOrigin:"50% 50%", scrollTrigger:{ trigger:".route-tree", start:"top 82%", end:"bottom 40%", scrub:1 } });
|
|
2243
|
+
|
|
2244
|
+
// ── 01 · the ridge separates into depth as the opening viewport leaves ──
|
|
2245
|
+
[-64, -44, -27, -13, -4].forEach(function (dy, i) {
|
|
2246
|
+
gsap.to(".hero-ridge .rg-" + i, {
|
|
2247
|
+
y: dy, opacity: i < 4 ? .3 : .85, ease: "none",
|
|
2248
|
+
scrollTrigger: { trigger: ".home", start: "top top", end: "bottom top", scrub: .6 }
|
|
2249
|
+
});
|
|
2250
|
+
});
|
|
2251
|
+
gsap.fromTo(".hero-index i", { scaleX: 0 }, { scaleX: 1, duration: 1.2, ease: "power4.out",
|
|
2252
|
+
scrollTrigger: { trigger: ".hero-index", start: "top 92%" } });
|
|
2253
|
+
|
|
2254
|
+
// ── 02 · the thesis lines light as the scroll reaches them, and stay lit.
|
|
2255
|
+
// Reading pace and scroll pace become the same thing. ──
|
|
2256
|
+
gsap.utils.toArray(".thesis-lines li").forEach(function (line) {
|
|
2257
|
+
gsap.fromTo(line, { opacity: .18, y: 28 }, { opacity: 1, y: 0, ease: "none",
|
|
2258
|
+
scrollTrigger: { trigger: line, start: "top 88%", end: "top 54%", scrub: .5 } });
|
|
2259
|
+
});
|
|
2260
|
+
|
|
2261
|
+
// ── 03 · the instrument. The frame is held by CSS `position:sticky`, not a
|
|
2262
|
+
// GSAP pin, so a script failure degrades to a plain readable list instead of
|
|
2263
|
+
// a stranded pin-spacer. This trigger only decides which layer is resolved. ──
|
|
2264
|
+
var stackRun = document.querySelector(".stack-run");
|
|
2265
|
+
var stackLayers = gsap.utils.toArray(".stack-layer");
|
|
2266
|
+
var stackMeter = document.querySelector(".stack-meter i");
|
|
2267
|
+
var stackStage = document.querySelector("[data-stack-stage]");
|
|
2268
|
+
if (stackRun && stackLayers.length) {
|
|
2269
|
+
// Rest state = the state the scrub produces at progress 0: layer 01 lit and
|
|
2270
|
+
// live, the rest held back, the meter empty. The meter's CSS fallback is
|
|
2271
|
+
// full (that is the correct no-JS reading), so it is zeroed here explicitly.
|
|
2272
|
+
stackLayers.forEach(function (layer, i) {
|
|
2273
|
+
layer.classList.toggle("is-live", i === 0);
|
|
2274
|
+
gsap.set(layer, { opacity: i === 0 ? 1 : .24 });
|
|
2275
|
+
gsap.set(layer.querySelector(".layer-ridge"), { xPercent: i === 0 ? 0 : -7, opacity: i === 0 ? 1 : .22 });
|
|
2276
|
+
});
|
|
2277
|
+
if (stackMeter) stackMeter.style.setProperty("--stack-p", "0");
|
|
2278
|
+
window.ScrollTrigger.create({
|
|
2279
|
+
trigger: stackRun, start: "top top+=110", end: "bottom bottom", scrub: true,
|
|
2280
|
+
onUpdate: function (self) {
|
|
2281
|
+
// `reach` starts at 1 so layer 01 never dips below its rest state when the
|
|
2282
|
+
// pin engages; layers 02–05 resolve across the run and the last stretch
|
|
2283
|
+
// holds the fully resolved instrument before it scrolls away.
|
|
2284
|
+
var reach = 1 + self.progress * (stackLayers.length - 1 + .35);
|
|
2285
|
+
if (stackMeter) stackMeter.style.setProperty("--stack-p", self.progress.toFixed(3));
|
|
2286
|
+
var stage = stackLayers[0].dataset.stage;
|
|
2287
|
+
stackLayers.forEach(function (layer, i) {
|
|
2288
|
+
var k = Math.max(0, Math.min(1, reach - i));
|
|
2289
|
+
layer.classList.toggle("is-live", k > .4);
|
|
2290
|
+
if (k > .4) stage = layer.dataset.stage;
|
|
2291
|
+
gsap.set(layer, { opacity: .24 + k * .76 });
|
|
2292
|
+
var ridge = layer.querySelector(".layer-ridge");
|
|
2293
|
+
if (ridge) gsap.set(ridge, { xPercent: -7 + k * 7, opacity: .22 + k * .78 });
|
|
2294
|
+
});
|
|
2295
|
+
if (stackStage && stackStage.textContent !== stage) stackStage.textContent = stage;
|
|
2296
|
+
}
|
|
2297
|
+
});
|
|
2298
|
+
}
|
|
2299
|
+
|
|
2300
|
+
window.ScrollTrigger.refresh();
|
|
2301
|
+
window.addEventListener("load", function () { window.ScrollTrigger.refresh(); });
|
|
2302
|
+
}
|
|
2303
|
+
window.addEventListener("oracle:motion-ready", initPremiumMotion);
|
|
2304
|
+
if (window.__oracleMotionReady) initPremiumMotion();
|
|
2305
|
+
|
|
2306
|
+
var installTabs = Array.prototype.slice.call(document.querySelectorAll("[data-install-tab]"));
|
|
2307
|
+
var installPanels = Array.prototype.slice.call(document.querySelectorAll("[data-install-panel]"));
|
|
2308
|
+
function selectInstallPlatform(platform, moveFocus) {
|
|
2309
|
+
installTabs.forEach(function (tab) {
|
|
2310
|
+
var selected = tab.dataset.installTab === platform;
|
|
2311
|
+
tab.setAttribute("aria-selected", selected ? "true" : "false");
|
|
2312
|
+
tab.setAttribute("tabindex", selected ? "0" : "-1");
|
|
2313
|
+
if (selected && moveFocus) tab.focus();
|
|
2314
|
+
});
|
|
2315
|
+
installPanels.forEach(function (panel) { panel.hidden = panel.dataset.installPanel !== platform; });
|
|
2316
|
+
}
|
|
2317
|
+
installTabs.forEach(function (tab, index) {
|
|
2318
|
+
tab.addEventListener("click", function () { selectInstallPlatform(tab.dataset.installTab, false); });
|
|
2319
|
+
tab.addEventListener("keydown", function (event) {
|
|
2320
|
+
var next = index;
|
|
2321
|
+
if (event.key === "ArrowRight") next = (index + 1) % installTabs.length;
|
|
2322
|
+
else if (event.key === "ArrowLeft") next = (index - 1 + installTabs.length) % installTabs.length;
|
|
2323
|
+
else if (event.key === "Home") next = 0;
|
|
2324
|
+
else if (event.key === "End") next = installTabs.length - 1;
|
|
2325
|
+
else return;
|
|
2326
|
+
event.preventDefault();
|
|
2327
|
+
selectInstallPlatform(installTabs[next].dataset.installTab, true);
|
|
2328
|
+
});
|
|
2329
|
+
});
|
|
2330
|
+
document.querySelectorAll("[data-copy-install]").forEach(function (button) {
|
|
2331
|
+
button.addEventListener("click", async function () {
|
|
2332
|
+
var label = button.querySelector(".hero-install-copy");
|
|
2333
|
+
var command = button.dataset.copyInstall;
|
|
2334
|
+
try {
|
|
2335
|
+
await navigator.clipboard.writeText(command);
|
|
2336
|
+
label.textContent = "Copied";
|
|
2337
|
+
} catch (_) {
|
|
2338
|
+
label.textContent = "Select command";
|
|
2339
|
+
}
|
|
2340
|
+
setTimeout(function () { label.textContent = "Copy"; }, 1400);
|
|
2341
|
+
});
|
|
2342
|
+
});
|
|
2343
|
+
|
|
2344
|
+
|
|
2345
|
+
function scrollToHash(hash) {
|
|
2346
|
+
var target = document.getElementById(hash.slice(1));
|
|
2347
|
+
if (!target) return false;
|
|
2348
|
+
var top = target.getBoundingClientRect().top + (document.scrollingElement || document.documentElement).scrollTop - 88;
|
|
2349
|
+
if (activeLenis && activeLenis.scrollTo) activeLenis.scrollTo(top, { duration: 1.05, easing: function (t) { return 1 - Math.pow(1 - t, 4); } });
|
|
2350
|
+
else window.scrollTo({ top: top, behavior: reduced ? "auto" : "smooth" });
|
|
2351
|
+
return true;
|
|
2352
|
+
}
|
|
2353
|
+
document.querySelectorAll('a[href^="#"]').forEach(function (a) {
|
|
2354
|
+
a.addEventListener("click", function (ev) {
|
|
2355
|
+
var hash = a.getAttribute("href");
|
|
2356
|
+
if (!hash || hash === "#") return;
|
|
2357
|
+
if (scrollToHash(hash)) {
|
|
2358
|
+
ev.preventDefault();
|
|
2359
|
+
history.replaceState(null, "", hash);
|
|
2360
|
+
}
|
|
2361
|
+
});
|
|
2362
|
+
});
|
|
2363
|
+
if (location.hash) setTimeout(function () { scrollToHash(location.hash); }, 60);
|
|
2364
|
+
|
|
2365
|
+
var canvas = document.getElementById("gl");
|
|
2366
|
+
if (!canvas || reduced || coarse) return;
|
|
2367
|
+
var gl = canvas.getContext("webgl", { antialias:false, alpha:false, depth:false, stencil:false, premultipliedAlpha:false });
|
|
2368
|
+
if (!gl) return;
|
|
2369
|
+
|
|
2370
|
+
var vs = "attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}";
|
|
2371
|
+
var fs = [
|
|
2372
|
+
"precision highp float;",
|
|
2373
|
+
"uniform vec2 r; uniform float t;",
|
|
2374
|
+
"float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}",
|
|
2375
|
+
"float noise(vec2 p){vec2 i=floor(p),f=fract(p);float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.));vec2 u=f*f*(3.-2.*f);return mix(a,b,u.x)+(c-a)*u.y*(1.-u.x)+(d-b)*u.x*u.y;}",
|
|
2376
|
+
"void main(){",
|
|
2377
|
+
" vec2 uv=(gl_FragCoord.xy-.5*r)/min(r.x,r.y);",
|
|
2378
|
+
" vec2 p=uv*1.15; float tt=t*.08;",
|
|
2379
|
+
" float n=noise(p*2.2+vec2(tt*.6,-tt*.4)); n+=.5*noise(p*4.6-vec2(tt,tt*.7)); n*=.55;",
|
|
2380
|
+
" vec2 g=abs(fract(p*6.5)-.5); float grid=smoothstep(.06,0.,min(g.x,g.y));",
|
|
2381
|
+
" float d=length(p); float rings=0.;",
|
|
2382
|
+
" for(float i=0.;i<4.;i++){float ph=fract(tt*.35+i*.21);float rad=.08+ph*1.15;rings+=exp(-pow((d-rad)*28.,2.))*(1.-ph);}",
|
|
2383
|
+
" float nodes=0.;",
|
|
2384
|
+
" for(float i=0.;i<12.;i++){float a=i*2.399963;vec2 o=vec2(cos(a+tt*.2),sin(a-tt*.15))*(.18+.05*sin(tt+i));nodes+=exp(-dot(p-o,p-o)*420.);}",
|
|
2385
|
+
" vec3 bg=vec3(0.043,0.063,0.094);",
|
|
2386
|
+
" vec3 blue=vec3(0.486,0.769,1.0);",
|
|
2387
|
+
" vec3 cool=vec3(0.655,0.847,1.0);",
|
|
2388
|
+
" vec3 col=bg;",
|
|
2389
|
+
" col+=blue*(n*.2); col+=blue*grid*.05;",
|
|
2390
|
+
" col+=mix(blue,cool,.35)*rings*.22; col+=blue*nodes*.5;",
|
|
2391
|
+
" col+=blue*exp(-d*d*1.8)*.08;",
|
|
2392
|
+
" float vig=pow(max(1.-dot(uv*.72,uv*.72),0.),1.55);",
|
|
2393
|
+
" col*=vig; gl_FragColor=vec4(col,1.);",
|
|
2394
|
+
"}"
|
|
2395
|
+
].join("\n");
|
|
2396
|
+
|
|
2397
|
+
function compile(type, src){var s=gl.createShader(type);gl.shaderSource(s,src);gl.compileShader(s);return s;}
|
|
2398
|
+
var prog=gl.createProgram();
|
|
2399
|
+
gl.attachShader(prog,compile(gl.VERTEX_SHADER,vs));
|
|
2400
|
+
gl.attachShader(prog,compile(gl.FRAGMENT_SHADER,fs));
|
|
2401
|
+
gl.linkProgram(prog);gl.useProgram(prog);
|
|
2402
|
+
var buf=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,buf);
|
|
2403
|
+
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),gl.STATIC_DRAW);
|
|
2404
|
+
var loc=gl.getAttribLocation(prog,"p");gl.enableVertexAttribArray(loc);gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0);
|
|
2405
|
+
var uR=gl.getUniformLocation(prog,"r"), uT=gl.getUniformLocation(prog,"t");
|
|
2406
|
+
var running=true;
|
|
2407
|
+
function resize(){
|
|
2408
|
+
var dpr=Math.min(window.devicePixelRatio||1,1.5);
|
|
2409
|
+
var w=Math.floor(canvas.clientWidth*dpr), h=Math.floor(canvas.clientHeight*dpr);
|
|
2410
|
+
if(canvas.width!==w||canvas.height!==h){canvas.width=w;canvas.height=h;gl.viewport(0,0,w,h);}
|
|
2411
|
+
}
|
|
2412
|
+
function frame(now){
|
|
2413
|
+
if(!running) return;
|
|
2414
|
+
resize();
|
|
2415
|
+
gl.uniform2f(uR,canvas.width,canvas.height);
|
|
2416
|
+
gl.uniform1f(uT,now*0.001);
|
|
2417
|
+
gl.drawArrays(gl.TRIANGLES,0,3);
|
|
2418
|
+
requestAnimationFrame(frame);
|
|
2419
|
+
}
|
|
2420
|
+
function fit(){canvas.style.width="100%";canvas.style.height="100%";resize();}
|
|
2421
|
+
fit();
|
|
2422
|
+
window.addEventListener("resize",fit,{passive:true});
|
|
2423
|
+
document.addEventListener("visibilitychange",function(){running=document.visibilityState==="visible";if(running)requestAnimationFrame(frame);});
|
|
2424
|
+
requestAnimationFrame(frame);
|
|
2425
|
+
})();
|
|
2426
|
+
</script>
|
|
2427
|
+
<script>
|
|
2428
|
+
(function(){
|
|
2429
|
+
var orb=document.getElementById("orb-video")||document.getElementById("hero-cli-video");
|
|
2430
|
+
if(orb){
|
|
2431
|
+
var showOrb=function(){orb.classList.add("ready");};
|
|
2432
|
+
if(orb.readyState>=2)showOrb();else orb.addEventListener("loadeddata",showOrb,{once:true});
|
|
2433
|
+
orb.addEventListener("error",function(){orb.style.display="none";},{once:true});
|
|
2434
|
+
var pl=orb.play&&orb.play();if(pl&&pl.catch)pl.catch(function(){});
|
|
2435
|
+
}
|
|
2436
|
+
var vids=[document.getElementById("agent-session"),document.getElementById("risk-session")].filter(Boolean);
|
|
2437
|
+
if(!vids.length)return;
|
|
2438
|
+
var reduce=window.matchMedia&&window.matchMedia("(prefers-reduced-motion:reduce)").matches;
|
|
2439
|
+
if(reduce)return;
|
|
2440
|
+
vids.forEach(function(v){
|
|
2441
|
+
function start(){var pr=v.play();if(pr&&pr.catch)pr.catch(function(){});}
|
|
2442
|
+
v.addEventListener("loadeddata",function(){v.classList.add("ready");},{once:true});
|
|
2443
|
+
if(!("IntersectionObserver" in window)){v.preload="auto";start();return;}
|
|
2444
|
+
var io=new IntersectionObserver(function(es){
|
|
2445
|
+
es.forEach(function(e){
|
|
2446
|
+
if(e.isIntersecting){v.preload="auto";start();}
|
|
2447
|
+
else{v.pause();}
|
|
2448
|
+
});
|
|
2449
|
+
},{threshold:.15});
|
|
2450
|
+
io.observe(v);
|
|
2451
|
+
});
|
|
2452
|
+
})();
|
|
2453
|
+
</script>
|
|
2454
|
+
<script>
|
|
2455
|
+
(function () {
|
|
2456
|
+
var cards = [].slice.call(document.querySelectorAll("[data-agent-seq]"));
|
|
2457
|
+
if (!cards.length) return;
|
|
2458
|
+
var reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
2459
|
+
|
|
2460
|
+
function fill(card) {
|
|
2461
|
+
var typed = card.querySelector(".agent-typed");
|
|
2462
|
+
var caret = card.querySelector(".agent-caret");
|
|
2463
|
+
var out = card.querySelector(".agent-out");
|
|
2464
|
+
if (typed) typed.textContent = card.dataset.ask;
|
|
2465
|
+
if (out) { out.hidden = false; out.classList.add("in"); }
|
|
2466
|
+
if (caret) caret.style.display = "none";
|
|
2467
|
+
}
|
|
2468
|
+
|
|
2469
|
+
function play(card, delay) {
|
|
2470
|
+
if (card.dataset.played) return;
|
|
2471
|
+
card.dataset.played = "1";
|
|
2472
|
+
// Reduced motion still needs the content, just not the theatre.
|
|
2473
|
+
if (reduced) { fill(card); return; }
|
|
2474
|
+
var typed = card.querySelector(".agent-typed");
|
|
2475
|
+
var caret = card.querySelector(".agent-caret");
|
|
2476
|
+
var out = card.querySelector(".agent-out");
|
|
2477
|
+
var box = card.querySelector(".agent-box");
|
|
2478
|
+
var ask = card.dataset.ask;
|
|
2479
|
+
var i = 0;
|
|
2480
|
+
setTimeout(function step() {
|
|
2481
|
+
if (i <= ask.length) {
|
|
2482
|
+
if (box) box.classList.add("focus");
|
|
2483
|
+
typed.textContent = ask.slice(0, i);
|
|
2484
|
+
i += 1;
|
|
2485
|
+
setTimeout(step, 26 + Math.random() * 34);
|
|
2486
|
+
return;
|
|
2487
|
+
}
|
|
2488
|
+
if (caret) caret.style.display = "none";
|
|
2489
|
+
// Send: the field releases focus and the button kicks, like a real submit.
|
|
2490
|
+
if (box) box.classList.remove("focus");
|
|
2491
|
+
card.classList.add("sent");
|
|
2492
|
+
setTimeout(function () { card.classList.remove("sent"); }, 300);
|
|
2493
|
+
// Straight from the question to the answer. The oracle_cli row in
|
|
2494
|
+
// between was implementation detail cluttering the card.
|
|
2495
|
+
setTimeout(function () {
|
|
2496
|
+
if (!out) return;
|
|
2497
|
+
out.hidden = false;
|
|
2498
|
+
requestAnimationFrame(function () { out.classList.add("in"); });
|
|
2499
|
+
}, 700);
|
|
2500
|
+
}, delay);
|
|
2501
|
+
}
|
|
2502
|
+
|
|
2503
|
+
if (!("IntersectionObserver" in window)) { cards.forEach(fill); return; }
|
|
2504
|
+
var io = new IntersectionObserver(function (entries) {
|
|
2505
|
+
entries.forEach(function (e) {
|
|
2506
|
+
if (!e.isIntersecting) return;
|
|
2507
|
+
play(e.target, cards.indexOf(e.target) * 900);
|
|
2508
|
+
io.unobserve(e.target);
|
|
2509
|
+
});
|
|
2510
|
+
}, { threshold: 0.35 });
|
|
2511
|
+
cards.forEach(function (c) { io.observe(c); });
|
|
2512
|
+
})();
|
|
2513
|
+
|
|
2514
|
+
// Hero stats count up when the row scrolls into view. Numbers that snap into
|
|
2515
|
+
// place read as static text; numbers that climb read as a system reporting
|
|
2516
|
+
// itself. Targets live in data-count so the markup stays the source of truth.
|
|
2517
|
+
// The counter waits for the page loader to disappear — an earlier version
|
|
2518
|
+
// fired behind the fullscreen loader, finished, and showed dead numbers.
|
|
2519
|
+
(function () {
|
|
2520
|
+
var stats = document.querySelectorAll(".home-stat b[data-count]");
|
|
2521
|
+
if (!stats.length) return;
|
|
2522
|
+
var reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
2523
|
+
function paint(el, value) {
|
|
2524
|
+
var suffix = el.getAttribute("data-suffix") || "";
|
|
2525
|
+
el.textContent = String(value);
|
|
2526
|
+
if (suffix) {
|
|
2527
|
+
var s = document.createElement("span");
|
|
2528
|
+
s.className = "stat-suffix";
|
|
2529
|
+
s.textContent = suffix;
|
|
2530
|
+
el.appendChild(s);
|
|
2531
|
+
}
|
|
2532
|
+
}
|
|
2533
|
+
function land(el) {
|
|
2534
|
+
paint(el, el.getAttribute("data-count"));
|
|
2535
|
+
}
|
|
2536
|
+
if (reduced || !("IntersectionObserver" in window)) { stats.forEach(land); return; }
|
|
2537
|
+
function run(el) {
|
|
2538
|
+
var target = parseInt(el.getAttribute("data-count"), 10);
|
|
2539
|
+
if (!isFinite(target)) { land(el); return; }
|
|
2540
|
+
var dur = 1400, t0 = null;
|
|
2541
|
+
function step(ts) {
|
|
2542
|
+
if (t0 === null) t0 = ts;
|
|
2543
|
+
var k = Math.min(1, (ts - t0) / dur);
|
|
2544
|
+
// Ease out cubic: slow settle for the last few frames so the number
|
|
2545
|
+
// visibly lands rather than snapping.
|
|
2546
|
+
var v = Math.round(target * (1 - Math.pow(1 - k, 3)));
|
|
2547
|
+
paint(el, v);
|
|
2548
|
+
if (k < 1) requestAnimationFrame(step); else land(el);
|
|
2549
|
+
}
|
|
2550
|
+
requestAnimationFrame(step);
|
|
2551
|
+
}
|
|
2552
|
+
function start() {
|
|
2553
|
+
var io = new IntersectionObserver(function (entries) {
|
|
2554
|
+
entries.forEach(function (e) {
|
|
2555
|
+
if (!e.isIntersecting || e.target.dataset.counted) return;
|
|
2556
|
+
e.target.dataset.counted = "1";
|
|
2557
|
+
run(e.target);
|
|
2558
|
+
});
|
|
2559
|
+
}, { threshold: 0.4 });
|
|
2560
|
+
stats.forEach(function (el) { io.observe(el); });
|
|
2561
|
+
}
|
|
2562
|
+
var loader = document.getElementById("loader");
|
|
2563
|
+
if (!loader || loader.classList.contains("out")) { start(); }
|
|
2564
|
+
else {
|
|
2565
|
+
loader.addEventListener("transitionend", function go() {
|
|
2566
|
+
if (!loader.classList.contains("out")) return;
|
|
2567
|
+
loader.removeEventListener("transitionend", go);
|
|
2568
|
+
start();
|
|
2569
|
+
});
|
|
2570
|
+
}
|
|
2571
|
+
})();
|
|
2572
|
+
</script>
|
|
2573
|
+
</body>
|
|
2574
|
+
</html>
|