.zp-card{ position:relative; overflow:hidden; border-radius:var(--radius-xl); border:1px solid rgba(235,241,228,.10); background:linear-gradient(180deg,rgba(16,21,20,.70),rgba(11,18,11,.50)); box-shadow:0 18px 70px rgba(0,0,0,.55); transform:translate3d(0,0,0); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; outline:none; } .zp-card:hover, .zp-card:focus-visible{ transform:translateY(-4px); border-color:var(--zp-stroke-2); box-shadow:var(--shadow-glow),0 0 80px rgba(199,255,0,.06); } .zp-card__top{position:relative} .zp-card__img{ width:100%; height:220px; object-fit:cover; filter:saturate(1.08) contrast(1.02); opacity:.92; } .zp-card__img--placeholder{ height:220px; background: radial-gradient(900px 360px at 20% 10%,rgba(199,255,0,.20),transparent 55%), radial-gradient(700px 320px at 80% 40%,rgba(211,30,45,.14),transparent 60%), linear-gradient(180deg,rgba(16,21,20,.78),rgba(6,8,8,.92)); } .zp-card__glow{ position:absolute; inset:auto -20% -35% -20%; height:220px; background:radial-gradient(circle at 50% 30%,rgba(240,255,107,.28),transparent 58%); filter:blur(14px); opacity:.7; pointer-events:none; } .zp-card__body{padding:18px 18px 20px} .zp-card__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px} .zp-card__chip{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(235,233,223,.70); padding:7px 10px; border-radius:999px; border:1px solid rgba(235,241,228,.10); background:rgba(6,8,8,.22); } .zp-card__titleRow{display:grid;gap:6px} .zp-card__sub{color:rgba(235,233,223,.70);font-size:.96rem} .zp-card__p{margin:12px 0 0;color:rgba(235,233,223,.74);max-width:70ch} .zp-card__cta{margin-top:16px} @media (prefers-reduced-motion:reduce){ .zp-card{transition:none} }