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