Update Footer styles

_includes/css/page.css

@@ -79,7 +79,7 @@
     border-style: double;
     position: relative;
     transition: all 0.3s ease;
-    box-shadow: 0 5px 15px var(--color-link-hover, rgba(0, 0, 0, 0.2));
+    box-shadow: 0 5px 15px var(--color-link-hover, rgba(0, 0, 0, 0.1));
 }
 
 .main-button:hover, .main-button:focus,
@@ -130,34 +130,19 @@
 
 /* Ensure this section gets called from footer.css instead */
 
-.footer-container {
-  background: var(--color-background-1);
-}
 .footer {
-  font: var(--text-caption);
-  color: var(--color-foreground-1);
   max-width: var(--max-width);
   margin: auto;
   text-align: center;
-  padding: 0 var(--margin);
 }
-.footer-copyright {
-  margin: 0;
-  padding: var(--row-gap-0) 0;
 
-  & a {
-    color: currentColor;
-  }
-}
 .footer-links {
   margin: 0;
   list-style: none;
   padding: 10px 0;
   display: flex;
-  flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
-  border-bottom: solid 1px var(--color-background-3);
 
   & svg {
     display: block;
@@ -167,20 +152,22 @@
   }
 
   & a {
-    text-decoration: none;
-    font: var(--text-caption-bold);
+    font: var(--font-display);
     display: flex;
     align-items: center;
     column-gap: 10px;
     padding: 10px;
-    border-radius: var(--border-radius-small);
-    color: currentColor;
-    white-space: nowrap;
+    border-radius: 5px;
+    transition: background-color 0.2s ease,
+    transform 0.2s ease, 
+    box-shadow 0.5s;
 
     &:hover {
-      color: var(--color-foreground);
-      background: var(--color-background-2);
+      color: var(--color-link-hover);
+      transform: translateY(-2px);
+      box-shadow: 0 8px 20px var(--color-link-hover, rgba(0, 0, 0, 0.4));
     }
   }
 }
 
+

_includes/templates/footer.vto

@@ -1,4 +1,3 @@
-<div class="footer-container">
 <footer class="footer">
     <ul class="footer-links">
         <li>
@@ -32,5 +31,5 @@
         </li>
     </ul>
 </footer>
-</div>
+