/* ========================================================================== rah-2026.css — skin RAH 2026 untuk FluxCP (CP pemain + GM Panel). Dimuat PALING AKHIR di header.php supaya menang atas theme.css / rah-enhance.css / rah-vibrant.css tanpa perlu menyunting satu pun aturan lama. Menghapus berkas lama itu berisiko: banyak modul menyandarkan tata letaknya ke sana. Cara kerja: tema lama seluruhnya digerakkan variabel --v-*, jadi mengganti NILAI variabelnya sudah menggeser hampir seluruh palet. Sisanya hanya penyesuaian bentuk (lengkung, tipografi, latar) agar sama dengan landing. Palet diambil dari desain landing: cream #fff8e8 · gold #f5c365 · deep-gold #b9782c · navy #071827 teal #1c8f91 · line #ffffff3d Aksen merah muda tema lama SENGAJA diganti teal — tidak ada di desain baru. ========================================================================== */ :root { /* --- warna dasar --- */ --v-navy: #071827; --v-navy2: #0a2233; --v-navy3: #0e2c40; --v-gold: #f5c365; --v-gold-lite: #fff8e8; --v-gold-deep: #b9782c; /* pink lama -> teal desain (nama variabel dipertahankan agar aturan lama tetap terpakai; hanya nilainya yang berubah) */ --v-sakura: #1c8f91; --v-sakura-lite: #7fd8d9; --v-sakura-deep: #12676a; --v-blue: #6fb6d8; --v-blue-deep: #2f7fa3; --v-emerald: #2bd6a3; --v-text: #fff8e8; --v-muted: rgba(255, 248, 232, .62); --v-stroke: #ffffff3d; --v-radius: 4px; /* Gradasi judul lama berpendar tiga warna (emas-pink-biru). Desain baru memakai krem polos, jadi gradasi dibuat rata supaya tampil solid. */ --v-grad-head: linear-gradient(100deg, #fff8e8 0%, #fff8e8 100%); --v-grad-line: linear-gradient(90deg, var(--v-gold), var(--v-sakura)); --v-grad-gold: linear-gradient(135deg, #f5c365 0%, #f5c365 100%); --v-grad-play: linear-gradient(135deg, #f5c365 0%, #e2ab4d 100%); } /* --- latar: foto hero yang sama dengan landing, digelapkan agar teks tetap terbaca dan tabel tetap nyaman dibaca lama-lama ------------------------ */ /* Latar navy dipindah ke . Tema lama menyetel `body{background:... !important}`; selama body punya latar opak sendiri, `body::before` ber-z-index negatif tergambar DI BALIKNYA alias tak pernah terlihat. */ html { background: var(--v-navy); } body { font-family: Inter, "Helvetica Neue", Arial, sans-serif; background: transparent !important; } /* ⚠️ rah-vibrant.css MENGUNCI kedua pseudo-elemen ini dengan `!important` (background, opacity, filter, transform, z-index) untuk memasang art roh-bg.png. Tanpa `!important` di sini, aturan di bawah KALAH dan latar lama yang muncul — bukan hero baru. Filter/transform lama juga wajib dinolkan, kalau tidak fotonya tampil buram dan melar. */ body::before { content: "" !important; position: fixed !important; inset: 0 !important; pointer-events: none !important; z-index: -3 !important; background: url("../img/rah-hero-v2.webp") 50% 30% / cover no-repeat !important; filter: none !important; transform: none !important; opacity: .34 !important; } body::after { content: "" !important; position: fixed !important; inset: 0 !important; pointer-events: none !important; z-index: -2 !important; background: linear-gradient(180deg, rgba(7, 24, 39, .58) 0%, rgba(7, 24, 39, .90) 58%, rgba(7, 24, 39, .97) 100%) !important; filter: none !important; transform: none !important; opacity: 1 !important; } /* --- tipografi: judul serif seperti desain -------------------------------- */ .cp-content h1, .cp-content h2, .page-title, .card h3, .m-wrap h1, .rah-hero h1, .m-wrap h2, .cp-content h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.02em; text-transform: none; /* tema lama memaksa KAPITAL semua */ } .rah-hero h1, .m-wrap h1 { letter-spacing: -.035em; } /* --- bentuk: desain nyaris tanpa lengkung --------------------------------- */ .card, .panel, .box, .cp-content table, .rah-hero, .stat, .stats, .news-card, .cta-card, .m-wrap { border-radius: var(--v-radius) !important; } .btn, .button, button, input[type="submit"], input[type="button"], a.btn { border-radius: var(--v-radius) !important; } /* pil status/tag tetap membulat penuh, seperti .liveBadge & .newsTag desain */ .badge, .tag, .pill, .status-pill { border-radius: 30px !important; } /* --- topbar: garis rambut + latar navy transparan, sama dengan landing ---- */ .topbar { background: linear-gradient(180deg, rgba(7, 24, 39, .92), rgba(7, 24, 39, .55)); border-bottom: 1px solid var(--v-stroke); box-shadow: none; } .topbar .brand span { font-family: Georgia, serif; letter-spacing: .06em; color: var(--v-text); } .hnav a, .hnav > * > a { font-family: Inter, "Helvetica Neue", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; } .hnav a:hover { color: var(--v-gold); } /* --- tombol utama: emas rata, tanpa kilau, seperti .playButton ------------ ⚠️ JANGAN masukkan `.rah-cta` ke sini — itu WADAH flex pembungkus tombol (rah-enhance.css:206), bukan tombol. Memberinya latar emas membuat balok emas melintang di hero. */ .btn.gold, .btn-primary, .btn.primary, input[type="submit"] { background: var(--v-gold) !important; color: var(--v-navy) !important; border: 1px solid var(--v-gold) !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px; text-shadow: none; } .btn.gold:hover, .btn-primary:hover, .btn.primary:hover, input[type="submit"]:hover { background: var(--v-gold-lite) !important; border-color: var(--v-gold-lite) !important; } /* --- panel & tabel: garis rambut, bukan kotak tebal ----------------------- */ .card, .panel, .box, .m-wrap { background: rgba(7, 24, 39, .58); border: 1px solid var(--v-stroke); backdrop-filter: blur(2px); } .cp-content table th { background: rgba(255, 255, 255, .06); color: var(--v-gold); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; border-bottom: 1px solid var(--v-stroke); } .cp-content table td { border-bottom: 1px solid rgba(255, 255, 255, .09); } .cp-content table tr:hover td { background: rgba(245, 195, 101, .07); } /* --- tautan --- */ a { color: var(--v-gold); } a:hover { color: var(--v-gold-lite); } /* --- sisa jejak merah muda dari tema lama -------------------------------- */ [style*="#ff9ec4"], [style*="#e0568f"] { color: var(--v-sakura-lite) !important; } /* --- GM Panel: penanda visual agar tidak tertukar dengan CP pemain -------- Panel menyetel ; aksen emas ditukar teal supaya sekali lihat sudah ketahuan sedang berada di panel admin, bukan CP publik. */ body.rah-gm { --v-gold: #4fc3c5; --v-gold-lite: #d6f5f5; --v-gold-deep: #12676a; --v-grad-gold: linear-gradient(135deg, #4fc3c5 0%, #4fc3c5 100%); --v-grad-play: linear-gradient(135deg, #4fc3c5 0%, #2b9a9c 100%); } /* wajib !important: aturan body::before di atas juga !important, jadi tanpa ini nilai panel kalah oleh nilai CP. */ body.rah-gm::before { opacity: .16 !important; } body.rah-gm .topbar { border-bottom: 1px solid rgba(79, 195, 197, .45); } body.rah-gm .topbar .brand span::after { content: "GM PANEL"; font-family: Inter, Arial, sans-serif; font-size: 10px; letter-spacing: .18em; color: #4fc3c5; border: 1px solid rgba(79, 195, 197, .55); border-radius: 30px; padding: 2px 8px; margin-left: 10px; vertical-align: middle; white-space: nowrap; } /* --- layar kecil --- */ @media (max-width: 780px) { body::before { background-position: 50% center !important; opacity: .24 !important; } }