localization global

Reviewed-on: #8
Reviewed-by: pancaa <d1041231077@student.untan.ac.id>

groups/HarusSelesaiKP/index.html

@@ -1277,12 +1277,13 @@
 		<section class="hero-section">
 			<div class="hero-overlay"></div>
 
-			<h1 class="hero-title reveal">
+			<h1 class="hero-title">
 				Study at
 				<span class="highlight-text">Universitas Tanjungpura</span> Pontianak
 			</h1>
 
-			<p class="hero-description reveal" data-skp-i18n="skp_hero_desc">
+			<p class="hero-description" data-skp-i18n="skp_hero_desc">
+			<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>
@@ -1290,12 +1291,12 @@
 
 		<!-- ABOUT SECTION -->
 		<section class="about-section">
-			<div class="about-image-wrapper reveal>
+			<div class="about-image-wrapper">
-				<span class=" image-bg-decorator"></span>
+				<span class="image-bg-decorator"></span>
 				<div class="main-image"></div>
 			</div>
 
-			<div class="about-content reveal">
+			<div class="about-content">
 				<span class="eyebrow-component" data-skp-i18n="skp_about_eyebrow">Tentang Untan</span>
 
 				<h2 class="about-title" data-skp-i18n="skp_about_title">
@@ -1336,7 +1337,7 @@
 		<section class="facilities-section">
 			<span class="eyebrow-component" data-skp-i18n="skp_fac_eyebrow">Fasilitas Kampus</span>
 
-			<h2 class="facilities-title reveal" data-skp-i18n="skp_fac_main_title">
+			<h2 class="facilities-title" data-skp-i18n="skp_fac_main_title">
 				Fasilitas Kampus untuk Pengalaman Belajar yang Nyaman
 			</h2>
 
@@ -1347,10 +1348,10 @@
 		<section class="campus-section">
 			<span class="eyebrow-component" data-skp-i18n="skp_campus_eyebrow">Kehidupan Kampus</span>
 
-			<h2 class="campus-title reveal data-skp-i18n=" skp_campus_title">
+			<h2 class="campus-title" data-skp-i18n="skp_campus_title">
 				Aktivitas Mahasiswa & Organisasi Kampus
 			</h2>
-			<p class="campus-subtitle reveal data-skp-i18n=" skp_campus_subtitle">
+			<p class="campus-subtitle" data-skp-i18n="skp_campus_subtitle">
 				Mahasiswa UNTAN memiliki berbagai kesempatan untuk berkembang melalui
 				organisasi, UKM, komunitas, dan kegiatan ekstrakurikuler.
 			</p>
@@ -1366,8 +1367,8 @@
 		<section class="pontianak-city-section">
 			<div class="pontianak-overlay"></div>
 
-			<div class="pontianak-content reveal>
+			<div class="pontianak-content">
-				<span class=" eyebrow-component" data-skp-i18n="skp_pontianak_eyebrow">Kota Pontianak</span>
+				<span class="eyebrow-component" data-skp-i18n="skp_pontianak_eyebrow">Kota Pontianak</span>
 				<h2 class="pontianak-title" data-skp-i18n="skp_pontianak_title">
 					Live In Pontianak
 				</h2>
@@ -1386,7 +1387,7 @@
 		<section class="destination-section">
 			<span class="eyebrow-component" data-skp-i18n="skp_dest_eyebrow">Wisata & Destinasi</span>
 
-			<h2 class="destination-title reveal data-skp-i18n=" skp_dest_title">
+			<h2 class="destination-title" data-skp-i18n="skp_dest_title">
 				Tempat Menarik di Pontianak
 			</h2>
 
@@ -1399,7 +1400,7 @@
 		<section class="culinary-section">
 			<span class="eyebrow-component" data-skp-i18n="skp_cul_eyebrow">Cafe & Kuliner</span>
 
-			<h2 class="culinary-title reveal" data-skp-i18n="skp_cul_title">
+			<h2 class="culinary-title" data-skp-i18n="skp_cul_title">
 				Kuliner dan Coffee Shop Favorit Mahasiswa
 			</h2>
 			<hr class="culinary-divider" />
