/* Styles for /js/kiwi-lightbox.js. The overlay is appended to , so these are global rather than scoped to a component. */ body.klb-lock { overflow: hidden; } .klb { position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-rows: 1fr auto auto; background: rgba(17, 17, 16, 0.96); opacity: 0; transition: opacity 0.2s ease; -webkit-tap-highlight-color: transparent; overscroll-behavior: contain; } .klb[hidden] { display: none; } .klb.is-visible { opacity: 1; } .klb-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 3.5rem 1rem 0.5rem; /* A zoomed image is scaled past the stage box; clip it so it cannot paint over the caption and thumbnail strip below. */ overflow: hidden; /* The overlay owns the gesture; without this, touch panning scrolls. */ touch-action: none; } .klb-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; transition: transform 0.2s ease, opacity 0.15s ease; will-change: transform; } .klb.is-zoomed .klb-img { cursor: grab; } /* A transform transition makes drag-panning lag a fifth of a second behind the finger, so it is suppressed while a pan is actually in progress. */ .klb.is-panning .klb-img { transition: none; } .klb.is-loading .klb-img { opacity: 0.55; filter: blur(2px); } /* Spinner rides the stage rather than the image so it stays put while zoomed. */ .klb.is-loading .klb-stage::after { content: ""; position: absolute; width: 2.25rem; height: 2.25rem; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: klb-spin 0.7s linear infinite; } @keyframes klb-spin { to { transform: rotate(360deg); } } .klb-btn { position: absolute; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-family: system-ui, sans-serif; line-height: 1; cursor: pointer; transition: background 0.15s ease; } .klb-btn:hover, .klb-btn:focus-visible { background: rgba(255, 255, 255, 0.24); } .klb-btn:focus-visible { outline: 2px solid #c9a24b; outline-offset: 2px; } .klb-btn[hidden] { display: none; } .klb-close { inset-block-start: 0.75rem; inset-inline-end: 0.75rem; width: 2.75rem; height: 2.75rem; font-size: 1.1rem; } .klb-prev, .klb-next { inset-block-start: 50%; width: 3rem; height: 3rem; margin-block-start: -1.5rem; font-size: 2rem; /* The glyphs sit low in their box; nudge them onto the optical centre. */ padding-block-end: 0.25rem; } .klb-prev { inset-inline-start: 0.75rem; } .klb-next { inset-inline-end: 0.75rem; } .klb-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.25rem 1rem; padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.82); font-family: "DM Sans", system-ui, sans-serif; font-size: 0.9rem; text-align: center; } .klb-bar p { margin: 0; } .klb-bar p[hidden] { display: none; } .klb-count { color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; } .klb-thumbs { display: flex; justify-content: center; justify-content: safe center; gap: 0.4rem; padding: 0 1rem 0.9rem; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain; } .klb-thumbs[hidden] { display: none; } .klb-thumb { flex: 0 0 auto; width: 3.75rem; height: 3.75rem; padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; opacity: 0.5; cursor: pointer; transition: opacity 0.15s ease, border-color 0.15s ease; } .klb-thumb:hover, .klb-thumb:focus-visible { opacity: 0.85; } .klb-thumb.is-current { border-color: #c9a24b; opacity: 1; } .klb-thumb:focus-visible { outline: 2px solid #c9a24b; outline-offset: 1px; } .klb-thumb img { display: block; width: 100%; height: 100%; border-radius: 2px; object-fit: cover; } @media (max-width: 640px) { .klb-prev, .klb-next { width: 2.5rem; height: 2.5rem; margin-block-start: -1.25rem; font-size: 1.6rem; } .klb-thumb { width: 3rem; height: 3rem; } } @media (prefers-reduced-motion: reduce) { .klb, .klb-img, .klb-btn, .klb-thumb { transition: none; } .klb.is-loading .klb-stage::after { animation-duration: 2s; } }