base.scss

@font-face {
  font-family: 'FixelText-Regular';
  src: url(/assets/fonts/FixelText-Regular.woff2);
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FixelText-Bold';
  src: url(/assets/fonts/FixelText-Bold.woff2);
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'FixelText-Medium';
  src: url(/assets/fonts/FixelText-Medium.woff2);
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Inria Bold';
  src: url(/assets/fonts/InriaSerif-Bold.woff2);
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: 'Inria Regular';
  src: url(/assets/fonts/InriaSerif-Regular.woff2);
  font-display: swap;
}

body {
  color: $black;
  font-family: 'FixelText-Regular', serif;
  -webkit-tap-highlight-color: transparent;
}
p { margin: 0; }
a:hover { text-decoration: none !important; }
a:visited { color: $black; }
ul, ol { margin-left: 0; }

.wrapper {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 990px;
  text-align: center;
  padding: 0 30px;
}

.page-title {
  position: inherit;
  margin-bottom: 50px;
  font-size: 45px;
  z-index: 1;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  text-align: center;
}

.block-cera-title {
  font-family: "FixelText-Regular", serif;
  font-size: 30px;
  letter-spacing: 0.4em;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.block-inria-title {
  font-family: "Inria Bold", serif;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 40px;
}

.block-sub-title {
  font-family: "FixelText-Regular", serif;
  font-size: 22px;
  letter-spacing: 0.4em;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.message {
  font-size: 22px;
  line-height: 35px;
  margin-bottom: 40px;
}

.description {
  text-align: left;
  font-size: 18px;
  line-height: 1.8em;
}

.description {
  text-align: left;
  font-size: 18px;
  line-height: 1.8em;
}

.body-content {
  display: flex;
  flex-direction: column-reverse;
}
.body-content__main-section { padding-top: 60px; }

.card {
  padding: 40px 30px;
  border-radius: 30px;
  background: $white;
  box-shadow: $main-shadow;

  &__title {
    color: $white;

    &-1 {
      font-size: 1.6em;
      letter-spacing: 0.3em;
      line-height: 1.7em;
      text-transform: uppercase;
    }

    &-2 {
      font-family: 'Inria Bold', serif;
      font-size: 1.8em;
      line-height: 1.6em;
      &.purple-heart { color: $purple-heart }
    }
  }
  &__icon { margin-top: 25px; }

  &__description {
    margin-top: 3vh;
    text-align: justify;
    font-size: 1.2em;
    line-height: 2em;
  }
}

.cards {
  &-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 5vh 0;
    .card { margin: 0 2vw 25px; }
  }
}

.desktop-only {
  @media (max-width: 767px){
    display: none!important;
  }
}

.mobile-only {
  @media (min-width: 768px){
    display: none!important;
  }
}

@media (max-width: 767px) {
  .body-content__main-section { padding-top: 0;}

  .body-content {
    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }

    &__main-section {
      overflow-y: auto;
      overflow-x: auto;
      width: 100%;
      flex: 0 0 auto;
      position: relative;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      scrollbar-width: none;
      &::-webkit-scrollbar { display: none; }
    }

    &__navigation {
      position: relative;
      flex-direction: row;
      width: 100%;
      height: 100%;
    }

    &__navigation-links {
      position: sticky;
      box-sizing: border-box;
      background: linear-gradient(#aa30be, #5723B5);
      top: 0;
      height: 100%;
      width: 70vw;
      padding: 5vw 0 0 10vw;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      z-index: 3;
    }
  }

  .description {
    font-size: 14px;
    color: $black;
  }

  .page-title {
    font-size: 20px;
    margin-bottom: 30px;
  }
  .block-cera-title { font-size: 20px; }

  .block-inria-title,.block-fixel-title {
    font-size: 18px;
    line-height: 23px;
  }
  .block-fixel-title,.block-fixel-title,.message { margin-bottom: 25px; }

  .message, .block-sub-title{
    font-size: 15px;
    line-height: 25px;
  }
}