PROD-2321

Author: dave-armstrong-topcoder

src-ts/lib/styles/mixins/_breakpoints.mixins.scss

@@ -67,6 +67,12 @@
     }
 }
 
+@mixin ltelg {
+    @media (max-width: #{$lg-max}) {
+        @content;
+    }
+}
+
 @mixin lg {
     @media (min-width: #{$lg-min}) and (max-width: #{$lg-max}){
         @content;

src-ts/tools/work/work-type-banner/WorkTypeBanner.scss renamed to src-ts/tools/work/work-type-banner/WorkTypeBanner.module.scss

@@ -1,14 +1,25 @@
-@import "../../../styles/include";
+@import '../../../lib/styles/mixins';
+@import '../../../lib/styles/variables';
 
 .heroContainer {
-  position: static;
-  min-width: 610px;
-  left: 0px;
-  top: 0px;
-  margin: 16px 0px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0px 0px 0px 0px;
+  gap: 24px;
+
+
+  height: 104px;
+
+  background: linear-gradient(84.92deg, #363D8C 2.08%, #723390 97.43%);
+  border-radius: 0px;
+
+  /* Inside auto layout */
+  flex: none;
+  order: 2;
+  align-self: stretch;
+  flex-grow: 0;
 
-  display: grid;
-  grid-template-columns: 1fr 359px;
 
   &.website-design,
   &.website-design-legacy,
@@ -22,20 +33,25 @@
     background: linear-gradient(84.92deg, #723390 2.08%, #8C384F 97.43%);
   }
 
-  border-radius: 8px;
+  &.bug-hunt {
+    background: linear-gradient(84.92deg, #363D8C 2.08%, #723390 97.43%);
+  }
+
   margin-bottom: -35px;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 
 
-  @include mobile {
-    min-width: 0;
-    max-width: 100%;
+  @include ltelg {
+    height: 283px;
     overflow: hidden;
     flex-direction: column;
+    align-items: flex-start;
+    padding: 0px;
     grid-template-columns: auto;
     margin-top: 0 !important;
     border-radius: 0 !important;
+    gap: 0px;
   }
 
   .heroBackgroundContainer {
@@ -52,52 +68,63 @@
 
     border-radius: 0 8px 8px 0;
 
-    @include mobile {
+    @include ltelg {
       width: 100%;
       height: 156px;
       order: 0;
     }
 
+    &.bug-hunt {
+      background: url("./images/bug-hunt.png");
+      background-size: cover;
+
+      @include ltelg {
+        background: url("./images/bug-hunt-mobile.png");
+        background-size: cover;
+        background-position: bottom;
+      }
+    }
+
     &.data-exploration {
-      background: url("../../../assets/images/data-exploration.png");
+      background: url("./images/data-exploration.png");
       background-size: cover;
 
-      @include mobile {
-        background: url("../../../assets/images/data-exploration-mobile.png");
+      @include ltelg {
+        background: url("./images/data-exploration-mobile.png");
         background-size: cover;
         background-position: bottom;
       }
     }
 
     &.find-me-data {
-      background: url("../../../assets/images/find-me-data.png");
+      background: url("./images/find-me-data.png");
       background-size: cover;
 
-      @include mobile {
-        background: url("../../../assets/images/find-me-data-mobile.png");
+      @include ltelg {
+        background: url("./images/find-me-data-mobile.png");
         background-size: cover;
         background-position: bottom;
       }
     }
 
     &.problem-statement--data-advisory {
-      background: url("../../../assets/images/problem-statement.png");
+      background: url("./images/problem-statement.png");
       background-size: cover;
 
-      @include mobile {
-        background: url("../../../assets/images/problem-statement-mobile.png");
+      @include ltelg {
+        background: url("./images/problem-statement-mobile.png");
         background-size: cover;
         background-position: bottom;
       }
     }
 
     &.website-design,
     &.website-design-legacy {
-      background: url("../../../assets/images/website-design-v2.png");
+      background: url("./images/website-design-v2.png");
       background-size: cover;
 
-      @include mobile {
-        background: url("../../../assets/images/website-design-banner-mobile.png");
+      @include ltelg {
+        background: url("./images/website-design-banner-mobile.png");
         background-size: cover;
         background-position: bottom;
       }
@@ -108,9 +135,8 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    padding: 32px 0px;
-
-    color: $black-0;
+    padding: 16px 0px;
+    color: $tc-white;
 
     position: static;
     left: 32px;
@@ -122,6 +148,11 @@
     flex-grow: 1;
     margin: 0px 24px;
 
+    @include ltelg {
+      margin: 0px 16px;
+      padding: 8px 0px;
+    }
+
     .heroHeader {
       /* Auto layout */
       display: flex;
@@ -172,29 +203,53 @@
         font-size: 42px;
         font-weight: 400;
 
-        @include mobile {
+        @include ltelg {
           flex: auto;
         }
 
         .heroHeaderTitle {
-          display: flex;
+          height: 32px;
+          font-family: 'Barlow Condensed';
+          font-style: normal;
+          font-weight: 600;
+          font-size: 34px;
+          line-height: 32px;
           text-transform: uppercase;
+          color: #FFFFFF;
 
-          @include mobile {
+          /* Inside auto layout */
+          flex: none;
+          order: 0;
+          align-self: stretch;
+          flex-grow: 0;
+
+          @include ltelg {
             font-size: 28px;
             line-height: 32px;
+            width: 288px;
           }
         }
 
         .heroHeaderSubtitle {
-          font-size: 17px;
-          max-width: 713px;
-          line-height: 24px;
-          font-weight: 500;
-
-          @include mobile {
+          height: 24px;          
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 700;
+          font-size: 16px;
+          line-height: 24px;          
+          color: #FFFFFF;
+
+          /* Inside auto layout */
+     			flex: none;
+     			order: 1;
+     			align-self: stretch;
+          flex-grow: 0;
+
+          @include ltelg {
             font-size: 14px;
             line-height: 20px;
+            width: 288px;
+            height: 60px;
           }
         }
       }
@@ -233,7 +288,7 @@
   column-gap: 8px;
   justify-content: space-around;
 
-  @include mobile {
+  @include ltelg {
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
@@ -255,7 +310,7 @@
     height: 172px;
 
     /* gray/white */
-    background: $black-0;
+    background: $tc-white;
     /* Button hover shadow */
     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
     border-radius: 8px;