/* Bahagian tab "Bagaimana Kami Boleh Membantu Anda?" — [ikpkt_tab_bantuan] Merah #cf2e2e diambil dari warna tema sedia ada (lihat kursus-senarai.css). */ .ikpkt-tab-bantuan { position: relative; z-index: 0; background: #fdfcfb; /* Jalur penuh lebar skrin — tiada bucu bulat. */ border-radius: 0; /* Mengelip bentuk hiasan pada bucu bulat panel. */ overflow: hidden; /* Ruang bawah dalaman ditambah (48px → 64px): kini tepi bawah panel ialah sempadan terus dengan bahagian seterusnya, jadi kandungan perlu sedikit ruang lega di dalam krim itu sendiri. */ padding: 40px 28px 64px; } /* --------------------------------------------------------------------- Rapatkan panel ke slaid di atasnya. Blok pembalut dalam templat FSE mempunyai padding-top preset x-large (≈72px), yang meninggalkan jalur putih antara slaid dengan panel ini. Kaedah UTAMA: buang terus padding-top blok itu. !important diperlukan kerana padding itu ialah gaya inline pada blok (gaya inline hanya boleh diatasi oleh !important dari helaian gaya). Templat FSE sengaja TIDAK disunting — lihat insiden slug Seksyen 3.2 dalam laporan: setiap suntingan pos wp_template berisiko mencetuskan wp_unique_post_slug() dan memutuskan resolusi templat laman EN. --------------------------------------------------------------------- */ .wp-block-group:has(> .ikpkt-tab-bantuan) { padding-top: 0 !important; padding-bottom: 0 !important; /* Jalur putih ~18px di kiri & kanan berpunca dari peraturan theme.json: :root :where(.wp-block-group) { padding-right: var(--wp--preset--spacing--x-small); padding-left: var(--wp--preset--spacing--x-small); } x-small = saiz fon medium = clamp(16px, ..., 18px). Keutamaan peraturan itu (0,1,0) kerana :where() tidak menyumbang apa-apa; pemilih kita (0,2,0) sudah cukup, tetapi !important dikekalkan selaras dengan padding atas/bawah di atas. */ padding-left: 0 !important; padding-right: 0 !important; /* Jalur krim dijadikan penuh lebar halaman (membuang jalur putih di kiri & kanan). Pembalut ini ialah anak LANGSUNG .wp-site-blocks, yang tiada had lebar — jadi membuang sebarang had pada pembalut sudah memadai. Sengaja TIDAK menggunakan 100vw: unit itu termasuk lebar bar skrol, jadi ia mencetuskan skrol mengufuk dan memerlukan penyelesaian `overflow-x` global pada yang akan menjejaskan SETIAP halaman laman ini. Kaedah ini tiada kesan sampingan global. */ max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* --------------------------------------------------------------------- Membuang had lebar pada PANEL itu sendiri. Pembalut membawa kelas is-layout-constrained. Tema menetapkan: .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); [= 764px] margin-left: auto !important; margin-right: auto !important; } Jadi walaupun pembalut sudah penuh lebar, ANAKNYA (panel krim ini) dikekang pada 764px — punca sebenar jalur putih di kiri & kanan. Pemilih .wp-block-group > ... (0,2,0) digunakan, bukan .ikpkt-tab-bantuan sahaja (0,1,0): peraturan tema di atas juga (0,1,0), jadi seri keutamaan dan hasilnya bergantung pada susunan muatan helaian gaya — terlalu rapuh. !important diperlukan untuk margin kerana tema menggunakannya. --------------------------------------------------------------------- */ .wp-block-group > .ikpkt-tab-bantuan { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* Bahagian di BAWAH panel ("Cetusan Minda") juga mempunyai padding-top preset x-large tersendiri. Tanpa ini, separuh jalur putih masih kekal. Disahkan bahagian itu ialah adik-beradik serta-merta pembalut panel. AMBIL PERHATIAN: ini satu-satunya peraturan yang menyentuh bahagian di luar ciri tab ini. Jika susunan blok laman utama diubah kelak, semak semula peraturan ini — ia akan mengenai apa sahaja blok yang berada tepat selepas panel. */ .wp-block-group:has(> .ikpkt-tab-bantuan) + .wp-block-group { padding-top: 0 !important; } /* Sandaran untuk pelayar lama tanpa :has(). Margin negatif menandingi padding pembalut sebagai ganti. Dibungkus @supports supaya ia TIDAK digunakan serentak dengan peraturan di atas — jika kedua-duanya terpakai, panel akan bertindih ≈72px ke atas slaid dan ke bawah. Pemilih .wp-block-group > ... (0,2,0) digunakan, bukan .ikpkt-tab-bantuan sahaja (0,1,0): tema menetapkan margin-block-start:0 pada SEMUA anak blok layout-constrained dengan keutamaan (0,1,0) yang sama, jadi bergantung pada susunan sumber semata-mata terlalu rapuh. */ @supports not selector(:has(*)) { .wp-block-group > .ikpkt-tab-bantuan { margin-block-start: calc(-1 * var(--wp--preset--spacing--x-large)); margin-block-end: calc(-1 * var(--wp--preset--spacing--x-large)); } } /* --------------------------------------------------------------------- Hiasan latar geometri: bulatan & segi empat bucu bulat, disusun di pinggir panel supaya bahagian tengah kekal lapang untuk kandungan. z-index -1 meletakkannya di atas latar krim tetapi di bawah kandungan. --------------------------------------------------------------------- */ .ikpkt-tab-bantuan__hiasan { position: absolute; inset: 0; color: #cf2e2e; /* >>> KEPEKATAN HIASAN LATAR — laras nilai ini sahaja. <<< 0.06 = sangat samar · 0.10 = lembut · 0.14 = semasa 0.20 = ketara · melebihi 0.25 mula mengganggu kejelasan teks. Dua bentuk pejal (:nth-child(4) dan (7)) ada opacity sendiri yang DIDARAB dengan nilai ini, jadi ia turut berubah secara berkadar. */ opacity: 0.14; z-index: -1; pointer-events: none; overflow: hidden; } .ikpkt-tab-bantuan__hiasan span { position: absolute; display: block; border: 1.5px solid currentColor; } /* 1 + 2: dua bulatan sepusat di bucu kiri atas (pusat sama: 60px, 40px). */ .ikpkt-tab-bantuan__hiasan span:nth-child(1) { width: 380px; height: 380px; left: -130px; top: -150px; border-radius: 50%; } .ikpkt-tab-bantuan__hiasan span:nth-child(2) { width: 250px; height: 250px; left: -65px; top: -85px; border-radius: 50%; } /* 3: bulatan kiri bawah, separuh terkeluar dari panel. */ .ikpkt-tab-bantuan__hiasan span:nth-child(3) { width: 240px; height: 240px; left: 90px; bottom: -110px; border-radius: 50%; } /* 4: titik pejal kecil — aksen, memberi kedalaman pada komposisi. */ .ikpkt-tab-bantuan__hiasan span:nth-child(4) { width: 60px; height: 60px; left: 300px; top: 96px; border: 0; border-radius: 50%; background: currentColor; opacity: 0.4; } /* 5: segi empat bucu bulat besar, kanan atas. */ .ikpkt-tab-bantuan__hiasan span:nth-child(5) { width: 430px; height: 300px; right: -110px; top: -70px; border-radius: 28px; } /* 6: segi empat bucu bulat, kanan bawah. */ .ikpkt-tab-bantuan__hiasan span:nth-child(6) { width: 300px; height: 210px; right: 60px; bottom: -90px; border-radius: 22px; } /* 7: petak pejal kecil — aksen kedua, mengimbangi titik di sebelah kiri. */ .ikpkt-tab-bantuan__hiasan span:nth-child(7) { width: 72px; height: 72px; right: 210px; top: 140px; border: 0; border-radius: 16px; background: currentColor; opacity: 0.35; } /* 8: jalur panjang di bawah-tengah, kebanyakannya di bawah baris ikon. */ .ikpkt-tab-bantuan__hiasan span:nth-child(8) { width: 400px; height: 150px; left: 34%; bottom: -70px; border-radius: 26px; } /* Latar krim penuh lebar skrin, tetapi KANDUNGAN dikekang supaya teks dan kad tidak merentang terlalu lebar pada monitor besar — corak lazim "latar penuh, kandungan berpusat". */ .ikpkt-tab-bantuan__tajuk, .ikpkt-tab-bantuan__bar, .ikpkt-tab-bantuan__panel-wrap { max-width: 1360px; margin-inline: auto; } .ikpkt-tab-bantuan__tajuk { text-align: center; margin: 0 auto 30px; padding-bottom: 16px; position: relative; } .ikpkt-tab-bantuan__tajuk::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 72px; height: 3px; border-radius: 2px; /* Kecerunan yang sama seperti jalur atas kad — satu bahasa reka bentuk merentas seluruh bahagian ini. */ background: linear-gradient(90deg, #cf2e2e 0%, #e0623a 55%, #eda24a 100%); } /* --------------------------------------------------------------------- Bar tab = kawalan bersegmen (segmented control). Keempat-empat tab dibungkus dalam satu pil berlatar lembut; tab aktif menjadi pil putih timbul di dalamnya. Menggantikan reka bentuk lama (garis bawah merah) yang tiada pembungkus. width: max-content + margin-inline: auto — pil mengecut mengikut kandungannya dan berpusat, bukan merentang 1360px penuh. --------------------------------------------------------------------- */ .ikpkt-tab-bantuan__bar { display: flex; flex-wrap: nowrap; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 36px; padding: 5px; background: #f4f1ef; border: 1px solid #ece6e2; border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.035); /* Pada skrin sempit pil menatal mendatar dan bukannya pecah kepada dua baris (yang merosakkan bentuk pil). Bar penatal disembunyikan — corak lazim bagi kawalan bersegmen; tab tetap boleh dicapai dengan leretan dan dengan anak panah papan kekunci. */ overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .ikpkt-tab-bantuan__bar::-webkit-scrollbar { display: none; } .ikpkt-tab-bantuan__tab { appearance: none; background: transparent; border: 0; border-radius: 999px; padding: 11px 24px; font-size: 0.95rem; font-weight: 600; /* #5b6b7f pada #f4f1ef = 4.8:1 — lulus WCAG AA. */ color: #5b6b7f; cursor: pointer; white-space: nowrap; transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .ikpkt-tab-bantuan__tab:hover { color: #cf2e2e; background: rgba(255, 255, 255, 0.7); } /* Tab aktif: pil putih timbul. #cf2e2e pada putih = 5.1:1 (WCAG AA). Sengaja putih, bukan merah pejal — supaya ia tidak bersaing dengan butang CTA "Lihat semua" yang memang merah pejal di bawah. */ .ikpkt-tab-bantuan__tab.is-aktif { background: #fff; color: #cf2e2e; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06); } .ikpkt-tab-bantuan__tab:focus-visible { outline: 2px solid #cf2e2e; outline-offset: 2px; } /* Panel bertukar dengan lembut, bukan bertukar mengejut. */ @keyframes ikpkt-panel-masuk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ikpkt-tab-bantuan__panel:not([hidden]) { animation: ikpkt-panel-masuk 0.28s ease both; } .ikpkt-tab-bantuan__panel[hidden] { display: none; } .ikpkt-tab-bantuan__grid { /* Flex, bukan grid. Dengan grid, `repeat(5, 1fr)` memang memberi tepat 5 lajur tetapi tab yang hanya ada 1-2 kad akan melekat ke kiri; dan `auto-fit` pula memusatkan dengan betul tetapi bilangan lajurnya ditentukan oleh lebar, bukan oleh kita. Flex + flex-basis yang dikira memberi KEDUA-DUANYA: tepat --kol kad sebaris, dan baris yang tidak penuh sentiasa berpusat. */ display: flex; flex-wrap: wrap; justify-content: center; --kol: 5; --sela: 20px; gap: var(--sela); } /* Lebar kad = (lebar penuh - jumlah jurang) / bilangan lajur. Hanya --kol perlu diubah dalam media query di bawah. */ .ikpkt-tab-bantuan__grid > .ikpkt-tab-bantuan__kad { box-sizing: border-box; flex: 0 1 calc((100% - (var(--kol) - 1) * var(--sela)) / var(--kol)); max-width: calc((100% - (var(--kol) - 1) * var(--sela)) / var(--kol)); } /* Titik putus dipilih supaya kad tidak pernah lebih sempit daripada ~215px (lebar minimum supaya tajuk dua patah perkataan tidak pecah). */ @media (max-width: 1180px) { .ikpkt-tab-bantuan__grid { --kol: 4; } } @media (max-width: 940px) { .ikpkt-tab-bantuan__grid { --kol: 3; } } @media (max-width: 720px) { .ikpkt-tab-bantuan__grid { --kol: 2; } } /* Kad petak: jalur kecerunan di tepi atas, tajuk, penerangan, dan ikon tera air besar di bucu kanan bawah. */ .ikpkt-tab-bantuan__kad { position: relative; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 22px 20px 24px; /* Mengelip ikon tera air yang melimpah keluar bucu kad. */ overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /* Jalur kecerunan di tepi atas kad. */ .ikpkt-tab-bantuan__kad::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #cf2e2e 0%, #e0623a 55%, #eda24a 100%); } a.ikpkt-tab-bantuan__kad:hover { transform: translateY(-4px); border-color: #f0cccc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 16px 32px rgba(207, 46, 46, 0.1); } .ikpkt-tab-bantuan__kad-tajuk { font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: #1b2a41; transition: color 0.2s ease; } a.ikpkt-tab-bantuan__kad:hover .ikpkt-tab-bantuan__kad-tajuk { color: #cf2e2e; } .ikpkt-tab-bantuan__kad-teks { font-size: 0.83rem; line-height: 1.5; color: #5b6b7f; /* Menolak ikon tera air ke bawah apabila kad sebaris lebih tinggi. */ flex-grow: 1; /* Supaya teks tidak bertindih ikon tera air di bucu kanan bawah. Diselaraskan 52px -> 46px: kad kini 5 sebaris (lebih kurang 256px), jadi setiap piksel lebar teks berharga. */ padding-right: 46px; } /* Ikon tera air — besar, lembut, melimpah sedikit keluar bucu kad. */ .ikpkt-tab-bantuan__ikon { position: absolute; right: -10px; bottom: -12px; color: #cf2e2e; opacity: 0.16; line-height: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .ikpkt-tab-bantuan__ikon svg { /* 92px -> 84px, sepadan dengan kad yang lebih sempit. */ width: 84px; height: 84px; stroke-width: 1.2; } a.ikpkt-tab-bantuan__kad:hover .ikpkt-tab-bantuan__ikon { opacity: 0.26; transform: translate(-2px, -2px); } /* Kad tanpa pautan (cth. Tender/Sebut Harga sebelum ada tawaran aktif) — dilembutkan supaya jelas ia bukan boleh diklik. */ .ikpkt-tab-bantuan__kad--tiada-pautan { background: #fafafa; box-shadow: none; } .ikpkt-tab-bantuan__kad--tiada-pautan::before { background: #dcdcdc; } .ikpkt-tab-bantuan__kad--tiada-pautan .ikpkt-tab-bantuan__kad-tajuk { color: #6b7280; } .ikpkt-tab-bantuan__kad--tiada-pautan .ikpkt-tab-bantuan__ikon { color: #9ca3af; opacity: 0.2; } @media (max-width: 560px) { .ikpkt-tab-bantuan { padding: 28px 16px 40px; border-radius: 0; } /* Bentuk hiasan dikecilkan: pada panel sempit, saiz desktop akan memenuhi seluruh panel dan hilang kesan "pinggir". */ .ikpkt-tab-bantuan__hiasan span:nth-child(1) { width: 240px; height: 240px; left: -90px; top: -100px; } .ikpkt-tab-bantuan__hiasan span:nth-child(2) { width: 160px; height: 160px; left: -50px; top: -60px; } .ikpkt-tab-bantuan__hiasan span:nth-child(3) { width: 150px; height: 150px; left: 40px; bottom: -70px; } .ikpkt-tab-bantuan__hiasan span:nth-child(4) { width: 40px; height: 40px; left: 150px; top: 70px; } .ikpkt-tab-bantuan__hiasan span:nth-child(5) { width: 260px; height: 200px; right: -80px; top: -50px; } .ikpkt-tab-bantuan__hiasan span:nth-child(6) { width: 190px; height: 140px; right: 20px; bottom: -60px; } .ikpkt-tab-bantuan__hiasan span:nth-child(7) { width: 48px; height: 48px; right: 60px; top: 100px; } .ikpkt-tab-bantuan__hiasan span:nth-child(8) { width: 240px; height: 110px; left: 20%; bottom: -50px; } .ikpkt-tab-bantuan__grid { --kol: 1; } .ikpkt-tab-bantuan__bar { -webkit-overflow-scrolling: touch; margin-bottom: 28px; } .ikpkt-tab-bantuan__tab { padding: 10px 16px; font-size: 0.88rem; } } /* --------------------------------------------------------------------- Butang "Lihat semua" + kad lebihan. Lalai: 5 kad sahaja dipapar (lihat $had dalam functions.php). Kad ke-6 dan seterusnya disembunyikan sehingga butang ditekan. Butang hanya dihasilkan apabila kad MELEBIHI 5. --------------------------------------------------------------------- */ .ikpkt-tab-bantuan__kad--lebihan { display: none; } /* Kad disembunyikan ialah flex column seperti kad lain — jadi ia mesti dikembalikan kepada flex, bukan block, apabila grid dibuka. */ .ikpkt-tab-bantuan__grid.is-buka > .ikpkt-tab-bantuan__kad--lebihan { display: flex; animation: ikpkt-kad-masuk 0.34s ease both; } /* Kad baharu muncul dengan lembut, bukan terpacul serta-merta. */ @keyframes ikpkt-kad-masuk { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .ikpkt-tab-bantuan__lagi-bekas { display: flex; justify-content: center; margin-top: 30px; } /* Pil penuh berwarna tema, teks putih di dalamnya. */ .ikpkt-tab-bantuan__lagi { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 7px 7px 7px 24px; background: #cf2e2e; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; color: #fff; /* Nisbah kontras teks putih pada #cf2e2e = 5.1:1 (lulus WCAG AA). */ box-shadow: 0 2px 6px rgba(207, 46, 46, 0.24), 0 10px 22px rgba(207, 46, 46, 0.16); transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } /* Merah gelap tema. Kontras teks putih naik ke 7.5:1 (lulus WCAG AAA). */ .ikpkt-tab-bantuan__lagi:hover { background: #a51e1e; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(165, 30, 30, 0.28), 0 16px 32px rgba(165, 30, 30, 0.2); } /* Maklum balas "ditekan" — pil turun semula ke tempat asal. */ .ikpkt-tab-bantuan__lagi:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(165, 30, 30, 0.3); } /* Bulatan putih kekal putih semasa fokus, jadi cincin fokus diletak di luar pil supaya ia kelihatan pada latar krim. */ .ikpkt-tab-bantuan__lagi:focus-visible { outline: 3px solid #cf2e2e; outline-offset: 3px; } /* Bulatan dalam: putih pejal, anak panah berwarna tema. */ .ikpkt-tab-bantuan__lagi-bulat { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #cf2e2e; transition: color 0.2s ease, transform 0.25s ease; } .ikpkt-tab-bantuan__lagi-bulat svg { width: 16px; height: 16px; } .ikpkt-tab-bantuan__lagi:hover .ikpkt-tab-bantuan__lagi-bulat { color: #a51e1e; transform: translateX(3px); } /* Anak panah berpusing apabila senarai sudah dibuka. */ .ikpkt-tab-bantuan__lagi[aria-expanded="true"] .ikpkt-tab-bantuan__lagi-bulat { transform: rotate(180deg); } .ikpkt-tab-bantuan__lagi[aria-expanded="true"]:hover .ikpkt-tab-bantuan__lagi-bulat { transform: rotate(180deg) translateX(3px); } /* --------------------------------------------------------------------- Denyutan menarik perhatian. Cincin riak yang mengembang keluar dari pil, dihasilkan oleh ::after supaya ia TIDAK berlanggar dengan box-shadow pil itu sendiri (yang sudah digunakan untuk bayang timbul dan keadaan hover). Dihadkan kepada 4 pusingan (4 x 1.2s = 4.8s) — di bawah had 5 saat WCAG 2.2.2 bagi kandungan bergerak, jadi tiada kawalan "henti" diperlukan. JS memulakannya semula setiap kali tab dibuka, dan mematikannya terus selepas butang ditekan. --------------------------------------------------------------------- */ .ikpkt-tab-bantuan__lagi::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 2px solid #cf2e2e; opacity: 0; pointer-events: none; } @keyframes ikpkt-denyut { from { transform: scale(1); opacity: 0.5; } to { transform: scale(1.28); opacity: 0; } } .ikpkt-tab-bantuan__lagi.is-denyut::after { animation: ikpkt-denyut 1.2s ease-out 4; } /* Hormati tetapan sistem pelawat yang meminta kurang animasi. */ @media (prefers-reduced-motion: reduce) { .ikpkt-tab-bantuan__lagi.is-denyut::after, .ikpkt-tab-bantuan__grid.is-buka > .ikpkt-tab-bantuan__kad--lebihan, .ikpkt-tab-bantuan__panel:not([hidden]) { animation: none; } .ikpkt-tab-bantuan__lagi, .ikpkt-tab-bantuan__lagi-bulat { transition: none; } .ikpkt-tab-bantuan__lagi:hover { transform: none; } } @media (max-width: 560px) { .ikpkt-tab-bantuan__lagi { padding-left: 20px; font-size: 0.9rem; } }