/** * RCS Pop-ups — estilos do frontend. * * O overlay começa oculto via CSS (carregado no ) para evitar que a * imagem apareça antes da inicialização do JavaScript (FOUC). */ .rcs-popup-overlay { /* * Tamanho máximo da imagem, em % da viewport, por breakpoint. * Sobrescrito inline pelo PHP com o valor configurado em cada pop-up. */ --rcs-popup-size-desktop: 90; --rcs-popup-size-mobile: 90; position: fixed; inset: 0; z-index: 99990; display: none; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; padding: 0; background: rgba( 0, 0, 0, 0.55 ); opacity: 0; transition: opacity 240ms ease; -webkit-tap-highlight-color: transparent; } .rcs-popup-overlay *, .rcs-popup-overlay *::before, .rcs-popup-overlay *::after { box-sizing: border-box; } /* Estado "montado": passa a ocupar a tela, mas ainda transparente. */ .rcs-popup-overlay.rcs-is-visible { display: flex; } /* Estado final de abertura (dispara as transições). */ .rcs-popup-overlay.rcs-is-open { opacity: 1; } /* Container que se ajusta exatamente ao tamanho da imagem. */ .rcs-popup__content { position: relative; display: block; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; line-height: 0; font-size: 0; transform: scale( 0.96 ) translateY( 8px ); transition: transform 240ms ease; } .rcs-popup-overlay.rcs-is-open .rcs-popup__content { transform: none; } /* * O modal recebe o foco ao abrir (tabindex="-1"). Sem outline aqui para não * desenhar uma moldura em volta da imagem; o indicador visível de foco fica * no botão de fechar, quando navegado por teclado. */ .rcs-popup__content:focus, .rcs-popup__content:focus-visible { outline: none; } .rcs-popup__media { display: block; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; line-height: 0; text-decoration: none; outline: none; } .rcs-popup__media:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* * A imagem é o único elemento visual: sem moldura, sem fundo, sem padding. * Mantém a proporção original e nunca é ampliada artificialmente * (width/height: auto respeitam o tamanho natural do arquivo). */ .rcs-popup__image { display: block; width: auto; height: auto; max-width: calc( var( --rcs-popup-size-desktop, 90 ) * 1vw ); max-height: calc( var( --rcs-popup-size-desktop, 90 ) * 1vh ); margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; object-fit: contain; vertical-align: middle; } /* Tamanho específico para telas pequenas. */ @media ( max-width: 782px ) { .rcs-popup__image { max-width: calc( var( --rcs-popup-size-mobile, 90 ) * 1vw ); max-height: calc( var( --rcs-popup-size-mobile, 90 ) * 1vh ); } } /* Unidade dinâmica melhora o comportamento em navegadores mobile. */ @supports ( max-height: 1dvh ) { .rcs-popup__image { max-height: calc( var( --rcs-popup-size-desktop, 90 ) * 1dvh ); } @media ( max-width: 782px ) { .rcs-popup__image { max-height: calc( var( --rcs-popup-size-mobile, 90 ) * 1dvh ); } } } /* --------------------------------------------------------------------------- * Botão de fechar (Google Material Symbols — close_small) * ------------------------------------------------------------------------ */ .rcs-popup-close { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; /* * Fallback para navegadores sem backdrop-filter: vidro claro semiopaco. * O ícone é vermelho e mantém contraste sobre qualquer imagem. */ background: rgba( 255, 255, 255, 0.78 ); color: #d81f0f; font-size: 0; line-height: 1; overflow: hidden; cursor: pointer; box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.28 ); -webkit-appearance: none; appearance: none; transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; touch-action: manipulation; } .rcs-popup-close:hover, .rcs-popup-close:focus { background: rgba( 255, 255, 255, 0.92 ); color: #b3170a; } .rcs-popup-close:hover { transform: scale( 1.06 ); box-shadow: 0 3px 14px rgba( 0, 0, 0, 0.35 ); } /* * Sem contorno colorido: apenas o ícone é vermelho. O indicador de foco de * teclado usa o mesmo tom de vidro do fundo do botão, ficando discreto. */ .rcs-popup-close:focus-visible { outline: 2px solid rgba( 255, 255, 255, 0.55 ); outline-offset: 0; } /* * O círculo assume a cor da própria imagem: o backdrop-filter desfoca e * satura o que está atrás do botão, de modo que ele se adapta a qualquer * imagem (clara, escura ou colorida) sem precisar de configuração. * Declarado depois das regras acima para sobrescrever o fallback. */ @supports ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) { .rcs-popup-close { background: rgba( 255, 255, 255, 0.22 ); -webkit-backdrop-filter: blur( 8px ) saturate( 180% ); backdrop-filter: blur( 8px ) saturate( 180% ); } .rcs-popup-close:hover, .rcs-popup-close:focus { background: rgba( 255, 255, 255, 0.4 ); } } /* * A folha do Google Fonts já define a classe .material-symbols-outlined. * As regras abaixo apenas ajustam o tamanho dentro do botão e reforçam a * família/ligadura caso a fonte esteja disponível localmente. */ .rcs-popup-close .material-symbols-outlined { display: block; font-family: "Material Symbols Outlined", sans-serif; font-size: 28px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; white-space: nowrap; text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.18 ); pointer-events: none; } /* --------------------------------------------------------------------------- * Bloqueio de rolagem enquanto o pop-up está aberto. * * Importante: NÃO usamos "position: fixed" no . Isso o retira do fluxo * normal, quebra o colapso de margens e a propagação do background do body * para o canvas — o fundo do (branco na maioria dos temas) passa a * aparecer como faixas nas bordas da tela. Aqui basta overflow: hidden; a * largura da barra de rolagem é compensada via padding pelo JavaScript e o * "rubber band" do iOS é bloqueado no touchmove. * ------------------------------------------------------------------------ */ html.rcs-popup-scroll-locked, html.rcs-popup-scroll-locked body { overflow: hidden; overscroll-behavior: contain; } /* --------------------------------------------------------------------------- * Ajustes finos para telas pequenas. * ------------------------------------------------------------------------ */ @media ( max-width: 600px ) { .rcs-popup-close { top: 6px; right: 6px; } } /* --------------------------------------------------------------------------- * Preferência por movimento reduzido. * ------------------------------------------------------------------------ */ @media ( prefers-reduced-motion: reduce ) { .rcs-popup-overlay, .rcs-popup__content, .rcs-popup-close { transition: none !important; } .rcs-popup__content { transform: none !important; } }