Merge remote-tracking branch 'origin/main' into feature/multilanguage

groups/HarusSelesaiKP/index.html

@@ -1281,10 +1281,13 @@
 				<span class="highlight-text">Universitas Tanjungpura</span> Pontianak
 			</h1>
 
-			<p class="hero-description" data-skp-i18n="skp_hero_desc">
-				Kuliah di kampus unggulan Kalimantan Barat dengan fasilitas lengkap,
-				lingkungan nyaman dan kehidupan mahasiswa yang terjangkau
-			</p>
+			<<<<<<< HEAD <p class="hero-description" data-skp-i18n="skp_hero_desc">
+				=======
+				<p class="hero-description" data-i18n="skp_hero_desc">
+					>>>>>>> origin/main
+					Kuliah di kampus unggulan Kalimantan Barat dengan fasilitas lengkap,
+					lingkungan nyaman dan kehidupan mahasiswa yang terjangkau
+				</p>
 		</section>
 
 		<!-- ABOUT SECTION -->
@@ -1714,10 +1717,10 @@
 
 				cardsHtmlHTML += `
                     <div class="facility-card">
-                        <img src="${item.imgSrc}" alt="${displayTitle}" class="card-image" />
+                        <img src="${item.imgSrc}" alt="${displayTitle}" class="card-image" loading="lazy" decoding="async" />
                         <div class="card-body">
                             <span class="card-icon-badge">
-                                <img src="${item.icon}" alt="" class="card-icon" />
+                                <img src="${item.icon}" alt="" class="card-icon" loading="lazy" decoding="async" />
                             </span>
                             <h3 class="card-title">${displayTitle}</h3>
                             <p class="card-desc">${displayDesc}</p>
@@ -1855,7 +1858,7 @@
 					return `
                         <div class="directory-card">
                             <div class="img-wrapper">
-                                <img src="${dir.image}" alt="${displayTitle}" />
+                                <img src="${dir.image}" alt="${displayTitle}" loading="lazy" decoding="async" />
                             </div>
                             <div class="card-info">
                                 <h4>${displayTitle}</h4>
