css-pkg-01 1.2.0 → 1.3.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,587 @@
1
+ :root {
2
+ --bg: #150715;
3
+ --surface: #291033;
4
+ --accent: #f5c542;
5
+ --accent2: #e040fb;
6
+ --text: #fdf4ff;
7
+ --muted: #b595b8;
8
+ --font-display: 'Orbitron', sans-serif;
9
+ --font-body: 'Exo 2', sans-serif;
10
+ --gold-gradient: linear-gradient(135deg, #f5c542 0%, #c4961a 100%);
11
+ --surface-gradient: linear-gradient(180deg, #291033 0%, #1a0a21 100%);
12
+ }
13
+
14
+ * {
15
+ margin: 0;
16
+ padding: 0;
17
+ box-sizing: border-box;
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
+ }
27
+
28
+ a {
29
+ color: var(--accent);
30
+ text-decoration: none;
31
+ transition: color 0.3s ease;
32
+ }
33
+
34
+ a:hover {
35
+ color: var(--accent2);
36
+ }
37
+
38
+ .container {
39
+ width: 100%;
40
+ max-width: 1200px;
41
+ margin: 0 auto;
42
+ padding: 0 20px;
43
+ }
44
+
45
+ h1, h2, h3 {
46
+ font-family: var(--font-display);
47
+ font-weight: 700;
48
+ line-height: 1.3;
49
+ }
50
+
51
+ /* --- Header Styles (Matching provided HTML structure) --- */
52
+ header {
53
+ background-color: rgba(21, 7, 21, 0.95);
54
+ backdrop-filter: blur(10px);
55
+ border-bottom: 1px solid rgba(245, 197, 66, 0.2);
56
+ position: sticky;
57
+ top: 0;
58
+ z-index: 100;
59
+ }
60
+
61
+ .nav-container {
62
+ display: flex;
63
+ justify-content: space-between;
64
+ align-items: center;
65
+ height: 70px;
66
+ }
67
+
68
+ .logo {
69
+ font-family: var(--font-display);
70
+ font-size: 24px;
71
+ font-weight: 900;
72
+ color: var(--text);
73
+ text-transform: uppercase;
74
+ letter-spacing: 1px;
75
+ }
76
+
77
+ .logo span {
78
+ color: var(--accent);
79
+ }
80
+
81
+ .nav-links {
82
+ display: none;
83
+ list-style: none;
84
+ }
85
+
86
+ .nav-links li {
87
+ margin-left: 24px;
88
+ }
89
+
90
+ .nav-links a {
91
+ color: var(--text);
92
+ font-weight: 600;
93
+ font-size: 15px;
94
+ display: flex;
95
+ align-items: center;
96
+ height: 44px; /* Touch target */
97
+ }
98
+
99
+ .nav-links a:hover {
100
+ color: var(--accent);
101
+ }
102
+
103
+ .mobile-toggle {
104
+ display: block;
105
+ background: none;
106
+ border: none;
107
+ color: var(--accent);
108
+ font-size: 28px;
109
+ cursor: pointer;
110
+ height: 44px;
111
+ width: 44px;
112
+ display: flex;
113
+ align-items: center;
114
+ justify-content: center;
115
+ }
116
+
117
+ @media (min-width: 1024px) {
118
+ .mobile-toggle { display: none; }
119
+ .nav-links { display: flex; }
120
+ }
121
+
122
+ /* Mobile Menu Active State */
123
+ .nav-links.active {
124
+ display: flex;
125
+ flex-direction: column;
126
+ position: absolute;
127
+ top: 70px;
128
+ left: 0;
129
+ width: 100%;
130
+ background-color: var(--surface);
131
+ padding: 20px;
132
+ border-bottom: 2px solid var(--accent);
133
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
134
+ }
135
+
136
+ .nav-links.active li {
137
+ margin: 0;
138
+ border-bottom: 1px solid rgba(255,255,255,0.05);
139
+ }
140
+
141
+ /* --- Hero Banner --- */
142
+ .hero {
143
+ padding: 60px 0 40px;
144
+ background: radial-gradient(circle at top center, #3d184d 0%, var(--bg) 70%);
145
+ text-align: center;
146
+ border-bottom: 1px solid rgba(245, 197, 66, 0.1);
147
+ position: relative;
148
+ overflow: hidden;
149
+ }
150
+
151
+ .hero::before {
152
+ content: '';
153
+ position: absolute;
154
+ top: -50%; left: -50%; width: 200%; height: 200%;
155
+ background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(245, 197, 66, 0.02) 10px, rgba(245, 197, 66, 0.02) 20px);
156
+ z-index: 0;
157
+ pointer-events: none;
158
+ }
159
+
160
+ .hero .container {
161
+ position: relative;
162
+ z-index: 1;
163
+ }
164
+
165
+ .breadcrumb {
166
+ font-size: 14px;
167
+ color: var(--muted);
168
+ margin-bottom: 24px;
169
+ display: inline-block;
170
+ background: rgba(41, 16, 51, 0.6);
171
+ padding: 6px 16px;
172
+ border-radius: 20px;
173
+ border: 1px solid rgba(181, 149, 184, 0.2);
174
+ }
175
+
176
+ .breadcrumb a {
177
+ color: var(--accent);
178
+ }
179
+
180
+ h1 {
181
+ font-size: 32px;
182
+ color: var(--accent);
183
+ margin-bottom: 24px;
184
+ text-shadow: 0 2px 10px rgba(245, 197, 66, 0.2);
185
+ }
186
+
187
+ .meta-chips {
188
+ display: flex;
189
+ justify-content: center;
190
+ gap: 12px;
191
+ flex-wrap: wrap;
192
+ }
193
+
194
+ .chip {
195
+ font-size: 12px;
196
+ font-weight: 600;
197
+ color: var(--text);
198
+ background: rgba(224, 64, 251, 0.15);
199
+ border: 1px solid rgba(224, 64, 251, 0.4);
200
+ padding: 6px 14px;
201
+ border-radius: 4px;
202
+ text-transform: uppercase;
203
+ letter-spacing: 1px;
204
+ font-family: var(--font-display);
205
+ }
206
+
207
+ /* --- Main Content Area --- */
208
+ .page-content {
209
+ padding: 60px 0;
210
+ }
211
+
212
+ .intro-box {
213
+ background: var(--surface-gradient);
214
+ border-left: 4px solid var(--accent);
215
+ padding: 30px;
216
+ border-radius: 0 8px 8px 0;
217
+ margin-bottom: 50px;
218
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
219
+ font-size: 18px;
220
+ color: var(--text);
221
+ position: relative;
222
+ }
223
+
224
+ /* <!-- IMG:crown-watermark --> */
225
+ .intro-box::after {
226
+ content: '♚';
227
+ position: absolute;
228
+ right: 20px;
229
+ bottom: -10px;
230
+ font-size: 80px;
231
+ color: rgba(245, 197, 66, 0.05);
232
+ line-height: 1;
233
+ pointer-events: none;
234
+ }
235
+
236
+ .content-section {
237
+ margin-bottom: 50px;
238
+ }
239
+
240
+ .content-section h2 {
241
+ font-size: 24px;
242
+ color: var(--text);
243
+ margin-bottom: 20px;
244
+ display: flex;
245
+ align-items: center;
246
+ gap: 12px;
247
+ }
248
+
249
+ .content-section h2::before {
250
+ content: '';
251
+ display: inline-block;
252
+ width: 24px;
253
+ height: 2px;
254
+ background: var(--accent);
255
+ }
256
+
257
+ .content-section p {
258
+ margin-bottom: 20px;
259
+ color: #d8c8d9;
260
+ }
261
+
262
+ .content-section a {
263
+ text-decoration: underline;
264
+ text-decoration-color: rgba(245, 197, 66, 0.5);
265
+ text-underline-offset: 4px;
266
+ }
267
+
268
+ /* Specialized Section Layouts */
269
+ .card-grid {
270
+ display: grid;
271
+ grid-template-columns: 1fr;
272
+ gap: 30px;
273
+ margin-top: 30px;
274
+ }
275
+
276
+ .jewel-card {
277
+ background: var(--surface);
278
+ border: 1px solid rgba(224, 64, 251, 0.2);
279
+ border-radius: 12px;
280
+ padding: 30px;
281
+ position: relative;
282
+ box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.4);
283
+ transition: transform 0.3s ease;
284
+ }
285
+
286
+ .jewel-card:hover {
287
+ transform: translateY(-5px);
288
+ border-color: rgba(245, 197, 66, 0.4);
289
+ }
290
+
291
+ .jewel-card::before {
292
+ content: '';
293
+ position: absolute;
294
+ top: 0; left: 10%; right: 10%; height: 1px;
295
+ background: linear-gradient(90deg, transparent, var(--accent), transparent);
296
+ }
297
+
298
+ .custom-list {
299
+ list-style: none;
300
+ margin: 20px 0;
301
+ padding: 0;
302
+ }
303
+
304
+ .custom-list li {
305
+ position: relative;
306
+ padding-left: 35px;
307
+ margin-bottom: 16px;
308
+ color: #d8c8d9;
309
+ }
310
+
311
+ .custom-list li::before {
312
+ content: '♦';
313
+ position: absolute;
314
+ left: 0;
315
+ top: 2px;
316
+ color: var(--accent);
317
+ font-size: 18px;
318
+ font-family: var(--font-display);
319
+ }
320
+
321
+ .warning-box {
322
+ background: rgba(224, 64, 251, 0.05);
323
+ border: 1px solid var(--accent2);
324
+ padding: 25px;
325
+ border-radius: 8px;
326
+ }
327
+
328
+ /* --- FAQ Section --- */
329
+ .faq-wrapper {
330
+ margin-top: 60px;
331
+ background: var(--surface);
332
+ padding: 40px 30px;
333
+ border-radius: 12px;
334
+ border-top: 3px solid var(--accent);
335
+ }
336
+
337
+ .faq-wrapper h2 {
338
+ text-align: center;
339
+ margin-bottom: 30px;
340
+ color: var(--accent);
341
+ }
342
+
343
+ .faq-wrapper h2::before { display: none; }
344
+
345
+ details {
346
+ background: rgba(21, 7, 21, 0.6);
347
+ border: 1px solid rgba(181, 149, 184, 0.2);
348
+ border-radius: 6px;
349
+ margin-bottom: 16px;
350
+ overflow: hidden;
351
+ }
352
+
353
+ summary {
354
+ padding: 20px;
355
+ font-family: var(--font-display);
356
+ font-weight: 600;
357
+ font-size: 16px;
358
+ cursor: pointer;
359
+ list-style: none;
360
+ display: flex;
361
+ justify-content: space-between;
362
+ align-items: center;
363
+ color: var(--text);
364
+ min-height: 60px; /* Touch target */
365
+ }
366
+
367
+ summary::-webkit-details-marker {
368
+ display: none;
369
+ }
370
+
371
+ summary::after {
372
+ content: '+';
373
+ color: var(--accent);
374
+ font-size: 24px;
375
+ transition: transform 0.3s ease;
376
+ }
377
+
378
+ details[open] summary::after {
379
+ transform: rotate(45deg);
380
+ color: var(--accent2);
381
+ }
382
+
383
+ details p {
384
+ padding: 0 20px 20px;
385
+ margin: 0;
386
+ color: var(--muted);
387
+ border-top: 1px solid rgba(255,255,255,0.05);
388
+ padding-top: 20px;
389
+ }
390
+
391
+ /* --- Related Links --- */
392
+ .related-nav {
393
+ margin: 60px 0;
394
+ text-align: center;
395
+ }
396
+
397
+ .related-nav h3 {
398
+ margin-bottom: 24px;
399
+ color: var(--muted);
400
+ font-size: 18px;
401
+ text-transform: uppercase;
402
+ letter-spacing: 2px;
403
+ }
404
+
405
+ .nav-grid {
406
+ display: flex;
407
+ flex-wrap: wrap;
408
+ justify-content: center;
409
+ gap: 16px;
410
+ }
411
+
412
+ .nav-grid a {
413
+ display: inline-flex;
414
+ align-items: center;
415
+ justify-content: center;
416
+ background: var(--surface);
417
+ border: 1px solid rgba(245, 197, 66, 0.3);
418
+ color: var(--text);
419
+ padding: 12px 24px;
420
+ border-radius: 30px;
421
+ font-family: var(--font-display);
422
+ font-size: 14px;
423
+ font-weight: 600;
424
+ min-height: 44px;
425
+ text-transform: capitalize;
426
+ }
427
+
428
+ .nav-grid a:hover {
429
+ background: rgba(245, 197, 66, 0.1);
430
+ border-color: var(--accent);
431
+ color: var(--accent);
432
+ }
433
+
434
+ /* --- CTA Section --- */
435
+ .cta-block {
436
+ background: linear-gradient(45deg, #291033 0%, #4a195e 100%);
437
+ border: 2px solid var(--accent);
438
+ border-radius: 16px;
439
+ padding: 50px 30px;
440
+ text-align: center;
441
+ margin: 60px 0;
442
+ position: relative;
443
+ overflow: hidden;
444
+ }
445
+
446
+ .cta-block h2 {
447
+ font-size: 28px;
448
+ color: var(--text);
449
+ margin-bottom: 16px;
450
+ position: relative;
451
+ z-index: 2;
452
+ }
453
+ .cta-block h2::before { display: none; }
454
+
455
+ .cta-block p {
456
+ color: #e8ddeb;
457
+ margin-bottom: 30px;
458
+ font-size: 16px;
459
+ position: relative;
460
+ z-index: 2;
461
+ }
462
+
463
+ .btn-group {
464
+ display: flex;
465
+ gap: 20px;
466
+ justify-content: center;
467
+ flex-wrap: wrap;
468
+ position: relative;
469
+ z-index: 2;
470
+ }
471
+
472
+ .btn {
473
+ display: inline-flex;
474
+ align-items: center;
475
+ justify-content: center;
476
+ min-height: 50px;
477
+ padding: 0 32px;
478
+ font-family: var(--font-display);
479
+ font-weight: 700;
480
+ font-size: 16px;
481
+ border-radius: 8px;
482
+ text-transform: uppercase;
483
+ letter-spacing: 1px;
484
+ transition: all 0.3s ease;
485
+ text-decoration: none !important;
486
+ }
487
+
488
+ .btn-primary {
489
+ background: var(--gold-gradient);
490
+ color: #150715;
491
+ border: none;
492
+ box-shadow: 0 4px 15px rgba(245, 197, 66, 0.4);
493
+ }
494
+
495
+ .btn-primary:hover {
496
+ transform: translateY(-2px);
497
+ box-shadow: 0 6px 20px rgba(245, 197, 66, 0.6);
498
+ color: #000;
499
+ }
500
+
501
+ .btn-secondary {
502
+ background: transparent;
503
+ color: var(--text);
504
+ border: 2px solid var(--accent2);
505
+ }
506
+
507
+ .btn-secondary:hover {
508
+ background: rgba(224, 64, 251, 0.1);
509
+ border-color: #f080ff;
510
+ color: #fff;
511
+ }
512
+
513
+ /* --- Footer Styles (Matching provided HTML) --- */
514
+ footer {
515
+ background-color: #0d040d;
516
+ border-top: 1px solid rgba(245, 197, 66, 0.2);
517
+ padding: 60px 0 30px;
518
+ text-align: center;
519
+ }
520
+
521
+ .footer-logo {
522
+ font-family: var(--font-display);
523
+ font-size: 32px;
524
+ font-weight: 900;
525
+ color: var(--accent);
526
+ text-transform: uppercase;
527
+ letter-spacing: 2px;
528
+ margin-bottom: 16px;
529
+ }
530
+
531
+ .footer-tagline {
532
+ color: var(--muted);
533
+ font-style: italic;
534
+ margin-bottom: 30px;
535
+ font-size: 14px;
536
+ }
537
+
538
+ .footer-links {
539
+ list-style: none;
540
+ display: flex;
541
+ flex-wrap: wrap;
542
+ justify-content: center;
543
+ gap: 15px 25px;
544
+ margin-bottom: 40px;
545
+ }
546
+
547
+ .footer-links a {
548
+ color: var(--text);
549
+ font-size: 14px;
550
+ min-height: 44px;
551
+ display: inline-flex;
552
+ align-items: center;
553
+ }
554
+
555
+ .footer-links a:hover {
556
+ color: var(--accent2);
557
+ }
558
+
559
+ .copyright {
560
+ color: rgba(181, 149, 184, 0.5);
561
+ font-size: 12px;
562
+ border-top: 1px solid rgba(255,255,255,0.05);
563
+ padding-top: 20px;
564
+ }
565
+
566
+ /* Media Queries */
567
+ @media (min-width: 768px) {
568
+ h1 { font-size: 42px; }
569
+ .card-grid { grid-template-columns: 1fr 1fr; }
570
+ .intro-box { font-size: 20px; padding: 40px; }
571
+ }
572
+
573
+ @media (min-width: 1024px) {
574
+ .page-content { padding: 80px 0; }
575
+ }
576
+
577
+
578
+ /* pipeline image & layout guards */
579
+ html, body { overflow-x: clip; }
580
+ img { max-width: 100%; height: auto; }
581
+ img.site-logo { height: 40px; width: auto; max-width: 240px; object-fit: contain; flex: none; }
582
+ header .logo a { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
583
+ img.hero-visual { width: 100%; max-width: 560px; height: auto; object-fit: cover; border-radius: 16px; display: block; margin-inline: auto; }
584
+ img[class^="strip-"], img[class*=" strip-"] { width: 100%; height: auto; display: block; border-radius: 12px; object-fit: cover; }
585
+ /* 合规声明块(zb-disclaimer,全站 footer) */
586
+ .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; }
587
+ .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; }