@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"); /* global */ p { color: black; } .dark p { color: lightgrey; } /* Preloader styles */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f9fafb; /* default light */ z-index: 9999; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } /* Dark mode override (if Tailwind 'dark' class is on or ) */ .dark .preloader { background-color: #111827; /* dark gray */ } .loading-spinner { width: 50px; height: 50px; border: 5px solid #e5e7eb; /* Light border */ border-top: 5px solid #3b82f6; /* Blue highlight */ border-radius: 50%; animation: spin 1s linear infinite; transition: border 0.3s ease; } /* Spinner color switch for dark mode */ .dark .loading-spinner { border: 5px solid #3b82f6; border-top: 5px solid #e5e7eb; } /* Spinner animation */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body { font-family: "Poppins", sans-serif; transition: all 0.3s ease; line-height: 1.6; } @media (min-width: 640px) { } @media (min-width: 768px) { } @media (min-width: 1024px) { } @media (min-width: 1280px) { } /* Custom animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in-down { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-down { animation: fade-in-down 0.3s ease-out forwards; } /* Carousel support */ .carousel-slide { display: none; } .carousel-slide.active { display: block; animation: fadeIn 0.5s ease-in; } .carousel-indicator.active { background-color: #3b82f6; } /* Partner Section */ .scroll-container { width: 100%; overflow: hidden; position: relative; } .scroll-track { display: flex; width: max-content; animation: scroll-left 15s linear infinite; } @keyframes scroll-left { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } .partner-card { background-color: #f9fafb; border-radius: 0.75rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); display: flex; align-items: center; justify-content: center; min-width: 180px; min-height: 120px; margin-right: 1.5rem; padding: 1rem; flex-shrink: 0; } .dark .partner-card { background-color: #f9fafb; } .partner-logo { height: 60px; object-fit: contain; transition: transform 0.3s ease, filter 0.3s ease; } .partner-logo:hover { transform: scale(1.05); filter: grayscale(0%) brightness(1.1); } @media (min-width: 768px) { .partner-logo { height: 80px; } } @media (min-width: 1024px) { .partner-logo { height: 80px; } } /* Project Section */ @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .project-card { animation: fadeInUp 0.4s ease both; } /* Navigation underline */ .nav-link::after { content: ""; display: block; width: 0; height: 3px; background: #3b82f6; transition: width 0.3s ease-in-out; margin-top: 0.5rem; } .nav-link:hover::after { width: 100%; } .nav-link.active { color: #3b82f6; font-weight: bold; } .dark .nav-link.active { color: #3b82f6; font-weight: bold; } .flip-card { perspective: 1000px; } .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { backface-visibility: hidden; position: absolute; width: 100%; height: 100%; border-radius: 1rem; } .flip-card-back { transform: rotateY(180deg); } @keyframes blob { 0%, 100% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } } .animate-blob { animation: blob 8s infinite ease-in-out; } .animation-delay-2000 { animation-delay: 2s; } .animation-delay-4000 { animation-delay: 4s; } .flip-card { perspective: 1000px; } .flip-card-inner { transition: transform 0.6s; transform-style: preserve-3d; width: 100%; height: 100%; position: relative; } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .flip-card-back { transform: rotateY(180deg); } /* FAQ */ .rotate-180 { transform: rotate(180deg); } /* Map Kontak */ #map.leaflet-container { pointer-events: none; } #map.active.leaflet-container { pointer-events: auto; } /* Turunkan z-index dari leaflet container */ #map { z-index: 0 !important; } .custom-marker { position: relative; width: 20px; height: 20px; background-color: #2563eb; /* Biru */ border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 rgba(37, 99, 235, 0.4); animation: pulse-blue 2s infinite; } .custom-marker.green { background-color: #16a34a; /* Hijau */ box-shadow: 0 0 0 rgba(22, 163, 74, 0.4); animation: pulse-green 2s infinite; } @keyframes pulse-blue { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); } 70% { box-shadow: 0 0 0 20px rgba(37, 99, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } } @keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); } 70% { box-shadow: 0 0 0 20px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }