/* ============================================================================ PÁGINA DE PRODUTO — o pouco que o design system ainda não tinha. ⚠️ ESTA FOLHA É PROVISÓRIA POR NATUREZA. Tudo aqui é ajuste do padrão `.produto` que já mora em public/css/padroes.css, e o lugar certo destas regras é lá — junto com o resto do componente, e replicado no assets/ds1.html como manda a regra do projeto. Estão aqui porque a fase 8 foi construída em paralelo com as fases 9 e 10, e padroes.css tem outro dono: dois agentes escrevendo no mesmo arquivo é perda de trabalho garantida. NA CONSOLIDAÇÃO: mover estas regras para a seção "PÁGINA DE PRODUTO" do padroes.css, refletir no ds1.html e apagar esta folha. NENHUM VALOR SOLTO. Toda medida e toda cor saem de public/css/tokens.css. As três exceções estão marcadas uma a uma abaixo, e as três são cópia literal de um valor que o próprio design system já usa para o mesmo papel — não são decisão nova, são a mesma decisão repetida enquanto os arquivos não se juntam. ========================================================================== */ /* ── O CHIP DE COR É UM LINK ──────────────────────────────────────────────── No design system o chip é botão, e o estado selecionado é `aria-pressed`. Aqui ele muda o endereço — é link, e o equivalente de link é `aria-current`. A diferença não é preciosismo: link é o que o buscador segue, e é isso que faz cada cor da peça existir como página no Google. `aria-pressed` num link é ARIA inválida; um botão que não navega não é indexável. As três medidas abaixo (2px, 2px, 4px do anel e .85rem da marca) são cópia literal de .chip-cor[aria-pressed='true'] em componentes.css. Ao juntar os arquivos, o certo é acrescentar o seletor à regra que já existe lá, e não manter duas. */ .chip-cor[aria-current='true'] { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 2px var(--sob), 0 0 0 4px var(--anel-selecao); } .chip-cor[aria-current='true'] .chip-cor__marca { width: .85rem; opacity: 1; } /* ── A FITA DE MINIATURAS NÃO PODE MANDAR NA ALTURA DA GALERIA ────────────── MEDIDO, não suposto: o Kit Prime tem 14 fotos. Em 1440 px a fita ficava com 954 px de altura ao lado de um palco de 368 px — quase 600 px de vazio na coluna da foto, e a página inteira empurrada para baixo. O design system foi desenhado com as três fotos do produto de demonstração; o acervo real tem peças com quatorze. `height: 0` tira a fita da conta da altura da linha do grid, que passa a ser decidida só pelo palco — que tem proporção fixa 4:3. `min-height: 100%` a estica de volta até essa altura já resolvida, e o que não couber rola. Nenhuma foto é escondida: todas continuam na fita, e todas continuam sendo link com endereço próprio. Só acima de 640 px: daí para baixo o design system vira a fita na horizontal e a altura deixa de ser problema. */ @media (min-width: 641px) { .galeria__fitas { height: 0; min-height: 100%; overflow-y: auto; overscroll-behavior: contain; } /* Sem isto a fita continua caindo dentro da altura, só que espremendo as miniaturas: numa coluna de flex a altura sobrando é dividida ENTRE elas, e quatorze fotos de 4:3 viram quatorze tarjas de trinta pixels. `flex: none` é o que faz cada miniatura manter a própria proporção e a sobra virar rolagem, que é o comportamento pretendido. */ .galeria__fitas > .galeria__fita { flex: none; } } /* Cor que não sai em formato nenhum. Continua na tela — sumir daria a impressão de que a peça tem menos cores do que tem —, mas não é clicável e diz por quê no título. */ .produto__cor-esgotada { opacity: .5; cursor: not-allowed; text-decoration: line-through; } /* ── Espaçamentos que no ds1.html eram atributo `style` ───────────────────── Estilo escrito dentro do HTML não obedece a token nenhum: a mesma razão pela qual `.linha--entre` e `.linha--centro` viraram modificador na fase 2. */ .produto__nome { margin-block: var(--esp-2) var(--esp-3); } .produto__nota-preco { text-align: center; } .produto__video-nota { text-align: center; } .produto__combo-cabeca { margin-top: var(--esp-8); } /* A frase que assume a ficha que ainda não existe. Fica destacada do corpo por um filete, como a `.sanfona` e o `.produto__grupo` — é informação de estado, não é a descrição da peça. */ .produto__ficha-rasa { padding-top: var(--esp-4); border-top: 1px dashed var(--borda); } /* A frase da peça que SÓ existe sob medida. Mesmo filete da ficha rasa, pelo mesmo motivo: as duas são informação de estado da peça, e não descrição dela. Ela ocupa o lugar que as abas ocupariam se houvesse tamanho pronto para escolher — por isso o respiro embaixo, que separa a frase dos campos. */ .produto__so-medida { padding-top: var(--esp-4); margin-bottom: var(--esp-2); border-top: 1px dashed var(--borda); } /* Título da faixa de vídeo. Mesmo tamanho e mesma cor do ícone das garantias, logo acima — é a segunda cópia literal, e sai na consolidação. */ .videos__titulo svg { width: 1.15rem; height: 1.15rem; color: var(--carmim); } /* A seta de "anterior" é a mesma de "próximo", virada. */ .produto__seta-volta { transform: rotate(180deg); } /* ── PRONTO OU CORTADO NA MEDIDA ─────────────────────────────────────────── A primeira decisão de quem compra tapete, e por isso ela fica no alto do painel em vez de atrás de um botão que leva embora da página. São dois LINKS, não botões: `?medida=sob` é endereço de verdade, funciona sem JavaScript e pode ser mandado pronto no WhatsApp. Quem diz qual está ativa é `aria-current`, que o leitor de tela também anuncia — a mesma gramática dos filtros e do menu. */ .abas-medida { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--fio-espessura) solid var(--borda-forte); border-radius: var(--rad-2); overflow: hidden; } .abas-medida__aba { display: flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: var(--alt-controle); padding: var(--esp-2) var(--esp-3); font-family: var(--fonte-corpo); font-size: var(--t-corpo-sm); font-weight: var(--peso-medio); color: var(--texto-brando); text-align: center; text-decoration: none; background: var(--superficie); transition: background var(--dur-1) var(--suave), color var(--dur-1) var(--suave); } .abas-medida__aba + .abas-medida__aba { border-left: var(--fio-espessura) solid var(--borda-forte); } .abas-medida__aba svg { width: .9rem; height: .9rem; flex: none; } .abas-medida__aba:hover { background: var(--fundo); color: var(--texto); } /* A ativa é sólida, não sublinhada: aqui as duas opções são excludentes e ocupam a mesma caixa — o preenchimento é o que diz "você está nesta". */ .abas-medida__aba[aria-current] { background: var(--tinta); color: var(--texto-inverso); font-weight: var(--peso-forte); } .abas-medida__aba:focus-visible { outline: 2px solid var(--carmim); outline-offset: -3px; } /* ── O CORTE POR METRO DENTRO DO PRODUTO ─────────────────────────────────── O mesmo medidor da página da régua, na largura de uma coluna. Os componentes são os do design system — `.medidor__par`, `.mesa--clara`, `.resumo-medida`, `.medidor__acoes` — e o que esta folha faz é só empilhá-los e dar à mesa uma altura que caiba ao lado da ficha, em vez da altura de página inteira. */ .produto-medida { display: grid; gap: var(--esp-4); } .produto-medida__mesa { padding: var(--esp-5) var(--esp-5) var(--esp-4); } .produto-medida__mesa .mesa__palco { height: 11rem; } .produto-medida .resumo-medida { padding-top: var(--esp-3); } /* O resumo da página da régua vive sobre a tinta e escreve em algodão; aqui o fundo é claro, e o valor precisa da cor de texto normal para ter contraste. */ .produto-medida .resumo-medida__valor { color: var(--texto); } .produto-medida .resumo-medida { border-top-color: var(--borda); } .produto-medida__regua { justify-self: start; } @media (max-width: 640px) { /* No celular a mesa fica menor ainda: o que importa ali são os campos e o resumo, e a régua vira confirmação, não protagonista. */ .produto-medida__mesa .mesa__palco { height: 9rem; } }