/* ========================================================================== IGNAN — Halaman /price-list (Rental Packages) Acuan: DOCS/20260803.md butir 1–3a — tampilan lebih bersih & profesional, dengan gerak berbasis scroll supaya pengunjung merasakan perpindahan skala paket, bukan hanya membaca daftar. Primitif geraknya ada di assets/css/ignan-motion.css + assets/js/ignan-motion.js. Palet mengikuti tema: biru tua #042c54 sebagai dasar gelap, #109aec sebagai aksen dingin, jingga logo #f08a24 sebagai aksen hangat. ========================================================================== */ /* Palet dideklarasikan di `:root`, BUKAN di `.pl-hero, .pl-section`. Sebelumnya di kedua selektor itu, dan akibatnya "tombol Pesan Sekarang tidak terlihat textnya" (DOCS/sgt_20260804.md): modal detail paket adalah anak langsung `` — di luar kedua selektor tersebut — sehingga setiap `var(--pl-…)` **tanpa nilai cadangan** di dalam modal tidak terselesaikan. Untuk `background-color`, properti yang tidak terselesaikan berarti TRANSPARAN, jadi tombolnya jadi teks putih di atas latar modal yang putih. Terukur lewat computed style: `color: rgb(255,255,255)`, `background-color: rgba(0,0,0,0)`. Tombol "Tutup" di sebelahnya selamat hanya karena kebetulan memakai `var(--pl-navy, #042c54)` — pakai cadangan. Berkas ini hanya dimuat di /price-list dan seluruh namanya berawalan `--pl-`, jadi mendeklarasikannya di `:root` tidak mempengaruhi halaman lain. Pelajaran: custom property yang dipakai komponen mengapung (modal, tooltip, popover) TIDAK boleh dideklarasikan pada selektor seksi. */ :root { --pl-navy: #042c54; --pl-navy-deep: #021a33; --pl-blue: #109aec; /* Varian gelap KHUSUS teks kecil — lihat catatan sama di page.css. */ --pl-blue-text: #0d74b3; --pl-blue-dark: #0d74b3; /* dari #0d84cc (4,05:1) → 4,58:1 */ --pl-amber: #f08a24; --pl-ink: #10202f; --pl-muted: #5b6b7c; --pl-line: #e3eaf2; } /* -------------------------------------------------------------------------- Elemen bersama -------------------------------------------------------------------------- */ .pl-pre { display: block; margin-bottom: 14px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--pl-blue-text); } .pl-section-dark .pl-pre, .pl-cta .pl-pre, /* Hero WAJIB ikut: latarnya gelap, jadi biru tua (--pl-blue-text) di sana justru turun ke 3,48:1. Biru terang #6cc4f7 di atas #021a33 = 8,9:1. */ .pl-hero .pl-pre { color: #6cc4f7; } .pl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border: 1px solid transparent; border-radius: 999px; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .pl-btn-sm { padding: 11px 22px; font-size: 0.78rem; } .pl-btn-primary { /* Tombol utama: latar #109aec dengan huruf putih hanya 3,06:1. #0d74b3 = 4,58:1, warna mereknya tetap terbaca sebagai biru IGNAN. */ background-color: var(--pl-blue-text); color: #ffffff; box-shadow: 0 12px 28px rgba(13, 116, 179, 0.3); } .pl-btn-primary:hover, .pl-btn-primary:focus { background-color: var(--pl-blue-dark); color: #ffffff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(16, 154, 236, 0.34); } /* Catatan spesifisitas — penting untuk semua warna teks tautan di halaman ini. main.css mewarnai seluruh tautan lewat: a:not(.btn), a:link:not(.btn), a:visited:not(.btn), ... `a:link:not(.btn)` bernilai (0,2,1), jadi selektor satu-dua kelas biasa kalah dan tombolnya ikut warna tema (biru tua di atas latar gelap = tak terbaca). Varian `:link`/`:visited` di bawah menaikkan nilainya ke (0,3,0) sehingga menang tanpa perlu !important. */ .pl-btn.pl-btn-ghost, .pl-btn.pl-btn-ghost:link, .pl-btn.pl-btn-ghost:visited { border-color: rgba(255, 255, 255, 0.45); color: #ffffff; } .pl-btn.pl-btn-ghost:hover, .pl-btn.pl-btn-ghost:focus { border-color: #ffffff; background-color: rgba(255, 255, 255, 0.12); color: #ffffff; transform: translateY(-2px); } .pl-btn.pl-btn-primary, .pl-btn.pl-btn-primary:link, .pl-btn.pl-btn-primary:visited, .pl-btn.pl-btn-primary:hover, .pl-btn.pl-btn-primary:focus { color: #ffffff; } /* Di atas latar terang, tombol garis luar perlu warna gelap. */ .pl-section-light .pl-btn.pl-btn-ghost, .pl-section-light .pl-btn.pl-btn-ghost:link, .pl-install .pl-btn.pl-btn-ghost, .pl-install .pl-btn.pl-btn-ghost:link, .pl-modal-foot .pl-btn.pl-btn-ghost { border-color: rgba(4, 44, 84, 0.28); color: var(--pl-navy, #042c54); } .pl-section-light .pl-btn.pl-btn-ghost:hover, .pl-install .pl-btn.pl-btn-ghost:hover, .pl-modal-foot .pl-btn.pl-btn-ghost:hover { border-color: #042c54; background-color: rgba(4, 44, 84, 0.07); color: #042c54; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .pl-hero { position: relative; display: flex; align-items: flex-end; min-height: 96vh; padding: 190px 0 118px; overflow: hidden; background-color: #021a33; color: #ffffff; } .pl-hero-bg { position: absolute; inset: -8% 0; z-index: 0; } .pl-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: saturate(0.85) contrast(1.05); } /* Dua lapis: gelap dari bawah agar teks terbaca, biru tipis dari kiri supaya fotonya menyatu dengan warna merek. */ .pl-hero-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(2, 18, 33, 0.96) 4%, rgba(2, 18, 33, 0.64) 42%, rgba(2, 18, 33, 0.26) 100%), linear-gradient(to right, rgba(2, 22, 40, 0.86), rgba(4, 44, 84, 0.1) 76%); } .pl-hero-inner { position: relative; z-index: 3; } /* Tema memusatkan .breadcrumb; di hero ini isinya rata kiri bersama judul. */ .pl-crumb.breadcrumb { justify-content: flex-start; padding: 0; margin-bottom: 22px; background: transparent; } .pl-crumb .breadcrumb-item, .pl-crumb .breadcrumb-item a { color: rgba(255, 255, 255, 0.66); font-size: 0.8rem; letter-spacing: 0.04em; } .pl-crumb .breadcrumb-item a:hover { color: #ffffff; } .pl-crumb .breadcrumb-item.active { color: #ffffff; } .pl-crumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.4); } .pl-hero-title { max-width: 15em; margin: 0 0 22px; font-size: clamp(2.2rem, 5.6vw, 4.4rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.022em; color: #ffffff; } .pl-lead { max-width: 40em; margin: 0 0 34px; font-size: 1.04rem; line-height: 1.75; color: rgba(255, 255, 255, 0.8); } .pl-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } /* Angka ringkas: jumlah paket, daya tertinggi, jumlah add-on. Semuanya dihitung dari data paket — tidak ada klaim yang tidak punya sumber. */ .pl-stats { display: flex; flex-wrap: wrap; margin: 52px 0 0; padding: 0; list-style: none; } .pl-stats li { padding: 0 34px; margin: 10px 0; border-left: 1px solid rgba(255, 255, 255, 0.18); } .pl-stats li:first-child { padding-left: 0; border-left: 0; } .pl-stats strong { display: block; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #ffffff; font-variant-numeric: tabular-nums; } .pl-stats span { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } /* Deret bar equalizer di dasar hero — dekoratif, disembunyikan dari pembaca layar. */ .pl-eq { position: absolute; bottom: 0; left: 0; z-index: 2; display: flex; align-items: flex-end; gap: 6px; width: 100%; height: 72px; padding: 0 6px; } .pl-eq span { flex: 1; height: 26%; border-radius: 3px 3px 0 0; background: linear-gradient(to top, rgba(16, 154, 236, 0.9), rgba(240, 138, 36, 0.55)); transform-origin: bottom center; animation: pl-eq 1.9s ease-in-out infinite; animation-delay: calc(var(--i) * -0.13s); } @keyframes pl-eq { 0%, 100% { transform: scaleY(0.34); } 28% { transform: scaleY(1.7); } 54% { transform: scaleY(0.72); } 78% { transform: scaleY(1.25); } } /* Ditaruh di tepi kanan: di tengah ia bertumpuk dengan baris angka, dan di dasar layar bertumpuk dengan deret equalizer. */ .pl-cue { position: absolute; right: 42px; bottom: 96px; z-index: 4; } /* -------------------------------------------------------------------------- Cerita saat digulir (sticky section + image sequence) -------------------------------------------------------------------------- */ .pl-story { background-color: #ffffff; } /* Tinggi track menentukan panjang perjalanan scroll; kira-kira satu layar per frame supaya perpindahannya terasa disengaja, tidak tersapu. */ .pl-story-track { /* 96vh per paket, bukan 84vh: satu notch roda tetikus (±100 px) jadi porsi yang lebih kecil dari satu langkah cerita, sehingga rig-nya tumbuh bertahap alih-alih melompat (butir 10). */ height: calc(var(--frames, 4) * 96vh); } .pl-story-panel { display: flex; align-items: center; padding: 96px 0 56px; background-color: #ffffff; } .pl-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; width: 100%; } /* min-width: 0 wajib — tanpa ini lebar gambar asli (1456px) menjadi ukuran minimum kolomnya dan kolom teks tergencet sampai tinggal beberapa huruf. */ .pl-story-copy, .pl-story-stage { min-width: 0; } .pl-story-title { max-width: 18em; margin: 0 0 28px; font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: 800; line-height: 1.16; letter-spacing: -0.018em; color: var(--pl-ink, #10202f); } .pl-story-captions { position: relative; min-height: 240px; } /* Menimpa tata letak bawaan [data-sequence] > * yang memusatkan isinya. */ .pl-story-caption { flex-direction: column; align-items: flex-start !important; justify-content: center !important; text-align: left; } .pl-story-caption h3 { margin: 14px 0 10px; font-size: 1.3rem; font-weight: 700; line-height: 1.35; color: var(--pl-ink, #10202f); } .pl-story-caption p { max-width: 32em; margin: 0; font-size: 0.98rem; line-height: 1.72; color: var(--pl-muted, #5b6b7c); } .pl-watt-badge { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 16px; border-radius: 999px; /* Teks di dalam lencana ini 12px, jadi ambangnya 4,5:1. Latar biru tipis menurunkan rasio ke 4,05:1 — latarnya dibuat lebih pucat. */ background-color: rgba(16, 154, 236, 0.06); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pl-blue-dark, #0d74b3); } .pl-watt-badge em { font-style: normal; font-size: 1.24rem; font-weight: 800; letter-spacing: -0.01em; } .pl-story-stage { position: relative; aspect-ratio: 1 / 1; max-height: 62vh; } .pl-story-meter { position: absolute; bottom: 34px; left: 50%; width: min(520px, 78%); height: 3px; border-radius: 999px; background-color: #e3eaf2; transform: translateX(-50%); overflow: hidden; } .pl-story-meter > span { display: block; height: 100%; width: calc(var(--sp, 0) * 100%); background: linear-gradient(90deg, #109aec, #f08a24); } /* -------------------------------------------------------------------------- Seksi umum -------------------------------------------------------------------------- */ .pl-section { padding: 104px 0; } .pl-section-light { background-color: #f6f9fc; } .pl-section-dark { background-color: var(--pl-navy, #042c54); color: #ffffff; } .pl-intro { max-width: 42em; margin: 0 auto 52px; text-align: center; } .pl-intro h2 { margin: 0 0 14px; font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.16; letter-spacing: -0.018em; color: var(--pl-ink, #10202f); } .pl-intro p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--pl-muted, #5b6b7c); } .pl-section-dark .pl-intro h2 { color: #ffffff; } .pl-section-dark .pl-intro p { color: rgba(255, 255, 255, 0.74); } /* Rel pintasan paket, menempel di bawah navbar. */ .pl-rail { position: -webkit-sticky; position: sticky; top: 66px; z-index: 6; display: flex; gap: 8px; margin-bottom: 34px; padding: 10px; border: 1px solid var(--pl-line, #e3eaf2); border-radius: 999px; background-color: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 26px rgba(4, 44, 84, 0.07); overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .pl-rail::-webkit-scrollbar { display: none; } /* Diberi induk .pl-rail agar warnanya menang atas a:link:not(.btn) — lihat catatan spesifisitas di bagian tombol. */ .pl-rail .pl-rail-chip, .pl-rail .pl-rail-chip:link, .pl-rail .pl-rail-chip:visited { color: #42566b; } .pl-rail .pl-rail-chip:hover, .pl-rail .pl-rail-chip:focus, .pl-rail .pl-rail-chip.is-active { color: #ffffff; } .pl-rail-chip { flex: 0 0 auto; padding: 9px 20px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; color: #42566b; text-decoration: none; transition: background-color 0.22s ease, color 0.22s ease; } .pl-rail-chip:hover, .pl-rail-chip:focus, .pl-rail-chip.is-active { background-color: var(--pl-navy, #042c54); color: #ffffff; } /* -------------------------------------------------------------------------- Kartu paket -------------------------------------------------------------------------- */ /* `grid-auto-rows: 1fr` menyeragamkan tinggi SEMUA kartu, bukan hanya kartu dalam satu baris. `.pl-card` sudah flex column dengan `.pl-card-foot` ber-`margin-top: auto`, jadi tombolnya rata di dalam satu baris — tapi antar baris tingginya masih ditentukan isi masing-masing baris. Terukur sebelum perbaikan: tinggi kartu 788 / 811 / 833 px dan tombol "Lihat spesifikasi" mendarat di 4 ketinggian berbeda (728, 730, 750, 773) — itulah "informasi paket posisinya tidak konsisten" di DOCS/sgt_20260803.md. */ .pl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); grid-auto-rows: 1fr; gap: 26px; } .pl-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--pl-line, #e3eaf2); border-radius: 20px; background-color: #ffffff; box-shadow: 0 8px 26px rgba(4, 44, 84, 0.06); /* transform tidak dianimasikan di sini: propertinya sudah dipakai reveal, jadi hover cukup mengubah bayangan & garis tepi. */ transition: box-shadow 0.3s ease, border-color 0.3s ease; } .pl-card.is-in:hover { border-color: rgba(16, 154, 236, 0.4); box-shadow: 0 18px 44px rgba(4, 44, 84, 0.13); } /* -------------------------------------------------------------------------- Panggung — wadah visual paket Foto paket dulunya kotak putih hasil studio: alatnya benar, tapi di halaman jadi tempelan putih yang tidak menjelaskan apa pun (DOCS/sgt_20260803.md). Fotonya sekarang sudah dipotong dari latarnya, dan wadahnya inilah yang menggambar panggungnya: dinding venue yang terang disorot lampu di atas, lantai panggung gelap di bawah, dan bayangan alat di lantai. Satu definisi dipakai kartu, panel cerita, dan modal detail — termasuk untuk paket yang belum punya foto (skema rig SVG), supaya keduanya tampil di panggung yang sama. Ukuran vertikal SENGAJA memakai persen dari tinggi (posisi absolut), bukan margin/padding persen — margin persen dihitung dari LEBAR wadah, jadi garis lantainya akan bergeser tiap kali kartunya berubah lebar. -------------------------------------------------------------------------- */ .pl-card-visual, .pl-story-frame, .pl-modal-visual { --pl-floor: 19%; /* tinggi lantai panggung */ overflow: hidden; /* Dinding venue sengaja LEBIH DALAM daripada versi pertama (#eaf3fa → #bccfe0) yang membuat seksi ini terbaca "berlatar putih". Kuncinya vignette: pusat tetap terang sebagai kolam sorot lampu supaya kabinet speaker yang gelap tidak kehilangan kontras — foto paket dipasang `mix-blend-mode: multiply`, jadi apa pun yang ada di belakangnya ikut menentukan terang-gelap alatnya. */ background: /* kolam sorot lampu tepat di belakang rig */ radial-gradient(88% 62% at 50% 24%, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 253, 0.82) 38%, rgba(215, 232, 244, 0) 74%), /* gelap di sudut — bibir panggung yang tidak tersorot */ radial-gradient(130% 108% at 50% 6%, rgba(255, 255, 255, 0) 46%, rgba(96, 128, 156, 0.32) 100%), /* dinding venue */ linear-gradient(180deg, #d9e7f2 0%, #bed3e4 56%, #9cb6cc 100%); } /* Lantai panggung. DULU GELAP (#263a4e → #10202e) dan itu keliru: pada kartu paket, lantai segelap itu terbaca sebagai **balok hitam** di bawah foto, bukan sebagai lantai — "ada bagian dihitam dibagian bawah" (DOCS/sgt_20260804.md). Di layar kecil balok itu bahkan lebih tinggi daripada bagian foto yang berisi alat. Sekarang lantainya permukaan terang bersemir dingin dengan pantulan tipis di bawah alat. Kabinet speaker berwarna gelap jadi tetap punya kontras — dan `mix-blend-mode: multiply` pada fotonya kini bekerja untuk kedua jenis foto yang ada: potongan transparan MAUPUN foto produk berlatar putih (dua foto paket terbaru dari produsen berlatar putih). */ .pl-card-visual::before, .pl-story-frame::before, .pl-modal-visual::before { content: ""; position: absolute; inset: auto 0 0 0; height: var(--pl-floor); /* Garis terang di tepi atas = bibir panggung yang tertimpa cahaya; tanpa itu peralihan dinding ke lantai terbaca sebagai potongan datar. */ border-top: 1px solid rgba(255, 255, 255, 0.85); background: /* pantulan lembut tepat di bawah alat */ radial-gradient(58% 120% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, #c8d9e8 0%, #dbe7f1 52%, #eaf1f7 100%); } /* Bayangan alat di lantai — ini yang membuat alatnya terasa berdiri di panggung, bukan menempel di gambar latar. */ .pl-card-visual::after, .pl-story-frame::after, .pl-modal-visual::after { content: ""; position: absolute; bottom: calc(var(--pl-floor) - 3%); left: 50%; width: 74%; height: 8%; border-radius: 50%; /* Bayangan dilembutkan bersamaan dengan lantai yang kini terang — bayangan 0,5 di atas permukaan terang terbaca seperti lubang. */ background: radial-gradient(closest-side, rgba(20, 45, 72, 0.3), rgba(20, 45, 72, 0)); transform: translateX(-50%); } /* .pl-story-frame TIDAK diberi `position` di sini: frame-nya sudah `position: absolute; inset: 0` dari [data-sequence] > * di ignan-motion.css (itu yang menumpuk frame jadi satu urutan). Menimpanya dengan `relative` akan membuat frame-nya berjajar ke bawah. */ .pl-card-visual, .pl-modal-visual { position: relative; } .pl-card-visual { aspect-ratio: 5 / 4; margin: 0; } /* Alat berdiri di garis lantai: tepi bawah gambar bertemu tepi atas lantai. Selektor sengaja disertai wadahnya — [data-sequence] img di ignan-motion.css punya specificity (0,1,1) dan akan menang atas .pl-visual-img saja. */ .pl-card-visual .pl-visual-img, .pl-story-frame .pl-visual-img, .pl-modal-visual .pl-visual-img, .pl-card-visual .pl-rig, .pl-story-frame .pl-rig, .pl-modal-visual .pl-rig { position: absolute; bottom: calc(var(--pl-floor) - 2%); left: 50%; z-index: 1; width: auto; max-width: 88%; height: auto; max-height: calc(100% - var(--pl-floor) - 8%); object-fit: contain; transform: translateX(-50%); transition: transform 0.5s var(--mo-ease, ease); } /* Foto paket adalah JPEG hasil foto studio: latarnya PUTIH dan ikut terbawa, jadi sebuah kotak putih menutupi panggung yang sudah digambar di belakangnya — "gambar paket ada background putih, jadi jelek" (DOCS/sgt_20260803.md). `mix-blend-mode: multiply` menyelesaikannya tanpa aset baru: putih (nilai 1) dikalikan latar = latar itu sendiri, jadi kotak putihnya lenyap dan dinding serta lantai panggung terlihat menembus. Kabinet speaker yang gelap tetap gelap, dan karena dinding panggungnya terang kontrasnya justru naik. Hanya dipakai untuk FOTO; `.pl-rig` (skema SVG) digambar dengan warnanya sendiri di atas latar transparan dan tidak boleh dikalikan. */ .pl-card-visual .pl-visual-img, .pl-story-frame .pl-visual-img, .pl-modal-visual .pl-visual-img { mix-blend-mode: multiply; } .pl-card.is-in:hover .pl-visual-img { /* translateX wajib diulang — transform bukan properti yang bertumpuk, tanpa ini gambarnya melompat ke kanan saat disorot. */ transform: translateX(-50%) scale(1.045); } /* Penanda hak cipta di sudut gambar. Ini penangkal seadanya, BUKAN proteksi: siapa pun masih bisa mengambil berkasnya lewat devtools atau URL langsung — satu-satunya proteksi nyata adalah watermark yang menyatu di dalam berkas gambarnya. Lihat catatan di price-list.php. */ .pl-card-copy { position: absolute; right: 10px; bottom: calc(var(--pl-floor) + 6px); z-index: 3; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.72); text-shadow: 0 1px 4px rgba(2, 18, 33, 0.8); pointer-events: none; user-select: none; } /* SVG skema rig tidak punya ukuran intrinsik dalam piksel; tingginya harus ditentukan supaya viewBox punya acuan. */ .pl-card-visual .pl-rig, .pl-story-frame .pl-rig, .pl-modal-visual .pl-rig { display: block; height: calc(100% - var(--pl-floor) - 8%); } .pl-card-note { position: absolute; top: 14px; right: 14px; } .pl-card-note .badge { display: inline-block; padding: 7px 13px; border-radius: 10px; /* Huruf putih di atas jingga merek #f08a24 hanya 2,51:1. Untuk LENCANA BERTEKS dipakai jingga yang diperdalam (#96500f = 4,53:1); jingga aslinya tetap untuk garis, ikon, dan aksen non-teks. */ background-color: #96500f; font-size: 0.68rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff; white-space: normal; } /* -------------------------------------------------------------------------- Deret alat di bawah gambar paket Sebelumnya isi paket hanya terbaca sebagai 3–4 baris teks di badan kartu; pembaca harus membaca dulu untuk tahu paket itu membawa mixer, monitor, dan mic atau tidak. Deret ikon ini menjawabnya dalam sekali lihat, dan sengaja ditempel langsung ke bawah gambar supaya terbaca sebagai keterangan gambar itu — bukan daftar kedua (DOCS/sgt_20260803.md). Isinya diturunkan dari baris `mspricelistd` paket itu sendiri (pl_gear()), jadi tidak bisa menjanjikan alat yang tidak ada di penawaran. RUANG DUA BARIS DIPESAN SEJAK AWAL (`min-height`). `grid-auto-rows: 1fr` memang membuat semua kartu sama tinggi dan `.pl-card-foot` menahan tombol di dasar kartu, tapi isi di ATAS strip ini tidak ikut terkunci: strip 1 baris di satu kartu dan 3 baris di kartu sebelahnya menggeser angka watt, judul, dan spesifikasinya — terukur pada tangkapan layar 1440px, dan itu keluhan "informasi paket posisinya tidak konsisten" yang baru dibereskan sesi 19f. Jumlah chip dibatasi 4 (PL_GEAR_MAX di core/pricelist.php) supaya isinya berhenti di dua baris; angka di sini yang menyediakan ruangnya. -------------------------------------------------------------------------- */ .pl-gear { /* 2 baris chip + 1 celah + padding atas-bawah + garis atas. Garis 1px itu ikut dihitung karena tema memasang `box-sizing: border-box`; tanpa ia, strip berisi dua baris tumbuh 1px lebih tinggi daripada yang berisi satu baris dan angka watt antar kartu bergeser semu 1px. */ --pl-chip-h: 26px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: calc(var(--pl-chip-h) * 2 + 6px + 24px + 1px); margin: 0; padding: 12px 16px; border-top: 1px solid var(--pl-line, #e3eaf2); background-color: #f4f8fc; list-style: none; } .pl-gear li { display: inline-flex; align-items: center; box-sizing: border-box; gap: 6px; /* `margin: 0` wajib: tema memberi margin bawah pada setiap `li`, dan di flex-wrap margin itu ikut menambah jarak antar BARIS chip — terukur tinggi strip 115px padahal hitungannya 82px, jadi ruang dua baris yang sudah dipesan tetap terlampaui dan kartunya bergeser lagi. */ margin: 0; min-height: var(--pl-chip-h); padding: 4px 10px; border: 1px solid #dbe6f1; border-radius: 999px; background-color: #ffffff; font-size: 0.7rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; color: #4a5c6e; white-space: nowrap; } .pl-gear li i { font-size: 0.74rem; color: var(--pl-blue, #109aec); } .pl-card-body { display: flex; flex: 1; flex-direction: column; padding: 24px 24px 22px; border-top: 1px solid var(--pl-line, #e3eaf2); } .pl-card-watt { display: flex; align-items: baseline; gap: 8px; } .pl-card-watt strong { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.025em; color: var(--pl-ink, #10202f); font-variant-numeric: tabular-nums; } .pl-card-watt span { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #5b6b7c; /* dari #8a99a8 (2,92:1) → 4,54:1 */ } .pl-meter { height: 6px; margin: 14px 0 18px; border-radius: 999px; background-color: #e9eff6; overflow: hidden; } /* Meter melebar begitu kartunya muncul — memberi kesan daya "terisi". */ .pl-meter > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #109aec, #f08a24); transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--mo-ease, ease) 0.15s; } .pl-card.is-in .pl-meter > span, .pl-modal-meter > span { transform: scaleX(1); } /* Judul, narasi, dan daftar spesifikasi dipatok tingginya. Sebelumnya tiap bagian hanya setinggi isinya, jadi nama paket yang panjang ("… 6.000 Watt Incl. Drum Set & Keyboard") membungkus ke dua baris dan MENGGESER narasi + spesifikasi + tombolnya ke bawah. Hasilnya kartu yang berjajar sebaris punya baris informasi di ketinggian berbeda-beda — inilah "informasi paket posisinya tidak konsisten" di DOCS/sgt_20260803.md. Tinggi dipatok = 2 baris judul, 3 baris narasi, 4 butir spesifikasi; itu jumlah maksimum yang benar-benar ada di data, dan line-clamp menahan kalau nanti ada yang lebih panjang. */ .pl-card-title { display: -webkit-box; min-height: calc(2 * 1.4em); margin: 0 0 10px; overflow: hidden; font-size: 1.06rem; font-weight: 700; line-height: 1.4; color: var(--pl-ink, #10202f); -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Dipotong tiga baris supaya tinggi kartu tetap rapi berjajar. */ .pl-card-desc { display: -webkit-box; min-height: calc(3 * 1.66em); margin: 0 0 16px; overflow: hidden; font-size: 0.9rem; line-height: 1.66; color: var(--pl-muted, #5b6b7c); -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .pl-spec { margin: 0 0 18px; padding: 0; list-style: none; } /* 4 butir × (1.6em teks + 9px jarak). Butir yang lebih panjang dari satu baris tetap boleh melebar; yang dijaga di sini adalah kartu yang butirnya SEDIKIT supaya tidak ikut naik. */ .pl-cards .pl-spec { min-height: calc(4 * (1.6 * 0.88rem + 9px)); } .pl-spec li { position: relative; margin: 0 0 9px; padding-left: 26px; font-size: 0.88rem; line-height: 1.6; color: #3c4d5e; } .pl-spec li::before { content: ""; position: absolute; top: 0.52em; left: 6px; width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(135deg, #109aec, #0d84cc); } .pl-spec-muted li { color: #6b7b8b; } .pl-spec-muted li::before { background: #b9c6d3; } .pl-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--pl-line, #e3eaf2); } .pl-tag { padding: 6px 12px; border: 1px solid rgba(16, 154, 236, 0.32); border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pl-blue-dark, #0d74b3); } .pl-card-cta { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; padding: 0; border: 0; background: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pl-blue-dark, #0d74b3); cursor: pointer; } .pl-card-cta em { padding: 2px 7px; border-radius: 6px; background-color: rgba(16, 154, 236, 0.12); font-size: 0.7rem; font-style: normal; } .pl-card-cta i { transition: transform 0.25s ease; } .pl-card-cta:hover i { transform: translateX(4px); } /* -------------------------------------------------------------------------- Yang selalu termasuk -------------------------------------------------------------------------- */ /* `minmax(0, …)` WAJIB, bukan `0.9fr 1.1fr` telanjang. Dengan `fr` biasa, batas bawah tiap kolom adalah lebar min-content isinya; begitu isinya lebih lebar daripada jatah `fr`-nya kolom itu ikut melebar dan seluruh grid meluber keluar container. Terukur sebelum perbaikan: pada viewport 1024px daftar `.pl-incl-list li` membentang 540..1062 — dokumen jadi 1062px, halaman bisa digulir ke samping. (Jebakan yang sama pernah kena di /gallery & /profile — lihat catatan grid blowout di progress.md.) */ .pl-incl-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; } .pl-incl-copy h2 { margin: 0 0 16px; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.16; letter-spacing: -0.018em; color: #ffffff; } .pl-incl-copy p { margin: 0 0 14px; font-size: 1rem; line-height: 1.74; color: rgba(255, 255, 255, 0.74); } .pl-hash { font-weight: 700; letter-spacing: 0.02em; color: var(--pl-amber, #f08a24); } .pl-incl-list { margin: 0; padding: 0; list-style: none; } .pl-incl-list li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.13); font-size: 0.98rem; line-height: 1.6; color: rgba(255, 255, 255, 0.92); } .pl-incl-list li:last-child { border-bottom: 0; } .pl-incl-list i { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background-color: rgba(16, 154, 236, 0.22); font-size: 0.7rem; color: #6cc4f7; } /* -------------------------------------------------------------------------- Add-on -------------------------------------------------------------------------- */ .pl-addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; } .pl-addon { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 24px; border: 1px solid var(--pl-line, #e3eaf2); border-radius: 16px; background-color: #ffffff; text-align: left; cursor: pointer; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .pl-addon:hover, .pl-addon:focus { border-color: rgba(16, 154, 236, 0.42); box-shadow: 0 14px 32px rgba(4, 44, 84, 0.1); } .pl-addon-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; /* Teks di dalam lencana ini 12px, jadi ambangnya 4,5:1. Latar biru tipis menurunkan rasio ke 4,05:1 — latarnya dibuat lebih pucat. */ background-color: rgba(16, 154, 236, 0.06); font-size: 1.1rem; color: var(--pl-blue-dark, #0d74b3); } .pl-addon-body { flex: 1; min-width: 0; } .pl-addon-body strong { display: block; margin-bottom: 4px; font-size: 1rem; font-weight: 700; color: var(--pl-ink, #10202f); } .pl-addon-body em { display: block; font-size: 0.85rem; font-style: normal; line-height: 1.55; color: var(--pl-muted, #5b6b7c); } .pl-addon > i { flex: 0 0 auto; color: var(--pl-blue-dark, #0d74b3); transition: transform 0.25s ease; } .pl-addon:hover > i { transform: translateX(4px); } /* -------------------------------------------------------------------------- Instalasi sound -------------------------------------------------------------------------- */ .pl-install { background-color: #ffffff; } .pl-install-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; } .pl-install-copy h2 { margin: 0 0 16px; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.16; letter-spacing: -0.018em; color: var(--pl-ink, #10202f); } .pl-install-copy p { margin: 0 0 28px; font-size: 1rem; line-height: 1.74; color: var(--pl-muted, #5b6b7c); } .pl-install-art { display: flex; align-items: center; justify-content: center; padding: 44px 34px; border-radius: 22px; background: linear-gradient(140deg, #f6f9fc 0%, #e7f2fb 100%); } /* Diperkecil DUA KALI atas permintaan user (DOCS/sgt_20260803.md lalu sgt_20260804.md): logonya cuma penanda "mixer digital", bukan gambar utama seksi ini. Aslinya melebar sampai 578px — elemen paling besar di halaman — lalu 292px, sekarang 190px sehingga sebanding dengan tinggi paragraf di sebelahnya, bukan menandinginya. */ .pl-install-art img { width: 100%; max-width: 190px; height: auto; } /* -------------------------------------------------------------------------- Ajakan penutup -------------------------------------------------------------------------- */ .pl-cta { background: linear-gradient(160deg, #042c54 0%, #021a33 100%); color: #ffffff; text-align: center; } .pl-cta h2 { max-width: 20em; margin: 0 auto 16px; font-size: clamp(1.7rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; color: #ffffff; } .pl-cta p { max-width: 40em; margin: 0 auto 32px; font-size: 1.02rem; line-height: 1.74; color: rgba(255, 255, 255, 0.76); } .pl-cta .pl-hero-actions { justify-content: center; } /* -------------------------------------------------------------------------- Modal spesifikasi -------------------------------------------------------------------------- */ .pl-modal .modal-content { border: 0; border-radius: 20px; overflow: hidden; } .pl-modal-head { align-items: flex-start; gap: 16px; padding: 26px 28px 20px; border-bottom: 1px solid #e3eaf2; background-color: #f6f9fc; } .pl-modal-head-text { flex: 1; min-width: 0; } .pl-modal-title { margin: 12px 0 0; font-size: 1.32rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.014em; color: #10202f; } /* display: block WAJIB. Tema memberi `.modal-body { display: flex; align-items: center }` (main.css), sehingga gambar, narasi, daftar spesifikasi, dan blok "termasuk di setiap paket" berjajar MENYAMPING sebagai flex item dan tergencet jadi kolom-kolom sempit — padahal jarak antarblok di bawah ini ditulis sebagai tumpukan vertikal (margin-bottom). */ .pl-modal-body { display: block; padding: 26px 28px; } /* Panggungnya (latar, lantai, bayangan) diatur bersama kartu — lihat blok "Panggung" di atas. Di sini hanya ukuran & sudut wadahnya. */ .pl-modal-visual { aspect-ratio: 16 / 10; margin: 0 0 22px; padding: 0; border-radius: 16px; } .pl-modal-desc { margin: 0 0 18px; font-size: 0.97rem; line-height: 1.74; color: #3c4d5e; } .pl-modal-meter { margin: 0 0 26px; } .pl-modal-block { margin-bottom: 26px; } .pl-modal-block:last-child { margin-bottom: 0; } .pl-modal-block h3 { margin: 0 0 12px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #5b6b7c; /* dari #8a99a8 (2,92:1) → 4,54:1 */ } .pl-modal-block p { margin: 0; font-size: 0.94rem; line-height: 1.7; color: #3c4d5e; } .pl-modal-foot { gap: 10px; padding: 18px 28px; border-top: 1px solid #e3eaf2; background-color: #f6f9fc; } .pl-modal-empty { margin: 0; padding: 24px 0; text-align: center; color: #5b6b7c; } /* -------------------------------------------------------------------------- Responsif -------------------------------------------------------------------------- */ @media (max-width: 991px) { .pl-hero { min-height: auto; padding: 160px 0 96px; } .pl-story-grid, .pl-incl-grid, .pl-install-grid { grid-template-columns: 1fr; gap: 34px; } .pl-section { padding: 78px 0; } .pl-stats li { padding: 0 22px; } } @media (max-width: 767px) { /* Sticky section dilepas di layar kecil: di ponsel panel yang menempel terasa seperti halaman macet. Frame-nya dijadikan daftar biasa — !important dipakai karena JS menulis opacity langsung ke atribut style. */ .pl-story-track { height: auto; } .pl-story-panel { position: static; height: auto; padding: 62px 0; overflow: visible; } .pl-story-captions { min-height: 0; } .pl-story-captions > *, .pl-story-stage > * { position: static !important; opacity: 1 !important; } .pl-story-captions > * + * { margin-top: 30px; } .pl-story-stage { display: grid; /* minmax(0, 1fr), bukan 1fr: ukuran asli foto (1456px) menjadi lebar minimum kolom kalau tidak dibatasi, dan barisnya meluber ~12px keluar layar di lebar sempit. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; aspect-ratio: auto; max-height: none; } /* Frame jadi kotak sendiri-sendiri karena stage-nya tak lagi bertinggi pasti. */ .pl-story-frame { aspect-ratio: 1 / 1; } .pl-story-meter { display: none; } .pl-eq { height: 62px; } .pl-stats li { flex: 1 0 40%; padding: 0; border-left: 0; } .pl-rail { top: 58px; } .pl-btn { padding: 13px 24px; } .pl-modal-head, .pl-modal-body, .pl-modal-foot { padding-left: 18px; padding-right: 18px; } } /* -------------------------------------------------------------------------- Band cara pembayaran (#pl-pay) Ditaruh sebagai band sendiri antara seksi instalasi dan ajakan penutup — bukan ditempel di bawah tombol CTA seperti percobaan pertama. Dua sebab percobaan itu gagal, keduanya terukur di tangkapan layar 1440px: seksi CTA rata TENGAH sementara daftarnya rata kiri (jadi menggantung di pojok kiri di bawah tombol yang terpusat), dan barisnya menarik perhatian dari satu-satunya ajakan bertindak di halaman. Nadanya sengaja TENANG: latar hampir putih, garis pemisah 1px, huruf kecil, warna redup. Ini keterangan yang menenangkan pembeli, bukan penawaran — kalau ia seramai kartu paket, halamannya justru terasa murah. -------------------------------------------------------------------------- */ .pl-paybar { padding: 56px 0 58px; border-top: 1px solid var(--pl-line, #e3eaf2); border-bottom: 1px solid var(--pl-line, #e3eaf2); background-color: #fbfdfe; text-align: center; } .pl-paybar-pre { display: block; margin-bottom: 22px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; line-height: 1.7; text-transform: uppercase; color: #5b6b7c; /* dari #8a99a8 (2,92:1) → 4,54:1 */ } .pl-paybar-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; margin: 0 auto; padding: 0; list-style: none; } /* Pemisah dibuat dari border-left, BUKAN elemen sendiri, supaya baris pertama dan terakhir tidak perlu perlakuan khusus saat membungkus di layar sempit. */ .pl-paybar-list li { display: inline-flex; align-items: center; gap: 11px; margin: 6px 0; padding: 4px 30px; border-left: 1px solid var(--pl-line, #e3eaf2); font-size: 0.94rem; font-weight: 600; letter-spacing: 0.01em; color: var(--pl-ink, #10202f); } .pl-paybar-list li:first-child { border-left: 0; } .pl-paybar-list li i { font-size: 1.14rem; color: var(--pl-blue, #109aec); } .pl-paybar-note { max-width: 44em; margin: 20px auto 0; font-size: 0.84rem; line-height: 1.7; color: var(--pl-muted, #5b6b7c); } /* Di ponsel ketiganya bertumpuk, jadi pemisah tegak tidak lagi masuk akal — diganti garis mendatar antar baris. */ @media (max-width: 575px) { .pl-paybar { padding: 42px 0 44px; } .pl-paybar-list { display: block; } .pl-paybar-list li { display: flex; justify-content: center; margin: 0; padding: 12px 0; border-left: 0; border-top: 1px solid var(--pl-line, #e3eaf2); font-size: 0.9rem; } .pl-paybar-list li:first-child { border-top: 0; } } /* -------------------------------------------------------------------------- Jalan keluar dari daftar paket (#pl-path) — DOCS/new.md §21 Bilah tipis, bukan kartu besar. Tugasnya menyediakan pintu bagi pengunjung yang kebutuhannya di luar paket sewa acara, TANPA bersaing dengan daftar paketnya sendiri — halaman ini tetap halaman sewa sound. -------------------------------------------------------------------------- */ .pl-path { padding: 46px 0 0; } .pl-path-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 26px 30px; border: 1px solid var(--pl-line); border-left: 3px solid var(--pl-amber); border-radius: 12px; background-color: #f6f9fc; } /* `min-width: 0` mencegah paragraf memakai kata terpanjang sebagai lebar minimum lalu mendorong tombolnya keluar bilah di layar sempit. */ .pl-path-copy { flex: 1 1 460px; min-width: 0; } .pl-path-copy strong { display: block; margin-bottom: 8px; font-family: var(--h1-font); font-size: 1.06rem; font-weight: 700; line-height: 1.4; color: var(--pl-ink); } .pl-path-copy p { margin: 0; font-size: 0.94rem; line-height: 1.72; color: var(--pl-muted); } .pl-path-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; padding: 0; list-style: none; } .pl-path-links a, .pl-path-links a:link, .pl-path-links a:visited { font-size: 0.9rem; font-weight: 600; color: var(--pl-blue-text); border-bottom: 1px solid transparent; } .pl-path-links a:hover, .pl-path-links a:focus { color: var(--pl-ink); border-bottom-color: var(--pl-ink); } @media (max-width: 767px) { .pl-path { padding-top: 32px; } .pl-path-box { padding: 22px 20px; } }