@@ -1416,7 +1417,7 @@
 				<div class="cost-banner-overlay"></div>
 			</div>
 
-			<div class="cost-info-panel reveal">
+			<div class="cost-info-panel">
 				<span class="eyebrow-component" data-skp-i18n="skp_cost_eyebrow">Biaya Hidup Mahasiswa</span>
 
 				<h2 class="cost-title" data-skp-i18n="skp_cost_title">
@@ -1714,7 +1715,7 @@
 					typeof skpT === "function" ? skpT(item.descKey) : item.descKey;
 
 				cardsHtmlHTML += `
-                    <div class="facility-card reveal">
+                    <div class="facility-card">
                         <img src="${item.imgSrc}" alt="${displayTitle}" class="card-image" loading="lazy" decoding="async" />
                         <div class="card-body">
                             <span class="card-icon-badge">
@@ -1854,7 +1855,7 @@
 						typeof skpT === "function" ? skpT(dir.descKey) : dir.descKey;
 
 					return `
-                        <div class="directory-card reveal">
+                        <div class="directory-card">
                             <div class="img-wrapper">
                                 <img src="${dir.image}" alt="${displayTitle}" loading="lazy" decoding="async" />
                             </div>
@@ -1990,7 +1991,7 @@
 						typeof skpT === "function" ? skpT(dest.descKey) : dest.descKey;
 
 					return `
-                <div class="destination-card reveal" style="background-image: url('${dest.image}')">
+                <div class="destination-card" style="background-image: url('${dest.image}')">
                     <div class="card-overlay"></div>
                     <div class="card-content">
                         <h3 class="card-name">${displayName}</h3>
@@ -2143,7 +2144,7 @@
 						typeof skpT === "function" ? skpT(item.descKey) : item.descKey;
 
 					return `
-                            <div class="culinary-card reveal">
+                            <div class="culinary-card">
                                 <img src="${item.image}" alt="${item.name}" class="card-thumb" loading="lazy" decoding="async" />
                                 <div class="card-body">
                                     <h3>${item.name}</h3>
