diff --git a/wp-content/themes/dekart/assets/css/camp.css b/wp-content/themes/dekart/assets/css/camp.css
index afb09bc..5d2016c 100644
--- a/wp-content/themes/dekart/assets/css/camp.css
+++ b/wp-content/themes/dekart/assets/css/camp.css
@@ -805,141 +805,137 @@ p {
/* programs */
-.programs-wrapper {
- flex-wrap: wrap;
- display: flex;
- gap: 30px;
+.programs__grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 32px;
}
-.programs__item {
- width: calc(33.33% - 20px);
- display: flex;
- flex-direction: column;
- gap: 20px;
+@media (min-width: 641px) {
+ .programs__grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 24px;
+ }
}
-.programs__item_img {
- border-radius: 30px;
- width: auto;
- height: 350px;
- object-fit: cover;
+@media (min-width: 1024px) {
+ .programs__grid {
+ grid-template-columns: repeat(3, 1fr);
+ gap: 30px;
+ }
}
-.programs__item p {
- margin: 0;
+.programs__card {
+ display: flex;
+ flex-direction: column;
+ border-radius: 20px;
+ background: #fff;
+ overflow: hidden;
+ transition: transform .25s ease, box-shadow .25s ease;
}
-.scroll-icon-wrapper {
- display: none;
+.programs__card:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
-.programs__item_title {
- font-size: 26px;
- line-height: 1.2;
- color: #212121;
- font-weight: 600;
- flex: 1;
+.programs__image {
+ width: 100%;
+ aspect-ratio: 16 / 10;
+ object-fit: cover;
+ display: block;
}
-.programs__item_date {
- font-weight: 600;
- font-size: 18px;
+.programs__body {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 20px;
+ flex: 1;
}
-.programs__item_text {
- font-size: 16px;
- line-height: 1.3;
- color: #212121;
- font-weight: 500;
+.programs__name {
+ font-family: Montserrat, sans-serif;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 1.25;
+ color: #1c2b2d;
+ margin: 0;
}
-.programs__item_price {
- font-size: 26px;
- color: #212121;
- font-weight: 600;
+@media (min-width: 641px) {
+ .programs__name { font-size: 20px; }
}
-.btn-details {
- width: fit-content;
- color: #ffffff;
- border: 2px solid #3bb273;
- background-color: #3bb273;
- font-weight: 600;
- text-transform: uppercase;
- border-radius: 30px;
- padding: 15px 30px;
- transition: .3s;
+@media (min-width: 1024px) {
+ .programs__name { font-size: 22px; }
}
-.btn-details:hover {
- background-color: transparent;
- color: #212121;
+.programs__date {
+ font-size: 14px;
+ font-weight: 400;
+ color: #999;
+ margin: 0;
}
-.modal-programs,
-.modal-mentors {
- position: fixed;
- top: -12px;
- right: -28px;
- bottom: 0;
- left: 0;
- display: none;
- align-items: center;
- justify-content: center;
- background-color: #000000ce;
- z-index: 100;
+.programs__desc {
+ font-size: 15px;
+ line-height: 1.4;
+ color: #555;
+ font-weight: 400;
+ margin: 0;
+ flex: 1;
}
-.modal-programs.open {
- display: flex;
+.programs__footer {
+ display: flex;
+ align-items: baseline;
+ gap: 10px;
+ margin-top: 4px;
}
-.modal-mentors.open {
- display: flex;
+.programs__price {
+ font-family: Montserrat, sans-serif;
+ font-size: 24px;
+ font-weight: 700;
+ color: #3bb273;
+ line-height: 1.2;
}
-.modal-programs-wrapper {
- position: relative;
- display: flex;
- gap: 30px;
- border-radius: 30px;
- background-color: #fff;
- padding: 40px;
- max-width: 90%;
- max-height: 90%;
+.programs__duration {
+ font-size: 14px;
+ color: #999;
+ font-weight: 400;
}
-.modal-programs__content p {
- margin-bottom: 15px;
+.programs__btn {
+ width: 100%;
+ padding: 14px 20px;
+ font-size: 15px;
+ font-weight: 600;
+ text-transform: uppercase;
+ color: #3bb273;
+ border: 2px solid #3bb273;
+ background: transparent;
+ border-radius: 100px;
+ cursor: pointer;
+ transition: .2s;
+ margin-top: 12px;
}
-.programs__content {
- white-space: pre-line;
+.programs__btn:hover,
+.programs__btn:focus-visible {
+ background: #3bb273;
+ color: #fff;
+ outline: none;
}
-.btn-close-modal {
- position: absolute;
- bottom: 100%;
- left: 100%;
+@media (min-width: 641px) {
+ .programs__btn { width: 100%; }
}
-.btn-close-mentors {
- position: absolute;
- bottom: 100%;
- left: 100%;
-}
-
-.modal-programs__img {
- min-width: 260px;
- height: 260px;
- border-radius: 30px;
- overflow: hidden;
-}
-
-.modal-programs__img img {
- width: 100%;
- height: 100%;
- object-fit: contain;
+@media (min-width: 1024px) {
+ .programs__btn { width: 100%; }
}
/* programs END */
@@ -2059,11 +2055,13 @@ p {
.programs__item_img {
border-radius: clamp(20px, 2.5vw, 30px);
- height: clamp(228px, 29.17vw, 350px);
+ aspect-ratio: 3 / 2;
+ height: auto;
}
.programs__item_title {
font-size: clamp(17px, 2.17vw, 26px);
+ font-weight: 500;
}
.programs__item_date {
@@ -2075,7 +2073,8 @@ p {
}
.programs__item_price {
- font-size: clamp(17px, 2.17vw, 26px);
+ font-size: clamp(20px, 2.5vw, 28px);
+ color: #3bb273;
}
.btn-details {
@@ -2526,21 +2525,11 @@ p {
padding: 0 20px;
}
- .programs {
- padding-left: 0;
- padding-right: 0;
- }
.programs .camp_title {
padding: 0 15px 25px 15px;
}
- .scroll-icon-wrapper {
- margin-top: -20px;
- display: flex;
- justify-content: flex-end;
- padding-right: 15px;
- }
.programs-wrapper {
width: 100%;
@@ -2566,17 +2555,15 @@ p {
border-radius: 5px;
}
- .programs__item {
- width: 100%;
- gap: 10px;
- }
.programs__item_img {
- height: 250px;
+ aspect-ratio: 3 / 2;
+ height: auto;
}
.programs__item_title {
font-size: 22px;
+ font-weight: 500;
}
.btn-details {
@@ -2783,11 +2770,6 @@ p {
max-width: 95%;
flex-direction: column;
}
- .btn-close-modal,
- .btn-close-mentors {
- left: auto;
- right: -28px;
- }
.modal-programs__img {
height: auto;
border-radius: 10px;
diff --git a/wp-content/themes/dekart/assets/js/camp.js b/wp-content/themes/dekart/assets/js/camp.js
index 3f9b93b..9b5086b 100644
--- a/wp-content/themes/dekart/assets/js/camp.js
+++ b/wp-content/themes/dekart/assets/js/camp.js
@@ -48,10 +48,11 @@ document.addEventListener("click", function (event) {
}
if (target.classList.contains("btn-program")) {
- modalPrograms.querySelector('.modal-programs__img').innerHTML = target.parentNode.querySelector('.programs__item_img').outerHTML;
- modalPrograms.querySelector('.programs__item_title').textContent = target.parentNode.querySelector('.programs__item_title').textContent;
- modalPrograms.querySelector('.programs__item_price').textContent = target.parentNode.querySelector('.programs__item_price').textContent;
- modalPrograms.querySelector('.programs__content').innerHTML = target.parentNode.querySelector('.programs_content').innerHTML;
+ const card = target.closest('.programs__card');
+ modalPrograms.querySelector('.modal-programs__img').innerHTML = card.querySelector('.programs__image').outerHTML;
+ modalPrograms.querySelector('.programs__item_title').textContent = card.querySelector('.programs__name').textContent;
+ modalPrograms.querySelector('.programs__item_price').textContent = card.querySelector('.programs__price').textContent;
+ modalPrograms.querySelector('.programs__content').innerHTML = card.querySelector('.programs_content').innerHTML;
modalPrograms.classList.add('open');
return;
}
@@ -76,7 +77,7 @@ document.addEventListener("click", function (event) {
'.hero-media-search__container',
'.about-us__wrapper',
'.infograph h2', '.infograph .camp_text', '.infograph-wrapper',
- '.programs h2', '.programs-wrapper > div',
+ '.programs h2', '\.programs__grid > article',
'.mentors h2', '.mentors-wrapper > div',
'.routine h2', '.routine__item',
'.foto h2', '.camp-foto-wrapper',
@@ -102,7 +103,7 @@ document.addEventListener("click", function (event) {
observer.observe(el);
});
- document.querySelectorAll('.programs-wrapper > div, .mentors-wrapper > div').forEach((card, i) => {
+ document.querySelectorAll('.programs__grid > article, .mentors-wrapper > div').forEach((card, i) => {
card.style.transitionDelay = (i * 0.08) + 's';
});
})();
diff --git a/wp-content/themes/dekart/page-camp.php b/wp-content/themes/dekart/page-camp.php
index 77ee063..416b19a 100644
--- a/wp-content/themes/dekart/page-camp.php
+++ b/wp-content/themes/dekart/page-camp.php
@@ -260,34 +260,39 @@ $metrics = [
от ₽ / Летние программы
-
-
-
-
-
-
Летние программы
+
+