// overwrites global styles on homepage
.page-home {
  .navbar-top {
    min-height: 4.25rem;
    padding-top: 3.5rem;

    .container {
      min-height: 1rem;
    }
  }
}

.page-home + .footer-links {
  margin-left: 0;

  dl {
    dt {
      font-size: 1.25rem;
    }
  }
}

// unique homepage layouts
.home-intro {
  min-height: 100vh;
  background: url('/img/topography.png') left top repeat;
  background-attachment: fixed;
  position: relative;
  margin-bottom: -16px;

  img.logo {
    position: absolute;
    top: 50vh;
    margin-top: -14vw;
    right: 60vw;
    width: 10vw;
  }

  h1 {
    font-size: 2.775vw;
    position: absolute;
    left: 44vw;
    top: 50vh;
    margin-top: -13.25vw;
    max-width: 40vw;
    line-height: 1.2;
    letter-spacing: -0.015rem;

    strong {
      display: block;
      font-style: normal;
      color: $navy;
    }

    em {
      margin-bottom: -0.25vw;
    }
  }

  h2 {
    border: 5px solid $light1;
    font-size: 2vw;
    position: absolute;
    background: rgba(255,255,255,0.67);
    bottom: 8.5vw;
    left: 25vw;
    width: 48vw;
    padding: 2vw 5.5vw 2vw 2.5vw;
    line-height: 1.5;
    letter-spacing: -0.015rem;
    vertical-align: center;
    letter-spacing: 0.05em;
    color: $navyd;
    font-family: $base;
    z-index: 1110;

    a {
      color: $navyl;
      @include ripple;
    }
  }
}


// v2 era layout

