@import '@/styles/common.less';
@import '@/styles/variables.less';

.page-start {
  width: 100vw;
  height: 100vh;
  .flex-column();

  &.color-bg {
    background: linear-gradient(180deg, #efecff 0%, #f7f5ff 100%);
    padding-top: 347px;
    display: block;
  }

  &__app {
    margin-top: 50%;
  }

  &__icon {
    width: 312px;
    height: 152px;
  }

  &__text {
    font-size: 30px;
    line-height: 32px;
    font-weight: 400;
    color: @blColorG2;
    margin-top: 32px;
  }

  &__role-app {
    padding: 64px;
  }

  &__greet {
    font-size: 28px;
    line-height: 56px;
    color: @blColorG1;
    margin-bottom: 14px;
  }

  &__title {
    font-weight: 500;
    font-size: 48px;
    line-height: 57px;
    color: @blColor;
    margin-bottom: 75px;
  }

  &__card {
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid #ffffff;
    border-radius: 16px;
    padding: 56px 40px 56px;
    .flex-row();

    & + & {
      margin-top: 64px;
    }
  }

  &__avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
  }

  &__content {
    padding-left: 34px;
    .flex-column();
    flex: 1;
    align-items: start;

    .title {
      font-weight: 600;
      font-size: 40px;
      line-height: 48px;

      color: @blColor;

      margin-bottom: 16px;
    }
    .desc {
      font-size: 28px;
      line-height: 40px;
      color: @blColorG1;
    }
  }

  &__arrow {
    width: 24px;
    height: 24px;
  }
}