/* ============================================================================ ЧЕСТНЫЙ РАЗГОВОР · ГДЕ БРАТЬ ЗАКАЗЧИКОВ НА ФРИЛАНСЕ В 2026? Эфир 21.08.2026, 13:00 МСК — боевая сборка. Система: freelance-guarantee (ds-base) + бумажная фактура. Фон #f7f7f5 + зерно · чернила #1b0624 · тело #3b3340 · сноски #6f6b74 акцент #e9a05a → #e4794e · Manrope 200..800 (единственный шрифт). ЕДИНАЯ СИСТЕМА БРЕЙКПОИНТОВ: 1199 / 959 / 639 / 374 + резина. Пара 1040/600 из исходного ds-base.css сведена сюда — иначе в полосе 1000–1040px и 601–639px вёрстка попадала между двумя системами. ГЛОБАЛЬНОЕ ПРАВИЛО: декоративных линеек-полосок над h2 нет нигде. Оглавление: 1 Токены 2 Reset + бумажный холст 3 Каркас секции (.sc) и общие детали 4 Типографика, кикеры, бейджи, кнопки 5 Карточки, иконки, чек-строки 6 HERO 7 Лид-магнит «лента на скрепке» 8 Программа «рельса со sticky-заголовком» 9 Спикеры «визитки с раскрытием» 10 Разворот «кому стоит быть» + «кому не подойдёт» 11 «Что ты получишь после эфира» 12 «Варианты участия» 13 Финальный CTA 14 Глоссарий (автономный блок библиотеки) 15 «Кто мы?» — zerocoder-about, переодетый 16 Футер — zerocoder-footer (канон + тёплый слой) 17 Попап регистрации GetCourse 18 Reveal по скроллу 19 Reduced motion 20 Креативный слой — 3D-объекты и сцена финального CTA ========================================================================== */ /* ============================================================================ 1. ТОКЕНЫ ========================================================================== */ :root{ /* — поверхности — */ --ds-linen:#f7f7f5; --ds-paper:#ffffff; --ds-bone:#edece7; /* — чернила — */ --ds-ink:#1b0624; --ds-espresso:#160f0c; --ds-charcoal:#292421; --ds-graphite:#3b3340; --ds-stone:#6f6b74; /* — закатный ramp, сужен к тёплой части (решение стилистики) — */ --ds-sun-1:#e9a05a; --ds-sun-2:#e4794e; --ds-sun-3:#d9713f; --ds-sun-4:#e9a05a; --ds-ramp:linear-gradient(90deg,#e9a05a,#e4794e 62%,#d9713f); /* ТЕКСТОВАЯ терракота: #e4794e на светлом даёт 2,74–2,94:1 и проваливает AA. Затемнённая ступень той же рампы: 4,98:1 на #fff, 4,64:1 на #f7f7f5. Правило: --ds-sun-2 — плашки, заливки, линии, точки; --ds-sun-text — текст. */ --ds-sun-text:#b3542a; --ds-tint-1:rgba(233,160,90,.16); --ds-tint-1-ink:#b06f24; --ds-tint-2:rgba(228,121,78,.14); --ds-tint-2-ink:#c25a32; --ds-tint-3:rgba(217,113,63,.14); --ds-tint-3-ink:#b3542a; --ds-tint-4:rgba(233,160,90,.16); --ds-tint-4-ink:#b06f24; /* — хейрлайны — */ --ds-line:rgba(27,6,36,.10); --ds-line-2:rgba(27,6,36,.06); --ds-line-dash:rgba(27,6,36,.14); --ds-line-dash-strong:rgba(27,6,36,.18); --ds-line-on-dark:rgba(255,255,255,.18); /* — глубина — */ --ds-sh-card:0 10px 30px rgba(27,6,36,.07); --ds-sh-stage:0 26px 60px rgba(27,6,36,.10); --ds-sh-btn:0 10px 26px rgba(27,6,36,.18); --ds-sh-badge:0 6px 20px rgba(27,6,36,.16); --ds-sh-pop:0 40px 90px rgba(27,6,36,.35); --ds-inset-hairline:inset 0 0 0 1px rgba(255,255,255,.5); /* — скругления — */ --ds-r-stage:34px; --ds-r-lg:20px; --ds-r-md:16px; --ds-r-sm:14px; --ds-r-xs:12px; --ds-r-pill:999px; --ds-r-btn:60px; /* — ритм — */ --ds-sec-y:clamp(56px,5vw,84px); --ds-sec-x:48px; --ds-max:1464px; --ds-gap:12px; --ds-pad-card:clamp(22px,2vw,30px); --ds-pad-card-lg:clamp(26px,2.4vw,38px); /* — типографика — */ --ds-font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --ds-h1:600 clamp(34px,6.3vw,78px)/1.02 var(--ds-font); --ds-h2:600 clamp(30px,3.4vw,50px)/1.06 var(--ds-font); --ds-h3:600 clamp(17px,1.8vw,22px)/1.22 var(--ds-font); --ds-lead:400 clamp(16px,1.4vw,20px)/1.55 var(--ds-font); --ds-body:400 16px/1.55 var(--ds-font); --ds-small:400 15.5px/1.5 var(--ds-font); --ds-note:400 12px/1.55 var(--ds-font); --ds-kick:600 12px/1 var(--ds-font); --ds-btn-font:600 17px/1 var(--ds-font); --ds-ls-display:-.035em; --ds-ls-title:-.03em; --ds-ls-kick:.09em; /* — движение — */ --ds-ease:cubic-bezier(.22,.61,.36,1); --ds-t-fast:.2s; --ds-t-hover:.28s; --ds-t-reveal:.65s; /* — плёночное зерно (inline SVG feTurbulence, внешних файлов нет) — */ --ds-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pn)' opacity='.6'/%3E%3C/svg%3E"); /* — тиснение бумаги: feTurbulence + feDiffuseLighting, растра нет — */ --pv-tooth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='1.7'%3E%3CfeDistantLight azimuth='228' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E"); } /* ============================================================================ 2. RESET + БУМАЖНЫЙ ХОЛСТ ========================================================================== */ *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;padding:0} /* НИКОГДА не ставить overflow-x на html/body: body становится скролл- контейнером и position:sticky в блоке «программа» умирает молча. Декор режем по секциям — overflow-x:clip на .sc. */ body{ background:var(--ds-linen); font:var(--ds-body); color:var(--ds-ink); -webkit-font-smoothing:antialiased; } img,svg{display:block;max-width:100%} a{text-decoration:none;color:inherit} button{font-family:inherit;border:0;cursor:pointer} ul,ol{list-style:none;margin:0;padding:0} h1,h2,h3,p{margin:0} /* плёнка поверх всей страницы: не скроллится как обои, читается как зерно */ .ds-grain{ position:fixed;inset:0;z-index:9000;pointer-events:none; opacity:.34;mix-blend-mode:soft-light; background-image:var(--ds-grain); } /* ============================================================================ 3. КАРКАС СЕКЦИИ overflow-x:clip (НЕ hidden) — hidden делает секцию скролл-контейнером и убивает sticky; по вертикали свечение обязано выходить за границы, иначе на стыке секций появляется прямой срез. ========================================================================== */ /* ⚠️ ГРАДИЕНТЫ МЕЖДУ БЛОКАМИ НЕ РЕЗАТЬ. Две вещи обрывали закатные пятна прямой линией на стыке секций: 1) overflow по вертикали — снят, клипим только горизонталь (см. ниже); 2) непрозрачный фон секции + z-index:0. z-index:0 делал каждую секцию стек-контекстом, и следующая секция своей непрозрачной подложкой закрашивала свечение предыдущей ровно по шву. Лечение: фон линена живёт на body (раздел 2), секции прозрачные, z-index у .sc снят. Побочный плюс: .sc-in{z-index:3} теперь выигрывает у любого .sc-glow{z-index:0} по всей странице — свечение соседа больше не может лечь поверх текста. Текстуры (.sc-tooth multiply / .sc-grain soft-light) смешиваются с тем же линеном body — тон бумаги не меняется. */ .sc{position:relative;overflow-x:clip;overflow-y:visible; background:transparent;color:var(--ds-ink); font-family:var(--ds-font);-webkit-font-smoothing:antialiased; padding:clamp(44px,4.8vw,88px) clamp(18px,3.4vw,56px)} /* SAFE-AREA. viewport-fit=cover в пускает контент под чёлку, поэтому боковые поля берут максимум из «поля секции» и выреза. Одно и то же выражение обязано стоять у .sc, .hv и .footer — иначе разъедутся края. env() не поддержан → строка невалидна и отбрасывается, работает padding выше. */ .sc{padding-left:max(clamp(18px,3.4vw,56px),env(safe-area-inset-left)); padding-right:max(clamp(18px,3.4vw,56px),env(safe-area-inset-right))} .sc-in{position:relative;z-index:3;max-width:var(--ds-max);margin:0 auto} .sc p,.sc ul,.sc ol,.sc dl,.sc dd,.sc figure,.sc figcaption{margin:0} .sc summary{list-style:none;cursor:pointer} .sc summary::-webkit-details-marker{display:none} .sc-glow{position:absolute;inset:-150px -8%;z-index:0;pointer-events:none;filter:blur(78px); background: radial-gradient(38% 42% at 12% 30%,rgba(250,214,150,.55) 0%,rgba(250,214,150,0) 72%), radial-gradient(44% 48% at 80% 66%,rgba(240,157,110,.32) 0%,rgba(240,157,110,0) 74%), radial-gradient(30% 34% at 94% 8%,rgba(228,166,196,.13) 0%,rgba(228,166,196,0) 76%)} .sc-tooth{position:absolute;inset:0;z-index:5;pointer-events:none; background-image:var(--pv-tooth);background-size:190px 190px;opacity:.17;mix-blend-mode:multiply} .sc-grain{position:absolute;inset:0;z-index:6;pointer-events:none; background-image:var(--ds-grain);opacity:.30;mix-blend-mode:soft-light} /* — слот портрета: пропорцию задаёт контейнер, содержимое только заполняет, поэтому высота карточки не зависит от самой картинки. — */ .slot{position:relative;overflow:hidden;display:grid;place-items:center; background:linear-gradient(158deg,#f1eee8 0%,#e6e2da 100%); border:1px solid var(--ds-line);border-radius:6px;color:var(--ds-ink)} .slot-34{aspect-ratio:3/4} /* фото в слоте */ .slot--photo{background:#e6e2da} .slot picture{display:block;width:100%;height:100%} .slot img{display:block;width:100%;height:100%;object-fit:cover} /* — скрепка — */ .clip{position:absolute;z-index:6;width:38px;height:auto; filter:drop-shadow(0 3px 5px rgba(27,6,36,.22));pointer-events:none} .nw{white-space:nowrap} /* ============================================================================ 4. ТИПОГРАФИКА, КИКЕРЫ, БЕЙДЖИ, КНОПКИ ========================================================================== */ /* единственный стиль заголовка секции на всю страницу: голый h2, без линеек, кикеров и плашек. Кегль — токен --ds-h2 системы. */ .sc-h2{margin:0;font:var(--ds-h2);letter-spacing:var(--ds-ls-display); color:var(--ds-ink);text-wrap:balance;max-width:24ch} .ds-lead{margin-top:16px;font:var(--ds-lead);color:var(--ds-graphite);max-width:62ch} .ds-footnote{margin-top:30px;font:var(--ds-note);color:var(--ds-stone);max-width:44em} .ds-kicker{display:flex;align-items:center;gap:8px;font:var(--ds-kick); letter-spacing:var(--ds-ls-kick);text-transform:uppercase;color:var(--ds-sun-text);margin-bottom:26px} .ds-kicker::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor} .ds-badge{display:inline-flex;align-items:center;gap:10px;border:0;background:var(--ds-ink); border-radius:var(--ds-r-pill);padding:12px 22px; font:500 15px/1.3 var(--ds-font);color:rgba(255,255,255,.72); margin-bottom:26px;box-shadow:var(--ds-sh-badge)} .ds-badge b{font-weight:700;color:#fff} .ds-badge i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ds-sun-1);font-style:normal; box-shadow:0 0 0 4px rgba(233,160,90,.25)} .ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; background:var(--ds-espresso);color:#fff;border:0;border-radius:var(--ds-r-btn); padding:22px 42px;font:var(--ds-btn-font);letter-spacing:0;cursor:pointer; box-shadow:var(--ds-sh-btn); transition:background var(--ds-t-fast),transform var(--ds-t-fast),box-shadow var(--ds-t-fast)} /* часть CTA — ссылки-якоря на #tariffs, а не кнопки: подчёркивание снимаем */ a.ds-btn{text-decoration:none} /* прокрутка к тарифам не должна упирать заголовок в самый край экрана */ #tariffs{scroll-margin-top:clamp(12px,3vh,40px)} .ds-btn:hover{background:#241812;transform:translateY(-1px)} .ds-btn:active{transform:translateY(0);box-shadow:0 6px 16px rgba(27,6,36,.18)} .ds-btn:focus-visible{outline:2px solid var(--ds-sun-2);outline-offset:3px} .ds-cta{margin-top:32px;display:flex;gap:18px;align-items:center;flex-wrap:wrap} /* капс кнопок страницы — скобки из ТЗ сняты, остался только разряд */ .pg-cta{letter-spacing:.05em;text-transform:uppercase} /* ============================================================================ 5. КАРТОЧКИ, ИКОНКИ, ЧЕК-СТРОКИ ========================================================================== */ /* overflow:hidden несущий — ватермарки и градиентные промывки рисуются за краем карточки и должны обрезаться ею, а не страницей */ .ds-card{position:relative;overflow:hidden;background:var(--ds-paper);border:1px solid var(--ds-line); border-radius:var(--ds-r-md);padding:var(--ds-pad-card); transition:transform var(--ds-t-hover) var(--ds-ease)} .ds-card:hover{transform:translateY(-3px)} .ds-card-lg{border-radius:var(--ds-r-lg);padding:var(--ds-pad-card-lg)} /* 3px закатная линейка по верхней кромке — «шапка документа» */ .ds-card-topline::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ds-ramp)} /* тёмная карточка: чернильная плоскость, пунктирная рамка, закатное свечение */ .ds-card-dark{position:relative;overflow:hidden;background:var(--ds-ink);border-color:transparent; color:#f2efe9;display:flex;flex-direction:column;padding:clamp(28px,2.6vw,40px)} .ds-card-dark::after{content:"";position:absolute;inset:0;pointer-events:none;filter:blur(60px);opacity:.55; background:radial-gradient(60% 70% at 85% 100%,rgba(233,160,90,.6) 0%,transparent 70%), radial-gradient(50% 60% at 10% 110%,rgba(217,113,63,.45) 0%,transparent 70%)} .ds-card-dark::before{content:"";position:absolute;inset:12px;border:1px dashed var(--ds-line-on-dark); border-radius:10px;pointer-events:none;z-index:1} .ds-card-dark > *{position:relative;z-index:2} .ds-card-dark b{color:#fff} /* плитка иконки 52px, тонированная под акцент */ .ds-ico{width:52px;height:52px;border-radius:var(--ds-r-sm);display:grid;place-items:center;flex:none} .ds-ico svg{width:26px;height:26px} .ds-ico-1{background:var(--ds-tint-1);color:var(--ds-tint-1-ink)} .ds-ico-2{background:var(--ds-tint-2);color:var(--ds-tint-2-ink)} .ds-ico-3{background:var(--ds-tint-3);color:var(--ds-tint-3-ink)} .ds-ico-4{background:var(--ds-tint-4);color:var(--ds-tint-4-ink)} /* ватермарк: увеличенный контурный глиф, вываливающийся за угол карточки */ .ds-wm{position:absolute;z-index:1;right:-18px;bottom:-18px;width:132px;height:132px; opacity:.07;transform:rotate(-8deg);color:var(--ds-ink);pointer-events:none;line-height:0} .ds-wm svg{width:100%;height:100%} /* галочка */ .ds-chk{flex:none;position:relative;width:22px;height:22px;border-radius:50%; background:var(--ds-sun-2);margin-top:1px} .ds-chk::after{content:"";position:absolute;left:7.5px;top:5px;width:5px;height:9px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .ds-chk-sm{width:18px;height:18px} .ds-chk-sm::after{left:6px;top:3.5px;width:4px;height:8px} /* ============================================================================ 6. HERO — раскладка Лиды: слева смысл, справа две реплики (светлая карточка + чернильная), утверждено 06.08 ПРАВКА 07.08 (заказчик): первый и последний экраны поменялись фоном и креативами, тексты остались каждый на своём месте. Сюда приехали тёмная плашка .ds-card-dark со светом за курсором и полароидная пара портретов; отсюда на финальный блок ушли закатное свечение фона и квадраты 1:1. ========================================================================== */ /* Оси overflow разведены, хотя своего свечения у hero больше нет: соседний лид-магнит и финальный блок светят через швы, а overflow:clip по обеим осям обрезал бы их прямой линией. Фон прозрачный по той же причине (линен лежит на body). */ .hv{position:relative;overflow-x:clip;overflow-y:visible; background:transparent;color:var(--ds-ink); font-family:var(--ds-font);-webkit-font-smoothing:antialiased; padding:clamp(40px,7vw,112px) clamp(18px,3.4vw,56px)} .hv{padding-left:max(clamp(18px,3.4vw,56px),env(safe-area-inset-left)); padding-right:max(clamp(18px,3.4vw,56px),env(safe-area-inset-right))} /* контейнер один на всю страницу: --ds-max + поля секции. Прежние 1280px давали hero узкую колонку и разъезд краёв с соседями от ~1350px. Сетка 07.08 переехала на .hv-card: контейнер теперь только держит меру, а две колонки живёт внутри тёмной плашки. */ .hv-in{position:relative;z-index:3;max-width:var(--ds-max);margin:0 auto} .hv figure,.hv figcaption,.hv blockquote{margin:0} .hv-tooth{position:absolute;inset:0;z-index:5;pointer-events:none; background-image:var(--pv-tooth);background-size:190px 190px;opacity:.17;mix-blend-mode:multiply} .hv-grain{position:absolute;inset:0;z-index:6;pointer-events:none; background-image:var(--ds-grain);opacity:.30;mix-blend-mode:soft-light} /* — тёмная плашка первого экрана (правка 07.08) --------------------------- Приехала с финального CTA целиком: та же сетка «текст / креатив», тот же тёплый рассвет фоном и тот же свет за курсором (.ds-spot, раздел 20.5). Сетка живёт здесь, а не на .hv-in, иначе плашка обняла бы только одну колонку. Пропорции колонок и зазор оставлены прежними, hero-шные. */ .hv-card{display:grid;grid-template-columns:minmax(0,1fr) auto; gap:clamp(26px,3.4vw,62px);padding:clamp(30px,3.4vw,60px);align-items:center; background-image: radial-gradient(64% 88% at 90% -12%,rgba(233,160,90,.22) 0%,rgba(233,160,90,0) 62%)} .hv-card > *{min-width:0} /* плашка на первом экране не подпрыгивает: .ds-card:hover поднимает карточку на 3px, и на объекте в пол-экрана это читается как дёрганье страницы */ .hv-card:hover{transform:none} .hv-txt{min-width:0} .hv .ds-badge{margin-bottom:26px;background:rgba(255,255,255,.10);box-shadow:none; border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.78)} .hv .ds-kicker{text-transform:uppercase;margin-bottom:18px;color:var(--ds-sun-1)} /* строчными, как в записи Лиды: заголовок не капсовый */ /* ЖЁСТКАЯ РАЗБИВКА В ДВЕ СТРОКИ (правка заказчика 07.08): Где брать заказчиков / на фрилансе в 2026? ⚠️ text-wrap:balance спорит с
: он переразбивает первую строку, даже когда она целиком влезает в колонку, — на 1440 заголовок упрямо вставал в три строки. Поэтому там, где перенос включён, баланс снят; ниже порога он возвращается и раскладывает строку сам. ПОРОГ 420px ВЫВЕДЕН ЗАМЕРОМ (см. таблицу ниже, колонка «запас»). Ниже него «Где брать заказчиков» влезает в колонку с запасом меньше 25px, а шрифт- фолбэк до загрузки Manrope шире на 3–8% и рвал бы строку на третью. */ .hv-h1{margin:0;font:700 clamp(30px,4.45vw,66px)/1.06 var(--ds-font);letter-spacing:-.03em; color:#fff;max-width:none;text-wrap:balance} .hv-br{display:none} @media (min-width:420px){ .hv-br{display:inline} .hv-h1{text-wrap:normal} } .hv-lead{margin-top:26px;max-width:47ch;color:rgba(255,255,255,.78)} .hv .ds-footnote{margin-top:18px;color:rgba(255,255,255,.50);max-width:52ch} .hv .ds-cta{margin-top:32px} /* кнопка на тёмном — белая пилюля, как была на финальном блоке */ .hv .ds-btn{background:#fff;color:var(--ds-ink);box-shadow:0 14px 34px rgba(0,0,0,.3)} .hv .ds-btn:hover{background:#f4ece3} /* — 6.1 СКРАПБУК-ПАРА ПОЛАРОИДОВ (правка 07.08) -------------------------- Приехала с финального CTA целиком. Подача 1:1 из email-баннера «Мы в эфире» (banners/html-email/_banner-email.css, блок .pt-pair): полароиды с закатной кромкой, наклоны −2,1° и +1,7°, карточка Мили смещена вниз, скрепка на её правом верхнем углу. Пропорции пересчитаны с холста баннера 2160px на ширину плашки: фото 296→176px, кегль подписи 25→16px, скрепка 56→34px. Классы без префикса блока: пара уже один раз переезжала между экранами. */ .hv-pt{display:flex;justify-content:flex-end} .pt-pair{display:flex;align-items:flex-start;gap:clamp(11px,1.1vw,18px); padding-top:clamp(14px,1.4vw,24px)} /* overflow НЕ hidden: скрепка обязана выходить за угол карточки */ /* Фото укрупнено 176 → 268px (правка заказчика): под именем теперь стоит реплика спикера, и на прежней ширине строка выходила в 18 знаков. */ .pt{--pt-w:clamp(150px,16vw,252px);position:relative;flex:none; background:var(--ds-paper);border:1px solid var(--ds-line);border-radius:16px; padding:clamp(7px,.68vw,10px) clamp(7px,.68vw,10px) 0; box-shadow:0 26px 60px rgba(0,0,0,.42)} /* Закатная кромка. Полоса 3px не может нести радиус 15px (браузер ужимает радиусы до высоты), поэтому элемент высотой 16px со скруглением, а сам закат нарисован фоном в 3px и обрезан этим скруглением — как в баннере. */ .pt::before{content:"";position:absolute;top:0;left:0;right:0;height:16px; background-image:var(--ds-ramp);background-size:100% 3px;background-repeat:no-repeat; background-position:left top;border-radius:15px 15px 0 0;pointer-events:none} /* кропы 3:4 готовы — пропорция слота совпадает, лица не режутся */ .pt-ph{width:var(--pt-w);aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#e6e2da} .pt-ph picture{display:block;width:100%;height:100%} .pt-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 50%} /* ⚠️ width обязателен. Без него подпись сайзится по max-content, и на узких ширинах «Кирилл Пшинник» распирал карточку шире фото: пара переставала влезать в поле плашки и overflow:hidden срезал скрепку. Теперь ширину карточки задаёт только фото, а подпись при нехватке места переносится на две строки (это происходит от 374px и ниже). ⚠️ Селектор с .hv обязателен и здесь, и ниже: сбросы «.hv figure{margin:0}» и «.hv figcaption{margin:0}» (0,1,1) сильнее голого класса. */ .hv .pt figcaption{width:var(--pt-w); padding:clamp(9px,.85vw,13px) 2px clamp(12px,1.1vw,18px)} /* имя по центру — конвенция полароида; реплика под ним по левому краю: в столбце 268px центрированный абзац в 7 строк читается рваным. Разделитель повторяет линейку между шапкой и цитатой в карточках финала. */ /* ⚠️ селектор из двух простых обязателен: имя набрано , а у плашки есть «.ds-card-dark b{color:#fff}» (0,1,1) — оно сильнее голого .pt-name и красило имя белым по белой рамке полароида. */ .hv .pt-name{display:block;text-align:center; font:600 clamp(13px,1.08vw,16.5px)/1.25 var(--ds-font); letter-spacing:-.02em;color:var(--ds-ink)} .pt-quote{display:block;margin-top:clamp(8px,.7vw,11px); padding-top:clamp(8px,.7vw,11px);border-top:1px solid var(--ds-line-2); font:400 clamp(11.5px,.95vw,14.5px)/1.5 var(--ds-font); letter-spacing:0;color:var(--ds-graphite);text-align:left} .pt--a{transform:rotate(-2.1deg)} .hv .pt--b{transform:rotate(1.7deg);margin-top:clamp(16px,2.4vw,38px)} .pt-clip{position:absolute;z-index:6;width:clamp(24px,2.3vw,34px);height:auto; top:clamp(-24px,-1.6vw,-15px);right:-5px; transform:rotate(9deg) scaleX(-1); filter:drop-shadow(0 4px 6px rgba(27,6,36,.24));pointer-events:none} /* появление сцены — CSS, без JS. Считаем колонки внутри плашки, а не детей .hv-in: там теперь один ребёнок. .ds-spot из анимации исключён — иначе свет всплывал бы вместе с текстом. */ @keyframes hv-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .js .hv-card > .hv-txt, .js .hv-card > .hv-pt{animation:hv-in .6s cubic-bezier(.22,.61,.36,1) both} .js .hv-card > .hv-pt{animation-delay:.08s} @media (max-width:1199px){ .hv-card{gap:clamp(22px,2.6vw,36px)} .hv-h1{font-size:clamp(30px,4.35vw,56px)} .hv-lead{margin-top:18px;max-width:42ch} } /* ноутбучные окна: hero не должен резаться по высоте */ @media (min-width:960px) and (max-height:820px){ .hv{padding-top:clamp(30px,3.4vw,54px);padding-bottom:clamp(30px,3.4vw,54px)} .hv-card{padding:clamp(26px,2.6vw,44px)} .hv-h1{font-size:clamp(29px,3.4vw,50px)} .hv .ds-cta{margin-top:22px} } @media (min-width:960px) and (max-height:700px){ .hv .ds-badge{margin-bottom:16px} .hv .ds-kicker{margin-bottom:12px} .hv-h1{font-size:clamp(28px,3.1vw,44px)} .pt{--pt-w:clamp(112px,9.6vw,144px)} } @media (max-width:959px){ /* пара полароидов уходит под текстовый блок и получает всю его ширину */ .hv-card{grid-template-columns:1fr;gap:clamp(26px,3.4vw,38px);align-items:start} .hv-h1{font-size:clamp(30px,5.4vw,52px)} .hv-lead{max-width:56ch} .hv-pt{justify-content:flex-start} .pt{--pt-w:clamp(160px,30vw,300px)} } /* Ниже 640px пара встаёт в столбец. Рядом карточки тут не живут: на 390px на каждую остаётся 152px, реплика ложится в 22 знака и кегль уходит под 12px. В столбце карточка забирает всю ширину, реплика читается 14px. Наклоны в столбце сняты: повёрнутая карточка во всю ширину вылезает за поле плашки на ~19px и даёт горизонтальную прокрутку. */ @media (max-width:639px){ .hv-card{gap:24px;padding:clamp(20px,4.4vw,28px)} .hv-h1{font-size:clamp(27px,7vw,40px)} .hv-lead{margin-top:15px;font-size:16.5px;max-width:none} .hv .ds-footnote{max-width:none} .hv .ds-cta{margin-top:22px} .hv .ds-btn{width:100%} .hv-pt{display:block} .pt-pair{flex-direction:column;align-items:stretch;gap:20px;padding-top:0} .pt{--pt-w:100%} .pt--a{transform:none} .hv .pt--b{transform:none;margin-top:0} .pt-quote{font-size:14px} } @media (max-width:374px){ /* поля НЕ переопределяем: 16px здесь давал hero сдвиг на 2px относительно всех остальных секций (у них clamp даёт 18px) */ .hv-h1{font-size:27px} .pt{border-radius:13px} .pt::before{border-radius:12px 12px 0 0} .pt-clip{width:24px;right:-2px;top:-14px} } /* ============================================================================ 7. ЛИД-МАГНИТ — «лента на скрепке» (вариант C) Первая позиция — без кнопки, вторая — с «НЕ ПРОПУЩУ». Правка Лиды: слева от заголовка стоит контурная иконка подарка на тёплой плитке (рисуем кодом, растровых иконок не тянем). ========================================================================== */ /* ПРИЖАТИЕ К БЛОКУ СВЕРХУ (правка Лиды). Лид-магнит — приписка к предыдущему блоку, а не самостоятельная секция: верхнее поле секции снято в ноль, нижнее поле соседа сверху срезано с 88/112px до 24–44px. Снизу ритм секции не трогаем — иначе слипнется со следующим блоком. Зазор считать вместе с .lm-c__wrap{padding-top:46px}: это запас под скрепку, и она теперь физически заходит на блок сверху. Соседи сверху: #hero → #lead-magnet-1, #result → #lead-magnet-2. */ #lead-magnet-1,#lead-magnet-2{padding-top:0} #hero,#result{padding-bottom:clamp(24px,2.4vw,44px)} .lm-ttl{font:600 clamp(19px,1.9vw,27px)/1.25 var(--ds-font);letter-spacing:-.024em;color:var(--ds-ink)} /* колонка заголовка ужата .78fr → .58fr: после укрупнения бонусов до 18,5px вариант с кнопкой рвал пункты на 4 строки с висячим «формулировок». Правим базовое значение, а не добавляем правило с :not() — оно было бы специфичнее (0,2,0) медиазапросов ниже и протекло бы в планшет. .lm-c--plain держит свою пару колонок сразу следом. */ .lm-c{position:relative;display:grid; grid-template-columns:minmax(0,.58fr) minmax(0,1fr) auto; align-items:center;gap:clamp(18px,2.4vw,40px); background:var(--ds-paper);border:1px solid var(--ds-line);border-radius:var(--ds-r-md); padding:clamp(22px,2.2vw,32px) clamp(22px,2.4vw,38px); transform:rotate(-.5deg);box-shadow:0 18px 40px rgba(27,6,36,.09)} /* без кнопки колонок две, лента становится ниже */ .lm-c--plain{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)} /* запас сверху под скрепку: она торчит выше карточки на ~56px */ .lm-c__wrap{padding:46px 0 14px} /* скрепка заходит в карточку на ~30px и стоит выше плитки подарка */ .lm-c .clip{top:-56px;left:22px;transform:rotate(-9deg)} .lm-c__hd{display:flex;align-items:center;gap:clamp(13px,1.2vw,18px);min-width:0} /* иконка подарка: та же плитка 52px, что у блока «что получишь» */ .lm-ico{flex:none;width:52px;height:52px;border-radius:var(--ds-r-sm);display:grid;place-items:center; background:var(--ds-tint-1);color:var(--ds-tint-1-ink)} .lm-ico svg{width:27px;height:27px} .lm-c__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,28px)} /* Правка Лиды 06.08: бонусы читались мелкой припиской рядом с 27px заголовком. Кегль поднят 14,7 → 18,5px на 1440 (+26%), галочка выросла вслед за строкой. */ .lm-c__items > li{display:flex;gap:12px;align-items:flex-start;min-width:0; font:400 clamp(16px,1.3vw,18.5px)/1.5 var(--ds-font);color:var(--ds-graphite)} .lm-c__items > li + li{padding-left:clamp(16px,1.8vw,28px);border-left:1px dashed var(--ds-line-dash)} /* галочка не .ds-chk-sm из DS, а её локальная версия: 18px кружок против строки 18,5/1,5 читался мелко. Класс используется только здесь (2×), но правим точечно, чтобы не сдвинуть токен DS. */ .lm-c__items > li .ds-chk{width:21px;height:21px;margin-top:3px} .lm-c__items > li .ds-chk::after{left:7.5px;top:4.5px;width:4.5px;height:9px} @media (max-width:1199px){ .lm-c{grid-template-columns:minmax(0,1fr) auto;row-gap:22px} .lm-c--plain{grid-template-columns:minmax(0,1fr)} .lm-c__items{grid-column:1/-1;order:3} } @media (max-width:959px){ .lm-c,.lm-c--plain{grid-template-columns:1fr;transform:rotate(-.3deg)} .lm-c__items{order:0} } @media (max-width:639px){ .lm-c{transform:none;padding:24px 20px} .lm-c__wrap{padding-top:40px} .lm-c__items{grid-template-columns:1fr;gap:14px} .lm-c__items > li + li{padding-left:0;border-left:0;padding-top:14px;border-top:1px dashed var(--ds-line-dash)} .lm-c .ds-btn{width:100%} .lm-c .clip{left:18px;width:30px;top:-46px} .lm-ico{width:46px;height:46px} .lm-ico svg{width:24px;height:24px} } @media (max-width:374px){ .lm-c{padding:22px 16px} .lm-c__hd{gap:12px} } /* ⚠️ НАКЛОН vs REVEAL. У .lm-c и .rv (раздел 18) одинаковая специфичность (0,1,0), .rv лежит ниже по файлу и выигрывает — карточка теряла rotate, а скрепка над ней остаётся повёрнутой на −9°, приём разваливался. Лечится парой .lm-c.rv (0,2,0): наклон живёт внутри reveal-состояний. Правила ниже дублируют шкалу наклона выше — правишь одну, правь обе. Без JS класс .rv не появляется и работают базовые правила. */ .lm-c.rv{transform:translateY(16px) rotate(-.5deg)} .lm-c.rv.is-in{transform:rotate(-.5deg)} @media (max-width:959px){ .lm-c.rv{transform:translateY(16px) rotate(-.3deg)} .lm-c.rv.is-in{transform:rotate(-.3deg)} } @media (max-width:639px){ .lm-c.rv{transform:translateY(16px)} .lm-c.rv.is-in{transform:none} } /* ============================================================================ 8. ПРОГРАММА — «рельса со sticky-заголовком» (вариант A) sticky держится только пока ни один предок не скролл-контейнер: на .sc стоит overflow-x:clip (не hidden), на html/body — ничего. ========================================================================== */ .pr-q{font:600 clamp(17px,1.65vw,23px)/1.28 var(--ds-font);letter-spacing:-.026em;color:var(--ds-ink)} .pr-a-txt{font:400 clamp(15.5px,1.18vw,17.5px)/1.58 var(--ds-font);color:var(--ds-graphite)} .pr-a{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:clamp(26px,3.6vw,64px); align-items:start} .pr-a > *{min-width:0} .pr-a__side{position:sticky;top:24px} .pr-a__side .ds-cta{margin-top:28px} .pr-a__list{display:grid} .pr-a__it{display:grid;grid-template-columns:26px minmax(0,1fr);gap:0 clamp(16px,1.6vw,26px); padding-bottom:clamp(20px,2vw,30px)} .pr-a__it:last-child{padding-bottom:0} .pr-a__rail{position:relative;display:flex;justify-content:center} .pr-a__rail i{position:relative;z-index:1;width:13px;height:13px;border-radius:50%; background:var(--ds-sun-2);margin-top:9px;box-shadow:0 0 0 5px rgba(228,121,78,.16)} .pr-a__it:not(:last-child) .pr-a__rail::after{content:"";position:absolute;top:26px;bottom:-4px;left:50%; transform:translateX(-50%);width:2px;border-radius:1px; background:linear-gradient(180deg,rgba(228,121,78,.42),rgba(228,121,78,.1))} .pr-a__card{position:relative;overflow:hidden;background:var(--ds-paper);border:1px solid var(--ds-line); border-radius:var(--ds-r-md);padding:clamp(20px,1.9vw,28px); transition:transform var(--ds-t-hover) var(--ds-ease)} .pr-a__card:hover{transform:translateY(-3px)} .pr-a__n{font:700 12px/1 var(--ds-font);letter-spacing:.14em;color:var(--ds-sun-text); display:block;margin-bottom:11px} .pr-a__card .pr-a-txt{margin-top:10px} @media (max-width:959px){ .pr-a{grid-template-columns:1fr;gap:28px} .pr-a__side{position:static} } @media (max-width:639px){ .pr-a__it{grid-template-columns:20px minmax(0,1fr);gap:0 14px} .pr-a__rail i{width:11px;height:11px;box-shadow:0 0 0 4px rgba(228,121,78,.16)} .pr-a__side .ds-cta .ds-btn{width:100%} } /* ============================================================================ 9. СПИКЕРЫ — «визитки с раскрытием» (вариант C) Правка Лиды: закатная линейка по верхней кромке карточки, как в варианте A. ========================================================================== */ .sp-name{font:600 clamp(19px,1.8vw,26px)/1.16 var(--ds-font);letter-spacing:-.028em;color:var(--ds-ink)} .sp-role{margin-top:6px;font:600 11px/1 var(--ds-font);letter-spacing:.12em;text-transform:uppercase; color:var(--ds-sun-text)} .sp-li{display:grid;gap:9px} .sp-li li{position:relative;padding-left:16px; font:400 clamp(15.5px,1.15vw,17px)/1.5 var(--ds-font);color:var(--ds-graphite)} .sp-li li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1.5px; background:var(--ds-sun-2);opacity:.8} .sp-grp{font:600 11px/1 var(--ds-font);letter-spacing:.11em;text-transform:uppercase; color:var(--ds-stone);margin-bottom:11px} .sp-c{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(24px,2.6vw,40px); align-items:start} .sp-c > *{min-width:0} /* ВЫРАВНИВАНИЕ КАРТОЧЕК (правка Лиды 06.08). Регалии у спикеров разной длины, поэтому «Ещё регалии» стояли на разной высоте (расхождение ~35px на 1440). Лечим subgrid, а не подгонкой текста: у обеих карточек три строки — шапка, список, раскрывашка. Каждая строка берёт высоту по максимуму из двух карточек, поэтому обеих стартует с одного y. Почему subgrid, а не flex + margin-top:auto — при раскрытии одной карточки flex прижал бы summary соседки к низу растянутой карточки и она бы уехала. В subgrid раскрытая панель растит ТРЕТЬЮ строку, а summary стоит в её начале — соседка остаётся на месте. Без поддержки subgrid работает базовое align-items:start (как было). */ @supports (grid-template-rows:subgrid){ @media (min-width:960px){ .sp-c{align-items:stretch;grid-template-rows:auto auto auto} .sp-c__card{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start} } } /* линейка сверху — приём варианта A; overflow:hidden держит её в скруглении */ .sp-c__card{position:relative;overflow:hidden;background:var(--ds-paper);border:1px solid var(--ds-line); border-radius:var(--ds-r-md);padding:clamp(22px,2.2vw,32px)} .sp-c__card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ds-ramp)} .sp-c__hd{display:flex;gap:clamp(14px,1.6vw,22px);align-items:center} /* Правка Лиды 06.08: портрет 99×132 не давал прочитать лицо. 146×195 на 1440 — ориентир по крупности с sites.zerocoder.ru/ai-business. */ .sp-c__hd .slot-34{width:clamp(110px,10.2vw,146px);flex:none;border-radius:12px} /* align-content:start обязателен внутри subgrid: строка списка тянется до высоты соседней карточки, и грид-строки самого