Merge pull request #176 from cb-talent-development/topic/CE-2254-Styl…

…eBaseUpgrade

CE-2254 / CE-2845: Hiring Redesign Stylebase Upgrade

sass/directives/00_variables/_sizing.scss

@@ -30,10 +30,12 @@ $base-spacing-medium-small: 20px;
 $base-spacing-medium: 30px;
 $base-spacing-large: 50px;
 $base-spacing-xlarge: 70px;
+$base-spacing-xxlarge-small: 100px;
+$base-spacing-xxlarge: 130px;
 
-$section-padding: 70px;
+$section-padding: 80px;
 $section-padding--mobile: 50px;
-$header-padding: 70px;
+$header-padding: 80px;
 
 $container-width: 1200px;
 $container-edge-padding: 20px; // Use this if using an unconventional body container and still need the default left /right padding our .containers have (20px)

sass/directives/00_variables/_top_bar.scss

@@ -4,8 +4,9 @@ $top-bar--padding: 12px;
 $top-bar--height--mobile: 70px;
 $top-bar--logo-width: 295px;
 $top-bar--logo-height: 68px;
-$top-bar--subnav-offset: 90px;
-$top-bar--body-offset: 50px;
+$top-bar--subnav-offset: 68px;
+$top-bar--body-offset: 68px;
+$top-bar--body-offset-tablet: 45px;
 
 // These affect positioning of the hero, subnav, buy box, search modal
 $top-bar--height: $top-bar--logo-height + ($top-bar--padding * 2);

sass/directives/00_variables/colors/_colors.scss

@@ -101,7 +101,8 @@ $header-background-color--mobile-nav: white;
 $header-background-color: white; // mobile?
 $header-mobile-icon-color: $anchor-blue;
 $header-mobile-text-hover-color: white;
-$header-text-color: $anchor-blue;
+$header-text-color: $anchor-blue-dark;
+$header-text-color-grey: $grey-demon;
 $header-text-hover-color: $grey-lighter;
 $header-background-secondary-color: $grey-lightest;
 $header-flyout-color: $header-background-color;

sass/directives/00_variables/typography/_type_styles.scss

@@ -4,22 +4,63 @@
   font-weight: $font-weight-light;
 }
 
+@mixin font-style--xxl-bold { // Style 1 (bold): hero headers
+  font-size: $font-size-xxl;
+  font-weight: $font-weight-bold;
+}
+
 @mixin font-style--xl-light {  // Style 2: section headers and subheaders
   font-size: $font-size-xl-base;
   font-weight: $font-weight-light;
 }
 
+@mixin font-style--xl-bold {  // Style 2 (bold): section headers and subheaders
+  font-size: $font-size-xl-base;
+  font-weight: $font-weight-bold;
+}
+
+@mixin font-style-xl-bold-responsive {
+  letter-spacing: $letter-spacing-small;
+  font-size: $font-size-27;
+  font-weight: $font-weight-bold;
+
+  @media only screen and (min-width: $medium-screen-min) {
+    font-size: $font-size-xl-base;
+  }
+}
+
 @mixin font-style--large-regular {  // Style 3: hero subheaders
   font-size: $font-size-large;
   font-weight: $font-weight-regular;
 }
 
+@mixin font-style--large-bold {  // Style 3.1 (bold): hero subheaders
+  font-size: $font-size-large;
+  font-weight: $font-weight-bold;
+}
+
+@mixin font-style--med-small-light { // Style 3.2 (medium): hero subheaders
+  font-size: $font-size-med-small;
+  font-weight: $font-weight-regular;
+}
+
+@mixin font-style-med-small-bold { // Style 3.3 (medium, bold): hero subheaders
+  font-weight: $font-weight-bold;
+  font-size: $font-size-med-small;
+}
+
 @mixin font-style--med-bold-uppercase { // Style 4: section headers, buttons
   font-size: $font-size-med;
   font-weight: $font-weight-bold;
   text-transform: uppercase;
 }
 
+@mixin font-style--med-bold { // Style 4 (capitalize): section headers, buttons
+  font-size: $font-size-med;
+  font-weight: $font-weight-bold;
+  text-transform: capitalize;
+}
+
 @mixin font-style--small-bold-uppercase { // Style 5: navigation, labels
   font-size: $font-size-small;
   font-weight: $font-weight-bold;
@@ -32,7 +73,7 @@
 }
 
 @mixin font-style--med-regular { // Style 7: body copy
-  font-size: $font-size-med-large;
+  font-size: $font-size-med;
   font-weight: $font-weight-regular;
 }
 

