/* ========================================================================== WebPack.kz — 2026 redesign — "Заказная продукция" (custom-order) styles. Split out of style2026.css so the two areas can be edited independently (loaded right after style2026.css in main.tpl; relies on that file's :root custom properties — --wp-blue, --wp-bg-panel, --wp-border, etc. — which apply here too since CSS variables resolve against the document, not per-file). Everything below is scoped under .wp-page-content. "Заказная продукция" (custom order) pages — modules/page/templates_2025/ custom_*.tpl, rendered inside page.tpl's generic {else} branch, which now carries .wp-root.wp-page-content (previously carried neither, so every one of these pages rendered as an unstyled stream of text/links). Scoped under .wp-page-content rather than bare .wp-root since some class names here (.info-wrap, .item-tile-info-panel) are common enough to risk colliding with other .wp-root-scoped pages if left unscoped. ========================================================================== */ .wp-page-content{ } /* Top-of-page grey panel for custom-order index pages (custom_pack.tpl etc), matching the homepage's full-bleed .wp-catalog section look — not just a contained rounded card. These pieces sit deep inside page.tpl's own max-width-capped, padded [role="main"] column, so getting a true edge-to-edge background needs the standard "break out of the parent container" trick (100vw + negative margin pulls it to the viewport edges) on each piece, with an inner .wp-container (same class the homepage's own .wp-catalog uses) putting the actual content back at the site's normal max-width/padding. Built from 3 separately-owned pieces that share one background colour and sit with zero gap so they read as one continuous band: the breadcrumb (in the shared page.tpl wrapper — .wp-page-custom-breadcrumb), the eyebrow+h1 header (.wp-catalog__head), and the tile grid (.wp-page-custom-grid-panel, wrapper around the same .wp-catalog__grid/.wp-catalog__tile markup the homepage catalog section uses, so the tiles render pixel-identical). The request-quote form further down stays on the plain white page background, untouched. */ .wp-page-content .breadcrumbs-box.wp-page-custom-breadcrumb, .wp-page-content .wp-catalog__head, .wp-page-content .wp-page-custom-grid-panel{ background:var(--wp-bg-panel); width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; box-sizing:border-box; } /* Two gaps otherwise show the white .content-full-wrap behind this grey panel: (1) that wrapper's own generic padding-top:48px (.wp-root [role="main"].section-outer-box, shared by every page.tpl page — not something to change site-wide) sits above the breadcrumb, so pull the panel up by that exact amount to cover it; (2) the breadcrumb .menu's own margin-bottom:16px collapses straight through this box (no padding-bottom to contain it) and shows as a sliver below — killed directly on the .menu instead. */ .wp-page-content .breadcrumbs-box.wp-page-custom-breadcrumb{ padding-top:32px; padding-bottom:16px; margin-top:-48px; margin-bottom:0; } .wp-page-content .breadcrumbs-box.wp-page-custom-breadcrumb .menu{ margin-bottom:0; } .wp-page-content .wp-catalog__head{ padding:0; margin-top:0; margin-bottom:0; } /* h1 no longer has a .wp-eyebrow sibling above it here (badge removed from custom_pack.tpl), so the ".wp-eyebrow + .h1-title{margin-top:0}" rule no longer matches and the generic .h1-title{margin-top:32px} would double up with the breadcrumb's own margin-bottom:16px above it (same doubled-gap issue explained where that generic rule is declared). */ .wp-page-content .wp-catalog__head .h1-title{ margin-top:0; } /* .wp-catalog__head is display:flex (for the title+tabs layout other pages use it for); as a flex item .wp-container's own max-width alone doesn't make it grow to fill — it shrinks to its title text's content width instead, so margin:auto centered a ~270px box instead of the full 1424px column. width:100% forces it to fill the flex row first, then max-width caps it exactly like it does as a normal block child elsewhere (e.g. inside .wp-page-custom-grid-panel, which isn't flex and never had this problem). */ .wp-page-content .wp-catalog__head > .wp-container{ width:100%; } .wp-page-content .wp-page-custom-grid-panel{ padding-bottom:20px; margin-top:0; margin-bottom:20px; } /* custom_pack.tpl currently has exactly 10 tiles, so the last row is incomplete and .wp-catalog__grid's 1fr columns leave it flush left with dead space on the right ("Пакеты майка"/"Мешки полиэтиленовые" at 4-col; just "Пакеты майка" alone at 3-col) — center that leftover row instead. Selectors are pinned to nth-child(9)/(10) of 10 total, so if tiles are ever added/removed this simply stops matching rather than mis-centering the wrong row. Not needed at the 2-col breakpoint (10 tiles already fill it evenly). */ .wp-page-content .wp-page-custom-grid-panel .wp-catalog__grid .wp-catalog__tile:nth-child(9):nth-last-child(2){ grid-column:2 / 3; } .wp-page-content .wp-page-custom-grid-panel .wp-catalog__grid .wp-catalog__tile:nth-child(10):nth-last-child(1){ grid-column:3 / 4; } @media (max-width:1200px) and (min-width:901px){ .wp-page-content .wp-page-custom-grid-panel .wp-catalog__grid .wp-catalog__tile:nth-child(9):nth-last-child(2){ grid-column:auto; } .wp-page-content .wp-page-custom-grid-panel .wp-catalog__grid .wp-catalog__tile:nth-child(10):nth-last-child(1){ grid-column:2 / 3; } } @media (max-width:900px){ .wp-page-content .wp-page-custom-grid-panel .wp-catalog__grid .wp-catalog__tile:nth-child(9):nth-last-child(2), .wp-page-content .wp-page-custom-grid-panel .wp-catalog__grid .wp-catalog__tile:nth-child(10):nth-last-child(1){ grid-column:auto; } } /* hero "свяжитесь с нами" panel (top of page, .type-second) and the closing "Есть вопросы?" panel (bottom, no modifier) — both share this markup. */ .wp-page-content .info-contacts-panel-box{ background:var(--wp-bg-panel); border-radius:var(--wp-radius-lg); padding:32px; margin:24px 0 32px; } /* the hero variant (.type-second, holds the real page

on rebuilt product pages) sits directly on the white page background per the reference design — no card/panel look; the plain (bottom "Есть вопросы?") variant keeps the grey panel treatment above. */ .wp-page-content .info-contacts-panel-box.type-second{ background:none; border-radius:0; padding:0; } .wp-page-content .info-contacts-panel-box .box-inner-wrap{ display:flex; flex-wrap:wrap; gap:32px; } .wp-page-content .info-contacts-panel-box .title-inner-wrap{ flex:1 1 420px; min-width:280px; } .wp-page-content .info-contacts-panel-box .photo-inner-wrap{ flex:1 1 320px; min-width:240px; } .wp-page-content .info-contacts-panel-box .photo-inner-wrap .elm-photo{ border-radius:var(--wp-radius); overflow:hidden; height:100%; min-height:220px; } .wp-page-content .info-contacts-panel-box .photo-inner-wrap img{ width:100%; height:100%; object-fit:cover; display:block; } /* hero (.type-second) photo — roughly a third of the default flexed-to-fill size, fixed rather than flex:1 1 320px so it doesn't keep growing to match the text column's height. */ .wp-page-content .info-contacts-panel-box.type-second .photo-inner-wrap{ flex:0 0 370px; min-width:0; align-self:flex-start; } .wp-page-content .info-contacts-panel-box.type-second .photo-inner-wrap .elm-photo{ height:395px; min-height:0; background:var(--wp-bg-panel); } /* contain (not cover) so the photo is never cropped — the panel behind it fills any letterboxing gap left/right or top/bottom of the image's own aspect ratio. */ .wp-page-content .info-contacts-panel-box.type-second .photo-inner-wrap img{ object-fit:contain; } .wp-page-content .info-contacts-panel-box h1.section-title, .wp-page-content .info-contacts-panel-box h3.section-title{ margin-top:0; } .wp-page-content .info-contacts-panel-box p{ margin:0 0 20px; } .wp-page-content .info-inner-wrap{ display:flex; align-items:center; gap:14px; margin-bottom:14px; } .wp-page-content .elm-ico.ico-attention{ flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; box-shadow:var(--wp-shadow-card); } .wp-page-content .elm-ico.ico-attention img{ width:20px; height:20px; } .wp-page-content .info-title{ font-size:13px; color:var(--wp-text-muted); } .wp-page-content .info-value a, .wp-page-content .info-value .link-main{ font-size:16px; font-weight:700; color:var(--wp-ink); } .wp-page-content .info-value a:hover{ color:var(--wp-blue); } .wp-page-content .messages-inner-wrap{ display:flex; align-items:center; gap:14px; margin-bottom:20px; } .wp-page-content .btn-action-ico.button-soc-att{ flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; } .wp-page-content .btn-action-ico.button-soc-att img{ width:100%; height:100%; } .wp-page-content .messages-title{ font-size:14px; font-weight:600; color:var(--wp-ink); line-height:1.4; } .wp-page-content .button-inner-wrap .btn{ display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 28px; border:none; border-radius:10px; background:linear-gradient(135deg,var(--wp-btn-grad-a),var(--wp-btn-grad-b)); color:#fff; font-weight:700; font-size:15px; cursor:pointer; text-decoration:none; } .wp-page-content .button-inner-wrap .btn:hover{ filter:brightness(1.12) saturate(1.1); color:#fff; } /* 4-up "use cases" strip inside the hero panel (shared by ~19 custom-order pages, hence a modifier rather than changing the default: .items-grid-2 gives a 2x2 layout instead of the default single row of 4, used where the page only has 4 use-case items and the hero column is narrower — e.g. custom_vakumnie_packety.tpl). */ .wp-page-content .items-inner-wrap{ margin-top:24px; } .wp-page-content .items-inner-wrap .items-wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .wp-page-content .items-inner-wrap .items-wrap.items-grid-2{ grid-template-columns:repeat(2,1fr); } /* ".tile-bg" alone = the compact mini-tile variant used by the ~19 other custom-order pages' use-case grids. ".tile-bg.tile-main" together = advantage.tpl's own "Преимущества работы с нашей компанией" cards (homepage-style, full size) — excluded here with :not(.tile-main) so this compact override doesn't also shrink those on every page that includes advantage.tpl. */ .wp-page-content .item-tile-info-ico.tile-bg:not(.tile-main){ display:flex; flex-direction:column; align-items:flex-start; gap:10px; background:#fff; border-radius:var(--wp-radius); padding:16px; height:100%; box-sizing:border-box; } .wp-page-content .item-tile-info-ico.tile-bg:not(.tile-main) .tile-ico{ width:32px; height:32px; } .wp-page-content .item-tile-info-ico.tile-bg:not(.tile-main) .tile-ico img{ width:100%; height:100%; object-fit:contain; } .wp-page-content .item-tile-info-ico.tile-bg:not(.tile-main) .tile-title{ font-size:13px; font-weight:600; color:var(--wp-ink); line-height:1.4; } /* two-column info panels ("о товаре" + "минимальный тираж") */ .wp-page-content .tiles-box.items-info-panels .items-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:32px 0; } .wp-page-content .item-tile-info-panel{ background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius-lg); padding:28px; height:100%; box-sizing:border-box; } .wp-page-content .item-tile-info-panel.tile-no-border{ border:none; background:none; padding:0; } .wp-page-content .item-tile-info-panel.tile-bg{ background:var(--wp-bg-panel); border:none; } /* .type-bleed modifier — full-bleed grey band edge-to-edge (not just a tinted card), for the one page that specifically asked for it (custom_vakumnie_packety.tpl); the plain ".items-info-panels" class is shared by ~19 other custom-order pages so this needed its own modifier rather than changing the shared rules above. The left ("о товаре") side sits directly on the grey band with no card of its own (.tile-no-border); the right ("минимальный тираж") side keeps the plain white bordered card so it stands out against the grey. */ .wp-page-content .tiles-box.items-info-panels.type-bleed{ background:var(--wp-bg-panel); width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; padding:40px 0; box-sizing:border-box; } .wp-page-content .tiles-box.items-info-panels.type-bleed .items-wrap{ max-width:var(--wp-maxw); margin:0 auto; padding:0 32px; box-sizing:border-box; } .wp-page-content .item-tile-info-panel .tile-title{ font-weight:700; color:var(--wp-ink); margin-bottom:12px; } .wp-page-content .item-tile-info-panel .tile-title.tile-title-small{ font-size:15px; margin-bottom:10px; } /* ".wp-root .tiles-box .tile-title{font-size:15px}" (3 classes) outranks the generic ".wp-root .h3-title{font-size:18px}" (2 classes) purely on selector count whenever a ".tile-title.h3-title" heading (e.g. "Минимальный тираж") sits inside a .tiles-box ancestor — this restores the intended 18px h3 size for that combination specifically. */ .wp-page-content .item-tile-info-panel .tile-title.h3-title{ font-size:18px; } /* first heading in the (now cardless, .tile-no-border) left "о товаре" column — zero the generic h2-title's 32px margin-top so it lines up with the white card's own 28px padding on the right instead of starting visibly lower. */ .wp-page-content .item-tile-info-panel.tile-no-border > .h2-title:first-child{ margin-top:0; } .wp-page-content .item-tile-info-panel > .h2-title:first-child{ margin-top:0; } .wp-page-content .item-tile-info-panel .list-dots{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px; } .wp-page-content .item-tile-info-panel .list-dots li{ position:relative; padding-left:16px; font-size:14px; color:var(--wp-text); line-height:1.55; } .wp-page-content .item-tile-info-panel .list-dots li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--wp-blue); } .wp-page-content .item-tile-info-panel p{ margin:0 0 12px; } .wp-page-content .item-tile-info-panel .asterix{ color:var(--wp-red); } .wp-page-content .item-tile-info-panel .tile-actions-wrap{ display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; } .wp-page-content .item-tile-info-panel .tile-submit .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 22px; border:none; border-radius:10px; background:linear-gradient(135deg,var(--wp-btn-grad-a),var(--wp-btn-grad-b)); color:#fff; font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; } .wp-page-content .item-tile-info-panel .tile-submit .btn:hover{ filter:brightness(1.12) saturate(1.1); color:#fff; } .wp-page-content .item-tile-info-panel .tile-actions .tile-button{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; } .wp-page-content .item-tile-info-panel .tile-actions .tile-button img{ width:100%; height:100%; } /* "Преимущества" 3-col list + delivery message tile */ .wp-page-content .item-wrap.wrap-full{ grid-column:1/-1; } .wp-page-content .list-rows{ list-style:none; margin:0; padding:0; display:grid; gap:12px; } .wp-page-content .list-rows-3{ grid-template-columns:repeat(3,1fr); } .wp-page-content .list-rows li{ background:var(--wp-bg-panel); border-radius:var(--wp-radius); padding:16px 18px; font-size:14px; color:var(--wp-ink); font-weight:600; line-height:1.4; } .wp-page-content .item-tile-info-panel.tile-message{ display:flex; align-items:center; gap:16px; background:var(--wp-bg-panel); border:none; } .wp-page-content .item-tile-info-panel.tile-message .tile-ico{ flex:none; width:40px; height:40px; } .wp-page-content .item-tile-info-panel.tile-message .tile-ico img{ width:100%; height:100%; object-fit:contain; } .wp-page-content .item-tile-info-panel.tile-message .tile-title{ margin:0; font-weight:600; font-size:14px; } /* numbered "что нужно знать для расчёта стоимости" list */ .wp-page-content .tiles-list-box{ margin:32px 0; } .wp-page-content .tiles-list-box .box-inner-wrap{ background:var(--wp-bg-panel); border-radius:var(--wp-radius-lg); padding:28px; } .wp-page-content .tiles-list-box .title-inner-wrap .section-title{ margin:0 0 20px; } .wp-page-content .tiles-list-box .items-wrap{ display:flex; flex-wrap:wrap; gap:16px 32px; } .wp-page-content .item-tile-info-number{ display:flex; align-items:center; gap:12px; } .wp-page-content .item-tile-info-number .tile-number{ font-size:22px; font-weight:800; color:var(--wp-blue); } .wp-page-content .item-tile-info-number .tile-title{ font-size:14px; font-weight:600; color:var(--wp-ink); } /* .tiles-list-box also wraps the "типовые размеры" grid (.size-custom-wrap), which needs its own background/padding instead of the numbered-list treatment above. */ .wp-page-content .tiles-list-box.size-custom-wrap{ background:none; padding:0; } .wp-page-content .size-custom-wrap .items-inner-wrap{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:16px; } .wp-page-content .size-custom-wrap .items-inner-wrap.item-tile-category-main{ background:none; border:none; padding:0; } .wp-page-content .size-custom-wrap .items-wrap{ display:flex; flex-wrap:wrap; gap:16px; } .wp-page-content .size-custom-wrap .item-wrap{ flex:1 1 140px; max-width:160px; text-align:center; background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius); padding:16px; box-sizing:border-box; } /* .items-grid-6 modifier — stretches the row to fill the full section width instead of clustering at max-width:160px each (only opted into where the page has exactly 6 size tiles; ".size-custom-wrap" itself is shared by other custom-order pages with different tile counts, so this doesn't touch the default). */ .wp-page-content .size-custom-wrap .items-wrap.items-grid-6{ display:grid; grid-template-columns:repeat(6,1fr); } .wp-page-content .size-custom-wrap .items-wrap.items-grid-6 .item-wrap{ max-width:none; } .wp-page-content .size-custom-wrap .item-wrap img{ width:100%; height:80px; object-fit:cover; margin-bottom:10px; } .wp-page-content .size-custom-wrap .tile-info{ font-size:13px; font-weight:600; color:var(--wp-ink); } .wp-page-content .size-custom-wrap .info-inner-wrap{ margin-top:4px; } /* examples photo slider */ .wp-page-content .tiles-slider-examples-box{ margin:32px 0; } .wp-page-content .slider-examples .items-wrap{ display:flex; gap:16px; flex-wrap:wrap; } .wp-page-content .item-tile-example{ display:block; width:180px; height:180px; border-radius:var(--wp-radius); overflow:hidden; border:1px solid var(--wp-border); background:#fff; } .wp-page-content .item-tile-example img{ width:100%; height:100%; object-fit:contain; } .wp-page-content .slider-examples-pagination{ display:none; } /* product-type category tiles (Прозрачные/Цветные/С логотипом) */ .wp-page-content .items-categories .items-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:24px 0; } /* .items-flex-fill modifier — flex instead of a fixed-column grid, so whichever tab panel is active (this page's material/type tabs have different card counts: 3 vs 4) always spreads evenly across exactly one row instead of the grid's fixed 3 columns wrapping a 4th item. ".items-categories" itself is shared by ~19 other custom-order pages so this only fires where the modifier is explicitly added. */ .wp-page-content .items-categories .items-wrap.items-flex-fill{ display:flex; flex-wrap:wrap; gap:20px; } .wp-page-content .items-categories .items-wrap.items-flex-fill .item-wrap{ flex:1 1 0; min-width:0; max-width:325px; } /* the ".active" qualifier here matters: an unqualified "display:flex" would outrank ".item-wrap.js-tab-block{display:none}" on specificity and show every tab's cards at once regardless of which tab is selected. */ .wp-page-content .items-categories .items-wrap.items-flex-fill .item-wrap.active{ display:flex; } .wp-page-content .items-categories .items-wrap.items-flex-fill .item-tile-category-main{ width:100%; } /* .items-grid-4 modifier — fixed 4-per-row grid (custom_poliprop.tpl's "Виды пакетов" has 6 fixed tiles, no tabs, so it needs a real wrapping grid rather than items-flex-fill, which was built for variable per-tab counts and just crams all items into one shrinking row). */ .wp-page-content .items-categories .items-wrap.items-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); } /* centre the leftover 2-item row when there are exactly 6 tiles (custom_poliprop.tpl) instead of leaving it flush left with dead space on the right — pinned to nth-child(5)/(6) of 6 total so it simply stops matching (falls back to default left-aligned) if tiles are ever added or removed, same safe pattern as the analogous fix on custom_pack.tpl's tile grid. */ .wp-page-content .items-categories .items-wrap.items-grid-4 .item-wrap:nth-child(5):nth-last-child(2){ grid-column:2; } .wp-page-content .items-categories .items-wrap.items-grid-4 .item-wrap:nth-child(6):nth-last-child(1){ grid-column:3; } .wp-page-content .item-tile-category-main{ display:block; background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius-lg); padding:24px; text-align:center; text-decoration:none; box-sizing:border-box; transition:box-shadow .3s ease, transform .3s ease; } /* same hover shadow as the "Размер/Толщина/..." tiles (.item-tile-info-number:hover). */ .wp-page-content .item-tile-category-main:hover{ box-shadow:var(--wp-shadow-card); transform:translateY(-2px); } .wp-page-content .item-tile-category-main .tile-title{ font-size:16px; font-weight:700; color:var(--wp-ink); margin-bottom:14px; } .wp-page-content .item-tile-category-main .tile-photo-wrap{ height:140px; margin-bottom:14px; } .wp-page-content .item-tile-category-main .tile-photo{ display:block; width:100%; height:100%; } .wp-page-content .item-tile-category-main .tile-photo img{ width:100%; height:100%; object-fit:cover; } /* .photo-contain modifier — some pages' images are small square icon-like assets, not real product photos, so cropping them with object-fit:cover zoomed in on the centre and lost the picture; contain shows the whole image, letterboxed, instead. The template actually puts this modifier on the ".tile-photo" element itself (class="tile-photo photo-contain"), not on a ".type-photo-contain" wrapper — the selector below previously looked for a wrapper class that no images actually carry, so this rule never matched anywhere and every ".photo-contain" image sitewide was silently still being cropped by the plain ".tile-photo img{object-fit:cover}" rule above. */ .wp-page-content .item-tile-category-main .tile-photo.photo-contain{ display:flex; align-items:center; justify-content:center; } .wp-page-content .item-tile-category-main .tile-photo.photo-contain img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; } .wp-page-content .item-tile-category-main .tile-info{ font-size:13px; color:var(--wp-text-muted); line-height:1.5; } /* "По назначению" tab (custom_vakumnie_packety.tpl) has no product photos, so its cards use an icon badge in the same 140px slot as the photo tabs, keeping card heights consistent whichever tab is active. */ .wp-page-content .item-tile-category-main .tile-ico-wrap{ height:140px; margin-bottom:14px; display:flex; align-items:center; justify-content:center; } .wp-page-content .item-tile-category-main .tile-ico-badge{ width:72px; height:72px; border-radius:50%; background:rgba(46,127,203,.1); display:flex; align-items:center; justify-content:center; flex:none; } /* "Преимущества работы с нашей компанией" (advantage.tpl, shared include) — card look now matches the homepage's own ".tiles-box .item-tile-info-ico" (white, bordered) instead of a flat grey fill, so this shared component reads the same everywhere it's used. */ .wp-page-content .tiles-box.items-about .items-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:20px 0; } /* "Этапы работы" numbered steps (advantage.tpl, shared include) */ .wp-page-content .tiles-box.items-steps{ margin:20px 0 32px; } .wp-page-content .tiles-box.items-steps .items-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; } .wp-page-content .item-tile-step{ display:flex; flex-direction:column; gap:12px; } .wp-page-content .item-tile-step .tile-photo-wrap{ position:relative; border-radius:var(--wp-radius); overflow:hidden; height:160px; } .wp-page-content .item-tile-step .tile-photo{ width:100%; height:100%; } .wp-page-content .item-tile-step .tile-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .wp-page-content .item-tile-step .tile-number{ position:absolute; top:10px; left:10px; width:32px; height:32px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:var(--wp-blue); } .wp-page-content .item-tile-step .tile-info-wrap .tile-title{ font-size:15px; font-weight:700; color:var(--wp-ink); margin-bottom:4px; } .wp-page-content .item-tile-step .tile-info-wrap p{ margin:0; font-size:13px; color:var(--wp-text-muted); } /* FAQ grid (questions.tpl, shared include) — same look as .wp-catalog-page's own copy */ .wp-page-content .wp-faq{ margin-top:16px; } .wp-page-content .wp-faq__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .wp-page-content .wp-faq__card{ background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius); padding:20px; } .wp-page-content .wp-faq__badge{ display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:20px; font-size:11px; font-weight:700; margin-bottom:10px; color:#fff; } .wp-page-content .wp-faq__badge--product{ background:var(--wp-blue); } .wp-page-content .wp-faq__badge--usage{ background:var(--wp-amber); } .wp-page-content .wp-faq__badge--top{ background:var(--wp-green); } .wp-page-content .wp-faq__badge--order{ background:var(--wp-red); } .wp-page-content .wp-faq__question{ font-size:15px; font-weight:700; color:var(--wp-ink); margin:0 0 8px; } .wp-page-content .wp-faq__answer{ font-size:14px; color:var(--wp-text); line-height:1.55; margin:0; } /* ========================================================================== CUSTOM-ORDER PRODUCT PAGE — extra components (custom_vakumnie_packety.tpl and any other individual product page rebuilt against the same reference design). Generic names (wp-contact-cards, wp-cta-band, wp-color-*, wp-seo-panel) so later pages in this section can reuse them without redeclaring. ========================================================================== */ /* hero "свяжитесь с нами" row as 3 side-by-side cards instead of a stacked list — used in the hero .info-contacts-panel-box.type-second on rebuilt product pages. */ .wp-page-content .wp-contact-cards{ display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 24px; } .wp-page-content .wp-contact-card{ /* basis/min-width tuned so only 2 cards fit per row at this hero column's real width (~580px) — at the old 190px basis all 3 fit but each only got ~220px, too narrow for "+7 (727) 310-85-06" to stay on one line (it wrapped mid-number). Forcing a 2-per-row wrap here gives each remaining card ~285px, matching the reference design. */ flex:1 1 230px; min-width:220px; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius); padding:14px 16px; text-decoration:none; box-sizing:border-box; } .wp-page-content .wp-contact-card__icon{ flex:none; width:48px; height:48px; border-radius:var(--wp-radius); background:var(--wp-bg-panel); display:flex; align-items:center; justify-content:center; } .wp-page-content .wp-contact-card__icon img{ width:32px; height:32px; } .wp-page-content .wp-contact-card__label{ font-size:13px; font-weight:600; color:var(--wp-text-muted); display:block; } .wp-page-content .wp-contact-card__value{ font-size:15px; font-weight:800; color:var(--wp-ink); display:block; white-space:nowrap; } .wp-page-content .wp-contact-card:hover .wp-contact-card__value{ color:var(--wp-blue); } /* CTA button placed directly under the hero photo (instead of under the contacts) — same gradient/radius as the site's standard button (.button-inner-wrap .btn, .tile-submit .btn, .frm-submit-btn etc.), not the darker 180deg nav-bar gradient it had before. */ .wp-page-content .photo-inner-wrap .btn.button-photo-cta{ margin-top:16px; width:100%; height:50px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:linear-gradient(135deg,var(--wp-btn-grad-a),var(--wp-btn-grad-b)); color:#fff; font-size:15px; font-weight:700; text-decoration:none; box-sizing:border-box; border:none; cursor:pointer; } .wp-page-content .photo-inner-wrap .btn.button-photo-cta:hover{ filter:brightness(1.12) saturate(1.1); color:#fff; } /* outline button variant for secondary CTAs ("Рассчитать стоимость") */ .wp-page-content .btn.btn-outline{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 22px; border:1px solid var(--wp-blue); border-radius:10px; background:none; color:var(--wp-blue); font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; transition:background-color .25s ease, color .25s ease; } .wp-page-content .btn.btn-outline:hover{ background:var(--wp-blue); color:#fff; } /* "что нужно знать для расчёта стоимости" — upgraded from a plain inline number+label row to individual bordered/hover cards (this block had no card treatment at all before, just a flex-wrap list inside .tiles-list-box's shared grey box, which is now unset here since each item carries its own card background instead). */ .wp-page-content .tiles-list-box .box-inner-wrap{ background:none; padding:0; } .wp-page-content .tiles-list-box .items-wrap{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } /* .type-bleed modifier — full-bleed grey band (like ".items-info-panels.type-bleed" above), for the one page/instance that specifically asked for it; ".tiles-list-box" on its own is shared by ~18 other custom-order pages so this needed its own opt-in modifier. */ /* margin-top/bottom:0 override the shared ".tiles-list-box{margin:32px 0}" above — this band already gets its own vertical spacing from its 40px padding, so the base rule's 32px margin was stacking on top of it on whichever side wasn't zeroed. The margin-bottom side alone isn't enough to equalize the gap after it, though: this band's own 40px padding-bottom is already 8px more than the 32px gap used between every other pair of blocks here (Что нужно знать / Примеры работ / Виды X / Преимущества, all plain blocks with no such padding of their own) — see the ".wp-work-examples" sibling rule below, which pulls in by that extra 8px. */ .wp-page-content .tiles-list-box.type-bleed{ background:var(--wp-bg-panel); width:100vw; position:relative; left:50%; right:50%; margin-top:0; margin-bottom:0; margin-left:-50vw; margin-right:-50vw; padding:40px 0; box-sizing:border-box; } .wp-page-content .tiles-list-box.type-bleed .box-inner-wrap{ max-width:var(--wp-maxw); margin:0 auto; padding:0 32px; box-sizing:border-box; } .wp-page-content .tiles-list-box .items-wrap.items-grid-5{ grid-template-columns:repeat(5,minmax(0,1fr)); } /* .type-bleed on ".title-box" ("Виды пакетов") — same full-bleed grey band, but ".title-box" has no single wrapping child of its own (unlike .box-inner-wrap/.items-wrap above), so the template adds a plain .wp-container around all of it (title+tabs+panels) for the max-width cap instead. ".title-box" itself is extremely widely shared, so this only ever fires when both classes are present together. */ .wp-page-content .title-box.type-bleed{ background:#fff; width:100vw; position:relative; left:50%; right:50%; margin-top:0; margin-left:-50vw; margin-right:-50vw; margin-bottom:0; padding:0 0 40px; box-sizing:border-box; display:block; } /* the heading's own generic ".h2-title{margin-top:32px}" was stacking on top of the band's 24px padding-top (56px total to the actual heading text) instead of just the padding alone — same fix already applied to the "Наша компания..." band's own heading. */ .wp-page-content .title-box.type-bleed .h2-title:first-child, .wp-page-content .title-box.type-bleed .title-wrap:first-child > .h2-title{ margin-top:0; } .wp-page-content .item-tile-info-number{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius); padding:22px; box-sizing:border-box; transition:box-shadow .3s ease, transform .3s ease; height:100%; } .wp-page-content .item-tile-info-number:hover{ box-shadow:var(--wp-shadow-card); transform:translateY(-2px); } .wp-page-content .item-tile-info-number .tile-number{ font-size:28px; font-weight:800; color:var(--wp-border); line-height:1; } .wp-page-content .item-tile-info-number .tile-title{ font-size:15px; font-weight:700; color:var(--wp-ink); } /* .item-wrap.js-tab-block panels (main2026.js's initCatalogTabs toggles .active on click) had no show/hide rule outside of .wp-catalog's own copy (homepage), so on every custom-order page reusing this same tabs pattern all panels — both tabs' cards — were showing at once regardless of which tab was selected. */ .wp-page-content .item-wrap.js-tab-block{ display:none; } .wp-page-content .item-wrap.js-tab-block.active{ display:block; } /* underline tabs ("Виды пакетов") — .btn.button-tab had no styling at all outside of .wp-product/.wp-catalog-page contexts, so on custom-order pages it rendered as bare text; this gives it the same animated-underline treatment those contexts use. */ .wp-page-content .tabs-wrap.tabs-underline ul.menu{ display:flex; gap:28px; list-style:none; margin:0; padding:0; border-bottom:1px solid var(--wp-border); } .wp-page-content .tabs-wrap.tabs-underline .btn.button-tab{ position:relative; display:block; padding:0 0 14px; background:none; border:none; border-radius:0; height:auto; font-size:16px; font-weight:600; color:var(--wp-ink); cursor:pointer; text-decoration:none; } .wp-page-content .tabs-wrap.tabs-underline .btn.button-tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--wp-blue); transform:scaleX(0); transform-origin:center; transition:transform .4s cubic-bezier(.22,.61,.36,1); } .wp-page-content .tabs-wrap.tabs-underline .btn.button-tab:hover, .wp-page-content .tabs-wrap.tabs-underline .btn.button-tab.active{ color:var(--wp-blue); } .wp-page-content .tabs-wrap.tabs-underline .btn.button-tab:hover::after, .wp-page-content .tabs-wrap.tabs-underline .btn.button-tab.active::after{ transform:scaleX(1); } /* colour-palette swatches (PANTONE-style grid) */ .wp-page-content .wp-color-panel{ display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap; margin-top:32px; } .wp-page-content .wp-color-panel__info{ flex:0 0 280px; } .wp-page-content .wp-color-panel__info h3{ margin:0 0 8px; font-size:17px; font-weight:800; color:var(--wp-ink); } .wp-page-content .wp-color-panel__info p{ margin:0 0 14px; font-size:14px; line-height:1.6; color:var(--wp-text-muted); } .wp-page-content .wp-color-swatches{ flex:1 1 480px; min-width:280px; display:grid; grid-template-columns:repeat(8,1fr); gap:14px 12px; } .wp-page-content .wp-color-swatch{ display:flex; flex-direction:column; align-items:center; gap:7px; } .wp-page-content .wp-color-swatch__chip{ width:100%; height:44px; border-radius:var(--wp-radius); border:1px solid rgba(27,29,34,.1); transition:transform .25s ease; } .wp-page-content .wp-color-swatch:hover .wp-color-swatch__chip{ transform:translateY(-2px); } .wp-page-content .wp-color-swatch__name{ font-size:12px; font-weight:600; color:var(--wp-text-muted); text-align:center; } /* .wp-size-swatches modifier — same swatch grid/hover language as "Цветовая гамма", reused for "Типовые размеры" (photo chips instead of colour chips: taller, object-fit:cover, and 6 columns to match the 6 size tiles instead of the colour grid's 8). */ .wp-page-content .wp-size-swatches{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; } .wp-page-content .wp-size-swatches .wp-color-swatch{ flex:none; justify-content:flex-end; } .wp-page-content .wp-size-swatches .wp-color-swatch__chip{ display:block; border-radius:6px 6px 0 0; border:none; background:linear-gradient(180deg,var(--wp-blue-grad-top),var(--wp-blue-grad-bottom)); } /* each block's width/height is the bag's real cm size × a fixed 4px/см scale, so blocks are proportional to one another in both dimensions, not just decoratively stepped. */ .wp-page-content .wp-size-swatches .wp-color-swatch:nth-child(1) .wp-color-swatch__chip{ width:32px; height:60px; } .wp-page-content .wp-size-swatches .wp-color-swatch:nth-child(2) .wp-color-swatch__chip{ width:40px; height:80px; } .wp-page-content .wp-size-swatches .wp-color-swatch:nth-child(3) .wp-color-swatch__chip{ width:60px; height:80px; } .wp-page-content .wp-size-swatches .wp-color-swatch:nth-child(4) .wp-color-swatch__chip{ width:64px; height:168px; } .wp-page-content .wp-size-swatches .wp-color-swatch:nth-child(5) .wp-color-swatch__chip{ width:80px; height:100px; } .wp-page-content .wp-size-swatches .wp-color-swatch:nth-child(6) .wp-color-swatch__chip{ width:100px; height:160px; } /* full-bleed blue CTA band, dropped between the tech content and the "buy in shop" strip */ .wp-page-content .wp-cta-band{ background:linear-gradient(180deg,var(--wp-blue-grad-top),var(--wp-blue-grad-bottom)); width:100vw; position:relative; left:50%; right:50%; margin-top:0; margin-bottom:0; margin-left:-50vw; margin-right:-50vw; padding:36px 0; box-sizing:border-box; } .wp-page-content .wp-cta-band__row{ max-width:var(--wp-maxw); margin:0 auto; padding:0 32px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .wp-page-content .wp-cta-band__title{ font-size:19px; font-weight:800; color:#fff; display:block; margin-bottom:6px; } .wp-page-content .wp-cta-band__text{ font-size:14px; font-weight:600; color:rgba(255,255,255,.85); display:block; } .wp-page-content .wp-cta-band__actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .wp-page-content .wp-cta-band__actions .btn-white{ height:50px; padding:0 28px; display:flex; align-items:center; border-radius:var(--wp-radius); background:#fff; color:var(--wp-blue-grad-bottom); font-size:15px; font-weight:800; text-decoration:none; transition:transform .25s ease; } .wp-page-content .wp-cta-band__actions .btn-white:hover{ color:var(--wp-blue-grad-bottom); transform:translateY(-1px); } .wp-page-content .wp-cta-band__actions .btn-outline-white{ height:50px; padding:0 28px; display:flex; align-items:center; border-radius:var(--wp-radius); border:1px solid rgba(255,255,255,.6); color:#fff; font-size:15px; font-weight:800; text-decoration:none; transition:background-color .25s ease; } .wp-page-content .wp-cta-band__actions .btn-outline-white:hover{ color:#fff; background:rgba(255,255,255,.14); } /* "Характеристики" spec table (custom_vakumnie_packety.tpl) — each cell carries its own label above the value (not one shared header row) so the same markup collapses cleanly into stacked cards on mobile. */ .wp-page-content #vak-specs{ margin:32px 0; } .wp-page-content #vak-specs .h2-title{ margin:0 0 16px; } /* "Характеристики" block on custom_zip_lock.tpl — plain white, same treatment as #vak-specs; the .wp-seo-text grey band right above it already provides the section break. */ .wp-page-content #ziplock-specs{ margin:32px 0 40px; } .wp-page-content #ziplock-specs .h2-title{ margin:0 0 16px; } /* "Характеристики" block on custom_vozdush.tpl — same plain-white treatment, placed right after .wp-seo-text like on the zip-lock page. */ .wp-page-content #vpp-specs{ margin:32px 0 40px; } .wp-page-content #vpp-specs .h2-title{ margin:0 0 16px; } /* "Характеристики" block on custom_virubnaya_ruchka.tpl — was sitting flush against the blue .wp-cta-band right below it with no breathing room. */ .wp-page-content #vr-specs{ margin:32px 0 40px; } .wp-page-content #vr-specs .h2-title{ margin:0 0 16px; } /* "Характеристики" block on custom_musor.tpl — placed right after .wp-seo-text, same treatment as the other custom-order pages' spec tables. Uses the 2-cell (Характеристика/Значение) shape via .spec-table-2col — a stale earlier plan for a 3-cell centered table here was never built, so those rules were removed. */ .wp-page-content #musor-specs{ margin:32px 0 40px; } .wp-page-content #musor-specs .h2-title{ margin:0 0 16px; } /* "Характеристики" block on custom_plenka_poli.tpl — placed right after the "Виды плёнки" tabs section, before "Преимущества работы с нашей компанией". Plain-white treatment like #ziplock-specs/#vr-specs (no full-bleed background needed here). */ .wp-page-content #plenka-poli-specs{ margin:32px 0 40px; } .wp-page-content #plenka-poli-specs .h2-title{ margin:0 0 16px; } /* this table has 3 cells per row (Характеристика / Варианты / Примечание), same shape as #musor-specs — reuse the same 1fr 1fr 2fr override (note column gets the most room since its text runs long). */ .wp-page-content #plenka-poli-specs .spec-row{ grid-template-columns:1fr 1fr 2fr; } /* reusable "Характеристика / Варианты / Примечание" 3-cell row shape (custom_skotch.tpl RU spec-table content, replaced from the old 5-cell Узкий/Стандартный/Широкий format) — a class modifier rather than an id override so it only affects the specific table it's applied to (e.g. leaves the KZ version of #skotch-specs, which still uses the old cell count, untouched even though both share the same id — only one of them is ever actually in the rendered DOM at once, but scoping by class here avoids relying on that). */ .wp-page-content .spec-table.spec-table-3col .spec-row{ grid-template-columns:1fr 1fr 2fr; } /* reusable "Характеристика / Значение" 2-cell row shape (custom_vozdush.tpl #vpp-specs). */ .wp-page-content .spec-table.spec-table-2col .spec-row{ grid-template-columns:1fr 2fr; } /* card background flipped from white to grey (per request: "Таблица - фон серый") — row stripes flipped to match (odd rows now white, so the zebra pattern still reads against the now-grey card instead of disappearing into it). */ .wp-page-content .spec-table{ background:var(--wp-bg-panel); border:1px solid var(--wp-border); border-radius:var(--wp-radius-lg); overflow:hidden; } .wp-page-content .spec-row{ display:grid; grid-template-columns:1.3fr 1.4fr 1fr 0.9fr 0.9fr 1.2fr; gap:16px; align-items:center; padding:16px 20px; } .wp-page-content .spec-row:nth-child(odd){ background:#fff; } .wp-page-content .spec-row + .spec-row{ border-top:1px solid var(--wp-border); } .wp-page-content .spec-row{ transition:background-color .2s ease; } .wp-page-content .spec-row:hover{ background:rgba(46,127,203,.08); } .wp-page-content .spec-cell-name{ font-size:14px; font-weight:700; color:var(--wp-ink); } .wp-page-content .spec-value{ display:block; font-size:13px; font-weight:500; color:var(--wp-ink); line-height:1.4; } /* column headers moved OUT of the table entirely, into their own bar above it (request: "названия столбцов нужно вынести за таблицу" — a first attempt that kept them inside row 1 wasn't what was wanted). The per-cell .spec-label spans already in every row's markup are hidden everywhere on desktop — .spec-table-head is a new sibling element with its own cells, built once per page with the same column text the labels used to repeat. Its grid-template- columns must mirror the .spec-row/.spec-table-Ncol pairing exactly so headers line up with their column. */ .wp-page-content .spec-label{ display:none; } .wp-page-content .spec-table-head{ display:grid; grid-template-columns:1.3fr 1.4fr 1fr 0.9fr 0.9fr 1.2fr; gap:16px; margin-top:24px; padding:0 20px 10px; } .wp-page-content .spec-table-head.spec-table-2col{ grid-template-columns:1fr 2fr; max-width:760px; margin-left:auto; margin-right:auto; } .wp-page-content .spec-table-head.spec-table-3col{ grid-template-columns:1fr 1fr 2fr; } .wp-page-content .spec-head-cell{ font-size:11px; font-weight:700; color:var(--wp-text-muted); text-transform:uppercase; letter-spacing:.03em; } /* space below the whole table before whatever section follows (cta-band, advantages, etc.) — most spec-table containers (#carton-specs, #kraft-specs, #vak-specs...) have no margin of their own, so the table used to sit flush against the next block with 0px gap. */ .wp-page-content .spec-table{ margin-bottom:32px; } /* trim the excess empty space on narrow (2- and 3-cell) tables and centre them (request: "Лишнее свободное пространство обрезать" + "Таблицу расположить по центру") — the wide multi-cell tables (5-6 columns) already fill their width with real content and don't have this problem, so this is scoped to the 2col/3col modifiers only. 3col gets a wider cap since it carries more text (Параметры/Варианты/Примечание) than the 2col Параметры/Значение shape. */ .wp-page-content .spec-table.spec-table-2col{ max-width:760px; margin-left:auto; margin-right:auto; } .wp-page-content .spec-table.spec-table-3col{ max-width:1080px; margin-left:auto; margin-right:auto; } .wp-page-content .spec-table-head.spec-table-3col{ max-width:1080px; margin-left:auto; margin-right:auto; } @media (max-width:900px){ .wp-page-content .spec-row{ grid-template-columns:1fr; gap:10px; padding:18px 20px; } .wp-page-content .spec-cell-name{ font-size:15px; padding-bottom:4px; border-bottom:1px solid var(--wp-border); margin-bottom:2px; } /* the external header bar only makes sense next to a grid row — stacked mobile cards go back to each cell carrying its own inline label instead. */ .wp-page-content .spec-table-head{ display:none; } .wp-page-content .spec-label{ display:block; font-size:11px; font-weight:600; color:var(--wp-text-muted); text-transform:uppercase; letter-spacing:.02em; margin-bottom:3px; } .wp-page-content #ziplock-specs{ margin:24px 0 32px; } .wp-page-content #vpp-specs{ margin:24px 0 32px; } .wp-page-content #vr-specs{ margin:24px 0 32px; } .wp-page-content #musor-specs{ margin:24px 0 32px; } .wp-page-content #plenka-poli-specs{ margin:24px 0 32px; } } /* generic full-bleed grey section — reusable on any plain
(wrap the content in a nested ".wp-container" for the max-width cap), used across the custom-order pages for SEO text blocks, "Купить в интернет-магазине" strips, etc. instead of a bespoke id + duplicated rules per page. */ .wp-page-content .wp-bleed-panel{ background:var(--wp-bg-panel); width:100vw; position:relative; left:50%; right:50%; margin-top:0; margin-left:-50vw; margin-right:-50vw; margin-bottom:0; padding:40px 0; box-sizing:border-box; } .wp-page-content .wp-bleed-panel > .wp-container{ max-width:var(--wp-maxw); margin:0 auto; padding:0 32px; box-sizing:border-box; } .wp-page-content .wp-bleed-panel .h2-title:first-child, .wp-page-content .wp-bleed-panel .h1-title:first-child{ margin-top:0; } /* SEO text block (custom_vakumnie_packety.tpl and other custom-order pages) — plain text, no card styling. */ .wp-page-content .wp-seo-text .h2-title{ margin:0 0 16px; } .wp-page-content .wp-seo-text p{ margin:0 0 14px; } .wp-page-content .wp-seo-text p:last-child{ margin-bottom:0; } /* white override for this block specifically — .wp-bleed-panel is shared by other content too (request-form section, "Купить..." cross-sell strip) that should stay grey, so this can't be changed on the shared base rule. */ .wp-page-content .wp-bleed-panel.wp-seo-text{ background:#fff; } /* "Преимущества работы с нашей компанией" — reusable full-bleed band on every custom- order page. margin-top used to be 32px, matching the standard gap between the other top-of-page blocks (Что нужно знать / Примеры работ / Виды X); reduced to 16px specifically for the gap above this block (i.e. from "Виды пакетов"), per request. Background flipped from white to grey per request, to alternate with the (now white) SEO text band that follows it and the (now grey) spec-table further down: grey / white / grey. */ .wp-page-content .wp-advantages-top{ background:var(--wp-bg-panel); width:100vw; position:relative; left:50%; right:50%; margin-top:16px; margin-left:-50vw; margin-right:-50vw; padding:40px 0; box-sizing:border-box; } .wp-page-content .wp-advantages-top .wp-container{ max-width:var(--wp-maxw); margin:0 auto; padding:0 32px; box-sizing:border-box; } /* the heading's own generic ".h2-title{margin-top:32px}" was stacking on top of this band's own 40px padding-top. */ .wp-page-content .wp-advantages-top .h2-title{ margin-top:0; } /* 4 columns (one row) — the notice sits stacked under the title (nested inside .tile-title, matching the hero tiles) instead of as a third flex item beside it, so 4 narrow columns don't force awkward wrapping. */ .wp-page-content .wp-advantages-top .tiles-box.items-about .items-wrap{ grid-template-columns:repeat(4,1fr); } /* "Купить ... в интернет-магазине" cross-sell strip — reusable ".wp-shop-cross" modifier on top of ".wp-bleed-panel" (full-bleed grey band), for any custom-order page with a product slider. Product cards sit directly on the grey band instead of as white cards on it — the shared ".wp-product-cross" white-card/shadow/margin treatment is stripped here rather than changed at the source, since other pages use it on a plain (non-bleed) background. */ .wp-page-content .wp-shop-cross .wp-product-cross{ background:none; box-shadow:none; margin:0; } .wp-page-content .wp-shop-cross .action-wrap .button-link{ display:inline-flex; align-items:center; gap:6px; color:var(--wp-blue); font-weight:600; font-size:14px; text-decoration:none; } .wp-page-content .wp-shop-cross .action-wrap .button-link:hover{ color:var(--wp-blue-dark); } /* "Смотреть готовые товары"/"Смотреть все товары" arrows — plain "→" character with the same hover-slide animation used site-wide (.wp-popular__more, .wp-product-cross .button-link, .wp-basket .button-link), replacing the old static, non-animating arrow-forward.svg icon. */ .wp-page-content .wp-shop-cross .button-link .button-ico span, .wp-page-content .wp-product-cross .more-box .button-ico span{ display:inline-block; transition:transform .25s ease; } .wp-page-content .wp-shop-cross .button-link:hover .button-ico span, .wp-page-content .wp-product-cross .more-box .button-link:hover .button-ico span{ transform:translateX(4px); } /* a

inside a plain ".info-wrap" can have no margin reset, so its default ~15px browser margin-top stacks with the title-box's own 16px flex row-gap (looks like a ~32px gap under the heading instead of the intended 16px) — reusable fix, not tied to one page's id. */ .wp-page-content .wp-shop-cross .info-wrap p{ margin:0; } /* same double-gap pattern as the .info-wrap p fix above, other side: the heading's own generic h1/h2-title margin-bottom:16px stacks with the title-box's 16px flex row-gap, so the heading sits 32px above the paragraph/product-grid instead of the intended 16px. Zero it here so the flex gap is the single source of that spacing, matching every other row gap in this component. */ .wp-page-content .wp-shop-cross .h1-title, .wp-page-content .wp-shop-cross .h2-title{ margin-bottom:0; } /* when .wp-shop-cross isn't inside .wp-bleed-panel (e.g. custom_vakumnie_packety.tpl, where the section runs on white background instead), the generic h1/h2-title top margin isn't zeroed by the bleed-panel rule above — cancel it here too so the heading doesn't get an oversized gap. */ .wp-page-content .wp-shop-cross .h1-title:first-child, .wp-page-content .wp-shop-cross .h2-title:first-child{ margin-top:0; } /* #vak-shop-bleed (custom_vakumnie_packety.tpl), #vpp-shop-bleed (custom_vozdush.tpl) and #vr-shop-bleed (custom_virubnaya_ruchka.tpl) are the .wp-shop-cross sections NOT wrapped in .wp-bleed-panel (each runs on plain white background, right after its own request-form .wp-bleed-panel), so the margin-top:0 above — meant to cancel the double-padding when a 40px-padded panel is already the direct parent — instead left them flush with zero breathing room above. Restore the same 40px used everywhere else as the section-gap rhythm (.wp-bleed-panel / .wp-advantages-top padding), so top and bottom space around these headings match instead of drifting out of sync on every edit. */ #vak-shop-bleed .h1-title:first-child, #vak-shop-bleed .h2-title:first-child, #vpp-shop-bleed .h1-title:first-child, #vpp-shop-bleed .h2-title:first-child, #vr-shop-bleed .h1-title:first-child, #vr-shop-bleed .h2-title:first-child{ margin-top:40px; } .wp-page-content .wp-shop-cross .title-box .section-title a{ color:inherit; transition:color .2s ease; } .wp-page-content .wp-shop-cross .title-box .section-title a:hover{ color:var(--wp-blue); } @media (max-width: 900px){ .wp-page-content .wp-color-swatches{ grid-template-columns:repeat(4,1fr); } .wp-page-content .tiles-list-box .items-wrap{ grid-template-columns:repeat(2,1fr); } } /* request-quote form (request_custom.tpl, shared include) — two-column card: blue "why us" sidebar + the actual form, matching the "обратная связь" reference design. */ .wp-page-content .frm-section-head{ max-width:780px; margin:8px 0 0; } /* this page (custom_vakumnie_packety.tpl) reorders its sections a lot, and the form's actual preceding sibling kept changing every time — two earlier fixes tied to specific preceding elements (a grey band, a title-box) silently stopped matching each time the layout was reordered, since neither was adjacent to .frm-section-head anymore. Anchored instead to "#custom-scrool", the fixed marker div that already sits immediately before this include (it's the scroll target for every "Оставить заявку" button on the page) — that adjacency can't drift when other sections get reordered, so this stays correct going forward. */ .wp-page-content #custom-scrool + .frm-section-head{ margin-top:24px; } /* scrollIntoView({block:"start"}) (scroolTo(), used by every "Оставить заявку" button) aligns #custom-scrool with the very top of the viewport — right under the sticky .wp-header (~127px desktop / ~108px mobile), which otherwise covers the "Заказная продукция" heading right after the jump. scroll-margin-top leaves room for it. */ .wp-page-content #custom-scrool{ scroll-margin-top:140px; } @media (max-width:900px){ .wp-page-content #custom-scrool{ scroll-margin-top:120px; } } /* on custom_vakumnie_packety.tpl the form now sits inside .wp-bleed-panel (grey band with its own 40px top padding), so the extra 32px above stacks into an oversized gap — cancel it there. */ .wp-page-content .wp-bleed-panel #custom-scrool + .frm-section-head{ margin-top:0; } .wp-page-content .frm-section-head .wp-h2{ font-size:24px; margin-bottom:8px; } .wp-page-content .frm-section-head p{ margin:0; } .wp-page-content .form-main-box{ background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius-lg); margin:32px 0; position:relative; overflow:hidden; box-shadow:var(--wp-shadow-card); } /* inside .wp-bleed-panel (custom_vakumnie_packety.tpl) the panel's own 40px bottom padding already closes the section, so the card's own 32px margin-bottom would stack on top of it and make the bottom gap (72px) uneven against the top gap (40px) — cancel it there. */ .wp-page-content .wp-bleed-panel .form-main-box{ margin-bottom:0; } .wp-page-content .form-main-box .frm-succefull-message{ display:none; text-align:center; padding:48px 24px; } .wp-page-content .form-main-box.active .frm-succefull-message{ display:block; } .wp-page-content .form-main-box.active .form-inner-wrap{ display:none; } .wp-page-content .frm-succefull-message .frm-title{ font-size:18px; font-weight:700; color:var(--wp-ink); margin-bottom:12px; } .wp-page-content .frm-succefull-message .elm-ico{ width:48px; height:48px; margin:0 auto; } .wp-page-content .frm-succefull-message .elm-ico img{ width:100%; height:100%; } .wp-page-content .frm-layout{ display:flex; flex-wrap:wrap; } /* sidebar */ .wp-page-content .frm-aside{ flex:0 0 320px; min-width:280px; box-sizing:border-box; padding:36px 32px; background:linear-gradient(180deg,var(--wp-blue-grad-top),var(--wp-blue-grad-bottom)); display:flex; flex-direction:column; gap:26px; } .wp-page-content .frm-aside-title{ font-size:18px; font-weight:700; color:#fff; line-height:1.4; margin-bottom:8px; text-shadow:0 0 20px rgba(255,255,255,.45); } .wp-page-content .frm-aside-text{ font-size:14px; color:rgba(255,255,255,.85); line-height:1.6; margin:0; text-shadow:0 0 14px rgba(255,255,255,.25); } .wp-page-content .frm-aside-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; } .wp-page-content .frm-aside-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; font-weight:600; color:#fff; line-height:1.5; text-shadow:0 0 14px rgba(255,255,255,.25); } .wp-page-content .frm-aside-list li svg{ flex:none; margin-top:2px; } .wp-page-content .frm-aside-divider{ height:1px; background:rgba(255,255,255,.22); } .wp-page-content .frm-aside-contacts{ display:flex; flex-direction:column; gap:10px; } .wp-page-content .frm-aside-label{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); text-shadow:0 0 14px rgba(255,255,255,.25); } .wp-page-content .frm-aside-phone{ font-size:18px; font-weight:800; color:#fff; text-shadow:0 0 14px rgba(255,255,255,.25); } .wp-page-content .frm-aside-phone:hover{ color:#fff; opacity:.9; } .wp-page-content .frm-aside-mail{ font-size:14px; font-weight:600; color:rgba(255,255,255,.9); text-shadow:0 0 14px rgba(255,255,255,.25); } .wp-page-content .frm-aside-mail:hover{ color:#fff; } .wp-page-content .frm-aside-hours{ font-size:13px; font-weight:600; color:rgba(255,255,255,.7); text-shadow:0 0 14px rgba(255,255,255,.25); } /* form side */ .wp-page-content .frm-main{ flex:1 1 480px; min-width:320px; padding:36px; box-sizing:border-box; } .wp-page-content .frm-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; } .wp-page-content .frm-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px 18px; } .wp-page-content .frm-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px 18px; } .wp-page-content .frm-grid-4 + .frm-grid-2, .wp-page-content .frm-grid-3 + .frm-grid-2{ margin-top:20px; } /* real choice pills (unlike .frm-chip, which is span-based with no actual input, for chips a script just relabels a hidden field) — used where the calculator logic itself needs to read the checked radio's value directly via the DOM. */ .wp-page-content .frm-radio-row{ display:flex; flex-wrap:wrap; gap:10px; } .wp-page-content .frm-radio-pill{ display:inline-flex; align-items:center; gap:8px; padding:0 16px; height:44px; box-sizing:border-box; border:1.5px solid var(--wp-border); border-radius:10px; cursor:pointer; font-size:14px; color:var(--wp-text); transition:border-color .15s ease, background-color .15s ease; } .wp-page-content .frm-radio-pill input{ accent-color:var(--wp-blue); width:16px; height:16px; margin:0; flex:none; } .wp-page-content .frm-radio-pill:has(input:checked){ border-color:var(--wp-blue); background:rgba(46,127,203,.06); color:var(--wp-ink); font-weight:700; } /* calculator note box ("Обратите внимание!") + price readout, used on the die-cut-handle-bags calculator (custom_virubnaya_ruchka_request.tpl) restyled to match the vpz calc form. */ .wp-page-content .frm-note-box{ background:var(--wp-bg-panel); border-radius:var(--wp-radius); padding:16px 18px; } .wp-page-content .frm-note-title{ font-weight:700; font-size:14px; color:var(--wp-ink); margin-bottom:8px; } .wp-page-content .frm-note-box p{ margin:0 0 8px; font-size:13px; color:var(--wp-text-muted); } .wp-page-content .frm-note-box .list-dots{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--wp-text-muted); } .wp-page-content .frm-price-tag{ display:flex; align-items:baseline; gap:8px; } .wp-page-content .frm-price-label{ font-size:14px; color:var(--wp-text-muted); } .wp-page-content .frm-price-value{ font-size:22px; font-weight:800; color:var(--wp-blue); } .wp-page-content .frm-price-value:empty::after{ content:"—"; color:var(--wp-text-muted); font-weight:600; } .wp-page-content .frm-field{ position:relative; } .wp-page-content .frm-field-full{ margin-top:20px; } .wp-page-content .frm-field-label{ display:block; font-size:13px; font-weight:700; color:var(--wp-ink); margin-bottom:7px; } .wp-page-content .frm-req{ color:var(--wp-blue); } .wp-page-content .form-input{ width:100%; height:46px; border:1px solid var(--wp-border); border-radius:6px; padding:0 14px; font-size:14px; font-family:inherit; font-weight:500; color:var(--wp-ink); box-sizing:border-box; outline:none; background:#fff; transition:border-color .2s ease, box-shadow .2s ease; } .wp-page-content textarea.form-input{ width:100%; min-height:100px; padding:12px 14px; resize:vertical; line-height:1.6; } .wp-page-content .form-input:focus{ border-color:var(--wp-blue); box-shadow:0 0 0 3px rgba(46,127,203,.14); } .wp-page-content .form-input::placeholder{ color:var(--wp-text-muted); } .wp-page-content .frm-message.text-alert{ display:none; font-size:12px; color:var(--wp-red); margin-top:4px; } .wp-page-content .frm-field.inp-valid .frm-message.text-alert{ display:block; } .wp-page-content .frm-field.inp-valid .form-input{ border-color:var(--wp-red); } /* "Тип упаковки" chip picker */ .wp-page-content .frm-chip-block{ margin-top:20px; display:flex; flex-direction:column; gap:9px; } .wp-page-content .frm-chip-row{ display:flex; flex-wrap:wrap; gap:8px; } .wp-page-content .frm-chip{ padding:9px 16px; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; user-select:none; border:1px solid var(--wp-border); background:#fff; color:var(--wp-text-muted); transition:border-color .2s ease, background-color .2s ease, color .2s ease; } .wp-page-content .frm-chip:hover{ border-color:var(--wp-border-hover); } .wp-page-content .frm-chip.active{ border-color:var(--wp-blue); background:rgba(46,127,203,.08); color:var(--wp-blue-dark); } /* file upload / dropzone */ .wp-page-content .frm-upload-block{ margin-top:20px; display:flex; flex-direction:column; gap:9px; } .wp-page-content .frm-dropzone{ display:flex; align-items:center; gap:14px; padding:16px; border:1.5px dashed var(--wp-border-hover); border-radius:6px; background:var(--wp-bg-panel); cursor:pointer; transition:border-color .2s ease, background-color .2s ease; } .wp-page-content .frm-dropzone:hover, .wp-page-content .frm-dropzone.hover{ border-color:var(--wp-blue); background:rgba(46,127,203,.06); } .wp-page-content .frm-dropzone-icon{ flex:none; width:40px; height:40px; border-radius:6px; background:rgba(46,127,203,.1); display:flex; align-items:center; justify-content:center; } .wp-page-content .frm-dropzone-text{ display:flex; flex-direction:column; gap:3px; text-align:left; } .wp-page-content .frm-dropzone-title{ font-size:14px; font-weight:700; color:var(--wp-ink); } .wp-page-content .frm-dropzone-sub{ font-size:13px; font-weight:500; color:var(--wp-text-muted); } .wp-page-content .frm-upload-progress{ display:none; } .wp-page-content .frm-upload-progress:has(#uploadForm_Status:not(:empty)){ display:block; } .wp-page-content .files-wrap .file-wrap{ margin-top:8px; } .wp-page-content .frm-file-attachment{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--wp-ink); background:var(--wp-bg-panel); border-radius:6px; padding:8px 12px; } .wp-page-content .frm-upload-block .desc-wrap{ font-size:12px; color:var(--wp-text-muted); line-height:1.5; margin:0; } .wp-page-content .frm-divider{ height:1px; background:var(--wp-border); margin-top:24px; } /* submit row */ .wp-page-content .frm-submit-row{ margin-top:22px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; } .wp-page-content .field-submit .btn.frm-submit-btn{ display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 32px; border:none; border-radius:10px; background:linear-gradient(135deg,var(--wp-btn-grad-a),var(--wp-btn-grad-b)); color:#fff; font-weight:700; font-size:15px; cursor:pointer; } .wp-page-content .field-submit .btn.frm-submit-btn:hover{ filter:brightness(1.12) saturate(1.1); color:#fff; } .wp-page-content .frm-agree{ display:flex; align-items:center; gap:10px; cursor:pointer; max-width:380px; } .wp-page-content .frm-agree-checkbox{ position:absolute; opacity:0; width:1px; height:1px; } .wp-page-content .frm-agree-box{ flex:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--wp-border-hover); background:#fff; display:flex; align-items:center; justify-content:center; transition:background-color .2s ease, border-color .2s ease; } .wp-page-content .frm-agree-box svg{ opacity:0; transition:opacity .2s ease; } .wp-page-content .frm-agree.is-checked .frm-agree-box{ background:var(--wp-blue); border-color:var(--wp-blue); } .wp-page-content .frm-agree.is-checked .frm-agree-box svg{ opacity:1; } .wp-page-content .frm-agree-text{ font-size:13px; font-weight:600; color:var(--wp-text-muted); line-height:1.5; } @media (max-width:820px){ .wp-page-content .frm-aside{ flex-basis:100%; } .wp-page-content .frm-main{ flex-basis:100%; } .wp-page-content .frm-grid-2{ grid-template-columns:1fr; } .wp-page-content .frm-grid-4{ grid-template-columns:1fr 1fr; } .wp-page-content .frm-grid-3{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .wp-page-content .frm-grid-4{ grid-template-columns:1fr; } .wp-page-content .frm-grid-3{ grid-template-columns:1fr; } } @media (max-width:900px){ .wp-page-content .info-contacts-panel-box{ padding:20px; } .wp-page-content .items-inner-wrap .items-wrap{ grid-template-columns:repeat(2,1fr); } .wp-page-content .tiles-box.items-info-panels .items-wrap{ grid-template-columns:1fr; } .wp-page-content .list-rows-3{ grid-template-columns:1fr; } .wp-page-content .items-categories .items-wrap{ grid-template-columns:1fr; } .wp-page-content .items-categories .items-wrap.items-grid-4{ grid-template-columns:1fr; } .wp-page-content .tiles-box.items-about .items-wrap, .wp-page-content .tiles-box.items-steps .items-wrap{ grid-template-columns:1fr; } .wp-page-content .wp-faq__grid{ grid-template-columns:1fr; } } /* SEO/intro text under the "Заказная продукция" tab's tile row on catalog_page_category.tpl (tab02). Self-contained (not relying on .wp-seo-text/.list-dots's usual styling) because this page's body wrapper is .wp-catalog-index, not the .wp-page-content every other custom- order page uses — those generic rules are all scoped ".wp-page-content ..." and silently don't match here, so the h2-title/p/list-dots look is redeclared locally instead. */ .wp-catalog__custom-text{ margin-top:32px; padding-top:32px; border-top:1px solid var(--wp-border); } .wp-catalog__custom-text .h2-title{ margin:0 0 16px; } .wp-catalog__custom-text p{ margin:0 0 14px; } .wp-catalog__custom-text p:last-child{ margin-bottom:0; } .wp-catalog__custom-text .h3-title{ margin:28px 0 12px; } .wp-catalog__custom-text .h3-title:first-of-type{ margin-top:0; } .wp-catalog__custom-text .list-dots{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px; } .wp-catalog__custom-text .list-dots li{ position:relative; padding-left:16px; font-size:14px; color:var(--wp-text); line-height:1.55; } .wp-catalog__custom-text .list-dots li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--wp-blue); } /* "Примеры работ" block, added after "Что нужно знать для расчёта стоимости" on all 18 custom-order detail pages. Placeholder tiles for now (no real work photos yet, per user) — dashed border + no background image so it reads clearly as "photo goes here", not a real broken image. Swap each .wp-work-examples__item for an once real photos are supplied. */ .wp-page-content .wp-work-examples{ margin:32px 0; } /* the block's own margin-top above already provides the 32px gap above it — without this, the heading's generic ".h2-title{margin-top:32px}" stacked an extra 32px on top of that (72/104px total depending on what precedes it), while the equivalent heading on "Виды X" right after it has this same reset, making the two gaps visibly unequal even though the block-level margins matched. */ .wp-page-content .wp-work-examples .h2-title{ margin-top:0; } /* "Виды X" heading, plain-variant (id="left-view", no ".type-bleed") — same fix as ".wp-work-examples .h2-title" above and for the same reason: the bleed variant of this same title-box already has ".title-box.type-bleed .h2-title:first-child{margin-top:0}", but the plain variant never needed it before now (whatever used to precede it happened to still add up to an even gap). Now that "Что нужно знать" can end up directly before it, its heading's un-reset "margin-top:32px" was stacking on top of the "+ *{margin-top:-8px}" collapse fix, landing at 64px instead of 32. */ .wp-page-content #left-view .h2-title{ margin-top:0; } /* Whatever block directly follows ".tiles-list-box.type-bleed" (order between it and "Примеры работ" has been flipped more than once — keep this order-agnostic instead of re-deriving it each time). That band's own 40px padding-bottom (see that rule's comment) collapses with this margin-top — since the gray band's own bottom edge already includes its 40px padding-bottom, the margin-top value here IS the visible gap. Was -8 (next block's heading actually overlapped 8px into the gray panel); bumped to 32 to match the standard gap used everywhere else between sections on this page, per request for a bigger gap here. The universal `+ *` (rather than naming ".wp-work-examples" specifically) is what makes it survive reordering; its 3-class specificity also beats any single component's own "margin-top:32px" rule (e.g. ".wp-advantages-top"), so it wins regardless of which one ends up here. */ .wp-page-content .tiles-list-box.type-bleed + *{ margin-top:32px; } .wp-page-content .wp-work-examples__grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; } .wp-page-content .wp-work-examples__item{ aspect-ratio:1 / 1; border-radius:var(--wp-radius-lg); background:var(--wp-bg-panel); border:1px dashed var(--wp-border); box-sizing:border-box; padding:16px; transition:box-shadow .3s ease, transform .3s ease; } /* once a real photo is supplied (vs. the empty grey placeholder above), switch to a white card with a solid border — matches the site's other photo-tile components instead of looking like an unfilled placeholder slot. */ .wp-page-content .wp-work-examples__item:has(img){ background:#fff; border-style:solid; } /* hover lift, same treatment as the site's other photo/category tiles (.item-tile-category-main:hover) — only on filled tiles, not the empty dashed placeholders. */ .wp-page-content .wp-work-examples__item:has(img):hover{ box-shadow:var(--wp-shadow-card); transform:translateY(-2px); } /* padding above + object-fit:contain (rather than cover) keeps the photo smaller within the tile with visible breathing room on all sides, instead of filling/cropping edge-to-edge. */ .wp-page-content .wp-work-examples__item img{ width:100%; height:100%; object-fit:contain; border-radius:inherit; display:block; } @media (max-width:900px){ .wp-page-content .wp-work-examples__grid{ grid-template-columns:repeat(3, 1fr); } } @media (max-width:600px){ .wp-page-content .wp-work-examples__grid{ grid-template-columns:repeat(2, 1fr); gap:10px; } } /* style2026.css caps ".wp-oplata__intro", ".wp-return__intro" and ".wp-delivery__intro" all at 760px (a leftover from some narrower design), so the line falls well short of the page's actual content width and reads as shifted to the left with a big empty gap on the right — remove the cap so it spans the full shell width. */ .wp-oplata__intro, .wp-return__intro, .wp-delivery__intro{ max-width:none; } /* /o-kompanii/ "Ассортимент интернет-магазина" intro line — style2026.css gives ".wp-about2026__notice" a gray callout treatment (gray background, bordered box); per request this reads as plain body text instead — white background, no border. Text colour matches the "WebPack — компания в Алматы..." paragraph above (.wp-about2026__mission p), which happens to be the same muted gray the callout text already was — only the box treatment needed removing. */ .wp-about2026__notice{ background:#fff; border:none; padding:0; color:#5C6270; } /* /oplata/ payment-method icons — user supplied real line-icon PNGs (no white circle, plain flat style like the homepage "Преимущества" .tile-ico icons) and explicitly asked for that look instead of style2026.css's ".wp-oplata__icon" default (white circle badge + card shadow), so drop the circle/shadow here and size like a plain icon slot. */ .wp-oplata__icon{ background:none; box-shadow:none; border-radius:0; width:34px; height:34px; } .wp-oplata__icon img{ width:100%; height:100%; object-fit:contain; display:block; } /* style2026.css's ".wp-oplata__card{align-items:flex-start}" pins the icon to the card's top edge — fine for the old short one-line circle badge, but now the card text (title + a sometimes-two-line description) is often taller than the 34px icon, leaving a much bigger gap below it than above. Centering the icon in the card's cross-axis keeps top/bottom space around it equal regardless of how many lines the text next to it wraps to. */ .wp-oplata__card{ align-items:center; } /* white background behind the icon-card grid, per request — style2026.css's own ".wp-oplata__card" is gray, so it still needs its own override to read against this. */ .wp-oplata__card{ background:#fff; } /* /vozvrat-tovara/ "advantage" cards — plain text originally, now given an icon (site's existing icon set, already brand-blue) alongside the text. Matches the .wp-oplata__card icon+text pattern: flex row, icon fixed-size and vertically centered against the text. */ .wp-return__advantage{ display:flex; align-items:center; gap:14px; background:#fff; padding:22px; } .wp-return__advantage-icon{ flex:none; width:34px; height:34px; } .wp-return__advantage-icon img{ width:100%; height:100%; object-fit:contain; display:block; } /* /dostavka/ and /oplata/ "Как мы работаем" steps — now use the exact same .item-tile-step markup (photo + circular number badge + title/text) as the "Этапы работы" section on the заказная продукция pages, per request to match that style. Those rules are all scoped ".wp-page-content ..." (custom-order page wrapper), but delivery.tpl/oplata.tpl render under a plain ".wp-root" with no ".wp-page-content" ancestor, so they silently didn't match here — duplicated with the right prefix instead of touching the original (shared by ~18 other pages) rule. */ .wp-delivery__steps .item-tile-step, .wp-oplata__steps .item-tile-step{ display:flex; flex-direction:column; gap:12px; } .wp-delivery__steps .item-tile-step .tile-photo-wrap, .wp-oplata__steps .item-tile-step .tile-photo-wrap{ position:relative; border-radius:var(--wp-radius); overflow:hidden; height:160px; } .wp-delivery__steps .item-tile-step .tile-photo, .wp-oplata__steps .item-tile-step .tile-photo{ width:100%; height:100%; } .wp-delivery__steps .item-tile-step .tile-photo img, .wp-oplata__steps .item-tile-step .tile-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .wp-delivery__steps .item-tile-step .tile-number, .wp-oplata__steps .item-tile-step .tile-number{ position:absolute; top:10px; left:10px; width:32px; height:32px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:var(--wp-blue); } .wp-delivery__steps .item-tile-step .tile-info-wrap .tile-title, .wp-oplata__steps .item-tile-step .tile-info-wrap .tile-title{ font-size:15px; font-weight:700; color:var(--wp-ink); margin-bottom:4px; } .wp-delivery__steps .item-tile-step .tile-info-wrap p, .wp-oplata__steps .item-tile-step .tile-info-wrap p{ margin:0; font-size:13px; color:var(--wp-text-muted); } /* the shared grid container already used padding-free ".wp-delivery__step"/".wp-oplata__step" card boxes (background/border/padding) — item-tile-step is a plain photo+text column with none of that, so it needs the parent grid gap only. */ .wp-delivery__steps, .wp-oplata__steps{ align-items:start; } /* "Что нужно знать для расчёта стоимости" tiles — icon added (only for labels the user supplied an icon for: Размер/Толщина/Цвет/Нанесение логотипа/Тираж; pages with other/extra labels — Материал, Плотность мешков, Европодвес/клапан, etc. — keep those tiles icon-less rather than guessing a mismatched icon for them). Number+title are grouped into a ".tile-content" wrapper (added alongside the icon by the same edit) so the card can go row layout — icon on the right, content block on the left — instead of the plain column stack icon-less tiles still use. */ .wp-page-content .item-tile-info-number:has(.tile-icon){ flex-direction:row; align-items:center; gap:14px; } .wp-page-content .item-tile-info-number .tile-content{ display:flex; align-items:center; gap:8px; } .wp-page-content .item-tile-info-number .tile-icon{ flex:none; width:40px; height:40px; } .wp-page-content .item-tile-info-number .tile-icon img{ width:100%; height:100%; object-fit:contain; display:block; } /* /o-kompanii/ "Ассортимент интернет-магазина" cards — photo added for the categories the user supplied one for (Плёнка/Картонная упаковка/Клейкие ленты); the rest (Пакеты, Упаковочное оборудование, Расходные материалы) stay text-only until photos arrive for them too, so this only needs to style ".wp-about2026__item-photo" where it's actually present. */ .wp-about2026__item-photo{ margin:-20px -20px 14px; border-radius:10px 10px 0 0; overflow:hidden; height:140px; } .wp-about2026__item-photo img{ width:100%; height:100%; object-fit:cover; display:block; } /* /zakaznaya-produktsiya/plenka/ subcategory cards (custom_plenka.tpl) — flat icon added before the title, same plain-icon-slot treatment as ".wp-oplata__icon". */ .main-catalog-icon{ flex:none; width:40px; height:40px; } .main-catalog-icon img{ width:100%; height:100%; object-fit:contain; display:block; } /* ---------- /news/ (page_news.tpl, both list and single-article) ---------- Neither ".wp-catalog-page"/".wp-product"/".wp-basket" nor ".wp-catalog-index" scope applies here, so this page fell back to the generic ".wp-root .breadcrumbs-box .menu" margin-bottom:16px + the plain ".h1-title" margin-top:32px — an uncontested 48px gap, double the ~16-24px every other page scope trims it down to. */ .wp-page-content.wp-news-page .breadcrumbs-box .menu{ margin-bottom:0; } .wp-page-content.wp-news-page .h1-title{ margin-top:0; } /* ---------- /news/ list (page_news.tpl) ---------- */ /* the 30-item news grid needs a tablet step between the shared ".items-categories" 4-column desktop grid and its 1-column mobile collapse (@900px) — that shared rule is used by ~19 custom-order pages with far fewer tiles, so this extra step is scoped to "#news-wrap" only rather than widening the shared breakpoint for everyone. */ @media (max-width:1100px) and (min-width:901px){ #news-wrap .items-wrap.items-grid-4{ grid-template-columns:repeat(3,1fr); } } @media (max-width:900px){ #news-wrap .items-wrap.items-grid-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ #news-wrap .items-wrap.items-grid-4{ grid-template-columns:1fr; } } /* article cards read top-to-bottom (photo/headline/date), not centered like the icon-led category tiles ".item-tile-category-main" is normally used for. */ #news-wrap .item-tile-category-main{ text-align:left; } #news-wrap .item-tile-category-main .tile-photo-wrap{ height:180px; } #news-wrap .item-tile-category-main .tile-title{ margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* pagination (navigate.tpl) — same design as .wp-catalog-page's, redeclared under .wp-page-content since /news/ is the first .wp-page-content page to need pagination. */ .wp-page-content .pagenav-box{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:40px; flex-wrap:wrap; } .wp-page-content .btn-page-nav{ width:36px; height:36px; border-radius:var(--wp-radius); display:flex; align-items:center; justify-content:center; color:var(--wp-text-muted); cursor:pointer; transition:background-color .2s ease; position:relative; text-decoration:none; } .wp-page-content .btn-page-nav:hover{ background:var(--wp-bg-panel); } .wp-page-content .btn-page-nav::before{ content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; } .wp-page-content .button-nav-prev::before{ transform:rotate(135deg); margin-left:3px; } .wp-page-content .button-nav-next::before{ transform:rotate(-45deg); margin-right:3px; } .wp-page-content .btn-page-nav.button-disabled{ opacity:.3; pointer-events:none; } .wp-page-content .pages-wrap{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; max-width:640px; } .wp-page-content .btn-page{ width:36px; height:36px; border-radius:var(--wp-radius); display:flex; align-items:center; justify-content:center; color:var(--wp-ink); font-weight:600; font-size:var(--fs-14); cursor:pointer; transition:background-color .2s ease; text-decoration:none; } .wp-page-content .btn-page:hover{ background:var(--wp-bg-panel); } .wp-page-content .btn-page.active{ background:var(--wp-blue); color:#fff; font-weight:700; }