/* sizkz — global smoothness & perf layer. Injected into of every HTML page after the original styles, so it can override timing/easing without touching vendor CSS. */ /* ════════════════════════════════════════════════════════════════════════ ATG GLOVE DETAIL PAGE — REDESIGN (v4, matches original ATG hierarchy) ──────────────────────────────────────────────────────────────────────── */ /* === HERO with lifestyle background photo === */ .atg-hero { position: relative; min-height: 320px; background-size: cover; background-position: center; padding: 28px 0 56px; margin: 16px 0 0; } .atg-hero .container { position: relative; } .atg-hero .hero-top { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 28px; } .atg-hero .catalog-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.96); color: #0f172a; border: 1px solid #e2e8f0; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease; backdrop-filter: blur(4px); } .atg-hero .catalog-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.12); color: #1e3a8a; } .atg-hero .hero-content { max-width: 720px; } .atg-hero .hero-tag { display: inline-block; background: #dc2626; color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: .4px; margin-bottom: 14px; } .atg-hero .hero-title { font-size: 48px; line-height: 1.05; font-weight: 800; color: #0f172a; margin: 0 0 16px; letter-spacing: -.5px; } .atg-hero .hero-tagline { font-size: 18px; line-height: 1.55; color: #1e293b; margin: 0; max-width: 640px; } @media (max-width: 768px) { .atg-hero { min-height: 240px; padding: 20px 0 36px; } .atg-hero .hero-title { font-size: 32px; } .atg-hero .hero-tagline { font-size: 15px; } .atg-hero .catalog-btn { font-size: 13px; padding: 8px 14px; } } /* === PRODUCT MAIN: image + info two-column === */ .product-main { padding: 56px 0; background: #fff; } .product-main .pmain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } @media (max-width: 768px) { .product-main { padding: 32px 0; } .product-main .pmain-grid { grid-template-columns: 1fr; gap: 28px; } } .product-main .pmain-image { background: #f8fafc; border-radius: 16px; padding: 32px; text-align: center; } .product-main .pmain-image img { max-width: 100%; max-height: 420px; width: auto; filter: drop-shadow(0 12px 24px rgba(15,23,42,.1)); } .product-main .pmain-cat { display: inline-block; background: #ecfdf5; color: #166534; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; margin-bottom: 8px; } .product-main h2 { font-size: 28px; font-weight: 700; color: #0f172a; margin: 4px 0 12px; } .product-main .pmain-desc { font-size: 16px; line-height: 1.65; color: #475569; margin-bottom: 24px; } .product-main .pmain-cta { background: #f0f7ff; border-radius: 12px; padding: 20px 24px; } .product-main .pmain-cta h4 { font-size: 16px; font-weight: 600; color: #1e3a8a; margin: 0 0 6px; } .product-main .pmain-cta p { font-size: 14px; line-height: 1.55; color: #475569; margin-bottom: 14px; } .product-main .cta-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .product-main .btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff !important; padding: 11px 26px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; display: inline-block; transition: transform .15s ease, box-shadow .2s ease; } .product-main .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(37,99,235,.32); color: #fff; } .product-main .cta-phone { color: #1e3a8a; font-weight: 500; text-decoration: none; } .product-main .pmain-maker { font-size: 13px; color: #64748b; margin: 20px 0 0; } /* === VARIANTS: clean cards with photo + SKU + design description === */ .variants { background: #fafbfc; padding: 56px 0; } .variants h2 { font-size: 26px; font-weight: 700; color: #0f172a; margin-bottom: 28px; } .variants .vgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 640px) { .variants .vgrid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .variants .vgrid { grid-template-columns: repeat(5, 1fr); gap: 20px; } } .variants .vcard { background: #fff; border-radius: 12px; padding: 18px 14px; text-align: center; border: 1px solid transparent; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; cursor: pointer; } .variants .vcard:hover { border-color: #2563eb; transform: translateY(-3px); box-shadow: 0 10px 24px -8px rgba(15,23,42,.12); } .variants .vcard-img img { width: 100%; height: auto; max-height: 140px; object-fit: contain; } .variants .vcard-sku { font-size: 15px; font-weight: 600; color: #0f172a; margin: 12px 0 4px; } .variants .vcard-desc { font-size: 12.5px; color: #64748b; line-height: 1.4; min-height: 2.8em; } /* === SPECS TABLE: compact, no big mid-page banner === */ .product-specs { padding: 56px 0; background: #fff; } .product-specs h2 { font-size: 26px; font-weight: 700; color: #0f172a; margin-bottom: 6px; } .product-specs .specs-sub { font-size: 14px; color: #64748b; margin-bottom: 24px; } .product-specs .specs-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 12px; } .product-specs .specs-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14px; } .product-specs .specs-table .spec-th-label, .product-specs .specs-table .spec-th-sku { background: #f8fafc; padding: 14px 14px; text-align: center; font-weight: 600; color: #334155; border-bottom: 1px solid #e5e7eb; font-size: 13px; } .product-specs .specs-table .spec-th-label { text-align: left; min-width: 200px; } .product-specs .specs-table tbody th { background: #fafbfc; padding: 12px 14px; text-align: left; font-weight: 500; color: #475569; font-size: 13.5px; border-bottom: 1px solid #f1f5f9; } .product-specs .specs-table tbody td { padding: 12px 14px; text-align: center; border-bottom: 1px solid #f1f5f9; color: #1e293b; } .product-specs .specs-table tbody tr:last-child th, .product-specs .specs-table tbody tr:last-child td { border-bottom: none; } .product-specs .specs-table tbody tr.en-row { background: #fffbeb; } .product-specs .specs-table tbody tr.en-row td { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: #92400e; } .product-specs .specs-table tbody tr:hover th, .product-specs .specs-table tbody tr:hover td { background: #eff6ff; } /* === INDUSTRIES: subtle cards === */ .industries { padding: 56px 0; background: #fafbfc; } .industries h2 { font-size: 26px; font-weight: 700; color: #0f172a; text-align: center; margin-bottom: 32px; } .industries .ind-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 14px; } @media (min-width: 640px) { .industries .ind-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .industries .ind-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .industries .ind-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px 24px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .industries .ind-card:hover { transform: translateY(-2px); border-color: #93c5fd; box-shadow: 0 8px 20px -6px rgba(15,23,42,.1); } .industries .ind-card strong { display: block; font-size: 15px; color: #0f172a; margin-bottom: 6px; } .industries .ind-card p { font-size: 13.5px; color: #64748b; line-height: 1.55; margin: 0; } /* ════════════════════════════════════════════════════════════════════════ END ATG DETAIL REDESIGN — Old mfamask spec overrides below are inactive on new pages but kept for /ru/*.html mask pages that still use #product-info / .product-options class names. ──────────────────────────────────────────────────────────────────────── */ /* === Hero block — soft gradient backdrop, bigger image, hover-zoom === */ #product-info { margin-top: 24px !important; } #product-info > .row > .image-content > div { background: linear-gradient(135deg, #f1f5fb 0%, #e8f1fa 100%) !important; border-radius: 18px !important; padding: 48px !important; position: relative; overflow: hidden; } #product-info > .row > .image-content > div::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.08), transparent 50%); pointer-events: none; } #product-info img.main-image { position: relative; z-index: 1; transition: transform .4s cubic-bezier(.2, .9, .25, 1); filter: drop-shadow(0 12px 24px rgba(15, 23, 42, .12)); } #product-info > .row > .image-content > div:hover img.main-image { transform: scale(1.04); } /* Hero title — bigger, tighter */ #product-info .pname { font-size: 32px !important; line-height: 1.15 !important; font-weight: 700 !important; margin: 8px 0 14px !important; color: #0f172a !important; } #product-info .pcategory { display: inline-block !important; background: linear-gradient(135deg, #dbf2c5, #d9fec5) !important; color: #14532d !important; padding: 6px 14px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .3px; text-transform: uppercase; margin-bottom: 4px !important; } #product-info .product-sort-desc { font-size: 16px !important; line-height: 1.65 !important; color: #475569 !important; } /* CTA "Запросить цену" — make it pop */ #product-info .right-bar > div[style*="background:#f0f9ff"] { background: linear-gradient(135deg, #eff6ff, #dbeafe) !important; border: none !important; box-shadow: 0 4px 14px rgba(37, 99, 235, .08); } #product-info .right-bar > div[style*="background:#f0f9ff"] h4 { color: #1e3a8a !important; font-weight: 600; } #product-info .btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; border: none !important; box-shadow: 0 4px 12px rgba(37, 99, 235, .25) !important; transition: transform .15s ease, box-shadow .2s ease !important; } #product-info .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(37, 99, 235, .32) !important; } /* === Variant gallery — card hover lift, polished spacing === */ .atg-variants { background: linear-gradient(180deg, #f8fafc 0%, #f1f5fb 100%) !important; padding: 56px 0 !important; } .atg-variants h2 { font-size: 26px !important; font-weight: 700; color: #0f172a; } .atg-variants .variant-card { border: 1px solid #e2e8f0 !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); cursor: pointer; position: relative; overflow: hidden; } .atg-variants .variant-card::after { content: ""; position: absolute; inset: 0; border-radius: 14px; box-shadow: inset 0 -3px 0 0 transparent; transition: box-shadow .25s ease; pointer-events: none; } .atg-variants .variant-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 32px -10px rgba(15, 23, 42, .15) !important; border-color: #2563eb !important; } .atg-variants .variant-card:hover::after { box-shadow: inset 0 -3px 0 0 #2563eb; } /* === Spec table — alternating rows, sticky first column, colored EN ratings === */ .product-specs { padding: 56px 0 !important; } .product-specs h2 { font-size: 26px !important; font-weight: 700; color: #0f172a; } .product-specs table { border-collapse: separate !important; border-spacing: 0; } .product-specs thead th { background: linear-gradient(135deg, #1e3a8a, #2563eb) !important; color: #fff !important; border: none !important; font-size: 13px !important; letter-spacing: .4px; } .product-specs thead th:first-child { border-top-left-radius: 8px; } .product-specs thead th:last-child { border-top-right-radius: 8px; } .product-specs tbody tr:nth-child(even) th, .product-specs tbody tr:nth-child(even) td { background-color: #fafbfc !important; } .product-specs tbody tr:hover th, .product-specs tbody tr:hover td { background-color: #eff6ff !important; } .product-specs tbody th { font-weight: 500; color: #334155 !important; } /* Highlight EN-rating rows */ .product-specs tbody tr:has(th:where([data-en-row])), .product-specs tbody tr.en-rating-row th { background-color: #fff8e1 !important; } /* === PDF download box — full-width banner === */ .product-specs > .container > div[style*="background:#f0f9ff"] { background: linear-gradient(135deg, #1e3a8a, #2563eb) !important; color: #fff !important; padding: 28px 32px !important; } .product-specs > .container > div[style*="background:#f0f9ff"] h4 { color: #fff !important; } .product-specs > .container > div[style*="background:#f0f9ff"] p { color: #dbeafe !important; } .product-specs > .container > div[style*="background:#f0f9ff"] .btn-primary { background: #fff !important; color: #1e3a8a !important; font-weight: 600; border: none !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .12) !important; } .product-specs > .container > div[style*="background:#f0f9ff"] .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18) !important; } /* === Industries section — better cards === */ .product-options h2 { font-size: 26px !important; font-weight: 700; color: #0f172a; } .product-options .col-md-4 > div, .product-options .col-sm-6 > div { border: 1px solid #e2e8f0 !important; border-radius: 14px !important; padding: 28px 24px !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; position: relative; overflow: hidden; } .product-options .col-md-4 > div::before, .product-options .col-sm-6 > div::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, #2563eb, #06b6d4); border-top-left-radius: 14px; border-bottom-left-radius: 14px; opacity: 0; transition: opacity .25s ease; } .product-options .col-md-4 > div:hover, .product-options .col-sm-6 > div:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -8px rgba(15, 23, 42, .12) !important; border-color: #93c5fd !important; } .product-options .col-md-4 > div:hover::before, .product-options .col-sm-6 > div:hover::before { opacity: 1; } .product-options .col-md-4 strong, .product-options .col-sm-6 strong { font-size: 16px; color: #0f172a; display: block; margin-bottom: 6px; } .product-options .col-md-4 p, .product-options .col-sm-6 p { color: #64748b !important; font-size: 14px; line-height: 1.55; } /* === Product listing: responsive grid (mobile 2 cols, tablet 3, desktop 4) === mfamask base uses .product-list { display:table } and .list-item { float:left; width:calc(...) }. We override aggressively with grid + !important so this wins regardless of mfamask's media queries and floats. */ .product-list { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; padding: 0 !important; width: 100% !important; } @media (min-width: 768px) { .product-list { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; } } @media (min-width: 992px) { .product-list { grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; } } .product-list .list-item { width: 100% !important; margin: 0 !important; float: none !important; display: flex !important; flex-direction: column; } .product-list .list-item .inner, .product-list .list-item .item-group { height: 100%; display: flex; flex-direction: column; } .product-list .list-image { flex: 1; } .product-list .list-image img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: contain; background: #f8fafc; border-radius: 12px !important; padding: 8px; } .product-list .list-item .title, .product-list .list-item h5.title { font-size: 14px !important; line-height: 1.4 !important; margin: 12px 8px 4px !important; color: #1a202c !important; font-weight: 500 !important; height: auto !important; min-height: 2.8em; padding: 0 !important; text-align: center; } .product-list .list-item .options { padding: 8px 12px 14px !important; margin-top: 4px; text-align: center; } /* Kill mfamask's grey horizontal separator (::before of .options) — looks ugly in grid */ .product-list .list-item .options::before { content: none !important; display: none !important; } .product-list .list-item .options a { font-size: 13px !important; } /* === Smooth scroll & font rendering === */ html { scroll-behavior: smooth; text-rendering: optimizeLegibility; } body, html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* === Universal transition for common interactive elements === */ a, button, .btn, input[type="submit"], input[type="button"], .card, .product, .product-item, .menu-item, .nav-item, .icon, .social a, img[loading="lazy"] { transition: transform 220ms cubic-bezier(.2, .9, .25, 1), opacity 220ms cubic-bezier(.2, .9, .25, 1), box-shadow 220ms cubic-bezier(.2, .9, .25, 1), color 180ms ease, background-color 180ms ease, border-color 180ms ease; } /* Cards / product tiles — subtle lift on hover */ .card:hover, .product:hover, .product-item:hover, [class*="product-card"]:hover, [class*="product-item"]:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .12), 0 4px 10px -4px rgba(0, 0, 0, .08); } /* Buttons — pressed feel */ .btn:active, button:active { transform: translateY(1px) scale(.98); } /* Image fade-in on load (lazy images) */ img[loading="lazy"] { opacity: 0; } img[loading="lazy"].loaded, img[loading="lazy"][src]:not([src=""]) { opacity: 1; } /* GPU hint for elements we actually move */ .card, .product, .product-item, .btn, [class*="hover-lift"] { will-change: transform; } /* === Smooth Owl/Slick carousels — softer easing === */ .owl-carousel .owl-item, .slick-slide { transition-timing-function: cubic-bezier(.2, .9, .25, 1) !important; } /* === Anchor link offset (sticky headers don't hide content) === */ :target { scroll-margin-top: 100px; } /* === Respect user preference === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .card:hover, .product:hover { transform: none; } } /* === Font-display swap on Google Fonts (avoid invisible text) === */ @font-face { font-display: swap; } /* === Slightly tighten focus ring (accessibility, but pretty) === */ :focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }