NGU-Web/src/index.css

@import '@fontsource/montserrat/400.css';
@import '@fontsource/montserrat/600.css';
@import '@fontsource/poppins/400.css';
@import '@fontsource/poppins/600.css';

@import 'tailwindcss';

@theme {
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Montserrat', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #ffffff;
  color: #073d4a;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
}

/* Gradient utilities */
.grad-brand {
  background: linear-gradient(135deg, #073d4a 0%, #138ba0 45%, #10d48a 100%);
}

.grad-brand-light {
  background: linear-gradient(135deg, #0a5260 0%, #17aac4 50%, #00e676 100%);
}

.grad-dark {
  background: linear-gradient(135deg, #042f3a 0%, #073d4a 60%, #0a5260 100%);
}

.grad-hero-text {
  background: linear-gradient(90deg, #88b668 0%, #008fa8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Scrollbar hide */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(19, 139, 160, 0.4); border-radius: 3px; }

/* Float animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

.float-anim { display: inline-block; animation: float 4s ease-in-out infinite; will-change: transform;}


.ig-icon { fill: currentColor; transition: fill 200ms ease; }
.ig-link:hover .ig-icon { fill: var(--ig-fill); }
.footer-icons:hover .ig-icon { fill: var(--ig-fill); }
.fb-icon:hover { fill: #0862f7; }
.ds-icon:hover { fill: #5865f1; }


/* Event Card Section */
.ev-card {
  container-type: inline-size;
}
 
.ev-grid {
  display: grid;
  gap: 0.25rem 1.5rem;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "ngu   image"
    "info  image"
    "desc  desc";
}
 
.ev-ngu {
  grid-area: ngu;
}
 
.ev-info {
  grid-area: info;
}
 
.ev-image {
  grid-area: image;
  justify-self: stretch;
  align-self: center;
  max-height: 11rem;
}
 
.ev-desc {
  grid-area: desc;
  margin-top: 1rem;
}
 
@container (max-width: 30rem) {
  .ev-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "ngu"
      "info"
      "desc";
  }
 
  .ev-grid .ev-image {
    justify-self: start;
    width: auto;
    max-height: 7rem;
    margin-bottom: 0.5rem;
  }
}
 
/* ═══════════════════════════════════════════════════════════════
   SKELETON
   Holds roughly a card's height so the page doesn't jump when the
   data arrives. The shimmer is decoration, so it goes away for
   anyone who has asked for less motion.
   ═══════════════════════════════════════════════════════════════ */

.skeleton {
  border-radius: 1.5rem;
  min-height: 22rem;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.04) 30%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.04) 70%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
} 

/* ═══════════════════════════════════════════════════════════════
   UNITY REGIONS
   Append to index.css. Scoped to .ur- so nothing here reaches the
   rest of the site.
   ═══════════════════════════════════════════════════════════════ */

/* The 0fr → 1fr grid row animates to the panel's real height, so
   nobody has to guess a max-height that's wrong the moment a
   region's description grows. The inline style sets the value;
   this sets how it moves. */
.ur-panel {
  display: grid;
  transition: grid-template-rows 300ms ease;
}

.ur-chevron {
  transition: transform 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .ur-panel,
  .ur-chevron {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ORGANIZATION LIST
   Append to index.css. Scoped to .ol- so nothing here reaches the
   rest of the site.
   ═══════════════════════════════════════════════════════════════ */

/* The 0fr → 1fr grid row animates to the panel's real height, so
   nobody has to guess a max-height that's wrong the moment a
   description grows. The inline style sets the value; this sets
   how it moves. */
.ol-panel {
  display: grid;
  transition: grid-template-rows 300ms ease;
}

.ol-chevron {
  transition: transform 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .ol-panel,
  .ol-chevron {
    transition: none;
  }
}