Новая версия дизайна

index.html

@@ -49,8 +49,8 @@
         <div class="hero-image">
           <img src="images/ximperlinux.svg" alt="logo">
         </div>
-        <h2>Ximper Linux</h2>
-        <p>Для тех, кто требует от системы всего и сразу: современный дизайн, высокая скорость и уверенность в завтрашнем дне. Построен на отложенном репозитории ALT Sisyphus и гарантирует стабильность.</p>
+        <h2>Современный дизайн и высокая скорость</h2>
+        <p>Построен на отлаженном репозитории ALT Sisyphus и гарантирует стабильность.</p>
         <button id="next-section" class="button outline">Узнать больше</button>
         <div class="arrows">
           <span class="arrow"></span>
@@ -95,7 +95,7 @@
         </div>
     </div>
     <div class="variants-text">
-      <h1>Идеальный выбор для каждого</h1>
+      <h1>Редакции</h1>
     </div>
     <div class="distro-showcase">
       <div class="distro-variant">
@@ -172,8 +172,8 @@
       </div>
     </div>
     <div class="download-text-block">
-      <h1>Скачайте Ximper Linux и наслаждайтесь его возможностями!</h1>
-      <a href="downloads.html" class="button outline">Перейти на страницу загрузок</a>
+      <h1>Идеальный выбор для каждого</h1>
+      <a href="downloads.html" class="button outline">Загрузить</a>
     </div>
   </main>
   <footer>

styles.css

@@ -32,11 +32,11 @@
 }
 
 :root {
-  --border: #7E01FF;
-  --bg: #0B0E1D;
-  --link-color: #b79ced;
-  --link-hover: #ffffff;
-  --gradient: linear-gradient(45deg, #fff 30%, #b79ced 100%);
+  --border: #5D21B3;  /* Более тёмный и приглушённый фиолетовый */
+  --bg: #0A0B16;      /* Чуть более светлый, но глубокий фон */
+  --link-color: #9A7EC9;  /* Менее насыщенный пастельный фиолетовый */
+  --link-hover: #E6E0FF;  /* Тёплый, приглушённый белый */
+  --gradient: linear-gradient(45deg, #C2B0E0 30%, #7A5FB5 100%); /* Мягкий градиент */
 }
 
 /* Общие стили */
@@ -59,7 +59,7 @@ body::before {
   left: 0;
   width: 120vw;
   height: 120vh;
-  background: radial-gradient(circle, rgba(75, 0, 130, 0.6), rgba(0, 0, 0, 0));
+  background: radial-gradient(circle, rgba(65, 0, 110, 0.5), rgba(0, 0, 0, 0));
   filter: blur(150px);
   animation: glowAnimation 30s infinite ease-in-out;
   z-index: -1;
@@ -523,8 +523,8 @@ main {
 }
 
 .info-block {
-  background: rgba(11, 14, 29, 0.8);
-  border: 2px solid var(--border);
+  /*background: rgba(11, 14, 29, 0.8);*/
+  /*border: 2px solid var(--border);*/
   border-radius: 20px;
   padding: 25px;
   position: relative;
@@ -681,7 +681,7 @@ main {
 
 /* Стили для футера */
 footer {
-  background-color: var(--bg);
+  /*background-color: var(--bg);*/
   padding: 15px 20px;
   color: #fff;
   display: flex;
@@ -691,7 +691,7 @@ footer {
   position: relative;
   margin: 12px;
   box-sizing: border-box;
-  border: 2px solid var(--border);
+  /*border: 2px solid var(--border);*/
   border-radius: 15px;
   width: calc(100% - 24px);
 }
@@ -1139,17 +1139,22 @@ footer {
 }
 
 .distro-showcase {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Центрирует дочерние элементы по горизонтали */
   padding: 10px 10px;
   background: transparent;
   position: relative;
+
 }
 
 .distro-variant {
   display: flex;
   align-items: center;
-  margin-bottom: 80px;
-  background: rgba(11, 14, 29, 0.8);
-  border: 2px solid var(--border);
+  margin-bottom: 20px;
+  max-width: 1600px;
+  /*background: rgba(11, 14, 29, 0.8);*/
+  /*border: 2px solid var(--border);*/
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);