New retro design for most of the site

11 files changed, 225 insertions, 186 deletions

diff --git a/src/components/PortfolioProject.astro b/src/components/PortfolioProject.astro
index b3483e9..c583325 100644
--- a/src/components/PortfolioProject.astro
+++ b/src/components/PortfolioProject.astro
@@ -58,20 +58,46 @@ const { title, summary, tags, detailsLink, githubLink, onlineLink } =
         justify-content: start;
         gap: 0.75rem;
 
-        padding: 1.5rem 1rem;
-        border-radius: 0.5rem;
+        padding: 1.5rem;
+        border-radius: 10px;
 
-        background-color: white;
-        border: 1px solid $accent;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        background-color: #fcfcfc;
+        border: 1px solid #ccd6e0;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 #fff;
+
+        h3 {
+            color: $accent;
+            text-shadow: 1px 1px 0 #fff;
+            margin-bottom: 0.25rem;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 0.25rem;
+        }
     }
 
     a {
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
-        color: var(--text);
+        color: white;
         text-decoration: none;
+        background: $accent;
+        padding: 0.4rem 0.8rem;
+        border-radius: 6px;
+        font-size: 0.9rem;
+        font-weight: bold;
+        border: 1px solid $accentDark;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
+        text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
+
+        &:hover {
+            filter: brightness(1.1);
+            transform: translateY(-1px);
+        }
+
+        &:active {
+            box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
+            transform: translateY(0);
+        }
     }
 
     div *:not(:last-child) {
diff --git a/src/components/TechnologyBadge.astro b/src/components/TechnologyBadge.astro
index 204bef6..ad32c6e 100644
--- a/src/components/TechnologyBadge.astro
+++ b/src/components/TechnologyBadge.astro
@@ -112,20 +112,24 @@ const tech = technologies[code] as Technology;
 
 <style define:vars={{ colour: tech.colour }}>
   span {
-    /*display: inline-block;*/
     background-color: var(--colour);
+    background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.15) 100%);
     font-weight: bold;
     text-transform: uppercase;
-    border-radius: 0.5em;
+    border-radius: 20px;
     padding: 0.5em 1em;
+    border: 1px solid rgba(0,0,0,0.2);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.2);
 
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
+    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
   }
 
   .text-dark {
     color: #000;
+    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
   }
 
   .text-light {
@@ -133,16 +137,13 @@ const tech = technologies[code] as Technology;
   }
 
   .pill-small {
-    padding: 0.35em 0.5em;
-    border-radius: 0.25em;
-
-    font-size: 0.75em;
+    padding: 2px 8px;
+    font-size: 0.7rem;
+    letter-spacing: 0.05em;
   }
 
   .pill-large {
-    padding: 0.35 0.75em;
-    border-radius: 0.5em;
-
-    font-size: 0.75em;
+    padding: 4px 12px;
+    font-size: 0.85rem;
   }
 </style>
