/* ====================================================== EWO CONTENT PHOTO MODAL (moon-glass) - No scrollbars - Zoom (wheel / pinch / dblclick) - Grab + pan (mouse/touch) - Drop-in for content pages Expected triggers: Modal markup (place near end of ): ====================================================== */ /* ---------- Scroll lock when modal open ---------- */ body.is-modal-open{ position: fixed; width: 100%; overflow: hidden; } /* ---------- Dialog base ---------- */ #ewo-photo-modal{ border: none; padding: 0; background: transparent; width: min(1600px, calc(100vw - 1.6rem)); margin: auto; } #ewo-photo-modal::backdrop{ background: rgba(6, 8, 14, 0.78); backdrop-filter: blur(2px); } /* Click veil (inside dialog for reliable close behavior) */ #ewo-photo-modal .ewo-photo-veil{ position: fixed; inset: 0; background: transparent; } /* ---------- Moon-glass panel ---------- */ #ewo-photo-modal .ewo-photo-panel{ position: relative; height: 100%; border-radius: 18px; background: radial-gradient(420px 220px at 18% 12%, rgba(255,245,225,0.10), transparent 60%), radial-gradient(520px 260px at 80% 35%, rgba(170,210,255,0.10), transparent 65%), rgba(10,14,26,0.78); border: 1px solid #565349; box-shadow: 0 24px 80px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter: blur(10px); overflow: hidden; /* IMPORTANT: no scrollbars */ } /* Soft internal glow */ #ewo-photo-modal .ewo-photo-panel::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(16px 16px at 20% 28%, rgba(255, 230, 180, 0.22), transparent 70%), radial-gradient(18px 18px at 62% 22%, rgba(180, 215, 255, 0.18), transparent 70%), radial-gradient(14px 14px at 82% 56%, rgba(255, 241, 193, 0.14), transparent 70%); opacity: .45; filter: blur(1px); } /* ---------- Close ---------- */ #ewo-photo-modal .ewo-photo-close{ position: absolute; top: .65rem; right: .65rem; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; border: 1px solid #565349; background: rgba(10,14,26,0.55); color: rgba(255, 236, 200, 0.92); font-size: 28px; line-height: 1; cursor: pointer; z-index: 5; } #ewo-photo-modal .ewo-photo-close:hover{ border-color: #565349; color: rgba(255, 250, 235, 0.98); } #ewo-photo-modal .ewo-photo-close:focus-visible{ outline: 2px solid rgba(180,215,255,.75); outline-offset: 2px; } /* ---------- Stage (image area) ---------- */ #ewo-photo-modal .ewo-photo-stage{ /* This is the pan/zoom viewport */ height: calc(100% - 45px); width: 100%; display: grid; place-items: center; /* IMPORTANT: no scrollbars */ overflow: hidden; /* Prevent browser gestures fighting pan/zoom */ touch-action: none; /* Subtle contrast field */ background: radial-gradient(circle at 50% 40%, rgba(0,0,0,0.35), rgba(0,0,0,0.55)); } /* Image baseline (JS drives transform) */ #ewo-photo-modal .ewo-photo-img{ max-width: 100%; max-height: 90vh; /* key line */ width: auto; height: auto; object-fit: contain; margin: 0 auto; user-select: none; -webkit-user-drag: none; transform: translate3d(0,0,0) scale(1); transform-origin: 50% 50%; will-change: transform; border-radius: 14px; border: 1px solid #565349; box-shadow: 0 14px 42px rgba(0,0,0,0.55); cursor: zoom-in; } /* Caption (sits under stage) */ #ewo-photo-modal .ewo-photo-cap{ height: 45px; padding: .2rem 1rem; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #565349; text-transform: uppercase; letter-spacing: 0.08em; font-family: "IMFellSC", serif; background: rgba(0,0,0,0.28); border-top: 1px solid #565349; } /* State cursors */ #ewo-photo-modal.is-zoomed .ewo-photo-img{ cursor: grab; } #ewo-photo-modal.is-panning .ewo-photo-img{ cursor: grabbing; } /* Small screens */ @media (max-width: 520px){ #ewo-photo-modal{ width: calc(100vw - 1rem); height: calc(100vh - 1rem); } #ewo-photo-modal .ewo-photo-cap{ height: auto; min-height: 58px; padding: .75rem .85rem; } } /* ---------- Prev / Next nav ---------- */ #ewo-photo-modal .ewo-photo-nav{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; border: 1px solid #565349; background: radial-gradient(18px 18px at 30% 30%, rgba(255,245,225,0.14), transparent 70%), radial-gradient(22px 22px at 70% 60%, rgba(170,210,255,0.10), transparent 72%), rgba(10,14,26,0.55); color: rgba(255, 236, 200, 0.92); font-size: 34px; line-height: 1; cursor: pointer; box-shadow: 0 14px 42px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter: blur(10px); transition: transform 120ms ease, border-color 120ms ease, color 120ms ease, background 120ms ease; } /* Position */ #ewo-photo-modal .ewo-photo-prev{ left: .65rem; } #ewo-photo-modal .ewo-photo-next{ right: .65rem; } /* Hover */ #ewo-photo-modal .ewo-photo-nav:hover{ border-color: #565349; color: rgba(255, 250, 235, 0.98); transform: translateY(-50%) scale(1.04); } /* Focus */ #ewo-photo-modal .ewo-photo-nav:focus-visible{ outline: 2px solid #565349; outline-offset: 2px; } /* Don’t let buttons block clicks on the stage except on themselves */ #ewo-photo-modal .ewo-photo-panel{ pointer-events: auto; } #ewo-photo-modal .ewo-photo-stage{ position: relative; z-index: 1; } /* On tiny screens, tuck them in slightly */ @media (max-width: 520px){ #ewo-photo-modal .ewo-photo-nav{ width: 46px; height: 46px; font-size: 30px; } #ewo-photo-modal .ewo-photo-prev{ left: .45rem; } #ewo-photo-modal .ewo-photo-next{ right: .45rem; } }