Add node-sass, update brand styles, play with styles.

404.html

@@ -55,7 +55,7 @@
       <svg viewBox="1 0 38 18" class="error-number">
         <text x="0" y="17">404</text>
       </svg>
-      <h2 class="error-message">Page Not Found</h2>
+      <h2 class="error-message">Page Not Found. Oh my!</h2>
       <p class="button-container">
         <a href="/" class="button secondary error-button-home">Go home</a>
       </p>

blocks/cards/cards.css

@@ -12,6 +12,10 @@
   background-color: var(--background-color)
 }
 
+.cards.block li {
+  transition: all 250ms cubic-bezier(.25,.8,.25,1);
+}
+
 .cards .cards-card-body {
   margin: 16px;
 }
@@ -29,3 +33,13 @@
   aspect-ratio: 4 / 3;
   object-fit: cover;
 }
+
+@media (width >= 1024px) {
+  .cards.block li:hover {
+    transform: scale(1.1);
+    box-shadow: 0 3px 7px rgba(0,0,0,0.12), 0 3px 7px rgba(0,0,0,0.24);
+  }
+}
+
+/* .cards-card-image:hover {
+} */

blocks/columns/columns.css

@@ -17,6 +17,7 @@
 
 .columns > div > .columns-img-col img {
   display: block;
+  box-shadow: 0 3px 7px rgba(0,0,0,0.12), 0 3px 7px rgba(0,0,0,0.24);
 }
 
 @media (width >= 900px) {

blocks/footer/footer.css

@@ -1,6 +1,6 @@
 footer {
   padding: 2rem;
-  background-color: var(--color-neutral-100);
+  background-color: #f6f6f6;
   font: var(--type-body-2-default-font);
   letter-spacing: var(--type-body-2-default-letter-spacing);
 }
@@ -13,3 +13,7 @@ footer .footer {
 footer .footer p {
   margin: 0;
 }
+
+footer .default-content-wrapper p:first-child {
+  margin-bottom: 16px;
+}

blocks/header/header.css

@@ -2,7 +2,7 @@
 
 /* header and nav layout */
 header .nav-wrapper {
-  background-color: var(--background-color);
+  background-color: #f6f6f6;
   width: 100%;
   z-index: 2;
   position: fixed;
@@ -21,6 +21,7 @@ header nav {
   height: var(--nav-height);
   padding: 0 16px;
   font-family: var(--type-base-font-family);
+  border-bottom: 1px solid var(--color-neutral-600);
 }
 
 header nav[aria-expanded='true'] {
@@ -250,6 +251,7 @@ header nav .nav-sections ul > li > ul > li {
     margin-top: 12px;
     padding: 1em;
     background-color: var(--color-neutral-500);
+    border: 1px solid var(--color-neutral-600);
     white-space: initial;
   }
 
@@ -262,7 +264,7 @@ header nav .nav-sections ul > li > ul > li {
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
-    border-bottom: 8px solid var(--color-neutral-500);
+    border-bottom: 8px solid var(--color-neutral-600);
   }
 
   header nav .nav-sections .default-content-wrapper > ul > li > ul > li {
@@ -353,6 +355,10 @@ header .nav-search-panel input {
 
 /* Mini Cart  */
 
+.cart-mini-cart {
+  border: 1px solid var(--color-neutral-600);
+}
+
 .cart-mini-cart:not(:has(.cart-empty-cart)) {
   max-height: 760px;
   min-height: 360px;
@@ -375,7 +381,7 @@ header .nav-search-input .search_autocomplete .popover-container {
   }
 
   header nav .nav-tools-panel {
-    top: calc(-12px + var(--nav-height));
+    top: calc(-24px + var(--nav-height));
   }
 
   header nav .minicart-panel {

head.html

@@ -18,3 +18,4 @@
 <script src="/scripts/configs.js" type="module"></script>
 <script src="/scripts/commerce.js" type="module"></script>
 <link rel="stylesheet" href="/styles/styles.css" />
+<link rel="stylesheet" href="/styles/styles-custom.css" />