/* ===================================================================== SANTA DELÍCIA — Site público Mobile-first. Base > layout > componentes > seções. ===================================================================== */ /* --------------------------------------------------------------- 0. GRÃO DE PAPEL Textura sutil reaproveitada pelo corpo e por cada seção. Antes ela vivia só no ; como agora cada seção pinta o próprio fundo, precisa ser uma variável para o grão não sumir nos blocos de cor. --------------------------------------------------------------- */ :root { --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E"); /* Fundo dourado dos blocos (hero e seções alternadas) — é a mesma cor que o navegador usa ao selecionar texto, com texto branco por cima. ------------------------------------------------------------------ LEITURA: branco sobre #c08329 rende 3,22:1. Passa para título grande (mínimo 3:1), mas fica abaixo do 4,5:1 que o texto corrido pede. Para deixar os parágrafos confortáveis, troque a linha abaixo por #9c661c (mesmo tom, um pouco mais fundo, 4,85:1). */ --dourado-secao: #c08329; } /* --------------------------------------------------------------- 1. BASE --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecalho-h) + 1.5rem); } body { margin: 0; font-family: var(--f-corpo); font-size: var(--t-base); line-height: var(--lh-corpo); color: var(--tinta-80); background: var(--massa-50); -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Grão de papel: dá o toque artesanal sem pesar no carregamento */ background-image: var(--grao); } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; } a { color: var(--navy); text-decoration: none; transition: color var(--rapido); } a:hover { color: var(--dourado-600); } h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 600; line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo); color: var(--navy); margin: 0 0 var(--e-3); } h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); } h3 { font-size: var(--t-lg); } p { margin: 0 0 var(--e-4); } p:last-child { margin-bottom: 0; } strong { font-weight: 700; color: var(--tinta); } ::selection { background: var(--dourado); color: #fff; } :focus-visible { outline: 3px solid var(--dourado); outline-offset: 2px; border-radius: var(--r-xs); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--massa-100); } ::-webkit-scrollbar-thumb { background: var(--massa-400); border: 3px solid var(--massa-100); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--canela); } .pular-para-conteudo { position: absolute; left: -9999px; top: var(--e-2); background: var(--navy); color: #fff; padding: var(--e-3) var(--e-4); border-radius: var(--r-sm); z-index: var(--z-toast); font-weight: 700; } .pular-para-conteudo:focus { left: var(--e-2); } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------- 2. LAYOUT --------------------------------------------------------------- */ .container { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--e-4); } @media (min-width: 768px) { .container { padding-inline: var(--e-6); } } .container--fina { max-width: var(--largura-fina); } /* --------------------------------------------------------------- SEÇÕES A transição entre elas não usa ornamento nem elemento intermediário: os blocos se encostam de topo reto e a própria troca de cor faz a divisão. A seção de baixo recebe uma sombra interna curta na borda superior, então a de cima parece repousar sobre ela — profundidade no lugar de enfeite. Como a sombra é pintada dentro da própria seção, não existe junção onde possa abrir fresta. --------------------------------------------------------------- */ .secao { position: relative; padding-block: var(--secao-y); background-color: var(--massa-50); background-image: var(--grao); } .secao--compacta { padding-block: calc(var(--secao-y) * .62); } .secao--navy { background-color: var(--navy-800); color: var(--massa-200); } .secao--navy h2, .secao--navy h3 { color: var(--massa-100); } /* Bloco dourado — texto claro, mesma lógica do bloco azul. */ .secao--cinza { background-color: var(--dourado-secao); color: #fff; } .secao--cinza h2, .secao--cinza h3 { color: #fff; } .secao--cinza .sobrelinha { color: #fff; } .secao--cinza .sobrelinha::before { background: #fff; } .secao--cinza .texto-apoio { color: #fff; } .secao--cinza .link-seta { color: #fff; } .secao--cinza .ficha__linha { border-color: rgba(255, 255, 255, .3); } .secao--cinza .ficha__linha dt { color: rgba(255, 255, 255, .82); } .secao--cinza .ficha__linha dd { color: #fff; } .secao--cinza strong { color: #fff; } .secao--cinza .btn--linha { --btn-cor: #fff; --btn-borda: rgba(255, 255, 255, .5); --btn-hover: rgba(255, 255, 255, .14); } .secao--cinza .btn--linha:hover { border-color: #fff; } .hero + .secao, .secao + .secao, .marquee-secao + .secao { box-shadow: inset 0 11px 18px -13px rgba(52, 40, 26, .34); } /* Sobre fundo escuro a sombra quente desaparece; preto rende o mesmo efeito com a mesma discrição. */ .hero + .secao--navy, .secao + .secao--navy, .hero + .secao--cinza, .secao + .secao--cinza { box-shadow: inset 0 11px 20px -13px rgba(0, 0, 0, .5); } .produto-layout > *, .carrinho-layout > *, .conta-layout > *, .portas > *, .passos > * { min-width: 0; } .grade { display: grid; gap: var(--e-4); } .pilha { display: flex; flex-direction: column; gap: var(--e-4); } .linha { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; } .entre { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); } /* Marca no alto de páginas sem hero (login, cadastro, confirmação) */ .marca-pagina { width: min(100%, 230px); height: auto; margin: 0 auto var(--e-5); } .cabeca-secao { max-width: 58ch; margin-bottom: var(--e-6); } .cabeca-secao--centro { margin-inline: auto; text-align: center; } .cabeca-secao p { margin-top: var(--e-3); } .sobrelinha { display: flex; align-items: center; gap: var(--e-2); font-family: var(--f-corpo); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--dourado-600); margin-bottom: var(--e-3); } .sobrelinha::before { content: ""; width: 22px; height: 3px; border-radius: 99px; background: var(--dourado-400); flex-shrink: 0; } .cabeca-secao--centro .sobrelinha { justify-content: center; } .secao--navy .sobrelinha { color: var(--dourado-400); } .secao--navy .sobrelinha::before { background: var(--dourado); } .texto-apoio { color: var(--tinta-60); font-size: var(--t-md); } .secao--navy .texto-apoio { color: var(--massa-300); } /* --------------------------------------------------------------- 3. BOTÕES --------------------------------------------------------------- */ .btn { --btn-bg: var(--navy); --btn-hover: var(--navy-700); --btn-cor: #fff; --btn-borda: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); padding: .82rem 1.5rem; border-radius: var(--r-full); background: var(--btn-bg); color: var(--btn-cor); border: 2px solid var(--btn-borda); font-family: var(--f-corpo); font-weight: 700; font-size: var(--t-sm); line-height: 1.25; text-align: center; box-shadow: var(--s-1); transition: transform var(--rapido), box-shadow var(--rapido), background var(--rapido), color var(--rapido); -webkit-tap-highlight-color: transparent; } /* Cada variante declara a própria cor de hover em --btn-hover. Antes o :hover fixava navy-700 direto, então qualquer variante sem regra própria (o botão verde, por exemplo) trocava de cor ao passar o mouse. Com o token, a variante manda na própria identidade. */ .btn:hover { background: var(--btn-hover); color: var(--btn-cor); transform: translateY(-2px); box-shadow: var(--s-2); } .btn:active { transform: translateY(0); } .btn:disabled, .btn[aria-disabled="true"] { background: var(--massa-200); color: var(--tinta-40); box-shadow: none; pointer-events: none; } /* Texto escuro sobre o dourado: branco aqui fica em ~3,2:1 de contraste, abaixo do minimo de 4,5:1 para texto pequeno/médio — navy-900 passa de 5:1. No hover o fundo clareia (não escurece) para o texto continuar legível. */ .btn--ouro { --btn-bg: var(--dourado); --btn-hover: var(--dourado-400); --btn-cor: var(--navy-900); } .btn--branco { --btn-bg: #fff; --btn-hover: var(--massa-100); --btn-cor: var(--navy); } .btn--verde { --btn-bg: var(--verde); --btn-hover: #3d6835; } .btn--linha { --btn-bg: transparent; --btn-hover: var(--massa-100); --btn-cor: var(--navy); --btn-borda: var(--linha-forte); box-shadow: none; } .btn--linha:hover { border-color: var(--dourado-400); } .secao--navy .btn--linha { --btn-hover: rgba(251,244,228,.12); --btn-cor: var(--massa-100); --btn-borda: rgba(251,244,228,.35); } .secao--navy .btn--linha:hover { border-color: var(--massa-200); } .btn--grande { padding: 1rem 1.9rem; font-size: var(--t-base); } .btn--pequeno { padding: .5rem 1rem; font-size: var(--t-xs); } .btn--bloco { width: 100%; } .btn-whats { --btn-bg: #1f9c54; --btn-hover: #17803f; } @media (pointer: coarse) { .btn { min-height: 44px; } } .link-seta { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 700; font-size: var(--t-sm); color: var(--navy); } .link-seta .ic { transition: transform var(--rapido); } .link-seta:hover .ic { transform: translateX(4px); } /* --------------------------------------------------------------- 4. CABEÇALHO --------------------------------------------------------------- */ .cabecalho { position: sticky; top: 0; z-index: var(--z-header); height: var(--cabecalho-h); display: flex; align-items: center; background: rgba(254, 251, 244, .93); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border-bottom: 2px solid var(--linha); } .cabecalho__interno { display: flex; align-items: center; gap: var(--e-4); width: 100%; } /* A marca já contém o nome escrito: repetir "Santa Delícia" ao lado seria redundante e roubaria o espaço que a logo precisa para respirar. */ .marca { display: flex; align-items: center; margin-right: auto; } .marca img { height: 40px; width: auto; } @media (min-width: 480px) { .marca img { height: 46px; } } @media (min-width: 900px) { .marca img { height: 54px; } } .nav { display: none; } @media (min-width: 900px) { .nav { display: flex; align-items: center; gap: var(--e-1); } .nav a { font-size: var(--t-sm); font-weight: 600; color: var(--tinta-60); padding: .5rem .9rem; border-radius: var(--r-full); transition: background var(--rapido), color var(--rapido); } .nav a:hover { color: var(--navy); background: var(--massa-100); } .nav a.is-active { color: var(--navy); background: var(--massa-200); font-weight: 700; } } .cabecalho__acoes { display: flex; align-items: center; gap: var(--e-2); } .btn-carrinho { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-full); border: 2px solid var(--linha); color: var(--navy); background: #fff; transition: border-color var(--rapido), background var(--rapido), transform var(--rapido); } .btn-carrinho:hover { border-color: var(--dourado-400); background: var(--massa-100); color: var(--navy); transform: translateY(-2px); } .btn-carrinho__badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding-inline: 5px; display: grid; place-items: center; background: var(--dourado); color: var(--navy-900); font-family: var(--f-corpo); font-size: .6875rem; font-weight: 800; border-radius: var(--r-full); border: 2px solid var(--massa-50); } .btn-carrinho__badge:empty, .btn-carrinho__badge[data-qtd="0"] { display: none; } .btn-menu { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-full); border: 2px solid var(--linha); color: var(--navy); background: #fff; } @media (min-width: 900px) { .btn-menu { display: none; } } @media (pointer: coarse) { .btn-menu, .btn-carrinho { width: 44px; height: 44px; } } .entrar-desktop { display: none; } @media (min-width: 900px) { .entrar-desktop { display: inline-flex; } } .faixa-cadastro { background: var(--navy-800); color: var(--massa-200); font-size: var(--t-xs); text-align: center; padding: .5rem var(--e-4); display: flex; align-items: center; justify-content: center; gap: var(--e-2); } .faixa-cadastro a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .faixa-cadastro a:hover { color: var(--dourado-400); } .faixa-cadastro .ic { color: var(--dourado-400); } /* Menu lateral */ .drawer { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; pointer-events: none; } .drawer.is-aberto { visibility: visible; pointer-events: auto; } .drawer__fundo { position: absolute; inset: 0; background: rgba(52, 40, 26, .5); opacity: 0; transition: opacity var(--medio); } .drawer.is-aberto .drawer__fundo { opacity: 1; } .drawer__painel { position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 340px); background: var(--massa-50); padding: var(--e-4) var(--e-5) var(--e-8); overflow-y: auto; transform: translateX(100%); transition: transform var(--lento); display: flex; flex-direction: column; gap: var(--e-4); border-left: 2px solid var(--linha); } .drawer.is-aberto .drawer__painel { transform: translateX(0); } .drawer__topo { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--e-3); border-bottom: 2px solid var(--linha); } .drawer__nav { display: flex; flex-direction: column; } .drawer__nav a { padding: var(--e-3) 0; font-size: var(--t-md); font-weight: 600; color: var(--tinta-80); border-bottom: 1px solid var(--linha); } .drawer__nav a.is-active, .drawer__nav a:hover { color: var(--dourado-600); } /* --------------------------------------------------------------- 5. HERO --------------------------------------------------------------- */ .hero { position: relative; padding-block: var(--e-8) var(--e-9); background-color: var(--navy-900); background-image: linear-gradient(180deg, var(--navy-900) 0%, rgba(19, 28, 63, .82) 38%, rgba(19, 28, 63, .35) 100%), url("../img/hero-fundo-mobile.png"); background-size: cover; background-position: top center; color: #fff; overflow: hidden; } .hero .sobrelinha { color: var(--dourado-400); } .hero .sobrelinha::before { background: var(--dourado-400); } .hero__titulo { color: #fff; } .hero .btn--linha { --btn-cor: #fff; --btn-borda: rgba(255, 255, 255, .5); --btn-hover: rgba(255, 255, 255, .14); } .hero .btn--linha:hover { border-color: #fff; } .hero__conteudo { max-width: 640px; } @media (min-width: 1000px) { .hero { padding-block: calc(var(--e-9) + 1rem) calc(var(--e-9) + 2rem); background-image: linear-gradient(92deg, var(--navy-900) 0%, var(--navy-900) 30%, rgba(19, 28, 63, .78) 46%, rgba(19, 28, 63, .18) 68%, rgba(19, 28, 63, 0) 82%), url("../img/hero-fundo.png"); background-position: center right; } } .hero__titulo { font-size: var(--t-4xl); font-weight: 700; line-height: 1.1; letter-spacing: -.018em; margin-bottom: var(--e-4); text-wrap: balance; } .hero__titulo em { font-style: italic; font-weight: 500; color: var(--dourado-400); } .hero__texto { font-size: var(--t-md); color: rgba(255, 255, 255, .88); max-width: 46ch; margin-bottom: var(--e-5); } .hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); } /* --------------------------------------------------------------- ESTEIRA DE PRODUTOS — fita rolando devagar embaixo do hero --------------------------------------------------------------- */ .marquee-secao { background: var(--massa-100); background-image: var(--grao); border-bottom: 1px solid var(--linha); padding-block: var(--e-6); } .marquee { position: relative; overflow: hidden; padding-block: var(--e-3); /* espaço pra sombra e o zoom no hover não cortarem a bolinha */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .marquee__trilha { display: flex; width: max-content; animation: marquee-rolar 46s linear infinite; } @keyframes marquee-rolar { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee__item { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); width: 128px; flex-shrink: 0; margin-inline: var(--e-4); text-align: center; } .marquee__foto { width: 96px; height: 96px; border-radius: var(--r-full); flex-shrink: 0; overflow: hidden; border: 3px solid #fff; box-shadow: var(--s-2); background: var(--massa-200); transition: transform var(--medio), border-color var(--medio); } .marquee__item:hover .marquee__foto { transform: scale(1.06); border-color: var(--dourado-400); } .marquee__foto img { width: 100%; height: 100%; object-fit: cover; } .marquee__nome { font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-80); line-height: 1.3; } .marquee:hover .marquee__trilha, .marquee:focus-within .marquee__trilha { animation-play-state: paused; } /* No desktop a fita para de rolar e vira uma fileira fixa de seis. O corte no sexto item também descarta a segunda volta que o PHP imprime só pra emendar a rolagem no mobile — e evita repetir aqui o que a seção de destaques logo abaixo já mostra em tamanho grande. */ @media (min-width: 1000px) { .marquee { overflow: visible; padding-block: 0; -webkit-mask-image: none; mask-image: none; } .marquee__trilha { display: grid; width: 100%; grid-template-columns: repeat(6, 1fr); gap: var(--e-4); justify-items: center; animation: none; } .marquee__item:nth-child(n+7) { display: none; } .marquee__item { width: 100%; margin-inline: 0; } .marquee__foto { width: 110px; height: 110px; } .marquee__nome { font-size: var(--t-sm); } } @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } .marquee__trilha { animation: none; } } /* --------------------------------------------------------------- SOBRE — foto ocupando a faixa inteira, sumindo no laranja da seção --------------------------------------------------------------- */ .secao--sobre { position: relative; background-image: linear-gradient(180deg, var(--dourado-secao) 0%, var(--dourado-secao) 55%, rgba(192, 131, 41, .4) 100%), url("../img/sobre-fundo.png"); background-size: cover; background-position: bottom center; } @media (min-width: 1000px) { .secao--sobre { background-image: linear-gradient(100deg, var(--dourado-secao) 0%, var(--dourado-secao) 36%, rgba(192, 131, 41, .55) 58%, rgba(192, 131, 41, .12) 80%), url("../img/sobre-fundo.png"); background-position: center right; } } .sobre__conteudo { max-width: 640px; } .sobre__selo { display: inline-flex; align-items: center; gap: var(--e-2); margin-top: var(--e-5); padding: .5rem 1rem; border: 2px solid rgba(255, 255, 255, .35); border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 700; color: #fff; } .sobre__selo .ic { color: var(--navy-900); } /* --------------------------------------------------------------- 6. CARTÃO DE PRODUTO --------------------------------------------------------------- */ .grade-produtos { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } @media (min-width: 640px) { .grade-produtos { gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } } @media (min-width: 1100px) { .grade-produtos { grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); } } .card-produto { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--linha); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--s-1); transition: transform var(--medio), box-shadow var(--medio), border-color var(--medio); } .card-produto:hover, .card-produto:focus-within { transform: translateY(-4px); border-color: var(--dourado-400); box-shadow: var(--s-3); } .card-produto__midia { position: relative; display: block; aspect-ratio: 2 / 1; /* formato nativo das fotos (300x150) */ overflow: hidden; background: var(--massa-200); } .card-produto__midia img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lento); } .card-produto:hover .card-produto__midia img { transform: scale(1.06); } .card-produto__tag { position: absolute; top: var(--e-2); left: var(--e-2); padding: .22rem .6rem; background: rgba(255, 255, 255, .95); border-radius: var(--r-full); font-size: .6875rem; font-weight: 700; color: var(--tinta-80); } .card-produto__tag--destaque { background: var(--dourado); color: var(--navy-900); } .card-produto__corpo { padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; } .card-produto__nome { font-family: var(--f-titulo); font-size: var(--t-md); font-weight: 600; line-height: 1.25; color: var(--navy); margin: 0; } .card-produto__meta { display: flex; flex-wrap: wrap; gap: 0 var(--e-2); font-size: .75rem; font-weight: 600; color: var(--tinta-60); } .card-produto__meta span + span::before { content: "•"; margin-right: var(--e-2); color: var(--massa-400); } .card-produto__sabores { font-size: var(--t-xs); color: var(--tinta-60); line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-produto__rodape { margin-top: auto; padding-top: var(--e-3); border-top: 2px dashed var(--linha); } /* --------------------------------------------------------------- 7. PREÇO --------------------------------------------------------------- */ .preco { font-family: var(--f-titulo); font-size: 1.25rem; font-weight: 700; color: var(--tinta); line-height: 1.15; } .preco small { display: block; font-family: var(--f-corpo); font-size: .625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-60); margin-top: 3px; } .preco--grande { font-size: 2.125rem; } /* Preço bloqueado até o cadastro */ .preco-travado { display: inline-flex; align-items: center; gap: var(--e-2); padding: .45rem .85rem; border: 2px dashed var(--linha-forte); border-radius: var(--r-full); background: var(--massa-100); font-size: .75rem; font-weight: 700; color: var(--tinta-60); transition: all var(--rapido); } .preco-travado:hover { border-color: var(--dourado-400); color: var(--dourado-600); background: var(--dourado-100); transform: translateY(-1px); } .preco-travado .ic { color: var(--tinta-40); } .preco-travado:hover .ic { color: var(--dourado-600); } /* --------------------------------------------------------------- 8. CATEGORIAS --------------------------------------------------------------- */ .trilha-categorias { display: flex; gap: var(--e-2); overflow-x: auto; padding-bottom: var(--e-3); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .trilha-categorias::-webkit-scrollbar { display: none; } @media (min-width: 900px) { .trilha-categorias { flex-wrap: wrap; overflow: visible; } } .chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--e-2); padding: .55rem 1rem; border-radius: var(--r-full); background: #fff; border: 2px solid var(--linha); font-size: var(--t-sm); font-weight: 600; color: var(--tinta-60); white-space: nowrap; transition: all var(--rapido); } .chip .ic { color: var(--tinta-40); } .chip:hover { border-color: var(--dourado-400); color: var(--navy); transform: translateY(-2px); } .chip:hover .ic { color: var(--dourado-600); } .chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; } .chip.is-active .ic { color: var(--dourado-400); } .chip__n { font-size: .6875rem; font-weight: 700; color: var(--tinta-60); } .chip.is-active .chip__n { color: rgba(255,255,255,.65); } /* Cinco colunas no desktop fecham as dez linhas do catálogo em duas fileiras exatas — sem sobra de meia fileira solta no fim. */ .grade-categorias { display: grid; gap: var(--e-3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 700px) { .grade-categorias { grid-template-columns: repeat(3, 1fr); gap: var(--e-3); } } @media (min-width: 1000px) { .grade-categorias { grid-template-columns: repeat(5, 1fr); } } .card-categoria { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--r-md); background: var(--massa-200); box-shadow: var(--s-2); transition: transform var(--medio), box-shadow var(--medio); } .card-categoria:hover { transform: translateY(-4px); box-shadow: var(--s-4); } /* Degradê para o nome ficar legível sobre qualquer foto */ .card-categoria::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 28, 63, 0) 42%, rgba(19, 28, 63, .88) 100%); z-index: 1; } /* Filete dourado que se desenha na base ao passar o mouse */ .card-categoria::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--dourado); transform: scaleX(0); transform-origin: center; transition: transform var(--medio); z-index: 2; } .card-categoria:hover::after { transform: scaleX(1); } .card-categoria__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--lento); } .card-categoria__foto--icone { display: grid; place-items: center; color: var(--dourado-400); background: var(--navy-800); } .card-categoria:hover .card-categoria__foto { transform: scale(1.08); } .card-categoria__nome { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--e-4) var(--e-3) var(--e-3); font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-sm); color: #fff; line-height: 1.25; text-align: left; text-shadow: 0 1px 3px rgba(19, 28, 63, .5); } /* --------------------------------------------------------------- 9. PASSOS --------------------------------------------------------------- */ .passos { display: grid; gap: var(--e-5); counter-reset: passo; } @media (min-width: 800px) { .passos { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); } } .passo { position: relative; padding-left: 60px; counter-increment: passo; } .passo::before { content: counter(passo); position: absolute; top: -4px; left: 0; width: 44px; height: 44px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--dourado); color: var(--navy-900); font-family: var(--f-titulo); font-size: 1.125rem; font-weight: 700; } .passo h3 { font-size: var(--t-md); margin-bottom: var(--e-2); } .passo p { color: var(--massa-300); font-size: var(--t-sm); } /* --------------------------------------------------------------- 10. AS DUAS PORTAS --------------------------------------------------------------- */ .portas { display: grid; gap: var(--e-4); } @media (min-width: 800px) { .portas { grid-template-columns: 1fr 1fr; gap: var(--e-5); } } .porta { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-6) var(--e-5); border: 2px solid var(--linha); border-radius: var(--r-xl); background: #fff; transition: transform var(--medio), box-shadow var(--medio); } .porta:hover { transform: translateY(-3px); box-shadow: var(--s-3); } .porta--cnpj { background: var(--navy-800); border-color: var(--navy-800); color: var(--massa-200); } .porta--cnpj h3 { color: #fff; } .porta--cnpj .texto-apoio { color: var(--massa-300); } .porta__topo { display: flex; align-items: center; gap: var(--e-3); } .porta__icone { width: 54px; height: 54px; display: grid; place-items: center; border-radius: var(--r-full); color: var(--navy); background: var(--massa-100); border: 2px solid var(--massa-200); flex-shrink: 0; } .porta--cnpj .porta__icone { background: rgba(251,244,228,.12); border-color: rgba(251,244,228,.2); color: var(--dourado-400); } .porta__selo { font-size: .6875rem; font-weight: 800; letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--dourado-600); } .porta--cnpj .porta__selo { color: var(--dourado-400); } .porta__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); font-size: var(--t-sm); } .porta__lista li { display: flex; gap: var(--e-2); align-items: flex-start; color: var(--tinta-60); } .porta--cnpj .porta__lista li { color: var(--massa-200); } .porta__lista .ic { color: var(--verde); margin-top: 2px; } .porta--cnpj .porta__lista .ic { color: var(--dourado-400); } .porta .btn { margin-top: auto; } /* --------------------------------------------------------------- 11. FORMULÁRIOS --------------------------------------------------------------- */ .form { display: grid; gap: var(--e-4); } .campo { display: flex; flex-direction: column; gap: var(--e-2); } .campo label { font-size: var(--t-sm); font-weight: 700; color: var(--tinta); } .campo label .obrig { color: var(--vermelho); font-weight: 400; } .campo__ajuda { font-size: var(--t-xs); color: var(--tinta-40); } .campo__erro { font-size: var(--t-xs); color: var(--vermelho); font-weight: 700; } .entrada, select.entrada, textarea.entrada { width: 100%; padding: .75rem .95rem; background: #fff; border: 2px solid var(--linha-forte); border-radius: var(--r-sm); font-size: var(--t-base); color: var(--tinta); transition: border-color var(--rapido), box-shadow var(--rapido); appearance: none; } .entrada::placeholder { color: var(--tinta-25); } .entrada:hover { border-color: var(--massa-400); } .entrada:focus { outline: none; border-color: var(--dourado); box-shadow: 0 0 0 4px var(--dourado-100); } .entrada:disabled { background: var(--massa-100); color: var(--tinta-40); cursor: not-allowed; } .entrada.is-erro { border-color: var(--vermelho); } .entrada.is-ok { border-color: var(--verde); } textarea.entrada { min-height: 110px; resize: vertical; line-height: 1.65; } select.entrada { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237d6a54' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .95rem center; padding-right: 2.5rem; cursor: pointer; } .form-grade { display: grid; gap: var(--e-4); } @media (min-width: 640px) { .form-grade--2 { grid-template-columns: 1fr 1fr; } .form-grade--3 { grid-template-columns: repeat(3, 1fr); } } fieldset.bloco { border: 2px solid var(--linha); border-radius: var(--r-lg); padding: var(--e-5); margin: 0; background: #fff; } fieldset.bloco legend { padding-inline: var(--e-3); font-size: var(--t-xs); font-weight: 800; letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--dourado-600); } .escolha { display: grid; gap: var(--e-3); } @media (min-width: 640px) { .escolha { grid-template-columns: 1fr 1fr; } } .escolha input { position: absolute; opacity: 0; width: 0; height: 0; } /* Coluna, não linha: título e descrição empilhados. Em layout de linha (flex-direction:row) os dois textos disputavam a mesma largura e o flexbox encolhia o título abaixo do necessário, quebrando "Pessoa física" ao meio ("Pessoa" numa linha, "física" na outra). */ .escolha__op { display: flex; flex-direction: column; gap: 4px; padding: var(--e-4); border: 2px solid var(--linha-forte); border-radius: var(--r-md); background: #fff; cursor: pointer; transition: all var(--rapido); } .escolha__op:hover { border-color: var(--dourado-400); } .escolha input:checked + .escolha__op { border-color: var(--dourado); background: var(--dourado-100); } .escolha input:focus-visible + .escolha__op { outline: 3px solid var(--dourado); outline-offset: 2px; } .escolha__op .ic { color: var(--tinta-40); } .escolha input:checked + .escolha__op .ic { color: var(--dourado-600); } .escolha__op strong { font-family: var(--f-titulo); font-size: var(--t-md); color: var(--navy); white-space: nowrap; } .escolha__op span { font-size: var(--t-xs); color: var(--tinta-60); } .senha-forca { height: 5px; border-radius: 99px; background: var(--massa-200); overflow: hidden; } .senha-forca__barra { height: 100%; width: 0; border-radius: 99px; transition: width var(--medio), background var(--medio); } /* --------------------------------------------------------------- 12. CARRINHO E CHECKOUT --------------------------------------------------------------- */ .carrinho-layout { display: grid; gap: var(--e-5); align-items: start; } @media (min-width: 950px) { .carrinho-layout { grid-template-columns: 1fr 350px; gap: var(--e-6); } } .item-carrinho { display: grid; grid-template-columns: 76px 1fr; gap: var(--e-3); padding: var(--e-4) 0; border-bottom: 2px dashed var(--linha); } @media (min-width: 640px) { .item-carrinho { grid-template-columns: 92px 1fr auto; gap: var(--e-4); align-items: center; } } .item-carrinho:last-child { border-bottom: 0; } .item-carrinho__foto { width: 100%; aspect-ratio: 2/1; object-fit: cover; border: 2px solid var(--linha); border-radius: var(--r-sm); background: var(--massa-200); } .item-carrinho__nome { font-family: var(--f-titulo); font-size: var(--t-base); font-weight: 600; margin: 0 0 2px; color: var(--navy); } .item-carrinho__sabor { display: inline-block; font-size: var(--t-xs); font-weight: 700; color: var(--dourado-600); margin-bottom: 2px; } .item-carrinho__meta { font-size: .75rem; color: var(--tinta-60); } .item-carrinho__acoes { display: flex; align-items: center; gap: var(--e-3); margin-top: var(--e-2); } @media (min-width: 640px) { .item-carrinho__acoes { margin-top: 0; flex-direction: column; align-items: flex-end; gap: var(--e-2); } } .contador { display: inline-flex; align-items: center; border: 2px solid var(--linha-forte); border-radius: var(--r-full); overflow: hidden; background: #fff; } .contador button { width: 34px; height: 36px; display: grid; place-items: center; color: var(--tinta-60); transition: background var(--rapido), color var(--rapido); } .contador button:hover { background: var(--massa-100); color: var(--dourado-600); } .contador input { width: 40px; height: 36px; text-align: center; background: transparent; border: 0; font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-sm); -moz-appearance: textfield; } .contador input::-webkit-outer-spin-button, .contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .btn-remover { color: var(--tinta-40); font-size: var(--t-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; transition: color var(--rapido); } .btn-remover:hover { color: var(--vermelho); } .resumo { background: #fff; border: 2px solid var(--linha); border-radius: var(--r-lg); padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); } @media (min-width: 950px) { .resumo { position: sticky; top: calc(var(--cabecalho-h) + var(--e-4)); } } .resumo h3 { font-size: var(--t-md); margin-bottom: var(--e-1); } .resumo__linha { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-sm); color: var(--tinta-60); } .resumo__linha .dado { color: var(--tinta); font-weight: 700; } .resumo__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--e-3); border-top: 2px dashed var(--linha-forte); } .resumo__total > span { font-weight: 700; color: var(--tinta); } .minimo { background: var(--massa-100); border: 2px solid var(--linha); border-radius: var(--r-md); padding: var(--e-3); font-size: var(--t-xs); color: var(--tinta-60); } .minimo__barra { height: 6px; background: var(--massa-200); border-radius: 99px; overflow: hidden; margin-top: var(--e-2); } .minimo__preenchido { height: 100%; border-radius: 99px; background: var(--dourado); transition: width var(--lento); } .minimo.is-ok { background: var(--verde-claro); border-color: rgba(74,124,64,.3); color: var(--verde); } .minimo.is-ok .minimo__preenchido { background: var(--verde); } .aviso-volume { padding: var(--e-5); border-radius: var(--r-lg); background: var(--navy-800); color: var(--massa-200); display: flex; flex-direction: column; gap: var(--e-3); } .aviso-volume strong { font-family: var(--f-titulo); font-size: var(--t-md); color: #fff; } .aviso-volume p { font-size: var(--t-sm); margin: 0; color: var(--massa-300); } /* Chamada de grande volume no rodapé da home: ocupa a seção inteira, sem o card compacto — é o último argumento da página, precisa de presença de encerramento, não de um aviso discreto. */ .chamada-volume { max-width: 640px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--e-3); } .chamada-volume__icone { width: 76px; height: 76px; display: grid; place-items: center; border-radius: var(--r-full); background: rgba(255, 255, 255, .1); border: 2px solid rgba(255, 255, 255, .22); color: var(--dourado-400); margin-bottom: var(--e-2); } .chamada-volume h2 { font-size: var(--t-3xl); margin-bottom: 0; } .chamada-volume .texto-apoio { font-size: var(--t-lg); } .chamada-volume .btn { margin-top: var(--e-3); } .vazio { text-align: center; padding: var(--e-8) var(--e-4); } .vazio__icone { width: 76px; height: 76px; margin: 0 auto var(--e-4); display: grid; place-items: center; border: 2px dashed var(--linha-forte); border-radius: var(--r-full); color: var(--tinta-40); background: var(--massa-100); } .vazio h3 { margin-bottom: var(--e-2); } .vazio p { color: var(--tinta-60); max-width: 40ch; margin-inline: auto; margin-bottom: var(--e-5); } /* --------------------------------------------------------------- 13. ALERTAS, SELOS E PAINÉIS --------------------------------------------------------------- */ .alerta { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) var(--e-4); border: 2px solid; border-radius: var(--r-md); font-size: var(--t-sm); margin-bottom: var(--e-4); } .alerta .ic { margin-top: 2px; } .alerta--sucesso { background: var(--verde-claro); border-color: rgba(74,124,64,.35); color: #33582b; } .alerta--sucesso .ic { color: var(--verde); } .alerta--erro { background: var(--verm-claro); border-color: rgba(181,68,31,.3); color: #8c3417; } .alerta--erro .ic { color: var(--vermelho); } .alerta--aviso { background: var(--ambar-claro); border-color: rgba(154,108,18,.3); color: #75520e; } .alerta--aviso .ic { color: var(--ambar); } .alerta--info { background: var(--azul-claro); border-color: rgba(44,98,133,.28); color: #244f6b; } .alerta--info .ic { color: var(--azul); } .selo { display: inline-flex; align-items: center; gap: 4px; padding: .22rem .65rem; border-radius: var(--r-full); font-size: .6875rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; } .selo--cinza { background: var(--massa-200); color: var(--tinta-60); } .selo--verde { background: var(--verde-claro); color: var(--verde); } .selo--vermelho { background: var(--verm-claro); color: var(--vermelho); } .selo--azul { background: var(--azul-claro); color: var(--azul); } .selo--roxo { background: var(--roxo-claro); color: var(--roxo); } .selo--ambar { background: var(--ambar-claro); color: var(--ambar); } .selo--navy { background: var(--navy); color: #fff; } .selo--ouro { background: var(--dourado); color: var(--navy-900); } .painel { background: #fff; border: 2px solid var(--linha); border-radius: var(--r-lg); padding: var(--e-5); } .painel + .painel { margin-top: var(--e-4); } /* --------------------------------------------------------------- 14. RODAPÉ --------------------------------------------------------------- */ .rodape { background: var(--navy-900); color: var(--navy-300); padding-block: var(--e-7) var(--e-5); font-size: var(--t-sm); } .rodape__grade { display: grid; gap: var(--e-6); } @media (min-width: 800px) { .rodape__grade { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } } .rodape h4 { font-family: var(--f-corpo); font-size: .6875rem; font-weight: 800; letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--dourado-400); margin-bottom: var(--e-3); } .rodape a { color: var(--navy-300); display: block; padding-block: 4px; } .rodape a:hover { color: var(--massa-100); } .rodape__marca img { width: min(100%, 200px); height: auto; margin-bottom: var(--e-4); } .rodape__contato { display: flex; align-items: flex-start; gap: var(--e-2); padding-block: 4px; } .rodape__contato .ic { color: var(--dourado-400); margin-top: 4px; } .rodape__fim { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid rgba(251, 244, 228, .12); display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: space-between; font-size: var(--t-xs); color: var(--navy-300); } .rodape__social { display: flex; gap: var(--e-2); margin-top: var(--e-3); } .rodape__social a { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid rgba(251,244,228,.16); border-radius: var(--r-full); } .rodape__social a:hover { border-color: var(--dourado-400); background: rgba(251,244,228,.08); } .whats-flutua { position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: var(--z-header); width: 54px; height: 54px; border-radius: var(--r-full); display: grid; place-items: center; background: #1f9c54; color: #fff; box-shadow: 0 6px 20px rgba(31, 156, 84, .4); transition: transform var(--rapido), background var(--rapido), bottom var(--medio); } .whats-flutua:hover { background: #17803f; color: #fff; transform: scale(1.06); } /* Enquanto o aviso de cookies está na tela, o botão de WhatsApp sobe para não ficar embaixo dele */ body.tem-aviso-cookies .whats-flutua { bottom: calc(var(--e-4) + 76px); } @media (min-width: 640px) { body.tem-aviso-cookies .whats-flutua { bottom: calc(var(--e-4) + 64px); } } /* --------------------------------------------------------------- 19. AVISO DE COOKIES --------------------------------------------------------------- */ .cookies-aviso { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-header) + 1); display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4) var(--e-5); background: var(--navy-900); color: var(--massa-200); border-top: 3px solid var(--dourado); box-shadow: 0 -8px 24px rgba(19, 28, 63, .22); animation: cookies-subir 420ms var(--suave); } @media (min-width: 720px) { .cookies-aviso { flex-direction: row; align-items: center; padding: var(--e-4) var(--e-6); } } .cookies-aviso.is-saindo { animation: cookies-sumir 260ms var(--suave) forwards; } @keyframes cookies-subir { from { transform: translateY(100%); } } @keyframes cookies-sumir { to { transform: translateY(100%); opacity: 0; } } .cookies-aviso__texto { display: flex; align-items: flex-start; gap: var(--e-3); flex: 1; } .cookies-aviso__texto .ic { color: var(--dourado-400); flex-shrink: 0; margin-top: 2px; } .cookies-aviso__texto p { margin: 0; font-size: var(--t-sm); color: var(--massa-200); line-height: 1.55; } .cookies-aviso__acoes { display: flex; gap: var(--e-2); flex-shrink: 0; } @media (max-width: 719px) { .cookies-aviso__acoes { justify-content: flex-end; } } .cookies-aviso .btn--linha { --btn-cor: var(--massa-100); --btn-borda: rgba(251,244,228,.3); } .cookies-aviso .btn--linha:hover { background: rgba(251,244,228,.1); color: #fff; border-color: var(--massa-200); } /* --------------------------------------------------------------- 15. ANIMAÇÃO E TOAST --------------------------------------------------------------- */ [data-anima] { opacity: 0; transform: translateY(16px); transition: opacity 620ms var(--suave), transform 620ms var(--suave); } [data-anima].is-visivel { opacity: 1; transform: none; } .toast-area { position: fixed; left: 50%; bottom: var(--e-5); transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--e-2); width: min(92vw, 400px); pointer-events: none; } .toast { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); background: var(--navy-800); color: var(--massa-100); border-radius: var(--r-md); box-shadow: var(--s-4); font-size: var(--t-sm); font-weight: 600; pointer-events: auto; animation: subir 320ms var(--mola); } .toast--erro { background: var(--vermelho); color: #fff; } .toast--sucesso { background: var(--verde); color: #fff; } .toast.is-saindo { animation: sumir 220ms var(--suave) forwards; } @keyframes subir { from { opacity: 0; transform: translateY(14px) scale(.97); } } @keyframes sumir { to { opacity: 0; transform: translateY(8px); } } /* --------------------------------------------------------------- 16. PÁGINA DE PRODUTO --------------------------------------------------------------- */ .produto-layout { display: grid; gap: var(--e-5); } @media (min-width: 900px) { .produto-layout { grid-template-columns: 1fr 1fr; gap: var(--e-7); align-items: start; } } .produto-foto { border: 3px solid #fff; border-radius: var(--r-xl); overflow: hidden; background: var(--massa-200); aspect-ratio: 2/1; box-shadow: var(--s-3); } .produto-foto img { width: 100%; height: 100%; object-fit: cover; } .migalhas { font-size: var(--t-xs); color: var(--tinta-40); margin-bottom: var(--e-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); } .migalhas a { color: var(--tinta-40); } .migalhas a:hover { color: var(--dourado-600); } .migalhas span { color: var(--massa-400); } .ficha { display: grid; margin-block: var(--e-4); } .ficha__linha { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 2px dashed var(--linha); font-size: var(--t-sm); } .ficha__linha dt { color: var(--tinta-40); } .ficha__linha dd { margin: 0; font-weight: 700; color: var(--tinta); text-align: right; } /* Flex-wrap, não grid de colunas uniformes: cada chip fica do tamanho do próprio texto (nowrap) e quebra para a linha de baixo inteira — nunca quebra DENTRO do nome do sabor, que era o que ficava feio no pill arredondado (ex.: "Frango Desfiado" virando duas linhas). */ .sabores-grade { display: flex; flex-wrap: wrap; gap: var(--e-2); } .sabor-op { display: flex; } .sabor-op input { position: absolute; opacity: 0; width: 0; height: 0; } .sabor-op__caixa { display: inline-flex; align-items: center; white-space: nowrap; padding: .65rem 1.05rem; border: 2px solid var(--linha-forte); border-radius: var(--r-full); font-size: var(--t-sm); font-weight: 600; cursor: pointer; background: #fff; transition: all var(--rapido); } .sabor-op__caixa:hover { border-color: var(--dourado-400); } /* Texto escuro sobre o dourado: branco aqui fica em ~3,2:1 de contraste, abaixo do minimo de 4,5:1 para texto pequeno — navy-900 passa de 5:1. */ .sabor-op input:checked + .sabor-op__caixa { border-color: var(--dourado); background: var(--dourado); color: var(--navy-900); } .sabor-op input:focus-visible + .sabor-op__caixa { outline: 3px solid var(--dourado); outline-offset: 2px; } /* --------------------------------------------------------------- 17. MINHA CONTA --------------------------------------------------------------- */ .conta-layout { display: grid; gap: var(--e-5); } @media (min-width: 900px) { .conta-layout { grid-template-columns: 230px 1fr; gap: var(--e-6); } } .conta-menu { display: flex; flex-direction: column; gap: var(--e-1); } .conta-menu a { padding: .7rem 1rem; border-radius: var(--r-full); font-size: var(--t-sm); font-weight: 600; color: var(--tinta-60); transition: all var(--rapido); } .conta-menu a:hover { background: var(--massa-100); color: var(--navy); } .conta-menu a.is-active { background: var(--navy); color: #fff; font-weight: 700; } .lista-pedidos { display: grid; gap: var(--e-2); } .linha-pedido { display: grid; gap: var(--e-2); padding: var(--e-4); border: 2px solid var(--linha); border-radius: var(--r-md); transition: border-color var(--rapido); } .linha-pedido:hover { border-color: var(--dourado-400); } @media (min-width: 700px) { .linha-pedido { grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--e-4); } } .linha-pedido__codigo { font-family: var(--f-titulo); font-weight: 700; color: var(--navy); } /* --------------------------------------------------------------- 18. UTILITÁRIOS --------------------------------------------------------------- */ .centro { text-align: center; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--e-2); } .mt-3 { margin-top: var(--e-3); } .mt-4 { margin-top: var(--e-4); } .mt-5 { margin-top: var(--e-5); } .mt-6 { margin-top: var(--e-6); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--e-2); } .mb-3 { margin-bottom: var(--e-3); } .mb-4 { margin-bottom: var(--e-4); } .mb-5 { margin-bottom: var(--e-5); } .mb-6 { margin-bottom: var(--e-6); } .dado { font-family: var(--f-titulo); font-weight: 700; } .t-xs { font-size: var(--t-xs); } .t-sm { font-size: var(--t-sm); } .suave { color: var(--tinta-40); } .so-desktop { display: none; } /* --------------------------------------------------------------- COBERTURA DE ENTREGA --------------------------------------------------------------- */ .cobertura-busca { display: flex; align-items: center; gap: var(--e-3); border: 2px solid var(--linha-forte); border-radius: var(--r-full); padding: var(--e-3) var(--e-5); margin-bottom: var(--e-7); background: var(--sup-0); color: var(--tinta-40); max-width: var(--largura-fina); } .cobertura-busca__campo { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; font-size: var(--t-md); color: var(--tinta); } .cobertura-busca__campo::placeholder { color: var(--tinta-40); } .cobertura-vazio { color: var(--tinta-60); font-style: italic; margin-bottom: var(--e-6); } .cobertura-regiao { border: 2px solid var(--linha); border-radius: var(--r-lg); padding: var(--e-6); margin-bottom: var(--e-7); background: var(--sup-0); } .cobertura-regiao__cabeca h2 { font-family: var(--f-titulo); font-size: var(--t-xl); margin: 0 0 var(--e-2); } .cobertura-regiao__telefone { display: inline-flex; align-items: center; gap: var(--e-2); margin-top: var(--e-3); font-weight: 700; color: var(--navy); } .cobertura-regiao__telefone:hover { color: var(--dourado-600); } .cobertura-regiao__nota { font-size: var(--t-sm); color: var(--tinta-60); margin-top: var(--e-5); } .cobertura-freq { margin-top: var(--e-6); } .cobertura-freq__titulo { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: var(--ls-rotulo); color: var(--dourado-600); font-weight: 700; margin: 0 0 var(--e-3); } .cobertura-cidades { display: flex; flex-wrap: wrap; gap: var(--e-2); } .cobertura-cidade { display: inline-flex; align-items: center; gap: var(--e-1); border: 1px solid var(--linha); border-radius: var(--r-full); padding: var(--e-1) var(--e-3); font-size: var(--t-sm); background: var(--massa-50); color: var(--tinta-80); } .cobertura-cidade .ic { color: var(--tinta-40); } .cobertura-observacao { max-width: var(--largura-fina); } @media (min-width: 900px) { .so-desktop { display: block; } .so-mobile { display: none; } }