/* Theme-пресеты витрины. Подключается в storefront/_layout.html ПОСЛЕ storefront.css → переопределяет токены при равной/большей специфичности. Не Tailwind — править можно без пересборки storefront.css. :root = нейтральный светлый дефолт (для apex/404 без preset-* класса). Каждый .preset- задаёт расширенный контракт: цвет: --bg --surface --text --muted --accent --cta-bg --cta-text --tile-bg шрифт: --font (тело) --font-display (заголовки) --display-transform --display-weight --display-stretch форма: --radius (карточки) --btn-radius (кнопки) Инлайн style="--accent: …" на (из partner.theme.accent_hex) рендерится ТОЛЬКО если партнёр задал свой акцент (см. _layout.html); иначе действует --accent самого пресета (Pop=неон, Arena=лайм). ⚠ --sf-err/--sf-ok/--sf-warn(+ -bg) (базовая формула — storefront.input.css :root) ПЕРЕОБЪЯВЛЕНЫ здесь заново в КАЖДОМ .preset-* блоке — не дубликат, а необходимость: custom-property var()-подстановка резолвится в скоупе элемента, где сам производный токен объявлен, а не в скоупе элемента- потребителя. Раз --sf-err объявлен только на :root, он навсегда «замораживается» на :root-значениях --text/--surface и не видит --text/ --surface, переопределённые на , даже если ниже по дереву кто-то читает var(--sf-err). Поэтому при добавлении нового .preset- ОБЯЗАТЕЛЬНО скопировать туда же блок --sf-err/-ok/-warn(+-bg) (шаблон — в любом из существующих .preset-* ниже). */ /* ── Self-host шрифты (woff2 в app/static/fonts/, CSP-safe, без CDN) ────────── */ @font-face { font-family: "Plus Jakarta Sans"; src: url("/static/fonts/PlusJakartaSans-Variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Figtree"; src: url("/static/fonts/Figtree-Variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; } @font-face { font-family: "Manrope"; src: url("/static/fonts/Manrope-Variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Overpass Mono"; src: url("/static/fonts/OverpassMono-Variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } @font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Shrikhand"; src: url("/static/fonts/Shrikhand-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Oswald"; src: url("/static/fonts/Oswald-Variable.woff2") format("woff2"); font-weight: 200 700; font-display: swap; } /* Unbounded — кириллический жирный дисплей ТОЛЬКО для кириллицы Pop-темы. Shrikhand (латиница) кириллицы не имеет; unicode-range держит Unbounded строго на кириллице, латиница остаётся на Shrikhand как задумано дизайном. font-weight 600 800: при --display-weight:400 браузер клампит к 600 = жирный. */ @font-face { font-family: "Unbounded"; src: url("/static/fonts/Unbounded-Cyrillic.woff2") format("woff2"); font-weight: 600 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Unbounded"; src: url("/static/fonts/Unbounded-CyrillicExt.woff2") format("woff2"); font-weight: 600 800; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* Archivo Expanded — статический Black (900), только latin/latin-ext (fw-teardown Creator, 2026-07-10). Кириллицы НЕ содержит (проверено на живом FW-магазине и в Google Fonts) — --font-display падает на Unbounded выше по стеку для кириллических символов (unicode-range у Unbounded это уже гарантирует). */ @font-face { font-family: "Archivo Expanded"; src: url("/static/fonts/ArchivoExpanded-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } :root { --bg: #ffffff; --surface: #ffffff; --text: #171717; --muted: #525252; --accent: #0F0F0F; --cta-bg: #000000; --cta-text: #ffffff; --tile-bg: #efefef; --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; --display-transform: none; --display-weight: 700; --display-stretch: normal; --radius: 0.375rem; --btn-radius: 0.375rem; } /* Базовый page-gutter секций (эталон FW: .wrapper, hero/rich-text styles.css — padding-right/left:16px, @media(min-width:640px) 32px). До сих пор .store-container не нёс ни одного правила вне .preset-oasis/.preset-creator — на остальных пресетах (gallery/craft/drop/pop/arena) текст секций упирался в край экрана на узких вьюпортах. Специфичность здесь (0,1,0) ниже, чем у .preset-oasis .store-container / .preset-creator .store-container (0,2,0, свои паддинги 16/32 при 768px по их FW-спеке) — те продолжают побеждать независимо от порядка правил. [data-section-full] .store-container.store- container в storefront.css — тоже (0,2,0) и грузится ДО presets.css — аналогично побеждает по специфичности и снимает паддинги для full-width. */ .store-container { padding-left: 16px; padding-right: 16px; } @media (min-width: 640px) { .store-container { padding-left: 32px; padding-right: 32px; } } .preset-gallery { --bg: #ffffff; --surface: #ffffff; --text: #0a0a0a; --muted: #6b6b6b; --accent: #000000; --cta-bg: #000000; --cta-text: #ffffff; --tile-bg: #efefef; --font: "Figtree", ui-sans-serif, system-ui, sans-serif; --font-display: "Plus Jakarta Sans", "Figtree", sans-serif; --display-transform: none; --display-weight: 700; --display-stretch: normal; --radius: 0px; --btn-radius: 0px; --sf-err: color-mix(in srgb, #ff5c5c 55%, var(--text) 45%); --sf-ok: color-mix(in srgb, #10b981 55%, var(--text) 45%); --sf-warn: color-mix(in srgb, #d97706 55%, var(--text) 45%); --sf-err-bg: color-mix(in srgb, var(--sf-err) 14%, var(--surface)); --sf-ok-bg: color-mix(in srgb, var(--sf-ok) 14%, var(--surface)); --sf-warn-bg: color-mix(in srgb, var(--sf-warn) 14%, var(--surface)); } /* Oasis — 1:1 клон FW-темы Oasis (fw-teardown, 2026-07-10). Токены — зеркало .preset-gallery (тот же белый/чёрный/Figtree/Plus Jakarta), отличия: --tile-bg сероватее (≈ rgba(0,0,0,.1) на белом = оригинальный fw-фон под фото товара) и --display-weight:600 (Plus Jakarta Sans 600, не 700). Структурные оверрайды (жёсткие px для сетки/фото/кнопок/хедера/hero/ футера, которые нельзя доверить var(--card-gap) и т.п. — см. комментарий там) — отдельным блоком в конце файла, после generic-правил. */ .preset-oasis { --bg: #ffffff; --surface: #ffffff; --text: #000000; --muted: #6b6b6b; --accent: #000000; --cta-bg: #000000; --cta-text: #ffffff; --tile-bg: #e6e6e6; --font: "Figtree", ui-sans-serif, system-ui, sans-serif; --font-display: "Plus Jakarta Sans", "Figtree", sans-serif; --display-transform: none; --display-weight: 600; --display-stretch: normal; --radius: 0px; --btn-radius: 0px; --sf-err: color-mix(in srgb, #ff5c5c 55%, var(--text) 45%); --sf-ok: color-mix(in srgb, #10b981 55%, var(--text) 45%); --sf-warn: color-mix(in srgb, #d97706 55%, var(--text) 45%); --sf-err-bg: color-mix(in srgb, var(--sf-err) 14%, var(--surface)); --sf-ok-bg: color-mix(in srgb, var(--sf-ok) 14%, var(--surface)); --sf-warn-bg: color-mix(in srgb, var(--sf-warn) 14%, var(--surface)); } /* Creator — 1:1 клон FW-темы Creator (fw-teardown, 2026-07-10). Токены — та же тёмная палитра, что Drop (bg/surface/text/accent идентичны — оба near-black с D8D7D1), отличия: --tile-bg прозрачный (товар лежит прямо на фоне страницы, а не на плашке), дисплейный шрифт Archivo Expanded (не Archivo) + Unbounded-фолбэк для кириллицы, --display-weight:900 (см. комментарий у самой переменной ниже — почему это безопасно для Unbounded), --display-stretch:normal (файл уже статически «expanded» — в отличие от Drop, где стретч 125% симулируется на вариативном Archivo). Структурные оверрайды (hero-коллаж/карточка/футер/заголовок коллекции) — отдельным блоком в конце файла. */ .preset-creator { --bg: #161616; --surface: #1E1E1E; --text: #D8D7D1; --muted: #8F8E89; --accent: #D8D7D1; --cta-bg: #D8D7D1; --cta-text: #161616; --tile-bg: transparent; --font: "Inter", ui-sans-serif, system-ui, sans-serif; --font-display: "Archivo Expanded", "Unbounded", sans-serif; /* --display-weight:900 (было 800, раунд 4 фикс, pixel-parity — метрики home/pdp/cart дают 900 везде). Безопасно для кириллицы: Unbounded объявлен с font-weight:600 800 (см. @font-face выше), запрос 900 клампится к тому же 800 — рендер не меняется, только computed- style теперь честно 900. На латинице Archivo Expanded Black — 900. */ --display-transform: uppercase; --display-weight: 900; --display-stretch: normal; --radius: 0px; --btn-radius: 0px; --sf-err: color-mix(in srgb, #ff5c5c 55%, var(--text) 45%); --sf-ok: color-mix(in srgb, #10b981 55%, var(--text) 45%); --sf-warn: color-mix(in srgb, #d97706 55%, var(--text) 45%); --sf-err-bg: color-mix(in srgb, var(--sf-err) 14%, var(--surface)); --sf-ok-bg: color-mix(in srgb, var(--sf-ok) 14%, var(--surface)); --sf-warn-bg: color-mix(in srgb, var(--sf-warn) 14%, var(--surface)); } .preset-craft { --bg: #F4F1EB; --surface: #FBF9F5; --text: #4C3C2F; --muted: #8A7867; --accent: #4C3C2F; --cta-bg: #4C3C2F; --cta-text: #F4F1EB; --tile-bg: #EAE5DA; --font: "Overpass Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif; --display-transform: none; --display-weight: 700; --display-stretch: normal; --radius: 0px; --btn-radius: 0px; --sf-err: color-mix(in srgb, #ff5c5c 55%, var(--text) 45%); --sf-ok: color-mix(in srgb, #10b981 55%, var(--text) 45%); --sf-warn: color-mix(in srgb, #d97706 55%, var(--text) 45%); --sf-err-bg: color-mix(in srgb, var(--sf-err) 14%, var(--surface)); --sf-ok-bg: color-mix(in srgb, var(--sf-ok) 14%, var(--surface)); --sf-warn-bg: color-mix(in srgb, var(--sf-warn) 14%, var(--surface)); } .preset-drop { --bg: #161616; --surface: #1E1E1E; --text: #D8D7D1; --muted: #8F8E89; --accent: #D8D7D1; --cta-bg: #D8D7D1; --cta-text: #161616; --tile-bg: #222222; --font: "Inter", ui-sans-serif, system-ui, sans-serif; --font-display: "Archivo", "Inter", sans-serif; --display-transform: uppercase; --display-weight: 900; --display-stretch: 125%; --radius: 0px; --btn-radius: 0px; --sf-err: color-mix(in srgb, #ff5c5c 55%, var(--text) 45%); --sf-ok: color-mix(in srgb, #10b981 55%, var(--text) 45%); --sf-warn: color-mix(in srgb, #d97706 55%, var(--text) 45%); --sf-err-bg: color-mix(in srgb, var(--sf-err) 14%, var(--surface)); --sf-ok-bg: color-mix(in srgb, var(--sf-ok) 14%, var(--surface)); --sf-warn-bg: color-mix(in srgb, var(--sf-warn) 14%, var(--surface)); } .preset-pop { --bg: #ffffff; --surface: #ffffff; --text: #0a0a0a; --muted: #5a5a5a; --accent: #EDFF80; --cta-bg: var(--accent); --cta-text: #000000; --tile-bg: #E6E6E6; --font: "Inter", ui-sans-serif, system-ui, sans-serif; --font-display: "Shrikhand", "Unbounded", "Inter", cursive; --display-transform: none; --display-weight: 400; --display-stretch: normal; --radius: 0px; --btn-radius: 0px; --sf-err: color-mix(in srgb, #ff5c5c 55%, var(--text) 45%); --sf-ok: color-mix(in srgb, #10b981 55%, var(--text) 45%); --sf-warn: color-mix(in srgb, #d97706 55%, var(--text) 45%); --sf-err-bg: color-mix(in srgb, var(--sf-err) 14%, var(--surface)); --sf-ok-bg: color-mix(in srgb, var(--sf-ok) 14%, var(--surface)); --sf-warn-bg: color-mix(in srgb, var(--sf-warn) 14%, var(--surface)); } .preset-arena { --bg: #1C1D21; --surface: #26272C; --text: #ffffff; --muted: rgba(255,255,255,0.6); --accent: #CCE52F; --cta-bg: var(--accent); --cta-text: #1C1D21; --tile-bg: rgba(255,255,255,0.08); --font: "Inter", ui-sans-serif, system-ui, sans-serif; --font-display: "Oswald", "Inter", sans-serif; --display-transform: none; --display-weight: 600; --display-stretch: normal; --radius: 0.75rem; --btn-radius: 100px; --sf-err: color-mix(in srgb, #ff5c5c 55%, var(--text) 45%); --sf-ok: color-mix(in srgb, #10b981 55%, var(--text) 45%); --sf-warn: color-mix(in srgb, #d97706 55%, var(--text) 45%); --sf-err-bg: color-mix(in srgb, var(--sf-err) 14%, var(--surface)); --sf-ok-bg: color-mix(in srgb, var(--sf-ok) 14%, var(--surface)); --sf-warn-bg: color-mix(in srgb, var(--sf-warn) 14%, var(--surface)); } /* ── Generic-правила, читающие переменные пресета ──────────────────────────── */ /* Заголовочный шрифт. Только h1/h2 и явный .sf-display, чтобы не трогать мелкие h3 (имена товаров остаются на body-шрифте). */ [class*="preset-"] h1, [class*="preset-"] h2, [class*="preset-"] .sf-display { font-family: var(--font-display, var(--font)); text-transform: var(--display-transform, none); font-weight: var(--display-weight, 700); font-stretch: var(--display-stretch, normal); } /* CTA-кнопка: фон/текст из пресета (Pop/Arena — акцент-неон/лайм + тёмный текст, Drop — светлая, Gallery — чёрная). Специфичность (0,2,0) > .btn-primary (0,1,0). */ [class*="preset-"] .btn-primary { background: var(--cta-bg, var(--accent)); color: var(--cta-text, #ffffff); } /* Радиус кнопок управляется пресетом отдельно от карточек (Arena — пилюли). */ [class*="preset-"] .btn-primary, [class*="preset-"] .btn-outline { border-radius: var(--btn-radius, var(--radius)); } /* Плитка товара под мокап: отдельный фон, чтобы изделие не «висело» на тёмных темах. Навешивается на .sf-surface плитки в _group_card. --tile-op — непрозрачность подложки (ползунок «Прозрачность фона фото» кабинета печатает 100−N%); без него подложка сплошная, как раньше. */ .sf-tile { background: color-mix(in srgb, var(--tile-bg, var(--surface)) var(--tile-op, 100%), transparent); } /* Лого по центру для Arena (cart остаётся справа абсолютом). */ .preset-arena header .store-container { position: relative; justify-content: center; } .preset-arena header .store-container > a[aria-label="Открыть корзину"] { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } /* ── fw-teardown №9, §5.4 — редактор витрины: Product cards / Photography / Social links. Токены рендерятся как CSS custom properties на (_layout.html, из partner.theme.*) — здесь только читаем их. Файл подключается ПОСЛЕ storefront.css (см. шапку файла), поэтому любое правило тут при равной специфичности перебивает Tailwind-утилиты (aspect-square, gap-*, mt-*) без правки собранного storefront.css. ──── */ /* Photography: аспект фото + скругление углов плитки карточки и главного фото PDP. Дефолты (1/1, 0px) совпадают с прежним aspect-square/без радиуса — партнёр без кастомизации не видит разницы. */ .sf-tile, .pdp-photo { aspect-ratio: var(--photo-ratio, 1 / 1); /* Фолбэк — радиус самой темы, а не 0: до 2026-08-08 это правило целиком съедалось оборванным комментарием выше и никогда не применялось, поэтому плитки жили на --radius пресета. Возвращаем его как значение по умолчанию, иначе «оживление» правила само по себе сделало бы углы острыми. */ border-radius: var(--card-radius, var(--radius, 0px)); } /* Product cards: единый зазор между карточками во всех гридах витрины (домашняя/хиты/категория/коллекция — класс sf-grid добавлен на каждый). Дефолт 16px — тот же, что уже был на мобильном gap-4/gap-x-4. */ .sf-grid { gap: var(--card-gap, 16px); } /* Product cards: размер карточки. card-regular — статус-кво (без правил здесь, Tailwind-дефолты как раньше). card-compact — плотнее упаковка. */ .card-compact .sf-tile { padding: 0.375rem; } .card-compact .sf-card h3 { font-size: 0.8125rem; line-height: 1.3; } .card-compact .sf-card > div + div { margin-top: 0.5rem; } /* Product cards: показ цветовых свотчей. Разметки самих свотчей на карточке пока нет (отдельная нереализованная фича) — класс готов на будущее, сейчас no-op (партнёр видит тумблер, но скрывать нечего). */ .hide-swatches .sf-swatches { display: none; } /* Product cards: скрыть бейдж акции/дропа («Скоро»/«Тираж идёт»/«Завершён» — .sf-promo-badge в _group_card.html). Бейджи sold-out/«+N вариантов» — это товарная информация, не промо — остаются видимыми при любом значении. */ .hide-badges .sf-promo-badge { display: none; } /* Product cards: подпись под фото (имя/цена/свотчи — див-сосед .sf-tile). Выравнивание и гарнитура из кабинета; фолбэк здесь = прежний вид базовых пресетов (текст слева, шрифт наследуется). Живые темы Oasis/Creator ниже по каскаду читают тот же --card-align со своим фолбэком (по центру) — партнёрский выбор побеждает в обоих случаях. */ [class*="preset-"] .sf-tile + div { text-align: var(--card-align, left); font-family: var(--card-ff, inherit); } /* Раскладка карточек («Центрировать карточки» / «Подпись поверх фото») живёт в конце файла — темы задают свои отступы подписи той же специфичностью. */ /* Product cards: второе фото при наведении. Owner-decision fw-teardown №9 §6.2 — фича временно ДРЕМЛЕТ (fw-teardown витрина-плитка, под-этап A): плитка теперь показывает одну картинку — готовую одежду спереди (group.front_mockup_url или print_url), второго для свапа в разметке нет (нет фото спины). Тумблер card_show_hover_photo сохранён на будущее — под-этап B вернёт настоящий hover-свап перёд→спина, когда появятся фото спины, и этот класс снова станет активным. Правило ниже той же специфичности, что базовый .group-hover-swap:hover в storefront.css, и стоит позже в каскаде (presets.css подключается вторым тегом ) → по умолчанию гасит свап; .card-hover-photo переопределяет обратно при явном opt-in. */ @media (hover: hover) { .group-hover-swap:hover > img:first-child { opacity: 1; } .group-hover-swap:hover > img:last-child { opacity: 0; } .card-hover-photo .group-hover-swap:hover > img:first-child { opacity: 0; } .card-hover-photo .group-hover-swap:hover > img:last-child { opacity: 1; } } /* Соцсети в футере (_footer.html + _social_icons.html). Пустой список — блок не рендерится вовсе (Jinja {% if %}), эти правила лечат только размер/hover уже отрисованных иконок. */ .sf-social-links a { display: inline-flex; align-items: center; justify-content: center; } .sf-social-links svg { display: block; } /* ── Oasis (fw-teardown, 2026-07-10) — структурные оверрайды, раунд 1: главная + /collections/all. Цветовые/шрифтовые токены — в блоке .preset-oasis выше; здесь — то, что нельзя выразить одними токенами: жёсткие px вместо var(--card-gap)/var(--photo-ratio)/var(--btn-radius), которые иначе управляются партнёрскими слайдерами кабинета (fw-teardown №9) и НЕ гарантируют точные цифры FW-оригинала. Секция размещена ПОСЛЕ generic- блока выше (.btn-primary/.sf-tile/.sf-grid и т.д.) НАМЕРЕННО: часть правил ниже той же специфичности (0,2,0), что и генерик-правила — при равенстве выигрывает порядок в каскаде, а не место рядом с .preset-oasis-токенами. Всё строго под .preset-oasis — ноль влияния на другие пресеты. */ /* Контейнер: full-width БЕЗ max-width (в отличие от остальных пресетов, где .store-container теперь несёт только базовый page-gutter 16/32@640px — см. правило у :root в начале файла). Паддинги здесь 16/32@768px — Oasis держит свой FW-контракт брейкпоинта, специфичность (0,2,0) побеждает базовое (0,1,0) независимо от порядка правил. */ .preset-oasis .store-container { max-width: none; padding-left: 16px; padding-right: 16px; } @media (min-width: 768px) { .preset-oasis .store-container { padding-left: 32px; padding-right: 32px; } } /* Карточка товара: фото 3:4 (перекрывает var(--photo-ratio) от партнёрского слайдера «Пропорции фото» — в Oasis всегда 3:4 по FW-спеке), плоское поле без hairline-ring/тени, острые углы (radius:0 уже из токена, здесь border/ shadow явно гасим — .sf-surface на этом же div даёт border+box-shadow). Hover-лифт карточки (translateY+shadow, общий для остальных пресетов) тоже гасим — Oasis плоский, никакой тени даже на hover. */ .preset-oasis .sf-tile { aspect-ratio: var(--photo-ratio, 3 / 4); box-shadow: none; border: none; border-radius: var(--card-radius, 0); } .preset-oasis .sf-card:hover { transform: none; box-shadow: none; } /* Описание карточки (имя/цена/свотчи) — по центру, имя 16px. У div'а под фото в _group_card.html нет своего класса-крючка — цепляемся за соседство с .sf-tile (сама разметка НЕ меняется ни в одном пресете). */ .preset-oasis .sf-tile + div { text-align: var(--card-align, center); } .preset-oasis .sf-tile + div h3 { font-size: 16px; } .preset-oasis .sf-tile + div .sf-swatches { justify-content: center; } /* Сетка товаров: 32px везде (перекрывает var(--card-gap) от партнёрского слайдера «Зазор между карточками» — в Oasis всегда 32px по FW-спеке). */ .preset-oasis .sf-grid { gap: var(--card-gap, 32px); } /* Заголовок страницы (.sf-page-title — «All Products» на /collections/all, а заодно cart/checkout/thanks: единая типографика в рамках пресета, намеренно не сузили селектор). 28px мобайл → 40px десктоп по FW-спеке. */ .preset-oasis .sf-page-title { font-size: 28px; } @media (min-width: 768px) { .preset-oasis .sf-page-title { font-size: 40px; } } /* Кнопки: primary — сплошная чёрная, secondary (.btn-outline) — прозрачная с рамкой 2px; острые углы (--btn-radius:0 из токена + explicit ниже — .btn-radius и .btn-outline делят (0,2,0) с generic-правилом, побеждает порядок в каскаде), без uppercase. Hover — просто opacity (FW-семантика), а НЕ translateY-lift + усиленная тень остальных пресетов (сырой CSS в storefront.input.css, тоже (0,2,0) на .btn-primary:hover — гасим явно). */ .preset-oasis .btn-primary, .preset-oasis .btn-outline { min-height: 48px; padding: 0 16px; border-width: 2px; border-style: solid; border-radius: 0; font-weight: 700; font-size: 16px; line-height: 1.5; text-transform: none; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; } .preset-oasis .btn-primary { background: var(--cta-bg); color: var(--cta-text); border-color: var(--cta-bg); } .preset-oasis .btn-outline { background: transparent; color: var(--text); border-color: var(--text); } .preset-oasis .btn-primary:hover, .preset-oasis .btn-outline:hover { transform: none; box-shadow: none; filter: none; opacity: 0.8; } .preset-oasis .btn-outline:hover { opacity: 0.6; } .preset-oasis .btn-primary:active, .preset-oasis .btn-outline:active { transform: none; } /* Хедер: одна строка (лого слева / нав по центру / корзина справа) — грид на .sf-oasis-header__row (крючки из _header.html, ветка preset_id=='oasis'; остальные пресеты рендерят прежнюю двухрядную разметку без этих классов — правило здесь пустое для них). Фон/граница уже плоские через саму разметку (inline style в шаблоне) — тут только геометрия грида. */ /* Грид хедера общий для обоих FW-пресетов, которые используют разметку .sf-oasis-header__* (_header.html, ветка preset_id in ('oasis','creator')). Высоту/шрифты каждый пресет доопределяет у себя (у Creator — 89px ниже). */ .preset-oasis .sf-oasis-header__row, .preset-creator .sf-oasis-header__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px; height: 85px; } .preset-oasis .sf-oasis-header__logo, .preset-creator .sf-oasis-header__logo { grid-column: 1; justify-self: start; } .preset-oasis .sf-oasis-header__nav, .preset-creator .sf-oasis-header__nav { grid-column: 2; display: flex; align-items: center; gap: 20px; overflow-x: auto; white-space: nowrap; } .preset-oasis .sf-oasis-header__cart, .preset-creator .sf-oasis-header__cart { grid-column: 3; justify-self: end; } /* Hero: заголовок 64px по центру (мобайл 28px), паддинг секции 70/70, контент max-width 933px. Крючки — в _hero.html, ветка preset_id=='oasis'. */ .preset-oasis .sf-oasis-hero__inner { padding-top: 70px; padding-bottom: 70px; } .preset-oasis .sf-oasis-hero__content { max-width: 933px; } .preset-oasis h1[data-theme-hero-title] { font-size: 28px; line-height: 1.2; } @media (min-width: 768px) { .preset-oasis h1[data-theme-hero-title] { font-size: 64px; } } /* Hero → каталог (раунд 3, полиш 2026-07-11): у FW-темы oasis секция каталога следует СРАЗУ за hero (секция категорий между ними отключена), поэтому собственный верхний отступ каталога складывается с нижним отступом hero в заметный «провал». Поджимаем ТОЛЬКО верх каталога — FW-мереную геометрию самого hero не трогаем. На прочих пресетах между hero и каталогом есть tile-row категорий, там обычный отступ уместен → гейт по пресету. ⚠ Creator НЕ входит сюда (раунд 4, pixel-parity): nikkykash-метрика для той же структуры даёт свои 36/48, а не поджатые. Обновлено 2026-08-11: базовый отступ каталога теперь py-9 sm:py-12 (36/48 на 640px, эталон FW), а не прежние py-12 md:py-16 (48/64 на 768px) — поджатие снизу остаётся тем же приёмом, только считается от новых чисел. Брейкпоинт здесь тоже переведён на 640px, чтобы поджатие включалось одновременно с самим отступом, а не на 128px позже. */ .preset-oasis #catalog { padding-top: 12px; } @media (min-width: 640px) { .preset-oasis #catalog { padding-top: 20px; } } /* Секция «Хиты» на главной (раунд 2, fw-teardown 2026-07-10): заголовок + CTA «Смотреть все» в одну строку (flex/justify-between/items-center уже на самом div в _section_featured.html, здесь только зазор), заголовок 40px desktop / 28px mobile — как .sf-page-title, отдельный хук-класс, чтобы не тянуть 40px на реальный .sf-page-title (cart/checkout и т.п.). */ .preset-oasis .sf-oasis-featured__header { gap: 16px; } .preset-oasis .sf-oasis-featured__title { font-size: 28px; line-height: 1.2; } @media (min-width: 768px) { .preset-oasis .sf-oasis-featured__title { font-size: 40px; } } /* Футер: паддинг-топ 44 / низ 14, обе строки прижаты влево, ссылки НАД копирайтом. Реордер БЕЗ изменения разметки _footer.html: первый div внутри .store-container уже flex flex-col md:flex-row md:justify-between — форсим всегда-колонку+влево, а order:-1 у