FEATURE Styling the shape variations and behaviours

resources/css/blocks/content-box.css

@@ -3,78 +3,102 @@
 }
 
 .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,
+    .content-box__innerblocks {
-  &.aligncontained {
+      @apply z-10 relative;
-    @apply !mx-auto;
+    }
   }
-  &.aligncontained {
+
-    @apply !max-w-screen-lg;
+  .content-box__shape {
+    @apply top-0 left-0 w-full h-full absolute;
   }
-  /* &.alignwide {
+
+  @apply py-16;
+  background-color: var(--content-box-background-color, transparent);
+}
+
+&.alignwide,
+&.aligncontained {
+  @apply !mx-auto;
+}
+&.aligncontained {
+  @apply !max-w-screen-lg;
+}
+/* &.alignwide {
     @apply max-w-screen-lg;
   } */
 
-  .wp-block-group {
+.wp-block-group {
+}
+
+&--bg-light {
+  --content-box-text-color: var(--wp--preset--color--carhop-green);
+  --advised-text-color: var(--wp--preset--color--carhop-green, inherit);
+}
+
+&--bg-dark {
+  --content-box-text-color: #fff;
+  --advised-text-color: #fff;
+
+  p {
+    color: var(--advised-text-color, inherit);
   }
 
-  &--bg-light {
+  .wp-block-carhop-blocks-cta {
-    --content-box-text-color: var(--wp--preset--color--carhop-green);
+    --cta-current-color: #fff;
-    --advised-text-color: var(--wp--preset--color--carhop-green, inherit);
+    color: blue;
-  }
 
-  &--bg-dark {
+    &:after {
-    --content-box-text-color: #fff;
+      /* background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg'); */
-    --advised-text-color: #fff;
+      filter: brightness(41);
-
-    p {
-      color: var(--advised-text-color, inherit);
-    }
-
-    .wp-block-carhop-blocks-cta {
-      --cta-current-color: #fff;
-      color: blue;
-
-      &:after {
-        /* background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg'); */
-        filter: brightness(41);
-      }
-    }
-
-    a[target='_blank'] {
-      &:after {
-        background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg');
-      }
     }
   }
 
-  &__innerblocks {
+  a[target='_blank'] {
-    @apply mx-auto px-4 md:px-8;
+    &:after {
-    > :not(.alignwide):not(.alignfull) {
+      background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg');
-      @apply max-w-screen-lg mx-auto;
     }
   }
-  &.alignwide .content-box__innerblocks {
+}
-    > :not(.alignfull) {
-      @apply max-w-screen-xl mx-auto;
-    }
-  }
-  h3 {
-    /* @apply title-small font-bold; */
-  }
 
-  /* h1.wp-block-heading {
+&__innerblocks {
+  @apply mx-auto px-4 md:px-8;
+  > :not(.alignwide):not(.alignfull) {
+    @apply max-w-screen-lg mx-auto;
+  }
+}
+&.alignwide .content-box__innerblocks {
+  > :not(.alignfull) {
+    @apply max-w-screen-xl mx-auto;
+  }
+}
+h3 {
+  /* @apply title-small font-bold; */
+}
+
+/* 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,
+ul + h3,
-  p + h3 {
+p + h3 {
-    @apply mt-12;
+  @apply mt-12;
-  }
+}
 
-  h3 + p {
+h3 + p {
-    @apply !mt-3;
+  @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;
+  list-style: disc;
-  }
+}
-  > ul {
+> ul {
-    padding-left: 1.5rem;
+  padding-left: 1.5rem;
-  }
+}
-  .carhop-heading:not(:first-child) {
+.carhop-heading:not(:first-child) {
-    @apply pt-32;
+  @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 {