cyclecad 0.1.5 → 0.1.8
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/CLAUDE.md +165 -34
- package/app/agent-demo.html +1049 -0
- package/app/index.html +15 -0
- package/app/js/agent-api.js +1048 -0
- package/app/mobile.html +1276 -0
- package/brand-identity.html +918 -0
- package/competitive-analysis.html +629 -0
- package/cycleCAD-Investor-Deck.pptx +0 -0
- package/index.html +746 -776
- package/logo-concepts.html +167 -0
- package/package.json +1 -1
- package/~$cycleCAD-Investor-Deck.pptx +0 -0
package/index.html
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>cycleCAD —
|
|
7
|
-
<meta name="description" content="cycleCAD is
|
|
6
|
+
<title>cycleCAD — The Agent-First OS for Manufacturing</title>
|
|
7
|
+
<meta name="description" content="cycleCAD is the OS of Manufacturing — CAD built for AI agents. No GUI. No mouse. Agents are the only interface. The missing common language that connects design through end of life.">
|
|
8
8
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚙️</text></svg>">
|
|
9
9
|
<style>
|
|
10
10
|
/* ============================================================
|
|
@@ -13,33 +13,37 @@
|
|
|
13
13
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
14
14
|
|
|
15
15
|
:root, [data-theme="dark"] {
|
|
16
|
-
--bg-primary: #
|
|
17
|
-
--bg-card: #
|
|
18
|
-
--bg-card-hover: #
|
|
19
|
-
--border-card: #
|
|
20
|
-
--text-primary: #
|
|
21
|
-
--text-secondary: #
|
|
22
|
-
--text-muted: #
|
|
23
|
-
--accent-
|
|
24
|
-
--accent-
|
|
25
|
-
--accent-blue: #
|
|
26
|
-
--accent-
|
|
16
|
+
--bg-primary: #0A1628;
|
|
17
|
+
--bg-card: #122240;
|
|
18
|
+
--bg-card-hover: #1A2D50;
|
|
19
|
+
--border-card: #1E3A5F;
|
|
20
|
+
--text-primary: #F0F0E8;
|
|
21
|
+
--text-secondary: #8B9AB5;
|
|
22
|
+
--text-muted: #5A6B85;
|
|
23
|
+
--accent-gold: #D4A843;
|
|
24
|
+
--accent-gold-light: #E8C065;
|
|
25
|
+
--accent-blue: #2E86DE;
|
|
26
|
+
--accent-purple: #8B6FC0;
|
|
27
|
+
--accent-teal: #3AAFA9;
|
|
28
|
+
--accent-warn: #E8963A;
|
|
29
|
+
--accent-coral: #E05555;
|
|
30
|
+
--accent-gradient: linear-gradient(135deg, #D4A843, #2E86DE);
|
|
27
31
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
28
32
|
--max-width: 1200px;
|
|
29
|
-
--nav-bg: rgba(
|
|
30
|
-
--btn-secondary-border: #
|
|
33
|
+
--nav-bg: rgba(10, 22, 40, 0.9);
|
|
34
|
+
--btn-secondary-border: #1E3A5F;
|
|
31
35
|
--btn-secondary-hover-bg: rgba(255,255,255,0.05);
|
|
32
|
-
--mockup-bg: #
|
|
33
|
-
--mockup-toolbar: #
|
|
34
|
-
--mockup-toolbar-border: #
|
|
35
|
-
--mockup-sidebar: #
|
|
36
|
-
--mockup-sidebar-border: #
|
|
37
|
-
--mockup-viewport-center: #
|
|
38
|
-
--mockup-viewport-edge: #
|
|
39
|
-
--mockup-tree: #
|
|
36
|
+
--mockup-bg: #0D1E38;
|
|
37
|
+
--mockup-toolbar: #122240;
|
|
38
|
+
--mockup-toolbar-border: #1E3A5F;
|
|
39
|
+
--mockup-sidebar: #0F1B32;
|
|
40
|
+
--mockup-sidebar-border: #1E3A5F;
|
|
41
|
+
--mockup-viewport-center: #0D1E38;
|
|
42
|
+
--mockup-viewport-edge: #0A1628;
|
|
43
|
+
--mockup-tree: #1E3A5F;
|
|
40
44
|
--mockup-grid-line: rgba(255,255,255,0.035);
|
|
41
|
-
--cube-border: rgba(
|
|
42
|
-
--cube-bg: rgba(
|
|
45
|
+
--cube-border: rgba(212, 168, 67, 0.5);
|
|
46
|
+
--cube-bg: rgba(212, 168, 67, 0.06);
|
|
43
47
|
}
|
|
44
48
|
|
|
45
49
|
[data-theme="light"] {
|
|
@@ -50,10 +54,10 @@
|
|
|
50
54
|
--text-primary: #111128;
|
|
51
55
|
--text-secondary: #44445a;
|
|
52
56
|
--text-muted: #6e6e88;
|
|
53
|
-
--accent-
|
|
54
|
-
--accent-
|
|
55
|
-
--accent-blue: #
|
|
56
|
-
--accent-gradient: linear-gradient(135deg, #
|
|
57
|
+
--accent-gold: #B8860B;
|
|
58
|
+
--accent-gold-light: #D4A843;
|
|
59
|
+
--accent-blue: #2060B0;
|
|
60
|
+
--accent-gradient: linear-gradient(135deg, #B8860B, #2060B0);
|
|
57
61
|
--nav-bg: rgba(248, 249, 250, 0.9);
|
|
58
62
|
--btn-secondary-border: #d0d2d6;
|
|
59
63
|
--btn-secondary-hover-bg: rgba(0,0,0,0.03);
|
|
@@ -66,8 +70,8 @@
|
|
|
66
70
|
--mockup-viewport-edge: #dddde4;
|
|
67
71
|
--mockup-tree: #d0d0da;
|
|
68
72
|
--mockup-grid-line: rgba(0,0,0,0.04);
|
|
69
|
-
--cube-border: rgba(
|
|
70
|
-
--cube-bg: rgba(
|
|
73
|
+
--cube-border: rgba(184, 134, 11, 0.5);
|
|
74
|
+
--cube-bg: rgba(184, 134, 11, 0.08);
|
|
71
75
|
}
|
|
72
76
|
|
|
73
77
|
html { scroll-behavior: smooth; }
|
|
@@ -81,9 +85,6 @@
|
|
|
81
85
|
-webkit-font-smoothing: antialiased;
|
|
82
86
|
}
|
|
83
87
|
|
|
84
|
-
/* ============================================================
|
|
85
|
-
TYPOGRAPHY
|
|
86
|
-
============================================================ */
|
|
87
88
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
|
88
89
|
|
|
89
90
|
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
|
|
@@ -95,764 +96,425 @@
|
|
|
95
96
|
background-clip: text;
|
|
96
97
|
}
|
|
97
98
|
|
|
98
|
-
/* Light mode: darken gradient for better contrast on white */
|
|
99
99
|
[data-theme="light"] .gradient-text {
|
|
100
|
-
background: linear-gradient(135deg, #
|
|
100
|
+
background: linear-gradient(135deg, #8B6914, #184080);
|
|
101
101
|
-webkit-background-clip: text;
|
|
102
102
|
background-clip: text;
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
-
|
|
106
|
-
[data-theme="light"] .
|
|
107
|
-
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
/* Light mode: ensure primary button text is readable */
|
|
111
|
-
[data-theme="light"] .btn-primary {
|
|
112
|
-
color: #fff;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
/* Light mode: section label stronger */
|
|
116
|
-
[data-theme="light"] .section-label {
|
|
117
|
-
color: #b85800;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
/* Light mode: feature icon backgrounds stronger */
|
|
121
|
-
[data-theme="light"] .feature-icon.orange { background: rgba(184,88,0,0.1); }
|
|
122
|
-
[data-theme="light"] .feature-icon.blue { background: rgba(43,127,212,0.1); }
|
|
123
|
-
[data-theme="light"] .feature-icon.green { background: rgba(30,140,40,0.1); }
|
|
124
|
-
[data-theme="light"] .feature-icon.purple { background: rgba(120,70,200,0.1); }
|
|
125
|
-
[data-theme="light"] .feature-icon.red { background: rgba(200,50,40,0.1); }
|
|
126
|
-
[data-theme="light"] .feature-icon.cyan { background: rgba(40,120,200,0.1); }
|
|
127
|
-
|
|
128
|
-
/* Light mode: card shadow for depth */
|
|
129
|
-
[data-theme="light"] .feature-card,
|
|
130
|
-
[data-theme="light"] .problem-card,
|
|
131
|
-
[data-theme="light"] .cap-item {
|
|
132
|
-
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
/* Light mode: hero badge */
|
|
136
|
-
[data-theme="light"] .hero-badge {
|
|
137
|
-
background: rgba(184,88,0,0.06);
|
|
138
|
-
border-color: rgba(184,88,0,0.15);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
/* Light mode: hero visual glow */
|
|
142
|
-
[data-theme="light"] .hero-visual {
|
|
143
|
-
background: radial-gradient(ellipse at center bottom, rgba(184,88,0,0.04) 0%, transparent 70%);
|
|
144
|
-
}
|
|
105
|
+
[data-theme="light"] .nav-cta { color: #fff !important; }
|
|
106
|
+
[data-theme="light"] .btn-primary { color: #fff; }
|
|
107
|
+
[data-theme="light"] .section-label { color: #B8860B; }
|
|
108
|
+
[data-theme="light"] .hero-badge { background: rgba(184,134,11,0.06); border-color: rgba(184,134,11,0.15); }
|
|
109
|
+
[data-theme="light"] .feature-card, [data-theme="light"] .problem-card, [data-theme="light"] .cap-item, [data-theme="light"] .persona-card, [data-theme="light"] .dna-card { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
|
|
145
110
|
|
|
146
111
|
.section-label {
|
|
147
|
-
font-size: 0.8rem;
|
|
148
|
-
|
|
149
|
-
letter-spacing: 0.15em;
|
|
150
|
-
text-transform: uppercase;
|
|
151
|
-
color: var(--accent-orange);
|
|
152
|
-
margin-bottom: 16px;
|
|
112
|
+
font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em;
|
|
113
|
+
text-transform: uppercase; color: var(--accent-gold); margin-bottom: 16px;
|
|
153
114
|
}
|
|
154
115
|
|
|
155
116
|
/* ============================================================
|
|
156
117
|
LAYOUT
|
|
157
118
|
============================================================ */
|
|
158
|
-
.container {
|
|
159
|
-
|
|
160
|
-
margin: 0 auto;
|
|
161
|
-
padding: 0 24px;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
section {
|
|
165
|
-
padding: 120px 0;
|
|
166
|
-
}
|
|
119
|
+
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
|
|
120
|
+
section { padding: 120px 0; }
|
|
167
121
|
|
|
168
122
|
/* ============================================================
|
|
169
123
|
NAVIGATION
|
|
170
124
|
============================================================ */
|
|
171
125
|
nav {
|
|
172
|
-
position: fixed;
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
-webkit-backdrop-filter: blur(20px);
|
|
181
|
-
border-bottom: 1px solid var(--border-card);
|
|
182
|
-
transition: all 0.3s;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
nav .container {
|
|
186
|
-
display: flex;
|
|
187
|
-
justify-content: space-between;
|
|
188
|
-
align-items: center;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
.nav-logo {
|
|
192
|
-
display: flex;
|
|
193
|
-
align-items: center;
|
|
194
|
-
gap: 10px;
|
|
195
|
-
text-decoration: none;
|
|
196
|
-
color: var(--text-primary);
|
|
197
|
-
font-size: 1.3rem;
|
|
198
|
-
font-weight: 700;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
.nav-logo-icon {
|
|
202
|
-
width: 32px;
|
|
203
|
-
height: 32px;
|
|
204
|
-
background: var(--accent-gradient);
|
|
205
|
-
border-radius: 8px;
|
|
206
|
-
display: flex;
|
|
207
|
-
align-items: center;
|
|
208
|
-
justify-content: center;
|
|
209
|
-
font-size: 18px;
|
|
210
|
-
}
|
|
211
|
-
|
|
126
|
+
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
|
127
|
+
padding: 16px 0; background: var(--nav-bg);
|
|
128
|
+
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
|
|
129
|
+
border-bottom: 1px solid var(--border-card); transition: all 0.3s;
|
|
130
|
+
}
|
|
131
|
+
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
|
132
|
+
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); font-size: 1.3rem; font-weight: 700; }
|
|
133
|
+
.nav-logo-icon { width: 32px; height: 32px; background: var(--accent-gradient); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
|
|
212
134
|
.nav-logo .cycle { color: var(--text-secondary); font-weight: 400; }
|
|
213
135
|
.nav-logo .cad { color: var(--text-primary); font-weight: 800; }
|
|
214
|
-
|
|
215
|
-
.nav-links {
|
|
216
|
-
display: flex;
|
|
217
|
-
gap: 32px;
|
|
218
|
-
align-items: center;
|
|
219
|
-
list-style: none;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
.nav-links a {
|
|
223
|
-
color: var(--text-secondary);
|
|
224
|
-
text-decoration: none;
|
|
225
|
-
font-size: 0.9rem;
|
|
226
|
-
font-weight: 500;
|
|
227
|
-
transition: color 0.2s;
|
|
228
|
-
}
|
|
229
|
-
|
|
136
|
+
.nav-links { display: flex; gap: 32px; align-items: center; list-style: none; }
|
|
137
|
+
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; }
|
|
230
138
|
.nav-links a:hover { color: var(--text-primary); }
|
|
231
|
-
|
|
232
|
-
.nav-cta {
|
|
233
|
-
padding: 8px 20px;
|
|
234
|
-
background: var(--accent-gradient);
|
|
235
|
-
color: #000 !important;
|
|
236
|
-
border-radius: 8px;
|
|
237
|
-
font-weight: 600 !important;
|
|
238
|
-
font-size: 0.85rem !important;
|
|
239
|
-
transition: opacity 0.2s !important;
|
|
240
|
-
}
|
|
241
|
-
|
|
139
|
+
.nav-cta { padding: 8px 20px; background: var(--accent-gradient); color: #000 !important; border-radius: 8px; font-weight: 600 !important; font-size: 0.85rem !important; transition: opacity 0.2s !important; }
|
|
242
140
|
.nav-cta:hover { opacity: 0.9; }
|
|
243
141
|
|
|
244
142
|
/* ============================================================
|
|
245
143
|
HERO
|
|
246
144
|
============================================================ */
|
|
247
145
|
.hero {
|
|
248
|
-
min-height: 100vh;
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
align-items: center;
|
|
252
|
-
justify-content: center;
|
|
253
|
-
text-align: center;
|
|
254
|
-
padding-top: 80px;
|
|
255
|
-
position: relative;
|
|
146
|
+
min-height: 100vh; display: flex; flex-direction: column;
|
|
147
|
+
align-items: center; justify-content: center; text-align: center;
|
|
148
|
+
padding-top: 80px; position: relative; overflow: hidden;
|
|
256
149
|
}
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
padding: 8px 20px;
|
|
263
|
-
background: rgba(255, 140, 0, 0.08);
|
|
264
|
-
border: 1px solid rgba(255, 140, 0, 0.15);
|
|
265
|
-
border-radius: 100px;
|
|
266
|
-
font-size: 0.85rem;
|
|
267
|
-
color: var(--text-secondary);
|
|
268
|
-
margin-bottom: 32px;
|
|
150
|
+
.hero::before {
|
|
151
|
+
content: ''; position: absolute; top: -200px; left: -200px;
|
|
152
|
+
width: 600px; height: 600px;
|
|
153
|
+
background: radial-gradient(circle, rgba(212,168,67,0.1) 0%, transparent 70%);
|
|
154
|
+
animation: pulse1 8s ease-in-out infinite;
|
|
269
155
|
}
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
max-width: 900px;
|
|
276
|
-
margin-bottom: 24px;
|
|
156
|
+
.hero::after {
|
|
157
|
+
content: ''; position: absolute; bottom: -200px; right: -200px;
|
|
158
|
+
width: 600px; height: 600px;
|
|
159
|
+
background: radial-gradient(circle, rgba(46,134,222,0.08) 0%, transparent 70%);
|
|
160
|
+
animation: pulse2 10s ease-in-out infinite;
|
|
277
161
|
}
|
|
162
|
+
@keyframes pulse1 { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } }
|
|
163
|
+
@keyframes pulse2 { 0%,100% { transform: scale(1.1); opacity: 0.5; } 50% { transform: scale(0.9); opacity: 0.8; } }
|
|
278
164
|
|
|
279
|
-
.hero
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
line-height: 1.7;
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
.hero-ctas {
|
|
288
|
-
display: flex;
|
|
289
|
-
gap: 16px;
|
|
290
|
-
flex-wrap: wrap;
|
|
291
|
-
justify-content: center;
|
|
165
|
+
.hero-badge {
|
|
166
|
+
display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px;
|
|
167
|
+
background: rgba(212,168,67,0.08); border: 1px solid rgba(212,168,67,0.2);
|
|
168
|
+
border-radius: 100px; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 32px;
|
|
169
|
+
position: relative; z-index: 1;
|
|
292
170
|
}
|
|
171
|
+
.hero-badge span { color: var(--accent-gold); font-weight: 600; }
|
|
172
|
+
.hero h1 { font-size: clamp(3rem, 7vw, 5rem); max-width: 900px; margin-bottom: 24px; position: relative; z-index: 1; }
|
|
173
|
+
.hero p { font-size: 1.2rem; color: var(--text-secondary); max-width: 640px; margin-bottom: 40px; line-height: 1.7; position: relative; z-index: 1; }
|
|
174
|
+
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; }
|
|
293
175
|
|
|
294
176
|
.btn-primary {
|
|
295
|
-
display: inline-flex;
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
padding: 14px 32px;
|
|
299
|
-
background: var(--accent-gradient);
|
|
300
|
-
color: #000;
|
|
301
|
-
border: none;
|
|
302
|
-
border-radius: 10px;
|
|
303
|
-
font-size: 1rem;
|
|
304
|
-
font-weight: 700;
|
|
305
|
-
cursor: pointer;
|
|
306
|
-
text-decoration: none;
|
|
307
|
-
transition: all 0.2s;
|
|
177
|
+
display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
|
|
178
|
+
background: var(--accent-gradient); color: #000; border: none; border-radius: 10px;
|
|
179
|
+
font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: all 0.2s;
|
|
308
180
|
}
|
|
309
|
-
|
|
310
181
|
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
|
|
311
182
|
|
|
312
183
|
.btn-secondary {
|
|
313
|
-
display: inline-flex;
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
padding: 14px 32px;
|
|
317
|
-
background: transparent;
|
|
318
|
-
color: var(--text-primary);
|
|
319
|
-
border: 1px solid var(--btn-secondary-border);
|
|
320
|
-
border-radius: 10px;
|
|
321
|
-
font-size: 1rem;
|
|
322
|
-
font-weight: 600;
|
|
323
|
-
cursor: pointer;
|
|
324
|
-
text-decoration: none;
|
|
325
|
-
transition: all 0.2s;
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
.btn-secondary:hover {
|
|
329
|
-
border-color: var(--text-muted);
|
|
330
|
-
background: var(--btn-secondary-hover-bg);
|
|
184
|
+
display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
|
|
185
|
+
background: transparent; color: var(--text-primary); border: 1px solid var(--btn-secondary-border);
|
|
186
|
+
border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.2s;
|
|
331
187
|
}
|
|
188
|
+
.btn-secondary:hover { border-color: var(--text-muted); background: var(--btn-secondary-hover-bg); }
|
|
332
189
|
|
|
333
|
-
/* Theme toggle */
|
|
334
190
|
.theme-toggle {
|
|
335
|
-
width: 40px;
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
border: 1px solid var(--border-card);
|
|
339
|
-
background: var(--bg-card);
|
|
340
|
-
color: var(--text-secondary);
|
|
341
|
-
font-size: 18px;
|
|
342
|
-
cursor: pointer;
|
|
343
|
-
display: flex;
|
|
344
|
-
align-items: center;
|
|
345
|
-
justify-content: center;
|
|
346
|
-
transition: all 0.2s;
|
|
347
|
-
margin-left: 8px;
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
.theme-toggle:hover {
|
|
351
|
-
border-color: var(--accent-orange);
|
|
352
|
-
color: var(--accent-orange);
|
|
353
|
-
background: var(--bg-card-hover);
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
/* Hero 3D visual */
|
|
357
|
-
.hero-visual {
|
|
358
|
-
margin-top: 60px;
|
|
359
|
-
width: 100%;
|
|
360
|
-
max-width: 900px;
|
|
361
|
-
aspect-ratio: 16/9;
|
|
362
|
-
background: radial-gradient(ellipse at center bottom, rgba(255,149,32,0.12) 0%, transparent 70%);
|
|
363
|
-
border-radius: 16px;
|
|
364
|
-
border: 1px solid var(--border-card);
|
|
365
|
-
overflow: hidden;
|
|
366
|
-
position: relative;
|
|
367
|
-
display: flex;
|
|
368
|
-
align-items: center;
|
|
369
|
-
justify-content: center;
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
.hero-visual-inner {
|
|
373
|
-
color: var(--text-muted);
|
|
374
|
-
font-size: 0.9rem;
|
|
375
|
-
text-align: center;
|
|
376
|
-
padding: 40px;
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
.hero-visual-inner .app-mockup {
|
|
380
|
-
width: 100%;
|
|
381
|
-
height: 100%;
|
|
382
|
-
background: var(--mockup-bg);
|
|
383
|
-
border-radius: 12px;
|
|
384
|
-
display: flex;
|
|
385
|
-
flex-direction: column;
|
|
386
|
-
overflow: hidden;
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
.mockup-toolbar {
|
|
390
|
-
height: 36px;
|
|
391
|
-
background: var(--mockup-toolbar);
|
|
392
|
-
border-bottom: 1px solid var(--mockup-toolbar-border);
|
|
393
|
-
display: flex;
|
|
394
|
-
align-items: center;
|
|
395
|
-
padding: 0 12px;
|
|
396
|
-
gap: 6px;
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
.mockup-dot {
|
|
400
|
-
width: 8px;
|
|
401
|
-
height: 8px;
|
|
402
|
-
border-radius: 50%;
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
.mockup-dot.red { background: #ff5f57; }
|
|
406
|
-
.mockup-dot.yellow { background: #febc2e; }
|
|
407
|
-
.mockup-dot.green { background: #28c840; }
|
|
408
|
-
|
|
409
|
-
.mockup-toolbar-items {
|
|
410
|
-
display: flex;
|
|
411
|
-
gap: 8px;
|
|
412
|
-
margin-left: 16px;
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
.mockup-toolbar-item {
|
|
416
|
-
width: 40px;
|
|
417
|
-
height: 6px;
|
|
418
|
-
background: var(--mockup-tree);
|
|
419
|
-
border-radius: 3px;
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
.mockup-body {
|
|
423
|
-
flex: 1;
|
|
424
|
-
display: flex;
|
|
425
|
-
}
|
|
426
|
-
|
|
427
|
-
.mockup-sidebar {
|
|
428
|
-
width: 160px;
|
|
429
|
-
background: var(--mockup-sidebar);
|
|
430
|
-
border-right: 1px solid var(--mockup-sidebar-border);
|
|
431
|
-
padding: 12px 8px;
|
|
432
|
-
}
|
|
433
|
-
|
|
434
|
-
.mockup-tree-item {
|
|
435
|
-
height: 5px;
|
|
436
|
-
background: var(--mockup-tree);
|
|
437
|
-
border-radius: 3px;
|
|
438
|
-
margin-bottom: 6px;
|
|
191
|
+
width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-card);
|
|
192
|
+
background: var(--bg-card); color: var(--text-secondary); font-size: 18px; cursor: pointer;
|
|
193
|
+
display: flex; align-items: center; justify-content: center; transition: all 0.2s; margin-left: 8px;
|
|
439
194
|
}
|
|
195
|
+
.theme-toggle:hover { border-color: var(--accent-gold); color: var(--accent-gold); background: var(--bg-card-hover); }
|
|
440
196
|
|
|
441
|
-
|
|
442
|
-
.
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
flex: 1;
|
|
446
|
-
background: radial-gradient(ellipse at center, var(--mockup-viewport-center) 0%, var(--mockup-viewport-edge) 100%);
|
|
447
|
-
display: flex;
|
|
448
|
-
align-items: center;
|
|
449
|
-
justify-content: center;
|
|
450
|
-
position: relative;
|
|
451
|
-
overflow: hidden;
|
|
197
|
+
/* Brand logos in hero */
|
|
198
|
+
.hero-brands {
|
|
199
|
+
display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;
|
|
200
|
+
position: relative; z-index: 1;
|
|
452
201
|
}
|
|
202
|
+
.hero-brands .brand { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
|
|
203
|
+
.hero-brands .wash { color: var(--accent-blue); }
|
|
204
|
+
.hero-brands .times { color: var(--text-muted); font-weight: 300; font-size: 1.2rem; }
|
|
205
|
+
.hero-brands .cad { color: var(--accent-gold); }
|
|
453
206
|
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
background-image:
|
|
458
|
-
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
|
|
459
|
-
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
|
|
460
|
-
background-size: 30px 30px;
|
|
461
|
-
transform: perspective(600px) rotateX(45deg);
|
|
462
|
-
transform-origin: center 70%;
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
.mockup-3d-shape {
|
|
466
|
-
position: relative;
|
|
467
|
-
z-index: 1;
|
|
468
|
-
}
|
|
207
|
+
/* Cycle symbol */
|
|
208
|
+
.cycle-symbol { width: 120px; height: 120px; margin-bottom: 1.5rem; position: relative; z-index: 1; animation: spinSlow 20s linear infinite; }
|
|
209
|
+
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
469
210
|
|
|
470
|
-
/*
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
.cube {
|
|
478
|
-
width: 100%;
|
|
479
|
-
height: 100%;
|
|
480
|
-
transform-style: preserve-3d;
|
|
481
|
-
transform: rotateX(-25deg) rotateY(40deg);
|
|
482
|
-
animation: cubeRotate 20s linear infinite;
|
|
483
|
-
}
|
|
211
|
+
/* ============================================================
|
|
212
|
+
BRAND STORY SECTION
|
|
213
|
+
============================================================ */
|
|
214
|
+
.brand-story { text-align: center; }
|
|
215
|
+
.brand-story h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 800px; margin: 0 auto 20px; }
|
|
216
|
+
.brand-story > .container > .subtitle { color: var(--text-secondary); max-width: 700px; margin: 0 auto 60px; font-size: 1.1rem; }
|
|
484
217
|
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
100% { transform: rotateX(-25deg) rotateY(400deg); }
|
|
218
|
+
.story-cards {
|
|
219
|
+
display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 1000px; margin: 0 auto;
|
|
488
220
|
}
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
position:
|
|
492
|
-
width: 100px;
|
|
493
|
-
height: 100px;
|
|
494
|
-
border: 1.5px solid var(--cube-border);
|
|
495
|
-
background: var(--cube-bg);
|
|
496
|
-
display: flex;
|
|
497
|
-
align-items: center;
|
|
498
|
-
justify-content: center;
|
|
499
|
-
font-size: 10px;
|
|
500
|
-
color: var(--text-muted);
|
|
221
|
+
.story-card {
|
|
222
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
|
|
223
|
+
padding: 2.5rem; text-align: left; transition: all 0.3s; position: relative; overflow: hidden;
|
|
501
224
|
}
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
.cube-face.back { transform: rotateY(180deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
505
|
-
.cube-face.right { transform: rotateY(90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
506
|
-
.cube-face.left { transform: rotateY(-90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
507
|
-
.cube-face.top { transform: rotateX(90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
508
|
-
.cube-face.bottom { transform: rotateX(-90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
509
|
-
|
|
510
|
-
.mockup-props {
|
|
511
|
-
width: 180px;
|
|
512
|
-
background: var(--mockup-sidebar);
|
|
513
|
-
border-left: 1px solid var(--mockup-sidebar-border);
|
|
514
|
-
padding: 12px 8px;
|
|
225
|
+
.story-card::before {
|
|
226
|
+
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
|
|
515
227
|
}
|
|
228
|
+
.story-card.wash::before { background: var(--accent-blue); }
|
|
229
|
+
.story-card.cad::before { background: var(--accent-gold); }
|
|
230
|
+
.story-card:hover { border-color: rgba(212,168,67,0.2); background: var(--bg-card-hover); }
|
|
231
|
+
.story-card .card-brand { font-size: 1.6rem; font-weight: 800; margin-bottom: 0.5rem; }
|
|
232
|
+
.story-card .card-role { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; }
|
|
233
|
+
.story-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; }
|
|
234
|
+
.story-card p strong { color: var(--text-primary); }
|
|
516
235
|
|
|
517
|
-
.
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
background: var(--mockup-tree);
|
|
521
|
-
border-radius: 2px;
|
|
522
|
-
margin-bottom: 8px;
|
|
236
|
+
.story-connector {
|
|
237
|
+
text-align: center; padding: 2rem 0; font-size: 0.85rem; color: var(--accent-gold);
|
|
238
|
+
font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
|
|
523
239
|
}
|
|
524
240
|
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
}
|
|
241
|
+
/* ============================================================
|
|
242
|
+
DNA GRID
|
|
243
|
+
============================================================ */
|
|
244
|
+
.dna-section { text-align: center; }
|
|
245
|
+
.dna-section h2 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 800px; margin: 0 auto 20px; }
|
|
246
|
+
.dna-section > .container > .subtitle { color: var(--text-secondary); max-width: 600px; margin: 0 auto 60px; font-size: 1.05rem; }
|
|
247
|
+
.dna-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
|
|
248
|
+
.dna-card {
|
|
249
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 14px;
|
|
250
|
+
padding: 2rem; text-align: left; transition: border-color 0.3s;
|
|
251
|
+
}
|
|
252
|
+
.dna-card:hover { border-color: var(--accent-gold); }
|
|
253
|
+
.dna-icon {
|
|
254
|
+
width: 48px; height: 48px; border-radius: 12px; display: flex;
|
|
255
|
+
align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem;
|
|
256
|
+
}
|
|
257
|
+
.dna-card h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
|
|
258
|
+
.dna-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }
|
|
532
259
|
|
|
533
260
|
/* ============================================================
|
|
534
|
-
PROBLEM
|
|
261
|
+
PROBLEM & SOLUTION
|
|
535
262
|
============================================================ */
|
|
536
263
|
.problem { text-align: center; }
|
|
537
|
-
|
|
538
|
-
.problem
|
|
539
|
-
font-size: clamp(2rem, 4.5vw, 3.5rem);
|
|
540
|
-
max-width: 800px;
|
|
541
|
-
margin: 0 auto 60px;
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
.problem-cards {
|
|
545
|
-
display: grid;
|
|
546
|
-
grid-template-columns: repeat(2, 1fr);
|
|
547
|
-
gap: 24px;
|
|
548
|
-
max-width: 900px;
|
|
549
|
-
margin: 0 auto;
|
|
550
|
-
}
|
|
551
|
-
|
|
264
|
+
.problem h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 800px; margin: 0 auto 60px; }
|
|
265
|
+
.problem-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
|
|
552
266
|
.problem-card {
|
|
553
|
-
background: var(--bg-card);
|
|
554
|
-
|
|
555
|
-
border-radius: 16px;
|
|
556
|
-
padding: 32px;
|
|
557
|
-
text-align: left;
|
|
558
|
-
transition: all 0.3s;
|
|
559
|
-
}
|
|
560
|
-
|
|
561
|
-
.problem-card:hover {
|
|
562
|
-
border-color: rgba(255,140,0,0.15);
|
|
563
|
-
background: var(--bg-card-hover);
|
|
564
|
-
}
|
|
565
|
-
|
|
566
|
-
.problem-card h3 {
|
|
567
|
-
font-size: 1.25rem;
|
|
568
|
-
font-weight: 700;
|
|
569
|
-
margin-bottom: 12px;
|
|
267
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
|
|
268
|
+
padding: 32px; text-align: left; transition: all 0.3s;
|
|
570
269
|
}
|
|
270
|
+
.problem-card:hover { border-color: rgba(212,168,67,0.15); background: var(--bg-card-hover); }
|
|
271
|
+
.problem-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; }
|
|
272
|
+
.problem-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; }
|
|
571
273
|
|
|
572
|
-
.
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
274
|
+
.solution { text-align: center; }
|
|
275
|
+
.solution h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 800px; margin: 0 auto 60px; }
|
|
276
|
+
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
|
277
|
+
.feature-card {
|
|
278
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
|
|
279
|
+
padding: 32px; text-align: left; transition: all 0.3s;
|
|
576
280
|
}
|
|
281
|
+
.feature-card:hover { border-color: rgba(212,168,67,0.15); background: var(--bg-card-hover); transform: translateY(-2px); }
|
|
282
|
+
.feature-icon {
|
|
283
|
+
width: 48px; height: 48px; border-radius: 12px; display: flex;
|
|
284
|
+
align-items: center; justify-content: center; font-size: 22px; margin-bottom: 20px;
|
|
285
|
+
}
|
|
286
|
+
.feature-icon.gold { background: rgba(212,168,67,0.12); }
|
|
287
|
+
.feature-icon.blue { background: rgba(46,134,222,0.12); }
|
|
288
|
+
.feature-icon.teal { background: rgba(58,175,169,0.12); }
|
|
289
|
+
.feature-icon.purple { background: rgba(139,111,192,0.12); }
|
|
290
|
+
.feature-icon.warn { background: rgba(232,150,58,0.12); }
|
|
291
|
+
.feature-icon.coral { background: rgba(224,85,85,0.12); }
|
|
292
|
+
.feature-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; }
|
|
293
|
+
.feature-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.7; }
|
|
577
294
|
|
|
578
295
|
/* ============================================================
|
|
579
|
-
|
|
296
|
+
EVERYONE IS A DESIGNER (PERSONAS)
|
|
580
297
|
============================================================ */
|
|
581
|
-
.
|
|
298
|
+
.personas { text-align: center; }
|
|
299
|
+
.personas h2 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 800px; margin: 0 auto 20px; }
|
|
300
|
+
.personas > .container > .subtitle { color: var(--text-secondary); max-width: 600px; margin: 0 auto 60px; font-size: 1.05rem; }
|
|
301
|
+
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
|
|
302
|
+
.persona-card {
|
|
303
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 14px;
|
|
304
|
+
padding: 2rem; text-align: left; transition: all 0.3s;
|
|
305
|
+
}
|
|
306
|
+
.persona-card:hover { border-color: rgba(212,168,67,0.2); background: var(--bg-card-hover); }
|
|
307
|
+
.persona-card .persona-icon { font-size: 2rem; margin-bottom: 0.8rem; }
|
|
308
|
+
.persona-card h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
|
|
309
|
+
.persona-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }
|
|
582
310
|
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
}
|
|
594
|
-
|
|
595
|
-
.
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
311
|
+
/* ============================================================
|
|
312
|
+
OS OF THINGS PIPELINE
|
|
313
|
+
============================================================ */
|
|
314
|
+
.os-pipeline { text-align: center; position: relative; overflow: hidden; }
|
|
315
|
+
.os-pipeline::before {
|
|
316
|
+
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
|
317
|
+
background: radial-gradient(circle at 30% 50%, rgba(212,168,67,0.06) 0%, transparent 50%),
|
|
318
|
+
radial-gradient(circle at 70% 50%, rgba(46,134,222,0.06) 0%, transparent 50%);
|
|
319
|
+
}
|
|
320
|
+
.os-pipeline h2 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 800px; margin: 0 auto 16px; position: relative; z-index: 1; }
|
|
321
|
+
.os-pipeline > .container > .subtitle { color: var(--text-secondary); max-width: 700px; margin: 0 auto 50px; font-size: 1.05rem; position: relative; z-index: 1; }
|
|
322
|
+
|
|
323
|
+
.pipeline-flow {
|
|
324
|
+
display: flex; align-items: center; justify-content: center; gap: 0.6rem;
|
|
325
|
+
flex-wrap: wrap; position: relative; z-index: 1; max-width: 1000px; margin: 0 auto 3rem;
|
|
326
|
+
}
|
|
327
|
+
.pipeline-step {
|
|
328
|
+
background: var(--bg-card); border-radius: 14px; padding: 1.2rem 1.6rem;
|
|
329
|
+
border: 1px solid var(--border-card); text-align: center; min-width: 140px;
|
|
601
330
|
transition: all 0.3s;
|
|
602
331
|
}
|
|
332
|
+
.pipeline-step:hover { transform: translateY(-3px); border-color: var(--accent-gold); }
|
|
333
|
+
.pipeline-step .step-icon { font-size: 1.8rem; margin-bottom: 0.3rem; }
|
|
334
|
+
.pipeline-step .step-label { font-weight: 700; font-size: 0.95rem; }
|
|
335
|
+
.pipeline-step .step-desc { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
|
|
336
|
+
.pipeline-arrow { color: var(--text-muted); font-size: 1.2rem; }
|
|
603
337
|
|
|
604
|
-
.
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
transform: translateY(-2px);
|
|
338
|
+
.os-pipeline .vision-text {
|
|
339
|
+
max-width: 700px; margin: 0 auto; font-size: 1.1rem; color: var(--text-secondary);
|
|
340
|
+
line-height: 1.7; position: relative; z-index: 1;
|
|
608
341
|
}
|
|
342
|
+
.os-pipeline .vision-text strong { color: var(--text-primary); }
|
|
609
343
|
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
font-size: 22px;
|
|
618
|
-
margin-bottom: 20px;
|
|
344
|
+
/* ============================================================
|
|
345
|
+
MACHINES CREATING MACHINES
|
|
346
|
+
============================================================ */
|
|
347
|
+
.machines-section { text-align: center; position: relative; overflow: hidden; }
|
|
348
|
+
.machines-section::before {
|
|
349
|
+
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
|
350
|
+
background: radial-gradient(circle at 50% 50%, rgba(139,111,192,0.06) 0%, transparent 60%);
|
|
619
351
|
}
|
|
620
|
-
|
|
621
|
-
.
|
|
622
|
-
.
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
.feature-icon.red { background: rgba(248,81,73,0.12); }
|
|
626
|
-
.feature-icon.cyan { background: rgba(88,166,255,0.12); }
|
|
627
|
-
|
|
628
|
-
.feature-card h3 {
|
|
629
|
-
font-size: 1.15rem;
|
|
630
|
-
font-weight: 700;
|
|
631
|
-
margin-bottom: 12px;
|
|
352
|
+
.machines-section h2 { font-size: clamp(2rem, 4.5vw, 3rem); position: relative; z-index: 1; margin-bottom: 1.5rem; }
|
|
353
|
+
.machines-section p { position: relative; z-index: 1; }
|
|
354
|
+
.machines-flow {
|
|
355
|
+
display: flex; align-items: center; justify-content: center; gap: 0.8rem;
|
|
356
|
+
flex-wrap: wrap; position: relative; z-index: 1; max-width: 900px; margin: 2.5rem auto;
|
|
632
357
|
}
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
font-size: 0.9rem;
|
|
637
|
-
line-height: 1.7;
|
|
358
|
+
.machine-step {
|
|
359
|
+
text-align: center; padding: 1rem 1.5rem; background: var(--bg-card);
|
|
360
|
+
border-radius: 12px; border: 1px solid var(--border-card);
|
|
638
361
|
}
|
|
362
|
+
.machine-step .m-label { font-size: 1.3rem; font-weight: 800; }
|
|
363
|
+
.machine-step .m-desc { font-size: 0.8rem; color: var(--text-muted); }
|
|
639
364
|
|
|
640
365
|
/* ============================================================
|
|
641
366
|
CAPABILITIES GRID
|
|
642
367
|
============================================================ */
|
|
643
368
|
.capabilities { text-align: center; }
|
|
644
|
-
|
|
645
|
-
.capabilities
|
|
646
|
-
|
|
647
|
-
max-width: 800px;
|
|
648
|
-
margin: 0 auto 20px;
|
|
649
|
-
}
|
|
650
|
-
|
|
651
|
-
.capabilities > .container > p {
|
|
652
|
-
color: var(--text-secondary);
|
|
653
|
-
max-width: 600px;
|
|
654
|
-
margin: 0 auto 60px;
|
|
655
|
-
font-size: 1.1rem;
|
|
656
|
-
}
|
|
657
|
-
|
|
658
|
-
.cap-grid {
|
|
659
|
-
display: grid;
|
|
660
|
-
grid-template-columns: repeat(4, 1fr);
|
|
661
|
-
gap: 16px;
|
|
662
|
-
}
|
|
663
|
-
|
|
369
|
+
.capabilities h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 800px; margin: 0 auto 20px; }
|
|
370
|
+
.capabilities > .container > p { color: var(--text-secondary); max-width: 600px; margin: 0 auto 60px; font-size: 1.1rem; }
|
|
371
|
+
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
|
|
664
372
|
.cap-item {
|
|
665
|
-
background: var(--bg-card);
|
|
666
|
-
|
|
667
|
-
border-radius: 12px;
|
|
668
|
-
padding: 20px 16px;
|
|
669
|
-
text-align: center;
|
|
670
|
-
transition: all 0.2s;
|
|
671
|
-
}
|
|
672
|
-
|
|
673
|
-
.cap-item:hover {
|
|
674
|
-
border-color: rgba(255,140,0,0.2);
|
|
675
|
-
background: var(--bg-card-hover);
|
|
676
|
-
}
|
|
677
|
-
|
|
678
|
-
.cap-item .cap-icon {
|
|
679
|
-
font-size: 24px;
|
|
680
|
-
margin-bottom: 10px;
|
|
373
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px;
|
|
374
|
+
padding: 20px 16px; text-align: center; transition: all 0.2s;
|
|
681
375
|
}
|
|
376
|
+
.cap-item:hover { border-color: rgba(212,168,67,0.2); background: var(--bg-card-hover); }
|
|
377
|
+
.cap-item .cap-icon { font-size: 24px; margin-bottom: 10px; }
|
|
378
|
+
.cap-item h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
|
|
379
|
+
.cap-item p { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
|
|
682
380
|
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
}
|
|
688
|
-
|
|
689
|
-
.
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
381
|
+
/* ============================================================
|
|
382
|
+
PRICING SECTION
|
|
383
|
+
============================================================ */
|
|
384
|
+
.pricing { text-align: center; }
|
|
385
|
+
.pricing h2 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 800px; margin: 0 auto 20px; }
|
|
386
|
+
.pricing > .container > .subtitle { color: var(--text-secondary); max-width: 600px; margin: 0 auto 60px; font-size: 1.05rem; }
|
|
387
|
+
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 960px; margin: 0 auto; }
|
|
388
|
+
.pricing-card {
|
|
389
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
|
|
390
|
+
padding: 2.5rem 2rem; text-align: center; transition: all 0.3s; position: relative; overflow: hidden;
|
|
391
|
+
}
|
|
392
|
+
.pricing-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
|
|
393
|
+
.pricing-card.starter::before { background: var(--text-muted); }
|
|
394
|
+
.pricing-card.pro::before { background: var(--accent-blue); }
|
|
395
|
+
.pricing-card.enterprise::before { background: var(--accent-gold); }
|
|
396
|
+
.pricing-card.pro { border-color: rgba(46,134,222,0.3); }
|
|
397
|
+
.pricing-card:hover { transform: translateY(-3px); }
|
|
398
|
+
.pricing-card .tier-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; }
|
|
399
|
+
.pricing-card .tier-price { font-size: 2.2rem; font-weight: 900; margin-bottom: 0.3rem; }
|
|
400
|
+
.pricing-card .tier-period { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; }
|
|
401
|
+
.pricing-card .tier-features { list-style: none; text-align: left; }
|
|
402
|
+
.pricing-card .tier-features li {
|
|
403
|
+
padding: 0.5rem 0; font-size: 0.9rem; color: var(--text-secondary);
|
|
404
|
+
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
405
|
+
}
|
|
406
|
+
.pricing-card .tier-features li::before { content: ""; margin-right: 0.5rem; }
|
|
407
|
+
.launch-badge {
|
|
408
|
+
display: inline-block; padding: 0.4rem 1rem; background: rgba(232,150,58,0.15);
|
|
409
|
+
border: 1px solid rgba(232,150,58,0.3); border-radius: 20px;
|
|
410
|
+
font-size: 0.8rem; color: var(--accent-warn); font-weight: 600; margin-top: 1rem;
|
|
693
411
|
}
|
|
694
412
|
|
|
695
413
|
/* ============================================================
|
|
696
|
-
|
|
414
|
+
SHOWCASE
|
|
697
415
|
============================================================ */
|
|
698
416
|
.showcase { text-align: center; }
|
|
699
|
-
|
|
700
|
-
.showcase h2 {
|
|
701
|
-
font-size: clamp(2rem, 4.5vw, 3.5rem);
|
|
702
|
-
max-width: 800px;
|
|
703
|
-
margin: 0 auto 60px;
|
|
704
|
-
}
|
|
705
|
-
|
|
417
|
+
.showcase h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 800px; margin: 0 auto 60px; }
|
|
706
418
|
.showcase-visual {
|
|
707
|
-
max-width: 900px;
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
background: var(--bg-card);
|
|
711
|
-
border: 1px solid var(--border-card);
|
|
712
|
-
border-radius: 16px;
|
|
713
|
-
overflow: hidden;
|
|
714
|
-
display: flex;
|
|
715
|
-
align-items: center;
|
|
716
|
-
justify-content: center;
|
|
717
|
-
position: relative;
|
|
718
|
-
}
|
|
719
|
-
|
|
720
|
-
.showcase-visual .app-mockup {
|
|
721
|
-
width: 100%;
|
|
722
|
-
height: 100%;
|
|
419
|
+
max-width: 900px; margin: 0 auto; aspect-ratio: 16/9;
|
|
420
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
|
|
421
|
+
overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative;
|
|
723
422
|
}
|
|
423
|
+
.showcase-visual .app-mockup { width: 100%; height: 100%; }
|
|
724
424
|
|
|
725
425
|
/* ============================================================
|
|
726
426
|
FINAL CTA
|
|
727
427
|
============================================================ */
|
|
728
|
-
.final-cta {
|
|
729
|
-
text-align: center;
|
|
730
|
-
padding: 160px 0;
|
|
731
|
-
position: relative;
|
|
732
|
-
}
|
|
733
|
-
|
|
428
|
+
.final-cta { text-align: center; padding: 160px 0; position: relative; }
|
|
734
429
|
.final-cta::before {
|
|
735
|
-
content: '';
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
left: 50%;
|
|
739
|
-
transform: translateX(-50%);
|
|
740
|
-
width: 600px;
|
|
741
|
-
height: 400px;
|
|
742
|
-
background: radial-gradient(ellipse, rgba(255,149,32,0.1) 0%, transparent 70%);
|
|
430
|
+
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
|
|
431
|
+
width: 600px; height: 400px;
|
|
432
|
+
background: radial-gradient(ellipse, rgba(212,168,67,0.1) 0%, transparent 70%);
|
|
743
433
|
pointer-events: none;
|
|
744
434
|
}
|
|
745
|
-
|
|
746
|
-
.final-cta
|
|
747
|
-
font-size: clamp(2.5rem, 5vw, 4rem);
|
|
748
|
-
max-width: 800px;
|
|
749
|
-
margin: 0 auto 24px;
|
|
750
|
-
}
|
|
751
|
-
|
|
752
|
-
.final-cta p {
|
|
753
|
-
color: var(--text-secondary);
|
|
754
|
-
font-size: 1.1rem;
|
|
755
|
-
max-width: 500px;
|
|
756
|
-
margin: 0 auto 40px;
|
|
757
|
-
}
|
|
758
|
-
|
|
759
|
-
.final-cta .hero-ctas {
|
|
760
|
-
justify-content: center;
|
|
761
|
-
}
|
|
435
|
+
.final-cta h2 { font-size: clamp(2.5rem, 5vw, 4rem); max-width: 800px; margin: 0 auto 24px; }
|
|
436
|
+
.final-cta p { color: var(--text-secondary); font-size: 1.1rem; max-width: 500px; margin: 0 auto 40px; }
|
|
762
437
|
|
|
763
438
|
/* ============================================================
|
|
764
439
|
FOOTER
|
|
765
440
|
============================================================ */
|
|
766
|
-
footer {
|
|
767
|
-
|
|
768
|
-
border-top: 1px solid var(--border-card);
|
|
769
|
-
text-align: center;
|
|
770
|
-
}
|
|
771
|
-
|
|
772
|
-
footer .container {
|
|
773
|
-
display: flex;
|
|
774
|
-
justify-content: space-between;
|
|
775
|
-
align-items: center;
|
|
776
|
-
}
|
|
777
|
-
|
|
441
|
+
footer { padding: 32px 0; border-top: 1px solid var(--border-card); text-align: center; }
|
|
442
|
+
footer .container { display: flex; justify-content: space-between; align-items: center; }
|
|
778
443
|
footer .nav-logo { font-size: 1rem; }
|
|
779
|
-
|
|
780
|
-
footer
|
|
781
|
-
|
|
782
|
-
font-size: 0.8rem;
|
|
783
|
-
}
|
|
784
|
-
|
|
785
|
-
footer .footer-links {
|
|
786
|
-
display: flex;
|
|
787
|
-
gap: 24px;
|
|
788
|
-
list-style: none;
|
|
789
|
-
}
|
|
790
|
-
|
|
791
|
-
footer .footer-links a {
|
|
792
|
-
color: var(--text-muted);
|
|
793
|
-
text-decoration: none;
|
|
794
|
-
font-size: 0.8rem;
|
|
795
|
-
transition: color 0.2s;
|
|
796
|
-
}
|
|
797
|
-
|
|
444
|
+
footer p { color: var(--text-muted); font-size: 0.8rem; }
|
|
445
|
+
footer .footer-links { display: flex; gap: 24px; list-style: none; }
|
|
446
|
+
footer .footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; transition: color 0.2s; }
|
|
798
447
|
footer .footer-links a:hover { color: var(--text-secondary); }
|
|
799
448
|
|
|
449
|
+
/* Mockup */
|
|
450
|
+
.hero-visual { margin-top: 60px; width: 100%; max-width: 900px; aspect-ratio: 16/9; background: radial-gradient(ellipse at center bottom, rgba(212,168,67,0.08) 0%, transparent 70%); border-radius: 16px; border: 1px solid var(--border-card); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; z-index: 1; }
|
|
451
|
+
.app-mockup { width: 100%; height: 100%; background: var(--mockup-bg); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
|
|
452
|
+
.mockup-toolbar { height: 36px; background: var(--mockup-toolbar); border-bottom: 1px solid var(--mockup-toolbar-border); display: flex; align-items: center; padding: 0 12px; gap: 6px; }
|
|
453
|
+
.mockup-dot { width: 8px; height: 8px; border-radius: 50%; }
|
|
454
|
+
.mockup-dot.red { background: #ff5f57; } .mockup-dot.yellow { background: #febc2e; } .mockup-dot.green { background: #28c840; }
|
|
455
|
+
.mockup-toolbar-items { display: flex; gap: 8px; margin-left: 16px; }
|
|
456
|
+
.mockup-toolbar-item { width: 40px; height: 6px; background: var(--mockup-tree); border-radius: 3px; }
|
|
457
|
+
.mockup-body { flex: 1; display: flex; }
|
|
458
|
+
.mockup-sidebar { width: 160px; background: var(--mockup-sidebar); border-right: 1px solid var(--mockup-sidebar-border); padding: 12px 8px; }
|
|
459
|
+
.mockup-tree-item { height: 5px; background: var(--mockup-tree); border-radius: 3px; margin-bottom: 6px; }
|
|
460
|
+
.mockup-tree-item.active { background: var(--accent-gold); opacity: 0.6; }
|
|
461
|
+
.mockup-tree-item.indent { margin-left: 12px; width: calc(100% - 12px); }
|
|
462
|
+
.mockup-viewport { flex: 1; background: radial-gradient(ellipse at center, var(--mockup-viewport-center) 0%, var(--mockup-viewport-edge) 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
|
|
463
|
+
.mockup-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 30px 30px; transform: perspective(600px) rotateX(45deg); transform-origin: center 70%; }
|
|
464
|
+
.mockup-3d-shape { position: relative; z-index: 1; }
|
|
465
|
+
.cube-container { width: 120px; height: 120px; perspective: 400px; }
|
|
466
|
+
.cube { width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-25deg) rotateY(40deg); animation: cubeRotate 20s linear infinite; }
|
|
467
|
+
@keyframes cubeRotate { 0% { transform: rotateX(-25deg) rotateY(40deg); } 100% { transform: rotateX(-25deg) rotateY(400deg); } }
|
|
468
|
+
.cube-face { position: absolute; width: 100px; height: 100px; border: 1.5px solid var(--cube-border); background: var(--cube-bg); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted); }
|
|
469
|
+
.cube-face.front { transform: translateZ(50px) translateX(10px) translateY(10px); }
|
|
470
|
+
.cube-face.back { transform: rotateY(180deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
471
|
+
.cube-face.right { transform: rotateY(90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
472
|
+
.cube-face.left { transform: rotateY(-90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
473
|
+
.cube-face.top { transform: rotateX(90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
474
|
+
.cube-face.bottom { transform: rotateX(-90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
475
|
+
.mockup-props { width: 180px; background: var(--mockup-sidebar); border-left: 1px solid var(--mockup-sidebar-border); padding: 12px 8px; }
|
|
476
|
+
.mockup-prop-label { height: 4px; width: 40px; background: var(--mockup-tree); border-radius: 2px; margin-bottom: 8px; }
|
|
477
|
+
.mockup-prop-value { height: 4px; width: 70px; background: var(--mockup-tree); border-radius: 2px; margin-bottom: 12px; }
|
|
478
|
+
|
|
800
479
|
/* ============================================================
|
|
801
480
|
RESPONSIVE
|
|
802
481
|
============================================================ */
|
|
803
482
|
@media (max-width: 900px) {
|
|
483
|
+
.story-cards { grid-template-columns: 1fr; }
|
|
804
484
|
.problem-cards { grid-template-columns: 1fr; }
|
|
805
485
|
.feature-cards { grid-template-columns: 1fr; }
|
|
486
|
+
.dna-grid { grid-template-columns: 1fr; }
|
|
487
|
+
.persona-grid { grid-template-columns: 1fr; }
|
|
488
|
+
.pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
|
|
806
489
|
.cap-grid { grid-template-columns: repeat(2, 1fr); }
|
|
807
490
|
.mockup-props, .mockup-sidebar { display: none; }
|
|
808
491
|
nav .nav-links { display: none; }
|
|
492
|
+
.pipeline-flow { gap: 0.4rem; }
|
|
493
|
+
.pipeline-step { min-width: 100px; padding: 0.8rem 1rem; }
|
|
494
|
+
.pipeline-arrow { display: none; }
|
|
809
495
|
}
|
|
810
|
-
|
|
811
496
|
@media (max-width: 600px) {
|
|
812
497
|
section { padding: 80px 0; }
|
|
813
498
|
.cap-grid { grid-template-columns: 1fr 1fr; }
|
|
814
499
|
.hero-ctas { flex-direction: column; align-items: center; }
|
|
815
500
|
footer .container { flex-direction: column; gap: 16px; }
|
|
816
501
|
footer .footer-links { gap: 16px; }
|
|
502
|
+
.hero-brands .brand { font-size: 1.1rem; }
|
|
817
503
|
}
|
|
818
504
|
|
|
819
|
-
/*
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
to { opacity: 1; transform: translateY(0); }
|
|
825
|
-
}
|
|
826
|
-
|
|
827
|
-
.fade-up {
|
|
828
|
-
opacity: 0;
|
|
829
|
-
animation: fadeUp 0.8s ease forwards;
|
|
830
|
-
}
|
|
831
|
-
|
|
832
|
-
.fade-up.d1 { animation-delay: 0.1s; }
|
|
833
|
-
.fade-up.d2 { animation-delay: 0.2s; }
|
|
834
|
-
.fade-up.d3 { animation-delay: 0.3s; }
|
|
835
|
-
.fade-up.d4 { animation-delay: 0.4s; }
|
|
505
|
+
/* Animations */
|
|
506
|
+
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
|
|
507
|
+
.fade-up { opacity: 0; animation: fadeUp 0.8s ease forwards; }
|
|
508
|
+
.fade-up.d1 { animation-delay: 0.1s; } .fade-up.d2 { animation-delay: 0.2s; }
|
|
509
|
+
.fade-up.d3 { animation-delay: 0.3s; } .fade-up.d4 { animation-delay: 0.4s; }
|
|
836
510
|
.fade-up.d5 { animation-delay: 0.5s; }
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
.reveal {
|
|
840
|
-
opacity: 0;
|
|
841
|
-
transform: translateY(30px);
|
|
842
|
-
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
|
843
|
-
}
|
|
844
|
-
|
|
845
|
-
.reveal.visible {
|
|
846
|
-
opacity: 1;
|
|
847
|
-
transform: translateY(0);
|
|
848
|
-
}
|
|
511
|
+
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
512
|
+
.reveal.visible { opacity: 1; transform: translateY(0); }
|
|
849
513
|
</style>
|
|
850
514
|
</head>
|
|
851
515
|
<body>
|
|
852
516
|
|
|
853
|
-
<!--
|
|
854
|
-
NAVIGATION
|
|
855
|
-
============================================================ -->
|
|
517
|
+
<!-- NAVIGATION -->
|
|
856
518
|
<nav>
|
|
857
519
|
<div class="container">
|
|
858
520
|
<a href="#" class="nav-logo">
|
|
@@ -860,38 +522,60 @@
|
|
|
860
522
|
<span class="cycle">cycle</span><span class="cad">CAD</span>
|
|
861
523
|
</a>
|
|
862
524
|
<ul class="nav-links">
|
|
525
|
+
<li><a href="#story">Story</a></li>
|
|
863
526
|
<li><a href="#features">Features</a></li>
|
|
864
|
-
<li><a href="#
|
|
865
|
-
<li><a href="#
|
|
527
|
+
<li><a href="#vision">Vision</a></li>
|
|
528
|
+
<li><a href="#token-economy">Token Economy</a></li>
|
|
866
529
|
<li><a href="https://github.com/vvlars-cmd/cyclecad" target="_blank">GitHub</a></li>
|
|
867
|
-
<li><a href="/app/" class="nav-cta">
|
|
868
|
-
<li><button class="theme-toggle" id="theme-toggle" title="Toggle dark/light mode" aria-label="Toggle theme"
|
|
530
|
+
<li><a href="/app/" class="nav-cta">Launch App</a></li>
|
|
531
|
+
<li><button class="theme-toggle" id="theme-toggle" title="Toggle dark/light mode" aria-label="Toggle theme">☀️</button></li>
|
|
869
532
|
</ul>
|
|
870
533
|
</div>
|
|
871
534
|
</nav>
|
|
872
535
|
|
|
873
536
|
<!-- ============================================================
|
|
874
|
-
HERO
|
|
537
|
+
HERO — cycleWASH × cycleCAD
|
|
875
538
|
============================================================ -->
|
|
876
539
|
<section class="hero" id="hero">
|
|
877
|
-
<div class="
|
|
878
|
-
<
|
|
540
|
+
<div class="cycle-symbol fade-up d1">
|
|
541
|
+
<svg viewBox="0 0 200 200">
|
|
542
|
+
<defs>
|
|
543
|
+
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
544
|
+
<stop offset="0%" style="stop-color:#2E86DE;stop-opacity:1" />
|
|
545
|
+
<stop offset="50%" style="stop-color:#D4A843;stop-opacity:1" />
|
|
546
|
+
<stop offset="100%" style="stop-color:#3AAFA9;stop-opacity:1" />
|
|
547
|
+
</linearGradient>
|
|
548
|
+
</defs>
|
|
549
|
+
<path d="M 100 20 A 80 80 0 0 1 169 60" fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round"/>
|
|
550
|
+
<polygon points="172,55 165,68 158,55" fill="#D4A843"/>
|
|
551
|
+
<path d="M 169 140 A 80 80 0 0 1 31 140" fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round"/>
|
|
552
|
+
<polygon points="28,136 35,148 22,148" fill="#3AAFA9"/>
|
|
553
|
+
<path d="M 31 60 A 80 80 0 0 1 100 20" fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round"/>
|
|
554
|
+
<polygon points="96,17 103,28 90,28" fill="#2E86DE"/>
|
|
555
|
+
<text x="100" y="95" text-anchor="middle" fill="#F0F0E8" font-family="Inter, sans-serif" font-weight="800" font-size="22">cycle</text>
|
|
556
|
+
<text x="100" y="118" text-anchor="middle" fill="#8B9AB5" font-family="Inter, sans-serif" font-weight="400" font-size="11" letter-spacing="3">ENGINEERING</text>
|
|
557
|
+
</svg>
|
|
558
|
+
</div>
|
|
559
|
+
|
|
560
|
+
<div class="hero-brands fade-up d2">
|
|
561
|
+
<span class="brand wash">cycleWASH</span>
|
|
562
|
+
<span class="times">×</span>
|
|
563
|
+
<span class="brand cad">cycleCAD</span>
|
|
879
564
|
</div>
|
|
880
565
|
|
|
881
566
|
<h1 class="fade-up d2">
|
|
882
|
-
|
|
883
|
-
<span class="gradient-text">in your browser</span>
|
|
567
|
+
<span class="gradient-text">The Agent-First OS for Manufacturing</span>
|
|
884
568
|
</h1>
|
|
885
569
|
|
|
886
570
|
<p class="fade-up d3">
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
571
|
+
CAD was built for humans with a mouse. We built it for AI agents.<br>
|
|
572
|
+
No GUI. No training. No screen required. Agents are the only interface.<br>
|
|
573
|
+
Every agent — from GPT to Claude to Gemini — designs, validates, and manufactures through cycleCAD.
|
|
890
574
|
</p>
|
|
891
575
|
|
|
892
576
|
<div class="hero-ctas fade-up d4">
|
|
893
|
-
<a href="/app/" class="btn-primary">
|
|
894
|
-
<a href="#
|
|
577
|
+
<a href="/app/" class="btn-primary">Explore the Platform</a>
|
|
578
|
+
<a href="#story" class="btn-secondary">Our Story</a>
|
|
895
579
|
</div>
|
|
896
580
|
|
|
897
581
|
<div class="hero-visual fade-up d5">
|
|
@@ -907,12 +591,12 @@
|
|
|
907
591
|
<div class="mockup-toolbar-item"></div>
|
|
908
592
|
<div class="mockup-toolbar-item" style="width:30px"></div>
|
|
909
593
|
<div class="mockup-toolbar-item"></div>
|
|
910
|
-
<div class="mockup-toolbar-item" style="width:60px;background:rgba(
|
|
594
|
+
<div class="mockup-toolbar-item" style="width:60px;background:rgba(212,168,67,0.3);"></div>
|
|
911
595
|
</div>
|
|
912
596
|
</div>
|
|
913
597
|
<div class="mockup-body">
|
|
914
598
|
<div class="mockup-sidebar">
|
|
915
|
-
<div style="height:4px;width:50px;background:#
|
|
599
|
+
<div style="height:4px;width:50px;background:#D4A843;opacity:0.5;border-radius:2px;margin-bottom:10px;"></div>
|
|
916
600
|
<div class="mockup-tree-item" style="width:80%"></div>
|
|
917
601
|
<div class="mockup-tree-item indent active"></div>
|
|
918
602
|
<div class="mockup-tree-item indent" style="width:60%"></div>
|
|
@@ -922,8 +606,6 @@
|
|
|
922
606
|
<div class="mockup-tree-item indent active" style="width:65%"></div>
|
|
923
607
|
<div class="mockup-tree-item" style="width:85%"></div>
|
|
924
608
|
<div class="mockup-tree-item indent" style="width:50%"></div>
|
|
925
|
-
<div class="mockup-tree-item indent" style="width:60%"></div>
|
|
926
|
-
<div class="mockup-tree-item" style="width:70%"></div>
|
|
927
609
|
</div>
|
|
928
610
|
<div class="mockup-viewport">
|
|
929
611
|
<div class="mockup-grid"></div>
|
|
@@ -941,7 +623,7 @@
|
|
|
941
623
|
</div>
|
|
942
624
|
</div>
|
|
943
625
|
<div class="mockup-props">
|
|
944
|
-
<div style="height:4px;width:50px;background:#
|
|
626
|
+
<div style="height:4px;width:50px;background:#2E86DE;opacity:0.4;border-radius:2px;margin-bottom:10px;"></div>
|
|
945
627
|
<div class="mockup-prop-label"></div>
|
|
946
628
|
<div class="mockup-prop-value"></div>
|
|
947
629
|
<div class="mockup-prop-label" style="width:50px"></div>
|
|
@@ -951,32 +633,105 @@
|
|
|
951
633
|
<div style="height:1px;background:var(--border-card);margin:16px 0;"></div>
|
|
952
634
|
<div class="mockup-prop-label" style="width:55px"></div>
|
|
953
635
|
<div class="mockup-prop-value" style="width:80px"></div>
|
|
954
|
-
<div class="mockup-prop-label" style="width:45px"></div>
|
|
955
|
-
<div class="mockup-prop-value" style="width:65px"></div>
|
|
956
636
|
</div>
|
|
957
637
|
</div>
|
|
958
638
|
</div>
|
|
959
639
|
</div>
|
|
960
640
|
</section>
|
|
961
641
|
|
|
642
|
+
<!-- ============================================================
|
|
643
|
+
BRAND STORY — One Prefix. One Philosophy.
|
|
644
|
+
============================================================ -->
|
|
645
|
+
<section class="brand-story" id="story">
|
|
646
|
+
<div class="container">
|
|
647
|
+
<div class="section-label reveal">OUR STORY</div>
|
|
648
|
+
<h2 class="reveal">One Prefix. <span class="gradient-text">One Philosophy.</span></h2>
|
|
649
|
+
<p class="subtitle reveal">The "cycle" in both brands isn't coincidence — it's the DNA of everything we build. Circular thinking applied to machines, and now to the tools that design them.</p>
|
|
650
|
+
|
|
651
|
+
<div class="story-cards">
|
|
652
|
+
<div class="story-card wash reveal">
|
|
653
|
+
<div class="card-brand" style="color:var(--accent-blue);">cycleWASH</div>
|
|
654
|
+
<div class="card-role">Circular Engineering</div>
|
|
655
|
+
<p>cycleWASH builds <strong>industrial bicycle washing machines</strong> — real hardware that keeps bikes in circulation longer. Complex machines with hundreds of precision-engineered parts across multiple sub-assemblies, designed in Autodesk Inventor and built in Germany.</p>
|
|
656
|
+
<p style="margin-top:1rem;">Every part is designed for <strong>disassembly, repair, and reuse</strong>. That's circular engineering — designing products that fight the throwaway economy from the first sketch.</p>
|
|
657
|
+
</div>
|
|
658
|
+
<div class="story-card cad reveal">
|
|
659
|
+
<div class="card-brand" style="color:var(--accent-gold);">cycleCAD</div>
|
|
660
|
+
<div class="card-role">Democratizing Design</div>
|
|
661
|
+
<p>Designing complex machines meant fighting <strong>$4,000/year CAD licenses</strong>, proprietary file formats, and tools that lock you into one vendor's ecosystem. We built cycleCAD to solve our own problem — and to power the <strong>circular economy</strong>.</p>
|
|
662
|
+
<p style="margin-top:1rem;"><strong>Browser-based, zero-install, AI-agent-ready.</strong> Built so AI agents can design autonomously, unskilled workers can build with confidence, and anyone with a browser can participate in the circular economy.</p>
|
|
663
|
+
</div>
|
|
664
|
+
</div>
|
|
665
|
+
</div>
|
|
666
|
+
</section>
|
|
667
|
+
|
|
668
|
+
<!-- ============================================================
|
|
669
|
+
SHARED BRAND DNA
|
|
670
|
+
============================================================ -->
|
|
671
|
+
<section class="dna-section" id="dna">
|
|
672
|
+
<div class="container">
|
|
673
|
+
<div class="section-label reveal">SHARED DNA</div>
|
|
674
|
+
<h2 class="reveal">What makes it a <span class="gradient-text">"cycle" product</span></h2>
|
|
675
|
+
<p class="subtitle reveal">Six principles that define everything we build.</p>
|
|
676
|
+
|
|
677
|
+
<div class="dna-grid">
|
|
678
|
+
<div class="dna-card reveal">
|
|
679
|
+
<div class="dna-icon" style="background:rgba(46,134,222,0.12);">🔄</div>
|
|
680
|
+
<h4>Circular by Design</h4>
|
|
681
|
+
<p>cycleWASH machines are built for disassembly and repair. cycleCAD's rebuild guides and maintenance tools encode that philosophy into software.</p>
|
|
682
|
+
</div>
|
|
683
|
+
<div class="dna-card reveal">
|
|
684
|
+
<div class="dna-icon" style="background:rgba(212,168,67,0.12);">🌍</div>
|
|
685
|
+
<h4>Accessible to All</h4>
|
|
686
|
+
<p>No gatekeeping. cycleWASH publishes its part data openly. cycleCAD runs in any browser — no download, no license key, no barrier to entry.</p>
|
|
687
|
+
</div>
|
|
688
|
+
<div class="dna-card reveal">
|
|
689
|
+
<div class="dna-icon" style="background:rgba(139,111,192,0.12);">🏭</div>
|
|
690
|
+
<h4>Real-World Proven</h4>
|
|
691
|
+
<p>cycleCAD isn't academic software — it's been tested with complex cycleWASH machines. Every feature exists because a real engineering team needed it.</p>
|
|
692
|
+
</div>
|
|
693
|
+
<div class="dna-card reveal">
|
|
694
|
+
<div class="dna-icon" style="background:rgba(232,150,58,0.12);">🧠</div>
|
|
695
|
+
<h4>AI-Native Intelligence</h4>
|
|
696
|
+
<p>Both products leverage AI: cycleWASH uses smart diagnostics for predictive maintenance. cycleCAD integrates AI for part identification, cost estimation, and natural-language modeling.</p>
|
|
697
|
+
</div>
|
|
698
|
+
<div class="dna-card reveal">
|
|
699
|
+
<div class="dna-icon" style="background:rgba(58,175,169,0.12);">👥</div>
|
|
700
|
+
<h4>Community-Driven</h4>
|
|
701
|
+
<p>cycleWASH grew from the bike community. cycleCAD grows from the maker community. Both believe the best products are built with their users, not just for them.</p>
|
|
702
|
+
</div>
|
|
703
|
+
<div class="dna-card reveal">
|
|
704
|
+
<div class="dna-icon" style="background:rgba(224,85,85,0.12);">🇩🇪</div>
|
|
705
|
+
<h4>German Engineering, Global Reach</h4>
|
|
706
|
+
<p>Designed in Germany, deployed everywhere. cycleWASH machines operate across Europe. cycleCAD runs in any browser, any country, 6 languages.</p>
|
|
707
|
+
</div>
|
|
708
|
+
</div>
|
|
709
|
+
</div>
|
|
710
|
+
</section>
|
|
711
|
+
|
|
962
712
|
<!-- ============================================================
|
|
963
713
|
THE PROBLEM
|
|
964
714
|
============================================================ -->
|
|
965
715
|
<section class="problem" id="problem">
|
|
966
716
|
<div class="container">
|
|
967
717
|
<div class="section-label reveal">THE PROBLEM</div>
|
|
968
|
-
<h2 class="reveal">
|
|
969
|
-
CAD software is <span class="gradient-text">stuck in the past</span>
|
|
970
|
-
</h2>
|
|
971
|
-
|
|
718
|
+
<h2 class="reveal">CAD software is <span class="gradient-text">stuck in the past</span></h2>
|
|
972
719
|
<div class="problem-cards">
|
|
973
720
|
<div class="problem-card reveal">
|
|
974
|
-
<h3>
|
|
975
|
-
<p>
|
|
721
|
+
<h3>Requires screen, mouse, keyboard</h3>
|
|
722
|
+
<p>Traditional CAD demands a trained human sitting at a workstation. An AI agent can't use SolidWorks. An unskilled worker can't use Inventor. The interface IS the bottleneck.</p>
|
|
723
|
+
</div>
|
|
724
|
+
<div class="problem-card reveal">
|
|
725
|
+
<h3>$680 — $6,000 per year</h3>
|
|
726
|
+
<p>Professional CAD tools cost thousands per seat per year. Small teams, field workers, and developing nations are priced out of designing their own products.</p>
|
|
976
727
|
</div>
|
|
977
728
|
<div class="problem-card reveal">
|
|
978
|
-
<h3>
|
|
979
|
-
<p>
|
|
729
|
+
<h3>No intelligence built in</h3>
|
|
730
|
+
<p>Traditional CAD is a dumb drawing tool. No AI analysis, no maintenance planning, no autonomous design. Every action requires a trained human operator.</p>
|
|
731
|
+
</div>
|
|
732
|
+
<div class="problem-card reveal">
|
|
733
|
+
<h3>Designed for the throwaway economy</h3>
|
|
734
|
+
<p>No tool helps you design for disassembly, repair, or reuse. No wear prediction, no maintenance scheduling, no circular economy thinking. Design once, throw away, repeat.</p>
|
|
980
735
|
</div>
|
|
981
736
|
</div>
|
|
982
737
|
</div>
|
|
@@ -988,56 +743,245 @@
|
|
|
988
743
|
<section class="solution" id="features">
|
|
989
744
|
<div class="container">
|
|
990
745
|
<div class="section-label reveal">THE SOLUTION</div>
|
|
991
|
-
<h2 class="reveal">
|
|
992
|
-
Built for <span class="gradient-text">the modern designer</span>
|
|
993
|
-
</h2>
|
|
994
|
-
|
|
746
|
+
<h2 class="reveal">Built for <span class="gradient-text">the modern designer</span></h2>
|
|
995
747
|
<div class="feature-cards">
|
|
996
748
|
<div class="feature-card reveal">
|
|
997
|
-
<div class="feature-icon
|
|
998
|
-
<h3>Browser-native</h3>
|
|
749
|
+
<div class="feature-icon gold">⚡</div>
|
|
750
|
+
<h3>Browser-native CAD</h3>
|
|
999
751
|
<p>Full parametric 3D modeler running entirely in your browser. Three.js-powered viewport with real-time rendering. No plugins, no install, no waiting.</p>
|
|
1000
752
|
</div>
|
|
1001
753
|
<div class="feature-card reveal">
|
|
1002
754
|
<div class="feature-icon blue">🤖</div>
|
|
1003
755
|
<h3>AI-powered tools</h3>
|
|
1004
|
-
<p>AI part identification, smart natural language search, automated assembly instructions, and an integrated chatbot that understands your model
|
|
756
|
+
<p>AI part identification, smart natural language search, automated assembly instructions, and an integrated chatbot that understands your model.</p>
|
|
1005
757
|
</div>
|
|
1006
758
|
<div class="feature-card reveal">
|
|
1007
|
-
<div class="feature-icon
|
|
759
|
+
<div class="feature-icon teal">🏭</div>
|
|
1008
760
|
<h3>Native Inventor parsing</h3>
|
|
1009
|
-
<p>Open Autodesk Inventor .ipt and .iam files directly in the browser. Extract features, parameters, and assembly constraints. Generate
|
|
761
|
+
<p>Open Autodesk Inventor .ipt and .iam files directly in the browser. Extract features, parameters, and assembly constraints. Generate rebuild guides automatically.</p>
|
|
1010
762
|
</div>
|
|
1011
763
|
<div class="feature-card reveal">
|
|
1012
764
|
<div class="feature-icon purple">📐</div>
|
|
1013
765
|
<h3>Full parametric modeling</h3>
|
|
1014
|
-
<p>Sketch, extrude, revolve, fillet, chamfer, boolean operations. Constraint-driven design with a live feature tree.
|
|
766
|
+
<p>Sketch, extrude, revolve, fillet, chamfer, boolean operations. Constraint-driven design with a live feature tree. Professional-grade CAD.</p>
|
|
1015
767
|
</div>
|
|
1016
768
|
<div class="feature-card reveal">
|
|
1017
|
-
<div class="feature-icon
|
|
769
|
+
<div class="feature-icon warn">🔧</div>
|
|
1018
770
|
<h3>Maintenance intelligence</h3>
|
|
1019
|
-
<p>Heatmaps, wear timelines, service mode, and smart BOM generation with estimated pricing.
|
|
771
|
+
<p>Heatmaps, wear timelines, service mode, and smart BOM generation with estimated pricing. Design to maintenance planning in one tool.</p>
|
|
1020
772
|
</div>
|
|
1021
773
|
<div class="feature-card reveal">
|
|
1022
|
-
<div class="feature-icon
|
|
1023
|
-
<h3>
|
|
1024
|
-
<p>
|
|
774
|
+
<div class="feature-icon coral">📦</div>
|
|
775
|
+
<h3>Embeddable 3D viewer</h3>
|
|
776
|
+
<p>ExplodeView — our 3D viewer and embeddable widget with 40+ analysis tools. Embed interactive 3D views anywhere with a single script tag.</p>
|
|
777
|
+
</div>
|
|
778
|
+
<div class="feature-card reveal">
|
|
779
|
+
<div class="feature-icon gold">🔌</div>
|
|
780
|
+
<h3>MCP + CLI + API</h3>
|
|
781
|
+
<p>First-class agent interfaces. AI agents connect via MCP server, CLI commands, or REST API. cycleCAD is infrastructure for autonomous design — not just a GUI.</p>
|
|
782
|
+
</div>
|
|
783
|
+
<div class="feature-card reveal">
|
|
784
|
+
<div class="feature-icon teal">♻️</div>
|
|
785
|
+
<h3>Circular economy</h3>
|
|
786
|
+
<p>Built-in maintenance heatmaps, wear timelines, rebuild guides, and service mode. Design for disassembly, repair, and reuse — not obsolescence.</p>
|
|
1025
787
|
</div>
|
|
1026
788
|
</div>
|
|
1027
789
|
</div>
|
|
1028
790
|
</section>
|
|
1029
791
|
|
|
792
|
+
<!-- ============================================================
|
|
793
|
+
EVERYONE IS A DESIGNER
|
|
794
|
+
============================================================ -->
|
|
795
|
+
<section class="personas" id="personas">
|
|
796
|
+
<div class="container">
|
|
797
|
+
<div class="section-label reveal">AGENTS ARE THE INTERFACE</div>
|
|
798
|
+
<h2 class="reveal"><span class="gradient-text">CAD built for agents.</span> Used by everyone.</h2>
|
|
799
|
+
<p class="subtitle reveal">Everyone uses cycleCAD — but nobody opens it. Your AI agent is the interface. Tell it what you need. It designs through cycleCAD.</p>
|
|
800
|
+
|
|
801
|
+
<div class="persona-grid" style="grid-template-columns: repeat(4, 1fr);">
|
|
802
|
+
<div class="persona-card reveal">
|
|
803
|
+
<div class="persona-icon">🤖</div>
|
|
804
|
+
<h4>Any AI Agent</h4>
|
|
805
|
+
<p>GPT, Claude, Gemini, Llama, Mistral — any LLM can design, validate, and manufacture through cycleCAD's API. The agent IS the interface.</p>
|
|
806
|
+
</div>
|
|
807
|
+
<div class="persona-card reveal">
|
|
808
|
+
<div class="persona-icon">🔧</div>
|
|
809
|
+
<h4>Field Technician</h4>
|
|
810
|
+
<p>"I need a replacement bracket for the DUO." Their agent designs it, validates DFM, sends G-code to the printer. No CAD skills needed.</p>
|
|
811
|
+
</div>
|
|
812
|
+
<div class="persona-card reveal">
|
|
813
|
+
<div class="persona-icon">💼</div>
|
|
814
|
+
<h4>Product Manager</h4>
|
|
815
|
+
<p>"Make the frame 10% lighter." Their agent runs topology optimization through cycleCAD, presents three options.</p>
|
|
816
|
+
</div>
|
|
817
|
+
<div class="persona-card reveal">
|
|
818
|
+
<div class="persona-icon">📊</div>
|
|
819
|
+
<h4>Sales Engineer</h4>
|
|
820
|
+
<p>"Configure this for the client's specs." Their agent modifies the parametric model, exports a spec sheet, shares a 3D link.</p>
|
|
821
|
+
</div>
|
|
822
|
+
<div class="persona-card reveal">
|
|
823
|
+
<div class="persona-icon">🏭</div>
|
|
824
|
+
<h4>Factory Floor</h4>
|
|
825
|
+
<p>Machine sensors detect wear. An agent designs the replacement, validates tolerances, generates G-code. No human touched a mouse.</p>
|
|
826
|
+
</div>
|
|
827
|
+
<div class="persona-card reveal">
|
|
828
|
+
<div class="persona-icon">🔬</div>
|
|
829
|
+
<h4>Researcher</h4>
|
|
830
|
+
<p>"Design a centrifuge mount for 12,000 RPM." Their agent runs stress analysis through cycleCAD, iterates until it passes.</p>
|
|
831
|
+
</div>
|
|
832
|
+
<div class="persona-card reveal">
|
|
833
|
+
<div class="persona-icon">♻️</div>
|
|
834
|
+
<h4>Circular Economy</h4>
|
|
835
|
+
<p>End-of-life agent scans a product, identifies reusable parts, redesigns what's worn, routes recycling. The loop closes automatically.</p>
|
|
836
|
+
</div>
|
|
837
|
+
<div class="persona-card reveal">
|
|
838
|
+
<div class="persona-icon">🌐</div>
|
|
839
|
+
<h4>Agent Swarms</h4>
|
|
840
|
+
<p>Hundreds of agents working in parallel — designing, validating, manufacturing, repairing. 24/7. No GUI. No breaks. Just $CYCLE tokens flowing.</p>
|
|
841
|
+
</div>
|
|
842
|
+
</div>
|
|
843
|
+
</div>
|
|
844
|
+
</section>
|
|
845
|
+
|
|
846
|
+
<!-- ============================================================
|
|
847
|
+
THE OS OF THINGS — Pipeline
|
|
848
|
+
============================================================ -->
|
|
849
|
+
<section class="os-pipeline" id="vision">
|
|
850
|
+
<div class="container">
|
|
851
|
+
<div class="section-label reveal">THE VISION</div>
|
|
852
|
+
<h2 class="reveal"><span class="gradient-text">The Agent-First OS for Manufacturing</span></h2>
|
|
853
|
+
<p class="subtitle reveal">Just like a computer OS connects hardware, drivers, and applications — cycleCAD connects CAD, CAM, analysis, scanning, VR, drawings, manufacturing, and end of life into one system. AI agents are the users. The API is the interface. $CYCLE tokens are the currency.</p>
|
|
854
|
+
|
|
855
|
+
<!-- The disconnected islands — BEFORE -->
|
|
856
|
+
<p style="color:var(--accent-warn);font-weight:700;font-size:0.9rem;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:1.5rem;position:relative;z-index:1;" class="reveal">TODAY: DISCONNECTED ISLANDS</p>
|
|
857
|
+
<div class="pipeline-flow reveal" style="opacity:0.5;margin-bottom:3rem;">
|
|
858
|
+
<div class="pipeline-step" style="border-color:rgba(224,85,85,0.3);">
|
|
859
|
+
<div class="step-icon">📐</div>
|
|
860
|
+
<div class="step-label" style="color:var(--accent-coral);">CAD</div>
|
|
861
|
+
</div>
|
|
862
|
+
<div class="pipeline-arrow" style="color:var(--accent-coral);">✕</div>
|
|
863
|
+
<div class="pipeline-step" style="border-color:rgba(224,85,85,0.3);">
|
|
864
|
+
<div class="step-icon">⚙️</div>
|
|
865
|
+
<div class="step-label" style="color:var(--accent-coral);">CAM</div>
|
|
866
|
+
</div>
|
|
867
|
+
<div class="pipeline-arrow" style="color:var(--accent-coral);">✕</div>
|
|
868
|
+
<div class="pipeline-step" style="border-color:rgba(224,85,85,0.3);">
|
|
869
|
+
<div class="step-icon">🔬</div>
|
|
870
|
+
<div class="step-label" style="color:var(--accent-coral);">Analysis</div>
|
|
871
|
+
</div>
|
|
872
|
+
<div class="pipeline-arrow" style="color:var(--accent-coral);">✕</div>
|
|
873
|
+
<div class="pipeline-step" style="border-color:rgba(224,85,85,0.3);">
|
|
874
|
+
<div class="step-icon">📷</div>
|
|
875
|
+
<div class="step-label" style="color:var(--accent-coral);">Scanning</div>
|
|
876
|
+
</div>
|
|
877
|
+
<div class="pipeline-arrow" style="color:var(--accent-coral);">✕</div>
|
|
878
|
+
<div class="pipeline-step" style="border-color:rgba(224,85,85,0.3);">
|
|
879
|
+
<div class="step-icon">🥽</div>
|
|
880
|
+
<div class="step-label" style="color:var(--accent-coral);">VR</div>
|
|
881
|
+
</div>
|
|
882
|
+
<div class="pipeline-arrow" style="color:var(--accent-coral);">✕</div>
|
|
883
|
+
<div class="pipeline-step" style="border-color:rgba(224,85,85,0.3);">
|
|
884
|
+
<div class="step-icon">📄</div>
|
|
885
|
+
<div class="step-label" style="color:var(--accent-coral);">Drawings</div>
|
|
886
|
+
</div>
|
|
887
|
+
</div>
|
|
888
|
+
|
|
889
|
+
<!-- The unified OS — AFTER -->
|
|
890
|
+
<p style="color:var(--accent-gold);font-weight:700;font-size:0.9rem;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:1.5rem;position:relative;z-index:1;" class="reveal">cycleCAD: ONE OS, ONE LANGUAGE</p>
|
|
891
|
+
<div class="pipeline-flow reveal">
|
|
892
|
+
<div class="pipeline-step" style="border-color:rgba(139,111,192,0.3);">
|
|
893
|
+
<div class="step-icon">💬</div>
|
|
894
|
+
<div class="step-label" style="color:var(--accent-purple);">Intent</div>
|
|
895
|
+
<div class="step-desc">Human or<br>AI agent</div>
|
|
896
|
+
</div>
|
|
897
|
+
<div class="pipeline-arrow">→</div>
|
|
898
|
+
<div class="pipeline-step" style="border-color:rgba(46,134,222,0.3);">
|
|
899
|
+
<div class="step-icon">📐</div>
|
|
900
|
+
<div class="step-label" style="color:var(--accent-blue);">Design</div>
|
|
901
|
+
<div class="step-desc">CAD + CAM<br>unified</div>
|
|
902
|
+
</div>
|
|
903
|
+
<div class="pipeline-arrow">→</div>
|
|
904
|
+
<div class="pipeline-step" style="border-color:rgba(232,150,58,0.3);">
|
|
905
|
+
<div class="step-icon">🔬</div>
|
|
906
|
+
<div class="step-label" style="color:var(--accent-warn);">Validate</div>
|
|
907
|
+
<div class="step-desc">Analysis, DFM<br>cost, tolerance</div>
|
|
908
|
+
</div>
|
|
909
|
+
<div class="pipeline-arrow">→</div>
|
|
910
|
+
<div class="pipeline-step" style="border-color:rgba(58,175,169,0.3);">
|
|
911
|
+
<div class="step-icon">🏭</div>
|
|
912
|
+
<div class="step-label" style="color:var(--accent-teal);">Manufacture</div>
|
|
913
|
+
<div class="step-desc">G-code, STEP<br>to factory</div>
|
|
914
|
+
</div>
|
|
915
|
+
<div class="pipeline-arrow">→</div>
|
|
916
|
+
<div class="pipeline-step" style="border-color:rgba(212,168,67,0.3);">
|
|
917
|
+
<div class="step-icon">📦</div>
|
|
918
|
+
<div class="step-label" style="color:var(--accent-gold);">Product</div>
|
|
919
|
+
<div class="step-desc">Assembled &<br>delivered</div>
|
|
920
|
+
</div>
|
|
921
|
+
<div class="pipeline-arrow">→</div>
|
|
922
|
+
<div class="pipeline-step" style="border-color:rgba(46,134,222,0.3);">
|
|
923
|
+
<div class="step-icon">♻️</div>
|
|
924
|
+
<div class="step-label" style="color:var(--accent-blue);">End of Life</div>
|
|
925
|
+
<div class="step-desc">Repair, recycle<br>redesign</div>
|
|
926
|
+
</div>
|
|
927
|
+
</div>
|
|
928
|
+
|
|
929
|
+
<p class="vision-text reveal" style="margin-top:2rem;">AI is the glue. Parametric modeling was the first right step — but to truly automate manufacturing, every component needs to speak the same language. cycleCAD provides that language. <strong>From intent to product to end of life — one continuous, AI-driven cycle.</strong></p>
|
|
930
|
+
</div>
|
|
931
|
+
</section>
|
|
932
|
+
|
|
933
|
+
<!-- ============================================================
|
|
934
|
+
MACHINES CREATING MACHINES
|
|
935
|
+
============================================================ -->
|
|
936
|
+
<section class="machines-section">
|
|
937
|
+
<div class="container">
|
|
938
|
+
<div class="section-label reveal">THE ONLY INTERFACE</div>
|
|
939
|
+
<h2 class="reveal"><span class="gradient-text">Machines Creating Machines</span></h2>
|
|
940
|
+
<p class="reveal" style="max-width:750px;margin:0 auto;font-size:1.1rem;color:var(--text-secondary);line-height:1.7;">
|
|
941
|
+
Traditional CAD has a GUI because it was designed for humans with a mouse. cycleCAD has no GUI because it was designed for AI agents with an API. A sensor detects wear. An agent designs the replacement. Another agent validates manufacturability. A third generates G-code and routes it to the factory floor. The machine improved itself. No human touched anything.
|
|
942
|
+
</p>
|
|
943
|
+
|
|
944
|
+
<div class="machines-flow reveal">
|
|
945
|
+
<div class="machine-step" style="border-color:rgba(139,111,192,0.3);">
|
|
946
|
+
<div class="m-label" style="color:var(--accent-purple);">AI Agent</div>
|
|
947
|
+
<div class="m-desc">detects need</div>
|
|
948
|
+
</div>
|
|
949
|
+
<span class="pipeline-arrow">→</span>
|
|
950
|
+
<div class="machine-step" style="border-color:rgba(212,168,67,0.3);">
|
|
951
|
+
<div class="m-label" style="color:var(--accent-gold);">cycleCAD</div>
|
|
952
|
+
<div class="m-desc">designs & validates</div>
|
|
953
|
+
</div>
|
|
954
|
+
<span class="pipeline-arrow">→</span>
|
|
955
|
+
<div class="machine-step" style="border-color:rgba(232,150,58,0.3);">
|
|
956
|
+
<div class="m-label" style="color:var(--accent-warn);">Factory</div>
|
|
957
|
+
<div class="m-desc">produces the parts</div>
|
|
958
|
+
</div>
|
|
959
|
+
<span class="pipeline-arrow">→</span>
|
|
960
|
+
<div class="machine-step" style="border-color:rgba(58,175,169,0.3);">
|
|
961
|
+
<div class="m-label" style="color:var(--accent-teal);">Product</div>
|
|
962
|
+
<div class="m-desc">assembled & delivered</div>
|
|
963
|
+
</div>
|
|
964
|
+
<span class="pipeline-arrow">→</span>
|
|
965
|
+
<div class="machine-step" style="border-color:rgba(46,134,222,0.3);">
|
|
966
|
+
<div class="m-label" style="color:var(--accent-blue);">♻️ Recycle</div>
|
|
967
|
+
<div class="m-desc">circular economy</div>
|
|
968
|
+
</div>
|
|
969
|
+
</div>
|
|
970
|
+
|
|
971
|
+
<p class="reveal" style="max-width:750px;margin:0 auto;font-size:1.05rem;color:var(--accent-gold);font-weight:600;position:relative;z-index:1;">
|
|
972
|
+
Every step consumes $CYCLE tokens. Every repaired part mints new ones. AI agents design. Factories produce. Products get repaired, not discarded. The token economy mirrors the circular economy — value flows in circles, forever.
|
|
973
|
+
</p>
|
|
974
|
+
</div>
|
|
975
|
+
</section>
|
|
976
|
+
|
|
1030
977
|
<!-- ============================================================
|
|
1031
978
|
CAPABILITIES GRID
|
|
1032
979
|
============================================================ -->
|
|
1033
980
|
<section class="capabilities" id="capabilities">
|
|
1034
981
|
<div class="container">
|
|
1035
|
-
<div class="section-label reveal">40+
|
|
1036
|
-
<h2 class="reveal">
|
|
1037
|
-
|
|
1038
|
-
</h2>
|
|
1039
|
-
<p class="reveal">Every feature is keyboard-accessible. Press <strong style="color:var(--accent-orange);">?</strong> to see all shortcuts.</p>
|
|
1040
|
-
|
|
982
|
+
<div class="section-label reveal">40+ API ENDPOINTS</div>
|
|
983
|
+
<h2 class="reveal">Everything an agent needs, <span class="gradient-text">nothing it doesn't</span></h2>
|
|
984
|
+
<p class="reveal">Every capability is agent-callable. Sketch, model, validate, export — all through one unified API.</p>
|
|
1041
985
|
<div class="cap-grid">
|
|
1042
986
|
<div class="cap-item reveal"><div class="cap-icon">✏️</div><h4>Sketch & Constrain</h4><p>Lines, arcs, rectangles, circles</p></div>
|
|
1043
987
|
<div class="cap-item reveal"><div class="cap-icon">📦</div><h4>Extrude & Revolve</h4><p>Solid body creation</p></div>
|
|
@@ -1060,15 +1004,67 @@
|
|
|
1060
1004
|
</section>
|
|
1061
1005
|
|
|
1062
1006
|
<!-- ============================================================
|
|
1063
|
-
|
|
1007
|
+
TOKEN ECONOMY
|
|
1008
|
+
============================================================ -->
|
|
1009
|
+
<section class="pricing" id="token-economy">
|
|
1010
|
+
<div class="container">
|
|
1011
|
+
<div class="section-label reveal">TOKEN ECONOMY</div>
|
|
1012
|
+
<h2 class="reveal">Consume tokens. <span class="gradient-text">Create value.</span></h2>
|
|
1013
|
+
<p class="subtitle reveal">Dollars are legacy. cycleCAD runs on $CYCLE tokens — AI agents consume tokens to design, humans and machines earn them by creating value in the circular economy.</p>
|
|
1014
|
+
|
|
1015
|
+
<div class="pricing-grid">
|
|
1016
|
+
<div class="pricing-card starter reveal" style="text-align:left;">
|
|
1017
|
+
<div class="tier-name" style="color:var(--accent-teal);">Consume</div>
|
|
1018
|
+
<div style="font-size:2.8rem;margin:0.5rem 0;">🪙</div>
|
|
1019
|
+
<div class="tier-period" style="color:var(--accent-teal);font-weight:600;font-size:0.95rem;">Spend $CYCLE tokens</div>
|
|
1020
|
+
<ul class="tier-features" style="margin-top:1rem;">
|
|
1021
|
+
<li>AI agents pay tokens per design operation</li>
|
|
1022
|
+
<li>Parametric modeling, AI analysis, validation</li>
|
|
1023
|
+
<li>STEP export, G-code generation</li>
|
|
1024
|
+
<li>Manufacturing routing & DFM checks</li>
|
|
1025
|
+
<li>Usage-based — pay only for what you use</li>
|
|
1026
|
+
</ul>
|
|
1027
|
+
</div>
|
|
1028
|
+
<div class="pricing-card pro reveal" style="text-align:left;border-color:rgba(212,168,67,0.3);">
|
|
1029
|
+
<div class="tier-name" style="color:var(--accent-gold);">Create</div>
|
|
1030
|
+
<div style="font-size:2.8rem;margin:0.5rem 0;">⛏️</div>
|
|
1031
|
+
<div class="tier-period" style="color:var(--accent-gold);font-weight:600;font-size:0.95rem;">Earn $CYCLE coins</div>
|
|
1032
|
+
<ul class="tier-features" style="margin-top:1rem;">
|
|
1033
|
+
<li>Design reusable parts → earn tokens</li>
|
|
1034
|
+
<li>Validate designs for others → earn tokens</li>
|
|
1035
|
+
<li>Contribute to the circular economy → earn tokens</li>
|
|
1036
|
+
<li>Repair/refurbish data → earn tokens</li>
|
|
1037
|
+
<li>Value creation = value capture</li>
|
|
1038
|
+
</ul>
|
|
1039
|
+
</div>
|
|
1040
|
+
<div class="pricing-card enterprise reveal" style="text-align:left;">
|
|
1041
|
+
<div class="tier-name" style="color:var(--accent-purple);">The Cycle</div>
|
|
1042
|
+
<div style="font-size:2.8rem;margin:0.5rem 0;">♻️</div>
|
|
1043
|
+
<div class="tier-period" style="color:var(--accent-purple);font-weight:600;font-size:0.95rem;">Circular token flow</div>
|
|
1044
|
+
<ul class="tier-features" style="margin-top:1rem;">
|
|
1045
|
+
<li>AI agents design → tokens consumed</li>
|
|
1046
|
+
<li>Manufactured products → tokens minted</li>
|
|
1047
|
+
<li>Parts repaired/reused → tokens earned</li>
|
|
1048
|
+
<li>Economy grows with every cycle</li>
|
|
1049
|
+
<li>The more circular, the more valuable</li>
|
|
1050
|
+
</ul>
|
|
1051
|
+
</div>
|
|
1052
|
+
</div>
|
|
1053
|
+
|
|
1054
|
+
<div style="margin-top:3rem;text-align:center;" class="reveal">
|
|
1055
|
+
<p style="color:var(--accent-gold);font-weight:700;font-size:1.2rem;">$CYCLE — the currency of the circular economy</p>
|
|
1056
|
+
<p style="color:var(--text-secondary);font-size:0.95rem;margin-top:0.5rem;max-width:600px;margin-left:auto;margin-right:auto;">Every design, every validation, every manufactured part, every repair — tokenized. AI agents and humans transact on the same network. No invoices. No subscriptions. Just value flowing in circles.</p>
|
|
1057
|
+
</div>
|
|
1058
|
+
</div>
|
|
1059
|
+
</section>
|
|
1060
|
+
|
|
1061
|
+
<!-- ============================================================
|
|
1062
|
+
SHOWCASE — cycleWASH DUO
|
|
1064
1063
|
============================================================ -->
|
|
1065
1064
|
<section class="showcase" id="showcase">
|
|
1066
1065
|
<div class="container">
|
|
1067
1066
|
<div class="section-label reveal">BUILT FOR REAL PRODUCTS</div>
|
|
1068
|
-
<h2 class="reveal">
|
|
1069
|
-
Designed for the <span class="gradient-text">cycleWASH DUO</span>
|
|
1070
|
-
</h2>
|
|
1071
|
-
|
|
1067
|
+
<h2 class="reveal">Tested with <span class="gradient-text">complex cycleWASH machines</span></h2>
|
|
1072
1068
|
<div class="showcase-visual reveal">
|
|
1073
1069
|
<div class="app-mockup">
|
|
1074
1070
|
<div class="mockup-toolbar">
|
|
@@ -1081,16 +1077,16 @@
|
|
|
1081
1077
|
<div class="mockup-toolbar-item" style="width:32px"></div>
|
|
1082
1078
|
<div class="mockup-toolbar-item" style="width:24px"></div>
|
|
1083
1079
|
<div style="margin-left:auto;display:flex;gap:6px;">
|
|
1084
|
-
<div class="mockup-toolbar-item" style="width:50px;background:rgba(
|
|
1085
|
-
<div class="mockup-toolbar-item" style="width:50px;background:rgba(
|
|
1080
|
+
<div class="mockup-toolbar-item" style="width:50px;background:rgba(212,168,67,0.3);"></div>
|
|
1081
|
+
<div class="mockup-toolbar-item" style="width:50px;background:rgba(46,134,222,0.2);"></div>
|
|
1086
1082
|
</div>
|
|
1087
1083
|
</div>
|
|
1088
1084
|
</div>
|
|
1089
1085
|
<div class="mockup-body">
|
|
1090
1086
|
<div class="mockup-sidebar">
|
|
1091
|
-
<div style="height:4px;width:70px;background:#
|
|
1092
|
-
<div style="font-size:8px;color:var(--text-muted);margin-bottom:4px;font-family:monospace;">
|
|
1093
|
-
<div class="mockup-tree-item" style="width:90%;background:rgba(
|
|
1087
|
+
<div style="height:4px;width:70px;background:#D4A843;opacity:0.5;border-radius:2px;margin-bottom:12px;"></div>
|
|
1088
|
+
<div style="font-size:8px;color:var(--text-muted);margin-bottom:4px;font-family:monospace;">Assembly Tree</div>
|
|
1089
|
+
<div class="mockup-tree-item" style="width:90%;background:rgba(212,168,67,0.2);"></div>
|
|
1094
1090
|
<div class="mockup-tree-item indent" style="width:65%"></div>
|
|
1095
1091
|
<div class="mockup-tree-item indent" style="width:70%"></div>
|
|
1096
1092
|
<div class="mockup-tree-item indent active" style="width:55%"></div>
|
|
@@ -1102,34 +1098,25 @@
|
|
|
1102
1098
|
<div class="mockup-tree-item indent" style="width:70%"></div>
|
|
1103
1099
|
<div class="mockup-tree-item" style="width:75%"></div>
|
|
1104
1100
|
<div class="mockup-tree-item indent" style="width:55%"></div>
|
|
1105
|
-
<div
|
|
1106
|
-
<div class="mockup-tree-item" style="width:70%"></div>
|
|
1107
|
-
<div class="mockup-tree-item indent" style="width:60%"></div>
|
|
1108
|
-
<div style="font-size:7px;color:var(--text-muted);margin-top:12px;font-family:monospace;">473 parts loaded</div>
|
|
1101
|
+
<div style="font-size:7px;color:var(--text-muted);margin-top:12px;font-family:monospace;">Parts loaded</div>
|
|
1109
1102
|
</div>
|
|
1110
|
-
<div class="mockup-viewport"
|
|
1103
|
+
<div class="mockup-viewport">
|
|
1111
1104
|
<div class="mockup-grid"></div>
|
|
1112
1105
|
<div style="position:relative;z-index:1;text-align:center;">
|
|
1113
1106
|
<div style="font-size:48px;opacity:0.7;">🚲</div>
|
|
1114
|
-
<div style="color:var(--text-muted);font-size:11px;margin-top:8px;">cycleWASH
|
|
1107
|
+
<div style="color:var(--text-muted);font-size:11px;margin-top:8px;">cycleWASH Machine — Hundreds of Parts, Multiple Assemblies</div>
|
|
1115
1108
|
</div>
|
|
1116
1109
|
</div>
|
|
1117
1110
|
<div class="mockup-props">
|
|
1118
|
-
<div style="font-size:8px;color:#
|
|
1111
|
+
<div style="font-size:8px;color:#2E86DE;font-family:monospace;margin-bottom:8px;">AI Identified</div>
|
|
1119
1112
|
<div class="mockup-prop-label"></div>
|
|
1120
|
-
<div class="mockup-prop-value" style="background:rgba(
|
|
1113
|
+
<div class="mockup-prop-value" style="background:rgba(58,175,169,0.2);"></div>
|
|
1121
1114
|
<div class="mockup-prop-label" style="width:50px"></div>
|
|
1122
|
-
<div class="mockup-prop-value" style="width:65px;background:rgba(
|
|
1123
|
-
<div style="height:1px;background:var(--border-card);margin:12px 0;"></div>
|
|
1124
|
-
<div style="font-size:8px;color:#4d9fff;font-family:monospace;margin-bottom:8px;">McMaster-Carr</div>
|
|
1125
|
-
<div class="mockup-prop-value" style="background:rgba(77,159,255,0.15);width:80px;"></div>
|
|
1126
|
-
<div class="mockup-prop-value" style="background:rgba(77,159,255,0.15);width:65px;"></div>
|
|
1115
|
+
<div class="mockup-prop-value" style="width:65px;background:rgba(212,168,67,0.2);"></div>
|
|
1127
1116
|
<div style="height:1px;background:var(--border-card);margin:12px 0;"></div>
|
|
1128
|
-
<div style="font-size:8px;color:#
|
|
1129
|
-
<div class="mockup-prop-
|
|
1130
|
-
<div class="mockup-prop-value" style="width:
|
|
1131
|
-
<div class="mockup-prop-label" style="width:30px"></div>
|
|
1132
|
-
<div class="mockup-prop-value" style="width:45px"></div>
|
|
1117
|
+
<div style="font-size:8px;color:#2E86DE;font-family:monospace;margin-bottom:8px;">McMaster-Carr</div>
|
|
1118
|
+
<div class="mockup-prop-value" style="background:rgba(46,134,222,0.15);width:80px;"></div>
|
|
1119
|
+
<div class="mockup-prop-value" style="background:rgba(46,134,222,0.15);width:65px;"></div>
|
|
1133
1120
|
</div>
|
|
1134
1121
|
</div>
|
|
1135
1122
|
</div>
|
|
@@ -1142,21 +1129,16 @@
|
|
|
1142
1129
|
============================================================ -->
|
|
1143
1130
|
<section class="final-cta" id="try">
|
|
1144
1131
|
<div class="container">
|
|
1145
|
-
<h2 class="reveal">
|
|
1146
|
-
|
|
1147
|
-
<span class="gradient-text">without limits?</span>
|
|
1148
|
-
</h2>
|
|
1149
|
-
<p class="reveal">Open cycleCAD in your browser. Free, instant, no account required.</p>
|
|
1132
|
+
<h2 class="reveal">Let your agents<br><span class="gradient-text">design through us.</span></h2>
|
|
1133
|
+
<p class="reveal">The Agent-First OS for Manufacturing. Agents are the interface. $CYCLE tokens are the currency. The circular economy is the outcome.</p>
|
|
1150
1134
|
<div class="hero-ctas reveal">
|
|
1151
|
-
<a href="/app/" class="btn-primary">
|
|
1135
|
+
<a href="/app/" class="btn-primary">Explore the Platform</a>
|
|
1152
1136
|
<a href="https://github.com/vvlars-cmd/cyclecad" target="_blank" class="btn-secondary">View on GitHub</a>
|
|
1153
1137
|
</div>
|
|
1154
1138
|
</div>
|
|
1155
1139
|
</section>
|
|
1156
1140
|
|
|
1157
|
-
<!--
|
|
1158
|
-
FOOTER
|
|
1159
|
-
============================================================ -->
|
|
1141
|
+
<!-- FOOTER -->
|
|
1160
1142
|
<footer>
|
|
1161
1143
|
<div class="container">
|
|
1162
1144
|
<a href="#" class="nav-logo">
|
|
@@ -1166,17 +1148,15 @@
|
|
|
1166
1148
|
<ul class="footer-links">
|
|
1167
1149
|
<li><a href="https://cyclewash.de/en" target="_blank">cycleWASH</a></li>
|
|
1168
1150
|
<li><a href="https://github.com/vvlars-cmd/cyclecad" target="_blank">GitHub</a></li>
|
|
1169
|
-
<li><a href="mailto:
|
|
1151
|
+
<li><a href="mailto:sachin.kumar@cyclewash.com">Contact</a></li>
|
|
1170
1152
|
</ul>
|
|
1171
|
-
<p>© 2026 cycleCAD. All rights reserved.</p>
|
|
1153
|
+
<p>© 2026 cycleCAD by cycleWASH. All rights reserved.</p>
|
|
1172
1154
|
</div>
|
|
1173
1155
|
</footer>
|
|
1174
1156
|
|
|
1175
|
-
<!--
|
|
1176
|
-
SCROLL REVEAL SCRIPT
|
|
1177
|
-
============================================================ -->
|
|
1157
|
+
<!-- SCRIPTS -->
|
|
1178
1158
|
<script>
|
|
1179
|
-
//
|
|
1159
|
+
// Scroll reveal
|
|
1180
1160
|
const observer = new IntersectionObserver((entries) => {
|
|
1181
1161
|
entries.forEach(entry => {
|
|
1182
1162
|
if (entry.isIntersecting) {
|
|
@@ -1184,23 +1164,14 @@
|
|
|
1184
1164
|
observer.unobserve(entry.target);
|
|
1185
1165
|
}
|
|
1186
1166
|
});
|
|
1187
|
-
}, {
|
|
1188
|
-
threshold: 0.1,
|
|
1189
|
-
rootMargin: '0px 0px -50px 0px'
|
|
1190
|
-
});
|
|
1191
|
-
|
|
1167
|
+
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
|
1192
1168
|
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
|
1193
1169
|
|
|
1194
|
-
// Theme toggle
|
|
1170
|
+
// Theme toggle
|
|
1195
1171
|
const themeToggle = document.getElementById('theme-toggle');
|
|
1196
1172
|
const html = document.documentElement;
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
const savedTheme = (() => {
|
|
1200
|
-
try { return localStorage.getItem('cyclecad-theme'); } catch { return null; }
|
|
1201
|
-
})();
|
|
1202
|
-
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
1203
|
-
const initialTheme = savedTheme || (systemDark ? 'dark' : 'dark'); // Default dark
|
|
1173
|
+
const savedTheme = (() => { try { return localStorage.getItem('cyclecad-theme'); } catch { return null; } })();
|
|
1174
|
+
const initialTheme = savedTheme || 'dark';
|
|
1204
1175
|
html.setAttribute('data-theme', initialTheme);
|
|
1205
1176
|
themeToggle.textContent = initialTheme === 'dark' ? '☀️' : '🌙';
|
|
1206
1177
|
|
|
@@ -1212,7 +1183,6 @@
|
|
|
1212
1183
|
try { localStorage.setItem('cyclecad-theme', next); } catch {}
|
|
1213
1184
|
});
|
|
1214
1185
|
|
|
1215
|
-
// Listen for system preference changes
|
|
1216
1186
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
1217
1187
|
if (!localStorage.getItem('cyclecad-theme')) {
|
|
1218
1188
|
const theme = e.matches ? 'dark' : 'light';
|
|
@@ -1223,4 +1193,4 @@
|
|
|
1223
1193
|
</script>
|
|
1224
1194
|
|
|
1225
1195
|
</body>
|
|
1226
|
-
</html>
|
|
1196
|
+
</html>
|