/* ============================================================ GRUPO JAP, Tokens ------------------------------------------------------------ TODA cor, fonte, ritmo, raio e curva mora AQUI. O styles.css não contém nenhum hex nem família de fonte. Direção tirada das peças reais da marca (posts do @grupojap): fundo creme claro, FOTOGRAFIA de produto como herói, título em sans geométrica bold verde, acento laranja, fio amarelo e blocos de cor arredondados nos cantos. ============================================================ */ :root { /* ── CORES DA MARCA ──────────────────────────────────────── Amostradas no logo: verde vivo #00A020 é 13,5% dos pixels opacos, seguido dos verdes claros e do laranja #F0B000. Não existe roxo na marca. */ --verde: #0C6C32; /* o verde dos títulos das peças */ --verde-vivo: #00A020; /* o verde do logo */ --verde-claro: #98E148; --amarelo: #FFD71B; --laranja: #F9791D; --vermelho: #E92B3B; /* ── SUPERFÍCIES ─────────────────────────────────────────── Creme quente, como nas peças, não branco puro, que deixa a fotografia dura. */ --creme: #FBF7EF; --creme-2: #F5F0E4; /* faixa que separa assunto */ --branco: #FFFFFF; --escuro: #10231A; /* rodapé e blocos de âncora */ /* ── TINTA ───────────────────────────────────────────────── Medido sobre os DOIS cremes, que é onde o texto vive. Formato do par: (creme / creme-2). ATENÇÃO, erro já cometido aqui: numa versão anterior eu ESCREVI as razões no comentário sem calcular. O valor que estava como "4,58 / 4,50" media 4,27 de verdade e o Lighthouse reprovou. Nenhum número abaixo entra sem ter sido medido. Segunda armadilha, também medida: o reveal anima a opacidade, e o verificador lê a cor NO MEIO do fade, já misturada com o fundo. Por isso a folga não é de raspão, cada valor passa 4,5:1 mesmo a 88% de opacidade. Formato: (creme / creme-2). */ --tinta: #16241A; /* 15,10 / 14,19 */ --tinta-suave: #4A5A4E; /* 6,86 / 6,45 */ --tinta-fraca: #535F56; /* 6,26 / 5,88, e 4,75 / 4,53 a 88%. É o MÍNIMO do sistema. Não clarear. */ /* ── COR COMO TEXTO ──────────────────────────────────────── ATENÇÃO, erro já cometido duas vezes aqui: cor de marca vibrante quase nunca passa como texto. Medido sobre creme: laranja 2,53 · amarelo 1,31 · verde-vivo 3,25, todos reprovam os 4,5:1 do WCAG. O --verde (5,09) passa e é por isso que ele carrega os títulos. Para as demais, use a gêmea. Mexeu em superfície, RECALCULE as três. */ --verde-txt: #0C6C32; /* 6,13 / 5,76, e 4,77 / 4,54 a 88% */ /* Verde para texto PEQUENO em negrito (18px), que não conta como "texto grande" e por isso exige 4,5 cheios. Medido: o --verde chegou a 4,40 no h3 da linha do tempo porque o verificador pegou a cor no meio do fade. Este aguenta 4,5 mesmo a 75% de opacidade, que foi o pior caso observado. Não use em título grande, escureceria a página à toa. */ --verde-peq: #095025; /* 8,99 / 8,45, e 4,70 / 4,54 a 75% */ --laranja-txt: #AD5414; /* 4,85 / 4,55 */ --amarelo-txt: #7F6B0D; /* 4,90 / 4,60 */ /* Branco sobre cor sólida: verde 5,44 (livre) · vermelho 4,31 e verde-vivo 3,47 (só título grande) · laranja 2,70 e amarelo 1,31 (nunca, nesses fundos o texto é --tinta). */ /* ── TIPOGRAFIA ──────────────────────────────────────────── Montserrat: é o que o manual JAP-ID-V6 especifica E o que as peças de social usam. A serifa que testei antes foi desvio meu. */ --fonte: 'Montserrat', system-ui, -apple-system, sans-serif; --peso-extra: 800; --peso-bold: 700; --peso-semi: 600; --peso-medio: 500; --peso-normal: 400; /* Escala. ATENÇÃO: os sinais + DENTRO do clamp levam espaço dos dois lados. `1rem + 2vw` é válido; `1rem +2vw` é inválido e o navegador descarta a regra em silêncio. */ --t-hero: clamp(2.75rem, 1.1rem + 6.4vw, 6.5rem); --t-titulo: clamp(2rem, 1.2rem + 3.2vw, 3.75rem); --t-sub: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); --t-corpo: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); --t-peq: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); --t-etiq: 0.75rem; --altura-hero: 0.98; --altura-titulo:1.08; --altura-corpo: 1.68; --tracking-hero: -0.03em; --tracking-titulo: -0.02em; --tracking-etiq: 0.18em; /* ── GEOMETRIA ───────────────────────────────────────────── O logo é círculo e as peças usam blocos de canto muito arredondado. Nada de canto 14/22px com sombra, que é a linguagem do Nova Ceasa. */ --raio-circulo: 50%; --raio-pilula: 999px; --raio-bloco: 2.25rem; /* cartões e fotos */ /* ── RITMO ─────────────────────────────────────────────── */ --largura: 1200px; --largura-texto: 58ch; --e0: .5rem; --e1: 1rem; --e2: 1.75rem; --e3: 3rem; --e4: 5rem; --e5: 7.5rem; /* ── SOMBRA ──────────────────────────────────────────────── Só sob fotografia, para ela descolar do creme. Em nenhum outro lugar. */ --sombra-foto: 0 30px 60px -28px rgba(22,36,26,.35); /* ── MOVIMENTO ─────────────────────────────────────────── */ --curva: cubic-bezier(.16,.84,.24,1); --dur-rapida: 300ms; --dur-media: 760ms; --dur-lenta: 1150ms; --escada: 90ms; /* Única fonte de movimento espacial: o bloco de movimento reduzido zera as quatro e mantém o resto vivo. */ --desloca: 22px; --desloca-g: 44px; --sobe: 110%; --escala-in: 1.06; /* Opacidade de PARTIDA do reveal. Por que não é zero: o verificador de contraste lê a cor no meio do fade, já misturada com o fundo, e reprovava texto que em repouso passa com folga. Escurecer as cores até sobreviver a um fade de 0 exigiria transformar o laranja da marca em #5A2C0A, marrom. Preferi limitar a queda de opacidade a preservar a paleta: aqui quem carrega o reveal é o MOVIMENTO, e a opacidade é só um véu. */ --op-in: .85; } /* ============================================================ MOVIMENTO: FORÇADO PARA TODOS ------------------------------------------------------------ NÃO existe bloco `@media (prefers-reduced-motion: reduce)` neste arquivo, e a ausência é deliberada. Decisão do cliente, pedida mais de uma vez: as animações devem aparecer IGUAIS mesmo em máquinas com "reduzir movimento" ligado no sistema. Nada é atenuado, nada é desligado, mesmo deslocamento, mesma escala, mesma inércia de rolagem. O custo é real e fica registrado: quem ativou a preferência costuma ter distúrbio vestibular, e deslocamento amplo pode provocar náusea e enxaqueca nessas pessoas. Este site abre mão disso a pedido do cliente. PARA REVERTER, basta acrescentar de volta: @media (prefers-reduced-motion: reduce) { :root { --desloca:0px; --desloca-g:0px; --sobe:0%; --escala-in:1; } } Como todo movimento espacial sai dos tokens acima, esse único bloco desliga o site inteiro sem tocar em componente nenhum. ============================================================ */ /* ============================================================ CARVALHO AI: os mesmos nomes de variável do motor, valores da casa. O motor chama de "verde" a cor de acento; aqui ela é a brasa. Contraste medido sobre branco, como na proposta: --verde #b73c00 5,6 · --tinta-fraca #5c5e69 6,4 · --tinta 17,9. A brasa viva (#fb5102) nunca vira texto pequeno: 3,3 reprova. ============================================================ */ :root { --verde: #b73c00; --verde-vivo: #fb5102; --verde-claro: #ffd7bf; --verde-txt: #b73c00; --verde-peq: #9a3200; --laranja: #ff8a4c; --laranja-txt: #b73c00; --amarelo: #ffb48a; --amarelo-txt: #8a5300; --vermelho: #b42318; --creme: #ffffff; --creme-2: #f6f5f2; --branco: #ffffff; --escuro: #121420; --tinta: #121420; --tinta-suave: #2b2d3a; --tinta-fraca: #5c5e69; --fonte: 'Satoshi', system-ui, -apple-system, sans-serif; --fonte-display:'Nasalization', 'Satoshi', system-ui, sans-serif; --pessego: #fff1e8; --fio-pessego: #ffb48a; }