sass/directives/00_variables/typography/_typography.scss

@@ -12,10 +12,13 @@ $font-size-xl-base: 2rem;
 $font-size-xl: 1.875rem; // 30px
 $font-size-large: 1.375rem; // 22px
 $font-size-med-large: 1.25rem;
+$font-size-med-small: 1.2rem;
 $font-size-med: 0.95rem; // 15px
 $font-size-small: 0.8125rem; // 13px
 $font-size-smallest: 0.6875rem; // 11px
 $font-size-base: 1rem;
+$font-size-27: 1.7rem;
+$font-size-24: 1.5rem;
 
 // Font Sizes - Non-Standard
   // NOTE: Use namespacing so usage is clear.
@@ -51,10 +54,12 @@ $base-line-height: 1.5;
 $header-line-height: 1.25;
 
 // Type Spacing
+$type-margin-super: 80px;
 $type-margin-xlarge: 40px;
 $type-margin-large: 28px; // hero headers
 $type-margin-medium: 25px;
 $type-margin: 20px;
 $type-margin--small: 12px; // used with headers/fonts font-size-med and smaller
 
 $type-indent: 2em;
+$letter-spacing-small: 1px;

sass/directives/02_base_components/button/_button.scss

@@ -71,7 +71,7 @@ $massive-button-horizontal-padding: $base-input-font-size * 2;
   background-color: $primary-button-color;
   color: $primary-button-text-color;
   border-color: $primary-button-border-color;
