/* ========================================================================== TOKEN DESAIN · Privat Al Faiz -------------------------------------------------------------------------- Seluruh nilai di bawah ini diambil dari situs aslinya (privatalfaiz.id, berkas assets/css/style.css) dan dari gaya terhitung di peramban. Disusun 13 Oktober 2026. Situs aslinya TIDAK memakai variabel CSS sama sekali — warna dan ukuran ditulis berulang di ratusan aturan. Berkas ini menarik semuanya menjadi satu tempat, sehingga mengganti warna merek cukup mengubah satu baris. Cara pakai: body { font-family: var(--af-font); background: var(--af-putih); } ========================================================================== */ :root { /* ---------------- Warna merek ---------------- */ --af-marun-tua: #420405; /* navbar, pil judul paket */ --af-merah: #9A0417; /* warna merek: judul bagian, harga, tautan */ --af-merah-aksen: #ED1B24; /* tombol ajakan utama */ --af-emas: #FDC00F; /* menu aktif, bilah statistik */ --af-krim: #FEF0D5; /* latar bagian artikel & paket */ --af-gradien-atas: #A00014; /* gradien hero, ujung atas */ --af-gradien-bawah: #5A0000; /* gradien hero, ujung bawah */ /* ---------------- Warna keadaan ---------------- */ --af-merah-hover: #7A090E; --af-merah-tekan: #3D0407; /* ---------------- Hijau ---------------- */ --af-hijau-daftar: #016801; --af-hijau-daftar-hv: #003400; --af-hijau-daftar-tk: #001A00; --af-hijau-paket: #08AA08; /* tombol beli di detail paket, lencana diskon */ --af-hijau-paket-hv: #045504; --af-hijau-paket-tk: #022A02; /* ---------------- Netral ---------------- */ --af-putih: #FFFFFF; --af-hitam: #000000; --af-tinta-1: #1E1E1E; /* teks di atas emas */ --af-tinta-2: #1F1F1F; /* teks harga */ --af-tinta-3: #565353; /* teks fasilitas, teks sekunder */ --af-tinta-4: #240304; /* teks footer */ --af-abu-tombol: #E3E3E3; /* tombol Masuk */ --af-abu-garis: #767676; /* garis tombol Masuk */ --af-abu-coret: #AEAEAE; /* harga coret — hanya untuk ini */ --af-abu-latar: #F5F5F5; --af-latar-footer: #F6F8FD; --af-garis-kartu: #DEE2E6; /* ---------------- Tipografi ---------------- */ --af-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --af-judul-bagian: 40px; /* bobot 900, warna merek, rata tengah */ --af-judul-bagian-2: 34px; /* bobot 700 — bagian team & faq */ --af-judul-kartu: 20px; /* bobot 600 */ --af-judul-footer: 20px; /* bobot 900, warna merek */ --af-teks-dasar: 16px; --af-teks-kecil: 15px; --af-harga-besar: 55.85px; /* bobot 700, warna merek */ --af-harga-coret: 24.82px; --af-bobot-normal: 400; --af-bobot-sedang: 500; --af-bobot-tebal: 600; --af-bobot-sangat: 700; --af-bobot-hitam: 900; /* semua judul bagian */ --af-baris: 1.5; /* ---------------- Bentuk ---------------- */ --af-r-tombol: 16px; /* tombol ajakan utama */ --af-r-kartu: 18.61px; /* kartu paket */ --af-r-modal: 15px; /* kartu di jendela masuk/daftar */ --af-r-pil: 41.72px; /* tombol BELI PAKET */ --af-r-pil-harga: 45px; /* pil judul di dalam kartu paket */ --af-r-pil-menu: 10.43px; /* pil menu aktif */ --af-r-kecil: 7.42px; /* tombol Masuk & Daftar */ --af-r-bilah: 21.75px; /* bilah statistik */ /* ---------------- Bayangan ---------------- */ --af-bayang: 0 2.85px 7.12px rgba(0, 0, 0, .3); --af-bayang-lembut: 0 4px 20px rgba(0, 0, 0, .1); /* ---------------- Jarak bagian (desktop) ---------------- */ --af-bagian-atas: 75px; --af-bagian-bawah: 55px; /* ---------------- Tata letak ---------------- */ --af-lebar-wadah: 1140px; --af-lebar-paket: 318.13px; /* lebar tetap kartu paket di desktop */ --af-lebar-bilah: 926px; /* lebar bilah statistik */ --af-tinggi-navbar: 74px; } /* ========================================================================== SATU-SATUNYA TITIK UBAH LAYAR Situs aslinya hanya mengurus dua keadaan: desktop dan di bawah 768px. Tidak ada langkah tengah. Nilai di bawah ini disalin apa adanya. ========================================================================== */ @media (max-width: 767.98px) { :root { --af-judul-bagian: 20px; /* 40px -> 20px */ --af-judul-bagian-2: 20px; /* 34px -> 20px */ --af-judul-kartu: 15px; /* 20px -> 15px */ --af-teks-dasar: 15px; /* 16px -> 15px */ --af-harga-besar: 36px; /* 55,85px -> 36px */ --af-harga-coret: 16px; /* 24,82px -> 16px */ --af-lebar-paket: 100%; --af-lebar-bilah: 90%; --af-bagian-atas: 60px; --af-bagian-bawah: 45px; } } /* ========================================================================== POLA YANG MEMBUAT TAMPILAN INI TERASA SATU KESATUAN Enam aturan di bawah ini yang paling menentukan wataknya. ========================================================================== */ /* 1. Semua judul bagian: bobot 900, warna merek, rata tengah. */ .af-judul-bagian { text-align: center; font-size: var(--af-judul-bagian); font-weight: var(--af-bobot-hitam); color: var(--af-merah); } /* 2. Satu warna khusus untuk tombol ajakan — tidak dipakai untuk hal lain. */ .af-tombol-utama { background-color: var(--af-merah-aksen); color: var(--af-putih); font-weight: var(--af-bobot-sangat); font-size: 20px; border: 0; border-radius: var(--af-r-tombol); padding: 10px 38px; box-shadow: var(--af-bayang); cursor: pointer; } .af-tombol-utama:hover { background-color: var(--af-merah-hover); } .af-tombol-utama:active { background-color: var(--af-merah-tekan); } /* 3. Pil menu aktif — emas hanya muncul di sini dan di bilah statistik. */ .af-menu-aktif { background-color: var(--af-emas); color: var(--af-tinta-1); font-weight: var(--af-bobot-sangat); border-radius: var(--af-r-pil-menu); padding: 6px 16px; } /* 4. Kartu: selalu membulat, tidak pernah bersudut tajam. */ .af-kartu { background: var(--af-putih); border-radius: var(--af-r-kartu); padding: 20px; box-shadow: var(--af-bayang); } /* 5. Judul di dalam pil marun — ciri khas kartu paket. */ .af-pil-judul { display: inline-block; background-color: var(--af-marun-tua); color: var(--af-putih); font-size: 26px; font-weight: var(--af-bobot-sangat); border-radius: var(--af-r-pil-harga); padding: 15px 20px; } /* 6. Harga: angka besar dalam warna merek, harga asli dicoret di bawahnya. */ .af-harga { font-size: 27.92px; color: var(--af-tinta-2); } .af-harga strong { font-size: var(--af-harga-besar); font-weight: var(--af-bobot-sangat); color: var(--af-merah); } .af-harga small { font-size: var(--af-harga-coret); font-weight: var(--af-bobot-tebal); color: var(--af-abu-coret); text-decoration: line-through; } /* ========================================================================== ANIMASI Situs aslinya memakai AOS dengan pola yang selalu sama: judul -> fade-right subjudul -> fade-left, jeda 100ms isi -> fade kartu -> jeda bertingkat 100ms per item Durasi 800ms, dimainkan SEKALI. Di ponsel seluruh animasi dimatikan. ========================================================================== */ @media (max-width: 767.98px) { [data-aos] { transform: none !important; opacity: 1 !important; } } /* ========================================================================== CATATAN PENTING -------------------------------------------------------------------------- Banyak ukuran di atas berangka desimal (18.61px, 7.42px, 41.72px, 55.85px). Nilainya sah dan memang dipakai situs aslinya, tetapi jelas berasal dari ekspor alat desain — bukan skala yang disengaja. Kalau sistem ini dipakai untuk proyek baru, angka-angka itu boleh dibulatkan ke kelipatan 4px tanpa terlihat berbeda: 55.85 -> 56 41.72 -> 40 18.61 -> 20 7.42 -> 8 ========================================================================== */