@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); /* Define o tamanho da fonte raiz para o elemento */ html main { font-size: 16px; /* Defina o tamanho da fonte raiz para 1rem */ } /* Estilos para títulos h1 a h6 */ main h1, main h2, main h3, main h4, main h5, main h6 { font-weight: bold; line-height: 1; position: relative; } main h1 { font-size: 2.9rem; } main h2 { font-size: 4rem; } main h1 span, main h2 span { display: block; font-size: 1.2rem; } main h3 { font-size: 3rem; } main h3 span { display: block; font-size: 1rem; } main p { font-size: 1.2rem; } main a { font-size: 1rem; } /* Styles css personalizados a partir daqui */ .height-100 { height: 100%; } .btn-ver-mais-informacao { height: 50px; width: 50px; background: white; position: absolute; bottom: 20px; right: 20px; border-radius: 50%; display: flex; align-items: center; z-index: 5; transition: 0.5s; } .btn-ver-mais-informacao.dark { background: #3B3756; } .btn-ver-mais-informacao.active { transform: rotate(45deg); transition: 0.5s; } .btn-ver-mais-informacao img, .btn-ver-mais-informacao svg { height: 40px; display: flex; margin: 0 auto; width: 40px; } .box-ver-mais-informacao { position: absolute; top: 10%; left: 5%; padding: 40px; background: white; height: 100%; opacity: 0; transition: 0.5s; z-index: -1; } .btn-ver-mais-informacao:active+.box-ver-mais-informacao { opacity: 1; } .btn-ver-mais-informacao.active+.box-ver-mais-informacao { top: 0; left: 0; overflow: auto; z-index: 4; } .head-box-ver-mais, .box-com-img-left { display: flex; gap: 10px; align-items: center; } .head-box-ver-mais img, .box-com-img-left img, .box-com-img-top img, .box-com-img-right img { width: 80px; height: auto; } .box-com-img-left p, .box-com-img-top p, .box-com-img-right p { font-size: 15px; margin: 0; } .box-com-img-top { text-align: center; gap: 10px; display: flex; flex-direction: column; align-items: center; } .box-com-img-right { display: flex; flex-direction: row-reverse; gap: 10px; align-items: center; text-align: end; } .modal-universal .modal-dialog { max-width: 80%; margin: 0 auto; margin-top: 5%; } .dp-lg-none { display: none; } img.img-logo-jornal-a50 { max-width: 200px !important; } img.img-logo-purr { max-width: 250px !important; } img.img-logo-bar-do-sival, img.img-logo-radio-bag-pro { max-width: 100% !important; } img.img-cases-marcas { transform: unset !important; rotate: none !important; translate: none !important; opacity: 1 !important; } .slick-carrousel-cases-marcas .slick-list.draggable { padding-bottom: 30px; } .carrousel-cases-marcas .slick-slide { border-radius: unset !important; } div#modalCaseA50 .slick-slide, div#modalCaseRadioBag .slick-slide, div#modalCaseMichelliFrigo .slick-slide { max-width: 100% !important; } .carrousel-cases-marcas.logo-antiga-nova, .carrousel-cases-marcas.exibicao-stella, .carrousel-cases-marcas.emojis-stella, .carrousel-cases-marcas.canecas-stella { max-height: 400px; max-width: 400px; } .carrousel-cases-marcas.santa-se-posts-sociais { max-height: 450px; max-width: 350px; } .carrousel-cases-marcas.santa-se-posts-reels { max-height: 350px; max-width: 250px; } .exibicao-stella .slick-dots li button:before, .logo-antiga-nova .slick-dots li button:before, .emojis-stella .slick-dots li button:before, .canecas-stella .slick-dots li button:before, .motion-graphic-videos-santa-se .slick-dots li button:before, .landing-pages-santa-se .slick-dots li button:before, .papelaria-santa-se .slick-dots li.slick-active button:before, .papelaria-santa-se .slick-dots li:hover button:before, .santa-se-posts-sociais .slick-dots li button:before, .santa-se-posts .slick-dots li button:before, .santa-se-posts-reels .slick-dots li button:before { color: #FFFFFF !important; opacity: 1; } .logo-antiga-nova .slick-dots li.slick-active button:before, .logo-antiga-nova .slick-dots li:hover button:before, .emojis-stella .slick-dots li.slick-active button:before, .emojis-stella .slick-dots li:hover button:before, .canecas-stella .slick-dots li.slick-active button:before, .canecas-stella .slick-dots li:hover button:before, .papelaria-santa-se .slick-dots li button:before { color: #66AAFF !important; } .exibicao-stella .slick-dots li.slick-active button:before, .exibicao-stella .slick-dots li:hover button:before, .motion-graphic-videos-santa-se .slick-dots li.slick-active button:before, .motion-graphic-videos-santa-se .slick-dots li:hover button:before, .landing-pages-santa-se .slick-dots li.slick-active button:before, .landing-pages-santa-se .slick-dots li:hover button:before, .santa-se-posts-sociais .slick-dots li.slick-active button:before, .santa-se-posts-sociais .slick-dots li:hover button:before, .santa-se-posts .slick-dots li.slick-active button:before, .santa-se-posts .slick-dots li:hover button:before, .santa-se-posts-reels .slick-dots li.slick-active button:before, .santa-se-posts-reels .slick-dots li:hover button:before { color: #003D86 !important; } span.h1-span { display: inline-flex; font-size: 2.9rem; } .gap-40 { gap: 40px; } .dots-p-0 .slick-list { padding-bottom: 0 !important; } .stories-e-reels-stella .slick-slide { max-width: 250px !important; } .motion-graphic-videos-santa-se .slick-slide { max-height: 420px; } .carrousel-cases-marcas.landing-pages-santa-se, .carrousel-cases-marcas.papelaria-santa-se, .carrousel-cases-marcas.santa-se-posts { max-width: 450px; } .papelaria-santa-se .slick-slide { max-width: 100%; } .carrousel-cases-marcas.landing-pages-santa-se .slick-slide { max-width: 100%; max-height: 300px; overflow: auto; } .carrousel-cases-marcas.edicao-de-imagens { max-width: 450px; } img.cartao-de-visita-santa-se { max-width: 450px; } img.antes-depois-redes-sociais-santa-se { max-width: 400px; } .font-imagem { font-size: 250px; color: white; } .font-image-1 { color: #66aaff; position: relative; right: 50px; } .btn-ver-mais-informacao.active+.box-ver-mais-informacao { width: inherit; } .modal-body-ver-mais { padding: 0 !important; } .carrousel-conteudo-cases-marcas img.img-cases-marcas, .carrousel-conteudo-cases-marcas img, .carrousel-conteudo-cases-marcas .slide-video video { max-width: 750px; margin: 0 auto; display: flex; max-height: 450px; } .hero-cases-de-sucesso-satoife h2 { font-size: 3rem; } .hero-cases-de-sucesso-satoife img.img-case-satoife { max-height: 450px; margin: 0 auto; display: flex; } .min-height-550 { min-height: 550px; } .modukot-hero { min-height: 660px; } .modukot-hero video { position: absolute; top: 0; left: 0; width: 100%; } .modukot-hero h2 { font-size: 3.5rem; } .video-e-imagem-satoife-popup { display: flex; width: 100%; align-items: center; } .video-e-imagem-satoife-popup video { max-height: 315px; } .swiper-satoife-carrousel-video { width: 100%; max-width: 700px; margin: 0 auto; } .swiper-satoife-carrousel-video video { max-width: 100%; margin: 0 auto; } .swiper-posts-redes-sociais { padding: 0; border-radius: 20px; overflow: hidden; } .template-social { background: #eaeae9; padding: 50px 10px; max-width: 450px; margin: 0 auto; border-radius: 20px; position: relative; } .template-social swiper-slide img { max-width: 450px; } .header-template-social { position: absolute; top: 0; left: 0; width: 100%; height: 50px; } .footer-template-social{ position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; } .header-template-social-content, .footer-template-social-content{ display: flex; justify-content: space-between; padding: 0 10px; height: 50px; align-items: center; } .header-template-social-content img, .footer-template-social-content img{ max-width: 50px; max-height: 40px; } .swiper-motion-graphic { max-width: 700px; margin: 0 auto; } .swiper-motion-graphic video { width: 100%; margin: 0 auto; display: block; max-height: 390px; max-width: 700px; } .swiper-landing-page-santa-se swiper-slide { max-height: 390px; overflow: auto; } .swiper-popup-carrousel-docctor-med { margin: 0 auto; max-width: 700px; } .swiper-popup-carrousel-docctor-med video{ width: 100%; max-width: 700px; margin: 0 auto; max-height: 500px; } .casa-borato-content-1 { width: 100%; height: 500px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: relative; } .casa-borato-content-1 .casa-borato-logo-texto{ max-width: 500px; } .casa-borato-content-1 img.corda-casa-borato { scale: 1.2 !important; } .casa-borato-content-1 img.casa-borato-elementos-1 { position: absolute; left: -60px; bottom: 100px; height: 300px; } .casa-borato-content-1 img.casa-borato-elementos-2 { position: absolute; right: -60px; bottom: 100px; height: 300px; } .casa-borato-content-4 { padding-bottom: 100px; } .casa-borato-content-4 img { max-width: 100%; scale: 1.2 !important; } .casa-arartes-content-1 img { scale: 1.14 !important; } .casa-arartes-content-2 img { scale: 1.04 !important; position: relative; top: 100px; } .casa-arartes-content-head-1, .casa-arartes-content-head-2, .casa-arartes-content-head-3 { position: relative; top: 100px; } .casa-arartes-content-3 img { position: relative; top: 50px; } .asteria-hero { min-height: 660px; } .asteria-hero h2 { font-size: 4rem; line-height: 1; } .asteria-hero video { position: absolute; top: 0; left: 0; width: 100%; } .asteria-section-1 img { max-width: 450px; } .asteria-hero::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(267deg, rgba(0, 0, 0, 0.02) 25%, rgb(0 0 0 / 0%) 60%, rgb(0 0 0 / 55%) 100%); z-index: 1; } @media (max-width: 1250.85px) { main h2 { font-size: 3rem; } main h3 { font-size: 2.8rem; } .modukot-hero video { left: 50%; height: 100%; width: auto; transform: translate(-50%, 0); } } @media (max-width: 992.85px) { .carrousel-conteudo-cases-marcas img.img-cases-marcas, .carrousel-conteudo-cases-marcas img, .carrousel-conteudo-cases-marcas .slide-video video { max-width: 400px !important; margin: 0 auto; display: flex; max-height: 400px !important; } .carrousel-cases-marcas { padding-bottom: 30px; } img.img-logo-cases, img.hotsite-lps-santa-se, img.cartao-de-visita-santa-se { max-width: 400px; margin: 0 auto; display: flex; } img.bolha-case-de-sucesso { opacity: 0.6; } .cases-de-sucesso .slick-list { margin-right: 0; } .dp-lg-none { display: block; } .dp-md-none { display: none; } main a { font-size: 0.8rem; } main h3 { font-size: 2.2rem; } .gap-md-20 { gap: 20px !important; } .swiper-popup-carrousel swiper-slide { display: flex; margin: 0 auto; max-width: 100%; } .swiper-popup-carrousel img { max-width: 100%; margin: 0 auto; } .video-e-imagem-satoife-popup { justify-content: center; } .swiper-satoife-carrousel-img-video, .swiper-popup-carrousel { max-width: 400px; margin: 0 auto; } .asteria-hero h1 { font-size: 4rem; line-height: 1; } .asteria-hero .min-height-550, .asteria-hero { min-height: 450px; } .asteria-hero .min-height-550 { justify-content: end !important; } } @media (max-width:768.85px) { main h1, main h2, main h3 { font-size: 2.5rem; } .btn-ver-mais-informacao, .btn-plus-popup-modal, .modal-body-ver-mais button { width: 40px; height: 40px; bottom: 15px; right: 15px; } .btn-ver-mais-informacao img, .btn-plus-popup-modal img, .btn-plus-popup-modal svg, .modal-body-ver-mais button img, .btn-ver-mais-informacao svg, .modal-body-ver-mais button img, .modal-body-ver-mais button svg { width: 30px; height: 30px; } .head-box-ver-mais, .box-com-img-left { flex-direction: column; text-align: center; } .modukot-hero video { left: 50%; height: auto; width: 100%; transform: translate(-50%, 0); bottom: 0; top: unset; } .modukot-hero .justify-content-between { justify-content: start !important; } .casa-borato-content-1 img.casa-borato-elementos-1, .casa-borato-content-1 img.casa-borato-elementos-2 { height: 250px; } .casa-borato-content-1 .casa-borato-logo-texto { max-width: 400px; } } @media (max-width: 680.85px){ .template-social swiper-slide img { max-width: 100%; } button#gooey-button p { font-size: 40px !important; } .video-e-imagem-satoife-popup video { height: auto; width: 100%; } .swiper-satoife-carrousel-img-video swiper-slide img, .swiper-satoife-carrousel-img-video swiper-slide video { margin: 0 auto; max-width: 100%; } } @media (max-width: 570.85px) { main h1 span, main h2 span { display: block; font-size: 1rem; } main h1, main h2, main h3 { font-size: 2rem; } .modal-body-ver-mais .border-radius { padding: 20px !important; } .modal-ver-mais-informacao { max-width: 95%; } .carrousel-conteudo-cases-marcas img.img-cases-marcas, .carrousel-conteudo-cases-marcas img, .carrousel-conteudo-cases-marcas .slide-video video { max-width: 100% !important; } .modukot-hero { min-height: auto; } .modukot-hero .min-height-550{ min-height: 450px; } .hero-cases-de-sucesso-satoife h2 { font-size: 2rem; } .modukot-hero h2 { font-size: 2.5rem; } .casa-borato-content-4 { padding-bottom: 0; } .casa-borato-content-1 .casa-borato-logo-texto { max-width: 300px; } .casa-borato-content-1 img.casa-borato-elementos-1, .casa-borato-content-1 img.casa-borato-elementos-2 { height: 180px; } .casa-borato-content-1 { height: 360px; } .casa-arartes-content-1 img { top: 50px; position: relative; } .sm-column{ flex-direction: column; } .asteria-hero video { bottom: 40px; top: unset; scale: 1.5; } .asteria-hero .min-height-550 { justify-content: start !important; } .asteria-hero h2 { font-size: 2.8rem; } .asteria-hero .min-height-550, .asteria-hero { min-height: 360px; } } @media (max-width: 420px) { main h1, main h2, main h3 { font-size: 1.8rem; } }