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,473 @@
1
+ :root {
2
+ /* Palette */
3
+ --bg: #041214;
4
+ --surface: #0a2226;
5
+ --accent: #ffd166;
6
+ --accent2: #14b8a6;
7
+ --text: #effcff;
8
+ --muted: #8fb0b3;
9
+
10
+ /* Fonts */
11
+ --font-display: 'Russo One', sans-serif;
12
+ --font-body: 'Open Sans', sans-serif;
13
+
14
+ /* Effects */
15
+ --glow-teal: 0 0 15px rgba(20, 184, 166, 0.3);
16
+ --glow-teal-strong: 0 0 25px rgba(20, 184, 166, 0.6);
17
+ --glow-gold: 0 0 15px rgba(255, 209, 102, 0.3);
18
+ --radius-sm: 4px;
19
+ --radius-md: 8px;
20
+ --clip-tech: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
21
+ --transition: all 0.3s ease;
22
+ }
23
+
24
+ /* Reset & Base */
25
+ * { margin: 0; padding: 0; box-sizing: border-box; }
26
+ body {
27
+ font-family: var(--font-body);
28
+ background-color: var(--bg);
29
+ color: var(--text);
30
+ line-height: 1.6;
31
+ overflow-x: hidden;
32
+ /* Subtle stadium grid background */
33
+ background-image:
34
+ linear-gradient(rgba(10, 34, 38, 0.5) 1px, transparent 1px),
35
+ linear-gradient(90deg, rgba(10, 34, 38, 0.5) 1px, transparent 1px);
36
+ background-size: 40px 40px;
37
+ background-position: center top;
38
+ }
39
+ a { color: var(--accent2); text-decoration: none; transition: var(--transition); }
40
+ a:hover { color: var(--accent); text-shadow: var(--glow-gold); }
41
+ h1, h2, h3, h4, .font-display { font-family: var(--font-display); font-weight: normal; letter-spacing: 0.5px; }
42
+
43
+ .container {
44
+ width: 100%;
45
+ max-width: 1200px;
46
+ margin: 0 auto;
47
+ padding: 0 20px;
48
+ }
49
+
50
+ /* Buttons */
51
+ .btn {
52
+ display: inline-flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ padding: 12px 24px;
56
+ font-family: var(--font-display);
57
+ font-size: 14px;
58
+ text-transform: uppercase;
59
+ letter-spacing: 1px;
60
+ cursor: pointer;
61
+ transition: var(--transition);
62
+ min-height: 44px;
63
+ clip-path: var(--clip-tech);
64
+ border: none;
65
+ }
66
+ .btn-primary {
67
+ background-color: var(--accent);
68
+ color: var(--bg);
69
+ box-shadow: inset 0 0 10px rgba(255,255,255,0.5);
70
+ }
71
+ .btn-primary:hover {
72
+ background-color: #ffde8a;
73
+ box-shadow: 0 0 20px rgba(255, 209, 102, 0.6);
74
+ transform: translateY(-2px);
75
+ }
76
+ .btn-secondary {
77
+ background-color: var(--surface);
78
+ color: var(--accent2);
79
+ border: 1px solid var(--accent2);
80
+ /* Faking border with clip-path via pseudo element in a real scenario,
81
+ but for simplicity here we use bg/color contrast */
82
+ box-shadow: inset 0 0 0 2px var(--accent2);
83
+ }
84
+ .btn-secondary:hover {
85
+ background-color: var(--accent2);
86
+ color: var(--bg);
87
+ box-shadow: 0 0 20px rgba(20, 184, 166, 0.6);
88
+ }
89
+
90
+ /* Header (Part A1 styles) */
91
+ header {
92
+ background-color: rgba(4, 18, 20, 0.95);
93
+ backdrop-filter: blur(10px);
94
+ border-bottom: 2px solid var(--accent2);
95
+ box-shadow: var(--glow-teal);
96
+ position: sticky;
97
+ top: 0;
98
+ z-index: 100;
99
+ }
100
+ .header-inner {
101
+ display: flex;
102
+ justify-content: space-between;
103
+ align-items: center;
104
+ height: 70px;
105
+ }
106
+ .brand {
107
+ font-family: var(--font-display);
108
+ font-size: 24px;
109
+ color: var(--text);
110
+ text-transform: uppercase;
111
+ display: flex;
112
+ align-items: center;
113
+ gap: 10px;
114
+ }
115
+ .brand span { color: var(--accent); }
116
+ .nav-links {
117
+ display: flex;
118
+ gap: 20px;
119
+ }
120
+ .nav-links a {
121
+ color: var(--text);
122
+ font-weight: 600;
123
+ font-size: 14px;
124
+ text-transform: uppercase;
125
+ }
126
+ .nav-links a:hover { color: var(--accent2); }
127
+ .header-actions {
128
+ display: flex;
129
+ gap: 10px;
130
+ align-items: center;
131
+ }
132
+ .mobile-toggle {
133
+ display: none;
134
+ background: none;
135
+ border: none;
136
+ color: var(--accent2);
137
+ font-size: 28px;
138
+ cursor: pointer;
139
+ min-width: 44px;
140
+ min-height: 44px;
141
+ }
142
+
143
+ /* Footer (Part A2 styles) */
144
+ footer {
145
+ background-color: var(--surface);
146
+ border-top: 2px solid var(--accent2);
147
+ padding: 60px 0 20px;
148
+ margin-top: 60px;
149
+ position: relative;
150
+ }
151
+ footer::before {
152
+ content: '';
153
+ position: absolute;
154
+ top: 0; left: 0; right: 0; height: 1px;
155
+ background: linear-gradient(90deg, transparent, var(--accent2), transparent);
156
+ box-shadow: var(--glow-teal-strong);
157
+ }
158
+ .footer-grid {
159
+ display: grid;
160
+ grid-template-columns: 2fr 1fr 1fr;
161
+ gap: 40px;
162
+ margin-bottom: 40px;
163
+ }
164
+ .footer-brand h2 {
165
+ font-size: 28px;
166
+ text-transform: uppercase;
167
+ margin-bottom: 15px;
168
+ }
169
+ .footer-brand h2 span { color: var(--accent); }
170
+ .footer-tagline { color: var(--muted); font-size: 14px; }
171
+ .footer-links-group h4 {
172
+ color: var(--accent2);
173
+ margin-bottom: 20px;
174
+ font-size: 18px;
175
+ }
176
+ .footer-links-group a {
177
+ display: block;
178
+ color: var(--muted);
179
+ margin-bottom: 10px;
180
+ font-size: 14px;
181
+ }
182
+ .footer-links-group a:hover { color: var(--accent); padding-left: 5px; }
183
+ .footer-bottom {
184
+ text-align: center;
185
+ padding-top: 20px;
186
+ border-top: 1px solid rgba(143, 176, 179, 0.2);
187
+ color: var(--muted);
188
+ font-size: 13px;
189
+ }
190
+
191
+ /* Inner Page Specific Styles */
192
+
193
+ /* Hero Banner */
194
+ .page-hero {
195
+ position: relative;
196
+ padding: 60px 0 40px;
197
+ background: radial-gradient(circle at 50% 0%, rgba(20,184,166,0.15) 0%, transparent 70%);
198
+ border-bottom: 1px solid rgba(20,184,166,0.2);
199
+ margin-bottom: 40px;
200
+ }
201
+ .breadcrumb {
202
+ font-size: 13px;
203
+ color: var(--muted);
204
+ margin-bottom: 20px;
205
+ display: flex;
206
+ align-items: center;
207
+ gap: 8px;
208
+ }
209
+ .page-hero h1 {
210
+ font-size: clamp(28px, 5vw, 42px);
211
+ color: var(--text);
212
+ text-transform: uppercase;
213
+ margin-bottom: 20px;
214
+ line-height: 1.2;
215
+ text-shadow: 2px 2px 0px rgba(0,0,0,0.5), 0 0 20px rgba(255,209,102,0.2);
216
+ }
217
+ .meta-chips {
218
+ display: flex;
219
+ flex-wrap: wrap;
220
+ gap: 10px;
221
+ margin-bottom: 30px;
222
+ }
223
+ .meta-chips span {
224
+ background-color: var(--surface);
225
+ border: 1px solid rgba(20,184,166,0.3);
226
+ color: var(--accent2);
227
+ padding: 6px 14px;
228
+ font-size: 12px;
229
+ font-weight: 600;
230
+ text-transform: uppercase;
231
+ border-radius: 20px;
232
+ box-shadow: inset 0 0 10px rgba(20,184,166,0.1);
233
+ }
234
+ .intro-block {
235
+ background: linear-gradient(90deg, rgba(10,34,38,0.8) 0%, transparent 100%);
236
+ border-left: 4px solid var(--accent);
237
+ padding: 20px 25px;
238
+ font-size: 16px;
239
+ color: #d0e8eb;
240
+ position: relative;
241
+ }
242
+
243
+ /* Main Content Area */
244
+ .content-area {
245
+ display: flex;
246
+ flex-direction: column;
247
+ gap: 40px;
248
+ }
249
+
250
+ /* Dynamic Sections */
251
+ .stadium-section {
252
+ background-color: var(--surface);
253
+ padding: 30px;
254
+ position: relative;
255
+ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
256
+ border-top: 2px solid rgba(255,255,255,0.05);
257
+ border-left: 1px solid rgba(255,255,255,0.05);
258
+ }
259
+ .stadium-section::before {
260
+ content: '';
261
+ position: absolute;
262
+ top: 0; left: 0; width: 40px; height: 4px;
263
+ background-color: var(--accent2);
264
+ box-shadow: var(--glow-teal);
265
+ }
266
+ .stadium-section h2 {
267
+ font-size: 22px;
268
+ color: var(--accent);
269
+ margin-bottom: 20px;
270
+ display: flex;
271
+ align-items: center;
272
+ gap: 10px;
273
+ }
274
+ .stadium-section h2::before {
275
+ content: '>>';
276
+ color: var(--accent2);
277
+ font-size: 18px;
278
+ opacity: 0.8;
279
+ }
280
+ .stadium-section p {
281
+ margin-bottom: 15px;
282
+ color: #c5dcde;
283
+ }
284
+ .stadium-section p:last-child { margin-bottom: 0; }
285
+
286
+ /* Lists */
287
+ .hero-list {
288
+ list-style: none;
289
+ margin: 20px 0;
290
+ padding: 0;
291
+ }
292
+ .hero-list li {
293
+ position: relative;
294
+ padding-left: 30px;
295
+ margin-bottom: 12px;
296
+ color: #c5dcde;
297
+ }
298
+ .hero-list li::before {
299
+ content: '';
300
+ position: absolute;
301
+ left: 0; top: 6px;
302
+ width: 12px; height: 12px;
303
+ background-color: var(--accent2);
304
+ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
305
+ box-shadow: var(--glow-teal);
306
+ }
307
+
308
+ /* FAQ Section */
309
+ .faq-wrapper {
310
+ margin-top: 20px;
311
+ }
312
+ details {
313
+ background-color: rgba(4, 18, 20, 0.6);
314
+ border: 1px solid rgba(20, 184, 166, 0.2);
315
+ margin-bottom: 15px;
316
+ border-radius: var(--radius-sm);
317
+ overflow: hidden;
318
+ transition: var(--transition);
319
+ }
320
+ details[open] {
321
+ border-color: var(--accent2);
322
+ box-shadow: 0 0 15px rgba(20, 184, 166, 0.1);
323
+ }
324
+ summary {
325
+ padding: 18px 20px;
326
+ font-family: var(--font-display);
327
+ font-size: 15px;
328
+ color: var(--text);
329
+ cursor: pointer;
330
+ list-style: none;
331
+ display: flex;
332
+ justify-content: space-between;
333
+ align-items: center;
334
+ background-color: var(--surface);
335
+ }
336
+ summary::-webkit-details-marker { display: none; }
337
+ summary::after {
338
+ content: '+';
339
+ color: var(--accent);
340
+ font-size: 20px;
341
+ transition: transform 0.3s ease;
342
+ }
343
+ details[open] summary::after {
344
+ content: '-';
345
+ transform: rotate(180deg);
346
+ }
347
+ details p {
348
+ padding: 20px;
349
+ color: var(--muted);
350
+ border-top: 1px solid rgba(255,255,255,0.05);
351
+ background-color: rgba(10, 34, 38, 0.3);
352
+ }
353
+
354
+ /* Related Links */
355
+ .related-links-section {
356
+ padding: 40px 0;
357
+ text-align: center;
358
+ border-top: 1px dashed rgba(20, 184, 166, 0.3);
359
+ margin-top: 20px;
360
+ }
361
+ .related-links-section h3 {
362
+ color: var(--text);
363
+ margin-bottom: 25px;
364
+ font-size: 20px;
365
+ }
366
+ .link-grid {
367
+ display: flex;
368
+ justify-content: center;
369
+ flex-wrap: wrap;
370
+ gap: 15px;
371
+ }
372
+ .link-grid a {
373
+ display: inline-block;
374
+ background-color: var(--surface);
375
+ border: 1px solid rgba(255,209,102,0.3);
376
+ color: var(--accent);
377
+ padding: 12px 20px;
378
+ font-family: var(--font-display);
379
+ font-size: 13px;
380
+ text-transform: uppercase;
381
+ clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
382
+ }
383
+ .link-grid a:hover {
384
+ background-color: var(--accent);
385
+ color: var(--bg);
386
+ box-shadow: var(--glow-gold);
387
+ transform: translateY(-3px);
388
+ }
389
+
390
+ /* CTA Block */
391
+ .cta-mega {
392
+ background: linear-gradient(135deg, var(--surface) 0%, #06181a 100%);
393
+ border: 1px solid var(--accent2);
394
+ padding: 50px 30px;
395
+ text-align: center;
396
+ position: relative;
397
+ overflow: hidden;
398
+ margin-top: 20px;
399
+ }
400
+ .cta-mega::before {
401
+ content: '';
402
+ position: absolute;
403
+ top: -50%; left: -50%; width: 200%; height: 200%;
404
+ background: radial-gradient(circle at center, rgba(20,184,166,0.1) 0%, transparent 60%);
405
+ animation: rotateGlow 20s linear infinite;
406
+ pointer-events: none;
407
+ }
408
+ @keyframes rotateGlow {
409
+ 0% { transform: rotate(0deg); }
410
+ 100% { transform: rotate(360deg); }
411
+ }
412
+ .cta-mega h2 {
413
+ font-size: 28px;
414
+ margin-bottom: 15px;
415
+ position: relative;
416
+ z-index: 1;
417
+ }
418
+ .cta-mega p {
419
+ color: var(--muted);
420
+ margin-bottom: 30px;
421
+ position: relative;
422
+ z-index: 1;
423
+ }
424
+ .cta-actions {
425
+ display: flex;
426
+ justify-content: center;
427
+ gap: 15px;
428
+ position: relative;
429
+ z-index: 1;
430
+ }
431
+
432
+ /* Responsive */
433
+ @media (max-width: 1024px) {
434
+ .footer-grid { grid-template-columns: 1fr 1fr; }
435
+ }
436
+ @media (max-width: 768px) {
437
+ .nav-links {
438
+ display: none;
439
+ position: absolute;
440
+ top: 70px;
441
+ left: 0;
442
+ width: 100%;
443
+ background-color: var(--surface);
444
+ flex-direction: column;
445
+ padding: 20px;
446
+ border-bottom: 2px solid var(--accent2);
447
+ box-shadow: 0 10px 20px rgba(0,0,0,0.5);
448
+ }
449
+ .nav-links.active { display: flex; }
450
+ .mobile-toggle { display: block; }
451
+ .header-actions .btn { display: none; }
452
+
453
+ .footer-grid { grid-template-columns: 1fr; gap: 30px; }
454
+ .cta-actions { flex-direction: column; }
455
+ .cta-actions .btn { width: 100%; }
456
+ }
457
+ @media (max-width: 390px) {
458
+ .page-hero h1 { font-size: 24px; }
459
+ .stadium-section { padding: 20px; }
460
+ .stadium-section h2 { font-size: 18px; }
461
+ }
462
+
463
+
464
+ /* pipeline image & layout guards */
465
+ html, body { overflow-x: clip; }
466
+ img { max-width: 100%; height: auto; }
467
+ img.site-logo { height: 40px; width: auto; max-width: 240px; object-fit: contain; flex: none; }
468
+ header .logo a { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
469
+ img.hero-visual { width: 100%; max-width: 560px; height: auto; object-fit: cover; border-radius: 16px; display: block; margin-inline: auto; }
470
+ img[class^="strip-"], img[class*=" strip-"] { width: 100%; height: auto; display: block; border-radius: 12px; object-fit: cover; }
471
+ /* 合规声明块(zb-disclaimer,全站 footer) */
472
+ .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; }
473
+ .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; }