From 89b5d9d0139dc17d96740d2ff18efe326e20076d Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Thu, 15 May 2025 14:15:58 +0200
Subject: [PATCH] STYLE refining block aspect

---
 resources/css/blocks/dernieres-dynamiques.css | 62 ++++++++++++++-----
 1 file changed, 46 insertions(+), 16 deletions(-)

diff --git a/resources/css/blocks/dernieres-dynamiques.css b/resources/css/blocks/dernieres-dynamiques.css
index 5329509..14ad3d6 100644
--- a/resources/css/blocks/dernieres-dynamiques.css
+++ b/resources/css/blocks/dernieres-dynamiques.css
@@ -1,5 +1,11 @@
 .block-dernieres-dynamiques {
-  @apply bg-carhop-orange-50 px-12 xl:px-24 py-32;
+  @apply bg-primary text-white px-12 xl:px-24 pt-20;
+  overflow: hidden;
+
+  *:not(.article-card *) {
+    @apply text-white;
+  }
+
   &__inner {
     @apply max-w-screen-2xl mx-auto;
   }
@@ -13,7 +19,7 @@
         @apply block shrink-0;
       }
       &:after {
-        @apply w-full z-50 bg-primary block mb-2;
+        @apply w-full z-50 bg-white block mb-2;
         height: 1px;
         content: ' ';
       }
@@ -30,7 +36,7 @@
         transition: transform 0.3s ease-in-out;
         path,
         circle {
-          @apply stroke-primary stroke-2;
+          @apply stroke-white stroke-2;
         }
       }
       &:hover {
@@ -56,20 +62,19 @@
   }
 
   &__issue-title {
-    @apply text-6xl uppercase pb-12;
+    @apply text-7xl uppercase pb-12;
     line-height: 1.1;
   }
   &__issue-content-wrapper {
-    @apply grid  gap-12 2xl:gap-24 pb-12;
+    @apply grid  gap-12 2xl:gap-24 pb-24;
 
     grid-template-columns: 61.8fr 38.2fr;
   }
-  &__issue-content {
-  }
+
   &__issue-thumbnail-wrapper {
     @apply relative;
     .card-background {
-      @apply absolute inset-0 border-primary border bg-white top-5 left-8;
+      @apply absolute  border-primary border bg-white top-20 left-8;
       height: 94%;
       width: 104%;
       transform: perspective(800px) rotateY(10deg)
@@ -79,10 +84,10 @@
 
       &::before {
         @apply content-[''] absolute inset-0 bg-carhop-purple-100 w-full h-full;
-        width: calc(100% - 32px);
-        height: calc(100% - 32px);
-        left: 16px;
-        top: 16px;
+        width: calc(100% - 42px);
+        height: calc(100% - 42px);
+        left: 21px;
+        top: 21px;
 
         z-index: 0;
       }
@@ -90,26 +95,51 @@
   }
   &__issue-thumbnail {
     @apply bg-white border-primary border relative;
-    transform: perspective(800px) rotateY(10deg) skewX(2deg);
-    height: 300px;
+    /* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
+    height: 330px;
     position: relative;
     z-index: 10;
 
     img {
-      height: 100%;
+      width: calc(100% - 42px);
+      height: calc(100% - 42px);
+      left: 21px;
+      top: 21px;
       object-fit: cover;
       position: relative;
       z-index: 2;
     }
   }
-
+  &__issue-description-title {
+    @apply uppercase nunito text-xl pb-4 font-bold;
+    letter-spacing: 4px;
+  }
   &__issue-description {
     @apply text-xl;
   }
 
   .related-articles {
+    @apply relative  pb-8;
+
+    & > * {
+      @apply relative z-10;
+    }
+
+    &:after {
+      @apply content-[''] absolute inset-0 bg-carhop-purple-100 w-screen  left-1/2 -translate-x-1/2;
+      z-index: 0;
+      /* opacity: 0.5; */
+      top: 100px;
+      height: calc(100% - 150px);
+      transform: translateY(100px) translateX(-50%)
+        perspective(800px) skewX(1deg) rotateZ(-2deg)
+        rotateY(-4deg) scaleX(1.98);
+    }
     &__title {
       @apply text-base font-extrabold uppercase pb-8 tracking-widest nunito;
     }
+    &__show-all {
+      @apply text-base font-extrabold uppercase pb-8 tracking-widest nunito text-primary text-center mx-auto block mt-12;
+    }
   }
 }