css-pkg-01 1.1.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.
Files changed (41) hide show
  1. package/k4d/page-404.css +279 -0
  2. package/k4d/page-bonus.css +368 -0
  3. package/k4d/page-cari.css +364 -0
  4. package/k4d/page-daftar.css +648 -0
  5. package/k4d/page-demo.css +620 -0
  6. package/k4d/page-deposit-qris.css +552 -0
  7. package/k4d/page-faq.css +540 -0
  8. package/k4d/page-game-gates-of-olympus.css +243 -0
  9. package/k4d/page-game-starlight-princess.css +526 -0
  10. package/k4d/page-game-sweet-bonanza.css +539 -0
  11. package/k4d/page-link-alternatif.css +582 -0
  12. package/k4d/page-login.css +577 -0
  13. package/k4d/page-panduan-cara-main.css +577 -0
  14. package/k4d/page-panduan-demo-pragmatic.css +546 -0
  15. package/k4d/page-panduan-slot-zeus.css +516 -0
  16. package/k4d/page-panduan-tips-bermain.css +603 -0
  17. package/k4d/page-promo.css +600 -0
  18. package/k4d/page-rtp.css +573 -0
  19. package/k4d/page-tentang-kami.css +632 -0
  20. package/k4d/style.css +532 -0
  21. package/kc9/page-404.css +296 -0
  22. package/kc9/page-bonus.css +587 -0
  23. package/kc9/page-cari.css +420 -0
  24. package/kc9/page-daftar.css +542 -0
  25. package/kc9/page-deposit-gopay.css +596 -0
  26. package/kc9/page-deposit-ovo.css +618 -0
  27. package/kc9/page-faq.css +632 -0
  28. package/kc9/page-game-aztec-gems.css +573 -0
  29. package/kc9/page-game-fire-strike.css +582 -0
  30. package/kc9/page-game-great-rhino.css +635 -0
  31. package/kc9/page-game-jokers-jewels.css +591 -0
  32. package/kc9/page-link-alternatif.css +609 -0
  33. package/kc9/page-login.css +581 -0
  34. package/kc9/page-panduan-ciri-situs-resmi.css +575 -0
  35. package/kc9/page-panduan-slot-asli.css +583 -0
  36. package/kc9/page-panduan-slot-resmi.css +556 -0
  37. package/kc9/page-resmi.css +587 -0
  38. package/kc9/page-rtp.css +595 -0
  39. package/kc9/page-tentang-kami.css +592 -0
  40. package/kc9/style.css +787 -0
  41. package/package.json +1 -1
