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);