/* ========================================================================== PORTO CHOPP — TOKENS -------------------------------------------------------------------------- Formato: CSS custom properties, para colar no codigo global do Wix Studio. Gerado em 29/09/2026. Espelho em tokens.json (mesmos valores, mesmos nomes). COMO LER OS COMENTARIOS origem: valor medido num arquivo real. Diz em qual. PROPOSTA: valor que eu escolhi porque nao existia. Diz por que. Toda linha PROPOSTA tem uma entrada na tabela final do DESIGN.md. REGRA DE OURO DE CONTRASTE, PARA NAO PRECISAR LER O DESIGN.MD INTEIRO: texto branco pequeno sobre vermelho -> use --pc-vermelho-acessivel texto branco GRANDE sobre vermelho -> pode usar --pc-vermelho texto vermelho pequeno sobre branco -> nao use. Use preto. ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. COR — MARCA --------------------------------------------------------------------- */ /* origem: declarado pelo cliente via Nathan em 29/09/2026. E a cor de marca. Toda superficie vermelha grande usa esta. */ --pc-vermelho: #ff3131; /* PROPOSTA: derivado do --pc-vermelho, mesmo matiz (0 graus), saturacao quase igual, 15% mais escuro. Existe por um motivo so: #ff3131 com texto branco da 3,66:1 e REPROVA no AA para texto normal. Este da 4,85:1 e passa. Use em botao, badge e qualquer superficie vermelha com texto abaixo de 24px. */ --pc-vermelho-acessivel: #d92b2b; /* origem: L Branco.png e L Preto.png, e declarado pelo cliente. */ --pc-branco: #ffffff; --pc-preto: #000000; /* ------------------------------------------------------------------------ 2. COR — NEUTROS DE INTERFACE Nenhum destes aparece nos posts: post nao tem formulario nem tabela. Todos derivados do preto, todos PROPOSTA. --------------------------------------------------------------------- */ /* PROPOSTA: texto corrido. Preto puro em paragrafo longo cansa a vista em tela; #1a1a1a da 17,40:1 no branco e continua bem acima do AAA. */ --pc-texto: #1a1a1a; /* PROPOSTA: texto secundario, legenda, rodape. 7,00:1 no branco — passa AAA, entao nao vira problema nem em corpo pequeno. */ --pc-texto-suave: #595959; /* PROPOSTA: borda e divisoria. Elemento decorativo, nao carrega texto, entao os 1,32:1 no branco nao sao violacao de AA. */ --pc-borda: #e0e0e0; /* PROPOSTA: fundo de secao alternada e de card. */ --pc-fundo-suave: #f5f5f5; /* ------------------------------------------------------------------------ 3. COR — PAPEIS SEMANTICOS Apelidos. Mude aqui e muda no site inteiro. --------------------------------------------------------------------- */ --pc-fundo-pagina: var(--pc-branco); --pc-fundo-destaque: var(--pc-vermelho); --pc-acao: var(--pc-vermelho-acessivel); /* botao, link de acao */ --pc-acao-texto: var(--pc-branco); --pc-texto-sobre-foto: var(--pc-branco); /* origem: medido nos posts feed-4x5-04 e feed-4x5-06, onde uma cortina escura desce sobre a foto para o titulo branco ficar legivel. Sem isso, titulo branco sobre foto clara some. */ --pc-veu-foto: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.65) 100%); /* ------------------------------------------------------------------------ 4. TIPOGRAFIA — FAMILIAS --------------------------------------------------------------------- */ /* TT Trailers e a fonte de titulo e NAO esta instalada: e comercial. Enquanto nao for licenciada, o navegador cai em Roboto Condensed, que e condensada como ela mas nao e ela. Ver fontes/tt-trailers/LEIA-ME.md. */ --pc-fonte-titulo: 'TT Trailers', 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif; /* origem: declarado pelo cliente. Instalada e funcionando. */ --pc-fonte-texto: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* ------------------------------------------------------------------------ 5. TIPOGRAFIA — PESOS ATENCAO: o maneirismo de titulo dos posts NAO e troca de peso. E o recurso OpenType de versalete da TT Trailers, tag `smcp`, confirmado no arquivo da fonte em 30/09. Digite em caixa mista e ligue: font-feature-settings: "smcp" 1; As letras em minuscula saem como versal menor. Ver feed-4x5-07 ("VOCe FAZ ANIVERSARIO NEsse MEs?") e feed-4x5-05 ("... TEM Na PORTO?"). A Roboto Condensed provisoria NAO tem esse recurso: nela minuscula sai como minuscula de verdade. Ate a fonte real chegar, escreva titulo todo em versal. Nao tente imitar com --pc-peso-leve: o resultado e outra coisa. --------------------------------------------------------------------- */ --pc-peso-leve: 300; --pc-peso-normal: 400; --pc-peso-medio: 500; --pc-peso-forte: 700; --pc-peso-pesado: 900; /* ------------------------------------------------------------------------ 6. TIPOGRAFIA — ESCALA PROPOSTA inteira. Os posts sao imagem de tamanho fixo, nao tem escala de tela. Razao 1,25 (quarta maior), que segura bem de 320px a 1440px sem precisar de tamanho intermediario. O corpo fica em 16px porque abaixo disso o Safari do iPhone da zoom sozinho quando o dedo toca um campo de formulario. --------------------------------------------------------------------- */ --pc-tam-display: 3.5rem; /* 56px — chamada de heroi e de peca */ --pc-tam-h1: 2.5rem; /* 40px */ --pc-tam-h2: 2rem; /* 32px */ --pc-tam-h3: 1.5rem; /* 24px — limite do "texto grande" do WCAG */ --pc-tam-grande: 1.125rem; /* 18px */ --pc-tam-corpo: 1rem; /* 16px */ --pc-tam-peq: 0.875rem; /* 14px */ --pc-tam-micro: 0.75rem; /* 12px — piso. Abaixo disso nao desce. */ /* PROPOSTA: entrelinha. Titulo condensado em caixa alta quase encosta linha na linha; 0,95 e o que os posts mostram. Corpo em 1,55 para paragrafo. */ --pc-altura-titulo: 0.95; --pc-altura-corpo: 1.55; /* PROPOSTA: caixa alta precisa de espaco entre letra, caixa baixa nao. */ --pc-espaco-letra-titulo: 0.01em; --pc-espaco-letra-rotulo: 0.06em; /* ------------------------------------------------------------------------ 7. ESPACAMENTO PROPOSTA: escala de base 4px. 4 e o menor passo que ainda encaixa na grade de 8px que o Wix Studio usa por padrao. --------------------------------------------------------------------- */ --pc-esp-1: 0.25rem; /* 4px */ --pc-esp-2: 0.5rem; /* 8px */ --pc-esp-3: 0.75rem; /* 12px */ --pc-esp-4: 1rem; /* 16px */ --pc-esp-5: 1.5rem; /* 24px */ --pc-esp-6: 2rem; /* 32px */ --pc-esp-7: 3rem; /* 48px */ --pc-esp-8: 4rem; /* 64px */ --pc-esp-9: 6rem; /* 96px */ /* PROPOSTA: respiro lateral no celular. 16px e o minimo para o texto nao encostar na moldura do aparelho. */ --pc-margem-lateral: 1rem; /* PROPOSTA: largura maxima de leitura. Acima de ~70 caracteres por linha o olho perde o inicio da linha seguinte. */ --pc-largura-texto: 42rem; /* 672px */ --pc-largura-pagina: 75rem; /* 1200px */ /* ------------------------------------------------------------------------ 8. CANTOS --------------------------------------------------------------------- */ /* origem: a caixa de texto vermelha dos posts tem canto RETO. Medido em feed-4x5-08, 09, 10, 14 e 15. Nao arredonde essa caixa. */ --pc-raio-0: 0; /* PROPOSTA */ --pc-raio-s: 4px; --pc-raio-m: 8px; --pc-raio-g: 16px; /* origem: as pilulas com seta do post feed-4x5-01 sao totalmente arredondadas. E a forma do botao da marca. */ --pc-raio-pilula: 999px; /* ------------------------------------------------------------------------ 9. SOMBRAS PROPOSTA inteira: post nao tem sombra de interface, so sombra de texto. --------------------------------------------------------------------- */ --pc-sombra-0: none; --pc-sombra-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06); --pc-sombra-2: 0 4px 12px rgba(0,0,0,.10); --pc-sombra-3: 0 12px 32px rgba(0,0,0,.16); /* origem: os titulos brancos sobre foto dos posts tem sombra para nao sumirem quando a foto clareia atras da letra. */ --pc-sombra-texto: 0 2px 8px rgba(0,0,0,.45); /* PROPOSTA: elevacao do botao fixo de WhatsApp, que flutua sobre o conteudo. */ --pc-sombra-flutuante: 0 -2px 16px rgba(0,0,0,.18); /* ------------------------------------------------------------------------ 10. MOVIMENTO PROPOSTA inteira. --------------------------------------------------------------------- */ --pc-transicao: 160ms ease-out; /* ------------------------------------------------------------------------ 11. PECA — AREA SEGURA Quanto de cada borda do post fica reservado, sem texto e sem logo. origem: as faixas do Instagram que cobrem o topo e a base do 9:16, e a assinatura @portochopp que os posts ja colocam recuada da borda. --------------------------------------------------------------------- */ --pc-peca-margem-1x1: 8%; /* PROPOSTA */ --pc-peca-margem-4x5: 8%; /* PROPOSTA */ /* 9:16 e assimetrico de proposito: a interface do Stories come o topo com o avatar e a base com a caixa de resposta. */ --pc-peca-topo-9x16: 14%; --pc-peca-base-9x16: 20%; --pc-peca-lado-9x16: 8%; /* ------------------------------------------------------------------------ 12. QUEBRA DE TELA PROPOSTA. 768px separa celular de tablet; e onde o botao fixo de WhatsApp some. --------------------------------------------------------------------- */ --pc-quebra-celular: 768px; --pc-quebra-tela: 1024px; /* ------------------------------------------------------------------------ 13. DADOS DA MARCA AINDA EM DISPUTA Estao aqui como token, vazios, para que nenhuma peca saia com numero inventado. Preencher so depois de o cliente confirmar. --------------------------------------------------------------------- */ /* PROPOSTA (vazio): o briefing diz 2011, o PPTX de setembro publica 2009. Item aberto no onboarding, dono MAR. Nao publique nenhum dos dois ate alguem confirmar com o Claudio. */ --pc-ano-fundacao: ""; /* PROPOSTA (vazio): nao existe tabela de preco oficial. As cotacoes do atendimento divergem entre R$ 702, R$ 752, R$ 772 e R$ 790 so para Brahma 30L. Preencher com o valor por litro vigente. */ --pc-preco-litro: ""; }