/* ── шаг «Аудитория» прямо в ленте, под карточкой продукта ── Это продолжение того же экрана («вот что поняли — вот кого ищем»), а не отдельная панель: выбор интересов — единственное, что человек тут делает, и ради него не стоит уводить взгляд вбок. Карточка продукта выше остаётся нередактируемой. */ .aud-step { margin-top:20px; text-align:center; padding-top:38px; position:relative } /* «География» идёт сразу за «Интересами» — это один разговор про аудиторию, и штрих между ними лишний: он бы резал раздел пополам. */ .aud-step + .aud-step { margin-top:8px; padding-top:14px } .aud-step + .aud-step::before { display:none } /* --fs-section: ступень ниже названия документа (--fs-title у .brief h2) и ровно та, что система отводит разделу. Стояло 30px — числа, которого в шкале нет вообще: раздел был мельче своей ступени, и весь документ проваливался относительно стартовых экранов. */ .aud-step h3 { margin:0; font-family:var(--font-display); font-size:var(--fs-section); line-height:var(--lh-section); font-weight:700; letter-spacing:0; color:var(--ink-strong) } .aud-step .sub { margin:6px 0 0; font-family:var(--font-script); font-weight:300; font-size:var(--fs-script-note); line-height:var(--lh-script-note); letter-spacing:var(--ls-script); color:var(--ink-strong) } .aud-step .lim { display:block; margin-top:6px; font-size:12px; color:var(--bad) } .aud-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px 9px; margin-top:12px } /* Снятый интерес не исчезает и не зачёркивается — он теряет «предметность»: остаётся только слово, которое можно вернуть кликом. */ .aud-chip { position:relative; border:0; border-radius:var(--radius-chip); background:var(--paper); /* --fs-fact, а не --fs-small: интерес — это содержимое документа, наравне с фактами о продукте, а не примечание под ним. */ padding:7px 14px 10px; font:inherit; font-size:var(--fs-fact); color:var(--ink-strong); cursor:pointer; box-shadow:var(--shadow-chip); transition:box-shadow var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out) } .aud-chip:hover { color:var(--ink) } /* Снятый интерес становится плоским, а не серым: тень уходит, слово тускнеет. */ .aud-chip.off { background:transparent; box-shadow:none; opacity:.3; color:var(--ink-strong) } .aud-chip.off:hover { opacity:.5 } .aud-chip .x { position:absolute; right:7px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--muted); font-size:15px; line-height:1; cursor:pointer; padding:3px 5px; border-radius:50%; opacity:0 } .aud-chip:hover .x { opacity:1 } .aud-chip .x:hover { background:var(--ink-faint); color:var(--ink) } /* «Добавить» — знак без плашки: под ним при наведении проявляется мягкое белое гало, как у круглых кнопок в макете. */ .aud-add { margin:12px auto 0; display:grid; place-items:center; position:relative; width:28px; height:28px; border:0; background:transparent; cursor:pointer; color:var(--ink-strong); font-size:20px; line-height:1; border-radius:var(--radius-mark); opacity:.8; transition:opacity var(--dur-hover) var(--ease-out) } .aud-add::before { content:''; position:absolute; inset:var(--blob-inset); border-radius:var(--radius-mark); overflow:hidden; background:var(--blob-src) center / cover no-repeat; opacity:0; pointer-events:none; transition:opacity var(--dur-hover) var(--ease-out) } .aud-add:hover { opacity:1 } .aud-add:hover::before { opacity:1 } #audStep .aud-next { display:flex; width:fit-content; margin:28px auto 0 } @media (max-width:640px) { .aud-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } .aud-step h3 { font-size:var(--fs-lead) } } /* ── шаги кампании и объявления в ленте, друг за другом ── Раньше они жили в правой панели, и путь «аудитория → настройки → креатив» шёл то в ленте, то вбок. Теперь это одна колонка сверху вниз: что собрали, кого ищем, как настроено, что за объявление и как оно будет выглядеть. */ /* ── разделение разделов документа ── Продукт, интересы, гео, настройки, объявление шли одним потоком, и на длинном экране сливались в простыню. Разделяем воздухом и рисованным штрихом — единственной линией, которую система знает. Коробки и белые плашки не заводим: в кабинете одна приподнятая поверхность, объявление, и вторая сразу отняла бы у неё смысл. */ .flow-step { margin-top:22px; text-align:center; padding-top:38px; position:relative } .flow-step::before { content:''; position:absolute; top:8px; left:8%; right:8%; height:var(--rule-h); background:var(--rule-src) center / 100% 100% no-repeat; opacity:.55 } .aud-step::before { content:''; position:absolute; top:8px; left:8%; right:8%; height:var(--rule-h); background:var(--rule-src) center / 100% 100% no-repeat; opacity:.55 } /* Тот же раздел, что и в .aud-step, — и кегль обязан быть тот же. */ .flow-step h3 { margin:0; font-family:var(--font-display); font-size:var(--fs-section); line-height:var(--lh-section); font-weight:700; letter-spacing:0; color:var(--ink-strong) } .flow-step .sub { margin:6px 0 0; font-family:var(--font-script); font-weight:300; font-size:var(--fs-script-note); line-height:var(--lh-script-note); letter-spacing:var(--ls-script); color:var(--ink-strong) } /* Светлая карточка со скруглением — как в макете: содержимое шага отделено от ленты фоном, а не рамкой, иначе на экране получается сетка из коробок. */ .flow-card { margin-top:14px; padding:0; border-radius:var(--radius-card); background:transparent; text-align:left } /* Форма и превью объявления стоят в блоке двумя колонками — раскладку берём у расширенного вида (.ad-body), свои у ленты только отступы: рамку и фон уже нарисовала .flow-card. На узком экране колонки переносятся сами (flex-wrap). */ .flow-card .ad-body { padding:0; gap:20px } /* В ленте форма соседствует с превью и должна помещаться в экран целиком — отступы между полями плотнее, чем в панели, где места вдоволь. */ .flow-card .adf { margin-top:13px } .flow-card .ad-mark { margin-top:13px } /* Настройки — самостоятельная светлая карточка, как готовое объявление: без поверхности скруглённый overflow у .q-side обрезал строки по углам, хотя самого контура карточки не было видно. */ .flow-card .q-side { border:0; border-radius:var(--radius-card); padding:24px 28px 26px; background:var(--paper); box-shadow:var(--shadow-card); overflow:visible; position:static } .flow-card .q-top { display:none } /* заголовок блока уже стоит выше */ .flow-card .calc-sec { padding:0 } /* Смета в ленте — широкая: четыре колонки счёта, как в макете. В панели (272px) те же строки складываются в две — правила выше, здесь только широкий вид. */ .flow-card .q-bill, .flow-card .q-when, .flow-card .q-total { max-width:720px; margin-left:auto; margin-right:auto } .flow-card .q-bhead { display:grid; grid-template-columns:1fr auto 128px 112px; gap:0 22px; padding-bottom:9px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); font-variation-settings:var(--axis-active) } .flow-card .q-bhead span:nth-child(3), .flow-card .q-bhead span:nth-child(4) { justify-self:end } .flow-card .q-brow { grid-template-columns:1fr auto 128px 112px; gap:0 22px; padding:10px 0 } .flow-card .q-brow .rate, .flow-card .q-brow .sum { justify-self:end; text-align:right } .flow-card .q-brow .rate b { color:var(--ink-muted); font-size:15px } .flow-card .q-brow .sum b { font-size:18px } .flow-card .q-wrow { grid-template-columns:1fr auto 128px; gap:0 22px; padding:10px 0 } .flow-card .q-wrow .note { justify-self:end; text-align:right } @media (max-width:900px) { .flow-card .q-bhead { display:none } .flow-card .q-brow { grid-template-columns:1fr auto } .flow-card .q-wrow { grid-template-columns:1fr auto } .flow-card .q-brow .rate, .flow-card .q-brow .sum, .flow-card .q-wrow .note { justify-self:start; text-align:left } } @media (max-width:600px) { .flow-card .q-side { padding:20px 16px 22px } .flow-card .q-wrow { grid-template-columns:1fr } .flow-card .q-period { justify-self:start; justify-content:flex-start; flex-wrap:wrap; margin-top:8px } .flow-card .q-wrow .note { margin-top:4px } } .flow-card .calc-sec + .calc-sec { margin-top:14px; padding-top:20px; border-top:0 } /* Блоки потока раскрываются по одному (см. applyFlowStage): нераскрытый рисуется в разметке, но не показывается — форма из одного блока обновляет превью в другом, и вырезать их из DOM значило бы разложить всю проводку заново. */ .flow-step.is-off { display:none } /* Шаг раскрывается ВНУТРИ разговора, а не приходит новым экраном, поэтому .pp-in ему не ставим: он бы влетал справа, как будто сменился экран. Своё короткое движение снизу — «блок развернулся на месте». */ @keyframes flow-in { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } } .flow-step.is-fresh { animation:flow-in .32s cubic-bezier(.22,.61,.36,1) both } #flowSteps .flow-next { display:flex; width:fit-content; margin:16px auto 0 } /* Пройденный шаг рекламы: читается целиком, но не правится (см. renderFlowInline) */ #flowSteps.past .flow-card { pointer-events:none; opacity:.8 } #flowSteps.past .flow-next, #flowSteps.past .ad-actions, #flowSteps.past .ad-offer { display:none } #flowSteps .ad-actions { justify-content:center; margin-top:18px } #flowSteps .ad-offer { text-align:center } #flowSteps.locked .flow-card { pointer-events:none; opacity:.72 } #flowSteps.locked .act-btn, #flowSteps.locked .ad-actions { display:none } .inline-actions { display:flex; gap:8px; margin-top:12px } /* Второе действие — вдавленная таблетка, главное — чёрная. */ .inline-actions button { border:0; border-radius:var(--radius-mark); padding:9px 20px 11px; background:var(--paper); box-shadow:var(--shadow-chip); color:var(--ink-strong); font:inherit; font-variation-settings:var(--axis-active); cursor:pointer } .inline-actions button:hover { color:var(--ink) } .inline-actions button:active { transform:translateY(1px) } .inline-actions button.primary { background:var(--ink); box-shadow:none; color:var(--paper) } .inline-actions button.primary:hover { transform:scale(1.03) } /* ── отчёт «мои интересы» ── Досье, а не карточка: ни рамки, ни заливки, ни коробки. Две колонки — что увидели и откуда узнали. Давность прижата вправо и связана с названием отточием: взгляд идёт по строке и упирается в ответ на главный вопрос — «насколько это про меня сейчас». */ .interest-summary { margin-top:2px } .interest-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px } .interest-title { font-family:var(--font-display); font-size:38px; line-height:1; font-weight:700; letter-spacing:.1px; color:var(--ink-strong); margin:0 } .interest-meta { margin:0; font-family:var(--font-script); font-weight:300; font-size:var(--fs-script-note); letter-spacing:var(--ls-script); color:var(--ink-strong); white-space:nowrap } /* У демо сводка — целая фраза, в строку рядом с заголовком она не встаёт. */ .is-demo .interest-head { display:block } .is-demo .interest-meta { margin-top:6px; white-space:normal; max-width:52ch } .interest-rule { height:var(--rule-h); margin:14px 0 0; opacity:.75; background:var(--rule-src) center / 100% 100% no-repeat } .interest-cols { display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:24px } .interest-kicker { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); font-variation-settings:var(--axis-active); margin-bottom:12px } /* Строка отчёта: название — отточие — давность. Отточие тянется само, поэтому колонка справа всегда стоит по одной линии, как бы ни было длинно название. */ .interest-node { display:flex; align-items:baseline; gap:8px; font-size:var(--fs-fact); letter-spacing:var(--ls-fact); line-height:1.35 } .interest-node .dots { flex:1; border-bottom:1px dotted rgb(0 0 0 / .14); transform:translateY(-3px) } .interest-node .period { color:var(--ink-muted); font-size:12px; font-variation-settings:var(--axis-small); white-space:nowrap } /* Группа набрана плотнее и отбита сверху — вложенность видно по весу и отступу, а не по стрелкам: их приходилось рисовать псевдоэлементом на каждой строке. */ .interest-node.level-1 { font-variation-settings:var(--axis-active); margin-top:16px } .interest-node.level-1:first-of-type { margin-top:0 } .interest-node.level-1 .dots { border-bottom-color:rgb(0 0 0 / .22) } .interest-node.level-2 { padding-left:16px; font-size:14px; padding-top:5px } .interest-node.level-3 { padding-left:32px; font-size:14px; padding-top:5px } /* Источник: название и адрес. Размера аудитории у нас нет, и графы под него тоже. */ .interest-item { padding:11px 0 } .interest-item + .interest-item { border-top:1px solid var(--faint) } .interest-name { display:block; font-size:var(--fs-fact); font-weight:400; font-variation-settings:var(--axis-active); letter-spacing:var(--ls-fact); color:var(--ink-strong) } /* Адрес группы. Моноширинный — он и так читается адресом, поэтому ссылка на нём не кричит: подчёркивание приходит под курсором. */ .interest-handle { display:block; color:var(--ink-muted); font-size:12.5px; font-family:var(--mono); text-decoration:none } a.interest-handle:hover { color:var(--ink); text-decoration:underline; text-underline-offset:2px } @media (max-width:720px) { .interest-cols { grid-template-columns:1fr; gap:28px } .interest-head { display:block } .interest-meta { margin-top:6px; white-space:normal } } .debug-reset { margin-top:9px; border:0; border-radius:var(--radius-mark); padding:6px 14px 8px; background:transparent; box-shadow:var(--shadow-chip); color:var(--ink-muted); font:inherit; font-size:12px; cursor:pointer } .debug-reset:hover { color:var(--ink) }