Merge pull request 'Выровнять FAQ и анимировать раскрытие' (#4) from k1ngsterr1/landing:faq-animation into main

Reviewed-on: Rosetta/landing#4

public/support/index.html

@@ -204,18 +204,34 @@
 
       .faq {
         display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-columns: minmax(0, 1fr);
-        gap: 14px;
+        gap: 12px;
       }
 
       details {
+        display: grid;
+        grid-template-rows: auto 0fr;
         padding: 19px 20px;
         border: 1px solid #dbe2ee;
         border-radius: 8px;
         background: #ffffff;
+        overflow: hidden;
+        transition: grid-template-rows 280ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms ease,
+          background-color 180ms ease;
+      }
+
+      details[open] {
+        grid-template-rows: auto 1fr;
+        border-color: #b8cce8;
+        background: #f9fbff;
       }
 
       summary {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 28px;
+        gap: 12px;
+        align-items: center;
+        min-height: 28px;
         cursor: pointer;
         color: #1d293d;
         font-size: 17px;
@@ -227,23 +243,54 @@
         display: none;
       }
 
+      summary::marker {
+        content: "";
+      }
+
       summary::after {
-        float: right;
+        display: grid;
+        width: 28px;
+        height: 28px;
+        place-items: center;
         color: #075ed3;
         content: "+";
-        font-size: 22px;
+        font-size: 26px;
         font-weight: 500;
-        line-height: 0.8;
+        line-height: 1;
+        transform: rotate(0deg);
+        transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
       }
 
       details[open] summary::after {
-        content: "-";
+        transform: rotate(45deg);
       }
 
-      details p {
+      details > p {
-        margin: 14px 0 0;
+        display: block;
+        min-height: 0;
+        margin: 0 40px 0 0;
+        overflow: hidden;
         color: #526176;
         font-size: 15px;
+        opacity: 0;
+        transform: translateY(-4px);
+        transition: opacity 160ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
+          margin 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
+      }
+
+      details[open] > p {
+        margin: 14px 40px 0 0;
+        opacity: 1;
+        transform: translateY(0);
+        transition-delay: 70ms;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        details,
+        summary::after,
+        details > p {
+          transition: none;
+        }
       }
 
       .contact-panel {
@@ -290,6 +337,7 @@
         font-size: 18px;
         font-weight: 700;
         overflow-wrap: anywhere;
+        text-decoration: none;
       }
 
       .legal-links {
@@ -370,6 +418,11 @@
           background: #141c29;
         }
 
+        details[open] {
+          border-color: #3c608b;
+          background: #18263a;
+        }
+
         .quick-link:hover {
           border-color: #427fc7;
           box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);