/* ========================================================= Собери портфель к новому учебному году — Zerocoder Первый экран, 29 августа — 2 сентября 2026. Вёрстка живёт в координатах макета: 1200 × 600. Всё, что шире, масштабируется целиком через zoom (--z считается инлайном в и в script.js — правь оба места): 1200 → ×1 1440 → ×1.2 1920 → ×1.6 Ниже 1200 zoom не применяется — работают медиазапросы (1199 / 991 / 767 / 575), как в big-summer-sale-2026. ========================================================= */ :root{ /* palette */ --wine:#7a1525; /* бордовая страница блокнота — значение из макета */ /* --wine-deep убран: кольца пружины рисовались им, теперь это binding.png */ --lav:#c5c8ff; /* фон — и страницы, и подложки под hero, один тон */ --btn:#b5b0ef; --btn-hover:#a49eea; --cream:#fcf7f1; /* тот же тон, что заливка в date-lettering.svg */ /* второй экран — все значения из Dev Mode */ --gift-bg:#f9eee2; /* плашка подарка */ --gift-line:#f1e4d7; /* её обводка */ --pink:#ffdfe7; /* плашка процента и пройденная часть ползунка */ --chalk:#193c36; /* промокод на доске */ /* metrics */ --r-hero:16px; --r-photo:10px; --r-card:10px; --r-btn:10px; } *,*::before,*::after{box-sizing:border-box} /* Селект каталога живёт только на телефоне, разметку ему создаёт скрипт. */ .tabs__select{display:none} /* Глобус в блоке «Ступень выше» намеренно свисает за правую кромку: в макете он стоит на 955px при ширине 262, то есть его край уходит на 1217 при холсте в 1200. Figma такое просто обрезает по границе фрейма, а браузер добавляет горизонтальную прокрутку — страницу становится можно утащить вбок, и тогда лавандовое поле слева съедается, а справа удваивается. Ровно на это и жаловались: «сайт съехал влево». clip вместо hidden: hidden сделал бы body контейнером прокрутки, а clip только режет. hidden оставлен первой строкой как запасной для старых браузеров — кто понимает clip, перезапишет. */ html,body{ overflow-x:hidden; overflow-x:clip; } /* Плавная прокрутка по якорю: кнопка первого экрана ведёт к каталогу. scroll-margin-top — чтобы заголовок каталога не упирался в кромку экрана. */ html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } #catalog{scroll-margin-top:20px} html{-webkit-text-size-adjust:100%} body{ margin:0; zoom:var(--z,1); font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--wine); background:var(--lav); -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} /* --------------------------------------------------------- HERO — сцена 1200 × 600 --------------------------------------------------------- */ /* Высота 576 = 10 (поле сверху) + 556 (фото) + 10 (поле снизу). Ровно столько в макете: фото кончается на 566, кремовая страница начинается с 576, между ними 10px лаванды — и на этот стык садится пружина, сшивая два блока. Поэтому у .hero нет нижнего margin, а у .page — верхнего. overflow видимый: плашка таймера и розовый стикер в макете свисают ниже фото на кремовую страницу. z-index поднимает их над .page, который идёт следом. */ .hero{ position:relative; z-index:2; width:1200px; height:576px; /* Сверху ничего не добавляем: в макете фрейм начинается с нуля, а фотография с 10px — эта полоска лаванды уже заложена в высоту блока (10 + 556 + 10). */ margin:0 auto; background:var(--lav); border-radius:var(--r-hero); isolation:isolate; } /* Фотография занимает 1180 × 556 в координатах макета, без кропа. Файл при этом 1770 × 834 — ровно 1,5× — то есть на плотных экранах картинка не мылится. Сверху и по бокам ровная лавандовая рамка 10px, снизу остаётся 34px: там живут пружина и плашка таймера. */ .hero__photo{ position:absolute; top:10px; left:10px; width:1180px; height:556px; border-radius:var(--r-photo); /* Скругление своё, а не от .hero: фотография вставлена с отступом 10px, до кромок сцены её углы не достают и радиусом контейнера не обрежутся. */ } /* --------------------------------------------------------- Бордовая страница блокнота --------------------------------------------------------- */ .card{ position:absolute; z-index:2; left:20px; top:20px; /* 690px — ширина из макета (нода Rectangle 1). Раньше стояло 700px: значение подбиралось под прежнюю фотографию, где рюкзак начинался с 740px. С новым кадром гадать не нужно, берём из макета. Текст помещается: самая длинная строка «к новому учебному году» — 558px при 602px контента. */ width:690px; /* 690 x 536 при 20/20 — числа из макета (нода Rectangle 1), подтверждены Лидой 27 августа. Фотография 1180 x 556 стоит с 10/10, то есть по высоте она больше плашки на 20px, а слева до плашки 10px. Скругление у обеих одинаковое, 10px. */ height:536px; padding:44px 44px 34px; display:flex; flex-direction:column; align-items:center; border-radius:var(--r-card); /* тетрадная клетка поверх бордового */ background: repeating-linear-gradient(to right, rgba(255,255,255,.055) 0 1px, transparent 1px 34px), repeating-linear-gradient(to bottom, rgba(255,255,255,.055) 0 1px, transparent 1px 34px), var(--wine); box-shadow:0 18px 40px rgba(58,10,26,.18); } /* Натуральный размер экспорта — 290 × 55. Раньше стояло 430px «на глаз», надпись была заметно крупнее макета. */ .card__date{ width:290px; height:55px; margin:0 0 32px; } /* Настройки заголовка — из Figma, не подбирались. */ .card__title{ margin:0 0 30px; font-size:50px; font-weight:600; line-height:1; /* 100% */ letter-spacing:-.03em; color:var(--cream); /* #fcf7f1 */ text-align:center; } /* Плашка под «Собери портфель»: сплошная кремовая, текст на ней бордовый. inset посчитан по метрикам Manrope 600, а не на глаз. В строке 50px при line-height 100% базовая линия лежит на 44.1px от верха, капитель начинается с 8.1px и имеет высоту 36px. Плашка идёт от «капитель −6px» до «базовая +4px», то есть inset 2px сверху и снизу, высота 46px. Выносная «р» в «портфель» при этом выходит за нижний край плашки — так же, как в макете. */ .card__title .mark{ position:relative; display:inline-block; padding:0 12px; white-space:nowrap; color:var(--wine); /* #7a1525 */ } .card__title .mark::before{ content:""; position:absolute; inset:2px 0; background:var(--cream); border-radius:3px; z-index:-1; } /* Настройки подзаголовка — из Figma. В макете он размечен переменной --second-family, но за ней стоит тот же Manrope, второй шрифт не нужен. */ .card__text{ margin:0; font-size:20px; font-weight:400; line-height:1.3; /* 130% */ letter-spacing:0; color:var(--cream); /* #fcf7f1 */ text-align:center; text-wrap:balance; } /* Кнопка идёт следом за подзаголовком с фиксированным отступом, а не прибита к низу карточки (было margin-top:auto). Под ней остаётся свободное поле бордовой страницы ~82px — так в макете. */ .card__btn{ margin-top:36px; width:322px; padding:25px 30px; border:0; border-radius:var(--r-btn); background:var(--btn); color:var(--wine); font-family:inherit; font-size:19px; font-weight:700; line-height:1; text-align:center; text-decoration:none; cursor:pointer; transition:background .18s ease, transform .18s ease, box-shadow .18s ease; } .card__btn:hover{ background:var(--btn-hover); transform:translateY(-2px); box-shadow:0 10px 22px rgba(58,10,26,.24); } .card__btn:active{transform:translateY(0)} .card__btn:focus-visible{outline:3px solid var(--cream);outline-offset:3px} /* --------------------------------------------------------- Пружина блокнота — кольца седлают нижний край страницы. binding.png (978 × 39) повторяется по горизонтали: шаг колец остаётся родным, а ширину блока можно менять свободно. --------------------------------------------------------- */ /* Пружина идёт почти во всю ширину блока (x 112…1089 в макете), а короткой кажется потому, что слева её перекрывает плашка таймера, справа — стикер. Раньше здесь стояли 350px «на глаз» — кольца обрывались на полпути. */ .binding{ position:absolute; z-index:3; left:112px; top:548px; /* садится на стык фото и кремовой страницы */ width:977px; height:39px; background:url("assets/img/binding.png") left center repeat-x; pointer-events:none; } /* --------------------------------------------------------- Колокольчик — на стыке страницы блокнота и фотографии --------------------------------------------------------- */ /* Координаты из макета (нода 650:40), а не вычисленные от кромки карточки: прежние 651/14 были выведены из ширины 700px, которую я подобрал сам. */ .bell{ position:absolute; z-index:4; left:630px; top:32px; width:138px; /* натуральный размер экспорта — 138 × 148 */ height:148px; pointer-events:none; } /* --------------------------------------------------------- Плашка обратного отсчёта. Часы, рамка и кленовый лист — одна картинка timer-plate.png (400 × 160). Текст ложится в её правую часть, поэтому отступ слева задан в процентах: при смене ширины плашки не поедет. --------------------------------------------------------- */ /* Плашка свисает ниже фотографии на кремовую страницу — так в макете, поэтому отсчёт сверху, а не от нижней кромки блока (при `bottom` она уезжала вместе с высотой .hero и прижималась к краю карточки). 474 = 515 − 41: в макете кремовое тело плашки начинается на y=515, а внутри файла timer-plate.png оно начинается на 41px (сверху песочные часы). */ .timer-wrap{ position:absolute; z-index:4; left:30px; top:472px; width:394px; /* натуральный размер экспорта — 394 × 159 */ } .timer{ position:relative; aspect-ratio:394/159; /* Верхний паддинг 3.66% опускает текст на 7.2px. Геометрический центр картинки лежит на 79.5px, а центр самой рамки в зоне текста — на 86.7px (замер кромок в timer-plate.png), поэтому по центру контейнера текст визуально задирался вверх. Проценты считаются от ширины, так что поправка масштабируется вместе с плашкой. */ padding:3.66% 16% 0 33%; display:flex; flex-direction:column; justify-content:center; background:url("assets/img/timer-plate.png") center/contain no-repeat; } /* Наклон на всём блоке, а не на одной строке: обе строки должны идти параллельно рамке плашки. ЗНАК. В Figma поворот отсчитывается против часовой стрелки, в CSS rotate() — по часовой, поэтому «4°» из макета здесь пишется как -4deg. Замер кромки в timer-plate.png даёт -3.8° — сходится. */ .timer__text{ transform:rotate(-4deg); transform-origin:center; } .timer__label, .timer__value{ margin:0; font-size:17px; font-weight:700; line-height:1.4; color:var(--wine); white-space:nowrap; } /* --------------------------------------------------------- Розовый стикер. Держим натуральные 369 × 190 экспорта: при них background-size 100% 100% не искажает рваный край. Текст центрируется внутри флексом — отсюда «по центру листка», а не по верхней кромке. min-height, а не height: если текст подарков вырастет, лист потянется, а не обрежет содержимое (край при этом слегка растянется — это цена, о ней стоит помнить). --------------------------------------------------------- */ /* Стикер тоже свисает на кремовую страницу. Координаты сняты замером розовой бумаги по рендеру макета (772..1127 по X, 451..613 по Y) и пересчитаны в положение коробки: внутри note-paper.svg бумага начинается на 5px слева и 24px сверху. Прежние right/bottom были прикидкой по скриншоту. */ .note{ position:absolute; z-index:4; left:767px; top:442px; width:369px; min-height:190px; padding:20px; display:flex; align-items:center; justify-content:center; background:url("assets/img/note-paper.svg") center/100% 100% no-repeat; filter:drop-shadow(0 10px 22px rgba(58,10,26,.18)); } /* Текст идёт параллельно бумаге. Наклон самой бумаги уже нарисован внутри note-paper.svg, крутить .note не нужно — только текст. ЗНАК: «−3°» из Figma здесь читается как +3deg (см. .timer__text). Замер верхней кромки в note-paper.svg даёт +3.5° — сходится. */ /* Настройки текста стикера — из Figma. */ .note p{ margin:0; font-size:14px; font-weight:500; line-height:1.3; /* 130% */ text-align:center; color:var(--wine); /* #7a1525 */ text-wrap:pretty; transform:rotate(3deg); transform-origin:center; } /* clip.png — квадрат 131 × 131 с большими прозрачными полями, поэтому натуральный размер здесь не ориентир: ставим по видимой части. Внутри бокса 60px сама скрепка занимает y 11..49. ПОСАДКА. Скрепка должна держать бумагу, а не висеть над ней, и тут мешает наклон листа: верхняя кромка note-paper.svg идёт вниз вправо, и в точке, где стоит скрепка (≈317px от левого края), лист начинается не с 0, а с 15px. При прежних top:-30px перекрытие выходило 4px — скрепка болталась в воздухе. top:-11px даёт 23px, то есть 60% её высоты на бумаге. */ .note__clip{ position:absolute; right:22px; top:-11px; width:60px; height:60px; transform:rotate(4deg); } /* ========================================================= ВТОРОЙ ЭКРАН И НИЖЕ Кремовая страница 1180 × 2528, внутри бордовый лист 1140 × 2187 со ступенями, калькулятором и доской. Координаты те же, что в макете (фрейм 1200 × 3123). ========================================================= */ .visually-hidden{ position:absolute; width:1px;height:1px; margin:-1px;padding:0;border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; } /* Плашка под строкой заголовка. В макете у неё НЕТ горизонтальных полей: ширина плашки равна ширине текста (замерено по нодам — «Как воспользоваться» 398px при тексте 398px, «Собери» 144 при 144). Высота — это line-box при line-height 1.2, то есть 48px на кегле 40. Поэтому фон вешаем прямо на inline-block, без ::before с inset, как в первом экране. */ .mark--lav, .mark--cream, .mark--wine{ display:inline-block; line-height:1.2; /* В макете у всех плашек стоит whitespace-nowrap: строка на плашке не рвётся, даже если оказывается шире своего контейнера. Без этого «2 или несколько программ в одном заказе» ломалось на три строки и наезжало на подзаголовок. */ white-space:nowrap; } .mark--lav{background:var(--lav)} .mark--cream{background:var(--cream)} .mark--wine{background:var(--wine);color:var(--cream)} /* --------------------------------------------------------- Кремовая страница --------------------------------------------------------- */ .page{ position:relative; width:1180px; /* Вплотную к .hero: зазор в 10px уже заложен в его высоту (576 против 566 у фотографии). Свой margin-top здесь схлопывался бы с нижним у .hero и давал лишние 40px — из-за этого блоки и разъезжались. Снизу поля нет намеренно. Было 40px, и оно схлопывалось с 10px у .lift — зазор выходил 40 вместо 10, а пружина на стыке (она внутри нижнего блока и вылезает вверх на 28px) целиком повисала на лавандовом фоне вместо кремовой плашки. У двух других стыков зазор 10px, и там всё ложилось правильно. */ margin:0 auto; padding:105px 0 20px; background:var(--cream); border-radius:var(--r-hero); } /* --------------------------------------------------------- Заголовок второго экрана --------------------------------------------------------- */ .intro{ width:758px; margin:0 auto 50px; text-align:center; } .intro__title{ margin:0; font-size:40px; font-weight:600; line-height:1.2; letter-spacing:-.03em; /* −1.2px на кегле 40 */ color:var(--wine); } .intro__lead{ margin:20px 0 0; font-size:18px; font-weight:500; line-height:normal; color:var(--wine); } /* --------------------------------------------------------- Бордовый лист блокнота --------------------------------------------------------- */ .sheet{ position:relative; margin:0 20px; padding:110px 40px 40px; background:var(--wine); /* Углы прямые: в экспорте ноды Subtract контур идёт «H1140 V2187 H0 V0», без дуг. Скругления здесь нет, в отличие от карточек. */ } /* Прорези под пружину. Плитка 70 × 51 повторяется по горизонтали — шаг колец остаётся родным, как у binding.png в первом экране. Первое отверстие в макете стоит на 80px, центр плитки на 35 → полоса начинается с 45. Ширина 1050 = ровно 15 плиток, столько отверстий и вырезано в макете. */ .sheet__punch{ position:absolute; top:0; left:45px; width:1050px; height:51px; background:url("assets/img/binding-punch.svg") left top repeat-x; pointer-events:none; } /* --------------------------------------------------------- Ступени --------------------------------------------------------- */ .tiers{ display:grid; gap:10px; margin:0; padding:0; list-style:none; } .tiers--three{ grid-template-columns:repeat(3,1fr); margin-bottom:10px; } .tiers--two{ grid-template-columns:repeat(2,1fr); } .tier{ position:relative; min-height:358px; padding:20px 10px 10px; background:var(--cream); border-radius:var(--r-card); } .tier--wide{min-height:423px} /* Верхняя ступень инвертирована: бордовая карточка, кремовый текст. Плашки подарков внутри остаются светлыми — они те же, что и в остальных ступенях. Леттеринг для неё выгружен из Figma сразу кремовым (fill #FCF7F1), поэтому на светлой карточке он был бы не виден: менять цвет карточки и картинку надо вместе. */ /* Бордовая карточка на бордовом листе различима только обводкой — в макете это 1px кремовой линии по кромке (замер: #fcf7f1 на x=605 и y=1375). */ .tier--dark{ background:var(--wine); border:1px solid var(--cream); } .tier--dark .tier__sum{color:var(--cream)} /* Леттеринг и сумма отбиты от кромки на 20px, плашки подарков — на 10px: так в макете, поэтому паддинг карточки 10px, а этим двум добавлен отступ. */ .tier__name{ display:block; margin-left:10px; width:145px; height:45px; } /* Сумма и бейдж стоят в одной строке: раньше бейдж седлал верхнюю кромку карточки, и связь «такая сумма — такая скидка» на глаз не читалась. */ .tier__head{ /* Бейдж вынесен из потока (ниже), поэтому строка меряется по тексту, а не по картинке в 104px высотой — из-за неё карточка расходилась широкими отступами сверху и снизу от суммы. padding-right — резерв под бейдж, чтобы длинная сумма под него не заехала. */ margin:10px 10px 12px; padding-right:116px; } .tier__sum{ margin:0; font-size:22px; font-weight:700; line-height:1.15; letter-spacing:-.03em; color:var(--wine); } /* Подпись отдельной строкой и тише: крупная только сама сумма. */ .tier__sum-label{ display:block; margin-bottom:2px; font-size:14px; font-weight:500; letter-spacing:0; opacity:.75; } /* Бейдж стоит абсолютно, вровень со строкой суммы: в потоке он задавал высоту строки и разгонял отступы. Отсчёт от карточки — у неё position:relative. top:52 — так низ бейджа приходится примерно на низ суммы, а верх заходит на уровень леттеринга; по горизонтали они не пересекаются, леттеринг слева. */ .tier__badge{ position:absolute; z-index:2; right:10px; top:52px; width:104px; height:auto; pointer-events:none; } /* У пятой ступени бейдж со своими листьями и другой пропорцией. */ .tier__badge--big{width:132px;top:44px} /* Бейдж пятой ступени шире, значит и резерв под него больше: 132 + 10 отступ от кромки + 12 воздуха. Пятая ступень — единственная тёмная, по ней и целимся. */ .tier--dark .tier__head{padding-right:154px} /* Книга в первой ступени. Координата Y у этой ноды в метаданных не совпадает с тем, как она реально встаёт на макете (в файле y=1254, на отрисовке 1221): позиция снята замером по рендеру, а не по номиналу ноды. Нижний край книги на 7px свисает за кромку карточки — так же, как в макете. */ /* Книга привязана к НИЗУ карточки, а не к верху: высоту карточки задаёт самая длинная ступень в ряду, и от жёсткого top книга свисала за кромку. Раньше это было по макету, но после того как сумма с бейджем встали в строку, свисание превратилось в наезд на рамку. */ .tier__book{ position:absolute; left:32px; bottom:12px; width:246px; height:auto; pointer-events:none; } /* ---- плашки подарков ---- */ .gifts__label{ margin:0 0 8px 10px; font-size:14px; font-weight:700; line-height:1.2; color:var(--wine); } .tier--dark .gifts__label{color:var(--cream)} .gifts{ display:flex; flex-direction:column; gap:5px; margin:0; padding:0; list-style:none; } .gifts__pair{ display:flex; gap:5px; } .gifts__pair .gift{ flex:1 1 0; min-width:0; /* иначе длинное слово распирает колонку и пара разъезжается */ } .gift{ display:flex; align-items:center; gap:10px; padding:5px; border:1px solid var(--gift-line); border-radius:5px; background:var(--gift-bg); font-size:12px; font-weight:500; line-height:normal; color:var(--wine); } /* Розовая подложка, наклон и кроп предмета уже нарисованы внутри самого экспорта 40 × 40 — в разметке это одна картинка, а не вложенные блоки. */ .gift__ico{ flex:none; width:40px; height:40px; border-radius:5px; } .sheet__note{ margin:20px 0 0; font-size:10px; font-weight:500; line-height:normal; text-align:center; color:rgb(252 247 241 / .6); } /* --------------------------------------------------------- Калькулятор портфеля --------------------------------------------------------- */ .calc{ position:relative; height:372px; margin-top:160px; background:var(--lav); border-radius:var(--r-card); } /* Наклейки вокруг карточки. Все вылезают за её границы, поэтому обрезки у .calc нет; порядок слоёв — как в макете: листья, бумага, рюкзак, яблоко. */ .calc__leaves{ position:absolute; right:-70px; top:-124px; width:210px; height:184px; } /* Наклон листа нарисован НЕ внутри файла: это несведённая векторная группа, поворот приходится задавать здесь. Значение взято из CSS-кода Figma MCP (rotate 7.45deg), а не из панели Figma — в панели знак обратный. */ .calc__paper{ position:absolute; right:60px; top:-77px; width:360px; height:171px; transform:rotate(7.45deg); } /* Рюкзак: пять состояний в одной точке, видно активное. ПОЧЕМУ У КАЖДОГО СВОИ КООРДИНАТЫ. Состояния нарисованы по отдельности, и корпус рюкзака в файлах не совпадает: ширина 462…484px, центр гуляет на 27px. Если поставить все пять в один бокс, при переключении рюкзак заметно дёргается. Поэтому масштаб и смещение каждого посчитаны так, чтобы совпали центр и низ КОРПУСА (замер по нижней пятой части файла, где нет торчащих предметов). Числа получены скриптом, не подбором: `bag-1` при этом сошёлся с посадкой одиночного рюкзака, который стоял здесь раньше, до десятых (320 / 627 / −55). Тот файл (`backpack.png`) удалён — его полностью заменило первое состояние. Высота везде auto — она следует из ширины и натуральных пропорций файла. */ .calc__bags{ position:absolute; inset:0; pointer-events:none; } .calc__bag{ position:absolute; height:auto; opacity:0; transition:opacity .25s ease; } .calc__bag.is-on{opacity:1} .calc__bag--1{width:320px;left:627px;top:-54px} .calc__bag--2{width:324px;left:625px;top:-69px} .calc__bag--3{width:328px;left:615px;top:-53px} .calc__bag--4{width:329px;left:615px;top:-53px} .calc__bag--5{width:328px;left:616px;top:-52px} .calc__apple{ position:absolute; left:496px; top:111px; width:178px; height:187px; } .calc__head{ position:absolute; left:30px; top:30px; width:513px; } .calc__title{ margin:0; font-size:40px; font-weight:600; line-height:1.2; letter-spacing:-.03em; color:var(--wine); } .calc__lead{ margin:20px 0 0; font-size:18px; font-weight:500; line-height:normal; color:var(--wine); } /* Строка расчёта: сумма заказа → плашка скидки → итог к оплате. Считается по низу (align-items:flex-end): у ячеек сверху мелкая подпись, и по центру числа разъехались бы. Плашке и знаку «=» даём margin-bottom, чтобы они сели на общую оптическую линию с цифрами. Габарит держим в узде: справа на 496px начинается яблоко, поэтому кегли здесь меньше прежних 35px — при «200 000 ₽ → 100 000 ₽» строка упирается в ~472px от левой кромки карточки. */ .calc__result{ position:absolute; left:30px; top:168px; margin:0; display:flex; align-items:flex-end; gap:14px; } .calc__cell{ display:flex; flex-direction:column; gap:4px; } .calc__cap{ font-size:12px; font-weight:600; line-height:1; color:var(--wine); opacity:.55; white-space:nowrap; } .calc__eq{ margin-bottom:4px; font-size:22px; font-weight:700; line-height:1; color:var(--wine); opacity:.45; } .calc__total{ font-size:32px; font-weight:700; line-height:1.2; letter-spacing:-.06em; color:var(--wine); font-variant-numeric:tabular-nums; } .calc__price{ font-size:26px; font-weight:700; line-height:1.2; letter-spacing:-.07em; /* −2.45px на кегле 35 */ color:var(--wine); font-variant-numeric:tabular-nums; /* цифры не пляшут при перетаскивании */ } /* Плашка процента растёт вместе со скидкой. Язык взят из бейджей ступеней, а не придуман: там 30–45% — сдержанные печати, а 50% выделена золотом и листьями. Здесь то же нарастание в три приёма: тихий розовый → инверсия в бордовый → бордовый с золотом. Розовые оттенки не подобраны на глаз, а получены подмешиванием бордового в #ffdfe7 (10% и 22%), золото #f3a90e снято пипеткой с бейджа 50%. Габарит и кегль не меняются: прыгал бы соседний ценник. */ .calc__pill{ margin-bottom:4px; padding:10px 18px; border:2px solid transparent; /* держим место под обводку заранее */ border-radius:50px; background:var(--pink); font-size:12px; font-weight:700; line-height:1; color:var(--wine); white-space:nowrap; transition:background .25s ease, color .25s ease, border-color .25s ease; } .calc__pill--t2{background:#f2cbd4} .calc__pill--t3{background:#e2b3bc} .calc__pill--t4{background:var(--wine);color:var(--cream)} .calc__pill--t5{ background:var(--wine); color:var(--cream); border-color:#f3a90e; box-shadow:0 0 0 4px rgb(243 169 14 / .22); } /* Короткий отклик на смену ступени — чтобы переход было видно, а не только заметно постфактум. Класс снимает скрипт после проигрывания. */ .calc__pill.is-bump{animation:pill-bump .32s ease} @keyframes pill-bump{ 40%{transform:scale(1.09)} 100%{transform:scale(1)} } .calc__panel{ position:absolute; left:20px; top:250px; width:1020px; height:102px; padding:30px 20px 20px; background:var(--cream); border-radius:var(--r-card); } /* ---- ползунок ---- Дорожка бордовая, пройденная часть розовая (в макете именно так, не наоборот), бегунок — бордовый кружок ⌀20 в габарите 30. Прогресс приходит из script.js переменной --p, чтобы не перерисовывать фон в JS вручную. */ .calc__range{ -webkit-appearance:none; appearance:none; display:block; width:100%; height:10px; margin:0; border-radius:5px; /* Пройденная часть бордовая, остаток розовый: тянешь вправо — бордо растёт. Было наоборот (это читалось как «отматываешь назад»), хотя в макете заливка снята сэмплом именно в том порядке. Правка Лиды поверх макета. */ background:linear-gradient(to right, var(--wine) 0 var(--p,18%), var(--pink) var(--p,18%) 100%); cursor:pointer; } .calc__range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border:0; border-radius:50%; background:var(--wine); box-shadow:0 2px 6px rgb(58 10 26 / .35); cursor:grab; } .calc__range::-moz-range-thumb{ width:20px; height:20px; border:0; border-radius:50%; background:var(--wine); box-shadow:0 2px 6px rgb(58 10 26 / .35); cursor:grab; } .calc__range:active::-webkit-slider-thumb{cursor:grabbing} .calc__range:active::-moz-range-thumb{cursor:grabbing} .calc__range:focus-visible{outline:3px solid var(--wine);outline-offset:4px} /* Каждая подпись центрируется ровно под той точкой дорожки, где встаёт бегунок при этой сумме. Формула та же, что у заливки (--p): бегунок ходит не от 0 до 100%, а от половины своего диаметра до «100% − половины». Значения --x пересчитывает script.js из таблицы опор; здесь они забиты на случай, если скрипт не отработал: 0 / 300 / 600 / 900 / 1240 шагов из 1240. */ .calc__ticks{ position:relative; height:1.2em; margin:20px 0 0; padding:0; list-style:none; font-size:18px; font-weight:600; letter-spacing:-.03em; color:var(--wine); } .calc__ticks li{ position:absolute; top:0; left:calc(10px + var(--x,0) * (100% - 20px)); transform:translateX(-50%); line-height:1.2; white-space:nowrap; } .calc__ticks li:nth-child(1){--x:0} .calc__ticks li:nth-child(2){--x:.2419} .calc__ticks li:nth-child(3){--x:.4839} .calc__ticks li:nth-child(4){--x:.7258} .calc__ticks li:nth-child(5){--x:1} /* --------------------------------------------------------- Как воспользоваться + доска --------------------------------------------------------- */ .howto{ margin:100px 0 0; text-align:center; font-size:40px; font-weight:600; line-height:1.2; letter-spacing:-.03em; color:var(--wine); } .board{ position:relative; margin-top:40px; } /* Доска отдана одной картинкой: в макете это векторная иллюстрация из сотен групп мела, в разметке она не нужна ни одним отдельным слоем. Радиус 7px — замер по кромке экспорта, им же обрезаются углы JPEG. */ .board__bg{ display:block; width:100%; height:auto; border-radius:7px; } .steps{ position:absolute; inset:0; margin:0; padding:0; list-style:none; } .step{ position:absolute; top:0; height:100%; } .step:nth-child(1){left:70px;width:210px} .step:nth-child(2){left:340px;width:180px} .step:nth-child(3){left:580px;width:180px} .step:nth-child(4){left:820px;width:170px} .step__pic{ position:absolute; left:50%; transform:translateX(-50%); } .step__pic--books {top:84px;width:130px;height:130px} .step__pic--promo {top:123px;width:190px;height:91px} .step__pic--wallet{top:89px;width:130px;height:125px} .step__pic--gift {top:89px;width:130px;height:125px} .step__name{ position:absolute; left:50%; top:244px; transform:translateX(-50%); width:115px; height:50px; } .step__text{ position:absolute; left:0; top:314px; width:100%; margin:0; text-align:center; font-size:16px; font-weight:500; line-height:normal; letter-spacing:-.03em; /* −0.48px на кегле 16 */ color:#fff; } .step__code{ padding:0 2px; background:var(--gift-bg); color:var(--chalk); font-weight:700; } /* --------------------------------------------------------- Пружина на стыке блоков (кроме первого экрана) Кольца здесь СВЕТЛЫЕ контурные — отдельный экспорт из макета (binding-light.svg, 977 x 38), а не бордовый binding.png первого экрана. Элемент лежит внутри НИЖНЕГО блока и вылезает вверх на 28px: так он рисуется поверх подложки этого блока. Если оставить пружину в верхнем блоке, следующая секция перекроет её своим фоном — именно это и было. z-index:1 поднимает её над подложкой, но оставляет под содержимым (фотография консультанта идёт с z-index:2 и проходит поверх колец). --------------------------------------------------------- */ .seam{ position:absolute; z-index:1; left:102px; top:-28px; width:977px; height:38px; background:url("assets/img/binding-light.svg") left center repeat-x; background-size:977px 38px; pointer-events:none; } /* ========================================================= БЛОКИ НИЖЕ КРЕМОВОЙ СТРАНИЦЫ Дальше лендинг идёт полосами: каждая — отдельный блок 1180px с полем 10px до соседнего, а на стык садится пружина. Тот же приём, что между первым экраном и кремовой страницей. ========================================================= */ /* Бордовая кнопка нижних блоков. Настройки из Figma и отличаются от кнопки первого экрана: 16px/600 против 19px/700, радиус 8 вместо 10. Ширина 324 фиксированная — в макете обе такие, хотя текст в них разной длины. Поля по бокам взяты 24 вместо макетных 50: при 50 контент выходит ровно 224px, впритык к длине «Собрать заказ с менеджером», и строка рвётся от малейшего расхождения метрик. Текст по центру, разницы не видно. */ .btn{ display:block; width:324px; padding:25px 24px; border:0; border-radius:8px; font-family:inherit; font-size:16px; font-weight:600; line-height:1.2; text-align:center; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background .18s ease, transform .18s ease, box-shadow .18s ease; } .btn--wine{ background:var(--wine); color:var(--cream); } .btn--wine:hover{ background:#8f1c2e; transform:translateY(-2px); box-shadow:0 10px 22px rgba(58,10,26,.28); } .btn--wine:active{transform:translateY(0)} .btn--wine:focus-visible{outline:3px solid var(--wine);outline-offset:3px} /* --------------------------------------------------------- «2 или несколько программ поднимают на ступень выше» Блок 1180 × 593, розовый. Глобус свисает ниже кромки. --------------------------------------------------------- */ .lift{ position:relative; width:1180px; height:593px; margin:10px auto 0; background:var(--pink); border-radius:var(--r-hero); } .lift__title{ position:absolute; left:211px; top:80px; width:758px; margin:0; text-align:center; font-size:40px; font-weight:600; line-height:1.2; letter-spacing:-.03em; color:var(--wine); } .lift__lead{ position:absolute; left:355px; /* 490px по центру блока: (1180 − 490) / 2 */ top:196px; width:490px; margin:0; text-align:center; font-size:18px; font-weight:500; line-height:normal; color:var(--wine); } /* Коробка подобрана по ЧЕРНИЛАМ, а не по размерам ноды. В файле svg объявлен 295 x 89 и стоит preserveAspectRatio="none", плюс overflow="visible" — рисунок выходит за свой viewBox. Из-за этого ни размеры ноды (305 x 134), ни натуральные пропорции файла не дают того, что нарисовано в макете: при совпадающей высоте чернил ширина расходилась на 99px, и хвост «выше» ложился прямо на строку бумажки. Поэтому числа подобраны так, чтобы чернила легли ровно в макетные границы: x 843..1136, y 3345..3455 (замер по рендеру макета в полосе, где нет текста). */ .lift__lettering{ position:absolute; z-index:2; /* ложится поверх оторванного листа — так в макете */ /* 860, а не 831 как в макете. Замер рендера: строки записки доходят до x=860, а чернила надписи начинались с x=841 — надпись садилась на «программы.». В самом макете нода стоит на 853.76 и наезжает так же, но Лида просила развести. Сдвиг вправо на 29px даёт 10px воздуха; правый край чернил уходит на 1165 при кромке блока 1190, запас есть. */ left:860px; top:231px; width:296px; height:112px; } /* Оторванный лист: бумага фоном, текст поверх. Размер бумаги 601 × 138 — натуральный из экспорта, растягивать нельзя, иначе рваный край поедет. */ .lift__note{ position:absolute; left:290px; top:276px; width:601px; height:138px; padding:42px 30px 0; /* текст начинается на y=3432 макета */ background:url("assets/img/note-torn.svg?v=2") center/100% 100% no-repeat; } .lift__note p{ margin:0; text-align:center; font-size:14px; font-weight:500; line-height:1.3; color:var(--wine); } .lift__note b{font-weight:700} .lift__computer{ position:absolute; left:135px; top:359px; width:213px; height:181px; } .lift__btn{ position:absolute; left:428px; top:444px; } /* Глобус выходит за нижнюю кромку блока на 130px и ложится поверх соседнего. z-index:5 — выше пружины (1), чтобы кольца прятались за ним, как в макете. Поднимаем именно глобус, а не весь блок: подложка блока должна остаться ниже пружины следующей секции. */ .lift__globe{ position:absolute; z-index:5; left:945px; top:468px; width:262px; height:255px; pointer-events:none; } /* --------------------------------------------------------- КАТАЛОГ ПРОГРАММ Кремовая секция, внутри бордовая панель с вкладками. Высота секции не фиксирована: у каждой вкладки своя (в макете «Профессии» 732px, «Абонемент» 690px), и при переключении блок должен подстраиваться сам. --------------------------------------------------------- */ .catalog{ position:relative; width:1180px; margin:10px auto 0; padding:80px 20px 60px; background:var(--cream); border-radius:var(--r-hero); } .catalog__title{ margin:0 0 50px; text-align:center; font-size:40px; font-weight:600; line-height:1.2; letter-spacing:-.03em; color:var(--wine); } /* Активная вкладка сливается с панелью: тот же бордовый и скруглены только верхние углы. Нахлёст на панель делает ТОЛЬКО активная вкладка — она на 2px выше остальных и вылезает вниз за фиксированную высоту полосы. Раньше отрицательный margin стоял на всей полосе, и на панель наезжали заодно неактивные вкладки: их светлые нижние кромки читались поверх бордового. */ .tabs__bar{ display:flex; align-items:flex-start; gap:10px; height:50px; } .tab{ height:50px; padding:0 24px; border:0; border-radius:10px 10px 0 0; background:#f4dec4; color:var(--wine); font-family:inherit; font-size:16px; font-weight:500; line-height:1; white-space:nowrap; cursor:pointer; transition:background .18s ease; } .tab:hover{background:#eed3b2} .tab.is-on{ background:var(--wine); color:var(--cream); cursor:default; } .tab:focus-visible{outline:3px solid var(--wine);outline-offset:2px} /* Скругление левого верхнего угла снимается, когда активна ПЕРВАЯ вкладка: она стоит ровно на этом углу, и радиус вырезал в стыке светлую скважину. У остальных вкладок угол свободен, там скругление нужно. */ .tabs__panel{ background:var(--wine); border-radius:var(--r-card); } .tabs.is-first .tabs__panel{border-top-left-radius:0} /* 2px, а не 1: при одном пикселе на дробном масштабе (zoom 1.2 и 1.6) между вкладкой и панелью проступала светлая нитка. */ .tab.is-on{ position:relative; z-index:1; height:52px; } .pane[hidden]{display:none} /* ---- вкладка «Профессии» ---- */ .pane--grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:30px; } .prog{ position:relative; display:flex; flex-direction:column; padding:20px; border-radius:var(--r-card); background:var(--cream); /* Та же реакция на наведение, что у карточек абонемента. */ transition:transform .18s ease, box-shadow .18s ease; } .prog:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgb(58 10 26 / .25); } /* Подъём не должен утаскивать за собой картинку в углу: она висит абсолютно и едет вместе с карточкой, но при этом обязана остаться над соседями. */ .prog:hover .prog__pic{z-index:1} /* Картинка программы седлает верхнюю кромку карточки. */ .prog__pic{ position:absolute; right:16px; top:-10px; width:63px; height:63px; /* Углы у выгрузок из «Иконок» прямые, в макете они мягкие. */ border-radius:5px; } /* Ширина ограничена, чтобы плашка не заезжала под картинку в правом верхнем углу: 63px картинка + 16px её отступ от края + 20px воздуха. У «Профессий» подпись короткая и это не всплывало, а в программах по нейросетям она доходит до трёх строк. */ .prog__chip{ align-self:flex-start; /* 63px картинка + 16px её отступ от края + 8px воздуха. Воздуха именно столько: тег почти всей высотой идёт вровень с картинкой (она висит с top:-10px, то есть кончается на 53px, а тег начинается на 20px), так что сузить резерв «по нижним строкам» нельзя. */ max-width:calc(100% - 87px); /* Поля были 10/20 при кегле 12 — на длинных подписях вроде «Практическая программа, созданная ИИ-экспертами и врачами» тег раздувался строк на шесть. Поля съедали почти половину доступной ширины, поэтому ужат в первую очередь padding, а кегль всего на пункт. */ padding:6px 12px; border-radius:50px; background:var(--pink); font-size:11px; font-weight:700; line-height:1.2; color:var(--wine); } /* Картинки нет — плашке некуда врезаться, пусть занимает всю ширину, иначе короткая подпись зря ломается на три строки. Класс проставляет генератор, а не :has(), чтобы правило работало и в старых браузерах. */ .prog--nopic .prog__chip{max-width:100%} /* Длинная подпись опущена под картинку: 33px — это низ картинки (top:-10px плюс 63px высоты) минус верхнее поле карточки (20px). Ниже картинки тегу доступна вся ширина, и вместо пяти строк по слову выходит три. */ .prog--tagwide .prog__chip{max-width:100%;margin-top:33px} .prog__title{ margin:20px 0 10px; font-size:16px; font-weight:600; line-height:1.1; color:var(--wine); } .prog__text, .prog__list{ /* Нижний отступ 30px — минимальный зазор до кнопки из макета. Сама кнопка прижата к низу карточки через margin-top:auto, поэтому в коротких карточках зазор больше, а в длинных не схлопывается меньше 30. */ margin:0 0 30px; font-size:12px; font-weight:500; line-height:1.3; color:var(--wine); } .prog__list{padding-left:18px} .prog__list li + li{margin-top:4px} .prog__btn{ display:block; margin-top:auto; padding:15px 20px; border-radius:6px; background:var(--wine); color:var(--cream); font-size:12px; font-weight:700; line-height:1; text-align:center; text-decoration:none; transition:background .18s ease; } .prog__btn:hover{background:#8f1c2e} /* Вся карточка курса кликабельна — область кнопки растянута на неё целиком. Подъём при наведении обещал клик по всему полю, теперь он там есть. */ .prog__btn::after{content:"";position:absolute;inset:0;border-radius:inherit} .prog:focus-within{outline:3px solid var(--cream);outline-offset:3px} .prog__btn:focus-visible{outline:3px solid var(--wine);outline-offset:3px} /* ---- вкладка «Программы по нейросетям»: ещё четыре внутри ---- Внутренние вкладки оформлены иначе, чем верхние: те — «язычки» папки, а эти лежат ПОВЕРХ бордовой панели и должны читаться как фильтр, а не как второй ряд язычков. Отсюда пилюли: контурные на неактивных, залитые кремовым на активной. */ .pane--nn{padding:30px} .subtabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; } .subtab{ padding:11px 20px; border:1px solid rgb(252 247 241 / .45); border-radius:50px; background:transparent; color:var(--cream); font-family:inherit; font-size:14px; font-weight:500; line-height:1; cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease; } .subtab:hover{border-color:var(--cream)} .subtab.is-on{ background:var(--cream); border-color:var(--cream); color:var(--wine); cursor:default; } .subtab:focus-visible{outline:3px solid var(--cream);outline-offset:3px} .subpane{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .subpane[hidden]{display:none} /* ---- вкладка «Абонемент» ---- Панель здесь ровно 690px, как в макете, а элементы расставлены абсолютно в его координатах: оторванные листы и наклейки свисают с карточек и заходят друг на друга, сеткой это не собрать. */ .pane--abonement{ position:relative; /* 690 + 74: карточки выросли под кнопку «Узнать подробнее». */ height:764px; } /* Карточки — ссылки на страницы абонементов. Цвет и подчёркивание сбрасываем: оформление внутри задают .abon__title и .abon__text. */ .abon{ position:absolute; top:30px; /* Флекс-колонка ради одной кнопки: остальные дети позиционированы абсолютно и в поток не попадают, поэтому justify-content прижимает кнопку к низу карточки. Паддинг здесь нельзя — абсолютные дети считаются от padding-box и уехали бы все разом. */ display:flex; flex-direction:column; justify-content:flex-end; width:535px; /* 486 + 74 под кнопку: у клубного абонемента текст доходил до 452, и снизу оставалось всего 34px. Вместе с карточкой сдвинуты вниз оторванные листы и наклейки — они висят в координатах панели. */ height:560px; border-radius:var(--r-card); color:inherit; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; } .abon:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgb(58 10 26 / .25); } .abon:focus-visible{outline:3px solid var(--cream);outline-offset:3px} .abon--neuro{left:30px;background:var(--lav)} .abon--club {left:575px;background:var(--pink)} .abon__title{ position:absolute; left:0; top:30px; width:100%; margin:0; text-align:center; font-size:30px; font-weight:600; line-height:1.2; letter-spacing:-.03em; /* −0.9px на кегле 30 */ color:var(--wine); } .abon__shot{ position:absolute; left:30px; top:96px; width:475px; height:240px; border-radius:var(--r-card); object-fit:cover; } .abon__text{ position:absolute; top:356px; margin:0; text-align:center; font-size:18px; font-weight:500; line-height:normal; color:var(--wine); } /* Кнопка — единственная ссылка карточки, а кликабельна вся карточка: растянутая область ::after накрывает её целиком. Так остаётся одна ссылка на программу (это же нужно и для скринридера, и для аналитики), а вложенных друг в друга не появляется — раньше ссылкой была сама карточка, и кнопку внутрь было просто не вставить. */ .abon__btn{ /* Без position — это принципиально: ::after ниже отсчитывается от ближайшего позиционированного предка. Была бы кнопка absolute, область накрыла бы только её саму, и пришлось бы зашивать высоту кнопки в inset. */ margin:0 30px 30px; padding:19px 20px; border-radius:8px; background:var(--wine); color:var(--cream); font-size:16px; font-weight:700; line-height:1; text-align:center; text-decoration:none; transition:background .18s ease; } .abon__btn::after{content:"";position:absolute;inset:0} .abon__btn:hover{background:#8f1c2e} .abon__btn:focus-visible{outline:3px solid var(--wine);outline-offset:3px} /* Растянутая область покрывает карточку — рамку фокуса рисуем на самой карточке, иначе она обводит только прямоугольник кнопки. */ .abon:focus-within{outline:3px solid var(--cream);outline-offset:3px} .abon--neuro .abon__text{left:30px;width:475px} .abon--club .abon__text{left:42px;width:450px} /* Лист бумаги — фоном под текстом; наклон свой у каждого. Листы висят в координатах панели, а не карточки: карточка выросла под кнопку, и координаты пришлось пересчитать вручную — иначе лист ложился на кнопку. */ .abon__note{ position:absolute; width:391px; height:122px; margin:0; padding:34px 26px 0; background:url("assets/img/ab-note.svg") center/100% 100% no-repeat; text-align:center; font-size:16px; font-weight:500; line-height:normal; color:var(--wine); } .abon__note--left {left:49px; top:575px; transform:rotate(-3deg)} .abon__note--right{left:702px;top:615px; transform:rotate(3deg)} .abon__sticker{position:absolute} .abon__sticker--ii {left:377px;top:567px;width:161px;height:161px;transform:rotate(-10.29deg)} .abon__sticker--piggy{left:588px;top:563px;width:142px;height:142px;transform:rotate(7.12deg)} .catalog__note{ margin:20px 0 0; text-align:center; font-size:10px; font-weight:500; line-height:normal; color:rgb(122 21 37 / .7); } /* --------------------------------------------------------- «Менеджер соберет заказ за тебя» Блок 1180 × 390, лавандовый. Фотография поднимается выше верхней кромки, а низом совпадает с нижней. --------------------------------------------------------- */ /* Подложка — фигура из макета, а не заливка: блок чуть темнее фона страницы (#b3b7ff против #c5c8ff), и по нему идут светлые разводы. Разводы — это вырезы в самой фигуре, сквозь которые видно фон страницы, поэтому background-color здесь не нужен: он бы их закрасил. preserveAspectRatio="none" внутри файла, так что 100% 100% растягивает фигуру ровно по блоку. */ .manager{ position:relative; width:1180px; height:390px; margin:10px auto 0; background:url("assets/img/manager-bg.svg") center/100% 100% no-repeat; border-radius:var(--r-hero); } .manager__title{ position:absolute; left:50px; top:50px; width:640px; margin:0; font-size:40px; font-weight:600; line-height:1.2; letter-spacing:-.03em; color:var(--wine); } .manager__lead{ position:absolute; left:50px; top:166px; width:540px; margin:0; font-size:18px; font-weight:500; line-height:normal; color:var(--wine); } .manager .btn{ position:absolute; left:50px; top:271px; } /* Низ фотографии совпадает с нижней кромкой блока, верх уходит выше неё на 60px. Обрезки у блока нет — фотография ложится поверх соседнего. */ .manager__photo{ position:absolute; z-index:5; /* проходит поверх колец пружины — так в макете */ left:671px; top:-60px; width:415px; height:450px; pointer-events:none; } /* --------------------------------------------------------- О НАС Блок 1160px на лавандовом фоне страницы, без своей подложки. Собран на потоке и гридах: это контент, а не сцена с наклейками, и он должен переживать смену длины текста без пересчёта координат. --------------------------------------------------------- */ /* Нижний отступ такой же, как между разделами внутри блока (70px): подвал идёт сразу за рейтингами, и без него тёмная плашка подвала прилипала к карточкам. */ .about{ width:1160px; margin:70px auto; } .about__title{ margin:0 0 40px; font-size:40px; font-weight:600; line-height:1.2; letter-spacing:-.03em; color:var(--wine); } /* Заголовки разделов внутри блока — тот же кегль, что у главного. */ .about__h{ margin:70px 0 30px; font-size:40px; font-weight:600; line-height:1.2; letter-spacing:-.03em; color:var(--wine); } /* Две колонки по 575 — так делится 1160 при зазоре 10 (замер по макету). */ .about__pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; } /* Карточка 575 × 120 из макета: поля 20, иконка 80 × 80, до текста 20. Высоту не задаём — её держит иконка: 20 + 80 + 20 = 120. Текст при этом получает ровно 435px, как в макете (575 − 40 полей − 80 иконки − 20 зазора). */ .stat{ display:flex; align-items:center; gap:20px; padding:20px; border-radius:var(--r-hero); background:var(--cream); } .stat img{flex:none;width:80px;height:80px} .stat p{ margin:0; font-size:18px; font-weight:700; line-height:1.3; color:var(--wine); } .dark{ position:relative; padding:20px; border-radius:var(--r-hero); background:var(--wine); } /* Заголовок и бейдж — одна строка флекса. Бейдж прижат вправо, заголовок ограничен 304px (ширина ноды из макета), между ними гарантированный зазор. Раньше бейдж висел абсолютно и упирался в плитку снизу. ВЫСОТУ СТРОКЕ НЕ ЗАДАЁМ. В макете карточки равны по высоте (обе 487px) не потому, что их растянули, а по построению: слева короткий заголовок в одну строку и два ряда плиток по 192, справа заголовок в три строки и один документ 365. Любой min-height здесь ломает этот баланс — левая карточка вырастает, правая тянется за ней и получает пустое поле. */ .dark__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; } .dark__title{ max-width:304px; margin:0; font-size:18px; font-weight:600; line-height:1.22; /* 22px на строку — замер по нодам макета (304 x 22 и 304 x 66) */ color:var(--cream); } .dark__badge{ flex:none; width:92px; height:66px; } /* Белые плитки под логотипы и документы. Логотипы вписываются целиком (contain), документы кадрируются по ширине — у них своё соотношение. */ .tiles{display:grid;gap:10px} /* У вузов и документов зазор шире — 19px, замер по макету. */ .tiles--vuz, .tiles--lic{gap:19px} .tiles img{ width:100%; border-radius:var(--r-card); background:#fff; object-fit:contain; } .tiles--vuz{grid-template-columns:1fr 1fr} .tiles--vuz img{height:192px;padding:20px} .tiles--lic{grid-template-columns:1fr 1fr} .tiles--lic img{height:365px;object-fit:cover;object-position:top} .tiles--biz{grid-template-columns:repeat(8,1fr)} .tiles--biz img{height:85px;padding:12px;background:#fff} .tiles--pub{grid-template-columns:repeat(6,1fr)} .tiles--pub img{height:90px;padding:16px;background:#fff} /* ---- исследование ---- */ .research{ display:flex; gap:30px; padding:30px; border-radius:var(--r-hero); background:var(--cream); } .research__photo{ flex:none; width:356px; height:236px; border-radius:var(--r-card); object-fit:cover; } .research__body h4{ margin:0 0 16px; font-size:18px; font-weight:700; line-height:1.3; color:var(--wine); } .research__body p{ margin:0; font-size:14px; font-weight:500; line-height:1.45; color:var(--wine); } .research__body b{font-weight:700} /* ---- гос.служащие ---- */ /* align-items не задаём: по умолчанию stretch, и правая колонка тянется ровно на высоту двух карточек слева. Раньше здесь стоял start и фиксированная высота фотографии — она обрывалась, не доходя до низа бордовой карточки. */ .gov{ display:grid; grid-template-columns:575px 1fr; gap:10px; } .gov__col{display:flex;flex-direction:column;gap:10px} .gov__pink, .gov__wine{ padding:30px; border-radius:var(--r-hero); } .gov__pink{background:var(--pink);color:var(--wine)} .gov__wine{background:var(--wine);color:var(--cream)} /* Кружок с восклицательным знаком над заголовком розовой карточки. */ .gov__mark{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:24px; border-radius:50%; background:var(--wine); color:var(--cream); font-size:18px; font-weight:700; } .gov__pink h4{ margin:0 0 16px; font-size:20px; font-weight:700; line-height:1.25; } .gov__pink p, .gov__wine p{ margin:0 0 12px; font-size:14px; font-weight:500; line-height:1.45; } .gov__wine b{font-weight:700} .gov__regions{ margin:0; padding:0; list-style:none; font-size:14px; font-weight:500; line-height:1.5; } /* Тире перед регионом — часть оформления, а не текста: маркер списка в разметке остаётся семантическим. */ .gov__regions li::before{content:"— "} .gov__regions--two{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; } /* ---- галерея гос.служащих ---- Снимки лежат стопкой и проявляются: так переключение не дёргает соседние блоки, чего не избежать при перестроении потока. Высоту задаёт грид-колонка, поэтому у самой галереи высоты нет — только min-height на случай, если текста слева окажется мало. */ .gallery{ position:relative; min-height:420px; border-radius:var(--r-hero); overflow:hidden; } .gallery__shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s ease; } .gallery__shot.is-on{opacity:1} .gallery__nav{ position:absolute; top:50%; z-index:2; display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-top:-22px; border:0; border-radius:50%; background:rgb(252 247 241 / .85); color:var(--wine); font-family:inherit; font-size:20px; line-height:1; cursor:pointer; transition:background .18s ease; } .gallery__nav:hover{background:var(--cream)} .gallery__nav:focus-visible{outline:3px solid var(--cream);outline-offset:2px} .gallery__nav--prev{left:16px} .gallery__nav--next{right:16px} .gallery__dots{ position:absolute; z-index:2; left:0; right:0; bottom:16px; display:flex; gap:8px; justify-content:center; } .gallery__dot{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgb(252 247 241 / .5); cursor:pointer; transition:background .18s ease, transform .18s ease; } .gallery__dot.is-on{background:var(--cream);transform:scale(1.25)} .gallery__dot:focus-visible{outline:2px solid var(--cream);outline-offset:3px} /* ---- премии и рейтинги ---- */ .awards{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .awards img{ width:100%; height:150px; border-radius:var(--r-card); object-fit:cover; } .rates{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; } .rate{ padding:20px; border-radius:var(--r-card); background:var(--cream); } .rate img{height:28px;width:auto;margin-bottom:16px} .rate__score{ margin:0 0 4px; font-size:14px; font-weight:700; color:var(--wine); } .rate__count{ margin:0; font-size:13px; font-weight:500; color:rgb(122 21 37 / .7); } /* ========================================================= АДАПТИВ. Ниже 1200 zoom выключен, сцена перестраивается в поток: фото сверху, страница блокнота под ним, наклейки встают обычными блоками. ========================================================= */ @media (max-width:1199px){ /* На десктопе у плашек стоит white-space:nowrap — так в макете, строка на подсветке не рвётся. Ниже 1200px рвать её обязательно: «2 или несколько программ в одном заказе» шире любого телефона и вылезала за оба края. */ .mark--lav,.mark--cream,.mark--wine{white-space:normal} .hero{ width:auto; height:auto; margin:20px; padding-bottom:28px; display:flex; flex-direction:column; } .hero__photo{ position:static; order:-1; width:100%; height:auto; aspect-ratio:16/8; object-fit:cover; /* ниже 1200 фото уже не в натуральную величину — кропаем */ } .card{ position:static; width:auto; height:auto; margin:20px; padding:34px 32px; } .card__btn{margin-top:32px} .binding{ position:static; width:min(350px,70%); margin:-20px auto 0; background-position:center; } .bell{ position:absolute; /* остаётся наклейкой поверх фото */ left:auto; right:24px; top:16px; width:104px; /* Высота обязана пересчитываться вместе с шириной: в основных правилах стоит жёсткое 148px под натуральные 138px ширины, и при 104px картинка сплющивалась. */ height:auto; } .timer-wrap{ position:static; width:394px; max-width:100%; margin:26px auto 0; } .note{ position:static; width:auto; max-width:520px; margin:36px auto 0; } /* ---- второй экран ---- */ .page{ width:auto; /* Снизу ровно 10px, как верхнее поле у .lift: поля соседей схлопываются в большее из двух, и при 20px зазор становился 20 — пружина на стыке переставала доставать до кремовой плашки. */ margin:20px 20px 10px; padding:56px 0 20px; } .intro{ width:auto; padding:0 24px; margin-bottom:40px; } .intro__title{font-size:34px} .sheet{ margin:0 20px; padding:80px 20px 30px; } /* Полоса прорезей тянется во всю ширину листа: точная посадка под 15 колец нужна только в координатах макета, ниже 1200 важен лишь ровный шаг. */ .sheet__punch{left:0;width:100%} .tiers--three{grid-template-columns:repeat(2,1fr)} .tier,.tier--wide{min-height:0} /* Книга перестаёт быть наклейкой и просто закрывает низ карточки. */ .tier__book{ position:static; display:block; width:min(100%,246px); height:auto; margin:16px auto 0; } .tier__badge{width:92px} .tier__badge--big{width:116px} .tier__head{padding-right:104px} .tier--dark .tier__head{padding-right:134px} /* Калькулятор разворачивается в поток. Наклейки вокруг него сняты: они рассчитаны на вылет за кромку карточки шириной ровно 1060px. */ .calc{ height:auto; margin-top:60px; padding:30px; } .calc__leaves, .calc__paper, .calc__bags, .calc__apple{display:none} .calc__head, .calc__result, .calc__panel{position:static;width:auto} .calc__title{font-size:34px} .calc__result{margin:28px 0} .calc__panel{height:auto;padding:24px 20px 20px} .howto{margin-top:60px;font-size:34px} /* Пружина центрируется: ниже 1200 ширина блоков плавающая, и жёсткие 102px от левого края увели бы кольца вбок. */ .seam{ left:50%; transform:translateX(-50%); width:min(977px,80%); background-position:center; } /* Доска: шаги встают сеткой, высота блока считается по содержимому. Картинку здесь не используем даже фоном — у неё нарисована рамка, и при любом масштабировании текст шагов вылезает с зелёного поля на оранжевое. Вместо неё заливка и рамка теми же цветами, что в макете (замер по рендеру: поле #243f3b, рамка #ef9165) — тянутся под любую высоту без искажений. */ .board{ margin-top:24px; padding:36px 24px; border:14px solid #ef9165; border-radius:12px; background:#243f3b; } .board__bg{display:none} .steps{ position:static; display:grid; grid-template-columns:repeat(2,1fr); gap:28px 20px; } .step{position:static;height:auto;width:auto !important;left:auto} .step__pic, .step__name, .step__text{position:static;transform:none;width:auto} .step__pic{display:block;height:auto;margin:0 auto} .step__pic--books {width:104px} .step__pic--promo {width:152px} .step__pic--wallet{width:104px} .step__pic--gift {width:104px} .step__name{display:block;width:115px;height:50px;margin:12px auto 0} .step__text{margin-top:10px} /* Пружина центрируется: ниже 1200 ширина блоков плавающая, и жёсткие 102px от левого края увели бы кольца вбок. */ .seam{ left:50%; transform:translateX(-50%); width:min(977px,80%); background-position:center; } /* ---- каталог ---- */ .catalog{ width:auto; margin:10px 20px 0; padding:56px 24px 48px; } .catalog__title{font-size:34px;margin-bottom:30px} /* Вкладки переносятся: пять подписей в строку помещаются только на 1200. Высоту полосы отпускаем — иначе второй ряд обрежется. */ .tabs__bar{flex-wrap:wrap;gap:8px;height:auto;align-items:stretch} .tab{height:44px;padding:0 18px;font-size:15px} .tab.is-on{height:44px} .pane--grid{grid-template-columns:repeat(2,1fr);padding:24px} .pane--nn{padding:24px} .subpane{grid-template-columns:repeat(2,1fr)} .subtab{font-size:13px;padding:10px 16px} /* Абонементы — обычная сетка. Оторванные листы и наклейки сняты: они свисают с карточек по абсолютным координатам панели в 1140px. */ .pane--abonement{ height:auto; display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:24px; } .abon{ /* relative, а не static: карточка обязана остаться системой координат для растянутой области кнопки, иначе та отсчитается от панели и кликабельной станет вся вкладка. ⚠️ Вместе с relative оживают десктопные координаты — у .abon--neuro left:30px, у .abon--club left:575px, и вторая карточка уезжала вправо за экран. Обнуляем явно. Третий случай на этой странице: так же вели себя пружина и плашка отсчёта. */ position:relative; top:auto; left:auto; width:auto; height:auto; padding:30px; } .abon__btn{margin:24px 0 0} .abon__title, .abon__shot, .abon__text{position:static;width:auto} /* Ширину текста задают правила из двух классов (.abon--neuro .abon__text), и одноклассовое .abon__text{width:auto} выше их не перебивало — карточки оставались 475 и 450px шириной и вылезали за экран. Специфичность здесь должна совпадать, иначе правило молча не работает. */ .abon--neuro .abon__text, .abon--club .abon__text{width:auto;margin:0} .abon__title{font-size:26px} .abon__shot{height:auto;aspect-ratio:475/240;margin:24px 0} .abon__note, .abon__sticker{display:none} /* ---- «2 или несколько программ» ---- Блок был собран абсолютными координатами в сцене 1180 × 593 и ниже 1200px не адаптировался вовсе: заголовок, лид и записка уезжали за правый край, на экране оставался один компьютер. Здесь всё переводится в поток. */ .lift{ width:auto; height:auto; margin:10px 20px 0; padding:56px 24px 44px; display:flex; flex-direction:column; align-items:center; } /* width:100%, а не auto: во флекс-колонке с align-items:center элемент берёт ширину по содержимому, и max-width при 758px ничего не ограничивает — заголовок вылезал за оба края блока. */ .lift__title{position:static;width:100%;max-width:758px;font-size:32px} .lift__lead{position:static;width:100%;max-width:490px;margin-top:16px} /* Леттеринг в сцене висел справа от записки; в колонке ему там места нет, поэтому он встаёт над ней по центру. Пропорции держит height:auto — у файла preserveAspectRatio="none", и фиксированная высота его плющит. */ .lift__lettering{ position:static; width:min(296px,80%); height:auto; margin:28px 0 0; } /* Бумага тянется фоном, поэтому высота отдаётся содержимому: при 100% 100% рваный край растянется, но текст обрезать нельзя. */ .lift__note{ position:static; width:100%; max-width:601px; height:auto; margin-top:20px; padding:26px 24px; } .lift__computer{position:static;margin-top:24px} .lift__btn{position:static;margin-top:28px} /* Глобус свисал за правую кромку — в колонке это просто декор снизу. */ .lift__globe{ position:static; width:180px; height:auto; margin:24px 0 -60px auto; } /* ---- «менеджер соберёт заказ» ---- Та же история: сцена 1180 × 390 с абсолютными координатами. */ .manager{ width:auto; height:auto; margin:10px 20px 0; padding:56px 24px 0; display:flex; flex-direction:column; align-items:flex-start; background-size:cover; } .manager__title{position:static;width:100%;max-width:640px;font-size:32px} .manager__lead{position:static;width:100%;max-width:540px;margin-top:16px} .manager .btn{position:static;margin-top:28px} /* Фотография прижата к низу блока и к правому краю, как в сцене, но теперь она часть потока: низ ровно на кромке, поэтому margin-bottom нулевой. */ .manager__photo{ position:static; width:min(415px,70%); height:auto; margin:24px 0 0 auto; } /* ---- о нас ---- */ .about{width:auto;margin:56px 20px} .about__title{font-size:34px} .about__h{font-size:34px;margin:56px 0 24px} .tiles--biz{grid-template-columns:repeat(4,1fr)} .tiles--pub{grid-template-columns:repeat(3,1fr)} .research{flex-direction:column} .research__photo{width:100%;height:260px} /* Фотография уходит под текст: в две колонки при узком экране она сжимается до нечитаемого, а высота 605px рассчитана на 575px ширины. */ .gov{grid-template-columns:1fr} .gallery{min-height:0;aspect-ratio:590/432} .awards{grid-template-columns:repeat(2,1fr)} .rates{grid-template-columns:repeat(2,1fr)} } @media (max-width:991px){ .card__date{width:min(100%,380px)} .card__title{font-size:38px} .card__text{font-size:18px} .intro__title{font-size:28px} .intro__lead{font-size:16px} .tiers--three{grid-template-columns:1fr} .tiers--two{grid-template-columns:1fr} .calc__title{font-size:28px} .calc__lead{font-size:16px} .calc__price{font-size:24px} .calc__total{font-size:28px} .calc__ticks{font-size:15px} .howto{font-size:28px} .lift__title, .manager__title, .catalog__title{font-size:28px} .pane--grid{grid-template-columns:1fr} .subpane{grid-template-columns:1fr} .pane--abonement{grid-template-columns:1fr} .about__title, .about__h{font-size:28px} .about__pair{grid-template-columns:1fr} .tiles--vuz, .tiles--lic{grid-template-columns:1fr 1fr} .tiles--biz{grid-template-columns:repeat(3,1fr)} .tiles--pub{grid-template-columns:repeat(2,1fr)} .gov__regions--two{grid-template-columns:1fr} /* На узком экране заголовок и бейдж встают друг под другом. */ .dark__head{flex-direction:column;gap:16px} .dark__title{max-width:none} } @media (max-width:767px){ .hero{margin:12px;border-radius:12px;overflow:hidden} /* На телефоне первым идёт текст, фотография уходит под него: на широком экране кадр работает фоном, а в колонку шириной с ладонь он превращается в полосу пустого класса над заголовком. Порядок расставлен явно, всем участникам сразу: в потоке они идут photo → card → binding → timer → note, и хватило бы одного order у фотографии, но тогда она уезжает в самый низ, за стикер. */ .card{order:1} .binding{order:2} /* пружина остаётся пришитой к низу карточки */ .bell{order:3} .hero__photo{order:4} .timer-wrap{order:5} /* Плашка отсчёта садится на нижнюю кромку фотографии, а не висит под ней: половина её высоты уходит на снимок. 121px — фактическая высота плашки на этой ширине, отсюда −60. */ .timer-wrap{ /* top/left обнуляются явно: в основных правилах здесь absolute с top:472px, и при переключении на relative они оживают — плашка уезжает на 472px вниз. Та же грабля, что у пружины. */ position:relative; top:auto; left:auto; z-index:4; margin:-60px auto 0; } .note{order:6} /* Колокольчик держится за фотографию, а не за верх блока. Выше 767px он наклейка с absolute в правом верхнем углу — там под ним фото. После перестановки сверху оказалась карточка, и колокольчик закрывал дату, поэтому на телефоне он становится обычным элементом потока: прижат вправо и втянут вниз отрицательным полем, так что ложится на угол фотографии, как и было задумано. */ .bell{ position:relative; z-index:2; right:auto; top:auto; align-self:flex-end; /* −88 вместо −93: те же 11 + 81, но на 5px меньше, чтобы между нижней кромкой карточки и фотографией остался просвет в 5px. Поле справа отрицательное: у bell.png прозрачная кромка в 9px при натуральных 138px ширины, то есть 5px на здешних 76px. Без поправки рисунок не доходил до края фотографии на эти пять пикселей и заезжал на рюкзак. Прозрачный хвост срезает overflow:hidden у .hero. */ margin:0 -5px -88px auto; } /* Квадрат вместо полосы, кадрирование по правому краю. При object-fit:cover квадрат показывает правые 556px кадра (x 624..1180) — рюкзак занимает 731..1137, то есть входит целиком с полем с обеих сторон. Пустые парты и доска, ради которых на десктопе кадр и берётся широким, отрезаются. */ .hero__photo{ aspect-ratio:1; /* Потолок высоты: у телефонов ширина 360–430px, там кадр остаётся ровным квадратом. Ближе к 767px квадрат вырос бы до 743px высотой и занял бы весь экран, поэтому дальше он превращается в полосу — кадрирование по правому краю всё равно держит рюкзак в кадре. */ max-height:430px; object-position:right center; } /* Карточка во всю ширину блока. Поля в 14px делали её уже фотографии и остального контента — было видно, что она не по сетке. Скругления берутся от блока, а лишние углы срезает overflow. */ .card{margin:0;padding:28px 20px;border-radius:12px} .card__date{width:min(100%,300px);margin-bottom:20px} /* На мобильном интерлиньяж чуть отпущен: при 100% и трёх-четырёх строках на узком экране выносные начинают цепляться за капители следующей строки. */ .card__title{font-size:29px;line-height:1.08} .card__title .mark{padding:0 8px} .card__text{font-size:16px} .card__btn{width:100%;padding:21px 20px;font-size:17px;margin-top:26px} .bell{width:76px;right:14px;top:10px} /* 32px из планшетного диапазона на 360–430px не помещается даже с переносом */ .lift__title,.manager__title{font-size:26px} .lift{padding:48px 16px 36px} .manager{padding:48px 16px 0} /* Пружина сшивает бордовую карточку с фотографией: верхняя половина колец лежит на карточке, нижняя — на фото, и оба блока сходятся встык. Числа связаны между собой, менять по одному нельзя: -11px сверху = половина высоты пружины (22 / 2); -93px снизу у колокольчика = 11 (нижняя половина пружины) + 81 (высота колокольчика при ширине 76), из-за чего фотография поднимается ровно под нижнюю кромку карточки. background-size задан явно: без него плитка тайлится в натуральные 39px и от колец остаётся верхняя треть. */ .binding{ /* relative, а не static — нужен z-index, чтобы кольца легли поверх фотографии. Но вместе с relative оживают top/left из основных правил (там absolute с top:548px), и пружина уезжала на 548px вниз, под таймер. Поэтому обнуляем их явно. */ position:relative; top:auto; left:auto; z-index:3; width:min(190px,52%); height:22px; background-size:auto 22px; margin:-11px auto 0; } .timer__label,.timer__value{font-size:15px} /* паддинг и кегль стикера не переопределяем — 20px и 14px из макета работают и на узком экране */ /* пропорционально десктопной посадке: бокс 44px вместо 60 */ /* Прорези под пружину: плитка 70 × 51 в натуральную величину на телефоне выглядит дырами в пол-ладони. Высота вдвое меньше, ширина плитки пересчитывается сама через auto. */ .sheet__punch{height:26px;background-size:auto 26px} /* Бейджи скидок наезжали на текст карточки: 130 × 104 при ширине карточки в 340px — это треть её ширины. Высота через auto, иначе поедут пропорции. */ .tier__badge{width:76px;top:50px} .tier__badge--big{width:96px;top:44px} .tier__head{margin:8px 10px 10px;padding-right:88px} .tier--dark .tier__head{padding-right:112px} .tier__sum{font-size:19px} /* Документы лицензии: на десктопе кадрируются по ширине (cover), но в две колонки по ~160px от страницы оставалась узкая полоска. Здесь показываем лист целиком в пропорции A4. */ .tiles--lic img{height:auto;aspect-ratio:210/297;object-fit:contain;padding:6px} /* Вкладки каталога складывались в четыре строки и всё равно резались. На телефоне вместо них штатный