.zp-blog { overflow-x: clip; } .zp-blog .zp-container { max-width: 1200px; } .zp-blog__top { padding: 28px 0 10px; } .zp-blog__header { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } @media (min-width: 920px) { .zp-blog__header { grid-template-columns: 1fr auto; align-items: end; } } .zp-blog__crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: rgba(255,255,255,0.72); font-size: 12px; line-height: 18px; } .zp-blog__crumb { color: rgba(255,255,255,0.84); text-decoration: none; padding: 2px 6px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); } .zp-blog__crumb:hover { background: rgba(255,255,255,0.10); } .zp-blog__crumbSep { opacity: 0.55; } .zp-blog__title { margin: 10px 0 0; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; } .zp-blog__subtitle { margin: 10px 0 0; max-width: 70ch; color: rgba(255,255,255,0.74); line-height: 1.55; } .zp-blog__controls { display: grid; gap: 10px; } @media (min-width: 560px) { .zp-blog__controls { grid-template-columns: 1fr auto; align-items: center; } } .zp-blog__search { display: flex; } .zp-blog__searchInput { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.25); color: rgba(255,255,255,0.92); outline: none; } .zp-blog__searchInput:focus { border-color: rgba(250,204,21,0.55); box-shadow: 0 0 0 3px rgba(250,204,21,0.12); } .zp-blog__sort { display: flex; gap: 8px; align-items: center; justify-content: flex-end; } .zp-blog__sortLabel { font-size: 12px; color: rgba(255,255,255,0.72); } .zp-blog__sortSelect { padding: 10px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.25); color: rgba(255,255,255,0.92); } .zp-blog__layoutToggle { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .zp-blog__layoutBtn { appearance: none; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.86); padding: 8px 10px; border-radius: 999px; font-size: 12px; line-height: 16px; cursor: pointer; transition: transform 140ms ease, background 140ms ease, border-color 140ms ease; } .zp-blog__layoutBtn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.10); } .zp-blog__layoutBtn.is-active { background: rgba(250,204,21,0.95); color: rgba(0,0,0,0.92); border-color: rgba(250,204,21,0.65); } .zp-blog__subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .zp-blog__subcat { text-decoration: none; padding: 8px 12px; border-radius: 999px; background: rgba(124,58,237,0.10); border: 1px solid rgba(124,58,237,0.18); color: rgba(233,213,255,0.95); font-size: 13px; } .zp-blog__subcat:hover { background: rgba(124,58,237,0.14); } .zp-blog__list { padding: 14px 0 40px; } .zp-blog__grid { display: grid; gap: 14px; } .zp-blog-card { border-radius: 18px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); overflow: hidden; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; min-width: 0; } .zp-blog-card:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,0.35); border-color: rgba(250,204,21,0.18); } .zp-blog-card__media { display: block; color: inherit; text-decoration: none; } .zp-blog-card__mediaInner { position: relative; width: 100%; background: linear-gradient(135deg, rgba(250,204,21,0.10), rgba(124,58,237,0.12)); } .zp-blog[data-blog-image-ratio="16:9"] .zp-blog-card__mediaInner { aspect-ratio: 16 / 9; } .zp-blog[data-blog-image-ratio="4:3"] .zp-blog-card__mediaInner { aspect-ratio: 4 / 3; } .zp-blog[data-blog-image-ratio="1:1"] .zp-blog-card__mediaInner { aspect-ratio: 1 / 1; } .zp-blog-card__mediaPlaceholder { min-height: 140px; } .zp-blog-card__img { display: block; width: 100%; height: auto; max-width: 100%; transition: transform 240ms ease; transform-origin: center; } .zp-blog-card:hover .zp-blog-card__img { transform: scale(1.02); } .zp-blog-card__body { padding: 14px 14px 16px; } .zp-blog-card__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; color: rgba(255,255,255,0.70); font-size: 12px; } .zp-blog-card__cat { padding: 3px 8px; border-radius: 999px; background: rgba(124,58,237,0.10); border: 1px solid rgba(124,58,237,0.18); color: rgba(233,213,255,0.95); } .zp-blog-card__title { margin: 10px 0 0; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; } .zp-blog-card__title a { color: rgba(255,255,255,0.95); text-decoration: none; } .zp-blog-card__title a:hover { text-decoration: underline; } .zp-blog-card__excerpt { margin: 10px 0 0; color: rgba(255,255,255,0.74); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .zp-blog-card__tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; } .zp-blog-card__tag { padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.78); font-size: 12px; transition: transform 140ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; } .zp-blog-card__tag:hover { transform: translateY(-1px); border-color: rgba(250,204,21,0.22); box-shadow: 0 0 0 3px rgba(250,204,21,0.10); } @media (prefers-reduced-motion: reduce) { .zp-blog-card__img, .zp-blog-card__tag { transition: none; transform: none; } } .zp-blog__pager { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; } .zp-blog__pagerBtn { text-decoration: none; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.90); } .zp-blog__pagerBtn:hover { background: rgba(255,255,255,0.10); } .zp-blog__pagerBtn.is-disabled { opacity: 0.45; pointer-events: none; } .zp-blog__pagerInfo { color: rgba(255,255,255,0.74); font-size: 13px; } .zp-blog__empty { padding: 22px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); } .zp-blog__emptyTitle { font-size: 16px; font-weight: 600; } .zp-blog__emptyHint { margin-top: 8px; color: rgba(255,255,255,0.74); }