.home-overview-wrap {
  background: 
    url('/img/topography.png') repeat top left,
    linear-gradient(180deg, darken($navy, 5%) 0%, $navy 100%);
  background-blend-mode: color-burn;
  background-attachment: fixed;
  padding-top: 7.5rem;
  // padding-bottom: 5rem;
  min-height: 100vh;

  .content-wrapper {
    max-width: 80vw;
    padding-bottom: 5rem;
    
    h2, h3, p {
      color: white;
    }
  
    .lead {
      text-align: left;

      p {
        color: white;
        padding-right: 5vw;
        line-height: 1.925;
      }

      h3 {
        margin: 2.5rem 0 1.25rem;
      }
    }

    ul {
      margin: 0 2vw;
      padding: 0;
      color: white;

      li {
        color: white;
      }
    }

    a {
      background: $navyd;
      opacity: 0.9;
      color: white;
      text-decoration: underline;
    }

    a:hover {
      background: $navyl;
      color: white;
    }
  }

  h2 {
    font-weight: bold;
    color: white;
  }

  img.pyramid {
    max-width: 10vw;
  }

  .tile-features {
    .tile.is-parent {
      padding: 3rem 0 0;
    }
  
    .tile.is-child {
      background: darken($navyd, 7%);
      border-radius: 0.5vw;
      padding: 0.75rem 1rem;
      box-shadow: none;
      
      p {
        font-size: 1rem;
        line-height: 1.636;
        margin: 0.75rem 0 0.25rem;
  
        &.title {
          font-size: 1.333vw;
          margin: 0;
          color: white;
        }
  
        code {
          background: none;
          color: white;
          font-size: 0.925rem;
        }
      }
    }
  }

  .tile-actions {
    padding: 0;
    margin: 2rem 6.25vw 4.5rem;

    .tile.is-child {
      padding: 0.75vw 2.5vw 3vw;
      border: 10px solid white;
      background: url('/img/topography.png') left top repeat;
      background-color: rgba(35,35,35,0.02);
      background-blend-mode: color-burn;
      background-attachment: fixed;

      &:first-of-type {
        border-right: none;
      }

      p {
        font-size: 1.25vw;
        line-height: 1.7;
        color: $dark1;
      }

      img {
        max-width: 66.67%;
        margin: 2.5vw auto 0;
        box-shadow: 0 2px 5px $dark1;
      }
    }

    h2 {
      color: $navyd;
      font-size: 2vw;
      text-align: center;
    }

    ul.tabs {
      border-bottom: 3px solid $light1;
      margin: 2.5vw 0 0.75vw;
      position: relative;
      z-index: 200;
      overflow: visible;

      li {
        margin: 0 0 -2px;
        border: none;
        padding: 0;
        z-index: 680;
        position: relative;

        a {
          @include klinicBold;
          font-size: 1vw;
          border-bottom: 3px solid $light1;
          margin: 0;

          &.active {
            color: $navyl;
            border-bottom: 2px solid $navyl;
          }
        }
      }
    }

    @keyframes fadeEffect {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    .tabcontent {
      display: none;
      animation: fadeEffect 1s; /* Fading effect takes 1 second */
      position: relative;
      padding-bottom: 4.25rem;
  
      &.active {
        display: block;
      }
  
      code,
      pre,
      input {
        overflow-wrap: break-word;
        white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        white-space: pre-wrap;       /* css-3 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
        white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
        word-break: break-all;
        white-space: normal;
        background: $light2;
        border: none;
        outline: none;
        color: $navyd;
        font-size: 1.333vw;
        font-family: monospace;
        font-weight: 400;
        width: 100%;
        padding: 1.2rem 6.25rem 1.2rem 1.2rem;
  
        &:before {
          display: none;
        }
      }
  
      button {
        position: absolute;
        right: 0.5rem;
        top: 0.45rem;
        background: white;
        border: 2px solid $navyl;
        font-size: 1.1vw;
        color: $navyl;
        @include transition;

        &:hover {
          background-color: $navyl;
          color: white;
        }
        &:active {
          background: $green;
          color: white;
        }
      }
    }
  }

  .level-faqs {
    background-color: $light2;
    min-width: 37.5vw;
    margin: 1rem auto 7.5rem;
    padding: 1vw;
    border-radius: 5rem;

    img {
      max-width: 6vw;
      margin-left: -1vw;
    }

    p {
      min-width: 25vw;
    }

    p.heading {
      @include klinicBold;
      font-size: 1.25vw;
      margin-bottom: 0.333rem;
      text-transform: none;
    }

    p.title {
      font-size: 1vw;
    }
  }
}

.home-overview {
  position: relative;

  .large-3 {
    min-height: 280px;
  }

  h2 {
    @include klinicBold;
    color: white;
    margin: 1.5rem 0 2.5rem;
    display: inline-block;

    .fa {
      color: $pink;
    }
  }

  h3 {
    color: white;
    margin: 0.25em 0 0.5em;
    font-size: 1.5rem;
    padding-top: 90px;
    position: relative;
    @include klinicBold;

    small {
      position: absolute;
      top: 8.667em;
      color: white;
      width: 10em;
      left: 50%;
      font-size: 0.6em;
      margin-left: -5em;
    }
  }

  .columns {
    position: relative;
  }

  img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -29px;
  }

  p {
    font-size: 0.925rem;
    padding: 0 5%;
    line-height: 1.5;

    code {
      border: none;
    }
  }

  .row {
    background-color: white;

    &:first-child {
      border-radius: 0.5em 0.5em 0 0;
    }
    &:last-child {
      padding-bottom: 0.5em;
      border-radius: 0 0 0.5em 0.5em;
    }
  }
}

.get-helm {
  padding-bottom: 50px;
  border: 2px dashed $lightblue;
  padding: 2em;
  margin-bottom: 4em;
  position: relative;
  z-index: 100;

  &:after {
    position: absolute;
    display: block;
    content: " ";
    top: 0.667em;
    left: -0.25em;
    width: 100%;
    height: 375px;
    z-index: -5;
    background-color: $darkblue;
    transform: rotateX(12deg);
    opacity: 0.425;
  }

  h2 {
    margin: 0 0 0.5em;
    padding: 0;
  }

  img {
    margin: 0.333em 0;
  }
}

.get-charts {
  padding-left: 3.5rem;

  h2 {
    margin: 2.5rem 0 1rem;
    padding: 0;
  }
}

.helm-community {
  color: $navy;
  padding-top: 2rem;
  padding-bottom: 5rem;
  background: linear-gradient( 0deg, #fff, #F7F7F7);
  border-bottom: 1px solid $light1;

  h2 {
    @include klinicBold;
    margin: 5rem auto 1rem;
  }

  h2 + p {
    margin-bottom: 4.25rem;
  }

  p {
    font-size: 1.25rem;
    padding-right: 0;
  }

  .community-boxes {
    margin: 0 6vw;

    .box {
      padding: 0.4rem 1.667vw;
      box-shadow: 0 5px 12px $light2;

      &:hover {
        box-shadow: 0 1px 10px $light2;
        @include transition;
      }
      .title {
        font-size: 1.5rem;
      }

      a {
        // text-decoration: underline;
        color: $navy;
        border-bottom: 1px solid $navyl;
        @include ripple;
        text-align: left;
      }

      dl, p, ul, ol {
        margin: 0 0 1.5rem
      }

      p, dd, dt {
        font-size: 1.12rem;
        line-height: 1.5;
        color: $dark;
      }

      .placeholder {
        background: $salmonl;
        font-style: italic;
        padding: 1.125rem 0;
        text-align: center;
        margin: 1rem 0;
        display: inline-block;
        width: 100%;
        color: $grey2;
        border-radius: 0.5rem;
      }

      dd {
        padding: 0.25rem 0;

        em {
          font-size: 1rem;
          color: darken($light2, 50%);
        }
      }

      h3, dl dt {
        @include klinicBold;
        color: $navyl;
        font-size: 1.125rem;
        margin-top: 1.25rem;

        a {
          color: $navyl;
        }
      }
      
      .subtitle {
        font-size: 0.925rem;
        margin: 0.25rem 0 1.5rem;
        font-weight: normal;
        background: $light1;
        display: inline-block;
        padding: 0.5rem 0.75rem;
        line-height: 1.4;
      }
    }
  }
}

.helm-contrib-logos {
  text-align: center;
  padding-bottom: 8rem;
  padding-top: 1.5rem;

  img {
    padding: 0;
    display: inline-block;
    margin: 0 2vw;
    width: 23vw;
    max-width: 12rem;
  }

  .helm-logo {
    margin: 0 auto 2.25em;
    display: block;
    text-align: center;
    padding: 3.5em 0 0;
  }

  hr {
    background-color: $lightblue;
    height: 2px;
    opacity: 0.25;
    width: 50%;
    margin: 1rem 25%;
  }

  p {
    color: $dark1;
    text-align: center;
    padding: 0;
    margin: 0 auto;
    font-size: 1.333em;
    line-height: 2;
    letter-spacing: 0.025em;
    color: #9B9B9B;

    a {
      font-weight: bold;
      color: $darkblue;
      border-bottom: 2px solid transparent;

      &:hover {
        border-bottom: 2px solid $blue;
      }
    }

    small {
      padding-top: 1rem;
      font-size: 0.925em;
    }
  }
}

.full-width {
  min-width: 100%;
}

.cncf {
  background: RGBA(246, 246, 246, 1.00);
  min-height: 5rem;
  margin-top: 4rem;
  text-align: center;
  padding-left: 0 !important;

  img {
    float: left;
    display: inline-block;
    max-width: 14rem;
    margin: 3rem 5%;
  }

  p {
    float: right;
    margin: 3.5rem 5%;
    display: inline-block;
    font-family: helvetica;
    color: #777;

    &:hover {
      color: $lightblue;
    }
  }
}