Выровнять FAQ и анимировать раскрытие

This commit is contained in:
2026-07-13 07:41:38 +05:00
parent a7de198be1
commit d4cafa014f

View File

@@ -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 {