kcc-gem-theme-core 0.0.1

data/assets/scss/2-modules/_hero-slider.scss

@@ -0,0 +1,300 @@
+// hero-slider typography styles
+// ===============================================================
+
+.hero-slider__slider--sub-heading {
+  color: $white;
+  font-family: $font-family-headings;
+  font-size: .7em;
+  font-weight: $font-weight-regular;
+  letter-spacing: .01em;
+  margin-bottom: 2px;
+  padding-top: 5px;
+  text-transform: uppercase;
+}
+
+@media screen and (min-width: 768px) {
+  .hero-slider__slider--sub-heading {
+    font-size: .9em;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .hero-slider__slider--sub-heading {
+    font-size: 1em;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .hero-slider__slider--sub-heading {
+    font-size: 1.2em;
+  }
+}
+
+.hero-slider__slider--slide-heading {
+  color: $white;
+  font-family: $font-family-power;
+  font-size: 1em;
+  font-weight: $font-weight-light;
+  letter-spacing: .02em;
+  text-transform: uppercase;
+}
+
+@media screen and (min-width: 360px) {
+  .hero-slider__slider--slide-heading {
+    font-size: 1.2em;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .hero-slider__slider--slide-heading {
+    font-size: 2.1em;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .hero-slider__slider--slide-heading {
+    font-size: 2.8em;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .hero-slider__slider--slide-heading {
+    font-size: 3em;
+  }
+}
+
+.hero-slider__heading--bold {
+  color: $white;
+  filter: drop-shadow(2px 2px 5px #000);
+  font-family: $font-family-power;
+  font-size: 1em;
+  font-weight: $font-weight-boldish;
+  letter-spacing: .02em;
+  text-transform: uppercase;
+}
+
+@media screen and (min-width: 360px) {
+  .hero-slider__heading--bold {
+    font-size: 1.2em;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .hero-slider__heading--bold {
+    font-size: 2.1em;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .hero-slider__heading--bold {
+    font-size: 2.8em;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .hero-slider__heading--bold {
+    font-size: 3em;
+  }
+}
+
+// hero-slider styling:
+// ============================================================================
+
+.hero-slider__slider {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.hero-slider__slider--heading-container {   // div container for slide headings
+  margin-left: .5%;
+  padding-left: 5px;
+  position: absolute;
+  top: 55%;
+  width: 10%;
+  z-index: 4444;
+}
+
+@media screen and (min-width: 488px) {
+  .hero-slider__slider--heading-container {
+    top: 63%;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .hero-slider__slider--heading-container {
+    top: 64%;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .hero-slider__slider--heading-container {
+    padding-left: 10px;
+    top: 64.5%;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .hero-slider__slider--heading-container {
+    padding-left: 20px;
+    top: 70%;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .hero-slider__slider--heading-container {
+    top: 71%;
+  }
+}
+
+.hero-slider__slides-4 {
+  width: 10%;
+}
+
+.hero-slider__slides-8 {
+  width: 5%;
+}
+
+
+.hero-slider__slider--slide-img {
+  position: relative;
+  width: 100%;
+}
+
+.hero-slider__slider .slick-next {
+  right: 10px;
+}
+
+.hero-slider__slider .slick-prev {
+  left: 10px;
+  z-index: 1;
+}
+
+@media screen and (min-width: 488px) {
+  .hero-slider__slider .slick-next {
+    right: 20px;
+  }
+}
+
+@media screen and (min-width: 488px) {
+  .hero-slider__slider .slick-prev {
+    left: 20px;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .hero-slider__slider .slick-next {
+    right: 25px;
+  }
+
+  .hero-slider__slider .slick-prev {
+    left: 25px;
+  }
+}
+
+.hero-slider__slider .slick-next,
+.hero-slider__slider .slick-prev {
+  height: 25px;
+  top: 75%;
+  width: 25px;
+}
+
+@media screen and (min-width: 992px) {
+  .hero-slider__slider .slick-next,
+  .hero-slider__slider .slick-prev {
+    height: 40px;
+    top: 80%;
+    width: 40px;
+  }
+}
+
+.hero-slider__slider .slick-dots li button:before {
+  opacity: 1;
+}
+
+.hero-slider__slider .slick-dots li.slick-active button:before {
+  opacity: 1;
+}
+
+.hero-slider__slider .slick-dots li  {
+  margin-left: 1px;
+  margin-right: 1px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.hero-slider__slide-img--border {
+  border-color: $grey-8;
+  border-style: solid;
+  border-width: thin;
+}
+
+.slick-next::before {
+  content: url('/assets/img/dbl-next_mobile.svg');
+}
+
+.slick-prev::before {
+  content: url('/assets/img/dbl-prev_mobile.svg');
+}
+
+@media screen and (min-width: 992px) {
+  .slick-next::before {
+    content: url('/assets/img/dbl-next.svg');
+  }
+
+  .slick-prev::before {
+    content: url('/assets/img/dbl-prev.svg');
+  }
+}
+
+.hero-slider__button--toggle {
+  background: transparent;
+  border: none;
+  color: transparent;
+  cursor: pointer;
+  display: block;
+  font-size: 0;
+  height: 25px;
+  right: 50%;
+  margin-right: -12.5px;
+  line-height: 0;
+  outline: none;
+  padding: 0;
+  position: absolute;
+  bottom: 0;
+  transform: translate(0, -50%);
+  width: 25px;
+}
+
+@media screen and (min-width: 992px) {
+  .hero-slider__button--toggle {
+    width: 40px;
+    bottom: 25px;
+    margin-right: -20px;
+  }
+}
+
+.hero-slider__button--toggle:before {
+  content: url('/assets/img/pause.svg');
+  opacity: .75;
+}
+
+.hero-slider__button--play:before {
+  content: url('/assets/img/play.svg');
+  opacity: .75;
+}
+
+.hero-slider__button--toggle:hover,
+.hero-slider__button--toggle:focus {
+  color: transparent;
+  outline: none;
+  background: transparent;
+}
+
+.hero-slider__button--toggle:hover:before,
+.hero-slider__button--toggle:focus:before {
+  opacity: 1;
+}
+
+.slick-dots li.slick-active button:before {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><circle fill="%230f3b63" cx="6" cy="6" r="3.5"/></svg>');
+}

data/assets/scss/2-modules/_loader.scss

@@ -0,0 +1,25 @@
+// Styling for the little loading GIF
+
+.loader {
+  text-align: center;
+  &__img {
+    height: 100px;
+    width: 100px;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+.loader__sync--animate {
+  animation-name: spin;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  transform-origin: center;
+}

data/assets/scss/2-modules/_nav-content.scss

@@ -0,0 +1,11 @@
+
+.nav-content {
+  border-bottom-color: #b1b1b1;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  min-height: 56px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  width: 100%;
+  width: 100vw;
+}

data/assets/scss/2-modules/_nav-landing.scss

@@ -0,0 +1,203 @@
+.nav-landing {
+  background-color: $primary-red;
+  height: 56px;
+  margin-left: 0;
+  margin-right: 0;
+  max-width: 100%;
+  min-width: 100%;
+  padding-bottom: 5px;
+  padding-left: 5%;
+  padding-top: 5px;
+  width: 100%;
+  z-index: 1031;
+}
+
+.nav-landing__kcc-logo {
+  margin-left: 5px;
+  width: 190px;
+}
+
+@media screen and (min-width: 360px) {
+  .nav-landing__kcc-logo {
+    width: 220px;
+  }
+}
+
+@media screen and (min-width: 375px) {
+  .nav-landing__kcc-logo {
+    width: 230px;
+  }
+}
+
+@media screen and (min-width: 410px) {
+  .nav-landing__kcc-logo {
+    width: 255px;
+  }
+}
+
+@media screen and (min-width: 488px) {
+  .nav-landing__kcc-logo {
+    width: 260px;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .nav-landing__kcc-logo {
+    width: 300px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .nav-landing__kcc-logo {
+    width: 320px;
+  }
+}
+
+@media screen and (min-width: 992px) and (max-width: 1100px) {
+  .nav-landing__kcc-logo {
+    margin-left: -25px;
+    width: 310px;
+  }
+}
+
+@media screen and (min-width: 1100px) {
+  .nav-landing__kcc-logo {
+    margin-left: -25px;
+    width: 340px;
+  }
+}
+
+.nav-landing__navbar-brand {
+  margin-left: -10px;
+}
+
+@media screen and (min-width: 410px) {
+  .nav-landing__navbar-brand {
+    margin-left: -15px;
+  }
+}
+
+@media screen and (min-width: 488px) {
+  .nav-landing__navbar-brand {
+    margin-left: -20px;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .nav-landing__navbar-brand {
+    margin-left: -25px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .nav-landing__navbar-brand {
+    margin-left: -35px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .nav-landing__navbar-brand {
+    margin-left: -20px;
+  }
+}
+
+@media screen and (min-width: 1000px) {
+  .nav-landing__navbar-brand {
+    margin-left: -18px;
+  }
+}
+
+@media screen and (min-width: 1080px) {
+  .nav-landing__navbar-brand {
+    margin-left: -22px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .nav-landing__navbar-brand {
+    margin-left: -2.5%;
+  }
+}
+
+@media screen and (min-width: 1600px) {
+  .nav-landing__navbar-brand {
+    margin-left: -3%;
+  }
+}
+
+@media screen and (min-width: 1900px) {
+  .nav-landing__navbar-brand {
+    margin-left: -3.25%;
+  }
+}
+
+@media screen and (min-width: 2000px) {
+  .nav-landing__navbar-brand {
+    margin-left: -3.5%;
+  }
+}
+
+.nav-landing__kcc-logo-inverse {
+  margin-left: -3px;
+  width: 50px;
+  margin-right: -10px;
+}
+
+@media screen and (min-width: 360px) {
+  .nav-landing__kcc-logo-inverse {
+    width: 60px;
+  }
+}
+
+@media screen and (min-width: 410px) {
+  .nav-landing__kcc-logo-inverse {
+    width: 68px;
+  }
+}
+
+@media screen and (min-width: 488px) {
+  .nav-landing__kcc-logo-inverse {
+    width: 68px;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .nav-landing__kcc-logo-inverse {
+    width: 73px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .nav-landing__kcc-logo-inverse {
+    width: 80px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .nav-landing__kcc-logo-inverse {
+    width: 80px;
+    margin-left: -30px;
+    margin-right: 20px;
+  }
+}
+
+@media screen and (min-width: 1100px) {
+  .nav-landing__kcc-logo-inverse {
+    width: 85px;
+    margin-right: 15px;
+  }
+}
+
+@media screen and (min-width: 1300px) {
+  .nav-landing__kcc-logo-inverse {
+    width: 85px;
+    margin-left: -35px;
+  }
+}
+
+@media screen and (min-width: 1400px) {
+  .nav-landing__kcc-logo-inverse {
+    width: 85px;
+    margin-left: -40px;
+  }
+}

data/assets/scss/2-modules/_nav-local.scss

@@ -0,0 +1,45 @@
+.nav-local {
+  top: 55px;
+  border-bottom-color: $grey-5;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+
+.nav-local__search-toggle {
+  top: 86px;
+}
+
+.nav-local .nav-link {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+@media screen and (min-width:992px) {
+  .nav-local .nav-link {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+}
+
+@media screen and (min-width:1200px) {
+  .nav-local .nav-link {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}
+
+#mainNav .navbar-brand {
+  transition: transform ease .4s;
+}
+
+@media screen and (min-width: 992px) {
+  #mainNav.navbar-shrink {
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: .96;
+  }
+
+  #mainNav.navbar-shrink .navbar-brand {
+    transform: scale(.8, .8);
+  }
+}

data/assets/scss/2-modules/_setting.scss

@@ -0,0 +1,78 @@
+.setting__button {
+  height: 50px;
+  position: relative;
+  width: 62px;
+  &::before {
+    content: ' ';
+    height: 36px;
+    width: 36px;
+    position: absolute;
+    top: 6px;
+    left: 12px;
+  }
+  &--on::before {
+    background-image: url('/assets/img/toggle-off.svg');
+  }
+  &--off::before {
+    background-image: url('/assets/img/toggle-on.svg');
+    opacity: .75;
+  }
+}
+
+.setting__link {
+  background-color: transparent;
+  border: none;
+  display: block;
+  margin-right: .5rem;
+  height: 46px;
+  width: 58px;
+  position: relative;
+  top: 5px;
+  margin-bottom: -56px;
+  opacity: 0;
+  transition: opacity ease-in-out .25s;
+  &::before {
+    content: ' ';
+    background-image: url('/assets/img/settings.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 46px;
+    height: 46px;
+    position: absolute;
+    top: 0;
+    left: 6px;
+  } 
+}
+
+.setting__link:hover,
+.setting__link:focus {
+  opacity: 1 !important;
+}
+
+@media screen and (min-width: 400px) {
+  .setting__link {
+    height: 56px;
+    width: 68px;
+    &::before {
+      background-image: url('/assets/img/settings_56.svg');
+      height: 56px;
+      width: 56px;
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .setting__link {
+    top: -3px;
+  } 
+}
+
+@media screen and (min-width: 1024px) {
+  .setting__link {
+    top: -5px;
+  } 
+}
+
+.setting__link.setting__link--visible {
+  opacity: 1;
+}

data/assets/scss/2-modules/_sliders.scss

@@ -0,0 +1,21 @@
+
+.hero-slider__slider {   // prevents all slides from displaying vertically before slick has initialized
+  visibility: hidden !important;
+  height: auto;
+}
+
+.hero-slider__slider img {
+  visibility: hidden;
+  position: absolute;
+  height: 0;
+}
+
+.slick-initialized.hero-slider__slider img {
+  visibility: visible;
+  position: relative;
+  height: auto;
+}
+
+.slick-initialized {   // makes slides visible again once slick has initialized
+  visibility: visible !important;
+}

data/assets/scss/2-modules/_social-icons.scss

@@ -0,0 +1,36 @@
+.social-icons__icons {
+  background-color: $primary-red;
+  border-radius: 50%;
+  height: 33px;
+  margin: 4px;
+  padding: 2px;
+  transition-property: background-color;
+  transition-timing-function: ease;
+  transition-duration: .3s;
+  width: 33px;
+}
+
+@media screen and (min-width: 360px) {
+  .social-icons__icons {
+    height: 40px;
+    margin: 5px;
+    width: 40px;
+  }
+}
+
+@media screen and (min-width: 412px) {
+  .social-icons__icons {
+    height: 50px;
+    width: 50px;
+  }
+}
+
+a.social-icons__links,
+a.social-icons__links .social-icons__icons {
+  text-decoration: none !important; // Get rid of default link-underline on hover
+}
+
+a.social-icons__links:hover .social-icons__icons {
+  text-decoration: none !important;
+  background-color: $primary-blue;
+}