Hugging Face's logo

Spaces:
RyeCatcher
/
echo
Running

App Files Community
1
RyeCatcher commited on
Commit
7fd1a10
·
verified ·
1 Parent(s): 3d13631

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +625 -17
style.css CHANGED
@@ -1,28 +1,636 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
1
+ :root {
2
+ --bg-primary: #0d0d0f;
3
+ --bg-secondary: #16161a;
4
+ --bg-tertiary: #1e1e24;
5
+ --text-primary: #f0f0f0;
6
+ --text-secondary: #a0a0a5;
7
+ --text-muted: #6b6b70;
8
+ --accent-cyan: #00ffd5;
9
+ --accent-amber: #ffaa00;
10
+ --accent-purple: #667eea;
11
+ --accent-green: #4ade80;
12
+ --border-subtle: rgba(255, 255, 255, 0.08);
13
+ }
14
+
15
+ * {
16
+ margin: 0;
17
+ padding: 0;
18
+ box-sizing: border-box;
19
+ }
20
+
21
  body {
22
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
23
+ background: var(--bg-primary);
24
+ color: var(--text-primary);
25
+ line-height: 1.6;
26
+ min-height: 100vh;
27
+ }
28
+
29
+ .container {
30
+ max-width: 1000px;
31
+ margin: 0 auto;
32
+ padding: 3rem 2rem;
33
+ }
34
+
35
+ /* Header */
36
+ header {
37
+ text-align: center;
38
+ padding: 2rem 0 1rem;
39
+ }
40
+
41
+ .logo-link {
42
+ display: inline-block;
43
+ margin-bottom: 1.5rem;
44
+ transition: transform 0.2s;
45
+ }
46
+
47
+ .logo-link:hover {
48
+ transform: scale(1.05);
49
+ }
50
+
51
+ .logo {
52
+ width: 80px;
53
+ height: 80px;
54
+ border-radius: 1rem;
55
+ }
56
+
57
+ .badge-wrapper {
58
+ display: block;
59
+ text-align: center;
60
+ margin-bottom: 1.5rem;
61
+ }
62
+
63
+ .badge {
64
+ display: inline-block;
65
+ background: transparent;
66
+ color: var(--accent-cyan);
67
+ border: 1px solid var(--accent-cyan);
68
+ padding: 0.5rem 1.25rem;
69
+ border-radius: 24px;
70
+ font-size: 0.8rem;
71
+ font-weight: 500;
72
+ font-family: 'JetBrains Mono', monospace;
73
+ letter-spacing: 0.02em;
74
  }
75
 
