/* ═══════════════════════════════════════════════════════════════════════════════ 0-root.css — AVCB Serviços e Treinamento PALETA DE CORES E VARIÁVEIS GLOBAIS Uma única fonte da verdade para todo o site. ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────── PALETA PRIMÁRIA: NAVY (Azul Profundo) ───────────────────────────────────────────────────────── */ --navy-950: #010C1A; --navy-900: #01172E; --navy-800: #02203D; --navy-700: #032C4D; --navy-600: #0A3D62; --navy-500: #1a3a6d; --navy-400: #05507F; --navy-300: #4A8AB2; --navy-200: #B3D4E5; --navy-100: #D6E8F5; --navy-50: #E6F2FF; /* ───────────────────────────────────────────────────────── PALETA SECUNDÁRIA: FOGO (Laranja/Vermelho — CTA) ───────────────────────────────────────────────────────── */ --fire-700: #CC2200; --fire-600: #CC3D00; --fire-500: #FF4D00; /* cor principal de destaque */ --fire-400: #FF6B1A; --fire-300: #FF8C47; --fire-200: #FFB899; --fire-100: #FFE4D6; --fire-50: #FFF4EF; /* ───────────────────────────────────────────────────────── PALETA ÂMBAR (atenção, badges, estrelas) ───────────────────────────────────────────────────────── */ --amber-500: #E65100; --amber-400: #FFB300; --amber-300: #FFCE00; --amber-200: #FFE082; --amber-100: #FFF8DC; /* ───────────────────────────────────────────────────────── PALETA VERDE (WhatsApp, sucesso) ───────────────────────────────────────────────────────── */ --green-700: #1B8A40; --green-600: #25A653; --green-500: #25D366; /* WhatsApp padrão */ --green-400: #5DF58E; --green-300: #A5F9C4; --green-200: #D4EDDA; --green-100: #E8F5E9; /* Sucesso/confirmação */ --success-600: #1B8A40; --success-500: #28a745; --success-400: #34A853; --success-100: #D4EDDA; /* ───────────────────────────────────────────────────────── PALETA VERMELHA (alertas, erros) ───────────────────────────────────────────────────────── */ --red-700: #B71C1C; --red-600: #f44336; --red-500: #dc3545; --red-400: #E63946; --red-300: #FF5349; --red-200: #ef9a9a; --red-100: #fcebeb; /* ───────────────────────────────────────────────────────── PALETA NEUTRA (cinzas / brancos) ───────────────────────────────────────────────────────── */ --gray-900: #000000; --gray-800: #121212; --gray-700: #212121; --gray-600: #343a40; --gray-500: #616161; --gray-400: #9e9e9e; --gray-300: #CCCCCC; --gray-200: #e0e0e0; --gray-100: #f8f9fa; --gray-50: #FFFFFF; --red: #CC0000; --red-dark: #990000; --red-light: #FF3333; --green: #16a34a; --green-dark: #15803d; --amber: #d97706; --blue: #1d4ed8; --white: #ffffff; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-500: #6b7280; --gray-700: #374151; --gray-900: #111827; --black-deep: #0a0a0a; /* Tipografia */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; /* Espaçamento */ --sp-xs: 0.25rem; --sp-sm: 0.5rem; --sp-md: 1rem; --sp-lg: 1.5rem; --sp-xl: 2rem; --sp-2xl: 3rem; --sp-3xl: 4rem; /* Radii */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px; /* Sombras */ --shadow-sm: 0 1px 3px rgba(0,0,0,.12); --shadow-md: 0 4px 12px rgba(0,0,0,.15); --shadow-lg: 0 8px 24px rgba(0,0,0,.20); --shadow-red: 0 4px 16px rgba(204,0,0,.35); /* Transições */ --t: .2s ease; /* ───────────────────────────────────────────────────────── ALIASES SEMÂNTICOS (use estes nos componentes) ───────────────────────────────────────────────────────── */ /* Cor de marca principal */ --c-brand: var(--navy-500); --c-brand-dark: var(--navy-700); --c-brand-light: var(--navy-300); /* CTA / destaque */ --c-cta: var(--fire-500); --c-cta-hover: var(--fire-400); --c-cta-dark: var(--fire-600); /* Texto */ --c-text: var(--gray-500); --c-text-dark: var(--gray-700); --c-text-light: var(--gray-400); --c-heading: var(--navy-700); /* Fundos */ --c-bg: var(--gray-100); --c-bg-white: var(--gray-50); --c-bg-dark: var(--navy-800); /* Bordas */ --c-border: var(--gray-200); --c-border-light: var(--gray-100); /* WhatsApp */ --c-wpp: var(--green-500); --c-wpp-hover: var(--green-600); --c-wpp-shadow: rgba(37,211,102,0.4); /* ───────────────────────────────────────────────────────── TOKENS DO HEADER (prefixo h-) ───────────────────────────────────────────────────────── */ --h-navy-deep: var(--navy-950); --h-navy: var(--navy-900); --h-navy-mid: var(--navy-800); --h-blue: var(--navy-500); --h-orange: var(--fire-500); --h-orange-h: var(--fire-400); --h-green: var(--green-500); --h-green-h: var(--green-600); --h-white: #ffffff; --h-white-dim: rgba(255,255,255,0.82); --h-white-faint: rgba(255,255,255,0.18); --h-gray-soft: var(--gray-100); --h-gray-mid: var(--gray-500); --h-font: 'Segoe UI', system-ui, sans-serif; --h-container: 1320px; --h-topbar-h: 40px; --h-main-h: 72px; --h-t1: .18s ease; --h-t2: .28s cubic-bezier(.4,0,.2,1); --h-wa-shadow: 0 4px 20px rgba(37,211,102,0.4); --h-drop-shadow: 0 16px 48px rgba(0,0,0,0.22); /* ───────────────────────────────────────────────────────── TOKENS DO FOOTER (prefixo footer-) ───────────────────────────────────────────────────────── */ --footer-bg-start: #0a1420; --footer-bg-end: #03060a; --footer-glass: rgba(255,255,255,0.03); --footer-glass-hover: rgba(255,255,255,0.07); --footer-border: rgba(255,255,255,0.08); --footer-border-hover: rgba(255,77,0,0.3); --footer-text-primary: #ffffff; --footer-text-secondary: rgba(255,255,255,0.75); --footer-text-muted: rgba(255,255,255,0.55); --footer-accent: var(--fire-500); --footer-accent-hover: var(--fire-400); --footer-whatsapp: var(--green-500); --footer-whatsapp-hover: var(--green-600); --footer-phone: #3498db; --footer-phone-hover: #2980b9; --footer-radius: 16px; --footer-radius-sm: 10px; --footer-shadow: 0 20px 60px rgba(0,0,0,0.5); --footer-transition: .3s ease; --footer-ease: cubic-bezier(.4,0,.2,1); --footer-font: var(--h-font); /* ───────────────────────────────────────────────────────── TOKENS DE SNIPPETS (AI Overview) ───────────────────────────────────────────────────────── */ --snip-bg: #ffffff; --snip-bg-alt: #f8fafc; --snip-border: #e2e8f0; --snip-shadow: 0 10px 25px -5px rgba(0,0,0,.05), 0 8px 10px -6px rgba(0,0,0,.02); --snip-shadow-hov: 0 20px 30px -10px rgba(0,0,0,.1); --snip-r: 20px; --snip-r-sm: 12px; /* Cores por serviço (snippets) */ --snip-ppcip: var(--fire-500); --snip-renovacao: #2563eb; --snip-dispensa: #16a34a; --snip-inspecao: #7c3aed; --snip-instalacao: #ea580c; --snip-extintores: #dc2626; /* Gradientes por serviço */ --grad-ppcip: linear-gradient(135deg, #FF4D00, #FF8A5C); --grad-renovacao: linear-gradient(135deg, #2563eb, #60a5fa); --grad-dispensa: linear-gradient(135deg, #16a34a, #4ade80); --grad-inspecao: linear-gradient(135deg, #7c3aed, #a78bfa); --grad-instalacao: linear-gradient(135deg, #ea580c, #f97316); --grad-extintores: linear-gradient(135deg, #dc2626, #ef4444); /* ───────────────────────────────────────────────────────── TIPOGRAFIA ───────────────────────────────────────────────────────── */ --f-body: 'Segoe UI', system-ui, -apple-system, sans-serif; --f-display: 'Inter', var(--f-body); /* ───────────────────────────────────────────────────────── ESPAÇAMENTOS ───────────────────────────────────────────────────────── */ --px: clamp(1rem, 4vw, 3rem); /* padding horizontal de seções */ --max-w: 1200px; --spacing-xs: .5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-xxl: 5rem; /* ───────────────────────────────────────────────────────── BORDAS / RAIOS ───────────────────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-full: 9999px; /* ───────────────────────────────────────────────────────── SOMBRAS ───────────────────────────────────────────────────────── */ --sh-xs: 0 1px 3px rgba(0,0,0,.06); --sh-sm: 0 4px 12px rgba(0,0,0,.08); --sh-md: 0 8px 24px rgba(0,0,0,.12); --sh-lg: 0 16px 40px rgba(0,0,0,.15); --sh-fire: 0 8px 24px rgba(255,77,0,.4); --sh-wpp: 0 8px 24px rgba(37,211,102,.4); /* ───────────────────────────────────────────────────────── TRANSIÇÕES ───────────────────────────────────────────────────────── */ --t: .2s ease; --ease: cubic-bezier(.4,0,.2,1); --spring: cubic-bezier(.34,1.56,.64,1); /* ───────────────────────────────────────────────────────── CONTATO — valores reais do negócio ⚠️ EDITE AQUI o número e o e-mail antes de publicar. O sistema Hoot (0-gestao.js) lê estas vars via getCssVar() e injeta nos elementos [data-hoot="contact-whatsapp-link"], [data-hoot="contact-phone-link"] etc. ───────────────────────────────────────────────────────── */ /* ── WhatsApp ── */ --contact-whatsapp-link: "https://wa.me/553193691563"; --contact-whatsapp-text: "WhatsApp"; --contact-whatsapp-number: "(31) 9 3691-563"; --contact-whatsapp-text-cta: "Fale pelo WhatsApp"; /* ── Telefone ── */ --contact-phone-link: "tel:+553193691563"; --contact-phone-text: "Telefone"; --contact-phone-number: "(31) 9 3691-563"; /* ── E-mail ── */ --hoot-email: "mailto:contato@avcb-servicos.com.br"; --hoot-email-text: "contato@avcb-servicos.com.br"; /* ───────────────────────────────────────────────────────── URLs de PÁGINAS — usados no menu e links internos ───────────────────────────────────────────────────────── */ --url-home: "/"; --url-MG: "/minas-gerais"; --url-sobre: "/sobre"; --url-contato: "/contato"; --url-servicos: "/servicos"; --url-projeto-incendio: "/incendio/ppcip-projeto-combate-incendio"; --url-renovacao-avcb: "/incendio/renovacao-avcb"; --url-dispensa: "/incendio/dispensa-licenciamento"; --url-laudos-vistorias: "/incendio/laudos-tecnicos"; --url-instalacao-equipamentos: "/incendio/instalacao-sistemas-incendio"; --url-extintores: "/incendio/extintores"; --url-seguranca: "/seguranca-trabalho"; --url-ltcat-medicoes: "/seguranca-trabalho/ltcat-medicoes"; --url-medicao-ambiental: "/seguranca-trabalho/medicao-ambiental"; --url-consultoria-sst: "/seguranca-trabalho/consultoria-sst"; --url-treinamentos: "/seguranca-trabalho/treinamentos"; /* ───────────────────────────────────────────────────────── TEXTOS DO MENU — usados pelo Hoot para preencher labels ───────────────────────────────────────────────────────── */ --hoot-home-text: "Início"; --hoot-sobre-text: "Sobre Nós"; --hoot-contato-text: "Contato"; --hoot-servicos-text: "Serviços"; --hoot-prevencao-incendio-text: "Prevenção de Incêndio"; --hoot-projeto-incendio-text: "Projeto de Incêndio (PPCIP)"; --hoot-renovacao-avcb-text: "Renovação de AVCB/CLCB"; --hoot-instalacao-equipamentos-text: "Instalação de Equipamentos"; --hoot-laudos-vistorias-text: "Laudos e Vistorias"; --hoot-extintores-text: "Extintores"; --hoot-seguranca-trabalho-text: "Segurança do Trabalho"; --hoot-ltcat-medicoes-text: "LTCAT e Medições"; --hoot-medicao-ambiental-text: "Medição Ambiental"; --hoot-consultoria-sst-text: "Consultoria SST"; --hoot-treinamentos-text: "Treinamentos"; /* ───────────────────────────────────────────────────────── CORES POR PÁGINA (sobrescritas por body.page-xxx) ───────────────────────────────────────────────────────── */ --page-primary: var(--navy-500); --page-secondary: var(--navy-400); --page-accent: var(--fire-500); --page-heading: var(--navy-700); --page-text: var(--gray-500); --page-bg: var(--gray-100); } /* ───────────────────────────────────────────────────────── TEMAS POR PÁGINA Sobreescrevem apenas as variáveis --page-* ───────────────────────────────────────────────────────── */ body.page-home { --page-primary: var(--navy-500); --page-secondary: var(--navy-400); --page-accent: var(--green-500); --page-heading: var(--navy-900); --page-bg: var(--navy-50); } body.page-sobre-nos { --page-primary: var(--navy-700); --page-secondary: var(--gray-400); --page-accent: var(--navy-400); --page-heading: var(--gray-700); --page-bg: var(--gray-100); } body.page-contato { --page-primary: var(--fire-500); --page-secondary: var(--navy-500); --page-accent: var(--green-500); --page-heading: var(--fire-500); --page-bg: var(--gray-50); } /* Páginas de incêndio */ body.page-ppcip, body.page-renovacao, body.page-laudo, body.page-instalacao, body.page-venda, body.page-servicos { --page-primary: var(--red-500); --page-secondary: var(--fire-500); --page-accent: var(--fire-500); --page-heading: var(--red-600); --page-bg: var(--gray-100); } /* Páginas de SST / Treinamento */ body.page-ltcat, body.page-NR15, body.page-cons-sst, body.page-treinamento { --page-primary: var(--success-500); --page-secondary: var(--navy-500); --page-accent: var(--success-500); --page-heading: var(--success-500); --page-bg: var(--gray-100); } /* Extintores */ body.page-extintores { --page-primary: var(--red-600); --page-secondary: var(--fire-500); --page-accent: var(--red-500); --page-heading: var(--red-700); --page-bg: var(--gray-100); } /* ───────────────────────────────────────────────────────── HERO BACKGROUNDS POR PÁGINA ───────────────────────────────────────────────────────── */ body.page-home .pag-hero-background { background-image: url('../img/hero/1-principal.webp'); } body.page-sobre-nos .pag-hero-background { background-image: url('../img/hero/2-sobrenos.webp'); } body.page-contato .pag-hero-background { background-image: url('../img/hero/3-contato.webp'); } body.page-ppcip .pag-hero-background { background-image: url('../img/hero/4-ppcip-combate-incendio.webp'); } body.page-renovacao .pag-hero-background { background-image: url('../img/hero/5-renovacao.webp'); } body.page-laudo .pag-hero-background { background-image: url('../img/hero/6-laudo-inc.webp'); } body.page-instalacao .pag-hero-background { background-image: url('../img/hero/7-instalacao.webp'); } body.page-venda .pag-hero-background { background-image: url('../img/hero/9-extintor.webp'); } body.page-servicos .pag-hero-background { background-image: url('../img/hero/10-consultoria.webp'); } body.page-ltcat .pag-hero-background { background-image: url('../img/hero/8-ltcat.webp'); } body.page-NR15 .pag-hero-background { background-image: url('../img/hero/9-medicao-NR15.webp'); } body.page-cons-sst .pag-hero-background { background-image: url('../img/hero/7-consultoria.webp'); } body.page-treinamento .pag-hero-background { background-image: url('../img/hero/10-treinamento.webp'); } body.page-extintores .pag-hero-background { background-image: url('../img/hero/9-extintor.webp'); } body.page-blog .pag-hero-background { background-image: url('../img/hero/5-blog.webp'); } /* ───────────────────────────────────────────────────────── CORES DE SNIPPET POR PÁGINA (usando --snip-* do :root) ───────────────────────────────────────────────────────── */ body.page-ppcip { --snip-accent: var(--snip-ppcip); --snip-grad: var(--grad-ppcip); } body.page-renovacao { --snip-accent: var(--snip-renovacao); --snip-grad: var(--grad-renovacao); } body.page-dispensa { --snip-accent: var(--snip-dispensa); --snip-grad: var(--grad-dispensa); } body.page-inspecao { --snip-accent: var(--snip-inspecao); --snip-grad: var(--grad-inspecao); } body.page-instalacao { --snip-accent: var(--snip-instalacao); --snip-grad: var(--grad-instalacao); } body.page-extintores { --snip-accent: var(--snip-extintores); --snip-grad: var(--grad-extintores); } body.page-home { --snip-accent: #1e293b; --snip-grad: linear-gradient(135deg,#1e293b,#0f172a); --url-RJ: "https://www.avcb.com "; --url-MG: "https://www.avcb-servicos.com.br/"; /* URLs DO SITE */ --url-home: "https://www.avcb-servicos.com.br/"; --url-sobre: "https://www.avcb-servicos.com.br/sobre-nos"; --url-contato: "https://www.avcb-servicos.com.br/contato"; /* URLs INCENDIO */ --url-incendio: "https://www.avcb-servicos.com.br/incendio"; --url-dispensa: "https://www.avcb-servicos.com.br/incendio/dispensa-licenciamento"; --url-projeto-incendio: "https://www.avcb-servicos.com.br/incendio/ppcip-projeto-combate-incendio"; --url-renovacao-avcb: "https://www.avcb-servicos.com.br/incendio/renovacao-avcb-clcb"; --url-laudos-vistorias: "https://www.avcb-servicos.com.br/incendio/laudo-vistoria-consultoria"; /* URLs outras */ --url-instalacao-equipamentos: "https://www.avcb-servicos.com.br/servico/instalacao-equipamentos"; --url-extintores: "https://www.avcb-servicos.com.br/servico/extintores"; --url-consultoria: "https://www.avcb-servicos.com.br/servico/consultoria"; /* URLs segurança do trabalho */ --url-seguranca: "https://www.avcb-servicos.com.br/seguranca-trabalho"; --url-consultoria-sst: "https://www.avcb-servicos.com.br/seguranca-trabalho/consultoria-seguranca-trabalho"; --url-ltcat-medicoes: "https://www.avcb-servicos.com.br/seguranca-trabalho/laudo-tecnico-condicoes-ambientais-trabalho-ltcat"; --url-treinamentos: "https://www.avcb-servicos.com.br/seguranca-trabalho/treinamentos-seguranca-trabalho"; --url-medicao-ambiental: "https://www.avcb-servicos.com.br/seguranca-trabalho/medicao-ambiental-insalubridade"; --url-documentos-sst: "https://www.avcb-servicos.com.br/seguranca-trabalho/documento-seguranca-do-trabalho"; /* URLs TREINAMENTOS */ --url-TRE-NR: "https://www.avcb-servicos.com.br/treinamenotos"; --url-TRE-CIPA: "https://www.avcb-servicos.com.br/cipa"; /* Textos site */ --hoot-home-text: "INÍCIO"; --hoot-sobre-text: "SOBRE NÓS"; --hoot-contato-text: "CONTATO"; --hoot-servicos-text: "SERVIÇOS"; --hoot-home-text-cta: "Conheça nossos serviços"; --hoot-servicos-text-cta: "Veja todos os nossos serviços"; /* Textos incendio */ --hoot-prevencao-incendio-text: "PREVENÇÃO DE INCÊNDIO"; --hoot-projeto-incendio-text: "Projeto de Incêndio (PPCIP)"; --hoot-renovacao-avcb-text: "Renovação de AVCB/CLCB"; --hoot-laudos-vistorias-text: "consultoria e Laudos Técnicos"; --hoot-seguranca-trabalho-text: "SEGURANÇA DO TRABALHO"; --hoot-ltcat-medicoes-text: "LTcat - Laudo Técnico de Condições Ambientais do Trabalho"; --hoot-treinamentos-text: "Treinamentos em Segurança do Trabalho"; --hoot-medicao-ambiental-text: "medição ambiental para insalubridade"; --hoot-consultoria-sst-text: "consultoria em Segurança do Trabalho"; /* Textos seguranca do trabalho */ --hoot-extintores-text: "Extintores"; --hoot-instalacao-equipamentos-text: "Instalação de Equipamentos"; /* Endereço */ --hoot-END-Rua: ""; --hoot-END-Bairro: ""; --hoot-END-Cidade: "Belo Horizonte"; --hoot-END-CEP: "30130-003"; --hoot-END-estado: "Minas Gerais"; --hoot-END-do-estado: "de Minas Gerais"; --hoot-END-no-estado: "em Minas Gerais"; --hoot-UF: "MG"; --hoot-END-País: "Brasil"; /* Local */ --hoot-CBM: "CBMMG"; --hoot-normas: "Instruções Técnicas (IT)"; --hoot-AVCB: "AVCB - Auto de Vistoria do Corpo de Bombeiros de MG"; --hoot-clcb: "CLCB - Certificado de Licença do Corpo de Bombeiros de MG"; --hoot-AVCB-siglas: "AVCB e CLCB"; /* Cidades principais por região */ --hoot-cidade-capital-do: "de Belo Horizonte"; /* Região Metropolitana , por população */ --hoot-cidade-capital: "Belo Horizonte"; --hoot-cidade-pop-1: "Contagem"; --hoot-cidade-pop-2: "Betim"; --hoot-cidade-pop-3: "Ribeirão das Neves"; --hoot-cidade-pop-4: "Ibirité"; --hoot-cidade-pop-5: "Santa Luzia"; --hoot-cidade-pop-6: "Vespasiano"; --hoot-cidade-pop-7: "Nova Lima"; /* Cidades restantes da RMBH */ --hoot-cidade-seg-1: "Sabará"; --hoot-cidade-seg-2: "Pedro Leopoldo"; --hoot-cidade-seg-3: "Lagoa Santa"; --hoot-cidade-seg-4: "São José da Lapa"; --hoot-cidade-seg-5: "Mário Campos"; --hoot-cidade-seg-6: "Sarzedo"; --hoot-cidade-seg-7: "Confins"; --hoot-cidade-seg-8: "Jaboticatubas"; --hoot-cidade-seg-8: "Sete Lagoas"; --hoot-cidade-seg-10: "Ibirité"; --hoot-cidade-seg-11: "Esmeraldas"; --hoot-cidade-seg-12: "Nova União"; /* Demais cidades de Minas Gerais (grandes cidades excluindo do estado): */ --hoot-demais-cidades: "Uberlândia, Juiz de Fora, Montes Claros, Ipatinga, Divinópolis, Sete Lagoas, Governador Valadares, Teófilo Otoni, Poços de Caldas"; /*4. Cidades em até 150 km de BH por população e relevância econômica:*/ --hoot-outras-cidades: "Itabira, Conselheiro Lafaiete, Ouro Preto, João Monlevade, Curvelo, Pará de Minas, Itaúna, Mariana, Ponte Nova, Bom Despacho"; /* Variáveis CSS para o sistema Hoots */ /* Contato */ --contact-whatsapp-link: "https://wa.me/553193691563"; --contact-whatsapp-text: "WhatsApp"; --contact-whatsapp-number: "WhatsApp: (31) 93691-563"; --contact-whatsapp-text-cta: "Fale conosco pelo WhatsApp"; --contact-phone-link: "tel:+553193691563"; --contact-phone-text: "telefone"; --contact-phone-number: "Telefone: (31) 93691-563"; --facebook-link: "https://facebook.com/avcbservicos"; --instagram-link: "https://instagram.com/avcbservicos"; --linkedin-link: "https://linkedin.com/company/avcbservicos"; --hoot-email: "mailto:avcbservicostreinamento@gmail.com"; --hoot-email-text: "avcbservicostreinamento@gmail.com"; }