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;
        z-index: 2;
      }

      &__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: 45%;
        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;
    position: relative;

    .background__opportunity--left {
      position: absolute;
      top: -50%;
      left: -5%;
    }

    .background__opportunity--right {
      position: absolute;
      bottom: 0;
      right: 0;
    }

    .opportunity {

      &__container {
        padding: 105px 0 0px;
        flex-direction: column;
      }

      &__code {
        position: absolute;
        top: 35px;
        left: 55px;

        &--center {
          position: absolute;
          right: 31%;
          top: 34%;
        }
      }

      &__block {
        display: flex;
      }
      &__title {
        font-family: 'Geraspoheko';
        font-weight: 400;
        font-size: 343px;
        line-height: 1.03;
        margin-bottom: 0;
        z-index: 2;
        background: linear-gradient(360deg, #171717 0%, #2a2a2a 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
      }

      &__info {
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        .info {
          &__subtitle {
            padding-left: 31px;
            color: rgba(167, 202, 96, 1);
            font-weight: 700;
            font-size: 14px;
            line-height: 16.24px;
            margin-bottom: 30px;
          }

          &__about {
            padding-left: 31px;
            font-size: 14px;
            color: rgba(238, 238, 238, 1);
            line-height: 19.18px;
            font-weight: 250;
            max-width: 355px;
            margin-bottom: 27px;

            span {
              font-weight: 400;
            }
          }

          &__notification {
            padding: 21px 19px 23px 31px;
            border-radius: 8px;
            backdrop-filter: blur(8.699999809265137px);
            box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
            background: linear-gradient(137deg, rgba(87, 87, 87, 0.34) 0%, rgba(104, 104, 104, 0.34) 100%);
            position: relative;
            border: 0.5px solid #717171;

            img {
              position: absolute;
              width: 80.93px;
              height: 74.19px;
              left: -68px;
              top: -10px;
            }

            p {
              color: rgba(238, 238, 238, 1);
              line-height: 19.18px;
              font-size: 14px;
            }
          }
        }
      }

      &__subjects {
        display: flex;
        column-gap: 100px;
        position: relative;
        top: -100px;
        z-index: 3;
        right: -35px;

        .subject {
          display: flex;
          flex-direction: column;

          h4 {
            color: rgba(167, 202, 96, 1);
            letter-spacing: 0.03em;
            font-weight: 900;
            font-size: 88px;
            line-height: 86.58px;
            margin-bottom: 0;
          }

          &__skills {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 20px;

            span {
              border: 0.5px solid rgba(167, 202, 96, 0.5);
              border-radius: 56px;
              padding: 8px 25px 8px;
              color: rgba(167, 202, 96, 1);
              font-size: 17px;
              line-height: 20.88px;
            }
          }
        }
      }
    }
  }
}