push editan terbaru hasil migrasi ke index.html

2026-06-04 19:22:18 +07:00
parent 7620308dea
commit 09498578e9
5 changed files with 1478 additions and 31 deletions
@@ -0,0 +1,206 @@
+/* =====================================================
+   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; }
+}