Resolve merge conflict

ivallogenes · Aug 15, 2024 · 77acd5a · 77acd5a
2 parents a849b0c + e47d7a3
commit 77acd5a
Show file tree

Hide file tree

Showing 11 changed files with 149 additions and 5 deletions.
diff --git a/blocks/product-list-page/product-list-page.css b/blocks/product-list-page/product-list-page.css
@@ -8,6 +8,11 @@
     object-fit: contain;
 }
 
+/* Hide empty divs */
+.product-list-page-wrapper div:empty {
+    display: none;
+}
+
 @media (width >= 750px) {
     .product-list-page {
         min-height: auto;

diff --git a/blocks/product-recommendations/product-recommendations.css b/blocks/product-recommendations/product-recommendations.css
@@ -1,3 +1,9 @@
+.product-recommendations-container {
+    max-width: 1264px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 main .section>div.product-recommendations-wrapper {
     max-width: 100%;
     padding: 0;
@@ -10,6 +16,13 @@ main .section>div.product-recommendations-wrapper {
     min-height: 512px;
 }
 
+.product-recommendations h2 {
+    font-family: poppins;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 1.2;
+}
+
 .product-recommendations .scrollable {
     overflow-x: scroll;
     scroll-snap-type: x mandatory;
@@ -21,6 +34,7 @@ main .section>div.product-recommendations-wrapper {
     flex-wrap: nowrap;
     gap: 2rem;
     margin: 0;
+    padding: 10px;
 }
 
 .product-recommendations .product-grid-item img {
@@ -40,8 +54,13 @@ main .section>div.product-recommendations-wrapper {
     overflow: hidden;
     box-sizing: border-box;
     margin: 0;
-    padding: .5rem 1rem 0 0;
+    padding: 1rem;
     display: inline-block;
+    font-family: 'poppins';
+    font-weight: 500;
+    font-size: 18px;
+    color: black;
+    text-align: center;
 }
 
 .product-recommendations .product-grid picture {
@@ -57,6 +76,11 @@ main .section>div.product-recommendations-wrapper {
     width: 100%;
     object-fit: contain;
     background: none;
+    transition: all 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
+
+    &:hover {
+        transform: scale(.9);
+    }
 }
 
 .product-recommendations .product-grid .placeholder {
@@ -71,10 +95,25 @@ main .section>div.product-recommendations-wrapper {
 .product-recommendations .product-grid-item {
     margin: 0;
     scroll-snap-align: start;
+    transition: all 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
+
+    &:hover {
+        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.12), 0 3px 7px rgba(0, 0, 0, 0.24);
+    }
+}
+
+.pdp-product__title {
+    font-family: 'poppins';
+    font-weight: 500;
 }
 
 @media (width >= 900px) {
     .product-recommendations {
         min-height: 534px;
+
+        h2 {
+            font-size: 35px;
+            line-height: 1.4;
+        }
     }
 }
diff --git a/fonts/poppins-extrabold-webfont.woff2 b/fonts/poppins-extrabold-webfont.woff2
diff --git a/fonts/poppins-light-webfont.woff2 b/fonts/poppins-light-webfont.woff2
diff --git a/fonts/poppins-medium-webfont.woff2 b/fonts/poppins-medium-webfont.woff2
diff --git a/fonts/poppins-regular-webfont.woff2 b/fonts/poppins-regular-webfont.woff2
diff --git a/fonts/poppins-semibold-webfont.woff2 b/fonts/poppins-semibold-webfont.woff2
diff --git a/styles/fonts.css b/styles/fonts.css
@@ -15,3 +15,43 @@
   src: url('../fonts/roboto-regular.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+@font-face {
+  font-family: poppins;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/poppins-extrabold-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: poppins;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/poppins-semibold-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: poppins;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/poppins-medium-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: poppins;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/poppins-regular-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: poppins;
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('../fonts/poppins-light-webfont.woff2') format('woff2');
+}
diff --git a/styles/sass/_cms-pages.scss b/styles/sass/_cms-pages.scss
@@ -1,6 +1,22 @@
 .section {
   &.highlight-banner {
     background-image: linear-gradient(45deg, transparent, $color-olive-green);
+    padding: 24px;
+
+    p {
+      font-family: 'poppins';
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 1.2;
+      margin: 0;
+
+      &.button-container {
+        margin-top: 24px;
+        a {
+          margin: 0;
+        }
+      }
+    }
 
     .columns > div > .columns-img-col img {
       box-shadow: none;
@@ -40,5 +56,8 @@
         }
       }
     }
+    &.highlight-banner {
+      padding: 48px;
+    }
   }
 }
diff --git a/styles/styles-custom.css b/styles/styles-custom.css
diff --git a/styles/styles.css b/styles/styles.css
@@ -214,6 +214,16 @@ h6 {
   letter-spacing: var(--type-headline-2-default-letter-spacing);
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: poppins;
+  margin: 16px 0;
+}
+
 p,
 dl,
 ol,
@@ -373,13 +383,31 @@ main img {
 
 /* sections */
 main .section {
-  padding: var(--spacing-large) var(--spacing-small);
+  padding: var(--spacing-big) var(--spacing-small);
   word-wrap: break-word;
 }
 
+/* Typography */
+.ds-sdk-product-item__product-name.font-headline-2-strong {
+  font-family: 'poppins';
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.ds-sdk-product-price .font-headline-2-default {
+  font-size: 15px;
+}
+
+.dropin-price--strikethrough {
+  color: gray;
+}
+.dropin-price--default {
+  color: black;
+}
+
 @media (width >=600px) {
   main .section {
-    padding: var(--spacing-large) var(--spacing-big);
+    padding: var(--spacing-xbig) var(--spacing-big);
   }
 }