diff --git a/public/support/index.html b/public/support/index.html
index d95af04..1a870f8 100644
--- a/public/support/index.html
+++ b/public/support/index.html
@@ -209,13 +209,26 @@
}
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 260ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms ease;
+ }
+
+ details[open] {
+ grid-template-rows: auto 1fr;
}
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 +240,53 @@
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;
+ overflow: hidden;
color: #526176;
font-size: 15px;
+ opacity: 0;
+ transform: translateY(-4px);
+ transition: opacity 140ms ease, transform 180ms ease, margin 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
+ }
+
+ details[open] > p {
+ margin: 14px 0 0;
+ opacity: 1;
+ transform: translateY(0);
+ transition-delay: 70ms;
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ details,
+ summary::after,
+ details > p {
+ transition: none;
+ }
}
.contact-panel {