css-pkg-01 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,718 @@
1
+ :root {
2
+ --bg: #041214;
3
+ --surface: #0a2226;
4
+ --accent: #ffd166;
5
+ --accent2: #14b8a6;
6
+ --text: #effcff;
7
+ --muted: #8fb0b3;
8
+ --font-display: 'Russo One', sans-serif;
9
+ --font-body: 'Open Sans', sans-serif;
10
+ --glow-teal: 0 0 20px rgba(20, 184, 166, 0.3);
11
+ --glow-yellow: 0 0 15px rgba(255, 209, 102, 0.3);
12
+ }
13
+
14
+ * {
15
+ box-sizing: border-box;
16
+ margin: 0;
17
+ padding: 0;
18
+ }
19
+
20
+ body {
21
+ background-color: var(--bg);
22
+ color: var(--text);
23
+ font-family: var(--font-body);
24
+ line-height: 1.6;
25
+ -webkit-font-smoothing: antialiased;
26
+ overflow-x: hidden;
27
+ background-image: radial-gradient(circle at 50% 0%, #0a2226 0%, #041214 70%);
28
+ }
29
+
30
+ a {
31
+ color: var(--accent2);
32
+ text-decoration: none;
33
+ transition: color 0.3s ease, text-shadow 0.3s ease;
34
+ }
35
+
36
+ a:hover {
37
+ color: var(--accent);
38
+ text-shadow: var(--glow-yellow);
39
+ }
40
+
41
+ h1, h2, h3, h4, .brand {
42
+ font-family: var(--font-display);
43
+ text-transform: uppercase;
44
+ font-weight: normal;
45
+ letter-spacing: 1px;
46
+ }
47
+
48
+ .container {
49
+ width: 100%;
50
+ max-width: 1200px;
51
+ margin: 0 auto;
52
+ padding: 0 20px;
53
+ }
54
+
55
+ .btn {
56
+ display: inline-flex;
57
+ align-items: center;
58
+ justify-content: center;
59
+ padding: 12px 24px;
60
+ font-family: var(--font-display);
61
+ font-size: 0.9rem;
62
+ text-transform: uppercase;
63
+ letter-spacing: 1px;
64
+ border-radius: 4px;
65
+ cursor: pointer;
66
+ transition: all 0.3s ease;
67
+ min-height: 44px;
68
+ clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
69
+ }
70
+
71
+ .btn-primary {
72
+ background-color: var(--accent);
73
+ color: #000;
74
+ border: none;
75
+ }
76
+
77
+ .btn-primary:hover {
78
+ background-color: #ffde8a;
79
+ color: #000;
80
+ box-shadow: var(--glow-yellow);
81
+ transform: translateY(-2px);
82
+ }
83
+
84
+ .btn-secondary {
85
+ background-color: transparent;
86
+ color: var(--accent2);
87
+ border: 2px solid var(--accent2);
88
+ clip-path: none;
89
+ border-radius: 4px;
90
+ }
91
+
92
+ .btn-secondary:hover {
93
+ background-color: rgba(20, 184, 166, 0.1);
94
+ box-shadow: var(--glow-teal);
95
+ transform: translateY(-2px);
96
+ }
97
+
98
+ /* --- HEADER STYLES (Targeting verbatim HTML) --- */
99
+ header {
100
+ background-color: rgba(4, 18, 20, 0.95);
101
+ border-bottom: 1px solid rgba(20, 184, 166, 0.2);
102
+ position: sticky;
103
+ top: 0;
104
+ z-index: 100;
105
+ backdrop-filter: blur(10px);
106
+ }
107
+
108
+ .header-inner {
109
+ display: flex;
110
+ justify-content: space-between;
111
+ align-items: center;
112
+ height: 80px;
113
+ }
114
+
115
+ .brand {
116
+ font-size: 1.8rem;
117
+ color: var(--text);
118
+ display: flex;
119
+ align-items: center;
120
+ gap: 10px;
121
+ }
122
+
123
+ .brand span {
124
+ color: var(--accent);
125
+ }
126
+
127
+ .nav-links {
128
+ display: flex;
129
+ gap: 25px;
130
+ }
131
+
132
+ .nav-links a {
133
+ color: var(--text);
134
+ font-weight: 600;
135
+ font-size: 0.95rem;
136
+ position: relative;
137
+ }
138
+
139
+ .nav-links a::after {
140
+ content: '';
141
+ position: absolute;
142
+ bottom: -5px;
143
+ left: 0;
144
+ width: 0;
145
+ height: 2px;
146
+ background-color: var(--accent2);
147
+ transition: width 0.3s ease;
148
+ }
149
+
150
+ .nav-links a:hover {
151
+ color: var(--accent2);
152
+ text-shadow: none;
153
+ }
154
+
155
+ .nav-links a:hover::after {
156
+ width: 100%;
157
+ }
158
+
159
+ .header-actions {
160
+ display: flex;
161
+ gap: 15px;
162
+ align-items: center;
163
+ }
164
+
165
+ .mobile-toggle {
166
+ display: none;
167
+ background: none;
168
+ border: none;
169
+ color: var(--accent2);
170
+ font-size: 2rem;
171
+ cursor: pointer;
172
+ min-width: 44px;
173
+ min-height: 44px;
174
+ }
175
+
176
+ /* --- PAGE SPECIFIC: HERO BANNER --- */
177
+ .hero-banner {
178
+ padding: 60px 0 40px;
179
+ text-align: center;
180
+ position: relative;
181
+ border-bottom: 1px solid rgba(20, 184, 166, 0.1);
182
+ }
183
+
184
+ .hero-banner::before {
185
+ content: '';
186
+ position: absolute;
187
+ top: 0;
188
+ left: 50%;
189
+ transform: translateX(-50%);
190
+ width: 100%;
191
+ max-width: 800px;
192
+ height: 100%;
193
+ background: radial-gradient(ellipse at top, rgba(20, 184, 166, 0.15) 0%, transparent 70%);
194
+ pointer-events: none;
195
+ }
196
+
197
+ .breadcrumb {
198
+ font-size: 0.85rem;
199
+ color: var(--muted);
200
+ margin-bottom: 20px;
201
+ display: inline-block;
202
+ background: rgba(10, 34, 38, 0.6);
203
+ padding: 5px 15px;
204
+ border-radius: 20px;
205
+ border: 1px solid rgba(143, 176, 179, 0.2);
206
+ }
207
+
208
+ .hero-banner h1 {
209
+ font-size: clamp(1.8rem, 4vw, 3rem);
210
+ color: var(--text);
211
+ margin-bottom: 25px;
212
+ text-shadow: 0 4px 10px rgba(0,0,0,0.5);
213
+ line-height: 1.2;
214
+ }
215
+
216
+ .meta-chips {
217
+ display: flex;
218
+ justify-content: center;
219
+ gap: 15px;
220
+ flex-wrap: wrap;
221
+ }
222
+
223
+ .chip {
224
+ background-color: var(--surface);
225
+ color: var(--accent);
226
+ font-size: 0.85rem;
227
+ font-weight: 600;
228
+ padding: 6px 16px;
229
+ border-radius: 4px;
230
+ border-left: 3px solid var(--accent);
231
+ box-shadow: 0 2px 5px rgba(0,0,0,0.3);
232
+ }
233
+
234
+ /* --- PAGE SPECIFIC: CONTENT ARENA (MONITOR VIBE) --- */
235
+ .monitor-arena {
236
+ background-image:
237
+ linear-gradient(rgba(20, 184, 166, 0.03) 1px, transparent 1px),
238
+ linear-gradient(90deg, rgba(20, 184, 166, 0.03) 1px, transparent 1px);
239
+ background-size: 40px 40px;
240
+ padding: 50px 0;
241
+ position: relative;
242
+ }
243
+
244
+ .intro-block {
245
+ background: linear-gradient(135deg, var(--surface) 0%, rgba(10, 34, 38, 0.4) 100%);
246
+ padding: 40px;
247
+ border-left: 4px solid var(--accent2);
248
+ margin-bottom: 60px;
249
+ font-size: 1.1rem;
250
+ color: var(--effcff);
251
+ box-shadow: var(--glow-teal);
252
+ position: relative;
253
+ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
254
+ }
255
+
256
+ .intro-block::after {
257
+ content: '';
258
+ position: absolute;
259
+ bottom: 0;
260
+ right: 0;
261
+ width: 20px;
262
+ height: 20px;
263
+ background: var(--accent2);
264
+ }
265
+
266
+ .content-grid {
267
+ display: grid;
268
+ gap: 50px;
269
+ }
270
+
271
+ .data-section {
272
+ position: relative;
273
+ padding-left: 40px;
274
+ }
275
+
276
+ .data-section::before {
277
+ content: '';
278
+ position: absolute;
279
+ left: 0;
280
+ top: 5px;
281
+ width: 12px;
282
+ height: 12px;
283
+ background-color: var(--accent);
284
+ border-radius: 50%;
285
+ box-shadow: var(--glow-yellow);
286
+ }
287
+
288
+ .data-section::after {
289
+ content: '';
290
+ position: absolute;
291
+ left: 5px;
292
+ top: 25px;
293
+ bottom: -30px;
294
+ width: 2px;
295
+ background: linear-gradient(to bottom, var(--accent) 0%, rgba(255, 209, 102, 0) 100%);
296
+ }
297
+
298
+ .data-section:last-child::after {
299
+ display: none;
300
+ }
301
+
302
+ .data-section h2 {
303
+ color: var(--accent2);
304
+ font-size: 1.5rem;
305
+ margin-bottom: 20px;
306
+ display: flex;
307
+ align-items: center;
308
+ gap: 15px;
309
+ }
310
+
311
+ .data-section p {
312
+ margin-bottom: 20px;
313
+ color: var(--muted);
314
+ font-size: 1.05rem;
315
+ }
316
+
317
+ .data-section p:last-child {
318
+ margin-bottom: 0;
319
+ }
320
+
321
+ .data-section a {
322
+ font-weight: 700;
323
+ text-decoration: underline;
324
+ text-decoration-color: rgba(20, 184, 166, 0.4);
325
+ text-underline-offset: 4px;
326
+ }
327
+
328
+ .data-section a:hover {
329
+ text-decoration-color: var(--accent);
330
+ }
331
+
332
+ .data-list {
333
+ list-style: none;
334
+ margin-top: 20px;
335
+ background: rgba(10, 34, 38, 0.5);
336
+ padding: 25px;
337
+ border-radius: 8px;
338
+ border: 1px solid rgba(20, 184, 166, 0.2);
339
+ }
340
+
341
+ .data-list li {
342
+ margin-bottom: 15px;
343
+ padding-left: 30px;
344
+ position: relative;
345
+ color: var(--text);
346
+ }
347
+
348
+ .data-list li:last-child {
349
+ margin-bottom: 0;
350
+ }
351
+
352
+ .data-list li::before {
353
+ content: '⚡';
354
+ position: absolute;
355
+ left: 0;
356
+ top: -2px;
357
+ color: var(--accent);
358
+ font-size: 1.2rem;
359
+ }
360
+
361
+ /* --- LIVE UPDATE BADGE (For Section 4) --- */
362
+ .live-badge {
363
+ display: inline-flex;
364
+ align-items: center;
365
+ gap: 6px;
366
+ font-size: 0.7rem;
367
+ background: rgba(20, 184, 166, 0.1);
368
+ border: 1px solid var(--accent2);
369
+ padding: 4px 10px;
370
+ border-radius: 20px;
371
+ color: var(--accent2);
372
+ vertical-align: middle;
373
+ margin-left: 10px;
374
+ }
375
+
376
+ .live-dot {
377
+ width: 8px;
378
+ height: 8px;
379
+ background-color: var(--accent2);
380
+ border-radius: 50%;
381
+ animation: pulse 2s infinite;
382
+ }
383
+
384
+ @keyframes pulse {
385
+ 0% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.7); }
386
+ 70% { box-shadow: 0 0 0 6px rgba(20, 184, 166, 0); }
387
+ 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
388
+ }
389
+
390
+ /* --- FAQ SECTION --- */
391
+ .faq-arena {
392
+ margin-top: 80px;
393
+ padding-top: 60px;
394
+ border-top: 1px dashed rgba(143, 176, 179, 0.3);
395
+ }
396
+
397
+ .faq-arena h2 {
398
+ text-align: center;
399
+ color: var(--text);
400
+ margin-bottom: 40px;
401
+ font-size: 2rem;
402
+ }
403
+
404
+ .faq-grid {
405
+ max-width: 900px;
406
+ margin: 0 auto;
407
+ display: flex;
408
+ flex-direction: column;
409
+ gap: 15px;
410
+ }
411
+
412
+ details {
413
+ background-color: var(--surface);
414
+ border: 1px solid rgba(20, 184, 166, 0.2);
415
+ border-radius: 6px;
416
+ overflow: hidden;
417
+ transition: all 0.3s ease;
418
+ }
419
+
420
+ details[open] {
421
+ border-color: var(--accent2);
422
+ box-shadow: 0 5px 15px rgba(0,0,0,0.3);
423
+ }
424
+
425
+ summary {
426
+ padding: 20px;
427
+ font-family: var(--font-display);
428
+ font-size: 1.1rem;
429
+ color: var(--accent);
430
+ cursor: pointer;
431
+ list-style: none;
432
+ position: relative;
433
+ display: flex;
434
+ justify-content: space-between;
435
+ align-items: center;
436
+ }
437
+
438
+ summary::-webkit-details-marker {
439
+ display: none;
440
+ }
441
+
442
+ summary::after {
443
+ content: '+';
444
+ font-size: 1.5rem;
445
+ color: var(--muted);
446
+ transition: transform 0.3s ease;
447
+ }
448
+
449
+ details[open] summary::after {
450
+ content: '−';
451
+ color: var(--accent2);
452
+ transform: rotate(180deg);
453
+ }
454
+
455
+ details p {
456
+ padding: 0 20px 20px;
457
+ color: var(--muted);
458
+ border-top: 1px solid rgba(255,255,255,0.05);
459
+ margin-top: 10px;
460
+ padding-top: 15px;
461
+ }
462
+
463
+ /* --- RELATED PAGES (TERMINAL VIBE) --- */
464
+ .terminal-nav {
465
+ margin-top: 80px;
466
+ background: linear-gradient(to right, rgba(10, 34, 38, 0.8), rgba(4, 18, 20, 0.9));
467
+ padding: 50px 0;
468
+ border-top: 2px solid var(--accent2);
469
+ border-bottom: 2px solid var(--accent2);
470
+ }
471
+
472
+ .terminal-nav h2 {
473
+ text-align: center;
474
+ margin-bottom: 30px;
475
+ color: var(--text);
476
+ }
477
+
478
+ .terminal-grid {
479
+ display: flex;
480
+ justify-content: center;
481
+ gap: 20px;
482
+ flex-wrap: wrap;
483
+ }
484
+
485
+ .terminal-card {
486
+ background-color: var(--bg);
487
+ border: 1px solid rgba(20, 184, 166, 0.4);
488
+ padding: 20px 30px;
489
+ font-family: var(--font-display);
490
+ color: var(--text);
491
+ text-transform: uppercase;
492
+ letter-spacing: 1px;
493
+ transform: skewX(-15deg);
494
+ transition: all 0.3s ease;
495
+ display: block;
496
+ min-width: 200px;
497
+ text-align: center;
498
+ }
499
+
500
+ .terminal-card span {
501
+ display: block;
502
+ transform: skewX(15deg); /* Un-skew text */
503
+ }
504
+
505
+ .terminal-card:hover {
506
+ background-color: var(--accent2);
507
+ color: var(--bg);
508
+ box-shadow: var(--glow-teal);
509
+ transform: skewX(-15deg) translateY(-5px);
510
+ }
511
+
512
+ /* --- FINAL CTA --- */
513
+ .cta-stadium {
514
+ margin: 80px auto;
515
+ max-width: 1000px;
516
+ text-align: center;
517
+ padding: 60px 40px;
518
+ background: radial-gradient(circle at center, var(--surface) 0%, var(--bg) 100%);
519
+ border: 1px solid rgba(255, 209, 102, 0.2);
520
+ border-radius: 16px;
521
+ position: relative;
522
+ overflow: hidden;
523
+ }
524
+
525
+ .cta-stadium::before {
526
+ content: '';
527
+ position: absolute;
528
+ top: 0; left: 0; right: 0; height: 4px;
529
+ background: linear-gradient(90deg, transparent, var(--accent), transparent);
530
+ }
531
+
532
+ .cta-stadium h2 {
533
+ font-size: 2.2rem;
534
+ color: var(--accent);
535
+ margin-bottom: 20px;
536
+ text-shadow: var(--glow-yellow);
537
+ }
538
+
539
+ .cta-stadium p {
540
+ font-size: 1.1rem;
541
+ color: var(--muted);
542
+ margin-bottom: 35px;
543
+ max-width: 600px;
544
+ margin-left: auto;
545
+ margin-right: auto;
546
+ }
547
+
548
+ .cta-actions {
549
+ display: flex;
550
+ justify-content: center;
551
+ gap: 20px;
552
+ flex-wrap: wrap;
553
+ }
554
+
555
+ /* --- FOOTER STYLES (Targeting verbatim HTML) --- */
556
+ footer {
557
+ background-color: #02090a;
558
+ padding: 60px 0 20px;
559
+ border-top: 1px solid rgba(20, 184, 166, 0.2);
560
+ margin-top: 40px;
561
+ }
562
+
563
+ .footer-grid {
564
+ display: grid;
565
+ grid-template-columns: 2fr 1fr 1fr;
566
+ gap: 40px;
567
+ margin-bottom: 40px;
568
+ }
569
+
570
+ .footer-brand h2 {
571
+ font-size: 2rem;
572
+ color: var(--text);
573
+ margin-bottom: 15px;
574
+ }
575
+
576
+ .footer-brand h2 span {
577
+ color: var(--accent);
578
+ }
579
+
580
+ .footer-tagline {
581
+ color: var(--muted);
582
+ max-width: 300px;
583
+ }
584
+
585
+ .footer-links-group h4 {
586
+ color: var(--accent2);
587
+ margin-bottom: 20px;
588
+ font-size: 1.1rem;
589
+ }
590
+
591
+ .footer-links-group a {
592
+ display: block;
593
+ color: var(--muted);
594
+ margin-bottom: 10px;
595
+ transition: color 0.3s;
596
+ }
597
+
598
+ .footer-links-group a:hover {
599
+ color: var(--accent);
600
+ text-shadow: none;
601
+ }
602
+
603
+ .footer-bottom {
604
+ text-align: center;
605
+ padding-top: 20px;
606
+ border-top: 1px solid rgba(255,255,255,0.05);
607
+ color: #5a7375;
608
+ font-size: 0.9rem;
609
+ }
610
+
611
+ /* --- RESPONSIVE --- */
612
+ @media (max-width: 1024px) {
613
+ .footer-grid {
614
+ grid-template-columns: 1fr 1fr;
615
+ }
616
+ .footer-brand {
617
+ grid-column: 1 / -1;
618
+ }
619
+ }
620
+
621
+ @media (max-width: 768px) {
622
+ .header-inner {
623
+ height: 70px;
624
+ }
625
+ .nav-links {
626
+ display: none;
627
+ position: absolute;
628
+ top: 70px;
629
+ left: 0;
630
+ width: 100%;
631
+ background-color: var(--surface);
632
+ flex-direction: column;
633
+ padding: 20px;
634
+ gap: 15px;
635
+ border-bottom: 1px solid var(--accent2);
636
+ }
637
+ .nav-links.active {
638
+ display: flex;
639
+ }
640
+ .header-actions .btn {
641
+ display: none;
642
+ }
643
+ .mobile-toggle {
644
+ display: block;
645
+ }
646
+
647
+ .hero-banner h1 {
648
+ font-size: 1.8rem;
649
+ }
650
+
651
+ .intro-block {
652
+ padding: 25px;
653
+ font-size: 1rem;
654
+ }
655
+
656
+ .data-section {
657
+ padding-left: 30px;
658
+ }
659
+
660
+ .data-section h2 {
661
+ font-size: 1.3rem;
662
+ }
663
+
664
+ .terminal-grid {
665
+ flex-direction: column;
666
+ align-items: center;
667
+ }
668
+
669
+ .terminal-card {
670
+ width: 80%;
671
+ transform: skewX(0);
672
+ }
673
+ .terminal-card span {
674
+ transform: skewX(0);
675
+ }
676
+ .terminal-card:hover {
677
+ transform: translateY(-5px);
678
+ }
679
+
680
+ .cta-stadium {
681
+ padding: 40px 20px;
682
+ margin: 50px 20px;
683
+ }
684
+ .cta-stadium h2 {
685
+ font-size: 1.8rem;
686
+ }
687
+ .cta-actions {
688
+ flex-direction: column;
689
+ }
690
+ .cta-actions .btn {
691
+ width: 100%;
692
+ }
693
+
694
+ .footer-grid {
695
+ grid-template-columns: 1fr;
696
+ gap: 30px;
697
+ }
698
+ }
699
+
700
+ @media (max-width: 390px) {
701
+ .container { padding: 0 15px; }
702
+ .hero-banner { padding: 40px 0 30px; }
703
+ .meta-chips { flex-direction: column; align-items: center; gap: 10px; }
704
+ .data-section::after { left: 5px; }
705
+ .data-section::before { left: 0; width: 10px; height: 10px; top: 6px; }
706
+ }
707
+
708
+
709
+ /* pipeline image & layout guards */
710
+ html, body { overflow-x: clip; }
711
+ img { max-width: 100%; height: auto; }
712
+ img.site-logo { height: 40px; width: auto; max-width: 240px; object-fit: contain; flex: none; }
713
+ header .logo a { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
714
+ img.hero-visual { width: 100%; max-width: 560px; height: auto; object-fit: cover; border-radius: 16px; display: block; margin-inline: auto; }
715
+ img[class^="strip-"], img[class*=" strip-"] { width: 100%; height: auto; display: block; border-radius: 12px; object-fit: cover; }
716
+ /* 合规声明块(zb-disclaimer,全站 footer) */
717
+ .zb-disclaimer { margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: .72rem; line-height: 1.65; opacity: .8; display: grid; gap: 6px; }
718
+ .zb-disclaimer .zb-18 { justify-self: start; display: inline-flex; align-items: center; padding: 2px 10px; border: 1.5px solid currentColor; border-radius: 8px; font-weight: 800; letter-spacing: 1px; }