diff --git a/src/layouts/BlogListLayout.astro b/src/layouts/BlogListLayout.astro
index dbc7f34..749259e 100644
--- a/src/layouts/BlogListLayout.astro
+++ b/src/layouts/BlogListLayout.astro
@@ -248,10 +248,8 @@ const schema = {
 
   .tags-container {
     margin-bottom: 2.5rem;
-    padding: 1.5rem;
     background: white;
     border-radius: 0.75rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 
     h2 {
       font-size: 1.5rem;
@@ -278,7 +276,6 @@ const schema = {
     font-weight: 600;
     font-family: v.$monoFontStack;
     cursor: pointer;
-    transition: all 0.2s ease;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 
     &:hover {
@@ -297,7 +294,6 @@ const schema = {
 
   .post-section {
     margin-bottom: 3rem;
-    transition: opacity 0.3s ease;
 
     h2 {
       font-size: 1.75rem;
@@ -318,26 +314,19 @@ const schema = {
   }
 
   .post-item {
-    background: white;
+    background: v.$lightAlt;
     padding: 1.25rem 1.5rem;
     border-radius: 0.625rem;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-    transition: all 0.25s ease;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 
-    &:hover {
-      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
-    }
-
     > a {
       font-size: 1.2rem;
       font-weight: 600;
       text-decoration: none;
       color: v.$accentDark;
       box-shadow: none !important;
-      transition: color 0.2s ease;
 
       &:hover {
         color: v.$accent;
@@ -372,7 +361,6 @@ const schema = {
     font-family: v.$monoFontStack;
     text-decoration: none;
     cursor: pointer;
-    transition: all 0.2s ease;
 
     &:hover {
       background-color: rgba(0, 153, 255, 0.2);
diff --git a/src/layouts/BlogSingleLayout.astro b/src/layouts/BlogSingleLayout.astro
index 3e0c616..70b62c2 100644
--- a/src/layouts/BlogSingleLayout.astro
+++ b/src/layouts/BlogSingleLayout.astro
@@ -95,11 +95,9 @@ const schema = {
 
   small {
     display: block;
-    margin-bottom: 2rem;
-    padding-bottom: 1.5rem;
+    margin-bottom: 1.5rem;
     font-size: 0.95rem;
     color: hsl(209, 20%, 50%);
-    border-bottom: 2px solid rgba(0, 102, 204, 0.15);
   }
 
   time {
@@ -133,7 +131,6 @@ const schema = {
     font-family: v.$monoFontStack;
     text-decoration: none;
     box-shadow: none !important;
-    transition: all 0.2s ease;
 
     &:hover {
       background-color: rgba(0, 153, 255, 0.2);
diff --git a/src/layouts/HomePageLayout.astro b/src/layouts/HomePageLayout.astro
index b1356ce..e18aeea 100644
--- a/src/layouts/HomePageLayout.astro
+++ b/src/layouts/HomePageLayout.astro
@@ -34,13 +34,14 @@ const schema = {
     <p>
       En mi blog comparto mis reflexiones, aprendizajes y experiencias sobre los
       temas que me interesan, además de hablar ocasionalmente sobre tecnología y
-      desarrollo. Disfruto escribiendo sobre lo que aprendo y reflexiono, pudiendo
-      plasmar mis ideas de forma clara y ordenada, y compartiéndolas con el mundo.
+      desarrollo. Disfruto escribiendo sobre lo que aprendo y reflexiono,
+      pudiendo plasmar mis ideas de forma clara y ordenada, y compartiéndolas
+      con el mundo.
     </p>
   </div>
 
   <hr class="section-divider" />
-
+  <h2>Entradas recientes del blog</h2>
   <ul class="blog-list">
     {
       blogCollection.slice(0, 5).map((p) => {
@@ -93,12 +94,6 @@ const schema = {
     background: $lightAlt;
     padding: 1rem 1.25rem;
     border-radius: 0.5rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-    transition: box-shadow 0.2s ease;
-
-    &:hover {
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
-    }
 
     time {
       display: block;
@@ -125,23 +120,22 @@ const schema = {
   .cta-button {
     display: inline-block;
     padding: 0.75rem 1.5rem;
-    background: $accent;
+    background: $accentDark;
     color: white !important;
     text-decoration: none;
     border-radius: 0.5rem;
     font-weight: 600;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
-    transition: all 0.2s ease;
 
     &:hover {
-      background: $accentDark;
+      background: $accent;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
     }
 
     &:focus {
       outline: 3px solid $secondary;
       outline-offset: 2px;
-      background: $accentDark !important;
+      background: $accent !important;
     }
   }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e7b84ce..9e432bb 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -107,16 +107,13 @@ const { title, description, empty } = Astro.props;
 
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
 
-    background: linear-gradient(
-      to bottom,
-      #f0f8ff 0%,
-      #e6f3ff 6rem,
-      #d9edff 12rem,
-      #d9edff 88%,
-      #cce5ff 100%
-    );
+    background: #c3d9ff;
+    background-image:
+      radial-gradient(at 0% 0%, hsla(210,100%,90%,1) 0, transparent 50%),
+      radial-gradient(at 50% 0%, hsla(210,100%,85%,1) 0, transparent 50%),
+      radial-gradient(at 100% 0%, hsla(210,100%,80%,1) 0, transparent 50%);
+    background-attachment: fixed;
     color: $dark;
     line-height: 1.6;
   }
@@ -154,21 +151,29 @@ const { title, description, empty } = Astro.props;
 
   main {
     box-sizing: border-box;
-    margin-bottom: auto;
+    margin-top: 2rem;
+    margin-bottom: 3rem;
 
     align-self: center;
 
-    max-width: min(75ch, 90vw);
-    font-size: 1.125rem;
+    max-width: min(900px, 95vw);
+    width: 100%;
+    font-size: 1.1rem;
 
-    padding-block-end: 3rem;
+    padding: 2.5rem;
+    background: #ffffff;
+    border: 1px solid #b4c7e7;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
 
     p > code {
       word-break: break-word;
       font-family: $monoFontStack;
-
+      padding: 0.2rem 0.4rem;
+      border-radius: 4px;
+      border: 1px solid #ddd;
       color: $accentDark;
-      background-color: #f6f6f6;
+      background-color: #f8f8f8;
     }
 
     p.meta {
diff --git a/src/partials/Footer.astro b/src/partials/Footer.astro
index 577a42d..96e857a 100644
--- a/src/partials/Footer.astro
+++ b/src/partials/Footer.astro
@@ -3,46 +3,57 @@ import t from "../i18n/es.json";
 ---
 
 <footer>
-  <p>
-    Copyright &copy; 2023-{new Date().getFullYear()} Ariel Costas Guerrero. {
-      t.footer.copyright
-    }
-  </p>
+  <div class="footer-content">
+    <p>
+      Copyright &copy; 2023-{new Date().getFullYear()} Ariel Costas Guerrero. {
+        t.footer.copyright
+      }
+    </p>
 
-  <p>
-    {t.footer.contentLicencedUnder}
-    <a href={`https://creativecommons.org/licenses/by-sa/4.0/deed.es`}
-      >CC BY-SA 4.0</a
-    >.
+    <p>
+      {t.footer.contentLicencedUnder}
+      <a href={`https://creativecommons.org/licenses/by-sa/4.0/deed.es`}
+        >CC BY-SA 4.0</a
+      >.
 
-    {t.footer.sourceCodeAvailableOn}
-    <a href="https://github.com/arielcostas/costasdev">GitHub</a>
-    {t.footer.andIsLicencedUnder}
-    <a href="https://joinup.ec.europa.eu/collection/eupl/eupl-text-11-12"
-      >{t.footer.eupl} 1.2</a
-    >
-  </p>
+      {t.footer.sourceCodeAvailableOn}
+      <a href="https://github.com/arielcostas/costasdev">GitHub</a>
+      {t.footer.andIsLicencedUnder}
+      <a href="https://joinup.ec.europa.eu/collection/eupl/eupl-text-11-12"
+        >{t.footer.eupl} 1.2</a
+      >
+    </p>
+  </div>
 </footer>
 
 <style lang="scss">
   @use "../../styles/variables" as *;
 
   footer {
-    background-color: $dark;
-    color: $light;
+    background: #222;
+    color: #ccc;
+    font-size: 0.9rem;
+    border-top: 1px solid #000;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
 
     vertical-align: middle;
     text-align: center;
 
-    padding: 0.5rem 1rem;
+    padding: 2rem 1rem;
+
+    .footer-content {
+      max-width: 900px;
+      margin: 0 auto;
+    }
 
     a {
-      color: $accentLight;
+      color: white;
+      text-shadow: 0 1px 1px rgba(0,0,0,0.5);
     }
 
     p {
-      max-width: 60ch;
       margin-inline: auto;
+      margin-bottom: 0.5rem;
     }
   }
 </style>
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 {
diff --git a/styles/_alert.scss b/styles/_alert.scss
index b0935ce..e041d4b 100644
--- a/styles/_alert.scss
+++ b/styles/_alert.scss
@@ -10,11 +10,14 @@ div[role="alert"] {
   margin-block: 1.5rem;
   margin-inline: 0.5rem;
 
-  border-radius: 0.5rem;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.1);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.5);
+  //background-image: $glossyGradient;
 
   svg {
-    width: 1.5em;
-    height: 1.5em;
+    width: 2em;
+    height: 2em;
     margin-inline-end: 0.5rem;
     color: inherit;
     vertical-align: middle;
@@ -23,43 +26,32 @@ div[role="alert"] {
 
   p {
     margin-block: 0;
-  }
-
-  &::before {
-    flex-shrink: 0;
-    display: block;
-
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
-
-    border-radius: 50%;
-    font-size: 1rem;
-
-    text-align: center;
+    font-weight: 500;
   }
 }
 
 div[role="alert"].note {
-  background-color: $noteBackground;
-  color: $noteText;
-  box-shadow: 0 0 0 1px $noteText;
+  background-color: #e7f3ff;
+  color: #004a99;
+  border-color: #b3d7ff;
 
   &::before {
     content: "i";
-    background-color: $noteText;
-    color: $light;
+    background-color: #004a99;
+    color: white;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
   }
 }
 
 div[role="alert"].warning {
-  background-color: $warningBackground;
-  color: $warningText;
-  box-shadow: 0 0 0 1px $warningText;
+  background-color: #fff4ce;
+  color: #856404;
+  border-color: #ffeeba;
 
   &::before {
     content: "!";
-    background-color: $warningText;
-    color: $light;
+    background-color: #856404;
+    color: white;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
   }
 }
diff --git a/styles/_variables.scss b/styles/_variables.scss
index fba0516..7862724 100644
--- a/styles/_variables.scss
+++ b/styles/_variables.scss
@@ -1,26 +1,29 @@
-$titleFontStack: "Archivo Variable", "Liberation Sans", "Arial", "Helvetica", sans-serif;
-$mainFontStack: "Archivo Variable", "Liberation Sans", "Arial", "Helvetica", sans-serif;
-$monoFontStack: "Roboto Mono Variable", "Fira Code", "Consolas", monospace;
+$titleFontStack: "Segoe UI", "Tahoma", "Geneva", "Verdana", sans-serif;
+$mainFontStack: "Segoe UI", "Tahoma", "Geneva", "Verdana", sans-serif;
+$monoFontStack: "Consolas", "Monaco", "Lucida Console", monospace;
 
-$accent: hsl(209, 94%, 42%);
-$accentLight: hsl(215, 90%, 60%);
-$accentDark: hsl(215, 90%, 30%);
-$secondary: hsl(48, 100%, 50%);
-$dark: hsl(340, 13%, 5%);
+$accent: hsl(210, 100%, 45%); // Classic blue
+$accentLight: hsl(210, 100%, 70%);
+$accentDark: hsl(210, 100%, 25%);
+$secondary: hsl(35, 100%, 50%); // Glossy orange for highlights
+$dark: hsl(210, 15%, 10%);
 
-$background: hsl(210, 40%, 96%);
-$backgroundDarker: hsl(210, 40%, 80%);
-$light: hsl(214, 64%, 98%);
-$lightAlt: hsl(0, 0%, 100%);
+$background: hsl(0, 0%, 94%);
+$backgroundDarker: hsl(0, 0%, 90%);
+$light: white;
+$lightAlt: hsl(0, 0%, 95%);
 
-$noteBackground: hsl(210, 40%, 86%);
-$noteText: hsl(210, 40%, 40%);
+$noteBackground: #fffbcc;
+$noteText: #5a5a22;
 
-$warningBackground: hsl(40, 100%, 90%);
-$warningText: hsl(40, 100%, 30%);
+$warningBackground: #ffe6e6;
+$warningText: #cc0000;
 
-$shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
+$shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
+// Web 2.0/Skeuomorphic effects
+$glassBackground: rgba(255, 255, 255, 0.75);
+$bevelShadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 5px rgba(0, 0, 0, 0.2);
 $floatingRadius: 0.5rem;
 
 $breakpointTablet: 480px;
diff --git a/styles/shared.scss b/styles/shared.scss
index 3f7a155..96f20c6 100644
--- a/styles/shared.scss
+++ b/styles/shared.scss
@@ -5,67 +5,79 @@
 body {
   font-family: $mainFontStack;
   line-height: 1.65;
-  color: #000000;
+  color: $dark;
+  background-color: $background;
 }
 
 %heading {
   font-family: $titleFontStack;
-  margin-block-start: 0.75em;
-  margin-block-end: 0.25em;
+  margin-block-start: 1rem;
+  margin-block-end: 0.5rem;
+  color: $accentDark;
+  text-shadow: 1px 1px 0 #fff;
 }
 
 h1 {
   @extend %heading;
-  font-size: 3.25rem;
-  line-height: 1.3;
-
+  font-size: 2.75rem;
+  line-height: 1.2;
+  border-bottom: 2px solid $accentLight;
+  padding-bottom: 0.5rem;
+  margin-bottom: 1.5rem;
 }
 
 h2 {
   @extend %heading;
-  font-size: 2.5rem;
-  line-height: 1.55;
-  font-variation-settings: "wdth" 87.5,"wght" 700,"GRAD" 150
+  font-size: 2rem;
+  line-height: 1.3;
 }
 
 h3 {
   @extend %heading;
-  font-size: 2rem;
-  line-height: 1.55;
+  font-size: 1.5rem;
+  line-height: 1.3;
 }
 
 h4 {
   @extend %heading;
-  font-size: 1.25rem;
-  line-height: 1.55;
+  font-size: 1.2rem;
+  line-height: 1.3;
 }
 
 p {
-  font-variation-settings: "GRAD" -15,"wdth" 112.5;
+  margin-bottom: 1rem;
 }
 
 table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   margin-bottom: 1.5rem;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 
   th,
   td {
-    border: 1px solid $accent;
+    border: 1px solid #ddd;
     padding: 0.75rem;
     text-align: left;
   }
 
   th {
-    font-variation-settings: "GRAD" 150,"wdth" 87.5,"wght" 700;
+    background: $accent;
+    //background-image: $glossyGradient;
+    color: white;
+    font-weight: bold;
+    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
   }
 
   tbody tr:nth-child(odd) {
-    background-color: color.scale($accent, $lightness: 90%);
+    background-color: #fff;
   }
 
-  th,
   tbody tr:nth-child(even) {
-    background-color: color.scale($accent, $lightness: 97%);
+    background-color: #f9f9f9;
   }
 }