Adding features

app/assets/css/main.css

@@ -2,13 +2,145 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-@theme {
+@theme static {
   /* Font families */
   --font-sans: "Inter", sans-serif;
   --font-body: "Inter", sans-serif;
   --font-mono: "Ubuntu Mono", monospace;
   --font-display: "NB Television Pro", monospace;
 
+  /* Ethereal color palette - grays, blacks, minimal color */
+  --color-ghost-50: #f0f0f0;
+  --color-ghost-100: #d0d0d0;
+  --color-ghost-200: #b0b0b0;
+  --color-ghost-300: #8a8a8a;
+  --color-ghost-400: #6a6a6a;
+  --color-ghost-500: #4a4a4a;
+  --color-ghost-600: #3a3a3a;
+  --color-ghost-700: #2a2a2a;
+  --color-ghost-800: #1a1a1a;
+  --color-ghost-900: #0a0a0a;
+  
+  /* Subtle accent - barely visible blue-gray */
+  --color-whisper-50: #d4dae6;
+  --color-whisper-100: #a8b3c7;
+  --color-whisper-200: #8491a8;
+  --color-whisper-300: #687291;
+  --color-whisper-400: #4f5d7a;
+  --color-whisper-500: #3a4964;
+  --color-whisper-600: #2f3b52;
+  --color-whisper-700: #252d40;
+  --color-whisper-800: #1a1f2e;
+  --color-whisper-900: #0f1419;
 
+  /* Sparkle accent */
+  --color-sparkle-50: #fafafa;
+  --color-sparkle-100: #f0f0f0;
+  --color-sparkle-200: #e8e8e8;
+  --color-sparkle-300: #d0d0d0;
+  --color-sparkle-400: #c0c0c0;
+  --color-sparkle-500: #a0a0a0;
+  --color-sparkle-600: #808080;
+  --color-sparkle-700: #606060;
+  --color-sparkle-800: #404040;
+  --color-sparkle-900: #202020;
+}
+
+/* Global ethereal background */
+:root {
+  --ethereal-bg: radial-gradient(circle at 20% 80%, rgba(232, 232, 232, 0.03) 0%, transparent 50%),
+                 radial-gradient(circle at 80% 20%, rgba(232, 232, 232, 0.02) 0%, transparent 50%),
+                 radial-gradient(circle at 40% 40%, rgba(232, 232, 232, 0.01) 0%, transparent 50%);
+  
+  --halftone-pattern: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
+  --halftone-size: 8px 8px;
+}
+
+html {
+  background: var(--color-ghost-900);
+  color: var(--color-ghost-200);
+}
+
+body {
+  background: var(--ethereal-bg), var(--color-ghost-900);
+  background-attachment: fixed;
+}
+
+/* Halftone texture overlay */
+.halftone-texture {
+  position: relative;
+}
+
+.halftone-texture::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--halftone-pattern);
+  background-size: var(--halftone-size);
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+/* Sparkle effects */
+@keyframes sparkle {
+  0%, 100% { opacity: 0.3; transform: scale(0.8); }
+  50% { opacity: 1; transform: scale(1.2); }
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.2; }
+  25% { opacity: 0.8; }
+  75% { opacity: 0.4; }
+}
+
+.sparkle-field {
+  position: relative;
+  overflow: hidden;
+}
+
+.sparkle-field::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: 
+    radial-gradient(circle at 10% 20%, var(--color-sparkle-200) 1px, transparent 1px),
+    radial-gradient(circle at 90% 80%, var(--color-sparkle-400) 1px, transparent 1px),
+    radial-gradient(circle at 30% 70%, var(--color-sparkle-200) 0.5px, transparent 0.5px),
+    radial-gradient(circle at 70% 30%, var(--color-sparkle-400) 0.5px, transparent 0.5px),
+    radial-gradient(circle at 50% 10%, var(--color-sparkle-200) 1px, transparent 1px),
+    radial-gradient(circle at 20% 90%, var(--color-sparkle-400) 0.5px, transparent 0.5px);
+  background-size: 200px 200px, 300px 300px, 150px 150px, 250px 250px, 180px 180px, 220px 220px;
+  animation: twinkle 4s infinite ease-in-out;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+/* Ethereal glow effects */
+.ethereal-glow {
+  box-shadow: 
+    0 0 20px rgba(232, 232, 232, 0.1),
+    0 0 40px rgba(232, 232, 232, 0.05),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.ethereal-text {
+  text-shadow: 0 0 10px rgba(232, 232, 232, 0.3);
+}
+
+/* Dithered gradients */
+.dithered-bg {
+  background: 
+    linear-gradient(45deg, var(--color-ghost-800) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--color-ghost-800) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--color-ghost-700) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--color-ghost-700) 75%);
+  background-size: 4px 4px;
+  background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
 }