Redesign

app/globals.css

@@ -1,68 +1,153 @@
 @import "tailwindcss";
 
+@custom-variant dark-theme (&:where(.dark-theme, .dark-theme *));
 
-:root {
-	--background: #f9fafb;
-	--foreground: #111827;
-	--font-dm-sans: "DM Sans", sans-serif;
-	--font-playfair: "Playfair Display", serif;
+@theme {
+  --color-primary: #f0f5fc;
+  --color-secondary: #d9dfe5;
+  --color-blue: #428ce2;
+  --color-green: #5dd776;
+  --color-foreground: #364f6b;
+  --color-foreground-sec: #7b899a;
+
+  --shadow-secondary-center: 0px 0px 10px 9px var(--color-secondary);
+  --shadow-bluexlrr-sm: 3px 3px 0px var(--color-blue);
+
+  --animate-slideInDown: slideInDown 0.1s ease-in-out 1;
+  --animate-page: page 1s ease-in-out 1;
+  --animate-fade-up: fadeUp 0.45s ease both;
+
+  @keyframes slideInDown {
+    0% {
+      transform: translateY(-10px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0px);
+      opacity: 1;
+    }
+  }
+
+  @keyframes page {
+    0% {
+      transform: translateY(-20px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0px);
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeUp {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes shimmer {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes pulse-dot {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.25;
+    }
+  }
 }
 
-@theme inline {
-	--color-background: var(--background);
-	--color-foreground: var(--foreground);
-
-	/* Link Tailwind to the Next.js Font Variables */
-	--font-sans: var(--font-dm-sans), ui-sans-serif, system-ui;
-	--font-serif: var(--font-playfair), ui-serif, Georgia;
+.dark-theme {
+  --color-primary: #20232c;
+  --color-secondary: #232a32;
+  --color-foreground: #a1aebd;
+  --color-foreground-sec: #7a9ab2;
 }
 
-body {
-	background: var(--background);
-	color: var(--foreground);
-	font-family: var(--font-sans);
-	-webkit-font-smoothing: antialiased;
-}
+@layer base {
+  * {
+    -webkit-tap-highlight-color: transparent;
+    -webkit-overflow-scrolling: touch;
+  }
 
-/* --- Animations --- */
+  html,
+  body {
+    height: 100%;
+  }
 
-@keyframes fadeUp {
-	from {
-		opacity: 0;
-		transform: translateY(10px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
+  h1 {
+    font-size: 26px;
+    font-weight: 500;
+  }
 
-@keyframes shimmer {
-	from {
-		background-position: 200% 0;
-	}
-	to {
-		background-position: -200% 0;
-	}
-}
+  h2 {
+    font-size: 23px;
+    font-weight: 600;
+    line-height: 250%;
+    margin-top: 10px;
+  }
 
-@keyframes pulse-dot {
-	0%,
-	100% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0.25;
-	}
+  h3 {
+    font-size: 19px;
+    font-weight: 500;
+  }
+
+  h4 {
+    letter-spacing: 4px;
+    font-weight: 600;
+  }
+
+  p {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 160%;
+  }
+
+  @media (min-width: 1000px) {
+    h1 {
+      font-size: 36px;
+      font-weight: 500;
+    }
+
+    h3 {
+      font-size: 22px;
+      line-height: 40px;
+      font-weight: 500;
+    }
+
+    p {
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 160%;
+    }
+  }
 }
 
 .animate-fade-up {
-	animation: fadeUp 0.45s ease both;
+  animation: fadeUp 0.45s ease both;
 }
 
 .skeleton {
-	background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
-	background-size: 200% 100%;
-	animation: shimmer 1.4s infinite;
-	border-radius: 8px;
+  background: linear-gradient(
+    90deg,
+    var(--color-secondary) 25%,
+    var(--color-primary) 50%,
+    var(--color-secondary) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.4s infinite;
+  border-radius: 8px;
 }