Refactor: Implement the plan

This commit implements the changes requested in the prompt.

Author: lovable-dev[bot]

index.html

@@ -9,11 +9,11 @@
     <meta name="description" content="AlienFlowSpace DAO unites BioFi, DeFi, DePin, DeSci, IPFS, QFS, ReFi, RWA, SocialFi, and TradFi under one cosmic ecosystem." />
 
     <!-- Preload Fonts for Better Performance -->
-    <link rel="preload" href="https://fonts.gstatic.com/s/atomicage/v27/f0Xz0eug6sdmRFkYZZGL58Ht9a8.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="https://fonts.gstatic.com/s/exo/v20/4UaZrEtFpBI4f1ZSIK9d4LjJ4lM2CwNsOl4p5Is.woff2" as="font" type="font/woff2" crossorigin />
 
     <!-- Font Stylesheets -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Atomic+Age&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap" />
+    <link rel="stylesheet" href="https://fonts.cdnfonts.com/css/nasalization" />
 
     <!-- Open Graph Meta Tags -->
     <meta property="og:title" content="AlienFlowSpace DAO | Cosmic Decentralized Governance" />

src/components/Header/Logo.tsx

@@ -12,7 +12,7 @@ const Logo = () => {
           alt="AlienFlowSpaceDAO Logo" 
           className="h-9" 
         />
-        <span className="alien-logo-text text-base sm:text-lg md:text-xl">
+        <span className="alien-logo-text text-base sm:text-lg md:text-xl overflow-hidden text-ellipsis">
           <span className="text-alien-green">Δlieπ</span>
           <span className="text-alien-gold">FlΦw</span>
           <span className="text-alien-green"> $pac€</span>

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-transparent shadow-md backdrop-blur-md" : "py-2 bg-transparent backdrop-blur-sm"
+        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"
       }`}
     >
       <div className="container mx-auto px-4 flex justify-between items-center relative">

src/global.css

@@ -51,51 +51,52 @@ main {
   text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
 }
 
-/* Add card border effect */
+/* Card border effect - improved to avoid unwanted backgrounds */
 .card-border {
   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;
 }
 
 .card-border:hover {
   border-color: rgba(255, 215, 0, 0.4);
   box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
 }
 
-/* Force Atomic Age font to appear correctly */
+/* Nasalization font configuration */
 @font-face {
-  font-family: 'Atomic Age';
+  font-family: 'Nasalization';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/atomicage/v27/f0Xz0eug6sdmRFkYZZGL58Ht9a8.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  src: url('https://fonts.cdnfonts.com/css/nasalization') format('woff2');
 }
 
 h1, h2, h3, h4, h5, h6, .font-atomic {
-  font-family: 'Atomic Age', cursive !important;
+  font-family: 'Nasalization', sans-serif !important;
   letter-spacing: 0.5px;
 }
 
 .font-atomic-force {
-  font-family: 'Atomic Age', cursive !important;
+  font-family: 'Nasalization', sans-serif !important;
   font-weight: 400 !important;
   font-style: normal !important;
   letter-spacing: 0.5px !important;
-  white-space: nowrap !important; /* Evitar que se rompa en líneas */
+  white-space: nowrap !important; /* Keep text in one line */
 }
 
 /* Alien logo text specific styling */
 .alien-logo-text {
-  font-family: 'Atomic Age', cursive !important;
+  font-family: 'Nasalization', sans-serif !important;
   letter-spacing: 0.5px !important;
   font-weight: 400 !important;
   font-style: normal !important;
   font-display: block !important;
-  white-space: nowrap !important; /* Evitar que se rompa en líneas */
+  white-space: nowrap !important; /* Keep text in one line */
 }
 
 /* Alignment correction for sections */

src/index.css

@@ -1,6 +1,6 @@
 
-@import url('https://fonts.googleapis.com/css2?family=Atomic+Age&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.cdnfonts.com/css/nasalization');
 
 @tailwind base;
 @tailwind components;
@@ -49,7 +49,7 @@
   }
 
   h1, h2, h3, h4, h5, h6 {
-    font-family: 'Atomic Age', system-ui, sans-serif !important;
+    font-family: 'Nasalization', sans-serif !important;
   }
 
   body, p, span, div, a, button {
@@ -58,15 +58,15 @@
 
   /* Force font loading */
   @font-face {
-    font-family: 'Atomic Age';
+    font-family: 'Nasalization';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
-    src: url(https://fonts.gstatic.com/s/atomicage/v27/f0Xz0eug6sdmRFkYZZGL58Ht9a8.woff2) format('woff2');
+    src: url('https://fonts.cdnfonts.com/css/nasalization') format('woff2');
   }
 
   .font-atomic-force {
-    font-family: 'Atomic Age', cursive !important;
+    font-family: 'Nasalization', sans-serif !important;
     font-weight: 400 !important;
   }
 }
@@ -111,10 +111,11 @@
   filter: drop-shadow(0 0 10px rgba(240, 216, 130, 0.4));
 }
 
+/* Improved card-border without unwanted backgrounds */
 .card-border {
   position: relative;
   border-radius: theme('borderRadius.lg');
-  background: theme('backgroundImage.card-gradient');
+  background: rgba(17, 17, 25, 0.6);
   backdrop-filter: blur(8px);
 }
 
@@ -212,9 +213,9 @@
   }
 }
 
-/* Correcciones adicionales */
+/* Additional corrections */
 .font-atomic {
-  font-family: 'Atomic Age', system-ui, sans-serif !important;
+  font-family: 'Nasalization', sans-serif !important;
 }
 
 .section-center {