/* ========================================================================== A IDENTIDADE DA LEMBRARÊ (css/marca-base.css) -------------------------------------------------------------------------- O que é da MARCA, e não de uma tela: as fontes, as cores, a tipografia base, o foco do teclado e os botões. Carregado pelas páginas da vitrine (antes do css/marca.css) e pelo painel da dona (antes do css/marca-admin.css). Mudou aqui, muda nos dois lugares. Separado do marca.css em 28/09/2026, quando a marca foi levada para o painel. Prova de que a vitrine não mudou: o estilo calculado de cada elemento das 5 páginas, nas duas larguras, igual antes e depois. ========================================================================== */ /* -------------------------------------------------------------------------- 0) FONTES — servidas pelo próprio site (antes vinham do Google) -------------------------------------------------------------------------- Quatro arquivos: a Gambetta num peso só (500) e a Satoshi em 400, 500 e 700 (a 700 só no ). O navegador só baixa o peso que alguma letra da página pede — então peso "de passagem" custa um download inteiro: um título em 400 e um rodapé em 600 faziam a vitrine baixar duas fontes a mais (45 KB). Com font-synthesis: none, peso que não existe cai no mais perto que existe, sem negrito falso. */ @font-face { font-family: 'Gambetta'; src: url('../fonts/gambetta-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 1) TOKENS — um lugar só com a verdade -------------------------------------------------------------------------- As variáveis antigas (--cor-*) são REAPONTADAS para a paleta nova. Assim tudo que o estilo.css já desenha (a barra do WhatsApp, os extras, a foto que abre) veste a marca sem reescrever uma linha dele. -------------------------------------------------------------------------- */ :root { /* a caixa */ /* o grão do papelão da tampa (usado nela e no cabeçalho sobre ela) */ --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --tampa: #1C1714; /* o preto da caixa (tirado da foto) */ --tampa-2: #2A231F; /* o mesmo preto um tom acima (passar o mouse) */ --cobre: #B27B45; /* a tinta do logo, exata */ --cobre-claro: #C9A276; /* cobre para TEXTO sobre a tampa (7,54:1) */ --cobre-escuro: #8A5A2E; /* cobre para texto pequeno no papel (5,23:1) */ --cobre-botao: #9B6B3C; /* cobre do botão com letra branca (4,60:1) */ --papel: #EFE6DC; /* texto sobre a tampa */ --papel-suave: #B8AA9B; /* texto secundário sobre a tampa (7,84:1) */ /* o que tem dentro */ --seda: #F7F1EB; /* papel de seda: o fundo da página */ --nude: #EADCD0; /* a etiqueta: fundo de foto e de chip */ --tinta: #3F3128; /* o texto */ --tinta-suave: #6E5B4C; /* texto de apoio (5,74:1) */ --fio: #DDD0C4; /* filete de 1 px */ --borda-campo: #8A7869; /* borda de campo de formulário (3,77:1) */ /* o que o CSS antigo já usa, agora com a cor nova */ --cor-fundo: var(--seda); --cor-superficie: var(--seda); --cor-primaria: var(--cobre); --cor-primaria-escura: var(--cobre-escuro); --cor-primaria-suave: var(--nude); --cor-texto: var(--tinta); --cor-texto-suave: var(--tinta-suave); --cor-borda: var(--fio); --fonte-titulo: 'Gambetta', Georgia, 'Times New Roman', serif; --fonte-corpo: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* Superfície plana: cantos médios, sem sombra como identidade. */ --raio: 12px; --raio-p: 8px; --sombra: none; --sombra-forte: 0 10px 30px rgba(28, 23, 20, .14); } body { background: var(--seda); color: var(--tinta); font-family: var(--fonte-corpo); font-size: 16px; line-height: 1.6; font-feature-settings: 'kern' 1; } h1, h2, h3 { font-family: var(--fonte-titulo); } /* NEGRITO FALSO, PROIBIDO. O CSS antigo pede peso 700 nos títulos (era a Fraunces, que tinha 700). A Gambetta foi baixada em 400 e 500; pedido 700 sem arquivo 700, o navegador ENGROSSA a letra sozinho, e ela fica borrada — apareceu em "Monte sua cestinha" e "Como funciona". Com font-synthesis: none ele usa o peso de verdade mais próximo (o 500) em vez de inventar um. */ body { font-synthesis: none; } h1, h2, h3 { font-weight: 500; color: var(--tinta); } ::selection { background: var(--nude); color: var(--tinta); } :focus-visible { outline: 2px solid var(--cobre-escuro); outline-offset: 3px; } /* "Pular para o conteúdo": fora da tela até receber o foco pelo Tab. Vale para a vitrine (o js/util.js escreve o link) e para o painel (está no admin.html). */ .pular { position: fixed; top: 10px; left: 10px; z-index: 60; padding: 12px 18px; background: var(--tampa); color: var(--papel); font-weight: 500; text-decoration: none; border-radius: 2px; transform: translateY(calc(-100% - 20px)); } .pular:focus { transform: none; } /* Anel POR DENTRO: o fundo em volta muda (preto na vitrine, papel nas outras); o de dentro do link é sempre o preto, e cobre-claro sobre ele passa dos 3:1 exigidos para o foco. */ .pular:focus-visible { outline: 2px solid var(--cobre-claro); outline-offset: -5px; } /* O
recebe o foco do pulo (tabindex="-1"), mas não é um controle: um contorno em volta da página inteira só atrapalharia. */ #principal:focus { outline: none; } /* -------------------------------------------------------------------------- 6) BOTÕES -------------------------------------------------------------------------- O botão principal é da cor do logo (pedido do Pedro, 26/09). Letra PRETA: com letra clara o cobre dá 2,93:1 e reprova; com a tampa, 4,92:1. Um só por tela (na página da cestinha, o "Quero essa cestinha"). É assim no PAINEL. Na VITRINE a letra é branca desde 06/10 (pedido do Pedro): lá o fundo vira o --cobre-botao — ver o marca.css, antes da seção 2. -------------------------------------------------------------------------- */ .botao--principal { background: var(--cobre); color: var(--tampa); border: 0; border-radius: 2px; box-shadow: none; font-family: var(--fonte-corpo); font-weight: 500; letter-spacing: .03em; transition: background-color .45s ease; } .botao--principal:hover { background: var(--cobre-claro); color: var(--tampa); } /* 7,54:1 */ .botao--secundario { background: transparent; color: var(--tinta); border: 1px solid var(--borda-campo); border-radius: 2px; box-shadow: none; letter-spacing: .03em; } .link-texto { color: var(--cobre-escuro); font-weight: 500; } /* 600 não existe: caía na 700 */ @media (prefers-reduced-motion: reduce) { .botao--principal { transition: none; } } /* -------------------------------------------------------------------------- 7) ENQUADRAMENTO DA FOTO DA CESTINHA (08/10/2026) -------------------------------------------------------------------------- A dona arrasta e aproxima cada foto no painel; o js/util.js (estiloDaFoto) escreve o resultado em duas variáveis na própria : --foco: o ponto da foto preso no mesmo ponto da moldura (object-position); --zoom: quanto ela aproxima, a partir daquele mesmo ponto. Vale em todo lugar onde a foto aparece com corte: cartão da vitrine, página da cestinha, miniaturas e lista do painel. A foto grande (tocar para ver) NÃO usa: lá o ponto é ver a cestinha inteira. O "passar o mouse" do cartão multiplica o zoom dela (marca.css, seção 6). */ img.foto-enq { object-position: var(--foco, 50% 50%); transform-origin: var(--foco, 50% 50%); transform: scale(var(--zoom, 1)); }