/* ============================================================ LV / CAMADA 4 - LANDINGS DE `criar-lista/` O que existe nas sete landings de `criar-lista/`. Tudo o que elas dividem com a home (hero, cabecalho de secao, passos, prova social, cartoes flutuantes, entrada animada, faixa de fechamento) esta em `lv-secoes.css`, camada 3, e nao se repete aqui. A pagina `/site-de-casamento` TAMBEM carrega esta folha, porque divide o esqueleto de secao, os cartoes de beneficio e o FAQ. O que e' so' dela -- o endereco proprio e as duas amostras de tema -- mora em `lv-site-casamento.css`: aqui aquelas regras eram mortas nas sete. NAO HA COR POR TIPO. As landings usam a paleta da home, decidido pelo dono do produto: "nao quero cores personalizadas para cada tipo, quero que seja sempre seguindo as mesmas cores da home". Com isso somem, de uma vez, a dependencia de `list_type_meta.color_primary`, o `--lp-cor` no `` e todo o problema de contraste que cada cor trazia consigo -- o `#5bc4f5` do `cha_bebe` da 1,98:1 contra o branco. DUAS COLISOES DE NOME QUE ESTA FOLHA EVITA DE PROPOSITO: `.trust-item` ja existe SEM ESCOPO em `lv-rodape.css:42`, para a faixa do rodape, e a landing antiga usava a mesma classe na barra do hero. Nao colidiam porque a landing nao carregava aquela folha. Agora carrega. A barra do hero deixou de existir no desenho novo, entao a colisao nao tem mais onde acontecer, mas o nome continua proibido aqui. `.lv-plano-*` e o carrossel de planos da HOME (`lv-home.css`), com `.lv-plano-aba` e `.lv-plano-painel` que ja se confundem entre si. As tres colunas de preco daqui sao `.lv-preco-*`, e nao mais uma familia pendurada naquele prefixo. As classes `.faq-*` ficam SEM prefixo, e e excecao consciente: sao o contrato de `assets/includes/faq_section.php`, que tambem serve o `/faq.php`. Aquele arquivo continua no templatemo com a propria copia destas regras -- duas fontes da verdade para o mesmo markup, registrado como divida no TAREFAS.md. ============================================================ */ /* ===== ESQUELETO DE SECAO ============================================== */ .lv-secao { padding: var(--lv-secao) 0; } .lv-secao-alt { background: var(--lv-bg); } .lv-secao-suave { background: var(--lv-accent-soft); } /* Larguras menores que a da pagina, para o texto nao esticar. */ .lv-secao-interna-media { max-width: 980px; margin: 0 auto; padding: 0 32px; } .lv-secao-interna-estreita { max-width: 820px; margin: 0 auto; padding: 0 32px; } .lv-secao-centro { text-align: center; margin-top: 36px; } /* O emoji do chapeu do hero. Era `style="font-size:15px; line-height:1"` escrito em DOIS arquivos -- a definicao de "o que se repete", que o CLAUDE.md proibe em atributo. */ .lv-hero-emoji { font-size: 15px; line-height: 1; } /* O TEXTO DO HERO NAO ASSENTA NO PISO AQUI. `.lv-hero-grid` usa `align-items: end` (lv-secoes.css) por causa da FOTO: ela e um recorte de corpo inteiro e tem de assentar no piso da secao. A coluna de texto herdava a mesma regra e ia junto, com todo o vazio em cima. Medido a 1440px: 226px acima do texto e 0 abaixo, nas duas paginas -- pior que na home (159px) porque aqui o titulo tem duas linhas e nao tres. A foto continua no piso; so a coluna de texto centraliza. A HOME FICA COMO ESTA, e de proposito: os valores do hero dela foram lidos do mockup, e esta folha nao e carregada la. */ .lv-hero-texto { align-self: center; } /* ===== MODELOS DE LISTA ================================================ A grade nasce com seis colunas porque sao seis itens no desenho, mas o banco devolve ate 60. `auto-fill` com minimo de 168px mantem a linha cheia em qualquer contagem, sem uma media query por quebra. */ .lv-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; } .lv-modelo { background: var(--lv-surface); border: 1px solid var(--lv-line); border-radius: 14px; padding: 18px; text-align: center; } .lv-modelo-icone { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 12px; background: var(--lv-accent-soft); display: flex; align-items: center; justify-content: center; font-size: 26px; overflow: hidden; } /* A foto do produto vem do banco em proporcao qualquer. `contain` mostra o item inteiro; `cover` cortaria justamente a parte que identifica o que e. */ .lv-modelo-icone img { width: 100%; height: 100%; object-fit: contain; } .lv-modelo-nome { font-family: var(--lv-font-display); font-weight: 700; font-size: 15px; color: var(--lv-ink); margin: 0 0 4px; } .lv-modelo-cat { display: block; font-size: 12.5px; color: var(--lv-muted); margin: 0 0 8px; } .lv-modelo-preco { font-family: var(--lv-font-display); font-weight: 800; font-size: 14px; color: var(--lv-accent-texto); margin: 0; } .lv-modelos-nota { text-align: center; font-size: 13px; color: var(--lv-muted); margin: 16px 0 0; } /* AS ABAS DE TEMA, e elas nao usam mais o `nav-tabs` do Bootstrap. Enquanto usavam, o Bootstrap vencia quatro propriedades por especificidade e o resultado medido era `border-radius: 4px 4px 999px 999px` com `background-color: #fff` e `color: #495057`: uma bolha cortada, de texto escuro, encostada na linha que `.nav-tabs` desenha por baixo. O gradiente aparecia so porque `background-image` nao era sobrescrito. `.nav-tabs .nav-link.active` (0,3,0) contra `.lv-aba.active` (0,2,0) `.nav-tabs .nav-link` (0,2,0) contra `.lv-aba` (0,1,0) Vencer isso pediria uma pilha de `!important`. O certo, e o que o CLAUDE.md manda, e nao carregar a folha concorrente -- aqui, nao usar as classes dela. A barra so aparece quando ha MAIS DE UM tema: `casa_nova` e `casamento` tem um so no banco, e antes desenhavam uma aba solitaria que nao controlava nada. */ .lv-abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 30px; } /* O rotulo acima da barra. Sem ele a fileira de bolhas se le como filtro; com ele, como a escolha que de fato e: qual lista pronta vai nascer. Some junto com a barra, porque o PHP so imprime os dois quando ha mais de uma lista. */ .lv-abas-rotulo { text-align: center; margin: 0 0 12px; font-family: var(--lv-font-display); font-weight: 700; font-size: 14px; color: var(--lv-muted); } /* A contagem de itens dentro da aba. Peso e opacidade menores para o nome da lista continuar sendo o que se le primeiro. */ .lv-aba-qtd { font-weight: 600; opacity: .72; } .lv-aba { border-radius: 999px; padding: 10px 24px; font-family: var(--lv-font-display); font-weight: 700; font-size: 14.5px; border: 2px solid var(--lv-line); background: var(--lv-surface); color: var(--lv-muted); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; } .lv-aba:hover { border-color: var(--lv-accent); color: var(--lv-ink); } .lv-aba.is-ativa { background: var(--lv-gradient); border-color: transparent; color: #fff; } /* SO ESCONDE DEPOIS QUE O SCRIPT LIGA. `data-lv-abas` e escrito por JavaScript, e nao esta no HTML: sem script, os paineis aparecem todos, empilhados. E melhor do que o Bootstrap fazia, onde `.tab-pane` nasce `display:none` e os outros temas ficavam inalcancaveis. */ .lv-paineis[data-lv-abas="ligado"] .lv-painel { display: none; } .lv-paineis[data-lv-abas="ligado"] .lv-painel.is-ativa { display: block; } .lv-painel + .lv-painel { margin-top: 24px; } .lv-paineis[data-lv-abas="ligado"] .lv-painel + .lv-painel { margin-top: 0; } @media (prefers-reduced-motion: reduce) { .lv-aba { transition: none; } } /* ===== CHECKLIST ======================================================= Casa o intent INFORMACIONAL das buscas ("o que pedir no cha de ..."), que e o de volume. Quem rankeia organico nesses termos sao checklists. */ .lv-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 40px; } .lv-checklist-item { display: flex; gap: 14px; align-items: flex-start; } .lv-checklist-marca { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--lv-accent-soft); color: var(--lv-accent-strong); display: flex; align-items: center; justify-content: center; margin-top: 2px; } .lv-checklist h3 { font-family: var(--lv-font-display); font-weight: 700; font-size: 16px; color: var(--lv-ink); margin: 0 0 3px; } .lv-checklist p { font-size: 14.5px; color: var(--lv-muted); line-height: 1.6; margin: 0; } /* Item impar fica sozinho na ultima linha, e com o gate do dinheiro fechado `casamento` cai para cinco e `aniversario` para tres. Numa grade de duas colunas o que resolve e o ultimo ocupar as duas quando a contagem for impar. */ .lv-checklist-item:last-child:nth-child(odd) { grid-column: 1 / -1; } @media (max-width: 767px) { .lv-checklist { grid-template-columns: 1fr; } } /* ===== BENEFICIOS ====================================================== */ .lv-beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* Quando o gate do dinheiro fecha sao quatro cartoes, e numa grade de tres colunas o quarto fica sozinho na segunda linha. */ .lv-beneficios-quatro { grid-template-columns: repeat(2, 1fr); } .lv-beneficio { background: var(--lv-surface); border: 1px solid var(--lv-line); border-radius: 16px; padding: 26px; } .lv-beneficio-icone { width: 46px; height: 46px; border-radius: 12px; background: var(--lv-accent-soft); color: var(--lv-accent-strong); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .lv-beneficio h3 { font-family: var(--lv-font-display); font-weight: 800; font-size: 17px; color: var(--lv-ink); margin: 0 0 7px; } .lv-beneficio p { font-size: 14.5px; color: var(--lv-muted); line-height: 1.6; margin: 0; } @media (max-width: 1023px) { .lv-beneficios { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .lv-beneficios { grid-template-columns: 1fr; } } /* ===== PRECOS ========================================================== O que e gratis e o que e pago, lado a lado. Existe para nao vender o pago como gratis: o Pix direto sem taxa e ITEM DO PREMIUM, e nao promessa da plataforma. Receber valor TEM taxa fora do Premium. */ .lv-precos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .lv-preco { background: var(--lv-surface); border: 1px solid var(--lv-line); border-radius: 16px; padding: 26px; } .lv-preco-destaque { border: 2px solid var(--lv-accent); } .lv-preco-titulo { font-family: var(--lv-font-display); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; /* `--lv-accent-texto` e nao `--lv-accent-strong` em TEXTO PEQUENO: o segundo da 3,67:1 contra o branco, e o `lv-botoes.css` ja registra esse numero -- e' por causa dele que o `.lv-cta` tem 19px, para cair no piso de 3:1 de texto grande. Aqui sao 15px, onde o piso e 4,5:1. */ color: var(--lv-accent-texto); margin: 0 0 14px; } /* Verde so no "Gratis": e o unico lugar da pagina em que a cor carrega significado (nao custa nada) em vez de decorar. `--lv-verde-texto` e nao `#16a34a`: aquele da 3,30:1 contra o branco, e o piso da WCAG para 15px em negrito e 4,5:1. O tom escuro passa com 5,02:1 e continua lendo como verde. O icone fica no tom claro: objeto grafico tem piso de 3:1. */ .lv-preco-gratis .lv-preco-titulo { color: var(--lv-verde-texto); } .lv-preco-gratis .lv-preco-lista svg { color: #16a34a; } .lv-preco-lista { list-style: none; margin: 0; padding: 0; font-size: 14.5px; color: var(--lv-muted); line-height: 1.5; } .lv-preco-lista li { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 9px; } .lv-preco-lista li:last-child { margin-bottom: 0; } .lv-preco-lista svg { flex: 0 0 auto; margin-top: 3px; color: var(--lv-accent-strong); } /* As limitacoes do plano, na mesma coluna dos recursos. Sem marca de check: check ao lado de "Contem anuncios" leria como recurso. */ .lv-preco-limites { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--lv-line); font-size: 13.5px; } .lv-preco-limites li { color: #92400e; } .lv-preco-limites li span:first-child { flex: 0 0 auto; } @media (max-width: 767px) { .lv-precos { grid-template-columns: 1fr; } } /* ===== SITE DO CASAMENTO =============================================== So na landing de casamento e na pagina propria do site. Hoje este produto fica ATRAS DO LOGIN e e invisivel a frio. */ /* A COLUNA DA FOTO E DIMENSIONADA PELO TRIO, e nao por uma fracao solta. Com `1.1fr .9fr` ela media 554px a 1440, e o trio (606px) nunca cabia: os aparelhos saiam 8% menores que o aprovado e as folgas encolhiam junto. Antes de `min-width: 0` existir no palco, o piso de `min-content` do trio forcava 606px por acidente -- e o preco era a coluna do texto espremida a 306px a 1024. Aqui os dois casos ficam resolvidos de proposito: ate onde cabem, 606px exatos; abaixo disso, metade da largura para cada lado. */ .lv-site-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(606px, 50%)); gap: 48px; align-items: center; } .lv-site-lista { list-style: none; margin: 0 0 26px; padding: 0; font-size: 15.5px; color: var(--lv-muted); line-height: 1.5; } .lv-site-lista li { display: flex; gap: 9px; align-items: center; margin-bottom: 10px; } .lv-site-lista li:last-child { margin-bottom: 0; } .lv-site-lista svg { flex: 0 0 auto; color: var(--lv-accent-strong); } /* O TRIO DE APARELHOS. As tres relacoes abaixo foram medidas numa montagem aprovada pelo dono do produto, e nao escolhidas a olho: laterais 68% da largura do aparelho central folga 8px entre eles, praticamente encostados pe das laterais 13px acima do pe do central AS LATERAIS ANCORAM NO CENTRAL, e nao nas bordas do palco. Presas com `left: 0` / `right: 0`, a folga passava a depender da largura da coluna: o CSS dizia 8px e na tela aparecia um vao de dezenas de pixels, porque a coluna e mais larga que o trio. A ALTURA SAI DA PROPORCAO DA IMAGEM, 2.112 (1413 / 669 do recorte), e nao de um numero redondo. Os PNGs tinham 178px de margem transparente de cada lado antes do recorte, e enquanto tinham, a caixa que o navegador media nao era o aparelho -- toda conta de posicao saia errada. */ /* `min-width: 0` NAO E ENFEITE. O minimo automatico de um item de grade e o `min-content`, e `.lv-trio { width: 606px }` vira esse piso: sem isto a coluna do texto era espremida ate 306px a 1024, e a divisao declarada em `grid-template-columns: 1.1fr .9fr` nunca valia -- o titulo quebrava em duas linhas de 1280 para baixo enquanto a coluna decorativa segurava 606px. */ .lv-site-palco { position: relative; padding: 24px 0; min-width: 0; } .lv-site-palco::before { /* SEM FOLGA HORIZONTAL. Com `inset: -8% -6%` o halo passava 36px de cada lado do palco e, a 1280 de viewport, estourava a janela em 4px: a pagina inteira ganhava rolagem lateral por causa de um brilho decorativo. Ele cresce so na vertical, onde nao ha borda para furar. */ content: ""; position: absolute; inset: -12% 0; background: radial-gradient(closest-side, var(--lv-accent-soft), transparent 74%); border-radius: 50%; opacity: .9; } .lv-site-palco picture { display: contents; } /* TUDO EM PORCENTAGEM DO TRILHO, e nao em margem fixa. A primeira versao posicionava as laterais com `margin-left: -303px` a partir do centro, o que so funciona com o palco de 606px ou mais. A coluna da direita desta secao mede 507px a 1280 de viewport: as laterais saiam pela margem e a PAGINA INTEIRA GANHAVA ROLAGEM HORIZONTAL, medida em 1280, 1023 e 768. Com o trilho de 606px e `max-width: 100%`, o conjunto encolhe inteiro e as tres relacoes (68%, folga, pe) se mantem em qualquer largura. */ .lv-trio { position: relative; width: 606px; max-width: 100%; margin: 0 auto; aspect-ratio: 606 / 528; } .lv-trio-ap { position: absolute; display: block; height: auto; filter: drop-shadow(0 26px 34px rgba(26, 18, 40, .34)); } .lv-trio-ap.is-meio { left: 29.37%; top: 0; width: 41.25%; z-index: 3; } .lv-trio-ap.is-esq { left: 0; top: 29.55%; width: 28.05%; z-index: 1; } .lv-trio-ap.is-dir { left: 71.95%; top: 29.55%; width: 28.05%; z-index: 1; } /* A pilula do endereco ancora no PE DO APARELHO CENTRAL, e nao no pe do palco: presa embaixo ela flutuava a mais de cem pixels do celular e lia-se como outro elemento da pagina. */ .lv-site-endereco { /* O -50% saiu do `translate` e virou `margin-left`: a animacao acima escreve `translate`, e as duas coisas no mesmo eixo se atropelam. */ position: absolute; left: 50%; top: 94.7%; z-index: 4; background: var(--lv-surface); border: 1px solid var(--lv-line); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--lv-muted); white-space: nowrap; box-shadow: 0 10px 24px -14px rgba(26, 18, 40, .35); transform: translateX(-50%); } .lv-site-endereco b { color: var(--lv-accent-texto); } /* Flutuacao lenta e defasada, que e o que da profundidade ao conjunto parado. */ @media (prefers-reduced-motion: no-preference) { /* A PILULA SOBE COM O APARELHO DO MEIO, no mesmo ritmo. Ela esta ancorada no pe dele de proposito; parada enquanto ele flutua, descolava 11px a cada volta, e o descolamento aparecia justamente por causa da ancoragem. */ .lv-trio-ap.is-meio, .lv-site-endereco { animation: lvTrioSobe 7s ease-in-out infinite; } .lv-trio-ap.is-esq, .lv-trio-ap.is-dir { animation: lvTrioSobe 9s ease-in-out infinite; } @keyframes lvTrioSobe { 0%, 100% { translate: 0 0 } 50% { translate: 0 -11px } } } /* NO CELULAR SOBRA UM APARELHO SO. O trio ocupa 606px de largura; a 390px as laterais sairiam pela margem, e encolher os tres deixaria as telas pequenas demais para se ler o que elas mostram -- que e a unica razao de haver tres. */ @media (max-width: 1023px) { .lv-site-grid { grid-template-columns: 1fr; gap: 32px; } .lv-site-palco { padding: 12px 0 28px; } /* A proporcao e a DA IMAGEM (2.112), e nao um numero redondo: com 216/484 sobravam 27,8px de trilho vazio abaixo do aparelho, e a pilula do endereco encostava diferente do desktop. */ .lv-trio { width: 216px; aspect-ratio: 216 / 456; } .lv-trio-ap.is-esq, .lv-trio-ap.is-dir { display: none; } .lv-trio-ap.is-meio { left: 0; width: 100%; } .lv-site-endereco { top: 92%; } } /* ===== PERGUNTAS FREQUENTES ============================================ `.faq-list`, `.faq-item`, `.faq-question` e `.faq-answer` sao o markup de `assets/includes/faq_section.php`, que nao e nosso para renomear: o `/faq.php` usa o mesmo include e continua no templatemo. O COMPORTAMENTO E POR CLASSE `.open`, no `onclick` do proprio include, que alterna a classe no botao E na resposta. Uma folha que so estilize o estado aberto deixa TODAS as respostas visiveis, porque o padrao do include e markup sem classe nenhuma. Por isso `display: none` e regra base aqui. */ .faq-item { border: 1px solid var(--lv-line); border-radius: 12px; margin-bottom: 12px; background: var(--lv-surface); overflow: hidden; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--lv-font-display); font-weight: 700; font-size: 16px; color: var(--lv-ink); } .faq-question i { flex: 0 0 auto; color: var(--lv-accent); transition: transform .2s; } .faq-question.open i { transform: rotate(180deg); } .faq-answer { display: none; padding: 0 22px 18px; font-size: 15px; line-height: 1.7; color: var(--lv-muted); } .faq-answer.open { display: block; } .faq-answer ul { list-style: none; padding-left: 0; margin-bottom: 15px; } .faq-answer ul li { margin-bottom: 6px; } /* SO os nomes dos planos viram bloco, e eles se marcam com a classe. Nem `strong` nem `> strong` servem: os negritos do meio das frases tambem sao filhos diretos da resposta, e quebravam em linha propria. */ .faq-answer .faq-plano { display: block; color: var(--lv-ink); margin-top: 10px; } @media (prefers-reduced-motion: reduce) { .faq-question i { transition: none; } } /* ===== LEIA TAMBEM ===================================================== Cartao com foto, e nao pilula de texto. A diferenca nao e so' estetica: com o registro de `blog/config.php` como fonte, o bloco passa a ter titulo real, resumo, categoria e tempo de leitura -- e o titulo deixa de ser uma copia escrita a mao na configuracao de cada landing, que envelhecia sozinha. O CARTAO INTEIRO E O LINK, e nao so' o titulo. Alvo de toque grande, e nada de link aninhado dentro de link. Por isso os filhos sao `` com `display` trocado: `

` dentro de `` e valido em HTML5, mas `

` e `

` nao sao, e o navegador fecha o `` sozinho no meio. / .lv-leia { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } .lv-leia-cartao { display: flex; flex-direction: column; background: var(--lv-surface); border: 1px solid var(--lv-line); border-radius: 16px; overflow: hidden; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; } .lv-leia-cartao:hover, .lv-leia-cartao:focus-visible { border-color: var(--lv-accent); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(220, 140, 219, .18); } / 16:9 pela proporcao, e nao por altura fixa: as fotos do blog vem em tamanhos diferentes, e altura fixa deixaria a grade desalinhada quando uma faltasse. / .lv-leia-foto { display: block; aspect-ratio: 16 / 9; background: var(--lv-accent-soft); overflow: hidden; } .lv-leia-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .lv-leia-corpo { display: flex; flex-direction: column; gap: 7px; padding: 18px 20px 20px; } .lv-leia-cat { font-family: var(--lv-font-display); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--lv-accent-texto); } .lv-leia-titulo { font-family: var(--lv-font-display); font-weight: 800; font-size: 17px; line-height: 1.35; color: var(--lv-ink); } / O resumo do registro tem duas a tres linhas; o teto mantem os cartoes com a mesma cara sem cortar o texto no meio de uma palavra. / .lv-leia-resumo { font-size: 14px; line-height: 1.6; color: var(--lv-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .lv-leia-tempo { margin-top: 3px; font-size: 12.5px; color: var(--lv-muted); } @media (prefers-reduced-motion: reduce) { .lv-leia-cartao { transition: none; } .lv-leia-cartao:hover { transform: none; } } / ===== O SITE DO CASAMENTO, DENTRO DO MODAL ============================= `#wantSiteBox` so existe na landing de casamento, no passo 3 de quem ja esta logado. Ficava com sete declaracoes `style=` no HTML; aqui elas viram regra, e as cores saem dos tokens em vez do rosa chumbado que sobrou do tema antigo. / #wantSiteBox { display: flex; align-items: flex-start; gap: 10px; text-align: left; background: var(--lv-accent-soft); border: 1.5px solid var(--lv-accent); border-radius: 14px; padding: 13px 15px; margin-bottom: 14px; cursor: pointer; font-size: 14.5px; color: var(--lv-ink); line-height: 1.45; } #wantSite { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--lv-accent-strong); } / `--lv-accent-texto` como os outros cinco: sobre `--lv-accent-soft` o `--lv-accent-strong` cai para 3,36:1, e este e o menor texto da familia (11px). Ele escapou da varredura anterior porque so' aparece no passo do modal de quem ja esta logado. / .lv-selo-novo { background: var(--lv-accent-soft); color: var(--lv-accent-texto); font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 6px; vertical-align: middle; border: 1px solid var(--lv-accent); } .lv-want-site-desc { color: var(--lv-muted); font-size: 13px; } / O titulo e a linha quando a secao e de DUAS COLUNAS, e nao centralizada. Eram `style=` no HTML, e ali eles venciam `.lv-titulo` por especificidade sem aparecer em folha nenhuma -- e ainda faziam a comparacao de paridade entre landings acusar cinco diferencas que nao eram defeito. / .lv-titulo-lado { font-size: 38px; margin-bottom: 16px; } .lv-linha-lado { margin: 0 0 20px; max-width: none; } / IMEDIATAMENTE DEPOIS DA REGRA BASE, e nao no fim do arquivo. `.lv-titulo-lado` e uma regra base (0,1,0) numa folha carregada DEPOIS do `lv-secoes.css`, onde `@media (max-width: 639px) { .lv-titulo { 32px } }` tambem e (0,1,0). `@media` nao soma especificidade, entao a regra base vencia por ordem: medido em `/criar-lista/casamento` a 390px, o titulo do bloco do site saia com 38px enquanto todos os outros respeitavam os 32px -- um subtitulo de secao virava o maior texto da pagina no celular. E exatamente a forma de defeito que o CLAUDE.md registra por ter custado caro uma vez. Escapou porque a paridade compara landings ENTRE SI, e so' `casamento` desenha este bloco: nao havia par de quem divergir. / @media (max-width: 639px) { .lv-titulo-lado { font-size: 32px; } } / O link para a pagina dedicada do site, logo abaixo do CTA do bloco. / .lv-site-saiba { margin: 14px 0 0; font-size: 14.5px; } / Sobre `--lv-accent-soft`, `--lv-accent-strong` cai para 3,36:1. */ .lv-site-saiba a { color: var(--lv-accent-texto); text-decoration: underline; }