/* ============================================================ UNDHI Homepage — Global Stylesheet Dipisah dari index.php untuk performa lebih baik (browser cache) ============================================================ */ /* Font dimuat via di — jangan @import di sini */ /* ── Base Reset ─────────────────────────────────────────── */ html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100vw; scroll-behavior: smooth; } * { box-sizing: border-box; transition: background-color .3s ease, color .3s ease; } /* ── Page sections (SPA show/hide) ──────────────────────── */ .page-content { display: none; margin: 0; padding: 0; } .page-content.active { display: block; animation: fadeIn .5s ease; margin: 0; padding: 0; } #main-content, main { margin: 0; padding: 0; width: 100%; overflow-x: hidden; } /* ── Animations ─────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes blob { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-50px) scale(1.1); } 66% { transform: translate(-20px,20px) scale(0.9); } } .animate-slide-in-up { animation: slideInUp .6s ease-out; } .animate-blob { animation: blob 7s infinite; } .animation-delay-2000 { animation-delay: 2s; } .animation-delay-4000 { animation-delay: 4s; } /* ── Cards ──────────────────────────────────────────────── */ .card { transition: transform .3s ease, box-shadow .3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); } /* ── Hero Slider ────────────────────────────────────────── */ .hero-slide { opacity: 0; transition: opacity 1s ease-in-out; position: absolute; top:0; left:0; width:100%; height:100%; } .hero-slide.active { opacity: 1; z-index: 1; } .hero-slide svg { max-width: 100%; height: auto; } /* ── Tabs ────────────────────────────────────────────────── */ .tab-content { display: none; animation: fadeIn .5s ease; } .tab-content.active { display: block; } /* ── Mega Menu ──────────────────────────────────────────── */ .mega-menu { opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s ease, transform .3s ease, visibility .3s; max-width: 100vw; } .menu-item:hover .mega-menu { opacity:1; visibility:visible; transform:translateY(0); } /* ── News Cards ─────────────────────────────────────────── */ .news-card { position: relative; overflow: hidden; } .news-card::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 100%); opacity:0; transition:opacity .3s ease; z-index:10; pointer-events:none; } .news-card:hover::before { opacity: 1; } .group img { transition: transform .5s cubic-bezier(.23,1,.32,1); } .group:hover img { transform: scale(1.1); } /* ── Utilities ──────────────────────────────────────────── */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .scrollbar-hide { -ms-overflow-style:none; scrollbar-width:none; } .scrollbar-hide::-webkit-scrollbar { display:none; } /* ── Scrollbar ──────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; } .dark ::-webkit-scrollbar-track { background: #1f2937; } .dark ::-webkit-scrollbar-thumb { background: #4b5563; } .dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* ── Dark Mode ──────────────────────────────────────────── */ .dark input::placeholder, .dark textarea::placeholder, .dark select { color: #9ca3af; } .dark .fa-search { color: #9ca3af; } .dark input[type="text"], .dark input[type="email"], .dark input[type="tel"], .dark input[type="password"], .dark textarea, .dark select { background-color: #374151; color: #f3f4f6; border-color: #4b5563; } .dark input[type="text"]:focus, .dark input[type="email"]:focus, .dark input[type="tel"]:focus, .dark input[type="password"]:focus, .dark textarea:focus, .dark select:focus { background-color: #1f2937; color: #f3f4f6; border-color: #0284c7; } .dark h2,.dark h3,.dark h4,.dark h5,.dark h6 { color: #f3f4f6; } .dark p { color: #d1d5db; } .dark table th, .dark table td { color: #f3f4f6; } .dark table thead { background-color: #374151; color: #f3f4f6; } .dark table tbody tr:nth-child(odd) { background-color: #1f2937; } .dark table tbody tr:nth-child(even) { background-color: #111827; } .dark .org-position { background-color: #374151; color: #f3f4f6; } /* ── Bottom Nav Active ──────────────────────────────────── */ .bottom-nav-item.active { background: rgba(255,255,255,.25) !important; border-radius: .5rem; } .bottom-nav-item.active i, .bottom-nav-item.active span { color: #fff !important; } /* ── Mobile Accordion ───────────────────────────────────── */ .mobile-accordion .fa-chevron-down { transition: transform .3s ease; } .mobile-accordion .fa-chevron-up { transform: rotate(180deg); } /* ── Org Chart ──────────────────────────────────────────── */ .org-chart { display:flex; flex-direction:column; align-items:center; } .org-level { display:flex; justify-content:center; margin:20px 0; flex-wrap:wrap; } .org-node { margin:0 15px; padding:10px; text-align:center; position:relative; } .org-position { font-weight:bold; background-color:#f3f4f6; color:#1f2937; padding:5px 10px; border-radius:5px; } .org-name { margin-top:5px; font-size:.9em; } /* ── Chat widget ─────────────────────────────────────────── */ @media (min-width: 1024px) { #chat-widget, #open-chat { bottom: 24px !important; } #chat-popup { bottom: 112px !important; } } /* ── Hapus gap antara konten dan footer ─────────────────── */ #main-content { margin-bottom: 0 !important; padding-bottom: 0 !important; } #main-content + * { margin-top: 0 !important; } footer { margin-top: 0 !important; } /* ══════════════════════════════════════════════════════════ MOBILE RESPONSIVE ══════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { body { padding-bottom: 80px !important; } a, button { min-height: 44px; min-width: 44px; } } @media (max-width: 767px) { section { padding-left: 0 !important; padding-right: 0 !important; } .container { padding-left: 1rem !important; padding-right: 1rem !important; } .rounded-3xl { border-radius: 1rem !important; } .rounded-2xl { border-radius: .75rem !important; } img { max-width: 100%; height: auto; } .py-12 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } * { word-break: break-word; overflow-wrap: break-word; } #popupContent { margin: 1rem; max-width: calc(100vw - 2rem); } section.py-24, section.py-28 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } section.py-16 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .hero-announcement-mobile { padding: .75rem 1rem !important; } .campus-creativepreneur-section { padding: 1.5rem 0 !important; } .visi-misi-section { padding: 2rem 1rem !important; } #mobileMenu { overflow-y: auto; -webkit-overflow-scrolling: touch; } #popupModal .max-w-md { max-width: calc(100vw - 2rem) !important; margin: 1rem !important; } .cta-section h2 { font-size: 1.5rem !important; } .cta-section .flex { flex-direction: column !important; align-items: stretch !important; } .cta-section a { width: 100% !important; text-align: center !important; } } @media (max-width: 639px) { #program-studi .grid { grid-template-columns: 1fr !important; gap: 1rem !important; } #program-studi .py-12,#program-studi .py-16,#program-studi .py-24,#program-studi .py-28 { padding-top:2rem !important; padding-bottom:2rem !important; } #program-studi h2 { font-size: 1.75rem !important; } #program-studi .mb-12,#program-studi .mb-16,#program-studi .mb-20 { margin-bottom: 1.5rem !important; } #program-studi .flex.justify-center.flex-wrap { flex-wrap:nowrap !important; overflow-x:auto !important; justify-content:flex-start !important; padding-bottom:.5rem !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; } #program-studi .flex.justify-center.flex-wrap::-webkit-scrollbar { display:none; } #program-studi .flex.justify-center.flex-wrap button { flex-shrink:0; padding:.5rem 1rem !important; font-size:.8rem !important; } .berita-grid { grid-template-columns: 1fr !important; } .rekognisi-grid { grid-template-columns: repeat(2,1fr) !important; } .grid-cols-2, .sm\:grid-cols-2 { grid-template-columns: repeat(1,minmax(0,1fr)) !important; } } @media (max-width: 480px) { h1 { font-size: clamp(1.5rem,6vw,2rem) !important; } h2 { font-size: clamp(1.25rem,5vw,1.75rem) !important; } h3 { font-size: clamp(1rem,4vw,1.25rem) !important; } p { font-size: clamp(.875rem,3.5vw,1rem) !important; } }