kcc-gem-theme 1.65.57

data/assets/scss/0-tools/_targetx-overrides.scss

@@ -0,0 +1,76 @@
+// Target-X/FormAssembly STYLE OVERRIDES
+// ================================================================================ //
+//
+//  FormAssembly uses some `!important`'s and they are needed where used
+//
+// ================================================================================ //
+
+.targetx__wrapper {
+  margin-top: -35px;
+  z-index: -1;
+}
+
+// STYLE OVERRIDES TO TARGETX's STYLESHEET:
+// ========================================
+
+p.supportInfo {
+  display: none; // Hides an empty paragraph that just makes the form longer
+}
+
+@media screen and (min-width: 1200px) {
+  .wForm form > div.oneField {
+    margin-top: 0 !important; // Makes the spacing between form questions tighter/closer-together
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .wForm form > div.oneField {
+    margin-top: 10px !important; // Makes the spacing between form questions tighter/closer-together
+  }
+}
+
+.wFormContainer {
+  padding-left: 5px !important;
+  padding-right: 5px !important;
+}
+
+@media screen and (min-width: 1600px) {
+  .wFormContainer {
+    padding: 1rem 2rem !important;
+  }
+}
+
+#tfa_11::before {
+  display: block;
+  content: " ";
+  margin-top: -60px;
+  height: 60px;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+@media screen and (min-width: 1800px) {
+  #tfa_775-D {
+    margin-top: 5px !important;
+  }
+}
+
+.oneField.field-container-D {  // Keeps dropdown selection boxes from going wider than other element's in the form
+  max-width: 100%;
+}
+
+// Submit buttons always have the following ID.
+#submit_button {  // YES, the `!important`'s are actually needed!
+  background-color: #0051a7 !important;
+  border-color: #003773 !important;
+  font-family: $font-family-paragraph !important;
+  font-weight: 400 !important;
+  font-size: 1.25rem !important;
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; // Same transitioning on buttons used in Bootstrap 4 styling
+  &:hover {
+    background-color: #022b55 !important;
+    border-color: #021e3d !important;
+  }
+}

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

@@ -0,0 +1,67 @@
+//  VARIABLES
+// =============================
+
+// Fonts
+$font-family-paragraph: 'Open Sans', sans-serif;
+$font-family-headings: 'Roboto', sans-serif;
+$font-family-power: 'Libre Franklin', sans-serif;
+$font-family-kcc: 'Eurostile', sans-serif;
+$font-family-oswald: 'Oswald', sans-serif;
+$font-family-saira: 'Saira', 'sans-serif';
+$font-family-icons: 'Material Icons';
+
+$font-size-base: 1rem;
+
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-boldish: 500;
+$font-weight-bolder: 600;
+$font-weight-bold: 700;
+$font-weight-black: 900;
+
+
+//Image path for most of global style sheet
+$imagedir:'/assets/img/';
+
+// Colors
+//KCC colors
+$primary-blue: #0f3b63;       // Primary red-color
+$primary-red: #c61f48;        // Primary blue-color
+$accent-blue: #005bac;        // Accent blue-color used in all links and link buttons;
+$color-blue-light: #ccdde1;
+$color-tan-light: #fcf1d6;
+$color-orange: #f99e1b;
+$color-blue-grey: #7a7b7b;
+$color-blue-light-nav: #b8babc;
+$color-blue-lighter-nav: #e2e3e4;
+
+$black: #000;
+$grey-1: #666;
+$grey-2: #e5e8ed;
+$grey-3: #f1f2f7;            //  Background color for slick tracks
+$grey-4: #f8f9fa;            // Background color for footer (and Bootstrap 4 light navbar)
+$grey-5: #b1b1b1;            // Border-bottom for local-nav navigation bar
+$grey-6: #58585b;
+$grey-7: #868686;
+$grey-8: #d9d9d9;
+
+$white: #fff;
+
+$color-alert: #856404;
+
+
+$landing-bg: $grey-2;        // Landing page's background-color
+$default-bg: $white;        // Background color for non-landing pages
+$footer-bg: $white;         // Footer's background color
+$color-grey-heading: $grey-1;      // Grey headings used within page content
+$fa-color: $primary-red;
+$slide-bg: $white;            // Background color for the upcoming games slick slides
+$sub-nav-heading: $white;     // Font color for h1.page-heading heading of sub-nav
+$nav-link: $white;            // Color for nav-link-main links in mega-nav
+
+$btn-primary-bg: #0051a7;
+$btn-primary-border: #003773;
+$btn-hover-bg: #022b55;
+$btn-hover-border: #021e3d;
+$darker-link: #006ce0;
+$orange-heading: $color-orange;

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

@@ -0,0 +1,5 @@
+.background {
+  &__color--tan {
+    background-color: $color-tan-light;
+  }
+}

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

@@ -0,0 +1,83 @@
+.navbar-light .navbar-nav .nav-link.buttons__btn-primary-custom {
+  background-color: $primary-red;
+  color: $white;
+  &:hover {
+    background-color: $primary-blue;
+  }
+}
+
+.buttons__yt-subscribe {
+  display: inline-block;
+  height: 1rem;
+  margin-top: -4px;
+  margin-right: 5px;
+  transform: scale(1.8,1.8);
+  vertical-align: middle;
+  width: 1rem;
+}
+
+.buttons__custom-danger {
+  margin-right: 20px;
+}
+
+.buttons__btn-margin-top {
+  margin-top: 20px;
+}
+
+.btn-primary {
+  background-color: $btn-primary-bg;
+  border-color: $btn-primary-border;
+}
+
+.btn-primary:hover {
+  background-color: $btn-hover-bg;
+  border-color: $btn-hover-border;
+}
+
+.buttons__no-decoration {
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
+  &:focus {
+    text-decoration: none;
+  }
+  &:visited {
+    text-decoration: none;
+  }
+}
+
+.buttons{
+  display: inline-block;
+  padding-left: .9rem;
+  padding-right: .9rem;
+  padding-top: .125rem;
+  padding-bottom: .125rem;
+  &__my-kcc {
+    border-color: $color-blue-grey;
+    padding-top: .125rem;
+    padding-bottom: .125rem;
+    margin-top: 0.25rem;
+    margin-bottom: .375rem;
+    &--mobile {
+      position: absolute;
+      bottom: .65rem;
+      left: 1rem;
+    }
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .buttons__my-kcc:hover,
+  .buttons__my-kcc:focus {
+    //color: $white;
+    background-color: #0c3050;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .buttons__my-kcc:hover,
+  .buttons__my-kcc:focus {
+    color: $primary-red;
+  }
+}

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

@@ -0,0 +1,454 @@
+// Styles for the global KCC header
+// ================================
+
+.header-global {
+  padding-left: 0;
+  padding-right: 0;
+  &__brand {
+    left: 1rem;
+    position: absolute;
+    right: 3.25rem;  // clears the search icon/button
+    top: 0;
+    z-index: 1044;
+  }
+  &__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) {
+  a.header-global__nav-bottom--nav-link {
+    position: relative;
+  }
+  a.header-global__nav-bottom--nav-link.header-global__nav-bottom--underlined::after {
+    background-color: $orange-heading;
+    color: $orange-heading;
+    bottom: .25rem;
+    border-top-width: .125rem;
+    content: '';
+    display: block;
+    height: .125rem;
+    margin-left: 0;
+    opacity: 0;
+    position: absolute;
+    transition: opacity 0.3s,transform 0.3s;
+    width: calc(100% - 1rem); // The `- 1.8rem` in `calc (100% - 1.8rem)` offsets the padding-left/right: .5rem on the links
+  }
+  a.header-global__nav-bottom--nav-link.header-global__nav-bottom--underlined::after {
+    opacity: 1;
+    transform: translateY(-0.2em);
+  }
+
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-local {
+    padding-bottom: .5rem;
+    padding-top: .5rem;
+  }
+}
+
+.header-global__brand--svg {
+  fill: $white;
+  height: 28px;
+  max-width: 100%;
+  & .st0 {
+    fill: none;
+  }
+}
+
+@media screen and (min-width: 992px) and (max-width: 1040px) { // the KCC word logo needs to shrink a little bit at these screen sizes
+  .header-global__brand--svg {
+    height: 26px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__brand {
+    top: 3.125rem;
+    right: unset;  // gotta unset this, otherwise it blocks the other navbar links
+  }
+}
+
+#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: 991px) {
+  #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;
+  margin-top: .3125rem;
+  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;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .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
+  }
+}
+
+.header-global__nav-bottom .dropdown-item {
+  color: $grey-1;
+}
+
+.header-global__nav-bottom .dropdown-item:active {
+  background-color: $primary-blue;
+  color: $white;
+}
+
+.header-global__nav-bottom .dropdown-item:hover,
+.header-global__nav-bottom .dropdown-item:focus {
+  background-color: $color-blue-lighter-nav;
+  border-radius: .175rem;
+}
+
+
+@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.77rem;
+  }
+}
+
+@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: 991px) {
+  .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;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  #navGlobalTop .header-global__nav-top--nav-link {
+    margin-top: .3125rem;
+  }
+}