@@ -2208,7 +2209,7 @@
 						typeof skpT === "function" ? skpT("skp_cost_period") : "per bulan";
 
 					return `
-                    <div class="cost-item-card reveal">
+                    <div class="cost-item-card">
                         ${detail.iconSvg}
                         <p class="cost-type">${displayType}</p>
                         <p class="cost-price">Rp ${detail.price}</p>
@@ -2225,26 +2226,6 @@
 			renderLivingCostCards();
 		});
 	</script>
-	<script>
-		document.addEventListener("DOMContentLoaded", () => {
-			const reveals = document.querySelectorAll(".reveal");
-
-			const observer = new IntersectionObserver((entries) => {
-				entries.forEach((entry) => {
-					if (entry.isIntersecting) {
-						entry.target.classList.add("active");
-						observer.unobserve(entry.target);
-					}
-				});
-			}, {
-				threshold: 0.15
-			});
-
-			reveals.forEach((element) => {
-				observer.observe(element);
-			});
-		});
-	</script>
 </body>
 
 </html>

groups/HarusSelesaiKP/style.css

@@ -119,7 +119,7 @@ body {
 	display: block;
 }
 
-.article-body>*+* {
+.article-body > * + * {
 	margin-top: 1.1em;
 }
 
@@ -300,10 +300,12 @@ body {
 		position: absolute;
 		inset: 0;
 		z-index: 1;
-		background: linear-gradient(270deg,
+		background: linear-gradient(
-				rgba(0, 0, 0, 0) 21.76%,
+			270deg,
-				rgba(0, 0, 0, 0.4) 63.31%,
+			rgba(0, 0, 0, 0) 21.76%,
-				rgba(0, 49, 80, 0.72) 78.24%);
+			rgba(0, 0, 0, 0.4) 63.31%,
+			rgba(0, 49, 80, 0.72) 78.24%
+		);
 	}
 
 	/* Judul Hero */
@@ -425,7 +427,7 @@ body {
 			font-size: 8px;
 			font-weight: 500;
 
-			p+p {
+			p + p {
 				margin-top: 8px;
 			}
 		}
@@ -982,10 +984,12 @@ body {
 	.pontianak-overlay {
 		position: absolute;
 		inset: 0;
-		background: linear-gradient(0deg,
+		background: linear-gradient(
-				rgba(0, 0, 0, 0.9) -14.48%,
+			0deg,
-				rgba(0, 0, 0, 0.4) 42.76%,
+			rgba(0, 0, 0, 0.9) -14.48%,
-				rgba(0, 0, 0, 0) 100%);
+			rgba(0, 0, 0, 0.4) 42.76%,
+			rgba(0, 0, 0, 0) 100%
+		);
 		z-index: 1;
 	}
 
@@ -1128,10 +1132,12 @@ body {
 		.card-overlay {
 			position: absolute;
 			inset: 0;
-			background: linear-gradient(0deg,
+			background: linear-gradient(
-					rgba(0, 0, 0, 0.8) 0%,
+				0deg,
-					rgba(0, 0, 0, 0.2) 50%,
+				rgba(0, 0, 0, 0.8) 0%,
-					rgba(0, 0, 0, 0) 100%);
+				rgba(0, 0, 0, 0.2) 50%,
+				rgba(0, 0, 0, 0) 100%
+			);
 			z-index: 1;
 		}
 
@@ -1400,10 +1406,12 @@ body {
 		.cost-banner-overlay {
 			position: absolute;
 			inset: 0;
-			background: linear-gradient(0deg,
+			background: linear-gradient(
-					#012338 0%,
+				0deg,
-					rgba(1, 35, 56, 0.4) 55%,
+				#012338 0%,
-					rgba(1, 35, 56, 0) 100%);
+				rgba(1, 35, 56, 0.4) 55%,
+				rgba(1, 35, 56, 0) 100%
+			);
 		}
 	}
 
@@ -1526,10 +1534,12 @@ body {
 
 			/* Perubahan Arah Gradasi: Mengabur ke arah kiri panel Navy */
 			.cost-banner-overlay {
-				background: linear-gradient(270deg,
+				background: linear-gradient(
-						#012338 0%,
+					270deg,
-						rgba(0, 0, 0, 0.4) 65%,
+					#012338 0%,
-						rgba(0, 0, 0, 0) 78%);
+					rgba(0, 0, 0, 0.4) 65%,
+					rgba(0, 0, 0, 0) 78%
+				);
 			}
 		}
 
@@ -1624,13 +1634,13 @@ body.lang-pending {
 	will-change: box-shadow;
 }
 
-#nav-wrapper>div:first-child {
+#nav-wrapper > div:first-child {
 	transform: translateZ(0);
 	-webkit-transform: translateZ(0);
 }
 
 @media (max-width: 1023px) {
-	#nav-wrapper>div:first-child {
+	#nav-wrapper > div:first-child {
 		min-height: 0 !important;
 		max-height: none;
 	}
@@ -1648,7 +1658,6 @@ body.lang-pending {
 }
 
 @media (prefers-reduced-motion: reduce) {
-
 	*,
 	*::before,
 	*::after {
@@ -1823,7 +1832,6 @@ body.lang-pending {
 }
 
 @keyframes lucoPulse {
-
 	0%,
 	100% {
 		transform: scale(1);
@@ -1870,7 +1878,6 @@ body.lang-pending {
 }
 
 @keyframes bounce {
-
 	0%,
 	80%,
 	100% {
@@ -1894,41 +1901,3 @@ body.lang-pending {
 	border-right: 1px solid #e2e8f0;
 	border-bottom: 1px solid #e2e8f0;
 }
-
-/* ===== PAGE LOAD ANIMATIONS ===== */
-@keyframes fadeInUplarge {
-	from {
-		opacity: 0;
-		transform: translateY(30px);
-	}
-
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-@keyframes fadeIn {
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}
-
-/* Hero */
-
-.reveal {
-	opacity: 0;
-	transform: translateY(50px);
-	transition:
-		opacity 0.8s ease,
-		transform 0.8s ease;
-}
-
-.reveal.active {
-	opacity: 1;
-	transform: translateY(0);
-}