/* ===================================================================== PELE — INTEGRE WOMAN A BASE (integre-woman.css) veste todas as classes e carrega o comportamento já provado da casa. Esta folha só troca a APARÊNCIA: entra DEPOIS da base e vence por ordem (mesma especificidade) ou pelo escopo `.iw` do . Nada aqui muda função. O PARTIDO: capa de revista. A foto é o assunto e ocupa o quadro inteiro; o texto é legenda — pequeno, em caixa alta, com entreletra larga. O título é serifado de alto contraste, do tamanho de manchete. O resto some: pouca linha, pouca sombra, quase nenhum enfeite. DUAS REGRAS DA CASA QUE ESTA PELE OBEDECE, e que vieram de decisão do dono: · CANTO NENHUM É RETO em botão («botão feio assim quero em nenhum tema», 23/09/2026) — o raio é pequeno (4px), o suficiente para não cortar; · LEGIBILIDADE: corpo e campos ≥15px, secundário ≥13px, interativo ≥38px de altura. O editorial não é desculpa para letra que ninguém lê. ===================================================================== */ .iw { /* ---- paleta ---- */ --iw-papel: var(--pri-fundo, #FFFFFF); --iw-papel-2: var(--pri-fundo-alt, #F4F1ED); /* o creme das seções alternadas */ --iw-tinta: var(--pri-texto, #131211); --iw-tinta-2: #2A2724; --iw-cinza: #6B6560; /* secundário legível sobre papel */ --iw-cinza-claro: #9A938C; --iw-linha: var(--pri-bordas, rgba(19, 18, 17, .10)); --iw-linha-forte: rgba(19, 18, 17, .22); --iw-oferta: var(--pri-preco-oferta, #A23B2E); /* o preço de oferta, terroso e não vermelho de alarme */ --iw-selo: #EDE7E0; /* ---- grade ---- */ --iw-miolo: var(--pri-largura, 1320px); --iw-gutter: 40px; --iw-respiro: 84px; /* ---- letra ---- */ --iw-manchete: clamp(38px, 5.4vw, 74px); --iw-entreletra: .16em; --iw-raio: var(--pri-botao-raio, 4px); } /* ---------------- base ---------------- */ .iw { background: var(--iw-papel); color: var(--iw-tinta); } .iw .pri-container { max-width: var(--iw-miolo); padding-left: var(--iw-gutter); padding-right: var(--iw-gutter); } .iw .pri-secao { padding-top: var(--iw-respiro); padding-bottom: var(--iw-respiro); } /* A LEGENDA DE REVISTA: é o tom de voz desta pele. Caixa alta, entreletra larga, corpo pequeno mas nunca abaixo de 13px, que é o piso do secundário na casa. */ .iw .pri-sobretitulo, .iw .pri-link-secao, .iw .pri-gal-legenda, .iw .pri-etiqueta, .iw .pri-cartao-nome { text-transform: uppercase; letter-spacing: var(--iw-entreletra); } /* ---------------- títulos ---------------- */ .iw .pri-titulo h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -.012em; font-weight: 400; } .iw .pri-titulo-grande h2 { font-size: var(--iw-manchete); } .iw .pri-sobretitulo { font-size:13.5px; color: var(--iw-cinza); margin-bottom: 14px; display: block; } .iw .pri-titulo .pri-sub { font-size: 16px; color: var(--iw-cinza); margin-top: 12px; max-width: 58ch; } .iw .pri-titulo { margin-bottom: 34px; } .iw .pri-titulo::after { display: none; } /* sem fio embaixo do título: a foto separa, a linha suja */ .iw .pri-link-secao { font-size:13.5px; color: var(--iw-tinta); text-decoration: none; border-bottom: 1px solid var(--iw-tinta); padding-bottom: 3px; } .iw .pri-link-secao:hover { opacity: .62; } /* ---------------- cabeçalho ---------------- */ .iw .pri-cabecalho { border-bottom: 1px solid var(--iw-linha); } /* a borda do cabecalho desaparece quando ele esta POR CIMA da foto: ali ela vira um fio atravessando a arte, e a regra da base perde para esta, que e mais especifica. */ .iw .pri-cab-transparente { border-bottom: 0; } .iw .pri-nav-link { font-size:13.5px; text-transform: uppercase; letter-spacing: .12em; } .iw .pri-logo img { max-height: 40px; } /* OS SELETORES ABAIXO FORAM CORRIGIDOS (23/09/2026). Miravam nomes que Liquid nenhum desenha — a barra de aviso e `.pri-adbar`, e o titulo da pagina do produto e um

SEM CLASSE dentro de `.pri-produto-info`. Eram regras mortas: o titulo do produto sairia na fonte do CORPO, e num tema cuja identidade e a serifada dos titulos isso aparece logo na pagina que mais importa. Nada quebrava, nada avisava. Irma do `.pri-produto-lado` do mesmo dia. / .iw .pri-adbar { font-size:13.5px; letter-spacing: .1em; text-transform: uppercase; } / ---------------- botões ---------------- / / Retangulares com o canto de 4px: o suficiente para não cortar. Letra em caixa alta com entreletra, que é a assinatura editorial, e altura de 46px — acima do piso de 38 da casa. / .iw .pri-btn, .iw .pri-btn-primario, .iw .pri-btn-secundario { border-radius: var(--iw-raio); text-transform: uppercase; letter-spacing: .13em; font-size:13.5px; font-weight: 500; min-height: 46px; padding: 14px 30px; } .iw .pri-btn-primario { background: var(--pri-botao-fundo, var(--iw-tinta)); color: var(--pri-botao-texto, var(--iw-papel)); border: 1px solid var(--iw-tinta); } .iw .pri-btn-primario:hover { background: var(--iw-tinta-2); border-color: var(--iw-tinta-2); } .iw .pri-btn-secundario { background: transparent; color: var(--pri-botao2-texto, var(--iw-tinta)); border: 1px solid var(--iw-tinta); } .iw .pri-btn-secundario:hover { background: var(--iw-tinta); color: var(--iw-papel); } / ---------------- o cartão da peça ---------------- / / Capa de revista: a foto ocupa tudo, sem moldura, sem sombra e sem fundo. O nome vem EMBAIXO da foto, pequeno e espaçado; o preço, logo abaixo, em corpo de leitura. Nada dentro da foto além do selo de oferta — enfeite sobre a roupa é ruído. / .iw .pri-cartao { background: transparent; border: 0; box-shadow: none; border-radius: 0; } .iw .pri-cartao-foto { border-radius: 0; border-width: 0; overflow: hidden; background: var(--iw-papel-2); } .iw .pri-cartao-foto img { transition: transform .9s cubic-bezier(.2, .7, .3, 1); } .iw .pri-cartao:hover .pri-cartao-foto img { transform: scale(1.045); } .iw .pri-cartao-corpo { padding: 16px 2px 0; text-align: left; } .iw .pri-cartao-nome { font-size:13.5px; font-weight: 500; color: var(--pri-texto, var(--iw-tinta)); line-height: 1.45; } .iw .pri-cartao-preco { font-size: 15px; color: var(--iw-tinta); margin-top: 7px; display: flex; gap: 9px; align-items: baseline; } .iw .pri-cartao-preco s { color: var(--iw-cinza-claro); font-size:13.5px; } .iw .pri-cartao-preco .pri-preco-oferta, .iw .pri-cartao-preco b { color: var(--iw-oferta); font-weight: 500; } .iw .pri-parcelas { font-size:13.5px; color: var(--iw-cinza); margin-top: 3px; } .iw .pri-etiqueta { background: var(--pri-etiqueta-fundo, var(--iw-tinta)); color: var(--pri-etiqueta-texto, var(--iw-papel)); border-radius: 0; font-size: 11.5px; padding: 6px 11px; font-weight: 500; } / ---------------- herói ---------------- / .iw .pri-slider { background: var(--iw-tinta); } .iw .pri-slider .pri-slide-texto h2 { font-family: var(--pri-titulos); font-size: var(--iw-manchete); font-style: normal; font-weight: 400; line-height: 1; letter-spacing: -.015em; } .iw .pri-slider .pri-slide-texto p { font-size: 16px; letter-spacing: .02em; margin-top: 16px; max-width: 46ch; } / O TEXTO DO HERÓI NÃO ENCOSTA NA BORDA. Com a posição «base», o conteúdo vai para o fim da caixa e o botão terminava EXATAMENTE na linha de baixo do banner (medido: 804 e 804). O respiro de 56px vale para cima e para baixo, então serve às posições de topo do mesmo jeito. / .iw .pri-slider .pri-slide-texto { padding: 56px 6%; gap: 4px; } .iw .pri-slider .pri-seta { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .5); color: #fff; box-shadow: none; } .iw .pri-slider .pri-seta:hover { background: rgba(255, 255, 255, .34); } / o cartão da peça dentro do herói: papel, canto pequeno, nada de sombra pesada / .iw .pri-heroi-pecas-janela { border-radius: var(--iw-raio); box-shadow: 0 10px 34px rgba(0, 0, 0, .14); } .iw .pri-slider .pri-slide .pri-heroi-peca-nome { text-transform: uppercase; letter-spacing: .1em; font-size:13.5px; } .iw .pri-slider .pri-slide .pri-heroi-peca-btn { text-transform: uppercase; letter-spacing: .12em; font-size:13.5px; } / ---------------- galeria editorial (o lookbook) ---------------- / .iw .pri-galeria-ed { background: var(--iw-papel); } .iw .pri-galeria-ed .pri-gal-foto { border-radius: 0; } .iw .pri-galeria-ed .pri-gal-legenda { font-size:13.5px; color: var(--iw-tinta); margin-top: 16px; } .iw .pri-galeria-ed .pri-seta { background: rgba(255, 255, 255, .9); border: 0; color: var(--iw-tinta); box-shadow: 0 2px 14px rgba(0, 0, 0, .12); } / ---------------- letreiro ---------------- / .iw .pri-letreiro { background: var(--iw-tinta); } .iw .pri-letreiro-frase { color: var(--iw-papel); font-family: var(--pri-titulos); font-size: var(--pri-letreiro-texto, 34px); letter-spacing: -.01em; text-transform: none; } .iw .pri-letreiro-foto img { border-radius: 0; } / ---------------- pontos na foto ---------------- / .iw .pri-pontos-cartao-corpo { justify-items: start; text-align: left; } .iw .pri-pontos-nome { font-size:13.5px; text-transform: uppercase; letter-spacing: .12em; } .iw .pri-pontos-preco b { font-weight: 500; font-size: 16px; } .iw .pri-pontos-conta { font-size:13.5px; letter-spacing: .14em; } / ---------------- página do produto ---------------- / / A GALERIA É EMPILHADA e NÃO TEM FITA DE MINIATURAS (pedido do dono, 23/09/2026: «repare que ele não tem foto embaixo para selecionar»). Rolar a coluna da esquerda é o gesto; a coluna da direita acompanha, grudada. No celular vira carrossel, que é o gesto do dedo. / / A PILHA É SÓ DO COMPUTADOR — E ISSO PRECISA ESTAR DITO AQUI (24/09/2026). Estas regras viviam soltas, e a consulta de `max-width: 991px` desfazia uma PARTE delas. O que ficou de fora quebrou o celular: sem o recorte da janela (`overflow: visible`) as fotos, que no celular são `flex: 0 0 100%`, enfileiram-se para fora da tela, e o `transform: none !important` anula o `translateX` do carrossel — o dedo arrasta e a foto não anda. Regra que nasce dentro da largura a que pertence dispensa lista de desfazer, e lista de desfazer envelhece calada. / @media (min-width: 992px) { .iw .pri-produto-fotos { display: grid; gap: 8px; } .iw .pri-produto-miniaturas { display: none; } .iw .pri-produto-palco { position: static; } .iw .pri-produto-palco .pri-carrossel-janela { overflow: visible; } .iw .pri-produto-palco .pri-carrossel-trilho { display: grid; grid-template-columns: 1fr; gap: 8px; transform: none !important; } .iw .pri-produto-palco .pri-slide { width: 100%; flex: none; } .iw .pri-produto-palco .pri-seta, .iw .pri-produto-palco .pri-bolinhas { display: none; } } / A COLUNA DA DIREITA CHAMA-SE pri-produto-info (23/09/2026). Estas regras miravam `.pri-produto-lado`, uma classe que Liquid nenhum da casa renderiza: CSS MORTO nos TRÊS temas, e por isso a coluna que devia acompanhar a rolagem nunca acompanhou — medido na loja no ar, ZERO elementos com `position: sticky` na página do produto. Eu tinha até dado o sticky do WOMAN por consertado hoje (o `overflow-x: clip`), e ele não tinha como funcionar. Seletor que não casa com nada não quebra, não avisa e não aparece em build nenhum. / @media (min-width: 992px) { .iw .pri-produto-info { position: sticky; top: 100px; align-self: start; } } .iw .pri-produto-info h1 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; } .iw .pri-produto-preco { font-size: 20px; margin-top: 14px; } .iw .pri-produto-info .pri-rotulo { font-size:13.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--iw-cinza); } @media (max-width: 991px) { / nada a desfazer aqui: no celular a galeria é a do TEMA BASE, inteira, sem enxerto nenhum — o dedo arrasta, a janela recorta e a fita de miniaturas orienta / } / ---------------- seções de conteúdo ---------------- / .iw .pri-beneficios { background: var(--iw-papel-2); } .iw .pri-beneficio b { font-size:13.5px; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; } .iw .pri-beneficio span { font-size: 13.5px; color: var(--iw-cinza); } .iw .pri-depoimentos { background: var(--iw-papel-2); } .iw .pri-categoria-nome { font-size:13.5px; text-transform: uppercase; letter-spacing: .13em; } / ---------------- rodapé ---------------- / .iw .pri-rodape { border-top: 1px solid var(--iw-linha); } .iw .pri-rodape-coluna h3 { font-size:13.5px; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; margin-bottom: 16px; } .iw .pri-rodape-coluna a, .iw .pri-rodape-coluna li { font-size: 14px; } .iw .pri-newsletter .pri-campo { border-radius: var(--iw-raio); min-height: 46px; font-size: 15px; } / ---------------- celular ---------------- / @media (max-width: 991px) { .iw { --iw-gutter: 18px; --iw-respiro: 52px; } .iw .pri-titulo h2 { font-size: clamp(26px, 7.4vw, 34px); } .iw .pri-cartao-corpo { padding-top: 12px; } } / ---------------- o cabeçalho sobre a foto ---------------- / / O cabeçalho transparente fica POR CIMA do herói, e a letra escura do tema desaparecia contra a foto: no primeiro retrato, «Casacos» e «Lookbook» sumiram no lado escuro da imagem. Aqui ele vira branco e ganha um véu de topo — o véu é o que garante a leitura numa foto CLARA também, onde só trocar a cor por branco criaria o problema inverso. Ao rolar, a barra fixa é outra e segue escura. / .iw .pri-cab-transparente { color: #fff; } .iw .pri-cab-transparente::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; background: linear-gradient(rgba(0, 0, 0, .46), rgba(0, 0, 0, 0)); pointer-events: none; z-index: -1; } .iw .pri-cab-transparente a, .iw .pri-cab-transparente button, .iw .pri-cab-transparente .pri-menu > li > a { color: #fff; } .iw .pri-cab-transparente svg { color: #fff; stroke: currentColor; } .iw .pri-cab-transparente .pri-logo img { filter: brightness(0) invert(1); } .iw .pri-cab-transparente .pri-bolinha { background: #fff; color: var(--iw-tinta); } / ===================================================================== A LETRA É O DIFERENCIAL (23/09/2026) O dono: «a letra que é pra ser o diferencial impactante não foi». Estava certo — o título de seção saía em caixa mista, 46px, tímido ao lado de uma foto de página inteira. Numa capa de revista a manchete tem o tamanho da foto: caixa alta, corpo grande, entrelinha curta e entreletra NEGATIVA, que é o que faz a palavra virar bloco. O secundário continua pequeno e legível — o contraste entre os dois é o efeito; aumentar tudo não impacta nada. ===================================================================== / .iw .pri-titulo h2 { font-size: clamp(34px, 4.6vw, 62px); line-height: .95; letter-spacing: -.022em; text-transform: uppercase; font-weight: 400; } .iw .pri-titulo-grande h2 { font-size: clamp(40px, 6vw, 84px); } .iw .pri-titulo-pequeno h2 { font-size: clamp(26px, 2.8vw, 38px); } .iw .pri-sobretitulo { font-size:13.5px; letter-spacing: .2em; color: var(--iw-cinza); margin-bottom: 18px; } .iw .pri-slider .pri-slide-texto h2 { line-height: .94; letter-spacing: -.025em; } / ===================================================================== O CARROSSEL ESPIA O PRÓXIMO Quatro cartões exatos, sem sobra, fazem a fila parecer completa: o dono olhou e disse que «nem passa pro lado» — e passa (medido: o trilho anda 1.255px no clique). O que faltava era o SINAL. Com 4,35 por vez, um pedaço do quinto aparece na borda e a mão já sabe que há mais. ===================================================================== / @media (min-width: 992px) { .iw .pri-produtos-carrossel .pri-slide { flex-basis: calc(100% / 4.35); } .iw .pri-galeria-ed .pri-slide { flex: 0 0 calc(100% / 2.22); } } @media (max-width: 991px) { .iw .pri-produtos-carrossel .pri-slide { flex: 0 0 66%; } .iw .pri-galeria-ed .pri-slide { flex: 0 0 82%; } } .iw .pri-produtos-carrossel .pri-seta { background: var(--iw-papel); border: 1px solid var(--iw-linha-forte); color: var(--iw-tinta); box-shadow: none; width: 44px; height: 44px; } .iw .pri-produtos-carrossel .pri-seta:hover { background: var(--iw-tinta); color: var(--iw-papel); border-color: var(--iw-tinta); } / ===================================================================== A CONTAGEM REGRESSIVA ===================================================================== / @media (max-width: 767px) { } / ===================================================================== A COLEÇÃO EM DESTAQUE, com o efeito de entrada ===================================================================== / / o efeito: sobe e aparece UMA vez, quando a seção chega à tela / [data-pri-entrar] > { opacity: 0; transform: translateY(18px); } [data-pri-entrar].pri-entrou > * { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); } [data-pri-entrar].pri-entrou > :nth-child(2) { transition-delay: .09s; } [data-pri-entrar].pri-entrou > :nth-child(3) { transition-delay: .18s; } [data-pri-entrar].pri-entrou > :nth-child(4) { transition-delay: .27s; } / Quem pediu menos movimento recebe tudo no lugar — e quem estiver sem JS também, porque o efeito é enfeite: a regra de baixo devolve o texto assim que a classe não chega. / @media (prefers-reduced-motion: reduce) { [data-pri-entrar] > , [data-pri-entrar].pri-entrou > * { opacity: 1; transform: none; transition: none; } } /* a regra que empilhava o destaque no celular foi para a BASE em 24/09/2026 (uma secao, um dono): ela estava aqui SEM ESCOPO, entao nunca foi roupa deste tema — era motor no lugar errado. / / ===================================================================== A FOTO DA COSTURA NÃO É UM PÔSTER Medido: 1240 × 2100 na tela — a seção «sobre a marca» deixava a arte crescer com a coluna e ela virava uma parede. Aqui a caixa tem teto; o texto ao lado volta a ter o mesmo peso. ===================================================================== / .iw .pri-sobre-secao img, .iw .pri-sobre-foto img { max-height: 620px; width: 100%; object-fit: cover; object-position: 50% 28%; } @media (max-width: 991px) { .iw .pri-sobre-secao img, .iw .pri-sobre-foto img { max-height: 420px; } } / OS CARTAZES DE CATEGORIA RESPIRAM. Seis fotos encostadas viram uma tira só: a vista lê uma faixa contínua e não seis escolhas. O vão vem do espaçamento da casa, então o lojista que o mexe mexe aqui também. / .iw .pri-cat-capa .pri-slide { padding: 0 calc(var(--pri-grade, 14px) / 2); } .iw .pri-cat-capa .pri-carrossel-janela { margin: 0 calc(var(--pri-grade, 14px) / -2); } / O TEXTO NÃO ENCOSTA NA MANCHETE. Com entrelinha de .94 a caixa do título é curta e os 18px de respiro sumiam debaixo das descendentes — «ASSINATURA» e a frase se tocavam. */