From 5e7ccb2835f88d8612a3dfe821e96d9c878cc531 Mon Sep 17 00:00:00 2001
From: obvTiger <obvtiger@epilogue.team>
Date: Thu, 3 Apr 2025 17:43:40 +0200
Subject: [PATCH] fix: new design

---
 index.html | 91 +++++++++++++++++++++++++++++++-----------------------
 1 file changed, 53 insertions(+), 38 deletions(-)

diff --git a/index.html b/index.html
index 530697f..1b219b6 100644
--- a/index.html
+++ b/index.html
@@ -6,14 +6,14 @@
     <title>eplg.cloud | Modern Cloud Hosting</title>
     <style>
         :root {
-            --dark-bg: #121212;
-            --dark-surface: #1e1e1e;
-            --dark-border: #2a2a2a;
-            --dark-accent: #3a3a3a;
+            --dark-bg: #000000;
+            --dark-surface: #000000;
+            --dark-border: #1a1a1a;
+            --dark-accent: #1a1a1a;
             --text-primary: #ffffff;
-            --text-secondary: #b3b3b3;
-            --accent-color: #6d5acd;
-            --accent-light: #8b7ce0;
+            --text-secondary: #808080;
+            --accent-color: #ffffff;
+            --accent-light: #ffffff;
         }
         
         * {
@@ -42,7 +42,7 @@
                 linear-gradient(to right, var(--dark-border) 1px, transparent 1px),
                 linear-gradient(to bottom, var(--dark-border) 1px, transparent 1px);
             background-size: 30px 30px;
-            opacity: 0.2;
+            opacity: 0.1;
             z-index: -1;
             pointer-events: none;
         }
@@ -73,7 +73,7 @@
         }
         
         .logo span {
-            color: var(--accent-color);
+            color: var(--text-primary);
         }
         
         .nav-links {
@@ -85,7 +85,9 @@
             color: var(--text-secondary);
             text-decoration: none;
             font-weight: 500;
-            transition: color 0.2s ease;
+            transition: all 0.3s ease;
+            transform: translateY(0);
+            display: inline-block;
         }
         
         .nav-links a:hover {
@@ -103,10 +105,10 @@
             font-weight: 800;
             letter-spacing: -1.5px;
             margin-bottom: 1.5rem;
-            background: linear-gradient(90deg, var(--text-primary), var(--accent-light));
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
+            color: var(--text-primary);
+            background: none;
+            -webkit-background-clip: unset;
+            background-clip: unset;
         }
         
         .hero p {
@@ -130,31 +132,41 @@
             font-size: 1rem;
             font-weight: 600;
             text-decoration: none;
-            border-radius: 8px;
-            transition: all 0.2s ease;
-        }
-        
-        .button-primary {
-            background-color: var(--accent-color);
-            color: white;
+            border-radius: 0;
+            transition: background-color 0.3s ease;
+            position: relative;
             border: none;
         }
         
+        .button-primary {
+            background-color: var(--text-primary);
+            color: var(--dark-bg);
+            box-shadow: 0 4px 0 rgba(128, 128, 128, 1);
+        }
+        
         .button-primary:hover {
-            background-color: var(--accent-light);
-            transform: translateY(-2px);
-            box-shadow: 0 8px 15px rgba(109, 90, 205, 0.2);
+            background-color: var(--text-secondary);
+        }
+
+        .button-primary:active {
+            background-color: var(--text-secondary);
         }
         
         .button-secondary {
-            background-color: transparent;
+            background-color: #333333;
             color: var(--text-primary);
-            border: 1px solid var(--dark-border);
+            border: none;
+            box-shadow: 0 4px 0 rgba(128, 128, 128, 0.5);
         }
         
         .button-secondary:hover {
-            border-color: var(--text-secondary);
-            transform: translateY(-2px);
+            background-color: #1a1a1a;
+            color: var(--text-primary);
+        }
+
+        .button-secondary:active {
+            background-color: #1a1a1a;
+            color: var(--text-primary);
         }
         
         .features {
@@ -179,13 +191,12 @@
         .feature-card {
             background-color: var(--dark-surface);
             border: 1px solid var(--dark-border);
-            border-radius: 12px;
             padding: 2rem;
             transition: transform 0.3s ease, border-color 0.3s ease;
+            transform: translateY(0);
         }
         
         .feature-card:hover {
-            transform: translateY(-5px);
             border-color: var(--dark-accent);
         }
         
@@ -231,22 +242,21 @@
         .pricing-card {
             background-color: var(--dark-surface);
             border: 1px solid var(--dark-border);
-            border-radius: 12px;
             padding: 2.5rem;
             text-align: center;
             transition: transform 0.3s ease, border-color 0.3s ease;
             display: flex;
             flex-direction: column;
             min-height: 600px;
+            transform: translateY(0);
         }
         
         .pricing-card:hover {
-            transform: translateY(-5px);
             border-color: var(--dark-accent);
         }
         
         .pricing-card.featured {
-            border-color: var(--accent-color);
+            border-color: var(--text-primary);
             position: relative;
             overflow: hidden;
         }
@@ -256,8 +266,8 @@
             position: absolute;
             top: 1rem;
             right: -2rem;
-            background-color: var(--accent-color);
-            color: white;
+            background-color: var(--text-primary);
+            color: var(--dark-bg);
             padding: 0.25rem 2rem;
             font-size: 0.75rem;
             font-weight: 600;
@@ -307,7 +317,7 @@
         
         .pricing-features li::before {
             content: "✓";
-            color: var(--accent-color);
+            color: var(--text-primary);
             margin-right: 0.5rem;
             font-weight: bold;
         }
@@ -415,15 +425,20 @@
         .stat-item {
             background-color: var(--dark-surface);
             border: 1px solid var(--dark-border);
-            border-radius: 12px;
             padding: 1.5rem;
             text-align: center;
+            transition: transform 0.3s ease, border-color 0.3s ease;
+            transform: translateY(0);
+        }
+
+        .stat-item:hover {
+            border-color: var(--dark-accent);
         }
 
         .stat-number {
             font-size: 2.5rem;
             font-weight: 700;
-            color: var(--accent-color);
+            color: var(--text-primary);
             margin-bottom: 0.5rem;
         }