/* ============================================================ VOXTER | mockup home v2 Cores amostradas do LOGO oficial (logovoxterpeq.png): vermelho #bc5257 (88% dos pixels) dourado #dcab5b (11%) Escuro = brand-navy #0b1220 da paleta ja registrada. Sombras tingidas de navy, nunca preto neutro. Tipografia: Google Sans (display + texto) + Google Sans Code (rotulo tecnico) Raio: variavel, de 10px a pill. A marca tem terminais arredondados. ============================================================ */ :root{ /* marca: vermelho definido pelo usuario (#a8282a, o carmim do estande) */ --carmim:#a8282a; --carmim-vivo:#c33a36; --carmim-fundo:#7d1d24; --dourado:#dcab5b; /* acento isolado (nao faz parte da paleta da marca): so' pro valor principal do simulador de "Como o dinheiro entra", copiado igual da LP original -- contraste verde-neon proposital contra o navy, pedido explicito do usuario ("a cor do valor em tom verde da um contraste legal"). */ --verde-simulador:#adff2f; /* escuros: navy da marca */ --navy:#000033; --navy-2:#111c33; --navy-3:#1a2742; /* claros: base neutra fria (pedido explicito do usuario, ponto de partida rgb(248 250 252)) -- osso e' esse tom direto, osso-2 e' um passo abaixo, sutilmente mais escuro/firme, pro contraste entre camadas continuar existindo nos mesmos lugares (chips, campos desabilitados etc). */ --osso:#f8fafc; --osso-2:#e7ebf1; /* fundo neutro atras das fotos de produto do catalogo -- 1a tentativa (#e2e8f0, o slate-200 do voxter.com.br/marketplace) ficou azulada demais pro usuario; cinza quase-branco, so' o suficiente pra diferenciar da foto/card branco ao redor. */ --foto-fundo:#f0f0f0; --tinta:#0b1220; --tinta-70:rgba(11,18,32,.72); --tinta-45:rgba(11,18,32,.5); --linha:rgba(0,0,51,.13); --linha-clara:rgba(246,242,237,.16); /* sombra tingida de navy */ --sombra-sm:0 2px 8px rgba(0,0,51,.08); --sombra-md:0 10px 30px rgba(0,0,51,.13); --sombra-lg:0 24px 60px rgba(0,0,51,.22); /* raio discreto: botao 6px, nada exagerado */ --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --pill:999px; --fonte:"Google Sans","Product Sans",system-ui,sans-serif; --mono:"Google Sans Code",ui-monospace,monospace; --gut:clamp(20px,5vw,72px); --max:1320px; /* altura real do nav (+ faixa de migalhas, em pagina interna) fixo por cima do conteudo -- medida ao vivo por estadoDaBarra() em site.js. O valor aqui e' so' o chute inicial, antes do JS rodar. */ --secao-offset:110px; /* altura da barra de abas fixa do rodape, so' existe <700px (ver TAB BAR) -- variavel unica pra' quem precisa abrir espaco/desviar dela (.subir, o widget externo, o padding de baixo da pagina) ficar sempre em sincronia. */ --barra-inf:60px; } /* ---------- PALCO FIXO (1000px -> 1920px) ---------- O site e' desenhado para 1920 de largura e aparece nessa mesma otica em qualquer tela menor, so' reduzido -- como um filme gravado em 1920x1080, que nao remonta o enquadramento conforme a TV. Decisao do usuario, pelo motivo dele: sem isso ele nao controla o que o visitante ve'. POR QUE zoom E NAO transform:scale O site tem barra fixa no topo, elementos sticky e um widget de terceiro injetado na pagina. transform:scale nao muda o layout, so' o desenho: seria preciso cravar width:1920px, compensar a altura na mao e consertar todo position:fixed, que passa a se ancorar no elemento transformado. zoom refaz o LAYOUT na medida nova, entao fixed, sticky e o widget continuam se comportando como antes. E, ao contrario de scale, nao borra: a fonte continua vetorial. POR QUE EM CSS E NAO EM JAVASCRIPT Houve uma versao em script, calculando largura/1920 a cada resize. Ela aplicava o zoom e, em algum ponto depois da carga, ele voltava a 1 -- visto ao vivo, com --palco-h ainda valendo e o zoom vazio. Era a "piscada" relatada: a pagina abria no tamanho certo e saltava pra grande. Em CSS nao ha' gatilho que possa desfazer, a regra vale desde o primeiro desenho e nao depende de JavaScript ligado. POR QUE EM DEGRAUS CSS nao divide comprimento por comprimento: calc(100vw / 1920px) e' invalido, nao da' pra tirar a razao direto. Com faixas de 40px, a largura de layout que o desenho recebe fica entre 1920 e ~1997 -- 4%, que nao se percebe. O zoom na raiz faz o layout preencher a janela em qualquer fator, entao nunca sobra faixa branca na borda. --palco-h: a altura da janela convertida pra medida do palco. Unidade de viewport NAO participa do zoom (100svh continua sendo a janela real), entao sem isto o hero nascia com 768 em vez de 1080 e o zoom ainda o encolhia: 71% da altura da tela em vez de 100%. Medido. PISO de 0.62: abaixo de ~1190px o fator para de cair, senao o texto do corpo chegaria a 9px. Dali pra baixo o enquadramento volta a abrir um pouco. Abaixo de 1000px nada disso vale: comeca a faixa de celular e tablet, que tem layout proprio e nao pode ser encolhida junto. */ @media (min-width:1000px) and (max-width:1919px){ :root{ zoom:var(--palco-z); --palco-h:calc(100svh / var(--palco-z)); /* --palco-l: a largura da janela, ja' na medida do palco e ja' sem a barra de rolagem. Serve pra quem precisa sangrar de ponta a ponta da tela: 100vw sozinho e' a janela REAL e, dentro do layout ampliado do palco, cobre so' uma fracao dele. */ --palco-l:calc((100vw - var(--barra-rolagem,0px)) / var(--palco-z)); } } @media (min-width:1000px) and (max-width:1039px){:root{--palco-z:0.62}} @media (min-width:1040px) and (max-width:1079px){:root{--palco-z:0.62}} @media (min-width:1080px) and (max-width:1119px){:root{--palco-z:0.62}} @media (min-width:1120px) and (max-width:1159px){:root{--palco-z:0.62}} @media (min-width:1160px) and (max-width:1199px){:root{--palco-z:0.62}} @media (min-width:1200px) and (max-width:1239px){:root{--palco-z:0.625}} @media (min-width:1240px) and (max-width:1279px){:root{--palco-z:0.6458}} @media (min-width:1280px) and (max-width:1319px){:root{--palco-z:0.6667}} @media (min-width:1320px) and (max-width:1359px){:root{--palco-z:0.6875}} @media (min-width:1360px) and (max-width:1399px){:root{--palco-z:0.7083}} @media (min-width:1400px) and (max-width:1439px){:root{--palco-z:0.7292}} @media (min-width:1440px) and (max-width:1479px){:root{--palco-z:0.75}} @media (min-width:1480px) and (max-width:1519px){:root{--palco-z:0.7708}} @media (min-width:1520px) and (max-width:1559px){:root{--palco-z:0.7917}} @media (min-width:1560px) and (max-width:1599px){:root{--palco-z:0.8125}} @media (min-width:1600px) and (max-width:1639px){:root{--palco-z:0.8333}} @media (min-width:1640px) and (max-width:1679px){:root{--palco-z:0.8542}} @media (min-width:1680px) and (max-width:1719px){:root{--palco-z:0.875}} @media (min-width:1720px) and (max-width:1759px){:root{--palco-z:0.8958}} @media (min-width:1760px) and (max-width:1799px){:root{--palco-z:0.9167}} @media (min-width:1800px) and (max-width:1839px){:root{--palco-z:0.9375}} @media (min-width:1840px) and (max-width:1879px){:root{--palco-z:0.9583}} @media (min-width:1880px) and (max-width:1919px){:root{--palco-z:0.9792}} *{box-sizing:border-box} /* par de .so-desk (texto que so' aparece <700px, ver TAB BAR): oculta por padrao, .so-desk{display:none} dentro do media de 700px liga o par certo. */ .so-movel{display:none} html{scroll-behavior:smooth} /* respiro pro nav fixo (+ faixa de migalhas, em pagina interna): sem isso, um link do submenu ou do mega jogava o topo da section pra debaixo da barra, cortado. --secao-offset e' medido ao vivo em site.js (estadoDaBarra). */ section[id]{scroll-margin-top:var(--secao-offset)} /* mesma folga do nav fixo, mas pros alvos do indice de leitura (h3 dentro do corpo do post, nao section) -- sem isso o clique no indice pulava pro topo exato (y=0), escondendo o comeco do trecho atras do nav fixo. */ .post-leitor-corpo h3[id]{scroll-margin-top:calc(var(--secao-offset) + 16px)} body{ margin:0;background:var(--osso);color:var(--tinta); font-family:var(--fonte); /* 1.0625rem e nao 17px: com a raiz em 16px da' exatamente os mesmos 17px, mas agora o corpo SEGUE a raiz -- e' o que faz a escada de desktop (ver o @media de min-width:1000px, logo depois do :root) alcancar o texto corrido, nao so' os titulos. */ font-size:1.0625rem;line-height:1.6; cursor:default;-webkit-font-smoothing:antialiased; /* clip, nao hidden: overflow-x:hidden cria scrollport e quebra position:sticky */ overflow-x:clip; } a{color:inherit;cursor:pointer;text-decoration:none} img{max-width:100%;display:block} button{font:inherit;cursor:pointer} /* barra de rolagem escura sobre section escura, clara sobre clara -- o data-tema no e trocado por JS conforme a section em foco (ver script). Comeca escuro porque a pagina abre no hero, que e escuro. */ ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--navy)} ::-webkit-scrollbar-thumb{background:rgba(220,171,91,.45);border:2px solid var(--navy);border-radius:var(--pill);background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:rgba(220,171,91,.7)} :root[data-tema="claro"] ::-webkit-scrollbar-track{background:var(--osso)} :root[data-tema="claro"] ::-webkit-scrollbar-thumb{background:rgba(0,0,51,.28);border-color:var(--osso)} :root[data-tema="claro"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,51,.42)} .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)} .rot{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase} .idx{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;opacity:.55} h1,h2,h3{font-family:var(--fonte);font-weight:700;margin:0;line-height:1.04;letter-spacing:-.028em} h1{font-size:clamp(2.25rem,5.1vw,4.4rem)} h2{font-size:clamp(1.9rem,4vw,3.2rem)} h3{font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.2;letter-spacing:-.02em} p{margin:0} .lede{font-size:clamp(1.02rem,1.4vw,1.24rem);line-height:1.55;color:var(--tinta-70)} /* ---------- nav ---------- */ /* centralizacao de verdade: logo e nav-acoes crescem em partes IGUAIS (flex:1 nos dois), entao o menu (largura natural, entre eles) fica sempre exatamente no meio do nav -- nao importa se um lado e' mais largo que o outro por natureza. space-between so equilibra os VAOS entre os itens, nao centraliza o item do meio em relacao a tela: com nav-acoes mais largo que a logo (o caso real aqui, por causa do botao de vendas + login), o menu ficava puxado pra esquerda. */ .nav{ position:relative;z-index:1;display:flex;align-items:center; border:1px solid transparent; /* reserva a borda que so aparece no estado solido */ gap:24px;padding:16px var(--gut); transition:background .3s,border-color .3s,box-shadow .3s,margin .3s,padding .3s,border-radius .3s; } /* rolou: a barra branca tambem descola das bordas e vira um objeto flutuante. O padding lateral desconta a margem, entao o logo nao pula de lugar na transicao. Cor chapada, sem blur: e um objeto, nao um vidro. */ .nav.solido{ margin:10px;border-radius:var(--r-md); padding:12px calc(var(--gut) - 10px); } /* A SUPERFICIE BRANCA e' um elemento, nao um background. Como background ela so' podia aparecer por transicao de cor, ou seja, por fade -- e fade e' justamente o que nao se quer aqui. Como elemento, ela ENTRA por geometria: desdobra pra baixo a partir da borda de cima do nav (scaleY + transform-origin:top). E a borda de cima do nav, no estado de topo, e' exatamente onde a pilula de utilidades acaba (10 de padding + 48 de altura = 58; o nav comeca em 58). As duas brancas nascem encostadas, entao o que se ve' e' UMA massa branca escorrendo por cima do menu, e nao uma segunda barra acendendo. inset:-1px (e nao 0) pra' laje cobrir tambem o anel de 1px que o .nav reserva com border:transparent -- senao sobraria um fio do fundo aparecendo em volta da pilula. A borda e a sombra moram aqui, nao no .nav, pra' nao existir mais nenhuma propriedade de COR mudando na transicao. scaleY(0) nao pinta nada: area zero nao gera sombra. Era por isso que nem height:0 nem clip-path serviam -- um deixa a sombra vazar, o outro recorta a sombra fora no estado final. */ .nav::before{ content:'';position:absolute;inset:-1px;z-index:-1; border-radius:inherit;background:var(--osso); border:1px solid var(--linha);box-shadow:var(--sombra-md); transform:scaleY(0);transform-origin:top; transition:transform .26s cubic-bezier(.2,.8,.2,1); } .nav.solido::before{transform:scaleY(1)} /* faixa de migalhas grudada por baixo (ver .migalhas-faixa.presa): vira UMA pilula so, em duas cores -- entao a base do menu perde o arredondado e a sombra propria (quem fecha a forma embaixo e' a faixa, nao o menu; sombra dupla no meio ficaria estranha, como se houvesse profundidade onde nao ha). */ .nav.solido.colado{border-bottom-left-radius:0;border-bottom-right-radius:0} .nav.solido.colado::before{border-bottom-color:transparent;box-shadow:none} /* o espaco flexivel entre logo e menu precisa crescer pra empurrar o menu pro centro, mas quem cresce e' esta caixa -- nao o , senao a area vazia toda virava clicavel (link de volta pra home so' deveria valer em cima do logo mesmo). */ .marca-cx{flex:1 1 0;display:flex;align-items:center} .marca img{height:26px;width:auto} /* Sobre o hero escuro entra a arte MONOCROMATICA de verdade (_inc/nav.php traz as duas no HTML), nao a colorida com filter:brightness(0) invert(1). O monocromatico tem um corte entre o chevron e o traco de baixo; sem ele, com tudo branco, os dois encostavam e o icone virava um borrao. Nada de filtro aqui: trocar a arte E' a correcao. */ /* As duas artes ficam SOBREPOSTAS e trocam por opacidade. Com display none/block (como era antes) a troca acontece num quadro so' e le-se como piscada; o cruzado de opacidade acompanha o resto da barra, que ja' anima em .3s. A colorida fica no fluxo e e' ela quem reserva o espaco; a monocromatica vai por cima, absoluta, pra largura do logo nao oscilar durante o cruzado. */ .marca{position:relative;display:inline-flex;align-items:center} .marca .marca-cor,.marca .marca-mono{transition:opacity .34s cubic-bezier(.4,0,.2,1)} .marca .marca-mono{position:absolute;inset:0 auto 0 0;opacity:0} .marca .marca-cor{opacity:1} .marca.branca .marca-cor{opacity:0} .marca.branca .marca-mono{opacity:1} .menu{display:flex;align-items:center;gap:6px;flex:0 0 auto} .menu > a,.menu > .tem-sub-item > a{ text-decoration:none;font-size:14.5px;font-weight:500;color:rgba(246,242,237,.85); padding:8px 14px;border-radius:var(--r-sm);transition:background .3s,color .3s,border-color .3s; } /* so os itens da capsula: .menu a:hover tem especificidade maior que .mega a e pintava de branco o titulo do item sobre fundo claro */ /* .ativo entra na mesma regra do hover: o item da secao que esta na tela (ver scrollspy no script) fica com a mesma cor, sem duplicar declaracao */ .menu > a:hover,.menu > .tem-sub-item > a:hover, .menu > a.ativo,.menu > .tem-sub-item > a.ativo{background:rgba(246,242,237,.14);color:#fff} .nav.solido .menu a{color:var(--tinta-70)} .nav.solido .menu a:hover,.nav.solido .menu a.ativo{background:rgba(188,82,87,.1);color:var(--carmim)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:12px 22px;border:0;border-radius:var(--r-sm); background:var(--carmim);color:#fff;font-size:14.5px;font-weight:500; text-decoration:none;box-shadow:var(--sombra-sm); transition:background .2s,transform .2s,box-shadow .2s; } .btn:hover{background:var(--carmim-vivo);transform:translateY(-1px);box-shadow:var(--sombra-md)} .btn.vazado{background:rgba(0,0,51,.34);backdrop-filter:blur(8px);border:1px solid rgba(246,242,237,.42);box-shadow:none} .btn.vazado:hover{background:rgba(246,242,237,.16)} .btn.linha{background:transparent;color:var(--carmim);border:1px solid var(--carmim);box-shadow:none} .btn.linha:hover{background:var(--carmim);color:#fff} /* branco em faixa escura: o .btn.linha e' carmim com borda carmim, que em cima de navy quase some. Mesma receita que .cta .btn ja' usava escopada na caixa do CTA, agora como variante nomeada e reusavel. */ .btn.branco{background:#fff;color:var(--carmim);box-shadow:var(--sombra-sm)} .btn.branco:hover{background:var(--osso);color:var(--carmim)} .burger{display:none;background:rgba(246,242,237,.14);border:0;padding:9px;border-radius:var(--r-sm);color:#fff; transition:background .3s,color .3s} .nav.solido .burger{background:rgba(0,0,51,.07);color:var(--tinta)} /* logins: botao de icone ao lado do CTA, nao mais um item de texto no menu */ /* justify-content:flex-end + min-width travado por JS (ver script): o botao de vendas recolhe/expande por dentro dessa largura reservada, sem que o bloco como um todo mude de tamanho -- e sem isso, o menu central balançava a cada recolhimento, porque o space-between do .nav recalculava com o vizinho. */ .nav-acoes{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:1 1 0} .tem-sub{position:relative;display:flex} .btn-login{ display:flex;align-items:center;justify-content:center; width:42px;height:42px;border:0;border-radius:var(--r-sm); background:#fff;color:var(--carmim);box-shadow:var(--sombra-sm); transition:background .3s,color .3s,border-color .3s,transform .2s; } .btn-login svg{width:20px;height:20px} .btn-login:hover{transform:translateY(-1px)} /* altura igual ao botao de login (42px): sem isso o botao de vendas herdava a altura do padding+linha do texto e ficava ~5px mais alto que o icone ao lado */ .nav-acoes .btn{height:42px;padding-block:0} /* barra branca: inverte pro navy, senao branco sobre branco some */ .nav.solido .btn-login{background:var(--navy);color:#fff} /* botao de vendas: abre com o rotulo, recolhe pra icone depois de 4s e volta a abrir no hover. Recolher sem poder reabrir esconderia a informacao de vez. Largura por max-width no rotulo: animar width de auto nao transiciona. */ .btn-vendas{overflow:hidden;white-space:nowrap;gap:0;transition:padding .55s cubic-bezier(.2,.7,.3,1),background .3s,box-shadow .3s,transform .2s} .btn-vendas .rotulo{display:inline-block;max-width:260px;opacity:1;transition:max-width .55s cubic-bezier(.2,.7,.3,1),opacity .3s} /* o PNG do flaticon e preto puro com alpha: o filtro pinta de branco. Aqui serve, porque e' um pictograma de uma forma so'; o LOGO da Voxter nao pode ser pintado assim (ver .marca), que a arte monocromatica dele tem um corte que a colorida nao tem. Sobe .5px porque a cauda do balao joga o peso visual pra baixo -- centro geometrico nao e centro optico. */ .btn-vendas img{width:0;height:18px;flex:none;opacity:0;position:relative;top:-.5px; filter:brightness(0) invert(1);transition:width .5s cubic-bezier(.2,.7,.3,1),opacity .3s} /* um de cada vez: aberto so o texto, recolhido so o icone */ .btn-vendas.recolhido img{width:18px;opacity:1} .btn-vendas.recolhido:hover img{width:0;opacity:0} .btn-vendas.recolhido{padding-left:13px;padding-right:13px} .btn-vendas.recolhido .rotulo{max-width:0;opacity:0} .btn-vendas.recolhido:hover{padding-left:22px;padding-right:22px} .btn-vendas.recolhido:hover .rotulo{max-width:260px;opacity:1} /* ---------- FERRAMENTAS na home: o baralho ------------------------------- Pedido explicito: carrossel horizontal de cartas EMPILHADAS. Entao elas se sobrepoem de verdade (margin-left negativa), e nao e' uma fileira de caixas iguais separadas por vao. A sobreposicao come' 38px da carta anterior -- por isso o padding direito da carta e' maior que o esquerdo: o que a vizinha tampa e' margem, nunca texto. z-index crescente (--n, escrito no HTML) pra pilha cair sempre pro mesmo lado; no hover a carta sobe e vai pra frente de todas. justify-content:safe center: mesma correcao do carrossel de depoimentos -- em tela larga a fila para de rolar e ficaria encostada a' esquerda. */ .fer-home{padding:clamp(66px,8vw,120px) 0;background:var(--osso)} /* --fer-junto / --fer-solto: os dois estados do baralho, num numero so' cada. Parado, as cartas se cobrem bastante (e' um baralho, nao uma fileira); com o mouse em cima da fileira, elas se afastam pra poder ler. A transicao e' de margin-left mesmo, nao de transform: as cartas precisam REALMENTE ocupar mais largura quando abrem, senao a ultima ficaria fora da conta da rolagem e a volta infinita erraria o periodo. */ /* TRES numeros por estado, e eles andam juntos de proposito. Parado o baralho e' apertado; com o mouse na fileira ele abre. O risco obvio dessa ideia era cortar texto: carta de 288px coberta em 96px deixa 192px a' mostra, e a primeira versao cortava titulo e descricao no meio da palavra (medido na previa, feio de verdade). A saida nao foi afrouxar o aperto, foi manter a COLUNA DE TEXTO fixa em 170px nos dois estados: parada, a carta e' larga (288) com folga grande a' direita (96) -- a vizinha cobre exatamente essa folga, nunca o texto; aberta, a carta estreita (230) e a folga encolhe (38), e o texto continua nos mesmos 170px. Como largura e folga andam na mesma curva, a conta 288-22-96 = 230-22-38 = 170 vale tambem NO MEIO da animacao: a coluna de texto nao muda um pixel, entao nao ha' refluxo de palavra nenhuma. De quebra, o passo entre cartas sobe de 192 pra 240px: a abertura se ve'. */ .fer-deck{ --fer-largura:288px; --fer-recuo:-96px; --fer-dir:96px; display:flex;align-items:stretch; overflow-x:auto;scroll-padding-inline:var(--gut); padding:clamp(22px,2.6vw,30px) 0 16px;scrollbar-width:none; } .fer-deck::-webkit-scrollbar{display:none} /* as setas ficam FORA da fila, nas pontas, e a fila rola entre elas. Dentro da fila elas rolariam junto e sairiam da tela. */ .fer-deck-cx{position:relative;display:flex;align-items:center} .fer-deck-cx > .fer-deck{flex:1;min-width:0} .fer-seta{ /* z-index acima das CARTAS, nao so' acima do fundo: cada carta tem z-index calc(--n + 1), ou seja, ate' 9 nesta fila. Com 4 a seta da direita ficava por baixo das ultimas cartas e o clique caia no link da ferramenta -- medido: o teste navegava pra outra pagina em vez de rolar a fileira. */ position:absolute;z-index:20;top:50%;translate:0 -50%; display:flex;align-items:center;justify-content:center; width:44px;height:44px;border:1px solid var(--linha);border-radius:50%; background:#fff;color:var(--navy);box-shadow:var(--sombra-md);cursor:pointer; transition:opacity .25s ease,background .25s ease,color .25s ease,transform .2s ease; } .fer-seta svg{width:20px;height:20px} .fer-seta:hover:not(:disabled){background:var(--carmim);border-color:var(--carmim);color:#fff} .fer-seta:active:not(:disabled){transform:scale(.94)} /* ponta da fila: a seta apaga e para de responder. Botao aceso que nao faz nada ensina a pessoa a desconfiar do controle. */ .fer-seta:disabled{opacity:.3;cursor:default;box-shadow:none} .fer-seta-esq{left:clamp(6px,1.4vw,18px)} .fer-seta-dir{right:clamp(6px,1.4vw,18px)} @media (max-width:700px){ /* no toque o gesto de arrastar ja' resolve, e a seta tampa carta */ .fer-seta{display:none} } .fer-carta{ position:relative;z-index:calc(var(--n) + 1); flex:0 0 var(--fer-largura); display:flex;flex-direction:column;gap:9px; margin-left:var(--fer-recuo); padding:22px var(--fer-dir) 20px 22px; background:#fff;border:1px solid var(--linha);border-radius:var(--r-lg); /* sombra puxada pra esquerda: e' ela que mostra uma carta POR CIMA da outra. Sem isso o conjunto vira retangulos branco-sobre-branco. */ box-shadow:-10px 0 22px -12px rgba(0,0,51,.3); text-decoration:none;color:inherit; /* 620ms nas tres medidas que mudam de verdade (largura, recuo e padding) contra os 420 de antes: abrir um baralho e' gesto de materia pesada, e a 420 o conjunto estourava na cara de quem so' passou o mouse. A curva tambem ficou mais mansa no fim (.25,.9,.3,1), pra a fila assentar em vez de travar. O numero esta' casado com ABERTURA, em assets/js/site.js: e' durante esse tempo que o script prende a carta apontada debaixo do cursor. Mudou aqui, muda la'. translate, sombra e borda continuam rapidos: sao resposta ao toque de uma carta so', nao o movimento do conjunto. */ /* As duas medidas do movimento. A transicao em si NAO mora aqui: um '.casc > *' la' embaixo tem a mesma especificidade, vem depois e substituiria o shorthand inteiro. Ver a regra .fer-deck.casc.vis, logo depois do bloco .casc. */ --fer-atraso:calc(var(--n) * 55ms); /* leque: cada carta sai depois da anterior */ --fer-entra:calc(var(--n) * 90ms); /* entrada em cascata, igual a do .casc */ } /* mouse na fileira: o baralho abre */ .fer-deck:hover,.fer-deck:focus-within{--fer-largura:230px;--fer-recuo:10px;--fer-dir:38px} /* respiro nas pontas. Antes a carta encostava na borda de proposito: a volta infinita exigia que o padrao fosse periodico, e um vao so' na primeira copia quebrava a emenda. Sem volta, nao ha' mais essa amarra. */ .fer-carta:first-child{margin-left:clamp(16px,3vw,54px)} .fer-carta:last-child{margin-right:clamp(16px,3vw,54px)} .fer-carta:hover,.fer-carta:focus-visible{ z-index:50;translate:0 -6px;border-color:rgba(168,40,42,.24); box-shadow:-6px 10px 28px -12px rgba(0,0,51,.34); } .fer-ico{display:flex;width:26px;height:26px;color:var(--carmim)} .fer-ico svg{width:100%;height:100%} .fer-carta b{font-size:1rem;font-weight:700;letter-spacing:-.02em;color:var(--navy);line-height:1.2} .fer-d{font-size:.86rem;line-height:1.5;color:var(--tinta-70);flex:1} .fer-abrir{font-size:.82rem;font-weight:700;color:var(--carmim)} .fer-abrir i{font-style:normal;display:inline-block;transition:translate .25s} .fer-carta:hover .fer-abrir i{translate:3px 0} .fer-pe{display:flex;justify-content:center;margin-top:clamp(18px,2.4vw,26px)} /* SEM PONTEIRO (toque): nao ha' hover pra abrir o baralho nem deslize pela posicao do mouse, entao a fila vira uma fila comum -- vao positivo, encaixe no arrastar, respiro nas pontas e a copia escondida some (ela so' serve pra volta infinita, que aqui nao existe; deixada visivel, a pessoa percorreria a mesma lista duas vezes). */ @media (hover:none){ .fer-deck{--fer-largura:230px;--fer-recuo:14px;--fer-dir:38px;scroll-snap-type:x proximity} .fer-carta{scroll-snap-align:center} .fer-carta:first-child{margin-left:var(--gut)} .fer-carta:last-child{margin-right:var(--gut)} } @media (max-width:700px){ .fer-deck{--fer-largura:244px;--fer-dir:20px} .fer-carta{padding-top:20px;padding-bottom:18px;padding-left:20px} } /* ---------- /ofertas/ ---------------------------------------------------- Condicao comercial com endereco proprio. O bloco tem uma ordem fixa, e ela e' argumento: quem e' o parceiro, o que custa, o que vem junto, ate' quando vale e a letra miuda. A letra miuda fica numa
na propria pagina, nao num asterisco que leva pra lugar nenhum -- e' ela que separa promessa de contrato. A superficie e' branca sobre fundo tingido, mesma receita das placas de /aplicacoes/: branco reservado pro que esta' vivo. */ .ofe-solucao{padding:clamp(50px,6vw,80px) 0;border-top:1px solid var(--linha);background:var(--osso-2)} .ofe-bloco{ /* o padding vira variavel porque a faixa da arte precisa recuar exatamente ele pra sangrar ate' a borda do card */ --ofe-pad:clamp(24px,3vw,38px); margin-top:clamp(28px,3.4vw,40px); background:#fff;border:1px solid var(--linha);border-radius:var(--r-xl); padding:var(--ofe-pad);box-shadow:var(--sombra-sm); } .ofe-bloco + .ofe-bloco{margin-top:clamp(20px,2.4vw,28px)} .ofe-cab .rot{display:block;color:var(--carmim);margin-bottom:8px} .ofe-cab h3{font-size:clamp(1.3rem,2.2vw,1.72rem);letter-spacing:-.025em;color:var(--navy)} .ofe-cab p{margin:9px 0 0;color:var(--tinta-70);font-size:.97rem;line-height:1.55;max-width:62ch} /* as linhas de preco: nome a' esquerda, valor a' direita, filete entre elas. Nao sao cards -- sao linhas de uma tabela de preco, e e' assim que se le. */ .ofe-precos{margin-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--linha)} .ofe-item{ display:flex;align-items:center;gap:clamp(14px,2vw,22px); padding:clamp(16px,2vw,22px) 0;border-bottom:1px solid var(--linha); } /* foto do produto como PREFIXO da linha. A mesma do catalogo, no tamanho de miniatura: aqui ela identifica o item, nao decora o card -- duas versoes com arte grande ao lado do titulo foram reprovadas. */ .ofe-item-foto{ flex:none;width:clamp(64px,7vw,84px);height:auto;display:block; border-radius:var(--r-sm); } /* o texto empurra o preco pra direita; sem isso os tres ficariam colados */ .ofe-item-txt{min-width:0;flex:1} /* preco anterior, riscado, acima do que vale. Corpo menor e opacidade baixa: ele esta' ali pra dar a medida do corte, nao pra competir com o numero novo. */ .ofe-de{ display:block;font-family:var(--mono);font-size:.82rem;font-weight:500; color:var(--tinta-45);text-decoration-thickness:1.5px;margin-bottom:1px; } /* Cresce no hover a LINHA DO PRODUTO, nao o bloco inteiro. Chegou a ser o bloco; o usuario corrigiu, e com razao: o que a pessoa esta' olhando e' um produto, e o bloco e' so' a moldura em volta de tres deles. transform-origin na esquerda pra a linha crescer pro lado de dentro do card, sem avancar sobre a borda. Mesma curva do resto do site. */ .ofe-item{ transition:scale .3s cubic-bezier(.2,.7,.3,1); transform-origin:left center;will-change:scale; } .ofe-item:hover{scale:1.012} @media (prefers-reduced-motion:reduce){ .ofe-item{transition:none} .ofe-item:hover{scale:none} } .ofe-kicker{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--tinta-45);margin-bottom:5px} .ofe-item-txt b{display:block;font-size:1.08rem;letter-spacing:-.02em;color:var(--navy)} .ofe-item-txt > span{display:block;margin-top:4px;font-size:.9rem;line-height:1.5;color:var(--tinta-70)} .ofe-preco{flex:none;text-align:right} /* tabular-nums: dois precos um embaixo do outro precisam ter os digitos na mesma coluna, senao a virgula serrilha */ .ofe-valor{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;letter-spacing:-.03em;color:var(--carmim);line-height:1} .ofe-unidade{display:block;margin-top:5px;font-size:.78rem;color:var(--tinta-45)} .ofe-vantagens{list-style:none;margin:clamp(20px,2.4vw,26px) 0 0;padding:0; display:flex;flex-wrap:wrap;gap:10px 26px} .ofe-vantagens li{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--tinta-70)} .ofe-vantagens svg{width:15px;height:15px;flex:none;color:var(--carmim)} .ofe-pe{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;margin-top:clamp(22px,2.6vw,30px)} .ofe-validade{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--tinta-45)} /* a letra miuda: fechada por padrao, mas na pagina -- nao num link pra outro lugar. Aberta, o texto ganha medida curta pra ser lido de verdade. */ .ofe-fina{margin-top:clamp(18px,2.2vw,24px);border-top:1px solid var(--linha);padding-top:14px} .ofe-fina summary{ display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none; font-size:.84rem;font-weight:600;color:var(--tinta-45);transition:color .2s; } .ofe-fina summary::-webkit-details-marker{display:none} .ofe-fina summary:hover{color:var(--carmim)} .ofe-fina summary svg{width:14px;height:14px;transition:rotate .25s} .ofe-fina[open] summary svg{rotate:180deg} /* sem teto de medida: num card largo, 76ch deixava um vazio grande a' direita do paragrafo. Aqui o texto e' consulta, nao leitura corrida -- preencher a largura e' melhor que uma coluna estreita com buraco ao lado. */ .ofe-fina p{margin:12px 0 0;font-size:.84rem;line-height:1.6;color:var(--tinta-45)} @media (max-width:620px){ /* no estreito a linha quebra, mas a foto continua ao lado do nome: o que desce e' o preco. */ .ofe-item{flex-wrap:wrap} .ofe-item-txt{flex:1 1 60%} .ofe-preco{flex:1 0 100%;text-align:left;margin-top:4px} .ofe-item-foto{width:56px} } /* O atalho de OFERTAS na barra do topo. Os outros dois sao atalhos de jornada, em texto; este e' oferta com prazo, e vem primeiro justamente pra ser visto antes. Fundo carmim com letra branca, chama em dourado: o contraste entre o icone quente e o fundo escuro e' o que o faz saltar sem precisar piscar nem crescer. Os 2px negativos de margem vertical compensam o padding proprio, pra a pilula nao aumentar a altura da barra -- ela e' fixa e mede o topo de toda pagina (ver --secao-offset). */ /* .utl a.utl-oferta e nao so' .utl-oferta: existe um `.utl a, .utl button { background:none; color:var(--tinta-70) }` com especificidade 0-1-1, que vence uma classe sozinha (0-1-0) e zerava o fundo -- a pilula saia branca com texto cinza. Medido no computed style antes de corrigir. */ .utl a.utl-oferta{ background:var(--carmim);color:#fff; /* 28px e nao os 34px dos vizinhos: aqueles 34 sao area de clique invisivel, e uma pilula PREENCHIDA da mesma altura fica pesada demais numa barra de 58. Como o .utl-esq centraliza, mais baixa ela continua alinhada com o texto dos outros dois. */ height:28px; /* 15px de recuo contra os 12 dos vizinhos: texto dentro de fundo precisa de mais folga que texto solto, nao de menos. Estava com 11. */ padding:0 15px; /* 7px no lugar dos 11 da barra: dentro da pilula, icone e palavra tem de ler como uma coisa so'. Com 11 a chama ficava solta do texto. */ gap:7px; /* nao encostar no canto arredondado da barra */ margin-left:6px; border-radius:var(--pill); font-weight:600;letter-spacing:.004em; box-shadow:0 1px 3px rgba(0,0,51,.22); transition:background .22s,box-shadow .22s; } /* A caixa do icone acompanha a TINTA da chama, nao um quadrado. Medido: no viewBox de 24x24 o glifo ocupava x 5..19 e y 1.60..23 -- ou seja, 5 unidades de vazio de cada lado e, pior, 1.60 de folga em cima contra 1.00 embaixo. Centrar essa caixa alinhava o VAZIO, nao o desenho, e a chama aparecia empurrada pra baixo, com mais respiro em cima. O viewBox foi apertado na tinta (ver _inc/nav.php) e a caixa aqui ficou com a proporcao real do glifo, 14:21.4. Agora centrar a caixa e centrar a chama sao a mesma coisa. O -0.6px e' correcao OPTICA, nao geometrica: chama e' larga na base e fina no topo, entao a massa dela fica embaixo e o centro geometrico le' baixo demais ao lado de uma palavra. */ .utl a.utl-oferta .utl-ico{width:13px;height:19px;translate:0 -.6px} /* ----- a chama queima ----- Duas animacoes de duracoes diferentes (1,7s e 2,3s) no mesmo glifo: como os ciclos nao sao multiplos, a combinacao so' se repete depois de muito tempo e o fogo nao fica metronomico. Uma so', por mais caprichada que fosse, denunciaria o compasso em dois segundos. transform-origin no PE': chama dança a partir da base, presa ao que queima. Girando pelo centro ela flutuaria, que e' outro fenomeno. A deformacao e' trocada entre os eixos (afina ao subir, engrossa ao baixar) pra o volume parecer constante -- fogo muda de forma, nao de tamanho. */ @keyframes chamaDanca{ 0%,100%{scale:1 1;rotate:0deg} 18%{scale:.94 1.09;rotate:-3deg} 41%{scale:1.05 .95;rotate:2deg} 63%{scale:.97 1.06;rotate:-1.5deg} 82%{scale:1.03 .98;rotate:1deg} } @keyframes chamaBrilho{ 0%,100%{filter:drop-shadow(0 0 1px rgba(255,186,84,.45))} 35%{filter:drop-shadow(0 0 4px rgba(255,160,50,.95))} 70%{filter:drop-shadow(0 0 2px rgba(255,200,110,.7))} } .utl a.utl-oferta .utl-ico svg{ transform-origin:50% 92%; animation:chamaDanca 1.7s ease-in-out infinite,chamaBrilho 2.3s ease-in-out infinite; will-change:scale,rotate,filter; } @media (prefers-reduced-motion:reduce){ .utl a.utl-oferta .utl-ico svg{animation:none;filter:none} } /* o color tem de ser repetido aqui: a regra geral da barra (.utl a:hover) pinta o texto de carmim, e sem isto a pilula ficava com letra vermelha escura sobre fundo vermelho escuro no hover. */ .utl a.utl-oferta:hover{background:#8f2224;color:#fff;box-shadow:0 2px 7px rgba(0,0,51,.3)} .utl a.utl-oferta .utl-ico{color:var(--dourado)} /* MARCA DE FUSO no /desenrola/ (so' fora do portugues) --------------------- A pagina mostra hora de Brasilia AO VIVO. Pra quem le em portugues isso e' o relogio de casa; pra quem le em ingles ou espanhol, nao. Entao vale a mesma gramatica ja' aprovada no widget: bandeira do Brasil FORA da label, como prefixo, sufixo GMT-3 ao lado da hora e dica ao passar o mouse. A dica some sozinha em 3s: so' :hover a deixaria presa na tela enquanto o mouse estivesse em cima. */ .desenrola-online-band{display:inline-flex;width:17px;height:17px;flex:0 0 auto;margin-right:2px} .desenrola-online-band svg{width:100%;height:100%;border-radius:2px} /* NADA de gap aqui. Os filhos desta caixa sao os digitos do relogio: slots de .62em que tem de ficar colados, e o `:` com 1px de folga. Um gap no pai espaca digito por digito e a hora sai desmontada. O respiro do GMT-3 vem da margem dele, nao do pai. Alinhamento tambem nao: display/align-items reais vem da regra do badge, mais abaixo neste arquivo. */ .desenrola-online-hora{position:relative;cursor:default} .desenrola-online-tz{ font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.04em; opacity:.6;white-space:nowrap;position:relative;cursor:default; } /* so quando o GMT-3 esta dentro do relogio: no "expediente ... GMT-3" do resultado ja existe um espaco de texto antes dele. */ .desenrola-online-hora .desenrola-online-tz{margin-left:4px} @keyframes desenrolaDica{0%{opacity:0;translate:-50% 4px}10%{opacity:1;translate:-50% 0}80%{opacity:1;translate:-50% 0}100%{opacity:0;translate:-50% 0}} [data-dica]{position:relative} .desenrola-online-hora[data-dica]::after,.desenrola-online-tz[data-dica]::after{ content:attr(data-dica);position:absolute;bottom:calc(100% + 9px);left:50%;translate:-50% 4px; background:var(--navy-3);color:#fff;border:1px solid var(--linha-clara); padding:6px 10px;border-radius:var(--r-sm);box-shadow:var(--sombra-md); font-family:var(--fonte);font-size:11.5px;font-weight:500;letter-spacing:0;line-height:1.25; white-space:normal;width:max-content;max-width:210px;text-align:center; opacity:0;pointer-events:none;z-index:6; } .desenrola-online-hora[data-dica]:hover::after,.desenrola-online-tz[data-dica]:hover::after{animation:desenrolaDica 3s ease forwards} /* ---------- barra de utilidades, acima da principal ---------- Atalhos de jornada, busca, escala e idioma. Some ao rolar: quem esta lendo nao precisa dela ocupando altura na barra fixa. */ .topo{position:fixed;inset:0 0 auto 0;z-index:60} /* A caixa fica, com 10px iguais nos quatro lados. O que muda e o tratamento: fundo osso em vez de mais uma laje escura sobre hero escuro -- inverte o valor, ancora o topo e antecipa a barra branca da rolagem. Tudo em mono caixa alta, que e a voz que o site ja usa em rotulo, e o icone em carmim, dentro de um quadrado com filete, no lugar do pictograma solto antes do texto. */ /* max-height EXPLICITO no estado aberto. Sem ele o valor calculado e' "none", e transicao de none pra 0 NAO anima: o navegador corta seco, a barra de utilidades some num quadro e o menu salta ~52px de uma vez. Era essa a "piscada abrupta" ao rolar. 70px cobre a caixa de 48px mais o padding de 10px, e e' coerente com os 60px que a regra de .com-busca ja' assumia. */ /* --utl-alto: a altura REAL do conjunto (padding-top + pilula). max-height tem que valer exatamente isso, nao um numero com folga: com folga, o comeco da animacao consome a folga sem mexer na altura, a pilula sai andando na frente do recorte e abre uma tira escura entre ela e a laje do nav (medido: 19px de vao). No mobile a regra de 700px troca pra 52. */ .utl{--utl-alto:58px;position:relative;z-index:2;padding:10px 10px 0;max-height:var(--utl-alto); transition:max-height .42s cubic-bezier(.33,0,.2,1),padding .42s cubic-bezier(.33,0,.2,1)} .utl-cx{ position:relative; display:flex;align-items:center;justify-content:space-between;gap:20px; height:48px;padding:0 8px;border-radius:var(--r-md); background:#fff;box-shadow:var(--sombra-sm); transition:transform .42s cubic-bezier(.33,0,.2,1); } .utl-esq,.utl-dir{position:relative;z-index:1} /* rolou: a pilula SOBE e sai pela borda de cima, recortada pelo overflow do .utl que se fecha junto. Sem opacity: quem sai, sai andando. */ .topo.solido .utl{max-height:0;padding-top:0;overflow:hidden;pointer-events:none} /* -100% e' a altura da propria pilula: sobe exatamente o que o nav desce, entao a borda de baixo dela acompanha a linha do recorte em vez de disparar na frente. */ .topo.solido .utl-cx{transform:translateY(-100%)} .utl-esq{display:flex;align-items:center;gap:0} .utl-dir{display:flex;align-items:center;gap:0} .utl a,.utl button{ display:flex;align-items:center;gap:11px;height:34px;padding:0 12px; border:0;background:none;cursor:pointer;line-height:1; font-family:var(--fonte);font-size:13px;font-weight:500;letter-spacing:-.005em; color:var(--tinta-70);text-decoration:none;border-radius:var(--r-sm); transition:color .2s,background .2s; } .utl a:hover,.utl button:hover:not(:disabled){background:var(--osso-2);color:var(--carmim)} .utl svg{width:14px;height:14px;flex:0 0 auto} /* sem contorno: o glifo carmim sozinho */ .utl-ico{ display:flex;align-items:center;justify-content:center;flex:0 0 auto; width:18px;height:18px;color:var(--carmim); } .utl-ico svg{width:100%;height:100%} /* padding igual dos dois lados, senao o fundo do hover fica torto. Quem recua o primeiro rotulo pro lugar certo e o padding menor da propria barra, e o filete vive na margem entre os dois -- dentro do padding ele era engolido pelo fundo do hover e encostava no separador. */ /* 14px (era 24): com o atalho de Ofertas preenchido abrindo a fila, os 24 deixavam os tres itens espalhados demais e a barra parecia vazia no meio. O filete acompanha, em -7px, pra continuar no meio da folga. */ .utl-esq a + a{position:relative;margin-left:14px} .utl-esq a + a::before{ content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%); width:1px;height:20px;background:var(--linha); } /* NAO ha' filete depois da pilula de Ofertas: ela e' preenchida, e um fundo cheio ja' separa por conta propria. O filete ali virava um segundo separador em cima do primeiro. */ .utl-esq a.utl-oferta + a::before{content:none} .utl-dir > * + *{margin-left:4px} .utl-sep{width:1px;height:20px;background:var(--linha);margin:0 8px} /* escala: so os dois botoes na barra. A porcentagem e resposta a um toque, nao informacao permanente -- aparece embaixo do controle e some sozinha. */ .escala{position:relative;display:flex;align-items:center} .escala button{position:relative;padding:0 10px;justify-content:center;font-size:16px;color:var(--carmim)} .escala button:disabled{opacity:.26;cursor:default} /* dica no hover. O texto vem do proprio aria-label: um rotulo so, sem copia que possa divergir do que o leitor de tela anuncia. */ .escala button::after{ content:attr(aria-label); position:absolute;top:calc(100% + 9px);left:50%;transform:translate(-50%,-4px); padding:5px 9px;border-radius:var(--r-xs);background:var(--navy);color:#fff; font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:none; white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .2s,transform .2s,visibility .2s; } .escala button:hover:not(:disabled)::after{opacity:1;visibility:visible;transform:translate(-50%,0)} /* o aviso de porcentagem mora no mesmo lugar: enquanto ele aparece, a dica cala */ .escala:has(.pct.vis) button::after{opacity:0;visibility:hidden} .escala .pct{ position:absolute;top:calc(100% + 9px);left:50%; transform:translate(-50%,-5px);white-space:nowrap; padding:5px 10px;border-radius:var(--r-xs);background:var(--navy);color:#fff; font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .22s,transform .22s,visibility .22s; } .escala .pct.vis{opacity:1;visibility:visible;transform:translate(-50%,0)} /* idioma: bandeira do idioma corrente, nao um globo generico. As tres ficam no DOM e o data-lang decide qual aparece -- clonar SVG duplicaria o id do clipPath. */ .idioma{position:relative} .idioma > button{gap:9px} .idioma > button .sigla{font-family:var(--mono);font-size:11px;letter-spacing:.12em} .idioma .band{display:none} .idioma[data-lang="PT"] .band-PT, .idioma[data-lang="EN"] .band-EN, .idioma[data-lang="ES"] .band-ES{display:flex} .op-nome{display:flex;align-items:center;gap:11px} .idioma-lista{ position:absolute;top:calc(100% + 10px);right:0;min-width:214px;padding:7px; background:#fff;border:1px solid var(--linha);border-radius:var(--r-md); box-shadow:var(--sombra-lg);opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .2s,transform .2s,visibility .2s; } .idioma.aberto .idioma-lista{opacity:1;visibility:visible;transform:none} /* a lista nao herda a voz da barra: nome de idioma se le em caixa mista. Sem redeclarar, .utl button impunha mono/maiuscula e o "PT-BR" quebrava em duas linhas. */ /* as opcoes viraram (links reais pro mesmo endereco no outro idioma); os seletores cobrem os dois pra nao depender de qual elemento esta' ali */ .idioma-lista button,.idioma-lista a{width:100%;justify-content:space-between;gap:18px;height:40px;padding:0 12px; font-family:var(--fonte);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none; color:var(--tinta)} .idioma-lista button + button,.idioma-lista a + a{margin-top:2px} .idioma-lista button:hover,.idioma-lista a:hover{background:var(--osso-2);color:var(--tinta)} .idioma-lista button[aria-current="true"],.idioma-lista a[aria-current="true"]{color:var(--carmim);font-weight:600} .idioma-lista i{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;font-style:normal;opacity:.5;white-space:nowrap} /* busca ali mesmo, sem camada: o campo abre dentro da barra. Modal pra uma busca simples era peso a mais -- escurece a pagina inteira pra um input. */ .busca{display:flex;align-items:center} .busca input{ width:0;padding:0;border:0;outline:0;background:none;opacity:0; font-family:var(--fonte);font-size:13px;color:var(--tinta); border-bottom:1px solid transparent; transition:width .35s cubic-bezier(.2,.7,.3,1),opacity .22s,padding .35s,border-color .3s; } .busca input::placeholder{color:var(--tinta-45)} .busca.aberta input{ width:clamp(130px,20vw,230px);padding:0 12px 4px 2px;opacity:1; border-bottom-color:var(--linha); } .busca.aberta #abrir-busca .utl-ico{color:var(--carmim)} .busca input::-webkit-search-cancel-button{display:none} /* ---- Resultados da busca ------------------------------------------------- Painel ANCORADO embaixo do campo, nao modal: a decisao de nao escurecer a pagina inteira pra um input (comentario acima) continua valendo. O que faltava nao era camada, era resultado. A barra .utl recolhe quando a pagina rola (.topo.solido); com a busca aberta ela precisa voltar, senao o atalho "/" e Ctrl+K focaria um campo invisivel. */ .topo.solido.com-busca .utl{max-height:60px;padding-top:10px;pointer-events:auto;overflow:visible} .topo.solido.com-busca .utl-cx{transform:none} .busca{position:relative} .busca-painel{ position:absolute;top:calc(100% + 10px);right:0;z-index:60; width:min(470px,calc(100vw - 24px)); max-height:min(70vh,560px);overflow:auto;overscroll-behavior:contain; background:#fff;border:1px solid var(--linha);border-radius:var(--r-lg); box-shadow:var(--sombra-lg); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s,transform .18s,visibility .18s; } .busca-painel.aberto{opacity:1;visibility:visible;transform:none} /* ATENCAO: estes elementos vivem DENTRO de .utl, e a regra `.utl a,.utl button` la' em cima impoe display:flex, height:34px, padding e line-height:1 a qualquer link da barra. Sem reescrever isso aqui, o resultado virava tres colunas sobrepostas (titulo, contexto e resumo lado a lado) -- foi exatamente o que aconteceu na primeira versao. Por isso tudo abaixo e' prefixado por .busca-painel (especificidade 0,2,0 contra 0,1,1) e devolve display/altura/entrelinha ao normal. */ .busca-painel .busca-grupo{padding:4px 0} .busca-painel .busca-grupo + .busca-grupo{border-top:1px solid var(--linha)} .busca-painel .busca-grupo-rot{ display:block;height:auto;padding:11px 16px 5px; font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--carmim);line-height:1.2; } .busca-painel .busca-item{ display:block;width:100%;height:auto;gap:0;text-align:left;padding:9px 16px; border:0;border-left:2px solid transparent;border-radius:0;background:none; cursor:pointer;text-decoration:none;line-height:normal; font-size:14.5px;letter-spacing:0;color:var(--tinta); } .busca-painel .busca-item:hover,.busca-painel .busca-item.destacado{ background:var(--osso);border-left-color:var(--carmim);color:var(--tinta); } .busca-painel .busca-item-t{ display:block;font-family:var(--fonte);font-size:14.5px;font-weight:600; line-height:1.3;color:var(--tinta);letter-spacing:0;text-transform:none; } .busca-painel .busca-item-ctx{ display:block;margin-top:2px;font-size:11.5px;line-height:1.35;color:var(--tinta-45); letter-spacing:0;text-transform:none; } .busca-painel .busca-item-d{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--tinta-70); letter-spacing:0;text-transform:none; } /* o termo encontrado entra por LAVAGEM dourada, nao por fundo chapado -- mesma logica da faixa de marca-texto dos titulos */ .busca-painel .busca-item mark{background:rgba(220,171,91,.34);color:inherit;border-radius:2px;padding:0 1px} .busca-painel .busca-vazio{display:block;padding:22px 16px;font-size:13px;line-height:1.5; color:var(--tinta-70);letter-spacing:0;text-transform:none} .busca-painel .busca-vazio b{color:var(--tinta)} .busca-painel .busca-rodape{ position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px; padding:9px 16px;background:var(--osso);border-top:1px solid var(--linha); font-size:11.5px;line-height:1.3;color:var(--tinta-45);letter-spacing:0;text-transform:none; } .busca-painel .busca-rodape a{display:inline;height:auto;padding:0;gap:0; color:var(--carmim);font-weight:600;font-size:11.5px;background:none} .busca-painel .busca-rodape a:hover{background:none;opacity:.75} .busca-painel .busca-rodape kbd{ font-family:var(--mono);font-size:10px;padding:1px 5px;margin-right:3px; border:1px solid var(--linha);border-radius:var(--r-xs);background:#fff;color:var(--tinta-70); } @media (max-width:620px){ /* o 'top' vem do JS (posiciona()): position:fixed ignora o pai posicionado */ .busca-painel{position:fixed;left:12px;right:12px;width:auto;margin-top:0;max-height:min(66vh,520px)} .busca.aberta input{width:clamp(120px,38vw,200px)} } /* ---- /busca/: a mesma busca servida pelo PHP ---------------------------- Existe pro Enter ter destino, pro resultado virar link compartilhavel e pra busca funcionar sem JavaScript. Le o mesmo indice do painel do topo. */ .busca-pagina{padding:clamp(28px,4vw,46px) 0 clamp(60px,8vw,110px)} .busca-form{display:flex;align-items:center;gap:10px; max-width:720px;padding:6px 6px 6px 16px; background:#fff;border:1px solid var(--linha);border-radius:var(--pill);box-shadow:var(--sombra-sm)} .busca-form svg{width:18px;height:18px;flex:none;color:var(--tinta-45)} .busca-form input{flex:1;min-width:0;height:44px;border:0;outline:0;background:none; font-family:var(--fonte);font-size:1rem;color:var(--tinta)} .busca-form .btn{flex:none} .busca-aviso{margin:22px 0 0;color:var(--tinta-70);font-size:.95rem} .busca-aviso b{color:var(--tinta)} /* lista por tipografia e filete, nao por card */ .busca-lista{list-style:none;margin:26px 0 0;padding:0;max-width:760px;counter-reset:none} .busca-lista li + li{border-top:1px solid var(--linha)} .busca-lista a{display:block;padding:20px 0 22px;border-left:2px solid transparent;padding-left:0; transition:border-color .2s,padding-left .2s} .busca-lista a:hover{border-left-color:var(--carmim);padding-left:16px} .busca-lista-rot{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;color:var(--carmim)} .busca-lista-rot i{font-style:normal;opacity:.45} .busca-lista h2{margin:6px 0 0;font-size:1.12rem;line-height:1.3;color:var(--tinta)} .busca-lista p{margin:6px 0 0;color:var(--tinta-70);font-size:.9rem;line-height:1.55;max-width:66ch} .busca-lista-url{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--tinta-45)} @media (max-width:620px){ .busca-form{padding-left:12px} .busca-form .btn{padding-left:16px;padding-right:16px} } /* seta pro topo no canto ESQUERDO: o widget mora no direito (bottom/right 20px, 16px no mobile) e os dois nao podem disputar o mesmo canto. */ .subir{position:fixed;left:20px;bottom:20px;z-index:70; width:46px;height:46px;display:flex;align-items:center;justify-content:center; border:1px solid var(--linha-clara);border-radius:var(--r-md);cursor:pointer; background:var(--navy);color:#fff; opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .3s,transform .3s,visibility .3s,background .25s,border-color .25s} .subir.vis{opacity:1;visibility:visible;transform:none} .subir:hover{background:var(--carmim);border-color:var(--carmim)} .subir svg{width:19px;height:19px} .sub{ position:absolute;top:calc(100% + 10px);right:0;min-width:348px; background:#fff;border-radius:var(--r-lg);border:1px solid var(--linha); box-shadow:var(--sombra-lg);padding:8px; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.3,1),visibility .22s; } .tem-sub:hover .sub,.tem-sub:focus-within .sub{opacity:1;visibility:visible;transform:none} /* ponte invisivel: sem ela o mouse "cai" no vao entre o item e o submenu */ .tem-sub::after{content:"";position:absolute;top:100%;right:0;width:100%;height:12px} /* saiu de dentro do .menu, entao precisa declarar o proprio reset: antes herdava text-decoration:none de la e agora sublinhava */ .sub a{ display:flex;gap:12px;align-items:flex-start;padding:12px 14px; border-radius:var(--r-md);text-decoration:none;color:var(--tinta); background:none;transition:background .2s; } .sub a:hover{background:var(--osso-2)} /* deixa explicito que ali e area de acesso, e nao mais um menu de navegacao */ .sub-rot{padding:10px 14px 12px;margin-bottom:4px;border-bottom:1px solid var(--linha); color:var(--carmim);font-size:10.5px;letter-spacing:.15em} .sub b{display:block;font-size:14.5px;font-weight:500;letter-spacing:-.01em;color:var(--tinta)} /* 11.5px num painel de 348: a descricao mais longa mede 246 e sobram 24 de folga. Em 12.5px num painel de 330 ela media 265 contra 252 de espaco, e quebrava. */ .sub span{display:block;font-size:11.5px;line-height:1.45;color:var(--tinta-45);margin-top:3px} .sub .sub-ico{flex:none;width:20px;height:20px;color:var(--carmim);margin-top:2px} .sub .sub-ico svg{width:100%;height:100%} /* ---------- menu em capsula ---------- Item solto sobre foto depende do veu pra ser legivel, e o veu muda com a imagem. A capsula carrega o proprio contraste. Translucida, mas SEM blur: vidro fosco e justamente o que foi vetado. */ .menu{ display:flex;align-items:center;gap:2px; padding:5px;border-radius:var(--pill); background:rgba(0,0,51,.68);border:1px solid rgba(246,242,237,.13); transition:background .3s,border-color .3s; } .nav.solido .menu{background:rgba(0,0,51,.045);border-color:var(--linha)} /* so os itens da capsula, nao os links dentro dos paineis: `.menu a` tambem alcancava o .sub e o .mega, e la o item virava pilula */ .menu > a,.menu > .tem-sub-item > a{border-radius:var(--pill)} /* chevron so em quem tem filho: e afordancia, nao enfeite */ .menu .com-sub{display:flex;align-items:center;gap:7px} .menu .com-sub svg{width:12px;height:12px;opacity:.6;transition:transform .25s,opacity .25s} .menu .tem-sub-item:hover .com-sub svg, .menu .tem-sub-item:focus-within .com-sub svg{transform:rotate(180deg);opacity:1} .tem-sub-item{position:relative;display:flex} /* ponte invisivel: sem ela o mouse cai no vao entre o item e o painel */ .tem-sub-item::after{content:"";position:absolute;top:100%;left:0;width:100%;height:14px} /* BUG REAL (achado pelo usuario: "abre quando o mouse passa na direcao do item, mas fora dele"): .tem-sub-item-cheio vira position:static (linha ~417, pra o .mega ancorar no .nav inteiro) -- isso tira o proprio contexto de posicionamento do item, entao a ::after acima (position:absolute; left:0;width:100%) deixa de se ancorar no item e passa a se ancorar no .nav inteiro: vira uma faixa invisivel de 14px cobrindo a LARGURA TOTAL do nav colada na base da barra, nao so' embaixo do link. Qualquer mouse cruzando essa faixa (mesmo embaixo de "Catalogo" ou de um espaco vazio) disparava mouseenter no item. Fix: a ponte nao faz falta aqui -- o show/ hide de .tem-sub-item-cheio e' via JS (site.js), com folga de fechamento propria (250ms) e o painel .mega e' filho do item no DOM, entao entrar nele ja cancela o fechamento pendente sem precisar de ponte de CSS. */ .tem-sub-item-cheio::after{content:none} /* mega menu das solucoes/segmentos: base do mecanismo de show/hide, sem layout proprio -- quem da forma e' .mega-cheio (ver abaixo). Revelado por clip-path (de cima pra baixo, "deslizando"), nao so' opacidade -- pedido explicito do usuario ("do jeito que fez, hoje, e' so' um fade rapido"). ACHADO REAL (testado com mouse simulado, varias rodadas): :hover puro (.tem-sub-item:hover .mega) NAO da conta de um painel full-width. Duas falhas achadas: (1) o painel comeca la embaixo, na base do .nav inteiro -- ha' um vao real entre o texto do link e o topo do painel onde :hover se perde no meio do caminho pra um item mais distante; (2) tentar FECHAR esse vao alargando a caixa do item (padding/margin) resolveu (1) mas criou (2): Solucoes e Segmentos ficam a poucos px um do outro no nav, e a caixa alargada de um passou a encostar na do outro -- confirmado pelo usuario ("descendo o mouse, em alguns pontos, muda pro menu de Segmentos"). CSS puro nao tem como expressar "so' feche depois de uma folga" -- por isso o show/hide virou JS (ver site.js), com uma classe .aberto e um pequeno atraso pra fechar. O gatilho de :hover sumiu daqui de proposito. */ .mega{ position:absolute;top:100%; opacity:0;visibility:hidden;pointer-events:none; clip-path:inset(0 0 100% 0); transition:opacity .2s ease,visibility .32s,clip-path .32s cubic-bezier(.2,.7,.3,1); } .tem-sub-item-cheio.aberto .mega{opacity:1;visibility:visible;pointer-events:auto;clip-path:inset(0 0 0% 0)} /* .mega-cheio: painel EDGE-TO-EDGE, flush com a base do nav -- estilo apple.com (pedido explicito do usuario, print de referencia). Substituiu o cartao flutuante antigo (canto arredondado, ancorado no item): aquele exigia mexer em largura/posicao toda vez que o numero de itens mudava (foi o caso de Segmentos, que ja tinha vazado a tela 2x so' de crescer). Full- bleed elimina a classe inteira de bug: nao tem "acabou a largura" quando o painel sempre ocupa o nav inteiro. TECNICA: .tem-sub-item-cheio vira position:static (perde o proprio contexto de posicionamento), entao o .mega absolute dentro dele ancora no proximo ancestral posicionado, que e' .nav (position:relative, e' a barra inteira) -- left:0/right:0 relativos a .nav cobrem a barra toda, nao so' o item. Contato/Login NAO usam essa classe, continuam com o .sub flutuante de sempre + :hover puro (dropdown pequeno e isolado, sem o vao nem a vizinhanca que quebravam Solucoes/Segmentos). */ .tem-sub-item-cheio{position:static} /* respiro + cantos arredondados nas laterais, pedido explicito do usuario (mesmo tratamento da barra ".utl-cx" -- "Monte sua Central/Migre sua Central" -- 10px de respiro, --r-md). Em cima fica encostado no nav (top:100% sem soma) -- so' visual, o show/hide agora e' via JS/.aberto, entao um vao aqui nao quebra mais nada. */ .mega.mega-cheio{ left:10px;right:10px; background:#fff;border:1px solid var(--linha);border-radius:var(--r-md); box-shadow:var(--sombra-lg); } /* ACHADO REAL (reportado pelo usuario com print, apos rolar a pagina): .nav.solido ja' ganha margin:10px pra' "flutuar" a barra (ver acima) -- o left/right:10px do .mega (pensado pro estado base, onde .nav NAO tem margem propria) somava um SEGUNDO recuo de 10px em cima desse, deixando o painel 20px mais estreito que a barra solida por cima dele. .mega ancora no .nav (proximo ancestral position:relative -- ver comentario "TECNICA" acima), entao o box do nav ja' vem inset pela margem; o painel so' precisa ir de ponta a ponta DENTRO dele (left/right:0), sem repetir o respiro. */ .nav.solido .mega.mega-cheio{left:0;right:0} /* Fundo embacado quando Solucoes/Segmentos abre -- pedido explicito do usuario, com excecoes explicitas: NAO embaca #topo (barra Monte/Migre + logo + menu + Falar com Vendas/Login moram todos ali dentro) nem o widget de atendimento. ACHADO REAL (1a tentativa, reprovada em 2 frentes): filter:blur() direto em cada filho de (header/sections/footer) gerava uma borda clara visivel na quina de cada secao (cada uma borra sozinha, sem enxergar a vizinha -- e o blur "vaza" pra fora da propria caixa nas bordas da pagina) E quebrava o hover do mega em telas grandes: filter cria um novo contexto de empilhamento em CADA secao, e o ponteiro passava a acertar o conteudo da pagina (confirmado via elementFromPoint) em vez do painel, mesmo o painel estando visivel por cima. FIX correto: UM veu so' (.mega-veu), fixed cobrindo a tela inteira, com backdrop-filter (embaca o que esta' ATRAS dele, sem borda por secao -- e' uma composicao so'). Vem ANTES do .nav no DOM dentro de #topo, entao nav/mega pintam por cima dele naturalmente (sem precisar de z-index). O widget e' injetado FORA de #topo, depois no body -- fica por cima do veu por ordem do DOM, sem precisar de excecao explicita. */ .mega-veu{ position:fixed;inset:0;pointer-events:none; opacity:0;visibility:hidden; transition:opacity .25s ease,visibility .25s,backdrop-filter .25s ease; } body:has(.tem-sub-item-cheio.aberto) .mega-veu{ opacity:1;visibility:visible; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .mega-cheio-grade{ max-width:var(--max);margin:0 auto;padding:36px var(--gut); display:grid;grid-template-columns:repeat(3,1fr);gap:8px 48px; } .mega.mega-segmentos .mega-cheio-grade{grid-template-columns:repeat(4,1fr)} .mega-col > .rot{ display:block;padding:0 0 10px;margin-bottom:10px; border-bottom:1px solid var(--linha);color:var(--carmim);font-size:10.5px;letter-spacing:.15em; } /* caixa de selecao com cantos arredondados no hover -- pedido explicito do usuario, mesmo tratamento do dropdown de Contato/Login (.sub a). */ .mega a{ display:flex;gap:12px;align-items:flex-start;padding:10px 12px; border-radius:var(--r-md);text-decoration:none;color:var(--tinta); background:none;transition:background .2s; } .mega a:hover{background:var(--osso-2)} .mega b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em} .mega span.d{display:block;font-size:12px;line-height:1.4;color:var(--tinta-45);margin-top:3px} /* apple.com nao usa icone -- so' hierarquia tipografica. Removido aqui (nao no PHP): mega-solucoes.php e' compartilhado com o consolidado das migalhas (.migalhas-mega/.mini-ico), que continua com icone -- so' o .mega-cheio (nav principal) fica sem. */ .mega.mega-cheio .mega-ico{display:none} /* EXPERIMENTO -- pedido explicito do usuario ("quero testar um efeito"): hover num item aumenta a escala do texto DELE e reduz a dos demais no MESMO painel (todas as colunas, nao so' a coluna atual). Fora de qualquer item -- inclusive no respiro entre eles -- fica tudo no tamanho padrao. Truque: :has(a:hover) no .mega inteiro detecta "algum link deste painel esta em hover" sem JS (mesma tecnica ja usada em .mega-veu); ai' basta :not(:hover) pros "demais" e :hover pro proprio item -- selecionam conjuntos disjuntos, sem conflito de especificidade. So' escala .mega-txt (o bloco titulo+desc), o .mega-cheio (nav principal) -- a versao compacta das migalhas (.migalhas-mega) nem tem essa classe, fica de fora sozinha. */ .mega-txt{display:block;transition:transform .3s cubic-bezier(.2,.7,.3,1);transform-origin:left center} .mega.mega-cheio:has(a:hover) a:not(:hover) .mega-txt{transform:scale(.92)} .mega.mega-cheio a:hover .mega-txt{transform:scale(1.08)} @media (max-width:980px){ .mega{display:none} } /* o .sub nasceu ancorado a direita, para o botao de acesso. No menu ele precisa abrir da esquerda pra direita, senao sai da tela pelo lado de fora. */ .sub-esq{left:0;right:auto} /* a regra que abre o .sub mira .tem-sub, que e o botao de acesso. No menu o pai e .tem-sub-item, entao sem esta linha o painel existe e nunca aparece. */ .tem-sub-item:hover .sub,.tem-sub-item:focus-within .sub{opacity:1;visibility:visible;transform:none} /* o item de WhatsApp e