handling project color

css/app.css

@@ -133,7 +133,8 @@
 	.portfolio-single h3,
 	.portfolio-single h4,
 	.portfolio-single h5,
-	.portfolio-single h6 {
+	.portfolio-single h6{
+  letter-spacing: 0em;
   font-family: "big-caslon-fb", serif;
 }
 
@@ -341,12 +342,14 @@
   filter: invert(1);
 }
 
-.portfolio-project-card .cta--read-project:hover{
+.portfolio-project-card .cta--read-project:hover {
-  /* background-color: #0033DA; */
+  background-color: var(--hover-color);
-  --tw-bg-opacity: 1;
-  background-color: rgb(233 25 105 / var(--tw-bg-opacity, 1));
 }
 
+/* background-color: #0033DA; */
+
+/* @apply bg-deli-pink; */
+
 .portfolio-project-card .cta--read-project:hover span{
   margin-right: 2rem;
 }
@@ -355,7 +358,7 @@
   --tw-translate-x: 0px;
   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));
   opacity: 1;
-  transition: opacity .6s ease-in-out, translate 0.4s ease-in-out;
+  transition: opacity 0.6s ease-in-out, translate 0.4s ease-in-out;
 }
 
 /* $couleur = array(

resources/css/pages/archive-portfolio.css

@@ -70,18 +70,16 @@
 		}
 	}
 	.cta--read-project {
-		@apply text-sm block text-white mt-6 mb-0 w-fit ;
+		@apply text-sm block text-white mt-6 mb-0 w-fit;
 		@apply py-3 px-5 hover:px-6 relative rounded-full bg-neutral-900 flex items-center justify-center;
 		box-sizing: content-box;
 		transition: all 0.3s ease-in-out;
 		text-decoration: none;
-		
 
 		/* background-color: #34113F; */
 		/* background-color: #0033DA; */
 
-
+		span {
-		span{
 			@apply text-xs font-medium;
 			text-decoration: none;
 			transition: all 0.4s ease-in-out;
@@ -92,29 +90,22 @@
 			@apply w-6 h-6 opacity-0  absolute right-6 -translate-x-8;
 			filter: invert(1);
 		}
-		&:hover{
+		&:hover {
+			background-color: var(--hover-color);
 			/* background-color: #0033DA; */
-		@apply bg-deli-pink;
+			/* @apply bg-deli-pink; */
 
-		span{
+			span {
-			@apply mr-8;
+				@apply mr-8;
+			}
+			img {
+				@apply opacity-100 translate-x-0;
+				transition: opacity 0.6s ease-in-out, translate 0.4s ease-in-out;
+			}
 		}
-		img{
-			@apply opacity-100 translate-x-0;
-			transition: opacity .6s ease-in-out, translate 0.4s ease-in-out;
-		}
-		}
-		
-
-
-
-	
-
 	}
 }
 
-
-
 /* $couleur = array(
 	'web' => '#1CC7C7',
 	'print' => '#C14FE3',

resources/css/pages/single-portfolio.css

@@ -8,7 +8,8 @@
 	h4,
 	h5,
 	h6 {
-		@apply bigCaslon;
+		@apply bigCaslon  tracking-normal;
+
 		&:before {
 			@apply content-none;
 		}

templates/template-portfolio.php

@@ -23,6 +23,8 @@ $currentPageId = get_the_ID();
             $excerpt = get_the_excerpt();
             $clientName = get_field('client_name', $portfolio_post->ID);
             $terms = get_the_terms($portfolio_post->ID, 'project_type');
+            $projectColor = get_field('project_color', $portfolio_post->ID);
+
 
             ?>
             <div class="portfolio-project-card portfolio-project-card--active">
@@ -43,9 +45,10 @@ $currentPageId = get_the_ID();
                     <div class='excerpt'>
                         <h3><?php the_title(); ?></h3>
                         <p><?php echo $excerpt ?></p>
-                        <a class="cta--read-project" href="<?php the_permalink(); ?>">
+
+                        <a class="cta--read-project" style="--hover-color: <?php echo esc_attr($projectColor); ?>;" href="<?php the_permalink(); ?>">
                             <span>Voir le projet</span>
-                        <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/graphic-assets/arrow-see-project.svg" alt="Voir le projet">
+                            <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/graphic-assets/arrow-see-project.svg" alt="Voir le projet">
                         </a>
                     </div>
                 </div>