From e668be330556a9b4183a8ff03f4b511efbf966a1 Mon Sep 17 00:00:00 2001
From: Natasha Moongrave <natasha@256phi.eu>
Date: Wed, 22 Apr 2026 12:12:53 +0200
Subject: Updated color scheme

---
 src/style.css | 494 ++++++++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 448 insertions(+), 46 deletions(-)

(limited to 'src/style.css')

diff --git a/src/style.css b/src/style.css
index 7ca9c16..34fda5e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,18 +1,44 @@
 :root {
-  --navy: #0b1233;
-  --gold: #C9A84C;
-  --text: #EAE5DA;
-  --muted: #141933;
+  /* DUMUN 27 palette */
+  --lavender: #AFC6FF;
+  --blue:     #9ED9F7;
+  --mint:     #A0E6E4;
+  --teal:     #A8F0E6;
+
+  /* neutrals */
+  --ink:      #1a2238;
+  --ink-soft: #4a5270;
+  --paper:    #ffffff;
+  --paper-2:  #f6f8ff;
+
+  /* brand accent (mid of palette) */
+  --accent:   #7ab7e8;
+  --accent-2: #8ba7ff;
+
+  /* gradients from the design doc */
+  --grad-upright:  linear-gradient(180deg,
+                    var(--lavender) 0%,
+                    var(--blue)     40%,
+                    var(--mint)     75%,
+                    var(--teal)    100%);
+  --grad-sideways: linear-gradient(110deg,
+                    var(--lavender) 0%,
+                    var(--blue)     40%,
+                    var(--mint)     75%,
+                    var(--teal)    100%);
 
   --serif: 'Cormorant Garamond', serif;
-  --sans: 'DM Sans', sans-serif;
+  --sans:  'DM Sans', sans-serif;
 }
 
+* { box-sizing: border-box; }
+
 body {
   margin: 0;
   font-family: var(--sans);
-  background: var(--navy);
-  color: var(--text);
+  background: var(--paper);
+  color: var(--ink);
+  line-height: 1.6;
 }
 
 /* NAV */
@@ -24,154 +50,510 @@ nav {
   position: fixed;
   width: 100%;
   box-sizing: border-box;
-  background: rgba(from var(--navy) r g b / 0.9);
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(26, 34, 56, 0.06);
+  z-index: 50;
+  transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+
+nav.scrolled {
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 2px 20px rgba(26, 34, 56, 0.06);
+}
+
+.nav-logo {
+  font-family: var(--serif);
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--ink);
+  text-decoration: none;
+  letter-spacing: 0.02em;
+}
+
+.nav-logo span {
+  background: var(--grad-sideways);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  margin-left: 0.3rem;
+  font-weight: 600;
 }
 
 .nav-links {
   display: flex;
-  gap: 1.5rem;
+  gap: 1.75rem;
   list-style: none;
+  margin: 0;
+  padding: 0;
+  align-items: center;
 }
 
 .nav-links a {
-  color: var(--text);
+  color: var(--ink-soft);
   text-decoration: none;
+  font-size: 0.95rem;
+  transition: color 0.2s ease;
+}
+
+.nav-links a:hover {
+  color: var(--ink);
 }
 
 .nav-cta {
-  border: 1px solid var(--gold);
-  padding: 5px 10px;
+  border: 1px solid transparent;
+  padding: 8px 16px;
+  border-radius: 999px;
+  background: var(--grad-sideways);
+  color: var(--ink) !important;
+  font-weight: 500;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.nav-cta:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(138, 167, 255, 0.35);
 }
 
 .nav-toggle {
   display: none;
   cursor: pointer;
+  font-size: 1.4rem;
 }
 
 /* HERO */
 #hero {
+  position: relative;
   height: 100vh;
