/* ============================================================ AZADEL — Header (terang) & Footer (gelap) Bergantung pada ate-tokens.css. Kelas .ate-scope juga dipakai di sini supaya kelas komponen (.az-btn dll.) berfungsi walaupun ate-components.css tidak dimuat. ============================================================ */ .ate-hd, .ate-hd *, .ate-ft, .ate-ft * { box-sizing: border-box; } .ate-hd [hidden], .ate-ft [hidden] { display: none !important; } /* ---------- Header ---------- */ /* ⚠️ TIDAK melekat. Keputusan Wan, 23 Ogos 2026: header menatal keluar bersama halaman di SELURUH tapak, bukan hanya halaman dashboard. Sebabnya ruang skrin — header melekat memakan tinggi berterusan, dan itu paling terasa pada skrin kecil. Jangan kembalikan `position: sticky` tanpa Wan minta. */ .ate-hd { position: relative; z-index: 500; /* PEKAT, bukan rgba(255,255,255,.92). Latar tapak masih gelap semasa peralihan, jadi header separa telus terbaca sebagai kelabu, bukan putih. Tukar kembali ke telus + blur hanya selepas seluruh tapak jadi terang. */ background: var(--surface); border-bottom: 1px solid var(--border); font-family: var(--font-body); color: var(--fg-1); } /* Bar admin menambah margin-top pada , meninggalkan jurang yang menunjukkan latar gelap tema. Cat jurang itu melalui bayang, BUKAN dengan menukar latar — menukar latar global boleh menjadikan teks putih pada halaman gelap lama tidak terbaca. Terkurung pada .admin-bar, jadi pelawat biasa tidak terkesan langsung. */ html.ate-has-header body.admin-bar .ate-hd { box-shadow: 0 -60px 0 0 var(--surface); } .ate-hd__top { display: grid; grid-template-columns: 150px 1fr auto; gap: 24px; align-items: center; max-width: var(--ate-container); margin: 0 auto; padding: 12px 24px; } .ate-hd__logo { display: inline-flex; align-items: center; text-decoration: none; } .ate-hd__logo-img { max-height: 34px; width: auto; display: block; } .ate-hd__wordmark { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 23px; color: var(--azadel-blue); letter-spacing: -.03em; line-height: 1; } .ate-hd__wordmark span { color: var(--azadel-gold); } .ate-hd__search { /* v3.1.4: `
` bawa margin-bottom lalai daripada UA stylesheet/tema (cth ~1em) yang tak pernah di-reset di sini — dalam grid .ate-hd__top, margin itu masuk kira tinggi item grid, jadi kotak carian ternampak tersorong ke atas berbanding logo (yang tiada margin). Wan laporkan "tak sama baris kedudukan", 31 Ogos 2026. */ margin: 0; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1.5px solid var(--azadel-blue); border-radius: 12px; background: #fff; color: var(--fg-3); } .ate-hd__search:focus-within { box-shadow: 0 0 0 4px rgba(0,149,211,.15); } /* Tema memberi setiap bingkai dan tinggi tetapnya sendiri, jadi kotak carian keluar dengan DUA bingkai bersarang. Reset ini perlu !important kerana peraturan tema lebih khusus. Disahkan pada staging: input mewarisi border 1px #e1e1e1 daripada tema. */ .ate-hd .ate-hd__search input[type="search"] { -webkit-appearance: none !important; appearance: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; height: auto !important; min-height: 0 !important; line-height: 1.4 !important; margin: 0 !important; padding: 2px 0 !important; flex: 1; font-family: var(--font-body); font-size: 14px; color: var(--fg-1); } .ate-hd .ate-hd__search input[type="search"]:focus { border: 0 !important; box-shadow: none !important; } .ate-hd .ate-hd__search input[type="search"]::-webkit-search-decoration, .ate-hd .ate-hd__search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* Bingkai tunggal milik borang, bukan input. */ .ate-hd .ate-hd__search { border: 1.5px solid var(--azadel-blue) !important; } .ate-hd__nav { display: flex; gap: 6px; align-items: center; justify-content: flex-end; } .ate-hd__ic { position: relative; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--fg-2); transition: background var(--dur-fast), color var(--dur-fast); text-decoration: none; } .ate-hd__ic:hover { background: var(--azadel-blue-50); color: var(--azadel-blue); } .ate-hd__count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--azadel-gold); color: var(--azadel-ink); border-radius: var(--radius-pill); font-size: 10px; font-weight: var(--fw-extrabold); display: grid; place-items: center; font-family: var(--font-display); line-height: 1; } .ate-hd__sep { width: 1px; height: 24px; background: var(--border); margin: 0 6px; } .ate-hd__burger { display: none; width: 38px; height: 38px; border-radius: 11px; place-items: center; color: var(--fg-2); border: 1px solid var(--border); background: #fff; cursor: pointer; padding: 0; } .ate-hd__me { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .ate-hd__avatar { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--azadel-blue); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 13px; } .ate-hd__mename { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 13px; color: var(--fg-2); } .ate-hd__sub { background: var(--azadel-blue-50); border-bottom: 1px solid var(--border); } .ate-hd__sub-inner { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; max-width: var(--ate-container); margin: 0 auto; padding: 10px 24px; font-size: 13px; color: var(--fg-2); } .ate-hd__sub-inner a { color: var(--fg-2); text-decoration: none; transition: color var(--dur-fast); } .ate-hd__sub-inner a:hover { color: var(--azadel-blue-700); } .ate-hd__sub-spacer { flex: 1; } .ate-hd__drawer { display: none; border-top: 1px solid var(--border); background: #fff; padding: 8px 24px 14px; } .ate-hd__drawer a { display: block; padding: 11px 0; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 15px; color: var(--fg-1); border-bottom: 1px solid var(--border); text-decoration: none; } .ate-hd__drawer a:last-child { border-bottom: 0; } .ate-hd.is-open .ate-hd__drawer { display: block; } /* ============================================================ TUAN RUMAH BUKAN BLOK ------------------------------------------------------------ Templat kosong tema menetapkan #top{display:table}. Anak-anaknya menjadi sel jadual: header mengecut ke lebar 0, dan setiap anak tambahan menjadi LAJUR baharu yang melebarkan jadual. ⚠️ SEJARAH — jangan ulang. v3.0.3 cuba display:table-caption. Header nampak betul, tetapi caption menyertai pengiraan lebar jadual: #wrap_all mengecut dari 1905px ke 953px dan pembalut AMA tersasar ke amaLeft -484px. Halaman akaun dan vendor hub jadi lebih rosak daripada sebelumnya. ⚠️ Sebab ia mudah pecah: AMA dan AVH guna corak full-bleed (width:100vw; margin-left:-50vw; left:50%). Corak itu mengandaikan bapanya berada di tengah viewport. Apa sahaja yang mengubah lebar atau bilangan sel jadual akan menyasarkan pengiraan itu. PENYELESAIAN: keluarkan chrome ATE dari aliran jadual sepenuhnya. header → position:absolute (tidak menyumbang sel, tidak mengubah lebar) footer → tidak dipapar (sebagai sel ia menambah lajur; diuji: overflow 497px) Diukur pada staging selepas pembetulan: amaLeft -7px (nilai asal AMA), overflow 8px (milik AMA sendiri, wujud tanpa ATE juga). ⚠️ absolute, BUKAN fixed. v3.0.4 guna fixed; header kekal di skrin sepanjang masa dan memakan ruang menegak yang berharga pada skrin kecil — halaman dashboard perlukan setiap piksel. absolute memberi hasil yang sama untuk layout (keluar dari aliran, tiada kesan pada lebar jadual) tetapi header menatal keluar bersama halaman. ⚠️ JANGAN tambah offset bar admin di sini. Blok mengandung untuk elemen absolute sudah bermula di bawah `html{margin-top:32px}` yang ditambah oleh bar admin, jadi `top:0` sudah betul. Diukur: hdTop = 32px pada scrollY 0. Menambah `top:32px` akan menolaknya turun 64px. ============================================================ */ html.ate-host-table .ate-hd, body.avia-blank > .ate-hd { display: block !important; position: absolute !important; top: 0 !important; left: 0; right: 0; width: auto !important; z-index: 500; } /* Ruang untuk header yang keluar dari aliran. --ate-hd-h ditetapkan oleh ate-chrome.js daripada tinggi sebenar; nilai lalai ini hanya sandaran. */ html.ate-host-table body, body.avia-blank { padding-top: var(--ate-hd-h, 129px) !important; } /* Footer tidak dipapar di sini — sebagai sel jadual ia menambah lajur dan memecahkan lebar. Untuk memaksanya keluar, tambah CSS anda sendiri. */ html.ate-host-table .ate-ft, body.avia-blank > .ate-ft { display: none !important; } /* Tuan rumah flex atau grid — header sebagai item akan mengecut juga. */ html.ate-host-flex .ate-hd, html.ate-host-flex .ate-ft, html.ate-host-grid .ate-hd, html.ate-host-grid .ate-ft { flex: 0 0 auto !important; width: 100% !important; grid-column: 1 / -1; } /* ---------- Footer ---------- */ .ate-ft { background: var(--azadel-ink); color: rgba(255,255,255,.78); font-family: var(--font-body); } .ate-ft .ate-container { max-width: var(--ate-container); margin: 0 auto; padding: 0 24px; } .ate-ft__inner { padding: 48px 0 32px; display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; } .ate-ft__brand .ate-hd__wordmark { color: #fff; } .ate-ft__brand .ate-hd__wordmark span { color: var(--azadel-gold); } /* v3.0.8: footer guna fail logo SAMA seperti header (self::logo_html()), tapi footer berlatar gelap — paksa logo jadi putih dengan filter, supaya tak perlu urus fail logo berasingan. */ .ate-ft__brand .ate-ft__logo img { filter: brightness(0) invert(1); } .ate-ft__brand p { font-size: 13px; line-height: 1.6; margin: 12px 0 0; max-width: 340px; color: rgba(255,255,255,.66); } .ate-ft__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .ate-ft__cols h4 { font-family: var(--font-display); color: #fff; font-size: 13px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; } .ate-ft__cols a { display: block; font-size: 13px; padding: 4px 0; color: rgba(255,255,255,.7); text-decoration: none; transition: color var(--dur-fast); } .ate-ft__cols a:hover { color: var(--azadel-gold); } .ate-ft__legal { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0 28px; color: rgba(255,255,255,.5); font-size: 12px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ---------- Responsif — 959px mobile / 960px desktop ---------- */ @media (max-width: 1100px) { .ate-hd__top { grid-template-columns: 130px 1fr auto; gap: 16px; } } @media (max-width: 959px) { /* Grid bertukar ke flex: dengan kotak carian disembunyikan, lajur 1fr memaksa nav melimpah keluar skrin. Flex membiarkannya mengecut. */ .ate-hd__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; } .ate-hd__logo { flex: 0 0 auto; } .ate-hd__wordmark { font-size: 20px; } .ate-hd__nav { flex: 0 1 auto; min-width: 0; } .ate-hd__search { display: none; } .ate-hd__burger { display: grid; } /* .ate-hd__login juga membawa .az-btn (kekhususan 0,2,0) — jadi peraturan sembunyi ini mesti lebih khusus daripada itu, bukan kelas tunggal. */ .ate-hd .ate-hd__ic--sec, .ate-hd .ate-hd__login, .ate-hd .ate-hd__sep, .ate-hd .ate-hd__mename { display: none !important; } .ate-hd__nav { gap: 4px; } .ate-hd__sub-inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 18px; padding: 10px 16px; } .ate-hd__sub-inner a { white-space: nowrap; } .ate-hd__sub-spacer { display: none; } .ate-ft__inner { grid-template-columns: 1fr; gap: 32px; } .ate-ft__cols { grid-template-columns: repeat(2, 1fr); } }