kcc-gem-theme-original 1.0.0

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

@@ -0,0 +1,371 @@
+
+.benefits__typography--caption {
+  bottom: 15px;
+  color: $white;
+  filter: drop-shadow(0 0 2px rgba(0,0,0,0.25));
+  font-family: $font-family-oswald;
+  font-size: 1rem;
+  font-weight: $font-weight-bold;
+  letter-spacing: .07rem;
+  position: absolute;
+  right: 25px;
+}
+
+@media screen and (min-width: 768px) {
+  .benefits__typography--caption {
+    font-size: 1.1rem;
+  }
+}
+
+@media screen and (min-width: 1000px) {
+  .benefits__typography--caption {
+    font-size: 1.2rem;
+  }
+}
+
+.benefits__typography-h4 {
+  font-family: $font-family-oswald;
+  font-size: 1.6rem;
+  margin-bottom: .5rem;
+}
+
+@media screen and (min-width: 768px) {
+  .benefits__typography-h4 {
+    font-size: 2rem;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .benefits__typography-h4 {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .benefits__typography-h4 {
+    font-size: 2.4rem;
+    margin-bottom: 1.8rem;
+  }
+}
+
+.benefits__typography--h5 {
+  color: $primary-red;
+  font-family: $font-family-oswald;
+  font-size: 2rem;
+  font-weight: $font-weight-bold;
+  letter-spacing: .03rem;
+  &--mb {
+    margin-bottom: 40px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .benefits__typography--h5 {
+    font-size: 2.8rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .benefits__typography--h5--mb {
+    margin-bottom: 60px;
+  }
+}
+
+.benefits__testimonials--mb {
+  margin-bottom: 40px;
+}
+
+@media screen and (min-width: 1200px) {
+  .benefits__testimonials--mb {
+    margin-bottom: 0;
+  }
+}
+
+.benefits__typography--h5--black {
+  color: $black;
+  font-family: $font-family-oswald;
+  font-size: 2rem;
+  font-weight: $font-weight-regular;
+  letter-spacing: .03rem;
+  margin-bottom: 60px;
+}
+
+@media screen and (min-width: 768px) {
+  .benefits__typography--h5--black {
+    font-size: 2.1rem;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .benefits__typography-h5--black {
+    font-size: 3rem;
+  }
+}
+
+.benefits__typography--student-p {
+  font-family: $font-family-paragraph;
+  color: $black;
+  font-weight: 600;
+  font-size: 1.15rem;
+  margin-top: 15px;
+  margin-bottom: .5rem;
+}
+
+@media screen and (min-width: 1200px) {
+  .benefits__typography--student-p--larger {
+    font-size: 1.3rem;
+  }
+}
+
+.benefits__typography--img-cap {
+  font-family: $font-family-paragraph;
+  font-size: 1.35rem;
+  font-weight: 600;
+  display: block;
+}
+
+.benefits__typography-itransfer {
+  font-size: 1.7rem;
+  font-weight: 600;
+  line-height: 1;
+  position: absolute;
+  top: 4rem;
+  margin-left: -20px;
+}
+
+@media screen and (min-width: 400px) {
+  .benefits__typography-itransfer {
+    font-size: 1.8rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .benefits__typography-itransfer {
+    font-size: 1.9rem;
+  }
+}
+
+.benefits__typography--h6 {
+  color: $primary-red;
+  font-family: $font-family-saira;
+  font-weight: 700;
+  font-size: 2rem;
+  letter-spacing: .03rem;
+}
+
+.benefits__typography--thank-you {
+  color: $primary-blue;
+  font-family: $font-family-kcc;
+  font-size: 2rem;
+  &--message {
+    color: $primary-red;
+    font-family: $font-family-saira;
+    font-weight: $font-weight-bold;
+    font-size: 1.4rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .benefits__typography--thank-you {
+    font-size: 2.4rem;
+    margin-left: 100px;
+    margin-top: -10px;
+    &--message {
+      font-size: 1.6rem;
+      margin-left: 95px;
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .benefits__typography--thank-you {
+    font-size: 2.6rem;
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .benefits__typography--thank-you {
+    font-size: 3rem;
+    margin-top: -15px;
+  }
+}
+
+.benefits__check-svg {
+  margin-top: -60px;
+  width: 80px;
+}
+
+.benefits__blue-section {
+  background-color: $color-blue-light;
+  padding-bottom: 25px;
+  padding-top: 25px;
+}
+
+.benefits__card--spacing {
+  margin-bottom: 40px;
+}
+
+.benefits__first-section--marg {
+  margin-top: 15px;
+  background-color: $color-blue-light;
+  padding-bottom: 25px;
+  padding-top: 25px;
+}
+
+@media screen and (min-width: 1200px) {
+  .benefits__first-section--marg {
+    margin-top: 15px;
+  }
+}
+
+.benefits__section--marg {
+  margin-top: 35px;
+}
+
+@media screen and (min-width: 1200px) {
+  .benefits__section--marg {
+    margin-top: 65px;
+  }
+}
+
+.benefits__row--pad {
+  margin-top: 25px;
+}
+
+@media screen and (min-width: 1200px) {
+  .benefits__row--pad {
+    margin-top: 0;
+  }
+}
+
+.benefits__itransfer-img {
+  width: 120px;
+  margin-top: 40px;
+}
+
+@media screen and (min-width: 400px) {
+  .benefits__itransfer-img {
+    width: 140px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .benefits__itransfer-img {
+    width: 150px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .benefits__itransfer-img {
+    margin-top: 20px;
+    width: 160px;
+  }
+}
+
+.benefits__idfpr-img {
+  width: 330px;
+}
+
+@media screen and (max-width: 992px) {
+  .benefits__idfpr-img {
+    margin-bottom: 15px;
+    margin-top: 40px;
+  }
+}
+
+.benefits__iccb-img {
+  width: 250px;
+}
+
+@media screen and (max-width: 992px) {
+  .benefits__iccb-img {
+    margin-top: 15px;
+  }
+}
+
+.benefits__offset-global-nav {
+  margin-top: 60px;
+}
+
+
+.benefits__accredited--card {
+  background-color: $primary-blue;
+  padding-bottom: 25px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 15px;
+  width: 90%
+}
+
+@media screen and (min-width: 400px) {
+  .benefits__accredited--card {
+    width: 75%;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .benefits__accredited--card {
+    width: 50%;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .benefits__accredited--card {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .benefits__accredited--card {
+    width: 75%;
+  }
+}
+
+.benefits__accredited--span-l {
+  color: $white;
+  font-size: 2.1rem;
+  font-weight: bolder;
+  display: block;
+  line-height: 1;
+  margin-top: -10px;
+  margin-bottom: 5px;
+}
+
+.benefits__accredited--span-s {
+  color: $white;
+  font-size: 1.1rem;
+  font-style: italic;
+  line-height: .5;
+  font-weight: 600;
+  letter-spacing: -.04rem;
+}
+
+.benefits__accredited--span--source {
+  display: block;
+}
+
+.benefits__accredited--itransfer--wrapper {
+  width: 50%;
+}
+
+.benefits__borders--circle-img {
+  border: 3px solid $white;
+  filter: drop-shadow(5px 5px 12px #b1b1b1);
+  width: 50%;
+}
+
+@media screen and (min-width: 768px) {
+  .benefits__borders--circle-img {
+    width: 100%;
+  }
+}
+
+#page-top::before {
+  display: block;
+  content: " ";
+  margin-top: -60px;
+  height: 60px;
+  visibility: hidden;
+  pointer-events: none;
+}

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

@@ -0,0 +1,32 @@
+
+.breadcrumbs {
+  background-color: transparent; // Override the Bootstrap 4 grey background-color for the breadcrumb component.
+  border-bottom-color: rgba(0,0,0,.25);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-style: solid;
+  border-bottom-width: thin;
+  margin-bottom: 1.5rem;
+  &--margin-top {
+    margin-top: 125px;
+  }
+  &--home {
+    vertical-align: bottom;
+    &--house {
+      fill: none;
+      stroke: $grey-1;
+      stroke-width: 1.5;
+      stroke-linejoin: round;
+      stroke-miterlimit: 10;
+    }
+    &--border {
+      fill: none;
+    } 
+  }
+}
+
+// This is a Bootstrap 4 override to customize the breadcrumb divider
+.breadcrumb-item+.breadcrumb-item::before { // Breadcrumb divider is a CSS pseudo-element
+  content: url('/assets/img/keyboard_arrow_right.svg');
+  opacity: .5;
+}

data/assets/scss/2-modules/_campus-alerts.scss

@@ -0,0 +1,3 @@
+.campus-alerts__margin-bottom {
+  margin-bottom: .65rem;
+}

data/assets/scss/2-modules/_card-section.scss

@@ -0,0 +1,9 @@
+
+.card-section__col--margin-btm {
+  margin-bottom: 2.5rem;
+}
+
+.card-section__text-wrapper {
+  margin-bottom: 10px;
+  min-height: 14rem;
+}

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

@@ -0,0 +1,46 @@
+.contacts__section-margin {
+  margin-top: 40px;
+}
+
+.contacts__col-bottom-margin {
+  margin-bottom: 40px;
+}
+
+.contacts__padding-top {
+  padding-top: 40px;
+}
+
+.contacts__col--img {
+  margin-left: 0;
+  margin-right: -15px;
+}
+
+@media screen and (min-width: 360px) {
+  .contacts__col--img {
+    margin-left: 5px;
+  }
+}
+
+@media screen and (min-width: 410px) {
+  .contacts__col--img {
+    margin-left: 10px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .contacts__padding-left {
+    padding-left: 50px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .contacts__padding-left {
+    padding-left: 70px;
+  }
+}
+
+.contacts__portrait {
+  border-color: $white;
+  border-style: solid;
+  border-width: 5px;
+}

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

@@ -0,0 +1,10 @@
+
+.error__main-heading {
+  color: $primary-red;
+  font-weight: $font-weight-bold;
+}
+
+.error__sub-heading {
+  color: $primary-blue;
+  font-weight: $font-weight-bold;
+}

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

@@ -0,0 +1,122 @@
+// Footer Styles
+
+.footer__margin {
+  margin-top: 20px;
+}
+
+.footer {
+  background-color: $grey-4;
+  margin-bottom: -56px;
+  margin-top: 60px;
+  padding-bottom: 40px;
+  padding-top: 40px;
+  width: 100%;
+  border-top-color: $color-black-light;
+  border-top-style: solid;
+  border-top-width: thin;
+}
+
+// Footer's "athletics.kcc.edu link"
+a.footer-link {
+  color: $primary-blue;
+
+  &:hover {
+    text-decoration: none !important;
+    color: $primary-red;
+  }
+}
+
+.footer-heading {
+  transition-property: color;
+  transition-timing-function: ease;
+  transition-duration: .3s;
+}
+
+.footer-icons {
+  background-color: $primary-red;
+  border-radius: 50%;
+  transition-property: background-color;
+  transition-timing-function: ease;
+  transition-duration: .3s;
+  height: 33px;
+  margin: 4px;
+  padding: 2px;
+  width: 33px;
+}
+
+@media screen and (min-width: 330px) {
+  .footer-icons {
+    height: 40px;
+    width: 40px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  .footer-icons {
+    height: 40px;
+    margin: 5px;
+    width: 40px;
+  }
+}
+
+@media screen and (min-width: 412px) {
+  .footer-icons {
+    height: 45px;
+    width: 45px;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .footer-icons {
+    height: 50px;
+    width: 50px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .footer-icons {
+    height: 45px;
+    margin: 3px;
+    width: 45px;
+  }
+}
+
+@media screen and (min-width: 1053px) {
+  .footer-icons {
+    height: 45px;
+    margin: 5px;
+    width: 45px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .footer-icons {
+    height: 50px;
+    width: 50px;
+  }
+}
+
+a.footer-social-links,
+a.footer-social-links .footer-icons {
+  text-decoration: none !important; // Get rid of default link-underline on hover
+}
+
+a.footer-social-links:hover .footer-icons {
+  text-decoration: none !important;
+  background-color: $primary-blue;
+}
+
+.footer__mobile--margin-bottom {
+  margin-bottom: 20px;
+}
+
+@media screen and (min-width: 992px) {
+  .footer__mobile--margin-bottom {
+    margin-bottom: 0;
+  }
+}
+
+.footer__svg--logo {
+  height: 36px; // Needed for IE
+  max-width: 100%;
+}

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

@@ -0,0 +1,21 @@
+// NOT TO BE CONFUSED WITH `1-base/_header-global.scss` SCSS MODULE
+// STYLES USED IN LANDING PAGE HEADER SECTIONS
+// SPECIFICALLY THE LARGE BACKGROUND IMAGE IN THE DESIGN
+//
+// Header styles for landing pages
+// ==========================================
+
+.header__bg {
+  background-image: url('/assets/img/DSC_8724_4x3.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 55%;
+  height: 55vh;
+}
+
+@media screen and (min-width: 1200px) {
+  .header__bg {
+    height: auto;
+  }
+}