/* ========================================================================== WebPack.kz — 2026 redesign Header / top nav / banner / catalog tiles / about / popular products / advantages / news / footer. BEM-ish naming, prefix "wp-" to avoid collisions with legacy style.m.css (legacy CDN CSS is still loaded on the site for catalog/product/cart pages that are out of scope for this pass — see report). "Заказная продукция" (custom-order, modules/page/templates_2025/custom_*.tpl) styles used to live at the end of this file; split out to style2026-custom.css (loaded right after this file in main.tpl) so the two areas can be worked on without one edit colliding with the other. :root custom properties defined below still apply there — CSS variables resolve against the document, not per-file, so load order between the two stylesheets doesn't matter. ========================================================================== */ :root{ --wp-blue:#2E7FCB; --wp-blue-dark:#1E63A3; --wp-blue-grad-top:#0088CE; --wp-blue-grad-bottom:#0177BF; --wp-btn-grad-a:#4FA3E8; --wp-btn-grad-b:#2E7FCB; --wp-ink:#1B1D22; --wp-ink-soft:#2B2B2E; --wp-text:#5C6270; --wp-text-muted:#6B7280; --wp-text-invert-muted:#9BA1AC; --wp-border:#E7EBEF; --wp-border-hover:#C7CDD6; --wp-bg-soft:#F6F7F8; --wp-bg-panel:#F7F8FA; --wp-green:#1E7A46; --wp-amber:#A85F09; --wp-red:#C0392B; --wp-pink:#E0537C; --wp-pink-dark:#C23D63; --wp-dark:#1B1D22; --wp-dark-panel:#2B2E36; --wp-radius:6px; --wp-radius-lg:12px; --wp-maxw:1424px; /* 1360px content width + 32px horizontal padding on each side (border-box) */ --wp-shadow-card:0 6px 14px rgba(27,29,34,.08); --wp-shadow-header:0 2px 10px rgba(27,29,34,.06); /* Type scale — every font-size in this file now resolves through one of these (available to style2026-custom.css too, since :root vars resolve against the document regardless of which stylesheet declared them). Previously every declaration hardcoded its own px value and the scale had drifted to 18 distinct sizes including several one-off values a couple px apart from their neighbors (12.5, 17, 19, 21, 23, 26) with no clear reason for the difference; those were folded into the nearest step below when this was introduced. */ --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-22:22px; --fs-28:28px; --fs-32:32px; } /* ---------- base ---------- */ /* Legacy style.m.css used to zero out the browser default margin site-wide; that reset was lost when it was removed, leaving the UA-default 8px edge gap. overflow-x is `clip`, not `hidden` — `hidden` makes html/body scroll containers of their own, which breaks `position:sticky` for every descendant sticky element (left sidebar, header) instead of letting them stick to the real viewport scroll. `clip` still stops horizontal overflow without creating that scroll container. */ /* Reserves the vertical scrollbar's width up front, even on pages that don't need to scroll yet — otherwise a page that's shorter than the viewport on first paint (no scrollbar) and then grows taller as images/content load (scrollbar appears) loses ~15-17px of layout width mid-load. Anything with a width breakpoint sitting near that margin (e.g. the .wp-popular carousel-vs-grid @media query) can flip states right as the page finishes loading, which looks like an unwanted layout jump. */ /* scrollbar-gutter only has an effect when overflow is NOT visible on that axis — overflow-y was left at its default (visible) here, so the previous attempt at this rule did nothing. overflow-y:auto is what the browser was already doing implicitly for the page scrollbar; spelling it out is what makes scrollbar-gutter actually take effect. */ html{ scrollbar-gutter:stable; overflow-y:auto; } html, body{ margin:0; padding:0; overflow-x:clip; } .hide{ display:none !important; } .wp-root, .wp-root *{ box-sizing:border-box; } .wp-root{ font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; font-weight:500; -webkit-font-smoothing:antialiased; color:var(--wp-ink); background:#fff; } .wp-root a{ color:var(--wp-blue); text-decoration:none; } .wp-root a:hover{ color:var(--wp-blue-dark); } .wp-root img{ max-width:100%; } /* Generic .breadcrumbs-box fallback — .wp-product/.wp-catalog-page/.wp-basket each carry their own near-identical copy of this (added separately, page by page, over the course of this redesign); pages with neither of those page-scope classes (e.g. the /catalog/ index, catalog_page_category.tpl) had no breadcrumb styling at all and fell back to the browser's plain numbered
    . Placed early in the file, right after the base .wp-root rules, so the later page-specific copies above (same specificity, but declared further down) still win there via source order — this only fills the gap where none of them apply. */ .wp-root .breadcrumbs-box .menu{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; list-style:none; margin:0 0 16px; padding:0; font-size:var(--fs-13); color:var(--wp-text-muted); } .wp-root .breadcrumbs-box li{ display:flex; align-items:center; gap:8px; } .wp-root .breadcrumbs-box li:not(:last-child)::after{ content:"\203A"; color:var(--wp-border-hover); } .wp-root .breadcrumbs-box a{ color:var(--wp-text-muted); font-weight:500; transition:color .2s ease; } .wp-root .breadcrumbs-box a:hover{ color:var(--wp-blue); } .wp-root .breadcrumbs-box li:last-child{ color:var(--wp-ink); font-weight:600; } /* /catalog/ index (catalog_page.tpl/catalog_page_category.tpl) has no .wp-content-shell — that's what gives the other catalog/product pages their 24px top margin before the sticky header — so its breadcrumb row sat flush against the nav bar. */ .wp-catalog-index .breadcrumbs-box{ margin-top:24px; } #left-catalog-head{ background:var(--wp-bg-panel); padding-bottom:40px; } /* padding, not just background — .wp-calc's own margin:24px auto (search_items.tpl) has nothing to stop it collapsing through this parent (no padding/border of its own), pushing the whole box down and exposing the white body background above it as a stripe. */ #left-catalog-calc{ background:var(--wp-bg-panel); padding:1px 0 32px; } .wp-catalog-index .title-box.mb-small{ margin-bottom:20px; } /* .wp-catalog's own background/margin-top/padding (defined further down, for its usual homepage role as its own standalone section) would otherwise double up with #left-catalog-head's — here it's nested inside that section purely to reuse the ".wp-catalog .item-wrap.js-tab-block" active-panel rule, not for its box styling. The #id in this selector outranks the plain .wp-catalog rule regardless of source order, so this is safe to declare anywhere in the file. */ #left-catalog-head .wp-catalog{ background:none; margin-top:0; padding:0; } .wp-container{ max-width:var(--wp-maxw); margin:0 auto; padding:0 32px; } .wp-eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .wp-eyebrow__bar{ width:24px; height:2px; background:var(--wp-blue); flex:none; } .wp-eyebrow__text{ font-size:var(--fs-13); font-weight:700; letter-spacing:.08em; color:var(--wp-text-muted); text-transform:uppercase; } .wp-h2{ margin:0; font-size:var(--fs-28); font-weight:700; color:var(--wp-ink); } .wp-root .wp-h2 a{ color:inherit; text-decoration:none; transition:color .2s ease; } .wp-root .wp-h2 a:hover{ color:var(--wp-blue); } .wp-btn-grad{ display:inline-block; padding:12px 26px; border-radius:var(--wp-radius); background:linear-gradient(135deg,var(--wp-btn-grad-a),var(--wp-btn-grad-b)); color:#fff; font-size:var(--fs-14); font-weight:700; transition:filter .3s ease; border:none; cursor:pointer; } .wp-btn-grad:hover{ filter:brightness(1.12) saturate(1.1); color:#fff; } /* ========================================================================== TOP BAR ========================================================================== */ .wp-topbar{ background:var(--wp-bg-soft); border-bottom:1px solid var(--wp-border); } .wp-topbar__row{ max-width:var(--wp-maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; row-gap:6px; padding:9px 32px; } .wp-topbar__links{ display:flex; align-items:center; gap:22px; font-size:var(--fs-13); font-weight:600; color:var(--wp-text); flex-wrap:wrap; } .wp-topbar__links a{ color:var(--wp-text); transition:color .2s ease; } .wp-topbar__links a:hover{ color:var(--wp-blue); } .wp-topbar__links a.active{ color:var(--wp-blue); font-weight:700; } .wp-topbar__right{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .wp-topbar__fav.wp-topbar__fav{ display:flex; align-items:center; gap:5px; color:var(--wp-text); font-size:var(--fs-13); font-weight:600; } .wp-topbar__fav svg{ flex:none; } .wp-topbar__lk.wp-topbar__lk{ color:var(--wp-text); font-size:var(--fs-13); font-weight:600; transition:color .2s ease; } .wp-topbar__lk:hover{ color:var(--wp-blue); } .wp-topbar__sep{ width:1px; height:16px; background:var(--wp-border); } .wp-flag{ width:22px; height:15px; border-radius:2px; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; flex:none; } .wp-flag span{ flex:1; } .wp-lang{ display:flex; align-items:center; gap:8px; } .wp-lang a{ display:flex; opacity:.55; transition:opacity .2s ease; } .wp-lang a.is-active{ opacity:1; } .wp-lang a:hover{ opacity:1; } /* ========================================================================== STICKY HEADER ========================================================================== */ /* .wp-topbar should scroll away while .wp-header (which already wraps both the logo/search/ phone/cart row AND