fixed homepage

Author: curleycoder

src/app/globals.css

@@ -1,56 +1,78 @@
 @import "tailwindcss";
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');
 
 :root {
   --yellow: #F9BF00;
   --yellow-dark: #E0AA00;
-  --background: #ffffff;
-  --section-bg: #ffffff;
-  --foreground: #000000;
-  --dark-text: #46505C;
-  --muted: rgba(70, 80, 92, 0.82);
-
-  --card: rgba(0, 0, 0, 0.05);
-  --card-border: rgba(0, 0, 0, 0.2);
-
-  --primary: #000000;
-  --primary-light: #000000;
-  --primary-glow: rgba(0, 0, 0, 0.1);
-  --accent: #000000;
-
-  --nav-bg-scrolled: rgba(255, 255, 255, 0.92);
-  --nav-border-color: rgba(0, 0, 0, 0.15);
-  --nav-mobile-bg: rgba(255, 255, 255, 0.98);
-  --nav-link-color: #000000;
+
+  /* ── Core palette (light) ───────────────────── */
+  --background: #f4f4f4;
+  --section-bg: #f4f4f4;
+  --foreground: #111111;
+  --dark-text: rgba(17, 17, 17, 0.62);
+  --muted: rgba(17, 17, 17, 0.55);
+
+  --card: rgba(0, 0, 0, 0.03);
+  --card-border: rgba(0, 0, 0, 0.1);
+
+  --primary: #111111;
+  --primary-light: #111111;
+  --primary-glow: rgba(0, 0, 0, 0.08);
+  --accent: #111111;
+
+  /* ── Hover / interactive ────────────────────── */
+  --hover-accent-bg: rgba(190, 0, 181, 0.04);
+  --chat-bubble-bg: rgba(0, 0, 0, 0.06);
+  --counter-color: rgba(17, 17, 17, 0.22);
+
+  /* ── Navbar ─────────────────────────────────── */
+  --nav-bg-scrolled: rgba(244, 244, 244, 0.92);
+  --nav-border-color: rgba(0, 0, 0, 0.1);
+  --nav-mobile-bg: rgba(244, 244, 244, 0.98);
+  --nav-link-color: #111111;
   --nav-link-active-bg: transparent;
-  --nav-mobile-border: rgba(0, 0, 0, 0.15);
+  --nav-mobile-border: rgba(0, 0, 0, 0.1);
 
   --input-bg: rgba(0, 0, 0, 0.05);
   --arrow-bg: transparent;
-  --arrow-color: #000000;
+  --arrow-color: #111111;
 }
 
-[data-theme="light"],
-[data-theme="dark"] {
-  --background: #ffffff;
-  --section-bg: #ffffff;
-  --foreground: #000000;
-  --card: rgba(0, 0, 0, 0.05);
-  --card-border: rgba(0, 0, 0, 0.2);
-  --muted: rgba(70, 80, 92, 0.82);
-  --primary: #000000;
-  --primary-light: #000000;
-  --primary-glow: rgba(0, 0, 0, 0.1);
-  --accent: #000000;
-  --nav-bg-scrolled: rgba(255, 255, 255, 0.92);
-  --nav-border-color: rgba(0, 0, 0, 0.15);
-  --nav-mobile-bg: rgba(255, 255, 255, 0.98);
-  --nav-link-color: #000000;
-  --nav-link-active-bg: transparent;
-  --nav-mobile-border: rgba(0, 0, 0, 0.15);
-  --input-bg: rgba(0, 0, 0, 0.05);
-  --arrow-bg: transparent;
-  --arrow-color: #000000;
+html.dark {
+  /* ── Core palette (dark) ────────────────────── */
+  --background: #0a0a0a;
+  --section-bg: #0a0a0a;
+  --foreground: #ededed;
+  --dark-text: rgba(237, 237, 237, 0.58);
+  --muted: rgba(237, 237, 237, 0.32);
+
+  --card: rgba(255, 255, 255, 0.03);
+  --card-border: rgba(255, 255, 255, 0.08);
+
+  --primary: #ededed;
+  --primary-light: #ededed;
+  --primary-glow: rgba(255, 255, 255, 0.06);
+  --accent: #ededed;
+
+  /* ── Hover / interactive ────────────────────── */
+  --hover-accent-bg: rgba(190, 0, 181, 0.07);
+  --chat-bubble-bg: rgba(255, 255, 255, 0.07);
+  --counter-color: rgba(237, 237, 237, 0.22);
+
+  /* ── Navbar ─────────────────────────────────── */
+  --nav-bg-scrolled: rgba(10, 10, 10, 0.92);
+  --nav-border-color: rgba(255, 255, 255, 0.08);
+  --nav-mobile-bg: rgba(10, 10, 10, 0.98);
+  --nav-link-color: #ededed;
+  --nav-mobile-border: rgba(255, 255, 255, 0.08);
+
+  --input-bg: rgba(255, 255, 255, 0.07);
+  --arrow-color: #ededed;
+}
+
+@keyframes moonblink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.25; }
 }
 
 * {
@@ -62,13 +84,14 @@
 html {
   scroll-behavior: smooth;
   height: 100%;
-  background: #ffffff;
+  background: var(--background);
+  transition: background 0.5s ease;
 }
 
 body {
-  background-color: #ffffff;
+  background-color: var(--background);
   color: var(--foreground);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
+  font-family: 'Lora', Georgia, serif;
   line-height: 1.6;
   min-height: 100vh;
   height: 100%;
@@ -85,11 +108,11 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background: #ffffff;
+  background: var(--background);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #000000;
+  background: var(--card-border);
   border-radius: 3px;
 }
 
@@ -117,26 +140,28 @@ img {
 h1,
 h2,
 h3 {
-  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
-  font-weight: 400;
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 800;
 }
 
 /* ─── Typography ─────────────────────────────────────────────────────────── */
 
 .display-title {
-  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
-  font-size: clamp(4.6rem, 12vw, 10.5rem);
-  line-height: 0.9;
-  letter-spacing: 0.025em;
-  color: #000000;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: clamp(2.5rem, 7vw, 6rem);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  color: var(--foreground);
   text-transform: uppercase;
 }
 
 .display-subtitle {
-  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
-  font-size: clamp(1.35rem, 3vw, 2.65rem);
-  line-height: 1.05;
-  letter-spacing: 0.035em;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: clamp(1rem, 2.5vw, 1.75rem);
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
   color: var(--dark-text);
   text-transform: uppercase;
 }
@@ -216,19 +241,20 @@ h3 {
 /* ─── Section helpers ────────────────────────────────────────────────────── */
 
 .section-title {
-  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
-  font-size: clamp(3rem, 8vw, 7rem);
-  line-height: 0.9;
-  letter-spacing: 0.02em;
-  color: #000000;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: clamp(2rem, 6vw, 5rem);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  color: var(--foreground);
   text-transform: uppercase;
 }
 
 .section-subtitle {
   color: var(--dark-text);
   margin-bottom: 2.5rem;
   font-size: 1rem;
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'Lora', Georgia, serif;
 }
 
 /* ─── Container ──────────────────────────────────────────────────────────── */