/* ============================================================================
ЧистоШава — ТЕМА 2.0 (rebrand) · theme20.css
Подключать ПОСЛЕ tw.css на каждой странице, с cache-buster ?v=20260719:
Задача файла: перекрыть старую тёмно-жёлто-геройскую тему тёплой кремовой
с ярко-оранжевым акцентом. tw.css — СОБРАННЫЙ tailwind, новые классы не
появятся сами → перекрываем реальные селекторы + !important (бьёт inline).
Референс-эталон темы: /chistoshava-rebrand-2026/stub/index.html
---------------------------------------------------------------------------
ПАТТЕРН ДЛЯ ДРУГИХ АГЕНТОВ (важно):
1) Подключить этот файл после tw.css (см. выше).
2) На тема сама поставит кремовый фон (!important бьёт inline bg).
3) Шапку пометить классом cs-topbar20 → станет кремовой (см. секцию HEADER).
Тексты/иконки внутри шапки, заданные inline старыми цветами (#fff,#E6E6E8,
#9A9AA0,#1A1A1F,#FFC928) — правьте inline на токены темы (ink/orange).
4) Жёлтый (#FFC928/#FFC400/#FFB323/#F5C518) в inline — заменить на #F05A22
(акцент) либо #E0A43B (мягкий янтарь для фоновых кружков). CSS не может
переопределить одно свойство внутри multi-prop inline — правьте руками.
5) Логотип — текстовый вордмарк: #ЧИСТОШАВА
============================================================================ */
/* ── Токены ──────────────────────────────────────────────────────────────── */
:root{
--cs-cream: #F4ECDD; /* фон страниц */
--cs-cream-panel:#EFE4CF; /* панели/пилюли на кремовом */
--cs-cream-card: #FBF6EC; /* карточки (мягче белого) */
--cs-orange: #F05A22; /* основной акцент */
--cs-orange-deep:#EC4E1C; /* плашки/кнопки/hover */
--cs-ink: #17161A; /* текст near-black */
--cs-ink-soft: #57514A; /* вторичный текст */
--cs-amber: #E0A43B; /* тёплый янтарь (декор, не жёлтый) */
--cs-line: #DFCFAF; /* обводка на кремовом */
--cs-line-soft: #E7DBC2; /* мягкая обводка карточек */
--cs-white: #FFFFFF;
--cs-green: #1F7A2E; /* статус «открыто/успех» — оставляем */
--cs-green-bg: #E7F3E4;
}
/* ── База: фон страницы + текст ──────────────────────────────────────────── */
/* !important бьёт inline body background:#F5F5F7 / #050505 на любой странице */
html, body{
background-color: var(--cs-cream) !important;
color: var(--cs-ink);
}
body{
/* лёгкая бумажная текстура (как в эталоне) */
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
/* класс-body из старой темы text-[#050505] — держим ink */
body.text-\[\#050505\]{ color: var(--cs-ink); }
::selection{ background: var(--cs-orange); color:#fff; }
/* Sticky-бар категорий (inline background:#F5F5F7) → кремовый */
#catBarSticky{ background: var(--cs-cream) !important; }
/* ── HEADER (шапка) — кремовая/бумажная, тёмную #050505 гасим ───────────────
Помечать */
.cs-topbar20{
background: var(--cs-cream) !important;
color: var(--cs-ink) !important;
border-bottom: 1px solid var(--cs-line);
box-shadow: 0 2px 14px rgba(23,22,26,.05);
}
.cs-topbar20 a{ color: var(--cs-ink); }
/* Текстовый вордмарк логотипа */
.cs-logo20{
font-family: 'Montserrat','Gilroy','Manrope',system-ui,sans-serif;
font-weight: 900;
letter-spacing: -.02em;
color: var(--cs-ink);
white-space: nowrap;
line-height: 1;
font-size: clamp(20px, 3.4vw, 26px);
}
.cs-logo20 .hash{ color: var(--cs-orange); }
/* На тёмном футере — светлый вариант */
.cs-logo20--onDark{ color: #F4ECDD; }
/* ── Кнопки-акценты (оранжевые плашки, белый текст) ─────────────────────────
Общий помощник, если агент хочет чистую кнопку 2.0 */
.cs-btn20{
display:inline-flex; align-items:center; gap:10px;
font-weight:800; border-radius:14px; padding:14px 24px; line-height:1;
background: var(--cs-orange); color:#fff !important;
box-shadow: 0 10px 24px rgba(240,90,34,.28);
transition: transform .15s, box-shadow .15s, background .15s;
}
.cs-btn20:hover{ background: var(--cs-orange-deep); transform: translateY(-2px); }
.cs-btn20--ghost{
background: transparent; color: var(--cs-ink) !important;
border: 2px solid var(--cs-line); box-shadow:none;
}
.cs-btn20--ghost:hover{ border-color: var(--cs-orange); color: var(--cs-orange-deep) !important; }
/* ── Карточки товара в каталоге — тёплая обводка на кремовом ───────────────── */
#catalog .product-card, #catalog [data-prod]{
background: var(--cs-white) !important;
border: 1px solid var(--cs-line-soft) !important;
border-radius: 20px !important;
}
#catalog .product-card:hover{ box-shadow: 0 14px 32px rgba(23,22,26,.08) !important; }
/* Заголовки категорий каталога — ink */
#catalog [id^="cat-"] > h2, #catalog [id^="cat-"] > h3{ color: var(--cs-ink) !important; }
/* ── Категории-pills (активная = оранжевая, белый текст) ────────────────────
Перебивает inline background:#FFC928;color:#050505 из index style-блока */
#catsSidebar > button.is-active,
#catsSidebar > button[data-active="true"]{
background: var(--cs-orange) !important;
border-color: var(--cs-orange) !important;
color:#fff !important;
box-shadow: 0 2px 10px rgba(240,90,34,.40) !important;
}
#catsSidebar > button:hover{ border-color: var(--cs-orange) !important; }
#catsMobile > button.is-active,
#catsMobile > button[data-active="true"]{
background: var(--cs-orange) !important;
border-color: var(--cs-orange) !important;
color:#fff !important;
}
/* Мобильный бар категорий (inline dark #0A0A0F) → кремовая панель */
#catsMobileWrap{ background: var(--cs-cream-panel) !important; border-color: var(--cs-line) !important; }
#catsMobile > button{ background: var(--cs-white) !important; border:1px solid var(--cs-line) !important; color: var(--cs-ink) !important; }
/* ── Скроллбары брендовые (были красноватые) ───────────────────────────────── */
.nice-scroll::-webkit-scrollbar-thumb{ background: rgba(240,90,34,.70); }
/* ── back-to-top / плавающие акценты (inline #FFC928) ──────────────────────── */
#backToTopBtn{ background: var(--cs-orange) !important; color:#fff !important; }
/* ── cs_header.js — МОБИЛЬНЫЙ ДРАВЕР инжектит жёлтый #FFC928 хардкодом ────────
JS-рендер: правится в assets/js/cs_header.js (см. RESTYLE-NOTES). Пока гасим
через !important по инжектируемым id/селекторам. */
#csHamburgerBtn{
background: var(--cs-orange) !important;
border-color: var(--cs-orange) !important;
color:#fff !important;
box-shadow: 0 4px 12px rgba(240,90,34,.35) !important;
}
#csMobileDrawer #csDrawerProfile[data-auth="1"]{
background: linear-gradient(135deg, var(--cs-orange) 0%, var(--cs-orange-deep) 100%) !important;
color:#fff !important;
}
#csMobileDrawer #csDrawerProfile .csdp-avatar,
#csMobileDrawer #csDrawerProfile[data-auth="1"] .csdp-avatar{ background: var(--cs-ink) !important; color:#fff !important; }
#csMobileDrawer nav a .csmd-icon{ color: var(--cs-orange) !important; }
#csMobileDrawer .csmd-foot a.csmd-tel{ background: var(--cs-orange) !important; color:#fff !important; }
/* ── Tailwind arbitrary-классы из старой темы, если встретятся ──────────────── */
.bg-\[\#FFC928\]{ background-color: var(--cs-orange) !important; }
.text-\[\#FFC928\]{ color: var(--cs-orange) !important; }
.border-\[\#FFC928\]{ border-color: var(--cs-orange) !important; }
.bg-\[\#050505\]{ background-color: var(--cs-ink) !important; }
.bg-\[\#0F0F12\], .bg-\[\#0B0B0E\], .bg-\[\#050505\]{ background-color: var(--cs-ink) !important; }
/* ── Футер: остаётся тёмным (ink) как в эталоне — только гасим жёлтые акценты ─ */
footer .text-\[\#FFC928\], footer [style*="color:#FFC928"]{ color: var(--cs-amber) !important; }
/* ── Бренд-палитра ЧШ 2.0 ФИНАЛ (утв. Ильёй 19.07.2026, по баннеру Прусской) ──
Красно-оранжевый (основной акцент): #F05A22 / тёмный #EC4E1C
Фирменный жёлтый (второй акцент — бейджи, метки, лого): #FFC928
Чёрный (текст/заголовки): #17161A
Фон: кремовый #F4ECDD · Янтарь (поддержка): #E0A43B
Жёлтый — ТОЧЕЧНО (бейджи/метки/лого), не фоном и не в навигации. */
:root{ --cs-orange:#F05A22; --cs-orange-deep:#EC4E1C; --cs-yellow:#FFC928; --cs-ink:#17161A; --cs-cream:#F4ECDD; --cs-amber:#E0A43B; }
/* ── Hero 2.0: двухколоночная композиция с продуктовым фото (impeccable, 19.07) ── */
.hero20-grid{ display:grid; gap:32px; align-items:center; }
@media (min-width:1024px){ .hero20-grid{ grid-template-columns: minmax(0,1fr) 430px; gap:48px; } }
.hero20-visual{ display:none; position:relative; }
@media (min-width:1024px){ .hero20-visual{ display:block; } }
.hero20-photo{
width:100%; aspect-ratio:1/1; border-radius:50%; object-fit:cover;
border:10px solid #FBF6EC;
box-shadow: 0 24px 60px rgba(23,22,26,.14), 0 0 0 1px #DFCFAF;
}
.hero20-badge{
position:absolute; font-weight:800; line-height:1; border-radius:14px;
padding:12px 16px; transform:rotate(-6deg);
font-family: inherit;
}
.hero20-badge--price{
right:-6px; bottom:34px; background:#EC4E1C; color:#fff;
font-size:26px; padding:14px 18px; box-shadow:0 10px 26px rgba(236,78,28,.35); transform:rotate(4deg);
}
.hero20-badge--price small{ display:block; font-size:18px; font-weight:900; text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px; }
.hero20-badge--coal{
left:-4px; top:26px; background:#FFC928; color:#17161A;
font-size:14px; text-transform:uppercase; letter-spacing:.04em;
border-radius: 12px 14px 12px 13px;
box-shadow:0 8px 20px rgba(23,22,26,.12);
}
@media (prefers-reduced-motion: no-preference){
.hero20-visual{ animation: hero20-in .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes hero20-in{ from{ opacity:0; transform:translateY(14px) scale(.98);} to{ opacity:1; transform:none;} }
}
/* Мобильная шапка ≤520px: селектор точки не должен резаться краем (QA v7 P0) */
@media (max-width:520px){
#pointSelectorBtn{ max-width:132px !important; }
#pointSelectorLabel{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
header .cs-topbar20 { overflow:visible; }
}
/* Лого: компактный стек на мобилке, однострочник на десктопе (фикс переполнения шапки 390px) */
.logo20-mob{ display:block; height:32px; width:auto; }
.logo20-desk{ display:none; height:34px; width:auto; }
@media (min-width:768px){ .logo20-mob{ display:none; } .logo20-desk{ display:block; } }
/* ── Оранжевая шапка (Илья, 19.07 вечер): красно-оранжевый градиент, светлый лого ── */
header.cs-topbar20{
background: linear-gradient(180deg, #F05A22 0%, #EC4E1C 100%) !important;
color: #FFFFFF !important;
border-bottom: none !important;
box-shadow: 0 8px 24px rgba(236,78,28,.28);
}
.cs-topbar20 nav a:hover{ background: rgba(255,255,255,.16) !important; }
/* корзина и бургер: белые с оранжевым текстом (на оранжевом фоне) */
#openCartBtn{ background:#FFFFFF !important; color:#EC4E1C !important; border-color:#FFFFFF !important; }
#csHamburgerBtn{ background:#FFFFFF !important; border-color:#FFFFFF !important; color:#EC4E1C !important; box-shadow:0 4px 12px rgba(23,22,26,.15) !important; }
/* плашка точки на оранжевом: чуть плотнее тень, без грязной рамки */
#pointSelectorBtn{ border-color: rgba(255,255,255,.55) !important; box-shadow: 0 4px 14px rgba(23,22,26,.12); }