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: -361px;
      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;
            }
          }
        }
      }
    }
  }

  &__projects {
    background: rgba(238, 238, 238, 1);

    .projects {
      &__container {
        padding-top: 190px;
        padding-bottom: 81px;
      }

      &__code {
        position: absolute;
        left: -170px;
        top: 24px;
      }

      &__title {
        font-weight: 400;
        font-size: 343px;
        color: white;
        font-family: "Geraspoheko";
        margin: 0 auto;
        position: absolute;
        width: 100%;
        text-align: center;
        top: -50px;
        z-index: 2;
      }

      &__block {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        z-index: 3;
        h4 {
          font-weight: 900;
          font-size: 46px;
          line-height: 98%;
          letter-spacing: 0.03em;
          text-transform: uppercase;
          color: #4a4a4a;
        }
      }

      &__examples {
        display: flex;
        margin-top: 98px;
        justify-content: space-between;
        width: 100%;

        .stack__project {
          display: flex;
          flex-direction: column;
          align-items: center;
          row-gap: 35px;

          .project__img {
            border-radius: 8px;
            width: 99px;
            height: 81px;
            background: #A7CA60;
            position: relative;

            img {
              position: relative;
            }

            .flag {
              bottom: 21px;
              right: -10px;
            }

            .rabota {
              top: -40px;
              right: 25px;
            }

            .hand {
              top: -45px;
              left: -44px;
            }

            .fly {
              top: -30px;
            }
          }

          p {
            font-weight: 250;
            font-size: 14px;
            line-height: 129%;
            text-align: center;
            color: #4a4a4a;
            max-width: 226px;

            span {
              font-weight: 500;
            }
          }
        }
      }

      &__info {
        display: flex;
        margin: 56px auto 0;
        column-gap: 50px;
        align-items: center;
        border: 1px solid #f8f8f8;
        border-radius: 8px;
        padding: 47px 91px 47px 55px;

        p {
          max-width: 620px;
          font-weight: 250;
          font-size: 14px;
          line-height: 129%;
          color: #4a4a4a;

          span {
            font-weight: 500;
          }
        }

        button {
          padding: 15px 43px;
          font-weight: 700;
          font-size: 15px;
          color: #4a4a4a;
          background: #a7ca60;
          border-radius: 44px;
          border: none;
          max-height: 46px;
          width: 201px;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  &__steps {
    background: rgb(30, 30, 30);
    padding: 90px 0 40px;
    position: relative;

    .steps {

      &__container {
        flex-direction: column;
      }

      &__head {
        display: flex;
        justify-content: space-between;
        width: 100%;

        h4 {
          font-weight: 900;
          font-size: 66px;
          line-height: 98%;
          letter-spacing: 0.03em;
          text-transform: uppercase;
          color: #a7ca60;
          max-width: 380px;
          margin-bottom: 0;
        }
      }

      &__info {
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        max-width: 499px;

        p {
          font-weight: 300;
          font-size: 15px;
          line-height: 140%;
          color: #bdbdbd;
        }

        span {
          font-weight: 700;
        }
      }

      &__items {
        margin-top: 115px;
        display: flex;
        justify-content: space-between;

        .item {
          &__wrapper {
            position: relative;
          }

          &__head {
            position: absolute;
            display: flex;
            color: #a7ca60;
            top: -45px;
            left: 20px;

            h4 {
              margin-bottom: 0;
              font-weight: 700;
              font-size: 100px;
              text-transform: uppercase;
              line-height: 0.8;
            }

            p {
              font-weight: 700;
              font-size: 12px;
              letter-spacing: 0.01em;
              color: #a7ca60;
              max-width: 114px;
            }
          }
        }
      }

      &__item {
        position: relative;
        width: 235px;
        height: 153px;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(8.6999998093px);
        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%);
        border: 0.5px solid #717171;
        border-radius: 8px;

        .item {

          &__info {
            font-size: 15px;
            line-height: 131%;
            text-align: center;
            color: #fff;
            font-weight: 250;
            max-width: 160px;

            span {
              font-weight: 700;
            }
          }
        }
      }

      &__portfolio {
        width: 100%;
        position: absolute;
        bottom: -40px;
        display: flex;

        img {
          margin: 0 auto;
        }
      }

      &__code {
        position: absolute;

        &--first {
          top: -40px;
          left: 70px;
        }

        &--second {
          bottom: -40px;
          right: 0;
        }
      }
    }
    .steps__background {
      position: absolute;
      right: 0;
      top: -260px;
    }
  }
}