Banner: Home (Example)

.banner {
  color: $color-light1;
  position: relative;
}


.banner-home,
.banner-404 {
  background-size: cover;
  background-position: center;
  padding-top: $gridspacing * 3;

  h2 {
    @include textstyle-title2;
    margin-bottom: $gridspacing;
  }

  h3 {
    @include textstyle-h2-compact;
  }

  .banner-x-text {
    position: relative;
    z-index: 2;
  }

  @media (min-width: $media-tablet) {

    padding-top: $gridspacing * 10;

    h2 {
      @include textstyle-title1;
      margin-bottom: $gridspacing * 2;
    }

    h3 {
      @include textstyle-h1;
    }

  }

  @media (min-width: $media-hd) {
    padding-top: $gridspacing * 7;
  }
}

.banner-home {
  background-image: url('../css/images/home-banner.jpg');
  padding-bottom: $gridspacing * 3;
  background-color: #5a7682;
  background-position: center top;

  .banner-x-text {

    h2 {
      &:after {
        content: "";
        display: block;
        border-bottom: 4px solid $color-accent0;
        width: 130px;
        margin-top: $gridspacing * 2;
      }
    }
  }

  .banner-x-textbottom {
    h3 {
      margin-bottom: $gridspacing * 3;
    }
  }

  @media (min-width: $media-tablet) {
    padding-bottom: $gridspacing * 8;

    .banner-x-text {
      h3 {
        width: 50%;
      }
    }

    .banner-x-textbottom {
      display: flex;

      h3 {
        margin-bottom: 0;
      }
    }

    .banner-x-search {
      flex-grow: 1;
      padding-left: 8%;
    }
  }

  @media (min-width: $media-hd) {
    background-position: right top;
    background-size: 1440px 100%;
    background-repeat: no-repeat;
  }
}


.banner-404 {
  background-image: url('../css/images/campus.jpg');
  padding-bottom: $gridspacing * 8;

  h3 {
    margin-bottom: $gridspacing * 3;
  }

  @media (min-width: $media-tablet) {

    h3 {
      margin-bottom: $gridspacing * 4;
    }
  }
}

.banner-home,
.banner-detail,
.banner-404 {

  &:after {
    background: $color-dark5;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: .5;
    z-index: 1;
  }

  .banner-x-left-triangle,
  .banner-x-right-triangle {
    position: absolute;
    bottom: 0;
    opacity: .3;
    z-index: 2;
    height: 16%;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .banner-x-left-triangle {
    left: 0;
    width: 25%;
  }

  .banner-x-right-triangle {
    right: 0;
    width: 75%;
  }
}

.banner-detail {

  background: #000; // This is not seen due to the overlay, but fixes accessibility color contrast false positives
  padding: ($gridspacing * 5) ($gridspacing * 2) ($gridspacing * 3);

  &:after {
    opacity: .8;
  }

  a {
    color: $color-light1;

    &:focus {
      outline-color: $color-light1;
    }
  }

  button {
    &:focus {
      outline-color: $color-light1;
    }
  }

  h2 {
    @include textstyle-title2;
    margin-bottom: $gridspacing * 2;
  }

  .banner-x-left-triangle,
  .banner-x-right-triangle {
    opacity: .2;
  }

  .banner-x-mapbackground {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
  }

  .banner-x-content {
    position: relative;
    z-index: 3;
  }


  .banner-x-exportmobile,
  .banner-x-exporttablet {

    display: flex;
    z-index: 3;

    button {
      &:first-child {
        margin-right: $gridspacing * 2;
      }
    }
  }

  .banner-x-exportmobile {
    position: sticky;
    bottom: $gridspacing * 3;
    left: $gridspacing * 2;
    right: $gridspacing * 2;
    padding-top: $gridspacing * 4;

    button {
      width: 100%;
      box-shadow: 0 10px 20px 0 rgba($color-dark1, 0.7);
    }
  }

  .banner-x-exporttablet {
    display: none;
    flex-shrink: 0;
  }

  .banner-x-link {
    display: flex;
    align-items: center;
    margin-bottom: $gridspacing * 2;

    a {
      display: flex;
      align-items: center;
    }

    svg {
      display: block;
      fill: $color-light1;
      height: $gridspacing * 2;
      width: $gridspacing * 2;
      margin-left: $gridspacing;
    }
  }

  .banner-x-bodysection {
    margin-bottom: $gridspacing * 3;

    a {
      display: block;
      text-decoration: underline;
    }
  }

  .banner-x-label {
    font-weight: bold;
    margin-bottom: $gridspacing;
  }

  .banner-x-name {
    span {
      @include textstyle-small;
      margin-left: $gridspacing;
    }
  }

  .banner-x-address {
    margin-top: $gridspacing * 2;
  }

  .banner-x-phone {
    color: $color-light1;
  }

  // Since the export button is fixed, remove the bottom margin from 2nd bodysection.
  @media (max-width: $media-tablet + 1) {
    .banner-x-bodysection {
      &:nth-child(2) {
        margin-bottom: 0;
      }
    }
  }

  @media (min-width: $media-tablet) {

    padding-bottom: $gridspacing * 8;

    h2 {
      padding-right: $gridspacing * 5;
    }

    .banner-x-title {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .banner-x-exportmobile {
      display: none;
    }

    .banner-x-exporttablet {
      display: block;
    }

    .banner-x-link {
      @include textstyle-bodylarge;
      margin-bottom: $gridspacing * 3;
    }

    .banner-x-body {
      display: flex;
    }

    .banner-x-bodysmall {
      max-width: 75%;
    }

    .banner-x-bodysection {

      margin-bottom: 0;

      &:first-child {
        margin-right: $gridspacing * 6;
      }
    }
  }

  @media (min-width: $media-hd) {
    padding-bottom: $gridspacing * 8;
  }

  @media print {
    background: #fff;
    color: $color-dark2;

    a {
      color: $color-dark2;
    }

    h2 {
      @include textstyle-h1;
    }

    .banner-x-mapbackground {
      display: none;
    }

    .banner-x-exporttablet,
    .banner-x-exportmobile {
      display: none;
    }

    .banner-x-body {
      display: flex;
    }

    .banner-x-bodysection {
      width: 50%;
    }

    &:after {
      background-image: none;
    }
  }
}