forked from izu/student-web-if-development-kit
Andrie
70 lines
1.8 KiB
CSS
70 lines
1.8 KiB
CSS
@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; } }
|