/** * Estilos do que o membro vê. * * Deliberadamente sóbrio e sem cores próprias: o plugin vai ser instalado em * sites com identidade visual própria, e uma caixa colorida que ignora o tema * fica pior do que uma caixa neutra. Quem quiser personalizar sobrescreve as * classes lym-. */ .lym-bloqueado { max-width: 34em; margin: 3em auto; padding: 2em; border: 1px solid rgba( 128, 128, 128, 0.3 ); border-radius: 8px; text-align: center; } .lym-bloqueado__titulo { margin: 0 0 0.5em; font-size: 1.4em; } .lym-bloqueado__texto { margin: 0 0 1em; opacity: 0.85; } .lym-bloqueado__produto { margin: 0 0 1.5em; font-weight: 600; } /* * Botão contornado, e não preenchido: sem saber a paleta do tema, qualquer cor * de fundo que eu escolhesse teria chance de brigar com o texto e ficar * ilegível. O contorno herda a cor do texto e funciona em tema claro e escuro. */ /* * **Link NÃO é pintado, e esta é a mudança central de 01/09/2026.** * * Este bloco fazia o contrário: pintava todo `a` dentro dos invólucros do * plugin com a cor de ação. Alcançava tudo de uma vez — o "voltar", o nome de * cada conteúdo, o "ver perfil", cada linha de aviso, o título de cada produto * — e o resultado foi o que o dono do site descreveu ao ver a tela: "muita * coisa de uma cor só e nada combinando". * * **O erro não era a cor: era a quantidade.** Numa tela em que tudo o que se * clica tem o mesmo tom, nenhuma peça é destaque de nada. O olho não encontra * o caminho, porque não há um caminho — há uma superfície uniforme. * * Agora o link herda a cor do texto e se identifica pelo SUBLINHADO. A WCAG * 1.4.1 proíbe distinguir link só por cor; distinguir só por sublinhado é * legítimo, e é o que jornal e livro fazem há um século. * * **O sublinhado é discreto no repouso e cheio no gesto.** Cinza translúcido a * 55% funciona sobre fundo claro e escuro sem o plugin escolher cor; no * ponteiro e no foco ele passa a `currentColor`, que é a confirmação de que a * peça respondeu. * * **Quem não é frase não leva sublinhado, e quem decide isso é o `:not()`.** * * A primeira versão pegava TODO `a` do invólucro, e atropelava os componentes: * o sino saía sublinhado, os botões da tela de pagamento nasciam sublinhados e * PERDIAM o traço no ponteiro — o inverso do que um gesto deve fazer. A causa é * de peso: `.lym-pagamento a` pesa (0,1,1) e vence o `text-decoration: none` * que `.lym-pagamento__botao` declara em (0,1,0). * * `a:not([class*="lym-"])` lê "só o link que não é peça nossa". Botão, sino, * capa de cartão e qualquer componente futuro ficam de fora sozinhos, sem * precisar dobrar classe em cada um — e um componente novo nasce protegido, em * vez de nascer sublinhado até alguém reparar. * * As peças do plugin que SÃO frase e devem levar traço têm regra própria — a * linha de cada aviso, por exemplo. Sublinhar um título é tratá-lo como * referência no meio de um texto, e ele não é. * * Fora dos invólucros, nada muda: o plugin não pinta link de página alheia. */ /* * **A COR vale para todo link do plugin; o SUBLINHADO, só para o que é frase.** * * São dois blocos de propósito, e a separação foi um conserto: * * O primeiro dá `color: inherit` a TODO `a` dentro dos invólucros. Sem ele, um * link com classe nossa — o sino, o "anterior/próximo" — cairia na cor de link * do TEMA do cliente, que é exatamente o que a decisão de 29/08/2026 existe * para evitar: um tema que pinta link de vermelho fazia três coisas normais * parecerem erro. A primeira versão desta separação usou um `:not()` só, e * abriu esse buraco. * * O segundo sublinha só o que NÃO é peça nossa. Sem o `:not()`, a regra * atropelava os componentes: o sino saía sublinhado, e os botões da tela de * pagamento nasciam sublinhados e PERDIAM o traço no ponteiro — o inverso do * que um gesto deve fazer. A causa é de peso: `.lym-pagamento a` pesa (0,1,1) e * vence o `text-decoration: none` que `.lym-pagamento__botao` declara em * (0,1,0). * * `a:not([class*="lym-"])` lê "só o link que não é peça nossa", e um componente * novo nasce protegido em vez de nascer sublinhado até alguém reparar. */ .lym-area a, .lym-forma a, .lym-menu a, .lym-tela a, .lym-pagina a, .lym-indice a, .lym-cabecalho a, .lym-checkout a, .lym-aviso a, .lym-caixa-aviso a, .lym-conta a, .lym-pagamento a, .lym-renovar a, .lym-bloqueado a, .lym-pagina-bloqueada a, .lym-conversa a, .lym-peca a, .lym-sino-caixa a { color: inherit; } .lym-area a:not([class*="lym-"]), .lym-forma a:not([class*="lym-"]), .lym-menu a:not([class*="lym-"]), .lym-tela a:not([class*="lym-"]), .lym-pagina a:not([class*="lym-"]), .lym-indice a:not([class*="lym-"]), .lym-cabecalho a:not([class*="lym-"]), .lym-checkout a:not([class*="lym-"]), .lym-aviso a:not([class*="lym-"]), .lym-caixa-aviso a:not([class*="lym-"]), .lym-conta a:not([class*="lym-"]), .lym-pagamento a:not([class*="lym-"]), .lym-renovar a:not([class*="lym-"]), .lym-bloqueado a:not([class*="lym-"]), .lym-pagina-bloqueada a:not([class*="lym-"]), .lym-conversa a:not([class*="lym-"]), .lym-peca a:not([class*="lym-"]), .lym-sino-caixa a:not([class*="lym-"]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } /* * O gesto ENGROSSA o sublinhado em vez de trocar a cor: a resposta acontece na * mesma peça que já dizia "isto se clica", e não numa segunda pista que a * pessoa precisa aprender. Dobrar a espessura é perceptível e não mexe em * contraste nenhum. */ .lym-area a:not([class*="lym-"]):hover, .lym-forma a:not([class*="lym-"]):hover, .lym-menu a:not([class*="lym-"]):hover, .lym-tela a:not([class*="lym-"]):hover, .lym-pagina a:not([class*="lym-"]):hover, .lym-indice a:not([class*="lym-"]):hover, .lym-cabecalho a:not([class*="lym-"]):hover, .lym-checkout a:not([class*="lym-"]):hover, .lym-aviso a:not([class*="lym-"]):hover, .lym-caixa-aviso a:not([class*="lym-"]):hover, .lym-conta a:not([class*="lym-"]):hover, .lym-pagamento a:not([class*="lym-"]):hover, .lym-renovar a:not([class*="lym-"]):hover, .lym-bloqueado a:not([class*="lym-"]):hover, .lym-pagina-bloqueada a:not([class*="lym-"]):hover, .lym-conversa a:not([class*="lym-"]):hover, .lym-peca a:not([class*="lym-"]):hover, .lym-sino-caixa a:not([class*="lym-"]):hover, .lym-area a:not([class*="lym-"]):focus, .lym-forma a:not([class*="lym-"]):focus, .lym-menu a:not([class*="lym-"]):focus, .lym-tela a:not([class*="lym-"]):focus, .lym-pagina a:not([class*="lym-"]):focus, .lym-indice a:not([class*="lym-"]):focus, .lym-cabecalho a:not([class*="lym-"]):focus, .lym-checkout a:not([class*="lym-"]):focus, .lym-aviso a:not([class*="lym-"]):focus, .lym-caixa-aviso a:not([class*="lym-"]):focus, .lym-conta a:not([class*="lym-"]):focus, .lym-pagamento a:not([class*="lym-"]):focus, .lym-renovar a:not([class*="lym-"]):focus, .lym-bloqueado a:not([class*="lym-"]):focus, .lym-pagina-bloqueada a:not([class*="lym-"]):focus, .lym-conversa a:not([class*="lym-"]):focus, .lym-peca a:not([class*="lym-"]):focus, .lym-sino-caixa a:not([class*="lym-"]):focus { text-decoration-thickness: 2px; } /* * **São DOIS botões, e a diferença entre eles é a hierarquia da tela.** * * Antes eram um só, contornado e escrito na cor de ação — e como quase toda * tela tem mais de um botão, a cor de ação aparecia várias vezes por tela sem * dizer qual delas era A ação. O `--cheio` existia e era só um cinza por cima * do mesmo desenho. * * Agora: * * - **`.lym-botao` é o secundário**, e é NEUTRO: contorno de cinza medido em * 3:1 e a cor do texto do tema. Ele não disputa atenção com nada. * - **`.lym-botao--cheio` é o principal**, e é SÓLIDO na cor de ação. Um por * tela: "Abrir", "Começar", "Salvar", "Entrar", "Renovar meu acesso". * * É o desenho da Netflix, e a razão é a mesma: quando só uma peça da tela é * preenchida com a cor da marca, ela é o caminho — e o olho a encontra sem * procurar. * * **A classe é dobrada, e não é enfeite.** Um seletor de uma classe tem peso * menor que `.algo button` do tema — e o tema do cliente pinta botão. Dobrar * empata contra o tema e continua deixando o cliente mudar depois, que é o * motivo de este projeto não usar `!important` em botão. */ .lym-botao, .lym-botao.lym-botao { display: inline-block; padding: 0.7em 1.5em; /* * **O contorno é o que identifica o botão, então ele é MEDIDO.** Estava em * 0,45, e ali dá 1,71:1 contra o branco — abaixo dos 3:1 que a WCAG 1.4.11 * pede para o contorno de um componente de interface. Em 0,92 dá 3,45:1 no * branco e 4,13:1 no quase-preto, e passa em toda a escala em que um tema * de verdade vive. * * O fundo de 6% não conta como identificação: ele desloca o tom em 1,05:1, * que o olho usa e a régua não aceita. Ele está aqui para o botão parecer * uma superfície, e não para dizer onde ele começa. */ border: 1px solid rgba( 128, 128, 128, 0.92 ); border-radius: 8px; background: rgba( 128, 128, 128, 0.06 ); color: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; } /* * O secundário responde ao gesto ganhando presença, e não perdendo: o fundo * firma e o contorno acende. Opacidade menor faria o contrário — é o defeito * que esta folha já registra ter consertado no preenchido. */ .lym-botao:hover, .lym-botao:focus, .lym-botao.lym-botao:hover, .lym-botao.lym-botao:focus { background: rgba( 128, 128, 128, 0.14 ); /* * **O contorno vai para a cor do texto no gesto, e não para um cinza mais * forte.** A primeira versão punha 0,75 aqui — que é MENOS que o 0,92 do * repouso, ou seja, o botão respondia ao ponteiro ficando mais fraco. É * exatamente o defeito que esta folha já registra ter consertado duas vezes * noutras peças: o estado de resposta ao gesto não pode ser o pior estado. * * `currentColor` é o teto: o contorno passa a ter o contraste do próprio * texto, e não há como ficar mais presente que isso sem inventar cor. */ border-color: currentColor; text-decoration: none; } /* * **`display` derrota o `[hidden]` do navegador, e foi o defeito de três peças * de uma vez.** * * O navegador esconde com `[hidden] { display: none }`, que é regra de peso * ZERO. Qualquer `display` nosso numa classe vence — então o script escondia a * seta e o botão, e o CSS os trazia de volta. Na tela do Flávio apareceram as * duas setas e o "Mostrar mais produtos" com dois produtos só. * * A regra com atributo pesa mais que a da classe sozinha, e por isso vence sem * `!important`. Vale para todo elemento do plugin: quem esconder por script * daqui para a frente já nasce coberto. */ /* * O atributo aparece TRÊS vezes de propósito. Este projeto dobra a classe para * empatar com o tema do cliente (`.lym-botao.lym-botao`), e uma regra dobrada * pesaria o mesmo que esta se ela citasse o `[hidden]` só uma vez — e num empate * vence quem vier depois no arquivo, o que é regra invisível e muda sozinha se * alguém mover um bloco. Repetido, ele pesa mais que qualquer classe dobrada, * sem `!important` e sem impedir o cliente de escrever a dele. */ [class^="lym-"][hidden][hidden][hidden], [class*=" lym-"][hidden][hidden][hidden] { display: none; } /* * **Receber o foco não pode PIORAR o contraste, e era o que acontecia.** * * O único tratamento de foco dos botões era `opacity: 0.75`, e opacidade não * deixa a cor mais fraca: ela troca a cor pela mistura com o fundo. A cor de * link a 75% sobre o cartão dá 4,20:1 — reprova AA. E quem navega por teclado é a * única pessoa que vê esse estado, ou seja, o pior estado da tela era o dela. * * A opacidade fica só no ponteiro, que é onde ela é só um retorno de gesto. O * foco ganha anel, como a bolinha de concluído já tem — e `:focus-visible` para * o anel não aparecer em quem clicou com o mouse. */ /* * **O `opacity: 0.85` do ponteiro saiu em 01/09/2026.** Ele sobrou da época em * que o botão era um contorno sobre o fundo da página, e com o botão SÓLIDO * ele passou a misturar o vermelho inteiro com a página: no tema escuro o * preenchimento escurece, a letra branca escurece junto, e o par perde * contraste — o inverso do que um retorno de gesto deve fazer. * * A resposta ao ponteiro agora está nas regras de cada botão: o secundário * firma o fundo e acende o contorno, o principal aprofunda o gradiente. */ .lym-botao:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* * **O anel do botão PRINCIPAL não pode ser `currentColor`, e essa é a armadilha * do botão sólido.** * * Ali `currentColor` é a letra — branca. E o anel é desenhado com * `outline-offset`, ou seja FORA do botão, sobre a página: branco sobre uma * página clara é um anel invisível, e quem navega por teclado perde a única * indicação de onde está. * * A cor de ação resolve porque ela é o par MEDIDO contra o fundo da página — * que é exatamente a superfície sobre a qual o anel é desenhado. É o mesmo * raciocínio do preenchimento, ao contrário: lá a conta é contra o botão, aqui * é contra a página. */ .lym-botao--cheio:focus-visible, .lym-botao--cheio.lym-botao--cheio:focus-visible { outline-color: var( --lym-link, #c40812 ); } /* * **Este comentário descrevia o botão translúcido, que deixou de existir.** Ele * dizia que preencher com a cor da marca exigiria saber o fundo da página — e a * saída foi outra: um preenchimento SÓLIDO não precisa saber o fundo, porque * ele é o fundo. A conta que sobra é a letra contra o preenchimento, e os dois * são nossos. * * O que segue é a história do cinza que ele usava, mantida porque é ela que * explica por que o sólido resolve mais que uma escolha de tom. */ /* * **O cinza clareou, e era conserto de contraste medido.** * * Estava em 0,22, e sobre o cartão claro isso dá um fundo #dbdbdb: a cor de * link em cima dele fica em 4,47:1, contra os 4,5:1 que a WCAG exige. E o * texto do botão é 13,6px em negrito — abaixo dos 18,66px que fariam dele * "texto grande" e baixariam a exigência. * * Não é falha de escolha de cor: é o preenchimento comendo o contraste que a * cor tinha. Em 0,10 o fundo vira #e9e9e9 e a mesma cor passa a 5,10:1. */ /* * **Os modificadores dobram a classe pela MESMA razão que a base dobra, e sem * isso metade do que eles declaram era inerte.** * * A regra base é uma LISTA — `.lym-botao, .lym-botao.lym-botao` — e numa lista * vale o membro mais específico que casar: para qualquer botão do plugin ela * pesa (0,2,0). Um modificador de classe única pesa (0,1,0) e PERDE, mesmo * vindo depois no arquivo. * * O que estava morto: `border-color: transparent` e `font-weight: 700` aqui, e * `padding`, `border-width` e `font-weight` no `--fraco`. Só `background` e * `font-size` sobreviviam, porque a base não os declara. * * Na tela isso aparecia como **contorno de 2px na cor de ação em volta do botão * preenchido** — a peça em que a cor do plugin já ocupa mais espaço, com o * contorno somando mais dela sem dizer nada — e como um "botão fraco" do mesmo * tamanho e do mesmo peso do botão normal, ou seja, sem nada de fraco. * * Achado por revisão adversarial em 01/09/2026. É a família que este arquivo já * registra: regra que parece fazer alguma coisa e não faz. */ /* * **O preenchimento é a cor da marca, e ele NÃO usa o tom medido.** * * `--lym-link` é um par escolhido contra o fundo da PÁGINA: no tema escuro ele * vira o tom claro, e um preenchimento claro com letra branca dá 3,18:1 — * reprova. A conta muda porque um botão sólido **carrega o próprio fundo**: o * que precisa contrastar ali é a letra contra o preenchimento, e isso não * depende do tema do cliente. * * Por isso o valor é fixo nos dois temas, e por isso ele pode ser o vermelho * cru da Netflix: branco sobre `#e50914` dá 4,79:1 e sobre `#c40812` dá 6,19:1 * — os dois passam em AA. * * **O gradiente escurece para BAIXO, e a direção foi medida.** Clarear o topo * derrubaria a letra branca abaixo de 4,5. Descendo, todo ponto do botão fica * entre 4,79 e 6,19 — e o efeito é o de uma peça iluminada de cima, que é o que * dá volume a um botão num fundo escuro sem sombra nenhuma. * * Os dois tons do gradiente são os DOIS vermelhos da família: o do fundo claro * e o do escuro, um em cima do outro. O botão é a paleta inteira numa peça só. */ .lym-botao--cheio, .lym-botao--cheio.lym-botao--cheio { border-color: transparent; background-color: var( --lym-acao-cheio ); background-image: linear-gradient( var( --lym-acao-alto ), var( --lym-acao-cheio ) ); /* * **A única cor literal desta folha, e a exceção é a de sempre**: a letra * precisa contrastar com o PREENCHIMENTO, não com a página, e nem o CSS nem * o plugin sabem calcular esse contraste. Sai como valor de reserva, então * quem trocar o preenchimento por um tom claro troca uma linha. */ color: var( --lym-acao-texto ); font-weight: 700; } /* * **O ponteiro ESCURECE menos que antes, de propósito.** Ia a 0,32, e o estado * de resposta ao gesto ficava com menos contraste que o de repouso — o inverso * do que um retorno de interface deve fazer. * * **E desceu de 0,16 para 0,13 em 01/09/2026, por medida e não por gosto.** A * conta de 0,16 tinha sido feita só sobre o cartão CLARO. Refeita sobre o * escuro de fábrica (#121416), a cor de ação em cima dela dava **4,35:1** — ou * seja, o estado de resposta ao gesto voltava a reprovar, que é exatamente o * defeito que o parágrafo acima registra ter consertado uma vez. * * 0,13 é o maior valor que passa nos dois temas: 4,53:1 no escuro e 4,96:1 no * claro. Acima disso o escuro cai. * * **A conta que decide um valor destes é a do tema ESCURO**, e não a do claro: * a cor de ação é mais clara que o fundo ali, então cada grau de cinza a * aproxima do texto em vez de afastar. No claro acontece o contrário, e é por * isso que medir só um lado aprova o que o outro reprova. */ /* * **No gesto o botão APROFUNDA, e isso aumenta o contraste da letra.** O * gradiente desce um degrau na própria família: o topo passa a ser o tom que * antes era a base. Branco sobre os dois pontos continua acima de 6:1. * * Escurecer é a direção certa aqui pela mesma razão de sempre — o estado de * resposta ao gesto não pode ser o pior estado da tela, que é o que uma * opacidade menor faria. */ .lym-botao--cheio:hover, .lym-botao--cheio:focus, .lym-botao--cheio.lym-botao--cheio:hover, .lym-botao--cheio.lym-botao--cheio:focus { background-color: var( --lym-acao-baixo ); background-image: linear-gradient( var( --lym-acao-cheio ), var( --lym-acao-baixo ) ); /* * **A borda precisa ser repetida aqui, e o motivo é de peso.** O gesto do * botão base é `.lym-botao.lym-botao:hover`, que pesa (0,3,0) — mais que o * `.lym-botao--cheio.lym-botao--cheio` (0,2,0) que zera a borda no repouso. * Sem esta linha, passar o ponteiro no botão sólido desenhava um contorno * da cor da letra em volta dele: um retângulo branco onde não deveria haver * borda nenhuma. */ border-color: transparent; opacity: 1; } /* * **Enquanto envia, o botão PARECE desabilitado — e já estava.** A trava de clique * duplo do `publico.js` desabilita os botões de enviar da caixa durante o envio, * e nada aqui dizia isso: numa rede lenta o botão ficava igual, a pessoa achava * que travou, recarregava e perdia o que tinha escrito ou gravado. * * **Aqui a opacidade é a informação, e não um tom mais discreto.** É a exceção * que a regra "opacidade troca a cor" admite: componente desabilitado não tem * piso de contraste na WCAG, e o que a peça diz é justamente "agora não" — como o * item trancado do índice. Ela dura o tempo do envio, e o botão volta sozinho. * * **Três classes, e é o peso que decide.** O botão sólido declara `opacity: 1` * no `:focus` e no `:hover` com `.lym-botao--cheio.lym-botao--cheio`, que pesa * (0,3,0) — e o botão que acabou de ser apertado tem o foco, e no telefone fica * "sob o dedo". Com duas classes a regra empataria e perderia ou ganharia pela * ordem no arquivo. */ .lym-botao.lym-botao.lym-botao:disabled { cursor: progress; opacity: 0.55; } .lym-botao--fraco, .lym-botao--fraco.lym-botao--fraco { padding: 0.5em 1.1em; border-width: 1px; font-weight: 400; font-size: 0.9em; } .lym-pagina-bloqueada { min-height: 40vh; } /* * Sem cabeçalho e rodapé do tema, a caixa fica sozinha e centralizada. * * Em coluna, para o que o dono acrescentar pelo filtro `lym_html_bloqueado` ficar * embaixo da caixa e não ao lado dela. (A saída "Ir para os meus produtos", que * morava ali, saiu em 16/09/2026.) */ .lym-pagina-bloqueada--limpa { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 1em; } .lym-pagina-bloqueada--limpa .lym-bloqueado { margin: 0; } /* * A área de membros. * * Nenhuma cor própria. Tudo herda a cor do texto do tema, e as separações são * feitas com transparência sobre o fundo — o que funciona em tema claro e em * tema escuro sem precisar saber qual dos dois é. Um plugin que impõe a paleta * dele fica certo no primeiro site e errado em todos os outros. * * As variáveis existem para que quem for personalizar mude três linhas em vez * de caçar cinquenta. */ .lym-pagina, .lym-menu, .lym-tela, .lym-area, .lym-forma, .lym-indice, .lym-cabecalho, .lym-checkout, .lym-aviso, .lym-pagamento, .lym-renovar, .lym-bloqueado, .lym-pagina-bloqueada, .lym-caixa-aviso, .lym-conta, .lym-conversa, .lym-peca, .lym-sino-caixa { --lym-borda: rgba( 128, 128, 128, 0.25 ); --lym-fundo: rgba( 128, 128, 128, 0.08 ); --lym-raio: 14px; /* * **A cor de link das telas do plugin, e ela é VERMELHA desde 01/09/2026.** * * A história tem três capítulos, e o terceiro só se entende com os dois * primeiros: * * 1. Não declarar cor nenhuma, para usar a do tema. Razão boa — escolher * uma criaria um segundo tom na mesma página. * 2. Declarar azul (29/08/2026), porque um tema que pinta link de VERMELHO * fazia o botão de começar, o nome de cada conteúdo e o "voltar" saírem * com cara de erro: três coisas normais parecendo problema. * 3. Declarar VERMELHO (01/09/2026), a pedido do Flávio, que não gostou do * azul em tudo e pediu a família de cor da Netflix. * * **O capítulo 2 não foi desfeito, foi resolvido de outro jeito.** O medo * dele era um vermelho de ERRO no meio de coisa normal — vermelho vindo do * tema, sem intenção, em apenas algumas peças. Aqui o vermelho é a cor de * TODA ação do plugin: quando é a cor de tudo o que se clica, ela deixa de * significar "deu errado" e passa a significar "aqui se clica", que é * exatamente o que a Netflix faz com o mesmo tom. * * **O que NÃO se resolveu, e fica registrado:** `--lym-alerta` (o "gravando * agora") também é vermelha, e agora divide a família com a cor de ação. * Com o azul havia **418** pontos de distância perceptual entre as duas no * tema claro e 352 no escuro; com o vermelho entregue há **46** e **61**. * * **Os números são do par ENTREGUE**, e uma versão anterior deste comentário * dizia 84 — que é a distância do `#e50914` que foi REJEITADO por contraste. * Medir a colisão contra uma cor que não entrou fazia o registro parecer * duas vezes menos apertado do que é. Achado por revisão adversarial. * * Cor vermelha nenhuma dá muito mais que isso: é propriedade da família, e * não escolha ruim. Enquanto a decisão registrada de `--lym-alerta` não for * revista com o Flávio, as duas convivem separadas pelo CONTEXTO — o alerta * só existe com o microfone aberto, ao lado de um cronômetro correndo, e * some quando a gravação para. * * O valor é uma VARIÁVEL: quem tiver a própria marca troca uma linha. */ --lym-link: #c40812; /* * **Duas cores com PAPEL, e nenhuma com valor de marca.** * * `--lym-nome` pinta quem assinou cada mensagem. Numa conversa longa, o * nome com a mesma cor do texto faz a lista virar um bloco só — a pessoa * perde onde uma fala acaba e a outra começa. * * `--lym-alerta` é o "gravando agora" — o cronômetro que corre enquanto o * microfone está aberto. Vermelho ali não é decoração: é a única coisa que * avisa que o site ainda está ouvindo, sem exigir leitura. * * **Este comentário dizia "e o que apaga", e isso é falso**: a variável tem * UM consumidor na folha inteira, e é o estado da gravação. Nada que apague * usa cor nenhuma — as ações destrutivas do plugin são botões de texto. Um * comentário que promete um segundo uso faz a próxima pessoa procurá-lo e * concluir que ele sumiu. * * **A cadeia tem TRÊS degraus, e a ordem é a decisão.** * * 1. `--lym-nome` — o que o dono do site escolheu em Configurações. Sai como * estilo em linha na própria peça, e vence tudo. * 2. `--lym-nome-medido` — o padrão, escolhido pelo script depois de MEDIR o * fundo real da página. Ele existe porque nenhuma cor única passa em * 4,5:1 contra fundo claro e contra fundo escuro: o melhor âmbar dá 5,0 * no branco e 3,5 no quase-preto. Sem par medido, todo padrão seria * ilegível em metade dos sites. * 3. `currentColor` — sem JavaScript, o comportamento de sempre. * * **O sufixo existe para o dono continuar mandando.** Se o script escrevesse * direto em `--lym-nome`, ele sobrescreveria a escolha de quem instalou — * estilo em linha contra estilo em linha, e o último a escrever vence. * * A folha continua sem cor de marca: o valor de reserva aqui é * `currentColor`, e os tons medidos moram no script, escolhidos por conta e * não por gosto. Existe teste que falha se cor de marca voltar a esta folha. * * **E as duas NÃO são declaradas aqui, o que parece descuido e é a peça que * faz a cadeia funcionar.** Elas estavam, com o valor `currentColor` — e uma * variável DECLARADA nunca cai no valor de reserva do `var()`. Com elas no * ar, `var( --lym-nome, var( --lym-nome-medido, currentColor ) )` resolvia * direto para `currentColor` e o tom medido não chegava a existir: o degrau * do meio era decoração. * * O comportamento sem JavaScript não muda, porque o último degrau da cadeia * é o mesmo `currentColor` que estava aqui. */ /* * **O brilho do que chegou desde a última visita, e ele é ÂMBAR desde * 01/09/2026.** * * Era cinza translúcido, pela regra de não escolher cor — e o efeito era * que "novo" ficava com o mesmo tom de todas as outras separações da tela, * que também são cinza translúcido. O destaque não destacava. * * Âmbar aqui não é decoração: é o mesmo papel do prazo que está acabando e * da etiqueta de estado — "isto quer a sua atenção". A 14% ele desloca o * fundo o bastante para o olho achar a linha e de menos para mexer no * contraste do texto por cima. Medido contra o cinza que ele substituiu: o * texto do tema PERDE 0,27 de razão no tema escuro (de 12,17 para 11,91) e * GANHA 1,53 no claro (de 15,41 para 16,94). Os dois continuam muito acima * de qualquer piso. * * Continua configurável — mas só por hexadecimal, então quem escolher ali * troca o véu translúcido por um fundo opaco. É limitação antiga da tela de * Configurações, e não desta cor. */ --lym-novo: rgba( 245, 158, 11, 0.14 ); /* * --------------------------------------------------------------------- * **Os PAPÉIS de cor, e a regra que os governa (01/09/2026).** * * A versão anterior pintava TODA peça clicável com a mesma cor de ação, e * o dono do site resumiu o resultado: "ficou pior do que tudo azul; o * problema está em ter muita coisa de uma cor só e nada combinando". * * Ele tinha razão, e a razão tem nome. **Cor não é como se diz "clicável"; * cor é como se diz "este, entre tudo o que está na tela".** Quando o * título, o nome do item, o voltar, o botão e o menu são todos do mesmo * tom, nenhum deles é destaque de nada — sobra ruído, e a tela deixa de ter * um caminho. * * A regra que passou a valer: * * 1. **A maior parte da interface é NEUTRA.** A hierarquia sai de tamanho, * peso e espaço — que é o que uma tela escura faz bem, e o que não * depende de o plugin conhecer o tema do cliente. * 2. **Cada matiz tem UM trabalho**, e aparece pouco justamente para ser * notado quando aparece. * 3. **Nada é pintado por ser link.** Link se identifica por sublinhado. * * Os quatro papéis, e nenhum deles é decoração: * * - `--lym-link` — a AÇÃO em TEXTO: o anel de foco. Vermelho, e é um PAR * medido contra o fundo da página. (Pintava também a faixa * do item aberto no índice, que saiu a pedido do Flávio em * 16/09/2026, e o coração curtido, que virou verde em * 20/09/2026 — `--lym-curtido`.) * - `--lym-acao-*` — a mesma AÇÃO em PREENCHIMENTO: o botão principal (um * por tela) e a bolinha do sino. **Não é par**, e a * distinção não é detalhe: um preenchimento carrega o * próprio fundo, então a conta é a letra contra ELE e não * muda com o tema. Tratar os dois como a mesma coisa poria * a bolinha em vermelho claro com letra branca — 3,18:1. * - `--lym-feito` — o que já foi CONCLUÍDO: a onda já tocada de uma * mensagem de voz. Verde. * - `--lym-atencao` — o que é NOVO ou está para acabar. Âmbar. * - `--lym-info` — a nota que explica, e ORIENTAÇÃO na coluna do * produto: o nome do módulo, a bolinha cheia, o anel de * progresso e o ícone do sino. Azul. (A bolinha e o anel * eram do verde até 16/09/2026; o Flávio os pediu no * mesmo azul dos módulos, e o azul ganhou um trabalho a * mais em troca de a coluna ter uma cor só de orientação.) * * **Todos são pares medidos**, como a cor de ação: nenhuma cor única passa * em 4,5:1 contra fundo claro E contra fundo escuro, e quem escolhe entre * os dois tons é o script, lendo o fundo real. Estes valores são o de * reserva. Existe teste que refaz cada conta. * * **Os quatro tons CLAROS ficam na mesma faixa de luminância** — 0,115 a * 0,159 —, então num tema claro nenhum grita mais alto que os outros. * * **Nos ESCUROS não ficam, e isso é propriedade do matiz e não descuido**: * o vermelho dá 0,28 e o âmbar 0,44, porque um âmbar escuro deixa de ser * âmbar. É o mesmo limite que obriga cada papel a ter dois tons. * * O que equilibra a tela não é a luminância: é a ÁREA. O vermelho aparece * como preenchimento de um botão inteiro; o âmbar, como uma palavra ou uma * pílula. Um botão sólido pesa mais na tela que qualquer texto colorido, e é * por isso que a hierarquia continua de pé mesmo com o âmbar mais luminoso. * --------------------------------------------------------------------- */ --lym-feito: #15803d; --lym-atencao: #a4490a; --lym-info: #1d5faf; /* * **O coração curtido, e ele saiu de `--lym-link` a pedido do Flávio** * (20/09/2026): ele quis o verde do botão de compartilhar da página do evento * dele, `#4a9e72`, e quis em toda conversa — página aberta, conteúdo, grupo e * suporte. * * **É um PAR, porque o verde dele reprova no tema claro.** Medido sobre o * balão da mensagem, que é onde o botão de fato mora (cinza translúcido de 8% * sobre a página): `#4a9e72` dá 5,18:1 no escuro e **3,00:1 no claro** — e * este botão leva TEXTO junto do desenho ("Curtir" ou o número), então o piso * é 4,5 e não os 3:1 de ícone. O tom do claro é o mesmo verde trazido para * baixo até passar: 4,86:1 no balão, 5,30:1 na página. * * **O gesto não entra nesta conta**, e é de propósito: o `:hover` da fileira * devolve `color: inherit` com peso maior, então o botão apontado volta à cor * do texto. A cor só precisa sobreviver ao repouso. */ --lym-curtido: #1f7a52; /* * **Os tons do PREENCHIMENTO da ação, e eles não têm par por construção.** * * Os quatro papéis acima são cor de TEXTO, e por isso são medidos contra o * fundo da página. Estes três são o preenchimento de um botão sólido, que * carrega o próprio fundo: a conta que importa é a letra contra ELES, e essa * não muda com o tema do cliente. Um só valor serve aos dois. * * `alto` é o topo do gradiente e `cheio` a base; no gesto o par desce um * degrau, para `cheio` e `baixo`. Branco sobre os três dá 4,79, 6,19 e 8,11. * * **A letra é a única cor literal que este plugin escolhe**, e a exceção é a * de sempre: ela precisa contrastar com o preenchimento, não com a página, e * nem o CSS nem o plugin sabem calcular esse contraste. */ --lym-acao-alto: #e50914; --lym-acao-cheio: #c40812; --lym-acao-baixo: #a30610; --lym-acao-texto: #ffffff; } /* * **O verde escuro do ícone do Grupo, e ele é FIXO de propósito.** O Flávio pediu * "verde escuro" em 16/09/2026. O verde medido do plugin (o par de `--lym-feito`) * sai CLARO no tema escuro, que é justamente o do site dele — então o pedido não * cabia num par. * * Fixo é aceitável aqui, e só aqui, porque ele pinta um ÍCONE, e ícone pede 3:1 * (WCAG 1.4.11), não os 4,5:1 de texto. Medido: 5,02:1 sobre branco, 3,76:1 sobre * `#111111` e 3,68:1 sobre o `#121416` do tema forçado escuro — passa nos dois * extremos, como os preenchimentos acima. No cinza médio não passa, e nenhuma cor * passa ali. * * **Declarado no próprio MENU, e não nos invólucros.** O ícone só existe dentro * de `.lym-menu-lateral`, e o menu não é invólucro: dentro da moldura ele herdava * de `.lym-tela`, mas `[lym_menu]` colado numa página do construtor não tem * invólucro nenhum em volta, e o ícone caía na cor do texto — a mesma peça com * cores diferentes conforme a página, que é a queixa que trouxe esta cor. */ .lym-menu-lateral { --lym-grupo: #15803d; } /* * **O mesmo vermelho não serve nos dois fundos.** `#c40812` tem contraste * 6,19:1 sobre branco — passa no critério AA — e cai para 3,02:1 sobre um fundo * quase preto. O plugin não sabe o fundo da página do cliente, mas o navegador * sabe o que a pessoa escolheu no aparelho, e é a melhor informação disponível * sem chutar. * * Área de membros escura é a maioria delas, e é exatamente onde o vermelho * claro precisa entrar: `#fb565e` sobre um fundo quase preto dá 5,93:1. * * **Os dois têm o MESMO matiz (357°), e isso não é enfeite.** São a mesma cor * em duas claridades, e não duas cores parecidas: quem abre o site claro e o * escuro no mesmo dia reconhece a marca nos dois. O tom claro é o vermelho da * Netflix trazido para baixo o bastante para sobreviver ao preenchimento do * botão — `#e50914` cru dá 4,79:1 sobre branco e despenca para 3,95:1 sobre o * cinza de 10% do `.lym-botao--cheio`, que reprova. Foi medido antes de * escolher, e existe teste que refaz a conta. */ /* * **Este bloco é o VALOR DE RESERVA, e não a decisão.** Quem decide de verdade é * o script, lendo o fundo que a página realmente tem — ver `pintarLinks()` em * publico.js. * * A razão de não bastar: `prefers-color-scheme` é a preferência do APARELHO, e * o fundo é do TEMA. As duas coisas se separam o tempo todo — um site claro * aberto por quem deixou o celular em modo escuro recebia `#63b3ff` sobre * branco, que dá 2,2:1 e é ilegível. Medido, o caso simétrico também reprovava. * * Fica como reserva porque é melhor que nada para quem não tem JavaScript: ali * o palpite acerta sempre que o dono do site seguiu a preferência do sistema, * que é o caso comum. */ @media ( prefers-color-scheme: dark ) { .lym-pagina, .lym-menu, .lym-tela, .lym-area, .lym-forma, .lym-indice, .lym-cabecalho, .lym-checkout, .lym-aviso, .lym-pagamento, .lym-renovar, .lym-bloqueado, .lym-pagina-bloqueada, .lym-caixa-aviso, .lym-conta, .lym-conversa, .lym-peca, .lym-sino-caixa { --lym-link: #fb565e; /* Os mesmos quatro papéis, no tom que serve a fundo escuro. */ --lym-feito: #22c55e; --lym-atencao: #f59e0b; --lym-info: #6eacf7; /* O verde do compartilhar da página do evento, que é onde ele nasceu. */ --lym-curtido: #4a9e72; /* * **Sem isto, um formulário nosso numa página escura sai com caixa * BRANCA e letra preta.** Campo de texto, seletor de arquivo, tocador * de áudio e barra de rolagem não são desenhados pela folha: quem os * pinta é o navegador, e o padrão dele é claro. Nenhum seletor CSS * alcança essas peças — só esta propriedade. * * Aqui é o VALOR DE RESERVA, como a cor de link: quem decide de verdade é o * script, medindo o fundo que a página realmente tem. */ color-scheme: dark; } } /* * **O respiro do topo é pequeno, e diminui na tela pequena.** * * Eram 3rem em toda largura, e numa tela cujo único trabalho é mostrar o que a * pessoa comprou isso era conteúdo empurrado para baixo da dobra sem ganhar * nada. No celular custava ainda mais caro: a dobra ali tem meia tela, e 3rem * dela é o topo vazio. * * O respiro não vai a zero porque o modelo desenha a página inteira — sem * nenhum, o título encosta na barra do navegador. */ /* * **`100vh` mais `padding` não é uma tela: é uma tela mais o padding.** * * Sem `border-box`, o `min-height` mede a caixa de CONTEÚDO — então toda página * da moldura nasce mais alta que a janela e ganha rolagem vertical mesmo quando * o conteúdo cabe. Numa tela de celular são 100px a mais, e a pessoa rola para * descobrir que embaixo não tem nada. */ .lym-pagina--limpa { box-sizing: border-box; min-height: 100vh; padding: 1.25rem 1.25rem 5rem; } @media ( min-width: 783px ) { .lym-pagina--limpa { padding-top: 1.75rem; } } .lym-area { margin: 0 auto; max-width: 54rem; } /* * A margem do primeiro elemento não soma ao respiro de cima. * * **Sozinha ela não resolvia o pedido, e o comentário anterior dizia que sim.** * O espaço que o Flávio via era o `padding` do modelo, logo acima — esta regra * só impede que a margem do `

` se some a ele. As duas são necessárias, e é * por isso que a primeira sem a segunda não mudava um pixel. */ .lym-area > :first-child { margin-top: 0; } /* * A segunda fileira: o que a pessoa ainda não tem. Separada por respiro, e não * por linha — a linha divide a tela em duas metades de mesmo peso, e estas duas * não têm o mesmo peso nenhum. */ .lym-vitrine__titulo { margin: 3rem 0 1.25rem; font-size: 1.15rem; opacity: 0.75; } .lym-titulo { margin: 0 0 1rem; font-size: 1.7rem; line-height: 1.2; } .lym-voltar { margin: 0 0 1.25rem; font-size: 0.9rem; opacity: 0.7; } /* * **O "voltar" MANTÉM o sublinhado, e a regra que o tirava saiu em 01/09/2026.** * * Ela fazia sentido quando o link era pintado: a cor já dizia que ele era * clicável, e o traço seria redundante. Sem a cor, tirar o traço também deixa * a peça sem nada — e ela ainda mora dentro de um parágrafo com opacidade 0,7, * ou seja, é o link mais discreto da tela. * * A seta ← ajuda e não basta: ela é um caractere, e um caractere não diz que o * texto ao lado responde ao clique. */ .lym-voltar a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } /* * A barra usa currentColor com transparência: é a única forma de desenhar * "cheio" e "vazio" sem escolher duas cores que podem sumir no tema de quem * instalar. */ .lym-barra { height: 5px; border-radius: 999px; background: rgba( 128, 128, 128, 0.28 ); overflow: hidden; } .lym-barra__cheio { display: block; height: 100%; border-radius: 999px; background: currentColor; } /* * O anel de progresso é um gradiente cônico. Onde o navegador não souber * desenhá-lo sobra o círculo com o número dentro, que é a informação — nada * aqui depende do anel para ser entendido. */ .lym-anel { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 52px; height: 52px; } /* * O buraco do meio é feito com máscara, e não com um círculo opaco por cima: um * círculo opaco precisaria da cor de fundo da página, que o plugin não conhece. * Onde a máscara não existir, sobra um disco com o número em cima — feio, mas * ainda responde à pergunta. */ .lym-anel::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: rgba( 128, 128, 128, 0.28 ); /* * **O arco é AZUL, o mesmo azul dos nomes de módulo e da bolinha cheia.** * Pedido do Flávio em 16/09/2026; até ali era o verde de concluído. Ele mede * o quanto já foi concluído, e é a mesma frase que a lista abaixo dele conta * item por item — por isso a cor é a MESMA cadeia da bolinha marcada: a do * produto, quando o dono escolheu uma, e senão o azul medido (`--lym-info`). * Duas cadeias escritas separadas é como o anel e a bolinha começam a sair * em azuis diferentes. * * O resto da volta continua cinza translúcido: o que falta não é um estado, * é a ausência de um. */ background: conic-gradient( var( --lym-destaque, var( --lym-info, currentColor ) ) var( --lym-pct, 0% ), rgba( 128, 128, 128, 0.28 ) 0 ); -webkit-mask: radial-gradient( farthest-side, rgba( 0, 0, 0, 0 ) 66%, #000 68% ); mask: radial-gradient( farthest-side, rgba( 0, 0, 0, 0 ) 66%, #000 68% ); } .lym-anel__valor { position: relative; font-size: 0.72rem; font-weight: 700; } /* A lista de produtos, em cartões com capa */ .lym-cartoes, .lym-itens, .lym-menu__itens { margin: 0; padding: 0; list-style: none; } .lym-cartoes { display: grid; grid-template-columns: repeat( auto-fill, minmax( 16rem, 1fr ) ); gap: 1.5rem; } /* ========================================================================== * Alvo de toque: 44px, e o DESENHO não muda. * * A auditoria de 30/08/2026 mediu nove controles do plugin entre 19 e 34px de * altura clicável — o mínimo que um dedo acerta com confiança é 44. O erro é * sempre o mesmo e é fácil de não ver: o alvo parece grande porque é LARGO, e * a altura é a de meia linha de texto. * * O padrão aqui é `inline-flex` com `min-height`, que cresce a área sem mexer * na fonte nem no espaçamento em volta — e, onde o controle vive dentro de uma * linha apertada, `padding` com `margin` negativa, que cresce o alvo e devolve * o espaço. * * Vale só no toque: no computador o ponteiro acerta 20px sem esforço, e forçar * 44 ali engordaria listas inteiras à toa. * ========================================================================== */ @media ( max-width: 782px ) { /* * **A classe do botão é DOBRADA na regra base, e por isso ela precisa ser * dobrada aqui.** `.lym-botao.lym-botao` pesa (0,2,0) e declara * `display: inline-block`; esta regra pesava (0,1,0), então o `display` * dela nunca valia — e sem `flex` o `align-items` fica inerte. O * `min-height` continuava valendo, então a caixa crescia para 44px e o * rótulo ficava colado no TOPO dela. * * Especificidade vence ordem: estar depois na folha não bastava. */ .lym-botao.lym-botao, .lym-pagamento__conferir.lym-pagamento__conferir, .lym-botao, .lym-conta__sair-link, .lym-checkout__voltar, .lym-pagamento__conferir, .lym-forma__ajuda a, .lym-navegacao__link { display: inline-flex; align-items: center; min-height: 44px; } /* * Nos links de lista o alvo cresce por padding e a margem negativa devolve * o espaço: sem ela, a linha de cada item engordaria 1,1rem e a lista de * 148 conteúdos ficaria 160px mais alta sem ganhar nada. */ .lym-menu__item a, .lym-item__nome { display: block; padding: 0.55rem 0; margin: -0.55rem 0; } } /* * O separador do "conferir" precisa de `display` para existir: em elemento em * linha, `margin-top`, `padding-top` e `border-top` não têm efeito de layout — * o traço desenhava atravessado no texto do parágrafo acima, em vez de separar. */ .lym-pagamento__conferir { display: inline-block; } /* ========================================================================== * A fileira que rola para o lado. * * **Ela existe porque a grade crescia para BAIXO.** Com dez produtos, a tela * empilhava dez cartões e a pessoa rolava a página inteira para ver o que tinha * comprado — numa tela cujo trabalho é justamente mostrar isso de relance. * * O rolar é do navegador (`overflow-x`), e não do script: o dedo no celular e o * trackpad no computador já movem a faixa sem uma linha de JavaScript. As setas * são conveniência para quem usa mouse de rodinha, e nascem escondidas — o * script só as mostra quando confirma que há o que rolar. * ========================================================================== */ .lym-fileira { position: relative; } /* * **A pista tem largura fixa, e antes ela dependia da QUANTIDADE.** * * Com `minmax( 15rem, 17rem )`, três produtos deixavam as pistas crescerem até * o máximo e o quarto as jogava de volta ao mínimo: os cartões encolhiam 12% * quando um produto novo entrava na lista, sem nada ter acontecido com eles. * * Numa faixa que rola, quem resolve o espaço é a rolagem — a pista não precisa * negociar largura com o número de itens. */ .lym-cartoes--faixa { grid-auto-flow: column; grid-auto-columns: 16rem; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; /* * O respiro embaixo é onde a barra de rolagem mora. Sem ele, a barra passa * por cima da borda do último cartão em quem tem barra sempre visível. */ padding-bottom: 0.75rem; } .lym-cartoes--faixa > .lym-cartao { scroll-snap-align: start; } @media ( prefers-reduced-motion: reduce ) { .lym-cartoes--faixa { scroll-behavior: auto; } } /* * **Classe dobrada, e não `!important`.** O tema do cliente pinta os botões * dele com seletores de peso maior que uma classe só — e ele já provou vencer * nesta mesma tela: é a razão de `.lym-botao` estar dobrado no alto do arquivo. * Dobrar empata em especificidade e continua deixando o cliente mudar depois. */ .lym-fileira__seta, .lym-fileira__seta.lym-fileira__seta { position: absolute; top: 40%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var( --lym-borda, rgba( 128, 128, 128, 0.25 ) ); border-radius: 50%; /* * O fundo é lido do navegador pelo script, como o painel do índice já faz: * a seta fica POR CIMA dos cartões e precisa ser opaca, e o plugin não sabe * a cor de fundo da página do cliente. O valor de reserva quase nunca é * visto, porque é o script que revela a seta. */ background: var( --lym-painel, rgba( 128, 128, 128, 0.92 ) ); color: inherit; cursor: pointer; } .lym-fileira__seta--antes { left: 0; } .lym-fileira__seta--depois { right: 0; } /* * **As setas ficam FORA dos cartões, na margem da página.** * * Elas nasceram sobrepostas — meia rem para fora, o resto por cima da capa do * primeiro e do último produto. Seta em cima do conteúdo esconde justamente o * que ela existe para ajudar a ver. * * A faixa recua para a margem que a área de membros já tem de sobra (`.lym-area` * tem 54rem no meio de uma tela larga) e devolve o recuo como respiro interno. * Abaixo dessa largura não há margem para ocupar, e aí as setas somem — o dedo * rola a faixa, que é o gesto natural nessa tela mesmo. */ /* Mesma fenda fracionária do par acima, e mesma razão. */ @media ( min-width: 1059.02px ) { .lym-fileira { margin-left: -3.5rem; margin-right: -3.5rem; padding-left: 3.5rem; padding-right: 3.5rem; } } /* * **Entre 783 e 1059px a seta fica POR DENTRO, e isso é obrigatório.** * * A primeira versão simplesmente escondia a seta abaixo de 1060px, e o * resultado era pior que a sobreposição que ela existia para evitar: nessa * faixa a fileira ainda rola para o lado, o corte em três do celular ainda não * vale, e ficava uma tela inteira sem NENHUM controle. Com doze produtos num * tablet, a pessoa via três cartões e não tinha como chegar aos outros nove — * a barra de rolagem é invisível por padrão justamente nos aparelhos dessa * faixa. * * Sobreposta é ruim; ausente é impossível. Aqui ela entra para dentro, com * sombra para não se confundir com a capa do cartão. */ @media ( min-width: 782.02px ) and ( max-width: 1059px ) { .lym-fileira__seta--antes { left: 0.35rem; } .lym-fileira__seta--depois { right: 0.35rem; } .lym-fileira__seta { box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.28 ); } } /* * Abaixo de 783px a fileira já empilhou e existe o botão de mostrar mais: ali a * seta não teria o que fazer. */ @media ( max-width: 782px ) { .lym-fileira__seta { display: none; } } .lym-fileira__seta:hover, .lym-fileira__seta:focus-visible { /* * **A seta responde ficando mais presente, e não mudando de cor.** Ela é * navegação — a mesma peça repetida duas vezes por fileira —, e gastar a * cor de ação nela é gastar o que deveria apontar o botão principal do * cartão logo abaixo. */ border-color: rgba( 128, 128, 128, 0.75 ); color: inherit; } /* * **No celular a faixa vira coluna, e mostra três de cada vez.** * * Rolar para o lado numa tela de 360px mostra um cartão por vez e esconde que * existem outros. Empilhado, o que custa é altura — daí o corte em três, com o * botão que revela o resto. * * Quem não tem JavaScript vê TODOS: o corte é aplicado pela classe que o script * acrescenta, nunca pelo HTML. Errar para o lado de mostrar demais é o barato. */ @media ( max-width: 782px ) { .lym-cartoes--faixa { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow-x: visible; padding-bottom: 0; } .lym-fileira__seta { display: none; } .lym-fileira--dobrada .lym-cartao:nth-child( n + 4 ) { display: none; } } .lym-fileira__mais { margin: 1rem 0 0; text-align: center; } /* * **A vitrine é mais discreta que o que a pessoa já tem, e a classe existia sem * uma linha atrás.** * * As duas fileiras eram idênticas pixel a pixel — mesma capa, mesmo nome, mesmo * cartão preenchido — e a única diferença era a palavra dentro do botão. Numa * grade de cartões, palavra não é o que se lê primeiro. * * O cartão de oferta é só contorno: o preenchimento é do que já foi pago. */ .lym-cartoes--vitrine .lym-cartao { background: none; } /* * O parágrafo do botão só ocupa espaço quando há botão. Escondido, ele deixava * 1rem de vão embaixo da fileira em toda tela larga — sobra que ninguém * relaciona a um botão invisível. */ .lym-fileira__mais:has( [hidden] ) { margin: 0; } /* * --------------------------------------------------------------------------- * **A luz de cima, e é o único "efeito" que este plugin inventa.** * * Num fundo escuro, uma caixa separada do resto só pela borda parece um * recorte; com uma linha clara na aresta de cima ela parece uma superfície * apoiada, iluminada de cima. É o que dá volume a uma tela escura sem sombra * nenhuma, e é boa parte da diferença entre um desenho com acabamento e um sem. * * `inset 0 1px 0 rgba( 255, 255, 255, 0.07 )` é branco a 7% no primeiro pixel. * **Ela só ADICIONA**: num tema claro, branco sobre um fundo quase branco é * invisível, e nada piora. Num tema escuro é exatamente o efeito. * * Não é uma borda superior mais clara porque a borda já existe e é do tema: * esta linha fica por DENTRO dela, e as duas juntas é que fazem a aresta. * * E não toca em contraste de texto nenhum — é um pixel na borda, fora da área * onde alguma coisa é lida. * --------------------------------------------------------------------------- */ .lym-cartao, .lym-topo, .lym-bloco, .lym-caixa-aviso { box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.07 ); } .lym-cartao { display: flex; flex-direction: column; border: 1px solid var( --lym-borda, rgba( 128, 128, 128, 0.25 ) ); border-radius: var( --lym-raio, 14px ); background: var( --lym-fundo, rgba( 128, 128, 128, 0.08 ) ); overflow: hidden; /* * A transição existe para o cartão parecer uma superfície que responde, e * não uma imagem que troca. 120ms é o limite abaixo do qual o olho lê como * instantâneo — o suficiente para o movimento existir sem atrasar nada. */ transition: background-color 0.12s ease, border-color 0.12s ease; } /* * **O cartão inteiro responde ao gesto, e isso substitui a cor que o título * perdeu.** * * O nome do produto era pintado com a cor de ação, e era ele que dizia "isto se * clica". Sem a cor — e sem sublinhado, porque um título sublinhado lê como * referência no meio de um texto — sobrava um cartão inerte com um botão dentro. * * Quem passa a dizer é a superfície: no ponteiro o fundo firma e o contorno * acende. É o gesto que a Netflix usa na fileira de capas, e ele tem uma * vantagem sobre a cor no título — vale para o cartão INTEIRO, que é o que a * pessoa de fato mira, e não só para as duas palavras do nome. * * **`:focus-within` é o que faz isso valer para o teclado.** Sem ele, quem * navega por Tab vê o anel de foco no link e o cartão em volta continua morto — * e o cartão é a peça, não o link. */ .lym-cartao:hover, .lym-cartao:focus-within { border-color: rgba( 128, 128, 128, 0.55 ); background-color: rgba( 128, 128, 128, 0.14 ); } /* * **Quem pediu menos movimento recebe a mudança sem a transição, e não sem a * mudança.** Tirar o realce junto seria decidir que quem tem enxaqueca não * precisa saber onde está o ponteiro. */ @media ( prefers-reduced-motion: reduce ) { .lym-cartao { transition: none; } } /* * A capa tem proporção fixa: sem isso, uma imagem em pé e uma deitada na mesma * lista deixam os cartões de alturas diferentes e a grade parece quebrada. */ .lym-cartao__capa { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: rgba( 128, 128, 128, 0.15 ); overflow: hidden; } .lym-cartao__capa img { width: 100%; height: 100%; object-fit: cover; display: block; } /* * **A inicial da capa vazia: sem opacidade, com cor própria.** * * Ela estava em 0,35 — 1,09:1 sobre a capa clara, praticamente invisível — e * dentro de um cartão fechado a opacidade ainda se multiplicava. É o estado de * instalação nova e o da visão de quem administra, ou seja, a primeira coisa * que o dono do site vê do produto dele. * * `currentColor` a 45% via `color` e não via `opacity` faz a mesma mistura sem * multiplicar com nada em volta — a opacidade do modificador continua valendo * uma vez só, que é o que ela deve fazer. */ .lym-cartao__inicial { font-size: 2.5rem; font-weight: 700; color: rgba( 128, 128, 128, 0.9 ); } .lym-cartao__corpo { display: flex; flex-direction: column; flex: 1 1 auto; gap: 0.6rem; padding: 1.1rem 1.25rem 1.25rem; } .lym-cartao__nome { margin: 0; font-size: 1.1rem; line-height: 1.3; } /* * **O título do cartão não leva sublinhado, e quem responde é o cartão.** * Sublinhar um título é tratá-lo como referência no meio de um texto, e ele não * é: ele nomeia a peça inteira, que é o alvo de verdade. * * O gesto continua tendo resposta — `.lym-cartao:hover` e `:focus-within` * acendem o cartão todo. O sublinhado aqui é o reforço para quem já está com o * ponteiro exatamente sobre o nome. */ .lym-cartao__nome a { text-decoration: none; } .lym-cartao__nome a:hover, .lym-cartao__nome a:focus { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } /* * **Sem opacidade: ela MULTIPLICA com a do modificador em volta.** * * A varredura de 30/08/2026 achou sete pares assim. O pior: a descrição de um * cartão fechado ficava a 0,525 efetivo — e ela é justamente o texto que * precisa ser LIDO para a pessoa entender por que aquele produto está fechado. * O modificador já apaga o bloco inteiro; apagar de novo por dentro é cobrar * duas vezes pela mesma informação. * * Quem quiser hierarquia dentro de um bloco apagado usa corpo e peso, que não * se multiplicam. */ .lym-cartao__descricao { margin: 0; font-size: 0.88rem; line-height: 1.5; } .lym-cartao__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: auto 0 0; padding-top: 0.5rem; font-size: 0.85rem; } .lym-cartao__prazo { } /* * O prazo acabando desfaz a discrição do prazo normal, e faz isso sem cor: o * plugin não sabe o fundo da página do cliente, e um vermelho escolhido aqui * some numa área de membros escura. Opacidade cheia e peso já separam a frase * das outras duas da mesma linha. */ /* * **O prazo que está acabando é ÂMBAR**, e o peso vem junto. * * A regra tinha `opacity: 1` — inerte, porque 1 já é o padrão — e só o peso * fazia efeito. Âmbar é o papel de "isto vai acabar": chama a atenção sem * dizer que algo deu errado, que é o que o vermelho diria. É a mesma cor do * aviso que ainda não foi lido, e é a mesma ideia. */ .lym-cartao__prazo--acabando { color: var( --lym-atencao, currentColor ); font-weight: 600; } /* * **Fechado apaga a CAPA, o nome e a descrição — nunca o rodapé.** * * A regra era `opacity: 0.7` no cartão inteiro, e `opacity` compõe a subárvore * de uma vez: o botão "Renovar meu acesso" mora dentro dele e era apagado * junto. Medido no tema escuro de fábrica (#121416), o rótulo do botão dava * **2,95:1** — e com o azul de antes dava 4,04:1, ou seja já reprovava e a * troca de cor aprofundou. No tema claro melhorou de 2,90 para 3,54, e * continuava reprovando. * * **Descendente não desfaz `opacity` do ancestral**, então não havia como * consertar de dentro: a única saída é o apagado não alcançar o rodapé. É a * mesma correção que este projeto já fez no nome do item concluído e na lista * do produto — e a razão é a registrada: quem está no cartão fechado é * exatamente quem precisa apertar aquele botão. * * O comentário antigo dizia "fechado continua legível: ele precisa ser lido * para ser entendido", e a regra fazia o contrário com a única peça acionável * do cartão. * * O estado continua dito de três formas sem depender de cor: a etiqueta no * rodapé, a capa apagada e o nome apagado. */ .lym-cartao--fechado .lym-cartao__capa, .lym-cartao--fechado .lym-cartao__nome, .lym-cartao--fechado .lym-cartao__descricao { opacity: 0.7; } /* * **A etiqueta de estado é ÂMBAR**: ela aparece só em produto expirado ou * encerrado, que é exatamente "isto precisa da sua atenção". Era um contorno na * cor do texto, e se confundia com o resto do rodapé do cartão. */ /* * **A etiqueta perdeu a opacidade quando ganhou cor, e a conta é a razão.** * * O `opacity: 0.85` estava aqui para amaciar uma pílula NEUTRA — e opacidade * não enfraquece cor, ela troca a cor pela mistura com o fundo. Com o âmbar, a * mesma linha derrubava a etiqueta para 3,61:1 sobre o cartão claro, abaixo dos * 4,5:1 de texto. É o padrão que esta folha já registra ter pago sete vezes. * * O que ela amaciava agora é feito pelo tamanho (0,75rem) e pelo contorno fino. * A cor não precisa de ajuda para ser discreta: ela aparece uma vez por cartão, * e só quando há um estado a dizer. */ .lym-etiqueta-estado { color: var( --lym-atencao, currentColor ); display: inline-block; padding: 0.2rem 0.7rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.75rem; text-transform: lowercase; } /* O alto do produto */ .lym-topo { margin: 0 0 2rem; border: 1px solid var( --lym-borda, rgba( 128, 128, 128, 0.25 ) ); border-radius: var( --lym-raio, 14px ); background: var( --lym-fundo, rgba( 128, 128, 128, 0.08 ) ); overflow: hidden; } .lym-topo__capa { aspect-ratio: 21 / 9; background: rgba( 128, 128, 128, 0.15 ); } .lym-topo__capa img { width: 100%; height: 100%; object-fit: cover; display: block; } .lym-topo__corpo { padding: 1.5rem; } .lym-topo__progresso { display: flex; align-items: center; gap: 0.9rem; margin: 0.5rem 0 0; } .lym-topo__conta { font-size: 0.88rem; opacity: 0.75; } .lym-topo__acao { margin: 1.25rem 0 0; } /* Os grupos, em cartões que abrem no lugar */ .lym-bloco { margin: 0 0 1rem; border: 1px solid var( --lym-borda, rgba( 128, 128, 128, 0.25 ) ); border-radius: var( --lym-raio, 14px ); overflow: hidden; } .lym-bloco__cabecalho { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem 0.9rem 0.9rem; background: var( --lym-fundo, rgba( 128, 128, 128, 0.08 ) ); cursor: pointer; list-style: none; } .lym-bloco__cabecalho::-webkit-details-marker { display: none; } .lym-bloco__cabecalho::after { content: "\203A"; margin-left: auto; padding-left: 0.5rem; font-size: 1.3rem; line-height: 1; transform: rotate( 90deg ); } .lym-bloco[open] > .lym-bloco__cabecalho::after { transform: rotate( -90deg ); } .lym-bloco__capa { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 82px; height: 52px; border-radius: 8px; background: rgba( 128, 128, 128, 0.18 ); overflow: hidden; } .lym-bloco__capa img { width: 100%; height: 100%; object-fit: cover; display: block; } .lym-bloco__numero { font-size: 1.1rem; font-weight: 700; } .lym-bloco__texto { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .lym-bloco__nome { font-size: 1.05rem; font-weight: 600; line-height: 1.3; } .lym-bloco__conta { font-size: 0.8rem; } .lym-bloco--trancado { opacity: 0.7; } .lym-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.25rem; border-top: 1px solid var( --lym-borda, rgba( 128, 128, 128, 0.25 ) ); } .lym-item a { text-decoration: none; } .lym-item a:hover, .lym-item a:focus { text-decoration: underline; } /* * A marca tem largura fixa mesmo quando está vazia. Sem isso, os títulos de uma * lista de 148 itens dançam para a direita conforme o membro vai concluindo. * * **E ela NÃO cresce.** A regra dava `flex: 1 1 auto` à marca junto com o nome — * o que é o contrário do que este comentário sempre disse: a marca esticava e * empurrava o título para o meio da linha. Numa lista de 148 itens, nenhum * título começava onde o de cima começou. */ .lym-item__marca { flex: 0 0 1.25rem; text-align: center; } .lym-item__nome { flex: 1 1 auto; text-align: left; } /* * **O nome do item concluído NÃO desbota, e isso é conserto de contraste.** * * Ele tinha `opacity: 0.6`, e a cor de link a 60% sobre branco dá 3,29:1 — * reprova o mínimo de 4,5:1 da WCAG para texto normal. Numa lista de 148 aulas, * é a MAIORIA dos nomes que o membro que está avançando lê desbotada. * * E ela nem era necessária: a bolinha ao lado já diz "feito", cheia contra * vazia, que é a decisão registrada deste projeto — "cheio contra vazio já diz * isso sem ajuda de cor nenhuma". Desbotar o nome era um segundo código para a * mesma informação, cobrado em legibilidade. */ /* * O trancado continua mais apagado, porque ali o apagado É a informação — e * aqui ela não custa contraste de link: o nome de um item trancado é um * ``, e herda a cor de texto do tema, não a cor de link. * * 0,7 e não 0,55: a 0,55 um texto quase preto sobre branco já se aproxima do * limite, e o plugin não sabe qual é a cor de texto do tema do cliente — não dá * para calcular o contraste, então erra-se para o lado de apagar menos. */ .lym-item--trancado { opacity: 0.7; } /* * **O item concluído não muda de aparência, e a regra existe para dizer isso.** * * Ele tinha `opacity: 0.6` no nome, que reprovava o contraste — e a correção foi * tirar, porque a bolinha cheia ao lado já diz "feito". A classe continua sendo * escrita pela view, e sem esta regra ela vira classe órfã: quem lesse a view * procuraria o estilo dela, e quem escrevesse CSS depois poderia criá-la com * outro sentido. * * `list-style: none` é o valor que o `.lym-itens` já dá; declarar aqui é o jeito * de a regra existir sem mudar nada. */ .lym-item--feito { list-style: none; } /* * A capa muda o respiro do topo: com imagem, o título encosta nela e o espaço * de cima seria repetido. Sem imagem, ele é o que separa o título da borda. */ .lym-topo--com-capa { padding-top: 0; } .lym-item__aviso { font-size: 0.8rem; white-space: nowrap; } /* * **Numa coluna estreita o aviso desce para a linha de baixo quando não cabe ao * lado do nome — e nunca é CORTADO.** O `.lym-bloco` tem `overflow: hidden`, * então o que passa da borda some sem rolagem nenhuma. Medido no Chrome com a * marcação real de `produto.php`: com um nome de uma palavra longa * ("Responsabilidades") ao lado, "Será liberado em 10 dias" (mais longa que o * "libera em 1 semana" de antes) perdia uns 24px do fim a 360px em Arial e a * 390px em Verdana, e mais de 60px a 320px. A frase antiga já era cortada a * 320px (e a 360px em Verdana). Com as três regras abaixo: nenhuma peça cortada * nem fora da página a 320, 360 e 390px, em Arial e em Verdana, com a frase de * 10 dias, a de 59 minutos, a de 1.000 dias e a antiga. * * **Sem media query, porque quem aperta é a COLUNA e não a janela** — a mesma * lição da fileira da onda. `[lym_meus_produtos]` mora onde quem monta a página * o puser, e numa coluna de construtor a conta do flex é exatamente a do * telefone. Medido no Chrome, com a marcação real e a janela em 1280px: presas * a `max-width: 782px`, as três regras não valiam ali e quatro avisos passavam * da borda do bloco — 25px numa coluna de 340px em Arial, 40px numa de 360px em * Verdana. Soltas, nada é cortado em coluna nenhuma (280, 320, 340, 360 e * 390px, em janela estreita e em janela de 1280). E num bloco de 900px a * geometria é a MESMA de antes, pixel a pixel: nome e aviso na mesma linha, o * aviso à direita. * * **As classes são DOBRADAS, e não é enfeite:** a base `.lym-item__nome` * declara `flex: 1 1 auto` e `.lym-item` declara `gap`, as duas com o mesmo * peso destas. Empate se resolve pela ORDEM na folha, e uma media query não * soma peso nenhum: juntar estas regras a um bloco de telefone escrito mais * acima — e existe um, com `.lym-item__nome` dentro — devolvia a base a `auto` * em silêncio, com a suíte verde. Em (0,2,0) elas vencem em qualquer posição. * * Cada uma tem a sua razão, também medida: * * - **O aviso continua numa linha só.** Com `white-space: normal` ele virava * uma coluna de 46px, em quatro linhas. * - **`flex-basis: 0` no nome** é o que decide QUANDO descer. A quebra de linha * do flex mede o nome pelo tamanho de partida: com o `auto`, um título comprido * de várias palavras pedia a largura inteira e ia sozinho para a linha de * baixo, deixando a bolinha solta no alto. Com zero, conta a maior palavra, e * o aviso só desce quando de fato não cabe ao lado do nome. * - **`margin-left: auto`** mantém à direita o aviso que desceu; na mesma * linha o nome cresce e a margem vale zero. */ .lym-item.lym-item { flex-wrap: wrap; row-gap: 0.25rem; } .lym-item__nome.lym-item__nome { flex-basis: 0; } .lym-item__aviso.lym-item__aviso { margin-left: auto; } /* ========================================================================== * A conversa abaixo do conteúdo. * * Sóbria como o resto: nenhuma cor própria, separação por cinza translúcido * sobre o fundo do tema, e a cor dos links vindo da variável que o script * decide a partir do fundo medido. * * **O recuo das respostas é pequeno de propósito.** Cinco níveis com um recuo * generoso deixam o quinto com metade da largura no celular — e o teto de cinco * existe justamente porque a conversa vai fundo. Um traço na lateral diz a * hierarquia melhor que o espaço, e não custa largura nenhuma. * ========================================================================== */ /* * **Sem linha em cima, e sem respiro largo — é a regra que a faixa do perfil * já registra, e ela vale aqui pela mesma razão.** * * A conversa é uma peça que vai a três lugares: abaixo de um conteúdo, numa * página de grupo onde ela é a única coisa na tela, e na conversa particular. * Nos dois últimos não há nada acima para separar, e a linha atravessada * vira sujeira — desenha uma divisão entre a peça e o nada. * * Eram 3rem de margem mais 2rem de calha: oitenta pixels de vão antes da * caixa de escrever, comendo o alto da tela numa página que existe para * conversar. * * **Quem quer separação põe no construtor**, que é onde ele já decide o * espaçamento de tudo. O respiro que fica é o mínimo para a peça não * encostar no que estiver em cima quando ela cai depois de um conteúdo. * * **Ele caiu de 1,5rem para 0,75rem em 19/09/2026**, a pedido do Flávio ("muito * espaço acima e abaixo da caixa de comentários"): cada pixel aqui é um pixel a * menos de conversa na primeira tela. Medido na `/video1/` do site dele, com o * Chrome sem janela a 1920px: o parágrafo do widget de texto do Elementor já * põe 14px embaixo dele, e com os 24px daqui eram 38px entre o texto e a caixa — * agora 26px. O grupo e o suporte não têm esta margem (`--papo`, mais abaixo). */ .lym-conversa { margin: 0.75rem 0 0; } .lym-conversa__titulo { margin: 0 0 1.5rem; } /* * **O tamanho é do PLUGIN, e a classe dobrada é o que o faz valer.** Ele conta * quantas mensagens há — é uma etiqueta, e não o título da página. * * Ele desceu duas vezes a pedido (de 1,15rem, a medida original, para 1,05rem e * depois 0,95rem) e nas páginas montadas no Elementor NENHUMA das duas chegou à * tela: o Kit do construtor * declara `.elementor-kit-N h2`, que pesa (0,1,1) e vence uma classe só. O que o * Flávio via era o tamanho do Kit — 23px no computador e no tablet, 19px no * celular —, e numa página sem Elementor o do plugin. Duas páginas do mesmo * produto com letras diferentes, a mesma armadilha das cores do menu. * * **O valor é o que ele aprovou no celular** (16/09/2026: "no mobile tá bom, no * tablet e no PC tá muito grande"): 19px, em rem, agora em toda largura e em * toda página. O piso continua sendo o texto das mensagens (0,9375rem) — abaixo * dele a contagem leria MENOR que a conversa que ela anuncia. * * **No bate-papo ela fica abaixo desse piso, e a exceção é pedida** (1.100.0): * ali a contagem divide a tela com a lista e a caixa, e cada pixel dela é um * pixel a menos de mensagem. A regra mora junto das outras do bate-papo. */ .lym-conversa__titulo.lym-conversa__titulo { font-size: 1.1875rem; } .lym-conversa__vazia, .lym-conversa__entrar { margin: 0 0 1.5rem; } .lym-conversa__lista, .lym-comentario__respostas { margin: 0; padding: 0; list-style: none; } /* * **Três medidas, e todo o resto sai delas.** O recuo da resposta, a posição * do fio que liga as bolinhas e a largura da coluna da esquerda são a MESMA * conta escrita uma vez: mudar o tamanho da bolinha aqui move as três juntas. * * **A coluna tem a largura da bolinha, e mais nada** (18/09/2026). Ela era * mais larga — 56px para uma foto de 32 — porque a etiqueta do papel morava * embaixo da foto e pedia dez letras de largura. A foto ficava centrada, e os * 12px que sobravam à direita dela se somavam ao vão: eram 22px de vazio * entre a bolinha e o balão, e o Flávio pediu a bolinha encostada. A etiqueta * foi para o lado do nome, e a coluna passou a ser a foto. * * **Cada pixel aqui é multiplicado por cinco**, que é a profundidade máxima de * resposta: a coluna mais o vão é o recuo no computador, e o recuo se acumula * a cada nível. Eram 66px por nível; são 38. */ .lym-comentario { --lym-foto: 2rem; --lym-lado: var( --lym-foto ); --lym-vao: 0.375rem; /* * **Onde o fio desce, escrito UMA vez.** É o centro da coluna da esquerda, * medido a partir da borda esquerda da resposta — que é onde a coluna 2 do * pai começa. Os três pedaços do fio (o de cima, o do galho e o cotovelo que * entra na bolinha) leem esta conta; escrita três vezes, ela um dia * discordaria de si mesma e o traço sairia torto por meio pixel em algum * nível de resposta. */ --lym-fio-x: calc( var( --lym-vao ) + var( --lym-lado ) / 2 ); /* * **O RECUO da resposta, que no celular não é o mesmo que a posição do fio.** * * No computador os dois coincidem: a resposta nasce onde o nome de quem ela * responde começa, e o fio desce do centro da bolinha — `--lym-fio-x` dá * conta das duas coisas. Numa tela estreita o recuo encolhe (cinco níveis com * o recuo do computador deixariam o quinto com metade da largura da tela), e * aí eles se separam: o fio continua no centro da bolinha de cima, e a * resposta chega mais perto dele. * * **Foi assim que o fio quebrou no celular.** O recuo encolhia numa regra que * mexia na LISTA, enquanto os pedaços de cima do fio se penduravam no * invólucro: as respostas andavam meio centímetro para a esquerda e o fio * delas ia junto, o de cima ficava onde estava, e os dois deixavam de se * encontrar. Com o recuo declarado aqui, quem o encolhe move as duas pontas * de uma vez. */ --lym-fio-recuo: var( --lym-fio-x ); /* * **A borda ESQUERDA do fio, contada da resposta.** Todo pedaço dele é uma * caixa de dois pixels, e uma caixa se posiciona pela borda esquerda: para * ficar CENTRADA na linha, ela começa um pixel antes. Escrito sem esse pixel, * o fio da resposta sai meio traço à direita do fio de quem a respondeu — e * um degrau de um pixel lê como borrão, não como erro. */ --lym-fio-esq: calc( -1 * var( --lym-fio-recuo ) - 1px ); --lym-fio-cor: var( --lym-borda, rgba( 128, 128, 128, 0.25 ) ); /* * O respiro que a mensagem tem em cima e embaixo, e que o fio precisa vencer. * * **Pela METADE desde a 1.119.0** (pedido do Flávio em 20/09/2026, olhando a * tela do grupo: "diminua pela metade o espaço vazio entre um comentário e * outro", para caber mais mensagem na tela). Eram 0,35rem de cada lado, ou * seja 11,2px entre dois balões vizinhos; agora são 5,6px. Medido no Chrome * sem janela com a marcação e a folha de verdade. * * **O fio está seguro por construção, e é por isso que esta é a alavanca * certa**: `--lym-fio-cabeça` e o respiro do galho leem ESTA variável, então * a geometria inteira encolhe junto sem nenhuma conta refeita à mão. * * **O preço, medido e aceito:** o brilho de "novo" passa 0,375rem (6px) acima * e abaixo do balão, e agora esses 6px são maiores que os 5,6px que separam * dois balões — ele encosta 0,4px atrás do balão vizinho, que tem fundo * próprio e o cobre. Quatro décimos de pixel atrás de uma caixa opaca não * aparecem; encolher o brilho junto o deixaria de ser brilho. */ --lym-msg-y: 0.175rem; /* * **A linha divisória saiu.** Numa conversa ela desenhava uma régua a cada * mensagem, e o que separa uma fala da seguinte já são o peso do nome e o * espaço — a régua era o terceiro sinal dizendo o que dois já diziam, e * custava altura em cada linha da tela. */ display: grid; grid-template-columns: var( --lym-lado ) minmax( 0, 1fr ); column-gap: var( --lym-vao ); padding: var( --lym-msg-y ) 0; } /* * A coluna da esquerda: a foto, e embaixo dela o fio quando há respostas. */ .lym-comentario__lado { grid-column: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0; } /* * **O pedaço de cima do fio, e ele é a razão desta mudança.** * * O fio era só a borda da lista de respostas, e ela começa DEPOIS do balão * inteiro: o traço nascia no vazio, na altura em que a mensagem termina, sem * tocar em quem foi respondido. Quem olha não lê "estas são respostas * daquela" — lê uma linha solta. * * Este pedaço desce da bolinha até o fim da fileira do comentário, e o * `flex: 1` é o que o faz começar exatamente onde a coluna acaba de escrever, * que é embaixo da foto. Não há número a acertar — ele ocupa o que sobrou, e o * que sobrou começa onde a última peça terminou. * * O `margin-top` é o "quase encosta": o fio não toca a bolinha. */ .lym-comentario--fio > .lym-comentario__lado::after { content: ""; flex: 1 1 auto; min-height: 0.35rem; width: 2px; margin-top: 0.25rem; /* * **Ela é centrada pelo `align-items`, e por isso nasce em `lado / 2`** — o * centro da coluna, que é exatamente onde `--lym-fio-esq` põe os pedaços de * baixo. Não há correção a fazer: os dois são caixas de dois pixels sobre a * mesma linha. */ background: var( --lym-fio-cor ); border-radius: 1px; } /* * A coluna da direita: o nome, a hora, o texto, a mídia e as ações — todos * começando no mesmo lugar, que é o que faz a conversa ter uma margem só. * * **E ela é o ENVOLTÓRIO da mensagem**, no lugar da régua que separava uma * fala da outra. Uma linha divide, mas não diz onde a fala termina: numa * conversa de mensagens curtas, o que a pessoa procura é o contorno do que * alguém disse. A bolinha fica de fora de propósito — ela é de quem falou, e * não do que foi dito. * * **A cor é um cinza TRANSLÚCIDO, e a escolha não é preguiça.** Um tom fixo * seria a paleta deste plugin aparecendo no site de outra pessoa: no tema * escuro do primeiro cliente ele precisa clarear, num site claro precisa * escurecer, e nenhum hexadecimal faz as duas coisas. Cinza a 14% sobre o * fundo real vira grafite no escuro e cinza-claro no claro, sem que o plugin * precise saber qual dos dois é. * * A luz de cima é a única "cor" que este plugin inventa, e ela só ADICIONA: * num tema claro ela é invisível. */ .lym-comentario__corpo { grid-column: 2; min-width: 0; /* * **A largura do envoltório é a do que está DENTRO dele, e não a da coluna.** * * Como item de grade ele esticava até a borda, e todo comentário saía com a * mesma largura: um "olá" ocupava a tela inteira igual a um parágrafo de dez * linhas. O contorno deixava de dizer o tamanho da fala — que é metade do que * um envoltório serve para dizer. * * **`justify-self: start` e não `width: fit-content`.** Os dois dão o mesmo * tamanho, mas o primeiro é a própria regra de dimensionamento da grade: o * item fica com o menor entre o conteúdo esticado e o espaço disponível, e * portanto NUNCA estoura a coluna. A palavra-chave `fit-content` num `width` * precisou de prefixo por anos, e onde ela não é entendida a declaração cai * inteira — deixando o envoltório crescer até o tamanho do parágrafo sem * quebra, que é rolagem lateral na página inteira. * * O teto existe pela leitura, e não pelo desenho: uma linha de texto que * atravessa um monitor largo perde o começo da frase seguinte no caminho de * volta. Ele nunca aperta o celular, onde a coluna já é menor que isso. */ justify-self: start; max-width: 42rem; /* * **O recheio de cima caiu pela METADE e o de baixo foi a ZERO** (1.119.0, * pedido do Flávio em 20/09/2026, para caber mais mensagem na tela). Em cima * eram 0,4rem = 6,4px entre a borda do balão e a fileira do nome, e agora são * 3,2px — a metade exata que ele pediu. * * **Embaixo, os 0,15rem eram 2,4px, e o vão que ele Vê ali é de 12,4px.** A * diferença não é espaçamento: são os 10px de sobra de DENTRO do botão de * ação, que tem 36px no mouse e 44px no toque porque é alvo de dedo, e a * tinta da palavra tem 16px (medido no Chrome com a marcação de verdade). * Zerar o recheio é tudo o que dá para tirar dali sem encolher o alvo de * toque — e encolher o alvo de toque é decisão travada, com vigia. A outra * saída, puxar a fileira com margem negativa, faria o fundo do botão em gesto * sair 3,6px para FORA da borda arredondada do balão: está registrada aqui * para a leitura seguinte não a redescobrir e escrever sem ver o preço. */ padding: 0.2rem 0.65rem 0; border-radius: 0.85rem; background: rgba( 128, 128, 128, 0.14 ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.07 ); } /* * **Ela QUEBRA, como a fileira de ações 20 linhas abaixo já quebra.** Duas * peças desta linha não encolhem — o carimbo da hora e o rótulo de papel têm * `white-space: nowrap` —, e o mínimo automático de um item de flex é o * min-content dele. Sem `flex-wrap`, num celular o nome era espremido e as * marcas "Fixado no alto" e "Assunto encerrado" saíam cortadas. */ .lym-comentario__quem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin-bottom: 0.1rem; } /* * A foto é a mesma de Minha conta — o plugin já se pendura no filtro de avatar * do WordPress. Um `` próprio aqui faria a foto do comentário divergir da * do resto do site no dia em que alguém trocasse a dela. */ .lym-comentario__foto.lym-comentario__foto { flex: 0 0 auto; width: var( --lym-foto ); height: var( --lym-foto ); border-radius: 50%; } .lym-comentario__nome { font-weight: 600; font-size: 0.875rem; /* * **A cor separa uma fala da outra sem precisar de linha nem de caixa.** * Numa conversa de mil mensagens, o nome com a mesma cor do texto faz a * lista virar um bloco só — a pessoa perde onde uma fala acaba e a * seguinte começa, e é o defeito que ninguém consegue nomear olhando. * * Herda a cor do texto até o dono do site escolher a dele. */ /* * **O nome de quem assinou é NEUTRO por padrão desde 01/09/2026.** * * Ele saía em âmbar, e numa conversa em que quase toda mensagem é do mesmo * autor a tela virava uma coluna de nomes coloridos — foi a segunda queixa * do dono do site, junto com o vermelho em tudo. O que separa uma fala da * seguinte é o PESO do nome e o espaço entre elas, e os dois já estão aqui. * * A cadeia continua inteira: quem quiser o âmbar de volta escolhe em * Configurações, e a escolha vence. O que mudou é o padrão — e o padrão de * um plugin que vai para muitos sites tem de ser o que funciona sem * ninguém escolher nada. */ color: var( --lym-nome, var( --lym-nome-medido, currentColor ) ); /* Nome pode ser um e-mail, que é uma palavra só que não quebra. */ min-width: 0; overflow-wrap: anywhere; } /* * **A hora fica ao lado do nome, e não encostada na borda.** Ela tinha * `margin-left: auto`, que a empurrava para o fim da linha: numa tela larga o * nome ficava numa ponta e a hora na outra, com um vão vazio no meio, e os * dois pedaços da mesma informação deixavam de se ler juntos. */ .lym-comentario__quando { font-size: 0.6875rem; white-space: nowrap; opacity: 0.7; } /* * A marca de "esperando aprovação" é uma faixa na lateral, e não um fundo * colorido: qualquer cor que eu escolhesse teria chance de apagar o texto no * tema de alguém. É a mesma razão do recado de erro. */ /* * **O comentário pendente não tem marca nenhuma, e as duas regras que existiam * aqui saíram.** * * A primeira desenhava um traço vertical à esquerda dele. A frase que explicava o * traço foi removida a pedido do Flávio — a mensagem aparece como enviada —, e o * traço ficou: uma barra sem uma palavra ao lado, que em toda interface do mundo * quer dizer erro, citação ou alerta. Ela dizia à pessoa que alguma coisa deu * errado, justamente quando deu certo. * * A segunda vestia essa frase, e ficou órfã: nenhuma view a usa desde 30/08. Regra * de CSS sem quem a use é pior que regra ausente — quem lê a folha procura o * elemento, e quem escreve depois pode reaproveitar o nome com outro sentido. * * A classe `--esperando` continua saindo no HTML, sem pintar nada: ela existe para * quem quiser marcar o próprio pendente na folha dele. */ .lym-comentario__texto { font-size: 0.9375rem; line-height: 1.4; /* O texto de um comentário pode trazer um endereço colado sem espaço. */ overflow-wrap: anywhere; } .lym-comentario__texto p { margin: 0 0 0.4rem; } .lym-comentario__texto p:last-child { margin-bottom: 0; } /* * **O recuo da resposta não é um número: é a coluna 2.** A bolinha de uma * resposta nasce exatamente onde o nome de quem ela responde começa, e isso * sai de graça de a lista morar na mesma coluna do nome — não há conta a * refazer quando a bolinha mudar de tamanho. */ .lym-comentario__respostas { grid-column: 2; /* * **A cabeça: o que separa a lista do que está acima dela.** Ela é recheio, e * não margem, porque a primeira resposta puxa o fio para cima por exatamente * esta medida — e margem não entra na conta de quem se posiciona por dentro. */ --lym-fio-cabeca: var( --lym-msg-y ); margin-top: 0; padding-top: var( --lym-fio-cabeca ); } /* * **Cada resposta é a referência do pedaço de fio que passa por ela.** Sem isto * o pedaço se mediria contra o primeiro ancestral posicionado, que pode ser * qualquer coisa da página do cliente — e o traço apareceria do outro lado da * tela. */ .lym-comentario__respostas > .lym-comentario { position: relative; } /* * **O fio passa inteiro pelas respostas que NÃO são a última, e para na última.** * * É a diferença entre este fio e o de antes. Desenhado por um invólucro único, * ele ia até o fim da área de respostas: com uma resposta longa, ou com uma * resposta que tem respostas, sobrava um rabo de linha descendo ao lado dela sem * ligar coisa nenhuma. Desenhado pedaço a pedaço pelas próprias respostas, o fio * acaba onde a última bolinha começa — que é onde ele deixou de ter o que ligar. * * A altura é a da resposta INTEIRA, subárvore incluída: o fio precisa atravessar * tudo o que está pendurado nela para alcançar a irmã seguinte. * * **E quem é a última é a CLASSE, e nunca `:last-child`.** Clicar em "Responder" * move a caixa de escrever para dentro da lista, logo depois da mensagem * respondida: com `:last-child`, a última deixava de ser a última no instante do * clique, o fio dela voltava a descer, e o traço passava a ligar mensagens sem * relação nenhuma. A classe vem do PHP e não depende do que mais entra na lista. */ .lym-comentario__respostas > .lym-comentario:not( .lym-comentario--fim )::before { content: ""; position: absolute; left: var( --lym-fio-esq ); top: 0; bottom: 0; width: 2px; background: var( --lym-fio-cor ); } /* * **O pedaço de baixo do fio, e ele cobre a área de respostas INTEIRA.** * * A borda morava na lista, e o botão "N respostas" fica FORA dela: o fio se * partia em volta do botão, e voltava depois. Aqui ela mora no invólucro, que * contém o botão e a lista — um traço só, do fim do balão até o fim das * respostas. * * **A margem negativa leva a borda até o centro da bolinha de cima, e o recheio * devolve o conteúdo para a coluna.** As duas pontas são a MESMA conta, e ela * é a mesma que o pedaço de cima usa — é assim que os dois ficam no mesmo * prumo sem ninguém medir nada. * * O respiro de cima é recheio, e não margem: com margem o fio se partiria de * novo, agora entre o balão e a primeira resposta. */ .lym-comentario__galho { grid-column: 2; position: relative; /* * **Ele posiciona, e não desenha.** A borda daqui era o fio inteiro, e por * isso ele ia até o FIM de tudo o que estivesse pendurado na última resposta * — uma resposta longa deixava um rabo de linha descendo ao lado dela, * ligando a coisa nenhuma. O fio agora é desenhado pedaço a pedaço pelas * próprias respostas, e por isso sabe onde parar: na bolinha da última. */ /* * **A margem é a POSIÇÃO do fio; o recheio é o RECUO da resposta.** No * computador os dois são o mesmo número e parecem uma conta só — numa tela * estreita o recuo encolhe e a posição não, porque o fio continua descendo do * centro da bolinha de quem foi respondido. */ margin-left: calc( -1 * var( --lym-fio-x ) ); padding-left: var( --lym-fio-recuo ); padding-top: var( --lym-msg-y ); } /* * O primeiro pedaço do galho: o respiro entre o fim do balão e o que vem abaixo, * seja o botão de recolher ou a primeira resposta. */ .lym-comentario__galho::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: var( --lym-msg-y ); background: var( --lym-fio-cor ); } /* * **O cotovelo: do fio até a bolinha da resposta.** * * Sem ele o fio passa RENTE aos avatares sem tocar em nenhum, e a conversa fica * com uma régua ao lado das respostas em vez de uma ligação entre elas. * * A conta: ele nasce na linha do fio (`--lym-fio-x` à esquerda da resposta) e * morre na borda esquerda da bolinha dela, que fica a meia diferença entre a * coluna e a foto. A altura é o centro da foto. Os três números são os mesmos * que desenham a coluna — nenhum foi inventado aqui. * * **O canto é arredondado no pé esquerdo**, que é por onde a curva sai do fio: * um ângulo reto ali lê como cruzamento, e a curva lê como derivação. */ .lym-comentario__respostas > .lym-comentario > .lym-comentario__lado::before { content: ""; position: absolute; /* * **A conta, refeita em coordenadas do pai.** A borda do galho fica em * `--lym-lado / 2` — o centro da coluna de cima — e ocupa dois pixels; o * recheio do galho é `--lym-fio-x`, então a resposta começa dois pixels e um * `--lym-fio-x` à direita dessa borda. Daí `left: -1 * --lym-fio-x` cair * exatamente na borda direita do fio: o cotovelo começa onde a linha acaba. * * E ele morre na borda esquerda da bolinha da resposta, que fica a meia * diferença entre a coluna e a foto. Somando: `--lym-fio-x` para atravessar o * recheio, mais essa meia diferença. * * **Desde 18/09/2026 essa meia diferença é zero**: a coluna tem a largura da * foto. A parcela continua escrita porque é ela que mantém a conta certa no * dia em que alguém alargar a coluna de novo — apagada, o cotovelo pararia * antes da bolinha sem nada acusar. * * **A primeira versão SUBTRAÍA as duas parcelas em vez de somar**, e dava * 0,625rem no lugar de 3,125rem: o cotovelo saía do fio e morria no meio do * caminho, sem tocar bolinha nenhuma. O vigia não pegava — ele confere que a * conta é lida, e não que ela fecha. */ left: var( --lym-fio-esq ); width: calc( var( --lym-fio-recuo ) + 1px + ( var( --lym-lado ) - var( --lym-foto ) ) / 2 ); /* * **A curva é a BORDA DE BAIXO com o canto arredondado, e não uma linha de * dois pixels de altura.** Um raio num bloco de 2px não desenha curva nenhuma * — não há altura onde curvar. Aqui o bloco vai do alto da coluna até o * centro da foto, e só a aresta de baixo é pintada: ela sobe no canto * esquerdo e encontra o fio como uma derivação, e não como um cruzamento. */ /* * **Ele começa no topo da CAIXA da resposta, e não no topo do conteúdo dela.** * * A mensagem tem `--lym-msg-y` de respiro em cima, e a coluna da esquerda — * de quem este cotovelo é filho — começa DEPOIS desse respiro. Começando em * zero, sobrava uma falha da altura do respiro entre o fio que desce e a * curva. * * **E ela só aparecia na ÚLTIMA resposta**, que é o que torna o defeito * difícil de ler: nas outras, o pedaço de passagem cobre a caixa inteira, * respiro incluído, e tapa o buraco sem ninguém notar que ele existe. A * última não tem pedaço de passagem — é exatamente essa a diferença dela. */ top: calc( -1 * var( --lym-msg-y ) ); height: calc( var( --lym-foto ) / 2 + 1px + var( --lym-msg-y ) ); /* * **A borda ESQUERDA veio junto, e ela é o último pedaço do fio.** Ela desce * do alto da resposta até a curva; sem ela, a última resposta ficaria com o * cotovelo solto, sem nada descendo até ele. */ border-left: 2px solid var( --lym-fio-cor ); border-bottom: 2px solid var( --lym-fio-cor ); border-bottom-left-radius: 10px; } /* * **O botão que abre mais respostas, e ele mora FORA da lista.** * * Dentro dela ele seria um `
  • ` — e todo `
  • ` da lista é uma mensagem, para * o fio e para quem lê com leitor de tela. Fora, ele fica depois do fio: o * traço acaba na bolinha da última resposta à vista, e o botão vem embaixo, * sem linha nenhuma chegando nele. */ .lym-comentario__abrir { margin: 0.35rem 0 0; } /* * **Ele é um LINK com classe do plugin, então precisa de pista PRÓPRIA.** * * A regra que sublinha os links da conversa alcança só `a:not([class*="lym-"])` * — senão ela atropelaria os componentes. Todo link nosso que seja frase paga * essa conta com uma pista sua: aqui é o contorno, que também é o que o faz * parecer um botão sem ganhar preenchimento. * * **A classe é dobrada, e não `!important`.** O tema do cliente pinta links; * um empate na especificidade impede este de sair vermelho sem ninguém pedir, e * continua deixando o cliente mudar depois. */ .lym-comentario__abrir-botao.lym-comentario__abrir-botao { display: inline-flex; align-items: center; /* O alvo de toque: uma linha de texto tem metade do que um dedo pede. */ min-height: 44px; padding: 0 0.75rem; border: 1px solid var( --lym-borda, rgba( 128, 128, 128, 0.25 ) ); border-radius: 999px; color: inherit; font-size: 0.875rem; text-decoration: none; } .lym-comentario__abrir-botao.lym-comentario__abrir-botao:hover, .lym-comentario__abrir-botao.lym-comentario__abrir-botao:focus { border-color: rgba( 128, 128, 128, 0.55 ); } /* * **A caixa de escrever, quando o script a move para dentro da lista, carrega o * fio pela altura dela.** * * Ela entra logo depois da mensagem respondida. No meio da lista, sem este * pedaço o fio ficaria com um buraco do tamanho do formulário — e um formulário * não é pequeno. * * `position: relative` vale sempre; o desenho só aparece com ela dentro da * lista, que é onde o seletor casa. */ .lym-comentario__respostas > .lym-conversa__form { position: relative; } .lym-comentario__respostas > .lym-conversa__form::before { content: ""; position: absolute; left: var( --lym-fio-esq ); top: 0; bottom: 0; width: 2px; background: var( --lym-fio-cor ); } /* * **Depois da ÚLTIMA, não.** Ali o fio já acabou — ele para na bolinha dela —, e * um pedaço ao lado do formulário seria o rabo de linha de volta, agora só * enquanto alguém escreve. */ .lym-comentario__respostas > .lym-comentario--fim + .lym-conversa__form::before { content: none; } /* * **A primeira resposta puxa o fio até o que está acima dela.** Ela é quem fecha * o vão entre o balão (ou o botão de recolher) e a lista: sobem a cabeça da lista * e o respiro que a própria mensagem tem em cima, que são as duas únicas coisas * entre um e outro. */ .lym-comentario__respostas > .lym-comentario:first-child > .lym-comentario__lado::before { top: calc( -1 * ( var( --lym-fio-cabeca ) + var( --lym-msg-y ) ) ); height: calc( var( --lym-foto ) / 2 + 1px + var( --lym-fio-cabeca ) + var( --lym-msg-y ) ); } /* * **A coluna da resposta vira referência para o cotovelo dela.** Sem isto ele * se posicionaria contra o primeiro ancestral posicionado, que pode ser * qualquer coisa da página do cliente — e o traço apareceria do outro lado da * tela. */ .lym-comentario__respostas > .lym-comentario > .lym-comentario__lado { position: relative; } /* * O assunto que se recolhe, com a contagem no botão. * * **`
    ` porque ele abre e fecha sem JavaScript nenhum** — o mesmo * idioma do menu de ordenar, e a dívida que o painel do índice contraiu e que * aqui não se repete. O navegador dá de graça o foco, o teclado e o anúncio * para leitor de tela. * * O bloco em si não desenha nada: quem desenha a calha é a lista de respostas * dentro dele. Uma borda aqui somaria com a de lá e a conversa ganharia duas * linhas verticais paralelas. */ /* * **O botão de recolher mora DENTRO do invólucro do fio desde 04/09/2026**, e * por isso não carrega mais nem coluna nem respiro próprios: quem os dá agora é * o invólucro. Deixados aqui, eles empurrariam o botão para dentro do recheio * que existe para afastar o conteúdo do fio. */ .lym-comentario__fio { margin-top: 0; } /* * **Quando ele está aberto, a lista de dentro já traz o respiro dela.** Sem * isto o `margin-top` do bloco somaria com o da lista e a primeira resposta * ficaria descolada do botão que a revela. */ .lym-comentario__fio .lym-comentario__respostas { --lym-fio-cabeca: 0.2rem; } /* * **Classe dobrada, e pelo mesmo motivo do botão de ordenar:** o tema do cliente * pinta `summary` em muitos temas de bloco, e um empate na especificidade é o * que impede este botão de sair vermelho sem ninguém ter pedido. * * **O alvo de toque é de ALTURA**, e é o erro que se repete: a linha parece * grande porque é larga. Uma linha de texto tem metade do que um dedo pede. * * O tom é o do texto, apagado: ele é uma etiqueta que conta quantas respostas * estão ali, e não a ação principal da linha. Pintá-lo com a cor de ação poria * um vermelho em cada assunto da conversa — que é exatamente o erro de * QUANTIDADE que o sistema de cor deste plugin existe para não repetir. */ .lym-comentario__fio-botao.lym-comentario__fio-botao { /* * **Sem `display: inline-flex` aqui, e isso não é estilo: é a pista.** O * `summary` nasce `display: list-item`, e é dali que sai o triângulo do * navegador — trocar o display por flex apaga o marcador no Chrome, e o que * sobra é um texto cinza claro que ninguém sabe que abre. Este botão é a * ÚNICA forma de ver as respostas de um assunto recolhido: sem a pista, elas * somem para quem não descobrir que aquilo se clica. * * **O alvo de toque cresce por `padding`, e aqui pode.** A regra da casa * proíbe engordar com padding quando quem desenha a peça é a BORDA — não é o * caso: a borda esquerda daqui não desenha o botão, desenha o FIO que passa * por trás dele, e o padding só afasta o texto. * * **E é ele que carrega o fio pela própria altura.** O botão fica entre o * balão e as respostas, e antes o fio se partia em volta dele. Uma borda no * próprio botão cobre exatamente o que ele ocupa — sem ninguém precisar saber * quanto isso mede, que é o que uma altura escrita à mão exigiria. */ padding: 0.6rem 0.25rem 0.6rem calc( var( --lym-fio-recuo ) + 1px ); margin-left: var( --lym-fio-esq ); border-left: 2px solid var( --lym-fio-cor ); cursor: pointer; color: inherit; font-size: 0.875rem; opacity: 0.75; } /* * **Zero em cima, porque a seção já dá o respiro.** Somando com o que a * `.lym-conversa` tinha — 3rem de margem mais 2rem de calha —, eram cento e * doze pixels de vão antes da caixa de escrever, numa página que existe para * conversar. * * **Havia aqui uma segunda regra, para o formulário MOVIDO, e ela morreu com * o movimento.** Ao responder, o script tirava a caixa do alto e a punha * dentro da lista — e a caixa do topo sumia da tela sem que nada anunciasse * que era a mesma. Hoje ela fica onde está e quem diz a quem se responde é a * faixa dentro dela, então não há posição na árvore que precise de respiro * próprio. */ .lym-conversa__form { margin-top: 0; } .lym-conversa__form label { display: block; margin-bottom: 0.35rem; font-weight: 600; } .lym-conversa__form textarea { display: block; width: 100%; max-width: 100%; box-sizing: border-box; } .lym-conversa__aviso { margin: 0.5rem 0 1rem; font-size: 0.85rem; opacity: 0.8; } @media ( max-width: 600px ) { /* * No celular o recuo por nível encolhe: cinco níveis com o recuo do * computador deixariam o quinto com metade da largura da tela, e o traço * sozinho já diz a hierarquia. * * **Quem encolhe é a MEDIDA, e nunca o recheio de uma peça.** Escrita como * `padding-left` na lista, ela movia as respostas sem mover o fio que desce * até elas: os pedaços de cima ficavam onde estavam, os de baixo iam junto com * as respostas, e o traço quebrava no meio — só na tela estreita, que é onde * ninguém estava olhando. */ .lym-comentario { --lym-fio-recuo: 0.6rem; } } /* ========================================================================== * A tela de renovar. * * **Ela não tinha uma linha de CSS.** O cabeçalho saía na largura do contêiner * do tema — no computador, uma frase de 175 caracteres numa linha só, contra os * 45 a 75 que se lê sem esforço — e o formulário logo abaixo vinha centrado num * teto próprio: as duas peças da mesma tela não compartilhavam nem largura nem * alinhamento. * * As medidas são as mesmas do checkout de propósito: é o mesmo formulário * embaixo, e dois tetos diferentes fariam a emenda aparecer. * ========================================================================== */ .lym-renovar { max-width: 32em; margin: 0 auto 1.5em; } .lym-renovar__titulo { margin: 0 0 0.5em; } .lym-renovar__estado { margin: 0; } @media ( min-width: 900px ) { .lym-renovar { max-width: 58em; } } /* * **A caixa curta se centraliza na tela em que ela é o único conteúdo.** * * As telas de "já entrou", "senha inválida" e "precisa entrar" colavam a caixa * no alto de um modelo com `min-height: 100vh` e deixavam três quartos da * primeira tela vazios embaixo. O plugin já resolve isso para a tela de * bloqueio, na regra irmã algumas linhas acima — faltava dizer que vale aqui * também. * * `:only-child` é o que amarra: numa página em que a caixa divide espaço com * outra coisa, centralizar seria arrastar o resto junto. */ .lym-pagina--limpa > .lym-caixa-aviso:only-child { margin-top: 0; margin-bottom: 0; } .lym-pagina--limpa:has( > .lym-caixa-aviso:only-child ) { display: flex; align-items: center; justify-content: center; } .lym-caixa-aviso { max-width: 34rem; margin: 2rem auto; padding: 2rem; border: 1px solid var( --lym-borda, rgba( 128, 128, 128, 0.25 ) ); border-radius: var( --lym-raio, 14px ); background: var( --lym-fundo, rgba( 128, 128, 128, 0.08 ) ); text-align: center; } .lym-caixa-aviso h2 { margin: 0 0 0.75rem; font-size: 1.3rem; } .lym-caixa-aviso__texto { margin: 0 0 1.25rem; opacity: 0.85; } /* O índice do produto */ .lym-menu { border: 1px solid var( --lym-borda ); border-radius: var( --lym-raio ); overflow: hidden; font-size: 0.95rem; } .lym-menu__topo { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.25rem; background: var( --lym-fundo ); } .lym-menu__nome { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; font-weight: 600; line-height: 1.3; } .lym-menu__nome small { font-size: 0.75rem; font-weight: 400; opacity: 0.7; } .lym-menu__grupo { border-top: 1px solid var( --lym-borda ); } .lym-menu__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1.25rem; cursor: pointer; font-weight: 600; list-style: none; } /* O triângulo padrão do details some: a seta própria alinha melhor. */ .lym-menu__cabecalho::-webkit-details-marker { display: none; } .lym-menu__cabecalho::after { content: "\203A"; margin-left: auto; opacity: 0.5; transform: rotate( 90deg ); } .lym-menu__grupo[open] > .lym-menu__cabecalho::after { transform: rotate( -90deg ); } .lym-menu__conta { font-size: 0.75rem; font-weight: 400; white-space: nowrap; opacity: 0.7; } .lym-menu__item { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.55rem 1.25rem 0.55rem 1rem; line-height: 1.4; } .lym-menu__item a { text-decoration: none; } .lym-menu__item a:hover, .lym-menu__item a:focus { text-decoration: underline; } /* * **Sem opacidade: ela MULTIPLICA com a do item, e o resultado era ilegível.** * * O aviso de "Será liberado em 3 dias" tinha 0,75 e vive dentro de um item * trancado, que tinha 0,5 — efetivo 0,375. Nenhuma cor de texto de tema salva um * texto de 11,5px a 37% de opacidade. * * Ele já é menor que o nome do item, e o corpo menor sozinho basta para * separá-lo. O que ele diz — quando o conteúdo abre — é informação, e informação * não se apaga. */ /* * O nome do grupo dentro do índice. A classe existia na view sem regra nenhuma, * e o título saía com o mesmo peso dos itens embaixo dele — a lista perdia a * divisão que a estrutura tem. */ /* * **O módulo é a cor, e o conteúdo é o texto.** Era o contrário — o nome de cada * conteúdo saía na cor de link do tema e o módulo em branco —, e numa coluna de * 148 nomes coloridos a divisão da estrutura sumia. Decisão do Flávio em * 15/09/2026: "os módulos todos em azul e o nome dos conteúdos todos em branco, * assim vai dar mais leveza". * * O azul é `--lym-info`, que é o par MEDIDO do plugin para os dois temas — e não * o azul do tema de quem instalou, que o plugin não sabe qual é. A cor do * produto vence, quando o dono escolheu uma. */ .lym-menu .lym-menu__titulo { display: block; color: var( --lym-destaque, var( --lym-info ) ); font-weight: 600; } /* * **E o nome do conteúdo herda a cor do texto.** O seletor é fundo de propósito: * o tema do cliente pinta os links dele com a classe do corpo (`body.x a` pesa * mais que `.lym-menu a`), e era ele que deixava a lista inteira azul. Duas * classes mais o elemento vencem aquele peso sem `!important`, que tiraria do * dono a chance de mudar depois. */ .lym-menu .lym-menu__item a, .lym-menu .lym-menu__item a:hover, .lym-menu .lym-menu__item a:focus { color: inherit; } .lym-menu__item small { display: block; font-size: 0.72rem; } /* * **O nome do item concluído NÃO desbota, e é o mesmo conserto de contraste * já aplicado à lista da página do produto — que ficou lá e não veio para * cá.** * * Ele tinha `opacity: 0.7`, e a `opacity` num `li` alcança o subárvore * inteira: a cor de link a 70% sobre branco dá 4,03:1, contra os 4,5:1 que * a WCAG pede para texto normal — e o corpo aqui é 0,95rem, que não é texto * grande. Numa lista de 148 itens, é a MAIORIA dos nomes que o membro que * está avançando lê desbotada, justamente quando ele quer voltar para * revisar. * * **E ela apagava a bolinha junto.** A regra logo abaixo devolve * `opacity: 1` ao botão do item feito — e não devolvia nada: `opacity` no * ancestral cria um grupo, e o filho compõe DENTRO dele. Os dois sinais de * "feito" saíam a 70%: o nome e a bolinha que já dizia tudo. * * `list-style: none` é o valor que a lista já dá; declarar aqui é o jeito de * a classe não ficar órfã — ela é escrita pelo PHP, e uma classe sem regra * manda quem lê a view procurar uma que não existe. */ .lym-menu__item--feito { list-style: none; } .lym-menu__item--trancado { opacity: 0.7; } /* * **O item aberto é marcado pelo FUNDO e pelo PESO, sem faixa nenhuma.** * * Houve uma faixa na lateral, e ela chegou a ser a cor de ação — o único * vermelho do índice. O Flávio pediu para tirar em 16/09/2026, vendo a tela: na * coluna azul dos módulos, o vermelho antes da bolinha era a peça que sobrava. * * **Quem marca é o PESO.** O fundo é o cinza TRANSLÚCIDO de `--lym-fundo`, que * só clareia ou escurece o que já está atrás e por isso não apaga o texto no * tema de ninguém — mas ele dá 1,09:1 contra o fundo da página, e sozinho não * seria marca. Quem usa leitor de tela ouve o `aria-current` do link. */ .lym-menu__item--atual { background: var( --lym-fundo ); font-weight: 600; opacity: 1; } /* * As peças da tela de um conteúdo. * * Cada uma funciona sozinha, colada onde o cliente quiser no construtor de * páginas. Uma peça que só funcionasse dentro do nosso modelo obrigaria a * escolher entre o desenho dele e o que o plugin sabe fazer. */ /* * Sem linha embaixo e sem respiro largo: a faixa é colada onde o cliente * quiser, inclusive numa coluna estreita, e ali uma linha atravessada vira * sujeira. Quem quiser separação põe no construtor de páginas, que é onde * ele já decide o espaçamento de tudo. */ .lym-cabecalho { display: flex; align-items: center; gap: 1rem; } /* * O sino vai para a ponta direita da faixa. `margin-left: auto` e não * `justify-content: space-between`: a faixa pode ganhar uma terceira peça um * dia, e com `space-between` ela apareceria no meio sem ninguém ter pedido. */ /* * **O filho direto do cabeçalho é o INVÓLUCRO, e não o sino.** Quando o painel * entrou, o sino ganhou um `
    ` em volta — e este seletor, que é de filho * direto, parou de casar em silêncio: o sino saiu do canto e foi colar no nome * da pessoa, sem nada na tela dizendo por quê. * * É a família de defeito que este arquivo já registra: regra que parece fazer * alguma coisa e não faz. */ .lym-cabecalho > .lym-sino-caixa { margin-left: auto; } /* * max-width e min-width existem porque o nome pode ser um e-mail — é o que o * WordPress usa quando a conta não tem nome cadastrado, e foi o caso do * primeiro comprador de teste. Um endereço de e-mail é uma palavra só, não * quebra em lugar nenhum, e empurrava a página inteira para fora da tela: um * elemento que estoura a largura faz o site ganhar rolagem lateral, e aí some * texto que não tem nada a ver com ele. */ .lym-cabecalho__perfil.lym-cabecalho__perfil { display: inline-flex; gap: 0.7rem; align-items: center; max-width: 100%; min-width: 0; padding: 0.35rem 1.1rem 0.35rem 0.35rem; border: 1px solid rgba( 128, 128, 128, 0.35 ); border-radius: 2rem; color: inherit; font-size: 0.92rem; text-decoration: none; } .lym-cabecalho__perfil.lym-cabecalho__perfil:hover, .lym-cabecalho__perfil.lym-cabecalho__perfil:focus { border-color: var( --lym-destaque, currentColor ); } .lym-cabecalho__texto { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; line-height: 1.25; } /* Cortar com reticências é melhor que empurrar a página para fora da tela. */ .lym-cabecalho__eu, .lym-cabecalho__acao { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lym-cabecalho__eu { font-weight: 600; } /* Menor e apagado: é a instrução, não o nome da pessoa. */ .lym-cabecalho__acao { color: var( --lym-destaque, currentColor ); font-size: 0.78rem; opacity: 0.85; } /* * A classe é dobrada em si mesma, e não presa a um ancestral: o mesmo desenho * aparece solto na faixa e dentro do índice, e amarrar a regra ao envoltório * fazia a foto sair no tamanho natural — enorme e quadrada — no segundo lugar. */ .lym-cabecalho__foto.lym-cabecalho__foto { width: 2.1rem; height: 2.1rem; max-width: 2.1rem; flex: 0 0 auto; border-radius: 50%; object-fit: cover; } /* Anterior e próximo, soltos, para o autor pôr onde quiser. */ /* * Respira em cima e quase nada embaixo: o que vem antes é o vídeo, que precisa * do espaço, e o que vem depois é o título do conteúdo — que pertence ao mesmo * bloco de leitura e não pode parecer solto. */ .lym-navegacao { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1.25rem 0 0.25rem; } /* * **O "anterior" e o "próximo" levam sublinhado no repouso**, e a regra que o * tirava saiu em 01/09/2026. * * O comentário que estava aqui dizia que a cor de link do tema era a certa — * e ela deixou de chegar quando os links do plugin passaram a herdar a cor do * texto. Sem cor e sem traço, os dois viravam texto solto abaixo do vídeo. * * Eles não são uma lista nem um cartão: são duas frases soltas, e para frase * solta o traço é a única pista que existe. */ .lym-navegacao__link { font-size: 0.95rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .lym-navegacao__link:hover, .lym-navegacao__link:focus { text-decoration: underline; } /* * A bolinha ao lado de cada item é o botão de marcar. * * Ela já estava ali dizendo o estado; fazer dela o controle põe a ação onde a * informação está, e poupa um botão a mais numa coluna estreita. Os seletores * são duplos porque o tema do cliente pinta os botões dele. */ .lym-marcar { margin: 0; line-height: 0; padding-top: 2px; } /* * **O desenho tem 18px e o ALVO tem 44px, e são coisas diferentes.** * * Ela é o único controle de progresso do plugin e tinha 18×18 de área * clicável — menos da metade do mínimo de 44px que dedo nenhum acerta. O * formulário em volta não ajudava, porque tem `line-height: 0`. * * Quem cresce é um pseudoelemento invisível por cima, e não a caixa do botão: * `padding` engordaria o círculo junto, porque quem desenha o círculo é a * BORDA. O pseudoelemento recebe o toque e o entrega ao botão, e o desenho * continua com os mesmos 18px. */ .lym-menu .lym-marca { position: relative; display: block; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; padding: 0; border: 2px solid currentColor; border-radius: 50%; background: transparent; box-shadow: none; opacity: 0.45; cursor: pointer; } .lym-menu .lym-marca::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate( -50%, -50% ); } /* * **A bolinha NÃO marcada é um contorno CINZA, e o vermelho que havia nela nunca * foi do plugin.** O desenho é a borda em `currentColor`, e a bolinha é um * `