kcc-gem-theme 1.65.57

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

@@ -0,0 +1,17 @@
+// Styles for <img>'s
+.img__responsive--svg {
+  height: auto;
+  max-width: 100%;
+}
+
+.img__full-width {
+  width: 100%;
+}
+
+.img__shadow {
+  filter: drop-shadow(3px 3px 10px rgba(126, 126, 126, .45));
+  &--border {
+    filter: drop-shadow(3px 3px 10px rgba(126, 126, 126, .45));
+    border: 3px solid $primary-blue;
+  }
+}

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

@@ -0,0 +1,120 @@
+// Rules for styling links
+// =========================================
+
+.links__kcc-logo {
+  display: inline;
+  float: left;
+  width: 120px;
+  height:80px;
+}
+
+// use the 'link__offset' class to offset jump-links via CSS only method.
+// Links need to be offset to clear the fixed navigation bar at the top.
+// =========================================
+
+.links__offset {
+  pointer-events: none !important;
+}
+
+.links__offset::before {
+  // mobile devices get slightly different offset b/c of different sized fixed header
+  content: " ";
+  display: block;
+  height: 171px; // defining a height pushes the element down the page
+  margin-top: -171px; // negative margin is needed to push it back to its original position
+  pointer-events: none !important; // w/ out this it will interfere with the sites navigation links
+  visibility: hidden;
+}
+
+@media screen and (min-width: 768px) {
+    .links__offset::before {
+      height: 150px;
+      margin-top: -150px;
+  }
+}
+
+.links__darker-link {
+  color: $darker-link;
+}
+
+// Rules to override bootstrap 4's "nav-link" color
+// =========================================
+.navbar-light .navbar-nav .nav-link.links__nav-link--color:not(.btn-primary) { // Ugly (chain of) selectors needed to overide bootstrap's "nav-link" color:
+  color: $primary-blue;
+  &:hover,
+  &:focus {
+    color: $primary-red;
+  }
+}
+
+.navbar-light .navbar-nav .nav-link.links__nav-link--color.btn-primary {
+  color: $white;
+}
+
+.navbar-light .navbar-nav .active>.nav-link {
+  border-bottom-color: $primary-red;
+  border-bottom-style: solid;
+  border-bottom-width: thick;
+  color: $primary-blue;
+  padding-bottom: 0;
+}
+
+.navbar-light .navbar-nav .nav-link:focus,
+.navbar-light .navbar-nav .nav-link:hover {
+  color: $primary-red;
+}
+
+.links__phone--span { // Phone # link in the navigation on landing pages like info.kcc.edu
+  color: $white;
+  position: relative; // Needed to make pseudo-element underlining the right width
+  text-decoration: none;
+  &:visited {
+    color: $white;
+  }
+  &:hover,
+  &:focus {
+    color: $white;  // Remove the Bootstrap primary blue colour on a:hover
+    text-decoration: none; // Prevent underlining
+  }
+}
+
+
+.links__phone--span:focus:after,
+.links__phone--span:hover:after { // mouse-hover effect for phone # in landing pages
+  opacity: 1;  // Make the underline fade in
+  transform: translateY(-.2em); // Move the underline up (along the Y-axis) as it fades-in
+}
+
+.links__phone--span:after { // Pseudo-element to unerline the phone # on mouse-hover
+    background-color: $color-orange;
+    bottom: - .325rem;
+    content: "";
+    display: block;
+    height: .1875rem;
+    opacity: 0;
+    position: absolute;
+    transition: opacity .3s,transform .3s; // mouse-hover effect
+    width: 100%;
+}
+
+.links__no-underline {
+  text-decoration: none;
+  &:hover {
+    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

@@ -0,0 +1,641 @@
+// TYPOGAPHY
+// ===========================
+// Set the base font size for em's to work
+body {
+  font-size: $font-size-base; // Takes control of the base font size from Bootstrap/reboot
+}
+
+// HEADINGS
+// Special Headings (decorative headings used for specific sections)
+
+// h1 is KCC's logo-font, reserved for the nav-local's page-title heading.
+.typography__nav-heading { // Not to be used for page content
+  color: $primary-blue;
+  display: inline;
+  font-family: $font-family-kcc;
+  font-size: 1.5rem;
+  font-style: italic;
+  font-weight: 700;
+  text-transform: uppercase;
+  transition-property: color;
+  transition-timing-function: ease;
+  transition-duration: .4s;
+  &:hover,
+  &:focus {
+    color: $primary-red;
+  }
+  &--smaller {
+    font-size: 1.25rem;
+  }
+}
+
+@media screen and (min-width:360px) {
+  .typography__nav-heading {
+    font-size: 1.8rem;
+    &--smaller {
+      font-size: 1.5rem;
+    }
+  }
+}
+
+@media screen and (min-width:410px) {
+  .typography__nav-heading {
+    font-size: 2rem;
+  }
+}
+
+@media screen and (min-width:576px) {
+  .typography__nav-heading {
+    font-size: 2.3rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .typography__nav-heading {
+    font-size: 2.4rem;
+  }
+}
+
+@media screen and (min-width: 1500px) {
+  .typography__nav-heading {
+    font-size: 2.6rem;
+  }
+}
+
+.typography__footer-heading { // Footer heading/link that shows the site URL
+  font-family: $font-family-headings;
+  font-size: 1.95rem;
+  font-weight: $font-weight-black;
+}
+
+@media screen and (min-width: 360px) {
+  .typography__footer-heading {
+    font-size: 2.2rem;
+  }
+}
+
+@media screen and (min-width: 375px) {
+  .typography__footer-heading {
+    font-size: 2.4rem;
+  }
+}
+
+@media screen and (min-width: 410px) {
+  .typography__footer-heading {
+    font-size: 2.6rem;
+  }
+}
+
+.typography__call-to-action {
+  color: $primary-red;
+  font-family: $font-family-oswald;
+  font-size: 2.8rem;
+  font-weight: 600;
+  line-height: 2.8rem;
+  margin-bottom: 30px;
+  margin-top: 20px;
+}
+
+.typography__contacts--name {
+  color: $primary-blue;
+  font-family: $font-family-headings;
+  font-size: 1.3em;
+  font-weight: $font-weight-bold;
+  margin-bottom: .2rem;
+}
+
+.typography__contacts--title {
+  color: $color-grey-heading;
+  font-family: $font-family-headings;
+  font-size: 1.1em;
+  font-weight: $font-weight-bold;
+  margin-bottom: .2rem;
+}
+
+.typography__orange-h4  {
+  color: $orange-heading;
+  font-family: $font-family-oswald;
+  font-size: 2.4rem;
+}
+
+.typography__sub-nav--red-h2 {
+  color: $primary-red;
+  font-family: $font-family-oswald;
+  font-size: 1.4rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+@media screen and (min-width: 768px) {
+  .typography__sub-nav--red-h2 {
+    font-size: 1.8rem;
+  }
+}
+
+.typography__section--heading {
+  color: $primary-red;
+  font-family: $font-family-oswald;
+  font-size: 2rem;
+  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:not([role=tab]) {
+    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;
+  font-family: $font-family-power;
+  font-size: 1.1rem;
+  font-weight: $font-weight-bold;
+  letter-spacing: .02em;
+  text-transform: uppercase;
+}
+
+@media screen and (min-width: 360px) {
+  .typography__power-text {
+    font-size: 1.3rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .typography__power-text {
+    font-size: 2.2rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .typography__power-text {
+    font-size: 2.9rem;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .typography__power-text {
+    font-size: 3.1rem;
+  }
+}
+
+// Content Headings
+.typography__h2 {
+  color: $color-grey-heading;
+  font-family: $font-family-headings;
+  font-size: 2rem;
+  font-weight: $font-weight-boldish;
+}
+
+.typography__h3 {
+  color: $primary-blue;
+  font-family: $font-family-headings;
+  font-size: 1.75rem;
+  font-weight: $font-weight-bolder;
+}
+
+.typography__h4 {
+  color: $primary-red;
+  font-family: $font-family-headings;
+  font-size: 1.7rem;
+  font-weight: $font-weight-bolder;
+}
+
+.typography__h5 {
+  color: $color-grey-heading;
+  font-family: $font-family-headings;
+  font-weight: $font-weight-bold;
+  font-size: 1.5rem;
+}
+
+.typography__h6 {
+  color: $color-grey-heading;
+  font-family: $font-family-headings;
+  font-weight: $font-weight-bold;
+  font-size: 1.4rem;
+}
+
+.typography__h5--description {
+  color: $grey-6;
+  font-family: $font-family-oswald;
+  font-size: 1.25rem;
+  font-weight: 400;
+}
+
+.typography__phone--span {
+  color: $white;
+  font-family: $font-family-oswald;
+  font-size: 1.3rem;
+  font-weight: $font-weight-regular;
+  letter-spacing: .07rem;
+  white-space: nowrap;
+}
+
+@media screen and (min-width: 768px) {
+  .typography__phone--span {
+    font-size: 1.45rem;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .typography__phone--span {
+    font-size: 1.5rem;
+  }
+}
+
+.typography__p--bold {
+  color: $color-grey-heading;
+  font-family: $font-family-headings;
+  font-weight: $font-weight-bold;
+  font-size: 1.25rem;
+  line-height: 1.2;
+}
+
+.typography__stories--quote {
+  color: $primary-blue;
+  font-family: 'Oswald', sans-serif;
+  font-size: 1.1em;
+  font-weight: 300;
+}
+
+@media screen and (min-width: 488px) {
+  .typography__stories--quote {
+    font-size: 1.3rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .typography__stories--quote {
+    font-size: 1.2rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .typography__stories--quote {
+    font-size: 1.4rem;
+  }
+}
+
+.typography__col--heading-underline {
+  background-image: url(/assets/img/heading-bg-underline.png);
+  background-repeat: no-repeat;
+  background-position: 0 50px;
+}
+
+.typography__col--heading-underline-tan {
+  background-image: url(/assets/img/heading-bg-underline-tan.png);
+  background-repeat: no-repeat;
+  background-position: 0 50px;
+}
+
+// Other font styles
+
+p,
+ul:not(.navbar-nav), // :not() selecter prevents unnecesary style override
+ol { // Needed so list font looks the same as paragraph font
+  color: $color-grey-heading; // Bootstrap sets these things to black
+  font-family: $font-family-paragraph;
+  font-size: $font-size-base;
+}
+
+.typography__tables th {
+  color: $primary-red;
+  font-family: $font-family-headings;
+  font-weight: $font-weight-bold;
+}
+
+.typography__tables td {
+  color: $color-grey-heading; // Bootstrap sets these things to black
+  font-family: $font-family-paragraph;
+  font-size: $font-size-base;
+}
+
+h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup { // Make superscripts within headings a little bit smaller than reboot's styling
+  font-size: 45% !important;
+  top: -1em;
+  font-weight: normal;
+}
+.typography__register--h2 {
+  color: $white;
+  font-family: eurostile, sans-serif;
+  font-size: 2.4rem;
+  font-weight: $font-weight-boldish;
+  letter-spacing: .03rem;
+  position: relative;
+  top: 30%;
+  margin-bottom: -10px;
+}
+
+@media screen and (min-width: 400px) {
+  .typography__register--h2 {
+    font-size: 3rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .typography__register--h2 {
+    font-size: 5.2rem;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .typography__register--h2 {
+    font-size: 6rem;
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .typography__register--h2 {
+    font-size: 6.6rem;
+  }
+}
+
+.typography__register--h3 {
+  color: $white;
+  font-family: eurostile, sans-serif;
+  font-size: 1.2rem;
+  font-weight: $font-weight-boldish;
+  letter-spacing: .03rem;
+  position: relative;
+  top: 31%;
+}
+
+@media screen and (min-width: 400px) {
+  .typography__register--h3 {
+    font-size: 1.45rem;
+    top: 30.5%;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .typography__register--h3 {
+    font-size: 2.5rem;
+    top: 30%;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .typography__register--h3 {
+    font-size: 2.6rem;
+    top: 30%;
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .typography__register--h3 {
+    font-size: 2.7rem;
+    top: 30%;
+  }
+}
+
+.typography__register--caption {
+  color: $white;
+  font-family: $font-family-oswald;
+  font-size: 1rem;
+  font-weight: $font-weight-boldish;
+  letter-spacing: .07rem;
+  position: absolute;
+  bottom: 15px;
+}
+
+@media screen and (min-width: 1200px) {
+  .typography__register--caption {
+    font-size: 1.2rem;
+  }
+}
+
+.typography__register-h4 {
+  font-family: $font-family-oswald;
+  font-size: 1.6rem;
+}
+
+@media screen and (min-width: 768px) {
+  .typography__register-h4 {
+    font-size: 2rem;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .typography__register-h4 {
+    font-size: 2rem;
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .typography__register-h4 {
+    font-size: 2.3rem;
+  }
+}
+
+.typography__register--h5 {
+  color: $primary-red;
+  font-family: $font-family-oswald;
+  font-size: 2rem;
+  font-weight: $font-weight-bold;
+  letter-spacing: .03rem;
+  margin-bottom: 50px;
+}
+
+@media screen and (min-width: 768px) {
+  .typography__register--h5 {
+    font-size: 2.8rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .typography__register--h5 {
+    margin-bottom: 60px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .typography__register-h5 {
+    font-size: 3rem;
+  }
+}
+
+.typography__register--student-p {
+  color: $black;
+  font-weight: 600;
+  font-size: 1.2em;
+  margin-top: 15px;
+}
+
+.typography__register--img-cap {
+  font-weight: 600;
+  display: block;
+}
+
+.typography__register-itransfer {
+  font-size: 1.7rem;
+  font-weight: 600;
+  line-height: 1;
+  position: absolute;
+  top: 4rem;
+  margin-left: -20px;
+}
+
+@media screen and (min-width: 400px) {
+  .typography__register-itransfer {
+    font-size: 1.8rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .typography__register-itransfer {
+    font-size: 1.9rem;
+  }
+}
+
+.typography__register--h6 {
+  color: $primary-red;
+  font-family: $font-family-saira;
+  font-weight: 700;
+  font-size: 2rem;
+  letter-spacing: .03rem;
+}
+
+#page-top::before {
+  display: block;
+  content: " ";
+  margin-top: -60px;
+  height: 60px;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.typography__larger-p {
+  font-size: 1.2rem;
+}
+
+.typography__register--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) {
+  .typography__register--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) {
+  .typography__register--thank-you {
+    font-size: 2.6rem;
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .typography__register--thank-you {
+    font-size: 3rem;
+    margin-top: -15px;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .typography__nowrap--sm {
+    white-space: nowrap;
+  }
+}
+
+.typography__color--inherit {
+  color: inherit;
+}
+
+.typography__dropdown--category {
+  color: $primary-blue !important;
+  font-size: 1.15em;
+  font-weight: 600;
+}
+
+.typography__my-kcc {
+  font-family: $font-family-kcc;
+  line-height: 1.2;
+  font-size: 1.2rem;
+}
+
+.typography__alert {
+  color: $color-alert;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}