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