/* ========================================================================== v4/shared/lightbox.css — оформление единственного лайтбокса проекта. Разметку создаёт shared/lightbox.js; здесь только вид. Вариант может пере-красить через переменные --lb-*. ========================================================================== */ .lb { position: fixed; inset: 0; /* Выше баннера с днём рождения (--z-bday: 70) — дефект прототипа, где баннер просвечивал сквозь оверлей. */ z-index: 100; display: grid; grid-template-rows: auto 1fr auto; background: var(--lb-bg, rgba(18, 25, 26, 0.96)); opacity: 0; /* ⚠ Никакого visibility в переходе: анимируемый visibility остаётся hidden до середины перехода, и тогда closeBtn.focus() сразу после открытия молча не срабатывает (замерено: document.activeElement оставался ). Диалог скрыт атрибутом hidden, этого достаточно. */ transition: opacity var(--dur) var(--ease); -webkit-tap-highlight-color: transparent; } .lb[data-open="true"] { opacity: 1; } /* Автор побеждает UA-стиль при равной специфичности: без этого правила `[hidden]` из UA-таблицы проигрывает `.lb { display: grid }`, и закрытый диалог остаётся в раскладке на весь вьюпорт (z-index: 100) — невидимый из-за opacity: 0, но перехватывающий все клики по странице. */ .lb[hidden] { display: none; } /* `[hidden]` закрывает СТАЦИОНАРНОЕ закрытое состояние, но close() (см. lightbox.js) снимает data-open сразу, а hidden выставляет только через 340мс — на время перехода opacity к нулю диалог ещё в раскладке (position: fixed; inset: 0; z-index: 100) и невидимо перехватывает клики по всей странице. pointer-events выключается сразу по тому же атрибуту, которым уже управляется прозрачность — окно захвата исчезает, не трогая таймер и сам переход. */ .lb[data-open="false"] { pointer-events: none; } .lb__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) var(--s-3); color: var(--onphoto); } .lb__count { font-family: var(--sans); font-size: var(--t-small); letter-spacing: var(--tr-wide); padding-inline-start: var(--s-3); opacity: 0.8; font-variant-numeric: tabular-nums; } .lb__btn { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--rad-pill); color: var(--onphoto); cursor: pointer; line-height: 1; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .lb__btn:hover { background: rgba(255, 255, 255, 0.18); } .lb__btn[disabled] { opacity: 0.35; cursor: default; } .lb__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; } .lb__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 var(--s-2); touch-action: pan-y; } .lb__fig { margin: 0; display: grid; place-items: center; gap: var(--s-3); max-width: min(96vw, 1200px); } .lb__fig picture, .lb__fig img { max-width: min(96vw, 1200px); max-height: min(74svh, 900px); width: auto; height: auto; border-radius: 4px; box-shadow: var(--shadow-deep); transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease); } .lb[data-swipe="left"] .lb__fig picture { transform: translateX(-3%); opacity: 0.75; } .lb[data-swipe="right"] .lb__fig picture { transform: translateX(3%); opacity: 0.75; } .lb__cap { font-family: var(--serif); font-size: var(--t-h4); color: var(--onphoto-soft); text-align: center; max-width: 46ch; line-height: 1.3; } .lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: var(--tap); height: 76px; border-radius: var(--rad); } .lb__nav--prev { left: var(--s-2); } .lb__nav--next { right: var(--s-2); } .lb__nav svg { width: 26px; height: 26px; } .lb__hint { padding: var(--s-2) var(--s-4) var(--s-4); text-align: center; font-size: var(--t-small); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.62); } .lb__hint-keys { display: inline-flex; align-items: center; gap: 2px; vertical-align: -0.15em; } .lb__hint-keys svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; } @media (max-width: 720px) { .lb__fig picture, .lb__fig img { max-height: 62svh; } .lb__nav { height: var(--tap); } /* Стрелки на мобильном уезжают под кадр, чтобы не перекрывать фото. */ .lb__nav { top: auto; bottom: var(--s-2); transform: none; } .lb__cap { font-size: var(--t-body); } } @media (prefers-reduced-motion: reduce) { .lb, .lb__fig picture { transition: none; } .lb[data-swipe] .lb__fig picture { transform: none; opacity: 1; } }