.sect-head{padding:var(--s8) var(--s2) var(--s5)} .sect-head.center{max-width:760px} .sect-head h2 + .sub{margin-top:var(--s3)} /* -------------------------------------------------------------- 8. ГЕРОИ */ /* 8.1 Афиша: центр, крупный титул, стикеры по углам */ .hero-poster{position:relative;text-align:center;padding:var(--s8) var(--s4) var(--s6)} .hero-title{font-size:var(--t-hero);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.98} .hero-poster .sub{margin:var(--s4) auto 0} .hero-poster .btn{margin-top:var(--s6)} .hero-poster__deco{position:absolute;inset:0;pointer-events:none} .hero-poster__deco > *{position:absolute} /* Мобильный: длинное слово в титуле не влезало в 320–390 и обрезалось, а стикеры ложились поверх текста. Кегль считаем от ширины экрана, декор убираем — на 390 он всё равно наезжает на заголовок и подводку. */ @media(max-width:560px){ .hero-title{font-size:clamp(24px,calc(10vw - 6px),44px)} .hero-poster__deco{display:none} } /* 8.2 Сплит: копия слева, квиз или форма справа */ .hero{display:grid;gap:var(--gap);grid-template-areas:"copy" "form" "facts"} @media(min-width:900px){ .hero{grid-template-columns:1.12fr 1fr;grid-template-areas:"copy form" "facts facts";align-items:stretch} } .hero__copy{grid-area:copy;background-color:var(--surface);border-radius:var(--r-xl); padding:var(--s7) var(--s5);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4); container-type:inline-size} /* В сплите заголовок мельче, чем на афише: рядом стоит форма, им нельзя спорить по весу. Кегль считается от СВОЕЙ колонки (cqi), а не от окна. С вьюпортными единицами на 900 — там, где герой только что стал двухколоночным, — колонка падает до 404 px, а кегль остаётся 37, и H1 уходит на четвёртый этаж мимо правила 1.2 «мера заголовка». От колонки он держит 19 знаков в строке на любой ширине. */ .hero__copy h1{font-size:clamp(30px,8.5cqi,50px)} /* Нижний блок копии прижат вниз — так левая и правая колонки заканчиваются вровень. */ .hero__copy .hero__bottom{margin-top:auto;padding-top:var(--s5);display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start} /* Двухчастный заголовок-зеркало интента («Ищете X? Начните с Y») — по сути два заголовка в одном H1, и меряется он как два: 2 строки + 2. Такой герой ловит поисковый спрос: вопрос повторяет запрос человека, вторая часть перехватывает его на шаг раньше. В базовой пропорции 1.12fr колонка даёт 584 px, и заголовок уходит на пятый этаж — поэтому у варианта своя пропорция и спокойнее кегль. */ @media(min-width:900px){ .hero--copy-wide{grid-template-columns:1.42fr 1fr} .hero--copy-wide .hero__copy h1{font-size:clamp(28px,6.2cqi,44px)} } /* Экран лид-формы. Заголовок следующего блока обязан выглядывать из-под сгиба: иначе экран читается как конец страницы — замер показал, что при штатном зазоре секций H2 витрины уходил на 17 px ниже сгиба на 1440×900, и человек не знал, что дальше вообще что-то есть. Зазор после этого экрана меньше обычного ровно поэтому. */ .hero--lead + section{margin-top:var(--s2)} /* Указатель вместо второй кнопки. Одно действие на экране — квиз. */ .hero__point{font-size:var(--t-sm);font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:9px} .hero__point::after{content:"→";font-family:var(--f-display);font-weight:800;font-size:18px;color:var(--a)} @media(max-width:899px){.hero__point::after{content:"↓"}} .hero__form{grid-area:form;display:flex;flex-direction:column} /* Узкая колонка: объект сдвигаем к центру, иначе вылезает за край карточки. */ @media(max-width:899px){.hero__form .rise{--rise-obj-x:58%}} .hero__form > *{flex:1} /* Лента фактов. В герое она занимает свою грид-область, но нужна и под другими блоками — раскладка одна, привязка к герою только у .hero__facts. */ .hero__facts,.factrow{display:grid;gap:var(--gap);grid-template-columns:1fr} .hero__facts{grid-area:facts} @media(min-width:520px){.hero__facts,.factrow{grid-template-columns:repeat(3,1fr)}} /* Портрет в геройской карточке — отдельная колонка-панель во всю высоту карточки. Не плавающая вставка поверх текста: с обычным (не вырезанным) фото это читается как реклама. */ .hero__copy{position:relative;overflow:hidden} .hero__person{display:none} @media(min-width:900px){ .hero__copy--person{display:grid;grid-template-columns:1fr 260px;gap:var(--s5); align-content:start;padding-right:var(--s5)} .hero__copy--person > *:not(.hero__person){grid-column:1;justify-self:start} .hero__person{display:block;grid-column:2;grid-row:1/-1;align-self:stretch; width:100%;height:100%;min-height:340px;object-fit:cover; object-position:var(--focal,center 12%);border-radius:var(--r-lg)} } .factchip{background-color:var(--a-pale);border-radius:var(--r-lg);padding:var(--s4);display:flex; align-items:center;gap:var(--s3);font-size:var(--t-sm);font-weight:600;color:var(--a-deep);line-height:1.25} .factchip .sticker{background:var(--page)} /* ------------------------------------------------------ 9. ШАГИ (две формы) */ /* 9.1 Карточки с эскалацией цвета: серый → процесс → результат */ .steps-cards{display:flex;flex-direction:column;gap:var(--gap)} .step-card{background:var(--surface);border-radius:var(--r-xl);padding:var(--s5)} @media(min-width:760px){.step-card{padding:35px}} /* макет: карточка шага 595×218, паддинг 35 */ .step-card .tag{margin-bottom:var(--s4)} .step-card h3{margin-bottom:var(--s3)} .step-card p{font-size:var(--t-sm);color:var(--ink-2)} .step-card--proc{background:var(--proc-pale)} .step-card--done{background:var(--done-pale)} /* 9.2 Нумерованная лестница — компактная форма */ .steps{display:flex;flex-direction:column} .step{position:relative;padding:0 0 var(--s5) 56px} .step::before{content:"";position:absolute;left:19px;top:44px;bottom:0;width:2px;background:var(--line)} .step:last-child{padding-bottom:0}.step:last-child::before{display:none} .step__n{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--a); color:var(--a-on);font-family:var(--f-display);font-weight:800;font-size:var(--t-md); display:flex;align-items:center;justify-content:center} .step h3{margin-bottom:var(--s1);padding-top:7px} .step p{font-size:var(--t-sm);color:var(--ink-2)} /* ========================================================= 10. ВЫХОД ЗА КРАЙ */ /* 10.0 ПРИЁМ «RISE» — плашка + объект, выходящий за её верхний край + белое тело. Разгадан с фрейма дизайнеров 350-25408. Универсальная конструкция, не только про преподавателей: подставляется любой вырезанный объект — человек, телефон, стопка тетрадей, кубок. Три слоя, порядок z снизу вверх: 1) .rise__plate — цветная плашка (единственное место с градиентом) 2) .rise__obj — объект; его верх поднят над плашкой на --rise-out 3) .rise__body — белое тело, наезжает на плашку снизу и режет объект Геометрия задаётся тремя числами, пропорции сняты с макета (1 : 2.4 : 4.8). */ .rise{ --rise-out:72px; /* макушка выше плашки. Фрейм: 72 при карточке 385 */ --rise-plate:143px; /* видимая высота плашки. Фрейм: 143 при карточке 385 */ --rise-lap:var(--r-xl); /* нахлёст: плашка уходит под тело минимум на радиус */ --rise-c:var(--warm); /* цвет плашки = роль из палитры */ --rise-obj-x:50%; /* горизонтальный центр объекта */ /* Размер объекта НЕ подбирается руками. PNG нормализованы скриптом tools/normalize.py: композиция задана в высотах головы (макушка→белое тело = 1.73 головы), холст 1:1.324. Отсюда высота объекта считается из видимой полосы, а ширина — из пропорции холста. Поэтому фигура физически не может упереться в край плашки и обрезаться вертикально. */ --rise-obj-band:.541; /* какая доля холста видна над белым телом */ display:flex;flex-direction:column;position:relative; } /* Та же ловушка специфичности, что у .qopt[hidden] (раздел 8): display:flex классом бьёт UA-правило [hidden]{display:none} при равной специфичности. */ .rise[hidden]{display:none} .rise__stage{position:relative;overflow:hidden;flex:none; height:calc(var(--rise-out) + var(--rise-plate) + var(--rise-lap))} .rise__plate{position:absolute;left:0;right:0;top:var(--rise-out);bottom:0; border-radius:var(--r-xl) var(--r-xl) 0 0; /* Подложка снята через Figma API с фрейма 353:25745. Там радиальный градиент (светлый центр → тёмный край), стопы 0 / 0.551 / 1, радиусы 57% × 61% от центра, поверх — вектор-волна обводкой 43px на opacity .14. Волна лежит в img/figma/wave.svg, здесь она инлайном, чтобы красилась ролью. */ background: url("data:image/svg+xml;charset=utf-8,") no-repeat -29.2% -13.2% / 190.1% 109.5%, radial-gradient(57% 61% at 50% 50%, color-mix(in srgb,var(--rise-c) 58%,#ffffff) 0%, var(--rise-c) 55.1%, color-mix(in srgb,var(--rise-c) 74%,#0d1330) 100%)} .rise__obj{position:absolute;top:var(--rise-obj-top,0);left:var(--rise-obj-x);transform:translateX(-50%); height:calc((var(--rise-out) + var(--rise-plate)) / var(--rise-obj-band)); width:auto;max-width:94%;object-fit:contain; object-position:top center;pointer-events:none;user-select:none} .rise__body{position:relative;z-index:2;margin-top:calc(-1 * var(--rise-lap)); background:var(--page);border-radius:var(--r-xl);padding:var(--s5); flex:1;display:flex;flex-direction:column; min-height:calc(var(--rise-plate) * 2)} /* пропорция макета: тело вдвое выше видимой плашки */ /* Надпись прямо на плашке. Нужна только широкой форме, где плашка иначе пустует. */ /* Плашка — всегда насыщенный цвет роли, она не инвертируется вместе с темой. --on-dark в ночи становится почти чёрным, и надпись тонула в синем. */ /* Надпись лежала прямо на плашке, а плашка — градиент, который к центру осветляется. Пиксельный замер по глифам: медиана 4.06, худшее 2.94, у подстроки 100% пикселей ниже порога. Дальше цвет не поднять — упирается в сам акцент. Поэтому надпись получает собственную тёмную подложку и перестаёт зависеть от того, какая роль стоит под ней. */ .rise__on{position:absolute;left:var(--s6);right:42%;bottom:calc(var(--rise-lap) + var(--s5));z-index:1;color:#fff; font-family:var(--f-display);font-weight:800;font-size:var(--t-lg);line-height:1.2;letter-spacing:-.02em; background:rgba(14,16,26,.82);border-radius:var(--r-md);padding:12px 16px} .rise__on span{display:block;font-family:var(--f-text);font-weight:500;font-size:var(--t-sm); opacity:.86;letter-spacing:0;margin-top:6px} /* Объект-экран: широкий скрин в тёмной рамке. Масштаб задаётся шириной, не высотой. */ .rise__obj--frame{height:auto;width:var(--rise-obj-w,84%);background:var(--contrast); border-radius:var(--r-lg);padding:7px;display:block} .rise__obj--frame img{display:block;width:100%;border-radius:10px} /* Объект у правого края — для широкой формы. На узком экране едет к центру. */ .rise--right{--rise-obj-x:76%} @media(max-width:759px){.rise--right{--rise-obj-x:54%}} /* Тело .rise — колонка внутри колонки. На планшете двухколоночная раскладка внутри него давала 313 px, и H2 именного курса рвался на три строки. Внутри тела делимся позже, чем секция: с 1024, а не с 760. */ @media(max-width:1023px){.rise__body .grid-2{grid-template-columns:1fr}} /* Плашка целиком, без выхода за край — когда объекта нет (пустой слот, «и ещё N») */ .rise--flat{--rise-out:0px} .rise--flat .rise__plate{border-radius:var(--r-xl)} /* 10.1 Витрина преподавателей — «rise» с людьми. Ровно 3 в ряд. */ .people{display:grid;gap:var(--gap);grid-template-columns:1fr} .people > *{min-width:0} /* иначе имя в 26px не даёт колонке сжаться и ряд распирает страницу */ @media(min-width:760px){.people{grid-template-columns:repeat(3,1fr)}} /* На планшете 35 паддинга + имя 26 в три колонки не помещаются — уплотняем */ .person{--rise-c:var(--warm)} .person--brand{--rise-c:var(--brand)} .person--hot{--rise-c:var(--hot)} .person__body{padding:35px} /* фрейм: 35 со всех сторон */ .person__body h3{font-size:26px;line-height:1.0;letter-spacing:-.025em} /* фрейм: 26/26 */ .person__rate{display:block;font-size:var(--t-xs);font-weight:700;color:var(--warm-deep);margin-top:var(--s4)} .person__body > p{font-size:var(--t-sm);color:var(--ink-2);margin-top:var(--s3)} .person__ask{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4); margin-top:auto;padding-top:var(--s6)} .person__ask span{font-size:16px;color:var(--ink-2);line-height:1.15;max-width:22ch} /* фрейм: 16/16 */ /* 10.2 ОТЗЫВ С ЛИЦОМ (.voice) — цитата, регалии и вырезанный портрет рядом. Пришёл на место «строки-профиля без фото»: безликий блок читался как заготовка, которую забыли доделать. Запрет «лицо мельче 100 px» никуда не делся — здесь портрет 176 px, и работает он не как витрина, а как подпись под цитатой: витрина отвечает «кто у вас есть», этот блок — «кто именно это сказал». Конструкция та же, что у .rise, в мелком масштабе: цветная плашка роли, макушка выше её края, срез по нижней кромке. Отдельного приёма не заводим. */ .voice{display:grid;gap:var(--s5);grid-template-columns:1fr} @media(min-width:560px){.voice{grid-template-columns:176px 1fr;align-items:end}} .voice > *{min-width:0} .voice__face{position:relative;height:150px;border-radius:var(--r-lg);align-self:end; background:radial-gradient(72% 64% at 50% 100%, color-mix(in srgb,var(--voice-c,var(--warm)) 60%,#ffffff), color-mix(in srgb,var(--voice-c,var(--warm)) 96%,#0d1330))} /* Плашка не режет фигуру: PNG нормализованы под .rise, верх холста — макушка. Высота объекта задаётся от плашки, поэтому упереться в её край он не может. */ .voice__face img{position:absolute;left:50%;bottom:0;transform:translateX(-50%); height:206px;width:auto;max-width:none;object-fit:contain;object-position:bottom center; pointer-events:none;user-select:none} .voice--brand{--voice-c:var(--brand)} .voice--hot{--voice-c:var(--hot)} .voice--proc{--voice-c:var(--proc)} @media(max-width:559px){ /* На мобиле портрет во всю ширину карточки — плашка становится полосой */ .voice__face{height:132px} .voice__face img{height:182px} } /* Текстовая часть отзыва — она же прежняя строка-профиль. Работает и без портрета: так блок ставят на страницу, где лицо уже показано витриной. */ .teacher{display:flex;flex-direction:column;gap:var(--s2)} .teacher__meta{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s2) 0} .teacher p{font-size:var(--t-sm);color:var(--ink-2)} .quote{background:var(--page);border-radius:var(--r-md);padding:var(--s4);font-size:var(--t-sm); line-height:1.45;margin-top:var(--s3)} .quote cite{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:var(--s2)} /* --------------------------------------- 10.5 ЦЕПОЧКА / ДОРОЖКА (chain) */ /* Последовательность без нумерации: темы, классы, ступени продукта. */ .chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--s2)} .chain__i{flex:1 1 0;min-width:130px;background:var(--surface);border-radius:var(--r-lg);padding:var(--s4) var(--s5); position:relative;display:flex;flex-direction:column;gap:5px} .chain__i b{font-family:var(--f-display);font-size:var(--t-md);font-weight:800} .chain__i span{font-size:var(--t-xs);color:var(--ink-2)} .chain__i + .chain__i::before{content:"";position:absolute;left:-13px;top:50%;width:10px;height:10px; border-right:2px solid var(--ink-3);border-top:2px solid var(--ink-3);transform:translateY(-50%) rotate(45deg)} .chain__i--proc{background:var(--proc-pale)} .chain__i--proc b,.chain__i--proc span{color:var(--proc-deep)} .chain__i--done{background:var(--done-pale)} .chain__i--done b,.chain__i--done span{color:var(--done-deep)} .chain__i--now{background:var(--a);color:var(--a-on)} .chain__i--now b,.chain__i--now span{color:var(--a-on)} @media(max-width:700px){.chain{flex-direction:column} .chain__i{flex:0 0 auto} /* иначе flex-basis становится высотой звена */ .chain__i + .chain__i::before{left:50%;top:-11px;transform:translateX(-50%) rotate(135deg)}} /* ------------------------------- 10.6 СРАВНЕНИЕ ПО КРИТЕРИЯМ (vs--labeled) */ .vs--labeled{grid-template-columns:1fr 1fr;gap:var(--s2) var(--s2)} .vs__label{grid-column:1/-1;font-size:var(--t-xs);font-weight:700;text-transform:uppercase; letter-spacing:.07em;color:var(--ink-3);padding-left:var(--s4);margin-top:var(--s3)} .vs__label:first-child{margin-top:0} /* -------------------------------------------- 10.7 ПОЛАРОИД (фото + подпись) */ /* Живые кадры: ученики, розыгрыши, встречи. Только настоящие фото. */ .polaroid{background:var(--page);border-radius:var(--r-lg);padding:var(--s3) var(--s3) var(--s4); box-shadow:none;border:1px solid var(--line)} .polaroid img{border-radius:var(--r-md);aspect-ratio:4/3;object-fit:cover;width:100%} .polaroid figcaption{font-size:var(--t-xs);color:var(--ink-2);margin-top:var(--s3);padding:0 var(--s1)} [data-theme="night"] .polaroid{background:var(--surface)} /* -------------------------------------------------------------- 11. МЕЛОЧЬ */ .chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border-radius:var(--r-pill); padding:9px 16px;font-size:var(--t-xs);font-weight:600;color:var(--ink-2)} .chip--pale{background:var(--a-pale);color:var(--a-deep)} .chip--outline{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-2)} .chip-row{display:flex;flex-wrap:wrap;gap:var(--s2)} .plate{border-radius:var(--r-md);padding:var(--s4) var(--s5);font-size:var(--t-sm);line-height:1.45} .plate b{font-weight:700} .plate--neutral{background:var(--surface-2);color:var(--ink)} .plate--accent{background:var(--a-pale);color:var(--a-deep)} .plate--done{background:var(--done-pale);color:var(--done-deep)} .plate--sun{background:var(--sun-pale);color:var(--sun-deep)} .plate--hot{background:var(--hot-pale);color:var(--hot-deep)} .price{display:inline-flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap} .price s{font-size:var(--t-lg);font-weight:600;color:var(--ink-3)} .price b{font-family:var(--f-display);font-size:38px;font-weight:900;color:var(--a);letter-spacing:-.03em} .price em{font-style:normal;font-size:var(--t-sm);color:var(--ink-2)} .dash-list{list-style:none;display:flex;flex-direction:column;gap:var(--s3)} .dash-list li{position:relative;padding-left:22px;font-size:var(--t-md)} .dash-list li::before{content:"—";position:absolute;left:0;color:var(--a);font-weight:700} /* Зачёркнутый якорь цены прямо в пункте списка: «урок 30–40 минут ~1 500 ₽~ бесплатно». Гасится до третьего тона — иначе старая цена спорит по весу с тем, что человек получает на самом деле. Тег «бесплатно» рядом берёт роль «результат». */ .dash-list s{color:var(--ink-3);text-decoration-thickness:1px} .vs{display:grid;gap:var(--s2);grid-template-columns:1fr 1fr} .vs__head{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em; color:var(--ink-2);padding-left:var(--s4);margin-bottom:var(--s1)} .vs__head--win{color:var(--a-deep)} /* ----------------------------------------------------------- 12. ШАПКА */ .topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4); padding:var(--s4) 0;position:sticky;top:0;z-index:40;background:var(--page)} .logo{font-family:var(--f-display);font-weight:900;font-size:24px;letter-spacing:-.04em; color:var(--ink);text-decoration:none;display:inline-flex;align-items:baseline} .logo em{font-style:normal;font-weight:600;font-size:19px;color:var(--ink-2);margin-left:8px} /* Знак прислан Даней (logo-light-theme.svg) — свои фирменные цвета, не токены роли: логотип школы не перекрашивается темой, как и любой другой чужой/свой бренд-знак. */ .logo__mark{width:28px;height:15px;margin-right:10px;align-self:center} /* ------------------------------------------------------------ 13. КВИЗ */ .quiz{background-color:var(--contrast);border-radius:var(--r-xl);padding:var(--s5); color:var(--on-contrast);display:flex;flex-direction:column;min-height:440px} .quiz--accent{background-color:var(--a);color:var(--a-on)} .quiz--surface{background-color:var(--surface);color:var(--ink)} /* Белый квиз. Сам по себе безликий — берётся ТОЛЬКО в связке с .rise-шапкой (H1). */ .quiz--paper{background-color:var(--page);color:var(--ink)} /* Как только фон опции берётся из темы, текст обязан браться оттуда же: --paper-ink не инвертируется и в ночи давал чёрное на тёмном. */ .quiz--paper .qopt{background:var(--surface);color:var(--ink);box-shadow:none} .quiz--paper .qopt:hover,.quiz--paper .qopt.sel{box-shadow:inset 0 0 0 2px var(--a)} /* Тот же капкан, что и у .qopt выше: фон берётся из темы, а цвет текста оставался в неинвертируемом --paper-ink — в тёмной теме чёрное на тёмном (1.3). Раз фон из темы, то и текст с плейсхолдером обязаны браться оттуда же. */ .quiz--paper .field{background:var(--surface);box-shadow:none;color:var(--ink)} .quiz--paper .field::placeholder{color:var(--ink-3)} .quiz--pale{background-color:var(--a-pale);color:var(--a-deep)} .quiz--surface .qopt,.quiz--pale .qopt{background:var(--page);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)} /* Наведение и выбор были объявлены одним правилом и совпадали пиксель в пиксель. Теперь hover — тонкий контур контрола, выбор — толстый акцентный. */ .quiz--surface .qopt:hover,.quiz--pale .qopt:hover,.quiz--paper .qopt:hover{box-shadow:inset 0 0 0 1.5px var(--control)} .quiz--surface .qopt.sel,.quiz--pale .qopt.sel,.quiz--paper .qopt.sel{box-shadow:inset 0 0 0 2.5px var(--a)} .quiz--surface .field,.quiz--pale .field{box-shadow:inset 0 0 0 1.5px var(--line)} .quiz--surface .quiz__sub,.quiz--pale .quiz__sub,.quiz--paper .quiz__sub{color:var(--ink-2);opacity:1}