carhop__dynamiques-theme__PROD-DEV/resources/css/pages/singles.css

.page--single-revue,
.page--single-articles {
  .content-wrapper {
    /* @apply bg-yellow-400; */
    @apply container;
    @apply mx-auto grid  gap-12 lg:py-12 py-6 items-start;

    grid-template-columns: 1fr 2fr;

    @media (max-width: 1024px) {
      grid-template-columns: 1fr;
    }

    &[data-active-tab='article'] {
      #article-tags,
      #article-authors,
      #article-references,
      .article-informations,
      .sidebar .search-field,
      .table-matieres {
        @apply hidden;
      }
    }
    &[data-active-tab='authors'] {
      .edito,
      .article-informations,
      #article-references,
      .article-content,
      .sidebar .index-panel,
      .table-matieres {
        @apply hidden;
      }
    }
    &[data-active-tab='references'] {
      #article-authors,
      .article-informations,
      .article-content,
      .sidebar .index-panel,
      .table-matieres {
        @apply hidden;
      }
    }
    &[data-active-tab='table-of-contents'] {
      #revue-authors,
      #article-authors,
      #article-references,
      .article-informations,
      .article-content,
      .sidebar .index-panel {
        @apply hidden;
      }
    }
    &[data-active-tab='informations'] {
      .edito,
      #revue-authors,
      #article-authors,
      #article-references,
      .article-content,
      .table-matieres,
      .sidebar .index-panel {
        @apply hidden;
      }
    }
  }

  .sidebar {
    @media (max-width: 1024px) {
      #article-tags {
        @apply hidden;
      }
    }
    .search-field {
      @apply relative;
      &:after {
        content: ' ';
        @apply block w-8 h-8;
        @apply absolute top-1/2 right-0 -translate-y-1/2;
        @apply mr-2;
        @apply bg-contain;
        background-image: url('../resources/img/icons/carhop-rechercher-green-circle.svg');
      }
      input {
        @apply border border-primary text-primary w-full;
        @apply w-full p-4 relative;

        &::placeholder {
          @apply opacity-90;
        }
      }
    }
    .tags {
      @apply hidden lg:block;
    }
    .tags__title {
      @apply text-lg uppercase font-semibold mt-8 my-4 nunito;
    }
    .tags-list {
      @apply flex flex-wrap gap-4;
    }
    .article-tag {
      @apply block;
    }
  }

  .content-area {
    @apply max-w-screen-2xl mx-auto w-full;
    .edito {
      @apply border border-primary p-6 mb-12;
      summary {
        cursor: pointer;
        @apply relative;
        &::marker {
          content: none;
        }
        &::after {
          @apply absolute top-1/2 right-0 -translate-y-1/2;
          transition: transform 0.3s ease-out;
          background-image: url('../resources/img/elements/select-drop-button.svg');
          /* background-image: url('../resources/img/icons/icon-activites.svg'); */

          content: ' ';
          @apply bg-contain;
          /* @apply bg-red-500; */
          @apply block w-12 h-12;
          @apply rounded-full;
          @apply mr-2;
        }
      }
      &[open] {
        summary::after {
          transform: rotate(-180deg) translateY(50%);
        }
      }
      &__title {
        @apply text-3xl font-bold;
      }
      &__content {
        @apply text-lg mt-6;
      }
      &__cta {
        @apply my-4;
      }
    }
    .table-matieres {
      &__title {
        @apply text-4xl font-bold mb-12;
      }
      .article-grid__list {
        @apply grid grid-cols-1 gap-4;
      }
    }
  }
  article {
    /* @apply py-12 my-12; */
    @apply text-carhop-gray;
    .article-title {
      @apply mb-8;
    }
    .article-tags {
      @apply mb-12;
    }
    ul,
    ol,
    p {
      @apply mb-6;
    }
    h1 {
      @apply mb-10;
    }
    h2,
    h3 {
      @apply font-bold nunito mb-3 mt-12;
      font-size: 1.7rem;
    }
  }

  #cite-reference {
    @apply hidden;
  }

  .content-tab__title {
    @apply text-3xl  uppercase font-thin mb-6;
  }
}

/* HANDLING STICKY SIDEBAR ON MOBILE */
.content-wrapper[data-active-tab='article'] {
  .sidebar {
    @apply sticky top-0;

    /* ON MOBILE, STICK ON THE BOTTOM OF THE ARTICLE */
    /* We need to reverse the content order */
    @media (max-width: 1024px) {
      @apply sticky bottom-0 z-50;
      order: 2;
      @apply sticky bottom-0;
      align-self: flex-end;
    }
  }
}