Optimized content and fixed a few mobile issues.

2026-11-12 09:02:01 +01:00 · 2026-10-14 19:40:45 +02:00
parent 6e60f1c117
commit 4d1362c257
34 changed files with 739 additions and 123 deletions
@@ -0,0 +1,127 @@
+@use "variables" as *;
+
+.faq {
+    padding: 120px 0 0;
+
+    @include md {
+        padding-top: 160px;
+    }
+
+    &__inner {
+        @include inner;
+        display: grid;
+        gap: 48px;
+
+        @include md {
+            grid-template-columns: 5fr 7fr;
+            gap: 64px;
+            align-items: start;
+        }
+    }
+
+    &__head {
+        display: grid;
+        gap: 24px;
+
+        @include md {
+            position: sticky;
+            top: 120px;
+        }
+    }
+
+    &__text {
+        max-width: 40ch;
+        font-size: 20px;
+
+        a {
+            font-weight: 700;
+            text-decoration: underline wavy $red;
+            text-underline-offset: 4px;
+        }
+    }
+
+    &__list {
+        display: grid;
+        gap: 16px;
+    }
+}
+
+.faq-item {
+    border: 3px solid $ink;
+    border-radius: $radius;
+    background: $cream;
+    box-shadow: 5px 5px 0 $ink;
+    transition: box-shadow 0.3s $ease, translate 0.3s $ease;
+
+    &:hover {
+        translate: -2px -2px;
+        box-shadow: 8px 8px 0 $ink;
+    }
+
+    &[open] {
+        background: $yellow;
+    }
+
+    &__question {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        padding: 20px 24px;
+        cursor: pointer;
+        list-style: none;
+
+        &::-webkit-details-marker {
+            display: none;
+        }
+    }
+
+    &__title {
+        font-size: clamp(18px, 2vw, 22px);
+        line-height: 1.3;
+        font-weight: 800;
+    }
+
+    &__icon {
+        position: relative;
+        flex: none;
+        width: 36px;
+        height: 36px;
+        border: 3px solid $ink;
+        border-radius: 50%;
+        background: $cream;
+        transition: rotate 0.4s $ease;
+
+        &::before,
+        &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 14px;
+            height: 3px;
+            background: $ink;
+            translate: -50% -50%;
+        }
+
+        &::after {
+            rotate: 90deg;
+        }
+    }
+
+    &[open] &__icon {
+        rotate: 135deg;
+    }
+
+    &__answer {
+        padding: 0 24px 24px;
+        font-size: 17px;
+
+        ul, ol {
+            margin: 8px 0 0 20px;
+        }
+
+        ul { list-style: disc; }
+        ol { list-style: decimal; }
+    }
+}