:root { /* ---- BASE ---- Referencia do cliente: BRANCO dominante, cor da marca em BLOCOS, nunca como fundo de pagina. Foi o excesso de creme que gerou o "muito amarelo", e o excesso de efeito que gerou o "nao parece premium". Aqui o premium vem de contencao: respiro, tipografia e um unico gesto de cor por secao. */ --branco: #FFFFFF; /* fundo dominante */ /* O creme da marca (#F8EDCF) tem 75% de saturacao e, em area grande, le como MOSTARDA — foi ele que gerou o "muito amarelo" e parte do "nao parece caro". Aqui ele entra dessaturado para 40%, virando bege: mesmo lugar na hierarquia, sem o amarelo. Contraste preservado (marrom 8.11, corpo 6.74). */ --creme: #F2ECE1; /* bloco bege */ --creme-suave: #FAF7F2; /* bloco secundario, quase branco */ --marrom: #69391D; /* COR PRINCIPAL da marca (guia, pag. 23) — titulo */ --texto: #6B4A32; /* corpo: marrom mais leve, tom de revista */ --tinta: #69391D; /* faixa escura e rodape: a propria cor principal. Antes era #2B1709, um quase-preto que nao e da marca. */ --dourado: #C78C00; /* SECUNDARIA: so fio, folha e detalhe. Nunca protagonista. */ --dourado-texto: #8A6000; /* dourado quando precisa ser texto NO CLARO */ /* Dourado quando precisa ser texto NO ESCURO. E o dourado da marca no MESMO matiz (42.1 contra 42.2) apenas clareado. Existe porque a faixa escura deixou de ser o quase-preto #2B1709 e passou a ser o marrom da marca #69391D: sobre ele o dourado puro cai para 3.26 e some. Este da 5.73. */ --dourado-claro: #EBC468; /* COR DE ACAO = o proprio marrom da marca. ⚠️ Ate 21/08 isto era a terracota #9B5831 (o marrom clareado para L=40%). O cliente reprovou: "esta fora da identidade da marca". A troca foi no TOKEN, nao no botao que ele apontou — a mesma terracota vivia em 20 pontos do CSS (sobrelinhas, o do H1, faixa de numeros, setas, hovers), entao mexer so no botao deixaria a cor reprovada na pagina. Efeito colateral aceito: o do titulo perde o contraste de COR e passa a se distinguir so pelo italico. Escolha do cliente entre 3 amostras renderizadas. Branco sobre ele da 9.53 (a terracota dava 5.48). */ --acento: #69391D; --acento-claro: rgba(105,57,29,.10); /* ⚠️ O hover NAO pode ser --marrom: virou a mesma cor do estado normal e o botao ficava sem resposta ao mouse. Mesmo matiz (22.1), L de 26% para 18%. */ --acento-escuro: #482714; /* OURO DO DO H1 (pedido do cliente, 21/08: "dourado da marca com um leve gradiente"). Sao DOIS dourados, nao o dourado puro: o #C78C00 da marca da apenas 2.74 sobre o creme-suave do hero — abaixo ate do piso de TEXTO GRANDE (3:1) — e ja esta travado como par proibido no audit_contrast. Estes dois passam o piso de texto grande, que e o caso aqui (o H1 tem 48px+): 3.27 no ponto mais claro e 5.24 no mais escuro. */ --ouro-claro: #B57F00; --ouro-fundo: #8A6000; --verde-nao: 0; /* a referencia usa verde; aqui o par e dourado + marrom */ --linha: rgba(105,57,29,.16); --linha-forte: rgba(105,57,29,.26); /* ---- TIPOGRAFIA ---- ⚠️ O display e ROMANO (reto). O italico entra UMA vez por pagina, numa unica palavra do H1 — e assim que a referencia assina ("grow.", "intention."). Antes desta rodada havia 12 regras de CSS jogando italico nos 29 titulos da pagina: foi a causa nº1 do "nao parece caro". Italico em tudo le como convite de casamento; italico em uma palavra le como assinatura. NAO reintroduzir. */ --fonte-titulo: "Miller Banner", Georgia, "Times New Roman", serif; --fonte-corpo: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --t-hero: clamp(2.4rem, 1.5rem + 3.1vw, 4.2rem); --t-secao: clamp(1.95rem, 1.4rem + 2.1vw, 3.2rem); --t-card: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); --t-corpo: 0.9375rem; /* corpo pequeno e delicado, como na referencia */ --t-apoio: 0.8125rem; --t-numero: clamp(2rem, 1.5rem + 1.8vw, 3rem); --t-olho: 0.6875rem; /* sobrelinha em caixa alta espacada */ /* ---- RITMO ---- ⚠️ Este valor entra DUAS vezes em cada fronteira (fundo de uma secao + topo da seguinte). Subi para 8rem na rodada "gourmet" olhando uma secao isolada e o cliente viu o efeito somado: 277px de branco entre Sobre e Bronzes. Medir com tools/medir_vaos.py, que le a soma, e nao o valor de um lado so. */ --esp-secao: clamp(3rem, 1.8rem + 3.4vw, 5.5rem); --esp-bloco: clamp(1.5rem, 1rem + 2vw, 2.75rem); --largura-max: 1220px; --largura-texto: 58ch; /* ---- FORMA ---- Canto generoso na foto e pilula no botao: os dois marcadores mais fortes do estilo da referencia. */ --raio-foto: 14px; --raio-card: 18px; /* Moldura em arco: o topo arredondado das fotos da referencia. */ --arco: 220px 220px 18px 18px; --raio-bloco: 0px; --pilula: 100px; /* Altura da nav sticky. Vive aqui porque o hero PRECISA subtrai-la para caber na primeira tela; se os dois valores derivarem, a dobra estoura em silencio. 78px de min-height + 1px de borda. Auditado por tools/audit_dobras.py. */ --nav-h: 79px; --sombra-suave: 0 1px 2px rgba(43,23,9,.04), 0 12px 28px -20px rgba(43,23,9,.22); --transicao: 300ms cubic-bezier(.22,.61,.36,1); /* Folhas do guia da marca (pag. 29), como MASCARA: a cor vem do background-color, entao a mesma folha serve clara no escuro e vice-versa. */ --folha-monstera: url("../img/grafismo-grafismo-2.webp"); --folha-ramo: url("../img/grafismo-grafismo-3.webp"); --folha-pluma: url("../img/grafismo-grafismo-4.webp"); --folha-leque: url("../img/grafismo-grafismo-5.webp"); /* Onda: assinatura de titulo da marca (guia, pag. 30), como MASCARA — a cor vem do background-color, entao a mesma onda serve em qualquer fundo. */ --onda-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 22'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M1 4c4.6 0 4.6-3 9.2-3s4.6 3 9.2 3 4.6-3 9.2-3 4.6 3 9.2 3 4.6-3 9.2-3 4.6 3 8.4 3'/%3E%3Cpath d='M1 11c4.6 0 4.6-3 9.2-3s4.6 3 9.2 3 4.6-3 9.2-3 4.6 3 9.2 3 4.6-3 9.2-3 4.6 3 8.4 3'/%3E%3Cpath d='M1 18c4.6 0 4.6-3 9.2-3s4.6 3 9.2 3 4.6-3 9.2-3 4.6 3 9.2 3 4.6-3 9.2-3 4.6 3 8.4 3'/%3E%3C/g%3E%3C/svg%3E"); }