STYLE Fixing and refining content-box

resources/css/blocks/content-box.css

@@ -4,25 +4,26 @@
 
 .content-box {
   @apply relative px-4 md:px-8;
+
   &--variant-framed {
     @apply border border-carhop-green-600;
   }
 
   &--variant-backgrounded {
-    @apply py-16;
     background-color: var(--content-box-background-color, transparent);
   }
   &--variant-framed-backgrounded {
-    @apply py-16;
     @apply border border-carhop-green-600;
     background-color: var(--content-box-background-color, transparent);
   }
+
   &--shape-straight {
     @apply py-16;
     background-color: var(--content-box-background-color, transparent);
   }
   &--shapeA,
-  &--shapeB {
+  &--shapeB,
+  &--shapeC {
     @apply !relative;
     background-color: transparent !important;
 
@@ -30,35 +31,33 @@
       @apply z-10 relative;
     }
   }
-
   .content-box__shape {
     @apply top-0 left-0 w-full h-full absolute;
   }
 
   @apply py-16;
   background-color: var(--content-box-background-color, transparent);
-}
 
-&.alignwide,
-&.aligncontained {
+  &.alignwide,
+  &.aligncontained {
     @apply !mx-auto;
-}
-&.aligncontained {
+  }
+  &.aligncontained {
     @apply !max-w-screen-lg;
-}
-/* &.alignwide {
+  }
+  /* &.alignwide {
     @apply max-w-screen-lg;
   } */
 
-.wp-block-group {
-}
+  .wp-block-group {
+  }
 
-&--bg-light {
+  &--bg-light {
     --content-box-text-color: var(--wp--preset--color--carhop-green);
     --advised-text-color: var(--wp--preset--color--carhop-green, inherit);
-}
+  }
 
-&--bg-dark {
+  &--bg-dark {
     --content-box-text-color: #fff;
     --advised-text-color: #fff;
 
@@ -81,24 +80,24 @@
         background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg');
       }
     }
-}
+  }
 
-&__innerblocks {
+  &__innerblocks {
     @apply mx-auto px-4 md:px-8;
     > :not(.alignwide):not(.alignfull) {
       @apply max-w-screen-lg mx-auto;
     }
-}
-&.alignwide .content-box__innerblocks {
+  }
+  &.alignwide .content-box__innerblocks {
     > :not(.alignfull) {
       @apply max-w-screen-xl mx-auto;
     }
-}
-h3 {
+  }
+  h3 {
     /* @apply title-small font-bold; */
-}
+  }
 
-/* h1.wp-block-heading {
+  /* h1.wp-block-heading {
     @apply !text-4xl mb-12;
   }
 
@@ -108,15 +107,15 @@ h3 {
   h4.wp-block-heading {
     @apply !text-2xl uppercase nunito font-medium tracking-widest pb-1;
   } */
-ul + h3,
-p + h3 {
+  ul + h3,
+  p + h3 {
     @apply mt-12;
-}
+  }
 
-h3 + p {
+  h3 + p {
     @apply !mt-3;
-}
-/* p > a {
+  }
+  /* p > a {
     transition: all 0.3s ease-out;
     @apply underline underline-offset-8;
     text-decoration-thickness: 1px;
@@ -124,14 +123,15 @@ h3 + p {
     @apply underlined-link underlined-link--white;
   } */
 
-ul {
+  ul {
     list-style: disc;
-}
-> ul {
+  }
+  > ul {
     padding-left: 1.5rem;
-}
-.carhop-heading:not(:first-child) {
+  }
+  .carhop-heading:not(:first-child) {
     @apply pt-32;
+  }
 }
 
 main > .content-box:first-child {
@@ -166,7 +166,7 @@ body.wp-admin.post-type-articles .content-box,
 body.single-activites .content-box,
 body.wp-admin.post-type-page .content-box,
 body.page .content-box {
-  /* @apply py-16; */
+  @apply py-16;
   color: var(--content-box-text-color);
 
   .carhop-heading p {
@@ -207,3 +207,29 @@ body.page .content-box {
   ) {
   @apply !mb-0;
 }
+
+.wp-block-carhop-blocks-content-box.alignfull + .alignfull {
+  @apply !mt-0;
+}
+
+.wp-block-carhop-blocks-content-box.alignfull:has(+ .alignfull) {
+  @apply !mb-0;
+}
+
+.page-single:has(
+  .content-wrapper[data-active-tab='post']
+    .post-content.entry-content
+    > .content-box.alignfull:last-child
+) {
+  .content-wrapper + .alignfull {
+    @apply !-mb-12;
+  }
+  .content-wrapper + .alignfull {
+    /* @apply !bg-red-500 opacity-40; */
+    margin-top: -70px !important;
+  }
+}
+
+.content-box--variant-backgrounded.content-box--shapeC.alignfull + .alignfull {
+  @apply !-mt-5;
+}