From 1ea21a5ef2c12e6808159c67c396f81a74dd429f Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Thu, 3 Oct 2024 17:30:54 +0200
Subject: [PATCH] wait #7104 @2:00

---
 wp-content/themes/CCV/dist/styles/app.css     | 88 ++++++++-----------
 .../assets/styles/common/mixins.styl          |  8 +-
 .../resources/assets/styles/common/setup.styl |  2 +-
 .../assets/styles/components/header.styl      | 12 +--
 .../assets/styles/components/navigation.styl  | 16 ++--
 .../resources/views/partials/header.blade.php |  4 +-
 6 files changed, 56 insertions(+), 74 deletions(-)

diff --git a/wp-content/themes/CCV/dist/styles/app.css b/wp-content/themes/CCV/dist/styles/app.css
index 8a7dfd75..63d2f531 100644
--- a/wp-content/themes/CCV/dist/styles/app.css
+++ b/wp-content/themes/CCV/dist/styles/app.css
@@ -1807,6 +1807,7 @@ input[type="submit"]:hover {
   padding: 0;
   margin-left: 0 !important;
   font-size: 0.7em;
+  font-size: 0.7em;
   white-space: nowrap;
 }
 
@@ -1840,7 +1841,7 @@ header.site {
 }
 
 .header-cta {
-  padding: 1em 1.8em;
+  padding: 1.2vw 2vw;
   line-height: 1.1;
   border-radius: 36px;
 }
@@ -1849,6 +1850,12 @@ header.site {
   margin-right: 24.8px;
 }
 
