diff --git a/wp-content/themes/dekart/camp.css b/wp-content/themes/dekart/camp.css new file mode 100644 index 0000000..80611fa --- /dev/null +++ b/wp-content/themes/dekart/camp.css @@ -0,0 +1,3005 @@ +:root { + --main-color: #BF568E; + --main-blue: #006DB7; + --main-yellow: #FFD43E; + --section-padding: clamp(30px, 6.25vw, 75px); +} + +html { + height: auto; +} + +/* =========================== */ +/* camp */ +.camp { + display: flex; + flex-direction: column; + gap: 0; + padding-top: 0; + padding-bottom: 0; +} + +.camp section { + padding-top: var(--section-padding); + padding-bottom: var(--section-padding); +} + +.container_camp { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +p { + font-weight: 400; + margin: 0 0 30px 0; + padding: 0; +} + +.camp_title { + font-family: 'Montserrat', sans-serif; + font-weight: 700; + color: #1c2b2d; + font-size: 34px; + line-height: 1.25; + text-align: center; + padding-bottom: 32px; +} + +.camp_text { + font-family: Inter, sans-serif; + font-size: 18px; + line-height: 1.6; + color: #555; + text-align: center; + max-width: 700px; + margin: 0 auto 50px; + font-weight: 400; +} + +/* banner */ +.banner { + position: relative; + display: flex; + border-radius: 40px; + justify-content: space-between; + overflow: hidden; + background: rgb(58, 154, 104); + background: linear-gradient(45deg, rgba(58, 154, 104, 1) 0%, rgba(47, 204, 122, 1) 100%); +} + +.banner_label { + position: absolute; + padding: 10px 20px; + color: #fff; + font-size: 20px; + border-radius: 30px; +} + +.banner_label1 { + top: 45%; + left: 50%; + background-color: #e94563; + animation: animate1 4s infinite; +} + +.banner_label2 { + top: 80%; + left: 48%; + background-color: #ae5fcd; + animation: animate2 3s infinite; +} + +.banner_label3 { + top: 80%; + left: 80%; + background-color: #13acd0; + animation: animate3 2.5s infinite; + rotate: -15deg; +} + +@keyframes animate1 { + 0% { + rotate: 15deg; + } + + 50% { + rotate: 25deg; + } + + 100% { + rotate: 15deg; + } +} + +@keyframes animate2 { + 0% { + rotate: -15deg; + } + + 50% { + rotate: -25deg; + } + + 100% { + rotate: -15deg; + } +} + +@keyframes animate3 { + 0% { + scale: 1; + } + + 50% { + scale: 1.1; + } + + 100% { + scale: 1; + } +} + +.banner-add { + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.banner__left-part { + width: 50%; + display: flex; + flex-direction: column; + gap: 30px; + padding: 40px 30px 40px 40px; +} + +.banner_title { + color: #fff; + font-size: 41px; + line-height: 1.25; + font-weight: 600; +} + +.banner_text { + color: #fff; + font-size: 18px; + line-height: 1.3; + padding: 0; + text-align: center; +} + +.banner_text-min { + color: #fff; + font-size: 15px; + font-weight: 500; + opacity: 0.65; +} + +.banner_btn { + color: #fff; + font-size: 20px; + line-height: 1.2; + font-weight: 600; + text-transform: uppercase; + border: 2px solid #42425c; + border-radius: 50px; + background-color: #42425c; + transition: .3s; + padding: 20px 30px; + width: fit-content; +} + +.banner_btn:hover { + background-color: #fff; + color: #212121; +} + +.banner__right-part { + border-radius: 40px; + overflow: hidden; +} + +.modal-programs__content { + max-width: 860px; + overflow-y: auto; +} + +/* banner END */ + + +/* =========================== */ + +/* about-us */ + +/* =========================== */ + + + +.about-us { + background: #ffffff; + +} + + + +.about-us__wrapper { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + gap: 60px; + padding: 0 75px; + overflow: visible; +} + + + +.about-us__image-col { + + flex: 0 0 45%; + + max-width: 45%; + +} + +.about-us__frame { + + position: relative; + + width: 100%; + +} + + + +.about-us__image { + + display: block; + + width: 100%; + + height: auto; + + border-radius: 24px; + + object-fit: cover; + + aspect-ratio: 4 / 3; + + border: 5px solid #fff; + box-shadow: 0 8px 32px rgba(255,107,0,0.15); + +} + + + +.about-us__image-placeholder { + + display: flex; + + flex-direction: column; + + align-items: center; + + justify-content: center; + + gap: 12px; + + width: 100%; + + aspect-ratio: 4 / 3; + + border-radius: 24px; + + background: #f0f0f0; + + color: #999; + + font-size: 14px; + + font-family: Inter, sans-serif; + + border: 2px dashed #ccc; + +} + + + +.about-us__image-placeholder svg { + + width: 48px; + + height: 48px; + + color: #bbb; + +} + + + +.about-us__content-col { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 24px; +} + + + +.about-us__title { + text-align: left; + padding-bottom: 0; + font-size: 27px; +} + + + +.about-us__text { + font-family: Inter, sans-serif; + font-size: 18px; + line-height: 1.6; + font-weight: 400; + color: #555; + text-align: left; + max-width: 700px; + margin: 0 0; +} + +.about-us__social-proof { +} + +.about-us__badge { + + display: inline-block; + + font-family: Montserrat, sans-serif; + + font-size: 14px; + + font-weight: 700; + + color: #FF6B00; + + background: rgba(255,107,0,0.08); + + padding: 6px 16px; + + border-radius: 9999px; + +} + +.about-us__cta { +} + +.about-us__cta-link { + + display: inline-block; + + font-family: Montserrat, sans-serif; + + font-size: 16px; + + font-weight: 700; + + color: #fff; + + background: #FF6B00; + + padding: 12px 28px; + + border-radius: 9999px; + + text-decoration: none; + + transition: background 0.2s, transform 0.2s; + +} + +.about-us__cta-link:hover { + + background: #FF8533; + + transform: scale(1.05); + +} + + + +.about-us__doodle { + + position: absolute; + + object-fit: contain; + + + + pointer-events: none; + + z-index: 1; + +} + + + +.about-us__doodle--plane { + + width: 71px; + + height: 71px; + + top: -8px; + + right: -8px; + + + + +} + + +.about-us__doodle--heart { + + width: 30px; + + height: 30px; + + bottom: -8px; + + left: -8px; + + + +} + + + +@media (max-width: 780px) { + + .about-us__wrapper { + + flex-direction: column; + + padding: 24px 20px; + + gap: 24px; + + } + + .about-us__image-col { + + flex: 0 0 100%; + + max-width: 100%; + + } + + .about-us__title { + padding-bottom: 0; + + font-size: 22px; +} + + .about-us__text { + + font-size: 16px; + text-align: left; + + line-height: 1.6; + +} + + .about-us__doodle--plane { + + width: 81px; + + height: 81px; + + top: -12px; + + right: -12px; + +} + + .about-us__doodle--heart { + + width: 48px; + + height: 48px; + + bottom: -12px; + + left: -12px; + +} + +} + + +/* suggestions icon wrap */ +.suggestions__icon-wrap { + width: 72px; + height: 72px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255,107,0,0.1); + border-radius: 16px; + margin: 0 auto 16px; + flex-shrink: 0; +} + +.suggestions__icon { + width: 40px; + height: 40px; + object-fit: contain; +} + +/* suggestions card hover */ +.suggestions__item { + transition: transform 0.3s ease, box-shadow 0.3s ease; + cursor: default; +} + +.suggestions__item:hover { + transform: translateY(-6px); + box-shadow: 0 14px 32px rgba(255,107,0,0.18); +} + +/* scroll animation */ +.fade-up { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease-out, transform 0.6s ease-out; +} + +.fade-up.visible { + opacity: 1; + transform: translateY(0); +} + +/* suggestions */ + +@keyframes sugFadeUp { + from { transform: translateY(24px) scale(0.97); opacity: 0; } + to { transform: translateY(0) scale(1); opacity: 1; } +} +@keyframes sugSpin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} +@keyframes sugFloat { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} +@keyframes sugBounce { + 0%, 100% { transform: translateY(0) scale(1); } + 50% { transform: translateY(-12px) scale(1.05); } +} +.suggestions { + background: #f8f9fa; + + position: relative; + overflow: hidden; +} +@media (min-width: 1024px) { + .suggestions { + width: 100vw; + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + } +} +.suggestions .container { + max-width: 1216px; + margin: 0 auto; + padding: 0 24px; + position: relative; + z-index: 2; +} +.suggestions__subtitle { + font-family: Inter, sans-serif; + font-size: 18px; + line-height: 1.6; + color: #555; + text-align: center; + max-width: 700px; + margin: 0 auto 50px; +} +.suggestions-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; +} +.suggestions-wrapper > .suggestions__item { + width: calc(25% - 15px); + min-width: 220px; + flex: 0 0 auto; +} +.suggestions__item { + border-radius: 20px; + padding: 32px 24px 36px; + box-shadow: 0 4px 16px rgba(0,0,0,0.04); + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 12px; + position: relative; + overflow: hidden; + transform: translateY(0) scale(1); + transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; +} +.suggestions__item::before { + content: ''; + position: absolute; + inset: 0; + opacity: 0; + transition: opacity 0.4s ease; + border-radius: 20px; + pointer-events: none; +} +.suggestions__item:nth-child(4n+1) { background: #e0f4ff; } +.suggestions__item:nth-child(4n+1)::before { background: linear-gradient(135deg, rgba(57,183,234,0.15), transparent); } +.suggestions__item:nth-child(4n+2) { background: #ffede0; } +.suggestions__item:nth-child(4n+2)::before { background: linear-gradient(135deg, rgba(255,107,0,0.15), transparent); } +.suggestions__item:nth-child(4n+3) { background: #e0fce8; } +.suggestions__item:nth-child(4n+3)::before { background: linear-gradient(135deg, rgba(0,200,83,0.15), transparent); } +.suggestions__item:nth-child(4n+4) { background: #f3e0ff; } +.suggestions__item:nth-child(4n+4)::before { background: linear-gradient(135deg, rgba(156,39,176,0.15), transparent); } +.suggestions__item:hover { + transform: translateY(-6px) scale(1.02); + box-shadow: 0 12px 40px rgba(0,0,0,0.12); +} +.suggestions__item:hover::before { opacity: 1; } +.suggestions__item_title { + font-family: "Montserrat", sans-serif; + font-size: 20px; + line-height: 1.3; + font-weight: 700; + color: #1c2b2d; + margin: 0; + position: relative; + z-index: 1; +} +.suggestions__item_text { + font-family: "Inter", sans-serif; + font-size: 14px; + line-height: 1.6; + color: #555; + margin: 0; + position: relative; + z-index: 1; +} +.suggestions__doodle { + position: absolute; + pointer-events: none; + z-index: 1; +} +.suggestions__doodle--star { + width: 40px; height: 40px; + top: 30px; left: 30px; + opacity: 0.18; + animation: sugSpin 20s linear infinite; + filter: invert(55%) sepia(80%) saturate(500%) hue-rotate(175deg); +} +.suggestions__doodle--gear { + width: 56px; height: 56px; + bottom: 40px; right: 40px; + opacity: 0.14; + animation: sugSpin 25s linear infinite reverse; +} +.suggestions__doodle--bounce { + width: 32px; height: 32px; + top: 50%; left: 60px; + opacity: 0.12; + animation: sugBounce 3s ease-in-out infinite; + filter: invert(45%) sepia(90%) saturate(2000%) hue-rotate(360deg); +} +.suggestions__doodle--float { + width: 28px; height: 28px; + top: 80px; right: 100px; + opacity: 0.13; + animation: sugFloat 5s ease-in-out infinite; + filter: invert(60%) sepia(80%) saturate(800%) hue-rotate(100deg); +} +.suggestions__doodle--paper { + width: 36px; height: 36px; + bottom: 80px; left: 120px; + opacity: 0.1; + animation: sugFloat 4.5s ease-in-out infinite reverse; + filter: invert(25%) sepia(60%) saturate(750%) hue-rotate(260deg); +} +.suggestions::before { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + z-index: 0; + background-image: radial-gradient(circle at 25% 25%, rgba(57,183,234,0.06) 1px, transparent 1px), + radial-gradient(circle at 75% 75%, rgba(255,107,0,0.05) 1px, transparent 1px); + background-size: 40px 40px, 60px 60px; +} +@media (prefers-reduced-motion: no-preference) { + .suggestions__item { animation: sugFadeUp 0.5s ease-out forwards; } + .suggestions__item:nth-child(1) { animation-delay: 0.08s; } + .suggestions__item:nth-child(2) { animation-delay: 0.16s; } + .suggestions__item:nth-child(3) { animation-delay: 0.24s; } + .suggestions__item:nth-child(4) { animation-delay: 0.32s; } + .suggestions__item:nth-child(5) { animation-delay: 0.40s; } + .suggestions__item:nth-child(6) { animation-delay: 0.48s; } +} +@media (max-width: 1023px) { + .suggestions-wrapper { gap: 16px; } + .suggestions-wrapper > .suggestions__item { width: calc(50% - 8px); min-width: 0; } +} +@media (max-width: 767px) { + .suggestions { padding: 40px 0; } + .suggestions__subtitle { font-size: 16px; margin: 0 auto 30px; padding: 0 20px; } + .suggestions-wrapper { gap: 14px; } + .suggestions-wrapper > .suggestions__item { width: 100%; } + .suggestions__item { padding: 24px 20px 28px; } + .suggestions__item_title { font-size: 18px; } + .suggestions__item_text { font-size: 13px; } + .suggestions__doodle { display: none; } + .suggestions::before { display: none; } +} +.infograph { + background: #faf7f2; + + width: 100vw; + margin-left: calc(-50vw + 50%); + padding-left: calc(50vw - 50%); + padding-right: calc(50vw - 50%); +} + +.infograph__item { + width: calc(25% - 20px); + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + text-align: center; +} + +.infograph__item_img { + border-radius: 30px; + width: 100%; + max-width: 180px; + aspect-ratio: 1 / 1; +} + +.infograph__item_title { + color: #9d9d9d; + font-size: 18px; + line-height: 1.25; + font-weight: 500; +} + +.infograph__item_data { + color: #212121; + font-size: 30px; + line-height: 1.25; + font-weight: 600; +} + +/* infograph END */ + +.infograph-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 30px; +} + +.infograph__item { + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.infograph__item:hover { + transform: translateY(-4px); +} + +/* programs */ +.programs-wrapper { + flex-wrap: wrap; + display: flex; + gap: 30px; +} + +.programs__item { + width: calc(33.33% - 20px); + display: flex; + flex-direction: column; + gap: 20px; +} + +.programs__item_img { + border-radius: 30px; + width: auto; + height: 350px; + object-fit: cover; +} + +.programs__item p { + margin: 0; +} + +.scroll-icon-wrapper { + display: none; +} + +.programs__item_title { + font-size: 26px; + line-height: 1.2; + color: #212121; + font-weight: 600; + flex: 1; +} + +.programs__item_date { + font-weight: 600; + font-size: 18px; +} + +.programs__item_text { + font-size: 16px; + line-height: 1.3; + color: #212121; + font-weight: 500; +} + +.programs__item_price { + font-size: 26px; + color: #212121; + font-weight: 600; +} + +.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; +} + +.btn-details:hover { + background-color: transparent; + color: #212121; +} + +.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; +} + +.modal-programs.open { + display: flex; +} + +.modal-mentors.open { + display: flex; +} + +.modal-programs-wrapper { + position: relative; + display: flex; + gap: 30px; + border-radius: 30px; + background-color: #fff; + padding: 40px; + max-width: 90%; + max-height: 90%; +} + +.modal-programs__content p { + margin-bottom: 15px; +} + +.programs__content { + white-space: pre-line; +} + +.btn-close-modal { + position: absolute; + bottom: 100%; + left: 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; +} + +/* programs END */ +/* bring-child */ +.bring-child p { + margin-bottom: 0; +} + +.bring-child-wrapper { + display: flex; + gap: 40px; +} + +.part-day { + width: calc(50% - 20px); + padding: 30px; + border-radius: 40px; + border: 2px solid #e8e8e8; + display: flex; + flex-direction: column; + gap: 30px; + color: #212121; +} + +.block-row { + display: flex; + align-items: center; + gap: 10px; +} + +.part-day_title { + display: flex; + flex-direction: column; + gap: 10px; +} + +.part-day_title-text { + font-size: 30px; + line-height: 1.2; + font-weight: 600; +} + +.part-day_text { + font-size: 18px; + line-height: 1.3; + font-weight: 500; +} + +.part-day__price { + padding-bottom: 30px; + border-bottom: 1px solid #e8e8e8; + display: flex; + flex-direction: column; + gap: 10px; +} + +.part-day__price_price { + font-size: 34px; + line-height: 1; + font-weight: 600; +} + +.part-day__price_time { + font-size: 18px; + font-weight: 500; + border-radius: 30px; + color: #fff; + padding: 5px 10px; + margin-left: 10px; +} + +.camp-left-part .part-day__price_time { + border: 2px solid #3bb273; + background-color: #3bb273; +} + +.camp-right-part .part-day__price_time { + border: 2px solid #ae5fcd; + background-color: #ae5fcd; +} + +.non-bg { + background-color: transparent !important; + color: #212121; +} + +.part-day__price_text { + color: #9d9d9d; + font-size: 18px; + line-height: 1.3; + font-weight: 500; +} + +.btn-place { + padding: 20px 0; + color: #ffffff; + font-size: 20px; + line-height: 1.3; + font-weight: 600; + width: 100%; + border-radius: 50px; + text-transform: uppercase; + transition: .3s; +} + +.camp-left-part .btn-place { + border: 2px solid #3bb273; + background-color: #3bb273; +} + +.camp-right-part .btn-place { + border: 2px solid #ae5fcd; + background-color: #ae5fcd; +} + +.btn-place:hover { + background-color: transparent !important; + color: #212121; +} + +.part-day ul { + display: flex; + flex-direction: column; + gap: 10px; + color: #212121; + font-size: 18px; + line-height: 1.3; + font-weight: 500; + padding-left: 20px; +} + +.part-day ul li { + list-style: disc; +} + +/* bring-child END */ +/* mentors */ +.mentors-wrapper { + display: flex; + flex-wrap: wrap; + gap: 40px 30px; + justify-content: center; +} + +.mentors__item { + width: calc(25% - 23px); + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; +} + +.mentors__item_img { + border-radius: 30px; + width: 100%; + height: auto; + max-height: 270px; + object-fit: contain; +} + +.mentors__item_name { + font-size: 26px; + line-height: 1.2; + color: #212121; + font-weight: 600; + text-align: center; + flex: 1; +} + +.mentors__item_text { + font-size: 18px; + line-height: 1.3; + color: #929292; + font-weight: 500; + text-align: center; + margin-bottom: 10px; +} + +/* modal-mentors */ +.modal-mentors-wrapper { + position: relative; + padding: 50px; + width: 90%; + height: 100%; + border-radius: 0; + background-color: #fff; + display: flex; + gap: 40px; + color: #212121; + height: fit-content; + max-height: 80%; + border-radius: 30px; +} + +.modal-mentors__content { + flex: 1; + display: flex; + flex-direction: column; + gap: 20px; + overflow-y: auto; +} + +.modal-mentors__content p { + margin-bottom: 0; +} + +.modal-mentors__content svg { + min-width: 30px; + width: 30px; + height: 30px; +} + +.modal-mentors_name { + font-size: 43px; + font-weight: 600; +} + +.modal-mentors_job { + font-size: 26px; + line-height: 1.25; + font-weight: 600; +} + +.modal-mentors__directions { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.modal-mentors__directions span { + padding: 10px 20px; + background-color: #3bb273; + color: #fff; + font-size: 16px; + line-height: 1; + font-weight: 400; + border-radius: 30px; +} + +.modal-mentors__about { + display: flex; + gap: 20px; +} + +.about-item { + width: 50%; + padding: 20px; + border-radius: 20px; + background-color: #e7fff2; + display: flex; + gap: 10px; +} + +.mentors__about-col { + display: flex; + flex-direction: column; + gap: 16px; +} + +.mentors__about-col_title { + font-size: 20px; + line-height: 1.3; + font-weight: 600; +} + +.mentors__about-col_text { + font-size: 16px; + line-height: 1.3; + font-weight: 500; +} + +.modal-additional__education { + width: 100%; + padding: 20px; + border-radius: 20px; + border: 2px solid #f0f0f0; + display: flex; + gap: 10px; +} + +.modal-additional__education_list ul { + display: flex; + flex-wrap: wrap; + gap: 10px 30px; + font-size: 16px; + line-height: 1.3; + font-weight: 500; +} + +.modal-additional__education_list li { + width: calc(50% - 20px); + position: relative; + padding-left: 20px; +} + +.modal-additional__education_list li::before { + content: ''; + position: absolute; + width: 6px; + height: 6px; + border-radius: 50%; + background-color: #3bb273; + top: 5px; + left: 0; +} + +/* modal-mentors END */ +/* mentors END */ + +/* routine */ +.routine p { + margin-bottom: 0; +} + +.routine-wrapper { + position: relative; + display: flex; + margin-left: 20px; + flex-direction: column; + gap: 40px; + color: #212121; +} + +.routine__item { + position: relative; + display: flex; + gap: 30px; +} + +.routine__item_time { + width: 160px; + font-size: 24px; + line-height: 1.2; + font-weight: 600; + text-align: end; +} + +.routine__item_time-mobile { + display: none; +} + +.routine__item_circle { + position: relative; + margin-top: 4px; + width: 22px; + height: 22px; + border-radius: 50%; + background-color: #3bb273; + border: 4px solid #fff; +} + +.routine__item::before { + content: ''; + position: absolute; + top: 20px; + width: 2px; + background-color: #d4d4d4; + bottom: -50px; + left: 200px; +} + +.routine__item_text { + flex: 1; + display: flex; + flex-direction: column; + gap: 10px; +} + +.routine__item_text-title { + font-size: 24px; + line-height: 1.2; + font-weight: 600; +} + +.routine__item_text-text { + font-size: 18px; + line-height: 1.3; + font-weight: 500; +} + +.routine__item:last-child::before { + display: none; +} + +/* routine END*/ +/* foto */ +.camp-foto-wrapper { + display: flex; + gap: 20px; +} + +.foto-left-part { + width: 50%; + overflow: hidden; +} + +.camp-swiper-foto { + position: relative; + margin-bottom: 5px; +} + +.swiper-button-next:after, +.swiper-button-prev:after { + color: #fff; + font-weight: 600; + font-size: 14px; + padding: 5px; + border-radius: 50%; + height: 28px; + width: 28px; + display: flex; + background: #3bb273; + align-items: center; + justify-content: center; +} + +/* swiper */ +.swiper-slide { + text-align: center; + font-size: 18px; + background: #fff; + + /* Center slide text vertically */ + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} + +.swiper-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} + +.camp-swiper-foto { + height: 350px; +} + +.camp-swiper-foto img { + border-radius: 30px; +} + +.camp-swiper-foto-thumbsSlider { + height: 80px; +} + +.camp-swiper-foto-thumbsSlider img { + width: 100%; + height: auto; + aspect-ratio: 1 / 1; + border-radius: 10px; + transition: .2s; + cursor: pointer; +} + +.camp-swiper-foto-thumbsSlider img:hover { + opacity: .6; +} + + +.foto-content { + width: calc(50% - 20px); + white-space: pre-line; +} + +/* swiper END */ + +/* foto modal */ +.camp-foto-modal { + position: fixed; + inset: 0; + z-index: 9999; + display: none; + align-items: center; + justify-content: center; +} +.camp-foto-modal--open { + display: flex; +} +.camp-foto-modal__overlay { + position: absolute; + inset: 0; + background: rgba(0,0,0,0.85); + cursor: pointer; +} +.camp-foto-modal__content { + position: relative; + max-width: 90vw; + max-height: 90vh; +} +.camp-foto-modal__img { + display: block; + max-width: 90vw; + max-height: 85vh; + width: auto; + height: auto; + border-radius: 12px; + object-fit: contain; + box-shadow: 0 8px 40px rgba(0,0,0,0.4); +} +.camp-foto-modal__close { + position: absolute; + top: -40px; + right: 0; + background: none; + border: none; + cursor: pointer; + padding: 8px; + z-index: 10; + transition: opacity 0.2s; +} +.camp-foto-modal__close:hover { + opacity: 0.7; +} +.camp-foto-slide { + cursor: pointer; +} +/* foto modal END */ + +/* faq */ +.faq-wrapper { + display: flex; + gap: 30px; +} + +.camp-faq .box__accordion_label::after { + background-image: none !important; +} + +.accordion { + width: 50%; + display: flex; + flex-direction: column; + gap: 10px; + border-top: 1px solid #ccc; +} + +.camp-faq .accordion .box__accordion { + position: relative; + cursor: pointer; + border-bottom: 1px solid #ccc; + border-radius: 0; +} + +.camp-faq .box__accordion_label { + position: relative; + padding: 20px 0; + cursor: pointer; + display: flex; + align-items: center; + gap: 20px; + justify-content: space-between; +} + +.camp-faq .box__accordion_label span { + font-size: 26px; + line-height: 1.2; +} + +.box__accordion_label svg { + width: 40px; + height: 40px; + padding: 8px; + border-radius: 50%; + background: #3bb273; + stroke: #fff; + transition: .3s; + flex-shrink: 0; +} + +.camp-faq .accordion .box__accordion .box__accordion_label { + display: flex; + align-items: center; + justify-content: space-between; + padding-left: 0; +} + +.box__accordion_label svg g { + stroke: #fff; +} + +.box__accordion_label svg:hover { + background: #fff; +} + +.active .box__accordion_label svg { + rotate: 45deg; +} + +.box__accordion_label svg:hover g { + stroke: #3bb273; +} + +.camp-faq .box__accordion_content { + display: flex; + position: relative; + overflow: hidden; + max-height: 0; + transition: .3s; + gap: 20px; + align-items: center; +} + +.box__accordion_content-text { + display: flex; + flex-direction: column; + gap: 10px; + font-size: 18px; + line-height: 1.3; + color: #212121; + padding-bottom: 20px; +} + +/* faq END */ +/* contact */ +.contact-wrapper { + display: flex; + gap: 30px; +} + +.contact-content { + width: 40%; + display: flex; + flex-direction: column; + gap: 10px; +} + +.contact_subtitle { + margin-top: 10px; + font-size: 18px; + line-height: 1.2; + font-weight: 600; +} + +.contact_tel { + color: #3bb273; + font-size: 22px; + line-height: 1; + font-weight: 600; +} + +.contact_social { + display: flex; + gap: 15px; +} + +.contact-map { + display: flex; + border-radius: 30px; + overflow: hidden; + flex: 1; + height: 450px; + align-items: center; + justify-content: center; +} + +/* contact END */ +/* reviews */ +.camp-reviews-wrapper { + position: relative; +} + +.camp-reviews-wrapper .reviews__item-client_name { + font-size: 16px; + font-weight: 400; + text-align: start; +} + +.camp-reviews-wrapper .reviews__item-client_text { + text-align: start; + line-height: 1.4; + font-size: 16px; + font-weight: 400; +} + +.camp-reviews-wrapper .reviews-wrapper { + margin-top: -12px; +} + +.camp-reviews-wrapper .reviews__item, +.camp-reviews-wrapper .reviews__item-wrapper { + min-height: auto; + width: 100%; +} +.camp-reviews-wrapper .reviews__item-wrapper:before { + display: none; +} +.camp-reviews-wrapper .custom-button-next, +.camp-reviews-wrapper .custom-button-prev { + position: absolute; + top: var(--swiper-navigation-top-offset, 50%); + width: 54px; + height: 54px; + margin-top: calc(0px -(var(--swiper-navigation-size) / 2)); + z-index: 10; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: var(--swiper-navigation-color, var(--swiper-theme-color)); + background-image: none; +} + +.camp-reviews-wrapper .custom-button-next { + right: -50px; +} +.camp-reviews-wrapper .custom-button-prev { + left: -50px; +} + +.camp-reviews-wrapper .custom-button-next:after { + content: 'next'; +} + +.camp-reviews-wrapper .custom-button-next:after, +.camp-reviews-wrapper .custom-button-prev:after { + font-family: swiper-icons; + content: ''; + color: #fff; + font-weight: 600; + font-size: 26px; + padding: 5px; + border-radius: 50%; + height: 54px; + width: 54px; + display: flex; + background: #3bb273; + align-items: center; + justify-content: center; +} + +.camp-reviews-wrapper .custom-button-next:after { + content: 'prev'; +} + +.camp-reviews-wrapper .custom-button-prev:after { + content: 'prev'; +} + +.camp-reviews-wrapper .swiper-button-disabled { + opacity: 0; +} + +/* reviews END*/ + +.modal-camp-request-form { + position: fixed; + top: -12px; + left: 0; + width: 100%; + height: 100%; + background-color: #000; + display: flex; + align-items: center; + justify-content: center; + z-index: 99999; +} + +/* camp END*/ + +/* ═══════════════════════════════════════════════ + HERO — Galileo-style (городской лагерь) + ═══════════════════════════════════════════════ */ + +.hero-media-search { + background-color: #f6f1e9; + overflow: hidden; + +} +@media (min-width: 1024px) { + .hero-media-search { + + width: 100vw; + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + } +} + +.hero-media-search .container { + max-width: 1216px; + margin: 0 auto; + padding: 0 24px; +} + +.hero-media-search__container { + align-items: stretch; + display: flex; + flex-direction: column; + gap: 20px; + justify-content: flex-start; +} +@media (min-width: 1024px) { + .hero-media-search__container { + align-items: center; + flex-direction: row; + gap: 40px; + justify-content: space-between; + } +} + +.hero-media-search .heading-1 { + font-family: 'Montserrat', sans-serif; + font-weight: 900; + font-size: 2rem; + line-height: 1.05; + letter-spacing: -0.04em; + color: #1c2b2d; + margin: 0 0 0.5rem 0; + text-align: center; +} +@media (min-width: 1024px) { + .hero-media-search .heading-1 { + font-size: 2.56rem; /* desktop */ + text-align: center; + } +} + +.hero-subtitle-brand { + font-family: "Inter", sans-serif; + font-weight: 700; + font-size: 1.75rem; + line-height: 1.15; + color: #39b7ea; + margin: 0 0 0.6rem 0; +} +@media (min-width: 1024px) { + .hero-subtitle-brand { + font-size: 1.75rem; + } +} +@media (max-width: 768px) { + .hero-subtitle-brand { + font-size: 2.2rem; /* +10% */ + } + .hero-media-search .heading-1 { + font-size: 2rem; /* 32px */ + text-align: center; + } + .camp_title { font-size: 26px; padding-bottom: 24px; } + .about-us__title { font-size: 21px; text-align: left; } +} + + +.hero-media-search__content { + text-align: center; +} +@media (min-width: 1024px) { + .hero-media-search__content { + width: 420px; + text-align: center; + flex-shrink: 0; + } +} + +.hero-media-search__propositions.on-desktop { + display: flex; + gap: 0 25px; + justify-content: center; + margin: 15px 0 30px; +} +.hero-media-search .wrapper__propositions { + display: flex; + flex-direction: column; + align-items: center; +} +.hero-media-search .wrapper__propositions h3 { + font-family: "Montserrat", sans-serif; + font-weight: 800; + line-height: 1.2; + text-align: center; + color: #1c2b2d; + margin: 4px 0 0; +} +.hero-media-search .wrapper__propositions p { + font-weight: 500; + font-family: 'Inter', sans-serif; + line-height: 1.2; + text-align: center; + color: #555; + margin: 0; +} +.hero-media-search__propositions.on-desktop .wrapper__propositions { width: 100px; } +.hero-media-search__propositions.on-desktop img { width: 58px; height: auto; } +.hero-media-search__propositions.on-desktop h3 { font-size: 16px; } +.hero-media-search__propositions.on-desktop p { font-size: 14px; text-transform: capitalize; } + + +.hero-media-search__media { width: 100%; } +@media (min-width: 1024px) { + .hero-media-search__media { + width: calc(100% - 460px); + min-width: 0; + } +} + +.hero-media-search__frame { + position: relative; + aspect-ratio: 16 / 9; + width: 100%; +} +@media (max-width: 991px) { + .hero-media-search__frame { aspect-ratio: 16 / 10; } +} + +.hero-media-search__image { + display: block; + width: 100%; + height: auto; + border: 5px solid #fff; + border-radius: 24px; + box-shadow: 0 8px 32px rgba(255,107,0,0.15); + overflow: hidden; + object-fit: cover; + aspect-ratio: 16/9; +} +@media (min-width: 1024px) { + .hero-media-search__image { + border-width: 10px; + max-width: 840px; + } + .about-us__image { + border-width: 10px; + } + .about-us__doodle--plane { + width: 123px; + height: 123px; + top: -28px; + right: -28px; + filter: drop-shadow(0 0 0 5px #fff) drop-shadow(0 0 0 5px #fff); + } + .about-us__doodle--heart { + width: 100px; + height: 100px; + bottom: -28px; + left: -28px; + filter: drop-shadow(0 0 0 5px #fff) drop-shadow(0 0 0 5px #fff); + } +} + +.hero-media-search__frame .doodle { + position: absolute; + object-fit: contain; +} +.hero-media-search__frame .doodle--top-left { + height: 79px; + width: 84px; + left: -30px; + top: -12px; +} +@media (min-width: 1024px) { + .hero-media-search__frame .doodle--top-left { + height: 172px; + width: 183px; + left: -47px; + top: -54px; + } +} +.hero-media-search__frame .doodle--bottom-right { + height: 100px; + width: 99px; + bottom: -34px; + right: -16px; +} +@media (min-width: 1024px) { + .hero-media-search__frame .doodle--bottom-right { + height: 196px; + width: 195px; + bottom: -46px; + right: -44px; + } +} + +.hero-media-search__propositions.on-mobile { + display: none; + gap: 0 25px; + justify-content: center; + margin: 30px 0 15px; +} +@media (max-width: 1023px) { + .hero-media-search__propositions.on-desktop { display: none; } + .hero-media-search__propositions.on-mobile { display: flex; } +} +.hero-media-search__propositions.on-mobile .wrapper__propositions { width: 84px; } +.hero-media-search__propositions.on-mobile img { width: 48px; height: auto; } +.hero-media-search__propositions.on-mobile h3 { font-size: 14px; } +.hero-media-search__propositions.on-mobile p { font-size: 14px; } + + +.hero-cta__text { + font-size: 16.1px; + text-align: center; + color: #555; + margin-bottom: 8px; + font-weight: 500; +} + + .hero-cta__note { + margin-top: 24px; + text-align: center; + margin-left: auto; + margin-right: auto; + } + +.btn-write-camp { + background-color: #39b7ea; + color: #fff; + border: 2px solid #0c161f; + padding: 12px 36px; + font-size: 16px; + font-weight: 700; + border-radius: 100px; + cursor: pointer; + transition: .3s; + text-decoration: none; + text-align: center; + box-sizing: border-box; +} + +.btn-write-camp:hover { + background-color: #2d9fd6; + color: #fff; +} + +.on-desktop { display: none; } +.on-mobile { display: block; } + +@media (min-width: 768px) { + .on-desktop { display: block; } + .on-mobile { display: none; } +} + +.hero-cta.on-desktop { display: none; } +.hero-cta.on-mobile { display: block; } + +@media (min-width: 768px) { + .hero-cta.on-desktop { display: block; } + .hero-cta.on-mobile { display: none; } +} + +/* ═══════════════════════════════════════════════ + SECTION BACKGROUNDS — full-width, unique per section + ═══════════════════════════════════════════════ */ + +.camp section:not(.hero-media-search) { + position: relative; +} +.camp section::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: calc(-50vw + 50%); + width: 100vw; + z-index: -1; +} + +.hero-media-search::before { background: #f6f1e9; } +.about-us::before { background: #ffffff; } +.suggestions::before { background: #f5faf7; } +.infograph::before { background: #faf7f2; } +.programs::before { background: #faf5eb; } +.bring-child::before { background: #f8f5ff; } +.mentors::before { background: #f0f7fa; } +.routine::before { background: #ffffff; } +.foto::before { background: #faf7f2; } +.camp-reviews::before { background: #f6f1e9; } +.camp-faq::before { background: #ffffff; } +.camp-contact::before { background: #f5faf7; } + +@media (prefers-reduced-motion: reduce) { + .fade-up { opacity: 1; transform: none; transition: none; } + .fade-up.visible { opacity: 1; transform: none; } + .suggestions__item { animation: none; } + .banner_label { animation: none; } + .scroll-icon-wrapper { display: none; } +} + +@media (width > 780px) and (width < 1200px) { + .camp { + gap: 0; + padding-top: 0; + padding-bottom: 0; + } + + .container_camp { + max-width: clamp(780px, 100vw, 1200px); + padding: 0 clamp(13px, 1.67vw, 20px); + } + + .camp_title { + font-size: clamp(29px, 3.75vw, 45px); + padding-bottom: clamp(29px, 3.75vw, 45px); + } + + .camp_text { + font-size: clamp(12px, 1.5vw, 18px); + } + + .banner { + border-radius: clamp(26px, 3.33vw, 40px); + } + + .banner_label { + padding: clamp(6px, .83vw, 10px) clamp(13px, 1.67vw, 20px); + font-size: clamp(13px, 1.67vw, 20px); + border-radius: clamp(20px, 2.5vw, 30px); + } + + .banner__left-part { + gap: clamp(20px, 2.5vw, 30px); + padding: clamp(26px, 3.33vw, 40px) clamp(20px, 2.5vw, 30px) clamp(26px, 3.33vw, 40px) clamp(26px, 3.33vw, 40px); + } + + .banner_title { + font-size: clamp(27px, 3.42vw, 41px); + } + + .banner_text { + font-size: clamp(12px, 1.5vw, 18px); + } + + .banner_text-min { + font-size: clamp(10px, 1.25vw, 15px); + } + + .banner_btn { + font-size: clamp(13px, 1.67vw, 20px); + border: clamp(1px, .17vw, 2px) solid #42425c; + border-radius: clamp(33px, 4.17vw, 50px); + padding: clamp(13px, 1.67vw, 20px) clamp(20px, 2.5vw, 30px); + } + + .banner__right-part { + border-radius: clamp(26px, 3.33vw, 40px); + } + + .modal-programs__content { + max-width: clamp(559px, 71.67vw, 860px); + } + + margin-top: clamp(20px, 2.5vw, 30px); + gap: clamp(26px, 3.33vw, 40px); + } + + .infograph__item { + width: calc(25% - clamp(13px, 1.67vw, 20px)); + gap: clamp(6px, .83vw, 10px); + } + + .infograph__item_img { + border-radius: clamp(20px, 2.5vw, 30px); + width: clamp(152px, 19.5vw, 234px); + } + + .infograph__item_title { + font-size: clamp(12px, 1.5vw, 18px); + } + + .infograph__item_data { + font-size: clamp(20px, 2.5vw, 30px); + } + + .programs-wrapper { + gap: clamp(20px, 2.5vw, 30px); + } + + .programs__item { + width: calc(33.33% - clamp(13px, 1.67vw, 20px)); + gap: clamp(13px, 1.67vw, 20px); + } + + .programs__item_img { + border-radius: clamp(20px, 2.5vw, 30px); + height: clamp(228px, 29.17vw, 350px); + } + + .programs__item_title { + font-size: clamp(17px, 2.17vw, 26px); + } + + .programs__item_date { + font-size: clamp(12px, 1.5vw, 18px); + } + + .programs__item_text { + font-size: clamp(10px, 1.33vw, 16px); + } + + .programs__item_price { + font-size: clamp(17px, 2.17vw, 26px); + } + + .btn-details { + border: clamp(1px, .17vw, 2px) solid #3bb273; + border-radius: clamp(20px, 2.5vw, 30px); + padding: clamp(10px, 1.25vw, 15px) clamp(20px, 2.5vw, 30px); + } + + .modal-programs-wrapper { + gap: clamp(20px, 2.5vw, 30px); + border-radius: clamp(20px, 2.5vw, 30px); + padding: clamp(26px, 3.33vw, 40px); + } + + .modal-programs__content p { + margin-bottom: clamp(10px, 1.25vw, 15px); + } + + .modal-programs__img { + min-width: clamp(169px, 21.67vw, 260px); + height: clamp(169px, 21.67vw, 260px); + border-radius: clamp(20px, 2.5vw, 30px); + } + + .bring-child-wrapper { + gap: clamp(26px, 3.33vw, 40px); + } + + .part-day { + width: calc(50% - clamp(13px, 1.67vw, 20px)); + padding: clamp(20px, 2.5vw, 30px); + border-radius: clamp(26px, 3.33vw, 40px); + border: clamp(1px, .17vw, 2px) solid #e8e8e8; + gap: clamp(20px, 2.5vw, 30px); + } + + .block-row { + gap: clamp(6px, .83vw, 10px); + } + + .part-day_title { + gap: clamp(6px, .83vw, 10px); + } + + .part-day_title-text { + font-size: clamp(20px, 2.5vw, 30px); + } + + .part-day_text { + font-size: clamp(12px, 1.5vw, 18px); + } + + .part-day__price { + padding-bottom: clamp(20px, 2.5vw, 30px); + border-bottom: 1px solid #e8e8e8; + gap: clamp(6px, .83vw, 10px); + } + + .part-day__price_price { + font-size: clamp(29px, 3.75vw, 45px); + } + + .part-day__price_time { + font-size: clamp(12px, 1.5vw, 18px); + border-radius: clamp(20px, 2.5vw, 30px); + padding: clamp(3px, .42vw, 5px) clamp(6px, .83vw, 10px); + margin-left: clamp(6px, .83vw, 10px); + } + + .camp-left-part .part-day__price_time { + border: clamp(1px, .17vw, 2px) solid #3bb273; + } + + .camp-right-part .part-day__price_time { + border: clamp(1px, .17vw, 2px) solid #ae5fcd; + } + + .part-day__price_text { + font-size: clamp(12px, 1.5vw, 18px); + } + + .btn-place { + padding: clamp(13px, 1.67vw, 20px) 0; + font-size: clamp(13px, 1.67vw, 20px); + border-radius: clamp(33px, 4.17vw, 50px); + } + + .camp-left-part .btn-place { + border: clamp(1px, .17vw, 2px) solid #3bb273; + } + + .camp-right-part .btn-place { + border: clamp(1px, .17vw, 2px) solid #ae5fcd; + } + + .part-day ul { + gap: clamp(6px, .83vw, 10px); + font-size: clamp(12px, 1.5vw, 18px); + padding-left: clamp(13px, 1.67vw, 20px); + } + + .mentors-wrapper { + gap: clamp(26px, 3.33vw, 40px) clamp(20px, 2.5vw, 30px); + } + + .mentors__item { + width: calc(25% - clamp(15px, 1.92vw, 23px)); + gap: clamp(6px, .83vw, 10px); + } + + .mentors__item_img { + border-radius: clamp(20px, 2.5vw, 30px); + } + + .mentors__item_name { + font-size: clamp(17px, 2.17vw, 26px); + } + + .mentors__item_text { + font-size: clamp(12px, 1.5vw, 18px); + margin-bottom: clamp(6px, .83vw, 10px); + } + + .modal-mentors-wrapper { + padding: clamp(33px, 4.17vw, 50px); + gap: clamp(26px, 3.33vw, 40px); + } + + .modal-mentors__content { + gap: clamp(13px, 1.67vw, 20px); + } + + .modal-mentors__content svg { + min-width: clamp(20px, 2.5vw, 30px); + width: clamp(20px, 2.5vw, 30px); + height: clamp(20px, 2.5vw, 30px); + } + + .modal-mentors_name { + font-size: clamp(28px, 3.58vw, 43px); + } + + .modal-mentors_job { + font-size: clamp(17px, 2.17vw, 26px); + } + + .modal-mentors__directions { + gap: clamp(6px, .83vw, 10px); + } + + .modal-mentors__directions span { + padding: clamp(6px, .83vw, 10px) clamp(13px, 1.67vw, 20px); + font-size: clamp(10px, 1.33vw, 16px); + border-radius: clamp(20px, 2.5vw, 30px); + } + + .modal-mentors__about { + gap: clamp(13px, 1.67vw, 20px); + } + + .about-item { + padding: clamp(13px, 1.67vw, 20px); + border-radius: clamp(13px, 1.67vw, 20px); + gap: clamp(6px, .83vw, 10px); + } + + .mentors__about-col { + gap: clamp(10px, 1.33vw, 16px); + } + + .mentors__about-col_title { + font-size: clamp(13px, 1.67vw, 20px); + } + + .mentors__about-col_text { + font-size: clamp(10px, 1.33vw, 16px); + } + + .modal-additional__education { + padding: clamp(13px, 1.67vw, 20px); + border-radius: clamp(13px, 1.67vw, 20px); + border: clamp(1px, .17vw, 2px) solid #f0f0f0; + gap: clamp(6px, .83vw, 10px); + } + + .modal-additional__education_list ul { + gap: clamp(6px, .83vw, 10px) clamp(20px, 2.5vw, 30px); + font-size: clamp(10px, 1.33vw, 16px); + } + + .modal-additional__education_list li { + width: calc(50% - clamp(13px, 1.67vw, 20px)); + padding-left: clamp(13px, 1.67vw, 20px); + } + + .modal-additional__education_list li::before { + width: clamp(4px, .5vw, 6px); + height: clamp(4px, .5vw, 6px); + top: clamp(3px, .42vw, 5px); + } + + .routine-wrapper { + margin-left: clamp(13px, 1.67vw, 20px); + gap: clamp(26px, 3.33vw, 40px); + } + + .routine__item { + gap: clamp(20px, 2.5vw, 30px); + } + + .routine__item_time { + width: clamp(104px, 13.33vw, 160px); + font-size: clamp(16px, 2vw, 24px); + } + + .routine__item_circle { + margin-top: clamp(3px, .33vw, 4px); + width: clamp(14px, 1.83vw, 22px); + height: clamp(14px, 1.83vw, 22px); + border: clamp(3px, .33vw, 4px) solid #fff; + } + + .routine__item::before { + top: clamp(13px, 1.67vw, 20px); + width: clamp(1px, .17vw, 2px); + bottom: -clamp(33px, 4.17vw, 50px); + left: clamp(130px, 16.67vw, 200px); + } + + .routine__item_text { + gap: clamp(6px, .83vw, 10px); + } + + .routine__item_text-title { + font-size: clamp(16px, 2vw, 24px); + } + + .routine__item_text-text { + font-size: clamp(12px, 1.5vw, 18px); + } + + .camp-foto-wrapper { + gap: clamp(13px, 1.67vw, 20px); + } + + .camp-swiper-foto { + margin-bottom: clamp(3px, .42vw, 5px); + } + + .swiper-button-next:after, + .swiper-button-prev:after { + font-size: clamp(9px, 1.17vw, 14px); + padding: clamp(3px, .42vw, 5px); + height: clamp(18px, 2.33vw, 28px); + width: clamp(18px, 2.33vw, 28px); + } + + .swiper-slide { + font-size: clamp(12px, 1.5vw, 18px); + } + + .camp-swiper-foto { + height: clamp(228px, 29.17vw, 350px); + } + + .camp-swiper-foto img { + border-radius: clamp(20px, 2.5vw, 30px); + } + + .camp-swiper-foto-thumbsSlider { + height: clamp(52px, 6.67vw, 80px); + } + + .camp-swiper-foto-thumbsSlider img { + border-radius: clamp(6px, .83vw, 10px); + } + + + + + + + + + + + + .foto-content { + width: calc(50% - clamp(13px, 1.67vw, 20px)); + } + + .faq-wrapper { + gap: clamp(20px, 2.5vw, 30px); + } + + .accordion { + gap: clamp(6px, .83vw, 10px); + border-top: 1px solid #ccc; + } + + .camp-faq .accordion .box__accordion { + border-bottom: 1px solid #ccc; + } + + .camp-faq .box__accordion_label { + padding: clamp(13px, 1.67vw, 20px) 0; + gap: clamp(13px, 1.67vw, 20px); + } + + .camp-faq .box__accordion_label span { + font-size: clamp(17px, 2.17vw, 26px); + } + + .box__accordion_label svg { + width: clamp(26px, 3.33vw, 40px); + height: clamp(26px, 3.33vw, 40px); + padding: clamp(5px, .67vw, 8px); + } + + .camp-faq .box__accordion_content { + gap: clamp(13px, 1.67vw, 20px); + } + + .box__accordion_content-text { + gap: clamp(6px, .83vw, 10px); + font-size: clamp(12px, 1.5vw, 18px); + padding-bottom: clamp(13px, 1.67vw, 20px); + } + + .contact-wrapper { + gap: clamp(20px, 2.5vw, 30px); + } + + .contact-content { + gap: clamp(6px, .83vw, 10px); + } + + .contact_subtitle { + margin-top: clamp(6px, .83vw, 10px); + font-size: clamp(12px, 1.5vw, 18px); + } + + .contact_tel { + font-size: clamp(13px, 1.7vw, 20px); + } + + .contact_social { + gap: clamp(10px, 1.25vw, 15px); + } + + .contact-map { + border-radius: clamp(20px, 2.5vw, 30px); + height: clamp(292px, 37.5vw, 450px); + } + + .camp-reviews-wrapper .reviews__item-client_name { + font-size: clamp(10px, 1.33vw, 16px); + } + + .camp-reviews-wrapper .reviews__item-client_text { + font-size: clamp(10px, 1.33vw, 16px); + } + + .camp-reviews-wrapper .custom-button-next, + .camp-reviews-wrapper .custom-button-prev { + width: clamp(35px, 4.5vw, 54px); + height: clamp(35px, 4.5vw, 54px); + margin-top: calc(1px -(var(--swiper-navigation-size) / 2)); + } + + .camp-reviews-wrapper .custom-button-next:after, + .camp-reviews-wrapper .custom-button-prev:after { + font-size: clamp(17px, 2.17vw, 26px); + padding: clamp(3px, .42vw, 5px); + height: clamp(35px, 4.5vw, 54px); + width: clamp(35px, 4.5vw, 54px); + } + +} + +@media (width < 780px) { + + + .camp { + gap: 0; + } + + .camp section { + margin-top: 0; + margin-bottom: 0; + } + + .camp_title { + font-size: 30px; + padding-bottom: 25px; + } + + + + .banner { + border-radius: 0 0 40px 40px; + margin-top: 0; + } + + .banner_title { + font-size: 27px; + width: 100%; + } + + .banner_text { + font-size: 16px; + } + + .banner__right-part { + display: none; + } + + .banner__left-part { + width: 100%; + padding: 30px; + } + + .banner_btn { + margin: 100px auto 0; + } + + .banner_label { + padding: 5px 10px; + font-size: 16px; + } + + .banner_label1 { + top: 62%; + left: 39%; + } + + .banner_label2 { + top: 69%; + left: 10%; + } + + .banner_label3 { + top: 65%; + right: 10%; + left: auto; + rotate: -18deg; + } + + .banner_btn { + font-size: 18px; + } + + .camp section { + padding-left: 15px; + padding-right: 15px; + } + + .camp_text { + font-size: 16px; + margin: 0 auto 30px; + padding: 0 20px; + } + + + .infograph { + background: #faf7f2; + + padding-left: calc(50vw - 50%); + padding-right: calc(50vw - 50%); + } + + .infograph-wrapper { + margin-top: -12px; + gap: 16px; + flex-wrap: wrap; + } + + .infograph__item { + width: calc(50% - 8px); + gap: 6px; + } + + .infograph__item_title { + margin-bottom: 0; + font-size: 17px; + } + + .infograph__item_img { + width: 100%; + max-width: 160px; + height: auto; + } + + .infograph__item_data { + font-size: 28px; + margin-bottom: 0; + } + + .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%; + display: flex; + flex-wrap: nowrap; + gap: 30px; + overflow-x: scroll; + padding: 0 15px 20px 15px; + } + + .programs-wrapper::-webkit-scrollbar { + width: 10px; + height: 10px; + } + + .programs-wrapper::-webkit-scrollbar-thumb { + background-color: #ccc; + border-radius: 8px; + border: 1px solid #8b8b8b; + } + + .programs-wrapper::-webkit-scrollbar-track { + border-radius: 5px; + } + + .programs__item { + width: 100%; + gap: 10px; + } + + .programs__item_img { + height: 250px; + } + + .programs__item_title { + font-size: 22px; + } + + .btn-details { + width: 100%; + } + + .banner-add { + border-radius: 40px; + background-color: #3bb273 !important; + background-image: none !important; + } + + .banner-add .banner_title { + width: 100%; + } + + .banner-add .banner__left-part { + gap: 20px; + } + + .banner-add .banner_btn { + margin-top: -12px; + width: 100%; + } + + .banner_text-min { + margin: 0; + } + + .bring-child-wrapper { + gap: 20px; + flex-direction: column; + } + + .part-day { + width: 100%; + gap: 15px; + padding: 20px; + } + + .block-row { + flex-wrap: wrap; + } + + .part-day_title-text { + font-size: 26px; + } + + .part-day__price_price { + width: 100%; + order: 2; + font-size: 22px; + } + + .part-day__price_time { + margin: 0; + } + + .part-day__price { + padding-bottom: 20px; + } + + .part-day_text { + font-size: 16px; + } + + .btn-place { + padding: 15px 0; + } + + .mentors__item { + width: calc(50% - 15px); + } + + .mentors__item_name { + font-size: 18px; + } + + .mentors__item_text { + font-size: 16px; + } + + .routine-wrapper { + margin-left: 0; + } + + .routine-wrapper { + gap: 30px; + } + + .routine__item_time { + display: none; + } + + .routine__item_text { + gap: 5px; + } + + .routine__item_time-mobile { + display: block; + font-size: 20px; + line-height: 1.2; + font-weight: 600; + } + + .routine__item_text-title { + font-size: 22px; + } + + .routine__item::before { + left: 10px; + } + + .camp-foto-wrapper { + gap: 10px; + flex-direction: column; + } + + .foto-left-part { + width: 100%; + } + + .camp-swiper-foto { + height: 250px; + margin-bottom: 5px; + } + + .camp-swiper-foto-thumbsSlider { + height: auto; + } + + .foto-content { + display: none; + } + + + + + + + + + + .more .btn-more { + height: 24px; + background: #fff; + } + + .faq-wrapper { + gap: 0; + flex-direction: column; + } + + .accordion { + width: 100%; + gap: 0; + } + + .accordion-last { + border-top: none; + } + + .accordion .box__accordion .box__accordion_label { + padding: 10px 0; + } + + .camp-faq .box__accordion_label span { + font-size: 20px; + } + + .box__accordion_label svg { + flex-shrink: 0; + } + + .contact-wrapper { + gap: 20px; + flex-direction: column-reverse; + } + + .contact-map { + width: 100%; + height: 250px; + } + + #ya-map { + height: 250px !important; + } + + .contact-content { + width: 100%; + } + + .contact_tel { + font-size: 18px; + } + .mentors__item_img { + max-height: 195px; + } + .camp-reviews-wrapper .custom-button-next { + right: -20px; + top: 40%; + } + .camp-reviews-wrapper .custom-button-prev { + left: -20px; + top: 40%; + } + .modal-programs-wrapper { + gap: 15px; + border-radius: 10px; + padding: 15px; + max-width: 95%; + flex-direction: column; + } + .btn-close-modal, + .btn-close-mentors { + left: auto; + right: -28px; + } + .modal-programs__img { + height: auto; + border-radius: 10px; + } + .modal-mentors-wrapper { + position: relative; + padding: 15px; + width: 90%; + gap: 20px; + color: #212121; + height: fit-content; + max-height: 90%; + border-radius: 10px; + flex-direction: column; + } + .modal-mentors_name { + font-size: 20px; + } + .modal-mentors__about { + gap: 10px; + flex-direction: column; + } + .about-item { + width: 100%; + padding: 10px; + border-radius: 10px; + background-color: #e7fff2; + display: flex; + gap: 10px; + flex-direction: column; + } + .mentors__about-col { + gap: 10px; + } + .mentors__about-col_title { + font-size: 18px; + } + .mentors__about-col_text { + font-size: 14px; + } + .mentors__about-col_text section { + padding: 0; + } + .modal-additional__education { + width: 100%; + padding: 10px; + border-radius: 10px; + gap: 10px; + flex-direction: column; + } + + .modal-additional__education_list ul { + padding-left: 0 !important; + } + + .modal-additional__education_list li { + width: 100%; + padding-left: 10px; + } + .camp-reviews-wrapper .custom-button-next:after, .camp-reviews-wrapper .custom-button-prev:after { + font-size: 12px; + height: 27px; + width: 27px; + display: flex; + } + + /* foto mobile: horizontal scroll */ + .camp-swiper-foto .swiper-wrapper { + display: flex; + flex-wrap: nowrap; + overflow-x: auto; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + gap: 10px; + padding: 0 15px; + } + .camp-swiper-foto .swiper-wrapper::-webkit-scrollbar { + height: 6px; + } + .camp-swiper-foto .swiper-wrapper::-webkit-scrollbar-thumb { + background: #ccc; + border-radius: 4px; + } + .camp-swiper-foto .swiper-slide { + flex: 0 0 80%; + scroll-snap-align: center; + } + .camp-swiper-foto .swiper-slide img { + border-radius: 16px; + } + .camp-swiper-foto .swiper-button-next, + .camp-swiper-foto .swiper-button-prev { + display: none; + } + .camp-swiper-foto-thumbsSlider { + display: none; + } +} \ No newline at end of file diff --git a/wp-content/themes/dekart/functions.php b/wp-content/themes/dekart/functions.php index facf721..48a5f66 100644 --- a/wp-content/themes/dekart/functions.php +++ b/wp-content/themes/dekart/functions.php @@ -539,11 +539,11 @@ function add_carbon() { Container::make('post_meta', '🏰 Настройки Городской Лагерь') ->where('post_template', '=', 'page-camp.php') ->add_tab('🖼️ Первый экран', array( - Field::make( 'html', 'hero_tab_desc', 'Укажи название шаблона и название секции' ) - ->set_html( '

Шаблон: page-camp.php · Секция: Hero (первый экран)

' ), + Field::make( 'html', 'hero_tab_desc', '' ) + ->set_html( '

Шаблон: page-camp.php · Секция: .hero-media-search

' ), Field::make( 'separator', 'hero_media_sep', 'Изображения' ), Field::make( 'image', 'banner_img', 'Фото на весь экран (десктоп)' ) - ->set_help_text( 'Рекомендуемый размер: 1920×1080 px. Формат: WebP. Дети в движении, эмоции, крупные планы.' ) + ->set_help_text( 'Оптимально: 1920×1080 px, WebP/JPG. Дети в движении, эмоции.' ) ->set_width( 50 ), Field::make( 'separator', 'hero_titles_sep', 'Заголовки и текст' ), Field::make( 'text', 'hero_title_h1', 'Заголовок H1' ) @@ -562,7 +562,7 @@ function add_carbon() { Field::make( 'separator', 'hero_metrics_sep', 'Метрики доверия (блок достижений)' ), Field::make( 'image', 'hero_metric_1_img', 'Иконка метрики 1 (изображение)' ) ->set_width( 30 ) - ->set_help_text( 'Рекомендуемый размер: 58x58 px. PNG/SVG.' ), + ->set_help_text( 'Оптимально: 1200x800px, WebP/JPG' ), Field::make( 'text', 'hero_metric_1_number', 'Число метрики 1' ) ->set_default_value( '90+' ) ->set_width( 30 ), @@ -571,7 +571,7 @@ function add_carbon() { ->set_width( 40 ), Field::make( 'image', 'hero_metric_2_img', 'Иконка метрики 2 (изображение)' ) ->set_width( 30 ) - ->set_help_text( 'Рекомендуемый размер: 58x58 px. PNG/SVG.' ), + ->set_help_text( 'Оптимально: 1200x800px, WebP/JPG' ), Field::make( 'text', 'hero_metric_2_number', 'Число метрики 2' ) ->set_default_value( '570K+' ) ->set_width( 30 ), @@ -580,7 +580,7 @@ function add_carbon() { ->set_width( 40 ), Field::make( 'image', 'hero_metric_3_img', 'Иконка метрики 3 (изображение)' ) ->set_width( 30 ) - ->set_help_text( 'Рекомендуемый размер: 58x58 px. PNG/SVG.' ), + ->set_help_text( 'Оптимально: 1200x800px, WebP/JPG' ), Field::make( 'text', 'hero_metric_3_number', 'Число метрики 3' ) ->set_default_value( '49K+' ) ->set_width( 30 ), @@ -589,46 +589,38 @@ function add_carbon() { ->set_width( 40 ), )) ->add_tab('ℹ️ О нас', array( + Field::make( 'html', 'about_tab_desc', '' ) + ->set_html( '

Секция: .about-us

' ), Field::make( 'separator', 'about_us_sep', 'Текст и фото' ), - Field::make( 'image', 'about_us_img', 'Фото (заглушка: 600×400 px)' ) - ->set_help_text( 'Рекомендуемый размер: 600×400 px. Реальные дети, эмоции, крупные планы. Пока можно залить любую заглушку.' ) + Field::make( 'image', 'about_us_img', 'Фото' ) + ->set_help_text( 'Оптимально: 1200x800px, WebP/JPG. Реальные дети, эмоции.' ) ->set_width( 30 ), - Field::make( 'textarea', 'about_us_text', 'Текст о нас' ) ->set_help_text( 'Краткий текст о лагере. Выводится на странице лагеря после Hero-секции.' ) ->set_default_value( 'Dekart — это сеть детских клубов, где наука, творчество и спорт объединяются в одну захватывающую программу. Мы помогаем детям раскрывать таланты, находить друзей и проводить лето с пользой. Наши вожатые — профессиональные педагоги и наставники, которые создают атмосферу доверия и вдохновения. Каждый день в лагере — это новое открытие.' ), )) ->add_tab('🏭 Преимущества', array( + Field::make( 'html', 'suggestions_tab_desc', '' ) + ->set_html( '

Секция: .suggestions

' ), Field::make( 'complex', 'suggestions', 'Блок «Почему выбирают нас»' ) ->set_layout( 'tabbed-horizontal' ) - ->set_help_text( '3–6 преимуществ с иконкой, заголовком и описанием.' ) + ->set_help_text( '3–6 преимуществ с заголовком и описанием.' ) ->add_fields( array( - Field::make( 'image', 'suggestions_img', 'Изображение' ) - ->set_help_text( 'Рекомендуемый размер: 335×195 px.' ) - ->set_width( 100 ), Field::make( 'text', 'suggestions_title', 'Заголовок' ) ->set_width( 100 ), Field::make( 'textarea', 'suggestions_text', 'Описание' ) ->set_width( 100 ), )), )) - ->add_tab('💰 Программы и цены', array( - Field::make( 'separator', 'pricing_sep', 'Цены на пребывание' ), - Field::make( 'text', 'price_half_day', 'Стоимость за половину дня (в рублях)' ) - ->set_attribute( 'type', 'number' ) - ->set_width( 50 ) - ->set_help_text( 'Цена за 5 дней, например: 12900' ), - Field::make( 'text', 'price_full_day', 'Стоимость за полный день (в рублях)' ) - ->set_attribute( 'type', 'number' ) - ->set_width( 50 ) - ->set_help_text( 'Цена за 5 дней, например: 17900' ), - Field::make( 'separator', 'programs_sep', 'Тематические смены' ), + ->add_tab('📅 Программы', array( + Field::make( 'html', 'programs_tab_desc', '' ) + ->set_html( '

Секция: .programs

' ), Field::make( 'complex', 'programs', 'Список программ (смен)' ) ->set_layout( 'tabbed-horizontal' ) ->set_help_text( 'Добавьте каждую тематическую смену отдельной записью.' ) ->add_fields( array( Field::make( 'image', 'programs_img', 'Изображение смены' ) - ->set_help_text( 'Рекомендуемый размер: 360×350 px.' ) + ->set_help_text( 'Оптимально: 1200x800px, WebP/JPG' ) ->set_width( 100 ), Field::make( 'text', 'programs_title', 'Название смены' ) ->set_width( 50 ) @@ -650,7 +642,21 @@ function add_carbon() { ->set_help_text( 'Полный текст программы для всплывающего окна.' ), )), )) + ->add_tab('💰 Цены', array( + Field::make( 'html', 'pricing_tab_desc', '' ) + ->set_html( '

Секция: .bring-child

' ), + Field::make( 'text', 'price_half_day', 'Стоимость за половину дня (в рублях)' ) + ->set_attribute( 'type', 'number' ) + ->set_width( 50 ) + ->set_help_text( 'Цена за 5 дней, например: 12900' ), + Field::make( 'text', 'price_full_day', 'Стоимость за полный день (в рублях)' ) + ->set_attribute( 'type', 'number' ) + ->set_width( 50 ) + ->set_help_text( 'Цена за 5 дней, например: 17900' ), + )) ->add_tab('👨‍🏫 Наставники', array( + Field::make( 'html', 'mentors_tab_desc', '' ) + ->set_html( '

Секция: .mentors

' ), Field::make( 'complex', 'mentors', 'Список наставников лагеря' ) ->set_layout( 'tabbed-horizontal' ) ->set_help_text( 'Каждый наставник — отдельная запись.' ) @@ -658,6 +664,7 @@ function add_carbon() { Field::make( 'text', 'mentor_name', 'ФИО наставника' ) ->set_width( 50 ), Field::make( 'image', 'mentor_foto', 'Фото наставника' ) + ->set_help_text( 'Оптимально: 1200x800px, WebP/JPG' ) ->set_width( 50 ), Field::make( 'text', 'mentor_job', 'Должность в лагере' ) ->set_width( 100 ), @@ -666,6 +673,8 @@ function add_carbon() { )) )) ->add_tab('⏰ Распорядок дня', array( + Field::make( 'html', 'routine_tab_desc', '' ) + ->set_html( '

Секция: .routine

' ), Field::make( 'complex', 'routine', 'Расписание по времени' ) ->set_help_text( 'Добавьте пункты распорядка по порядку следования.' ) ->add_fields( array( @@ -680,20 +689,19 @@ function add_carbon() { )) )) ->add_tab('📷 Фотографии', array( + Field::make( 'html', 'fotos_tab_desc', '' ) + ->set_html( '

Секция: .foto

' ), Field::make( 'complex', 'fotos', 'Галерея фотографий' ) ->set_layout( 'tabbed-horizontal' ) ->set_help_text( 'Добавьте реальные фото детей из лагеря. Формат: WebP, 1:1 или 4:3.' ) ->add_fields( array( Field::make( 'image', 'foto', 'Фотография' ) - ->set_help_text( 'Оптимальный размер: 1200x800px, до 300Кб' ), + ->set_help_text( 'Оптимально: 1200x800px, WebP/JPG, до 300Кб' ), )), - Field::make( 'separator', 'fotos_extra_sep', 'Дополнительно' ), - Field::make( 'rich_text', 'fotos_content', 'Текст под галереей' ), - Field::make( 'text', 'fotos_link_vk', 'Ссылка на альбом ВКонтакте' ) - ->set_default_value('#') - ->set_help_text( 'Ссылка на альбом с большим количеством фото в сообществе.' ), )) ->add_tab('❓ Вопросы и ответы (FAQ)', array( + Field::make( 'html', 'faq_tab_desc', '' ) + ->set_html( '

Секция: .camp-faq

' ), Field::make( 'complex', 'questions', 'Список вопросов и ответов' ) ->set_layout( 'tabbed-horizontal' ) ->set_help_text( 'Чем больше вопросов, тем меньше возражений у родителей. Минимум 7–8 вопросов.' ) @@ -705,6 +713,8 @@ function add_carbon() { )), )) ->add_tab('📍 Контакты и карта', array( + Field::make( 'html', 'contacts_tab_desc', '' ) + ->set_html( '

Секция: .camp-contact

' ), Field::make( 'separator', 'contacts_main_sep', 'Контактная информация' ), Field::make( 'text', 'contact_tel', 'Телефон' ) ->set_width( 50 ) @@ -725,33 +735,15 @@ function add_carbon() { Field::make( 'text', 'social_media_name', 'Название' ) ->set_width( 100 ), Field::make( 'image', 'social_media_img', 'Иконка/логотип' ) + ->set_help_text( 'Оптимально: 1200x800px, WebP/JPG' ) ->set_width( 20 ), Field::make( 'text', 'social_media_link', 'Ссылка' ) ->set_width( 80 ), )), )) - ->add_tab('🚩 Дополнительные баннеры', array( - Field::make( 'separator', 'banner1_sep', 'Баннер №1 (между программами и ценами)' ), - Field::make( 'image', 'banner_add_img', 'Фоновое изображение баннера №1' ) - ->set_width( 50 ) - ->set_help_text( 'Рекомендуемый размер: 1200×400 px.' ), - Field::make( 'text', 'banner_add_title', 'Заголовок баннера №1' ) - ->set_width( 50 ), - Field::make( 'textarea', 'banner_add_text', 'Текст баннера №1' ) - ->set_width( 100 ), - Field::make( 'text', 'banner_add_text_min', 'Сноска под кнопкой №1' ) - ->set_help_text( 'Маленький текст под кнопкой баннера.' ), - Field::make( 'separator', 'banner2_sep', 'Баннер №2 (после отзывов)' ), - Field::make( 'image', 'banner_add_img2', 'Фоновое изображение баннера №2' ) - ->set_width( 50 ), - Field::make( 'text', 'banner_add_title2', 'Заголовок баннера №2' ) - ->set_width( 50 ), - Field::make( 'textarea', 'banner_add_text2', 'Текст баннера №2' ) - ->set_width( 100 ), - Field::make( 'text', 'banner_add_text_min2', 'Сноска под кнопкой №2' ) - ->set_help_text( 'Маленький текст под кнопкой баннера.' ), - )) ->add_tab('🗂️ Битрикс24', array( + Field::make( 'html', 'bitrix_tab_desc', '' ) + ->set_html( '

Секция: .modal-camp-request-form

' ), Field::make( 'textarea', 'camp_bitrix_script', 'Скрипт формы Битрикс24' ) ->set_help_text( 'Вставьте полный JS-код интеграции с CRM-формой Битрикс24. Выводится в модальном окне заявки.' ), ));