new category style option

Components/navbar.js

@@ -21,7 +21,7 @@ template.innerHTML = `
       </div>
     </div>
   </div>
-  <div class="container">
+  <div class="container quicklinks-retailer">
     <div class="navbar-links">
       <div class="navbar-link">
         <div class="store-group">

category.html

@@ -724,10 +724,10 @@
           freeMode: true,
           breakpoints: {
             480: { slidesPerView: 3, slidesPerGroup: 3 },
-            768: { slidesPerView: 5, slidesPerGroup: 5 },
-            1280: { slidesPerView: 6, slidesPerGroup: 6 },
+            768: { slidesPerView: 4, slidesPerGroup: 5 },
+            1280: { slidesPerView: 5, slidesPerGroup: 6 },
             1440: { slidesPerView: 6, slidesPerGroup: 7 },
-            1880: { slidesPerView: 8, slidesPerGroup: 8 },
+            1880: { slidesPerView: 7, slidesPerGroup: 8 },
           },
           navigation: { nextEl: ".wb-next-5", prevEl: ".wb-prev-5" },
           // Enables a slide to span columns

css/main.css

@@ -243,14 +243,22 @@ table {
   --aspect_ratio_wrapper-ratio: 4 / 3;
 }
 
-.colorize-red {
+.colorize-red .container {
   background-color: var(--color-accent-red-bg-soft);
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  border-radius: 16px;
 }
 
-.theme--blue .colorize,
-.colorize-blue {
+.theme--blue .colorize .container,
+.colorize-blue .container {
   background-color: var(--color-accent-blue-bg-soft);
   background-color: #D4E6FD;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  border-radius: .5rem;
 }
 
 
@@ -472,10 +480,10 @@ body {
 .browse-tile .media img {
   position: absolute;
   border-radius: 0.5rem;
-  left: -0.5px;
-  top: -0.5px;
-  width: calc(100% + 1px);
-  height: calc(100% + 1px);
+  left: -1px;
+  top: -1px;
+  width: calc(100% + 2px);
+  height: calc(100% + 2px);
   z-index: -1;
 }
 
@@ -727,14 +735,8 @@ button {
   padding: 1rem 0;
 }
 
-/* ugh i know its ugga */
-.navbar-container {
-  --nav-border: .5px solid var(--color-border-tertiary);
-}
 
-.retailer .navbar-container {
-  --nav-border: 2px solid #cb2026;
-}
+
 
 .navbar-container {
   position: sticky;
@@ -935,8 +937,83 @@ body.theme--neutral {
   margin: 2rem auto;
 }
 
+/* MARQUEE */
+
+.marquee-wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+  flex:1;
+  width: 100%;
+  gap: 16px;;
+  margin-bottom: 2rem;
+}
+
+.lp-marquee img {
+  display: flex;
+    flex: 1;
+    border-radius: .5rem;
+    max-width: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+
+.lp-marquee image {
+  display: flex;
+    flex: 0;
+    border-radius: .5rem;
+    max-width: 25%;
+    object-fit: cover;
+    flex:1;
+}
+.marquee-content {
+  flex:1;
+  display: flex;
+  flex-direction: column;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.marquee-content .marquee-header  {
+  /* font-size: 3.25rem; */
 
+}
 
+@media (min-width: 1024px) {
+  .marquee-wrapper {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    gap: 16px;;
+    margin-bottom: 2rem;
+  }
+
+  .marque-image  {
+    display: flex;
+      flex: 2 2 67%;
+      border-radius: .5rem;
+      max-width: 67%;
+      object-fit: cover;
+  }
+  .marquee-content {
+    flex: 1 1 33%;
+    display: flex;
+    flex-direction: column;
+    padding-top: 48px;
+    padding-right: 40px;
+    margin-bottom: 80px;
+    flex-direction: column;
+    justify-content: center;
+    gap: 1.5rem;
+  }
+  .typography.headline.xl.marquee-header  {
+    font-size: 3.25rem;
+    line-height: 3.25rem;
+  }
+   .marquee-subheader  {
+    margin-bottom: 1rem;
+  }
+}
 
 /* NAVBAR */
 .navbar-links {
@@ -1065,10 +1142,12 @@ body.theme--neutral {
 }
 
 /* THROWAWAY */
-.spacehelper {
-  height: 1000px;
+.spacer-2 {
+  height: 2rem;
+}
+.slim-header {
+  border-radius: 0.5rem;
 }
-
 .breakpoint span {
   display: none;
 }
@@ -1102,6 +1181,35 @@ body.theme--neutral {
     display: block;
   }
 }
+a.button {
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  max-width: 22.5rem;
+  width: unset;
+  font-family: EuclidCircular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  letter-spacing: 0rem;
+  color: rgb(255, 255, 255);
+  background-color: rgb(37, 18, 58);
+  display: inline-flex;
+  text-align: center;
+  box-sizing: border-box;
+  gap: 0.5rem;
+  transition: color 0.1s ease-in, background-color, border-color;
+  border-width: 0.125rem;
+  border-style: solid;
+  border-image: initial;
+  border-radius: 25rem;
+  padding: 0.875rem 1.875rem;
+  border-color: rgb(37, 18, 58);
+  text-decoration: none;
+}
 
 /* FIX Mobile container  */
 @media (min-width: 0px) and (max-width: 1279px) {
@@ -1156,4 +1264,7 @@ body.theme--neutral {
   .navbar-container {
     display: none;
   }
+  .container {
+    border-radius: 0px !important;
+  }
 }