Hugging Face's logo

Spaces:
exptech
/
g1-moves
Running

App Files Community
1
exptech commited on
Commit
372fb46
·
verified ·
1 Parent(s): 21739c9

Fix Pull Over pipeline availability and 154D viewer

Browse files
Files changed (1) hide show
  1. style.css +1907 -1945
style.css CHANGED
@@ -1,1945 +1,1907 @@
1
- /* ========================================
2
- G1 Moves — Showcase Site
3
- ======================================== */
4
-
5
- /* Reset */
6
- *, *::before, *::after {
7
- margin: 0;
8
- padding: 0;
9
- box-sizing: border-box;
10
- }
11
-
12
- :root {
13
- --bg-primary: #07070b;
14
- --bg-secondary: #0d0d14;
15
- --bg-card: #12121b;
16
- --bg-card-hover: #181824;
17
- --border: #1c1c2c;
18
- --border-hover: #28283e;
19
- --accent: #00d4ff;
20
- --accent-dim: rgba(0, 212, 255, 0.10);
21
- --accent-glow: rgba(0, 212, 255, 0.20);
22
- --warm: #ff6b35;
23
- --success: #22c55e;
24
- --text-primary: #e2e2ec;
25
- --text-secondary: #8585a0;
26
- --text-tertiary: #555570;
27
- --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
28
- --font-body: 'Manrope', system-ui, sans-serif;
29
- --font-mono: 'IBM Plex Mono', 'Menlo', monospace;
30
- --radius: 8px;
31
- --radius-lg: 12px;
32
- }
33
-
34
- html {
35
- scroll-behavior: smooth;
36
- }
37
-
38
- body {
39
- background: var(--bg-primary);
40
- color: var(--text-primary);
41
- font-family: var(--font-body);
42
- line-height: 1.6;
43
- -webkit-font-smoothing: antialiased;
44
- -moz-osx-font-smoothing: grayscale;
45
- overflow-x: hidden;
46
- }
47
-
48
- /* Tropical cloud background */
49
- .tropical-clouds {
50
- position: fixed;
51
- inset: 0;
52
- z-index: 0;
53
- pointer-events: none;
54
- overflow: hidden;
55
- }
56
-
57
- .tropical-clouds::before,
58
- .tropical-clouds::after {
59
- content: '';
60
- position: absolute;
61
- border-radius: 50%;
62
- filter: blur(90px);
63
- will-change: transform;
64
- }
65
-
66
- .tropical-clouds::before {
67
- width: 800px;
68
- height: 700px;
69
- background: radial-gradient(ellipse, #0ea5e9 0%, #06b6d4 30%, transparent 70%);
70
- top: -15%;
71
- left: -10%;
72
- opacity: 0.35;
73
- animation: cloud-wave-1 20s ease-in-out infinite;
74
- }
75
-
76
- .tropical-clouds::after {
77
- width: 700px;
78
- height: 600px;
79
- background: radial-gradient(ellipse, #22d3ee 0%, #67e8f9 25%, transparent 70%);
80
- top: 10%;
81
- right: -12%;
82
- opacity: 0.3;
83
- animation: cloud-wave-2 16s ease-in-out infinite;
84
- }
85
-
86
- .cloud-blob-1,
87
- .cloud-blob-2,
88
- .cloud-blob-3 {
89
- position: absolute;
90
- border-radius: 50%;
91
- filter: blur(90px);
92
- will-change: transform;
93
- pointer-events: none;
94
- }
95
-
96
- .cloud-blob-1 {
97
- width: 750px;
98
- height: 650px;
99
- background: radial-gradient(ellipse, #38bdf8 0%, #7dd3fc 30%, transparent 70%);
100
- bottom: 5%;
101
- left: 20%;
102
- opacity: 0.28;
103
- animation: cloud-wave-3 24s ease-in-out infinite;
104
- }
105
-
106
- .cloud-blob-2 {
107
- width: 600px;
108
- height: 550px;
109
- background: radial-gradient(ellipse, #a78bfa 0%, #c4b5fd 25%, transparent 70%);
110
- top: 40%;
111
- right: 5%;
112
- opacity: 0.22;
113
- animation: cloud-wave-4 18s ease-in-out infinite;
114
- }
115
-
116
- .cloud-blob-3 {
117
- width: 650px;
118
- height: 500px;
119
- background: radial-gradient(ellipse, #2dd4bf 0%, #5eead4 30%, transparent 70%);
120
- top: 60%;
121
- left: -5%;
122
- opacity: 0.25;
123
- animation: cloud-wave-5 22s ease-in-out infinite;
124
- }
125
-
126
- /* Fade clouds below the hero */
127
- .tropical-clouds-fade {
128
- position: fixed;
129
- inset: 0;
130
- z-index: 0;
131
- pointer-events: none;
132
- background: linear-gradient(
133
- to bottom,
134
- transparent 0%,
135
- transparent 25%,
136
- rgba(7, 7, 11, 0.4) 55%,
137
- rgba(7, 7, 11, 0.7) 100%
138
- );
139
- }
140
-
141
- @keyframes cloud-wave-1 {
142
- 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
143
- 20% { transform: translate(120px, 30px) scale(1.15) rotate(2deg); }
144
- 40% { transform: translate(60px, 80px) scale(0.9) rotate(-1deg); }
145
- 60% { transform: translate(-80px, 50px) scale(1.1) rotate(3deg); }
146
- 80% { transform: translate(-40px, -20px) scale(1.05) rotate(-2deg); }
147
- 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
148
- }
149
-
150
- @keyframes cloud-wave-2 {
151
- 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
152
- 20% { transform: translate(-100px, 60px) scale(1.12) rotate(-3deg); }
153
- 40% { transform: translate(-50px, -50px) scale(0.88) rotate(2deg); }
154
- 60% { transform: translate(70px, 30px) scale(1.18) rotate(-1deg); }
155
- 80% { transform: translate(30px, -30px) scale(0.95) rotate(3deg); }
156
- 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
157
- }
158
-
159
- @keyframes cloud-wave-3 {
160
- 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
161
- 20% { transform: translate(80px, -70px) scale(1.2) rotate(2deg); }
162
- 40% { transform: translate(-60px, -30px) scale(0.85) rotate(-3deg); }
163
- 60% { transform: translate(40px, 60px) scale(1.1) rotate(1deg); }
164
- 80% { transform: translate(-30px, 20px) scale(1.05) rotate(-2deg); }
165
- 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
166
- }
167
-
168
- @keyframes cloud-wave-4 {
169
- 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
170
- 20% { transform: translate(-90px, -40px) scale(1.15) rotate(-2deg); }
171
- 40% { transform: translate(60px, 50px) scale(0.9) rotate(3deg); }
172
- 60% { transform: translate(-30px, -60px) scale(1.12) rotate(-1deg); }
173
- 80% { transform: translate(50px, 30px) scale(0.95) rotate(2deg); }
174
- 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
175
- }
176
-
177
- @keyframes cloud-wave-5 {
178
- 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
179
- 20% { transform: translate(100px, 40px) scale(1.1) rotate(3deg); }
180
- 40% { transform: translate(-40px, 70px) scale(0.92) rotate(-2deg); }
181
- 60% { transform: translate(60px, -30px) scale(1.15) rotate(1deg); }
182
- 80% { transform: translate(-70px, 20px) scale(1.02) rotate(-3deg); }
183
- 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
184
- }
185
-
186
- ::selection {
187
- background: rgba(0, 212, 255, 0.20);
188
- color: var(--accent);
189
- }
190
-
191
- ::-webkit-scrollbar { width: 6px; }
192
- ::-webkit-scrollbar-track { background: var(--bg-primary); }
193
- ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
194
- ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
195
-
196
- :focus-visible {
197
- outline: 2px solid var(--accent);
198
- outline-offset: 2px;
199
- }
200
-
201
- a {
202
- color: var(--accent);
203
- text-decoration: none;
204
- transition: opacity 0.2s;
205
- }
206
- a:hover { opacity: 0.8; }
207
-
208
-
209
- /* ========================================
210
- Hero
211
- ======================================== */
212
-
213
- /* Ensure all content sits above clouds */
214
- header, section, footer {
215
- position: relative;
216
- z-index: 1;
217
- }
218
-
219
- .hero {
220
- position: relative;
221
- min-height: 55vh;
222
- display: flex;
223
- align-items: center;
224
- justify-content: center;
225
- overflow: hidden;
226
- border-bottom: 1px solid var(--border);
227
- }
228
-
229
- .hero-bg {
230
- position: absolute;
231
- inset: 0;
232
- background-image: radial-gradient(
233
- circle at 1px 1px,
234
- rgba(0, 212, 255, 0.07) 1px,
235
- transparent 0
236
- );
237
- background-size: 28px 28px;
238
- mask-image: radial-gradient(ellipse 80% 70% at center, black 10%, transparent 70%);
239
- -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 10%, transparent 70%);
240
- }
241
-
242
- .hero-scan {
243
- position: absolute;
244
- left: 0;
245
- width: 100%;
246
- height: 1px;
247
- background: linear-gradient(90deg, transparent 10%, var(--accent) 50%, transparent 90%);
248
- box-shadow: 0 0 24px var(--accent-glow), 0 0 48px var(--accent-dim);
249
- animation: scan 7s ease-in-out infinite;
250
- opacity: 0.5;
251
- }
252
-
253
- @keyframes scan {
254
- 0% { top: 12%; opacity: 0; }
255
- 8% { opacity: 0.5; }
256
- 50% { top: 88%; }
257
- 92% { opacity: 0.5; }
258
- 100% { top: 12%; opacity: 0; }
259
- }
260
-
261
- .hero-content {
262
- position: relative;
263
- z-index: 1;
264
- text-align: center;
265
- padding: 3.5rem 2rem 1.5rem;
266
- }
267
-
268
- .logo {
269
- display: block;
270
- margin: 0 auto 1.5rem;
271
- }
272
-
273
- .hero-title {
274
- font-family: var(--font-display);
275
- font-size: clamp(3.5rem, 9vw, 7.5rem);
276
- letter-spacing: 0.1em;
277
- line-height: 1;
278
- background: linear-gradient(180deg, var(--text-primary) 20%, var(--text-secondary) 100%);
279
- -webkit-background-clip: text;
280
- -webkit-text-fill-color: transparent;
281
- background-clip: text;
282
- }
283
-
284
- .hero-subtitle {
285
- font-size: 1.05rem;
286
- color: var(--text-secondary);
287
- margin-top: 0.6rem;
288
- font-weight: 400;
289
- letter-spacing: 0.01em;
290
- }
291
-
292
- .hero-video-wrap {
293
- margin-top: 1rem;
294
- width: 100%;
295
- max-width: 720px;
296
- border-radius: var(--radius);
297
- overflow: hidden;
298
- border: 1px solid var(--border);
299
- }
300
-
301
- .hero-video-wrap video {
302
- width: 100%;
303
- display: block;
304
- }
305
-
306
- .download-btn {
307
- display: inline-flex;
308
- align-items: center;
309
- gap: 0.6rem;
310
- margin-top: 0.75rem;
311
- padding: 0.9rem 2.2rem;
312
- background: var(--accent);
313
- color: #000;
314
- font-family: var(--font-mono);
315
- font-size: 0.95rem;
316
- font-weight: 700;
317
- text-decoration: none;
318
- text-transform: uppercase;
319
- letter-spacing: 0.08em;
320
- border-radius: 6px;
321
- border: 2px solid var(--accent);
322
- transition: background 0.2s, color 0.2s, box-shadow 0.2s;
323
- }
324
-
325
- .download-btn:hover {
326
- background: transparent;
327
- color: var(--accent);
328
- box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
329
- }
330
-
331
- .download-btn svg {
332
- flex-shrink: 0;
333
- }
334
-
335
-
336
- /* Pipeline strip */
337
- .pipeline-strip {
338
- display: flex;
339
- align-items: center;
340
- justify-content: center;
341
- margin-top: 1rem;
342
- margin-bottom: 0;
343
- }
344
-
345
- .pipeline-stage {
346
- display: flex;
347
- flex-direction: column;
348
- align-items: center;
349
- gap: 0.4rem;
350
- }
351
-
352
- .stage-dot {
353
- width: 34px;
354
- height: 34px;
355
- border-radius: 50%;
356
- background: var(--bg-card);
357
- border: 1.5px solid var(--accent);
358
- display: flex;
359
- align-items: center;
360
- justify-content: center;
361
- font-family: var(--font-mono);
362
- font-size: 0.75rem;
363
- font-weight: 600;
364
- color: var(--accent);
365
- transition: all 0.3s;
366
- }
367
-
368
- .pipeline-label {
369
- font-family: var(--font-mono);
370
- font-size: 0.6rem;
371
- letter-spacing: 0.14em;
372
- color: var(--text-tertiary);
373
- text-transform: uppercase;
374
- }
375
-
376
- .pipeline-connector {
377
- width: 44px;
378
- height: 1.5px;
379
- background: var(--border);
380
- position: relative;
381
- overflow: hidden;
382
- margin: 0 6px;
383
- margin-bottom: 1.2rem;
384
- }
385
-
386
- .pipeline-flow {
387
- position: absolute;
388
- top: 0;
389
- left: -40%;
390
- width: 40%;
391
- height: 100%;
392
- background: linear-gradient(90deg, transparent, var(--accent), transparent);
393
- animation: flow 2.5s ease-in-out infinite;
394
- }
395
-
396
- @keyframes flow {
397
- 0% { left: -40%; }
398
- 100% { left: 100%; }
399
- }
400
-
401
-
402
- /* ========================================
403
- Demo Video
404
- ======================================== */
405
-
406
- .demo-video {
407
- position: relative;
408
- width: 100%;
409
- max-width: 1080px;
410
- margin: 0 auto;
411
- padding: 0 1.5rem;
412
- }
413
-
414
- .demo-video video {
415
- width: 100%;
416
- border-radius: var(--radius-lg);
417
- display: block;
418
- }
419
-
420
- /* ========================================
421
- Stats Bar
422
- ======================================== */
423
-
424
- .stats-bar {
425
- display: flex;
426
- justify-content: center;
427
- gap: 3rem;
428
- padding: 1.75rem 2rem;
429
- border-bottom: 1px solid var(--border);
430
- background: var(--bg-secondary);
431
- }
432
-
433
- .stat { text-align: center; }
434
-
435
- .stat-value {
436
- font-family: var(--font-display);
437
- font-size: 2.2rem;
438
- color: var(--text-primary);
439
- letter-spacing: 0.04em;
440
- line-height: 1.1;
441
- }
442
-
443
- .stat-accent .stat-value {
444
- color: var(--accent);
445
- }
446
-
447
- .stat-label {
448
- font-size: 0.65rem;
449
- color: var(--text-tertiary);
450
- text-transform: uppercase;
451
- letter-spacing: 0.12em;
452
- font-family: var(--font-mono);
453
- margin-top: 0.15rem;
454
- }
455
-
456
-
457
- /* ========================================
458
- Controls
459
- ======================================== */
460
-
461
- .controls {
462
- display: flex;
463
- justify-content: space-between;
464
- align-items: center;
465
- padding: 1.25rem 2rem;
466
- max-width: 1440px;
467
- margin: 0 auto;
468
- flex-wrap: wrap;
469
- gap: 1rem;
470
- }
471
-
472
- .filter-group {
473
- display: flex;
474
- align-items: center;
475
- gap: 0.4rem;
476
- }
477
-
478
- .filter-label {
479
- font-family: var(--font-mono);
480
- font-size: 0.6rem;
481
- letter-spacing: 0.12em;
482
- color: var(--text-tertiary);
483
- text-transform: uppercase;
484
- margin-right: 0.4rem;
485
- }
486
-
487
- .category-btn {
488
- font-family: var(--font-mono);
489
- font-size: 0.7rem;
490
- letter-spacing: 0.04em;
491
- padding: 0.4rem 0.85rem;
492
- border: 1px solid var(--border);
493
- border-radius: 100px;
494
- background: transparent;
495
- color: var(--text-secondary);
496
- cursor: pointer;
497
- transition: all 0.2s;
498
- }
499
-
500
- .category-btn:hover {
501
- border-color: var(--border-hover);
502
- color: var(--text-primary);
503
- }
504
-
505
- .category-btn.active {
506
- background: var(--accent-dim);
507
- border-color: rgba(0, 212, 255, 0.35);
508
- color: var(--accent);
509
- }
510
-
511
-
512
- /* ========================================
513
- Gallery Grid
514
- ======================================== */
515
-
516
- .gallery {
517
- max-width: 1440px;
518
- margin: 0 auto;
519
- padding: 0.5rem 2rem 4rem;
520
- }
521
-
522
- .grid {
523
- display: grid;
524
- grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
525
- gap: 1.25rem;
526
- }
527
-
528
- .empty-state {
529
- display: none;
530
- text-align: center;
531
- padding: 4rem 2rem;
532
- color: var(--text-tertiary);
533
- font-family: var(--font-mono);
534
- font-size: 0.85rem;
535
- }
536
-
537
- .empty-state.visible { display: block; }
538
-
539
- .page-nav {
540
- display: flex;
541
- align-items: center;
542
- justify-content: center;
543
- gap: 1rem;
544
- margin: 2rem auto;
545
- }
546
- .page-nav-btn {
547
- display: flex;
548
- align-items: center;
549
- justify-content: center;
550
- width: 40px;
551
- height: 40px;
552
- background: var(--bg-card);
553
- color: var(--text-secondary);
554
- border: 1px solid var(--border);
555
- border-radius: var(--radius);
556
- cursor: pointer;
557
- transition: all 0.2s ease;
558
- }
559
- .page-nav-btn:hover:not(:disabled) {
560
- background: var(--bg-card-hover);
561
- border-color: var(--border-hover);
562
- color: var(--accent);
563
- }
564
- .page-nav-btn:disabled {
565
- opacity: 0.3;
566
- cursor: default;
567
- }
568
- .page-nav-counter {
569
- font-family: var(--font-mono);
570
- font-size: 0.85rem;
571
- color: var(--text-secondary);
572
- min-width: 4rem;
573
- text-align: center;
574
- }
575
-
576
-
577
- /* ========================================
578
- Clip Card
579
- ======================================== */
580
-
581
- .clip-card {
582
- background: var(--bg-card);
583
- border: 1px solid var(--border);
584
- border-radius: var(--radius-lg);
585
- overflow: hidden;
586
- transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s;
587
- opacity: 0;
588
- transform: translateY(16px);
589
- }
590
-
591
- .clip-card.visible {
592
- opacity: 1;
593
- transform: translateY(0);
594
- transition: opacity 0.45s ease, transform 0.45s ease,
595
- border-color 0.3s, box-shadow 0.3s;
596
- }
597
-
598
- .clip-card:hover {
599
- border-color: var(--border-hover);
600
- transform: translateY(-3px);
601
- box-shadow:
602
- 0 8px 32px rgba(0, 0, 0, 0.35),
603
- 0 0 0 1px rgba(0, 212, 255, 0.06);
604
- }
605
-
606
- .card-media {
607
- position: relative;
608
- aspect-ratio: 1;
609
- background: var(--bg-secondary);
610
- cursor: pointer;
611
- overflow: hidden;
612
- }
613
-
614
- .card-media img,
615
- .card-media video {
616
- width: 100%;
617
- height: 100%;
618
- object-fit: cover;
619
- display: block;
620
- transition: transform 0.4s ease;
621
- }
622
-
623
- .clip-card:hover .card-media img,
624
- .clip-card:hover .card-media video {
625
- transform: scale(1.04);
626
- }
627
-
628
- .card-media::after {
629
- content: '';
630
- position: absolute;
631
- bottom: 0;
632
- left: 0;
633
- right: 0;
634
- height: 35%;
635
- background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
636
- pointer-events: none;
637
- }
638
-
639
- /* Preview → WASM viewer swap */
640
- .card-preview {
641
- position: absolute;
642
- top: 0;
643
- left: 0;
644
- width: 100%;
645
- height: 100%;
646
- z-index: 2;
647
- transition: opacity 0.6s ease;
648
- }
649
- .card-preview-hidden {
650
- opacity: 0;
651
- pointer-events: none;
652
- }
653
- .card-viewer-hidden {
654
- opacity: 0;
655
- position: absolute;
656
- top: 0;
657
- left: 0;
658
- z-index: 1;
659
- }
660
- .card-viewer-ready {
661
- opacity: 1;
662
- transition: opacity 0.6s ease;
663
- z-index: 3;
664
- }
665
-
666
- .card-placeholder {
667
- display: flex;
668
- align-items: center;
669
- justify-content: center;
670
- height: 100%;
671
- color: var(--text-tertiary);
672
- font-size: 0.8rem;
673
- font-family: var(--font-mono);
674
- letter-spacing: 0.04em;
675
- }
676
-
677
- .card-duration {
678
- position: absolute;
679
- bottom: 8px;
680
- right: 8px;
681
- z-index: 1;
682
- background: rgba(0, 0, 0, 0.7);
683
- backdrop-filter: blur(4px);
684
- padding: 2px 7px;
685
- border-radius: 4px;
686
- font-family: var(--font-mono);
687
- font-size: 0.65rem;
688
- font-weight: 500;
689
- color: var(--text-primary);
690
- }
691
-
692
- .card-badge {
693
- position: absolute;
694
- top: 8px;
695
- left: 8px;
696
- z-index: 1;
697
- background: rgba(34, 197, 94, 0.85);
698
- padding: 2px 7px;
699
- border-radius: 4px;
700
- font-family: var(--font-mono);
701
- font-size: 0.55rem;
702
- font-weight: 600;
703
- color: #fff;
704
- letter-spacing: 0.08em;
705
- text-transform: uppercase;
706
- }
707
-
708
- .card-info {
709
- padding: 0.85rem 1rem 1rem;
710
- }
711
-
712
- .card-title {
713
- font-family: var(--font-body);
714
- font-size: 0.9rem;
715
- font-weight: 700;
716
- color: var(--text-primary);
717
- line-height: 1.3;
718
- }
719
-
720
- .card-meta {
721
- display: flex;
722
- align-items: center;
723
- gap: 0.5rem;
724
- margin-top: 0.3rem;
725
- margin-bottom: 0.7rem;
726
- font-size: 0.7rem;
727
- color: var(--text-tertiary);
728
- }
729
-
730
- .card-category {
731
- font-family: var(--font-mono);
732
- font-size: 0.55rem;
733
- text-transform: uppercase;
734
- letter-spacing: 0.1em;
735
- padding: 1px 5px;
736
- border: 1px solid var(--border);
737
- border-radius: 3px;
738
- color: var(--text-secondary);
739
- }
740
-
741
- .card-separator {
742
- width: 3px;
743
- height: 3px;
744
- border-radius: 50%;
745
- background: var(--text-tertiary);
746
- }
747
-
748
- .card-loading-status {
749
- font-family: var(--font-mono);
750
- font-size: 0.7rem;
751
- color: var(--accent);
752
- opacity: 0.7;
753
- margin-bottom: 0.25rem;
754
- animation: pulse-status 1.5s ease-in-out infinite;
755
- }
756
- @keyframes pulse-status {
757
- 0%, 100% { opacity: 0.5; }
758
- 50% { opacity: 1; }
759
- }
760
-
761
- .card-actions {
762
- display: flex;
763
- align-items: center;
764
- gap: 0.4rem;
765
- }
766
-
767
- .card-refresh-btn {
768
- width: 28px;
769
- height: 28px;
770
- border-radius: 4px;
771
- border: 1px solid var(--border);
772
- background: transparent;
773
- color: var(--text-secondary);
774
- cursor: pointer;
775
- transition: all 0.15s;
776
- display: flex;
777
- align-items: center;
778
- justify-content: center;
779
- padding: 0;
780
- }
781
-
782
- .card-refresh-btn:hover {
783
- border-color: var(--accent);
784
- color: var(--accent);
785
- }
786
-
787
- .card-refresh-btn svg {
788
- flex-shrink: 0;
789
- }
790
-
791
- .card-view-btn {
792
- display: flex;
793
- align-items: center;
794
- gap: 4px;
795
- margin-left: auto;
796
- padding: 4px 10px;
797
- border-radius: 4px;
798
- border: 1px solid rgba(34, 197, 94, 0.35);
799
- background: rgba(34, 197, 94, 0.1);
800
- color: var(--success);
801
- font-family: var(--font-mono);
802
- font-size: 0.6rem;
803
- font-weight: 600;
804
- text-decoration: none;
805
- cursor: pointer;
806
- transition: all 0.2s;
807
- white-space: nowrap;
808
- }
809
-
810
- .card-view-btn:hover {
811
- background: rgba(34, 197, 94, 0.2);
812
- border-color: rgba(34, 197, 94, 0.6);
813
- color: #4ade80;
814
- }
815
-
816
- .card-view-btn svg {
817
- flex-shrink: 0;
818
- }
819
-
820
-
821
- /* ========================================
822
- Modal
823
- ======================================== */
824
-
825
- .modal {
826
- position: fixed;
827
- inset: 0;
828
- z-index: 1000;
829
- background: rgba(0, 0, 0, 0.80);
830
- backdrop-filter: blur(6px);
831
- display: flex;
832
- align-items: center;
833
- justify-content: center;
834
- padding: 2rem;
835
- opacity: 0;
836
- visibility: hidden;
837
- transition: opacity 0.25s, visibility 0.25s;
838
- }
839
-
840
- .modal.open {
841
- opacity: 1;
842
- visibility: visible;
843
- }
844
-
845
- .modal-content {
846
- background: var(--bg-secondary);
847
- border: 1px solid var(--border);
848
- border-radius: var(--radius-lg);
849
- width: 100%;
850
- max-width: 960px;
851
- max-height: 85vh;
852
- overflow-y: auto;
853
- padding: 2rem;
854
- transform: scale(0.96) translateY(8px);
855
- transition: transform 0.3s ease;
856
- }
857
-
858
- .modal.open .modal-content {
859
- transform: scale(1) translateY(0);
860
- }
861
-
862
- .modal-header {
863
- display: flex;
864
- justify-content: space-between;
865
- align-items: flex-start;
866
- margin-bottom: 1.5rem;
867
- gap: 1rem;
868
- }
869
-
870
- .modal-title {
871
- font-family: var(--font-display);
872
- font-size: 2rem;
873
- letter-spacing: 0.06em;
874
- line-height: 1.1;
875
- }
876
-
877
- .modal-meta {
878
- font-family: var(--font-mono);
879
- font-size: 0.7rem;
880
- color: var(--text-tertiary);
881
- margin-top: 0.3rem;
882
- letter-spacing: 0.02em;
883
- }
884
-
885
- .modal-close {
886
- background: none;
887
- border: 1px solid var(--border);
888
- color: var(--text-secondary);
889
- width: 34px;
890
- height: 34px;
891
- border-radius: 50%;
892
- cursor: pointer;
893
- display: flex;
894
- align-items: center;
895
- justify-content: center;
896
- font-size: 1.3rem;
897
- line-height: 1;
898
- transition: all 0.2s;
899
- flex-shrink: 0;
900
- }
901
-
902
- .modal-close:hover {
903
- border-color: var(--text-secondary);
904
- color: var(--text-primary);
905
- }
906
-
907
- .modal-grid {
908
- display: grid;
909
- grid-template-columns: repeat(2, 1fr);
910
- gap: 0.75rem;
911
- }
912
-
913
- .modal-stage {
914
- border: 1px solid var(--border);
915
- border-radius: var(--radius);
916
- overflow: hidden;
917
- }
918
-
919
- .modal-stage.unavailable {
920
- opacity: 0.3;
921
- }
922
-
923
- .modal-stage-label {
924
- padding: 0.45rem 0.7rem;
925
- font-family: var(--font-mono);
926
- font-size: 0.6rem;
927
- letter-spacing: 0.12em;
928
- text-transform: uppercase;
929
- color: var(--text-tertiary);
930
- background: var(--bg-card);
931
- border-bottom: 1px solid var(--border);
932
- }
933
-
934
- .modal-stage img,
935
- .modal-stage video {
936
- width: 100%;
937
- aspect-ratio: 1;
938
- object-fit: cover;
939
- display: block;
940
- }
941
-
942
- .modal-placeholder {
943
- aspect-ratio: 1;
944
- display: flex;
945
- align-items: center;
946
- justify-content: center;
947
- color: var(--text-tertiary);
948
- font-family: var(--font-mono);
949
- font-size: 0.75rem;
950
- background: var(--bg-primary);
951
- }
952
-
953
-
954
- /* ========================================
955
- Launch Video
956
- ======================================== */
957
-
958
- .launch-video {
959
- padding: 4rem 1.5rem 2rem;
960
- max-width: 960px;
961
- margin: 0 auto;
962
- }
963
-
964
- .launch-video h2 {
965
- font-family: var(--font-display);
966
- font-size: 2.4rem;
967
- letter-spacing: 0.08em;
968
- color: var(--text-primary);
969
- margin-bottom: 1.5rem;
970
- text-align: center;
971
- }
972
-
973
- .launch-video-wrap {
974
- border-radius: var(--radius-lg);
975
- overflow: hidden;
976
- border: 1px solid var(--border);
977
- }
978
-
979
- .launch-video-wrap video {
980
- width: 100%;
981
- display: block;
982
- }
983
-
984
- .showcase-label {
985
- font-family: var(--font-display);
986
- font-size: 1.6rem;
987
- letter-spacing: 0.08em;
988
- color: var(--text-secondary);
989
- margin: 2rem 0 1rem;
990
- text-align: center;
991
- }
992
-
993
- /* ========================================
994
- About
995
- ======================================== */
996
-
997
- .about {
998
- border-top: 1px solid var(--border);
999
- background: var(--bg-secondary);
1000
- }
1001
-
1002
- .about-inner {
1003
- max-width: 1440px;
1004
- margin: 0 auto;
1005
- padding: 4rem 2rem;
1006
- }
1007
-
1008
- .about h2,
1009
- .credits h2,
1010
- .equipment h2 {
1011
- font-family: var(--font-display);
1012
- font-size: 2.4rem;
1013
- letter-spacing: 0.08em;
1014
- margin-bottom: 2rem;
1015
- }
1016
-
1017
- .about-intro {
1018
- color: var(--text-secondary);
1019
- font-size: 0.95rem;
1020
- line-height: 1.7;
1021
- max-width: 720px;
1022
- margin-bottom: 2.5rem;
1023
- }
1024
-
1025
- .about-intro a {
1026
- color: var(--accent);
1027
- text-decoration: none;
1028
- }
1029
-
1030
- .about-intro a:hover {
1031
- text-decoration: underline;
1032
- }
1033
-
1034
- .about-process {
1035
- display: flex;
1036
- align-items: flex-start;
1037
- gap: 0;
1038
- }
1039
-
1040
- .process-step {
1041
- flex: 1;
1042
- padding: 1.25rem;
1043
- background: var(--bg-card);
1044
- border: 1px solid var(--border);
1045
- border-radius: var(--radius);
1046
- }
1047
-
1048
- .process-num {
1049
- font-family: var(--font-mono);
1050
- font-size: 0.65rem;
1051
- font-weight: 600;
1052
- color: var(--accent);
1053
- padding: 0.2rem 0.5rem;
1054
- border: 1px solid rgba(0, 212, 255, 0.25);
1055
- border-radius: 4px;
1056
- display: inline-block;
1057
- margin-bottom: 0.6rem;
1058
- }
1059
-
1060
- .process-step h3 {
1061
- font-family: var(--font-mono);
1062
- font-size: 0.8rem;
1063
- text-transform: uppercase;
1064
- letter-spacing: 0.1em;
1065
- margin-bottom: 0.5rem;
1066
- }
1067
-
1068
- .process-step p {
1069
- font-size: 0.78rem;
1070
- color: var(--text-tertiary);
1071
- line-height: 1.6;
1072
- }
1073
-
1074
- .process-step a {
1075
- color: var(--accent);
1076
- text-decoration: none;
1077
- }
1078
-
1079
- .process-step a:hover {
1080
- text-decoration: underline;
1081
- }
1082
-
1083
- .process-connector {
1084
- display: flex;
1085
- align-items: center;
1086
- padding: 0 0.5rem;
1087
- flex-shrink: 0;
1088
- align-self: center;
1089
- }
1090
-
1091
- .process-arrow {
1092
- width: 24px;
1093
- height: 2px;
1094
- background: var(--border);
1095
- position: relative;
1096
- }
1097
-
1098
- .process-arrow::after {
1099
- content: '';
1100
- position: absolute;
1101
- right: 0;
1102
- top: -3px;
1103
- border: solid var(--text-tertiary);
1104
- border-width: 0 2px 2px 0;
1105
- padding: 3px;
1106
- transform: rotate(-45deg);
1107
- }
1108
-
1109
-
1110
- /* ========================================
1111
- Deploy
1112
- ======================================== */
1113
-
1114
- .deploy {
1115
- border-top: 1px solid var(--border);
1116
- background: var(--bg-secondary);
1117
- }
1118
-
1119
- .deploy h2 {
1120
- font-family: var(--font-display);
1121
- font-size: 2.4rem;
1122
- letter-spacing: 0.08em;
1123
- margin-bottom: 0.75rem;
1124
- }
1125
-
1126
- .deploy-intro {
1127
- color: var(--text-secondary);
1128
- font-size: 0.9rem;
1129
- line-height: 1.7;
1130
- margin-bottom: 2rem;
1131
- max-width: 720px;
1132
- }
1133
-
1134
- .deploy-options {
1135
- display: grid;
1136
- grid-template-columns: repeat(3, 1fr);
1137
- gap: 1.5rem;
1138
- }
1139
-
1140
- a.deploy-option, .deploy-option {
1141
- background: var(--bg-card);
1142
- border: 1px solid var(--border);
1143
- border-radius: var(--radius);
1144
- padding: 1.5rem;
1145
- transition: border-color 0.2s;
1146
- text-decoration: none;
1147
- color: inherit;
1148
- display: block;
1149
- cursor: pointer;
1150
- }
1151
-
1152
- a.deploy-option:hover, .deploy-option:hover {
1153
- border-color: var(--accent);
1154
- }
1155
-
1156
- .deploy-num {
1157
- font-family: var(--font-mono);
1158
- font-size: 0.7rem;
1159
- font-weight: 600;
1160
- color: var(--accent);
1161
- padding: 0.25rem 0.5rem;
1162
- border: 1px solid rgba(0, 212, 255, 0.25);
1163
- border-radius: 4px;
1164
- display: inline-block;
1165
- margin-bottom: 0.75rem;
1166
- }
1167
-
1168
- .deploy-option h3 {
1169
- font-size: 1rem;
1170
- font-weight: 600;
1171
- margin-bottom: 0.5rem;
1172
- }
1173
-
1174
- .deploy-option p {
1175
- color: var(--text-secondary);
1176
- font-size: 0.8rem;
1177
- line-height: 1.6;
1178
- margin-bottom: 0.75rem;
1179
- }
1180
-
1181
-
1182
- .deploy-footer {
1183
- color: var(--text-tertiary);
1184
- font-size: 0.8rem;
1185
- margin-top: 1.5rem;
1186
- }
1187
-
1188
- .deploy-footer a {
1189
- color: var(--accent);
1190
- text-decoration: none;
1191
- }
1192
-
1193
- @media (max-width: 900px) {
1194
- .deploy-options {
1195
- grid-template-columns: 1fr;
1196
- }
1197
- }
1198
-
1199
-
1200
- /* ========================================
1201
- Credits
1202
- ======================================== */
1203
-
1204
- .credits {
1205
- max-width: 1440px;
1206
- margin: 0 auto;
1207
- padding: 4rem 2rem;
1208
- border-top: 1px solid var(--border);
1209
- }
1210
-
1211
- .credits-grid {
1212
- display: grid;
1213
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
1214
- gap: 1rem;
1215
- }
1216
-
1217
- a.credit-card, .credit-card {
1218
- padding: 1.25rem;
1219
- background: var(--bg-card);
1220
- border: 1px solid var(--border);
1221
- border-radius: var(--radius);
1222
- transition: border-color 0.2s;
1223
- text-decoration: none;
1224
- color: inherit;
1225
- display: flex;
1226
- flex-direction: column;
1227
- align-items: center;
1228
- text-align: center;
1229
- cursor: pointer;
1230
- }
1231
-
1232
- .credit-photo {
1233
- width: 80px;
1234
- height: 80px;
1235
- border-radius: 50%;
1236
- object-fit: cover;
1237
- margin-bottom: 0.75rem;
1238
- border: 2px solid var(--border);
1239
- }
1240
-
1241
- .credit-initials {
1242
- display: flex;
1243
- align-items: center;
1244
- justify-content: center;
1245
- background: var(--border);
1246
- color: var(--text-secondary);
1247
- font-family: var(--font-mono);
1248
- font-size: 1.1rem;
1249
- font-weight: 600;
1250
- letter-spacing: 0.05em;
1251
- }
1252
-
1253
- a.credit-card:hover, .credit-card:hover {
1254
- border-color: var(--accent);
1255
- }
1256
-
1257
- .credit-role {
1258
- font-family: var(--font-mono);
1259
- font-size: 0.55rem;
1260
- text-transform: uppercase;
1261
- letter-spacing: 0.15em;
1262
- color: var(--accent);
1263
- margin-bottom: 0.4rem;
1264
- }
1265
-
1266
- .credit-name {
1267
- font-weight: 700;
1268
- font-size: 1rem;
1269
- color: var(--text-primary);
1270
- text-decoration: none;
1271
- display: block;
1272
- }
1273
-
1274
- .credit-name:hover {
1275
- color: var(--accent);
1276
- opacity: 1;
1277
- }
1278
-
1279
-
1280
- /* ========================================
1281
- About Company
1282
- ======================================== */
1283
-
1284
- .about-company {
1285
- max-width: 1440px;
1286
- margin: 0 auto;
1287
- padding: 4rem 2rem;
1288
- border-top: 1px solid var(--border);
1289
- }
1290
-
1291
- .about-company-inner {
1292
- max-width: 800px;
1293
- margin: 0 auto;
1294
- text-align: center;
1295
- }
1296
-
1297
- .about-company-logo {
1298
- opacity: 0.9;
1299
- margin-bottom: 1rem;
1300
- }
1301
-
1302
- .about-company-tagline {
1303
- font-family: var(--font-mono);
1304
- font-size: 0.8rem;
1305
- text-transform: uppercase;
1306
- letter-spacing: 0.15em;
1307
- color: var(--accent);
1308
- margin-bottom: 1.25rem;
1309
- }
1310
-
1311
- .about-company-desc {
1312
- color: var(--text-secondary);
1313
- font-size: 0.9rem;
1314
- line-height: 1.7;
1315
- margin-bottom: 2rem;
1316
- }
1317
-
1318
- .about-company-services {
1319
- display: grid;
1320
- grid-template-columns: repeat(3, 1fr);
1321
- gap: 1.5rem;
1322
- margin-bottom: 2rem;
1323
- }
1324
-
1325
- .about-service {
1326
- padding: 1.25rem;
1327
- background: var(--bg-card);
1328
- border: 1px solid var(--border);
1329
- border-radius: var(--radius);
1330
- text-align: left;
1331
- }
1332
-
1333
- .about-service h4 {
1334
- font-size: 0.85rem;
1335
- font-weight: 700;
1336
- margin-bottom: 0.4rem;
1337
- color: var(--text-primary);
1338
- }
1339
-
1340
- .about-service p {
1341
- font-size: 0.78rem;
1342
- color: var(--text-secondary);
1343
- line-height: 1.5;
1344
- }
1345
-
1346
- .about-company-cta {
1347
- display: inline-block;
1348
- padding: 0.6rem 1.8rem;
1349
- font-family: var(--font-mono);
1350
- font-size: 0.8rem;
1351
- font-weight: 600;
1352
- text-transform: uppercase;
1353
- letter-spacing: 0.08em;
1354
- color: var(--accent);
1355
- border: 1px solid var(--accent);
1356
- border-radius: 6px;
1357
- text-decoration: none;
1358
- transition: background 0.2s, color 0.2s;
1359
- }
1360
-
1361
- .about-company-cta:hover {
1362
- background: var(--accent);
1363
- color: #000;
1364
- }
1365
-
1366
- .video2robot-showcase {
1367
- padding: 4rem 2rem 2rem;
1368
- position: relative;
1369
- z-index: 1;
1370
- text-align: center;
1371
- }
1372
-
1373
- .video2robot-showcase-inner {
1374
- max-width: 960px;
1375
- margin: 0 auto;
1376
- }
1377
-
1378
- .video2robot-showcase h2 {
1379
- font-family: var(--font-display);
1380
- font-size: clamp(2.5rem, 6vw, 5rem);
1381
- letter-spacing: 0.08em;
1382
- margin-bottom: 0.5rem;
1383
- }
1384
-
1385
- .video2robot-showcase-intro {
1386
- color: var(--text-secondary);
1387
- margin-bottom: 1.25rem;
1388
- }
1389
-
1390
- .video2robot-video-wrap {
1391
- width: 100%;
1392
- max-width: 900px;
1393
- margin: 0 auto;
1394
- border-radius: var(--radius);
1395
- overflow: hidden;
1396
- border: 1px solid var(--border);
1397
- background: rgba(255, 255, 255, 0.03);
1398
- }
1399
-
1400
- .video2robot-video-wrap video {
1401
- width: 100%;
1402
- display: block;
1403
- }
1404
-
1405
- .threejs-scene-btn {
1406
- display: inline-flex;
1407
- align-items: center;
1408
- justify-content: center;
1409
- margin-top: 1rem;
1410
- padding: 0.85rem 1.6rem;
1411
- font-family: var(--font-mono);
1412
- font-size: 0.85rem;
1413
- font-weight: 700;
1414
- letter-spacing: 0.08em;
1415
- text-transform: uppercase;
1416
- text-decoration: none;
1417
- color: var(--accent);
1418
- border: 1px solid var(--accent);
1419
- border-radius: 999px;
1420
- background: rgba(0, 212, 255, 0.06);
1421
- transition: background 0.2s, color 0.2s, box-shadow 0.2s;
1422
- }
1423
-
1424
- .threejs-scene-btn:hover {
1425
- background: var(--accent);
1426
- color: #000;
1427
- box-shadow: 0 0 24px rgba(0, 212, 255, 0.28);
1428
- }
1429
-
1430
- /* ========================================
1431
- Footer
1432
- ======================================== */
1433
-
1434
- .qr-section {
1435
- display: flex;
1436
- justify-content: center;
1437
- padding: 4rem 2rem 2rem;
1438
- }
1439
-
1440
- .qr-code {
1441
- width: 280px;
1442
- height: 280px;
1443
- border-radius: var(--radius);
1444
- border: 1px solid var(--border);
1445
- filter: invert(1);
1446
- }
1447
-
1448
- .site-footer {
1449
- border-top: 1px solid var(--border);
1450
- padding: 3rem 2rem;
1451
- text-align: center;
1452
- position: relative;
1453
- z-index: 1;
1454
- }
1455
-
1456
- .footer-inner {
1457
- max-width: 600px;
1458
- margin: 0 auto;
1459
- }
1460
-
1461
- .footer-logo {
1462
- opacity: 0.7;
1463
- margin-bottom: 1rem;
1464
- }
1465
-
1466
- .footer-tagline {
1467
- font-size: 0.78rem;
1468
- color: var(--text-secondary);
1469
- margin-bottom: 0.5rem;
1470
- }
1471
-
1472
- .footer-tagline a {
1473
- color: var(--accent);
1474
- text-decoration: none;
1475
- }
1476
-
1477
- .footer-tagline a:hover {
1478
- text-decoration: underline;
1479
- }
1480
-
1481
- .footer-claude {
1482
- font-size: 0.7rem;
1483
- color: var(--text-dim);
1484
- margin-top: 0.25rem;
1485
- }
1486
-
1487
- .footer-claude a {
1488
- color: var(--text-secondary);
1489
- text-decoration: none;
1490
- }
1491
-
1492
- .footer-claude a:hover {
1493
- color: var(--accent);
1494
- text-decoration: underline;
1495
- }
1496
-
1497
- .footer-copy {
1498
- font-size: 0.7rem;
1499
- color: var(--text-tertiary);
1500
- font-family: var(--font-mono);
1501
- }
1502
-
1503
- @media (max-width: 768px) {
1504
- .about-company-services {
1505
- grid-template-columns: 1fr;
1506
- }
1507
- }
1508
-
1509
- /* ========================================
1510
- Equipment
1511
- ======================================== */
1512
-
1513
- .equipment {
1514
- max-width: 1440px;
1515
- margin: 0 auto;
1516
- padding: 4rem 2rem;
1517
- border-top: 1px solid var(--border);
1518
- }
1519
-
1520
- .equipment-sections {
1521
- display: grid;
1522
- grid-template-columns: repeat(4, 1fr);
1523
- gap: 2rem;
1524
- }
1525
-
1526
- a.equip-block, .equip-block {
1527
- text-decoration: none;
1528
- color: inherit;
1529
- display: block;
1530
- cursor: pointer;
1531
- transition: border-color 0.2s;
1532
- border: 1px solid transparent;
1533
- border-radius: var(--radius);
1534
- padding: 1rem;
1535
- }
1536
-
1537
- a.equip-block:hover, .equip-block:hover {
1538
- border-color: var(--accent);
1539
- }
1540
-
1541
- .equip-block h3 {
1542
- font-family: var(--font-mono);
1543
- font-size: 0.7rem;
1544
- text-transform: uppercase;
1545
- letter-spacing: 0.12em;
1546
- color: var(--text-tertiary);
1547
- margin-bottom: 0.5rem;
1548
- }
1549
-
1550
- .equip-photo { width: 100%; height: 140px; object-fit: contain; border-radius: var(--radius); margin-bottom: 0.75rem;}
1551
- .equip-name {
1552
- font-size: 0.95rem;
1553
- font-weight: 700;
1554
- margin-bottom: 0.75rem;
1555
- color: var(--accent);
1556
- }
1557
-
1558
- .equipment-grid {
1559
- display: flex;
1560
- flex-direction: column;
1561
- gap: 0.5rem;
1562
- }
1563
-
1564
- .equipment-item {
1565
- display: flex;
1566
- justify-content: space-between;
1567
- align-items: center;
1568
- padding: 0.6rem 0.85rem;
1569
- background: var(--bg-card);
1570
- border: 1px solid var(--border);
1571
- border-radius: var(--radius);
1572
- }
1573
-
1574
- .explore-hardware-btn {
1575
- display: flex;
1576
- align-items: center;
1577
- justify-content: center;
1578
- gap: 8px;
1579
- margin: 1.5rem auto 0;
1580
- padding: 0.6rem 1.5rem;
1581
- background: var(--accent-dim);
1582
- border: 1px solid var(--accent);
1583
- border-radius: var(--radius);
1584
- color: var(--accent);
1585
- font-family: var(--font-mono);
1586
- font-size: 0.85rem;
1587
- text-decoration: none;
1588
- transition: all 0.2s;
1589
- width: fit-content;
1590
- }
1591
-
1592
- .explore-hardware-btn:hover {
1593
- background: rgba(0, 212, 255, 0.20);
1594
- box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
1595
- }
1596
-
1597
- .equipment-label {
1598
- font-family: var(--font-mono);
1599
- font-size: 0.65rem;
1600
- color: var(--text-tertiary);
1601
- letter-spacing: 0.05em;
1602
- }
1603
-
1604
- .equipment-value {
1605
- font-size: 0.8rem;
1606
- font-weight: 600;
1607
- }
1608
-
1609
-
1610
-
1611
- /* ========================================
1612
- Disclaimer
1613
- ======================================== */
1614
-
1615
- /* ========================================
1616
- Citation
1617
- ======================================== */
1618
-
1619
- .citation {
1620
- padding: 4rem 2rem;
1621
- background: var(--bg-secondary);
1622
- border-top: 1px solid var(--border);
1623
- }
1624
-
1625
- .citation-inner {
1626
- max-width: 800px;
1627
- margin: 0 auto;
1628
- }
1629
-
1630
- .citation h2 {
1631
- font-family: var(--font-display);
1632
- font-size: 2rem;
1633
- letter-spacing: 0.08em;
1634
- color: var(--text-primary);
1635
- text-align: center;
1636
- margin-bottom: 0.75rem;
1637
- }
1638
-
1639
- .citation-intro {
1640
- text-align: center;
1641
- color: var(--text-secondary);
1642
- font-size: 0.95rem;
1643
- margin-bottom: 1.5rem;
1644
- }
1645
-
1646
- .citation-block {
1647
- position: relative;
1648
- background: var(--bg-primary);
1649
- border: 1px solid var(--border);
1650
- border-radius: var(--radius-lg);
1651
- padding: 1.5rem;
1652
- overflow-x: auto;
1653
- }
1654
-
1655
- .citation-block pre {
1656
- margin: 0;
1657
- font-family: var(--font-mono);
1658
- font-size: 0.82rem;
1659
- line-height: 1.65;
1660
- color: var(--text-secondary);
1661
- white-space: pre;
1662
- }
1663
-
1664
- .citation-block code {
1665
- font-family: inherit;
1666
- }
1667
-
1668
- .whitepaper-btn {
1669
- display: flex;
1670
- align-items: center;
1671
- justify-content: center;
1672
- gap: 8px;
1673
- margin: 0 auto 1.5rem;
1674
- padding: 10px 24px;
1675
- background: var(--accent-dim);
1676
- border: 1px solid var(--accent);
1677
- border-radius: var(--radius);
1678
- color: var(--accent);
1679
- font-family: var(--font-mono);
1680
- font-size: 0.85rem;
1681
- font-weight: 500;
1682
- text-decoration: none;
1683
- transition: all 0.2s;
1684
- width: fit-content;
1685
- }
1686
-
1687
- .whitepaper-btn:hover {
1688
- background: rgba(0, 212, 255, 0.20);
1689
- box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
1690
- }
1691
-
1692
- .citation-copy {
1693
- position: absolute;
1694
- top: 0.75rem;
1695
- right: 0.75rem;
1696
- background: var(--bg-card);
1697
- border: 1px solid var(--border);
1698
- border-radius: 6px;
1699
- padding: 6px 8px;
1700
- cursor: pointer;
1701
- color: var(--text-secondary);
1702
- transition: all 0.2s;
1703
- display: flex;
1704
- align-items: center;
1705
- gap: 4px;
1706
- font-family: var(--font-mono);
1707
- font-size: 0.7rem;
1708
- }
1709
-
1710
- .citation-copy:hover {
1711
- color: var(--accent);
1712
- border-color: var(--accent);
1713
- background: var(--accent-dim);
1714
- }
1715
-
1716
- .citation-copy.copied {
1717
- color: var(--success);
1718
- border-color: var(--success);
1719
- }
1720
-
1721
-
1722
- /* ========================================
1723
- Disclaimer
1724
- ======================================== */
1725
-
1726
- .disclaimer {
1727
- border-top: 1px solid var(--border);
1728
- background: var(--bg-primary);
1729
- }
1730
-
1731
- .disclaimer-inner {
1732
- max-width: 1440px;
1733
- margin: 0 auto;
1734
- padding: 3rem 2rem;
1735
- }
1736
-
1737
- .disclaimer h3 {
1738
- font-family: var(--font-mono);
1739
- font-size: 0.7rem;
1740
- text-transform: uppercase;
1741
- letter-spacing: 0.12em;
1742
- color: var(--warm);
1743
- margin-bottom: 1rem;
1744
- }
1745
-
1746
- .disclaimer p {
1747
- font-size: 0.72rem;
1748
- color: var(--text-tertiary);
1749
- line-height: 1.7;
1750
- margin-bottom: 0.75rem;
1751
- }
1752
-
1753
- .disclaimer p:last-child {
1754
- margin-bottom: 0;
1755
- }
1756
-
1757
- .disclaimer p strong {
1758
- color: var(--text-secondary);
1759
- }
1760
-
1761
-
1762
- /* ========================================
1763
- Footer
1764
- ======================================== */
1765
-
1766
- footer {
1767
- padding: 2.5rem 2rem;
1768
- border-top: 1px solid var(--border);
1769
- text-align: center;
1770
- }
1771
-
1772
- .footer-links {
1773
- display: flex;
1774
- justify-content: center;
1775
- gap: 2rem;
1776
- margin-bottom: 0.75rem;
1777
- font-family: var(--font-mono);
1778
- font-size: 0.75rem;
1779
- letter-spacing: 0.04em;
1780
- }
1781
-
1782
- .footer-copy {
1783
- font-size: 0.7rem;
1784
- color: var(--text-tertiary);
1785
- }
1786
-
1787
-
1788
- /* ========================================
1789
- Scroll Reveal
1790
- ======================================== */
1791
-
1792
- .reveal {
1793
- opacity: 0;
1794
- transform: translateY(18px);
1795
- transition: opacity 0.6s ease, transform 0.6s ease;
1796
- }
1797
-
1798
- .reveal.revealed {
1799
- opacity: 1;
1800
- transform: none;
1801
- }
1802
-
1803
-
1804
- /* ========================================
1805
- Responsive
1806
- ======================================== */
1807
-
1808
- @media (max-width: 1024px) {
1809
- .about-process {
1810
- flex-wrap: wrap;
1811
- gap: 1rem;
1812
- }
1813
-
1814
- .process-step {
1815
- flex: 1 1 calc(50% - 2rem);
1816
- min-width: 200px;
1817
- }
1818
-
1819
- .process-connector {
1820
- display: none;
1821
- }
1822
-
1823
- .equipment-sections {
1824
- grid-template-columns: 1fr 1fr;
1825
- gap: 2rem;
1826
- }
1827
- }
1828
-
1829
- @media (max-width: 600px) {
1830
- .equipment-sections {
1831
- grid-template-columns: 1fr;
1832
- }
1833
- }
1834
-
1835
- @media (max-width: 768px) {
1836
- .hero { min-height: 45vh; }
1837
-
1838
- .hero-title { font-size: 3.2rem; }
1839
-
1840
- .stats-bar {
1841
- flex-wrap: wrap;
1842
- gap: 1.5rem 2.5rem;
1843
- padding: 1.5rem;
1844
- }
1845
-
1846
- .controls {
1847
- flex-direction: column;
1848
- align-items: flex-start;
1849
- }
1850
-
1851
- .grid {
1852
- grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
1853
- }
1854
-
1855
- .pipeline-strip { transform: scale(0.85); }
1856
-
1857
- .modal-grid { grid-template-columns: 1fr; }
1858
-
1859
- .modal-content { padding: 1.5rem; }
1860
- }
1861
-
1862
- @media (max-width: 480px) {
1863
- .hero-content { padding: 2.5rem 1.5rem 3rem; }
1864
-
1865
- .hero-title { font-size: 2.8rem; }
1866
-
1867
- .grid { grid-template-columns: 1fr; gap: 0.75rem; }
1868
-
1869
- .card-media { aspect-ratio: 4/3; }
1870
-
1871
- .card-info { padding: 0.6rem 0.75rem 0.75rem; }
1872
- .card-title { font-size: 0.85rem; }
1873
- .card-meta { font-size: 0.65rem; }
1874
- .pipeline-strip { transform: scale(0.7); }
1875
-
1876
- .stats-bar { gap: 1rem 2rem; }
1877
- .stat-value { font-size: 1.6rem; }
1878
-
1879
- .about-inner,
1880
- .credits,
1881
- .equipment { padding: 3rem 1.5rem; }
1882
- }
1883
-
1884
-
1885
- /* ========================================
1886
- Carousel (mobile)
1887
- ======================================== */
1888
-
1889
- .carousel {
1890
- display: flex;
1891
- flex-direction: column;
1892
- gap: 0.75rem;
1893
- }
1894
-
1895
- .carousel-counter {
1896
- text-align: center;
1897
- font-family: var(--font-mono);
1898
- font-size: 0.75rem;
1899
- color: var(--text-tertiary);
1900
- letter-spacing: 0.08em;
1901
- }
1902
-
1903
- .carousel-card-wrap {
1904
- min-height: 200px;
1905
- }
1906
-
1907
- .carousel-card-wrap .clip-card {
1908
- opacity: 1;
1909
- transform: none;
1910
- }
1911
-
1912
- .carousel-nav {
1913
- display: flex;
1914
- justify-content: center;
1915
- gap: 1.5rem;
1916
- padding: 0.25rem 0;
1917
- }
1918
-
1919
- .carousel-btn {
1920
- width: 56px;
1921
- height: 56px;
1922
- border-radius: 50%;
1923
- border: 1.5px solid var(--border-hover);
1924
- background: var(--bg-card);
1925
- color: var(--text-primary);
1926
- font-size: 2rem;
1927
- line-height: 1;
1928
- cursor: pointer;
1929
- display: flex;
1930
- align-items: center;
1931
- justify-content: center;
1932
- transition: border-color 0.2s, background 0.2s;
1933
- -webkit-tap-highlight-color: transparent;
1934
- }
1935
-
1936
- .carousel-btn:not(:disabled):active {
1937
- background: var(--accent-dim);
1938
- border-color: rgba(0, 212, 255, 0.35);
1939
- color: var(--accent);
1940
- }
1941
-
1942
- .carousel-btn:disabled {
1943
- opacity: 0.2;
1944
- cursor: default;
1945
- }
 
1
+ /* ========================================
2
+ G1 Moves — Showcase Site
3
+ ======================================== */
4
+
5
+ /* Reset */
6
+ *, *::before, *::after {
7
+ margin: 0;
8
+ padding: 0;
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ :root {
13
+ --bg-primary: #07070b;
14
+ --bg-secondary: #0d0d14;
15
+ --bg-card: #12121b;
16
+ --bg-card-hover: #181824;
17
+ --border: #1c1c2c;
18
+ --border-hover: #28283e;
19
+ --accent: #00d4ff;
20
+ --accent-dim: rgba(0, 212, 255, 0.10);
21
+ --accent-glow: rgba(0, 212, 255, 0.20);
22
+ --warm: #ff6b35;
23
+ --success: #22c55e;
24
+ --text-primary: #e2e2ec;
25
+ --text-secondary: #8585a0;
26
+ --text-tertiary: #555570;
27
+ --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
28
+ --font-body: 'Manrope', system-ui, sans-serif;
29
+ --font-mono: 'IBM Plex Mono', 'Menlo', monospace;
30
+ --radius: 8px;
31
+ --radius-lg: 12px;
32
+ }
33
+
34
+ html {
35
+ scroll-behavior: smooth;
36
+ }
37
+
38
+ body {
39
+ background: var(--bg-primary);
40
+ color: var(--text-primary);
41
+ font-family: var(--font-body);
42
+ line-height: 1.6;
43
+ -webkit-font-smoothing: antialiased;
44
+ -moz-osx-font-smoothing: grayscale;
45
+ overflow-x: hidden;
46
+ }
47
+
48
+ /* Tropical cloud background */
49
+ .tropical-clouds {
50
+ position: fixed;
51
+ inset: 0;
52
+ z-index: 0;
53
+ pointer-events: none;
54
+ overflow: hidden;
55
+ }
56
+
57
+ .tropical-clouds::before,
58
+ .tropical-clouds::after {
59
+ content: '';
60
+ position: absolute;
61
+ border-radius: 50%;
62
+ filter: blur(90px);
63
+ will-change: transform;
64
+ }
65
+
66
+ .tropical-clouds::before {
67
+ width: 800px;
68
+ height: 700px;
69
+ background: radial-gradient(ellipse, #0ea5e9 0%, #06b6d4 30%, transparent 70%);
70
+ top: -15%;
71
+ left: -10%;
72
+ opacity: 0.35;
73
+ animation: cloud-wave-1 20s ease-in-out infinite;
74
+ }
75
+
76
+ .tropical-clouds::after {
77
+ width: 700px;
78
+ height: 600px;
79
+ background: radial-gradient(ellipse, #22d3ee 0%, #67e8f9 25%, transparent 70%);
80
+ top: 10%;
81
+ right: -12%;
82
+ opacity: 0.3;
83
+ animation: cloud-wave-2 16s ease-in-out infinite;
84
+ }
85
+
86
+ .cloud-blob-1,
87
+ .cloud-blob-2,
88
+ .cloud-blob-3 {
89
+ position: absolute;
90
+ border-radius: 50%;
91
+ filter: blur(90px);
92
+ will-change: transform;
93
+ pointer-events: none;
94
+ }
95
+
96
+ .cloud-blob-1 {
97
+ width: 750px;
98
+ height: 650px;
99
+ background: radial-gradient(ellipse, #38bdf8 0%, #7dd3fc 30%, transparent 70%);
100
+ bottom: 5%;
101
+ left: 20%;
102
+ opacity: 0.28;
103
+ animation: cloud-wave-3 24s ease-in-out infinite;
104
+ }
105
+
106
+ .cloud-blob-2 {
107
+ width: 600px;
108
+ height: 550px;
109
+ background: radial-gradient(ellipse, #a78bfa 0%, #c4b5fd 25%, transparent 70%);
110
+ top: 40%;
111
+ right: 5%;
112
+ opacity: 0.22;
113
+ animation: cloud-wave-4 18s ease-in-out infinite;
114
+ }
115
+
116
+ .cloud-blob-3 {
117
+ width: 650px;
118
+ height: 500px;
119
+ background: radial-gradient(ellipse, #2dd4bf 0%, #5eead4 30%, transparent 70%);
120
+ top: 60%;
121
+ left: -5%;
122
+ opacity: 0.25;
123
+ animation: cloud-wave-5 22s ease-in-out infinite;
124
+ }
125
+
126
+ /* Fade clouds below the hero */
127
+ .tropical-clouds-fade {
128
+ position: fixed;
129
+ inset: 0;
130
+ z-index: 0;
131
+ pointer-events: none;
132
+ background: linear-gradient(
133
+ to bottom,
134
+ transparent 0%,
135
+ transparent 25%,
136
+ rgba(7, 7, 11, 0.4) 55%,
137
+ rgba(7, 7, 11, 0.7) 100%
138
+ );
139
+ }
140
+
141
+ @keyframes cloud-wave-1 {
142
+ 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
143
+ 20% { transform: translate(120px, 30px) scale(1.15) rotate(2deg); }
144
+ 40% { transform: translate(60px, 80px) scale(0.9) rotate(-1deg); }
145
+ 60% { transform: translate(-80px, 50px) scale(1.1) rotate(3deg); }
146
+ 80% { transform: translate(-40px, -20px) scale(1.05) rotate(-2deg); }
147
+ 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
148
+ }
149
+
150
+ @keyframes cloud-wave-2 {
151
+ 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
152
+ 20% { transform: translate(-100px, 60px) scale(1.12) rotate(-3deg); }
153
+ 40% { transform: translate(-50px, -50px) scale(0.88) rotate(2deg); }
154
+ 60% { transform: translate(70px, 30px) scale(1.18) rotate(-1deg); }
155
+ 80% { transform: translate(30px, -30px) scale(0.95) rotate(3deg); }
156
+ 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
157
+ }
158
+
159
+ @keyframes cloud-wave-3 {
160
+ 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
161
+ 20% { transform: translate(80px, -70px) scale(1.2) rotate(2deg); }
162
+ 40% { transform: translate(-60px, -30px) scale(0.85) rotate(-3deg); }
163
+ 60% { transform: translate(40px, 60px) scale(1.1) rotate(1deg); }
164
+ 80% { transform: translate(-30px, 20px) scale(1.05) rotate(-2deg); }
165
+ 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
166
+ }
167
+
168
+ @keyframes cloud-wave-4 {
169
+ 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
170
+ 20% { transform: translate(-90px, -40px) scale(1.15) rotate(-2deg); }
171
+ 40% { transform: translate(60px, 50px) scale(0.9) rotate(3deg); }
172
+ 60% { transform: translate(-30px, -60px) scale(1.12) rotate(-1deg); }
173
+ 80% { transform: translate(50px, 30px) scale(0.95) rotate(2deg); }
174
+ 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
175
+ }
176
+
177
+ @keyframes cloud-wave-5 {
178
+ 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
179
+ 20% { transform: translate(100px, 40px) scale(1.1) rotate(3deg); }
180
+ 40% { transform: translate(-40px, 70px) scale(0.92) rotate(-2deg); }
181
+ 60% { transform: translate(60px, -30px) scale(1.15) rotate(1deg); }
182
+ 80% { transform: translate(-70px, 20px) scale(1.02) rotate(-3deg); }
183
+ 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
184
+ }
185
+
186
+ ::selection {
187
+ background: rgba(0, 212, 255, 0.20);
188
+ color: var(--accent);
189
+ }
190
+
191
+ ::-webkit-scrollbar { width: 6px; }
192
+ ::-webkit-scrollbar-track { background: var(--bg-primary); }
193
+ ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
194
+ ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
195
+
196
+ :focus-visible {
197
+ outline: 2px solid var(--accent);
198
+ outline-offset: 2px;
199
+ }
200
+
201
+ a {
202
+ color: var(--accent);
203
+ text-decoration: none;
204
+ transition: opacity 0.2s;
205
+ }
206
+ a:hover { opacity: 0.8; }
207
+
208
+
209
+ /* ========================================
210
+ Hero
211
+ ======================================== */
212
+
213
+ /* Ensure all content sits above clouds */
214
+ header, section, footer {
215
+ position: relative;
216
+ z-index: 1;
217
+ }
218
+
219
+ .hero {
220
+ position: relative;
221
+ min-height: 55vh;
222
+ display: flex;
223
+ align-items: center;
224
+ justify-content: center;
225
+ overflow: hidden;
226
+ border-bottom: 1px solid var(--border);
227
+ }
228
+
229
+ .hero-bg {
230
+ position: absolute;
231
+ inset: 0;
232
+ background-image: radial-gradient(
233
+ circle at 1px 1px,
234
+ rgba(0, 212, 255, 0.07) 1px,
235
+ transparent 0
236
+ );
237
+ background-size: 28px 28px;
238
+ mask-image: radial-gradient(ellipse 80% 70% at center, black 10%, transparent 70%);
239
+ -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 10%, transparent 70%);
240
+ }
241
+
242
+ .hero-scan {
243
+ position: absolute;
244
+ left: 0;
245
+ width: 100%;
246
+ height: 1px;
247
+ background: linear-gradient(90deg, transparent 10%, var(--accent) 50%, transparent 90%);
248
+ box-shadow: 0 0 24px var(--accent-glow), 0 0 48px var(--accent-dim);
249
+ animation: scan 7s ease-in-out infinite;
250
+ opacity: 0.5;
251
+ }
252
+
253
+ @keyframes scan {
254
+ 0% { top: 12%; opacity: 0; }
255
+ 8% { opacity: 0.5; }
256
+ 50% { top: 88%; }
257
+ 92% { opacity: 0.5; }
258
+ 100% { top: 12%; opacity: 0; }
259
+ }
260
+
261
+ .hero-content {
262
+ position: relative;
263
+ z-index: 1;
264
+ text-align: center;
265
+ padding: 3.5rem 2rem 1.5rem;
266
+ }
267
+
268
+ .logo {
269
+ display: block;
270
+ margin: 0 auto 1.5rem;
271
+ }
272
+
273
+ .hero-title {
274
+ font-family: var(--font-display);
275
+ font-size: clamp(3.5rem, 9vw, 7.5rem);
276
+ letter-spacing: 0.1em;
277
+ line-height: 1;
278
+ background: linear-gradient(180deg, var(--text-primary) 20%, var(--text-secondary) 100%);
279
+ -webkit-background-clip: text;
280
+ -webkit-text-fill-color: transparent;
281
+ background-clip: text;
282
+ }
283
+
284
+ .hero-subtitle {
285
+ font-size: 1.05rem;
286
+ color: var(--text-secondary);
287
+ margin-top: 0.6rem;
288
+ font-weight: 400;
289
+ letter-spacing: 0.01em;
290
+ }
291
+
292
+ .hero-video-wrap {
293
+ margin-top: 1rem;
294
+ width: 100%;
295
+ max-width: 720px;
296
+ border-radius: var(--radius);
297
+ overflow: hidden;
298
+ border: 1px solid var(--border);
299
+ }
300
+
301
+ .hero-video-wrap video {
302
+ width: 100%;
303
+ display: block;
304
+ }
305
+
306
+ .download-btn {
307
+ display: inline-flex;
308
+ align-items: center;
309
+ gap: 0.6rem;
310
+ margin-top: 0.75rem;
311
+ padding: 0.9rem 2.2rem;
312
+ background: var(--accent);
313
+ color: #000;
314
+ font-family: var(--font-mono);
315
+ font-size: 0.95rem;
316
+ font-weight: 700;
317
+ text-decoration: none;
318
+ text-transform: uppercase;
319
+ letter-spacing: 0.08em;
320
+ border-radius: 6px;
321
+ border: 2px solid var(--accent);
322
+ transition: background 0.2s, color 0.2s, box-shadow 0.2s;
323
+ }
324
+
325
+ .download-btn:hover {
326
+ background: transparent;
327
+ color: var(--accent);
328
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
329
+ }
330
+
331
+ .download-btn svg {
332
+ flex-shrink: 0;
333
+ }
334
+
335
+
336
+ /* Pipeline strip */
337
+ .pipeline-strip {
338
+ display: flex;
339
+ align-items: center;
340
+ justify-content: center;
341
+ margin-top: 1rem;
342
+ margin-bottom: 0;
343
+ }
344
+
345
+ .pipeline-stage {
346
+ display: flex;
347
+ flex-direction: column;
348
+ align-items: center;
349
+ gap: 0.4rem;
350
+ }
351
+
352
+ .stage-dot {
353
+ width: 34px;
354
+ height: 34px;
355
+ border-radius: 50%;
356
+ background: var(--bg-card);
357
+ border: 1.5px solid var(--accent);
358
+ display: flex;
359
+ align-items: center;
360
+ justify-content: center;
361
+ font-family: var(--font-mono);
362
+ font-size: 0.75rem;
363
+ font-weight: 600;
364
+ color: var(--accent);
365
+ transition: all 0.3s;
366
+ }
367
+
368
+ .pipeline-label {
369
+ font-family: var(--font-mono);
370
+ font-size: 0.6rem;
371
+ letter-spacing: 0.14em;
372
+ color: var(--text-tertiary);
373
+ text-transform: uppercase;
374
+ }
375
+
376
+ .pipeline-connector {
377
+ width: 44px;
378
+ height: 1.5px;
379
+ background: var(--border);
380
+ position: relative;
381
+ overflow: hidden;
382
+ margin: 0 6px;
383
+ margin-bottom: 1.2rem;
384
+ }
385
+
386
+ .pipeline-flow {
387
+ position: absolute;
388
+ top: 0;
389
+ left: -40%;
390
+ width: 40%;
391
+ height: 100%;
392
+ background: linear-gradient(90deg, transparent, var(--accent), transparent);
393
+ animation: flow 2.5s ease-in-out infinite;
394
+ }
395
+
396
+ @keyframes flow {
397
+ 0% { left: -40%; }
398
+ 100% { left: 100%; }
399
+ }
400
+
401
+
402
+ /* ========================================
403
+ Demo Video
404
+ ======================================== */
405
+
406
+ .demo-video {
407
+ position: relative;
408
+ width: 100%;
409
+ max-width: 1080px;
410
+ margin: 0 auto;
411
+ padding: 0 1.5rem;
412
+ }
413
+
414
+ .demo-video video {
415
+ width: 100%;
416
+ border-radius: var(--radius-lg);
417
+ display: block;
418
+ }
419
+
420
+ /* ========================================
421
+ Stats Bar
422
+ ======================================== */
423
+
424
+ .stats-bar {
425
+ display: flex;
426
+ justify-content: center;
427
+ gap: 3rem;
428
+ padding: 1.75rem 2rem;
429
+ border-bottom: 1px solid var(--border);
430
+ background: var(--bg-secondary);
431
+ }
432
+
433
+ .stat { text-align: center; }
434
+
435
+ .stat-value {
436
+ font-family: var(--font-display);
437
+ font-size: 2.2rem;
438
+ color: var(--text-primary);
439
+ letter-spacing: 0.04em;
440
+ line-height: 1.1;
441
+ }
442
+
443
+ .stat-accent .stat-value {
444
+ color: var(--accent);
445
+ }
446
+
447
+ .stat-label {
448
+ font-size: 0.65rem;
449
+ color: var(--text-tertiary);
450
+ text-transform: uppercase;
451
+ letter-spacing: 0.12em;
452
+ font-family: var(--font-mono);
453
+ margin-top: 0.15rem;
454
+ }
455
+
456
+
457
+ /* ========================================
458
+ Controls
459
+ ======================================== */
460
+
461
+ .controls {
462
+ display: flex;
463
+ justify-content: space-between;
464
+ align-items: center;
465
+ padding: 1.25rem 2rem;
466
+ max-width: 1440px;
467
+ margin: 0 auto;
468
+ flex-wrap: wrap;
469
+ gap: 1rem;
470
+ }
471
+
472
+ .filter-group {
473
+ display: flex;
474
+ align-items: center;
475
+ gap: 0.4rem;
476
+ }
477
+
478
+ .filter-label {
479
+ font-family: var(--font-mono);
480
+ font-size: 0.6rem;
481
+ letter-spacing: 0.12em;
482
+ color: var(--text-tertiary);
483
+ text-transform: uppercase;
484
+ margin-right: 0.4rem;
485
+ }
486
+
487
+ .category-btn {
488
+ font-family: var(--font-mono);
489
+ font-size: 0.7rem;
490
+ letter-spacing: 0.04em;
491
+ padding: 0.4rem 0.85rem;
492
+ border: 1px solid var(--border);
493
+ border-radius: 100px;
494
+ background: transparent;
495
+ color: var(--text-secondary);
496
+ cursor: pointer;
497
+ transition: all 0.2s;
498
+ }
499
+
500
+ .category-btn:hover {
501
+ border-color: var(--border-hover);
502
+ color: var(--text-primary);
503
+ }
504
+
505
+ .category-btn.active {
506
+ background: var(--accent-dim);
507
+ border-color: rgba(0, 212, 255, 0.35);
508
+ color: var(--accent);
509
+ }
510
+
511
+
512
+ /* ========================================
513
+ Gallery Grid
514
+ ======================================== */
515
+
516
+ .gallery {
517
+ max-width: 1440px;
518
+ margin: 0 auto;
519
+ padding: 0.5rem 2rem 4rem;
520
+ }
521
+
522
+ .grid {
523
+ display: grid;
524
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
525
+ gap: 1.25rem;
526
+ }
527
+
528
+ .empty-state {
529
+ display: none;
530
+ text-align: center;
531
+ padding: 4rem 2rem;
532
+ color: var(--text-tertiary);
533
+ font-family: var(--font-mono);
534
+ font-size: 0.85rem;
535
+ }
536
+
537
+ .empty-state.visible { display: block; }
538
+
539
+ .page-nav {
540
+ display: flex;
541
+ align-items: center;
542
+ justify-content: center;
543
+ gap: 1rem;
544
+ margin: 2rem auto;
545
+ }
546
+ .page-nav-btn {
547
+ display: flex;
548
+ align-items: center;
549
+ justify-content: center;
550
+ width: 40px;
551
+ height: 40px;
552
+ background: var(--bg-card);
553
+ color: var(--text-secondary);
554
+ border: 1px solid var(--border);
555
+ border-radius: var(--radius);
556
+ cursor: pointer;
557
+ transition: all 0.2s ease;
558
+ }
559
+ .page-nav-btn:hover:not(:disabled) {
560
+ background: var(--bg-card-hover);
561
+ border-color: var(--border-hover);
562
+ color: var(--accent);
563
+ }
564
+ .page-nav-btn:disabled {
565
+ opacity: 0.3;
566
+ cursor: default;
567
+ }
568
+ .page-nav-counter {
569
+ font-family: var(--font-mono);
570
+ font-size: 0.85rem;
571
+ color: var(--text-secondary);
572
+ min-width: 4rem;
573
+ text-align: center;
574
+ }
575
+
576
+
577
+ /* ========================================
578
+ Clip Card
579
+ ======================================== */
580
+
581
+ .clip-card {
582
+ background: var(--bg-card);
583
+ border: 1px solid var(--border);
584
+ border-radius: var(--radius-lg);
585
+ overflow: hidden;
586
+ transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s;
587
+ opacity: 0;
588
+ transform: translateY(16px);
589
+ }
590
+
591
+ .clip-card.visible {
592
+ opacity: 1;
593
+ transform: translateY(0);
594
+ transition: opacity 0.45s ease, transform 0.45s ease,
595
+ border-color 0.3s, box-shadow 0.3s;
596
+ }
597
+
598
+ .clip-card:hover {
599
+ border-color: var(--border-hover);
600
+ transform: translateY(-3px);
601
+ box-shadow:
602
+ 0 8px 32px rgba(0, 0, 0, 0.35),
603
+ 0 0 0 1px rgba(0, 212, 255, 0.06);
604
+ }
605
+
606
+ .card-media {
607
+ position: relative;
608
+ aspect-ratio: 1;
609
+ background: var(--bg-secondary);
610
+ cursor: pointer;
611
+ overflow: hidden;
612
+ }
613
+
614
+ .card-media img,
615
+ .card-media video {
616
+ width: 100%;
617
+ height: 100%;
618
+ object-fit: cover;
619
+ display: block;
620
+ transition: transform 0.4s ease;
621
+ }
622
+
623
+ .clip-card:hover .card-media img,
624
+ .clip-card:hover .card-media video {
625
+ transform: scale(1.04);
626
+ }
627
+
628
+ .card-media::after {
629
+ content: '';
630
+ position: absolute;
631
+ bottom: 0;
632
+ left: 0;
633
+ right: 0;
634
+ height: 35%;
635
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
636
+ pointer-events: none;
637
+ }
638
+
639
+ /* Preview → WASM viewer swap */
640
+ .card-preview {
641
+ position: absolute;
642
+ top: 0;
643
+ left: 0;
644
+ width: 100%;
645
+ height: 100%;
646
+ z-index: 2;
647
+ transition: opacity 0.6s ease;
648
+ }
649
+ .card-preview-hidden {
650
+ opacity: 0;
651
+ pointer-events: none;
652
+ }
653
+ .card-viewer-hidden {
654
+ opacity: 0;
655
+ position: absolute;
656
+ top: 0;
657
+ left: 0;
658
+ z-index: 1;
659
+ }
660
+ .card-viewer-ready {
661
+ opacity: 1;
662
+ transition: opacity 0.6s ease;
663
+ z-index: 3;
664
+ }
665
+
666
+ .card-placeholder {
667
+ display: flex;
668
+ align-items: center;
669
+ justify-content: center;
670
+ height: 100%;
671
+ color: var(--text-tertiary);
672
+ font-size: 0.8rem;
673
+ font-family: var(--font-mono);
674
+ letter-spacing: 0.04em;
675
+ }
676
+
677
+ .card-duration {
678
+ position: absolute;
679
+ bottom: 8px;
680
+ right: 8px;
681
+ z-index: 1;
682
+ background: rgba(0, 0, 0, 0.7);
683
+ backdrop-filter: blur(4px);
684
+ padding: 2px 7px;
685
+ border-radius: 4px;
686
+ font-family: var(--font-mono);
687
+ font-size: 0.65rem;
688
+ font-weight: 500;
689
+ color: var(--text-primary);
690
+ }
691
+
692
+ .card-badge {
693
+ position: absolute;
694
+ top: 8px;
695
+ left: 8px;
696
+ z-index: 1;
697
+ background: rgba(34, 197, 94, 0.85);
698
+ padding: 2px 7px;
699
+ border-radius: 4px;
700
+ font-family: var(--font-mono);
701
+ font-size: 0.55rem;
702
+ font-weight: 600;
703
+ color: #fff;
704
+ letter-spacing: 0.08em;
705
+ text-transform: uppercase;
706
+ }
707
+
708
+ .card-info {
709
+ padding: 0.85rem 1rem 1rem;
710
+ }
711
+
712
+ .card-title {
713
+ font-family: var(--font-body);
714
+ font-size: 0.9rem;
715
+ font-weight: 700;
716
+ color: var(--text-primary);
717
+ line-height: 1.3;
718
+ }
719
+
720
+ .card-meta {
721
+ display: flex;
722
+ align-items: center;
723
+ gap: 0.5rem;
724
+ margin-top: 0.3rem;
725
+ margin-bottom: 0.7rem;
726
+ font-size: 0.7rem;
727
+ color: var(--text-tertiary);
728
+ }
729
+
730
+ .card-category {
731
+ font-family: var(--font-mono);
732
+ font-size: 0.55rem;
733
+ text-transform: uppercase;
734
+ letter-spacing: 0.1em;
735
+ padding: 1px 5px;
736
+ border: 1px solid var(--border);
737
+ border-radius: 3px;
738
+ color: var(--text-secondary);
739
+ }
740
+
741
+ .card-separator {
742
+ width: 3px;
743
+ height: 3px;
744
+ border-radius: 50%;
745
+ background: var(--text-tertiary);
746
+ }
747
+
748
+ .card-loading-status {
749
+ font-family: var(--font-mono);
750
+ font-size: 0.7rem;
751
+ color: var(--accent);
752
+ opacity: 0.7;
753
+ margin-bottom: 0.25rem;
754
+ animation: pulse-status 1.5s ease-in-out infinite;
755
+ }
756
+ @keyframes pulse-status {
757
+ 0%, 100% { opacity: 0.5; }
758
+ 50% { opacity: 1; }
759
+ }
760
+
761
+ .card-actions {
762
+ display: flex;
763
+ align-items: center;
764
+ gap: 0.4rem;
765
+ }
766
+
767
+ .card-refresh-btn {
768
+ width: 28px;
769
+ height: 28px;
770
+ border-radius: 4px;
771
+ border: 1px solid var(--border);
772
+ background: transparent;
773
+ color: var(--text-secondary);
774
+ cursor: pointer;
775
+ transition: all 0.15s;
776
+ display: flex;
777
+ align-items: center;
778
+ justify-content: center;
779
+ padding: 0;
780
+ }
781
+
782
+ .card-refresh-btn:hover {
783
+ border-color: var(--accent);
784
+ color: var(--accent);
785
+ }
786
+
787
+ .card-refresh-btn svg {
788
+ flex-shrink: 0;
789
+ }
790
+
791
+ .card-view-btn {
792
+ display: flex;
793
+ align-items: center;
794
+ gap: 4px;
795
+ margin-left: auto;
796
+ padding: 4px 10px;
797
+ border-radius: 4px;
798
+ border: 1px solid rgba(34, 197, 94, 0.35);
799
+ background: rgba(34, 197, 94, 0.1);
800
+ color: var(--success);
801
+ font-family: var(--font-mono);
802
+ font-size: 0.6rem;
803
+ font-weight: 600;
804
+ text-decoration: none;
805
+ cursor: pointer;
806
+ transition: all 0.2s;
807
+ white-space: nowrap;
808
+ }
809
+
810
+ .card-view-btn:hover {
811
+ background: rgba(34, 197, 94, 0.2);
812
+ border-color: rgba(34, 197, 94, 0.6);
813
+ color: #4ade80;
814
+ }
815
+
816
+ .card-view-btn svg {
817
+ flex-shrink: 0;
818
+ }
819
+
820
+
821
+ /* ========================================
822
+ Modal
823
+ ======================================== */
824
+
825
+ .modal {
826
+ position: fixed;
827
+ inset: 0;
828
+ z-index: 1000;
829
+ background: rgba(0, 0, 0, 0.80);
830
+ backdrop-filter: blur(6px);
831
+ display: flex;
832
+ align-items: center;
833
+ justify-content: center;
834
+ padding: 2rem;
835
+ opacity: 0;
836
+ visibility: hidden;
837
+ transition: opacity 0.25s, visibility 0.25s;
838
+ }
839
+
840
+ .modal.open {
841
+ opacity: 1;
842
+ visibility: visible;
843
+ }
844
+
845
+ .modal-content {
846
+ background: var(--bg-secondary);
847
+ border: 1px solid var(--border);
848
+ border-radius: var(--radius-lg);
849
+ width: 100%;
850
+ max-width: 960px;
851
+ max-height: 85vh;
852
+ overflow-y: auto;
853
+ padding: 2rem;
854
+ transform: scale(0.96) translateY(8px);
855
+ transition: transform 0.3s ease;
856
+ }
857
+
858
+ .modal.open .modal-content {
859
+ transform: scale(1) translateY(0);
860
+ }
861
+
862
+ .modal-header {
863
+ display: flex;
864
+ justify-content: space-between;
865
+ align-items: flex-start;
866
+ margin-bottom: 1.5rem;
867
+ gap: 1rem;
868
+ }
869
+
870
+ .modal-title {
871
+ font-family: var(--font-display);
872
+ font-size: 2rem;
873
+ letter-spacing: 0.06em;
874
+ line-height: 1.1;
875
+ }
876
+
877
+ .modal-meta {
878
+ font-family: var(--font-mono);
879
+ font-size: 0.7rem;
880
+ color: var(--text-tertiary);
881
+ margin-top: 0.3rem;
882
+ letter-spacing: 0.02em;
883
+ }
884
+
885
+ .modal-close {
886
+ background: none;
887
+ border: 1px solid var(--border);
888
+ color: var(--text-secondary);
889
+ width: 34px;
890
+ height: 34px;
891
+ border-radius: 50%;
892
+ cursor: pointer;
893
+ display: flex;
894
+ align-items: center;
895
+ justify-content: center;
896
+ font-size: 1.3rem;
897
+ line-height: 1;
898
+ transition: all 0.2s;
899
+ flex-shrink: 0;
900
+ }
901
+
902
+ .modal-close:hover {
903
+ border-color: var(--text-secondary);
904
+ color: var(--text-primary);
905
+ }
906
+
907
+ .modal-grid {
908
+ display: grid;
909
+ grid-template-columns: repeat(2, 1fr);
910
+ gap: 0.75rem;
911
+ }
912
+
913
+ .modal-stage {
914
+ border: 1px solid var(--border);
915
+ border-radius: var(--radius);
916
+ overflow: hidden;
917
+ }
918
+
919
+ .modal-stage.unavailable {
920
+ opacity: 0.3;
921
+ }
922
+
923
+ .modal-stage-label {
924
+ padding: 0.45rem 0.7rem;
925
+ font-family: var(--font-mono);
926
+ font-size: 0.6rem;
927
+ letter-spacing: 0.12em;
928
+ text-transform: uppercase;
929
+ color: var(--text-tertiary);
930
+ background: var(--bg-card);
931
+ border-bottom: 1px solid var(--border);
932
+ }
933
+
934
+ .modal-stage img,
935
+ .modal-stage video {
936
+ width: 100%;
937
+ aspect-ratio: 1;
938
+ object-fit: cover;
939
+ display: block;
940
+ }
941
+
942
+ .modal-placeholder {
943
+ aspect-ratio: 1;
944
+ display: flex;
945
+ align-items: center;
946
+ justify-content: center;
947
+ color: var(--text-tertiary);
948
+ font-family: var(--font-mono);
949
+ font-size: 0.75rem;
950
+ background: var(--bg-primary);
951
+ }
952
+
953
+
954
+ .modal-placeholder.available {
955
+ flex-direction: column;
956
+ gap: 0.75rem;
957
+ padding: 1rem;
958
+ text-align: center;
959
+ color: var(--text-secondary);
960
+ }
961
+
962
+ .artifact-links {
963
+ display: flex;
964
+ flex-direction: column;
965
+ gap: 0.4rem;
966
+ }
967
+
968
+ .artifact-links a {
969
+ color: var(--accent);
970
+ text-decoration: none;
971
+ font-size: 0.7rem;
972
+ }
973
+
974
+ .artifact-links a:hover {
975
+ text-decoration: underline;
976
+ }
977
+
978
+
979
+
980
+ /* ========================================
981
+ Launch Video
982
+ ======================================== */
983
+
984
+ .launch-video {
985
+ padding: 4rem 1.5rem 2rem;
986
+ max-width: 960px;
987
+ margin: 0 auto;
988
+ }
989
+
990
+ .launch-video h2 {
991
+ font-family: var(--font-display);
992
+ font-size: 2.4rem;
993
+ letter-spacing: 0.08em;
994
+ color: var(--text-primary);
995
+ margin-bottom: 1.5rem;
996
+ text-align: center;
997
+ }
998
+
999
+ .launch-video-wrap {
1000
+ border-radius: var(--radius-lg);
1001
+ overflow: hidden;
1002
+ border: 1px solid var(--border);
1003
+ }
1004
+
1005
+ .launch-video-wrap video {
1006
+ width: 100%;
1007
+ display: block;
1008
+ }
1009
+
1010
+ .showcase-label {
1011
+ font-family: var(--font-display);
1012
+ font-size: 1.6rem;
1013
+ letter-spacing: 0.08em;
1014
+ color: var(--text-secondary);
1015
+ margin: 2rem 0 1rem;
1016
+ text-align: center;
1017
+ }
1018
+
1019
+ /* ========================================
1020
+ About
1021
+ ======================================== */
1022
+
1023
+ .about {
1024
+ border-top: 1px solid var(--border);
1025
+ background: var(--bg-secondary);
1026
+ }
1027
+
1028
+ .about-inner {
1029
+ max-width: 1440px;
1030
+ margin: 0 auto;
1031
+ padding: 4rem 2rem;
1032
+ }
1033
+
1034
+ .about h2,
1035
+ .credits h2,
1036
+ .equipment h2 {
1037
+ font-family: var(--font-display);
1038
+ font-size: 2.4rem;
1039
+ letter-spacing: 0.08em;
1040
+ margin-bottom: 2rem;
1041
+ }
1042
+
1043
+ .about-intro {
1044
+ color: var(--text-secondary);
1045
+ font-size: 0.95rem;
1046
+ line-height: 1.7;
1047
+ max-width: 720px;
1048
+ margin-bottom: 2.5rem;
1049
+ }
1050
+
1051
+ .about-intro a {
1052
+ color: var(--accent);
1053
+ text-decoration: none;
1054
+ }
1055
+
1056
+ .about-intro a:hover {
1057
+ text-decoration: underline;
1058
+ }
1059
+
1060
+ .about-process {
1061
+ display: flex;
1062
+ align-items: flex-start;
1063
+ gap: 0;
1064
+ }
1065
+
1066
+ .process-step {
1067
+ flex: 1;
1068
+ padding: 1.25rem;
1069
+ background: var(--bg-card);
1070
+ border: 1px solid var(--border);
1071
+ border-radius: var(--radius);
1072
+ }
1073
+
1074
+ .process-num {
1075
+ font-family: var(--font-mono);
1076
+ font-size: 0.65rem;
1077
+ font-weight: 600;
1078
+ color: var(--accent);
1079
+ padding: 0.2rem 0.5rem;
1080
+ border: 1px solid rgba(0, 212, 255, 0.25);
1081
+ border-radius: 4px;
1082
+ display: inline-block;
1083
+ margin-bottom: 0.6rem;
1084
+ }
1085
+
1086
+ .process-step h3 {
1087
+ font-family: var(--font-mono);
1088
+ font-size: 0.8rem;
1089
+ text-transform: uppercase;
1090
+ letter-spacing: 0.1em;
1091
+ margin-bottom: 0.5rem;
1092
+ }
1093
+
1094
+ .process-step p {
1095
+ font-size: 0.78rem;
1096
+ color: var(--text-tertiary);
1097
+ line-height: 1.6;
1098
+ }
1099
+
1100
+ .process-step a {
1101
+ color: var(--accent);
1102
+ text-decoration: none;
1103
+ }
1104
+
1105
+ .process-step a:hover {
1106
+ text-decoration: underline;
1107
+ }
1108
+
1109
+ .process-connector {
1110
+ display: flex;
1111
+ align-items: center;
1112
+ padding: 0 0.5rem;
1113
+ flex-shrink: 0;
1114
+ align-self: center;
1115
+ }
1116
+
1117
+ .process-arrow {
1118
+ width: 24px;
1119
+ height: 2px;
1120
+ background: var(--border);
1121
+ position: relative;
1122
+ }
1123
+
1124
+ .process-arrow::after {
1125
+ content: '';
1126
+ position: absolute;
1127
+ right: 0;
1128
+ top: -3px;
1129
+ border: solid var(--text-tertiary);
1130
+ border-width: 0 2px 2px 0;
1131
+ padding: 3px;
1132
+ transform: rotate(-45deg);
1133
+ }
1134
+
1135
+
1136
+ /* ========================================
1137
+ Deploy
1138
+ ======================================== */
1139
+
1140
+ .deploy {
1141
+ border-top: 1px solid var(--border);
1142
+ background: var(--bg-secondary);
1143
+ }
1144
+
1145
+ .deploy h2 {
1146
+ font-family: var(--font-display);
1147
+ font-size: 2.4rem;
1148
+ letter-spacing: 0.08em;
1149
+ margin-bottom: 0.75rem;
1150
+ }
1151
+
1152
+ .deploy-intro {
1153
+ color: var(--text-secondary);
1154
+ font-size: 0.9rem;
1155
+ line-height: 1.7;
1156
+ margin-bottom: 2rem;
1157
+ max-width: 720px;
1158
+ }
1159
+
1160
+ .deploy-options {
1161
+ display: grid;
1162
+ grid-template-columns: repeat(3, 1fr);
1163
+ gap: 1.5rem;
1164
+ }
1165
+
1166
+ a.deploy-option, .deploy-option {
1167
+ background: var(--bg-card);
1168
+ border: 1px solid var(--border);
1169
+ border-radius: var(--radius);
1170
+ padding: 1.5rem;
1171
+ transition: border-color 0.2s;
1172
+ text-decoration: none;
1173
+ color: inherit;
1174
+ display: block;
1175
+ cursor: pointer;
1176
+ }
1177
+
1178
+ a.deploy-option:hover, .deploy-option:hover {
1179
+ border-color: var(--accent);
1180
+ }
1181
+
1182
+ .deploy-num {
1183
+ font-family: var(--font-mono);
1184
+ font-size: 0.7rem;
1185
+ font-weight: 600;
1186
+ color: var(--accent);
1187
+ padding: 0.25rem 0.5rem;
1188
+ border: 1px solid rgba(0, 212, 255, 0.25);
1189
+ border-radius: 4px;
1190
+ display: inline-block;
1191
+ margin-bottom: 0.75rem;
1192
+ }
1193
+
1194
+ .deploy-option h3 {
1195
+ font-size: 1rem;
1196
+ font-weight: 600;
1197
+ margin-bottom: 0.5rem;
1198
+ }
1199
+
1200
+ .deploy-option p {
1201
+ color: var(--text-secondary);
1202
+ font-size: 0.8rem;
1203
+ line-height: 1.6;
1204
+ margin-bottom: 0.75rem;
1205
+ }
1206
+
1207
+
1208
+ .deploy-footer {
1209
+ color: var(--text-tertiary);
1210
+ font-size: 0.8rem;
1211
+ margin-top: 1.5rem;
1212
+ }
1213
+
1214
+ .deploy-footer a {
1215
+ color: var(--accent);
1216
+ text-decoration: none;
1217
+ }
1218
+
1219
+ @media (max-width: 900px) {
1220
+ .deploy-options {
1221
+ grid-template-columns: 1fr;
1222
+ }
1223
+ }
1224
+
1225
+
1226
+ /* ========================================
1227
+ Credits
1228
+ ======================================== */
1229
+
1230
+ .credits {
1231
+ max-width: 1440px;
1232
+ margin: 0 auto;
1233
+ padding: 4rem 2rem;
1234
+ border-top: 1px solid var(--border);
1235
+ }
1236
+
1237
+ .credits-grid {
1238
+ display: grid;
1239
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
1240
+ gap: 1rem;
1241
+ }
1242
+
1243
+ a.credit-card, .credit-card {
1244
+ padding: 1.25rem;
1245
+ background: var(--bg-card);
1246
+ border: 1px solid var(--border);
1247
+ border-radius: var(--radius);
1248
+ transition: border-color 0.2s;
1249
+ text-decoration: none;
1250
+ color: inherit;
1251
+ display: flex;
1252
+ flex-direction: column;
1253
+ align-items: center;
1254
+ text-align: center;
1255
+ cursor: pointer;
1256
+ }
1257
+
1258
+ .credit-photo {
1259
+ width: 80px;
1260
+ height: 80px;
1261
+ border-radius: 50%;
1262
+ object-fit: cover;
1263
+ margin-bottom: 0.75rem;
1264
+ border: 2px solid var(--border);
1265
+ }
1266
+
1267
+ .credit-initials {
1268
+ display: flex;
1269
+ align-items: center;
1270
+ justify-content: center;
1271
+ background: var(--border);
1272
+ color: var(--text-secondary);
1273
+ font-family: var(--font-mono);
1274
+ font-size: 1.1rem;
1275
+ font-weight: 600;
1276
+ letter-spacing: 0.05em;
1277
+ }
1278
+
1279
+ a.credit-card:hover, .credit-card:hover {
1280
+ border-color: var(--accent);
1281
+ }
1282
+
1283
+ .credit-role {
1284
+ font-family: var(--font-mono);
1285
+ font-size: 0.55rem;
1286
+ text-transform: uppercase;
1287
+ letter-spacing: 0.15em;
1288
+ color: var(--accent);
1289
+ margin-bottom: 0.4rem;
1290
+ }
1291
+
1292
+ .credit-name {
1293
+ font-weight: 700;
1294
+ font-size: 1rem;
1295
+ color: var(--text-primary);
1296
+ text-decoration: none;
1297
+ display: block;
1298
+ }
1299
+
1300
+ .credit-name:hover {
1301
+ color: var(--accent);
1302
+ opacity: 1;
1303
+ }
1304
+
1305
+
1306
+ /* ========================================
1307
+ About Company
1308
+ ======================================== */
1309
+
1310
+ .about-company {
1311
+ max-width: 1440px;
1312
+ margin: 0 auto;
1313
+ padding: 4rem 2rem;
1314
+ border-top: 1px solid var(--border);
1315
+ }
1316
+
1317
+ .about-company-inner {
1318
+ max-width: 800px;
1319
+ margin: 0 auto;
1320
+ text-align: center;
1321
+ }
1322
+
1323
+ .about-company-logo {
1324
+ opacity: 0.9;
1325
+ margin-bottom: 1rem;
1326
+ }
1327
+
1328
+ .about-company-tagline {
1329
+ font-family: var(--font-mono);
1330
+ font-size: 0.8rem;
1331
+ text-transform: uppercase;
1332
+ letter-spacing: 0.15em;
1333
+ color: var(--accent);
1334
+ margin-bottom: 1.25rem;
1335
+ }
1336
+
1337
+ .about-company-desc {
1338
+ color: var(--text-secondary);
1339
+ font-size: 0.9rem;
1340
+ line-height: 1.7;
1341
+ margin-bottom: 2rem;
1342
+ }
1343
+
1344
+ .about-company-services {
1345
+ display: grid;
1346
+ grid-template-columns: repeat(3, 1fr);
1347
+ gap: 1.5rem;
1348
+ margin-bottom: 2rem;
1349
+ }
1350
+
1351
+ .about-service {
1352
+ padding: 1.25rem;
1353
+ background: var(--bg-card);
1354
+ border: 1px solid var(--border);
1355
+ border-radius: var(--radius);
1356
+ text-align: left;
1357
+ }
1358
+
1359
+ .about-service h4 {
1360
+ font-size: 0.85rem;
1361
+ font-weight: 700;
1362
+ margin-bottom: 0.4rem;
1363
+ color: var(--text-primary);
1364
+ }
1365
+
1366
+ .about-service p {
1367
+ font-size: 0.78rem;
1368
+ color: var(--text-secondary);
1369
+ line-height: 1.5;
1370
+ }
1371
+
1372
+ .about-company-cta {
1373
+ display: inline-block;
1374
+ padding: 0.6rem 1.8rem;
1375
+ font-family: var(--font-mono);
1376
+ font-size: 0.8rem;
1377
+ font-weight: 600;
1378
+ text-transform: uppercase;
1379
+ letter-spacing: 0.08em;
1380
+ color: var(--accent);
1381
+ border: 1px solid var(--accent);
1382
+ border-radius: 6px;
1383
+ text-decoration: none;
1384
+ transition: background 0.2s, color 0.2s;
1385
+ }
1386
+
1387
+ .about-company-cta:hover {
1388
+ background: var(--accent);
1389
+ color: #000;
1390
+ }
1391
+
1392
+ /* ========================================
1393
+ Footer
1394
+ ======================================== */
1395
+
1396
+ .qr-section {
1397
+ display: flex;
1398
+ justify-content: center;
1399
+ padding: 4rem 2rem 2rem;
1400
+ }
1401
+
1402
+ .qr-code {
1403
+ width: 280px;
1404
+ height: 280px;
1405
+ border-radius: var(--radius);
1406
+ border: 1px solid var(--border);
1407
+ filter: invert(1);
1408
+ }
1409
+
1410
+ .site-footer {
1411
+ border-top: 1px solid var(--border);
1412
+ padding: 3rem 2rem;
1413
+ text-align: center;
1414
+ position: relative;
1415
+ z-index: 1;
1416
+ }
1417
+
1418
+ .footer-inner {
1419
+ max-width: 600px;
1420
+ margin: 0 auto;
1421
+ }
1422
+
1423
+ .footer-logo {
1424
+ opacity: 0.7;
1425
+ margin-bottom: 1rem;
1426
+ }
1427
+
1428
+ .footer-tagline {
1429
+ font-size: 0.78rem;
1430
+ color: var(--text-secondary);
1431
+ margin-bottom: 0.5rem;
1432
+ }
1433
+
1434
+ .footer-tagline a {
1435
+ color: var(--accent);
1436
+ text-decoration: none;
1437
+ }
1438
+
1439
+ .footer-tagline a:hover {
1440
+ text-decoration: underline;
1441
+ }
1442
+
1443
+ .footer-claude {
1444
+ font-size: 0.7rem;
1445
+ color: var(--text-dim);
1446
+ margin-top: 0.25rem;
1447
+ }
1448
+
1449
+ .footer-claude a {
1450
+ color: var(--text-secondary);
1451
+ text-decoration: none;
1452
+ }
1453
+
1454
+ .footer-claude a:hover {
1455
+ color: var(--accent);
1456
+ text-decoration: underline;
1457
+ }
1458
+
1459
+ .footer-copy {
1460
+ font-size: 0.7rem;
1461
+ color: var(--text-tertiary);
1462
+ font-family: var(--font-mono);
1463
+ }
1464
+
1465
+ @media (max-width: 768px) {
1466
+ .about-company-services {
1467
+ grid-template-columns: 1fr;
1468
+ }
1469
+ }
1470
+
1471
+ /* ========================================
1472
+ Equipment
1473
+ ======================================== */
1474
+
1475
+ .equipment {
1476
+ max-width: 1440px;
1477
+ margin: 0 auto;
1478
+ padding: 4rem 2rem;
1479
+ border-top: 1px solid var(--border);
1480
+ }
1481
+
1482
+ .equipment-sections {
1483
+ display: grid;
1484
+ grid-template-columns: repeat(4, 1fr);
1485
+ gap: 2rem;
1486
+ }
1487
+
1488
+ a.equip-block, .equip-block {
1489
+ text-decoration: none;
1490
+ color: inherit;
1491
+ display: block;
1492
+ cursor: pointer;
1493
+ transition: border-color 0.2s;
1494
+ border: 1px solid transparent;
1495
+ border-radius: var(--radius);
1496
+ padding: 1rem;
1497
+ }
1498
+
1499
+ a.equip-block:hover, .equip-block:hover {
1500
+ border-color: var(--accent);
1501
+ }
1502
+
1503
+ .equip-block h3 {
1504
+ font-family: var(--font-mono);
1505
+ font-size: 0.7rem;
1506
+ text-transform: uppercase;
1507
+ letter-spacing: 0.12em;
1508
+ color: var(--text-tertiary);
1509
+ margin-bottom: 0.5rem;
1510
+ }
1511
+
1512
+ .equip-photo { width: 100%; height: 140px; object-fit: contain; border-radius: var(--radius); margin-bottom: 0.75rem;}
1513
+ .equip-name {
1514
+ font-size: 0.95rem;
1515
+ font-weight: 700;
1516
+ margin-bottom: 0.75rem;
1517
+ color: var(--accent);
1518
+ }
1519
+
1520
+ .equipment-grid {
1521
+ display: flex;
1522
+ flex-direction: column;
1523
+ gap: 0.5rem;
1524
+ }
1525
+
1526
+ .equipment-item {
1527
+ display: flex;
1528
+ justify-content: space-between;
1529
+ align-items: center;
1530
+ padding: 0.6rem 0.85rem;
1531
+ background: var(--bg-card);
1532
+ border: 1px solid var(--border);
1533
+ border-radius: var(--radius);
1534
+ }
1535
+
1536
+ .explore-hardware-btn {
1537
+ display: flex;
1538
+ align-items: center;
1539
+ justify-content: center;
1540
+ gap: 8px;
1541
+ margin: 1.5rem auto 0;
1542
+ padding: 0.6rem 1.5rem;
1543
+ background: var(--accent-dim);
1544
+ border: 1px solid var(--accent);
1545
+ border-radius: var(--radius);
1546
+ color: var(--accent);
1547
+ font-family: var(--font-mono);
1548
+ font-size: 0.85rem;
1549
+ text-decoration: none;
1550
+ transition: all 0.2s;
1551
+ width: fit-content;
1552
+ }
1553
+
1554
+ .explore-hardware-btn:hover {
1555
+ background: rgba(0, 212, 255, 0.20);
1556
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
1557
+ }
1558
+
1559
+ .equipment-label {
1560
+ font-family: var(--font-mono);
1561
+ font-size: 0.65rem;
1562
+ color: var(--text-tertiary);
1563
+ letter-spacing: 0.05em;
1564
+ }
1565
+
1566
+ .equipment-value {
1567
+ font-size: 0.8rem;
1568
+ font-weight: 600;
1569
+ }
1570
+
1571
+
1572
+
1573
+ /* ========================================
1574
+ Disclaimer
1575
+ ======================================== */
1576
+
1577
+ /* ========================================
1578
+ Citation
1579
+ ======================================== */
1580
+
1581
+ .citation {
1582
+ padding: 4rem 2rem;
1583
+ background: var(--bg-secondary);
1584
+ border-top: 1px solid var(--border);
1585
+ }
1586
+
1587
+ .citation-inner {
1588
+ max-width: 800px;
1589
+ margin: 0 auto;
1590
+ }
1591
+
1592
+ .citation h2 {
1593
+ font-family: var(--font-display);
1594
+ font-size: 2rem;
1595
+ letter-spacing: 0.08em;
1596
+ color: var(--text-primary);
1597
+ text-align: center;
1598
+ margin-bottom: 0.75rem;
1599
+ }
1600
+
1601
+ .citation-intro {
1602
+ text-align: center;
1603
+ color: var(--text-secondary);
1604
+ font-size: 0.95rem;
1605
+ margin-bottom: 1.5rem;
1606
+ }
1607
+
1608
+ .citation-block {
1609
+ position: relative;
1610
+ background: var(--bg-primary);
1611
+ border: 1px solid var(--border);
1612
+ border-radius: var(--radius-lg);
1613
+ padding: 1.5rem;
1614
+ overflow-x: auto;
1615
+ }
1616
+
1617
+ .citation-block pre {
1618
+ margin: 0;
1619
+ font-family: var(--font-mono);
1620
+ font-size: 0.82rem;
1621
+ line-height: 1.65;
1622
+ color: var(--text-secondary);
1623
+ white-space: pre;
1624
+ }
1625
+
1626
+ .citation-block code {
1627
+ font-family: inherit;
1628
+ }
1629
+
1630
+ .whitepaper-btn {
1631
+ display: flex;
1632
+ align-items: center;
1633
+ justify-content: center;
1634
+ gap: 8px;
1635
+ margin: 0 auto 1.5rem;
1636
+ padding: 10px 24px;
1637
+ background: var(--accent-dim);
1638
+ border: 1px solid var(--accent);
1639
+ border-radius: var(--radius);
1640
+ color: var(--accent);
1641
+ font-family: var(--font-mono);
1642
+ font-size: 0.85rem;
1643
+ font-weight: 500;
1644
+ text-decoration: none;
1645
+ transition: all 0.2s;
1646
+ width: fit-content;
1647
+ }
1648
+
1649
+ .whitepaper-btn:hover {
1650
+ background: rgba(0, 212, 255, 0.20);
1651
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
1652
+ }
1653
+
1654
+ .citation-copy {
1655
+ position: absolute;
1656
+ top: 0.75rem;
1657
+ right: 0.75rem;
1658
+ background: var(--bg-card);
1659
+ border: 1px solid var(--border);
1660
+ border-radius: 6px;
1661
+ padding: 6px 8px;
1662
+ cursor: pointer;
1663
+ color: var(--text-secondary);
1664
+ transition: all 0.2s;
1665
+ display: flex;
1666
+ align-items: center;
1667
+ gap: 4px;
1668
+ font-family: var(--font-mono);
1669
+ font-size: 0.7rem;
1670
+ }
1671
+
1672
+ .citation-copy:hover {
1673
+ color: var(--accent);
1674
+ border-color: var(--accent);
1675
+ background: var(--accent-dim);
1676
+ }
1677
+
1678
+ .citation-copy.copied {
1679
+ color: var(--success);
1680
+ border-color: var(--success);
1681
+ }
1682
+
1683
+
1684
+ /* ========================================
1685
+ Disclaimer
1686
+ ======================================== */
1687
+
1688
+ .disclaimer {
1689
+ border-top: 1px solid var(--border);
1690
+ background: var(--bg-primary);
1691
+ }
1692
+
1693
+ .disclaimer-inner {
1694
+ max-width: 1440px;
1695
+ margin: 0 auto;
1696
+ padding: 3rem 2rem;
1697
+ }
1698
+
1699
+ .disclaimer h3 {
1700
+ font-family: var(--font-mono);
1701
+ font-size: 0.7rem;
1702
+ text-transform: uppercase;
1703
+ letter-spacing: 0.12em;
1704
+ color: var(--warm);
1705
+ margin-bottom: 1rem;
1706
+ }
1707
+
1708
+ .disclaimer p {
1709
+ font-size: 0.72rem;
1710
+ color: var(--text-tertiary);
1711
+ line-height: 1.7;
1712
+ margin-bottom: 0.75rem;
1713
+ }
1714
+
1715
+ .disclaimer p:last-child {
1716
+ margin-bottom: 0;
1717
+ }
1718
+
1719
+ .disclaimer p strong {
1720
+ color: var(--text-secondary);
1721
+ }
1722
+
1723
+
1724
+ /* ========================================
1725
+ Footer
1726
+ ======================================== */
1727
+
1728
+ footer {
1729
+ padding: 2.5rem 2rem;
1730
+ border-top: 1px solid var(--border);
1731
+ text-align: center;
1732
+ }
1733
+
1734
+ .footer-links {
1735
+ display: flex;
1736
+ justify-content: center;
1737
+ gap: 2rem;
1738
+ margin-bottom: 0.75rem;
1739
+ font-family: var(--font-mono);
1740
+ font-size: 0.75rem;
1741
+ letter-spacing: 0.04em;
1742
+ }
1743
+
1744
+ .footer-copy {
1745
+ font-size: 0.7rem;
1746
+ color: var(--text-tertiary);
1747
+ }
1748
+
1749
+
1750
+ /* ========================================
1751
+ Scroll Reveal
1752
+ ======================================== */
1753
+
1754
+ .reveal {
1755
+ opacity: 0;
1756
+ transform: translateY(18px);
1757
+ transition: opacity 0.6s ease, transform 0.6s ease;
1758
+ }
1759
+
1760
+ .reveal.revealed {
1761
+ opacity: 1;
1762
+ transform: none;
1763
+ }
1764
+
1765
+
1766
+ /* ========================================
1767
+ Responsive
1768
+ ======================================== */
1769
+
1770
+ @media (max-width: 1024px) {
1771
+ .about-process {
1772
+ flex-wrap: wrap;
1773
+ gap: 1rem;
1774
+ }
1775
+
1776
+ .process-step {
1777
+ flex: 1 1 calc(50% - 2rem);
1778
+ min-width: 200px;
1779
+ }
1780
+
1781
+ .process-connector {
1782
+ display: none;
1783
+ }
1784
+
1785
+ .equipment-sections {
1786
+ grid-template-columns: 1fr 1fr;
1787
+ gap: 2rem;
1788
+ }
1789
+ }
1790
+
1791
+ @media (max-width: 600px) {
1792
+ .equipment-sections {
1793
+ grid-template-columns: 1fr;
1794
+ }
1795
+ }
1796
+
1797
+ @media (max-width: 768px) {
1798
+ .hero { min-height: 45vh; }
1799
+
1800
+ .hero-title { font-size: 3.2rem; }
1801
+
1802
+ .stats-bar {
1803
+ flex-wrap: wrap;
1804
+ gap: 1.5rem 2.5rem;
1805
+ padding: 1.5rem;
1806
+ }
1807
+
1808
+ .controls {
1809
+ flex-direction: column;
1810
+ align-items: flex-start;
1811
+ }
1812
+
1813
+ .grid {
1814
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
1815
+ }
1816
+
1817
+ .pipeline-strip { transform: scale(0.85); }
1818
+
1819
+ .modal-grid { grid-template-columns: 1fr; }
1820
+
1821
+ .modal-content { padding: 1.5rem; }
1822
+ }
1823
+
1824
+ @media (max-width: 480px) {
1825
+ .hero-content { padding: 2.5rem 1.5rem 3rem; }
1826
+
1827
+ .hero-title { font-size: 2.8rem; }
1828
+
1829
+ .grid { grid-template-columns: 1fr; gap: 0.75rem; }
1830
+
1831
+ .card-media { aspect-ratio: 4/3; }
1832
+
1833
+ .card-info { padding: 0.6rem 0.75rem 0.75rem; }
1834
+ .card-title { font-size: 0.85rem; }
1835
+ .card-meta { font-size: 0.65rem; }
1836
+ .pipeline-strip { transform: scale(0.7); }
1837
+
1838
+ .stats-bar { gap: 1rem 2rem; }
1839
+ .stat-value { font-size: 1.6rem; }
1840
+
1841
+ .about-inner,
1842
+ .credits,
1843
+ .equipment { padding: 3rem 1.5rem; }
1844
+ }
1845
+
1846
+
1847
+ /* ========================================
1848
+ Carousel (mobile)
1849
+ ======================================== */
1850
+
1851
+ .carousel {
1852
+ display: flex;
1853
+ flex-direction: column;
1854
+ gap: 0.75rem;
1855
+ }
1856
+
1857
+ .carousel-counter {
1858
+ text-align: center;
1859
+ font-family: var(--font-mono);
1860
+ font-size: 0.75rem;
1861
+ color: var(--text-tertiary);
1862
+ letter-spacing: 0.08em;
1863
+ }
1864
+
1865
+ .carousel-card-wrap {
1866
+ min-height: 200px;
1867
+ }
1868
+
1869
+ .carousel-card-wrap .clip-card {
1870
+ opacity: 1;
1871
+ transform: none;
1872
+ }
1873
+
1874
+ .carousel-nav {
1875
+ display: flex;
1876
+ justify-content: center;
1877
+ gap: 1.5rem;
1878
+ padding: 0.25rem 0;
1879
+ }
1880
+
1881
+ .carousel-btn {
1882
+ width: 56px;
1883
+ height: 56px;
1884
+ border-radius: 50%;
1885
+ border: 1.5px solid var(--border-hover);
1886
+ background: var(--bg-card);
1887
+ color: var(--text-primary);
1888
+ font-size: 2rem;
1889
+ line-height: 1;
1890
+ cursor: pointer;
1891
+ display: flex;
1892
+ align-items: center;
1893
+ justify-content: center;
1894
+ transition: border-color 0.2s, background 0.2s;
1895
+ -webkit-tap-highlight-color: transparent;
1896
+ }
1897
+
1898
+ .carousel-btn:not(:disabled):active {
1899
+ background: var(--accent-dim);
1900
+ border-color: rgba(0, 212, 255, 0.35);
1901
+ color: var(--accent);
1902
+ }
1903
+
1904
+ .carousel-btn:disabled {
1905
+ opacity: 0.2;
1906
+ cursor: default;
1907
+ }