+  min-height: 640px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
+  overflow: hidden;
+  color: var(--ink);
+}
+
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  background: var(--grad-upright);
+  z-index: 0;
+}
+
+/* soft blur blobs for depth on the gradient */
+.hero-bg::before,
+.hero-bg::after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.7;
+}
+
+.hero-bg::before {
+  width: 520px;
+  height: 520px;
+  background: var(--lavender);
+  top: -120px;
+  left: -120px;
+}
+
+.hero-bg::after {
+  width: 620px;
+  height: 620px;
+  background: var(--teal);
+  bottom: -180px;
+  right: -180px;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+  padding: 0 1.5rem;
+}
+
+.hero-eyebrow {
+  font-size: 0.85rem;
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  color: var(--ink-soft);
+  margin-bottom: 1.5rem;
 }
 
 .hero-title {
   font-family: var(--serif);
-  font-size: 5rem;
+  font-size: 6rem;
+  line-height: 0.95;
+  margin: 0 0 1.5rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
 }
 
 .hero-title em {
-	color: var(--gold);
-	font-weight: 600;
+  font-style: normal;
+  font-weight: 700;
+  background: linear-gradient(110deg, #6e8fff 0%, #3fa8d6 55%, #4fb8a8 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.hero-subtitle {
+  font-family: var(--serif);
+  font-size: 1.6rem;
+  font-style: italic;
+  color: var(--ink);
+  margin: 0 0 0.5rem;
+}
+
+.hero-date {
+  font-size: 0.95rem;
+  letter-spacing: 0.08em;
+  color: var(--ink-soft);
+  margin: 0;
+}
+
+.hero-actions {
+  display: inline-flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 1rem;
 }
 
 /* BUTTONS */
-.btn-primary {
-  background: var(--gold);
-  border: 1px solid var(--gold);
-  padding: 10px 20px;
+.btn-primary,
+.btn-outline {
+  display: inline-block;
+  padding: 12px 26px;
+  border-radius: 999px;
   text-decoration: none;
-  color: black;
+  font-weight: 500;
+  font-size: 0.95rem;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.btn-primary {
+  background: var(--grad-sideways);
+  color: var(--ink);
+  border: 1px solid transparent;
+  box-shadow: 0 8px 24px rgba(138, 167, 255, 0.35);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 30px rgba(138, 167, 255, 0.5);
 }
 
 .btn-outline {
-  border: 1px solid white;
-  padding: 10px 20px;
-  text-decoration: none;
-  color: white;
+  border: 1px solid var(--ink);
+  color: var(--ink);
+  background: transparent;
+}
+
+.btn-outline:hover {
+  background: var(--ink);
+  color: var(--paper);
 }
 
-/* GRID */
+/* GRID / SECTIONS */
 .container {
   max-width: 1100px;
   margin: auto;
-  padding: 3rem 1rem;
+  padding: 5rem 1.5rem;
+}
+
+section {
+  position: relative;
+}
+
+#about {
+  background: var(--paper);
+}
+
+#committees {
+  background: var(--paper-2);
+}
+
+#members {
+  background: var(--paper);
+}
+
+#instagram {
+  background: var(--paper-2);
+  text-align: center;
+}
+
+#sponsors {
+  background: var(--paper);
+  text-align: center;
+}
+
+.section-label {
+  font-size: 0.8rem;
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 0.75rem;
+  font-weight: 500;
+}
+
+.section-title {
+  font-family: var(--serif);
+  font-size: 2.75rem;
+  line-height: 1.1;
+  margin: 0 0 1.5rem;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.section-title em {
+  font-style: normal;
+  background: var(--grad-sideways);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  font-weight: 700;
+}
+
+.section-desc {
+  color: var(--ink-soft);
+  font-size: 1.05rem;
+  max-width: 55ch;
+}
+
+/* ABOUT */
+.about-grid {
+  display: grid;
+  grid-template-columns: 1.1fr 0.9fr;
+  gap: 3rem;
+  align-items: center;
+}
+
+.about-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.stat-box {
+  padding: 1.75rem 1.25rem;
+  border-radius: 18px;
+  background: var(--grad-upright);
+  color: var(--ink);
+  text-align: center;
+  font-size: 0.9rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  box-shadow: 0 10px 30px rgba(138, 167, 255, 0.2);
+}
+
+.stat-box span {
+  display: block;
+  font-family: var(--serif);
+  font-size: 2.4rem;
+  font-weight: 700;
+  text-transform: none;
+  letter-spacing: normal;
+  margin-bottom: 0.25rem;
 }
 
+/* COMMITTEES */
 .committees-grid,
 .members-grid {
   display: grid;
-  gap: 1rem;
+  gap: 1.25rem;
 }
 
 .committees-grid {
-  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  margin-top: 2.5rem;
+}
+
+.committee-card {
+  text-align: center;
+  padding: 2rem 1.25rem;
+  background: var(--paper);
+  border: 1px solid rgba(26, 34, 56, 0.08);
+  border-radius: 18px;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+}
+
+.committee-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--grad-sideways);
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  z-index: 0;
+}
+
+.committee-card > * {
+  position: relative;
+  z-index: 1;
+}
+
+.committee-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 16px 36px rgba(138, 167, 255, 0.25);
+  border-color: transparent;
+}
+
+.committee-card:hover::before {
+  opacity: 0.35;
+}
+
+.committee-card h3 {
+  font-family: var(--serif);
+  font-size: 1.35rem;
+  margin: 0 0 0.5rem;
+  color: var(--ink);
 }
 
