/* ========================================================= Z.I.P. — Zona de Ideias Práticas Estilo: loja alegre, colorida e divertida. Base: contorno grosso + sombra dura (cara de adesivo). ========================================================= */ :root{ /* Marca */ --laranja: #F2740B; --laranja-esc: #D45F00; --grafite: #33383F; --grafite-esc: #23272C; /* Fundos — quase branco, de propósito. A cor da loja vem dos produtos e das categorias, não do fundo. */ --creme: #FCF8F2; --papel: #FFFFFF; --creme-esc: #F2EDE5; /* faixa suave, pra separar seções sem gritar */ /* Texto — as seções de cor forte invertem estes tokens */ --texto: #33383F; --texto-2: #5A6169; --texto-3: #7A828B; --texto-4: #9AA0A8; /* Apoio */ --roxo: #7C4DFF; --verde: #12B886; --azul: #1FA9F6; --rosa: #F2529B; --amarelo:#FFC53D; /* Sistema */ --borda: 3px solid var(--grafite); --raio: 20px; --raio-g: 28px; --sombra: 5px 5px 0 var(--grafite); --sombra-alta: 8px 8px 0 var(--grafite); --sombra-suave: 0 10px 30px rgba(51,56,63,.12); --transicao: .18s cubic-bezier(.34,1.56,.64,1); --largura: 1200px; } *,*::before,*::after{ box-sizing:border-box; } /* o atributo hidden sempre vence o display do componente */ [hidden]{ display:none !important; } html{ scroll-behavior:smooth; } /* ---------- Temas de fundo (troque em includes/config.php) ---------- */ .tema-menta { --creme:#F5FBF8; --creme-esc:#E4F2EC; } .tema-lavanda{ --creme:#F8F6FD; --creme-esc:#EBE6F7; } /* ---------- A loja veste a cor da categoria ---------- Ativado por .tem-cat no , com --cat-atual vindo do PHP. Só o clima muda: laranja da marca segue nos botões, pra pessoa não perder a referência de onde clicar. */ .tem-cat{ --creme: color-mix(in srgb, var(--cat-atual) 6%, #FCF8F2); --creme-esc: color-mix(in srgb, var(--cat-atual) 14%, #FCF8F2); } /* barra rolante e menu assumem o tom, o resto fica limpo */ .tem-cat .marquee{ background:color-mix(in srgb, var(--cat-atual) 78%, #23272C); } .tem-cat .menu{ background:color-mix(in srgb, var(--cat-atual) 12%, #fff); } /* miniatura sem foto acompanha a categoria da página */ .tem-cat .thumb--gerado{ --cat:var(--cat-atual); } body{ margin:0; font-family:'Nunito',system-ui,sans-serif; font-weight:600; color:var(--grafite); background-color:var(--creme); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Fredoka',sans-serif; font-weight:700; line-height:1.1; margin:0 0 .4em; letter-spacing:-.01em; } p{ line-height:1.65; margin:0 0 1em; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } button{ font-family:inherit; cursor:pointer; } .container{ width:min(100% - 2.5rem, var(--largura)); margin-inline:auto; } /* ---------- Botões ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:'Fredoka',sans-serif; font-weight:600; font-size:1rem; padding:.85rem 1.6rem; background:var(--laranja); color:#fff; border:var(--borda); border-radius:999px; box-shadow:var(--sombra); transition:transform var(--transicao), box-shadow var(--transicao), background .2s; } .btn:hover{ transform:translate(-2px,-3px); box-shadow:var(--sombra-alta); background:var(--laranja-esc); } .btn:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--grafite); } .btn--full{ width:100%; } .btn--verde{ background:var(--verde); } .btn--verde:hover{ background:#0CA678; } .btn--branco{ background:#fff; color:var(--grafite); } .btn--branco:hover{ background:var(--amarelo); } .btn--grande{ font-size:1.15rem; padding:1.05rem 2.2rem; } .btn--fantasma{ background:transparent; color:var(--grafite); box-shadow:none; } .btn--fantasma:hover{ background:#fff; box-shadow:var(--sombra); } /* ========================================================= BARRA ROLANTE ========================================================= */ .marquee{ background:var(--grafite); color:#fff; overflow:hidden; font-size:.82rem; font-weight:700; padding:.5rem 0; border-bottom:3px solid var(--grafite-esc); } .marquee__trilha{ display:flex; gap:2.5rem; width:max-content; animation:correr 34s linear infinite; white-space:nowrap; } .marquee__trilha span{ display:inline-flex; align-items:center; gap:.4rem; } @keyframes correr{ to{ transform:translateX(-50%); } } .marquee:hover .marquee__trilha{ animation-play-state:paused; } /* ========================================================= CABEÇALHO ========================================================= */ .topo{ position:sticky; top:0; z-index:60; background:var(--papel); border-bottom:3px solid var(--grafite); box-shadow:0 4px 0 rgba(51,56,63,.08); } .topo__grid{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding:.8rem 0; } /* o hambúrguer saiu: a faixa de categorias virou a navegação única */ .logo img{ height:52px; width:auto; } .logo__texto{ font-family:'Fredoka',sans-serif; font-size:1.9rem; font-weight:700; color:var(--grafite); } .busca{ display:flex; max-width:520px; width:100%; justify-self:center; } .busca input{ flex:1; font-family:inherit; font-weight:600; font-size:.95rem; padding:.7rem 1.1rem; border:var(--borda); border-right:0; border-radius:999px 0 0 999px; background:var(--creme); color:var(--grafite); outline:none; min-width:0; } .busca input::placeholder{ color:var(--texto-4); font-weight:600; } .busca input:focus{ background:#fff; box-shadow:inset 0 0 0 2px var(--laranja); } .busca button{ border:var(--borda); border-radius:0 999px 999px 0; background:var(--laranja); color:#fff; padding:0 1.2rem; font-size:1.05rem; transition:background .2s; } .busca button:hover{ background:var(--laranja-esc); } .topo__acoes{ display:flex; align-items:center; gap:.6rem; } .topo__insta{ font-size:1.3rem; width:46px; height:46px; display:grid; place-items:center; border:var(--borda); border-radius:50%; background:#fff; transition:transform var(--transicao), background .2s; } .topo__insta:hover{ transform:rotate(-8deg) scale(1.06); background:var(--creme-esc); } .favoritos-btn{ position:relative; display:grid; place-items:center; width:46px; height:46px; font-size:1.25rem; color:var(--rosa); border:var(--borda); border-radius:50%; background:#fff; transition:transform var(--transicao), background .2s; } .favoritos-btn:hover{ transform:rotate(8deg) scale(1.06); background:#FFF0F6; } .favoritos-btn__n{ position:absolute; top:-6px; right:-6px; display:grid; place-items:center; min-width:22px; height:22px; padding:0 .3rem; background:var(--rosa); color:#fff; border:2px solid var(--grafite); border-radius:999px; font-family:'Fredoka',sans-serif; font-size:.72rem; } .carrinho-btn{ position:relative; font-size:1.15rem; font-weight:700; padding:.6rem 1.1rem; border:var(--borda); border-radius:999px; background:var(--amarelo); box-shadow:3px 3px 0 var(--grafite); transition:transform var(--transicao); } .carrinho-btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--grafite); } .carrinho-btn__n{ display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 .35rem; margin-left:.25rem; background:var(--laranja); color:#fff; border-radius:999px; font-size:.8rem; font-family:'Fredoka',sans-serif; } .carrinho-btn.pulou{ animation:pulo .5s; } @keyframes pulo{ 0%,100%{transform:scale(1)} 35%{transform:scale(1.18) rotate(-6deg)} } /* ---------- Menu de categorias ---------- */ .menu{ background:var(--creme-esc); border-top:2px dashed rgba(51,56,63,.25); } .menu__lista{ display:flex; gap:.3rem; overflow-x:auto; padding:.45rem 0; scrollbar-width:none; } .menu__lista::-webkit-scrollbar{ display:none; } .menu__item{ white-space:nowrap; font-family:'Fredoka',sans-serif; font-size:.94rem; padding:.45rem .95rem; border-radius:999px; border:2px solid transparent; transition:all .18s; } .menu__item:hover{ background:#fff; border-color:var(--cat,var(--grafite)); transform:translateY(-2px); } /* Início e Quem somos não têm cor de categoria, então caem no grafite */ .menu__item.is-ativo{ background:var(--cat, var(--grafite)); color:var(--cat-texto, #fff); border-color:var(--grafite); } /* ========================================================= HERO ========================================================= */ .hero{ position:relative; overflow:hidden; padding:3.5rem 0 3rem; } /* uma única mancha suave, só pra o topo não ficar chapado */ .hero::before{ content:''; position:absolute; top:-30%; right:-8%; width:640px; height:640px; border-radius:50%; background:rgba(242,116,11,.07); pointer-events:none; } .hero > *{ position:relative; z-index:1; } .hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; } .hero__selo{ display:inline-flex; align-items:center; gap:.45rem; background:var(--amarelo); border:var(--borda); border-radius:999px; padding:.4rem 1rem; font-size:.85rem; font-weight:800; box-shadow:3px 3px 0 var(--grafite); transform:rotate(-2deg); margin-bottom:1.1rem; } .hero h1{ font-size:clamp(2.3rem,5vw,3.9rem); margin-bottom:.5rem; } .hero h1 .grifo{ color:var(--laranja); background:linear-gradient(transparent 62%, rgba(255,197,61,.75) 62%); padding:0 .1em; } .hero__sub{ font-size:1.15rem; max-width:46ch; color:var(--texto-2); } .hero__ctas{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; } .hero__mini{ display:flex; gap:1.4rem; margin-top:1.8rem; flex-wrap:wrap; font-size:.9rem; } .hero__mini span{ display:flex; align-items:center; gap:.4rem; } /* Palco ilustrado */ .hero__palco{ position:relative; display:grid; place-items:center; min-height:340px; } .hero__svg, .hero__mockup{ width:100%; max-width:520px; height:auto; } .hero__mockup{ filter:drop-shadow(0 14px 24px rgba(51,56,63,.22)); } /* o bico vai e volta, como numa impressão de verdade */ .hero__carro{ animation:vaivem 3.8s ease-in-out infinite alternate; } @keyframes vaivem{ from{ transform:translateX(-18px); } to{ transform:translateX(18px); } } .hero__bobina{ transform-box:view-box; transform-origin:300px 52px; animation:gira 14s linear infinite; } @keyframes gira{ to{ transform:rotate(360deg); } } .hero__helice{ transform-box:view-box; transform-origin:265px 240px; animation:gira 1.1s linear infinite; } .hero__gota{ animation:pinga 1.6s ease-in infinite; } @keyframes pinga{ 0%,70%{ transform:translateY(0); opacity:0; } 80% { opacity:1; } 100% { transform:translateY(26px); opacity:0; } } .hero__peca{ animation:flutua 5s ease-in-out infinite; } .hero__peca--2{ animation-delay:-1.6s; } .hero__peca--3{ animation-delay:-3.1s; } @keyframes flutua{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } } .hero__brilho{ animation:pisca 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; } .hero__brilho--2{ animation-delay:-1.3s; } @keyframes pisca{ 0%,100%{ transform:scale(.75); opacity:.55; } 50%{ transform:scale(1.1); opacity:1; } } .hero__sticker{ position:absolute; background:#fff; border:var(--borda); border-radius:14px; padding:.5rem .85rem; font-size:.82rem; font-weight:800; box-shadow:4px 4px 0 var(--grafite); white-space:nowrap; } .hero__sticker--1{ top:4%; left:-2%; transform:rotate(-8deg); background:var(--verde); color:#fff; } .hero__sticker--2{ top:38%; right:-4%; transform:rotate(7deg); background:var(--roxo); color:#fff; } /* centralizado embaixo, em cima da sombra do chão — não cobre as peças */ .hero__sticker--3{ bottom:1%; left:50%; transform:translateX(-50%) rotate(3deg); background:var(--rosa); color:#fff; } /* ========================================================= SEÇÕES ========================================================= */ .secao{ padding:3.2rem 0; } /* ---------- Faixa suave ---------- A única separação de seção que sobrou. Sem listra, sem borda grossa: só um tom de fundo levemente diferente pra dar respiro entre um bloco e outro. A cor da página vem dos produtos. */ .secao--suave{ background:var(--creme-esc); } .secao__cabeca{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.8rem; flex-wrap:wrap; } .secao__cabeca h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin:0; } .secao__cabeca p{ margin:.35rem 0 0; color:var(--texto-2); } .secao__link{ font-family:'Fredoka',sans-serif; border-bottom:3px solid var(--laranja); padding-bottom:2px; white-space:nowrap; } .secao__link:hover{ color:var(--laranja); } /* ---------- Grade de categorias ---------- */ .cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1.2rem; } .cat{ position:relative; background:#fff; border:var(--borda); border-radius:var(--raio-g); padding:1.5rem 1.3rem; box-shadow:var(--sombra); overflow:hidden; transition:transform var(--transicao), box-shadow var(--transicao); } .cat::after{ content:''; position:absolute; inset:auto -30% -55% auto; width:150px; height:150px; border-radius:50%; background:var(--cat); opacity:.16; } .cat:hover{ transform:translate(-3px,-5px) rotate(-1.2deg); box-shadow:var(--sombra-alta); } .cat__emoji{ font-size:2.6rem; display:block; margin-bottom:.5rem; transition:transform var(--transicao); } .cat:hover .cat__emoji{ transform:scale(1.18) rotate(-10deg); } .cat h3{ font-size:1.25rem; margin-bottom:.35rem; } .cat p{ font-size:.88rem; color:var(--texto-2); margin:0 0 .9rem; position:relative; z-index:1; } .cat__ver{ font-family:'Fredoka',sans-serif; font-size:.9rem; position:relative; z-index:1; color:color-mix(in srgb, var(--cat) 55%, #1A1D22); } .cat__n{ position:absolute; top:1rem; right:1rem; font-size:.72rem; font-weight:800; background:var(--cat); color:var(--cat-texto); border-radius:999px; padding:.2rem .6rem; } /* ---------- Grade de produtos ---------- */ .grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:1.4rem; } .card{ position:relative; display:flex; flex-direction:column; gap:.7rem; background:#fff; border:var(--borda); border-radius:var(--raio); padding:.7rem; box-shadow:var(--sombra); transition:transform var(--transicao), box-shadow var(--transicao); } .card:hover{ transform:translate(-3px,-5px); box-shadow:var(--sombra-alta); } .card__link{ display:flex; flex-direction:column; gap:.65rem; flex:1; } .card__corpo{ display:flex; flex-direction:column; gap:.3rem; flex:1; } /* a cor pura da categoria some no branco (âmbar, principalmente): escurecemos mantendo o matiz, o que garante ~4.8:1 em qualquer uma */ .card__cat{ font-size:.74rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:color-mix(in srgb, var(--cat) 55%, #1A1D22); } .card__nome{ font-size:1.02rem; line-height:1.25; margin:0; } .card__preco{ margin:auto 0 0; display:flex; flex-direction:column; } .card__preco s{ color:var(--texto-4); font-size:.82rem; } .card__preco strong{ font-family:'Fredoka',sans-serif; font-size:1.35rem; color:var(--laranja); } .card__preco small{ font-size:.75rem; color:var(--texto-3); font-weight:600; } .card__preco--orc strong{ font-size:1.1rem; color:var(--verde); } /* Selos empilhados no canto superior esquerdo */ .selos{ position:absolute; top:-10px; left:-8px; z-index:3; display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; pointer-events:none; } .selo{ font-size:.7rem; font-weight:800; letter-spacing:.03em; padding:.28rem .6rem; border:2px solid var(--grafite); border-radius:8px; background:var(--amarelo); box-shadow:2px 2px 0 var(--grafite); transform:rotate(-7deg); } .selo--promo{ background:var(--rosa); color:#fff; } .selo--off{ background:var(--verde); color:#fff; transform:rotate(-3deg); } .selo--esgotado{ background:var(--grafite); color:#fff; } /* peça esgotada: continua visível (ela ainda atrai), mas sem parecer comprável — e o botão vira "encomendar" */ .card.is-esgotado .thumb{ filter:grayscale(.8); opacity:.65; } .card.is-esgotado .card__preco strong{ color:var(--texto-3); } /* Coração de favoritar */ .fav{ position:absolute; top:-10px; right:-8px; z-index:4; width:40px; height:40px; display:grid; place-items:center; background:#fff; border:var(--borda); border-radius:50%; box-shadow:3px 3px 0 var(--grafite); font-size:1.2rem; line-height:1; color:#C9CFD6; transition:transform var(--transicao), color .2s, background .2s; } .fav:hover{ transform:scale(1.12) rotate(-8deg); color:var(--rosa); background:#FFF0F6; } .fav.is-fav{ background:var(--rosa); color:#fff; } .fav.is-fav .fav__ico{ animation:bateu .45s; } @keyframes bateu{ 0%,100%{ transform:scale(1); } 40%{ transform:scale(1.45); } } /* Coração maior, na página do produto */ .fav--grande{ position:static; width:auto; height:auto; border-radius:999px; padding:.85rem 1.5rem; gap:.5rem; display:inline-flex; align-items:center; font-family:'Fredoka',sans-serif; font-size:1rem; color:var(--grafite); } .fav--grande:hover{ transform:translate(-2px,-3px); box-shadow:var(--sombra-alta); } .fav--grande.is-fav{ background:var(--rosa); color:#fff; } /* Card de encomenda — fecha toda grade de produtos */ .card--encomenda{ justify-content:center; text-align:center; gap:.5rem; padding:1.6rem 1.2rem; border-style:dashed; border-color:var(--cat); background:color-mix(in srgb, var(--cat) 8%, #fff); box-shadow:none; } .card--encomenda:hover{ transform:translate(-3px,-5px); box-shadow:5px 5px 0 color-mix(in srgb, var(--cat) 55%, #1A1D22); } .card--encomenda__emoji{ font-size:2.4rem; line-height:1; } .card--encomenda h3{ font-size:1.1rem; margin:0; } .card--encomenda p{ font-size:.88rem; color:var(--texto-2); margin:0; } .card--encomenda small{ font-size:.75rem; font-weight:800; margin-bottom:.4rem; color:color-mix(in srgb, var(--cat) 55%, #1A1D22); } /* Miniatura */ .thumb{ position:relative; aspect-ratio:1; border:2px solid var(--grafite); border-radius:16px; overflow:hidden; background:var(--creme); } .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s, opacity .35s; } .card:hover .thumb img{ transform:scale(1.07); } /* segunda foto aparece no hover do card */ .thumb__hover{ position:absolute; inset:0; opacity:0; } .card:hover .thumb__hover{ opacity:1; } .thumb--gerado{ display:grid; place-items:center; background: linear-gradient(160deg, color-mix(in srgb, var(--cat) 22%, #fff), color-mix(in srgb, var(--cat) 8%, #fff)); } .thumb__grade{ position:absolute; inset:0; opacity:.4; background:repeating-linear-gradient(0deg, rgba(51,56,63,.09) 0 1px, transparent 1px 7px); } .thumb__emoji{ font-size:3.6rem; filter:drop-shadow(0 6px 0 rgba(51,56,63,.14)); transition:transform var(--transicao); z-index:1; } .card:hover .thumb__emoji{ transform:scale(1.15) rotate(-8deg); } .thumb__marca{ position:absolute; bottom:.5rem; right:.65rem; z-index:1; font-family:'Fredoka',sans-serif; font-size:.7rem; letter-spacing:.1em; color:var(--grafite); opacity:.35; } /* ---------- Carrossel de promoções (topo da home) ---------- */ .promo{ position:relative; overflow:hidden; border-bottom:3px solid var(--grafite); background:var(--creme-esc); } .promo__palco{ position:relative; display:grid; } /* todos os slides na mesma célula do grid: o mais alto define a altura e não tem "pulo" ao trocar */ .promo__slide{ grid-area:1/1; position:relative; display:flex; align-items:center; min-height:300px; background:var(--promo); color:var(--promo-texto); opacity:0; visibility:hidden; transition:opacity .5s ease; } .promo__slide.is-ativo{ opacity:1; visibility:visible; } .promo__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .promo__conteudo{ position:relative; z-index:1; width:min(100% - 2.5rem, var(--largura)); margin-inline:auto; padding:2.2rem 0; } /* Vidro fosco nos tons da casa: creme translúcido, texto grafite e botão laranja. O branco sólido com sombra dura ficava pesado e competia com a foto; assim a imagem respira por trás e o cartão continua sendo do mesmo mundo visual do resto do site. */ .promo__cartao{ position:relative; display:inline-block; max-width:min(27rem, 100%); padding:1.25rem 1.4rem; background:color-mix(in srgb, var(--creme) 88%, transparent); -webkit-backdrop-filter:blur(12px) saturate(1.15); backdrop-filter:blur(12px) saturate(1.15); color:var(--grafite); border:2px solid color-mix(in srgb, var(--grafite) 22%, transparent); border-radius:var(--raio-g); box-shadow:0 12px 30px rgba(20,22,26,.28); } /* navegador sem suporte a desfoque: fecha o fundo pra não perder leitura */ @supports not (backdrop-filter: blur(2px)){ .promo__cartao{ background:color-mix(in srgb, var(--creme) 96%, transparent); } } .promo__cartao h2{ font-size:clamp(1.25rem,2.3vw,1.75rem); margin:0 0 .3em; } .promo__cartao p{ font-size:.95rem; color:var(--texto-2); margin:0 0 1rem; } .promo__cartao .btn{ font-size:1rem; padding:.75rem 1.5rem; } /* selo inclinado, mesma linguagem dos cards de produto */ .promo__selo{ position:absolute; top:-13px; left:-8px; font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:.35rem .8rem; white-space:nowrap; background:var(--promo); color:var(--promo-texto); border:2px solid var(--grafite); border-radius:9px; box-shadow:2px 2px 0 var(--grafite); transform:rotate(-6deg); } /* setas e bolinhas */ .promo__seta{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; display:grid; place-items:center; font-size:1.7rem; line-height:1; padding-bottom:4px; background:#fff; color:var(--grafite); border:var(--borda); border-radius:50%; box-shadow:3px 3px 0 var(--grafite); transition:transform var(--transicao); } .promo__seta:hover{ transform:translateY(-50%) scale(1.08); } .promo__seta--ant{ left:1rem; } .promo__seta--prox{ right:1rem; } .promo__bolinhas{ position:absolute; left:50%; bottom:.9rem; transform:translateX(-50%); z-index:3; display:flex; gap:.45rem; } .promo__bolinha{ width:12px; height:12px; padding:0; border-radius:50%; background:rgba(255,255,255,.55); border:2px solid var(--grafite); transition:width .25s, background .25s; } .promo__bolinha.is-ativo{ width:30px; border-radius:999px; background:#fff; } .promo__pausa{ position:absolute; right:1rem; bottom:.9rem; z-index:3; width:34px; height:34px; font-size:.85rem; background:#fff; border:2px solid var(--grafite); border-radius:50%; box-shadow:2px 2px 0 var(--grafite); } @media (max-width:760px){ /* No celular a faixa empurrava a headline pra fora da tela — aquele trabalho todo de deixar o texto visível de primeira ia embora. Ligue em Painel → Banners se um dia quiser ela aqui também. */ .promo--so-desktop{ display:none; } /* No celular o cartão ocupava o banner inteiro e a foto sumia. Agora ele encosta embaixo, compacto, e a imagem aparece acima. */ .promo__slide{ min-height:250px; align-items:flex-end; } .promo__conteudo{ padding:0 0 1rem; } .promo__cartao{ display:block; max-width:none; padding:.9rem 1rem; border-radius:var(--raio); } .promo__cartao h2{ font-size:1.15rem; margin-bottom:.55rem; } /* Numa tela estreita o texto de apoio é o que fazia o cartão engolir o banner inteiro. Selo + título + botão já dão o recado. */ .promo__cartao p{ display:none; } .promo__cartao .btn{ width:100%; font-size:.95rem; padding:.7rem 1rem; } .promo__selo{ top:-11px; left:-4px; font-size:.62rem; } .promo__bolinhas{ bottom:auto; top:.8rem; } .promo__seta{ width:38px; height:38px; font-size:1.4rem; } .promo__seta--ant{ left:.5rem; } .promo__seta--prox{ right:.5rem; } .promo__pausa{ display:none; } /* no celular a pausa é o toque */ } /* Sem animação: a troca é instantânea (o giro automático já fica desligado pelo JavaScript), mas as setas continuam funcionando. */ @media (prefers-reduced-motion:reduce){ .promo__slide{ transition:none; } } /* ---------- Vitrine de coleções (home) ---------- */ .vitrine{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:1.4rem; } .vitrine__card{ display:flex; flex-direction:column; gap:1rem; background:#fff; border:var(--borda); border-radius:var(--raio-g); box-shadow:var(--sombra); padding:1.4rem; border-top:8px solid var(--cat); transition:transform var(--transicao), box-shadow var(--transicao); } .vitrine__card:hover{ transform:translate(-3px,-5px); box-shadow:var(--sombra-alta); } .vitrine__etiqueta{ display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb, var(--cat) 55%, #1A1D22); } .vitrine__topo h3{ font-size:1.5rem; margin:.15rem 0 .3rem; } .vitrine__topo p{ font-size:.9rem; color:var(--texto-2); margin:0; } /* tira de peças: mostra a série inteira de relance */ .vitrine__pecas{ display:flex; flex-wrap:wrap; gap:.45rem; } .vitrine__peca{ width:60px; height:60px; display:grid; place-items:center; overflow:hidden; background:color-mix(in srgb, var(--cat) 10%, #fff); border:2px solid var(--grafite); border-radius:12px; font-size:1.6rem; transition:transform var(--transicao); } .vitrine__peca img{ width:100%; height:100%; object-fit:cover; } .vitrine__peca:hover{ transform:translateY(-3px) scale(1.06); z-index:1; } .vitrine__base{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:auto; padding-top:1rem; border-top:2px dashed rgba(51,56,63,.18); } .vitrine__preco{ display:flex; flex-direction:column; line-height:1.2; } .vitrine__preco small{ font-size:.78rem; color:var(--texto-3); } .vitrine__preco strong{ font-family:'Fredoka',sans-serif; font-size:1.5rem; color:var(--laranja); } .vitrine__ver{ font-size:.85rem; color:var(--texto-2); text-decoration:underline; } .vitrine__ver:hover{ color:var(--laranja); } @media (max-width:760px){ .vitrine{ grid-template-columns:1fr; } .vitrine__peca{ width:52px; height:52px; font-size:1.35rem; } .vitrine__base{ justify-content:space-between; } } /* ---------- Capa da categoria ---------- */ .capa-cat{ position:relative; overflow:hidden; background:var(--cat); color:var(--cat-texto); border-bottom:3px solid var(--grafite); padding:2.4rem 0 2.2rem; margin-bottom:.4rem; } .capa-cat::before{ content:''; position:absolute; inset:-40% -5% auto auto; width:420px; height:420px; border-radius:50%; background:rgba(255,255,255,.13); pointer-events:none; } .capa-cat__in{ position:relative; z-index:1; display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; } .capa-cat__emoji{ font-size:2.8rem; width:80px; height:80px; display:grid; place-items:center; background:rgba(255,255,255,.22); border:var(--borda); border-radius:22px; box-shadow:var(--sombra); flex-shrink:0; } .capa-cat h1{ font-size:clamp(1.8rem,4vw,2.8rem); margin:0 0 .2em; } .capa-cat p{ margin:0; max-width:56ch; font-size:1.02rem; opacity:.92; } .capa-cat__n{ display:inline-block; margin-top:.5rem; font-size:.8rem; font-weight:800; background:var(--grafite); color:#fff; border-radius:999px; padding:.25rem .8rem; } /* ---------- Coleção por série ---------- */ .colecao{ margin-bottom:2.6rem; } .serie{ background:#fff; border:var(--borda); border-radius:var(--raio-g); box-shadow:var(--sombra); padding:1.3rem 1.4rem; margin-bottom:1.2rem; } .serie__topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .serie__etiqueta{ display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb, var(--cat) 55%, #1A1D22); } .serie h3{ font-size:1.5rem; margin:.1rem 0 0; } .serie__contagem{ font-family:'Fredoka',sans-serif; font-size:1rem; white-space:nowrap; background:var(--cat); color:var(--cat-texto); border:2px solid var(--grafite); border-radius:999px; padding:.3rem .9rem; } .serie__recado{ font-size:.92rem; color:var(--texto-2); margin:.35rem 0 0; max-width:62ch; } .serie__acoes{ margin-top:1rem; display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; } .serie__acoes small{ font-size:.82rem; color:var(--texto-3); } /* dentro da seção da série, o selo "SÉRIE BRASIL" é redundante — mas ele continua aparecendo na home, na busca e nos favoritos, onde a peça aparece solta e o contexto se perde */ .colecao .selos{ display:none; } /* ---------- Pílulas de categoria ---------- Removidas: repetiam a faixa de categorias do topo, que agora está sempre visível em qualquer tamanho de tela. Os estilos ficam aqui caso você queira reaproveitar as pílulas em outro lugar. */ .pilulas{ display:none; } .pilula{ font-family:'Fredoka',sans-serif; font-size:.92rem; padding:.5rem 1.1rem; background:#fff; border:2px solid var(--grafite); border-radius:999px; box-shadow:3px 3px 0 var(--grafite); transition:transform var(--transicao), background .2s, color .2s; } /* a cor do texto vem do PHP conforme a luminância da categoria, então categoria clara (âmbar) ganha texto escuro automaticamente */ .pilula:hover{ transform:translate(-2px,-3px); background:var(--cat); color:var(--cat-texto); } .pilula.is-ativo{ background:var(--cat); color:var(--cat-texto); } /* ========================================================= FAIXA "COMO FUNCIONA" ========================================================= */ .passos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.4rem; } .passo{ background:#fff; border:var(--borda); border-radius:var(--raio-g); padding:1.6rem 1.3rem; box-shadow:var(--sombra); position:relative; } .passo__n{ position:absolute; top:-18px; left:-12px; width:42px; height:42px; display:grid; place-items:center; font-family:'Fredoka',sans-serif; font-size:1.2rem; background:var(--laranja); color:#fff; border:var(--borda); border-radius:50%; box-shadow:3px 3px 0 var(--grafite); } .passo span.passo__ico{ font-size:2.2rem; display:block; margin-bottom:.5rem; } .passo h3{ font-size:1.15rem; } .passo p{ font-size:.9rem; color:var(--texto-2); margin:0; } /* ========================================================= BANNER PERSONALIZADO ========================================================= */ .banner{ position:relative; overflow:hidden; background:var(--grafite); color:#fff; border:var(--borda); border-radius:var(--raio-g); padding:2.6rem 2.2rem; box-shadow:var(--sombra-alta); display:grid; grid-template-columns:1.4fr auto; gap:2rem; align-items:center; } /* um brilho suave no canto, no lugar das listras */ .banner::before{ content:''; position:absolute; inset:auto -10% -60% auto; width:340px; height:340px; background:radial-gradient(circle, rgba(242,116,11,.5), transparent 68%); pointer-events:none; } .banner > *{ position:relative; z-index:1; } .banner h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); } .banner p{ color:#D7DCE2; max-width:52ch; margin-bottom:0; } .banner__emoji{ font-size:5rem; animation:flutua 5s ease-in-out infinite; } /* ========================================================= DEPOIMENTOS ========================================================= */ .depos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.4rem; } .depo{ background:#fff; border:var(--borda); border-radius:var(--raio); padding:1.4rem; box-shadow:var(--sombra); position:relative; } .depo:nth-child(2){ transform:rotate(-1.2deg); } .depo:nth-child(3){ transform:rotate(1deg); } .depo__estrelas{ color:var(--amarelo); font-size:1rem; letter-spacing:.1em; margin-bottom:.5rem; } .depo p{ font-size:.94rem; margin-bottom:.9rem; } .depo__quem{ display:flex; align-items:center; gap:.6rem; font-size:.85rem; } .depo__ava{ width:38px; height:38px; display:grid; place-items:center; font-size:1.2rem; background:var(--creme-esc); border:2px solid var(--grafite); border-radius:50%; } /* ========================================================= PÁGINA DE PRODUTO ========================================================= */ .migalhas{ font-size:.85rem; color:var(--texto-3); padding:1.2rem 0 0; } .migalhas a:hover{ color:var(--laranja); } .produto{ display:grid; grid-template-columns:1fr 1fr; gap:2.8rem; padding:1.6rem 0 3rem; align-items:start; } .produto__foto .thumb{ border:var(--borda); border-radius:var(--raio-g); box-shadow:var(--sombra-alta); } .produto__foto .thumb__emoji{ font-size:8rem; } /* Galeria de miniaturas */ .galeria{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.9rem; } .galeria__mini{ width:76px; height:76px; padding:0; overflow:hidden; border:2px solid var(--grafite); border-radius:14px; background:var(--creme); box-shadow:3px 3px 0 var(--grafite); transition:transform var(--transicao), box-shadow var(--transicao); } .galeria__mini img{ width:100%; height:100%; object-fit:cover; } .galeria__mini:hover{ transform:translate(-2px,-3px); box-shadow:5px 5px 0 var(--grafite); } .galeria__mini.is-ativo{ box-shadow:0 0 0 3px var(--laranja), 3px 3px 0 var(--grafite); } .produto__tag{ display:inline-block; background:var(--amarelo); border:var(--borda); border-radius:999px; padding:.3rem .9rem; font-size:.78rem; font-weight:800; box-shadow:3px 3px 0 var(--grafite); transform:rotate(-2deg); margin-bottom:.8rem; } .produto h1{ font-size:clamp(1.8rem,3.6vw,2.6rem); } .produto__desc{ font-size:1.05rem; color:var(--texto-2); } .produto__precos{ background:#fff; border:var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); padding:1.3rem; margin:1.4rem 0; } .produto__precos s{ color:var(--texto-4); } .produto__valor{ font-family:'Fredoka',sans-serif; font-size:2.4rem; color:var(--laranja); line-height:1; display:block; margin:.2rem 0; } .produto__parcela{ font-size:.9rem; color:var(--texto-2); } .produto__pix{ display:inline-block; margin-top:.6rem; background:var(--verde); color:#fff; border-radius:8px; padding:.2rem .6rem; font-size:.82rem; font-weight:800; } .opcoes{ display:grid; gap:1rem; margin-bottom:1.4rem; } .opcoes label{ font-family:'Fredoka',sans-serif; font-size:.95rem; display:block; margin-bottom:.4rem; } .cores{ display:flex; flex-wrap:wrap; gap:.5rem; } .cor{ width:38px; height:38px; border:var(--borda); border-radius:50%; cursor:pointer; transition:transform var(--transicao); position:relative; } .cor:hover{ transform:scale(1.15); } .cor.is-ativo{ box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--grafite); } /* cores fixas: informam, não são clicáveis */ .cores--fixas{ align-items:center; } .cor--fixa{ cursor:default; } .cor--fixa:hover{ transform:none; } .cores__nomes{ font-family:'Fredoka',sans-serif; font-size:1rem; margin-left:.2rem; } .cores__nota{ display:block; margin-top:.5rem; font-size:.82rem; color:var(--texto-3); line-height:1.5; } .cores__nota a{ text-decoration:underline; } .qtd{ display:inline-flex; align-items:center; border:var(--borda); border-radius:999px; background:#fff; overflow:hidden; } .qtd button{ background:none; border:0; font-size:1.2rem; padding:.5rem 1rem; font-weight:800; } .qtd button:hover{ background:var(--creme-esc); } .qtd input{ width:48px; text-align:center; border:0; font-family:'Fredoka',sans-serif; font-size:1.1rem; background:none; outline:none; } .produto__acoes{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.6rem; } /* convite pra personalizar a peça que a pessoa está olhando */ .personalizar{ display:flex; gap:.75rem; align-items:flex-start; background:#fff; border:2px dashed var(--grafite); border-radius:var(--raio); padding:.9rem 1.1rem; margin-bottom:1.4rem; font-size:.88rem; line-height:1.5; color:var(--texto-2); transition:transform var(--transicao), box-shadow var(--transicao), background .2s; } .personalizar:hover{ transform:translate(-2px,-3px); box-shadow:var(--sombra); background:var(--creme); } .personalizar strong{ display:block; font-family:'Fredoka',sans-serif; font-size:.98rem; color:var(--grafite); } .personalizar__ico{ font-size:1.3rem; line-height:1; } .specs{ list-style:none; padding:0; margin:0 0 1.4rem; display:grid; gap:.5rem; } .specs li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.93rem; } .specs li::before{ content:'✔'; color:var(--verde); font-weight:800; } .aviso{ background:var(--creme-esc); border:2px dashed var(--grafite); border-radius:var(--raio); padding:1rem 1.2rem; font-size:.9rem; } /* ========================================================= CARRINHO (PÁGINA E GAVETA) ========================================================= */ .gaveta-fundo{ position:fixed; inset:0; background:rgba(35,39,44,.55); z-index:80; animation:fade .2s; } @keyframes fade{ from{opacity:0} } .gaveta{ position:fixed; top:0; right:0; bottom:0; width:min(400px,92vw); z-index:90; background:var(--creme); border-left:var(--borda); display:flex; flex-direction:column; animation:entrar .28s cubic-bezier(.34,1.3,.64,1); } @keyframes entrar{ from{ transform:translateX(100%); } } .gaveta__topo{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; border-bottom:var(--borda); background:#fff; } .gaveta__topo h3{ margin:0; font-size:1.2rem; } .gaveta__x{ background:none; border:0; font-size:1.3rem; padding:.2rem .4rem; border-radius:8px; } .gaveta__x:hover{ background:var(--creme-esc); } .gaveta__itens{ flex:1; overflow-y:auto; padding:1rem 1.1rem; display:grid; gap:.8rem; align-content:start; } .gaveta__base{ border-top:var(--borda); background:#fff; padding:1.1rem 1.2rem; display:grid; gap:.7rem; } .gaveta__total{ display:flex; justify-content:space-between; align-items:center; font-family:'Fredoka',sans-serif; font-size:1.3rem; } .gaveta__total strong{ color:var(--laranja); } .gaveta__continuar{ background:none; border:0; text-decoration:underline; font-size:.85rem; color:var(--texto-3); } /* Barra de frete grátis — usada na gaveta E na página do carrinho */ .frete{ font-size:.85rem; text-align:center; line-height:1.5; } .frete:empty{ display:none; } .frete .barra{ display:block; height:10px; margin-top:.4rem; background:var(--creme-esc); border:2px solid var(--grafite); border-radius:999px; overflow:hidden; } .frete .barra i{ display:block; height:100%; background:var(--verde); border-radius:999px; transition:width .4s ease; } .frete--ok{ color:#0B7A57; } .item{ display:grid; grid-template-columns:64px 1fr auto; gap:.75rem; align-items:center; background:#fff; border:2px solid var(--grafite); border-radius:14px; padding:.55rem; } .item__thumb{ width:64px; height:64px; display:grid; place-items:center; font-size:1.8rem; background:var(--creme); border-radius:10px; overflow:hidden; } .item__thumb img{ width:100%; height:100%; object-fit:cover; } .item__nome{ font-size:.88rem; font-weight:800; line-height:1.25; } .item__meta{ font-size:.78rem; color:var(--texto-3); } .item__preco{ font-family:'Fredoka',sans-serif; color:var(--laranja); font-size:1rem; text-align:right; } .item__x{ background:none; border:0; color:var(--texto-4); font-size:1rem; } .item__x:hover{ color:var(--rosa); } .item__qtd{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.25rem; } .item__qtd button{ width:22px; height:22px; border:2px solid var(--grafite); border-radius:6px; background:#fff; font-weight:800; line-height:1; display:grid; place-items:center; } .item__qtd button:hover{ background:var(--amarelo); } .vazio{ text-align:center; padding:2.5rem 1rem; color:var(--texto-3); } .vazio__emoji{ font-size:3.4rem; display:block; margin-bottom:.6rem; } /* Confirmação do pedido */ .obrigado{ background:#fff; border:var(--borda); border-radius:var(--raio-g); box-shadow:var(--sombra-alta); padding:2.5rem 1.5rem; margin:2rem 0; text-align:center; } .obrigado__ico{ font-size:3.4rem; display:block; margin-bottom:.5rem; } .obrigado h2{ font-size:clamp(1.5rem,3.5vw,2.2rem); } .obrigado .js-obrigado-numero{ color:var(--laranja); } .obrigado p{ max-width:52ch; margin-inline:auto; color:var(--texto-2); } .obrigado small{ display:block; margin-top:1.2rem; font-size:.85rem; color:var(--texto-3); } /* Página do carrinho */ .checkout{ display:grid; grid-template-columns:1.5fr 1fr; gap:2rem; align-items:start; padding:1rem 0 3rem; } .checkout__lista{ display:grid; gap:.9rem; } .resumo{ background:#fff; border:var(--borda); border-radius:var(--raio-g); box-shadow:var(--sombra); padding:1.5rem; position:sticky; top:120px; display:grid; gap:.8rem; } .resumo h3{ margin:0; } .resumo__linha{ display:flex; justify-content:space-between; font-size:.95rem; } .resumo__total{ display:flex; justify-content:space-between; align-items:center; font-family:'Fredoka',sans-serif; font-size:1.5rem; border-top:2px dashed rgba(51,56,63,.3); padding-top:.8rem; } .resumo__total strong{ color:var(--laranja); } .campo{ display:grid; gap:.3rem; } .campo label{ font-family:'Fredoka',sans-serif; font-size:.9rem; } .campo input, .campo textarea, .campo select{ font-family:inherit; font-weight:600; padding:.7rem .9rem; border:2px solid var(--grafite); border-radius:12px; background:var(--creme); outline:none; } .campo input:focus, .campo textarea:focus{ background:#fff; box-shadow:0 0 0 3px rgba(242,116,11,.3); } /* ========================================================= CONFIANÇA + RODAPÉ ========================================================= */ /* faixa de confiança: clara e discreta, o laranja fica só nos ícones */ .confianca{ background:var(--papel); border-top:3px solid var(--grafite); padding:2.2rem 0; color:var(--grafite); } .confianca__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem; } .confianca__grid div{ display:grid; gap:.2rem; } .confianca__grid span{ font-size:1.8rem; } .confianca__grid strong{ font-family:'Fredoka',sans-serif; font-size:1.05rem; } .confianca__grid small{ font-size:.85rem; color:var(--texto-2); line-height:1.45; } .rodape{ background:var(--grafite); color:#fff; border-top:3px solid var(--grafite-esc); padding:3rem 0 1.5rem; } .rodape__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2rem; } .rodape h4{ font-size:1.05rem; color:var(--amarelo); margin-bottom:.8rem; } .rodape ul{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; font-size:.92rem; } .rodape a:hover{ color:var(--laranja); } .rodape__logo{ height:56px; width:auto; margin-bottom:.8rem; background:#fff; border-radius:12px; padding:.4rem .6rem; } .rodape__texto{ font-size:.88rem; color:#B9C0C8; line-height:1.6; } .rodape__social{ display:flex; gap:1rem; font-size:.9rem; flex-wrap:wrap; } .rodape__base{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.14); margin-top:2.2rem; padding-top:1.2rem; font-size:.82rem; color:#9AA3AC; } .zap-flutuante{ position:fixed; right:1.2rem; bottom:1.2rem; z-index:70; width:60px; height:60px; display:grid; place-items:center; font-size:1.7rem; background:#25D366; border:var(--borda); border-radius:50%; box-shadow:var(--sombra); transition:transform var(--transicao); } .zap-flutuante:hover{ transform:scale(1.1) rotate(-8deg); box-shadow:var(--sombra-alta); } /* ---------- Toast ---------- */ .toast{ position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(150%); background:var(--grafite); color:#fff; border:var(--borda); border-radius:999px; padding:.8rem 1.5rem; font-weight:700; z-index:120; box-shadow:var(--sombra); transition:transform .35s cubic-bezier(.34,1.4,.64,1); } .toast.is-visivel{ transform:translateX(-50%) translateY(0); } /* ---------- Sobre / FAQ ---------- */ .faq{ display:grid; gap:.8rem; max-width:820px; } .faq details{ background:#fff; border:var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); padding:1rem 1.2rem; } .faq summary{ font-family:'Fredoka',sans-serif; font-size:1.05rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:'＋'; color:var(--laranja); font-size:1.3rem; } .faq details[open] summary::after{ content:'－'; } .faq details p{ margin:.8rem 0 0; font-size:.94rem; color:var(--texto-2); } .texto-longo{ max-width:760px; } .texto-longo p{ font-size:1.03rem; } /* ========================================================= RESPONSIVO ========================================================= */ @media (max-width:960px){ /* No celular o texto vem PRIMEIRO. A ilustração antes empurrava a headline pra fora da tela: abria o site e não dava pra saber o que a loja vende. */ .hero{ padding:2rem 0 2.5rem; } .hero__grid{ grid-template-columns:1fr; gap:1.5rem; } .hero__palco{ min-height:0; } .hero__svg, .hero__mockup{ max-width:380px; margin-inline:auto; } .produto{ grid-template-columns:1fr; gap:1.8rem; } .checkout{ grid-template-columns:1fr; } .resumo{ position:static; } .banner{ grid-template-columns:1fr; text-align:center; } .banner__emoji{ justify-self:center; } .rodape__grid{ grid-template-columns:1fr 1fr; } } @media (max-width:760px){ /* Sem hambúrguer: a faixa de categorias fica sempre à vista, deslizando com o dedo. Antes, abrir o menu mostrava a lista de categorias e logo abaixo as pílulas repetiam a MESMA lista. */ .topo__grid{ grid-template-columns:1fr auto; gap:.6rem; } /* links do rodapé eram fiapos de 20px de altura */ .rodape ul{ gap:.1rem; } .rodape ul a{ display:block; padding:.55rem 0; } .rodape__social a{ padding:.5rem 0; display:inline-block; } .secao__link{ display:inline-block; padding:.5rem 0; } /* Fonte 16px em TODO campo: abaixo disso o Safari do iPhone dá um zoom automático ao tocar no campo e desalinha a página inteira. */ input, select, textarea{ font-size:16px !important; } .busca{ grid-column:1/-1; order:3; max-width:none; } /* bolinhas de cor e links do rodapé com área de dedo */ .cor{ width:44px; height:44px; } .rodape ul a{ padding:.7rem 0; } /* +/− do carrinho tinham 22px: errar o toque e mudar a quantidade errada é o tipo de coisa que faz a pessoa desistir do pedido */ .item{ grid-template-columns:64px 1fr auto; row-gap:.5rem; } .item__qtd{ gap:.5rem; margin-top:.4rem; } .item__qtd button{ width:36px; height:36px; font-size:1.1rem; border-radius:9px; } .item__qtd span{ min-width:1.5rem; text-align:center; font-weight:800; } .item__x{ padding:.5rem 0; } /* rolou a página? a busca recolhe, a faixa de categorias fica */ .topo.is-compacto .busca{ display:none; } .topo.is-compacto .topo__grid{ padding:.45rem 0; } .logo img{ height:40px; } .topo__insta{ display:none; } /* Faixa deslizável e enxuta: no topo ela cabe junto da busca, e ao rolar recolhe junto com ela — o cabeçalho fixo volta pra ~68px, que foi o número que a gente perseguiu na otimização do celular. */ .menu__lista{ padding:.25rem 0; scroll-padding-inline:1.25rem; scroll-snap-type:x proximity; } .menu__item{ font-size:.86rem; padding:.4rem .75rem; scroll-snap-align:start; } .topo.is-compacto .menu{ display:none; } .topo.is-aberto .menu{ display:block; } .topo.is-aberto .menu__lista{ flex-direction:column; padding:.8rem 0 1rem; } .hero__sticker{ font-size:.72rem; padding:.4rem .7rem; } .hero__sticker--1{ left:1%; } .hero__sticker--2{ right:1%; } /* 150px (não 160) faz caber DUAS colunas numa tela de 375px. Com uma coluna só, ver 11 produtos vira uma rolagem sem fim. */ .grade{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; } .migalhas a{ display:inline-block; padding:.35rem 0; } .rodape__social a{ padding:.6rem 0; } .card__nome{ font-size:.92rem; } /* com 2 colunas o card fica estreito: "Quero esse!" quebrava em duas linhas e deixava o botão desproporcional */ .card .btn{ padding:.7rem .6rem; font-size:.92rem; } .card__preco small{ font-size:.72rem; } .thumb__emoji{ font-size:2.8rem; } .rodape__grid{ grid-template-columns:1fr; } .secao{ padding:2.4rem 0; } } /* ========================================================= MENOS ANIMAÇÃO Vale quando o sistema pede (no Windows: Configurações → Acessibilidade → Efeitos visuais → Efeitos de animação). ========================================================= */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } /* Sem rolagem, a barra mostraria só os 2 ou 3 primeiros avisos e esconderia o resto. Então ela vira uma lista parada que quebra em linhas, com todos os avisos à vista. */ .marquee{ padding:.6rem 0; } .marquee__trilha{ width:auto; flex-wrap:wrap; justify-content:center; gap:.35rem 1.6rem; white-space:normal; padding-inline:1.25rem; } /* precisa dos dois níveis: ".marquee__trilha span" tem mais peso que ".marquee__copia" sozinho e venceria o display:none */ .marquee__trilha .marquee__copia{ display:none; } } /* No celular, quebrar em linhas ocuparia 5 linhas (quase 200px) antes de qualquer conteúdo. Aqui a barra volta a ser uma linha só, que a pessoa arrasta com o dedo — nada fica escondido e o topo fica leve. */ @media (prefers-reduced-motion:reduce) and (max-width:760px){ .marquee{ overflow-x:auto; scrollbar-width:none; } .marquee::-webkit-scrollbar{ display:none; } .marquee__trilha{ flex-wrap:nowrap; width:max-content; justify-content:flex-start; gap:1.6rem; } }