/* ============================================================ NGB PRO — a vitrine de atacado Paleta da marca: bordô, off-white, latão. Nada de azul: a referência que ela mandou (thekingofparfums) serviu de modelo de ORGANIZAÇÃO, não de cor. ============================================================ */ /* ⚠️ O BORDÔ É O DA MARCA DELA, MEDIDO — não escolhido por mim. Ela escreveu, 05/10/2026: *"esse tom do vermelho tá puxando pro rosa, não curti muito não"*. Ela sentiu certo, e dá pra provar com número: o que eu tinha posto era #6E1F2E — R110 G31 B46, ou seja MAIS AZUL (46) QUE VERDE (31). Azul acima de verde num vermelho é exatamente o que o olho lê como rosa; o matiz dava 348°, que já é magenta. O bordô abaixo saiu do `icone-512.png` da marca dela, o redondo que está no ar: #521310 — R82 G19 B16, azul ABAIXO de verde, matiz 3°. Zero rosa. Quem escolheu foi quem desenhou a marca, não eu. Se um dia alguém for mexer aqui: a regra é B < G. Passou disso, rosa. */ :root { --bordo: #521310; --bordo-esc: #3A0D0A; --bordo-clar: #7D1D18; --offwhite: #FBF8F4; --papel: #FFFFFF; /* ⚠️ O `--latao` NÃO É USADO EM LUGAR NENHUM desde 05/11/2026, e está aqui só como lápide. Ela mandou: *"onde ta dourado poe em branco"*, e os 13 lugares que usavam viraram branco (em cima do bordô) ou bordô (em cima de fundo claro) — a explicação inteira está em cima da regra `.btn-entrar`. Deixei a linha porque é a terceira vez que o dourado volta nesta página, e da próxima vez que alguém pensar em usar eu quero que a pessoa esbarre neste aviso em vez de redescobrir o tom sozinha. ⚠️ Se um dia ela pedir dourado de volta, ela vai pedir com estas palavras — não deduza de "o preço está sem destaque". */ --tinta: #2A2024; --tinta-fr: #6B6066; --linha: #E8E0D8; --sombra: 0 1px 3px rgba(42,32,36,.06), 0 8px 24px rgba(42,32,36,.05); --sombra-alt: 0 2px 6px rgba(42,32,36,.09), 0 16px 40px rgba(42,32,36,.10); --raio: 14px; --topo: auto; /* ⚠️ AS DUAS FONTES — ESCOLHA DELA, 04/11/2026, e tem história. Ela olhou cinco opções renderizadas no navegador DELA (o `_ver-as-fontes.html`) e respondeu: *"gostei da fonte C, tem como deixar assim só q com a nossa cara?"*. A opção C era esta dupla. Antes disso ela tinha dito *"não gosto das fontes, acho feio"* e depois *"nao gostei de nenhuma fonte"* — julgando IMAGEM gerada nesta máquina, onde a Cormorant Garamond não está instalada. Ou seja: ela estava reprovando uma letra que o site nunca mostrou. A lição, pra qualquer rodada futura de tipografia: letra se julga no navegador dela, nunca num PNG gerado aqui. O que saiu e por quê: · Cormorant Garamond → Playfair Display. A Cormorant tem altura-x miúda e traço fino: no celular, nome de produto em duas linhas virava sussurro. A Playfair tem altura-x grande e contraste alto — é a mesma elegância de revista, mas que se lê de longe. · Inter → Poppins. A Poppins é a redonda que ela já tinha escolhido a dedo em 06/10 pro "Pro" do selo (*"gosto de fontes mais redondinhas e bonitas"*). Naquele dia ela valia pra uma palavra só; agora é o corpo do site inteiro, o que finalmente deixa a página coerente com o gosto que ela declarou. ⚠️ A PLAYFAIR OCUPA MAIS QUE A CORMORANT NO MESMO `font-size`. Toda medida de título desceu ~12% nesta rodada (34→30, 27→24, 26→23, 17→15,5 …). Se alguém devolver os números velhos achando que diminuí por engano, os títulos estouram os cartões. Os dois números de referência vieram da própria folha que ela aprovou: `--sec-tam: 30px` e `--nm-tam: 15.5px` na regra `.o-c`. ⚠️ E É UMA VARIÁVEL, não nove `font-family` espalhados. Eram nove cópias da mesma linha antes desta rodada — trocar fonte era caçar as nove e esquecer uma. */ --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } /* ⚠️ A POPPINS É MAIS LARGA E TEM ALTURA-X MAIOR QUE A INTER. No mesmo `font-size: 15px` ela parece um corpo acima — então o corpo caiu pra 14,5px e a entrelinha subiu pra 1,55. Não é capricho: a Poppins é uma geométrica (letras construídas em cima do círculo) e geométrica apertada entre linhas vira parede de texto. Mais ar é o que faz ela parecer caprichada em vez de larga. */ body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--offwhite); color: var(--tinta); line-height: 1.55; font-size: 14.5px; padding-bottom: 88px; /* espaço pro rodapé fixo do WhatsApp */ } /* ⚠️ O ESPAÇAMENTO FICOU NEGATIVO, e isso é de propósito. A Cormorant precisava de `+.01em` porque ela é estreita e as letras se encostavam. A Playfair é o contrário: desenho largo, de cartaz. Com espaçamento positivo o título de duas palavras parece esticado; com `-.005em` ele fecha e vira bloco. O número saiu da folha que ela aprovou (`--tit-sp: -.005em` na regra `.o-c`). */ h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; letter-spacing: -.005em; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; color: inherit; } img { display: block; max-width: 100%; } /* ---------------- o topo ---------------- */ .topo { position: sticky; top: 0; z-index: 40; background: var(--bordo); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 6px 20px rgba(42,32,36,.16); } .topo-in { max-width: 1440px; margin: 0 auto; padding: 13px 20px; display: flex; align-items: center; gap: 18px; } .marca { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .marca img { height: 34px; width: auto; } /* O SELO, NO EXTREMO OPOSTO DA LOGO. Pedido dela, 05/10/2026: *"acho que precisa ser do lado oposto da logo da Maison NGB e um logo diferenciada pra chamar a atenção"*. `margin-left:auto` é o que empurra pro extremo: a logo fica na esquerda, a busca e os botões no meio, e toda a sobra de largura vira margem ANTES do selo. Não é posição absoluta de propósito — assim nada passa por cima de nada quando a barra aperta. SEGUNDA VERSÃO, 05/10/2026 À NOITE. A primeira era a logo redonda + "Pro" em Cormorant, e ela reprovou nas três pernas de uma vez: *"ainda nao gostei do NGB Pro, ta muito pequeno. E se a gente pegar o NGB do MaisonNgb e colocar NGB Pro e embaixo um slogan? nao gosto da fonte do Pro essa fonte me irrita — gosto de fontes mais redondinhas e bonitas nao essa."* Então o selo virou um bloco de DUAS LINHAS, "NGB Pro" em cima e "ATACADO PARA LOJISTAS" embaixo — o "NGB" sendo a logo dela de verdade e o "Pro" digitado em Poppins 600, que ela escolheu em 06/10/2026 (*"o NGB Pro gostei da opção 4"*), com a frase que ela mesma escreveu (*"a frase tem que ser Atacado para Lojistas"* — ela trocou "revendedoras" por "lojistas", e nenhuma das quatro que eu ofereci era essa). =================================================================== ✅ TERCEIRA VERSÃO, 02/11/2026 — É A LOGO DELA, E ACABOU A LETRA =================================================================== Palavras dela: *"em tudo que tiver NGB Pro quero q coloque a logo"*. As duas versões acima eram, no fundo, a mesma coisa: eu MONTANDO o "NGB Pro" com as peças que eu tinha — a imagem do NGB dela de um lado e a palavra "Pro" digitada do outro, encostadas e alinhadas na mão. Dava certo e ela aprovou peça por peça, porque na época era o que existia. Em 25/10 ela desenhou o lockup INTEIRO e mandou nas três cores; desde aquele dia os quatro e-mails usam a arte dela e só o site continuava imitando com fonte. Então: um ``, e nada mais. Caiu o `.sp-linha`, caiu o `.sp-ngb`, caiu o `.sp-pro`, caiu o `.sp-slogan`, e caiu a Poppins do `index.html` (ela não tinha mais nenhuma letra na página). O que isso resolve de brinde: · acaba o alinhamento na mão (o `margin-bottom: 2px` que compensava a barriga do B, o `flex-end` que fazia o NGB e o "Pro" parecerem a mesma palavra, o `line-height: .72` do "Pro"). Cinco medidas equilibrando-se umas nas outras, cada uma um jeito de quebrar; · acaba a dependência de webfont no ponto mais visível da página. Webfont chega DEPOIS da primeira pintura — até 06/10 o selo nascia em Trebuchet e dava um pulinho quando a Poppins chegava. Imagem não pula; · e o selo do site passa a ser pixel por pixel o mesmo cabeçalho que ela vê nos e-mails, porque sai da MESMA caixa de recorte. ⚠️ A ESPECIFICIDADE CONTINUA VALENDO, e agora é mais fácil de pisar, porque sobrou um `` sozinho lá dentro: existiu neste arquivo uma regra `.selo-pro img` (0,1,1) que GANHA de `.sp-logo` (0,1,0) e mandava a imagem pra 40×40. Ela foi apagada em 05/10 — mas escreva sempre `.selo-pro .sp-logo`, nunca `.sp-logo` solto. ⓘ **O `ngb.png` ficou sem uso no site** e continua em disco de propósito: ele é o NGB dela isolado, tirado do vetor, e a receita abaixo custou uma rodada inteira pra descobrir. Se algum dia precisar do NGB sozinho (sem o "Pro"), é esse arquivo — não refaça. ⚠️ DE ONDE VEM O `ngb.png` — NÃO REFAÇA DO logo-h.png. Recortar o NGB do `logo-h.png` (ou do `horizontal-branco.png`) sai QUEBRADO: naquele desenho o "Maison" cruza por cima da perna fina do N e é vazado por dentro dela, então o recorte vira uma perna pontilhada. O arquivo bom foi tirado do VETOR `NGB-logo/originais/VETORES/LOGO PRINCIPAL/LOGO PRINCIPAL.pdf`, onde o NGB está numa linha só, inteiro. Receita: renderizar o PDF grande, recortar de x=300,y=528 pra baixo, inverter o cinza em alfa e pintar de branco. Resultado: 431×200, branco com fundo transparente — por isso serve em cima do bordô sem filtro nenhum. ⚠️ NADA DE DOURADO. Ela escreveu: *"não quero nada da cor dourada tá? não sei de onde tirou isso"*. Tudo aqui é branco, e o único enfeite é um filete de 1px a 18% de branco separando o selo do resto da barra. `margin-left:auto` continua sendo o que empurra pro extremo, e `--esc` existe pra o celular encolher o conjunto inteiro mexendo em UM número só, lá embaixo na media query. */ .selo-pro { --esc: 1; margin-left: auto; flex-shrink: 0; display: flex; align-items: center; padding-left: calc(20px * var(--esc)); border-left: 1px solid rgba(255,255,255,.18); } /* ⚠️ A ALTURA É A ÚNICA MEDIDA, e a largura é `auto` de propósito. O lockup dela é 453×171 (proporção 2,649); travar as duas achataria ou esticaria a arte, e esticar logo é o tipo de coisa que ninguém percebe no computador e salta na tela do celular. 50px é a altura que o bloco de duas linhas tinha antes (NGB 34 + respiro 4 + slogan 10), então a barra do site NÃO mudou de altura com esta troca — o resto da barra foi desenhado em volta dela. ⚠️ `display: block` não é enfeite: `` é inline por padrão e inline carrega o espaço reservado pro rabinho das letras embaixo, o que botaria uns 4px de nada embaixo do selo e o deixaria visivelmente mais alto que a logo Maison do outro lado da barra. */ .selo-pro .sp-logo { display: block; height: calc(50px * var(--esc)); width: auto; } .quebra { display: none; } /* só existe no celular; ver o index.html */ /* a busca */ .busca { flex: 1; position: relative; max-width: 520px; } .busca input { width: 100%; padding: 11px 40px 11px 38px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; outline: none; transition: background .15s, border-color .15s; } .busca input::placeholder { color: rgba(255,255,255,.62); } .busca input:focus { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); } .busca .lupa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .66; pointer-events: none; font-size: 14px; } /* `#limpa`, com cerquilha, porque no HTML ele é id e não classe. Estava escrito `.limpa` e o × da busca ia aparecer como botão cru do navegador, cinza, no meio do cabeçalho bordô. */ .busca #limpa { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: #fff; opacity: .6; padding: 7px 10px; font-size: 16px; line-height: 1; border-radius: 999px; } .busca #limpa:hover { opacity: 1; background: rgba(255,255,255,.14); } /* ⚠️ O DOURADO ACABOU — 05/11/2026, ORDEM DELA: *"onde ta dourado poe em branco"*. Era a terceira vez que ela reclamava do dourado. Em 06/10 foi do selo (*"não quero nada da cor dourada tá? não sei de onde tirou isso"*); eu tirei só do selo, achando que o resto tinha função. Agora ela olhou a prévia inteira e mandou tirar de tudo. Tirei. ⚠️ "BRANCO" NÃO DEU PRA SER BRANCO EM TODO LUGAR, e isso precisa estar escrito porque não é teimosia minha. Metade dos dourados vivia em fundo claro (papel e off-white) — branco ali é texto invisível. Então a regra que eu segui foi: · dourado em fundo bordô → BRANCO de verdade (é o que ela viu e o que ela pediu: botão "Minha conta", a faixa de recado em cima, o total e o botão da barra do pedido); · dourado em fundo claro → BORDÔ, que é a cor que esta casa já usava pra marcar coisa escolhida (ela mesma: *"quem marca a escolha é o bordô, nunca o dourado"*). Se ela disser que em algum desses o bordô ficou pesado, o substituto seguinte é `--tinta-fr`, nunca o dourado de volta. */ /* o botão de entrar */ .btn-entrar { flex-shrink: 0; /* branco cheio em cima do bordô: é o maior contraste que existe nesta paleta, então o botão ficou MAIS visível do que era em dourado, não menos. */ background: #fff; color: var(--bordo); border: 0; border-radius: 999px; cursor: pointer; padding: 10px 20px; font-weight: 600; font-size: 14px; white-space: nowrap; transition: transform .12s, box-shadow .15s, filter .15s; box-shadow: 0 2px 8px rgba(0,0,0,.18); } .btn-entrar:hover { filter: brightness(1.07); transform: translateY(-1px); } .btn-entrar:active { transform: translateY(0); } /* ⚠️ APARECE NO COMPUTADOR TAMBÉM, DESDE 05/11/2026. Era `display: none` com um `@media (max-width: 980px)` que o ligava só no celular, porque no computador os filtros eram uma coluna sempre à vista. A coluna saiu (ordem dela), os filtros que sobraram viraram gaveta, e gaveta sem botão é gaveta que ninguém acha. */ .btn-filtros { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.13); color: #fff; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; padding: 10px 16px; cursor: pointer; font-size: 14px; white-space: nowrap; } .btn-filtros:hover { background: rgba(255,255,255,.2); } /* ---------------- a faixa de recado ---------------- */ .faixa { background: var(--bordo-esc); color: rgba(255,255,255,.9); text-align: center; font-size: 13px; padding: 9px 20px; letter-spacing: .01em; } .faixa b { color: #fff; font-weight: 600; } /* ---------------- a barra de quem está logada ---------------- */ /* Regra da casa: "caixa não some". Entrou e não vê preço? A barra diz por quê e o que acontece agora. Barra em branco é o começo de "o site quebrou". */ .barra-eu { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 10px 20px; font-size: 13.5px; border-bottom: 1px solid var(--linha); } .barra-eu[hidden] { display: none; } .barra-eu.ok { background: #F4F8F3; color: #31502F; border-bottom-color: #DCE7D8; } .barra-eu.atencao { background: #FEF7EC; color: #74501A; border-bottom-color: #F0E1C6; } .barra-eu b { font-weight: 700; } /* O selo do convite. É o pedido dela, com as palavras dela: "Cliente Mari". O rótulo vem do banco (site_convites.rotulo), não está escrito em lugar nenhum do site — se ela mudar o texto na Gestão, muda aqui. */ .barra-eu .selo-cv { background: var(--bordo); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .barra-eu .oi { white-space: nowrap; } .barra-eu .min { color: inherit; opacity: .9; } .barra-eu button { background: none; border: 1px solid currentColor; color: inherit; border-radius: 999px; padding: 4px 13px; cursor: pointer; font-size: 12.5px; opacity: .8; } .barra-eu button:hover { opacity: 1; } /* A bolinha de "falta preencher" no botão "Meus dados". Vermelha e não da cor da barra de propósito: a barra verde quer dizer "está tudo certo, você vê preço", e é verdade. Mas faltar o CPF e o número da casa é outra conversa, que não aparece se a bolinha for da mesma cor do contentamento em volta. Herda `opacity` do botão, então ela clareia junto no hover — e continua sendo a coisa mais escura ali dentro. */ .barra-eu button .pingo { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #C8343F; vertical-align: 1px; } /* ---------------- a vitrola de banners ---------------- */ /* Os banners dela são 1672×941 — 16:9 cravado, os dez. A vitrola inteira é construída em cima disso. ⚠️ `aspect-ratio: 16/9` e NUNCA uma altura em pixel. Altura fixa obriga `object-fit: cover`, que corta — e o que seria cortado é justamente a manchete dela, que em cada banner está num canto diferente (na Lattafa à direita, na Bidaya no meio, na Victoria's à esquerda). Não existe recorte que sirva pros dez. ⚠️ E é por isso que também não tem `max-height`. A tentação é óbvia: num monitor largo, 16:9 de 1440px dá 810px de altura e o banner come a tela inteira. Mas limitar a altura é cortar. O que limita aqui é a LARGURA (`max-width` do `.vitrola`), que encolhe os dois lados juntos e mantém a arte inteira. ⚠️ ESTE 1440 FOI MEDIDO E DISPUTADO — não deixei por acaso, e quem for encolher precisa saber o que eu já tentei. Eu abri o thekingofparfums (o site que ela chamou de lindo) e medi: a 1280 de largura, a capa dele tem 526px de altura, ou seja 2,4:1 — não 16:9. A dela, à mesma largura, dá 697. Num notebook isso é a diferença entre ver e não ver produto na primeira olhada. Tentei as duas saídas e as duas são piores: 1. **Cortar em cima e embaixo** (o corte vertical não mexe na posição horizontal da manchete, que é o que me fez descartar o corte horizontal). Olhei os dez com a faixa marcada: a logo MaisonNGB está na parte de cima em quase todos, e 13% fora do topo decapita a logo dela. Descartado. 2. **Estreitar pra ~1000px** (eu cheguei a escrever isso com `110vh` e renderizei os dois lado a lado, a 1440x820). A arte dela não é foto: é composição PRONTA, com manchete, legenda e botão pintados dentro. Encolhida, a manchete queimada no pixel fica MENOR que o "Todo o catálogo" logo abaixo — e a página passa a parecer um site com a foto de outro site dentro. A moldura de creme nos dois lados ainda piora: vira cartãozinho. Então a altura fica, de propósito, 171px acima da referência. O que paga essa conta é que a capa aparece CORTADA pela dobra, e borda cortada é o que diz "tem mais embaixo" — e quem já sabe o que quer tem a busca no topo, que não saiu do lugar. */ .vitrola { position: relative; max-width: 1440px; margin: 0 auto; padding: 22px 20px 0; } .vitrola[hidden] { display: none; } .vt-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--raio); box-shadow: var(--sombra-alt); /* A barra de rolagem é escondida porque a navegação já tem setas e bolinhas. Barra cinza atravessada embaixo da arte dela é o tipo de detalhe que faz um site parecer inacabado. */ scrollbar-width: none; -ms-overflow-style: none; /* Sem isto o arrasto horizontal no celular "vaza" e o navegador entende como gesto de voltar página. */ overscroll-behavior-x: contain; } .vt-pista::-webkit-scrollbar { display: none; } .vt-slide { flex: 0 0 100%; scroll-snap-align: start; display: block; /* O fundo bordô só aparece no instante entre a página existir e a imagem chegar. Branco ali daria um flash claro no meio da arte escura dela; o bordô já é a cor da casa. */ background: var(--bordo); } .vt-slide img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; /* só age se um arquivo futuro não for 16:9 */ display: block; } /* As setas. Discretas de propósito: a arte dela é o assunto, não a navegação. Vidro escuro, que funciona tanto no banner claro da Tree Hut quanto no quase-preto do Club de Nuit. */ .vt-seta { /* ⚠️ `top: 50%` sozinho mira o meio da SEÇÃO, e a seção tem 22px de respiro em cima que a arte não tem — a seta ficava 11px abaixo do meio do banner. Ninguém "vê" 11px, mas é dessas coisas que faz parecer desalinhado sem saber por quê. */ position: absolute; top: calc(50% + 11px); transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.34); background: rgba(32,16,14,.40); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s, background .16s; } .vt-ant { left: 34px; } .vt-pro { right: 34px; } .vitrola:hover .vt-seta, .vt-seta:focus-visible { opacity: 1; } .vt-seta:hover { background: rgba(32,16,14,.68); } /* As bolinhas flutuam DENTRO da arte, encostadas embaixo. Fora dela empurrariam o catálogo pra baixo e criariam uma faixa vazia entre o banner e a grade. */ .vt-bolas { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 7px; z-index: 2; pointer-events: none; } .vt-bolas button { pointer-events: auto; width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.42); box-shadow: 0 0 0 1px rgba(32,16,14,.28); transition: width .22s, background .22s; } /* A bolinha de agora vira um TRACINHO, não só uma bolinha mais clara. Diferença de cor sozinha some em cima de banner claro; a mudança de forma se lê em qualquer fundo. */ .vt-bolas button.on { width: 22px; border-radius: 4px; background: #fff; } /* Um banner só: não há o que navegar, e botão que não leva a lugar nenhum é pior que botão nenhum. */ .vitrola.um-so .vt-seta, .vitrola.um-so .vt-bolas { display: none; } @media (max-width: 980px) { .vitrola { padding: 12px 0 0; } /* No celular o banner vai de ponta a ponta, sem margem e sem canto arredondado — é o que faz ele parecer capa e não cartãozinho. */ .vt-pista { border-radius: 0; box-shadow: none; } /* Seta de 42px em cima de uma arte de 219px de altura é um botão cobrindo um quinto do banner. No celular quem navega é o dedo. */ .vt-seta { display: none; } .vt-bolas { bottom: 9px; } } /* ---------------- o menu de cima ---------------- */ /* ⚠️ ISTO É O QUE ELA PEDIU EM 05/11/2026, E SUBSTITUI A COLUNA DA ESQUERDA. Palavras dela: *"o invés de ter do lado, do lado esquerdo, as coleções, tipo árabes e tal, eu quero que tenha, tipo assim, igual no site do The King of Parfums, que tem lá, tipo, lá em cima"*. E o veredito, que é o que manda: *"eu não quero separar igual tá, sabe? Que eu acho feio do jeito que tá"*. ⚠️ POR QUE A BARRA É CLARA, E NÃO BORDÔ. A tentação era óbvia: o topo é bordô, a referência dela tem a barra de coleções escura, bordô embaixo de bordô pareceria "a marca inteira". Medi e desisti: acima desta barra já existem DUAS faixas escuras empilhadas — o `.topo` (--bordo) e a `.faixa` de recado (--bordo-esc). Uma terceira faria 150px de bloco escuro antes de qualquer produto, e no celular isso é meia tela de nada. A barra clara é o que devolve o ar entre o cabeçalho e a vitrine. É a mesma decisão que o resto desta página toma sempre: a referência serviu de modelo de ORGANIZAÇÃO, não de cor. */ .menu { background: var(--papel); border-bottom: 1px solid var(--linha); /* z-index acima da vitrola (que não tem) e abaixo do `.topo` (40): o submenu cai POR CIMA do banner, e o topo continua passando por cima de tudo quando a página rola. */ position: relative; z-index: 30; } /* A de fora rola; a de dentro leva os botões. Ver o comentário no index.html — `overflow` corta pros lados E pra cima, então submenu e rolagem não podem morar na mesma caixa. */ .menu-rol { max-width: 1440px; margin: 0 auto; padding: 0 20px; } /* ⚠️ `width: max-content` + `margin: 0 auto` é o truque que faz a fileira ficar CENTRADA quando cabe e começar da esquerda quando não cabe. Com `justify-content: center` numa caixa que rola, o começo da fila fica inalcançável — o navegador corta à esquerda e não deixa rolar pra lá. Medi a fileira: 9 itens em Poppins 600 a 13px dão 1.123px, então ela cabe centrada até 1.163px de tela e vira fita abaixo disso. */ .menu-in { display: flex; align-items: stretch; width: max-content; margin: 0 auto; } .mn-it { position: relative; display: flex; } .mn-b, .mn-s { background: none; border: 0; cursor: pointer; color: var(--tinta); white-space: nowrap; display: flex; align-items: center; gap: 7px; } /* ⚠️ CAIXA ALTA COM `letter-spacing`, e os dois juntos. Letra maiúscula sem espaçamento fica apertada e vira bloco ilegível; é a diferença entre "menu de loja" e "aviso de condomínio". O 13px é medido, não escolhido: a 14px a fileira passa de 1.200px e quebra em duas linhas no notebook dela. */ .mn-b { padding: 15px 16px 13px; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; border-bottom: 2px solid transparent; transition: color .14s, border-color .14s; } .mn-b:hover { color: var(--bordo); } /* ⚠️ QUEM MARCA A ESCOLHA É O BORDÔ, nunca o dourado — regra da casa, e a terceira vez que ela pede. O friso embaixo em vez de fundo pintado: fundo pintado no item ligado faz a fileira parecer uma fileira de botões apertados, e some o ar que é a razão desta barra ser clara. */ .mn-b.on { color: var(--bordo); border-bottom-color: var(--bordo); } /* O pai aceso PORQUE um filho dele está escolhido. Precisa ser diferente de `.on`: quem escolheu "Perfumes em óleo" está DENTRO de Árabes, e se o pai acendesse igual, a tela diria que a prateleira aberta é a de Árabes inteira — 352 frascos em vez de 10. Então o pai fica só com a cor, sem o friso. */ .mn-b.no-filho { color: var(--bordo); } /* A setinha de "tem mais aqui dentro". Em CSS e não em caractere digitado: ▾ e ▼ saem de tamanhos diferentes em cada sistema, e um deles vira emoji colorido no celular. */ .mn-b.mn-tem::after { content: ''; width: 5px; height: 5px; flex: 0 0 auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .5; transition: opacity .14s; } .mn-b.mn-tem:hover::after, .mn-it.aberto .mn-b.mn-tem::after { opacity: 1; } /* A contagem ao lado do nome. Mesma função do número na caixinha antiga: evita o beco sem saída de clicar e achar pouco. Em `tabular-nums` pra os números não dançarem de largura. */ .mn-q { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--tinta-fr); font-variant-numeric: tabular-nums; } .mn-b.on .mn-q, .mn-b.no-filho .mn-q { color: var(--bordo-clar); } /* ⚠️ A CONTAGEM SAI DA FILEIRA DE CIMA NO COMPUTADOR, e fica só nos submenus. Duas razões, nessa ordem: 1. MEDIDA. Com os nove números, a fileira dá 1.351px — cabe numa tela de 1440 e ESTOURA numa de 1280, que é onde a prévia roda e onde está metade dos notebooks. A primeira coisa que eu vi na imagem foi o "CUIDADOS E BELEZA" cortado pela borda direita. Sem os números são 1.183px, e sobra folga nos dois tamanhos. Eu podia ter apertado a letra pra 12px e o respiro pra 10 e tudo caberia — e aí eu teria resolvido uma régua estragando o ar, que é exatamente a reclamação que começou este redesenho. 2. O NÚMERO ALI NÃO SERVE PRA NADA. A função dele era evitar o beco sem saída de clicar e achar zero — e no menu isso não pode acontecer, porque o `montarMenu()` já não publica prateleira vazia. E logo abaixo da grade a `.conta` diz "352 de 1.321 produtos" assim que a pessoa clica. Era número repetido. No SUBMENU ele fica, porque lá serve pra outra coisa: comparar irmãos ("Cabelos 64" ao lado de "Suplementos 6" diz onde vale a pena entrar). E na fita do celular ele fica também, porque lá não existe submenu — a fita é a navegação inteira. */ @media (min-width: 981px) { .mn-b > .mn-q { display: none; } } /* --- o submenu --- */ .mn-pop { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 100%; width: max-content; max-width: 280px; background: var(--papel); border: 1px solid var(--linha); border-top: 0; border-radius: 0 0 var(--raio) var(--raio); box-shadow: var(--sombra-alt); padding: 7px; z-index: 31; } /* Abre por clique (que é o que o dedo e o teclado têm) e, no computador, também por passar o mouse. As duas, não uma: `:hover` sozinho nunca abre no celular, e clique sozinho obriga quem está no mouse a clicar duas vezes pra chegar num filho. */ .mn-it.aberto > .mn-pop { display: block; } @media (hover: hover) and (min-width: 981px) { .mn-it:hover > .mn-pop, .mn-it:focus-within > .mn-pop { display: block; } } /* ⚠️ A GAVETINHA DA PONTA ENCOSTA NA PONTA, não fica centrada. O padrão é `left: 50%` com `translateX(-50%)`, que centra a caixa debaixo do item — bonito no meio da fileira e cortado nas duas bordas. A caixa tem até 280px e o item tem uns 160px: são 60px sobrando de cada lado, e no último item (hoje "Cuidados e beleza", que é justamente quem tem a lista maior) esses 60px caem fora da tela numa janela de 1.100px. Numa tela de 1.280 ainda passava raspando — e "passa raspando" é a coisa que quebra na máquina da outra pessoa. */ .mn-it:first-child > .mn-pop { left: 0; right: auto; transform: none; } .mn-it:last-child > .mn-pop { left: auto; right: 0; transform: none; } .mn-s { width: 100%; justify-content: space-between; padding: 9px 11px; border-radius: 8px; font-size: 14px; text-align: left; } .mn-s:hover { background: var(--offwhite); color: var(--bordo); } .mn-s.on { color: var(--bordo); font-weight: 600; background: var(--offwhite); } /* --- no celular: fita que rola com o dedo --- */ @media (max-width: 980px) { /* ⚠️ `overflow-x: auto` aqui é o que obriga o `app.js` a montar o OUTRO desenho (sem submenu) abaixo de 980px — e os dois 980 têm que ser o mesmo número. A constante lá se chama `MENU_FITA`. Se mudar um e não o outro, a tela monta um desenho e pinta o outro: os submenus existiriam e sairiam cortados. */ .menu-rol { overflow-x: auto; padding: 0 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .menu-rol::-webkit-scrollbar { display: none; } /* Na fita a fila NÃO é centrada: ela começa encostada na esquerda, senão o primeiro item nasce fora da tela. */ .menu-in { margin: 0; } .mn-b { padding: 12px 11px 10px; font-size: 12px; letter-spacing: .05em; } /* O filho na mesma fila do pai. O pontinho na frente é a única pista de hierarquia que caberia numa fita de 12px. */ .mn-b.mn-fl { text-transform: none; letter-spacing: .01em; font-weight: 500; } .mn-b.mn-fl::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--linha); flex: 0 0 auto; } .mn-q { font-size: 10px; } } /* ---------------- o corpo: a grade ---------------- */ /* ⚠️ UMA COLUNA SÓ DESDE 05/11/2026. Era `236px 1fr` — a coluna de filtros mais a grade. A coluna saiu por ordem dela (*"acho feio do jeito que tá"*) e a grade herdou os 266px: 236 da coluna mais os 30 do vão. Em 1440px de tela isso é um cartão de produto a mais por fileira, sem apertar nada. */ .corpo { max-width: 1440px; margin: 0 auto; padding: 26px 20px; } /* --- a gaveta de filtros --- */ /* ⚠️ ERA COLUNA FIXA, VIROU GAVETA EM TODA LARGURA — 05/11/2026. Antes isto era `position: sticky` colado no lado esquerdo, e no celular virava tela cheia. Agora é a mesma gaveta nos dois: o `.filtros` é o escuro por cima da página, e o `.gv-painel` é a folha branca que entra pelo lado direito. ⚠️ Pela DIREITA de propósito. O botão "Filtros" que abre isto está no lado direito do topo, junto do "Entrar" — gaveta que nasce longe do botão que a chamou parece outra coisa aparecendo na tela. */ .filtros { position: fixed; inset: 0; z-index: 60; display: none; background: rgba(42, 32, 36, .44); } .filtros.aberto { display: block; } .gv-painel { position: absolute; top: 0; right: 0; bottom: 0; width: 340px; max-width: 92vw; background: var(--papel); box-shadow: var(--sombra-alt); overflow-y: auto; /* `overscroll-behavior: contain` impede que rolar até o fim da gaveta continue rolando a página atrás dela. */ overscroll-behavior: contain; } .grupo { border-bottom: 1px solid var(--linha); } .grupo:last-child { border-bottom: 0; } .grupo > summary { cursor: pointer; padding: 13px 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fr); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .grupo > summary::-webkit-details-marker { display: none; } .grupo > summary::after { content: '+'; font-size: 16px; font-weight: 400; color: var(--bordo); transition: transform .18s; } .grupo[open] > summary::after { content: '−'; } .grupo > summary:hover { color: var(--bordo); } .opcoes { padding: 0 16px 14px; max-height: 260px; overflow-y: auto; } .opcao { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-size: 14px; color: var(--tinta); } .opcao:hover { color: var(--bordo); } .opcao input { accent-color: var(--bordo); cursor: pointer; flex-shrink: 0; } /* ⚠️ O `> span:first-of-type` NO LUGAR DE `span` CONSERTA UM DEFEITO ANTIGO, descoberto em 04/11/2026 olhando a prévia, não lendo código. Cada linha de filtro tem DOIS spans: o nome da coleção e o número de produtos. O seletor antigo era `.opcao span`, que pegava os dois — e `flex: 1` nos dois faz eles RACHAREM o espaço vago ao meio. Resultado: o nome ficava com ~95px dos 158px que tinha direito, e a coluna mostrava "Brand Coll…", "Corpo & B…", "Isabelle La …", com um palmo de branco sobrando depois do número. Parecia nome comprido demais; era o número levando metade da linha sem usar. Com o nome sozinho no `flex: 1`, "Brand Collection" (114px na Poppins) e "Isabelle Lancray" (113px) cabem inteiros. ⚠️ As reticências continuam aí de propósito — é rede de proteção pra o dia em que ela cadastrar uma coleção de nome gigante. O que mudou é que agora elas só aparecem quando o nome é DE FATO grande demais. */ .opcao > span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .opcao .qtd { flex: 0 0 auto; color: var(--tinta-fr); font-size: 12px; font-variant-numeric: tabular-nums; } .limpar-tudo { width: calc(100% - 32px); margin: 12px 16px 14px; background: none; border: 1px solid var(--linha); border-radius: 8px; padding: 9px; cursor: pointer; font-size: 13px; color: var(--tinta-fr); } .limpar-tudo:hover { border-color: var(--bordo); color: var(--bordo); } /* --- o título da seção --- */ /* O que separa a referência que ela mandou deste site não é cor: medi, e o creme de lá (#FCF8F4) e o `--offwhite` daqui (#FBF8F4) são praticamente a mesma tinta. O que separa é RITMO — lá nenhuma grade começa encostada na barra, sempre tem friso, título centrado em serifa e ar antes do primeiro produto. É isto aqui. ⚠️ O respiro é a peça principal, não o texto. 34px em cima e 30 embaixo parecem exagero num arquivo CSS e não são: ar é o que diferencia "montado por gente" de "cuspido por um sistema", e era exatamente a reclamação dela ("tá bem cara de inteligência artificial"). Se alguém for apertar isto pra caber mais produto na primeira tela, está desfazendo a correção. */ .sec { text-align: center; padding: 34px 0 30px; /* A barra de cima é `position: sticky`, então descer até aqui sem esta folga esconderia o título embaixo dela. É o que o clique no banner faz. */ scroll-margin-top: 96px; } /* O friso: dois fios e um losango no meio. Em CSS puro, com `border` girado 45° — um losango não precisa de imagem. ⚠️ É BORDÔ, não `--latao`. O dourado desta casa tem função: ele é o preço, a marca em cima do produto e as estrelinhas, e serve pra puxar o olho pro número. Ornamento dourado roubaria exatamente essa força, e ela já disse o que acha de dourado que apareceu sem motivo. */ .sec-orn { display: block; width: 124px; height: 12px; margin: 0 auto 16px; position: relative; /* Os dois fios são FUNDO, não elementos: sobram os dois pseudo-elementos, e eu só preciso de um pra o losango. */ background: linear-gradient(var(--linha), var(--linha)) left center/46px 1px no-repeat, linear-gradient(var(--linha), var(--linha)) right center/46px 1px no-repeat; } /* O losango é um quadradinho girado, NÃO o caractere "◆". Caractere depende de a fonte ter o desenho — a Inter não tem garantia, e fonte sem o desenho mostra o quadradinho vazio do "caractere que faltou" bem no meio do título dela. Quadrado girado em CSS aparece em qualquer navegador, sempre. */ .sec-orn::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--bordo); transform: rotate(45deg); } .sec-t { font-size: 30px; line-height: 1.12; color: var(--tinta); font-weight: 600; } .sec-s { max-width: 460px; margin: 9px auto 0; font-size: 14px; color: var(--tinta-fr); line-height: 1.6; } @media (max-width: 980px) { .sec { padding: 26px 0 22px; } .sec-t { font-size: 24px; } .sec-s { font-size: 13.5px; } } /* --- as estantes da página inicial --- */ /* Pedido dela em 06/11/2026: *"monta a prévia na página inicial, sabe? Igual no The King of Parfums."* São as prateleiras de lista (Mais desejados, Mais vendidos) montadas embaixo do banner, cada uma numa fileira que rola de lado — em vez de só existirem atrás de um clique no menu. Elas usam o MESMO `.sec` (friso + título + frase) e o MESMO `.cartao` da grade. O que é novo aqui é só a fileira que rola e o pé com a porta pra lista inteira. */ .estantes { max-width: 1440px; margin: 0 auto; padding: 0 20px; } .estantes[hidden] { display: none; } /* O fio separa uma estante da seguinte e, na última, do catálogo. Sem ele as três seções viram uma sopa de título + fileira + título + fileira, e a pessoa não vê onde uma acaba. */ .est + .est { border-top: 1px solid var(--linha); } .est:last-child { border-bottom: 1px solid var(--linha); } /* ⚠️ A PISTA DE QUE A FILEIRA ROLA — e por que ela precisou existir. Eu montei a estante, renderizei a página e OLHEI o PNG: numa tela de 1280px cabem exatamente cinco cartões (5 × 228 + 4 × 22 de respiro + 40 de `padding` = 1268px) e **nenhuma lasquinha do sexto**. No Mac a barra de rolagem é invisível até a pessoa rolar, e o `+N` do botão também não aparecia (a lista tinha 10 itens contra os 12 da fileira). Resultado: uma estante que rola e não diz a ninguém que rola — a pessoa vê cinco produtos e acha que são cinco. Isso não dá pra ver lendo o CSS. Só olhando a tela. */ .est-caixa { position: relative; } /* As duas sombras de borda. Elas dizem "tem mais coisa deste lado" sem ocupar espaço nenhum, e somem sozinhas quando não tem. ⚠️ `rgba(251,248,244,0)` e NUNCA `transparent`: `transparent` é `rgba(0,0,0,0)`, e o degradê interpola passando pelo cinza — a sombra sai suja, com uma faixa acinzentada no meio. Tem que ser a MESMA cor do fundo com alfa zero. (251,248,244 é o `--offwhite`.) */ .est-caixa::before, .est-caixa::after { content: ''; position: absolute; z-index: 2; top: 0; bottom: 12px; /* 12px = o `padding` da barra de rolagem */ width: 54px; pointer-events: none; opacity: 0; transition: opacity .18s; } .est-caixa::before { left: 0; background: linear-gradient(to right, var(--offwhite), rgba(251,248,244,0)); } .est-caixa::after { right: 0; background: linear-gradient(to left, var(--offwhite), rgba(251,248,244,0)); } .est-caixa.tem-esq::before { opacity: 1; } .est-caixa.tem-dir::after { opacity: 1; } /* As setas. Elas são do MOUSE: quem está no celular arrasta com o dedo e não precisa de botão nenhum ocupando a tela em cima do cartão — por isso o `@media (hover: hover)` lá embaixo é quem as acende. O JavaScript as esconde com `hidden` quando não há pra onde rolar, então seta na tela é sempre seta que funciona. */ .est-seta { position: absolute; z-index: 3; top: calc(50% - 6px); transform: translateY(-50%); width: 40px; height: 40px; padding: 0; display: none; align-items: center; justify-content: center; border: 1px solid var(--linha); border-radius: 999px; background: var(--papel); color: var(--bordo); box-shadow: var(--sombra); cursor: pointer; transition: background .16s, border-color .16s; } .est-seta[hidden] { display: none; } .est-seta:hover { background: var(--offwhite); border-color: var(--bordo); } .est-seta:focus-visible { outline: 2px solid var(--bordo); outline-offset: 2px; } .est-seta svg { width: 17px; height: 17px; display: block; } /* Meia seta pra fora da pista, de propósito: encostada na borda ela tapa metade de um cartão; pra fora ela encosta no respiro que a `.estantes` já tem. */ .est-seta-e { left: -14px; } .est-seta-d { right: -14px; } /* ⚠️ A regra que ACENDE a seta é `:not([hidden])`, e não `.est-caixa.tem-dir .est-seta-d`. Com a segunda forma eu teria duas regras disputando o mesmo elemento com a mesma força (0,3,0 contra 0,2,0 do `[hidden]`), e a de dentro do `@media`, por vir depois, ganharia — ou seja, uma seta marcada como escondida pelo JavaScript apareceria. Assim as duas regras nunca pegam o mesmo elemento: quem decide SE a seta existe é o JavaScript (`hidden`), quem decide se este aparelho tem seta é o `@media`. */ @media (hover: hover) and (min-width: 981px) { .est-seta:not([hidden]) { display: inline-flex; } } /* A FILEIRA QUE ROLA. ⚠️ O `padding-bottom` NÃO é respiro: é o lugar da barra de rolagem. Sem ele, no Windows e no Linux (onde a barra ocupa espaço de verdade, diferente do Mac) ela se desenha POR CIMA do pé dos cartões. Isso não aparece em teste nenhum feito aqui. */ .est-rol { overflow-x: auto; overflow-y: hidden; padding-bottom: 12px; /* Cada cartão vira um ponto de parada: o dedo solta e a fileira encaixa num cartão inteiro, nunca cortado pela metade. */ scroll-snap-type: x proximate; /* A folga pro foco do teclado não sair cortado pela caixa que corta o que transborda. */ scroll-padding: 0 2px; } .est-rol:focus-visible { outline: 2px solid var(--bordo); outline-offset: 3px; } .est-pista { display: flex; gap: 22px; /* ⚠️ `max-content` é o que faz a fileira ficar DEITADA. Sem ele o flex tenta caber tudo na largura da tela e espreme 12 cartões em tirinhas de 90px — e, pior, não rola, então o bug parece "sumiram os produtos". */ width: max-content; /* 1px em cima e embaixo pra a sombra e o `translateY` do hover do cartão não serem cortados pelo `overflow` do pai. */ padding: 1px 1px 2px; } /* 228px é a MESMA medida do `minmax()` da `.grade`, de propósito: a estante e o catálogo logo abaixo mostram o cartão do mesmo tamanho, e a página parece uma coisa só em vez de dois sistemas diferentes empilhados. */ .est-pista .cartao { flex: 0 0 228px; width: 228px; scroll-snap-align: start; } .est-pe { text-align: center; padding: 4px 0 30px; } /* ⚠️ Botão de contorno, não botão cheio. O botão cheio desta página é o "Adicionar ao pedido", que está logo ali no cartão ao lado — dois botões com o mesmo peso disputam, e o que a gente quer que ela aperte é o de comprar. Este é uma porta, não uma ação. */ .est-ver { font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bordo); background: none; border: 1px solid var(--linha); border-radius: 999px; padding: 11px 26px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: border-color .16s, background .16s; } .est-ver:hover { border-color: var(--bordo); background: var(--offwhite); } /* A contagem do que ficou de fora da fileira. Vem apagadinha porque ela é a promessa do clique, não o clique. */ .est-mais { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--tinta-fr); background: var(--offwhite); border-radius: 999px; padding: 2px 9px; } @media (max-width: 980px) { .estantes { padding: 0 14px; } /* No celular o cartão encolhe pra sobrar uma lasquinha do seguinte à direita — essa lasquinha é a única pista de que a fileira continua, e é o que faz o dedo arrastar. Cartão que termina exatamente na borda da tela parece fim de lista. */ .est-pista { gap: 14px; } .est-pista .cartao { flex: 0 0 168px; width: 168px; } .est-pe { padding: 2px 0 24px; } .est-ver { font-size: 12.5px; padding: 10px 20px; } } /* Quem pediu menos movimento não leva o encaixe do rolar. */ @media (prefers-reduced-motion: reduce) { .est-rol { scroll-snap-type: none; } } /* --- barra de ordenação --- */ .barra { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .conta { font-size: 14px; color: var(--tinta-fr); } .conta b { color: var(--tinta); font-weight: 600; } .ordenar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-fr); } .ordenar select { background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; padding: 8px 11px; cursor: pointer; } .ordenar select:focus { outline: 2px solid var(--bordo); outline-offset: 1px; } /* as etiquetas do que está filtrado — ela precisa VER o que está ativo */ .ativos { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; } .pilula { display: inline-flex; align-items: center; gap: 7px; background: var(--papel); border: 1px solid var(--bordo); color: var(--bordo); border-radius: 999px; padding: 5px 8px 5px 12px; font-size: 13px; } .pilula button { background: none; border: 0; cursor: pointer; color: var(--bordo); font-size: 15px; line-height: 1; padding: 0 2px; opacity: .65; } .pilula button:hover { opacity: 1; } /* --- a grade --- */ /* ⚠️ 04/11/2026 — AS TRÊS MEDIDAS DESTA GRADE MUDARAM, e é aqui que mora metade da reclamação dela ("tá bem cara de inteligência artificial... tá bem simples"). Cartão de 205px com 18px de respiro põe sete produtos por fileira num monitor largo. Sete é densidade de PLANILHA: o olho não pousa em nada, e a página lê como listagem de sistema, não como vitrine. A referência que ela mandou põe quatro, e é por isso que lá cada frasco parece um produto e aqui parecia um registro. 228px + 24px dá cinco por fileira em 1440 e quatro em 1200 — e a foto de cada produto ganha uns 20% de área sem ninguém trocar nenhuma foto. */ .grade { display: grid; gap: 24px 22px; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); } .cartao { background: var(--papel); border: 1px solid transparent; border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sombra); transition: transform .16s, box-shadow .16s, border-color .16s; } /* ⚠️ A BORDA NASCE TRANSPARENTE, e não `border: 0`. Os dois dão o mesmo desenho parado, e são MUITO diferentes no hover: sem a borda declarada, ela aparece do nada no hover e empurra o cartão 1px pra dentro — a grade inteira treme quando o mouse passa. Com a borda já ocupando o lugar, só a cor muda. Transparente em vez de `--linha` porque o fio cinza em volta de todo cartão era o que dava à grade cara de tabela. Quem separa um cartão do outro agora é a sombra e o ar, como na referência. */ .cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra-alt); border-color: #E3D7C9; } /* 04/11/2026 — o cartão inteiro virou clique (abre a ficha). A mão do mouse é a única coisa que avisa isso num desenho sem botão "ver mais", e eu NÃO quis pôr o botão: ele apareceria 1.289 vezes na tela e roubaria a atenção do "Adicionar ao pedido", que é o que paga a conta. */ .cartao { cursor: pointer; } /* ...menos no pé dele, que tem botões de verdade. Sem isto o "+" fica com a mãozinha de "abre outra coisa" e a pessoa hesita. */ .cartao .add, .cartao .portao { cursor: auto; } .foto { position: relative; aspect-ratio: 1/1; background: linear-gradient(160deg, #FDFBF8, #F2EBE2); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* 12px → 18px. O frasco encostado na borda da moldura é a diferença entre foto de catálogo de fornecedor e foto de loja. Ar em volta do produto é de graça e é o enquadramento inteiro. */ .foto img { width: 100%; height: 100%; object-fit: contain; padding: 18px; transition: transform .3s; } .cartao:hover .foto img { transform: scale(1.045); } .foto .mono { font-family: var(--serif); font-size: 36px; color: var(--linha); letter-spacing: .06em; user-select: none; } /* ⚠️ 04/11/2026 — ESTE ERA O ÚLTIMO ROSA DO SITE, e ele sobreviveu sete meses escondido num `rgba()`. Estava `rgba(110,31,46,.92)`, que é o `#6E1F2E` que ela mandou trocar em 05/10 ("o vermelho está puxando pro rosa"). Naquele dia eu troquei tudo que estava escrito em hexadecimal e não achei este, porque buscar por `6E1F2E` não encontra `110,31,46`. A regra dela, medida: **B < G, senão puxa pro rosa.** O velho tinha G31 e B46 — azul ACIMA de verde, matiz 348°, que já é magenta. O bordô da casa (`#521310`) é R82 G19 B16, matiz 3°. ⚠️ Fica em `rgba()` e não em `var(--bordo)` porque a transparência é proposital: o selo senta em cima da foto do produto e precisa deixar a foto respirar atrás. Se mexer no número, mexa nos três juntos — 82, 19, 16. */ .chip-col { position: absolute; top: 9px; left: 9px; background: rgba(82,19,16,.92); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; backdrop-filter: blur(3px); } /* O respiro do texto subiu junto com o da foto (12/13 → 16, 7 → 8). Não é capricho: o cartão ficou ~10% mais largo nesta rodada, e margem que não cresce junto com a caixa faz o texto parecer colado na borda — que é exatamente a diferença entre catálogo de fornecedor e vitrine de loja. */ .txt { padding: 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; } .mrc { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bordo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 14px; } .nm { font-family: var(--serif); font-size: 15.5px; line-height: 1.24; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 39px; } .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; } .tag { font-size: 11px; color: var(--tinta-fr); background: var(--offwhite); border: 1px solid var(--linha); border-radius: 5px; padding: 2px 7px; white-space: nowrap; } .tag.g { border-color: #E3D4DA; color: var(--bordo-clar); } /* O portão do preço. Não é CSS escondendo número: o preço NÃO VEM do banco pra quem não está logado. Isto aqui é só o convite. */ .portao { margin-top: 9px; padding-top: 10px; border-top: 1px dashed var(--linha); } .portao button { width: 100%; background: var(--offwhite); border: 1px solid var(--bordo); color: var(--bordo); border-radius: 9px; padding: 9px; cursor: pointer; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; transition: background .14s, color .14s; } .portao button:hover { background: var(--bordo); color: #fff; } /* O preço, pra quem foi aprovada. ⚠️ Não existe aqui nenhum preço riscado e nenhum "R$ ••••". Borrar número é convite pra tentar ler; não mandar número é o fim da conversa. Quem não está aprovada recebe do banco uma resposta SEM a coluna de preço — não tem o que esconder. */ .preco { margin-top: 9px; padding-top: 10px; border-top: 1px dashed var(--linha); display: flex; flex-direction: column; gap: 1px; } .preco b { font-size: 19px; font-weight: 700; color: var(--bordo); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .preco small { font-size: 11px; color: var(--tinta-fr); } /* a faixa de preço na coluna de filtros */ .faixa-preco { display: flex; align-items: center; gap: 7px; } .faixa-preco input { flex: 1; min-width: 0; width: 100%; border: 1px solid var(--linha); border-radius: 8px; padding: 8px 9px; font-size: 13px; background: var(--papel); } .faixa-preco input:focus { outline: 2px solid var(--bordo); outline-offset: 1px; } .faixa-preco span { color: var(--tinta-fr); } .faixa-ok { width: 100%; margin-top: 9px; background: var(--bordo); color: #fff; border: 0; border-radius: 8px; padding: 8px; cursor: pointer; font-size: 13px; } .faixa-ok:hover { background: var(--bordo-esc); } /* ---------------- estados ---------------- */ .aviso { grid-column: 1/-1; text-align: center; padding: 70px 24px; color: var(--tinta-fr); } .aviso .serif { font-size: 23px; color: var(--tinta); margin-bottom: 8px; } .aviso button { margin-top: 18px; background: var(--bordo); color: #fff; border: 0; border-radius: 999px; padding: 11px 24px; cursor: pointer; font-size: 14px; } /* esqueletos enquanto o banco responde */ .esq { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; } .esq .b { background: linear-gradient(90deg, #F4EEE7, #FBF8F4, #F4EEE7); background-size: 200% 100%; animation: brilho 1.3s linear infinite; } .esq .b1 { aspect-ratio: 1/1; } .esq .b2 { height: 11px; margin: 13px 13px 0; border-radius: 4px; width: 42%; } .esq .b3 { height: 15px; margin: 9px 13px 16px; border-radius: 4px; width: 78%; } @keyframes brilho { from { background-position: 200% 0 } to { background-position: -200% 0 } } /* ---------------- o rodapé do WhatsApp ---------------- */ /* UM botão, global. Ela recusou o "tem esse?" produto por produto: "todo mundo vai fazer a compra e vai querer saber se tem. Aí não faz sentido." Aqui é só pra quem NÃO ACHOU. */ .rodape { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: rgba(255,255,255,.93); backdrop-filter: blur(10px); border-top: 1px solid var(--linha); padding: 11px 20px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; box-shadow: 0 -4px 20px rgba(42,32,36,.06); } .rodape span { font-size: 14px; color: var(--tinta-fr); } .rodape a { background: #25D366; color: #fff; font-weight: 600; font-size: 14px; border-radius: 999px; padding: 9px 20px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 2px 10px rgba(37,211,102,.34); } .rodape a:hover { filter: brightness(1.05); } /* ---------------- celular ---------------- */ /* ⚠️ O CABEÇALHO DA GAVETA AGORA APARECE SEMPRE. Até 05/11/2026 ele vivia dentro de um `@media (max-width: 980px)` e tinha um `@media (min-width: 981px) { display: none }` em seguida — porque no computador os filtros eram coluna, e coluna não tem botão de fechar. Virou gaveta nos dois, então o "Filtros ×" é a única saída nos dois. */ .filtros-topo { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: var(--papel); z-index: 1; } .filtros-topo .serif { font-size: 19px; } .filtros-topo button { background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--tinta-fr); line-height: 1; padding: 0 6px; } .filtros-topo button:hover { color: var(--bordo); } /* Na gaveta não existe coluna estreita pra economizar, então as listas de opção podem respirar: 300px em vez de 260px, e o `max-height` continua existindo porque Marca tem mais de 100 opções e sem ele a gaveta vira um rolo de três telas. */ .opcoes { max-height: 300px; } @media (max-width: 560px) { /* Na tela pequena a folha toma tudo: 340px numa tela de 390px deixaria uma tirinha de 50px do site aparecendo atrás, que é o tipo de coisa que faz o dedo fechar a gaveta sem querer. */ .gv-painel { width: 100%; max-width: none; } .opcoes { max-height: none; } } /* ============================================================ A JANELA DE ENTRAR / CRIAR ACESSO Tudo prefixado `ngb-` porque a marcação é montada pelo entrar.js. Prefixo próprio = não colide com nada da vitrine, e dá pra achar de onde vem qualquer classe só de olhar o nome. ============================================================ */ .ngb-fundo { position: fixed; inset: 0; z-index: 90; background: rgba(42,32,36,.52); backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding: 36px 16px; overflow-y: auto; } .ngb-fundo.aberta { display: flex; } .ngb-cx { position: relative; width: 100%; max-width: 448px; background: var(--papel); border-radius: 18px; box-shadow: 0 24px 70px rgba(42,32,36,.34); overflow: hidden; animation: sobe .22s ease-out; } @keyframes sobe { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } } .ngb-x { position: absolute; top: 11px; right: 12px; z-index: 2; background: rgba(255,255,255,.16); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 999px; font-size: 21px; line-height: 1; cursor: pointer; } .ngb-x:hover { background: rgba(255,255,255,.3); } .ngb-topo { background: var(--bordo); color: #fff; padding: 24px 26px 22px; text-align: center; } /* ⚠️ 02/11/2026 — É A LOGO DELA, e este seletor agora aponta pra um ``, não mais pra uma `
` de texto. O que existia aqui era "NGB Pro" em Cormorant maiúscula espaçada, com o "Pro" em `var(--latao)` — o dourado que ela vetou no selo da barra. Ver o comentário no `entrar.js`, em cima do `.ngb-topo`. `margin: 0 auto` em vez de herdar o `text-align: center` do pai: `display: block` cancela o alinhamento de texto, então sem isto a logo encostaria na esquerda da tarja. */ .ngb-selo { display: block; margin: 0 auto; height: 46px; width: auto; } /* 3px → 9px em 02/11, e foi a RENDERIZAÇÃO que pediu, não o código. Com o selo digitado, embaixo do "NGB Pro" havia ar sobrando dentro da própria linha de texto. A logo dela é recortada rente à tinta — o "ATACADO PARA LOJISTAS" termina no último pixel do arquivo — e aí os 3px viraram 3px de verdade: a frase da aba ficou encostada no slogan, e as duas dizem "atacado" uma embaixo da outra. */ .ngb-sub { font-size: 13.5px; opacity: .88; margin-top: 9px; } .ngb-miolo { padding: 22px 26px 26px; } /* --- campos --- */ .ngb-secao { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-fr); margin: 4px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--linha); } .ngb-secao:not(:first-child) { margin-top: 22px; } .ngb-campo, .ngb-cidade { margin-bottom: 13px; } .ngb-campo label, .ngb-cidade label { display: block; font-size: 12.5px; font-weight: 600; color: var(--tinta); margin-bottom: 5px; } .ngb-campo label i { color: var(--bordo); font-style: normal; } .ngb-campo input, .ngb-campo select, .ngb-cuf input { width: 100%; background: var(--offwhite); border: 1px solid var(--linha); border-radius: 10px; padding: 11px 13px; font-size: 15px; outline: none; transition: border-color .14s, background .14s; } .ngb-campo input:focus, .ngb-campo select:focus, .ngb-cuf input:focus { border-color: var(--bordo); background: var(--papel); } .ngb-campo small, .ngb-cidade small { display: block; font-size: 11.5px; color: var(--tinta-fr); margin-top: 4px; } .ngb-campo select { cursor: pointer; } .ngb-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .ngb-cuf { display: flex; gap: 7px; } .ngb-cuf input:last-child { max-width: 62px; text-align: center; } /* --- a caixinha da LGPD --- Fica visualmente destacada de propósito: consentimento tem que ser uma decisão que a pessoa VÊ que está tomando, não uma linha que passa batida no meio do formulário. E nasce DESMARCADA. */ .ngb-check { display: flex; gap: 11px; align-items: flex-start; background: var(--offwhite); border: 1px solid var(--linha); border-radius: 11px; padding: 13px; margin: 16px 0 4px; cursor: pointer; font-size: 13.5px; line-height: 1.4; } .ngb-check input { accent-color: var(--bordo); margin-top: 2px; flex-shrink: 0; width: 17px; height: 17px; } .ngb-check small { display: block; color: var(--tinta-fr); font-size: 12px; margin-top: 3px; } /* --- botões --- */ .ngb-bt, .ngb-bt2 { width: 100%; border-radius: 11px; cursor: pointer; font-size: 15px; font-weight: 600; padding: 13px; transition: filter .14s, background .14s, color .14s; } .ngb-bt { margin-top: 18px; background: var(--bordo); color: #fff; border: 0; } .ngb-bt:hover:not(:disabled) { background: var(--bordo-esc); } .ngb-bt:disabled { opacity: .6; cursor: progress; } .ngb-bt2 { background: var(--papel); color: var(--bordo); border: 1px solid var(--bordo); } .ngb-bt2:hover { background: var(--bordo); color: #fff; } .ngb-links { text-align: center; margin-top: 13px; } .ngb-links button { background: none; border: 0; cursor: pointer; color: var(--tinta-fr); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } .ngb-links button:hover { color: var(--bordo); } .ngb-corte { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--tinta-fr); font-size: 12px; } .ngb-corte::before, .ngb-corte::after { content: ''; flex: 1; height: 1px; background: var(--linha); } .ngb-miudo { font-size: 12px; color: var(--tinta-fr); margin-top: 11px; line-height: 1.5; } /* --- recados --- */ .ngb-erro, .ngb-ok { border-radius: 10px; padding: 11px 13px; font-size: 13.5px; margin-bottom: 15px; line-height: 1.4; } .ngb-erro { background: #FDF0F1; border: 1px solid #F0CFD3; color: #8C2733; } .ngb-ok { background: #F1F8F0; border: 1px solid #CFE4CC; color: #2F5A2C; } .ngb-erro[hidden], .ngb-ok[hidden] { display: none; } .ngb-convite { background: #FAF5EE; border: 1px solid #EADCC6; border-radius: 10px; padding: 11px 13px; margin-bottom: 17px; font-size: 13.5px; color: #6E5525; } .ngb-convite b { color: var(--bordo); } .ngb-convite small { display: block; font-size: 12px; opacity: .85; margin-top: 2px; } /* --- painéis de recado (e-mail enviado, em análise) --- */ .ngb-meio { text-align: center; } .ngb-meio .ngb-icone { font-size: 40px; color: var(--bordo); line-height: 1; margin-bottom: 8px; } .ngb-meio h3 { font-size: 22px; margin-bottom: 9px; } .ngb-meio p { font-size: 14px; color: var(--tinta-fr); margin-bottom: 11px; line-height: 1.55; } .ngb-meio p b { color: var(--tinta); } .ngb-meio form { margin-top: 16px; } .ngb-zap { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; background: #25D366; color: #fff; font-weight: 600; font-size: 14.5px; border-radius: 11px; padding: 13px; box-shadow: 0 2px 10px rgba(37,211,102,.3); } .ngb-zap:hover { filter: brightness(1.05); } /* ---------------- celular ---------------- */ @media (max-width: 720px) { .ngb-fundo { padding: 0; } .ngb-cx { max-width: none; min-height: 100%; border-radius: 0; } .ngb-topo { padding: 20px 20px 18px; } .ngb-miolo { padding: 20px 18px 40px; } .ngb-dupla { grid-template-columns: 1fr; gap: 0; } /* NO CELULAR A BARRA TEM DUAS FILEIRAS, e a ordem é escolhida: fileira 1: [logo Maison] ............... [NGB Pro + slogan] fileira 2: [buscar ..............] [Filtros] [Entrar] A fileira de cima é só marca — a dela de um lado, a Pro do outro, que é exatamente o "lado oposto" que ela pediu, e no celular o contraste fica ainda mais óbvio porque não tem nada no meio. ⚠️ Antes a busca era `flex-basis:100%` e ocupava uma fileira sozinha; com o selo entrando, isso viraria TRÊS fileiras e um topo de ~150px grudado no alto da tela do celular — metade da vitrine empurrada pra baixo. Por isso a busca agora divide a fileira 2 com os dois botões (`flex:1` + `min-width:0`, que é o que deixa ela encolher em vez de estourar a fileira). Os `order:` existem porque o selo é o ÚLTIMO no HTML (tem que ser, pro `margin-left:auto` jogá-lo pro extremo no computador) e aqui ele precisa subir pra fileira 1. */ .topo-in { flex-wrap: wrap; padding: 11px 14px; gap: 11px; } .marca { order: 1; flex: 0 0 auto; } .marca img { height: 26px; } /* UM número só encolhe o selo inteiro — NGB, "Pro", slogan, filete e respiros, todos saem de `--esc` lá em cima. Em 360px o conjunto fica com ~38px de altura, que cabe na fileira 1 do lado da logo dela (26px) sem empurrar nada. */ .selo-pro { order: 2; --esc: .72; } /* a faixa invisível que fecha a fileira 1 */ .quebra { display: block; order: 3; flex: 0 0 100%; height: 0; } /* `flex:1 1 0` + `min-width:0`: a busca entra na conta de fileira valendo ZERO, então os dois botões cabem do lado dela com folga, e só DEPOIS ela cresce pra ocupar o que sobrou. Com `basis:auto` o navegador mediria a largura natural do campo primeiro e jogaria o "Entrar" pra uma terceira fileira. */ .busca { order: 4; flex: 1 1 0; min-width: 0; max-width: none; } .btn-filtros { order: 5; } .btn-entrar { order: 6; } .corpo { padding: 18px 14px; } .grade { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; } .nm { font-size: 15px; min-height: 37px; } .rodape { padding: 9px 14px; gap: 10px; } .rodape span { font-size: 12.5px; } body { padding-bottom: 104px; } } /* ============================================================ O CARRINHO — prefixo `cr-` Prefixo próprio pelo mesmo motivo do `ngb-` das janelas de login: não colide com nada da vitrine, e dá pra saber de onde vem qualquer classe só de ler o nome. ⚠️ Isto é o funcional. O acabamento visual fica pra depois, por decisão dela: "vamos fazer a parte técnica e depois voltamos pra deixar como eu quero". ============================================================ */ /* ---- o botão embaixo do preço, em cada cartão ---- */ .add { margin-top: 8px; } /* ⚠️ TRÊS NÚMEROS MUDARAM AQUI EM 04/11/2026, E OS TRÊS SÃO A POPPINS. Era `font-size: 12.5px`, `letter-spacing: .01em` e `padding: 9px` — medidas feitas pra Inter. A Poppins é mais larga, e "Adicionar ao pedido" passou a QUEBRAR EM DUAS LINHAS dentro do botão no celular. Botão de duas linhas numa grade de dois cartões é a tela inteira parecendo apertada, e foi a primeira coisa que saltou na prévia. A conta, pra ninguém ter que refazer: no celular de 390px o cartão fica com ~172px, o `.txt` come 16px de cada lado e sobram ~140px de miolo. Com `padding: 9px 6px` sobram 128px pro texto, e a frase em Poppins 600 a 11,5px mede 119,5px. Folga de 8px — medida com o `.ttf` de verdade, não no olho. ⚠️ Se alguém trocar a frase do botão por uma mais comprida, ou devolver o `padding: 9px` de antes, ela volta a quebrar. */ .cr-add { width: 100%; cursor: pointer; background: var(--bordo); color: #fff; border: 0; border-radius: 9px; padding: 9px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; transition: background .14s; } .cr-add:hover { background: var(--bordo-esc); } /* o menos / quantidade / mais */ .cr-passo { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--bordo); border-radius: 9px; overflow: hidden; } .cr-passo button { width: 38px; height: 34px; flex-shrink: 0; background: var(--papel); color: var(--bordo); border: 0; font-size: 18px; line-height: 1; cursor: pointer; } .cr-passo button:hover { background: var(--offwhite); } .cr-passo b { flex: 1; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--bordo); } .cr-sub { display: block; margin-top: 4px; text-align: center; font-size: 11px; color: var(--tinta-fr); } /* ---- a barra do pé da tela ---- */ /* Fica ACIMA do rodapé do WhatsApp (que é `bottom: 0`), nunca em cima dele: dois botões empilhados no mesmo pixel é o jeito mais rápido de a cliente apertar o errado no celular. */ .cr-barra { position: fixed; left: 0; right: 0; bottom: 62px; z-index: 46; background: var(--bordo); color: #fff; padding: 11px 20px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; box-shadow: 0 -6px 24px rgba(42,32,36,.22); } .cr-barra-txt { display: flex; align-items: baseline; gap: 9px; } .cr-barra-txt b { font-size: 15px; } .cr-barra-txt span { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; } .cr-falta { font-size: 13px; opacity: .9; } .cr-ok { font-size: 13px; color: #B9E2B4; } .cr-barra button { background: #fff; color: var(--bordo); border: 0; border-radius: 999px; padding: 9px 22px; font-size: 14px; font-weight: 600; cursor: pointer; } .cr-barra button:hover { background: var(--offwhite); } /* com a barra no ar, o corpo precisa de mais folga embaixo, senão o último produto da lista fica debaixo dela pra sempre */ body.com-carrinho { padding-bottom: 148px; } /* ---- a gaveta ---- */ .cr-fundo { position: fixed; inset: 0; z-index: 95; background: rgba(42,32,36,.52); backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding: 30px 14px; overflow-y: auto; } .cr-fundo.aberta { display: flex; } .cr-cx { position: relative; width: 100%; max-width: 560px; background: var(--papel); border-radius: 18px; box-shadow: 0 24px 70px rgba(42,32,36,.34); overflow: hidden; animation: sobe .22s ease-out; } .cr-x { position: absolute; top: 11px; right: 12px; z-index: 2; background: rgba(255,255,255,.16); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 999px; font-size: 21px; line-height: 1; cursor: pointer; } .cr-x:hover { background: rgba(255,255,255,.3); } .cr-topo { background: var(--bordo); color: #fff; padding: 22px 26px 20px; } .cr-selo { font-family: var(--serif); font-size: 23px; letter-spacing: .06em; } .cr-sub2 { font-size: 13.5px; opacity: .88; margin-top: 2px; } .cr-miolo { padding: 20px 24px 24px; } .cr-miudo { font-size: 12.5px; color: var(--tinta-fr); margin-top: 8px; } .cr-vazio { text-align: center; padding: 26px 6px; color: var(--tinta-fr); } .cr-vazio p { margin-bottom: 8px; } /* ============================================================ A FICHA DO PRODUTO (04/11/2026) Pedido dela: *"em cada produto a gente colocar especificação dele. De acordo com o fabricante."* Ela mora dentro de `.cr-fundo` / `.cr-cx` — o mesmo fundo escuro, o mesmo raio, a mesma sombra e a mesma animação do carrinho. O `.fi-cx` só alarga e troca a cor de dentro. Janela nova com gramática própria seria uma terceira linguagem na mesma tela. ============================================================ */ .fi-cx { max-width: 640px; background: var(--papel); } /* ⚠️ O "×" do carrinho é BRANCO porque senta em cima da faixa bordô. Aqui ele senta em cima da FOTO, que é creme claro — branco sobre creme é um X que ninguém acha. Por isso a volta escura. */ .fi-x { background: rgba(42,32,36,.42); color: #fff; } .fi-x:hover { background: rgba(42,32,36,.66); } .fi-foto { position: relative; aspect-ratio: 16/10; background: linear-gradient(160deg, #FDFBF8, #F2EBE2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .fi-foto img { width: 100%; height: 100%; object-fit: contain; padding: 22px; } .fi-foto .mono { font-family: var(--serif); font-size: 48px; color: var(--linha); letter-spacing: .06em; user-select: none; } .fi-corpo { padding: 20px 26px 26px; } .fi-nome { font-family: var(--serif); font-size: 24px; line-height: 1.18; font-weight: 600; margin-top: 3px; } /* ---- a tabela de especificação ---- */ /* `
` de verdade, não `
` com duas colunas: "Volume" é o TERMO e "100ML" é a DEFINIÇÃO dele, e quem usa leitor de tela ouve o par junto em vez de duas listas soltas. */ .fi-esp { margin-top: 16px; border-top: 1px solid var(--linha); } .fi-lin { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--linha); font-size: 13.5px; } .fi-lin dt { color: var(--tinta-fr); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; padding-top: 2px; } .fi-lin dd { color: var(--tinta); } @media (max-width: 520px) { /* 120px de rótulo + o valor não cabem num celular estreito sem o valor quebrar em três linhas. Empilhado, cada par ocupa duas linhas curtas e continua legível. */ .fi-lin { grid-template-columns: 1fr; gap: 1px; } } /* ---- a pirâmide olfativa ---- */ .fi-pir { margin-top: 20px; background: var(--offwhite); border: 1px solid var(--linha); border-left: 3px solid var(--bordo); border-radius: 10px; padding: 15px 17px 13px; } .fi-pir-t { font-family: var(--serif); font-size: 17.5px; color: var(--bordo); line-height: 1.2; margin-bottom: 10px; } .fi-and { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; padding: 6px 0; } .fi-and + .fi-and { border-top: 1px dashed var(--linha); } .fi-and-r { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bordo); } .fi-and-n { display: flex; flex-wrap: wrap; gap: 5px; } /* `` sem itálico de propósito: o elemento é só o gancho do CSS, e o que ele marca é uma nota olfativa, não uma ênfase. */ .fi-and-n i { font-style: normal; font-size: 12.5px; background: var(--papel); border: 1px solid var(--linha); border-radius: 999px; padding: 3px 10px; color: var(--tinta); } /* ⚠️ A frase que separa o que ELA garante do que a MARCA diz. Pode mudar de tamanho; não pode sumir. O motivo está no app.js, na função `piramide()`. */ .fi-fonte { margin-top: 10px; font-size: 11.5px; color: var(--tinta-fr); font-style: italic; } /* ---- o pé: preço e o botão ---- */ .fi-pe { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linha); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* ⚠️ O `.preco` e o `.portao` trazem um fio tracejado de casa — no CARTÃO eles são o único separador do pé, e lá isso está certo. Aqui o `.fi-pe` já tem o fio dele, e os dois juntos desenhavam DUAS linhas coladas com 10px de nada no meio. Saiu na prévia da tela 16 e só apareceu olhando a imagem: lendo o CSS, cada regra está certa sozinha. */ .fi-pe .preco, .fi-pe .portao { margin-top: 0; padding-top: 0; border-top: 0; } .fi-pe .preco b { font-size: 24px; } .fi-pe .add, .fi-pe .portao { flex: 1; min-width: 200px; } .fi-pe .portao button { width: 100%; padding: 12px; font-size: 13.5px; } /* ---- as linhas do pedido ---- */ .cr-lista { max-height: 46vh; overflow-y: auto; margin-bottom: 16px; } .cr-linha { display: flex; align-items: flex-start; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--linha); } .cr-nome { flex: 1; min-width: 0; } .cr-nome b { display: block; font-size: 14px; line-height: 1.3; } .cr-nome small { display: block; font-size: 11.5px; color: var(--tinta-fr); } .cr-un { margin-top: 2px; } .cr-dir { flex-shrink: 0; width: 118px; text-align: right; } .cr-dir .cr-passo { margin-bottom: 5px; } .cr-soma { font-size: 14px; font-weight: 700; color: var(--bordo); font-variant-numeric: tabular-nums; } .cr-tirar { background: none; border: 0; cursor: pointer; padding: 2px 0; font-size: 11.5px; color: var(--tinta-fr); text-decoration: underline; } .cr-tirar:hover { color: #8C2733; } /* ---- a conta ---- */ .cr-conta { border-top: 2px solid var(--bordo); padding-top: 12px; margin-bottom: 12px; } .cr-conta-l { display: flex; align-items: baseline; justify-content: space-between; } .cr-conta-l span { font-size: 14px; color: var(--tinta-fr); } .cr-conta-l b { font-size: 22px; color: var(--bordo); font-variant-numeric: tabular-nums; } .cr-conta-m { font-size: 12.5px; color: var(--tinta-fr); margin-top: 2px; } .cr-conta-m i { font-style: normal; color: var(--bordo); font-weight: 600; } .cr-alerta, .cr-nota, .cr-erro { border-radius: 10px; padding: 11px 13px; font-size: 13px; margin-bottom: 12px; line-height: 1.5; } .cr-alerta { background: #FDF7EC; border: 1px solid #EBD9B4; color: #7A5A1E; } .cr-nota { background: var(--offwhite); border: 1px solid var(--linha); color: var(--tinta-fr); } .cr-erro { background: #FDF0F1; border: 1px solid #F0CFD3; color: #8C2733; } .cr-erro ul { margin: 7px 0 7px 18px; } .cr-erro a { text-decoration: underline; } /* ---- o quadro do frete ---- Ele mora entre a conta e o recado, e é de propósito que ele NÃO pareça parte da conta de cima: a conta é a mercadoria, o frete é outra coisa e sai do bolso em outro momento. Por isso ele tem a moldura do `cr-nota` (de onde ele nasceu) e não a linha bordô grossa do `cr-conta`. Sem `--latao` aqui. Ela já disse, e vale pra tudo: *"não quero nada da cor dourada tá? não sei de onde tirou isso"*. */ .cr-frete { background: var(--offwhite); border: 1px solid var(--linha); border-radius: 10px; padding: 12px 13px; margin-bottom: 12px; } .cr-fr-topo { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fr); margin-bottom: 7px; } .cr-fr-mi { font-size: 12.5px; color: var(--tinta-fr); line-height: 1.5; margin: 0; } .cr-fr-mi b { color: var(--tinta); font-weight: 600; } .cr-fr-ruim { color: #8C2733; } /* O preço e o serviço na mesma linha, o número alinhado à direita com `tabular-nums` igual ao total de cima — assim os dois números da tela se leem como uma coluna, e não como dois tamanhos diferentes. */ .cr-fr-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .cr-fr-linha span { font-size: 13.5px; color: var(--tinta); } .cr-fr-linha b { font-size: 19px; color: var(--bordo); font-variant-numeric: tabular-nums; white-space: nowrap; } /* A data é a parte que ela mais quis, então ela ganha fundo branco e fica mais alta que o resto do quadro. */ .cr-fr-prazo { background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; padding: 9px 11px; margin-bottom: 7px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .cr-fr-prazo span { font-size: 12.5px; color: var(--tinta-fr); } .cr-fr-prazo b { font-size: 16px; color: var(--bordo); white-space: nowrap; font-variant-numeric: tabular-nums; } .cr-fr-frase { font-size: 12px; color: var(--tinta-fr); line-height: 1.45; margin: 0 0 7px; } .cr-fr-bt { display: block; width: 100%; text-align: center; margin-top: 9px; background: var(--papel); color: var(--bordo); border: 1px solid var(--bordo); border-radius: 9px; padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer; } .cr-fr-bt:hover:not(:disabled) { background: var(--bordo); color: #fff; } .cr-fr-bt:disabled { border-color: var(--linha); color: var(--tinta-fr); cursor: wait; } /* "calcular de novo" é um link, não um botão: depois de já ter o número na tela, insistir num botão grande seria a tela pedindo pra ser clicada de novo sem motivo. */ .cr-fr-bt2 { background: none; border: 0; padding: 0; cursor: pointer; font-size: 12.5px; color: var(--bordo); text-decoration: underline; } /* ---------------- escolher a modalidade do frete ---------------- Decisão dela, 19/10/2026: *"no site o cliente tem que escolher qual modalidade de frete quer, se é Sedex, PAC, Jadlog. Eu envio o que ele escolher e pagar. Cada um tem seu prazo e vc precisa mostrar."* São `