Toda
![]()
dentro daquele container passa a abrir. Nada mais.
POR QUE A IMAGEM NÃO OCUPA A TELA INTEIRA
O JS lê naturalWidth de cada arquivo, divide pelo devicePixelRatio e trava
o tamanho ali. Esticar arquivo pequeno deixa a imagem borrada — pior que
não ampliar. O limite está no arquivo, não aqui.
A lupa é filha de , nunca de
: o sistema de encaixe aplica
zoom nos filhos de seção, e isso mexeria no tamanho da imagem aberta.
========================================================================== */
/* ── o que pode ser clicado ─────────────────────────────────────────────── */
/* a moldura entra junto porque o ::after do .gitem cobre a foto e é nele que
o clique aterrissa (ver o comentário em foto.js) */
[data-foto] img,
[data-foto] .gitem,
[data-foto] .gallery-item,
[data-foto] figure { cursor: zoom-in; }
/* ── o fundo ────────────────────────────────────────────────────────────── */
.foto-lupa {
position: fixed; inset: 0; z-index: 9000;
display: flex; align-items: center; justify-content: center;
padding: clamp(16px, 4vh, 56px) clamp(12px, 4vw, 72px);
background: rgba(3, 8, 17, .94);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
opacity: 0; visibility: hidden;
transition: opacity .32s ease, visibility .32s ease;
}
.foto-lupa.aberta { opacity: 1; visibility: visible; }
/* ── a moldura ──────────────────────────────────────────────────────────── */
.foto-palco {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 14px;
max-width: 100%; max-height: 100%;
scale: .97; transition: scale .34s cubic-bezier(.16, 1, .3, 1);
}
.foto-lupa.aberta .foto-palco { scale: 1; }
.foto-img {
display: block; max-width: 100%; max-height: 100%;
width: auto; height: auto;
border-radius: 14px;
box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
background: #0B1424;
}
/* ── legenda e contador ─────────────────────────────────────────────────── */
.foto-pe {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
justify-content: center; max-width: 100%;
}
.foto-legenda {
font-size: .9rem; line-height: 1.45; color: rgba(226, 232, 240, .9);
text-align: center;
}
.foto-conta {
font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .1em;
color: rgba(148, 163, 184, .8); white-space: nowrap;
}
/* ── botões ─────────────────────────────────────────────────────────────── */
.foto-bt {
position: absolute; z-index: 2;
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; padding: 0;
border: 1px solid rgba(147, 197, 253, .22); border-radius: 999px;
background: rgba(9, 18, 33, .86); color: #E2E8F0;
cursor: pointer; transition: background .25s ease, border-color .25s ease, scale .25s ease;
}
.foto-bt:hover { background: rgba(37, 99, 235, .3); border-color: rgba(147, 197, 253, .5); scale: 1.06; }
.foto-bt:focus-visible { outline: 2px solid #60A5FA; outline-offset: 3px; }
.foto-bt svg { width: 20px; height: 20px; }
.foto-fechar { top: clamp(12px, 2.4vh, 26px); right: clamp(12px, 2.4vw, 26px); position: fixed; }
.foto-ant { left: clamp(8px, 2vw, 26px); top: 50%; translate: 0 -50%; position: fixed; }
.foto-prox { right: clamp(8px, 2vw, 26px); top: 50%; translate: 0 -50%; position: fixed; }
.foto-lupa.sozinha .foto-ant,
.foto-lupa.sozinha .foto-prox { display: none; }
/* ── celular ─────────────────────────────────────────────────────────────
As setas saem das laterais: numa tela de 390px elas roubariam 88px da
largura da foto e ainda apareceriam cortadas. Vão para o rodapé, lado a
lado, com o polegar alcançando as duas. Arrastar a foto continua valendo. */
@media (max-width: 720px) {
.foto-lupa { padding: 14px 12px 84px; }
.foto-ant { top: auto; bottom: 18px; left: calc(50% - 58px); right: auto; translate: none; }
.foto-prox { top: auto; bottom: 18px; right: calc(50% - 58px); left: auto; translate: none; }
.foto-pe { gap: 8px 14px; }
.foto-legenda { font-size: .84rem; }
}
/* ── quem pediu menos movimento ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.foto-lupa, .foto-palco, .foto-bt { transition: none; }
.foto-palco { scale: 1; }
}