diff --git a/public/support/index.html b/public/support/index.html
index d95af04..bee0d81 100644
--- a/public/support/index.html
+++ b/public/support/index.html
@@ -204,18 +204,34 @@
.faq {
display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 14px;
+ grid-template-columns: minmax(0, 1fr);
+ 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 {
- margin: 14px 0 0;
+ details > p {
+ 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);