/* * Slider utama laman utama (Smart Slider 3): latar imej STATIK, elemen * geometri beranimasi, dan kejelasan teks tarikh/tempat. * * SKEMA "PANORAMA + TONA JMG" (14 Okt 2026). Sejarah & sandaran dalam * /var/backups/portalikpktstaging-20261014-pautan-pantas/: * slider-latar.css.skema-biru-asal kampus dari udara, hitam putih * slider-latar.css.skema-wain kampus dari udara, wain -> arang * slider-latar.css.skema-bangunan bangunanIKPKT, arang * * Imej: Media "Panorama3" (taman, gazebo, bukit hijau) — warna asli, * dikaburkan ringan. Lapisan: tona biru laut portal JMG, diambil daripada * piksel tangkapan skrin JMG yang diberi pengguna (#112e4b di kiri hero, * #1b4770 di tengah; bar menu JMG #14324a). Disahkan dengan simulasi GD * bersama kad putih dan teks putih. * * LATAR STATIK. Asalnya imej diletak pada latar SETIAP slaid * (.n2-ss-slide-background-color), jadi ia beralih bersama slaid dan * animasi peralihan "Slices" (z-index 3, di BELAKANG .n2-ss-slider-3) * mendedahkan warna gelap di antaranya. Kini imej diletak pada * .n2-ss-slider-3 sendiri (bekas statik), latar setiap slaid dan sisi * animasi dijadikan lutsinar: hanya poster dan teks beralih, latar kekal. * * Pemilih: body.home + slider BUKAN karusel (kelas * n2-ss-slider-carousel-animation-* — tiada atribut data-ss-carousel). * Tidak bergantung pada ID slider; karusel logo agensi tidak terkena. * Konfigurasi Smart Slider dalam DB tidak disentuh. */ body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) { /* ===== KEPEKATAN LAPISAN — laraskan di sini ===== 1 = seperti direka. Lebih kecil = gambar lebih jelas (cth. 0.85); lebih besar = lebih gelap (cth. 1.1). */ --ikpkt-slider-gelap: 1; } body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) .n2-ss-slider-3 { background-color: #112e4b; background-image: /* Jalur atas & bawah sedikit lebih gelap — pinggir kad putih kekal jelas. */ linear-gradient(180deg, rgba(13, 37, 61, calc(0.40 * var(--ikpkt-slider-gelap))) 0%, rgba(13, 37, 61, 0) 22%, rgba(13, 37, 61, 0) 78%, rgba(13, 37, 61, calc(0.40 * var(--ikpkt-slider-gelap))) 100%), /* Tona JMG: biru laut pekat di kiri (bawah teks putih) -> biru. */ linear-gradient(90deg, rgba(17, 46, 75, calc(0.88 * var(--ikpkt-slider-gelap))) 0%, rgba(27, 71, 112, calc(0.52 * var(--ikpkt-slider-gelap))) 55%, rgba(27, 71, 112, calc(0.52 * var(--ikpkt-slider-gelap))) 100%), url("slider-latar/panorama-1920.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } @media (max-width: 781px) { /* Telefon: kad dan teks bertindan — lapisan rata lebih pekat. */ body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) .n2-ss-slider-3 { background-image: linear-gradient(rgba(17, 46, 75, calc(0.80 * var(--ikpkt-slider-gelap))), rgba(17, 46, 75, calc(0.80 * var(--ikpkt-slider-gelap)))), url("slider-latar/panorama-960.jpg"); } } /* Latar setiap slaid: lutsinar (warna #333E51 asal ialah gaya INLINE, jadi !important perlu), supaya latar statik di atas kelihatan. */ body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) .n2-ss-slide-background-color { background: transparent !important; } /* Sisi animasi peralihan "Slices" — punca kilatan gelap semasa slaid bertukar. Pemilih plugin div#n2-ss-12 .n2-bganim-side (1,2,1). */ body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) .n2-bganim-side, body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) .n2-bganim-tile-overlay-colored { background: transparent !important; } /* ------------------------------------------------------------------------ * Elemen geometri abstrak beranimasi. * * Diletak pada .n2-ss-slider-3 (bekas STATIK; overflow:hidden memotong * cincin dengan kemas). .n2-ss-slider-3 ialah konteks susunan (z-index 10) * yang memegang dua lapisan (disahkan daripada CSS Smart Slider): * .n2-ss-slide-backgrounds z-index 10 .n2-ss-slider-4 z-index 20 * z-index 15 meletakkan bentuk di antaranya: di atas imej, di bawah teks * dan kad poster. * * display:block WAJIB: smartslider.min.css menyembunyikan semua * pseudo-elemen elemennya — `.n2-ss-slider .n2-ow:before, * .n2-ss-slider .n2-ow:after { display:none }` — dan .n2-ss-slider-3 * membawa kelas n2-ow. (Sebab elemen ini tidak kelihatan pada versi lepas.) * * ::before — cincin putus-putus besar di kiri bawah, berputar perlahan. * ::after — bentuk kecil yang hanyut perlahan + aksen merah tema. * ---------------------------------------------------------------------- */ body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) .n2-ss-slider-3::before, body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) .n2-ss-slider-3::after { content: ""; display: block; position: absolute; z-index: 15; box-sizing: border-box; pointer-events: none; } body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) .n2-ss-slider-3::before { left: -170px; bottom: -230px; width: 520px; height: 520px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520' fill='none' stroke='%23ffffff'%3E%3Ccircle cx='260' cy='260' r='250' stroke-opacity='.22' stroke-width='1.5' stroke-dasharray='3 12' stroke-linecap='round'/%3E%3Ccircle cx='260' cy='260' r='196' stroke-opacity='.16' stroke-width='1.2'/%3E%3Ccircle cx='260' cy='10' r='5' fill='%23cf2e2e' fill-opacity='.9' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat; animation: ikpkt-slider-putar 90s linear infinite; } body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) .n2-ss-slider-3::after { top: 0; right: 0; bottom: 0; left: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Crect x='3' y='3' width='42' height='42' rx='11' stroke='%23ffffff' stroke-opacity='.34' stroke-width='1.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='36' fill='none'%3E%3Cpath d='M20 3 37 33H3Z' stroke='%23ffffff' stroke-opacity='.32' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath d='M10 2v16M2 10h16' stroke='%23ffffff' stroke-opacity='.42' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='58' fill='%23ffffff' fill-opacity='.36'%3E%3Cg%3E%3Ccircle cx='3' cy='3' r='1.6'/%3E%3Ccircle cx='21' cy='3' r='1.6'/%3E%3Ccircle cx='39' cy='3' r='1.6'/%3E%3Ccircle cx='57' cy='3' r='1.6'/%3E%3Ccircle cx='75' cy='3' r='1.6'/%3E%3C/g%3E%3Cg transform='translate(0 18)'%3E%3Ccircle cx='3' cy='3' r='1.6'/%3E%3Ccircle cx='21' cy='3' r='1.6'/%3E%3Ccircle cx='39' cy='3' r='1.6'/%3E%3Ccircle cx='57' cy='3' r='1.6'/%3E%3Ccircle cx='75' cy='3' r='1.6'/%3E%3C/g%3E%3Cg transform='translate(0 36)'%3E%3Ccircle cx='3' cy='3' r='1.6'/%3E%3Ccircle cx='21' cy='3' r='1.6'/%3E%3Ccircle cx='39' cy='3' r='1.6'/%3E%3Ccircle cx='57' cy='3' r='1.6'/%3E%3Ccircle cx='75' cy='3' r='1.6'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='none'%3E%3Ccircle cx='48' cy='48' r='45' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='6' fill='%23cf2e2e' fill-opacity='.9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 7% 16%, 42% 9%, 46% 74%, 3% 82%, 98% 4%, 39% 86%; animation: ikpkt-slider-apung 14s ease-in-out infinite alternate; } @keyframes ikpkt-slider-putar { to { transform: rotate(360deg); } } /* Setiap bentuk hanyut ke arah berbeza (beberapa piksel sahaja). */ @keyframes ikpkt-slider-apung { 0% { background-position: 7% 16%, 42% 9%, 46% 74%, 3% 82%, 98% 4%, 39% 86%; } 50% { background-position: 7.6% 13%, 41% 12%, 47% 71%, 3.4% 79%, 97.4% 6%, 40% 82%; } 100% { background-position: 6.6% 18%, 43% 8%, 45.4% 77%, 2.8% 84%, 98.4% 2.5%, 38.4% 88%; } } @media (max-width: 781px) { /* Telefon: cincin besar disembunyikan; bentuk kecil kekal. */ body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) .n2-ss-slider-3::before { display: none; } } @media (prefers-reduced-motion: reduce) { body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) .n2-ss-slider-3::before, body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) .n2-ss-slider-3::after { animation: none; } } /* ------------------------------------------------------------------------ * Teks tarikh / masa / tempat — asalnya putih 60% (RGBA(255,255,255,0.6)) * dengan line-height 1.2, kabur di atas latar bergambar. * * Disasarkan melalui kelas fon Smart Slider bagi teks itu. Kelas ini ialah * hash kandungan gaya: sama di semua pemasangan dengan gaya yang sama, * TETAPI berubah jika gaya teks itu disunting dalam Smart Slider — jika teks * kembali kabur selepas suntingan, kemas kini hash di sini. Kelas yang sama * digunakan oleh baris meta seumpamanya ("E-MANAGEMENT SYSTEM I-KPKT", * "Unit Penyelenggaraan I-KPKT"). Pemilih plugin (1,1,1) -> !important. * ---------------------------------------------------------------------- */ body.home .n2-ss-slider:not([class*="n2-ss-slider-carousel"]) .n2-font-46e1c4540f6a763a251c2b959fc0d4b4-paragraph { color: rgba(255, 255, 255, 0.94) !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: 0.01em !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important; }