latest changes

src/js/app.js

@@ -87,7 +87,24 @@ $("body").on("click", ".toggle-sub-nav", (e) => {
     $(e.target).parent("li").toggleClass("children-showing");
 });
 // mobile nav toggle
-document.getElementById("mobile-nav-toggle").addEventListener("click", (e) => {
+$("#mobile-nav-toggle").on("click", (e) => {
     e.preventDefault();
     document.getElementsByTagName("body")[0].classList.toggle("mobile-nav-open");
 });
+
+
+// accordian expander
+// $(".accordian-item .content").fadeOut(0);
+$(".accordian-item a").on("click", (e) => {
+    e.preventDefault();
+    const wrapper = $(e.target).closest(".accordian-item");
+    window.activeThingy = wrapper;
+
+    if (wrapper.hasClass("expanded")) {
+        wrapper.find(".content").fadeOut();
+    } else {
+        wrapper.find(".content").fadeIn();
+    }
+
+    wrapper.toggleClass("expanded");
+});

src/scss/app.scss

@@ -13,10 +13,20 @@
 @import "flex-plain-text";
 @import "flex-logo-slider";
 @import "flex-testimonials";
+@import "flex-block-links";
+@import "flex-veritcal-callouts";
+@import "flex-callout-text";
+@import "flex-accordian-content";
+@import "flex-intro-header";
+
 @import "top-image";
 @import "intro-slide";
+@import "callouts";
 
 @import "shop";
+@import "shop-catgeory";
+@import "product";
 
 @import "locations";
 @import "location";
+@import "search";

src/scss/callouts.scss

@@ -0,0 +1,42 @@
+.callout-page, .callout-category {
+    background-color: $c-white;
+    border-radius: 15px;
+    padding: 1rem;
+    box-shadow: 0 0 30px rgba($c-black, 0.1);
+    margin-bottom: 2rem;
+
+    .image-wrapper {
+        .image-side {
+            aspect-ratio: 1;
+            display: block;
+            width: 500px;
+            background-position: center;
+            background-size: cover;
+        }
+    }
+
+    .meta-top {
+        text-transform: uppercase;
+        color: $c-brightRed;
+        font-size: 16px;
+        letter-spacing: 1px;
+        margin: 0;
+    }
+
+    h3 {
+        @extend .headline-md;
+        text-transform: uppercase;
+        margin-bottom: 1.5rem;
+    }
+
+    .excerpt-wrapper {
+        max-width: 600px;
+        font-size: 1.25rem;
+        line-height: 2rem;
+        margin-bottom: 2rem;
+
+        p {
+            margin: 0;
+        }
+    }
+}

src/scss/flex-accordian-content.scss

@@ -0,0 +1,31 @@
+section.accordian-content {
+    padding: 4rem 0;
+
+    .accordian-item {
+        margin: 3rem 0;
+        box-shadow: 0 0 20px rgba($c-black, 0.1);
+        padding: 1rem;
+
+        svg {
+            transition: transform $transition-time ease;
+        }
+
+        &.expanded {
+            svg {
+                transform: rotate(180deg);
+            }
+        }
+
+        .content {
+            display: none;
+        }
+    }
+
+    a {
+        @extend .montserrat;
+        color: $c-brightRed;
+        text-decoration: none;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+}

src/scss/flex-block-links.scss

@@ -0,0 +1,3 @@
+section.block-links {
+    padding: 4rem 0;
+}

src/scss/flex-callout-text.scss

@@ -0,0 +1,24 @@
+.callout-text {
+    background-color: $c-offWhite;
+    text-align: center;
+    padding: 3rem 0;
+
+    h2 {
+        @extend .headline-lg;
+        text-transform: uppercase;
+
+        span {
+            color: $c-brightRed;
+
+            &.line-2 {
+                display: block;
+            }
+        }
+    }
+
+    p {
+        font-size: 29px;
+        margin-top: 1rem;
+        margin-bottom: 0;
+    }
+}

src/scss/flex-intro-header.scss

@@ -0,0 +1,11 @@
+section.intro-header {
+    background-color: $c-offWhite;
+    padding: 4rem 0;
+
+    h1 {
+        @extend .montserrat;
+        @extend .headline-md;
+        text-transform: uppercase;
+        margin: 0;
+    }
+}

src/scss/flex-veritcal-callouts.scss

@@ -0,0 +1,12 @@
+section.vertical-callouts {
+    background-color: $c-offWhite;
+    margin-bottom: 4rem;
+    padding: 4rem 0;
+
+    h2 {
+        @extend .headline-lg;
+        text-align: center;
+        text-transform: uppercase;
+        margin-bottom: 4rem;
+    }
+}

src/scss/global.scss

@@ -10,6 +10,32 @@ img {
     filter: invert(10%) sepia(79%) saturate(7388%) hue-rotate(2deg) brightness(86%) contrast(111%);
 }
 
+.headline-sm {
+    @extend .montserrat;
+    font-weight: 600;
+    font-size: 40px;
+    line-height: 40px;
+    letter-spacing: -1px;
+
+    @include media-breakpoint-down(md) {
+        font-size: 30px;
+        line-height: 30px;
+    }
+}
+
+.headline-md {
+    @extend .montserrat;
+    font-weight: 600;
+    font-size: 54px;
+    line-height: 54px;
+    letter-spacing: -1px;
+
+    @include media-breakpoint-down(md) {
+        font-size: 40px;
+        line-height: 40px;
+    }
+}
+
 .headline-lg {
     @extend .montserrat;
     font-weight: 600;
@@ -42,13 +68,13 @@ img {
     a, input {
         @extend .montserrat;
         text-transform: uppercase;
-        background-color: $c-red;
+        background-color: $c-brightRed;
         color: $c-white !important;
         text-decoration: none;
         display: inline-block;
         min-height: 47px;
         line-height: 47px;
-        border: 1px solid $c-red;
+        border: 1px solid $c-brightRed;
         border-radius: 25px;
         padding: 0 60px;
         transition: all $transition-time ease;
@@ -56,7 +82,7 @@ img {
 
         &:hover {
             background-color: $c-offWhite;
-            color: $c-red !important;
+            color: $c-brightRed !important;
         }
     }
 

src/scss/product.scss

@@ -0,0 +1,43 @@
+.single-product {
+    .single-product-top {
+        background-color: $c-offWhite;
+        padding: 4rem 0 !important;
+        margin-top: 0 !important;
+    }
+
+    .wc-tabs {
+        list-style-type: none;
+        display: flex;
+        border-bottom: 1px solid $c-black;
+        padding: 0 0 1rem;
+        margin: 0 0 2rem;
+        gap: 2rem;
+
+        li {
+            @extend .montserrat;
+            font-weight: 600;
+            text-transform: uppercase;
+            font-size: 1.5rem;
+
+            a {
+                color: $c-textAlt;
+                text-decoration: none;
+            }
+
+            &.active {
+                position: relative;
+
+                &:after {
+                    content: "";
+                    position: absolute;
+                    top: calc(100% + 1rem);
+                    transform: translateY(-1px);
+                    display: block;
+                    width: 100%;
+                    height: 3px;
+                    background-color: $c-brightRed;
+                }
+            }
+        }
+    }
+}

src/scss/search.scss

@@ -0,0 +1,5 @@
+.search-results {
+    .tile-wrapper {
+        margin-bottom: 1.5rem;
+    }
+}

src/scss/shop-catgeory.scss

@@ -0,0 +1,30 @@
+.category-slice-top {
+    background-color: $c-offWhite;
+    padding: 4rem 0;
+    text-align: center;
+
+    h1 {
+        @extend .headline-lg;
+        text-transform: uppercase;
+    }
+
+    p {
+        font-size: 29px;
+        line-height: 30px;
+    }
+}
+
+.category-slice {
+    padding: 4rem 0 0;
+
+    img {
+        max-height: 300px;
+        width: auto;
+    }
+
+    h2 {
+        @extend .montserrat;
+        font-weight: bold;
+        margin-bottom: 2rem;
+    }
+}

src/scss/shop.scss

@@ -8,7 +8,7 @@ section.woocommerce-wrapper {
 }
 
 
-div.product-tile {
+div.product-tile, div.page-tile {
     border-radius: 15px;
     box-shadow: 0 0 20px rgba($c-black, 0.1);
     padding: 1rem;
@@ -26,7 +26,7 @@ div.product-tile {
         justify-content: center;
         align-items: center;
         margin: 0 !important;
-        // opacity: 0;
+        opacity: 0;
         transition: all $transition-time ease;
         border-radius: 50%;
 
@@ -119,4 +119,24 @@ div.product-tile {
         text-align: center;
         margin: 0;
     }
+
+    a.learn-more {
+        @extend .montserrat;
+        text-transform: uppercase;
+        color: $c-brightRed;
+        font-weight: bold;
+        text-decoration: none;
+        padding-bottom: 1rem;
+    }
+}
+
+.page-tile {
+    h2 {
+        @extend .montserrat;
+        text-align: left !important;
+        font-size: 32px !important;
+        line-height: 37px !important;
+        text-transform: uppercase;
+        margin: 1rem 0;
+    }
 }

src/scss/variables.scss

@@ -1,6 +1,6 @@
 $c-black: #000;
 $c-white: #fff;
-$c-offWhite: #f5f5f5;
+$c-offWhite: #f2f2f2;
 $c-lightGrey: #d9d9d9;
 $c-grey: #cbcbcb;
 $c-midGrey: #acacac;