/* Чекаут, тема creator — standalone-разметка (fw-teardown, checkout round). Источник — my-agent/output/fw-shots/nikkykash/{desktop,mobile}/checkout .metrics.md + .spec.json (палитра/бордеры/геометрия инпутов). Разметка — app/templates/storefront/checkout.html + _order_summary.html, ветка preset_id == 'creator'. Все правила скоуплены .preset-creator. */ /* ── Standalone-хром: прячем витринный header/footer/промо-бар ─────────────── _layout.html — общий для всех пресетов, изменять нельзя (foundation-файл, блока для override там нет). :has() находит маркер .sf-creator-checkout внутри
и гасит header/footer/промо-бар — прямых сиблингов
на уровне (см. _layout.html: promo_bar → header → main → footer, всё без обёртки). Поддержка :has() — все evergreen-браузеры (Chrome/Edge с 2022, Safari 15.4, Firefox 121) — единственный CSS-путь без правки чужого файла, предпочтён по инструкции задачи вместо запроса нового block. */ body.preset-creator:has(.sf-creator-checkout) > header, body.preset-creator:has(.sf-creator-checkout) > [data-theme-promo-bar], body.preset-creator:has(.sf-creator-checkout) > footer { display: none; } /* ── Чекаут использует СВОЙ, чуть более тёмный тон текста — не общий --text темы (тот светлее и совпадает с фоном CTA-кнопки, см. checkout.spec.json: глифы чекаута = rgb(199,198,192), а rgb(216,215,209) там только фон кнопки). --cta-bg/--accent НЕ трогаем — в presets.css это независимые литералы (не через var(--text)), кнопка остаётся верного цвета. `color` объявлен тут же (не только кастом-свойство) — иначе заголовки без собственного color (h2 .sf-panel-title, "СДЭК курьером...") продолжат наследовать старое значение с : производный `color` инерактично не пересчитывается при переопределении --text глубже по дереву (см. память css_custom_property_scope_trap). */ .preset-creator .sf-creator-checkout { --text: #C7C6C0; --muted: #858481; /* 700, не унаследованный --display-weight:900 пресета (base.css) — checkout.metrics.md (desktop+mobile) даёт fontWeight:700 и на h1-бренде, и на всех 5 легендах секций (единственная эталонная страница с этим весом, как и contact — см. её же --display-weight не трогаем нигде, кроме этого скоупа: .sf-creator-checkout__brand/.sf-panel-title читают var(--display-weight) и наследуют переопределение отсюда). */ --display-weight: 700; color: var(--text); } /* ── Бренд-лого вместо H1 «ОФОРМЛЕНИЕ ЗАКАЗА» ───────────────────────────── FW рендерит имя магазина как

в начале левой колонки (метрика: "Archivo expanded 24px 700 uppercase", пример

"NikkyKash") — тот же паттерн: единственный h1 страницы, первый child внутри __fields, не сиблинг перед формой (round1-фикс: сиблинг центрировался по ВСЕЙ странице и ломал top-alignment с правой колонкой — см. центрирование ниже). */ .preset-creator .sf-creator-checkout__brand { margin: 0; padding: 40px 16px 24px; text-align: center; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 24px; line-height: 1.2; } .preset-creator .sf-creator-checkout__brand a { color: var(--text); transition: opacity 0.2s ease; } .preset-creator .sf-creator-checkout__brand a:hover { opacity: 0.7; } /* ── Сетка: форма + summary ─────────────────────────────────────────────── Мобайл: одна колонка, summary — fixed top-bar, свёрнут по умолчанию (round2-фикс — было статично сверху без сворачивания, ТЗ п.3 это допускал как fallback, но эталон реально сворачивает; см. __toggle/__body ниже). Единственный инстанс, не дублируется — иначе два , см. комментарий в _order_summary.html. Десктоп (>=1024px, тот же lg-брейкпоинт, что у остальных пресетов): 2 колонки, левая = 600px (1120 контейнер − 64 паддинг − 400 правая − 56 gap → гуттеры по 192px при viewport 1440), правая 400px sticky. */ .preset-creator .sf-creator-checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 1160px; margin: 0 auto; padding: 48px 16px 64px; } /* Round2-фикс: на мобиле aside — fixed top-bar (высота 48px = toggle, см. __toggle/__body ниже), поэтому padding-top грида (48px) освобождает под неё место, а не наезжает на первую секцию формы. position:fixed выключает aside из grid-auto-placement — вторая ячейка (__fields) не оставляет под неё пустую строку (спека CSS Grid: out-of-flow item не участвует в раскладке трека). На десктопе (>=1024px) всё сбрасывается обратно — обычный sticky-сайдбар, паддинг-топ грида снова 0. */ .preset-creator .sf-creator-checkout__summary { order: -1; position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: var(--surface); } @media (min-width: 1024px) { .preset-creator .sf-creator-checkout__grid { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; gap: 56px; max-width: 1120px; padding: 0 32px 96px; } .preset-creator .sf-creator-checkout__summary { order: 0; position: sticky; top: 32px; left: auto; right: auto; z-index: auto; background: transparent; } } /* ── Мобильный toggle-бар сводки (round2-фикс, issue "Mobile order summary") FW: fixed-бар 48px (padding 0/24px, bg rgb(32,32,31)≈var(--surface)) — "Order summary" + сумма + шеврон, полный список товаров скрыт до клика. Слева — «Ваш заказ» (снятый заголовок карточки, см. _order_summary.html), справа — тот же grandTotalRub, что и в других местах файла. summaryOpen — общий x-data (checkoutDelivery), тот же стейт, что {% else %}-ветка уже использует для своего mobile-бара. Шеврон — :class="rotate-180", готовая Tailwind-утилита, уже скомпилирована (используется строкой выше в {% else %}-ветке этого же файла). */ .preset-creator .sf-creator-summary-bar__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0 24px; border: none; background: transparent; font-family: inherit; font-size: 14px; color: var(--text); cursor: pointer; } .preset-creator .sf-creator-summary-bar__total { display: flex; align-items: center; gap: 10px; } .preset-creator .sf-creator-summary-bar__chev { transition: transform 0.2s ease; } @media (max-width: 1023px) { .preset-creator .sf-creator-summary-bar__body { display: none; max-height: calc(100vh - 48px); overflow-y: auto; border-top: 1px solid var(--sf-hairline); } .preset-creator .sf-creator-summary-bar__body.is-open { display: block; } } @media (min-width: 1024px) { .preset-creator .sf-creator-summary-bar__toggle { display: none; } /* __body: без override — обычный div, всегда display:block. */ } /* ── Секции формы: БЕЗ плашек-карточек (ТЗ п.3) — поля прямо на фоне страницы. Заголовок: .sf-panel-title уже даёт uppercase/display-font под .preset-creator в presets.css — здесь только кегль/трекинг/отступ. */ .preset-creator .sf-creator-checkout__fields { display: flex; flex-direction: column; } .preset-creator .sf-creator-section { padding-top: 32px; } .preset-creator .sf-creator-checkout__brand + .sf-creator-section { padding-top: 0; } .preset-creator .sf-creator-section__title { font-size: 16px; letter-spacing: -0.2px; margin-bottom: 16px; } /* ── Поля: ПРОЗРАЧНОЕ тело, держится только на бордере (round2-фикс, issue "заливка и бордер"). Прямая проверка checkout.spec.json (div.sc-fjUQFl, обёртка инпута): backgroundColor=rgb(22,22,22) — точно фон страницы (var(--bg)), НЕ светлее его; borderTopColor=rgb(78,78,76). Раунд1 принял rgb(36,35,35) из палитры метрик за цвет обёртки — на деле это цвет какого-то другого узла страницы, не инпута (see реального замера выше). --sf-hairline-strong (32%-микс, уже заведён в base.css) на фоне #161616 даёт ~rgb(78,78,76) — совпадает с замером почти точь-в-точь, второй токен не изобретаем; обычный --sf-hairline (20%) был бы заметно светлее. */ .preset-creator .sf-creator-checkout .sf-input { display: block; min-height: 52px; background: var(--bg); border: 1px solid var(--sf-hairline-strong); border-radius: var(--radius); font-size: 16px; } /* Поля-обёртки