zcash-grant-system/frontend/client/components/Home/style.less

@import '~styles/variables.less';

.Home {
  &-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;

    &-inner {
      max-width: @max-content-width;
      margin: 0 auto;
      padding: 8rem 2rem 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;

      @media @tablet-query {
        align-items: center;
      }
    }

    &-title {
      font-size: 2.6rem;
      text-align: left;
      margin: 0 0 2rem 2.5rem;

      @media @tablet-query {
        text-align: center;
        font-size: 2.3rem;
        margin-left: 0;
      }

      @media @mobile-query {
        font-size: 2.2rem;
      }

      @media @tiny-query {
        font-size: 1.8rem;
      }
    }

    &-buttons {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 2rem;

      @media @tablet-query {
        margin-left: 0;
      }

      @media @mobile-query {
        flex-direction: column;
        width: 100%;
      }

      &-button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 4.2rem;
        width: 16rem;
        padding: 0;
        margin: 0 10px;
        border: 2px solid rgba(@text-color, 0.7);
        color: rgba(@text-color, 0.7);
        text-align: center;
        font-size: 1.4rem;
        border-radius: 4px;
        background: #FFF;
        transition: transform 200ms ease, box-shadow 200ms ease;

        &:hover,
        &:focus {
          transform: translateY(-2px);
          border-color: rgba(@text-color, 0.9);
          color: rgba(@text-color, 0.9);
        }

        &:active {
          transform: translateY(0px);
          border-color: rgba(@text-color, 1);
          color: rgba(@text-color, 1);
        }

        @media @mobile-query {
          width: 100%;
          height: 5rem;
          font-size: 1.8rem;
          max-width: 320px;
          margin-bottom: 1rem;

          &:last-child {
            margin-bottom: 0;
          }
        }

        &.is-primary {
          border-color: rgba(@primary-color, 0.7);
          color: rgba(@primary-color, 0.7);

          &hover,
          &:focus {
            color: @primary-color;
            border-color: rgba(@primary-color, 0.9);
            color: rgba(@primary-color, 0.9);
          }

          &:active {
            border-color: rgba(@primary-color, 1);
            color: rgba(@primary-color, 1);
          }
        }
      }
    }

    &-background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      pointer-events: none;

      
      &-planets {
        position: absolute;
        left: 70%;
        bottom: 33%;
        width: 140%;
        max-width: 1920px;
        transform: translateX(-80%) translateY(100%);
        
        @media @tablet-query {
          width: 180%;
          left: 85%;
          bottom: 25%;
        }

        @media @mobile-query {
          width: 220%;
          left: 90%;
          bottom: 20%;
        }

        &:after {
          content: '';
          display: block;
          padding-top: 100%;
        }

        &-planet {
          position: absolute;
          border-radius: 100%;
          box-shadow: 0 0 20px rgba(#000, 0.1);

          &.is-large {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, #000, @primary-color);
          }

          &.is-small {
            top: 0;
            left: 57%;
            width: 25%;
            height: 25%;
            background: linear-gradient(
              to top,
              darken(@primary-color, 20%),
              darken(@primary-color, 10%)
            );
          }
        }
      }

      &-rocket {
        position: absolute;
        right: 10%;
        bottom: 12%;
        height: 30vw;
        min-height: 260px;
        max-height: 540px;
        transform: rotate(45deg);
        transform-origin: top center;

        @media @tablet-query {
          top: auto;
          bottom: 40%;
          right: 50%;
          height: 60vw;
          transform: translateY(50%) rotate(90deg);
          transform-origin: center;
        }

        @media @mobile-query {
          bottom: 32%;
        }
      }
    }
  }

  &-intro {
    text-align: center;
    padding: 6rem 2rem;
    box-shadow: 0 30px 30px -30px rgba(0, 0, 0, 0.3) inset,
      0 -30px 30px -30px rgba(0, 0, 0, 0.3) inset;

    &-text {
      max-width: 760px;
      font-size: 1.7rem;
      margin: 0 auto 4rem;
      font-weight: normal;
    }

    &-blobs {
      display: flex;
      justify-content: space-between;
      max-width: 960px;
      margin: 0 auto;

      @media (max-width: 800px) {
        flex-direction: column;
      }

      &-blob {
        margin: 0 1.5rem;

        @media (max-width: 800px) {
          margin: 0 auto;
          margin-bottom: 3rem;
          max-width: 320px;
        }

        svg {
          margin-bottom: 1rem;
          opacity: 0.75;
          height: 100px;
        }

        p {
          font-size: 1rem;

          @media (max-width: 800px) {
            font-size: 1.4rem;
          }
        }
      }
    }
  }
}