/* ============================================================ RAR PATHOLOGY · Figure + Lightbox styles (shared, module-wide) Small responsive thumbnails that expand to a full-scale popup. Thumbnail chrome lives under .rar-topic-content; the lightbox overlay is appended to so it escapes any card clipping. ============================================================ */ /* ---------- thumbnail button ---------- */ .rar-topic-content .atl-figure__btn { display: block; position: relative; width: 100%; padding: 0; border: 0; background: #f4f6fb; cursor: zoom-in; overflow: hidden; line-height: 0; } .rar-topic-content .atl-figure__btn:focus-visible { outline: 3px solid rgba(10, 132, 255, 0.55); outline-offset: -3px; } .rar-topic-content .atl-figure__btn .atl-figure__img { height: 168px; /* smaller thumbnail */ transition: transform 0.25s ease; } .rar-topic-content .atl-figure__btn:hover .atl-figure__img { transform: scale(1.05); } .rar-topic-content .atl-figure__expand { position: absolute; right: 8px; bottom: 8px; padding: 4px 9px; border-radius: 999px; background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.3; opacity: 0; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; } .rar-topic-content .atl-figure__btn:hover .atl-figure__expand, .rar-topic-content .atl-figure__btn:focus-visible .atl-figure__expand { opacity: 1; transform: translateY(0); } /* ---------- graceful fallback (missing image) ---------- */ .rar-topic-content .atl-figure.is-missing .atl-figure__img { display: none; } .rar-topic-content .atl-figure__pending { display: flex; align-items: center; justify-content: center; height: 168px; background: repeating-linear-gradient(45deg, rgba(94, 92, 230, 0.06) 0 12px, rgba(94, 92, 230, 0.11) 12px 24px); color: #4a3ea8; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.4; } /* ---------- lightbox overlay ---------- */ .rpf-lightbox { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 24px; } .rpf-lightbox[hidden] { display: none; } .rpf-lb-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 24, 0.82); backdrop-filter: blur(2px); } .rpf-lb-panel { position: relative; z-index: 1; max-width: min(1000px, 94vw); max-height: 92vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); } .rpf-lb-img { display: block; max-width: 100%; max-height: 74vh; object-fit: contain; background: #0b1220; } .rpf-lb-cap { padding: 14px 18px 16px; } .rpf-lb-desc { margin: 0; color: #111318; font-size: 15px; font-weight: 700; line-height: 1.5; } .rpf-lb-cite { margin: 6px 0 0; color: #4b5563; font-size: 12px; font-style: italic; line-height: 1.45; } .rpf-lb-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; } .rpf-lb-x:hover { background: rgba(15, 23, 42, 0.92); } .rpf-lb-x:focus-visible { outline: 3px solid rgba(10, 132, 255, 0.7); outline-offset: 2px; } body.rpf-lb-open { overflow: hidden; }