// A cover block is a full size cover with a fixed background for smaller screens.

@include td-box-height-modifiers(".td-hero-block");
.td-hero-logo {
    margin-right: 0.5em;
}

.td-hero-block {
    padding-bottom: 12rem;
    p {
      color: $flux-white;
    }

    .fa-chevron-circle-down {
      color: $flux-darkest-blue !important;
    }

    & > .byline {
        position: absolute;
        bottom: 2px;
        right: 4px;
    }

    .col-terminal {
      padding-top: 0.5rem;
    }
}

.lead-gitops section {
  // border-top: 1px dotted rgb(150,150,200);
  padding: 0rem 0 2rem 0 !important;
  background: none;

  .td-arrow-down {
    &::before {
      border: {
        color: #{$flux-dark-blue} transparent transparent transparent;
      }
    }
  }
}

.hero-gitops {
  margin-left: -15px;
  margin-right: -15px;

  @include media-breakpoint-down(md) {
    padding: 0 15px;
  }

  background: $flux-dark-blue;

  background: radial-gradient(circle at bottom left, $flux-darkest-blue, rgba($flux-dark-blue, 0.5) 30vw, transparent 80vw),
              linear-gradient(0deg, $flux-dark-blue, rgba($flux-darkest-blue, 0.3) 30px, rgba($flux-darkest-blue, 0.3) 150px, transparent 400px),
              linear-gradient(0deg, $flux-dark-blue, transparent 200px),
              radial-gradient(circle at top right, rgba($flux-light-blue, 0.8), rgba($flux-lighter-blue, 0.5) 40%, rgba($flux-dark-blue, 0.8) 50%, transparent),
              repeating-linear-gradient(15deg, rgba($flux-darkest-blue, 0.2), rgba($flux-darkest-blue, 0.2) 2px,  rgba($flux-dark-blue, 0.2) 2px, rgba($flux-dark-blue, 0.2) 4px),
              $flux-dark-blue;

  p {
    color: $flux-white;
  }
  h1 {
    color: rgba($flux-white, 0.95);
  }
  h2 {
    color: rgba($flux-white, 0.95);
    font-weight: 800;
    margin-bottom: 2rem;
    font-size: 2.5rem;
  }
  a {
    color: $flux-light-blue !important;
    font-weight: 300;
    font-style: italic;
  }

  a.btn {
    color: $flux-black !important;
    font-style: normal;
    font-weight: 600;
    background-color: $flux-light-blue;
  }
}
