/* ================================================ ROOT.CSS — Глобальные CSS-переменные Все цвета, тени и токены проекта p2w-shop Подключать ПЕРВЫМ, до любых других .css ================================================ */ :root, :host { /* ══════════════════════════════ ФОНЫ / BACKGROUNDS ══════════════════════════════ */ --bg-deepest: #00000e; /* preloader, intro */ --bg-preloader: #040711; /* preloader deal-style */ --bg: #090b14; /* основной фон сайта (style, chat-new, index) */ --bg-alt: #0b0f1c; /* фон страниц withdraw / wallet / paymodal / deal */ --bg-2: #0f172a; /* скелетон-слой bg-2 */ /* Панели / карточки */ --panel: #12172a; /* panel (style.css) */ --panel-2: #0d1222; /* panel-2 (style.css) */ --panel-nav: #0e1426; /* navLink hover, tag, helpBtn, sTitle dot, pCard, search input */ --panel-topup: #0d1320; /* topupNew, amountWrap label */ --panel-modal: #0f162c; /* sheet модалки */ --panel-input: #0f1929; /* inputWrap / amountWrap bg */ --panel-close: #111730; /* кнопка закрытия модалки */ --panel-mid: #11182b; /* deal container, review-display */ --panel-review: #0f1626; /* review-display-container (deal-style) */ --panel-dark: #0b1120; /* reviewText bg, deal темный слой */ --panel-chat: #12192c; /* deal-card, double-avatar, filechip */ --panel-picker: #0f1634; /* currencyDrop picker */ --panel-info: #131b35; /* curPicker (profiles) */ --panel-fill: #1b2538; /* infoBtn bg */ --panel-badge: #1b2341; /* chipBtn .cnt */ --panel-avatar: #2f3766; /* avatarChat bg, empty logo */ --panel-me: #3a4aa6; /* .me bubble, .badge чат */ --panel-steam: #1e2a45; /* steamLogo */ --panel-swap: #121a27; /* swapItem bg */ --panel-swap-a: #1b2f4e; /* swapItem.active, steamLogoNew */ --panel-deal: #1a233a; /* chat-icon-container */ --panel-sort: #121831; /* sort-modal inner */ --panel-sort-2: #111520; /* sort-modal box */ --panel-banner: #121723; /* bannerPlaceholder */ --panel-sellbg: #1f2937; /* filechip thumb (sell_new) */ /* Шапка */ --header-bg: #030911; /* хедер основной фон */ --header-bg-body: #050915; /* body background (header.css) */ --header-glow-a: rgba(1,105,217,.7); --header-glow-b: rgba(96,13,152,.7); --brand-blue: #006BDB; /* p2w-word1 */ --brand-purple: #5A0F99; /* p2w-word2 */ --grad-purple: #600D98; --grad-blue: #182CB2; --grad-cyan: #006ADA; --chatbadge: rgb(99,102,241); --placeholder-hdr: #818488; /* input::placeholder (header.css) */ /* ══════════════════════════════ ПОЛУПРОЗРАЧНЫЕ СЛОИ / SURFACE ══════════════════════════════ */ --surface: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.05); --surface-hover: rgba(255,255,255,.06); --surface-active: rgba(255,255,255,.08); --glass: rgba(14,20,38,.45); --glass-2: rgba(14,20,38,.6); --glass-btn: rgba(14,20,38,.85); --glass-field: rgba(13,18,34,.65); /* field .box, sumBox */ --glass-panel: rgba(18,23,42,.55); --glass-panel-2: rgba(18,23,42,.6); --glass-panel-3: rgba(18,23,42,.8); --glass-panel-4: rgba(18,23,42,.86); /* catalog sheet мобайл */ --glass-tabbar: rgba(18,23,42,.72); /* mobileTabbar */ --glass-sell: rgba(16,23,37,.28); /* sell_new / category карточки */ --glass-toast: rgba(0,0,0,.8); /* ══════════════════════════════ ТЕКСТ / TEXT COLORS ══════════════════════════════ */ --ink: #eaf0ff; /* основной текст (style, chat-new) */ --text: #e6e9f2; /* текст sidebar/чат (styles.css) */ --hi: #eaf2ff; /* highlight (withdraw, wallet, paymodal) */ --muted: #9fb0d7; /* приглушённый (style, chat-new, profiles, deal) */ --muted-2: #9aa4b2; /* (styles.css, sell_new, category) */ --muted-3: #a7b6dd; /* (withdraw, wallet, paymodal) */ --muted-4: #94a3b8; /* (index.css, char-counter, time) */ --dim: #b8c7e8; /* helpBtn color */ --dim-2: #aab7df; /* suffix, hint, dl dt */ --label: #cfe1ff; /* catBlock a, x-close color */ --label-2: #cfe2ff; /* pill текст */ --label-3: #cdd5e1; /* iconCard .name */ --label-4: #d9e4ff; /* leftMenu item color */ --label-5: #d7e3ff; /* .tab color */ --label-6: #dbe6ff; /* msg p */ --label-7: #d8e4ff; /* payOpt strong */ --label-8: #dbeafe; /* chip-ink */ --label-9: #e7edff; /* dBox color */ --label-10: #cbd5e1; /* preview, meta-top, filechip size */ --label-11: #e6ecff; /* deal body text, modal-header h3 */ --label-12: #cbd5ff; /* modal-body, btn-cancel */ --label-13: #8b95ff; /* modal-close color */ --label-14: #a7b0c2; /* pinfo seller, ta-ph */ --label-15: #7d88a8; /* placeholder (inputWrap) */ --label-16: #7f8cad; /* amountWrap label */ --label-17: #9db1ff; /* back link, hint color (profiles) */ --label-18: #8aa1d8; /* amountInput placeholder */ --label-19: #b7c0d1; /* sub text (styles.css) */ --label-20: #aab4c6; /* empty (styles.css) */ --label-21: #8ea0c9; /* old price (products, profiles) */ --label-22: #9aa7d1; /* muted (sell_new, category) */ --label-23: #cdd7f1; /* stateBanner tx */ --label-24: #9fb0d7; /* deal header p, review-date */ --label-deal:#a5b4fc; /* status-in-progress deal p */ /* ══════════════════════════════ БРЕНД / BRAND GRADIENT ══════════════════════════════ */ --brandA: #70b0ff; --brandB: #ff67c7; --brand-cyan: #6ddcff; /* word1 gradient start */ --brand-pink: #ffa2e0; /* word2 gradient end */ --brand-cyan-2: #6ee7ff; /* bannerPlaceholder color */ /* ══════════════════════════════ АКЦЕНТ / ACCENT ══════════════════════════════ */ --acc: #5b7cff; /* основной синий акцент (withdraw, wallet, index, header) */ --acc-2: #3fa2ff; /* второй акцент */ --acc-light: #7de4ff; /* --acc в style.css / chat-new.css (голубой) */ --blue: #6a7dff; /* deal btn/spinner, --blue (styles.css) */ --blue-mid: #6db3ff; /* stars (style.css, profiles) */ --blue-light: #90caf9; /* star--full */ --blue-btn: #5e8cff; /* feeBadge bg */ --blue-deal: #4354ff; /* deal btn primary / deal spinner */ --blue-link: #5286ff; /* sMeta hover, tag:hover, a:hover (products) */ --blue-promo: #6eaaff; /* promoTop color */ --blue-footer: #2563ff; /* footer support btn */ --blue-fhover: #1a4bd6; /* footer support btn hover */ --blue-pay: #3796d4; /* #payBtnTelegram gradient start */ --blue-pay-2: #247eed; /* #payBtnTelegram gradient end */ --blue-sell: #8bb8ff; /* agree a (sell_new) */ --blue-cat: #93c5fd; /* deal-btn secondary color */ --blue-cat-2: #3b82f6; /* sort-modal active / opt-circle */ /* ══════════════════════════════ СТАТУС / STATUS ══════════════════════════════ */ --green: #34d399; /* --green (style.css, chat-new) */ --green-chip: #22c55e; /* homeHero .chip */ --green-bright: #18c67e; /* hero .chip */ --ok: #4ade80; /* --ok (withdraw, wallet, paymodal) */ --ok-2: #24cf66; /* --ok (styles.css) */ --ok-3: #10b981; /* deal-price, ok-3 */ --ok-deal-1: #22c55e; /* status-done gradient start */ --ok-deal-2: #16a34a; /* status-done gradient end */ --danger: #ef4444; /* --danger везде */ --err: #FF4D76; /* nick-banned, sBadge sold, --err */ --err-2: #ff6b6b; /* некоторые ошибки */ --err-3: #ff4d6e; /* inputErrorBorder */ --err-4: #ff6b85; /* modal warning h3 */ --err-warn: #ff506e; /* warning btn gradient end */ --err-hint: #ff9aa4; /* hint.err */ --err-modal: #ff6b85; /* modal.warning h3 */ --err-pending: #ffc6d1; /* refund section text */ --gold: #ffd166; /* --gold */ --yellow: #ffc107; /* review stars активные */ --yellow-2: #ffd700; /* star hover review */ --yellow-3: #ffc640; /* reviews-list stars active */ --orange: #f97316; /* prod bg (styles.css) */ --off: #6b7280; /* --off (styles.css) */ --violet: #a855f7; /* --violet (styles.css) */ --red-tg: #ff5e5e; /* feeBadgeTG */ /* Фоны статусов */ --danger-bg: #3b0d14; --danger-border: #7f1d1d; --danger-text: #ffdada; --ok-bg: #0f2b1e; --ok-border: #14532d; --ok-text: #dcfce7; --badge-green-bg: #134e4a; --badge-green-tx: #def7ec; --badge-green-bd: #1f6b64; --promo-err-bg: #5b1e27; /* ══════════════════════════════ ГРАНИЦЫ / BORDERS ══════════════════════════════ */ --bd: rgba(255,255,255,.07); --bd-soft: rgba(255,255,255,.06); --line: rgba(255,255,255,.08); /* самая частая граница */ --line-2: rgba(255,255,255,.10); --line-3: rgba(255,255,255,.12); --line-4: rgba(255,255,255,.14); --line-strong: rgba(255,255,255,.22); --line-25: rgba(255,255,255,.25); --bdr: rgba(106,125,255,.18); /* sidebar border */ --bdr-soft: rgba(106,125,255,.12); /* user border-bottom */ --deal-bd: rgba(106,125,255,.25); /* deal card border */ --ring: rgba(139,92,246,.35); --ring-strong: rgba(139,92,246,.55); /* RGB-каналы для использования в rgba() */ --bg-rgb: 9, 11, 20; --brandA-rgb: 112, 176, 255; --brandB-rgb: 255, 103, 199; --acc-rgb: 91, 124, 255; --acc-2-rgb: 63, 162, 255; /* ← добавлен RGB для --acc-2 */ --blue-rgb: 106, 125, 255; --danger-rgb: 239, 68, 68; --ok-rgb: 74, 222, 128; /* ══════════════════════════════ СКРОЛЛБАРЫ / SCROLLBARS ══════════════════════════════ */ --scrollbar-fg: #2b3154; --scrollbar-hover: #3a4272; --scrollbar-img: rgba(255,255,255,.3); --scrollbar-sell: #1c294f; /* ══════════════════════════════ CHIP / BADGE ══════════════════════════════ */ --chip-bg: #1b2a52; --chip-ink: #dbeafe; --badge-bg: #ef4444; /* = --danger */ /* ══════════════════════════════ ТЕНИ / SHADOWS ══════════════════════════════ */ --shadow: 0 12px 28px rgba(0,0,0,.35); --shadow-sm: 0 10px 26px rgba(0,0,0,.25); --shadow-md: 0 20px 60px rgba(0,0,0,.45); --shadow-lg: 0 28px 80px rgba(0,0,0,.55); /* ══════════════════════════════ РАДИУСЫ / RADII ══════════════════════════════ */ --radius: 16px; --radius-sm: 12px; /* ══════════════════════════════ КНОПКИ / BUTTONS (единая система) ══════════════════════════════ */ /* Основная кнопка — используется везде вместо хардкода */ --btn-primary: linear-gradient(135deg, var(--acc), var(--acc-2)); --btn-shadow: 0 10px 30px rgba(var(--acc-rgb), .28); --btn-shadow-lg: 0 14px 38px rgba(var(--acc-rgb), .35); /* Кнопка опасного действия */ --btn-danger: linear-gradient(135deg, #c1292e, var(--err-warn)); --btn-danger-shd: 0 10px 28px rgba(239, 68, 68, .30); /* ══════════════════════════════ КАРТОЧКИ / CARDS (единая система hover) ══════════════════════════════ */ /* Единый hover для gCard — эталон «Популярные товары» главной */ --card-transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .25s ease; --card-hover-transform: translateY(-8px) scale(1.015); --card-hover-border: rgba(99,102,241,.75); --card-hover-shadow: 0 22px 45px rgba(0,0,0,.45), 0 0 0 1px rgba(99,102,241,.25), 0 0 35px rgba(99,102,241,.15); --card-img-transition: transform .45s cubic-bezier(.16,1,.3,1); --card-img-hover-scale: scale(1.08); --linear-gradient-orange: linear-gradient(135deg, #f97316, #ea580c); /* ══════════════════════════════ EDIT MODE (productBase) ══════════════════════════════ */ --edit-panel-border: rgba(91,124,255,.40); --edit-panel-shadow: 0 0 0 1px rgba(91,124,255,.10), 0 0 50px rgba(91,124,255,.08); --edit-input-bg: #060c19; --edit-input-border: rgba(91,124,255,.28); --edit-input-focus-bd: rgba(91,124,255,.82); --edit-input-focus-glow: rgba(91,124,255,.16); --edit-label-ink: #8baaf5; --edit-badge-bg: rgba(91,124,255,.10); --edit-badge-bd: rgba(91,124,255,.28); --edit-badge-ink: #a5b8ff; --edit-bar-bg: rgba(91,124,255,.06); --edit-bar-bd: rgba(91,124,255,.18); --edit-section-accent: rgba(91,124,255,.07); /* ══════════════════════════════ SAFE BOX (productBase) ══════════════════════════════ */ --safe-bg: rgba(8,22,34,.9); --safe-border: rgba(52,211,153,.18); --safe-check-bg: rgba(52,211,153,.10); --safe-check-bd: rgba(52,211,153,.26); --safe-check-ink: #34d399; --safe-title-ink: #a7f3d0; --safe-icon-glow: rgba(52,211,153,.20); /* ══════════════════════════════ STATE BANNERS (productBase) ══════════════════════════════ */ --state-sold-bg: linear-gradient(135deg, rgba(249,115,22,.10) 0%, rgba(234,88,12,.06) 100%); --state-sold-bd: rgba(249,115,22,.32); --state-sold-ink: #fb923c; --state-sold-title: #fed7aa; --state-pending-bg: linear-gradient(135deg, rgba(91,124,255,.10) 0%, rgba(63,162,255,.07) 100%); --state-pending-bd: rgba(91,124,255,.28); --state-pending-title: #c7d5ff; --state-blocked-bg: linear-gradient(135deg, rgba(239,68,68,.12) 0%, rgba(220,38,38,.06) 100%); --state-blocked-bd: rgba(239,68,68,.28); --state-blocked-title: #fecaca; /* ══════════════════════════════ SELLER CARD (productBase) ══════════════════════════════ */ --seller-card-bg: rgba(255,255,255,.03); --seller-card-bd: rgba(255,255,255,.07); --seller-card-hover-bg: rgba(255,255,255,.055); --seller-card-hover-bd: rgba(255,255,255,.12); }