/* Theme Name: PontoGeo Institucional Theme URI: https://pontogeo.com.br Author: Moreli Desenvolvimento de Software Author URI: https://moreli.com.br Description: Tema institucional e landing page oficial do PontoGeo - Ponto Eletrônico Inteligente com Geolocalização e Reconhecimento Facial. Version: 1.0.0 License: Proprietary Text Domain: pontogeo */ /* ============================================================ 1. RESET DO WORDPRESS O WordPress injeta estilos padrão que conflitam com o Tailwind e com o layout da landing page. Este bloco neutraliza esses estilos. ============================================================ */ /* Remove margens e padding que o WP adiciona ao body */ body { margin: 0 !important; padding: 0 !important; } /* Remove a barra de admin do cálculo de posição do header fixo */ html.admin-bar .sticky { top: 32px !important; } @media screen and (max-width: 782px) { html.admin-bar .sticky { top: 46px !important; } } /* Remove sublinhado e cores padrão de links do WP */ a { color: inherit; text-decoration: none; } /* Remove estilos de imagem padrão do WP */ img { max-width: 100%; height: auto; border: none; vertical-align: middle; } /* Logotipo do WordPress e Branding */ .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; } .custom-logo-link img.custom-logo, .pontogeo-logo-img { max-height: 46px; max-width: 220px; width: auto; height: auto; object-fit: contain; display: block; } /* Remove estilo de lista padrão do WP */ ul, ol { list-style: none; margin: 0; padding: 0; } /* Remove outline padrão de foco (Tailwind cuida do acessível) */ :focus { outline: none; } /* Remove margens padrão de heading/parágrafos do WP */ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; } /* Remove a classe .entry-content que o WP adiciona e que injeta estilos */ .entry-content, .wp-block-group, .wp-site-blocks { all: unset; } /* ============================================================ 2. SCROLL SUAVE (para os links da navbar: #funcionalidades, #planos, etc.) ============================================================ */ html { scroll-behavior: smooth; } /* ============================================================ 3. FONTE PADRÃO A fonte Plus Jakarta Sans é carregada via Google Fonts no . Esta regra garante que ela seja usada em todo o documento. ============================================================ */ body { font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ 4. CORES DO TEMA (variáveis CSS) Usadas nos elementos que não são cobertos pelo Tailwind CDN. ============================================================ */ :root { --color-primary: #2F65A7; --color-primary-dark: #234c7e; --color-primary-light: #e8f0f9; --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-500: #64748b; --color-slate-600: #475569; --color-slate-900: #0f172a; --color-emerald: #047857; } /* ============================================================ 5. FORMULÁRIO — estilos base para inputs e selects O Tailwind CDN cobre a maioria, mas o WP pode sobrescrever os campos de formulário com seus próprios estilos. ============================================================ */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea { box-sizing: border-box; background-color: #ffffff; border: 1px solid var(--color-slate-200); border-radius: 8px; padding: 10px 12px; font-size: 13px; font-family: inherit; color: var(--color-slate-900); width: 100%; transition: border-color 0.15s ease; -webkit-appearance: none; appearance: none; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(47, 101, 167, 0.12); } button[type="submit"] { cursor: pointer; font-family: inherit; transition: opacity 0.15s ease, background-color 0.15s ease; } button[type="submit"]:hover { opacity: 0.9; } /* ============================================================ 6. HEADER FIXO — garante que fica acima de qualquer conteúdo WP ============================================================ */ header.sticky { position: sticky; top: 0; z-index: 50; background-color: #ffffff; border-bottom: 1px solid var(--color-slate-200); } /* ============================================================ 7. ANIMAÇÃO DOS CARDS DE RECURSO Leve elevação ao passar o mouse — melhora o UX sem peso. ============================================================ */ section#funcionalidades .bg-white, section#planos .bg-white { transition: box-shadow 0.2s ease, transform 0.2s ease; } section#funcionalidades .bg-white:hover, section#planos .bg-white:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } /* ============================================================ 8. BOTÃO CTA PRINCIPAL — estado de hover Tailwind CDN cuida das classes utilitárias mas o hover em cores customizadas (#2F65A7) nem sempre é gerado pelo CDN. ============================================================ */ a[class*="bg-[#2F65A7]"]:hover { background-color: var(--color-primary-dark) !important; } a[class*="bg-emerald"]:hover { background-color: #065f46 !important; } /* ============================================================ 9. RESPONSIVO — ajustes finos para mobile ============================================================ */ @media (max-width: 640px) { section { padding-left: 16px; padding-right: 16px; } h1 { font-size: 2rem !important; line-height: 1.2 !important; } }