Refresh website

static/css/custom.css

@@ -1,8 +1,22 @@
+:root {
+    --primary: #1cb487;
+    --primary-dark: #169c73;
+    --primary-light: #5ed1b0;
+    --primary-ultralight: #e7f7f2;
+    --secondary: #360b48;
+    --secondary-dark: #29083a;
+    --secondary-light: #4e1566;
+    --secondary-ultralight: #f0e6f3;
+    --dark: #2c3e50;
+    --light: #f8f9fa;
+    --gray: #6c757d;
+}
+
 @font-face {
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 400;
-    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/fonts/Montserrat.woff2) format('woff2');
+    src: local('Montserrat'), local('Montserrat-Regular'), url(/fonts/Montserrat.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
@@ -13,15 +27,19 @@ body {
     font-family: Montserrat,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji,sans;
 }
 nav.navbar {
+    background: var(--light);
     box-shadow: 0 0px 3px 0 #1cb487;
     border-bottom: 1px solid #1cb487;
-    z-index: 2;
+    z-index: 1024;
+    transition: background 1s linear;
 }
 nav.navbar.beginscroll {
+    background: linear-gradient(90deg, var(--primary-ultralight) 0%, white 150%);
     box-shadow: none;
-    border-bottom: 1px solid #f8f9fa;
+    border-bottom: none;
 }
 nav.navbar.scrolled {
+    background: var(--light);
     box-shadow: 0 0px 3px 0 #1cb487;
     border-bottom: 1px solid #1cb487;
 }
@@ -35,6 +53,16 @@ a.card:hover {
     transform: scale(1.14);
 }
 
+.section-title::after {
+    content: '';
+    width: 120px;
+    height: 4px;
+    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
+    display: block;
+    margin: 10px auto 0;
+    border-radius: 2px;
+}
+
 .link-rounded, .circle-head {
     display: inline-flex;
     justify-content: center;
@@ -86,10 +114,135 @@ img {
     max-width: 100%;
 }
 
+#features .card {
+    background-color: white;
+    border-radius: 10px;
+    padding-top: 3px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    transition: transform 0.3s;
+    border-top: 4px solid var(--primary);
+}
+
+#features .card:nth-child(even) {
+    border-top: 4px solid var(--secondary);
+}
+
+#features .card:hover {
+    transform: translateY(-10px);
+}
+
+
+#discover .steps {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 60px;
+    position: relative;
+}
+
+#discover .steps::before {
+    content: '';
+    position: absolute;
+    top: 25px;
+    left: 10%;
+    width: 80%;
+    height: 2px;
+    background: linear-gradient(to right, var(--primary) 0%, var(--secondary) 100%);
+    z-index: 1;
+}
+
+#discover .step {
+    flex-basis: 30%;
+    text-align: center;
+    position: relative;
+    z-index: 2;
+}
+
+#discover .step-number {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    color: white;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    font-weight: bold;
+    margin: 0 auto 20px;
+}
+
+#discover .step h3 {
+    margin-bottom: 15px;
+    font-size: 22px;
+}
+
+#discover .step p {
+    color: var(--gray);
+}
+
+#cta {
+    padding: 100px 0;
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
+    color: white;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+#cta::before, #cta::after {
+    content: '';
+    position: absolute;
+    width: 300px;
+    height: 300px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+#cta::before {
+    top: -150px;
+    left: -100px;
+}
+
+#cta::after {
+    bottom: -150px;
+    right: -100px;
+    width: 350px;
+    height: 350px;
+}
+
+.cta-content {
+    position: relative;
+    z-index: 2;
+}
+
+#cta p {
+    max-width: 700px;
+}
+
 footer {
     border-top: 3px solid #9332bb;
 }
 
+.footer-links {
+    list-style: none;
+    padding: 0;
+}
+
+.footer-links li {
+    margin-bottom: 12px;
+}
+
+.footer-links a {
+    color: rgba(255, 255, 255, 0.7);
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.footer-links a:hover {
+    color: white;
+}
+
 #download-house {
     animation: floatinghouse 6s linear infinite;
 }