Update index.css

Signed-off-by: Aitor Alien <[email protected]>

Author: Alien69Flow

src/index.css

@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+/* NASALIZATION FONT: Carga directa con múltiples formatos para compatibilidad */
 @font-face {
   font-family: 'Nasalization';
   font-style: normal;
@@ -13,12 +14,78 @@
 }
 
 @layer base {
+  :root {
+    --background: 240 33% 5%;
+    --foreground: 0 0% 98%;
+    --card: 240 33% 8%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 33% 5%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 48 83% 72%;
+    --primary-foreground: 240 33% 10%;
+    --secondary: 142 67% 45%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 20% 20%;
+    --muted-foreground: 240 10% 80%;
+    --accent: 48 83% 72%;
+    --accent-foreground: 240 33% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 20% 16%;
+    --input: 240 20% 16%;
+    --ring: 48 83% 72%;
+    --radius: 0.5rem;
+    --sidebar-background: 240 33% 5%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-primary: 48 83% 72%;
+    --sidebar-primary-foreground: 240 33% 10%;
+    --sidebar-accent: 142 67% 45%;
+    --sidebar-accent-foreground: 0 0% 98%;
+    --sidebar-border: 240 20% 16%;
+    --sidebar-ring: 48 83% 72%;
+  }
+
+  h1, h2, h3, h4, h5, h6, button {
+    font-family: 'Nasalization', sans-serif;
+    font-weight: 400;
+    letter-spacing: 0.5px;
+  }
+
+  body, p, span, div, a, input, textarea, label {
+    font-family: 'Exo', system-ui, sans-serif;
+  }
+
+  :where(*, *::before, *::after) {
+    border-color: hsl(var(--border));
+  }
+
   body {
     @apply bg-transparent text-foreground overflow-x-hidden;
     scroll-behavior: smooth;
   }
+
+  /* Custom Scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: hsl(var(--sidebar-background));
+  }
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, hsl(var(--sidebar-primary)), hsl(var(--sidebar-accent)));
+    border-radius: 6px;
+    border: 1px solid hsl(var(--sidebar-background));
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, hsl(var(--sidebar-accent)), hsl(var(--sidebar-primary)));
+  }
+  ::-webkit-scrollbar-corner {
+    background: hsl(var(--sidebar-background));
+  }
 }
 
+/* Estilos de texto y efectos de resplandor */
 .text-glow {
   text-shadow:
     0 0 5px #ffcc00, 
@@ -27,3 +94,140 @@
     0 0 40px #ffcc00,
     0 0 80px #ffcc00;
 }
+
+.readable-glow {
+  text-shadow:
+    0 2px 6px hsl(var(--background) / 0.85),
+    0 0 24px hsl(var(--background) / 0.65);
+}
+
+.green-glow {
+  filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.6)) drop-shadow(0 0 20px rgba(34, 197, 94, 0.3));
+}
+
+.gold-glow {
+  filter: drop-shadow(0 0 10px rgba(240, 216, 130, 0.6)) drop-shadow(0 0 20px rgba(240, 216, 130, 0.3));
+}
+
+.hero-title {
+  text-shadow:
+    0 0 20px hsl(var(--primary) / 0.3),
+    0 0 40px hsl(var(--secondary) / 0.2),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.logo-glow {
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)) drop-shadow(0 0 12px hsl(var(--primary) / 0.2));
+}
+
+/* Background & Stars */
+.bg-stars {
+  background: black url('/lovable-uploads/stars-bg.png') repeat;
+  animation: moveStars 200s linear infinite;
+}
+
+@keyframes moveStars {
+  from { background-position: 0 0; }
+  to { background-position: -10000px 5000px; }
+}
+
+.bg-glow-radial {
+  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
+}
+
+.parallax {
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.cosmic-grid {
+  position: relative;
+}
+.cosmic-grid::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: 
+    linear-gradient(rgba(240, 216, 130, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(240, 216, 130, 0.04) 1px, transparent 1px);
+  background-size: 40px 40px;
+  background-position: center center;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.section-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+}
+
+/* Smooth transitions */
+* {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+/* Accessibility */
+:focus-visible {
+  outline: 2px solid hsl(var(--sidebar-primary));
+  outline-offset: 2px;
+}
+
+/* Estilos de la versión anterior que se han mantenido */
+html, body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  width: 100%;
+  background-color: transparent;
+  color: #F0D882;
+  overflow-x: hidden;
+  font-family: 'Exo', sans-serif;
+  scroll-behavior: smooth;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  flex: 1;
+  position: relative;
+  padding-top: 8rem;
+}
+
+.card-border {
+  position: relative;
+  border-radius: 0.5rem;
+  background: rgba(17, 17, 25, 0.7);
+  backdrop-filter: blur(12px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.card-border::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1.5px;
+  background: linear-gradient(145deg, hsl(48, 83%, 72%), hsl(142, 67%, 45%));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+.card-border:hover::before {
+  background: linear-gradient(145deg, hsl(142, 67%, 45%), hsl(48, 83%, 72%));
+}