From a15d95fd3ead07256b2e6ec832fa33ff5370919d Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Tue, 9 Jan 2024 09:28:13 +0100
Subject: [PATCH] updating card hover and focus

---
 .../cards/card-frequent-question.php          |  6 ---
 .../cards/card-frequent_question.css          | 37 +++++++++++++++++--
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/template-components/cards/card-frequent-question.php b/template-components/cards/card-frequent-question.php
index 0015208..fe0c34f 100644
--- a/template-components/cards/card-frequent-question.php
+++ b/template-components/cards/card-frequent-question.php
@@ -2,12 +2,6 @@
 
 $mots_cles = get_the_terms($args['post_ID'], 'mots-cles');
 $thematique_icon = get_field('taxonomy_pictures', $args['thematique'])['icon'];
-// echo '<pre>';
-// print_r($thematique_icon);
-// print_r($mots_cles);
-// print_r($args);
-// echo '</pre>';
-
 ?>
 
 <div class="card-frequent-question card-<?php echo $args['thematique']->slug ?>">
diff --git a/template-components/cards/card-frequent_question.css b/template-components/cards/card-frequent_question.css
index fb85072..b9c6c51 100644
--- a/template-components/cards/card-frequent_question.css
+++ b/template-components/cards/card-frequent_question.css
@@ -1,5 +1,6 @@
 .card-frequent-question {
   @apply shadowed p-8 rounded-3xl relative;
+  transition: all 0.3s ease-in-out;
 
   &__icon {
     max-width: 80px;
@@ -18,33 +19,61 @@
       @apply py-1 px-4 rounded-lg;
     }
   }
+  &:hover {
+    transform: scale(1.015) translateY(-8px);
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
+  }
 
   &.card-acoustique:hover,
-  &.card-petites-coproprietes:hover {
+  &.card-petites-coproprietes:hover,
+  &.card-acoustique .cta--with-arrow-button:focus-visible,
+  &.card-petites-coproprietes .cta--with-arrow-button:focus-visible {
+    @apply !outline-acoustique-coproprietes;
     .cta_arrow_button {
       @apply filter-acoustique-coproprietes;
     }
   }
+
   &.card-au-quotidien:hover,
-  &.card-isolation:hover {
+  &.card-isolation:hover,
+  &.card-au-quotidien .cta--with-arrow-button:focus-visible,
+  &.card-isolation .cta--with-arrow-button:focus-visible {
+    @apply !outline-isolation-quotidien;
     .cta_arrow_button {
       @apply filter-isolation-quotidien;
     }
   }
+
   &.card-energies:hover,
-  &.card-urbanisme:hover {
+  &.card-urbanisme:hover,
+  &.card-energies .cta--with-arrow-button:focus-visible,
+  &.card-urbanisme .cta--with-arrow-button:focus-visible {
+    @apply !outline-energies-urbanisme;
     .cta_arrow_button {
       @apply filter-energies-urbanisme;
     }
   }
-  &.card-location:hover {
+
+  &.card-location:hover,
+  &.card-location .cta--with-arrow-button:focus-visible {
+    @apply !outline-location-renovation-circulaire;
+
     .cta_arrow_button {
       @apply filter-location-renovation-circulaire;
     }
   }
+  &.card-patrimoine .cta--with-arrow-button:focus-visible,
   &.card-patrimoine:hover {
+    @apply !outline-patrimoine-renovation;
+
     .cta_arrow_button {
       @apply filter-patrimoine-renovation;
     }
   }
+  .cta--with-arrow-button:focus-visible {
+    @apply rounded-full;
+    outline-style: solid;
+    outline-width: 1px;
+    outline-offset: 6px;
+  }
 }