.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap'); /* =========================================================================== CRAVELIN CONTABILIDADE - DESIGN SYSTEM (versao SOMENTE CSS) --------------------------------------------------------------------------- ONDE COLAR Elementor > Configuracoes do site > Custom CSS Cole o arquivo INTEIRO, comecando pela linha do @import. Nao escreva nada acima do @import - nem comentario, nem linha em branco. POR QUE ESTE ARQUIVO EXISTE O campo Custom CSS aceita SOMENTE CSS. O 00-codigo-global.html e HTML (tem tags dentro), e colar HTML ali faz o parser rejeitar a primeira tag e descartar todo o CSS seguinte - o site fica sem cor e sem fonte. ALTERNATIVA RECOMENDADA Usar o 00-codigo-global.html em Elementor > Custom Code > local . La as fontes entram por tag de link, que carrega mais rapido que @import, e nao ha risco de o @import perder a posicao de topo. USE UM OU OUTRO, NUNCA OS DOIS - senao o design system carrega duplicado. =========================================================================== */ /* --------------------------------------------------------------------------- 1. TOKENS Cores amostradas da fachada e do logo real. Preto + dourado. --------------------------------------------------------------------------- */ :root{ /* marca */ --mt-primaria-escura:#0A0A0A; /* preto da faixa da fachada — heros, navbar, seções de impacto */ --mt-primaria:#141414; /* preto 2 — cards sobre fundo preto */ --mt-secundaria:#8A6019; /* dourado escuro — texto PEQUENO em fundo claro. Escolhido para passar AA (4,5:1) tanto no papel (5,3:1) quanto no fundo areia dos cards (4,8:1). Não clarear. */ --mt-secundaria-media:#B8862B; /* dourado médio — bordas, ícones, fundo de tag */ --mt-secundaria-clara:#F0B94D; /* dourado da marca — botões e texto em fundo escuro */ --mt-secundaria-hover:#F4C665; /* fundos e texto */ --mt-fundo:#FBFAF6; /* papel — fundo padrão das seções claras */ --mt-fundo-suave:#F1EFE7; /* areia — cards e seções alternadas */ --mt-texto:#17171A; --mt-texto-suave:#6B6B66; --mt-branco:#F7F4EC; /* creme, nunca branco puro */ --mt-texto-claro:#C9C6BA; /* corpo de texto sobre fundo escuro */ --mt-texto-claro-2:#B9B6AC; --mt-linha:#E4E1D6; --mt-linha-escura:#2A2A28; /* tipografia */ --mt-fonte-display:'Fraunces',Georgia,'Times New Roman',serif; --mt-fonte-corpo:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mt-fonte-mono:'IBM Plex Mono','Courier New',monospace; /* estrutura */ --mt-maxw:1180px; --mt-secao-pad:88px; --mt-radius:6px; --mt-radius-btn:3px; --mt-sombra:0 14px 30px rgba(20,18,10,.10); } @media(max-width:768px){:root{--mt-secao-pad:56px}} /* --------------------------------------------------------------------------- 2. BASE DE SEÇÃO Tudo fica dentro de .mt-sec — nada aqui vaza para o tema do WordPress. --------------------------------------------------------------------------- */ .mt-sec{ padding:var(--mt-secao-pad) 24px; background:var(--mt-fundo); color:var(--mt-texto); font-family:var(--mt-fonte-corpo); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; position:relative; overflow:hidden; } .mt-sec *,.mt-sec *::before,.mt-sec *::after{box-sizing:border-box} .mt-sec :where(img){max-width:100%;display:block} /* :where() aqui é essencial: sem ele, ".mt-sec a" venceria ".mt-btn--ouro" e o texto dos botões dourados herdaria a cor do fundo escuro, ficando ilegível. */ .mt-sec :where(a){color:inherit;text-decoration:none} .mt-sec--suave{background:var(--mt-fundo-suave)} .mt-sec--tight{--mt-secao-pad:64px} .mt-sec--escura{background:var(--mt-primaria-escura);color:var(--mt-texto-claro)} .mt-inner{max-width:var(--mt-maxw);margin:0 auto;position:relative;z-index:2} /* cabeçalho das páginas internas (sobre, serviços, contato, blog, páginas de serviço). Use junto de .mt-sec--escura. O h1 é menor que o do hero da home, de propósito. */ .mt-sec--pagina{padding:66px 24px 58px} .mt-sec--pagina h1{font-size:clamp(30px,4.2vw,44px);max-width:24ch} .mt-sec--pagina :where(p){max-width:620px} /* motivo-assinatura: as faixas diagonais da fachada, em baixa opacidade */ .mt-sec--diagonais::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:repeating-linear-gradient(115deg, rgba(240,185,77,.05) 0 26px, transparent 26px 96px); } /* --------------------------------------------------------------------------- 3. TIPOGRAFIA IMPORTANTE — por que os seletores de