+@media only screen and (min-width: 1920px) {
+  .header-cta {
+    padding: 1.01em 1.6em;
+  }
+}
+
 @media only screen and (max-width: 1099px) {
   .header-cta {
     padding: 0.75em 1.6em;
@@ -1856,18 +1863,11 @@ header.site {
 }
 
 .header-logo {
-  width: 100%;
+  width: 255px;
 }
 
 .header-logo-container {
-  max-width: 255px;
-  flex-shrink: 0;
-}
-
-@media only screen and (max-width: 1599px) {
-  .header-logo-container {
-    max-width: 200px;
-  }
+  max-width: 60vw;
 }
 
 h1,
@@ -2417,8 +2417,6 @@ h4,
 
 .nav-primary .menu-item {
   display: block;
-  margin-left: 1.25rem;
-  margin-right: 1.25rem;
   position: relative;
   cursor: pointer;
   border-bottom-width: 2px;
@@ -2426,20 +2424,8 @@ h4,
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   line-height: 1.25;
-}
-
-@media only screen and (max-width: 1799px) {
-  .nav-primary .menu-item {
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-}
-
-@media only screen and (max-width: 1399px) {
-  .nav-primary .menu-item {
-    margin-left: 0.75rem;
-    margin-right: 0.75rem;
-  }
+  margin-left: 1.25vw;
+  margin-right: 1.25vw;
 }
 
 .nav-primary .menu-item.current-menu-item,
@@ -2461,19 +2447,8 @@ h4,
 .nav-primary .menu-item a {
   white-space: nowrap;
   transition: color 0.3s;
-  font-size: 1em;
-}
-
-@media only screen and (max-width: 1599px) {
-  .nav-primary .menu-item a {
-    font-size: 0.8em;
-  }
-}
-
-@media only screen and (max-width: 1299px) {
-  .nav-primary .menu-item a {
-    font-size: 0.75em;
-  }
+  font-size: clamp(10px, 1.197vw, 20px);
+  font-size: clamp(10px, 1.197vw, 20px);
 }
 
 .nav-primary .menu-item a:hover {
@@ -2532,7 +2507,7 @@ h4,
 .nav-secondary {
   transform: scale(0.9);
   transform-origin: right;
-  padding-right: 2.5vw;
+  padding-right: 48px;
 }
 
 @media only screen and (max-width: 1199px) {
@@ -2617,7 +2592,7 @@ h4,
   color: rgba(255, 255, 255, var(--text-opacity));
   border-radius: 50%;
   font-size: 40px;
-  font-size: 1.818181818181818rem;
+  font-size: 40px;
   width: 1.25em;
   height: 1.25em;
   align-items: center;
@@ -2658,7 +2633,7 @@ h4,
 
   .elementor-arrows-position-outside .swiper-container .elementor-swiper-button {
     font-size: 45px;
-    font-size: 2.045454545454545rem;
+    font-size: 45px;
   }
 
   .elementor-arrows-position-outside .swiper-container .elementor-swiper-button-prev {
@@ -2677,7 +2652,7 @@ h4,
 
   .elementor-arrows-position-outside .swiper-container .elementor-swiper-button {
     font-size: 35px;
-    font-size: 1.590909090909091rem;
+    font-size: 35px;
   }
 }
 
@@ -2933,6 +2908,7 @@ h4,
   width: 50%;
   height: 100%;
   font-size: 2.1875vw;
+  font-size: 2.1875vw;
   z-index: 1;
   opacity: 0;
 }
@@ -2961,7 +2937,7 @@ h4,
 @media only screen and (min-width: 1920px) {
   .header-slideshow .header-slideshow-content {
     font-size: 42px;
-    font-size: 1.909090909090909rem;
+    font-size: 42px;
   }
 }
 
@@ -2977,6 +2953,7 @@ h4,
 
 @media only screen and (max-width: 599px) {
   .header-slideshow .header-slideshow-content {
+    font-size: 3.75vw;
     font-size: 3.75vw;
     padding-right: 1em;
   }
@@ -2994,6 +2971,7 @@ h4,
 .header-slideshow-title {
   display: block;
   font-size: 1.333em;
+  font-size: 1.333em;
   margin-bottom: 1em;
   position: relative;
 }
@@ -3030,6 +3008,7 @@ h4,
 }
 
 .header-slideshow-body {
+  font-size: 0.63em;
   font-size: 0.63em;
   white-space: pre-line;
   font-family: Roboto Condensed, sans-serif;
@@ -3087,6 +3066,7 @@ h4,
   -buttons a,
   -buttons .btn {
     font-size: 0.9rem;
+    font-size: 0.9rem;
   }
 }
 
@@ -3333,7 +3313,7 @@ h4,
   text-align: center;
   padding: 2em 0 0;
   font-size: 26px;
-  font-size: 1.181818181818182rem;
+  font-size: 26px;
   line-height: 40px;
   transition: background-color 0.2s ease-out;
   font-weight: 100;
@@ -3401,6 +3381,7 @@ h4,
   margin-bottom: 1.5rem;
   margin-left: 10vw;
   font-size: 1.25rem;
+  font-size: 1.25rem;
 }
 
 @media only screen and (max-width: 1199px) {
@@ -3530,6 +3511,7 @@ h4,
 @media only screen and (max-width: 499px) {
   .patient-tour-item-content .text-lg {
     font-size: 1.125rem;
+    font-size: 1.125rem;
   }
 }
 
@@ -3583,7 +3565,7 @@ h4,
   font-family: Dosis, sans-serif;
   font-weight: 400;
   font-size: 24px;
-  font-size: 1.090909090909091rem;
+  font-size: 24px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -3631,7 +3613,7 @@ h4,
   width: 3.090909090909091rem;
   line-height: 3.090909090909091rem;
   font-size: 52px;
-  font-size: 2.363636363636364rem;
+  font-size: 52px;
   display: inline-block;
   border-radius: 50%;
   margin-right: 0.5em;
@@ -3715,7 +3697,7 @@ h4,
   width: 2.909090909090909rem;
   line-height: 2.909090909090909rem;
   font-size: 40px;
-  font-size: 1.818181818181818rem;
+  font-size: 40px;
   display: inline-block;
   border-radius: 50%;
   position: relative;
@@ -3998,7 +3980,7 @@ h4,
   flex: 0 0 auto;
   color: #fff;
   font-size: 24px;
-  font-size: 1.090909090909091rem;
+  font-size: 24px;
   text-align: center;
 }
 
@@ -4214,6 +4196,7 @@ h4,
   .text-block-title {
     white-space: normal;
     font-size: 4.25vw;
+    font-size: 4.25vw;
   }
 }
 
@@ -4399,6 +4382,7 @@ h4,
 @media only screen and (max-width: 499px) {
   .timeline-horizontal-item-content .text-lg {
     font-size: 1.125rem;
+    font-size: 1.125rem;
   }
 }
 
@@ -4442,7 +4426,7 @@ h4,
   font-family: Dosis, sans-serif;
   font-weight: 400;
   font-size: 24px;
-  font-size: 1.090909090909091rem;
+  font-size: 24px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -4485,7 +4469,7 @@ h4,
   width: 3.090909090909091rem;
   line-height: 3.090909090909091rem;
   font-size: 52px;
-  font-size: 2.363636363636364rem;
+  font-size: 52px;
   display: inline-block;
   border-radius: 50%;
   margin-right: 0.5em;
@@ -4575,7 +4559,7 @@ h4,
   width: 3.090909090909091rem;
   line-height: 3.090909090909091rem;
   font-size: 52px;
-  font-size: 2.363636363636364rem;
+  font-size: 52px;
   display: inline-block;
   border-radius: 50%;
 }
diff --git a/wp-content/themes/CCV/resources/assets/styles/common/mixins.styl b/wp-content/themes/CCV/resources/assets/styles/common/mixins.styl
index bae3a8c3..883b6292 100644
--- a/wp-content/themes/CCV/resources/assets/styles/common/mixins.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/common/mixins.styl
@@ -64,8 +64,12 @@ font-size(value, arguments...)
     // Other values like 'inherit' or rems/ems are displayed as normal...
     font-size: value arguments
 
-    if (unit(value) is 'px') {
-      font-size: r(value) arguments // rem value
+    if (value not a 'unit') {
+      font-size: value
+    } else {
+      if (unit(value) is 'px') {
+        font-size: r(value) arguments // rem value
+      }
     }
   }
 
diff --git a/wp-content/themes/CCV/resources/assets/styles/common/setup.styl b/wp-content/themes/CCV/resources/assets/styles/common/setup.styl
index 741acd75..d3ab3286 100644
--- a/wp-content/themes/CCV/resources/assets/styles/common/setup.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/common/setup.styl
@@ -14,7 +14,7 @@ $vertical-gutter   = 7.5vw
 
 // Breakpoints in Rupture (https://github.com/jescalan/rupture)
 $breakpoint-columns  = 768px // NOTE: this should align with the 'sm' screen value in tailwind.config.js
-$breakpoint-menu     = 1024px // This needs to match the MMenu activation setting in menu.js
+$breakpoint-menu     = 1200px // This needs to match the MMenu activation setting in menu.js
 rupture.scale        = 0 400px  768px   1024px
 rupture.scale-names  = 'small' 'medium' 'large'
 rupture.anti-overlap = -1px // Results in +below(1000px) being max-width: 999px and +above(1000px) being min-width: 1000px
diff --git a/wp-content/themes/CCV/resources/assets/styles/components/header.styl b/wp-content/themes/CCV/resources/assets/styles/components/header.styl
index 55da7c78..ae8d7cfd 100644
--- a/wp-content/themes/CCV/resources/assets/styles/components/header.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/header.styl
@@ -19,20 +19,20 @@ header.site
 //      z-index: 20
 
 .header-cta
-  padding: 1em 1.8em
+  padding: 1.2vw 2vw
   line-height: 1.1
   border-radius: 36px
 
   &:not(:last-child)
     margin-right: 24.8px
 
+  +above(1920px)
+    padding: 1.01em 1.6em
+
   +below(1100px)
     padding: 0.75em 1.6em
 
 .header-logo
-  width: 100%
+  width: 255px
   &-container
-    max-width: 255px
-    flex-shrink: 0
-    +below(1600px)
-      max-width: 200px
\ No newline at end of file
+    max-width: 60vw
\ No newline at end of file
diff --git a/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl b/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl
index 2d61273c..1a0d143b 100644
--- a/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl
@@ -11,14 +11,12 @@
     @apply flex
 
   .menu-item
-    @apply block mx-5 relative cursor-pointer
+    @apply block relative cursor-pointer
     @apply border-b-2 border-transparent // Reserve space for active border
     @apply py-1 leading-tight // Adjust active border spacing
 
-    +below(1800px)
-      @apply mx-4
-    +below(1400px)
-      @apply mx-3
+    margin-left: 1.25vw
+    margin-right: 1.25vw
 
     &.current-menu-item, &.current-menu-parent
       @apply border-yellow
@@ -35,11 +33,7 @@
     a
       @apply whitespace-no-wrap
       transition: color 0.3s
-      font-size: 1em
-      +below(1600px)
-        font-size: .8em
-      +below(1300px)
-        font-size: .75em
+      font-size: clamp(10px, 1.197vw, 20px)
 
       &:hover
         @apply text-blue
@@ -79,6 +73,6 @@
 .nav-secondary
   transform: scale(.9)
   transform-origin: right
-  padding-right: 2.5vw
+  padding-right: 48px
   +below($breakpoint-menu)
     display: none !important
diff --git a/wp-content/themes/CCV/resources/views/partials/header.blade.php b/wp-content/themes/CCV/resources/views/partials/header.blade.php
index b9b3eefd..6de040c2 100644
--- a/wp-content/themes/CCV/resources/views/partials/header.blade.php
+++ b/wp-content/themes/CCV/resources/views/partials/header.blade.php
@@ -1,5 +1,5 @@
 <header class="site test sticky top-0 z-20 bg-white font-display font-medium uppercase text-sm">
-    <div class="nav-secondary flex items-center justify-end pt-1v">
+    <div class="nav-secondary flex items-center justify-end pt-6 container">
 
         @if ($button_1)
             <a href="{{ $button_1->url }}"
@@ -19,7 +19,7 @@
             </a>
         @endif
     </div>
-    <div class="nav-primary-container container relative px-1v md_special:py-1v md:pl-1v pl-16 pb-1v flex items-center justify-between">
+    <div class="nav-primary-container container relative px-1v md_special:py-1v md_special:pl-1v pl-16 pb-1v flex items-center justify-between">
         <a class="mr-10 header-logo-container"
            href="{{ home_url('/') }}"
            aria-label="<?= __("Aller à la page d'accueil", 'ccv') ?>">
-- 
2.39.5