New retro design for most of the site

1 files changed, 49 insertions, 39 deletions

diff --git a/src/partials/Header.astro b/src/partials/Header.astro
index 77c8166..ad95b25 100644
--- a/src/partials/Header.astro
+++ b/src/partials/Header.astro
@@ -64,8 +64,13 @@ import t from "../i18n/es.json";
   @use "../../styles/variables" as *;
 
   header {
-    color: $accent;
-    padding: 1rem 2rem;
+    background: $accentDark;
+    border-bottom: 1px solid $accentLight;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    padding: 0.5rem 1rem;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
 
     .header-container {
       display: flex;
@@ -80,53 +85,43 @@ import t from "../i18n/es.json";
       margin-right: auto;
 
       .brand-link {
-        font-size: 1.8rem;
-        font-weight: 700;
-        font-variation-settings: "wdth" 87.5,"wght" 700,"GRAD" 150;
+        font-size: 1.5rem;
+        font-weight: 800;
         text-decoration: none;
-        background: linear-gradient(135deg, #0066cc 0%, #0099ff 50%, #00ccff 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        transition: filter 0.2s ease;
-
-        &:hover {
-          filter: brightness(1.1);
-        }
+        color: white;
+        letter-spacing: -0.5px;
 
         .brand-accent {
-          background: linear-gradient(135deg, #0052a3 0%, #0066cc 50%, #0080ff 100%);
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-          background-clip: text;
+          color: $secondary;
         }
       }
     }
 
     .nav-links {
       display: flex;
-      gap: 2rem;
+      gap: 0.5rem;
       align-items: center;
 
       a {
         text-decoration: none;
-        font-weight: 700;
-        font-size: 1.2rem;
-        text-transform: uppercase;
-        transition:
-          color 0.2s ease-in-out,
-          border-bottom-color 0.2s ease-in-out;
-        color: $accent;
-        line-height: 1;
-        border-bottom: 2px solid transparent;
+        font-weight: bold;
+        font-size: 0.95rem;
+        padding: 0.4rem 1rem;
+        border-radius: 20px;
+        color: white;
+        text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
+        border: 1px solid transparent;
 
         &:hover {
-          color: $accentDark;
-          border-bottom-color: currentColor;
+          background: rgba(255, 255, 255, 0.2);
+          border: 1px solid rgba(255, 255, 255, 0.3);
+          box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
         }
 
         &.active {
-          color: $accentDark;
+          background: rgba(0, 0, 0, 0.15);
+          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+          border: 1px solid rgba(0, 0, 0, 0.1);
         }
       }
     }
@@ -135,17 +130,16 @@ import t from "../i18n/es.json";
       display: none;
       flex-direction: column;
       justify-content: space-between;
-      width: 2rem;
-      height: 1.25rem;
+      width: 1.5rem;
+      height: 1rem;
       cursor: pointer;
       z-index: 10;
 
       .bar {
-        height: 3px;
+        height: 2px;
         width: 100%;
-        background-color: $accent;
-        border-radius: 3px;
-        transition: all 0.2s ease;
+        background-color: white;
+        border-radius: 2px;
       }
 
       &.active {
@@ -189,17 +183,33 @@ import t from "../i18n/es.json";
         width: 80%;
         max-width: 300px;
         height: 100vh;
-        background-color: $lightAlt;
+        background-color: rgba($lightAlt, 0.95);
+        backdrop-filter: blur(10px);
         flex-direction: column;
         justify-content: center;
         align-items: center;
         gap: 2rem;
-        transition: right 0.3s ease;
         box-shadow: $shadow;
+        border-left: 1px solid rgba(0,0,0,0.1);
         z-index: 5;
 
         a {
           font-size: 1.5rem;
+          color: $accentDark;
+          text-shadow: none;
+          width: 80%;
+          text-align: center;
+
+          &:hover {
+            background: rgba($accent, 0.1);
+            border-color: rgba($accent, 0.2);
+          }
+
+          &.active {
+            color: white;
+            background: $accent;
+            box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.1);
+          }
         }
 
         &.active {