Update styles.css

Author: omarakhmedov-web

styles.css

@@ -1,8 +1,20 @@
+/* === CSS Variables for Dark/Light themes === */
 :root {
   --color-bg: #0f0f0f;
   --color-text: #ffffff;
   --color-accent: #d4af37;
   --color-secondary: #c0c0c0;
+  --color-card: #1a1a1a;
+  --color-border: #333;
+}
+
+[data-theme="light"] {
+  --color-bg: #ffffff;
+  --color-text: #111111;
+  --color-accent: #b79025;
+  --color-secondary: #555555;
+  --color-card: #f5f5f5;
+  --color-border: #ddd;
 }
 
 * {
@@ -16,6 +28,11 @@ body {
   color: var(--color-text);
   font-family: 'Montserrat', sans-serif;
   line-height: 1.6;
+  transition: background-color 0.4s, color 0.4s;
+}
+
+h1, h2, h3, h4 {
+  font-family: 'DM Serif Display', serif;
 }
 
 a {
@@ -39,18 +56,23 @@ header {
   align-items: center;
 }
 header .logo {
-  font-size: 28px;
+  font-size: 32px;
   font-weight: bold;
-  letter-spacing: 1px;
+  letter-spacing: 2px;
 }
 header nav ul {
   list-style: none;
   display: flex;
   gap: 30px;
+  align-items: center;
 }
-header nav ul li a {
+header nav ul li a,
+header nav ul li button {
   font-size: 16px;
   color: var(--color-accent);
+  background: none;
+  border: none;
+  cursor: pointer;
 }
 
 .hero {
@@ -59,7 +81,6 @@ header nav ul li a {
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  position: relative;
   padding-left: 20px;
 }
 .hero h1 {
@@ -86,7 +107,7 @@ section {
   text-align: center;
 }
 .feature-card {
-  background-color: #1a1a1a;
+  background-color: var(--color-card);
   padding: 40px 20px;
   border-radius: 8px;
   transition: transform 0.3s, box-shadow 0.3s;
@@ -139,8 +160,8 @@ section {
   gap: 40px;
 }
 .pricing-card {
-  background-color: #1a1a1a;
-  border: 1px solid #333;
+  background-color: var(--color-card);
+  border: 1px solid var(--color-border);
   padding: 40px;
   border-radius: 8px;
   text-align: center;
@@ -193,13 +214,19 @@ footer {
   font-size: 14px;
 }
 
-@media (max-width: 768px) {
-  .hero h1 {
-    font-size: 48px;
-  }
-  .hero p {
-    font-size: 18px;
-  }
+/* 🔘 Тема переключения */
+#theme-toggle.small {
+  padding: 8px 16px;
+  font-size: 14px;
+  border: 1px solid var(--color-accent);
+  border-radius: 30px;
+  color: var(--color-accent);
+  background: transparent;
+  transition: all 0.3s;
+}
+#theme-toggle.small:hover {
+  background-color: var(--color-accent);
+  color: var(--color-bg);
 }
 
 /* 🔥 АНИМИРОВАННАЯ VIP-КНОПКА */
@@ -218,7 +245,6 @@ footer {
   transition: all 0.4s ease-in-out;
   z-index: 1;
 }
-
 .btn-animated::before {
   content: "";
   position: absolute;
@@ -230,12 +256,23 @@ footer {
   z-index: -1;
   transition: all 0.4s ease-in-out;
 }
-
 .btn-animated:hover {
   color: #0f0f0f;
   border-color: #ffd700;
 }
-
 .btn-animated:hover::before {
   left: 0;
 }
+
+@media (max-width: 768px) {
+  .hero h1 {
+    font-size: 48px;
+  }
+  .hero p {
+    font-size: 18px;
+  }
+  header nav ul {
+    flex-direction: column;
+    gap: 10px;
+  }
+}