/* ============================================ IHP — DESIGN SYSTEM v2.0 ============================================ Padrões CSS extraídos das páginas reais do site. Toda página nova DEVE usar essas classes. Não inventar componentes — se faltar algo, adicionar AQUI. Arquivos de referência: - page-equipe.php - page-fale-conosco.php - page-atendimento.php - single.php (artigos) Versão 1.0 (paleta + tipografia) — preservada. Versão 2.0 — adicionados componentes reais. ============================================ */ /* ============================================ 1. GOOGLE FONTS ============================================ */ /* Carregadas no de cada template via tag . Fontes usadas: - Cormorant Garamond → títulos, hero - Lora → corpo de texto longo (artigos) - Inter → UI, botões, labels, eyebrows */ /* ============================================ 2. VARIÁVEIS DE COR (paleta IHP) ============================================ */ :root { /* Verdes */ --verde-escuro: #3D5A4D; --verde-medio: #5A7A6B; --verde-salvia: #A0BAA1; --verde-suave: #D4DFD4; --verde-bege: #E8EEE6; /* Dourados */ --dourado: #B89968; --dourado-claro: #D4B98A; /* Beges */ --bege: #F7F4EE; --bege-escuro: #ECE7DC; /* Texto */ --texto: #2C3530; --texto-medio: #5A6560; --texto-suave: #8A9590; /* Branco */ --branco: #FFFFFF; /* Famílias de fonte */ --serif: 'Cormorant Garamond', Georgia, serif; --serif2: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } /* ============================================ 3. WRAPPER DE ISOLAMENTO ============================================ IMPORTANTE: tema webbh aplica grid 1fr 10fr 1fr. Toda página custom precisa deste wrapper para "escapar" do grid e ocupar 100% da largura. */ .ihp-wrapper { position: relative; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); grid-column: 1 / -1 !important; display: block !important; background: var(--bege); font-family: var(--sans); color: var(--texto); } .ihp-wrapper * { box-sizing: border-box; } /* ============================================ 4. HERO PADRÃO (verde gradiente) ============================================ Usado em: Equipe, Fale Conosco, Atendimento, Single */ .ihp-hero { background: linear-gradient(135deg, #3D5A4D 0%, #4A6859 50%, #5A7A6B 100%); color: var(--branco); padding: 60px 24px 70px; text-align: center; } .ihp-hero .ihp-eyebrow-hero { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--dourado-claro); padding-bottom: 8px; border-bottom: 1px solid rgba(212, 185, 138, 0.3); margin-bottom: 24px; } .ihp-hero h1 { font-family: var(--serif); font-size: clamp(34px, 4.5vw, 52px); font-weight: 500; font-style: italic; margin: 0 0 16px; letter-spacing: -0.3px; line-height: 1.15; color: var(--branco); } /* Strong dentro do h1 = destaque dourado claro, sem itálico */ .ihp-hero h1 strong { font-style: normal; color: var(--dourado-claro); font-weight: 500; } .ihp-hero p { font-family: var(--serif2); font-size: 16px; color: rgba(255,255,255,0.85); max-width: 720px; margin: 0 auto; line-height: 1.7; font-weight: 400; } /* Container de CTAs no hero */ .ihp-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 36px; } @media (max-width: 640px) { .ihp-hero { padding: 48px 20px 56px; } .ihp-hero-ctas { flex-direction: column; } .ihp-hero-ctas .ihp-btn { width: 100%; } } /* ============================================ 5. SEÇÕES (estrutura padrão) ============================================ */ .ihp-section { padding: 60px 24px; max-width: 1100px; margin: 0 auto; } .ihp-section-fullwidth { padding: 60px 24px; } .ihp-section-title { text-align: center; margin-bottom: 40px; } .ihp-section-title .ihp-eyebrow { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--verde-medio); margin-bottom: 12px; } .ihp-section-title h2 { font-family: var(--serif); font-size: clamp(28px, 3.5vw, 40px); color: var(--verde-escuro); font-weight: 500; margin: 0 0 14px; line-height: 1.2; } .ihp-section-title h2 em { font-style: italic; color: var(--dourado); } .ihp-section-title .ihp-divisor { width: 48px; height: 3px; background: var(--dourado); border-radius: 2px; margin: 0 auto; } .ihp-section-intro { font-family: var(--serif2); font-size: 16px; color: var(--texto-medio); line-height: 1.75; text-align: center; max-width: 760px; margin: 0 auto; } /* Variante alinhada à esquerda — para parágrafos longos de leitura */ .ihp-section-intro-left { font-family: var(--serif2); font-size: 16px; color: var(--texto-medio); line-height: 1.75; text-align: left; max-width: 760px; margin: 0 auto; } @media (max-width: 640px) { .ihp-section, .ihp-section-fullwidth { padding: 40px 20px; } } /* ============================================ 6. EYEBROW STANDALONE ============================================ */ .ihp-eyebrow { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--verde-medio); margin-bottom: 12px; } /* ============================================ 7. BOTÕES ============================================ */ .ihp-btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; font-family: var(--sans); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; border-radius: 4px; transition: all 0.3s ease; border: none; cursor: pointer; text-align: center; } /* Primário dourado — CTA destaque */ .ihp-btn-primary { background: var(--dourado); color: var(--verde-escuro); } .ihp-btn-primary:hover { background: var(--dourado-claro); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(184, 153, 104, 0.3); } /* Outline — sobre fundo escuro (hero verde) */ .ihp-btn-outline { background: transparent; color: var(--branco); border: 1px solid rgba(255,255,255,0.4); } .ihp-btn-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.8); } /* Secundário — verde escuro com texto branco */ .ihp-btn-secondary { background: var(--verde-escuro); color: var(--branco); } .ihp-btn-secondary:hover { background: var(--verde-medio); transform: translateY(-2px); } /* ============================================ 8. CARD PADRÃO (hover translateY + shadow) ============================================ Base usada em: canal-card, modalidade-card, nucleo-card. Variantes adicionam border-top colorido ou cor de fundo. */ .ihp-card { background: var(--branco); border-radius: 8px; padding: 32px 28px; box-shadow: 0 4px 20px rgba(61, 90, 77, 0.06); transition: all 0.4s ease; border: 1px solid transparent; text-decoration: none; color: inherit; display: block; } .ihp-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(61, 90, 77, 0.12); border-color: var(--verde-salvia); } .ihp-card h3 { font-family: var(--serif); font-size: 22px; color: var(--verde-escuro); font-weight: 500; line-height: 1.3; margin: 0 0 12px; } .ihp-card p { font-family: var(--serif2); font-size: 15px; color: var(--texto-medio); line-height: 1.7; margin: 0; } /* Variante card com fundo bege (em seções com fundo branco) */ .ihp-card-bege { background: var(--bege); } .ihp-card-bege:hover { background: var(--branco); border-color: var(--bege-escuro); } /* Variante com border-top colorida (modalidade-card style) */ .ihp-card-top-verde { border-top: 4px solid var(--verde-medio); } .ihp-card-top-dourado { border-top: 4px solid var(--dourado); } .ihp-card-top-salvia { border-top: 4px solid var(--verde-salvia); } /* ============================================ 9. CARD DE PESSOA (foto circular + bio) ============================================ Padrão usado em /equipe/. Variantes: tamanho diretoria (130px) e equipe (80px). */ .ihp-pessoa-card { background: var(--branco); border-radius: 8px; overflow: hidden; transition: all 0.4s ease; box-shadow: 0 4px 20px rgba(61, 90, 77, 0.06); display: flex; flex-direction: column; } .ihp-pessoa-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(61, 90, 77, 0.12); } .ihp-pessoa-foto-wrapper { width: 130px; height: 130px; margin: 24px auto 0; overflow: hidden; background: var(--bege-escuro); border-radius: 50%; } .ihp-pessoa-foto { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9); transition: transform 0.4s ease; } .ihp-pessoa-card:hover .ihp-pessoa-foto { transform: scale(1.05); } .ihp-pessoa-content { padding: 28px 24px; flex: 1; display: flex; flex-direction: column; text-align: center; } .ihp-pessoa-cargo { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--dourado); margin-bottom: 10px; } .ihp-pessoa-card h3 { font-family: var(--serif); font-size: 22px; color: var(--verde-escuro); font-weight: 500; line-height: 1.25; margin: 0 0 4px; } .ihp-pessoa-crp { font-family: var(--sans); font-size: 12px; color: var(--texto-suave); margin-bottom: 16px; font-style: italic; } .ihp-pessoa-bio { font-family: var(--serif2); font-size: 14px; color: var(--texto-medio); line-height: 1.65; margin: 0; } /* Variante compacta (equipe geral, não diretoria) */ .ihp-pessoa-card-compact .ihp-pessoa-foto-wrapper { width: 80px; height: 80px; margin-top: 20px; } .ihp-pessoa-card-compact .ihp-pessoa-content { padding: 16px 18px 20px; } .ihp-pessoa-card-compact h3 { font-size: 17px; } .ihp-pessoa-card-compact .ihp-pessoa-bio { font-size: 13px; line-height: 1.6; } /* ============================================ 10. GRIDS ============================================ */ .ihp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .ihp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ihp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 1024px) { .ihp-grid-3 { grid-template-columns: repeat(2, 1fr); } .ihp-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .ihp-grid-2 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .ihp-grid-3, .ihp-grid-4 { grid-template-columns: 1fr; } } /* ============================================ 11. CTA FINAL VERDE (fechamento de página) ============================================ Usado em: Atendimento, Single (variantes). */ .ihp-cta-final { background: linear-gradient(135deg, var(--verde-escuro), #4A6859); color: var(--branco); padding: 70px 24px; text-align: center; position: relative; overflow: hidden; } .ihp-cta-final::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 30%, rgba(184, 153, 104, 0.1) 0%, transparent 60%); pointer-events: none; } .ihp-cta-final-content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; } .ihp-cta-final h2 { font-family: var(--serif); font-size: clamp(28px, 3.5vw, 40px); color: var(--branco); font-weight: 500; font-style: italic; margin: 0 0 16px; line-height: 1.2; } .ihp-cta-final h2 em { font-style: italic; color: var(--dourado-claro); } .ihp-cta-final p { font-family: var(--serif2); font-size: 15px; color: rgba(255,255,255,0.85); max-width: 600px; margin: 0 auto 36px; line-height: 1.7; } @media (max-width: 640px) { .ihp-cta-final { padding: 52px 20px; } } /* ============================================ 12. CITAÇÃO / BLOCKQUOTE DECORATIVA ============================================ Para frases destacadas dentro de seções. */ .ihp-quote { border-left: 3px solid var(--dourado); padding: 8px 0 8px 24px; margin: 24px auto; max-width: 720px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--texto-medio); line-height: 1.6; } .ihp-quote cite { display: block; font-family: var(--sans); font-style: normal; font-size: 12px; color: var(--dourado); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 12px; } /* ============================================ 13. UTILITÁRIOS ============================================ */ .ihp-text-center { text-align: center; } .ihp-text-left { text-align: left; } /* SVG ícones — tamanhos padronizados */ .ihp-icon-sm { width: 16px; height: 16px; } .ihp-icon-md { width: 22px; height: 22px; } .ihp-icon-lg { width: 32px; height: 32px; } /* ============================================ 14. LINK DISCRETO (navegação secundária) ============================================ Usado em: Conheça o IHP, Atendimento. Para links de navegação sem peso de botão. */ .ihp-link-discreto { display: inline-block; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--verde-medio); text-decoration: none; margin-top: 20px; transition: color 0.3s ease; } .ihp-link-discreto:hover { color: var(--verde-escuro); } /* ============================================ 15. INFO BLOCO (informações práticas) ============================================ Usado em: Atendimento (valor, agendamento, local). Bloco bege com linhas de label + valor. */ .ihp-info-bloco { background: var(--bege); border-radius: 6px; padding: 16px 20px; margin: 20px 0; } .ihp-info-linha { font-family: var(--sans); font-size: 13px; color: var(--texto); line-height: 1.6; margin: 0 0 6px; display: flex; gap: 8px; } .ihp-info-linha:last-child { margin: 0; } .ihp-info-label { font-weight: 600; color: var(--verde-escuro); flex-shrink: 0; min-width: 100px; } /* ============================================ 16. CARD DE MODALIDADE (atendimento) ============================================ Usado em: Atendimento. Card com tag de identificação + info bloco + CTA. Variantes: verde (Clínica Social) e dourado (Profissionais IHP). */ .ihp-card-modalidade { background: var(--branco); border-radius: 8px; padding: 40px 36px; box-shadow: 0 4px 20px rgba(61, 90, 77, 0.06); transition: all 0.4s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; border-top: 4px solid transparent; } .ihp-card-modalidade:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(61, 90, 77, 0.12); } /* Variantes de cor do border-top */ .ihp-card-modalidade-verde { border-top-color: var(--verde-medio); } .ihp-card-modalidade-dourado { border-top-color: var(--dourado); } .ihp-card-modalidade-tag { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; } .ihp-card-modalidade-verde .ihp-card-modalidade-tag { color: var(--verde-medio); } .ihp-card-modalidade-dourado .ihp-card-modalidade-tag { color: var(--dourado); } .ihp-card-modalidade h3 { font-family: var(--serif); font-size: 26px; color: var(--verde-escuro); font-weight: 500; margin: 0 0 16px; line-height: 1.2; } .ihp-card-modalidade p { font-family: var(--serif2); font-size: 15px; color: var(--texto-medio); line-height: 1.7; margin: 0 0 8px; flex: 1; } .ihp-card-modalidade-cta { margin-top: auto; padding-top: 8px; } /* ============================================ 17. CARD DE PÚBLICO ============================================ Usado em: Atendimento. Card simples com título + descrição curta. */ .ihp-card-publico { padding: 28px 20px; background: var(--bege); border-radius: 6px; text-align: center; transition: all 0.3s ease; border: 1px solid transparent; } .ihp-card-publico:hover { border-color: var(--verde-medio); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(61, 90, 77, 0.08); background: var(--branco); } .ihp-card-publico h3 { font-family: var(--serif); font-size: 20px; color: var(--verde-escuro); font-weight: 500; margin: 0 0 6px; line-height: 1.3; } .ihp-card-publico p { font-family: var(--serif2); font-size: 13px; color: var(--texto-suave); margin: 0; line-height: 1.5; }