/* ========================================================================== Tour Travel 1 -- kerangka: gaya header yang berlaku di SETIAP halaman ========================================================================== ## Kenapa berkas ini ada `templates/tourtravel1/base.html` meng-include `partials/header.html` di setiap halaman, jadi markup headernya sama di mana-mana. Gayanya tidak. Sebagian aturan yang membuat header itu utuh hanya ada di `ara-home-carousel.css`, dan berkas itu dimuat `pages/home.html` lewat `page_css` -- beranda saja. Akibatnya, diukur 15 Sep 2026: di setiap halaman selain beranda, kotak pencarian di header (`.tp-header-main-search`) terbit tanpa satu pun aturan gaya, dan keadaan menempel (`#header-sticky.header-sticky`) jatuh ke aturan umum `main.css` yang warnanya berbeda dari beranda. Markup benar, tampilan tidak sama dengan beranda. Berkas ini memuat potongan yang harus ikut ke SEMUA halaman. Yang khas beranda TIDAK ada di sini dan tetap tinggal di `ara-home-carousel.css`: header yang melayang di atas hero (`position: absolute`), latar transparan saat belum menempel, dan logo terang. Karena `page_css` dimuat SESUDAH berkas ini, beranda tetap menimpa apa pun yang perlu ditimpanya. Berkas Turie asli sengaja tidak disunting: 548 asetnya diverifikasi md5-identik dengan sumbernya (ARA-116), dan menyalin aturan ke berkas baru menjaga sifat itu. Duplikasi yang timbul aman -- aturannya identik, dan yang dimuat belakangan yang menang. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Kotak header -------------------------------------------------------------------------- */ /* Naikkan kotak header di atas isi halaman. Di beranda, `ara-home-carousel.css` menambahkan `position: absolute` pada `.tp-header-height` supaya ia melayang di atas hero; di halaman lain header duduk di aliran halaman seperti biasa. */ .tp-header-height .tp-header-area { position: relative; z-index: 100; } /* Halaman tanpa hero gelap butuh latar padatnya sendiri. Tanpa ini header tidak punya latar sama sekali: judul halaman yang panjang akan terbaca menembus menu saat digulir, dan garis pemisah header/isi hilang. Beranda menimpanya jadi transparan lewat `ara-home-carousel.css`. */ #header-sticky:not(.header-sticky) { border-bottom: 1px solid var(--tp-border-1); /* background: var(--tp-common-yellow); */ padding: 8px 0; } header.tp-header-height { position: absolute; z-index: 100; top: 0; right: 0; left: 0; width: 100%; } /* -------------------------------------------------------------------------- 2. Keadaan menempel -- disamakan dengan beranda -------------------------------------------------------------------------- `main.css` sudah membuat `.header-sticky` menempel (`position: fixed`) dengan latar putih 90% dan bayangan tipis. Beranda menimpanya dengan warna, blur, dan garis tema. Salinan di bawah membawa tampilan beranda itu ke semua halaman, supaya header yang menempel tidak berganti rupa saat pengunjung berpindah halaman. */ #header-sticky.header-sticky { border-bottom: 1px solid var(--tp-border-1); background: rgba(247, 242, 242, 0.94); box-shadow: 0 10px 30px rgba(7, 21, 22, 0.09); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* Logo gelap saat menempel. Bawaan halaman non-beranda sudah logo gelap (`tourtravel1-compat.css`); aturan ini menjaga beranda tetap bertukar ke logo gelap begitu headernya jadi padat. */ #header-sticky.header-sticky .tp-header-logo-light { display: none; } #header-sticky.header-sticky .tp-header-logo-dark { display: block; } /* Tombol menu ponsel mengikuti header yang sudah padat. */ #header-sticky.header-sticky .tp-header-toogle { border-color: var(--tp-border-1); background: transparent; } #header-sticky.header-sticky .tp-header-toogle span { background: var(--tp-common-black); } /* -------------------------------------------------------------------------- 3. Kotak pencarian di header -------------------------------------------------------------------------- `partials/header.html` merender kotak ini tanpa syarat, jadi ia ada di header setiap halaman -- termasuk ponsel, tempat ia melebar mengisi sisa baris. Seluruh blok di bawah disalin apa adanya dari `ara-home-carousel.css`. */ .tp-header-main-search { flex: 1 1 auto; min-width: 0; } .tp-header-main-search .tp-input { width: 100% !important; height: 38px !important; padding-right: 9px; padding-left: 34px; font-size: 11px; } .tp-header-main-search .tp-header-search-btn { left: 13px; } .tp-header-main-search .tp-header-typing-wrap { left: 35px; display: flex; align-items: center; max-width: calc(100% - 43px); white-space: nowrap; overflow: hidden; pointer-events: none; } .tp-header-main-search .tp-header-typing-wrap::before { margin-right: 3px; color: var(--tp-grey-2); content: "Search"; font-family: var(--tp-ff-body); font-size: 11px; } .tp-header-main-search .tp-header-typing-wrap span { font-size: 11px; } .tp-header-main-search .tp-input::placeholder { color: transparent; } @media (min-width: 1200px) { .tp-header-main-search { flex: 0 0 auto; } .tp-header-main-search .tp-input { width: 240px !important; padding-left: 44px; font-size: 13px; } .tp-header-main-search .tp-header-search-btn { left: 20px; } .tp-header-main-search .tp-header-typing-wrap { left: 115px; display: block; max-width: calc(100% - 125px); } .tp-header-main-search .tp-header-typing-wrap::before { content: none; } .tp-header-main-search .tp-header-typing-wrap span { font-size: 13px; } .tp-header-main-search .tp-input::placeholder { color: var(--tp-grey-2); } /* Warna menu desktop saat header menempel -- ikut beranda. */ #header-sticky.header-sticky .tp-main-menu nav > ul > li > a { color: var(--tp-common-black); } #header-sticky.header-sticky .tp-menu-dropdown nav ul li.active > a, #header-sticky.header-sticky .tp-menu-dropdown nav ul li.active > a::after, #header-sticky.header-sticky .tp-main-menu nav > ul > li:hover > a, #header-sticky.header-sticky .tp-menu-dropdown nav > ul > li:hover.has-dropdown > a::after { color: var(--tp-theme-1); } #header-sticky.header-sticky .tp-menu-dropdown nav ul li.active > a { background: transparent; } #header-sticky.header-sticky .tp-header-login-btn { color: var(--tp-common-black); } } @media (min-width: 1400px) { .tp-header-main-search .tp-input { width: 305px !important; } } /* ---------------------------------------------------------------------------- 3. Tombol "Edit Hero" digeser keluar dari kotak header ---------------------------------------------------------------------------- Header beranda tema ini MELAYANG di atas hero (`position: absolute`, `z-index: 100` di `ara-home-carousel.css`). Tombol edit milik seksi hero duduk di `top: 10%` dari hero -- dan itu selalu di dalam kotak header. Diukur 16 Sep 2026 di HTML yang benar-benar dilayani arastg, lewat `document.elementFromPoint()` di titik tengah tombol: header 139px, tombol di y 76-115, dan yang menerima klik adalah headernya -- di KEENAM BELAS lebar layar yang diuji, dari 1920px sampai 360px. Tombolnya terlihat (header itu transparan di atas hero) tapi tidak bisa diklik sama sekali. Menaikkan `z-index` tidak menolong, dan itu juga diukur, bukan disimpulkan: dinaikkan ke 2147483647 pun yang menerima klik tetap header, karena `.homepage-v2-editable-section` punya `isolation: isolate` yang mengurung z-index anaknya di lapisan seksinya sendiri. Karena itu tombolnya dipindah ke BAWAH hero, bukan digeser turun sekian piksel: jarak dari atas bergantung tinggi header, dan tinggi header berubah kalau pemilik situs mengganti logo atau menambah butir menu. Diukur dari bawah, ia tidak bergantung pada apa pun di header. 128px dipilih supaya lewat di atas tombol panah carousel (`bottom: 48px`, menjadi 68px di layar sempit, tinggi 36-40px) dan titik-titik pagination (`bottom: 35px`). Yang di bawahnya tidak tersentuh. -------------------------------------------------------------------------- */ .tp-hero-7-carousel.homepage-v2-editable-section { --frontend-editor-button-top: auto; --frontend-editor-button-bottom: 128px; } /* ---------------------------------------------------------------------------- 4. Menu header muat satu baris ---------------------------------------------------------------------------- Diukur 16 Sep 2026 di HTML yang dilayani arastg, lebar 1440px: sembilan butir menu memakan 560px teks + delapan jarak 35px = 840px, sedangkan ruang yang tersedia cuma 590px. Kurang 250px, jadi menunya pecah dua baris dan header membengkak jadi 139px. Itu bukan cuma jelek: header setinggi itu pula yang menimpa tombol "Edit Hero" (bagian 3 di atas). Perhatikan angkanya: kurangnya 250px TIDAK bisa ditutup hanya dengan mengecilkan jarak antar butir -- delapan jarak dikecilkan sampai nol pun cuma mengembalikan 280px dengan butir saling menempel. Jadi tiga hal digeser sekaligus, dan yang paling besar hasilnya justru pembagian kolomnya: - kolom kiri 58,33% -> 63% (dan kanan 41,67% -> 37%). Ini diubah lewat CSS, bukan dengan mengganti kelas `col-xl-7`/`col-xl-5` di HTML, supaya markup tetap sama persis dengan sumber temanya. - jarak antar butir 35px -> 18px, dan margin kanan logo 60px -> 24px. - kotak pencarian dibatasi lebarnya; di bawah 1400px hurufnya ikut mengecil. Lebar bawah 1200px tidak disentuh: di situ temanya sudah berpindah ke tombol menu (hamburger), jadi tidak ada yang pecah. Jarak antar butir dibatasi ke turunan LANGSUNG `nav > ul > li`; aturan bawaan `.tp-main-menu nav ul li` juga mengenai butir submenu, dan submenu-nya menumpuk ke bawah sehingga tidak butuh jarak mendatar. -------------------------------------------------------------------------- */ @media (min-width: 1200px) { .tp-header-5 .col-xl-7 { flex: 0 0 auto; width: 63%; } .tp-header-5 .col-xl-5 { flex: 0 0 auto; width: 37%; } /* Butir menu aslinya `inline-block`, jadi baris baru di dalam HTML ikut dihitung sebagai spasi: terukur ~3,5px per celah, delapan celah = ~28px yang tidak kelihatan di CSS mana pun. Gara-gara 28px itu butir terakhir ("Contact") jatuh ke baris kedua walau hitungan lebar bilang muat. Flex membuang spasi itu; submenu tidak terpengaruh karena ia anak
  • , bukan anak