/* ========================================================================== Tap to zoom — js/zoom.js ========================================================================== On , outside #screen (so the chroma filter stays off it and the veil blurs the finished page). Same depth as the ID card: under the cursor, over everything the page draws. The padding is the status bar and home indicator, read by the script as the room the picture must stay out of. */ .zoom-layer { position: fixed; inset: 0; z-index: var(--z-info); padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px); cursor: zoom-out; -webkit-tap-highlight-color: transparent; } .zoom-layer[hidden] { display: none; } /* Starts clear; the script animates the blur radius and the tint in. */ .zoom-layer__veil { position: absolute; inset: 0; background-color: rgba(6, 6, 9, 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); } /* Laid out by the script at its opened place and size; the open and close are a transform and a clip from the tapped frame. */ .zoom-layer__img { position: absolute; max-inline-size: none; object-fit: contain; transform-origin: 50% 50%; will-change: transform, clip-path; -webkit-user-drag: none; user-select: none; } .zoom-layer__close { position: absolute; inset-block-start: calc(12px + env(safe-area-inset-top, 0px)); inset-inline-end: 12px; display: grid; place-items: center; inline-size: 36px; aspect-ratio: 1; padding: 0; border: 1px solid rgba(241, 237, 228, 0.35); border-radius: 50%; background: rgba(9, 9, 12, 0.7); color: #F1EDE4; } .zoom-layer__close svg { inline-size: 14px; block-size: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .zoom-layer__close:focus-visible { outline: 2px solid #F1EDE4; outline-offset: 2px; } /* Phones: a picture that opens on a tap never flashes the grey tap highlight first. */ @media (max-width: 899px) { [data-zoom] { -webkit-tap-highlight-color: transparent; } }