@@ -2143,7 +2146,7 @@
 
 					return `
                             <div class="culinary-card">
-                                <img src="${item.image}" alt="${item.name}" class="card-thumb" />
+                                <img src="${item.image}" alt="${item.name}" class="card-thumb" loading="lazy" decoding="async" />
                                 <div class="card-body">
                                     <h3>${item.name}</h3>
                                     <p>${displayDesc}</p>

groups/HarusSelesaiKP/localization.js

@@ -267,4 +267,4 @@
 
 	document.addEventListener('languageChanged', () => applySkp());
 	document.addEventListener('DOMContentLoaded', () => applySkp());
-})();
+})();

groups/HarusSelesaiKP/style.css

@@ -1604,3 +1604,300 @@ body {
 		}
 	}
 }
+
+/* ============================================================
+   ANTI-FLICKER — localization.js sets window.__currentLang
+   synchronously; body stays hidden until DOMContentLoaded
+   fires applyTranslations() and removes this class.
+   ============================================================ */
+body.lang-pending {
+	visibility: hidden;
+}
+
+/* ============================================================
+   MOVED FROM index.html <style> TAG
+   (Originally inline; moved here so the browser can cache it)
+   ============================================================ */
+
+/* ===== MOBILE NAV STABILITY FIX =====
+   Prevents logo bar from collapsing/shifting on Android when
+   address bar hides/shows and triggers viewport reflow.
+   ===================================== */
+#nav-wrapper {
+	position: fixed !important;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 50;
+	backface-visibility: hidden;
+	-webkit-backface-visibility: hidden;
+	will-change: box-shadow;
+}
+
+#nav-wrapper > div:first-child {
+	transform: translateZ(0);
+	-webkit-transform: translateZ(0);
+}
+
+@media (max-width: 1023px) {
+	#nav-wrapper > div:first-child {
+		min-height: 0 !important;
+		max-height: none;
+	}
+}
+
+#pengumuman-bar {
+	z-index: 40;
+}
+
+#pengumuman-bar.is-stuck {
+	position: fixed;
+	left: 0;
+	right: 0;
+	z-index: 40;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+	}
+}
+
+/* Skip Link Styling */
+.skip-link {
+	position: absolute;
+	top: -40px;
+	left: 0;
+	background: #003150;
+	color: white;
+	padding: 8px 16px;
+	z-index: 100;
+	transition: top 0.3s;
+}
+
+.skip-link:focus {
+	top: 0;
+}
+
+/* Focus visible for better keyboard navigation */
+:focus-visible {
+	outline: 3px solid #feb401;
+	outline-offset: 2px;
+}
+
+/* Mega Menu Styles */
+.hero-pagination .swiper-pagination-bullet {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: rgba(255, 255, 255, 0.4);
+	display: inline-block;
+	margin: 0 4px;
+	cursor: pointer;
+	transition: all 0.3s ease;
+}
+
+.hero-pagination .swiper-pagination-bullet-active {
+	background: rgba(255, 255, 255, 1);
+	width: 24px;
+	border-radius: 4px;
+}
+
+.mega-panel {
+	opacity: 0;
+	visibility: hidden;
+	transition:
+		opacity 0.2s ease,
+		visibility 0.2s ease;
+	position: absolute;
+	top: 100%;
+	left: 0;
+	right: 0;
+}
+
+.mega-panel.active {
+	opacity: 1;
+	visibility: visible;
+}
+
+/* Overlay transition */
+#mega-overlay {
+	opacity: 0;
+	visibility: hidden;
+	transition:
+		opacity 0.2s ease,
+		visibility 0.2s ease;
+}
+
+#mega-overlay.active {
+	opacity: 1;
+	visibility: visible;
+}
+
+.mega-link-card {
+	display: flex;
+	align-items: flex-start;
+	gap: 1rem;
+	padding: 1rem;
+	border-radius: 0.75rem;
+	border: 1px solid #e2e8f0;
+	background: white;
+	transition: all 0.2s ease;
+}
+
+.mega-link-card:hover {
+	border-color: #3b82f6;
+	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+	transform: translateY(-2px);
+}
+
+.mega-link-icon {
+	width: 2.5rem;
+	height: 2.5rem;
+	border-radius: 0.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	transition: all 0.2s ease;
+}
+
+.nav-menu-btn.active {
+	background: rgba(255, 255, 255, 0.9);
+	color: #1e40af;
+}
+
+.nav-menu-btn:hover {
+	background: rgba(255, 255, 255, 0.8);
+}
+
+/* Mega menu positioning - no gap */
+#main-nav {
+	position: relative;
+}
+
+#mega-menu-container {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	right: 0;
+	pointer-events: none;
+}
+
+#mega-menu-container .mega-panel {
+	pointer-events: auto;
+}
+
+/* Keep pointer bridge under nav to prevent hover loss */
+.nav-menu-item {
+	position: relative;
+}
+
+.nav-menu-item::after {
+	content: "";
+	position: absolute;
+	bottom: -12px;
+	left: 0;
+	right: 0;
+	height: 12px;
+}
+
+/* ===== Luco Chatbot Animations ===== */
+@keyframes slideInRight {
+	from {
+		transform: translateX(100px);
+		opacity: 0;
+	}
+
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes fadeInUp {
+	from {
+		transform: translateY(10px);
+		opacity: 0;
+	}
+
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes lucoPulse {
+	0%,
+	100% {
+		transform: scale(1);
+	}
+
+	50% {
+		transform: scale(1.05);
+	}
+}
+
+#luco-container {
+	animation: slideInRight 0.5s ease-out forwards;
+}
+
+#luco-bubble {
+	animation: fadeInUp 0.3s ease-out forwards;
+	width: min(18rem, calc(100vw - 2rem));
+}
+
+#luco-btn {
+	animation: lucoPulse 2s ease-in-out infinite;
+}
+
+#luco-btn:hover {
+	animation: none;
+}
+
+/* Typing indicator */
+.typing-indicator span {
+	display: inline-block;
+	animation: bounce 1.4s infinite ease-in-out;
+}
+
+.typing-indicator span:nth-child(1) {
+	animation-delay: 0s;
+}
+
+.typing-indicator span:nth-child(2) {
+	animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+	animation-delay: 0.4s;
+}
+
+@keyframes bounce {
+	0%,
+	80%,
+	100% {
+		transform: translateY(0);
+	}
+
+	40% {
+		transform: translateY(-6px);
+	}
+}
+
+/* Luco speech bubble arrow */
+#luco-bubble .bubble-arrow {
+	position: absolute;
+	right: 24px;
+	bottom: -6px;
+	width: 12px;
+	height: 12px;
+	background: white;
+	transform: rotate(45deg);
+	border-right: 1px solid #e2e8f0;
+	border-bottom: 1px solid #e2e8f0;
+}