/* ========================================================================== wz-ui — primitif bersama antar section: pill, tombol, dan ritme kepala. Dimuat PALING AKHIR di . Aturan di sini sengaja berkekhususan sama dengan aturan per-section yang digantikannya, jadi yang menang adalah urutan muat — bukan perang !important. Berkas per-section (waba-section.css, fitur-section.css, hero-revamp.css, inbox-demo-b.css) sengaja TIDAK diubah: masing-masing masih dipakai untuk tata letak sectionnya. Yang dimatikan di sini hanya deklarasi yang bikin tombol dan pill-nya berbeda-beda. Sebelum berkas ini ada: pill — 4 gaya (pill rose-tint, pill putih berbingkai, KOTAK ungu, pill accent solid), 3 ukuran huruf (13/14/15px) tombol — 3 radius (9px / 50px / 999px), 2 font (Quicksand / Hind), 3 perilaku hover (naik 1px / hanya gelap / naik 2px), dan .elementor-animation-bob hanya menempel di dua dari empat ========================================================================== */ :root { /* Merah jambu WatZap. --wz-brand dipakai untuk aksen dan garis fokus; tombol memakai --wz-btn-bg yang satu tingkat lebih gelap karena teks putih di atas #da336b hanya mencapai 4,50:1 — meleset tipis dari AA. #c42a5e mencapai 5,47:1 dengan rona yang sama. */ --wz-brand: #da336b; --wz-btn-bg: #c42a5e; --wz-btn-bg-hover: #a8244f; /* Pill: latar lembut, bukan blok warna penuh. Label section tidak boleh berteriak lebih keras daripada tombol CTA di bawahnya. 6,17:1. */ --wz-pill-bg: #fdeef4; --wz-pill-text: #a8244f; /* Nada tier paket. Teal lolos AA (5,28:1) dan tidak diubah. Biru lama #0082ff hanya 3,73:1 dengan teks putih — gagal AA — jadi diturunkan ke #0071e3 yang mencapai 4,71:1 dengan rona yang praktis sama. */ --wz-btn-blue: #0071e3; --wz-btn-teal: #007b6a; /* Nada tier untuk kartu harga versi baru. Biru elektrik + teal + merah jambu adalah tiga rona keras yang tidak berhubungan — tiga kartu sederajat jadi terbaca seperti tiga merek, bukan tiga tingkat. Navy dan slate berkerabat (satu keluarga rona dengan --wz-surface-dark) dan berkepekatan rendah, jadi merah jambu merek di paket teratas tinggal satu-satunya yang bersuara. Keduanya lolos AA di kedua peran: teks di atas putih, dan putih di atasnya. */ --wz-btn-navy: #24466e; /* 9,65:1 */ --wz-btn-slate: #5b6b7d; /* 5,46:1 */ --wz-ink: #171717; --wz-ink-soft: #5a5a5a; /* Permukaan gelap. Dua section berlatar navy, dan sampai sekarang sistem ini hanya punya warna untuk latar terang. --wz-surface-dark ada supaya varian .wz-on-dark bisa menjelaskan sendiri latar mana yang dimaksud. */ --wz-surface-dark: #142942; --wz-ink-on-dark: #b6c6da; /* 6,9:1 di atas --wz-surface-dark */ --wz-ink-mute-on-dark: #94a8c0; /* 6,3:1 */ /* Di latar gelap, warna apa pun kalah TERANG dari putih murni (14,73:1), jadi kata beraksen di sebelah teks putih selalu cenderung terbaca pudar. Yang bisa dinaikkan bukan terangnya, melainkan kepekatannya — turunkan komponen birunya. Jejaknya: #ff9bbd (B=189, pucat) → #ff5c8d (B=141, masih kalem) → #ff3d71 (B=113). Judul 38px/700 terhitung teks besar, ambangnya 3:1, jadi 4,32:1 masih lapang. */ --wz-brand-on-dark: #ff3d71; /* 4,32:1 */ --wz-ui-font: "Quicksand", system-ui, -apple-system, sans-serif; } /* ---------- Pill --------------------------------------------------------- Satu bentuk untuk keempat section. Aturan reset ditulis eksplisit karena tiap section datang dengan bawaan yang berbeda: wz3 kotak dan ungu, wz2 berbingkai putih, wz-ae accent solid. ------------------------------------------------------------------------ */ .wz-pill, .wz-rv__eyebrow, .wz2-eyebrow, .wz3-eyebrow, .wz-ae-eyebrow, .wzb-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border: 0; border-radius: 999px; background: var(--wz-pill-bg); color: var(--wz-pill-text); font-family: var(--wz-ui-font); font-size: 14px; font-weight: 700; line-height: 1.35; letter-spacing: 0; text-transform: none; white-space: nowrap; } /* wz2 menaruh teksnya di dalam dengan font dan warnanya sendiri. */ .wz2-eyebrow span { font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; } /* Logo di dalam pill (WhatsApp di hero, Meta di wz2) disamakan tingginya; lebar dibiarkan auto supaya rasio logo Meta yang 290×191 tidak gepeng. */ .wz-pill img, .wz-pill svg, .wz-rv__eyebrow img, .wz-rv__eyebrow svg, .wz2-eyebrow img, .wz2-eyebrow svg, .wzb-pill img, .wzb-pill svg { display: block; width: auto; height: 17px; flex-shrink: 0; } /* ---------- Tombol ------------------------------------------------------- Satu bentuk, satu font, satu perilaku hover. min-height 50px menjaga sasaran sentuh tetap nyaman di layar sentuh. ------------------------------------------------------------------------ */ .wz-btn, .wz-rv__btn, .wz-rv__link, .wz2-btn, .wz3-btn, .wzb-btn--primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 13px 26px; border: 0; border-radius: 999px; background: var(--wz-btn-bg); color: #fff; font-family: var(--wz-ui-font); font-size: 16px; font-weight: 700; line-height: 1.1; text-decoration: none; cursor: pointer; transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } /* `.elementor a { box-shadow: none }` berkekhususan (0,1,1) — lebih tinggi daripada satu kelas. Kelas yang sama ditulis dua kali memberi (0,2,0) tanpa perlu !important. */ .wz-btn.wz-btn, .wz-rv__btn.wz-rv__btn, .wz2-btn.wz2-btn, .wz3-btn.wz3-btn, .wzb-btn--primary.wzb-btn--primary { box-shadow: 0 6px 16px rgba(196, 42, 94, 0.26); } .wz-btn:hover, .wz-rv__btn:hover, .wz2-btn:hover, .wz3-btn:hover, .wzb-btn--primary:hover, .wz-btn:focus-visible, .wz-rv__btn:focus-visible, .wz2-btn:focus-visible, .wz3-btn:focus-visible, .wzb-btn--primary:focus-visible { background: var(--wz-btn-bg-hover); color: #fff; transform: translateY(-1px); } .wz-btn.wz-btn:hover, .wz-rv__btn.wz-rv__btn:hover, .wz2-btn.wz2-btn:hover, .wz3-btn.wz3-btn:hover, .wzb-btn--primary.wzb-btn--primary:hover { box-shadow: 0 10px 22px rgba(196, 42, 94, 0.32); } .wz-btn:active, .wz-rv__btn:active, .wz2-btn:active, .wz3-btn:active, .wzb-btn--primary:active { transform: translateY(0); } /* Sebagian tombol memakai ikon FontAwesome (), bukan inline. Keduanya harus mendarat pada ukuran optis yang sama. */ .wz-btn i, .wz-rv__btn i, .wz2-btn i, .wz3-btn i, .wzb-btn--primary i, .wz-btn--ghost i, .wz-btn--quiet i { font-size: 16px; line-height: 1; flex-shrink: 0; } .wz-btn svg, .wz-rv__btn svg, .wz-rv__link svg, .wz2-btn svg, .wz3-btn svg, .wzb-btn--primary svg { width: 17px; height: 17px; flex-shrink: 0; } /* ---------- Tombol sekunder ---------------------------------------------- */ .wz-btn--ghost, .wzb-btn--ghost, .wz-rv__link { min-height: 50px; padding: 13px 24px; border: 1.5px solid rgba(23, 23, 23, 0.16); border-radius: 999px; background: #fff; color: var(--wz-ink); font-family: var(--wz-ui-font); font-size: 16px; font-weight: 700; } .wz-btn--ghost:hover, .wzb-btn--ghost:hover, .wz-rv__link:hover, .wz-btn--ghost:focus-visible, .wzb-btn--ghost:focus-visible, .wz-rv__link:focus-visible { border-color: rgba(23, 23, 23, 0.34); background: #fff; color: var(--wz-ink); } .wz-btn--ghost.wz-btn--ghost, .wzb-btn--ghost.wzb-btn--ghost, .wz-rv__link.wz-rv__link, .wz-btn--ghost.wz-btn--ghost:hover, .wzb-btn--ghost.wzb-btn--ghost:hover, .wz-rv__link.wz-rv__link:hover { box-shadow: none; } /* Tautan tenang — dipakai saat aksi kedua tidak boleh menyaingi CTA utama. Geometrinya sengaja tidak dipaksakan: .wz2-link hidup di dalam alur teks, jadi min-height dan radius justru akan merusak barisnya. Yang disamakan tipografi dan warnanya. */ .wz-btn--quiet, .wzb-btn--quiet, .wz2-link { min-height: 0; padding: 10px 14px; /* Radius tidak terlihat (tanpa latar & bingkai) tapi garis fokus keyboard mengikutinya — tanpa ini bentuknya beda-beda antar section. */ border-radius: 999px; border: 0; background: none; color: var(--wz-ink-soft); font-family: var(--wz-ui-font); font-size: 15px; font-weight: 700; } .wz-btn--quiet:hover, .wzb-btn--quiet:hover, .wz2-link:hover, .wz-btn--quiet:focus-visible, .wzb-btn--quiet:focus-visible, .wz2-link:focus-visible { background: none; color: var(--wz-btn-bg); transform: none; } .wz-btn--quiet.wz-btn--quiet, .wzb-btn--quiet.wzb-btn--quiet, .wz2-link.wz2-link { box-shadow: none; } .wz-btn--quiet svg, .wzb-btn--quiet svg, .wz2-link svg { width: 16px; height: 16px; } /* ---------- Fokus keyboard ------------------------------------------------ Sebelumnya hanya .wz3-btn yang punya. Sekarang semua tombol punya garis fokus yang sama. ------------------------------------------------------------------------ */ .wz-btn:focus-visible, .wz-rv__btn:focus-visible, .wz2-btn:focus-visible, .wz3-btn:focus-visible, .wzb-btn--primary:focus-visible, .wz-btn--ghost:focus-visible, .wzb-btn--ghost:focus-visible, .wz-btn--quiet:focus-visible, .wzb-btn--quiet:focus-visible, .wz-rv__link:focus-visible, .wz2-link:focus-visible { outline: 2px solid var(--wz-brand); outline-offset: 3px; } /* ---------- Ritme kepala section ------------------------------------------ Jarak antara pill → judul → subjudul, supaya ketiganya terbaca sebagai satu blok yang sama di section mana pun. Ukuran huruf judul sengaja dibiarkan milik masing-masing section: hero memang harus lebih besar daripada section di tengah halaman. ------------------------------------------------------------------------ */ .wz-rv__eyebrow, .wz2-eyebrow, .wz3-eyebrow, .wz-ae-eyebrow, .wzb-pill { margin: 0 0 14px; } /* ---------- Hormati preferensi gerak ------------------------------------- */ @media (prefers-reduced-motion: reduce) { .wz-btn, .wz-rv__btn, .wz2-btn, .wz3-btn, .wzb-btn--primary, .wz-btn--ghost, .wzb-btn--ghost { transition-duration: 0.01ms; } .wz-btn:hover, .wz-rv__btn:hover, .wz2-btn:hover, .wz3-btn:hover, .wzb-btn--primary:hover, .wz-btn--ghost:hover, .wzb-btn--ghost:hover { transform: none; } } /* ---------- Subjudul bersama --------------------------------------------- Dipakai section yang belum punya subjudul sendiri (mis. Integrasi). ------------------------------------------------------------------------ */ .wz-sub { margin: 10px 0 0; color: var(--wz-ink-soft); font-family: var(--wz-ui-font); font-size: 16px; font-weight: 500; line-height: 1.55; } /* ---------- Tombol Elementor --------------------------------------------- CTA utama halaman ini dibuat lewat widget Elementor, dan tiap widget membawa aturannya sendiri: radius 9px / 28px / 50px, huruf 14–18px, dan Hind. WARNA LATAR SENGAJA TIDAK DISERAGAMKAN. Tombol "Daftar Sekarang" di kartu harga berwarna teal, biru, dan merah jambu mengikuti paketnya — itu pengkodean tier, bukan kelalaian. Yang disamakan hanya bentuk, tipografi, dan perilaku hover-nya. Kekhususan (0,4,0) menyamai aturan per-widget Elementor (.elementor-5060 .elementor-element.elementor-element-xxx .elementor-button); berkas ini dimuat belakangan, jadi yang ini yang menang. Hanya elementor-size-lg yang disasar — size-sm dipakai tab pemilih periode harga, yang memang bukan tombol aksi. ------------------------------------------------------------------------ */ .elementor .elementor-element .elementor-button.elementor-size-lg { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 13px 26px; border-radius: 999px; font-family: var(--wz-ui-font); font-size: 16px; font-weight: 700; line-height: 1.1; transition: transform 0.18s ease, box-shadow 0.18s ease; } .elementor .elementor-element .elementor-button.elementor-size-lg { box-shadow: 0 6px 16px rgba(23, 23, 23, 0.14); } /* Penggelapan hover memakai lapisan inset, bukan warna baku, supaya satu aturan ini berlaku sama untuk tombol merah jambu, biru, maupun teal. */ .elementor .elementor-element .elementor-button.elementor-size-lg:hover, .elementor .elementor-element .elementor-button.elementor-size-lg:focus-visible { transform: translateY(-1px); box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.1), 0 10px 22px rgba(23, 23, 23, 0.18); } .elementor .elementor-element .elementor-button.elementor-size-lg:active { transform: translateY(0); } .elementor .elementor-element .elementor-button.elementor-size-lg:focus-visible { outline: 2px solid var(--wz-brand); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .elementor .elementor-element .elementor-button.elementor-size-lg { transition-duration: 0.01ms; } .elementor .elementor-element .elementor-button.elementor-size-lg:hover { transform: none; } } /* ---------- Dua kasus yang butuh kekhususan lebih tinggi ------------------ */ /* Eyebrow varian A dibungkus widget Elementor yang menaruh gradien ungu→merah jambu berikut radius 4px pada .elementor-widget-container-nya, jadi pill-nya tampil sebagai pill di dalam kotak. Bungkusnya dinetralkan; pill-nya sendiri yang jadi bentuknya. (0,3,0) menyamai aturan Elementor, menang lewat urutan. */ /* Kekhususan aturan Elementor di sini (0,4,0) — empat kelas, bukan tiga. `:has()` menyumbang kekhususan argumen terkuatnya, jadi satu kelas induk ditambah `.wz-pill` tiga kali menghasilkan (0,4,0) yang menyamainya. */ .elementor-widget-container:has(> .wz-pill.wz-pill.wz-pill) { padding: 0; background-color: transparent; background-image: none; border-radius: 0; } /* Warna dan tebal hurufnya juga disetel per-widget pada (0,4,0). Kelas yang sama empat kali menyamainya tanpa bergantung pada kelas leluhur mana pun. */ .wz-pill.wz-pill.wz-pill.wz-pill { color: var(--wz-pill-text); font-family: var(--wz-ui-font); font-weight: 700; } /* Bilah CTA melayang di pojok bawah. Geometrinya dikunci !important dari blok