/* ============================================================ Itapê Serviços — DESIGN TOKENS (identidade visual) ------------------------------------------------------------ Toda a identidade (cores, tipografia, espaçamentos, sombras) vive aqui. Para mudar a "cara" da plataforma, altere apenas este arquivo. Conceito: o caderno de classificados do jornal do interior, modernizado. Papel claro, verde-mata de confiança e o amarelo-sol dos avisos de mural. ============================================================ */ /* Tipografia oficial: Poppins, servida LOCALMENTE (styles/fonts/). O @import aqui garante a fonte em TODAS as páginas (todas carregam tokens.css primeiro) e funciona 100% offline — sem depender de fonts.googleapis.com. Ver styles/typography.css. */ @import url("typography.css"); :root { /* ---------- Cores da marca ---------- */ --cor-papel: #f7f6f1; /* fundo geral, tom de papel */ --cor-branco: #ffffff; /* cartões e superfícies */ --cor-tinta: #16302b; /* texto principal */ --cor-tinta-suave: #52655f; /* texto secundário */ --cor-verde: #0c5e52; /* primária: links, marca */ --cor-verde-escuro: #084a40; /* hover da primária, rodapé */ --cor-verde-claro: #e3efeb; /* fundos suaves, chips */ --cor-amarelo: #f2b33d; /* CTA "Anunciar", selo destaque */ --cor-amarelo-escuro: #d99a1f; /* hover do CTA */ --cor-amarelo-claro: #fdf3dd; /* fundos de aviso */ --cor-borda: #e3e1d8; /* bordas e divisores (decorativos) */ --cor-borda-campo: #8a9891; /* borda de inputs — 3:1 no branco (WCAG 1.4.11) */ /* ---------- Cores de estado ---------- */ --cor-erro: #b3261e; --cor-erro-claro: #fbeae9; --cor-sucesso: #1b6e3c; --cor-sucesso-claro: #e7f3ec; --cor-info-claro: #e8f0fe; /* ---------- Tipografia ---------- */ /* Poppins é a fonte oficial da plataforma (títulos e corpo). A pilha de reserva usa fontes de sistema para o texto nunca "sumir" sem internet. */ --font-family-primary: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; /* Pesos oficiais (não use outros sem justificativa) */ --font-weight-regular: 400; /* textos corridos */ --font-weight-medium: 500; /* elementos de apoio */ --font-weight-semibold: 600; /* botões e subtítulos */ --font-weight-bold: 700; /* títulos */ --font-weight-extrabold: 800; /* apenas destaques especiais */ /* Aliases históricos — todo o CSS existente usa estes nomes */ --fonte-titulo: var(--font-family-primary); --fonte-texto: var(--font-family-primary); --texto-xs: 0.75rem; /* 12px — selos, legendas */ --texto-sm: 0.875rem; /* 14px — apoio */ --texto-base: 1rem; /* 16px — corpo */ --texto-md: 1.125rem; /* 18px — destaque de corpo */ --texto-lg: 1.375rem; /* 22px — títulos de card/seção menor */ --texto-xl: 1.75rem; /* 28px — títulos de seção */ --texto-2xl: 2.25rem; /* 36px — título de página */ --texto-3xl: 2.875rem; /* 46px — números grandes */ --texto-4xl: 3.4rem; /* ~54px — teto do título do hero */ /* ---------- Espaçamento (escala de 4px) ---------- */ --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.5rem; --esp-6: 2rem; --esp-7: 3rem; --esp-8: 4.5rem; /* ---------- Forma ---------- */ --raio-s: 6px; /* botões, campos */ --raio-m: 10px; /* cartões */ --raio-g: 16px; /* painéis, hero */ --raio-pilula: 999px; /* chips e selos */ /* ---------- Sombras (suaves, "ficha sobre o mural") ---------- */ --sombra-card: 0 1px 2px rgba(22, 48, 43, 0.06), 0 2px 8px rgba(22, 48, 43, 0.08); --sombra-alta: 0 4px 12px rgba(22, 48, 43, 0.12), 0 12px 32px rgba(22, 48, 43, 0.14); /* ---------- Layout ---------- */ --largura-max: 1140px; --largura-max-larga: 1320px; /* monitores ≥1920px */ --largura-leitura: 70ch; /* blocos longos de texto */ --altura-header: 64px; --altura-barra-mobile: 60px; /* CTA fixo do anúncio (só no celular). Fica encostado na barra inferior, e outros elementos flutuantes precisam somar as duas alturas para não cobrir nem ser coberto. 70px = botão de 44px (alvo de toque em pointer:coarse) + 12px de recuo em cima e embaixo, com 2px de sobra. Medir no navegador de mesa dá 65px porque lá o botão fica com 40px — o número que vale é o do aparelho. */ --altura-cta-anuncio: 70px; /* ---------- Alturas mínimas de controles (área de toque) ---------- */ --controle-min: 44px; /* ---------- Camadas (z-index) ---------- */ --z-header: 40; /* Abaixo da barra inferior de propósito: o botão central "Anunciar" é elevado e precisa ser desenhado POR CIMA do CTA do anúncio, senão o CTA corta o círculo ao meio. */ --z-cta-anuncio: 45; --z-barra-mobile: 50; --z-dropdown: 60; --z-barra-flutuante: 70; --z-overlay: 85; --z-modal: 90; --z-lightbox: 95; --z-toast: 100; /* ---------- Movimento ---------- */ --transicao: 160ms ease; /* Movimentos maiores (entradas, revelações): lentos e elegantes */ --transicao-suave: 420ms cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================================ BREAKPOINTS OFICIAIS (mobile first, sempre com min-width) ------------------------------------------------------------ CSS não aceita var() em media queries — os valores abaixo são a referência canônica; use-os literalmente nas @media. 360px — mobile pequeno → mobile comum 480px — mobile comum → mobile grande/horizontal 640px — mobile horizontal / phablet 768px — tablet vertical 1024px — tablet horizontal / notebook pequeno 1280px — laptop 1440px — desktop 1920px — monitores grandes Faixas: 320–359 mobile pequeno · 360–479 mobile vertical · 480–767 mobile horizontal · 768–1023 tablet vertical · 1024–1279 tablet horizontal · 1280–1439 laptop · 1440–1919 desktop · 1920+ desktop grande. Só crie uma @media quando o conteúdo realmente exigir mudança. As variáveis abaixo existem para leitura via JS (getComputedStyle) e documentação viva: ============================================================ */ :root { --bp-mobile-sm: 360px; --bp-mobile: 480px; --bp-mobile-landscape: 640px; --bp-tablet: 768px; --bp-tablet-landscape: 1024px; --bp-laptop: 1280px; --bp-desktop: 1440px; --bp-wide: 1920px; }