From e54ee06cc0e54a202303b44c0bb42b45b7da6e2f Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Tue, 24 Mar 2026 17:55:10 +0100
Subject: [PATCH] STYLE Fixing and refining content-box

---
 resources/css/blocks/content-box.css | 162 ++++++++++++++++-----------
 1 file changed, 94 insertions(+), 68 deletions(-)

diff --git a/resources/css/blocks/content-box.css b/resources/css/blocks/content-box.css
index 65b0828..6a927ed 100644
--- a/resources/css/blocks/content-box.css
+++ b/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,75 +31,73 @@
       @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 {
-  @apply !max-w-screen-lg;
-}
-/* &.alignwide {
+  &.alignwide,
+  &.aligncontained {
+    @apply !mx-auto;
+  }
+  &.aligncontained {
+    @apply !max-w-screen-lg;
+  }
+  /* &.alignwide {
     @apply max-w-screen-lg;
   } */
 
-.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);
+  .wp-block-group {
   }
 
-  .wp-block-carhop-blocks-cta {
-    --cta-current-color: #fff;
-    color: blue;
+  &--bg-light {
+    --content-box-text-color: var(--wp--preset--color--carhop-green);
+    --advised-text-color: var(--wp--preset--color--carhop-green, inherit);
+  }
 
-    &:after {
-      /* background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg'); */
-      filter: brightness(41);
+  &--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');
+      }
     }
   }
 
-  a[target='_blank'] {
-    &:after {
-      background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg');
+  &__innerblocks {
+    @apply mx-auto px-4 md:px-8;
+    > :not(.alignwide):not(.alignfull) {
+      @apply max-w-screen-lg mx-auto;
     }
   }
-}
-
-&__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;
+    }
   }
-}
-&.alignwide .content-box__innerblocks {
-  > :not(.alignfull) {
-    @apply max-w-screen-xl mx-auto;
+  h3 {
+    /* @apply title-small font-bold; */
   }
-}
-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 {
-  @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;
@@ -124,14 +123,15 @@ h3 + p {
     @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 {
@@ -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;
+}