/* assets/frontend/css/styles.css */ /* FOUC SHIELD: Pastikan background sudah benar sebelum Tailwind load. html.dark dan html:not(.dark) di-set oleh script blocking di . Rule ini sebagai safety net tanpa bergantung pada Tailwind CDN. */ html.dark, html.dark body { background-color: #020617; color-scheme: dark; } html:not(.dark), html:not(.dark) body { background-color: #ffffff; color-scheme: light; } /* === GLOBAL FONT: Poppins di seluruh elemen ================================ */ *, *::before, *::after { box-sizing: border-box; } html, body, input, textarea, select, button { font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif; } /* Mencegah horizontal scroll di mobile — cukup di scroll wrapper, bukan html/body */ html, body { max-width: 100%; } /* Summernote & konten dinamis juga pakai Poppins */ .content-html, .misi-content, .prose, [class*="ql-"], [class*="note-"] { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; } html.dark img[loading="lazy"] { filter: brightness(.95) contrast(1.02); } .slider { position: relative; } .slider .slides { transform: translateX(0); } .slider .dots button { width: 10px; height: 10px; border-radius: 9999px; border: 1px solid rgba(148,163,184,.6); } .slider .dots button[aria-current="true"] { background: #3b82f6; border-color: #3b82f6; } .container { max-width: 1100px; } .prose ol { list-style-type: decimal; margin-left: 1.25em; /* supaya ada indent */ padding-left: 1.25em; } .prose ul { list-style-type: disc; margin-left: 1.25em; padding-left: 1.25em; } .dark .prose ol, .dark .prose ul { color: rgb(226 232 240); /* text-slate-200 */ } /* GLightbox Premium Customization */ .goverlay { background: rgba(15, 23, 42, 0.9) !important; /* Deep slate background */ backdrop-filter: blur(8px); } .gprev, .gnext, .gclose { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 9999px !important; width: 52px !important; height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .gprev { left: 30px !important; } .gnext { right: 30px !important; } .gclose { top: 30px !important; right: 30px !important; } .gprev:hover, .gnext:hover, .gclose:hover { background: #3b82f6 !important; border-color: #3b82f6 !important; box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4); transform: scale(1.1); } .gprev svg, .gnext svg, .gclose svg { width: 24px !important; height: 24px !important; display: block !important; } .gslide-description { background: linear-gradient(to top, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0)) !important; backdrop-filter: blur(4px) !important; border: none !important; color: white !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 40px 20px 30px !important; text-align: center !important; bottom: 0 !important; position: absolute !important; } .gslide-title { font-weight: 800 !important; font-size: 1.25rem !important; margin-bottom: 8px !important; color: white !important; text-shadow: 0 2px 10px rgba(0,0,0,0.5); } .gslide-desc { font-size: 0.95rem !important; opacity: 0.9 !important; line-height: 1.6 !important; text-shadow: 0 1px 5px rgba(0,0,0,0.5); max-width: 700px; margin: 0 auto; } /* Loader customization */ .gloader { border-top-color: #3b82f6 !important; } /* Custom Animations */ @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin-slow 12s linear infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 5s ease-in-out infinite; } /* ===== Infografis Slider — GPU acceleration ===== */ .infografisSwiper .swiper-slide { backface-visibility: hidden; -webkit-backface-visibility: hidden; } @keyframes shimmer { 0% { transform: translateX(-100%) skewX(-15deg); } 100% { transform: translateX(200%) skewX(-15deg); } } .group:hover .animate-shimmer { animation: shimmer 1.5s ease-out forwards; } @keyframes border-beam { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-border-beam { animation: border-beam 4s linear infinite; } /* Border Beam Utility */ .border-beam-effect { position: absolute; inset: -3px; background: conic-gradient(from 0deg, transparent 60%, #3b82f6 80%, transparent 100%); border-radius: inherit; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: destination-out; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; } .group:hover .border-beam-effect { opacity: 1; animation: border-beam 3s linear infinite; }