/* ========================================================================= CAFÉ COM PIZZA — layout do site Redesign em andamento (ver PLANO-LAYOUT.md). Contém: cabeçalho (4), rodapé (5), hero (6). Depende de css/tokens.css e css/componentes.css. ========================================================================= */ .wrap { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); } /* ========================================================================= CABEÇALHO · refeito A primeira versão era uma barra fina com logo, menu e ícones — competente e anônima, com cara de painel. O que faltava é o que todo site de comida que funciona tem: uma FAIXA DE SERVIÇO com o que decide o pedido, e um botão de pedir que não desaparece. São duas faixas: 1. utilitária (36px) — endereço, telefone e estado da loja 2. principal (72px) — marca, navegação e o botão de pedir Ao rolar, a faixa 1 recolhe e a 2 encolhe para 60px. O cabeçalho fica menor quando o assunto passa a ser o conteúdo, não a marca. ========================================================================= */ .cab { position: sticky; top: 0; z-index: var(--z-cabecalho); background: var(--cor-card); /* sólido — nada transparece por trás */ border-bottom: 1px solid var(--cor-borda); transition: box-shadow var(--t-medio) var(--ease); } /* ---- faixa 1: serviço ---- */ .cab__servico { border-bottom: 1px solid var(--cor-borda); background: hsl(var(--muted) / .5); overflow: hidden; height: 36px; } .cab__servico-linha { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); height: 36px; font-size: var(--txt-sm); color: var(--cor-suave-texto); } /* Cada dado é um item com o ícone em mostarda — some cinza-sobre-cinza que fazia a faixa parecer "seca". Um risco vertical separa os itens. */ .cab__servico-item { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; position: relative; } .cab__servico-item .icone { color: var(--cor-primaria-tipo); flex: none; } a.cab__servico-item:hover { color: var(--cor-texto); } a.cab__servico-item:hover .icone { color: var(--cor-primaria); } .cab__servico-item + .cab__servico-item::before { content: ''; position: absolute; left: calc(clamp(14px, 2vw, 26px) / -2); top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: var(--cor-borda); } /* endereço e telefone à esquerda; o horário vai para a direita da faixa, equilibrando a linha. Sem divisor antes dele (o vão já separa). */ .cab__servico-item--hora { margin-left: auto; } .cab__servico-item--hora::before { display: none; } @media (max-width: 900px) { .cab__servico-item + .cab__servico-item::before { display: none; } } @media (max-width: 780px) { .cab__servico { display: none; } } /* ---- faixa 2: principal ---- */ .cab__linha { display: flex; align-items: center; gap: var(--e-4); height: 72px; } .marca { display: flex; align-items: center; text-decoration: none; color: inherit; flex: none; } /* A marca agora é o lockup horizontal completo (logo.png). O lettering é espresso, então no tema escuro entra a variante recolorida (logo-clara.png), trocada por CSS sem flash porque o data-tema é carimbado no . */ .marca__logo { height: 46px; width: auto; display: block; } .marca__logo--escuro { display: none; } :root[data-tema="escuro"] .marca__logo--claro { display: none; } :root[data-tema="escuro"] .marca__logo--escuro { display: block; } .marca__nome { font-size: var(--txt-lg); font-weight: var(--peso-bold); letter-spacing: -.03em; line-height: 1.05; color: var(--cor-texto); white-space: nowrap; } .marca__nome span { display: block; font-size: var(--txt-2xs); font-weight: var(--peso-semi); letter-spacing: .18em; text-transform: uppercase; color: var(--cor-primaria-tipo); } /* ---- navegação ---- Cada item tem um ícone e, sob o texto, uma PINCELADA em mostarda: uma forma de pincel gerada por ruído (feTurbulence desloca um traço grosso de ponta redonda, o que frazela as bordas como cerda de verdade). A pincelada é "pintada" da esquerda para a direita com um clip-path — cheia no item ativo, meia no hover. Nada de sublinhado reto. */ :root { --pincel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22' preserveAspectRatio='none'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7 0.5' numOctaves='2' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='9'/%3E%3C/filter%3E%3Cg filter='url(%23p)' fill='%23000'%3E%3Cpath d='M3 11 C 12 7 22 6 34 7 L 92 7 C 104 7 112 8 117 11 C 112 15 104 16 92 15 L 34 16 C 22 17 12 15 3 11 Z'/%3E%3Crect x='16' y='9' width='90' height='1.4' opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); } .nav { display: flex; align-items: center; gap: clamp(2px, 1.2vw, 18px); margin-inline: auto; } .nav a { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 12px 8px 16px; font-size: var(--txt-base); font-weight: var(--peso-medio); color: var(--cor-suave-texto); text-decoration: none; white-space: nowrap; transition: color var(--t-rapido) var(--ease); } .nav a .icone { width: 17px; height: 17px; color: var(--cor-controle); transition: color var(--t-rapido) var(--ease); } .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 5px; height: 13px; background: var(--gradiente-primaria); -webkit-mask: var(--pincel) left center / 100% 100% no-repeat; mask: var(--pincel) left center / 100% 100% no-repeat; clip-path: inset(0 100% 0 0); opacity: 0; pointer-events: none; transition: clip-path 360ms var(--ease-saida), opacity 150ms var(--ease); } .nav a:hover { color: var(--cor-texto); } .nav a:hover .icone { color: var(--cor-primaria-tipo); } /* A pincelada pinta ATÉ O FIM no hover (antes parava no meio). O ativo se distingue por ficar 100% opaco e permanente; o hover chega a .8. */ .nav a:hover::after { opacity: .8; clip-path: inset(0 0 0 0); } .nav a[aria-current="page"] { color: var(--cor-texto); font-weight: var(--peso-semi); } .nav a[aria-current="page"] .icone { color: var(--cor-primaria-tipo); } .nav a[aria-current="page"]::after { opacity: 1; clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: reduce) { .nav a::after { transition: opacity 150ms var(--ease); } } /* ---- ações ---- */ .cab__acoes { display: flex; align-items: center; gap: var(--e-2); margin-left: auto; } .btn-icone { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--cor-suave-texto); cursor: pointer; transition: background-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease); } .btn-icone:hover { background: var(--cor-suave); color: var(--cor-texto); } .btn-icone:focus-visible { outline: none; box-shadow: var(--anel-foco); } .carrinho { position: relative; } .carrinho__n { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--radius-full); background: var(--cor-primaria); color: var(--cor-primaria-texto); font-size: var(--txt-2xs); font-weight: var(--peso-bold); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; border: 2px solid var(--cor-card); } .carrinho__n[hidden] { display: none; } /* ---- botão de pedir ---- Fica no cabeçalho o tempo todo, e o rótulo muda com o estado da casa: aberta mostra o tempo estimado, fechada mostra a hora de abrir. É o elemento que faz o cabeçalho trabalhar em vez de só existir. */ .btn-pedir { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding-inline: var(--e-5); border: 0; border-radius: var(--radius-full); background: var(--gradiente-primaria); color: var(--cor-primaria-texto); font-family: var(--fonte); font-size: var(--txt-md); font-weight: var(--peso-semi); text-decoration: none; white-space: nowrap; box-shadow: 0 2px 10px hsl(var(--primary) / .35); transition: transform var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease); } .btn-pedir:hover { transform: translateY(-1px); box-shadow: 0 6px 18px hsl(var(--primary) / .45); } .btn-pedir:focus-visible { outline: none; box-shadow: var(--anel-foco); } .btn-pedir small { font-weight: var(--peso-normal); opacity: .78; } @media (max-width: 620px) { .btn-pedir small { display: none; } } @media (max-width: 430px) { .btn-pedir { padding-inline: var(--e-4); } } /* ---- menu no celular ---- */ .cab__menu-btn { display: none; } .menu-movel { display: none; border-top: 1px solid var(--cor-borda); background: var(--cor-card); } .menu-movel.aberto { display: block; } .menu-movel .nav { flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding-block: var(--e-2) var(--e-4); } .menu-movel .nav a { gap: 12px; padding: 15px 2px; font-size: var(--txt-lg); border-bottom: 1px solid var(--cor-borda); } .menu-movel .nav a .icone { width: 19px; height: 19px; } /* pincelada curta à esquerda, na base do item */ .menu-movel .nav a::after { left: 2px; right: auto; width: 44px; bottom: 8px; height: 11px; } .menu-movel__pe { padding: var(--e-3) 0 var(--e-6); } .menu-movel__estado { display: flex; align-items: center; gap: var(--e-3); margin-top: var(--e-4); } .menu-movel__estado .estado { margin-right: auto; } .menu-movel__estado .btn-icone { border: 1px solid var(--cor-borda); } @media (max-width: 900px) { .cab__linha > .nav { display: none; } .cab__menu-btn { display: grid; } } @media (min-width: 901px) { .menu-movel { display: none !important; } } /* No celular a barra fica com o essencial — marca, carrinho, pedir e menu. O alternador de tema desce para dentro do painel: é uma decisão que se toma uma vez, não algo que deva disputar espaço com o botão de pedido numa barra de 358px. */ @media (max-width: 560px) { .cab__linha > .cab__acoes > [data-tema-botao] { display: none; } .cab__linha { height: 64px; gap: var(--e-2); } .marca__logo { height: 40px; } /* No celular o cabeçalho fica no essencial e limpo: marca + carrinho + menu. O botão de pedir (que virava um disco ambíguo) sai daqui — o CTA de pedir mora no hero e dentro do menu, com rótulo. */ .cab__acoes .btn-pedir { display: none; } } @media (max-width: 400px) { .marca__logo { height: 34px; } } @media (min-width: 561px) { .menu-movel [data-tema-botao] { display: none; } } /* ========================================================================= HERO · refeito O problema das versões anteriores: sem fotografia de produto, elas abriam com texto de um lado e um bloco vazio do outro. Um campo de cor no lugar da foto é um buraco pintado. Aqui o hero é uma PEÇA: um painel mostarda — a cor da fatia, agora a primária — com a tipografia grande em vinho profundo (10,24:1). Sobre a borda direita dele, a comanda em papel claro AVANÇA por cima, criando profundidade. Não são duas colunas lado a lado; é um objeto na frente do outro, que é o que faz uma composição parecer desenhada. A mostarda ocupar um campo desse tamanho só é possível porque o resto da paleta é areia: fosse ela sobre branco puro, gritaria. ========================================================================= */ .hero { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 80px); } .hero__palco { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(24px, 4vw, 56px); align-items: center; } /* ---- painel mostarda ---- */ .hero__painel { position: relative; grid-column: 1 / -1; grid-row: 1; padding: clamp(36px, 5vw, 68px) clamp(28px, 4vw, 60px); /* Vão reservado para a comanda. A conta é fixa, não percentual: a comanda tem largura fixa (400px) e é o grid que a posiciona, então uma porcentagem aqui desalinha nos monitores menores — o texto avançava por baixo do papel a 1000px. O min() só entra para não engolir o painel inteiro quando ele encurta. */ padding-right: min(420px, 46%); border-radius: clamp(20px, 2.4vw, 32px); background: radial-gradient(120% 140% at 100% 0%, hsl(var(--primary-soft)) 0%, transparent 55%), var(--gradiente-primaria); color: hsl(var(--primary-foreground)); overflow: hidden; } /* fatias de luz atravessando o painel — a única textura, e vem do disco */ .hero__painel::before { content: ''; position: absolute; inset: 0; background: conic-gradient(from 200deg at 88% 112%, hsl(0 0% 100% / .16) 0deg 14deg, transparent 14deg 30deg, hsl(0 0% 100% / .10) 30deg 44deg, transparent 44deg 62deg, hsl(0 0% 100% / .13) 62deg 74deg, transparent 74deg 360deg); pointer-events: none; } .hero__painel > * { position: relative; } .hero__olho { display: inline-flex; align-items: center; gap: 9px; margin-bottom: var(--e-4); font-size: var(--txt-xs); font-weight: var(--peso-bold); letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--primary-foreground) / .72); } .hero__olho::before { content: ''; width: 26px; height: 4px; border-radius: 2px; background: hsl(var(--primary-foreground) / .55); clip-path: polygon(0 100%, 100% 100%, 86% 0, 14% 0); } .hero h1 { margin: 0 0 var(--e-5); max-width: 15ch; font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.4rem); font-weight: var(--peso-black); line-height: .95; letter-spacing: -.04em; text-wrap: balance; } .hero h1 em { font-style: normal; opacity: .62; } .hero__texto { margin: 0 0 var(--e-6); max-width: 40ch; font-size: var(--txt-lg); line-height: var(--lh-normal); color: hsl(var(--primary-foreground) / .8); } .hero__acoes { display: flex; gap: var(--e-3); flex-wrap: wrap; } /* Sobre a mostarda, a hierarquia inverte: o botão principal é o vinho sólido, e o secundário é contorno escuro. Um botão mostarda aqui desapareceria dentro do painel. */ .hero .btn--principal { background: hsl(var(--primary-foreground)); color: hsl(var(--primary)); box-shadow: 0 4px 14px hsl(348 40% 10% / .28); } .hero .btn--principal:hover { opacity: .92; } .hero .btn--vazado { background: transparent; color: hsl(var(--primary-foreground)); border: 1.5px solid hsl(var(--primary-foreground) / .4); } .hero .btn--vazado:hover { background: hsl(var(--primary-foreground) / .09); } .hero__fatos { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); margin-top: var(--e-8); padding-top: var(--e-5); border-top: 1px solid hsl(var(--primary-foreground) / .22); } .hero__fato { display: flex; align-items: center; gap: 8px; font-size: var(--txt-md); color: hsl(var(--primary-foreground) / .78); } .hero__fato b { color: hsl(var(--primary-foreground)); font-weight: var(--peso-bold); } /* ---- comanda, por cima do painel ---- */ .comanda { position: relative; grid-column: 2; grid-row: 1; justify-self: end; width: min(400px, 100%); /* Rompe a borda direita do painel. São 24px contra os 40px de gutter, então nunca chega a encostar na janela — e é esse pedaço para fora que faz a composição parecer um objeto sobre outro em vez de duas colunas. */ margin-right: -24px; background: var(--cor-card); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-xl); padding: var(--e-5) var(--e-5) var(--e-6); } /* picote: o papel destacado do bloco */ .comanda::after { content: ''; position: absolute; inset-inline: 0; bottom: -9px; height: 10px; background: var(--cor-card); -webkit-mask-image: radial-gradient(circle at 6px 100%, transparent 6px, #000 6.5px); mask-image: radial-gradient(circle at 6px 100%, transparent 6px, #000 6.5px); -webkit-mask-size: 12px 100%; mask-size: 12px 100%; mask-repeat: repeat-x; } .comanda__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); padding-bottom: var(--e-3); border-bottom: 1px dashed var(--cor-borda); } .comanda__titulo { font-size: var(--txt-xs); font-weight: var(--peso-bold); letter-spacing: .2em; text-transform: uppercase; color: var(--cor-suave-texto); } .comanda__cod { font-family: var(--fonte-mono); font-size: var(--txt-xs); color: var(--cor-suave-texto); letter-spacing: .04em; } .comanda__itens { display: grid; } .comanda__item { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--e-3); align-items: baseline; padding: var(--e-3) 0; border-bottom: 1px dashed var(--cor-borda); text-decoration: none; color: inherit; transition: opacity var(--t-rapido) var(--ease); } .comanda__item:hover { opacity: .7; } .comanda__item:last-of-type { border-bottom: 0; } .comanda__nome { font-size: var(--txt-base); font-weight: var(--peso-semi); color: var(--cor-texto); } .comanda__preco { font-size: var(--txt-base); font-weight: var(--peso-bold); font-variant-numeric: tabular-nums; color: var(--cor-primaria-tipo); white-space: nowrap; } .comanda__desc { grid-column: 1 / -1; font-size: var(--txt-sm); line-height: 1.45; color: var(--cor-suave-texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .comanda__marca { display: inline-flex; margin-left: 7px; padding: 1px 7px; border-radius: var(--radius-full); background: hsl(var(--primary) / .16); color: var(--cor-primaria-tipo); font-size: var(--txt-2xs); font-weight: var(--peso-bold); vertical-align: 2px; } .comanda__pe { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px dashed var(--cor-borda); font-size: var(--txt-sm); color: var(--cor-suave-texto); } .comanda__pe a { color: var(--cor-primaria-tipo); font-weight: var(--peso-semi); text-decoration: none; } .comanda__esqueleto { height: 15px; border-radius: var(--radius-sm); background: var(--cor-suave); } @media (prefers-reduced-motion: no-preference) { .comanda__esqueleto { animation: pulsar 1.5s var(--ease) infinite; } @keyframes pulsar { 50% { opacity: .45; } } } /* Sem comanda (cardápio fora do ar, ou página aberta direto do arquivo) o painel devolve o vão que reservava à direita, senão sobra um bloco de mostarda vazio do tamanho de uma coluna. */ .hero__palco--simples { grid-template-columns: 1fr; } .hero__palco--simples .hero__painel { padding-right: clamp(28px, 4vw, 60px); } /* Abaixo de 980px a comanda desce para dentro do fluxo e o painel deixa de reservar o vão à direita. */ @media (max-width: 980px) { .hero__palco { grid-template-columns: 1fr; gap: 0; } .hero__painel { grid-column: 1; padding-right: clamp(28px, 4vw, 60px); /* A comanda sobe 40px por cima do painel; sem esta folga ela encostaria na linha dos fatos, e o que era sobreposição vira colisão. */ padding-bottom: calc(clamp(36px, 5vw, 68px) + 44px); } .comanda { grid-column: 1; grid-row: 2; justify-self: stretch; width: auto; margin: -40px var(--e-4) 0; } } /* Dois botões de larguras diferentes empilhados leem como rascunho. */ @media (max-width: 560px) { .hero__acoes { flex-direction: column; align-items: stretch; } .hero__acoes .btn { justify-content: center; } .hero__fatos { gap: var(--e-2) var(--e-5); } } /* ========================================================================= RODAPÉ ========================================================================= */ .rodape { margin-top: var(--e-24); background: hsl(var(--muted) / .45); border-top: 1px solid var(--cor-borda); padding-block: var(--e-16) var(--e-6); } .rodape__grade { display: grid; gap: var(--e-8); grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.1fr); } @media (max-width: 940px) { .rodape__grade { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .rodape__grade { grid-template-columns: 1fr; } } .rodape__rotulo { display: block; margin-bottom: var(--e-4); font-size: var(--txt-xs); font-weight: var(--peso-semi); letter-spacing: .22em; text-transform: uppercase; color: var(--cor-suave-texto); } .rodape__marca { display: flex; align-items: center; gap: 10px; margin-bottom: var(--e-4); } .rodape__marca img { width: 42px; height: 42px; } .rodape__marca b { font-size: var(--txt-base); font-weight: var(--peso-semi); letter-spacing: var(--ls-titulo); line-height: 1.15; } .rodape__sobre { margin: 0 0 var(--e-5); max-width: 34ch; font-size: var(--txt-md); line-height: var(--lh-normal); color: var(--cor-suave-texto); } .rodape__links { display: grid; gap: 2px; } .rodape__links a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; width: fit-content; font-size: var(--txt-md); color: var(--cor-texto); text-decoration: none; transition: color var(--t-rapido) var(--ease); } .rodape__links a:hover { color: var(--cor-primaria-tipo); } .rodape__links .icone { color: var(--cor-suave-texto); } .rodape__links a:hover .icone { color: var(--cor-primaria-tipo); } .horario { display: grid; gap: 2px; } .horario__linha { display: flex; justify-content: space-between; gap: var(--e-4); padding: 5px 0; font-size: var(--txt-md); color: var(--cor-suave-texto); } .horario__linha b { font-variant-numeric: tabular-nums; font-weight: var(--peso-normal); } .horario__linha--hoje { color: var(--cor-texto); font-weight: var(--peso-medio); } .horario__linha--hoje b { font-weight: var(--peso-semi); } .horario__hoje { display: inline-flex; align-items: center; gap: 6px; font-size: var(--txt-2xs); font-weight: var(--peso-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--cor-primaria-tipo); } .rodape__social { display: flex; gap: var(--e-2); } .rodape__social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--cor-borda); border-radius: var(--radius-lg); background: var(--cor-card); color: var(--cor-suave-texto); text-decoration: none; transition: all var(--t-rapido) var(--ease); } .rodape__social a:hover { color: var(--cor-primaria-tipo); border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .08); } .rodape__fim { margin-top: var(--e-12); padding-top: var(--e-5); border-top: 1px solid var(--cor-borda); text-align: center; font-size: var(--txt-xs); color: var(--cor-suave-texto); } /* ========================================================================= ESTADO DA LOJA E WHATSAPP ========================================================================= */ .estado { flex: none; } @media (prefers-reduced-motion: no-preference) { .estado--aberto .estado__ponto { animation: pulso 2.6s var(--ease) infinite; } @keyframes pulso { 0%, 100% { box-shadow: 0 0 0 0 hsl(var(--success) / .55); } 55% { box-shadow: 0 0 0 5px hsl(var(--success) / 0); } } } .zap { position: fixed; right: var(--e-5); bottom: var(--e-5); z-index: var(--z-fixo); display: grid; place-items: center; width: 54px; height: 54px; border-radius: var(--radius-full); background: var(--cor-whatsapp); color: #FFFFFF; box-shadow: 0 10px 26px hsl(146 80% 30% / .38); transition: transform var(--t-rapido) var(--ease); } .zap:hover { transform: scale(1.06); } .zap:focus-visible { outline: none; box-shadow: var(--anel-foco), 0 10px 26px hsl(146 80% 30% / .38); } @media (max-width: 900px) { .zap { bottom: calc(var(--e-5) + env(safe-area-inset-bottom)); } } /* ========================================================================= Barras decorativas dos eyebrows/rótulos removidas a pedido do cliente. Um "content: none" com !important desliga o traço em todas as seções (.home, .cardapio, .pedido, hero…), sem precisar caçar cada regra. ========================================================================= */ .eyebrow::before, .hero__olho::before { content: none !important; }