/* ============================================================ Версия 3 — надстройка над styles.css и standalone.css. [задание Ивана 2026-09-10] Правило то же, что и раньше: базовые файлы не правим, а дописываем поверх. Так видно, что именно добавила третья версия, и откат — это снятие одной строки из , а не разбор диффа. Здесь только то, чего не было на одностраничнике: 1. шапка на четырёх страницах — прозрачная лишь там, где есть кадр 2. компактный первый экран внутренних страниц 3. переходы между страницами (следующий шаг) 4. раскрывающиеся плашки «кому не сюди» / «це не навчання» 5. полоса «Формат і ціна» на главной ============================================================ */ /* ---------- 1 · Шапка ---------- В standalone.css .site-header объявлена прозрачной без условий: там страница была одна, и под шапкой всегда стоял кадр на всю высоту. На внутренних страницах кадра нет — прозрачная шапка над белым фоном означала бы белый знак на белом. Возвращаем полосу всем, кроме страниц с кадром: они помечены data-hero="cover" на . */ body:not([data-hero="cover"]) .site-header { background: rgba(255, 255, 255, .96); border-bottom-color: var(--line); backdrop-filter: blur(12px); } body:not([data-hero="cover"]) .brand .brand-dark { opacity: 1; } body:not([data-hero="cover"]) .brand .brand-light { opacity: 0; } body:not([data-hero="cover"]) .site-header .header-cta { color: var(--black); border-color: var(--black); opacity: 1; visibility: visible; } body:not([data-hero="cover"]) .site-header .header-cta:hover { color: var(--black); background: var(--green); } /* «Як побудовано» и «Формат і ціна» [Иван 17.09]: до прокрутки шапка без полосы и без кнопки — как главная над кадром. Шапка стоит в потоке (sticky), под ней не кадр, а белый фон страницы; поэтому «прозрачная» — это цвет первого экрана (--soft), линия снизу убрана. После прокрутки — прежняя белая полоса с кнопкой. */ body[data-tj-from="program"] .site-header:not(.is-scrolled), body[data-tj-from="format"] .site-header:not(.is-scrolled) { background: var(--soft); border-bottom-color: transparent; backdrop-filter: none; } body[data-tj-from="program"] .site-header:not(.is-scrolled) .header-cta, body[data-tj-from="format"] .site-header:not(.is-scrolled) .header-cta { opacity: 0; visibility: hidden; } /* Шапка на широком экране: разделы сразу за знаком, кнопка — справа [Иван 17.09]. Было: разделы прижаты вправо к кнопке, а до прокрутки кнопка невидима, но место занимает — ряд висел посередине. */ @media (min-width: 861px) { .main-nav.is-standalone { margin-left: clamp(8px, 2vw, 32px); margin-right: auto; justify-content: flex-start; } } /* Пункты меню. На кадре — белые, дальше чёрные: то же правило, что у знака. */ body[data-hero="cover"] .site-header:not(.is-scrolled) .main-nav > a { color: var(--white); } body[data-hero="cover"] .site-header:not(.is-scrolled) .main-nav > a::after { background: var(--white); } .main-nav > a[aria-current="page"] { color: var(--green-dark); } body[data-hero="cover"] .site-header:not(.is-scrolled) .main-nav > a[aria-current="page"] { color: var(--white); } /* Раскрытое меню на телефоне не должно давать странице ехать под собой. */ body.menu-open { overflow: hidden; } /* Меню на узком экране: панель, а не строка. В standalone.css выезжающая панель дизайн-системы развёрнута обратно в строку — на одностраничнике в меню было одно действие, и бургер был не нужен. Здесь разделов четыре, в строку 375px они не встают: панель возвращаем. Файл подключается после standalone.css, поэтому хватает тех же селекторов без !important. Кнопка «Хочу на траєкторію» в панель НЕ уезжает: она стоит в полосе рядом с бургером. Единственное действие страницы, спрятанное за бургер, — это действие, до которого не дотянутся. */ @media (max-width: 860px) { .main-nav.is-standalone { position: fixed; z-index: 99; inset: var(--header-height, 76px) 0 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; width: auto; height: calc(100svh - var(--header-height, 76px)); overflow-y: auto; padding: 22px var(--x) 54px; background: #fff; box-shadow: -14px 0 32px rgba(0, 0, 0, .12); transform: translateX(100%); transition: transform var(--ease); } .main-nav.is-standalone.is-open { transform: none; } /* Размытие фона шапки на телефоне снято везде [Иван 17.09]. С ним шапка становится «рамкой» для выезжающей панели меню: закрытая панель, сдвинутая вправо, растягивала страницу до двух экранов (750 px при 375), телефон раскладывал её шире, и прилипающая шапка уезжала из видимой части — сразу, как только после прокрутки размытие возвращалось. Базовые стили и так снимают его на узком экране; v3 возвращал его внутренним страницам. */ body:not([data-hero="cover"]) .site-header { backdrop-filter: none; } .main-nav.is-standalone > a { width: 100%; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 18px; } .main-nav.is-standalone > a[aria-current="page"] { color: var(--green-dark); } /* Панель белая — значит пункты в ней чёрные, даже когда страница под ней с кадром. Без этого правила на главной пункты остаются белыми (они белые в полосе поверх фотографии) и в раскрытой панели исчезают: белое по белому. */ body[data-hero="cover"] .site-header:not(.is-scrolled) .main-nav.is-open > a { color: var(--black); } body[data-hero="cover"] .site-header:not(.is-scrolled) .main-nav.is-open > a[aria-current="page"] { color: var(--green-dark); } /* Кнопка и бургер в полосе. Кнопка ужимается: рядом с ней ещё знак и бургер, и все трое должны уместиться в 375px. */ .header-inner { gap: 10px; } .header-cta { margin-top: 0; padding: 9px 12px !important; font-size: 13px; } .site-header .header-cta { opacity: 1; visibility: visible; } /* Поверх кадра кнопки в шапке нет — как на широком экране [Иван 17.09]: белая кнопка на фотографии спорила с кнопкой в самом кадре. Появляется вместе с белой полосой. Было: белая кнопка (и правило наведения к ней, 16.09). */ body[data-hero="cover"] .site-header:not(.is-scrolled) .header-cta { opacity: 0; visibility: hidden; } /* Бургер на кадре белый — и остаётся белым, когда панель раскрыта: сам он стоит в полосе НАД панелью, а полоса на главной прозрачная, под ней фотография. Чёрный крестик там пропал бы. */ body[data-hero="cover"] .site-header:not(.is-scrolled) .menu-toggle span, body[data-hero="cover"] .site-header:not(.is-scrolled) .menu-toggle::before, body[data-hero="cover"] .site-header:not(.is-scrolled) .menu-toggle::after { background: var(--white); } } /* ---------- 2 · Первый экран внутренней страницы ---------- Не кадр и не пустой разворот на две трети экрана: заголовок, одна строка о чём страница и хлебная крошка назад. Задача — за секунду сказать, куда человек попал, и не отодвинуть содержимое вниз. */ .page-hero--sub { min-height: 0; padding-top: clamp(120px, 12vw, 168px); padding-bottom: clamp(44px, 5vw, 72px); background: var(--soft); } /* justify-items: start — иначе плашка кикера («ФОРМАТ І УЧАСТЬ») растянется зелёной полосой во всю ширину: в гриде дети по умолчанию тянутся. */ .page-hero--sub .shell { display: grid; gap: 0; justify-items: start; } /* Кегль меньше, чем на главной: заголовок здесь длиннее и стоит не на фотографии, а над содержимым — ему не нужно держать экран. */ .page-hero--sub h1 { max-width: 19ch; margin: 14px 0 0; font-size: clamp(38px, 4.4vw, 66px); } .page-hero--sub h1 em { font-style: normal; } .page-hero--sub .lead { max-width: 620px; margin: 26px 0 0; } .page-hero--sub + .section > .section-pad, .page-hero--sub + .section > .shell > .section-pad { padding-top: clamp(44px, 4vw, 68px); } /* Крошка. Одна ссылка назад: глубже двух уровней сайт не уходит. */ .crumb-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; } .crumb-back:hover { color: var(--black); } @media (max-width: 560px) { .page-hero--sub { padding-top: 104px; } .page-hero--sub h1 { font-size: clamp(32px, 9.6vw, 40px); } } /* ---------- 3 · Переход на следующую страницу ---------- Главная больше не рассказывает всё: часть блоков сжата до сути, а подробности лежат отдельной страницей. Значит, у каждого такого блока должен быть внятный выход — не «читати далі» мелким шрифтом, а полоса во всю ширину, которую видно. Полоса зелёная только у одной на страницу (--lead): две одинаково яркие кнопки на одном экране спорят между собой. */ .next-step { display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 3vw, 44px); margin-top: clamp(36px, 4vw, 56px); padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 38px); border: 1px solid var(--line); /* Плашка берёт цвет, противоположный секции под ней, — иначе её не видно [замечание Ивана 11.09 про сливающиеся фоны]. */ background: var(--soft); } .section-soft .next-step { background: var(--white); } .next-step__text { display: grid; gap: 6px; min-width: 0; } .next-step__text b { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; } .next-step__text span { color: var(--muted); font-size: 15px; line-height: 1.45; } .next-step .button { flex: 0 0 auto; } .next-step--lead { border-color: var(--green); background: var(--green); } .next-step--lead .next-step__text span { color: rgba(5, 5, 5, .7); } .next-step--lead .button { border-color: var(--black); background: var(--white); } .next-step--lead .button:hover { background: var(--black); color: var(--white); } @media (max-width: 720px) { .next-step { align-items: flex-start; flex-direction: column; } .next-step .button { width: 100%; justify-content: center; } } /* ---------- 4 · Раскрывающиеся плашки ---------- «І кому зараз не сюди» и «Це не навчання і не мотивація» — важные тексты, но они не продают и не нужны каждому. Свёрнуты в тот же компонент, что и вопросы внизу страницы (.dc-faq): человек открывает их, если ему это сейчас важно [задание Ивана 10.09, пункт 3.1 и 3.2]. Отличие от вопросов — рамка вокруг всей стопки: это не список, а одна плашка с оговорками, и она не должна читаться как продолжение списка сигналов над ней. */ .fold-plate { margin-top: clamp(30px, 3.4vw, 48px); border: 1px solid var(--line); background: var(--white); } .fold-plate .dc-faq__item + .dc-faq__item { border-top: 1px solid var(--line); } .fold-plate .dc-faq__bar { padding: 22px clamp(18px, 2.4vw, 28px); } .fold-plate .dc-faq__bar > span:first-child { font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; } .fold-plate .dc-faq__content { padding-inline: clamp(18px, 2.4vw, 28px); } .fold-plate .cross-list { margin: 0; } .fold-plate .cross-list li { color: var(--black); font-size: 16px; } .fold-plate .cross-list li::before { color: var(--black); opacity: 1; } .fold-plate .fold-note { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.55; } .fold-plate .text-link { margin-top: 18px; } /* ---------- 5 · Полоса «Формат і ціна» на главной ---------- Цена ушла на свою страницу, но прятать её от того, кто уже готов, — вредительство. На главной остаётся минимум: четыре факта, цена «от» и выход. Всё остальное — таблица, календарь, два пакета — там. */ .price-teaser { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(20px, 3vw, 48px); margin-top: clamp(30px, 3.4vw, 44px); padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid var(--line); } .price-teaser__sum { display: flex; align-items: baseline; gap: 12px; } /* Шрифт не переопределяем. Дисплейный (Miratrix) рисует цифры формата «18 годин» красиво, но знака евро в нём нет — сумма выходила «999» без валюты. Цена — тот случай, когда важнее прочитать, чем украсить. */ .price-teaser__sum strong { font-size: clamp(34px, 4vw, 56px); font-weight: 700; letter-spacing: -.03em; line-height: 1; white-space: nowrap; } .price-teaser__sum span { color: var(--muted); font-size: 14px; } .price-teaser p { margin: 12px 0 0; color: var(--muted); font-size: 15px; max-width: 46ch; } @media (max-width: 720px) { .price-teaser { grid-template-columns: minmax(0, 1fr); align-items: start; } .price-teaser .button { width: 100%; justify-content: center; } } /* ---------- 6 · Карточки групповой динамики в ленте ---------- Четыре причины «почему в группе» стояли мозаикой из пяти плиток разной величины — она занимала экран целиком и читалась как схема, а не как довод. Теперь это лента карточек: на широком экране видно три, дальше листается [задание Ивана 10.09, пункт 3.4]. */ /* Три карточки на экран и четвёртая краем. Базовое правило ленты даёт 55% ширины — это размер под длинную цитату отзыва; здесь карточки короткие, и двух на весь экран мало: не видно, что причин четыре. */ @media (min-width: 992px) { .group-rail .dc-rail__track { grid-auto-columns: clamp(300px, 30%, 400px); } } .group-rail .depth-card { min-height: 320px; } .group-rail .depth-card h3 { margin-top: 28px; } .group-modes { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; } .group-modes li { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); } .group-modes b { font-size: 15px; } .group-modes span { color: var(--muted); font-size: 14px; } /* ---------- 7 · Мелочи, которые ломались при переносе блоков ---------- Часть правил standalone.css была привязана к #packages — единственному месту, где эти компоненты стояли на одностраничнике. Теперь блоков два: короткий на главной и полный на своей странице. Правило по id стало правилом по составу. Компактная карточка факта: системная держит min-height 260px под композицию «цифра сверху, слово внизу», а у нас цифра и слово в одну строку — запас превращался в пустоту под текстом. В v2_02 то же правило стояло по id блока цен; здесь рядов с фактами три и на разных страницах, поэтому признак — класс на самом ряду. */ .format-facts--tight article { min-height: 0; padding: 28px 24px; } /* «Хто веде» на сером фоне: логотипы клиентов лежат на той же плоскости, отдельной белой полосой под ними это не выглядит. */ .guide-section.section-soft .logo-band { background: transparent; } /* ---------- 8 · Заголовок первого экрана ---------- В версии 2 заголовком стояло название программы — два коротких слова, и системный кегль clamp(54px, 7.2vw, 108px) им шёл. В версии 3 там фраза в четыре слова: тем же кеглем она занимает три строки и сдвигает всё остальное — подзаголовок, факты и кнопки — за нижний край экрана. Кегль ужат ровно настолько, чтобы фраза встала в две строки и первый экран остался целым. */ .hero-cover h1 { max-width: 16ch; font-size: clamp(42px, 5.6vw, 86px); } @media (max-width: 560px) { .hero-cover h1 { font-size: clamp(34px, 10.5vw, 44px); } } /* ============================================================ Правка 11.09 по замечаниям Ивана (скриншоты с пометками) ============================================================ */ /* ---------- 9 · Вертикальный ритм ---------- Отступы между блоками были рассчитаны на длинную страницу, где воздух помогал не слипнуться. Страниц стало четыре, блоки на каждой короче — и тот же воздух читается как дыра: на втором экране между текстом и репликами пустота в треть экрана. Правим одним токеном, как это уже делали 25.08: --y держит все вертикальные поля секций (.section-pad), и одно число меняет ритм разом. Было clamp(72, 8vw, 116) → стало clamp(56, 5.4vw, 88). */ :root { --y: clamp(56px, 5.4vw, 88px); } @media (max-width: 860px) { :root { --y: 52px; } } /* Между заголовком секции и её содержимым было до 88px — почти столько же, сколько между самими секциями. Границы блоков от этого размывались: непонятно, где кончается один и начинается другой. */ .section-head { margin-bottom: clamp(32px, 3.4vw, 52px); } /* Стык кадра и первого блока под ним. */ .page-hero--cover + .section { padding-top: clamp(52px, 4.8vw, 80px); } /* Полоса с репликами живёт по своим полям, а не по секционным: реплики сами по себе воздушные, и var(--y) сверху и снизу добавлял к ним ещё по экрану. Соседи по-прежнему поджимаются к ней вплотную — правило .section:has(+ .seam-band) в standalone.css. */ .seam-band { padding-block: clamp(40px, 4vw, 64px); } /* ---------- 10 · Ленты не красят фон ---------- У обёртки ленты стоит data-dc-plane="light" — в дизайн-системе это «плоскость», и она заливает себя белым. На белой секции этого не было видно; на серой лента стала белым прямоугольником поперёк блока [замечание Ивана, отзывы на главной]. Плоскость нужна лентам ради переменных (цвет текста, линии карточек), поэтому атрибут не снимаем — гасим только заливку. */ .dc-rail[data-dc-plane] { background: transparent; } /* ---------- 11 · Ряд коротких пунктов ---------- Один компонент на два места: «Чому саме в групі» на главной и «Як минає зустріч» на странице формата. Оба раньше были полноценными блоками с заголовком, кикером и карточками — для четырёх строк по строке это слишком жирно [замечание Ивана]. Выглядит как ряд фактов формата рядом, только без цифры: жирная линия сверху, название, строка пояснения. */ .mini-row { display: grid; grid-template-columns: repeat(var(--mini-cols, 4), minmax(0, 1fr)); gap: 0 clamp(18px, 2.4vw, 36px); margin-top: clamp(26px, 2.8vw, 40px); } .mini-row > div { padding-top: 18px; border-top: 2px solid var(--black); } .mini-row b { display: block; margin-bottom: 8px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.2; } .mini-row span { color: var(--muted); font-size: 15px; line-height: 1.5; } /* Промежуточный заголовок внутри блока — компонент .sub-head из standalone.css. Новый не заводим, но поля ужимаем под общий ритм: там стояло до 88px сверху, под прежние секционные отступы. */ .sub-head { margin-top: clamp(40px, 4vw, 62px); margin-bottom: 10px; } .sub-head + .mini-row, .sub-note + .mini-row { margin-top: 20px; } .sub-head + .dc-table, .sub-note + .dc-table { margin-top: 20px; } /* Строка-пояснение под таким заголовком. */ .sub-note { margin: 0; max-width: 64ch; color: var(--muted); font-size: 16px; line-height: 1.5; } @media (max-width: 860px) { .mini-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px clamp(16px, 4vw, 28px); } } @media (max-width: 560px) { .mini-row { grid-template-columns: minmax(0, 1fr); gap: 22px; } } /* ---------- 12 · Карточки фаз ниже ---------- min-height 240px закладывался под карточку с перечнем модулей внутри. Здесь в ней три строки — и половина карточки стоит пустой [замечание Ивана: «где-то слишком голо»]. */ .phase-card { min-height: 0; padding-bottom: 34px; } /* ---------- 13 · Шапка ленты без надзаголовка ---------- В .dc-rail__head левая колонка — надзаголовок, правая — стрелки. Если надзаголовка нет, строка всё равно занимает высоту, и между заголовком блока и карточками повисает пустая полоса. Отзывам надзаголовок дописан в разметке; правило — на случай, если где-то его не будет. */ .dc-rail__head:not(:has(p)) { margin-top: -18px; } /* ============================================================ Заход А, правки Ивана 11.09 ============================================================ */ /* ---------- 14 · Стопка «для кого» в оформлении вопросов ---------- Была плашкой с рамкой. Стала той же полосой с линией и кружком, что и вопросы в конце страницы [правка Ивана 11.09]. Две одинаковые стопки на одной странице — это приём, а не повтор: верхняя про вас, нижняя про программу. Чтобы верхняя не читалась продолжением списка сигналов над ней, перед ней стоит строка-подводка и жирная линия. */ .fold-lead { margin: clamp(34px, 3.6vw, 52px) 0 0; padding-top: 16px; border-top: 2px solid var(--black); color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .fold-plate--bare { margin-top: 4px; border: 0; background: transparent; } .fold-plate--bare .dc-faq__item + .dc-faq__item { border-top: 0; } .fold-plate--bare .dc-faq__bar { padding-inline: 0; } .fold-plate--bare .dc-faq__content { padding-inline: 0; } /* Раскрытый элемент подсвечивается серым и выходит за поля на 20px — правило дизайн-системы. Внутри шелла это работает как надо. */ /* Панч Виктора под общим ответом: крупнее и чёрным, потому что это его строка, а не наше пояснение. */ .fold-note--punch { margin-top: 14px; color: var(--black); font-size: 17px; font-weight: 600; line-height: 1.45; } /* ---------- 15 · Номер фазы на плашке ---------- [правка Ивана 11.09] Номер фазы уехал на маленькую зелёную плашку, рядом без плашки — сколько в фазе модулей. Плашка делает номер меткой, а не заголовком: заголовок в карточке один, и это название фазы. */ .phase-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; } .phase-head .phase-word { display: inline-block; margin: 0; padding: 4px 9px; background: var(--green); color: var(--black); font-size: 11px; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; } .phase-count { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; } /* ---------- 16 · Плашка с главным посылом ---------- Зелёная плоскость во всю ширину блока: не украшение, а способ сказать одну мысль так, чтобы её нельзя было пролистать. Одна на экран — правило ядра бренда. */ .claim { margin-top: clamp(22px, 2.4vw, 32px); padding: clamp(24px, 2.8vw, 36px) clamp(22px, 3vw, 40px); background: var(--green); } .claim__text { max-width: 46ch; margin: 0; font-size: clamp(19px, 1.9vw, 26px); font-weight: 600; line-height: 1.35; letter-spacing: -.02em; } .claim__note { max-width: 58ch; margin: 14px 0 0; color: rgba(5, 5, 5, .72); font-size: 15px; line-height: 1.5; } /* Четыре причины под плашкой — только на широком экране. На телефоне они добавляли пол-экрана колонки к самому длинному блоку страницы; развёрнуты они на «Як побудовано», и ссылка туда стоит сразу ниже. */ @media (max-width: 860px) { .mini-row--wide-only { display: none; } } /* ---------- 17 · Две цены на главной ---------- Было: одна сумма «от 999 €» и строка про то, что есть ещё Deep. Стало: оба формата плашками [правка Ивана 11.09]. Человек видит выбор здесь, а не узнаёт про второй формат из мелкой строки. */ .price-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(28px, 3vw, 40px); } .price-cell { display: flex; flex-direction: column; gap: 6px; padding: clamp(22px, 2.4vw, 30px); background: var(--white); border: 1px solid var(--line); } .price-cell--deep { border: 2px solid var(--green); } .price-cell h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .02em; } .price-cell strong { margin-top: 6px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -.03em; white-space: nowrap; } .price-cell__when { color: var(--muted); font-size: 13px; } .price-cell p { margin: 10px 0 0; color: var(--ink); font-size: 15px; line-height: 1.5; } .price-pair__foot { display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 2.4vw, 40px); margin-top: clamp(18px, 2vw, 26px); } .price-pair__foot .note-aside { margin: 0; } @media (max-width: 720px) { .price-pair { grid-template-columns: minmax(0, 1fr); } .price-pair__foot { align-items: flex-start; flex-direction: column; } .price-pair__foot .button { width: 100%; justify-content: center; } } /* ---------- 18 · Финал: карточки-двери ---------- [перестроено 11.09] Сначала блок «Далі / Наступні кроки?» был панелью с одной главной кнопкой и двумя ссылками при ней. Потом — тремя дверями на чёрном. Иван: «на чёрном фоне дизайн не совсем привычный, обычно это через карточки делаем, с обводкой; тут наверно можно их склеить». Стало: карточки с обводкой на светлой секции, склеенные в один ряд — общая рамка, внутренние линии одинарные, наружных лишних нет. Это тот же приём, что у ряда фактов формата и у списка модулей: система уже так собирает ряды, и финал перестал быть чужим блоком. Зачем три двери вообще: к концу страницы люди разные. Один готов писать, второй ещё примеряет, третий хочет сперва разобраться. Одна кнопка обслуживает первого, двое остальных уходят ни с чем. */ .doors-section { background: var(--soft); } .doors-head { display: grid; gap: 10px; margin-bottom: clamp(24px, 2.6vw, 34px); } .doors-head h2 { margin: 0; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.04; } .doors-note { max-width: 54ch; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; } .doors { display: grid; /* [v3_02, 18.09] Без двери опроса дверей две на всех страницах — две колонки. */ grid-template-columns: repeat(2, minmax(0, 1fr)); border: 2px solid var(--black); background: var(--white); } .door { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 30px); /* Склейка: внутренние линии одинарные, у последней карточки её нет. */ border-right: 1px solid var(--line); color: var(--black); text-decoration: none; transition: background var(--ease), color var(--ease); } .door:last-child { border-right: 0; } .door__tag { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .door__title { font-size: clamp(20px, 2vw, 27px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; } .door__note { color: var(--muted); font-size: 15px; line-height: 1.5; } .door__arrow { font-size: 22px; line-height: 1; } /* Первая дверь залита зелёным: это главное действие страницы. Наведение заливает любую другую — по одной за раз, поэтому правило «одна зелёная подложка на экран» держится. */ .door--lead { background: var(--green); } .door--lead .door__tag { color: rgba(5, 5, 5, .6); } .door--lead .door__note { color: rgba(5, 5, 5, .74); } .door:hover { background: var(--green); } .door:hover .door__tag { color: rgba(5, 5, 5, .6); } .door:hover .door__note { color: rgba(5, 5, 5, .74); } .door--lead:hover { background: var(--black); color: var(--white); } .door--lead:hover .door__tag { color: rgba(255, 255, 255, .6); } .door--lead:hover .door__note { color: rgba(255, 255, 255, .74); } @media (max-width: 860px) { .doors { grid-template-columns: minmax(0, 1fr); } .door { grid-template-rows: none; border-right: 0; border-bottom: 1px solid var(--line); } .door:last-child { border-bottom: 0; } } /* ---------- 19 · Первый экран внутренней страницы: действие ---------- [правка Ивана 11.09] На обеих внутренних страницах первый экран был без единой кнопки — только хлебная крошка назад. Кнопки встали под лид. Черновая векторная иллюстрация отсюда снята: Иван подбирает картинки сам. Место справа осталось пустым намеренно — под них. */ .page-hero--sub .shell { position: relative; } /* margin-left: 0 обязателен: у .page-actions в styles.css стоит `margin: 38px 0 0 auto` — оно уводило кнопки к правому краю. */ .sub-actions { margin: clamp(26px, 3vw, 38px) 0 0; justify-self: start; } /* ---------- 20 · Состав фазы на телефоне ---------- [правка Ивана 11.09] На широком экране метка «Фаза 1» и «3 модулі» стоят строкой. На узком карточка фазы становится двухколоночной — метка слева, название справа (правило 6.2 в standalone.css), — и число модулей рядом с меткой распирает левую колонку. Ставим его под метку: левая колонка остаётся узкой, число читается как её подпись, а не как часть названия фазы. */ @media (max-width: 860px) { .phase-head { flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; } .phase-count { font-size: 12px; } } /* ============================================================ Заход Б, 11.09 — взаимодействие ============================================================ */ /* ---------- 21 · Модули в один столбец и подпись при наведении ---------- [решение Ивана 11.09] Линия маршрута снята — прототип показал, что она выпрямляет список, но сама по себе ничего не объясняет. Один столбец оставлен: так шесть модулей читаются последовательно, как маршрут, а не как таблица. Цена — 254 px к высоте страницы, замерено. Вместо линии подсказка при наведении: рядом со стрелкой проступает «детальніше». Стрелка одна показывала, что ячейка открывается, но не говорила, что именно откроется. На телефоне ничего этого нет — там вместо наведения работает подсветка при прокрутке (блок 22). */ @media (min-width: 861px) { .module-list { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .module-list li { min-height: 0; } .module-list li::before { content: "детальніше"; position: absolute; top: 30px; right: 52px; color: var(--black); font-size: 13px; font-weight: 600; letter-spacing: .01em; opacity: 0; transform: translateX(6px); transition: opacity var(--ease), transform var(--ease); pointer-events: none; } .module-list li:hover::before { opacity: 1; transform: none; } } /* ---------- 22 · «На виході» раскрывается при прокрутке ---------- [правка Ивана 11.09] На телефоне модуль, доехавший до середины экрана, подсвечивается — это поведение с августа. Теперь вместе с подсветкой у него раскрывается строка «На виході», а у остальных она свёрнута. Зачем: шесть модулей с полным текстом — это два экрана сплошной колонки, и глазу не за что зацепиться. Свёрнутый список читается как оглавление, а подробность приходит к тому модулю, на который человек смотрит прямо сейчас. Механика раскрытия — grid-template-rows 0fr → 1fr: единственный способ плавно раскрыть блок на его настоящую высоту, не выдумывая max-height наугад (при завышенном max-height кривая разгона врёт — блок сначала стоит, потом дёргается). Поэтому внутри абзаца есть обёртка .module-outcome__in: интерполировать 0fr умеет только грид, а ребёнку нужен свой overflow: hidden. Работает только когда список сам сказал, что режим включён (.is-scrollreveal ставит app.js). Иначе строка пряталась бы и там, где раскрыть её нечем. */ @media (max-width: 860px) { .module-list.is-scrollreveal .module-outcome { display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition: grid-template-rows 460ms cubic-bezier(.33, 0, .2, 1), margin-top 460ms cubic-bezier(.33, 0, .2, 1), opacity 300ms cubic-bezier(.33, 0, .2, 1); } .module-list.is-scrollreveal .module-outcome__in { overflow: hidden; } .module-list.is-scrollreveal li.is-centered .module-outcome { grid-template-rows: 1fr; margin-top: 10px; opacity: 1; /* Появление чуть медленнее исчезновения: раскрытие человек замечает, свёртывание уезжает за край и должно не отвлекать. */ transition-duration: 520ms, 520ms, 380ms; } /* Сама карточка меняет высоту вместе со строкой — движение должно быть одним, а не двумя. */ .module-list.is-scrollreveal li { transition: background var(--ease); } /* Кому анимация мешает — тому её нет. */ @media (prefers-reduced-motion: reduce) { .module-list.is-scrollreveal .module-outcome, .module-list.is-scrollreveal li.is-centered .module-outcome { transition: none; } } } /* ============================================================ Знаки дизайн-системы, 11.09 ============================================================ */ /* ---------- 23 · Знаки ---------- Набор и правила — дизайн-система Dubrovin, карточки «Графический язык», «Знаки в макетах», «Толщина линии знаков». Сам набор приехал файлом assets/icons.js: в нём спрайт и подстановка. Обычный не годится — клон наследует цвет от места, где лежит спрайт, и знак всегда чёрный с заливкой; скрипт подменяет настоящей разметкой символа. Правила, которые здесь соблюдены: · заливок нет, обводка — currentColor, знак работает на любом фоне; · один зелёный акцент на знак, больше нельзя; · знаки в ряду разной формы: три круглых подряд — орнамент; · либо у всех в ряду, либо ни у одного; · на экране один крупный знак, дальше только малые. Толщина линии следует за кеглем: чем меньше знак, тем шире линия — иначе на малом кегле она исчезает. Множители из карточки «Толщина линии знаков»: средний ×1.44 при сетке 48, малый ×1.95 при сетке 24. */ .dc-ico { display: block; width: var(--dc-ico-size, 24px); height: var(--dc-ico-size, 24px); stroke: currentColor; fill: none; stroke-width: var(--dc-ico-weight, 1.5); flex: 0 0 auto; } /* [правка Ивана 11.09] Линия чуть жирнее по всему сайту. Множители системы (1.44 и 1.95) считались под абстрактные знаки из кругов и дуг; предметные знаки тоньше по рисунку — у маяка и фонаря есть мелкие детали, и на прежней линии они рассыпались. */ .dc-ico--md { --dc-ico-size: 64px; --dc-ico-weight: 1.75; } .dc-ico--sm { --dc-ico-size: 24px; --dc-ico-weight: 2.3; } /* Знак над заголовком карточки: выровнен влево вместе со всем текстом, отступ до заголовка 20px — как в карточке «Знаки в макетах». По центру не ставим: вся система выровнена влево. */ .ico-block { margin-bottom: 20px; } @media (max-width: 860px) { .dc-ico--md { --dc-ico-size: 48px; --dc-ico-weight: 2.05; } } /* ---------- 24 · Зазор под меткой фазы ---------- [замечание Ивана 11.09] Между «ФАЗА 1» и названием фазы не было ничего — метка прилипала к заголовку. Причина: у метки стоит `.phase-head { margin: 0 0 14px }`, а в styles.css есть `.phase-card p { margin-bottom: 0 }` — два класса против одного, и правило системы выигрывало. Нужен тот же вес. */ .phase-card .phase-head { margin: 0 0 14px; } @media (max-width: 860px) { .phase-card .phase-head { margin: 0; } } /* ---------- 25 · Знаки в ряду коротких пунктов ---------- Ряд «Як минає зустріч»: знак над названием режима, тот же отступ 20px, что и в карточках. */ .mini-row--ico > div { padding-top: 20px; } .mini-row--ico .dc-ico { margin-bottom: 16px; } /* ---------- 27 · Подпись карточки — над заголовком ---------- [правка Ивана 11.09] В карточках «Результат програми» и «Чому саме в групі» мелкая подпись («10 років», «погляд збоку») стояла справа от знака, на одной с ним строке. Читалась как подпись к знаку, а не к карточке, и заголовок оставался без неё. Теперь колонка: знак · подпись · заголовок. Отступ знака до подписи тот же 20px, что в карточке «Знаки в макетах»; заголовок подтягивается к подписи вплотную — они одна пара. Вес селектора: `.depth-card h3 { margin: 40px 0 12px }` — два уровня, поэтому здесь тоже два и соседний комбинатор. */ .depth-card .depth-card-top { display: grid; justify-items: start; gap: 0; } .depth-card .depth-card-top small { margin: 0; } .depth-card .depth-card-top + h3 { margin-top: 10px; } @media (max-width: 860px) { .depth-card .depth-card-top + h3 { margin-top: 8px; } } /* ---------- 28 · Знак слева от текста в ряду режимов ---------- [правка Ивана 11.09, оба размера экрана] «Як минає зустріч»: знак над названием отрывал подпись от названия — ряд читался тремя столбиками, а не тремя пунктами. Знак уходит влево, название и подпись — в колонку справа от него. Размер знака уменьшен до 48: рядом с двумя строками текста 64 — пятно, а не пометка. Толщина линии идёт за кеглем (правило системы). */ .mini-row--ico-side > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start; /* [правка Ивана 11.09] Серая плашка вместо линии сверху. Линия делала из трёх режимов три колонки таблицы — а это три части одной встречи, и плашка держит их как три предмета, а не как столбцы. Рамки нет намеренно: обводка вернула бы ту же сетку, только замкнутую. */ padding: clamp(18px, 1.8vw, 24px); border-top: 0; background: var(--soft); } .mini-row--ico-side .dc-ico { --dc-ico-size: 48px; --dc-ico-weight: 2.05; grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; } .mini-row--ico-side b { grid-column: 2; } .mini-row--ico-side span { grid-column: 2; } @media (max-width: 560px) { .mini-row--ico-side .dc-ico { --dc-ico-size: 40px; --dc-ico-weight: 2.15; } } /* ---------- 29 · «На виході» вернулся к обычному шрифту ---------- [замечание Ивана 11.09] Строка «На виході: …» на странице «Як побудовано» набралась акцидентным Miratrix — капсом, с декоративными глифами. Причина: в styles.css есть `.module-list span { font-family:"Miratrix ua"; font-size:26px }` — правило для номера модуля. Обёртка раскрытия `.module-outcome__in` (заведена под анимацию высоты в блоке 22) — тоже span внутри списка, и правило село на неё. Возвращаем наследование от абзаца: шрифт страницы, кегль 14, как и было до обёртки. */ .module-list .module-outcome__in { font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; } /* ---------- 30 · Раскрытая полоса стопки не съезжает ---------- [замечание Ивана 11.09] В стопке «Це не навчання і не мотивація» содержимое прыгало влево при раскрытии. Механика: дизайн-система при раскрытии подкладывает серый фон и выносит его за поля — `padding-inline: 20px` вместе с `margin-inline: -20px`. Одно гасит другое, текст стоит на месте. Блок 18 снял у `--bare` горизонтальные поля (`padding-inline: 0`), и от пары остался только отрицательный внешний отступ — строка уезжала ровно на 20px. Возвращаем поля раскрытому состоянию: подложка снова выходит за край, а текст стоит там же, где в закрытом. */ .fold-plate--bare .dc-faq__item--open .dc-faq__bar, .fold-plate--bare .dc-faq__item--open .dc-faq__content { padding-left: 20px; padding-right: 20px; } /* ---------- 31 · Подводка блока «Чи це про мене?» ---------- Его строка над четырьмя сигналами: набирается как лид блока, не как заголовок. Ширина по строке — длинная мера ломала бы правило. */ .signal-lead { margin: 0 0 clamp(20px, 2.2vw, 30px); max-width: 30ch; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.25; letter-spacing: -.01em; } /* ---------- 32 · Затухание сменяющегося заголовка ---------- Только прозрачность и лёгкий сдвиг вверх: двигать сам заголовок по странице нельзя — за ним стоит весь первый экран, и он поедет следом. Высота не прыгает: у всех трёх фраз две строки. Если появится третья строка — здесь понадобится min-height, иначе экран дёрнется. */ .page-hero--cover h1 { transition: opacity 260ms ease, transform 260ms ease; } .page-hero--cover h1.is-fading { opacity: 0; transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .page-hero--cover h1 { transition: none; } .page-hero--cover h1.is-fading { opacity: 1; transform: none; } } /* ---------- 33 · Плашка посыла в рамке ---------- Та же плашка, что и зелёная, но обводкой. Нужна там, где на экране уже есть зелёная плоскость: правило ядра — одна на экран, и вторая не усиливает мысль, а спорит с первой. Рамка 2px и светлый фон — как у дверей в финале и у карточек отзывов, чтобы плашка читалась своим весом, а не «недокрашенной» зелёной. */ .claim--outline { background: transparent; border: 2px solid var(--black); } .claim--outline .claim__text { max-width: 62ch; font-size: clamp(18px, 1.6vw, 22px); } /* ---------- 34 · Его строка над дверями ---------- [правка 11.09] Финал страницы говорил только «выберите дверь». Зачем всё это — не говорил нигде. Строка Виктора стоит перед служебной подводкой и набирается крупнее её: это мысль, а не инструкция. Не плашка и не выделение цветом: на этом экране уже есть зелёная дверь, а правило ядра — одна зелёная плоскость на экран. */ .doors-claim { max-width: 34ch; margin: 0 0 14px; font-size: clamp(20px, 1.9vw, 27px); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; } /* ---------- 35 · Акцент знака на зелёной карточке ---------- Зелёная деталь знака на зелёной плоскости исчезает. Переводим её в чёрный — правило «один акцент» не нарушено: акцентом на таком экране работает сама плашка. Тот же приём был у плашки опроса, пока знак там стоял. */ .depth-card.depth-core { --dc-ico-accent: #050505; } /* ---------- 36 · «Не хочете форму?» под дверями ---------- [Р1, поток П4, перенос шага 2 13.09] Единственная прямая ссылка в Telegram на странице — для тех, кому форма мешает. Текстом, а не кнопкой: кнопка спорила бы с дверью «Хочу на траєкторію» за тот же клик. Вид взят с формы (.apply-aside в apply/apply.css): приглушённая строка, жирная ссылка. Там стили модуля, на лендинг они не подключены — поэтому своё правило здесь. */ .doors-aside { margin: clamp(18px, 2vw, 26px) 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; } .doors-aside a { color: var(--black); font-weight: 700; text-underline-offset: 3px; } /* ============================================================ 23 · Правки со встречи с Виктором 14.09 [внесено 15.09] ============================================================ */ /* Стрелки ленты — под каруселью, после полосы прокрутки [Иван 15.09]. В шапке на телефоне они оставались внизу экрана отдельно от карточек. display не трогаем: его выключает .dc-rail__nav[hidden] в standalone.css. */ .dc-rail > .dc-rail__nav { justify-content: flex-end; margin-top: 18px; } /* Два подзаголовка подряд на внутренних страницах [16.09]: цифры на «Як побудовано», «Тут усі умови» на «Формат і ціна» — отдельной строкой тем же кеглем, без большого зазора. */ .page-hero--sub .lead + .lead { margin-top: 10px; } /* Кнопка «Хочу на траєкторію» в шапке — без подчёркивания [Иван 17.09]: она в рамке, подчёркивание ссылки внутри рамки лишнее. И телефон, и широкий экран. */ .site-header a.header-cta, .main-nav a.header-cta { text-decoration: none; } /* «Практичний результат» в окне модуля — пунктами (app.js, «Модуль маршрута»). Строкой он был жирным (.mm__block--out p в standalone.css) — пункты тоже. */ .mm__block--out li { font-weight: 700; } /* Плашки «Це не навчання…» и «І кому зараз не сюди» переехали в «Часті питання» [15.09]. В старой стопке отступы им давал .fold-plate. */ .dc-faq__content .cross-list { margin: 0; } .dc-faq__content .fold-note { margin: 0 0 12px; } .dc-faq__content .cross-list + .text-link { display: inline-block; margin-top: 18px; } /* ---------- Смуга цінності на головній [v3_02, 18.09] ---------- Стоїть на місці плашки опитування, між «Чи це про мене?» і «Як побудована програма». Одна фраза великим жирним на зеленому [рішення Івана 18.09]. Текст чорний, а не білий: білий на зеленому #00dd64 дає контраст 1,8:1 і не читається; чорний — 11,5:1, як на інших зелених плашках сайту. Зелена смуга на цьому місці була і в v3_01 (плашка опитування). */ .value-band { background: var(--green); color: var(--black); } .value-band__inner { padding-top: clamp(64px, 8vw, 128px); padding-bottom: clamp(64px, 8vw, 128px); } .value-band__text { max-width: 17em; margin: 0; color: var(--black); font-size: clamp(30px, 4.4vw, 66px); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } /* ---------- Смуга з картинкою [v3_03, 21.09, рішення Івана] ---------- Фон — картинка 7 (стежка по хребту), текст білий. Картинка квадратна, смуга ширша — по ширині видно все, ріжеться верх і низ; 36% тримає в кадрі стежку. Під текстом темна вуаль: білий по світлій траві без неї не читається. На широкому екрані вуаль щільніша зліва (там текст), на телефоні — рівна. */ .value-band--photo { position: relative; overflow: hidden; background: #0d1a10 url("img/band-path.webp") center 36% / cover no-repeat; color: var(--white); } .value-band--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 5, .74) 0%, rgba(5, 5, 5, .5) 45%, rgba(5, 5, 5, .12) 100%); } .value-band--photo .value-band__inner { position: relative; } .value-band--photo .value-band__text { color: var(--white); text-shadow: 0 2px 28px rgba(0, 0, 0, .35); } @media (max-width: 860px) { /* [21.09, Іван: «×2, текст по центру»] На телефоні смуга вдвічі вища: 516 px замість 258 (замір на 375). Картинку видно майже цілком — дерево на вершині, стежку і людину; по боках ріжеться, 62% тримає стежку в кадрі. Текст по центру, вуаль темніша посередині. Обрано на холсті trajectory-launch/value-band/canvas-bg/canvas-mobile.html. */ .value-band--photo { display: flex; min-height: 516px; background-position: 62% 50%; } .value-band--photo .value-band__inner { flex: 1; display: flex; flex-direction: column; justify-content: center; } .value-band--photo::before { background: linear-gradient(180deg, rgba(5, 5, 5, .25) 0%, rgba(5, 5, 5, .6) 50%, rgba(5, 5, 5, .25) 100%); } } /* ---------- Відгуки на головній [v3_03, 21.09, Іван] ---------- Фон блоку сірий (section-soft), картки білі і без рамки — як картки артефактів у «Результат програми». Тільки на головній: «Голоси» на сторінці «Як побудовано» лишаються з рамкою. */ .reviews-section .dc-quote { border: 0; background: var(--white); } /* [v3_04, 22.09] Підписи під відгуками зняті (Б11) — картка без мінімальної висоти, щоб під коротким текстом не лишалось порожнього місця. Картки в стрічці вирівнюються по найвищій. */ .reviews-section .dc-quote { min-height: 0; } /* ---------- Висячі рядки [v3_03 -06, 21.09, Іван] ---------- На широкому екрані в останньому рядку абзацу лишалось одне-два слова («нового немає.», «попередню.», «траєкторія.»). balance вирівнює рядки короткого блоку (браузер робить це до шести рядків, довші лишає як є). Тільки від 861 px: на телефоні Іван задоволений. Плашка «Я не обіцяю…» — два речення окремими блоками, щоб вирівнювалось кожне. */ .br-wide { display: none; } .claim__text > span { display: block; } @media (min-width: 861px) { .br-wide { display: inline; } main :is(p, li, blockquote p, span, .mini-row > div) { text-wrap: balance; } }