/* ========================================================================= IMPERCID IMPERMEABILIZANTES - MODELO 1 Folha de estilo única, sem framework externo. Ordem: tokens · base · utilitários · componentes · páginas · responsivo ========================================================================= */ /* ------------------------------------------------------------------------- 1. TOKENS ------------------------------------------------------------------------- */ :root{ /* Contraste (WCAG AA: 4,5:1 para texto comum, 3:1 para texto grande e ícone): - texto sobre fundo claro usa --tinta, --grafite ou --cinza; - --amarelo e --amarelo-escuro só viram texto sobre fundo escuro. Sobre fundo claro ficam no detalhe: barra, borda, sublinhado, ícone decorativo; - --cinza-2 só é texto sobre fundo escuro (no branco dá 2,6:1); - no verde do WhatsApp o texto é escuro (branco dá 2:1). */ /* marca */ --amarelo: #ffc31d; --amarelo-claro: #ffd75c; --amarelo-suave: #fff3cf; --amarelo-escuro: #e0a600; --amarelo-fundo: #fffaeb; /* neutros */ --tinta: #14161a; --tinta-2: #1d2027; --tinta-3: #2a2e37; --grafite: #3d434e; --cinza: #5f6673; /* 5,3:1 no --fundo e 4,6:1 no --linha */ --cinza-2: #98a0ac; --linha: #e3e6eb; --linha-2: #eef0f4; --fundo: #f4f6f8; --branco: #ffffff; /* apoio */ --whats: #25d366; --whats-2: #1da851; --erro: #d13d3d; /* medidas */ --wrap: 1300px; --r-p: 6px; --r-m: 10px; --r-g: 16px; /* sombras */ --sombra-1: 0 1px 2px rgba(20,22,26,.06), 0 2px 8px rgba(20,22,26,.05); --sombra-2: 0 2px 6px rgba(20,22,26,.07), 0 12px 28px rgba(20,22,26,.08); --sombra-3: 0 18px 48px rgba(20,22,26,.16); /* tipografia */ --f-corpo: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --f-titulo: 'Barlow Condensed', 'Barlow', 'Arial Narrow', system-ui, sans-serif; --transicao: .22s cubic-bezier(.4,.1,.2,1); } /* ------------------------------------------------------------------------- 2. BASE ------------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } /* Atenção: NÃO usar overflow-x aqui (nem clip, nem hidden). No Chrome isso transforma o em contêiner de rolagem e o evento "scroll" deixa de disparar na window, quebrando o menu fixo e o botão de voltar ao topo. Estouro lateral deve ser corrigido no elemento que o causa. */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:120px; } body{ margin:0; font-family:var(--f-corpo); font-size:16px; line-height:1.65; color:var(--grafite); background:var(--branco); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4,h5{ font-family:var(--f-titulo); color:var(--tinta); margin:0 0 .5em; line-height:1.12; font-weight:700; letter-spacing:.005em; } h1{ font-size:clamp(2rem, 1.4rem + 2.4vw, 3.15rem); } h2{ font-size:clamp(1.7rem, 1.25rem + 1.7vw, 2.5rem); } h3{ font-size:clamp(1.25rem, 1.1rem + .7vw, 1.6rem); } h4{ font-size:1.15rem; } p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; } ul,ol{ margin:0 0 1.1em; padding-left:1.15em; } strong,b{ font-weight:600; color:var(--tinta-2); } hr{ border:0; border-top:1px solid var(--linha); margin:2.5rem 0; } ::selection{ background:var(--amarelo); color:var(--tinta); } input,select,textarea,button{ font:inherit; color:inherit; } /* foco em dois tons: o contorno escuro aparece no fundo claro e o anel amarelo por dentro aparece no fundo escuro (só amarelo no branco dá 1,6:1). O !important vale só enquanto o elemento está focado: sem ele a sombra própria do botão (verde, amarela) apagaria o anel. */ :focus-visible{ outline:3px solid var(--tinta); outline-offset:2px; box-shadow:0 0 0 5px var(--amarelo)!important; border-radius:3px; } /* ------------------------------------------------------------------------- 3. UTILITÁRIOS ------------------------------------------------------------------------- */ .wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-left:22px; padding-right:22px; } .sprite{ position:absolute; width:0; height:0; overflow:hidden; } .ico{ width:20px; height:20px; fill:currentColor; stroke:none; flex:none; display:inline-block; vertical-align:middle; } .ico--mini{ width:14px; height:14px; } .ico--g{ width:28px; height:28px; } .visualmente-oculto{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .pular{ position:absolute; left:-999px; top:0; z-index:999; background:var(--amarelo); color:var(--tinta); padding:10px 18px; font-weight:600; } .pular:focus{ left:8px; top:8px; } .rotulo{ display:inline-block; font-family:var(--f-titulo); font-size:.85rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--grafite); padding-left:34px; position:relative; margin-bottom:.65rem; } .rotulo::before{ content:""; position:absolute; left:0; top:50%; width:24px; height:3px; background:var(--amarelo); transform:translateY(-50%); } .rotulo--claro{ color:var(--amarelo); } .secao{ padding:clamp(52px, 6vw, 88px) 0; } .secao--fundo{ background:var(--fundo); } .secao--tinta{ background:var(--tinta); color:var(--cinza-2); } .secao--tinta .secao__cabeca p{ color:var(--cinza-2); } .secao--tinta h2,.secao--tinta h3{ color:var(--branco); } .secao__cabeca{ display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap; margin-bottom:34px; } .secao__cabeca h2{ margin-bottom:.15em; } .secao__cabeca p{ color:var(--cinza); max-width:62ch; margin:0; } .secao__cabeca > div:first-child{ max-width:760px; } .centro{ text-align:center; } .centro .rotulo{ padding-left:0; } .centro .rotulo::before{ display:none; } /* botões ------------------------------------------------------------------ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--f-titulo); font-size:1.02rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:12px 24px; border:2px solid transparent; border-radius:var(--r-p); cursor:pointer; background:none; transition:background var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao); } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn--amarelo{ background:var(--amarelo); color:var(--tinta); box-shadow:0 4px 14px rgba(255,195,29,.35); } .btn--amarelo:hover{ background:var(--amarelo-claro); box-shadow:0 8px 22px rgba(255,195,29,.42); } .btn--tinta{ background:var(--tinta); color:var(--branco); } .btn--tinta:hover{ background:var(--tinta-3); } .btn--linha{ border-color:var(--linha); color:var(--tinta); background:var(--branco); } .btn--linha:hover{ border-color:var(--tinta); } .btn--linha-claro{ border-color:rgba(255,255,255,.35); color:var(--branco); } .btn--linha-claro:hover{ border-color:var(--amarelo); color:var(--amarelo); } .btn--whats{ background:var(--whats); color:var(--tinta); box-shadow:0 4px 14px rgba(37,211,102,.3); } .btn--whats:hover{ background:var(--whats-2); } .btn--loja{ background:var(--tinta); color:var(--amarelo); border-color:var(--tinta); } .btn--loja:hover{ background:var(--amarelo); color:var(--tinta); } .btn--grande{ padding:15px 32px; font-size:1.12rem; } .btn--pequeno{ padding:8px 16px; font-size:.9rem; } .btn--bloco{ display:flex; width:100%; } /* ------------------------------------------------------------------------- 4. BARRA SUPERIOR ------------------------------------------------------------------------- */ .barra-topo{ background:var(--tinta); color:var(--cinza-2); font-size:.855rem; } .barra-topo__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:38px; } .barra-topo__frase{ margin:0; display:flex; align-items:center; gap:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .barra-topo__frase .ico{ color:var(--amarelo); width:17px; height:17px; } .barra-topo__acoes{ display:flex; align-items:center; gap:20px; } .barra-topo__link{ display:inline-flex; align-items:center; gap:7px; transition:color var(--transicao); } .barra-topo__link .ico{ width:15px; height:15px; color:var(--amarelo); } .barra-topo__link:hover{ color:var(--branco); } .barra-topo__redes{ display:flex; gap:6px; padding-left:14px; border-left:1px solid var(--tinta-3); } .barra-topo__redes a{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; transition:background var(--transicao), color var(--transicao); } .barra-topo__redes a:hover{ background:var(--amarelo); color:var(--tinta); } .barra-topo__redes .ico{ width:15px; height:15px; } /* ------------------------------------------------------------------------- 5. CABEÇALHO ------------------------------------------------------------------------- */ .topo{ background:var(--branco); border-bottom:1px solid var(--linha-2); } .topo__in{ display:flex; align-items:center; gap:28px; padding-top:30px; padding-bottom:30px; } .topo__logo img{ width:auto; height:50px; } .busca{ flex:1 1 auto; max-width:430px; display:flex; align-items:stretch; background:var(--fundo); border:1.5px solid var(--linha); border-radius:var(--r-p); transition:border-color var(--transicao), background var(--transicao), box-shadow var(--transicao); } .busca:focus-within{ border-color:var(--grafite); background:var(--branco); box-shadow:0 0 0 3px rgba(255,195,29,.45); } .busca input{ flex:1; min-width:0; border:0; background:none; outline:0; padding:11px 15px; font-size:.94rem; } /* o foco da busca aparece na caixa inteira (.busca:focus-within) */ .busca input:focus-visible{ box-shadow:none!important; } .busca input::placeholder{ color:var(--cinza); } .busca button{ border:0; cursor:pointer; background:var(--tinta); color:var(--amarelo); padding:0 17px; margin:3px 3px 3px 0; border-radius:4px; transition:background var(--transicao), color var(--transicao); } .busca button:hover{ background:var(--amarelo); color:var(--tinta); } .topo__acoes{ margin-left:auto; display:flex; align-items:center; gap:14px; } .topo__fone{ display:flex; align-items:center; gap:11px; } .topo__fone-ico{ width:42px; height:42px; border-radius:50%; background:var(--amarelo-fundo); color:var(--amarelo-escuro); display:grid; place-items:center; transition:background var(--transicao), color var(--transicao); } .topo__fone:hover .topo__fone-ico{ background:var(--amarelo); color:var(--tinta); } .topo__fone-txt{ display:flex; flex-direction:column; line-height:1.2; } .topo__fone-txt strong{ font-family:var(--f-titulo); font-size:1.28rem; font-weight:700; color:var(--tinta); } .topo__fone-txt small{ font-size:.76rem; color:var(--cinza); } .topo__orc{ position:relative; width:46px; height:46px; border-radius:var(--r-p); display:grid; place-items:center; background:var(--fundo); color:var(--tinta); transition:background var(--transicao), color var(--transicao); } .topo__orc:hover{ background:var(--tinta); color:var(--amarelo); } .topo__orc-num{ position:absolute; top:-6px; right:-6px; min-width:21px; height:21px; padding:0 5px; border-radius:11px; background:var(--amarelo); color:var(--tinta); font-size:.72rem; font-weight:700; display:grid; place-items:center; border:2px solid var(--branco); line-height:1; } .topo__orc-num.sem-itens{ background:var(--linha); color:var(--cinza); } .topo__hamburguer{ display:none; width:46px; height:46px; border:0; border-radius:var(--r-p); background:var(--tinta); color:var(--amarelo); cursor:pointer; place-items:center; } /* ------------------------------------------------------------------------- 6. MENU ------------------------------------------------------------------------- */ .menu{ background:var(--tinta-2); position:sticky; top:0; z-index:60; box-shadow:0 1px 0 rgba(255,255,255,.05); } .menu.fixo{ box-shadow:var(--sombra-2); } .menu__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; } .menu__lista{ list-style:none; margin:0; padding:0; display:flex; align-items:stretch; flex-wrap:wrap; } .menu__lista > li{ position:relative; } .menu__lista > li > a{ display:flex; align-items:center; gap:6px; padding:16px 17px; font-family:var(--f-titulo); font-size:1.06rem; font-weight:600; letter-spacing:.045em; text-transform:uppercase; color:#dfe3e9; position:relative; transition:color var(--transicao), background var(--transicao); } .menu__lista > li > a::after{ content:""; position:absolute; left:17px; right:17px; bottom:9px; height:2px; background:var(--amarelo); transform:scaleX(0); transform-origin:left; transition:transform var(--transicao); } .menu__lista > li > a:hover, .menu__lista > li > a.ativo{ color:var(--branco); } .menu__lista > li > a:hover::after, .menu__lista > li > a.ativo::after{ transform:scaleX(1); } .menu__cta{ flex:none; } .menu__cta .btn{ padding:9px 20px; font-size:.95rem; } .menu__cta-loja{ display:none; } .menu__fechar{ display:none; } /* dropdown */ .menu__sub{ position:absolute; left:-8px; top:100%; min-width:640px; background:var(--branco); border-radius:0 0 var(--r-m) var(--r-m); box-shadow:var(--sombra-3); border-top:3px solid var(--amarelo); opacity:0; visibility:hidden; transform:translateY(9px); transition:opacity var(--transicao), transform var(--transicao), visibility var(--transicao); z-index:70; } .menu__sub--simples{ min-width:290px; } .menu__drop:hover > .menu__sub, .menu__drop:focus-within > .menu__sub{ opacity:1; visibility:visible; transform:translateY(0); } .menu__sub-in{ display:flex; gap:8px; padding:24px; } .menu__sub-col{ flex:1; min-width:170px; } .menu__sub-titulo{ font-family:var(--f-titulo); font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cinza); margin:0 0 .85rem; line-height:1.12; } .menu__sub-col ul{ list-style:none; margin:0; padding:0; } .menu__sub-col li + li{ margin-top:1px; } .menu__sub-col li a{ display:block; padding:6px 10px; border-radius:var(--r-p); font-size:.94rem; color:var(--grafite); transition:background var(--transicao), color var(--transicao), padding-left var(--transicao); } .menu__sub-col li a:hover{ background:var(--amarelo-fundo); color:var(--tinta); padding-left:15px; } /* categorias: uma lista só, dividida em duas colunas; o link do catálogo fica embaixo, na largura das duas (no hover ele não quebra linha) */ .menu__sub-col--categorias{ flex:2 1 0; min-width:348px; } .menu__sub-grupos{ columns:2; column-gap:8px; } .menu__sub-grupos li{ break-inside:avoid; } .menu__sub-todos{ display:block; margin-top:6px; padding:6px 10px; border-radius:var(--r-p); font-size:.94rem; font-weight:600; color:var(--tinta)!important; text-decoration:underline; text-decoration-color:var(--amarelo); text-decoration-thickness:2px; text-underline-offset:4px; transition:background var(--transicao), padding-left var(--transicao); } .menu__sub-todos:hover{ background:var(--amarelo-fundo); padding-left:15px; } .menu__sub-col--destaque{ background:var(--fundo); border-radius:var(--r-m); padding:18px; margin:-4px 0; flex:0 0 230px; } .menu__sub-marcas{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; } .menu__sub-marcas a{ font-size:.8rem; font-weight:500; padding:4px 10px; border-radius:20px; background:var(--branco); border:1px solid var(--linha); color:var(--grafite); transition:background var(--transicao), border-color var(--transicao), color var(--transicao); } .menu__sub-marcas a:hover{ background:var(--tinta); border-color:var(--tinta); color:var(--amarelo); } .menu__sub-col--destaque .btn{ font-size:.85rem; padding:10px 12px; } .menu__fundo{ position:fixed; inset:0; z-index:80; background:rgba(20,22,26,.55); backdrop-filter:blur(2px); } /* ------------------------------------------------------------------------- 7. MIGALHAS ------------------------------------------------------------------------- */ .migalhas{ background:var(--fundo); border-bottom:1px solid var(--linha-2); } .migalhas ol{ list-style:none; margin:0; padding:11px 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.85rem; color:var(--cinza); } .migalhas li + li::before{ content:"›"; margin-right:6px; color:var(--cinza-2); } .migalhas a{ color:var(--cinza); transition:color var(--transicao); } .migalhas a:hover{ color:var(--tinta); text-decoration:underline; text-decoration-color:var(--amarelo); text-decoration-thickness:2px; text-underline-offset:3px; } .migalhas [aria-current]{ color:var(--tinta); font-weight:600; } /* ------------------------------------------------------------------------- 8. BANNER PRINCIPAL ------------------------------------------------------------------------- */ .banner{ position:relative; background:var(--tinta); overflow:hidden; } /* Os slides são empilhados na mesma célula do grid: a altura do banner passa a ser a do slide mais alto e não muda ao trocar de slide (nada de "pulo"). */ .banner__trilho{ display:grid; } .banner__slide{ grid-column:1; grid-row:1; position:relative; min-height:clamp(360px, 44vw, 540px); opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s; } .banner__slide.ativo{ opacity:1; visibility:visible; z-index:2; } .banner__img{ position:absolute; inset:0; } .banner__img img{ width:100%; height:100%; object-fit:cover; } .banner__veu{ position:absolute; inset:0; background:linear-gradient(96deg, rgba(20,22,26,.94) 0%, rgba(20,22,26,.8) 42%, rgba(20,22,26,.25) 74%, rgba(20,22,26,.05) 100%); } .banner__in{ position:relative; z-index:2; display:flex; align-items:center; height:100%; min-height:clamp(360px, 44vw, 540px); padding-top:56px; padding-bottom:56px; } .banner__txt{ max-width:640px; color:#e6e9ee; } .banner__txt h1, .banner__txt h2{ color:var(--branco); font-size:clamp(2.1rem, 1.3rem + 3.1vw, 3.7rem); margin-bottom:.35em; } .banner__txt h1 em, .banner__txt h2 em{ font-style:normal; color:var(--amarelo); } .banner__txt p{ font-size:clamp(1rem, .95rem + .3vw, 1.18rem); max-width:56ch; margin-bottom:1.7em; } .banner__acoes{ display:flex; flex-wrap:wrap; gap:12px; } .banner__nav{ position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:2px solid rgba(255,255,255,.28); background:rgba(20,22,26,.35); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background var(--transicao), border-color var(--transicao), color var(--transicao); } .banner__nav:hover{ background:var(--amarelo); border-color:var(--amarelo); color:var(--tinta); } .banner__nav--ant{ left:20px; } .banner__nav--prox{ right:20px; } .banner__pontos{ position:absolute; z-index:3; left:50%; bottom:22px; transform:translateX(-50%); display:flex; gap:9px; } .banner__pontos button{ width:34px; height:4px; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.34); border-radius:3px; transition:background var(--transicao), width var(--transicao); } .banner__pontos button[aria-current="true"]{ background:var(--amarelo); width:52px; } /* ------------------------------------------------------------------------- 9. FAIXA DE VANTAGENS ------------------------------------------------------------------------- */ .vantagens{ background:var(--branco); border-bottom:1px solid var(--linha-2); } .vantagens__grade{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linha-2); } .vantagem{ background:var(--branco); display:flex; align-items:center; gap:14px; padding:26px 22px; } .vantagem__ico{ width:46px; height:46px; flex:none; border-radius:var(--r-p); background:var(--amarelo-fundo); color:var(--amarelo-escuro); display:grid; place-items:center; } .vantagem__ico .ico{ width:24px; height:24px; } .vantagem__titulo{ font-family:var(--f-titulo); font-weight:700; line-height:1.12; font-size:1.08rem; color:var(--tinta); margin:0 0 .1em!important; } .vantagem p:not(.vantagem__titulo){ margin:0; font-size:.87rem; color:var(--cinza); line-height:1.45; } /* ------------------------------------------------------------------------- 10. CARROSSEL ------------------------------------------------------------------------- */ .carrossel{ position:relative; } .carrossel__trilho{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 4px 14px; margin:-4px -4px 0; /* o encaixe conta a folga de 4px: sem isto o trilho começa em 4px e a seta "anterior" já nasce ativa */ scroll-padding-inline:4px; scrollbar-width:thin; scrollbar-color:var(--linha) transparent; } /* arrastar com o mouse: só em quem tem mouse de verdade */ @media (hover:hover) and (pointer:fine){ .carrossel__trilho{ cursor:grab; } } .carrossel__trilho.arrastando{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; user-select:none; } .carrossel__trilho.arrastando *{ cursor:grabbing; } .carrossel__trilho.arrastando .produto{ transform:none; } .carrossel__trilho::-webkit-scrollbar{ height:6px; } .carrossel__trilho::-webkit-scrollbar-track{ background:var(--linha-2); border-radius:3px; } .carrossel__trilho::-webkit-scrollbar-thumb{ background:var(--cinza-2); border-radius:3px; } .carrossel__item{ scroll-snap-align:start; flex:0 0 clamp(215px, 22vw, 254px); } .carrossel__nav{ display:flex; gap:8px; } .carrossel__nav button{ width:42px; height:42px; border-radius:var(--r-p); border:1.5px solid var(--linha); background:var(--branco); color:var(--tinta); cursor:pointer; display:grid; place-items:center; transition:background var(--transicao), border-color var(--transicao), color var(--transicao); } .carrossel__nav button:hover:not(:disabled){ background:var(--tinta); border-color:var(--tinta); color:var(--amarelo); } .carrossel__nav button:disabled{ opacity:.35; cursor:default; } /* ------------------------------------------------------------------------- 11. CARTÃO DE PRODUTO ------------------------------------------------------------------------- */ .produto{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); overflow:hidden; display:flex; flex-direction:column; height:100%; transition:border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao); } .produto:hover{ border-color:var(--amarelo); box-shadow:var(--sombra-2); transform:translateY(-4px); } .produto__img{ position:relative; display:block; aspect-ratio:1/1; background:var(--branco); border-bottom:1px solid var(--linha-2); overflow:hidden; } /* As fotos vêm do painel em tamanhos e proporções variados. "contain" em vez de "cover": a foto aparece inteira na caixa quadrada, sem o produto cortado. */ .produto__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:transform var(--transicao); } .produto:hover .produto__img img{ transform:scale(1.05); } .produto__img--vazia{ display:grid; place-items:center; color:var(--cinza); font-size:.8rem; text-align:center; } .produto__marca{ position:absolute; top:10px; left:10px; background:var(--tinta); color:var(--amarelo); font-family:var(--f-titulo); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:3px; } .produto__corpo{ padding:15px 16px 17px; display:flex; flex-direction:column; flex:1; } .produto__cat{ font-size:.74rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--cinza); margin:0 0 5px; } /* no passar do mouse o nome ganha sublinhado amarelo (texto amarelo no branco não tem contraste); o sublinhado já existe transparente para a cor poder entrar com transição */ .produto__nome{ font-family:var(--f-titulo); font-size:1.14rem; font-weight:600; line-height:1.22; color:var(--tinta); margin:0 0 8px; min-height:2.4em; text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:3px; transition:text-decoration-color var(--transicao); } .produto:hover .produto__nome{ text-decoration-color:var(--amarelo); } .produto__emb{ font-size:.8rem; color:var(--cinza); margin:0 0 14px; display:flex; align-items:center; gap:6px; } .produto__emb .ico{ width:14px; height:14px; color:var(--cinza-2); } .produto__pe{ margin-top:auto; display:flex; gap:8px; } .produto__pe .btn{ flex:1; padding:9px 10px; font-size:.85rem; } .produto__add{ flex:none!important; width:42px; padding:0!important; border:1.5px solid var(--linha); border-radius:var(--r-p); background:var(--branco); color:var(--tinta); cursor:pointer; display:grid; place-items:center; transition:background var(--transicao), border-color var(--transicao), color var(--transicao); } .produto__add:hover{ background:var(--amarelo); border-color:var(--amarelo); } .produto__add.marcado{ background:var(--tinta); border-color:var(--tinta); color:var(--amarelo); } /* grade de produtos */ .grade-produtos{ display:grid; gap:20px; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); } /* ------------------------------------------------------------------------- 12. CATEGORIAS ------------------------------------------------------------------------- */ .grade-categorias{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); } .categoria{ display:flex; flex-direction:column; gap:8px; padding:22px 22px 20px; background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); position:relative; overflow:hidden; transition:border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao); } .categoria::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--amarelo); transform:scaleY(0); transform-origin:top; transition:transform var(--transicao); } .categoria:hover{ border-color:var(--linha); box-shadow:var(--sombra-2); transform:translateY(-3px); } .categoria:hover::before{ transform:scaleY(1); } .categoria__ico{ width:44px; height:44px; border-radius:var(--r-p); background:var(--amarelo-fundo); color:var(--amarelo-escuro); display:grid; place-items:center; } .categoria h3{ margin:0; font-size:1.22rem; } .categoria p{ margin:0; font-size:.87rem; color:var(--cinza); line-height:1.5; } .categoria__ver{ margin-top:6px; font-size:.83rem; font-weight:600; color:var(--tinta); text-decoration:underline; text-decoration-color:var(--amarelo); text-decoration-thickness:2px; text-underline-offset:4px; display:inline-flex; align-items:center; gap:5px; } /* ------------------------------------------------------------------------- 13. SOLUÇÕES ------------------------------------------------------------------------- */ .grade-solucoes{ display:grid; gap:20px; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); } .solucao{ position:relative; display:block; border-radius:var(--r-m); overflow:hidden; min-height:280px; background:var(--tinta); transition:transform var(--transicao), box-shadow var(--transicao); } .solucao:hover{ transform:translateY(-4px); box-shadow:var(--sombra-2); } .solucao__img{ position:absolute; inset:0; } .solucao__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .solucao:hover .solucao__img img{ transform:scale(1.06); } .solucao__veu{ position:absolute; inset:0; background:linear-gradient(to top, rgba(20,22,26,.95) 8%, rgba(20,22,26,.6) 48%, rgba(20,22,26,.15) 100%); } .solucao__txt{ position:relative; z-index:2; padding:26px 24px; min-height:280px; display:flex; flex-direction:column; justify-content:flex-end; color:#dde1e8; } .solucao__txt h3{ color:var(--branco); margin:0 0 .3em; } .solucao__txt p{ margin:0 0 14px; font-size:.9rem; line-height:1.5; } .solucao__link{ font-family:var(--f-titulo); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.88rem; color:var(--amarelo); display:inline-flex; align-items:center; gap:6px; } .solucao:hover .solucao__link{ gap:11px; } /* ------------------------------------------------------------------------- 14. VITRINE GUIA EXTRA ------------------------------------------------------------------------- */ .vitrine{ background:var(--tinta); position:relative; overflow:hidden; } .vitrine::after{ content:""; position:absolute; right:-140px; top:-140px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,195,29,.16), transparent 65%); } .vitrine__cabeca{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:26px; position:relative; z-index:2; } .vitrine__cabeca h2{ color:var(--branco); margin-bottom:.15em; } .vitrine__cabeca p{ color:var(--cinza-2); margin:0; max-width:60ch; } .vitrine__quadro{ position:relative; z-index:2; background:var(--branco); border-radius:var(--r-g); padding:10px; box-shadow:var(--sombra-3); border:1px solid rgba(255,255,255,.1); } .vitrine__quadro iframe{ display:block; width:100%; height:430px; border:0; border-radius:var(--r-m); background:var(--fundo); } .vitrine__aviso{ border-radius:var(--r-m); background:var(--fundo); border:2px dashed var(--linha); padding:44px 32px; text-align:center; min-height:430px; display:flex; flex-direction:column; align-items:center; justify-content:center; } .vitrine__aviso .ico{ width:38px; height:38px; color:var(--amarelo-escuro); margin-bottom:12px; } .vitrine__aviso h3{ margin-bottom:.4em; } .vitrine__aviso p{ max-width:60ch; color:var(--cinza); } .vitrine__aviso-nota{ font-size:.88rem; background:var(--amarelo-fundo); border-radius:var(--r-p); padding:12px 18px; color:#6b5a1f!important; margin-bottom:22px!important; } .vitrine__pe{ position:relative; z-index:2; margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .vitrine__pe p{ margin:0; color:var(--cinza-2); font-size:.88rem; } .vitrine__pe strong{ color:var(--amarelo); } /* ------------------------------------------------------------------------- 15. FAIXA LOJA ONLINE ------------------------------------------------------------------------- */ .faixa-loja{ background:linear-gradient(100deg, var(--amarelo) 0%, var(--amarelo-claro) 100%); position:relative; overflow:hidden; } .faixa-loja::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(-45deg, rgba(20,22,26,.045) 0 14px, transparent 14px 28px); } .faixa-loja__in{ position:relative; z-index:2; display:flex; align-items:center; gap:36px; flex-wrap:wrap; padding-top:clamp(38px, 4.5vw, 62px); padding-bottom:clamp(38px, 4.5vw, 62px); } .faixa-loja__txt{ flex:1 1 420px; } .faixa-loja__txt .rotulo{ color:var(--tinta); } .faixa-loja__txt .rotulo::before{ background:var(--tinta); } .faixa-loja__txt h2{ margin-bottom:.3em; } .faixa-loja__txt p{ color:#4a3f16; max-width:60ch; font-size:1.05rem; margin-bottom:0; } .faixa-loja__acoes{ display:flex; flex-direction:column; gap:11px; flex:0 0 auto; } .faixa-loja__lista{ list-style:none; margin:0 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.93rem; font-weight:600; color:var(--tinta); margin-top:18px; } .faixa-loja__lista li{ display:flex; align-items:center; gap:7px; } .faixa-loja__lista .ico{ width:16px; height:16px; color:var(--tinta); } /* ------------------------------------------------------------------------- 16. ARTIGOS ------------------------------------------------------------------------- */ .grade-artigos{ display:grid; gap:22px; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); } .artigo{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); overflow:hidden; display:flex; flex-direction:column; transition:border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao); } .artigo:hover{ border-color:var(--amarelo); box-shadow:var(--sombra-2); transform:translateY(-4px); } .artigo__img{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--fundo); } .artigo__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .artigo:hover .artigo__img img{ transform:scale(1.05); } .artigo__corpo{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; } .artigo__meta{ display:flex; align-items:center; gap:10px; font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; color:var(--cinza); margin-bottom:9px; } .artigo__meta span:first-child{ color:var(--grafite); font-weight:700; } .artigo h3{ font-size:1.3rem; margin:0 0 .5em; line-height:1.18; } .artigo p{ font-size:.92rem; color:var(--cinza); margin:0 0 16px; } .artigo__link{ margin-top:auto; font-family:var(--f-titulo); font-weight:700; font-size:.9rem; letter-spacing:.07em; text-transform:uppercase; color:var(--tinta); text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:4px; display:inline-flex; align-items:center; gap:6px; transition:text-decoration-color var(--transicao), gap var(--transicao); } .artigo:hover .artigo__link{ text-decoration-color:var(--amarelo); gap:11px; } .artigo--largo{ grid-column:span 2; flex-direction:row; } .artigo--largo .artigo__img{ flex:0 0 46%; aspect-ratio:auto; } .artigo--largo .artigo__corpo{ padding:28px 30px; justify-content:center; } .artigo--largo h3{ font-size:1.6rem; } /* ------------------------------------------------------------------------- 17. CTA FINAL ------------------------------------------------------------------------- */ .cta-final{ background:var(--tinta-2); border-top:4px solid var(--amarelo); } .cta-final__in{ display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; padding-top:clamp(34px, 4vw, 54px); padding-bottom:clamp(34px, 4vw, 54px); } .cta-final__txt{ flex:1 1 480px; } .cta-final__txt h2{ color:var(--branco); margin-bottom:.3em; } .cta-final__txt p{ color:var(--cinza-2); max-width:62ch; margin:0; } .cta-final__acoes{ display:flex; gap:12px; flex-wrap:wrap; } /* ------------------------------------------------------------------------- 18. RODAPÉ ------------------------------------------------------------------------- */ .rodape{ background:var(--tinta); color:var(--cinza-2); font-size:.92rem; } .rodape__topo{ display:grid; gap:36px; grid-template-columns:1.6fr 1fr 1fr 1.4fr; padding:clamp(44px, 5vw, 66px) 0 40px; } .rodape__marca img{ height:46px; width:auto; margin-bottom:18px; /* a logo é preta: invertemos para branco sobre o fundo escuro */ filter:brightness(0) invert(1); } .rodape__marca p{ line-height:1.6; margin-bottom:18px; } .rodape__redes{ display:flex; gap:9px; } .rodape__redes a{ width:38px; height:38px; border-radius:var(--r-p); background:var(--tinta-3); color:var(--cinza-2); display:grid; place-items:center; transition:background var(--transicao), color var(--transicao); } .rodape__redes a:hover{ background:var(--amarelo); color:var(--tinta); } .rodape h3{ color:var(--branco); font-size:1.05rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:1.1rem; padding-bottom:.7rem; border-bottom:1px solid var(--tinta-3); } .rodape__col ul{ list-style:none; margin:0; padding:0; } .rodape__col li + li{ margin-top:9px; } .rodape__col a{ transition:color var(--transicao), padding-left var(--transicao); display:inline-block; } .rodape__col a:hover{ color:var(--amarelo); padding-left:5px; } .rodape__contato li{ display:flex; gap:11px; align-items:flex-start; line-height:1.55; } .rodape__contato li + li{ margin-top:15px; } .rodape__contato .ico{ color:var(--amarelo); margin-top:3px; } .rodape__contato a:hover{ padding-left:0; } /* botão da localização: sem o deslize e o amarelo dos links do rodapé */ .rodape__col a.rodape__localizacao{ display:inline-flex; margin-top:20px; } .rodape__col a.rodape__localizacao:hover{ color:var(--tinta); padding-left:16px; } .rodape__parceiros{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-bottom:34px; } .rodape__parceiro{ display:flex; align-items:center; gap:14px; background:var(--tinta-2); border:1px solid var(--tinta-3); border-radius:var(--r-m); padding:17px 20px; transition:border-color var(--transicao), background var(--transicao); } .rodape__parceiro:hover{ border-color:var(--amarelo); background:var(--tinta-3); } .rodape__parceiro > .ico:first-child{ color:var(--amarelo); width:26px; height:26px; } .rodape__parceiro span{ display:flex; flex-direction:column; line-height:1.35; font-size:.86rem; flex:1; } .rodape__parceiro strong{ color:var(--branco); font-size:1rem; font-family:var(--f-titulo); letter-spacing:.02em; } .rodape__parceiro > .ico--mini{ color:var(--cinza-2); } .rodape__base{ border-top:1px solid var(--tinta-3); padding:22px 0 26px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.85rem; } .rodape__base p{ margin:0; } .rodape__base a{ color:var(--amarelo); } .rodape__daen{ display:flex; align-items:center; gap:10px; } .rodape__daen img{ height:24px; width:auto; opacity:.75; transition:opacity var(--transicao); } .rodape__daen a:hover img{ opacity:1; } /* ------------------------------------------------------------------------- 19. BOTÕES FLUTUANTES ------------------------------------------------------------------------- */ .flutuantes{ position:fixed; right:20px; bottom:20px; z-index:75; display:flex; flex-direction:column; align-items:flex-end; gap:10px; } .flutuante-whats{ display:inline-flex; align-items:center; gap:9px; background:var(--whats); color:var(--tinta); padding:12px 19px; border-radius:40px; font-family:var(--f-titulo); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.95rem; box-shadow:0 8px 26px rgba(37,211,102,.42); transition:transform var(--transicao), background var(--transicao); } .flutuante-whats:hover{ transform:translateY(-3px); background:var(--whats-2); } .flutuante-whats .ico{ width:23px; height:23px; } .flutuante-topo{ width:48px; height:48px; border-radius:50%; border:0; cursor:pointer; background:var(--tinta); color:var(--amarelo); display:grid; place-items:center; box-shadow:0 8px 22px rgba(20,22,26,.32); opacity:0; visibility:hidden; transform:translateY(12px) scale(.85); transition:opacity var(--transicao), visibility var(--transicao), transform var(--transicao), background var(--transicao); } .flutuante-topo.visivel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); } .flutuante-topo:hover{ background:var(--amarelo); color:var(--tinta); } .flutuante-topo .ico{ width:24px; height:24px; } /* ------------------------------------------------------------------------- 20. CAPA DE PÁGINA INTERNA ------------------------------------------------------------------------- */ .capa{ position:relative; background:var(--tinta); overflow:hidden; } .capa__img{ position:absolute; inset:0; } .capa__img img{ width:100%; height:100%; object-fit:cover; } /* o (corte da foto no celular) precisa ocupar a caixa inteira */ .capa__img picture,.banner__img picture{ display:block; width:100%; height:100%; } .capa__veu{ position:absolute; inset:0; background:linear-gradient(96deg, rgba(20,22,26,.95) 0%, rgba(20,22,26,.8) 50%, rgba(20,22,26,.45) 100%); } .capa__in{ position:relative; z-index:2; padding-top:clamp(46px, 5.5vw, 78px); padding-bottom:clamp(46px, 5.5vw, 78px); max-width:820px; } .capa h1{ color:var(--branco); margin-bottom:.3em; } .capa p{ color:var(--cinza-2); font-size:1.08rem; max-width:64ch; margin:0; } .capa--simples{ background:var(--tinta-2); } /* ------------------------------------------------------------------------- 21. LAYOUT COM BARRA LATERAL ------------------------------------------------------------------------- */ .colunas{ display:grid; gap:34px; grid-template-columns:270px minmax(0,1fr); align-items:start; } .colunas--inversa{ grid-template-columns:minmax(0,1fr) 300px; } .lateral{ position:sticky; top:88px; } .lateral__bloco{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); padding:20px; margin-bottom:18px; } .lateral__bloco h3{ font-size:1.02rem; letter-spacing:.09em; text-transform:uppercase; padding-bottom:.7rem; margin-bottom:.9rem; border-bottom:2px solid var(--amarelo); } .lateral__lista{ list-style:none; margin:0; padding:0; } .lateral__lista li + li{ margin-top:2px; } .lateral__lista a{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 11px; border-radius:var(--r-p); font-size:.92rem; color:var(--grafite); transition:background var(--transicao), color var(--transicao); } .lateral__lista a:hover{ background:var(--fundo); color:var(--tinta); } .lateral__lista a.ativo{ background:var(--tinta); color:var(--amarelo); font-weight:600; } .lateral__lista small{ font-size:.76rem; color:var(--cinza); } .lateral__lista a.ativo small{ color:var(--amarelo); } .lateral__cta{ background:var(--tinta); color:var(--cinza-2); border-radius:var(--r-m); padding:24px 22px; text-align:center; } .lateral__cta:not(:last-child){ margin-bottom:18px; } .lateral__cta > .ico{ color:var(--amarelo); width:34px; height:34px; margin-bottom:8px; } .lateral__cta h3, .ficha__desc .lateral__cta h3{ color:var(--branco); border:0; padding:0; margin-bottom:.4rem; text-transform:none; letter-spacing:0; font-size:1.3rem; } .lateral__cta p{ font-size:.88rem; margin-bottom:16px; } .lateral__cta .btn{ font-size:.92rem; } /* ------------------------------------------------------------------------- 22. BARRA DE FILTROS / RESULTADOS ------------------------------------------------------------------------- */ .filtros{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 18px; margin-bottom:24px; background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); } .filtros p{ margin:0; font-size:.92rem; color:var(--cinza); } .filtros strong{ color:var(--tinta); } .filtros__marcas{ display:flex; flex-wrap:wrap; gap:7px; } .filtros__marcas a{ font-size:.83rem; font-weight:500; padding:5px 13px; border-radius:20px; border:1px solid var(--linha); color:var(--grafite); transition:background var(--transicao), border-color var(--transicao), color var(--transicao); } .filtros__marcas a:hover{ border-color:var(--tinta); } .filtros__marcas a.ativo{ background:var(--tinta); border-color:var(--tinta); color:var(--amarelo); } .vazio{ text-align:center; padding:60px 20px; background:var(--branco); border:1px dashed var(--linha); border-radius:var(--r-m); } .vazio .ico{ width:44px; height:44px; color:var(--cinza-2); margin-bottom:12px; } .vazio h2,.vazio h3{ margin-bottom:.4em; } .vazio h2{ font-size:clamp(1.25rem, 1.1rem + .7vw, 1.6rem); } .vazio p{ color:var(--cinza); max-width:46ch; margin:0 auto 18px; } /* paginação */ .paginacao{ display:flex; justify-content:center; align-items:center; gap:7px; margin-top:36px; flex-wrap:wrap; } .paginacao > a,.paginacao > span{ min-width:42px; height:42px; padding:0 12px; display:grid; place-items:center; border:1px solid var(--linha); border-radius:var(--r-p); background:var(--branco); font-weight:600; font-size:.93rem; transition:background var(--transicao), border-color var(--transicao), color var(--transicao); } .paginacao > a:hover{ border-color:var(--tinta); } .paginacao > .paginacao__salto{ border:0; background:none; min-width:0; padding:0 2px; color:var(--cinza); } .paginacao .atual{ background:var(--tinta); border-color:var(--tinta); color:var(--amarelo); } /* ------------------------------------------------------------------------- 23. DETALHE DO PRODUTO ------------------------------------------------------------------------- */ .ficha{ display:grid; gap:40px; grid-template-columns:minmax(0,460px) 1fr; align-items:start; } .ficha__galeria{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-g); padding:14px; position:relative; } .ficha__galeria img{ width:100%; aspect-ratio:1/1; object-fit:contain; } .ficha__sem-img{ aspect-ratio:1/1; display:grid; place-items:center; background:var(--fundo); border-radius:var(--r-m); color:var(--cinza-2); font-size:.95rem; } .ficha__selo{ position:absolute; top:16px; left:16px; background:var(--tinta); color:var(--amarelo); font-family:var(--f-titulo); font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; padding:5px 12px; border-radius:3px; } .ficha__topo h1{ font-size:clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem); margin-bottom:.25em; } .ficha__cat{ font-size:.8rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--grafite); margin:0 0 .6rem; } .ficha__cat a{ text-decoration:underline; text-decoration-color:var(--amarelo); text-decoration-thickness:2px; text-underline-offset:4px; } .ficha__resumo{ font-size:1.05rem; color:var(--cinza); margin-bottom:24px; } .ficha__dados{ list-style:none; margin:0 0 26px; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1px; background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); overflow:hidden; } /* as linhas entre os dados vêm da sombra de cada item (e não do fundo da lista): assim a sobra da última linha fica branca, sem um bloco cinza */ .ficha__dados li{ background:var(--branco); padding:14px 16px; box-shadow:0 0 0 1px var(--linha); } .ficha__dados dt,.ficha__dados .rot{ display:block; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--cinza); margin-bottom:2px; } .ficha__dados .val{ font-weight:600; color:var(--tinta); font-size:1.02rem; } .ficha__acoes{ display:flex; gap:11px; flex-wrap:wrap; margin-bottom:22px; } .ficha__aviso{ display:flex; gap:12px; align-items:flex-start; background:var(--amarelo-fundo); border:1px solid #f2e2b0; border-radius:var(--r-m); padding:16px 18px; font-size:.9rem; color:#6b5a1f; } .ficha__aviso .ico{ color:var(--amarelo-escuro); margin-top:2px; } .ficha__aviso strong{ color:#5a4a13; } .ficha__desc{ margin-top:56px; padding-top:44px; border-top:1px solid var(--linha); } .ficha__desc .lateral{ top:96px; } .ficha__desc h2{ font-size:1.5rem; padding-bottom:.55rem; border-bottom:2px solid var(--amarelo); margin-bottom:1.2rem; } .ficha__desc .texto h3{ font-size:1.1rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta); margin:1.7em 0 .5em; } .ficha__desc .texto h3:first-child{ margin-top:0; } .ficha__desc .texto p{ max-width:78ch; } .lista-check{ list-style:none; padding:0; margin:0 0 1.2em; } .lista-check li{ position:relative; padding-left:26px; margin-bottom:7px; } .lista-check li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border-radius:2px; background:var(--amarelo); } /* ------------------------------------------------------------------------- 24. TEXTO / CONTEÚDO ------------------------------------------------------------------------- */ .texto{ max-width:78ch; } .texto h2{ margin-top:1.9em; } .texto h2:first-child{ margin-top:0; } .texto h3{ margin-top:1.6em; } .texto p{ font-size:1.04rem; } /* link no meio de um parágrafo leva sublinhado amarelo além da cor, para ser reconhecido como link por quem não distingue bem as cores */ .texto p a:not([class]), .ficha__aviso p a, .contato-cartao p a{ font-weight:600; color:var(--tinta); text-decoration:underline; text-decoration-color:var(--amarelo); text-decoration-thickness:2px; text-underline-offset:3px; } .texto ul{ padding-left:0; list-style:none; } .texto ul li{ position:relative; padding-left:26px; margin-bottom:8px; } .texto ul li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border-radius:2px; background:var(--amarelo); } .texto blockquote{ margin:1.8em 0; padding:20px 26px; background:var(--amarelo-fundo); border-left:4px solid var(--amarelo); border-radius:0 var(--r-m) var(--r-m) 0; font-size:1.08rem; color:var(--tinta-2); } .destaque-numeros{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin:34px 0; } .numero{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); padding:24px 22px; border-top:4px solid var(--amarelo); } .numero strong{ display:block; font-family:var(--f-titulo); font-size:2.6rem; line-height:1; color:var(--tinta); margin-bottom:6px; } .numero span{ font-size:.9rem; color:var(--cinza); } .cartoes-valor{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); } .valor{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); padding:26px 24px; } .valor .ico{ width:30px; height:30px; color:var(--amarelo-escuro); margin-bottom:10px; } .valor h3{ font-size:1.2rem; margin-bottom:.4em; } .valor p{ font-size:.92rem; color:var(--cinza); margin:0; } /* ------------------------------------------------------------------------- 25. FORMULÁRIOS ------------------------------------------------------------------------- */ .form{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-g); padding:clamp(24px, 3vw, 36px); } .form__grade{ display:grid; gap:18px; grid-template-columns:repeat(2,1fr); } .campo{ display:flex; flex-direction:column; gap:6px; } .campo--largo{ grid-column:1 / -1; } .campo label{ font-size:.83rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-2); } .campo label span{ color:var(--erro); } .campo input,.campo select,.campo textarea{ border:1.5px solid var(--linha); border-radius:var(--r-p); background:var(--branco); padding:11px 14px; font-size:.96rem; transition:border-color var(--transicao), box-shadow var(--transicao); } /* borda escura no foco (a amarela sozinha some no branco) e halo amarelo. Campo de texto já mostra o foco na própria borda, então o anel forte do :focus-visible fica só para link e botão (campo ganha foco até no clique) */ .campo input:focus,.campo select:focus,.campo textarea:focus{ outline:0; border-color:var(--grafite); box-shadow:0 0 0 3px rgba(255,195,29,.45); } .campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{ box-shadow:0 0 0 3px rgba(255,195,29,.45)!important; } .campo textarea{ resize:vertical; min-height:130px; } .campo small{ font-size:.8rem; color:var(--cinza); } .form__pe{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:22px; } .form__pe small{ font-size:.82rem; color:var(--cinza); max-width:48ch; } /* ------------------------------------------------------------------------- 26. CONTATO / MAPA ------------------------------------------------------------------------- */ .contato-cartoes{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); margin-bottom:38px; } .contato-cartao{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); padding:24px 22px; transition:border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao); } .contato-cartao:hover{ border-color:var(--amarelo); box-shadow:var(--sombra-1); transform:translateY(-3px); } .contato-cartao__ico{ width:44px; height:44px; border-radius:var(--r-p); background:var(--amarelo-fundo); color:var(--amarelo-escuro); display:grid; place-items:center; margin-bottom:13px; } .contato-cartao h3{ font-size:1.16rem; margin-bottom:.3em; } .contato-cartao p{ font-size:.92rem; color:var(--cinza); margin:0; line-height:1.55; } .contato-cartao a, .contato-cartao__dado{ color:var(--tinta-2); font-weight:600; } .contato-cartao:hover .contato-cartao__dado{ text-decoration:underline; text-decoration-color:var(--amarelo); text-decoration-thickness:2px; text-underline-offset:3px; } .mapa{ border-radius:var(--r-g); overflow:hidden; border:1px solid var(--linha); background:var(--fundo); } .mapa iframe{ display:block; width:100%; height:420px; border:0; } /* ------------------------------------------------------------------------- 27. ORÇAMENTO (carrinho de cotação) ------------------------------------------------------------------------- */ .orc-tabela{ width:100%; border-collapse:collapse; background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); overflow:hidden; } .orc-tabela th{ background:var(--fundo); font-family:var(--f-titulo); font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2); text-align:left; padding:13px 16px; border-bottom:1px solid var(--linha); } .orc-tabela td{ padding:14px 16px; border-bottom:1px solid var(--linha-2); vertical-align:middle; } .orc-tabela tr:last-child td{ border-bottom:0; } .orc-tabela__prod{ display:flex; align-items:center; gap:14px; } .orc-tabela__prod img{ width:56px; height:56px; object-fit:contain; flex:none; } .orc-tabela__prod strong{ display:block; font-family:var(--f-titulo); font-size:1.05rem; color:var(--tinta); } .orc-tabela__prod small{ color:var(--cinza); font-size:.82rem; } .orc-qtd{ display:inline-flex; align-items:center; border:1.5px solid var(--linha); border-radius:var(--r-p); overflow:hidden; } .orc-qtd button{ width:32px; height:34px; border:0; background:var(--fundo); color:var(--tinta); cursor:pointer; display:grid; place-items:center; transition:background var(--transicao); } .orc-qtd button:hover{ background:var(--amarelo); } .orc-qtd input{ width:46px; height:34px; border:0; text-align:center; font-weight:600; -moz-appearance:textfield; } .orc-qtd input::-webkit-outer-spin-button, .orc-qtd input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .orc-remover{ width:34px; height:34px; border:0; border-radius:var(--r-p); background:var(--fundo); color:var(--cinza); cursor:pointer; display:grid; place-items:center; transition:background var(--transicao), color var(--transicao); } .orc-remover:hover{ background:#fdeaea; color:var(--erro); } /* ------------------------------------------------------------------------- 28. MARCAS ------------------------------------------------------------------------- */ .grade-marcas{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); } .marca-card{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); padding:24px 22px; transition:border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao); } .marca-card:hover{ border-color:var(--amarelo); box-shadow:var(--sombra-1); transform:translateY(-3px); } .marca-card h3{ font-size:1.45rem; margin-bottom:.2em; letter-spacing:.02em; } .marca-card p{ font-size:.89rem; color:var(--cinza); margin:0 0 14px; } .marca-card__ver{ font-size:.83rem; font-weight:600; color:var(--tinta); text-decoration:underline; text-decoration-color:var(--amarelo); text-decoration-thickness:2px; text-underline-offset:4px; display:inline-flex; align-items:center; gap:5px; } /* faixa de logos/marcas em texto */ .tira-marcas{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; } .tira-marcas span{ font-family:var(--f-titulo); font-size:1.05rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--cinza); padding:9px 18px; border:1px solid var(--linha); border-radius:30px; background:var(--branco); transition:color var(--transicao), border-color var(--transicao); } .tira-marcas span:hover{ color:var(--tinta); border-color:var(--tinta); } /* ------------------------------------------------------------------------- 29. BLOCOS DA HOME ------------------------------------------------------------------------- */ .secao__mais{ text-align:center; margin:34px 0 0; } /* CTA "Um mundo de proteção": os quatro problemas viram links de verdade para as páginas de solução, e o mascote da marca fica na coluna da direita. */ .protecao{ position:relative; overflow:hidden; background:var(--tinta); border-top:4px solid var(--amarelo); } .protecao::before{ content:""; position:absolute; z-index:1; right:2%; top:-30%; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle, rgba(255,195,29,.13), transparent 62%); } .protecao__in{ position:relative; z-index:2; display:grid; gap:34px 44px; grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:auto auto; align-items:start; padding-top:clamp(48px, 5.5vw, 74px); padding-bottom:clamp(48px, 5.5vw, 74px); } .protecao__txt h2{ color:var(--branco); margin-bottom:.35em; } .protecao__txt p{ color:var(--cinza-2); max-width:56ch; margin-bottom:1.6em; } .protecao__acoes{ display:flex; gap:12px; flex-wrap:wrap; } .protecao__figura{ position:relative; margin:0; grid-column:2; grid-row:1 / -1; align-self:end; margin-bottom:calc(clamp(48px, 5.5vw, 74px) * -1); } .protecao__figura img{ display:block; width:100%; height:auto; border-radius:var(--r-g) var(--r-g) 0 0; } .protecao__figura::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(to top, var(--tinta) 8%, rgba(20,22,26,0) 100%); } .protecao__lista{ grid-column:1; grid-row:2; list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); } .protecao__item{ display:flex; align-items:center; gap:14px; padding:14px 16px; background:rgba(29,32,39,.88); border:1px solid var(--tinta-3); border-radius:var(--r-m); backdrop-filter:blur(2px); transition:border-color var(--transicao), background var(--transicao), transform var(--transicao); } .protecao__item:hover{ border-color:var(--amarelo); background:var(--tinta-2); transform:translateX(4px); } .protecao__ico{ width:44px; height:44px; flex:none; border-radius:var(--r-p); background:rgba(255,195,29,.14); color:var(--amarelo); display:grid; place-items:center; transition:background var(--transicao), color var(--transicao); } .protecao__item:hover .protecao__ico{ background:var(--amarelo); color:var(--tinta); } .protecao__ico .ico{ width:23px; height:23px; } .protecao__item-txt{ display:flex; flex-direction:column; flex:1; min-width:0; } .protecao__item-txt strong{ font-family:var(--f-titulo); font-size:1.18rem; font-weight:700; letter-spacing:.045em; text-transform:uppercase; color:var(--branco); line-height:1.15; } .protecao__item-txt small{ font-size:.84rem; color:var(--cinza-2); line-height:1.35; } .protecao__seta{ color:var(--cinza); flex:none; } .protecao__item:hover .protecao__seta{ color:var(--amarelo); } .sobre-home{ display:grid; gap:48px; grid-template-columns:minmax(0,440px) minmax(0,1fr); align-items:center; } .sobre-home__img{ position:relative; } .sobre-home__img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-g); box-shadow:var(--sombra-2); } .sobre-home__selo{ position:absolute; right:-16px; top:-16px; background:var(--amarelo); color:var(--tinta); border-radius:var(--r-m); padding:16px 22px; text-align:center; box-shadow:var(--sombra-2); } .sobre-home__selo strong{ display:block; font-family:var(--f-titulo); font-size:2.7rem; line-height:1; color:var(--tinta); } .sobre-home__selo span{ font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; } .sobre-home__txt h2{ margin-bottom:.45em; } .sobre-home__txt p{ color:var(--cinza); font-size:1.04rem; } .sobre-home .destaque-numeros{ grid-template-columns:repeat(3,1fr); } /* aviso flutuante ao adicionar no orçamento */ .recado{ position:absolute; z-index:200; background:var(--tinta); color:var(--branco); font-size:.83rem; font-weight:600; padding:7px 13px; border-radius:var(--r-p); box-shadow:var(--sombra-2); opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; pointer-events:none; white-space:nowrap; } .recado.visivel{ opacity:1; transform:translateY(0); } .recado::after{ content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; background:var(--tinta); transform:translateX(-50%) rotate(45deg); } /* ------------------------------------------------------------------------- 30. PEÇAS DAS PÁGINAS INTERNAS ------------------------------------------------------------------------- */ /* números sobre fundo escuro */ .secao--tinta .numero{ background:var(--tinta-2); border-color:var(--tinta-3); } .secao--tinta .numero strong{ color:var(--amarelo); } .secao--tinta .numero span{ color:var(--cinza-2); } .destaque-numeros--escuro{ margin-bottom:0; } /* bloco de texto no fim do catálogo */ .bloco-seo{ margin-top:44px; padding-top:32px; border-top:1px solid var(--linha); } .bloco-seo h2{ font-size:1.45rem; } .bloco-seo a{ color:var(--tinta); font-weight:600; text-decoration:underline; text-decoration-color:var(--amarelo); text-decoration-thickness:2px; text-underline-offset:3px; } .ficha__desc-nota{ margin-top:26px; padding-top:18px; border-top:1px solid var(--linha); font-size:.87rem; color:var(--cinza); } /* corpo do artigo */ .artigo-corpo__meta{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--cinza); padding-bottom:18px; margin-bottom:24px; border-bottom:1px solid var(--linha); } .artigo-corpo__meta .ico{ color:var(--amarelo-escuro); } .artigo-corpo__cta{ margin-top:44px; padding:28px 30px; background:var(--tinta); border-radius:var(--r-g); display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; } .artigo-corpo__cta h3{ color:var(--branco); margin-bottom:.3em; } .artigo-corpo__cta p{ color:var(--cinza-2); margin:0; font-size:.95rem; max-width:52ch; } /* listas em passos na barra lateral */ .lateral__lista--passos li span{ display:flex; flex-direction:column; padding:8px 11px; font-size:.92rem; color:var(--grafite); border-radius:var(--r-p); } .lateral__lista--passos li + li{ margin-top:2px; } .lateral__lista--passos li:nth-child(odd) span{ background:var(--fundo); } .lateral__lista--passos small{ color:var(--cinza); font-size:.8rem; } .lateral__texto{ font-size:.93rem; line-height:1.6; margin-bottom:14px; } .lateral__texto small{ color:var(--cinza); } /* formulários */ .form h2{ margin-bottom:.3em; } .form__intro{ color:var(--cinza); font-size:.94rem; margin-bottom:26px; } .obrigatorio,.form__intro span{ color:var(--erro); } .form__retorno{ display:flex; gap:14px; align-items:flex-start; margin-top:22px; padding:18px 20px; background:var(--amarelo-fundo); border:1px solid #f0dfa8; border-radius:var(--r-m); } .form__retorno .ico{ color:var(--amarelo-escuro); margin-top:2px; } .form__retorno strong{ display:block; color:var(--tinta); margin-bottom:3px; } .form__retorno p{ margin:0; font-size:.9rem; color:#6b5a1f; } .form__retorno a{ color:var(--tinta); font-weight:600; text-decoration:underline; text-decoration-color:var(--amarelo-escuro); text-decoration-thickness:2px; text-underline-offset:3px; } /* página de busca */ .busca-pagina{ max-width:660px; margin:0 auto 38px; text-align:center; } .busca-pagina h1{ font-size:clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); margin-bottom:.6em; } .busca--grande{ max-width:none; background:var(--branco); border-width:2px; border-radius:var(--r-m); box-shadow:var(--sombra-1); } .busca--grande input{ padding:16px 20px; font-size:1.05rem; } .busca--grande button{ padding:0 24px; margin:4px 4px 4px 0; } .busca-pagina__dica{ margin-top:14px; font-size:.9rem; color:var(--cinza); } .busca-pagina__dica a{ color:var(--tinta); font-weight:600; border-bottom:2px solid var(--amarelo); } .busca-pagina__dica a:hover{ background:var(--amarelo-suave); } .orc-vazio{ background:var(--branco); } /* erro 404 */ .erro-404{ text-align:center; max-width:620px; margin:0 auto 48px; } .erro-404__num{ display:block; font-family:var(--f-titulo); font-size:clamp(5rem, 3rem + 10vw, 9rem); line-height:.9; font-weight:700; color:var(--tinta); text-shadow:.05em .05em 0 var(--amarelo); letter-spacing:-.02em; margin-bottom:.1em; } .erro-404 h1{ font-size:clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); } .erro-404 p{ color:var(--cinza); font-size:1.05rem; margin-bottom:28px; } .erro-404__acoes{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .erro-404__atalhos{ max-width:1080px; margin:0 auto; grid-template-columns:repeat(4, minmax(0,1fr)); } /* ------------------------------------------------------------------------- 31. PERGUNTAS FREQUENTES
nativo: abre e fecha sem JavaScript e funciona no teclado. ------------------------------------------------------------------------- */ .faq__in{ display:grid; gap:40px 56px; grid-template-columns:minmax(0,360px) minmax(0,1fr); align-items:start; } .faq__intro{ position:sticky; top:96px; } .faq__intro h2{ margin-bottom:.4em; } .faq__intro p{ color:var(--cinza); margin-bottom:1.4em; } .faq__lista{ display:grid; gap:10px; } .faq__item{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); transition:border-color var(--transicao), box-shadow var(--transicao); } .faq__item:hover, .faq__item[open]{ border-color:var(--amarelo); } .faq__item[open]{ box-shadow:var(--sombra-1); } .faq__item summary{ list-style:none; cursor:pointer; position:relative; padding:18px 56px 18px 20px; font-family:var(--f-titulo); font-weight:600; font-size:1.14rem; line-height:1.3; color:var(--tinta); } .faq__item summary::-webkit-details-marker{ display:none; } /* sinal de mais desenhado em CSS, vira menos quando abre. Ele mostra o estado da pergunta, então precisa de 3:1: fica escuro, e o amarelo vai para a borda do item */ .faq__item summary::before, .faq__item summary::after{ content:""; position:absolute; top:50%; right:22px; width:14px; height:2px; margin-top:-1px; background:var(--grafite); border-radius:2px; transition:transform var(--transicao); } .faq__item summary::after{ transform:rotate(90deg); } .faq__item[open] summary::after{ transform:rotate(0deg); } .faq__item p{ margin:0; padding:0 20px 20px; color:var(--grafite); font-size:.98rem; line-height:1.65; } /* endereço semântico no rodapé, sem o itálico padrão do navegador */ .rodape address{ font-style:normal; } /* ------------------------------------------------------------------------- 32. CAMPANHA (landing page do Google Ads, /campanha) Página feita para converter: toda seção termina em contato. As regras de tela menor ficam aqui mesmo, junto de cada peça. ------------------------------------------------------------------------- */ /* ---------- topo ---------- */ .camp-topo{ position:relative; overflow:hidden; background:var(--tinta); border-bottom:4px solid var(--amarelo); } /* brilho amarelo atrás da foto, como na seção de proteção da home */ .camp-topo::before{ content:""; position:absolute; right:-8%; top:-30%; width:760px; height:760px; border-radius:50%; background:radial-gradient(circle, rgba(255,195,29,.15), transparent 62%); } /* sem z-index de propósito: o mix-blend-mode da foto precisa enxergar o fundo da seção para o preto da arte sumir */ .camp-topo__in{ position:relative; display:grid; gap:24px 44px; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:end; padding-top:clamp(40px, 5vw, 72px); } .camp-topo__txt{ padding-bottom:clamp(40px, 5vw, 72px); } .camp-topo h1{ color:var(--branco); font-size:clamp(2.1rem, 1.45rem + 2.7vw, 3.5rem); margin-bottom:.4em; } .camp-topo h1 em{ font-style:normal; color:var(--amarelo); } .camp-topo__lead{ color:var(--cinza-2); font-size:1.12rem; max-width:58ch; margin-bottom:1.6em; } .camp-topo__acoes{ display:flex; flex-wrap:wrap; gap:12px; } .camp-topo__nota{ margin:14px 0 0; font-size:.88rem; color:var(--cinza-2); } .camp-selos{ list-style:none; margin:28px 0 0; padding:22px 0 0; border-top:1px solid var(--tinta-3); display:grid; gap:12px 22px; grid-template-columns:repeat(2, minmax(0,1fr)); } .camp-selos li{ display:flex; align-items:center; gap:10px; color:var(--branco); font-size:.95rem; font-weight:500; } .camp-selos .ico{ color:var(--amarelo); } .camp-topo__figura{ position:relative; margin:0; } .camp-topo__figura img{ display:block; width:100%; height:auto; /* a arte tem fundo preto puro: "lighten" deixa aparecer o fundo da seção no lugar do preto, e a máscara apaga a borda de baixo */ mix-blend-mode:lighten; -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent); mask-image:linear-gradient(to bottom, #000 80%, transparent); } /* balão de fala, lembrando a arte antiga da campanha */ .camp-balao{ position:absolute; left:2%; top:12%; max-width:250px; display:flex; align-items:center; gap:12px; padding:13px 18px; background:var(--branco); color:var(--tinta); border-radius:20px; box-shadow:var(--sombra-3); font-family:var(--f-titulo); font-size:1.05rem; line-height:1.15; letter-spacing:.03em; text-transform:uppercase; } .camp-balao::after{ content:""; position:absolute; right:30px; bottom:-11px; border-style:solid; border-width:12px 10px 0 10px; border-color:var(--branco) transparent transparent transparent; } .camp-balao .ico{ width:36px; height:36px; flex:none; color:var(--whats-2); } .camp-balao strong{ display:block; font-weight:700; } /* ---------- problemas ---------- */ .camp-problemas{ display:grid; gap:18px; grid-template-columns:repeat(4, minmax(0,1fr)); } .camp-problema{ display:flex; flex-direction:column; align-items:flex-start; background:var(--branco); border:1px solid var(--linha); border-top:4px solid var(--amarelo); border-radius:var(--r-m); padding:24px 22px; transition:box-shadow var(--transicao), transform var(--transicao); } .camp-problema:hover{ box-shadow:var(--sombra-2); transform:translateY(-3px); } .camp-problema__ico{ width:52px; height:52px; border-radius:var(--r-p); background:var(--tinta); color:var(--amarelo); display:grid; place-items:center; margin-bottom:14px; } .camp-problema__ico .ico{ width:28px; height:28px; } .camp-problema h3{ font-size:1.45rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.3em; } .camp-problema p{ flex:1; font-size:.95rem; color:var(--cinza); margin:0 0 18px; } .camp-problema__btn{ width:100%; padding:11px 14px; font-size:.95rem; } /* link de texto das peças da campanha: preto com sublinhado amarelo */ .camp-link{ display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:.88rem; font-weight:600; color:var(--tinta); text-decoration:underline; text-decoration-color:var(--amarelo); text-decoration-thickness:2px; text-underline-offset:4px; } /* ---------- como funciona ---------- */ .camp-passos{ list-style:none; margin:0; padding:0; display:grid; gap:18px; grid-template-columns:repeat(3, minmax(0,1fr)); } .camp-passo{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); padding:26px 24px; } .camp-passo__num{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; margin-bottom:14px; background:var(--amarelo); color:var(--tinta); font-family:var(--f-titulo); font-size:1.4rem; font-weight:700; } .camp-passo h3{ font-size:1.25rem; margin-bottom:.35em; } .camp-passo p{ font-size:.95rem; color:var(--cinza); margin:0; } /* ---------- produtos e marcas ---------- */ .camp-marcas{ margin-top:40px; text-align:center; } .camp-marcas__titulo{ font-family:var(--f-titulo); font-size:.95rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--grafite); margin:0 0 14px; } .camp-acoes{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; } /* ---------- laje exposta ---------- */ .camp-comparar{ display:grid; gap:18px; grid-template-columns:repeat(2, minmax(0,1fr)); } .camp-opcao{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-m); padding:28px 26px; } .camp-opcao h3{ font-size:1.55rem; margin-bottom:.25em; } .camp-opcao__resumo{ color:var(--grafite); margin-bottom:16px; } .camp-lista{ list-style:none; margin:0 0 6px; padding:0; } .camp-lista li{ position:relative; padding-left:24px; margin-bottom:8px; font-size:.95rem; color:var(--grafite); } .camp-lista li::before{ content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:2px; background:var(--amarelo); } .camp-duvida{ margin-top:18px; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:18px 28px; flex-wrap:wrap; background:var(--tinta); border-radius:var(--r-m); } .camp-duvida p{ margin:0; max-width:64ch; color:var(--cinza-2); } .camp-duvida strong{ color:var(--branco); } /* ---------- linha Impercid ---------- */ .camp-linha{ background:var(--tinta); overflow:hidden; } .camp-linha__in{ display:grid; gap:30px 50px; align-items:center; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding-top:clamp(48px, 5.5vw, 80px); padding-bottom:clamp(48px, 5.5vw, 80px); } .camp-linha__figura{ margin:0; } .camp-linha__figura img{ display:block; width:100%; max-width:555px; height:auto; margin:0 auto; mix-blend-mode:lighten; -webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent); mask-image:linear-gradient(to bottom, #000 82%, transparent); } .camp-linha__txt h2{ color:var(--branco); } .camp-linha__txt p{ color:var(--cinza-2); max-width:56ch; margin-bottom:1.6em; } /* ---------- loja física ---------- */ .pagina-campanha .contato-cartoes{ margin-bottom:0; } /* ---------- barra fixa do celular ---------- */ .camp-barra{ display:none; } @media (max-width:1100px){ .camp-problemas{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:960px){ .camp-topo__in{ grid-template-columns:minmax(0,1fr); } .camp-topo__figura{ display:none; } .camp-passos, .camp-comparar, .camp-linha__in{ grid-template-columns:minmax(0,1fr); } .camp-linha__figura{ order:2; } } @media (max-width:760px){ .camp-barra{ position:fixed; left:0; right:0; bottom:0; z-index:74; display:grid; gap:8px; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--tinta); box-shadow:0 -6px 22px rgba(20,22,26,.28); } .camp-barra a{ min-height:48px; border-radius:var(--r-p); display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--f-titulo); font-weight:700; font-size:1.02rem; letter-spacing:.05em; text-transform:uppercase; } .camp-barra__whats{ background:var(--whats); color:var(--tinta); } .camp-barra__fone{ background:var(--tinta-3); color:var(--branco); } /* a barra substitui o botão flutuante do WhatsApp; o "voltar ao topo" sobe e o rodapé ganha espaço embaixo para o final não ficar atrás da barra */ .pagina-campanha .rodape{ padding-bottom:70px; } .pagina-campanha .flutuante-whats{ display:none; } .pagina-campanha .flutuantes{ bottom:84px; } } @media (max-width:620px){ .camp-problemas, .camp-selos{ grid-template-columns:minmax(0,1fr); } .camp-topo__acoes .btn, .camp-duvida .btn{ width:100%; } .camp-opcao{ padding:24px 20px; } } /* ------------------------------------------------------------------------- 33. CATÁLOGO DO PAINEL (produtos, marcas e fotos vindos do MySQL) ------------------------------------------------------------------------- */ /* lista de categorias longa (quase 40 grupos): rola dentro do bloco para a barra lateral caber na tela e continuar fixa */ .lateral__lista--rolagem{ max-height:440px; overflow-y:auto; overscroll-behavior:contain; margin-right:-8px; padding-right:8px; scrollbar-width:thin; scrollbar-color:var(--cinza-2) transparent; } /* ficha: dado com link (marca, categoria) */ .ficha__dados a.val{ text-decoration:underline; text-decoration-color:var(--amarelo); text-decoration-thickness:2px; text-underline-offset:3px; } /* galeria com miniaturas */ .ficha__foto{ display:block; } .ficha__miniaturas{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .ficha__miniaturas button{ width:64px; height:64px; padding:4px; background:var(--branco); border:2px solid var(--linha); border-radius:var(--r-p); cursor:pointer; transition:border-color var(--transicao); } .ficha__miniaturas button:hover{ border-color:var(--grafite); } .ficha__miniaturas button[aria-current="true"]{ border-color:var(--amarelo); } .ficha__galeria .ficha__miniaturas img{ width:100%; height:100%; aspect-ratio:auto; object-fit:contain; } /* texto técnico do painel: quebras com
, títulos em e tabelas */ .produto-texto{ line-height:1.7; color:var(--grafite); overflow-wrap:anywhere; } .produto-texto strong{ color:var(--tinta); } .produto-texto p{ margin:0 0 1em; } .produto-texto ul,.produto-texto ol{ margin:0 0 1em; padding-left:1.2em; } .produto-texto li{ margin-bottom:.3em; } .produto-texto a{ color:var(--tinta); font-weight:600; text-decoration:underline; text-decoration-color:var(--amarelo); text-decoration-thickness:2px; text-underline-offset:3px; } .produto-texto table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:1em 0; font-size:.92rem; } .produto-texto td,.produto-texto th{ border:1px solid var(--linha); padding:7px 10px; text-align:left; vertical-align:top; } .produto-texto tr:nth-child(odd) td{ background:var(--fundo); } /* logo da marca no cartão */ .marca-card__logo{ height:84px; margin:0 0 14px; display:flex; align-items:center; justify-content:flex-start; } .marca-card__logo img{ max-width:180px; max-height:72px; width:auto; height:auto; object-fit:contain; } .marca-card__logo--texto{ font-family:var(--f-titulo); font-size:1.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1; color:var(--cinza); } /* foto grande da ficha: botão que abre o lightbox */ .ficha__ampliar{ display:block; width:100%; padding:0; margin:0; background:none; border:0; border-radius:var(--r-m); position:relative; cursor:zoom-in; } .ficha__lupa{ position:absolute; right:6px; bottom:6px; width:42px; height:42px; display:grid; place-items:center; background:var(--tinta); color:var(--branco); border-radius:50%; box-shadow:var(--sombra-1); transition:background var(--transicao), color var(--transicao), transform var(--transicao); } .ficha__lupa .ico{ width:21px; height:21px; } .ficha__ampliar:hover .ficha__lupa{ background:var(--amarelo); color:var(--tinta); transform:scale(1.06); } /* lightbox (js/app.js, item 12) */ html.lightbox-aberto{ overflow:hidden; } .lightbox{ position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#0e0f12; color:var(--branco); overscroll-behavior:contain; -webkit-user-select:none; user-select:none; } /* display só no aberto: fechado, o precisa continuar escondido */ .lightbox[open]{ display:grid; grid-template-rows:auto minmax(0,1fr) auto; } .lightbox::backdrop{ background:rgba(12,13,16,.6); } .lightbox [hidden]{ display:none!important; } .lightbox__topo{ display:flex; align-items:center; gap:12px; padding:12px 16px; } .lightbox__contador{ margin:0; font-family:var(--f-titulo); font-size:1.05rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#dfe3e8; } .lightbox__ferramentas{ display:flex; gap:8px; margin-left:auto; } .lightbox__botao,.lightbox__nav{ display:grid; place-items:center; width:44px; height:44px; padding:0; background:rgba(255,255,255,.08); color:var(--branco); border:1px solid rgba(255,255,255,.22); border-radius:50%; cursor:pointer; transition:background var(--transicao), border-color var(--transicao), opacity var(--transicao); } .lightbox__botao:hover,.lightbox__nav:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5); } .lightbox__botao[aria-disabled="true"]{ opacity:.35; cursor:default; } .lightbox__botao[aria-disabled="true"]:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); } .lightbox__botao .ico,.lightbox__nav .ico{ width:22px; height:22px; } .lightbox__palco{ position:relative; overflow:hidden; display:grid; place-items:center; touch-action:none; cursor:zoom-in; } .lightbox__palco.ampliada{ cursor:grab; } .lightbox__palco.ampliada:active{ cursor:grabbing; } /* fundo branco: muita foto do painel é PNG transparente com texto escuro */ .lightbox__img{ max-width:none; max-height:none; background:var(--branco); border-radius:4px; transform-origin:50% 50%; opacity:0; transition:opacity .2s; -webkit-user-drag:none; } .lightbox__img.pronta{ opacity:1; } .lightbox__img--animar{ transition:transform .25s cubic-bezier(.2,.7,.2,1), opacity .2s; } .lightbox__palco.carregando::after{ content:""; position:absolute; top:50%; left:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border:3px solid rgba(255,255,255,.25); border-top-color:var(--amarelo); border-radius:50%; animation:lightbox-gira .8s linear infinite; } @keyframes lightbox-gira{ to{ transform:rotate(360deg); } } .lightbox__aviso{ position:absolute; left:16px; right:16px; top:50%; transform:translateY(-50%); margin:0; text-align:center; color:#dfe3e8; } .lightbox__nav{ position:absolute; top:50%; z-index:2; width:50px; height:50px; margin-top:-25px; background:rgba(12,13,16,.55); } .lightbox__nav--anterior{ left:16px; } .lightbox__nav--proxima{ right:16px; } /* com a foto ampliada as setas sairiam por cima dela (as setas do teclado continuam trocando) */ .lightbox--ampliada .lightbox__nav{ opacity:0; pointer-events:none; } .lightbox__rodape{ display:grid; justify-items:center; gap:10px; padding:10px 16px 16px; } .lightbox__miniaturas{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .lightbox__miniaturas button{ width:56px; height:56px; padding:3px; background:var(--branco); border:2px solid transparent; border-radius:var(--r-p); opacity:.55; cursor:pointer; transition:opacity var(--transicao), border-color var(--transicao); } .lightbox__miniaturas button:hover{ opacity:.85; } .lightbox__miniaturas button[aria-current="true"]{ border-color:var(--amarelo); opacity:1; } .lightbox__miniaturas img{ width:100%; height:100%; object-fit:contain; } .lightbox__dica{ margin:0; font-size:.86rem; color:#c3c8cf; text-align:center; } @media (max-width:620px){ .lightbox__topo{ padding:10px 12px; } /* no celular a foto ocupa a largura toda: troca deslizando ou pelas miniaturas */ .lightbox__nav{ display:none; } .lightbox__miniaturas button{ width:48px; height:48px; } } /* aviso de instabilidade (503) */ .erro-404__nota{ margin:22px auto 0; font-size:.95rem; } .erro-404__nota a{ color:var(--tinta); font-weight:600; text-decoration:underline; text-decoration-color:var(--amarelo); text-decoration-thickness:2px; text-underline-offset:3px; } /* no celular a lista de produtos vem antes da barra lateral */ @media (max-width:960px){ .catalogo > .lateral{ order:2; } .lateral__lista--rolagem{ max-height:320px; } } /* ------------------------------------------------------------------------- 34. RESPONSIVO ------------------------------------------------------------------------- */ @media (max-width:1180px){ .menu__lista > li > a{ padding:16px 12px; font-size:1rem; } .topo__in{ gap:18px; } .busca{ max-width:320px; } } @media (max-width:1080px){ .rodape__topo{ grid-template-columns:1fr 1fr; gap:32px; } .artigo--largo{ grid-column:auto; flex-direction:column; } .artigo--largo .artigo__img{ flex:auto; aspect-ratio:16/10; } .artigo--largo .artigo__corpo{ padding:20px; } .artigo--largo h3{ font-size:1.3rem; } .vantagens__grade{ grid-template-columns:repeat(2,1fr); } .ficha{ grid-template-columns:1fr; gap:28px; } .ficha__galeria{ max-width:420px; } .sobre-home{ grid-template-columns:minmax(0,1fr); gap:40px; } .sobre-home__img{ max-width:420px; } .sobre-home .destaque-numeros{ grid-template-columns:repeat(3, minmax(0,1fr)); } } @media (max-width:960px){ .faq__in{ grid-template-columns:minmax(0,1fr); gap:26px; } .faq__intro{ position:static; } .colunas,.colunas--inversa{ grid-template-columns:minmax(0,1fr); } .lateral{ position:static; } .lateral__bloco{ margin-bottom:14px; } .topo__fone-txt{ display:none; } .topo__hamburguer{ display:grid; } .busca{ order:3; max-width:none; flex:1 1 100%; } .topo__in{ flex-wrap:wrap; padding-bottom:14px; min-height:auto; padding-top:14px; gap:14px; } .topo__logo{ margin-right:auto; } .topo__acoes{ margin-left:0; } /* menu vira gaveta */ .menu{ position:fixed; top:0; right:0; bottom:0; left:auto; width:min(330px, 86vw); z-index:90; background:var(--tinta); transform:translateX(105%); transition:transform .3s cubic-bezier(.4,.1,.2,1), visibility .3s; overflow-y:auto; box-shadow:none; } .menu.aberto{ transform:translateX(0); box-shadow:var(--sombra-3); } .menu__in{ flex-direction:column; align-items:stretch; padding-top:64px; padding-bottom:28px; } .menu__fechar{ display:grid; place-items:center; position:absolute; top:14px; right:16px; width:42px; height:42px; border:0; border-radius:var(--r-p); background:var(--tinta-3); color:var(--branco); cursor:pointer; } .menu__lista{ flex-direction:column; align-items:stretch; } .menu__lista > li{ border-bottom:1px solid var(--tinta-3); } .menu__lista > li > a{ padding:14px 4px; justify-content:space-between; } .menu__lista > li > a::after{ display:none; } .menu__cta{ margin-top:22px; display:flex; flex-direction:column; gap:10px; } .menu__cta .btn{ width:100%; } .menu__cta-loja{ display:flex; background:var(--tinta-3); color:var(--amarelo); border-color:var(--tinta-3); } .menu__cta-loja:hover{ background:var(--amarelo); color:var(--tinta); } /* gaveta fechada não pode receber foco nem criar rolagem */ .menu:not(.aberto){ visibility:hidden; } .menu.aberto{ visibility:visible; } .menu__sub{ position:static; min-width:0; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-radius:0; background:transparent; display:none; padding-bottom:10px; } .menu__drop.aberto > .menu__sub{ display:block; } .menu__sub-in{ flex-direction:column; padding:0; gap:14px; } .menu__sub-titulo{ color:var(--amarelo); margin-bottom:.4rem; } .menu__sub-col--categorias{ min-width:0; } .menu__sub-grupos{ columns:auto; } .menu__sub-col li a{ color:var(--cinza-2); padding:6px 4px; } .menu__sub-col li a:hover{ background:transparent; color:var(--amarelo); padding-left:8px; } .menu__sub-todos{ color:var(--amarelo)!important; text-decoration:none; margin-top:1px; padding:6px 4px; } .menu__sub-todos:hover{ background:transparent; padding-left:8px; } .menu__sub-col--destaque{ background:var(--tinta-2); } .menu__sub-marcas a{ background:var(--tinta-3); border-color:var(--tinta-3); color:var(--cinza-2); } .form__grade{ grid-template-columns:1fr; } .cta-final__in{ padding-top:36px; padding-bottom:36px; } .rodape__parceiros{ grid-template-columns:1fr; } .protecao__in{ grid-template-columns:minmax(0,1fr); gap:28px; } .protecao__txt p{ max-width:none; } .protecao__figura{ display:none; } .protecao__lista{ grid-column:1; grid-row:auto; } .protecao::before{ right:-20%; top:-40%; } } @media (max-width:760px){ .barra-topo__frase{ display:none; } .barra-topo__in{ justify-content:center; } .barra-topo__acoes{ gap:14px; } .barra-topo__link{ white-space:nowrap; font-size:.8rem; } /* no celular a vitrine mostra um card grande e ocupa ~390px: apertamos a caixa e o espaco logo abaixo dela */ .vitrine__quadro{ padding:8px; } .vitrine__quadro iframe{ height:410px; } .vitrine__aviso{ min-height:410px; } .vitrine__pe{ margin-top:12px; } .banner__nav{ display:none; } .banner__slide,.banner__in{ min-height:auto; } .banner__in{ padding-top:42px; padding-bottom:78px; } .banner__acoes .btn{ width:100%; } /* no celular o texto ocupa toda a largura: o véu precisa ser vertical */ .banner__veu{ background:linear-gradient(to top, rgba(20,22,26,.96) 10%, rgba(20,22,26,.88) 55%, rgba(20,22,26,.66) 100%); } .secao__cabeca{ align-items:flex-start; } .carrossel__nav{ display:none; } .orc-tabela thead{ display:none; } .orc-tabela,.orc-tabela tbody,.orc-tabela tr,.orc-tabela td{ display:block; width:100%; } .orc-tabela tr{ border-bottom:1px solid var(--linha); padding:6px 0; } .orc-tabela td{ border:0; padding:8px 16px; } .orc-tabela td[data-rot]::before{ content:attr(data-rot); display:block; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--cinza); margin-bottom:4px; } .flutuantes{ right:16px; bottom:16px; gap:9px; } .flutuante-whats span{ display:none; } .flutuante-whats{ padding:13px; border-radius:50%; } .flutuante-topo{ width:46px; height:46px; } } @media (max-width:620px){ .barra-topo__link:first-child{ display:none; } /* cabeçalho compacto: logo numa linha com três botões, busca embaixo */ .topo__in{ gap:12px; } .topo__fone{ display:none; } .topo__logo img{ height:40px; } .topo__acoes{ gap:10px; } /* no cabeçalho o botão da loja vira só ícone (o rótulo continua na gaveta) */ .topo__acoes .btn--loja{ width:46px; height:46px; padding:0; border-radius:var(--r-p); background:var(--amarelo); color:var(--tinta); border-color:var(--amarelo); } /* texto some da tela mas continua no link: sem ele o link fica sem nome para leitor de tela (alerta do PageSpeed) */ .topo__acoes .btn--loja span{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .topo__acoes .btn--loja .ico{ width:22px; height:22px; } /* o selo de anos precisa ficar dentro da foto para não criar rolagem lateral */ .sobre-home__selo{ right:12px; top:12px; padding:11px 15px; } .sobre-home__selo strong{ font-size:2.1rem; } .sobre-home__selo span{ font-size:.7rem; } } @media (max-width:560px){ .vantagens__grade{ grid-template-columns:1fr; } .rodape__topo{ grid-template-columns:1fr; gap:28px; } .grade-produtos{ grid-template-columns:repeat(2,1fr); gap:12px; } .erro-404__atalhos{ grid-template-columns:repeat(2, minmax(0,1fr)); } .protecao__lista{ grid-template-columns:minmax(0,1fr); } .protecao__acoes .btn{ width:100%; } .produto__corpo{ padding:12px 12px 14px; } .produto__nome{ font-size:1.02rem; } .produto__pe .btn{ font-size:.78rem; padding:8px 6px; } .produto__add{ width:38px; } .ficha__acoes .btn{ flex:1 1 100%; justify-content:center; } .destaque-numeros, .sobre-home .destaque-numeros{ grid-template-columns:repeat(2, minmax(0,1fr)); } .numero strong{ font-size:2.1rem; } .capa__in{ padding-top:36px; padding-bottom:36px; } .wrap{ padding-left:16px; padding-right:16px; } } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }