/* ================================================================ home-responsive.css Responsive styles for index.html ONLY. Connected exclusively in index.html after styles.css. Reference: 1920px desktop (styles.css — untouched, never modified). All rules below are max-width — 1920px desktop is never affected. Breakpoint ladder: ≤ 1600px Large screens ≤ 1440px 1440p widescreen ≤ 1366px Laptop 1366×768 ≤ 1280px Small desktop / large laptop ≤ 1024px Tablet landscape / small desktop ≤ 834px iPad Pro portrait ≤ 768px Mobile — switches nav to burger ≤ 640px Small tablet / large phone landscape ≤ 480px Small mobile ≤ 430px iPhone Pro Max / Plus ≤ 390px iPhone 14 Pro / 15 Pro ≤ 375px iPhone SE / 8 ≤ 360px Common Android ≤ 320px Very small phones ================================================================ */ /* ================================================================ GLOBAL — Burger button (hidden on real desktop) ================================================================ */ .header__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; width: 40px; height: 40px; flex-shrink: 0; } .header__burger span { display: block; width: 24px; height: 2px; background: #0C3249; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } .header__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .header__burger.is-open span:nth-child(2) { opacity: 0; } .header__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ================================================================ GLOBAL — Mobile menu (hidden on real desktop) ================================================================ */ .mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 98; background: #fff; padding: 80px 24px 40px; flex-direction: column; transform: translateX(-100%); transition: transform 0.35s ease; } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu__nav { display: flex; flex-direction: column; gap: 4px; } .mobile-menu__link { font-size: 20px; font-weight: 500; color: #0C3249; text-decoration: none; padding: 14px 0; border-bottom: 1px solid #F3F4F6; transition: color 0.2s; } .mobile-menu__link--active, .mobile-menu__link:hover { color: #CF031D; } .mobile-menu__cta { display: flex; align-items: center; justify-content: center; margin-top: 28px; padding: 16px 32px; border-radius: 44px; background: #CF031D; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; transition: opacity 0.2s; } .mobile-menu__cta:hover { opacity: 0.9; } /* ================================================================ ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ — EM-BASED AUTO-SCALING Каждый элемент привязан к font-size своего родительского текста и масштабируется вместе с ним на всех брейкпоинтах. Значения em рассчитаны из desktop (styles.css): ratio = px / font-px. ================================================================ */ /* Hero title badge: em от hero__title (desktop 64px) */ .hero__title span::before { height: 1.21em; /* 77.7 / 64 */ top: 0.08em; /* 5 / 64 */ left: -0.36em; /* 23 / 64 */ } /* Why badge: em scaling removed — badge uses inset: 0 and is self-centering */ /* Game badge overlay: em от game__title (desktop 44px) */ .game__badge-bg { left: -0.36em; /* 16 / 44 */ } /* Game sticker: em от game__title (desktop 44px) */ .game__sticker { width: 1.41em; /* 62 / 44 */ top: -0.41em; /* 18 / 44 */ right: -0.68em; /* 30 / 44 */ } /* Courses title highlight: em от courses__title (desktop 44px) */ .courses__title-hl-bg { height: 1.23em; /* 54 / 44 */ left: -0.32em; /* 14 / 44 */ right: -0.32em; transform: translateY(calc(-50% + 0.11em)) translateX(0.16em); } /* Courses stars: em от courses__title (desktop 44px) */ .courses__stars .star-big { width: 0.86em; height: 0.86em; /* 38 / 44 */ top: -0.91em; /* 40 / 44 */ } .courses__stars .star-small { width: 0.48em; height: 0.48em; /* 21 / 44 */ top: -1.36em; /* 60 / 44 */ left: -0.14em; /* 6 / 44 */ } /* Reviews title highlight: em от reviews__title (desktop 44px) */ .reviews__title-hl-bg { height: 1.48em; /* 65 / 44 */ left: -0.23em; /* 10 / 44 */ right: -0.23em; transform: translateY(calc(-50% + 0.07em)); } /* Form title highlight: em от form__title (desktop 22px) */ .form__title-hl-bg { height: 1.68em; /* 37 / 22 */ } /* Form stars: em от form__title (desktop 22px) */ .form__stars .star-big { width: 1.27em; height: 1.27em; /* 28 / 22 */ top: -0.09em; /* 2 / 22 */ } .form__stars .star-small { width: 0.82em; height: 0.82em; /* 18 / 22 */ top: -0.45em; /* 10 / 22 */ } /* Mobile line-break helpers (hero title 3-line split) */ .hero__br { display: none; } /* Mobile-only bonus stars — hidden on desktop */ .hero__bonus-star { display: none; } /* ================================================================ ≤ 1600px Large screens — subtle scaling from 1920 baseline ================================================================ */ @media (max-width: 1600px) { /* Hero */ .hero > .container { padding-left: 20px; } .hero__wrapper { max-width: 580px; padding-top: 160px; } .hero__title { font-size: 58px; line-height: 64px; } .hero__description { font-size: 17px; margin-bottom: 52px; } .hero__buttons-try, .hero__buttons-format { padding: 16px 26px; } /* About */ .about__us { padding-top: 180px; padding-bottom: 120px; } .hero__center-title { font-size: 40px; line-height: 54px; } .hero__center-desc { font-size: 20px; } /* Why Us */ .why__us { padding: 180px 0; } .why__us-title { font-size: 42px; line-height: 56px; } .why__us-card { padding: 44px 28px 70px; } .why__us-cards__title { font-size: 28px; } /* Game */ .game { padding: 110px 0; } .game__title { font-size: 42px; } /* Courses */ .courses { padding: 110px 0 160px; } .courses__title { font-size: 42px; } .courses__list { gap: 28px; } /* Reviews */ .reviews__title { font-size: 42px; } /* Form */ .form { padding: 160px 120px; } /* Decorative elements */ .hero__title span::before { width: 365px; } .hero__center-badge svg { width: 212px; height: 64px; } .hero__deco-star--big { width: 31px; height: 27px; left: calc(50% - 424px); top: 206px; } .hero__deco-star--small { width: 18px; height: 16px; left: calc(50% - 387px); top: 203px; } .course-card__pic { top: -36px; right: 32px; } /* Footer */ .footer__col--nav { margin-left: 220px; } .reviews__title-hl-bg{ width: 230px; } .reviews__title-hl { margin-left: 5px; } .reviews-hero__deco--1{top: 250px;} .reviews-hero__deco--2{top: 230px;} .reviews-hero__deco--3{top: 330px;} } /* ================================================================ ≤ 1440px Common widescreen ================================================================ */ @media (max-width: 1440px) { /* Hero */ .hero > .container { padding-left: 100px; } .hero__deco-arrow { display: none; } .hero__wrapper { max-width: 560px; padding-top: 150px; margin-left: 50px; } .hero__title { font-size: 54px; line-height: 60px; } .hero__description { font-size: 16px; margin-bottom: 44px; } .hero__buttons-try, .hero__buttons-format { padding: 15px 24px; } /* About */ .about__us { padding-top: 160px; padding-bottom: 100px; } .hero__center-title { font-size: 38px; line-height: 50px; } .hero__center-desc { font-size: 19px; line-height: 30px; } /* Why Us */ .why__us { padding: 160px 0; } .why__us-title { font-size: 40px; line-height: 54px; } .why__us-card { padding: 40px 26px 64px; border-radius: 52px; } .why__us-cards__title { font-size: 26px; } .why__us-cards__subtitle { font-size: 18px; } /* Game */ .game { padding: 100px 0; } .game__title { font-size: 40px; } /* Courses */ .courses { padding: 100px 0 140px; } .courses__title { font-size: 40px; } .courses__title-hl-bg { width: 215px; } .courses__stars { margin-left: -24px; } .courses__stars .star-big { top: -1.04em; left: 0.13em; } .courses__stars .star-small { top: -1.49em; left: -0.01em; } .hero__title span::before { width: 215px; } .courses-page__header .hero__title span::before { width: 215px; } .courses__list { gap: 24px; } .course-card { padding: 28px 36px; border-radius: 36px; } .course-card__title { font-size: 30px; } /* Reviews */ .reviews__title { font-size: 40px; } /* Form */ .form { padding: 140px 80px; } .form__right { max-width: 430px; padding: 52px 42px; } .form__headline{ font-size: 34px; } /* Decorative elements */ .hero__center-badge svg { width: 200px; height: 60px; } .hero__deco-star--big { width: 29px; height: 25px; left: calc(50% - 344px); top: 196px; } .hero__deco-star--small { width: 17px; height: 15px; left: calc(50% - 307px); top: 193px; } .course-card__pic { top: -34px; right: 28px; } .courses-hero__stars{ margin-left: -50px; } /* Footer */ .footer__col--nav { margin-left: 180px; } .why__badge::before, .reviews__title-hl-bg{ width: 220px; } .reviews-hero__deco--1{top: 220px;} .reviews-hero__deco--2{top: 210px;} .reviews-hero__deco--3{top: 310px;} } /* ================================================================ ≤ 1366px Laptop 1366×768 ================================================================ */ @media (max-width: 1366px) { /* Hero */ .hero > .container { padding-left: 190px; } .hero__wrapper { max-width: 530px; padding-top: 140px; margin-left: 0; } .hero__title { font-size: 50px; line-height: 56px; } .hero__description { font-size: 16px; margin-bottom: 40px; } /* About */ .about__us { padding-top: 140px; padding-bottom: 90px; } .hero__center-title { font-size: 36px; line-height: 48px; } .hero__center-desc { font-size: 18px; line-height: 28px; } /* Why Us */ .why__us { padding: 140px 0; } .why__us-title { font-size: 38px; line-height: 52px; } .why__us-subtitle { font-size: 16px; } .why__us-card { padding: 36px 24px 58px; border-radius: 48px; } .why__us-cards__title { font-size: 24px; margin-bottom: 20px; } .why__us-cards__subtitle { font-size: 17px; } /* Game */ .game { padding: 90px 0; } .game__title { font-size: 38px; } .game__desc { font-size: 16px; } /* Courses */ .courses { padding: 90px 0 120px; } .courses__title { font-size: 38px; } .courses__list { gap: 20px; } .course-card { padding: 26px 30px; border-radius: 32px; } .course-card__title { font-size: 28px; line-height: 32px; } /* Reviews */ .reviews__title { font-size: 38px; } /* Form */ .form { padding: 120px 60px; } .form__right { max-width: 400px; padding: 48px 36px; } .form__headline{ font-size: 32px; } .form__card { padding: 56px; } /* Decorative elements */ .hero__title span::before { width: 314px; } .hero__center-badge svg { width: 190px; height: 57px; } .hero__deco-star--big { width: 27px; height: 23px; left: calc(50% - 314px); top: 186px; } .hero__deco-star--small { width: 16px; height: 14px; left: calc(50% - 277px); top: 183px; } .course-card__pic { top: -32px; right: 26px; } /* Footer */ .footer__col--nav { margin-left: 140px; } .footer__col--contacts { margin-left: 40px; } } /* ================================================================ ≤ 1280px Small desktop / large laptop Container starts hitting viewport edge → add horizontal padding. ================================================================ */ @media (max-width: 1280px) { /* Container: safety padding so content isn't flush to edges */ .container { padding-left: 20px; padding-right: 20px; } /* Hero — push wrapper right so ::before stays within viewport */ .hero > .container { padding-left: 210px; padding-right: 0; } .hero__wrapper { max-width: 500px; padding-top: 130px;} .hero__title { font-size: 46px; line-height: 52px; } .hero__description { font-size: 15px; margin-bottom: 36px; } .hero__buttons-try, .hero__buttons-format { padding: 14px 22px; font-size: 15px; } /* About */ .about__us { padding-top: 120px; padding-bottom: 80px; } .hero__center-title { font-size: 34px; line-height: 46px; } .hero__center-desc { font-size: 17px; line-height: 26px; } .logo-animated { width: min(460px, 85vw); } /* Why Us */ .why__us { padding: 120px 0; } .why__us-title { font-size: 36px; line-height: 50px; } .why__us-subtitle { font-size: 15px; } .why__us-left { max-width: 240px; } .why__us-card { padding: 32px 22px 52px; border-radius: 44px; } .why__us-cards__title { font-size: 22px; margin-bottom: 18px; } .why__us-cards__subtitle { font-size: 16px; line-height: 24px; } /* Game */ .game { padding: 80px 0; } .game__header { margin-bottom: 48px; } .game__title { font-size: 36px; } .game__desc { font-size: 15px; } .game__word-pinyin { font-size: 24px; } .game__word-chars { font-size: 30px; } /* Courses */ .courses { padding: 80px 0 100px; } .courses__title { font-size: 36px; line-height: 48px; } .courses__list { gap: 20px; } .course-card { padding: 24px 28px; border-radius: 30px; } .course-card__title { font-size: 26px; line-height: 30px; } .course-card__desc { font-size: 15px; } /* Reviews */ .reviews__title { font-size: 36px; line-height: 50px; } .reviews__track { gap: 28px; } .review-card { width: 320px; height: 530px; border-radius: 34px; padding: 26px 26px 22px; } .review-card.is-side { margin: 0 -45px; } .review-card__name { font-size: 17px; margin-bottom: 26px; } .review-card__text { font-size: 14px; max-height: 252px; } .reviews__controls { max-width: 320px; } /* Form */ .form { padding: 100px 40px; } .form__card { padding: 48px; } .form__right { max-width: 370px; padding: 44px 32px; } .form__headline{ font-size: 30px; } .form__sub { font-size: 14px; } /* Decorative elements */ .hero__title span::before { width: 190px; height: 70px;} .courses-page__header .hero__title span::before { width: 190px; height: 70px;} .hero__deco-star { display: none; } .hero__center-badge { vertical-align: middle; } .hero__center-badge svg { width: 172px; height: 54px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .course-card__pic { top: -30px; right: 22px; } /* Footer */ .footer__col--nav { margin-left: 100px; } .footer__col--contacts { margin-left: 36px; } .reviews__title-hl-bg{ width: 200px; } .reviews-hero__deco--1{top: 200px; left: calc(50% - 200px);} .reviews-hero__deco--2{top: 185px; left: calc(50% - 170px);} .reviews-hero__deco--3{top: 280px; left: calc(50% + 150px);} .reviews-stories__success{margin-left: 10px;} } /* ================================================================ ≤ 1200px 2-card slider layout ================================================================ */ @media (max-width: 1200px) { /* Reviews — 2 visible cards */ .reviews__track { gap: 40px; } .review-card { width: 300px; height: 565px; border-radius: 36px; padding: 28px 28px 24px; } .review-card.is-side { transform: scale(0.72); margin: 0 -59px; } .review-card__name { font-size: 18px; margin-bottom: 28px; } .review-card__text { font-size: 15px; max-height: 268px; } .reviews__controls { max-width: 420px; } } /* ================================================================ ≤ 1024px Tablet landscape / small desktop ================================================================ */ @media (max-width: 1024px) { /* Global overflow protection */ html { overflow-x: hidden; } body { overflow-x: hidden; max-width: 100%; } img, svg, video, canvas, iframe { max-width: 100%; } /* Container */ .container { padding-left: 24px; padding-right: 24px; } /* Smooth wrapper — disable GSAP ScrollSmoother, use native scroll */ #smooth-wrapper { position: relative !important; height: auto !important; overflow: visible !important; top: auto !important; left: auto !important; width: 100% !important; } #smooth-content { overflow: visible !important; will-change: auto !important; transform: none !important; } /* Header */ .header__nav { gap: 0; } .header__link { padding: 8px 10px; font-size: 14px; } .header__cta { padding: 10px 20px; font-size: 14px; } /* Hero — mobile card layout from 1024px */ .hero { min-height: auto; padding-top: 0; display: block; overflow: hidden; background-position: center 30px; background-size: 100% 520px; } .hero > .container { display: block; padding: 0; } .hero__wrapper { max-width: 100%; width: 100%; padding: 40px 20px 48px; min-height: auto; align-self: auto; border-radius: 20px 20px 0 0; margin-top: 500px; } .hero__wrapper::before, .hero__wrapper::after { display: none; } .hero__bonus { margin-bottom: 20px; } .hero__title { font-size: 44px; line-height: 50px; letter-spacing: -1px; margin-bottom: 18px; } .hero__title span { margin-left: 10px; } .hero__title span::before { width: 160px; height: 54.847px; margin-left: 5px; } .courses-page__header .hero__title span::before { width: 160px; height: 54.847px; margin-left: 5px; } .hero__description { font-size: 15px; margin-bottom: 36px; } .hero__buttons-try, .hero__buttons-format { width: 100%; justify-content: center; text-align: center; padding: 16px 24px; } .course-card__pic { top: -28px; right: 20px; } /* About */ .hero__center-label { max-width: 90vw; } .hero__center-title { font-size: 36px; line-height: 42px; } .hero__center-desc { font-size: 16px; } .hero__center-badge svg { width: 160px; height: 48px; } /* Why Us */ .why__us { padding: 100px 0; } .why__us-wrapper { flex-direction: column; gap: 48px; } .why__us-left { max-width: 100%; display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; } .why__us-svg { grid-column: 1; grid-row: 1; margin-bottom: 0; align-self: center; margin-right: 5px; } .why__us-title { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; } .why__us-subtitle { grid-column: 2; grid-row: 2; max-width: 400px;} .why__badge::before { width: calc(100% + 22px); } .why__us-slider { height: 460px; } .why__us-track { height: 460px; } .why__us-card { transform: none !important; position: relative !important; top: auto !important; width: 360px; height: 370px; padding: 28px 20px 44px; } .why__us-card--active { width: 520px; height: 460px; } .why__us-cards__icon img { width: 90px; height: 90px; } .why__us-card--active .why__us-cards__icon img { width: 200px; height: 160px; } .why__us-card--active .why__us-cards__title { font-size: 24px; } .why__us-card--active .why__us-cards__subtitle { font-size: 16px; line-height: 24px; } /* Game */ .game__word { display: flex; justify-content: center; align-items: flex-end; gap: 16px; } .game__word::before { content: ''; width: 50px; flex-shrink: 0; } .game__sound { position: static; flex-shrink: 0; } /* Courses */ .courses__title-hl { margin-left: 6px; } .courses__title-hl-bg { top: 50% !important; left: 50% !important; right: auto !important; width: calc(100% + 22px) !important; transform: translate(-50%, calc(-50% + 4px)) !important; max-width: none !important; } .courses__list { grid-template-columns: repeat(2, 1fr); gap: 60px 24px; } .indiv-card__header { padding: 0 40px; } .indiv-card__body { padding: 0 32px; } .indiv-card__chars { right: 30px; } /* Form */ .form { padding: 80px 40px; } .form__card { padding: 48px; } .form__right { max-width: 360px; } /* Reviews */ .reviews__title-hl-bg { top: 50% !important; left: 50% !important; right: auto !important; width: 195px !important; max-width: none; transform: translate(-50%, -50%) !important; } .reviews__track { gap: 32px; } .review-card { height: 540px; border-radius: 34px; padding: 26px 26px 22px; } .review-card.is-side { transform: scale(0.72); margin: 0 -53px; } .review-card__name { font-size: 17px; margin-bottom: 26px; } .review-card__text { font-size: 15px; max-height: 256px; } .reviews__controls { max-width: 380px; } /* Footer */ .footer__col--nav { margin-left: 60px; } .footer__col--contacts { margin-left: 32px; } .courses-hero__stars{ margin-left: 40px; } .reviews-hero__blob{ max-width: 235px; } .reviews-stories__blob{ max-width: none; } .courses-faq__title-badge svg{ width: calc(100% + 16px); height: 100%; } } /* ================================================================ ≤ 834px iPad Pro / large tablet portrait ================================================================ */ @media (max-width: 834px) { .hero { background-size: 100% 480px; } .hero__wrapper { margin-top: 460px; } .hero__title { font-size: 42px; line-height: 48px; } .hero__description { font-size: 14px; } .hero__title span::before { width: 262px; } /* About */ .hero__center-badge svg { width: 130px; height: 40px; } .hero__center-badge > span { font-size: 15px; } .hero__center-desc { font-size: 15px; line-height: 24px; } /* Why Us */ .why__us-cards { gap: 28px; } /* Courses */ .courses__list { grid-template-columns: repeat(2, 1fr); gap: 56px 20px; } /* Form */ .form { padding: 60px 32px; } .form__card { padding: 40px 32px; } .form__right { max-width: 320px; } .form__headline{ font-size: 28px; } /* Reviews */ .reviews__track { gap: 28px; } .review-card { height: 520px; border-radius: 32px; padding: 24px 24px 20px; } .review-card.is-side { transform: scale(0.72); margin: 0 -48px; } .review-card__name { font-size: 16px; margin-bottom: 24px; } .review-card__text { font-size: 15px; max-height: 246px; } .reviews__controls { max-width: 340px; } /* Footer */ .footer__col--nav { margin-left: 40px; } .footer__col--contacts { margin-left: 20px; } } /* ================================================================ ≤ 768px Mobile — burger nav, full single-column layout ================================================================ */ @media (max-width: 768px) { /* Global overflow guard */ html { overflow-x: hidden; } body { overflow-x: hidden; max-width: 100%; } .container { padding-left: 20px; padding-right: 20px; } /* ── Header → burger mode ─────────────────────────────── */ .header__nav { display: none; } .header__cta { display: none; } .header__burger { display: flex; } .header_wrapper { padding: 14px 0; gap: 0; } .header__logo img { height: 30px; } /* Mobile menu becomes visible */ .mobile-menu { display: flex; } /* ── Smooth wrapper reset ─────────────────────────────── */ #smooth-wrapper { position: relative !important; height: auto !important; overflow: visible !important; top: auto !important; left: auto !important; width: 100% !important; } #smooth-content { overflow: visible !important; will-change: auto !important; transform: none !important; } /* ── Hero ─────────────────────────────────────────────── */ .hero { min-height: auto; padding-top: 0; display: block; overflow: hidden; background-position: center 30px; background-size: 100% 430px; } .hero > .container { display: block; padding: 0; } .hero__wrapper { max-width: 100%; width: 100%; padding: 40px 20px 48px; min-height: auto; align-self: auto; border-radius: 20px 20px 0 0; margin-top: 410px; } .hero__wrapper::before, .hero__wrapper::after { display: none; } .hero__deco-arrow { display: none; } .hero__deco-star { display: none; } .hero__bonus { position: relative; } .hero__bonus-star { display: none; } .hero__bonus-star--big { display: block; position: absolute; width: 22px; height: 19px; top: -14px; right: -20px; } .hero__bonus-star--small { display: block; position: absolute; width: 13px; height: 11px; top: -20px; right: -30px; } .hero__bonus { margin-bottom: 20px; } /* Hero title — 3 строки начиная с 768px, шрифт по Figma */ .hero__title { font-size: 44px; font-style: normal; font-weight: 800; line-height: 48px; letter-spacing: -1px; margin-bottom: 18px; } .hero__title span{ margin-left: 10px; } /* Плашка «китайский?»: Figma 284.199 × 54.847 px span height = padding-top(4) + line-height(36) + padding-bottom(8) = 48px top = −(54.847 − 48) / 2 ≈ −3px */ .hero__title span::before { width: 265px; height: 54.847px; margin-left: 5px; } .hero__description { font-size: 15px; margin-bottom: 32px; } .hero__buttons-try, .hero__buttons-format { width: 100%; justify-content: center; text-align: center; padding: 16px 24px; } .logo-part-top { transform: translateY(-40px); } .logo-part-bottom { top: calc(100% * 130 / 784 + 10px); transform: translateX(40px); } /* ── About / Logo ─────────────────────────────────────── */ .about__us { min-height: auto; padding-top: 40px; padding-bottom: 60px; flex-direction: column; align-items: center; gap: 24px; } .about__us .container { order: 1; width: 100%; } .hero__center-label { position: relative; top: auto; left: auto; transform: none; order: 2; pointer-events: auto; width: 100%; max-width: 100%; padding: 0 20px; text-align: center; margin-top: 10px; } .logo-animated { width: min(220px, 68vw); margin: 0 auto; } .hero__center-title { gap: 6px; } .hero__center-badge { padding: 4px 22px; } .hero__center-badge svg { width: 155.939px; height: 44.849px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .hero__center-badge > span { font-size: 34px; } .hero__center-desc { font-size: 15px; line-height: 24px; } .hero__center-desc br { display: none; } /* ── Why Us ───────────────────────────────────────────── */ .why__us { padding: 60px 0; } .why__us-wrapper { flex-direction: column; gap: 32px; } .why__us-left { max-width: 100%; } .why__us-svg { margin-bottom: 20px; } .why__us-title { display: flex; gap: 5px; align-items: baseline; } .why__us-subtitle{ font-size: 15px; margin-top: 12px; } .why__us-card { border-radius: 32px; padding: 24px 18px 32px; transform: none !important; position: relative !important; top: auto !important; width: 300px; height: 350px; } .why__us-slider { height: 420px; } .why__us-track { height: 420px; } .why__us-card--active { width: 420px; height: 420px; } .why__us-cards__icon img { width: 80px; height: 80px; } .why__us-card--active .why__us-cards__icon img { width: 180px; height: 144px; } .why__us-cards__title { font-size: 16px; margin-bottom: 8px; } .why__us-cards__subtitle { font-size: 13px; line-height: 19px; } .why__us-card--active .why__us-cards__title { font-size: 20px; margin-bottom: 12px; } .why__us-card--active .why__us-cards__subtitle { font-size: 15px; line-height: 22px; } .reviews__nav { flex-shrink: 0; aspect-ratio: 1 / 1; } .reviews__nav svg { width: 27%; height: 45%; } .reviews__nav--prev { margin-right: 16px; } .why__badge{ max-width: 160px; margin-left: 10px; margin-right: 10px; } /* ── Game ─────────────────────────────────────────────── */ .game { padding: 60px 0; } .game__header { margin-bottom: 32px; } .game__title { margin-bottom: 16px; } .game__desc { font-size: 14px; line-height: 22px; margin-bottom: 32px; } .game__desc br { display: none; } .game__word { display: flex; align-items: flex-end; gap: 20px; } .game__sound { position: static; } .game__word-pinyin { font-size: 20px; } .game__word-chars { font-size: 26px; } .game__field-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 32px; max-width: 100%; } .game__cta { padding: 16px 28px; font-size: 15px; width: 100%; justify-content: center; } /* ── Courses ──────────────────────────────────────────── */ .courses { padding: 60px 0 80px; } .courses__free { margin-bottom: 20px; } .courses__sub { font-size: 14px; max-width: 100%; } .courses__list { grid-template-columns: 1fr; gap: 52px; } .courses__title-hl-bg{ max-width: 120px; } .courses-cards { flex-wrap: wrap; justify-content: center; } .course-card { flex: none; max-width: none; padding: 24px 24px 28px; border-radius: 28px; overflow: visible; margin-top: 10px; } .course-card__pic { top: -53px; right: 0px; } .course-card__title { font-size: 34px; line-height: 36px; font-weight: 800; letter-spacing: -1px;} .course-card__desc { font-size: 14px; } .course-card__btn { width: 100%; justify-content: center; } .indiv-card__header { height: 90px; padding: 0 28px; } .indiv-card__logo { height: 50px; width: 163px; } .indiv-card__body { padding: 0 28px; gap: 16px; } .indiv-card__chars { width: 60px; height: 75px; right: 20px; top: 140px; } .indiv-card__title { font-size: 28px; line-height: 32px; } .indiv-card__sub { font-size: 16px; } .indiv-card__price-num { font-size: 36px; line-height: 40px; } /* ── Reviews ──────────────────────────────────────────── */ .reviews { padding: 60px 0; } .reviews__head { margin-bottom: 28px; } .reviews__title { font-size: 34px; line-height: 36px; letter-spacing: -1px;} .reviews__slider-outer{ overflow: hidden; } .reviews__track { gap: 24px; } .review-card { height: 490px; padding: 22px 22px 18px; border-radius: 30px; } .review-card.is-side { transform: scale(0.72); margin: 0 -42px; opacity: 0.35; } .review-card__name { font-size: 16px; margin-bottom: 20px; } .review-card__text { font-size: 14px; max-height: 228px; } .reviews__controls { margin-top: 28px; } .reviews__nav { width: 52px; height: 52px; } .reviews__all-link { font-size: 14px;} .reviews__title-hl-bg{ margin-left: 5px; max-width: 178px; } /* Expanded review card on mobile */ .review-card.is-expanded { width: calc(100vw - 40px) !important; left: 20px !important; grid-template-columns: 1fr !important; height: auto !important; max-height: 80vh; overflow-y: auto; } .review-card.is-expanded .review-card__author { grid-column: 1 !important; grid-row: auto !important; flex-direction: row !important; align-items: center !important; border-right: none !important; border-bottom: 1px solid #F0F0F0; padding: 0 0 16px !important; justify-content: flex-start; } .review-card.is-expanded .review-card__name { grid-column: 1 !important; } .review-card.is-expanded .review-card__quote-open { grid-column: 1 !important; } .review-card.is-expanded .review-card__text { grid-column: 1 !important; } .review-card.is-expanded .review-card__quote-close { grid-column: 1 !important; } /* ── Form ─────────────────────────────────────────────── */ .form { padding: 0; background: url('../assets/form-bg.png') top center / 100% auto no-repeat; background-size: cover; } .form__card { border-radius: 0; padding: 40px 20px; min-height: auto; background: none; } .form__left { padding: 0; padding-bottom: 32px; max-width: 420px;} .form__headline { font-size: 24px; margin-bottom: 10px; } .form__sub { font-size: 13px; margin-bottom: 20px; } .form__perk { font-size: 13px; padding: 10px 16px; } .form__right { border-radius: 16px; padding: 28px 20px; } .form__title { font-size: 20px; } /* ── Footer ───────────────────────────────────────────── */ .footer { padding: 40px 0 24px; } .footer__inner { flex-direction: column; gap: 24px; padding-bottom: 24px; } .footer__col--nav { margin-left: 0; width: 100%; } .footer__col--contacts { margin-left: 0; width: 100%; } .footer__bottom { flex-direction: column; align-items: center; gap: 8px; padding-top: 20px; } .why__badge::before{ width: calc(100% + 33px); left: 55%; top: 55%; } .why__us-title{ line-height: 40px; } .courses-page__header .hero__title span::before{ width: 140px; height: 60px; } } /* ================================================================ ≤ 640px Small tablet / large phone landscape ================================================================ */ @media (max-width: 640px) { .hero { background-size: 100% 300px; background-position: center 50px; } .hero__wrapper { margin-top: 320px; } /* Hero title — сохраняем Figma-размер из ≤768px */ .hero__title span {margin-left: 0;} .hero__title span::before { width: 260px; height: 55px; } .hero__br {display: flex;} .game__word { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0 20px; } .game__word-left { grid-column: 2; text-align: center; } .game__sound { grid-column: 3; } .hero__center-desc{ width: 100%; max-width: 400px; margin: 0 auto; } .why__us-subtitle{ max-width: 300px; } .game__title{ max-width: 300px; margin: 0 auto; text-align: left; } .game__sticker{ width: 2em; top: -1.2em; right: -1em; } .game__desc{ max-width: 350px; margin: 0 auto; margin-top: 20px; margin-bottom: 30px; } .courses__free{ font-size: 12px; padding: 8px 16px; } .indiv-card { padding: 32px 0; gap: 24px; } .indiv-card__header { height: 80px; padding: 0 20px; } .indiv-card__logo { height: 44px; width: 136px; } .indiv-card__body { padding: 0 20px; gap: 14px; } .indiv-card__chars { display: none; } .indiv-card__title { font-size: 26px; line-height: 30px; } .indiv-card__sub { font-size: 15px; line-height: 20px; } .indiv-card__price-num { font-size: 32px; line-height: 36px; } .indiv-card__btn { width: 100%; } .form__card{ flex-direction: column; } .why__badge::before { width: calc(100% + 32px); left: 55%; top: 55%; } /* Why Us cards */ .why__us-slider { height: 370px; } .why__us-track { height: 370px; } .why__us-card { width: 250px; height: 310px; padding: 20px 16px 28px; } .why__us-card--active { width: 360px; height: 370px; } .why__us-cards__icon img { width: 70px; height: 70px; } .why__us-card--active .why__us-cards__icon img { width: 150px; height: 120px; } .why__us-cards__title { font-size: 14px; margin-bottom: 6px; } .why__us-cards__subtitle { font-size: 12px; line-height: 17px; } .why__us-card--active .why__us-cards__title { font-size: 18px; margin-bottom: 10px; } .why__us-card--active .why__us-cards__subtitle { font-size: 14px; line-height: 20px; } } /* ================================================================ ≤ 480px Small mobile ================================================================ */ @media (max-width: 480px) { .hero__center-blue br:first-child{ display: block; } .hero__center-blue br:nth-child(2){ display: none; } .game__badge{ margin-top: 8px; } /* Why Us cards */ .why__us-slider { height: 320px; } .why__us-track { height: 320px; } .why__us-card { width: 210px; height: 270px; padding: 18px 14px 24px; } .why__us-card--active { width: 300px; height: 320px; } .why__us-cards__icon img { width: 60px; height: 60px; } .why__us-card--active .why__us-cards__icon img { width: 120px; height: 96px; } .why__us-cards__title { font-size: 13px; margin-bottom: 6px; } .why__us-cards__subtitle { font-size: 11px; line-height: 16px; } .why__us-card--active .why__us-cards__title { font-size: 17px; margin-bottom: 8px; } .why__us-card--active .why__us-cards__subtitle { font-size: 13px; line-height: 19px; } } @media (max-width: 400px) { .why__us-title{ flex-direction: column; } } /* ================================================================ ≤ 390px iPhone 14 Pro / 15 Pro ================================================================ */ @media (max-width: 390px) { .container { padding-left: 16px; padding-right: 16px; } .hero__wrapper { padding: 22px 14px 40px; margin-top: 402px; } .why__us-cards__title { font-size: 19px; } .why__us-cards__subtitle { font-size: 14px; } .course-card__title { font-size: 20px; line-height: 26px; } .review-card { width: 252px; height: 444px; } .review-card.is-side { transform: scale(0.65); margin: 0 -48px; } .reviews__controls { max-width: 252px; } .footer__nav a { font-size: 13px; } } /* ================================================================ ≤ 375px iPhone SE / 8 ================================================================ */ @media (max-width: 375px) { .container { padding-left: 16px; padding-right: 16px; } .hero__wrapper { padding: 20px 14px 38px; } .why__us-cards__title { font-size: 19px; } .course-card__title { font-size: 20px; line-height: 26px; } .review-card { width: 248px; height: 438px; } .review-card.is-side { transform: scale(0.64); margin: 0 -49px; } .reviews__controls { max-width: 248px; } .footer__nav a { font-size: 13px; } } /* ================================================================ ≤ 360px Common Android ================================================================ */ @media (max-width: 360px) { .container { padding-left: 12px; padding-right: 12px; } .hero { background-size: 100% 400px; } .hero__wrapper { margin-top: 382px; padding: 18px 12px 36px; } .why__us-card { padding: 18px 12px 26px; } .why__us-cards__title { font-size: 18px; } .why__us-cards__subtitle { font-size: 13px; } .courses__title { font-size: 32px; line-height: 28px; } .course-card { padding: 18px 14px 22px; } .course-card__title { font-size: 18px; line-height: 24px; } .review-card { width: 240px; height: 424px; } .review-card.is-side { transform: scale(0.61); margin: 0 -52px; } .reviews__controls { max-width: 240px; } .form__card { padding: 24px 10px; } .form__headline { font-size: 18px; } .footer__nav a { font-size: 13px; } } /* ================================================================ ≤ 320px Very small phones ================================================================ */ @media (max-width: 320px) { .container { padding-left: 10px; padding-right: 10px; } .hero { background-size: 100% 370px; } .hero__wrapper { margin-top: 352px; padding: 18px 10px 32px; } .hero__buttons-try, .hero__buttons-format { padding: 14px 14px; font-size: 13px; } .why__us-card { padding: 16px 10px 22px; } .course-card { padding: 16px 10px 20px; } .course-card__title { font-size: 17px; line-height: 22px; } .review-card { width: 224px; height: 412px; } .review-card.is-side { transform: scale(0.57); margin: 0 -55px; } .reviews__controls { max-width: 224px; } .form__card { padding: 20px 10px; } .form__headline { font-size: 17px; } } /* ================================================================ OTHER PAGES — courses, course-zero / group / club, reviews, about responsive.css is linked on all pages; rules below are scoped to selectors that only exist on those pages, so index.html is safe. ================================================================ */ /* ================================================================ ≤ 1710px ================================================================ */ @media (max-width: 1710px){ .about-hero__panel{ margin-left: 100px;} .about-hero__bg-photo { transform: translateX(220px); } } /* ================================================================ ≤ 1600px ================================================================ */ @media (max-width: 1600px) { /* ── Courses page ──────────────────────────────────────────── */ .courses-page { padding: 190px 0 160px; } .courses-faq__title, .cz-faq__title { font-size: 42px; } /* ── Course-Zero / Group / Club ────────────────────────────── */ .cz-hero__intro { padding-top: 320px; } .cz-hero__title { font-size: 58px; line-height: 64px; } .cz-plan { padding: 50px 200px 80px; } .cz-method { padding: 120px 0 170px; } .cz-stats { padding: 26px 80px; } .cz-info { padding: 90px 80px 80px; } /* ── Reviews ───────────────────────────────────────────────── */ .reviews-hero { padding: 170px 0 40px; } .reviews-hero__title { font-size: 58px; line-height: 64px; } .reviews-stories__title { font-size: 42px; } /* ── About ─────────────────────────────────────────────────── */ .about-hero__container { padding-left: 200px; } .about-hero__bg-photo { transform: translateX(220px); } .about-hero__panel { width: 560px; margin-left: -30px;} .about-hero__content { padding: 165px 0; } .about-hero__title { font-size: 58px; line-height: 64px; } .about-expertise__title, .about-methodology__title { font-size: 42px; } .about-expertise { padding: 160px 0; } .about-hero__title-blob{ width: 430px; } .about-expertise__hl-blob{ width: 250px; } .about-methodology__hl-blob{ width: 230px; } .cz-plan__illus img{ width: 250px; height: 200px; } } /* ================================================================ ≤ 1440px ================================================================ */ @media (max-width: 1440px) { /* ── Courses page ──────────────────────────────────────────── */ .courses-page { padding: 170px 0 140px; } .courses-faq__title, .cz-faq__title { font-size: 40px; } /* ── Course-Zero hero ──────────────────────────────────────── */ .cz-hero__intro { padding-top: 280px; } .cz-hero__title { font-size: 54px; line-height: 60px; } .cz-plan { padding: 50px 160px 80px; } .cz-method { padding: 110px 0 160px; } /* ── Reviews ───────────────────────────────────────────────── */ .reviews-hero { padding: 150px 0 40px; } .reviews-hero__title { font-size: 54px; line-height: 60px; } .reviews-stories__title { font-size: 40px; } /* ── About ─────────────────────────────────────────────────── */ .about-hero__title-blob{height: 70px;} .about-hero__arrow{left: 180px; top: 80px;} .about-hero__container { padding-left: 200px; } .about-hero__bg-photo { transform: translateX(220px); } .about-hero__panel { width: 540px; } .about-hero__content { padding: 155px 0; } .about-hero__title { font-size: 54px; line-height: 60px; } /* Trim left SVG mask to match shrinking container margin (~70px) */ .about-expertise__title, .about-methodology__title { font-size: 40px; } .about-expertise { padding: 150px 0; } .about-expertise__hl-blob{ width: 240px; } .about-methodology__hl-blob{ width: 230px; } } /* ================================================================ ≤ 1366px ================================================================ */ @media (max-width: 1366px) { /* ── Courses page ──────────────────────────────────────────── */ .courses-page { padding: 150px 0 120px; } .courses-faq__title, .cz-faq__title { font-size: 38px; } .cz-faq .container { padding: 0 100px; } /* ── Course-Zero hero ──────────────────────────────────────── */ .cz-hero__intro { padding-top: 260px; } .cz-hero__title { font-size: 50px; line-height: 56px; } .cz-plan { padding: 50px 120px 80px; } .cz-method { padding: 100px 0 150px; } .cz-method__photo { width: auto; flex: 1 1 0; } .cz-modal { padding: 50px 100px 80px; } /* ── Reviews ───────────────────────────────────────────────── */ .reviews-hero { padding: 140px 0 40px; } .reviews-hero__title { font-size: 50px; line-height: 56px; } .reviews-stories__title { font-size: 38px; } /* ── About ─────────────────────────────────────────────────── */ .about-hero__container { padding-left: 200px; } .about-hero__bg-photo { transform: translateX(240px); } .about-hero__panel { width: 510px; } .about-hero__content { padding: 145px 0; } .about-hero__title { line-height: 56px; } /* Container margin shrinks to ~33px — keep a minimal diagonal */ .about-expertise__title, .about-methodology__title { font-size: 38px; } .about-expertise { padding: 140px 0; } .about-expertise__hl-blob{ width: 230px; } .about-methodology__hl-blob{ width: 210px; } .about-hero__title-blob{ width: 420px; height: 60px; } .modal__title-badge-bg{ width: 180px; height: 50px; } } /* ================================================================ ≤ 1280px ================================================================ */ @media (max-width: 1280px) { .about-hero__panel{ margin-left: -60px; width: 440px; } /* ── Courses page ──────────────────────────────────────────── */ .courses-page { padding: 130px 0 100px; } .courses-faq__title, .cz-faq__title { font-size: 36px; } .cz-faq .container { padding: 0 60px; } .cz-faq__title-badge svg { top: 50%; left: 50%; width: calc(100% + 16px); height: 100%; max-width: none; max-height: none; transform: translate(-50%, -50%); } .container{max-width: 1100px;} /* ── Course-Zero hero ──────────────────────────────────────── */ .cz-hero__intro { padding-top: 240px; } .cz-hero__title { font-size: 46px; line-height: 52px; } .cz-plan { padding: 50px 80px 80px; } .cz-method { padding: 80px 0 130px; } .cz-method__cards { flex-wrap: wrap; } .cz-method__card { flex: 1 1 calc(50% - 16.5px); } .cz-modal { padding: 50px 60px 80px; } .cz-info { padding: 90px 60px 80px; } /* ── Reviews ───────────────────────────────────────────────── */ .reviews-hero { padding: 130px 0 40px; } .reviews-hero__title { font-size: 46px; line-height: 52px; } .reviews-stories__title { font-size: 36px; } /* ── About ─────────────────────────────────────────────────── */ .about-hero__container { padding-left: 200px; } .about-hero__bg-photo { transform: translateX(280px); } .about-hero__panel { width: 480px; } .about-hero__heading, .about-hero__title { width: auto; } .about-hero__content { padding: 135px 0; } .about-hero__title { font-size: 46px; line-height: 52px; } /* Container fills full width with 20px padding — left diagonal removed */ .about-expertise__title, .about-methodology__title { font-size: 36px; } .about-expertise { padding: 120px 0; } .about-achievements { padding: 90px 60px 80px; } .about-hero__panel::before{ left: -157px; } .about-hero__title-blob{ width: 360px; } .about-hero__quote-text{ font-size: 18px; max-width: 350px; } .about-hero__author-name, .about-hero__author-role{ font-size: 16px; } .about-expertise__hl-blob{ width: 220px; } .about-methodology__top { gap: 40px; } .about-methodology__image { flex: 1 1 0; width: auto; } .about-methodology__content { width: 460px; } .cz-plan__illus{ right: 0; } .modal__title-badge-bg{ width: 160px; height: 40px; top: 55%; } } /* ================================================================ ≤ 1024px (GSAP ScrollSmoother already disabled by existing rules) ================================================================ */ @media (max-width: 1024px) { /* iOS / Android: body background-attachment:fixed renders as scroll, so we set it explicitly to avoid the parallax-jump artifact. */ body { background-attachment: scroll; } /* ── Courses page ──────────────────────────────────────────── */ /* padding / cards / faq-title already covered by courses.css at 1024px */ .courses-faq { padding: 80px 0; } /* ── Course-Zero / Group / Club ────────────────────────────── */ .cz-hero__intro { padding-top: 200px; margin-bottom: 48px; } .cz-hero__title { font-size: 42px; line-height: 50px; } .cz-hero__stars { display: none; } .cz-hero { padding-bottom: 140px; } .cz-plan { padding: 50px 60px 80px; } .cz-plan__illus { display: none; } .cz-method { padding: 80px 0 120px; } .cz-method__top { flex-direction: column; gap: 48px; margin-bottom: 60px; } .cz-method__photo { flex: none; width: 100%; height: auto; aspect-ratio: 664 / 426; max-height: 467px; } .cz-method__text { width: 100%; } .cz-method__title { font-size: 38px; line-height: 50px; } .cz-faq { padding: 80px 0; } .cz-faq__title { justify-content: center; } .cz-pronunciation { padding: 60px 0 80px; } .cz-pronunciation .container { padding: 0 60px; } .cz-pronunciation__title { font-size: 36px; line-height: 48px; } .cz-pronunciation__tracks { gap: 60px; } .cz-modal { padding: 50px 40px 80px; } .cz-modal__step { padding: 40px 30px; } .cz-stats { padding: 26px 50px; } .cz-info { padding: 80px 50px; } /* ── Reviews ───────────────────────────────────────────────── */ .reviews-hero { padding: 120px 0 40px; } .reviews-hero__title { font-size: 42px; line-height: 50px; } .reviews-hero__deco--1 { top: 180px; left: calc(50% - 200px); } .reviews-hero__deco--2 { top: 165px; left: calc(50% - 172px); } .reviews-hero__deco--3 { top: 253px; left: calc(50% + 125px); } .reviews-stories { padding: 80px 0; } .reviews-stories__title { font-size: 34px; } .reviews-stories__stars { display: none; } .story-card { padding: 32px 40px; } .reviews-cta-section { padding: 80px 0; } .reviews-cta { padding: 60px 40px; } /* ── About — mobile card layout from 1024px ────────────────── */ .about-hero { display: flex; flex-direction: column; min-height: auto; overflow: visible; } .about-hero__bg { position: relative; height: 520px; flex-shrink: 0; overflow: hidden; } .about-hero__bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .about-hero__bg-blend { position: absolute; inset: 0; } .about-hero__container { min-height: auto; display: block; padding-left: 0; padding-right: 0; } .about-hero__panel { position: relative; width: 100%; background: #fff; border-radius: 20px 20px 0 0; margin-top: -20px; padding: 32px 70px 48px; z-index: 1; margin-left: 0; } .about-hero__panel::before, .about-hero__panel::after { display: none; } .about-hero__content { position: static; padding: 0; width: 100%; max-width: 400px; } .about-hero__heading { position: absolute; top: -420px; left: 40px; z-index: 5; max-width: 55%; width: auto; } .about-hero__heading, .about-hero__title { width: auto; } .about-hero__title { font-size: 42px; line-height: 50px; color: #fff; width: 400px; margin-top: 20%;} .about-hero__title-blob { width: 330px; height: 56px; max-width: 450px;} .about-hero__arrow { width: 62px; height: 48px; top: 58px; left: 144px; } .about-hero__desc { color: #4A5565; } .about-hero__desc strong { color: #0C3249; } .about-hero__bg-photo { transform: none; } .about-stats { padding: 26px 50px; } .about-achievements { padding: 80px 50px; } .about-expertise { padding: 100px 0; } .about-expertise__title { font-size: 38px; line-height: 52px; } .about-methodology { padding: 60px 0 140px; } .about-methodology__title { font-size: 38px; line-height: 52px; white-space: normal; } .about-methodology__top { flex-direction: column; gap: 48px; } .about-methodology__image { flex: none; width: 100%; height: auto; aspect-ratio: 664 / 426; } .about-methodology__content { width: 100%; } .about-cards { gap: 24px; } .about-card__title { font-size: 28px; } .about-expertise__hl-blob{ max-width: 225px; } .about-methodology__hl-blob{ max-width: 200px; } .about-hero__quote{ width: fit-content; margin: 0 auto; } .about-hero__content{ max-width: none; } .cg-method__result-badge{ max-width: 260px; } .cc-method__result-badge{ max-width: 180px; } .cz-method__result-badge{ max-width: 210px; } .modal__title-badge-bg{ width: 130px; left:-15px; max-width: none; } .modal__title-badge{ margin-top: 10px; } } /* ================================================================ ≤ 834px ================================================================ */ @media (max-width: 834px) { /* ── Course-Zero hero ──────────────────────────────────────── */ .cz-hero__intro { padding-top: 180px; } .cz-hero__title { font-size: 40px; line-height: 48px; } .cz-plan { padding: 50px 40px 70px; } .cz-plan__title { font-size: 28px; line-height: 32px; } .cz-method { padding: 60px 0 100px; } .cz-method__title { font-size: 36px; line-height: 46px; } .cz-method__card { padding: 32px; } .cz-method__card-title { font-size: 28px; } .cz-stats { padding: 26px 32px; } .cz-info { padding: 80px 50px 70px; } /* ── Reviews ───────────────────────────────────────────────── */ .reviews-hero { padding: 110px 0 32px; } .reviews-hero__title { font-size: 40px; line-height: 48px; } .reviews-hero__deco--1 { top: 170px; left: calc(50% - 190px); } .reviews-hero__deco--2 { top: 155px; left: calc(50% - 163px); } .reviews-hero__deco--3 { top: 240px; left: calc(50% + 118px); } .reviews-stories__title { font-size: 32px; } .story-card { padding: 28px 32px; } /* ── About ─────────────────────────────────────────────────── */ .about-hero__bg { height: 480px; } .about-hero__title { font-size: 40px; line-height: 48px; } .about-stats { padding: 20px 32px; } .about-achievements { padding: 60px 32px; } .about-expertise__title { font-size: 36px; line-height: 48px; } .about-methodology__title { font-size: 36px; line-height: 48px; } .about-card__title { font-size: 26px; } } /* ================================================================ ≤ 768px (burger nav already shown by existing rules in this file) ================================================================ */ @media (max-width: 768px) { /* ── Course-Zero / Group / Club ────────────────────────────── */ .cz-hero { padding-bottom: 100px; } .cz-hero__intro { padding-top: 160px; margin-bottom: 40px; } .cz-hero__title { font-size: 38px; line-height: 46px; } /* Shift hero background break-points down proportionally */ .cz-hero::before { height: 580px; } .cz-hero::after { top: 580px; } .cz-plan { padding: 40px 28px 60px; } .cz-plan__title { font-size: 26px; line-height: 32px; } .cz-plan__btn { width: 100%; justify-content: center; } .cz-method { padding: 60px 0 80px; } .cz-method__title { font-size: 34px; line-height: 44px; } .cz-method__cards { flex-direction: column; flex-wrap: nowrap; } .cz-method__card { flex: 1; padding: 28px 24px; border-radius: 28px; } .cz-stats { flex-direction: column; height: auto; min-height: auto; padding: 28px 24px; gap: 20px; } .cz-stats__divider { width: 48px; height: 1px; background: #EBE5E5; overflow: hidden; } .cz-stats__divider img { display: none; } .cz-desc { padding-bottom: 60px; } .cz-info { padding: 60px 24px 50px; min-height: auto; margin-top: -16px; } .cz-info__block h3 { font-size: 26px; line-height: 30px; } .cz-info__block p { font-size: 18px; } .cz-desc__arrow-decor { display: none; } .cz-faq { padding: 60px 0; } .cz-faq .container { padding: 0 24px; } .cz-pronunciation { padding: 48px 0 64px; } .cz-pronunciation .container { padding: 0 24px; gap: 40px; } .cz-pronunciation__top { flex-direction: column; gap: 24px; } .cz-pronunciation__heading{text-align: center;} .cz-pronunciation__title { font-size: 32px; line-height: 42px; } .cz-pronunciation__tracks { gap: 32px; flex-wrap: wrap; } .cz-modal { padding: 40px 20px 60px; border-radius: 28px; } .cz-modal__step { padding: 32px 20px; border-radius: 28px; } .cz-modal__step-title { font-size: 17px; } /* Restore courses.css card intent: responsive.css ≤768px overrides it for index */ .courses-cards .course-card { padding: 36px 28px; gap: 32px; } .courses-cards .course-card__title{ font-size: 26px; } .courses-cards .course-card__body { gap: 24px; } /* ── Reviews ───────────────────────────────────────────────── */ .reviews-hero { padding: 100px 0 32px; } .reviews-hero__title { font-size: 38px; line-height: 46px; } .reviews-hero__deco--1 { top: 160px; left: calc(50% - 182px); } .reviews-hero__deco--2 { top: 145px; left: calc(50% - 154px); } .reviews-hero__deco--3 { top: 227px; left: calc(50% + 113px); } .reviews-stories { padding: 60px 0; } .reviews-stories__title { font-size: 30px; } .story-card { padding: 24px; border-radius: 28px; flex-direction: column; gap: 16px; } .reviews-cta { padding: 60px 28px; } .reviews-cta__title { font-size: 28px; } .reviews-cta__text { font-size: 16px; } .reviews-cta__btn { height: 48px; font-size: 15px; } /* ── About ─────────────────────────────────────────────────── */ /* Hero: column layout — photo at top, white card below (mirrors main page mobile) */ .about-hero { display: flex; flex-direction: column; min-height: auto; overflow: visible; } .about-hero__bg { position: relative; height: 450px; flex-shrink: 0; overflow: hidden; } .about-hero__bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30px; } .about-hero__bg-blend { position: absolute; inset: 0; } .about-hero__container { min-height: auto; display: block; } .about-hero__panel { position: relative; width: 100%; background: #fff; border-radius: 20px 20px 0 0; margin-top: -20px; padding: 32px 20px 48px; z-index: 1; } .about-hero__panel::before, .about-hero__panel::after { display: none; } .about-hero__content { padding: 0; } .about-hero__heading, .about-hero__title { width: auto; } .about-hero__title { line-height: 46px; color: #0C3249; } .about-hero__title-brand { color: #CF031D; } .about-hero__title-blob { width: 295px; height: 45px; } .about-hero__arrow { width: 55px; height: 43px; top: 52px; left: 131px; } .about-hero__desc { color: #4A5565; } .about-hero__desc strong { color: #0C3249; } /* Stats → column */ .about-stats { flex-direction: column; height: auto; min-height: auto; padding: 24px; gap: 20px; } .about-stats__divider { width: 48px; height: 1px; } .about-achievements { padding: 50px 24px; } .about-expertise { padding: 80px 0; } .about-methodology { padding: 60px 0 100px; } .about-cards { flex-direction: column; } .about-card { flex: none; width: 100%; max-width: 100%; padding: 32px 28px; border-radius: 28px; } .about-card__body { flex: none; } .about-card__title { font-size: 26px; line-height: 32px; } .about-expertise__hl-blob{ max-width: 220px; } .about-methodology__hl-blob{ max-width: 190px; } .about-expertise__inner{ flex-direction: column; align-items: center; } } /* ================================================================ ≤ 640px ================================================================ */ @media (max-width: 640px) { .modal__title-badge-bg { width: 105px; left: 50%; max-width: none; transform: translateX(-50%) translateY(-50%) rotate(178.6deg) scaleY(-1); } /* ── Course-Zero hero ──────────────────────────────────────── */ .cz-hero__intro { padding-top: 140px; } .cz-hero__title { font-size: 34px; line-height: 42px; } .cz-hero { padding-bottom: 80px; } .cz-hero::before { height: 520px; } .cz-hero::after { top: 520px; } .cz-plan { padding: 32px 20px 48px; border-radius: 28px; } .cz-plan__title { font-size: 24px; } .cz-info { padding: 40px 20px; } .cz-info__block h3 { font-size: 24px; } .cz-info__block p { font-size: 16px; } .cz-faq .container { padding: 0 20px; } .cz-pronunciation .container { padding: 0 20px; } .cz-pronunciation__tracks { flex-direction: column; align-items: flex-start; gap: 24px; } /* ── Reviews ───────────────────────────────────────────────── */ .reviews-hero { padding: 90px 0 24px; } .reviews-hero__title { font-size: 34px; line-height: 42px; } .reviews-hero__deco--1 { top: 150px; left: calc(50% - 164px); } .reviews-hero__deco--2 { top: 135px; left: calc(50% - 137px); } .reviews-hero__deco--3 { top: 211px; left: calc(50% + 100px); } .reviews-stories__title { font-size: 26px; } .reviews-cta__title { font-size: 24px; } .reviews-cta__text { font-size: 15px; } /* ── About ─────────────────────────────────────────────────── */ .about-hero__title { line-height: 42px; } .about-card { padding: 28px 20px; } .about-card__title { font-size: 24px; } .about-hero__title{ margin-top: 40%; } } @media (max-width: 550px){ .about-hero__content { position: relative; } .about-hero__heading { position: static; top: auto; left: auto; z-index: auto; max-width: none; } .about-hero__title { color: #0C3249; margin-top: 0; width: fit-content; margin: 0 auto;} .about-hero__title-brand { color: #CF031D; } .about-hero__title-mobile{ display: block; } .about-hero__bg-photo { transform: translateX(0px); object-position: 65% top; } .about-expertise__title{ width: 100%; max-width: 390px; } .cz-pronunciation__sub{ max-width: 350px; } } /* ================================================================ ≤ 480px ================================================================ */ @media (max-width: 480px) { .modal__title-badge-bg { width: 100px; left: 50%; } /* ── Course-Zero hero ──────────────────────────────────────── */ .cz-hero__intro { padding-top: 120px; } .cz-hero__title { font-size: 30px; line-height: 38px; } .cz-hero::before { height: 480px; } .cz-hero::after { top: 480px; } .cz-plan { padding: 28px 16px 40px; } .cz-plan__title { font-size: 22px; } .cz-faq .container { padding: 0 16px; } /* ── Reviews ───────────────────────────────────────────────── */ .reviews-hero { padding: 80px 0 20px; } .reviews-hero__title { font-size: 30px; line-height: 38px; } .reviews-hero__deco--1 { top: 140px; left: calc(50% - 147px); } .reviews-hero__deco--2 { top: 125px; left: calc(50% - 122px); } .reviews-hero__deco--3 { top: 195px; left: calc(50% + 90px); } .reviews-stories__title { font-size: 24px; } .reviews-cta__title { font-size: 22px; } /* ── About ─────────────────────────────────────────────────── */ .about-hero__bg-photo { object-position: 65% top; } .about-card__title { font-size: 22px; } .about-hero__arrow{ left: 120px; } } /* ================================================================ ≤ 430px ================================================================ */ @media (max-width: 430px) { /* ── Reviews ───────────────────────────────────────────────── */ .story-card { padding: 20px 16px; } .reviews-cta { padding: 48px 20px; } } /* ================================================================ ≤ 390px ================================================================ */ @media (max-width: 390px) { .modal__title-badge-bg { width: 80px; left: 50%; } /* ── Course-Zero hero ──────────────────────────────────────── */ .cz-hero__intro { padding-top: 110px; } .cz-hero__title { font-size: 28px; line-height: 36px; } .cz-plan__title { font-size: 20px; } .cz-faq .container { padding: 0 12px; } /* ── Courses page ──────────────────────────────────────────── */ .courses-cards .course-card__title{ font-size: 22px; } /* ── Reviews ───────────────────────────────────────────────── */ .reviews-hero__title { font-size: 28px; line-height: 36px; } .reviews-hero__deco--1 { top: 140px; left: calc(50% - 138px); } .reviews-hero__deco--2 { top: 125px; left: calc(50% - 114px); } .reviews-hero__deco--3 { top: 192px; left: calc(50% + 84px); } .reviews-stories__title { font-size: 22px; } .reviews-cta__title { font-size: 20px; } /* ── About ─────────────────────────────────────────────────── */ .about-hero__title { font-size: 34px; line-height: 42px; } .about-card__title { font-size: 20px; } } /* ================================================================ ≤ 360px ================================================================ */ @media (max-width: 360px) { .modal__title-badge-bg { width: 76px; left: 50%; } /* ── Course-Zero hero ──────────────────────────────────────── */ .cz-hero__title { font-size: 26px; line-height: 32px; } .cz-plan { padding: 24px 12px 36px; } .cz-plan__title { font-size: 18px; } /* ── Reviews ───────────────────────────────────────────────── */ .reviews-hero__title { font-size: 26px; line-height: 32px; } .reviews-hero__deco--1 { top: 140px; left: calc(50% - 129px); } .reviews-hero__deco--2 { top: 125px; left: calc(50% - 106px); } .reviews-hero__deco--3 { top: 188px; left: calc(50% + 78px); } .reviews-stories__title { font-size: 20px; } /* ── About ─────────────────────────────────────────────────── */ .about-hero__title { font-size: 34px; line-height: 42px; } .about-card__title { font-size: 18px; } }