/* icubestore — компьютерная техника, светлая синяя тема (импорт из Claude Design
icubestore.ru.corp.dc.html). Светлый холодный фон, тёмно-синий ink, синий акцент --ac,
navy-градиент для тёмных панелей (хедер-полоса/футер/B2B), Geologica (заголовки/лого),
Golos Text (body/UI), Unbounded (цены/крупные суммы). Шрифты подключены в base.html:
https://fonts.googleapis.com/css2?family=Geologica:wght@500;600;700;800&family=Golos+Text:wght@400;500;600;700;800;900&family=Unbounded:wght@600;700;800&display=swap
Task 2 (Ф2a) — токены + каркас (хедер/футер/кнопки/бейджи/USP). Task 3 — base.html+мега-меню
(механика /:has() частично здесь, частично Jinja-генерируемая в base.html — см.
комментарий у .mega-col--sub). Task 4 — карточка товара (.pcard-*) + перенос точечных
supplement-правил из base.html (иконки/sticky-footer/поиск/футер-ссылки). Главная —Task 5. */
:root {
/* ── Палитра — verbatim из прототипа ── */
--ac: #1E4470;
--ac-dk: #16314F;
--ac-tint: #eaeff5;
--ac-soft: #8aa3c0;
--ac-sh: rgba(30, 68, 112, .45);
--ac2: #2B3A52; /* 2-й акцент: бейджи скидок, избранное/favorite-акцент */
--bg: #eef1f5; /* фон страницы */
--paper: #ffffff; /* карточки, хедер, footer-cell */
--navy-1: #0b1220; /* ink / тёмные панели (utility-бар, footer, hero-тёмные блоки) */
--navy-2: #16314F;
--navy-line: #1c2433; /* разделитель внутри тёмных панелей (footer bottom-bar) */
--navy-grad: linear-gradient(115deg, var(--navy-1) 0%, var(--navy-2) 100%);
--ink: #0b1220;
--ink-2: #3a4254; /* навстрока-ссылки, mega L1-пункты */
--ink-3: #46505f; /* mega L2+ пункты (неактивные) */
--muted: #5b6478;
--muted-2: #5f6b7a; /* вторичный текст на светлом — WCAG AA (5.4:1 на белом) */
--muted-3: #b6bdcb;
--on-dark: #aeb6c6; /* текст на navy (utility-бар, футер) */
--line: #e7ebf3;
--line-2: #eef1f7;
--line-3: #f1f3f8;
--surface-soft: #f3f5fa; /* поиск, hover-фон иконок хедера */
--line-hover: #dbe1ec;
--mega-root-bg: #f7f9fc; /* фон 1-й (корневой) колонки Miller-мега-меню */
--ok: #16B364;
--ok-bg: #e8fff3;
--warn: #E08400;
--warn-bg: #fff4e5;
--star: #FFB400;
--font-display: 'Geologica', system-ui, sans-serif; /* заголовки, лого, крупные метки */
--font-body: 'Golos Text', system-ui, sans-serif; /* body/UI/кнопки/инпуты — базовый */
--font-price: 'Unbounded', system-ui, sans-serif; /* .price/суммы/крупные числа */
/* ── Радиусы (заведены из литералов прототипа) ── */
--r-xs: 6px; /* мелкие тэги/чипы (features-tag на hero) */
--r-sm: 8px; /* бейджи скидок, мелкие иконки-кнопки */
--r-md: 9px; /* базовый UI-радиус: кнопки, инпуты, мега-пункты, картинка товара */
--r-lg: 10px; /* карточки: USP-тайл, товар, бренд, тост, fav-кнопка */
--r-xl: 12px; /* крупные изображения/hero-баннер/модалки/add-to-cart в карточке */
--r-2xl: 14px; /* тёмные банеры (B2B-полоса, product-hero) */
--r-mega: 22px; /* мега-панель каталога: нижние углы (panelStyle прототипа) */
--r-cta: 15px; /* крупные CTA-кнопки (height ≥52px) */
/* ── Тени ── */
--sh-hairline: 0 1px 0 var(--line); /* липкий хедер */
--sh-1: 0 10px 30px -18px rgba(11, 18, 32, .18); /* лёгкий hover-лифт */
--sh-2: 0 14px 30px -14px rgba(11, 18, 32, .2); /* карточка/тайл — средний hover */
--sh-3: 0 16px 34px -14px rgba(11, 18, 32, .2); /* карточка товара — hover (базовый) */
--sh-4: 0 18px 38px -16px rgba(11, 18, 32, .22); /* крупная featured-карточка hover */
--sh-toast: 0 24px 60px -16px rgba(11, 18, 32, .32);
--sh-modal: 0 30px 70px -20px rgba(11, 18, 32, .5);
--sh-cta: 0 12px 26px -8px var(--ac-sh); /* glow крупных CTA-кнопок */
--sh-mega: 0 24px 40px -20px rgba(11, 18, 32, .28); /* панель мега-меню */
/* ── Spacing-шкала ── */
--s-1: 6px;
--s-2: 8px;
--s-3: 10px;
--s-4: 12px;
--s-5: 14px;
--s-6: 16px;
--s-7: 20px;
--s-8: 24px;
--s-9: 28px;
--s-10: 32px;
--s-11: 48px;
--s-12: 56px; /* нижний паддинг главного контента (main) */
/* ── Font-size-шкала ── */
--fs-3xs: 11px; /* счётчики бейджей (корзина/избранное) */
--fs-2xs: 11.5px; /* подписи под иконками хедера, мелкий текст футера */
--fs-xs: 12px; /* бейдж скидки, счётчик в мега-меню, копирайт-строка */
--fs-sm: 12.5px; /* utility-бар, футер-параграф-мелкий */
--fs-base: 13px; /* базовый мелкий текст */
--fs-md: 13.5px; /* футер-ссылки, ссылки utility-бара */
--fs-lg: 14px; /* навстрока, мега-пункты, текст в кнопках/карточке */
--fs-xl: 14.5px; /* вторичные кнопки, mega-mob «все товары» */
--fs-2xl: 15px; /* поиск, кнопка «Каталог», mega-mob пункт */
--fs-3xl: 16px; /* крупная CTA-кнопка */
--fs-4xl: 17px; /* заголовок мега-меню (мобильный drill-down) */
--fs-5xl: 19px; /* .price в карточке товара (Unbounded) */
--fs-6xl: 20px; /* крупные суммы (Unbounded, телефон в футере) */
--fs-7xl: 21px; /* крупные суммы (страница бренда) */
--fs-8xl: 23px; /* лого в футере (Geologica) */
--fs-9xl: 27px; /* лого в хедере (Geologica) */
--fs-hero: 44px; /* H1 hero-баннера главной (Geologica) */
--fs-b2b: 31px; /* H2 B2B-полосы главной (Geologica) */
--fs-section: 26px; /* заголовки секций главной: категории/популярное/бренды/блог (Geologica) */
--wrap: 1280px;
--wrap-pad: 28px;
--wrap-pad-sm: 18px;
--dur: .14s;
--dur-slow: .25s;
--ease: cubic-bezier(.2, .9, .3, 1);
--z-header: 50;
--z-overlay: 40;
--z-mega: 60;
--z-toast: 120;
--z-modal: 80;
}
/* ── Reset ── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body {
margin: 0;
display: flex; /* sticky-footer: .foot{margin-top:auto} требует flex-колонку */
flex-direction: column;
min-height: 100vh;
font-family: var(--font-body);
font-size: var(--fs-lg);
line-height: 1.5;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
input, textarea, button, select { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
::selection { background: var(--ac); color: #fff; }
.hide { display: none !important; } /* переключение видимости без add/remove узла — цель нужна oob-swap'у (#fav-count) */
/* ===================== ГЛАВНЫЙ КОНТЕНТ (main) ===================== */
.main { padding: var(--wrap-pad) 0 var(--s-12); } /* .wrap внутри — единая обёртка контента страницы (как в прототипе) */
/* ── Иконки (Phosphor через _icons.html) — размеры, сама заливка/цвет — по месту использования ── */
.ic { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; flex: none; }
.ic-sm { width: 16px; height: 16px; vertical-align: -3px; flex: none; }
.ic-xs { width: 13px; height: 13px; vertical-align: -2px; flex: none; }
.ic-lg { width: 28px; height: 28px; vertical-align: -6px; flex: none; } /* иконка в cat-tile (главная) */
/* ── Типографика ── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -.4px;
margin: 0;
color: var(--ink);
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--wrap-pad); }
.muted { color: var(--muted); }
.price, .sum {
font-family: var(--font-price);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.price-old {
font-family: var(--font-price);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--muted-3);
text-decoration: line-through;
}
/* ── Утилиты: скроллбар / скелетон / зум-картинка / бейдж-пульс (из прототипа) ── */
.scrl::-webkit-scrollbar { height: 8px; }
.scrl::-webkit-scrollbar-thumb { background: var(--line-hover); border-radius: var(--r-sm); }
@keyframes toastIn { 0% { opacity: 0; transform: translateY(16px) scale(.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastBar { from { width: 100%; } to { width: 0%; } }
@keyframes badgePop { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes shimmer { 0% { background-position: -460px 0; } 100% { background-position: 460px 0; } }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
.skel {
background: var(--line-2);
background-image: linear-gradient(90deg, var(--line-2) 0px, #f6f8fc 180px, var(--line-2) 360px);
background-size: 920px 100%;
animation: shimmer 1.15s linear infinite;
border-radius: var(--r-lg);
}
.pulse-badge { animation: badgePop .5s ease; }
.gz { overflow: hidden; }
.gz .gz-in { width: 100%; height: 100%; position: relative; }
.gz img, .gz .gz-in { transition: transform .25s ease; }
.gz:hover .gz-in { transform: scale(1.32); }
/* ===================== UTILITY-БАР (тёмная строка над хедером) ===================== */
.util-bar { background: var(--navy-1); color: var(--on-dark); font-size: var(--fs-base); }
.util-in { display: flex; align-items: center; gap: var(--s-8); height: 38px; }
.util-city { display: flex; align-items: center; gap: var(--s-1); color: #fff; font-weight: 500; white-space: nowrap; }
.r-hdrlink { cursor: pointer; white-space: nowrap; }
.r-hdrlink:hover { color: #fff; }
.util-r { margin-left: auto; display: flex; align-items: center; gap: var(--s-6); }
.util-r a { display: flex; align-items: center; gap: var(--s-1); color: var(--on-dark); text-decoration: none; white-space: nowrap; }
.util-r a:hover { color: #fff; }
.util-phone { color: #fff; font-weight: 600; white-space: nowrap; }
.util-auth { cursor: pointer; color: #fff; font-weight: 600; white-space: nowrap; }
/* ===================== ХЕДЕР (белая основная строка) ===================== */
.hdr { position: sticky; top: 0; z-index: var(--z-header); background: var(--paper); box-shadow: var(--sh-hairline); }
.hdr-row { display: flex; align-items: center; gap: var(--s-8); padding-top: var(--s-6); padding-bottom: var(--s-6); }
.hdr-logo { display: flex; align-items: center; cursor: pointer; flex: none; font-family: var(--font-display);
font-weight: 800; font-size: var(--fs-9xl); letter-spacing: -1.4px; line-height: 1; color: var(--ink); }
.hdr-logo .accent { color: var(--ac); }
.hdr-cat-btn { flex: none; display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 var(--s-7);
border: none; background: var(--ac); color: #fff; font-weight: 700; font-size: var(--fs-2xl); border-radius: var(--r-md);
cursor: pointer; font-family: var(--font-body); }
.hdr-cat-btn:hover { background: var(--ac-dk); }
.hdr-cat-btn .chev { display: flex; transition: transform var(--dur-slow) ease; }
.hdr-cat-btn.is-open .chev { transform: rotate(180deg); }
/* .r-catlabel — подпись в кнопке «Каталог», скрывается на ≤520 (media-блок ниже) */
.hdr-search { flex: 1; display: flex; align-items: center; gap: var(--s-4); height: 50px; background: var(--surface-soft);
border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 0 var(--s-6); color: var(--muted-2); cursor: text;
font-size: var(--fs-2xl); }
/* .hdr-search в прототипе — decorative div; у нас настоящая