.zp-modal{ position:fixed; inset:0; z-index:100; display:none; } .zp-modal.is-open{display:block} .zp-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(10px); } .zp-modal__dialog{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(920px,calc(100% - 40px)); max-height:min(84vh,880px); border-radius:var(--radius-xl); border:1px solid rgba(235,241,228,.12); background:linear-gradient(180deg,rgba(16,21,20,.86),rgba(6,8,8,.94)); box-shadow:var(--shadow-soft),0 0 120px rgba(199,255,0,.08); overflow:hidden; } .zp-modal__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 12px; border-bottom:1px solid rgba(235,241,228,.08); } .zp-modal__title{font-weight:860;letter-spacing:.06em;text-transform:uppercase;font-size:.9rem;color:rgba(235,233,223,.86)} .zp-modal__close{ width:40px; height:40px; border-radius:999px; border:1px solid rgba(235,241,228,.12); background:rgba(6,8,8,.26); cursor:pointer; position:relative; } .zp-modal__close::before, .zp-modal__close::after{ content:""; position:absolute; inset:0; margin:auto; width:18px; height:2px; background:rgba(235,233,223,.84); transform:rotate(45deg); } .zp-modal__close::after{transform:rotate(-45deg)} .zp-modal__body{padding:14px} .zp-modal__media{ border-radius:var(--radius-lg); border:1px solid rgba(235,241,228,.10); background:rgba(16,21,20,.55); overflow:hidden; } .zp-modal__media img, .zp-modal__media video{ width:100%; height:auto; display:block; }