kcc-gem-theme 1.33.15 → 1.34.15

data/assets/scss/0-tools/_vars.scss

@@ -31,6 +31,7 @@ $accent-blue: #005bac;        // Accent blue-color used in all links and link bu
 $color-blue-light: #ccdde1;
 $color-tan-light: #fcf1d6;
 $color-orange: #f99e1b;
+$color-blue-light-nav: #b8babc;
 
 $black: #000;
 $grey-1: #666;

data/assets/scss/1-base/_header-global.scss

@@ -0,0 +1,410 @@
+// Styles for the global KCC header
+// ================================
+
+.header-global {
+  padding-left: 0;
+  padding-right: 0;
+  &__brand {
+    position: absolute;
+    left: 1rem;
+    top: 0;
+  }
+  &__navbar--padding {
+    padding: 0;
+  }
+  &__nav-top {
+    background-color: $primary-blue;
+    flex-direction: row;
+    padding-left: 1rem;
+    padding-right: calc(2.5rem + 20px);
+    width: 100%;
+  }
+  &__nav-bottom {
+    background-color: $primary-red;
+    flex-direction: row;
+    padding-left: 1rem;
+    padding-bottom: .3125rem;
+    padding-right: 1rem;
+    padding-top: .3125rem;
+    width: 100%;
+  }
+  &__nav-local {
+    border-bottom-color: $grey-5;
+    flex-direction: row;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    padding-bottom: .5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: .5rem;
+    width: 100%;
+  }
+  &__navbar--toggler { // Mostly sdtraight from BOOTSTRAP 4 Styling
+    border-color: rgba(0,0,0,.1);
+    color: rgba(0,0,0,.5);
+    position: absolute;
+    right: 1rem;
+    top: 3.25rem;
+    z-index: 1032;
+    & .navbar-toggler-icon { // Straight from the BOOTSTRAP 4 Styling
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+    }
+  }
+  &__search-icon,
+  &__close-icon {
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: .25rem;
+    display: inline-block;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: .375rem .75rem;
+    position: absolute;
+    text-align: center;
+    top: .125rem;
+    right: .3125rem;
+    user-select: none;
+    vertical-align: middle;
+    transition-property: opacity;
+    transition-timing-function: ease-in-out;
+    transition-duration: .1s;
+    z-index: 1032;
+  }
+}
+
+@media screen and (min-width: 410px) {
+  .header-global__navbar--toggler {
+    top: 3.2rem;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .header-global__navbar--toggler {
+    top: 3.25rem;
+  }
+}
+
+.header-global__search-icon--hidden,
+.header-global__close-icon--hidden {
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+
+@media screen and (max-width: 992px) {
+  #headerGlobalNavbarContent.collapse.show .header-global__nav-top,
+  #headerGlobalNavbarContent.collapsing .header-global__nav-top {
+    padding-right: 1rem;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  #headerGlobalNavbarContent.collapse.show .header-global__navbar-nav--divider::after,
+  #headerGlobalNavbarContent.collapsing .header-global__navbar-nav--divider::after {
+    background-color: $grey-5;
+    content: '';
+    display: block;
+    height: .125rem;
+    margin-bottom: 1rem;
+    margin-top: .5rem;
+    width: 100%;
+  }
+  #headerGlobalNavbarContent.collapse.show .header-global__navbar-nav--divider:nth-child(2)::after,
+  #headerGlobalNavbarContent.collapsing .header-global__navbar-nav--divider:nth-child(2)::after {
+    margin-bottom: 0;
+  }
+}
+
+#headerGlobalNavbar.header-global__navbar--search-toggle {
+  top: 3.5rem;
+}
+
+@media screen and (min-width: 992px) {
+  .navbar-expand-lg .navbar-nav .header-global__nav-local--navbar-brand.nav-link {
+    padding-left: 0;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-bottom--nav-link {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-top--nav-link {
+    padding-top: .3125rem;
+    padding-bottom: .3125rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .navbar-expand-lg .navbar-nav .header-global__nav-top--nav-link {
+    padding-left: .9rem;
+    padding-right: .9rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  a.header-global__nav-top--nav-link {
+    position: relative;
+  }
+  a.header-global__nav-top--nav-link::after,
+  a.header-global__nav-top--nav-link::after {
+    background-color: $orange-heading;
+    bottom: 0;
+    content: '';
+    display: block;
+    height: .125rem;
+    opacity: 0;
+    position: absolute;
+    transition: opacity 0.3s,transform 0.3s;
+    width: calc(100% - 1.8rem); // The `- 1.8rem` in `calc (100% - 1.8rem)` offsets the padding-left/right: .9rem on the links
+  }
+  a.header-global__nav-top--nav-link:hover::after,
+  a.header-global__nav-top--nav-link:focus::after {
+    opacity: 1;
+    transform: translateY(-0.2em);
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-bottom {
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-local {
+    padding-bottom: .5rem;
+    padding-top: .5rem;
+  }
+}
+
+.header-global__brand--svg {
+  fill: $white;
+  height: auto;
+  width: 85%;
+}
+
+@media screen and (min-width: 360px) {
+  .header-global__brand--svg {
+    width: 95%;
+  }
+}
+
+@media screen and (min-width: 400px) {
+  .header-global__brand--svg {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__brand {
+    top: 2.5rem;
+  }
+}
+
+#headerGlobalNavbarContent.collapse.show .typography__nav-heading,
+#headerGlobalNavbarContent.collapsing .typography__nav-heading {
+  font-size: 1.5rem;
+}
+
+#headerGlobalNavbarContent.collapse.show .navbar-nav,
+#headerGlobalNavbarContent.collapsing .navbar-nav {
+  flex-direction: column;
+  background-color: $grey-4;
+}
+
+#headerGlobalNavbarContent.collapse.show .header-global__nav-top, // BOOTSTRAP 4 Selectors for when the menu is open/opening
+#headerGlobalNavbarContent.collapsing .header-global__nav-top { // This rule-group is to pull the menu down, on mobile/tablet and provide a red background for the KCC text-logo & Search Icon.
+  position: relative;
+  top: 2.65rem; // Pull the menu down from its normal spot
+  margin-bottom: 2.65rem;
+  &::before { // Create & position a pseudo-element to make the red background
+    background-color: $primary-red;
+    content: '';
+    display: block;
+    height: 2.65rem;
+    position: absolute;
+    top: -2.65rem;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: -1; // This ensures the pseudo-element is behind when it has position: absolute
+  }
+}
+
+@media screen and (max-width: 992px) {
+  #headerGlobalNavbarContent.collapse:not(.show) {
+    display: block;
+    & .header-global__nav-top {
+      display: none;
+      position: absolute;
+    }
+    & .header-global__nav-bottom .nav-link,
+    .header-global__nav-local .nav-link:not(.navbar-brand) {
+      visibility: hidden;
+    }
+  }
+}
+
+.header-global__nav--search-icon,
+.header-global__nav--close-icon {
+  background-size: 20px 20px;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  height: 20px;
+  pointer-events: none;
+  width: 20px;
+}
+
+.header-global__search-collapse {
+  left: .5rem;
+  margin-left: auto;
+  margin-right: auto;
+  position: absolute;
+  right: 2rem;
+  top: -56px;
+  width: 95%;
+}
+
+@media screen and (min-width: 360px) {
+  .header-global__search-collapse {
+    left: .55rem;
+  }
+}
+
+@media screen and (min-width: 410px) {
+  .header-global__search-collapse {
+    left: .65rem;
+  }
+}
+
+@media screen and (min-width: 410px) {
+  .header-global__search-collapse {
+    left: 1rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .header-global__search-collapse {
+    left: 1.25rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__search-collapse {
+    left: 1.5rem;
+  }
+}
+
+.header-global__search-collapse.header-global__search-collapse--visible {
+  top: -46px;
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__search-collapse.header-global__search-collapse--visible {
+    top: -40px;
+  }
+}
+
+.header-global__navbar--search-toggle {
+  top: 50px;
+}
+
+.header-global__navbar--search-toggle::before {
+  background-color: $primary-red;
+  content: '';
+  display: block;
+  height: 64px;
+  position: absolute;
+  top: -60px;
+  width: 100%;
+}
+
+@media screen and (min-width: 992px) {
+.header-global__navbar--search-toggle::before {
+    background-color: $primary-blue;
+  }
+}
+
+.header-global__dropdown.show {
+  background-color: $color-blue-light-nav;
+}
+
+@keyframes meganav {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-bottom .dropdown:hover .dropdown-menu,
+  .header-global__nav-bottom .dropdown .dropdown-menu:hover {
+    animation-duration: .5s;
+    animation-name: meganav;
+    display: block !important; // Because Bootstrap loves to use !important
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-bottom .dropdown-item {
+    color: $grey-1;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-bottom .dropdown:hover {
+    background-color: $color-blue-light-nav;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .nav-item.dropdown.header-global__dropdown--position { // First 2 classes in this selector are to override BS4 styling
+    position: static; // Needed to allow repositioning of the open dropdown menu
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__dropdown-menu--full-width {
+    left: .75rem;
+    right: .75rem;
+    top: 5.325rem;
+  }
+}
+
+@media screen and (min-width: 1300px) {
+  .header-global__dropdown-menu--full-width {
+    left: 1rem;
+    right: 1rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__drodpown-menu--img {
+    width: 280px;
+    &--border {
+      border: thin solid $grey-8;
+    }
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .header-global__core::after { // This provides the light-gray background for the navbar in mobile on core sites only
+    content: '';
+    display: block;
+    height: 60px;
+    background-color: $grey-4; // Same light-gray as in Bootstrap
+    border-bottom-color: $grey-5; // Same border-bottom as in Bootstrap
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+  }
+}

data/assets/scss/1-base/_links.scss

@@ -103,3 +103,18 @@
     text-decoration: none;
   }
 }
+
+@media screen and (min-width: 992px) {
+  .links__header-global--nav-local {
+    position: relative;
+  }
+  .active .links__header-global--nav-local::after {
+    background-color: $primary-red;
+    bottom: .125rem;
+    content: '';
+    display: block;
+    height: .145rem;
+    position: absolute;
+    width: calc(100% - 1rem);
+  }
+}

data/assets/scss/1-base/_typography.scss

@@ -25,7 +25,7 @@ body {
     color: $primary-red;
   }
   &--smaller {
-    font-size: 1.2rem;
+    font-size: 1.25rem;
   }
 }
 
@@ -33,14 +33,14 @@ body {
   .typography__nav-heading {
     font-size: 1.8rem;
     &--smaller {
-      font-size: 1.35rem;
+      font-size: 1.5rem;
     }
   }
 }
 
 @media screen and (min-width:410px) {
   .typography__nav-heading {
-    font-size: 1.5rem;
+    font-size: 2rem;
   }
 }
 
@@ -139,12 +139,78 @@ body {
   font-weight: $font-weight-boldish;
 }
 
+.typography__header-global--nav-top,
+.typography__header-global--nav-bottom,
+.typography__header-global--nav-local {
+  color: $primary-blue;
+  font-family: $font-family-oswald;
+  font-size: 1rem;
+  font-weight: 500;
+  letter-spacing: 0.05rem;
+  padding-bottom: .25rem;
+  padding-top: .25rem;
+  text-transform: capitalize;
+}
+
+@media screen and (min-width: 992px) {
+  .typography__header-global--nav-top {
+    color: $color-blue-light-nav;
+    font-size: 1.1rem;
+    &:hover,
+    &:focus {
+      color: $color-blue-light-nav;
+    }
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .typography__header-global--nav-bottom {
+    color: $white;
+    font-size: 1.05rem;
+    font-weight: 400;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .typography__header-global--nav-bottom:hover,
+  .typography__header-global--nav-bottom:focus,
+  .header-global__dropdown:hover .typography__header-global--nav-bottom,
+  .header-global__dropdown:focus .typography__header-global--nav-bottom {
+    color: $primary-blue;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .typography__header-global--nav-local {
+    font-size: 1rem;
+    font-weight: 400;
+  }
+  & .nav-link {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+}
+
 .typography__nav-link {
+  color: $white;
   font-family: $font-family-oswald;
+  font-size: 1.05rem;
+  font-weight: 400;
+  letter-spacing: 0.05rem;
+  text-transform: capitalize;
+}
+
+.typography__nav-local--nav-link {
+  font-family: $font-family-oswald;
+  font-size: 1rem;
   font-weight: 500;
   text-transform: uppercase;
 }
 
+.typography__nav-local--color {
+  color: $primary-blue;
+}
+
 // "The POWER of Community" text
 .typography__power-text {
   color: $white;
@@ -548,3 +614,9 @@ h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup { // Make superscripts within hea
     margin-top: -15px;
   }
 }
+
+@media screen and (max-width: 992px) {
+  .typography__nowrap--sm {
+    white-space: nowrap;
+  }
+}