rebundling

css/app.css

@@ -991,6 +991,11 @@ h2{
   line-height: 1;
 }
 
+p{
+  font-weight: 300;
+  line-height: 1.6;
+}
+
 body.wp-admin h1:not(.editor-visual-editor h1),
 body.wp-admin h2:not(.editor-visual-editor h2),
 body.wp-admin h3:not(.editor-visual-editor h3),
@@ -1089,12 +1094,60 @@ body.wp-admin h6:not(.editor-visual-editor h6) {
 }
 
 .article-card{
+  position: relative;
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(19 111 99 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  padding: 1rem;
+  padding: 1.5rem;
+}
+
+.article-card:after{
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  --tw-border-opacity: 1;
+  border-color: rgb(19 111 99 / var(--tw-border-opacity));
+  --tw-content: '';
+  content: var(--tw-content);
+  border-width: 4px;
+  opacity: 0;
+}
+
+.article-card:hover:after {
+  opacity: 1;
+}
+
+.article-card:hover .article-card__link-button svg{
+  --tw-translate-x: 0.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.article-card__link-button{
+  margin-top: 2rem;
+  display: block;
+  width: 100px;
+  height: 100px;
+}
+
+.article-card__link-button svg {
+  transition: transform 0.3s ease-in-out;
+}
+
+.article-card__link-button svg path, 
+      .article-card__link-button svg circle{
+  stroke: #136F63;
+}
+
+.article-card .content-meta{
+  --tw-text-opacity: 1;
+  color: rgb(19 111 99 / var(--tw-text-opacity));
 }
 
 .article-card__title{
@@ -1163,25 +1216,16 @@ body.wp-admin h6:not(.editor-visual-editor h6) {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(19 111 99 / var(--tw-border-opacity));
   background-color: transparent;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-}
+  --tw-text-opacity: 1;
-
+  color: rgb(19 111 99 / var(--tw-text-opacity));
-.article-tag:after {
-  content: '';
-  position: absolute;
-  top: 0px;
-  left: 50%;
-  height: 100%;
-  width: 100%;
-  border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(19 111 99 / var(--tw-border-opacity));
-  translate: -50% 0;
-  transform: perspective(800px) rotateY(10deg);
 }
 
 .article-tag:hover{
@@ -1987,11 +2031,12 @@ article > *:not(.entry-content),
 
 .block-dernieres-dynamiques{
   --tw-bg-opacity: 1;
-  background-color: rgb(255 248 235 / var(--tw-bg-opacity));
+  background-color: rgb(19 111 99 / var(--tw-bg-opacity));
   padding-left: 3rem;
   padding-right: 3rem;
-  padding-top: 8rem;
+  padding-top: 5rem;
-  padding-bottom: 8rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 @media (min-width: 1280px){
@@ -2001,6 +2046,15 @@ article > *:not(.entry-content),
   }
 }
 
+.block-dernieres-dynamiques {
+  overflow: hidden;
+}
+
+.block-dernieres-dynamiques *:not(.article-card *){
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .block-dernieres-dynamiques__inner{
   margin-left: auto;
   margin-right: auto;
@@ -2040,7 +2094,7 @@ article > *:not(.entry-content),
   display: block;
   width: 100%;
   --tw-bg-opacity: 1;
-  background-color: rgb(19 111 99 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   height: 1px;
   content: ' ';
 }
@@ -2068,7 +2122,7 @@ article > *:not(.entry-content),
 
 .block-dernieres-dynamiques__header .header-link svg path, 
         .block-dernieres-dynamiques__header .header-link svg circle{
-  stroke: #136F63;
+  stroke: #fff;
   stroke-width: 2;
 }
 
@@ -2108,7 +2162,7 @@ article > *:not(.entry-content),
 
 .block-dernieres-dynamiques__issue-title{
   padding-bottom: 3rem;
-  font-size: 3.75rem;
+  font-size: 4.5rem;
   text-transform: uppercase;
   line-height: 1.1;
 }
@@ -2116,7 +2170,7 @@ article > *:not(.entry-content),
 .block-dernieres-dynamiques__issue-content-wrapper{
   display: grid;
   gap: 3rem;
-  padding-bottom: 3rem;
+  padding-bottom: 6rem;
 }
 
 @media (min-width: 1440px){
@@ -2129,20 +2183,13 @@ article > *:not(.entry-content),
   grid-template-columns: 61.8fr 38.2fr;
 }
 
-.block-dernieres-dynamiques__issue-content {
-}
-
 .block-dernieres-dynamiques__issue-thumbnail-wrapper{
   position: relative;
 }
 
 .block-dernieres-dynamiques__issue-thumbnail-wrapper .card-background{
   position: absolute;
-  top: 0px;
+  top: 5rem;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  top: 1.25rem;
   left: 2rem;
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -2167,10 +2214,10 @@ article > *:not(.entry-content),
   background-color: rgb(239 232 255 / var(--tw-bg-opacity));
   --tw-content: '';
   content: var(--tw-content);
-  width: calc(100% - 32px);
+  width: calc(100% - 42px);
-  height: calc(100% - 32px);
+  height: calc(100% - 42px);
-  left: 16px;
+  left: 21px;
-  top: 16px;
+  top: 21px;
   z-index: 0;
 }
 
@@ -2180,24 +2227,68 @@ article > *:not(.entry-content),
   border-color: rgb(19 111 99 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  transform: perspective(800px) rotateY(10deg) skewX(2deg);
+  /* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
-  height: 300px;
+  height: 330px;
   position: relative;
   z-index: 10;
 }
 
 .block-dernieres-dynamiques__issue-thumbnail img {
-  height: 100%;
+  width: calc(100% - 42px);
+  height: calc(100% - 42px);
+  left: 21px;
+  top: 21px;
   -o-object-fit: cover;
      object-fit: cover;
   position: relative;
   z-index: 2;
 }
 
+.block-dernieres-dynamiques__issue-description-title{
+  padding-bottom: 1rem;
+  font-size: 1.25rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-family: 'Nunito Sans', sans-serif;
+  letter-spacing: 4px;
+}
+
 .block-dernieres-dynamiques__issue-description{
   font-size: 1.25rem;
 }
 
+.block-dernieres-dynamiques .related-articles{
+  position: relative;
+  padding-bottom: 2rem;
+}
+
+.block-dernieres-dynamiques .related-articles > *{
+  position: relative;
+  z-index: 10;
+}
+
+.block-dernieres-dynamiques .related-articles:after{
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  left: 50%;
+  width: 100vw;
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 232 255 / var(--tw-bg-opacity));
+  --tw-content: '';
+  content: var(--tw-content);
+  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);
+}
+
 .block-dernieres-dynamiques .related-articles__title{
   padding-bottom: 2rem;
   font-size: 1rem;
@@ -2208,6 +2299,23 @@ article > *:not(.entry-content),
   font-family: 'Nunito Sans', sans-serif;
 }
 
+.block-dernieres-dynamiques .related-articles__show-all{
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 3rem;
+  display: block;
+  padding-bottom: 2rem;
+  text-align: center;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  --tw-text-opacity: 1;
+  color: rgb(19 111 99 / var(--tw-text-opacity));
+  font-family: 'Nunito Sans', sans-serif;
+}
+
 /* Home */
 
 @media (min-width: 600px){