FEATURE Styling the shape variations and behaviours

resources/css/blocks/content-box.css

@@ -3,38 +3,62 @@
 }
 
 .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 {
+    @apply !relative;
+    background-color: transparent !important;
 
-  &.alignwide,
-  &.aligncontained {
+    .content-box__innerblocks {
+      @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 {
   @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;
 
@@ -57,24 +81,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;
   }
 
@@ -84,15 +108,15 @@
   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;
@@ -100,15 +124,14 @@
     @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 {
@@ -143,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 {