From 41ad51d03edc38c1b8e4c7901ae3f805d3000a8b Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Tue, 24 Mar 2026 15:36:27 +0100
Subject: [PATCH] FEATURE Styling the shape variations and behaviours

---
 resources/css/blocks/content-box.css | 151 +++++++++++++++------------
 1 file changed, 87 insertions(+), 64 deletions(-)

diff --git a/resources/css/blocks/content-box.css b/resources/css/blocks/content-box.css
index 63576f6..65b0828 100644
--- a/resources/css/blocks/content-box.css
+++ b/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,
-  &.aligncontained {
-    @apply !mx-auto;
+    .content-box__innerblocks {
+      @apply z-10 relative;
+    }
   }
-  &.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 {
-    --content-box-text-color: var(--wp--preset--color--carhop-green);
-    --advised-text-color: var(--wp--preset--color--carhop-green, inherit);
-  }
+  .wp-block-carhop-blocks-cta {
+    --cta-current-color: #fff;
+    color: blue;
 
-  &--bg-dark {
-    --content-box-text-color: #fff;
-    --advised-text-color: #fff;
-
-    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');
-      }
+    &:after {
+      /* background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg'); */
+      filter: brightness(41);
     }
   }
 
-  &__innerblocks {
-    @apply mx-auto px-4 md:px-8;
-    > :not(.alignwide):not(.alignfull) {
-      @apply max-w-screen-lg mx-auto;
+  a[target='_blank'] {
+    &:after {
+      background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg');
     }
   }
-  &.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,
-  p + h3 {
-    @apply mt-12;
-  }
+ul + h3,
+p + h3 {
+  @apply mt-12;
+}
 
-  h3 + p {
-    @apply !mt-3;
-  }
-  /* p > a {
+h3 + p {
+  @apply !mt-3;
+}
+/* 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 {
-    list-style: disc;
-  }
-  > ul {
-    padding-left: 1.5rem;
-  }
-  .carhop-heading:not(:first-child) {
-    @apply pt-32;
-  }
+ul {
+  list-style: disc;
+}
+> ul {
+  padding-left: 1.5rem;
+}
+.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 {