feat(acaab): implementasi halaman prestasi & karya mahasiswa

2026-05-29 10:30:26 +07:00
parent 0ebc25809b
commit b8099c1dca
33 changed files with 5301 additions and 51 deletions
@@ -0,0 +1,69 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto:wght@300;400;500;700&family=Merriweather:wght@700;900&display=swap');
+@import "tailwindcss";
+
+/* Break out of the kit's container to go full-width */
+.acaab-full-bleed {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+}
+
+body { overflow-x: hidden; }
+
+@theme {
+  --font-sans: "Roboto", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Roboto Condensed", sans-serif;
+  --font-serif: "Merriweather", ui-serif, Georgia, serif;
+  
+  --color-untan-navy: #003150;
+  --color-untan-yellow: #feb401;
+  --color-untan-blue: #1e40af;
+  --color-primary-navy: #003150;
+  --color-primary-gold: #feb401;
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: #ffffff;
+  color: #334155;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+}
+
+/* Hide scrollbar for carousel while keeping scroll functionality */
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Fade-in animation for dynamically loaded cards */
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(16px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in {
+  animation: fade-in 0.4s ease both;
+}
+
+/* Explicitly scan all component files so arbitrary Tailwind classes compile */
+@source "./**/*.tsx";
+
+/* Stats bar 3-column layout (replaces md:grid-cols-[1fr_auto_1fr_auto_1fr]) */
+@media (min-width: 768px) {
+  .stats-grid {
+    grid-template-columns: 1fr auto 1fr auto 1fr;
+  }
+}
+
+/* Project carousel card widths (replaces w-[85vw] md:w-[60vw] lg:w-[38vw]) */
+.proj-card { width: 75vw; }
+@media (min-width: 768px)  { .proj-card { width: 42vw; } }
+@media (min-width: 1024px) { .proj-card { width: 28vw; } }