/** * 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; } .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%; background: rgba( 0, 0, 0, 0.55 ); color: #fff; font-size: 0; line-height: 1; overflow: hidden; cursor: pointer; box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.35 ); -webkit-appearance: none; appearance: none; transition: background-color 200ms ease, transform 200ms ease; touch-action: manipulation; } .rcs-popup-close:hover, .rcs-popup-close:focus { background: rgba( 0, 0, 0, 0.82 ); color: #fff; } .rcs-popup-close:hover { transform: scale( 1.06 ); } .rcs-popup-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* * 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; pointer-events: none; } /* --------------------------------------------------------------------------- * Bloqueio de rolagem enquanto o pop-up está aberto. * As regras são aplicadas por classe e removidas ao fechar. * ------------------------------------------------------------------------ */ html.rcs-popup-scroll-locked, html.rcs-popup-scroll-locked body { overflow: hidden; } html.rcs-popup-scroll-locked body { position: fixed; left: 0; right: 0; width: 100%; } /* --------------------------------------------------------------------------- * 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; } }