/* ========================================================================== 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: 'Inter'; src: url('../fonts/inter/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Kantumruy Pro'; src: url('../fonts/kantumruy-pro/KantumruyPro-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Kantumruy Pro '; src: url('../fonts/kantumruy-pro/KantumruyPro-Italic-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } /* 1. Reset & Variáveis ========================================================================== */ :root { --container-width: 1296px; --container-width-lg: 1396px; --container-width-xl: 1450px; --container-width-xxl: 1780px; --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; --gradiente: linear-gradient(180deg, var(--cor-destaque) 0%, var(--cor-destaque-secundaria) 100%); --transition-base: .4s; --transition-fast: .2s; } *, *::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 { height: var(--header-height) !important; } section[id], div[id] { scroll-margin-top: 0; } 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.05; 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-secundaria, #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)); padding: 0 var(--spacing-sm); } #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: var(--cor-destaque); 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: var(--cor-branco); font-size: 0.875rem; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08); } /* .contacts-float__* — reaproveitado como classe de estilo pelos contatos do rodapé (components/footer/footer.php), não é mais um widget flutuante próprio (removido). */ .contacts-float__item { display: flex; align-items: stretch; width: 100%; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); border-top-left-radius: 10px; border-bottom-left-radius: 10px; transition: transform var(--transition-fast); } .contacts-float__item:hover { transform: translateX(-4px); } .contacts-float__icon { display: flex; align-items: center; justify-content: center; width: 50px; flex-shrink: 0; background: var(--cor-principal, #2a2169); border-top-left-radius: 10px; border-bottom-left-radius: 10px; color: var(--cor-branco); } .contacts-float__icon svg { width: 24px; height: 24px; } .contacts-float__icon img { width: 24px; height: 24px; object-fit: contain; } .contacts-float__info { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px var(--spacing-sm); background: var(--cor-branco); min-width: 190px; width: 100%; } .contacts-float__label { color: var(--cor-principal, #2a2169); font-family: var(--font-2, var(--font-1, inherit)); font-size: var(--fs-7, 1.125rem); } .contacts-float__number { color: #2f2f2f; font-family: var(--font-2, var(--font-1, inherit)); font-size: var(--fs-7, 1.125rem); } @media (max-width: 767px) { .contacts-float__info { min-width: 0; } .contacts-float__label, .contacts-float__number { font-size: var(--fs-8, 0.875rem); } } #backToTop { display: none; position: fixed; bottom: 90px; right: 22px; align-items: center; justify-content: center; border-radius: 50%; width: 38px; height: 38px; color: var(--cor-branco); 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: var(--cor-branco); font-size: 0.9375rem; line-height: 1.5; } #aceite-termos-conteudo a { color: var(--cor-branco); text-decoration: underline; } #btn-aceite-termos { flex-shrink: 0; background: #037354; border-radius: var(--radius-md); font-weight: 700; text-decoration: none !important; color: var(--cor-branco); padding: 10px 20px; } #btn-aceite-termos:hover { background: #025a43; color: var(--cor-branco); } @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: var(--cor-branco); 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: var(--cor-branco); border-radius: var(--radius-sm); font-weight: 700; transition: opacity var(--transition-fast); } .btn-404:hover { color: var(--cor-branco); opacity: 0.85; } .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 { display: flex; justify-content: center; 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-texto); } .navigation.pagination .page-numbers.current { background: var(--cor-principal); color: var(--cor-branco); } /* 7. Botões (blocos) ========================================================================== */ /** * Base compartilhada dos CTAs de bloco (Banner, Itens em Destaque, Vitrine * de Vídeos...) — quase todos eram o mesmo botão reescrito em cada * .css. `min-width`/`border-radius`/`font-weight` continuam * ajustáveis por bloco (classe própria do bloco stackada junto, ex: * `banner-slide__cta btn-principal`) quando o card pede uma medida * diferente do padrão abaixo. */ .btn-principal .wp-element-button, .btn-principal button, .btn-principal a, button.btn-principal, a.btn-principal, .btn-outline, .btn-principal { width: 100%; max-width: 260px; } .btn-principal .wp-element-button, .btn-principal button, .btn-principal a, button.btn-principal, a.btn-principal, .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: var(--spacing-xs); border-radius: 100px; font-family: var(--font-1); font-size: var(--fs-4, 1.125rem); /* font-weight: bold; */ text-align: center; white-space: nowrap; transition: all .4s; } .btn-principal .wp-element-button, .btn-principal button, .btn-principal a, button.btn-principal, a.btn-principal { background: var(--cor-extra-secundaria); color: var(--cor-branco); } .btn-outline { background: transparent; border: 1px solid var(--cor-destaque-secundaria); color: var(--cor-branco); } .btn-outline:hover { color: var(--cor-branco); background-color: var(--cor-destaque-secundaria); } .btn-principal .wp-element-button:hover, .btn-principal button:hover, .btn-principal a:hover, button.btn-principal:hover, a.btn-principal:hover { color: var(--cor-branco); background-color: var(--cor-destaque); } .btn-custom button, .btn-custom a, button.btn-custom, a.btn-custom { width: 100% !important; max-width: 530px !important; border-radius: 10px !important; position: relative; } .btn-custom button::after, .btn-custom a::after, button.btn-custom::after, a.btn-custom::after { content: ""; display: inline-block; width: 23px; height: 23px; margin-left: 8px; background: url('data:image/svg+xml;utf8,') center / contain no-repeat; } /* 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-wrapper { padding-top: 10px; padding-bottom: 10px; } .swiper~.swiper-button-lock, .swiper~.swiper-button:after { display: none !important; } .swiper~.swiper-button { width: 36px; height: 36px; top: 50%; transform: translateY(-50%); background-color: transparent; border-radius: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--cor-branco); transition: background-color var(--transition-base); cursor: pointer; border: none; } .swiper~.swiper-button svg { width: 16px; height: auto; } .swiper~.swiper-button:hover { background-color: var(--cor-btn); } .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: #d9d9d9; } .swiper-pagination-bullet-active::after { background-color: var(--cor-destaque, var(--cor-secundaria)); } .swiper-button-next:after, .swiper-button-prev:after { display: none !important; } .case-interna { position: relative; z-index: 1; } .page-atendimento .contact-info-list a, .page-atendimento .contact-info-list a svg { color: var(--cor-branco); } .page-atendimento .contact-info-list a:hover, .page-atendimento .contact-info-list a:hover svg { color: var(--cor-extra); } @media (max-width: 767px) { .text-center { text-align: center !important; } :root { --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 32px; --spacing-xl: 48px; } .btn-principal .wp-element-button, .btn-principal button, .btn-principal a, button.btn-principal, a.btn-principal, .btn-outline, .btn-principal { max-width: 440px; margin-left: auto; margin-right: auto; } .btn-principal .wp-element-button, .btn-principal button, .btn-principal a, button.btn-principal, a.btn-principal, .btn-outline { margin-left: auto; margin-right: auto; } }