/* ======================================================================== Tema: OceanWP Child Theme (PWA Ninja) Template: oceanwp ======================================================================== */ /* Theme Name: OceanWP Child (PWA Ninja) Theme URI: https://oceanwp.org/ Description: Tema Filho para o OceanWP com otimizações PWA e desativação de scripts. Author: Seu Nome ou Nickname Author URI: https://seusite.com.br Template: oceanwp Version: 1.0.39 */ /** * ================================================================= * ARQUIVO DE ESTILOS GLOBAIS - PLANTÃO NINJA PWA (VERSÃO FINAL E OTIMIZADA) * ================================================================= */ /* ---------------------------------------------------- */ /* BLOCO 1: VARIÁVEIS GLOBAIS (DESIGN TOKENS) */ /* ---------------------------------------------------- */ :root { /* Cores Principais (Paleta Central) */ --cor-principal: #6C3CF0; /* Roxo Elegante (Ação/Primário) */ --cor-secundaria: #DAD0FF; /* Lilas claro*/ --cor-destaque-1: #F26CE5; /* Cor de destaque vibrante Magenta/Neon pink sutil */ --cor-destaque-2: #37E2A1; /* Ação destaque Verde menta */ --cor-icone-secundaria: #DAD0FF; /* Ícones secundários Cinza suave */ --cor-texto: #2E2E3A; /* Cor principal para textos longos */ /* Cores de Fundo e Containers */ --cor-fundo-pagina: #FFFFFF; /* Fundo principal (branco) */ --cor-fundo-claro: #FAFAFB; /* Fundo MUITO leve para cards/blocos */ /* Cores de Borda e Linhas */ --cor-borda-padrao: #E0E0E0; /* Borda para inputs e elementos neutros */ --cor-borda-card: #E0E0E0; /* Borda para cards não selecionados */ /* Cores de Estado */ --cor-sucesso: #4CAF50; /* Verde para sucesso */ --cor-sucesso-bg: #E8F5E9; /* Verde para sucesso */ --cor-aviso: #FFC107; /* Amarelo para aviso */ --cor-aviso-bg: #FFC107; /* Amarelo para aviso */ --cor-erro: #F44336; /* Vermelho para erro */ --cor-erro-bg: #FFEBEE; /* Vermelho para erro */ /* Tipografia */ --fonte-principal: 'Poppins', sans-serif; /* Espaçamento e Geometria */ --padding-padrao: 16px; --borda-radius: 12px; --borda-radius-pequena: 8px; /* Sombras (Box Shadows) */ --tamanho-sombra: 0 4px 12px rgba(0, 0, 0, 0.05); --sombra-leve: 0 2px 4px rgba(0, 0, 0, 0.03); } /* Ocultação de elementos padrão do tema */ #site-header, #top-bar-wrap, .woocommerce-MyAccount-navigation, footer, .entry-title { display: none !important; } /* ---------------------------------------------------- */ /* BLOCO 2: RESET E ESTRUTURA GLOBAL (NINJA) */ /* ---------------------------------------------------- */ body { font-family: var(--fonte-principal); color: var(--cor-texto); background-color: var(--cor-fundo-pagina); margin: 0; padding: 0; line-height: 1.6; overflow-x: hidden; } /* --- TÍTULOS E TEXTOS --- */ .titulo-ninja { color: var(--cor-principal); font-size: var(--tamanho-titulo); text-align: center; margin: var(--padding-padrao) 0; } .subtitulo-ninja { color: var(--cor-principal); font-size: 14px; text-align: center; margin: var(--padding-padrao) 0; } /* Containers */ .ninja-container-principal { max-width: 600px; margin: 0 auto; padding: var(--padding-padrao); padding-bottom: 0; } /* ---------------------------------------------------- */ /* BLOCO 3: ESTILOS DE COMPONENTES DE INTERAÇÃO */ /* ---------------------------------------------------- */ /* --- CARDS NINJA --- */ .card-ninja-base { background-color: var(--cor-fundo-pagina); border-radius: var(--borda-radius); box-shadow: var(--cor-sombra-leve); padding: var(--padding-padrao); margin-bottom: var(--padding-padrao); border-left: 5px solid; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card-ninja-base:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } /* Variações de Borda */ .card-borda-ninja-principal { border-left-color: var(--cor-principal); } .card-borda-ninja-secundaria { border-left-color: var(--cor-secundaria); } .card-borda-ninja-Destaque1 { border-left-color: var(--cor-destaque-1); } .card-borda-ninja-Destaque2 { border-left-color: var(--cor-destaque-1); } .card-borda-ninja-sucesso { border-left-color: var(--cor-sucesso); } .card-borda-ninja-aviso { border-left-color: var(--cor-aviso); } .card-borda-ninja-erro { border-left-color: var(--cor-erro); } /* Estilo do Card individual */ .bulario-card { display: block; width: calc(100% - 40px); max-width: 600px; margin: 10px auto; border-left: 5px solid var(--cor-principal); background-color: var(--cor-cinza-claro); border-radius: var(--borda-radius); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; transition: background-color 0.2s, box-shadow 0.2s; display: flex; align-items: center; padding: 15px 20px; } .bulario-card:hover { background-color: #EFEFF5; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); } /* --- CAMPOS DE FORMULÁRIO (INPUTS, TEXTAREAS) --- */ .input-ninja, .textarea-ninja { width: 100%; padding: 12px; margin-bottom: var(--padding-padrao); border: 1px solid var(--cor-borda-padrao); border-radius: var(--borda-radius); box-sizing: border-box; font-size: var(--tamanho-texto); color: var(--cor-texto); background-color: var(--cor-fundo-claro); transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; } .input-ninja:focus, .textarea-ninja:focus { border-color: var(--cor-principal); box-shadow: 0 0 0 3px rgba(108, 60, 240, 0.1); outline: none; background-color: var(--cor-fundo-pagina); } /* Estilo do Ícone dentro do Input */ .input-ninja-wrapper .input-icon-ninja { position: absolute; right: 15px; top: 40%; transform: translateY(-50%); width: 24px; height: 24px; color: var(--cor-principal); } /* Garante que o input tenha padding à direita suficiente para o ícone */ .input-ninja-wrapper .input-ninja { /*padding-right: 45px;*/ } /* ---------------------------------------------------- */ /* --- GRUPO DE RÁDIO/BOTÃO NINJA (Seleção Única - Botões) --- */ /* ---------------------------------------------------- */ /* 2. ESTILOS DO GRUPO CONTAINER (.ninja-radio-group) - Layout */ /* Container Base: Define o Flex, mas sem direção */ .ninja-radio-group { /* Componente base para grupos de rádio com aparência de botão */ display: flex; gap: 10px; margin-bottom: var(--padding-padrao); width: 100%; } /* MODIFICADOR 1: Layout Horizontal (Botões Lado a Lado - Para seleção simples) */ .ninja-radio-group--horizontal-buttons { flex-direction: row; } /* Adaptação dos itens para o layout horizontal */ .ninja-radio-group--horizontal-buttons .ninja-radio-item { flex-grow: 1; padding: 10px 15px; /* Padding menor */ } /* MODIFICADOR 2: Layout Vertical (Cards Empilhados - Para conteúdo mais complexo) */ .ninja-radio-group--vertical-cards { flex-direction: column; /* Empilhamento vertical */ gap: 12px; /* Gap maior, ideal para cards */ } /* Adaptação dos itens para o layout vertical (Cards) */ .ninja-radio-group--vertical-cards .ninja-radio-item { width: 100%; text-align: left; /* Alinha o texto à esquerda (mais natural para cards) */ padding-left: 15px; padding-right: 15px; } /* --- CLASSE MODIFICADORA: EFEITO DE REDUÇÃO (Ex: Espécie, Sexo) --- */ .ninja-radio-group--efeito-selecao label { opacity: 1; transform: scale(1); filter: brightness(1); } /* Aplica a redução e opacidade nos botões NÃO selecionados DENTRO DESTE MODIFICADOR */ .ninja-radio-group--efeito-selecao input[type="radio"]:not(:checked) + label { opacity: 0.6; transform: scale(0.95); filter: brightness(0.95); } /* 1. ESTILOS DO ITEM BASE (.ninja-radio-item) - Aparência Visual */ /* Este estilo é aplicado ao