Added animations, improved footer

V1/resources/css/components/compare.css

@@ -1,5 +1,6 @@
 .projet-compare-container {
   display: grid;
+  background-color: #222;
 
   > * {
     grid-area: 1 / 1;
@@ -94,7 +95,7 @@ input[type="range"]::-moz-range-track {
   width: 100%;
   height: 12.8px;
   cursor: pointer;
-  animate: 0.2s;
+  transition: all 0.2s;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
   background: none;
   border-radius: 25px;

V1/resources/css/components/contact-form.css

@@ -1,5 +1,5 @@
 .contact-form-container {
-    color: #fff;
+    color: #F8FAFC;
     background-color: #222;
 }
 

V1/resources/css/components/contact.css

@@ -1,4 +1,5 @@
 .contact-container {
+    background-color: #F8FAFC;
     display: flex;
     flex-direction: column;
     justify-content: center;

V1/resources/css/components/follow.css

@@ -1,4 +1,5 @@
 .follow-container {
+    background-color: #F8FAFC;
     height: calc(100vh - 200px);
     display: flex;
     flex-direction: column;

V1/resources/css/components/footer.css

@@ -1,9 +1,24 @@
+body {
+    padding-bottom: 850px;
+    background-color: #222;
+    z-index: -20;
+    position: relative;
+}
+
+.footer-border-top .footer-menu {
+    border-top: 1px solid;
+}
+
 .footer-container {
     font-family: 'Mona-Sans';
     font-weight: 500;
     background-color: #222;
     color: #F8FAFC;
     padding: 10vmin;
+    z-index: -5;
+    position: fixed;
+    bottom: 0;
+    width: calc(100% - 20vmin);
 }
 
 .footer-menu {

V1/resources/css/components/hero.css

@@ -1,5 +1,5 @@
 .hero-title {
-  color: white;
+  color: #F8FAFC;
   font-size: 10vmin;
   font-family: 'Mona-Sans';
   font-weight: bold;
@@ -10,13 +10,15 @@
   position: relative;
   top: 25px;
   left: 15px;
-  color: white;
+  color: #F8FAFC;
   font-family: "Moonstone History";
   font-size: 10vmin;
   line-height: 10vh;
 }
 
 .hero-container {
+  z-index: -2;
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -28,6 +30,8 @@
 }
 
 .hero-sub-container {
+  position: fixed;
+  z-index: -1;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -37,7 +41,7 @@
 .hero-sub-container-separator {
   height: 400px;
   width: 2px;
-  background-color: #ffffff;
+  background-color: #F8FAFC;
   transform: rotate(15deg);
   margin: 100px;
 }
@@ -56,7 +60,7 @@
   font-optical-sizing: auto;
   font-weight: 500;
   font-style: normal;
-  color: #ffffff;
+  color: #F8FAFC;
   text-decoration: none;
   transition: 0.5s;
   border-radius: 50px;
@@ -76,11 +80,11 @@
   font-optical-sizing: auto;
   font-weight: 500;
   font-style: normal;
-  color: #ffffff;
+  color: #F8FAFC;
   text-decoration: none;
   transition: 0.5s;
   border-radius: 50px;
-  border: 3px solid white;
+  border: 3px solid #F8FAFC;
 }
 
 .hero-sub-container-menu-item2:hover {
@@ -101,7 +105,7 @@
 }
 
 .hero-decoration-text span {
-  color: #ffffff;
+  color: #F8FAFC;
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 600;
@@ -151,12 +155,12 @@
   position: absolute;
   height: 50px;
   width: 50px;
-  color: #ffffff;
+  color: #F8FAFC;
 }
 
 .hero-decoration-arrow {
   position: absolute;
-  color: #ffffff;
+  color: #F8FAFC;
   width: 10vmin;
   bottom: 150px;
   right: 180px;

V1/resources/css/components/legal.css

@@ -1,5 +1,5 @@
 .legal-container {
-    color: #fff;
+    color: #F8FAFC;
     background-color: #222;
     padding: 10vmin;
 }

V1/resources/css/components/menu.css

@@ -1,20 +1,23 @@
 .menu-container {
     font-family: 'Mona-Sans';
     padding: 25px 10vmin;
+    width: calc(100% - 20vmin);
     display: flex;
     align-items: center;
     justify-content: space-between;
-    position: sticky;
+    position: fixed;
     z-index: 8;
+    top: -140px;
+    transition: top 0.3s;
 }
 
 .menu-container-white {
     color:#222;
-    background-color: #ffffff;
+    background-color: #F8FAFC;
 }
 
 .menu-container-black {
-    color: #ffffff;
+    color: #F8FAFC;
     background-color: #222;
 }
 
@@ -23,7 +26,7 @@
 }
 
 .menu-items >a, .menu-items >div>button {
-    color: #ffffff;
+    color: #F8FAFC;
     padding-left: 50px;
     font-weight: 700;
     font-size: 15px;
@@ -54,7 +57,7 @@
     margin: 5px 10vmin;
     z-index: 15;
     border-radius: 15px;
-    background-color: #ffffff;
+    background-color: #F8FAFC;
     padding: 30px 60px;
 }
 

V1/resources/css/components/mobilier.css

@@ -9,7 +9,7 @@
 }
 
 .mobilier-description {
-  height: 100vh;
+  height: calc(100vh - 20vmin);
   top: 0;
   padding: 10vmin;
   position: sticky;

V1/resources/css/components/projet.css

@@ -9,7 +9,7 @@
 }
 
 .projet-description {
-  height: 100vh;
+  height: calc(100vh - 20vmin);
   top: 0;
   padding: 10vmin;
   position: sticky;

V1/resources/css/components/projets.css

@@ -2,7 +2,7 @@
     height: calc(100vh - 200px);
     display: flex;
     flex-direction: column;
-    background-color: white;
+    background-color: #F8FAFC;
     padding: 10vmin;
 }
 
@@ -29,6 +29,8 @@
     display: flex;
     flex-direction: column;
     justify-content: end;
+    text-decoration: none;
+    transition: all 0.3s;
 }
 
 .projets-carrousel-item h1 {

V1/resources/css/components/punch.css

@@ -1,5 +1,14 @@
+.punch-dark {
+    color: #F8FAFC;
+    background-color: #222;
+}
+
+.punch-clear {
+    color: #222;
+    background-color: #F8FAFC;
+}
+
 .punch-container {
-    background-color: #222222;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -7,6 +16,7 @@
     background-image: url('/resources/img/logo_notext.png');
     background-repeat: no-repeat;
     background-position: calc(50% - 250px);
+    transition: background-color 0.3s;
 }
 
 .punch-sub {
@@ -16,7 +26,6 @@
 }
 
 .punch {
-    color: #F8FAFC;
     font-family: 'Mona-Sans';
     font-weight: 300;
     font-size: 3vmin;

V1/resources/js/index.js

@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const carrousel = document.getElementById('carrousel');
+    if (carrousel) {
+        new Flickity(carrousel, {
+            autoPlay: true,
+            groupCells: '75%',
+        });
+    }
+
+    const punch = document.getElementById('punch');
+    const navbar = document.getElementById('navbar');
+    const homeTitle = document.getElementById('home-title');
+
+    if (navbar || punch || homeTitle) {
+        let lastScrollY = window.scrollY;
+        
+        window.addEventListener('scroll', () => {
+            let currentScrollY = window.scrollY;
+
+            if (navbar) {
+                if (lastScrollY > currentScrollY) {
+                    navbar.style.top = '0';
+                } else {
+                    navbar.style.top = '-140px';
+                }
+    
+                lastScrollY = currentScrollY;
+            }
+
+            if (punch) {
+                const punchPosition = punch.getBoundingClientRect();
+                if (currentScrollY > punchPosition.bottom + (window.innerHeight / 2)) {
+                    punch.style.color = '#F8FAFC';
+                    punch.style.backgroundColor = '#222';
+                } else {
+                    punch.style.color = '#222';
+                    punch.style.backgroundColor = '#F8FAFC';
+                }
+            }
+
+            if (homeTitle) {
+                if (currentScrollY > 1000) {
+                    homeTitle.style.display = 'none';
+                } else {
+                    homeTitle.style.display = 'flex';
+                }
+            }
+        });
+    }
+});

V1/resources/script/index.js

@@ -1,6 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    new Flickity(document.getElementById('carrousel'), {
-        autoPlay: true,
-        groupCells: '75%',
-    });
-});