/* ========================================================================== */ /* =========================== KRASNOVA - ОБЩИЕ СТИЛИ ======================= */ /* ========================================================================== */ .js-block-header-descr { padding-bottom: 0px !important; } /* Скрытое поле в корзине для передачи расписания */ textarea[name="schedule2"] { display: none !important; } .kr-course-loading { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 18px 20px 60px; font-family: Manrope, Arial, sans-serif; background: #212121; border-radius: 0; border: 0; box-shadow: none; min-height: 82px; box-sizing: border-box; } .kr-course-loading-head { font-size: 14px; line-height: 1.3; color: rgba(255,255,255,0.9); margin-bottom: 10px; text-align: center; max-width: 620px; margin-left: auto; margin-right: auto; } .kr-course-loading-bar { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.18); overflow: hidden; max-width: 620px; margin-left: auto; margin-right: auto; } .kr-course-loading-fill { position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: 999px; background: linear-gradient(90deg, #fde047 0%, #84cc16 100%); animation: krCourseLoading 1.1s ease-in-out infinite; } @keyframes krCourseLoading { 0% { transform: translateX(-120%); } 100% { transform: translateX(300%); } } @media (max-width: 640px) { .kr-course-loading { padding: 16px 14px; min-height: 76px; } .kr-course-loading-head { font-size: 13px; } } /* ========================================================================== */ /* ====================== KRASNOVA - СТИЛИ ТОЛЬКО ДЛЯ ГЛАВНОЙ =============== */ /* ========================================================================== */ /* Эти стили сработают только если JS добавит на класс .kr-homepage */ /* Карточки t778 - выравнивание описания по левому краю на мобильных */ @media screen and (max-width: 768px) { html.kr-homepage .t778__descr { text-align: left !important; } } /* Отступ кнопки по краям на ПК */ @media screen and (min-width: 981px) { html.kr-homepage #rec1655927031 .t943__buttonwrapper { padding-left: 400px !important; padding-right: 400px !important; box-sizing: border-box; } } /* На главной скрываем store 1025 */ html.kr-homepage .uc-courses-inv, html.kr-homepage .t1025, html.kr-homepage div[data-record-type="1025"] { display: none !important; height: 0 !important; overflow: hidden !important; } /* Контейнер для пилюль на главной */ html.kr-homepage .course-pills { position: absolute; top: 14px; right: 14px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; } /* Мобилка */ @media screen and (max-width: 768px) { html.kr-homepage .course-pills { bottom: 14px; top: auto; right: 14px; } } /* Чтобы absolute у пилюль работал корректно */ html.kr-homepage .t778__imgwrapper { position: relative !important; overflow: hidden !important; } /* Базовая пилюля */ html.kr-homepage .course-pill { display: inline-flex !important; align-items: center !important; justify-content: center; height: 34px; min-width: 150px; padding: 0 16px !important; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-family: Manrope, Arial, sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap; box-sizing: border-box; background: rgba(255,255,255,0.8) !important; opacity: 0; transform: translateY(6px); animation: pillFade 0.4s ease forwards; } html.kr-homepage .course-pill:nth-child(2) { animation-delay: 0.08s; } html.kr-homepage .course-pill:nth-child(3) { animation-delay: 0.16s; } /* Мобилка */ @media screen and (max-width: 768px) { html.kr-homepage .course-pill { height: 30px; min-width: 150px; font-size: 13px !important; } } /* Цвета пилюль */ html.kr-homepage .course-pill.is-open { color: #16a34a !important; } html.kr-homepage .course-pill.is-places-green { color: #16a34a !important; } html.kr-homepage .course-pill.is-places-yellow { color: #ca8a04 !important; } html.kr-homepage .course-pill.is-places-red { color: #dc2626 !important; } html.kr-homepage .course-pill.is-start { color: #16a34a !important; } /* Точка в пилюле "набор открыт" */ html.kr-homepage .course-pill .dot { width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #22c55e !important; animation: pulseDot 1.6s infinite; } /* Waitlist bar под кнопками на главной */ html.kr-homepage .course-wl { margin-top: 10px; text-align: center; font-family: Manrope, Arial, sans-serif; } html.kr-homepage .course-wl-head { font-size: 12px; line-height: 1.2; color: rgba(0,0,0,0.55); margin-bottom: 6px; } html.kr-homepage .course-wl-bar { position: relative; height: 8px; border-radius: 999px; background: rgba(0,0,0,0.08); overflow: hidden; } html.kr-homepage .course-wl-fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 999px; transition: width .35s ease, background .35s ease; } #kr-lang-modal-overlay { position: fixed; inset: 0; background: rgba(8, 10, 18, 0.58); backdrop-filter: blur(3px); z-index: 10020; display: none; align-items: center; justify-content: center; padding: 18px; } #kr-lang-modal-overlay.is-open { display: flex; } #kr-lang-modal { width: min(560px, 100%); background: #ffffff; color: #10131f; border-radius: 20px; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28); border: 1px solid rgba(16, 19, 31, 0.08); padding: 28px 24px 22px; position: relative; transform: translateY(8px) scale(0.98); opacity: 0; transition: transform .22s ease, opacity .22s ease; font-family: Manrope, Arial, sans-serif; } #kr-lang-modal-overlay.is-open #kr-lang-modal { transform: translateY(0) scale(1); opacity: 1; } .kr-lang-modal-close { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; width: 36px; height: 36px; border-radius: 10px; font-size: 24px; line-height: 1; color: #4f5b77; cursor: pointer; } .kr-lang-modal-close:hover { background: rgba(79, 91, 119, 0.1); } .kr-lang-modal-title { margin: 0 28px 10px 0; font-size: 30px; line-height: 1.15; font-weight: 700; color: #171b2d; } .kr-lang-modal-text { margin: 0; font-size: 16px; line-height: 1.45; color: #4f5b77; } .kr-lang-modal-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; width: 100%; } .kr-lang-btn { border: 0; border-radius: 999px; padding: 12px 18px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: Manrope, Arial, sans-serif; box-sizing: border-box; max-width: 100%; } .kr-lang-btn-secondary { background: #f3f6fb; color: #243050; } .kr-lang-btn-primary { background-image: linear-gradient(140deg, #ff418f 0%, #ff549a 100%); color: #ffffff; box-shadow: 0 8px 24px rgba(255, 65, 143, 0.35); } @media (max-width: 620px) { #kr-lang-modal { padding: 22px 18px 18px; border-radius: 16px; } .kr-lang-modal-title { font-size: 24px; } .kr-lang-modal-actions { flex-direction: column; } .kr-lang-btn { width: 100%; } } /* Waitlist widget под формой листа ожидания */ #waitlist-widget .wl { max-width: 620px; margin: 15px auto 0; padding: 0 20px; font-family: Manrope, Arial, sans-serif; } #waitlist-widget .wl-head { font-size: 12px; line-height: 1.2; color: #ffffff; margin-bottom: 6px; } #waitlist-widget .wl-head b { font-weight: 700; } #waitlist-widget .wl-bar { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.28); overflow: hidden; } #waitlist-widget .wl-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: hsl(50 95% 50%); border-radius: 999px; transition: width .35s ease, background .35s ease; } @media (max-width: 420px) { #waitlist-widget .wl { padding: 0 15px; } #waitlist-widget .wl-head { font-size: 14px; } } /* Анимации */ @keyframes pillFade { to { opacity: 1; transform: translateY(0); } } @keyframes pulseDot { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }