/* ===================================================================== CSCORRETOR — TOKENS DE MARCA E INTERFACE · v1.0 · 31/07/2026 Carlito de Souza — Corretor de Imóveis — CRECI-SC 6894F (11ª Região) FONTE ÚNICA DA VERDADE VISUAL. Nenhum arquivo do projeto (site, /admin, e-mail, peça de social) pode escrever um hexadecimal direto. Tudo consome daqui. As cores da marca foram amostradas pixel a pixel do logotipo original do CorelDRAW (docs/MARCA.md). Os valores aproximados que circulavam em briefings antigos (#1A5FA4, #F15A24, #FBB03B) estão registrados no fim deste arquivo apenas como equivalência histórica — NÃO use. Todo par de cor aqui foi medido contra a WCAG 2.1 AA. As razões de contraste estão anotadas em comentário. Se você criar um par novo, MEÇA antes de usar. ===================================================================== */ /* -------------------------------------------------------------- fontes Cormorant e Inter já existem em site/assets/fontes/ desde a v1. Plus Jakarta Sans é a novidade: dois arquivos, 24 KB no total (12.252 + 11.960 bytes, subconjunto latino — medido, não estimado). -------------------------------------------------------------------- */ @font-face { font-family: 'JakartaCS'; font-style: normal; font-weight: 700; font-display: swap; src: url('fontes/jakarta-700.woff2') format('woff2'); } @font-face { font-family: 'JakartaCS'; font-style: normal; font-weight: 800; font-display: swap; src: url('fontes/jakarta-800.woff2') format('woff2'); } :root { /* ============================================================ 1. MARCA — imutável. Sai do logotipo, não de gosto pessoal. ============================================================ */ --marca-azul: #155A9D; /* institucional. 7,04:1 sobre branco */ --marca-laranja-1: #FAA831; /* início do degradê (esquerda) */ --marca-laranja-2: #F58033; /* meio */ --marca-laranja-3: #F16136; /* fim do degradê (direita) */ /* O degradê da marca corre a 0°, esquerda → direita. Sempre. */ --marca-degrade: linear-gradient(90deg, var(--marca-laranja-1) 0%, var(--marca-laranja-2) 52%, var(--marca-laranja-3) 100%); /* ============================================================ 2. AZUL — autoridade, navegação, links, dado técnico ============================================================ */ --azul: #155A9D; /* = marca. 7,04:1 sobre branco */ --azul-forte: #0F4275; /* hover/pressionado. 10,21:1 sobre branco */ --azul-vidro: #E9F1F9; /* fundo de bloco informativo. azul lê 6,18:1 em cima */ --azul-luz: #79B6EC; /* ÚNICO azul permitido sobre fundo escuro. 8,86:1 */ /* ⚠ #155A9D sobre #0B0F19 dá 2,72:1. Texto azul em fundo escuro é PROIBIDO no projeto — no site e na marca. Use --azul-luz. */ /* ============================================================ 3. LARANJA — ação. Uma cor, uma função: fazer clicar. ============================================================ */ --acao: var(--marca-degrade); --acao-forte: linear-gradient(90deg, #F0912A 0%, #E4522B 100%); /* hover */ --acao-tinta: #15171B; /* TEXTO DO BOTÃO LARANJA. 5,56 a 9,15:1 */ --laranja-texto: #C7451D; /* laranja em TEXTO sobre branco. 4,89:1 */ /* ⚠ REGRA MEDIDA, NÃO OPINIÃO: texto BRANCO sobre o degradê laranja reprova na WCAG AA — 1,96:1 no #FAA831 e 3,23:1 no #F16136. O botão de conversão leva texto TINTA (#15171B) sobre o laranja. Quando for indispensável branco sobre laranja, use o sólido --laranja-texto (#C7451D), que dá 4,89:1. */ /* ============================================================ 4. NEUTROS — modo claro (Blumenau, CRM, documentos) ============================================================ */ --branco: #FFFFFF; --nuvem: #F8F9FA; /* fundo de seção alternada */ --linha: #E6E9EE; /* divisórias, bordas de card */ --pedra: #6B7280; /* texto secundário. 4,83:1 sobre branco */ --grafite: #383D45; /* texto de apoio. 10,93:1 */ --tinta: #15171B; /* texto principal. 17,94:1 */ /* ============================================================ 5. NEUTROS — modo escuro (Itapema, alto padrão) ============================================================ */ --noite: #0B0F19; /* fundo dominante */ --noite-2: #111726; /* cartão / camada elevada */ --noite-azul: #0E1B2E; /* toque de azul escuro, blocos de destaque */ --noite-linha: rgba(255,255,255,.12); --claro: #F4F6FA; /* texto principal no escuro. 17,7:1 */ --claro-2: #A8B2C1; /* texto secundário no escuro. 8,94:1 */ /* ============================================================ 6. SEMÂNTICAS — estado, compliance, alerta regulatório ============================================================ */ --sucesso: #12805C; /* 4,92:1 — autorização vigente, pago */ --sucesso-suave: #E6F5F0; --alerta: #9A5B00; /* 5,43:1 — vence em breve, pendência */ --alerta-suave: #FDF3E2; --erro: #C02626; /* 5,92:1 — vencido, bloqueio COFECI */ --erro-suave: #FDEAEA; /* ============================================================ 7. TIPOGRAFIA Todas AUTO-HOSPEDADAS em site/assets/fontes/. Google Fonts é proibido: entregaria o IP de cada visitante ao Google (LGPD) e custa uma conexão a mais no 4G. ============================================================ */ --sans: 'JakartaCS', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* títulos e interface */ --dados: 'InterCS', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* corpo, número, tabela */ --editorial: 'Cormorant', 'Times New Roman', Georgia, serif; /* SÓ Itapema */ --peso-display: 800; --peso-titulo: 700; --peso-forte: 600; --peso-medio: 500; --peso-corpo: 400; --t-display: clamp(2.4rem, 6.4vw, 4.6rem); --t-h1: clamp(2.1rem, 5vw, 3.6rem); --t-h2: clamp(1.7rem, 3.4vw, 2.6rem); --t-h3: clamp(1.25rem, 2.2vw, 1.6rem); --t-corpo: clamp(1rem, 1.05vw, 1.0625rem); --t-pequeno: 0.8125rem; --t-micro: 0.6875rem; /* CRECI, rodapé legal, fonte do dado */ --tracking-display: -0.02em; /* geométrica pesada pede aperto */ --tracking-rotulo: 0.08em; /* CAIXA ALTA de rótulo pede folga */ --altura-titulo: 1.08; --altura-corpo: 1.62; /* ============================================================ 8. RITMO, RAIO, ELEVAÇÃO ============================================================ */ --gutter: clamp(1.25rem, 5vw, 4rem); --secao: clamp(4rem, 9vw, 8.5rem); --largura: 1360px; --largura-texto: 68ch; --raio-p: 8px; --raio: 12px; --raio-g: 20px; --raio-pilula: 999px; --sombra-1: 0 1px 3px rgba(16,30,54,.08), 0 4px 16px rgba(16,30,54,.06); --sombra-2: 0 8px 32px rgba(16,30,54,.10); --sombra-acao: 0 6px 20px rgba(241,97,54,.28); /* ============================================================ 9. MOVIMENTO — discreto. Nada saltitante. ============================================================ */ --suave: cubic-bezier(.22,.61,.36,1); --rapido: 200ms var(--suave); --medio: 380ms var(--suave); --lento: 620ms var(--suave); /* ============================================================ 10. ERGONOMIA — regra, não sugestão ============================================================ */ --toque: 48px; /* altura/largura mínima de QUALQUER controle clicável */ --nav-altura: 68px; } /* ===================================================================== TEMA ESCURO — aplique no container, não no . O site tem as duas portas na MESMA página: a porta Itapema é um escopo escuro dentro de um documento claro. ===================================================================== */ [data-tema="escuro"] { --fundo: var(--noite); --fundo-2: var(--noite-2); --texto: var(--claro); --texto-2: var(--claro-2); --borda: var(--noite-linha); --azul-ui: var(--azul-luz); /* nunca --azul aqui */ --titulo: var(--editorial); /* serifada: a porta do alto padrão */ } [data-tema="claro"], :root { --fundo: var(--branco); --fundo-2: var(--nuvem); --texto: var(--tinta); --texto-2: var(--pedra); --borda: var(--linha); --azul-ui: var(--azul); --titulo: var(--sans); /* geométrica pesada */ } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ===================================================================== EQUIVALÊNCIA HISTÓRICA — não usar, só para reconhecer material antigo --------------------------------------------------------------------- #1A5FA4 ≈ --marca-azul (#155A9D) · 3,4% mais claro #F15A24 ≈ --marca-laranja-3 (#F16136) · mais saturado #FBB03B ≈ --marca-laranja-1 (#FAA831) · mais amarelo Quem manda é o pixel do logotipo, para o site bater com o cartão, a placa de obra e a pasta institucional já impressos. ===================================================================== */