Top.Mail.Ru
@import "tailwindcss"; :root { --ink: #1b1b1f; --black: #050509; --black-soft: #111116; --paper: #ffffff; --warm: #f5f2ee; --warm-dark: #e9e3dc; --soft-white: #f5f5f5; --muted: #6f6f74; --line: rgba(27, 27, 31, 0.12); --orange: #f25c05; --orange-dark: #d84f02; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Open Sans", Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body, button, input, textarea, select { font-family: "Open Sans", Arial, Helvetica, sans-serif; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, a, summary { -webkit-tap-highlight-color: transparent; } .sectionInner { width: min(1100px, calc(100% - 40px)); margin: 0 auto; } .siteHeader { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(16px); } .siteHeaderInner { width: min(1100px, calc(100% - 40px)); min-height: 68px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; } .brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .brandMark { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 2px solid var(--ink); font-size: 22px; font-weight: 700; line-height: 1; } .brandText { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .brandTitle { font-size: 14px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.1; text-transform: uppercase; } .brandSub { font-size: 9px; letter-spacing: 0.11em; line-height: 1.2; opacity: 0.66; text-transform: uppercase; } .landingNav { display: flex; justify-content: center; gap: 21px; min-width: 0; } .landingNav a { font-size: 12px; opacity: 0.76; transition: color 0.18s ease, opacity 0.18s ease; white-space: nowrap; } .landingNav a:hover, .landingNav a:focus-visible { color: var(--orange); opacity: 1; outline: none; } .button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 12px 23px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; line-height: 1.3; text-align: center; text-transform: uppercase; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; } .button:hover { transform: translateY(-1px); } .button:focus-visible, .mobileCta:focus-visible { outline: 3px solid rgba(242, 92, 5, 0.3); outline-offset: 3px; } .buttonPrimary { border-color: var(--orange); background: var(--orange); color: #fff; } .buttonPrimary:hover { border-color: var(--orange-dark); background: var(--orange-dark); } .eyebrow, .sectionKicker, .caseLabel { margin: 0 0 17px; color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; line-height: 1.45; text-transform: uppercase; } .hero { position: relative; overflow: hidden; background: radial-gradient(circle at 12% -8%, #2a2a33 0, #09090d 48%, #000 100%); color: var(--soft-white); } .heroGlow { position: absolute; top: -290px; left: 54%; width: 700px; height: 700px; border: 1px solid rgba(242, 92, 5, 0.18); border-radius: 50%; box-shadow: 0 0 130px rgba(242, 92, 5, 0.08); pointer-events: none; } .heroGlow::after { position: absolute; inset: 86px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: inherit; content: ""; } .heroInner { position: relative; width: min(1100px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr); gap: clamp(42px, 6vw, 84px); align-items: center; padding: 68px 0 60px; } .heroCopy { min-width: 0; padding: 12px 0; } .hero .eyebrow { color: rgba(245, 245, 245, 0.62); } .hero h1 { max-width: 720px; margin: 0; font-size: clamp(42px, 5.2vw, 68px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.04; } .heroSubtitle { max-width: 670px; margin: 25px 0 0; font-size: clamp(18px, 2vw, 21px); font-weight: 400; line-height: 1.57; } .heroLead { max-width: 640px; margin: 17px 0 0; color: rgba(245, 245, 245, 0.7); font-size: 14px; line-height: 1.78; } .heroFacts { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 27px 0 0; color: rgba(245, 245, 245, 0.82); } .heroFacts span { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; } .heroFacts span:not(:last-child)::after { width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: var(--orange); content: ""; } .heroActions { margin-top: 31px; display: flex; align-items: center; gap: 18px; } .buttonNote { max-width: 250px; margin: 0; color: rgba(245, 245, 245, 0.58); font-size: 11px; line-height: 1.55; } .teacherPortrait { margin: 0; } .portraitFrame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; background: #111; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42); } .portraitFrame img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .portraitShade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.88) 100%); } .portraitFrame figcaption { position: absolute; right: 22px; bottom: 20px; left: 22px; display: flex; flex-direction: column; gap: 4px; color: rgba(255, 255, 255, 0.72); font-size: 11px; line-height: 1.4; } .portraitFrame .portraitName { margin-bottom: 3px; color: #fff; font-size: 18px; font-weight: 600; } .methodLine { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.24); } .methodLineInner { width: min(1100px, calc(100% - 40px)); min-height: 57px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .methodLine span { color: rgba(245, 245, 245, 0.68); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .methodLine i { flex: 1 1 30px; max-width: 80px; height: 1px; background: rgba(242, 92, 5, 0.44); } .recognition, .teacherSection, .formatSection { padding: 92px 0; background: var(--paper); } .sectionHeading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: 50px; align-items: end; } .sectionHeading h2, .teacherCopy h2, .resultsLayout h2, .caseCopy h2, .formatCopy h2, .faqIntro h2, .formIntro h2 { margin: 0; font-size: clamp(32px, 4vw, 50px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.12; } .sectionHeading > p { margin: 0 0 2px; color: rgba(27, 27, 31, 0.7); font-size: 15px; line-height: 1.8; } .situationGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 54px; border: 1px solid var(--line); background: var(--line); } .situationCard { min-height: 260px; padding: 28px 25px; background: #fff; } .cardNumber { display: block; margin-bottom: 52px; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; } .situationCard h3, .processItem h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; } .situationCard p, .processItem p { margin: 13px 0 0; color: rgba(27, 27, 31, 0.68); font-size: 14px; line-height: 1.72; } .practice { padding: 92px 0 96px; background: var(--black); color: var(--soft-white); } .lightHeading > p { color: rgba(245, 245, 245, 0.63); } .processGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; margin-top: 50px; border-top: 1px solid rgba(255, 255, 255, 0.15); } .processItem { min-height: 190px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; padding: 29px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .processNumber { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(242, 92, 5, 0.7); border-radius: 50%; color: var(--orange); font-size: 12px; font-weight: 700; } .processItem h3 { color: #fff; } .processItem p { color: rgba(245, 245, 245, 0.62); } .teacherLayout { display: grid; grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr); gap: clamp(48px, 8vw, 100px); align-items: center; } .teacherImageBlock { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #191919; } .teacherImageBlock::before { position: absolute; z-index: 1; top: 18px; right: 18px; width: 72px; height: 72px; border-top: 2px solid var(--orange); border-right: 2px solid var(--orange); content: ""; } .teacherImageBlock img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .imageCaption { position: absolute; right: 18px; bottom: 16px; left: 18px; padding: 11px 13px; background: rgba(5, 5, 9, 0.78); color: rgba(255, 255, 255, 0.76); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; backdrop-filter: blur(10px); } .teacherCopy .sectionKicker { margin-bottom: 16px; } .teacherRole { max-width: 650px; margin: 24px 0 0; font-size: 19px; line-height: 1.6; } .teacherCopy > p:not(.sectionKicker):not(.teacherRole) { max-width: 680px; margin: 18px 0 0; color: rgba(27, 27, 31, 0.68); font-size: 15px; line-height: 1.82; } .teacherFacts { max-width: 690px; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; } .teacherFacts span { padding: 9px 13px; border: 1px solid rgba(27, 27, 31, 0.16); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; } .resultsSection { padding: 86px 0; background: var(--warm); } .resultsLayout { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr); gap: clamp(52px, 8vw, 110px); align-items: start; } .resultsIntro { max-width: 560px; margin: 22px 0 0; color: rgba(27, 27, 31, 0.68); font-size: 15px; line-height: 1.8; } .resultsList { margin: 0; padding: 0; border-top: 1px solid rgba(27, 27, 31, 0.18); list-style: none; } .resultsList li { position: relative; min-height: 72px; display: flex; align-items: center; padding: 18px 18px 18px 52px; border-bottom: 1px solid rgba(27, 27, 31, 0.18); font-size: 15px; line-height: 1.55; } .resultsList li::before { position: absolute; left: 12px; width: 22px; height: 2px; background: var(--orange); content: ""; } .caseSection { padding: 82px 0; background: var(--orange); color: #fff; } .caseLayout { display: grid; grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr); gap: 50px; align-items: start; } .caseLabel { color: rgba(255, 255, 255, 0.72); } .caseCopy h2 { max-width: 820px; font-size: clamp(30px, 3.6vw, 46px); } .caseCopy > p:not(.caseNote) { max-width: 830px; margin: 25px 0 0; font-size: 17px; line-height: 1.78; } .caseNote { max-width: 820px; margin: 23px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.32); color: rgba(255, 255, 255, 0.72); font-size: 11px; line-height: 1.65; } .formatLayout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.65fr); gap: clamp(54px, 8vw, 110px); align-items: center; } .formatCopy > p:not(.sectionKicker) { max-width: 640px; margin: 23px 0 0; color: rgba(27, 27, 31, 0.7); font-size: 16px; line-height: 1.8; } .formatCopy .formatDecision { padding-left: 20px; border-left: 3px solid var(--orange); color: var(--ink); } .priceCard { padding: 35px; border: 1px solid var(--line); background: var(--black); color: #fff; box-shadow: 0 24px 60px rgba(5, 5, 9, 0.13); } .priceLabel { display: block; color: rgba(255, 255, 255, 0.58); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .priceCard strong { display: block; margin: 18px 0 0; font-size: clamp(42px, 5vw, 60px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; } .priceDuration { display: block; margin-top: 9px; color: var(--orange); font-size: 13px; font-weight: 600; } .priceCard dl { margin: 28px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); } .priceCard dl > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .priceCard dt, .priceCard dd { margin: 0; font-size: 12px; line-height: 1.5; } .priceCard dt { color: rgba(255, 255, 255, 0.48); } .priceCard dd { color: rgba(255, 255, 255, 0.82); } .priceCard .button { width: 100%; } .faqSection { padding: 86px 0; background: var(--warm); } .faqLayout { display: grid; grid-template-columns: minmax(240px, 0.6fr) minmax(0, 1.4fr); gap: clamp(50px, 8vw, 105px); align-items: start; } .faqList { border-top: 1px solid rgba(27, 27, 31, 0.18); } .faqList details { border-bottom: 1px solid rgba(27, 27, 31, 0.18); } .faqList summary { position: relative; padding: 22px 50px 22px 0; cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1.45; list-style: none; } .faqList summary::-webkit-details-marker { display: none; } .faqList summary::before, .faqList summary::after { position: absolute; top: 50%; right: 9px; width: 18px; height: 1px; background: var(--orange); content: ""; transition: transform 0.2s ease; } .faqList summary::after { transform: rotate(90deg); } .faqList details[open] summary::after { transform: rotate(0deg); } .faqList details p { max-width: 720px; margin: -4px 0 23px; padding-right: 45px; color: rgba(27, 27, 31, 0.68); font-size: 14px; line-height: 1.78; } .formSection { position: relative; overflow: hidden; padding: 94px 0; background: radial-gradient(circle at 12% 0%, #28282f 0, #08080c 49%, #000 100%); color: #fff; } .formSection::after { position: absolute; right: -180px; bottom: -260px; width: 540px; height: 540px; border: 1px solid rgba(242, 92, 5, 0.2); border-radius: 50%; content: ""; } .formLayout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(410px, 1.05fr); gap: clamp(48px, 7vw, 92px); align-items: start; } .formIntro > p:not(.sectionKicker) { max-width: 510px; margin: 23px 0 0; color: rgba(255, 255, 255, 0.66); font-size: 15px; line-height: 1.8; } .contactDetails { display: flex; flex-direction: column; gap: 9px; margin-top: 34px; color: rgba(255, 255, 255, 0.75); font-size: 13px; } .contactDetails a { width: fit-content; transition: color 0.18s ease; } .contactDetails a:hover { color: var(--orange); } .formCard { padding: 18px; background: #fff; color: var(--ink); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.36); } .bitrixMount { min-height: 410px; } .bitrixMountError { display: none; min-height: 0; } .bitrixMount .b24-form-wrapper { max-width: none !important; margin: 0 !important; } .formFallback { margin: 7px 8px 4px; color: rgba(27, 27, 31, 0.56); font-size: 10px; line-height: 1.55; text-align: center; } .formStatus { margin: 12px 8px; color: rgba(27, 27, 31, 0.58); font-size: 12px; text-align: center; } .formError { margin: 18px 8px; padding: 20px; border: 1px solid rgba(242, 92, 5, 0.28); background: #fff8f3; text-align: center; } .formError p { margin: 0 0 15px; color: rgba(27, 27, 31, 0.7); font-size: 13px; line-height: 1.6; } .formError button, .formError a { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; margin: 4px; padding: 9px 14px; border: 1px solid var(--orange); border-radius: 999px; background: transparent; color: var(--orange-dark); cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .formError button:hover, .formError a:hover { background: var(--orange); color: #fff; } .formFallback a { color: var(--orange-dark); text-decoration: underline; text-underline-offset: 2px; } .siteFooter { padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); background: #000; color: rgba(255, 255, 255, 0.68); } .footerInner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 35px; align-items: center; } .footerBrand { display: flex; align-items: center; gap: 12px; } .footerMark { border-color: rgba(255, 255, 255, 0.7); color: #fff; } .footerBrand div { display: flex; flex-direction: column; gap: 4px; } .footerBrand strong { color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .footerBrand div span, .copyright, .footerLinks { font-size: 10px; line-height: 1.5; } .footerLinks { display: flex; gap: 19px; } .footerLinks a:hover { color: #fff; } .mobileCta { display: none; } @media (max-width: 1020px) { .siteHeaderInner { grid-template-columns: auto 1fr; } .landingNav { display: none; } .headerButton { justify-self: end; } .heroInner { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr); gap: 38px; } .situationGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .situationCard { min-height: 225px; } .cardNumber { margin-bottom: 34px; } .teacherLayout { gap: 54px; } .footerInner { grid-template-columns: minmax(0, 1fr) auto; } .copyright { grid-column: 1 / -1; } } @media (max-width: 760px) { body { padding-bottom: 58px; } .sectionInner, .siteHeaderInner, .heroInner, .methodLineInner { width: min(100% - 32px, 1100px); } .siteHeaderInner { min-height: 62px; } .brandSub, .headerButton { display: none; } .heroInner { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 49px 0 42px; } .heroCopy { padding: 0; } .hero h1 { font-size: clamp(38px, 11.5vw, 54px); line-height: 1.04; } .heroSubtitle { font-size: 18px; line-height: 1.55; } .heroLead { font-size: 14px; } .heroActions { align-items: flex-start; flex-direction: column; } .heroActions .button { width: 100%; } .buttonNote { max-width: none; } .teacherPortrait { width: min(100%, 430px); margin: 0 auto; } .methodLineInner { min-height: 53px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; } .methodLineInner::-webkit-scrollbar { display: none; } .methodLine span { flex: 0 0 auto; } .methodLine i { flex: 0 0 26px; } .recognition, .teacherSection, .formatSection { padding: 64px 0; } .practice, .resultsSection, .caseSection, .faqSection, .formSection { padding: 64px 0; } .sectionHeading, .teacherLayout, .resultsLayout, .caseLayout, .formatLayout, .faqLayout, .formLayout { grid-template-columns: minmax(0, 1fr); gap: 31px; } .sectionHeading h2, .teacherCopy h2, .resultsLayout h2, .caseCopy h2, .formatCopy h2, .faqIntro h2, .formIntro h2 { font-size: clamp(31px, 9vw, 42px); } .sectionHeading > p { font-size: 14px; } .situationGrid { grid-template-columns: minmax(0, 1fr); margin-top: 37px; } .situationCard { min-height: 0; padding: 24px; } .cardNumber { margin-bottom: 23px; } .processGrid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 36px; } .processItem { min-height: 0; grid-template-columns: 42px minmax(0, 1fr); gap: 17px; padding: 25px 0; } .processNumber { width: 34px; height: 34px; } .teacherImageBlock { width: min(100%, 450px); margin: 0 auto; } .teacherRole { font-size: 17px; } .caseLayout { gap: 8px; } .caseCopy > p:not(.caseNote) { font-size: 15px; } .priceCard { padding: 28px 24px; } .faqLayout { gap: 28px; } .formLayout { gap: 38px; } .formCard { padding: 9px; } .bitrixMount { min-height: 390px; } .footerInner { grid-template-columns: minmax(0, 1fr); gap: 23px; } .footerLinks { flex-direction: column; gap: 8px; } .mobileCta { position: fixed; z-index: 70; right: 0; bottom: 0; left: 0; min-height: 58px; display: flex; align-items: center; justify-content: center; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--orange); color: #fff; box-shadow: 0 -10px 25px rgba(5, 5, 9, 0.22); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; } } @media (max-width: 420px) { .siteHeaderInner { gap: 10px; } .brandMark { width: 32px; height: 32px; font-size: 20px; } .brandTitle { font-size: 12px; } .heroFacts span { font-size: 10px; } .heroFacts span:not(:last-child)::after { margin: 0 9px; } .portraitFrame { border-radius: 18px; } .faqList details p { padding-right: 20px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0.01ms !important; } }
Cookie-файлы
Настройка cookie-файлов
Детальная информация о целях обработки данных и поставщиках, которые мы используем на наших сайтах
Аналитические Cookie-файлы Отключить все
Технические Cookie-файлы
Другие Cookie-файлы
Мы используем файлы Cookie для улучшения работы, персонализации и повышения удобства пользования нашим сайтом. Продолжая посещать сайт, вы соглашаетесь на использование нами файлов Cookie. Подробнее о нашей политике в отношении Cookie.
Понятно Подробнее
Cookies