-  text-transform: uppercase;
+  text-transform: capitalize;
 
   &:visited {
     color: $primary-button-text-color;
@@ -92,7 +92,7 @@ $massive-button-horizontal-padding: $base-input-font-size * 2;
   background-color: $secondary-button-color;
   color: $secondary-button-text-color;
   border-color: $secondary-button-border-color;
-  text-transform: uppercase;
+  text-transform: capitalize;
 
   &:visited {
     color: $secondary-button-text-color;
@@ -113,7 +113,7 @@ $massive-button-horizontal-padding: $base-input-font-size * 2;
   background-color: $tertiary-button-color;
   color: $tertiary-button-text-color;
   border-color: $tertiary-button-border-color;
-  text-transform: uppercase;
+  text-transform: capitalize;
 
   &:visited {
     color: $tertiary-button-text-color;
@@ -134,7 +134,7 @@ $massive-button-horizontal-padding: $base-input-font-size * 2;
   background-color: $quarternary-button-color;
   color: $quarternary-button-text-color;
   border-color: $quarternary-button-border-color;
-  text-transform: uppercase;
+  text-transform: capitalize;
 
   &:visited {
     color: $quarternary-button-text-color;
@@ -155,7 +155,7 @@ $massive-button-horizontal-padding: $base-input-font-size * 2;
   background-color: $quinary-button-color;
   color: $quinary-button-text-color;
   border-color: $quinary-button-border-color;
-  text-transform: uppercase;
+  text-transform: capitalize;
 
   &:visited {
     color: $quinary-button-text-color;
@@ -176,7 +176,7 @@ $massive-button-horizontal-padding: $base-input-font-size * 2;
   background-color: $senary-button-color;
   color: $senary-button-text-color;
   border-color: $senary-button-border-color;
-  text-transform: uppercase;
+  text-transform: capitalize;
 
   &:visited {
     color: $senary-button-text-color;
@@ -197,7 +197,7 @@ $massive-button-horizontal-padding: $base-input-font-size * 2;
   background-color: $negative-button-color;
   color: $negative-button-text-color;
   border-color: $negative-button-border-color;
-  text-transform: uppercase;
+  text-transform: capitalize;
 
   &:visited {
     color: $negative-button-text-color;
@@ -224,7 +224,7 @@ $massive-button-horizontal-padding: $base-input-font-size * 2;
   padding-right: 0;
   margin-left: $base-button-horizontal-padding;
   margin-right: $base-button-horizontal-padding;
-  text-transform: uppercase;
+  text-transform: capitalize;
   white-space: pre-line;
 
   &:visited {

sass/directives/02_base_components/headings/_headings.scss

@@ -1,11 +1,11 @@
 @mixin heading--hero {
   h1 {
-    @include font-style--xxl-light;
+    @include font-style-xl-bold-responsive;
     margin-bottom: 0;
   }
 
   p {
-    @include font-style--large-regular;
+    @include font-style--med-small-light;
     margin-top: $type-margin-large;
   }
 }
@@ -18,17 +18,15 @@
   }
 
   p {
-    @include font-style--xl-light;
+    @include font-style-xl-bold-responsive;
     line-height: normal;
     margin-top: $type-margin;
   }
 }
 
 @mixin heading--section {
-  margin-bottom: $type-margin;
-
   &__heading {
-    @include font-style--xl-light;
+    @include font-style-xl-bold-responsive;
     @include base-heading-copy;
   }
 
@@ -38,38 +36,44 @@
 }
 
 @mixin heading--section--small {
-  @include font-style--med-bold-uppercase;
-  margin-bottom: $type-margin;
+  @include font-style-xl-bold-responsive;
   color: $header-text-color;
 }
 
 @mixin heading--section--w-subhead {
-  margin-bottom: $type-margin-xlarge;
+  margin-bottom: $type-margin-super;
+
+  @media only screen and (max-width: $small-screen-max) {
+    margin-bottom: $type-margin-xlarge + 10;
+  }
 
   &__heading {
     @include font-style--med-bold-uppercase;
-    margin-bottom: 0;
-    color: $header-text-color;
+    color: $header-text-color-grey;
+    margin-bottom: $type-margin;
+    letter-spacing: $letter-spacing-small;
+    margin-bottom: $type-margin;
   }
 
   &__subheading {
-    margin-top: $type-margin;
-    @include font-style--xl-light;
+    margin-bottom: $type-margin;
+    @include font-style-xl-bold-responsive;
     color: $header-text-color;
   }
 }
 
 @mixin heading--item {
-  @include font-style--med-bold-uppercase ;
+  @include font-style--med-bold;
   margin-bottom: $type-margin--small;
   color: $header-text-color;
+  font-size: $font-size-med-small;
 
   @include reset-paragraph;
 }
 
 @mixin heading--small {
   h1 {
-    @include font-style--xxl-light;
+    @include font-style-xl-bold-responsive;
     margin-bottom: 0;
   }
 

sass/directives/03_components/layout_quad/_layout_quad.scss

@@ -17,7 +17,7 @@ $_quad-layout-breakpoint--min: calc(#{$_quad-layout-breakpoint} + 1px);
   li {
     width: 50%;
     position: relative;
-    padding: 0 $base-spacing-xlarge 2.5rem;
+    padding: 0 $base-spacing-xxlarge-small 2.5rem;
     list-style: none;
 
     @media only screen and (max-width: $_quad-layout-breakpoint) {

sass/directives/03_components/layout_split/_layout_split.scss

@@ -66,7 +66,7 @@
 
 @mixin text-image-panels-content {
   [class$='__heading'] {
-    @include font-style--xl-light;
+    @include font-style-xl-bold-responsive;
     max-width: 25ch;
     margin-bottom: $base-spacing-medium;
 

sass/directives/03_components/visual_guides/_visual_guides.scss

@@ -103,9 +103,14 @@ $visual-guide-breakpoint-small: 750px;
 
   .visual-guide__item-description {
     h3 {
-      font-size: 1.875rem;
-      font-weight: $font-weight-light;
+      letter-spacing: $letter-spacing-small;
+      font-size: $font-size-base;
+      font-weight: $font-weight-bold;
       margin-bottom: $base-spacing;
+
+      @media only screen and (min-width: $medium-screen-min) {
+        font-size: $font-size-med-small;
+      }
     }
 
     p {
@@ -136,6 +141,7 @@ $visual-guide-breakpoint-small: 750px;
 
     &:after {
       content: counter(overview-count);
+      font-weight: $font-weight-bold;
     }
 
     @media only screen and (min-width: $visual-guide-breakpoint-small) {

sass/selectors/_typography.scss

@@ -2,17 +2,17 @@
 
 h1 {
   @include base-heading-copy;
-  @include font-style--xxl-light;
+  @include font-style-xl-bold-responsive;
 }
 
 h2 {
   @include base-heading-copy;
-  @include font-style--xl-light;
+  @include font-style-xl-bold-responsive;
 }
 
 h3 {
   @include base-heading-copy;
-  @include font-style--large-regular;
+  @include font-style-med-small-bold;
 }
 
 h4 {
@@ -34,10 +34,6 @@ h6 {
 
 p {
   margin-bottom: $type-margin;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 // Other Default Typography
@@ -83,6 +79,10 @@ cite {
   @include font-style--xl-light;
 }
 
+.font-style--xl-bold {  // Style 2 (bold): section headers and subheaders
+  @include font-style--xl-bold;
+}
+
 .font-style--large-regular {  // Style 3: hero subheaders
   @include font-style--large-regular;
 }