helixevo 0.2.18 → 0.2.19
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/dashboard/app/globals.css +215 -162
- package/dashboard/app/layout.tsx +6 -6
- package/package.json +1 -1
|
@@ -1,27 +1,36 @@
|
|
|
1
|
+
/* ════════════════════════════════════════════════════════════════
|
|
2
|
+
HelixEvo Dashboard — Design System v2
|
|
3
|
+
Professional, refined, modern.
|
|
4
|
+
════════════════════════════════════════════════════════════════ */
|
|
5
|
+
|
|
1
6
|
:root {
|
|
2
|
-
|
|
7
|
+
/* ─── Backgrounds ─── */
|
|
8
|
+
--bg: #f5f6fa;
|
|
3
9
|
--bg-card: #ffffff;
|
|
4
|
-
--bg-section: #
|
|
5
|
-
--bg-hover: #
|
|
6
|
-
--bg-input: #
|
|
7
|
-
--bg-sidebar: #
|
|
10
|
+
--bg-section: #eef1f6;
|
|
11
|
+
--bg-hover: #e8ecf3;
|
|
12
|
+
--bg-input: #f5f6fa;
|
|
13
|
+
--bg-sidebar: #0f1117;
|
|
8
14
|
|
|
9
|
-
|
|
10
|
-
--border
|
|
11
|
-
--border-
|
|
12
|
-
--
|
|
13
|
-
--shadow-
|
|
14
|
-
--shadow-
|
|
15
|
-
--shadow-
|
|
15
|
+
/* ─── Borders & Elevation ─── */
|
|
16
|
+
--border: #e2e5ef;
|
|
17
|
+
--border-focus: #c0c5d6;
|
|
18
|
+
--border-subtle: #eceef5;
|
|
19
|
+
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
|
|
20
|
+
--shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.04);
|
|
21
|
+
--shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
|
|
22
|
+
--shadow-xl: 0 16px 48px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.05);
|
|
16
23
|
|
|
17
|
-
|
|
18
|
-
--text
|
|
19
|
-
--text-
|
|
20
|
-
--text-
|
|
24
|
+
/* ─── Typography ─── */
|
|
25
|
+
--text: #111827;
|
|
26
|
+
--text-secondary: #374151;
|
|
27
|
+
--text-dim: #6b7280;
|
|
28
|
+
--text-muted: #9ca3af;
|
|
21
29
|
|
|
22
|
-
|
|
30
|
+
/* ─── Accent Colors ─── */
|
|
31
|
+
--purple: #6d28d9;
|
|
23
32
|
--purple-light: #f3eefe;
|
|
24
|
-
--purple-border: #
|
|
33
|
+
--purple-border: #c4b5fd;
|
|
25
34
|
--green: #059669;
|
|
26
35
|
--green-light: #ecfdf5;
|
|
27
36
|
--green-border: #a7f3d0;
|
|
@@ -35,14 +44,15 @@
|
|
|
35
44
|
--blue-light: #eff6ff;
|
|
36
45
|
--blue-border: #bfdbfe;
|
|
37
46
|
|
|
47
|
+
/* ─── Radius & Typography ─── */
|
|
38
48
|
--radius: 8px;
|
|
39
49
|
--radius-lg: 12px;
|
|
40
50
|
--radius-xl: 16px;
|
|
41
|
-
|
|
42
|
-
--font:
|
|
43
|
-
--font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
|
|
51
|
+
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
|
|
52
|
+
--font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
|
|
44
53
|
}
|
|
45
54
|
|
|
55
|
+
/* ─── Reset & Base ─── */
|
|
46
56
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
47
57
|
|
|
48
58
|
body {
|
|
@@ -50,28 +60,32 @@ body {
|
|
|
50
60
|
color: var(--text);
|
|
51
61
|
font-family: var(--font);
|
|
52
62
|
-webkit-font-smoothing: antialiased;
|
|
63
|
+
-moz-osx-font-smoothing: grayscale;
|
|
53
64
|
font-size: 14px;
|
|
54
65
|
line-height: 1.6;
|
|
66
|
+
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
55
67
|
}
|
|
56
68
|
|
|
57
69
|
::selection { background: var(--purple-light); color: var(--purple); }
|
|
58
|
-
a { color: var(--purple); text-decoration: none; }
|
|
59
|
-
a:hover { text-decoration:
|
|
70
|
+
a { color: var(--purple); text-decoration: none; transition: color 0.15s; }
|
|
71
|
+
a:hover { color: #5b21b6; text-decoration: none; }
|
|
60
72
|
|
|
61
73
|
code {
|
|
62
74
|
font-family: var(--font-mono);
|
|
63
75
|
font-size: 12px;
|
|
64
|
-
padding: 2px
|
|
76
|
+
padding: 2px 7px;
|
|
65
77
|
background: var(--bg-section);
|
|
66
|
-
border-radius:
|
|
78
|
+
border-radius: 5px;
|
|
67
79
|
color: var(--text-secondary);
|
|
80
|
+
font-feature-settings: normal;
|
|
68
81
|
}
|
|
69
82
|
|
|
70
|
-
/*
|
|
83
|
+
/* ════════════════════════════════════════════════════════════════
|
|
84
|
+
SIDEBAR — Dark, minimal, modern
|
|
85
|
+
════════════════════════════════════════════════════════════════ */
|
|
71
86
|
.sidebar {
|
|
72
|
-
width:
|
|
87
|
+
width: 240px;
|
|
73
88
|
background: var(--bg-sidebar);
|
|
74
|
-
border-right: 1px solid var(--border);
|
|
75
89
|
padding: 0;
|
|
76
90
|
flex-shrink: 0;
|
|
77
91
|
position: sticky;
|
|
@@ -80,93 +94,105 @@ code {
|
|
|
80
94
|
display: flex;
|
|
81
95
|
flex-direction: column;
|
|
82
96
|
z-index: 20;
|
|
97
|
+
border-right: 1px solid rgba(255,255,255,0.06);
|
|
83
98
|
}
|
|
84
99
|
|
|
85
100
|
.sidebar-logo {
|
|
86
101
|
display: flex;
|
|
87
102
|
align-items: center;
|
|
88
|
-
gap:
|
|
89
|
-
padding: 20px
|
|
90
|
-
border-bottom: 1px solid
|
|
103
|
+
gap: 12px;
|
|
104
|
+
padding: 24px 20px 20px;
|
|
105
|
+
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
91
106
|
}
|
|
92
107
|
|
|
93
108
|
.logo-icon {
|
|
94
|
-
width:
|
|
95
|
-
height:
|
|
109
|
+
width: 34px;
|
|
110
|
+
height: 34px;
|
|
96
111
|
border-radius: 10px;
|
|
97
|
-
background: linear-gradient(135deg, #7c3aed, #
|
|
112
|
+
background: linear-gradient(135deg, #7c3aed, #3b82f6);
|
|
98
113
|
display: flex;
|
|
99
114
|
align-items: center;
|
|
100
115
|
justify-content: center;
|
|
101
116
|
color: #fff;
|
|
102
117
|
flex-shrink: 0;
|
|
118
|
+
box-shadow: 0 2px 12px rgba(124,58,237,0.3);
|
|
103
119
|
}
|
|
104
120
|
|
|
105
121
|
.nav-item {
|
|
106
122
|
display: flex;
|
|
107
123
|
align-items: center;
|
|
108
124
|
gap: 10px;
|
|
109
|
-
padding: 9px
|
|
125
|
+
padding: 9px 14px;
|
|
110
126
|
border-radius: 8px;
|
|
111
|
-
color:
|
|
127
|
+
color: rgba(255,255,255,0.45);
|
|
112
128
|
font-size: 13px;
|
|
113
129
|
font-weight: 500;
|
|
114
|
-
margin
|
|
130
|
+
margin: 1px 8px;
|
|
115
131
|
text-decoration: none;
|
|
116
132
|
transition: all 0.15s ease;
|
|
133
|
+
position: relative;
|
|
117
134
|
}
|
|
118
135
|
.nav-item:hover {
|
|
119
|
-
background:
|
|
120
|
-
color:
|
|
136
|
+
background: rgba(255,255,255,0.06);
|
|
137
|
+
color: rgba(255,255,255,0.85);
|
|
121
138
|
text-decoration: none;
|
|
122
139
|
}
|
|
140
|
+
.nav-item svg {
|
|
141
|
+
stroke: currentColor;
|
|
142
|
+
}
|
|
123
143
|
|
|
124
144
|
.sidebar-footer {
|
|
125
|
-
padding:
|
|
126
|
-
border-top: 1px solid
|
|
145
|
+
padding: 16px 20px;
|
|
146
|
+
border-top: 1px solid rgba(255,255,255,0.06);
|
|
127
147
|
font-size: 11px;
|
|
128
|
-
color:
|
|
148
|
+
color: rgba(255,255,255,0.35);
|
|
129
149
|
display: flex;
|
|
130
150
|
justify-content: space-between;
|
|
131
151
|
align-items: center;
|
|
132
152
|
}
|
|
133
153
|
|
|
154
|
+
/* ─── Main Content ─── */
|
|
134
155
|
.main-content {
|
|
135
156
|
flex: 1;
|
|
136
|
-
padding:
|
|
137
|
-
max-width:
|
|
157
|
+
padding: 36px 48px;
|
|
158
|
+
max-width: 1320px;
|
|
138
159
|
min-height: 100vh;
|
|
139
160
|
}
|
|
140
161
|
|
|
141
|
-
/*
|
|
142
|
-
|
|
162
|
+
/* ════════════════════════════════════════════════════════════════
|
|
163
|
+
PAGE HEADERS
|
|
164
|
+
════════════════════════════════════════════════════════════════ */
|
|
165
|
+
.page-header { margin-bottom: 32px; }
|
|
143
166
|
.page-title {
|
|
144
|
-
font-size:
|
|
145
|
-
font-weight:
|
|
146
|
-
letter-spacing: -0.
|
|
167
|
+
font-size: 26px;
|
|
168
|
+
font-weight: 800;
|
|
169
|
+
letter-spacing: -0.6px;
|
|
147
170
|
color: var(--text);
|
|
148
|
-
line-height: 1.
|
|
171
|
+
line-height: 1.15;
|
|
149
172
|
}
|
|
150
173
|
.page-desc {
|
|
151
|
-
font-size:
|
|
174
|
+
font-size: 14px;
|
|
152
175
|
color: var(--text-dim);
|
|
153
176
|
margin-top: 6px;
|
|
154
177
|
line-height: 1.5;
|
|
178
|
+
font-weight: 400;
|
|
155
179
|
}
|
|
156
180
|
|
|
157
|
-
/*
|
|
181
|
+
/* ════════════════════════════════════════════════════════════════
|
|
182
|
+
CARDS — Clean, elevated, modern
|
|
183
|
+
════════════════════════════════════════════════════════════════ */
|
|
158
184
|
.card {
|
|
159
185
|
background: var(--bg-card);
|
|
160
186
|
border: 1px solid var(--border);
|
|
161
187
|
border-radius: var(--radius-lg);
|
|
162
188
|
box-shadow: var(--shadow-sm);
|
|
163
|
-
transition: box-shadow 0.
|
|
189
|
+
transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
|
|
164
190
|
}
|
|
165
191
|
.card:hover {
|
|
166
192
|
box-shadow: var(--shadow-md);
|
|
167
193
|
border-color: var(--border-focus);
|
|
168
194
|
}
|
|
169
|
-
.card-body { padding:
|
|
195
|
+
.card-body { padding: 22px; }
|
|
170
196
|
|
|
171
197
|
.card-header-label {
|
|
172
198
|
font-size: 10px;
|
|
@@ -174,10 +200,12 @@ code {
|
|
|
174
200
|
color: var(--text-muted);
|
|
175
201
|
text-transform: uppercase;
|
|
176
202
|
letter-spacing: 1.5px;
|
|
177
|
-
margin-bottom:
|
|
203
|
+
margin-bottom: 16px;
|
|
178
204
|
}
|
|
179
205
|
|
|
180
|
-
/*
|
|
206
|
+
/* ════════════════════════════════════════════════════════════════
|
|
207
|
+
BADGES — Compact, refined
|
|
208
|
+
════════════════════════════════════════════════════════════════ */
|
|
181
209
|
.badge {
|
|
182
210
|
display: inline-flex;
|
|
183
211
|
align-items: center;
|
|
@@ -185,7 +213,7 @@ code {
|
|
|
185
213
|
font-size: 10px;
|
|
186
214
|
font-weight: 600;
|
|
187
215
|
padding: 2px 8px;
|
|
188
|
-
border-radius:
|
|
216
|
+
border-radius: 5px;
|
|
189
217
|
white-space: nowrap;
|
|
190
218
|
letter-spacing: 0.2px;
|
|
191
219
|
}
|
|
@@ -196,32 +224,38 @@ code {
|
|
|
196
224
|
.badge-blue { background: var(--blue-light); color: var(--blue); }
|
|
197
225
|
.badge-gray { background: var(--bg-section); color: var(--text-dim); }
|
|
198
226
|
|
|
199
|
-
/*
|
|
227
|
+
/* ════════════════════════════════════════════════════════════════
|
|
228
|
+
SCORE BARS
|
|
229
|
+
════════════════════════════════════════════════════════════════ */
|
|
200
230
|
.score-track {
|
|
201
|
-
height:
|
|
231
|
+
height: 5px;
|
|
202
232
|
background: var(--bg-section);
|
|
203
|
-
border-radius:
|
|
233
|
+
border-radius: 3px;
|
|
204
234
|
overflow: hidden;
|
|
205
235
|
flex: 1;
|
|
206
236
|
}
|
|
207
237
|
.score-fill {
|
|
208
238
|
height: 100%;
|
|
209
|
-
border-radius:
|
|
210
|
-
transition: width 0.
|
|
239
|
+
border-radius: 3px;
|
|
240
|
+
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
|
211
241
|
}
|
|
212
242
|
|
|
213
|
-
/*
|
|
243
|
+
/* ════════════════════════════════════════════════════════════════
|
|
244
|
+
STATS
|
|
245
|
+
════════════════════════════════════════════════════════════════ */
|
|
214
246
|
.stat-value {
|
|
215
|
-
font-size:
|
|
247
|
+
font-size: 32px;
|
|
216
248
|
font-weight: 800;
|
|
217
249
|
line-height: 1;
|
|
218
|
-
letter-spacing: -
|
|
250
|
+
letter-spacing: -1px;
|
|
251
|
+
font-variant-numeric: tabular-nums;
|
|
219
252
|
}
|
|
220
253
|
.stat-label {
|
|
221
254
|
font-size: 11px;
|
|
222
255
|
color: var(--text-dim);
|
|
223
|
-
margin-top:
|
|
256
|
+
margin-top: 6px;
|
|
224
257
|
font-weight: 500;
|
|
258
|
+
letter-spacing: 0.1px;
|
|
225
259
|
}
|
|
226
260
|
|
|
227
261
|
.section-label {
|
|
@@ -236,7 +270,9 @@ code {
|
|
|
236
270
|
gap: 8px;
|
|
237
271
|
}
|
|
238
272
|
|
|
239
|
-
/*
|
|
273
|
+
/* ════════════════════════════════════════════════════════════════
|
|
274
|
+
TAB BAR
|
|
275
|
+
════════════════════════════════════════════════════════════════ */
|
|
240
276
|
.tab-bar {
|
|
241
277
|
display: inline-flex;
|
|
242
278
|
background: var(--bg-section);
|
|
@@ -246,7 +282,7 @@ code {
|
|
|
246
282
|
margin-bottom: 24px;
|
|
247
283
|
}
|
|
248
284
|
.tab-item {
|
|
249
|
-
padding: 7px
|
|
285
|
+
padding: 7px 18px;
|
|
250
286
|
border-radius: 8px;
|
|
251
287
|
font-size: 13px;
|
|
252
288
|
font-weight: 500;
|
|
@@ -260,7 +296,7 @@ code {
|
|
|
260
296
|
}
|
|
261
297
|
.tab-item:hover {
|
|
262
298
|
color: var(--text-secondary);
|
|
263
|
-
background: rgba(255,255,255,0.
|
|
299
|
+
background: rgba(255,255,255,0.6);
|
|
264
300
|
}
|
|
265
301
|
.tab-item.active {
|
|
266
302
|
background: var(--bg-card);
|
|
@@ -269,14 +305,16 @@ code {
|
|
|
269
305
|
box-shadow: var(--shadow-sm);
|
|
270
306
|
}
|
|
271
307
|
|
|
272
|
-
/*
|
|
308
|
+
/* ════════════════════════════════════════════════════════════════
|
|
309
|
+
LAYER SECTIONS (Network page)
|
|
310
|
+
════════════════════════════════════════════════════════════════ */
|
|
273
311
|
.layer-section {
|
|
274
312
|
border-radius: var(--radius-xl);
|
|
275
|
-
padding:
|
|
313
|
+
padding: 22px;
|
|
276
314
|
margin-bottom: 16px;
|
|
277
315
|
}
|
|
278
316
|
.layer-generalized {
|
|
279
|
-
background: linear-gradient(135deg, #faf5ff, #
|
|
317
|
+
background: linear-gradient(135deg, #faf5ff, #ede9fe);
|
|
280
318
|
border: 1px solid var(--purple-border);
|
|
281
319
|
}
|
|
282
320
|
.layer-evolved {
|
|
@@ -292,7 +330,9 @@ code {
|
|
|
292
330
|
border: 1px solid var(--yellow-border);
|
|
293
331
|
}
|
|
294
332
|
|
|
295
|
-
/*
|
|
333
|
+
/* ════════════════════════════════════════════════════════════════
|
|
334
|
+
SKILL CARDS
|
|
335
|
+
════════════════════════════════════════════════════════════════ */
|
|
296
336
|
.skill-card {
|
|
297
337
|
background: var(--bg-card);
|
|
298
338
|
border: 1px solid var(--border);
|
|
@@ -312,7 +352,7 @@ code {
|
|
|
312
352
|
box-shadow: 0 0 0 2px var(--purple-light), var(--shadow-md);
|
|
313
353
|
}
|
|
314
354
|
|
|
315
|
-
/* ─── Flow
|
|
355
|
+
/* ─── Flow Labels ─── */
|
|
316
356
|
.flow-label {
|
|
317
357
|
font-size: 10px;
|
|
318
358
|
font-weight: 500;
|
|
@@ -331,39 +371,42 @@ code {
|
|
|
331
371
|
letter-spacing: 0.5px;
|
|
332
372
|
}
|
|
333
373
|
|
|
334
|
-
/*
|
|
374
|
+
/* ════════════════════════════════════════════════════════════════
|
|
375
|
+
TIMELINE
|
|
376
|
+
════════════════════════════════════════════════════════════════ */
|
|
335
377
|
.timeline-item {
|
|
336
378
|
position: relative;
|
|
337
|
-
padding-left:
|
|
338
|
-
padding-bottom:
|
|
379
|
+
padding-left: 24px;
|
|
380
|
+
padding-bottom: 18px;
|
|
339
381
|
border-left: 2px solid var(--border);
|
|
340
|
-
margin-left:
|
|
382
|
+
margin-left: 6px;
|
|
341
383
|
}
|
|
342
384
|
.timeline-item:last-child { border-left-color: transparent; }
|
|
343
385
|
.timeline-dot {
|
|
344
386
|
position: absolute;
|
|
345
|
-
left: -
|
|
387
|
+
left: -7px;
|
|
346
388
|
top: 3px;
|
|
347
|
-
width:
|
|
348
|
-
height:
|
|
389
|
+
width: 12px;
|
|
390
|
+
height: 12px;
|
|
349
391
|
border-radius: 50%;
|
|
350
392
|
border: 2px solid var(--bg);
|
|
393
|
+
box-shadow: 0 0 0 2px var(--border);
|
|
351
394
|
}
|
|
352
395
|
|
|
353
396
|
/* ─── Detail Panel ─── */
|
|
354
397
|
.detail-panel {
|
|
355
398
|
background: var(--bg-card);
|
|
356
399
|
border-left: 1px solid var(--border);
|
|
357
|
-
box-shadow: -4px 0
|
|
358
|
-
width:
|
|
400
|
+
box-shadow: -4px 0 24px rgba(0,0,0,0.06);
|
|
401
|
+
width: 420px;
|
|
359
402
|
height: 100%;
|
|
360
403
|
overflow-y: auto;
|
|
361
|
-
padding:
|
|
362
|
-
animation: slideIn 0.
|
|
404
|
+
padding: 28px;
|
|
405
|
+
animation: slideIn 0.25s ease;
|
|
363
406
|
}
|
|
364
407
|
|
|
365
408
|
@keyframes slideIn {
|
|
366
|
-
from { transform: translateX(
|
|
409
|
+
from { transform: translateX(24px); opacity: 0; }
|
|
367
410
|
to { transform: translateX(0); opacity: 1; }
|
|
368
411
|
}
|
|
369
412
|
|
|
@@ -373,46 +416,50 @@ code {
|
|
|
373
416
|
flex-direction: column;
|
|
374
417
|
align-items: center;
|
|
375
418
|
justify-content: center;
|
|
376
|
-
padding:
|
|
419
|
+
padding: 56px 24px;
|
|
377
420
|
text-align: center;
|
|
378
421
|
}
|
|
379
422
|
.empty-state-icon {
|
|
380
|
-
width:
|
|
381
|
-
height:
|
|
382
|
-
border-radius:
|
|
423
|
+
width: 52px;
|
|
424
|
+
height: 52px;
|
|
425
|
+
border-radius: 14px;
|
|
383
426
|
background: var(--bg-section);
|
|
384
427
|
display: flex;
|
|
385
428
|
align-items: center;
|
|
386
429
|
justify-content: center;
|
|
387
|
-
margin-bottom:
|
|
430
|
+
margin-bottom: 16px;
|
|
388
431
|
color: var(--text-muted);
|
|
389
432
|
}
|
|
390
433
|
.empty-state-title {
|
|
391
|
-
font-size:
|
|
392
|
-
font-weight:
|
|
434
|
+
font-size: 16px;
|
|
435
|
+
font-weight: 700;
|
|
393
436
|
color: var(--text);
|
|
394
|
-
margin-bottom:
|
|
437
|
+
margin-bottom: 6px;
|
|
395
438
|
}
|
|
396
439
|
.empty-state-desc {
|
|
397
440
|
font-size: 13px;
|
|
398
441
|
color: var(--text-dim);
|
|
399
442
|
max-width: 360px;
|
|
400
|
-
line-height: 1.
|
|
443
|
+
line-height: 1.55;
|
|
401
444
|
}
|
|
402
445
|
|
|
403
|
-
/*
|
|
446
|
+
/* ════════════════════════════════════════════════════════════════
|
|
447
|
+
STAT CARDS
|
|
448
|
+
════════════════════════════════════════════════════════════════ */
|
|
404
449
|
.stat-grid {
|
|
405
450
|
display: grid;
|
|
406
|
-
gap:
|
|
451
|
+
gap: 14px;
|
|
407
452
|
margin-bottom: 28px;
|
|
408
453
|
}
|
|
409
454
|
.stat-card {
|
|
410
455
|
background: var(--bg-card);
|
|
411
456
|
border: 1px solid var(--border);
|
|
412
457
|
border-radius: var(--radius-lg);
|
|
413
|
-
padding:
|
|
458
|
+
padding: 20px 22px;
|
|
414
459
|
box-shadow: var(--shadow-sm);
|
|
415
|
-
transition: all 0.
|
|
460
|
+
transition: all 0.25s ease;
|
|
461
|
+
position: relative;
|
|
462
|
+
overflow: hidden;
|
|
416
463
|
}
|
|
417
464
|
.stat-card:hover {
|
|
418
465
|
box-shadow: var(--shadow-md);
|
|
@@ -420,7 +467,7 @@ code {
|
|
|
420
467
|
}
|
|
421
468
|
|
|
422
469
|
/* ─── React Flow Overrides ─── */
|
|
423
|
-
.react-flow__background { opacity: 0.
|
|
470
|
+
.react-flow__background { opacity: 0.3; }
|
|
424
471
|
.react-flow__controls {
|
|
425
472
|
box-shadow: var(--shadow-md) !important;
|
|
426
473
|
border: 1px solid var(--border) !important;
|
|
@@ -435,7 +482,7 @@ code {
|
|
|
435
482
|
background: var(--bg-hover) !important;
|
|
436
483
|
}
|
|
437
484
|
|
|
438
|
-
/* ─── View
|
|
485
|
+
/* ─── View Header ─── */
|
|
439
486
|
.view-header {
|
|
440
487
|
display: flex;
|
|
441
488
|
justify-content: space-between;
|
|
@@ -454,19 +501,20 @@ code {
|
|
|
454
501
|
gap: 6px;
|
|
455
502
|
font-size: 12px;
|
|
456
503
|
color: var(--text-dim);
|
|
457
|
-
padding:
|
|
504
|
+
padding: 5px 12px;
|
|
458
505
|
background: var(--bg-section);
|
|
459
506
|
border-radius: 6px;
|
|
507
|
+
font-weight: 500;
|
|
460
508
|
}
|
|
461
509
|
|
|
462
|
-
/*
|
|
510
|
+
/* ═══ Proposal Card ═══ */
|
|
463
511
|
.proposal-card {
|
|
464
512
|
background: var(--bg-card);
|
|
465
513
|
border: 1px solid var(--border);
|
|
466
514
|
border-radius: var(--radius-lg);
|
|
467
515
|
overflow: hidden;
|
|
468
|
-
margin-bottom:
|
|
469
|
-
transition: all 0.
|
|
516
|
+
margin-bottom: 10px;
|
|
517
|
+
transition: all 0.2s ease;
|
|
470
518
|
}
|
|
471
519
|
.proposal-card:hover {
|
|
472
520
|
box-shadow: var(--shadow-sm);
|
|
@@ -481,16 +529,18 @@ code {
|
|
|
481
529
|
font-size: 11px;
|
|
482
530
|
font-weight: 600;
|
|
483
531
|
padding: 3px 8px;
|
|
484
|
-
border-radius:
|
|
532
|
+
border-radius: 5px;
|
|
485
533
|
background: var(--bg-section);
|
|
486
534
|
}
|
|
487
535
|
|
|
488
|
-
/*
|
|
536
|
+
/* ════════════════════════════════════════════════════════════════
|
|
537
|
+
GRID UTILITIES
|
|
538
|
+
════════════════════════════════════════════════════════════════ */
|
|
489
539
|
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
490
|
-
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap:
|
|
491
|
-
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap:
|
|
492
|
-
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap:
|
|
493
|
-
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap:
|
|
540
|
+
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
|
|
541
|
+
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
|
|
542
|
+
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
|
|
543
|
+
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
|
|
494
544
|
|
|
495
545
|
/* ════════════════════════════════════════════════════════════════
|
|
496
546
|
GUIDE PAGE
|
|
@@ -499,20 +549,20 @@ code {
|
|
|
499
549
|
.guide-layout {
|
|
500
550
|
display: flex;
|
|
501
551
|
gap: 0;
|
|
502
|
-
margin: -
|
|
552
|
+
margin: -36px -48px;
|
|
503
553
|
min-height: 100vh;
|
|
504
554
|
}
|
|
505
555
|
|
|
506
556
|
/* ─── Sidebar TOC ─── */
|
|
507
557
|
.guide-toc {
|
|
508
|
-
width:
|
|
558
|
+
width: 230px;
|
|
509
559
|
flex-shrink: 0;
|
|
510
560
|
position: sticky;
|
|
511
561
|
top: 0;
|
|
512
562
|
height: 100vh;
|
|
513
563
|
overflow-y: auto;
|
|
514
564
|
border-right: 1px solid var(--border);
|
|
515
|
-
background: var(--bg-
|
|
565
|
+
background: var(--bg-card);
|
|
516
566
|
padding-bottom: 20px;
|
|
517
567
|
}
|
|
518
568
|
.guide-toc-header {
|
|
@@ -540,7 +590,7 @@ code {
|
|
|
540
590
|
display: flex;
|
|
541
591
|
align-items: center;
|
|
542
592
|
gap: 8px;
|
|
543
|
-
padding:
|
|
593
|
+
padding: 8px 20px;
|
|
544
594
|
font-size: 12.5px;
|
|
545
595
|
font-weight: 500;
|
|
546
596
|
color: var(--text-dim);
|
|
@@ -550,7 +600,7 @@ code {
|
|
|
550
600
|
}
|
|
551
601
|
.guide-toc-item:hover {
|
|
552
602
|
color: var(--text);
|
|
553
|
-
background: var(--bg-
|
|
603
|
+
background: var(--bg-section);
|
|
554
604
|
text-decoration: none;
|
|
555
605
|
}
|
|
556
606
|
.guide-toc-item.active {
|
|
@@ -572,13 +622,13 @@ code {
|
|
|
572
622
|
.guide-content {
|
|
573
623
|
flex: 1;
|
|
574
624
|
max-width: 860px;
|
|
575
|
-
padding: 0
|
|
625
|
+
padding: 0 56px 80px;
|
|
576
626
|
margin: 0 auto;
|
|
577
627
|
}
|
|
578
628
|
|
|
579
629
|
/* ─── Hero ─── */
|
|
580
630
|
.guide-hero {
|
|
581
|
-
padding:
|
|
631
|
+
padding: 56px 0 44px;
|
|
582
632
|
border-bottom: 1px solid var(--border);
|
|
583
633
|
margin-bottom: 48px;
|
|
584
634
|
}
|
|
@@ -590,20 +640,20 @@ code {
|
|
|
590
640
|
letter-spacing: 1.5px;
|
|
591
641
|
color: var(--purple);
|
|
592
642
|
background: var(--purple-light);
|
|
593
|
-
padding: 4px
|
|
643
|
+
padding: 4px 14px;
|
|
594
644
|
border-radius: 20px;
|
|
595
|
-
margin-bottom:
|
|
645
|
+
margin-bottom: 18px;
|
|
596
646
|
}
|
|
597
647
|
.guide-hero-title {
|
|
598
|
-
font-size:
|
|
648
|
+
font-size: 40px;
|
|
599
649
|
font-weight: 800;
|
|
600
|
-
letter-spacing: -
|
|
650
|
+
letter-spacing: -1.2px;
|
|
601
651
|
color: var(--text);
|
|
602
|
-
line-height: 1.
|
|
603
|
-
margin-bottom:
|
|
652
|
+
line-height: 1.1;
|
|
653
|
+
margin-bottom: 14px;
|
|
604
654
|
}
|
|
605
655
|
.guide-hero-desc {
|
|
606
|
-
font-size:
|
|
656
|
+
font-size: 16px;
|
|
607
657
|
color: var(--text-dim);
|
|
608
658
|
line-height: 1.7;
|
|
609
659
|
max-width: 640px;
|
|
@@ -611,8 +661,8 @@ code {
|
|
|
611
661
|
.guide-hero-features {
|
|
612
662
|
display: grid;
|
|
613
663
|
grid-template-columns: repeat(4, 1fr);
|
|
614
|
-
gap:
|
|
615
|
-
margin-top:
|
|
664
|
+
gap: 14px;
|
|
665
|
+
margin-top: 36px;
|
|
616
666
|
}
|
|
617
667
|
|
|
618
668
|
/* ─── Feature Cards ─── */
|
|
@@ -620,8 +670,8 @@ code {
|
|
|
620
670
|
background: var(--bg-card);
|
|
621
671
|
border: 1px solid var(--border);
|
|
622
672
|
border-radius: var(--radius-lg);
|
|
623
|
-
padding:
|
|
624
|
-
transition: all 0.
|
|
673
|
+
padding: 22px;
|
|
674
|
+
transition: all 0.25s ease;
|
|
625
675
|
}
|
|
626
676
|
.guide-feature-card:hover {
|
|
627
677
|
box-shadow: var(--shadow-md);
|
|
@@ -630,14 +680,14 @@ code {
|
|
|
630
680
|
}
|
|
631
681
|
.guide-feature-icon {
|
|
632
682
|
font-size: 20px;
|
|
633
|
-
margin-bottom:
|
|
634
|
-
width:
|
|
635
|
-
height:
|
|
683
|
+
margin-bottom: 12px;
|
|
684
|
+
width: 42px;
|
|
685
|
+
height: 42px;
|
|
636
686
|
display: flex;
|
|
637
687
|
align-items: center;
|
|
638
688
|
justify-content: center;
|
|
639
689
|
background: var(--bg-section);
|
|
640
|
-
border-radius:
|
|
690
|
+
border-radius: 11px;
|
|
641
691
|
}
|
|
642
692
|
.guide-feature-title {
|
|
643
693
|
font-size: 13px;
|
|
@@ -648,19 +698,19 @@ code {
|
|
|
648
698
|
.guide-feature-desc {
|
|
649
699
|
font-size: 12px;
|
|
650
700
|
color: var(--text-dim);
|
|
651
|
-
line-height: 1.
|
|
701
|
+
line-height: 1.55;
|
|
652
702
|
}
|
|
653
703
|
|
|
654
704
|
/* ─── Sections ─── */
|
|
655
705
|
.guide-section {
|
|
656
|
-
padding-top:
|
|
706
|
+
padding-top: 44px;
|
|
657
707
|
margin-bottom: 16px;
|
|
658
708
|
scroll-margin-top: 20px;
|
|
659
709
|
}
|
|
660
710
|
.guide-section-title {
|
|
661
|
-
font-size:
|
|
711
|
+
font-size: 24px;
|
|
662
712
|
font-weight: 800;
|
|
663
|
-
letter-spacing: -0.
|
|
713
|
+
letter-spacing: -0.6px;
|
|
664
714
|
color: var(--text);
|
|
665
715
|
margin-bottom: 4px;
|
|
666
716
|
line-height: 1.2;
|
|
@@ -669,21 +719,21 @@ code {
|
|
|
669
719
|
font-size: 14px;
|
|
670
720
|
color: var(--text-dim);
|
|
671
721
|
margin-bottom: 24px;
|
|
672
|
-
line-height: 1.
|
|
722
|
+
line-height: 1.6;
|
|
673
723
|
}
|
|
674
724
|
.guide-h3 {
|
|
675
|
-
font-size:
|
|
725
|
+
font-size: 16px;
|
|
676
726
|
font-weight: 700;
|
|
677
727
|
color: var(--text);
|
|
678
728
|
margin: 28px 0 12px;
|
|
679
|
-
letter-spacing: -0.
|
|
729
|
+
letter-spacing: -0.3px;
|
|
680
730
|
}
|
|
681
731
|
|
|
682
732
|
/* ─── Text ─── */
|
|
683
733
|
.guide-text {
|
|
684
734
|
font-size: 14px;
|
|
685
735
|
color: var(--text-secondary);
|
|
686
|
-
line-height: 1.
|
|
736
|
+
line-height: 1.8;
|
|
687
737
|
margin-bottom: 16px;
|
|
688
738
|
}
|
|
689
739
|
.guide-text-sm {
|
|
@@ -708,16 +758,16 @@ code {
|
|
|
708
758
|
|
|
709
759
|
/* ─── Code Blocks ─── */
|
|
710
760
|
.guide-code-block {
|
|
711
|
-
background: #
|
|
761
|
+
background: #0f172a;
|
|
712
762
|
border-radius: var(--radius-lg);
|
|
713
763
|
overflow: hidden;
|
|
714
764
|
margin: 12px 0 16px;
|
|
715
|
-
border: 1px solid rgba(255,255,255,0.
|
|
765
|
+
border: 1px solid rgba(255,255,255,0.08);
|
|
716
766
|
}
|
|
717
767
|
.guide-code-title {
|
|
718
768
|
font-size: 11px;
|
|
719
769
|
font-weight: 600;
|
|
720
|
-
color: #
|
|
770
|
+
color: #94a3b8;
|
|
721
771
|
padding: 10px 16px 0;
|
|
722
772
|
letter-spacing: 0.3px;
|
|
723
773
|
font-family: var(--font-mono);
|
|
@@ -730,7 +780,7 @@ code {
|
|
|
730
780
|
font-family: var(--font-mono);
|
|
731
781
|
font-size: 12.5px;
|
|
732
782
|
line-height: 1.65;
|
|
733
|
-
color: #
|
|
783
|
+
color: #e2e8f0;
|
|
734
784
|
background: none;
|
|
735
785
|
padding: 0;
|
|
736
786
|
border-radius: 0;
|
|
@@ -766,10 +816,10 @@ code {
|
|
|
766
816
|
margin: 20px 0;
|
|
767
817
|
}
|
|
768
818
|
.guide-step-number {
|
|
769
|
-
width:
|
|
770
|
-
height:
|
|
819
|
+
width: 30px;
|
|
820
|
+
height: 30px;
|
|
771
821
|
border-radius: 50%;
|
|
772
|
-
background: linear-gradient(135deg,
|
|
822
|
+
background: linear-gradient(135deg, #6d28d9, #3b82f6);
|
|
773
823
|
color: #fff;
|
|
774
824
|
font-size: 13px;
|
|
775
825
|
font-weight: 700;
|
|
@@ -778,6 +828,7 @@ code {
|
|
|
778
828
|
justify-content: center;
|
|
779
829
|
flex-shrink: 0;
|
|
780
830
|
margin-top: 2px;
|
|
831
|
+
box-shadow: 0 2px 8px rgba(109,40,217,0.25);
|
|
781
832
|
}
|
|
782
833
|
.guide-step-content {
|
|
783
834
|
flex: 1;
|
|
@@ -801,11 +852,13 @@ code {
|
|
|
801
852
|
display: flex;
|
|
802
853
|
align-items: flex-start;
|
|
803
854
|
gap: 14px;
|
|
804
|
-
padding:
|
|
855
|
+
padding: 16px 20px;
|
|
805
856
|
background: var(--bg-card);
|
|
806
857
|
border: 1px solid var(--border);
|
|
807
858
|
border-radius: var(--radius);
|
|
859
|
+
transition: border-color 0.15s;
|
|
808
860
|
}
|
|
861
|
+
.guide-direction:hover { border-color: var(--border-focus); }
|
|
809
862
|
.guide-direction-arrow {
|
|
810
863
|
font-size: 22px;
|
|
811
864
|
font-weight: 800;
|
|
@@ -828,7 +881,7 @@ code {
|
|
|
828
881
|
/* ─── Architecture Diagram ─── */
|
|
829
882
|
.guide-diagram {
|
|
830
883
|
margin: 20px 0 28px;
|
|
831
|
-
padding:
|
|
884
|
+
padding: 28px;
|
|
832
885
|
background: var(--bg-card);
|
|
833
886
|
border: 1px solid var(--border);
|
|
834
887
|
border-radius: var(--radius-xl);
|
|
@@ -840,7 +893,7 @@ code {
|
|
|
840
893
|
}
|
|
841
894
|
.guide-diagram-box {
|
|
842
895
|
flex: 1;
|
|
843
|
-
padding:
|
|
896
|
+
padding: 18px;
|
|
844
897
|
border-radius: var(--radius);
|
|
845
898
|
border: 1px solid;
|
|
846
899
|
text-align: center;
|
|
@@ -920,7 +973,7 @@ code {
|
|
|
920
973
|
opacity: 0.7;
|
|
921
974
|
}
|
|
922
975
|
.guide-hierarchy-system {
|
|
923
|
-
background: linear-gradient(135deg, #faf5ff, #
|
|
976
|
+
background: linear-gradient(135deg, #faf5ff, #ede9fe);
|
|
924
977
|
border-color: var(--purple-border);
|
|
925
978
|
color: var(--purple);
|
|
926
979
|
}
|
|
@@ -955,8 +1008,8 @@ code {
|
|
|
955
1008
|
padding: 14px 0;
|
|
956
1009
|
}
|
|
957
1010
|
.guide-pipeline-icon {
|
|
958
|
-
width:
|
|
959
|
-
height:
|
|
1011
|
+
width: 34px;
|
|
1012
|
+
height: 34px;
|
|
960
1013
|
border-radius: 10px;
|
|
961
1014
|
display: flex;
|
|
962
1015
|
align-items: center;
|
|
@@ -969,14 +1022,14 @@ code {
|
|
|
969
1022
|
width: 2px;
|
|
970
1023
|
height: 16px;
|
|
971
1024
|
background: var(--border);
|
|
972
|
-
margin-left:
|
|
1025
|
+
margin-left: 16px;
|
|
973
1026
|
}
|
|
974
1027
|
|
|
975
1028
|
/* ─── Judge Cards ─── */
|
|
976
1029
|
.guide-judges-grid {
|
|
977
1030
|
display: grid;
|
|
978
1031
|
grid-template-columns: repeat(3, 1fr);
|
|
979
|
-
gap:
|
|
1032
|
+
gap: 14px;
|
|
980
1033
|
margin: 16px 0;
|
|
981
1034
|
}
|
|
982
1035
|
.guide-judge-card {
|
|
@@ -984,7 +1037,7 @@ code {
|
|
|
984
1037
|
border: 1px solid var(--border);
|
|
985
1038
|
border-top: 3px solid;
|
|
986
1039
|
border-radius: var(--radius-lg);
|
|
987
|
-
padding:
|
|
1040
|
+
padding: 22px;
|
|
988
1041
|
}
|
|
989
1042
|
.guide-judge-header {
|
|
990
1043
|
display: flex;
|
|
@@ -993,8 +1046,8 @@ code {
|
|
|
993
1046
|
margin-bottom: 12px;
|
|
994
1047
|
}
|
|
995
1048
|
.guide-judge-icon {
|
|
996
|
-
width:
|
|
997
|
-
height:
|
|
1049
|
+
width: 38px;
|
|
1050
|
+
height: 38px;
|
|
998
1051
|
border-radius: 10px;
|
|
999
1052
|
display: flex;
|
|
1000
1053
|
align-items: center;
|
|
@@ -1076,7 +1129,7 @@ code {
|
|
|
1076
1129
|
color: var(--purple);
|
|
1077
1130
|
background: var(--purple-light);
|
|
1078
1131
|
padding: 3px 10px;
|
|
1079
|
-
border-radius:
|
|
1132
|
+
border-radius: 5px;
|
|
1080
1133
|
}
|
|
1081
1134
|
.guide-command-desc {
|
|
1082
1135
|
font-size: 13px;
|
|
@@ -1160,7 +1213,7 @@ code {
|
|
|
1160
1213
|
border-radius: var(--radius);
|
|
1161
1214
|
margin-bottom: 6px;
|
|
1162
1215
|
cursor: pointer;
|
|
1163
|
-
transition: all 0.
|
|
1216
|
+
transition: all 0.2s ease;
|
|
1164
1217
|
overflow: hidden;
|
|
1165
1218
|
}
|
|
1166
1219
|
.guide-faq-item:hover {
|
|
@@ -1207,5 +1260,5 @@ code {
|
|
|
1207
1260
|
}
|
|
1208
1261
|
.guide-footer-content {
|
|
1209
1262
|
text-align: center;
|
|
1210
|
-
padding:
|
|
1263
|
+
padding: 24px 0;
|
|
1211
1264
|
}
|
package/dashboard/app/layout.tsx
CHANGED
|
@@ -43,14 +43,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|
|
43
43
|
</svg>
|
|
44
44
|
</div>
|
|
45
45
|
<div>
|
|
46
|
-
<div style={{ fontSize:
|
|
47
|
-
<div style={{ fontSize: 10, color: '
|
|
46
|
+
<div style={{ fontSize: 15, fontWeight: 700, color: '#fff', letterSpacing: -0.3 }}>HelixEvo</div>
|
|
47
|
+
<div style={{ fontSize: 10, color: 'rgba(255,255,255,0.35)', letterSpacing: 0.3 }}>Co-evolving AI Skills</div>
|
|
48
48
|
</div>
|
|
49
49
|
</div>
|
|
50
50
|
|
|
51
51
|
{/* Nav items */}
|
|
52
|
-
<div style={{ padding: '
|
|
53
|
-
<div style={{ fontSize: 9, fontWeight: 600, color: '
|
|
52
|
+
<div style={{ padding: '16px 8px', flex: 1 }}>
|
|
53
|
+
<div style={{ fontSize: 9, fontWeight: 600, color: 'rgba(255,255,255,0.25)', textTransform: 'uppercase', letterSpacing: 1.5, padding: '0 14px 10px' }}>
|
|
54
54
|
Navigation
|
|
55
55
|
</div>
|
|
56
56
|
{NAV.map(n => (
|
|
@@ -64,10 +64,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|
|
64
64
|
{/* Footer */}
|
|
65
65
|
<div className="sidebar-footer">
|
|
66
66
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
67
|
-
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '
|
|
67
|
+
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '#34d399', boxShadow: '0 0 8px rgba(52,211,153,0.4)' }} />
|
|
68
68
|
<span>System Active</span>
|
|
69
69
|
</div>
|
|
70
|
-
<code style={{ fontSize: 10, background: '
|
|
70
|
+
<code style={{ fontSize: 10, background: 'rgba(255,255,255,0.06)', color: 'rgba(255,255,255,0.4)', padding: '2px 7px', borderRadius: 4 }}>v{VERSION}</code>
|
|
71
71
|
</div>
|
|
72
72
|
</nav>
|
|
73
73
|
|
package/package.json
CHANGED