JS-Tech/resj

@import "../global/variables";

.std-top {
  background-position: 50% 50%;
  background-size: cover;

  margin: 55px 0 0 0;

  .content-wrapper {
    max-width: $content-width;
    padding: 0 $content-padding;
    margin: auto;
    padding: 150px 0 0px 40px;

    h1 {
      line-height: 1.3em;
      font-size: 7em;
      font-weight: 100;
      color: #ffffff94;
      margin: 0;
      text-transform: uppercase;
      word-wrap: anywhere;
    }
  }

  @media only screen and (max-width: $mobile-width) {
    margin: 0;

    .content-wrapper {
      padding: 0 $mobile-padding;

      h1 {
        color: #fff;
        font-size: 3em;
      }
    }
  }
}

.std-container {
  max-width: $content-width;
  padding: $content-padding;
  margin: auto;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;

  color: $color-dark-grey;

  padding-top: 60px;

  h2 {
    font-size: 2.1em;
    padding: 00px 0 12px 0;
    font-weight: 100;
    color: $color-dark-grey;
    text-transform: uppercase;
  }

  & > div:nth-child(1) {
    flex: 3;
    padding: 0 80px 0 0;

    details:not(.vanilla) {
      padding: 30px 0 30px 20px;

      summary {
        cursor: pointer;
        list-style: none;
        position: relative;

        &::-webkit-details-marker {
          display: none;
        }

        &::before {
          position: absolute;
          content: " ";
          width: 35px;
          height: 35px;
          background-image: image-url("layout/plus.png");
          background-position: 50% 50%;
          /* you can style it however you want, use background-image for example */
          left: -50px;
        }
      }

      &[open] summary::before {
        position: absolute;
        content: " ";
        width: 35px;
        height: 35px;
        background-image: image-url("layout/moins.png");
        background-position: 50% 50%;
        /* you can style it however you want, use background-image for example */
        left: -50px;
      }

      &.focus {
        animation-delay: 500ms;
        animation-name: bg-fade;
        animation-duration: 3s;
      }

      @keyframes bg-fade {
        from {
          background-color: #fccb6f;
        }
        to {
          background-color: #fff;
        }
      }
    }

    p {
      font-size: 14px;
      padding: 5px 0;
    }

    p.bigger {
      line-height: 1.4em;
      font-size: 16px;
      padding: 10px 0 15px 0;
    }
  }

  & > div:nth-child(2) {
    flex: 2;
    color: $color-violet;

    h2 {
      text-transform: uppercase;
      color: $color-violet;
    }

    a.violet {
      background-color: $color-violet;
      display: block;
      color: #fff;
      text-decoration: none;
      padding: 10px 10px;
      text-align: center;
      margin: 20px 0;
    }
  }

  @media only screen and (max-width: $mobile-width) {
    flex-direction: column;
    padding: 0;

    & > div:nth-child(1) {
      padding: 20px $mobile-padding;
      width: 100%;

      div.intro {
        padding: 20px 40px 0 40px;
      }
    }

    & > div:nth-child(2) {
      padding: 20px 0;
      width: 100%;
    }
  }
}