fix: dark theme with full-page axolotl background

- Revert to dark background (#0c0c0c)
- Axolotl covers full viewport (100vw x 100vh) instead of 80vmin
- Use object-fit: cover for full-page fill
- Axolotl dark/subtle (opacity 0.15, no invert filter)
- Glass cells: very subtle white (rgba 255,255,255,0.06) + blur(20px)
- Dark glass nav (rgba 12,12,12,0.6)
- Mysterious atmosphere with dark tones

Author: Pakrohk

src/pages/index.astro

@@ -139,14 +139,14 @@
   *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
   :root {
-    --bg: #e8e4e0;
-    --fg: #1a1a1a;
+    --bg: #0c0c0c;
+    --fg: #e0e0e0;
     --fg-dim: #666;
-    --border: rgba(0, 0, 0, 0.08);
-    --cell: rgba(255, 255, 255, 0.45);
-    --cell-hover: rgba(255, 255, 255, 0.6);
-    --cell-border: rgba(255, 255, 255, 0.5);
-    --blur: 18px;
+    --border: rgba(255, 255, 255, 0.06);
+    --cell: rgba(255, 255, 255, 0.06);
+    --cell-hover: rgba(255, 255, 255, 0.1);
+    --cell-border: rgba(255, 255, 255, 0.1);
+    --blur: 20px;
   }
 
   body {
@@ -160,20 +160,19 @@
 
   .bg-axolotl {
     position: fixed;
-    top: 50%; left: 50%;
-    transform: translate(-50%, -50%);
-    width: 80vmin;
-    height: 80vmin;
-    opacity: 0.35;
+    top: 0; left: 0;
+    width: 100vw;
+    height: 100vh;
+    opacity: 0.15;
     pointer-events: none;
     z-index: 0;
-    object-fit: contain;
+    object-fit: cover;
   }
 
   .nav {
     position: fixed; top: 0; left: 0; right: 0; height: 48px;
     border-bottom: 1px solid var(--border);
-    background: rgba(255, 255, 255, 0.5);
+    background: rgba(12, 12, 12, 0.6);
     backdrop-filter: blur(24px) saturate(1.3);
     -webkit-backdrop-filter: blur(24px) saturate(1.3);
     z-index: 100;
@@ -201,9 +200,9 @@
     padding: 48px 0 0;
     display: flex; flex-direction: column;
     gap: 1px;
-    background: var(--border);
+    background: rgba(255, 255, 255, 0.03);
   }
-  .bento-row { display: grid; gap: 1px; background: var(--border); }
+  .bento-row { display: grid; gap: 1px; background: rgba(255, 255, 255, 0.03); }
   .cell {
     background: var(--cell);
     backdrop-filter: blur(var(--blur)) saturate(1.2);
@@ -215,14 +214,14 @@
   }
   .cell:hover {
     background: var(--cell-hover);
-    border-color: rgba(255, 255, 255, 0.7);
+    border-color: rgba(255, 255, 255, 0.15);
   }
 
   .cell-hero {
     grid-column: 1 / -1;
     padding: 6rem 3rem;
     align-items: center; text-align: center;
-    border-top: 1px solid rgba(255, 255, 255, 0.5);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
   }
   .hero-label {
     font-family: 'JetBrains Mono', monospace;
@@ -253,7 +252,7 @@
   .row-roadmap { grid-template-columns: 1fr; }
   .cell-roadmap { padding: 3rem; }
   .roadmap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 1.5rem; }
-  .roadmap-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.2); margin-bottom: 0.75rem; }
+  .roadmap-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); margin-bottom: 0.75rem; }
   .roadmap-dot--active { background: var(--fg); }
   .roadmap-year { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--fg-dim); margin-bottom: 0.5rem; }
   .roadmap-item h4 { font-size: 0.8rem; font-weight: 500; margin-bottom: 0.35rem; }
@@ -267,7 +266,7 @@
   }
   .cell-project:hover {
     transform: translateY(-2px);
-    border-color: rgba(255, 255, 255, 0.7);
+    border-color: rgba(255, 255, 255, 0.15);
   }
   .project-name { font-size: 1rem; font-weight: 500; margin-bottom: 0.35rem; }
   .project-desc { font-size: 0.75rem; color: var(--fg-dim); font-weight: 300; line-height: 1.6; }