76
  h1 {
77
+ font-family: 'JetBrains Mono', monospace;
78
+ font-size: 3.5rem;
79
+ font-weight: 600;
80
+ margin-bottom: 0.75rem;
81
+ background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
82
+ -webkit-background-clip: text;
83
+ -webkit-text-fill-color: transparent;
84
+ background-clip: text;
85
+ }
86
+
87
+ .tagline {
88
+ font-size: 1.2rem;
89
+ color: var(--text-secondary);
90
+ max-width: 500px;
91
+ margin: 0 auto;
92
+ }
93
+
94
+ /* Animated Demo Section */
95
+ .demo-section {
96
+ display: flex;
97
+ justify-content: center;
98
+ padding: 1.5rem 0 2.5rem;
99
+ }
100
+
101
+ .demo-box {
102
+ background: var(--bg-secondary);
103
+ border-radius: 16px;
104
+ padding: 2.5rem 3rem;
105
+ text-align: center;
106
+ border: 1px solid var(--border-subtle);
107
+ min-width: 400px;
108
+ }
109
+
110
+ .robot-icon {
111
+ font-size: 64px;
112
+ margin-bottom: 1.25rem;
113
+ animation: gentle-pulse 3s ease-in-out infinite;
114
+ }
115
+
116
+ @keyframes gentle-pulse {
117
+ 0%, 100% { transform: scale(1); }
118
+ 50% { transform: scale(1.05); }
119
+ }
120
+
121
+ /* Memory Bubbles Animation */
122
+ .memory-display {
123
+ margin-bottom: 1.5rem;
124
+ }
125
+
126
+ .memory-bubbles {
127
+ display: flex;
128
+ flex-direction: column;
129
+ gap: 0.75rem;
130
+ max-width: 350px;
131
+ margin: 0 auto;
132
+ }
133
+
134
+ .bubble {
135
+ padding: 0.75rem 1rem;
136
+ border-radius: 12px;
137
+ font-size: 0.85rem;
138
+ animation: fade-in 0.5s ease-out forwards;
139
+ opacity: 0;
140
+ }
141
+
142
+ .bubble.left {
143
+ background: var(--bg-tertiary);
144
+ color: var(--text-primary);
145
+ align-self: flex-start;
146
+ border-bottom-left-radius: 4px;
147
+ }
148
+
149
+ .bubble.right {
150
+ background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
151
+ color: var(--bg-primary);
152
+ align-self: flex-end;
153
+ border-bottom-right-radius: 4px;
154
+ }
155
+
156
+ .bubble:nth-child(1) { animation-delay: 0s; }
157
+ .bubble:nth-child(2) { animation-delay: 0.8s; }
158
+ .bubble:nth-child(3) { animation-delay: 1.6s; }
159
+ .bubble:nth-child(4) { animation-delay: 2.4s; }
160
+
161
+ @keyframes fade-in {
162
+ from { opacity: 0; transform: translateY(10px); }
163
+ to { opacity: 1; transform: translateY(0); }
164
+ }
165
+
166
+ .memory-stats {
167
+ display: flex;
168
+ justify-content: center;
169
+ gap: 1.5rem;
170
+ font-family: 'JetBrains Mono', monospace;
171
+ font-size: 0.85rem;
172
+ color: var(--text-muted);
173
+ }
174
+
175
+ .memory-stats span {
176
+ padding: 0.25rem 0.75rem;
177
+ background: var(--bg-tertiary);
178
+ border-radius: 4px;
179
+ }
180
+
181
+ /* Feature Grid - 6 cards, 3x2 on desktop */
182
+ .hero {
183
+ padding: 1rem 0 2rem;
184
+ }
185
+
186
+ .feature-grid {
187
+ display: grid;
188
+ grid-template-columns: repeat(3, 1fr);
189
+ gap: 1.25rem;
190
+ }
191
+
192
+ .feature {
193
+ background: var(--bg-secondary);
194
+ padding: 1.5rem;
195
+ border-radius: 12px;
196
+ border: 1px solid var(--border-subtle);
197
+ transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
198
+ }
199
+
200
+ .feature:hover {
201
+ transform: translateY(-4px);
202
+ border-color: rgba(102, 126, 234, 0.3);
203
+ box-shadow: 0 12px 40px rgba(102, 126, 234, 0.08);
204
+ }
205
+
206
+ .icon-box {
207
+ width: 48px;
208
+ height: 48px;
209
+ border-radius: 10px;
210
+ display: flex;
211
+ align-items: center;
212
+ justify-content: center;
213
+ margin-bottom: 1rem;
214
+ }
215
+
216
+ .icon-box.cyan {
217
+ background: rgba(0, 255, 213, 0.12);
218
+ color: var(--accent-cyan);
219
+ }
220
+
221
+ .icon-box.amber {
222
+ background: rgba(255, 170, 0, 0.12);
223
+ color: var(--accent-amber);
224
+ }
225
+
226
+ .icon-box.purple {
227
+ background: rgba(102, 126, 234, 0.12);
228
+ color: var(--accent-purple);
229
+ }
230
+
231
+ .icon-box.green {
232
+ background: rgba(74, 222, 128, 0.12);
233
+ color: var(--accent-green);
234
+ }
235
+
236
+ .feature h3 {
237
+ font-family: 'JetBrains Mono', monospace;
238
+ font-size: 1rem;
239
+ font-weight: 500;
240
+ margin-bottom: 0.5rem;
241
+ color: var(--text-primary);
242
+ }
243
+
244
+ .feature p {
245
+ font-size: 0.875rem;
246
+ color: var(--text-secondary);
247
+ line-height: 1.5;
248
+ }
249
+
250
+ /* Install Section */
251
+ .install {
252
+ background: var(--bg-secondary);
253
+ padding: 2.5rem;
254
+ border-radius: 16px;
255
+ margin: 2.5rem 0;
256
+ border: 1px solid var(--border-subtle);
257
+ }
258
+
259
+ .install h2 {
260
+ font-family: 'JetBrains Mono', monospace;
261
+ font-size: 1.25rem;
262
+ margin-bottom: 1.5rem;
263
+ color: var(--accent-purple);
264
+ text-align: center;
265
+ }
266
+
267
+ .install-steps {
268
+ display: flex;
269
+ flex-direction: column;
270
+ gap: 1.25rem;
271
+ }
272
+
273
+ .step {
274
+ display: flex;
275
+ align-items: flex-start;
276
+ gap: 1rem;
277
+ }
278
+
279
+ .step-num {
280
+ width: 32px;
281
+ height: 32px;
282
+ background: var(--bg-tertiary);
283
+ border-radius: 8px;
284
+ display: flex;
285
+ align-items: center;
286
+ justify-content: center;
287
+ font-family: 'JetBrains Mono', monospace;
288
+ font-size: 0.875rem;
289
+ font-weight: 600;
290
+ color: var(--accent-purple);
291
+ flex-shrink: 0;
292
+ }
293
+
294
+ .step-content {
295
+ flex: 1;
296
+ }
297
+
298
+ .step-content h4 {
299
+ font-size: 0.95rem;
300
+ font-weight: 500;
301
+ margin-bottom: 0.5rem;
302
+ color: var(--text-primary);
303
+ }
304
+
305
+ .code-block {
306
+ position: relative;
307
+ }
308
+
309
+ .step-content code {
310
+ display: block;
311
+ background: var(--bg-primary);
312
+ padding: 0.75rem 1rem;
313
+ padding-right: 4rem;
314
+ border-radius: 8px;
315
+ font-family: 'JetBrains Mono', monospace;
316
+ font-size: 0.8rem;
317
+ overflow-x: auto;
318
+ border: 1px solid var(--border-subtle);
319
+ color: var(--accent-cyan);
320
+ }
321
+
322
+ .copy-btn {
323
+ position: absolute;
324
+ right: 0.5rem;
325
+ top: 50%;
326
+ transform: translateY(-50%);
327
+ background: var(--bg-tertiary);
328
+ border: 1px solid var(--border-subtle);
329
+ color: var(--text-secondary);
330
+ padding: 0.25rem 0.5rem;
331
+ border-radius: 4px;
332
+ font-family: 'JetBrains Mono', monospace;
333
+ font-size: 0.75rem;
334
+ cursor: pointer;
335
+ transition: all 0.2s;
336
  }
