diff --git a/assets/css/index.css b/assets/css/index.css index 4dd8206..8cbb0c3 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -2380,6 +2380,12 @@ h3 { border-radius: 8px 30px; background-color: #ffffff; } +@media (max-width: 768px) { + .team__modal-body { + max-height: calc(100vh - 80px); + padding: 20px; + } +} .team__modal-body::before { content: ""; position: absolute; @@ -2392,12 +2398,25 @@ h3 { background: url(../img/icons/close.svg) center no-repeat; cursor: pointer; } +@media (max-width: 768px) { + .team__modal-body::before { + top: -34px; + left: 50%; + right: auto; + transform: translateX(-50%); + } +} .team__modal-content { max-height: calc(100vh - 180px); padding-right: 4px; overflow: auto; /* Handle */ } +@media (max-width: 768px) { + .team__modal-content { + max-height: calc(100vh - 120px); + } +} .team__modal-content::-webkit-scrollbar { width: 4px; } @@ -2416,4 +2435,137 @@ h3 { align-items: center; gap: 24px; margin-top: 40px; +} + +.faq { + margin: 90px 0 100px; + overflow: hidden; +} +@media (max-width: 768px) { + .faq { + margin: 90px 0 60px; + } +} +.faq__title { + margin: 18px 0 25px; +} +@media (max-width: 768px) { + .faq__title { + margin: 21px 0; + } +} +.faq__content { + display: flex; + flex-wrap: wrap; + gap: 36px; +} +@media (max-width: 768px) { + .faq__content { + gap: 18px; + } +} +.faq__block { + flex: 0 0 calc(50% - 18px); + display: flex; + flex-direction: column; + gap: 32px; +} +@media (max-width: 768px) { + .faq__block { + flex: 1 1 100%; + gap: 18px; + } +} +.faq__item { + padding: 20px 26px; + color: #ffffff; + border-radius: 16px; + background-color: #ffffff; +} +@media (max-width: 768px) { + .faq__item { + padding: 28px 24px; + border-radius: 8px; + } +} +@media (max-width: 576px) { + .faq__item { + padding: 24px 20px; + } +} +.faq__item-question { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; + font-weight: 500; + font-size: 21px; + line-height: 146%; + color: #2d2d2d; +} +@media (max-width: 768px) { + .faq__item-question { + font-size: 18px; + } +} +@media (max-width: 576px) { + .faq__item-question { + font-size: 16px; + } +} +.faq__item-question::after { + content: "+"; + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + font-weight: 500; + font-size: 28px; + line-height: 100%; + color: #ffffff; + border-radius: 32px; + background-color: #609eff; + transition: transform ease-in-out 0.14s; +} +@media (max-width: 768px) { + .faq__item-question::after { + width: 30px; + height: 30px; + font-size: 24px; + } +} +@media (max-width: 576px) { + .faq__item-question::after { + width: 26px; + height: 26px; + font-size: 20px; + } +} +.faq__item.active .faq__item-question::after { + transform: rotate(-45deg); +} +.faq__item-answer { + display: flex; + flex-direction: column; + max-height: 0; + box-sizing: border-box; + overflow: hidden; + font-weight: 300; + font-size: 16px; + line-height: 148%; + color: #878787; + transition: max-height 0.2s ease-out; +} +@media (max-width: 768px) { + .faq__item-answer { + font-size: 14px; + } +} +.faq__item-answer::before { + content: ""; + flex: 0 0 auto; + display: block; + height: 20px; } \ No newline at end of file diff --git a/assets/js/faq.js b/assets/js/faq.js new file mode 100644 index 0000000..eab9044 --- /dev/null +++ b/assets/js/faq.js @@ -0,0 +1,21 @@ +const faqItems = document.querySelectorAll('.faq__item'); + +faqItems.forEach((faqItem) => { + faqItem.addEventListener('click', (event) => { + event.currentTarget.classList.toggle('active'); + const panel = event.currentTarget.querySelector('.faq__item-answer'); + const parentFaqItems = document.querySelectorAll('.faq__item'); + parentFaqItems.forEach((item) => { + if (item !== event.currentTarget && item.classList.contains('active')) { + item.classList.remove('active'); + const itemPanel = item.querySelector('.faq__item-answer'); + itemPanel.style.maxHeight = null; + } + }); + if (panel.style.maxHeight) { + panel.style.maxHeight = null; + } else { + panel.style.maxHeight = panel.scrollHeight + 'px'; + } + }); +}); \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index 670b282..51a9169 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,3 +1,4 @@ import './sliders.js'; import './step-by-step.js'; import './team.js'; +import './faq.js'; diff --git a/assets/scss/_l-faq.scss b/assets/scss/_l-faq.scss new file mode 100644 index 0000000..26bd90b --- /dev/null +++ b/assets/scss/_l-faq.scss @@ -0,0 +1,130 @@ +.faq { + margin: 90px 0 100px; + overflow: hidden; + + @include tablet { + margin: 90px 0 60px; + } + + &__title { + margin: 18px 0 25px; + + @include tablet { + margin: 21px 0; + } + } + + &__content { + display: flex; + flex-wrap: wrap; + gap: 36px; + + @include tablet { + gap: 18px; + } + } + + &__block { + flex: 0 0 calc(50% - 18px); + display: flex; + flex-direction: column; + gap: 32px; + + @include tablet { + flex: 1 1 100%; + gap: 18px; + } + } + + &__item { + padding: 20px 26px; + color: $white; + border-radius: 16px; + background-color: $white; + + @include tablet { + padding: 28px 24px; + border-radius: 8px; + } + + @include mobile { + padding: 24px 20px; + } + + &-question { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; + font-weight: 500; + font-size: 21px; + line-height: 146%; + color: $black; + + @include tablet { + font-size: 18px; + } + + @include mobile { + font-size: 16px; + } + + &::after { + content: '+'; + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + font-weight: 500; + font-size: 28px; + line-height: 100%; + color: $white; + border-radius: 32px; + background-color: $blue; + transition: transform ease-in-out 0.14s; + + @include tablet { + width: 30px; + height: 30px; + font-size: 24px; + } + + @include mobile { + width: 26px; + height: 26px; + font-size: 20px; + } + } + } + + &.active &-question::after { + transform: rotate(-45deg); + } + + &-answer { + display: flex; + flex-direction: column; + max-height: 0; + box-sizing: border-box; + overflow: hidden; + font-weight: 300; + font-size: 16px; + line-height: 148%; + color: $grey; + transition: max-height 0.2s ease-out; + + @include tablet { + font-size: 14px; + } + + &::before { + content: ''; + flex: 0 0 auto; + display: block; + height: 20px; + } + } + } +} diff --git a/assets/scss/_l-team.scss b/assets/scss/_l-team.scss index 4df55cb..0f9eeb2 100644 --- a/assets/scss/_l-team.scss +++ b/assets/scss/_l-team.scss @@ -147,6 +147,11 @@ border-radius: 8px 30px; background-color: $white; + @include tablet { + max-height: calc(100vh - 80px); + padding: 20px; + } + &::before { content: ''; position: absolute; @@ -158,6 +163,13 @@ height: 28px; background: url(../img/icons/close.svg) center no-repeat; cursor: pointer; + + @include tablet { + top: -34px; + left: 50%; + right: auto; + transform: translateX(-50%); + } } } @@ -166,6 +178,10 @@ padding-right: 4px; overflow: auto; + @include tablet { + max-height: calc(100vh - 120px); + } + &::-webkit-scrollbar { width: 4px; } diff --git a/assets/scss/index.scss b/assets/scss/index.scss index d55789c..977242c 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -29,3 +29,4 @@ @import './l-socialization'; @import './l-price'; @import './l-team'; +@import './l-faq'; diff --git a/index.html b/index.html index b3905c6..22cd0ea 100644 --- a/index.html +++ b/index.html @@ -1718,6 +1718,104 @@ + +
+
+
FAQ
+ +

+ Ответы на
+ часто задаваемые вопросы +

+ +
+
+
+
Чем будет заниматься реабилитант?
+
+ Первые 3 месяца встречи не рекомендуются, так как это может навредить + эмоциональному состоянию резидента. Но по истечению 3 месяцев возможны встречи по + воскресеньям с соглашения куратора и специалистов центра +
+
+ +
+
Можно ли пользоваться телефоном, ноутбуком?
+
+ Первые 3 месяца встречи не рекомендуются, так как это может навредить + эмоциональному состоянию резидента. Но по истечению 3 месяцев возможны встречи по + воскресеньям с соглашения куратора и специалистов центра +
+
+ +
+
А что если будут жестоко обращаться?
+
+ Первые 3 месяца встречи не рекомендуются, так как это может навредить + эмоциональному состоянию резидента. Но по истечению 3 месяцев возможны встречи по + воскресеньям с соглашения куратора и специалистов центра +
+
+ +
+
Может ли участник самостоятельно уйти?
+
+ Первые 3 месяца встречи не рекомендуются, так как это может навредить + эмоциональному состоянию резидента. Но по истечению 3 месяцев возможны встречи по + воскресеньям с соглашения куратора и специалистов центра +
+
+ +
+
Что нужно с собой брать в центр?
+
+ Первые 3 месяца встречи не рекомендуются, так как это может навредить + эмоциональному состоянию резидента. Но по истечению 3 месяцев возможны встречи по + воскресеньям с соглашения куратора и специалистов центра +
+
+
+ +
+
+
Сколько времени нужно для реабилитации?
+
+ Первые 3 месяца встречи не рекомендуются, так как это может навредить + эмоциональному состоянию резидента. Но по истечению 3 месяцев возможны встречи по + воскресеньям с соглашения куратора и специалистов центра +
+
+ +
+
А если что-то случится? Есть ли врачи?
+
+ Первые 3 месяца встречи не рекомендуются, так как это может навредить + эмоциональному состоянию резидента. Но по истечению 3 месяцев возможны встречи по + воскресеньям с соглашения куратора и специалистов центра +
+
+ +
+
Можно ли посещать реабилитанта?
+
+ Первые 3 месяца встречи не рекомендуются, так как это может навредить + эмоциональному состоянию резидента. Но по истечению 3 месяцев возможны встречи по + воскресеньям с соглашения куратора и специалистов центра +
+
+ +
+
Есть ли доступ к запрещенным веществам?
+
+ Первые 3 месяца встречи не рекомендуются, так как это может навредить + эмоциональному состоянию резидента. Но по истечению 3 месяцев возможны встречи по + воскресеньям с соглашения куратора и специалистов центра +
+
+
+
+
+