e usam :where() Dentro de :where() o seletor "não conta" para a especificidade. Isso faz com que qualquer classe explícita (.mt-eyebrow, .mt-lead, .mt-post__tag...) sempre vença as regras genéricas, sem precisar de !important. Sem isso, ".mt-head p" venceria ".mt-eyebrow" e o rótulo dourado de abertura de seção sairia cinza. A ORDEM das regras abaixo também importa: as mais específicas em intenção vêm depois. --------------------------------------------------------------------------- */ .mt-sec :where(h1,h2,h3,h4){ font-family:var(--mt-fonte-display); font-weight:600;line-height:1.12;margin:0 0 .4em;color:var(--mt-texto); } .mt-h1{font-size:clamp(34px,5vw,58px)} .mt-h2{font-size:clamp(26px,3.4vw,38px)} .mt-h3{font-size:18.5px;margin-bottom:8px} .mt-sec--escura :where(h1,h2,h3,h4){color:var(--mt-branco)} .mt-sec :where(p){margin:0 0 1em} .mt-sec :where(p:last-child){margin-bottom:0} .mt-head :where(p){font-size:17px;color:var(--mt-texto-suave);margin:0} .mt-lead{font-size:18.5px;color:var(--mt-texto-suave)} /* fundo escuro: vem depois das duas de cima, então vence em empate */ .mt-sec--escura :where(p),.mt-sec--escura .mt-lead{color:var(--mt-texto-claro)} /* eyebrow — o quadradinho dourado é o marcador de abertura de seção. Declarado por último de propósito: vence as regras genéricas de

. */ .mt-eyebrow{ display:inline-flex;align-items:center;gap:.55em; font-family:var(--mt-fonte-mono);font-weight:600;font-size:12.5px; letter-spacing:.14em;text-transform:uppercase;line-height:1.4; color:var(--mt-secundaria);margin:0 0 14px; } .mt-eyebrow::before{content:"";width:7px;height:7px;background:var(--mt-secundaria-media);flex:none} .mt-eyebrow--claro{color:var(--mt-secundaria-clara)} .mt-eyebrow--claro::before{background:var(--mt-secundaria-clara)} .mt-head{max-width:640px;margin:0 0 48px} .mt-head--centro{margin-left:auto;margin-right:auto;text-align:center} .mt-head--centro .mt-eyebrow{justify-content:center} .mt-centro{text-align:center} .mt-mono{font-family:var(--mt-fonte-mono)} /* --------------------------------------------------------------------------- 3b. CORPO DE ARTIGO (.mt-art) Usado nas 11 páginas de serviço e nos 3 artigos do blog. Coluna de leitura estreita (740px) — linha longa cansa a vista. --------------------------------------------------------------------------- */ .mt-art{max-width:740px;margin:0 auto} .mt-art :where(p){font-size:17px;line-height:1.7;color:#2B2B28;margin:0 0 1.1em} .mt-art :where(h2){font-size:26px;margin:1.7em 0 .5em} .mt-art :where(h3){font-size:20px;margin:1.5em 0 .4em} .mt-art :where(ul,ol){padding-left:1.3em;margin:0 0 1.2em} .mt-art :where(li){font-size:16.5px;line-height:1.65;margin-bottom:.55em} .mt-art :where(strong){font-weight:600;color:var(--mt-texto)} .mt-art :where(a:not(.mt-btn)){ color:var(--mt-secundaria);text-decoration:underline;text-underline-offset:2px; } .mt-art :where(a:not(.mt-btn)):hover{color:var(--mt-texto)} /* tabelas: no celular ganham rolagem própria, para não estourar a página */ .mt-art__tabela{overflow-x:auto;margin:22px 0;-webkit-overflow-scrolling:touch} .mt-art :where(table){width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px} .mt-art :where(th,td){border:1px solid var(--mt-linha);padding:11px 13px;text-align:left;vertical-align:top} .mt-art :where(th){background:var(--mt-fundo-suave);font-family:var(--mt-fonte-corpo);font-weight:600;color:var(--mt-texto)} /* citação / callout */ .mt-callout{ border-left:3px solid var(--mt-secundaria-media); padding:4px 0 4px 22px;margin:28px 0; font-family:var(--mt-fonte-display);font-size:20px;font-style:italic; color:var(--mt-texto); } .mt-sec--escura .mt-callout{color:var(--mt-branco)} /* --------------------------------------------------------------------------- 4. BOTÕES --------------------------------------------------------------------------- */ .mt-btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--mt-fonte-corpo);font-weight:600;font-size:14.5px; padding:12px 24px;border-radius:var(--mt-radius-btn); border:1px solid transparent;cursor:pointer; transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease; } .mt-btn:hover{transform:translateY(-1px)} /* ícone dentro de botão (ex: glifo do WhatsApp) — preenchido, acompanha a cor do texto */ .mt-btn svg{width:17px;height:17px;flex:none;fill:currentColor;stroke:none} .mt-btn--ouro{background:var(--mt-secundaria-clara);color:var(--mt-primaria-escura)} .mt-btn--ouro:hover{background:var(--mt-secundaria-hover);color:var(--mt-primaria-escura)} .mt-btn--linha-clara{border-color:#3A3A36;color:var(--mt-branco)} .mt-btn--linha-clara:hover{border-color:var(--mt-secundaria-clara);color:var(--mt-secundaria-clara)} .mt-btn--linha-escura{border-color:var(--mt-linha);color:var(--mt-texto)} .mt-btn--linha-escura:hover{border-color:var(--mt-secundaria);color:var(--mt-secundaria)} .mt-btns{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px} /* --------------------------------------------------------------------------- 5. GRIDS --------------------------------------------------------------------------- */ .mt-grid{display:grid;gap:26px} .mt-grid--2{grid-template-columns:repeat(2,1fr)} .mt-grid--3{grid-template-columns:repeat(3,1fr)} .mt-grid--4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.mt-grid--3,.mt-grid--4{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.mt-grid--2,.mt-grid--3,.mt-grid--4{grid-template-columns:1fr}} /* --------------------------------------------------------------------------- 6. CARDS, ÍCONES, NÚMEROS, TAGS --------------------------------------------------------------------------- */ .mt-card{ display:block;background:var(--mt-fundo-suave); border-radius:var(--mt-radius);padding:30px 28px; transition:transform .18s ease,box-shadow .18s ease; } .mt-card:hover{transform:translateY(-3px);box-shadow:var(--mt-sombra)} .mt-card :where(h3){font-family:var(--mt-fonte-display);font-size:18.5px;margin:0 0 8px;color:var(--mt-texto)} .mt-card :where(p){font-size:14.5px;color:var(--mt-texto-suave);margin:0} .mt-card--escuro{background:var(--mt-primaria)} /* depois das duas de cima, para vencer em empate de especificidade */ .mt-card--escuro :where(h3){color:var(--mt-branco)} .mt-card--escuro :where(p){color:var(--mt-texto-claro-2)} .mt-ic{ width:44px;height:44px;border-radius:50%; background:var(--mt-primaria-escura);flex:none; display:flex;align-items:center;justify-content:center;margin-bottom:18px; } .mt-ic svg{width:20px;height:20px;stroke:var(--mt-secundaria-clara);fill:none} .mt-card--escuro .mt-ic{background:var(--mt-secundaria-clara)} .mt-card--escuro .mt-ic svg{stroke:var(--mt-primaria-escura)} .mt-stat__num{ font-family:var(--mt-fonte-display);font-weight:600;line-height:1; font-size:clamp(40px,5.2vw,64px);color:var(--mt-secundaria-media); } .mt-sec--escura .mt-stat__num{color:var(--mt-secundaria-clara)} .mt-stat__lbl{ font-family:var(--mt-fonte-mono);font-size:13px;letter-spacing:.02em; color:var(--mt-texto-suave);margin-top:10px; } .mt-sec--escura .mt-stat__lbl{color:var(--mt-texto-claro-2)} .mt-tag{ display:inline-block;font-family:var(--mt-fonte-mono); font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--mt-secundaria);background:rgba(184,134,43,.12); padding:6px 13px;border-radius:100px;margin:0 8px 8px 0; } .mt-sec--escura .mt-tag{color:var(--mt-secundaria-clara);background:rgba(240,185,77,.10)} /* --------------------------------------------------------------------------- 7. ACESSIBILIDADE --------------------------------------------------------------------------- */ .mt-sec a:focus-visible,.mt-sec button:focus-visible, .mt-sec input:focus-visible,.mt-sec select:focus-visible,.mt-sec textarea:focus-visible{ outline:2px solid var(--mt-secundaria-clara);outline-offset:3px; } @media(prefers-reduced-motion:reduce){ .mt-sec *,.mt-hdr *,.mt-ftr *{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important; } }/* End custom CSS */