.blog-crumb { font-size:13.5px; color:var(--c-text-muted); padding:20px 0; } .blog-crumb a { color:var(--c-text-muted); } .blog-crumb a:hover { color:var(--c-primary); } .blog-layout { display:flex; gap:32px; align-items:flex-start; padding-bottom:60px; } .blog-main { flex:1; min-width:0; } .blog-side { width:330px; flex-shrink:0; } .blog-hero { display:block; background:#fff; border:1px solid var(--c-border); border-radius:16px; overflow:hidden; box-shadow:0 2px 16px rgba(15,23,42,.05); margin-bottom:26px; transition:box-shadow .25s; } .blog-hero:hover { box-shadow:0 12px 32px rgba(15,23,42,.12); } .blog-hero-img { position:relative; aspect-ratio:16/8; overflow:hidden; background:var(--c-bg-alt); } .blog-hero-img img { width:100%; height:100%; object-fit:contain; transition:transform .4s; } .blog-hero:hover .blog-hero-img img { transform:scale(1.03); } .blog-hero-tag { position:absolute; top:18px; left:18px; background:var(--c-primary); color:#fff; font-size:12px; font-weight:700; padding:6px 14px; border-radius:30px; letter-spacing:.5px; display:inline-flex; align-items:center; gap:5px; } .blog-hero-body { padding:24px 28px 28px; } .blog-date { font-size:13px; color:var(--c-text-muted); display:flex; align-items:center; gap:6px; margin-bottom:12px; } .blog-hero-body h2 { font-size:26px; font-weight:800; line-height:1.3; margin:0 0 12px; color:var(--c-text); letter-spacing:-.3px; } .blog-hero:hover h2 { color:var(--c-primary); } .blog-hero-body .summary { font-size:14.5px; color:var(--c-text-muted); line-height:1.7; margin:0 0 16px; } .blog-more { font-size:14px; font-weight:700; color:var(--c-primary); display:inline-flex; align-items:center; gap:6px; } .blog-row { display:flex; gap:22px; background:#fff; border:1px solid var(--c-border); border-radius:14px; overflow:hidden; box-shadow:0 1px 10px rgba(15,23,42,.04); margin-bottom:20px; transition:box-shadow .25s; } .blog-row:hover { box-shadow:0 10px 26px rgba(15,23,42,.10); } .blog-row-img { width:280px; flex-shrink:0; aspect-ratio:4/3; overflow:hidden; background:var(--c-bg-alt); } .blog-row-img img { width:100%; height:100%; object-fit:contain; transition:transform .4s; } .blog-row:hover .blog-row-img img { transform:scale(1.04); } .blog-row-body { flex:1; min-width:0; padding:20px 24px 20px 0; display:flex; flex-direction:column; justify-content:center; } .blog-row-body h3 { font-size:19px; font-weight:700; line-height:1.4; margin:0 0 10px; color:var(--c-text); } .blog-row:hover h3 { color:var(--c-primary); } .blog-row-body .summary { font-size:14px; color:var(--c-text-muted); line-height:1.65; margin:0 0 14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .side-card { background:#fff; border:1px solid var(--c-border); border-radius:14px; padding:20px 22px; margin-bottom:22px; box-shadow:0 1px 10px rgba(15,23,42,.04); } .side-title { font-size:16px; font-weight:800; color:var(--c-text); margin:0 0 16px; padding-left:12px; border-left:4px solid var(--c-primary); line-height:1.2; } .side-cat { display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--c-border); font-size:14px; color:var(--c-text); transition:color .15s; } .side-cat:last-child { border-bottom:0; } .side-cat:hover { color:var(--c-primary); } .side-cat-count { background:var(--c-bg-alt); color:var(--c-text-muted); font-size:12px; font-weight:600; min-width:24px; height:24px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; padding:0 8px; } .side-news { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--c-border); } .side-news:last-child { border-bottom:0; } .side-news-img { width:96px; height:62px; flex-shrink:0; border-radius:9px; overflow:hidden; background:var(--c-bg-alt); } .side-news-img img { width:100%; height:100%; object-fit:contain; } .side-news-body { flex:1; min-width:0; } .side-news-body h4 { font-size:13.5px; font-weight:600; line-height:1.45; margin:0 0 5px; color:var(--c-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .15s; } .side-news:hover h4 { color:var(--c-primary); } .side-news-date { font-size:12px; color:var(--c-text-muted); } .side-prod-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .side-prod { display:block; } .side-prod-img { aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--c-bg-alt); margin-bottom:7px; } .side-prod-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; } .side-prod:hover .side-prod-img img { transform:scale(1.05); } .side-prod-name { font-size:12.5px; font-weight:600; color:var(--c-text); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:center; } .side-prod:hover .side-prod-name { color:var(--c-primary); } .blog-pager { display:flex; justify-content:center; gap:6px; margin-top:36px; } .blog-pager a { padding:9px 15px; border:1px solid var(--c-border); border-radius:8px; color:var(--c-text); font-size:13.5px; font-weight:600; transition:all .15s; } .blog-pager a:hover { border-color:var(--c-primary); color:var(--c-primary); } .blog-pager a.on { background:var(--c-primary); border-color:var(--c-primary); color:#fff; } @media (max-width:980px) { .blog-layout { flex-direction:column; } .blog-side { width:100%; } } @media (max-width:640px) { .blog-row { flex-direction:column; } .blog-row-img { width:100%; aspect-ratio:16/9; } .blog-row-body { padding:18px 20px; } .blog-hero-body h2 { font-size:21px; } .blog-hero-img { aspect-ratio:16/9; } }