/* ========================================================================== Act Tema 2026 — Global Styles As CSS custom properties de cor/fonte/tamanho (--cor-*, --font-*, --fs-*) vêm do painel Act Tema → Estilos, injetadas inline no (inc/act-panel/tokens.php). ========================================================================== */ /* 0. Fontes Locais ========================================================================== */ @font-face { font-family: 'Lato'; src: url('../fonts/Lato/Lato-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Lato'; src: url('../fonts/Lato/Lato-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Lato'; src: url('../fonts/Lato/Lato-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Lato'; src: url('../fonts/Lato/Lato-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Lato'; src: url('../fonts/Lato/Lato-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Lato'; src: url('../fonts/Lato/Lato-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Lato'; src: url('../fonts/Lato/Lato-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Lato'; src: url('../fonts/Lato/Lato-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Lato'; src: url('../fonts/Lato/Lato-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; } /* 1. Reset & Variáveis ========================================================================== */ :root { --container-width: 1296px; --container-width-lg: 1396px; --container-width-xl: 1536px; --container-width-xxl: 1715px; --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 40px; --spacing-xl: 64px; --header-height: 80px; --cor-branco: #fff; --cor-preto: #000; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --transition-fast: 0.3s ease; --transition-base: 0.4s ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--spacing-lg)); } body { font-family: var(--font-1, system-ui, sans-serif); background-color: var(--cor-fundo, #fafafa); color: var(--cor-texto, #333); font-size: var(--fs-6, 1rem); line-height: 1.375; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } .spaceHeader { min-height: var(--header-height); } section[id], div[id] { scroll-margin-top: calc(var(--header-height) + var(--spacing-lg)); } img, video, svg { max-width: 100%; height: auto; display: block; } a { color: var(--cor-principal, currentColor); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--cor-secundaria, var(--cor-principal, currentColor)); } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-2, var(--font-1, inherit)); color: var(--cor-texto-titulo, inherit); font-weight: 700; line-height: 1.2; margin-bottom: var(--spacing-sm); } h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: 700; } p { margin-bottom: var(--spacing-sm); } p:last-child { margin-bottom: 0; } strong { font-weight: 700; } /* O RichText "Destacar" do editor (core/text-color) sempre usa , mesmo quando só a cor do TEXTO é escolhida (sem cor de fundo) — sem este reset, o navegador aplica o estilo padrão dele (fundo amarelo, texto preto) por cima da cor escolhida. */ mark { background: none; color: inherit; } hr { border: none; border-top: 1px solid var(--cor-destaque, #e5e5e5); width: 100%; margin: var(--spacing-md) 0; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } /* 2. Layout / Containers ========================================================================== */ .container, .container-lg, .container-xl, .container-xxl { width: 100%; margin: 0 auto; padding: 0 var(--spacing-md); } .container { max-width: calc(var(--container-width) + (var(--spacing-md) * 2)); } .container-lg { max-width: calc(var(--container-width-lg) + (var(--spacing-md) * 2)); } .container-xl { max-width: calc(var(--container-width-xl) + (var(--spacing-md) * 2)); } .container-xxl { max-width: calc(var(--container-width-xxl) + (var(--spacing-md) * 2)); } #site-content { min-height: 60vh; } /* 3. Utilitários ========================================================================== */ .d-none { display: none !important; } .d-flex { display: flex !important; } .justify-content-start { justify-content: flex-start !important; } .justify-content-center { justify-content: center !important; } .justify-content-end { justify-content: flex-end !important; } .justify-content-between { justify-content: space-between !important; } .align-items-center { align-items: center !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: var(--spacing-xs) !important; } .mb-2 { margin-bottom: var(--spacing-sm) !important; } .mb-3 { margin-bottom: var(--spacing-md) !important; } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-900 { font-weight: 900; } /* 4. Elementos Flutuantes (WhatsApp, Voltar ao Topo, Cookies) ========================================================================== */ .whatsapp-float { position: fixed; bottom: 20px; right: 20px; z-index: 999; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #25d366; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); transition: transform var(--transition-base), box-shadow var(--transition-base); } .whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.55); } .whatsapp-float span { text-transform: uppercase; position: absolute; top: -25px; right: 70%; width: 156px; text-align: center; padding: 10px 5px; border-radius: var(--radius-sm); color: #7e7e7e; background: #fff; font-size: 0.875rem; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08); } #backToTop { display: none; position: fixed; bottom: 90px; right: 22px; align-items: center; justify-content: center; border-radius: 50%; width: 38px; height: 38px; color: #fff; background-color: var(--cor-principal, #333); font-size: var(--fs-5, 1.25rem); z-index: 998; transition: opacity var(--transition-base); } #backToTop.show { display: flex; } #aceite-termos { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; background: #0c2950; animation: act-slide-up 0.5s ease; } @keyframes act-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } #aceite-termos-barra { height: 5px; background: #0a0a0a; } #aceite-termos-conteudo { max-width: 1300px; margin: 0 auto; padding: var(--spacing-md); display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); } #aceite-termos-conteudo span { color: #fff; font-size: 0.9375rem; line-height: 1.5; } #aceite-termos-conteudo a { color: #fff; text-decoration: underline; } #btn-aceite-termos { flex-shrink: 0; background: #037354; border-radius: var(--radius-md); font-weight: 700; text-decoration: none !important; color: #fff; padding: 10px 20px; } #btn-aceite-termos:hover { background: #025a43; color: #fff; } @media (max-width: 767px) { #aceite-termos-conteudo { flex-direction: column; text-align: center; } } /* 5. Acessibilidade ========================================================================== */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } a.skip-link { position: absolute; top: -100px; left: 0; background: var(--cor-principal, #000); color: #fff; padding: var(--spacing-sm); z-index: 9999; } a.skip-link:focus { top: 0; } :focus-visible { outline: 2px solid var(--cor-principal, #000); outline-offset: 2px; } /* 6. Conteúdo (loop de posts, 404, paginação) ========================================================================== */ .container-404 { display: flex; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: var(--spacing-xl) var(--spacing-md); } .content-404 { max-width: 600px; } .content-404 h1 { font-size: var(--fs-2, 2.5rem); } .btn-404 { display: inline-block; margin-top: var(--spacing-md); padding: 12px 28px; background-color: var(--cor-principal, #333); color: #fff; border-radius: var(--radius-sm); font-weight: 700; transition: opacity var(--transition-fast); } .btn-404:hover { color: #fff; opacity: 0.85; } .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-lg); padding: var(--spacing-xl) 0; } .post-card { display: flex; flex-direction: column; background: var(--cor-branco, #fff); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .post-card-thumb { aspect-ratio: 16 / 10; overflow: hidden; } .post-card-thumb img { width: 100%; height: 100%; object-fit: cover; } .post-card-body { padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-xs); flex-grow: 1; } .post-card-meta { font-size: var(--fs-7); color: var(--cor-texto-secundario, #777); } .post-card-title { font-size: var(--fs-4); margin-bottom: 0; } .post-card-title a { color: var(--cor-texto-titulo, var(--cor-texto)); } .post-card-excerpt { color: var(--cor-texto-secundario, var(--cor-texto)); flex-grow: 1; } .post-card-link { margin-top: var(--spacing-xs); font-weight: 700; color: var(--cor-principal); } .single-post-header { padding: var(--spacing-xl) 0 var(--spacing-md); text-align: center; } .single-post-thumb { margin-bottom: var(--spacing-lg); border-radius: var(--radius-md); overflow: hidden; } .single-post-thumb img { width: 100%; } .single-post-content>*+* { margin-top: var(--spacing-sm); } .no-results { padding: var(--spacing-xl) 0; text-align: center; } .archive-header { padding-top: var(--spacing-xl); } .archive-description { color: var(--cor-texto-secundario, var(--cor-texto)); } /* Modelo de Conteúdo (Gutenberg) vinculado a um termo de taxonomia — ver inc/taxonomy-modelos.php e Act Tema → Modelos. */ .taxonomy-modelo-content { padding-top: var(--spacing-lg); } .search-form { display: flex; align-items: center; gap: var(--spacing-xs); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: var(--radius-sm); padding: 4px 4px 4px var(--spacing-sm); max-width: 360px; } .search-field { flex-grow: 1; border: none; outline: none; background: transparent; } .search-submit { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--cor-principal); } .navigation.pagination .nav-links, .navigation.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--spacing-xs); padding: var(--spacing-lg) 0; } .navigation.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--radius-sm); background: var(--cor-branco, #fff); color: var(--cor-preto); } .navigation.pagination .page-numbers.current { background: var(--cor-principal); color: #fff; } /* 8. Animações de entrada (data-animate) ========================================================================== */ /** * Uso:
...
* Tipos: fade-up | fade-down | fade-left | fade-right | zoom-in | zoom-out * Atributos opcionais: * data-delay="200" — atraso em ms * data-duration="600" — duração em ms * data-repeat="true" — anima de novo toda vez que entra na viewport * O JS (assets/js/main.js) observa via IntersectionObserver e adiciona a * classe .animate-show quando o elemento entra na tela. */ [data-animate] { --animate-transform: translateY(80px); opacity: 0; transform: var(--animate-transform); will-change: transform, opacity; transition-property: opacity, transform; transition-duration: 0.6s; transition-timing-function: ease; } /* Evita scrollbar horizontal enquanto o elemento ainda está deslocado fora da tela */ main>*:has([data-animate="fade-left"]), main>*:has([data-animate="fade-right"]) { overflow-x: clip; } .animate-show { opacity: 1; transform: translate(0, 0) scale(1); } [data-animate="fade-up"] { --animate-transform: translateY(80px); } [data-animate="fade-down"] { --animate-transform: translateY(-80px); } [data-animate="fade-left"] { --animate-transform: translateX(-80px); } [data-animate="fade-right"] { --animate-transform: translateX(80px); } [data-animate="zoom-in"] { --animate-transform: scale(0.9); } [data-animate="zoom-out"] { --animate-transform: scale(1.1); } /* 9. Swiper (ActSwiper) — botões e paginação ========================================================================== */ /** * Estiliza os elementos que assets/js/swiper-helper.js (ActSwiper.build()) * cria automaticamente pra qualquer carrossel do tema — sitewide, não é * específico de um bloco. Usa .swiper-button (classe própria do helper) * em vez do :after padrão do Swiper (escondido abaixo). */ .swiper~.swiper-button-lock, .swiper~.swiper-button:after { display: none !important; } .swiper~.swiper-button { width: 35px; height: 35px; top: 50%; transform: translateY(-50%); color: var(--cor-extra-secundaria); background-color: transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0; transition: all .4s; cursor: pointer; } .swiper~.swiper-button svg { width: 13px; height: auto; } .swiper~.swiper-button:hover { color: var(--cor-destaque, var(--cor-secundaria)); } .swiper~.swiper-button.swiper-button-prev { left: 0; } .swiper~.swiper-button.swiper-button-next { right: 0; } .swiper~.swiper-pagination { bottom: 0 !important; } .swiper-pagination-bullets .swiper-pagination-bullet { opacity: 1; background-color: transparent; height: 24px; width: 24px; margin: 0 !important; position: relative; display: inline-flex; align-items: center; justify-content: center; } .swiper-pagination-bullet::after { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; background-color: var(--cor-extra-secundaria); } .swiper-pagination-bullet-active::after { background-color: var(--cor-destaque, var(--cor-secundaria)); } .titulo-section .section-header-text--center { flex-direction: column-reverse; display: flex; gap: 10px; max-width: 790px; } .act_btn-outline, .act_btn-secundario, .act_btn-primario { display: inline-flex; align-self: flex-start; align-items: center; justify-content: center; text-align: center; margin-top: auto; gap: 8px; padding: 10px 20px; border-radius: 100px; min-height: 58px; border: 1px solid transparent; background-color: var(--cor-extra); color: var(--cor-btn-secundario); font-size: var(--fs-6, 1rem); text-decoration: none; transition: all .4s; } .act_btn-secundario { color: var(--cor-extra); background-color: var(--cor-btn-secundario); } .act_btn-secundario:hover, .act_btn-primario:hover { color: var(--cor-texto-secundario); background-color: var(--cor-btn-secundario); } .act_btn-outline { color: var(--cor-extra); border-color: var(--cor-btn); background-color: transparent; } .act_btn-outline:hover { color: var(--cor-btn-secundario); border-color: var(--cor-extra); } .banner-slide__ctas::after { background-color: var(--cor-btn) !important; } .btn_icon>button::after, button.btn_icon::after, .btn_icon>a::after, a.btn_icon::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; background-color: var(--cor-branco); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M0.999999 17L17 1M17 15.4L17 1L2.6 1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M0.999999 17L17 1M17 15.4L17 1L2.6 1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: all .4s; } .btn_icon>button:hover::after, button.btn_icon:hover::after, .btn_icon>a:hover::after, a.btn_icon:hover::after { background-color: var(--cor-destaque); } .single-case .wp-block-act-tema-hero { min-height: 960px; position: relative; } .single-case .wp-block-act-tema-hero .hero__container { margin-left: 0; margin-right: auto; justify-content: end; padding-top: var(--header-height); position: unset; } .single-case .wp-block-act-tema-hero .hero-content { max-width: 530px; gap: 0; } .single-case .wp-block-act-tema-hero .hero-media { justify-content: flex-start; bottom: -100dvh; top: unset; bottom: 0; left: 0; transform: unset; } .single-case .wp-block-act-tema-hero .wp-block-buttons { width: 100%; margin-top: 2rem; } .single-case .wp-block-act-tema-hero .wp-block-button.btn_icon { width: 100%; } .page-template-contato-template #site-content { min-height: unset; } .bg-page-home { background-image: url('/wp-content/uploads/2026/09/bg-page-home.webp'); background-size: contain; background-position: top left; background-repeat: no-repeat; } /* Manchas de luz (radial-gradient) sobrepostas, fixas atrás de tudo — só o fundo decorativo da seção (não é atributo do bloco, ver act_render_hero_glow() no PHP). Proporções/posições convertidas em % a partir do frame original do design (2638×1574) pra acompanhar o tamanho real da seção. */ .style__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; top: -320px; z-index: -1; } .style__glow-blob { position: absolute; width: 56.2%; aspect-ratio: 1483 / 1126; border-radius: 9999px; opacity: .56; } .style__glow-blob--indigo { left: 0; top: 28.5%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(33, 42, 102, 0.55) 0%, rgba(24, 20, 20, 0) 100%); } .style__glow-blob--pink { left: 19.6%; top: 0; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(136, 19, 80, 0.55) 0%, rgba(24, 20, 20, 0) 100%); } .style__glow-blob--orange { left: 43.8%; top: 27%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(98, 55, 17, 0.55) 0%, rgba(24, 20, 20, 0) 100%); } @media (min-width: 1200px) and (max-width: 1536px) { .site-header, .banner { zoom: .9; } } @media (max-width: 1199px) { .single-case .wp-block-act-tema-hero .hero__container { justify-content: center; } .single-case .wp-block-act-tema-hero .hero-media { max-width: 600px; left: 50%; transform: translateX(-50%); } .single-case .wp-block-act-tema-hero .wp-block-buttons { margin-top: 50dvw; } } @media (max-width: 991px) { .flex-wrap { flex-wrap: wrap !important; } } @media (max-width: 767px) { .page-template-contato-template #site-content .wp-block-spacer { max-height: 150px; } }