guild_front/src/pages/Stack/stack.scss

.stack {
  font-family: "GT Eesti Pro Display";

  &__container {
    margin: 0 auto;
    padding: 85px 0 90px;
    max-width: 1020px;
    position: relative;
    display: flex;
  }
  &__intro {
    background: #EEEEEE;

    .intro {
      &__container {
        background-image: url("../../assets/images/backgroundLandingIntro.svg");
        background-repeat: no-repeat;
        background-position: center bottom;
      }
      &__info {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 2;
      }

      &__suptitle {
        font-weight: 700;
        font-size: 16px;
        color: #838383;
      }

      &__title {
        font-weight: 900;
        color: #A7CA60;
        font-size: 88px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin: 39px 0 6px;
      }

      &__subtitle {
        letter-spacing: 0.05em;
        font-size: 39px;
        font-weight: 700;
        color: #4A4A4A;
      }

      &__about {
        max-width: 380px;
        color: #4A4A4A;
        font-size: 14px;
        font-weight: 250;
        margin-bottom: 34px;

        span {
          font-weight: 400;
        }
      }

      &__links {
        display: flex;
        column-gap: 30px;
        align-items: center;
      }

      &__link {
        font-weight: 700;
        font-size: 12px;
        color: #A7CA60;
      }

      &__ellipse {
        z-index: 1;
        top: 65%;
        left:50%;
        transform:translate(-50%, -50%);
        position: absolute;
      }

      &__aside {
        position: relative;
        border-radius: 24px 0 113px 0;
        top: 55px;
        width: 330px;
        height: 517px;
        background: rgba(167, 202, 96, 0.7);
        margin-left: 96px;
        z-index: 1;

        &:before {
          content: "";
          width: 182px;
          height: 106px;
          position: absolute;
          backdrop-filter: blur(8.699999809265137px);
          box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
          background: linear-gradient(137deg, rgba(255, 255, 255, 0.34) 0%, rgba(206, 198, 198, 0.34) 100%);
          border-radius: 8px;
          top: -35px;
          left: -25px;
          z-index: 3;
        }

        .aside {
          &__logo {
            z-index: 2;
            font-family: 'Geraspoheko';
            color: white;
            font-size: 343px;
            position: absolute;
            line-height: 325.92px;
            left: 80px;
            top: -30px;
          }

          &__clue {
            position: absolute;
            backdrop-filter: blur(8.699999809265137px);
            box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.03);
            background: linear-gradient(137deg, rgba(255, 255, 255, 0.34) 0%, rgba(206, 198, 198, 0.34) 100%);
            border-radius: 8px;
            width: 182px;
            height: 106px;
            bottom: 35px;
            right: -140px;
            z-index: 2;
            display: flex;
            padding: 24px 20px 18px 30px;
            border: 0.5px solid;
            border-image-source: linear-gradient(137.79deg, #FFFFFF 9.15%, #F4F4F4 76.22%);

            p {
              color: rgba(141, 141, 141, 1);
              font-size: 14px;
              font-weight: 300;
              letter-spacing: 0.03em;
              line-height: 15.96px;

              span {
                font-weight: 700;
              }
            }

            img {
              position: absolute;
              top: -25px;
              left: 0 ;
            }

            &:before {
              position: absolute;
              content: "Подсказка";
              font-weight: 700;
              color: rgba(205, 205, 205, 1);
              font-size: 14px;
              line-height: 19.18px;
              letter-spacing: 0.03em;
              top: -22px;
              right: 10px;
            }
          }

          &__cat {
            position: absolute;
            z-index: 3;
            bottom: 0;
            left: -125px;
          }
        }
      }
    }
  }

  &__button {
    max-width: 200px;
    width: 100%;
    background: #A7CA60;
    font-size: 15px;
    color: #4A4A4A;
    padding: 14px 0;
    border-radius: 44px;
    border: none;
  }

  &__opportunity {
    background: #1E1E1E;
  }
}