@@ -0,0 +1,526 @@
1
+ :root {
2
+ --bg: #0b0a08;
3
+ --surface: #1c1913;
4
+ --surface-hover: #2a261d;
5
+ --accent: #d98e32;
6
+ --accent-hover: #e5a34f;
7
+ --accent2: #6cb4ee;
8
+ --text: #faf7f0;
9
+ --muted: #a89f91;
10
+ --border: rgba(217, 142, 50, 0.3);
11
+
12
+ --font-display: 'Anton', sans-serif;
13
+ --font-body: 'Barlow', sans-serif;
14
+
15
+ --spacing-sm: 0.5rem;
16
+ --spacing-md: 1rem;
17
+ --spacing-lg: 2rem;
18
+ --spacing-xl: 4rem;
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ }
26
+
27
+ body {
28
+ font-family: var(--font-body);
29
+ background-color: var(--bg);
30
+ color: var(--text);
31
+ line-height: 1.6;
32
+ -webkit-font-smoothing: antialiased;
33
+ }
34
+
35
+ a {
36
+ color: var(--accent);
37
+ text-decoration: none;
38
+ transition: color 0.3s ease;
39
+ }
40
+
41
+ a:hover {
42
+ color: var(--accent-hover);
43
+ }
44
+
45
+ .container {
46
+ width: 100%;
47
+ max-width: 1200px;
48
+ margin: 0 auto;
49
+ padding: 0 var(--spacing-md);
50
+ }
51
+
52
+ /* Typography */
53
+ h1, h2, h3, .font-display {
54
+ font-family: var(--font-display);
55
+ text-transform: uppercase;
56
+ font-weight: normal;
57
+ letter-spacing: 1px;
58
+ color: var(--accent);
59
+ line-height: 1.2;
60
+ }
61
+
62
+ h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: var(--spacing-md); }
63
+ h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: var(--spacing-md); }
64
+ h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); margin-bottom: var(--spacing-sm); }
65
+ p { margin-bottom: var(--spacing-md); }
66
+
67
+ /* Buttons */
68
+ .btn {
69
+ display: inline-flex;
70
+ align-items: center;
71
+ justify-content: center;
72
+ padding: 0.75rem 1.5rem;
73
+ font-family: var(--font-display);
74
+ font-size: 1.1rem;
75
+ letter-spacing: 1px;
76
+ text-transform: uppercase;
77
+ border: 2px solid transparent;
78
+ min-height: 44px;
79
+ cursor: pointer;
80
+ transition: all 0.3s ease;
81
+ }
82
+
83
+ .btn-primary {
84
+ background-color: var(--accent);
85
+ color: var(--bg);
86
+ }
87
+
88
+ .btn-primary:hover {
89
+ background-color: var(--accent-hover);
90
+ color: var(--bg);
91
+ box-shadow: 0 0 15px rgba(217, 142, 50, 0.5);
92
+ }
93
+
94
+ .btn-secondary {
95
+ background-color: transparent;
96
+ color: var(--accent);
97
+ border-color: var(--accent);
98
+ }
99
+
100
+ .btn-secondary:hover {
101
+ background-color: rgba(217, 142, 50, 0.1);
102
+ box-shadow: inset 0 0 10px rgba(217, 142, 50, 0.2);
103
+ }
104
+
105
+ /* Header (Exact Match Styling) */
106
+ header {
107
+ background-color: var(--bg);
108
+ border-bottom: 2px solid var(--accent);
109
+ position: sticky;
110
+ top: 0;
111
+ z-index: 100;
112
+ padding: var(--spacing-md) 0;
113
+ }
114
+
115
+ .nav-container {
116
+ display: flex;
117
+ justify-content: space-between;
118
+ align-items: center;
119
+ }
120
+
121
+ .brand {
122
+ font-family: var(--font-display);
123
+ font-size: 2rem;
124
+ color: var(--accent);
125
+ display: flex;
126
+ align-items: center;
127
+ gap: 10px;
128
+ }
129
+
130
+ .menu-toggle {
131
+ display: none;
132
+ background: none;
133
+ border: 1px solid var(--accent);
134
+ color: var(--accent);
135
+ font-size: 1.5rem;
136
+ padding: 0.25rem 0.75rem;
137
+ cursor: pointer;
138
+ min-height: 44px;
139
+ min-width: 44px;
140
+ }
141
+
142
+ .nav-links {
143
+ display: flex;
144
+ gap: var(--spacing-lg);
145
+ }
146
+
147
+ .nav-links a {
148
+ font-family: var(--font-display);
149
+ color: var(--text);
150
+ font-size: 1.1rem;
151
+ }
152
+
153
+ .nav-links a:hover {
154
+ color: var(--accent);
155
+ }
156
+
157
+ /* Hero Banner */
158
+ .hero-arena {
159
+ background: radial-gradient(circle at center, #2a1f12 0%, var(--bg) 70%);
160
+ padding: var(--spacing-xl) 0;
161
+ text-align: center;
162
+ border-bottom: 1px solid var(--border);
163
+ position: relative;
164
+ overflow: hidden;
165
+ }
166
+
167
+ .hero-arena::before {
168
+ content: '';
169
+ position: absolute;
170
+ top: 0; left: 0; right: 0; bottom: 0;
171
+ background-image:
172
+ linear-gradient(rgba(217, 142, 50, 0.05) 1px, transparent 1px),
173
+ linear-gradient(90deg, rgba(217, 142, 50, 0.05) 1px, transparent 1px);
174
+ background-size: 30px 30px;
175
+ pointer-events: none;
176
+ opacity: 0.5;
177
+ }
178
+
179
+ .breadcrumb {
180
+ font-size: 0.9rem;
181
+ color: var(--muted);
182
+ margin-bottom: var(--spacing-lg);
183
+ text-transform: uppercase;
184
+ letter-spacing: 1px;
185
+ position: relative;
186
+ z-index: 2;
187
+ }
188
+
189
+ .hero-arena h1 {
190
+ position: relative;
191
+ z-index: 2;
192
+ text-shadow: 0 4px 10px rgba(0,0,0,0.8);
193
+ max-width: 900px;
194
+ margin-left: auto;
195
+ margin-right: auto;
196
+ }
197
+
198
+ .meta-chips {
199
+ display: flex;
200
+ justify-content: center;
201
+ gap: var(--spacing-md);
202
+ margin-top: var(--spacing-lg);
203
+ position: relative;
204
+ z-index: 2;
205
+ }
206
+
207
+ .chip {
208
+ background-color: var(--surface);
209
+ border: 1px solid var(--accent);
210
+ padding: 0.25rem 0.75rem;
211
+ font-size: 0.85rem;
212
+ font-weight: 600;
213
+ color: var(--accent2);
214
+ text-transform: uppercase;
215
+ box-shadow: 0 2px 5px rgba(0,0,0,0.5);
216
+ }
217
+
218
+ /* Main Content Area */
219
+ .content-arena {
220
+ padding: var(--spacing-xl) var(--spacing-md);
221
+ display: grid;
222
+ gap: var(--spacing-lg);
223
+ }
224
+
225
+ .intro-box {
226
+ background-color: var(--surface);
227
+ border-left: 4px solid var(--accent);
228
+ padding: var(--spacing-lg);
229
+ font-size: 1.1rem;
230
+ font-weight: 500;
231
+ color: var(--text);
232
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
233
+ }
234
+
235
+ .intro-box p:last-child {
236
+ margin-bottom: 0;
237
+ }
238
+
239
+ .content-card {
240
+ background-color: var(--surface);
241
+ border: 1px solid var(--border);
242
+ padding: var(--spacing-lg);
243
+ position: relative;
244
+ box-shadow: 0 4px 15px rgba(0,0,0,0.3);
245
+ transition: transform 0.3s ease, border-color 0.3s ease;
246
+ }
247
+
248
+ .content-card:hover {
249
+ border-color: var(--accent);
250
+ transform: translateY(-2px);
251
+ }
252
+
253
+ .content-card h2 {
254
+ border-bottom: 1px solid var(--border);
255
+ padding-bottom: var(--spacing-sm);
256
+ margin-bottom: var(--spacing-md);
257
+ }
258
+
259
+ .content-card a {
260
+ text-decoration: underline;
261
+ text-decoration-color: var(--accent);
262
+ text-underline-offset: 4px;
263
+ }
264
+
265
+ .content-card a:hover {
266
+ text-decoration-color: var(--accent2);
267
+ color: var(--accent2);
268
+ }
269
+
270
+ /* Custom List */
271
+ .arena-list {
272
+ list-style: none;
273
+ margin-top: var(--spacing-md);
274
+ }
275
+
276
+ .arena-list li {
277
+ position: relative;
278
+ padding-left: 2rem;
279
+ margin-bottom: var(--spacing-sm);
280
+ }
281
+
282
+ .arena-list li::before {
283
+ content: '►';
284
+ position: absolute;
285
+ left: 0;
286
+ top: 2px;
287
+ color: var(--accent);
288
+ font-size: 0.8rem;
289
+ }
290
+
291
+ /* Related Links Block */
292
+ .related-arena {
293
+ background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
294
+ border: 1px solid var(--accent);
295
+ padding: var(--spacing-lg);
296
+ text-align: center;
297
+ margin: var(--spacing-lg) 0;
298
+ }
299
+
300
+ .related-arena h3 {
301
+ margin-bottom: var(--spacing-md);
302
+ }
303
+
304
+ .related-grid {
305
+ display: flex;
306
+ flex-wrap: wrap;
307
+ justify-content: center;
308
+ gap: var(--spacing-md);
309
+ }
310
+
311
+ .related-link {
312
+ background-color: var(--bg);
313
+ border: 1px solid var(--border);
314
+ padding: 0.75rem 1.5rem;
315
+ font-family: var(--font-display);
316
+ text-transform: uppercase;
317
+ font-size: 1.1rem;
318
+ min-height: 44px;
319
+ display: inline-flex;
320
+ align-items: center;
321
+ }
322
+
323
+ .related-link:hover {
324
+ background-color: var(--accent);
325
+ color: var(--bg);
326
+ border-color: var(--accent);
327
+ }
328
+
329
+ /* FAQ Section */
330
+ .faq-arena {
331
+ margin-top: var(--spacing-xl);
332
+ }
333
+
334
+ .faq-arena h2 {
335
+ text-align: center;
336
+ margin-bottom: var(--spacing-lg);
337
+ }
338
+
339
+ details {
340
+ background-color: var(--surface);
341
+ border: 1px solid var(--border);
342
+ margin-bottom: var(--spacing-sm);
343
+ transition: all 0.3s ease;
344
+ }
345
+
346
+ details[open] {
347
+ border-color: var(--accent);
348
+ box-shadow: 0 4px 15px rgba(217, 142, 50, 0.1);
349
+ }
350
+
351
+ summary {
352
+ padding: 1.2rem;
353
+ font-family: var(--font-display);
354
+ font-size: 1.2rem;
355
+ color: var(--text);
356
+ cursor: pointer;
357
+ list-style: none;
358
+ display: flex;
359
+ justify-content: space-between;
360
+ align-items: center;
361
+ min-height: 44px;
362
+ }
363
+
364
+ summary::-webkit-details-marker {
365
+ display: none;
366
+ }
367
+
368
+ summary::after {
369
+ content: '+';
370
+ color: var(--accent);
371
+ font-size: 1.5rem;
372
+ line-height: 1;
373
+ }
374
+
375
+ details[open] summary::after {
376
+ content: '-';
377
+ }
378
+
379
+ details p {
380
+ padding: 0 1.2rem 1.2rem;
381
+ color: var(--muted);
382
+ margin: 0;
383
+ }
384
+
385
+ /* CTA Block */
386
+ .cta-arena {
387
+ background: linear-gradient(to right, #1a1208, #2a1f12);
388
+ border-top: 4px solid var(--accent);
389
+ border-bottom: 4px solid var(--accent);
390
+ padding: var(--spacing-xl) var(--spacing-md);
391
+ text-align: center;
392
+ margin-top: var(--spacing-xl);
393
+ }
394
+
395
+ .cta-arena h2 {
396
+ font-size: clamp(2rem, 4vw, 3rem);
397
+ margin-bottom: var(--spacing-sm);
398
+ }
399
+
400
+ .cta-arena p {
401
+ font-size: 1.2rem;
402
+ color: var(--muted);
403
+ margin-bottom: var(--spacing-lg);
404
+ }
405
+
406
+ .cta-buttons {
407
+ display: flex;
408
+ justify-content: center;
409
+ gap: var(--spacing-md);
410
+ flex-wrap: wrap;
411
+ }
412
+
413
+ /* Footer (Exact Match Styling) */
414
+ footer {
415
+ background-color: var(--surface);
416
+ padding: var(--spacing-xl) 0 var(--spacing-lg);
417
+ text-align: center;
418
+ border-top: 1px solid var(--border);
419
+ }
420
+
421
+ .footer-brand {
422
+ font-family: var(--font-display);
423
+ font-size: 2.5rem;
424
+ color: var(--muted);
425
+ margin-bottom: var(--spacing-sm);
426
+ display: flex;
427
+ justify-content: center;
428
+ align-items: center;
429
+ gap: 10px;
430
+ }
431
+
432
+ .footer-tagline {
433
+ color: var(--muted);
434
+ margin-bottom: var(--spacing-lg);
435
+ font-style: italic;
436
+ }
437
+
438
+ .footer-links {
439
+ display: flex;
440
+ flex-wrap: wrap;
441
+ justify-content: center;
442
+ gap: 1rem;
443
+ margin-bottom: var(--spacing-lg);
444
+ max-width: 800px;
445
+ margin-left: auto;
446
+ margin-right: auto;
447
+ }
448
+
449
+ .footer-links a {
450
+ color: var(--text);
451
+ font-size: 0.9rem;
452
+ text-transform: uppercase;
453
+ letter-spacing: 1px;
454
+ padding: 0.25rem 0.5rem;
455
+ min-height: 44px;
456
+ display: inline-flex;
457
+ align-items: center;
458
+ }
459
+
460
+ .footer-links a:hover {
461
+ color: var(--accent);
462
+ }
463
+
464
+ .copyright {
465
+ color: var(--muted);
466
+ font-size: 0.85rem;
467
+ border-top: 1px solid var(--border);
468
+ padding-top: var(--spacing-md);
469
+ margin-top: var(--spacing-md);
470
+ }
471
+
472
+ /* Media Queries */
473
+ @media (max-width: 768px) {
474
+ .menu-toggle {
475
+ display: block;
476
+ }
477
+
478
+ .nav-links {
479
+ display: none;
480
+ flex-direction: column;
481
+ position: absolute;
482
+ top: 100%;
483
+ left: 0;
484
+ width: 100%;
485
+ background-color: var(--surface);
486
+ padding: var(--spacing-md) 0;
487
+ border-bottom: 2px solid var(--accent);
488
+ text-align: center;
489
+ gap: 0;
490
+ }
491
+
492
+ .nav-links.active {
493
+ display: flex;
494
+ }
495
+
496
+ .nav-links a {
497
+ padding: var(--spacing-md);
498
+ display: block;
499
+ border-bottom: 1px solid rgba(255,255,255,0.05);
500
+ }
501
+
502
+ .meta-chips {
503
+ flex-direction: column;
504
+ align-items: center;
505
+ }
506
+
507
+ .cta-buttons {
508
+ flex-direction: column;
509
+ }
510
+
511
+ .cta-buttons .btn {
512
+ width: 100%;
513
+ }
514
+ }
515
+
516
+
517
+ /* pipeline image & layout guards */
518
+ html, body { overflow-x: clip; }
519
+ img { max-width: 100%; height: auto; }
520
+ img.site-logo { height: 40px; width: auto; max-width: 240px; object-fit: contain; flex: none; }
521
+ header .logo a { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
522
+ img.hero-visual { width: 100%; max-width: 560px; height: auto; object-fit: cover; border-radius: 16px; display: block; margin-inline: auto; }
523
+ img[class^="strip-"], img[class*=" strip-"] { width: 100%; height: auto; display: block; border-radius: 12px; object-fit: cover; }
524
+ /* 合规声明块(zb-disclaimer,全站 footer) */
525
+ .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; }
526
+ .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; }