/* 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; } /* Светлая тема: акцент каждого пресета глубже (на белом яркий режет глаз), текст на заливке — белый. data-theme="light" на , data-sf-theme на → потомковый селектор. */ [data-theme="light"] [data-sf-theme="violet"] { --accent: #7c3aed; --accent-hover: #6d28d9; --accent-ink: #fff; --accent-rgb: 124,58,237; } [data-theme="light"] [data-sf-theme="green"] { --accent: #059669; --accent-hover: #047857; --accent-ink: #fff; --accent-rgb: 5,150,105; } [data-theme="light"] [data-sf-theme="orange"] { --accent: #d97706; --accent-hover: #b45309; --accent-ink: #fff; --accent-rgb: 217,119,6; } [data-theme="light"] [data-sf-theme="pink"] { --accent: #db2777; --accent-hover: #be185d; --accent-ink: #fff; --accent-rgb: 219,39,119; } [data-theme="light"] [data-sf-theme="blue"] { --accent: #2563eb; --accent-hover: #1d4ed8; --accent-ink: #fff; --accent-rgb: 37,99,235; } /* Светлая тема: стеклянные элементы (полупрозрачность+блюр) на белом выглядят грязно — делаем чистыми: карточки сплошные белые + лёгкая тень, шапка плотнее, свечение тише. */ [data-theme="light"] .product-card { background: var(--bg-card); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-sm); } [data-theme="light"] .sf-header { background: rgba(var(--bg-rgb), .88); } [data-theme="light"] .sf-glow { display: none; } /* на светлой navy-glow грязнит — оставляем только деликатный body-тон */ /* Светлая тема: navy-подсветка грязнит светлый фон — вместо неё деликатный акцентный тон (как было). */ [data-theme="light"] body { background-image: radial-gradient(ellipse 82% 72% at 50% -3%, rgba(var(--accent-rgb), .06), transparent 58%); } /* Светлая тема: чип опции — белый + тень (как карточки на главной), иначе теряются на светлом фоне. */ [data-theme="light"] .pd-variant > span { background: var(--bg-card); box-shadow: var(--shadow-sm); } [data-theme="light"] .pd-variant:hover > span { box-shadow: var(--shadow-md); } [data-theme="light"] .pd-variant.off > span { box-shadow: none; } /* ───────────────────────────────────────────────────────────── ФИРМЕННОЕ СВЕЧЕНИЕ ВИТРИНЫ Радиальный акцент-ореол сверху. Раньше ровно эту полосу закрывало матовое стекло липкой шапки (.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(26, 40, 74, .38), transparent 72%); } /* Контент — над слоем свечения (иначе fixed-слой перекроет текст). .sf-header НЕ включаем: ему нужен position:sticky (из site.css), а relative его перебивал (шапка не липла); его z-index:50 и так выше свечения. */ .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-top: var(--sp-3); padding-bottom: var(--sp-3); } .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; } /* Мобильная кнопка «Каталог» — burger на циан-плашке (специфичнее .sf-icon-btn, иначе background:none перебьёт) */ .sf-bar-actions .sf-catalog-mob { background: var(--accent); color: var(--accent-ink); } .sf-bar-actions .sf-catalog-mob:hover { background: var(--accent-hover); color: var(--accent-ink); } .sf-mega { position: absolute; top: calc(100% + 1px); left: 0; z-index: 101; width: 580px; max-width: 92vw; display: none; 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; clip-path: inset(0 100% 100% 0); transition: clip-path .35s cubic-bezier(.16, 1, .3, 1); } .sf-mega.open { display: flex; } .sf-mega.visible { clip-path: inset(0 0 0 0); } .sf-mega-inner { display: flex; gap: var(--sp-5); padding: var(--sp-4); width: 100%; } .sf-mega-cats { width: 200px; 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-nm { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; } .sf-mega-cat-nm svg { width: 22px; height: 22px; flex-shrink: 0; } .sf-mega-cat-go { width: 18px; height: 18px; color: var(--text-faint); flex-shrink: 0; } .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: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; font-weight: var(--fw-bold); line-height: 1; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; } .sf-fav-badge[hidden] { display: none; } /* Моб. поиск (выезжает под шапкой) */ .sf-search-drop { padding: 0 0 var(--sp-3); } /* внутри .sf-header — стекло/тень/sticky берёт от шапки */ .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); color: var(--text); font-size: 16px; outline: none; } .sf-search-drop-in:focus { border-color: var(--accent); } /* Языковая панель на мобиле — выпадает в стекле шапки, как поиск (вместо десктоп-дропдауна) */ .sf-lang-drop { display: none; padding: 0 0 var(--sp-3); } .sf-lang-drop-in { display: flex; flex-direction: column; gap: var(--sp-2); } .sf-lang-row { display: flex; align-items: center; gap: var(--sp-3); } .sf-lang-rowlabel { width: 64px; flex-shrink: 0; color: var(--text-dim); font-size: var(--text-sm); } .sf-lang-seg { display: flex; flex: 1; gap: 3px; padding: 3px; background: var(--overlay); border-radius: var(--radius); } .sf-lang-segbtn { flex: 1; padding: var(--sp-2); border: 0; background: none; color: var(--text-dim); font-size: var(--text-sm); font-weight: var(--fw-medium); border-radius: var(--radius-sm); cursor: pointer; -webkit-appearance: none; appearance: none; transition: var(--t-fast); } .sf-lang-segbtn.on { background: var(--accent); color: var(--accent-ink); } @media (max-width: 860px) { .sf-lang-drop:not([hidden]) { display: block; } .sf-bar-actions .sf-lang-menu { display: none !important; } /* на мобиле — выпадающая панель, не десктоп-дропдаун */ } /* Мобильное меню (выезжает справа) */ .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-2) 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-bold); font-size: var(--text-base); } .sf-mobmenu-cat-go { width: 20px; height: 20px; color: var(--text-faint); flex-shrink: 0; } .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-cat-nm { display: inline-flex; align-items: center; gap: var(--sp-3); } .sf-mobmenu-cat-nm svg { width: 21px; height: 21px; color: var(--text); flex-shrink: 0; } .sf-mobmenu-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-soft); } .sf-mobmenu-links a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius); color: var(--text); font-size: var(--text-base); font-weight: var(--fw-bold); } .sf-mobmenu-links a:hover { background: var(--overlay); } .sf-mobmenu-links svg { width: 21px; height: 21px; color: var(--text); flex-shrink: 0; } .sf-mobmenu-foot { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: var(--sp-3); } .sf-mobmenu-toggle { display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: var(--sp-3); border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--overlay); color: var(--text); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; } .sf-mobmenu-toggle-l { display: inline-flex; align-items: center; gap: var(--sp-2); } .sf-mobmenu-toggle svg { width: 18px; height: 18px; } .sf-mobmenu-seg-row { display: flex; gap: var(--sp-2); } .sf-mobmenu-seg { display: flex; flex: 1; padding: 3px; gap: 3px; background: var(--overlay); border-radius: var(--radius); } .sf-mobmenu-opt { flex: 1; padding: var(--sp-2); border: 0; background: none; color: var(--text-dim); font-size: var(--text-sm); font-weight: var(--fw-medium); border-radius: var(--radius-sm); cursor: pointer; transition: var(--t-fast); } .sf-mobmenu-opt.on { background: var(--accent); color: var(--accent-ink); } /* Нижняя моб-панель (app-like): Главная · Каталог · Поиск · Избранное */ .sf-botnav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; height: 62px; padding: 0 var(--sp-1); background: rgba(var(--bg-rgb), .94); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--border-soft); } .sf-botnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; border: 0; background: none; cursor: pointer; color: var(--text-dim); font-size: 10px; font-weight: var(--fw-medium); -webkit-appearance: none; appearance: none; text-decoration: none; transition: color var(--t-fast); } .sf-botnav-item svg { width: 22px; height: 22px; } .sf-botnav-item.on, .sf-botnav-item:hover { color: var(--accent); } .sf-botnav-ic { position: relative; display: inline-flex; } .sf-botnav-badge { position: absolute; top: -5px; right: -9px; } .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) { :root { --gutter: 18px; } /* боковые поля уже на планшете/мобиле — карточкам больше места (только витрина) */ .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; } /* язык — иконка-глобус на мобиле (текст «Рус·₽» скрыт) */ .sf-bar-actions .sf-lang { border: none; outline: none; padding: 0; width: 40px; height: 40px; justify-content: center; } .sf-bar-actions .sf-lang span, .sf-bar-actions .sf-lang-dot { display: none; } .sf-bar-actions .sf-lang svg { width: 20px; height: 20px; } .sf-bar-actions .sf-lang-menu { right: 0; left: auto; min-width: 78vw; max-width: 340px; border-radius: var(--radius); } .sf-botnav { display: flex; } body { padding-bottom: 62px; } /* контент не прячется за фикс-панелью */ } .pc-sales-short { display: none; } /* короткая запись числа — только на тесной мобиле */ @media (max-width: 560px) { :root { --gutter: 12px; } .pc-sales-word, .pc-sales-full, .pc-rev-count { display: none; } .pc-sales-short { display: inline; } .pc-price { order: 1; flex-basis: 100%; } } /* 2-кол карточки: сверху зачёркнутая старая + −%, под ними крупная текущая цена */ /* Избранное на карточках (сердечко .pc-fav + фильтр «только избранное») */ .product-card .pc-fav.on { opacity: 1; background: rgba(var(--accent-rgb), .2); } .pc-fav.on::before { background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center/contain no-repeat; } .product-grid.favs-only .product-card:not(.is-fav) { display: none; } .product-card.sf-fav-removing { opacity: 0; transform: scale(.92); transition: opacity .2s ease, transform .2s ease; pointer-events: none; } /* ── Быстрые ссылки на платформы в шапке (как 5key) ── */ .sf-platforms { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; } .sf-plat { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius); color: var(--text-dim); transition: var(--t-fast); } .sf-plat svg { width: 20px; height: 20px; } .sf-plat:hover { color: var(--text); background: var(--overlay); } .sf-plat.on { color: var(--accent); background: var(--overlay); } @media (max-width: 900px) { .sf-platforms { display: none; } } /* ── Секции на главной (Хиты / по категориям) — обычная вертикальная сетка ── */ .sf-rail { margin-bottom: var(--sp-6); } .sf-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); } .sf-rail-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xl); font-weight: var(--fw-bold); margin: 0; } .sf-rail-title svg { width: 26px; height: 26px; color: currentColor; flex-shrink: 0; } .sf-rail-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); } .sf-rail-tab { padding: 5px var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--text-sm); color: var(--text-dim); transition: var(--t-fast); white-space: nowrap; } .sf-rail-tab:hover { border-color: var(--accent); color: var(--text); background: rgba(var(--accent-rgb), .08); } .sf-rail-title a { display: inline-flex; align-items: center; gap: var(--sp-2); color: inherit; transition: color var(--t-fast); } .sf-rail-title a:hover { color: var(--accent); } /* Рельсы-секции: РОВНО 2 ряда на любом устройстве — колонки фиксированы по брейкпоинтам, лишние карточки сверх 2 рядов скрыты (полный список — по «Все товары →»). */ .sf-rail-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); } .sf-rail-row > :nth-child(n+11) { display: none; } @media (max-width: 1200px) { .sf-rail-row { grid-template-columns: repeat(4, 1fr); } .sf-rail-row > :nth-child(n+9) { display: none; } } @media (max-width: 900px) { .sf-rail-row { grid-template-columns: repeat(3, 1fr); } .sf-rail-row > :nth-child(n+7) { display: none; } } @media (max-width: 560px) { .sf-rail-row { grid-template-columns: repeat(2, 1fr); gap: 10px; } .sf-rail-row > :nth-child(n+5) { display: none; } .sf-rail-title { font-size: var(--text-lg); } } /* ── Промо-ссылки в шапке (Скидки / Мне повезёт / Блог) ── */ .sf-links { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; } .sf-link { display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); color: var(--text-dim); font-size: var(--text-sm); font-weight: var(--fw-medium); white-space: nowrap; transition: var(--t-fast); } .sf-link svg { width: 17px; height: 17px; flex-shrink: 0; } .sf-link:hover { color: var(--text); background: var(--overlay); } @media (max-width: 1180px) { .sf-links { display: none; } } /* ── Заглушка язык/валюта ── */ .sf-lang-wrap { position: relative; margin-left: var(--sp-2); } .sf-lang { display: inline-flex; align-items: center; gap: 4px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: none; color: var(--text-dim); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; transition: var(--t-fast); white-space: nowrap; } .sf-lang:hover, .sf-lang[aria-expanded="true"] { color: var(--text); border-color: var(--border-soft); } .sf-lang svg { width: 16px; height: 16px; } .sf-lang-dot { opacity: .5; } .sf-lang[aria-expanded="true"] { border-radius: var(--radius) var(--radius) 0 0; } .sf-lang-menu { position: absolute; top: 100%; right: 0; min-width: 300px; z-index: 101; padding: var(--sp-2); 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: var(--radius) 0 var(--radius) var(--radius); box-shadow: var(--shadow-md); display: none; clip-path: inset(0 0 100% 100%); transition: clip-path .35s cubic-bezier(.16, 1, .3, 1); } .sf-lang-menu.open { display: block; } .sf-lang-menu.visible { clip-path: inset(0 0 0 0); } .sf-lang-cols { display: flex; gap: var(--sp-2); } .sf-lang-group { flex: 1; min-width: 0; } .sf-lang-group + .sf-lang-group { border-left: 1px solid var(--border-soft); padding-left: var(--sp-2); } .sf-lang-label { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; padding: 0 var(--sp-2) var(--sp-1); } .sf-lang-opt { display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left; padding: var(--sp-2); border: 0; background: none; color: var(--text-dim); font-size: var(--text-sm); border-radius: var(--radius-sm); cursor: pointer; transition: var(--t-fast); } .sf-lang-opt:hover { background: var(--overlay); color: var(--text); } .sf-lang-opt.on { color: var(--accent); } .sf-flag { width: 22px; height: 16px; border-radius: var(--radius-xs); overflow: hidden; flex-shrink: 0; display: inline-flex; } .sf-flag svg { width: 100%; height: 100%; display: block; } .sf-cur { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-xs); background: rgba(var(--accent-rgb), .18); color: var(--accent); font-weight: var(--fw-bold); font-size: 12px; flex-shrink: 0; } /* ── Переключатель день/ночь: показываем иконку текущей темы ── */ .sf-th-light { display: none; } :root[data-theme="light"] .sf-th-dark { display: none; } :root[data-theme="light"] .sf-th-light { display: inline-flex; } /* ── Живой поиск: дропдаун подсказок (.sf-search спозиционирован в site.css) ── */ .sf-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden auto; z-index: 60; max-height: 70vh; } .sf-sr-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); transition: background var(--t-fast); } .sf-sr-item:hover { background: var(--overlay); } .sf-sr-img { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--bg); } .sf-sr-name { flex: 1; color: var(--text); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-sr-price { color: var(--text); font-weight: var(--fw-bold); font-size: var(--text-sm); white-space: nowrap; } .sf-sr-empty { padding: var(--sp-4); color: var(--text-dim); font-size: var(--text-sm); text-align: center; } /* ── Заголовок «Избранное» ── */ .sf-head-left { text-align: left; } .sf-fav-title { display: inline-flex; align-items: center; gap: var(--sp-2); } .sf-fav-title svg { width: 26px; height: 26px; color: var(--accent); } /* ── Футер витрины (бренд+trust · колонки · карточка-помощь; на лёгком glow) ── */ .sf-footer { position: relative; overflow: hidden; border-top: 1px solid var(--border-soft); margin-top: var(--sp-9); padding: var(--sp-7) 0 var(--sp-6); } .sf-foot-glow { position: absolute; inset: 0 0 auto 0; height: 220px; pointer-events: none; z-index: 0; background: radial-gradient(60% 100% at 50% 0%, rgba(var(--accent-rgb), .07), transparent 72%); } .sf-footer > .wrap { position: relative; z-index: 1; } .sf-foot-cols { display: flex; justify-content: space-between; gap: var(--sp-6) var(--sp-7); flex-wrap: wrap; margin-bottom: var(--sp-6); } .sf-foot-brand { display: flex; flex-direction: column; gap: var(--sp-3); } .sf-foot-name { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text); } .sf-foot-trust { display: flex; flex-direction: column; gap: var(--sp-2); } .sf-foot-trust-i { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--text-dim); } .sf-foot-trust-i svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; } .sf-foot-sep { display: block; height: 1px; background: var(--border-soft); margin: var(--sp-1) 0; } .sf-foot-col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 170px; } .sf-foot-h { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: var(--fw-semibold); margin-bottom: 4px; } .sf-foot-col a { color: var(--text-dim); font-size: var(--text-sm); transition: color var(--t-fast); } .sf-foot-col a:hover { color: var(--accent); } .sf-foot-col a.sf-foot-report:hover { color: var(--red); } .sf-foot-bottom-end { display: inline-flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; } .sf-foot-bottom-end .sf-foot-report, .sf-foot-bottom-end .sf-foot-link { color: var(--text-faint); transition: color var(--t-fast); } .sf-foot-bottom-end .sf-foot-report:hover { color: var(--red); } .sf-foot-bottom-end .sf-foot-link:hover { color: var(--accent); } .sf-foot-cta { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 320px; max-width: 400px; padding: var(--sp-5); background: var(--grad-accent); background-clip: padding-box; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); } [data-theme="light"] .sf-foot-cta { box-shadow: var(--shadow-sm); } .sf-foot-cta-h { font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--text); line-height: 1.3; } .sf-foot-cta-t { font-size: var(--text-sm); color: var(--text-dim); line-height: 1.5; margin: 0; } .sf-foot-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-size: var(--text-sm); font-weight: var(--fw-semibold); transition: var(--t-fast); } .sf-foot-cta-btn:hover { background: var(--accent-hover); } .sf-foot-cta-btn svg { width: 17px; height: 17px; } .sf-foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-faint); } .sf-foot-copy { max-width: 620px; } .sf-foot-powered { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--text-sm); transition: var(--t-fast); } .sf-foot-pw-label { color: var(--text-dim); } .sf-foot-pw-brand { display: inline-flex; align-items: center; gap: 2px; } .sf-foot-rkt { width: 20px; height: 20px; color: var(--accent); transform: rotate(45deg); flex-shrink: 0; } .sf-foot-pw-name { color: var(--text); font-weight: var(--fw-bold); } .sf-foot-age { padding: 1px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); flex-shrink: 0; } @media (max-width: 860px) { .sf-foot-cta { max-width: none; width: 100%; } } /* ── Попапы витрины (поддержка/жалоба) — компонент .sf-modal ── */ .sf-foot-report, .sf-foot-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; } .sf-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); } .sf-modal[hidden] { display: none; } /* [hidden] на детях модалки должен прятать даже элементы с display:flex (форма/шапка) — иначе при успехе форма не уезжает */ .sf-modal-card > [hidden] { display: none !important; } .sf-modal-backdrop { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .sf-modal-card { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - var(--sp-7)); overflow-y: auto; padding: var(--sp-6); background: var(--grad-accent), var(--bg-card); background-clip: padding-box; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .sf-modal-x { position: absolute; top: var(--sp-2); right: var(--sp-2); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius); color: var(--text-dim); transition: var(--t-fast); } .sf-modal-x:hover { background: var(--overlay); color: var(--text); } .sf-modal-x svg { width: 20px; height: 20px; } .sf-modal-title { font-size: var(--text-xl); font-weight: var(--fw-bold); margin: 0 0 4px; padding-right: var(--sp-6); } .sf-modal-sub { color: var(--text-dim); font-size: var(--text-sm); margin: 0 0 var(--sp-4); } .sf-modal-chans { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); } .sf-modal-chan { display: inline-flex; align-items: center; gap: 7px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--overlay); color: var(--text); font-size: var(--text-sm); font-weight: var(--fw-semibold); transition: var(--t-fast); } .sf-modal-chan:hover { border-color: var(--accent); color: var(--accent); } .sf-modal-chan svg { width: 18px; height: 18px; flex-shrink: 0; } .sf-modal-or { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); color: var(--text-faint); font-size: var(--text-xs); } .sf-modal-or::before, .sf-modal-or::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); } .sf-modal-form { display: flex; flex-direction: column; gap: var(--sp-3); } .sf-modal-in { width: 100%; padding: var(--sp-3); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: var(--text-sm); transition: border-color var(--t-fast); } .sf-modal-in:focus { outline: none; border-color: var(--accent); } textarea.sf-modal-in { resize: vertical; min-height: 90px; } select.sf-modal-in { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: calc(var(--sp-3) + 24px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8b0c0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-3) center; background-size: 15px; } [data-theme="light"] select.sf-modal-in { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .sf-modal-status { margin: 0; font-size: var(--text-sm); } .sf-modal-status:empty { display: none; } .sf-modal-status.ok { color: var(--green); } .sf-modal-status.err { color: var(--red); } .sf-modal-in.is-error { border-color: var(--red); } @keyframes sf-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .sf-modal-card.shake { animation: sf-shake .4s ease; } .sf-modal-card > *:not(.sf-modal-x):not(.sf-modal-success) { transition: opacity .25s ease, transform .25s ease; } .sf-leaving { opacity: 0; transform: translateY(-16px); pointer-events: none; } .sf-modal-success { text-align: center; padding: var(--sp-3) 0 var(--sp-2); opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; } .sf-modal-success.show { opacity: 1; transform: translateY(0); } .sf-success-ic { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto var(--sp-4); border-radius: 50%; background: rgba(var(--green-rgb), .14); color: var(--green); } .sf-success-ic svg { width: 38px; height: 38px; } .sf-modal-success .sf-modal-title { padding-right: 0; } .sf-modal-success .sf-modal-sub { margin-bottom: 0; } .sf-modal-success.show .sf-success-ic { animation: sf-pop .45s cubic-bezier(.2, .7, .3, 1.3); } @keyframes sf-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } } .sf-modal-send { padding: var(--sp-3) var(--sp-4); border: 0; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); cursor: pointer; transition: var(--t-fast); } .sf-modal-send:hover { background: var(--accent-hover); } .sf-modal-send:disabled { opacity: .6; cursor: default; } .sf-modal-send.is-sending { opacity: 1; cursor: default; position: relative; overflow: hidden; } .sf-modal-send.is-sending::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(-100%); animation: sf-send-bar .9s linear infinite; } @keyframes sf-send-bar { to { transform: translateX(100%); } } .sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* Композер вложений (жалоба): поле сообщения + скрепка + чипы-превью с удалением */ .sf-composer { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); border-radius: var(--radius); transition: outline-color var(--t-fast); } .sf-composer.drag { outline: 2px dashed var(--red); outline-offset: 4px; } .sf-composer.is-error .sf-composer-text { border-color: var(--red); } .sf-composer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .sf-composer-attach { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--overlay); color: var(--text-dim); font-size: var(--text-xs); font-weight: var(--fw-semibold); cursor: pointer; transition: var(--t-fast); } .sf-composer-attach:hover { border-color: var(--red); color: var(--text); } .sf-composer-attach input[type=file] { display: none; } .sf-composer-attach svg { width: 15px; height: 15px; } .sf-composer-hint { font-size: var(--text-xs); color: var(--text-faint); } .sf-composer-files { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .sf-composer-files:empty { display: none; } .sf-composer-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 6px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--bg); } .sf-composer-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: var(--radius-xs); flex-shrink: 0; } .sf-composer-chip-n { font-size: var(--text-xs); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; } .sf-composer-chip-x { border: 0; background: none; color: var(--text-faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; transition: var(--t-fast); } .sf-composer-chip-x:hover { color: var(--red); } /* Красный режим — жалоба (негатив) */ .sf-modal-danger .sf-modal-card { background: linear-gradient(120deg, rgba(var(--red-rgb), .12), var(--bg-card) 60%), var(--bg-card); } .sf-modal-head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); padding-right: var(--sp-5); } .sf-modal-head .sf-modal-title { padding-right: 0; } .sf-modal-head .sf-modal-sub { margin-bottom: 0; } .sf-modal-head-ic { width: 40px; height: 40px; flex-shrink: 0; color: var(--accent); } .sf-modal-danger .sf-modal-head-ic { color: var(--red); } .sf-modal-head-txt { display: flex; flex-direction: column; gap: 2px; } .sf-modal-danger .sf-modal-in:focus { border-color: var(--red); } .sf-modal-danger .sf-modal-send { background: var(--red); color: #fff; } .sf-modal-danger .sf-modal-send:hover { background: var(--red); filter: brightness(.92); } /* ── Заглушка «скоро запуск» (coming_soon): full-screen герой-стройка + шапка-лого + футер ── */ .soon { position: relative; } .soon-head { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: var(--sp-5) var(--sp-6); } .soon-logo { font-size: var(--text-xl); font-weight: var(--fw-bold); color: #fff; letter-spacing: .3px; text-shadow: 0 2px 12px rgba(0,0,0,.5); } /* герой = ровно 100vh (без flex-роста), футер идёт сразу за ним */ .soon-hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: #0a0e1a url('/images/igro-construction.jpg') center center / cover no-repeat; } .soon-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,16,.55) 0%, rgba(8,10,16,.72) 55%, rgba(8,10,16,.9) 100%); } .soon-hero-inner { position: relative; z-index: 1; max-width: 760px; padding: var(--sp-6); color: #fff; } .soon-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--radius-pill); background: rgba(var(--accent-rgb), .18); border: 1px solid rgba(var(--accent-rgb), .45); color: var(--accent); font-size: var(--text-sm); font-weight: var(--fw-semibold); backdrop-filter: blur(6px); } .soon-badge svg { width: 16px; height: 16px; } .soon-title { margin: var(--sp-4) 0 var(--sp-3); font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.08; font-weight: var(--fw-bold); color: #fff; text-shadow: 0 3px 20px rgba(0,0,0,.5); } .soon-title-accent { color: var(--accent); } .soon-sub { margin: 0 auto var(--sp-6); max-width: 560px; font-size: var(--text-lg); line-height: var(--lh-normal); color: rgba(255,255,255,.82); } .soon-cta { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius); background: var(--accent); color: #0a0e1a; font-weight: var(--fw-semibold); font-size: var(--text-base); transition: var(--t-fast); } .soon-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(var(--accent-rgb), .4); } .soon-cta svg { width: 18px; height: 18px; } /* Заглушка подключает НАСТОЯЩИЙ .sf-footer внутри .soon: прилипает к герою (убираем margin-top:sp-9), свечение сверху ярче, а нав-ссылки магазина глушим (живут только To-Sell + «Пожаловаться»). */ .soon .sf-footer { margin-top: 0; } .soon .sf-footer .sf-foot-glow { height: 260px; background: radial-gradient(60% 100% at 50% 0%, rgba(var(--accent-rgb), .14), transparent 70%); } .soon .sf-footer .sf-foot-col a { pointer-events: none; cursor: default; } .soon .sf-footer .sf-foot-col a:hover { color: var(--text-dim); } @media (max-width: 560px) { .soon-head { padding: var(--sp-4); } .soon-sub { font-size: var(--text-base); } }