/* ===================================================== ACAAB – Prestasi & Karya Mahasiswa Custom styles yang tidak dicakup output.css ===================================================== */ /* Cegah horizontal scroll tanpa clip full-bleed */ body { overflow-x: hidden; } /* --- Full-bleed: section keluar dari container prose --- */ .acaab-full-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* --- Sembunyikan scrollbar carousel tapi tetap scrollable --- */ .acaab-hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .acaab-hide-scrollbar::-webkit-scrollbar { display: none; } /* --- Card ukuran responsif di carousel --- */ .acaab-proj-card { width: 80vw; flex-shrink: 0; scroll-snap-align: start; } @media (min-width: 768px) { .acaab-proj-card { width: 44vw; } } @media (min-width: 1024px) { .acaab-proj-card { width: 30vw; } } /* --- Snap scroll carousel --- */ .acaab-carousel-track { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } /* --- Animasi fade-in untuk cards --- */ @keyframes acaab-fade-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .acaab-fade-in { animation: acaab-fade-in 0.35s ease both; } /* --- Badge level warna --- */ .acaab-badge-intl { background-color: #ca8a04; color: #fff; } .acaab-badge-nasional { background-color: #1d4ed8; color: #fff; } .acaab-badge-regional { background-color: #64748b; color: #fff; } /* --- Skeleton loading --- */ .acaab-skeleton { background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; animation: acaab-skeleton-pulse 1.5s infinite; border-radius: 0.5rem; } @keyframes acaab-skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* --- Modal backdrop --- */ .acaab-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; } /* --- Scroll lock saat modal terbuka --- */ body.acaab-modal-open { overflow: hidden; } /* --- Stats grid: divider vertikal di desktop --- */ @media (min-width: 768px) { .acaab-stats-grid { grid-template-columns: 1fr 1px 1fr 1px 1fr; } } /* --- Line clamp (browser lama) --- */ .acaab-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .acaab-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* --- Achievement card --- */ .acaab-ach-card { position: relative; background: white; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); border: 1px solid #e2e8f0; display: flex; flex-direction: column; height: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease; } .acaab-ach-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.08); } .acaab-ach-top-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #003150; z-index: 10; transition: background 0.25s ease; } .acaab-ach-card:hover .acaab-ach-top-bar { background: #feb401; } .acaab-ach-card:hover .acaab-card-title { color: #1e40af; } .acaab-card-title { transition: color 0.2s ease; } .acaab-ach-read-btn:hover { background: #003150 !important; color: white !important; } /* --- Project card wrapper --- */ .acaab-proj-card-wrap { position: relative; background: white; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); border: 1px solid #e2e8f0; display: flex; flex-direction: column; flex-shrink: 0; transition: box-shadow 0.3s ease; } .acaab-proj-card-wrap:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.12); } .acaab-proj-left-bar { position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: #feb401; z-index: 10; transform-origin: bottom; transition: transform 0.3s ease; } .acaab-proj-card-wrap:hover .acaab-proj-left-bar { transform: scaleY(1.08); } .acaab-proj-card-wrap:hover .acaab-card-img { transform: scale(1.05); } /* --- Card image zoom --- */ .acaab-card-img { transition: transform 0.5s ease; } /* --- Stats grid dividers responsive --- */ .acaab-stat-vdivider { display: none; } @media (min-width: 768px) { .acaab-stat-vdivider { display: flex; } .acaab-stat-hdivider { display: none; } } /* --- Filter focus --- */ #acaab-ach-filters input:focus, #acaab-ach-filters select:focus, #acaab-proj-filters input:focus, #acaab-proj-filters select:focus { outline: 2px solid #003150; outline-offset: 1px; border-color: #003150; } /* --- CTA inner layout: stacked mobile → row desktop --- */ .acaab-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; } @media (min-width: 768px) { .acaab-cta-inner { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: 3rem; } } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { .acaab-fade-in, .acaab-skeleton, .acaab-card-img, .acaab-ach-card, .acaab-proj-card-wrap { animation: none !important; transition: none !important; } }