Update spoller.html

spoller.html

@@ -1,68 +1,76 @@
 
 <style>
-  /* УНИВЕРСАЛЬНЫЕ СТИЛИ */
-  .spoiler1-button, 
-  .spoiler2-button {
+  /* БАЗОВЫЕ СТИЛИ ДЛЯ ВСЕХ УСТРОЙСТВ */
+  .spoiler-button {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
-    padding: 16px 20px; /* Увеличил padding */
+    padding: 18px 24px;
     background-color: #f5f5f5;
     border: none;
-    border-radius: 6px; /* Увеличил радиус */
+    border-radius: 8px;
     cursor: pointer;
-    font-size: 18px; /* Увеличил шрифт */
+    font-size: 20px;
     text-transform: uppercase;
-    letter-spacing: 0.8px;
+    letter-spacing: 1px;
     transition: all 0.3s;
-    margin: 12px 0; /* Увеличил отступ */
-    gap: 10px;
-    min-height: 50px; /* Минимальная высота */
+    margin: 15px 0;
+    gap: 12px;
+    min-height: 60px;
   }
   
-  .spoiler1-button:hover,
-  .spoiler2-button:hover {
+  .spoiler-button:hover {
     background-color: #e0e0e0;
   }
   
-  .spoiler1-content,
-  .spoiler2-content {
-    padding: 18px;
+  .spoiler-content {
+    padding: 20px;
     border: 1px solid #ddd;
     border-top: none;
-    border-radius: 0 0 6px 6px;
+    border-radius: 0 0 8px 8px;
     display: none;
-    margin-top: -4px;
-    font-size: 16px; /* Размер текста контента */
-    line-height: 1.5;
+    font-size: 18px;
+    line-height: 1.6;
   }
   
-  .arrow {
-    flex-shrink: 0;
+  .spoiler-arrow {
+    width: 24px;
+    height: 24px;
     transition: transform 0.3s;
-    width: 20px; /* Увеличил стрелку */
-    height: 20px;
   }
 
-  /* АДАПТИВНЫЕ СТИЛИ */
-  @media (max-width: 767px) {
-    .spoiler1-button,
-    .spoiler2-button {
-      padding: 18px 16px; /* Еще больше на мобилках */
+  /* ПЛАНШЕТЫ (768px-1024px) */
+  @media (min-width: 768px) and (max-width: 1024px) {
+    .spoiler-button {
+      padding: 16px 20px;
+      font-size: 18px;
+      min-height: 54px;
+    }
+    .spoiler-content {
+      padding: 18px;
       font-size: 16px;
-      min-height: 56px;
     }
-    
-    .spoiler1-content,
-    .spoiler2-content {
+    .spoiler-arrow {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  /* МОБИЛЬНИКИ (<768px) */
+  @media (max-width: 767px) {
+    .spoiler-button {
+      padding: 22px 16px; /* Больше по вертикали */
+      font-size: 22px; /* Крупнее текст */
+      min-height: 70px; /* Выше кнопка */
+    }
+    .spoiler-content {
       padding: 16px;
-      font-size: 15px;
+      font-size: 17px;
     }
-    
-    .arrow {
-      width: 18px;
-      height: 18px;
+    .spoiler-arrow {
+      width: 22px;
+      height: 22px;
     }
   }
 </style>