From 0606c787b16db2faf5969706a0fdedd679c1710a Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Thu, 21 May 2026 15:14:23 +0200
Subject: [PATCH] REFACTOR: Add new CSS variables and enhance content box
 styles

---
 resources/css/app.css                   |  1 +
 resources/css/base/variables.css        |  3 +++
 resources/css/blocks/content-box.css    | 31 +++++++++++++++++++++--
 resources/css/blocks/wp-block-group.css | 10 ++++++++
 resources/css/layout/gutenberg.css      | 33 +++++++++++++++++++++++--
 tailwind.config.js                      |  5 +++-
 6 files changed, 78 insertions(+), 5 deletions(-)
 create mode 100644 resources/css/base/variables.css
 create mode 100644 resources/css/blocks/wp-block-group.css

diff --git a/resources/css/app.css b/resources/css/app.css
index b952003..b3654a5 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -130,6 +130,7 @@
 @import './blocks/variants.css';
 @import './blocks/statistiques-collections.css';
 @import './blocks/reportages-list.css';
+@import './blocks/wp-block-group.css';
 
 /* ########### COMPOSITIONS ############ */
 @import './compositions/nos-collections.css';
diff --git a/resources/css/base/variables.css b/resources/css/base/variables.css
new file mode 100644
index 0000000..874ea1e
--- /dev/null
+++ b/resources/css/base/variables.css
@@ -0,0 +1,3 @@
+:root {
+  --content-box-max-width: 1280px;
+}
diff --git a/resources/css/blocks/content-box.css b/resources/css/blocks/content-box.css
index ec2f2e2..db6ce4f 100644
--- a/resources/css/blocks/content-box.css
+++ b/resources/css/blocks/content-box.css
@@ -5,10 +5,16 @@
 .content-box {
   @apply relative px-2 md:px-8;
 
+  @apply px-container-x;
+
   &--variant-framed {
     @apply border border-carhop-green-600;
   }
 
+  &--variant-nude {
+    @apply px-0;
+  }
+
   &--variant-backgrounded {
     background-color: var(--content-box-background-color, transparent);
   }
@@ -114,10 +120,31 @@
   }
 
   &__innerblocks {
-    @apply mx-auto px-4 md:px-8;
+    @apply mx-auto;
+    /* @apply px-4 md:px-8 ; */
+
+    max-width: 1280px;
+
     > :not(.alignwide):not(.alignfull) {
-      @apply max-w-screen-lg mx-auto;
+      @apply max-w-screen-lg mx-auto ;
     }
+
+    .alignwide {
+    }
+    /* .alignfull {
+      max-width: 100vw;
+    } */
+  }
+
+  &.alignwide .content-box__innerblocks {
+    max-width: 1280px;
+  }
+  &.alignfull .content-box__innerblocks {
+    /* max-width: 1280px; */
+  }
+
+  &--variant-nude .content-box__innerblocks {
+    @apply px-0;
   }
   &.alignwide .content-box__innerblocks {
     > :not(.alignfull) {
diff --git a/resources/css/blocks/wp-block-group.css b/resources/css/blocks/wp-block-group.css
new file mode 100644
index 0000000..e0cc2e2
--- /dev/null
+++ b/resources/css/blocks/wp-block-group.css
@@ -0,0 +1,10 @@
+.wp-block-group {
+  .wp-block-columns {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .carhop-heading {
+    @apply pb-6;
+  }
+}
diff --git a/resources/css/layout/gutenberg.css b/resources/css/layout/gutenberg.css
index eb04995..fee3ab7 100644
--- a/resources/css/layout/gutenberg.css
+++ b/resources/css/layout/gutenberg.css
@@ -54,8 +54,16 @@ article > *:not(.entry-content),
     }
   }
 
+  > .wp-block-group,
   > .wp-block-columns {
-    @apply !my-24;
+    @apply !my-16;
+  }
+
+  > .wp-block-group + .wp-block-group,
+  > .wp-block-columns + .wp-block-columns,
+  > .wp-block-group + .wp-block-columns,
+  > .wp-block-columns + .wp-block-group {
+    @apply !mt-0;
   }
 }
 .wp-singular.page {
@@ -94,9 +102,30 @@ article > *:not(.entry-content),
 .content-box {
   &__innerblocks {
     .block-editor-inner-blocks {
-      max-width: 960px !important;
+      max-width: 1280px !important;
+
+      .block-editor-inner-blocks {
+        @apply mx-0;
+      }
+
+      .wp-block {
+        max-width: 960px !important;
+        @apply mx-auto;
+      }
+      .wp-block.alignwide {
+        max-width: 1280px !important;
+      }
     }
   }
+  &.alignwide .block-editor-inner-blocks {
+    max-width: 1280px !important;
+  }
+  .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
+    /* @apply mx-auto; */
+  }
+  .block-editor-inner-blocks .alignwide {
+    max-width: 1280px !important;
+  }
 }
 
 details {
diff --git a/tailwind.config.js b/tailwind.config.js
index 9ba4266..601b3a9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -92,8 +92,11 @@ module.exports = {
           950: '#4c0b21',
         },
       },
+      spacing: {
+        'container-x': '1.5rem',
+      },
       fontSize: tailpress.fontSizeMapper(
-        tailpress.theme('settings.typography.fontSizes', theme)
+        tailpress.theme('settings.typography.fontSizes', theme),
       ),
       letterSpacing: {
         bigbig: '3px',