+.committee-card p {
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 0.95rem;
+}
+
+/* MEMBERS */
 .members-grid {
-  grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  margin-top: 2.5rem;
 }
 
 .members-grid-2 {
   grid-template-columns: repeat(2, 1fr);
-  max-width: 400px;
-  margin: 0 auto 2rem;
+  max-width: 460px;
+  margin: 2.5rem auto 3rem;
 }
 
 .members-grid-4 {
   grid-template-columns: repeat(4, 1fr);
 }
 
-.committee-card {
-	text-align: center;
-}
-
-/* MEMBER */
 .member-card {
   text-align: center;
 }
 
 .member-avatar {
-  width: 100px;
-  height: 100px;
+  width: 140px;
+  height: 140px;
   border-radius: 50%;
   overflow: hidden;
-  margin: 0 auto;
+  margin: 0 auto 1rem;
+  padding: 3px;
+  background: var(--grad-sideways);
+  box-shadow: 0 10px 24px rgba(138, 167, 255, 0.25);
 }
 
 .member-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  border-radius: 50%;
+  background: var(--paper);
+}
+
+.member-card h3 {
+  font-family: var(--serif);
+  font-size: 1.1rem;
+  margin: 0 0 0.2rem;
+  color: var(--ink);
+}
+
+.member-card p {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--ink-soft);
+  letter-spacing: 0.05em;
 }
 
 /* INSTAGRAM */
 .insta-grid {
   display: grid;
-  grid-template-columns: repeat(3,1fr);
-  gap: 5px;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  margin: 2rem 0;
+  border-radius: 18px;
+  overflow: hidden;
 }
 
 .insta-grid img {
   width: 100%;
+  display: block;
+  aspect-ratio: 1;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.insta-grid img:hover {
+  transform: scale(1.03);
 }
 
 /* SPONSORS */
 .sponsors-row {
   display: flex;
-  gap: 1rem;
+  gap: 1.5rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 2rem;
 }
 
 .sponsor-box {
-  border: 1px solid var(--gold);
-  padding: 1rem;
+  border: 1px solid rgba(26, 34, 56, 0.12);
+  padding: 1.5rem 2.5rem;
+  border-radius: 14px;
+  color: var(--ink-soft);
+  background: var(--paper);
+  transition: border-color 0.25s ease, color 0.25s ease;
 }
 
+.sponsor-box:hover {
+  border-color: var(--accent);
+  color: var(--ink);
+}
+
+/* FOOTER */
 footer {
   width: 100%;
   text-align: center;
+  padding: 2rem 1rem;
+  background: var(--ink);
+  color: var(--paper-2);
+  font-size: 0.9rem;
+  position: relative;
+}
+
+footer::before {
+  content: "";
+  display: block;
+  height: 3px;
+  width: 100%;
+  background: var(--grad-sideways);
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 /* MOBILE */
-@media(max-width: 900px) {
+@media (max-width: 900px) {
   .nav-links {
     display: none;
     flex-direction: column;
     position: absolute;
+    top: 100%;
     right: 0;
-    background: var(--navy);
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(12px);
+    padding: 1.5rem 2rem;
+    border-radius: 0 0 0 18px;
+    box-shadow: 0 12px 30px rgba(26, 34, 56, 0.1);
   }
 
   .nav-links.open {
@@ -181,4 +563,24 @@ footer {
   .nav-toggle {
     display: block;
   }
+
+  .hero-title {
+    font-size: 4rem;
+  }
+
+  .section-title {
+    font-size: 2rem;
+  }
+
+  .about-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .members-grid-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .insta-grid {
+    grid-template-columns: 1fr;
+  }
 }
-- 
cgit v1.2.3