/* Homepage visual polish — metallo-obrabotka.com Loaded LAST in so it wins over template_0b0edc4d-purged.css and a11y-polish. Goal: de-template the home page (kill the "1C-Bitrix catalog grid" look). Created 2026-06-08. Local only — not deployed without approval. */ /* ---- Hero: desaturate stock-photo tint (gradient dominates, filter affects right side) ---- */ .metallo-home-hero__media{ filter:saturate(.55) brightness(.95); } /* ---- "Что делаем": flat 1px-seam table grid -> modern cards ---- */ .metallo-home-services{ gap:16px; background:transparent; border:0; align-items:start; } .metallo-home-service{ min-height:168px; padding:26px 26px 24px 28px; border:1px solid #e3e7ec; border-radius:8px; position:relative; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } /* industrial-red accent bar grows in on hover */ .metallo-home-service::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#b52126; transform:scaleY(0); transform-origin:top center; transition:transform .22s ease; } .metallo-home-service:hover{ transform:translateY(-3px); border-color:#c7ccd3; box-shadow:0 12px 30px rgba(17,24,39,.10); } .metallo-home-service:hover::before{ transform:scaleY(1); } /* title + animated arrow (replaces the broken `:hover strong` rule) */ .metallo-home-service h3{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; font-weight:700; color:#1f252c; transition:color .18s ease; } .metallo-home-service h3::after{ content:""; flex:0 0 22px; width:22px; height:22px; margin-top:2px; background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7ccd3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); opacity:.7; transition:transform .18s ease, opacity .18s ease; } .metallo-home-service:hover h3{ color:#b52126; } .metallo-home-service:hover h3::after{ transform:translateX(4px); opacity:1; } /* ---- "Что можем обработать": real machine-park / capability block ---- */ .metallo-caps{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr); gap:32px; align-items:stretch; margin-top:6px; } .metallo-caps__media{ position:relative; margin:0; border-radius:8px; overflow:hidden; background:#f5f6f8; min-height:340px; } .metallo-caps__media img{ display:block; width:100%; height:100%; min-height:340px; object-fit:cover; } .metallo-caps__media figcaption{ position:absolute; left:0; right:0; bottom:0; padding:16px 18px; background:linear-gradient(transparent, rgba(13,18,23,.85)); color:#fff; font-size:13px; line-height:1.45; } .metallo-caps__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; justify-content:center; border:1px solid #e3e7ec; border-radius:8px; overflow:hidden; } .metallo-caps__list li{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:17px 22px; border-bottom:1px solid #eef1f4; } .metallo-caps__list li:last-child{ border-bottom:0; } .metallo-caps__op{ color:#4f5964; font-size:15px; } .metallo-caps__list b{ flex:0 0 auto; color:#1f252c; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; } .metallo-caps__note{ margin:18px 0 0; padding-left:14px; border-left:3px solid #b52126; color:#4f5964; font-size:14px; line-height:1.55; } @media(max-width:860px){ .metallo-caps{ grid-template-columns:1fr; gap:18px; } .metallo-caps__media, .metallo-caps__media img{ min-height:220px; } } /* ---- Trust: ISO certificate + real case + industries ---- */ .metallo-trust{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr); gap:32px; align-items:stretch; } .metallo-trust__cert-col{ display:flex; flex-direction:column; gap:12px; } .metallo-trust__qc-photo{ margin:0; border:1px solid #e3e7ec; border-radius:8px; overflow:hidden; background:#f5f6f8; } .metallo-trust__qc-photo img{ display:block; width:100%; height:220px; object-fit:cover; object-position:center; } .metallo-trust__cert{ position:relative; display:block; border:1px solid #e3e7ec; border-radius:8px; overflow:hidden; background:#f5f6f8; text-decoration:none; min-height:320px; } .metallo-trust__cert img{ display:block; width:100%; height:100%; min-height:320px; object-fit:cover; object-position:top center; } .metallo-trust__cert span{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background:linear-gradient(transparent, rgba(13,18,23,.88)); color:#fff; font-size:13px; line-height:1.4; } .metallo-trust__facts{ display:flex; flex-direction:column; justify-content:center; gap:14px; } .metallo-trust__fact{ padding:18px 20px; border:1px solid #e3e7ec; border-left:3px solid #b52126; border-radius:8px; } .metallo-trust__fact b{ display:block; margin-bottom:6px; color:#1f252c; font-size:16px; } .metallo-trust__fact p{ margin:0; color:#4f5964; font-size:15px; line-height:1.55; } @media(max-width:860px){ .metallo-trust{ grid-template-columns:1fr; gap:18px; } .metallo-trust__cert{ min-height:280px; } } /* ---- "Фото производства": real photo gallery from /company/photo/ ---- */ .metallo-gallery{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:6px; } .metallo-gallery__item{ display:block; position:relative; aspect-ratio:1/1; border:1px solid #e3e7ec; border-radius:8px; overflow:hidden; background:#f5f6f8; } .metallo-gallery__item img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; } .metallo-gallery__item:hover img{ transform:scale(1.05); } @media(max-width:860px){ .metallo-gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:600px){ .metallo-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } .metallo-home-service__thumb{ height:120px; } } /* ---- "Что говорят заказчики": real client reviews ---- */ .metallo-reviews{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:6px; } .metallo-review{ margin:0; display:flex; flex-direction:column; gap:12px; padding:24px; background:#fff; border:1px solid #e3e7ec; border-radius:8px; } .metallo-review__stars{ color:#f5a623; font-size:16px; letter-spacing:3px; line-height:1; } .metallo-review blockquote{ margin:0; color:#2d333a; font-size:15px; line-height:1.6; } .metallo-review figcaption{ margin-top:auto; padding-top:8px; color:#1f252c; font-weight:700; font-size:14px; } @media(max-width:860px){ .metallo-reviews{ grid-template-columns:1fr; } } /* ---- Service card with thumbnail photo ---- */ .metallo-home-service--has-img{ padding:0; display:flex; flex-direction:column; } .metallo-home-service__thumb{ height:160px; overflow:hidden; flex-shrink:0; } .metallo-home-service__thumb img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .35s ease; } .metallo-home-service--has-img:hover .metallo-home-service__thumb img{ transform:scale(1.05); } .metallo-home-service__body{ padding:20px 26px 22px 28px; flex:1; display:flex; flex-direction:column; } .metallo-home-service--has-img h3{ margin-top:0; } /* ---- Machine park: process photo above capability table ---- */ .metallo-caps__right{ display:flex; flex-direction:column; gap:12px; } .metallo-caps__process-img{ margin:0; border-radius:8px; overflow:hidden; background:#f5f6f8; height:170px; flex-shrink:0; } .metallo-caps__process-img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; } @media(max-width:860px){ .metallo-caps__process-img{ height:140px; } } /* ---- Mobile: prevent sub-14px captions ---- */ @media(max-width:768px){ .metallo-caps__media figcaption,.metallo-trust__cert span{font-size:14px;} }