kcc-gem-theme-slim 0.0.1

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

@@ -0,0 +1,79 @@
+// Custom styling to the Google Custom Search used in `_includes/header-global.html` & `_includes/nav-global.html`
+// ==================================================
+// Styling for the Google Custom Search used in the `_includes/header-global.html` version of the nav
+// ==================================================
+.header-global__search-collapse #___gcse_0:hover #gsc-iw-id1,
+.header-global__search-collapse #___gcse_0:focus #gsc-iw-id1 {
+  filter: drop-shadow(2px 2px 6px rgba(128,128,128, 0.5));
+}
+
+.header-global__search-collapse #gsc-iw-id1 {
+  border-radius: 2rem;
+  padding-left: .5rem;
+  border: solid thin $grey-5;
+  line-height: 1;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.header-global__search-collapse .gsc-search-button-v2 {
+  background-color: transparent !important;
+  border: none !important;
+  pointer-events: auto;
+  position: relative;
+  right: -0.5rem;
+  top: -.25rem;
+  transition-property: right;
+  transition-duration: .2s;
+}
+
+.header-global__search-collapse button.gsc-overrides__clear-x {
+  right: .5rem;
+  padding-right: 5px !important;
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__search-collapse .gsc-search-button-v2 {
+    top: 0;
+    right: .5rem;
+  }
+
+  .header-global__search-collapse button.gsc-overrides__clear-x {
+    right: 1.125rem;
+    padding-right: 5px !important;
+  }
+}
+
+.header-global__search-collapse .gsst_a .gscb_a {
+  vertical-align: middle;
+}
+
+.header-global__search-collapse .gsc-search-button-v2 svg {
+  fill: $primary-blue !important;
+  height: 1.25rem;
+  width: 1.25rem;
+  transition-property: fill;
+  transition-duration: .2s;
+}
+
+.header-global__search-collapse .gsc-search-button-v2:hover svg,
+.header-global__search-collapse .gsc-search-button-v2:focus svg {
+  fill: $primary-red !important;
+}
+
+.header-global__search-collapse td.gsc-search-button {
+  display: inline;
+  pointer-events: none;
+  position: absolute;
+  right: 50px;
+}
+
+@media screen and (min-width: 1400px) {
+  .header-global__search-collapse td.gsc-search-button {
+    right: 44px;
+  }
+}
+
+.header-global__search-collapse .gsc-search-box-tools .gsc-search-box .gsc-input {
+  padding-right: 0 !important;
+}

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

@@ -0,0 +1,72 @@
+//  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-lighter-nav: #e2e3e4;
+$color-black-light: rgba(0,0,0,.15);
+$color-red-darker: #8a1632;
+
+$color-blue-grey: #b8babc;
+$color-page-background: $color-blue-grey;
+$color-blue-light-nav: $color-blue-grey;
+
+$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,82 @@
+.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{
+  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;
+  }
+}
+
+.buttons__action {
+  color: $white;
+  background-color: $primary-red;
+  border-color: $color-red-darker;
+  font-family: $font-family-headings;
+  font-size: 1.3rem;
+  font-weight: $font-weight-bolder; //dash
+  line-height: 36px;
+  letter-spacing: .075rem;
+  width: 100%;
+  &:hover,
+  &:focus {
+    color: $white;
+    background-color: $primary-blue;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  .buttons__action {
+    font-size: 1.75rem;
+    line-height: 48px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .buttons__action {
+    font-size: 1.3rem;
+    line-height: 36px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .buttons__action {
+    font-size: 1.75rem;
+    line-height: 48px;
+  }
+}

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

@@ -0,0 +1,477 @@
+// 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;
+  }
+}
+
+.header-global__open {
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+@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;
+  }
+  transition: all .5s ease-in-out;
+}
+
+@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: 22px;
+  }
+}
+
+@media screen and (min-width: 1041px) {
+  .header-global__brand--svg {
+    height: 26px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__brand {
+    top: 3.125rem;
+    right: auto; // gotta set this to "auto" 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;
+  }
+}
+
+.header-global__row--max-width {
+  min-width: 100%;
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__col--column-count {
+    column-count: 2;
+  }
+}