/* To-Sell — ТЕМА ВИТРИНЫ арендатора. Подключается ПОСЛЕ tokens.css и site.css. Здесь: акцент-пресеты (арендатор выбирает в настройках), фирменное свечение, storefront-специфика. Только токены — структуру/поверхности не трогаем (единое качество). */ /* ───────────────────────────────────────────────────────────── АКЦЕНТ-ПРЕСЕТЫ ВИТРИНЫ Арендатор выбирает тему в кабинете → . Меняем ТОЛЬКО акцент (и его производные), не цвета поверхностей. cyan — дефолт из tokens.css, отдельного блока не требует. ───────────────────────────────────────────────────────────── */ [data-sf-theme="violet"] { --accent: #a16bff; --accent-2: #6b8cff; --accent-hover: #b78cff; --accent-ink: #120a1f; --accent-rgb: 161,107,255; } [data-sf-theme="green"] { --accent: #27e0a0; --accent-2: #4fd0ff; --accent-hover: #4fe9b6; --accent-ink: #04190f; --accent-rgb: 39,224,160; } [data-sf-theme="orange"] { --accent: #ff9f43; --accent-2: #ff6b8b; --accent-hover: #ffb15f; --accent-ink: #1f1304; --accent-rgb: 255,159,67; } [data-sf-theme="pink"] { --accent: #ff5c93; --accent-2: #a16bff; --accent-hover: #ff7aa8; --accent-ink: #1f0712; --accent-rgb: 255,92,147; } [data-sf-theme="blue"] { --accent: #4f8cff; --accent-2: #00d4ff; --accent-hover: #6fa0ff; --accent-ink: #04101f; --accent-rgb: 79,140,255; } /* ───────────────────────────────────────────────────────────── ФИРМЕННОЕ СВЕЧЕНИЕ ВИТРИНЫ Радиальный акцент-ореол сверху. Раньше ровно эту полосу закрывало матовое стекло липкой шапки (.sf-header) — поэтому свечение «пропало». Решение как в кабинете (.cab-bg): отдельный фикс-слой под контентом, достаточно высокий (420px), чтобы выглядывать ИЗ-ПОД шапки. ───────────────────────────────────────────────────────────── */ .sf-glow { position: fixed; inset: 0 0 auto 0; height: 420px; z-index: 0; pointer-events: none; background: radial-gradient(58% 100% at 50% 0%, rgba(var(--accent-rgb), .16), transparent 72%); } /* Контент — над слоем свечения (иначе fixed-слой перекроет текст). */ .sf-header, .header, main, .footer { position: relative; z-index: 1; } /* ───────────────────────────────────────────────────────────── ШАПКА ВИТРИНЫ (storefront-header.php) — вид 5key, чисто на токенах. .sf-header (sticky/стекло), .sf-search* — из site.css. ───────────────────────────────────────────────────────────── */ .sf-bar { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-3) 0; } .sf-logo { display: inline-flex; align-items: center; flex-shrink: 0; } .sf-logo-txt { font-size: var(--text-lg); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tight); color: var(--text); white-space: nowrap; transition: color var(--t-fast); } .sf-logo:hover .sf-logo-txt { color: var(--accent); } .sf-logo-img { height: 38px; width: auto; max-width: 220px; object-fit: contain; display: block; } /* Кнопка «Каталог» + мега-меню */ .sf-catalog-wrap { position: relative; flex-shrink: 0; } .sf-catalog-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border: 0; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-size: var(--text-sm); font-weight: var(--fw-semibold); cursor: pointer; -webkit-appearance: none; appearance: none; transition: var(--t-fast); white-space: nowrap; } .sf-catalog-btn svg { width: 18px; height: 18px; } .sf-catalog-btn:hover, .sf-catalog-btn[aria-expanded="true"] { background: var(--accent-hover); } .sf-catalog-btn[aria-expanded="true"] { border-radius: var(--radius) var(--radius) 0 0; } .sf-mega { position: absolute; top: calc(100% + 1px); left: 0; z-index: 101; width: 580px; max-width: 92vw; display: flex; background: rgba(var(--bg-rgb), .92); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--border-soft); border-radius: 0 var(--radius) var(--radius) var(--radius); box-shadow: var(--shadow-md); overflow: hidden; } .sf-mega[hidden] { display: none; } .sf-mega-inner { display: flex; gap: var(--sp-5); padding: var(--sp-4); width: 100%; } .sf-mega-cats { width: 185px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border-soft); padding-right: var(--sp-3); } .sf-mega-cat { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--text-dim); font-size: var(--text-sm); font-weight: var(--fw-medium); transition: var(--t-fast); } .sf-mega-cat:hover, .sf-mega-cat.on { background: rgba(var(--accent-rgb), .1); color: var(--text); } .sf-mega-cat-cnt { font-size: var(--text-xs); color: var(--text-faint); } .sf-mega-subs { flex: 1; min-height: 160px; } .sf-mega-subgroup { display: none; grid-template-columns: 1fr 1fr; gap: 4px var(--sp-4); align-content: start; } .sf-mega-subgroup.on { display: grid; } .sf-mega-sublink { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--text-dim); font-size: var(--text-sm); transition: var(--t-fast); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-mega-sublink:hover { background: rgba(var(--accent-rgb), .1); color: var(--text); } .sf-mega-overlay { position: fixed; inset: 0; z-index: 40; background: var(--scrim); } .sf-mega-overlay[hidden] { display: none; } /* Поиск по центру + иконо-кнопки действий */ .sf-search { margin: 0 auto; } .sf-bar-actions { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; } .sf-icon-btn { position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: var(--radius); color: var(--text-dim); transition: var(--t-fast); } .sf-icon-btn:hover { background: var(--overlay); color: var(--accent); } .sf-icon-btn svg { width: 20px; height: 20px; } .sf-fav-btn.has-favs svg { fill: var(--accent); stroke: var(--accent); color: var(--accent); } .sf-fav-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; } .sf-fav-badge[hidden] { display: none; } /* Моб. поиск (выезжает под шапкой) */ .sf-search-drop { position: sticky; top: 64px; z-index: 49; padding: var(--sp-3) 0; background: rgba(var(--bg-rgb), .92); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--border-soft); } .sf-search-drop[hidden] { display: none; } .sf-search-drop-in { width: 100%; padding: var(--sp-3) var(--sp-4); background: var(--bg-input); border: 1px solid var(--input-border); border-radius: var(--radius-pill); color: var(--text); font-size: 16px; outline: none; } .sf-search-drop-in:focus { border-color: var(--accent); } /* Мобильное меню (выезжает справа) */ .sf-mobmenu { position: fixed; top: 0; right: 0; z-index: 201; width: 300px; max-width: 85vw; height: 100vh; display: flex; flex-direction: column; background: rgba(var(--bg-rgb), .95); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-left: 1px solid var(--border-soft); transform: translateX(100%); transition: transform var(--t); } .sf-mobmenu.open { transform: translateX(0); } .sf-mobmenu-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4); border-bottom: 1px solid var(--border-soft); font-weight: var(--fw-semibold); } .sf-mobmenu-body { flex: 1; overflow-y: auto; padding: var(--sp-3); } .sf-mobmenu-cat { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3); border-radius: var(--radius); color: var(--text); font-weight: var(--fw-medium); font-size: var(--text-sm); } .sf-mobmenu-cat span { color: var(--text-faint); font-size: var(--text-xs); } .sf-mobmenu-cat:hover { background: var(--overlay); } .sf-mobmenu-subs { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: 0 var(--sp-3) var(--sp-3); } .sf-mobmenu-subs a { padding: 4px var(--sp-3); border-radius: var(--radius-sm); background: var(--overlay); color: var(--text-dim); font-size: var(--text-xs); } .sf-mobmenu-subs a:hover { color: var(--accent); } .sf-mobmenu-overlay { position: fixed; inset: 0; z-index: 200; background: var(--scrim); } .sf-mobmenu-overlay[hidden] { display: none; } /* Показ/скрытие по ширине */ .sf-only-mob { display: none; } @media (max-width: 860px) { .sf-catalog-wrap, .sf-search, .sf-no-mob { display: none; } .sf-only-mob { display: inline-flex; } .sf-bar { gap: var(--sp-3); } .sf-logo { margin-right: auto; } } /* Избранное на карточках (сердечко .pc-fav + фильтр «только избранное») */ .product-card .pc-fav.on { opacity: 1; } .pc-fav.on::before { background: var(--accent); } .product-grid.favs-only .product-card:not(.is-fav) { display: none; }