337
 
338
+ .copy-btn:hover {
339
+ background: var(--accent-cyan);
340
+ color: var(--bg-primary);
341
+ border-color: var(--accent-cyan);
 
342
  }
343
 
344
+ .copy-btn.copied {
345
+ background: var(--accent-cyan);
346
+ color: var(--bg-primary);
347
+ border-color: var(--accent-cyan);
 
 
348
  }
349
 
350
+ .step-content p {
351
+ font-size: 0.9rem;
352
+ color: var(--text-secondary);
353
+ }
354
+
355
+ .step-content strong {
356
+ color: var(--accent-cyan);
357
+ font-weight: 500;
358
+ }
359
+
360
+ /* How it works */
361
+ .how-it-works {
362
+ padding: 2rem 0;
363
+ }
364
+
365
+ .how-it-works h2 {
366
+ font-family: 'JetBrains Mono', monospace;
367
+ font-size: 1.25rem;
368
+ margin-bottom: 2rem;
369
+ color: var(--text-primary);
370
+ text-align: center;
371
+ }
372
+
373
+ .workflow {
374
+ display: flex;
375
+ align-items: center;
376
+ justify-content: center;
377
+ gap: 1rem;
378
+ flex-wrap: wrap;
379
+ }
380
+
381
+ .workflow-step {
382
+ text-align: center;
383
+ padding: 1rem;
384
+ }
385
+
386
+ .workflow-icon {
387
+ width: 64px;
388
+ height: 64px;
389
+ background: var(--bg-secondary);
390
+ border-radius: 12px;
391
+ display: flex;
392
+ align-items: center;
393
+ justify-content: center;
394
+ margin: 0 auto 0.75rem;
395
+ color: var(--accent-purple);
396
+ border: 1px solid var(--border-subtle);
397
+ }
398
+
399
+ .workflow-step p {
400
+ font-size: 0.875rem;
401
+ color: var(--text-secondary);
402
+ max-width: 120px;
403
+ }
404
+
405
+ .workflow-arrow {
406
+ color: var(--text-muted);
407
+ font-size: 1.5rem;
408
+ }
409
+
410
+ /* Behaviors Section */
411
+ .behaviors {
412
+ padding: 2rem 0;
413
+ }
414
+
415
+ .behaviors h2 {
416
+ font-family: 'JetBrains Mono', monospace;
417
+ font-size: 1.25rem;
418
+ margin-bottom: 1.5rem;
419
+ color: var(--text-primary);
420
+ text-align: center;
421
+ }
422
+
423
+ .behavior-table {
424
+ background: var(--bg-secondary);
425
+ border-radius: 12px;
426
+ border: 1px solid var(--border-subtle);
427
+ overflow: hidden;
428
+ }
429
+
430
+ .behavior-row {
431
+ display: grid;
432
+ grid-template-columns: 1fr 1.5fr 0.75fr;
433
+ gap: 1rem;
434
+ padding: 1rem 1.5rem;
435
+ border-bottom: 1px solid var(--border-subtle);
436
+ font-size: 0.9rem;
437
+ }
438
+
439
+ .behavior-row:last-child {
440
+ border-bottom: none;
441
+ }
442
+
443
+ .behavior-row:hover {
444
+ background: var(--bg-tertiary);
445
+ }
446
+
447
+ .behavior-name {
448
+ font-family: 'JetBrains Mono', monospace;
449
+ color: var(--accent-cyan);
450
+ font-weight: 500;
451
+ }
452
+
453
+ .behavior-trigger {
454
+ color: var(--text-secondary);
455
+ }
456
+
457
+ .behavior-cooldown {
458
+ color: var(--text-muted);
459
+ text-align: right;
460
+ }
461
+
462
+ /* About */
463
+ .about {
464
+ padding: 2rem 0;
465
+ text-align: center;
466
+ max-width: 700px;
467
+ margin: 0 auto;
468
+ }
469
+
470
+ .about h2 {
471
+ font-family: 'JetBrains Mono', monospace;
472
+ font-size: 1.25rem;
473
+ margin-bottom: 1.25rem;
474
+ color: var(--text-primary);
475
+ }
476
+
477
+ .about p {
478
+ color: var(--text-secondary);
479
+ margin-bottom: 1rem;
480
+ font-size: 1rem;
481
+ line-height: 1.7;
482
+ }
483
+
484
+ .about a {
485
+ color: var(--accent-cyan);
486
+ text-decoration: none;
487
+ }
488
+
489
+ .about a:hover {
490
+ text-decoration: underline;
491
+ }
492
+
493
+ .about strong {
494
+ color: var(--accent-cyan);
495
+ font-weight: 500;
496
+ }
497
+
498
+ .about-links {
499
+ display: flex;
500
+ gap: 2rem;
501
+ justify-content: center;
502
+ margin-top: 1.5rem;
503
+ flex-wrap: wrap;
504
+ }
505
+
506
+ .about-links a {
507
+ color: var(--accent-purple);
508
+ text-decoration: none;
509
+ font-weight: 500;
510
+ transition: color 0.2s;
511
+ }
512
+
513
+ .about-links a:hover {
514
+ color: var(--accent-cyan);
515
+ }
516
+
517
+ /* Footer */
518
+ footer {
519
+ text-align: center;
520
+ padding: 2.5rem 0 1rem;
521
+ border-top: 1px solid var(--border-subtle);
522
+ margin-top: 2rem;
523
+ }
524
+
525
+ .footer-logo-link {
526
+ display: inline-flex;
527
+ align-items: center;
528
+ gap: 0.75rem;
529
+ text-decoration: none;
530
+ margin-bottom: 1.5rem;
531
+ transition: transform 0.2s;
532
+ }
533
+
534
+ .footer-logo-link:hover {
535
+ transform: scale(1.02);
536
+ }
537
+
538
+ .footer-logo {
539
+ width: 48px;
540
+ height: 48px;
541
+ border-radius: 0.5rem;
542
+ }
543
+
544
+ .footer-site-name {
545
+ font-family: 'JetBrains Mono', monospace;
546
+ font-size: 1.25rem;
547
+ color: var(--accent-cyan);
548
+ }
549
+
550
+ .footer-links {
551
+ display: flex;
552
+ flex-wrap: wrap;
553
+ justify-content: center;
554
+ gap: 1.5rem;
555
+ margin-bottom: 1.5rem;
556
+ }
557
+
558
+ .footer-links a {
559
+ display: inline-flex;
560
+ align-items: center;
561
+ gap: 0.5rem;
562
+ color: var(--text-secondary);
563
+ text-decoration: none;
564
+ font-size: 0.875rem;
565
+ transition: color 0.2s;
566
+ }
567
+
568
+ .footer-links a:hover {
569
+ color: var(--accent-cyan);
570
+ }
571
+
572
+ .social-icon {
573
+ width: 1.25rem;
574
+ height: 1.25rem;
575
+ }
576
+
577
+ .copyright {
578
+ font-size: 0.8rem;
579
+ color: var(--text-muted);
580
+ font-family: 'JetBrains Mono', monospace;
581
+ }
582
+
583
+ /* Responsive */
584
+ @media (max-width: 900px) {
585
+ .feature-grid {
586
+ grid-template-columns: repeat(2, 1fr);
587
+ }
588
+
589
+ .behavior-row {
590
+ grid-template-columns: 1fr 1fr;
591
+ }
592
+
593
+ .behavior-cooldown {
594
+ display: none;
595
+ }
596
+ }
597
+
598
+ @media (max-width: 600px) {
599
+ h1 {
600
+ font-size: 2.5rem;
601
+ }
602
+
603
+ .container {
604
+ padding: 2rem 1.25rem;
605
+ }
606
+
607
+ .feature-grid {
608
+ grid-template-columns: 1fr;
609
+ }
610
+
611
+ .workflow {
612
+ flex-direction: column;
613
+ }
614
+
615
+ .workflow-arrow {
616
+ transform: rotate(90deg);
617
+ }
618
+
619
+ .install {
620
+ padding: 1.5rem;
621
+ }
622
+
623
+ .demo-box {
624
+ padding: 2rem;
625
+ min-width: unset;
626
+ }
627
+
628
+ .behavior-row {
629
+ grid-template-columns: 1fr;
630
+ gap: 0.25rem;
631
+ }
632
+
633
+ .behavior-trigger {
634
+ font-size: 0.8rem;
635
+ }
636
  }