.zp-blog-article__head { padding: 10px 0 0; } .zp-blog-article { position: relative; } .zp-blog-article::before { content: ""; position: absolute; inset: -140px 0 -80px 0; pointer-events: none; background: radial-gradient(900px 380px at 50% 120px, rgba(124,58,237,0.20), transparent 62%), radial-gradient(800px 320px at 10% 220px, rgba(250,204,21,0.10), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0)); opacity: 0.92; } .zp-blog-article__title { margin: 10px 0 0; font-size: clamp(34px, 4.8vw, 56px); line-height: 1.06; letter-spacing: -0.035em; max-width: 26ch; } .zp-blog-article__excerpt { margin: 12px 0 0; color: rgba(255,255,255,0.74); line-height: 1.6; max-width: 68ch; font-size: 17px; } .zp-blog-article__meta { margin-top: 12px; color: rgba(255,255,255,0.70); font-size: 13px; } .zp-blog-article__metaSep { margin: 0 8px; opacity: 0.6; } .zp-blog-article__hero { padding-top: 10px; } .zp-postHero { position: relative; height: clamp(220px, 28vw, 360px); overflow: hidden; border-radius: 22px; border: 1px solid rgba(235,241,228,0.10); background: linear-gradient(180deg, rgba(16,21,20,0.78), rgba(6,8,8,0.92)); box-shadow: 0 26px 90px rgba(0,0,0,0.62), 0 0 0 1px rgba(124,58,237,0.14), 0 0 60px rgba(124,58,237,0.10); isolation: isolate; } .zp-postHero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 320px at 22% 22%, rgba(199,255,0,0.12), transparent 55%), linear-gradient(180deg, rgba(0,0,0,0.00) 48%, rgba(0,0,0,0.72) 100%); opacity: 0.95; } .zp-postHero picture { display: block; width: 100%; height: 100%; } .zp-postHero__img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center; transition: transform 260ms ease, filter 260ms ease; } .zp-postHero:hover .zp-postHero__img { transform: scale(1.02); filter: saturate(1.04); } .zp-blog-article__body { padding: 18px 0 54px; } .zp-blogLayout { display: grid; grid-template-columns: 1fr 320px; gap: 42px; align-items: start; position: relative; z-index: 1; } @media (max-width: 1019px) { .zp-blogLayout { grid-template-columns: 1fr; gap: 18px; } } .zp-blogMain { border-radius: 20px; border: 1px solid rgba(235,241,228,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.12)); box-shadow: 0 18px 70px rgba(0,0,0,0.36); padding: clamp(16px, 2.2vw, 26px); } .zp-blogSide { display: grid; gap: 14px; } @media (min-width: 1020px) { .zp-blogSide { position: sticky; top: 110px; align-self: start; } } .zp-sideCard { border-radius: 18px; border: 1px solid rgba(235,241,228,0.10); background: linear-gradient(180deg, rgba(16,21,20,0.70), rgba(6,8,8,0.92)); box-shadow: 0 18px 70px rgba(0,0,0,0.42); padding: 14px; } .zp-sideCard--highlight { background: radial-gradient(900px 260px at 12% 0%, rgba(240,255,107,0.14), transparent 60%), radial-gradient(760px 220px at 80% 18%, rgba(124,58,237,0.16), transparent 55%), linear-gradient(180deg, rgba(16,21,20,0.75), rgba(6,8,8,0.94)); border-color: rgba(240,255,107,0.14); box-shadow: 0 22px 90px rgba(0,0,0,0.56), 0 0 0 1px rgba(240,255,107,0.10), 0 0 60px rgba(240,255,107,0.08); } .zp-sideCard__title { font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin: 0 0 10px; } .zp-sideList { display: grid; gap: 10px; } .zp-sideLink { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.18); color: rgba(255,255,255,0.92); transition: transform 160ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .zp-sideLink:hover { transform: translateY(-2px); background: rgba(0,0,0,0.26); border-color: rgba(250,204,21,0.22); box-shadow: 0 14px 34px rgba(0,0,0,0.30); } .zp-sideLink__thumb { width: 84px; aspect-ratio: 3 / 2; flex: 0 0 auto; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); } .zp-sideLink__thumbImg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 220ms ease; } .zp-sideLink:hover .zp-sideLink__thumbImg { transform: scale(1.02); } .zp-sideLink__title { font-size: 13px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zp-sideEmpty { color: rgba(255,255,255,0.70); font-size: 13px; line-height: 1.5; padding: 4px 0 2px; } .zp-topicChips { display: flex; flex-wrap: wrap; gap: 8px; } .zp-topicChip { display: inline-flex; align-items: center; padding: 7px 10px; 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: 12px; text-decoration: none; transition: transform 140ms ease, border-color 140ms ease, box-shadow 180ms ease, background 180ms ease; } .zp-topicChip:hover { transform: translateY(-2px); border-color: rgba(250,204,21,0.26); background: rgba(124,58,237,0.16); box-shadow: 0 0 0 3px rgba(250,204,21,0.10), 0 12px 28px rgba(0,0,0,0.28); } .zp-nextDrop { display: grid; gap: 12px; } .zp-nextDrop__text { color: rgba(255,255,255,0.76); line-height: 1.55; font-size: 13px; } .zp-nextDrop__cta { display: flex; } .zp-blog-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .zp-blog-article__tag { padding: 6px 10px; 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: 12px; transition: transform 140ms ease, border-color 140ms ease, box-shadow 180ms ease, background 180ms ease; } .zp-blog-article__tag:hover { transform: translateY(-1px); border-color: rgba(250,204,21,0.26); background: rgba(124,58,237,0.14); box-shadow: 0 0 0 3px rgba(250,204,21,0.10), 0 10px 22px rgba(0,0,0,0.22); } .zp-blog-article__content { line-height: 1.78; color: rgba(255,255,255,0.88); font-size: 17px; } .zp-blog-article__content h2, .zp-blog-article__content h3 { margin: 30px 0 10px; line-height: 1.15; } .zp-blog-article__content p { margin: 12px 0; } .zp-blog-article__content a { color: rgba(250,204,21,0.95); } .zp-blog-article__content pre { padding: 14px; border-radius: 14px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.10); overflow-x: auto; max-width: 100%; } .zp-blog-article__content img, .zp-blog-article__content video, .zp-blog-article__content iframe { max-width: 100%; height: auto; } @media (prefers-reduced-motion: reduce) { .zp-postHero__img, .zp-sideLink, .zp-sideLink__thumbImg, .zp-topicChip, .zp-blog-article__tag { transition: none; transform: none; } }