From 3657f84f419046511e473019e83f71e499143ed5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Wed, 9 Apr 2025 20:41:48 +0400
Subject: [PATCH] improve footer

---
 css/styles.css | 131 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 104 insertions(+), 27 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 027b4a9..9f99b27 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -644,11 +644,12 @@ img {
     margin-top: 40px;
     margin-left: 250px;
     width: calc(100% - 250px);
-    padding: 30px 20px;
-    background-color: var(--footer-bg);
-    text-align: center;
+    padding: 50px 30px 30px;
+    background-color: #f8f8f8;
+    border-top: 1px solid #e0e0e0;
     box-sizing: border-box;
     align-self: stretch;
+    color: #444;
 }
 
 .footer-columns {
@@ -656,14 +657,17 @@ img {
     flex-wrap: wrap;
     justify-content: space-between;
     text-align: left;
-    margin-bottom: 30px;
+    margin-bottom: 40px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .footer-column {
     flex: 1;
     min-width: 200px;
-    padding: 0 15px;
-    margin-bottom: 20px;
+    padding: 0 20px;
+    margin-bottom: 30px;
 }
 
 .footer-column:first-child {
@@ -674,9 +678,21 @@ img {
 
 .footer-title {
     font-size: 18px;
-    font-weight: 600;
-    margin-bottom: 15px;
+    font-weight: 700;
+    margin-bottom: 20px;
     color: #333;
+    position: relative;
+    padding-bottom: 10px;
+}
+
+.footer-title::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 40px;
+    height: 3px;
+    background-color: var(--primary-red);
 }
 
 .footer-links {
@@ -686,25 +702,35 @@ img {
 }
 
 .footer-links li {
-    margin-bottom: 8px;
+    margin-bottom: 12px;
 }
 
 .footer-links a {
     color: #555;
     text-decoration: none;
-    font-size: 14px;
-    transition: color 0.2s;
+    font-size: 15px;
+    transition: all 0.2s;
+    display: inline-block;
+    position: relative;
 }
 
 .footer-links a:hover {
     color: var(--primary-red);
+    transform: translateX(5px);
+}
+
+.footer-links a i {
+    margin-right: 8px;
 }
 
 .footer-copyright {
-    padding-top: 20px;
+    padding-top: 25px;
     border-top: 1px solid #e0e0e0;
     font-size: 14px;
     color: #666;
+    max-width: 1200px;
+    margin: 0 auto;
+    text-align: center;
 }
 
 .footer-copyright a {
@@ -719,42 +745,93 @@ img {
 }
 
 .footer-logo {
-    margin-bottom: 20px;
+    margin-bottom: 25px;
     align-self: flex-start;
 }
 
 .footer-logo img {
-    height: 100px;
+    height: 90px;
+    transition: transform 0.3s;
+}
+
+.footer-logo img:hover {
+    transform: scale(1.05);
 }
 
 .footer-social {
     display: flex;
     justify-content: center;
-    margin-bottom: 20px;
-    align-self: center;
+    align-items: center;
+    margin-bottom: 25px;
+    gap: 20px;
 }
 
 .footer-social a {
-    margin: 0 15px;
-    font-size: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #fff;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     color: var(--text-color);
-    transition: transform 0.2s;
+    font-size: 20px;
+    transition: all 0.3s;
 }
 
 .footer-social a:hover {
-    transform: scale(1.2);
-}
-
-.footer-contact {
-    font-size: 18px;
-    font-weight: 600;
-    margin-bottom: 10px;
-    align-self: flex-start;
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
 }
 
 .footer-email {
     font-size: 16px;
     align-self: flex-start;
+    margin-bottom: 5px;
+}
+
+.footer-email a {
+    color: #555;
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.footer-email a:hover {
+    color: var(--primary-red);
+}
+
+@media (max-width: 1000px) {
+    .footer {
+        margin-left: 0;
+        width: 100%;
+        padding: 40px 20px 20px;
+    }
+    
+    .footer-columns {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .footer-column {
+        text-align: center;
+        margin-bottom: 30px;
+        width: 100%;
+        max-width: 400px;
+    }
+    
+    .footer-column:first-child {
+        align-items: center;
+    }
+    
+    .footer-title::after {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    
+    .footer-links a:hover {
+        transform: none;
+    }
 }
 
 /* Dark Mode Toggle */