Kirim Tanpa Batas, Sampai Lebih Cepat

/* ========================================================= ExPress — Tracking ========================================================= */ .express-tracking { position: relative; width: 100%; min-height: 610px; overflow: hidden; border-radius: 28px; background: #FFFFFF; isolation: isolate; font-family: “Montserrat”, sans-serif; } /* ========================================================= MAP ========================================================= */ .express-tracking-map { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .express-tracking-map iframe { width: 100%; height: 100%; border: 0; transform: scale(1.08); filter: grayscale(0.15) saturate(0.75); } .express-map-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 34%, rgba(255,255,255,.78) 62%, rgba(255,255,255,.45) 100% ); } /* ========================================================= CONTENT ========================================================= */ .express-tracking-content { position: relative; z-index: 2; width: min(calc(100% – 40px), 920px); margin: 0 auto; padding: 64px 20px 50px; } /* ========================================================= HEADER ========================================================= */ .express-tracking-header { margin-bottom: 28px; text-align: center; } .express-tracking-badge { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; margin-bottom: 12px; border: 1px solid rgba(96,0,255,.15); border-radius: 999px; background: rgba(255,255,255,.72); color: #6000FF; font-family: “Montserrat”, sans-serif; font-size: .6rem; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; text-transform: uppercase; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .express-tracking-title { margin: 0 0 10px; padding: 0 80px; color: #17122B; font-family: “Oswald”, sans-serif; font-size: 3.85rem; font-weight: 500; line-height: 1.1; letter-spacing: -.8px; } .express-tracking-title span { color: #6000FF; } .express-tracking-description { max-width: 600px; margin: 0 auto; color: #625D70; font-family: “Montserrat”, sans-serif; font-size: .875rem; font-weight: 400; line-height: 1.7; } /* ========================================================= FORM ========================================================= */ .express-tracking-form { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; } .express-input-wrap { position: relative; flex: 1; } .express-input-wrap input { width: 100%; min-height: 58px; box-sizing: border-box; padding: 0 50px 0 48px; border: 1px solid rgba(23,18,43,.12); border-radius: 16px; outline: none; background: rgba(255,255,255,.92); color: #17122B; font-family: “Montserrat”, sans-serif; font-size: .875rem; font-weight: 600; box-shadow: 0 12px 35px rgba(23,18,43,.08); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); transition: border-color 240ms ease, box-shadow 240ms ease; } .express-input-wrap input::placeholder { color: #9B96A5; font-family: “Montserrat”, sans-serif; font-size: .8125rem; font-weight: 400; } .express-input-wrap input:focus { border-color: rgba(96,0,255,.45); box-shadow: 0 14px 40px rgba(96,0,255,.12); } .express-input-icon { position: absolute; left: 18px; top: 50%; z-index: 2; transform: translateY(-50%); color: #6000FF; font-family: “Montserrat”, sans-serif; font-size: 22px; pointer-events: none; } /* ========================================================= CLEAR BUTTON ========================================================= */ .express-clear { position: absolute; right: 14px; top: 50%; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 50%; background: rgba(96,0,255,.08); color: #6A6478; font-family: “Montserrat”, sans-serif; font-size: 18px; line-height: 27px; cursor: pointer; transform: translateY(-50%); transition: background-color 200ms ease, color 200ms ease; } .express-clear:hover { background: rgba(96,0,255,.15); color: #6000FF; } /* ========================================================= TRACK BUTTON ========================================================= */ .express-track-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 175px; min-height: 58px; padding: 0 23px; border: 0; border-radius: 16px; background: linear-gradient( 135deg, #6000FF, #9000FF ); color: #FFFFFF; font-family: “Montserrat”, sans-serif; font-size: .8125rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; box-shadow: 0 14px 30px rgba(96,0,255,.24); transition: transform 240ms cubic-bezier(.22,1,.36,1), box-shadow 240ms ease; } .express-track-button:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(96,0,255,.30); } .express-track-button:active { transform: translateY(0); } .express-track-button:disabled { cursor: wait; opacity: .85; } .express-button-arrow { font-size: 19px; line-height: 1; } .express-button-loader { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; border-radius: 50%; animation: expressSpin .7s linear infinite; } .express-tracking.is-loading .express-button-loader { display: inline-block; } .express-tracking.is-loading .express-button-arrow { display: none; } @keyframes expressSpin { to { transform: rotate(360deg); } } /* ========================================================= HELPER ========================================================= */ .express-helper { max-width: 760px; margin: 9px auto 0; padding-left: 4px; color: #777181; font-family: “Montserrat”, sans-serif; font-size: .6875rem; line-height: 1.5; } .express-helper strong { color: #6000FF; font-weight: 700; cursor: pointer; } /* ========================================================= ERROR ========================================================= */ .express-error { display: none; max-width: 760px; margin: 13px auto 0; padding: 11px 15px; border-radius: 12px; background: rgba(255,238,238,.92); color: #B42318; font-family: “Montserrat”, sans-serif; font-size: .75rem; line-height: 1.5; } .express-error.show { display: block; } /* ========================================================= RESULT ========================================================= */ .express-result { display: none; max-width: 920px; margin: 32px auto 0; padding: 25px; border: 1px solid rgba(96,0,255,.12); border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: 0 20px 60px rgba(23,18,43,.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .express-result.show { display: block; animation: expressResultIn .5s ease forwards; } @keyframes expressResultIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= RESULT HEADER ========================================================= */ .express-result-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid rgba(23,18,43,.08); } .express-result-label { display: block; margin-bottom: 5px; color: #8A8495; font-family: “Montserrat”, sans-serif; font-size: .625rem; font-weight: 500; line-height: 1.3; text-transform: uppercase; letter-spacing: 1px; } .express-result-number strong { color: #17122B; font-family: “Montserrat”, sans-serif; font-size: 1.0625rem; font-weight: 700; } .express-current-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: rgba(96,0,255,.08); color: #6000FF; font-family: “Montserrat”, sans-serif; font-size: .6875rem; font-weight: 700; } .express-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #6000FF; box-shadow: 0 0 0 5px rgba(96,0,255,.10); animation: expressPulse 1.7s infinite; } @keyframes expressPulse { 50% { box-shadow: 0 0 0 9px rgba(96,0,255,0); } } /* ========================================================= ROUTE ========================================================= */ .express-route { position: relative; padding: 38px 10px 24px; } .express-route-line { position: absolute; left: 8%; right: 8%; top: 54px; height: 3px; border-radius: 99px; background: rgba(96,0,255,.12); } .express-route-progress { position: relative; width: 0; height: 100%; border-radius: 99px; background: linear-gradient( 90deg, #6000FF, #9000FF ); transition: width 1.2s cubic-bezier(.4,0,.2,1), height 1.2s cubic-bezier(.4,0,.2,1); } .express-route-progress::after { content: “”; position: absolute; right: -5px; top: 50%; width: 11px; height: 11px; transform: translateY(-50%); border-radius: 50%; background: #6000FF; box-shadow: 0 0 0 5px rgba(96,0,255,.12), 0 0 18px rgba(96,0,255,.55); animation: expressTravelPulse 1.3s infinite; } @keyframes expressTravelPulse { 50% { box-shadow: 0 0 0 9px rgba(96,0,255,.03), 0 0 25px rgba(96,0,255,.65); } } /* ========================================================= STATIONS ========================================================= */ .express-route-stations { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .express-station { position: relative; text-align: center; } .express-station-bulb { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; margin: 0 auto 14px; border: 2px solid rgba(96,0,255,.18); border-radius: 50%; background: #FFFFFF; transition: border-color 350ms ease, box-shadow 350ms ease; } .express-station-bulb span { width: 9px; height: 9px; border-radius: 50%; background: #D5D0DF; transition: width 350ms ease, height 350ms ease, background-color 350ms ease, box-shadow 350ms ease; } .express-station.active .express-station-bulb, .express-station.completed .express-station-bulb { border-color: rgba(96,0,255,.35); } .express-station.active .express-station-bulb span, .express-station.completed .express-station-bulb span { background: #6000FF; } .express-station.current .express-station-bulb { border-color: #6000FF; box-shadow: 0 0 0 7px rgba(96,0,255,.08), 0 0 25px rgba(96,0,255,.18); } .express-station.current .express-station-bulb span { width: 11px; height: 11px; background: #6000FF; box-shadow: 0 0 14px rgba(96,0,255,.65); animation: expressPulse 1.3s infinite; } .express-station-info strong { display: block; margin-bottom: 4px; color: #261D3B; font-family: “Montserrat”, sans-serif; font-size: .8125rem; font-weight: 700; } .express-station-info small { display: block; color: #8A8495; font-family: “Montserrat”, sans-serif; font-size: .625rem; font-weight: 400; } .express-station.current .express-station-info strong { color: #6000FF; } /* ========================================================= SHIPMENT INFO ========================================================= */ .express-shipment-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 19px; border-top: 1px solid rgba(23,18,43,.08); } .express-info-item { padding: 12px; border-radius: 12px; background: rgba(248,247,251,.72); } .express-info-item span { display: block; margin-bottom: 5px; color: #8C8697; font-family: “Montserrat”, sans-serif; font-size: .5625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; } .express-info-item strong { color: #2A223C; font-family: “Montserrat”, sans-serif; font-size: .6875rem; font-weight: 700; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .express-tracking-title { padding-left: 40px; padding-right: 40px; font-size: 3rem; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .express-tracking { min-height: auto; border-radius: 20px; } .express-tracking-content { width: min(calc(100% – 24px), 920px); padding: 42px 12px 35px; } .express-tracking-title { padding-left: 0; padding-right: 0; font-size: 2.25rem; line-height: 1.15; } .express-tracking-description { font-size: .8125rem; line-height: 1.65; } .express-tracking-badge { font-size: .55rem; } .express-tracking-form { flex-direction: column; } .express-input-wrap, .express-track-button { width: 100%; } .express-track-button { min-height: 54px; } .express-result { padding: 18px; border-radius: 19px; } .express-result-top { align-items: flex-start; flex-direction: column; } .express-route { padding: 25px 0; } .express-route-line { left: 19px; right: auto; top: 31px; bottom: 31px; width: 3px; height: auto; } .express-route-progress { width: 100%; height: 0; } .express-route-progress::after { right: auto; left: 50%; top: auto; bottom: -5px; transform: translateX(-50%); } .express-route-stations { display: flex; flex-direction: column; gap: 27px; } .express-station { display: grid; grid-template-columns: 39px 1fr; gap: 12px; align-items: center; text-align: left; } .express-station-bulb { width: 31px; height: 31px; margin: 0; } .express-station-info strong { margin-bottom: 2px; } .express-shipment-info { grid-template-columns: repeat(2, 1fr); } .express-map-overlay { background: linear-gradient( 180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 60%, rgba(255,255,255,.72) 100% ); } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .express-tracking *, .express-tracking *::before, .express-tracking *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } document.addEventListener(“DOMContentLoaded”, function () { const tracking = document.getElementById(“expressTracking”); if (!tracking) { return; } /* ========================================================= ELEMENTS ========================================================= */ const input = document.getElementById(“expressResi”); const button = document.getElementById(“expressTrackButton”); const clearButton = document.getElementById(“expressClear”); const demoResi = document.getElementById(“expressDemoResi”); const result = document.getElementById(“expressResult”); const error = document.getElementById(“expressError”); const progress = document.getElementById(“expressProgress”); const status = document.getElementById(“expressCurrentStatus”); const resultResi = document.getElementById(“expressResultResi”); const stations = tracking.querySelectorAll(“.express-station”); const VALID_RESI = “EXP17092026”; let animationTimers = []; /* ========================================================= CLEAR TIMERS ========================================================= */ function clearTimers() { animationTimers.forEach(function (timer) { clearTimeout(timer); }); animationTimers = []; } /* ========================================================= RESET TRACKING ========================================================= */ function resetTracking() { clearTimers(); progress.style.width = “0%”; progress.style.height = “0%”; stations.forEach(function (station) { station.classList.remove( “active”, “completed”, “current” ); }); status.textContent = “Menunggu Pelacakan”; } /* ========================================================= SHOW ERROR ========================================================= */ function showError() { result.classList.remove(“show”); error.classList.add(“show”); input.focus(); } /* ========================================================= SET STATION ========================================================= */ function setStation(index) { stations.forEach(function (station, stationIndex) { station.classList.remove(“current”); if (stationIndex < index) { station.classList.add( "active", "completed" ); } if (stationIndex === index) { station.classList.add( "active", "current" ); } }); const progressValue = (index / (stations.length – 1)) * 100; if (window.innerWidth <= 700) { progress.style.width = "100%"; progress.style.height = progressValue + "%"; } else { progress.style.width = progressValue + "%"; progress.style.height = "100%"; } const statusLabels = [ "Paket Diterima", "Sedang Diproses", "Dalam Perjalanan", "Tiba di Tujuan" ]; status.textContent = statusLabels[index]; if (index === stations.length – 1) { const finalTimer = setTimeout(function () { stations[index].classList.remove("current"); stations[index].classList.add("completed"); status.textContent = "Pengiriman Selesai"; }, 1200); animationTimers.push(finalTimer); } } /* ========================================================= START TRACKING ========================================================= */ function startTracking() { const resi = input.value.trim().toUpperCase(); error.classList.remove("show"); if (!resi) { showError(); return; } if (resi !== VALID_RESI) { showError(); return; } clearTimers(); tracking.classList.add("is-loading"); button.disabled = true; result.classList.remove("show"); const loadingTimer = setTimeout(function () { tracking.classList.remove("is-loading"); button.disabled = false; resultResi.textContent = resi; result.classList.add("show"); resetTracking(); /* ===================================================== STATION 1 — SERANG ===================================================== */ const stationOne = setTimeout(function () { setStation(0); }, 300); /* ===================================================== STATION 2 — CIKANDE ===================================================== */ const stationTwo = setTimeout(function () { setStation(1); }, 1800); /* ===================================================== STATION 3 — TANGERANG ===================================================== */ const stationThree = setTimeout(function () { setStation(2); }, 3300); /* ===================================================== STATION 4 — JAKARTA ===================================================== */ const stationFour = setTimeout(function () { setStation(3); }, 4800); animationTimers.push( stationOne, stationTwo, stationThree, stationFour ); }, 850); animationTimers.push(loadingTimer); } /* ========================================================= TRACK BUTTON ========================================================= */ button.addEventListener( "click", startTracking ); /* ========================================================= ENTER KEY ========================================================= */ input.addEventListener( "keydown", function (event) { if (event.key === "Enter") { event.preventDefault(); startTracking(); } } ); /* ========================================================= CLEAR ========================================================= */ clearButton.addEventListener( "click", function () { input.value = ""; error.classList.remove("show"); result.classList.remove("show"); resetTracking(); input.focus(); } ); /* ========================================================= EXAMPLE RESI ========================================================= */ demoResi.addEventListener( "click", function () { input.value = VALID_RESI; error.classList.remove("show"); input.focus(); } ); /* ========================================================= RESPONSIVE RESIZE ========================================================= */ window.addEventListener( "resize", function () { const currentStation = tracking.querySelector( ".express-station.current" ); if (!currentStation) { return; } const currentIndex = Number( currentStation.dataset.index ); const progressValue = (currentIndex / (stations.length – 1)) * 100; if (window.innerWidth <= 700) { progress.style.width = "100%"; progress.style.height = progressValue + "%"; } else { progress.style.width = progressValue + "%"; progress.style.height = "100%"; } } ); /* ========================================================= INITIAL STATE ========================================================= */ resetTracking(); });