Update index.css

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

Author: Alien69Flow

src/index.css

@@ -1,4 +1,3 @@
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -46,26 +45,16 @@
     --sidebar-ring: 48 83% 72%;
   }
 
-  /* TIPOGRAFÍA: Nasalization solo para títulos y botones */
   h1, h2, h3, h4, h5, h6, button {
     font-family: 'Nasalization', sans-serif;
     font-weight: 400;
     letter-spacing: 0.5px;
   }
 
-  /* Exo para texto general y formularios */
   body, p, span, div, a, input, textarea, label {
     font-family: 'Exo', system-ui, sans-serif;
   }
 
-  /* Helper para forzar Nasalization donde quieras */
-  .font-nasalization {
-    font-family: 'Nasalization', sans-serif;
-    font-weight: 400;
-    letter-spacing: 0.5px;
-  }
-
-  /* Borde global sin usar @apply en el selector universal */
   :where(*, *::before, *::after) {
     border-color: hsl(var(--border));
   }
@@ -75,7 +64,7 @@
     scroll-behavior: smooth;
   }
 
-  /* Custom Scrollbar - Mejorado */
+  /* Custom Scrollbar */
   ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -96,15 +85,16 @@
   }
 }
 
-/* === Helpers y utilidades mejoradas === */
+/* Estilo de texto "Star Wars" */
 .text-glow {
-  text-shadow: 
-    0 0 8px rgba(240, 216, 130, 0.8),
-    0 0 16px rgba(240, 216, 130, 0.4),
-    0 0 24px rgba(240, 216, 130, 0.2);
+  text-shadow:
+    0 0 5px #ffcc00, 
+    0 0 10px #ffcc00,
+    0 0 20px #ffcc00,
+    0 0 40px #ffcc00,
+    0 0 80px #ffcc00;
 }
 
-/* Mejora de legibilidad para párrafos sobre fondos complejos */
 .readable-glow {
   text-shadow:
     0 2px 6px hsl(var(--background) / 0.85),
@@ -119,130 +109,30 @@
   filter: drop-shadow(0 0 10px rgba(240, 216, 130, 0.6)) drop-shadow(0 0 20px rgba(240, 216, 130, 0.3));
 }
 
-/* Star Wars title improved glow */
-.sw-title-glow {
-  text-shadow:
-    0 0 10px hsl(var(--sidebar-primary) / 0.9),
-    0 0 24px hsl(var(--sidebar-accent) / 0.5),
-    0 2px 28px hsl(var(--background) / 0.95);
-}
-
-/* Readability panel for paragraphs over images */
-.readable-panel {
-  background: linear-gradient(180deg, hsl(var(--background) / 0.45), hsl(var(--background) / 0.25));
-  backdrop-filter: blur(6px);
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.75rem;
-  padding: 0.75rem 1rem;
-}
-
-/* Improved card-border with better effects */
-.card-border {
-  position: relative;
-  border-radius: var(--radius);
-  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;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: inherit;
-  padding: 1.5px;
-  background: linear-gradient(145deg, hsl(var(--sidebar-primary)), hsl(var(--sidebar-accent)));
-  -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(var(--sidebar-accent)), hsl(var(--sidebar-primary)));
-}
-
-/* Professional Star Wars text styling - Subtle and harmonious */
-.starwars-text {
-  color: hsl(var(--primary));
-  text-shadow: 
-    0 1px 3px rgba(0, 0, 0, 0.3),
-    0 0 8px hsl(var(--primary) / 0.2);
-  font-family: 'Nasalization', sans-serif;
-  font-weight: bold;
-  letter-spacing: 1px;
-}
-
-/* Clean Star Wars crawl - No background box, subtle animation */
-.star-wars-crawl {
-  perspective: 400px;
-  height: auto;
-  overflow: visible;
-  margin: 2rem 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.star-wars-content {
-  transform: rotateX(12deg);
-  transform-origin: center top;
-  max-width: 700px;
-  margin: 0 auto;
-  padding: 1.5rem;
-  font-size: 1rem;
-  line-height: 1.7;
-  text-align: center;
-  color: hsl(var(--foreground) / 0.9);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  animation: subtle-float 4s ease-in-out infinite;
-}
-
-@keyframes subtle-float {
-  0%, 100% {
-    transform: rotateX(12deg) translateY(0px);
-  }
-  50% {
-    transform: rotateX(12deg) translateY(-3px);
-  }
-}
-
-/* Professional title glow - Subtle and elegant */
 .hero-title {
-  text-shadow: 
+  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);
 }
 
-/* Refined logo glow */
 .logo-glow {
-  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)) 
-          drop-shadow(0 0 12px hsl(var(--primary) / 0.2));
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)) drop-shadow(0 0 12px hsl(var(--primary) / 0.2));
 }
 
-/* Responsive improvements */
-@media (max-width: 768px) {
-  .star-wars-content {
-    transform: rotateX(10deg);
-  }
-  @keyframes star-wars-float-compact {
-    0% {
-      transform: rotateX(10deg) translateY(20px);
-      opacity: 0;
-    }
-    20% {
-      opacity: 1;
-    }
-    100% {
-      transform: rotateX(10deg) translateY(0);
-      opacity: 1;
-    }
-  }
+/* 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 {
@@ -252,10 +142,6 @@
   background-size: cover;
 }
 
-.bg-glow-radial {
-  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
-}
-
 .cosmic-grid {
   position: relative;
 }
@@ -275,16 +161,6 @@
   z-index: -1;
 }
 
-@keyframes ticker-scroll {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(-100%);
-  }
-}
-
-/* Additional responsive utilities */
 .section-center {
   display: flex;
   flex-direction: column;
@@ -294,30 +170,64 @@
   text-align: center;
 }
 
-/* Smooth transitions for better UX */
+/* 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;
 }
 
-/* Focus styles for accessibility */
+/* Accessibility */
 :focus-visible {
   outline: 2px solid hsl(var(--sidebar-primary));
   outline-offset: 2px;
 }
 
-/* === REFUERZO UNIVERSAL NASALIZATION === */
-.font-nasalization, .font-nasalization * {
-  font-family: 'Nasalization', sans-serif !important;
-  font-weight: 400;
-  letter-spacing: 0.5px;
+/* 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;
 }
 
-/* Mobile optimizations */
-@media (max-width: 640px) {
-  .container {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
+#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%));
 }