Wallet/src/sass/views/onboarding/onboarding.scss

.onboarding {
  background: #1e3186;
  background-image: linear-gradient(to bottom, #1e3186 0%, #111b49 100%);
  height: 100%;
  text-align: center;
  .bar.bar-header {
    background: none;
    border: 0 none transparent;
    color: #fff;
    button {
      color: #fff;
    }
    .secondary-buttons {
      button {
        color: rgba(255, 255, 255, .5);
      }
    }
  }
  ion-content {
    height: 100%;
    .scroll{
      height: 100%;
    }
    color: #fff;
    h2, h3{color:#fff;}
    h2 {
      font-size: 1.4rem;
    }
    p {
      &.tagline {
        color: rgba(255, 255, 255, .5);
      }
    }
    #cta {
      background-size: contain;
      width: 100%;
      clear: both;
      height: 23rem;
      margin-bottom: -3rem;
      background-position: center;
      background-repeat: no-repeat;
      img {
        height: 16rem;
      }
    }
    button {
      color:#fff;
    }
    @media (min-width: 450px){
      p{
        font-size: 1.1rem;
        line-height: 1.6;
      }
    }
  }
  .swiper-pagination {
    &-bullet {
      background: $soft-blue;
      &-active {
        background: $soft-blue;
      }
    }
  }
}

@media (min-width: 415px){
  .onboarding{
    ion-content{
      h2{
        font-size: 2rem;
      }
      p{
        font-size: 1.4rem;
        line-height: 1.6;
      }
    }
  }
}

%cta-buttons {
  position: absolute;
  bottom: 0;
  width: 100%;
}

@import "terms-of-use";
@import "onboarding-buttons";
@import "onboard-welcome";
@import "onboard-tour";
@import "onboard-collect-email";
@import "onboard-backup-request";
@import "../backup-warning";
@import "onboard-disclaimer";
@import "onboard-push-notifications";

%onboarding-illustration {
  position: absolute;
  width: 100%;
  height: 40%;
  margin-top: 25vh;
  top: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.onboarding-illustration {
  &-secure {
      @extend %onboarding-illustration;
      background-image: url(../img/onboarding-tour-phone.svg);
  }
  &-currency {
    @extend %onboarding-illustration;
      background-image: url(../img/onboarding-tour-currency-bg.svg);
  }
  &-control {
    @extend %onboarding-illustration;
      background-image: url(../img/onboarding-tour-control.svg);
  }
}