/* страница contact, тема creator. Источник измерений: nikkykash-shop.fourthwall.com/contact — my-agent/output/fw-shots/nikkykash/{desktop,mobile}/contact.metrics.md. Разметка — footer_pages/_layout.html, ветка preset_id=='creator' И путь=='/contact' (маркер .sf-creator-contact-page), footer_pages/contact.html не тронут — вся форма (поля/labels/honeypot/alerts) уже даёт нужную структуру через существующие sf-input/ btn-primary/sf-surface-flat, здесь только геометрия. */ /* Хедер/промо-бар/футер хардкожены родительским storefront/_layout.html (foundation, вне зоны этого агента) — физически остаются в DOM, гасим через :has() по маркеру. Прямые дети (см. включения в storefront/_layout.html) — другие footer_pages не задеты, маркер рендерится только на /contact. */ body.preset-creator:has(.sf-creator-contact-page) > [data-theme-promo-bar], body.preset-creator:has(.sf-creator-contact-page) > header, body.preset-creator:has(.sf-creator-contact-page) > footer { display: none; } /* ── Собственный «хедер» страницы: центрированный логотип магазина ────────── Метрика: nav rect 1440x64/390x64, paddingTop:20, marginBottom:40, по центру. Картинка/текст-фолбэк — тот же приём, что sf-header (data-theme-logo), без самих data-attribute — здесь их не читает preview-listener.js (querySelector бы попал в скрытый настоящий хедер, а не сюда), смысла в них нет. */ .preset-creator .sf-cc-logo-row { display: flex; align-items: center; justify-content: center; height: 64px; padding: 20px 16px 0; margin-bottom: 40px; } .preset-creator .sf-cc-logo { display: inline-flex; align-items: center; transition: opacity 0.2s ease; } .preset-creator .sf-cc-logo:hover { opacity: 0.7; } .preset-creator .sf-cc-logo-img { height: 24px; width: auto; } .preset-creator .sf-cc-logo-text { font-family: var(--font-display); /* 700, не var(--display-weight) (=900 у пресета) — раунд2 фикс, contact — единственная эталонная страница с весом 700 (см. contact.metrics.md desktop+mobile, обе h1 'What can we help with?'/'NikkyKash' весом 700, в отличие от home/pdp/cart, где верно применяется 900). */ font-weight: 700; text-transform: uppercase; font-size: 24px; letter-spacing: 0; /* Локальный цвет, не общий --text (=rgb(216,215,209)) — раунд3 фикс: у эталона вся крупная типографика этой страницы (лого-текст/h1/интро- параграф) на тон темнее обычного --text, тот же #c7c6c0, что уже стоит у .sf-cc-title (contact.spec.json: 34 текстовых узла ровно rgb(199,198,192), наш прежний var(--text) давал rgb(216,215,209) — светлее эталона). */ color: #c7c6c0; } /* ── Узкая центрированная колонка ───────────────────────────────────────── Метрика: контейнер width/maxWidth 664px, padding 32px слева/справа (600px контента), gap 24px, margin-bottom 32px, центрирован. */ .preset-creator .sf-creator-contact-page { padding-bottom: 64px; } .preset-creator .sf-cc-col { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 664px; margin: 0 auto; padding: 0 32px 32px; } .preset-creator .sf-cc-header { display: flex; flex-direction: column; gap: 12px; } .preset-creator .sf-cc-title { margin: 0; font-size: 32px; line-height: 44px; font-weight: 700; /* см. комментарий у .sf-cc-logo-text выше */ /* Локальный цвет, не общий --text (=rgb(216,215,209)): по метрике заголовок contact заметно приглушённее (rgb(199,198,192)) — раунд2 фикс, не трогаем токен --text (верен для остальных страниц). */ color: #c7c6c0; } .preset-creator .sf-cc-header p { /* Интро-параграф (page_intro-блок, footer_pages/contact.html) несёт общий .sf-muted (color: var(--muted) = rgb(143,142,137)) — эталон держит его в том же светлом тоне, что лого-текст/h1 (#c7c6c0), не в обычном сером muted. Раунд3 фикс, тот же источник, что у .sf-cc-logo-text выше. */ color: #c7c6c0; } .preset-creator .sf-cc-body { display: flex; flex-direction: column; gap: 16px; } .preset-creator .sf-cc-body form { display: flex; flex-direction: column; gap: 24px; } /* ── Поля: тёмные боксы вровень с фоном страницы (метрика: bg=rgba(0,0,0,0), т.е. заливки нет, виден только hairline-бордер), высота ~52px. Textarea (rows=6) высоту не трогаем — только фон. */ .preset-creator .sf-cc-body .sf-input { background: transparent; /* Базовый .sf-input бордер — color-mix(var(--text) 20%, transparent) ≈ rgb(60,60,59) на фоне страницы (#161616); эталон этой страницы (Grep nikkykash/{desktop,mobile}/contact.spec.json по border) держит сплошной rgb(78,78,76) — заметно ярче обычного витринного hairline. Раунд3 фикс, локально внутри .sf-cc-body — глобальный --sf-hairline (base.css) не трогаем, он верен для остальной темы. */ border-color: #4e4e4c; } .preset-creator .sf-cc-body input.sf-input { min-height: 52px; } /* ── CTA на всю ширину колонки (метрика: rect 600x48 / 342x48 — вся ширина формы). width не конфликтует с self-start (align-self не задаёт ширину; explicit width всегда побеждает auto-sizing), без !important. */ .preset-creator .sf-cc-body .btn-primary { width: 100%; } @media (max-width: 767px) { .preset-creator .sf-cc-col { gap: 16px; padding: 0 24px 24px; } .preset-creator .sf-cc-title { font-size: 24px; } .preset-creator .sf-cc-body form { gap: 16px; } .preset-creator .sf-creator-contact-page { padding-bottom: 48px; } } /* Переключатель темы обращения — две плитки во всю ширину формы, активная обведена рамкой в 2px (эталон: «Order I placed» / «Something else»). */ .preset-creator .sf-creator-contact-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .preset-creator .sf-creator-contact-tab { min-height: 56px; padding: 0 16px; border: 1px solid var(--sf-hairline); background: transparent; color: var(--muted); font-family: var(--font-body); font-size: 16px; font-weight: 700; text-align: center; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .preset-creator .sf-creator-contact-tab:hover { color: var(--text); } .preset-creator .sf-creator-contact-tab.is-active { border: 2px solid var(--text); color: var(--text); }