/* ========================================================================== Info card — the "i" button's dialog (js/info-card.js) ========================================================================== On , outside #screen: the chroma filter stays off the card, and the veil's backdrop blur works on the finished page underneath. Sits under the custom cursor (--z-cursor 90) so the pointer still shows over it. */ .info-layer { position: fixed; inset: 0; z-index: var(--z-info); perspective: 1100px; } .info-layer[hidden] { display: none; } /* Starts clear; js/info-card.js animates the blur radius and the tint in. */ .info-layer__veil { position: absolute; inset: 0; background-color: rgba(6, 6, 9, 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); } /* Centred by the translate property, so the morph can own transform. */ .info-card { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: min(740px, 90vw); block-size: auto; max-inline-size: none; translate: -50% -50%; transform-origin: 50% 50%; /* The card's own rounded corners (12px on the 739x407 artwork), so a plain box-shadow can stand in for drop-shadow — cheaper to move every frame. */ border-radius: 1.62% / 2.95%; /* The card's own paper tone: if the artwork is still decoding when the morph starts (a tap right after load), it lands as a blank card and the print arrives on it, rather than as a hole. */ background-color: #E3E4DF; aspect-ratio: 739 / 407; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); will-change: transform, opacity; backface-visibility: hidden; opacity: 0; cursor: pointer; -webkit-user-drag: none; user-select: none; } /* The dialog's focus target and a real close control for keyboards and screen readers; the card and veil close it for pointers. */ /* Desktop: sized in --u like the rest of the page (740 at 1920). */ @media (min-width: 1025px) { .info-card { inline-size: min(calc(740 * var(--u)), 90vw); } } .info-layer__close { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; padding: 8px 12px; border: 1px solid rgba(241, 237, 228, 0.4); border-radius: 2px; background: rgba(9, 9, 12, 0.7); color: var(--color-text); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-mono-ui); text-transform: uppercase; opacity: 0; transition: opacity 160ms var(--ease-out); } .info-layer__close:focus-visible { opacity: 1; outline: 2px solid #F1EDE4; outline-offset: 2px; }