diff --git a/app/app.config.ts b/app/app.config.ts index 363e07f..7b45bff 100644 --- a/app/app.config.ts +++ b/app/app.config.ts @@ -6,8 +6,13 @@ export default defineAppConfig({ }, formField: { slots: { - label: "block font-medium text-stone-200", + label: "block font-medium text-[--ui-text-dimmed]", }, }, }, + colorMode: { + preference: "system", // default value of $colorMode.preference + fallback: "dark", // fallback value if not system preference found + classSuffix: "", // default is '', set to '-mode' to have 'dark-mode' and 'light-mode' + }, }); diff --git a/app/assets/css/main.css b/app/assets/css/main.css index 22cb675..e2bef36 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -2,14 +2,52 @@ @import "tailwindcss"; @import "@nuxt/ui"; -@theme static { +@theme { /* 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 */ + /* Ethereal color palette - light mode (inverted for light backgrounds) */ + --color-ghost-50: #0a0a0a; + --color-ghost-100: #1a1a1a; + --color-ghost-200: #2a2a2a; + --color-ghost-300: #3a3a3a; + --color-ghost-400: #4a4a4a; + --color-ghost-500: #6a6a6a; + --color-ghost-600: #8a8a8a; + --color-ghost-700: #b0b0b0; + --color-ghost-800: #d0d0d0; + --color-ghost-900: #f0f0f0; + + /* Subtle accent - barely visible blue-gray (light mode) */ + --color-whisper-50: #0f1419; + --color-whisper-100: #1a1f2e; + --color-whisper-200: #252d40; + --color-whisper-300: #2f3b52; + --color-whisper-400: #3a4964; + --color-whisper-500: #4f5d7a; + --color-whisper-600: #687291; + --color-whisper-700: #8491a8; + --color-whisper-800: #a8b3c7; + --color-whisper-900: #d4dae6; + + /* Sparkle accent (light mode) */ + --color-sparkle-50: #202020; + --color-sparkle-100: #404040; + --color-sparkle-200: #606060; + --color-sparkle-300: #808080; + --color-sparkle-400: #a0a0a0; + --color-sparkle-500: #c0c0c0; + --color-sparkle-600: #d0d0d0; + --color-sparkle-700: #e8e8e8; + --color-sparkle-800: #f0f0f0; + --color-sparkle-900: #fafafa; +} + +.dark { + /* Ethereal color palette - dark mode (original values) */ --color-ghost-50: #f0f0f0; --color-ghost-100: #d0d0d0; --color-ghost-200: #b0b0b0; @@ -20,8 +58,8 @@ --color-ghost-700: #2a2a2a; --color-ghost-800: #1a1a1a; --color-ghost-900: #0a0a0a; - - /* Subtle accent - barely visible blue-gray */ + + /* Subtle accent - barely visible blue-gray (dark mode) */ --color-whisper-50: #d4dae6; --color-whisper-100: #a8b3c7; --color-whisper-200: #8491a8; @@ -33,7 +71,7 @@ --color-whisper-800: #1a1f2e; --color-whisper-900: #0f1419; - /* Sparkle accent */ + /* Sparkle accent (dark mode) */ --color-sparkle-50: #fafafa; --color-sparkle-100: #f0f0f0; --color-sparkle-200: #e8e8e8; @@ -46,33 +84,79 @@ --color-sparkle-900: #202020; } -/* Global ethereal background */ +/* Global ethereal background - light mode */ :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); + --ethereal-bg: + radial-gradient( + circle at 20% 80%, + rgba(40, 40, 40, 0.03) 0%, + transparent 50% + ), + radial-gradient( + circle at 80% 20%, + rgba(40, 40, 40, 0.02) 0%, + transparent 50% + ), + radial-gradient( + circle at 40% 40%, + rgba(40, 40, 40, 0.01) 0%, + transparent 50% + ); + + --halftone-pattern: radial-gradient( + circle, + rgba(0, 0, 0, 0.1) 1px, + transparent 1px + ); --halftone-size: 8px 8px; } +/* Dark mode background */ +.dark: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 + ); +} + html { - background: var(--color-ghost-900); - color: var(--color-ghost-200); + @apply text-[--ui-text]; } body { - background: var(--ethereal-bg), var(--color-ghost-900); + background: var(--ethereal-bg), #f0f0f0; background-attachment: fixed; } +.dark body { + background: var(--ethereal-bg), #0a0a0a; +} + /* Halftone texture overlay */ .halftone-texture { position: relative; } .halftone-texture::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; @@ -86,14 +170,28 @@ body { /* Sparkle effects */ @keyframes sparkle { - 0%, 100% { opacity: 0.3; transform: scale(0.8); } - 50% { opacity: 1; transform: scale(1.2); } + 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; } + 0%, + 100% { + opacity: 0.2; + } + 25% { + opacity: 0.8; + } + 75% { + opacity: 0.4; + } } .sparkle-field { @@ -102,20 +200,50 @@ body { } .sparkle-field::after { - content: ''; + 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; + 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; @@ -123,7 +251,7 @@ body { /* Ethereal glow effects */ .ethereal-glow { - box-shadow: + 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); @@ -135,12 +263,28 @@ body { /* Dithered gradients */ .dithered-bg { - background: + 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; + background-position: + 0 0, + 0 2px, + 2px -2px, + -2px 0px; } +/* Mobile responsive utilities */ +@media (max-width: 1023px) { + /* Prevent horizontal scroll on mobile */ + body { + overflow-x: hidden; + } + + /* Adjust halftone pattern for mobile */ + .halftone-texture::before { + background-size: 6px 6px; + } +} diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue index 7f35a63..38b2f4e 100644 --- a/app/components/AppFooter.vue +++ b/app/components/AppFooter.vue @@ -7,7 +7,7 @@ >
-

+

Ā© {{ currentYear }} Ghost Guild

@@ -16,7 +16,7 @@
Contact diff --git a/app/components/AppNavigation.vue b/app/components/AppNavigation.vue index f7b1473..812b3ba 100644 --- a/app/components/AppNavigation.vue +++ b/app/components/AppNavigation.vue @@ -1,27 +1,38 @@