Fix: Improve visual appearance

- Correct font loading for titles.
- Adjust hero background transparency.
- Address potential issues with Star Wars text effect.
- Refine background transitions between sections.

Author: lovable-dev[bot]

index.html

@@ -10,6 +10,7 @@
 
     <!-- Preload Fonts for Better Performance -->
     <link rel="preload" href="https://fonts.gstatic.com/s/exo/v20/4UaZrEtFpBI4f1ZSIK9d4LjJ4lM2CwNsOl4p5Is.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="https://fonts.cdnfonts.com/css/nasalization" as="style" />
 
     <!-- Font Stylesheets -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap" />

src/components/Header/index.tsx

@@ -22,7 +22,7 @@ const Header = () => {
   return (
     <header
       className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
-        isScrolled ? "py-1 bg-alien-space-dark bg-opacity-80 shadow-md backdrop-blur-md" : "py-2 bg-alien-space-dark bg-opacity-50 backdrop-blur-sm"
+        isScrolled ? "py-1 bg-black bg-opacity-90 shadow-md" : "py-2 bg-black bg-opacity-80"
       }`}
     >
       <div className="container mx-auto px-4 flex justify-between items-center relative">

src/components/Hero.tsx

@@ -8,8 +8,7 @@ import { Link } from 'react-router-dom';
 const Hero = () => {
   return (
     <div className="relative min-h-[calc(100vh-4rem)] flex flex-col items-center justify-center py-16 overflow-hidden">
-      {/* Fondo con efecto parallax */}
-      <div className="absolute inset-0 bg-glow-radial opacity-70 z-0 parallax"></div>
+      {/* Background image is handled in pages/Index.tsx */}
 
       <div className="container relative z-10 px-4 mx-auto text-center">
         <motion.div

src/components/Layout.tsx

@@ -6,7 +6,7 @@ import Footer from './Footer';
 
 const Layout: React.FC = () => {
   return (
-    <div className="flex flex-col min-h-screen bg-alien-space">
+    <div className="flex flex-col min-h-screen bg-black">
       <Header />
       <main className="flex-1 relative z-10 pt-24 sm:pt-28 md:pt-32">
         <div className="container mx-auto px-4">

src/global.css

@@ -56,7 +56,6 @@ main {
   border: 1px solid rgba(255, 215, 0, 0.2);
   border-radius: 10px;
   background-color: rgba(17, 17, 25, 0.6);
-  backdrop-filter: blur(5px);
   transition: all 0.3s ease;
   position: relative;
   z-index: 1;

src/index.css

@@ -56,7 +56,7 @@
     font-family: 'Exo', system-ui, sans-serif;
   }
 
-  /* Force font loading */
+  /* Ensure Nasalization font is loaded */
   @font-face {
     font-family: 'Nasalization';
     font-style: normal;
@@ -177,12 +177,12 @@
   background-size: cover;
 }
 
-/* Background gradient */
+/* Background gradient - REMOVED the yellow tint */
 .bg-glow-radial {
-  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.1) 0%, rgba(240, 216, 130, 0.05) 50%, transparent 70%);
+  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
 }
 
-/* Cosmic grid for backgrounds */
+/* Cosmic grid for backgrounds - UPDATED to be more subtle */
 .cosmic-grid {
   position: relative;
 }
@@ -195,8 +195,8 @@
   right: 0;
   bottom: 0;
   background-image: 
-    linear-gradient(rgba(240, 216, 130, 0.05) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(240, 216, 130, 0.05) 1px, transparent 1px);
+    linear-gradient(rgba(240, 216, 130, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(240, 216, 130, 0.03) 1px, transparent 1px);
   background-size: 40px 40px;
   background-position: center center;
   pointer-events: none;

src/pages/Index.tsx

@@ -10,19 +10,24 @@ import ParticipationSection from '@/components/ParticipationSection';
 
 const Index: React.FC = () => {
   return (
-    <div className="min-h-screen bg-alien-space relative">
+    <div className="min-h-screen relative">
+      {/* Fixed background image with proper opacity */}
       <div className="fixed inset-0 z-0" style={{
         backgroundImage: `url('/lovable-uploads/EMWBack.png')`,
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         backgroundRepeat: 'no-repeat',
         opacity: 0.3
       }}></div>
+      
+      {/* Star background effect */}
       <StarBackground />
+      
+      {/* Content sections */}
       <div className="relative z-10">
         <Hero />
         <div className="container mx-auto text-center px-4 py-8 section-center">
-          <h2 className="text-4xl md:text-5xl mb-4 text-alien-gold alien-logo-text">₿£€$$</h2>
+          <h2 className="text-4xl md:text-5xl mb-4 text-alien-gold font-atomic-force">₿£€$$</h2>
         </div>
         <FinancialFreedomSection />
         <ExploreSpacesSection />